pds-dev-kit-web 1.9.0-beta.5 → 1.9.0-beta.7
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/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/src/common/assets/icons/line/CsBold.d.ts +4 -0
- package/dist/src/common/assets/icons/line/CsBold.js +34 -0
- package/dist/src/common/assets/icons/line/CsFace.d.ts +4 -0
- package/dist/src/common/assets/icons/line/CsFace.js +34 -0
- package/dist/src/common/assets/icons/line/index.d.ts +2 -0
- package/dist/src/common/assets/icons/line/index.js +4 -0
- package/dist/src/common/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +99 -98
- package/dist/src/common/styles/colorSet/index.js +2 -2
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/common/styles/movement/keyframes.d.ts +2 -0
- package/dist/src/common/styles/movement/keyframes.js +9 -7
- package/dist/src/common/styles/scroll/scrollbarStyle.d.ts +2 -0
- package/dist/src/common/styles/scroll/scrollbarStyle.js +14 -0
- package/dist/src/desktop/components/AdminList/AdminList.d.ts +2 -1
- package/dist/src/desktop/components/AdminList/AdminList.js +4 -4
- package/dist/src/desktop/components/AdminList/HeaderRow.d.ts +2 -1
- package/dist/src/desktop/components/AdminList/HeaderRow.js +21 -17
- package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +1 -0
- package/dist/src/desktop/components/AdminListItem/AdminListItem.js +17 -13
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js +9 -12
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js +8 -11
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js +17 -20
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js +11 -33
- package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSA.js +3 -2
- package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSD.js +3 -2
- package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.js +3 -2
- package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSF.js +5 -4
- package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSG.js +5 -4
- package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js +14 -17
- package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js +6 -9
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.js +8 -8
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js +41 -16
- package/dist/src/sub/DynamicLayout/hooks/index.d.ts +2 -0
- package/dist/src/sub/DynamicLayout/hooks/index.js +5 -1
- package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/index.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/index.js +8 -0
- package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/useUmountStyle.d.ts +10 -0
- package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/useUmountStyle.js +65 -0
- package/dist/storybook-static/{0.2023c95c.iframe.bundle.d.ts → 0.47127a3a.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{0.2023c95c.iframe.bundle.js → 0.47127a3a.iframe.bundle.js} +7 -7
- package/dist/storybook-static/{4.d1de0501.iframe.bundle.d.ts → 4.27d0b6b3.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{4.d1de0501.iframe.bundle.js → 4.27d0b6b3.iframe.bundle.js} +70 -70
- package/dist/storybook-static/{5.2f192ddf.iframe.bundle.d.ts → 5.ccee87a9.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{5.2f192ddf.iframe.bundle.js → 5.ccee87a9.iframe.bundle.js} +13 -13
- package/dist/storybook-static/{6.62fc7663.iframe.bundle.d.ts → 6.935fc424.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{6.62fc7663.iframe.bundle.js → 6.935fc424.iframe.bundle.js} +6 -6
- package/dist/storybook-static/{7.3518bf24.iframe.bundle.d.ts → 7.9097368c.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{7.3518bf24.iframe.bundle.js → 7.9097368c.iframe.bundle.js} +1 -1
- package/dist/storybook-static/{main.bea0ee46.iframe.bundle.d.ts → main.6d823b88.iframe.bundle.d.ts} +3 -16
- package/dist/storybook-static/{main.bea0ee46.iframe.bundle.js → main.6d823b88.iframe.bundle.js} +1022 -977
- package/dist/storybook-static/{runtime~main.54fba058.iframe.bundle.d.ts → runtime~main.98015d18.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{runtime~main.54fba058.iframe.bundle.js → runtime~main.98015d18.iframe.bundle.js} +1 -1
- package/dist/storybook-static/{vendors~main.dd7c8d3f.iframe.bundle.d.ts → vendors~main.3af2bf31.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{vendors~main.dd7c8d3f.iframe.bundle.js → vendors~main.3af2bf31.iframe.bundle.js} +557 -557
- package/package.json +1 -1
- package/release-note.md +5 -92
|
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
var components_1 = require("../../../../../../common/components");
|
|
32
|
+
var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
|
|
32
33
|
var WSF = function (_a) {
|
|
33
34
|
var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
|
|
34
35
|
return (react_1.default.createElement(S_Box, null,
|
|
@@ -46,7 +47,7 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
|
|
|
46
47
|
return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
|
|
47
48
|
});
|
|
48
49
|
var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
|
|
49
|
-
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
50
|
+
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
50
51
|
var theme = _a.theme;
|
|
51
52
|
return theme.ui_contentscontainer01_background;
|
|
52
53
|
}, function (_a) {
|
|
@@ -63,8 +64,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (
|
|
|
63
64
|
}, function (_a) {
|
|
64
65
|
var containerColor = _a.containerColor;
|
|
65
66
|
return "background-color: " + containerColor;
|
|
66
|
-
}, overrideStyleContainer1);
|
|
67
|
-
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex-grow: 1;\n min-width: 480px;\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex-grow: 1;\n min-width: 480px;\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
67
|
+
}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
|
|
68
|
+
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex-grow: 1;\n min-width: 480px;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex-grow: 1;\n min-width: 480px;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
68
69
|
var theme = _a.theme;
|
|
69
70
|
return theme.ui_contentscontainer02_background;
|
|
70
71
|
}, function (_a) {
|
|
@@ -84,7 +85,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
|
|
|
84
85
|
}, function (_a) {
|
|
85
86
|
var containerColor = _a.containerColor;
|
|
86
87
|
return "background-color: " + containerColor;
|
|
87
|
-
}, overrideStyleContainer2);
|
|
88
|
+
}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer2);
|
|
88
89
|
var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 24px;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-top: 24px;\n ", ";\n ", ";\n"])), function (_a) {
|
|
89
90
|
var layoutType = _a.layoutType;
|
|
90
91
|
return ({
|
|
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
var components_1 = require("../../../../../../common/components");
|
|
32
|
+
var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
|
|
32
33
|
var WSG = function (_a) {
|
|
33
34
|
var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
|
|
34
35
|
return (react_1.default.createElement(S_Box, null,
|
|
@@ -46,7 +47,7 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
|
|
|
46
47
|
return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
|
|
47
48
|
});
|
|
48
49
|
var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
|
|
49
|
-
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
50
|
+
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
50
51
|
var theme = _a.theme;
|
|
51
52
|
return theme.ui_contentscontainer01_background;
|
|
52
53
|
}, function (_a) {
|
|
@@ -61,8 +62,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (
|
|
|
61
62
|
}, function (_a) {
|
|
62
63
|
var containerColor = _a.containerColor;
|
|
63
64
|
return "background-color: " + containerColor;
|
|
64
|
-
}, overrideStyleContainer1);
|
|
65
|
-
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
65
|
+
}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
|
|
66
|
+
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
66
67
|
var theme = _a.theme;
|
|
67
68
|
return theme.ui_contentscontainer02_background;
|
|
68
69
|
}, function (_a) {
|
|
@@ -80,7 +81,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
|
|
|
80
81
|
}, function (_a) {
|
|
81
82
|
var containerColor = _a.containerColor;
|
|
82
83
|
return "background-color: " + containerColor;
|
|
83
|
-
}, overrideStyleContainer2);
|
|
84
|
+
}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer2);
|
|
84
85
|
var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 24px;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-top: 24px;\n ", ";\n ", ";\n"])), function (_a) {
|
|
85
86
|
var layoutType = _a.layoutType;
|
|
86
87
|
return ({
|
|
@@ -30,6 +30,7 @@ var react_1 = __importStar(require("react"));
|
|
|
30
30
|
var react_dom_1 = __importDefault(require("react-dom"));
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
|
|
33
|
+
var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
|
|
33
34
|
var components_1 = require("../../components");
|
|
34
35
|
function DesktopBasicModal(_a) {
|
|
35
36
|
var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'overlay' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'mbtn_amount2' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _e = _a.mBtn1State, mBtn1State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn2State, mBtn2State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn3State, mBtn3State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn1Type, mBtn1Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn2Type, mBtn2Type = _j === void 0 ? 'button' : _j, _k = _a.mBtn3Type, mBtn3Type = _k === void 0 ? 'button' : _k, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _l = _a.size, size = _l === void 0 ? 'large' : _l, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, children = _a.children;
|
|
@@ -65,17 +66,13 @@ function DesktopBasicModal(_a) {
|
|
|
65
66
|
react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
|
|
66
67
|
btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), container);
|
|
67
68
|
}
|
|
68
|
-
var
|
|
69
|
-
|
|
70
|
-
return theme.ui_container_scroll;
|
|
71
|
-
});
|
|
72
|
-
var scrollInvisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ::-webkit-scrollbar {\n display: none;\n }\n"], ["\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
73
|
-
var S_ModalOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n\n ", "\n"], ["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n\n ", "\n"])), function (_a) {
|
|
69
|
+
var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar {\n display: none;\n }\n"], ["\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
70
|
+
var S_ModalOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n\n ", "\n"], ["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n\n ", "\n"])), function (_a) {
|
|
74
71
|
var theme = _a.theme;
|
|
75
72
|
return theme.ui_cpnt_modal_dimmed;
|
|
76
73
|
}, animationStyle_1.modalOverlayOnAni);
|
|
77
|
-
var rlarge = (0, styled_components_1.css)(
|
|
78
|
-
var S_ModalWrapper = styled_components_1.default.div(
|
|
74
|
+
var rlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-width: 960px;\n max-width: 1400px;\n"], ["\n min-width: 960px;\n max-width: 1400px;\n"])));
|
|
75
|
+
var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n left: 50%;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n left: 50%;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
79
76
|
var theme = _a.theme;
|
|
80
77
|
return theme.ui_cpnt_modal_base;
|
|
81
78
|
}, function (_a) {
|
|
@@ -97,16 +94,16 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templa
|
|
|
97
94
|
var size = _a.size;
|
|
98
95
|
return size === 'rlarge' && rlarge;
|
|
99
96
|
}, animationStyle_1.modalOnAni);
|
|
100
|
-
var S_Left = styled_components_1.default.div(
|
|
97
|
+
var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
101
98
|
var theme = _a.theme;
|
|
102
99
|
return theme.spacing.spacingB;
|
|
103
100
|
});
|
|
104
|
-
var S_Btn2Wrapper = styled_components_1.default.div(
|
|
101
|
+
var S_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
105
102
|
var theme = _a.theme;
|
|
106
103
|
return theme.spacing.spacingB;
|
|
107
104
|
});
|
|
108
|
-
var S_Right = styled_components_1.default.div(
|
|
109
|
-
var S_Header = styled_components_1.default.div(
|
|
105
|
+
var S_Right = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
106
|
+
var S_Header = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-top: ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-top: ", ";\n"])), function (_a) {
|
|
110
107
|
var theme = _a.theme;
|
|
111
108
|
return theme.spacing.spacingE;
|
|
112
109
|
}, function (_a) {
|
|
@@ -119,7 +116,7 @@ var S_Header = styled_components_1.default.div(templateObject_9 || (templateObje
|
|
|
119
116
|
var theme = _a.theme;
|
|
120
117
|
return theme.spacing.spacingE;
|
|
121
118
|
});
|
|
122
|
-
var S_Body = styled_components_1.default.div(
|
|
119
|
+
var S_Body = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n max-height: 60vh;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n overflow: ", ";\n\n ", "\n\n ", "\n"], ["\n flex: 1;\n max-height: 60vh;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n overflow: ", ";\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
123
120
|
var theme = _a.theme;
|
|
124
121
|
return theme.spacing.spacingF;
|
|
125
122
|
}, function (_a) {
|
|
@@ -140,14 +137,14 @@ var S_Body = styled_components_1.default.div(templateObject_11 || (templateObjec
|
|
|
140
137
|
scrollVisibleType &&
|
|
141
138
|
{
|
|
142
139
|
moving: scrollInvisible,
|
|
143
|
-
visible:
|
|
140
|
+
visible: scrollbarStyle_1.scrollbarStyle,
|
|
144
141
|
hidden: scrollInvisible
|
|
145
142
|
}[scrollVisibleType];
|
|
146
143
|
}, function (_a) {
|
|
147
144
|
var bodySpacingMode = _a.bodySpacingMode;
|
|
148
|
-
return bodySpacingMode === 'none' && (0, styled_components_1.css)(
|
|
145
|
+
return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-bottom: 0;\n padding-left: 0;\n padding-right: 0;\n "], ["\n padding-bottom: 0;\n padding-left: 0;\n padding-right: 0;\n "])));
|
|
149
146
|
});
|
|
150
|
-
var S_Footer = styled_components_1.default.div(
|
|
147
|
+
var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
|
|
151
148
|
var theme = _a.theme;
|
|
152
149
|
return theme.ui_cpnt_modal_border;
|
|
153
150
|
}, function (_a) {
|
|
@@ -164,4 +161,4 @@ var S_Footer = styled_components_1.default.div(templateObject_12 || (templateObj
|
|
|
164
161
|
return theme.spacing.spacingD;
|
|
165
162
|
});
|
|
166
163
|
exports.default = DesktopBasicModal;
|
|
167
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11
|
|
164
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -30,6 +30,7 @@ var react_1 = __importStar(require("react"));
|
|
|
30
30
|
var react_dom_1 = __importDefault(require("react-dom"));
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
|
|
33
|
+
var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
|
|
33
34
|
function DesktopHeadlessModal(_a) {
|
|
34
35
|
var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'visible' : _d, onClose = _a.onClose;
|
|
35
36
|
var container = (0, react_1.useState)(function () {
|
|
@@ -101,22 +102,18 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
|
|
|
101
102
|
};
|
|
102
103
|
return sizes[size];
|
|
103
104
|
}, animationStyle_1.modalOnAni);
|
|
104
|
-
var
|
|
105
|
-
|
|
106
|
-
return theme.ui_container_scroll;
|
|
107
|
-
});
|
|
108
|
-
var scrollInvisible = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ::-webkit-scrollbar {\n display: none;\n }\n"], ["\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
109
|
-
var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n overflow: auto;\n overflow-y: overlay;\n width: 100%;\n\n ", "\n\n &.scrollMoving {\n ", "\n }\n"], ["\n overflow: auto;\n overflow-y: overlay;\n width: 100%;\n\n ", "\n\n &.scrollMoving {\n ", "\n }\n"])), function (_a) {
|
|
105
|
+
var scrollInvisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ::-webkit-scrollbar {\n display: none;\n }\n"], ["\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
106
|
+
var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n overflow: auto;\n overflow-y: overlay;\n width: 100%;\n\n ", "\n\n &.scrollMoving {\n ", "\n }\n"], ["\n overflow: auto;\n overflow-y: overlay;\n width: 100%;\n\n ", "\n\n &.scrollMoving {\n ", "\n }\n"])), function (_a) {
|
|
110
107
|
var scrollVisibleType = _a.scrollVisibleType;
|
|
111
108
|
return scrollVisibleType &&
|
|
112
109
|
{
|
|
113
110
|
moving: scrollInvisible,
|
|
114
|
-
visible:
|
|
111
|
+
visible: scrollbarStyle_1.scrollbarWithPaddingStyle,
|
|
115
112
|
hidden: scrollInvisible
|
|
116
113
|
}[scrollVisibleType];
|
|
117
114
|
}, function (_a) {
|
|
118
115
|
var scrollVisibleType = _a.scrollVisibleType;
|
|
119
|
-
return scrollVisibleType === 'moving' &&
|
|
116
|
+
return scrollVisibleType === 'moving' && scrollbarStyle_1.scrollbarWithPaddingStyle;
|
|
120
117
|
});
|
|
121
118
|
exports.default = DesktopHeadlessModal;
|
|
122
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4
|
|
119
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -18,30 +18,30 @@ function OverlayBorders(_a) {
|
|
|
18
18
|
react_1.default.createElement(Absolute_Border_Bottom, { zIndex: zIndex })));
|
|
19
19
|
}
|
|
20
20
|
exports.default = OverlayBorders;
|
|
21
|
-
var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n z-index: ", ";\n"], ["\n top: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n z-index: ", ";\n"])), function (_a) {
|
|
21
|
+
var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"], ["\n top: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"])), function (_a) {
|
|
22
22
|
var theme = _a.theme;
|
|
23
|
-
return theme.
|
|
23
|
+
return theme.ui_editor_preview_editing;
|
|
24
24
|
}, function (_a) {
|
|
25
25
|
var zIndex = _a.zIndex;
|
|
26
26
|
return zIndex;
|
|
27
27
|
});
|
|
28
|
-
var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n left: 0;\n width: 4px;\n height: 100%;\n position: absolute;\n background-color: ", ";\n z-index: ", ";\n"], ["\n left: 0;\n width: 4px;\n height: 100%;\n position: absolute;\n background-color: ", ";\n z-index: ", ";\n"])), function (_a) {
|
|
28
|
+
var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n left: 0;\n width: 4px;\n height: 100%;\n position: absolute;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"], ["\n left: 0;\n width: 4px;\n height: 100%;\n position: absolute;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"])), function (_a) {
|
|
29
29
|
var theme = _a.theme;
|
|
30
|
-
return theme.
|
|
30
|
+
return theme.ui_editor_preview_editing;
|
|
31
31
|
}, function (_a) {
|
|
32
32
|
var zIndex = _a.zIndex;
|
|
33
33
|
return zIndex;
|
|
34
34
|
});
|
|
35
|
-
var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n right: 0;\n position: absolute;\n height: 100%;\n width: 4px;\n background-color: ", ";\n z-index: ", ";\n"], ["\n right: 0;\n position: absolute;\n height: 100%;\n width: 4px;\n background-color: ", ";\n z-index: ", ";\n"])), function (_a) {
|
|
35
|
+
var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n right: 0;\n position: absolute;\n height: 100%;\n width: 4px;\n background-color: ", ";\n z-index: ", ";\n transition: background-color 0.2s ease-out;\n"], ["\n right: 0;\n position: absolute;\n height: 100%;\n width: 4px;\n background-color: ", ";\n z-index: ", ";\n transition: background-color 0.2s ease-out;\n"])), function (_a) {
|
|
36
36
|
var theme = _a.theme;
|
|
37
|
-
return theme.
|
|
37
|
+
return theme.ui_editor_preview_editing;
|
|
38
38
|
}, function (_a) {
|
|
39
39
|
var zIndex = _a.zIndex;
|
|
40
40
|
return zIndex;
|
|
41
41
|
});
|
|
42
|
-
var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n z-index: ", ";\n"], ["\n bottom: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n z-index: ", ";\n"])), function (_a) {
|
|
42
|
+
var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"], ["\n bottom: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"])), function (_a) {
|
|
43
43
|
var theme = _a.theme;
|
|
44
|
-
return theme.
|
|
44
|
+
return theme.ui_editor_preview_editing;
|
|
45
45
|
}, function (_a) {
|
|
46
46
|
var zIndex = _a.zIndex;
|
|
47
47
|
return zIndex;
|
|
@@ -37,7 +37,15 @@ function SectionBox(_a) {
|
|
|
37
37
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
38
38
|
var sectionRef = (0, react_1.useRef)(null);
|
|
39
39
|
var _b = (0, react_1.useState)(false), isHover = _b[0], setIsHover = _b[1];
|
|
40
|
-
var
|
|
40
|
+
var _c = (0, react_1.useState)(false), fadeOut = _c[0], setFadeout = _c[1];
|
|
41
|
+
var _d = (0, react_1.useState)(false), hasNoChild = _d[0], setHasNoChild = _d[1];
|
|
42
|
+
var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, 150);
|
|
43
|
+
var onClickDelayedAsync = (0, useLazyUnmount_1.useLazyUnmount)({
|
|
44
|
+
doUnmount: function () {
|
|
45
|
+
onClick();
|
|
46
|
+
setFadeout(false);
|
|
47
|
+
}
|
|
48
|
+
}, 150);
|
|
41
49
|
(0, react_1.useEffect)(function () {
|
|
42
50
|
var _a;
|
|
43
51
|
if (!sectionRef) {
|
|
@@ -47,30 +55,46 @@ function SectionBox(_a) {
|
|
|
47
55
|
(_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
|
|
48
56
|
}
|
|
49
57
|
}, [scrollIntoThisSection]);
|
|
58
|
+
(0, react_1.useEffect)(function () {
|
|
59
|
+
if (!sectionRef.current) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (sectionRef.current.getBoundingClientRect().height === 0) {
|
|
63
|
+
setHasNoChild(true);
|
|
64
|
+
}
|
|
65
|
+
}, [isEditing, children]);
|
|
50
66
|
var onMouseEnter = function () {
|
|
51
67
|
setIsHover(true);
|
|
52
68
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
react_1.default.createElement(
|
|
60
|
-
react_1.default.createElement(
|
|
61
|
-
|
|
69
|
+
var onClickSectionBox = function () {
|
|
70
|
+
setFadeout(true);
|
|
71
|
+
onClickDelayedAsync();
|
|
72
|
+
};
|
|
73
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
74
|
+
react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClickSectionBox, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing },
|
|
75
|
+
isEditing && !hasNoChild && (react_1.default.createElement(S_Editing, { isMounting: true },
|
|
76
|
+
react_1.default.createElement(OverlayBorders_1.default, { zIndex: 1 }),
|
|
77
|
+
react_1.default.createElement(TopRightAbsoluteBox, null,
|
|
78
|
+
react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4657'), styleTheme: "caption1Bold", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
|
|
79
|
+
isHover && !isEditing && (react_1.default.createElement(DimmedEditOverlay, { fadeOut: fadeOut },
|
|
80
|
+
react_1.default.createElement(S_EditButton, null,
|
|
81
|
+
react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
|
|
82
|
+
children)));
|
|
62
83
|
}
|
|
63
84
|
exports.default = SectionBox;
|
|
64
|
-
var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 0;\n right: 0;\n position: absolute;\n z-index: 4;\n background-color: ", ";\n padding: 8px 10px;\n"], ["\n top: 0;\n right: 0;\n position: absolute;\n z-index: 4;\n background-color: ", ";\n padding: 8px 10px;\n"])), function (_a) {
|
|
85
|
+
var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 0;\n right: 0;\n position: absolute;\n z-index: 4;\n background-color: ", ";\n padding: 8px 10px;\n transition: background-color 0.2s ease-out;\n"], ["\n top: 0;\n right: 0;\n position: absolute;\n z-index: 4;\n background-color: ", ";\n padding: 8px 10px;\n transition: background-color 0.2s ease-out;\n"])), function (_a) {
|
|
65
86
|
var theme = _a.theme;
|
|
66
|
-
return theme.
|
|
87
|
+
return theme.ui_editor_preview_editing;
|
|
67
88
|
});
|
|
68
89
|
var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
69
|
-
var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n background-color:
|
|
90
|
+
var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n background-color: ", ";\n opacity: 0;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: opacity 0.2s ease-out;\n\n &:hover {\n opacity: 1;\n }\n\n animation: ", ";\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.6;\n }\n\n 100% {\n opacity: 0;\n }\n }\n"], ["\n position: absolute;\n background-color: ", ";\n opacity: 0;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: opacity 0.2s ease-out;\n\n &:hover {\n opacity: 1;\n }\n\n animation: ", ";\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.6;\n }\n\n 100% {\n opacity: 0;\n }\n }\n"])), function (_a) {
|
|
70
91
|
var theme = _a.theme;
|
|
71
92
|
return theme.ui_pages_section_dimmed;
|
|
93
|
+
}, function (_a) {
|
|
94
|
+
var fadeOut = _a.fadeOut;
|
|
95
|
+
return fadeOut && 'fadeOut 0.2s ease-out';
|
|
72
96
|
});
|
|
73
|
-
var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n font-weight: bold;\n height: 56px;\n display: flex;\n border-radius: 14px;\n justify-content: center;\n align-items: center;\n padding: 0 ", ";\n
|
|
97
|
+
var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n font-weight: bold;\n height: 56px;\n display: flex;\n border-radius: 14px;\n justify-content: center;\n align-items: center;\n padding: 0 ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n font-weight: bold;\n height: 56px;\n display: flex;\n border-radius: 14px;\n justify-content: center;\n align-items: center;\n padding: 0 ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
74
98
|
var theme = _a.theme;
|
|
75
99
|
return theme.ui_71;
|
|
76
100
|
}, function (_a) {
|
|
@@ -82,5 +106,6 @@ var S_EditButton = styled_components_1.default.div(templateObject_4 || (template
|
|
|
82
106
|
}, function (_a) {
|
|
83
107
|
var theme = _a.theme;
|
|
84
108
|
return theme.ui_73;
|
|
85
|
-
}
|
|
86
|
-
var
|
|
109
|
+
});
|
|
110
|
+
var S_Editing = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n & > div {\n animation: fadeIn 0.2s ease-out;\n }\n\n @keyframes fadeIn {\n 0% {\n opacity: 0.2;\n }\n\n 50% {\n opacity: 0.6;\n }\n\n 100% {\n opacity: 1;\n }\n }\n"], ["\n & > div {\n animation: fadeIn 0.2s ease-out;\n }\n\n @keyframes fadeIn {\n 0% {\n opacity: 0.2;\n }\n\n 50% {\n opacity: 0.6;\n }\n\n 100% {\n opacity: 1;\n }\n }\n"])));
|
|
111
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.usePrevious = void 0;
|
|
3
|
+
exports.useLazyUnmount = exports.usePrevious = exports.useUnmountStyle = void 0;
|
|
4
|
+
var useUnmountStyle_1 = require("./useUnmountStyle");
|
|
5
|
+
Object.defineProperty(exports, "useUnmountStyle", { enumerable: true, get: function () { return useUnmountStyle_1.useUnmountStyle; } });
|
|
4
6
|
var usePrevious_1 = require("./usePrevious");
|
|
5
7
|
Object.defineProperty(exports, "usePrevious", { enumerable: true, get: function () { return usePrevious_1.usePrevious; } });
|
|
8
|
+
var useLazyUnmount_1 = require("./useLazyUnmount");
|
|
9
|
+
Object.defineProperty(exports, "useLazyUnmount", { enumerable: true, get: function () { return useLazyUnmount_1.useLazyUnmount; } });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as useUnmountStyle } from './useUmountStyle';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useUnmountStyle = void 0;
|
|
7
|
+
var useUmountStyle_1 = require("./useUmountStyle");
|
|
8
|
+
Object.defineProperty(exports, "useUnmountStyle", { enumerable: true, get: function () { return __importDefault(useUmountStyle_1).default; } });
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare type Options = {
|
|
2
|
+
mountStyle: Record<string, unknown>;
|
|
3
|
+
unmountStyle: Record<string, unknown>;
|
|
4
|
+
handleUnmount: () => void;
|
|
5
|
+
};
|
|
6
|
+
export default function useUnmountStyle({ mountStyle, unmountStyle, handleUnmount }: Options, delayTime: number): {
|
|
7
|
+
animationStyle: Record<string, unknown>;
|
|
8
|
+
handleUnmountWithAnimation: () => Promise<void>;
|
|
9
|
+
};
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
12
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
13
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
14
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
15
|
+
function step(op) {
|
|
16
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
17
|
+
while (_) try {
|
|
18
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
19
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
20
|
+
switch (op[0]) {
|
|
21
|
+
case 0: case 1: t = op; break;
|
|
22
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
23
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
24
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
25
|
+
default:
|
|
26
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
27
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
28
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
29
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
30
|
+
if (t[2]) _.ops.pop();
|
|
31
|
+
_.trys.pop(); continue;
|
|
32
|
+
}
|
|
33
|
+
op = body.call(thisArg, _);
|
|
34
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
35
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
var react_1 = require("react");
|
|
40
|
+
// NOTE: promise의 delay time은 정확하지 않기때문에, 애니메이션 딜레이보다 짧게 가는것이 보기 좋습니다.
|
|
41
|
+
function useUnmountStyle(_a, delayTime) {
|
|
42
|
+
var mountStyle = _a.mountStyle, unmountStyle = _a.unmountStyle, handleUnmount = _a.handleUnmount;
|
|
43
|
+
var _b = (0, react_1.useState)(mountStyle), animationStyle = _b[0], setAnimationStyle = _b[1];
|
|
44
|
+
function handleUnmountWithAnimation() {
|
|
45
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
46
|
+
return __generator(this, function (_a) {
|
|
47
|
+
switch (_a.label) {
|
|
48
|
+
case 0:
|
|
49
|
+
setAnimationStyle(unmountStyle);
|
|
50
|
+
return [4 /*yield*/, new Promise(function (resolve) {
|
|
51
|
+
setTimeout(function () {
|
|
52
|
+
handleUnmount();
|
|
53
|
+
resolve(true);
|
|
54
|
+
}, delayTime);
|
|
55
|
+
})];
|
|
56
|
+
case 1:
|
|
57
|
+
_a.sent();
|
|
58
|
+
return [2 /*return*/];
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
return { animationStyle: animationStyle, handleUnmountWithAnimation: handleUnmountWithAnimation };
|
|
64
|
+
}
|
|
65
|
+
exports.default = useUnmountStyle;
|
package/dist/storybook-static/{0.2023c95c.iframe.bundle.d.ts → 0.47127a3a.iframe.bundle.d.ts}
RENAMED
|
File without changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(window.webpackJsonp = window.webpackJsonp || []).push([[0], {
|
|
1
|
+
(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2211: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
|
|
2
2
|
return !0; if (a && b && "object" == typeof a && "object" == typeof b) {
|
|
3
3
|
if (a.constructor !== b.constructor)
|
|
4
4
|
return !1;
|
|
@@ -62,15 +62,15 @@
|
|
|
62
62
|
if ((error.message || "").match(/stack|recursion/i))
|
|
63
63
|
return console.warn("react-fast-compare cannot handle circular refs"), !1;
|
|
64
64
|
throw error;
|
|
65
|
-
} }; },
|
|
65
|
+
} }; }, 2212: function (module, exports, __webpack_require__) {
|
|
66
66
|
"use strict";
|
|
67
67
|
var warning = function () { };
|
|
68
68
|
module.exports = warning;
|
|
69
|
-
},
|
|
69
|
+
}, 698: function (module, __webpack_exports__, __webpack_require__) {
|
|
70
70
|
"use strict";
|
|
71
71
|
__webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, "WithTooltipPure", (function () { return WithTooltip_WithTooltipPure; })), __webpack_require__.d(__webpack_exports__, "WithToolTipState", (function () { return WithTooltip_WithToolTipState; })), __webpack_require__.d(__webpack_exports__, "WithTooltip", (function () { return WithTooltip_WithToolTipState; }));
|
|
72
72
|
__webpack_require__(16), __webpack_require__(45), __webpack_require__(26), __webpack_require__(7), __webpack_require__(19), __webpack_require__(12), __webpack_require__(10), __webpack_require__(21), __webpack_require__(15), __webpack_require__(17), __webpack_require__(9), __webpack_require__(30), __webpack_require__(18), __webpack_require__(54);
|
|
73
|
-
var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(
|
|
73
|
+
var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(118), esm_extends = __webpack_require__(23), inheritsLoose = __webpack_require__(60), react_dom = __webpack_require__(63), ManagerReferenceNodeContext = react.createContext(), ManagerReferenceNodeSetterContext = react.createContext();
|
|
74
74
|
function Manager(_ref) { var children = _ref.children, _React$useState = react.useState(null), referenceNode = _React$useState[0], setReferenceNode = _React$useState[1], hasUnmounted = react.useRef(!1); react.useEffect((function () { return function () { hasUnmounted.current = !0; }; }), []); var handleSetReferenceNode = react.useCallback((function (node) { hasUnmounted.current || setReferenceNode(node); }), []); return react.createElement(ManagerReferenceNodeContext.Provider, { value: referenceNode }, react.createElement(ManagerReferenceNodeSetterContext.Provider, { value: handleSetReferenceNode }, children)); }
|
|
75
75
|
var unwrapArray = function unwrapArray(arg) { return Array.isArray(arg) ? arg[0] : arg; }, safeInvoke = function safeInvoke(fn) { if ("function" == typeof fn) {
|
|
76
76
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++)
|
|
@@ -227,12 +227,12 @@
|
|
|
227
227
|
} }, requiresIfExists: ["offset"] }, { name: "arrow", enabled: !0, phase: "main", fn: function arrow(_ref) { var _state$modifiersData$, state = _ref.state, name = _ref.name, options = _ref.options, arrowElement = state.elements.arrow, popperOffsets = state.modifiersData.popperOffsets, basePlacement = getBasePlacement(state.placement), axis = getMainAxisFromPlacement(basePlacement), len = [left, right].indexOf(basePlacement) >= 0 ? "height" : "width"; if (arrowElement && popperOffsets) {
|
|
228
228
|
var paddingObject = function toPaddingObject(padding, state) { return mergePaddingObject("number" != typeof (padding = "function" == typeof padding ? padding(Object.assign({}, state.rects, { placement: state.placement })) : padding) ? padding : expandToHashMap(padding, basePlacements)); }(options.padding, state), arrowRect = getLayoutRect(arrowElement), minProp = "y" === axis ? enums_top : left, maxProp = "y" === axis ? bottom : right, endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len], startDiff = popperOffsets[axis] - state.rects.reference[axis], arrowOffsetParent = getOffsetParent(arrowElement), clientSize = arrowOffsetParent ? "y" === axis ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0, centerToReference = endDiff / 2 - startDiff / 2, min = paddingObject[minProp], max = clientSize - arrowRect[len] - paddingObject[maxProp], center = clientSize / 2 - arrowRect[len] / 2 + centerToReference, offset = within(min, center, max), axisProp = axis;
|
|
229
229
|
state.modifiersData[name] = ((_state$modifiersData$ = {})[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
|
|
230
|
-
} }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(
|
|
230
|
+
} }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2211), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
|
|
231
231
|
function Popper(_ref) { var _ref$placement = _ref.placement, placement = void 0 === _ref$placement ? "bottom" : _ref$placement, _ref$strategy = _ref.strategy, strategy = void 0 === _ref$strategy ? "absolute" : _ref$strategy, _ref$modifiers = _ref.modifiers, modifiers = void 0 === _ref$modifiers ? Popper_EMPTY_MODIFIERS : _ref$modifiers, referenceElement = _ref.referenceElement, onFirstUpdate = _ref.onFirstUpdate, innerRef = _ref.innerRef, children = _ref.children, referenceNode = react.useContext(ManagerReferenceNodeContext), _React$useState = react.useState(null), popperElement = _React$useState[0], setPopperElement = _React$useState[1], _React$useState2 = react.useState(null), arrowElement = _React$useState2[0], setArrowElement = _React$useState2[1]; react.useEffect((function () { setRef(innerRef, popperElement); }), [innerRef, popperElement]); var options = react.useMemo((function () { return { placement: placement, strategy: strategy, onFirstUpdate: onFirstUpdate, modifiers: [].concat(modifiers, [{ name: "arrow", enabled: null != arrowElement, options: { element: arrowElement } }]) }; }), [placement, strategy, onFirstUpdate, modifiers, arrowElement]), _usePopper = function usePopper(referenceElement, popperElement, options) { void 0 === options && (options = {}); var prevOptions = react.useRef(null), optionsWithDefaults = { onFirstUpdate: options.onFirstUpdate, placement: options.placement || "bottom", strategy: options.strategy || "absolute", modifiers: options.modifiers || EMPTY_MODIFIERS }, _React$useState = react.useState({ styles: { popper: { position: optionsWithDefaults.strategy, left: "0", top: "0" }, arrow: { position: "absolute" } }, attributes: {} }), state = _React$useState[0], setState = _React$useState[1], updateStateModifier = react.useMemo((function () { return { name: "updateState", enabled: !0, phase: "write", fn: function fn(_ref) { var state = _ref.state, elements = Object.keys(state.elements); setState({ styles: fromEntries(elements.map((function (element) { return [element, state.styles[element] || {}]; }))), attributes: fromEntries(elements.map((function (element) { return [element, state.attributes[element]]; }))) }); }, requires: ["computeStyles"] }; }), []), popperOptions = react.useMemo((function () { var newOptions = { onFirstUpdate: optionsWithDefaults.onFirstUpdate, placement: optionsWithDefaults.placement, strategy: optionsWithDefaults.strategy, modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, { name: "applyStyles", enabled: !1 }]) }; return react_fast_compare_default()(prevOptions.current, newOptions) ? prevOptions.current || newOptions : (prevOptions.current = newOptions, newOptions); }), [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]), popperInstanceRef = react.useRef(); return useIsomorphicLayoutEffect((function () { popperInstanceRef.current && popperInstanceRef.current.setOptions(popperOptions); }), [popperOptions]), useIsomorphicLayoutEffect((function () { if (null != referenceElement && null != popperElement) {
|
|
232
232
|
var popperInstance = (options.createPopper || popper_createPopper)(referenceElement, popperElement, popperOptions);
|
|
233
233
|
return popperInstanceRef.current = popperInstance, function () { popperInstance.destroy(), popperInstanceRef.current = null; };
|
|
234
234
|
} }), [referenceElement, popperElement, options.createPopper]), { state: popperInstanceRef.current ? popperInstanceRef.current.state : null, styles: state.styles, attributes: state.attributes, update: popperInstanceRef.current ? popperInstanceRef.current.update : null, forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null }; }(referenceElement || referenceNode, popperElement, options), state = _usePopper.state, styles = _usePopper.styles, forceUpdate = _usePopper.forceUpdate, update = _usePopper.update, childrenProps = react.useMemo((function () { return { ref: setPopperElement, style: styles.popper, placement: state ? state.placement : placement, hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null, isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null, arrowProps: { style: styles.arrow, ref: setArrowElement }, forceUpdate: forceUpdate || NOOP, update: update || NOOP_PROMISE }; }), [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]); return unwrapArray(children)(childrenProps); }
|
|
235
|
-
var warning = __webpack_require__(
|
|
235
|
+
var warning = __webpack_require__(2212), warning_default = __webpack_require__.n(warning);
|
|
236
236
|
function Reference(_ref) { var children = _ref.children, innerRef = _ref.innerRef, setReferenceNode = react.useContext(ManagerReferenceNodeSetterContext), refHandler = react.useCallback((function (node) { setRef(innerRef, node), safeInvoke(setReferenceNode, node); }), [innerRef, setReferenceNode]); return react.useEffect((function () { return function () { return setRef(innerRef, null); }; })), react.useEffect((function () { warning_default()(Boolean(setReferenceNode), "`Reference` should not be used outside of a `Manager` component."); }), [setReferenceNode]), unwrapArray(children)({ ref: refHandler }); }
|
|
237
237
|
var TooltipContext = react_default.a.createContext({}), callAll = function callAll() { for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++)
|
|
238
238
|
fns[_key] = arguments[_key]; return function () { for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++)
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
style.transform = "translate3d(" + x + "px, " + y + "px, 0";
|
|
259
259
|
} return react_default.a.createElement(react_popper_tooltip_Tooltip, Object(esm_extends.a)({ arrowProps: arrowProps, closeOnReferenceHidden: closeOnReferenceHidden, isReferenceHidden: isReferenceHidden, placement: placement, update: update, style: style, tooltip: tooltip, trigger: trigger, mutationObserverOptions: mutationObserverOptions }, { clearScheduled: _this2.clearScheduled, hideTooltip: _this2.hideTooltip, innerRef: ref })); })); return react_default.a.createElement(Manager, null, react_default.a.createElement(Reference, { innerRef: getTriggerRef }, (function (_ref4) { var ref = _ref4.ref; return children({ getTriggerProps: _this2.getTriggerProps, triggerRef: ref }); })), this.getState() && (usePortal ? Object(react_dom.createPortal)(popper, portalContainer) : popper)); }, _proto.isControlled = function isControlled() { return void 0 !== this.props.tooltipShown; }, _proto.getState = function getState() { return this.isControlled() ? this.props.tooltipShown : this.state.tooltipShown; }, _proto.isTriggeredBy = function isTriggeredBy(event) { var trigger = this.props.trigger; return trigger === event || Array.isArray(trigger) && trigger.includes(event); }, TooltipTrigger; }(react.Component);
|
|
260
260
|
react_popper_tooltip_TooltipTrigger.defaultProps = { closeOnReferenceHidden: !0, defaultTooltipShown: !1, delayHide: 0, delayShow: 0, followCursor: !1, onVisibilityChange: function noop() { }, placement: "right", portalContainer: canUseDOM() ? document.body : null, trigger: "hover", usePortal: canUseDOM(), mutationObserverOptions: { childList: !0, subtree: !0 }, modifiers: [] };
|
|
261
|
-
var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(85), __webpack_require__(32), __webpack_require__(
|
|
261
|
+
var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(85), __webpack_require__(32), __webpack_require__(178), __webpack_require__(24), __webpack_require__(166)), memoizerific_default = __webpack_require__.n(memoizerific), utils = __webpack_require__(114);
|
|
262
262
|
function _extends() { return _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {
|
|
263
263
|
var source = arguments[i];
|
|
264
264
|
for (var key in source)
|
package/dist/storybook-static/{4.d1de0501.iframe.bundle.d.ts → 4.27d0b6b3.iframe.bundle.d.ts}
RENAMED
|
File without changes
|