pds-dev-kit-web 1.3.8 → 1.3.9
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/line/ArrowLeftThin.d.ts +4 -0
- package/dist/src/common/assets/icons/line/ArrowLeftThin.js +34 -0
- package/dist/src/common/assets/icons/line/ArrowRightThin.d.ts +4 -0
- package/dist/src/common/assets/icons/line/ArrowRightThin.js +34 -0
- package/dist/src/common/assets/icons/line/Download.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Download.js +34 -0
- package/dist/src/common/assets/icons/line/Folder.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Folder.js +34 -0
- package/dist/src/common/assets/icons/line/index.d.ts +4 -0
- package/dist/src/common/assets/icons/line/index.js +8 -0
- package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
- package/dist/src/common/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +60 -57
- package/dist/src/common/styles/colorSet/index.js +3 -3
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/desktop/components/AdminList/AdminList.d.ts +3 -2
- package/dist/src/desktop/components/AdminList/AdminList.js +52 -16
- package/dist/src/desktop/components/AdminList/HeaderRow.d.ts +1 -1
- package/dist/src/desktop/components/AdminList/HeaderRow.js +2 -2
- package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +1 -1
- package/dist/src/desktop/components/AdminListItem/AdminListItem.js +9 -8
- package/dist/src/desktop/components/Checkbox/Checkbox.js +2 -1
- package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.d.ts +4 -1
- package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.js +4 -4
- package/dist/src/desktop/components/Dropdown/Dropdown.d.ts +2 -2
- package/dist/src/desktop/components/Dropdown/Dropdown.js +3 -3
- package/dist/src/mobile/components/Dropdown/Dropdown.d.ts +2 -2
- package/dist/src/mobile/components/Dropdown/Dropdown.js +2 -2
- package/package.json +1 -1
- package/release-note.md +18 -7
|
@@ -0,0 +1,34 @@
|
|
|
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
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var ArrowLeftThin = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: ".5", d: "M14.5773,19.5001 L7.6663,12.5891 C7.3413,12.2641 7.3413,11.7361 7.6663,11.4111 L14.5773,4.5001" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = ArrowLeftThin;
|
|
@@ -0,0 +1,34 @@
|
|
|
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
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var ArrowRightThin = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: ".5", d: "M9.4226,4.4998 L16.3336,11.4108 C16.6586,11.7358 16.6586,12.2638 16.3336,12.5888 L9.4226,19.4998" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = ArrowRightThin;
|
|
@@ -0,0 +1,34 @@
|
|
|
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
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var Download = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeWidth: "1.5", d: "M2.9862,17.9383317 L2.9862,19.0423317 C2.9862,19.7843317 3.6952,20.3863317 4.5702,20.3863317 L19.4292,20.3863317 C20.3042,20.3863317 21.0142,19.7843317 21.0142,19.0423317 L21.0142,17.5903317 M6.8379,10.9865317 L11.9999,16.4265317 L17.5199,10.9865317 M12,16.4265317 L12,3.4" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = Download;
|
|
@@ -0,0 +1,34 @@
|
|
|
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
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var Folder = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: "none", stroke: color, strokeWidth: "1.5", d: "M22.0516,11.7128 L20.6576,17.8908 C20.4536,18.8198 19.6486,19.4788 18.7196,19.4788 L4.9806,19.4788 C3.7006,19.4788 2.7486,18.2438 3.0426,16.9488 L4.4256,10.7718 C4.6416,9.8418 5.4456,9.1708 6.3636,9.1708 L20.1016,9.1708 C20.1696,9.1708 20.2376,9.1708 20.3056,9.1948 C21.4966,9.3128 22.3236,10.4888 22.0516,11.7128 Z M20.306,8.3827 L20.306,9.1947 C20.238,9.1707 20.17,9.1707 20.102,9.1707 L6.364,9.1707 C5.446,9.1707 4.641,9.8417 4.426,10.7717 L3.043,16.9487 C2.748,18.2437 3.7,19.4787 4.981,19.4787 L4.879,19.4787 C3.621,19.4787 2.59,18.4197 2.59,17.1137 L2.59,6.3467 C2.59,5.0287 3.621,3.9697 4.879,3.9697 L7.588,3.9697 C8.296,3.9697 8.981,4.2187 9.524,4.6737 L10.601,5.5767 C10.932,5.8537 11.35,6.0057 11.782,6.0057 L18.016,6.0057 C19.275,6.0057 20.306,7.0767 20.306,8.3827 Z" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = Folder;
|
|
@@ -5,9 +5,11 @@ declare const lineIcons: {
|
|
|
5
5
|
readonly ic_arrow_left: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
6
6
|
readonly ic_arrow_left_2: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
7
7
|
readonly ic_arrow_left_bold: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
8
|
+
readonly ic_arrow_left_thin: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
8
9
|
readonly ic_arrow_right: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
9
10
|
readonly ic_arrow_right_2: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
10
11
|
readonly ic_arrow_right_bold: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
12
|
+
readonly ic_arrow_right_thin: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
11
13
|
readonly ic_arrow_round_left: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
12
14
|
readonly ic_arrow_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
13
15
|
readonly ic_arrow_up_bold: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -34,6 +36,7 @@ declare const lineIcons: {
|
|
|
34
36
|
readonly ic_dashboard: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
35
37
|
readonly ic_design_preference: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
36
38
|
readonly ic_developer: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
39
|
+
readonly ic_download: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
37
40
|
readonly ic_edit: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
38
41
|
readonly ic_editor: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
39
42
|
readonly ic_end: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -41,6 +44,7 @@ declare const lineIcons: {
|
|
|
41
44
|
readonly ic_eye: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
42
45
|
readonly ic_eye_close: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
43
46
|
readonly ic_filter: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
47
|
+
readonly ic_folder: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
44
48
|
readonly ic_information: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
45
49
|
readonly ic_language: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
46
50
|
readonly ic_links: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -8,9 +8,11 @@ var ArrowDownBold_1 = __importDefault(require("./ArrowDownBold"));
|
|
|
8
8
|
var ArrowLeft_1 = __importDefault(require("./ArrowLeft"));
|
|
9
9
|
var ArrowLeft2_1 = __importDefault(require("./ArrowLeft2"));
|
|
10
10
|
var ArrowLeftBold_1 = __importDefault(require("./ArrowLeftBold"));
|
|
11
|
+
var ArrowLeftThin_1 = __importDefault(require("./ArrowLeftThin"));
|
|
11
12
|
var ArrowRight_1 = __importDefault(require("./ArrowRight"));
|
|
12
13
|
var ArrowRight2_1 = __importDefault(require("./ArrowRight2"));
|
|
13
14
|
var ArrowRightBold_1 = __importDefault(require("./ArrowRightBold"));
|
|
15
|
+
var ArrowRightThin_1 = __importDefault(require("./ArrowRightThin"));
|
|
14
16
|
var ArrowRoundLeft_1 = __importDefault(require("./ArrowRoundLeft"));
|
|
15
17
|
var ArrowUp_1 = __importDefault(require("./ArrowUp"));
|
|
16
18
|
var ArrowUpBold_1 = __importDefault(require("./ArrowUpBold"));
|
|
@@ -37,6 +39,7 @@ var Cs_1 = __importDefault(require("./Cs"));
|
|
|
37
39
|
var Dashboard_1 = __importDefault(require("./Dashboard"));
|
|
38
40
|
var DesignPreference_1 = __importDefault(require("./DesignPreference"));
|
|
39
41
|
var Developer_1 = __importDefault(require("./Developer"));
|
|
42
|
+
var Download_1 = __importDefault(require("./Download"));
|
|
40
43
|
var Edit_1 = __importDefault(require("./Edit"));
|
|
41
44
|
var Editor_1 = __importDefault(require("./Editor"));
|
|
42
45
|
var End_1 = __importDefault(require("./End"));
|
|
@@ -44,6 +47,7 @@ var Error_1 = __importDefault(require("./Error"));
|
|
|
44
47
|
var Eye_1 = __importDefault(require("./Eye"));
|
|
45
48
|
var EyeClose_1 = __importDefault(require("./EyeClose"));
|
|
46
49
|
var Filter_1 = __importDefault(require("./Filter"));
|
|
50
|
+
var Folder_1 = __importDefault(require("./Folder"));
|
|
47
51
|
var Information_1 = __importDefault(require("./Information"));
|
|
48
52
|
var Language_1 = __importDefault(require("./Language"));
|
|
49
53
|
var Links_1 = __importDefault(require("./Links"));
|
|
@@ -138,9 +142,11 @@ var lineIcons = {
|
|
|
138
142
|
ic_arrow_left: ArrowLeft_1.default,
|
|
139
143
|
ic_arrow_left_2: ArrowLeft2_1.default,
|
|
140
144
|
ic_arrow_left_bold: ArrowLeftBold_1.default,
|
|
145
|
+
ic_arrow_left_thin: ArrowLeftThin_1.default,
|
|
141
146
|
ic_arrow_right: ArrowRight_1.default,
|
|
142
147
|
ic_arrow_right_2: ArrowRight2_1.default,
|
|
143
148
|
ic_arrow_right_bold: ArrowRightBold_1.default,
|
|
149
|
+
ic_arrow_right_thin: ArrowRightThin_1.default,
|
|
144
150
|
ic_arrow_round_left: ArrowRoundLeft_1.default,
|
|
145
151
|
ic_arrow_up: ArrowUp_1.default,
|
|
146
152
|
ic_arrow_up_bold: ArrowUpBold_1.default,
|
|
@@ -167,6 +173,7 @@ var lineIcons = {
|
|
|
167
173
|
ic_dashboard: Dashboard_1.default,
|
|
168
174
|
ic_design_preference: DesignPreference_1.default,
|
|
169
175
|
ic_developer: Developer_1.default,
|
|
176
|
+
ic_download: Download_1.default,
|
|
170
177
|
ic_edit: Edit_1.default,
|
|
171
178
|
ic_editor: Editor_1.default,
|
|
172
179
|
ic_end: End_1.default,
|
|
@@ -174,6 +181,7 @@ var lineIcons = {
|
|
|
174
181
|
ic_eye: Eye_1.default,
|
|
175
182
|
ic_eye_close: EyeClose_1.default,
|
|
176
183
|
ic_filter: Filter_1.default,
|
|
184
|
+
ic_folder: Folder_1.default,
|
|
177
185
|
ic_information: Information_1.default,
|
|
178
186
|
ic_language: Language_1.default,
|
|
179
187
|
ic_links: Links_1.default,
|
|
@@ -149,5 +149,6 @@
|
|
|
149
149
|
"usr_menu_active": "darkblue500",
|
|
150
150
|
"usr_menu_background": "grey950",
|
|
151
151
|
"sys_cpnt_base_white_opacity50": "white/opacity50",
|
|
152
|
-
"sys_widget_dark_01": "grey950"
|
|
152
|
+
"sys_widget_dark_01": "grey950",
|
|
153
|
+
"usr_menu_background_gradient_opacity00": "grey950/opacity00"
|
|
153
154
|
}
|
|
@@ -149,5 +149,6 @@
|
|
|
149
149
|
"usr_menu_active": "blue500",
|
|
150
150
|
"usr_menu_background": "white",
|
|
151
151
|
"sys_cpnt_base_white_opacity50": "white/opacity50",
|
|
152
|
-
"sys_widget_dark_01": "grey900"
|
|
152
|
+
"sys_widget_dark_01": "grey900",
|
|
153
|
+
"usr_menu_background_gradient_opacity00": "white/opacity00"
|
|
153
154
|
}
|
|
@@ -479,5 +479,6 @@
|
|
|
479
479
|
"ui_menu_active": "usr_menu_active",
|
|
480
480
|
"ui_menu_background": "usr_menu_background",
|
|
481
481
|
"ui_cpnt_video_progress_base": "sys_cpnt_base_white_opacity50",
|
|
482
|
-
"ui_cpnt_icon_sys_dark": "sys_widget_dark_01"
|
|
482
|
+
"ui_cpnt_icon_sys_dark": "sys_widget_dark_01",
|
|
483
|
+
"ui_menu_background_gradient_opacity00": "usr_menu_background_gradient_opacity00"
|
|
483
484
|
}
|
|
@@ -1,61 +1,4 @@
|
|
|
1
1
|
declare const colorSet: {
|
|
2
|
-
readonly SemanticColor: {
|
|
3
|
-
blue500: string;
|
|
4
|
-
blue700: string;
|
|
5
|
-
blue300: string;
|
|
6
|
-
green700: string;
|
|
7
|
-
green500: string;
|
|
8
|
-
green300: string;
|
|
9
|
-
red500: string;
|
|
10
|
-
grey900: string;
|
|
11
|
-
grey500: string;
|
|
12
|
-
grey400: string;
|
|
13
|
-
grey100: string;
|
|
14
|
-
grey50: string;
|
|
15
|
-
white: string;
|
|
16
|
-
black: string;
|
|
17
|
-
darkblue500: string;
|
|
18
|
-
grey950: string;
|
|
19
|
-
darkgrey900: string;
|
|
20
|
-
darkgrey500: string;
|
|
21
|
-
darkgrey400: string;
|
|
22
|
-
darkgrey100: string;
|
|
23
|
-
darkgrey50: string;
|
|
24
|
-
darkred500: string;
|
|
25
|
-
darkgreen700: string;
|
|
26
|
-
orange500: string;
|
|
27
|
-
darkorange500: string;
|
|
28
|
-
opacity00: string;
|
|
29
|
-
opacity20: string;
|
|
30
|
-
opacity30: string;
|
|
31
|
-
opacity65: string;
|
|
32
|
-
darkgreen500: string;
|
|
33
|
-
grey70: string;
|
|
34
|
-
navy500: string;
|
|
35
|
-
lightgreen500: string;
|
|
36
|
-
pink500: string;
|
|
37
|
-
darkgrey70: string;
|
|
38
|
-
darknavy500: string;
|
|
39
|
-
darkpink500: string;
|
|
40
|
-
darklightgreen500: string;
|
|
41
|
-
opacity10: string;
|
|
42
|
-
grey600: string;
|
|
43
|
-
darkgrey600: string;
|
|
44
|
-
skyblue500: string;
|
|
45
|
-
skyblue300: string;
|
|
46
|
-
pink300: string;
|
|
47
|
-
lightpink500: string;
|
|
48
|
-
darkblue300: string;
|
|
49
|
-
darkblue700: string;
|
|
50
|
-
darkgreen300: string;
|
|
51
|
-
darkskyblue500: string;
|
|
52
|
-
navy100: string;
|
|
53
|
-
darknavy100: string;
|
|
54
|
-
opacity80: string;
|
|
55
|
-
opacity50: string;
|
|
56
|
-
grey30: string;
|
|
57
|
-
opacity95: string;
|
|
58
|
-
};
|
|
59
2
|
readonly PaletteColor_Dark: {
|
|
60
3
|
sys_container_background_01: string;
|
|
61
4
|
sys_container_background_02: string;
|
|
@@ -208,6 +151,7 @@ declare const colorSet: {
|
|
|
208
151
|
usr_menu_background: string;
|
|
209
152
|
sys_cpnt_base_white_opacity50: string;
|
|
210
153
|
sys_widget_dark_01: string;
|
|
154
|
+
usr_menu_background_gradient_opacity00: string;
|
|
211
155
|
};
|
|
212
156
|
readonly PaletteColor_light: {
|
|
213
157
|
sys_container_background_01: string;
|
|
@@ -361,6 +305,7 @@ declare const colorSet: {
|
|
|
361
305
|
usr_menu_background: string;
|
|
362
306
|
sys_cpnt_base_white_opacity50: string;
|
|
363
307
|
sys_widget_dark_01: string;
|
|
308
|
+
usr_menu_background_gradient_opacity00: string;
|
|
364
309
|
};
|
|
365
310
|
readonly UIColor: {
|
|
366
311
|
ui_cpnt_button_fill_base_primary: string;
|
|
@@ -844,6 +789,64 @@ declare const colorSet: {
|
|
|
844
789
|
ui_menu_background: string;
|
|
845
790
|
ui_cpnt_video_progress_base: string;
|
|
846
791
|
ui_cpnt_icon_sys_dark: string;
|
|
792
|
+
ui_menu_background_gradient_opacity00: string;
|
|
793
|
+
};
|
|
794
|
+
readonly SemanticColor: {
|
|
795
|
+
blue500: string;
|
|
796
|
+
blue700: string;
|
|
797
|
+
blue300: string;
|
|
798
|
+
green700: string;
|
|
799
|
+
green500: string;
|
|
800
|
+
green300: string;
|
|
801
|
+
red500: string;
|
|
802
|
+
grey900: string;
|
|
803
|
+
grey500: string;
|
|
804
|
+
grey400: string;
|
|
805
|
+
grey100: string;
|
|
806
|
+
grey50: string;
|
|
807
|
+
white: string;
|
|
808
|
+
black: string;
|
|
809
|
+
darkblue500: string;
|
|
810
|
+
grey950: string;
|
|
811
|
+
darkgrey900: string;
|
|
812
|
+
darkgrey500: string;
|
|
813
|
+
darkgrey400: string;
|
|
814
|
+
darkgrey100: string;
|
|
815
|
+
darkgrey50: string;
|
|
816
|
+
darkred500: string;
|
|
817
|
+
darkgreen700: string;
|
|
818
|
+
orange500: string;
|
|
819
|
+
darkorange500: string;
|
|
820
|
+
opacity00: string;
|
|
821
|
+
opacity20: string;
|
|
822
|
+
opacity30: string;
|
|
823
|
+
opacity65: string;
|
|
824
|
+
darkgreen500: string;
|
|
825
|
+
grey70: string;
|
|
826
|
+
navy500: string;
|
|
827
|
+
lightgreen500: string;
|
|
828
|
+
pink500: string;
|
|
829
|
+
darkgrey70: string;
|
|
830
|
+
darknavy500: string;
|
|
831
|
+
darkpink500: string;
|
|
832
|
+
darklightgreen500: string;
|
|
833
|
+
opacity10: string;
|
|
834
|
+
grey600: string;
|
|
835
|
+
darkgrey600: string;
|
|
836
|
+
skyblue500: string;
|
|
837
|
+
skyblue300: string;
|
|
838
|
+
pink300: string;
|
|
839
|
+
lightpink500: string;
|
|
840
|
+
darkblue300: string;
|
|
841
|
+
darkblue700: string;
|
|
842
|
+
darkgreen300: string;
|
|
843
|
+
darkskyblue500: string;
|
|
844
|
+
navy100: string;
|
|
845
|
+
darknavy100: string;
|
|
846
|
+
opacity80: string;
|
|
847
|
+
opacity50: string;
|
|
848
|
+
grey30: string;
|
|
849
|
+
opacity95: string;
|
|
847
850
|
};
|
|
848
851
|
};
|
|
849
852
|
export default colorSet;
|
|
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
|
-
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
7
|
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
9
8
|
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
10
9
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
10
|
+
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
11
11
|
var colorSet = {
|
|
12
|
-
SemanticColor: SemanticColor_json_1.default,
|
|
13
12
|
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
14
13
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
15
|
-
UIColor: UIColor_json_1.default
|
|
14
|
+
UIColor: UIColor_json_1.default,
|
|
15
|
+
SemanticColor: SemanticColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { PDSValueOption } from '../../../common';
|
|
4
4
|
declare type ColumnWidthType = 'small' | 'medium' | 'large';
|
|
5
5
|
declare type Props = {
|
|
6
|
-
selectionMode?: 'none' | '
|
|
6
|
+
selectionMode?: 'none' | 'single' | 'multi';
|
|
7
7
|
headerRowMode?: 'none' | 'use';
|
|
8
8
|
column2HeaderText: TFunctionResult;
|
|
9
9
|
column3HeaderText?: TFunctionResult;
|
|
@@ -56,6 +56,7 @@ declare type Props = {
|
|
|
56
56
|
children?: React.ReactNode;
|
|
57
57
|
onSelect?: (ids: number[]) => void;
|
|
58
58
|
selectedIds?: number[];
|
|
59
|
+
maintainIds?: number[];
|
|
59
60
|
};
|
|
60
|
-
declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickMBtn1, onClickMBtn2, onClickMBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect }: Props): JSX.Element;
|
|
61
|
+
declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickMBtn1, onClickMBtn2, onClickMBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect }: Props): JSX.Element;
|
|
61
62
|
export default AdminList;
|
|
@@ -53,7 +53,7 @@ var TextLabel_1 = require("../TextLabel");
|
|
|
53
53
|
var BulkActionBar_1 = __importDefault(require("./BulkActionBar"));
|
|
54
54
|
var HeaderRow_1 = __importDefault(require("./HeaderRow"));
|
|
55
55
|
function AdminList(_a) {
|
|
56
|
-
var _b = _a.selectionMode, selectionMode = _b === void 0 ? '
|
|
56
|
+
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, _t = _a.mBtnMode, mBtnMode = _t === void 0 ? 'mbtn_amount1' : _t, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, emptyText = _a.emptyText, _u = _a.scrollMode, scrollMode = _u === void 0 ? 'infinite' : _u, _v = _a.scrollVisibleType, scrollVisibleType = _v === void 0 ? 'moving' : _v, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect;
|
|
57
57
|
var selectAllMethods = (0, react_hook_form_1.useForm)();
|
|
58
58
|
var checkboxMethods = (0, react_hook_form_1.useForm)();
|
|
59
59
|
var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({ name: 'all', control: selectAllMethods.control });
|
|
@@ -67,20 +67,39 @@ function AdminList(_a) {
|
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
69
|
if (!selectedIds.length) {
|
|
70
|
-
setIsBulkActionBarOpen(false);
|
|
71
70
|
checkboxMethods.reset();
|
|
72
71
|
selectAllMethods.reset();
|
|
72
|
+
if (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.length) {
|
|
73
|
+
setIsBulkActionBarOpen(true);
|
|
74
|
+
maintainIds.forEach(function (id) { return checkboxMethods.setValue(id.toString(), true); });
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
setIsBulkActionBarOpen(false);
|
|
78
|
+
}
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
if (selectionMode === 'single') {
|
|
82
|
+
checkboxMethods.reset();
|
|
83
|
+
checkboxMethods.setValue(selectedIds[0].toString(), true);
|
|
73
84
|
return;
|
|
74
85
|
}
|
|
75
86
|
setIsBulkActionBarOpen(true);
|
|
76
87
|
selectedIds.forEach(function (val) { return checkboxMethods.setValue(val.toString(), true); });
|
|
77
88
|
}, [selectedIds]);
|
|
78
89
|
var handleSelectAllCheckbox = function () {
|
|
90
|
+
var allIds = Object.keys(checkboxMethods.getValues()).map(function (id) { return Number(id); });
|
|
91
|
+
var basicIds = allIds.filter(function (id) { return !(maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.includes(id)); });
|
|
79
92
|
if (!isAllCheckboxSelected) {
|
|
80
|
-
var allIds = Object.keys(checkboxMethods.getValues()).map(function (id) { return Number(id); });
|
|
81
93
|
allIds.forEach(function (id) { return checkboxMethods.setValue(id.toString(), true); });
|
|
82
94
|
if (onSelect) {
|
|
83
|
-
onSelect(
|
|
95
|
+
onSelect(basicIds);
|
|
96
|
+
}
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
if (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.length) {
|
|
100
|
+
basicIds.forEach(function (id) { return checkboxMethods.setValue(id.toString(), false); });
|
|
101
|
+
if (onSelect) {
|
|
102
|
+
onSelect([]);
|
|
84
103
|
}
|
|
85
104
|
return;
|
|
86
105
|
}
|
|
@@ -93,17 +112,27 @@ function AdminList(_a) {
|
|
|
93
112
|
if (!selectedIds) {
|
|
94
113
|
return;
|
|
95
114
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
115
|
+
switch (selectionMode) {
|
|
116
|
+
case 'single': {
|
|
117
|
+
if (onSelect) {
|
|
118
|
+
onSelect([id]);
|
|
119
|
+
}
|
|
120
|
+
break;
|
|
121
|
+
}
|
|
122
|
+
case 'multi': {
|
|
123
|
+
if (!selectedIds.includes(id)) {
|
|
124
|
+
checkboxMethods.setValue(id.toString(), true);
|
|
125
|
+
if (onSelect) {
|
|
126
|
+
onSelect(__spreadArray(__spreadArray([], selectedIds, true), [id], false));
|
|
127
|
+
}
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
var filteredId = selectedIds.filter(function (prevId) { return prevId !== id; });
|
|
131
|
+
checkboxMethods.setValue(id.toString(), false);
|
|
132
|
+
if (onSelect) {
|
|
133
|
+
onSelect(filteredId);
|
|
134
|
+
}
|
|
100
135
|
}
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
var filteredId = selectedIds.filter(function (prevId) { return prevId !== id; });
|
|
104
|
-
checkboxMethods.setValue(id.toString(), false);
|
|
105
|
-
if (onSelect) {
|
|
106
|
-
onSelect(filteredId);
|
|
107
136
|
}
|
|
108
137
|
};
|
|
109
138
|
var getActionButtonCount = function () {
|
|
@@ -118,6 +147,12 @@ function AdminList(_a) {
|
|
|
118
147
|
return 0;
|
|
119
148
|
}
|
|
120
149
|
};
|
|
150
|
+
var totalItemCount = (0, react_1.useMemo)(function () {
|
|
151
|
+
if (maintainIds && selectedIds) {
|
|
152
|
+
return maintainIds.length + selectedIds.length;
|
|
153
|
+
}
|
|
154
|
+
return (selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) || 0;
|
|
155
|
+
}, [selectedIds, maintainIds]);
|
|
121
156
|
var childrenWithWidthProps = react_1.default.Children.map(children, function (child) {
|
|
122
157
|
if (react_1.default.isValidElement(child)) {
|
|
123
158
|
return react_1.default.cloneElement(child, {
|
|
@@ -141,13 +176,14 @@ function AdminList(_a) {
|
|
|
141
176
|
onClickQuickActionBtn2: onClickQuickActionBtn2,
|
|
142
177
|
onClickQuickActionBtn3: onClickQuickActionBtn3,
|
|
143
178
|
selectionMode: selectionMode,
|
|
144
|
-
onClickItem: handleSelectItem
|
|
179
|
+
onClickItem: handleSelectItem,
|
|
180
|
+
selectedState: (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.includes(child.props.id)) ? 'maintain' : 'basic'
|
|
145
181
|
});
|
|
146
182
|
}
|
|
147
183
|
return child;
|
|
148
184
|
});
|
|
149
185
|
return (react_1.default.createElement(S_AdminList, null,
|
|
150
|
-
isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount:
|
|
186
|
+
isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, mBtnMode: mBtnMode, mBtn1Text: mBtn1Text, mBtn2Text: mBtn2Text, mBtn3Text: mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickMBtn1: onClickMBtn1, onClickMBtn2: onClickMBtn2, onClickMBtn3: onClickMBtn3 })),
|
|
151
187
|
headerRowMode === 'use' && (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, selectAllMethods),
|
|
152
188
|
react_1.default.createElement("form", null,
|
|
153
189
|
react_1.default.createElement(HeaderRow_1.default, { selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { TFunctionResult } from 'i18next';
|
|
3
3
|
declare type ColumnWidthType = 'small' | 'medium' | 'large';
|
|
4
4
|
declare type Props = {
|
|
5
|
-
selectionMode: 'none' | '
|
|
5
|
+
selectionMode: 'none' | 'single' | 'multi';
|
|
6
6
|
column2HeaderText?: TFunctionResult;
|
|
7
7
|
column3HeaderText?: TFunctionResult;
|
|
8
8
|
column3HeaderWidth?: ColumnWidthType;
|
|
@@ -32,10 +32,10 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
32
32
|
var Checkbox_1 = require("../Checkbox");
|
|
33
33
|
var TextLabel_1 = require("../TextLabel");
|
|
34
34
|
function HeaderRow(_a) {
|
|
35
|
-
var _b = _a.selectionMode, selectionMode = _b === void 0 ? '
|
|
35
|
+
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
|
|
36
36
|
return (react_1.default.createElement(S_HeaderRow, null,
|
|
37
37
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
|
|
38
|
-
selectionMode === '
|
|
38
|
+
selectionMode === 'multi' && (react_1.default.createElement(S_CheckBox, null,
|
|
39
39
|
react_1.default.createElement(Checkbox_1.Checkbox, { name: "all", onChange: onClickSelectAllCheckbox }))),
|
|
40
40
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
|
|
41
41
|
react_1.default.createElement(S_FlexColumn, null,
|
|
@@ -5,7 +5,7 @@ declare type ColumnWidthType = 'small' | 'medium' | 'large';
|
|
|
5
5
|
declare type ColumnTextType = 'normal' | 'active' | 'inactive' | 'report';
|
|
6
6
|
declare type Props = {
|
|
7
7
|
rowSize?: 'high' | 'medium' | 'low';
|
|
8
|
-
selectionMode?: 'none' | '
|
|
8
|
+
selectionMode?: 'none' | 'single' | 'multi';
|
|
9
9
|
column2Type?: 'image_text' | 'text_only';
|
|
10
10
|
imageSrc?: string;
|
|
11
11
|
imageShapeType?: 'round' | 'circular' | 'rectangle';
|
|
@@ -30,7 +30,7 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
30
30
|
var Checkbox_1 = require("../Checkbox");
|
|
31
31
|
var TextLabel_1 = require("../TextLabel");
|
|
32
32
|
function AdminListItem(_a) {
|
|
33
|
-
var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.selectionMode, selectionMode = _c === void 0 ? '
|
|
33
|
+
var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'multi' : _c, _d = _a.column2Type, column2Type = _d === void 0 ? 'image_text' : _d, imageSrc = _a.imageSrc, _e = _a.imageShapeType, imageShapeType = _e === void 0 ? 'rectangle' : _e, _f = _a.imageRadius, imageRadius = _f === void 0 ? 8 : _f, _g = _a.imageRatio, imageRatio = _g === void 0 ? '16_9' : _g, column2Text = _a.column2Text, column3Text = _a.column3Text, _h = _a.column3TextWidth, column3TextWidth = _h === void 0 ? 'small' : _h, _j = _a.column3TextStyleTheme, column3TextStyleTheme = _j === void 0 ? 'normal' : _j, column4Text = _a.column4Text, _k = _a.column4TextWidth, column4TextWidth = _k === void 0 ? 'small' : _k, _l = _a.column4TextStyleTheme, column4TextStyleTheme = _l === void 0 ? 'normal' : _l, column5Text = _a.column5Text, _m = _a.column5TextWidth, column5TextWidth = _m === void 0 ? 'small' : _m, _o = _a.column5TextStyleTheme, column5TextStyleTheme = _o === void 0 ? 'normal' : _o, column6Text = _a.column6Text, _p = _a.column6TextWidth, column6TextWidth = _p === void 0 ? 'small' : _p, _q = _a.column6TextStyleTheme, column6TextStyleTheme = _q === void 0 ? 'normal' : _q, column7Text = _a.column7Text, _r = _a.column7TextWidth, column7TextWidth = _r === void 0 ? 'small' : _r, _s = _a.column7TextStyleTheme, column7TextStyleTheme = _s === void 0 ? 'normal' : _s, column8Text = _a.column8Text, _t = _a.column8TextWidth, column8TextWidth = _t === void 0 ? 'small' : _t, _u = _a.column8TextStyleTheme, column8TextStyleTheme = _u === void 0 ? 'normal' : _u, column9Text = _a.column9Text, _v = _a.column9TextWidth, column9TextWidth = _v === void 0 ? 'small' : _v, _w = _a.column9TextStyleTheme, column9TextStyleTheme = _w === void 0 ? 'normal' : _w, column10Text = _a.column10Text, _x = _a.column10TextWidth, column10TextWidth = _x === void 0 ? 'small' : _x, _y = _a.column10TextStyleTheme, column10TextStyleTheme = _y === void 0 ? 'normal' : _y, _z = _a.quickActionBtnMode, quickActionBtnMode = _z === void 0 ? 'btn_amount2' : _z, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _0 = _a.quickActionBtnType, quickActionBtnType = _0 === void 0 ? 'fix' : _0, _1 = _a.quickActionBtn1State, quickActionBtn1State = _1 === void 0 ? 'normal' : _1, _2 = _a.quickActionBtn2State, quickActionBtn2State = _2 === void 0 ? 'normal' : _2, _3 = _a.quickActionBtn3State, quickActionBtn3State = _3 === void 0 ? 'normal' : _3, _4 = _a.selectedState, selectedState = _4 === void 0 ? 'basic' : _4, id = _a.id, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
|
|
34
34
|
var methods = (0, react_hook_form_1.useFormContext)();
|
|
35
35
|
var isSelected = (0, react_hook_form_1.useWatch)({
|
|
36
36
|
control: methods.control,
|
|
@@ -43,7 +43,6 @@ function AdminListItem(_a) {
|
|
|
43
43
|
return;
|
|
44
44
|
var _a = contentRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
|
|
45
45
|
var isTextClamped = scrollHeight > clientHeight;
|
|
46
|
-
console.log(isTextClamped);
|
|
47
46
|
setHasScroll(isTextClamped);
|
|
48
47
|
}, []);
|
|
49
48
|
(0, react_1.useEffect)(function () {
|
|
@@ -53,11 +52,13 @@ function AdminListItem(_a) {
|
|
|
53
52
|
}, [selectedState]);
|
|
54
53
|
var handleClick = function (e) {
|
|
55
54
|
e.preventDefault();
|
|
56
|
-
if (selectedState === 'maintain') {
|
|
55
|
+
if (selectedState === 'maintain' || selectionMode === 'none') {
|
|
57
56
|
return;
|
|
58
57
|
}
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
if (selectionMode === 'multi') {
|
|
59
|
+
var checkedStatus = methods.getValues(id.toString());
|
|
60
|
+
methods.setValue(id.toString(), !checkedStatus);
|
|
61
|
+
}
|
|
61
62
|
if (onClickItem) {
|
|
62
63
|
onClickItem(id);
|
|
63
64
|
}
|
|
@@ -120,7 +121,7 @@ function AdminListItem(_a) {
|
|
|
120
121
|
}
|
|
121
122
|
};
|
|
122
123
|
return (react_1.default.createElement(S_AdminListItem, { rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType },
|
|
123
|
-
react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === '
|
|
124
|
+
react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'multi' && (react_1.default.createElement(S_Selection, null,
|
|
124
125
|
react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
|
|
125
126
|
react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
|
|
126
127
|
column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, null,
|
|
@@ -159,7 +160,7 @@ var hoverQuickActionBtnBox = (0, styled_components_1.css)(templateObject_9 || (t
|
|
|
159
160
|
var theme = _a.theme;
|
|
160
161
|
return theme.ui_cpnt_datatable_textbutton_base_02;
|
|
161
162
|
});
|
|
162
|
-
var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n"])), function (_a) {
|
|
163
|
+
var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n visibility: hidden;\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n visibility: hidden;\n"])), function (_a) {
|
|
163
164
|
var theme = _a.theme;
|
|
164
165
|
return theme.ui_cpnt_datatable_textbutton_base_01;
|
|
165
166
|
});
|
|
@@ -225,7 +226,7 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_22 || (te
|
|
|
225
226
|
});
|
|
226
227
|
var hoverAdminListItem = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
|
|
227
228
|
var fixedAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
|
|
228
|
-
var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
|
|
229
|
+
var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
|
|
229
230
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
230
231
|
return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
|
|
231
232
|
}, function (_a) {
|
|
@@ -39,7 +39,8 @@ function Checkbox(_a) {
|
|
|
39
39
|
}
|
|
40
40
|
case 'disabled': {
|
|
41
41
|
return isChecked ? (react_1.default.createElement(S_OverrideIconWrapper, null,
|
|
42
|
-
react_1.default.createElement(
|
|
42
|
+
react_1.default.createElement("div", null,
|
|
43
|
+
react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })),
|
|
43
44
|
react_1.default.createElement(S_OverrideIcon, null,
|
|
44
45
|
react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" })))) : (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
|
|
45
46
|
}
|
|
@@ -10,11 +10,14 @@ declare type DesktopBasicModalProps = {
|
|
|
10
10
|
mBtn1State?: 'normal' | 'disabled';
|
|
11
11
|
mBtn2State?: 'normal' | 'disabled';
|
|
12
12
|
mBtn3State?: 'normal' | 'disabled';
|
|
13
|
+
mBtn1Type?: 'button' | 'submit';
|
|
14
|
+
mBtn2Type?: 'button' | 'submit';
|
|
15
|
+
mBtn3Type?: 'button' | 'submit';
|
|
13
16
|
size?: 'large' | 'medium' | 'small';
|
|
14
17
|
onClickMBtn1?: () => void;
|
|
15
18
|
onClickMBtn2?: () => void;
|
|
16
19
|
onClickMBtn3?: () => void;
|
|
17
20
|
children?: React.ReactNode;
|
|
18
21
|
};
|
|
19
|
-
declare function DesktopBasicModal({ titleText, contentText, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
|
|
22
|
+
declare function DesktopBasicModal({ titleText, contentText, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
|
|
20
23
|
export default DesktopBasicModal;
|
|
@@ -33,7 +33,7 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
33
33
|
var MainButton_1 = require("../MainButton");
|
|
34
34
|
var TextLabel_1 = require("../TextLabel");
|
|
35
35
|
function DesktopBasicModal(_a) {
|
|
36
|
-
var titleText = _a.titleText, contentText = _a.contentText, _b = _a.btnMode, btnMode = _b === void 0 ? 'mbtn_amount2' : _b, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _c = _a.mBtn1State, mBtn1State = _c === void 0 ? 'normal' : _c, _d = _a.mBtn2State, mBtn2State = _d === void 0 ? 'normal' : _d, _e = _a.mBtn3State, mBtn3State = _e === void 0 ? 'normal' : _e, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3,
|
|
36
|
+
var titleText = _a.titleText, contentText = _a.contentText, _b = _a.btnMode, btnMode = _b === void 0 ? 'mbtn_amount2' : _b, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _c = _a.mBtn1State, mBtn1State = _c === void 0 ? 'normal' : _c, _d = _a.mBtn2State, mBtn2State = _d === void 0 ? 'normal' : _d, _e = _a.mBtn3State, mBtn3State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn1Type, mBtn1Type = _f === void 0 ? 'button' : _f, _g = _a.mBtn2Type, mBtn2Type = _g === void 0 ? 'button' : _g, _h = _a.mBtn3Type, mBtn3Type = _h === void 0 ? 'button' : _h, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _j = _a.size, size = _j === void 0 ? 'large' : _j, children = _a.children;
|
|
37
37
|
var container = (0, react_1.useState)(function () {
|
|
38
38
|
var modalRoot = document.createElement('div');
|
|
39
39
|
modalRoot.setAttribute('id', 'DesktopBasicModal');
|
|
@@ -62,10 +62,10 @@ function DesktopBasicModal(_a) {
|
|
|
62
62
|
children && children),
|
|
63
63
|
react_1.default.createElement(hybrid_1.Divider, null),
|
|
64
64
|
react_1.default.createElement(S_Footer, null,
|
|
65
|
-
react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(MainButton_1.MainButton, { fillType: "line", text: mBtn3Text, state: mBtn3State, size: "medium", onClick: onClickMBtn3 }))),
|
|
65
|
+
react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(MainButton_1.MainButton, { fillType: "line", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
|
|
66
66
|
react_1.default.createElement(S_Right, null,
|
|
67
|
-
react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(MainButton_1.MainButton, { fillType: "line", text: mBtn2Text, state: mBtn2State, size: "medium", onClick: onClickMBtn2 }))),
|
|
68
|
-
btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(MainButton_1.MainButton, { text: mBtn1Text, state: mBtn1State, size: "medium", onClick: onClickMBtn1 })))))), container);
|
|
67
|
+
react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(MainButton_1.MainButton, { fillType: "line", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
|
|
68
|
+
btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(MainButton_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), container);
|
|
69
69
|
}
|
|
70
70
|
var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n"], ["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n"])), function (_a) {
|
|
71
71
|
var theme = _a.theme;
|
|
@@ -6,10 +6,10 @@ declare type Props = {
|
|
|
6
6
|
hintText?: TFunctionResult;
|
|
7
7
|
defaultValue?: PDSValueOption;
|
|
8
8
|
valueArray: PDSValueOption[];
|
|
9
|
-
|
|
9
|
+
selectionMode?: 'single' | 'multi';
|
|
10
10
|
state?: 'normal' | 'read_only' | 'disabled';
|
|
11
11
|
colorTheme?: 'none' | 'dark';
|
|
12
12
|
onChange?: (option: PDSValueOption) => void;
|
|
13
13
|
};
|
|
14
|
-
declare function Dropdown({ size, hintText, defaultValue, valueArray,
|
|
14
|
+
declare function Dropdown({ size, hintText, defaultValue, valueArray, selectionMode, state, colorTheme, onChange }: Props): JSX.Element;
|
|
15
15
|
export default Dropdown;
|
|
@@ -29,9 +29,9 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
29
29
|
var ContextMenu_1 = require("../ContextMenu");
|
|
30
30
|
var ContextMenuItem_1 = require("../ContextMenuItem");
|
|
31
31
|
var TextLabel_1 = require("../TextLabel");
|
|
32
|
-
// TODO:
|
|
32
|
+
// TODO: selectionMode의 multi 기능 구현 추가 필요
|
|
33
33
|
function Dropdown(_a) {
|
|
34
|
-
var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.
|
|
34
|
+
var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
|
|
35
35
|
var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
|
|
36
36
|
var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
|
|
37
37
|
(0, react_1.useEffect)(function () {
|
|
@@ -123,7 +123,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateOb
|
|
|
123
123
|
small: small
|
|
124
124
|
}[size];
|
|
125
125
|
});
|
|
126
|
-
var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: 1px solid\n ", ";\n border-radius: 8px;\n color: ", ";\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border: 1px solid\n ", ";\n border-radius: 8px;\n color: ", ";\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n\n ", "\n"])), function (_a) {
|
|
126
|
+
var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n background-color: ", ";\n border: 1px solid\n ", ";\n border-radius: 8px;\n color: ", ";\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n background-color: ", ";\n border: 1px solid\n ", ";\n border-radius: 8px;\n color: ", ";\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n\n ", "\n"])), function (_a) {
|
|
127
127
|
var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
|
|
128
128
|
switch (state) {
|
|
129
129
|
case 'disabled':
|
|
@@ -6,10 +6,10 @@ declare type Props = {
|
|
|
6
6
|
hintText?: TFunctionResult;
|
|
7
7
|
defaultValue?: PDSValueOption;
|
|
8
8
|
valueArray: PDSValueOption[];
|
|
9
|
-
|
|
9
|
+
selectionMode?: 'single' | 'multi';
|
|
10
10
|
state?: 'normal' | 'read_only' | 'disabled';
|
|
11
11
|
colorTheme?: 'none' | 'dark';
|
|
12
12
|
onChange?: (option: PDSValueOption) => void;
|
|
13
13
|
};
|
|
14
|
-
declare function Dropdown({ size, hintText, defaultValue, valueArray,
|
|
14
|
+
declare function Dropdown({ size, hintText, defaultValue, valueArray, selectionMode, state, colorTheme, onChange }: Props): JSX.Element;
|
|
15
15
|
export default Dropdown;
|
|
@@ -29,9 +29,9 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
29
29
|
var ContextMenu_1 = require("../ContextMenu");
|
|
30
30
|
var ContextMenuItem_1 = require("../ContextMenuItem");
|
|
31
31
|
var TextLabel_1 = require("../TextLabel");
|
|
32
|
-
// TODO:
|
|
32
|
+
// TODO: selectionMode의 multi 기능 구현 추가 필요
|
|
33
33
|
function Dropdown(_a) {
|
|
34
|
-
var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.
|
|
34
|
+
var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
|
|
35
35
|
var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
|
|
36
36
|
var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
|
|
37
37
|
(0, react_1.useEffect)(function () {
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,13 +1,24 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.3.
|
|
2
|
+
## [v1.3.9]
|
|
3
3
|
|
|
4
4
|
### Component
|
|
5
|
+
* AdminList
|
|
6
|
+
* selectionMode의 value변경 (‘none’ | ‘use’ 에서 'none' | ‘single’ | 'multi'로 변경)
|
|
7
|
+
* 전체선택 체크박스를 해제할 시 maintain 되어야 하는 아이템의 체크박스를 유지하게 수정
|
|
8
|
+
* quickActionBtnType이 ‘fix’ 일 경우 퀵 액션 버튼이 호버했을 시에만 버튼이 보여지게 수정
|
|
9
|
+
* Dropdown
|
|
10
|
+
* selectMode?: 'one' | 'multi'; -> selectionMode?: 'single' | 'multi’;로 변경 (문구의 통일성 위해)
|
|
11
|
+
* DesktopBasicModal
|
|
12
|
+
* prop추가
|
|
13
|
+
* mBtn1Type
|
|
14
|
+
* mBtn2Type
|
|
15
|
+
* mBtn3Type
|
|
5
16
|
* Icon
|
|
6
|
-
* line
|
|
7
|
-
*
|
|
8
|
-
|
|
9
|
-
*
|
|
10
|
-
*
|
|
17
|
+
* line icon value추가
|
|
18
|
+
* ic_folder
|
|
19
|
+
* ic_download
|
|
20
|
+
* ic_arrow_left_thin
|
|
21
|
+
* ic_arrow_right_thin
|
|
11
22
|
|
|
12
23
|
### Color
|
|
13
|
-
* 컬러 키 값 22.04.
|
|
24
|
+
* 컬러 키 값 22.04.28 21시 43분 기준 싱크
|