pds-dev-kit-web 2.2.224 → 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/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/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"])));
|
|
@@ -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