react-icons/bs#BsArrowsCollapse TypeScript Examples

The following examples show how to use react-icons/bs#BsArrowsCollapse. 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: CompareView.tsx    From hub with Apache License 2.0 5 votes vote down vote up 
CompareView = (props: Props) => {
  const [diffValues, setDiffValues] = useState<string | null | undefined>();
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [expanded, setExpanded] = useState<boolean>(false);

  useEffect(() => {
    async function getDiffCompareValues(version: string) {
      try {
        setIsLoading(true);
        setIsLoading(true);
        const data = await API.getChartValues(props.packageId, version);
        if (data === props.values) {
          setDiffValues(null);
        } else {
          setDiffValues(data);
        }
      } catch {
        setDiffValues(null);
      } finally {
        setIsLoading(false);
      }
    }

    if (props.comparedVersion !== '') {
      getDiffCompareValues(props.comparedVersion);
    } else {
      setDiffValues('');
    }
  }, [props.comparedVersion]); /* eslint-disable-line react-hooks/exhaustive-deps */

  return (
    <div className={`position-relative h-100 mh-100 border ${styles.templateWrapper}`}>
      {isLoading && <Loading />}
      <div className={`position-absolute d-flex ${styles.wrapper}`}>
        <div className="position-relative">
          <button
            className={`btn btn-sm btn-primary rounded-circle fs-5 ${styles.btn}`}
            onClick={() => {
              setExpanded(!expanded);
            }}
            aria-label={`${expanded ? 'Collapse' : 'Expand'} code`}
            disabled={isNull(diffValues)}
          >
            {expanded ? <BsArrowsCollapse /> : <BsArrowsExpand />}
          </button>
        </div>
      </div>

      <pre className={`text-muted h-100 mh-100 mb-0 overflow-hidden position-relative diffTemplate ${styles.pre}`}>
        {isNull(diffValues) && (
          <div className="d-flex align-items-center justify-content-center h-100 w-100 p-5">
            <div className={`alert alert-dark px-5 py-4 text-center ${styles.alert}`}>
              <span className="text-muted">
                No changes found when comparing version <span className="fw-bold">{props.currentVersion}</span> to{' '}
                <span className="fw-bold">{props.comparedVersion}</span>
              </span>
            </div>
          </div>
        )}
        {diffValues && props.values && (
          <ErrorBoundary className={styles.errorAlert} message="Something went wrong rendering the template.">
            <DiffTemplate
              currentVersion={props.currentVersion}
              diffVersion={props.comparedVersion}
              compareData={diffValues}
              data={props.values}
              expanded={expanded}
            />
          </ErrorBoundary>
        )}
      </pre>
    </div>
  );
}
Example #2
Source File: CompareView.tsx    From hub with Apache License 2.0 4 votes vote down vote up 
CompareView = (props: Props) => {
  const [diffTemplates, setDiffTemplates] = useState<ChartTemplate[] | null | undefined>();
  const [activeTemplate, setActiveTemplate] = useState<CompareChartTemplate | null>(null);
  const [isChangingTemplate, setIsChangingTemplate] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [visibleTemplates, setVisibleTemplates] = useState<CompareChartTemplate[] | undefined>();
  const [expanded, setExpanded] = useState<boolean>(false);

  const onTemplateChange = (template: CompareChartTemplate | null) => {
    setIsChangingTemplate(true);
    setExpanded(false);
    setActiveTemplate(template);
    props.updateUrl({ template: template ? template.name : undefined, compareTo: props.comparedVersion });
  };

  useEffect(() => {
    async function getDiffCompareChartTemplates(version: string) {
      try {
        setIsChangingTemplate(true);
        setIsLoading(true);
        const data = await API.getChartTemplates(props.packageId, version);
        if (data && data.templates) {
          const formattedTemplates: ChartTemplate[] = props.formatTemplates(data.templates);
          if (formattedTemplates.length > 0) {
            setDiffTemplates(formattedTemplates);
          } else {
            setDiffTemplates([]);
          }
        }
      } catch {
        setDiffTemplates(null);
        setIsChangingTemplate(false);
      } finally {
        setIsLoading(false);
      }
    }

    if (props.comparedVersion !== '') {
      getDiffCompareChartTemplates(props.comparedVersion);
    } else {
      setDiffTemplates([]);
    }
  }, [props.comparedVersion]); /* eslint-disable-line react-hooks/exhaustive-deps */

  useEffect(() => {
    const prepareVisibleTemplates = () => {
      let tmpls: CompareChartTemplate[] = [];
      props.templates!.forEach((tmpl: ChartTemplate) => {
        const diffTmpl = diffTemplates!.find((t: ChartTemplate) => t.name === tmpl.name);
        if (diffTmpl) {
          if (diffTmpl.data !== tmpl.data) {
            tmpls.push({ ...tmpl, compareData: diffTmpl.data, status: CompareChartTemplateStatus.Modified });
          }
        } else {
          tmpls.push({
            ...tmpl,
            compareData: '',
            status: CompareChartTemplateStatus.Added,
          });
        }
      });
      const others = differenceBy(diffTemplates!, props.templates!, 'name');
      others.forEach((tmpl: ChartTemplate) => {
        tmpls.push({
          ...tmpl,
          data: '',
          compareData: tmpl.data,
          status: CompareChartTemplateStatus.Deleted,
        });
      });
      const sortedTmpls: CompareChartTemplate[] = sortBy(tmpls, ['type', 'name']);
      setVisibleTemplates(sortedTmpls);
      if (sortedTmpls.length === 0) {
        setActiveTemplate(null);
      } else {
        if (props.visibleTemplate) {
          const selectedTmpl = sortedTmpls.find((tmpl: CompareChartTemplate) => props.visibleTemplate === tmpl.name);
          if (selectedTmpl) {
            setActiveTemplate(selectedTmpl);
          } else {
            setActiveTemplate(sortedTmpls[0]);
          }
        } else {
          setActiveTemplate(sortedTmpls[0]);
        }
      }
    };

    if (diffTemplates && !isNull(props.templates)) {
      prepareVisibleTemplates();
      setIsChangingTemplate(false);
    }
  }, [diffTemplates]); /* eslint-disable-line react-hooks/exhaustive-deps */

  return (
    <div className="d-flex flex-row align-items-stretch g-0 h-100 mh-100">
      <div className="col-3 h-100">
        <CompareTemplatesList
          templates={visibleTemplates}
          activeTemplateName={activeTemplate ? activeTemplate.name : undefined}
          onTemplateChange={onTemplateChange}
        />
      </div>

      <div className="col-9 ps-3 h-100">
        <div className={`position-relative h-100 mh-100 border ${styles.templateWrapper}`}>
          {((isChangingTemplate && activeTemplate) || isLoading) && <Loading />}
          <div className={`position-absolute d-flex ${styles.wrapper}`}>
            <div className="position-relative">
              <button
                className={`btn btn-sm btn-primary rounded-circle fs-5 ${styles.btn}`}
                onClick={() => {
                  setExpanded(!expanded);
                }}
                aria-label={`${expanded ? 'Collapse' : 'Expand'} code`}
                disabled={!isUndefined(visibleTemplates) && visibleTemplates.length === 0}
              >
                {expanded ? <BsArrowsCollapse /> : <BsArrowsExpand />}
              </button>
            </div>
          </div>

          <pre className={`text-muted h-100 mh-100 mb-0 overflow-hidden position-relative diffTemplate ${styles.pre}`}>
            {!isUndefined(visibleTemplates) && visibleTemplates.length === 0 && (
              <div className="d-flex align-items-center justify-content-center h-100 w-100 p-5">
                <div className={`alert alert-dark px-5 py-4 text-center ${styles.alert}`}>
                  <span className="text-muted">
                    No changes found when comparing version <span className="fw-bold">{props.currentVersion}</span> to{' '}
                    <span className="fw-bold">{props.comparedVersion}</span>
                  </span>
                </div>
              </div>
            )}
            {activeTemplate && (
              <ErrorBoundary className={styles.errorAlert} message="Something went wrong rendering the template.">
                <DiffTemplate
                  currentVersion={props.currentVersion}
                  diffVersion={props.comparedVersion}
                  template={activeTemplate!}
                  expanded={expanded}
                  setIsChangingTemplate={setIsChangingTemplate}
                />
              </ErrorBoundary>
            )}
          </pre>
        </div>
      </div>
    </div>
  );
}