pds-dev-kit-web 2.2.223 → 2.2.225
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/styles/theme.d.ts +0 -1
- package/dist/src/common/styles/theme.js +1 -1
- package/dist/src/desktop/components/AdminList/AdminList.js +30 -1
- package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +1 -0
- package/dist/src/desktop/components/AdminListItem/AdminListItem.js +9 -3
- package/dist/src/desktop/components/RichTextEditor/RichTextEditor.js +5 -26
- package/dist/src/mobile/components/RichTextEditor/RichTextEditor.js +5 -26
- package/dist/src/sub/AdminList/AdminList/AdminList.js +30 -0
- package/dist/src/sub/AdminList/AdminListItem/AdminListItem.d.ts +2 -0
- package/dist/src/sub/AdminList/AdminListItem/AdminListItem.js +15 -5
- package/package.json +1 -1
- package/release-note.md +2 -3
|
@@ -113,5 +113,4 @@ export declare const language = "ko";
|
|
|
113
113
|
declare const theme: DefaultTheme;
|
|
114
114
|
type ToneType = 'DARK' | 'LIGHT';
|
|
115
115
|
export declare const themeByGivenTone: (tone: ToneType) => any;
|
|
116
|
-
export type AppTheme = ReturnType<typeof themeByGivenTone>;
|
|
117
116
|
export default theme;
|
|
@@ -125,6 +125,6 @@ exports.spacing = {
|
|
|
125
125
|
};
|
|
126
126
|
exports.language = 'ko';
|
|
127
127
|
var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
|
|
128
|
-
var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language
|
|
128
|
+
var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language })); };
|
|
129
129
|
exports.themeByGivenTone = themeByGivenTone;
|
|
130
130
|
exports.default = theme;
|
|
@@ -169,9 +169,38 @@ function AdminList(_a) {
|
|
|
169
169
|
}
|
|
170
170
|
return (selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) || 0;
|
|
171
171
|
}, [selectedIds, maintainIds]);
|
|
172
|
+
var columnCount = (0, react_1.useMemo)(function () {
|
|
173
|
+
var count = 2;
|
|
174
|
+
if (column3HeaderText)
|
|
175
|
+
count += 1;
|
|
176
|
+
if (column4HeaderText)
|
|
177
|
+
count += 1;
|
|
178
|
+
if (column5HeaderText)
|
|
179
|
+
count += 1;
|
|
180
|
+
if (column6HeaderText)
|
|
181
|
+
count += 1;
|
|
182
|
+
if (column7HeaderText)
|
|
183
|
+
count += 1;
|
|
184
|
+
if (column8HeaderText)
|
|
185
|
+
count += 1;
|
|
186
|
+
if (column9HeaderText)
|
|
187
|
+
count += 1;
|
|
188
|
+
if (column10HeaderText)
|
|
189
|
+
count += 1;
|
|
190
|
+
return count;
|
|
191
|
+
}, [
|
|
192
|
+
column3HeaderText,
|
|
193
|
+
column4HeaderText,
|
|
194
|
+
column5HeaderText,
|
|
195
|
+
column6HeaderText,
|
|
196
|
+
column7HeaderText,
|
|
197
|
+
column8HeaderText,
|
|
198
|
+
column9HeaderText,
|
|
199
|
+
column10HeaderText
|
|
200
|
+
]);
|
|
172
201
|
var childrenWithWidthProps = react_1.default.Children.map(children, function (child) {
|
|
173
202
|
if (react_1.default.isValidElement(child)) {
|
|
174
|
-
return react_1.default.cloneElement(child, __assign(__assign(__assign({ column3TextWidth: column3Width, column4TextWidth: column4Width, column5TextWidth: column5Width, column6TextWidth: column6Width, column7TextWidth: column7Width, column8TextWidth: column8Width, column9TextWidth: column9Width, column10TextWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionBtnMode: quickActionBtnMode, quickActionBtn1Text: quickActionBtn1Text, quickActionBtn2Text: quickActionBtn2Text, quickActionBtn3Text: quickActionBtn3Text, onClickQuickActionBtn1: onClickQuickActionBtn1, onClickQuickActionBtn2: onClickQuickActionBtn2, onClickQuickActionBtn3: onClickQuickActionBtn3, selectionMode: selectionMode, flexibleHideInfoMode: flexibleHideInfoMode, onClickItem: handleSelectItem, selectedState: (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.includes(child.props.id)) ? 'maintain' : 'basic' }, (quickActionBtn1State && { quickActionBtn1State: quickActionBtn1State })), (quickActionBtn2State && { quickActionBtn2State: quickActionBtn2State })), (quickActionBtn3State && { quickActionBtn3State: quickActionBtn3State })));
|
|
203
|
+
return react_1.default.cloneElement(child, __assign(__assign(__assign({ columnCount: columnCount, column3TextWidth: column3Width, column4TextWidth: column4Width, column5TextWidth: column5Width, column6TextWidth: column6Width, column7TextWidth: column7Width, column8TextWidth: column8Width, column9TextWidth: column9Width, column10TextWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionBtnMode: quickActionBtnMode, quickActionBtn1Text: quickActionBtn1Text, quickActionBtn2Text: quickActionBtn2Text, quickActionBtn3Text: quickActionBtn3Text, onClickQuickActionBtn1: onClickQuickActionBtn1, onClickQuickActionBtn2: onClickQuickActionBtn2, onClickQuickActionBtn3: onClickQuickActionBtn3, selectionMode: selectionMode, flexibleHideInfoMode: flexibleHideInfoMode, onClickItem: handleSelectItem, selectedState: (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.includes(child.props.id)) ? 'maintain' : 'basic' }, (quickActionBtn1State && { quickActionBtn1State: quickActionBtn1State })), (quickActionBtn2State && { quickActionBtn2State: quickActionBtn2State })), (quickActionBtn3State && { quickActionBtn3State: quickActionBtn3State })));
|
|
175
204
|
}
|
|
176
205
|
return child;
|
|
177
206
|
});
|
|
@@ -13,6 +13,7 @@ export type AdminListItemProps = {
|
|
|
13
13
|
imageScaleType?: 'fill' | 'contain' | 'cover' | 'none';
|
|
14
14
|
imageRadius?: 8 | 16 | 24;
|
|
15
15
|
imageRatio?: '16_9' | '4_3' | '1_1';
|
|
16
|
+
columnCount?: number;
|
|
16
17
|
column2Text?: PDSTextType;
|
|
17
18
|
column3Text?: PDSTextType;
|
|
18
19
|
column3TextWidth?: ColumnWidthType;
|
|
@@ -47,13 +47,13 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
47
47
|
var Checkbox_1 = require("../Checkbox");
|
|
48
48
|
var TextLabel_1 = require("../TextLabel");
|
|
49
49
|
var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
50
|
-
var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = _a.column2Type, column2Type = _e === void 0 ? 'image_text' : _e, imageSrc = _a.imageSrc, _f = _a.imageShapeType, imageShapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.imageScaleType, imageScaleType = _g === void 0 ? 'cover' : _g, _h = _a.imageRadius, imageRadius = _h === void 0 ? 8 : _h, _j = _a.imageRatio, imageRatio = _j === void 0 ? '16_9' : _j, column2Text = _a.column2Text, column3Text = _a.column3Text,
|
|
50
|
+
var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = _a.column2Type, column2Type = _e === void 0 ? 'image_text' : _e, imageSrc = _a.imageSrc, _f = _a.imageShapeType, imageShapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.imageScaleType, imageScaleType = _g === void 0 ? 'cover' : _g, _h = _a.imageRadius, imageRadius = _h === void 0 ? 8 : _h, _j = _a.imageRatio, imageRatio = _j === void 0 ? '16_9' : _j, _k = _a.columnCount, columnCount = _k === void 0 ? 2 : _k, column2Text = _a.column2Text, column3Text = _a.column3Text, _l = _a.column3TextWidth, column3TextWidth = _l === void 0 ? 'small' : _l, _m = _a.column3TextStyleTheme, column3TextStyleTheme = _m === void 0 ? 'normal' : _m, column4Text = _a.column4Text, _o = _a.column4TextWidth, column4TextWidth = _o === void 0 ? 'small' : _o, _p = _a.column4TextStyleTheme, column4TextStyleTheme = _p === void 0 ? 'normal' : _p, column5Text = _a.column5Text, _q = _a.column5TextWidth, column5TextWidth = _q === void 0 ? 'small' : _q, _r = _a.column5TextStyleTheme, column5TextStyleTheme = _r === void 0 ? 'normal' : _r, column6Text = _a.column6Text, _s = _a.column6TextWidth, column6TextWidth = _s === void 0 ? 'small' : _s, _t = _a.column6TextStyleTheme, column6TextStyleTheme = _t === void 0 ? 'normal' : _t, column7Text = _a.column7Text, _u = _a.column7TextWidth, column7TextWidth = _u === void 0 ? 'small' : _u, _v = _a.column7TextStyleTheme, column7TextStyleTheme = _v === void 0 ? 'normal' : _v, column8Text = _a.column8Text, _w = _a.column8TextWidth, column8TextWidth = _w === void 0 ? 'small' : _w, _x = _a.column8TextStyleTheme, column8TextStyleTheme = _x === void 0 ? 'normal' : _x, column9Text = _a.column9Text, _y = _a.column9TextWidth, column9TextWidth = _y === void 0 ? 'small' : _y, _z = _a.column9TextStyleTheme, column9TextStyleTheme = _z === void 0 ? 'normal' : _z, column10Text = _a.column10Text, _0 = _a.column10TextWidth, column10TextWidth = _0 === void 0 ? 'small' : _0, _1 = _a.column10TextStyleTheme, column10TextStyleTheme = _1 === void 0 ? 'normal' : _1, _2 = _a.quickActionBtnMode, quickActionBtnMode = _2 === void 0 ? 'btn_amount2' : _2, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _3 = _a.quickActionBtnType, quickActionBtnType = _3 === void 0 ? 'fix' : _3, _4 = _a.quickActionBtn1State, quickActionBtn1State = _4 === void 0 ? 'normal' : _4, _5 = _a.quickActionBtn2State, quickActionBtn2State = _5 === void 0 ? 'normal' : _5, _6 = _a.quickActionBtn3State, quickActionBtn3State = _6 === void 0 ? 'normal' : _6, _7 = _a.selectedState, selectedState = _7 === void 0 ? 'basic' : _7, id = _a.id, _8 = _a.flexibleHideInfoMode, flexibleHideInfoMode = _8 === void 0 ? 'use' : _8, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
|
|
51
51
|
var methods = (0, react_hook_form_1.useFormContext)();
|
|
52
52
|
var isSelected = (0, react_hook_form_1.useWatch)({
|
|
53
53
|
control: methods.control,
|
|
54
54
|
name: id.toString()
|
|
55
55
|
});
|
|
56
|
-
var
|
|
56
|
+
var _9 = (0, react_1.useState)(false), hasScroll = _9[0], setHasScroll = _9[1];
|
|
57
57
|
var contentRef = (0, react_1.useRef)(null);
|
|
58
58
|
(0, react_1.useEffect)(function () {
|
|
59
59
|
if (!contentRef || !contentRef.current)
|
|
@@ -161,7 +161,13 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
161
161
|
}
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
|
-
|
|
164
|
+
var renderColumn = function (columnIndex, text, width, styleTheme) {
|
|
165
|
+
if (columnIndex > columnCount) {
|
|
166
|
+
return null;
|
|
167
|
+
}
|
|
168
|
+
return ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: width, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text || '-', styleTheme: styleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(styleTheme, state) }) })));
|
|
169
|
+
};
|
|
170
|
+
return ((0, jsx_runtime_1.jsxs)(S_AdminListItem, __assign({ "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", disabled: state === 'disabled', ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType, flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(S_SelectionColumn, __assign({ rowSize: rowSize }, { children: selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_Selection, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' || state === 'disabled' ? 'disabled' : 'normal' }) })) })), (0, jsx_runtime_1.jsxs)(S_ImageColumn, __assign({ rowSize: rowSize }, { children: [column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ rowSize: rowSize }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }) }))), (rowSize === 'low' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_RowTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 2 }) })), rowSize === 'high' && ((0, jsx_runtime_1.jsx)(S_HighTextWrapper, __assign({ ref: contentRef, hasScroll: hasScroll }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary' }) })))] })), renderColumn(3, column3Text, column3TextWidth, column3TextStyleTheme), renderColumn(4, column4Text, column4TextWidth, column4TextStyleTheme), renderColumn(5, column5Text, column5TextWidth, column5TextStyleTheme), renderColumn(6, column6Text, column6TextWidth, column6TextStyleTheme), renderColumn(7, column7Text, column7TextWidth, column7TextStyleTheme), renderColumn(8, column8Text, column8TextWidth, column8TextStyleTheme), renderColumn(9, column9Text, column9TextWidth, column9TextStyleTheme), renderColumn(10, column10Text, column10TextWidth, column10TextStyleTheme), quickActionBtnMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, __assign({ quickActionBtnType: quickActionBtnType }, { children: quickActionButtons() }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })] })));
|
|
165
171
|
});
|
|
166
172
|
var highRow = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 200px;\n max-height: 200px;\n"], ["\n height: 200px;\n max-height: 200px;\n"])));
|
|
167
173
|
var mediumRow = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100px;\n max-height: 100px;\n"], ["\n height: 100px;\n max-height: 100px;\n"])));
|
|
@@ -3,29 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
-
if (k2 === undefined) k2 = k;
|
|
8
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
-
}
|
|
12
|
-
Object.defineProperty(o, k2, desc);
|
|
13
|
-
}) : (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
o[k2] = m[k];
|
|
16
|
-
}));
|
|
17
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
-
}) : function(o, v) {
|
|
20
|
-
o["default"] = v;
|
|
21
|
-
});
|
|
22
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
-
if (mod && mod.__esModule) return mod;
|
|
24
|
-
var result = {};
|
|
25
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
-
__setModuleDefault(result, mod);
|
|
27
|
-
return result;
|
|
28
|
-
};
|
|
29
6
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
30
7
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
31
8
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -62,6 +39,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
62
39
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
63
40
|
}
|
|
64
41
|
};
|
|
42
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
43
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
44
|
+
};
|
|
65
45
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
66
46
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
67
47
|
/* eslint-disable prefer-promise-reject-errors */
|
|
@@ -70,7 +50,7 @@ var react_1 = require("react");
|
|
|
70
50
|
var react_i18next_1 = require("react-i18next");
|
|
71
51
|
var uuid_1 = require("uuid");
|
|
72
52
|
var components_1 = require("../../../common/components");
|
|
73
|
-
var styled_components_1 =
|
|
53
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
74
54
|
var DesktopAlertDialog_1 = require("../DesktopAlertDialog");
|
|
75
55
|
function RichTextEditor(_a) {
|
|
76
56
|
var _this = this;
|
|
@@ -83,8 +63,7 @@ function RichTextEditor(_a) {
|
|
|
83
63
|
var editorRef = (0, react_1.useRef)(null);
|
|
84
64
|
var isEditorDirty = (0, react_1.useRef)(false);
|
|
85
65
|
var editorContent = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getContent();
|
|
86
|
-
var
|
|
87
|
-
var useDarkMode = theme.mode === 'dark';
|
|
66
|
+
var useDarkMode = window.PdsUtils.tone === 'DARK';
|
|
88
67
|
var validationText = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
89
68
|
(0, react_1.useEffect)(function () {
|
|
90
69
|
if (defaultText && defaultText.length === 0) {
|
|
@@ -3,29 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
-
if (k2 === undefined) k2 = k;
|
|
8
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
-
}
|
|
12
|
-
Object.defineProperty(o, k2, desc);
|
|
13
|
-
}) : (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
o[k2] = m[k];
|
|
16
|
-
}));
|
|
17
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
-
}) : function(o, v) {
|
|
20
|
-
o["default"] = v;
|
|
21
|
-
});
|
|
22
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
-
if (mod && mod.__esModule) return mod;
|
|
24
|
-
var result = {};
|
|
25
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
-
__setModuleDefault(result, mod);
|
|
27
|
-
return result;
|
|
28
|
-
};
|
|
29
6
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
30
7
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
31
8
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -62,6 +39,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
62
39
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
63
40
|
}
|
|
64
41
|
};
|
|
42
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
43
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
44
|
+
};
|
|
65
45
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
66
46
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
67
47
|
/* eslint-disable prefer-promise-reject-errors */
|
|
@@ -70,7 +50,7 @@ var react_1 = require("react");
|
|
|
70
50
|
var react_i18next_1 = require("react-i18next");
|
|
71
51
|
var uuid_1 = require("uuid");
|
|
72
52
|
var components_1 = require("../../../common/components");
|
|
73
|
-
var styled_components_1 =
|
|
53
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
74
54
|
var MobileAlertDialog_1 = require("../MobileAlertDialog");
|
|
75
55
|
function RichTextEditor(_a) {
|
|
76
56
|
var _this = this;
|
|
@@ -80,11 +60,10 @@ function RichTextEditor(_a) {
|
|
|
80
60
|
var _f = (0, react_1.useState)(0), count = _f[0], setCount = _f[1];
|
|
81
61
|
var _g = (0, react_1.useState)(true), isEditorLoading = _g[0], setIsEditorLoading = _g[1];
|
|
82
62
|
var _h = (0, react_1.useState)(false), isFileValidationAlertDialogOpen = _h[0], setIsFilValidationAlertDialogOpen = _h[1];
|
|
83
|
-
var theme = (0, styled_components_1.useTheme)();
|
|
84
|
-
var useDarkMode = theme.mode === 'dark';
|
|
85
63
|
var editorRef = (0, react_1.useRef)(null);
|
|
86
64
|
var isEditorDirty = (0, react_1.useRef)(false);
|
|
87
65
|
var editorContent = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getContent();
|
|
66
|
+
var useDarkMode = window.PdsUtils.tone === 'DARK';
|
|
88
67
|
var validationText = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
89
68
|
(0, react_1.useEffect)(function () {
|
|
90
69
|
if (defaultText && defaultText.length === 0) {
|
|
@@ -169,9 +169,39 @@ function AdminList(_a) {
|
|
|
169
169
|
}
|
|
170
170
|
return (selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) || 0;
|
|
171
171
|
}, [selectedIds, maintainIds]);
|
|
172
|
+
var columnCount = (0, react_1.useMemo)(function () {
|
|
173
|
+
var count = 2;
|
|
174
|
+
if (column3HeaderText)
|
|
175
|
+
count += 1;
|
|
176
|
+
if (column4HeaderText)
|
|
177
|
+
count += 1;
|
|
178
|
+
if (column5HeaderText)
|
|
179
|
+
count += 1;
|
|
180
|
+
if (column6HeaderText)
|
|
181
|
+
count += 1;
|
|
182
|
+
if (column7HeaderText)
|
|
183
|
+
count += 1;
|
|
184
|
+
if (column8HeaderText)
|
|
185
|
+
count += 1;
|
|
186
|
+
if (column9HeaderText)
|
|
187
|
+
count += 1;
|
|
188
|
+
if (column10HeaderText)
|
|
189
|
+
count += 1;
|
|
190
|
+
return count;
|
|
191
|
+
}, [
|
|
192
|
+
column3HeaderText,
|
|
193
|
+
column4HeaderText,
|
|
194
|
+
column5HeaderText,
|
|
195
|
+
column6HeaderText,
|
|
196
|
+
column7HeaderText,
|
|
197
|
+
column8HeaderText,
|
|
198
|
+
column9HeaderText,
|
|
199
|
+
column10HeaderText
|
|
200
|
+
]);
|
|
172
201
|
var childrenWithWidthProps = react_1.default.Children.map(children, function (child) {
|
|
173
202
|
if (react_1.default.isValidElement(child)) {
|
|
174
203
|
return react_1.default.cloneElement(child, {
|
|
204
|
+
columnCount: columnCount,
|
|
175
205
|
column3TextWidth: column3Width,
|
|
176
206
|
column4TextWidth: column4Width,
|
|
177
207
|
column5TextWidth: column5Width,
|
|
@@ -4,6 +4,7 @@ type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
|
|
|
4
4
|
type ColumnTextType = 'normal' | 'active' | 'active2' | 'inactive' | 'report' | 'report2';
|
|
5
5
|
export type AdminListItemProps = {
|
|
6
6
|
rowSize?: 'high' | 'medium' | 'low';
|
|
7
|
+
state?: 'normal' | 'disabled';
|
|
7
8
|
selectionMode?: 'none' | 'single' | 'multi';
|
|
8
9
|
column2Type?: 'image_text' | 'text_only';
|
|
9
10
|
imageSrc?: string;
|
|
@@ -11,6 +12,7 @@ export type AdminListItemProps = {
|
|
|
11
12
|
imageScaleType?: 'fill' | 'contain' | 'cover' | 'none';
|
|
12
13
|
imageRadius?: 8 | 16 | 24;
|
|
13
14
|
imageRatio?: '16_9' | '4_3' | '1_1';
|
|
15
|
+
columnCount?: number;
|
|
14
16
|
column2Text?: PDSTextType;
|
|
15
17
|
column3Text?: PDSTextType;
|
|
16
18
|
column3TextWidth?: ColumnWidthType;
|
|
@@ -46,13 +46,13 @@ var components_1 = require("../../../desktop/components");
|
|
|
46
46
|
var components_2 = require("../../../hybrid/components");
|
|
47
47
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
48
48
|
var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
49
|
-
var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.
|
|
49
|
+
var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = _a.column2Type, column2Type = _e === void 0 ? 'image_text' : _e, imageSrc = _a.imageSrc, _f = _a.imageShapeType, imageShapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.imageScaleType, imageScaleType = _g === void 0 ? 'cover' : _g, _h = _a.imageRadius, imageRadius = _h === void 0 ? 8 : _h, _j = _a.imageRatio, imageRatio = _j === void 0 ? '16_9' : _j, _k = _a.columnCount, columnCount = _k === void 0 ? 2 : _k, column2Text = _a.column2Text, column3Text = _a.column3Text, _l = _a.column3TextWidth, column3TextWidth = _l === void 0 ? 'small' : _l, _m = _a.column3TextStyleTheme, column3TextStyleTheme = _m === void 0 ? 'normal' : _m, column4Text = _a.column4Text, _o = _a.column4TextWidth, column4TextWidth = _o === void 0 ? 'small' : _o, _p = _a.column4TextStyleTheme, column4TextStyleTheme = _p === void 0 ? 'normal' : _p, column5Text = _a.column5Text, _q = _a.column5TextWidth, column5TextWidth = _q === void 0 ? 'small' : _q, _r = _a.column5TextStyleTheme, column5TextStyleTheme = _r === void 0 ? 'normal' : _r, column6Text = _a.column6Text, _s = _a.column6TextWidth, column6TextWidth = _s === void 0 ? 'small' : _s, _t = _a.column6TextStyleTheme, column6TextStyleTheme = _t === void 0 ? 'normal' : _t, column7Text = _a.column7Text, _u = _a.column7TextWidth, column7TextWidth = _u === void 0 ? 'small' : _u, _v = _a.column7TextStyleTheme, column7TextStyleTheme = _v === void 0 ? 'normal' : _v, column8Text = _a.column8Text, _w = _a.column8TextWidth, column8TextWidth = _w === void 0 ? 'small' : _w, _x = _a.column8TextStyleTheme, column8TextStyleTheme = _x === void 0 ? 'normal' : _x, column9Text = _a.column9Text, _y = _a.column9TextWidth, column9TextWidth = _y === void 0 ? 'small' : _y, _z = _a.column9TextStyleTheme, column9TextStyleTheme = _z === void 0 ? 'normal' : _z, column10Text = _a.column10Text, _0 = _a.column10TextWidth, column10TextWidth = _0 === void 0 ? 'small' : _0, _1 = _a.column10TextStyleTheme, column10TextStyleTheme = _1 === void 0 ? 'normal' : _1, _2 = _a.quickActionBtnMode, quickActionBtnMode = _2 === void 0 ? 'btn_amount2' : _2, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _3 = _a.quickActionBtnType, quickActionBtnType = _3 === void 0 ? 'fix' : _3, _4 = _a.quickActionBtn1State, quickActionBtn1State = _4 === void 0 ? 'normal' : _4, _5 = _a.quickActionBtn2State, quickActionBtn2State = _5 === void 0 ? 'normal' : _5, _6 = _a.quickActionBtn3State, quickActionBtn3State = _6 === void 0 ? 'normal' : _6, _7 = _a.selectedState, selectedState = _7 === void 0 ? 'basic' : _7, id = _a.id, _8 = _a.flexibleHideInfoMode, flexibleHideInfoMode = _8 === void 0 ? 'use' : _8, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
|
|
50
50
|
var methods = (0, react_hook_form_1.useFormContext)();
|
|
51
51
|
var isSelected = (0, react_hook_form_1.useWatch)({
|
|
52
52
|
control: methods.control,
|
|
53
53
|
name: id.toString()
|
|
54
54
|
});
|
|
55
|
-
var
|
|
55
|
+
var _9 = (0, react_1.useState)(false), hasScroll = _9[0], setHasScroll = _9[1];
|
|
56
56
|
var contentRef = (0, react_1.useRef)(null);
|
|
57
57
|
(0, react_1.useEffect)(function () {
|
|
58
58
|
if (!contentRef || !contentRef.current)
|
|
@@ -68,7 +68,7 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
68
68
|
}, [selectedState]);
|
|
69
69
|
var handleClick = function (e) {
|
|
70
70
|
e.preventDefault();
|
|
71
|
-
if (selectedState === 'maintain' || selectionMode === 'none') {
|
|
71
|
+
if (selectedState === 'maintain' || selectionMode === 'none' || state === 'disabled') {
|
|
72
72
|
return;
|
|
73
73
|
}
|
|
74
74
|
if (selectionMode === 'multi') {
|
|
@@ -118,7 +118,11 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
118
118
|
: undefined, textAlign: "center" }) }))] }));
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
|
-
var getColumnColorTheme = function (style) {
|
|
121
|
+
var getColumnColorTheme = function (style, state) {
|
|
122
|
+
if (state === void 0) { state = 'normal'; }
|
|
123
|
+
if (state === 'disabled') {
|
|
124
|
+
return 'sysTextTertiary';
|
|
125
|
+
}
|
|
122
126
|
switch (style) {
|
|
123
127
|
case 'active':
|
|
124
128
|
return 'sysTextBrandSeconVariant';
|
|
@@ -156,7 +160,13 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
156
160
|
}
|
|
157
161
|
}
|
|
158
162
|
}
|
|
159
|
-
|
|
163
|
+
var renderColumn = function (columnIndex, text, width, styleTheme) {
|
|
164
|
+
if (columnIndex > columnCount) {
|
|
165
|
+
return null;
|
|
166
|
+
}
|
|
167
|
+
return ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: width, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: text || '-', styleTheme: styleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(styleTheme, state) }) })));
|
|
168
|
+
};
|
|
169
|
+
return ((0, jsx_runtime_1.jsxs)(S_AdminListItem, __assign({ "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType, flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(S_SelectionColumn, __assign({ rowSize: rowSize }, { children: selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_Selection, { children: (0, jsx_runtime_1.jsx)(components_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' || state === 'disabled' ? 'disabled' : 'normal' }) })) })), (0, jsx_runtime_1.jsxs)(S_ImageColumn, __assign({ rowSize: rowSize }, { children: [column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ rowSize: rowSize }, { children: (0, jsx_runtime_1.jsx)(components_2.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }) }))), (rowSize === 'low' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_RowTextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 2 }) })), rowSize === 'high' && ((0, jsx_runtime_1.jsx)(S_HighTextWrapper, __assign({ ref: contentRef, hasScroll: hasScroll }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary' }) })))] })), renderColumn(3, column3Text, column3TextWidth, column3TextStyleTheme), renderColumn(4, column4Text, column4TextWidth, column4TextStyleTheme), renderColumn(5, column5Text, column5TextWidth, column5TextStyleTheme), renderColumn(6, column6Text, column6TextWidth, column6TextStyleTheme), renderColumn(7, column7Text, column7TextWidth, column7TextStyleTheme), renderColumn(8, column8Text, column8TextWidth, column8TextStyleTheme), renderColumn(9, column9Text, column9TextWidth, column9TextStyleTheme), renderColumn(10, column10Text, column10TextWidth, column10TextStyleTheme), quickActionBtnMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, __assign({ quickActionBtnType: quickActionBtnType }, { children: quickActionButtons() }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f", spacingType: "width" })] })));
|
|
160
170
|
});
|
|
161
171
|
var highRow = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 200px;\n max-height: 200px;\n"], ["\n height: 200px;\n max-height: 200px;\n"])));
|
|
162
172
|
var mediumRow = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100px;\n max-height: 100px;\n"], ["\n height: 100px;\n max-height: 100px;\n"])));
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v2.2.
|
|
2
|
+
## [v2.2.225]
|
|
3
3
|
## daily|https://design.storybook.publ.biz/
|
|
4
4
|
|
|
5
5
|
### 업데이트 사항
|
|
6
|
-
* [PDS-
|
|
7
|
-
* [PDS-1347] BoxItem selectedState / checkboxMode 분리 업데이트
|
|
6
|
+
* [PDS-1355] AdminListItem의 데이터 누락시 기본 폴백 텍스트 처리
|