@uxf/ui 10.5.2 → 10.6.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 (4) hide show
  1. package/date-picker-input/date-picker-input.d.ts +5 -3
  2. package/date-picker-input/date-picker-input.js +9 -7
  3. package/date-picker-input/date-picker-input.stories.js +2 -1
  4. package/package.json +1 -1
package/date-picker-input/date-picker-input.d.ts CHANGED
@@ -4,11 +4,13 @@ export declare const ALLOWED_DATE_FORMAT: string[];
4
4
  export declare const DISPLAY_DATE_FORMAT = "D. M. YYYY";
5
5
  export declare const OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
6
6
  export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
7
+ allowedDateFormats?: string[];
8
+ bottomContent?: ReactNode;
9
+ displayDateFormat?: string;
10
+ maxDate?: string;
11
+ minDate?: string;
7
12
  placeholder?: string;
8
13
  triggerElement?: ReactNode;
9
- minDate?: string;
10
- maxDate?: string;
11
14
  unavailableDates?: Date[];
12
- bottomContent?: ReactNode;
13
15
  }
14
16
  export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;
package/date-picker-input/date-picker-input.js CHANGED
@@ -38,10 +38,10 @@ const icon_1 = require("../icon");
38
38
  exports.ALLOWED_DATE_FORMAT = ["D. M. YYYY", "DD. MM. YYYY", "D.M.YYYY", "DD.MM.YYYY"];
39
39
  exports.DISPLAY_DATE_FORMAT = "D. M. YYYY";
40
40
  exports.OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
41
- function getValue(value) {
41
+ function getValue(value, format) {
42
42
  const parsedValue = (0, dayjs_1.default)(value, exports.OUTPUT_DATE_FORMAT, true);
43
43
  if (value && parsedValue.isValid()) {
44
- return parsedValue.format(exports.DISPLAY_DATE_FORMAT);
44
+ return parsedValue.format(format);
45
45
  }
46
46
  return value !== null && value !== void 0 ? value : "";
47
47
  }
@@ -60,26 +60,28 @@ function getBoundaryDate(value) {
60
60
  return undefined;
61
61
  }
62
62
  exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
63
- var _a, _b;
63
+ var _a, _b, _c, _d;
64
64
  const onChange = props.onChange;
65
65
  const className = (0, cx_1.cx)("uxf-date-picker-input", props.className);
66
+ const displayDateFormat = (_a = props.displayDateFormat) !== null && _a !== void 0 ? _a : exports.DISPLAY_DATE_FORMAT;
67
+ const allowedDateFormats = (_b = props.allowedDateFormats) !== null && _b !== void 0 ? _b : exports.ALLOWED_DATE_FORMAT;
66
68
  const onInputChange = (0, react_1.useCallback)((value) => {
67
- const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_DATE_FORMAT, true);
69
+ const parsedValue = (0, dayjs_1.default)(value, allowedDateFormats, true);
68
70
  if (value !== "" && parsedValue.isValid()) {
69
71
  onChange(parsedValue.format(exports.OUTPUT_DATE_FORMAT));
70
72
  }
71
73
  else {
72
74
  onChange(value === "" ? null : value);
73
75
  }
74
- }, [onChange]);
76
+ }, [allowedDateFormats, onChange]);
75
77
  const onDatePickerChange = (0, react_1.useCallback)((value) => {
76
78
  const parsedValue = (0, dayjs_1.default)(value);
77
79
  onChange(value ? parsedValue.format(exports.OUTPUT_DATE_FORMAT) : null);
78
80
  }, [onChange]);
79
- const value = getValue(props.value);
81
+ const value = getValue(props.value, displayDateFormat);
80
82
  const selectedDate = getSelectedDate(props.value);
81
83
  const parsedMinDate = getBoundaryDate(props.minDate);
82
84
  const parsedMaxDate = getBoundaryDate(props.maxDate);
83
- return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATE_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent }))));
85
+ return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent }))));
84
86
  });
85
87
  exports.DatePickerInput.displayName = "UxfUiDatePickerInput";
package/date-picker-input/date-picker-input.stories.js CHANGED
@@ -41,7 +41,8 @@ function Default() {
41
41
  react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: date }),
42
42
  react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: date }),
43
43
  react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: date }),
44
- react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date })));
44
+ react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date }),
45
+ react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], displayDateFormat: "MM/DD/YYYY", id: "date-custom-format", isClearable: true, label: "Datum s vlastn\u00EDm form\u00E1tem (US)", name: "date", onChange: onChange, value: date })));
45
46
  return (react_1.default.createElement(react_1.default.Fragment, null,
46
47
  react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
47
48
  react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "10.5.2",
3
+ "version": "10.6.0",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"