react-icons/hi#HiPlusCircle TypeScript Examples

SeeAllModal = (props: Props) => {
  const numVisibleItems = props.visibleItems || DEFAULT_VISIBLE_ITEMS;
  const getFirstItems = (): JSX.Element => {
    return (
      <>
        <div className="d-none d-md-block">{props.items.slice(0, props.visibleItems ? numVisibleItems : 3)}</div>
        <div className="d-block d-md-none">{props.items.slice(0, props.visibleItems ? numVisibleItems : 5)}</div>
      </>
    );
  };

  const [openStatus, setOpenStatus] = useState(props.open || false);
  const [visibleItems, setVisibleItems] = useState<JSX.Element>(getFirstItems());

  useEffect(() => {
    if (!isUndefined(props.open) && openStatus !== props.open) {
      setOpenStatus(props.open);
    }
  }, [props.open, openStatus]);

  useEffect(() => {
    if (openStatus) {
      setOpenStatus(!openStatus);
    }
    setVisibleItems(getFirstItems());
  }, [props.packageId, props.version, props.items]); /* eslint-disable-line react-hooks/exhaustive-deps */

  return (
    <>
      {props.items.length <= numVisibleItems ? (
        <div role="list">{props.items}</div>
      ) : (
        <>
          <div role="list">{visibleItems}</div>

          <div className={`d-block d-md-none ${styles.legend}`}>
            <small className="text-muted fst-italic">Displaying only the first 5 entries</small>
          </div>

          <div className="d-flex flex-row align-items-baseline">
            <button
              className={`btn btn-link ps-0 pe-1 d-none d-md-block position-relative text-primary ${styles.btn}`}
              onClick={() => setOpenStatus(true)}
              aria-label="See all entries"
            >
              <div className="d-flex flex-row align-items-center">
                <HiPlusCircle className="me-1" />
                <span>See all</span>
              </div>
            </button>

            <div className={`text-muted position-relative ${styles.summary}`}>({props.items.length})</div>
          </div>

          <Modal
            modalDialogClassName={styles.modalDialog}
            modalClassName={`${props.modalClassName} ${styles.modal}`}
            header={<div className={`h3 m-2 flex-grow-1 text-truncate ${styles.title}`}>{props.title}</div>}
            open={openStatus}
            onClose={() => setOpenStatus(false)}
            footerClassName={styles.modalFooter}
          >
            <div className="my-3 mw-100">
              <div className="d-none d-md-block">{props.itemsForModal || props.items}</div>
              <div className="d-block d-md-none" role="list">
                {props.items}
              </div>
            </div>
          </Modal>
        </>
      )}
    </>
  );
}

Last30DaysViews = (props: Props) => {
  const history = useHistory();
  const [series, setSeries] = useState<any[]>([]);

  const getLegend = (): string => {
    if (props.version) {
      return props.version;
    } else {
      if (props.repoKind === RepositoryKind.Container) {
        return 'all tags';
      } else {
        return 'all versions';
      }
    }
  };

  const getSparkLineConfig = (): ApexCharts.ApexOptions => {
    return {
      chart: {
        type: 'area',
        width: 100,
        height: 40,
        fontFamily: "'Lato', Roboto, 'Helvetica Neue', Arial, sans-serif !default",
        sparkline: {
          enabled: true,
        },
        animations: {
          enabled: false,
        },
      },
      fill: {
        opacity: 0.5,
      },
      grid: { borderColor: 'var(--border-md)' },
      tooltip: {
        style: {
          fontSize: '10px',
          fontFamily: "'Lato', Roboto, 'Helvetica Neue', Arial, sans-serif !default",
        },
        fixed: {
          enabled: false,
        },
        x: {
          formatter: (val: number): string => {
            return moment(val).format('DD MMM YY');
          },
        },
        y: {
          formatter: function (value: number) {
            return value.toFixed(0);
          },
          title: {
            formatter: () => '',
          },
        },
        marker: {
          show: false,
        },
      },
      plotOptions: {
        area: {
          fillTo: 'end',
        },
      },
      states: {
        hover: {
          filter: {
            type: 'none',
            value: 0,
          },
        },
        active: {
          filter: {
            type: 'none',
            value: 0,
          },
        },
      },
      stroke: {
        width: 2,
        curve: 'straight',
      },
      yaxis: {
        show: false,
        // Display markers on top and bottom positions
        min: () => -0.1,
        max: (max) => max + 0.1,
      },
      markers: {
        size: 0,
        hover: {
          size: 5,
          sizeOffset: 3,
        },
      },
      colors: ['#40c463'],
    };
  };

  useEffect(() => {
    if (!isUndefined(props.stats)) {
      setSeries(prepareSeries(props.stats, props.version));
    }
  }, [props.version, props.stats]); /* eslint-disable-line react-hooks/exhaustive-deps */

  return (
    <>
      <SmallTitle text="Last 30 days views" />
      <div data-testid="lastViews" className="w-100 mb-3 pt-2">
        <div className="d-flex flex-column">
          <div>
            <div className={`position-relative border bg-white ${styles.chartWrapper}`}>
              {isUndefined(props.stats) ? (
                <div className="d-flex flex-row align-items-center h-100 w-100">
                  <small className="w-100 text-center text-muted">Loading...</small>
                </div>
              ) : (
                <>
                  {series.length === 0 ? (
                    <div className="d-flex flex-row align-items-center h-100 w-100">
                      <small className="w-100 text-center text-muted">No views yet</small>
                    </div>
                  ) : (
                    <ReactApexChart
                      options={getSparkLineConfig()}
                      series={series}
                      type="area"
                      height="40"
                      width="100%"
                    />
                  )}
                </>
              )}
            </div>

            <div className={`d-flex flex-row justify-content-between w-100 ${styles.legend}`}>
              <div>
                <small className="text-muted">{moment().subtract(30, 'days').format('DD MMM')}</small>
              </div>
              <div>
                <small className="text-muted">{moment().subtract(15, 'days').format('DD MMM')}</small>
              </div>
              <div>
                <small className="text-muted">{moment().format('DD MMM')}</small>
              </div>
            </div>

            <div className="d-flex flex-row justify-content-between align-items-baseline w-100">
              <div className="d-none d-md-block">
                <button
                  onClick={() => {
                    history.push({
                      pathname: history.location.pathname,
                      hash: 'views',
                      state: {
                        searchUrlReferer: props.searchUrlReferer,
                        fromStarredPage: props.fromStarredPage,
                      },
                    });
                  }}
                  className={`btn btn-link ps-0 position-relative text-primary ${styles.btn}`}
                  disabled={series.length === 0}
                  aria-label="See views chart"
                >
                  <div className="d-flex flex-row align-items-center text-nowrap">
                    <HiPlusCircle className="me-1" />
                    <span>See details</span>
                  </div>
                </button>
              </div>
              <div className={`ms-auto text-truncate ${styles.legend}`}>
                <small className="text-muted text-truncate">({getLegend()})</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}