lodash#slice TypeScript Examples

The following examples show how to use lodash#slice. 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: monitor-chart-panel.tsx    From erda-ui with GNU Affero General Public License v3.0 5 votes vote down vote up
MonitorChartPanel = (props: IProps) => {
  const [showNumber, setShowNumber] = React.useState(4);
  const { resourceType, resourceId, metrics, commonChartQuery = {}, defaultTime } = props;
  if (!resourceType || !resourceId) {
    return null;
  }
  const displayMetrics = slice(values(metrics), 0, showNumber);
  return (
    <>
      <div className="monitor-chart-time-container">
        <TimeSelector defaultTime={defaultTime} />
      </div>
      <div className="monitor-chart-panel">
        {map(displayMetrics, ({ parameters, name: metricKey, title, metricName, unit, unitType }) => {
          const chartQuery = {
            ...commonChartQuery,
            fetchMetricKey: metricKey,
          };
          if (!isEmpty(parameters)) {
            map(Object.keys(parameters), (key) => {
              chartQuery[key] = parameters[key];
            });
          }
          return (
            <div className="monitor-chart-cell spin-full-height" key={metricKey}>
              <MonitorChart
                {...{ resourceType, resourceId }}
                title={title || metricName}
                metricKey={metricKey}
                metricUnitType={unitType}
                metricUnit={unit}
                chartQuery={chartQuery}
              />
            </div>
          );
        })}
        <IF check={keys(metrics).length > showNumber}>
          <div className="show-all" onClick={() => setShowNumber((prevNumber) => prevNumber + 4)}>
            {allWordsFirstLetterUpper(i18n.t('load more'))}
          </div>
        </IF>
      </div>
    </>
  );
}
Example #2
Source File: Recent.tsx    From gio-design with Apache License 2.0 5 votes vote down vote up
Recent: React.FC<RecentProps> & { isRecent: boolean } = (props) => {
  const localeTextObject: typeof defaultLocaleTextObject = useLocale('ListPicker') || defaultLocaleTextObject;
  const { max = 5, title = localeTextObject.recent, filter: filterFc = (o) => !!o, ...rest } = props;
  const [mayBeArray, setMayBearray] = useState<Map<string | number, OptionProps> | undefined>(new Map());
  const selectionPrefixCls = `${usePrefixCls(PREFIX)}--selection`;
  const context = useContext(ListContext);
  const { options, model } = context;
  const localKey = isNil(context?.recentId) ? ITEM_KEY : `${ITEM_KEY}_${context?.recentId}`;
  const localStorageValue = window?.localStorage?.getItem(localKey) || '[]';
  const matchValue = JSON.parse(localStorageValue); // localStorage.getItem('__GIO_SELECTION_KEY')
  useEffect(() => {
    setTimeout(() => {
      setMayBearray(options);
    }, 0);
  }, [options]);

  const matchOptions = useMemo(
    () =>
      matchValue?.reduce((prev: OptionProps[], curr: string) => {
        if (mayBeArray?.has(curr)) {
          return [...prev, mayBeArray?.get(curr)];
        }
        return [...prev];
      }, []),
    [matchValue, mayBeArray]
  );

  const listOptions: OptionProps[] = useMemo(
    () => slice(lodashFilter(matchOptions, filterFc), 0, max),

    [matchOptions, max, filterFc]
  );

  const handleOnChange = (value?: string | string[], opts?: OptionProps | OptionProps[]) =>
    context?.onChange?.(value, opts);
  if (!!listOptions?.length && model !== 'multiple') {
    return (
      <div className={`${selectionPrefixCls}--item`}>
        {title && <div className={`${selectionPrefixCls}--title`}>{title}</div>}
        <List
          data-testid="list-recent"
          title={title}
          id={ITEM_KEY}
          options={listOptions}
          value=""
          onChange={handleOnChange}
          {...rest}
        />
      </div>
    );
  }
  return <></>;
}
Example #3
Source File: Table.tsx    From hub with Apache License 2.0 4 votes vote down vote up
SecurityTable = (props: Props) => {
  const [visibleVulnerability, setVisibleVulnerability] = useState<string | undefined>();

  const getEmptyMessage = (): JSX.Element => <span className="fst-italic text-muted">No vulnerabilities found</span>;
  const getTargetName = (target: string): string => {
    return getTextBetweenParenthesis(target) || target;
  };
  const isActiveImage = isNull(props.visibleTarget) ? props.visibleImage === props.image : false;

  return (
    <div className="my-1">
      <ImageBtn
        image={props.image}
        isActive={isActiveImage}
        onClick={() => {
          if (!isActiveImage) {
            props.setVisibleImage(props.image);
            props.setVisibleTarget(null);
            props.setExpandedTarget(null);
          }
        }}
      />

      <div data-testid="securityReportInfo">
        {isNull(props.reports) ? (
          <div className="ms-4 mb-4">{getEmptyMessage()}</div>
        ) : (
          <>
            {props.reports.map((item: SecurityReportResult, index: number) => {
              const targetImageName = `${props.image}_${item.Target}`;
              const { list, summary } = formatSecurityReport(item.Vulnerabilities);
              const visibleVulnerabilities = slice(list, 0, MAX_VULNERABILITY_NUMBER);
              const isActive = !isNull(props.visibleTarget)
                ? targetImageName === `${props.visibleImage}_${props.visibleTarget}`
                : false;
              const isExpanded = props.expandedTarget === targetImageName;
              const isLastTarget = props.lastReport && index === props.reports.length - 1;

              return (
                <Fragment key={`table_${targetImageName}`}>
                  <div
                    className="ms-4"
                    style={{
                      minHeight: isLastTarget && !isUndefined(props.contentHeight) ? props.contentHeight + 40 : 'auto',
                    }}
                  >
                    <TargetImageBtn
                      isActive={isActive}
                      isExpanded={isExpanded}
                      expandedTarget={props.expandedTarget}
                      onClick={() => {
                        props.setVisibleImage(props.image);
                        props.setVisibleTarget(item.Target);
                        props.setExpandedTarget(null);
                      }}
                      hasOnlyOneTarget={props.hasOnlyOneTarget}
                    >
                      <div className="d-flex flex-row align-items-center mb-2">
                        {isExpanded ? <FaCaretDown /> : <FaCaretRight />}
                        <div
                          data-testid="targetTitle"
                          className={`${styles.tableTitle} fw-bold me-3 ms-1 text-truncate`}
                        >
                          <span className="text-uppercase text-muted me-2">Target:</span>
                          <span className="fw-bold">{getTargetName(item.Target)}</span>
                        </div>
                        <div className={`${styles.tableTitle} d-flex flex-row align-items-center fw-bold text-nowrap`}>
                          <span className="text-uppercase text-muted">Rating:</span>
                          <SecurityRating
                            summary={summary}
                            className={`ms-2 ${styles.securityRatingBadge}`}
                            onlyBadge
                          />
                        </div>
                        {visibleVulnerabilities.length > 0 && (
                          <button
                            className={`btn badge bg-secondary ms-3 ${styles.badge}`}
                            onClick={() => props.setExpandedTarget(isExpanded ? null : targetImageName)}
                            aria-label={`${isExpanded ? 'Close' : 'Open'} target image vulnerabilities`}
                          >
                            {isExpanded ? 'Hide' : 'Show'} vulnerabilities
                          </button>
                        )}
                      </div>
                    </TargetImageBtn>

                    {isExpanded && (
                      <div className="w-100 overflow-auto mb-2">
                        <table className={`table table-sm table-hover ${styles.table}`}>
                          <thead>
                            <tr className="text-uppercase text-muted">
                              <th scope="col" className={`border-top-0 ${styles.fitCell}`} />
                              <th scope="col" className="border-top-0">
                                ID
                              </th>
                              <th scope="col" className="border-top-0">
                                Severity
                              </th>
                              <th scope="col" className="border-top-0">
                                Package
                              </th>
                              <th scope="col" className="border-top-0">
                                Version
                              </th>
                              <th scope="col" className="border-top-0 text-nowrap">
                                Fixed in
                              </th>
                            </tr>
                          </thead>
                          <tbody className="bg-white">
                            {visibleVulnerabilities.map((item: Vulnerability, index: number) => {
                              const vulnerabilityName = `${item.VulnerabilityID}_${index}`;
                              return (
                                <SecurityCell
                                  name={vulnerabilityName}
                                  vulnerability={item}
                                  key={`cell_${item.PkgName}_${item.VulnerabilityID}`}
                                  isExpanded={visibleVulnerability === vulnerabilityName}
                                  setVisibleVulnerability={setVisibleVulnerability}
                                />
                              );
                            })}
                            {list.length > visibleVulnerabilities.length && (
                              <tr>
                                <td colSpan={6} className="align-middle text-end pt-3">
                                  <span className="text-muted fst-italic">
                                    Displaying only the first {MAX_VULNERABILITY_NUMBER} entries
                                  </span>
                                </td>
                              </tr>
                            )}
                          </tbody>
                        </table>
                      </div>
                    )}
                  </div>
                </Fragment>
              );
            })}
          </>
        )}
      </div>
    </div>
  );
}