pds-dev-kit-web 2.2.282 → 2.2.284
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/assets/icons/fill/Plugin.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Plugin.js +30 -0
- package/dist/src/common/assets/icons/fill/index.d.ts +1 -0
- package/dist/src/common/assets/icons/fill/index.js +2 -0
- package/dist/src/common/assets/icons/line/Plugin.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Plugin.js +30 -0
- package/dist/src/common/assets/icons/line/index.d.ts +1 -0
- package/dist/src/common/assets/icons/line/index.js +2 -0
- package/dist/src/desktop/components/BoxItem/BoxItem.d.ts +1 -1
- package/dist/src/desktop/components/BoxItem/BoxItem.js +23 -11
- package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -1
- package/dist/src/mobile/components/BoxItem/BoxItem.d.ts +1 -1
- package/dist/src/mobile/components/BoxItem/BoxItem.js +23 -11
- package/dist/src/mobile/components/ReactionButton/ReactionButton.js +1 -1
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
26
|
+
var Plugin = function (_a) {
|
|
27
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M6.7686,9.5034 C7.0246,9.5034 7.2806,9.6014 7.4756,9.7964 L14.2036,16.5244 C14.5946,16.9144 14.5946,17.5484 14.2036,17.9384 L11.8896,20.2524 C11.1086,21.0334 10.0846,21.4244 9.0616,21.4244 C8.0376,21.4244 7.0136,21.0334 6.2326,20.2524 L3.7476,17.7674 C2.1856,16.2054 2.1856,13.6724 3.7476,12.1104 L6.0616,9.7964 C6.2566,9.6014 6.5126,9.5034 6.7686,9.5034 Z M6.7686,11.9174 L5.1616,13.5244 C4.3816,14.3044 4.3816,15.5734 5.1616,16.3524 L7.6466,18.8384 C8.0246,19.2164 8.5266,19.4244 9.0616,19.4244 C9.5956,19.4244 10.0976,19.2164 10.4756,18.8384 L12.0826,17.2314 L6.7686,11.9174 Z M14.9387,2.576 C15.9627,2.576 16.9857,2.967 17.7667,3.748 L20.2527,6.233 C21.8147,7.795 21.8147,10.328 20.2527,11.89 L17.9387,14.204 C17.7437,14.399 17.4877,14.497 17.2317,14.497 C16.9757,14.497 16.7197,14.399 16.5247,14.204 L9.7967,7.476 C9.4057,7.085 9.4057,6.452 9.7967,6.062 L12.1107,3.748 C12.8917,2.967 13.9147,2.576 14.9387,2.576 Z M14.9387,4.576 C14.4047,4.576 13.9027,4.784 13.5247,5.162 L11.9177,6.769 L17.2317,12.082 L18.8377,10.476 C19.6177,9.696 19.6177,8.427 18.8377,7.647 L16.3527,5.162 C15.9747,4.784 15.4727,4.576 14.9387,4.576 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "2", d: "M5.2577,18.7423 L2.9147,21.0853 M18.7423,5.2577 L21.0853,2.9147 M10.1817,10.62 L8.7747,12.027 M13.38,13.8183 L11.973,15.2253" })] })) })));
|
|
29
|
+
};
|
|
30
|
+
exports.default = Plugin;
|
|
@@ -88,6 +88,7 @@ declare const fillIcons: {
|
|
|
88
88
|
readonly ic_photo: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
89
89
|
readonly ic_pin: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
90
90
|
readonly ic_plan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
91
|
+
readonly ic_plugin: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
91
92
|
readonly ic_plus_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
92
93
|
readonly ic_plus_round: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
93
94
|
readonly ic_post_free: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -106,6 +106,7 @@ var Paste_1 = __importDefault(require("./Paste"));
|
|
|
106
106
|
var Photo_1 = __importDefault(require("./Photo"));
|
|
107
107
|
var Pin_1 = __importDefault(require("./Pin"));
|
|
108
108
|
var Plan_1 = __importDefault(require("./Plan"));
|
|
109
|
+
var Plugin_1 = __importDefault(require("./Plugin"));
|
|
109
110
|
var PlusCircle_1 = __importDefault(require("./PlusCircle"));
|
|
110
111
|
var PlusRound_1 = __importDefault(require("./PlusRound"));
|
|
111
112
|
var PostFree_1 = __importDefault(require("./PostFree"));
|
|
@@ -262,6 +263,7 @@ var fillIcons = {
|
|
|
262
263
|
ic_photo: Photo_1.default,
|
|
263
264
|
ic_pin: Pin_1.default,
|
|
264
265
|
ic_plan: Plan_1.default,
|
|
266
|
+
ic_plugin: Plugin_1.default,
|
|
265
267
|
ic_plus_circle: PlusCircle_1.default,
|
|
266
268
|
ic_plus_round: PlusRound_1.default,
|
|
267
269
|
ic_post_free: PostFree_1.default,
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
26
|
+
var Plugin = function (_a) {
|
|
27
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M6.7686,9.5034 C7.0246,9.5034 7.2806,9.6014 7.4756,9.7964 L14.2036,16.5244 C14.5946,16.9144 14.5946,17.5484 14.2036,17.9384 L11.8896,20.2524 C11.1086,21.0334 10.0846,21.4244 9.0616,21.4244 C8.0376,21.4244 7.0136,21.0334 6.2326,20.2524 L3.7476,17.7674 C2.1856,16.2054 2.1856,13.6724 3.7476,12.1104 L6.0616,9.7964 C6.2566,9.6014 6.5126,9.5034 6.7686,9.5034 Z M6.7686,11.2104 L4.8086,13.1704 C4.3366,13.6434 4.0756,14.2704 4.0756,14.9384 C4.0756,15.6064 4.3366,16.2344 4.8086,16.7064 L7.2936,19.1914 C7.7656,19.6644 8.3936,19.9244 9.0616,19.9244 C9.7296,19.9244 10.3566,19.6644 10.8296,19.1914 L12.7896,17.2314 L6.7686,11.2104 Z M14.9386,2.576 C15.9626,2.576 16.9856,2.967 17.7666,3.748 L20.2526,6.233 C21.8146,7.795 21.8146,10.328 20.2526,11.89 L17.9386,14.204 C17.7436,14.399 17.4876,14.497 17.2316,14.497 C16.9756,14.497 16.7196,14.399 16.5246,14.204 L9.7966,7.476 C9.4056,7.085 9.4056,6.452 9.7966,6.062 L12.1106,3.748 C12.8916,2.967 13.9146,2.576 14.9386,2.576 Z M14.9386,4.076 C14.2706,4.076 13.6426,4.336 13.1706,4.808 L11.2106,6.769 L17.2316,12.79 L19.1916,10.829 C19.6636,10.357 19.9236,9.729 19.9236,9.061 C19.9236,8.394 19.6636,7.766 19.1916,7.294 L16.7066,4.808 C16.2346,4.336 15.6066,4.076 14.9386,4.076 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "1.5", d: "M5.2577,18.7423 L2.9147,21.0853 M18.7423,5.2577 L21.0853,2.9147 M10.1817,10.62 L8.7747,12.027 M13.38,13.8183 L11.973,15.2253" })] })) })));
|
|
29
|
+
};
|
|
30
|
+
exports.default = Plugin;
|
|
@@ -150,6 +150,7 @@ declare const lineIcons: {
|
|
|
150
150
|
readonly ic_photo: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
151
151
|
readonly ic_photo_multiple: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
152
152
|
readonly ic_plan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
153
|
+
readonly ic_plugin: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
153
154
|
readonly ic_plus: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
154
155
|
readonly ic_plus_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
155
156
|
readonly ic_plus_round: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -169,6 +169,7 @@ var PaymentSetting_1 = __importDefault(require("./PaymentSetting"));
|
|
|
169
169
|
var Photo_1 = __importDefault(require("./Photo"));
|
|
170
170
|
var PhotoMultiple_1 = __importDefault(require("./PhotoMultiple"));
|
|
171
171
|
var Plan_1 = __importDefault(require("./Plan"));
|
|
172
|
+
var Plugin_1 = __importDefault(require("./Plugin"));
|
|
172
173
|
var Plus_1 = __importDefault(require("./Plus"));
|
|
173
174
|
var PlusCircle_1 = __importDefault(require("./PlusCircle"));
|
|
174
175
|
var PlusRound_1 = __importDefault(require("./PlusRound"));
|
|
@@ -485,6 +486,7 @@ var lineIcons = {
|
|
|
485
486
|
ic_photo: Photo_1.default,
|
|
486
487
|
ic_photo_multiple: PhotoMultiple_1.default,
|
|
487
488
|
ic_plan: Plan_1.default,
|
|
489
|
+
ic_plugin: Plugin_1.default,
|
|
488
490
|
ic_plus: Plus_1.default,
|
|
489
491
|
ic_plus_circle: PlusCircle_1.default,
|
|
490
492
|
ic_plus_round: PlusRound_1.default,
|
|
@@ -3,7 +3,7 @@ import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
|
|
|
3
3
|
type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
|
|
4
4
|
export type BoxItemProps = {
|
|
5
5
|
selectionMode?: 'none' | 'use';
|
|
6
|
-
state?: 'normal' | 'disabled';
|
|
6
|
+
state?: 'normal' | 'disabled' | 'read_only';
|
|
7
7
|
checkboxMode?: 'none' | 'use';
|
|
8
8
|
checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
|
|
9
9
|
indicatorMode?: 'none' | 'use';
|
|
@@ -44,7 +44,7 @@ var paddingSpacing = {
|
|
|
44
44
|
function BoxItem(_a) {
|
|
45
45
|
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descTextWordBreak, descTextWordBreak = _m === void 0 ? 'normal' : _m, _o = _a.descLineLimit, descLineLimit = _o === void 0 ? 2 : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, overrideBorderColorKey = _a.overrideBorderColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
|
|
46
46
|
var handleClick = function () {
|
|
47
|
-
if (state === 'disabled') {
|
|
47
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
50
|
if (onClick) {
|
|
@@ -53,7 +53,7 @@ function BoxItem(_a) {
|
|
|
53
53
|
};
|
|
54
54
|
var handleIBtn1Click = function (e) {
|
|
55
55
|
e.stopPropagation();
|
|
56
|
-
if (state === 'disabled') {
|
|
56
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
59
|
if (onClickIBtn1) {
|
|
@@ -62,7 +62,7 @@ function BoxItem(_a) {
|
|
|
62
62
|
};
|
|
63
63
|
var handleIBtn2Click = function (e) {
|
|
64
64
|
e.stopPropagation();
|
|
65
|
-
if (state === 'disabled') {
|
|
65
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
66
66
|
return;
|
|
67
67
|
}
|
|
68
68
|
if (onClickIBtn2) {
|
|
@@ -71,28 +71,40 @@ function BoxItem(_a) {
|
|
|
71
71
|
};
|
|
72
72
|
var handleIBtn3Click = function (e) {
|
|
73
73
|
e.stopPropagation();
|
|
74
|
-
if (state === 'disabled') {
|
|
74
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
75
75
|
return;
|
|
76
76
|
}
|
|
77
77
|
if (onClickIBtn3) {
|
|
78
78
|
onClickIBtn3(id);
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
-
return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled'
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
|
|
82
|
+
? undefined
|
|
83
|
+
: selectState === 'selected'
|
|
84
|
+
? 'blue'
|
|
85
|
+
: undefined, overrideBorderColorKey: state === 'disabled'
|
|
82
86
|
? 'ui_cpnt_sheet_base'
|
|
83
87
|
: selectState === 'selected'
|
|
84
|
-
?
|
|
85
|
-
?
|
|
86
|
-
:
|
|
88
|
+
? state === 'read_only'
|
|
89
|
+
? 'ui_cpnt_sheet_border_04'
|
|
90
|
+
: overrideBorderColorKey
|
|
91
|
+
? overrideBorderColorKey
|
|
92
|
+
: undefined
|
|
87
93
|
: 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
|
|
88
94
|
display: 'flex',
|
|
89
95
|
flexDirection: 'row',
|
|
90
96
|
alignItems: 'center',
|
|
91
97
|
justifyContent: 'space-between',
|
|
92
98
|
maxWidth: '100%',
|
|
93
|
-
cursor: state === 'disabled'
|
|
94
|
-
|
|
95
|
-
|
|
99
|
+
cursor: state === 'disabled' || state === 'read_only'
|
|
100
|
+
? 'default'
|
|
101
|
+
: selectionMode === 'use'
|
|
102
|
+
? 'pointer'
|
|
103
|
+
: 'default'
|
|
104
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' || state === 'read_only'
|
|
105
|
+
? 'ui_cpnt_textlabel_sys_secondary'
|
|
106
|
+
: descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
|
107
|
+
(chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state === 'normal' ? 'normal' : 'disabled', baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
|
|
96
108
|
}
|
|
97
109
|
var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
|
|
98
110
|
var theme = _a.theme;
|
|
@@ -98,7 +98,7 @@ function ReactionButton(_a) {
|
|
|
98
98
|
return value;
|
|
99
99
|
return (0, numberHelper_1.formatCompactNumber)(value);
|
|
100
100
|
};
|
|
101
|
-
return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
|
|
101
|
+
return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
|
|
102
102
|
}
|
|
103
103
|
var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
|
|
104
104
|
var theme = _a.theme;
|
|
@@ -3,7 +3,7 @@ import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
|
|
|
3
3
|
type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
|
|
4
4
|
export type BoxItemProps = {
|
|
5
5
|
selectionMode?: 'none' | 'use';
|
|
6
|
-
state?: 'normal' | 'disabled';
|
|
6
|
+
state?: 'normal' | 'disabled' | 'read_only';
|
|
7
7
|
checkboxMode?: 'none' | 'use';
|
|
8
8
|
checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
|
|
9
9
|
indicatorMode?: 'none' | 'use';
|
|
@@ -44,7 +44,7 @@ var paddingSpacing = {
|
|
|
44
44
|
function BoxItem(_a) {
|
|
45
45
|
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descLineLimit, descLineLimit = _m === void 0 ? 2 : _m, _o = _a.descTextWordBreak, descTextWordBreak = _o === void 0 ? 'normal' : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, overrideBorderColorKey = _a.overrideBorderColorKey, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
|
|
46
46
|
var handleClick = function () {
|
|
47
|
-
if (state === 'disabled') {
|
|
47
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
50
|
if (onClick) {
|
|
@@ -53,7 +53,7 @@ function BoxItem(_a) {
|
|
|
53
53
|
};
|
|
54
54
|
var handleIBtn1Click = function (e) {
|
|
55
55
|
e.stopPropagation();
|
|
56
|
-
if (state === 'disabled') {
|
|
56
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
59
|
if (onClickIBtn1) {
|
|
@@ -62,7 +62,7 @@ function BoxItem(_a) {
|
|
|
62
62
|
};
|
|
63
63
|
var handleIBtn2Click = function (e) {
|
|
64
64
|
e.stopPropagation();
|
|
65
|
-
if (state === 'disabled') {
|
|
65
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
66
66
|
return;
|
|
67
67
|
}
|
|
68
68
|
if (onClickIBtn2) {
|
|
@@ -71,27 +71,39 @@ function BoxItem(_a) {
|
|
|
71
71
|
};
|
|
72
72
|
var handleIBtn3Click = function (e) {
|
|
73
73
|
e.stopPropagation();
|
|
74
|
-
if (state === 'disabled') {
|
|
74
|
+
if (state === 'disabled' || state === 'read_only') {
|
|
75
75
|
return;
|
|
76
76
|
}
|
|
77
77
|
if (onClickIBtn3) {
|
|
78
78
|
onClickIBtn3(id);
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
-
return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled'
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
|
|
82
|
+
? undefined
|
|
83
|
+
: selectState === 'selected'
|
|
84
|
+
? 'blue'
|
|
85
|
+
: undefined, overrideBorderColorKey: state === 'disabled'
|
|
82
86
|
? 'ui_cpnt_sheet_base'
|
|
83
87
|
: selectState === 'selected'
|
|
84
|
-
?
|
|
85
|
-
?
|
|
86
|
-
:
|
|
88
|
+
? state === 'read_only'
|
|
89
|
+
? 'ui_cpnt_sheet_border_04'
|
|
90
|
+
: overrideBorderColorKey
|
|
91
|
+
? overrideBorderColorKey
|
|
92
|
+
: undefined
|
|
87
93
|
: 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
|
|
88
94
|
display: 'flex',
|
|
89
95
|
flexDirection: 'row',
|
|
90
96
|
alignItems: 'center',
|
|
91
97
|
justifyContent: 'space-between',
|
|
92
|
-
cursor: state === 'disabled'
|
|
93
|
-
|
|
94
|
-
|
|
98
|
+
cursor: state === 'disabled' || state === 'read_only'
|
|
99
|
+
? 'default'
|
|
100
|
+
: selectionMode === 'use'
|
|
101
|
+
? 'pointer'
|
|
102
|
+
: 'default'
|
|
103
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' || state === 'read_only'
|
|
104
|
+
? 'ui_cpnt_textlabel_sys_secondary'
|
|
105
|
+
: descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
|
106
|
+
(chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
|
|
95
107
|
}
|
|
96
108
|
var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
|
|
97
109
|
var theme = _a.theme;
|
|
@@ -97,7 +97,7 @@ function ReactionButton(_a) {
|
|
|
97
97
|
return value;
|
|
98
98
|
return (0, numberHelper_1.formatCompactNumber)(value);
|
|
99
99
|
};
|
|
100
|
-
return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
|
|
100
|
+
return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
|
|
101
101
|
}
|
|
102
102
|
var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n"])));
|
|
103
103
|
var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ReactionButtonStyle);
|
package/package.json
CHANGED