@gravity-ui/date-components 3.0.3 → 3.1.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/dist/cjs/components/DateField/utils.js +11 -1
- package/dist/cjs/components/DateField/utils.js.map +1 -1
- package/dist/cjs/components/RangeDateField/hooks/useRangeDateFieldState.js +2 -3
- package/dist/cjs/components/RangeDateField/hooks/useRangeDateFieldState.js.map +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js.map +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.css +13 -0
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.css.map +1 -0
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.d.ts +11 -0
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.js +100 -0
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.js.map +1 -0
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css +6 -0
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css.map +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.d.ts +3 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js +8 -3
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js.map +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/i18n/en.json +2 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/i18n/index.d.ts +2 -2
- package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/i18n/ru.json +2 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.css +0 -3
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.css.map +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.d.ts +1 -3
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.js +2 -3
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.js.map +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/index.d.ts +1 -0
- package/dist/cjs/components/RelativeRangeDatePicker/index.js +3 -1
- package/dist/cjs/components/RelativeRangeDatePicker/index.js.map +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/types.d.ts +3 -1
- package/dist/cjs/components/RelativeRangeDatePicker/types.js.map +1 -1
- package/dist/esm/components/DateField/utils.js +11 -1
- package/dist/esm/components/DateField/utils.js.map +1 -1
- package/dist/esm/components/RangeDateField/hooks/useRangeDateFieldState.js +2 -3
- package/dist/esm/components/RangeDateField/hooks/useRangeDateFieldState.js.map +1 -1
- package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js +1 -1
- package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js.map +1 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.css +13 -0
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.css.map +1 -0
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.d.ts +11 -0
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.js +97 -0
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.js.map +1 -0
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css +6 -0
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css.map +1 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.d.ts +3 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js +9 -4
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js.map +1 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/i18n/en.json +2 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/i18n/index.d.ts +2 -2
- package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/i18n/ru.json +2 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.css +0 -3
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.css.map +1 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.d.ts +1 -3
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.js +2 -3
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.js.map +1 -1
- package/dist/esm/components/RelativeRangeDatePicker/index.d.ts +1 -0
- package/dist/esm/components/RelativeRangeDatePicker/index.js +1 -0
- package/dist/esm/components/RelativeRangeDatePicker/index.js.map +1 -1
- package/dist/esm/components/RelativeRangeDatePicker/types.d.ts +3 -1
- package/dist/esm/components/RelativeRangeDatePicker/types.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.css +0 -16
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.css.map +0 -1
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.d.ts +0 -9
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js +0 -94
- package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js.map +0 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.css +0 -16
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.css.map +0 -1
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.d.ts +0 -9
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js +0 -90
- package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js.map +0 -1
|
@@ -9,6 +9,12 @@
|
|
|
9
9
|
.g-date-relative-range-date-picker-form_size_xl .g-date-relative-range-date-picker-form__pickers .g-text-input__label {
|
|
10
10
|
width: 50px;
|
|
11
11
|
}
|
|
12
|
+
.g-date-relative-range-date-picker-form__header {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
gap: var(--g-spacing-1);
|
|
16
|
+
margin-block-end: var(--g-spacing-2);
|
|
17
|
+
}
|
|
12
18
|
.g-date-relative-range-date-picker-form__apply {
|
|
13
19
|
margin-block-start: var(--g-spacing-2);
|
|
14
20
|
}
|
package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-form';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__pickers%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20.g-text-input__label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D_size_xl%20&%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2050px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__apply%20%7B%0A%20%20%20%20%20%20%20%20margin-block-start:%20var(--g-spacing-2);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__zone%20%7B%0A%20%20%20%20%20%20%20%20margin-block:%20var(--g-spacing-2)%20calc(-1%20*%20var(--_--popup-content-padding));%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20*%20var(--_--popup-content-padding));%0A%0A%20%20%20%20%20%20%20%20border-block-start:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__presets%20%7B%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20*%20var(--_--popup-content-padding));%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAKZ;EACI;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-form';\n\n#{$block} {\n &__pickers {\n display: flex;\n flex-direction: column;\n gap: var(--g-spacing-2);\n\n .g-text-input__label {\n width: 40px;\n\n #{$block}_size_xl & {\n width: 50px;\n }\n }\n }\n\n &__apply {\n margin-block-start: var(--g-spacing-2);\n }\n\n &__zone {\n margin-block: var(--g-spacing-2) calc(-1 * var(--_--popup-content-padding));\n margin-inline: calc(-1 * var(--_--popup-content-padding));\n\n border-block-start: 1px solid var(--g-color-line-generic);\n }\n\n &__presets {\n margin-inline: calc(-1 * var(--_--popup-content-padding));\n }\n}\n"],"file":"PickerForm.css"}
|
|
1
|
+
{"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-form';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__pickers%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20.g-text-input__label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D_size_xl%20&%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2050px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__header%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-1);%0A%0A%20%20%20%20%20%20%20%20margin-block-end:%20var(--g-spacing-2);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__apply%20%7B%0A%20%20%20%20%20%20%20%20margin-block-start:%20var(--g-spacing-2);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__zone%20%7B%0A%20%20%20%20%20%20%20%20margin-block:%20var(--g-spacing-2)%20calc(-1%20*%20var(--_--popup-content-padding));%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20*%20var(--_--popup-content-padding));%0A%0A%20%20%20%20%20%20%20%20border-block-start:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__presets%20%7B%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20*%20var(--_--popup-content-padding));%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-form';\n\n#{$block} {\n &__pickers {\n display: flex;\n flex-direction: column;\n gap: var(--g-spacing-2);\n\n .g-text-input__label {\n width: 40px;\n\n #{$block}_size_xl & {\n width: 50px;\n }\n }\n }\n\n &__header {\n display: flex;\n align-items: center;\n gap: var(--g-spacing-1);\n\n margin-block-end: var(--g-spacing-2);\n }\n\n &__apply {\n margin-block-start: var(--g-spacing-2);\n }\n\n &__zone {\n margin-block: var(--g-spacing-2) calc(-1 * var(--_--popup-content-padding));\n margin-inline: calc(-1 * var(--_--popup-content-padding));\n\n border-block-start: 1px solid var(--g-color-line-generic);\n }\n\n &__presets {\n margin-inline: calc(-1 * var(--_--popup-content-padding));\n }\n}\n"],"file":"PickerForm.css"}
|
|
@@ -23,9 +23,11 @@ export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, Do
|
|
|
23
23
|
withZonesList?: boolean;
|
|
24
24
|
/** Show relative range presets */
|
|
25
25
|
withPresets?: boolean;
|
|
26
|
+
/** Show header with docs tooltip */
|
|
27
|
+
withHeader?: boolean;
|
|
26
28
|
/** Custom preset tabs */
|
|
27
29
|
presetTabs?: PresetTab[];
|
|
28
|
-
/** Custom docs for
|
|
30
|
+
/** Custom docs for picker, if empty array docs will be hidden */
|
|
29
31
|
docs?: Preset[];
|
|
30
32
|
}
|
|
31
33
|
export declare function PickerForm(props: PickerFormProps & {
|
|
@@ -8,6 +8,7 @@ const cn_1 = require("../../../../utils/cn.js");
|
|
|
8
8
|
const RelativeDatePicker_1 = require("../../../RelativeDatePicker/index.js");
|
|
9
9
|
const Presets_1 = require("../Presets/Presets.js");
|
|
10
10
|
const Zones_1 = require("../Zones/Zones.js");
|
|
11
|
+
const PickerDoc_1 = require("./PickerDoc.js");
|
|
11
12
|
const i18n_1 = require("./i18n/index.js");
|
|
12
13
|
const useRelativeRangeDatePickerDialogState_1 = require("./useRelativeRangeDatePickerDialogState.js");
|
|
13
14
|
require("./PickerForm.css");
|
|
@@ -25,8 +26,12 @@ function PickerForm(props) {
|
|
|
25
26
|
size: props.size,
|
|
26
27
|
errorPlacement: 'inside',
|
|
27
28
|
};
|
|
28
|
-
const { isDateUnavailable } = props;
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size: props.size }, props.className), style: props.style, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('
|
|
29
|
+
const { isDateUnavailable, withHeader = false } = props;
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size: props.size }, props.className), style: props.style, children: [withHeader && ((0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: props.size === 'xl' ? 'subheader-3' : 'subheader-2', children: (0, i18n_1.i18n)('Select the interval') }), (0, jsx_runtime_1.jsx)(PickerDoc_1.PickerDoc, { size: props.size, docs: props.docs, onStartUpdate: (start) => {
|
|
31
|
+
state.setStart({ type: 'relative', value: start });
|
|
32
|
+
}, onEndUpdate: (end) => {
|
|
33
|
+
state.setEnd({ type: 'relative', value: end });
|
|
34
|
+
} })] })), (0, jsx_runtime_1.jsxs)("div", { className: b('pickers'), children: [(0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined, validationState: ((_a = state.startValidation) === null || _a === void 0 ? void 0 : _a.isInvalid) ? 'invalid' : undefined, errorMessage: ((_c = (_b = state.startValidation) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c.join('\n')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: (0, i18n_1.i18n)('From'), value: state.start, onUpdate: state.setStart })), (0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined, validationState: ((_e = state.endValidation) === null || _e === void 0 ? void 0 : _e.isInvalid) ? 'invalid' : undefined, errorMessage: ((_g = (_f = state.endValidation) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g.join('\n')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: (0, i18n_1.i18n)('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? ((0, jsx_runtime_1.jsx)(uikit_1.Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
|
|
30
35
|
state.applyValue();
|
|
31
36
|
props.onApply();
|
|
32
37
|
}, className: b('apply'), width: "max", children: (0, i18n_1.i18n)('Apply') })) : null, props.withPresets && !props.readOnly ? ((0, jsx_runtime_1.jsx)(Presets_1.Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
|
|
@@ -34,6 +39,6 @@ function PickerForm(props) {
|
|
|
34
39
|
if (!props.withApplyButton) {
|
|
35
40
|
props.onApply();
|
|
36
41
|
}
|
|
37
|
-
}, minValue: props.minValue,
|
|
42
|
+
}, minValue: props.minValue, className: b('presets') })) : null, props.withZonesList ? ((0, jsx_runtime_1.jsx)("div", { className: b('zone'), children: (0, jsx_runtime_1.jsx)(Zones_1.Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
|
|
38
43
|
}
|
|
39
44
|
//# sourceMappingURL=PickerForm.js.map
|
package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n /** The size of the element */\n size?: TextInputSize;\n /**\n * Whether the values is immutable.\n * @default false\n */\n readOnly?: boolean;\n /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n format?: string;\n /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */\n placeholderValue?: DateTime;\n /** Apply changes with button */\n withApplyButton?: boolean;\n /** Show time zone selector */\n withZonesList?: boolean;\n /** Show relative range presets */\n withPresets?: boolean;\n /** Custom preset tabs */\n presetTabs?: PresetTab[];\n /** Custom docs for presets, if empty array docs will be hidden */\n docs?: Preset[];\n}\n\nexport function PickerForm(\n props: PickerFormProps & {\n onApply: () => void;\n },\n) {\n const state = useRelativeRangeDatePickerDialogState(props);\n\n const fieldProps: RelativeDatePickerProps = {\n timeZone: state.timeZone,\n format: props.format,\n minValue: props.minValue,\n maxValue: props.maxValue,\n hasClear: props.allowNullableValues,\n readOnly: props.readOnly,\n size: props.size,\n errorPlacement: 'inside',\n };\n const {isDateUnavailable} = props;\n return (\n <div className={b({size: props.size}, props.className)} style={props.style}>\n <div className={b('pickers')}>\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n }\n validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.startValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.startOf('day')}\n label={i18n('From')}\n value={state.start}\n onUpdate={state.setStart}\n />\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n }\n validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.endValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.endOf('day')}\n label={i18n('To')}\n value={state.end}\n onUpdate={state.setEnd}\n roundUp\n />\n </div>\n {props.withApplyButton && !props.readOnly ? (\n <Button\n disabled={state.isInvalid}\n size={props.size}\n onClick={() => {\n state.applyValue();\n props.onApply();\n }}\n className={b('apply')}\n width=\"max\"\n >\n {i18n('Apply')}\n </Button>\n ) : null}\n {props.withPresets && !props.readOnly ? (\n <Presets\n size={props.size}\n presetTabs={props.presetTabs}\n onChoosePreset={(start, end) => {\n state.setRange(\n {type: 'relative', value: start},\n {type: 'relative', value: end},\n );\n if (!props.withApplyButton) {\n props.onApply();\n }\n }}\n minValue={props.minValue}\n docs={props.docs}\n className={b('presets')}\n />\n ) : null}\n {props.withZonesList ? (\n <div className={b('zone')}>\n <Zones\n value={state.timeZone}\n onUpdate={state.setTimeZone}\n disabled={props.readOnly}\n size={props.size}\n />\n </div>\n ) : null}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n /** The size of the element */\n size?: TextInputSize;\n /**\n * Whether the values is immutable.\n * @default false\n */\n readOnly?: boolean;\n /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n format?: string;\n /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */\n placeholderValue?: DateTime;\n /** Apply changes with button */\n withApplyButton?: boolean;\n /** Show time zone selector */\n withZonesList?: boolean;\n /** Show relative range presets */\n withPresets?: boolean;\n /** Show header with docs tooltip */\n withHeader?: boolean;\n /** Custom preset tabs */\n presetTabs?: PresetTab[];\n /** Custom docs for picker, if empty array docs will be hidden */\n docs?: Preset[];\n}\n\nexport function PickerForm(\n props: PickerFormProps & {\n onApply: () => void;\n },\n) {\n const state = useRelativeRangeDatePickerDialogState(props);\n\n const fieldProps: RelativeDatePickerProps = {\n timeZone: state.timeZone,\n format: props.format,\n minValue: props.minValue,\n maxValue: props.maxValue,\n hasClear: props.allowNullableValues,\n readOnly: props.readOnly,\n size: props.size,\n errorPlacement: 'inside',\n };\n const {isDateUnavailable, withHeader = false} = props;\n return (\n <div className={b({size: props.size}, props.className)} style={props.style}>\n {withHeader && (\n <div className={b('header')}>\n <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n {i18n('Select the interval')}\n </Text>\n <PickerDoc\n size={props.size}\n docs={props.docs}\n onStartUpdate={(start) => {\n state.setStart({type: 'relative', value: start});\n }}\n onEndUpdate={(end) => {\n state.setEnd({type: 'relative', value: end});\n }}\n />\n </div>\n )}\n\n <div className={b('pickers')}>\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n }\n validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.startValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.startOf('day')}\n label={i18n('From')}\n value={state.start}\n onUpdate={state.setStart}\n />\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n }\n validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.endValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.endOf('day')}\n label={i18n('To')}\n value={state.end}\n onUpdate={state.setEnd}\n roundUp\n />\n </div>\n {props.withApplyButton && !props.readOnly ? (\n <Button\n disabled={state.isInvalid}\n size={props.size}\n onClick={() => {\n state.applyValue();\n props.onApply();\n }}\n className={b('apply')}\n width=\"max\"\n >\n {i18n('Apply')}\n </Button>\n ) : null}\n {props.withPresets && !props.readOnly ? (\n <Presets\n size={props.size}\n presetTabs={props.presetTabs}\n onChoosePreset={(start, end) => {\n state.setRange(\n {type: 'relative', value: start},\n {type: 'relative', value: end},\n );\n if (!props.withApplyButton) {\n props.onApply();\n }\n }}\n minValue={props.minValue}\n className={b('presets')}\n />\n ) : null}\n {props.withZonesList ? (\n <div className={b('zone')}>\n <Zones\n value={state.timeZone}\n onUpdate={state.setTimeZone}\n disabled={props.readOnly}\n size={props.size}\n />\n </div>\n ) : null}\n </div>\n );\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export declare const i18n: ((key: "Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply", params?: import("@gravity-ui/i18n").Params) => string) & {
|
|
1
|
+
export declare const i18n: ((key: "Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply" | "Select the interval", params?: import("@gravity-ui/i18n").Params) => string) & {
|
|
2
2
|
keysetData: {
|
|
3
|
-
"g-date-relative-range-date-picker-dialog": Record<"Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply", import("@gravity-ui/i18n").KeyData>;
|
|
3
|
+
"g-date-relative-range-date-picker-dialog": Record<"Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply" | "Select the interval", import("@gravity-ui/i18n").KeyData>;
|
|
4
4
|
};
|
|
5
5
|
};
|
|
@@ -12,9 +12,6 @@
|
|
|
12
12
|
.g-date-relative-range-date-picker-presets__list-container {
|
|
13
13
|
outline: none;
|
|
14
14
|
}
|
|
15
|
-
.g-date-relative-range-date-picker-presets__doc {
|
|
16
|
-
margin-inline-start: auto;
|
|
17
|
-
}
|
|
18
15
|
.g-date-relative-range-date-picker-presets__content {
|
|
19
16
|
overflow: auto;
|
|
20
17
|
height: 128px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/RelativeRangeDatePicker/components/Presets/data:;charset=utf-8,@use%20'@gravity-ui/uikit/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-presets';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--g-list-item-padding:%200%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20&__tabs%20%7B%0A%20%20%20%20%20%20%20%20--g-tabs-border-width:%200;%0A%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20padding-inline:%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20%20%20%20%20box-shadow:%20inset%200%20-1px%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__list-container%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__doc%20%7B%0A%20%20%20%20%20%20%20%20margin-inline-start:%20auto;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20overflow:%20auto;%0A%0A%20%20%20%20%20%20%20%20height:%20128px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&_size%20%7B%0A%20%20%20%20%20%20%20%20&_l%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20144px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20162px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20@include%20mixins.text-body-2();%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A","components/RelativeRangeDatePicker/components/Presets/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;;AAEA;EACI;EAEA;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAKI;EACI;;AAIJ;EACI;EC+HZ;EACA;EACA;EACA","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-presets';\n\n#{$block} {\n --g-list-item-padding: 0 var(--_--g-date-picker-presets-padding, 0);\n\n &__tabs {\n --g-tabs-border-width: 0;\n\n display: flex;\n align-items: center;\n gap: var(--g-spacing-2);\n\n padding-inline: var(--_--g-date-picker-presets-padding, 0);\n\n box-shadow: inset 0 -1px var(--g-color-line-generic);\n }\n\n &__list-container {\n outline: none;\n }\n\n &__doc {\n margin-inline-start: auto;\n }\n\n &__content {\n overflow: auto;\n\n height: 128px;\n }\n\n &_size {\n &_l {\n #{$block}__content {\n height: 144px;\n }\n }\n &_xl {\n #{$block}__content {\n height: 162px;\n @include mixins.text-body-2();\n }\n }\n }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: $type;\n}\n\n@mixin button-reset() {\n padding: 0;\n\n font-family: var(--g-text-body-font-family);\n font-size: inherit;\n font-weight: var(--g-text-body-font-weight);\n\n color: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n inset: logical (-$v) (-$h) (-$v);\n }\n}\n\n@mixin max-height($height) {\n max-height: $height;\n overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n @include overflow-ellipsis();\n\n max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n position: relative;\n\n &::before {\n display: block;\n content: '';\n width: 100%;\n padding-block-start: $ratio * 100%;\n }\n\n > *:only-child {\n position: absolute;\n inset: 0;\n }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n @if $append {\n @return selector.append($mod, $selector);\n } @else {\n @return list.join($mod, $selector, $separator: space);\n }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n @each $selector in $selectors {\n &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n border-radius: $radius;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n border-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n border-radius: 0;\n border-inline: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n border-radius: 100px;\n }\n\n &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n }\n\n &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n border-inline-start: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n border-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n border-radius: 0;\n border-inline-start: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n border-inline-start: 0;\n }\n }\n}\n\n// Typography\n\n@mixin text-body-1() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-3-font-size);\n line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-short-font-size);\n line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-1-font-size);\n line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-2-font-size);\n line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-1-font-size);\n line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-2-font-size);\n line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-1-font-size);\n line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-2-font-size);\n line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-3-font-size);\n line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-1-font-size);\n line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-2-font-size);\n line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-3-font-size);\n line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-4-font-size);\n line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-1-font-size);\n line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-2-font-size);\n line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-3-font-size);\n line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-1-font-size);\n line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-2-font-size);\n line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-3-font-size);\n line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n background-image: repeating-linear-gradient(\n -45deg,\n $loading-color-1,\n $loading-color-1 4px,\n $loading-color-2 4px,\n $loading-color-2 8px\n );\n background-size: 150%;\n background-clip: padding-box;\n\n // stylelint-disable-next-line no-unknown-animations\n animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n &::-webkit-scrollbar,\n *::-webkit-scrollbar {\n width: var(--g-scrollbar-width);\n height: var(--g-scrollbar-width);\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-track,\n *::-webkit-scrollbar-track {\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-corner,\n *::-webkit-scrollbar-corner {\n background: var(--g-color-scroll-corner);\n }\n\n &::-webkit-scrollbar-thumb,\n *::-webkit-scrollbar-thumb {\n background: var(--g-color-scroll-handle);\n }\n\n &::-webkit-scrollbar-thumb:hover,\n *::-webkit-scrollbar-thumb:hover {\n background: var(--g-color-scroll-handle-hover);\n }\n}\n"],"file":"Presets.css"}
|
|
1
|
+
{"version":3,"sources":["components/RelativeRangeDatePicker/components/Presets/data:;charset=utf-8,@use%20'@gravity-ui/uikit/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-presets';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--g-list-item-padding:%200%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20&__tabs%20%7B%0A%20%20%20%20%20%20%20%20--g-tabs-border-width:%200;%0A%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20padding-inline:%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20%20%20%20%20box-shadow:%20inset%200%20-1px%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__list-container%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20overflow:%20auto;%0A%0A%20%20%20%20%20%20%20%20height:%20128px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&_size%20%7B%0A%20%20%20%20%20%20%20%20&_l%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20144px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20162px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20@include%20mixins.text-body-2();%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A","components/RelativeRangeDatePicker/components/Presets/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;;AAEA;EACI;EAEA;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAKI;EACI;;AAIJ;EACI;ECmIZ;EACA;EACA;EACA","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-presets';\n\n#{$block} {\n --g-list-item-padding: 0 var(--_--g-date-picker-presets-padding, 0);\n\n &__tabs {\n --g-tabs-border-width: 0;\n\n display: flex;\n align-items: center;\n gap: var(--g-spacing-2);\n\n padding-inline: var(--_--g-date-picker-presets-padding, 0);\n\n box-shadow: inset 0 -1px var(--g-color-line-generic);\n }\n\n &__list-container {\n outline: none;\n }\n\n &__content {\n overflow: auto;\n\n height: 128px;\n }\n\n &_size {\n &_l {\n #{$block}__content {\n height: 144px;\n }\n }\n &_xl {\n #{$block}__content {\n height: 162px;\n @include mixins.text-body-2();\n }\n }\n }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: $type;\n}\n\n@mixin button-reset() {\n padding: 0;\n\n font-family: var(--g-text-body-font-family);\n font-size: inherit;\n font-weight: var(--g-text-body-font-weight);\n\n color: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n inset: logical (-$v) (-$h) (-$v);\n }\n}\n\n@mixin max-height($height) {\n max-height: $height;\n overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n @include overflow-ellipsis();\n\n max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n position: relative;\n\n &::before {\n display: block;\n content: '';\n width: 100%;\n padding-block-start: $ratio * 100%;\n }\n\n > *:only-child {\n position: absolute;\n inset: 0;\n }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n @if $append {\n @return selector.append($mod, $selector);\n } @else {\n @return list.join($mod, $selector, $separator: space);\n }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n @each $selector in $selectors {\n &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n border-radius: $radius;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n border-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n border-radius: 0;\n border-inline: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n border-radius: 100px;\n }\n\n &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n }\n\n &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n border-inline-start: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n border-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n border-radius: 0;\n border-inline-start: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n border-inline-start: 0;\n }\n }\n}\n\n// Typography\n\n@mixin text-body-1() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-3-font-size);\n line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-short-font-size);\n line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-1-font-size);\n line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-2-font-size);\n line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-1-font-size);\n line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-2-font-size);\n line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-1-font-size);\n line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-2-font-size);\n line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-3-font-size);\n line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-1-font-size);\n line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-2-font-size);\n line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-3-font-size);\n line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-4-font-size);\n line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-1-font-size);\n line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-2-font-size);\n line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-3-font-size);\n line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-1-font-size);\n line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-2-font-size);\n line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-3-font-size);\n line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n background-image: repeating-linear-gradient(\n -45deg,\n $loading-color-1,\n $loading-color-1 4px,\n $loading-color-2 4px,\n $loading-color-2 8px\n );\n background-size: 150%;\n background-clip: padding-box;\n\n // stylelint-disable-next-line no-unknown-animations\n animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n &::-webkit-scrollbar,\n *::-webkit-scrollbar {\n width: var(--g-scrollbar-width);\n height: var(--g-scrollbar-width);\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-track,\n *::-webkit-scrollbar-track {\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-corner,\n *::-webkit-scrollbar-corner {\n background: var(--g-color-scroll-corner);\n }\n\n &::-webkit-scrollbar-thumb,\n *::-webkit-scrollbar-thumb {\n background: var(--g-color-scroll-handle);\n }\n\n &::-webkit-scrollbar-thumb:hover,\n *::-webkit-scrollbar-thumb:hover {\n background: var(--g-color-scroll-handle-hover);\n }\n}\n"],"file":"Presets.css"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { DateTime } from '@gravity-ui/date-utils';
|
|
2
|
-
import type { Preset } from "./defaultPresets.js";
|
|
3
2
|
import type { PresetTab } from "./utils.js";
|
|
4
3
|
import "./Presets.css";
|
|
5
4
|
export interface PresetProps {
|
|
@@ -9,9 +8,8 @@ export interface PresetProps {
|
|
|
9
8
|
minValue?: DateTime;
|
|
10
9
|
size?: 's' | 'm' | 'l' | 'xl';
|
|
11
10
|
presetTabs?: PresetTab[];
|
|
12
|
-
docs?: Preset[];
|
|
13
11
|
}
|
|
14
|
-
export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs,
|
|
12
|
+
export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
|
|
15
13
|
export declare const SIZE_TO_ITEM_HEIGHT: {
|
|
16
14
|
s: number;
|
|
17
15
|
m: number;
|
|
@@ -8,11 +8,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
9
9
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
10
10
|
const cn_1 = require("../../../../utils/cn.js");
|
|
11
|
-
const PresetsDoc_1 = require("./PresetsDoc.js");
|
|
12
11
|
const utils_1 = require("./utils.js");
|
|
13
12
|
require("./Presets.css");
|
|
14
13
|
const b = (0, cn_1.block)('relative-range-date-picker-presets');
|
|
15
|
-
function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs,
|
|
14
|
+
function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, }) {
|
|
16
15
|
var _a, _b;
|
|
17
16
|
const tabs = react_1.default.useMemo(() => {
|
|
18
17
|
return (0, utils_1.filterPresetTabs)(presetTabs !== null && presetTabs !== void 0 ? presetTabs : (0, utils_1.getDefaultPresetTabs)({ withTime }), { minValue });
|
|
@@ -28,7 +27,7 @@ function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, pr
|
|
|
28
27
|
if (activeTab.id !== activeTabId) {
|
|
29
28
|
setActiveTab(activeTab.id);
|
|
30
29
|
}
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: b({ size }, className), children: (0, jsx_runtime_1.jsxs)(uikit_1.TabProvider, { value: activeTabId, onUpdate: setActiveTab, children: [(0, jsx_runtime_1.
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: b({ size }, className), children: (0, jsx_runtime_1.jsxs)(uikit_1.TabProvider, { value: activeTabId, onUpdate: setActiveTab, children: [(0, jsx_runtime_1.jsx)("div", { className: b('tabs'), children: (0, jsx_runtime_1.jsx)(uikit_1.TabList, { size: size === 's' ? 'm' : size, children: tabs.map(({ id, title }) => ((0, jsx_runtime_1.jsx)(uikit_1.Tab, { value: id, children: title }, id))) }) }), (0, jsx_runtime_1.jsx)(uikit_1.TabPanel, { className: b('content'), value: activeTabId, children: (0, jsx_runtime_1.jsx)(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }) }));
|
|
32
31
|
}
|
|
33
32
|
exports.SIZE_TO_ITEM_HEIGHT = {
|
|
34
33
|
s: 28,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Presets.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/Presets.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"Presets.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/Presets.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {List, Tab, TabList, TabPanel, TabProvider} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\n\nimport type {Preset} from './defaultPresets';\nimport {filterPresetTabs, getDefaultPresetTabs} from './utils';\nimport type {PresetTab} from './utils';\n\nimport './Presets.scss';\n\nconst b = block('relative-range-date-picker-presets');\n\nexport interface PresetProps {\n className?: string;\n onChoosePreset: (start: string, end: string) => void;\n withTime?: boolean;\n minValue?: DateTime;\n size?: 's' | 'm' | 'l' | 'xl';\n presetTabs?: PresetTab[];\n}\nexport function Presets({\n className,\n size = 'm',\n minValue,\n withTime,\n onChoosePreset,\n presetTabs,\n}: PresetProps) {\n const tabs = React.useMemo(() => {\n return filterPresetTabs(presetTabs ?? getDefaultPresetTabs({withTime}), {minValue});\n }, [withTime, minValue, presetTabs]);\n\n const [activeTabId, setActiveTab] = React.useState(tabs[0]?.id);\n\n if (tabs.length === 0) {\n return null;\n }\n\n const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];\n if (!activeTab) {\n return null;\n }\n\n if (activeTab.id !== activeTabId) {\n setActiveTab(activeTab.id);\n }\n\n return (\n <div className={b({size}, className)}>\n <TabProvider value={activeTabId} onUpdate={setActiveTab}>\n <div className={b('tabs')}>\n <TabList size={size === 's' ? 'm' : size}>\n {tabs.map(({id, title}) => (\n <Tab key={id} value={id}>\n {title}\n </Tab>\n ))}\n </TabList>\n </div>\n <TabPanel className={b('content')} value={activeTabId}>\n <PresetsList\n presets={activeTab.presets}\n onChoosePreset={onChoosePreset}\n size={size}\n />\n </TabPanel>\n </TabProvider>\n </div>\n );\n}\nexport const SIZE_TO_ITEM_HEIGHT = {\n s: 28,\n m: 28,\n l: 32,\n xl: 36,\n};\n\ninterface PresetsListProps {\n size?: 's' | 'm' | 'l' | 'xl';\n presets: Preset[];\n onChoosePreset: (start: string, end: string) => void;\n}\nfunction PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {\n const ref = React.useRef<List<Preset>>(null);\n\n React.useEffect(() => {\n const list = ref.current;\n const container = ref.current?.refContainer.current?.node as HTMLDivElement | undefined;\n if (list && container) {\n try {\n container.setAttribute('tabindex', '0');\n container.setAttribute('class', b('list-container'));\n const handleFocus = () => {\n if (list.getActiveItem() === null) {\n list.activateItem(0, true);\n }\n };\n container.addEventListener('focus', handleFocus);\n return () => {\n container.removeEventListener('focus', handleFocus);\n };\n } catch {\n // Oooops\n }\n }\n return undefined;\n }, []);\n\n return (\n <List\n ref={ref}\n className={b('list')}\n itemClassName={b('item')}\n items={presets}\n filterable={false}\n virtualized={false}\n renderItem={(item) => item.title}\n itemHeight={SIZE_TO_ITEM_HEIGHT[size]}\n onItemClick={(item) => {\n onChoosePreset(item.from, item.to);\n }}\n />\n );\n}\n"]}
|
|
@@ -9,3 +9,4 @@ export { DEFAULT_DATE_PRESETS, DEFAULT_TIME_PRESETS, DEFAULT_OTHERS_PRESETS, } f
|
|
|
9
9
|
export { getDefaultPresetTabs } from "./components/Presets/utils.js";
|
|
10
10
|
export type { Preset as RelativeRangeDatePickerPreset } from "./components/Presets/defaultPresets.js";
|
|
11
11
|
export type { PresetTab as RelativeRangeDatePickerPresetTab } from "./components/Presets/utils.js";
|
|
12
|
+
export { getPresetTitle as getRelativeRangeDatePickerPresetTitle } from "./components/Presets/utils.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getDefaultPresetTabs = exports.DEFAULT_OTHERS_PRESETS = exports.DEFAULT_TIME_PRESETS = exports.DEFAULT_DATE_PRESETS = exports.RelativeRangeDatePickerForm = exports.RelativeRangeDatePickerDialog = void 0;
|
|
3
|
+
exports.getRelativeRangeDatePickerPresetTitle = exports.getDefaultPresetTabs = exports.DEFAULT_OTHERS_PRESETS = exports.DEFAULT_TIME_PRESETS = exports.DEFAULT_DATE_PRESETS = exports.RelativeRangeDatePickerForm = exports.RelativeRangeDatePickerDialog = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
tslib_1.__exportStar(require("./RelativeRangeDatePicker.js"), exports);
|
|
6
6
|
tslib_1.__exportStar(require("./types.js"), exports);
|
|
@@ -15,4 +15,6 @@ Object.defineProperty(exports, "DEFAULT_TIME_PRESETS", { enumerable: true, get:
|
|
|
15
15
|
Object.defineProperty(exports, "DEFAULT_OTHERS_PRESETS", { enumerable: true, get: function () { return defaultPresets_1.DEFAULT_OTHERS_PRESETS; } });
|
|
16
16
|
var utils_1 = require("./components/Presets/utils.js");
|
|
17
17
|
Object.defineProperty(exports, "getDefaultPresetTabs", { enumerable: true, get: function () { return utils_1.getDefaultPresetTabs; } });
|
|
18
|
+
var utils_2 = require("./components/Presets/utils.js");
|
|
19
|
+
Object.defineProperty(exports, "getRelativeRangeDatePickerPresetTitle", { enumerable: true, get: function () { return utils_2.getPresetTitle; } });
|
|
18
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/index.ts"],"names":[],"mappings":";;;;AAAA,uEAA0C;AAC1C,qDAAwB;AACxB,0EAAqG;AAA7F,6HAAA,YAAY,OAAiC;AAErD,sEAA+F;AAAvF,yHAAA,UAAU,OAA+B;AAEjD,qFAAwD;AACxD,yEAI6C;AAHzC,sHAAA,oBAAoB,OAAA;AACpB,sHAAA,oBAAoB,OAAA;AACpB,wHAAA,sBAAsB,OAAA;AAE1B,uDAAgE;AAAxD,6GAAA,oBAAoB,OAAA","sourcesContent":["export * from './RelativeRangeDatePicker';\nexport * from './types';\nexport {PickerDialog as RelativeRangeDatePickerDialog} from './components/PickerDialog/PickerDialog';\nexport type {PickerDialogProps as RelativeRangeDatePickerDialogProps} from './components/PickerDialog/PickerDialog';\nexport {PickerForm as RelativeRangeDatePickerForm} from './components/PickerDialog/PickerForm';\nexport type {PickerFormProps as RelativeRangeDatePickerFormProps} from './components/PickerDialog/PickerForm';\nexport * from './hooks/useRelativeRangeDatePickerState';\nexport {\n DEFAULT_DATE_PRESETS,\n DEFAULT_TIME_PRESETS,\n DEFAULT_OTHERS_PRESETS,\n} from './components/Presets/defaultPresets';\nexport {getDefaultPresetTabs} from './components/Presets/utils';\nexport type {Preset as RelativeRangeDatePickerPreset} from './components/Presets/defaultPresets';\nexport type {PresetTab as RelativeRangeDatePickerPresetTab} from './components/Presets/utils';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/index.ts"],"names":[],"mappings":";;;;AAAA,uEAA0C;AAC1C,qDAAwB;AACxB,0EAAqG;AAA7F,6HAAA,YAAY,OAAiC;AAErD,sEAA+F;AAAvF,yHAAA,UAAU,OAA+B;AAEjD,qFAAwD;AACxD,yEAI6C;AAHzC,sHAAA,oBAAoB,OAAA;AACpB,sHAAA,oBAAoB,OAAA;AACpB,wHAAA,sBAAsB,OAAA;AAE1B,uDAAgE;AAAxD,6GAAA,oBAAoB,OAAA;AAG5B,uDAAmG;AAA3F,8HAAA,cAAc,OAAyC","sourcesContent":["export * from './RelativeRangeDatePicker';\nexport * from './types';\nexport {PickerDialog as RelativeRangeDatePickerDialog} from './components/PickerDialog/PickerDialog';\nexport type {PickerDialogProps as RelativeRangeDatePickerDialogProps} from './components/PickerDialog/PickerDialog';\nexport {PickerForm as RelativeRangeDatePickerForm} from './components/PickerDialog/PickerForm';\nexport type {PickerFormProps as RelativeRangeDatePickerFormProps} from './components/PickerDialog/PickerForm';\nexport * from './hooks/useRelativeRangeDatePickerState';\nexport {\n DEFAULT_DATE_PRESETS,\n DEFAULT_TIME_PRESETS,\n DEFAULT_OTHERS_PRESETS,\n} from './components/Presets/defaultPresets';\nexport {getDefaultPresetTabs} from './components/Presets/utils';\nexport type {Preset as RelativeRangeDatePickerPreset} from './components/Presets/defaultPresets';\nexport type {PresetTab as RelativeRangeDatePickerPresetTab} from './components/Presets/utils';\nexport {getPresetTitle as getRelativeRangeDatePickerPresetTitle} from './components/Presets/utils';\n"]}
|
|
@@ -26,9 +26,11 @@ export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerSta
|
|
|
26
26
|
withZonesList?: boolean;
|
|
27
27
|
/** Show relative range presets */
|
|
28
28
|
withPresets?: boolean;
|
|
29
|
+
/** Show header with docs tooltip */
|
|
30
|
+
withHeader?: boolean;
|
|
29
31
|
/** Custom preset tabs */
|
|
30
32
|
presetTabs?: PresetTab[];
|
|
31
|
-
/** Custom docs for
|
|
33
|
+
/** Custom docs for picker, if empty array docs will be hidden */
|
|
32
34
|
docs?: Preset[];
|
|
33
35
|
/** Show selected relative values as absolute dates */
|
|
34
36
|
alwaysShowAsAbsolute?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {Value} from '../RelativeDatePicker';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputBase,\n InputDOMProps,\n PopupStyleProps,\n RangeValue,\n StyleProps,\n TextInputProps,\n Validation,\n} from '../types';\n\nimport type {Preset} from './components/Presets/defaultPresets';\nimport type {PresetTab} from './components/Presets/utils';\nimport type {\n RelativeRangeDatePickerStateOptions,\n RelativeRangeDatePickerValue,\n} from './hooks/useRelativeRangeDatePickerState';\n\nexport type RelativeRangeDatePickerTriggerProps = Pick<\n React.AllHTMLAttributes<HTMLElement>,\n | 'id'\n | 'role'\n | 'aria-controls'\n | 'aria-haspopup'\n | 'aria-expanded'\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'aria-details'\n | 'onClick'\n | 'onKeyDown'\n | 'disabled'\n | 'readOnly'\n>;\n\nexport interface RelativeRangeDatePickerRenderControlProps {\n ref: React.Ref<HTMLElement>;\n value: RelativeRangeDatePickerValue | null;\n title: string;\n errorMessage?: React.ReactNode;\n validationState?: 'invalid';\n open: boolean;\n setOpen: (open: boolean) => void;\n triggerProps: RelativeRangeDatePickerTriggerProps;\n}\n\nexport interface RelativeRangeDatePickerProps\n extends RelativeRangeDatePickerStateOptions,\n DomProps,\n AccessibilityProps,\n InputBase,\n InputDOMProps,\n TextInputProps,\n Validation,\n FocusableProps,\n StyleProps,\n PopupStyleProps {\n /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n format?: string;\n /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */\n placeholderValue?: DateTime;\n /** Apply changes with button */\n withApplyButton?: boolean;\n /** Show time zone selector */\n withZonesList?: boolean;\n /** Show relative range presets */\n withPresets?: boolean;\n /** Custom preset tabs */\n presetTabs?: PresetTab[];\n /** Custom docs for
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {Value} from '../RelativeDatePicker';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputBase,\n InputDOMProps,\n PopupStyleProps,\n RangeValue,\n StyleProps,\n TextInputProps,\n Validation,\n} from '../types';\n\nimport type {Preset} from './components/Presets/defaultPresets';\nimport type {PresetTab} from './components/Presets/utils';\nimport type {\n RelativeRangeDatePickerStateOptions,\n RelativeRangeDatePickerValue,\n} from './hooks/useRelativeRangeDatePickerState';\n\nexport type RelativeRangeDatePickerTriggerProps = Pick<\n React.AllHTMLAttributes<HTMLElement>,\n | 'id'\n | 'role'\n | 'aria-controls'\n | 'aria-haspopup'\n | 'aria-expanded'\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'aria-details'\n | 'onClick'\n | 'onKeyDown'\n | 'disabled'\n | 'readOnly'\n>;\n\nexport interface RelativeRangeDatePickerRenderControlProps {\n ref: React.Ref<HTMLElement>;\n value: RelativeRangeDatePickerValue | null;\n title: string;\n errorMessage?: React.ReactNode;\n validationState?: 'invalid';\n open: boolean;\n setOpen: (open: boolean) => void;\n triggerProps: RelativeRangeDatePickerTriggerProps;\n}\n\nexport interface RelativeRangeDatePickerProps\n extends RelativeRangeDatePickerStateOptions,\n DomProps,\n AccessibilityProps,\n InputBase,\n InputDOMProps,\n TextInputProps,\n Validation,\n FocusableProps,\n StyleProps,\n PopupStyleProps {\n /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n format?: string;\n /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */\n placeholderValue?: DateTime;\n /** Apply changes with button */\n withApplyButton?: boolean;\n /** Show time zone selector */\n withZonesList?: boolean;\n /** Show relative range presets */\n withPresets?: boolean;\n /** Show header with docs tooltip */\n withHeader?: boolean;\n /** Custom preset tabs */\n presetTabs?: PresetTab[];\n /** Custom docs for picker, if empty array docs will be hidden */\n docs?: Preset[];\n /** Show selected relative values as absolute dates */\n alwaysShowAsAbsolute?: boolean;\n /** */\n getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;\n /** Handler that is called when the popup's open state changes. */\n onOpenChange?: (open: boolean) => void;\n /** Used to render control. */\n renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;\n}\n"]}
|
|
@@ -498,8 +498,18 @@ function parseDate(options) {
|
|
|
498
498
|
function isDateStringWithTimeZone(str) {
|
|
499
499
|
return /z$/i.test(str) || /[+-]\d\d:\d\d$/.test(str);
|
|
500
500
|
}
|
|
501
|
+
/**
|
|
502
|
+
* Trims leading and trailing spaces from a string and replaces multiple consecutive spaces with a single space.
|
|
503
|
+
*
|
|
504
|
+
* @param str - The input string to process.
|
|
505
|
+
* @returns The processed string with trimmed spaces and single spaces between words.
|
|
506
|
+
*/
|
|
507
|
+
function trimExtraSpaces(str) {
|
|
508
|
+
return str.trim().replace(/\s+/g, ' ');
|
|
509
|
+
}
|
|
501
510
|
export function parseDateFromString(str, format, timeZone) {
|
|
502
|
-
|
|
511
|
+
const input = typeof str === 'string' ? trimExtraSpaces(str) : str;
|
|
512
|
+
let date = parseDate({ input, format, timeZone });
|
|
503
513
|
if (date.isValid()) {
|
|
504
514
|
if (timeZone && !isDateStringWithTimeZone(str)) {
|
|
505
515
|
const time = parseDate({ input: str, format });
|