antd#Row JavaScript Examples

The following examples show how to use antd#Row. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AdvancedProfile.js    From acy-dex-interface with MIT License 6 votes vote down vote up
extra = (
  <Row>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>状态</div>
      <div className={styles.heading}>待审批</div>
    </Col>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>订单金额</div>
      <div className={styles.heading}>¥ 568.08</div>
    </Col>
  </Row>
)
Example #2
Source File: CardRow.jsx    From vpp with MIT License 6 votes vote down vote up
CardRow = ({ loading, visitData }) => (
  <Row gutter={24} type="flex">
    <Col {...topColResponsiveProps}>
      <InfoCard />
    </Col>
    <Col {...topColResponsiveProps}>
      <InfoCard />
    </Col>
    <Col {...topColResponsiveProps}>
      <InfoCard />
    </Col>
    <Col {...topColResponsiveProps}>
      <InfoCard />
    </Col>
  </Row>
)
Example #3
Source File: ProfileContent.js    From video-journal-for-teams-fe with MIT License 6 votes vote down vote up
UserProfileContent = () => {

	return (
		<>
			<div className="profile-main">
				<div className="container">
					<Row gutter={20}>
						<Col span={8}><ProfileAvatar /></Col>
						<Col span={16}><ProfileForm /></Col>
					</Row>
				</div>
			</div>
		</>
	)
}
Example #4
Source File: Admin.js    From react_management_template with Apache License 2.0 6 votes vote down vote up
render() {
        return (
            <Row className="container">
                <Col span={4} className="nav-left">
                        <NavLeft/>
                </Col>
                <Col span={20} className="main">
                    <Header/>
                    
                    <Row className="content" justify="center">
                        {this.props.children}
                    </Row>
                    
                    <Fonter/>
                </Col>
            </Row>
        );
    }
Example #5
Source File: MainRouter.js    From Cowin-Notification-System with MIT License 6 votes vote down vote up
function MainRouter () {
  return (
    <Route
      render={({ location }) => (
        <Row className='height-min-100'>
          <Switch location={location}>
            <Route exact path="/unsubscribe" component={Unsubscribe} key="unsubscribe" />
            <Route exact path="/verify_email" component={VerifyEmail} key='verify_email' />
            <Route exact path='/privacy' component={PrivacyPolicy} key='privacy_policy'/>
            <Route exact path="/" component={Landing} key="landing" />
            <Route render={() => <PageNotFound />} key="notFound" />
          </Switch>
        </Row>
      )} />
  )
}
Example #6
Source File: index.js    From QiskitFlow with Apache License 2.0 6 votes vote down vote up
render() {
    let experiments = this.state.experiments;
    let data = experiments.map((experiment, i) => {
      return {
        key: i,
        experiment: experiment.name,
        author: 'Admin',
        runs: experiment.runs,
        createdAt: experiment.created_at,
      }
    })

    return (
      <div>
        <Row>
          <Col span={this.state.run ? 12 : 24}>
            <div style={{ margin: "0 20px" }}>
              <Table
                className="components-table-demo-nested"
                columns={experimentsColumns}
                expandable={{ expandedRowRender: this.expandedRowRender.bind(this) }}
                dataSource={data}
              />
            </div>
          </Col>
          <Col span={this.state.run ? 12 : 0}>
            <RunWidget run={this.state.run} />
          </Col>
        </Row>
      </div>
    )
  }
Example #7
Source File: LiquidityMiningRankingsPage.js    From dexwebapp with Apache License 2.0 6 votes vote down vote up
render() {
    let colSpan = 0;
    if (this.state.configs.length > 0) {
      colSpan = 24.0 / this.state.configs.length;
    }

    return (
      <Page>
        <Row
          gutter={{ xs: 8, sm: 16, md: 24 }}
          style={{
            marginTop: '0px',
            marginBottom: '20px',
          }}
        >
          {this.state.configs.map((config, index) => (
            <Col span={`${colSpan}`} key={index}>
              <LiquidityMiningDescription
                market={config.market}
                config={config}
              />
            </Col>
          ))}
        </Row>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          {this.state.configs.map((config, index) => (
            <Col span={`${colSpan}`} key={index}>
              <LiquidityMiningSubpage market={config.market} config={config} />
            </Col>
          ))}
        </Row>
      </Page>
    );
  }
Example #8
Source File: index.jsx    From react-antd-admin-template with MIT License 6 votes vote down vote up
Clipboard = () => {
  return (
    <div className="app-container">
      <h1>点击下方的Copy按钮,可将以下文字复制到剪贴板</h1>
      <br />
      <Row>
        <Col span={12}>{text}</Col>
      </Row>
      <br />
      <Row>
        <Col span={2}>
          <Button
            type="primary"
            icon="copy"
            onClick={(e) => {
              handleCopy(text, e);
            }}
          >
            Copy
          </Button>
        </Col>
      </Row>
    </div>
  );
}
Example #9
Source File: creator.js    From portfolyo-mern with MIT License 6 votes vote down vote up
function creator() {
  return (
    <div id="creator" className="block featureBlock bgGray">
      <div className="container-fluid">
        <div className="titleHolder">
          <h2>Our Team!</h2>
          <p></p>
        </div>
        <Row gutter={[16, 16]}>
          <Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
            <Card
              hoverable
              cover={<img alt="Modern Design" src={image1} />}
            >
              <Meta title="Akshay Murari" />
            </Card>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
            <Card
              hoverable
              cover={<img alt="Test" src={image2} />}
            >
              <Meta title="Deepesh Dragoneel" />
            </Card>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
            <Card
              hoverable
              cover={<img alt="Test" src={image3} />}
            >
              <Meta title="Kranthi Kumar" />
            </Card>
          </Col>
          
        </Row>
      </div>
    </div>
  );
}
Example #10
Source File: DescriptionList.js    From online-test-platform with Apache License 2.0 6 votes vote down vote up
DescriptionList = ({
  className,
  title,
  col = 3,
  layout = 'horizontal',
  gutter = 32,
  children,
  size,
  ...restProps
}) => {
  const clsString = classNames(styles.descriptionList, styles[layout], className, {
    [styles.small]: size === 'small',
    [styles.large]: size === 'large',
  });
  const column = col > 4 ? 4 : col;
  return (
    <div className={clsString} {...restProps}>
      {title ? <div className={styles.title}>{title}</div> : null}
      <Row gutter={gutter}>
        {React.Children.map(children, child =>
          child ? React.cloneElement(child, { column }) : child
        )}
      </Row>
    </div>
  );
}
Example #11
Source File: gridPanel.jsx    From schema-plugin-flow with MIT License 6 votes vote down vote up
render() {
    const {
      colNum = 1, label, className, hideTitle
    } = this.props;
    let showTitle = true;
    if (`${hideTitle}` === 'true') {
      showTitle = false;
    }
    if(label === undefined){
      showTitle = false;
    }
    const rows = this.assignCol(colNum);
    const classN = classnames('grid-panel', className);
    return (
      <div className={classN} >
        {showTitle && <div className="grid-panel-label">{label}</div>}
        <div className="grid-panel-wrapper">
        {
          rows.map((row, i) => (
            <Row key={i}>
              {
                this.renderCol(row, colNum, `${i}`)
              }
            </Row>
          ))
        }
        </div>
      </div>);
  }
Example #12
Source File: ExchangeList.js    From bonded-stablecoin-ui with MIT License 6 votes vote down vote up
ExchangeList = () => {
  const { exchanges } = useSelector((state) => state.settings);
  const statusList = useGetStatusExchanges(exchanges);

  if (exchanges === undefined || exchanges === null || exchanges.length < 0)
    return null;

  return (
    <div>
      {exchanges.length > 0 && (
        <Title style={{ marginTop: 50, marginBottom: 20 }} level={2}>
          List of exchanges
        </Title>
      )}

      {Object.keys(statusList).length > 0 ? (
        <Row>
          <Col span="24">
            {exchanges.map((e, i) => (
              <ExchangeItem
                parametrs={e}
                key={"exchange-item-" + i}
                status={statusList[e.id]}
              />
            ))}
          </Col>
        </Row>
      ) : (
        <Row justify="center">
          {exchanges.length > 0 && (
            <Spin size="large" style={{ padding: 10 }} />
          )}
        </Row>
      )}
    </div>
  );
}
Example #13
Source File: QuadraticDiplomacyCreate.jsx    From quadratic-diplomacy with MIT License 6 votes vote down vote up
VoterInput = ({ index, voters, setVoters, mainnetProvider }) => {
  return (
    <>
      <Form.Item label={`Voter ${index + 1}`} name={`address[${index}]`} style={{ marginBottom: "16px" }}>
        <Row gutter={8} align="middle">
          <Col span={16}>
            <AddressInput
              autoFocus
              ensProvider={mainnetProvider}
              placeholder="Enter address"
              value={voters[index]}
              onChange={address => {
                setVoters(prevVoters => {
                  const nextVoters = [...prevVoters];
                  nextVoters[index] = address;
                  return nextVoters;
                });
              }}
            />
          </Col>
          <Col span={8}>
            <DeleteOutlined
              style={{ cursor: "pointer", color: "#ff6666" }}
              onClick={event => {
                setVoters(prevVoters => {
                  const nextVoters = [...prevVoters];
                  return nextVoters.filter((_, i) => i !== index);
                });
              }}
            />
          </Col>
        </Row>
      </Form.Item>
    </>
  );
}
Example #14
Source File: index.jsx    From react-sendbird-messenger with GNU General Public License v3.0 6 votes vote down vote up
export function Header({ onCancel = () => {} }) {
    return (
        <Row
            style={{
                height: 60,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '0 12px',
            }}
        >
            <Col
                style={{
                    display: 'flex',
                    justifyContent: 'flex-start',
                }}
            >
                <Button
                    style={{ border: 0 }}
                    type="ghost"
                    icon={<LeftOutlined style={{ color: PRIMARY_COLOR }} />}
                    size="large"
                    onClick={onCancel}
                />
            </Col>
        </Row>
    )
}
Example #15
Source File: index.jsx    From juno with Apache License 2.0 6 votes vote down vote up
Help = (props) => {
  return (
    <Row className={style.help}>
      <Col span={4}>
        <Button>
          <a href="https://github.com/douyu/juno/wsd/penaten/juno-go/issues/new" target={'_blank'}>
            使用问题点这里提issue{' '}
          </a>
        </Button>
      </Col>
    </Row>
  );
}
Example #16
Source File: Dashboard.js    From react-portal with MIT License 6 votes vote down vote up
Dashboard = () => (
	<>
		<div className="dashboard-section">
			<PageTitle title="Dashboard" bgColor="#0F9D58" />

			<div className="sub-components">
				<Row gutter={[16, 16]}>
					<Col xs={24} sm={24} xl={16} lg={16} md={12}>
						<DashCards />
					</Col>
					<Col
						xs={24}
						sm={24}
						lg={8}
						xl={8}
						md={12}
						gutter={[16, 16]}
					>
						<Todos />
						<SpamDays />
					</Col>
				</Row>
			</div>
		</div>
	</>
)
Example #17
Source File: TradeListCell.js    From vpp with MIT License 5 votes vote down vote up
TradeListCell = props => {
  const { item, admin, buyClick, sellClick, editClick, closeClick } = props;
  return (
    <div className={styles.tradeListCell}>
      <Row>
        <Col span={12}>{`账户地址:${item.address}`}</Col>
        <Col span={8}>{`交易时间:${item.latest}`}</Col>
        <Col span={4}>{`成交额:${item.total}`}</Col>
      </Row>
      <br/>
      <Row>
        <Col span={2} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
          <img alt="logo" width="100px" src={item.logo} />
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{item.name}</span>
              <p>{`类型: ${item.type}`}</p>
              <span>{`邮编: ${item.code}`}</span>
              <p>{`线损: ${item.loss}`}</p>
            </div>
          </div>
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{`可销售度数: ${item.canSell}`}</span>
              <p>{`售价: ${item.sellPrice}`}</p>
            </div>
          </div>
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{`需购买度数: ${item.needBuy}`}</span>
              <p>{`售价: ${item.buyPrice}`}</p>
            </div>
          </div>
        </Col>
        <Col span={5}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{item.status}</span>
            </div>
          </div>
        </Col>
        <Col span={5}>
          <>
            <Button type="primary" size="default" onClick={buyClick}>购买</Button>
            <Divider orientation="center" type="vertical"/>
            <Button type="primary" danger size="default" onClick={sellClick}>出售</Button>
          </>
          {
            admin ?
              <div style={{marginTop: 10, hidden: true}}>
                <Button type="primary" size="default" onClick={editClick}>编辑</Button>
                <Divider orientation="center" type="vertical"/>
                <Button type="primary" danger size="default" onClick={() => closeClick(item.status === '歇业' ? "开业" : "歇业")}>{item.status === '歇业' ? "开业" : "歇业"}</Button>
              </div>
              :
              null
          }
        </Col>
      </Row>
      <Divider type="horizontal"/>
    </div>
  );
}
Example #18
Source File: cartHeader.js    From shopping-cart-fe with MIT License 5 votes vote down vote up
CartHeader = ({
	logoPath,
	badgeCount = 0,
	currency = '',
	totalDue = 0,
	displayBack,
	displayTotal,
	top = false
}) => {
	const dispatch = useDispatch();
	const cartContents = useSelector((state) => state.cart);
	const storeDetails = useSelector((state) => state.user.user);

	const sign = useCurrency(storeDetails.currency);
	const totalPrice = (arr) => {
		return arr.reduce((sum, item) => {
			return sum + item.price * item.quantity;
		}, 0);
	};
	const totalQuantity = (arr) => {
		return arr.reduce((sum, item) => {
			return sum + item.quantity;
		}, 0);
	};
	const change = (e) => {
		dispatch(creators.setString(e.target.value));
	};
	return (
		<Row className={top ? 'color cart-header' : 'cart-header'} type="flex" justify="space-between" align="middle">
			<Col span={6} className="logo">
				{displayBack ? (
					<Icon onClick={history.goBack} type="left-circle" />
				) : (
					<img src={logoPath || NoLogo} alt="Store Logo" />
				)}
			</Col>
			<Col span={12} className="total">
				{displayTotal ? (
					`Total: ${sign}${totalPrice(cartContents).toFixed(2)}`
				) : (
					<Input onChange={change} placeholder="Search..." />
				)}
			</Col>
			<NavLink to="/review">
				<Col span={6} className="icon">
					<Badge style={{ backgroundColor: 'gold', color: 'black' }} count={totalQuantity(cartContents)}>
						<Icon type="shopping-cart" style={{ color: 'black' }} />
					</Badge>
				</Col>
			</NavLink>
		</Row>
	);
}
Example #19
Source File: ChangePassword.js    From video-journal-for-teams-fe with MIT License 5 votes vote down vote up
ChangePassword = (props) => {
	const { handleSubmit, isUpdatingUserData, onCancel } = props;
	const [passwordChanges, setPasswordChanges] = useState({});

	const handleChange = (e) => {
		setPasswordChanges({ ...passwordChanges, [e.target.name]: e.target.value });
	};

	const cancel = () => {
		onCancel();
		setPasswordChanges({});
	}

	return (
		< Form id="change-password" onSubmit={(e) => { setPasswordChanges({}); handleSubmit(e, formSchema, passwordChanges) }} >
			<Row gutter={24}>
				<Col span={24}>
					<Form.Item label="Current Password">
						<Input
							type="password"
							name="currentPassword"
							onChange={handleChange}
							value={passwordChanges.currentPassword}
							placeholder="Current Password"
							autoComplete="off"
							required
						/>
					</Form.Item>
					<Form.Item label="New Password">
						<Input
							type="password"
							name="newPassword"
							onChange={handleChange}
							value={passwordChanges.newPassword}
							placeholder="New Password"
							autoComplete="off"
							required
						/>
					</Form.Item>
					<Form.Item label="Confirm Password">
						<Input
							type="password"
							name="confirmPassword"
							onChange={handleChange}
							value={passwordChanges.confirmPassword}
							placeholder="Confirm Password"
							autoComplete="off"
							required
						/>
					</Form.Item>
				</Col>
				<Col span={24} className="button-wrapper">
					<Button className="outlined-btn" size="large" onClick={cancel}>Cancel</Button>
					<Button type="primary" htmlType="submit" className="full-btn" size="large" loading={isUpdatingUserData}>Save</Button>
				</Col>
			</Row>
		</Form >
	);
}
Example #20
Source File: index.js    From react_management_template with Apache License 2.0 5 votes vote down vote up
render() {
        return (
            <Row className="not-match" justify="center">
                页面飘到外太空了~~~
            </Row>
        );
    }
Example #21
Source File: Landing.js    From Cowin-Notification-System with MIT License 5 votes vote down vote up
Landing = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllStates())
  }, [dispatch])
  const registration = useSelector((state) => state.base.registration)
  const isSmall = isSmallDevice();
  return (
    <Row className={`${isSmall ? '' : 'margin-double--left'} padding--sides width-100 height-100`}>
      <Col md={10} sm={24} push={isSmall ? 0 : 14}>
        {
          isSmall ?
          <div>
            <div className={'margin-double--top title-style center'}>VaccinePost</div>
            <div className={'subtitle-style center'}>A Cowin Vaccination Notification System</div>
          </div> :
          null
        }
        <RegistrationForm
          onChangeRegistrationField={(changedField) => dispatch(onChangeRegistrationField(changedField))}
          onChangeSubscriptionField={(changedField, index) => dispatch(onChangeSubscriptionField(changedField, index))}
          onAddSubscription={() => dispatch(onAddSubscription())}
          onRemoveSubscription={(index) => dispatch(onRemoveSubscription(index))}
          fetchDistricts={(stateId, index) => dispatch(fetchDistricts(stateId, index))}
          registration={registration}
          registerSubscription={() => {
            const validationParams = validateRegistrationPayload(registration)
            if(validationParams.isValid) {
              dispatch(registerSubscription(registration))
            }
            else {
              dispatch(updateRegistrationFormErrors(validationParams.errors))
            }
          }}
          resetRegisterForm={() => dispatch(resetRegisterForm())}
        />
      </Col>
      <Col md={14} sm={24} pull={isSmall ? 0 : 10}>
      {
        !isSmall ?
        <Layout className={'web-content background-white'}>
          <div>
            <div className={'margin-double--top title-style'}>VaccinePost</div>
            <div className={'subtitle-style'}>A Co-WIN Vaccination Notification System</div>
          </div>
        </Layout>
        :
        null
      }
      <Col className={`${isSmall ? "no-background" : "no-background web-steps"}`} md={14} sm={24} >
        <Row className='margin--bottom'>
        {
          landingPageSteps.map((step, index) => {
            return (
              <RegistrationStep
                key={index} 
                {...step}
              />
            )
          })
        }
        </Row>
      </Col>
      </Col>
    </Row>
  )
}
Example #22
Source File: index.js    From QiskitFlow with Apache License 2.0 5 votes vote down vote up
export function HomePage({ dispatch, user, loggedIn, loading }) {
  useInjectReducer({ key, reducer });
  useInjectSaga({ key, saga });

  const loginForm = loggedIn ? '' : <Login />;

  return (
    <div>
      <Helmet>
        <title>Home</title>
      </Helmet>
      <Row gutter={[16, 16]}>
        <Col span={18}>
          <Card title="Greetings!" style={{ margin: '20px 0' }}>
            <p>
              Welcome to alpha version of QiskitFlow! Platform for tracking,
              sharing and running quantum experiments in a clean and
              understandable for developers, researchers and students manner.
              Thank you for taking time and reviewing our efforts in making
              quantum computing more transparent for everybody!
            </p>
            <p>
              If you have any questions or suggestions feel free to drop an
              email [email protected] or open{' '}
              <a href="https://github.com/IceKhan13/QiskitFlow/issues" target="_blank">
                Github issue
              </a>
            </p>
          </Card>
          <Divider />
          <h2>Public experiments</h2>
          <SharedRunsList />
        </Col>
        <Col span={6}>
          <Card title="QiskitFlow info" style={{ margin: '20px 0' }}>
            <b>Build</b>: 0.0.10-alpha
            <br />
            <b>Github</b>:{' '}
            <a href="https://github.com/IceKhan13/QiskitFlow" target="_blank">
              https://github.com/IceKhan13/QiskitFlow
            </a>
            <br />
            <b>PyPi</b>:{' '}
            <a href="https://pypi.org/project/qiskitflow/" target="_black">
              https://pypi.org/project/qiskitflow/
            </a>
          </Card>
          {loginForm}
          <img
            src="https://media.giphy.com/media/rmIGBIsDle8dEPubrG/giphy.gif"
            alt="QiskitFlow 3d"
            width="100%"
          />
          <Card title="Roadmap" style={{ margin: '20px 0' }}>
            <Steps direction="vertical" current={1}>
              <Step
                title="Alpha release"
                description="Alpha release for closed testing"
              />
              <Step title="Testing" description="Testing is in progress" />
              <Step
                title="General public release"
                description="Release for general public with open registration"
              />
              <Step
                title="Experiments compiler"
                description="Compiler backend for building executable images of executed experiments"
              />
            </Steps>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
Example #23
Source File: AssetDropdown.js    From dexwebapp with Apache License 2.0 5 votes vote down vote up
AssetDropdown = ({
  options,
  selected,
  size,
  paddingLeft,
  paddingRight,
  borderRadius,
}) => {
  const theme = useContext(ThemeContext);
  return (
    <Dropdown trigger={['click']} overlay={<AssetMenu>{options}</AssetMenu>}>
      <AssetDropdownButton
        style={{
          paddingLeft: paddingLeft ? paddingLeft : '8px',
          paddingRight: paddingRight ? paddingRight : '8px',
          borderRadius: borderRadius ? borderRadius : '4px',
        }}
        size={size}
      >
        <Row
          gutter={16}
          style={{
            paddingBottom: '1px',
            height: '100%',
          }}
        >
          <Col
            span={16}
            style={{
              textAlign: 'left',
              color: theme.textWhite,
              marginTop: 'auto',
              marginBottom: 'auto',
            }}
          >
            {selected}
          </Col>
          <Col
            span={8}
            style={{
              textAlign: 'right',
              color: theme.primary,
              marginTop: 'auto',
              marginBottom: 'auto',
            }}
          >
            <FontAwesomeIcon
              style={{
                color: theme.primary,
                fontSize: '18px',
              }}
              icon={faCaretDown}
            />
          </Col>
        </Row>
      </AssetDropdownButton>
    </Dropdown>
  );
}
Example #24
Source File: index.jsx    From react-antd-admin-template with MIT License 5 votes vote down vote up
RichTextEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const onEditorStateChange = (editorState) => setEditorState(editorState);

  return (
    <div>
      <Card bordered={false}>
        <Editor
          editorState={editorState}
          onEditorStateChange={onEditorStateChange}
          wrapperClassName="wrapper-class"
          editorClassName="editor-class"
          toolbarClassName="toolbar-class"
          localization={{ locale: "zh" }}
        />
      </Card>
      <br />
      <Row gutter={10}>
        <Col span={12}>
          <Card
            title="同步转换HTML"
            bordered={false}
            style={{ minHeight: 200 }}
          >
            {editorState &&
              draftToHtml(convertToRaw(editorState.getCurrentContent()))}
          </Card>
        </Col>
        <Col span={12}>
          <Card
            title="同步转换MarkDown"
            bordered={false}
            style={{ minHeight: 200 }}
          >
            {editorState &&
              draftToMarkdown(convertToRaw(editorState.getCurrentContent()))}
          </Card>
        </Col>
      </Row>
    </div>
  );
}
Example #25
Source File: about.js    From portfolyo-mern with MIT License 5 votes vote down vote up
function AppAbout() {
    return (
        <div id="about" className="block aboutBlock">
            <div className="container-fluid">
                <div className="titleHolder">
                    <h2
                        style={{
                            marginBottom: "1rem",
                        }}
                    >
                        About Us
                    </h2>
                    <p>
                        We are a small team of Passionate Devolopers, working
                        our level best to fulfill your needs. Our goal is to
                        make portfolio building process a lot easier for all our
                        fellow mates! People who want to build their portfolyo`s
                        which look attractive without any Web Devolopement
                        knowledge can take the most benifit from our website.
                        You can edit the templated provided by us and contomize
                        them to your taste. We have even attached a video below
                        for you walk you through the process of website creation
                        (refer that for addtional info!)We are always open to
                        discussions and suggestions, feel free to contact us at
                        any time!
                    </p>
                </div>
                <div className="contentHolder">
                    <p>
                        Our app is easy to use and easy for creating and
                        managing multiple portfolyo`s with different
                        customizations. The services provided in these app is
                        absolutly free of cost.
                    </p>
                </div>
                <Row gutter={[16, 16]}>
                    {items.map((item) => {
                        return (
                            <Col md={{ span: 8 }} key={item.key}>
                                <div className="content">
                                    <div className="icon">{item.icon}</div>
                                    <h3>
                                        <b>{item.title}</b>
                                    </h3>
                                    <p>{item.content}</p>
                                </div>
                            </Col>
                        );
                    })}
                </Row>
            </div>
        </div>
    );
}
Example #26
Source File: login.js    From doraemon with GNU General Public License v3.0 5 votes vote down vote up
render() {
    const { data } = this.props.loginData
    const { getFieldDecorator } = this.props.form
    const { chooseMethod, defaultName } = this.state
    return (
      <div className="login-container">
        <div className="login-bg" />
        <div className="login-content">
          <div className="login-title">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</div>
          <Form
            {...layout}
            name="basic"
          >
            {
              (chooseMethod === 'local' || chooseMethod === 'ldap') && (<div>
                <Form.Item label="用户名">
                  {getFieldDecorator('username', {
                    initialValue: defaultName,
                    rules: [{ required: true, message: 'Please input your name!' }],
                  })(<Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="Username"
                  />)}
                </Form.Item>
                <Form.Item label="密码">
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: 'Please input your Password!' }],
                  })(<Input
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    type="password"
                    placeholder="Password"
                  />)}
                </Form.Item>
                <div style={{ height: '20px' }} />
              </div>)
            }
            <Form.Item
              wrapperCol={{ offset: 2, span: 20 }}
            >
              {chooseMethod === 'none' && <p className="choose-text">请选择登录方式 :</p>}
              {
                (data && chooseMethod === 'none') && (<Button type="primary" block onClick={() => this.onFinish()} style={{ marginBottom: '15px' }}>
                  已有账号,直接登录<Icon type="right" />
                </Button>)
              }
              <Row type="flex" justify="space-between" style={{ color: 'white' }}>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={(chooseMethod !== 'none' && chooseMethod !== 'local') ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('local')} className="login-form-button">
                    本地
                  </Button>
                </Col>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={chooseMethod !== 'none' && chooseMethod !== 'ldap' ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('ldap')} className="login-form-button">
                    LDAP
                  </Button>
                </Col>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={chooseMethod !== 'none' && chooseMethod !== 'oauth' ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('oauth')} className="login-form-button">
                    OAuth
                  </Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }
Example #27
Source File: index.js    From topology-react with MIT License 5 votes vote down vote up
Home = ({ history }) => {

  const [list, setList] = useState([]);

  const [currentPageIndex, setCurrentPageIndex] = useState(1);

  const [total, setTotal] = useState(0);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function loadData() {
      try {
        await setLoading(true);
        const data = await getListByPage(currentPageIndex);
        setList(data.list);
        setTotal(data.count);
        message.success('加载成功!');
      } catch (error) {
        message.error('加载失败!');
      } finally {
        await setLoading(false);
      }
    }

    loadData()
  }, [currentPageIndex]);

  const onHandlePageChange = (page, size) => {
    setCurrentPageIndex(page);
  }


  const renderCardList = useMemo(() => {

    const onHandleDetail = item => {
      history.push({ pathname: '/workspace', state: { id: item.id } });
    };
  
    return list.map(item => <Col style={{ margin: '10px 0px' }} key={item.id} span={6}>
      <Card
        loading={loading}
        hoverable
        title={item.name}
        bordered={false}
        cover={<Spin spinning={loading}><div onClick={() => onHandleDetail(item)} style={{ height: 200, padding: 10, textAlign: 'center' }}><img alt="cover" style={{ height: '100%', width: '100%' }} src={`http://topology.le5le.com${item.image}`} /></div></Spin>}
        extra={[
          <div key="like" style={{ display: 'inline', }}><Icon type="like" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.star}</b></div>,
          <div key="heart" style={{ display: 'inline', marginLeft: 10 }}><Icon type="heart" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.recommend}</b></div>
        ]}
      >
        <Meta
          title={item.username}
          avatar={<Avatar style={{ backgroundColor: colorList[Math.ceil(Math.random() * 4)], verticalAlign: 'middle' }} size="large">{item.username.slice(0, 1)}</Avatar>}
          description={item.desc || '暂无描述'}
          style={{ height: 80, overflow: 'hidden' }}
        />
      </Card>
    </Col>)
  }, [list, loading, history])


  return (
    <div style={{ background: '#ECECEC', padding: '30px 200px', height: '100vh', overflow: 'auto' }}>
      <Row gutter={16}>
        {
          renderCardList
        }
      </Row>
      <Pagination style={{ textAlign: 'center', marginTop: 30 }} current={currentPageIndex} total={total} onChange={onHandlePageChange} />
    </div>
  );
}
Example #28
Source File: DisplayVariable.jsx    From Tai-Shang-NFT-Wallet with MIT License 5 votes vote down vote up
DisplayVariable = ({ contractFunction, functionInfo, refreshRequired, triggerRefresh }) => {
  const [variable, setVariable] = useState("");

  const refresh = useCallback(async () => {
    try {
      const funcResponse = await contractFunction();
      setVariable(funcResponse);
      triggerRefresh(false);
    } catch (e) {
      console.log(e);
    }
  }, [setVariable, contractFunction, triggerRefresh]);

  useEffect(() => {
    refresh();
  }, [refresh, refreshRequired, contractFunction]);

  return (
    <div>
      <Row>
        <Col
          span={8}
          style={{
            textAlign: "right",
            opacity: 0.333,
            paddingRight: 6,
            fontSize: 24,
          }}
        >
          {functionInfo.name}
        </Col>
        <Col span={14}>
          <h2>{tryToDisplay(variable)}</h2>
        </Col>
        <Col span={2}>
          <h2>
            <a href="#" onClick={refresh}>
              ?
            </a>
          </h2>
        </Col>
      </Row>
      <Divider />
    </div>
  );
}
Example #29
Source File: LoginItem.js    From online-test-platform with Apache License 2.0 5 votes vote down vote up
render() {
    const { count } = this.state;

    const {
      form: { getFieldDecorator },
    } = this.props;

    // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props
    const {
      onChange,
      customprops,
      defaultValue,
      rules,
      name,
      getCaptchaButtonText,
      getCaptchaSecondText,
      updateActive,
      type,
      ...restProps
    } = this.props;

    // get getFieldDecorator props
    const options = this.getFormItemOptions(this.props);

    const otherProps = restProps || {};
    if (type === 'Captcha') {
      const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']);
      return (
        <FormItem>
          <Row gutter={8}>
            <Col span={16}>
              {getFieldDecorator(name, options)(<Input {...customprops} {...inputProps} />)}
            </Col>
            <Col span={8}>
              <Button
                disabled={count}
                className={styles.getCaptcha}
                size="large"
                onClick={this.onGetCaptcha}
              >
                {count ? `${count} ${getCaptchaSecondText}` : getCaptchaButtonText}
              </Button>
            </Col>
          </Row>
        </FormItem>
      );
    }
    return (
      <FormItem>
        {getFieldDecorator(name, options)(<Input {...customprops} {...otherProps} />)}
      </FormItem>
    );
  }