@ant-design/icons#CaretUpOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#CaretUpOutlined. 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: index.jsx    From the-eye-knows-the-garbage with MIT License 6 votes vote down vote up 
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>
  );
}
Example #2
Source File: group.js    From gobench with Apache License 2.0 5 votes vote down vote up 
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>
    </>
  )
}
Example #3
Source File: index.jsx    From the-eye-knows-the-garbage with MIT License 5 votes vote down vote up 
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>
)
Example #4
Source File: index.jsx    From prometheusPro with MIT License 5 votes vote down vote up 
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>
)