pds-dev-kit-web 2.2.224 → 2.2.226
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/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.d.ts +5 -2
- package/dist/src/desktop/components/RichTextEditor/RichTextEditor.js +47 -21
- package/dist/src/mobile/components/RichTextEditor/RichTextEditor.d.ts +5 -2
- package/dist/src/mobile/components/RichTextEditor/RichTextEditor.js +46 -19
- 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 -2
|
@@ -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"])));
|
|
@@ -24,11 +24,14 @@ export type RichTextEditorProps = {
|
|
|
24
24
|
fileSizeValidationText?: string;
|
|
25
25
|
height?: string | number;
|
|
26
26
|
tinymceScriptSrc?: string;
|
|
27
|
-
onChange?: (value: string) => void;
|
|
27
|
+
onChange?: (value: string, isValid?: boolean) => void;
|
|
28
28
|
onBlur?: (value: string, count: number) => void;
|
|
29
|
-
onCountCharacter?: (count: number) => void;
|
|
30
29
|
onImageUpload?: ImageUploadHandler;
|
|
31
30
|
isLoadingUsed?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* @deprecated onChange 이벤트를 사용해주세요.
|
|
33
|
+
*/
|
|
34
|
+
onCountCharacter?: (count: number) => void;
|
|
32
35
|
};
|
|
33
36
|
declare function RichTextEditor({ toolbar, defaultText, hintText, maxLength, minLength, maxFileSize, requirementMode, lengthValidationText, requiredValidationText, fileSizeValidationText, height, tinymceScriptSrc, onChange, onBlur, onCountCharacter, onImageUpload, isLoadingUsed }: RichTextEditorProps): JSX.Element;
|
|
34
37
|
export default RichTextEditor;
|
|
@@ -52,19 +52,20 @@ var uuid_1 = require("uuid");
|
|
|
52
52
|
var components_1 = require("../../../common/components");
|
|
53
53
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
54
54
|
var DesktopAlertDialog_1 = require("../DesktopAlertDialog");
|
|
55
|
+
var DEFAULT_ELEMENT_COUNT = 7;
|
|
55
56
|
function RichTextEditor(_a) {
|
|
56
57
|
var _this = this;
|
|
57
|
-
var _b;
|
|
58
|
-
var toolbar = _a.toolbar, defaultText = _a.defaultText, hintText = _a.hintText, maxLength = _a.maxLength, minLength = _a.minLength, maxFileSize = _a.maxFileSize,
|
|
58
|
+
var _b, _c, _d;
|
|
59
|
+
var toolbar = _a.toolbar, defaultText = _a.defaultText, hintText = _a.hintText, maxLength = _a.maxLength, minLength = _a.minLength, maxFileSize = _a.maxFileSize, _e = _a.requirementMode, requirementMode = _e === void 0 ? 'none' : _e, lengthValidationText = _a.lengthValidationText, requiredValidationText = _a.requiredValidationText, fileSizeValidationText = _a.fileSizeValidationText, _f = _a.height, height = _f === void 0 ? 600 : _f, _g = _a.tinymceScriptSrc, tinymceScriptSrc = _g === void 0 ? '/tinymce/tinymce.min.js' : _g, onChange = _a.onChange, onBlur = _a.onBlur, onCountCharacter = _a.onCountCharacter, onImageUpload = _a.onImageUpload, _h = _a.isLoadingUsed, isLoadingUsed = _h === void 0 ? true : _h;
|
|
59
60
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
var
|
|
61
|
+
var _j = (0, react_1.useState)(0), count = _j[0], setCount = _j[1];
|
|
62
|
+
var _k = (0, react_1.useState)(true), isEditorLoading = _k[0], setIsEditorLoading = _k[1];
|
|
63
|
+
var _l = (0, react_1.useState)(false), isEditorDirty = _l[0], setIsEditorDirty = _l[1];
|
|
64
|
+
var _m = (0, react_1.useState)(false), isFileValidationAlertDialogOpen = _m[0], setIsFilValidationAlertDialogOpen = _m[1];
|
|
63
65
|
var editorRef = (0, react_1.useRef)(null);
|
|
64
|
-
var isEditorDirty = (0, react_1.useRef)(false);
|
|
65
66
|
var editorContent = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getContent();
|
|
67
|
+
var elementsCount = Array.from((_d = (_c = editorRef.current) === null || _c === void 0 ? void 0 : _c.contentDocument.all) !== null && _d !== void 0 ? _d : []).filter(function (element) { return !['BR', 'P'].includes(element.tagName); }).length - DEFAULT_ELEMENT_COUNT;
|
|
66
68
|
var useDarkMode = window.PdsUtils.tone === 'DARK';
|
|
67
|
-
var validationText = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
68
69
|
(0, react_1.useEffect)(function () {
|
|
69
70
|
if (defaultText && defaultText.length === 0) {
|
|
70
71
|
setCount(defaultText.length);
|
|
@@ -94,14 +95,34 @@ function RichTextEditor(_a) {
|
|
|
94
95
|
}
|
|
95
96
|
};
|
|
96
97
|
var handleEditorValueChange = function (value, editor) {
|
|
98
|
+
// NOTE: 기본 요소를 제외한 추가된 HTML 요소의 개수
|
|
99
|
+
var addedElementsCount = Array.from(editor.contentDocument.all).filter(function (element) { return !['BR', 'P'].includes(element.tagName); }).length - DEFAULT_ELEMENT_COUNT;
|
|
97
100
|
var wordCount = editor.plugins.wordcount;
|
|
101
|
+
var charCount = 0;
|
|
98
102
|
if (wordCount) {
|
|
99
|
-
|
|
103
|
+
charCount = wordCount.body.getCharacterCount();
|
|
100
104
|
onCountCharacter === null || onCountCharacter === void 0 ? void 0 : onCountCharacter(charCount);
|
|
101
105
|
setCount(charCount);
|
|
102
106
|
}
|
|
103
|
-
|
|
104
|
-
|
|
107
|
+
var isValid = function () {
|
|
108
|
+
// NOTE: 추가된 HTML 요소가 존재해도, maxLength를 초과할 경우.
|
|
109
|
+
if (maxLength && charCount > maxLength) {
|
|
110
|
+
return false;
|
|
111
|
+
}
|
|
112
|
+
// NOTE: 기본 요소를 제외한 추가된 HTML 요소가 존재하는 경우 유효성 검사를 통과합니다.
|
|
113
|
+
if (addedElementsCount > 0) {
|
|
114
|
+
return true;
|
|
115
|
+
}
|
|
116
|
+
if (requirementMode === 'use' && charCount === 0) {
|
|
117
|
+
return false;
|
|
118
|
+
}
|
|
119
|
+
if (minLength && charCount < minLength) {
|
|
120
|
+
return false;
|
|
121
|
+
}
|
|
122
|
+
return true;
|
|
123
|
+
};
|
|
124
|
+
setIsEditorDirty(value ? true : false);
|
|
125
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(value, isValid());
|
|
105
126
|
};
|
|
106
127
|
var handleEditorBlur = function () {
|
|
107
128
|
var _a, _b;
|
|
@@ -179,17 +200,22 @@ function RichTextEditor(_a) {
|
|
|
179
200
|
}
|
|
180
201
|
});
|
|
181
202
|
}); };
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
203
|
+
var validationText = (0, react_1.useMemo)(function () {
|
|
204
|
+
if (requirementMode === 'use' &&
|
|
205
|
+
!isEditorDirty &&
|
|
206
|
+
(!editorContent || editorContent.length === 0) &&
|
|
207
|
+
elementsCount <= 0) {
|
|
208
|
+
return (0, jsx_runtime_1.jsx)(S_Error, { children: requiredValidationText });
|
|
209
|
+
}
|
|
210
|
+
if (elementsCount <= 0 && minLength && count > 0 && count < minLength) {
|
|
211
|
+
return (0, jsx_runtime_1.jsx)(S_Error, { children: lengthValidationText });
|
|
212
|
+
}
|
|
213
|
+
// 추가된 HTML 요소가 있어도, maxLength에 의한 validation은 수행합니다.
|
|
214
|
+
if (maxLength && count > 0 && count > maxLength) {
|
|
215
|
+
return (0, jsx_runtime_1.jsx)(S_Error, { children: lengthValidationText });
|
|
216
|
+
}
|
|
217
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
218
|
+
}, [requirementMode, isEditorDirty, editorContent, elementsCount, count, minLength, maxLength]);
|
|
193
219
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_Editor, { children: [isEditorLoading && isLoadingUsed && ((0, jsx_runtime_1.jsx)(S_LoadingWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, {}) })), (0, jsx_runtime_1.jsx)(tinymce_react_1.Editor, { tinymceScriptSrc: tinymceScriptSrc, onInit: handleInit, onEditorChange: handleEditorValueChange, initialValue: defaultText, init: {
|
|
194
220
|
menubar: false,
|
|
195
221
|
promotion: false,
|
|
@@ -24,11 +24,14 @@ export type RichTextEditorProps = {
|
|
|
24
24
|
fileSizeValidationText?: string;
|
|
25
25
|
height?: string | number;
|
|
26
26
|
tinymceScriptSrc?: string;
|
|
27
|
-
onChange?: (value: string) => void;
|
|
27
|
+
onChange?: (value: string, isValid?: boolean) => void;
|
|
28
28
|
onBlur?: (value: string, count: number) => void;
|
|
29
|
-
onCountCharacter?: (count: number) => void;
|
|
30
29
|
onImageUpload?: ImageUploadHandler;
|
|
31
30
|
isLoadingUsed?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* @deprecated onChange 이벤트를 사용해주세요.
|
|
33
|
+
*/
|
|
34
|
+
onCountCharacter?: (count: number) => void;
|
|
32
35
|
};
|
|
33
36
|
declare function RichTextEditor({ toolbar, defaultText, hintText, maxLength, minLength, maxFileSize, required, lengthValidationText, requiredValidationText, fileSizeValidationText, height, tinymceScriptSrc, onChange, onBlur, onCountCharacter, onImageUpload, isLoadingUsed }: RichTextEditorProps): JSX.Element;
|
|
34
37
|
export default RichTextEditor;
|
|
@@ -52,19 +52,20 @@ var uuid_1 = require("uuid");
|
|
|
52
52
|
var components_1 = require("../../../common/components");
|
|
53
53
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
54
54
|
var MobileAlertDialog_1 = require("../MobileAlertDialog");
|
|
55
|
+
var DEFAULT_ELEMENT_COUNT = 7;
|
|
55
56
|
function RichTextEditor(_a) {
|
|
56
57
|
var _this = this;
|
|
57
|
-
var _b;
|
|
58
|
-
var toolbar = _a.toolbar, defaultText = _a.defaultText, hintText = _a.hintText, maxLength = _a.maxLength, minLength = _a.minLength, maxFileSize = _a.maxFileSize, required = _a.required, lengthValidationText = _a.lengthValidationText, requiredValidationText = _a.requiredValidationText, fileSizeValidationText = _a.fileSizeValidationText,
|
|
58
|
+
var _b, _c, _d;
|
|
59
|
+
var toolbar = _a.toolbar, defaultText = _a.defaultText, hintText = _a.hintText, maxLength = _a.maxLength, minLength = _a.minLength, maxFileSize = _a.maxFileSize, required = _a.required, lengthValidationText = _a.lengthValidationText, requiredValidationText = _a.requiredValidationText, fileSizeValidationText = _a.fileSizeValidationText, _e = _a.height, height = _e === void 0 ? 600 : _e, _f = _a.tinymceScriptSrc, tinymceScriptSrc = _f === void 0 ? '/tinymce/tinymce.min.js' : _f, onChange = _a.onChange, onBlur = _a.onBlur, onCountCharacter = _a.onCountCharacter, onImageUpload = _a.onImageUpload, _g = _a.isLoadingUsed, isLoadingUsed = _g === void 0 ? true : _g;
|
|
59
60
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
var
|
|
61
|
+
var _h = (0, react_1.useState)(0), count = _h[0], setCount = _h[1];
|
|
62
|
+
var _j = (0, react_1.useState)(true), isEditorLoading = _j[0], setIsEditorLoading = _j[1];
|
|
63
|
+
var _k = (0, react_1.useState)(false), isEditorDirty = _k[0], setIsEditorDirty = _k[1];
|
|
64
|
+
var _l = (0, react_1.useState)(false), isFileValidationAlertDialogOpen = _l[0], setIsFilValidationAlertDialogOpen = _l[1];
|
|
63
65
|
var editorRef = (0, react_1.useRef)(null);
|
|
64
|
-
var isEditorDirty = (0, react_1.useRef)(false);
|
|
65
66
|
var editorContent = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getContent();
|
|
67
|
+
var elementsCount = Array.from((_d = (_c = editorRef.current) === null || _c === void 0 ? void 0 : _c.contentDocument.all) !== null && _d !== void 0 ? _d : []).filter(function (element) { return !['BR', 'P'].includes(element.tagName); }).length - DEFAULT_ELEMENT_COUNT;
|
|
66
68
|
var useDarkMode = window.PdsUtils.tone === 'DARK';
|
|
67
|
-
var validationText = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
68
69
|
(0, react_1.useEffect)(function () {
|
|
69
70
|
if (defaultText && defaultText.length === 0) {
|
|
70
71
|
setCount(defaultText.length);
|
|
@@ -94,14 +95,34 @@ function RichTextEditor(_a) {
|
|
|
94
95
|
}
|
|
95
96
|
};
|
|
96
97
|
var handleEditorValueChange = function (value, editor) {
|
|
98
|
+
// NOTE: 기본 요소를 제외한 추가된 HTML 요소의 개수
|
|
99
|
+
var addedElementsCount = Array.from(editor.contentDocument.all).filter(function (element) { return !['BR', 'P'].includes(element.tagName); }).length - DEFAULT_ELEMENT_COUNT;
|
|
97
100
|
var wordCount = editor.plugins.wordcount;
|
|
101
|
+
var charCount = 0;
|
|
98
102
|
if (wordCount) {
|
|
99
|
-
|
|
103
|
+
charCount = wordCount.body.getCharacterCount();
|
|
100
104
|
onCountCharacter === null || onCountCharacter === void 0 ? void 0 : onCountCharacter(charCount);
|
|
101
105
|
setCount(charCount);
|
|
102
106
|
}
|
|
103
|
-
|
|
104
|
-
|
|
107
|
+
var isValid = function () {
|
|
108
|
+
// NOTE: 추가된 HTML 요소가 존재해도, maxLength를 초과할 경우.
|
|
109
|
+
if (maxLength && charCount > maxLength) {
|
|
110
|
+
return false;
|
|
111
|
+
}
|
|
112
|
+
// NOTE: 기본 요소를 제외한 추가된 HTML 요소가 존재하는 경우 유효성 검사를 통과합니다.
|
|
113
|
+
if (addedElementsCount > 0) {
|
|
114
|
+
return true;
|
|
115
|
+
}
|
|
116
|
+
if (required && charCount === 0) {
|
|
117
|
+
return false;
|
|
118
|
+
}
|
|
119
|
+
if (minLength && charCount < minLength) {
|
|
120
|
+
return false;
|
|
121
|
+
}
|
|
122
|
+
return true;
|
|
123
|
+
};
|
|
124
|
+
setIsEditorDirty(value ? true : false);
|
|
125
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(value, isValid());
|
|
105
126
|
};
|
|
106
127
|
var handleEditorBlur = function () {
|
|
107
128
|
var _a, _b;
|
|
@@ -179,15 +200,21 @@ function RichTextEditor(_a) {
|
|
|
179
200
|
}
|
|
180
201
|
});
|
|
181
202
|
}); };
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
203
|
+
var validationText = (0, react_1.useMemo)(function () {
|
|
204
|
+
if (required &&
|
|
205
|
+
!isEditorDirty &&
|
|
206
|
+
(!editorContent || editorContent.length === 0) &&
|
|
207
|
+
elementsCount <= 0) {
|
|
208
|
+
return (0, jsx_runtime_1.jsx)(S_Error, { children: requiredValidationText });
|
|
209
|
+
}
|
|
210
|
+
if (elementsCount <= 0 && minLength && count > 0 && count < minLength) {
|
|
211
|
+
return (0, jsx_runtime_1.jsx)(S_Error, { children: lengthValidationText });
|
|
212
|
+
}
|
|
213
|
+
if (maxLength && count > 0 && count > maxLength) {
|
|
214
|
+
return (0, jsx_runtime_1.jsx)(S_Error, { children: lengthValidationText });
|
|
215
|
+
}
|
|
216
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
217
|
+
}, [required, isEditorDirty, editorContent, elementsCount, count, minLength, maxLength]);
|
|
191
218
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_Editor, { children: [isEditorLoading && isLoadingUsed && ((0, jsx_runtime_1.jsx)(S_LoadingWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, {}) })), (0, jsx_runtime_1.jsx)(tinymce_react_1.Editor, { tinymceScriptSrc: tinymceScriptSrc, onInit: handleInit, onEditorChange: handleEditorValueChange, initialValue: defaultText, init: {
|
|
192
219
|
images_max_width: '100%',
|
|
193
220
|
menubar: false,
|
|
@@ -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