@consta/uikit 4.11.0 → 4.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/__internal__/src/components/Combobox/helpers.d.ts +2 -2
- package/__internal__/src/components/Combobox/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerDropdown/DatePickerDropdown.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerDropdown/DatePickerDropdown.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeDate/DatePickerTypeDate.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeDate/DatePickerTypeDate.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeDateRange/DatePickerTypeDateRange.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeDateRange/DatePickerTypeDateRange.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeDateTime/DatePickerTypeDateTime.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeDateTime/DatePickerTypeDateTime.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeMonth/DatePickerTypeMonth.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeMonth/DatePickerTypeMonth.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeMonthRange/DatePickerTypeMonthRange.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeMonthRange/DatePickerTypeMonthRange.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeTime/DatePickerTypeTime.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeTime/DatePickerTypeTime.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeYear/DatePickerTypeYear.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeYear/DatePickerTypeYear.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.js.map +1 -1
- package/__internal__/src/components/DatePicker/useDropdownVisible.d.ts +24 -0
- package/__internal__/src/components/DatePicker/useDropdownVisible.js +2 -0
- package/__internal__/src/components/DatePicker/useDropdownVisible.js.map +1 -0
- package/__internal__/src/components/EventInterceptor/propsHandlers/useSelectEventsHandler.js +1 -1
- package/__internal__/src/components/EventInterceptor/propsHandlers/useSelectEventsHandler.js.map +1 -1
- package/__internal__/src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.d.ts +1 -1
- package/__internal__/src/components/ListCanary/ListItem/ListItem.js +1 -1
- package/__internal__/src/components/ListCanary/ListItem/ListItem.js.map +1 -1
- package/__internal__/src/components/ListCanary/ListItemGrid/ListItemGrid.d.ts +2 -2
- package/__internal__/src/components/ListCanary/ListItemGrid/ListItemGrid.js +1 -1
- package/__internal__/src/components/ListCanary/ListItemGrid/ListItemGrid.js.map +1 -1
- package/__internal__/src/components/ListCanary/types.d.ts +4 -3
- package/__internal__/src/components/ListCanary/types.js.map +1 -1
- package/__internal__/src/components/SelectComponents/Select.css +1 -1
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.d.ts +1 -1
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.js.map +1 -1
- package/__internal__/src/components/Slider/Slider.js +1 -1
- package/__internal__/src/components/Slider/Slider.js.map +1 -1
- package/__internal__/src/components/Slider/SliderInput/SliderInput.d.ts +1 -1
- package/__internal__/src/components/Slider/SliderInput/SliderInput.js +1 -1
- package/__internal__/src/components/Slider/SliderInput/SliderInput.js.map +1 -1
- package/__internal__/src/components/Slider/helper.d.ts +13 -5
- package/__internal__/src/components/Slider/helper.js +1 -1
- package/__internal__/src/components/Slider/helper.js.map +1 -1
- package/__internal__/src/components/Slider/useSlider/useSlider.js +1 -1
- package/__internal__/src/components/Slider/useSlider/useSlider.js.map +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.css +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.d.ts +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.d.ts +1 -5
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.js +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.js.map +1 -1
- package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.css +1 -1
- package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.js +1 -1
- package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.js.map +1 -1
- package/__internal__/src/components/Tabs/Tab/TabsTab.css +1 -1
- package/__internal__/src/components/Tabs/Tab/TabsTab.d.ts +10 -2
- package/__internal__/src/components/Tabs/Tab/TabsTab.js +1 -1
- package/__internal__/src/components/Tabs/Tab/TabsTab.js.map +1 -1
- package/__internal__/src/components/Tabs/Tabs.js +1 -1
- package/__internal__/src/components/Tabs/Tabs.js.map +1 -1
- package/__internal__/src/components/Tabs/helpers.d.ts +14 -2
- package/__internal__/src/components/Tabs/helpers.js +1 -1
- package/__internal__/src/components/Tabs/helpers.js.map +1 -1
- package/__internal__/src/components/Tabs/types.d.ts +32 -11
- package/__internal__/src/components/Tabs/types.js.map +1 -1
- package/__internal__/src/components/TagBase/TagBase.css +1 -1
- package/__internal__/src/hooks/useForkRef/useForkRef.js.map +1 -1
- package/__internal__/src/hooks/useRefs/useRefs.js +1 -1
- package/__internal__/src/hooks/useRefs/useRefs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":["listPropSize","defaultListPropSize","listPropInnerOffset","defaultListPropInnerOffset","listPropStatus","listPropForm","defaultListPropForm"],"sources":["../../../../../src/components/ListCanary/types.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { MixSpaceProps } from '##/mixs/MixSpace';\nimport { Group } from '##/utils/getGroups';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const listPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type ListPropSize = typeof listPropSize[number];\nexport const defaultListPropSize = listPropSize[0];\n\nexport const listPropInnerOffset = ['normal', 'increased'] as const;\nexport type ListPropInnerOffset = typeof listPropInnerOffset[number];\nexport const defaultListPropInnerOffset = listPropInnerOffset[0];\n\nexport const listPropStatus = ['alert', 'success', 'warning'] as const;\nexport type ListPropStatus = typeof listPropStatus[number];\n\nexport const listPropForm = ['default', 'brick', 'round'] as const;\nexport type ListPropForm = typeof listPropForm[number];\nexport const defaultListPropForm = listPropForm[0];\n\nexport type DefaultListGroup = {\n id: string | number;\n label?: string;\n rightSide?: React.ReactNode;\n};\n\nexport type DefaultListItem = {\n label: React.ReactNode;\n disabled?: boolean;\n active?: boolean;\n checked?: boolean;\n status?: ListPropStatus;\n groupId?: string | number;\n leftSide?: React.ReactNode;\n leftIcon?: IconComponent;\n rightSide?: React.ReactNode;\n rightIcon?: IconComponent;\n onClick?: React.MouseEventHandler;\n};\n\nexport type ListPropOnItemClick<ITEM> = (\n item: ITEM,\n params: {\n e: React.MouseEvent;\n item: ITEM;\n },\n) => void;\n\nexport type ListPropRenderItem<ITEM> = (\n item: ITEM,\n) => React.ReactElement | null;\n\n// ITEMS\n\nexport type ListPropGetItemLabel<ITEM> = (item: ITEM) => React.ReactNode;\n\nexport type ListPropGetItemAdditionalClassName<ITEM> = (item: ITEM) => string;\n\nexport type ListPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemActive<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemStatus<ITEM> = (\n item: ITEM,\n) => ListPropStatus | undefined;\n\nexport type ListPropGetItemGroupId<ITEM> = (\n item: ITEM,\n) => string | number | undefined;\n\nexport type ListPropGetItemLeftSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemLeftIcon<ITEM> = (\n item: ITEM,\n) => IconComponent | undefined;\n\nexport type ListPropGetItemRightSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemRightIcon<ITEM> = (\n item: ITEM,\n) => IconComponent | undefined;\n\nexport type ListPropGetItemAs<ITEM> = (\n item: ITEM,\n) => keyof JSX.IntrinsicElements | undefined;\n\nexport type ListPropGetItemAttributes<ITEM> = (\n item: ITEM,\n) => JSX.IntrinsicElements[keyof JSX.IntrinsicElements] | undefined;\n\nexport type ListPropGetItemOnClick<ITEM> = (\n item: ITEM,\n) => React.MouseEventHandler | undefined;\n\nexport type ListPropSortGroup<ITEM, GROUP> = (\n a: Group<ITEM, GROUP>,\n b: Group<ITEM, GROUP>,\n) => number;\n\n// GROUPS\nexport type ListPropGetGroupKey<GROUP> = (item: GROUP) => string | number;\nexport type ListPropGetGroupAdditionalClassName<GROUP> = (\n item: GROUP,\n) => string;\n\nexport type ListPropGetGroupLabel<GROUP> = (item: GROUP) => string | undefined;\nexport type ListPropGetGroupRightSide<GROUP> = (\n item: GROUP,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemRef<ITEM> = (\n item: ITEM,\n) => React.RefObject<HTMLElement> | undefined;\n\nexport type ListProps<ITEM = DefaultListItem, GROUP = DefaultListGroup> = {\n size?: ListPropSize;\n items: ITEM[];\n innerOffset?: ListPropInnerOffset;\n itemSpase?: MixSpaceProps;\n groupLabelSpase?: MixSpaceProps;\n dividerSpase?: MixSpaceProps;\n onItemClick?: ListPropOnItemClick<ITEM>;\n getItemLabel?: ListPropGetItemLabel<ITEM>;\n getItemDisabled?: ListPropGetItemDisabled<ITEM>;\n getItemActive?: ListPropGetItemActive<ITEM>;\n getItemChecked?: ListPropGetItemActive<ITEM>;\n getItemLeftSide?: ListPropGetItemLeftSide<ITEM>;\n getItemLeftIcon?: ListPropGetItemLeftIcon<ITEM>;\n getItemRightSide?: ListPropGetItemRightSide<ITEM>;\n getItemRightIcon?: ListPropGetItemRightIcon<ITEM>;\n getItemGroupKey?: ListPropGetItemGroupId<ITEM>;\n getItemOnClick?: ListPropGetItemOnClick<ITEM>;\n getItemStatus?: ListPropGetItemStatus<ITEM>;\n getItemAs?: ListPropGetItemAs<ITEM>;\n getItemAttributes?: ListPropGetItemAttributes<ITEM>;\n getItemRef?: ListPropGetItemRef<ITEM>;\n getItemAdditionalClassName?: ListPropGetItemAdditionalClassName<ITEM>;\n renderItem?: ListPropRenderItem<ITEM>;\n groups?: GROUP[];\n getGroupKey?: ListPropGetGroupKey<GROUP>;\n getGroupLabel?: ListPropGetGroupLabel<GROUP>;\n getGroupRightSide?: ListPropGetGroupRightSide<GROUP>;\n sortGroup?: ListPropSortGroup<ITEM, GROUP>;\n getGroupAdditionalClassName?: ListPropGetGroupAdditionalClassName<GROUP>;\n disabled?: boolean;\n} & (ITEM extends { label: DefaultListItem['label'] }\n ? {}\n : { getItemLabel: ListPropGetItemLabel<ITEM> }) &\n (GROUP extends { id: DefaultListGroup['id'] }\n ? {}\n : { getGroupKey: ListPropGetGroupKey<GROUP> });\n\nexport type ListComponent = <ITEM = DefaultListItem, GROUP = DefaultListGroup>(\n props: ListProps<ITEM, GROUP>,\n) => React.ReactElement | null;\n\nexport type ListItemProps<AS extends keyof JSX.IntrinsicElements = 'div'> =\n PropsWithAsAttributes<\n Omit<DefaultListItem, 'id' | 'groupId' | 'attributes' | 'onClick'> & {\n size?: ListPropSize;\n innerOffset?: 'normal' | 'increased';\n space?: MixSpaceProps;\n },\n AS\n
|
|
1
|
+
{"version":3,"file":"types.js","names":["listPropSize","defaultListPropSize","listPropInnerOffset","defaultListPropInnerOffset","listPropStatus","listPropForm","defaultListPropForm"],"sources":["../../../../../src/components/ListCanary/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { MixSpaceProps } from '##/mixs/MixSpace';\nimport { Group } from '##/utils/getGroups';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const listPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type ListPropSize = typeof listPropSize[number];\nexport const defaultListPropSize = listPropSize[0];\n\nexport const listPropInnerOffset = ['normal', 'increased'] as const;\nexport type ListPropInnerOffset = typeof listPropInnerOffset[number];\nexport const defaultListPropInnerOffset = listPropInnerOffset[0];\n\nexport const listPropStatus = ['alert', 'success', 'warning'] as const;\nexport type ListPropStatus = typeof listPropStatus[number];\n\nexport const listPropForm = ['default', 'brick', 'round'] as const;\nexport type ListPropForm = typeof listPropForm[number];\nexport const defaultListPropForm = listPropForm[0];\n\nexport type DefaultListGroup = {\n id: string | number;\n label?: string;\n rightSide?: React.ReactNode;\n};\n\nexport type DefaultListItem = {\n label: React.ReactNode;\n disabled?: boolean;\n active?: boolean;\n checked?: boolean;\n status?: ListPropStatus;\n groupId?: string | number;\n leftSide?: React.ReactNode;\n leftIcon?: IconComponent;\n rightSide?: React.ReactNode;\n rightIcon?: IconComponent;\n onClick?: React.MouseEventHandler;\n};\n\nexport type ListPropOnItemClick<ITEM> = (\n item: ITEM,\n params: {\n e: React.MouseEvent;\n item: ITEM;\n },\n) => void;\n\nexport type ListPropRenderItem<ITEM> = (\n item: ITEM,\n) => React.ReactElement | null;\n\n// ITEMS\n\nexport type ListPropGetItemLabel<ITEM> = (item: ITEM) => React.ReactNode;\n\nexport type ListPropGetItemAdditionalClassName<ITEM> = (item: ITEM) => string;\n\nexport type ListPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemActive<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemStatus<ITEM> = (\n item: ITEM,\n) => ListPropStatus | undefined;\n\nexport type ListPropGetItemGroupId<ITEM> = (\n item: ITEM,\n) => string | number | undefined;\n\nexport type ListPropGetItemLeftSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemLeftIcon<ITEM> = (\n item: ITEM,\n) => IconComponent | undefined;\n\nexport type ListPropGetItemRightSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemRightIcon<ITEM> = (\n item: ITEM,\n) => IconComponent | undefined;\n\nexport type ListPropGetItemAs<ITEM> = (\n item: ITEM,\n) => keyof JSX.IntrinsicElements | undefined;\n\nexport type ListPropGetItemAttributes<ITEM> = (\n item: ITEM,\n) => JSX.IntrinsicElements[keyof JSX.IntrinsicElements] | undefined;\n\nexport type ListPropGetItemOnClick<ITEM> = (\n item: ITEM,\n) => React.MouseEventHandler | undefined;\n\nexport type ListPropSortGroup<ITEM, GROUP> = (\n a: Group<ITEM, GROUP>,\n b: Group<ITEM, GROUP>,\n) => number;\n\n// GROUPS\nexport type ListPropGetGroupKey<GROUP> = (item: GROUP) => string | number;\nexport type ListPropGetGroupAdditionalClassName<GROUP> = (\n item: GROUP,\n) => string;\n\nexport type ListPropGetGroupLabel<GROUP> = (item: GROUP) => string | undefined;\nexport type ListPropGetGroupRightSide<GROUP> = (\n item: GROUP,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemRef<ITEM> = (\n item: ITEM,\n) => React.RefObject<HTMLElement> | undefined;\n\nexport type ListProps<ITEM = DefaultListItem, GROUP = DefaultListGroup> = {\n size?: ListPropSize;\n items: ITEM[];\n innerOffset?: ListPropInnerOffset;\n itemSpase?: MixSpaceProps;\n groupLabelSpase?: MixSpaceProps;\n dividerSpase?: MixSpaceProps;\n onItemClick?: ListPropOnItemClick<ITEM>;\n getItemLabel?: ListPropGetItemLabel<ITEM>;\n getItemDisabled?: ListPropGetItemDisabled<ITEM>;\n getItemActive?: ListPropGetItemActive<ITEM>;\n getItemChecked?: ListPropGetItemActive<ITEM>;\n getItemLeftSide?: ListPropGetItemLeftSide<ITEM>;\n getItemLeftIcon?: ListPropGetItemLeftIcon<ITEM>;\n getItemRightSide?: ListPropGetItemRightSide<ITEM>;\n getItemRightIcon?: ListPropGetItemRightIcon<ITEM>;\n getItemGroupKey?: ListPropGetItemGroupId<ITEM>;\n getItemOnClick?: ListPropGetItemOnClick<ITEM>;\n getItemStatus?: ListPropGetItemStatus<ITEM>;\n getItemAs?: ListPropGetItemAs<ITEM>;\n getItemAttributes?: ListPropGetItemAttributes<ITEM>;\n getItemRef?: ListPropGetItemRef<ITEM>;\n getItemAdditionalClassName?: ListPropGetItemAdditionalClassName<ITEM>;\n renderItem?: ListPropRenderItem<ITEM>;\n groups?: GROUP[];\n getGroupKey?: ListPropGetGroupKey<GROUP>;\n getGroupLabel?: ListPropGetGroupLabel<GROUP>;\n getGroupRightSide?: ListPropGetGroupRightSide<GROUP>;\n sortGroup?: ListPropSortGroup<ITEM, GROUP>;\n getGroupAdditionalClassName?: ListPropGetGroupAdditionalClassName<GROUP>;\n disabled?: boolean;\n} & (ITEM extends { label: DefaultListItem['label'] }\n ? {}\n : { getItemLabel: ListPropGetItemLabel<ITEM> }) &\n (GROUP extends { id: DefaultListGroup['id'] }\n ? {}\n : { getGroupKey: ListPropGetGroupKey<GROUP> });\n\nexport type ListComponent = <ITEM = DefaultListItem, GROUP = DefaultListGroup>(\n props: ListProps<ITEM, GROUP>,\n) => React.ReactElement | null;\n\nexport type ListItemProps<AS extends keyof JSX.IntrinsicElements = 'div'> =\n PropsWithAsAttributes<\n Omit<DefaultListItem, 'id' | 'groupId' | 'attributes' | 'onClick'> & {\n size?: ListPropSize;\n innerOffset?: 'normal' | 'increased';\n space?: MixSpaceProps;\n iconSize?: IconPropSize;\n },\n AS\n >;\n\nexport type ListItemComponent = <\n AS extends keyof JSX.IntrinsicElements = 'div',\n>(\n props: ListItemProps<AS>,\n) => React.ReactElement | null;\n\nexport type ListGroupLabelProps = PropsWithHTMLAttributesAndRef<\n {\n size?: ListPropSize;\n label: string;\n innerOffset?: ListPropInnerOffset;\n rightSide?: React.ReactNode;\n space?: MixSpaceProps;\n },\n HTMLDivElement\n>;\n\nexport type ListDividerProps = PropsWithHTMLAttributesAndRef<\n {\n size?: ListPropSize;\n innerOffset?: ListPropInnerOffset;\n space?: MixSpaceProps;\n },\n HTMLDivElement\n>;\n\nexport type ListBoxProps = PropsWithHTMLAttributesAndRef<\n {\n size?: ListPropSize;\n form?: ListPropForm;\n border?: boolean;\n shadow?: boolean;\n },\n HTMLDivElement\n>;\n\nexport type ListAddItemProps = PropsWithHTMLAttributesAndRef<\n {\n size?: ListPropSize;\n label: React.ReactNode;\n innerOffset?: ListPropInnerOffset;\n active?: boolean;\n underLine?: boolean;\n },\n HTMLDivElement\n>;\n"],"mappings":"AAQA,MAAO,IAAMA,aAAY,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAArB,CAEP,MAAO,IAAMC,oBAAmB,CAAGD,YAAY,CAAC,CAAD,CAAxC,CAEP,MAAO,IAAME,oBAAmB,CAAG,CAAC,QAAD,CAAW,WAAX,CAA5B,CAEP,MAAO,IAAMC,2BAA0B,CAAGD,mBAAmB,CAAC,CAAD,CAAtD,CAEP,MAAO,IAAME,eAAc,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAvB,CAGP,MAAO,IAAMC,aAAY,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAqB,OAArB,CAArB,CAEP,MAAO,IAAMC,oBAAmB,CAAGD,YAAY,CAAC,CAAD,CAAxC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Select{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));align-items:flex-start;display:flex;justify-content:flex-start;position:relative;width:100%}.Select_type_userselect.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_userselect.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-3xs))}.Select_type_userselect.Select_size_l{--select-element-height:calc(var(--space-3xl) - var(--space-2xs))}.Select_type_combobox.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_combobox.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_combobox.Select_size_l{--select-element-height:var(--space-2xl)}.Select_type_select.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_select.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_select.Select_size_l{--select-element-height:var(--space-2xl)}.Select_size_xs{--input-height:var(--control-height-xs);--input-space:calc(var(--control-space-xs)*0.5);--input-font-size:var(--control-text-size-xs)}.Select_size_s{--input-height:var(--control-height-s);--input-space:calc(var(--control-space-s)*0.5);--input-font-size:var(--control-text-size-s);--tag-space:calc(var(--space-xs)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5)}.Select_size_m{--input-height:var(--control-height-m);--input-space:calc(var(--control-space-m)*0.5);--input-font-size:var(--control-text-size-m);--tag-space:calc(var(--space-s)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--space-2xl)*4.5 - var(--space-2xs)*4.5)}.Select_size_l{--input-height:var(--control-height-l);--input-space:calc(var(--control-space-l)*0.5);--input-font-size:var(--control-text-size-l);--tag-space:calc(var(--space-m)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--space-2xl)*4.5)}.Select_labelPosition_top{flex-direction:column}.Select_labelPosition_top>:not(:last-child){margin-bottom:var(--space-xs)}.Select_labelPosition_left{flex-direction:row}.Select_labelPosition_left .Select-Label{align-items:center;display:inline-flex;height:var(--input-height)}.Select_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.Select-Body{display:inline-flex;flex-direction:column;width:100%}.Select-Body .Select-Caption{margin-left:var(--caption-margin-left);margin-top:var(--space-2xs)}.Select-SelectContainer{--container-border-color:var(--color-control-bg-border-default);display:flex;position:relative;width:100%}.Select-SelectContainer_status_alert{--container-border-color:var(--color-bg-alert)}.Select-SelectContainer_status_success{--container-border-color:var(--color-bg-success)}.Select-SelectContainer_status_warning{--container-border-color:var(--color-bg-warning)}.Select-SelectContainer_view_default .Select-Control{background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_default .Select-Control:hover{border-color:var(--color-control-bg-border-default-hover)}.Select-SelectContainer_view_default.Select-SelectContainer_focused .Select-Control{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.Select-SelectContainer_multiple .Select-Control{height:auto;min-height:var(--input-height)}.Select-SelectContainer_form_round .Select-Control{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_brick .Select-Control{border-radius:0}.Select-SelectContainer_form_clear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0}.Select-SelectContainer_form_defaultClear .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius);border-right-width:0}.Select-SelectContainer_form_clearDefault .Select-Control{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_defaultBrick .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius)}.Select-SelectContainer_form_brickDefault .Select-Control{border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_roundBrick .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_brickRound .Select-Control{border-radius:0 calc(var(--input-height)/2) 99rem calc(var(--input-height)/2);padding-right:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_brickClear .Select-Control{border-radius:0;border-right-width:0}.Select-SelectContainer_form_clearBrick .Select-Control{border-left-width:0;border-radius:0}.Select-SelectContainer_form_clearRound .Select-Control{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_roundClear .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_clearClear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_brickClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_defaultClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_roundClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clearBrick.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearDefault.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearRound.Select-SelectContainer_focused .Select-Control{box-shadow:calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_disabled .Select-Control{background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable);color:var(--color-control-typo-disable);pointer-events:none}.Select-SelectContainer_view_clear .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus,.Select-SelectContainer_view_clear .Select-Control:hover{color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled{pointer-events:none}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled .Select-Control{color:var(--color-control-typo-disable)}.Select-SelectContainer_view_clear.Select-SelectContainer_disabled .Select-Control{pointer-events:none}.Select-SelectContainer_view_default .Select-ControlValueContainer{padding:0 0 0 var(--input-space)}.Select-SelectContainer_form_round .Select-SelectContainer-IndicatorsDropdown{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_multiple .Select-ControlValueContainer{box-sizing:border-box;display:flex;line-height:1;padding-bottom:0;padding-top:0;position:relative}.Select-SelectContainer_multiple .Select-ControlValue{-ms-overflow-style:none;max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5);overflow-x:visible;overflow-y:auto;padding-top:calc(var(--tag-space) - var(--control-border-width));scrollbar-width:none;white-space:normal}.Select-SelectContainer_multiple .Select-ControlValue::-webkit-scrollbar{display:none}.Select-SelectContainer_multiple .Select-ControlValue_isUserSelect{display:flex;flex-wrap:wrap;padding-top:calc(var(--space-s)/4)}.Select_view_clear{--caption-margin-left:0}.Select-Delimiter{background-color:var(--color-control-bg-border-default);width:1px}.Select-Control{background:transparent;border:none;box-sizing:border-box;color:currentColor;cursor:pointer;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);height:var(--input-height);line-height:calc(var(--input-height) - var(--control-border-width));outline:none;padding:0;transition:border-color .15s,box-shadow .15s,background-color .15s;width:100%}.Select-Control:focus{outline:none}.Select-Indicators{display:flex;height:100%}.Select-IndicatorsDropdown{background-color:transparent;border:none;color:var(--color-control-typo-disable);cursor:pointer;display:block;margin:0;padding:0;text-align:center;width:var(--input-height)}.Select-IndicatorsDropdown:focus{outline:none}.Select-ControlInner{position:relative;width:100%}.Select-ControlValueContainer{background-color:transparent;border:none;bottom:0;color:inherit;font-size:var(--input-font-size);left:0;line-height:calc(var(--input-height) - 2px);margin:0;min-height:calc(var(--input-height) - 2px);padding:0;position:absolute;right:0;text-align:left;top:0}.Select-ControlValueContainer:focus{outline:none}.Select-Control[aria-expanded=true] .Select-IndicatorsDropdown{transform:rotate(180deg)}.Select-ControlValue,.Select-Placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-Placeholder{color:var(--color-control-typo-placeholder);font-size:var(--input-font-size);padding-right:var(--input-space);pointer-events:none;text-align:left}.Select-Placeholder_isHidden{opacity:0;visibility:hidden}.Select-Control_hasInput .Select-Placeholder{background-color:transparent;line-height:calc(var(--input-height) - 2px);position:absolute;top:0;width:calc(100% - var(--input-space))}.Select-DropdownIndicatorIcon{position:relative;top:1px}.Select-ClearIndicator{background-color:transparent;border:none;color:var(--color-control-typo-clear);cursor:pointer;margin:0;padding:0 var(--space-xs)}.Select-ClearIndicatorIcon{position:relative;top:1px}.Select-Input{background-color:transparent;border:none;color:inherit;font-family:inherit;font-size:inherit;line-height:calc(var(--input-height) - 2px);margin:0;outline:none;padding:0;position:relative;width:100%}.Select-Input_hide{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-Input_multiple{display:inline-flex;height:calc(var(--input-height) - var(--control-border-width)*2);line-height:1;line-height:calc(var(--input-height) - var(--control-border-width)*2);margin-top:calc(var(--tag-space)*-1);min-width:10px}.Select-Input_multiple.Select-Input_isUserSelect{margin-top:calc(var(--space-s)/4*-1)}.Select-FakeField{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-HelperInputFakeElement{display:inline-block;font-size:var(--input-font-size);height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap}
|
|
1
|
+
.Select{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));align-items:flex-start;display:flex;justify-content:flex-start;position:relative;width:100%}.Select_type_userselect.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_userselect.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-3xs))}.Select_type_userselect.Select_size_l{--select-element-height:calc(var(--space-3xl) - var(--space-2xs))}.Select_type_combobox.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_combobox.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_combobox.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_combobox.Select_size_l{--select-element-height:var(--space-2xl)}.Select_type_select.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_select.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_select.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_select.Select_size_l{--select-element-height:var(--space-2xl)}.Select_size_xs{--input-height:var(--control-height-xs);--input-space:calc(var(--control-space-xs)*0.5);--input-font-size:var(--control-text-size-xs);--tag-space:calc((var(--space-xs) - 1px)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5)}.Select_size_s{--input-height:var(--control-height-s);--input-space:calc(var(--control-space-s)*0.5);--input-font-size:var(--control-text-size-s);--tag-space:calc(var(--space-xs)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5)}.Select_size_m{--input-height:var(--control-height-m);--input-space:calc(var(--control-space-m)*0.5);--input-font-size:var(--control-text-size-m);--tag-space:calc(var(--space-s)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--space-2xl)*4.5 - var(--space-2xs)*4.5)}.Select_size_l{--input-height:var(--control-height-l);--input-space:calc(var(--control-space-l)*0.5);--input-font-size:var(--control-text-size-l);--tag-space:calc(var(--space-m)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--space-2xl)*4.5)}.Select_labelPosition_top{flex-direction:column}.Select_labelPosition_top>:not(:last-child){margin-bottom:var(--space-xs)}.Select_labelPosition_left{flex-direction:row}.Select_labelPosition_left .Select-Label{align-items:center;display:inline-flex;height:var(--input-height)}.Select_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.Select-Body{display:inline-flex;flex-direction:column;width:100%}.Select-Body .Select-Caption{margin-left:var(--caption-margin-left);margin-top:var(--space-2xs)}.Select-SelectContainer{--container-border-color:var(--color-control-bg-border-default);display:flex;position:relative;width:100%}.Select-SelectContainer_status_alert{--container-border-color:var(--color-bg-alert)}.Select-SelectContainer_status_success{--container-border-color:var(--color-bg-success)}.Select-SelectContainer_status_warning{--container-border-color:var(--color-bg-warning)}.Select-SelectContainer_view_default .Select-Control{background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_default .Select-Control:hover{border-color:var(--color-control-bg-border-default-hover)}.Select-SelectContainer_view_default.Select-SelectContainer_focused .Select-Control{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.Select-SelectContainer_multiple .Select-Control{height:auto;min-height:var(--input-height)}.Select-SelectContainer_form_round .Select-Control{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_brick .Select-Control{border-radius:0}.Select-SelectContainer_form_clear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0}.Select-SelectContainer_form_defaultClear .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius);border-right-width:0}.Select-SelectContainer_form_clearDefault .Select-Control{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_defaultBrick .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius)}.Select-SelectContainer_form_brickDefault .Select-Control{border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_roundBrick .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_brickRound .Select-Control{border-radius:0 calc(var(--input-height)/2) 99rem calc(var(--input-height)/2);padding-right:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_brickClear .Select-Control{border-radius:0;border-right-width:0}.Select-SelectContainer_form_clearBrick .Select-Control{border-left-width:0;border-radius:0}.Select-SelectContainer_form_clearRound .Select-Control{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_roundClear .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)*1.6)}.Select-SelectContainer_form_clearClear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_brickClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_defaultClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_roundClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clearBrick.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearDefault.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearRound.Select-SelectContainer_focused .Select-Control{box-shadow:calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_disabled .Select-Control{background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable);color:var(--color-control-typo-disable);pointer-events:none}.Select-SelectContainer_view_clear .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus,.Select-SelectContainer_view_clear .Select-Control:hover{color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled{pointer-events:none}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled .Select-Control{color:var(--color-control-typo-disable)}.Select-SelectContainer_view_clear.Select-SelectContainer_disabled .Select-Control{pointer-events:none}.Select-SelectContainer_view_default .Select-ControlValueContainer{padding:0 0 0 var(--input-space)}.Select-SelectContainer_form_round .Select-SelectContainer-IndicatorsDropdown{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_multiple .Select-ControlValueContainer{box-sizing:border-box;display:flex;line-height:1;padding-bottom:0;padding-top:0;position:relative}.Select-SelectContainer_multiple .Select-ControlValue{-ms-overflow-style:none;max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5);overflow-x:visible;overflow-y:auto;padding-top:calc(var(--tag-space) - var(--control-border-width));scrollbar-width:none;white-space:normal}.Select-SelectContainer_multiple .Select-ControlValue::-webkit-scrollbar{display:none}.Select-SelectContainer_multiple .Select-ControlValue_isUserSelect{display:flex;flex-wrap:wrap;padding-top:calc(var(--space-s)/4)}.Select_view_clear{--caption-margin-left:0}.Select-Delimiter{background-color:var(--color-control-bg-border-default);width:1px}.Select-Control{background:transparent;border:none;box-sizing:border-box;color:currentColor;cursor:pointer;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);height:var(--input-height);line-height:calc(var(--input-height) - var(--control-border-width));outline:none;padding:0;transition:border-color .15s,box-shadow .15s,background-color .15s;width:100%}.Select-Control:focus{outline:none}.Select-Indicators{display:flex;height:100%}.Select-IndicatorsDropdown{background-color:transparent;border:none;color:var(--color-control-typo-disable);cursor:pointer;display:block;margin:0;padding:0;text-align:center;width:var(--input-height)}.Select-IndicatorsDropdown:focus{outline:none}.Select-ControlInner{position:relative;width:100%}.Select-ControlValueContainer{background-color:transparent;border:none;bottom:0;color:inherit;font-size:var(--input-font-size);left:0;line-height:calc(var(--input-height) - 2px);margin:0;min-height:calc(var(--input-height) - 2px);padding:0;position:absolute;right:0;text-align:left;top:0}.Select-ControlValueContainer:focus{outline:none}.Select-Control[aria-expanded=true] .Select-IndicatorsDropdown{transform:rotate(180deg)}.Select-ControlValue,.Select-Placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-Placeholder{color:var(--color-control-typo-placeholder);font-size:var(--input-font-size);padding-right:var(--input-space);pointer-events:none;text-align:left}.Select-Placeholder_isHidden{opacity:0;visibility:hidden}.Select-Control_hasInput .Select-Placeholder{background-color:transparent;line-height:calc(var(--input-height) - 2px);position:absolute;top:0;width:calc(100% - var(--input-space))}.Select-DropdownIndicatorIcon{position:relative;top:1px}.Select-ClearIndicator{background-color:transparent;border:none;color:var(--color-control-typo-clear);cursor:pointer;margin:0;padding:0 var(--space-xs)}.Select-ClearIndicatorIcon{position:relative;top:1px}.Select-Input{background-color:transparent;border:none;color:inherit;font-family:inherit;font-size:inherit;line-height:calc(var(--input-height) - 2px);margin:0;outline:none;padding:0;position:relative;width:100%}.Select-Input_hide{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-Input_multiple{display:inline-flex;height:calc(var(--input-height) - var(--control-border-width)*2);line-height:1;line-height:calc(var(--input-height) - var(--control-border-width)*2);margin-top:calc(var(--tag-space)*-1);min-width:10px}.Select-Input_multiple.Select-Input_isUserSelect{margin-top:calc(var(--space-s)/4*-1)}.Select-FakeField{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-HelperInputFakeElement{display:inline-block;font-size:var(--input-font-size);height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectValueTag.js","names":["React","cn","Tag","cnSelectValueTag","SelectValueTag","props","handleRemove","size","label","disabled"],"sources":["../../../../../../src/components/SelectComponents/SelectValueTag/SelectValueTag.tsx"],"sourcesContent":["import './SelectValueTag.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Tag } from '../../Tag/Tag';\n\ntype SelectValueTagProps = {\n label: string;\n size: 's' | 'm' | 'l';\n children?: never;\n disabled?: boolean;\n handleRemove?: (e: React.SyntheticEvent) => void;\n};\n\nexport const cnSelectValueTag = cn('SelectValueTag');\n\nexport const SelectValueTag: React.FC<SelectValueTagProps> = (props) => {\n const { handleRemove = () => {}, size, label, disabled } = props;\n\n return (\n <Tag\n className={cnSelectValueTag({ size, disabled })}\n label={label}\n mode=\"cancel\"\n onCancel={handleRemove}\n size={size}\n />\n );\n};\n"],"mappings":"AAAA,6BAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,GAAT,qBAUA,MAAO,IAAMC,iBAAgB,CAAGF,EAAE,CAAC,gBAAD,CAA3B,CAEP,MAAO,IAAMG,eAA6C,CAAG,SAACC,CAAD,CAAW,CACtE,MAA2DA,CAA3D,CAAQC,YAAR,CAAQA,CAAR,YAAuB,UAAM,CAAE,CAA/B,GAAiCC,CAAjC,CAA2DF,CAA3D,CAAiCE,IAAjC,CAAuCC,CAAvC,CAA2DH,CAA3D,CAAuCG,KAAvC,CAA8CC,CAA9C,CAA2DJ,CAA3D,CAA8CI,QAA9C,CAEA,MACE,qBAAC,GAAD,EACE,SAAS,CAAEN,gBAAgB,CAAC,CAAEI,IAAI,CAAJA,CAAF,CAAQE,QAAQ,CAARA,CAAR,CAAD,CAD7B,CAEE,KAAK,CAAED,CAFT,CAGE,IAAI,CAAC,QAHP,CAIE,QAAQ,CAAEF,CAJZ,CAKE,IAAI,CAAEC,CALR,EAQH,CAZM"}
|
|
1
|
+
{"version":3,"file":"SelectValueTag.js","names":["React","cn","Tag","cnSelectValueTag","SelectValueTag","props","handleRemove","size","label","disabled"],"sources":["../../../../../../src/components/SelectComponents/SelectValueTag/SelectValueTag.tsx"],"sourcesContent":["import './SelectValueTag.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Tag } from '../../Tag/Tag';\n\ntype SelectValueTagProps = {\n label: string;\n size: 's' | 'm' | 'l' | 'xs';\n children?: never;\n disabled?: boolean;\n handleRemove?: (e: React.SyntheticEvent) => void;\n};\n\nexport const cnSelectValueTag = cn('SelectValueTag');\n\nexport const SelectValueTag: React.FC<SelectValueTagProps> = (props) => {\n const { handleRemove = () => {}, size, label, disabled } = props;\n\n return (\n <Tag\n className={cnSelectValueTag({ size, disabled })}\n label={label}\n mode=\"cancel\"\n onCancel={handleRemove}\n size={size}\n />\n );\n};\n"],"mappings":"AAAA,6BAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,GAAT,qBAUA,MAAO,IAAMC,iBAAgB,CAAGF,EAAE,CAAC,gBAAD,CAA3B,CAEP,MAAO,IAAMG,eAA6C,CAAG,SAACC,CAAD,CAAW,CACtE,MAA2DA,CAA3D,CAAQC,YAAR,CAAQA,CAAR,YAAuB,UAAM,CAAE,CAA/B,GAAiCC,CAAjC,CAA2DF,CAA3D,CAAiCE,IAAjC,CAAuCC,CAAvC,CAA2DH,CAA3D,CAAuCG,KAAvC,CAA8CC,CAA9C,CAA2DJ,CAA3D,CAA8CI,QAA9C,CAEA,MACE,qBAAC,GAAD,EACE,SAAS,CAAEN,gBAAgB,CAAC,CAAEI,IAAI,CAAJA,CAAF,CAAQE,QAAQ,CAARA,CAAR,CAAD,CAD7B,CAEE,KAAK,CAAED,CAFT,CAGE,IAAI,CAAC,QAHP,CAIE,QAAQ,CAAEF,CAJZ,CAKE,IAAI,CAAEC,CALR,EAQH,CAZM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["min","max","onChange","onAfterChange","value","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","status","caption","tooltipFormatter","className","style"];import"./Slider.css";import React,{forwardRef,useRef}from"react";import{
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["min","max","onChange","onAfterChange","value","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","status","caption","tooltipFormatter","className","style"];import"./Slider.css";import React,{forwardRef,useRef}from"react";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption";import{FieldLabel}from"../FieldLabel";import{useFlag}from"../../hooks/useFlag";import{useSortSteps}from"../../hooks/useSortSteps";import{cn}from"../../utils/bem";import{defaultPropSize,defaultTooltipFormatter,getIcon,getMaxForStartField,getMinForEndField,getOnChandgeForInput,getValueForInput}from"./helper";import{SliderInput}from"./SliderInput/SliderInput";import{SliderLine}from"./SliderLine/SliderLine";import{SliderPoint}from"./SliderPoint/SliderPoint";import{useSlider}from"./useSlider/useSlider";import{useSliderStationing}from"./useSliderStationing";var cnSlider=cn("Slider"),sizeMap={xs:"xs",s:"s",m:"m",l:"m"};export var COMPONENT_NAME="Slider";var SliderRender=function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.min,f=void 0===e?0:e,g=d.max,h=void 0===g?100:g,i=d.onChange,j=d.onAfterChange,k=d.value,l=d.step,m=d.disabled,n=void 0!==m&&m,o=d.size,p=void 0===o?defaultPropSize:o,q=d.view,r=void 0===q?"default":q,s=d.leftSide,t=d.rightSide,u=d.withTooltip,v=d.range,w=void 0!==v&&v,x=d.label,y=d.status,z=d.caption,A=d.tooltipFormatter,B=void 0===A?defaultTooltipFormatter:A,C=d.className,D=d.style,E=_objectWithoutProperties(d,_excluded),F=useFlag(!1),G=_slicedToArray(F,2),H=G[0],I=G[1],J=I.on,K=I.off,L=useRef(null),M=useRef(null),N=useSortSteps({step:l,min:f,max:h}),O=l?N:Math.abs((h-f)/100),P=getIcon(t),Q=getIcon(s),R=sizeMap[p],S=useSlider({disabled:n,range:w,value:k,min:f,max:h,step:O,onChange:i,onAfterChange:j,sliderRef:c,buttonRefs:[L,M]}),T=S.onKeyPress,U=S.onFocus,V=S.handlePress,W=S.onSliderClick,X=S.popoverPosition,Y=S.activeButton,Z=S.currentValue,$=useSliderStationing(1===Z.length?Z[0]:Z,f,h,r,w,O,[L,M],c),_=$.lineSizes,aa=$.buttonPositions,ba={role:"button",tabIndex:0,className:cnSlider("Control"),ref:c,onClick:W},ca=function(a){a?J():K()};return React.createElement("div",Object.assign({ref:b,className:cnSlider({size:p},[C]),style:D},E),x&&React.createElement(FieldLabel,{className:cnSlider("Label"),size:p},x),React.createElement("div",{className:cnSlider("Container")},("input"===s||Q)&&React.createElement("div",{className:cnSlider("Side",{position:"left"})},"input"===s&&React.createElement(SliderInput,{value:getValueForInput(a,0),onChange:getOnChandgeForInput(a,0),size:p,min:f,max:getMaxForStartField(a),status:y,step:O,disabled:n}),Q&&React.createElement(Q,{size:null!==R&&void 0!==R?R:void 0,view:"secondary"})),React.createElement("div",ba,React.createElement(SliderLine,{hovered:H||"number"==typeof Y,onHover:ca,lines:_,disabled:n,view:r}),Z.map(function(a,b){return React.createElement(SliderPoint,{hovered:H||"number"==typeof Y,buttonRef:L,popoverPosition:X[b],onKeyPress:T,onFocus:U,handlePress:V,disabled:n,position:aa[b],focused:Y===b,buttonLabel:b,withTooltip:u,onHover:ca,tooltipFormatter:B,value:a,role:"slider","aria-valuemin":f,"aria-valuemax":h,"aria-valuenow":a,tooltipZIndex:"number"==typeof(null===D||void 0===D?void 0:D.zIndex)?D.zIndex+1:void 0,key:cnSlider("Point",{index:b})})})),("input"===t||P)&&React.createElement("div",{className:cnSlider("Side",{position:"right"})},"input"===t&&React.createElement(SliderInput,{value:getValueForInput(a,1),onChange:getOnChandgeForInput(a,1),size:p,min:getMinForEndField(a),max:h,status:y,step:O,disabled:n}),P&&React.createElement(P,{size:R,view:"secondary"}))),z&&React.createElement(FieldCaption,{className:cnSlider("Caption"),status:y},z))};export var Slider=forwardRef(SliderRender);
|
|
2
2
|
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":["React","forwardRef","useRef","useFlag","useSortSteps","cn","getByMap","usePropsHandler","FieldCaption","FieldLabel","defaultPropSize","defaultTooltipFormatter","isNotRangeParams","SliderInput","SliderLine","SliderPoint","useSlider","useSliderStationing","cnSlider","sizeMap","xs","s","m","l","COMPONENT_NAME","SliderRender","props","ref","sliderRef","min","max","onChange","onAfterChange","value","stepProp","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","status","caption","tooltipFormatter","className","style","otherProps","isHovered","on","off","leftButtonRef","rightButtonRef","sortedSteps","Math","abs","IconRight","IconLeft","iconSize","buttonRefs","onKeyPress","onFocus","handlePress","onSliderClick","popoverPosition","activeButton","currentValue","length","lineSizes","buttonPositions","containerProps","role","tabIndex","onClick","changeHovered","position","params","map","val","index","zIndex","Slider"],"sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import './Slider.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { useFlag } from '../../hooks/useFlag/useFlag';\nimport { useSortSteps } from '../../hooks/useSortSteps/useSortSteps';\nimport { cn } from '../../utils/bem';\nimport { getByMap } from '../../utils/getByMap';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { FieldCaption } from '../FieldCaption/FieldCaption';\nimport { FieldLabel } from '../FieldLabel/FieldLabel';\nimport {\n defaultPropSize,\n defaultTooltipFormatter,\n isNotRangeParams,\n PropSize,\n SliderComponent,\n SliderProps,\n} from './helper';\nimport { SliderInput } from './SliderInput/SliderInput';\nimport { SliderLine } from './SliderLine/SliderLine';\nimport { SliderPoint } from './SliderPoint/SliderPoint';\nimport { ActiveButton } from './useSlider/helper';\nimport { useSlider } from './useSlider/useSlider';\nimport { useSliderStationing } from './useSliderStationing';\n\nconst cnSlider = cn('Slider');\n\nconst sizeMap: Record<PropSize, IconPropSize> = {\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'm',\n};\n\nexport const COMPONENT_NAME = 'Slider' as const;\n\nconst SliderRender = <RANGE extends boolean>(\n props: SliderProps<RANGE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const sliderRef = useRef<HTMLDivElement>(null);\n\n const {\n min = 0,\n max = 100,\n onChange,\n onAfterChange,\n value,\n step: stepProp,\n disabled = false,\n size = defaultPropSize,\n view = 'default',\n leftSide,\n rightSide,\n withTooltip,\n range = false,\n label,\n status,\n caption,\n tooltipFormatter = defaultTooltipFormatter,\n className,\n style,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, sliderRef);\n\n const [isHovered, { on, off }] = useFlag(false);\n\n const leftButtonRef = useRef<HTMLButtonElement>(null);\n const rightButtonRef = useRef<HTMLButtonElement>(null);\n\n const sortedSteps = useSortSteps({ step: stepProp, min, max });\n const step = stepProp ? sortedSteps : Math.abs((max - min) / 100);\n\n const IconRight = rightSide;\n const IconLeft = props.leftSide !== 'input' && props.leftSide;\n\n const iconSize = getByMap(sizeMap, size);\n\n const {\n onKeyPress,\n onFocus,\n handlePress,\n onSliderClick,\n popoverPosition,\n activeButton,\n currentValue,\n } = useSlider({\n disabled,\n range,\n value,\n min,\n max,\n step,\n onChange,\n onAfterChange,\n sliderRef,\n buttonRefs: [leftButtonRef, rightButtonRef],\n });\n\n const { lineSizes, buttonPositions } = useSliderStationing(\n currentValue.length === 1 ? currentValue[0] : currentValue,\n min,\n max,\n view,\n range,\n step,\n [leftButtonRef, rightButtonRef],\n sliderRef,\n );\n\n const containerProps = {\n role: 'button',\n tabIndex: 0,\n className: cnSlider('Control'),\n ref: sliderRef,\n onClick: onSliderClick,\n };\n\n const changeHovered = (status: boolean) => {\n if (status) on();\n else off();\n };\n\n return (\n <div\n ref={ref}\n className={cnSlider({ size }, [className])}\n style={style}\n {...otherProps}\n >\n {label && (\n <FieldLabel className={cnSlider('Label')} size={size}>\n {label}\n </FieldLabel>\n )}\n <div className={cnSlider('Container')}>\n {leftSide === 'input' && isNotRangeParams(props) && (\n <div className={cnSlider('Side', { position: 'left' })}>\n <SliderInput\n value={props.value}\n onChange={(params) =>\n isNotRangeParams(props) && props.onChange?.(params)\n }\n size={size}\n min={min}\n max={max}\n status={status}\n step={step}\n disabled={disabled}\n />\n </div>\n )}\n {IconLeft && (\n <div className={cnSlider('Side', { position: 'left' })}>\n <IconLeft size={iconSize ?? undefined} view=\"secondary\" />\n </div>\n )}\n <div {...containerProps}>\n <SliderLine\n hovered={isHovered || typeof activeButton === 'number'}\n onHover={changeHovered}\n lines={lineSizes}\n disabled={disabled}\n view={view}\n />\n {currentValue.map((val, index) => (\n <SliderPoint\n hovered={isHovered || typeof activeButton === 'number'}\n buttonRef={leftButtonRef}\n popoverPosition={popoverPosition[index]}\n onKeyPress={onKeyPress}\n onFocus={onFocus}\n handlePress={handlePress}\n disabled={disabled}\n position={buttonPositions[index]}\n focused={activeButton === index}\n buttonLabel={index as ActiveButton}\n withTooltip={withTooltip}\n onHover={changeHovered}\n tooltipFormatter={tooltipFormatter}\n value={val}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={val}\n tooltipZIndex={\n typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined\n }\n key={cnSlider('Point', { index })}\n />\n ))}\n </div>\n {IconRight && (\n <div className={cnSlider('Side', { position: 'right' })}>\n <IconRight size={iconSize} view=\"secondary\" />\n </div>\n )}\n </div>\n {caption && (\n <FieldCaption className={cnSlider('Caption')} status={status}>\n {caption}\n </FieldCaption>\n )}\n </div>\n );\n};\n\nexport const Slider = forwardRef(SliderRender) as SliderComponent;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.js","names":["React","forwardRef","useRef","usePropsHandler","FieldCaption","FieldLabel","useFlag","useSortSteps","cn","defaultPropSize","defaultTooltipFormatter","getIcon","getMaxForStartField","getMinForEndField","getOnChandgeForInput","getValueForInput","SliderInput","SliderLine","SliderPoint","useSlider","useSliderStationing","cnSlider","sizeMap","xs","s","m","l","COMPONENT_NAME","SliderRender","props","ref","sliderRef","min","max","onChange","onAfterChange","value","stepProp","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","status","caption","tooltipFormatter","className","style","otherProps","isHovered","on","off","leftButtonRef","rightButtonRef","sortedSteps","Math","abs","IconRight","IconLeft","iconSize","buttonRefs","onKeyPress","onFocus","handlePress","onSliderClick","popoverPosition","activeButton","currentValue","length","lineSizes","buttonPositions","containerProps","role","tabIndex","onClick","changeHovered","position","map","val","index","zIndex","Slider"],"sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import './Slider.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { usePropsHandler } from '##/components/EventInterceptor/usePropsHandler';\nimport { FieldCaption } from '##/components/FieldCaption';\nimport { FieldLabel } from '##/components/FieldLabel';\nimport { useFlag } from '##/hooks/useFlag';\nimport { useSortSteps } from '##/hooks/useSortSteps';\nimport { cn } from '##/utils/bem';\n\nimport {\n defaultPropSize,\n defaultTooltipFormatter,\n getIcon,\n getMaxForStartField,\n getMinForEndField,\n getOnChandgeForInput,\n getValueForInput,\n PropSize,\n SliderComponent,\n SliderProps,\n} from './helper';\nimport { SliderInput } from './SliderInput/SliderInput';\nimport { SliderLine } from './SliderLine/SliderLine';\nimport { SliderPoint } from './SliderPoint/SliderPoint';\nimport { ActiveButton } from './useSlider/helper';\nimport { useSlider } from './useSlider/useSlider';\nimport { useSliderStationing } from './useSliderStationing';\n\nconst cnSlider = cn('Slider');\n\nconst sizeMap: Record<PropSize, IconPropSize> = {\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'm',\n};\n\nexport const COMPONENT_NAME = 'Slider' as const;\n\nconst SliderRender = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const sliderRef = useRef<HTMLDivElement>(null);\n\n const {\n min = 0,\n max = 100,\n onChange,\n onAfterChange,\n value,\n step: stepProp,\n disabled = false,\n size = defaultPropSize,\n view = 'default',\n leftSide,\n rightSide,\n withTooltip,\n range = false,\n label,\n status,\n caption,\n tooltipFormatter = defaultTooltipFormatter,\n className,\n style,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, sliderRef);\n\n const [isHovered, { on, off }] = useFlag(false);\n const leftButtonRef = useRef<HTMLButtonElement>(null);\n const rightButtonRef = useRef<HTMLButtonElement>(null);\n const sortedSteps = useSortSteps({ step: stepProp, min, max });\n const step = stepProp ? sortedSteps : Math.abs((max - min) / 100);\n const IconRight = getIcon(rightSide);\n const IconLeft = getIcon(leftSide);\n const iconSize = sizeMap[size];\n\n const {\n onKeyPress,\n onFocus,\n handlePress,\n onSliderClick,\n popoverPosition,\n activeButton,\n currentValue,\n } = useSlider({\n disabled,\n range,\n value,\n min,\n max,\n step,\n onChange,\n onAfterChange,\n sliderRef,\n buttonRefs: [leftButtonRef, rightButtonRef],\n });\n\n const { lineSizes, buttonPositions } = useSliderStationing(\n currentValue.length === 1 ? currentValue[0] : currentValue,\n min,\n max,\n view,\n range,\n step,\n [leftButtonRef, rightButtonRef],\n sliderRef,\n );\n\n const containerProps = {\n role: 'button',\n tabIndex: 0,\n className: cnSlider('Control'),\n ref: sliderRef,\n onClick: onSliderClick,\n };\n\n const changeHovered = (status: boolean) => {\n if (status) on();\n else off();\n };\n\n return (\n <div\n ref={ref}\n className={cnSlider({ size }, [className])}\n style={style}\n {...otherProps}\n >\n {label && (\n <FieldLabel className={cnSlider('Label')} size={size}>\n {label}\n </FieldLabel>\n )}\n <div className={cnSlider('Container')}>\n {(leftSide === 'input' || IconLeft) && (\n <div className={cnSlider('Side', { position: 'left' })}>\n {leftSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 0)}\n onChange={getOnChandgeForInput(props, 0)}\n size={size}\n min={min}\n max={getMaxForStartField(props)}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconLeft && (\n <IconLeft size={iconSize ?? undefined} view=\"secondary\" />\n )}\n </div>\n )}\n <div {...containerProps}>\n <SliderLine\n hovered={isHovered || typeof activeButton === 'number'}\n onHover={changeHovered}\n lines={lineSizes}\n disabled={disabled}\n view={view}\n />\n {currentValue.map((val, index) => (\n <SliderPoint\n hovered={isHovered || typeof activeButton === 'number'}\n buttonRef={leftButtonRef}\n popoverPosition={popoverPosition[index]}\n onKeyPress={onKeyPress}\n onFocus={onFocus}\n handlePress={handlePress}\n disabled={disabled}\n position={buttonPositions[index]}\n focused={activeButton === index}\n buttonLabel={index as ActiveButton}\n withTooltip={withTooltip}\n onHover={changeHovered}\n tooltipFormatter={tooltipFormatter}\n value={val}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={val}\n tooltipZIndex={\n typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined\n }\n key={cnSlider('Point', { index })}\n />\n ))}\n </div>\n {(rightSide === 'input' || IconRight) && (\n <div className={cnSlider('Side', { position: 'right' })}>\n {rightSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 1)}\n onChange={getOnChandgeForInput(props, 1)}\n size={size}\n min={getMinForEndField(props)}\n max={max}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconRight && <IconRight size={iconSize} view=\"secondary\" />}\n </div>\n )}\n </div>\n {caption && (\n <FieldCaption className={cnSlider('Caption')} status={status}>\n {caption}\n </FieldCaption>\n )}\n </div>\n );\n};\n\nexport const Slider = forwardRef(SliderRender) as SliderComponent;\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TextFieldProps } from '../../TextField/TextField';
|
|
3
3
|
declare type Props = Omit<TextFieldProps<'number'>, 'value' | 'onChange' | 'min' | 'max' | 'step'> & {
|
|
4
|
-
value
|
|
4
|
+
value?: number;
|
|
5
5
|
step?: number | number[];
|
|
6
6
|
min?: number;
|
|
7
7
|
max?: number;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["value","onChange","min","max","step"];import React,{useEffect,useState}from"react";import{TextField}from"../../TextField/TextField";import{getValidValue,isValidValue}from"../useSlider/helper";export var SliderInput=function(a){var b=a.value,c=a.onChange,d=a.min,f=void 0===d?0:d,g=a.max,h=void 0===g?100:g,i=a.step,j=void 0===i?1:i,k=_objectWithoutProperties(a,_excluded),l=useState(b.toString()),m=_slicedToArray(l,2),n=m[0],o=m[1];return useEffect(function(){return o(b.toString())},[b]),React.createElement(TextField,Object.assign({onBlur:function commitChange(){var a=getValidValue(+n,f,h,j);null===c||void 0===c?void 0:c({value:a}),o(a.toString())},type:"number",min:f,max:h,step:j,onChange:function handleChange(a){var b=a.e,d=a.value;o(d),isValidValue(+d,f,h,j)&&(null===c||void 0===c?void 0:c({value:+d,e:b}))},value:n},k))};
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["value","onChange","min","max","step"];import React,{useEffect,useState}from"react";import{TextField}from"../../TextField/TextField";import{getValidValue,isValidValue}from"../useSlider/helper";export var SliderInput=function(a){var b=a.value,c=a.onChange,d=a.min,f=void 0===d?0:d,g=a.max,h=void 0===g?100:g,i=a.step,j=void 0===i?1:i,k=_objectWithoutProperties(a,_excluded),l=useState((null===b||void 0===b?void 0:b.toString())||null),m=_slicedToArray(l,2),n=m[0],o=m[1];return useEffect(function(){return o((null===b||void 0===b?void 0:b.toString())||null)},[b]),React.createElement(TextField,Object.assign({onBlur:function commitChange(){var a=getValidValue(+n,f,h,j);null===c||void 0===c?void 0:c({value:a}),o(a.toString())},type:"number",min:f,max:h,step:j,onChange:function handleChange(a){var b=a.e,d=a.value;o(d),isValidValue(+d,f,h,j)&&(null===c||void 0===c?void 0:c({value:+d,e:b}))},value:n},k))};
|
|
2
2
|
//# sourceMappingURL=SliderInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderInput.js","names":["React","useEffect","useState","TextField","getValidValue","isValidValue","SliderInput","props","value","onChange","min","max","step","otherProps","toString","currentValue","setCurrentValue","commitChange","validatedValue","handleChange","e"],"sources":["../../../../../../src/components/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport {\n TextField,\n TextFieldOnChangeArguments,\n TextFieldProps,\n} from '../../TextField/TextField';\nimport { getValidValue, isValidValue } from '../useSlider/helper';\n\ntype Props = Omit<\n TextFieldProps<'number'>,\n 'value' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n value
|
|
1
|
+
{"version":3,"file":"SliderInput.js","names":["React","useEffect","useState","TextField","getValidValue","isValidValue","SliderInput","props","value","onChange","min","max","step","otherProps","toString","currentValue","setCurrentValue","commitChange","validatedValue","handleChange","e"],"sources":["../../../../../../src/components/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport {\n TextField,\n TextFieldOnChangeArguments,\n TextFieldProps,\n} from '../../TextField/TextField';\nimport { getValidValue, isValidValue } from '../useSlider/helper';\n\ntype Props = Omit<\n TextFieldProps<'number'>,\n 'value' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n value?: number;\n step?: number | number[];\n min?: number;\n max?: number;\n onChange?: (props: {\n e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;\n value: number;\n }) => void;\n};\n\nexport const SliderInput = (props: Props) => {\n const {\n value,\n onChange,\n min = 0,\n max = 100,\n step = 1,\n ...otherProps\n } = props;\n\n const [currentValue, setCurrentValue] = useState<string | null>(\n value?.toString() || null,\n );\n\n const handleChange = ({ e, value }: TextFieldOnChangeArguments) => {\n setCurrentValue(value);\n if (isValidValue(Number(value), min, max, step)) {\n onChange?.({ value: Number(value), e });\n }\n };\n\n const commitChange = () => {\n const validatedValue = getValidValue(Number(currentValue), min, max, step);\n onChange?.({ value: validatedValue });\n setCurrentValue(validatedValue.toString());\n };\n\n useEffect(() => setCurrentValue(value?.toString() || null), [value]);\n\n return (\n <TextField\n onBlur={commitChange}\n type=\"number\"\n min={min}\n max={max}\n step={step}\n onChange={handleChange}\n value={currentValue}\n {...otherProps}\n />\n );\n};\n"],"mappings":"4MAAA,MAAOA,MAAP,EAAgBC,SAAhB,CAA2BC,QAA3B,KAA2C,OAA3C,CAEA,OACEC,SADF,iCAKA,OAASC,aAAT,CAAwBC,YAAxB,2BAgBA,MAAO,IAAMC,YAAW,CAAG,SAACC,CAAD,CAAkB,IAEzCC,EAFyC,CAQvCD,CARuC,CAEzCC,KAFyC,CAGzCC,CAHyC,CAQvCF,CARuC,CAGzCE,QAHyC,GAQvCF,CARuC,CAIzCG,GAJyC,CAIzCA,CAJyC,YAInC,CAJmC,KAQvCH,CARuC,CAKzCI,GALyC,CAKzCA,CALyC,YAKnC,GALmC,KAQvCJ,CARuC,CAMzCK,IANyC,CAMzCA,CANyC,YAMlC,CANkC,GAOtCC,CAPsC,0BAQvCN,CARuC,cAUHL,QAAQ,CAC9C,QAAAM,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEM,QAAP,KAAqB,IADyB,CAVL,uBAUpCC,CAVoC,MAUtBC,CAVsB,MA6B3C,MAFAf,UAAS,CAAC,iBAAMe,EAAe,CAAC,QAAAR,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEM,QAAP,KAAqB,IAAtB,CAArB,CAAD,CAAmD,CAACN,CAAD,CAAnD,CAET,CACE,oBAAC,SAAD,gBACE,MAAM,CAVW,QAAfS,aAAe,EAAM,CACzB,GAAMC,EAAc,CAAGd,aAAa,EAAQW,CAAR,CAAuBL,CAAvB,CAA4BC,CAA5B,CAAiCC,CAAjC,CAApC,CADyB,OAEzBH,CAFyB,WAEzBA,CAFyB,QAEzBA,CAAQ,CAAG,CAAED,KAAK,CAAEU,CAAT,CAAH,CAFiB,CAGzBF,CAAe,CAACE,CAAc,CAACJ,QAAf,EAAD,CAChB,CAKC,CAEE,IAAI,CAAC,QAFP,CAGE,GAAG,CAAEJ,CAHP,CAIE,GAAG,CAAEC,CAJP,CAKE,IAAI,CAAEC,CALR,CAME,QAAQ,CAtBS,QAAfO,aAAe,GAA8C,IAA3CC,EAA2C,GAA3CA,CAA2C,CAAxCZ,CAAwC,GAAxCA,KAAwC,CACjEQ,CAAe,CAACR,CAAD,CADkD,CAE7DH,YAAY,EAAQG,CAAR,CAAgBE,CAAhB,CAAqBC,CAArB,CAA0BC,CAA1B,CAFiD,UAG/DH,CAH+D,WAG/DA,CAH+D,QAG/DA,CAAQ,CAAG,CAAED,KAAK,EAASA,CAAhB,CAAwBY,CAAC,CAADA,CAAxB,CAAH,CAHuD,CAKlE,CAWC,CAOE,KAAK,CAAEL,CAPT,EAQMF,CARN,EAWH,CAzCM"}
|
|
@@ -15,6 +15,7 @@ export declare type PropOnChange<RANGE> = (prop: {
|
|
|
15
15
|
value: SliderValue<RANGE>;
|
|
16
16
|
}) => void;
|
|
17
17
|
declare type PropToolipFormatter = (value: number | undefined) => string;
|
|
18
|
+
declare type Side = IconComponent | 'input';
|
|
18
19
|
declare type Props<RANGE extends boolean = false> = {
|
|
19
20
|
className?: string;
|
|
20
21
|
step?: number | number[];
|
|
@@ -31,9 +32,9 @@ declare type Props<RANGE extends boolean = false> = {
|
|
|
31
32
|
max?: number;
|
|
32
33
|
onChange?: PropOnChange<RANGE>;
|
|
33
34
|
onAfterChange?: PropOnChange<RANGE>;
|
|
34
|
-
leftSide?:
|
|
35
|
+
leftSide?: Side;
|
|
35
36
|
tooltipFormatter?: PropToolipFormatter;
|
|
36
|
-
rightSide?:
|
|
37
|
+
rightSide?: Side;
|
|
37
38
|
};
|
|
38
39
|
export declare type Line = {
|
|
39
40
|
width: number;
|
|
@@ -65,12 +66,19 @@ export declare type SliderPointProps = PropsWithHTMLAttributes<{
|
|
|
65
66
|
tooltipZIndex?: number;
|
|
66
67
|
}, HTMLButtonElement>;
|
|
67
68
|
export declare type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<Props<RANGE>, HTMLDivElement>;
|
|
68
|
-
export declare type SliderComponent = <RANGE extends boolean>(props: SliderProps<RANGE>) => React.ReactElement | null;
|
|
69
|
-
export declare const isRangeParams: (params: Props<boolean>) => params is Props<true>;
|
|
70
|
-
export declare const isNotRangeParams: (params: Props<boolean>) => params is Props<false>;
|
|
69
|
+
export declare type SliderComponent = <RANGE extends boolean = false>(props: SliderProps<RANGE>) => React.ReactElement | null;
|
|
71
70
|
export declare const defaultTooltipFormatter: PropToolipFormatter;
|
|
72
71
|
export declare type TrackPosition = {
|
|
73
72
|
x: number;
|
|
74
73
|
y: number;
|
|
75
74
|
} | null;
|
|
75
|
+
export declare const getValueForInput: (props: SliderProps<boolean>, field: 0 | 1) => number;
|
|
76
|
+
declare type GetOnChandgeForInputReturned = (props: {
|
|
77
|
+
e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;
|
|
78
|
+
value: number;
|
|
79
|
+
}) => void;
|
|
80
|
+
export declare const getOnChandgeForInput: (props: SliderProps<boolean>, field: 0 | 1) => GetOnChandgeForInputReturned;
|
|
81
|
+
export declare const getIcon: (side?: Side) => IconComponent | undefined;
|
|
82
|
+
export declare const getMaxForStartField: (props: SliderProps<boolean>) => number | undefined;
|
|
83
|
+
export declare const getMinForEndField: (props: SliderProps<boolean>) => number | undefined;
|
|
76
84
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var propStatus=["alert","warning","success"];export var defaultPropStatus=propStatus[0];export var propSize=["s","xs","m","l"];export var defaultPropSize=propSize[0];
|
|
1
|
+
export var propStatus=["alert","warning","success"];export var defaultPropStatus=propStatus[0];export var propSize=["s","xs","m","l"];export var defaultPropSize=propSize[0];var isRangeParams=function(a){return!!a.range},isNotRangeParams=function(a){return!a.range};export var defaultTooltipFormatter=function(a){return(null===a||void 0===a?void 0:a.toString())||""};export var getValueForInput=function(a,b){return isRangeParams(a)?a.value[b]:a.value};export var getOnChandgeForInput=function(a,b){return function(c){var d=c.e,e=c.value;a.onChange&&(isNotRangeParams(a)&&a.onChange({e:d,value:e}),isRangeParams(a)&&a.onChange({e:d,value:b?[a.value[0],e]:[e,a.value[1]]}))}};export var getIcon=function(a){if("input"!==a)return a};export var getMaxForStartField=function(a){return isNotRangeParams(a)?a.max:isRangeParams(a)?a.value[1]:void 0};export var getMinForEndField=function(a){return isNotRangeParams(a)?a.min:isRangeParams(a)?a.value[0]:void 0};
|
|
2
2
|
//# sourceMappingURL=helper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helper.js","names":["propStatus","defaultPropStatus","propSize","defaultPropSize","isRangeParams","params","range","isNotRangeParams","defaultTooltipFormatter","value","toString"],"sources":["../../../../../src/components/Slider/helper.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { ActiveButton } from './useSlider/helper';\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const defaultPropStatus = propStatus[0];\n\nexport type PropView = 'default' | 'division';\n\nexport const propSize = ['s', 'xs', 'm', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize: PropSize = propSize[0];\n\nexport type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;\n\nexport type PropOnChange<RANGE> = (prop: {\n e?:\n | Event\n | React.TouchEvent\n | React.MouseEvent\n | React.KeyboardEvent\n | React.ChangeEvent;\n value: SliderValue<RANGE>;\n}) => void;\n\ntype PropToolipFormatter = (value: number | undefined) => string;\n\ntype Props<RANGE extends boolean = false> = {\n className?: string;\n step?: number | number[];\n view?: PropView;\n disabled?: boolean;\n range?: RANGE;\n withTooltip?: boolean;\n value: SliderValue<RANGE>;\n label?: string;\n caption?: string;\n status?: PropStatus;\n min?: number;\n size?: PropSize;\n max?: number;\n onChange?: PropOnChange<RANGE>;\n onAfterChange?: PropOnChange<RANGE>;\n leftSide?:
|
|
1
|
+
{"version":3,"file":"helper.js","names":["propStatus","defaultPropStatus","propSize","defaultPropSize","isRangeParams","params","range","isNotRangeParams","defaultTooltipFormatter","value","toString","getValueForInput","props","field","getOnChandgeForInput","e","onChange","getIcon","side","getMaxForStartField","max","getMinForEndField","min"],"sources":["../../../../../src/components/Slider/helper.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { ActiveButton } from './useSlider/helper';\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const defaultPropStatus = propStatus[0];\n\nexport type PropView = 'default' | 'division';\n\nexport const propSize = ['s', 'xs', 'm', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize: PropSize = propSize[0];\n\nexport type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;\n\nexport type PropOnChange<RANGE> = (prop: {\n e?:\n | Event\n | React.TouchEvent\n | React.MouseEvent\n | React.KeyboardEvent\n | React.ChangeEvent;\n value: SliderValue<RANGE>;\n}) => void;\n\ntype PropToolipFormatter = (value: number | undefined) => string;\n\ntype Side = IconComponent | 'input';\n\ntype Props<RANGE extends boolean = false> = {\n className?: string;\n step?: number | number[];\n view?: PropView;\n disabled?: boolean;\n range?: RANGE;\n withTooltip?: boolean;\n value: SliderValue<RANGE>;\n label?: string;\n caption?: string;\n status?: PropStatus;\n min?: number;\n size?: PropSize;\n max?: number;\n onChange?: PropOnChange<RANGE>;\n onAfterChange?: PropOnChange<RANGE>;\n leftSide?: Side;\n tooltipFormatter?: PropToolipFormatter;\n rightSide?: Side;\n};\n\nexport type Line = {\n width: number;\n active: boolean;\n size?: number[];\n};\n\nexport type SliderLineProps = {\n view?: PropView;\n lines: Line[];\n disabled?: boolean;\n hovered?: boolean;\n onHover?: (hovered: boolean) => void;\n};\n\nexport type SliderPointProps = PropsWithHTMLAttributes<\n {\n value?: number;\n disabled?: boolean;\n focused?: boolean;\n hovered?: boolean;\n withTooltip?: boolean;\n handlePress?: (typeButton: ActiveButton) => void;\n buttonLabel?: ActiveButton;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n popoverPosition?: TrackPosition;\n tooltipFormatter?: PropToolipFormatter;\n onFocus?: (\n e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent,\n button: ActiveButton,\n ) => void;\n onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;\n onHover?: (hovered: boolean) => void;\n position: number;\n tooltipZIndex?: number;\n },\n HTMLButtonElement\n>;\n\nexport type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<\n Props<RANGE>,\n HTMLDivElement\n>;\n\nexport type SliderComponent = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n) => React.ReactElement | null;\n\nconst isRangeParams = (params: Props<boolean>): params is Props<true> => {\n return !!params.range;\n};\n\nconst isNotRangeParams = (params: Props<boolean>): params is Props<false> => {\n return !params.range;\n};\n\nexport const defaultTooltipFormatter: PropToolipFormatter = (value) =>\n value?.toString() || '';\n\nexport type TrackPosition = {\n x: number;\n y: number;\n} | null;\n\nexport const getValueForInput = (\n props: SliderProps<boolean>,\n field: 0 | 1,\n): number => {\n if (isRangeParams(props)) {\n return props.value[field];\n }\n return props.value as number;\n};\n\ntype GetOnChandgeForInputReturned = (props: {\n e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;\n value: number;\n}) => void;\n\nexport const getOnChandgeForInput =\n (props: SliderProps<boolean>, field: 0 | 1): GetOnChandgeForInputReturned =>\n ({ e, value }) => {\n if (!props.onChange) {\n return;\n }\n if (isNotRangeParams(props)) {\n props.onChange({ e, value });\n }\n if (isRangeParams(props)) {\n props.onChange({\n e,\n value: field ? [props.value[0], value] : [value, props.value[1]],\n });\n }\n };\n\nexport const getIcon = (side?: Side) => {\n if (side !== 'input') {\n return side;\n }\n};\n\nexport const getMaxForStartField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.max;\n }\n if (isRangeParams(props)) {\n return props.value[1];\n }\n};\n\nexport const getMinForEndField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.min;\n }\n if (isRangeParams(props)) {\n return props.value[0];\n }\n};\n"],"mappings":"AAMA,MAAO,IAAMA,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB,CAEP,MAAO,IAAMC,kBAAiB,CAAGD,UAAU,CAAC,CAAD,CAApC,CAIP,MAAO,IAAME,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAyB,CAAGD,QAAQ,CAAC,CAAD,CAA1C,C,GAsFDE,cAAa,CAAG,SAACC,CAAD,CAAmD,CACvE,MAAO,CAAC,CAACA,CAAM,CAACC,KACjB,C,CAEKC,gBAAgB,CAAG,SAACF,CAAD,CAAoD,CAC3E,MAAO,CAACA,CAAM,CAACC,KAChB,C,CAED,MAAO,IAAME,wBAA4C,CAAG,SAACC,CAAD,QAC1D,QAAAA,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEC,QAAP,KAAqB,EADqC,CAArD,CAQP,MAAO,IAAMC,iBAAgB,CAAG,SAC9BC,CAD8B,CAE9BC,CAF8B,CAGnB,OACPT,cAAa,CAACQ,CAAD,CADN,CAEFA,CAAK,CAACH,KAAN,CAAYI,CAAZ,CAFE,CAIJD,CAAK,CAACH,KACd,CARM,CAeP,MAAO,IAAMK,qBAAoB,CAC/B,SAACF,CAAD,CAA8BC,CAA9B,QACA,YAAkB,IAAfE,EAAe,GAAfA,CAAe,CAAZN,CAAY,GAAZA,KAAY,CACXG,CAAK,CAACI,QADK,GAIZT,gBAAgB,CAACK,CAAD,CAJJ,EAKdA,CAAK,CAACI,QAAN,CAAe,CAAED,CAAC,CAADA,CAAF,CAAKN,KAAK,CAALA,CAAL,CAAf,CALc,CAOZL,aAAa,CAACQ,CAAD,CAPD,EAQdA,CAAK,CAACI,QAAN,CAAe,CACbD,CAAC,CAADA,CADa,CAEbN,KAAK,CAAEI,CAAK,CAAG,CAACD,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAD,CAAiBA,CAAjB,CAAH,CAA6B,CAACA,CAAD,CAAQG,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAR,CAF5B,CAAf,CARc,CAajB,CAdD,CADK,CAiBP,MAAO,IAAMQ,QAAO,CAAG,SAACC,CAAD,CAAiB,CACtC,GAAa,OAAT,GAAAA,CAAJ,CACE,MAAOA,EAEV,CAJM,CAMP,MAAO,IAAMC,oBAAmB,CAAG,SAACP,CAAD,CAAiC,OAC9DL,iBAAgB,CAACK,CAAD,CAD8C,CAEzDA,CAAK,CAACQ,GAFmD,CAI9DhB,aAAa,CAACQ,CAAD,CAJiD,CAKzDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALyD,OAOnE,CAPM,CASP,MAAO,IAAMY,kBAAiB,CAAG,SAACT,CAAD,CAAiC,OAC5DL,iBAAgB,CAACK,CAAD,CAD4C,CAEvDA,CAAK,CAACU,GAFiD,CAI5DlB,aAAa,CAACQ,CAAD,CAJ+C,CAKvDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALuD,OAOjE,CAPM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";import{useMutableRef}from"../../../hooks/useMutableRef/useMutableRef";import{getActiveValue,getNewValue,getValidValue,getValueByPosition,isNotRangeParams,isRangeParams,trackPosition}from"./helper";export var COUNT_STEPS=250;export function useSlider(a){var b=a.disabled,c=a.range,d=a.value,f=a.min,g=a.max,h=a.step,i=void 0===h?1:h,j=a.onChange,k=a.onAfterChange,l=a.sliderRef,m=a.buttonRefs,n=g>f?f:0,o=g>f?g:100,p=useMemo(function(){if(!Array.isArray(i)&&1<=i){var a=Math.abs((o-n)/COUNT_STEPS);return a>i?a-a%i:Math.max(a,i)}return i},[g,f,i]),q=useState(d),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(null),v=_slicedToArray(u,2),w=v[0],y=v[1],z=useState(null),A=_slicedToArray(z,2),B=A[0],C=A[1],D=useRef(null),E=useComponentSize(l),F=useMutableRef(s);useEffect(function(){b&&G("remove")},[b]);var G=function(a){var b="add"===a?"addEventListener":"removeEventListener";document[b]("mouseup",L),document[b]("touchend",L),document[b]("mousemove",K),document[b]("touchmove",K)};useEffect(function(){Array.isArray(s)?(I(s[0],0),I(s[1],1)):I(s,0)},[s]),useEffect(function(){JSON.stringify(d)!==JSON.stringify(s)&&(t(d),I(getActiveValue(d,D.current),0),D.current=null)},[d]),useEffect(function(){null===j||void 0===j?void 0:j({value:Array.isArray(s)?[getNewValue(s[0],s[0],i,f,g,0),getNewValue(s[1],s[1],i,f,g,1)]:getNewValue(s,s,i,f,g,0)})},[i]),useEffect(function(){if("undefined"!=typeof d){var b=isRangeParams(a)?[getValidValue(a.value[0],f,g,i),getValidValue(a.value[1],f,g,i)]:getValidValue(a.value,f,g,i);t(b)}},[c,typeof d]),useEffect(function(){if(isRangeParams(a)&&a.value[0]>a.value[1]){var b,c=[a.value[1],a.value[1]];null===(b=a.onChange)||void 0===b?void 0:b.call(a,{value:c})}},[]);var H=useCallback(function(a,c){if(!b&&"number"==typeof c&&"undefined"!=typeof s){var d=Array.isArray(i)?1:i||1,e=!1,h=getActiveValue(s,c);switch(a.key){case"ArrowUp":case"ArrowRight":case"+":e=!0;break;case"ArrowLeft":case"ArrowDown":case"-":e=!0,d*=-1;break;default:}if(e){Array.isArray(i)&&i.forEach(function(a,b){"number"==typeof c&&h===a&&(0<=d?0===b?d=i[1]-n:d=("undefined"==typeof i[b+1]?o:i[b+1])-a:0===b?d=n-i[1]:d=("undefined"==typeof i[b-1]?n:i[b-1])-a)});var k=getNewValue(h+d,s,i,f,g,c);t(k),I(getActiveValue(k,c),c),null===j||void 0===j?void 0:j({e:a,value:k})}}},[s,i,f,g]),I=function(a,b){if(l.current&&"number"==typeof b){var c=m[b].current||l.current,d=l.current.getBoundingClientRect(),e=d.x,f=d.width,g={y:c.offsetTop+c.offsetHeight+50,x:e+Math.abs((a-n)/(o-n))*f};0===b?y(g):C(g)}},J=function(a){if("number"!=typeof D.current)return d;var b=trackPosition(a),c=getValueByPosition(b,l,n,o,i);return getNewValue(c,s,p,f,g,D.current)},K=function(a,b){var c=b||D.current;if("number"==typeof c){var d=J(a),e=getActiveValue(s,c),f=getActiveValue(d,c);t(d),e!==f&&(null===k||void 0===k?void 0:k({e:a,value:d}))}};useEffect(function(){isRangeParams(a)
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";import{useMutableRef}from"../../../hooks/useMutableRef/useMutableRef";import{getActiveValue,getNewValue,getValidValue,getValueByPosition,isNotRangeParams,isRangeParams,trackPosition}from"./helper";export var COUNT_STEPS=250;export function useSlider(a){var b=a.disabled,c=a.range,d=a.value,f=a.min,g=a.max,h=a.step,i=void 0===h?1:h,j=a.onChange,k=a.onAfterChange,l=a.sliderRef,m=a.buttonRefs,n=g>f?f:0,o=g>f?g:100,p=useMemo(function(){if(!Array.isArray(i)&&1<=i){var a=Math.abs((o-n)/COUNT_STEPS);return a>i?a-a%i:Math.max(a,i)}return i},[g,f,i]),q=useState(d),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(null),v=_slicedToArray(u,2),w=v[0],y=v[1],z=useState(null),A=_slicedToArray(z,2),B=A[0],C=A[1],D=useRef(null),E=useComponentSize(l),F=useMutableRef(s);useEffect(function(){b&&G("remove")},[b]);var G=function(a){var b="add"===a?"addEventListener":"removeEventListener";document[b]("mouseup",L),document[b]("touchend",L),document[b]("mousemove",K),document[b]("touchmove",K)};useEffect(function(){Array.isArray(s)?(I(s[0],0),I(s[1],1)):I(s,0)},[s]),useEffect(function(){JSON.stringify(d)!==JSON.stringify(s)&&(t(d),I(getActiveValue(d,D.current),0),D.current=null)},[d]),useEffect(function(){null===j||void 0===j?void 0:j({value:Array.isArray(s)?[getNewValue(s[0],s[0],i,f,g,0),getNewValue(s[1],s[1],i,f,g,1)]:getNewValue(s,s,i,f,g,0)})},[i]),useEffect(function(){if("undefined"!=typeof d){var b=isRangeParams(a)?[getValidValue(a.value[0],f,g,i),getValidValue(a.value[1],f,g,i)]:getValidValue(a.value,f,g,i);t(b)}},[c,typeof d]),useEffect(function(){if(isRangeParams(a)&&a.value[0]>a.value[1]){var b,c=[a.value[1],a.value[1]];null===(b=a.onChange)||void 0===b?void 0:b.call(a,{value:c})}},[]);var H=useCallback(function(a,c){if(!b&&"number"==typeof c&&"undefined"!=typeof s){var d=Array.isArray(i)?1:i||1,e=!1,h=getActiveValue(s,c);switch(a.key){case"ArrowUp":case"ArrowRight":case"+":e=!0;break;case"ArrowLeft":case"ArrowDown":case"-":e=!0,d*=-1;break;default:}if(e){Array.isArray(i)&&i.forEach(function(a,b){"number"==typeof c&&h===a&&(0<=d?0===b?d=i[1]-n:d=("undefined"==typeof i[b+1]?o:i[b+1])-a:0===b?d=n-i[1]:d=("undefined"==typeof i[b-1]?n:i[b-1])-a)});var k=getNewValue(h+d,s,i,f,g,c);t(k),I(getActiveValue(k,c),c),null===j||void 0===j?void 0:j({e:a,value:k})}}},[s,i,f,g]),I=function(a,b){if(l.current&&"number"==typeof b){var c=m[b].current||l.current,d=l.current.getBoundingClientRect(),e=d.x,f=d.width,g={y:c.offsetTop+c.offsetHeight+50,x:e+Math.abs((a-n)/(o-n))*f};0===b?y(g):C(g)}},J=function(a){if("number"!=typeof D.current)return d;var b=trackPosition(a),c=getValueByPosition(b,l,n,o,i);return getNewValue(c,s,p,f,g,D.current)},K=function(a,b){var c=b||D.current;if("number"==typeof c){var d=J(a),e=getActiveValue(s,c),f=getActiveValue(d,c);t(d),e!==f&&(null===k||void 0===k?void 0:k({e:a,value:d}))}};useEffect(function(){if(isRangeParams(a)){var b;null===(b=a.value)||void 0===b?void 0:b.forEach(function(a,b){I(getActiveValue(a,D.current),0===b?0:1)})}isNotRangeParams(a)&&I(getActiveValue(d,D.current),0),D.current=null},[E,typeof d]);var L=useCallback(function(b){if(G("remove"),isRangeParams(a)&&Array.isArray(F.current)){var c,d=_toConsumableArray(F.current).sort(function(c,a){return+c-+a});null===(c=a.onChange)||void 0===c?void 0:c.call(a,{e:b,value:d})}if(isNotRangeParams(a)&&"number"==typeof F.current){var e;null===(e=a.onChange)||void 0===e?void 0:e.call(a,{e:b,value:F.current})}D.current=null},[F,d,j,K]),M=useCallback(function(a){b||(D.current=a,G("add"))},[s,d,j,K,b]);return{onKeyPress:H,onFocus:function onFocus(a,b){D.current=b},handlePress:M,onSliderClick:function onSliderClick(b){if(isNotRangeParams(a)){var c=getValueByPosition({x:b.pageX,y:b.pageY},l,n,o,i),e=getNewValue(c,s,p,f,g,D.current);e!==d&&(t(e),I(getActiveValue(e,0),0),null===j||void 0===j?void 0:j({e:b,value:e}))}},activeButton:D.current,popoverPosition:[w,B],currentValue:Array.isArray(s)?s:[s]}}
|
|
2
2
|
//# sourceMappingURL=useSlider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSlider.js","names":["useCallback","useEffect","useMemo","useRef","useState","useComponentSize","useMutableRef","getActiveValue","getNewValue","getValidValue","getValueByPosition","isNotRangeParams","isRangeParams","trackPosition","COUNT_STEPS","useSlider","props","disabled","range","value","min","max","step","onChange","onAfterChange","sliderRef","buttonRefs","minValue","maxValue","dragStepValue","Array","isArray","val","Math","abs","currentValue","setCurrentValue","leftPopover","setLeftPopover","rightPopover","setRightPopover","activeButton","sizeSlider","lastValue","controlListeners","type","method","document","handleRelease","handleTouchMove","setTooltipPosition","JSON","stringify","current","targetValue","newValue","onKeyPress","event","typeButton","stepIncrement","validKeyCode","changedValue","key","forEach","stepPoint","index","e","position","button","getBoundingClientRect","x","width","newPosition","y","offsetTop","offsetHeight","changePosition","positionValue","oldValue","copyValues","sort","a","b","handlePress","onFocus","onSliderClick","pageX","pageY","popoverPosition"],"sources":["../../../../../../src/components/Slider/useSlider/useSlider.ts"],"sourcesContent":["import React, {\n MutableRefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';\nimport { SliderValue, TrackPosition } from '../helper';\nimport {\n ActiveButton,\n getActiveValue,\n getNewValue,\n getValidValue,\n getValueByPosition,\n isNotRangeParams,\n isRangeParams,\n trackPosition,\n UseSliderProps,\n UseSliderValues,\n} from './helper';\n\nexport const COUNT_STEPS = 250;\n\nexport function useSlider<RANGE extends boolean>(\n props: UseSliderProps<RANGE>,\n): UseSliderValues {\n const {\n disabled,\n range,\n value,\n min,\n max,\n step = 1,\n onChange,\n onAfterChange,\n sliderRef,\n buttonRefs,\n } = props;\n\n const minValue = max > min ? min : 0;\n const maxValue = max > min ? max : 100;\n\n const dragStepValue = useMemo(() => {\n if (!Array.isArray(step)) {\n if (step >= 1) {\n const val = Math.abs((maxValue - minValue) / COUNT_STEPS);\n if (val > step) {\n return val - (val % step);\n }\n return Math.max(val, step);\n }\n }\n return step;\n }, [max, min, step]);\n\n const [currentValue, setCurrentValue] = useState<number | [number, number]>(\n value,\n );\n const [leftPopover, setLeftPopover] = useState<TrackPosition>(null);\n const [rightPopover, setRightPopover] = useState<TrackPosition>(null);\n\n const activeButton: MutableRefObject<ActiveButton | null> = useRef(null);\n\n const sizeSlider = useComponentSize(sliderRef);\n\n const lastValue = useMutableRef(currentValue);\n\n useEffect(() => {\n if (disabled) {\n controlListeners('remove');\n }\n }, [disabled]);\n\n const controlListeners = (type: 'add' | 'remove') => {\n const method = type === 'add' ? 'addEventListener' : 'removeEventListener';\n document[method]('mouseup', handleRelease);\n document[method]('touchend', handleRelease);\n document[method]('mousemove', handleTouchMove);\n document[method]('touchmove', handleTouchMove);\n };\n\n useEffect(() => {\n if (Array.isArray(currentValue)) {\n setTooltipPosition(currentValue[0], 0);\n setTooltipPosition(currentValue[1], 1);\n } else {\n setTooltipPosition(currentValue, 0);\n }\n }, [currentValue]);\n\n useEffect(() => {\n if (JSON.stringify(value) !== JSON.stringify(currentValue)) {\n setCurrentValue(value);\n setTooltipPosition(getActiveValue(value, activeButton.current), 0);\n activeButton.current = null;\n }\n }, [value]);\n\n useEffect(() => {\n onChange?.({\n value: Array.isArray(currentValue)\n ? ([\n getNewValue(currentValue[0], currentValue[0], step, min, max, 0),\n getNewValue(currentValue[1], currentValue[1], step, min, max, 1),\n ] as SliderValue<RANGE>)\n : (getNewValue(\n currentValue,\n currentValue,\n step,\n min,\n max,\n 0,\n ) as SliderValue<RANGE>),\n });\n }, [step]);\n\n useEffect(() => {\n if (typeof value !== 'undefined') {\n const targetValue = isRangeParams(props)\n ? ([\n getValidValue(props.value[0], min, max, step),\n getValidValue(props.value[1], min, max, step),\n ] as [number, number])\n : getValidValue(props.value as number, min, max, step);\n setCurrentValue(targetValue);\n }\n }, [range, typeof value]);\n\n useEffect(() => {\n if (isRangeParams(props)) {\n if (props.value[0] > props.value[1]) {\n const newValue: SliderValue<true> = [props.value[1], props.value[1]];\n props.onChange?.({ value: newValue });\n }\n }\n }, []);\n\n const onSliderClick = (e: React.MouseEvent) => {\n if (isNotRangeParams(props)) {\n const positionValue = getValueByPosition(\n { x: e.pageX, y: e.pageY },\n sliderRef,\n minValue,\n maxValue,\n step,\n );\n const newValue = getNewValue(\n positionValue,\n currentValue,\n dragStepValue,\n min,\n max,\n activeButton.current,\n );\n if (newValue !== value) {\n setCurrentValue(newValue);\n setTooltipPosition(getActiveValue(newValue, 0), 0);\n onChange?.({\n e,\n value: newValue as SliderValue<RANGE>,\n });\n }\n }\n };\n\n const onKeyPress = useCallback(\n (event: React.KeyboardEvent, typeButton: ActiveButton) => {\n if (\n !disabled &&\n typeof typeButton === 'number' &&\n typeof currentValue !== 'undefined'\n ) {\n let stepIncrement = !Array.isArray(step) ? step || 1 : 1;\n let validKeyCode = false;\n const changedValue = getActiveValue(currentValue, typeButton);\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowRight':\n case '+':\n validKeyCode = true;\n break;\n case 'ArrowLeft':\n case 'ArrowDown':\n case '-':\n validKeyCode = true;\n stepIncrement *= -1;\n break;\n default:\n break;\n }\n if (validKeyCode) {\n if (Array.isArray(step)) {\n step.forEach((stepPoint, index) => {\n if (\n typeof typeButton === 'number' &&\n changedValue === stepPoint\n ) {\n if (stepIncrement >= 0) {\n if (index === 0) {\n stepIncrement = step[1] - minValue;\n } else {\n stepIncrement =\n (typeof step[index + 1] !== 'undefined'\n ? step[index + 1]\n : maxValue) - stepPoint;\n }\n } else if (index === 0) {\n stepIncrement = minValue - step[1];\n } else {\n stepIncrement =\n (typeof step[index - 1] !== 'undefined'\n ? step[index - 1]\n : minValue) - stepPoint;\n }\n }\n });\n }\n const newValue = getNewValue(\n changedValue + stepIncrement,\n currentValue,\n step,\n min,\n max,\n typeButton,\n );\n setCurrentValue(newValue);\n setTooltipPosition(getActiveValue(newValue, typeButton), typeButton);\n onChange?.({\n e: event,\n value: newValue as SliderValue<RANGE>,\n });\n }\n }\n },\n [currentValue, step, min, max],\n );\n\n const setTooltipPosition = (value: number, position: ActiveButton) => {\n if (sliderRef.current && typeof position === 'number') {\n const button = buttonRefs[position].current || sliderRef.current;\n const { x, width } = sliderRef.current.getBoundingClientRect();\n const newPosition = {\n y: button.offsetTop + button.offsetHeight + 50,\n x: x + Math.abs((value - minValue) / (maxValue - minValue)) * width,\n };\n if (position === 0) {\n setLeftPopover(newPosition);\n } else {\n setRightPopover(newPosition);\n }\n }\n };\n\n const changePosition = (event: Event) => {\n const nativeEvent = event as MouseEvent | TouchEvent;\n if (typeof activeButton.current !== 'number') {\n return value;\n }\n const position = trackPosition(nativeEvent);\n const positionValue = getValueByPosition(\n position,\n sliderRef,\n minValue,\n maxValue,\n step,\n );\n return getNewValue(\n positionValue,\n currentValue,\n dragStepValue,\n min,\n max,\n activeButton.current,\n );\n };\n\n const onFocus = (\n e: React.FocusEvent | React.MouseEvent,\n button: ActiveButton,\n ) => {\n activeButton.current = button;\n };\n\n const handleTouchMove = (\n event: MouseEvent | TouchEvent | Event,\n typeButton?: ActiveButton,\n ) => {\n const button = typeButton || activeButton.current;\n if (typeof button === 'number') {\n const position = changePosition(event);\n const oldValue: number = getActiveValue(currentValue, button);\n const newValue: number = getActiveValue(position, button);\n setCurrentValue(position);\n if (oldValue !== newValue) {\n onAfterChange?.({ e: event, value: position as SliderValue<RANGE> });\n }\n }\n };\n\n useEffect(() => {\n if (isRangeParams(props)) {\n props.value.forEach((val, index) => {\n setTooltipPosition(\n getActiveValue(val, activeButton.current),\n index === 0 ? 0 : 1,\n );\n });\n }\n if (isNotRangeParams(props)) {\n setTooltipPosition(getActiveValue(value, activeButton.current), 0);\n }\n activeButton.current = null;\n }, [sizeSlider, typeof value]);\n\n const handleRelease = useCallback(\n (e: MouseEvent | TouchEvent | Event) => {\n controlListeners('remove');\n if (isRangeParams(props) && Array.isArray(lastValue.current)) {\n const copyValues = [...lastValue.current].sort(\n (a, b) => Number(a) - Number(b),\n ) as SliderValue<true>;\n props.onChange?.({ e, value: copyValues });\n }\n if (isNotRangeParams(props) && typeof lastValue.current === 'number') {\n props.onChange?.({ e, value: lastValue.current });\n }\n activeButton.current = null;\n },\n [lastValue, value, onChange, handleTouchMove],\n );\n\n const handlePress = useCallback(\n (typeButton: ActiveButton) => {\n if (!disabled) {\n activeButton.current = typeButton;\n controlListeners('add');\n }\n },\n [currentValue, value, onChange, handleTouchMove, disabled],\n );\n\n return {\n onKeyPress,\n onFocus,\n handlePress,\n onSliderClick,\n activeButton: activeButton.current,\n popoverPosition: [leftPopover, rightPopover],\n currentValue: Array.isArray(currentValue) ? currentValue : [currentValue],\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSlider.js","names":["useCallback","useEffect","useMemo","useRef","useState","useComponentSize","useMutableRef","getActiveValue","getNewValue","getValidValue","getValueByPosition","isNotRangeParams","isRangeParams","trackPosition","COUNT_STEPS","useSlider","props","disabled","range","value","min","max","step","onChange","onAfterChange","sliderRef","buttonRefs","minValue","maxValue","dragStepValue","Array","isArray","val","Math","abs","currentValue","setCurrentValue","leftPopover","setLeftPopover","rightPopover","setRightPopover","activeButton","sizeSlider","lastValue","controlListeners","type","method","document","handleRelease","handleTouchMove","setTooltipPosition","JSON","stringify","current","targetValue","newValue","onKeyPress","event","typeButton","stepIncrement","validKeyCode","changedValue","key","forEach","stepPoint","index","e","position","button","getBoundingClientRect","x","width","newPosition","y","offsetTop","offsetHeight","changePosition","positionValue","oldValue","copyValues","sort","a","b","handlePress","onFocus","onSliderClick","pageX","pageY","popoverPosition"],"sources":["../../../../../../src/components/Slider/useSlider/useSlider.ts"],"sourcesContent":["import React, {\n MutableRefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';\nimport { SliderValue, TrackPosition } from '../helper';\nimport {\n ActiveButton,\n getActiveValue,\n getNewValue,\n getValidValue,\n getValueByPosition,\n isNotRangeParams,\n isRangeParams,\n trackPosition,\n UseSliderProps,\n UseSliderValues,\n} from './helper';\n\nexport const COUNT_STEPS = 250;\n\nexport function useSlider<RANGE extends boolean>(\n props: UseSliderProps<RANGE>,\n): UseSliderValues {\n const {\n disabled,\n range,\n value,\n min,\n max,\n step = 1,\n onChange,\n onAfterChange,\n sliderRef,\n buttonRefs,\n } = props;\n\n const minValue = max > min ? min : 0;\n const maxValue = max > min ? max : 100;\n\n const dragStepValue = useMemo(() => {\n if (!Array.isArray(step)) {\n if (step >= 1) {\n const val = Math.abs((maxValue - minValue) / COUNT_STEPS);\n if (val > step) {\n return val - (val % step);\n }\n return Math.max(val, step);\n }\n }\n return step;\n }, [max, min, step]);\n\n const [currentValue, setCurrentValue] = useState<number | [number, number]>(\n value,\n );\n const [leftPopover, setLeftPopover] = useState<TrackPosition>(null);\n const [rightPopover, setRightPopover] = useState<TrackPosition>(null);\n\n const activeButton: MutableRefObject<ActiveButton | null> = useRef(null);\n\n const sizeSlider = useComponentSize(sliderRef);\n\n const lastValue = useMutableRef(currentValue);\n\n useEffect(() => {\n if (disabled) {\n controlListeners('remove');\n }\n }, [disabled]);\n\n const controlListeners = (type: 'add' | 'remove') => {\n const method = type === 'add' ? 'addEventListener' : 'removeEventListener';\n document[method]('mouseup', handleRelease);\n document[method]('touchend', handleRelease);\n document[method]('mousemove', handleTouchMove);\n document[method]('touchmove', handleTouchMove);\n };\n\n useEffect(() => {\n if (Array.isArray(currentValue)) {\n setTooltipPosition(currentValue[0], 0);\n setTooltipPosition(currentValue[1], 1);\n } else {\n setTooltipPosition(currentValue, 0);\n }\n }, [currentValue]);\n\n useEffect(() => {\n if (JSON.stringify(value) !== JSON.stringify(currentValue)) {\n setCurrentValue(value);\n setTooltipPosition(getActiveValue(value, activeButton.current), 0);\n activeButton.current = null;\n }\n }, [value]);\n\n useEffect(() => {\n onChange?.({\n value: Array.isArray(currentValue)\n ? ([\n getNewValue(currentValue[0], currentValue[0], step, min, max, 0),\n getNewValue(currentValue[1], currentValue[1], step, min, max, 1),\n ] as SliderValue<RANGE>)\n : (getNewValue(\n currentValue,\n currentValue,\n step,\n min,\n max,\n 0,\n ) as SliderValue<RANGE>),\n });\n }, [step]);\n\n useEffect(() => {\n if (typeof value !== 'undefined') {\n const targetValue = isRangeParams(props)\n ? ([\n getValidValue(props.value[0], min, max, step),\n getValidValue(props.value[1], min, max, step),\n ] as [number, number])\n : getValidValue(props.value as number, min, max, step);\n setCurrentValue(targetValue);\n }\n }, [range, typeof value]);\n\n useEffect(() => {\n if (isRangeParams(props)) {\n if (props.value[0] > props.value[1]) {\n const newValue: SliderValue<true> = [props.value[1], props.value[1]];\n props.onChange?.({ value: newValue });\n }\n }\n }, []);\n\n const onSliderClick = (e: React.MouseEvent) => {\n if (isNotRangeParams(props)) {\n const positionValue = getValueByPosition(\n { x: e.pageX, y: e.pageY },\n sliderRef,\n minValue,\n maxValue,\n step,\n );\n const newValue = getNewValue(\n positionValue,\n currentValue,\n dragStepValue,\n min,\n max,\n activeButton.current,\n );\n if (newValue !== value) {\n setCurrentValue(newValue);\n setTooltipPosition(getActiveValue(newValue, 0), 0);\n onChange?.({\n e,\n value: newValue as SliderValue<RANGE>,\n });\n }\n }\n };\n\n const onKeyPress = useCallback(\n (event: React.KeyboardEvent, typeButton: ActiveButton) => {\n if (\n !disabled &&\n typeof typeButton === 'number' &&\n typeof currentValue !== 'undefined'\n ) {\n let stepIncrement = !Array.isArray(step) ? step || 1 : 1;\n let validKeyCode = false;\n const changedValue = getActiveValue(currentValue, typeButton);\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowRight':\n case '+':\n validKeyCode = true;\n break;\n case 'ArrowLeft':\n case 'ArrowDown':\n case '-':\n validKeyCode = true;\n stepIncrement *= -1;\n break;\n default:\n break;\n }\n if (validKeyCode) {\n if (Array.isArray(step)) {\n step.forEach((stepPoint, index) => {\n if (\n typeof typeButton === 'number' &&\n changedValue === stepPoint\n ) {\n if (stepIncrement >= 0) {\n if (index === 0) {\n stepIncrement = step[1] - minValue;\n } else {\n stepIncrement =\n (typeof step[index + 1] !== 'undefined'\n ? step[index + 1]\n : maxValue) - stepPoint;\n }\n } else if (index === 0) {\n stepIncrement = minValue - step[1];\n } else {\n stepIncrement =\n (typeof step[index - 1] !== 'undefined'\n ? step[index - 1]\n : minValue) - stepPoint;\n }\n }\n });\n }\n const newValue = getNewValue(\n changedValue + stepIncrement,\n currentValue,\n step,\n min,\n max,\n typeButton,\n );\n setCurrentValue(newValue);\n setTooltipPosition(getActiveValue(newValue, typeButton), typeButton);\n onChange?.({\n e: event,\n value: newValue as SliderValue<RANGE>,\n });\n }\n }\n },\n [currentValue, step, min, max],\n );\n\n const setTooltipPosition = (value: number, position: ActiveButton) => {\n if (sliderRef.current && typeof position === 'number') {\n const button = buttonRefs[position].current || sliderRef.current;\n const { x, width } = sliderRef.current.getBoundingClientRect();\n const newPosition = {\n y: button.offsetTop + button.offsetHeight + 50,\n x: x + Math.abs((value - minValue) / (maxValue - minValue)) * width,\n };\n if (position === 0) {\n setLeftPopover(newPosition);\n } else {\n setRightPopover(newPosition);\n }\n }\n };\n\n const changePosition = (event: Event) => {\n const nativeEvent = event as MouseEvent | TouchEvent;\n if (typeof activeButton.current !== 'number') {\n return value;\n }\n const position = trackPosition(nativeEvent);\n const positionValue = getValueByPosition(\n position,\n sliderRef,\n minValue,\n maxValue,\n step,\n );\n return getNewValue(\n positionValue,\n currentValue,\n dragStepValue,\n min,\n max,\n activeButton.current,\n );\n };\n\n const onFocus = (\n e: React.FocusEvent | React.MouseEvent,\n button: ActiveButton,\n ) => {\n activeButton.current = button;\n };\n\n const handleTouchMove = (\n event: MouseEvent | TouchEvent | Event,\n typeButton?: ActiveButton,\n ) => {\n const button = typeButton || activeButton.current;\n if (typeof button === 'number') {\n const position = changePosition(event);\n const oldValue: number = getActiveValue(currentValue, button);\n const newValue: number = getActiveValue(position, button);\n setCurrentValue(position);\n if (oldValue !== newValue) {\n onAfterChange?.({ e: event, value: position as SliderValue<RANGE> });\n }\n }\n };\n\n useEffect(() => {\n if (isRangeParams(props)) {\n props.value?.forEach((val, index) => {\n setTooltipPosition(\n getActiveValue(val, activeButton.current),\n index === 0 ? 0 : 1,\n );\n });\n }\n if (isNotRangeParams(props)) {\n setTooltipPosition(getActiveValue(value, activeButton.current), 0);\n }\n activeButton.current = null;\n }, [sizeSlider, typeof value]);\n\n const handleRelease = useCallback(\n (e: MouseEvent | TouchEvent | Event) => {\n controlListeners('remove');\n if (isRangeParams(props) && Array.isArray(lastValue.current)) {\n const copyValues = [...lastValue.current].sort(\n (a, b) => Number(a) - Number(b),\n ) as SliderValue<true>;\n props.onChange?.({ e, value: copyValues });\n }\n if (isNotRangeParams(props) && typeof lastValue.current === 'number') {\n props.onChange?.({ e, value: lastValue.current });\n }\n activeButton.current = null;\n },\n [lastValue, value, onChange, handleTouchMove],\n );\n\n const handlePress = useCallback(\n (typeButton: ActiveButton) => {\n if (!disabled) {\n activeButton.current = typeButton;\n controlListeners('add');\n }\n },\n [currentValue, value, onChange, handleTouchMove, disabled],\n );\n\n return {\n onKeyPress,\n onFocus,\n handlePress,\n onSliderClick,\n activeButton: activeButton.current,\n popoverPosition: [leftPopover, rightPopover],\n currentValue: Array.isArray(currentValue) ? currentValue : [currentValue],\n };\n}\n"],"mappings":"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"}
|
package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.TabsFitModeDropdownWrapper{align-items:center;display:flex}.TabsFitModeDropdownWrapper-Tabs{max-width:100%}.TabsFitModeDropdownWrapper-MoreItems{position:absolute}.TabsFitModeDropdownWrapper-Tab_hidden{left:-
|
|
1
|
+
.TabsFitModeDropdownWrapper{align-items:center;display:flex}.TabsFitModeDropdownWrapper-Tabs{max-width:100%}.TabsFitModeDropdownWrapper-MoreItems{position:absolute}.TabsFitModeDropdownWrapper-MoreItems_hidden,.TabsFitModeDropdownWrapper-Tab_hidden{left:-300vw;pointer-events:none;position:absolute;visibility:hidden}
|
package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import './TabsFitModeDropdownWrapper.css';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { TabsFitModeWrapperProps } from '../types';
|
|
4
|
-
export declare const TabsFitModeDropdownWrapper: <ITEM>({ items, tabsDimensions, tabRefs, getItemLabel, getItemChecked, renderItem, renderItemsList, }: TabsFitModeWrapperProps<ITEM>) => React.ReactElement | null;
|
|
4
|
+
export declare const TabsFitModeDropdownWrapper: <ITEM>({ items, tabsDimensions, tabRefs, getItemLabel, getItemChecked, renderItem, renderItemsList, size, }: TabsFitModeWrapperProps<ITEM>) => React.ReactElement | null;
|
package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./TabsFitModeDropdownWrapper.css";import React from"react";import{cn}from"../../../utils/bem";import{getTabsWidth}from"../helpers";import{TabsMoreItems}from"../MoreItems/TabsMoreItems";import{useFittingItems}from"./useFittingItems";var cnTabsFitModeDropdownWrapper=cn("TabsFitModeDropdownWrapper");export var TabsFitModeDropdownWrapper=function(a){var b=a.items,c=a.tabsDimensions,d=a.tabRefs,e=a.getItemLabel,f=a.getItemChecked,g=a.renderItem,h=a.renderItemsList,i=React.useRef(null),
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./TabsFitModeDropdownWrapper.css";import React from"react";import{cn}from"../../../utils/bem";import{getTabsWidth}from"../helpers";import{TabsMoreItems}from"../MoreItems/TabsMoreItems";import{useFittingItems}from"./useFittingItems";var cnTabsFitModeDropdownWrapper=cn("TabsFitModeDropdownWrapper");export var TabsFitModeDropdownWrapper=function(a){var b=a.items,c=a.tabsDimensions,d=a.tabRefs,e=a.getItemLabel,f=a.getItemChecked,g=a.renderItem,h=a.renderItemsList,i=a.size,j=React.useRef(null),k=React.useRef(null),l=useFittingItems({tabsDimensions:c,containerRef:j,moreItemsRef:k}),m=l.isItemHidden,n=b.filter(function(a,b){return m(b)}),o=React.useMemo(function(){return Math.max.apply(Math,_toConsumableArray(d.map(function(a){var b,c;return null!==(b=null===(c=a.current)||void 0===c?void 0:c.offsetHeight)&&void 0!==b?b:0})))},[c]),p=n.some(f),q=getTabsWidth(c.filter(function(a,b){return!m(b)}));return React.createElement("div",{ref:j,className:cnTabsFitModeDropdownWrapper(),style:{height:o}},React.createElement("div",{className:cnTabsFitModeDropdownWrapper("Tabs")},h({withRunningLine:!p,getTabClassName:function getTabClassName(a){return cnTabsFitModeDropdownWrapper("Tab",{hidden:m(a)})}})),React.createElement("div",{ref:k,className:cnTabsFitModeDropdownWrapper("MoreItems",{hidden:!n.length}),style:{left:n.length?q:void 0}},React.createElement(TabsMoreItems,{items:n,renderItem:g,getItemLabel:e,getItemChecked:f,height:o,size:i})))};
|
|
2
2
|
//# sourceMappingURL=TabsFitModeDropdownWrapper.js.map
|
package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsFitModeDropdownWrapper.js","names":["React","cn","getTabsWidth","TabsMoreItems","useFittingItems","cnTabsFitModeDropdownWrapper","TabsFitModeDropdownWrapper","items","tabsDimensions","tabRefs","getItemLabel","getItemChecked","renderItem","renderItemsList","ref","useRef","moreItemsRef","containerRef","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","Math","max","map","tabRef","current","offsetHeight","checkedItemIsHidden","some","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","length","left"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.tsx"],"sourcesContent":["import './TabsFitModeDropdownWrapper.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getTabsWidth } from '../helpers';\nimport { TabsMoreItems } from '../MoreItems/TabsMoreItems';\nimport { TabsFitModeWrapperProps } from '../types';\nimport { useFittingItems } from './useFittingItems';\n\nconst cnTabsFitModeDropdownWrapper = cn('TabsFitModeDropdownWrapper');\n\nexport const TabsFitModeDropdownWrapper = <ITEM,>({\n items,\n tabsDimensions,\n tabRefs,\n getItemLabel,\n getItemChecked,\n renderItem,\n renderItemsList,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n const ref = React.useRef<HTMLDivElement>(null);\n const moreItemsRef = React.useRef<HTMLDivElement>(null);\n const { isItemHidden } = useFittingItems({\n tabsDimensions,\n containerRef: ref,\n moreItemsRef,\n });\n const hiddenItems = items.filter((_item, idx) => isItemHidden(idx));\n const maxTabHeight: number = React.useMemo(() => {\n return Math.max(\n ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n );\n }, [tabsDimensions]);\n const checkedItemIsHidden = hiddenItems.some(getItemChecked);\n const visibleTabsWidth = getTabsWidth(\n tabsDimensions.filter((_td, idx) => !isItemHidden(idx)),\n );\n\n return (\n <div\n ref={ref}\n className={cnTabsFitModeDropdownWrapper()}\n style={{ height: maxTabHeight }}\n >\n <div className={cnTabsFitModeDropdownWrapper('Tabs')}>\n {renderItemsList({\n withRunningLine: !checkedItemIsHidden,\n getTabClassName: (idx) =>\n cnTabsFitModeDropdownWrapper('Tab', { hidden: isItemHidden(idx) }),\n })}\n </div>\n
|
|
1
|
+
{"version":3,"file":"TabsFitModeDropdownWrapper.js","names":["React","cn","getTabsWidth","TabsMoreItems","useFittingItems","cnTabsFitModeDropdownWrapper","TabsFitModeDropdownWrapper","items","tabsDimensions","tabRefs","getItemLabel","getItemChecked","renderItem","renderItemsList","size","ref","useRef","moreItemsRef","containerRef","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","Math","max","map","tabRef","current","offsetHeight","checkedItemIsHidden","some","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","length","left"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.tsx"],"sourcesContent":["import './TabsFitModeDropdownWrapper.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getTabsWidth } from '../helpers';\nimport { TabsMoreItems } from '../MoreItems/TabsMoreItems';\nimport { TabsFitModeWrapperProps } from '../types';\nimport { useFittingItems } from './useFittingItems';\n\nconst cnTabsFitModeDropdownWrapper = cn('TabsFitModeDropdownWrapper');\n\nexport const TabsFitModeDropdownWrapper = <ITEM,>({\n items,\n tabsDimensions,\n tabRefs,\n getItemLabel,\n getItemChecked,\n renderItem,\n renderItemsList,\n size,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n const ref = React.useRef<HTMLDivElement>(null);\n const moreItemsRef = React.useRef<HTMLDivElement>(null);\n const { isItemHidden } = useFittingItems({\n tabsDimensions,\n containerRef: ref,\n moreItemsRef,\n });\n const hiddenItems = items.filter((_item, idx) => isItemHidden(idx));\n const maxTabHeight: number = React.useMemo(() => {\n return Math.max(\n ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n );\n }, [tabsDimensions]);\n const checkedItemIsHidden = hiddenItems.some(getItemChecked);\n const visibleTabsWidth = getTabsWidth(\n tabsDimensions.filter((_td, idx) => !isItemHidden(idx)),\n );\n\n return (\n <div\n ref={ref}\n className={cnTabsFitModeDropdownWrapper()}\n style={{ height: maxTabHeight }}\n >\n <div className={cnTabsFitModeDropdownWrapper('Tabs')}>\n {renderItemsList({\n withRunningLine: !checkedItemIsHidden,\n getTabClassName: (idx) =>\n cnTabsFitModeDropdownWrapper('Tab', { hidden: isItemHidden(idx) }),\n })}\n </div>\n <div\n ref={moreItemsRef}\n className={cnTabsFitModeDropdownWrapper('MoreItems', {\n hidden: !hiddenItems.length,\n })}\n style={{\n /* В Safari скрытые табы с абсолютом продолжают растягивать контейнер,\n поэтому приходится позиционировать кнопку абсолютом */\n left: hiddenItems.length ? visibleTabsWidth : undefined,\n }}\n >\n <TabsMoreItems\n items={hiddenItems}\n renderItem={renderItem}\n getItemLabel={getItemLabel}\n getItemChecked={getItemChecked}\n height={maxTabHeight}\n size={size}\n />\n </div>\n </div>\n );\n};\n"],"mappings":"yEAAA,yCAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,YAAT,kBACA,OAASC,aAAT,kCAEA,OAASC,eAAT,yBAEA,GAAMC,6BAA4B,CAAGJ,EAAE,CAAC,4BAAD,CAAvC,CAEA,MAAO,IAAMK,2BAA0B,CAAG,WASsB,IAR9DC,EAQ8D,GAR9DA,KAQ8D,CAP9DC,CAO8D,GAP9DA,cAO8D,CAN9DC,CAM8D,GAN9DA,OAM8D,CAL9DC,CAK8D,GAL9DA,YAK8D,CAJ9DC,CAI8D,GAJ9DA,cAI8D,CAH9DC,CAG8D,GAH9DA,UAG8D,CAF9DC,CAE8D,GAF9DA,eAE8D,CAD9DC,CAC8D,GAD9DA,IAC8D,CACxDC,CAAG,CAAGf,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CADkD,CAExDC,CAAY,CAAGjB,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CAFyC,GAGrCZ,eAAe,CAAC,CACvCI,cAAc,CAAdA,CADuC,CAEvCU,YAAY,CAAEH,CAFyB,CAGvCE,YAAY,CAAZA,CAHuC,CAAD,CAHsB,CAGtDE,CAHsD,GAGtDA,YAHsD,CAQxDC,CAAW,CAAGb,CAAK,CAACc,MAAN,CAAa,SAACC,CAAD,CAAQC,CAAR,QAAgBJ,EAAY,CAACI,CAAD,CAA5B,CAAb,CAR0C,CASxDC,CAAoB,CAAGxB,KAAK,CAACyB,OAAN,CAAc,UAAM,CAC/C,MAAOC,KAAI,CAACC,GAAL,OAAAD,IAAI,oBACNjB,CAAO,CAACmB,GAAR,CAAY,SAACC,CAAD,qCAAYA,CAAM,CAACC,OAAnB,qBAAY,EAAgBC,YAA5B,gBAA4C,CAA5C,CAAZ,CADM,EAGZ,CAJ4B,CAI1B,CAACvB,CAAD,CAJ0B,CATiC,CAcxDwB,CAAmB,CAAGZ,CAAW,CAACa,IAAZ,CAAiBtB,CAAjB,CAdkC,CAexDuB,CAAgB,CAAGhC,YAAY,CACnCM,CAAc,CAACa,MAAf,CAAsB,SAACc,CAAD,CAAMZ,CAAN,QAAc,CAACJ,CAAY,CAACI,CAAD,CAA3B,CAAtB,CADmC,CAfyB,CAmB9D,MACE,4BACE,GAAG,CAAER,CADP,CAEE,SAAS,CAAEV,4BAA4B,EAFzC,CAGE,KAAK,CAAE,CAAE+B,MAAM,CAAEZ,CAAV,CAHT,EAKE,2BAAK,SAAS,CAAEnB,4BAA4B,CAAC,MAAD,CAA5C,EACGQ,CAAe,CAAC,CACfwB,eAAe,CAAE,CAACL,CADH,CAEfM,eAAe,CAAE,yBAACf,CAAD,QACflB,6BAA4B,CAAC,KAAD,CAAQ,CAAEkC,MAAM,CAAEpB,CAAY,CAACI,CAAD,CAAtB,CAAR,CADb,CAFF,CAAD,CADlB,CALF,CAYE,2BACE,GAAG,CAAEN,CADP,CAEE,SAAS,CAAEZ,4BAA4B,CAAC,WAAD,CAAc,CACnDkC,MAAM,CAAE,CAACnB,CAAW,CAACoB,MAD8B,CAAd,CAFzC,CAKE,KAAK,CAAE,CAGLC,IAAI,CAAErB,CAAW,CAACoB,MAAZ,CAAqBN,CAArB,OAHD,CALT,EAWE,oBAAC,aAAD,EACE,KAAK,CAAEd,CADT,CAEE,UAAU,CAAER,CAFd,CAGE,YAAY,CAAEF,CAHhB,CAIE,cAAc,CAAEC,CAJlB,CAKE,MAAM,CAAEa,CALV,CAME,IAAI,CAAEV,CANR,EAXF,CAZF,CAkCH,CA/DM"}
|
|
@@ -8,8 +8,4 @@ export declare const useFittingItems: ({ tabsDimensions, containerRef, moreItems
|
|
|
8
8
|
fittingItemsCount: number;
|
|
9
9
|
isItemHidden: (idx: number) => boolean;
|
|
10
10
|
};
|
|
11
|
-
export declare const getFittingItemsCount: (
|
|
12
|
-
tabsDimensions: TabDimensions[];
|
|
13
|
-
totalWidth: number;
|
|
14
|
-
moreItemsWidth: number;
|
|
15
|
-
}) => number;
|
|
11
|
+
export declare const getFittingItemsCount: (tabsDimensions: TabDimensions[], totalWidth: number, moreItemsWidth: number) => number;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import React from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";import{getTabsWidth}from"../helpers";export var useFittingItems=function(a){var b=a.tabsDimensions,c=a.containerRef,d=a.moreItemsRef,e=useComponentSize(c),f=e.width,g=useComponentSize(d),h=g.width,i=React.useMemo(function(){return getFittingItemsCount(
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import React from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";import{getTabsWidth}from"../helpers";export var useFittingItems=function(a){var b=a.tabsDimensions,c=a.containerRef,d=a.moreItemsRef,e=useComponentSize(c),f=e.width,g=useComponentSize(d),h=g.width,i=React.useMemo(function(){return getFittingItemsCount(b,f,h)},[b,f,h]);return{fittingItemsCount:i,isItemHidden:React.useCallback(function(a){return a>=i},[i])}};export var getFittingItemsCount=function(a,b,c){if(!b)return a.length;var d,e=_createForOfIteratorHelper(a.entries());try{for(e.s();!(d=e.n()).done;){var f=_slicedToArray(d.value,2),g=f[0],h=f[1],i=g===a.length-1,j=a.slice(0,g),k=h.size+getTabsWidth(j)+(i?0:h.gap+c);if(k>b)return g}}catch(a){e.e(a)}finally{e.f()}return a.length};
|
|
2
2
|
//# sourceMappingURL=useFittingItems.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFittingItems.js","names":["React","useComponentSize","getTabsWidth","useFittingItems","tabsDimensions","containerRef","moreItemsRef","containerWidth","width","moreItemsWidth","fittingItemsCount","useMemo","getFittingItemsCount","
|
|
1
|
+
{"version":3,"file":"useFittingItems.js","names":["React","useComponentSize","getTabsWidth","useFittingItems","tabsDimensions","containerRef","moreItemsRef","containerWidth","width","moreItemsWidth","fittingItemsCount","useMemo","getFittingItemsCount","isItemHidden","useCallback","idx","totalWidth","length","entries","tabDimensions","isLastItem","previousTabsDimensions","slice","size","gap"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/useFittingItems.ts"],"sourcesContent":["import React from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { getTabsWidth } from '../helpers';\nimport { TabDimensions } from '../types';\n\nexport const useFittingItems = ({\n tabsDimensions,\n containerRef,\n moreItemsRef,\n}: {\n tabsDimensions: TabDimensions[];\n containerRef: React.RefObject<HTMLElement>;\n moreItemsRef: React.RefObject<HTMLElement>;\n}): {\n fittingItemsCount: number;\n isItemHidden: (idx: number) => boolean;\n} => {\n const { width: containerWidth } = useComponentSize(containerRef);\n const { width: moreItemsWidth } = useComponentSize(moreItemsRef);\n\n const fittingItemsCount = React.useMemo(\n () => getFittingItemsCount(tabsDimensions, containerWidth, moreItemsWidth),\n [tabsDimensions, containerWidth, moreItemsWidth],\n );\n\n return {\n fittingItemsCount,\n isItemHidden: React.useCallback(\n (idx) => idx >= fittingItemsCount,\n [fittingItemsCount],\n ),\n };\n};\n\nexport const getFittingItemsCount = (\n tabsDimensions: TabDimensions[],\n totalWidth: number,\n moreItemsWidth: number,\n): number => {\n if (!totalWidth) {\n return tabsDimensions.length;\n }\n\n for (const [idx, tabDimensions] of tabsDimensions.entries()) {\n const isLastItem = idx === tabsDimensions.length - 1;\n const previousTabsDimensions = tabsDimensions.slice(0, idx);\n const width =\n tabDimensions.size +\n getTabsWidth(previousTabsDimensions) +\n (isLastItem ? 0 : tabDimensions.gap + moreItemsWidth);\n if (width > totalWidth) {\n return idx;\n }\n }\n\n return tabsDimensions.length;\n};\n"],"mappings":"stCAAA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,gBAAT,wDACA,OAASC,YAAT,kBAGA,MAAO,IAAMC,gBAAe,CAAG,WAW1B,IAVHC,EAUG,GAVHA,cAUG,CATHC,CASG,GATHA,YASG,CARHC,CAQG,GARHA,YAQG,GAC+BL,gBAAgB,CAACI,CAAD,CAD/C,CACYE,CADZ,GACKC,KADL,GAE+BP,gBAAgB,CAACK,CAAD,CAF/C,CAEYG,CAFZ,GAEKD,KAFL,CAIGE,CAAiB,CAAGV,KAAK,CAACW,OAAN,CACxB,iBAAMC,qBAAoB,CAACR,CAAD,CAAiBG,CAAjB,CAAiCE,CAAjC,CAA1B,CADwB,CAExB,CAACL,CAAD,CAAiBG,CAAjB,CAAiCE,CAAjC,CAFwB,CAJvB,CASH,MAAO,CACLC,iBAAiB,CAAjBA,CADK,CAELG,YAAY,CAAEb,KAAK,CAACc,WAAN,CACZ,SAACC,CAAD,QAASA,EAAG,EAAIL,CAAhB,CADY,CAEZ,CAACA,CAAD,CAFY,CAFT,CAOR,CA3BM,CA6BP,MAAO,IAAME,qBAAoB,CAAG,SAClCR,CADkC,CAElCY,CAFkC,CAGlCP,CAHkC,CAIvB,CACX,GAAI,CAACO,CAAL,CACE,MAAOZ,EAAc,CAACa,MAAtB,CAFS,mCAKwBb,CAAc,CAACc,OAAf,EALxB,MAKX,2BAA6D,iCAAjDH,CAAiD,MAA5CI,CAA4C,MACrDC,CAAU,CAAGL,CAAG,GAAKX,CAAc,CAACa,MAAf,CAAwB,CADQ,CAErDI,CAAsB,CAAGjB,CAAc,CAACkB,KAAf,CAAqB,CAArB,CAAwBP,CAAxB,CAF4B,CAGrDP,CAAK,CACTW,CAAa,CAACI,IAAd,CACArB,YAAY,CAACmB,CAAD,CADZ,EAECD,CAAU,CAAG,CAAH,CAAOD,CAAa,CAACK,GAAd,CAAoBf,CAFtC,CAJyD,CAO3D,GAAID,CAAK,CAAGQ,CAAZ,CACE,MAAOD,EAEV,CAfU,+BAiBX,MAAOX,EAAc,CAACa,MACvB,CAtBM"}
|