@consta/uikit 4.10.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/Combobox.js +1 -1
- package/__internal__/src/components/Combobox/Combobox.js.map +1 -1
- package/__internal__/src/components/Combobox/helpers.d.ts +5 -3
- 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/DatePickerFieldTypeDate/DatePickerFieldTypeDate.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/DatePickerFieldTypeDate.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/DatePickerFieldTypeDate.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/helpers.d.ts +13 -4
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/helpers.d.ts +16 -4
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/helpers.d.ts +13 -4
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/helpers.d.ts +16 -4
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.d.ts +13 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.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/ProgressStepBar/ProgressStepBar.css +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBar.js +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBar.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.css +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.js +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.css +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/helpers.d.ts +2 -0
- package/__internal__/src/components/ProgressStepBar/helpers.js +1 -1
- package/__internal__/src/components/ProgressStepBar/helpers.js.map +1 -1
- package/__internal__/src/components/SelectComponents/Select.css +1 -1
- package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.js +1 -1
- package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.js.map +1 -1
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.css +1 -1
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.d.ts +2 -1
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.js +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/components/TextField/TextField.css +1 -1
- package/__internal__/src/components/TextField/index.d.ts +1 -0
- package/__internal__/src/components/TextField/index.js +1 -1
- package/__internal__/src/components/TextField/index.js.map +1 -1
- package/__internal__/src/components/TextField/useIMask.d.ts +15 -0
- package/__internal__/src/components/TextField/useIMask.js +2 -0
- package/__internal__/src/components/TextField/useIMask.js.map +1 -0
- package/__internal__/src/components/UserSelect/UserSelect.js +1 -1
- package/__internal__/src/components/UserSelect/UserSelect.js.map +1 -1
- package/__internal__/src/components/UserSelect/UserSelectItem/UserSelectItem.css +1 -1
- package/__internal__/src/components/UserSelect/UserSelectValue/UserSelectValue.css +1 -1
- package/__internal__/src/components/UserSelect/UserSelectValue/UserSelectValue.js +1 -1
- package/__internal__/src/components/UserSelect/UserSelectValue/UserSelectValue.js.map +1 -1
- package/__internal__/src/components/UserSelect/helpers.d.ts +3 -1
- package/__internal__/src/components/UserSelect/helpers.js.map +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/__internal__/src/hooks/useSelect/useSelect.js +1 -1
- package/__internal__/src/hooks/useSelect/useSelect.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerTypeTime.js","names":["React","forwardRef","useEffect","useRef","useClickOutside","
|
|
1
|
+
{"version":3,"file":"DatePickerTypeTime.js","names":["React","forwardRef","useEffect","useRef","useClickOutside","setRef","DatePickerDropdown","DatePickerFieldTypeTime","datePickerPropFormatTypeDateTime","getDropdownZIndex","getMultiplicityTime","datePickerPropDateTimeViewDefault","useDropdownVisible","DatePickerTypeTime","props","ref","events","dateTimeView","locale","dropdownForm","dropdownClassName","onFocus","onBlur","multiplicityHoursProp","multiplicityHours","multiplicityMinutesProp","multiplicityMinutes","multiplicitySecondsProp","multiplicitySeconds","renderAdditionalControls","currentVisibleDate","onChangeCurrentVisibleDate","otherProps","format","fieldRef","calendarRef","calendarVisible","blocks","start","onFocusHandler","onBlurHandler","dropdown","onDropdownBlur","onDropdownFocus","close","current","isActive","ignoreClicksInsideRefs","handler","value","minDate","maxDate","onChange","style"],"sources":["../../../../../../src/components/DatePicker/DatePickerTypeTime/DatePickerTypeTime.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';\nimport { setRef } from '../../../utils/setRef';\nimport { DatePickerDropdown } from '../DatePickerDropdown/DatePickerDropdown';\nimport { DatePickerFieldTypeTime } from '../DatePickerFieldTypeTime/DatePickerFieldTypeTime';\nimport {\n datePickerPropFormatTypeDateTime,\n getDropdownZIndex,\n getMultiplicityTime,\n} from '../helpers';\nimport {\n datePickerPropDateTimeViewDefault,\n DatePickerTypeComponent,\n} from '../types';\nimport { useDropdownVisible } from '../useDropdownVisible';\n\nexport const DatePickerTypeTime: DatePickerTypeComponent<'time'> = forwardRef(\n (props, ref) => {\n const {\n events,\n dateTimeView = datePickerPropDateTimeViewDefault,\n locale,\n dropdownForm,\n dropdownClassName,\n onFocus,\n onBlur,\n multiplicityHours: multiplicityHoursProp,\n multiplicityMinutes: multiplicityMinutesProp,\n multiplicitySeconds: multiplicitySecondsProp,\n renderAdditionalControls,\n currentVisibleDate,\n onChangeCurrentVisibleDate,\n ...otherProps\n } = props;\n\n const [multiplicityHours, multiplicityMinutes, multiplicitySeconds] =\n getMultiplicityTime(\n otherProps.format || datePickerPropFormatTypeDateTime,\n multiplicityHoursProp,\n multiplicityMinutesProp,\n multiplicitySecondsProp,\n );\n\n const fieldRef = useRef<HTMLDivElement>(null);\n const calendarRef = useRef<HTMLDivElement>(null);\n\n const {\n calendarVisible,\n blocks: {\n start: { onFocus: onFocusHandler, onBlur: onBlurHandler },\n dropdown: { onBlur: onDropdownBlur, onFocus: onDropdownFocus },\n },\n close,\n } = useDropdownVisible(onFocus, onBlur);\n\n useEffect(() => {\n if (ref) {\n setRef(ref, fieldRef.current);\n }\n }, [ref, fieldRef]);\n\n useClickOutside({\n isActive: calendarVisible,\n ignoreClicksInsideRefs: [fieldRef, calendarRef],\n handler: close,\n });\n\n return (\n <>\n <DatePickerFieldTypeTime\n {...otherProps}\n ref={fieldRef}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n multiplicityHours={multiplicityHours}\n multiplicitySeconds={multiplicitySeconds}\n multiplicityMinutes={multiplicityMinutes}\n />\n <DatePickerDropdown\n ref={calendarRef}\n anchorRef={fieldRef}\n isOpen={calendarVisible}\n value={props.value || undefined}\n type=\"time\"\n view={dateTimeView}\n onFocus={onDropdownFocus}\n onBlur={onDropdownBlur}\n events={events}\n locale={locale}\n minDate={props.minDate}\n maxDate={props.maxDate}\n form={dropdownForm}\n className={dropdownClassName}\n onChange={props.onChange}\n renderAdditionalControls={renderAdditionalControls}\n multiplicityHours={multiplicityHours}\n multiplicitySeconds={multiplicitySeconds}\n multiplicityMinutes={multiplicityMinutes}\n zIndex={getDropdownZIndex(props.style)}\n />\n </>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["events","dateTimeView","locale","dropdownForm","dropdownClassName","onFocus","currentVisibleDate","onChangeCurrentVisibleDate","renderAdditionalControls"];import{addYears,startOfDecade}from"date-fns";import React,{forwardRef,useEffect,useRef}from"react";import{useClickOutside}from"../../../hooks/useClickOutside/useClickOutside";import{
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["events","dateTimeView","locale","dropdownForm","dropdownClassName","onFocus","onBlur","currentVisibleDate","onChangeCurrentVisibleDate","renderAdditionalControls"];import{addYears,startOfDecade}from"date-fns";import React,{forwardRef,useEffect,useRef}from"react";import{useClickOutside}from"../../../hooks/useClickOutside/useClickOutside";import{setRef}from"../../../utils/setRef";import{DatePickerDropdown}from"../DatePickerDropdown/DatePickerDropdown";import{DatePickerFieldTypeYear}from"../DatePickerFieldTypeYear/DatePickerFieldTypeYear";import{getDropdownZIndex}from"../helpers";import{datePickerPropDateTimeViewDefault}from"../types";import{useCurrentVisibleDate}from"../useCurrentVisibleDate";import{useDropdownVisible}from"../useDropdownVisible";export var DatePickerTypeYear=forwardRef(function(a,b){var c=a.events,d=a.dateTimeView,e=void 0===d?datePickerPropDateTimeViewDefault:d,f=a.locale,g=a.dropdownForm,h=a.dropdownClassName,i=a.onFocus,j=a.onBlur,k=a.currentVisibleDate,l=a.onChangeCurrentVisibleDate,m=a.renderAdditionalControls,n=_objectWithoutProperties(a,_excluded),o=useRef(null),p=useRef(null),q=useDropdownVisible(i,j),r=q.calendarVisible,s=q.blocks,t=s.start,u=t.onFocus,v=t.onBlur,w=s.dropdown,x=w.onBlur,y=w.onFocus,z=q.close,A=useCurrentVisibleDate({currentVisibleDate:k,maxDate:a.maxDate,minDate:a.minDate,value:a.value,startOfUnit:startOfDecade,onChangeCurrentVisibleDate:l,calendarVisible:r}),B=_slicedToArray(A,2),C=B[0],D=B[1];return useEffect(function(){b&&setRef(b,o.current)},[b,o]),useEffect(function(){if(a.value&&"classic"===e&&C){var b=startOfDecade(a.value);return void(b.getTime()!==C.getTime()&&D(b))}if(a.value&&"classic"!==e&&C){var c=startOfDecade(a.value);c.getTime()!==C.getTime()&&c.getTime()!==addYears(C,10).getTime()&&D(c)}},[a.value]),useClickOutside({isActive:r,ignoreClicksInsideRefs:[o,p],handler:z}),React.createElement(React.Fragment,null,React.createElement(DatePickerFieldTypeYear,Object.assign({},n,{ref:o,onFocus:u,onBlur:v})),React.createElement(DatePickerDropdown,{ref:p,anchorRef:o,className:h,isOpen:r,value:a.value||void 0,type:"year",view:e,events:c,locale:f,onFocus:y,onBlur:x,minDate:a.minDate,maxDate:a.maxDate,currentVisibleDate:C,form:g,onChange:function onChange(b){var c;null===(c=a.onChange)||void 0===c?void 0:c.call(a,b),z()},renderAdditionalControls:m,zIndex:getDropdownZIndex(a.style),onChangeCurrentVisibleDate:D}))});
|
|
2
2
|
//# sourceMappingURL=DatePickerTypeYear.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerTypeYear.js","names":["addYears","startOfDecade","React","forwardRef","useEffect","useRef","useClickOutside","
|
|
1
|
+
{"version":3,"file":"DatePickerTypeYear.js","names":["addYears","startOfDecade","React","forwardRef","useEffect","useRef","useClickOutside","setRef","DatePickerDropdown","DatePickerFieldTypeYear","getDropdownZIndex","datePickerPropDateTimeViewDefault","useCurrentVisibleDate","useDropdownVisible","DatePickerTypeYear","props","ref","events","dateTimeView","locale","dropdownForm","dropdownClassName","onFocus","onBlur","currentVisibleDateProp","currentVisibleDate","onChangeCurrentVisibleDate","renderAdditionalControls","otherProps","fieldRef","calendarRef","calendarVisible","blocks","start","onFocusHandler","onBlurHandler","dropdown","onDropdownBlur","onDropdownFocus","close","maxDate","minDate","value","startOfUnit","setCurrentVisibleDate","current","newVisibleDate","getTime","isActive","ignoreClicksInsideRefs","handler","params","onChange","style"],"sources":["../../../../../../src/components/DatePicker/DatePickerTypeYear/DatePickerTypeYear.tsx"],"sourcesContent":["import { addYears, startOfDecade } from 'date-fns';\nimport React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';\nimport { setRef } from '../../../utils/setRef';\nimport { DatePickerDropdown } from '../DatePickerDropdown/DatePickerDropdown';\nimport { DatePickerFieldTypeYear } from '../DatePickerFieldTypeYear/DatePickerFieldTypeYear';\nimport { getDropdownZIndex } from '../helpers';\nimport {\n datePickerPropDateTimeViewDefault,\n DatePickerTypeComponent,\n} from '../types';\nimport { useCurrentVisibleDate } from '../useCurrentVisibleDate';\nimport { useDropdownVisible } from '../useDropdownVisible';\n\nexport const DatePickerTypeYear: DatePickerTypeComponent<'year'> = forwardRef(\n (props, ref) => {\n const {\n events,\n dateTimeView = datePickerPropDateTimeViewDefault,\n locale,\n dropdownForm,\n dropdownClassName,\n onFocus,\n onBlur,\n currentVisibleDate: currentVisibleDateProp,\n onChangeCurrentVisibleDate,\n renderAdditionalControls,\n ...otherProps\n } = props;\n\n const fieldRef = useRef<HTMLDivElement>(null);\n const calendarRef = useRef<HTMLDivElement>(null);\n\n const {\n calendarVisible,\n blocks: {\n start: { onFocus: onFocusHandler, onBlur: onBlurHandler },\n dropdown: { onBlur: onDropdownBlur, onFocus: onDropdownFocus },\n },\n close,\n } = useDropdownVisible(onFocus, onBlur);\n\n const [currentVisibleDate, setCurrentVisibleDate] = useCurrentVisibleDate({\n currentVisibleDate: currentVisibleDateProp,\n maxDate: props.maxDate,\n minDate: props.minDate,\n value: props.value,\n startOfUnit: startOfDecade,\n onChangeCurrentVisibleDate,\n calendarVisible,\n });\n\n useEffect(() => {\n if (ref) {\n setRef(ref, fieldRef.current);\n }\n }, [ref, fieldRef]);\n\n useEffect(() => {\n if (props.value && dateTimeView === 'classic' && currentVisibleDate) {\n const newVisibleDate = startOfDecade(props.value);\n if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {\n setCurrentVisibleDate(newVisibleDate);\n }\n return;\n }\n if (props.value && dateTimeView !== 'classic' && currentVisibleDate) {\n const newVisibleDate = startOfDecade(props.value);\n if (\n newVisibleDate.getTime() !== currentVisibleDate.getTime() &&\n newVisibleDate.getTime() !==\n addYears(currentVisibleDate, 10).getTime()\n ) {\n setCurrentVisibleDate(newVisibleDate);\n }\n }\n }, [props.value]);\n\n useClickOutside({\n isActive: calendarVisible,\n ignoreClicksInsideRefs: [fieldRef, calendarRef],\n handler: close,\n });\n\n return (\n <>\n <DatePickerFieldTypeYear\n {...otherProps}\n ref={fieldRef}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n />\n <DatePickerDropdown\n ref={calendarRef}\n anchorRef={fieldRef}\n className={dropdownClassName}\n isOpen={calendarVisible}\n value={props.value || undefined}\n type=\"year\"\n view={dateTimeView}\n events={events}\n locale={locale}\n onFocus={onDropdownFocus}\n onBlur={onDropdownBlur}\n minDate={props.minDate}\n maxDate={props.maxDate}\n currentVisibleDate={currentVisibleDate}\n form={dropdownForm}\n onChange={(params) => {\n props.onChange?.(params);\n close();\n }}\n renderAdditionalControls={renderAdditionalControls}\n zIndex={getDropdownZIndex(props.style)}\n onChangeCurrentVisibleDate={setCurrentVisibleDate}\n />\n </>\n );\n },\n);\n"],"mappings":"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"}
|
package/__internal__/src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["events","dateTimeView","locale","dropdownForm","onFocus","onBlur","dropdownClassName","leftSide","rightSide","currentVisibleDate","onChangeCurrentVisibleDate","renderAdditionalControls","inputRef","name"];import{addYears,startOfDecade}from"date-fns";import React,{forwardRef,useEffect,useRef
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["events","dateTimeView","locale","dropdownForm","onFocus","onBlur","dropdownClassName","leftSide","rightSide","currentVisibleDate","onChangeCurrentVisibleDate","renderAdditionalControls","inputRef","name"];import{addYears,startOfDecade}from"date-fns";import React,{forwardRef,useEffect,useRef}from"react";import{useClickOutside}from"../../../hooks/useClickOutside/useClickOutside";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{DatePickerDropdown}from"../DatePickerDropdown/DatePickerDropdown";import{DatePickerFieldTypeYearRange}from"../DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange";import{getDropdownZIndex,normalizeRangeValue}from"../helpers";import{datePickerPropDateTimeViewDefault}from"../types";import{useCurrentVisibleDate}from"../useCurrentVisibleDate";import{useDropdownVisible}from"../useDropdownVisible";export var DatePickerTypeYearRange=forwardRef(function(a,b){var c,d,e,f,g=a.events,h=a.dateTimeView,i=void 0===h?datePickerPropDateTimeViewDefault:h,j=a.locale,k=a.dropdownForm,l=a.onFocus,m=a.onBlur,n=a.dropdownClassName,o=a.leftSide,p=a.rightSide,q=a.currentVisibleDate,r=a.onChangeCurrentVisibleDate,s=a.renderAdditionalControls,t=a.inputRef,u=a.name,v=_objectWithoutProperties(a,_excluded),w=useRef(null),x=useRef(null),y=useRef(null),z=useRef(null),A=useRef(null),B=useDropdownVisible(l,m),C=B.calendarVisible,D=B.blocks,E=D.start,F=E.onFocus,G=E.onBlur,H=D.dropdown,I=H.onBlur,J=H.onFocus,K=D.end,L=K.onFocus,M=K.onBlur,N=B.close,O=B.fieldType,P="start"===O,Q="end"===O,R=useCurrentVisibleDate({currentVisibleDate:q,maxDate:a.maxDate,minDate:a.minDate,value:a.value,startOfUnit:startOfDecade,onChangeCurrentVisibleDate:r,calendarVisible:C}),S=_slicedToArray(R,2),T=S[0],U=S[1];return useEffect(function(){var b,c;if(null!==(b=a.value)&&void 0!==b&&b[0]&&"classic"===i&&P){var d=startOfDecade(a.value[0]);return void(d.getTime()!==(null===T||void 0===T?void 0:T.getTime())&&U(d))}if(null!==(c=a.value)&&void 0!==c&&c[0]&&"classic"!==i&&P){var e=startOfDecade(a.value[0]);e.getTime()!==(null===T||void 0===T?void 0:T.getTime())&&e.getTime()!==(T&&addYears(T,10).getTime())&&U(e)}},[null===(c=a.value)||void 0===c||null===(d=c[0])||void 0===d?void 0:d.getTime(),C,P]),useEffect(function(){var b,c;if(null!==(b=a.value)&&void 0!==b&&b[1]&&"classic"===i&&Q){var d=startOfDecade(a.value[1]);return void(d.getTime()!==(null===T||void 0===T?void 0:T.getTime())&&U(d))}if(null!==(c=a.value)&&void 0!==c&&c[1]&&"classic"!==i&&Q){var e=startOfDecade(a.value[1]);e.getTime()!==(null===T||void 0===T?void 0:T.getTime())&&e.getTime()!==(T&&addYears(T,10).getTime())&&U(addYears(e,-10))}},[null===(e=a.value)||void 0===e||null===(f=e[1])||void 0===f?void 0:f.getTime(),C,Q]),useClickOutside({isActive:C,ignoreClicksInsideRefs:[w,x,A],handler:N}),React.createElement(React.Fragment,null,React.createElement(DatePickerFieldTypeYearRange,Object.assign({},v,{ref:b,startFieldRef:w,endFieldRef:x,startFieldInputRef:useForkRef([y,null===t||void 0===t?void 0:t[0]]),endFieldInputRef:useForkRef([z,null===t||void 0===t?void 0:t[1]]),startFieldOnFocus:F,endFieldOnFocus:L,startFieldLeftSide:Array.isArray(o)?null===o||void 0===o?void 0:o[0]:o,startFieldRightSide:Array.isArray(p)?null===p||void 0===p?void 0:p[0]:void 0,endFieldLeftSide:Array.isArray(o)?null===o||void 0===o?void 0:o[1]:void 0,endFieldRightSide:Array.isArray(p)?null===p||void 0===p?void 0:p[1]:p,startFieldOnBlur:G,endFieldOnBlur:M,startFocused:P,endFocused:Q,startFieldName:Array.isArray(u)?u[0]:"".concat(u,"_start"),endFieldName:Array.isArray(u)?u[1]:"".concat(u,"_end")})),React.createElement(DatePickerDropdown,{type:"year",ref:A,anchorRef:w,isOpen:C,onChangeCurrentVisibleDate:U,currentVisibleDate:T,value:a.value||void 0,view:i,events:g,locale:j,className:n,onFocus:J,onBlur:I,minDate:a.minDate,maxDate:a.maxDate,form:k,onChange:function hadleChange(b){var c=b.e,d=b.value;if(P){var e,f;null===(e=a.onChange)||void 0===e?void 0:e.call(a,{e:c,value:normalizeRangeValue([d,null===a||void 0===a||null===(f=a.value)||void 0===f?void 0:f[1]])})}if(Q){var g,h;null===(g=a.onChange)||void 0===g?void 0:g.call(a,{e:c,value:normalizeRangeValue([null===a||void 0===a||null===(h=a.value)||void 0===h?void 0:h[0],d])})}},renderAdditionalControls:s,zIndex:getDropdownZIndex(a.style)}))});
|
|
2
2
|
//# sourceMappingURL=DatePickerTypeYearRange.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerTypeYearRange.js","names":["addYears","startOfDecade","React","forwardRef","useEffect","useRef","useState","useClickOutside","useFlag","useForkRef","DatePickerDropdown","DatePickerFieldTypeYearRange","getDropdownZIndex","normalizeRangeValue","datePickerPropDateTimeViewDefault","useCurrentVisibleDate","DatePickerTypeYearRange","props","ref","events","dateTimeView","locale","dropdownForm","onFocus","onBlur","dropdownClassName","leftSide","rightSide","currentVisibleDateProp","currentVisibleDate","onChangeCurrentVisibleDate","renderAdditionalControls","inputRef","name","fieldProps","startFieldRef","endFieldRef","startFieldInputRef","endFieldInputRef","calendarRef","fieldFocused","setFieldFocused","startFocused","endFocused","calendarVisible","setCalendarVisible","maxDate","minDate","value","startOfUnit","setCurrentVisibleDate","newVisibleDate","getTime","isActive","ignoreClicksInsideRefs","handler","off","startFieldOnFocusHandler","e","on","Array","isArray","endFieldOnFocusHandler","startFieldOnBlurHandler","endFieldOnBlurHandler","hadleChange","onChange","style"],"sources":["../../../../../../src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.tsx"],"sourcesContent":["import { addYears, startOfDecade } from 'date-fns';\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';\nimport { useFlag } from '../../../hooks/useFlag/useFlag';\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport {\n DatePickerDropdown,\n DatePickerDropdownPropOnChange,\n} from '../DatePickerDropdown/DatePickerDropdown';\nimport { DatePickerFieldTypeYearRange } from '../DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange';\nimport { getDropdownZIndex, normalizeRangeValue } from '../helpers';\nimport {\n datePickerPropDateTimeViewDefault,\n DatePickerTypeComponent,\n} from '../types';\nimport { useCurrentVisibleDate } from '../useCurrentVisibleDate';\n\nexport const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'> =\n forwardRef((props, ref) => {\n const {\n events,\n dateTimeView = datePickerPropDateTimeViewDefault,\n locale,\n dropdownForm,\n onFocus,\n onBlur,\n dropdownClassName,\n leftSide,\n rightSide,\n currentVisibleDate: currentVisibleDateProp,\n onChangeCurrentVisibleDate,\n renderAdditionalControls,\n inputRef,\n name,\n ...fieldProps\n } = props;\n\n const startFieldRef = useRef<HTMLDivElement>(null);\n const endFieldRef = useRef<HTMLDivElement>(null);\n const startFieldInputRef = useRef<HTMLInputElement>(null);\n const endFieldInputRef = useRef<HTMLInputElement>(null);\n const calendarRef = useRef<HTMLDivElement>(null);\n\n const [fieldFocused, setFieldFocused] = useState<'start' | 'end' | false>(\n false,\n );\n\n const startFocused = fieldFocused === 'start';\n const endFocused = fieldFocused === 'end';\n\n const hadleChange: DatePickerDropdownPropOnChange = ({ e, value }) => {\n if (startFocused) {\n props.onChange?.({\n e,\n value: normalizeRangeValue([value, props?.value?.[1]]),\n });\n }\n if (endFocused) {\n props.onChange?.({\n e,\n value: normalizeRangeValue([props?.value?.[0], value]),\n });\n }\n };\n\n const [calendarVisible, setCalendarVisible] = useFlag(false);\n\n const [currentVisibleDate, setCurrentVisibleDate] = useCurrentVisibleDate({\n currentVisibleDate: currentVisibleDateProp,\n maxDate: props.maxDate,\n minDate: props.minDate,\n value: props.value,\n startOfUnit: startOfDecade,\n onChangeCurrentVisibleDate,\n calendarVisible,\n });\n\n const startFieldOnBlurHandler = (e: React.FocusEvent<HTMLElement>) =>\n Array.isArray(onBlur) ? onBlur[0]?.(e) : onBlur?.(e);\n\n const endFieldOnBlurHandler = (e: React.FocusEvent<HTMLElement>) =>\n Array.isArray(onBlur) ? onBlur[1]?.(e) : onBlur?.(e);\n\n const startFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {\n setFieldFocused('start');\n setCalendarVisible.on();\n Array.isArray(onFocus) ? onFocus[0]?.(e) : onFocus?.(e);\n };\n\n const endFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {\n setFieldFocused('end');\n setCalendarVisible.on();\n Array.isArray(onFocus) ? onFocus[1]?.(e) : onFocus?.(e);\n };\n\n // эфект для того чтобы календарь переключался при вводе с клавиатуры\n useEffect(() => {\n if (props.value?.[0] && dateTimeView === 'classic' && startFocused) {\n const newVisibleDate = startOfDecade(props.value[0]);\n if (newVisibleDate.getTime() !== currentVisibleDate?.getTime()) {\n setCurrentVisibleDate(newVisibleDate);\n }\n return;\n }\n if (props.value?.[0] && dateTimeView !== 'classic' && startFocused) {\n const newVisibleDate = startOfDecade(props.value[0]);\n if (\n newVisibleDate.getTime() !== currentVisibleDate?.getTime() &&\n newVisibleDate.getTime() !==\n (currentVisibleDate && addYears(currentVisibleDate, 10).getTime())\n ) {\n setCurrentVisibleDate(newVisibleDate);\n }\n }\n }, [props.value?.[0]?.getTime(), calendarVisible, startFocused]);\n\n useEffect(() => {\n if (props.value?.[1] && dateTimeView === 'classic' && endFocused) {\n const newVisibleDate = startOfDecade(props.value[1]);\n if (newVisibleDate.getTime() !== currentVisibleDate?.getTime()) {\n setCurrentVisibleDate(newVisibleDate);\n }\n return;\n }\n if (props.value?.[1] && dateTimeView !== 'classic' && endFocused) {\n const newVisibleDate = startOfDecade(props.value[1]);\n if (\n newVisibleDate.getTime() !== currentVisibleDate?.getTime() &&\n newVisibleDate.getTime() !==\n (currentVisibleDate && addYears(currentVisibleDate, 10).getTime())\n ) {\n setCurrentVisibleDate(addYears(newVisibleDate, -10));\n }\n }\n }, [props.value?.[1]?.getTime(), calendarVisible, endFocused]);\n\n useClickOutside({\n isActive: calendarVisible,\n ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],\n handler: () => {\n setFieldFocused(false);\n setCalendarVisible.off();\n },\n });\n\n return (\n <>\n <DatePickerFieldTypeYearRange\n {...fieldProps}\n ref={ref}\n startFieldRef={startFieldRef}\n endFieldRef={endFieldRef}\n startFieldInputRef={useForkRef([startFieldInputRef, inputRef?.[0]])}\n endFieldInputRef={useForkRef([endFieldInputRef, inputRef?.[1]])}\n startFieldOnFocus={startFieldOnFocusHandler}\n endFieldOnFocus={endFieldOnFocusHandler}\n startFieldLeftSide={\n Array.isArray(leftSide) ? leftSide?.[0] : leftSide\n }\n startFieldRightSide={\n Array.isArray(rightSide) ? rightSide?.[0] : undefined\n }\n endFieldLeftSide={Array.isArray(leftSide) ? leftSide?.[1] : undefined}\n endFieldRightSide={\n Array.isArray(rightSide) ? rightSide?.[1] : rightSide\n }\n startFieldOnBlur={startFieldOnBlurHandler}\n endFieldOnBlur={endFieldOnBlurHandler}\n startFocused={startFocused}\n endFocused={endFocused}\n startFieldName={Array.isArray(name) ? name[0] : `${name}_start`}\n endFieldName={Array.isArray(name) ? name[1] : `${name}_end`}\n />\n <DatePickerDropdown\n type=\"year\"\n ref={calendarRef}\n anchorRef={startFieldRef}\n isOpen={calendarVisible}\n onChangeCurrentVisibleDate={setCurrentVisibleDate}\n currentVisibleDate={currentVisibleDate}\n value={props.value || undefined}\n view={dateTimeView}\n events={events}\n locale={locale}\n className={dropdownClassName}\n minDate={props.minDate}\n maxDate={props.maxDate}\n form={dropdownForm}\n onChange={hadleChange}\n renderAdditionalControls={renderAdditionalControls}\n zIndex={getDropdownZIndex(props.style)}\n />\n </>\n );\n });\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePickerTypeYearRange.js","names":["addYears","startOfDecade","React","forwardRef","useEffect","useRef","useClickOutside","useForkRef","DatePickerDropdown","DatePickerFieldTypeYearRange","getDropdownZIndex","normalizeRangeValue","datePickerPropDateTimeViewDefault","useCurrentVisibleDate","useDropdownVisible","DatePickerTypeYearRange","props","ref","events","dateTimeView","locale","dropdownForm","onFocus","onBlur","dropdownClassName","leftSide","rightSide","currentVisibleDateProp","currentVisibleDate","onChangeCurrentVisibleDate","renderAdditionalControls","inputRef","name","fieldProps","startFieldRef","endFieldRef","startFieldInputRef","endFieldInputRef","calendarRef","calendarVisible","blocks","start","onStartFocus","onStartBlur","dropdown","onDropdownBlur","onDropdownFocus","end","onEndFocus","onEndBlur","close","fieldType","startFocused","endFocused","maxDate","minDate","value","startOfUnit","setCurrentVisibleDate","newVisibleDate","getTime","isActive","ignoreClicksInsideRefs","handler","Array","isArray","hadleChange","e","onChange","style"],"sources":["../../../../../../src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.tsx"],"sourcesContent":["import { addYears, startOfDecade } from 'date-fns';\nimport React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport {\n DatePickerDropdown,\n DatePickerDropdownPropOnChange,\n} from '../DatePickerDropdown/DatePickerDropdown';\nimport { DatePickerFieldTypeYearRange } from '../DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange';\nimport { getDropdownZIndex, normalizeRangeValue } from '../helpers';\nimport {\n datePickerPropDateTimeViewDefault,\n DatePickerTypeComponent,\n} from '../types';\nimport { useCurrentVisibleDate } from '../useCurrentVisibleDate';\nimport { useDropdownVisible } from '../useDropdownVisible';\n\nexport const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'> =\n forwardRef((props, ref) => {\n const {\n events,\n dateTimeView = datePickerPropDateTimeViewDefault,\n locale,\n dropdownForm,\n onFocus,\n onBlur,\n dropdownClassName,\n leftSide,\n rightSide,\n currentVisibleDate: currentVisibleDateProp,\n onChangeCurrentVisibleDate,\n renderAdditionalControls,\n inputRef,\n name,\n ...fieldProps\n } = props;\n\n const startFieldRef = useRef<HTMLDivElement>(null);\n const endFieldRef = useRef<HTMLDivElement>(null);\n const startFieldInputRef = useRef<HTMLInputElement>(null);\n const endFieldInputRef = useRef<HTMLInputElement>(null);\n const calendarRef = useRef<HTMLDivElement>(null);\n\n const {\n calendarVisible,\n blocks: {\n start: { onFocus: onStartFocus, onBlur: onStartBlur },\n dropdown: { onBlur: onDropdownBlur, onFocus: onDropdownFocus },\n end: { onFocus: onEndFocus, onBlur: onEndBlur },\n },\n close,\n fieldType,\n } = useDropdownVisible(onFocus, onBlur);\n\n const startFocused = fieldType === 'start';\n const endFocused = fieldType === 'end';\n\n const hadleChange: DatePickerDropdownPropOnChange = ({ e, value }) => {\n if (startFocused) {\n props.onChange?.({\n e,\n value: normalizeRangeValue([value, props?.value?.[1]]),\n });\n }\n if (endFocused) {\n props.onChange?.({\n e,\n value: normalizeRangeValue([props?.value?.[0], value]),\n });\n }\n };\n\n const [currentVisibleDate, setCurrentVisibleDate] = useCurrentVisibleDate({\n currentVisibleDate: currentVisibleDateProp,\n maxDate: props.maxDate,\n minDate: props.minDate,\n value: props.value,\n startOfUnit: startOfDecade,\n onChangeCurrentVisibleDate,\n calendarVisible,\n });\n\n // эфект для того чтобы календарь переключался при вводе с клавиатуры\n useEffect(() => {\n if (props.value?.[0] && dateTimeView === 'classic' && startFocused) {\n const newVisibleDate = startOfDecade(props.value[0]);\n if (newVisibleDate.getTime() !== currentVisibleDate?.getTime()) {\n setCurrentVisibleDate(newVisibleDate);\n }\n return;\n }\n if (props.value?.[0] && dateTimeView !== 'classic' && startFocused) {\n const newVisibleDate = startOfDecade(props.value[0]);\n if (\n newVisibleDate.getTime() !== currentVisibleDate?.getTime() &&\n newVisibleDate.getTime() !==\n (currentVisibleDate && addYears(currentVisibleDate, 10).getTime())\n ) {\n setCurrentVisibleDate(newVisibleDate);\n }\n }\n }, [props.value?.[0]?.getTime(), calendarVisible, startFocused]);\n\n useEffect(() => {\n if (props.value?.[1] && dateTimeView === 'classic' && endFocused) {\n const newVisibleDate = startOfDecade(props.value[1]);\n if (newVisibleDate.getTime() !== currentVisibleDate?.getTime()) {\n setCurrentVisibleDate(newVisibleDate);\n }\n return;\n }\n if (props.value?.[1] && dateTimeView !== 'classic' && endFocused) {\n const newVisibleDate = startOfDecade(props.value[1]);\n if (\n newVisibleDate.getTime() !== currentVisibleDate?.getTime() &&\n newVisibleDate.getTime() !==\n (currentVisibleDate && addYears(currentVisibleDate, 10).getTime())\n ) {\n setCurrentVisibleDate(addYears(newVisibleDate, -10));\n }\n }\n }, [props.value?.[1]?.getTime(), calendarVisible, endFocused]);\n\n useClickOutside({\n isActive: calendarVisible,\n ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],\n handler: close,\n });\n\n return (\n <>\n <DatePickerFieldTypeYearRange\n {...fieldProps}\n ref={ref}\n startFieldRef={startFieldRef}\n endFieldRef={endFieldRef}\n startFieldInputRef={useForkRef([startFieldInputRef, inputRef?.[0]])}\n endFieldInputRef={useForkRef([endFieldInputRef, inputRef?.[1]])}\n startFieldOnFocus={onStartFocus}\n endFieldOnFocus={onEndFocus}\n startFieldLeftSide={\n Array.isArray(leftSide) ? leftSide?.[0] : leftSide\n }\n startFieldRightSide={\n Array.isArray(rightSide) ? rightSide?.[0] : undefined\n }\n endFieldLeftSide={Array.isArray(leftSide) ? leftSide?.[1] : undefined}\n endFieldRightSide={\n Array.isArray(rightSide) ? rightSide?.[1] : rightSide\n }\n startFieldOnBlur={onStartBlur}\n endFieldOnBlur={onEndBlur}\n startFocused={startFocused}\n endFocused={endFocused}\n startFieldName={Array.isArray(name) ? name[0] : `${name}_start`}\n endFieldName={Array.isArray(name) ? name[1] : `${name}_end`}\n />\n <DatePickerDropdown\n type=\"year\"\n ref={calendarRef}\n anchorRef={startFieldRef}\n isOpen={calendarVisible}\n onChangeCurrentVisibleDate={setCurrentVisibleDate}\n currentVisibleDate={currentVisibleDate}\n value={props.value || undefined}\n view={dateTimeView}\n events={events}\n locale={locale}\n className={dropdownClassName}\n onFocus={onDropdownFocus}\n onBlur={onDropdownBlur}\n minDate={props.minDate}\n maxDate={props.maxDate}\n form={dropdownForm}\n onChange={hadleChange}\n renderAdditionalControls={renderAdditionalControls}\n zIndex={getDropdownZIndex(props.style)}\n />\n </>\n );\n });\n"],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type UseDropdownVisiblePropOnFocus = [
|
|
3
|
+
React.FocusEventHandler<HTMLElement>?,
|
|
4
|
+
React.FocusEventHandler<HTMLElement>?
|
|
5
|
+
] | React.FocusEventHandler<HTMLElement>;
|
|
6
|
+
declare type FieldType = 'start' | 'end' | undefined;
|
|
7
|
+
declare type FieldResult = {
|
|
8
|
+
flag: boolean;
|
|
9
|
+
onFocus: React.FocusEventHandler<HTMLElement>;
|
|
10
|
+
onBlur: React.FocusEventHandler<HTMLElement>;
|
|
11
|
+
};
|
|
12
|
+
declare type UseDropdownVisibleResult = {
|
|
13
|
+
calendarVisible: boolean;
|
|
14
|
+
blocks: {
|
|
15
|
+
start: FieldResult;
|
|
16
|
+
end: FieldResult;
|
|
17
|
+
dropdown: FieldResult;
|
|
18
|
+
};
|
|
19
|
+
close: () => void;
|
|
20
|
+
fieldType: FieldType;
|
|
21
|
+
};
|
|
22
|
+
declare type UseDropdownVisible = (onFocus: UseDropdownVisiblePropOnFocus | undefined, onBlur?: UseDropdownVisiblePropOnFocus) => UseDropdownVisibleResult;
|
|
23
|
+
export declare const useDropdownVisible: UseDropdownVisible;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffect,useState}from"react";import{useFlag}from"../../hooks/useFlag";export var useDropdownVisible=function(a,b){var c=useFlag(),d=_slicedToArray(c,2),e=d[0],f=d[1],g=useState(),h=_slicedToArray(g,2),i=h[0],j=h[1],k=useFlag(!1),l=_slicedToArray(k,2),m=l[0],n=l[1],o=useFlag(),p=_slicedToArray(o,2),q=p[0],r=p[1];useEffect(function(){m||e?r.on():r.off()},[e,m]);return{calendarVisible:q,close:function close(){r.off(),f.off(),n.off()},blocks:{start:{flag:e,onFocus:function onStartFocus(b){var c;j("start"),f.on(),Array.isArray(a)?null===(c=a[0])||void 0===c?void 0:c.call(a,b):null===a||void 0===a?void 0:a(b)},onBlur:function onStartBlur(a){var c;Array.isArray(b)?null===(c=b[0])||void 0===c?void 0:c.call(b,a):null===b||void 0===b?void 0:b(a),f.off()}},end:{flag:e,onFocus:function onEndFocus(b){var c;j("end"),f.on(),Array.isArray(a)?null===(c=a[1])||void 0===c?void 0:c.call(a,b):null===a||void 0===a?void 0:a(b)},onBlur:function onEndBlur(a){var c;Array.isArray(b)?null===(c=b[1])||void 0===c?void 0:c.call(b,a):null===b||void 0===b?void 0:b(a),f.off()}},dropdown:{flag:m,onFocus:function(){return n.on()},onBlur:function(){return n.off()}}},fieldType:i}};
|
|
2
|
+
//# sourceMappingURL=useDropdownVisible.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDropdownVisible.js","names":["useEffect","useState","useFlag","useDropdownVisible","onFocus","onBlur","fieldFocused","setFieldFocused","fieldType","setFieldType","dropdownFocused","setDropdownFocused","calendarVisible","setCalendarVisible","on","off","close","blocks","start","flag","onStartFocus","e","Array","isArray","onStartBlur","end","onEndFocus","onEndBlur","dropdown"],"sources":["../../../../../src/components/DatePicker/useDropdownVisible.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useFlag } from '##/hooks/useFlag';\n\ntype UseDropdownVisiblePropOnFocus =\n | [\n React.FocusEventHandler<HTMLElement>?,\n React.FocusEventHandler<HTMLElement>?,\n ]\n | React.FocusEventHandler<HTMLElement>;\n\ntype FieldType = 'start' | 'end' | undefined;\n\ntype FieldResult = {\n flag: boolean;\n onFocus: React.FocusEventHandler<HTMLElement>;\n onBlur: React.FocusEventHandler<HTMLElement>;\n};\n\ntype UseDropdownVisibleResult = {\n calendarVisible: boolean;\n blocks: {\n start: FieldResult;\n end: FieldResult;\n dropdown: FieldResult;\n };\n close: () => void;\n fieldType: FieldType;\n};\n\ntype UseDropdownVisible = (\n onFocus: UseDropdownVisiblePropOnFocus | undefined,\n onBlur?: UseDropdownVisiblePropOnFocus,\n) => UseDropdownVisibleResult;\n\nexport const useDropdownVisible: UseDropdownVisible = (onFocus, onBlur) => {\n const [fieldFocused, setFieldFocused] = useFlag();\n const [fieldType, setFieldType] = useState<FieldType>();\n const [dropdownFocused, setDropdownFocused] = useFlag(false);\n\n const [calendarVisible, setCalendarVisible] = useFlag();\n\n useEffect(() => {\n if (dropdownFocused || fieldFocused) {\n setCalendarVisible.on();\n } else {\n setCalendarVisible.off();\n }\n }, [fieldFocused, dropdownFocused]);\n\n const onStartFocus = (e: React.FocusEvent<HTMLElement>) => {\n setFieldType('start');\n setFieldFocused.on();\n Array.isArray(onFocus) ? onFocus[0]?.(e) : onFocus?.(e);\n };\n\n const onEndFocus = (e: React.FocusEvent<HTMLElement>) => {\n setFieldType('end');\n setFieldFocused.on();\n Array.isArray(onFocus) ? onFocus[1]?.(e) : onFocus?.(e);\n };\n\n const onStartBlur = (e: React.FocusEvent<HTMLElement>) => {\n Array.isArray(onBlur) ? onBlur[0]?.(e) : onBlur?.(e);\n setFieldFocused.off();\n };\n\n const onEndBlur = (e: React.FocusEvent<HTMLElement>) => {\n Array.isArray(onBlur) ? onBlur[1]?.(e) : onBlur?.(e);\n setFieldFocused.off();\n };\n\n const close = () => {\n setCalendarVisible.off();\n setFieldFocused.off();\n setDropdownFocused.off();\n };\n\n return {\n calendarVisible,\n close,\n blocks: {\n start: {\n flag: fieldFocused,\n onFocus: onStartFocus,\n onBlur: onStartBlur,\n },\n end: {\n flag: fieldFocused,\n onFocus: onEndFocus,\n onBlur: onEndBlur,\n },\n dropdown: {\n flag: dropdownFocused,\n onFocus: () => setDropdownFocused.on(),\n onBlur: () => setDropdownFocused.off(),\n },\n },\n fieldType,\n };\n};\n"],"mappings":"iEAAA,OAASA,SAAT,CAAoBC,QAApB,KAAoC,OAApC,CAEA,OAASC,OAAT,2BAiCA,MAAO,IAAMC,mBAAsC,CAAG,SAACC,CAAD,CAAUC,CAAV,CAAqB,OACjCH,OAAO,EAD0B,uBAClEI,CADkE,MACpDC,CADoD,QAEvCN,QAAQ,EAF+B,uBAElEO,CAFkE,MAEvDC,CAFuD,QAG3BP,OAAO,IAHoB,uBAGlEQ,CAHkE,MAGjDC,CAHiD,QAK3BT,OAAO,EALoB,uBAKlEU,CALkE,MAKjDC,CALiD,MAOzEb,SAAS,CAAC,UAAM,CACVU,CAAe,EAAIJ,CADT,CAEZO,CAAkB,CAACC,EAAnB,EAFY,CAIZD,CAAkB,CAACE,GAAnB,EAEH,CANQ,CAMN,CAACT,CAAD,CAAeI,CAAf,CANM,CAPgE,CA2CzE,MAAO,CACLE,eAAe,CAAfA,CADK,CAELI,KAAK,CARO,QAARA,MAAQ,EAAM,CAClBH,CAAkB,CAACE,GAAnB,EADkB,CAElBR,CAAe,CAACQ,GAAhB,EAFkB,CAGlBJ,CAAkB,CAACI,GAAnB,EACD,CAEM,CAGLE,MAAM,CAAE,CACNC,KAAK,CAAE,CACLC,IAAI,CAAEb,CADD,CAELF,OAAO,CAlCQ,QAAfgB,aAAe,CAACC,CAAD,CAAsC,OACzDZ,CAAY,CAAC,OAAD,CAD6C,CAEzDF,CAAe,CAACO,EAAhB,EAFyD,CAGzDQ,KAAK,CAACC,OAAN,CAAcnB,CAAd,YAAyBA,CAAO,CAAC,CAAD,CAAhC,qBAAyB,OAAAA,CAAO,CAAMiB,CAAN,CAAhC,QAA2CjB,CAA3C,WAA2CA,CAA3C,QAA2CA,CAAO,CAAGiB,CAAH,CACnD,CA4BU,CAGLhB,MAAM,CAvBQ,QAAdmB,YAAc,CAACH,CAAD,CAAsC,OACxDC,KAAK,CAACC,OAAN,CAAclB,CAAd,YAAwBA,CAAM,CAAC,CAAD,CAA9B,qBAAwB,OAAAA,CAAM,CAAMgB,CAAN,CAA9B,QAAyChB,CAAzC,WAAyCA,CAAzC,QAAyCA,CAAM,CAAGgB,CAAH,CADS,CAExDd,CAAe,CAACQ,GAAhB,EACD,CAiBU,CADD,CAMNU,GAAG,CAAE,CACHN,IAAI,CAAEb,CADH,CAEHF,OAAO,CAjCM,QAAbsB,WAAa,CAACL,CAAD,CAAsC,OACvDZ,CAAY,CAAC,KAAD,CAD2C,CAEvDF,CAAe,CAACO,EAAhB,EAFuD,CAGvDQ,KAAK,CAACC,OAAN,CAAcnB,CAAd,YAAyBA,CAAO,CAAC,CAAD,CAAhC,qBAAyB,OAAAA,CAAO,CAAMiB,CAAN,CAAhC,QAA2CjB,CAA3C,WAA2CA,CAA3C,QAA2CA,CAAO,CAAGiB,CAAH,CACnD,CA2BQ,CAGHhB,MAAM,CAvBM,QAAZsB,UAAY,CAACN,CAAD,CAAsC,OACtDC,KAAK,CAACC,OAAN,CAAclB,CAAd,YAAwBA,CAAM,CAAC,CAAD,CAA9B,qBAAwB,OAAAA,CAAM,CAAMgB,CAAN,CAA9B,QAAyChB,CAAzC,WAAyCA,CAAzC,QAAyCA,CAAM,CAAGgB,CAAH,CADO,CAEtDd,CAAe,CAACQ,GAAhB,EACD,CAiBQ,CANC,CAWNa,QAAQ,CAAE,CACRT,IAAI,CAAET,CADE,CAERN,OAAO,CAAE,iBAAMO,EAAkB,CAACG,EAAnB,EAAN,CAFD,CAGRT,MAAM,CAAE,iBAAMM,EAAkB,CAACI,GAAnB,EAAN,CAHA,CAXJ,CAHH,CAoBLP,SAAS,CAATA,CApBK,CAsBR,CAjEM"}
|
package/__internal__/src/components/EventInterceptor/propsHandlers/useSelectEventsHandler.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{useEffect}from"react";import{useFlag}from"../../../hooks/useFlag";import{defaultGetItemLabel}from"../../Select/helpers";export var useSelectEventsHandler=function(a,b,c){var d=_objectSpread({},a),e=useFlag(),f=_slicedToArray(e,2),g=f[0],h=f[1];return useEffect(function(){h.on()},[d.value]),d.onFocus=function(){var b;h.off();for(var c=arguments.length,d=Array(c),e=0;e<c;e++)d[e]=arguments[e];return null===(b=a.onFocus)||void 0===b?void 0:b.call.apply(b,[a].concat(d))},d.onBlur=function(){var e,f,h={component:"Select",event:"change",options:{placeholder:d.placeholder,label:d.value?(null!==(e=d.getItemLabel)&&void 0!==e?e:defaultGetItemLabel)(d.value):void 0,value:d.value,pageURL:window.location.href,DOMRef:c.current,props:d}};g&&b(h);for(var i=arguments.length,j=Array(i),k=0;k<i;k++)j[k]=arguments[k];return null===(f=a.onBlur)||void 0===f?void 0:f.call.apply(f,[a].concat(j))},d};
|
|
2
2
|
//# sourceMappingURL=useSelectEventsHandler.js.map
|
package/__internal__/src/components/EventInterceptor/propsHandlers/useSelectEventsHandler.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectEventsHandler.js","names":["
|
|
1
|
+
{"version":3,"file":"useSelectEventsHandler.js","names":["useEffect","useFlag","defaultGetItemLabel","useSelectEventsHandler","props","handler","ref","newProps","valueChanged","setValueChanged","on","value","onFocus","off","onfocusArgs","onBlur","component","event","options","placeholder","label","getItemLabel","pageURL","window","location","href","DOMRef","current","onBlurArgs"],"sources":["../../../../../../src/components/EventInterceptor/propsHandlers/useSelectEventsHandler.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { useFlag } from '##/hooks/useFlag';\n\nimport { defaultGetItemLabel, SelectProps } from '../../Select/helpers';\nimport { EventInterceptorHandler } from '../EventInterceptor';\n\nexport const useSelectEventsHandler = <PROPS extends SelectProps>(\n props: PROPS,\n handler: EventInterceptorHandler,\n ref: React.RefObject<HTMLDivElement | null>,\n) => {\n const newProps: PROPS = { ...props };\n const [valueChanged, setValueChanged] = useFlag();\n\n useEffect(() => {\n setValueChanged.on();\n }, [newProps.value]);\n\n newProps.onFocus = (...onfocusArgs) => {\n setValueChanged.off();\n return props.onFocus?.(...onfocusArgs);\n };\n\n newProps.onBlur = (...onBlurArgs) => {\n const value = {\n component: 'Select' as const,\n event: 'change',\n options: {\n placeholder: newProps.placeholder,\n label: newProps.value\n ? (newProps.getItemLabel ?? defaultGetItemLabel)(newProps.value)\n : undefined,\n value: newProps.value,\n pageURL: window.location.href,\n DOMRef: ref.current,\n props: newProps,\n },\n };\n valueChanged && handler!(value);\n return props.onBlur?.(...onBlurArgs);\n };\n\n return newProps;\n};\n"],"mappings":"suBAAA,OAAgBA,SAAhB,KAAiC,OAAjC,CAEA,OAASC,OAAT,8BAEA,OAASC,mBAAT,4BAGA,MAAO,IAAMC,uBAAsB,CAAG,SACpCC,CADoC,CAEpCC,CAFoC,CAGpCC,CAHoC,CAIjC,IACGC,EAAe,kBAAQH,CAAR,CADlB,GAEqCH,OAAO,EAF5C,uBAEIO,CAFJ,MAEkBC,CAFlB,MAgCH,MA5BAT,UAAS,CAAC,UAAM,CACdS,CAAe,CAACC,EAAhB,EACD,CAFQ,CAEN,CAACH,CAAQ,CAACI,KAAV,CAFM,CA4BT,CAxBAJ,CAAQ,CAACK,OAAT,CAAmB,UAAoB,OACrCH,CAAe,CAACI,GAAhB,EADqC,4BAAhBC,CAAgB,sBAAhBA,CAAgB,iBAErC,iBAAOV,CAAK,CAACQ,OAAb,qBAAO,gBAAAR,CAAK,QAAL,CAAmBU,CAAnB,EACR,CAqBD,CAnBAP,CAAQ,CAACQ,MAAT,CAAkB,UAAmB,SAC7BJ,CAAK,CAAG,CACZK,SAAS,CAAE,QADC,CAEZC,KAAK,CAAE,QAFK,CAGZC,OAAO,CAAE,CACPC,WAAW,CAAEZ,CAAQ,CAACY,WADf,CAEPC,KAAK,CAAEb,CAAQ,CAACI,KAAT,CACH,WAACJ,CAAQ,CAACc,YAAV,gBAA0BnB,mBAA1B,EAA+CK,CAAQ,CAACI,KAAxD,CADG,OAFA,CAKPA,KAAK,CAAEJ,CAAQ,CAACI,KALT,CAMPW,OAAO,CAAEC,MAAM,CAACC,QAAP,CAAgBC,IANlB,CAOPC,MAAM,CAAEpB,CAAG,CAACqB,OAPL,CAQPvB,KAAK,CAAEG,CARA,CAHG,CADqB,CAenCC,CAAY,EAAIH,CAAO,CAAEM,CAAF,CAfY,4BAAfiB,CAAe,sBAAfA,CAAe,iBAgBnC,iBAAOxB,CAAK,CAACW,MAAb,qBAAO,gBAAAX,CAAK,QAAL,CAAkBwB,CAAlB,EACR,CAED,CAAOrB,CACR,CArCM"}
|
package/__internal__/src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.d.ts
CHANGED
|
@@ -82,7 +82,7 @@ export declare const useTextFieldEventsHandler: <P extends {
|
|
|
82
82
|
onKeyUp?: React.KeyboardEventHandler<Element> | undefined;
|
|
83
83
|
onKeyUpCapture?: React.KeyboardEventHandler<Element> | undefined;
|
|
84
84
|
onKeyDown?: React.KeyboardEventHandler<Element> | undefined;
|
|
85
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "className" | "id" | "placeholder" | "tabIndex" | "children" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "size" | "caption" | "form" | "label" | "view" | "status" | "step" | "max" | "min" | "name" | "type" | "width" | "autoFocus" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly" | "required" | "cols" | "inputRef" | "
|
|
85
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "className" | "id" | "placeholder" | "tabIndex" | "children" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "size" | "caption" | "form" | "label" | "view" | "status" | "step" | "max" | "min" | "name" | "type" | "width" | "autoFocus" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly" | "required" | "cols" | "inputRef" | "state" | "focused" | "ariaLabel" | "labelPosition" | "incrementButtons" | "leftSide" | "rightSide" | "withClearButton" | "inputContainerRef" | "iconSize"> & {
|
|
86
86
|
rows?: undefined;
|
|
87
87
|
minRows?: undefined;
|
|
88
88
|
maxRows?: undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","active","label","innerOffset","disabled","className","leftSide","rightSide","rightIcon","leftIcon","as","checked","onClick","status","space"];import"./ListItem.css";import React,{forwardRef}from"react";import{Text}from"../../Text";import{cnMixSpace}from"../../../mixs/MixSpace";import{cn}from"../../../utils/bem";import{cnListItemGrid,renderSlot}from"../ListItemGrid";import{mapHorisontalSpase,mapHorisontalSpaseIncreased,mapItemVerticalPadding}from"../maps";import{defaultListPropSize}from"../types";export var cnListItem=cn("ListItem");var ListItemRender=function(a,b){var c=a.size,d=void 0===c?defaultListPropSize:c,e=a.active,f=a.label,g=a.innerOffset,h=a.disabled,i=a.className,j=a.leftSide,k=a.rightSide,l=a.rightIcon,m=a.leftIcon,n=a.as,o=a.checked,p=a.onClick,q=a.status,r=a.space,s=_objectWithoutProperties(a,_excluded),
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","active","label","innerOffset","disabled","className","leftSide","rightSide","rightIcon","leftIcon","as","checked","onClick","status","space","iconSize"];import"./ListItem.css";import React,{forwardRef}from"react";import{Text}from"../../Text";import{cnMixSpace}from"../../../mixs/MixSpace";import{cn}from"../../../utils/bem";import{cnListItemGrid,renderSlot}from"../ListItemGrid";import{mapHorisontalSpase,mapHorisontalSpaseIncreased,mapItemVerticalPadding}from"../maps";import{defaultListPropSize}from"../types";export var cnListItem=cn("ListItem");var ListItemRender=function(a,b){var c=a.size,d=void 0===c?defaultListPropSize:c,e=a.active,f=a.label,g=a.innerOffset,h=a.disabled,i=a.className,j=a.leftSide,k=a.rightSide,l=a.rightIcon,m=a.leftIcon,n=a.as,o=a.checked,p=a.onClick,q=a.status,r=a.space,s=a.iconSize,t=_objectWithoutProperties(a,_excluded),u=p&&!h?p:void 0;return React.createElement(Text,Object.assign({},t,{className:cnListItem({active:e,disabled:h,checked:o,interactive:!!u},[cnMixSpace(r||{pH:"increased"===g?mapHorisontalSpaseIncreased[d]:mapHorisontalSpase[d],pV:mapItemVerticalPadding[d]}),cnListItemGrid(),i]),as:n,onClick:u,lineHeight:"xs",size:d,ref:b,view:q}),renderSlot(j,"left",d,m,s),l||k||j||m?React.createElement("span",{className:cnListItemGrid("Slot",{position:"center"})},f):f,renderSlot(k,"right",d,l,s))};export var ListItem=forwardRef(ListItemRender);
|
|
2
2
|
//# sourceMappingURL=ListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","names":["React","forwardRef","Text","cnMixSpace","cn","cnListItemGrid","renderSlot","mapHorisontalSpase","mapHorisontalSpaseIncreased","mapItemVerticalPadding","defaultListPropSize","cnListItem","ListItemRender","props","ref","size","active","label","innerOffset","disabled","className","leftSide","rightSide","rightIcon","leftIcon","as","checked","onClick","status","space","otherProps","handleClick","interactive","pH","pV","position","ListItem"],"sources":["../../../../../../src/components/ListCanary/ListItem/ListItem.tsx"],"sourcesContent":["import './ListItem.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { Text } from '##/components/Text';\nimport { cnMixSpace } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\n\nimport { cnListItemGrid, renderSlot } from '../ListItemGrid';\nimport {\n mapHorisontalSpase,\n mapHorisontalSpaseIncreased,\n mapItemVerticalPadding,\n} from '../maps';\nimport {\n defaultListPropSize,\n ListItemComponent,\n ListItemProps,\n} from '../types';\n\nexport const cnListItem = cn('ListItem');\n\nconst ListItemRender = (\n props: ListItemProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const {\n size = defaultListPropSize,\n active,\n label,\n innerOffset,\n disabled,\n className,\n leftSide,\n rightSide,\n rightIcon,\n leftIcon,\n as,\n checked,\n onClick,\n status,\n space,\n ...otherProps\n } = props;\n\n const handleClick: React.MouseEventHandler<HTMLDivElement> | undefined =\n onClick && !disabled ? onClick : undefined;\n\n return (\n <Text\n {...otherProps}\n className={cnListItem(\n { active, disabled, checked, interactive: !!handleClick },\n [\n cnMixSpace(\n space || {\n pH:\n innerOffset === 'increased'\n ? mapHorisontalSpaseIncreased[size]\n : mapHorisontalSpase[size],\n pV: mapItemVerticalPadding[size],\n },\n ),\n cnListItemGrid(),\n className,\n ],\n )}\n as={as}\n onClick={handleClick}\n lineHeight=\"xs\"\n size={size}\n ref={ref}\n view={status}\n >\n {renderSlot(leftSide, 'left', size, leftIcon)}\n {!rightIcon && !rightSide && !leftSide && !leftIcon ? (\n label\n ) : (\n <span className={cnListItemGrid('Slot', { position: 'center' })}>\n {label}\n </span>\n )}\n {renderSlot(rightSide, 'right', size, rightIcon)}\n </Text>\n );\n};\n\nexport const ListItem = forwardRef(ListItemRender) as ListItemComponent;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.js","names":["React","forwardRef","Text","cnMixSpace","cn","cnListItemGrid","renderSlot","mapHorisontalSpase","mapHorisontalSpaseIncreased","mapItemVerticalPadding","defaultListPropSize","cnListItem","ListItemRender","props","ref","size","active","label","innerOffset","disabled","className","leftSide","rightSide","rightIcon","leftIcon","as","checked","onClick","status","space","iconSize","otherProps","handleClick","interactive","pH","pV","position","ListItem"],"sources":["../../../../../../src/components/ListCanary/ListItem/ListItem.tsx"],"sourcesContent":["import './ListItem.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { Text } from '##/components/Text';\nimport { cnMixSpace } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\n\nimport { cnListItemGrid, renderSlot } from '../ListItemGrid';\nimport {\n mapHorisontalSpase,\n mapHorisontalSpaseIncreased,\n mapItemVerticalPadding,\n} from '../maps';\nimport {\n defaultListPropSize,\n ListItemComponent,\n ListItemProps,\n} from '../types';\n\nexport const cnListItem = cn('ListItem');\n\nconst ListItemRender = (\n props: ListItemProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const {\n size = defaultListPropSize,\n active,\n label,\n innerOffset,\n disabled,\n className,\n leftSide,\n rightSide,\n rightIcon,\n leftIcon,\n as,\n checked,\n onClick,\n status,\n space,\n iconSize,\n ...otherProps\n } = props;\n\n const handleClick: React.MouseEventHandler<HTMLDivElement> | undefined =\n onClick && !disabled ? onClick : undefined;\n\n return (\n <Text\n {...otherProps}\n className={cnListItem(\n { active, disabled, checked, interactive: !!handleClick },\n [\n cnMixSpace(\n space || {\n pH:\n innerOffset === 'increased'\n ? mapHorisontalSpaseIncreased[size]\n : mapHorisontalSpase[size],\n pV: mapItemVerticalPadding[size],\n },\n ),\n cnListItemGrid(),\n className,\n ],\n )}\n as={as}\n onClick={handleClick}\n lineHeight=\"xs\"\n size={size}\n ref={ref}\n view={status}\n >\n {renderSlot(leftSide, 'left', size, leftIcon, iconSize)}\n {!rightIcon && !rightSide && !leftSide && !leftIcon ? (\n label\n ) : (\n <span className={cnListItemGrid('Slot', { position: 'center' })}>\n {label}\n </span>\n )}\n {renderSlot(rightSide, 'right', size, rightIcon, iconSize)}\n </Text>\n );\n};\n\nexport const ListItem = forwardRef(ListItemRender) as ListItemComponent;\n"],"mappings":"qQAAA,uBAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,IAAT,kBACA,OAASC,UAAT,8BACA,OAASC,EAAT,0BAEA,OAASC,cAAT,CAAyBC,UAAzB,uBACA,OACEC,kBADF,CAEEC,2BAFF,CAGEC,sBAHF,eAKA,OACEC,mBADF,gBAMA,MAAO,IAAMC,WAAU,CAAGP,EAAE,CAAC,UAAD,CAArB,CAEP,GAAMQ,eAAc,CAAG,SACrBC,CADqB,CAErBC,CAFqB,CAGlB,OAmBCD,CAnBD,CAEDE,IAFC,CAEDA,CAFC,YAEML,mBAFN,GAGDM,CAHC,CAmBCH,CAnBD,CAGDG,MAHC,CAIDC,CAJC,CAmBCJ,CAnBD,CAIDI,KAJC,CAKDC,CALC,CAmBCL,CAnBD,CAKDK,WALC,CAMDC,CANC,CAmBCN,CAnBD,CAMDM,QANC,CAODC,CAPC,CAmBCP,CAnBD,CAODO,SAPC,CAQDC,CARC,CAmBCR,CAnBD,CAQDQ,QARC,CASDC,CATC,CAmBCT,CAnBD,CASDS,SATC,CAUDC,CAVC,CAmBCV,CAnBD,CAUDU,SAVC,CAWDC,CAXC,CAmBCX,CAnBD,CAWDW,QAXC,CAYDC,CAZC,CAmBCZ,CAnBD,CAYDY,EAZC,CAaDC,CAbC,CAmBCb,CAnBD,CAaDa,OAbC,CAcDC,CAdC,CAmBCd,CAnBD,CAcDc,OAdC,CAeDC,CAfC,CAmBCf,CAnBD,CAeDe,MAfC,CAgBDC,CAhBC,CAmBChB,CAnBD,CAgBDgB,KAhBC,CAiBDC,CAjBC,CAmBCjB,CAnBD,CAiBDiB,QAjBC,CAkBEC,CAlBF,0BAmBClB,CAnBD,YAqBGmB,CAAgE,CACpEL,CAAO,EAAI,CAACR,CAAZ,CAAuBQ,CAAvB,OAtBC,CAwBH,MACE,qBAAC,IAAD,kBACMI,CADN,EAEE,SAAS,CAAEpB,UAAU,CACnB,CAAEK,MAAM,CAANA,CAAF,CAAUG,QAAQ,CAARA,CAAV,CAAoBO,OAAO,CAAPA,CAApB,CAA6BO,WAAW,CAAE,CAAC,CAACD,CAA5C,CADmB,CAEnB,CACE7B,UAAU,CACR0B,CAAK,EAAI,CACPK,EAAE,CACgB,WAAhB,GAAAhB,CAAW,CACPV,2BAA2B,CAACO,CAAD,CADpB,CAEPR,kBAAkB,CAACQ,CAAD,CAJjB,CAKPoB,EAAE,CAAE1B,sBAAsB,CAACM,CAAD,CALnB,CADD,CADZ,CAUEV,cAAc,EAVhB,CAWEe,CAXF,CAFmB,CAFvB,CAkBE,EAAE,CAAEK,CAlBN,CAmBE,OAAO,CAAEO,CAnBX,CAoBE,UAAU,CAAC,IApBb,CAqBE,IAAI,CAAEjB,CArBR,CAsBE,GAAG,CAAED,CAtBP,CAuBE,IAAI,CAAEc,CAvBR,GAyBGtB,UAAU,CAACe,CAAD,CAAW,MAAX,CAAmBN,CAAnB,CAAyBS,CAAzB,CAAmCM,CAAnC,CAzBb,CA0BIP,CAAD,EAAeD,CAAf,EAA6BD,CAA7B,EAA0CG,CAA1C,CAGC,4BAAM,SAAS,CAAEnB,cAAc,CAAC,MAAD,CAAS,CAAE+B,QAAQ,CAAE,QAAZ,CAAT,CAA/B,EACGnB,CADH,CAHD,CACCA,CA3BJ,CAiCGX,UAAU,CAACgB,CAAD,CAAY,OAAZ,CAAqBP,CAArB,CAA2BQ,CAA3B,CAAsCO,CAAtC,CAjCb,CAoCH,CAhED,CAkEA,MAAO,IAAMO,SAAQ,CAAGpC,UAAU,CAACW,cAAD,CAA3B"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './ListItemGrid.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { IconComponent } from "../../../icons/Icon";
|
|
3
|
+
import { IconComponent, IconPropSize } from "../../../icons/Icon";
|
|
4
4
|
import { ListPropSize } from '../types';
|
|
5
5
|
export declare const cnListItemGrid: import("@bem-react/classname").ClassNameFormatter;
|
|
6
|
-
export declare const renderSlot: (side: React.ReactNode, position: 'left' | 'right', size: ListPropSize, icon
|
|
6
|
+
export declare const renderSlot: (side: React.ReactNode, position: 'left' | 'right', size: ListPropSize, icon?: IconComponent, iconSize?: IconPropSize) => JSX.Element[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./ListItemGrid.css";import React from"react";import{cn}from"../../../utils/bem";import{mapIconSize}from"../maps";export var cnListItemGrid=cn("ListItemGrid");export var renderSlot=function(a,b,c,d){var
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./ListItemGrid.css";import React from"react";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";import{mapIconSize}from"../maps";export var cnListItemGrid=cn("ListItemGrid");export var renderSlot=function(a,b,c,d,e){var f=a?_toConsumableArray(Array.isArray(a)?a:[a]):[];if(d){var g=React.createElement(d,{size:getByMap(mapIconSize,c,e)});"left"===b&&f.push(g),"right"===b&&f.unshift(g)}return f.map(function(a,c){return React.createElement("div",{className:cnListItemGrid("Slot",{position:b}),key:cnListItemGrid("Slot",{position:b,index:c})},a)})};
|
|
2
2
|
//# sourceMappingURL=ListItemGrid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemGrid.js","names":["React","cn","mapIconSize","cnListItemGrid","renderSlot","side","position","size","icon","sides","Array","isArray","render","push","unshift","map","item","index"],"sources":["../../../../../../src/components/ListCanary/ListItemGrid/ListItemGrid.tsx"],"sourcesContent":["import './ListItemGrid.css';\n\nimport React from 'react';\n\nimport { IconComponent } from '##/icons/Icon';\nimport { cn } from '##/utils/bem';\n\nimport { mapIconSize } from '../maps';\nimport { ListPropSize } from '../types';\n\nexport const cnListItemGrid = cn('ListItemGrid');\n\nexport const renderSlot = (\n side: React.ReactNode,\n position: 'left' | 'right',\n size: ListPropSize,\n icon
|
|
1
|
+
{"version":3,"file":"ListItemGrid.js","names":["React","cn","getByMap","mapIconSize","cnListItemGrid","renderSlot","side","position","size","icon","iconSize","sides","Array","isArray","render","push","unshift","map","item","index"],"sources":["../../../../../../src/components/ListCanary/ListItemGrid/ListItemGrid.tsx"],"sourcesContent":["import './ListItemGrid.css';\n\nimport React from 'react';\n\nimport { IconComponent, IconPropSize } from '##/icons/Icon';\nimport { cn } from '##/utils/bem';\nimport { getByMap } from '##/utils/getByMap';\n\nimport { mapIconSize } from '../maps';\nimport { ListPropSize } from '../types';\n\nexport const cnListItemGrid = cn('ListItemGrid');\n\nexport const renderSlot = (\n side: React.ReactNode,\n position: 'left' | 'right',\n size: ListPropSize,\n icon?: IconComponent,\n iconSize?: IconPropSize,\n) => {\n const sides: React.ReactNode[] = side\n ? [...(Array.isArray(side) ? side : [side])]\n : [];\n if (icon) {\n const Icon = icon;\n const render = <Icon size={getByMap(mapIconSize, size, iconSize)} />;\n if (position === 'left') {\n sides.push(render);\n }\n if (position === 'right') {\n sides.unshift(render);\n }\n }\n return sides.map((item, index) => (\n <div\n className={cnListItemGrid('Slot', {\n position,\n })}\n key={cnListItemGrid('Slot', {\n position,\n index,\n })}\n >\n {item}\n </div>\n ));\n};\n"],"mappings":"yEAAA,2BAEA,MAAOA,MAAP,KAAkB,OAAlB,CAGA,OAASC,EAAT,0BACA,OAASC,QAAT,+BAEA,OAASC,WAAT,eAGA,MAAO,IAAMC,eAAc,CAAGH,EAAE,CAAC,cAAD,CAAzB,CAEP,MAAO,IAAMI,WAAU,CAAG,SACxBC,CADwB,CAExBC,CAFwB,CAGxBC,CAHwB,CAIxBC,CAJwB,CAKxBC,CALwB,CAMrB,CACH,GAAMC,EAAwB,CAAGL,CAAI,oBAC5BM,KAAK,CAACC,OAAN,CAAcP,CAAd,EAAsBA,CAAtB,CAA6B,CAACA,CAAD,CADD,EAEjC,EAFJ,CAGA,GAAIG,CAAJ,CAAU,IAEFK,EAAM,CAAG,oBADFL,CACE,EAAM,IAAI,CAAEP,QAAQ,CAACC,WAAD,CAAcK,CAAd,CAAoBE,CAApB,CAApB,EAFP,CAGS,MAAb,GAAAH,CAHI,EAINI,CAAK,CAACI,IAAN,CAAWD,CAAX,CAJM,CAMS,OAAb,GAAAP,CANI,EAONI,CAAK,CAACK,OAAN,CAAcF,CAAd,CAEH,CACD,MAAOH,EAAK,CAACM,GAAN,CAAU,SAACC,CAAD,CAAOC,CAAP,QACf,4BACE,SAAS,CAAEf,cAAc,CAAC,MAAD,CAAS,CAChCG,QAAQ,CAARA,CADgC,CAAT,CAD3B,CAIE,GAAG,CAAEH,cAAc,CAAC,MAAD,CAAS,CAC1BG,QAAQ,CAARA,CAD0B,CAE1BY,KAAK,CAALA,CAF0B,CAAT,CAJrB,EASGD,CATH,CADe,CAAV,CAaR,CAjCM"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconComponent } from '@consta/icons/Icon';
|
|
1
|
+
import { IconComponent, IconPropSize } from '@consta/icons/Icon';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { MixSpaceProps } from "../../mixs/MixSpace";
|
|
4
4
|
import { Group } from "../../utils/getGroups";
|
|
@@ -103,8 +103,9 @@ export declare type ListItemProps<AS extends keyof JSX.IntrinsicElements = 'div'
|
|
|
103
103
|
size?: ListPropSize;
|
|
104
104
|
innerOffset?: 'normal' | 'increased';
|
|
105
105
|
space?: MixSpaceProps;
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
iconSize?: IconPropSize;
|
|
107
|
+
}, AS>;
|
|
108
|
+
export declare type ListItemComponent = <AS extends keyof JSX.IntrinsicElements = 'div'>(props: ListItemProps<AS>) => React.ReactElement | null;
|
|
108
109
|
export declare type ListGroupLabelProps = PropsWithHTMLAttributesAndRef<{
|
|
109
110
|
size?: ListPropSize;
|
|
110
111
|
label: string;
|
|
@@ -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
|
-
.ProgressStepBar{display:inline-flex;max-width:100%;width:100%}.ProgressStepBar-List{display:flex;justify-content:space-between;position:relative}.ProgressStepBar-List::-webkit-scrollbar{display:none}.ProgressStepBar-List_direction_horizontal{flex-direction:row
|
|
1
|
+
.ProgressStepBar{--progress-step-bar-offset:0px;display:inline-flex;max-width:100%;width:100%}.ProgressStepBar_isOverflow{--progress-step-bar-offset:var(--space-2xs)}.ProgressStepBar_isOverflow .ProgressStepBar-List_direction_horizontal{overflow-x:scroll;overflow-y:visible}.ProgressStepBar-List{display:flex;justify-content:space-between;padding:var(--progress-step-bar-offset);position:relative}.ProgressStepBar-List::-webkit-scrollbar{display:none}.ProgressStepBar-List_direction_horizontal{flex-direction:row}.ProgressStepBar-List_direction_horizontal:not(.ProgressStepBar-List_overflow){min-width:100%}.ProgressStepBar-List_direction_horizontal .ProgressStepBar-Item:not(:last-child){padding-right:var(--space-xs)}.ProgressStepBar-List_direction_vertical{flex-direction:column}.ProgressStepBar-List_direction_vertical:not(.ProgressStepBar-List_overflow){min-height:100%}.ProgressStepBar-Button_side_left{margin-right:var(--space-2xs)}.ProgressStepBar-Button_side_right{margin-left:var(--space-2xs)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["steps","direction","size","className","activeStepIndex","onItemClick","getItemContent","getItemLabel","getItemPoint","getItemProgress","getItemStatus","getItemTooltipContent","getItemLineStatus","getItemOnClick","style"];import"./ProgressStepBar.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{createRef,forwardRef,useEffect,useMemo,useRef,useState}from"react";import{useComponentSize}from"../../hooks/useComponentSize/useComponentSize";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{Button}from"../Button/Button";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{cnProgressStepBar,getItemPosition,
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["steps","direction","size","className","activeStepIndex","onItemClick","getItemContent","getItemLabel","getItemPoint","getItemProgress","getItemStatus","getItemTooltipContent","getItemLineStatus","getItemOnClick","style"];import"./ProgressStepBar.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{createRef,forwardRef,useEffect,useMemo,useRef,useState}from"react";import{useComponentSize}from"../../hooks/useComponentSize/useComponentSize";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{Button}from"../Button/Button";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{calculateLines,cnProgressStepBar,getItemPosition,propDirectionDefault,propSizeDefault,withDefaultGetters}from"./helpers";import{ProgressStepBarItem}from"./ProgressStepBarItem/ProgressStepBarItem";import{ProgressStepBarLine}from"./ProgressStepBarLine/ProgressStepBarLine";export var COMPONENT_NAME="ProgressStepBar";function ProgressStepBarRender(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,withDefaultGetters(a),c),e=d.steps,f=void 0===e?[]:e,g=d.direction,h=void 0===g?propDirectionDefault:g,i=d.size,j=void 0===i?propSizeDefault:i,k=d.className,l=d.activeStepIndex,m=d.onItemClick,n=d.getItemContent,o=d.getItemLabel,p=d.getItemPoint,q=d.getItemProgress,r=d.getItemStatus,s=d.getItemTooltipContent,t=d.getItemLineStatus,u=d.getItemOnClick,v=d.style,w=_objectWithoutProperties(d,_excluded),x=useState(l||0),y=_slicedToArray(x,2),z=y[0],A=y[1],B=useRef(null),C=useComponentSize(c),D=C.width,E=C.height,F=useScrollElements(f),G=F.refs,H=F.scrollTo,I=useMemo(function(){return Array(f.length).fill(null).map(function(){return createRef()})},[f.length]),J=useMemo(function(){var a=[],b=calculateLines(G,h);return f.forEach(function(c,d){var e;d!==f.length-1&&a.push({status:t(c)||"normal",size:null!==(e=b[d])&&void 0!==e?e:0})}),a},[l,f,h,j,D,E]);useEffect(function(){A(l||0)},[l]),useEffect(function(){H(z)},[z]);var K=function(a){a&&0!==z&&A(z-1),a||z===f.length-1||A(z+1)},L=function(a,b){var c=u(a),d=m?function(d){m({e:d,item:a,index:b}),null===c||void 0===c?void 0:c(d)}:void 0;return{content:n(a),label:o(a),point:p(a),progress:q(a),status:"number"==typeof l&&l>=b?r(a)||"normal":"system",tooltipContent:s(a),size:j,position:getItemPosition(b,f.length),pointRef:I[b],direction:h,className:cnProgressStepBar("Item"),onClick:c||d,key:cnProgressStepBar({index:b}),tooltipZIndex:"number"==typeof(null===v||void 0===v?void 0:v.zIndex)?v.zIndex+1:void 0}},M=useOverflow({currentRef:B});return React.createElement("div",Object.assign({},w,{style:v,className:cnProgressStepBar({isOverflow:M},[k]),ref:useForkRef([b,c])}),M&&"vertical"!==h&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowLeft,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",className:cnProgressStepBar("Button",{side:"left"}),onClick:function onClick(){return K(!0)}}),React.createElement("div",{ref:B,className:cnProgressStepBar("List",{direction:h,overflow:M})},React.createElement(ProgressStepBarLine,{lines:J,size:j,direction:h,activeStepIndex:l}),f.map(function(a,b){return React.createElement(ProgressStepBarItem,Object.assign({ref:G[b]},L(a,b)))})),M&&"vertical"!==h&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowRight,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",className:cnProgressStepBar("Button",{side:"right"}),onClick:function onClick(){return K(!1)}}))}export var ProgressStepBar=forwardRef(ProgressStepBarRender);
|
|
2
2
|
//# sourceMappingURL=ProgressStepBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressStepBar.js","names":["IconArrowLeft","IconArrowRight","React","createRef","forwardRef","useEffect","useMemo","useRef","useState","useComponentSize","useForkRef","useOverflow","useScrollElements","Button","usePropsHandler","cnProgressStepBar","getItemPosition","getLineSize","propDirectionDefault","propSizeDefault","withDefaultGetters","ProgressStepBarItem","ProgressStepBarLine","COMPONENT_NAME","ProgressStepBarRender","props","ref","containerRef","steps","direction","size","className","activeStepIndex","onItemClick","getItemContent","getItemLabel","getItemPoint","getItemProgress","getItemStatus","getItemTooltipContent","getItemLineStatus","getItemOnClick","style","otherProps","lines","setLines","visibleIndex","setVisibleIndex","listRef","width","height","refs","scrollTo","stepsRef","Array","length","fill","map","linesArray","forEach","step","index","push","status","changePosition","prev","getStepItem","item","onClick","onItemClickHandler","e","content","label","point","progress","tooltipContent","position","pointRef","key","tooltipZIndex","zIndex","isOverflow","currentRef","side","overflow","ProgressStepBar"],"sources":["../../../../../src/components/ProgressStepBar/ProgressStepBar.tsx"],"sourcesContent":["import './ProgressStepBar.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, {\n createRef,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useComponentSize } from '../../hooks/useComponentSize/useComponentSize';\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useOverflow } from '../../hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';\nimport { Button } from '../Button/Button';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport {\n cnProgressStepBar,\n DefaultItem,\n getItemPosition,\n getLineSize,\n Line,\n ProgressStepBarComponent,\n ProgressStepBarItemProps,\n ProgressStepBarProps,\n propDirectionDefault,\n propSizeDefault,\n withDefaultGetters,\n} from './helpers';\nimport { ProgressStepBarItem } from './ProgressStepBarItem/ProgressStepBarItem';\nimport { ProgressStepBarLine } from './ProgressStepBarLine/ProgressStepBarLine';\n\nexport const COMPONENT_NAME = 'ProgressStepBar' as const;\n\nfunction ProgressStepBarRender<ITEM = DefaultItem>(\n props: ProgressStepBarProps<ITEM>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const containerRef = useRef<HTMLDivElement>(null);\n\n const {\n steps = [],\n direction = propDirectionDefault,\n size = propSizeDefault,\n className,\n activeStepIndex,\n onItemClick,\n getItemContent,\n getItemLabel,\n getItemPoint,\n getItemProgress,\n getItemStatus,\n getItemTooltipContent,\n getItemLineStatus,\n getItemOnClick,\n style,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), containerRef);\n\n const [lines, setLines] = useState<Line[]>([]);\n const [visibleIndex, setVisibleIndex] = useState<number>(\n activeStepIndex || 0,\n );\n\n const listRef = useRef<HTMLDivElement>(null);\n\n const { width, height } = useComponentSize(containerRef);\n\n const { refs, scrollTo } = useScrollElements(steps);\n\n const stepsRef = useMemo(\n () =>\n new Array(steps.length)\n .fill(null)\n .map(() => createRef<HTMLButtonElement>()),\n [steps.length],\n );\n\n useEffect(() => {\n if (steps.length > 0) {\n const linesArray: Line[] = [];\n steps.forEach((step, index) => {\n if (index !== steps.length - 1)\n linesArray.push({\n status: getItemLineStatus(step) || 'normal',\n size: getLineSize(containerRef, stepsRef[index + 1], direction),\n });\n });\n setLines(linesArray);\n }\n }, [activeStepIndex, steps, direction, size, width, height]);\n\n useEffect(() => {\n setVisibleIndex(activeStepIndex || 0);\n }, [activeStepIndex]);\n\n useEffect(() => {\n scrollTo(visibleIndex);\n }, [visibleIndex]);\n\n const changePosition = (prev: boolean) => {\n if (prev && visibleIndex !== 0) {\n setVisibleIndex(visibleIndex - 1);\n }\n if (!prev && visibleIndex !== steps.length - 1) {\n setVisibleIndex(visibleIndex + 1);\n }\n };\n\n const getStepItem: (item: ITEM, index: number) => ProgressStepBarItemProps = (\n item,\n index,\n ) => {\n const onClick = getItemOnClick(item);\n\n const onItemClickHandler = onItemClick\n ? (e: React.MouseEvent<Element, MouseEvent>) => {\n onItemClick({ e, item, index });\n onClick?.(e);\n }\n : undefined;\n\n return {\n content: getItemContent(item),\n label: getItemLabel(item),\n point: getItemPoint(item),\n progress: getItemProgress(item),\n status:\n typeof activeStepIndex === 'number' && activeStepIndex >= index\n ? getItemStatus(item) || 'normal'\n : 'system',\n tooltipContent: getItemTooltipContent(item),\n size,\n position: getItemPosition(index, steps.length),\n pointRef: stepsRef[index] as React.RefObject<HTMLButtonElement>,\n direction,\n onClick: onClick || onItemClickHandler,\n key: cnProgressStepBar({ index }),\n tooltipZIndex:\n typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined,\n };\n };\n\n const isOverflow = useOverflow({ currentRef: listRef });\n\n return (\n <div\n {...otherProps}\n style={style}\n className={cnProgressStepBar(null, [className])}\n ref={useForkRef([ref, containerRef])}\n >\n {isOverflow && direction !== 'vertical' && (\n <Button\n iconLeft={() => <IconArrowLeft size=\"xs\" />}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n className={cnProgressStepBar('Button', { side: 'left' })}\n onClick={() => changePosition(true)}\n />\n )}\n <div\n ref={listRef}\n className={cnProgressStepBar('List', {\n direction,\n overflow: isOverflow,\n })}\n >\n <ProgressStepBarLine\n lines={lines}\n size={size}\n direction={direction}\n activeStepIndex={activeStepIndex}\n />\n {steps.map((step, index) => (\n <ProgressStepBarItem\n ref={refs[index] as React.RefObject<HTMLDivElement>}\n {...getStepItem(step, index)}\n />\n ))}\n </div>\n {isOverflow && direction !== 'vertical' && (\n <Button\n iconLeft={() => <IconArrowRight size=\"xs\" />}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n className={cnProgressStepBar('Button', { side: 'right' })}\n onClick={() => changePosition(false)}\n />\n )}\n </div>\n );\n}\n\nexport const ProgressStepBar = forwardRef(\n ProgressStepBarRender,\n) as ProgressStepBarComponent;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ProgressStepBar.js","names":["IconArrowLeft","IconArrowRight","React","createRef","forwardRef","useEffect","useMemo","useRef","useState","useComponentSize","useForkRef","useOverflow","useScrollElements","Button","usePropsHandler","calculateLines","cnProgressStepBar","getItemPosition","propDirectionDefault","propSizeDefault","withDefaultGetters","ProgressStepBarItem","ProgressStepBarLine","COMPONENT_NAME","ProgressStepBarRender","props","ref","containerRef","steps","direction","size","className","activeStepIndex","onItemClick","getItemContent","getItemLabel","getItemPoint","getItemProgress","getItemStatus","getItemTooltipContent","getItemLineStatus","getItemOnClick","style","otherProps","visibleIndex","setVisibleIndex","listRef","width","height","refs","scrollTo","stepsRef","Array","length","fill","map","lines","linesArray","sizes","forEach","step","index","push","status","changePosition","prev","getStepItem","item","onClick","onItemClickHandler","e","content","label","point","progress","tooltipContent","position","pointRef","key","tooltipZIndex","zIndex","isOverflow","currentRef","side","overflow","ProgressStepBar"],"sources":["../../../../../src/components/ProgressStepBar/ProgressStepBar.tsx"],"sourcesContent":["import './ProgressStepBar.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, {\n createRef,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useComponentSize } from '../../hooks/useComponentSize/useComponentSize';\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useOverflow } from '../../hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';\nimport { Button } from '../Button/Button';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport {\n calculateLines,\n cnProgressStepBar,\n DefaultItem,\n getItemPosition,\n Line,\n ProgressStepBarComponent,\n ProgressStepBarItemProps,\n ProgressStepBarProps,\n propDirectionDefault,\n propSizeDefault,\n withDefaultGetters,\n} from './helpers';\nimport { ProgressStepBarItem } from './ProgressStepBarItem/ProgressStepBarItem';\nimport { ProgressStepBarLine } from './ProgressStepBarLine/ProgressStepBarLine';\n\nexport const COMPONENT_NAME = 'ProgressStepBar' as const;\n\nfunction ProgressStepBarRender<ITEM = DefaultItem>(\n props: ProgressStepBarProps<ITEM>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const containerRef = useRef<HTMLDivElement>(null);\n\n const {\n steps = [],\n direction = propDirectionDefault,\n size = propSizeDefault,\n className,\n activeStepIndex,\n onItemClick,\n getItemContent,\n getItemLabel,\n getItemPoint,\n getItemProgress,\n getItemStatus,\n getItemTooltipContent,\n getItemLineStatus,\n getItemOnClick,\n style,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), containerRef);\n\n const [visibleIndex, setVisibleIndex] = useState<number>(\n activeStepIndex || 0,\n );\n\n const listRef = useRef<HTMLDivElement>(null);\n\n const { width, height } = useComponentSize(containerRef);\n\n const { refs, scrollTo } = useScrollElements(steps);\n\n const stepsRef = useMemo(\n () =>\n new Array(steps.length)\n .fill(null)\n .map(() => createRef<HTMLButtonElement>()),\n [steps.length],\n );\n\n const lines = useMemo(() => {\n const linesArray: Line[] = [];\n const sizes = calculateLines(refs, direction);\n steps.forEach((step, index) => {\n if (index !== steps.length - 1)\n linesArray.push({\n status: getItemLineStatus(step) || 'normal',\n size: sizes[index] ?? 0,\n });\n });\n return linesArray;\n }, [activeStepIndex, steps, direction, size, width, height]);\n\n useEffect(() => {\n setVisibleIndex(activeStepIndex || 0);\n }, [activeStepIndex]);\n\n useEffect(() => {\n scrollTo(visibleIndex);\n }, [visibleIndex]);\n\n const changePosition = (prev: boolean) => {\n if (prev && visibleIndex !== 0) {\n setVisibleIndex(visibleIndex - 1);\n }\n if (!prev && visibleIndex !== steps.length - 1) {\n setVisibleIndex(visibleIndex + 1);\n }\n };\n\n const getStepItem: (item: ITEM, index: number) => ProgressStepBarItemProps = (\n item,\n index,\n ) => {\n const onClick = getItemOnClick(item);\n\n const onItemClickHandler = onItemClick\n ? (e: React.MouseEvent<Element, MouseEvent>) => {\n onItemClick({ e, item, index });\n onClick?.(e);\n }\n : undefined;\n\n return {\n content: getItemContent(item),\n label: getItemLabel(item),\n point: getItemPoint(item),\n progress: getItemProgress(item),\n status:\n typeof activeStepIndex === 'number' && activeStepIndex >= index\n ? getItemStatus(item) || 'normal'\n : 'system',\n tooltipContent: getItemTooltipContent(item),\n size,\n position: getItemPosition(index, steps.length),\n pointRef: stepsRef[index] as React.RefObject<HTMLButtonElement>,\n direction,\n className: cnProgressStepBar('Item'),\n onClick: onClick || onItemClickHandler,\n key: cnProgressStepBar({ index }),\n tooltipZIndex:\n typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined,\n };\n };\n\n const isOverflow = useOverflow({ currentRef: listRef });\n\n return (\n <div\n {...otherProps}\n style={style}\n className={cnProgressStepBar({ isOverflow }, [className])}\n ref={useForkRef([ref, containerRef])}\n >\n {isOverflow && direction !== 'vertical' && (\n <Button\n iconLeft={() => <IconArrowLeft size=\"xs\" />}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n className={cnProgressStepBar('Button', { side: 'left' })}\n onClick={() => changePosition(true)}\n />\n )}\n <div\n ref={listRef}\n className={cnProgressStepBar('List', {\n direction,\n overflow: isOverflow,\n })}\n >\n <ProgressStepBarLine\n lines={lines}\n size={size}\n direction={direction}\n activeStepIndex={activeStepIndex}\n />\n {steps.map((step, index) => (\n <ProgressStepBarItem\n ref={refs[index] as React.RefObject<HTMLDivElement>}\n {...getStepItem(step, index)}\n />\n ))}\n </div>\n {isOverflow && direction !== 'vertical' && (\n <Button\n iconLeft={() => <IconArrowRight size=\"xs\" />}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n className={cnProgressStepBar('Button', { side: 'right' })}\n onClick={() => changePosition(false)}\n />\n )}\n </div>\n );\n}\n\nexport const ProgressStepBar = forwardRef(\n ProgressStepBarRender,\n) as ProgressStepBarComponent;\n"],"mappings":"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"}
|
package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ProgressStepBarItem{align-items:flex-start;display:inline-flex;flex:1;height:100%;position:relative}.ProgressStepBarItem_direction_horizontal{flex-direction:column}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_xs{margin-bottom:var(--space-2xs)}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_m,.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_s{margin-bottom:var(--space-xs)}.ProgressStepBarItem_direction_vertical{flex-direction:row}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Point{margin-right:var(--space-xs)}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Content_size_xs{margin-top:-4px}.ProgressStepBarItem_size_xs{--progress-step-bar-item-point-size:var(--space-xs);--progress-step-bar-item-label-margin:var(--space-2xs)}.ProgressStepBarItem_size_s{--progress-step-bar-item-point-size:var(--space-m);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_size_m{--progress-step-bar-item-point-size:var(--space-xl);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_position_start{flex:1}.ProgressStepBarItem_position_start .ProgressStepBarItem-Content,.ProgressStepBarItem_position_start.ProgressStepBarItem_direction_horizontal{align-items:flex-start;text-align:left}.ProgressStepBarItem_position_center{flex:2}.ProgressStepBarItem_position_center .ProgressStepBarItemr-Content,.ProgressStepBarItem_position_center.ProgressStepBarItem_direction_horizontal{align-items:center;text-align:center}.ProgressStepBarItem_position_end{flex:1}.ProgressStepBarItem_position_end .ProgressStepBarItem-Content,.ProgressStepBarItem_position_end.ProgressStepBarItem_direction_horizontal{align-items:flex-end;text-align:right}.ProgressStepBarItem_status_system{--progress-step-bar-item-point-background:var(--color-bg-system);--progress-step-bar-item-point-content-color:var(--color-typo-secondary)}.ProgressStepBarItem_status_normal{--progress-step-bar-item-point-background:var(--color-bg-normal);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_success{--progress-step-bar-item-point-background:var(--color-bg-success);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_warning{--progress-step-bar-item-point-background:var(--color-bg-warning);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_alert{--progress-step-bar-item-point-background:var(--color-bg-alert);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem .ProgressStepBarItem-PointIcon,.ProgressStepBarItem .ProgressStepBarItem-PointText{color:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem .ProgressSpin{stroke:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem-Point{align-items:center;background-color:var(--progress-step-bar-item-point-background);border:none;border-radius:calc(var(--progress-step-bar-item-point-size)*.5);color:var(--color-bg-default);display:flex;justify-content:center;margin:0;min-height:var(--progress-step-bar-item-point-size);min-width:var(--progress-step-bar-item-point-size);padding:0;transition:background-color .3s}.ProgressStepBarItem-Point_pointer{cursor:pointer}.ProgressStepBarItem-PointText{color:var(--color-typo-secondary);transition:color .3s}.ProgressStepBarItem-Content_bottomOffset,.ProgressStepBarItem-Label{margin-bottom:var(--progress-step-bar-item-label-margin)}
|
|
1
|
+
.ProgressStepBarItem{align-items:flex-start;display:inline-flex;flex:1;height:100%;position:relative;width:100%}.ProgressStepBarItem_direction_horizontal{flex-direction:column}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_xs{margin-bottom:var(--space-2xs)}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_m,.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_s{margin-bottom:var(--space-xs)}.ProgressStepBarItem_direction_vertical{flex-direction:row}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Point{margin-right:var(--space-xs)}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Content_size_xs{margin-top:-4px}.ProgressStepBarItem_size_xs{--progress-step-bar-item-point-size:var(--space-xs);--progress-step-bar-item-label-margin:var(--space-2xs)}.ProgressStepBarItem_size_s{--progress-step-bar-item-point-size:var(--space-m);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_size_m{--progress-step-bar-item-point-size:var(--space-xl);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_position_start{flex:1}.ProgressStepBarItem_position_start .ProgressStepBarItem-Content,.ProgressStepBarItem_position_start.ProgressStepBarItem_direction_horizontal{align-items:flex-start;text-align:left}.ProgressStepBarItem_position_center{flex:2}.ProgressStepBarItem_position_center .ProgressStepBarItemr-Content,.ProgressStepBarItem_position_center.ProgressStepBarItem_direction_horizontal{align-items:center;text-align:center}.ProgressStepBarItem_position_end{flex:1}.ProgressStepBarItem_position_end .ProgressStepBarItem-Content,.ProgressStepBarItem_position_end.ProgressStepBarItem_direction_horizontal{align-items:flex-end;text-align:right}.ProgressStepBarItem_status_system{--progress-step-bar-item-point-background:var(--color-bg-system);--progress-step-bar-item-point-content-color:var(--color-typo-secondary)}.ProgressStepBarItem_status_normal{--progress-step-bar-item-point-background:var(--color-bg-normal);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_success{--progress-step-bar-item-point-background:var(--color-bg-success);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_warning{--progress-step-bar-item-point-background:var(--color-bg-warning);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_alert{--progress-step-bar-item-point-background:var(--color-bg-alert);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem .ProgressStepBarItem-PointIcon,.ProgressStepBarItem .ProgressStepBarItem-PointText{color:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem .ProgressSpin{stroke:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem-Point{align-items:center;background-color:var(--progress-step-bar-item-point-background);border:none;border-radius:calc(var(--progress-step-bar-item-point-size)*.5);color:var(--color-bg-default);display:flex;justify-content:center;margin:0;min-height:var(--progress-step-bar-item-point-size);min-width:var(--progress-step-bar-item-point-size);padding:0;transition:background-color .3s}.ProgressStepBarItem-Point_pointer{cursor:pointer}.ProgressStepBarItem-PointText{color:var(--color-typo-secondary);transition:color .3s}.ProgressStepBarItem-Content_bottomOffset,.ProgressStepBarItem-Label{margin-bottom:var(--progress-step-bar-item-label-margin)}
|