semantic-ui-react#Grid JavaScript Examples

SuccessMessage = (props) => {
  const { user, patient } = props;
  return (
    <Grid.Row>
      <Message icon color="green">
        <Icon name="check circle" />
        <Message.Content>
          <Message.Header>Launch successful!</Message.Header>
          <List>
            <List.Item>Patient: {patient.id}</List.Item>
            <List.Item>User: {user}</List.Item>
          </List>
        </Message.Content>
      </Message>
      <Divider hidden />
    </Grid.Row>
  );
}

renderHeader() {
    const { title, subtitle, headerActionComponent } = this.props;
    const header = title ? (
      <Header as="h3" content={title} subheader={subtitle} />
    ) : null;

    if (!(title || subtitle || !_isEmpty(headerActionComponent))) {
      return null;
    }
    return (
      <Grid>
        <Grid.Row>
          <Grid.Column
            width={headerActionComponent ? 8 : 16}
            verticalAlign="middle"
          >
            {header}
          </Grid.Column>
          <Grid.Column width={8} textAlign="right">
            {headerActionComponent}
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }

render(){
        return (
            <Layout>
                <h3>Campaign Details</h3>
                <Grid>
                    <Grid.Row>
                        <Grid.Column width={10}>
                            {this.renderCards()}
                        </Grid.Column>
                        <Grid.Column width={6}>
                            <h3>Contribute to this Campaign</h3>
                            <ContributeForm address={this.props.address}/>
                        </Grid.Column>  
                    </Grid.Row> 

                    <Grid.Row>
                        <Grid.Column>
                            <Link route={`/campaigns/${this.props.address}/requests`}>
                                <a><Button primary>View Requests</Button></a>
                            </Link>
                        </Grid.Column>
                    </Grid.Row>
                 </Grid>
                 
            </Layout>
        );
    }

/**
 * Grid divider component
 */
function GridDivider(props) {
  const { colWidth } = props;
  return (
    <Grid.Column width={colWidth}>
      <Divider fitted />
    </Grid.Column>
  );
}

export default function Index() {
  const title = "Deni Apps";
  const desc =
    "Software Engineer for React.js, Node.js, GraphQL and JavaScript. Based in USA, Chinese/English speaking. Consulting/Freelancing for Web Development project: Code Audits/Reviews, Workshops, Training, Implementation ...";

  const summary =
    "DiNiApps - A software engineer's online notebook recording everything related to React,js, Node.js, GraphQL, Javascript, and more.";
  const canonical = "https://deniapps.com";
  const image = "https://deniapps.com/images/dna.png";

  const seoData = {
    title,
    desc,
    summary,
    canonical,
    image,
  };

  return (
    <Layout pageType="home" seoData={seoData}>
      <Grid>
        <Grid.Column>
          <h1 className="hp-header">Deni Apps</h1>
          <p className="hp-slogan">We Build Websites & Apps</p>
        </Grid.Column>
      </Grid>
    </Layout>
  );
}

export default function Metadata (props) {
  const { api } = useSubstrate();
  const [metadata, setMetadata] = useState({ data: null, version: null });

  useEffect(() => {
    const getMetadata = async () => {
      try {
        const data = await api.rpc.state.getMetadata();
        setMetadata({ data, version: data.version });
      } catch (e) {
        console.error(e);
      }
    };
    getMetadata();
  }, [api.rpc.state]);

  return (
    <Grid.Column>
      <Card>
        <Card.Content>
          <Card.Header>Metadata</Card.Header>
          <Card.Meta><span>v{metadata.version}</span></Card.Meta>
        </Card.Content>
        <Card.Content extra>
          <Modal trigger={<Button>Show Metadata</Button>}>
            <Modal.Header>Runtime Metadata</Modal.Header>
            <Modal.Content scrolling>
              <Modal.Description>
                <pre><code>{JSON.stringify(metadata.data, null, 2)}</code></pre>
              </Modal.Description>
            </Modal.Content>
          </Modal>
        </Card.Content>
      </Card>
    </Grid.Column>
  );
}

render() {
    return (
      <Media greaterThan="mobile">
        <Grid textAlign="center" className="search-footer-pagination">
          <Grid.Column>
            <SearchPagination />
          </Grid.Column>
        </Grid>
      </Media>
    );
  }

render() {
    return (
      <Grid columns={2} stackable>
        <Grid.Row stretched>
          <Grid.Column width={4}>
            <Segment><CCP /></Segment>
          </Grid.Column>
          <Grid.Column width={12}>
            <Segment><CCPDataMenu /></Segment>
          </Grid.Column>
        </Grid.Row>
        <AmplifySignOut />
      </Grid>
    );
  }

OrderLine = ({ line }) => {
  return (
    <Item>
      <Item.Content>
        <Link to={BackOfficeRoutes.documentDetailsFor(line.document.pid)}>
          <LiteratureTitle
            title={line.document.title}
            edition={line.document.edition}
            publicationYear={line.document.publication_year}
          />
        </Link>
        <Divider />
        <Grid columns={3}>
          <Grid.Column>
            <OrderLineLeftColumn line={line} />
          </Grid.Column>
          <Grid.Column>
            <OrderLineMiddleColumn line={line} />
          </Grid.Column>
          <Grid.Column>
            <OrderLineRightColumn line={line} />
          </Grid.Column>
        </Grid>
      </Item.Content>
    </Item>
  );
}

render() {
    return (
      <GridContainer verticalAlign="middle" columns={1}>
        <Grid.Column>
          {this.renderMobileMessage()}
          <StyledSegment>
            <Label as="a" color="blue" size="massive" ribbon>
              {year}
            </Label>
            <TextContainer>
              <h1 className="welcome">Welcome to Ada's Team Elections!</h1>
              <h2 className="subheader">
                We appreciate you all coming out to participate!
              </h2>
              <h3 className="info">{covidAcknowledgment}</h3>
              <h3 className="info">{beforeYouBegin}</h3>
              <h3 className="info">{checkOutCandidates}</h3>
            </TextContainer>
            <Link to="/validate">
              <Button disabled={false} fluid color="blue" size="massive">
                Start
              </Button>
            </Link>
          </StyledSegment>
        </Grid.Column>
      </GridContainer>
    );
  }

render() {
    const { record } = this.props;
    const docTitle = _get(
      record,
      'metadata.resolved_order_lines[0].document.title'
    );

    return (
      <Item>
        <Item.Content>
          <Item.Header
            as={Link}
            to={AcquisitionRoutes.orderDetailsFor(record.metadata.pid)}
            data-test={`navigate-${record.metadata.pid}`}
          >
            <AcquisitionOrderIcon />
            Order: {docTitle ? docTitle : record.metadata.pid}
          </Item.Header>
          <Grid highlight={3}>
            <Grid.Column computer={5} largeScreen={5}>
              {this.renderLeftColumn(record)}
            </Grid.Column>
            <Grid.Column computer={6} largeScreen={6}>
              {this.renderMiddleColumn(record)}
            </Grid.Column>
            <Grid.Column width={1} />
            <Grid.Column computer={3} largeScreen={3}>
              {this.renderRightColumn(record)}
            </Grid.Column>
          </Grid>
        </Item.Content>
        <div className="pid-field">#{record.metadata.pid}</div>
      </Item>
    );
  }

render() {
    const { redirect, eligible, voter } = this.state;
    if (redirect) {
      return <LoadEligibility voter={voter} eligible={eligible} />;
    }
    return (
      <GridContainer verticalAlign="middle" centered>
        <ImageContainer src={AdaBotStandingImage} />
        <Grid.Column width={6}>
          <Progress color="blue" percent={25}></Progress>
          {this.renderHeaderText()}
          {this.renderEligibleVoterForm()}
        </Grid.Column>
      </GridContainer>
    );
  }

render() {
    const { title } = this.state;
    return (
      <Segment className="document-stats">
        <Header as="h3">
          Statistics <small>{title}</small>
        </Header>
        <Grid columns={2} divided>
          <Grid.Row stretched>
            <Grid.Column width={4} floated="left">
              {this.renderFilters()}
            </Grid.Column>
            <Grid.Column width={12} textAlign="right" floated="right">
              {this.renderStats()}
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Segment>
    );
  }

render() {
        return (
            <Grid textAlign='center' verticalAlign='middle'>
                <Grid.Column style={{ maxWidth: 600 }}>
                    <Segment inverted color='blue'>
                        <Header as='h2' color='white' textAlign='center'>
                            Synonyms
                        </Header>
                        <p> Add words to the synonym dictionary! Synonym declarations must be formatted according to the PostgreSQL
                            thesaurus dictionary configuration file. In other words, each synonym must be declared in one line,
                            and must be formatted like this: </p>
                        <p> sample word(s) : indexed word(s) </p>
                        <Form inverted color='blue' loading={this.state.loading} onSubmit={this.handleSubmit}>
                            <Form.Field
                                fluid
                                control={TextArea}
                                rows='20'
                                name='fileContents'
                                value={this.state.fileContents}
                                onChange={this.handleChange}
                            />
                            <Form.Button color='black' content='Submit'/>
                        </Form>
                    </Segment>
                </Grid.Column>
            </Grid>
        )
    }

render() {
    return (
      <Segment>
        <Header as="h3" dividing>
          User submitted information
        </Header>
        <Grid padded columns={2}>
          <Grid.Row>
            <Grid.Column>
              <MetadataTable rows={this.userInputLeftColumn()} />
            </Grid.Column>
            <Grid.Column>
              <MetadataTable rows={this.userInputRightColumn()} />
            </Grid.Column>
          </Grid.Row>
        </Grid>

        <Header as="h3" dividing>
          Request state
        </Header>
        <Grid padded columns={2}>
          <Grid.Row>
            <Grid.Column>
              <MetadataTable rows={this.adminLeftColumn()} />
            </Grid.Column>
            <Grid.Column>
              <MetadataTable rows={this.adminRightColumn()} />
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Segment>
    );
  }

render() {
        return (
            <div className='page-container'>
                <Container>
                    <Grid centered columns={2}>
                        <Grid.Row>
                            <Grid.Column width={8}>
                                <BookingForm/>
                            </Grid.Column>
                            <Grid.Column width={8}>
                                <BookingDisplay/>
                            </Grid.Column>
                        </Grid.Row>
                    </Grid>
                </Container>
            </div>
        )
    }

render() {
    const { docReq } = this.props;
    return (
      <Segment>
        <Grid columns={2}>
          <Grid.Column>
            <Header as="h3">Search and select document</Header>
            <ESSelector
              onSelectResult={this.onSelectResult}
              query={documentApi.list}
              serializer={serializeDocument}
            />
          </Grid.Column>
          <Grid.Column textAlign="center" verticalAlign="middle">
            {this.createDocumentButton(docReq)}
          </Grid.Column>
        </Grid>
        <Divider vertical>Or</Divider>
      </Segment>
    );
  }

function Home() {
  const { user } = useContext(AuthContext);
  const {
    loading,
    data: { getPosts: posts }
  } = useQuery(FETCH_POSTS_QUERY);

  return (
    <Grid columns={1}>
      <Grid.Row className="page-title">
        <h1 id="quarantime">QUARANTIME</h1>
      </Grid.Row>
      <Grid.Row>
        {user && (
          <Grid.Column>
            <PostForm />
          </Grid.Column>
        )}
        {loading ? (
          <h1>Please wait..</h1>
        ) : (
          <Transition.Group>
            {posts &&
              posts.map((post) => (
                <Grid.Column key={post.id} style={{ marginBottom: 20, marginTop: 20 }}>
                  <PostCard post={post} />
                </Grid.Column>
              ))}
          </Transition.Group>
        )}
      </Grid.Row>
    </Grid>
  );
}

/**
   * render - return all the home page objects to be rendered.
   */
  render() {
    const { userInput } = this.state;

    return (
      <Grid celled className='search-grid'>

        <Grid.Row className='matches-grid-row'>
          <Grid.Column width={16}>

            <Card className='chatbot-container'>
              <Card.Content className='dialog-header'>
                <Card.Header>Document Search ChatBot</Card.Header>
              </Card.Content>
              <Card.Content>
                {this.getListItems()}
              </Card.Content>
              <Input
                icon='compose'
                iconPosition='left'
                value={userInput}
                placeholder='Enter response......'
                onKeyPress={this.handleKeyPress.bind(this)}
                onChange={this.handleOnChange.bind(this)}
              />
            </Card>

          </Grid.Column>
        </Grid.Row>

      </Grid>
    );
  }

render() {
    const {
      record: { metadata: brwReqMetadata },
    } = this.props;
    return (
      <Item>
        <Item.Content>
          <Item.Header
            as={Link}
            to={ILLRoutes.borrowingRequestDetailsFor(brwReqMetadata.pid)}
            data-test={`navigate-${brwReqMetadata.pid}`}
          >
            <ILLBorrowingRequestIcon />
            {brwReqMetadata.document.title}
          </Item.Header>
          <Grid highlight={3}>
            <Grid.Column computer={5} largeScreen={5}>
              {this.renderLeftColumn(brwReqMetadata)}
            </Grid.Column>
            <Grid.Column computer={6} largeScreen={6}>
              {this.renderMiddleColumn(brwReqMetadata)}
            </Grid.Column>
            <Grid.Column width={1} />
            <Grid.Column computer={3} largeScreen={3}>
              {this.renderRightColumn(brwReqMetadata)}
            </Grid.Column>
          </Grid>
        </Item.Content>
        <div className="pid-field">#{brwReqMetadata.pid}</div>
      </Item>
    );
  }

renderTool_level() {
    const deleteTool = (removeTool) => {
      // eslint-disable-next-line eqeqeq
      this.toolset = _.filter(this.toolset, function (tool) {
        return tool.name !== removeTool.name;
      });
      // console.log(removeSkill);
      const newState = { Skilladded: true };
      this.setState(newState);
    };
    if (this.toolset.length > 0) {
      // console.log(this.skillSet.length);
      return _.map(this.toolset, function (tool) {
        return <Grid.Row key={tool.docID}>
          <Grid.Column width={1} style={{ marginTop: `${10}px` }}>
            <Header as='h3'>Tool:</Header> </Grid.Column>
          <Grid.Column width={4} style={{ marginTop: `${10}px` }}><Header as='h3'>{tool.name}</Header></Grid.Column>
          {/* eslint-disable-next-line max-len */}
          <Grid.Column width={1} style={{ marginTop: `${10}px` }}><Header as='h3'>Level:</Header> </Grid.Column>
          <Grid.Column width={5} style={{ marginTop: `${10}px` }}><Header as='h3'>{tool.level}</Header></Grid.Column>
          {/* eslint-disable-next-line max-len */}
          <Grid.Column width={3}><Button type='button' onClick={() => deleteTool(tool)}>delete the
            tool</Button></Grid.Column>
        </Grid.Row>;
      });
    }

    // eslint-disable-next-line eqeqeq
    return '';

  }

render() {
    const { error, smart, patient } = this.props;
    return (
      <Router history={history}>
        <Helmet />
        <Container style={{ marginTop: '2rem' }}>
          <Grid columns="1" stackable>
            <Grid.Column>
              {error ? <ErrorMessage {...error} /> : null}
              {patient ? <SuccessMessage patient={patient} user={smart.user} /> : null}
              <Grid.Row>
                <Header as="h1">FHIR App Starter</Header>
                <Divider />
              </Grid.Row>

              <Grid.Row>
                <Information />
              </Grid.Row>

              <Grid.Row>
                <Divider />
              </Grid.Row>

              {smart ? (
                <Switch>
                  <Route path="/" exact component={Home} />
                </Switch>
              ) : null}
            </Grid.Column>
          </Grid>
        </Container>
      </Router>
    );
  }

render() {
    const { filesEnabled, dropzoneParams, filesList } = this.props;
    return filesEnabled ? (
      <Dropzone {...dropzoneParams}>
        {({ getRootProps, getInputProps, open: openFileDialog }) => (
          <Grid.Column width={16}>
            <span {...getRootProps()}>
              <input {...getInputProps()} />
              {filesList.length !== 0 && (
                <Grid.Column verticalAlign="middle">
                  <FilesListTable {...this.props} />
                </Grid.Column>
              )}
              <FileUploadBox {...this.props} openFileDialog={openFileDialog} />
            </span>
          </Grid.Column>
        )}
      </Dropzone>
    ) : (
      <Grid.Column width={16}>
        <Segment basic padded="very" className="file-upload-area no-files">
          <Grid textAlign="center">
            <Grid.Row verticalAlign="middle">
              <Grid.Column>
                <Header size="medium">
                  {i18next.t('This is a Metadata-only record.')}
                </Header>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Segment>
      </Grid.Column>
    );
  }

PatronShowLink = ({
  items,
  onShowAllClick,
  onShowLessClick,
  rowsPerPage,
}) => {
  const allHits = items.total === items.hits.length;
  return (
    items.total > 0 &&
    items.total > rowsPerPage && (
      <Grid>
        <Grid.Column textAlign="center">
          {!allHits ? (
            <>
              <Divider hidden />
              <a href="javascript:void(0)" onClick={() => onShowAllClick()}>
                SHOW ALL <Icon name="caret right" />
              </a>
            </>
          ) : (
            <a href="javascript:void(0)" onClick={() => onShowLessClick()}>
              SHOW LESS <Icon name="caret right" />
            </a>
          )}
        </Grid.Column>
      </Grid>
    )
  );
}

render() {
    return (
        <Grid celled style={paleBlueStyle}>
          <Grid.Row columns={7}>
            <Grid.Column>
              <Header>Name</Header>
            </Grid.Column>
            <Grid.Column>
              <Header>Challenges</Header>
            </Grid.Column>
            <Grid.Column>
              <Header>Desired Skills</Header>
            </Grid.Column>
            <Grid.Column>
              <Header>Desired Tools</Header>
            </Grid.Column>
            <Grid.Column>
              <Header>Devpost/Github</Header>
            </Grid.Column>
            <Grid.Column>
              <Header>Members</Header>
            </Grid.Column>
            <Grid.Column>
              <Header>Join?</Header>
            </Grid.Column>
          </Grid.Row>
          {this.props.teams.map((team) => (
              <ListTeamExampleWidget key={team._id}
                                     team={getTeam(team._id)}
                                     teamChallenges={getTeamChallenges(team)}
                                     teamSkills={getTeamSkills(team)}
                                     teamTools={getTeamTools(team)}
                                     teamMembers={getTeamMembers(team)}
              />
          ))}
        </Grid>
    );
  }

render() {
    const { location } = this.props;
    const metadata = location.metadata;
    const today = DateTime.local().toISODate();
    return (
      <Grid centered columns={2}>
        <Grid.Column computer={7} mobile={16}>
          <Table striped>
            <Table.Header>
              <Table.Row textAlign="center">
                <Table.HeaderCell colSpan="4">Weekly schedule</Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>{this.renderWeekdayRows(today)}</Table.Body>
          </Table>
        </Grid.Column>
        <Grid.Column computer={9} mobile={16}>
          <Table striped>
            <Table.Header>
              <Table.Row textAlign="center">
                <Table.HeaderCell colSpan={4}>
                  Closures and exceptions
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>{this.renderExceptionRows(today)}</Table.Body>
          </Table>
          {!metadata.opening_exceptions.length && (
            <InfoMessage message="There are no exceptions planned in the near future." />
          )}
        </Grid.Column>
      </Grid>
    );
  }

render() {
    if (this.state.redirectToReferer) {
      const from = { pathname: ROUTES.LANDING };
      return <Redirect to={from}/>;
    }
    return (
        <div style={{ paddingBottom: '50px' }}>
          <div style={{
            backgroundColor: '#E5F0FE', padding: '1rem 0rem', margin: '2rem 0rem',
            borderRadius: '2rem',
          }}>
          <Header as="h2" textAlign="center">Minor Participants List ({this.props.MinorParticipantsID.length})</Header>
            <Button color="green" onClick={() => this.download()}>Download minor participants</Button>
          </div>
          <div style={{
            borderRadius: '1rem',
            backgroundColor: '#E5F0FE',
          }}>
          <Table fixed>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>Minor Participant Name</Table.HeaderCell>
                <Table.HeaderCell>Parent Name (Email)</Table.HeaderCell>
                <Table.HeaderCell>Compliant</Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>{this.renderMinorParticipants()}</Table.Body>
          </Table>
          <Grid centered >

              <Button type='button' style={{ textAlign: 'center', color: 'white', backgroundColor: '#DB2828',
                margin: '2rem 0rem' }} onClick = {() => this.submitData()}>submit</Button>
          </Grid>

          </div>
        </div>
    );
  }

render() {
    const {
      record: { metadata: providerMetadata },
    } = this.props;
    return (
      <Item>
        <Item.Content>
          <Item.Header
            as={Link}
            to={ProviderRoutes.providerDetailsFor(providerMetadata.pid)}
            data-test={`navigate-${providerMetadata.pid}`}
          >
            <ProviderIcon />
            {providerMetadata.name}
          </Item.Header>
          <Item.Meta>
            Type: <strong>{providerMetadata.type}</strong>
          </Item.Meta>
          <Grid highlight={3}>
            <Grid.Column computer={6} largeScreen={6}>
              {this.renderAddress()}
            </Grid.Column>
            <Grid.Column computer={4} largeScreen={4}>
              {this.renderMiddleColumn(providerMetadata)}
            </Grid.Column>
            <Grid.Column width={1} />
            <Grid.Column computer={3} largeScreen={3}>
              {this.renderRightColumn(providerMetadata)}
            </Grid.Column>
          </Grid>
        </Item.Content>
        <div className="pid-field">#{providerMetadata.pid}</div>
      </Item>
    );
  }

FileUploadBox = ({
  isDraftRecord,
  filesList,
  dragText,
  uploadButtonIcon,
  uploadButtonText,
  openFileDialog,
}) =>
  isDraftRecord && (
    <Segment
      basic
      padded="very"
      className={
        filesList.length ? 'file-upload-area' : 'file-upload-area no-files'
      }
    >
      <Grid columns={3} textAlign="center">
        <Grid.Row verticalAlign="middle">
          <Grid.Column mobile={16} tablet={7} computer={7}>
            <Header size="small">{dragText}</Header>
          </Grid.Column>

          <Grid.Column
            className="mt-10 mb-10"
            mobile={16}
            tablet={2}
            computer={2}
          >
            - {i18next.t('or')} -
          </Grid.Column>

          <Grid.Column mobile={16} tablet={7} computer={7}>
            <Button
              type="button"
              primary={true}
              labelPosition="left"
              icon={uploadButtonIcon}
              content={uploadButtonText}
              onClick={() => openFileDialog()}
              disabled={openFileDialog === null}
            />
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Segment>
  )