pds-dev-kit-web 2.2.146 → 2.2.148
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.
|
@@ -5,6 +5,7 @@ type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
|
|
|
5
5
|
type ColumnTextType = 'normal' | 'active' | 'active2' | 'inactive' | 'report' | 'report2';
|
|
6
6
|
export type AdminListItemProps = {
|
|
7
7
|
rowSize?: 'high' | 'medium' | 'low';
|
|
8
|
+
state?: 'normal' | 'disabled';
|
|
8
9
|
selectionMode?: 'none' | 'single' | 'multi';
|
|
9
10
|
column2Type?: 'image_text' | 'text_only';
|
|
10
11
|
imageSrc?: string;
|
|
@@ -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.
|
|
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, _k = _a.column3TextWidth, column3TextWidth = _k === void 0 ? 'small' : _k, _l = _a.column3TextStyleTheme, column3TextStyleTheme = _l === void 0 ? 'normal' : _l, column4Text = _a.column4Text, _m = _a.column4TextWidth, column4TextWidth = _m === void 0 ? 'small' : _m, _o = _a.column4TextStyleTheme, column4TextStyleTheme = _o === void 0 ? 'normal' : _o, column5Text = _a.column5Text, _p = _a.column5TextWidth, column5TextWidth = _p === void 0 ? 'small' : _p, _q = _a.column5TextStyleTheme, column5TextStyleTheme = _q === void 0 ? 'normal' : _q, column6Text = _a.column6Text, _r = _a.column6TextWidth, column6TextWidth = _r === void 0 ? 'small' : _r, _s = _a.column6TextStyleTheme, column6TextStyleTheme = _s === void 0 ? 'normal' : _s, column7Text = _a.column7Text, _t = _a.column7TextWidth, column7TextWidth = _t === void 0 ? 'small' : _t, _u = _a.column7TextStyleTheme, column7TextStyleTheme = _u === void 0 ? 'normal' : _u, column8Text = _a.column8Text, _v = _a.column8TextWidth, column8TextWidth = _v === void 0 ? 'small' : _v, _w = _a.column8TextStyleTheme, column8TextStyleTheme = _w === void 0 ? 'normal' : _w, column9Text = _a.column9Text, _x = _a.column9TextWidth, column9TextWidth = _x === void 0 ? 'small' : _x, _y = _a.column9TextStyleTheme, column9TextStyleTheme = _y === void 0 ? 'normal' : _y, column10Text = _a.column10Text, _z = _a.column10TextWidth, column10TextWidth = _z === void 0 ? 'small' : _z, _0 = _a.column10TextStyleTheme, column10TextStyleTheme = _0 === void 0 ? 'normal' : _0, _1 = _a.quickActionBtnMode, quickActionBtnMode = _1 === void 0 ? 'btn_amount2' : _1, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _2 = _a.quickActionBtnType, quickActionBtnType = _2 === void 0 ? 'fix' : _2, _3 = _a.quickActionBtn1State, quickActionBtn1State = _3 === void 0 ? 'normal' : _3, _4 = _a.quickActionBtn2State, quickActionBtn2State = _4 === void 0 ? 'normal' : _4, _5 = _a.quickActionBtn3State, quickActionBtn3State = _5 === void 0 ? 'normal' : _5, _6 = _a.selectedState, selectedState = _6 === void 0 ? 'basic' : _6, id = _a.id, _7 = _a.flexibleHideInfoMode, flexibleHideInfoMode = _7 === void 0 ? 'use' : _7, 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 _8 = (0, react_1.useState)(false), hasScroll = _8[0], setHasScroll = _8[1];
|
|
57
57
|
var contentRef = (0, react_1.useRef)(null);
|
|
58
58
|
(0, react_1.useEffect)(function () {
|
|
59
59
|
if (!contentRef || !contentRef.current)
|
|
@@ -69,7 +69,7 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
69
69
|
}, [selectedState]);
|
|
70
70
|
var handleClick = function (e) {
|
|
71
71
|
e.preventDefault();
|
|
72
|
-
if (selectedState === 'maintain' || selectionMode === 'none') {
|
|
72
|
+
if (selectedState === 'maintain' || selectionMode === 'none' || state === 'disabled') {
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
75
|
if (selectionMode === 'multi') {
|
|
@@ -119,7 +119,11 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
119
119
|
: undefined, textAlign: "center" }) }))] }));
|
|
120
120
|
}
|
|
121
121
|
};
|
|
122
|
-
var getColumnColorTheme = function (style) {
|
|
122
|
+
var getColumnColorTheme = function (style, state) {
|
|
123
|
+
if (state === void 0) { state = 'normal'; }
|
|
124
|
+
if (state === 'disabled') {
|
|
125
|
+
return 'sysTextTertiary';
|
|
126
|
+
}
|
|
123
127
|
switch (style) {
|
|
124
128
|
case 'active':
|
|
125
129
|
return 'sysTextBrandSeconVariant';
|
|
@@ -157,7 +161,7 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
157
161
|
}
|
|
158
162
|
}
|
|
159
163
|
}
|
|
160
|
-
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)(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? '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:
|
|
164
|
+
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' }) })))] })), column3Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme, state) }) }))), column4Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column4Text, styleTheme: column4TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column4TextStyleTheme, state) }) }))), column5Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column5Text, styleTheme: column5TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column5TextStyleTheme, state) }) }))), column6Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column6Text, styleTheme: column6TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column6TextStyleTheme, state) }) }))), column7Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column7Text, styleTheme: column7TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column7TextStyleTheme, state) }) }))), column8Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column8Text, styleTheme: column8TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column8TextStyleTheme, state) }) }))), column9Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column9Text, styleTheme: column9TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column9TextStyleTheme, state) }) }))), column10Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme, state) }) }))), 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" })] })));
|
|
161
165
|
});
|
|
162
166
|
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"])));
|
|
163
167
|
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"])));
|
|
@@ -253,7 +257,11 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_24 || (te
|
|
|
253
257
|
var hoverAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
|
|
254
258
|
var fixedAdminListItem = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
|
|
255
259
|
var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n @media only screen and (max-width: 1400px) {\n .hidableColumn {\n display: none;\n }\n }\n"], ["\n @media only screen and (max-width: 1400px) {\n .hidableColumn {\n display: none;\n }\n }\n"])));
|
|
256
|
-
var
|
|
260
|
+
var disabledAdminListItem = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
261
|
+
var theme = _a.theme;
|
|
262
|
+
return theme.ui_cpnt_datatable_base_selected;
|
|
263
|
+
});
|
|
264
|
+
var S_AdminListItem = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n ", "\n"])), function (_a) {
|
|
257
265
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
258
266
|
return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
|
|
259
267
|
}, function (_a) {
|
|
@@ -267,14 +275,20 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_28 || (temp
|
|
|
267
275
|
return quickActionBtnType &&
|
|
268
276
|
{ fix: fixedAdminListItem, hover: hoverAdminListItem }[quickActionBtnType];
|
|
269
277
|
}, function (_a) {
|
|
270
|
-
var theme = _a.theme;
|
|
271
|
-
return theme.ui_cpnt_datatable_base_hover;
|
|
278
|
+
var theme = _a.theme, disabled = _a.disabled;
|
|
279
|
+
return !disabled && theme.ui_cpnt_datatable_base_hover;
|
|
272
280
|
}, S_QuickActionButtonBox, function (_a) {
|
|
273
|
-
var quickActionBtnType = _a.quickActionBtnType;
|
|
274
|
-
return quickActionBtnType === 'hover' && 'flex';
|
|
281
|
+
var quickActionBtnType = _a.quickActionBtnType, disabled = _a.disabled;
|
|
282
|
+
return !disabled && quickActionBtnType === 'hover' && 'flex';
|
|
283
|
+
}, function (_a) {
|
|
284
|
+
var disabled = _a.disabled;
|
|
285
|
+
return !disabled && 'visible';
|
|
275
286
|
}, function (_a) {
|
|
276
287
|
var flexibleHideInfoMode = _a.flexibleHideInfoMode;
|
|
277
288
|
return flexibleHideInfoMode === 'use' && flexibleHideColumnStyle;
|
|
289
|
+
}, function (_a) {
|
|
290
|
+
var disabled = _a.disabled;
|
|
291
|
+
return disabled && disabledAdminListItem;
|
|
278
292
|
});
|
|
279
293
|
exports.default = AdminListItem;
|
|
280
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
|
|
294
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
|
package/package.json
CHANGED
package/release-note.md
CHANGED