@consta/uikit 4.10.0 → 4.11.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 +3 -1
- package/__internal__/src/components/Combobox/helpers.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/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/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 +1 -0
- 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/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/useSelect/useSelect.js +1 -1
- package/__internal__/src/hooks/useSelect/useSelect.js.map +1 -1
- package/package.json +1 -1
package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["format","separator","placeholder","onChange","onError","minDate","maxDate","value","inputRef"];import React from"react";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{maxDateDefault,minDateDefault}from"../../../utils/date";import{TextField}from"../../TextField/TextField";import{datePickerPropFormatTypeMonth,datePickerPropPlaceholderTypeMonth,datePickerPropSeparatorDefault}from"../helpers";import{usePicker}from"./helpers";export var DatePickerFieldTypeMonth=React.forwardRef(function(a,b){var c=a.format,d=void 0===c?datePickerPropFormatTypeMonth:c,e=a.separator,f=void 0===e?datePickerPropSeparatorDefault:e,g=a.placeholder,h=void 0===g?datePickerPropPlaceholderTypeMonth:g,i=a.onChange,j=a.onError,k=a.minDate,l=void 0===k?minDateDefault:k,m=a.maxDate,n=void 0===m?maxDateDefault:m,o=a.value,p=a.inputRef,q=_objectWithoutProperties(a,_excluded),r=usePicker({value:o,format:d,separator:f,minDate:l,maxDate:n,onChange:i,onError:j}),s=r.stringValue,t=r.inputRef;return React.createElement(TextField,Object.assign({},q,{type:"text",inputContainerRef:b,inputRef:useForkRef([t,p]),value:s,placeholder:h}))});
|
|
2
2
|
//# sourceMappingURL=DatePickerFieldTypeMonth.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerFieldTypeMonth.js","names":["
|
|
1
|
+
{"version":3,"file":"DatePickerFieldTypeMonth.js","names":["React","useForkRef","maxDateDefault","minDateDefault","TextField","datePickerPropFormatTypeMonth","datePickerPropPlaceholderTypeMonth","datePickerPropSeparatorDefault","usePicker","DatePickerFieldTypeMonth","forwardRef","props","ref","format","separator","placeholder","onChange","onError","minDate","maxDate","value","inputRefProp","inputRef","otherProps","stringValue"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport { maxDateDefault, minDateDefault } from '../../../utils/date';\nimport { TextField } from '../../TextField/TextField';\nimport {\n datePickerPropFormatTypeMonth,\n datePickerPropPlaceholderTypeMonth,\n datePickerPropSeparatorDefault,\n} from '../helpers';\nimport { DatePickerFieldTypeMonthProps, usePicker } from './helpers';\n\nexport const DatePickerFieldTypeMonth = React.forwardRef<\n HTMLDivElement,\n DatePickerFieldTypeMonthProps\n>((props, ref) => {\n const {\n format = datePickerPropFormatTypeMonth,\n separator = datePickerPropSeparatorDefault,\n placeholder = datePickerPropPlaceholderTypeMonth,\n onChange,\n onError,\n minDate = minDateDefault,\n maxDate = maxDateDefault,\n value,\n inputRef: inputRefProp,\n ...otherProps\n } = props;\n\n const { stringValue, inputRef } = usePicker({\n value,\n format,\n separator,\n minDate,\n maxDate,\n onChange,\n onError,\n });\n\n return (\n <TextField\n {...otherProps}\n type=\"text\"\n inputContainerRef={ref}\n inputRef={useForkRef([inputRef, inputRefProp])}\n value={stringValue}\n placeholder={placeholder}\n />\n );\n});\n"],"mappings":"oMAAA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,UAAT,4CACA,OAASC,cAAT,CAAyBC,cAAzB,2BACA,OAASC,SAAT,iCACA,OACEC,6BADF,CAEEC,kCAFF,CAGEC,8BAHF,kBAKA,OAAwCC,SAAxC,iBAEA,MAAO,IAAMC,yBAAwB,CAAGT,KAAK,CAACU,UAAN,CAGtC,SAACC,CAAD,CAAQC,CAAR,CAAgB,OAYZD,CAZY,CAEdE,MAFc,CAEdA,CAFc,YAELR,6BAFK,KAYZM,CAZY,CAGdG,SAHc,CAGdA,CAHc,YAGFP,8BAHE,KAYZI,CAZY,CAIdI,WAJc,CAIdA,CAJc,YAIAT,kCAJA,GAKdU,CALc,CAYZL,CAZY,CAKdK,QALc,CAMdC,CANc,CAYZN,CAZY,CAMdM,OANc,GAYZN,CAZY,CAOdO,OAPc,CAOdA,CAPc,YAOJf,cAPI,KAYZQ,CAZY,CAQdQ,OARc,CAQdA,CARc,YAQJjB,cARI,GASdkB,CATc,CAYZT,CAZY,CASdS,KATc,CAUJC,CAVI,CAYZV,CAZY,CAUdW,QAVc,CAWXC,CAXW,0BAYZZ,CAZY,cAckBH,SAAS,CAAC,CAC1CY,KAAK,CAALA,CAD0C,CAE1CP,MAAM,CAANA,CAF0C,CAG1CC,SAAS,CAATA,CAH0C,CAI1CI,OAAO,CAAPA,CAJ0C,CAK1CC,OAAO,CAAPA,CAL0C,CAM1CH,QAAQ,CAARA,CAN0C,CAO1CC,OAAO,CAAPA,CAP0C,CAAD,CAd3B,CAcRO,CAdQ,GAcRA,WAdQ,CAcKF,CAdL,GAcKA,QAdL,CAwBhB,MACE,qBAAC,SAAD,kBACMC,CADN,EAEE,IAAI,CAAC,MAFP,CAGE,iBAAiB,CAAEX,CAHrB,CAIE,QAAQ,CAAEX,UAAU,CAAC,CAACqB,CAAD,CAAWD,CAAX,CAAD,CAJtB,CAKE,KAAK,CAAEG,CALT,CAME,WAAW,CAAET,CANf,GASH,CArCuC,CAAjC"}
|
|
@@ -43,8 +43,17 @@ export declare type DatePickerFieldTypeMonthProps = PropsWithHTMLAttributes<{
|
|
|
43
43
|
labelPosition?: 'top' | 'left';
|
|
44
44
|
withClearButton?: boolean;
|
|
45
45
|
}, HTMLDivElement>;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
declare type UsePickerProps = {
|
|
47
|
+
value?: Date | null;
|
|
48
|
+
onChange?: DatePickerFieldTypeMonthPropOnChange;
|
|
49
|
+
onError?: DatePickerPropOnError;
|
|
50
|
+
format: string;
|
|
51
|
+
separator: string;
|
|
52
|
+
minDate: Date;
|
|
53
|
+
maxDate: Date;
|
|
54
|
+
};
|
|
55
|
+
export declare const usePicker: (props: UsePickerProps) => {
|
|
56
|
+
stringValue: string | null;
|
|
57
|
+
inputRef: import("react").RefObject<HTMLInputElement>;
|
|
58
|
+
};
|
|
50
59
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{format as _format,isValid,parse as _parse}from"date-fns";import IMask from"imask";import{useCallback,useEffect,
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{format as _format,isValid,isWithinInterval,parse as _parse}from"date-fns";import IMask from"imask";import{useCallback,useEffect,useMemo,useState}from"react";import{useIMask}from"../../TextField";import{useMutableRef}from"../../../hooks/useMutableRef/useMutableRef";import{datePickerPropFormatTypeMonth,datePickerPropSeparatorDefault,getPartsDate}from"../helpers";import{datePickerErrorTypes}from"../types";export var usePicker=function(a){var b=a.value,c=a.onChange,d=a.onError,f=a.format,g=a.separator,h=a.maxDate,i=a.minDate,j=useMutableRef(c),k=useMutableRef(b),l=useMutableRef(d),m=useState(b&&isValid(b)?_format(b,f):null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useMutableRef(o),r=useCallback(function(a){var b=a.e,c=a.value;if(q.current!==c){p(c);var d=j.current,e=k.current;if(d){if(!c)return void(e&&d({e:b,value:null}));var m=getPartsDate(c,f,g,!1,["MM","yyyy"]),n=_slicedToArray(m,2),o=n[0],r=n[1];if(o&&r){var t=_parse("".concat(o).concat(datePickerPropSeparatorDefault).concat(r),datePickerPropFormatTypeMonth,new Date);if(!isWithinInterval(t,{start:i,end:h})){var s;return null===(s=l.current)||void 0===s?void 0:s.call(l,{type:datePickerErrorTypes[0],stringValue:c,MM:o,yyyy:r,date:t}),void(e&&d({e:b,value:null}))}d({e:b,value:t})}else e&&d({e:b,value:null})}}},[null===i||void 0===i?void 0:i.getTime(),null===h||void 0===h?void 0:h.getTime(),f,g]),s=useMemo(function(){return{mask:Date,pattern:f,blocks:{yyyy:{mask:IMask.MaskedRange,from:1,to:9999},MM:{mask:IMask.MaskedRange,from:1,to:12}},lazy:!0,autofix:!0,format:function format(a){return _format(a,f)},parse:function parse(a){return _parse(a,f,new Date)},validate:function validate(a){var b=getPartsDate(a,f,g,!1,["MM","yyyy"]),c=_slicedToArray(b,2),e=c[0],h=c[1];if(e&&h&&!isValid(_parse("".concat(e).concat(datePickerPropSeparatorDefault).concat(h),datePickerPropFormatTypeMonth,new Date))){var i;return d&&(null===(i=l.current)||void 0===i?void 0:i.call(l,{type:datePickerErrorTypes[1],stringValue:a,MM:e,yyyy:h})),!1}return!0}}},[f,g]),t=useIMask({value:o,onChange:function(a,b){return null===r||void 0===r?void 0:r(b)},maskOptions:s}),u=t.inputRef;return useEffect(function(){b&&isValid(b)?p(_format(b,f)):(null===o||void 0===o?void 0:o.length)===f.length&&p("")},[null===b||void 0===b?void 0:b.getTime()]),{stringValue:o,inputRef:u}};
|
|
2
2
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","names":["format","isValid","parse","IMask","useCallback","useEffect","useRef","useMutableRef","datePickerPropFormatTypeMonth","datePickerPropSeparatorDefault","getPartsDate","datePickerErrorTypes","useImask","formatProp","separator","inputRef","stringValue","onError","handleChanhe","imaskRef","onErrorRef","handleChanheRef","current","mask","Date","pattern","blocks","yyyy","MaskedRange","from","to","MM","lazy","autofix","date","string","validate","type","onAcept","e","value","on","off","updateValue"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeMonth/helpers.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport { format, isValid, parse } from 'date-fns';\nimport IMask from 'imask';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport {\n TextFieldPropForm,\n TextFieldPropSize,\n TextFieldPropStatus,\n TextFieldPropView,\n TextFieldPropWidth,\n} from '../../TextField/TextField';\nimport {\n datePickerPropFormatTypeMonth,\n datePickerPropSeparatorDefault,\n getPartsDate,\n} from '../helpers';\nimport { datePickerErrorTypes, DatePickerPropOnError } from '../types';\n\ntype DatePickerFieldTypeMonthPropOnChange = (props: {\n e: Event;\n value: Date | null;\n}) => void;\n\nexport type DatePickerFieldTypeMonthProps = PropsWithHTMLAttributes<\n {\n className?: string;\n value?: Date | null;\n onChange?: DatePickerFieldTypeMonthPropOnChange;\n onError?: DatePickerPropOnError;\n id?: string;\n name?: string;\n disabled?: boolean;\n size?: TextFieldPropSize;\n view?: TextFieldPropView;\n form?: TextFieldPropForm;\n status?: TextFieldPropStatus;\n width?: TextFieldPropWidth;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n onBlur?: React.FocusEventHandler<HTMLElement>;\n autoFocus?: boolean;\n placeholder?: string;\n leftSide?: string | IconComponent;\n rightSide?: string | IconComponent;\n readOnly?: boolean;\n required?: boolean;\n tabIndex?: number;\n inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;\n ariaLabel?: string;\n iconSize?: IconPropSize;\n children?: never;\n format?: string;\n separator?: string;\n minDate?: Date;\n maxDate?: Date;\n focused?: boolean;\n label?: string;\n caption?: string;\n labelPosition?: 'top' | 'left';\n withClearButton?: boolean;\n },\n HTMLDivElement\n>;\n\nexport const useImask = (\n formatProp: string,\n separator: string,\n inputRef: React.RefObject<HTMLInputElement>,\n stringValue: string | null,\n onError: DatePickerPropOnError | undefined,\n handleChanhe: (props: { e: Event; value: string | null }) => void,\n) => {\n const imaskRef = useRef<IMask.InputMask<IMask.MaskedDateOptions> | null>(\n null,\n );\n const onErrorRef = useMutableRef(onError);\n const handleChanheRef = useMutableRef(handleChanhe);\n\n // задаем маску и сохраняем обьект маски в ref\n // обнавляем при смене формата\n useEffect(() => {\n if (inputRef.current) {\n imaskRef.current = IMask(inputRef.current, {\n mask: Date,\n pattern: formatProp,\n blocks: {\n yyyy: {\n mask: IMask.MaskedRange,\n from: 1,\n to: 9999,\n },\n MM: {\n mask: IMask.MaskedRange,\n from: 1,\n to: 12,\n },\n },\n lazy: true,\n autofix: true,\n format: (date) => format(date, formatProp),\n parse: (string) => parse(string, formatProp, new Date()),\n validate: (string: string) => {\n const [MM, yyyy] = getPartsDate(\n string,\n formatProp,\n separator,\n false,\n ['MM', 'yyyy'],\n );\n\n if (\n MM &&\n yyyy &&\n !isValid(\n parse(\n `${MM}${datePickerPropSeparatorDefault}${yyyy}`,\n datePickerPropFormatTypeMonth,\n new Date(),\n ),\n )\n ) {\n onError &&\n onErrorRef.current?.({\n type: datePickerErrorTypes[1],\n stringValue: string,\n MM,\n yyyy,\n });\n\n return false;\n }\n\n return true;\n },\n // проблема в типах IMask\n }) as unknown as IMask.InputMask<IMask.MaskedDateOptions>;\n }\n }, [formatProp, separator]);\n\n // Нужно для синхранизации value c Imask,\n // так как value мы можем задать через пропс без самого ввода,\n // и Imask требует ручной синхронихации в этом случае\n const onAcept = useCallback((e: Event) => {\n handleChanheRef.current({ e, value: imaskRef.current?.value || null });\n }, []);\n\n useEffect(() => {\n imaskRef.current?.on('accept', onAcept);\n return () => {\n imaskRef.current?.off('accept', onAcept);\n };\n }, []);\n\n useEffect(() => {\n imaskRef.current?.updateValue();\n }, [stringValue]);\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"helpers.js","names":["format","isValid","isWithinInterval","parse","IMask","useCallback","useEffect","useMemo","useState","useIMask","useMutableRef","datePickerPropFormatTypeMonth","datePickerPropSeparatorDefault","getPartsDate","datePickerErrorTypes","usePicker","props","value","onChange","onError","formatProp","separator","maxDate","minDate","onChangeRef","valueRef","onErrorRef","stringValue","setStringValue","stringValueRef","handleChange","e","current","MM","yyyy","date","Date","start","end","type","getTime","options","mask","pattern","blocks","MaskedRange","from","to","lazy","autofix","string","validate","_val","params","maskOptions","inputRef","length"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeMonth/helpers.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport { format, isValid, isWithinInterval, parse } from 'date-fns';\nimport IMask from 'imask';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useIMask } from '##/components/TextField';\n\nimport { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport {\n TextFieldPropForm,\n TextFieldPropSize,\n TextFieldPropStatus,\n TextFieldPropView,\n TextFieldPropWidth,\n} from '../../TextField/TextField';\nimport {\n datePickerPropFormatTypeMonth,\n datePickerPropSeparatorDefault,\n getPartsDate,\n} from '../helpers';\nimport { datePickerErrorTypes, DatePickerPropOnError } from '../types';\n\ntype DatePickerFieldTypeMonthPropOnChange = (props: {\n e: Event;\n value: Date | null;\n}) => void;\n\nexport type DatePickerFieldTypeMonthProps = PropsWithHTMLAttributes<\n {\n className?: string;\n value?: Date | null;\n onChange?: DatePickerFieldTypeMonthPropOnChange;\n onError?: DatePickerPropOnError;\n id?: string;\n name?: string;\n disabled?: boolean;\n size?: TextFieldPropSize;\n view?: TextFieldPropView;\n form?: TextFieldPropForm;\n status?: TextFieldPropStatus;\n width?: TextFieldPropWidth;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n onBlur?: React.FocusEventHandler<HTMLElement>;\n autoFocus?: boolean;\n placeholder?: string;\n leftSide?: string | IconComponent;\n rightSide?: string | IconComponent;\n readOnly?: boolean;\n required?: boolean;\n tabIndex?: number;\n inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;\n ariaLabel?: string;\n iconSize?: IconPropSize;\n children?: never;\n format?: string;\n separator?: string;\n minDate?: Date;\n maxDate?: Date;\n focused?: boolean;\n label?: string;\n caption?: string;\n labelPosition?: 'top' | 'left';\n withClearButton?: boolean;\n },\n HTMLDivElement\n>;\n\ntype UsePickerProps = {\n value?: Date | null;\n onChange?: DatePickerFieldTypeMonthPropOnChange;\n onError?: DatePickerPropOnError;\n format: string;\n separator: string;\n minDate: Date;\n maxDate: Date;\n};\n\nexport const usePicker = (props: UsePickerProps) => {\n const {\n value,\n onChange,\n onError,\n format: formatProp,\n separator,\n maxDate,\n minDate,\n } = props;\n const onChangeRef = useMutableRef(onChange);\n const valueRef = useMutableRef(value);\n const onErrorRef = useMutableRef(onError);\n\n const [stringValue, setStringValue] = useState<string | null>(\n value && isValid(value) ? format(value, formatProp) : null,\n );\n const stringValueRef = useMutableRef(stringValue);\n\n const handleChange = useCallback(\n ({ e, value: stringValue }: { e: Event; value: string | null }) => {\n if (stringValueRef.current === stringValue) {\n return;\n }\n setStringValue(stringValue);\n const onChange = onChangeRef.current;\n const value = valueRef.current;\n if (onChange) {\n if (!stringValue) {\n if (value) {\n onChange({ e, value: null });\n }\n return;\n }\n const [MM, yyyy] = getPartsDate(\n stringValue,\n formatProp,\n separator,\n false,\n ['MM', 'yyyy'],\n );\n if (MM && yyyy) {\n const date = parse(\n `${MM}${datePickerPropSeparatorDefault}${yyyy}`,\n datePickerPropFormatTypeMonth,\n new Date(),\n );\n if (!isWithinInterval(date, { start: minDate, end: maxDate })) {\n onErrorRef.current?.({\n type: datePickerErrorTypes[0],\n stringValue,\n MM,\n yyyy,\n date,\n });\n if (value) {\n onChange({ e, value: null });\n }\n return;\n }\n onChange({ e, value: date });\n } else if (value) {\n onChange({ e, value: null });\n }\n }\n },\n [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],\n );\n\n const options: IMask.InputMask<IMask.MaskedDateOptions> = useMemo(\n () =>\n ({\n mask: Date,\n pattern: formatProp,\n blocks: {\n yyyy: {\n mask: IMask.MaskedRange,\n from: 1,\n to: 9999,\n },\n MM: {\n mask: IMask.MaskedRange,\n from: 1,\n to: 12,\n },\n },\n lazy: true,\n autofix: true,\n format: (date: Date) => format(date, formatProp),\n parse: (string: string) => parse(string, formatProp, new Date()),\n validate: (string: string) => {\n const [MM, yyyy] = getPartsDate(\n string,\n formatProp,\n separator,\n false,\n ['MM', 'yyyy'],\n );\n if (\n MM &&\n yyyy &&\n !isValid(\n parse(\n `${MM}${datePickerPropSeparatorDefault}${yyyy}`,\n datePickerPropFormatTypeMonth,\n new Date(),\n ),\n )\n ) {\n onError &&\n onErrorRef.current?.({\n type: datePickerErrorTypes[1],\n stringValue: string,\n MM,\n yyyy,\n });\n\n return false;\n }\n return true;\n },\n // проблема в типах IMask\n } as unknown as IMask.InputMask<IMask.MaskedDateOptions>),\n [formatProp, separator],\n );\n\n const { inputRef } = useIMask({\n value: stringValue,\n onChange: (_val, params) => handleChange?.(params),\n maskOptions: options,\n });\n\n // при изменении value, нужно обновить stringValue\n useEffect(() => {\n if (value && isValid(value)) {\n setStringValue(format(value, formatProp));\n } else if (stringValue?.length === formatProp.length) {\n // если количество введенных символов меньше чем в формате маски\n // то не нужно мешать вводу с клавиатуры\n // если дата была введена полностью и value пришел null,\n // то можно считать что поле нуждается в очистке\n setStringValue('');\n }\n }, [value?.getTime()]);\n\n return {\n stringValue,\n inputRef,\n };\n};\n"],"mappings":"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"}
|
package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export declare const DatePickerFieldTypeTime: React.ForwardRefExoticComponent<{
|
|
|
6
6
|
e: Event;
|
|
7
7
|
value: Date | null;
|
|
8
8
|
}) => void) | undefined;
|
|
9
|
-
onError?: import("
|
|
9
|
+
onError?: import("..").DatePickerPropOnError | undefined;
|
|
10
10
|
id?: string | undefined;
|
|
11
11
|
name?: string | undefined;
|
|
12
12
|
disabled?: boolean | undefined;
|
package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["format","separator","placeholder","onChange","onError","minDate","maxDate","value","inputRef","multiplicityHours","multiplicitySeconds","multiplicityMinutes"];import React from"react";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{maxDateDefault,minDateDefault}from"../../../utils/date";import{TextField}from"../../TextField/TextField";import{datePickerPropFormatTypeTime,datePickerPropPlaceholderTypeTime,datePickerPropSeparatorDefault}from"../helpers";import{usePicker}from"./helpers";export var DatePickerFieldTypeTime=React.forwardRef(function(a,b){var c=a.format,d=void 0===c?datePickerPropFormatTypeTime:c,e=a.separator,f=void 0===e?datePickerPropSeparatorDefault:e,g=a.placeholder,h=void 0===g?datePickerPropPlaceholderTypeTime:g,i=a.onChange,j=a.onError,k=a.minDate,l=void 0===k?minDateDefault:k,m=a.maxDate,n=void 0===m?maxDateDefault:m,o=a.value,p=a.inputRef,q=a.multiplicityHours,r=a.multiplicitySeconds,s=a.multiplicityMinutes,t=_objectWithoutProperties(a,_excluded),u=usePicker({value:o,onChange:i,onError:j,separator:f,format:d,minDate:l,maxDate:n,multiplicityHours:q,multiplicityMinutes:s,multiplicitySeconds:r}),v=u.stringValue,w=u.inputRef;return React.createElement(TextField,Object.assign({},t,{type:"text",inputContainerRef:b,inputRef:useForkRef([w,p]),value:v,placeholder:h}))});
|
|
2
2
|
//# sourceMappingURL=DatePickerFieldTypeTime.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerFieldTypeTime.js","names":["
|
|
1
|
+
{"version":3,"file":"DatePickerFieldTypeTime.js","names":["React","useForkRef","maxDateDefault","minDateDefault","TextField","datePickerPropFormatTypeTime","datePickerPropPlaceholderTypeTime","datePickerPropSeparatorDefault","usePicker","DatePickerFieldTypeTime","forwardRef","props","ref","format","separator","placeholder","onChange","onError","minDate","maxDate","value","inputRefProp","inputRef","multiplicityHours","multiplicitySeconds","multiplicityMinutes","otherProps","stringValue"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport { maxDateDefault, minDateDefault } from '../../../utils/date';\nimport { TextField } from '../../TextField/TextField';\nimport {\n datePickerPropFormatTypeTime,\n datePickerPropPlaceholderTypeTime,\n datePickerPropSeparatorDefault,\n} from '../helpers';\nimport { DatePickerFieldTypeTimeProps, usePicker } from './helpers';\n\nexport const DatePickerFieldTypeTime = React.forwardRef<\n HTMLDivElement,\n DatePickerFieldTypeTimeProps\n>((props, ref) => {\n const {\n format = datePickerPropFormatTypeTime,\n separator = datePickerPropSeparatorDefault,\n placeholder = datePickerPropPlaceholderTypeTime,\n onChange,\n onError,\n minDate = minDateDefault,\n maxDate = maxDateDefault,\n value,\n inputRef: inputRefProp,\n multiplicityHours,\n multiplicitySeconds,\n multiplicityMinutes,\n ...otherProps\n } = props;\n\n const { stringValue, inputRef } = usePicker({\n value,\n onChange,\n onError,\n separator,\n format,\n minDate,\n maxDate,\n multiplicityHours,\n multiplicityMinutes,\n multiplicitySeconds,\n });\n\n return (\n <TextField\n {...otherProps}\n type=\"text\"\n inputContainerRef={ref}\n inputRef={useForkRef([inputRef, inputRefProp])}\n value={stringValue}\n placeholder={placeholder}\n />\n );\n});\n"],"mappings":"oQAAA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,UAAT,4CACA,OAASC,cAAT,CAAyBC,cAAzB,2BACA,OAASC,SAAT,iCACA,OACEC,4BADF,CAEEC,iCAFF,CAGEC,8BAHF,kBAKA,OAAuCC,SAAvC,iBAEA,MAAO,IAAMC,wBAAuB,CAAGT,KAAK,CAACU,UAAN,CAGrC,SAACC,CAAD,CAAQC,CAAR,CAAgB,OAeZD,CAfY,CAEdE,MAFc,CAEdA,CAFc,YAELR,4BAFK,KAeZM,CAfY,CAGdG,SAHc,CAGdA,CAHc,YAGFP,8BAHE,KAeZI,CAfY,CAIdI,WAJc,CAIdA,CAJc,YAIAT,iCAJA,GAKdU,CALc,CAeZL,CAfY,CAKdK,QALc,CAMdC,CANc,CAeZN,CAfY,CAMdM,OANc,GAeZN,CAfY,CAOdO,OAPc,CAOdA,CAPc,YAOJf,cAPI,KAeZQ,CAfY,CAQdQ,OARc,CAQdA,CARc,YAQJjB,cARI,GASdkB,CATc,CAeZT,CAfY,CASdS,KATc,CAUJC,CAVI,CAeZV,CAfY,CAUdW,QAVc,CAWdC,CAXc,CAeZZ,CAfY,CAWdY,iBAXc,CAYdC,CAZc,CAeZb,CAfY,CAYda,mBAZc,CAadC,CAbc,CAeZd,CAfY,CAadc,mBAbc,CAcXC,CAdW,0BAeZf,CAfY,cAiBkBH,SAAS,CAAC,CAC1CY,KAAK,CAALA,CAD0C,CAE1CJ,QAAQ,CAARA,CAF0C,CAG1CC,OAAO,CAAPA,CAH0C,CAI1CH,SAAS,CAATA,CAJ0C,CAK1CD,MAAM,CAANA,CAL0C,CAM1CK,OAAO,CAAPA,CAN0C,CAO1CC,OAAO,CAAPA,CAP0C,CAQ1CI,iBAAiB,CAAjBA,CAR0C,CAS1CE,mBAAmB,CAAnBA,CAT0C,CAU1CD,mBAAmB,CAAnBA,CAV0C,CAAD,CAjB3B,CAiBRG,CAjBQ,GAiBRA,WAjBQ,CAiBKL,CAjBL,GAiBKA,QAjBL,CA8BhB,MACE,qBAAC,SAAD,kBACMI,CADN,EAEE,IAAI,CAAC,MAFP,CAGE,iBAAiB,CAAEd,CAHrB,CAIE,QAAQ,CAAEX,UAAU,CAAC,CAACqB,CAAD,CAAWD,CAAX,CAAD,CAJtB,CAKE,KAAK,CAAEM,CALT,CAME,WAAW,CAAEZ,CANf,GASH,CA3CsC,CAAhC"}
|
|
@@ -46,8 +46,20 @@ export declare type DatePickerFieldTypeTimeProps = PropsWithHTMLAttributes<{
|
|
|
46
46
|
labelPosition?: 'top' | 'left';
|
|
47
47
|
withClearButton?: boolean;
|
|
48
48
|
}, HTMLDivElement>;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
declare type UsePickerProps = {
|
|
50
|
+
value?: Date | null;
|
|
51
|
+
onChange?: DatePickerFieldTypeTimePropOnChange;
|
|
52
|
+
onError?: DatePickerPropOnError;
|
|
53
|
+
multiplicityHours: number | undefined;
|
|
54
|
+
multiplicitySeconds: number | undefined;
|
|
55
|
+
multiplicityMinutes: number | undefined;
|
|
56
|
+
format: string;
|
|
57
|
+
separator: string;
|
|
58
|
+
minDate: Date;
|
|
59
|
+
maxDate: Date;
|
|
60
|
+
};
|
|
61
|
+
export declare const usePicker: (props: UsePickerProps) => {
|
|
62
|
+
stringValue: string | null;
|
|
63
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
64
|
+
};
|
|
53
65
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{addHours,addMinutes,addSeconds,format as _format,isValid,parse as _parse,startOfDay,startOfHour,startOfMinute}from"date-fns";import IMask from"imask";import{useCallback,useEffect,
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{addHours,addMinutes,addSeconds,format as _format,isValid,isWithinInterval,parse as _parse,startOfDay,startOfHour,startOfMinute}from"date-fns";import IMask from"imask";import{useCallback,useEffect,useMemo,useState}from"react";import{useIMask}from"../../TextField";import{useMutableRef}from"../../../hooks/useMutableRef/useMutableRef";import{getLabelHours,getLabelMinutes,getLabelSeconds}from"../../DateTime/helpers";import{datePickerPropFormatTypeTime,getParts,getPartsDate,getTimeEnum}from"../helpers";import{datePickerErrorTypes}from"../types";export var usePicker=function(a){var b=a.value,c=a.onChange,d=a.onError,e=a.multiplicityHours,f=a.multiplicityMinutes,g=a.multiplicitySeconds,h=a.format,i=a.separator,j=a.maxDate,k=a.minDate,l=useMutableRef(c),m=useMutableRef(b),n=useMutableRef(d),o=useState(b&&isValid(b)?_format(b,h):null),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useMutableRef(q),t=useMemo(function(){return getParts(h,":")},[h,i]),u=useCallback(function(a){var b=a.e,c=a.value;if(s.current!==c){r(c);var d=l.current,e=m.current;if(d){if(!c)return void(e&&d({e:b,value:null}));var f=getPartsDate(c,h,":",!1,["HH","mm","ss"]),g=_slicedToArray(f,3),i=g[0],o=g[1],p=g[2];if(f.filter(function(a){return!!a}).length===t.length){var u=_parse("".concat(i,":").concat(o,":").concat(p),datePickerPropFormatTypeTime,e||new Date);if(!isWithinInterval(u,{start:k,end:j})){var q;return null===(q=n.current)||void 0===q?void 0:q.call(n,{type:datePickerErrorTypes[0],stringValue:c,date:u,HH:i,mm:o,ss:p}),void(e&&d({e:b,value:null}))}d({e:b,value:u})}else e&&d({e:b,value:null})}}},[null===k||void 0===k?void 0:k.getTime(),null===j||void 0===j?void 0:j.getTime(),h,i]),v=useMemo(function(){return{mask:Date,pattern:h,blocks:{HH:e&&1<e?{mask:IMask.MaskedEnum,enum:getTimeEnum(24,e,startOfDay,addHours,getLabelHours)}:{mask:IMask.MaskedRange,from:0,to:23},mm:f&&1<f?{mask:IMask.MaskedEnum,enum:getTimeEnum(60,f,startOfHour,addMinutes,getLabelMinutes)}:{mask:IMask.MaskedRange,from:0,to:59},ss:g&&1<g?{mask:IMask.MaskedEnum,enum:getTimeEnum(60,g,startOfMinute,addSeconds,getLabelSeconds)}:{mask:IMask.MaskedRange,from:0,to:59}},lazy:!0,autofix:!0,format:function format(a){return _format(a,h)},parse:function parse(a){return _parse(a,h,new Date)},validate:function validate(a){var b=getPartsDate(a,h,":",!1,["HH","mm","ss"]),c=_slicedToArray(b,3),d=c[0],e=c[1],f=c[2];if(d&&e&&f&&!isValid(_parse("".concat(d,":").concat(e,":").concat(f),datePickerPropFormatTypeTime,new Date))){var g;return null===(g=n.current)||void 0===g?void 0:g.call(n,{type:datePickerErrorTypes[1],stringValue:a,HH:d,mm:e,ss:f}),!1}return!0}}},[h,i,e,f,g]),w=useIMask({value:q,onChange:function(a,b){return null===u||void 0===u?void 0:u(b)},maskOptions:v}),x=w.inputRef;return useEffect(function(){b&&isValid(b)?r(_format(b,h)):(null===q||void 0===q?void 0:q.length)===h.length&&r("")},[null===b||void 0===b?void 0:b.getTime()]),{stringValue:q,inputRef:x}};
|
|
2
2
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","names":["addHours","addMinutes","addSeconds","format","isValid","parse","startOfDay","startOfHour","startOfMinute","IMask","useCallback","useEffect","useRef","useMutableRef","getLabelHours","getLabelMinutes","getLabelSeconds","datePickerPropFormatTypeTime","getPartsDate","getTimeEnum","datePickerErrorTypes","useImask","formatProp","separator","multiplicityHours","multiplicitySeconds","multiplicityMinutes","inputRef","stringValue","onError","handleChanhe","imaskRef","onErrorRef","handleChanheRef","current","mask","Date","pattern","blocks","HH","MaskedEnum","MaskedRange","from","to","mm","ss","lazy","autofix","date","string","validate","type","onAcept","e","value","on","off","updateValue"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeTime/helpers.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport {\n addHours,\n addMinutes,\n addSeconds,\n format,\n isValid,\n parse,\n startOfDay,\n startOfHour,\n startOfMinute,\n} from 'date-fns';\nimport IMask from 'imask';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport {\n getLabelHours,\n getLabelMinutes,\n getLabelSeconds,\n} from '../../DateTime/helpers';\nimport {\n TextFieldPropForm,\n TextFieldPropSize,\n TextFieldPropStatus,\n TextFieldPropView,\n TextFieldPropWidth,\n} from '../../TextField/TextField';\nimport {\n datePickerPropFormatTypeTime,\n getPartsDate,\n getTimeEnum,\n} from '../helpers';\nimport { datePickerErrorTypes, DatePickerPropOnError } from '../types';\n\ntype DatePickerFieldTypeTimePropOnChange = (props: {\n e: Event;\n value: Date | null;\n}) => void;\n\nexport type DatePickerFieldTypeTimeProps = PropsWithHTMLAttributes<\n {\n className?: string;\n value?: Date | null;\n onChange?: DatePickerFieldTypeTimePropOnChange;\n onError?: DatePickerPropOnError;\n id?: string;\n name?: string;\n disabled?: boolean;\n size?: TextFieldPropSize;\n view?: TextFieldPropView;\n form?: TextFieldPropForm;\n status?: TextFieldPropStatus;\n width?: TextFieldPropWidth;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n onBlur?: React.FocusEventHandler<HTMLElement>;\n autoFocus?: boolean;\n placeholder?: string;\n leftSide?: string | IconComponent;\n rightSide?: string | IconComponent;\n readOnly?: boolean;\n required?: boolean;\n tabIndex?: number;\n inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;\n ariaLabel?: string;\n iconSize?: IconPropSize;\n children?: never;\n format?: string;\n separator?: string;\n minDate?: Date;\n maxDate?: Date;\n focused?: boolean;\n multiplicitySeconds?: number;\n multiplicityMinutes?: number;\n multiplicityHours?: number;\n label?: string;\n caption?: string;\n labelPosition?: 'top' | 'left';\n withClearButton?: boolean;\n },\n HTMLDivElement\n>;\n\nexport const useImask = (\n formatProp: string,\n separator: string,\n multiplicityHours: number | undefined,\n multiplicitySeconds: number | undefined,\n multiplicityMinutes: number | undefined,\n inputRef: React.RefObject<HTMLInputElement>,\n stringValue: string | null,\n onError: DatePickerPropOnError | undefined,\n handleChanhe: (props: { e: Event; value: string | null }) => void,\n) => {\n const imaskRef = useRef<IMask.InputMask<IMask.MaskedDateOptions> | null>(\n null,\n );\n const onErrorRef = useMutableRef(onError);\n const handleChanheRef = useMutableRef(handleChanhe);\n\n // задаем маску и сохраняем обьект маски в ref\n // обнавляем при смене формата\n useEffect(() => {\n if (!inputRef.current) {\n return;\n }\n\n imaskRef.current = IMask(inputRef.current, {\n mask: Date,\n pattern: formatProp,\n blocks: {\n HH:\n multiplicityHours && multiplicityHours > 1\n ? {\n mask: IMask.MaskedEnum,\n enum: getTimeEnum(\n 24,\n multiplicityHours,\n startOfDay,\n addHours,\n getLabelHours,\n ),\n }\n : {\n mask: IMask.MaskedRange,\n from: 0,\n to: 23,\n },\n mm:\n multiplicityMinutes && multiplicityMinutes > 1\n ? {\n mask: IMask.MaskedEnum,\n enum: getTimeEnum(\n 60,\n multiplicityMinutes,\n startOfHour,\n addMinutes,\n getLabelMinutes,\n ),\n }\n : {\n mask: IMask.MaskedRange,\n from: 0,\n to: 59,\n },\n ss:\n multiplicitySeconds && multiplicitySeconds > 1\n ? {\n mask: IMask.MaskedEnum,\n enum: getTimeEnum(\n 60,\n multiplicitySeconds,\n startOfMinute,\n addSeconds,\n getLabelSeconds,\n ),\n }\n : {\n mask: IMask.MaskedRange,\n from: 0,\n to: 59,\n },\n },\n lazy: true,\n autofix: true,\n format: (date) => format(date, formatProp),\n parse: (string) => parse(string, formatProp, new Date()),\n validate: (string: string) => {\n const [HH, mm, ss] = getPartsDate(string, formatProp, ':', false, [\n 'HH',\n 'mm',\n 'ss',\n ]);\n\n if (\n HH &&\n mm &&\n ss &&\n !isValid(\n parse(\n `${HH}:${mm}:${ss}`,\n datePickerPropFormatTypeTime,\n new Date(),\n ),\n )\n ) {\n onErrorRef.current?.({\n type: datePickerErrorTypes[1],\n stringValue: string,\n HH,\n mm,\n ss,\n });\n\n return false;\n }\n\n return true;\n },\n // проблема в типах IMask\n }) as unknown as IMask.InputMask<IMask.MaskedDateOptions>;\n }, [\n formatProp,\n separator,\n multiplicityHours,\n multiplicitySeconds,\n multiplicityMinutes,\n ]);\n\n // Нужно для синхранизации value c Imask,\n // так как value мы можем задать через пропс без самого ввода,\n // и Imask требует ручной синхронихации в этом случае\n const onAcept = useCallback((e: Event) => {\n handleChanheRef.current({ e, value: imaskRef.current?.value || null });\n }, []);\n\n useEffect(() => {\n imaskRef.current?.on('accept', onAcept);\n return () => {\n imaskRef.current?.off('accept', onAcept);\n };\n }, []);\n\n useEffect(() => {\n imaskRef.current?.updateValue();\n }, [stringValue]);\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"helpers.js","names":["addHours","addMinutes","addSeconds","format","isValid","isWithinInterval","parse","startOfDay","startOfHour","startOfMinute","IMask","useCallback","useEffect","useMemo","useState","useIMask","useMutableRef","getLabelHours","getLabelMinutes","getLabelSeconds","datePickerPropFormatTypeTime","getParts","getPartsDate","getTimeEnum","datePickerErrorTypes","usePicker","props","value","onChange","onError","multiplicityHours","multiplicityMinutes","multiplicitySeconds","formatProp","separator","maxDate","minDate","onChangeRef","valueRef","onErrorRef","stringValue","setStringValue","stringValueRef","formatParts","handleChange","e","current","partsTime","HH","mm","ss","filter","item","length","date","Date","start","end","type","getTime","options","mask","pattern","blocks","MaskedEnum","MaskedRange","from","to","lazy","autofix","string","validate","_val","params","maskOptions","inputRef"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeTime/helpers.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport {\n addHours,\n addMinutes,\n addSeconds,\n format,\n isValid,\n isWithinInterval,\n parse,\n startOfDay,\n startOfHour,\n startOfMinute,\n} from 'date-fns';\nimport IMask from 'imask';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useIMask } from '##/components/TextField';\n\nimport { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport {\n getLabelHours,\n getLabelMinutes,\n getLabelSeconds,\n} from '../../DateTime/helpers';\nimport {\n TextFieldPropForm,\n TextFieldPropSize,\n TextFieldPropStatus,\n TextFieldPropView,\n TextFieldPropWidth,\n} from '../../TextField/TextField';\nimport {\n datePickerPropFormatTypeTime,\n getParts,\n getPartsDate,\n getTimeEnum,\n} from '../helpers';\nimport { datePickerErrorTypes, DatePickerPropOnError } from '../types';\n\ntype DatePickerFieldTypeTimePropOnChange = (props: {\n e: Event;\n value: Date | null;\n}) => void;\n\nexport type DatePickerFieldTypeTimeProps = PropsWithHTMLAttributes<\n {\n className?: string;\n value?: Date | null;\n onChange?: DatePickerFieldTypeTimePropOnChange;\n onError?: DatePickerPropOnError;\n id?: string;\n name?: string;\n disabled?: boolean;\n size?: TextFieldPropSize;\n view?: TextFieldPropView;\n form?: TextFieldPropForm;\n status?: TextFieldPropStatus;\n width?: TextFieldPropWidth;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n onBlur?: React.FocusEventHandler<HTMLElement>;\n autoFocus?: boolean;\n placeholder?: string;\n leftSide?: string | IconComponent;\n rightSide?: string | IconComponent;\n readOnly?: boolean;\n required?: boolean;\n tabIndex?: number;\n inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;\n ariaLabel?: string;\n iconSize?: IconPropSize;\n children?: never;\n format?: string;\n separator?: string;\n minDate?: Date;\n maxDate?: Date;\n focused?: boolean;\n multiplicitySeconds?: number;\n multiplicityMinutes?: number;\n multiplicityHours?: number;\n label?: string;\n caption?: string;\n labelPosition?: 'top' | 'left';\n withClearButton?: boolean;\n },\n HTMLDivElement\n>;\n\ntype UsePickerProps = {\n value?: Date | null;\n onChange?: DatePickerFieldTypeTimePropOnChange;\n onError?: DatePickerPropOnError;\n multiplicityHours: number | undefined;\n multiplicitySeconds: number | undefined;\n multiplicityMinutes: number | undefined;\n format: string;\n separator: string;\n minDate: Date;\n maxDate: Date;\n};\n\nexport const usePicker = (props: UsePickerProps) => {\n const {\n value,\n onChange,\n onError,\n multiplicityHours,\n multiplicityMinutes,\n multiplicitySeconds,\n format: formatProp,\n separator,\n maxDate,\n minDate,\n } = props;\n const onChangeRef = useMutableRef(onChange);\n const valueRef = useMutableRef(value);\n const onErrorRef = useMutableRef(onError);\n\n const [stringValue, setStringValue] = useState<string | null>(\n value && isValid(value) ? format(value, formatProp) : null,\n );\n const stringValueRef = useMutableRef(stringValue);\n\n const formatParts = useMemo(\n () => getParts(formatProp, ':'),\n [formatProp, separator],\n );\n\n const handleChange = useCallback(\n ({ e, value: stringValue }: { e: Event; value: string | null }) => {\n if (stringValueRef.current === stringValue) {\n return;\n }\n setStringValue(stringValue);\n const onChange = onChangeRef.current;\n const value = valueRef.current;\n if (onChange) {\n if (!stringValue) {\n if (value) {\n onChange({ e, value: null });\n }\n return;\n }\n const partsTime = getPartsDate(stringValue, formatProp, ':', false, [\n 'HH',\n 'mm',\n 'ss',\n ]);\n\n const [HH, mm, ss] = partsTime;\n if (partsTime.filter((item) => !!item).length === formatParts.length) {\n const date = parse(\n `${HH}:${mm}:${ss}`,\n datePickerPropFormatTypeTime,\n value || new Date(),\n );\n if (!isWithinInterval(date, { start: minDate, end: maxDate })) {\n onErrorRef.current?.({\n type: datePickerErrorTypes[0],\n stringValue,\n date,\n HH,\n mm,\n ss,\n });\n\n if (value) {\n onChange({ e, value: null });\n }\n return;\n }\n onChange({ e, value: date });\n } else if (value) {\n onChange({ e, value: null });\n }\n }\n },\n [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],\n );\n\n const options: IMask.InputMask<IMask.MaskedDateOptions> = useMemo(\n () =>\n ({\n mask: Date,\n pattern: formatProp,\n blocks: {\n HH:\n multiplicityHours && multiplicityHours > 1\n ? {\n mask: IMask.MaskedEnum,\n enum: getTimeEnum(\n 24,\n multiplicityHours,\n startOfDay,\n addHours,\n getLabelHours,\n ),\n }\n : {\n mask: IMask.MaskedRange,\n from: 0,\n to: 23,\n },\n mm:\n multiplicityMinutes && multiplicityMinutes > 1\n ? {\n mask: IMask.MaskedEnum,\n enum: getTimeEnum(\n 60,\n multiplicityMinutes,\n startOfHour,\n addMinutes,\n getLabelMinutes,\n ),\n }\n : {\n mask: IMask.MaskedRange,\n from: 0,\n to: 59,\n },\n ss:\n multiplicitySeconds && multiplicitySeconds > 1\n ? {\n mask: IMask.MaskedEnum,\n enum: getTimeEnum(\n 60,\n multiplicitySeconds,\n startOfMinute,\n addSeconds,\n getLabelSeconds,\n ),\n }\n : {\n mask: IMask.MaskedRange,\n from: 0,\n to: 59,\n },\n },\n lazy: true,\n autofix: true,\n format: (date: Date) => format(date, formatProp),\n parse: (string: string) => parse(string, formatProp, new Date()),\n validate: (string: string) => {\n const [HH, mm, ss] = getPartsDate(string, formatProp, ':', false, [\n 'HH',\n 'mm',\n 'ss',\n ]);\n if (\n HH &&\n mm &&\n ss &&\n !isValid(\n parse(\n `${HH}:${mm}:${ss}`,\n datePickerPropFormatTypeTime,\n new Date(),\n ),\n )\n ) {\n onErrorRef.current?.({\n type: datePickerErrorTypes[1],\n stringValue: string,\n HH,\n mm,\n ss,\n });\n return false;\n }\n return true;\n },\n // проблема в типах IMask\n } as unknown as IMask.InputMask<IMask.MaskedDateOptions>),\n [\n formatProp,\n separator,\n multiplicityHours,\n multiplicityMinutes,\n multiplicitySeconds,\n ],\n );\n\n const { inputRef } = useIMask({\n value: stringValue,\n onChange: (_val, params) => handleChange?.(params),\n maskOptions: options,\n });\n\n // при изменении value, нужно обновить stringValue\n useEffect(() => {\n if (value && isValid(value)) {\n setStringValue(format(value, formatProp));\n } else if (stringValue?.length === formatProp.length) {\n // если количество введенных символов меньше чем в формате маски\n // то не нужно мешать вводу с клавиатуры\n // если дата была введена полностью и value пришел null,\n // то можно считать что поле нуждается в очистке\n setStringValue('');\n }\n }, [value?.getTime()]);\n\n return {\n stringValue,\n inputRef,\n };\n};\n"],"mappings":"iEACA,OACEA,QADF,CAEEC,UAFF,CAGEC,UAHF,CAIEC,MAAM,GAANA,QAJF,CAKEC,OALF,CAMEC,gBANF,CAOEC,KAAK,GAALA,OAPF,CAQEC,UARF,CASEC,WATF,CAUEC,aAVF,KAWO,UAXP,CAYA,MAAOC,MAAP,KAAkB,OAAlB,CACA,OAAgBC,WAAhB,CAA6BC,SAA7B,CAAwCC,OAAxC,CAAiDC,QAAjD,KAAiE,OAAjE,CAEA,OAASC,QAAT,uBAEA,OAASC,aAAT,kDAEA,OACEC,aADF,CAEEC,eAFF,CAGEC,eAHF,8BAYA,OACEC,4BADF,CAEEC,QAFF,CAGEC,YAHF,CAIEC,WAJF,kBAMA,OAASC,oBAAT,gBA+DA,MAAO,IAAMC,UAAS,CAAG,SAACC,CAAD,CAA2B,IAEhDC,EAFgD,CAY9CD,CAZ8C,CAEhDC,KAFgD,CAGhDC,CAHgD,CAY9CF,CAZ8C,CAGhDE,QAHgD,CAIhDC,CAJgD,CAY9CH,CAZ8C,CAIhDG,OAJgD,CAKhDC,CALgD,CAY9CJ,CAZ8C,CAKhDI,iBALgD,CAMhDC,CANgD,CAY9CL,CAZ8C,CAMhDK,mBANgD,CAOhDC,CAPgD,CAY9CN,CAZ8C,CAOhDM,mBAPgD,CAQxCC,CARwC,CAY9CP,CAZ8C,CAQhDvB,MARgD,CAShD+B,CATgD,CAY9CR,CAZ8C,CAShDQ,SATgD,CAUhDC,CAVgD,CAY9CT,CAZ8C,CAUhDS,OAVgD,CAWhDC,CAXgD,CAY9CV,CAZ8C,CAWhDU,OAXgD,CAa5CC,CAAW,CAAGrB,aAAa,CAACY,CAAD,CAbiB,CAc5CU,CAAQ,CAAGtB,aAAa,CAACW,CAAD,CAdoB,CAe5CY,CAAU,CAAGvB,aAAa,CAACa,CAAD,CAfkB,GAiBZf,QAAQ,CAC5Ca,CAAK,EAAIvB,OAAO,CAACuB,CAAD,CAAhB,CAA0BxB,OAAM,CAACwB,CAAD,CAAQM,CAAR,CAAhC,CAAsD,IADV,CAjBI,uBAiB3CO,CAjB2C,MAiB9BC,CAjB8B,MAoB5CC,CAAc,CAAG1B,aAAa,CAACwB,CAAD,CApBc,CAsB5CG,CAAW,CAAG9B,OAAO,CACzB,iBAAMQ,SAAQ,CAACY,CAAD,CAAa,GAAb,CAAd,CADyB,CAEzB,CAACA,CAAD,CAAaC,CAAb,CAFyB,CAtBuB,CA2B5CU,CAAY,CAAGjC,WAAW,CAC9B,WAAmE,IAAhEkC,EAAgE,GAAhEA,CAAgE,CAAtDL,CAAsD,GAA7Db,KAA6D,CACjE,GAAIe,CAAc,CAACI,OAAf,GAA2BN,CAA/B,EAGAC,CAAc,CAACD,CAAD,CAHd,IAIMZ,EAAQ,CAAGS,CAAW,CAACS,OAJ7B,CAKMnB,CAAK,CAAGW,CAAQ,CAACQ,OALvB,CAMA,GAAIlB,CAAJ,CAAc,CACZ,GAAI,CAACY,CAAL,CAIE,YAHIb,CAGJ,EAFEC,CAAQ,CAAC,CAAEiB,CAAC,CAADA,CAAF,CAAKlB,KAAK,CAAE,IAAZ,CAAD,CAEV,EALU,GAONoB,EAAS,CAAGzB,YAAY,CAACkB,CAAD,CAAcP,CAAd,CAA0B,GAA1B,IAAsC,CAClE,IADkE,CAElE,IAFkE,CAGlE,IAHkE,CAAtC,CAPlB,kBAaSc,CAbT,IAaLC,CAbK,MAaDC,CAbC,MAaGC,CAbH,MAcZ,GAAIH,CAAS,CAACI,MAAV,CAAiB,SAACC,CAAD,QAAU,CAAC,CAACA,CAAZ,CAAjB,EAAmCC,MAAnC,GAA8CV,CAAW,CAACU,MAA9D,CAAsE,CACpE,GAAMC,EAAI,CAAGhD,MAAK,WACb0C,CADa,aACPC,CADO,aACDC,CADC,EAEhB9B,4BAFgB,CAGhBO,CAAK,EAAI,GAAI4B,KAHG,CAAlB,CAKA,GAAI,CAAClD,gBAAgB,CAACiD,CAAD,CAAO,CAAEE,KAAK,CAAEpB,CAAT,CAAkBqB,GAAG,CAAEtB,CAAvB,CAAP,CAArB,CAA+D,OAa7D,iBAZAI,CAAU,CAACO,OAYX,qBAZA,OAAAP,CAAU,CAAW,CACnBmB,IAAI,CAAElC,oBAAoB,CAAC,CAAD,CADP,CAEnBgB,WAAW,CAAXA,CAFmB,CAGnBc,IAAI,CAAJA,CAHmB,CAInBN,EAAE,CAAFA,CAJmB,CAKnBC,EAAE,CAAFA,CALmB,CAMnBC,EAAE,CAAFA,CANmB,CAAX,CAYV,MAHIvB,CAGJ,EAFEC,CAAQ,CAAC,CAAEiB,CAAC,CAADA,CAAF,CAAKlB,KAAK,CAAE,IAAZ,CAAD,CAEV,CACD,CACDC,CAAQ,CAAC,CAAEiB,CAAC,CAADA,CAAF,CAAKlB,KAAK,CAAE2B,CAAZ,CAAD,CACT,CAtBD,IAsBW3B,EAtBX,EAuBEC,CAAQ,CAAC,CAAEiB,CAAC,CAADA,CAAF,CAAKlB,KAAK,CAAE,IAAZ,CAAD,CAEX,CA7CD,CA8CD,CAhD6B,CAiD9B,QAACS,CAAD,WAACA,CAAD,QAACA,CAAO,CAAEuB,OAAT,EAAD,QAAqBxB,CAArB,WAAqBA,CAArB,QAAqBA,CAAO,CAAEwB,OAAT,EAArB,CAAyC1B,CAAzC,CAAqDC,CAArD,CAjD8B,CA3BkB,CA+E5C0B,CAAiD,CAAG/C,OAAO,CAC/D,iBACG,CACCgD,IAAI,CAAEN,IADP,CAECO,OAAO,CAAE7B,CAFV,CAGC8B,MAAM,CAAE,CACNf,EAAE,CACAlB,CAAiB,EAAwB,CAApB,CAAAA,CAArB,CACI,CACE+B,IAAI,CAAEnD,KAAK,CAACsD,UADd,CAEE,KAAMzC,WAAW,CACf,EADe,CAEfO,CAFe,CAGfvB,UAHe,CAIfP,QAJe,CAKfiB,aALe,CAFnB,CADJ,CAWI,CACE4C,IAAI,CAAEnD,KAAK,CAACuD,WADd,CAEEC,IAAI,CAAE,CAFR,CAGEC,EAAE,CAAE,EAHN,CAbA,CAkBNlB,EAAE,CACAlB,CAAmB,EAA0B,CAAtB,CAAAA,CAAvB,CACI,CACE8B,IAAI,CAAEnD,KAAK,CAACsD,UADd,CAEE,KAAMzC,WAAW,CACf,EADe,CAEfQ,CAFe,CAGfvB,WAHe,CAIfP,UAJe,CAKfiB,eALe,CAFnB,CADJ,CAWI,CACE2C,IAAI,CAAEnD,KAAK,CAACuD,WADd,CAEEC,IAAI,CAAE,CAFR,CAGEC,EAAE,CAAE,EAHN,CA9BA,CAmCNjB,EAAE,CACAlB,CAAmB,EAA0B,CAAtB,CAAAA,CAAvB,CACI,CACE6B,IAAI,CAAEnD,KAAK,CAACsD,UADd,CAEE,KAAMzC,WAAW,CACf,EADe,CAEfS,CAFe,CAGfvB,aAHe,CAIfP,UAJe,CAKfiB,eALe,CAFnB,CADJ,CAWI,CACE0C,IAAI,CAAEnD,KAAK,CAACuD,WADd,CAEEC,IAAI,CAAE,CAFR,CAGEC,EAAE,CAAE,EAHN,CA/CA,CAHT,CAwDCC,IAAI,GAxDL,CAyDCC,OAAO,GAzDR,CA0DClE,MAAM,CAAE,gBAACmD,CAAD,QAAgBnD,QAAM,CAACmD,CAAD,CAAOrB,CAAP,CAAtB,CA1DT,CA2DC3B,KAAK,CAAE,eAACgE,CAAD,QAAoBhE,OAAK,CAACgE,CAAD,CAASrC,CAAT,CAAqB,GAAIsB,KAAzB,CAAzB,CA3DR,CA4DCgB,QAAQ,CAAE,kBAACD,CAAD,CAAoB,CAC5B,MAAqBhD,YAAY,CAACgD,CAAD,CAASrC,CAAT,CAAqB,GAArB,IAAiC,CAChE,IADgE,CAEhE,IAFgE,CAGhE,IAHgE,CAAjC,CAAjC,uBAAOe,CAAP,MAAWC,CAAX,MAAeC,CAAf,MAKA,GACEF,CAAE,EACFC,CADA,EAEAC,CAFA,EAGA,CAAC9C,OAAO,CACNE,MAAK,WACA0C,CADA,aACMC,CADN,aACYC,CADZ,EAEH9B,4BAFG,CAGH,GAAImC,KAHD,CADC,CAJV,CAWE,OAQA,iBAPAhB,CAAU,CAACO,OAOX,qBAPA,OAAAP,CAAU,CAAW,CACnBmB,IAAI,CAAElC,oBAAoB,CAAC,CAAD,CADP,CAEnBgB,WAAW,CAAE8B,CAFM,CAGnBtB,EAAE,CAAFA,CAHmB,CAInBC,EAAE,CAAFA,CAJmB,CAKnBC,EAAE,CAAFA,CALmB,CAAX,CAOV,GACD,CACD,QACD,CAxFF,CADH,CAD+D,CA6F/D,CACEjB,CADF,CAEEC,CAFF,CAGEJ,CAHF,CAIEC,CAJF,CAKEC,CALF,CA7F+D,CA/Ef,GAqL7BjB,QAAQ,CAAC,CAC5BY,KAAK,CAAEa,CADqB,CAE5BZ,QAAQ,CAAE,SAAC4C,CAAD,CAAOC,CAAP,gBAAkB7B,CAAlB,WAAkBA,CAAlB,QAAkBA,CAAY,CAAG6B,CAAH,CAA9B,CAFkB,CAG5BC,WAAW,CAAEd,CAHe,CAAD,CArLqB,CAqL1Ce,CArL0C,GAqL1CA,QArL0C,CAwMlD,MAZA/D,UAAS,CAAC,UAAM,CACVe,CAAK,EAAIvB,OAAO,CAACuB,CAAD,CADN,CAEZc,CAAc,CAACtC,OAAM,CAACwB,CAAD,CAAQM,CAAR,CAAP,CAFF,CAGH,QAAAO,CAAW,WAAXA,CAAA,QAAAA,CAAW,CAAEa,MAAb,IAAwBpB,CAAU,CAACoB,MAHhC,EAQZZ,CAAc,CAAC,EAAD,CAEjB,CAVQ,CAUN,QAACd,CAAD,WAACA,CAAD,QAACA,CAAK,CAAEgC,OAAP,EAAD,CAVM,CAYT,CAAO,CACLnB,WAAW,CAAXA,CADK,CAELmC,QAAQ,CAARA,CAFK,CAIR,CA5MM"}
|
package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export declare const DatePickerFieldTypeYear: React.ForwardRefExoticComponent<{
|
|
|
6
6
|
e: Event;
|
|
7
7
|
value: Date | null;
|
|
8
8
|
}) => void) | undefined;
|
|
9
|
-
onError?: import("
|
|
9
|
+
onError?: import("..").DatePickerPropOnError | undefined;
|
|
10
10
|
id?: string | undefined;
|
|
11
11
|
name?: string | undefined;
|
|
12
12
|
disabled?: boolean | undefined;
|
package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["format","separator","placeholder","onChange","onError","minDate","maxDate","value","inputRef"];import React from"react";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{maxDateDefault,minDateDefault}from"../../../utils/date";import{TextField}from"../../TextField/TextField";import{datePickerPropFormatTypeYear,datePickerPropPlaceholderTypeYear,datePickerPropSeparatorDefault}from"../helpers";import{usePicker}from"./helpers";export var DatePickerFieldTypeYear=React.forwardRef(function(a,b){var c=a.format,d=void 0===c?datePickerPropFormatTypeYear:c,e=a.separator,f=void 0===e?datePickerPropSeparatorDefault:e,g=a.placeholder,h=void 0===g?datePickerPropPlaceholderTypeYear:g,i=a.onChange,j=a.onError,k=a.minDate,l=void 0===k?minDateDefault:k,m=a.maxDate,n=void 0===m?maxDateDefault:m,o=a.value,p=a.inputRef,q=_objectWithoutProperties(a,_excluded),r=usePicker({value:o,minDate:l,maxDate:n,onChange:i,onError:j,separator:f,format:d}),s=r.stringValue,t=r.inputRef;return React.createElement(TextField,Object.assign({},q,{type:"text",inputContainerRef:b,inputRef:useForkRef([t,p]),value:s,placeholder:h}))});
|
|
2
2
|
//# sourceMappingURL=DatePickerFieldTypeYear.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerFieldTypeYear.js","names":["
|
|
1
|
+
{"version":3,"file":"DatePickerFieldTypeYear.js","names":["React","useForkRef","maxDateDefault","minDateDefault","TextField","datePickerPropFormatTypeYear","datePickerPropPlaceholderTypeYear","datePickerPropSeparatorDefault","usePicker","DatePickerFieldTypeYear","forwardRef","props","ref","format","separator","placeholder","onChange","onError","minDate","maxDate","value","inputRefProp","inputRef","otherProps","stringValue"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport { maxDateDefault, minDateDefault } from '../../../utils/date';\nimport { TextField } from '../../TextField/TextField';\nimport {\n datePickerPropFormatTypeYear,\n datePickerPropPlaceholderTypeYear,\n datePickerPropSeparatorDefault,\n} from '../helpers';\nimport { DatePickerFieldTypeYearProps, usePicker } from './helpers';\n\nexport const DatePickerFieldTypeYear = React.forwardRef<\n HTMLDivElement,\n DatePickerFieldTypeYearProps\n>((props, ref) => {\n const {\n format = datePickerPropFormatTypeYear,\n separator = datePickerPropSeparatorDefault,\n placeholder = datePickerPropPlaceholderTypeYear,\n onChange,\n onError,\n minDate = minDateDefault,\n maxDate = maxDateDefault,\n value,\n inputRef: inputRefProp,\n ...otherProps\n } = props;\n\n const { stringValue, inputRef } = usePicker({\n value,\n minDate,\n maxDate,\n onChange,\n onError,\n separator,\n format,\n });\n\n return (\n <TextField\n {...otherProps}\n type=\"text\"\n inputContainerRef={ref}\n inputRef={useForkRef([inputRef, inputRefProp])}\n value={stringValue}\n placeholder={placeholder}\n />\n );\n});\n"],"mappings":"oMAAA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,UAAT,4CACA,OAASC,cAAT,CAAyBC,cAAzB,2BACA,OAASC,SAAT,iCACA,OACEC,4BADF,CAEEC,iCAFF,CAGEC,8BAHF,kBAKA,OAAuCC,SAAvC,iBAEA,MAAO,IAAMC,wBAAuB,CAAGT,KAAK,CAACU,UAAN,CAGrC,SAACC,CAAD,CAAQC,CAAR,CAAgB,OAYZD,CAZY,CAEdE,MAFc,CAEdA,CAFc,YAELR,4BAFK,KAYZM,CAZY,CAGdG,SAHc,CAGdA,CAHc,YAGFP,8BAHE,KAYZI,CAZY,CAIdI,WAJc,CAIdA,CAJc,YAIAT,iCAJA,GAKdU,CALc,CAYZL,CAZY,CAKdK,QALc,CAMdC,CANc,CAYZN,CAZY,CAMdM,OANc,GAYZN,CAZY,CAOdO,OAPc,CAOdA,CAPc,YAOJf,cAPI,KAYZQ,CAZY,CAQdQ,OARc,CAQdA,CARc,YAQJjB,cARI,GASdkB,CATc,CAYZT,CAZY,CASdS,KATc,CAUJC,CAVI,CAYZV,CAZY,CAUdW,QAVc,CAWXC,CAXW,0BAYZZ,CAZY,cAckBH,SAAS,CAAC,CAC1CY,KAAK,CAALA,CAD0C,CAE1CF,OAAO,CAAPA,CAF0C,CAG1CC,OAAO,CAAPA,CAH0C,CAI1CH,QAAQ,CAARA,CAJ0C,CAK1CC,OAAO,CAAPA,CAL0C,CAM1CH,SAAS,CAATA,CAN0C,CAO1CD,MAAM,CAANA,CAP0C,CAAD,CAd3B,CAcRW,CAdQ,GAcRA,WAdQ,CAcKF,CAdL,GAcKA,QAdL,CAwBhB,MACE,qBAAC,SAAD,kBACMC,CADN,EAEE,IAAI,CAAC,MAFP,CAGE,iBAAiB,CAAEX,CAHrB,CAIE,QAAQ,CAAEX,UAAU,CAAC,CAACqB,CAAD,CAAWD,CAAX,CAAD,CAJtB,CAKE,KAAK,CAAEG,CALT,CAME,WAAW,CAAET,CANf,GASH,CArCsC,CAAhC"}
|
|
@@ -43,5 +43,17 @@ export declare type DatePickerFieldTypeYearProps = PropsWithHTMLAttributes<{
|
|
|
43
43
|
labelPosition?: 'top' | 'left';
|
|
44
44
|
withClearButton?: boolean;
|
|
45
45
|
}, HTMLDivElement>;
|
|
46
|
-
|
|
46
|
+
declare type UsePickerProps = {
|
|
47
|
+
value?: Date | null;
|
|
48
|
+
onChange?: DatePickerFieldTypeYearPropOnChange;
|
|
49
|
+
onError?: DatePickerPropOnError;
|
|
50
|
+
format: string;
|
|
51
|
+
separator: string;
|
|
52
|
+
minDate: Date;
|
|
53
|
+
maxDate: Date;
|
|
54
|
+
};
|
|
55
|
+
export declare const usePicker: (props: UsePickerProps) => {
|
|
56
|
+
stringValue: string | null;
|
|
57
|
+
inputRef: import("react").RefObject<HTMLInputElement>;
|
|
58
|
+
};
|
|
47
59
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{format as _format,isValid,parse as _parse}from"date-fns";import IMask from"imask";import{useEffect,
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{format as _format,isValid,isWithinInterval,parse as _parse}from"date-fns";import IMask from"imask";import{useCallback,useEffect,useMemo,useState}from"react";import{useIMask}from"../../TextField";import{useMutableRef}from"../../../hooks/useMutableRef";import{datePickerPropFormatTypeYear,getPartsDate}from"../helpers";import{datePickerErrorTypes}from"../types";export var usePicker=function(a){var b=a.value,c=a.onChange,d=a.onError,f=a.format,g=a.separator,h=a.maxDate,i=a.minDate,j=useMutableRef(c),k=useMutableRef(b),l=useMutableRef(d),m=useState(b&&isValid(b)?_format(b,f):null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useMutableRef(o),r=useCallback(function(a){var b=a.e,c=a.value;if(q.current!==c){p(c);var d=j.current,e=k.current;if(d){if(!c)return void(e&&d({e:b,value:null}));var m=getPartsDate(c,f,g,!1,["yyyy"]),n=_slicedToArray(m,1),o=n[0];if(o){var s=_parse("".concat(o),datePickerPropFormatTypeYear,new Date);if(!isWithinInterval(s,{start:i,end:h})){var r;return null===(r=l.current)||void 0===r?void 0:r.call(l,{type:datePickerErrorTypes[0],stringValue:c,yyyy:o,date:s}),void(e&&d({e:b,value:null}))}d({e:b,value:s})}else e&&d({e:b,value:null})}}},[null===i||void 0===i?void 0:i.getTime(),null===h||void 0===h?void 0:h.getTime(),f,g]),s=useMemo(function(){return{mask:Date,pattern:f,blocks:{yyyy:{mask:IMask.MaskedRange,from:1,to:9999}},lazy:!0,autofix:!0,format:function format(a){return _format(a,f)},parse:function parse(a){return _parse(a,f,new Date)},validate:function validate(a){var b=getPartsDate(a,f,g,!1,["yyyy"]),c=_slicedToArray(b,1),e=c[0];return!e||isValid(_parse("".concat(e),datePickerPropFormatTypeYear,new Date))||(d&&d({type:datePickerErrorTypes[1],stringValue:a,yyyy:e}),!1)}}},[f,g]),t=useIMask({value:o,onChange:function(a,b){return null===r||void 0===r?void 0:r(b)},maskOptions:s}),u=t.inputRef;return useEffect(function(){b&&isValid(b)?p(_format(b,f)):(null===o||void 0===o?void 0:o.length)===f.length&&p("")},[null===b||void 0===b?void 0:b.getTime()]),{stringValue:o,inputRef:u}};
|
|
2
2
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","names":["format","isValid","parse","IMask","useEffect","useRef","datePickerPropFormatTypeYear","getPartsDate","datePickerErrorTypes","useImask","formatProp","separator","inputRef","stringValue","onError","imaskRef","current","mask","Date","pattern","blocks","yyyy","MaskedRange","from","to","lazy","autofix","date","string","validate","type","updateValue"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeYear/helpers.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport { format, isValid, parse } from 'date-fns';\nimport IMask from 'imask';\nimport { useEffect, useRef } from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport {\n TextFieldPropForm,\n TextFieldPropSize,\n TextFieldPropStatus,\n TextFieldPropView,\n TextFieldPropWidth,\n} from '../../TextField/TextField';\nimport { datePickerPropFormatTypeYear, getPartsDate } from '../helpers';\nimport { datePickerErrorTypes, DatePickerPropOnError } from '../types';\n\ntype DatePickerFieldTypeYearPropOnChange = (props: {\n e: Event;\n value: Date | null;\n}) => void;\n\nexport type DatePickerFieldTypeYearProps = PropsWithHTMLAttributes<\n {\n className?: string;\n value?: Date | null;\n onChange?: DatePickerFieldTypeYearPropOnChange;\n onError?: DatePickerPropOnError;\n id?: string;\n name?: string;\n disabled?: boolean;\n size?: TextFieldPropSize;\n view?: TextFieldPropView;\n form?: TextFieldPropForm;\n status?: TextFieldPropStatus;\n width?: TextFieldPropWidth;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n onBlur?: React.FocusEventHandler<HTMLElement>;\n autoFocus?: boolean;\n placeholder?: string;\n leftSide?: string | IconComponent;\n rightSide?: string | IconComponent;\n readOnly?: boolean;\n required?: boolean;\n tabIndex?: number;\n inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;\n ariaLabel?: string;\n iconSize?: IconPropSize;\n children?: never;\n format?: string;\n separator?: string;\n minDate?: Date;\n maxDate?: Date;\n focused?: boolean;\n label?: string;\n caption?: string;\n labelPosition?: 'top' | 'left';\n withClearButton?: boolean;\n },\n HTMLDivElement\n>;\n\nexport const useImask = (\n formatProp: string,\n separator: string,\n inputRef: React.RefObject<HTMLInputElement>,\n stringValue: string | null,\n onError: DatePickerPropOnError | undefined,\n) => {\n const imaskRef = useRef<IMask.InputMask<IMask.MaskedDateOptions> | null>(\n null,\n );\n\n // задаем маску и сохраняем обьект маски в ref\n // обнавляем при смене формата\n useEffect(() => {\n if (inputRef.current) {\n imaskRef.current = IMask(inputRef.current, {\n mask: Date,\n pattern: formatProp,\n blocks: {\n yyyy: {\n mask: IMask.MaskedRange,\n from: 1,\n to: 9999,\n },\n },\n lazy: true,\n autofix: true,\n format: (date) => format(date, formatProp),\n parse: (string) => parse(string, formatProp, new Date()),\n validate: (string: string) => {\n const [yyyy] = getPartsDate(string, formatProp, separator, false, [\n 'yyyy',\n ]);\n\n if (\n yyyy &&\n !isValid(parse(`${yyyy}`, datePickerPropFormatTypeYear, new Date()))\n ) {\n onError &&\n onError({\n type: datePickerErrorTypes[1],\n stringValue: string,\n yyyy,\n });\n\n return false;\n }\n\n return true;\n },\n // проблема в типах IMask\n }) as unknown as IMask.InputMask<IMask.MaskedDateOptions>;\n }\n }, [formatProp, separator]);\n\n // Нужно для синхранизации value c Imask,\n // так как value мы можем задать через пропс без самого ввода,\n // и Imask требует ручной синхронихации в этом случае\n useEffect(() => {\n imaskRef.current?.updateValue();\n }, [stringValue]);\n};\n"],"mappings":"iEACA,OAASA,MAAM,GAANA,QAAT,CAAiBC,OAAjB,CAA0BC,KAAK,GAALA,OAA1B,KAAuC,UAAvC,CACA,MAAOC,MAAP,KAAkB,OAAlB,CACA,OAASC,SAAT,CAAoBC,MAApB,KAAkC,OAAlC,CAUA,OAASC,4BAAT,CAAuCC,YAAvC,kBACA,OAASC,oBAAT,gBA+CA,MAAO,IAAMC,SAAQ,CAAG,SACtBC,CADsB,CAEtBC,CAFsB,CAGtBC,CAHsB,CAItBC,CAJsB,CAKtBC,CALsB,CAMnB,CACH,GAAMC,EAAQ,CAAGV,MAAM,CACrB,IADqB,CAAvB,CAMAD,SAAS,CAAC,UAAM,CACVQ,CAAQ,CAACI,OADC,GAEZD,CAAQ,CAACC,OAAT,CAAmBb,KAAK,CAACS,CAAQ,CAACI,OAAV,CAAmB,CACzCC,IAAI,CAAEC,IADmC,CAEzCC,OAAO,CAAET,CAFgC,CAGzCU,MAAM,CAAE,CACNC,IAAI,CAAE,CACJJ,IAAI,CAAEd,KAAK,CAACmB,WADR,CAEJC,IAAI,CAAE,CAFF,CAGJC,EAAE,CAAE,IAHA,CADA,CAHiC,CAUzCC,IAAI,GAVqC,CAWzCC,OAAO,GAXkC,CAYzC1B,MAAM,CAAE,gBAAC2B,CAAD,QAAU3B,QAAM,CAAC2B,CAAD,CAAOjB,CAAP,CAAhB,CAZiC,CAazCR,KAAK,CAAE,eAAC0B,CAAD,QAAY1B,OAAK,CAAC0B,CAAD,CAASlB,CAAT,CAAqB,GAAIQ,KAAzB,CAAjB,CAbkC,CAczCW,QAAQ,CAAE,kBAACD,CAAD,CAAoB,CAC5B,MAAerB,YAAY,CAACqB,CAAD,CAASlB,CAAT,CAAqBC,CAArB,IAAuC,CAChE,MADgE,CAAvC,CAA3B,uBAAOU,CAAP,MAD4B,MAM1B,CAAAA,CAAI,EACHpB,OAAO,CAACC,MAAK,WAAImB,CAAJ,EAAYf,4BAAZ,CAA0C,GAAIY,KAA9C,CAAN,CAPkB,GAS1BJ,CAAO,EACLA,CAAO,CAAC,CACNgB,IAAI,CAAEtB,oBAAoB,CAAC,CAAD,CADpB,CAENK,WAAW,CAAEe,CAFP,CAGNP,IAAI,CAAJA,CAHM,CAAD,CAViB,IAoB7B,CAlCwC,CAAnB,CAFZ,CAwCf,CAxCQ,CAwCN,CAACX,CAAD,CAAaC,CAAb,CAxCM,CAPN,CAoDHP,SAAS,CAAC,UAAM,iBACdW,CAAQ,CAACC,OADK,qBACd,EAAkBe,WAAlB,EACD,CAFQ,CAEN,CAAClB,CAAD,CAFM,CAGV,CA7DM"}
|
|
1
|
+
{"version":3,"file":"helpers.js","names":["format","isValid","isWithinInterval","parse","IMask","useCallback","useEffect","useMemo","useState","useIMask","useMutableRef","datePickerPropFormatTypeYear","getPartsDate","datePickerErrorTypes","usePicker","props","value","onChange","onError","formatProp","separator","maxDate","minDate","onChangeRef","valueRef","onErrorRef","stringValue","setStringValue","stringValueRef","handleChange","e","current","yyyy","date","Date","start","end","type","getTime","options","mask","pattern","blocks","MaskedRange","from","to","lazy","autofix","string","validate","_val","params","maskOptions","inputRef","length"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeYear/helpers.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport { format, isValid, isWithinInterval, parse } from 'date-fns';\nimport IMask from 'imask';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useIMask } from '##/components/TextField';\nimport { useMutableRef } from '##/hooks/useMutableRef';\n\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport {\n TextFieldPropForm,\n TextFieldPropSize,\n TextFieldPropStatus,\n TextFieldPropView,\n TextFieldPropWidth,\n} from '../../TextField/TextField';\nimport { datePickerPropFormatTypeYear, getPartsDate } from '../helpers';\nimport { datePickerErrorTypes, DatePickerPropOnError } from '../types';\n\ntype DatePickerFieldTypeYearPropOnChange = (props: {\n e: Event;\n value: Date | null;\n}) => void;\n\nexport type DatePickerFieldTypeYearProps = PropsWithHTMLAttributes<\n {\n className?: string;\n value?: Date | null;\n onChange?: DatePickerFieldTypeYearPropOnChange;\n onError?: DatePickerPropOnError;\n id?: string;\n name?: string;\n disabled?: boolean;\n size?: TextFieldPropSize;\n view?: TextFieldPropView;\n form?: TextFieldPropForm;\n status?: TextFieldPropStatus;\n width?: TextFieldPropWidth;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n onBlur?: React.FocusEventHandler<HTMLElement>;\n autoFocus?: boolean;\n placeholder?: string;\n leftSide?: string | IconComponent;\n rightSide?: string | IconComponent;\n readOnly?: boolean;\n required?: boolean;\n tabIndex?: number;\n inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;\n ariaLabel?: string;\n iconSize?: IconPropSize;\n children?: never;\n format?: string;\n separator?: string;\n minDate?: Date;\n maxDate?: Date;\n focused?: boolean;\n label?: string;\n caption?: string;\n labelPosition?: 'top' | 'left';\n withClearButton?: boolean;\n },\n HTMLDivElement\n>;\n\ntype UsePickerProps = {\n value?: Date | null;\n onChange?: DatePickerFieldTypeYearPropOnChange;\n onError?: DatePickerPropOnError;\n format: string;\n separator: string;\n minDate: Date;\n maxDate: Date;\n};\n\nexport const usePicker = (props: UsePickerProps) => {\n const {\n value,\n onChange,\n onError,\n format: formatProp,\n separator,\n maxDate,\n minDate,\n } = props;\n const onChangeRef = useMutableRef(onChange);\n const valueRef = useMutableRef(value);\n const onErrorRef = useMutableRef(onError);\n\n const [stringValue, setStringValue] = useState<string | null>(\n value && isValid(value) ? format(value, formatProp) : null,\n );\n const stringValueRef = useMutableRef(stringValue);\n\n const handleChange = useCallback(\n ({ e, value: stringValue }: { e: Event; value: string | null }) => {\n if (stringValueRef.current === stringValue) {\n return;\n }\n\n setStringValue(stringValue);\n\n const onChange = onChangeRef.current;\n const value = valueRef.current;\n\n if (onChange) {\n if (!stringValue) {\n if (value) {\n onChange({ e, value: null });\n }\n return;\n }\n\n const [yyyy] = getPartsDate(stringValue, formatProp, separator, false, [\n 'yyyy',\n ]);\n\n if (yyyy) {\n const date = parse(\n `${yyyy}`,\n datePickerPropFormatTypeYear,\n new Date(),\n );\n if (!isWithinInterval(date, { start: minDate, end: maxDate })) {\n onErrorRef.current?.({\n type: datePickerErrorTypes[0],\n stringValue,\n yyyy,\n date,\n });\n\n if (value) {\n onChange({ e, value: null });\n }\n return;\n }\n onChange({ e, value: date });\n } else if (value) {\n onChange({ e, value: null });\n }\n }\n },\n [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],\n );\n\n const options: IMask.InputMask<IMask.MaskedDateOptions> = useMemo(\n () =>\n ({\n mask: Date,\n pattern: formatProp,\n blocks: {\n yyyy: {\n mask: IMask.MaskedRange,\n from: 1,\n to: 9999,\n },\n },\n lazy: true,\n autofix: true,\n format: (date: Date) => format(date, formatProp),\n parse: (string: string) => parse(string, formatProp, new Date()),\n validate: (string: string) => {\n const [yyyy] = getPartsDate(string, formatProp, separator, false, [\n 'yyyy',\n ]);\n\n if (\n yyyy &&\n !isValid(parse(`${yyyy}`, datePickerPropFormatTypeYear, new Date()))\n ) {\n onError &&\n onError({\n type: datePickerErrorTypes[1],\n stringValue: string,\n yyyy,\n });\n\n return false;\n }\n\n return true;\n },\n // проблема в типах IMask\n } as unknown as IMask.InputMask<IMask.MaskedDateOptions>),\n [formatProp, separator],\n );\n\n const { inputRef } = useIMask({\n value: stringValue,\n onChange: (_val, params) => handleChange?.(params),\n maskOptions: options,\n });\n\n // при изменении value, нужно обновить stringValue\n useEffect(() => {\n if (value && isValid(value)) {\n setStringValue(format(value, formatProp));\n } else if (stringValue?.length === formatProp.length) {\n // если количество введенных символов меньше чем в формате маски\n // то не нужно мешать вводу с клавиатуры\n // если дата была введена полностью и value пришел null,\n // то можно считать что поле нуждается в очистке\n setStringValue('');\n }\n }, [value?.getTime()]);\n\n return {\n stringValue,\n inputRef,\n };\n};\n"],"mappings":"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"}
|
|
@@ -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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"}
|