@loword/loword-design-system 0.7.1 → 0.7.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.
|
@@ -56,7 +56,9 @@ export interface LDDateRangePickerProps {
|
|
|
56
56
|
triggerClassName?: string;
|
|
57
57
|
/** 달력·시간 컬럼의 선택 강조 색 */
|
|
58
58
|
colorSet?: CalendarColorSet;
|
|
59
|
+
/** false면 daily 모드에서 시간 선택을 숨기고 날짜만 표시한다. 값의 시각은 바꾸지 않는다(LDDatePicker와 동일) */
|
|
60
|
+
isExistTime?: boolean;
|
|
59
61
|
}
|
|
60
|
-
declare const LDDateRangePicker: ({ variant, value, onChange, disabled, block, color, placeholder, dateFormat, timeFormat, isDisableAfterNow, isAutoClose, viewMode, initialValue, trailingIcon, onRangeComplete, onResetComplete, className, style, triggerClassName, colorSet, }: LDDateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
declare const LDDateRangePicker: ({ variant, value, onChange, disabled, block, color, placeholder, dateFormat, timeFormat, isDisableAfterNow, isAutoClose, viewMode, initialValue, trailingIcon, onRangeComplete, onResetComplete, className, style, triggerClassName, colorSet, isExistTime, }: LDDateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
61
63
|
export default LDDateRangePicker;
|
|
62
64
|
//# sourceMappingURL=LDDateRangePicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDDateRangePicker/LDDateRangePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAmB,EACjB,KAAK,gBAAgB,EACtB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQ7C,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAC3C,KAAK,YAAY,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAChE,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,KAAK,sBAAsB,GAAG,MAAM,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;AACpE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CACvC,KAAK,EACL,SAAS,GAAG,OAAO,GAAG,QAAQ,CAC/B,CAAC;AAcF,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D,0BAA0B;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"LDDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDDateRangePicker/LDDateRangePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAmB,EACjB,KAAK,gBAAgB,EACtB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQ7C,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAC3C,KAAK,YAAY,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAChE,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,KAAK,sBAAsB,GAAG,MAAM,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;AACpE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CACvC,KAAK,EACL,SAAS,GAAG,OAAO,GAAG,QAAQ,CAC/B,CAAC;AAcF,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D,0BAA0B;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwBD,QAAA,MAAM,iBAAiB,GAAI,+PAsBxB,sBAAsB,4CAqWxB,CAAC;AAiMF,eAAe,iBAAiB,CAAC"}
|
|
@@ -31,8 +31,10 @@ const variantColorClasses = {
|
|
|
31
31
|
danger: 'bg-transparent text-neutral900 border-none outline-2 outline-danger600 outline-solid -outline-offset-2',
|
|
32
32
|
},
|
|
33
33
|
};
|
|
34
|
-
const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = false, block = false, color = 'neutral', placeholder, dateFormat, timeFormat = 'HH:mm:ss', isDisableAfterNow = false, isAutoClose = false, viewMode = 'daily', initialValue, trailingIcon = _jsx(Calendar, { size: 15, className: "text-mono400" }), onRangeComplete, onResetComplete, className, style, triggerClassName, colorSet, }) => {
|
|
34
|
+
const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = false, block = false, color = 'neutral', placeholder, dateFormat, timeFormat = 'HH:mm:ss', isDisableAfterNow = false, isAutoClose = false, viewMode = 'daily', initialValue, trailingIcon = _jsx(Calendar, { size: 15, className: "text-mono400" }), onRangeComplete, onResetComplete, className, style, triggerClassName, colorSet, isExistTime = true, }) => {
|
|
35
35
|
const fmt = dateFormat ?? dateFormats[viewMode];
|
|
36
|
+
// 시간을 그리고 표시하는 건 daily 모드에서 isExistTime일 때뿐이다
|
|
37
|
+
const showTime = viewMode === 'daily' && isExistTime;
|
|
36
38
|
const [open, setOpen] = useState(false);
|
|
37
39
|
const [leftMonth, setLeftMonth] = useState(new Date());
|
|
38
40
|
const [rightMonth, setRightMonth] = useState(dayjs().add(1, 'month').toDate());
|
|
@@ -68,12 +70,14 @@ const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = fal
|
|
|
68
70
|
to: r.to ? combineDateTime(r.to, toTimeRef.current) : undefined,
|
|
69
71
|
};
|
|
70
72
|
}, []);
|
|
71
|
-
const placeholderFmt =
|
|
73
|
+
const placeholderFmt = showTime
|
|
72
74
|
? `${dateFormats[viewMode]} ${DEFAULT_TIME_PLACEHOLDER}`
|
|
73
75
|
: dateFormats[viewMode];
|
|
74
76
|
const placeholderText = placeholder ?? `${placeholderFmt} ~ ${placeholderFmt}`;
|
|
75
77
|
const displayRange = composeRange(selectedRange);
|
|
76
|
-
const displayFmt =
|
|
78
|
+
const displayFmt = showTime
|
|
79
|
+
? `${fmt} ${normalizeTimeFormat(timeFormat)}`
|
|
80
|
+
: fmt;
|
|
77
81
|
/* 트리거의 접근 이름(aria-label)용 평문. 화면 표시는 renderDateRange가 담당한다 */
|
|
78
82
|
const displayText = (() => {
|
|
79
83
|
if (!displayRange?.from)
|
|
@@ -176,7 +180,7 @@ const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = fal
|
|
|
176
180
|
: 'pointer-events-none opacity-0'), onClick: handleReset, children: _jsx(RotateCw, { size: 15 }) }), trailingIcon] })] }), _jsx(PopoverBase.Content, { className: "rounded-md border border-neutral-200 bg-white p-0 shadow-md", children: _jsxs("div", { style: {
|
|
177
181
|
'--calendar-accent': colorSet?.accent,
|
|
178
182
|
'--calendar-accent-bg': colorSet?.accentBg,
|
|
179
|
-
}, className: "flex flex-col [--calendar-accent-bg:var(--color-tintBlue)] [--calendar-accent:var(--color-lb500)]", children: [viewMode === 'daily' && (_jsxs("div", { className: "flex flex-row mobile:flex-col", children: [_jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "range", locale: ko, selected: selectedRange, onSelect: handleDailySelect, month: leftMonth, onMonthChange: setLeftMonth, endMonth: leftEndMonth, disabled: isDateDisabled, colorSet: colorSet }), _jsx(CalendarTimePicker, { value: fromTime, onChange: handleFromTime, colorSet: colorSet, className: "shrink-0" })] }), _jsx(LDDivider, { orientation: "vertical", className: "inline-block h-auto self-stretch mobile:hidden" }), _jsx(LDDivider, { orientation: "horizontal", className: "hidden w-auto self-stretch mobile:inline-block" }), _jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "range", locale: ko, selected: selectedRange, onSelect: handleDailySelect, month: rightMonth, onMonthChange: setRightMonth, startMonth: rightStartMonth, disabled: isDateDisabled, colorSet: colorSet }), _jsx(CalendarTimePicker, { value: toTime, onChange: handleToTime, colorSet: colorSet, className: "shrink-0" })] })] })), viewMode === 'monthly' && (_jsx(MonthRangePicker, { value: selectedRange, onChange: handleRangeSelect, isDisableAfterNow: isDisableAfterNow })), viewMode === 'yearly' && (_jsx(YearRangePicker, { value: selectedRange, onChange: handleRangeSelect, isDisableAfterNow: isDisableAfterNow })), !isAutoClose && (_jsxs("div", { className: "flex items-center justify-end gap-sm border-t border-neutral100 py-xs px-sm", children: [_jsx(LDButton, { variant: "outline", color: "neutral", onClick: handleCancel, children: "\uCDE8\uC18C" }), _jsx(LDButton, { onClick: handleConfirm, children: "\uD655\uC778" })] }))] }) })] }) }));
|
|
183
|
+
}, className: "flex flex-col [--calendar-accent-bg:var(--color-tintBlue)] [--calendar-accent:var(--color-lb500)]", children: [viewMode === 'daily' && (_jsxs("div", { className: "flex flex-row mobile:flex-col", children: [_jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "range", locale: ko, selected: selectedRange, onSelect: handleDailySelect, month: leftMonth, onMonthChange: setLeftMonth, endMonth: leftEndMonth, disabled: isDateDisabled, colorSet: colorSet }), showTime && (_jsx(CalendarTimePicker, { value: fromTime, onChange: handleFromTime, colorSet: colorSet, className: "shrink-0" }))] }), _jsx(LDDivider, { orientation: "vertical", className: "inline-block h-auto self-stretch mobile:hidden" }), _jsx(LDDivider, { orientation: "horizontal", className: "hidden w-auto self-stretch mobile:inline-block" }), _jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "range", locale: ko, selected: selectedRange, onSelect: handleDailySelect, month: rightMonth, onMonthChange: setRightMonth, startMonth: rightStartMonth, disabled: isDateDisabled, colorSet: colorSet }), showTime && (_jsx(CalendarTimePicker, { value: toTime, onChange: handleToTime, colorSet: colorSet, className: "shrink-0" }))] })] })), viewMode === 'monthly' && (_jsx(MonthRangePicker, { value: selectedRange, onChange: handleRangeSelect, isDisableAfterNow: isDisableAfterNow })), viewMode === 'yearly' && (_jsx(YearRangePicker, { value: selectedRange, onChange: handleRangeSelect, isDisableAfterNow: isDisableAfterNow })), !isAutoClose && (_jsxs("div", { className: "flex items-center justify-end gap-sm border-t border-neutral100 py-xs px-sm", children: [_jsx(LDButton, { variant: "outline", color: "neutral", onClick: handleCancel, children: "\uCDE8\uC18C" }), _jsx(LDButton, { onClick: handleConfirm, children: "\uD655\uC778" })] }))] }) })] }) }));
|
|
180
184
|
};
|
|
181
185
|
// ── MonthRangePicker ──
|
|
182
186
|
const MonthRangePicker = ({ value, onChange, isDisableAfterNow, }) => {
|