pds-dev-kit-web 1.9.0-beta.6 → 1.9.0-beta.8
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/styles/movement/keyframes.d.ts +2 -0
- package/dist/src/common/styles/movement/keyframes.js +9 -7
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts +1 -1
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js +5 -4
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +4 -3
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +88 -57
- package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +2 -2
- package/dist/src/desktop/components/TextLabel/TextLabel.js +26 -21
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.d.ts +1 -1
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.js +5 -4
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +4 -3
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +88 -57
- package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +2 -2
- package/dist/src/mobile/components/TextLabel/TextLabel.js +21 -16
- package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -1
- package/dist/src/sub/DynamicLayout/DynamicLayout.js +2 -2
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.d.ts +2 -1
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js +2 -2
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.js +8 -8
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.d.ts +2 -1
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js +44 -17
- 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/src/sub/DynamicLayout/types.d.ts +1 -0
- package/dist/storybook-static/{0.2023c95c.iframe.bundle.d.ts → 0.f85c225d.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{0.2023c95c.iframe.bundle.js → 0.f85c225d.iframe.bundle.js} +7 -7
- package/dist/storybook-static/{4.d1de0501.iframe.bundle.d.ts → 4.32dc09b1.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{4.d1de0501.iframe.bundle.js → 4.32dc09b1.iframe.bundle.js} +70 -70
- package/dist/storybook-static/{5.2f192ddf.iframe.bundle.d.ts → 5.f8adf19a.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{5.2f192ddf.iframe.bundle.js → 5.f8adf19a.iframe.bundle.js} +13 -13
- package/dist/storybook-static/{6.62fc7663.iframe.bundle.d.ts → 6.bbd5c6b7.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{6.62fc7663.iframe.bundle.js → 6.bbd5c6b7.iframe.bundle.js} +6 -6
- package/dist/storybook-static/{7.3518bf24.iframe.bundle.d.ts → 7.b309bb58.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{7.3518bf24.iframe.bundle.js → 7.b309bb58.iframe.bundle.js} +1 -1
- package/dist/storybook-static/{main.c8ffb728.iframe.bundle.d.ts → main.b3a48c0a.iframe.bundle.d.ts} +7 -2
- package/dist/storybook-static/{main.c8ffb728.iframe.bundle.js → main.b3a48c0a.iframe.bundle.js} +1155 -1043
- package/dist/storybook-static/{runtime~main.54fba058.iframe.bundle.d.ts → runtime~main.fb11004c.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{runtime~main.54fba058.iframe.bundle.js → runtime~main.fb11004c.iframe.bundle.js} +1 -1
- package/dist/storybook-static/{vendors~main.dd7c8d3f.iframe.bundle.d.ts → vendors~main.bf41a3c3.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{vendors~main.dd7c8d3f.iframe.bundle.js → vendors~main.bf41a3c3.iframe.bundle.js} +559 -559
- package/package.json +1 -1
- package/release-note.md +5 -18
|
@@ -35,28 +35,25 @@ var IconButton_1 = require("../IconButton");
|
|
|
35
35
|
var TextLabel_1 = require("../TextLabel");
|
|
36
36
|
var ChatBubble_1 = __importDefault(require("./ChatBubble"));
|
|
37
37
|
var Popup_1 = require("./Popup");
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
38
|
+
var chatBubbleTailType = {
|
|
39
|
+
other_avatar_impact: 'left_top',
|
|
40
|
+
other_avatar: 'left_top',
|
|
41
|
+
other_avatar_sub: 'none',
|
|
42
|
+
other: 'left_top',
|
|
43
|
+
other_sub: 'none',
|
|
44
|
+
me: 'right_top',
|
|
45
|
+
me_sub: 'none'
|
|
45
46
|
};
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
my_tail: 'right_top',
|
|
52
|
-
my: 'none'
|
|
47
|
+
var profileImageBorderColorTheme = {
|
|
48
|
+
grey: 'ui_avatar_border',
|
|
49
|
+
brand_primary: 'ui_avatar_border_brandprimary',
|
|
50
|
+
translucent_white: 'ui_avatar_border_translucent_white',
|
|
51
|
+
translucent_black: 'ui_avatar_border_translucent_black'
|
|
53
52
|
};
|
|
54
53
|
function ChatBubbleListItem(_a) {
|
|
55
|
-
var titleText = _a.titleText, _b = _a.
|
|
56
|
-
var
|
|
57
|
-
var
|
|
58
|
-
var isTail = styleTheme.includes('tail');
|
|
59
|
-
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
|
|
54
|
+
var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
|
|
55
|
+
var isMe = styleTheme.includes('me');
|
|
56
|
+
var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
|
|
60
57
|
var contextMenuRef = (0, react_1.useRef)(null);
|
|
61
58
|
var chatBody = document.querySelector('#chatMessageBox');
|
|
62
59
|
var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
|
|
@@ -82,24 +79,65 @@ function ChatBubbleListItem(_a) {
|
|
|
82
79
|
}
|
|
83
80
|
setIsContextMenuOpen(false);
|
|
84
81
|
};
|
|
82
|
+
var isShowProfileImage = function () {
|
|
83
|
+
if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
|
|
84
|
+
return true;
|
|
85
|
+
}
|
|
86
|
+
return false;
|
|
87
|
+
};
|
|
88
|
+
var isShowTitleText = function () {
|
|
89
|
+
if (styleTheme === 'other_avatar_impact' ||
|
|
90
|
+
styleTheme === 'other_avatar' ||
|
|
91
|
+
styleTheme === 'other') {
|
|
92
|
+
return true;
|
|
93
|
+
}
|
|
94
|
+
return false;
|
|
95
|
+
};
|
|
96
|
+
var checkTextColorTheme = function () {
|
|
97
|
+
switch (colorTheme) {
|
|
98
|
+
case 'grey': {
|
|
99
|
+
return 'sysTextPrimary';
|
|
100
|
+
}
|
|
101
|
+
case 'brand_primary': {
|
|
102
|
+
return 'usrTextBrandPrimary';
|
|
103
|
+
}
|
|
104
|
+
case 'translucent_white': {
|
|
105
|
+
return 'sysTextBlack';
|
|
106
|
+
}
|
|
107
|
+
case 'translucent_black': {
|
|
108
|
+
return 'sysTextWhite';
|
|
109
|
+
}
|
|
110
|
+
default: {
|
|
111
|
+
return 'sysTextPrimary';
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
var isLeftSpacingChecker = function () {
|
|
116
|
+
if (styleTheme === 'other_avatar_impact' ||
|
|
117
|
+
styleTheme === 'other_avatar' ||
|
|
118
|
+
styleTheme === 'other_avatar_sub') {
|
|
119
|
+
return true;
|
|
120
|
+
}
|
|
121
|
+
return false;
|
|
122
|
+
};
|
|
85
123
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
86
|
-
react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile",
|
|
87
|
-
|
|
88
|
-
react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width:
|
|
124
|
+
react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe },
|
|
125
|
+
isLeftSpacingChecker() ? (react_1.default.createElement(react_1.default.Fragment, null, isShowProfileImage() ? (react_1.default.createElement(S_ImageViewWrapper, { isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme },
|
|
126
|
+
react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })),
|
|
89
127
|
react_1.default.createElement(S_RightBox, null,
|
|
90
|
-
|
|
91
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme:
|
|
128
|
+
isShowTitleText() && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
129
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }),
|
|
92
130
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }))),
|
|
93
131
|
react_1.default.createElement(S_ChatBubbleBox, null,
|
|
94
|
-
react_1.default.createElement(S_ChatBubbleWrapper, {
|
|
95
|
-
timeMode === 'use' && timeText &&
|
|
132
|
+
react_1.default.createElement(S_ChatBubbleWrapper, { isMe: isMe },
|
|
133
|
+
timeMode === 'use' && timeText && isMe && (react_1.default.createElement(S_TimeWrapper, null,
|
|
96
134
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }),
|
|
97
135
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
|
|
98
|
-
react_1.default.createElement(ChatBubble_1.default, { colorTheme:
|
|
99
|
-
timeMode === 'use' && timeText && !
|
|
136
|
+
react_1.default.createElement(ChatBubble_1.default, { colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, children),
|
|
137
|
+
timeMode === 'use' && timeText && !isMe && (react_1.default.createElement(S_TimeWrapper, null,
|
|
100
138
|
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
|
|
101
139
|
react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
|
|
102
|
-
hoverMode === 'use' && !
|
|
140
|
+
hoverMode === 'use' && !isMe && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
|
|
103
141
|
react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))))),
|
|
104
142
|
react_1.default.createElement(Popup_1.PopupProvider, null,
|
|
105
143
|
react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
|
|
@@ -109,41 +147,34 @@ var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (tem
|
|
|
109
147
|
var theme = _a.theme;
|
|
110
148
|
return theme.spacing.spacingA;
|
|
111
149
|
});
|
|
112
|
-
var
|
|
113
|
-
var
|
|
114
|
-
return
|
|
150
|
+
var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n"])), function (_a) {
|
|
151
|
+
var isMe = _a.isMe;
|
|
152
|
+
return isMe && MyChatBubbleListItem;
|
|
115
153
|
});
|
|
116
|
-
var
|
|
117
|
-
var
|
|
118
|
-
return
|
|
119
|
-
}, function (_a) {
|
|
120
|
-
var imageMode = _a.imageMode;
|
|
121
|
-
return imageMode === 'none' && NoImageChatBubbleListItem;
|
|
154
|
+
var ImageViewBrandPrimary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 2px solid\n ", ";\n"], ["\n border: 2px solid\n ", ";\n"])), function (_a) {
|
|
155
|
+
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
156
|
+
return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
|
|
122
157
|
});
|
|
123
|
-
var
|
|
124
|
-
var theme = _a.theme;
|
|
125
|
-
return theme
|
|
126
|
-
});
|
|
127
|
-
var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: 1px solid ", ";\n"], ["\n border: 1px solid ", ";\n"])), function (_a) {
|
|
128
|
-
var theme = _a.theme;
|
|
129
|
-
return theme.ui_profile_image_border;
|
|
158
|
+
var ImageViewDefault = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n"], ["\n border: 1px solid\n ", ";\n"])), function (_a) {
|
|
159
|
+
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
160
|
+
return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
|
|
130
161
|
});
|
|
131
|
-
var S_ImageViewWrapper = styled_components_1.default.div(
|
|
162
|
+
var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
|
|
132
163
|
var theme = _a.theme;
|
|
133
164
|
return theme.spacing.spacingB;
|
|
134
165
|
}, function (_a) {
|
|
135
|
-
var
|
|
136
|
-
return (
|
|
166
|
+
var isOtherAvatarImpact = _a.isOtherAvatarImpact;
|
|
167
|
+
return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
|
|
137
168
|
});
|
|
138
|
-
var S_RightBox = styled_components_1.default.div(
|
|
139
|
-
var S_ChatBubbleBox = styled_components_1.default.div(
|
|
140
|
-
var MyChatBubble = (0, styled_components_1.css)(
|
|
141
|
-
var S_ChatBubbleWrapper = styled_components_1.default.div(
|
|
142
|
-
var
|
|
143
|
-
return
|
|
169
|
+
var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
170
|
+
var S_ChatBubbleBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
171
|
+
var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
|
|
172
|
+
var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
|
|
173
|
+
var isMe = _a.isMe;
|
|
174
|
+
return isMe && MyChatBubble;
|
|
144
175
|
});
|
|
145
|
-
var S_TimeWrapper = styled_components_1.default.div(
|
|
146
|
-
var S_SeeMoreButton = styled_components_1.default.div(
|
|
176
|
+
var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
|
|
177
|
+
var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
147
178
|
var theme = _a.theme;
|
|
148
179
|
return theme.spacing.spacingB;
|
|
149
180
|
}, function (_a) {
|
|
@@ -157,4 +188,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (temp
|
|
|
157
188
|
return hoverMode === 'use' && '1';
|
|
158
189
|
});
|
|
159
190
|
exports.default = ChatBubbleListItem;
|
|
160
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11
|
|
191
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -5,7 +5,7 @@ export declare type TextLabelProps = {
|
|
|
5
5
|
textAlign?: 'left' | 'center' | 'right';
|
|
6
6
|
styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
|
|
7
7
|
colorOverride?: UiColors;
|
|
8
|
-
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
8
|
+
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
9
9
|
singleLineMode?: 'none' | 'use';
|
|
10
10
|
ellipsisMode?: 'none' | 'use';
|
|
11
11
|
lineLimit?: number;
|
|
@@ -22,7 +22,7 @@ export declare type TextStyleProps = {
|
|
|
22
22
|
textAlign?: 'left' | 'center' | 'right';
|
|
23
23
|
styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
|
|
24
24
|
colorOverride?: UiColors;
|
|
25
|
-
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
25
|
+
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
26
26
|
singleLineMode?: 'none' | 'use';
|
|
27
27
|
ellipsisMode?: 'none' | 'use';
|
|
28
28
|
lineLimit?: number;
|
|
@@ -233,52 +233,56 @@ var sysTextWhite = (0, styled_components_1.css)(templateObject_22 || (templateOb
|
|
|
233
233
|
var theme = _a.theme;
|
|
234
234
|
return theme.ui_cpnt_textlabel_sys_white;
|
|
235
235
|
});
|
|
236
|
-
var
|
|
236
|
+
var sysTextBlack = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
237
|
+
var theme = _a.theme;
|
|
238
|
+
return theme.ui_cpnt_textlabel_sys_black;
|
|
239
|
+
});
|
|
240
|
+
var sysTextError = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
237
241
|
var theme = _a.theme;
|
|
238
242
|
return theme.ui_cpnt_textlabel_sys_error;
|
|
239
243
|
});
|
|
240
|
-
var sysTextWarning = (0, styled_components_1.css)(
|
|
244
|
+
var sysTextWarning = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
241
245
|
var theme = _a.theme;
|
|
242
246
|
return theme.ui_cpnt_textlabel_sys_warning;
|
|
243
247
|
});
|
|
244
|
-
var sysTextBrandPrimary = (0, styled_components_1.css)(
|
|
248
|
+
var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
245
249
|
var theme = _a.theme;
|
|
246
250
|
return theme.ui_cpnt_textlabel_sys_brandprimary;
|
|
247
251
|
});
|
|
248
|
-
var sysTextBrandSeconVariant = (0, styled_components_1.css)(
|
|
252
|
+
var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
249
253
|
var theme = _a.theme;
|
|
250
254
|
return theme.ui_cpnt_textlabel_sys_brandseconvariant;
|
|
251
255
|
});
|
|
252
|
-
var usrTextBrandPrimary = (0, styled_components_1.css)(
|
|
256
|
+
var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
253
257
|
var theme = _a.theme;
|
|
254
258
|
return theme.ui_cpnt_textlabel_usr_brandprimary;
|
|
255
259
|
});
|
|
256
|
-
var usrTextBrandSeconVariant = (0, styled_components_1.css)(
|
|
260
|
+
var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
257
261
|
var theme = _a.theme;
|
|
258
262
|
return theme.ui_cpnt_textlabel_usr_brandseconvariant;
|
|
259
263
|
});
|
|
260
|
-
var usrTextBrandOnPrimary = (0, styled_components_1.css)(
|
|
264
|
+
var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
261
265
|
var theme = _a.theme;
|
|
262
266
|
return theme.ui_cpnt_textlabel_usr_brandonprimary;
|
|
263
267
|
});
|
|
264
|
-
var customFontStyle = (0, styled_components_1.css)(
|
|
268
|
+
var customFontStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"])), function (_a) {
|
|
265
269
|
var customFontSize = _a.customFontSize;
|
|
266
270
|
return customFontSize;
|
|
267
271
|
}, function (_a) {
|
|
268
272
|
var theme = _a.theme, customFontWeight = _a.customFontWeight;
|
|
269
273
|
return customFontWeight === 'bold' ? theme.fontWeight.bold : theme.fontWeight.normal;
|
|
270
274
|
});
|
|
271
|
-
var colorOverrideStyle = (0, styled_components_1.css)(
|
|
275
|
+
var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
272
276
|
var colorOverride = _a.colorOverride, theme = _a.theme;
|
|
273
277
|
return colorOverride && theme[colorOverride];
|
|
274
278
|
});
|
|
275
|
-
var ellipsisStyle = (0, styled_components_1.css)(
|
|
279
|
+
var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
|
|
276
280
|
var lineLimit = _a.lineLimit;
|
|
277
281
|
return lineLimit;
|
|
278
282
|
});
|
|
279
|
-
var userSelectModeStyle = (0, styled_components_1.css)(
|
|
280
|
-
var bulletPointModeStyle = (0, styled_components_1.css)(
|
|
281
|
-
var S_TextLabel = styled_components_1.default.div(
|
|
283
|
+
var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
|
|
284
|
+
var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"])));
|
|
285
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
282
286
|
var textAlign = _a.textAlign;
|
|
283
287
|
return textAlign;
|
|
284
288
|
}, function (_a) {
|
|
@@ -324,6 +328,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_35 || (template
|
|
|
324
328
|
sysTextSecondary: sysTextSecondary,
|
|
325
329
|
sysTextTertiary: sysTextTertiary,
|
|
326
330
|
sysTextWhite: sysTextWhite,
|
|
331
|
+
sysTextBlack: sysTextBlack,
|
|
327
332
|
sysTextError: sysTextError,
|
|
328
333
|
sysTextWarning: sysTextWarning,
|
|
329
334
|
sysTextBrandPrimary: sysTextBrandPrimary,
|
|
@@ -360,7 +365,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_35 || (template
|
|
|
360
365
|
var bulletPointMode = _a.bulletPointMode;
|
|
361
366
|
return bulletPointMode === 'use' && bulletPointModeStyle;
|
|
362
367
|
});
|
|
363
|
-
var S_AfterTextBox = styled_components_1.default.div(
|
|
368
|
+
var S_AfterTextBox = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
|
|
364
369
|
var theme = _a.theme;
|
|
365
370
|
return theme.spacing.spacingA;
|
|
366
371
|
}, function (_a) {
|
|
@@ -376,6 +381,6 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_36 || (templ
|
|
|
376
381
|
return 'vertical-align: middle';
|
|
377
382
|
}
|
|
378
383
|
});
|
|
379
|
-
var S_IconWrapper = styled_components_1.default.div(
|
|
384
|
+
var S_IconWrapper = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"])));
|
|
380
385
|
exports.default = TextLabel;
|
|
381
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37;
|
|
386
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DynamicLayoutProps } from './types';
|
|
3
|
-
declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
|
|
3
|
+
declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, animationDelay, navigationHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
|
|
4
4
|
export default DynamicLayout;
|
|
@@ -28,11 +28,11 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
|
|
|
28
28
|
var SectionMatcher_1 = require("./components/SectionMatcher");
|
|
29
29
|
var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
|
|
30
30
|
function DynamicLayout(_a) {
|
|
31
|
-
var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, onClickEditSection = _a.onClickEditSection;
|
|
31
|
+
var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, animationDelay = _a.animationDelay, navigationHandler = _a.navigationHandler, onClickEditSection = _a.onClickEditSection;
|
|
32
32
|
var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
|
|
33
33
|
.sort(function (a, b) { return a.order - b.order; });
|
|
34
34
|
return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
|
|
35
|
-
mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
|
|
35
|
+
mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSectionMatcher_1.EditModeSectionMatcher, { animationDelay: animationDelay !== null && animationDelay !== void 0 ? animationDelay : 150, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
|
|
36
36
|
mode !== 'EDIT' &&
|
|
37
37
|
filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)); })));
|
|
38
38
|
}
|
package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { ISection } from '../../types';
|
|
3
|
-
export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
|
|
3
|
+
export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, animationDelay, onClickEditSection }: {
|
|
4
4
|
filteredSortedSection: ISection[];
|
|
5
5
|
scrollDownTargetSectionId?: number;
|
|
6
6
|
editingSectionId?: number;
|
|
7
|
+
animationDelay: number;
|
|
7
8
|
onClickEditSection: (section: ISection) => void;
|
|
8
9
|
}): JSX.Element;
|
package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js
CHANGED
|
@@ -18,8 +18,8 @@ var react_1 = __importDefault(require("react"));
|
|
|
18
18
|
var SectionMatcher_1 = require("../SectionMatcher");
|
|
19
19
|
var SectionBox_1 = __importDefault(require("./SectionBox"));
|
|
20
20
|
function EditModeSectionMatcher(_a) {
|
|
21
|
-
var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
|
|
22
|
-
return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox_1.default, { isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
|
|
21
|
+
var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, animationDelay = _a.animationDelay, onClickEditSection = _a.onClickEditSection;
|
|
22
|
+
return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox_1.default, { animationDelay: animationDelay, isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
|
|
23
23
|
react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)))); })));
|
|
24
24
|
}
|
|
25
25
|
exports.default = EditModeSectionMatcher;
|
|
@@ -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;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export default function SectionBox({ scrollIntoThisSection, isEditing, children, onClick }: {
|
|
2
|
+
export default function SectionBox({ scrollIntoThisSection, isEditing, children, animationDelay, onClick }: {
|
|
3
3
|
scrollIntoThisSection: boolean;
|
|
4
4
|
isEditing: boolean;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
animationDelay: number;
|
|
6
7
|
onClick: () => void;
|
|
7
8
|
}): JSX.Element;
|
|
@@ -33,11 +33,19 @@ var desktop_1 = require("../../../../desktop");
|
|
|
33
33
|
var useLazyUnmount_1 = require("../../hooks/useLazyUnmount");
|
|
34
34
|
var OverlayBorders_1 = __importDefault(require("./OverlayBorders"));
|
|
35
35
|
function SectionBox(_a) {
|
|
36
|
-
var scrollIntoThisSection = _a.scrollIntoThisSection, isEditing = _a.isEditing, children = _a.children, onClick = _a.onClick;
|
|
36
|
+
var scrollIntoThisSection = _a.scrollIntoThisSection, isEditing = _a.isEditing, children = _a.children, animationDelay = _a.animationDelay, onClick = _a.onClick;
|
|
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); } }, animationDelay);
|
|
43
|
+
var onClickDelayedAsync = (0, useLazyUnmount_1.useLazyUnmount)({
|
|
44
|
+
doUnmount: function () {
|
|
45
|
+
onClick();
|
|
46
|
+
setFadeout(false);
|
|
47
|
+
}
|
|
48
|
+
}, animationDelay);
|
|
41
49
|
(0, react_1.useEffect)(function () {
|
|
42
50
|
var _a;
|
|
43
51
|
if (!sectionRef) {
|
|
@@ -47,30 +55,48 @@ 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
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
setHasNoChild(false);
|
|
67
|
+
}, [isEditing, children]);
|
|
50
68
|
var onMouseEnter = function () {
|
|
51
69
|
setIsHover(true);
|
|
52
70
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
react_1.default.createElement(
|
|
60
|
-
react_1.default.createElement(
|
|
61
|
-
|
|
71
|
+
var onClickSectionBox = function () {
|
|
72
|
+
setFadeout(true);
|
|
73
|
+
onClickDelayedAsync();
|
|
74
|
+
};
|
|
75
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
76
|
+
react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClickSectionBox, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing },
|
|
77
|
+
isEditing && !hasNoChild && (react_1.default.createElement(S_Editing, { isMounting: true },
|
|
78
|
+
react_1.default.createElement(OverlayBorders_1.default, { zIndex: 1 }),
|
|
79
|
+
react_1.default.createElement(TopRightAbsoluteBox, null,
|
|
80
|
+
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" })))),
|
|
81
|
+
isHover && !isEditing && (react_1.default.createElement(DimmedEditOverlay, { fadeOut: fadeOut },
|
|
82
|
+
react_1.default.createElement(S_EditButton, null,
|
|
83
|
+
react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
|
|
84
|
+
children)));
|
|
62
85
|
}
|
|
63
86
|
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) {
|
|
87
|
+
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
88
|
var theme = _a.theme;
|
|
66
|
-
return theme.
|
|
89
|
+
return theme.ui_editor_preview_editing;
|
|
67
90
|
});
|
|
68
91
|
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:
|
|
92
|
+
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
93
|
var theme = _a.theme;
|
|
71
94
|
return theme.ui_pages_section_dimmed;
|
|
95
|
+
}, function (_a) {
|
|
96
|
+
var fadeOut = _a.fadeOut;
|
|
97
|
+
return fadeOut && 'fadeOut 0.2s ease-out';
|
|
72
98
|
});
|
|
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
|
|
99
|
+
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
100
|
var theme = _a.theme;
|
|
75
101
|
return theme.ui_71;
|
|
76
102
|
}, function (_a) {
|
|
@@ -82,5 +108,6 @@ var S_EditButton = styled_components_1.default.div(templateObject_4 || (template
|
|
|
82
108
|
}, function (_a) {
|
|
83
109
|
var theme = _a.theme;
|
|
84
110
|
return theme.ui_73;
|
|
85
|
-
}
|
|
86
|
-
var
|
|
111
|
+
});
|
|
112
|
+
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"])));
|
|
113
|
+
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 {};
|