@addsign/moje-agenda-shared-lib 2.0.18 → 2.0.19
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/components/ui/DateTimePicker.d.ts +1 -0
- package/dist/components/ui/DateTimePicker.js +10 -2
- package/dist/components/ui/DateTimePicker.js.map +1 -1
- package/dist/components/ui/datepicker.d.ts +1 -0
- package/dist/components/ui/datepicker.js +10 -2
- package/dist/components/ui/datepicker.js.map +1 -1
- package/lib/components/ui/DatePicker.tsx +11 -2
- package/lib/components/ui/DateTimePicker.tsx +11 -2
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ interface DateTimePickerProps {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
placeholder?: string;
|
|
8
8
|
clearable?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
9
10
|
}
|
|
10
11
|
declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLInputElement>>;
|
|
11
12
|
export default DateTimePicker;
|
|
@@ -73,7 +73,15 @@ const roundToNearestHalfHour = (date) => {
|
|
|
73
73
|
});
|
|
74
74
|
};
|
|
75
75
|
const DateTimePicker = forwardRef(
|
|
76
|
-
({
|
|
76
|
+
({
|
|
77
|
+
value,
|
|
78
|
+
onChange,
|
|
79
|
+
className,
|
|
80
|
+
clearable = true,
|
|
81
|
+
placeholder,
|
|
82
|
+
disabled,
|
|
83
|
+
...props
|
|
84
|
+
}, ref) => {
|
|
77
85
|
const [dateTime, setDateTime] = React__default.useState(value || null);
|
|
78
86
|
const [inputValue, setInputValue] = React__default.useState("");
|
|
79
87
|
useEffect(() => {
|
|
@@ -169,7 +177,7 @@ const DateTimePicker = forwardRef(
|
|
|
169
177
|
}
|
|
170
178
|
),
|
|
171
179
|
/* @__PURE__ */ jsx(CalendarClock, { className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
|
|
172
|
-
clearable && inputValue && /* @__PURE__ */ jsxs(
|
|
180
|
+
clearable && disabled && inputValue && /* @__PURE__ */ jsxs(
|
|
173
181
|
Button,
|
|
174
182
|
{
|
|
175
183
|
type: "button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePicker.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/calendar-clock.js","../../../node_modules/lucide-react/dist/esm/icons/clock.js","../../../node_modules/date-fns/set.mjs","../../../lib/components/ui/DateTimePicker.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst CalendarClock = createLucideIcon(\"CalendarClock\", [\n [\"path\", { d: \"M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5\", key: \"1osxxc\" }],\n [\"path\", { d: \"M16 2v4\", key: \"4m81vk\" }],\n [\"path\", { d: \"M8 2v4\", key: \"1cmpym\" }],\n [\"path\", { d: \"M3 10h5\", key: \"r794hk\" }],\n [\"path\", { d: \"M17.5 17.5 16 16.3V14\", key: \"akvzfd\" }],\n [\"circle\", { cx: \"16\", cy: \"16\", r: \"6\", key: \"qoo3c4\" }]\n]);\n\nexport { CalendarClock as default };\n//# sourceMappingURL=calendar-clock.js.map\n","/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst Clock = createLucideIcon(\"Clock\", [\n [\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", key: \"1mglay\" }],\n [\"polyline\", { points: \"12 6 12 12 16 14\", key: \"68esgv\" }]\n]);\n\nexport { Clock as default };\n//# sourceMappingURL=clock.js.map\n","import { constructFrom } from \"./constructFrom.mjs\";\nimport { setMonth } from \"./setMonth.mjs\";\nimport { toDate } from \"./toDate.mjs\";\n\n/**\n * @name set\n * @category Common Helpers\n * @summary Set date values to a given date.\n *\n * @description\n * Set date values to a given date.\n *\n * Sets time values to date from object `values`.\n * A value is not set if it is undefined or null or doesn't exist in `values`.\n *\n * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts\n * to use native `Date#setX` methods. If you use this function, you may not want to include the\n * other `setX` functions that date-fns provides if you are concerned about the bundle size.\n *\n * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n *\n * @param date - The date to be changed\n * @param values - The date values to be set\n *\n * @returns The new date with options set\n *\n * @example\n * // Transform 1 September 2014 into 20 October 2015 in a single line:\n * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })\n * //=> Tue Oct 20 2015 00:00:00\n *\n * @example\n * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:\n * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })\n * //=> Mon Sep 01 2014 12:23:45\n */\n\nexport function set(date, values) {\n let _date = toDate(date);\n\n // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date\n if (isNaN(+_date)) {\n return constructFrom(date, NaN);\n }\n\n if (values.year != null) {\n _date.setFullYear(values.year);\n }\n\n if (values.month != null) {\n _date = setMonth(_date, values.month);\n }\n\n if (values.date != null) {\n _date.setDate(values.date);\n }\n\n if (values.hours != null) {\n _date.setHours(values.hours);\n }\n\n if (values.minutes != null) {\n _date.setMinutes(values.minutes);\n }\n\n if (values.seconds != null) {\n _date.setSeconds(values.seconds);\n }\n\n if (values.milliseconds != null) {\n _date.setMilliseconds(values.milliseconds);\n }\n\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default set;\n","import { format, parse, isValid, set } from \"date-fns\";\r\nimport { CalendarClockIcon, Clock, XIcon } from \"lucide-react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { Calendar } from \"./Calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport { cn } from \"../../utils/utils\";\r\nimport React, { forwardRef, useEffect } from \"react\";\r\nimport { Input } from \"./input\";\r\nimport {\r\n Select,\r\n SelectContent,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n} from \"./select\";\r\nimport { PopoverClose } from \"@radix-ui/react-popover\";\r\n\r\nconst DATE_FORMAT = \"dd.MM.yyyy HH:mm\";\r\n\r\ninterface DateTimePickerProps {\r\n value?: Date;\r\n onChange?: (date: Date | undefined | null) => void;\r\n className?: string;\r\n placeholder?: string;\r\n clearable?: boolean;\r\n}\r\n\r\n// Helper function to round to the nearest half-hour\r\nconst roundToNearestHalfHour = (date: Date) => {\r\n const minutes = date.getMinutes();\r\n const roundedMinutes = minutes < 15 ? 0 : minutes < 45 ? 30 : 60;\r\n return set(date, {\r\n seconds: 0,\r\n milliseconds: 0,\r\n minutes: roundedMinutes,\r\n hours: roundedMinutes === 60 ? date.getHours() + 1 : date.getHours(),\r\n });\r\n};\r\n\r\nconst DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(\r\n (\r\n { value, onChange, className, clearable = true, placeholder, ...props },\r\n ref\r\n ) => {\r\n const [dateTime, setDateTime] = React.useState<Date | null>(value || null);\r\n const [inputValue, setInputValue] = React.useState<string | null>(\"\");\r\n\r\n useEffect(() => {\r\n if (value) {\r\n const roundedDate = roundToNearestHalfHour(value);\r\n setDateTime(roundedDate);\r\n setInputValue(format(roundedDate, DATE_FORMAT));\r\n } else {\r\n setDateTime(null);\r\n setInputValue(\"\");\r\n }\r\n }, [value]);\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n event.stopPropagation(); // Stop bubbling to prevent interference with other components\r\n\r\n setInputValue(event.target.value);\r\n const parsedDateTime = parse(event.target.value, DATE_FORMAT, new Date());\r\n\r\n if (isValid(parsedDateTime)) {\r\n setDateTime(parsedDateTime);\r\n onChange?.(parsedDateTime);\r\n setInputValue(format(parsedDateTime, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n setDateTime(null);\r\n onChange?.(null);\r\n }\r\n };\r\n\r\n const handleInputBlur = () => {\r\n if (inputValue === \"\") {\r\n setDateTime(null);\r\n onChange?.(null);\r\n return;\r\n }\r\n\r\n const parsedDateTime = parse(inputValue || \"\", DATE_FORMAT, new Date());\r\n if (isValid(parsedDateTime)) {\r\n setDateTime(parsedDateTime);\r\n onChange?.(parsedDateTime);\r\n setInputValue(format(parsedDateTime, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n setDateTime(null);\r\n onChange?.(null);\r\n }\r\n };\r\n\r\n const handleDateSelect = (selectedDate: Date | undefined | null) => {\r\n if (selectedDate) {\r\n const newDateTime = dateTime\r\n ? set(dateTime, {\r\n year: selectedDate.getFullYear(),\r\n month: selectedDate.getMonth(),\r\n date: selectedDate.getDate(),\r\n })\r\n : set(selectedDate, { hours: 12, minutes: 0 });\r\n setDateTime(newDateTime);\r\n onChange?.(newDateTime);\r\n setInputValue(format(newDateTime, DATE_FORMAT));\r\n } else {\r\n setDateTime(null);\r\n setInputValue(\"\");\r\n onChange?.(null);\r\n }\r\n };\r\n\r\n const handleTimeSelect = (time: string) => {\r\n const [hours, minutes] = time.split(\":\").map(Number);\r\n\r\n const newDateTime = set(dateTime ?? new Date(), { hours, minutes });\r\n setDateTime(newDateTime);\r\n onChange?.(newDateTime);\r\n setInputValue(format(newDateTime, DATE_FORMAT));\r\n };\r\n\r\n const handleClear = () => {\r\n setInputValue(\"\");\r\n setDateTime(null);\r\n onChange?.(null);\r\n };\r\n\r\n const timeOptions = Array.from({ length: 48 }, (_, i) => {\r\n const hours = Math.floor(i / 2);\r\n const minutes = i % 2 === 0 ? \"00\" : \"30\";\r\n return `${hours.toString().padStart(2, \"0\")}:${minutes}`;\r\n });\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <div className={cn(\"relative w-full\", className)}>\r\n <Input\r\n ref={ref}\r\n type=\"text\"\r\n value={inputValue || \"\"}\r\n onChange={handleInputChange}\r\n onBlur={handleInputBlur}\r\n placeholder={placeholder}\r\n className={cn(\r\n \"w-full pl-8 pr-8\",\r\n !dateTime && \"text-muted-foreground\"\r\n )}\r\n {...props}\r\n />\r\n <CalendarClockIcon className=\"absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\r\n {clearable && inputValue && (\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n className=\"absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0\"\r\n onClick={handleClear}\r\n >\r\n <XIcon className=\"h-4 w-4 text-muted-foreground\" />\r\n <span className=\"sr-only\">Smazat datum a čas</span>\r\n </Button>\r\n )}\r\n </div>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n mode=\"single\"\r\n selected={dateTime || undefined}\r\n onSelect={handleDateSelect}\r\n initialFocus\r\n />\r\n <div className=\"p-3 border-t border-border\">\r\n <div className=\"flex items-center justify-between\">\r\n <Select\r\n onValueChange={handleTimeSelect}\r\n value={dateTime ? format(dateTime, \"HH:mm\") : undefined}\r\n >\r\n <SelectTrigger>\r\n <SelectValue placeholder=\"Zvolte čas\">\r\n {dateTime ? (\r\n <div className=\"flex items-center\">\r\n <Clock className=\"mr-2 h-4 w-4\" />\r\n {format(dateTime, \"HH:mm\")}\r\n </div>\r\n ) : (\r\n \"Zvolte čas\"\r\n )}\r\n </SelectValue>\r\n </SelectTrigger>\r\n <SelectContent>\r\n {timeOptions.map((time) => (\r\n <SelectItem key={time} value={time}>\r\n {time}\r\n </SelectItem>\r\n ))}\r\n </SelectContent>\r\n </Select>\r\n <PopoverClose asChild>\r\n <Button className=\"ml-2 px-3\">OK</Button>\r\n </PopoverClose>\r\n </div>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nDateTimePicker.displayName = \"DateTimePicker\";\r\n\r\nexport default DateTimePicker;\r\n"],"names":["React","CalendarClockIcon","XIcon"],"mappings":";;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAM,gBAAgB,iBAAiB,iBAAiB;AAAA,EACtD,CAAC,QAAQ,EAAE,GAAG,gEAAgE,KAAK,SAAQ,CAAE;AAAA,EAC7F,CAAC,QAAQ,EAAE,GAAG,WAAW,KAAK,SAAQ,CAAE;AAAA,EACxC,CAAC,QAAQ,EAAE,GAAG,UAAU,KAAK,SAAQ,CAAE;AAAA,EACvC,CAAC,QAAQ,EAAE,GAAG,WAAW,KAAK,SAAQ,CAAE;AAAA,EACxC,CAAC,QAAQ,EAAE,GAAG,yBAAyB,KAAK,SAAQ,CAAE;AAAA,EACtD,CAAC,UAAU,EAAE,IAAI,MAAM,IAAI,MAAM,GAAG,KAAK,KAAK,UAAU;AAC1D,CAAC;AChBD;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAM,QAAQ,iBAAiB,SAAS;AAAA,EACtC,CAAC,UAAU,EAAE,IAAI,MAAM,IAAI,MAAM,GAAG,MAAM,KAAK,UAAU;AAAA,EACzD,CAAC,YAAY,EAAE,QAAQ,oBAAoB,KAAK,SAAQ,CAAE;AAC5D,CAAC;ACyBM,SAAS,IAAI,MAAM,QAAQ;AAChC,MAAI,QAAQ,OAAO,IAAI;AAGvB,MAAI,MAAM,CAAC,KAAK,GAAG;AACjB,WAAO,cAAc,MAAM,GAAG;AAAA,EAC/B;AAED,MAAI,OAAO,QAAQ,MAAM;AACvB,UAAM,YAAY,OAAO,IAAI;AAAA,EAC9B;AAED,MAAI,OAAO,SAAS,MAAM;AACxB,YAAQ,SAAS,OAAO,OAAO,KAAK;AAAA,EACrC;AAED,MAAI,OAAO,QAAQ,MAAM;AACvB,UAAM,QAAQ,OAAO,IAAI;AAAA,EAC1B;AAED,MAAI,OAAO,SAAS,MAAM;AACxB,UAAM,SAAS,OAAO,KAAK;AAAA,EAC5B;AAED,MAAI,OAAO,WAAW,MAAM;AAC1B,UAAM,WAAW,OAAO,OAAO;AAAA,EAChC;AAED,MAAI,OAAO,WAAW,MAAM;AAC1B,UAAM,WAAW,OAAO,OAAO;AAAA,EAChC;AAED,MAAI,OAAO,gBAAgB,MAAM;AAC/B,UAAM,gBAAgB,OAAO,YAAY;AAAA,EAC1C;AAED,SAAO;AACT;ACxDA,MAAM,cAAc;AAWpB,MAAM,yBAAyB,CAAC,SAAe;AACvC,QAAA,UAAU,KAAK;AACrB,QAAM,iBAAiB,UAAU,KAAK,IAAI,UAAU,KAAK,KAAK;AAC9D,SAAO,IAAI,MAAM;AAAA,IACf,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO,mBAAmB,KAAK,KAAK,aAAa,IAAI,KAAK,SAAS;AAAA,EAAA,CACpE;AACH;AAEA,MAAM,iBAAiB;AAAA,EACrB,CACE,EAAE,OAAO,UAAU,WAAW,YAAY,MAAM,aAAa,GAAG,MAAM,GACtE,QACG;AACH,UAAM,CAAC,UAAU,WAAW,IAAIA,eAAM,SAAsB,SAAS,IAAI;AACzE,UAAM,CAAC,YAAY,aAAa,IAAIA,eAAM,SAAwB,EAAE;AAEpE,cAAU,MAAM;AACd,UAAI,OAAO;AACH,cAAA,cAAc,uBAAuB,KAAK;AAChD,oBAAY,WAAW;AACT,sBAAA,OAAO,aAAa,WAAW,CAAC;AAAA,MAAA,OACzC;AACL,oBAAY,IAAI;AAChB,sBAAc,EAAE;AAAA,MAClB;AAAA,IAAA,GACC,CAAC,KAAK,CAAC;AAEJ,UAAA,oBAAoB,CAAC,UAA+C;AACxE,YAAM,gBAAgB;AAER,oBAAA,MAAM,OAAO,KAAK;AAC1B,YAAA,iBAAiB,MAAM,MAAM,OAAO,OAAO,aAAa,oBAAI,MAAM;AAEpE,UAAA,QAAQ,cAAc,GAAG;AAC3B,oBAAY,cAAc;AAC1B,6CAAW;AACG,sBAAA,OAAO,gBAAgB,WAAW,CAAC;AAAA,MAAA,OAC5C;AACL,sBAAc,EAAE;AAChB,oBAAY,IAAI;AAChB,6CAAW;AAAA,MACb;AAAA,IAAA;AAGF,UAAM,kBAAkB,MAAM;AAC5B,UAAI,eAAe,IAAI;AACrB,oBAAY,IAAI;AAChB,6CAAW;AACX;AAAA,MACF;AAEA,YAAM,iBAAiB,MAAM,cAAc,IAAI,aAAa,oBAAI,MAAM;AAClE,UAAA,QAAQ,cAAc,GAAG;AAC3B,oBAAY,cAAc;AAC1B,6CAAW;AACG,sBAAA,OAAO,gBAAgB,WAAW,CAAC;AAAA,MAAA,OAC5C;AACL,sBAAc,EAAE;AAChB,oBAAY,IAAI;AAChB,6CAAW;AAAA,MACb;AAAA,IAAA;AAGI,UAAA,mBAAmB,CAAC,iBAA0C;AAClE,UAAI,cAAc;AACV,cAAA,cAAc,WAChB,IAAI,UAAU;AAAA,UACZ,MAAM,aAAa,YAAY;AAAA,UAC/B,OAAO,aAAa,SAAS;AAAA,UAC7B,MAAM,aAAa,QAAQ;AAAA,QAAA,CAC5B,IACD,IAAI,cAAc,EAAE,OAAO,IAAI,SAAS,EAAA,CAAG;AAC/C,oBAAY,WAAW;AACvB,6CAAW;AACG,sBAAA,OAAO,aAAa,WAAW,CAAC;AAAA,MAAA,OACzC;AACL,oBAAY,IAAI;AAChB,sBAAc,EAAE;AAChB,6CAAW;AAAA,MACb;AAAA,IAAA;AAGI,UAAA,mBAAmB,CAAC,SAAiB;AACnC,YAAA,CAAC,OAAO,OAAO,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI,MAAM;AAE7C,YAAA,cAAc,IAAI,YAAY,oBAAI,QAAQ,EAAE,OAAO,QAAA,CAAS;AAClE,kBAAY,WAAW;AACvB,2CAAW;AACG,oBAAA,OAAO,aAAa,WAAW,CAAC;AAAA,IAAA;AAGhD,UAAM,cAAc,MAAM;AACxB,oBAAc,EAAE;AAChB,kBAAY,IAAI;AAChB,2CAAW;AAAA,IAAI;AAGX,UAAA,cAAc,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,MAAM;AACvD,YAAM,QAAQ,KAAK,MAAM,IAAI,CAAC;AAC9B,YAAM,UAAU,IAAI,MAAM,IAAI,OAAO;AAC9B,aAAA,GAAG,MAAM,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,OAAO;AAAA,IAAA,CACvD;AAED,gCACG,SACC,EAAA,UAAA;AAAA,MAAC,oBAAA,gBAAA,EAAe,SAAO,MACrB,UAAA,qBAAC,SAAI,WAAW,GAAG,mBAAmB,SAAS,GAC7C,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,MAAK;AAAA,YACL,OAAO,cAAc;AAAA,YACrB,UAAU;AAAA,YACV,QAAQ;AAAA,YACR;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA,CAAC,YAAY;AAAA,YACf;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QACA,oBAACC,eAAkB,EAAA,WAAU,yEAAyE,CAAA;AAAA,QACrG,aAAa,cACZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YAET,UAAA;AAAA,cAAC,oBAAAC,GAAA,EAAM,WAAU,gCAAgC,CAAA;AAAA,cAChD,oBAAA,QAAA,EAAK,WAAU,WAAU,UAAkB,sBAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAC9C;AAAA,MAAA,EAAA,CAEJ,EACF,CAAA;AAAA,MACC,qBAAA,gBAAA,EAAe,WAAU,cAAa,OAAM,SAC3C,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAU,YAAY;AAAA,YACtB,UAAU;AAAA,YACV,cAAY;AAAA,UAAA;AAAA,QACd;AAAA,4BACC,OAAI,EAAA,WAAU,8BACb,UAAC,qBAAA,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAe;AAAA,cACf,OAAO,WAAW,OAAO,UAAU,OAAO,IAAI;AAAA,cAE9C,UAAA;AAAA,gBAAC,oBAAA,eAAA,EACC,8BAAC,aAAY,EAAA,aAAY,cACtB,UACC,WAAA,qBAAC,OAAI,EAAA,WAAU,qBACb,UAAA;AAAA,kBAAC,oBAAA,OAAA,EAAM,WAAU,eAAe,CAAA;AAAA,kBAC/B,OAAO,UAAU,OAAO;AAAA,gBAAA,GAC3B,IAEA,aAEJ,CAAA,GACF;AAAA,gBACC,oBAAA,eAAA,EACE,UAAY,YAAA,IAAI,CAAC,SACf,oBAAA,YAAA,EAAsB,OAAO,MAC3B,UADc,KAAA,GAAA,IAEjB,CACD,GACH;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UACA,oBAAC,gBAAa,SAAO,MACnB,8BAAC,QAAO,EAAA,WAAU,aAAY,UAAA,KAAA,CAAE,EAClC,CAAA;AAAA,QAAA,EAAA,CACF,EACF,CAAA;AAAA,MAAA,GACF;AAAA,IACF,EAAA,CAAA;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;","x_google_ignoreList":[0,1,2]}
|
|
1
|
+
{"version":3,"file":"DateTimePicker.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/calendar-clock.js","../../../node_modules/lucide-react/dist/esm/icons/clock.js","../../../node_modules/date-fns/set.mjs","../../../lib/components/ui/DateTimePicker.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst CalendarClock = createLucideIcon(\"CalendarClock\", [\n [\"path\", { d: \"M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5\", key: \"1osxxc\" }],\n [\"path\", { d: \"M16 2v4\", key: \"4m81vk\" }],\n [\"path\", { d: \"M8 2v4\", key: \"1cmpym\" }],\n [\"path\", { d: \"M3 10h5\", key: \"r794hk\" }],\n [\"path\", { d: \"M17.5 17.5 16 16.3V14\", key: \"akvzfd\" }],\n [\"circle\", { cx: \"16\", cy: \"16\", r: \"6\", key: \"qoo3c4\" }]\n]);\n\nexport { CalendarClock as default };\n//# sourceMappingURL=calendar-clock.js.map\n","/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst Clock = createLucideIcon(\"Clock\", [\n [\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", key: \"1mglay\" }],\n [\"polyline\", { points: \"12 6 12 12 16 14\", key: \"68esgv\" }]\n]);\n\nexport { Clock as default };\n//# sourceMappingURL=clock.js.map\n","import { constructFrom } from \"./constructFrom.mjs\";\nimport { setMonth } from \"./setMonth.mjs\";\nimport { toDate } from \"./toDate.mjs\";\n\n/**\n * @name set\n * @category Common Helpers\n * @summary Set date values to a given date.\n *\n * @description\n * Set date values to a given date.\n *\n * Sets time values to date from object `values`.\n * A value is not set if it is undefined or null or doesn't exist in `values`.\n *\n * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts\n * to use native `Date#setX` methods. If you use this function, you may not want to include the\n * other `setX` functions that date-fns provides if you are concerned about the bundle size.\n *\n * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n *\n * @param date - The date to be changed\n * @param values - The date values to be set\n *\n * @returns The new date with options set\n *\n * @example\n * // Transform 1 September 2014 into 20 October 2015 in a single line:\n * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })\n * //=> Tue Oct 20 2015 00:00:00\n *\n * @example\n * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:\n * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })\n * //=> Mon Sep 01 2014 12:23:45\n */\n\nexport function set(date, values) {\n let _date = toDate(date);\n\n // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date\n if (isNaN(+_date)) {\n return constructFrom(date, NaN);\n }\n\n if (values.year != null) {\n _date.setFullYear(values.year);\n }\n\n if (values.month != null) {\n _date = setMonth(_date, values.month);\n }\n\n if (values.date != null) {\n _date.setDate(values.date);\n }\n\n if (values.hours != null) {\n _date.setHours(values.hours);\n }\n\n if (values.minutes != null) {\n _date.setMinutes(values.minutes);\n }\n\n if (values.seconds != null) {\n _date.setSeconds(values.seconds);\n }\n\n if (values.milliseconds != null) {\n _date.setMilliseconds(values.milliseconds);\n }\n\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default set;\n","import { format, parse, isValid, set } from \"date-fns\";\r\nimport { CalendarClockIcon, Clock, XIcon } from \"lucide-react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { Calendar } from \"./Calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport { cn } from \"../../utils/utils\";\r\nimport React, { forwardRef, useEffect } from \"react\";\r\nimport { Input } from \"./input\";\r\nimport {\r\n Select,\r\n SelectContent,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n} from \"./select\";\r\nimport { PopoverClose } from \"@radix-ui/react-popover\";\r\n\r\nconst DATE_FORMAT = \"dd.MM.yyyy HH:mm\";\r\n\r\ninterface DateTimePickerProps {\r\n value?: Date;\r\n onChange?: (date: Date | undefined | null) => void;\r\n className?: string;\r\n placeholder?: string;\r\n clearable?: boolean;\r\n disabled?: boolean;\r\n}\r\n\r\n// Helper function to round to the nearest half-hour\r\nconst roundToNearestHalfHour = (date: Date) => {\r\n const minutes = date.getMinutes();\r\n const roundedMinutes = minutes < 15 ? 0 : minutes < 45 ? 30 : 60;\r\n return set(date, {\r\n seconds: 0,\r\n milliseconds: 0,\r\n minutes: roundedMinutes,\r\n hours: roundedMinutes === 60 ? date.getHours() + 1 : date.getHours(),\r\n });\r\n};\r\n\r\nconst DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(\r\n (\r\n {\r\n value,\r\n onChange,\r\n className,\r\n clearable = true,\r\n placeholder,\r\n disabled,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [dateTime, setDateTime] = React.useState<Date | null>(value || null);\r\n const [inputValue, setInputValue] = React.useState<string | null>(\"\");\r\n\r\n useEffect(() => {\r\n if (value) {\r\n const roundedDate = roundToNearestHalfHour(value);\r\n setDateTime(roundedDate);\r\n setInputValue(format(roundedDate, DATE_FORMAT));\r\n } else {\r\n setDateTime(null);\r\n setInputValue(\"\");\r\n }\r\n }, [value]);\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n event.stopPropagation(); // Stop bubbling to prevent interference with other components\r\n\r\n setInputValue(event.target.value);\r\n const parsedDateTime = parse(event.target.value, DATE_FORMAT, new Date());\r\n\r\n if (isValid(parsedDateTime)) {\r\n setDateTime(parsedDateTime);\r\n onChange?.(parsedDateTime);\r\n setInputValue(format(parsedDateTime, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n setDateTime(null);\r\n onChange?.(null);\r\n }\r\n };\r\n\r\n const handleInputBlur = () => {\r\n if (inputValue === \"\") {\r\n setDateTime(null);\r\n onChange?.(null);\r\n return;\r\n }\r\n\r\n const parsedDateTime = parse(inputValue || \"\", DATE_FORMAT, new Date());\r\n if (isValid(parsedDateTime)) {\r\n setDateTime(parsedDateTime);\r\n onChange?.(parsedDateTime);\r\n setInputValue(format(parsedDateTime, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n setDateTime(null);\r\n onChange?.(null);\r\n }\r\n };\r\n\r\n const handleDateSelect = (selectedDate: Date | undefined | null) => {\r\n if (selectedDate) {\r\n const newDateTime = dateTime\r\n ? set(dateTime, {\r\n year: selectedDate.getFullYear(),\r\n month: selectedDate.getMonth(),\r\n date: selectedDate.getDate(),\r\n })\r\n : set(selectedDate, { hours: 12, minutes: 0 });\r\n setDateTime(newDateTime);\r\n onChange?.(newDateTime);\r\n setInputValue(format(newDateTime, DATE_FORMAT));\r\n } else {\r\n setDateTime(null);\r\n setInputValue(\"\");\r\n onChange?.(null);\r\n }\r\n };\r\n\r\n const handleTimeSelect = (time: string) => {\r\n const [hours, minutes] = time.split(\":\").map(Number);\r\n\r\n const newDateTime = set(dateTime ?? new Date(), { hours, minutes });\r\n setDateTime(newDateTime);\r\n onChange?.(newDateTime);\r\n setInputValue(format(newDateTime, DATE_FORMAT));\r\n };\r\n\r\n const handleClear = () => {\r\n setInputValue(\"\");\r\n setDateTime(null);\r\n onChange?.(null);\r\n };\r\n\r\n const timeOptions = Array.from({ length: 48 }, (_, i) => {\r\n const hours = Math.floor(i / 2);\r\n const minutes = i % 2 === 0 ? \"00\" : \"30\";\r\n return `${hours.toString().padStart(2, \"0\")}:${minutes}`;\r\n });\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <div className={cn(\"relative w-full\", className)}>\r\n <Input\r\n ref={ref}\r\n type=\"text\"\r\n value={inputValue || \"\"}\r\n onChange={handleInputChange}\r\n onBlur={handleInputBlur}\r\n placeholder={placeholder}\r\n className={cn(\r\n \"w-full pl-8 pr-8\",\r\n !dateTime && \"text-muted-foreground\"\r\n )}\r\n {...props}\r\n />\r\n <CalendarClockIcon className=\"absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\r\n {clearable && disabled && inputValue && (\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n className=\"absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0\"\r\n onClick={handleClear}\r\n >\r\n <XIcon className=\"h-4 w-4 text-muted-foreground\" />\r\n <span className=\"sr-only\">Smazat datum a čas</span>\r\n </Button>\r\n )}\r\n </div>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n mode=\"single\"\r\n selected={dateTime || undefined}\r\n onSelect={handleDateSelect}\r\n initialFocus\r\n />\r\n <div className=\"p-3 border-t border-border\">\r\n <div className=\"flex items-center justify-between\">\r\n <Select\r\n onValueChange={handleTimeSelect}\r\n value={dateTime ? format(dateTime, \"HH:mm\") : undefined}\r\n >\r\n <SelectTrigger>\r\n <SelectValue placeholder=\"Zvolte čas\">\r\n {dateTime ? (\r\n <div className=\"flex items-center\">\r\n <Clock className=\"mr-2 h-4 w-4\" />\r\n {format(dateTime, \"HH:mm\")}\r\n </div>\r\n ) : (\r\n \"Zvolte čas\"\r\n )}\r\n </SelectValue>\r\n </SelectTrigger>\r\n <SelectContent>\r\n {timeOptions.map((time) => (\r\n <SelectItem key={time} value={time}>\r\n {time}\r\n </SelectItem>\r\n ))}\r\n </SelectContent>\r\n </Select>\r\n <PopoverClose asChild>\r\n <Button className=\"ml-2 px-3\">OK</Button>\r\n </PopoverClose>\r\n </div>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nDateTimePicker.displayName = \"DateTimePicker\";\r\n\r\nexport default DateTimePicker;\r\n"],"names":["React","CalendarClockIcon","XIcon"],"mappings":"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","x_google_ignoreList":[0,1,2]}
|
|
@@ -6,6 +6,7 @@ interface DatePickerProps {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
placeholder?: string;
|
|
8
8
|
clearable?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
9
10
|
}
|
|
10
11
|
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
|
|
11
12
|
export default DatePicker;
|
|
@@ -22,7 +22,15 @@ const Calendar = createLucideIcon("Calendar", [
|
|
|
22
22
|
]);
|
|
23
23
|
const DATE_FORMAT = "dd.MM.yyyy";
|
|
24
24
|
const DatePicker = forwardRef(
|
|
25
|
-
({
|
|
25
|
+
({
|
|
26
|
+
value,
|
|
27
|
+
onChange,
|
|
28
|
+
className,
|
|
29
|
+
clearable = true,
|
|
30
|
+
placeholder,
|
|
31
|
+
disabled,
|
|
32
|
+
...props
|
|
33
|
+
}, ref) => {
|
|
26
34
|
const [date, setDate] = React__default.useState(value);
|
|
27
35
|
const [inputValue, setInputValue] = React__default.useState("");
|
|
28
36
|
useEffect(() => {
|
|
@@ -97,7 +105,7 @@ const DatePicker = forwardRef(
|
|
|
97
105
|
}
|
|
98
106
|
),
|
|
99
107
|
/* @__PURE__ */ jsx(Calendar, { className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
|
|
100
|
-
clearable && inputValue && /* @__PURE__ */ jsxs(
|
|
108
|
+
clearable && !disabled && inputValue && /* @__PURE__ */ jsxs(
|
|
101
109
|
Button,
|
|
102
110
|
{
|
|
103
111
|
type: "button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/calendar.js","../../../lib/components/ui/DatePicker.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst Calendar = createLucideIcon(\"Calendar\", [\n [\"path\", { d: \"M8 2v4\", key: \"1cmpym\" }],\n [\"path\", { d: \"M16 2v4\", key: \"4m81vk\" }],\n [\"rect\", { width: \"18\", height: \"18\", x: \"3\", y: \"4\", rx: \"2\", key: \"1hopcy\" }],\n [\"path\", { d: \"M3 10h18\", key: \"8toen8\" }]\n]);\n\nexport { Calendar as default };\n//# sourceMappingURL=calendar.js.map\n","import { format, isValid, parse } from \"date-fns\";\r\nimport { CalendarIcon, XIcon } from \"lucide-react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { Calendar } from \"./Calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport { cn } from \"../../utils/utils\";\r\nimport React, { forwardRef, useEffect } from \"react\";\r\nimport { Input } from \"./input\";\r\n\r\nconst DATE_FORMAT = \"dd.MM.yyyy\";\r\n\r\ninterface DatePickerProps {\r\n value?: Date;\r\n onChange?: (date: Date | undefined) => void;\r\n className?: string;\r\n placeholder?: string;\r\n clearable?: boolean;\r\n}\r\n\r\nconst DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\r\n (\r\n {
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/calendar.js","../../../lib/components/ui/DatePicker.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst Calendar = createLucideIcon(\"Calendar\", [\n [\"path\", { d: \"M8 2v4\", key: \"1cmpym\" }],\n [\"path\", { d: \"M16 2v4\", key: \"4m81vk\" }],\n [\"rect\", { width: \"18\", height: \"18\", x: \"3\", y: \"4\", rx: \"2\", key: \"1hopcy\" }],\n [\"path\", { d: \"M3 10h18\", key: \"8toen8\" }]\n]);\n\nexport { Calendar as default };\n//# sourceMappingURL=calendar.js.map\n","import { format, isValid, parse } from \"date-fns\";\r\nimport { CalendarIcon, XIcon } from \"lucide-react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { Calendar } from \"./Calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport { cn } from \"../../utils/utils\";\r\nimport React, { forwardRef, useEffect } from \"react\";\r\nimport { Input } from \"./input\";\r\n\r\nconst DATE_FORMAT = \"dd.MM.yyyy\";\r\n\r\ninterface DatePickerProps {\r\n value?: Date;\r\n onChange?: (date: Date | undefined) => void;\r\n className?: string;\r\n placeholder?: string;\r\n clearable?: boolean;\r\n disabled?: boolean;\r\n}\r\n\r\nconst DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\r\n (\r\n {\r\n value,\r\n onChange,\r\n className,\r\n clearable = true,\r\n placeholder,\r\n disabled,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [date, setDate] = React.useState<Date | undefined>(value);\r\n const [inputValue, setInputValue] = React.useState<string>(\"\");\r\n\r\n useEffect(() => {\r\n if (value) {\r\n setDate(value);\r\n setInputValue(format(value, DATE_FORMAT));\r\n } else {\r\n setDate(undefined);\r\n setInputValue(\"\");\r\n }\r\n }, [value]);\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setInputValue(event.target.value);\r\n const parsedDate = parse(event.target.value, DATE_FORMAT, new Date());\r\n if (isValid(parsedDate)) {\r\n setDate(parsedDate);\r\n onChange?.(parsedDate);\r\n setInputValue(format(parsedDate, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n }\r\n };\r\n\r\n const handleInputBlur = () => {\r\n if (inputValue === \"\") {\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n return;\r\n }\r\n\r\n const parsedDate = parse(inputValue, DATE_FORMAT, new Date());\r\n if (isValid(parsedDate)) {\r\n setDate(parsedDate);\r\n onChange?.(parsedDate);\r\n setInputValue(format(parsedDate, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n }\r\n };\r\n\r\n const handleCalendarSelect = (selectedDate: Date | undefined) => {\r\n setDate(selectedDate);\r\n onChange?.(selectedDate);\r\n if (selectedDate) {\r\n setInputValue(format(selectedDate, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n }\r\n };\r\n\r\n const handleClear = () => {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n };\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <div className={cn(\"relative w-full\", className)}>\r\n <Input\r\n type=\"text\"\r\n value={inputValue}\r\n onChange={handleInputChange}\r\n onBlur={handleInputBlur}\r\n placeholder={placeholder}\r\n className={cn(\r\n \"w-full pl-8 pr-8\",\r\n !date && \"text-muted-foreground\"\r\n )}\r\n ref={ref}\r\n {...props}\r\n />\r\n <CalendarIcon className=\"absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\r\n {clearable && !disabled && inputValue && (\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n className=\"absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0\"\r\n onClick={handleClear}\r\n >\r\n <XIcon className=\"h-4 w-4 text-muted-foreground\" />\r\n <span className=\"sr-only\">Smazat datum</span>\r\n </Button>\r\n )}\r\n </div>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n mode=\"single\"\r\n selected={date}\r\n onSelect={handleCalendarSelect}\r\n initialFocus\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n\r\nexport default DatePicker;\r\n"],"names":["React","CalendarIcon","XIcon","Calendar"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -16,11 +16,20 @@ interface DatePickerProps {
|
|
|
16
16
|
className?: string;
|
|
17
17
|
placeholder?: string;
|
|
18
18
|
clearable?: boolean;
|
|
19
|
+
disabled?: boolean;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
|
|
22
23
|
(
|
|
23
|
-
{
|
|
24
|
+
{
|
|
25
|
+
value,
|
|
26
|
+
onChange,
|
|
27
|
+
className,
|
|
28
|
+
clearable = true,
|
|
29
|
+
placeholder,
|
|
30
|
+
disabled,
|
|
31
|
+
...props
|
|
32
|
+
},
|
|
24
33
|
ref
|
|
25
34
|
) => {
|
|
26
35
|
const [date, setDate] = React.useState<Date | undefined>(value);
|
|
@@ -103,7 +112,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
|
|
|
103
112
|
{...props}
|
|
104
113
|
/>
|
|
105
114
|
<CalendarIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
106
|
-
{clearable && inputValue && (
|
|
115
|
+
{clearable && !disabled && inputValue && (
|
|
107
116
|
<Button
|
|
108
117
|
type="button"
|
|
109
118
|
variant="ghost"
|
|
@@ -24,6 +24,7 @@ interface DateTimePickerProps {
|
|
|
24
24
|
className?: string;
|
|
25
25
|
placeholder?: string;
|
|
26
26
|
clearable?: boolean;
|
|
27
|
+
disabled?: boolean;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
// Helper function to round to the nearest half-hour
|
|
@@ -40,7 +41,15 @@ const roundToNearestHalfHour = (date: Date) => {
|
|
|
40
41
|
|
|
41
42
|
const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
|
|
42
43
|
(
|
|
43
|
-
{
|
|
44
|
+
{
|
|
45
|
+
value,
|
|
46
|
+
onChange,
|
|
47
|
+
className,
|
|
48
|
+
clearable = true,
|
|
49
|
+
placeholder,
|
|
50
|
+
disabled,
|
|
51
|
+
...props
|
|
52
|
+
},
|
|
44
53
|
ref
|
|
45
54
|
) => {
|
|
46
55
|
const [dateTime, setDateTime] = React.useState<Date | null>(value || null);
|
|
@@ -151,7 +160,7 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
|
|
|
151
160
|
{...props}
|
|
152
161
|
/>
|
|
153
162
|
<CalendarClockIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
154
|
-
{clearable && inputValue && (
|
|
163
|
+
{clearable && disabled && inputValue && (
|
|
155
164
|
<Button
|
|
156
165
|
type="button"
|
|
157
166
|
variant="ghost"
|