@umodeapporg/ui 0.8.1 → 0.8.2
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.
|
@@ -12,7 +12,7 @@ export interface IDatePickerProps {
|
|
|
12
12
|
startValue?: Date;
|
|
13
13
|
onFocus?: () => void;
|
|
14
14
|
onBlur?: () => void;
|
|
15
|
-
/** Extra classes for the inner input
|
|
15
|
+
/** Extra classes for the inner input, which is a `ControlledInput` like any other field. */
|
|
16
16
|
inputClassName?: string;
|
|
17
17
|
}
|
|
18
18
|
declare const DatePicker: React.FC<IDatePickerProps>;
|
|
@@ -79,13 +79,13 @@ const DatePicker = ({
|
|
|
79
79
|
{
|
|
80
80
|
readOnly: true,
|
|
81
81
|
placeholder: placeholder ?? label,
|
|
82
|
-
className: twMerge("
|
|
82
|
+
className: twMerge("focus:border-border-strong", inputClassName),
|
|
83
83
|
disabled,
|
|
84
84
|
value: date ? formatDate(date) : "",
|
|
85
85
|
onClick: togglePopover
|
|
86
86
|
}
|
|
87
87
|
),
|
|
88
|
-
date && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dates.clearSelection"), children: /* @__PURE__ */ jsx("div", { onClick: clear, className: "absolute inset-y-0 right-4
|
|
88
|
+
date && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dates.clearSelection"), children: /* @__PURE__ */ jsx("div", { onClick: clear, className: "absolute inset-y-0 right-4 flex cursor-pointer items-center", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close_small", size: 20, color: "rgb(var(--color-foreground-subtle))" }) }) })
|
|
89
89
|
] })
|
|
90
90
|
] }) }),
|
|
91
91
|
/* @__PURE__ */ jsx(ControlledPopoverContent, { className: "zIndexMax m-0 p-0", children: /* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DateTime/DatePicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { ptBR } from 'date-fns/locale';\nimport { DateAfter, DateBefore, DayPicker } from 'react-day-picker';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport {\n ControlledPopoverContent,\n ControlledPopoverHandler,\n ControlledPopoverRoot,\n} from '@/components/UI/ControlledPopover';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatDate } from '@/helpers/dateHelpers';\n\nimport ControlledInput from '../Form/ControlledInput';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport 'react-day-picker/style.css';\n\nconst DATE_PICKER_TIMEZONE = 'UTC';\n\nexport interface IDatePickerProps {\n label?: string;\n /** Text shown inside the empty input. Falls back to the label for the historical behavior. */\n placeholder?: string;\n onUpdate: (value: string | undefined) => void;\n disabled?: boolean;\n minDate?: string;\n maxDate?: string;\n useIcon?: boolean;\n valueRender?: () => React.ReactNode;\n startValue?: Date;\n onFocus?: () => void;\n onBlur?: () => void;\n /** Extra classes for the inner input
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DateTime/DatePicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { ptBR } from 'date-fns/locale';\nimport { DateAfter, DateBefore, DayPicker } from 'react-day-picker';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport {\n ControlledPopoverContent,\n ControlledPopoverHandler,\n ControlledPopoverRoot,\n} from '@/components/UI/ControlledPopover';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatDate } from '@/helpers/dateHelpers';\n\nimport ControlledInput from '../Form/ControlledInput';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport 'react-day-picker/style.css';\n\nconst DATE_PICKER_TIMEZONE = 'UTC';\n\nexport interface IDatePickerProps {\n label?: string;\n /** Text shown inside the empty input. Falls back to the label for the historical behavior. */\n placeholder?: string;\n onUpdate: (value: string | undefined) => void;\n disabled?: boolean;\n minDate?: string;\n maxDate?: string;\n useIcon?: boolean;\n valueRender?: () => React.ReactNode;\n startValue?: Date;\n onFocus?: () => void;\n onBlur?: () => void;\n /** Extra classes for the inner input, which is a `ControlledInput` like any other field. */\n inputClassName?: string;\n}\n\nfunction formatDateToYYYYMMDD(date: Date) {\n const month = String(date.getUTCMonth() + 1).padStart(2, '0');\n const day = String(date.getUTCDate()).padStart(2, '0');\n const year = date.getUTCFullYear();\n return `${year}-${month}-${day}`;\n}\n\nfunction parseDate(dateString: string): Date {\n const dateParts = dateString.split('T')[0].split('-');\n const year = parseInt(dateParts[0], 10);\n const month = parseInt(dateParts[1], 10) - 1;\n const day = parseInt(dateParts[2], 10);\n\n const formattedDate = new Date(year, month, day);\n return formattedDate;\n}\n\nconst DatePicker: React.FC<IDatePickerProps> = ({\n label,\n placeholder,\n disabled,\n onUpdate,\n minDate,\n maxDate,\n useIcon,\n valueRender,\n startValue,\n onFocus,\n inputClassName,\n}) => {\n const { t } = useTranslation('ui');\n const [date, setDate] = useState<Date | undefined>(startValue || undefined);\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n // Hosts pass a freshly parsed Date on every render, so the sync compares\n // timestamps. Without this the picker ignored external changes (clearing\n // filters, applying a preset) and callers had to force a remount via `key`.\n const startTime = startValue ? startValue.getTime() : null;\n const syncedStartTimeRef = useRef(startTime);\n\n useEffect(() => {\n if (syncedStartTimeRef.current === startTime) return;\n syncedStartTimeRef.current = startTime;\n setDate(startTime === null ? undefined : new Date(startTime));\n }, [startTime]);\n\n const handleSelectedDate = (date: Date | undefined) => {\n setDate(date);\n if (date) {\n const formattedDate = formatDateToYYYYMMDD(date);\n onUpdate(formattedDate);\n } else {\n onUpdate(undefined);\n }\n setPopoverOpen(false);\n };\n\n const togglePopover = () => {\n setPopoverOpen(!popoverOpen);\n };\n\n const clear = () => {\n handleSelectedDate(undefined);\n };\n\n const beforeMatcher: DateBefore = {\n before: minDate ? parseDate(String(minDate)) : new Date(2024, 1, 1),\n };\n const afterMatcher: DateAfter = {\n after: maxDate ? parseDate(String(maxDate)) : new Date(2030, 1, 1),\n };\n\n return (\n <ControlledPopoverRoot placement=\"bottom\" open={popoverOpen} handler={setPopoverOpen}>\n <ControlledPopoverHandler>\n <div className=\"zIndexMax flex w-full flex-row items-center gap-x-1\" onFocus={onFocus}>\n {useIcon && <MaterialSymbol icon=\"calendar_month\" size={20} />}\n {valueRender ? (\n valueRender()\n ) : (\n <div className=\"relative w-full\">\n <ControlledInput\n readOnly\n placeholder={placeholder ?? label}\n className={twMerge('focus:border-border-strong', inputClassName)}\n disabled={disabled}\n value={date ? formatDate(date) : ''}\n onClick={togglePopover}\n />\n\n {date && (\n <ControlledTooltip content={t('dates.clearSelection')}>\n <div onClick={clear} className=\"absolute inset-y-0 right-4 flex cursor-pointer items-center\">\n <MaterialSymbol icon=\"close_small\" size={20} color=\"rgb(var(--color-foreground-subtle))\" />\n </div>\n </ControlledTooltip>\n )}\n </div>\n )}\n </div>\n </ControlledPopoverHandler>\n <ControlledPopoverContent className=\"zIndexMax m-0 p-0\">\n <DayPicker\n ISOWeek\n showOutsideDays\n captionLayout=\"label\"\n dir=\"ltr\"\n firstWeekContainsDate={1}\n mode=\"single\"\n numberOfMonths={1}\n timeZone={DATE_PICKER_TIMEZONE}\n weekStartsOn={1}\n locale={ptBR}\n selected={date}\n defaultMonth={date}\n disabled={[beforeMatcher, afterMatcher]}\n onSelect={handleSelectedDate}\n className=\"p-3\"\n classNames={{\n today: `rounded-md bg-muted-active text-foreground`,\n selected: `rounded-md bg-ink text-white hover:bg-ink hover:text-white focus:bg-ink focus:text-white`,\n chevron: `fill-foreground`,\n }}\n />\n </ControlledPopoverContent>\n </ControlledPopoverRoot>\n );\n};\n\nexport default DatePicker;\n"],"names":["date"],"mappings":"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"}
|