react-bootstrap#Col JavaScript Examples

renderComms(data) {
    return data.slice(Math.max(data.length - 4, 1)).map((log, i) => (
      <Row key={log.dateTime + i} style={styles.dateTime}>
        <Col md={12}>
          {`${moment(log.dateTime).format('YYYY-MM-DD HH:mm:ss.SSS')} ${log.size} bytes`}
        </Col>
      </Row>
    ));
  }

render() {
        const { data, labels, showSplashScreen } = this.state;

        if (showSplashScreen) {
            return <SplashScreen />;
        }

        return (
            <div>
                <Navbar />
                <Container fluid className="mb-4">
                    <Row>
                        <Col>Plot your own functions with ease</Col>
                        <Col xs md lg="8"/>
                        <Col><Toggler toggleTheme={this.props.themeToggler} /></Col>
                    </Row>
                </Container>
                <ChartSelector data={data} labels={labels} theme={this.props.theme} />
                <div style={{ marginBottom: '16px', border: '1px solid #eee', borderRadius: '8px', padding: '8px' }} className="col-sm-12">
                    <CodeEditor />
                </div>

                <div>
                    <Equation />
                </div>
                <Footer />
            </div>
        );
    }

function PlotSelectionTabContent({
    loading,
    loadInfo,
    selectedPlots,
    onRowsSelected,
    onRowsDeselected,
    ...props
}) {
    return (
        <Col sm={12}>
            <Tab.Content
                unmountOnExit>
                {props.data.map((value, index) => (
                    <Tab.Pane eventKey={index}>
                        <PlotsSelectionTable
                            onRowDoubleClick={(i, row) => loadInfo([row.parcelle])}
                            onRowsSelected={onRowsSelected}
                            onRowsDeselected={onRowsDeselected}
                            selectedKeys={selectedPlots}
                            data={props.data[index]}
                            tablloadingeIndex={index}/>
                        <div style={{height: 25}}>
                            <span style={{ "float": "right" }}>
                                {props.data?.[index]?.length ?? 0} <Message msgId="cadastrapp.parcelle.result.items" msgParams={{ number: props.data?.[index]?.length ?? 0 }} />&nbsp;
                                ({selectedPlots?.length ?? 0} <Message msgId="cadastrapp.parcelle.result.selected" msgParams={{ number: selectedPlots?.length ?? 0}} />)
                            </span>
                            {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
                        </div>
                    </Tab.Pane>
                ))}
            </Tab.Content>
        </Col>
    );
}

function JavaScript() {
  return (
    <Container>
      <div className="p-5"></div>
      <Row>
        <Col md='9'>
          <ResponsiveEmbed
            aspectRatio='16by9'
          >
            <iframe src="https://www.youtube.com/embed/iVmYaIZ5Hmk" title="JS" allowfullscreen></iframe>
          </ResponsiveEmbed>
        </Col>
        <Col md='3'>
          <Card text='dark'>
            <Card.Body>
              <h5>Curso Javascript</h5>
              <ul>
                <li>Apresentação</li>
              </ul>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </Container>
  );
}

Stats = () => (
  <Container>
    <Helmet>
      <title>Cosmos validators statistics | Cosmoscan</title>
      <meta
        name="description"
        content="Check out the list of Cosmoshub validators and their stats."
      />
      <meta
        itemProp="description"
        content="Check out the list of Cosmoshub validators and their stats."
      />
      <meta
        property="og:description"
        content="Check out the list of Cosmoshub validators and their stats."
      />
      <meta
        name="twitter:description"
        content="Check out the list of Cosmoshub validators and their stats."
      />
    </Helmet>

    <Row>
      <Col>
        <ValidatorsTable />
      </Col>
    </Row>
  </Container>
)

function HistoryDashboard() {

  const store = useStore();
  useEffect(() => {
    if (store.web3Initilized && !store.historyStore.events) {
      store.historyStore.getHistory();
    }
  });

  return store.web3Initilized ? (<div className="panel">
    <Row className="w-100">
      <Col md={12}>
        <div className="p-3 table">
          <div className="table-row table-header">
            <div className="table-row-column table-row-index">Block #</div>
            <div className="table-row-column table-center w-100">Action</div>
          </div>
          {
            store.historyStore.events && store.historyStore.events.map((item, index) => <Fragment key={item.block + index}>
              <div className="table-row">
                <div className="table-row-column table-row-index">{item.block.toString()}</div>
                <div className="table-row-column table-center w-100">{historyItemText(item)}</div>
              </div>
            </Fragment>)
          }
        </div>
      </Col>
    </Row>
  </div>) : null;
}

ViewDeck = ({ deck }) => {
    const dispatch = useDispatch();

    const handleDeleteClick = () => {
        dispatch(deleteDeck(deck));
    };
    const handleEditClick = () => {
        dispatch(navigate('/decks/edit'));
    };

    return (
        <Panel title={deck?.name}>
            <Col xs={12} className='text-center'>
                <ButtonGroup>
                    <button className='btn btn-primary' onClick={handleEditClick}>
                        Edit
                    </button>

                    <ConfirmButton onClick={handleDeleteClick}>
                        <Trans>Delete</Trans>
                    </ConfirmButton>
                </ButtonGroup>
            </Col>
            <DeckSummary deck={deck} />
        </Panel>
    );
}

function MaintenancePage() {
  return (
    <Container className="common-page-maintenance-container">
      <Row className="center-row">
        <Col>
          <h2 className="main-heading">
            <PowerIcon />
            Under Maintenance
          </h2>
          <Image
            src={maintenanceImage}
            className="common-page-maintenance-image"
          />
          <h6 className="common-page-maintenance-message">
            We are currently under maintenance. Apologies for the
            inconvenience caused. Please check back sometime later.
          </h6>
        </Col>
      </Row>
    </Container>
  );
}

GameTypes = ({ formProps }) => {
    const { t } = useTranslation();

    let types = [
        { name: 'beginner', label: t('Beginner') },
        { name: 'casual', label: t('Casual') },
        { name: 'competitive', label: t('Competitive') }
    ];

    return (
        <Form.Row>
            <Col xs={12} className='font-weight-bold'>
                <Trans>Type</Trans>
            </Col>
            <Form.Group as={Col}>
                {types.map((type) => (
                    <Form.Check
                        name='gameType'
                        key={type.name}
                        type='radio'
                        id={type.name}
                        label={type.label}
                        inline
                        onChange={formProps.handleChange}
                        value={type.name}
                        checked={formProps.values.gameType === type.name}
                    ></Form.Check>
                ))}
            </Form.Group>
        </Form.Row>
    );
}

function CategoryTopicsContainer(props) {
  const topics = useSelector((state) => state.topic.get.topics);
  const dispatch = useDispatch();
  const prevCurrentCategoryRef = useRef();
  useEffect(() => {
    if (prevCurrentCategoryRef.current?.id || (prevCurrentCategoryRef.current?._id !== props.currentCategory._id)) {
      dispatch(getCategoryTopics({_id: props.currentCategory._id}));
    }
    prevCurrentCategoryRef.current = props.currentCategory;
  });
  const currentCategory = props.currentCategory._id;
  if (topics[currentCategory] !== undefined) {
    return (
      <Row>
        {topics[currentCategory].map((topic) => (
          <Col key={topic._id} md={props.columnValue}>
            <CategoryTopicCard
              entityType="topic"
              category={props.currentCategory}
              topic={topic}
            />
          </Col>
        ))}
      </Row>
    );
  } else {
    return null;
  }
}

ProfileCardSize = (props) => {
    const { t } = useTranslation();
    const { cardSizes, selectedCardSize, onCardSizeSelected } = props;

    return (
        <Panel title={t('Card Image Size')}>
            <Row>
                <Col xs='12'>
                    {cardSizes.map((cardSize) => (
                        <CardSizeOption
                            key={cardSize.name}
                            label={cardSize.label}
                            name={cardSize.name}
                            onSelect={onCardSizeSelected}
                            selected={selectedCardSize === cardSize.name}
                        />
                    ))}
                </Col>
            </Row>
        </Panel>
    );
}

InformationPost = ({ data }) => {
    const post = data.markdownRemark
    return (
        <Layout>
        <SEO title={post.frontmatter.title} />
            <Row>
                <Col className="space"></Col>
            </Row>
            <Row>
                <Col className="title-obi">
                    <h1 className="h1-font">{post.frontmatter.title}</h1>
                </Col>
            </Row>
            <Row>
                <Col className="space"></Col>
            </Row>
            <Row>
                <Col>
                <p>{post.frontmatter.date}</p>
                    <div dangerouslySetInnerHTML={{ __html: post.html }} />
                </Col>
            </Row>
            <Row>
            <Col className="space"></Col>
            </Row>
        </Layout>
    )
}

LoginContainer = () => {
    const dispatch = useDispatch();
    const { t } = useTranslation();
    const apiState = useSelector((state) => {
        const retState = state.api[Auth.LoginAccount];

        if (retState && retState.status === 401) {
            retState.message = t('Invalid username/password');
        } else if (retState && retState.success) {
            retState.message = t('Login successful, redirecting you to the home page');

            setTimeout(() => {
                dispatch(clearApiStatus(Auth.LoginAccount));
                dispatch(authenticateSocket());
                dispatch(navigate('/'));
            }, 500);
        }

        return retState;
    });

    return (
        <Col lg={{ span: 8, offset: 2 }}>
            <Panel title={t('Login')}>
                <ApiStatus
                    state={apiState}
                    onClose={() => dispatch(clearApiStatus(Auth.LoginAccount))}
                />
                <Login onSubmit={(values) => dispatch(loginAccount(values))} />
            </Panel>
        </Col>
    );
}

InformationPage = ({ data }) => (
  <Layout>
    <SEO title="インフォメーション" />
    <Row>
      <Col className="space"></Col>
    </Row>
    <Row>
      <Col className="title-obi">
        <h1 className="h1-font">インフォメーション</h1>
      </Col>
    </Row>
    <Row>
      <Col className="space"></Col>
    </Row>
    <Row>
    {data.allMarkdownRemark.edges.map(({ node }) => (
          <Col xs={12} md={6} key={node.fields.slug}>
            <Card style={{marginTop:`1rem`}}>
              <Card.Body>
                <Card.Title>
                    <Link to={`/${node.fields.slug}`}>
                        {node.frontmatter.title}
                    </Link>
                </Card.Title>
                <Card.Text>
                    {node.excerpt}
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
    ))}
    </Row>
    <Row>
      <Col className="space"></Col>
    </Row>
  </Layout>
)

render() {
        let content;

        if (!this.props.nodeStatus) {
            content = <div>Waiting for game node status from the lobby...</div>;
        } else if (this.props.nodeStatus.length > 0) {
            content = this.getNodesTable();
        } else {
            content = <div>There are no game nodes connected. This is probably bad.</div>;
        }

        return (
            <Col sm={{ span: 10, offset: 1 }}>
                <Panel title='Game Node Administration'>
                    {content}

                    <button className='btn btn-default' onClick={this.onRefreshClick}>
                        Refresh
                    </button>
                </Panel>
            </Col>
        );
    }

ContactDone = () => (
    <Layout>
      <SEO title="お問い合わせ送信完了" />
      <Container fluid="md" style={{width:`80%`}}>
        <Row>
        <Col className="space"></Col>
        </Row>
        <h1 style={{fontSize:`1.2rem`}}>お問い合わせ送信完了</h1>
          <p>お問い合わせありがとうございます。弊社担当者より２～３営業日中にご連絡致します。</p>
        <h2 style={{fontSize:`1.2rem`}}>Message sent Success!</h2>
          <p>Thank you your inquiry. We will contact you by within 2~3 business days.</p>
        <Row>
        <Col className="space"></Col>
        </Row>
      </Container>
    </Layout>
)

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin">
          <NoticeForm />
        </Route>
        <Route path="/">
          <Container fluid="true" className="mt-5 pt-2">
            <Row>
              <Col md="8" className="mb-3">
                  <VideoPart />
              </Col>
              <Col md="4">
                  <ChartPart />
              </Col>
            </Row>
          </Container>
        </Route>
      </Switch>
    </Router>
  );
}

render() {
    return (
      <React.Fragment>
        <div className="mx-2">
          <Row className="pt-4">
            <Col md="12">
              <SystemStatistics stats={this.props.stats} />
            </Col>
            <Col md="12">
              <YourStatistics stats={this.props.stats} />
            </Col>
          </Row>
        </div>
      </React.Fragment>
    );
  }

LeftAuth = () => {
  return (
    <>
      <div className="component-logo">
        <Container>
          <Row className="no-gutters">
            <Col md={12} className="logo-arka">
              <img src={logoArka} alt="logo-arka" />
            </Col>
            <Col md={12} className="logo-human-report">
              <img src={humanReport} alt="logo-human-report" />
            </Col>
            <Col md={12} className="title-hire">
              <Row className="no-gutters">
                <Col md={2}></Col>
                <Col md={8}>
                  <p className="hire">
                    Hire Expert freelancers for any job, online
                  </p>
                  <p className="hire-small">
                    Millions of small businesses use Freelancer to turn their
                    ideas into reality.
                  </p>
                </Col>
                <Col md={2}></Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
}

render() {
    return (
      <React.Fragment>
        <Card className="card-square">
          <Card.Header as="h5">System Statistics</Card.Header>
          <Card.Body className="pb-1">
            <Row className="text-center">
              <Col className="">
                <h4 className="mb-0"> Total Monitorees </h4>
                <div style={{ width: '100%', height: 250 }} className="recharts-wrapper">
                  <ResponsiveContainer>
                    <PieChart onMouseEnter={this.onPieEnter}>
                      <Pie data={this.data} innerRadius={55} outerRadius={85} fill="#8884d8" paddingAngle={2} dataKey="value">
                        {this.data.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={this.getColorForType(entry)} />
                        ))}
                        <Label className="display-5" value={this.props.stats.system_subjects} position="center" />
                      </Pie>
                      <Legend layout="vertical" align="right" verticalAlign="middle">
                        {' '}
                      </Legend>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                <div className="text-muted">
                  {this.percentageChange > 0
                    ? `Count is up ${this.props.stats.system_subjects_last_24} (${this.percentageChange}%) within last 24 hours`
                    : null}
                </div>
              </Col>
            </Row>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }

Greenroom = () => {
  const [openChat, setOpenChat] = useState(false);

  const handleOpenChat = () => {
    setOpenChat((prevState) => !prevState);
  };
  return (
    <>
      <Head>
        <title>Conference Green Room</title>
        <link rel="icon" href="../../rocket_gsoc_0" />
      </Head>
      <main className={styles.main}>
        <div className={styles.container}></div>
        <Container>
          <Row>
            <Col>
              <Jitsibroadcaster
                room={"GSOC Alumnus Meet"}
                disName={"Speaker"}
                handleChat={handleOpenChat}
              />
            </Col>
            {openChat && (
              <Col xs={4}>
                <InAppChat
                  host={host}
                  closeChat={handleOpenChat}
                  rid={greenroom_rid}
                />
              </Col>
            )}
          </Row>
        </Container>
      </main>
    </>
  );
}

render() {
        let uiBuildNumber = process.env.REACT_APP_BUILD_NUMBER || 'dev';
        
        let apiBuildNumber = this.props.version ? this.props.version.apiBuildNumber : '';
        let apiBuildNumberLabel = null;
        if(apiBuildNumber) {
            apiBuildNumberLabel = <div>API Build Number: <b>{apiBuildNumber}</b></div>;
        }

        let releaseNumber = this.props.version ? this.props.version.releaseNumber : '';
        let releaseNumberLabel = null;
        if(releaseNumber) {
            releaseNumberLabel = <div>Realease Number: <b>{releaseNumber}</b></div>;
        }

        return(
            <div>
                <Grid fluid={true} style={footerGridStyle}>
                    <Row>
                        <Col md={8} mdOffset={2} style={mainColStyle}>
                            <div>UI Build Number: <b>{uiBuildNumber}</b></div>
                            {apiBuildNumberLabel}
                            {releaseNumberLabel}
                        </Col>
                    </Row>
                </Grid>    
            </div>
        );
    }

Footer = () => {
   return (
      <footer>
         <Container>
            <Row>
               <Col className="text-center py-3">
                  Copyright &copy; Library {new Date().getFullYear()}
               </Col>
            </Row>
         </Container>
      </footer>
   );
}

render() {
    return (
      <React.Fragment>
        <Row>
          <Form.Group as={Col} md="6">
            <Form.Label className="nav-input-label">SYMPTOM ONSET</Form.Label>
            <Form.Control
              size="lg"
              id="symptom_onset"
              type="date"
              className="form-square"
              value={this.state.symptom_onset || ''}
              onChange={this.handleChange}
            />
          </Form.Group>
          <Form.Group as={Col} md="18" className="align-self-end pl-0">
            <Button className="btn-lg" onClick={() => this.handleSubmit('Are you sure you want to modify the symptom onset date?')}>
              <i className="fas fa-temperature-high"></i> Update
            </Button>
          </Form.Group>
        </Row>
      </React.Fragment>
    );
  }

render() {
		return (
			<div className="app flex-row align-items-center">
				<Card>
					<Row className="justify-content-center">
						<Col md="6">
							<div className="clearfix">
								<h1 className="float-left display-3 mr-4">404</h1>
								<h4 className="pt-3">Oops! You're lost.</h4>
								<p className="text-muted float-left">The page you are looking for was not found.</p>
								<Button className={'mb-4'} color="info" onClick={() => {
									this.props.history.push('/')
								}}>Get back on the right path</Button>
							</div>

						</Col>
					</Row>
				</Card>
			</div>
		);
	}

function ContentContainer() {
  return (
    <>
      <Col className="summaryContainer" lg={1}>
        {/* <SummaryContainer /> */}
        <RightColumnContainer />
      </Col>
      <Col className="mainColumnContainer" lg={6}>
        <MainColumnContainer />
      </Col>
      <Col className="rightColumnContainer" lg={1}></Col>
    </>
  );
}

createNewFolderExample = props => {
	return <div>
		<h5 className={'mb-0'}>Create new folder</h5>
		<div>To create folder we need URI of parent folder</div>
		<div>For this example we'll use metadataRoot folder's details above</div>
		<code>createNewFolder(parentUri, folderName, options)</code>
		<div>
			<label className={'mr-2'}>parentFolderUri:</label><span className={'comment'}>{props.state.folderDetails ?
			Utils.getSelfUri(props.state.folderDetails.links) :
			<Button
				bsstyle={'btn-sm btn-primary mr-2'}
				onClick={props.getFolderDetails}>Get
			</Button>}</span>
		</div>
		<Row className={'mt-3'}>
			<Col md={5}>
				<FormGroup>
					<FormControl
						type={'text'}
						placeholder={'folderName'}
						value={props.state.newFolder}
						onChange={e => props.setState({newFolder: e.target.value})}
					/>
				</FormGroup>
			</Col>
			<Col md={2}>
				<Button
					bsstyle={'btn btn-primary mr-2 btn-loading'}
					onClick={props.createNewFolder}
					disabled={!props.state.folderDetails || !props.state.newFolder || props.state.creatingNewFolder}
				>
					{props.state.creatingNewFolder && <i className={'fas fa-spinner fa-spin'}/>} Create
				</Button>
			</Col>
		</Row>
		<hr/>
	</div>
}

WrappedAssets = (props) => {
  const divHeight = useDivHeight();
  const [showVideoModal,setShowVideoModal]=useState(false);
  return (
    
    <WrappedAssetsGradientDiv
      className={'flex flex-grow-1 wa-bg-img '}
      style={{ height: divHeight }}
    >
      {showVideoModal && <VideoModal closefn={setShowVideoModal} linkString="moNyDWs0rQM"/>}
      <Container fluid className="removing-padding">
        <Col sm={8} md={6} className="wrapped-assets-margin-top">
          <SwapWA {...props} />

          <div className="bottom-footer mt-2 flex flex-row">
            <div className="footer-illustration">
              <img src={props.theme === 'light' ? FooterWA : FooterWADark} alt="graph"></img>
            </div>
            <div className="ml-3">
              <span className="bottom-label">Swap Wrapped Assets </span>
              <p className="bottom-desc">
                Swap wAssets of the deprecated Wrap Protocol for new tokens.
              </p>

              <>
                <span className="bottom-last">
                  <a
                    className="text-decoration-none"
                    target="_blank"
                    rel="noreferrer"
                    onClick={()=>setShowVideoModal(true)}
                  >
                    <span className="learn-more" style={{ cursor: 'pointer' }}>
                      Learn more
                      <span className="material-icons-round launch-icon-flash">launch</span>
                    </span>
                  </a>
                </span>
              </>
            </div>
          </div>
        </Col>
      </Container>
    </WrappedAssetsGradientDiv>
  );
}

render() {
    const data = this.props.latestData;
    let now = moment();
    let currentTime = now.format('ll LTS');
    const ms = moment(now, "DD/MM/YYYY HH:mm:ss").diff(moment(this.state.startDateTime, "DD/MM/YYYY HH:mm:ss"));
    const d = moment.duration(ms);
    const timeSinceStart = Math.floor(d.asHours()) + moment.utc(ms).format(":mm:ss");
    let avgCommInterval = 0;
    if (data.length > 0) {
      avgCommInterval = moment(data[data.length - 1].dateTime).diff(moment(data[0].dateTime)) / data.length;
    }

    return (
      <Grid style={ styles.container }>
        <Row style={styles.header}>
          <Col md={6}>
            Current time
          </Col>
          <Col md={6}>
            Elapsed Time
          </Col>
        </Row>
        <Row style={ styles.dateTime }>
          <Col md={6}>
            {currentTime}
          </Col>
          <Col md={6}>
            {timeSinceStart}
          </Col>
        </Row>
        <Row >
          <Col md={6} style={styles.header}>
            {this.props.latestData.length > 0 ? 'Comms' : ''}
          </Col>
          <Col hidden={avgCommInterval === 0} md={6} style={styles.dateTime}>
            { `Avg. interval ${parseInt(avgCommInterval)}`}
          </Col>
        </Row>
        <Row>
        <Col md={6}>
          {this.renderComms(this.props.latestData)}
        </Col>
        <Col md={6}>
          N/A
        </Col>
        </Row>
      </Grid>
    );
  }