pds-dev-kit-web-test 2.5.628 โ 2.5.630
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/src/common/services/i18n/resources/en.json +14 -14
- package/dist/src/common/styles/scroll/scrollbarStyle.d.ts +2 -0
- package/dist/src/common/styles/scroll/scrollbarStyle.js +4 -3
- package/dist/src/core/pricing/translator.js +8 -7
- package/dist/src/core/pricing/types.js +1 -1
- package/dist/src/desktop/components/AdminList/AdminList.d.ts +10 -1
- package/dist/src/desktop/components/AdminList/AdminList.js +2 -2
- package/dist/src/desktop/components/AdminList/HeaderRow.d.ts +10 -1
- package/dist/src/desktop/components/AdminList/HeaderRow.js +2 -2
- package/dist/src/desktop/components/AdminListHeader/AdminListHeader.d.ts +2 -1
- package/dist/src/desktop/components/AdminListHeader/AdminListHeader.js +2 -2
- package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts +2 -1
- package/dist/src/desktop/components/AdminListHeader/HeaderBar.js +2 -2
- package/dist/src/desktop/components/BoxItem/BoxItem.js +1 -1
- package/dist/src/desktop/components/Calendar/Calendar.js +51 -46
- package/dist/src/desktop/components/Calendar/CalendarContext.d.ts +1 -3
- package/dist/src/desktop/components/Calendar/CalendarContext.js +1 -2
- package/dist/src/desktop/components/Calendar/DailyView.d.ts +2 -8
- package/dist/src/desktop/components/Calendar/DailyView.js +7 -88
- package/dist/src/desktop/components/Calendar/MonthlyView.d.ts +1 -2
- package/dist/src/desktop/components/Calendar/MonthlyView.js +6 -81
- package/dist/src/desktop/components/Calendar/WeeklyView.d.ts +0 -3
- package/dist/src/desktop/components/Calendar/WeeklyView.js +7 -113
- package/dist/src/desktop/components/Calendar/calendarUtils.js +10 -20
- package/dist/src/desktop/components/Calendar/types.d.ts +4 -8
- package/dist/src/desktop/components/TextButton/TextButton.d.ts +5 -2
- package/dist/src/desktop/components/TextButton/TextButton.js +14 -4
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js +1 -1
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js +1 -1
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js +1 -1
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js +8 -5
- package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.d.ts +2 -1
- package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js +13 -15
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/DesktopBasicModalWithTab.d.ts +3 -1
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/DesktopBasicModalWithTab.js +12 -6
- package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts +2 -1
- package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js +7 -27
- package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.d.ts +3 -1
- package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.js +11 -5
- package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.d.ts +3 -1
- package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.js +11 -4
- package/dist/src/mobile/components/BoxItem/BoxItem.js +1 -1
- package/dist/src/mobile/components/TextButton/TextButton.d.ts +5 -2
- package/dist/src/mobile/components/TextButton/TextButton.js +14 -4
- package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.d.ts +3 -1
- package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js +10 -3
- package/dist/src/sub/AdminList/AdminList/AdminList.d.ts +10 -1
- package/dist/src/sub/AdminList/AdminList/AdminList.js +2 -2
- package/dist/src/sub/AdminList/AdminList/HeaderRow.d.ts +10 -1
- package/dist/src/sub/AdminList/AdminList/HeaderRow.js +2 -2
- package/package.json +1 -1
- package/release-note.md +2 -2
@@ -37,18 +37,18 @@
|
|
37
37
|
"str_calendar_all_day": "All day",
|
38
38
|
"str_calendar_schedule_more": "{{count}} more",
|
39
39
|
"str_calendar_today": "Today",
|
40
|
-
"calendar_month_1": "
|
41
|
-
"calendar_month_2": "
|
42
|
-
"calendar_month_3": "
|
43
|
-
"calendar_month_4": "
|
40
|
+
"calendar_month_1": "Jan",
|
41
|
+
"calendar_month_2": "Feb",
|
42
|
+
"calendar_month_3": "Mar",
|
43
|
+
"calendar_month_4": "Apr",
|
44
44
|
"calendar_month_5": "May",
|
45
|
-
"calendar_month_6": "
|
46
|
-
"calendar_month_7": "
|
47
|
-
"calendar_month_8": "
|
48
|
-
"calendar_month_9": "
|
49
|
-
"calendar_month_10": "
|
50
|
-
"calendar_month_11": "
|
51
|
-
"calendar_month_12": "
|
45
|
+
"calendar_month_6": "Jun",
|
46
|
+
"calendar_month_7": "Jul",
|
47
|
+
"calendar_month_8": "Aug",
|
48
|
+
"calendar_month_9": "Sep",
|
49
|
+
"calendar_month_10": "Oct",
|
50
|
+
"calendar_month_11": "Nov",
|
51
|
+
"calendar_month_12": "Dec",
|
52
52
|
"str_fm_datetime_am": "{{hour}} AM",
|
53
53
|
"str_fm_datetime_pm": "{{hour}} PM",
|
54
54
|
"str_fm_am": "AM",
|
@@ -60,14 +60,14 @@
|
|
60
60
|
"calendar_header_weekly_same_month": "{{month}} {{startDay}} - {{endDay}}",
|
61
61
|
"calendar_header_weekly_diff_month": "{{startMonth}} {{startDay}} - {{endMonth}} {{endDay}}",
|
62
62
|
"str_calendar_yearly_header": "{{year}}",
|
63
|
-
"str_calendar_monthly_header": "{{month}}
|
64
|
-
"str_calendar_weekly_header": "{{month}}
|
63
|
+
"str_calendar_monthly_header": "{{month}}.{{year}}",
|
64
|
+
"str_calendar_weekly_header": "{{month}}.{{year}}",
|
65
65
|
"calendar_view_monthly": "Monthly",
|
66
66
|
"calendar_view_weekly": "Weekly",
|
67
67
|
"calendar_view_daily": "Daily",
|
68
68
|
"calendar_view_yearly": "Yearly",
|
69
69
|
"calendar_date_format": "{{day}} ({{dayText}})",
|
70
|
-
"str_calendar_weekly_date": "{{month}}
|
70
|
+
"str_calendar_weekly_date": "{{month}}-{{date}} {{day}}",
|
71
71
|
"str_fm_year": "Year",
|
72
72
|
"str_fm_month": "Month",
|
73
73
|
"str_fm_day": "Day",
|
@@ -1,2 +1,4 @@
|
|
1
1
|
export declare const scrollbarStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
|
2
2
|
export declare const scrollbarWithPaddingStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
|
3
|
+
export declare const scrollInvisible: import("styled-components").FlattenSimpleInterpolation;
|
4
|
+
export type ScrollVisibleType = 'hidden' | 'visible';
|
@@ -4,11 +4,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
4
4
|
return cooked;
|
5
5
|
};
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
7
|
-
exports.scrollbarWithPaddingStyle = exports.scrollbarStyle = void 0;
|
7
|
+
exports.scrollInvisible = exports.scrollbarWithPaddingStyle = exports.scrollbarStyle = void 0;
|
8
8
|
var styled_components_1 = require("styled-components");
|
9
|
-
exports.scrollbarStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"], ["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"])), function (_a) {
|
9
|
+
exports.scrollbarStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n\n scrollbar-width: auto;\n"], ["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n\n scrollbar-width: auto;\n"])), function (_a) {
|
10
10
|
var theme = _a.theme;
|
11
11
|
return theme.ui_container_scroll;
|
12
12
|
});
|
13
13
|
exports.scrollbarWithPaddingStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n\n ::-webkit-scrollbar-track {\n margin-bottom: 24px;\n margin-top: 24px;\n }\n"], ["\n ", "\n\n ::-webkit-scrollbar-track {\n margin-bottom: 24px;\n margin-top: 24px;\n }\n"])), exports.scrollbarStyle);
|
14
|
-
|
14
|
+
exports.scrollInvisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ::-webkit-scrollbar {\n background: transparent;\n display: block;\n width: 10px;\n }\n scrollbar-width: auto;\n"], ["\n ::-webkit-scrollbar {\n background: transparent;\n display: block;\n width: 10px;\n }\n scrollbar-width: auto;\n"])));
|
15
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
@@ -28,10 +28,7 @@ var PricingTranslator = /** @class */ (function () {
|
|
28
28
|
*/
|
29
29
|
PricingTranslator.currency = function (code, opts) {
|
30
30
|
var currency = types_1.CURRENCY_MAP[code];
|
31
|
-
|
32
|
-
return currency.friendlyName(opts.translation);
|
33
|
-
}
|
34
|
-
return currency.name;
|
31
|
+
return (opts === null || opts === void 0 ? void 0 : opts.friendly) ? currency.friendlyName(opts.translation) : currency.name;
|
35
32
|
};
|
36
33
|
/**
|
37
34
|
* ํฌ๋งท๋ ๊ธ์ก๊ณผ ํตํ ๋ฌธ์์ด์ ๊ฒฐํฉํฉ๋๋ค
|
@@ -43,9 +40,13 @@ var PricingTranslator = /** @class */ (function () {
|
|
43
40
|
if (PricingTranslator.isCurrencyLeading(PricingTranslator.browserLanguage)) {
|
44
41
|
return "".concat(currencyString, " ").concat(formattedAmount);
|
45
42
|
}
|
46
|
-
|
47
|
-
|
48
|
-
|
43
|
+
// KRW๋ง friendly ๋์
|
44
|
+
if (price.currency === types_1.CurrencyCode.KRW) {
|
45
|
+
return (opts === null || opts === void 0 ? void 0 : opts.friendly)
|
46
|
+
? "".concat(formattedAmount).concat(currencyString)
|
47
|
+
: "".concat(formattedAmount, " ").concat(currencyString);
|
48
|
+
}
|
49
|
+
return "".concat(formattedAmount, " ").concat(currencyString);
|
49
50
|
};
|
50
51
|
PricingTranslator.browserLanguage = null;
|
51
52
|
return PricingTranslator;
|
@@ -19,7 +19,7 @@ exports.CURRENCY_MAP = (_a = {},
|
|
19
19
|
_a[CurrencyCode.USD] = {
|
20
20
|
code: CurrencyCode.USD,
|
21
21
|
name: CurrencyCode.USD,
|
22
|
-
friendlyName:
|
22
|
+
friendlyName: function () { return CurrencyCode.USD; },
|
23
23
|
decimalDigits: 2
|
24
24
|
},
|
25
25
|
_a[CurrencyCode.JPY] = {
|
@@ -6,21 +6,30 @@ type Props = {
|
|
6
6
|
selectionMode?: 'none' | 'single' | 'multi';
|
7
7
|
headerRowMode?: 'none' | 'use';
|
8
8
|
column2HeaderText: TFunctionResult;
|
9
|
+
column2HeaderTooltipText?: TFunctionResult;
|
9
10
|
column3HeaderText?: TFunctionResult;
|
11
|
+
column3HeaderTooltipText?: TFunctionResult;
|
10
12
|
column3Width?: ColumnWidthType;
|
11
13
|
column4HeaderText?: TFunctionResult;
|
14
|
+
column4HeaderTooltipText?: TFunctionResult;
|
12
15
|
column4Width?: ColumnWidthType;
|
13
16
|
column5HeaderText?: TFunctionResult;
|
17
|
+
column5HeaderTooltipText?: TFunctionResult;
|
14
18
|
column5Width?: ColumnWidthType;
|
15
19
|
column6HeaderText?: TFunctionResult;
|
20
|
+
column6HeaderTooltipText?: TFunctionResult;
|
16
21
|
column6Width?: ColumnWidthType;
|
17
22
|
column7HeaderText?: TFunctionResult;
|
23
|
+
column7HeaderTooltipText?: TFunctionResult;
|
18
24
|
column7Width?: ColumnWidthType;
|
19
25
|
column8HeaderText?: TFunctionResult;
|
26
|
+
column8HeaderTooltipText?: TFunctionResult;
|
20
27
|
column8Width?: ColumnWidthType;
|
21
28
|
column9HeaderText?: TFunctionResult;
|
29
|
+
column9HeaderTooltipText?: TFunctionResult;
|
22
30
|
column9Width?: ColumnWidthType;
|
23
31
|
column10HeaderText?: TFunctionResult;
|
32
|
+
column10HeaderTooltipText?: TFunctionResult;
|
24
33
|
column10Width?: ColumnWidthType;
|
25
34
|
dropdownMode?: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
|
26
35
|
dropdown1Value?: AdminListDropdownValueOption;
|
@@ -83,5 +92,5 @@ type Props = {
|
|
83
92
|
/** @deprecated in 1.5.0 onClickTBtn3๋ฅผ ๋์ ์ฌ์ฉํ์ธ์. */
|
84
93
|
onClickMBtn3?: () => void;
|
85
94
|
};
|
86
|
-
declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1Value, dropdown2Value, dropdown3Value, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1HintText, dropdown2HintText, dropdown3HintText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, headerRowCheckboxName, flexibleHideInfoMode, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
|
95
|
+
declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column2HeaderTooltipText, column3HeaderText, column3HeaderTooltipText, column3Width, column4HeaderText, column4HeaderTooltipText, column4Width, column5HeaderText, column5HeaderTooltipText, column5Width, column6HeaderText, column6HeaderTooltipText, column6Width, column7HeaderText, column7HeaderTooltipText, column7Width, column8HeaderText, column8HeaderTooltipText, column8Width, column9HeaderText, column9HeaderTooltipText, column9Width, column10HeaderText, column10HeaderTooltipText, column10Width, dropdownMode, dropdown1Value, dropdown2Value, dropdown3Value, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1HintText, dropdown2HintText, dropdown3HintText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, headerRowCheckboxName, flexibleHideInfoMode, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
|
87
96
|
export default AdminList;
|
@@ -58,7 +58,7 @@ var TextLabel_1 = require("../TextLabel");
|
|
58
58
|
var BulkActionBar_1 = __importDefault(require("./BulkActionBar"));
|
59
59
|
var HeaderRow_1 = __importDefault(require("./HeaderRow"));
|
60
60
|
function AdminList(_a) {
|
61
|
-
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1Value = _a.dropdown1Value, dropdown2Value = _a.dropdown2Value, dropdown3Value = _a.dropdown3Value, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1HintText = _a.dropdown1HintText, dropdown2HintText = _a.dropdown2HintText, dropdown3HintText = _a.dropdown3HintText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, emptyText = _a.emptyText, _q = _a.scrollMode, scrollMode = _q === void 0 ? 'infinite' : _q, _r = _a.scrollVisibleType, scrollVisibleType = _r === void 0 ? 'moving' : _r, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, _s = _a.headerRowCheckboxName, headerRowCheckboxName = _s === void 0 ? 'all' : _s, _t = _a.flexibleHideInfoMode, flexibleHideInfoMode = _t === void 0 ? 'use' : _t, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect, quickActionBtn1State = _a.quickActionBtn1State, quickActionBtn2State = _a.quickActionBtn2State, quickActionBtn3State = _a.quickActionBtn3State, _u = _a.mBtnMode, mBtnMode = _u === void 0 ? 'mbtn_amount1' : _u, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
|
61
|
+
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column2HeaderTooltipText = _a.column2HeaderTooltipText, column3HeaderText = _a.column3HeaderText, column3HeaderTooltipText = _a.column3HeaderTooltipText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, column4HeaderTooltipText = _a.column4HeaderTooltipText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, column5HeaderTooltipText = _a.column5HeaderTooltipText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, column6HeaderTooltipText = _a.column6HeaderTooltipText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, column7HeaderTooltipText = _a.column7HeaderTooltipText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, column8HeaderTooltipText = _a.column8HeaderTooltipText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, column9HeaderTooltipText = _a.column9HeaderTooltipText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, column10HeaderTooltipText = _a.column10HeaderTooltipText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1Value = _a.dropdown1Value, dropdown2Value = _a.dropdown2Value, dropdown3Value = _a.dropdown3Value, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1HintText = _a.dropdown1HintText, dropdown2HintText = _a.dropdown2HintText, dropdown3HintText = _a.dropdown3HintText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, emptyText = _a.emptyText, _q = _a.scrollMode, scrollMode = _q === void 0 ? 'infinite' : _q, _r = _a.scrollVisibleType, scrollVisibleType = _r === void 0 ? 'moving' : _r, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, _s = _a.headerRowCheckboxName, headerRowCheckboxName = _s === void 0 ? 'all' : _s, _t = _a.flexibleHideInfoMode, flexibleHideInfoMode = _t === void 0 ? 'use' : _t, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect, quickActionBtn1State = _a.quickActionBtn1State, quickActionBtn2State = _a.quickActionBtn2State, quickActionBtn3State = _a.quickActionBtn3State, _u = _a.mBtnMode, mBtnMode = _u === void 0 ? 'mbtn_amount1' : _u, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
|
62
62
|
var selectAllMethods = (0, react_hook_form_1.useForm)();
|
63
63
|
var checkboxMethods = (0, react_hook_form_1.useForm)();
|
64
64
|
var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({
|
@@ -194,7 +194,7 @@ function AdminList(_a) {
|
|
194
194
|
}
|
195
195
|
}
|
196
196
|
};
|
197
|
-
return ((0, jsx_runtime_1.jsxs)(S_AdminList, __assign({ "x-pds-name": "AdminList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [isBulkActionBarOpen && ((0, jsx_runtime_1.jsx)(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1Value: dropdown1Value, dropdown2Value: dropdown2Value, dropdown3Value: dropdown3Value, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1HintText: dropdown1HintText, dropdown2HintText: dropdown2HintText, dropdown3HintText: dropdown3HintText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, tBtnMode: btnMode(), tBtn1Text: tBtn1Text || mBtn1Text, tBtn2Text: tBtn2Text || mBtn2Text, tBtn3Text: tBtn3Text || mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickTBtn1: onClickTBtn1 || onClickMBtn1, onClickTBtn2: onClickTBtn2 || onClickMBtn2, onClickTBtn3: onClickTBtn3 || onClickMBtn3 })), headerRowMode === 'use' && ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, selectAllMethods, { children: (0, jsx_runtime_1.jsx)(HeaderRowStyle, __assign({ scrollVisibleType: scrollVisibleType, scrollMode: scrollMode }, { children: (0, jsx_runtime_1.jsx)(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), flexibleHideInfoMode: flexibleHideInfoMode, onClickSelectAllCheckbox: handleSelectAllCheckbox }) })) }))), (0, jsx_runtime_1.jsx)(S_ScrollBox, __assign({ scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, { children: react_1.default.Children.count(children) ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, checkboxMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: childrenWithWidthProps }) }))) : ((0, jsx_runtime_1.jsx)(S_EmptyTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }) })) }))] })));
|
197
|
+
return ((0, jsx_runtime_1.jsxs)(S_AdminList, __assign({ "x-pds-name": "AdminList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [isBulkActionBarOpen && ((0, jsx_runtime_1.jsx)(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1Value: dropdown1Value, dropdown2Value: dropdown2Value, dropdown3Value: dropdown3Value, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1HintText: dropdown1HintText, dropdown2HintText: dropdown2HintText, dropdown3HintText: dropdown3HintText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, tBtnMode: btnMode(), tBtn1Text: tBtn1Text || mBtn1Text, tBtn2Text: tBtn2Text || mBtn2Text, tBtn3Text: tBtn3Text || mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickTBtn1: onClickTBtn1 || onClickMBtn1, onClickTBtn2: onClickTBtn2 || onClickMBtn2, onClickTBtn3: onClickTBtn3 || onClickMBtn3 })), headerRowMode === 'use' && ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, selectAllMethods, { children: (0, jsx_runtime_1.jsx)(HeaderRowStyle, __assign({ scrollVisibleType: scrollVisibleType, scrollMode: scrollMode }, { children: (0, jsx_runtime_1.jsx)(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column2HeaderTooltipText: column2HeaderTooltipText, column3HeaderText: column3HeaderText, column3HeaderTooltipText: column3HeaderTooltipText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderTooltipText: column4HeaderTooltipText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderTooltipText: column5HeaderTooltipText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderTooltipText: column6HeaderTooltipText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderTooltipText: column7HeaderTooltipText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderTooltipText: column8HeaderTooltipText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderTooltipText: column9HeaderTooltipText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderTooltipText: column10HeaderTooltipText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), flexibleHideInfoMode: flexibleHideInfoMode, onClickSelectAllCheckbox: handleSelectAllCheckbox }) })) }))), (0, jsx_runtime_1.jsx)(S_ScrollBox, __assign({ scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, { children: react_1.default.Children.count(children) ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, checkboxMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: childrenWithWidthProps }) }))) : ((0, jsx_runtime_1.jsx)(S_EmptyTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }) })) }))] })));
|
198
198
|
}
|
199
199
|
var HeaderRowStyle = styled_components_1.default.form(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
200
200
|
var scrollVisibleType = _a.scrollVisibleType;
|
@@ -4,21 +4,30 @@ type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
|
|
4
4
|
type Props = {
|
5
5
|
selectionMode: 'none' | 'single' | 'multi';
|
6
6
|
column2HeaderText?: TFunctionResult;
|
7
|
+
column2HeaderTooltipText?: TFunctionResult;
|
7
8
|
column3HeaderText?: TFunctionResult;
|
8
9
|
column3HeaderWidth?: ColumnWidthType;
|
10
|
+
column3HeaderTooltipText?: TFunctionResult;
|
9
11
|
column4HeaderText?: TFunctionResult;
|
12
|
+
column4HeaderTooltipText?: TFunctionResult;
|
10
13
|
column4HeaderWidth?: ColumnWidthType;
|
11
14
|
column5HeaderText?: TFunctionResult;
|
15
|
+
column5HeaderTooltipText?: TFunctionResult;
|
12
16
|
column5HeaderWidth?: ColumnWidthType;
|
13
17
|
column6HeaderText?: TFunctionResult;
|
18
|
+
column6HeaderTooltipText?: TFunctionResult;
|
14
19
|
column6HeaderWidth?: ColumnWidthType;
|
15
20
|
column7HeaderText?: TFunctionResult;
|
21
|
+
column7HeaderTooltipText?: TFunctionResult;
|
16
22
|
column7HeaderWidth?: ColumnWidthType;
|
17
23
|
column8HeaderText?: TFunctionResult;
|
24
|
+
column8HeaderTooltipText?: TFunctionResult;
|
18
25
|
column8HeaderWidth?: ColumnWidthType;
|
19
26
|
column9HeaderText?: TFunctionResult;
|
27
|
+
column9HeaderTooltipText?: TFunctionResult;
|
20
28
|
column9HeaderWidth?: ColumnWidthType;
|
21
29
|
column10HeaderText?: TFunctionResult;
|
30
|
+
column10HeaderTooltipText?: TFunctionResult;
|
22
31
|
column10HeaderWidth?: ColumnWidthType;
|
23
32
|
quickActionBtnType?: 'hover' | 'fix';
|
24
33
|
quickActionButtonCount?: number;
|
@@ -26,5 +35,5 @@ type Props = {
|
|
26
35
|
flexibleHideInfoMode?: 'use' | 'none';
|
27
36
|
onClickSelectAllCheckbox?: () => void;
|
28
37
|
};
|
29
|
-
declare function HeaderRow({ selectionMode, column2HeaderText, column3HeaderText, column3HeaderWidth, column4HeaderText, column4HeaderWidth, column5HeaderText, column5HeaderWidth, column6HeaderText, column6HeaderWidth, column7HeaderText, column7HeaderWidth, column8HeaderText, column8HeaderWidth, column9HeaderText, column9HeaderWidth, column10HeaderText, column10HeaderWidth, quickActionBtnType, quickActionButtonCount, headerRowCheckboxName, flexibleHideInfoMode, onClickSelectAllCheckbox }: Props): JSX.Element;
|
38
|
+
declare function HeaderRow({ selectionMode, column2HeaderText, column2HeaderTooltipText, column3HeaderText, column3HeaderTooltipText, column3HeaderWidth, column4HeaderText, column4HeaderTooltipText, column4HeaderWidth, column5HeaderText, column5HeaderTooltipText, column5HeaderWidth, column6HeaderText, column6HeaderTooltipText, column6HeaderWidth, column7HeaderText, column7HeaderTooltipText, column7HeaderWidth, column8HeaderText, column8HeaderTooltipText, column8HeaderWidth, column9HeaderText, column9HeaderTooltipText, column9HeaderWidth, column10HeaderText, column10HeaderTooltipText, column10HeaderWidth, quickActionBtnType, quickActionButtonCount, headerRowCheckboxName, flexibleHideInfoMode, onClickSelectAllCheckbox }: Props): JSX.Element;
|
30
39
|
export default HeaderRow;
|
@@ -44,8 +44,8 @@ var hybrid_1 = require("../../../hybrid");
|
|
44
44
|
var Checkbox_1 = require("../Checkbox");
|
45
45
|
var TextLabel_1 = require("../TextLabel");
|
46
46
|
function HeaderRow(_a) {
|
47
|
-
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, _o = _a.headerRowCheckboxName, headerRowCheckboxName = _o === void 0 ? 'all' : _o, _p = _a.flexibleHideInfoMode, flexibleHideInfoMode = _p === void 0 ? 'use' : _p, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
|
48
|
-
return ((0, jsx_runtime_1.jsxs)(S_HeaderRow, __assign({ flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }), selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_CheckBox, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: headerRowCheckboxName, onChange: onClickSelectAllCheckbox }) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_FlexColumn, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }), column3HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column3HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column4HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column4HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column5HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column5HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column6HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column6HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column7HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column7HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column8HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column8HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column9HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column9HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column10HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column10HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" }), quickActionBtnType === 'fix' && quickActionButtonCount > 0 && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, { children: Array(quickActionButtonCount)
|
47
|
+
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, column2HeaderText = _a.column2HeaderText, column2HeaderTooltipText = _a.column2HeaderTooltipText, column3HeaderText = _a.column3HeaderText, column3HeaderTooltipText = _a.column3HeaderTooltipText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, column4HeaderTooltipText = _a.column4HeaderTooltipText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, column5HeaderTooltipText = _a.column5HeaderTooltipText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, column6HeaderTooltipText = _a.column6HeaderTooltipText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, column7HeaderTooltipText = _a.column7HeaderTooltipText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, column8HeaderTooltipText = _a.column8HeaderTooltipText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, column9HeaderTooltipText = _a.column9HeaderTooltipText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, column10HeaderTooltipText = _a.column10HeaderTooltipText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, _o = _a.headerRowCheckboxName, headerRowCheckboxName = _o === void 0 ? 'all' : _o, _p = _a.flexibleHideInfoMode, flexibleHideInfoMode = _p === void 0 ? 'use' : _p, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
|
48
|
+
return ((0, jsx_runtime_1.jsxs)(S_HeaderRow, __assign({ flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }), selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_CheckBox, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: headerRowCheckboxName, onChange: onClickSelectAllCheckbox }) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_FlexColumn, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column2HeaderTooltipText }) }), column3HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column3HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column3HeaderTooltipText }) }))), column4HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column4HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column4HeaderTooltipText }) }))), column5HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column5HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column5HeaderTooltipText }) }))), column6HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column6HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column6HeaderTooltipText }) }))), column7HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column7HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column7HeaderTooltipText }) }))), column8HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column8HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column8HeaderTooltipText }) }))), column9HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column9HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column9HeaderTooltipText }) }))), column10HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column10HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column10HeaderTooltipText }) }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" }), quickActionBtnType === 'fix' && quickActionButtonCount > 0 && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, { children: Array(quickActionButtonCount)
|
49
49
|
.fill(0)
|
50
50
|
.map(function (el, i) { return ((0, jsx_runtime_1.jsx)(S_EmptyDiv, {}, "".concat(el).concat(i))); }) }))] })));
|
51
51
|
}
|
@@ -4,6 +4,7 @@ import type { TFunctionResult } from 'i18next';
|
|
4
4
|
type Props = {
|
5
5
|
headerBarSize?: 'regular' | 'small';
|
6
6
|
headerBarTitleText?: TFunctionResult;
|
7
|
+
tooltipText?: TFunctionResult;
|
7
8
|
currentPage?: number;
|
8
9
|
totalPage?: number;
|
9
10
|
contentText?: TFunctionResult;
|
@@ -16,5 +17,5 @@ type Props = {
|
|
16
17
|
/** @deprecated v1.5 totalPage๋ฅผ ๋ฐ์์ค๊ธฐ ๋๋ฌธ์ deprecated ๋ ์์ ์
๋๋ค. */
|
17
18
|
itemCountUnit?: number;
|
18
19
|
};
|
19
|
-
declare function AdminListHeader({ headerBarSize, headerBarTitleText, itemCountUnit, currentPage, totalPage, contentText, filterBar, dropdownTextArray, dropdownDefaultValue, onChangeCount, onClickNextButton, onClickPrevButton }: Props): JSX.Element;
|
20
|
+
declare function AdminListHeader({ headerBarSize, headerBarTitleText, tooltipText, itemCountUnit, currentPage, totalPage, contentText, filterBar, dropdownTextArray, dropdownDefaultValue, onChangeCount, onClickNextButton, onClickPrevButton }: Props): JSX.Element;
|
20
21
|
export default AdminListHeader;
|
@@ -42,12 +42,12 @@ var defaultPaginationTextArray = [
|
|
42
42
|
}
|
43
43
|
];
|
44
44
|
function AdminListHeader(_a) {
|
45
|
-
var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText,
|
45
|
+
var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, tooltipText = _a.tooltipText,
|
46
46
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
47
47
|
_c = _a.itemCountUnit,
|
48
48
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
49
49
|
itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginationTextArray : _f, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
|
50
|
-
return ((0, jsx_runtime_1.jsxs)(S_AdminListHeader, __assign({ "x-pds-name": "AdminListHeader", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }), headerBarTitleText && !contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), headerBarTitleText && contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), contentText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }) }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), filterBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_FilterBarWrapper, { children: filterBar }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }))] })));
|
50
|
+
return ((0, jsx_runtime_1.jsxs)(S_AdminListHeader, __assign({ "x-pds-name": "AdminListHeader", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(HeaderBar_1.default, { titleText: headerBarTitleText, tooltipText: tooltipText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }), headerBarTitleText && !contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), headerBarTitleText && contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), contentText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }) }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), filterBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_FilterBarWrapper, { children: filterBar }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }))] })));
|
51
51
|
}
|
52
52
|
var S_AdminListHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
53
53
|
var S_ContentTextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
|
@@ -3,6 +3,7 @@ import type { AdminListDropdownValueOption } from '../../../common/types';
|
|
3
3
|
import type { TFunctionResult } from 'i18next';
|
4
4
|
type Props = {
|
5
5
|
titleText?: TFunctionResult;
|
6
|
+
tooltipText?: TFunctionResult;
|
6
7
|
size?: 'regular' | 'small';
|
7
8
|
currentPage?: number;
|
8
9
|
totalPage?: number;
|
@@ -12,5 +13,5 @@ type Props = {
|
|
12
13
|
onClickIBtn1?: () => void;
|
13
14
|
onClickIBtn2?: () => void;
|
14
15
|
};
|
15
|
-
declare function HeaderBar({ titleText, size, currentPage, totalPage, dropdownTextArray, dropdownDefaultValue, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
|
16
|
+
declare function HeaderBar({ titleText, tooltipText, size, currentPage, totalPage, dropdownTextArray, dropdownDefaultValue, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
|
16
17
|
export default HeaderBar;
|
@@ -46,14 +46,14 @@ var Dropdown_1 = require("../Dropdown");
|
|
46
46
|
var IconButton_1 = require("../IconButton");
|
47
47
|
var TextLabel_1 = require("../TextLabel");
|
48
48
|
function HeaderBar(_a) {
|
49
|
-
var titleText = _a.titleText, _b = _a.size, size = _b === void 0 ? 'regular' : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.totalPage, totalPage = _d === void 0 ? 1 : _d, dropdownTextArray = _a.dropdownTextArray, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
|
49
|
+
var titleText = _a.titleText, tooltipText = _a.tooltipText, _b = _a.size, size = _b === void 0 ? 'regular' : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.totalPage, totalPage = _d === void 0 ? 1 : _d, dropdownTextArray = _a.dropdownTextArray, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
|
50
50
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
51
51
|
var handleDropdown = function (option) {
|
52
52
|
if (onChangeDropdown) {
|
53
53
|
onChangeDropdown(option);
|
54
54
|
}
|
55
55
|
};
|
56
|
-
return ((0, jsx_runtime_1.jsxs)(S_HeaderBar, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_HeaderTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: size === 'regular' ? 'headingBold' : 'body1Bold' }) }), (0, jsx_runtime_1.jsxs)(S_HeaderControl, { children: [(0, jsx_runtime_1.jsxs)(S_ListCount, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_rows_per_page'), styleTheme: "caption1Regular" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { customWidth: "88px", size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })] }), (0, jsx_runtime_1.jsxs)(S_Page, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: totalPage, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })] }), (0, jsx_runtime_1.jsxs)(S_IconButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn1 })] })] })] })));
|
56
|
+
return ((0, jsx_runtime_1.jsxs)(S_HeaderBar, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_HeaderTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, tooltipText: tooltipText, styleTheme: size === 'regular' ? 'headingBold' : 'body1Bold' }) }), (0, jsx_runtime_1.jsxs)(S_HeaderControl, { children: [(0, jsx_runtime_1.jsxs)(S_ListCount, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_rows_per_page'), styleTheme: "caption1Regular" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { customWidth: "88px", size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })] }), (0, jsx_runtime_1.jsxs)(S_Page, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: totalPage, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })] }), (0, jsx_runtime_1.jsxs)(S_IconButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn1 })] })] })] })));
|
57
57
|
}
|
58
58
|
var regular = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 40px;\n"], ["\n height: 40px;\n"])));
|
59
59
|
var small = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n"], ["\n height: 40px;\n"])));
|
@@ -91,7 +91,7 @@ function BoxItem(_a) {
|
|
91
91
|
justifyContent: 'space-between',
|
92
92
|
maxWidth: '100%',
|
93
93
|
cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
|
94
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? '
|
94
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
95
95
|
(chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state, onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state, onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
|
96
96
|
}
|
97
97
|
var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
|
@@ -44,9 +44,27 @@ var WeeklyView_1 = require("./WeeklyView");
|
|
44
44
|
var YearlyView_1 = require("./YearlyView");
|
45
45
|
var Calendar = function (_a) {
|
46
46
|
var _b;
|
47
|
-
var _c = _a.defaultViewType, defaultViewType = _c === void 0 ? '
|
47
|
+
var _c = _a.defaultViewType, defaultViewType = _c === void 0 ? 'MONTHLY' : _c, _d = _a.viewTypes, viewTypes = _d === void 0 ? ['MONTHLY', 'WEEKLY', 'DAILY', 'YEARLY'] : _d, _e = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _e === void 0 ? 'none' : _e, _f = _a.startOfWeek, startOfWeek = _f === void 0 ? 'sunday' : _f, _g = _a.todayBtnMode, todayBtnMode = _g === void 0 ? 'use' : _g, _h = _a.schedules, schedules = _h === void 0 ? [] : _h, config = _a.config, onActionDispatch = _a.onActionDispatch;
|
48
|
+
// ๋ค๊ตญ์ด ํค๋ฅผ CalendarViewType์ผ๋ก ๋งคํํ๋ ํจ์
|
49
|
+
var mapI18nKeyToViewType = function (key) {
|
50
|
+
switch (key) {
|
51
|
+
case 'str_fm_month':
|
52
|
+
return 'MONTHLY';
|
53
|
+
case 'str_fm_week':
|
54
|
+
return 'WEEKLY';
|
55
|
+
case 'str_fm_day':
|
56
|
+
return 'DAILY';
|
57
|
+
case 'str_fm_year':
|
58
|
+
return 'YEARLY';
|
59
|
+
default:
|
60
|
+
return key;
|
61
|
+
}
|
62
|
+
};
|
63
|
+
// ๋ค๊ตญ์ด ํค๋ฅผ ๋ฐ์์ ๋ด๋ถ์ ์ผ๋ก ๋งคํ
|
64
|
+
var actualDefaultViewType = mapI18nKeyToViewType(defaultViewType);
|
65
|
+
var actualViewTypes = viewTypes.map(mapI18nKeyToViewType);
|
48
66
|
var t = (0, react_i18next_1.useTranslation)().t;
|
49
|
-
var _j = (0, react_1.useState)(
|
67
|
+
var _j = (0, react_1.useState)(actualDefaultViewType), currentViewType = _j[0], setCurrentViewType = _j[1];
|
50
68
|
var _k = (0, react_1.useState)(new Date()), selectedDate = _k[0], setSelectedDate = _k[1];
|
51
69
|
var _l = (0, react_1.useState)(null), dragStartDate = _l[0], setDragStartDate = _l[1];
|
52
70
|
var _m = (0, react_1.useState)(null), dragEndDate = _m[0], setDragEndDate = _m[1];
|
@@ -97,13 +115,13 @@ var Calendar = function (_a) {
|
|
97
115
|
var increment = direction === 'next' ? 1 : -1;
|
98
116
|
var getNewDateByViewType = function (viewType) {
|
99
117
|
switch (viewType) {
|
100
|
-
case '
|
118
|
+
case 'DAILY':
|
101
119
|
return dateHelper_1.DateHelper.addDays(selectedDate, increment);
|
102
|
-
case '
|
120
|
+
case 'WEEKLY':
|
103
121
|
return dateHelper_1.DateHelper.addDays(selectedDate, increment * 7);
|
104
|
-
case '
|
122
|
+
case 'MONTHLY':
|
105
123
|
return dateHelper_1.DateHelper.addMonths(selectedDate, increment);
|
106
|
-
case '
|
124
|
+
case 'YEARLY':
|
107
125
|
return new Date(selectedDate.getFullYear() + increment, selectedDate.getMonth(), selectedDate.getDate());
|
108
126
|
default:
|
109
127
|
return selectedDate;
|
@@ -175,21 +193,6 @@ var Calendar = function (_a) {
|
|
175
193
|
setDragStartDate(null);
|
176
194
|
setDragEndDate(null);
|
177
195
|
}, [isDragging, dragStartDate, dragEndDate]);
|
178
|
-
// ๋ ์ง ๋๋๊ทธ ์ด๋ฒคํธ ์ฒ๋ฆฌ
|
179
|
-
var handleDateDrag = (0, react_1.useCallback)(function (action) {
|
180
|
-
var _a, _b;
|
181
|
-
if (action.action === 'DRAG' && action.target === 'DATE') {
|
182
|
-
// ์ ํ๋ ์ค์ผ์ค๋ค์ selectedSchedules state์ ๋ฐ์
|
183
|
-
if (action.schedules && action.schedules.length > 0) {
|
184
|
-
setSelectedSchedules(action.schedules);
|
185
|
-
}
|
186
|
-
else {
|
187
|
-
setSelectedSchedules([]);
|
188
|
-
}
|
189
|
-
// ์๋ config.DATE.DRAG ์ฝ๋ฐฑ์ด ์๋ค๋ฉด ํธ์ถ
|
190
|
-
(_b = (_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.DRAG) === null || _b === void 0 ? void 0 : _b.call(_a, action);
|
191
|
-
}
|
192
|
-
}, [config]);
|
193
196
|
// ์ด๋ฒคํธ ๋๋๊ทธ ํธ๋ค๋ฌ
|
194
197
|
var handleScheduleDragStart = (0, react_1.useCallback)(function (schedule, e) {
|
195
198
|
setDraggedSchedule(schedule);
|
@@ -221,24 +224,20 @@ var Calendar = function (_a) {
|
|
221
224
|
}, []);
|
222
225
|
// ์ญ์ ํค ์ด๋ฒคํธ ์ฒ๋ฆฌ
|
223
226
|
var handleKeyDown = (0, react_1.useCallback)(function (e) {
|
224
|
-
var _a, _b;
|
225
|
-
if (
|
226
|
-
|
227
|
-
|
228
|
-
(
|
227
|
+
var _a, _b, _c;
|
228
|
+
if (e.key === 'Backspace' &&
|
229
|
+
selectedSchedules.length > 0 &&
|
230
|
+
((_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.DELETE_KEY_DOWN)) {
|
231
|
+
(_c = (_b = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _b === void 0 ? void 0 : _b.DELETE_KEY_DOWN) === null || _c === void 0 ? void 0 : _c.call(_b, {
|
229
232
|
action: 'DELETE_KEY_DOWN',
|
230
233
|
target: 'SCHEDULE',
|
231
234
|
schedules: selectedSchedules,
|
232
235
|
startDate: (0, calendarUtils_1.toUTC)(startDate),
|
233
236
|
endDate: (0, calendarUtils_1.toUTC)(endDate)
|
234
237
|
});
|
235
|
-
// ํญ์ ์ ํ๋ ์ค์ผ์ค๋ค ํด์
|
236
238
|
setSelectedSchedules([]);
|
237
|
-
setSelectedDates([]);
|
238
|
-
// ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ๋์ ๋ฐฉ์ง (๋ค๋ก๊ฐ๊ธฐ ๋ฑ)
|
239
|
-
e.preventDefault();
|
240
239
|
}
|
241
|
-
}, [config, selectedSchedules
|
240
|
+
}, [config, selectedSchedules]);
|
242
241
|
// ๋ ์ง ๋๋๊ทธ ๋๊ธฐ
|
243
242
|
var handleDateDrop = (0, react_1.useCallback)(function (date, e) {
|
244
243
|
var _a, _b, _c;
|
@@ -254,7 +253,7 @@ var Calendar = function (_a) {
|
|
254
253
|
var duration = originalEndDate.getTime() - originalStartDate.getTime();
|
255
254
|
var getAdjustedStartDate = function () {
|
256
255
|
var baseDate = new Date(date);
|
257
|
-
if (currentViewType === '
|
256
|
+
if (currentViewType === 'MONTHLY') {
|
258
257
|
var target = e.target;
|
259
258
|
var gridContainer = target.closest('[data-calendar-grid]');
|
260
259
|
if (gridContainer) {
|
@@ -300,11 +299,17 @@ var Calendar = function (_a) {
|
|
300
299
|
};
|
301
300
|
// ๋ทฐ ํ์
์ ์ํ ๋๋กญ๋ค์ด ์ต์
์์ฑ
|
302
301
|
var viewTypeOptions = (0, react_1.useMemo)(function () {
|
303
|
-
|
304
|
-
|
302
|
+
var viewTypeTextMap = {
|
303
|
+
MONTHLY: t('str_fm_month'),
|
304
|
+
WEEKLY: t('str_fm_week'),
|
305
|
+
DAILY: t('str_fm_day'),
|
306
|
+
YEARLY: t('str_fm_year')
|
307
|
+
};
|
308
|
+
return actualViewTypes.map(function (viewType) { return ({
|
309
|
+
text: viewTypeTextMap[viewType] || viewType,
|
305
310
|
value: viewType
|
306
311
|
}); });
|
307
|
-
}, [
|
312
|
+
}, [actualViewTypes, t]);
|
308
313
|
// ํน์ ์์ ์บ๋ฆฐ๋ ๋ ์ง ์์ฑ (์ฐ๊ฐ ๋ณด๊ธฐ์ฉ)
|
309
314
|
var getMonthDates = (0, react_1.useCallback)(function (year, month) {
|
310
315
|
var monthDate = new Date(year, month, 1);
|
@@ -345,14 +350,14 @@ var Calendar = function (_a) {
|
|
345
350
|
};
|
346
351
|
// ์ฃผ๊ฐ ๋ทฐ๋ก ์ ํํ๋ ํธ๋ค๋ฌ
|
347
352
|
var handleSwitchToWeeklyView = (0, react_1.useCallback)(function (date) {
|
348
|
-
setCurrentViewType('
|
353
|
+
setCurrentViewType('WEEKLY');
|
349
354
|
setSelectedDate(date);
|
350
355
|
// ์ฃผ๊ฐ ๋ทฐ๋ก ์ ํํ ๋์ startDate์ endDate ๊ณ์ฐ
|
351
|
-
var _a = (0, calendarUtils_1.calculateDateRange)('
|
356
|
+
var _a = (0, calendarUtils_1.calculateDateRange)('WEEKLY', date), newStartDate = _a.startDate, newEndDate = _a.endDate;
|
352
357
|
onActionDispatch === null || onActionDispatch === void 0 ? void 0 : onActionDispatch({
|
353
358
|
type: 'CALENDAR_TYPE_CHANGE',
|
354
359
|
payload: {
|
355
|
-
type: '
|
360
|
+
type: 'WEEKLY',
|
356
361
|
startDate: (0, calendarUtils_1.toUTC)(newStartDate),
|
357
362
|
endDate: (0, calendarUtils_1.toUTC)(newEndDate)
|
358
363
|
}
|
@@ -361,13 +366,13 @@ var Calendar = function (_a) {
|
|
361
366
|
// ๋ทฐ ํ์
์ ๋ฐ๋ฅธ ์บ๋ฆฐ๋ ์ฝํ
์ธ ๋ ๋๋ง
|
362
367
|
var renderCalendarContent = function () {
|
363
368
|
switch (currentViewType) {
|
364
|
-
case '
|
365
|
-
return ((0, jsx_runtime_1.jsx)(MonthlyView_1.MonthlyView, { getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, selectedDate: selectedDate, selectedDates: selectedDates, dragStartDate: dragStartDate, selectedSchedules: selectedSchedules, dragEndDate: dragEndDate, isDragOverDate: isDragOverDate, schedules: schedules, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, handleMouseUp: handleMouseUp, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, onSwitchToWeeklyView: handleSwitchToWeeklyView
|
366
|
-
case '
|
367
|
-
return (0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { startOfWeek: startOfWeek
|
368
|
-
case '
|
369
|
-
return (0, jsx_runtime_1.jsx)(DailyView_1.DailyView, {
|
370
|
-
case '
|
369
|
+
case 'MONTHLY':
|
370
|
+
return ((0, jsx_runtime_1.jsx)(MonthlyView_1.MonthlyView, { getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, selectedDate: selectedDate, selectedDates: selectedDates, dragStartDate: dragStartDate, selectedSchedules: selectedSchedules, dragEndDate: dragEndDate, isDragOverDate: isDragOverDate, schedules: schedules, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, handleMouseUp: handleMouseUp, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, onSwitchToWeeklyView: handleSwitchToWeeklyView }));
|
371
|
+
case 'WEEKLY':
|
372
|
+
return (0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { startOfWeek: startOfWeek });
|
373
|
+
case 'DAILY':
|
374
|
+
return (0, jsx_runtime_1.jsx)(DailyView_1.DailyView, {});
|
375
|
+
case 'YEARLY':
|
371
376
|
return ((0, jsx_runtime_1.jsx)(YearlyView_1.YearlyView, { selectedDate: selectedDate, getMonthDates: getMonthDates, getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, isToday: isToday, handleDateClick: handleDateClick, getSchedulesForDate: getSchedulesForDate }));
|
372
377
|
default:
|
373
378
|
return null;
|
@@ -379,7 +384,7 @@ var Calendar = function (_a) {
|
|
379
384
|
// ์ค์ผ์ค ๊ด๋ จ
|
380
385
|
selectedSchedules: selectedSchedules, isDraggable: isDraggable, handleScheduleClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd,
|
381
386
|
// ๋ ์ง ๊ด๋ จ
|
382
|
-
handleDateClick: handleDateClick,
|
387
|
+
handleDateClick: handleDateClick, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop,
|
383
388
|
// ์ ํธ๋ฆฌํฐ ํจ์
|
384
389
|
getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, getDayTextByDate: getDayTextByDate,
|
385
390
|
// ์ํ๊ฐ
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import type { Schedule, displayAllDayScheduleMode
|
2
|
+
import type { Schedule, displayAllDayScheduleMode } from './types';
|
3
3
|
export interface ScheduleItemExtraProps {
|
4
4
|
onDragStart?: (e: React.DragEvent) => void;
|
5
5
|
onDragEnd?: () => void;
|
@@ -14,7 +14,6 @@ interface CalendarContextValue {
|
|
14
14
|
handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
|
15
15
|
handleScheduleDragEnd: () => void;
|
16
16
|
handleDateClick: (date: Date, e: React.MouseEvent) => void;
|
17
|
-
handleDateDrag: (action: Action) => void;
|
18
17
|
handleDateDragOver: (date: Date, e: React.DragEvent) => void;
|
19
18
|
handleDateDragLeave: () => void;
|
20
19
|
handleDateDrop: (date: Date, e: React.DragEvent) => void;
|
@@ -37,7 +36,6 @@ interface CalendarProviderProps {
|
|
37
36
|
handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
|
38
37
|
handleScheduleDragEnd: () => void;
|
39
38
|
handleDateClick: (date: Date, e: React.MouseEvent) => void;
|
40
|
-
handleDateDrag: (action: Action) => void;
|
41
39
|
handleDateDragOver: (date: Date, e: React.DragEvent) => void;
|
42
40
|
handleDateDragLeave: () => void;
|
43
41
|
handleDateDrop: (date: Date, e: React.DragEvent) => void;
|
@@ -30,7 +30,7 @@ var CalendarProvider = function (_a) {
|
|
30
30
|
// ์ค์ผ์ค ๊ด๋ จ
|
31
31
|
selectedSchedules = _a.selectedSchedules, isDraggable = _a.isDraggable, handleScheduleClick = _a.handleScheduleClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd,
|
32
32
|
// ๋ ์ง ๊ด๋ จ
|
33
|
-
handleDateClick = _a.handleDateClick,
|
33
|
+
handleDateClick = _a.handleDateClick, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop,
|
34
34
|
// ์ ํธ๋ฆฌํฐ ํจ์
|
35
35
|
getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isPastDate = _a.isPastDate, getDayTextByDate = _a.getDayTextByDate,
|
36
36
|
// ์ํ๊ฐ
|
@@ -56,7 +56,6 @@ var CalendarProvider = function (_a) {
|
|
56
56
|
handleScheduleDragEnd: handleScheduleDragEnd,
|
57
57
|
// ๋ ์ง ์ด๋ฒคํธ ํธ๋ค๋ฌ
|
58
58
|
handleDateClick: handleDateClick,
|
59
|
-
handleDateDrag: handleDateDrag,
|
60
59
|
handleDateDragOver: handleDateDragOver,
|
61
60
|
handleDateDragLeave: handleDateDragLeave,
|
62
61
|
handleDateDrop: handleDateDrop,
|