@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 6.72 kB
Source Map (JSON)
{"version":3,"file":"DateRangePicker.mjs","names":["datePickerMessages","useControlledState"],"sources":["../../../src/base-ui/DatePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\nimport dayjs from 'dayjs';\nimport { ArrowRight, CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\n\nimport { clampToBounds, DEFAULT_FORMAT, orderRange } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport { formatDate } from './DatePicker';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DateRangePickerProps, DateRangeValue } from './type';\n\nconst EMPTY: DateRangeValue = [null, null];\n\nconst DateRangePicker = memo<DateRangePickerProps>(\n ({\n allowClear = true,\n className,\n defaultValue = EMPTY,\n disabled,\n disabledDate,\n format,\n max,\n min,\n onChange,\n placeholder,\n shadow,\n size,\n style,\n value,\n variant,\n }) => {\n const { t } = useTranslation(datePickerMessages);\n const [current, setCurrent] = useControlledState<DateRangeValue>(defaultValue, {\n defaultValue,\n onChange,\n value,\n });\n const [open, setOpen] = useState(false);\n const [draft, setDraft] = useState<DateRangeValue>(EMPTY);\n const [hovered, setHovered] = useState<Date | null>(null);\n const [month, setMonth] = useState<Date>(() => current[0] ?? new Date());\n\n const shown = open && draft[0] ? draft : current;\n const nextMonth = dayjs(month).add(1, 'month').toDate();\n const bounds = { disabledDate, max, min };\n\n const half = (date: Date | null, fallback: string, active: boolean) => (\n <span className={styles.rangeHalf} data-active={active ? '' : undefined}>\n {date ? (\n formatDate(date, format, DEFAULT_FORMAT.date)\n ) : (\n <span className={styles.placeholder}>{fallback}</span>\n )}\n </span>\n );\n\n const select = (date: Date) => {\n if (!draft[0] || draft[1]) {\n setDraft([date, null]);\n return;\n }\n const ordered = orderRange(draft[0], date);\n setDraft(EMPTY);\n setCurrent(ordered);\n setOpen(false);\n };\n\n return (\n <PickerShell\n className={className}\n disabled={disabled}\n open={open}\n shadow={shadow}\n showClear={allowClear && !!(current[0] || current[1])}\n size={size}\n style={style}\n variant={variant}\n icon={\n <span className={styles.icon}>\n <Icon icon={CalendarIcon} size={14} />\n </span>\n }\n trigger={\n <button className={styles.trigger} disabled={disabled} type=\"button\">\n <span className={styles.rangeTrigger}>\n {half(\n shown[0],\n placeholder?.[0] ?? t('datePicker.startPlaceholder'),\n open && !draft[0],\n )}\n <span className={styles.icon}>\n <Icon icon={ArrowRight} size={14} />\n </span>\n {half(\n shown[1],\n placeholder?.[1] ?? t('datePicker.endPlaceholder'),\n open && !!draft[0],\n )}\n </span>\n </button>\n }\n onClear={() => setCurrent(EMPTY)}\n onOpenChange={(next) => {\n if (next) {\n setMonth(current[0] ?? clampToBounds(new Date(), { max, min }));\n setDraft(EMPTY);\n }\n setOpen(next);\n }}\n >\n <div className={styles.range}>\n <CalendarPanel\n bounds={bounds}\n hovered={hovered}\n mode=\"date\"\n month={month}\n range={draft[0] ? draft : current}\n showNav={false}\n onHover={setHovered}\n onMonthChange={setMonth}\n onSelect={select}\n />\n <CalendarPanel\n bounds={bounds}\n hovered={hovered}\n mode=\"date\"\n month={nextMonth}\n range={draft[0] ? draft : current}\n onHover={setHovered}\n onMonthChange={(next) => setMonth(dayjs(next).subtract(1, 'month').toDate())}\n onSelect={select}\n />\n </div>\n </PickerShell>\n );\n },\n);\n\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport default DateRangePicker;\n"],"mappings":"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"}