react-feather#ChevronsRight TypeScript Examples

The following examples show how to use react-feather#ChevronsRight. 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: ContentSwitch.tsx    From yet-another-generic-startpage with MIT License 5 votes vote down vote up 
ContentSwitch = ({
  leftContent,
  rightContent,
}: SurfaceSwitchProps) => {
  const [activeView, setActiveView] = useState<"left" | "right">("left")
  const toggleView = () =>
    setActiveView(activeView === "left" ? "right" : "left")

  const sharedProps = {
    leaveFrom: "display",
    enterTo: "display",
    enter: "transition",
    leave: "transition",
    unmount: false,
  }
  return (
    <>
      <ButtonPosition>
        <IconButton
          icon={activeView === "left" ? ChevronsLeft : ChevronsRight}
          onClick={toggleView}
          label="Switch view"
        />
      </ButtonPosition>
      <SwitchTransition
        leaveTo="hideLeft"
        enterFrom="hideLeft"
        show={activeView === "left"}
        {...sharedProps}
      >
        {leftContent}
      </SwitchTransition>
      <SwitchTransition
        leaveTo="hideRight"
        enterFrom="hideRight"
        show={activeView === "right"}
        {...sharedProps}
      >
        {rightContent}
      </SwitchTransition>
    </>
  )
}
Example #2
Source File: Pagination.tsx    From ke with MIT License 5 votes vote down vote up 
Pagination = makeWithLayout(({ value: page, onChange, totalCount }: PaginationProps) => {
  const isFirst = page === 1
  const isLast = page === totalCount

  return {
    ToFirst: (
      <PaginationButton
        aria-label="На первую страницу"
        disabled={isFirst || totalCount === 0}
        onClick={() => onChange(1)}
      >
        <ChevronsLeft />
      </PaginationButton>
    ),
    ToPrev: (
      <PaginationButton
        aria-label="На предыдущую страницу"
        disabled={isFirst || totalCount === 0}
        onClick={() => onChange(page > 1 ? page - 1 : 1)}
      >
        <ChevronLeft />
      </PaginationButton>
    ),
    Pages: `${page} / ${totalCount}`,
    ToNext: (
      <PaginationButton
        aria-label="На следующую страницу"
        disabled={isLast || totalCount === 0}
        onClick={() => onChange(page < totalCount ? page + 1 : page)}
      >
        <ChevronRight />
      </PaginationButton>
    ),
    ToLast: (
      <PaginationButton
        aria-label="На последнюю страницу"
        disabled={isLast || totalCount === 0}
        onClick={() => onChange(totalCount)}
      >
        <ChevronsRight />
      </PaginationButton>
    ),
  }
}, PaginationLayout)
Example #3
Source File: Bottom.tsx    From ke with MIT License 4 votes vote down vote up 
Bottom = (props: BottonProps): JSX.Element => {
  const {
    resourceName,
    pageIndex,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
  } = props

  return (
    <Flex
      borderTopWidth="1px"
      overflowX="hidden"
      overflowY="hidden"
      p={4}
      bg="white"
      roundedBottomLeft={4}
      roundedBottomRight={4}
      justifyContent="space-between"
      flexDirection="row"
    >
      <Flex flexDirection="row">
        <TableIconButton
          mr={2}
          onClick={() => {
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_first_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: undefined,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            gotoPage(0)
          }}
          isDisabled={!canPreviousPage}
          icon={<ChevronsLeft size={20} />}
        />
        <TableIconButton
          mr={2}
          isDisabled={!canPreviousPage}
          onClick={() => {
            previousPage()
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_previous_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: pageIndex - 1,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
          }}
          icon={<ChevronLeft size={20} />}
        />
      </Flex>
      <Flex justifyContent="center" alignItems="center">
        <Text mr={4}>
          Страница{' '}
          <strong>
            {pageIndex + 1} из {pageOptions.length}
          </strong>{' '}
        </Text>
      </Flex>
      <Flex flexDirection="row">
        <TableIconButton
          ml={2}
          isDisabled={!canNextPage}
          onClick={() => {
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_next_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: pageIndex + 1,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            nextPage()
          }}
          icon={<ChevronRight size={20} />}
        />
        <TableIconButton
          ml={2}
          onClick={() => {
            const lastPage = pageCount ? pageCount - 1 : 1
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_last_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: lastPage,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            gotoPage(lastPage)
          }}
          isDisabled={!canNextPage}
          icon={<ChevronsRight size={20} />}
        />
      </Flex>
    </Flex>
  )
}