@pushwoosh/dumb-components 2.12.1 → 3.0.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.
Files changed (130) hide show
  1. package/Calendar/CalendarMonthSlider/CalendarMonthSlider.js +11 -5
  2. package/index.d.ts +0 -1
  3. package/index.js +0 -1
  4. package/package.json +1 -1
  5. package/DateTimePicker/components/AutosizeInput/AutosizeInput.d.ts +0 -3
  6. package/DateTimePicker/components/AutosizeInput/AutosizeInput.js +0 -39
  7. package/DateTimePicker/components/AutosizeInput/index.d.ts +0 -1
  8. package/DateTimePicker/components/AutosizeInput/index.js +0 -1
  9. package/DateTimePicker/components/AutosizeInput/styles.d.ts +0 -3
  10. package/DateTimePicker/components/AutosizeInput/styles.js +0 -5
  11. package/DateTimePicker/components/AutosizeInput/types.d.ts +0 -10
  12. package/DateTimePicker/components/AutosizeInput/types.js +0 -1
  13. package/DateTimePicker/components/DatePicker/DatePicker.d.ts +0 -8
  14. package/DateTimePicker/components/DatePicker/DatePicker.js +0 -65
  15. package/DateTimePicker/components/DatePicker/index.d.ts +0 -1
  16. package/DateTimePicker/components/DatePicker/index.js +0 -1
  17. package/DateTimePicker/components/DatePicker/types.d.ts +0 -20
  18. package/DateTimePicker/components/DatePicker/types.js +0 -1
  19. package/DateTimePicker/components/DatePickerField/DatePickerField.d.ts +0 -8
  20. package/DateTimePicker/components/DatePickerField/DatePickerField.js +0 -86
  21. package/DateTimePicker/components/DatePickerField/index.d.ts +0 -1
  22. package/DateTimePicker/components/DatePickerField/index.js +0 -1
  23. package/DateTimePicker/components/DatePickerField/types.d.ts +0 -20
  24. package/DateTimePicker/components/DatePickerField/types.js +0 -1
  25. package/DateTimePicker/components/DateTimePicker/DateTimePicker.d.ts +0 -8
  26. package/DateTimePicker/components/DateTimePicker/DateTimePicker.js +0 -64
  27. package/DateTimePicker/components/DateTimePicker/index.d.ts +0 -1
  28. package/DateTimePicker/components/DateTimePicker/index.js +0 -1
  29. package/DateTimePicker/components/DateTimePicker/types.d.ts +0 -13
  30. package/DateTimePicker/components/DateTimePicker/types.js +0 -1
  31. package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.d.ts +0 -8
  32. package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js +0 -91
  33. package/DateTimePicker/components/DateTimePickerField/helpers.d.ts +0 -8
  34. package/DateTimePicker/components/DateTimePickerField/helpers.js +0 -13
  35. package/DateTimePicker/components/DateTimePickerField/index.d.ts +0 -1
  36. package/DateTimePicker/components/DateTimePickerField/index.js +0 -1
  37. package/DateTimePicker/components/DateTimePickerField/types.d.ts +0 -20
  38. package/DateTimePicker/components/DateTimePickerField/types.js +0 -1
  39. package/DateTimePicker/components/DecadeView/DecadeView.d.ts +0 -3
  40. package/DateTimePicker/components/DecadeView/DecadeView.js +0 -35
  41. package/DateTimePicker/components/DecadeView/index.d.ts +0 -1
  42. package/DateTimePicker/components/DecadeView/index.js +0 -1
  43. package/DateTimePicker/components/DecadeView/types.d.ts +0 -6
  44. package/DateTimePicker/components/DecadeView/types.js +0 -1
  45. package/DateTimePicker/components/Input/Input.d.ts +0 -3
  46. package/DateTimePicker/components/Input/Input.js +0 -17
  47. package/DateTimePicker/components/Input/index.d.ts +0 -1
  48. package/DateTimePicker/components/Input/index.js +0 -1
  49. package/DateTimePicker/components/Input/styles.d.ts +0 -3
  50. package/DateTimePicker/components/Input/styles.js +0 -6
  51. package/DateTimePicker/components/Input/types.d.ts +0 -11
  52. package/DateTimePicker/components/Input/types.js +0 -1
  53. package/DateTimePicker/components/Month/Month.d.ts +0 -3
  54. package/DateTimePicker/components/Month/Month.js +0 -78
  55. package/DateTimePicker/components/Month/index.d.ts +0 -1
  56. package/DateTimePicker/components/Month/index.js +0 -1
  57. package/DateTimePicker/components/Month/types.d.ts +0 -8
  58. package/DateTimePicker/components/Month/types.js +0 -1
  59. package/DateTimePicker/components/MonthView/MonthView.d.ts +0 -3
  60. package/DateTimePicker/components/MonthView/MonthView.js +0 -41
  61. package/DateTimePicker/components/MonthView/index.d.ts +0 -1
  62. package/DateTimePicker/components/MonthView/index.js +0 -1
  63. package/DateTimePicker/components/MonthView/types.d.ts +0 -11
  64. package/DateTimePicker/components/MonthView/types.js +0 -1
  65. package/DateTimePicker/components/NumberPicker/NumberPicker.d.ts +0 -3
  66. package/DateTimePicker/components/NumberPicker/NumberPicker.js +0 -133
  67. package/DateTimePicker/components/NumberPicker/helpers.d.ts +0 -2
  68. package/DateTimePicker/components/NumberPicker/helpers.js +0 -5
  69. package/DateTimePicker/components/NumberPicker/index.d.ts +0 -1
  70. package/DateTimePicker/components/NumberPicker/index.js +0 -1
  71. package/DateTimePicker/components/NumberPicker/styles.d.ts +0 -3
  72. package/DateTimePicker/components/NumberPicker/styles.js +0 -6
  73. package/DateTimePicker/components/NumberPicker/types.d.ts +0 -13
  74. package/DateTimePicker/components/NumberPicker/types.js +0 -1
  75. package/DateTimePicker/components/PickerPlate/PickerPlate.d.ts +0 -3
  76. package/DateTimePicker/components/PickerPlate/PickerPlate.js +0 -27
  77. package/DateTimePicker/components/PickerPlate/index.d.ts +0 -1
  78. package/DateTimePicker/components/PickerPlate/index.js +0 -1
  79. package/DateTimePicker/components/PickerPlate/styles.d.ts +0 -17
  80. package/DateTimePicker/components/PickerPlate/styles.js +0 -9
  81. package/DateTimePicker/components/PickerPlate/types.d.ts +0 -7
  82. package/DateTimePicker/components/PickerPlate/types.js +0 -1
  83. package/DateTimePicker/components/YearView/YearView.d.ts +0 -3
  84. package/DateTimePicker/components/YearView/YearView.js +0 -36
  85. package/DateTimePicker/components/YearView/index.d.ts +0 -1
  86. package/DateTimePicker/components/YearView/index.js +0 -1
  87. package/DateTimePicker/components/YearView/types.d.ts +0 -6
  88. package/DateTimePicker/components/YearView/types.js +0 -1
  89. package/DateTimePicker/constants.d.ts +0 -5
  90. package/DateTimePicker/constants.js +0 -9
  91. package/DateTimePicker/helpers.d.ts +0 -13
  92. package/DateTimePicker/helpers.js +0 -81
  93. package/DateTimePicker/index.d.ts +0 -8
  94. package/DateTimePicker/index.js +0 -8
  95. package/DateTimePicker/polyglot/index.d.ts +0 -2
  96. package/DateTimePicker/polyglot/index.js +0 -33
  97. package/DateTimePicker/polyglot/messages_ar.d.ts +0 -3
  98. package/DateTimePicker/polyglot/messages_ar.js +0 -11
  99. package/DateTimePicker/polyglot/messages_bn.d.ts +0 -3
  100. package/DateTimePicker/polyglot/messages_bn.js +0 -11
  101. package/DateTimePicker/polyglot/messages_de.d.ts +0 -3
  102. package/DateTimePicker/polyglot/messages_de.js +0 -11
  103. package/DateTimePicker/polyglot/messages_en.d.ts +0 -3
  104. package/DateTimePicker/polyglot/messages_en.js +0 -11
  105. package/DateTimePicker/polyglot/messages_es.d.ts +0 -3
  106. package/DateTimePicker/polyglot/messages_es.js +0 -11
  107. package/DateTimePicker/polyglot/messages_fr.d.ts +0 -3
  108. package/DateTimePicker/polyglot/messages_fr.js +0 -11
  109. package/DateTimePicker/polyglot/messages_he.d.ts +0 -3
  110. package/DateTimePicker/polyglot/messages_he.js +0 -11
  111. package/DateTimePicker/polyglot/messages_hi.d.ts +0 -3
  112. package/DateTimePicker/polyglot/messages_hi.js +0 -11
  113. package/DateTimePicker/polyglot/messages_ja.d.ts +0 -3
  114. package/DateTimePicker/polyglot/messages_ja.js +0 -11
  115. package/DateTimePicker/polyglot/messages_ko.d.ts +0 -3
  116. package/DateTimePicker/polyglot/messages_ko.js +0 -11
  117. package/DateTimePicker/polyglot/messages_pt.d.ts +0 -3
  118. package/DateTimePicker/polyglot/messages_pt.js +0 -11
  119. package/DateTimePicker/polyglot/messages_ru.d.ts +0 -3
  120. package/DateTimePicker/polyglot/messages_ru.js +0 -11
  121. package/DateTimePicker/polyglot/messages_th.d.ts +0 -3
  122. package/DateTimePicker/polyglot/messages_th.js +0 -11
  123. package/DateTimePicker/polyglot/messages_zh.d.ts +0 -3
  124. package/DateTimePicker/polyglot/messages_zh.js +0 -11
  125. package/DateTimePicker/polyglot/types.d.ts +0 -12
  126. package/DateTimePicker/polyglot/types.js +0 -1
  127. package/DateTimePicker/styles.d.ts +0 -371
  128. package/DateTimePicker/styles.js +0 -66
  129. package/DateTimePicker/types.d.ts +0 -11
  130. package/DateTimePicker/types.js +0 -1
@@ -11,6 +11,16 @@ function makeBaseline(a, count) {
11
11
  length: count
12
12
  }, (_, i) => addPeriod(a, 'month', i));
13
13
  }
14
+ const YEARS_BACK = 100;
15
+ const YEARS_AHEAD = 10;
16
+ function makeYearOptions(panelYear, minDay, maxDay) {
17
+ const currentYear = new Date().getFullYear();
18
+ const from = Math.min(minDay?.year ?? currentYear - YEARS_BACK, panelYear);
19
+ const to = Math.max(maxDay?.year ?? currentYear + YEARS_AHEAD, panelYear);
20
+ return Array.from({
21
+ length: to - from + 1
22
+ }, (_, i) => from + i);
23
+ }
14
24
  function delayCallback(fn) {
15
25
  return setTimeout(() => {
16
26
  requestAnimationFrame(fn);
@@ -78,10 +88,6 @@ export const CalendarMonthSlider = ({
78
88
  setAnchor(newAnchor);
79
89
  setPanels(makeBaseline(newAnchor, visibleCount));
80
90
  };
81
- const currentYear = new Date().getFullYear();
82
- const yearOptions = Array.from({
83
- length: 11
84
- }, (_, i) => currentYear - 5 + i);
85
91
  const viewportWidth = `${visibleCount * monthWidth + gap * (visibleCount - 1)}px`;
86
92
  return _jsxs(Root, {
87
93
  style: {
@@ -114,7 +120,7 @@ export const CalendarMonthSlider = ({
114
120
  }), _jsx(StyledSelect, {
115
121
  value: p.year,
116
122
  onChange: e => handleYearChange(e, i, p),
117
- children: yearOptions.map(year => _jsx("option", {
123
+ children: makeYearOptions(p.year, monthProps.disableOnAndBefore, monthProps.disableOnAndAfter).map(year => _jsx("option", {
118
124
  value: year,
119
125
  children: year
120
126
  }, year))
package/index.d.ts CHANGED
@@ -8,7 +8,6 @@ export { CrashScreen } from './CrashScreen';
8
8
  export { Divider } from './Divider';
9
9
  export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
10
10
  export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct, type CalendarDropdownProps, type CalendarDropdownRangeDateProps, type CalendarSuperFormProps, type DateStruct, type RangeValue, } from './Calendar';
11
- export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField, } from './DateTimePicker';
12
11
  export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu, } from './DropdownMenu';
13
12
  export { GetStartedPage } from './GetStartedPage';
14
13
  export { EditableField } from './EditableField';
package/index.js CHANGED
@@ -8,7 +8,6 @@ export { CrashScreen } from './CrashScreen';
8
8
  export { Divider } from './Divider';
9
9
  export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from './Drawer';
10
10
  export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct } from './Calendar';
11
- export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField } from './DateTimePicker';
12
11
  export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu } from './DropdownMenu';
13
12
  export { GetStartedPage } from './GetStartedPage';
14
13
  export { EditableField } from './EditableField';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/dumb-components",
3
- "version": "2.12.1",
3
+ "version": "3.0.0",
4
4
  "description": "React components to build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -1,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { AutosizeInputProps } from './types';
3
- export declare function AutosizeInput(props: AutosizeInputProps): ReactElement;
@@ -1,39 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useRef, useState, useEffect } from 'react';
3
- import { Input } from '../Input';
4
- import { Hidden } from './styles';
5
- export function AutosizeInput(props) {
6
- const {
7
- value,
8
- placeholder,
9
- isDisabled,
10
- onChange,
11
- onKeyUp,
12
- onKeyDown,
13
- onBlur
14
- } = props;
15
- const ref = useRef(null);
16
- const [width, setWidth] = useState(12);
17
- useEffect(() => {
18
- const {
19
- offsetWidth
20
- } = ref.current;
21
- const addWidth = offsetWidth ? 12 : 16;
22
- setWidth(offsetWidth + addWidth);
23
- }, [value]);
24
- return _jsxs(_Fragment, {
25
- children: [_jsx(Input, {
26
- value: value,
27
- placeholder: placeholder,
28
- width: width,
29
- isDisabled: isDisabled,
30
- onChange: onChange,
31
- onKeyUp: onKeyUp,
32
- onKeyDown: onKeyDown,
33
- onBlur: onBlur
34
- }), _jsx(Hidden, {
35
- ref: ref,
36
- children: value || placeholder
37
- })]
38
- });
39
- }
@@ -1 +0,0 @@
1
- export * from './AutosizeInput';
@@ -1 +0,0 @@
1
- export * from './AutosizeInput';
@@ -1,3 +0,0 @@
1
- export declare const Hidden: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
2
- style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
3
- }> & string;
@@ -1,5 +0,0 @@
1
- import styled from 'styled-components';
2
- export const Hidden = styled.span.withConfig({
3
- displayName: "Hidden",
4
- componentId: "sc-1p643dm-0"
5
- })(["position:absolute;visibility:hidden;"]);
@@ -1,10 +0,0 @@
1
- import type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
2
- export interface AutosizeInputProps {
3
- value: string;
4
- placeholder?: string;
5
- isDisabled?: boolean;
6
- onChange: (event: ChangeEvent<HTMLInputElement>) => void;
7
- onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
8
- onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
9
- onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
10
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,8 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DatePickerProps } from './types';
3
- /**
4
- * Inline calendar with month/year/decade views for picking a date.
5
- *
6
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
7
- */
8
- export declare function DatePicker(props: DatePickerProps): ReactElement;
@@ -1,65 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState, useEffect } from 'react';
3
- import { Vertical } from '@pushwoosh/kit-helpers';
4
- import { format } from '../../helpers';
5
- import { CalendarBox } from '../../styles';
6
- import { DecadeView } from '../DecadeView';
7
- import { MonthView } from '../MonthView';
8
- import { YearView } from '../YearView';
9
- /**
10
- * Inline calendar with month/year/decade views for picking a date.
11
- *
12
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
13
- */
14
- export function DatePicker(props) {
15
- const {
16
- value,
17
- userInputDay,
18
- minDate,
19
- maxDate,
20
- isDisabled,
21
- slotAfterMonth,
22
- onChange
23
- } = props;
24
- const [view, setView] = useState('month');
25
- const [month, setMonth] = useState(() => format(userInputDay || value || new Date(), 'year-month'));
26
- useEffect(() => {
27
- if (userInputDay) {
28
- setMonth(format(userInputDay, 'year-month'));
29
- setView('month');
30
- }
31
- }, [userInputDay]);
32
- return _jsxs(CalendarBox, {
33
- "$disabled": isDisabled,
34
- children: [view === 'month' && _jsxs(Vertical, {
35
- "$gap": 16,
36
- children: [_jsx(MonthView, {
37
- month: month,
38
- activeDay: value ? format(value, 'year-month-day') : undefined,
39
- userInputDay: userInputDay,
40
- minDate: minDate,
41
- maxDate: maxDate,
42
- onChange: setMonth,
43
- onDaySelect: onChange,
44
- onShowYear: () => setView('year'),
45
- onShowDecade: () => setView('decade')
46
- }), slotAfterMonth && slotAfterMonth()]
47
- }), view === 'year' && _jsx(YearView, {
48
- year: format(month, 'year'),
49
- activeDay: value ? format(value, 'year-month-day') : undefined,
50
- onChange: setMonth,
51
- onSelect: newMon => {
52
- setMonth(newMon);
53
- setView('month');
54
- }
55
- }), view === 'decade' && _jsx(DecadeView, {
56
- value: format(month, 'year'),
57
- activeDay: value ? format(value, 'year-month-day') : undefined,
58
- onChange: setMonth,
59
- onSelect: newYear => {
60
- setMonth(newYear);
61
- setView('year');
62
- }
63
- })]
64
- });
65
- }
@@ -1 +0,0 @@
1
- export * from './DatePicker';
@@ -1 +0,0 @@
1
- export * from './DatePicker';
@@ -1,20 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- /** Props of {@link DatePicker}. */
3
- export interface DatePickerProps {
4
- /** Currently selected date string. */
5
- value?: string;
6
- /** Externally driven day that resets the visible month and view. */
7
- userInputDay?: string;
8
- /** Earliest selectable date. */
9
- minDate?: Date | string;
10
- /** Latest selectable date. */
11
- maxDate?: Date | string;
12
- /** Disable selection. */
13
- isDisabled?: boolean;
14
- /** Render extra content under the month grid (e.g. time inputs). */
15
- slotAfterMonth?: () => ReactNode | null;
16
- /** Fires with the picked day string. */
17
- onChange: (day: string) => void;
18
- }
19
- /** Calendar view level: day grid, month grid or decade grid. */
20
- export type ViewType = 'month' | 'year' | 'decade';
@@ -1 +0,0 @@
1
- export {};
@@ -1,8 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DatePickerFieldProps } from './types';
3
- /**
4
- * Read-only field showing the selected date that opens a {@link DatePicker} popover on click.
5
- *
6
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
7
- */
8
- export declare function DatePickerField(props: DatePickerFieldProps): ReactElement;
@@ -1,86 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useFloating, offset, autoPlacement } from '@floating-ui/react-dom';
3
- import { useState, useEffect } from 'react';
4
- import { CalendarIcon } from '@pushwoosh/kit-icons';
5
- import { format, monthName, get } from '../../helpers';
6
- import { Lang } from '../../polyglot';
7
- import { InputFrame } from '../../styles';
8
- import { DatePicker } from '../DatePicker';
9
- /**
10
- * Read-only field showing the selected date that opens a {@link DatePicker} popover on click.
11
- *
12
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
13
- */
14
- export function DatePickerField(props) {
15
- const {
16
- value,
17
- minDate,
18
- maxDate,
19
- error,
20
- allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
21
- zIndex = 1000,
22
- closeOnSelect = false,
23
- onChange
24
- } = props;
25
- const [showPicker, setShowPicker] = useState(false);
26
- const {
27
- refs,
28
- floatingStyles
29
- } = useFloating({
30
- middleware: [offset(4), autoPlacement({
31
- allowedPlacements
32
- })]
33
- });
34
- useEffect(() => {
35
- if (!showPicker) {
36
- return;
37
- }
38
- const handleClickListener = event => {
39
- const path = event.composedPath();
40
- const isInsideFloating = refs.floating.current && path.includes(refs.floating.current);
41
- const isInsideReference = refs.reference.current && path.includes(refs.reference.current);
42
- if (!isInsideFloating && !isInsideReference) {
43
- setShowPicker(false);
44
- }
45
- };
46
- document.addEventListener('click', handleClickListener);
47
- return () => {
48
- document.removeEventListener('click', handleClickListener);
49
- };
50
- }, [showPicker, refs]);
51
- const onSelect = date => {
52
- onChange(date);
53
- if (closeOnSelect) {
54
- setShowPicker(false);
55
- }
56
- };
57
- return _jsxs(_Fragment, {
58
- children: [_jsxs(InputFrame, {
59
- ref: refs.setReference,
60
- "$gap": 8,
61
- "$error": error,
62
- "$empty": !value,
63
- onClick: () => setShowPicker(!showPicker),
64
- children: [_jsx(CalendarIcon, {
65
- size: "medium",
66
- view: "lined"
67
- }), value ? _jsxs(_Fragment, {
68
- children: [format(value, 'day '), monthName(get(value, 'month'), 'long'), format(value, ' year')]
69
- }) : _jsx(Lang, {
70
- message: "DUMB.DATE_TIME_PICKER.SELECT_DATE"
71
- })]
72
- }), showPicker && _jsx("div", {
73
- ref: refs.setFloating,
74
- style: {
75
- ...floatingStyles,
76
- zIndex
77
- },
78
- children: _jsx(DatePicker, {
79
- value: value,
80
- minDate: minDate,
81
- maxDate: maxDate,
82
- onChange: onSelect
83
- })
84
- })]
85
- });
86
- }
@@ -1 +0,0 @@
1
- export * from './DatePickerField';
@@ -1 +0,0 @@
1
- export * from './DatePickerField';
@@ -1,20 +0,0 @@
1
- import type { Placement } from '@floating-ui/react-dom';
2
- /** Props of {@link DatePickerField}. */
3
- export interface DatePickerFieldProps {
4
- /** Currently selected date string. */
5
- value: string;
6
- /** Earliest selectable date. */
7
- minDate?: Date | string;
8
- /** Latest selectable date. */
9
- maxDate?: Date | string;
10
- /** Render the field in the error state. */
11
- error?: boolean;
12
- /** Allowed floating placements for the popover (default bottom/top start/end). */
13
- allowedPlacements?: Placement[];
14
- /** Popover z-index (default `1000`). */
15
- zIndex?: number;
16
- /** Close the popover when a date is picked (default `false`). */
17
- closeOnSelect?: boolean;
18
- /** Fires with the picked day string. */
19
- onChange: (day: string) => void;
20
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,8 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DateTimePickerProps } from './types';
3
- /**
4
- * Inline {@link DatePicker} with hour/minute/second number inputs for picking a date and time (UTC).
5
- *
6
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
7
- */
8
- export declare function DateTimePicker(props: DateTimePickerProps): ReactElement;
@@ -1,64 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Collapse, Horizontal } from '@pushwoosh/kit-helpers';
3
- import { format, createUTCDate } from '../../helpers';
4
- import { DatePicker } from '../DatePicker';
5
- import { NumberPicker } from '../NumberPicker';
6
- /**
7
- * Inline {@link DatePicker} with hour/minute/second number inputs for picking a date and time (UTC).
8
- *
9
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
10
- */
11
- export function DateTimePicker(props) {
12
- const {
13
- value,
14
- minDate,
15
- maxDate,
16
- userInputDay,
17
- onChange
18
- } = props;
19
- const date = value ? new Date(value) : new Date();
20
- const handleChange = formattedDate => {
21
- const [year, month, day] = formattedDate.split('-').map(Number);
22
- const utcDate = createUTCDate(year, month, day, date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
23
- onChange(utcDate.toUTCString());
24
- };
25
- const handleChangeHour = hours => {
26
- date.setUTCHours(hours);
27
- onChange(date.toUTCString());
28
- };
29
- const handleChangeMinutes = minutes => {
30
- date.setUTCMinutes(minutes);
31
- onChange(date.toUTCString());
32
- };
33
- const handleChangeSeconds = seconds => {
34
- date.setUTCSeconds(seconds);
35
- onChange(date.toUTCString());
36
- };
37
- return _jsx(DatePicker, {
38
- value: format(date, 'year-month-dayThour:minute:second'),
39
- userInputDay: userInputDay,
40
- minDate: minDate,
41
- maxDate: maxDate,
42
- onChange: handleChange,
43
- slotAfterMonth: () => _jsx(Collapse, {
44
- expanded: !!value,
45
- children: _jsxs(Horizontal, {
46
- "$padding": "0 16px",
47
- "$gap": 8,
48
- children: [_jsx(NumberPicker, {
49
- placeholder: "00",
50
- value: date.getUTCHours(),
51
- onChange: handleChangeHour
52
- }), _jsx(NumberPicker, {
53
- placeholder: "00",
54
- value: date.getUTCMinutes(),
55
- onChange: handleChangeMinutes
56
- }), _jsx(NumberPicker, {
57
- placeholder: "00",
58
- value: date.getUTCSeconds(),
59
- onChange: handleChangeSeconds
60
- })]
61
- })
62
- })
63
- });
64
- }
@@ -1 +0,0 @@
1
- export * from './DateTimePicker';
@@ -1 +0,0 @@
1
- export * from './DateTimePicker';
@@ -1,13 +0,0 @@
1
- /** Props of {@link DateTimePicker}. */
2
- export interface DateTimePickerProps {
3
- /** Currently selected date-time string. */
4
- value: string;
5
- /** Earliest selectable date. */
6
- minDate?: Date | string;
7
- /** Latest selectable date. */
8
- maxDate?: Date | string;
9
- /** Externally driven day that resets the visible month and view. */
10
- userInputDay?: string;
11
- /** Fires with the picked date-time as a UTC string. */
12
- onChange: (day: string) => void;
13
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,8 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DateTimePickerFieldProps } from './types';
3
- /**
4
- * Read-only field showing the selected date-time that opens a {@link DateTimePicker} popover on click.
5
- *
6
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
7
- */
8
- export declare function DateTimePickerField(props: DateTimePickerFieldProps): ReactElement;
@@ -1,91 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useFloating, offset, autoPlacement } from '@floating-ui/react-dom';
3
- import { useState, useEffect } from 'react';
4
- import { CalendarIcon } from '@pushwoosh/kit-icons';
5
- import { useUTCDate } from './helpers';
6
- import { Lang } from '../../polyglot';
7
- import { InputFrame } from '../../styles';
8
- import { DateTimePicker } from '../DateTimePicker';
9
- /**
10
- * Read-only field showing the selected date-time that opens a {@link DateTimePicker} popover on click.
11
- *
12
- * @deprecated Use `CalendarDropdown` or `CalendarSuperForm` from Calendar instead.
13
- */
14
- export function DateTimePickerField(props) {
15
- const {
16
- value,
17
- minDate,
18
- maxDate,
19
- error,
20
- allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
21
- zIndex = 1000,
22
- closeOnSelect = false,
23
- onChange
24
- } = props;
25
- const [showPicker, setShowPicker] = useState(false);
26
- const {
27
- refs,
28
- floatingStyles
29
- } = useFloating({
30
- middleware: [offset(4), autoPlacement({
31
- allowedPlacements
32
- })]
33
- });
34
- useEffect(() => {
35
- if (!showPicker) {
36
- return;
37
- }
38
- const handleClickListener = event => {
39
- const path = event.composedPath();
40
- const isInsideFloating = refs.floating.current && path.includes(refs.floating.current);
41
- const isInsideReference = refs.reference.current && path.includes(refs.reference.current);
42
- if (!isInsideFloating && !isInsideReference) {
43
- setShowPicker(false);
44
- }
45
- };
46
- document.addEventListener('click', handleClickListener);
47
- return () => {
48
- document.removeEventListener('click', handleClickListener);
49
- };
50
- }, [showPicker, refs]);
51
- const onSelect = date => {
52
- onChange(date);
53
- if (closeOnSelect) {
54
- setShowPicker(false);
55
- }
56
- };
57
- const {
58
- year,
59
- month,
60
- day,
61
- hours,
62
- minutes
63
- } = useUTCDate(value);
64
- return _jsxs(_Fragment, {
65
- children: [_jsxs(InputFrame, {
66
- ref: refs.setReference,
67
- "$empty": !value,
68
- "$error": error,
69
- "$gap": 8,
70
- onClick: () => setShowPicker(!showPicker),
71
- children: [_jsx(CalendarIcon, {
72
- size: "medium",
73
- view: "lined"
74
- }), value ? `${day} ${month} ${year} ${hours}:${minutes}` : _jsx(Lang, {
75
- message: "DUMB.DATE_TIME_PICKER.SELECT_DATE_TIME"
76
- })]
77
- }), showPicker && _jsx("div", {
78
- ref: refs.setFloating,
79
- style: {
80
- ...floatingStyles,
81
- zIndex
82
- },
83
- children: _jsx(DateTimePicker, {
84
- value: value,
85
- minDate: minDate,
86
- maxDate: maxDate,
87
- onChange: onSelect
88
- })
89
- })]
90
- });
91
- }
@@ -1,8 +0,0 @@
1
- export declare const useUTCDate: (dateString: string) => {
2
- year: number;
3
- month: string;
4
- day: string;
5
- hours: string;
6
- minutes: string;
7
- seconds: string;
8
- };
@@ -1,13 +0,0 @@
1
- export const useUTCDate = dateString => {
2
- const date = new Date(dateString);
3
- return {
4
- year: date.getUTCFullYear(),
5
- month: date.toLocaleString('en-US', {
6
- month: 'long'
7
- }),
8
- day: String(date.getUTCDate()).padStart(2, '0'),
9
- hours: String(date.getUTCHours()).padStart(2, '0'),
10
- minutes: String(date.getUTCMinutes()).padStart(2, '0'),
11
- seconds: String(date.getUTCSeconds()).padStart(2, '0')
12
- };
13
- };
@@ -1 +0,0 @@
1
- export * from './DateTimePickerField';
@@ -1 +0,0 @@
1
- export * from './DateTimePickerField';
@@ -1,20 +0,0 @@
1
- import type { Placement } from '@floating-ui/react-dom';
2
- /** Props of {@link DateTimePickerField}. */
3
- export interface DateTimePickerFieldProps {
4
- /** Currently selected date-time string. */
5
- value: string;
6
- /** Earliest selectable date. */
7
- minDate?: Date | string;
8
- /** Latest selectable date. */
9
- maxDate?: Date | string;
10
- /** Render the field in the error state. */
11
- error?: boolean;
12
- /** Allowed floating placements for the popover (default bottom/top start/end). */
13
- allowedPlacements?: Placement[];
14
- /** Popover z-index (default `1000`). */
15
- zIndex?: number;
16
- /** Close the popover when a value is picked (default `false`). */
17
- closeOnSelect?: boolean;
18
- /** Fires with the picked date-time string. */
19
- onChange: (day: string) => void;
20
- }
@@ -1,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { DecadeViewProps } from './types';
3
- export declare function DecadeView(props: DecadeViewProps): ReactElement;