packages/bar/examples/BarHistoryExample.tsx - develop - kaws/ui-kit-ce

packages/bar/examples/BarHistoryExample.tsx
222 строки6 KB
Строганов Федор Юрьевич
docs: доработана документация Storybook
04 мар 2025, 16:28
04 мар 2025, 16:2828abce0
import React from 'react'
import {
  Bar,
  BarButton,
  BarDate,
  BarDivider,
  BarMenuItem,
  SubBar,
  BarSearch,
} from '@v-uik/base'
import { CustomBarMenuItem } from './CustomBarMenuItem'

type BarHistoryExampleProps = {
  subBarExpanded: boolean
}

const MENU_ITEMS = [
  'Option 1',
  'Option 2',
  'Option 3',
  'Option 4',
  'Option 5',
  'Option 6',
  'Option 7',
  'Option 8',
  'Option 9',
  'Option 10',
  'Option 11',
]

interface IconProps extends React.SVGAttributes<SVGElement> {}

const iconSvgPath =
  'M20,2 C21.6568542,2 23,3.34314575 23,5 L23,20 C23,21.6568542 21.6568542,23 20,23 L5,23 C3.34314575,23 2,21.6568542 2,20 L2,5 C2,3.34314575 3.34314575,2 5,2 L20,2 Z M20,3.5 L5,3.5 C4.17157288,3.5 3.5,4.17157288 3.5,5 L3.5,5 L3.5,20 C3.5,20.8284271 4.17157288,21.5 5,21.5 L5,21.5 L20,21.5 C20.8284271,21.5 21.5,20.8284271 21.5,20 L21.5,20 L21.5,5 C21.5,4.17157288 20.8284271,3.5 20,3.5 L20,3.5 Z M11,2 L14,2 L14,3.5 L11,3.5 L11,2 Z M2,11 L3.5,11 L3.5,14 L2,14 L2,11 Z M11,21.5 L14,21.5 L14,23 L11,23 L11,21.5 Z M21.5,11 L23,11 L23,14 L21.5,14 L21.5,11 Z' // eslint-disable-line max-len

const Icon: React.FC<IconProps> = ({
  width = 24,
  height = 24,
  fill = 'currentColor',
  ...props
}) => {
  return (
    <svg
      width={width}
      height={height}
      fill={fill}
      {...props}
      viewBox="0 0 25 25"
    >
      <path d={iconSvgPath} fillRule="evenodd" />
    </svg>
  )
}

Icon.displayName = 'Icon'

const menuSvgPath =
  'M1.5 1.5H6V6H1.5V1.5ZM1.5 9.75H6V14.25H1.5V9.75ZM14.25 1.5H9.75V6H14.25V1.5ZM9.75 9.75H14.25V14.25H9.75V9.75ZM22.5 1.5H18V6H22.5V1.5ZM18 9.75H22.5V14.25H18V9.75ZM6 18H1.5V22.5H6V18ZM9.75 18H14.25V22.5H9.75V18ZM22.5 18H18V22.5H22.5V18Z' // eslint-disable-line max-len

const IconMenu: React.FC<IconProps> = ({
  width = 24,
  height = 24,
  fill = 'currentColor',
  ...props
}) => {
  return (
    <svg
      width={width}
      height={height}
      fill={fill}
      {...props}
      viewBox="0 0 24 24"
    >
      <path d={menuSvgPath} fillRule="evenodd" />
    </svg>
  )
}

IconMenu.displayName = 'IconMenu'

const historySvgPath =
  'M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM10.5 4.5H12V12.0043L16.2383 16.2426L15.1776 17.3033L11.3743 13.5H10.5V4.5Z'

const HistoryIcon: React.FC<IconProps> = ({
  width = 24,
  height = 24,
  fill = 'currentColor',
  ...props
}) => {
  return (
    <svg
      width={width}
      height={height}
      fill={fill}
      {...props}
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path fillRule="evenodd" clipRule="evenodd" d={historySvgPath} />
    </svg>
  )
}

HistoryIcon.displayName = 'HistoryIcon'

export const BarHistoryExample = ({
  subBarExpanded,
}: BarHistoryExampleProps): JSX.Element => {
  const [historyExpanded, setHistoryExpanded] = React.useState(false)

  const [menuItems, setMenuItems] = React.useState(MENU_ITEMS)

  const [selected, setSelected] = React.useState(0)
  const [historyStack, setHistoryStack] = React.useState<
    Array<{
      /**
       *
       */
      title: string
      callback(): void
    }>
  >([])

  const handleClickItem = (title: string, index: number) => {
    setSelected(index)
    if (!historyStack.find((item) => item.title === title)) {
      setHistoryStack((old) => [
        {
          title,
          callback: () => {
            setSelected(index)
          },
        },
        ...old,
      ])
    }
  }

  const handleChangeSearchBar = (value: string) => {
    setMenuItems(
      MENU_ITEMS.filter((item) =>
        item.toLowerCase().includes(value.toLowerCase())
      )
    )
  }

  return (
    <div style={{ height: '80vh' }}>
      <div style={{ position: 'absolute', inset: '10px 6px' }}>
        <Bar
          style={{
            position: 'absolute',
            right: 0,
            bottom: undefined,
          }}
          kind="dark"
          direction="horizontal"
          expanded={false}
        >
          <BarDate style={{ marginLeft: 'auto' }} />
          <BarDivider />

          <BarButton icon={<IconMenu />} />
        </Bar>

        <SubBar
          style={{
            position: 'absolute',
            top: 48,
          }}
          direction="vertical"
          kind="dark"
          expanded={subBarExpanded}
        >
          {menuItems.length ? (
            menuItems.map((item, index) => (
              <BarMenuItem
                key={index}
                selected={selected === index}
                icon={<Icon />}
                onClick={() => handleClickItem(`${item}`, index)}
              >
                {item}
              </BarMenuItem>
            ))
          ) : (
            <BarMenuItem disabled>Ничего не найдено</BarMenuItem>
          )}
          <BarDivider />
          <CustomBarMenuItem
            expanded={historyExpanded}
            items={
              historyStack.length ? (
                <>
                  {historyStack.map((item, index) => (
                    <CustomBarMenuItem
                      key={index}
                      count={2}
                      onClick={item.callback}
                    >
                      {item.title}
                    </CustomBarMenuItem>
                  ))}
                </>
              ) : null
            }
            icon={<HistoryIcon />}
            onClick={() => setHistoryExpanded((old) => !old)}
          >
            History
          </CustomBarMenuItem>

          <BarSearch
            style={{ marginTop: 'auto', marginBottom: 16 }}
            inputProps={{ placeholder: 'Search' }}
            onChange={handleChangeSearchBar}
          />
        </SubBar>
      </div>
    </div>
  )
}