react-icons/fi#FiChevronLeft JavaScript Examples

The following examples show how to use react-icons/fi#FiChevronLeft. 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: components.js    From idena-web with MIT License 5 votes vote down vote up
export function NavButton({type, bg, color, ...props}) {
  const isPrev = type === 'prev'
  // eslint-disable-next-line no-shadow
  const Icon = isPrev ? FiChevronLeft : FiChevronRight
  return (
    <Absolute
      top="50%"
      left={isPrev && 0}
      right={isPrev || 0}
      width={rem(280)}
      zIndex={0}
      css={{
        transform: 'translate(0, -50%)',
        overflow: 'hidden',
        height: rem(600),
      }}
      {...props}
    >
      <div>
        <Icon
          fontSize={rem(20)}
          color={color}
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: `translate(-50%, -50%) translateX(${
              isPrev ? rem(80) : rem(-80)
            })`,
          }}
        />
        <style jsx>{`
          div {
            border-radius: 50%;
            cursor: pointer;
            height: 100%;
            width: ${rem(560)};
            position: relative;
            transform: translateX(${isPrev ? '-50%' : ''});
            transition: all 0.5s ease-out;
            transition-property: background;
            will-change: background;
          }
          div:hover {
            background: ${bg};
          }
        `}</style>
      </div>
    </Absolute>
  )
}
Example #2
Source File: Hero.js    From gatsby-airtable-design-project with BSD Zero Clause License 5 votes vote down vote up
Hero = ({ projects }) => {
  const images = projects.map(item => {
    const {
      data: {
        image: { localFiles },
      },
    } = item
    const image = localFiles[0].childImageSharp.fluid
    return image
  })
  const [index, setIndex] = React.useState(0)
  React.useEffect(() => {
    const lastIndex = images.length - 1
    if (index < 0) {
      setIndex(lastIndex)
    }
    if (index > lastIndex) {
      setIndex(0)
    }
  }, [index, images])
  return (
    <Wrapper>
      <Background image={images[index]}>
        <article>
          <h3>If you can dream it, we can create it</h3>
          <h1>let your home be inique and stylish</h1>
          <Link to="/projects">Projects</Link>
        </article>

        <button className="prev-btn" onClick={() => setIndex(index - 1)}>
          <FiChevronLeft />
        </button>
        <button className="next-btn" onClick={() => setIndex(index + 1)}>
          <FiChevronRight />
        </button>
        <div className="dots">
          {images.map((_, btnIndex) => {
            return (
              <span
                key={btnIndex}
                onClick={() => setIndex(btnIndex)}
                className={index === btnIndex ? "active" : undefined}
              ></span>
            )
          })}
        </div>
      </Background>
    </Wrapper>
  )
}
Example #3
Source File: Slider.js    From gatsby-airtable-design-project with BSD Zero Clause License 5 votes vote down vote up
Slider = () => {
  const {
    allAirtable: { nodes: customers },
  } = useStaticQuery(query)
  const [index, setIndex] = React.useState(0)
  React.useEffect(() => {
    const lastIndex = customers.length - 1
    if (index < 0) {
      setIndex(lastIndex)
    }
    if (index > lastIndex) {
      setIndex(0)
    }
  }, [index, customers])
  return (
    <Wrapper className="section">
      <Title title="reviews" />
      <div className="section-center">
        {customers.map((customer, customerIndex) => {
          const {
            data: { image, name, title, quote },
          } = customer
          const customerImg = image.localFiles[0].childImageSharp.fixed

          let position = "nextSlide"
          if (customerIndex === index) {
            position = "activeSlide"
          }
          if (
            customerIndex === index - 1 ||
            (index === 0 && customerIndex === customers.length - 1)
          ) {
            position = "lastSlide"
          }

          return (
            <article className={position} key={customerIndex}>
              <Image fixed={customerImg} className="img"></Image>
              <h4>{name}</h4>
              <p className="title">{title}</p>
              <p className="text">{quote}</p>
              <FaQuoteRight className="icon" />
            </article>
          )
        })}
        <button className="prev" onClick={() => setIndex(index - 1)}>
          <FiChevronLeft />
        </button>
        <button className="next" onClick={() => setIndex(index + 1)}>
          <FiChevronRight />
        </button>
      </div>
    </Wrapper>
  )
}
Example #4
Source File: ScrollCardsNavigator.js    From hackertab.dev with Apache License 2.0 5 votes vote down vote up
function ScrollCardsNavigator() {
  const { cards } = useContext(PreferencesContext)
  const [leftButtonVisible, setLeftButtonVisible] = useState(true)
  const [rightButtonVisible, setRightButtonVisible] = useState(true)
  const scrollBarContainer = useRef(null)

  const handleScroll = (e) => {
    const { scrollLeft, scrollWidth, offsetWidth } = e.target
    setLeftButtonVisible(scrollLeft > 0)
    const scrollRight = scrollWidth - offsetWidth - Math.abs(scrollLeft)
    setRightButtonVisible(scrollRight > 0)
  }

  const handleKeyboardKeys = (e) => {
    if (e.keyCode == 37) {
      scrollTo('left')
    } else if (e.keyCode == 39) {
      scrollTo('right')
    }
  }

  useLayoutEffect(() => {
    scrollBarContainer.current = document.querySelector('.AppContent')
  }, [])

  useEffect(() => {
    scrollBarContainer.current.addEventListener('scroll', handleScroll, true)
    window.addEventListener('keydown', handleKeyboardKeys)
    return () => {
      window.removeEventListener('keydown', handleKeyboardKeys)
      scrollBarContainer.current.removeEventListener('scroll', handleScroll)
    }
  }, [])

  useEffect(() => {
    setLeftButtonVisible(false)
    setRightButtonVisible(cards.length > APP.maxCardsPerRow)
  }, [cards])

  const scrollTo = (direction) => {
    if (!scrollBarContainer.current) {
      return
    }
    trackPageScroll(direction)
    const { scrollLeft } = scrollBarContainer.current
    const { offsetWidth } = scrollBarContainer.current.children[0]
    let extraPadding = 32 // Should be calculated dynamically

    const position =
      direction === 'left'
        ? scrollLeft - offsetWidth - extraPadding
        : scrollLeft + offsetWidth + extraPadding

    scrollBarContainer.current.scrollTo({
      left: position,
      behavior: 'smooth',
    })
  }

  return (
    <>
      {leftButtonVisible && (
        <button onClick={() => scrollTo('left')} className="scrollButton" style={{ left: 0 }}>
          <FiChevronLeft size={32} />
        </button>
      )}
      {rightButtonVisible && (
        <button onClick={() => scrollTo('right')} className="scrollButton" style={{ right: 0 }}>
          <FiChevronRight size={32} />
        </button>
      )}
    </>
  )
}
Example #5
Source File: apps.js    From winstall with GNU General Public License v3.0 4 votes vote down vote up
function Store({ data, error }) {
  if (error) return <Error title="Oops!" subtitle={error} />;

  const [apps, setApps] = useState([]);
  const [searchInput, setSearchInput] = useState();
  const [offset, setOffset] = useState(0);
  const [sort, setSort] = useState();

  const appsPerPage = 60;

  const totalPages = Math.ceil(apps.length / appsPerPage);

  useEffect(() => {
    if (Router.query.sort && Router.query.sort === "update-desc") {
      setSort(Router.query.sort);
      setApps(data.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt)));
    } else {
      setSort("name-asc");
      setApps(data.sort((a, b) => a.name.localeCompare(b.name)));
    }

    let handlePagination = (e) => {
      if (e.keyCode === 39) {
        let nextBtn = document.getElementById("next");

        if (nextBtn) {
          document.getElementById("next").click();
        }
      } else if (e.keyCode === 37) {
        let previousBtn = document.getElementById("previous");

        if (previousBtn) {
          document.getElementById("previous").click();
        }
      }
    };

    document.addEventListener("keydown", handlePagination);

    setPagination(apps.length);

    return () => document.removeEventListener("keydown", handlePagination);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const setPagination = (appCount) => {
    let requestedPage = parseInt(Router.query.page);
    if (requestedPage) {
      let maxPages = Math.round(appCount / appsPerPage) + 1;

      // we check if its a valid page number
      if (requestedPage > maxPages || requestedPage < 2) return;

      // if it is, we continue
      let calculateOffset = appsPerPage * (requestedPage - 1);
      setOffset(calculateOffset);
    }
  };

  let handleNext = () => {
    window.scrollTo(0, 0);
    setOffset((offset) => offset + appsPerPage);

    Router.replace({
      pathname: "/apps",
      query: {
        page: Math.round((offset + appsPerPage - 1) / appsPerPage) + 1,
      },
    });
  };

  let handlePrevious = () => {
    window.scrollTo(0, 0);
    setOffset((offset) => offset - appsPerPage);

    Router.replace({
      pathname: "/apps",
      query: {
        page: Math.round((offset + appsPerPage - 1) / appsPerPage) - 1,
      },
    });
  };

  let Pagination = ({ small, disable }) => {
    return (
      <div className={small ? styles.minPagination : styles.pagbtn}>
        <button
          className={`button ${small ? styles.smallBtn : null}`}
          id={!small ? "previous" : ""}
          onClick={handlePrevious}
          title="Previous page of apps"
          disabled={offset > 0 ? (disable ? "disabled" : null) : "disabled"}
        >
          <FiChevronLeft />
          {!small ? "Previous" : ""}
        </button>
        <button
          className={`button ${small ? styles.smallBtn : null}`}
          id={!small ? "next" : ""}
          title="Next page of apps"
          onClick={handleNext}
          disabled={
            offset + appsPerPage < apps.length
              ? disable
                ? "disabled"
                : null
              : "disabled"
          }
        >
          {!small ? "Next" : ""}
          <FiChevronRight />
        </button>
      </div>
    );
  };

  const Title = () => {
    return (
      <>
        {!searchInput && <h1>All apps {`(${apps.length})`}</h1>}
        {searchInput && (
          <>
            {searchInput.startsWith("tags: ") && (
              <h1>Tag: {searchInput.split(": ")[1]}</h1>
            )}
            {!searchInput.startsWith("tags: ") && <h1>Search results</h1>}
          </>
        )}
      </>
    );
  };

  if (!apps) return <></>;

  return (
    <div>
      <MetaTags title="Apps - winstall" />

      <div className={styles.controls}>
        <Title />

        <Pagination small disable={searchInput ? true : false} />
      </div>

      <Search
        apps={apps}
        onSearch={(q) => setSearchInput(q)}
        label={"Search for apps"}
        placeholder={"Enter you search term here"}
      />

      <div className={styles.controls}>
        {!searchInput && (
          <>
            <p>
              Showing {apps.slice(offset, offset + appsPerPage).length} apps
              (page {Math.round((offset + appsPerPage - 1) / appsPerPage)} of{" "}
              {totalPages}).
            </p>
            <ListSort
              apps={apps}
              defaultSort={sort}
              onSort={(sort) => setSort(sort)}
            />
          </>
        )}
      </div>

      {!searchInput && (
        <ul className={`${styles.all} ${styles.storeList}`}>
          {apps.slice(offset, offset + appsPerPage).map((app) => (
            <SingleApp
              app={app}
              key={app._id}
              showTime={sort.includes("update-") ? true : false}
            />
          ))}
        </ul>
      )}

      <div className={styles.pagination}>
        <Pagination disable={searchInput ? true : false} />
        <em>
          Hit the <FiArrowLeftCircle /> and <FiArrowRightCircle /> keys on your
          keyboard to navigate between pages quickly.
        </em>
      </div>

      <Footer />
    </div>
  );
}
Example #6
Source File: index.js    From winstall with GNU General Public License v3.0 4 votes vote down vote up
export default function Packs({ packs, error }) {
    if(error) return <Error title="Oops!" subtitle={error}/>
    
    const [offset, setOffset] = useState(0);

    const itemsPerPage = 60;
    const totalPages = Math.ceil(packs.length / itemsPerPage);

    let handleNext = () => {
        window.scrollTo(0, 0)
        setOffset(offset => offset + itemsPerPage);
    }
  
    let handlePrevious = () => {
        window.scrollTo(0, 0)
        setOffset(offset => offset - itemsPerPage);
    }

    const Pagination = ({ small, disable }) => {
        return (
          <div className={small ? styles.minPagination : styles.pagbtn}>
            <button
              className={`button ${small ? styles.smallBtn : null}`}
              id={!small ? "previous": ""}
              onClick={handlePrevious}
              title="Previous page of packs"
              disabled={offset > 0 ? (disable ? "disabled" : null) : "disabled"}
            >
              <FiChevronLeft />
              {!small ? "Previous" : ""}
            </button>
            <button
              className={`button ${small ? styles.smallBtn : null}`}
              id={!small ? "next" : ""}
              title="Next page of packs"
              onClick={handleNext}
              disabled={offset + itemsPerPage < packs.length ? ( disable ? "disabled" : null ) : "disabled"}
            >
              {!small ? "Next" : ""}
              <FiChevronRight />
            </button>
          </div>
        );
    }

      
    return (
        <PageWrapper>
            <MetaTags title="Packs - winstall" desc="Checkout the community's app collections for your new Windows 10 machine." />

            <div>
                <FeaturePromoter art="/assets/packsPromo.svg" promoId="packs" disableHide={true}>
                    <h3>Introducing Packs</h3>
                    <h1>Curate and share the apps you use daily.</h1>
                    <div className="box2">
                        <Link href="/packs/create"><button className="button spacer accent" id="starWine"><FiPlus/> Create a pack</button></Link>
                    </div>
                </FeaturePromoter>

                <div className={styles.controls}> 
                    <div>
                        <h1>All packs {`(${packs.length})`}</h1>
                        <p>
                            Showing {packs.slice(offset, offset + itemsPerPage).length} packs
                            (page {Math.round((offset + itemsPerPage - 1) / itemsPerPage)} of{" "}
                            {totalPages}).
                        </p>
                    </div>
                    <Pagination small/> 
                </div>

        
                
                <ul className={`${styles.all} ${styles.storeList}`}>
                    {packs.slice(offset, offset + itemsPerPage).map(pack => <li key={pack._id}><PackPreview pack={pack} /></li>)}
                </ul>

                <div className={styles.pagination}>
                    <Pagination/>
                    <em>
                        Hit the <FiArrowLeftCircle /> and <FiArrowRightCircle /> keys
                        on your keyboard to navigate between pages quickly.
                    </em>
                </div>
            </div>

        </PageWrapper>
    )
}