@ceed/cds 1.5.4-next.3 → 1.5.4-next.4
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/Calendar/utils/index.d.ts +3 -1
- package/dist/components/MonthPicker/MonthPicker.d.ts +1 -0
- package/dist/index.cjs +16 -13
- package/dist/index.js +16 -13
- package/framer/index.js +25 -25
- package/package.json +1 -1
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export declare const getCalendarDates: (date: Date) => (number | undefined)[][];
|
|
2
2
|
export declare const getYearName: (date: Date, locale: string) => string;
|
|
3
|
-
export declare const getMonthName: (date: Date, locale: string
|
|
3
|
+
export declare const getMonthName: (date: Date, locale: string, options?: {
|
|
4
|
+
hideYear?: boolean;
|
|
5
|
+
}) => string;
|
|
4
6
|
export declare const getMonthNameFromIndex: (index: number, locale: string) => string;
|
|
5
7
|
/**
|
|
6
8
|
* 일~토 / Sun ~ Sat 같은 요일 이름을 가져옵니다.
|
|
@@ -21,6 +21,7 @@ interface BaseMonthPickerProps {
|
|
|
21
21
|
disablePast?: boolean;
|
|
22
22
|
format?: string;
|
|
23
23
|
displayFormat?: string;
|
|
24
|
+
locale?: string;
|
|
24
25
|
}
|
|
25
26
|
export type MonthPickerProps = BaseMonthPickerProps & Omit<React.ComponentProps<typeof Input>, "onChange" | "value" | "defaultValue">;
|
|
26
27
|
declare const MonthPicker: React.ForwardRefExoticComponent<Omit<MonthPickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
package/dist/index.cjs
CHANGED
|
@@ -851,8 +851,11 @@ var getCalendarDates = (date) => {
|
|
|
851
851
|
var getYearName = (date, locale) => {
|
|
852
852
|
return date.toLocaleString(locale, { year: "numeric" });
|
|
853
853
|
};
|
|
854
|
-
var getMonthName = (date, locale) => {
|
|
855
|
-
return date.toLocaleString(locale, {
|
|
854
|
+
var getMonthName = (date, locale, options) => {
|
|
855
|
+
return date.toLocaleString(locale, {
|
|
856
|
+
month: "long",
|
|
857
|
+
...options?.hideYear ? {} : { year: "numeric" }
|
|
858
|
+
});
|
|
856
859
|
};
|
|
857
860
|
var getMonthNameFromIndex = (index, locale) => {
|
|
858
861
|
return new Date(0, index).toLocaleString(locale, { month: "short" });
|
|
@@ -4563,13 +4566,10 @@ var MonthPickerRoot = (0, import_joy46.styled)("div", {
|
|
|
4563
4566
|
})({
|
|
4564
4567
|
width: "100%"
|
|
4565
4568
|
});
|
|
4566
|
-
|
|
4567
|
-
return new Intl.DateTimeFormat("en-US", { month: "long" }).format(date);
|
|
4568
|
-
}
|
|
4569
|
-
var formatValueString3 = (date, format) => {
|
|
4569
|
+
var formatValueString3 = (date, format, locale = "default") => {
|
|
4570
4570
|
const year = date.getFullYear().toString();
|
|
4571
4571
|
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
|
4572
|
-
const monthName =
|
|
4572
|
+
const monthName = getMonthName(date, locale, { hideYear: true });
|
|
4573
4573
|
const day = "01";
|
|
4574
4574
|
return format.replace(/MMMM/g, monthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year);
|
|
4575
4575
|
};
|
|
@@ -4621,6 +4621,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
|
|
|
4621
4621
|
format = "YYYY/MM/DD",
|
|
4622
4622
|
displayFormat = "YYYY/MM",
|
|
4623
4623
|
size,
|
|
4624
|
+
locale,
|
|
4624
4625
|
...innerProps
|
|
4625
4626
|
} = props;
|
|
4626
4627
|
const innerRef = (0, import_react33.useRef)(null);
|
|
@@ -4635,7 +4636,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
|
|
|
4635
4636
|
{ disableStrict: true }
|
|
4636
4637
|
);
|
|
4637
4638
|
const [displayValue, setDisplayValue] = (0, import_react33.useState)(
|
|
4638
|
-
() => value ? formatValueString3(parseDate3(value, format), displayFormat) : ""
|
|
4639
|
+
() => value ? formatValueString3(parseDate3(value, format), displayFormat, locale) : ""
|
|
4639
4640
|
);
|
|
4640
4641
|
const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
|
|
4641
4642
|
const open = Boolean(anchorEl);
|
|
@@ -4654,7 +4655,8 @@ var MonthPicker = (0, import_react33.forwardRef)(
|
|
|
4654
4655
|
}
|
|
4655
4656
|
const formattedValue = formatValueString3(
|
|
4656
4657
|
parseDate3(value, format),
|
|
4657
|
-
displayFormat
|
|
4658
|
+
displayFormat,
|
|
4659
|
+
locale
|
|
4658
4660
|
);
|
|
4659
4661
|
setDisplayValue(formattedValue);
|
|
4660
4662
|
}, [displayFormat, format, value]);
|
|
@@ -4662,11 +4664,11 @@ var MonthPicker = (0, import_react33.forwardRef)(
|
|
|
4662
4664
|
(event) => {
|
|
4663
4665
|
const value2 = event.target.value;
|
|
4664
4666
|
setDisplayValue(
|
|
4665
|
-
value2 ? formatValueString3(parseDate3(value2, format), displayFormat) : value2
|
|
4667
|
+
value2 ? formatValueString3(parseDate3(value2, format), displayFormat, locale) : value2
|
|
4666
4668
|
);
|
|
4667
4669
|
setValue(value2);
|
|
4668
4670
|
},
|
|
4669
|
-
[displayFormat, format, setValue]
|
|
4671
|
+
[displayFormat, format, setValue, locale]
|
|
4670
4672
|
);
|
|
4671
4673
|
const handleCalendarToggle = (0, import_react33.useCallback)(
|
|
4672
4674
|
(event) => {
|
|
@@ -4758,7 +4760,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
|
|
|
4758
4760
|
handleChange({
|
|
4759
4761
|
target: {
|
|
4760
4762
|
name: props.name,
|
|
4761
|
-
value: formatValueString3(date, format)
|
|
4763
|
+
value: formatValueString3(date, format, locale)
|
|
4762
4764
|
}
|
|
4763
4765
|
});
|
|
4764
4766
|
setAnchorEl(null);
|
|
@@ -4766,7 +4768,8 @@ var MonthPicker = (0, import_react33.forwardRef)(
|
|
|
4766
4768
|
minDate: minDate ? new Date(minDate) : void 0,
|
|
4767
4769
|
maxDate: maxDate ? new Date(maxDate) : void 0,
|
|
4768
4770
|
disableFuture,
|
|
4769
|
-
disablePast
|
|
4771
|
+
disablePast,
|
|
4772
|
+
locale
|
|
4770
4773
|
}
|
|
4771
4774
|
), /* @__PURE__ */ import_react33.default.createElement(
|
|
4772
4775
|
DialogActions_default,
|
package/dist/index.js
CHANGED
|
@@ -782,8 +782,11 @@ var getCalendarDates = (date) => {
|
|
|
782
782
|
var getYearName = (date, locale) => {
|
|
783
783
|
return date.toLocaleString(locale, { year: "numeric" });
|
|
784
784
|
};
|
|
785
|
-
var getMonthName = (date, locale) => {
|
|
786
|
-
return date.toLocaleString(locale, {
|
|
785
|
+
var getMonthName = (date, locale, options) => {
|
|
786
|
+
return date.toLocaleString(locale, {
|
|
787
|
+
month: "long",
|
|
788
|
+
...options?.hideYear ? {} : { year: "numeric" }
|
|
789
|
+
});
|
|
787
790
|
};
|
|
788
791
|
var getMonthNameFromIndex = (index, locale) => {
|
|
789
792
|
return new Date(0, index).toLocaleString(locale, { month: "short" });
|
|
@@ -4559,13 +4562,10 @@ var MonthPickerRoot = styled20("div", {
|
|
|
4559
4562
|
})({
|
|
4560
4563
|
width: "100%"
|
|
4561
4564
|
});
|
|
4562
|
-
|
|
4563
|
-
return new Intl.DateTimeFormat("en-US", { month: "long" }).format(date);
|
|
4564
|
-
}
|
|
4565
|
-
var formatValueString3 = (date, format) => {
|
|
4565
|
+
var formatValueString3 = (date, format, locale = "default") => {
|
|
4566
4566
|
const year = date.getFullYear().toString();
|
|
4567
4567
|
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
|
4568
|
-
const monthName =
|
|
4568
|
+
const monthName = getMonthName(date, locale, { hideYear: true });
|
|
4569
4569
|
const day = "01";
|
|
4570
4570
|
return format.replace(/MMMM/g, monthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year);
|
|
4571
4571
|
};
|
|
@@ -4617,6 +4617,7 @@ var MonthPicker = forwardRef9(
|
|
|
4617
4617
|
format = "YYYY/MM/DD",
|
|
4618
4618
|
displayFormat = "YYYY/MM",
|
|
4619
4619
|
size,
|
|
4620
|
+
locale,
|
|
4620
4621
|
...innerProps
|
|
4621
4622
|
} = props;
|
|
4622
4623
|
const innerRef = useRef6(null);
|
|
@@ -4631,7 +4632,7 @@ var MonthPicker = forwardRef9(
|
|
|
4631
4632
|
{ disableStrict: true }
|
|
4632
4633
|
);
|
|
4633
4634
|
const [displayValue, setDisplayValue] = useState9(
|
|
4634
|
-
() => value ? formatValueString3(parseDate3(value, format), displayFormat) : ""
|
|
4635
|
+
() => value ? formatValueString3(parseDate3(value, format), displayFormat, locale) : ""
|
|
4635
4636
|
);
|
|
4636
4637
|
const [anchorEl, setAnchorEl] = useState9(null);
|
|
4637
4638
|
const open = Boolean(anchorEl);
|
|
@@ -4650,7 +4651,8 @@ var MonthPicker = forwardRef9(
|
|
|
4650
4651
|
}
|
|
4651
4652
|
const formattedValue = formatValueString3(
|
|
4652
4653
|
parseDate3(value, format),
|
|
4653
|
-
displayFormat
|
|
4654
|
+
displayFormat,
|
|
4655
|
+
locale
|
|
4654
4656
|
);
|
|
4655
4657
|
setDisplayValue(formattedValue);
|
|
4656
4658
|
}, [displayFormat, format, value]);
|
|
@@ -4658,11 +4660,11 @@ var MonthPicker = forwardRef9(
|
|
|
4658
4660
|
(event) => {
|
|
4659
4661
|
const value2 = event.target.value;
|
|
4660
4662
|
setDisplayValue(
|
|
4661
|
-
value2 ? formatValueString3(parseDate3(value2, format), displayFormat) : value2
|
|
4663
|
+
value2 ? formatValueString3(parseDate3(value2, format), displayFormat, locale) : value2
|
|
4662
4664
|
);
|
|
4663
4665
|
setValue(value2);
|
|
4664
4666
|
},
|
|
4665
|
-
[displayFormat, format, setValue]
|
|
4667
|
+
[displayFormat, format, setValue, locale]
|
|
4666
4668
|
);
|
|
4667
4669
|
const handleCalendarToggle = useCallback11(
|
|
4668
4670
|
(event) => {
|
|
@@ -4754,7 +4756,7 @@ var MonthPicker = forwardRef9(
|
|
|
4754
4756
|
handleChange({
|
|
4755
4757
|
target: {
|
|
4756
4758
|
name: props.name,
|
|
4757
|
-
value: formatValueString3(date, format)
|
|
4759
|
+
value: formatValueString3(date, format, locale)
|
|
4758
4760
|
}
|
|
4759
4761
|
});
|
|
4760
4762
|
setAnchorEl(null);
|
|
@@ -4762,7 +4764,8 @@ var MonthPicker = forwardRef9(
|
|
|
4762
4764
|
minDate: minDate ? new Date(minDate) : void 0,
|
|
4763
4765
|
maxDate: maxDate ? new Date(maxDate) : void 0,
|
|
4764
4766
|
disableFuture,
|
|
4765
|
-
disablePast
|
|
4767
|
+
disablePast,
|
|
4768
|
+
locale
|
|
4766
4769
|
}
|
|
4767
4770
|
), /* @__PURE__ */ React31.createElement(
|
|
4768
4771
|
DialogActions_default,
|