function Generator({ location }: Props) { return ( <Layout> <Header> <Logo /> </Header> <SideNav /> <Content> <Form location={location} /> <LoadablePreview hideOnMobile /> </Content> <Footer> <Progress /> </Footer> </Layout> ) }
</Header> <SectionDivider /> <Content> <section> <Heading>Help</Heading>
const Modal = ({ children, onClick }) => ( <Wrapper onClick={onClick}> <Content> {children} </Content> </Wrapper>)
describe('<Content />', () => { it('works', () => { const wrapper = renderer.create(<Content />).toJSON(); expect(wrapper).toMatchSnapshot(); }); });
const Login = (props) => { const { from } = props.location.state || {from: {pathname: "/home"}}; const [isLoggedIn, logIn] = useContext(SessionContext) async function handleClick() { await logIn(true) } if (isLoggedIn) { return <Redirect to={from} /> } return ( <Content> <h2>You need to be logged to see the route: {from.pathname}</h2> <button onClick={handleClick}>Login</button> </Content> ) }
const Step = props => { const { isActive, displayPrevious, displayNext, displayReset, children, colour } = props if (isActive === false) return null console.log(props) return ( <Wrapper colour={colour}> <Content> {children} <Controls> <Previous isActive={displayPrevious} goToPreviousStep={() => props.goToPreviousStep()} /> <Next isActive={displayNext} goToNextStep={() => props.goToNextStep()} /> <Reset isActive={displayReset} goToFirstStep={() => props.goToFirstStep()} /> </Controls> </Content> </Wrapper> ) }
renderLayout() { const { collapsedSidebar, toggleSidebar } = this.props.blog.ui; return ( <MainLayout> <Sider width={260} trigger={null} collapsible collapsed={collapsedSidebar} > <AdminUserMenu user={this.props.user} collapsed={collapsedSidebar} /> <AdminSidebarMenu /> </Sider> <LayoutContent collapsed={collapsedSidebar}> <Content noPadding={this.props.noPadding}> <TriggerIcon onClick={toggleSidebar} /> {this.props.children} </Content> </LayoutContent> </MainLayout> ); }
const ViewItem = ({item, deleteItem, ...props}) => ( <StyledItem {...props}> <Avatar letter={item.author.name[0]} /> <Content> {item.content} </Content> <button type="button" onClick={() => { deleteItem({ variables: { id: item.id } }); }}>Delete</button> </StyledItem> )
render() { const toggle = this.state.isOpened; //better solution: https://codesandbox.io/embed/pmjomxn60s return ( <Container> <Content> <button onClick={this.toggle}>toggle right panel</button> </Content> <Spring from={{ width: toggle ? 0 : 500 }} to={{ width: toggle ? 500 : 0 }} > {styles => { console.log(JSON.stringify(styles)); return <PanelContent style={styles}>PANEL</PanelContent>; }} </Spring> </Container> ); }
render() { const { children } = this.props; return ( <ExtendedOverlay animation={this.state.close ? hide : show}> <Window innerRef={this.setModalWindow}> <Header> <CloseLink onClick={this.closeModal}> <FontAwesomeIcon icon={faTimesCircle} size="2x" transform="shrink-2" /> </CloseLink> </Header> <Content>{children}</Content> <Footer> <CloseButton onClick={this.closeModal}>Close</CloseButton> </Footer> </Window> </ExtendedOverlay> ); }
const CourseBox = props => ( <Wrapper> <Item> <Thumbnail> <ThumbImg fluid={props.thumbnail} /> </Thumbnail> <Content> <Author>{props.author}</Author> <Title>{props.title}</Title> <Metadata> <Price>{props.price}</Price> <Students> <MultiplePerson style={{ marginRight: '5px' }} /> {props.students} </Students> </Metadata> </Content> </Item> </Wrapper> )
render() { const { board } = this.props; if (!board) { return <LoadingScreen />; } const lists = board.lists.edges.map(list => { return <List key={list.node.id} list={list.node} /> }); return ( <Wrapper> <Content> <BoardHeader board={board} /> <ListsContainer> {lists} <AddListForm board={board} /> </ListsContainer> </Content> </Wrapper> ) }
function Generator({ location }: Props) { return ( <Layout> <Header> <Logo /> </Header> <SideNav /> <Content> <Form location={location} /> <LoadablePreview hideOnMobile /> </Content> <Footer> <Progress /> </Footer> </Layout> ) }
</Header> <SectionDivider /> <Content> <section> <Heading>Help</Heading>
const MainContent = ({ children }) => ( <Wrapper> <Content> {children} </Content> </Wrapper> )