@ant-design/icons#CaretDownOutlined JavaScript Examples

render() {
        const user = getLoginUser() || {};
        const name = user.name;

        const { className, theme } = this.props;

        const menu = (
            <Menu styleName="menu" theme={theme} selectedKeys={[]} onClick={this.handleMenuClick}>
                <Item key="modifyPassword"><EditOutlined />修改密码</Item>
                <Item><Link to="/settings"><SettingOutlined />设置</Link></Item>
                <Menu.Divider />
                <Item key="logout"><LogoutOutlined />退出登录</Item>
            </Menu>
        );
        return (
            <div styleName="user-menu" ref={node => this.userMenu = node}>
                <Dropdown trigger="click" overlay={menu} getPopupContainer={() => (this.userMenu || document.body)}>
                    <span styleName="account" className={className}>
                        <span styleName="user-name">{name}</span>
                        <CaretDownOutlined />
                    </span>
                </Dropdown>

                <ModifyPassword
                    visible={this.state.passwordVisible}
                    onOk={() => this.setState({ passwordVisible: false })}
                    onCancel={() => this.setState({ passwordVisible: false })}
                />
            </div>
        );
    }

Trend = ({ colorful = true, reverseColor = false, flag, children, className, ...rest }) => {
  const classString = classNames(
    styles.trendItem,
    {
      [styles.trendItemGrey]: !colorful,
      [styles.reverseColor]: reverseColor && colorful,
    },
    className,
  );
  return (
    <div {...rest} className={classString} title={typeof children === 'string' ? children : ''}>
      <span>{children}</span>
      {flag && (
        <span className={styles[flag]}>
          {flag === 'up' ? <CaretUpOutlined /> : <CaretDownOutlined />}
        </span>
      )}
    </div>
  );
}

DefaultPage = ({ group, graphs = [], timestamp, expandDefault = false, dispatch }) => {
  const [collapsed, toggleCollapse] = useState(!expandDefault)
  const [_graphs, setGraphs] = useState([])
  const ag = graphs.some(x => x.groupId === group.id)
  useEffect(() => {
    if (group && !collapsed) {
      if (graphs.every(x => x.groupId !== group.id)) {
        dispatch({
          type: 'application/GRAPHS',
          payload: { id: group.id }
        })
      }
    }
  }, [group, collapsed])
  useEffect(() => {
    if (ag) {
      setGraphs(graphs.filter(x => x.groupId === group.id))
    }
  }, [graphs])
  return (
    <>
      <div className='application-group'>
        <div className='group'>
          <div
            className='group-header clickable'
            onClick={() => toggleCollapse(!collapsed)}
          >
            <h3 title={_graphs.id || ''} className='group-title'>{get(group, 'name', '')}</h3>
            <span className='collapse-button'>
              {collapsed ? <CaretDownOutlined /> : <CaretUpOutlined />}
            </span>
          </div>
          <div className={`group-graphs ${collapsed ? 'collapse' : ''}`}>
            {
              !collapsed &&
                <Row gutter={[16, 16]}>
                  {
                    _graphs.length > 0
                      ? _graphs.map((graph, index) => {
                        return (
                          <Col key={graph.id || index} xs={24} sm={24} md={24} lg={12} xl={8}>
                            <Graph graph={graph} timestamp={timestamp} />
                          </Col>
                        )
                      })
                      : <p className='text-center'>Cannot load graphs.</p>
                  }
                </Row>
            }
          </div>
        </div>
      </div>
    </>
  )
}

function Navbar(props) {
  const dispatch = useDispatch()
  const toggleSideBar = () => {
    dispatch({ type: 'R_app_sidebar_opened', data: !props.opened })
  }
  //退出登录
  const loginOut = () => {
    dispatch(props.A_logout).then(() => {
      message.success('退出登录成功')
    })
  }
  const menu = () => (
    <Menu>
      <Menu.Item key="0">
        <a href="/">Home</a>
      </Menu.Item>
      <Menu.Item key="1">
        <a href="https://github.com/jzfai/react-admin-template" target="_blank">
          Github
        </a>
      </Menu.Item>
      <Menu.Item key="2">
        <a href="https://github.com/jzfai/react-admin-template" target="_blank">
          Docs
        </a>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="3" onClick={loginOut}>
        login out
      </Menu.Item>
    </Menu>
  )
  return (
    <div className="navbar rowBC">
      <div className="rowSC">
        <Hamburger isActive toggleSideBar={toggleSideBar} />
        <Breadcrumb />
      </div>
      {/* 下拉退出登录*/}
      <div className="mr-1">
        <Dropdown className="rowSE" overlay={menu} trigger={['click']}>
          <a className="ant-dropdown-link avatar-wrapper" onClick={(e) => e.preventDefault()}>
            <img
              className="user-avatar"
              src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
            />{' '}
            <CaretDownOutlined className="mlPx-6 font-sizePx12" style={{ color: '#000' }} />
          </a>
        </Dropdown>
      </div>
    </div>
  )
}

NumberInfo = ({ theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest }) => (
  <div
    className={classNames(styles.numberInfo, {
      [styles[`numberInfo${theme}`]]: theme,
    })}
    {...rest}
  >
    {title && (
      <div className={styles.numberInfoTitle} title={typeof title === 'string' ? title : ''}>
        {title}
      </div>
    )}
    {subTitle && (
      <div
        className={styles.numberInfoSubTitle}
        title={typeof subTitle === 'string' ? subTitle : ''}
      >
        {subTitle}
      </div>
    )}
    <div
      className={styles.numberInfoValue}
      style={
        gap
          ? {
            marginTop: gap,
          }
          : {}
      }
    >
      <span>
        {total}
        {suffix && <em className={styles.suffix}>{suffix}</em>}
      </span>
      {(status || subTotal) && (
        <span className={styles.subTotal}>
          {subTotal}
          {status && status === 'up' ? <CaretUpOutlined /> : <CaretDownOutlined />}
        </span>
      )}
    </div>
  </div>
)

NumberInfo = ({ theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest }) => (
  <div
    className={classNames(styles.numberInfo, {
      [styles[`numberInfo${theme}`]]: theme,
    })}
    {...rest}
  >
    {title && (
      <div className={styles.numberInfoTitle} title={typeof title === 'string' ? title : ''}>
        {title}
      </div>
    )}
    {subTitle && (
      <div
        className={styles.numberInfoSubTitle}
        title={typeof subTitle === 'string' ? subTitle : ''}
      >
        {subTitle}
      </div>
    )}
    <div
      className={styles.numberInfoValue}
      style={
        gap
          ? {
              marginTop: gap,
            }
          : {}
      }
    >
      <span>
        {total}
        {suffix && <em className={styles.suffix}>{suffix}</em>}
      </span>
      {(status || subTotal) && (
        <span className={styles.subTotal}>
          {subTotal}
          {status && status === 'up' ? <CaretUpOutlined /> : <CaretDownOutlined />}
        </span>
      )}
    </div>
  </div>
)

Allocation = ({
  account,
  library,
  receivedData,
  mainCoinLogoURI,
  poolBaseData,
  poolTokenDecimals,
  poolDistributionStage,
  poolDistributionDate,
  poolID,
  poolStatus,
  poolMainCoinDecimals,
  poolMainCoinAddress
}) => {

  const [allocationInfo, setAllocationInfo] = useState({});
  const [innerValues, setInnerValues] = useState([0, 0, 0, 0, 0]);
  const [coverOpenStates, setCoverOpenStates] = useState(new Array(5).fill('cover'));
  const [salesValue, setSalesValue] = useState(0);
  const [isShowingBonusInstrution, SetIsShowingBonusInstruction] = useState(false);
  const [isClickedVesting, setIsClickedVesting] = useState(false);
  const [recordWalletId, setRecordWalletId] = useState("");

  // fetching allocation data
  useEffect(async () => {
    if (!account || !receivedData.projectToken) return;
    // get allocation status from backend at begining
    await getAllocationInfo(API_URL(), account, receivedData.projectToken)
      .then(res => {
        if (res && res.allocationAmount) {
          setAllocationInfo(res);
          updateInnerValues(2, res);
          updateCoverStates(2);
          setSalesValue(res.allocationLeft);
          setRecordWalletId(res.recordWalletId ? res.recordWalletId : "");
        }
        console.log('allocation info: ', receivedData.projectToken, res);
      })
      .catch(e => {
        console.log('Get allocation error ', e);
        throw e;
      });
  }, [account, receivedData]);

  const onFocusSaleValue = (e) => {
    if (!allocationInfo.allocationAmount) {
      requireAllocation(API_URL(), account, receivedData.projectToken).then(res => {
        if (res && res.allocationAmount) {
          console.log('resalloc: ', res);
          setAllocationInfo(res);
          updateInnerValues(2, res);
          updateCoverStates(2);
        }
      }).catch(e => {
        console.error(e);
      })
    }
  }

  const onBlurSaleValue = (e) => {
    const value = e.target.value;
    if (!allocationInfo.allocationAmount) {
      setSalesValue(0);
      return;
    }
    const allocationLeft = allocationInfo.allocationLeft;

    const minInvest = receivedData.minInvest ? receivedData.minInvest : 100
    if (value > allocationLeft) {
      setSalesValue(allocationLeft);
    } else if (value < minInvest) {
      setSalesValue(minInvest);
    } else {
      setSalesValue(value);
    }
  }

  const validWalletId = (chain, walletId) => {
    if(walletId === "") return false;
    return true;
  }

  const onClickBuy = () => {
    console.log("buy");
    console.log("sales value", salesValue);

    if (receivedData.actualChain) {
      console.log(receivedData.actualChain, recordWalletId);
      if (!validWalletId(receivedData.actualChain, recordWalletId)) {
        message.warn('Please submit a valid walletId before investing.')
        return
      } else {
        onClickRecordWallet();
      }
    }

    investClicked(LAUNCHPAD_ADDRESS(), poolID, salesValue);
  }

  const onClickRecordWallet = () => {
    console.log("record walletId.", recordWalletId);

    recordWallet(API_URL(), account, receivedData.projectToken, recordWalletId)
      .then(res => {
        if (res && res.recordWalletId) {
          setRecordWalletId(res.recordWalletId);
          message.success('Save walletId success.')
        }
        console.log('userProject info: ', res);
      })
      .catch(e => {
        console.log('Get allocation error ', e);
        message.error('Failed to save walletId. Please click cover to get allocation first.')
        throw e;
      });
  }

  const randomRange = (min, max) => Math.floor(Math.random() * (max - min) + min);

  const updateInnerValues = (index, allocationInfo) => {
    const newInnerValues = [0, 0, 0, 0, 0];
    const allocationAmount = allocationInfo.allocationAmount;
    for (let i = 0; i < innerValues.length; i++) {
      if (i === index) {
        newInnerValues[i] = allocationAmount;
      } else {
        newInnerValues[i] = randomRange(allocationAmount * 0.1, allocationAmount * 3);
      }
    }
    console.log('newInnerValues', newInnerValues);
    setInnerValues(newInnerValues);
  }

  const updateCoverStates = (index) => {
    const newCoverOpenStates = ['removed', 'removed', 'removed', 'removed', 'removed'];
    newCoverOpenStates[index] = 'open';
    setCoverOpenStates(newCoverOpenStates);
  }

  const tooltipTitle = () => {
    return (
      <div>
        <span>Increase Your Allocation Amount:</span>
        <br />
        <span className='tool-tip-content'>
          1.Increase your trading volume @ <Link to="/#/exchange" target="_blank">Exchange</Link>
        </span>
        <br />
        <span className='tool-tip-content'>
          2.Increase your liquidity @ <Link to="/#/liquidity" target="_blank">Liquidity</Link>
        </span>
        <br />
        <span className='tool-tip-content'>
          3.Buy and hold more $ACY @ <Link to="/#/exchange" target="_blank">Exchange</Link>
        </span>
      </div>
    )
  }

  const BonusInstruction = () => {
    return (
      <div className='bonus-instruction-container'>
        <ul>
          <li>Increase your @<Link to="/#/exchange" target="_blank">Exchange</Link> volume</li>
          <li>Increase your @<Link to="/#/liquidity" target="_blank">Liquidity</Link></li>
          <li>Buy and hold more <Link to="/#/exchange" target="_blank">$ACY</Link></li>
        </ul>
      </div>
    )
  }

  const vestingClaimClicked = async () => {
    // can't claim before vesting schedule
    console.log('Distribution Date', poolDistributionDate);

    let startDistributionTime = poolDistributionDate[0];
    let nowTime = moment.utc().unix();
    console.log(nowTime, startDistributionTime);
    if (nowTime < startDistributionTime) {
      return;
    }

    const PoolContract = getContract(LAUNCHPAD_ADDRESS(), POOLABI, library, account);

    const result = await PoolContract.WithdrawERC20ToInvestor(poolID)
      .catch(e => {
        console.log('claim Error', e);
      });
  }

  const investClicked = async (poolAddress, poolId, amount) => {
    const PoolContract = getContract(LAUNCHPAD_ADDRESS(), POOLABI, library, account);

    if (!account) {
      return;
    }
    //TO-DO: Request UseAllocation API, process only when UseAllocation returns true
    const status = await (async () => {
      // NOTE (gary 2022.1.6): use toString method
      const approveAmount = BigInt(amount) * BigInt(Math.pow(10, poolMainCoinDecimals))
      const state = await approveNew(poolMainCoinAddress, approveAmount, poolAddress, library, account);
      const result = await PoolContract.InvestERC20(poolId, approveAmount)
        .then((res) => {
          useAllocation(API_URL(), account, receivedData.projectToken, amount)
            .then(res => {
              if (res) {
                console.log('use alloc', res);
                setAllocationInfo(res);
              }
            })
            .catch(e => console.log(e));
        })
        .catch(e => {
          console.log(e)
          return new CustomError('CustomError while buying token');
        });
      return result;
    })();

    console.log("buy contract", status)
  }

  const calcAllocBonus = (allocationBonus) => {
    let totalBonus = 0;
    if (allocationBonus) {
      for (let i = 0; i < allocationBonus.length; i++) {
        totalBonus += allocationBonus[i].bonusAmount;
      }
    }
    return totalBonus;
  }

  const card_indexes = [0, 1, 2, 3, 4];

  return (
    <div>
      <div className='cardContent allocation-content allocation-content-active'>
        <div className="allocation-title-container">
          <div className='title-tooltip-container'>
            <div style={{ height: 24 }}></div>
            <div className="allocation-title">Allocation</div>
            <div className='bonus-instruction-title' onClick={(e) => SetIsShowingBonusInstruction(!isShowingBonusInstrution)}>
              How to Increase
            </div>

            {/* <Tooltip title={tooltipTitle} mouseEnterDelay={0} mouseLeaveDelay={0.25}>
              <Icon type="info-circle" className='tool-tip-icon' />
            </Tooltip> */}
          </div>

          <div className='allocation-cards'>
            <div className="allocationContainer">
              {
                card_indexes.map((index) =>
                  <AllocationCard
                    key={index}
                    index={index}
                    allocationInfo={allocationInfo}
                    setAllocationInfo={setAllocationInfo}
                    updateCoverStates={updateCoverStates}
                    updateInnerValues={updateInnerValues}
                    coverOpenStates={coverOpenStates}
                    innerValues={innerValues}
                    account={account}
                    receivedData={receivedData}
                    setSalesValue={setSalesValue}
                  />
                )
              }
            </div>
          </div>

          <div style={{ width: 75, height: 66 }}></div>
          {/* Next row */}
          {isShowingBonusInstrution &&
            <BonusInstruction></BonusInstruction>
          }
        </div>

        {/* {allocationInfo && allocationInfo.allocationAmount &&
          <div className="allocation-info-container">
            <div>Allocation Amount: <span>{allocationInfo.allocationAmount}</span></div>
            <div>Allocation Bonus: <span>{calcAllocBonus(allocationInfo.allocationBonus)}</span></div>
            <div>Allocation Used: <span>{allocationInfo.allocationUsed}</span></div>
            <div>Allocation Left: <span>{allocationInfo.allocationLeft}</span></div>
          </div>
        } */}
        {receivedData && receivedData.actualChain &&
          <>
            <form className="sales-container" style={{ marginBottom: "12px" }}>
              <div className="sale-vesting-title">
                <label for="sale-number" >
                  Wallet
                </label>
              </div>

              <div className="sales-input-container">
                <InputGroup>
                  <Input
                    className="sales-input"
                    value={recordWalletId}
                    onChange={(e) => setRecordWalletId(e.target.value)}
                    placeholder={`Please add your ${receivedData.actualChain} wallet address.`}
                    // onBlur={onChangeRecordWalletId}
                  />
                </InputGroup>
              </div>
              <Button
                className="sales-submit"
                onClick={onClickRecordWallet}
              >
                Save
              </Button>
            </form>
          </>
        }

        <form className="sales-container">
          <div className="sale-vesting-title">
            <label for="sale-number" >
              Sale
            </label>
          </div>

          <div className="sales-input-container">
            <InputGroup>
              <Input
                className="sales-input"
                value={salesValue}
                onChange={(e) => setSalesValue(e.target.value)}
                onBlur={onBlurSaleValue}
                onFocus={onFocusSaleValue}
              />
              <div className="unit-max-group">
                <div className="token-logo">
                  <img src={mainCoinLogoURI} alt="token-logo" className="token-image" />
                </div>
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginLeft: '2rem', fontWeight: '700' }}>{receivedData.mainCoin}</div>
              </div>
            </InputGroup>
          </div>
          <Button
            className="sales-submit"
            disabled={poolBaseData ? (poolBaseData[2] >= new Date() || poolBaseData[3] <= new Date()) : false}
            onClick={onClickBuy}
          >
            Buy
          </Button>
        </form>

        <div className="vesting-open-container">
          <div className="vesting-container">
            <p className="sale-vesting-title vesting">Vesting</p>

            <div className='vesting-trigger-container' onClick={() => setIsClickedVesting(!isClickedVesting)}>
              <div className="text-line-container">
                <p>Unlock {poolDistributionStage[0]}% at TGE, vesting in {poolDistributionStage.length} stages: </p>
                <span className="vesting-line" />

              </div>
              <div className="arrow-down-container">
                <CaretDownOutlined
                  className={
                    isClickedVesting ? 'arrow-down-active arrow-down' : 'arrow-down-inactive arrow-down'
                  }
                />
              </div>
            </div>
          </div>

          <div className={isClickedVesting ? 'vesting-schedule vesting-schedule-active' : 'vesting-schedule'}>
            <VestingSchedule
              vestingDate={poolDistributionDate}
              stageData={poolDistributionStage}
              vestingClick={vestingClaimClicked}
              receivedData={receivedData}
            />
          </div>
        </div>
      </div>

    </div>
  );
}