pds-dev-kit-web 1.6.3 → 1.6.5
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/Bookmark.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Bookmark.js +34 -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/Bookmark.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Bookmark.js +34 -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/common/styles/colorSet/PaletteColor_Dark.json +6 -6
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +5 -5
- package/dist/src/common/styles/colorSet/UIColor.json +3 -1
- package/dist/src/common/styles/colorSet/index.d.ts +2 -0
- package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
- package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +1 -0
- package/dist/src/desktop/components/AdminListItem/AdminListItem.js +3 -3
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +4 -3
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTK.d.ts +4 -3
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTK.js +47 -12
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +4 -0
- package/package.json +1 -1
- package/release-note.md +7 -3
|
@@ -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 Bookmark = 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: color, fillRule: "evenodd", d: "M17.2752,21.2916 L12.9662,18.9136 C12.3652,18.5816 11.6352,18.5816 11.0332,18.9136 L6.7252,21.2916 C5.7252,21.8436 4.5002,21.1206 4.5002,19.9786 L4.5002,6.0196 C4.5002,4.0866 6.0672,2.5196 8.0002,2.5196 L16.0002,2.5196 C17.9332,2.5196 19.5002,4.0866 19.5002,6.0196 L19.5002,19.9786 C19.5002,21.1206 18.2752,21.8436 17.2752,21.2916" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = Bookmark;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare const fillIcons: {
|
|
3
3
|
readonly ic_bell: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
4
|
+
readonly ic_bookmark: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
4
5
|
readonly ic_call: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
5
6
|
readonly ic_call_end: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
6
7
|
readonly ic_camera: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
var Bell_1 = __importDefault(require("./Bell"));
|
|
7
|
+
var Bookmark_1 = __importDefault(require("./Bookmark"));
|
|
7
8
|
var Call_1 = __importDefault(require("./Call"));
|
|
8
9
|
var CallEnd_1 = __importDefault(require("./CallEnd"));
|
|
9
10
|
var Camera_1 = __importDefault(require("./Camera"));
|
|
@@ -56,6 +57,7 @@ var VideoSubtitle_1 = __importDefault(require("./VideoSubtitle"));
|
|
|
56
57
|
var Vodplus_1 = __importDefault(require("./Vodplus"));
|
|
57
58
|
var fillIcons = {
|
|
58
59
|
ic_bell: Bell_1.default,
|
|
60
|
+
ic_bookmark: Bookmark_1.default,
|
|
59
61
|
ic_call: Call_1.default,
|
|
60
62
|
ic_call_end: CallEnd_1.default,
|
|
61
63
|
ic_camera: Camera_1.default,
|
|
@@ -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 Bookmark = 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: color, fillRule: "evenodd", d: "M15.9999,2.5196 L7.9999,2.5196 C6.0669,2.5196 4.4999,4.0866 4.4999,6.0196 L4.4999,19.9786 C4.4999,20.8516 5.2169,21.4806 6.0019,21.4806 C6.2429,21.4806 6.4899,21.4216 6.7249,21.2916 L11.0339,18.9136 C11.3339,18.7476 11.6669,18.6646 11.9999,18.6646 C12.3329,18.6646 12.6659,18.7476 12.9669,18.9136 L17.2749,21.2916 C17.5099,21.4216 17.7579,21.4806 17.9979,21.4806 C18.7829,21.4806 19.4999,20.8516 19.4999,19.9786 L19.4999,6.0196 C19.4999,4.0866 17.9329,2.5196 15.9999,2.5196 L15.9999,2.5196 Z M15.9999,4.0196 C17.1029,4.0196 17.9999,4.9166 17.9999,6.0196 L17.9999,19.9786 L13.6909,17.6006 C13.1749,17.3156 12.5899,17.1646 11.9999,17.1646 C11.4099,17.1646 10.8249,17.3156 10.3089,17.6006 L5.9999,19.9786 L5.9999,6.0196 C5.9999,4.9166 6.8969,4.0196 7.9999,4.0196 L15.9999,4.0196 Z" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = Bookmark;
|
|
@@ -20,6 +20,7 @@ declare const lineIcons: {
|
|
|
20
20
|
readonly ic_booking_history: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
21
21
|
readonly ic_booking_papp: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
22
22
|
readonly ic_booking_ticket: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
23
|
+
readonly ic_bookmark: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
23
24
|
readonly ic_business: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
24
25
|
readonly ic_call: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
25
26
|
readonly ic_camera: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -23,6 +23,7 @@ var BookingCompleted_1 = __importDefault(require("./BookingCompleted"));
|
|
|
23
23
|
var BookingHistory_1 = __importDefault(require("./BookingHistory"));
|
|
24
24
|
var BookingPapp_1 = __importDefault(require("./BookingPapp"));
|
|
25
25
|
var BookingTicket_1 = __importDefault(require("./BookingTicket"));
|
|
26
|
+
var Bookmark_1 = __importDefault(require("./Bookmark"));
|
|
26
27
|
var Business_1 = __importDefault(require("./Business"));
|
|
27
28
|
var Call_1 = __importDefault(require("./Call"));
|
|
28
29
|
var Camera_1 = __importDefault(require("./Camera"));
|
|
@@ -174,6 +175,7 @@ var lineIcons = {
|
|
|
174
175
|
ic_booking_history: BookingHistory_1.default,
|
|
175
176
|
ic_booking_papp: BookingPapp_1.default,
|
|
176
177
|
ic_booking_ticket: BookingTicket_1.default,
|
|
178
|
+
ic_bookmark: Bookmark_1.default,
|
|
177
179
|
ic_business: Business_1.default,
|
|
178
180
|
ic_call: Call_1.default,
|
|
179
181
|
ic_camera: Camera_1.default,
|
|
@@ -190,11 +190,11 @@
|
|
|
190
190
|
"sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20",
|
|
191
191
|
"sys_component_base_grey_02_opacity80": "darkgrey30/opacity80",
|
|
192
192
|
"sys_component_base_10": "black/opacity30",
|
|
193
|
-
"sys_component_pastel_base_01": "
|
|
194
|
-
"sys_component_pastel_base_02": "
|
|
195
|
-
"sys_component_pastel_base_03": "
|
|
196
|
-
"sys_component_pastel_base_04": "
|
|
197
|
-
"sys_component_pastel_base_05": "
|
|
193
|
+
"sys_component_pastel_base_01": "darkpastelpink500",
|
|
194
|
+
"sys_component_pastel_base_02": "darkpastelgreen500",
|
|
195
|
+
"sys_component_pastel_base_03": "darkpastelpurple500",
|
|
196
|
+
"sys_component_pastel_base_04": "darkpastelorange500",
|
|
197
|
+
"sys_component_pastel_base_05": "darkpastelblue500",
|
|
198
198
|
"sys_component_base_11": "darkgreen30",
|
|
199
199
|
"sys_loading_skeleton_01": "darkgrey400",
|
|
200
200
|
"sys_loading_skeleton_02": "darkgrey400/opacity30",
|
|
@@ -206,5 +206,5 @@
|
|
|
206
206
|
"sys_container_background_04": "white/opacity00",
|
|
207
207
|
"sys_menu_button_base": "white",
|
|
208
208
|
"sys_background_dimmed_03": "black/opacity30",
|
|
209
|
-
"sys_cpnt_sheet_base_03": "black/
|
|
209
|
+
"sys_cpnt_sheet_base_03": "black/opacity80"
|
|
210
210
|
}
|
|
@@ -190,11 +190,11 @@
|
|
|
190
190
|
"sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20",
|
|
191
191
|
"sys_component_base_grey_02_opacity80": "grey30/opacity80",
|
|
192
192
|
"sys_component_base_10": "white/opacity50",
|
|
193
|
-
"sys_component_pastel_base_01": "
|
|
194
|
-
"sys_component_pastel_base_02": "
|
|
195
|
-
"sys_component_pastel_base_03": "
|
|
196
|
-
"sys_component_pastel_base_04": "
|
|
197
|
-
"sys_component_pastel_base_05": "
|
|
193
|
+
"sys_component_pastel_base_01": "pastelpink500",
|
|
194
|
+
"sys_component_pastel_base_02": "pastelgreen500",
|
|
195
|
+
"sys_component_pastel_base_03": "pastelpurple500",
|
|
196
|
+
"sys_component_pastel_base_04": "pastelorange500",
|
|
197
|
+
"sys_component_pastel_base_05": "pastelblue500",
|
|
198
198
|
"sys_component_base_11": "green30",
|
|
199
199
|
"sys_loading_skeleton_01": "grey400",
|
|
200
200
|
"sys_loading_skeleton_02": "grey400/opacity30",
|
|
@@ -598,5 +598,7 @@
|
|
|
598
598
|
"ui_menu_button_base_transparent": "sys_menu_button_base",
|
|
599
599
|
"ui_dimmed_02": "sys_background_dimmed_03",
|
|
600
600
|
"ui_cpnt_sheet_base_05": "sys_cpnt_sheet_base_03",
|
|
601
|
-
"ui_62": "sys_widget_black"
|
|
601
|
+
"ui_62": "sys_widget_black",
|
|
602
|
+
"ui_cpnt_calendar_date_hover": "sys_widget_grey_05",
|
|
603
|
+
"ui_cpnt_calendar_date_pressed": "sys_widget_grey_04"
|
|
602
604
|
}
|
|
@@ -9,6 +9,7 @@ export declare type AdminListItemProps = {
|
|
|
9
9
|
column2Type?: 'image_text' | 'text_only';
|
|
10
10
|
imageSrc?: string;
|
|
11
11
|
imageShapeType?: 'round' | 'circular' | 'rectangle';
|
|
12
|
+
imageScaleType?: 'fill' | 'contain' | 'cover' | 'none';
|
|
12
13
|
imageRadius?: 8 | 16 | 24;
|
|
13
14
|
imageRatio?: '16_9' | '4_3' | '1_1';
|
|
14
15
|
column2Text?: PDSTextType;
|
|
@@ -30,13 +30,13 @@ var hybrid_1 = require("../../../hybrid");
|
|
|
30
30
|
var Checkbox_1 = require("../Checkbox");
|
|
31
31
|
var TextLabel_1 = require("../TextLabel");
|
|
32
32
|
var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
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.
|
|
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.imageScaleType, imageScaleType = _f === void 0 ? 'cover' : _f, _g = _a.imageRadius, imageRadius = _g === void 0 ? 8 : _g, _h = _a.imageRatio, imageRatio = _h === void 0 ? '16_9' : _h, column2Text = _a.column2Text, column3Text = _a.column3Text, _j = _a.column3TextWidth, column3TextWidth = _j === void 0 ? 'small' : _j, _k = _a.column3TextStyleTheme, column3TextStyleTheme = _k === void 0 ? 'normal' : _k, column4Text = _a.column4Text, _l = _a.column4TextWidth, column4TextWidth = _l === void 0 ? 'small' : _l, _m = _a.column4TextStyleTheme, column4TextStyleTheme = _m === void 0 ? 'normal' : _m, column5Text = _a.column5Text, _o = _a.column5TextWidth, column5TextWidth = _o === void 0 ? 'small' : _o, _p = _a.column5TextStyleTheme, column5TextStyleTheme = _p === void 0 ? 'normal' : _p, column6Text = _a.column6Text, _q = _a.column6TextWidth, column6TextWidth = _q === void 0 ? 'small' : _q, _r = _a.column6TextStyleTheme, column6TextStyleTheme = _r === void 0 ? 'normal' : _r, column7Text = _a.column7Text, _s = _a.column7TextWidth, column7TextWidth = _s === void 0 ? 'small' : _s, _t = _a.column7TextStyleTheme, column7TextStyleTheme = _t === void 0 ? 'normal' : _t, column8Text = _a.column8Text, _u = _a.column8TextWidth, column8TextWidth = _u === void 0 ? 'small' : _u, _v = _a.column8TextStyleTheme, column8TextStyleTheme = _v === void 0 ? 'normal' : _v, column9Text = _a.column9Text, _w = _a.column9TextWidth, column9TextWidth = _w === void 0 ? 'small' : _w, _x = _a.column9TextStyleTheme, column9TextStyleTheme = _x === void 0 ? 'normal' : _x, column10Text = _a.column10Text, _y = _a.column10TextWidth, column10TextWidth = _y === void 0 ? 'small' : _y, _z = _a.column10TextStyleTheme, column10TextStyleTheme = _z === void 0 ? 'normal' : _z, _0 = _a.quickActionBtnMode, quickActionBtnMode = _0 === void 0 ? 'btn_amount2' : _0, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _1 = _a.quickActionBtnType, quickActionBtnType = _1 === void 0 ? 'fix' : _1, _2 = _a.quickActionBtn1State, quickActionBtn1State = _2 === void 0 ? 'normal' : _2, _3 = _a.quickActionBtn2State, quickActionBtn2State = _3 === void 0 ? 'normal' : _3, _4 = _a.quickActionBtn3State, quickActionBtn3State = _4 === void 0 ? 'normal' : _4, _5 = _a.selectedState, selectedState = _5 === void 0 ? 'basic' : _5, 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,
|
|
37
37
|
name: id.toString()
|
|
38
38
|
});
|
|
39
|
-
var
|
|
39
|
+
var _6 = (0, react_1.useState)(false), hasScroll = _6[0], setHasScroll = _6[1];
|
|
40
40
|
var contentRef = (0, react_1.useRef)(null);
|
|
41
41
|
(0, react_1.useEffect)(function () {
|
|
42
42
|
if (!contentRef || !contentRef.current)
|
|
@@ -149,7 +149,7 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
149
149
|
react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
|
|
150
150
|
react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
|
|
151
151
|
column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
|
|
152
|
-
react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType:
|
|
152
|
+
react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }))),
|
|
153
153
|
(rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_RowTextWrapper, null,
|
|
154
154
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
|
|
155
155
|
rowSize === 'high' && (react_1.default.createElement(S_HighTextWrapper, { ref: contentRef, hasScroll: hasScroll },
|
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
|
|
|
2
2
|
export declare type ContentsContainerProps = {
|
|
3
3
|
content1?: JSX.Element;
|
|
4
4
|
content2?: JSX.Element;
|
|
5
|
-
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
|
|
5
|
+
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
|
|
6
6
|
containerColor?: string;
|
|
7
7
|
areaColor?: string;
|
|
8
8
|
isLoadingContainer1?: boolean;
|
|
@@ -33,9 +33,10 @@ var ContentsContainer = function (_a) {
|
|
|
33
33
|
WTI_1: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
|
|
34
34
|
WTI_2: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
|
|
35
35
|
WTJ_1: (react_1.default.createElement(variation_1.WTJ, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
|
|
36
|
-
WTK_1: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
|
|
37
|
-
WTK_2: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
|
|
38
|
-
WTK_3: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
|
|
36
|
+
WTK_1: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, container1Ref: container1Ref })),
|
|
37
|
+
WTK_2: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, container1Ref: container1Ref })),
|
|
38
|
+
WTK_3: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, container1Ref: container1Ref })),
|
|
39
|
+
WTK_4: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_4", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, container1Ref: container1Ref })),
|
|
39
40
|
WTL_1: (react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
|
|
40
41
|
WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
|
|
41
42
|
WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
2
|
export declare type WTKProps = {
|
|
3
3
|
content1?: JSX.Element;
|
|
4
|
-
layoutType: 'WTK_1' | 'WTK_2' | 'WTK_3';
|
|
4
|
+
layoutType: 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4';
|
|
5
5
|
containerColor?: string;
|
|
6
6
|
areaColor?: string;
|
|
7
7
|
isLoadingContainer1?: boolean;
|
|
8
|
+
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
8
9
|
};
|
|
9
|
-
declare const WTK: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1 }: WTKProps) => JSX.Element;
|
|
10
|
+
declare const WTK: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1, container1Ref }: WTKProps) => JSX.Element;
|
|
10
11
|
export default WTK;
|
|
@@ -3,19 +3,44 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
6
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
27
|
};
|
|
9
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
29
|
var react_1 = __importDefault(require("react"));
|
|
11
|
-
var styled_components_1 =
|
|
30
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
12
31
|
var components_1 = require("../../../../../../common/components");
|
|
13
32
|
var WTK = function (_a) {
|
|
14
|
-
var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
|
|
15
|
-
return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
|
|
16
|
-
react_1.default.createElement(S_Content1,
|
|
33
|
+
var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, container1Ref = _a.container1Ref;
|
|
34
|
+
return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
|
|
35
|
+
react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))));
|
|
17
36
|
};
|
|
18
|
-
var
|
|
37
|
+
var scrollAbleContainer = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n"], ["\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n"])));
|
|
38
|
+
var scrollUnableContainer = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
39
|
+
var containerWTK_1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-width: 480px;\n ", "\n"], ["\n min-width: 480px;\n ", "\n"])), scrollAbleContainer);
|
|
40
|
+
var containerWTK_2 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-width: 600px;\n ", "\n"], ["\n min-width: 600px;\n ", "\n"])), scrollAbleContainer);
|
|
41
|
+
var containerWTK_3 = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n min-width: 768px;\n ", "\n"], ["\n min-width: 768px;\n ", "\n"])), scrollAbleContainer);
|
|
42
|
+
var containerWTK_4 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n min-width: 480px;\n ", "\n"], ["\n min-width: 480px;\n ", "\n"])), scrollUnableContainer);
|
|
43
|
+
var S_ContentsContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ", ";\n ", ";\n\n /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ", ";\n ", ";\n\n /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
|
|
19
44
|
var theme = _a.theme;
|
|
20
45
|
return theme.ui_contentscontainer_background_wt_m;
|
|
21
46
|
}, function (_a) {
|
|
@@ -24,12 +49,13 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
|
|
|
24
49
|
}, function (_a) {
|
|
25
50
|
var layoutType = _a.layoutType;
|
|
26
51
|
return ({
|
|
27
|
-
WTK_1:
|
|
28
|
-
WTK_2:
|
|
29
|
-
WTK_3:
|
|
52
|
+
WTK_1: containerWTK_1,
|
|
53
|
+
WTK_2: containerWTK_2,
|
|
54
|
+
WTK_3: containerWTK_3,
|
|
55
|
+
WTK_4: containerWTK_4
|
|
30
56
|
}[layoutType]);
|
|
31
57
|
});
|
|
32
|
-
var S_ContentsArea = styled_components_1.default.div(
|
|
58
|
+
var S_ContentsArea = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n height: 100%;\n overflow: auto;\n ", ";\n ", ";\n"])), function (_a) {
|
|
33
59
|
var theme = _a.theme;
|
|
34
60
|
return theme.ui_contentsarea_background_wt_m;
|
|
35
61
|
}, function (_a) {
|
|
@@ -43,12 +69,21 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templa
|
|
|
43
69
|
return ({
|
|
44
70
|
WTK_1: 'width: 480px;',
|
|
45
71
|
WTK_2: 'width: 600px;',
|
|
46
|
-
WTK_3: 'width: 768px;'
|
|
72
|
+
WTK_3: 'width: 768px;',
|
|
73
|
+
WTK_4: 'width: 480px;'
|
|
47
74
|
}[layoutType]);
|
|
48
75
|
}, function (_a) {
|
|
49
76
|
var areaColor = _a.areaColor;
|
|
50
77
|
return "background-color: " + areaColor;
|
|
51
78
|
});
|
|
52
|
-
var S_Content1 = styled_components_1.default.div(
|
|
79
|
+
var S_Content1 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n ", ";\n"], ["\n height: 100%;\n ", ";\n"])), function (_a) {
|
|
80
|
+
var layoutType = _a.layoutType;
|
|
81
|
+
return ({
|
|
82
|
+
WTK_1: '',
|
|
83
|
+
WTK_2: '',
|
|
84
|
+
WTK_3: '',
|
|
85
|
+
WTK_4: 'overflow: hidden;'
|
|
86
|
+
}[layoutType]);
|
|
87
|
+
});
|
|
53
88
|
exports.default = WTK;
|
|
54
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
89
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { MutableRefObject } from 'react';
|
|
2
2
|
export declare type ContainersBoxProps = {
|
|
3
|
-
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
|
|
3
|
+
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
|
|
4
4
|
pageMenuContent?: JSX.Element;
|
|
5
5
|
tabMenuContent?: JSX.Element;
|
|
6
6
|
subMenuContent?: JSX.Element;
|
|
@@ -61,6 +61,7 @@ var ContainersBox = function (_a) {
|
|
|
61
61
|
WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
62
62
|
WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
63
63
|
WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
|
|
64
|
+
WTK_4: react_1.default.createElement(react_1.default.Fragment, null),
|
|
64
65
|
WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
65
66
|
WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
66
67
|
WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
@@ -106,6 +107,7 @@ var ContainersBox = function (_a) {
|
|
|
106
107
|
WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
107
108
|
WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
108
109
|
WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
|
|
110
|
+
WTK_4: react_1.default.createElement(react_1.default.Fragment, null),
|
|
109
111
|
WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
110
112
|
WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
111
113
|
WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
@@ -150,6 +152,7 @@ var ContainersBox = function (_a) {
|
|
|
150
152
|
WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
151
153
|
WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
152
154
|
WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
|
|
155
|
+
WTK_4: react_1.default.createElement(react_1.default.Fragment, null),
|
|
153
156
|
WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
154
157
|
WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
155
158
|
WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
@@ -195,6 +198,7 @@ var ContainersBox = function (_a) {
|
|
|
195
198
|
WTK_1: '',
|
|
196
199
|
WTK_2: '',
|
|
197
200
|
WTK_3: '',
|
|
201
|
+
WTK_4: '',
|
|
198
202
|
WTL_1: '',
|
|
199
203
|
WTM_1: '',
|
|
200
204
|
WTM_2: '',
|
package/package.json
CHANGED