react-icons/fi#FiChevronDown JavaScript Examples

SettingButton = ({ isScrollTop, togglePopup }) => {
  return (
    <StSettingButton
      btnType="oval"
      isScrollTop={isScrollTop}
      onClick={togglePopup}
    >
      <FiGlobe style={{ marginRight: '2px' }} />
      <FiChevronDown />
    </StSettingButton>
  );
}

ListSort = ({apps, defaultSort, onSort}) => {
    const [sort, setSort] = useState("");

    useEffect(() => {
      if(!sort){
        setSort(defaultSort);
      }
    })

    let handleSort = (e) => {
      let sortChoice = e.target.value;
      setSort(sortChoice);
      
      if (sortChoice === "name-asc") {
        apps.sort((a, b) => a.name.localeCompare(b.name));
      } else if (sortChoice === "name-desc") {
        apps.sort((a, b) => b.name.localeCompare(a.name));
      } else if (sortChoice === "update-desc") {
        // because the updatedAt values are in ISO, we can just to lexographical comparison
        apps.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
      } else if (sortChoice === "update-asc") {
        apps.sort((a, b) => a.updatedAt.localeCompare(b.updatedAt));
      }

      onSort(sortChoice);
    };

    return (
      <div className={styles.sort}>
        <label htmlFor="sort">Sort by</label>
        <select id="sort" value={sort} onChange={(e) => handleSort(e)}>
          <option value="name-asc">Name (Ascending)</option>
          <option value="name-desc">Name (Descending)</option>
          <option value="update-desc">Recently Updated (Newest First)</option>
          <option value="update-asc">Recently Updated (Oldest First)</option>
        </select>
        <FiChevronDown/>
      </div>
    );
}

Description = ({ desc, id, full }) => {
  const [descTrimmed, setDescTrimmed] = useState(desc.length > 140);
  const router = useRouter();

  let toggleDescription = (e, status) => {
    e.stopPropagation();

    if(desc.length > 340){
      router.push('/apps/[id]', `/apps/${id}`)
      return;
    };

    setDescTrimmed(status);
  };

  if(!desc) return <p>No description available for this app.</p>


  return (
    <>
      <p>
        {desc.length > 140
          ? !descTrimmed || full
            ? desc
            : `${desc.substr(0, 140).replace(/(^[\s]+|[\s]+$)/g, "")}...`
          : desc}
      </p>

      {desc.length > 140 && !full && (
        <button
          onClick={(e) => toggleDescription(e, !descTrimmed)}
          className={styles.subtle}
        >
          {descTrimmed ? (
            <>
              Full Description
              <FiChevronDown />
            </>
          ) : (
            <>
              Hide Description
              <FiChevronUp />
            </>
          )}
        </button>
      )}
    </>
  );
}

HouseRules = ({
  address,
  checkinTime,
  checkoutTime,
  rules,
  readMore,
  onReadMore,
  onNextPage,
  checkin,
  checkout,
}) => {
  const checkinMon = checkin.split('.')[1];
  const checkoutMon = checkout.split('.')[1];
  const checkinDate = new Date(checkin);
  const checkoutDate = new Date(checkout);
  const options = { weekday: 'long' };

  return (
    <CommonLayout title="숙소 이용규칙 확인하기">
      <StSubTitle>{address} 2박</StSubTitle>
      <StCheckWrapper>
        <StDateWrapper>
          <span>{+checkinMon > 9 ? checkinMon : checkinMon.slice(1)}월</span>
          <span>{checkin.split('.')[2]}</span>
        </StDateWrapper>
        <StTextWrapper>
          <span>{checkinDate.toLocaleDateString('ko-KR', options)} 체크인</span>
          <span>{checkinTime}</span>
        </StTextWrapper>
      </StCheckWrapper>
      <StCheckWrapper>
        <StDateWrapper>
          <span>{+checkoutMon > 9 ? checkoutMon : checkoutMon.slice(1)}월</span>
          <span>{checkout.split('.')[2]}</span>
        </StDateWrapper>
        <StTextWrapper>
          <span>
            {checkoutDate.toLocaleDateString('ko-KR', options)} 체크아웃
          </span>
          <span>{checkoutTime}</span>
        </StTextWrapper>
      </StCheckWrapper>
      <StSubTitle border>주의할 사항</StSubTitle>
      <StRuleList>
        {rules.map((rule, i) => {
          if (!readMore && i > 3) return;
          const iconObj = icons.find(v => rule.name.includes(v.name));
          return (
            <li key={i}>
              <div>
                <StRuleSvg
                  warning={iconObj && iconObj.warning}
                  viewBox={
                    iconObj && iconObj.viewBox ? '-2 -2 20 20' : '0 0 24 24'
                  }
                  role="presentation"
                  aria-hidden="true"
                  focusable="false"
                  dangerouslySetInnerHTML={{
                    __html: iconObj
                      ? iconObj.icon
                      : '<path d="m6.32874849 11.6781574c.75542549 0 1.34774775-.5410186 1.34774775-1.5525901 0-.82366353-.59232226-2.99008648-2.1195616-2.99008648-.91618752 0-1.67395421.77433766-1.67395421 1.68569158 0 1.12509931 1.30014346 2.856985 2.44576806 2.856985m12.63854941-4.52701758-2.1484364 2.15546165c-.0741378.29595514-.1131577.58016603-.1131577.81896583 0 1.0115715.5923223 1.5525901 1.3485281 1.5525901 1.1979113 0 2.4457681-1.8039171 2.4457681-2.85463615 0-.86202807-.6797269-1.59721822-1.5327021-1.67238143m-3.9456935 3.95859578-8.40176737 8.4292409c.37381076.7351901 1.01139611 1.2190533 2.0337178 1.2190533 1.63337347 0 2.50039597-1.4727292 3.31044927-1.569032 1.0956792-.1299698 1.8339359 1.8109636 3.6990877 1.8109636 1.9018304 0 2.5269294-1.7154437 2.5269294-3.6297567 0-2.6510691-1.1979113-5.0735168-3.1684168-6.2604691m-4.869685-1.67238146c1.0652436 0 1.3813049-1.55493892 1.3813049-2.59469666 0-1.45237246-.5267688-2.75363554-1.90651288-2.75363554-.93491708 0-1.82144947.7281436-1.82144947 1.93623562 0 1.12353341 1.11128708 3.41209658 2.34665745 3.41209658m9.3031274-4.43462942-14.95633216 15.00445588c-.11393814.1143107-.2637746.1714661-.41361107.1714661-.14983646 0-.29967292-.0571554-.41361106-.1714661-.22865668-.2294044-.22865668-.6013057 0-.83071l2.56829059-2.5766889c.31528088-3.0887381 2.37319102-6.2589031 6.0067252-6.2589031.0741378 0 .1428129.0140931.2153899.0164419l1.1479658-1.15093664c-.5704711-.46663827-.7608883-1.56041957-.7608883-2.36059458 0-1.45158951.5244276-2.75676734 1.9072933-2.75676734.8880932 0 1.8198887.69134495 1.8198887 1.93232087 0 .06811666-.0046824.14327987-.0140472.22314078l2.0649337-2.07246894c.2286567-.22940438.5993459-.22940438.8280026 0 .2286566.22940438.2286566.60130568 0 .83071007"></path>',
                  }}
                />
              </div>
              {rule.name}
            </li>
          );
        })}
      </StRuleList>
      {rules.length > 4 && (
        <StReadmoreBtn readMore={readMore} hover onClick={onReadMore}>
          <span>{readMore ? '숨기기' : '더 보기'}</span>
          <FiChevronDown />
        </StReadmoreBtn>
      )}
      <StButton btnType="color" color="main" onClick={onNextPage}>
        동의 및 계속하기
      </StButton>
    </CommonLayout>
  );
}

AdvancedConfig = ({ refreshConfig, activeTab }) => {
    const [ expanded, setExpnaded ] = useState(false);

    const [ config, setConfig ] = useState({
        "--scope": null,
        "-i": false,
        "-h": false,
        "-o": "",
        "--override": false,
        "-l": "",
        "--force": false,
        "--ignore-unavailable": false
    });

    const [ hiddenOptions, setHiddenOptions ] = useState([]);

    const updateConfig = async (key, val) => {
        const existingConfig = { ...config };
        const newConfig = { ...existingConfig, [key]: val};

        setConfig(newConfig);
        refreshConfig(newConfig, hiddenOptions);

        await localStorage.setItem("winstall-advanced-config", JSON.stringify(newConfig));
    }

    useEffect(() => {
        const loadExistingConfig = async (unavailableOptions) => {
            let previousConfig = await localStorage.getItem("winstall-advanced-config")

            if(previousConfig){
                previousConfig = JSON.parse(previousConfig);
                setExpnaded(true);
            } else{
                previousConfig = { ...config };
            }

            refreshConfig(previousConfig, unavailableOptions);
            setConfig(previousConfig);
        }


        let unavailableOptions = ["--ignore-unavailable"];

        if(activeTab === ".json"){
            unavailableOptions = ["--scope", "-i", "-h", "-o", "--override", "-l", "--force"];
        } 

        setHiddenOptions(unavailableOptions);
        loadExistingConfig(unavailableOptions);

    }, [ activeTab ]);


    return (
        <div className={styles.expandBlock}>
            <h3 className={`${styles.expandHeader} ${ expanded ? styles.expandedHeader : ''}`} onClick={() => setExpnaded(e => !e)}>
                <FiChevronDown size={22} className={expanded ? styles.expandedIcon : ''}/>
                Advanced Options
            </h3>

            { expanded && (
                <div>
                    <p className={styles.center}><FiInfo/> All of the following options are persisted locally in your browser.</p>

                    <RadioConfig
                        id="--scope"
                        defaultChecked={config["--scope"]}
                        options={[{ id: "user", label: "User" }, { id: "machine", label: "Machine" }]}
                        updateConfig={updateConfig}
                        hiddenOptions={hiddenOptions}
                        labelText="Installation scope"
                    />

                    <CheckboxConfig id="-i" defaultChecked={config["-i"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Request interactive installation; user input may be needed"/>
                    <CheckboxConfig id="-h" defaultChecked={config["-h"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Request silent installation"/>
                    <CheckboxConfig id="--override" defaultChecked={config["--override"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Override arguments to be passed on to the installer"/>
                    <CheckboxConfig id="--force" defaultChecked={config["--force"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Override the installer hash check"/>
                    
                    <TextInputConfig id="-o" defaultValue={config["-o"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Log location (if supported)" inputPlaceholder="Enter a valid path for your local machine"/>
                    <TextInputConfig id="-l" defaultValue={config["-l"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Location to install to (if supported)" inputPlaceholder="Enter a valid path for your local machine"/>
                   
                    <CheckboxConfig id="--ignore-unavailable" defaultChecked={config["--ignore-unavailable"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Ignore unavailable packages "/>

                </div>
            )}
        </div>
    )
}

function Nav() {
  const router = useRouter();
  const [ddShown, setDDShown] = useState(false);
  const navRef = useRef(null);

  let handleClickOut = (e) => {
    if (navRef.current && !navRef.current.contains(e.target)) {
      setDDShown(false);
      navRef.current.classList.remove("shown");
    }

    if (navRef.current && navRef.current.contains(e.target)) {
      setDDShown(false);
      setTimeout(() => {
        navRef.current.classList.remove("shown");
      }, 200);
    }
  };

  useEffect(() => {
    window.addEventListener("mousedown", handleClickOut);

    // cleanup this component
    return () => {
      window.removeEventListener("mousedown", handleClickOut);
    };
  }, []);

  let switchTheme = () => {
    let body = document.querySelector("body");

    if (body.classList.contains("light")) {
      localStorage.setItem("wiTheme", "dark");
      body.classList.replace("light", "dark");
    } else {
      localStorage.setItem("wiTheme", "light");
      body.classList.replace("dark", "light");
    }
  };

  const toggleDD = () => {
    if (ddShown) {
      navRef.current.classList.remove("shown");
    } else {
      navRef.current.classList.add("shown");
    }

    setDDShown(!ddShown);
  };

  return (
    <header>
      <div className={styles.brand}>
        <Link href="/">
          <a>winstall</a>
        </Link>
        {/* <span className="preview">&nbsp;(preview)</span> */}
      </div>

      <div className={styles.nav} ref={navRef}>
        <Link href="/apps">
          <a>
            <FiPackage />
            <p>Apps</p>
          </a>
        </Link>
        <Link href="/packs">
          <a>
            <FiGrid />
            <p>Packs</p>
          </a>
        </Link>
        <a
          href="https://ko-fi.com/mehedi"
          target="_blank"
          rel="noopener noreferrer"
          className={styles.justIcon}
        >
          <FiHeart />
          <p className={styles.ddOnly}>Support winstall</p>
        </a>
        <span onClick={switchTheme} className={styles.justIcon}>
          <FiMoon className="moon" />
          <FiSun className="sun" />
          <p className={styles.ddOnly}>Switch theme</p>
        </span>
        <User />
      </div>

      <span className={`mobileDD ${styles.dropdown}`} onClick={toggleDD}>
        {ddShown ? <FiX /> : <FiChevronDown />}
      </span>
    </header>
  );
}

SingleApp = ({ app, all, onVersionChange = false, large = false, showTime = false, pack = false, displaySelect = true, preventGlobalSelect, hideBorder=false, preSelected=false}) => {
  const [selected, setSelected] = useState(false);
  const { selectedApps, setSelectedApps } = useContext(SelectedContext);

  const [version, setVersion] = useState(app.latestVersion);

  if (!app.selectedVersion) app.selectedVersion = version;

  if (app.versions.length > 1) {
    app.versions = app.versions.sort((a, b) =>
      compareVersion(b.version, a.version)
    );
    // make sure latest version is sorted
    app.latestVersion = app.versions[0].version;
  }

  useEffect(() => {
    if(preSelected){
      setSelected(true);
      return;
    }

    let found = selectedApps.find((a) => a._id === app._id);

    if (!found){
      if(selected){
        setSelected(false);
      }
      
      return;
    };

    if (found.selectedVersion !== app.latestVersion) {
      setVersion(found.selectedVersion);
    }

    setSelected(true);    
  }, [selectedApps, app._id]);

  let handleAppSelect = () => {
    if (preventGlobalSelect) {
      preventGlobalSelect(app, !selected);
      setSelected(!selected);
      return;
    }

    let found = selectedApps.findIndex((a) => a._id === app._id);
    
    if (found !== -1) {
      let updatedSelectedApps = selectedApps.filter(
        (a, index) => index !== found
      );

      setSelectedApps(updatedSelectedApps);
      setSelected(false);
      
    } else if(app){
      setSelected(true);

      if (all) {
        app = all.find((i) => app._id == i._id);
        setSelectedApps([...selectedApps, app]);
      } else {
        setSelectedApps([...selectedApps, app]);
      }
    }

  };


  if (!app && !app.img || !app.name) return <></>;

  let VersionSelector = () => {
    return (
      <div className={styles.versions}>
        <select
          className={styles.versionSelector}
          value={version}
          onClick={(e) => e.stopPropagation()}
          id="v-selector"
          name="Select app version"
          onChange={(e) => {
            setVersion(e.target.value);
            app.selectedVersion = e.target.value;

            if (selected) {
              let found = selectedApps.find((a) => a._id === app._id);
              found.selectedVersion = e.target.value;

              if(onVersionChange) onVersionChange();
            }
          }}
        >
          {app.versions.map((v) => {
            return (
              <option key={v.version} value={v.version}>
                v{v.version}
              </option>
            );
          })}
        </select>
        <FiChevronDown/>
        {app.versions.length > 1 && (
          <span>
            <label htmlFor="v-selector">
              ({app.versions.length - 1} other{" "}
              {app.versions.length - 1 > 1 ? "versions" : "version"} available)
            </label>
          </span>
        )}
      </div>
    );
  };

  const handleShare = () => {
    const link = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`Checkout ${app.name} by ${app.publisher} on @winstallHQ:`)}&url=${encodeURIComponent(`https://winstall.app/apps/${app._id}`)}`

    window.open(link)
  }

  return (
    <li
      key={app._id}
      // onClick={handleAppSelect}
      className={`${hideBorder ? styles.noBorder: "" }${large ? styles.large : ""} ${pack ? styles.pack : ""} ${styles.single} ${
        selected ? styles.selected : ""
      }`}
    >
      <div className={styles.info}>
        <h3>
          {large ? (
            <>
              <AppIcon id={app._id} name={app.name} icon={app.icon} />
              {app.name}
            </>
          ) : (
            <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
              <a>
                <AppIcon id={app._id} name={app.name} icon={app.icon} />
                <p>{app.name}</p>
              </a>
            </Link>
          )}

          {displaySelect &&  (
            <button
              className={styles.selectApp}
              onClick={handleAppSelect}
              aria-label={selected ? "Unselect app" : "Select app"}
            >
              <FiPlus />
            </button>
          )}
        </h3>

        {!pack && <Description desc={app.desc} id={app._id} full={large} />}
      </div>

      {large && <Copy id={app._id} version={version} latestVersion={app.latestVersion} />}
      <ul className={styles.metaData}>
        {!large && (
          <li>
            <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
              <a>
                <FiInfo />
                View App
              </a>
            </Link>
          </li>
        )}

        {(showTime || large) && (
          <li>
            <FiClock />
            <span>Last updated {timeAgo(app.updatedAt)}</span>
          </li>
        )}

        {!pack && (
          <li className={app.versions.length > 1 ? styles.hover : ""}>
            <FiPackage />
            {app.versions.length > 1 ? (
              <VersionSelector />
            ) : (
              <span>v{app.selectedVersion}</span>
            )}
          </li>
        )}

        <li>
          <Link href={`/apps?q=${`publisher: ${app.publisher}`}`}>
            <a>
              <FiCode />
              Other apps by {app.publisher}
            </a>
          </Link>
        </li>

        {app.homepage && large && (
          <li>
            <a
              href={`${app.homepage}?ref=winstall`}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(e) => e.stopPropagation()}
            >
              <FiExternalLink />
              View Site
            </a>
          </li>
        )}

        {!pack && (
          <li>
            <a
              href={`${
                app.versions.find((i) => i.version === app.selectedVersion)
                  .installers[0]
              }`}
              onClick={(e) => e.stopPropagation()}
            >
              <FiDownload />
              Download{" "}
              {app.versions[0].installerType
                ? `(.${app.versions[0].installerType.toLowerCase()})`
                : ""}
            </a>
          </li>
        )}

        {large && <ExtraMetadata app={app} />}
      </ul>

      {large && app.tags && app.tags.length > 1 && <Tags tags={app.tags} />}

      {large && (
        <div className={styles.largeAppButtons}>
          <button className={styles.selectApp} onClick={handleAppSelect}>
            <FiPlus />
            {selected ? "Unselect" : "Select"} app
          </button>
          <button className={`button ${styles.shareApp}`} onClick={handleShare}>
            <FiShare2 />
            Share
          </button>
        </div>
      )}
    </li>
  );
}