@ant-design/icons#SmileOutlined JavaScript Examples

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Icons Usage</strong>
        </h5>
        <div className="mb-5">
          <HomeOutlined className="mr-3 mb-3 font-size-24" />
          <SettingFilled className="mr-3 mb-3 font-size-24" />
          <SmileOutlined className="mr-3 mb-3 font-size-24" />
          <SyncOutlined spin className="mr-3 mb-3 font-size-24" />
          <SmileOutlined rotate={180} className="mr-3 mb-3 font-size-24" />
          <LoadingOutlined className="mr-3 mb-3 font-size-24" />
        </div>
      </div>
    )
  }

treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    icon: <SmileOutlined />,
    children: [
      {
        title: 'leaf',
        key: '0-0-0',
        icon: <MehOutlined />,
      },
      {
        title: 'leaf',
        key: '0-0-1',
        icon: ({ selected }) => (selected ? <FrownFilled /> : <FrownOutlined />),
      },
    ],
  },
]

storiesOf('antd/cascader', module).add('suffix', () => 
  <>
    <Cascader
      suffixIcon={<SmileOutlined />}
      options={options}
      onChange={onChange}
      placeholder="Please select"
    />
    <br />
    <br />
    <Cascader suffixIcon="ab" options={options} onChange={onChange} placeholder="Please select" />
    <br />
    <br />
    <Cascader
      expandIcon={<SmileOutlined />}
      options={options}
      onChange={onChange}
      placeholder="Please select"
    />
    <br />
    <br />
    <Cascader expandIcon="ab" options={options} onChange={onChange} placeholder="Please select" />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use <code>suffixIcon</code> to customize the selection box suffix icon, and use <code>expandIcon</code> to customize the current item expand icon.</p></>) } });

FormSizeDemo = () => {
  const [prefixCls, setPrefixCls] = useState('light');
  return (
    <div>
      <Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
        toggle prefixCls
      </Button>
      <div>
        <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
          <SmileOutlined />
          <Select />
        </ConfigProvider>
      </div>
    </div>
  );
}

storiesOf('antd/steps', module).add('icon', () => 
  <Steps>
    <Step status="finish" title="Login" icon={<UserOutlined />} />
    <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
    <Step status="process" title="Pay" icon={<LoadingOutlined />} />
    <Step status="wait" title="Done" icon={<SmileOutlined />} />
  </Steps>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can use your own custom icons by setting the property <code>icon</code> for <code>Steps.Step</code>.</p></>) } });

render() {
    const { max, min } = this.props;
    const { value } = this.state;
    const mid = ((max - min) / 2).toFixed(5);
    const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
    const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
    return (
      <div className="icon-wrapper">
        <FrownOutlined className={preColorCls} />
        <Slider {...this.props} onChange={this.handleChange} value={value} />
        <SmileOutlined className={nextColorCls} />
      </div>
    );
  }

storiesOf('antd/Icon', module).add('basic', () => 
  <div className="icons-list">
    <HomeOutlined />
    <SettingFilled />
    <SmileOutlined />
    <SyncOutlined spin />
    <SmileOutlined rotate={180} />
    <LoadingOutlined />
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Import icons from <code>@ant-design/icons</code>, component name of icons with different theme is the icon name suffixed by the theme name. Specify the <code>spin</code> property to show spinning animation.</p></>) } });

openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    icon: <SmileOutlined style={{ color: '#108ee9' }} />,
  });
}

SeedCard = (props) => {
  const { t } = useTranslation();
  const db = useDB();
  if (!db) return null;
  const data = props.data;
  const player = db.get("players").find({ id: data.playerId0 }).value();
  const support = db.get("supports").find({ id: data.supportId }).value();
  const like = async (seed) => {
    if (!userId) {
      message.info(t("刷新后重试"));
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/like", { id, userId });
    if (res.data) {
      message.info(t("成功"));
      seed.likes += 1;
    }
  };
  const dislike = async (seed) => {
    if (!userId) {
      message.info(t("刷新后重试"));
      return;
    } else if (seed.dislikes && seed.dislikes.indexOf(userId) !== -1) {
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/dislike", { id, userId });
    if (res.data) {
      message.info(t("成功"));
      seed.dislikes += 1;
    }
  };
  return (
    <div className="w-1/2 p-1">
      <div className="border-green-300 border border-solid flex flex-col">
        <CopyToClipboard text={data.gameId} onCopy={() => message.info("成功")}>
          <div className="w-full flex text-lg">
            {data.gameId}
            <CopyOutlined />
          </div>
        </CopyToClipboard>
        <div className="w-full flex items-center justify-around">
          {player && (
            <img alt={player.name} src={CDN_SERVER + player.imgUrl} className="w-10 h-10" />
          )}
          {support && <img alt={support.name} src={CDN_SERVER + support.imgUrl} className="w-10" />}
          <div className="text-lg flex" onClick={() => like(data)}>
            <SmileOutlined />
            <div>{data.likes}</div>
          </div>
          <div className="text-lg flex" onClick={() => dislike(data)}>
            <FrownOutlined />
            <div>{data.dislikes}</div>
          </div>
        </div>
        <div>{`${t(SEED_BLUE_LABELS[data["blue0"]])}: ${data["blueLevel0"]}`}</div>
        <div>{`${t(SEED_RED_LABELS[data["red0"]])}: ${data["redLevel0"]}`}</div>
        {Object.keys(SEED_BLUE_LABELS).map((key) =>
          data[key] ? (
            <div key={key}>{`${t("总计")} ${t(SEED_BLUE_LABELS[key])}: ${data[key]}`}</div>
          ) : null
        )}
        {Object.keys(SEED_RED_LABELS).map((key) =>
          data[key] ? (
            <div key={key}>{`${t("总计")} ${t(SEED_RED_LABELS[key])}: ${data[key]}`}</div>
          ) : null
        )}
        <div>{`${t("突破等级")}: ${data["supportLevel"] || 0}`}</div>
      </div>
    </div>
  );
}

Demo = () => {
  const [editableStr, setEditableStr] = useState('This is an editable text.');
  const [customIconStr, setCustomIconStr] = useState('Custom Edit icon and replace tooltip text.');
  const [hideTooltipStr, setHideTooltipStr] = useState('Hide Edit tooltip.');
  const [lengthLimitedStr, setLengthLimitedStr] = useState(
    'This is an editable text with limited length.',
  );

  return (
    <>
      <Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
      <Paragraph
        editable={{
          icon: <HighlightOutlined />,
          tooltip: 'click to edit text',
          onChange: setCustomIconStr,
        }}
      >
        {customIconStr}
      </Paragraph>
      <Paragraph editable={{ tooltip: false, onChange: setHideTooltipStr }}>
        {hideTooltipStr}
      </Paragraph>
      <Paragraph
        editable={{
          onChange: setLengthLimitedStr,
          maxLength: 50,
          autoSize: { maxRows: 5, minRows: 3 },
        }}
      >
        {lengthLimitedStr}
      </Paragraph>
      <Paragraph copyable>This is a copyable text.</Paragraph>
      <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
      <Paragraph
        copyable={{
          icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />],
          tooltips: ['click here', 'you clicked!!'],
        }}
      >
        Custom Copy icon and replace tooltips text.
      </Paragraph>
      <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
    </>
  );
}

icon = <SmileOutlined />

storiesOf('antd/time-picker', module).add('suffix', () => 
  <TimePicker
    suffixIcon={<SmileOutlined />}
    onChange={onChange}
    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Click <code>TimePicker</code>, and then we could select or input a time in panel.</p></>) } });

smileIcon = <SmileOutlined />

storiesOf('antd/result', module).add('customIcon', () => 
  <Result
    icon={<SmileOutlined />}
    title="Great, we have done all the operations!"
    extra={<Button type="primary">Next</Button>}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Custom icon.</p></>) } });

customIcons = {
  1: <FrownOutlined />,
  2: <FrownOutlined />,
  3: <MehOutlined />,
  4: <SmileOutlined />,
  5: <SmileOutlined />,
}

customizeRenderEmpty = () => (
  <div style={{ textAlign: 'center' }}>
    <SmileOutlined style={{ fontSize: 20 }} />
    <p>Data Not Found</p>
  </div>
)

smileIcon = <SmileOutlined />

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Steps current={1}>
            <Step title="Finished" description="This is a description." />
            <Step title="In Progress" description="This is a description." />
            <Step title="Waiting" description="This is a description." />
          </Steps>
        </div>
        <h5 className="mb-3">
          <strong>With Icons</strong>
        </h5>
        <div className="mb-5">
          <Steps>
            <Step status="finish" title="Login" icon={<UserOutlined />} />
            <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
            <Step status="process" title="Pay" icon={<LoadingOutlined />} />
            <Step status="wait" title="Done" icon={<SmileOutlined />} />
          </Steps>
        </div>
        <h5 className="mb-3">
          <strong>Centered</strong>
        </h5>
        <div className="mb-5">
          <Steps progressDot current={1}>
            <Step title="Finished" description="This is a description." />
            <Step title="In Progress" description="This is a description." />
            <Step title="Waiting" description="This is a description." />
          </Steps>
        </div>
        <h5 className="mb-3">
          <strong>Vertical</strong>
        </h5>
        <div className="mb-5">
          <Steps direction="vertical" current={1}>
            <Step title="Finished" description="This is a description." />
            <Step title="In Progress" description="This is a description." />
            <Step title="Waiting" description="This is a description." />
          </Steps>
        </div>
      </div>
    )
  }

export function PickerButton({
    style,
    show = false,
    handleEmojiMart = () => {},
}) {
    const emojiMartRef = useRef()
    const [showEmojiMart, setShowEmojiMart] = useState(false)

    useClickOutSide(emojiMartRef, handleClickOutSide)

    function handleClickOutSide() {
        setShowEmojiMart(false)
    }

    return (
        <Fragment>
            <div ref={emojiMartRef}>
                {showEmojiMart && (
                    <Picker
                        style={style}
                        title="Pick your emoji…"
                        emoji="point_up"
                        size={20}
                        emojiSize={20}
                        color={PRIMARY_COLOR}
                        showPreview={false}
                        showSkinTones={false}
                        set="apple"
                        onSelect={handleEmojiMart}
                    />
                )}
                <Button
                    style={{ border: 0 }}
                    type="ghost"
                    icon={<SmileOutlined />}
                    size="large"
                    onClick={() => setShowEmojiMart((prevState) => !prevState)}
                />
            </div>
        </Fragment>
    )
}

render() {
    return (
      <Layout className="pageTransition" style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>

        <Modal
          title="Hint"
          visible={this.state.hintModal}
          onCancel={() => { this.setState({ hintModal: false }) }}
          footer={null}
        >
          <p>{this.state.hintContent}</p>
        </Modal>


        <Modal
          title={null}
          visible={this.state.challengeModal}
          footer={null}
          bodyStyle={{ textAlign: "center" }}
          onCancel={() => { this.setState({ challengeModal: false }); this.props.history.push("/Challenges/" + this.props.category); }}
        >
          <Tabs defaultActiveKey="challenge">
            <TabPane
              tab={<span><ProfileOutlined /> Challenge</span>}
              key="challenge"
            >

              {this.state.challengeWriteup !== "" && this.state.challengeWriteup !== "CompleteFirst" && (
                <Tooltip title="View writeups for this challenge">
                  <Button shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} onClick={() => { window.open(this.state.challengeWriteup) }} />
                </Tooltip>
              )}
              {this.state.challengeWriteup === "" && (
                <Tooltip title="Writeups are not available for this challenge">
                  <Button disabled shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} />
                </Tooltip>
              )}
              {this.state.challengeWriteup === "CompleteFirst" && (
                <Tooltip title="Writeups are available for this challenge but you must complete the challenge first to view it.">
                  <Button shape="circle" size="large" style={{ position: "absolute", right: "2ch", color: "#13a8a8" }} icon={<SolutionOutlined />} />
                </Tooltip>
              )}
              <Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
                <Ellipsis color="#177ddc" size={120} ></Ellipsis>
              </div>}>

                <div style={{ display: "flex", justifyContent: "center" }}>
                  <h1 style={{ fontSize: "150%", maxWidth: "35ch", whiteSpace: "initial" }}>{this.state.viewingChallengeDetails.name}
                    <Tooltip title="Copy challenge link to clipboard.">
                      <LinkOutlined style={{ color: "#1890ff", marginLeft: "0.5ch" }} onClick={
                        async () => {
                          await navigator.clipboard.writeText(window.location.href);
                          message.success("Challenge link copied to clipboard.")
                        }} /></Tooltip>
                  </h1>
                </div>
                <div>
                  {this.state.challengeTags}
                </div>
                <h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "6vh", fontSize: "200%" }}>{this.state.viewingChallengeDetails.points}</h2>

                <div className="challengeModal">
                  <MarkdownRender >{this.state.viewingChallengeDetails.description}</MarkdownRender>
                </div>



                <div style={{ marginTop: "6vh", display: "flex", flexDirection: "column" }}>
                  {this.state.challengeHints}
                </div>
              </Suspense>


              <div style={{ display: "flex" }}>
                <SubmitFlagForm submitFlag={this.submitFlag.bind(this)} currentChallengeStatus={this.state.currentChallengeStatus} currentChallengeSolved={this.state.currentChallengeSolved}></SubmitFlagForm>
              </div>
              <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", marginTop: "-1vh" }}>
                <p>Challenge Author: <em>{this.state.viewingChallengeDetails.author}</em></p>
                <p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.viewingChallengeDetails.max_attempts}</p>
              </div>
            </TabPane>
            <TabPane
              tab={<span><UnlockOutlined /> Solves ({this.state.viewingChallengeDetails.solves.length}) </span>}
              key="solves"
            >
              <List
                itemLayout="horizontal"
                dataSource={this.state.viewingChallengeDetails.solves}
                locale={{
                  emptyText: (
                    <div>
                      <SmileOutlined style={{ fontSize: "500%" }} />
                      <br />
                      <br />
                      <p style={{ fontSize: "150%" }}>No solves yet. Maybe you can be the first!</p>
                    </div>
                  )
                }}
                renderItem={item => {
                  return (
                    <List.Item key={item}>
                      <List.Item.Meta
                        avatar={<Avatar src={"/static/profile/" + item + ".webp"} />}
                        title={<Link to={"/Profile/" + item}><a style={{ fontSize: "110%", fontWeight: 700 }} onClick={() => { this.setState({ challengeModal: false }) }}>{item}</a></Link>}
                      />
                    </List.Item>
                  )
                }
                } />
            </TabPane>
          </Tabs>


        </Modal>
        <Divider style={{ marginTop: "0px" }}>Select Tags</Divider>

        <span className="tag-holder" >
          {Object.keys(this.state.tag).map((tag) => {
            return (
              <CheckableTag className="tag-select-style" key={tag} checked={this.state.selectedTags.indexOf(tag) !== -1}
                onChange={(checked) => {

                  let selectedTags = this.state.selectedTags
                  if (!checked) selectedTags.splice(selectedTags.indexOf(tag), 1)
                  else selectedTags.push(tag)

                  if (selectedTags.length === 0) this.sortCats(this.state.sortType, true)

                  this.setState({ selectedTags: selectedTags })
                }}>{tag} <span style={{ color: "#d89614" }}>({this.state.tag[tag].length})</span></CheckableTag>
            )
          })}
        </span>

        <Divider />
        {this.state.tag && this.state.selectedTags.length > 0 ? (
          <ChallengesTagSortList tag={this.state.tag} selectedTags={this.state.selectedTags} permissions={this.props.permissions} loadChallengeDetails={this.loadChallengeDetails.bind(this)} loadingChallenge={this.state.loadingChallenge} currentChallenge={this.state.currentChallenge} />
        ) : (
          <List
            grid={{
              xs: 1,
              sm: 2,
              md: 2,
              lg: 3,
              xl: 4,
              xxl: 5,
              gutter: 20
            }}
            dataSource={this.state.challenges}
            locale={{
              emptyText: (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
                  <FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
                  <h1 style={{ fontSize: "200%" }}>No challenges have been released yet</h1>
                </div>
              )
            }}
            renderItem={item => {
              if (item.solves.length === 0) item.firstBlood = "No First Blood Yet!"
              else {
                if (this.props.disableNonCatFB) {
                  item.firstBlood = "No First blood Yet"
                  for (let i = 0; i < item.solves.length; i++) {
                    if (this.props.userCategories[item.solves[i]] !== "none") {
                      item.firstBlood = item.solves[i]
                      break
                    }
                  }
                }
                else item.firstBlood = item.solves[0]
              }

              if (item.requires && !item.requiresSolved && this.props.permissions < 2) {

                return (
                  <List.Item key={item._id}>
                    <Tooltip title={<span>Please solve "<b><u>{item.requiresName}</u></b>" to unlock this challenge.</span>}>
                      <div id={item._id}>
                        <Card
                          type="inner"
                          bordered={true}
                          className="card-design"
                        >

                          <Meta
                            description={
                              <div className="card-design-body" >
                                <LockOutlined className="disabled-style" />
                                <h1 className="card-design-name" >{item.name}</h1>
                                <h1 className="card-design-points">{item.points}</h1>
                                <h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
                                {this.state.loadingChallenge && this.state.currentChallenge === item._id && (
                                  <div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
                                    <LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
                                  </div>
                                )}
                                {item.visibility === false && (
                                  <h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
                                )}
                              </div>


                            }
                          />
                        </Card> {/*Pass entire datasource as prop*/}
                      </div>
                    </Tooltip>
                  </List.Item>
                )

              }
              else if (!item.solved) {
                return (
                  <List.Item key={item._id}>
                    <div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved, item.firstBlood) }}>
                      <Card
                        hoverable
                        type="inner"
                        bordered={true}
                        className="card-design hover"
                      >
                        <Meta
                          description={
                            <div className="card-design-body">
                              <h1 className="card-design-name">{item.name}</h1>
                              <h1 className="card-design-points">{item.points}</h1>
                              <h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
                              {this.state.loadingChallenge && this.state.currentChallenge === item._id && (
                                <div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
                                  <LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
                                </div>
                              )}
                              {item.visibility === false && (
                                <h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
                              )}
                            </div>


                          }
                        />
                      </Card> {/*Pass entire datasource as prop*/}
                    </div>
                  </List.Item>
                )
              }
              else {
                return (
                  <List.Item key={item._id}>
                    <div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved) }}>
                      <Card
                        hoverable
                        type="inner"
                        bordered={true}
                        className="card-design solved hover"
                      >
                        <Meta
                          description={
                            <div className="card-design-body">
                              <CheckOutlined className="correct-style" />
                              <h1 className="card-design-name">{item.name}</h1>
                              <h1 className="card-design-points">{item.points}</h1>
                              <h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
                              {this.state.loadingChallenge && this.state.currentChallenge === item._id && (
                                <div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
                                  <LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
                                </div>
                              )}
                              {item.visibility === false && (
                                <h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
                              )}
                            </div>


                          }
                        />
                      </Card> {/*Pass entire datasource as prop*/}
                    </div>
                  </List.Item>
                )
              }
            }
            }
          />)}
      </Layout>

    );
  }

// ==== End Badge ====

  render() {
    const { currentStep } = this.state;
    return (
      <div className="direction-components">
        <Row>
          <Col span={24}>
            <Divider orientation="left">Cascader example</Divider>
            <Cascader
              suffixIcon={<SearchIcon />}
              options={cascaderOptions}
              onChange={this.onCascaderChange}
              placeholder="یک مورد انتخاب کنید"
              popupPlacement={this.props.popupPlacement}
            />
            &nbsp;&nbsp;&nbsp;&nbsp; With search:
            <Cascader
              suffixIcon={<SmileOutlined />}
              options={cascaderOptions}
              onChange={this.onCascaderChange}
              placeholder="Select an item"
              popupPlacement={this.props.popupPlacement}
              showSearch={this.cascaderFilter}
            />
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={12}>
            <Divider orientation="left">Switch example</Divider>
            &nbsp;&nbsp;
            <Switch defaultChecked />
            &nbsp;&nbsp;
            <Switch loading defaultChecked />
            &nbsp;&nbsp;
            <Switch size="small" loading />
          </Col>
          <Col span={12}>
            <Divider orientation="left">Radio Group example</Divider>

            <Radio.Group defaultValue="c" buttonStyle="solid">
              <Radio.Button value="a">تهران</Radio.Button>
              <Radio.Button value="b" disabled>
                اصفهان
              </Radio.Button>
              <Radio.Button value="c">فارس</Radio.Button>
              <Radio.Button value="d">خوزستان</Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={12}>
            <Divider orientation="left">Button example</Divider>
            <div className="button-demo">
              <Button type="primary" icon={<DownloadOutlined />} />
              <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
              <Button type="primary" shape="round" icon={<DownloadOutlined />} />
              <Button type="primary" shape="round" icon={<DownloadOutlined />}>
                Download
              </Button>
              <Button type="primary" icon={<DownloadOutlined />}>
                Download
              </Button>
              <br />
              <Button.Group>
                <Button type="primary">
                  <LeftOutlined />
                  Backward
                </Button>
                <Button type="primary">
                  Forward
                  <RightOutlined />
                </Button>
              </Button.Group>
              <Button type="primary" loading>
                Loading
              </Button>
              <Button type="primary" size="small" loading>
                Loading
              </Button>
            </div>
          </Col>
          <Col span={12}>
            <Divider orientation="left">Tree example</Divider>
            <Tree
              showLine
              checkable
              defaultExpandedKeys={['0-0-0', '0-0-1']}
              defaultSelectedKeys={['0-0-0', '0-0-1']}
              defaultCheckedKeys={['0-0-0', '0-0-1']}
            >
              <TreeNode title="parent 1" key="0-0">
                <TreeNode title="parent 1-0" key="0-0-0" disabled>
                  <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
                  <TreeNode title="leaf" key="0-0-0-1" />
                </TreeNode>
                <TreeNode title="parent 1-1" key="0-0-1">
                  <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
                </TreeNode>
              </TreeNode>
            </Tree>
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={24}>
            <Divider orientation="left">Input (Input Group) example</Divider>
            <InputGroup size="large">
              <Row gutter={8}>
                <Col span={5}>
                  <Input defaultValue="0571" />
                </Col>
                <Col span={8}>
                  <Input defaultValue="26888888" />
                </Col>
              </Row>
            </InputGroup>
            <br />
            <InputGroup compact>
              <Input style={{ width: '20%' }} defaultValue="0571" />
              <Input style={{ width: '30%' }} defaultValue="26888888" />
            </InputGroup>
            <br />
            <InputGroup compact>
              <Select defaultValue="Option1">
                <Option value="Option1">Option1</Option>
                <Option value="Option2">Option2</Option>
              </Select>
              <Input style={{ width: '50%' }} defaultValue="input content" />
              <InputNumber />
            </InputGroup>
            <br />
            <Search placeholder="input search text" enterButton="Search" size="large" />
            <br />
            <br />
            <div style={{ marginBottom: 16 }}>
              <Input
                addonBefore={this.selectBefore}
                addonAfter={this.selectAfter}
                defaultValue="mysite"
              />
            </div>
            <br />
            <Row>
              <Col span={12}>
                <Divider orientation="left">Select example</Divider>
                <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
                  <Option value="jack">Jack</Option>
                  <Option value="مورچه">مورچه</Option>
                  <Option value="disabled" disabled>
                    Disabled
                  </Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
                  <Option value="مورچه">مورچه</Option>
                </Select>
                <Select defaultValue="مورچه" style={{ width: 120 }} loading>
                  <Option value="مورچه">مورچه</Option>
                </Select>
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="Select a person"
                  optionFilterProp="children"
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  <Option value="jack">Jack</Option>
                  <Option value="سعید">سعید</Option>
                  <Option value="tom">Tom</Option>
                </Select>
              </Col>
              <Col span={12}>
                <Divider orientation="left">TreeSelect example</Divider>
                <div>
                  <TreeSelect
                    showSearch
                    style={{ width: '100%' }}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    placeholder="Please select"
                    allowClear
                    treeDefaultExpandAll
                  >
                    <TreeNode value="parent 1" title="parent 1" key="0-1">
                      <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
                        <TreeNode value="leaf1" title="my leaf" key="random" />
                        <TreeNode value="leaf2" title="your leaf" key="random1" />
                      </TreeNode>
                      <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
                        <TreeNode
                          value="sss"
                          title={<b style={{ color: '#08c' }}>sss</b>}
                          key="random3"
                        />
                      </TreeNode>
                    </TreeNode>
                  </TreeSelect>
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col span={24}>
                <Divider orientation="left">Modal example</Divider>
                <div>
                  <Button type="primary" onClick={this.showModal}>
                    Open Modal
                  </Button>
                  <Modal
                    title="پنچره ساده"
                    visible={this.state.modalVisible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                  >
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                  </Modal>
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col span={24}>
                <Divider orientation="left">Steps example</Divider>
                <div>
                  <Steps progressDot current={currentStep}>
                    <Step title="Finished" description="This is a description." />
                    <Step title="In Progress" description="This is a description." />
                    <Step title="Waiting" description="This is a description." />
                  </Steps>
                  <br />
                  <Steps current={currentStep} onChange={this.onStepsChange}>
                    <Step title="Step 1" description="This is a description." />
                    <Step title="Step 2" description="This is a description." />
                    <Step title="Step 3" description="This is a description." />
                  </Steps>
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col span={12}>
                <Divider orientation="left">Rate example</Divider>
                <div>
                  <Rate defaultValue={2.5} />
                  <br />
                  <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
                  supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
                  implement rtl support.
                </div>
              </Col>
              <Col span={12}>
                <Divider orientation="left">Badge example</Divider>
                <div>
                  <div>
                    <Badge count={this.state.badgeCount}>
                      <a href="#" className="head-example" />
                    </Badge>
                    <ButtonGroup>
                      <Button onClick={this.declineBadge}>
                        <MinusOutlined />
                      </Button>
                      <Button onClick={this.increaseBadge}>
                        <PlusOutlined />
                      </Button>
                    </ButtonGroup>
                  </div>
                  <div style={{ marginTop: 10 }}>
                    <Badge dot={this.state.showBadge}>
                      <a href="#" className="head-example" />
                    </Badge>
                    <Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
        </Row>

        <br />
        <br />
        <Row>
          <Col span={24}>
            <Divider orientation="left">Pagination example</Divider>
            <Pagination showSizeChanger defaultCurrent={3} total={500} />
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={24}>
            <Divider orientation="left">Grid System example</Divider>
            <div className="grid-demo">
              <div className="code-box-demo">
                <p>
                  <strong>* Note:</strong> Every calculation in RTL grid system is from right side
                  (offset, push, etc.)
                </p>
                <Row>
                  <Col span={8}>col-8</Col>
                  <Col span={8} offset={8}>
                    col-8
                  </Col>
                </Row>
                <Row>
                  <Col span={6} offset={6}>
                    col-6 col-offset-6
                  </Col>
                  <Col span={6} offset={6}>
                    col-6 col-offset-6
                  </Col>
                </Row>
                <Row>
                  <Col span={12} offset={6}>
                    col-12 col-offset-6
                  </Col>
                </Row>
                <Row>
                  <Col span={18} push={6}>
                    col-18 col-push-6
                  </Col>
                  <Col span={6} pull={18}>
                    col-6 col-pull-18
                  </Col>
                </Row>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    );
  }

render() {

        const { Header, Footer, Sider, Content } = Layout;

        const release_number_whats_new_cookie = Cookies.get("release_number_whats_new_cookie");
        const release_number_env = process.env.REACT_APP_RELEASE_NUMBER_WHATS_NEW;

        if(release_number_whats_new_cookie === undefined || release_number_whats_new_cookie !== release_number_env){
            this.openNotification();
            Cookies.set("release_number_whats_new_cookie", release_number_env);
        }



        return (

            <Router>
                <div>
                    <Layout>
                        <Sider collapsed={this.state.collapsed_sider}>
                            <div>
                                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>

                                    <Menu.Item key="release_status_menu_item" icon={<HistoryOutlined />}>
                                        <Link to="/release/status/?type=all">
                                            Release
                                        </Link>
                                    </Menu.Item>

                                    <SubMenu
                                        key="sub1"
                                        title={
                                            <span>
                                            <SettingOutlined />
                                            <span>Build</span>
                                            </span>
                                        }
                                    >

                                        <Menu.Item key="build_menu_item" icon={<HistoryOutlined />}>
                                            <Link to="/build/history">
                                                History
                                            </Link>
                                        </Menu.Item>


                                        <Menu.Item key="build_health_item" icon={<SmileOutlined/>} >
                                            <Link to="/health/daily/overview">
                                            Health
                                            </Link>
                                        </Menu.Item>


                                    </SubMenu>

                                    <Menu.Item key={"incidents"} icon={<FireFilled/>}>
                                        <Link to={"/incidents"}>
                                            Incidents
                                        </Link>
                                    </Menu.Item>

                                    <Menu.Item key={"whats_news"} icon={<ToolOutlined/>}>
                                        <Link to={"/help"}>
                                            Help
                                        </Link>
                                    </Menu.Item>

                                </Menu>
                            </div>
                        </Sider>
                        <Layout>
                            <Header style={{background: "white", height: "120px", float: "left"}}>
                                    <div className="left">
                                        {React.createElement(this.state.collapsed_sider ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                            className: 'trigger',
                                            onClick: this.toggle_side,
                                        })}
                                    </div>
                                    <div className="center">
                                        <h1 style={{color: "#316DC1", margin: "20px"}}>OpenShift Release Portal</h1>
                                    </div>
                            </Header>
                            <Content>
                                <Switch>
                                    <Route component={Daily_overview_table} path="/health/daily/overview" exact/>
                                    <Route path="/build/history" exact component={Build_history_home} name="build_history"/>
                                    <Route path="/release/status/:branch" exact component={Release_home_page} name="release_status"/>
                                    <Route component={Daily_overview_expand_home} path="/health/daily/detail/:date" exact/>
                                    <Route path="/health/daily/build/:date" exact render={(props) => <Build_record_table {...props}/>} name="daily_build_by_date"/>
                                    <Route path="/help" exact component={Whatsnew_carousel}/>
                                    <Route path="/release/advisory/overview/:advisoryid" exact component={Advisory_Overview_Home} name="advisory_overview_home"/>
                                    <Route path="/incidents" exact component={Incident_home}/>
                                    <Redirect exact from="" to={"/release/status/"+process.env.REACT_APP_OPENSHIFT_VERSION_RELEASE_HOME_PAGE}/>

                                </Switch>
                            </Content>

                            <Footer style={{ textAlign: 'center' }}>
                                RedHat ©2020
                            </Footer>

                        </Layout>
                    </Layout>
                </div>
            </Router>
        );

    }

AntdFormExample = () => {
  return (
    <Form {...formItemLayout}>
      <Form.Item
        label="Fail"
        validateStatus="error"
        help="Should be combination of numbers & alphabets"
      >
        <Input placeholder="unavailable choice" id="error" />
      </Form.Item>

      <Form.Item label="Warning" validateStatus="warning">
        <Input placeholder="Warning" id="warning" prefix={<SmileOutlined />} />
      </Form.Item>

      <Form.Item
        label="Validating"
        hasFeedback
        validateStatus="validating"
        help="The information is being validated..."
      >
        <Input placeholder="I'm the content is being validated" id="validating" />
      </Form.Item>

      <Form.Item label="Success" hasFeedback validateStatus="success">
        <Input placeholder="I'm the content" id="success" />
      </Form.Item>

      <Form.Item label="Warning" hasFeedback validateStatus="warning">
        <Input placeholder="Warning" id="warning2" />
      </Form.Item>

      <Form.Item
        label="Fail"
        hasFeedback
        validateStatus="error"
        help="Should be combination of numbers & alphabets"
      >
        <Input placeholder="unavailable choice" id="error2" />
      </Form.Item>

      <Form.Item label="Success" hasFeedback validateStatus="success">
        <DatePicker style={{ width: '100%' }} />
      </Form.Item>

      <Form.Item label="Warning" hasFeedback validateStatus="warning">
        <TimePicker style={{ width: '100%' }} />
      </Form.Item>

      <Form.Item label="Error" hasFeedback validateStatus="error">
        <Select>
          <Option value="1">Option 1</Option>
          <Option value="2">Option 2</Option>
          <Option value="3">Option 3</Option>
        </Select>
      </Form.Item>

      <Form.Item
        label="Validating"
        hasFeedback
        validateStatus="validating"
        help="The information is being validated..."
      >
        <Cascader options={[]} />
      </Form.Item>

      <Form.Item label="inline" style={{ marginBottom: 0 }}>
        <Form.Item
          validateStatus="error"
          help="Please select the correct date"
          style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
        >
          <DatePicker />
        </Form.Item>
        <span
          style={{
            display: 'inline-block',
            width: '24px',
            lineHeight: '32px',
            textAlign: 'center',
          }}
        >
          -
        </span>
        <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
          <DatePicker />
        </Form.Item>
      </Form.Item>

      <Form.Item label="Success" hasFeedback validateStatus="success">
        <InputNumber style={{ width: '100%' }} />
      </Form.Item>

      <Form.Item label="Success" hasFeedback validateStatus="success">
        <Input allowClear placeholder="with allowClear" />
      </Form.Item>

      <Form.Item label="Warning" hasFeedback validateStatus="warning">
        <Input.Password placeholder="with input password" />
      </Form.Item>

      <Form.Item label="Error" hasFeedback validateStatus="error">
        <Input.Password allowClear placeholder="with input password and allowClear" />
      </Form.Item>
    </Form>
  )
}

Seed = () => {
  document.title = TITLE;
  useDidRecover(() => {
    document.title = TITLE;
  });
  const [isSeedInputVisible, setIsSeedInputVisible] = useState(false);
  const [seedList, setSeedList] = useState([]);
  const [total, setTotal] = useState(0);
  // const [current, setCurrent] = useState(0)
  const [value, setValue] = useState();

  const columns = [
    {
      title: "玩家id",
      dataIndex: "gameId",
      key: "gameId",
      render: (text, seed) => (
        <>
          <Row>
            <p>{text}</p>
            <CopyToClipboard text={text} onCopy={() => message.info("成功")}>
              <CopyOutlined />
            </CopyToClipboard>
          </Row>
          <Row align="middle">
            <SmileOutlined onClick={() => like(seed)} />
            <p>{seed.likes}</p>
          </Row>
          <Row align="middle">
            <FrownOutlined onClick={() => dislike(seed)} />
            <p>{seed.dislikes}</p>
          </Row>
          {seed.userId === userId && (
            <Row align="middle">
              <DeleteOutlined onClick={() => deleteSeed(seed)} />
            </Row>
          )}
        </>
      ),
    },
    {
      title: "主要",
      dataIndex: "playerId0",
      key: "playerId0",
      render: (text) => <PlayerImage id={text} />,
    },
    {
      title: "蓝色因子",
      dataIndex: "blue0",
      key: "blue0",
      render: (text, record) => (
        <span className="rate-label">{`${SEED_BLUE_LABELS[text]}\xa0\xa0${record["blueLevel0"]}`}</span>
      ),
    },
    {
      title: "红色因子",
      dataIndex: "red0",
      key: "red0",
      render: (text, record) => (
        <span className="rate-label">{`${SEED_RED_LABELS[text]}\xa0\xa0${record["redLevel0"]}`}</span>
      ),
    },
    {
      title: "绿色因子",
      dataIndex: "greenLevel0",
      key: "greenLevel0",
      render: (text, record) => (
        <span className="rate-label">{`固有\xa0\xa0${record["greenLevel0"]}`}</span>
      ),
    },
    {
      title: "URA",
      dataIndex: "uraLevel0",
      key: "uraLevel0",
      render: (text, record) => (
        <span className="rate-label">
          {`${record["uraLevel0"] ? `URA  ${record["uraLevel0"]}` : ""}`}
        </span>
      ),
    },
    {
      title: "父辈1",
      dataIndex: "playerId1",
      key: "playerId1",
      render: (text) => <PlayerImage id={text} />,
    },
    {
      title: "父辈2",
      dataIndex: "playerId2",
      key: "playerId2",
      render: (text) => <PlayerImage id={text} />,
    },
    {
      title: "总计蓝色",
      key: "allBlue",
      render: (text, record) =>
        Object.keys(SEED_BLUE_LABELS).map((key) => {
          if (record[key]) {
            return (
              <span
                key={key}
                className="rate-label"
              >{`${SEED_BLUE_LABELS[key]}\xa0\xa0${record[key]}`}</span>
            );
          } else {
            return null;
          }
        }),
    },
    {
      title: "总计红色",
      key: "allRed",
      render: (text, record) =>
        Object.keys(SEED_RED_LABELS).map((key) => {
          if (record[key]) {
            return (
              <span
                key={key}
                className="rate-label"
              >{`${SEED_RED_LABELS[key]}\xa0\xa0${record[key]}`}</span>
            );
          } else {
            return null;
          }
        }),
    },
    { title: "总计URA", dataIndex: "uraLevel", key: "uraLevel", render: (text) => text },
    { title: "总计白色", dataIndex: "white", key: "white", render: (text) => text },
    {
      title: "支援卡",
      dataIndex: "supportId",
      key: "supportId",
      render: (text) => <SupportImage id={text} />,
    },
    {
      title: "突破等级",
      dataIndex: "supportLevel",
      key: "supportLevel",
      render: (text, record) => (
        <Row>
          <Rate count={4} value={record["supportLevel"]} disabled />
        </Row>
      ),
    },
  ];

  const showSeedInput = (index) => {
    setIsSeedInputVisible(true);
  };
  const closeSeedInput = () => {
    setIsSeedInputVisible(false);
  };
  const showMySeed = () => {
    search({ attrs: ["userId"], levels: [userId] });
  };
  const deleteSeed = async (value) => {
    const res = await axios.post("https://urarawin.com/api/sqlite/delete", value);
    if (res.data) {
      message.info("成功删除");
    } else {
      message.info("出错了");
    }
  };
  const search = async (value) => {
    setValue(value);
    const res = await axios.post("https://urarawin.com/api/sqlite/search", value);
    // setCurrent(0)
    if (res.data) {
      if (res.data.count) {
        setSeedList([...res.data.list]);
        setTotal(res.data.count);
      } else {
        setSeedList([]);
        setTotal(0);
        message.info("暂无数据");
      }
    } else {
      message.info("出错了");
    }
  };
  const like = async (seed) => {
    if (!userId) {
      message.info("刷新后重试");
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/like", { id, userId });
    if (res.data) {
      message.info("成功");
      seed.likes += 1;
    }
    setSeedList([...seedList]);
  };
  const dislike = async (seed) => {
    if (!userId) {
      message.info("刷新后重试");
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/dislike", { id, userId });
    if (res.data) {
      message.info("成功");
      seed.dislikes += 1;
    }
    setSeedList([...seedList]);
  };
  const onChange = (e) => {
    search({
      ...value,
      count: e.total,
      offset: e.current * 10 - 10,
    });
  };
  return (
    <>
      <div className="seed-container">
        <Card className="card" title="过滤条件">
          <SearchForm search={search} />
          <Button onClick={() => showSeedInput()}>配置我的种子</Button>
          <Button onClick={() => showMySeed()}>查看我的种子</Button>
        </Card>
        <Card className="card" title="结果">
          <Table
            columns={columns}
            dataSource={seedList}
            onChange={onChange}
            pagination={{
              pageSize: 10,
              total: total,
              simple: true,
              showQuickJumper: false,
              position: ["topRight", "bottomRight"],
            }}
            rowKey={"id"}
          />
        </Card>
      </div>
      <Modal
        visible={isSeedInputVisible}
        onOk={closeSeedInput}
        onCancel={closeSeedInput}
        footer={null}
        width={"80%"}
      >
        <SeedInput onFinish={closeSeedInput} />
      </Modal>
    </>
  );
}