pds-dev-kit-web 2.2.191 → 2.2.193
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 +4 -4
- package/dist/index.js +5 -3
- package/dist/src/desktop/components/AdminList/AdminList.js +5 -11
- package/dist/src/desktop/components/Snackbar/Snackbar.d.ts +17 -0
- package/dist/src/desktop/components/Snackbar/Snackbar.js +221 -0
- package/dist/src/desktop/components/Snackbar/index.d.ts +1 -0
- package/dist/src/desktop/components/Snackbar/index.js +8 -0
- package/dist/src/desktop/components/Snackbar/provider.d.ts +11 -0
- package/dist/src/desktop/components/Snackbar/provider.js +43 -0
- package/dist/src/desktop/components/index.d.ts +2 -1
- package/dist/src/desktop/components/index.js +4 -1
- package/dist/src/desktop/index.d.ts +1 -1
- package/dist/src/desktop/index.js +2 -1
- package/dist/src/mobile/components/Snackbar/Snackbar.d.ts +17 -0
- package/dist/src/mobile/components/Snackbar/Snackbar.js +221 -0
- package/dist/src/mobile/components/Snackbar/index.d.ts +1 -0
- package/dist/src/mobile/components/Snackbar/index.js +8 -0
- package/dist/src/mobile/components/Snackbar/provider.d.ts +11 -0
- package/dist/src/mobile/components/Snackbar/provider.js +43 -0
- package/dist/src/mobile/components/index.d.ts +2 -1
- package/dist/src/mobile/components/index.js +3 -1
- package/dist/src/mobile/index.d.ts +1 -1
- package/dist/src/mobile/index.js +3 -2
- package/dist/src/sub/AdminList/AdminList/AdminList.js +8 -11
- package/package.json +1 -1
- package/release-note.md +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -8,20 +8,20 @@ export { AdminListItemTransition, InputTransition, ButtonTransition } from './sr
|
|
|
8
8
|
export { Form };
|
|
9
9
|
import { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch } from './src/hybrid';
|
|
10
10
|
export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };
|
|
11
|
-
import { LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_BoxItem, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, D_DesktopHeadlessModal, D_DesktopTutorialModal, DesktopTutorialModalInfoType, D_SectionSheet } from './src/desktop';
|
|
11
|
+
import { LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_BoxItem, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_Snackbar, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, D_DesktopHeadlessModal, D_DesktopTutorialModal, DesktopTutorialModalInfoType, D_SectionSheet } from './src/desktop';
|
|
12
12
|
export { LayoutWF, WFContainersBox };
|
|
13
13
|
export { LayoutWH, WHContainersBox };
|
|
14
14
|
export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
|
|
15
15
|
export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
|
|
16
|
-
export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_BoxItem, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
|
|
16
|
+
export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_BoxItem, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_Snackbar, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
|
|
17
17
|
export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopBasicModalWithTab, D_DesktopHeadlessModal, D_DesktopTutorialModal, D_SectionSheet };
|
|
18
18
|
export type { DesktopBasicModalWithTabInfoType, DesktopTutorialModalInfoType };
|
|
19
|
-
import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_BoxItem, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_DatePicker, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton, M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet } from './src/mobile';
|
|
19
|
+
import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_BoxItem, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_DatePicker, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_Snackbar, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton, M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet } from './src/mobile';
|
|
20
20
|
export { LayoutMF, MFContainersBox };
|
|
21
21
|
export { LayoutMM, MMNavigationContainer, MMContainersBox };
|
|
22
22
|
export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
|
|
23
23
|
export { LayoutMS, MSNavigationContainer, MSContainersBox };
|
|
24
|
-
export { M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_BoxItem, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_DatePicker, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
|
|
24
|
+
export { M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_BoxItem, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_DatePicker, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_Snackbar, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
|
|
25
25
|
export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
|
|
26
26
|
import { DynamicLayout } from './src/sub';
|
|
27
27
|
export { DynamicLayout };
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.LayoutWF = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.ButtonTransition = exports.InputTransition = exports.AdminListItemTransition = exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate = exports.scaleBounceOut02 = exports.scaleBounceOut = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = exports.modalOverlayOffAni = exports.modalOverlayOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOverlayOffAni = exports.dialogOverlayOnAni = exports.dialogOffAni = exports.dialogOnAni = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
|
|
4
|
-
exports.
|
|
5
|
-
exports.
|
|
6
|
-
exports.ToolBar = exports.BulkActionBar = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = void 0;
|
|
4
|
+
exports.D_Snackbar = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BoxItem = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = void 0;
|
|
5
|
+
exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = void 0;
|
|
6
|
+
exports.ToolBar = exports.BulkActionBar = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Snackbar = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = void 0;
|
|
7
7
|
/* eslint-disable import/order */
|
|
8
8
|
/* eslint-disable import/first */
|
|
9
9
|
// common
|
|
@@ -117,6 +117,7 @@ Object.defineProperty(exports, "D_ReactionButton", { enumerable: true, get: func
|
|
|
117
117
|
Object.defineProperty(exports, "D_SegmentedButtonGroup", { enumerable: true, get: function () { return desktop_1.D_SegmentedButtonGroup; } });
|
|
118
118
|
Object.defineProperty(exports, "D_Select", { enumerable: true, get: function () { return desktop_1.D_Select; } });
|
|
119
119
|
Object.defineProperty(exports, "D_Slider", { enumerable: true, get: function () { return desktop_1.D_Slider; } });
|
|
120
|
+
Object.defineProperty(exports, "D_Snackbar", { enumerable: true, get: function () { return desktop_1.D_Snackbar; } });
|
|
120
121
|
Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return desktop_1.D_StatusBlock; } });
|
|
121
122
|
Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return desktop_1.D_TextButton; } });
|
|
122
123
|
Object.defineProperty(exports, "D_TextField", { enumerable: true, get: function () { return desktop_1.D_TextField; } });
|
|
@@ -180,6 +181,7 @@ Object.defineProperty(exports, "M_ReactionButton", { enumerable: true, get: func
|
|
|
180
181
|
Object.defineProperty(exports, "M_SegmentedButtonGroup", { enumerable: true, get: function () { return mobile_1.M_SegmentedButtonGroup; } });
|
|
181
182
|
Object.defineProperty(exports, "M_Select", { enumerable: true, get: function () { return mobile_1.M_Select; } });
|
|
182
183
|
Object.defineProperty(exports, "M_Slider", { enumerable: true, get: function () { return mobile_1.M_Slider; } });
|
|
184
|
+
Object.defineProperty(exports, "M_Snackbar", { enumerable: true, get: function () { return mobile_1.M_Snackbar; } });
|
|
183
185
|
Object.defineProperty(exports, "M_StatusBlock", { enumerable: true, get: function () { return mobile_1.M_StatusBlock; } });
|
|
184
186
|
Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return mobile_1.M_TextButton; } });
|
|
185
187
|
Object.defineProperty(exports, "M_TextField", { enumerable: true, get: function () { return mobile_1.M_TextField; } });
|
|
@@ -196,10 +196,12 @@ function AdminList(_a) {
|
|
|
196
196
|
};
|
|
197
197
|
return ((0, jsx_runtime_1.jsxs)(S_AdminList, __assign({ "x-pds-name": "AdminList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [isBulkActionBarOpen && ((0, jsx_runtime_1.jsx)(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1Value: dropdown1Value, dropdown2Value: dropdown2Value, dropdown3Value: dropdown3Value, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1HintText: dropdown1HintText, dropdown2HintText: dropdown2HintText, dropdown3HintText: dropdown3HintText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, tBtnMode: btnMode(), tBtn1Text: tBtn1Text || mBtn1Text, tBtn2Text: tBtn2Text || mBtn2Text, tBtn3Text: tBtn3Text || mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickTBtn1: onClickTBtn1 || onClickMBtn1, onClickTBtn2: onClickTBtn2 || onClickMBtn2, onClickTBtn3: onClickTBtn3 || onClickMBtn3 })), headerRowMode === 'use' && ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, selectAllMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: (0, jsx_runtime_1.jsx)(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), flexibleHideInfoMode: flexibleHideInfoMode, onClickSelectAllCheckbox: handleSelectAllCheckbox }) }) }))), (0, jsx_runtime_1.jsx)(S_ScrollBox, __assign({ scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, { children: react_1.default.Children.count(children) ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, checkboxMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: childrenWithWidthProps }) }))) : ((0, jsx_runtime_1.jsx)(S_EmptyTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }) })) }))] })));
|
|
198
198
|
}
|
|
199
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
199
200
|
var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &::-webkit-scrollbar {\n all: unset;\n display: block;\n }\n"], ["\n &::-webkit-scrollbar {\n all: unset;\n display: block;\n }\n"])));
|
|
200
|
-
|
|
201
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
202
|
+
var scrollVisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n display: initial;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: #ccc;\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n"], ["\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n display: initial;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: #ccc;\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n"])));
|
|
201
203
|
var S_AdminList = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
202
|
-
var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n overflow-y: ", ";\n
|
|
204
|
+
var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n overflow-y: ", ";\n scrollbar-width: ", ";\n"], ["\n flex: 1;\n overflow-y: ", ";\n scrollbar-width: ", ";\n"])), function (_a) {
|
|
203
205
|
var scrollMode = _a.scrollMode;
|
|
204
206
|
switch (scrollMode) {
|
|
205
207
|
case 'infinite':
|
|
@@ -212,15 +214,7 @@ var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateO
|
|
|
212
214
|
}
|
|
213
215
|
}, function (_a) {
|
|
214
216
|
var scrollVisibleType = _a.scrollVisibleType;
|
|
215
|
-
|
|
216
|
-
case 'moving':
|
|
217
|
-
case 'visible': {
|
|
218
|
-
return scrollVisible;
|
|
219
|
-
}
|
|
220
|
-
case 'hidden': {
|
|
221
|
-
return scrollInvisible;
|
|
222
|
-
}
|
|
223
|
-
}
|
|
217
|
+
return scrollVisibleType === 'hidden' ? 'none' : 'thin !important';
|
|
224
218
|
});
|
|
225
219
|
var S_EmptyTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-bottom: 88px;\n padding-top: 88px;\n"], ["\n padding-bottom: 88px;\n padding-top: 88px;\n"])));
|
|
226
220
|
exports.default = AdminList;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type SnackbarPosition = 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-center' | 'right-bottom' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'center';
|
|
3
|
+
export interface BaseSnackbarProps {
|
|
4
|
+
text: string;
|
|
5
|
+
actionBtnText?: string;
|
|
6
|
+
position?: SnackbarPosition;
|
|
7
|
+
closeBtnMode?: 'none' | 'use';
|
|
8
|
+
duration?: number;
|
|
9
|
+
anchorRef?: React.RefObject<HTMLElement>;
|
|
10
|
+
onActionBtnClick?: () => void;
|
|
11
|
+
}
|
|
12
|
+
export interface SnackbarProps extends BaseSnackbarProps {
|
|
13
|
+
id?: string | number;
|
|
14
|
+
onClose?: () => void;
|
|
15
|
+
}
|
|
16
|
+
declare const Snackbar: React.FC<SnackbarProps>;
|
|
17
|
+
export default Snackbar;
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
+
};
|
|
20
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
+
var react_1 = require("react");
|
|
23
|
+
var react_dom_1 = require("react-dom");
|
|
24
|
+
var panels_1 = require("../../panels");
|
|
25
|
+
var components_1 = require("../../../hybrid/components");
|
|
26
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
27
|
+
var IconButton_1 = require("../IconButton");
|
|
28
|
+
var TextButton_1 = require("../TextButton");
|
|
29
|
+
var TextLabel_1 = require("../TextLabel");
|
|
30
|
+
var Snackbar = function (_a) {
|
|
31
|
+
var id = _a.id, text = _a.text, _b = _a.actionBtnText, actionBtnText = _b === void 0 ? '' : _b, _c = _a.position, position = _c === void 0 ? 'bottom-center' : _c, _d = _a.closeBtnMode, closeBtnMode = _d === void 0 ? 'none' : _d, _e = _a.duration, duration = _e === void 0 ? 2000 : _e, anchorRef = _a.anchorRef, onActionBtnClick = _a.onActionBtnClick, onClose = _a.onClose;
|
|
32
|
+
var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
|
|
33
|
+
var _g = (0, react_1.useState)({}), containerStyle = _g[0], setContainerStyle = _g[1];
|
|
34
|
+
var timerRef = (0, react_1.useRef)();
|
|
35
|
+
/*
|
|
36
|
+
* 마운트 시 애니메이션
|
|
37
|
+
*/
|
|
38
|
+
(0, react_1.useEffect)(function () {
|
|
39
|
+
var showTimer = setTimeout(function () {
|
|
40
|
+
setIsVisible(true);
|
|
41
|
+
}, 10);
|
|
42
|
+
return function () { return clearTimeout(showTimer); };
|
|
43
|
+
}, [id]);
|
|
44
|
+
/*
|
|
45
|
+
* duration 타이머
|
|
46
|
+
*/
|
|
47
|
+
(0, react_1.useEffect)(function () {
|
|
48
|
+
if (duration > 0) {
|
|
49
|
+
timerRef.current = setTimeout(function () {
|
|
50
|
+
handleClose();
|
|
51
|
+
}, duration);
|
|
52
|
+
}
|
|
53
|
+
return function () {
|
|
54
|
+
if (timerRef.current) {
|
|
55
|
+
clearTimeout(timerRef.current);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}, [id, duration]);
|
|
59
|
+
/*
|
|
60
|
+
* 스크롤, 리사이즈시 포지션 업데이트
|
|
61
|
+
*/
|
|
62
|
+
(0, react_1.useEffect)(function () {
|
|
63
|
+
var updatePosition = function () {
|
|
64
|
+
if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
|
|
65
|
+
var rect = anchorRef.current.getBoundingClientRect();
|
|
66
|
+
var style = getAnchorBasedStyle(position, rect);
|
|
67
|
+
setContainerStyle(style);
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
var style = getViewportBasedStyle(position);
|
|
71
|
+
setContainerStyle(style);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
// 초기 렌더링 시 약간의 딜레이를 주어 DOM이 완전히 준비되도록 함
|
|
75
|
+
var initialTimer = setTimeout(updatePosition, 0);
|
|
76
|
+
if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
|
|
77
|
+
window.addEventListener('resize', updatePosition);
|
|
78
|
+
// ResizeObserver로 anchorRef 요소의 크기 변화 감지
|
|
79
|
+
var resizeObserver_1 = new ResizeObserver(updatePosition);
|
|
80
|
+
resizeObserver_1.observe(anchorRef.current);
|
|
81
|
+
return function () {
|
|
82
|
+
clearTimeout(initialTimer);
|
|
83
|
+
window.removeEventListener('resize', updatePosition);
|
|
84
|
+
resizeObserver_1.disconnect();
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
updatePosition();
|
|
88
|
+
return function () {
|
|
89
|
+
clearTimeout(initialTimer);
|
|
90
|
+
};
|
|
91
|
+
}, [position, anchorRef]);
|
|
92
|
+
var handleClose = function () {
|
|
93
|
+
setIsVisible(false);
|
|
94
|
+
if (onClose) {
|
|
95
|
+
setTimeout(function () {
|
|
96
|
+
onClose();
|
|
97
|
+
}, 300);
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
var getViewportBasedStyle = function (position) {
|
|
101
|
+
var base = {
|
|
102
|
+
position: 'fixed',
|
|
103
|
+
zIndex: 9999
|
|
104
|
+
};
|
|
105
|
+
var offset = 24;
|
|
106
|
+
switch (position) {
|
|
107
|
+
case 'top-left':
|
|
108
|
+
return __assign(__assign({}, base), { top: offset, left: offset });
|
|
109
|
+
case 'top-center':
|
|
110
|
+
return __assign(__assign({}, base), { top: offset, left: '50%', transform: 'translateX(-50%)' });
|
|
111
|
+
case 'top-right':
|
|
112
|
+
return __assign(__assign({}, base), { top: offset, right: offset });
|
|
113
|
+
case 'right-top':
|
|
114
|
+
return __assign(__assign({}, base), { top: offset, right: offset });
|
|
115
|
+
case 'right-center':
|
|
116
|
+
return __assign(__assign({}, base), { top: '50%', right: offset, transform: 'translateY(-50%)' });
|
|
117
|
+
case 'right-bottom':
|
|
118
|
+
return __assign(__assign({}, base), { bottom: offset, right: offset });
|
|
119
|
+
case 'bottom-right':
|
|
120
|
+
return __assign(__assign({}, base), { bottom: offset, right: offset });
|
|
121
|
+
case 'bottom-center':
|
|
122
|
+
return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
|
|
123
|
+
case 'bottom-left':
|
|
124
|
+
return __assign(__assign({}, base), { bottom: offset, left: offset });
|
|
125
|
+
case 'left-bottom':
|
|
126
|
+
return __assign(__assign({}, base), { bottom: offset, left: offset });
|
|
127
|
+
case 'left-center':
|
|
128
|
+
return __assign(__assign({}, base), { top: '50%', left: offset, transform: 'translateY(-50%)' });
|
|
129
|
+
case 'left-top':
|
|
130
|
+
return __assign(__assign({}, base), { top: offset, left: offset });
|
|
131
|
+
case 'center':
|
|
132
|
+
return __assign(__assign({}, base), { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' });
|
|
133
|
+
default:
|
|
134
|
+
return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
var getAnchorBasedStyle = function (position, rect) {
|
|
138
|
+
var base = {
|
|
139
|
+
position: 'fixed',
|
|
140
|
+
zIndex: 9999
|
|
141
|
+
};
|
|
142
|
+
var offset = 24;
|
|
143
|
+
switch (position) {
|
|
144
|
+
case 'top-left':
|
|
145
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left });
|
|
146
|
+
case 'top-center':
|
|
147
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
|
|
148
|
+
case 'top-right':
|
|
149
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, right: window.innerWidth - rect.right });
|
|
150
|
+
case 'right-top':
|
|
151
|
+
return __assign(__assign({}, base), { top: rect.top, left: rect.right + offset });
|
|
152
|
+
case 'right-center':
|
|
153
|
+
return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.right + offset, transform: 'translateY(-50%)' });
|
|
154
|
+
case 'right-bottom':
|
|
155
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, left: rect.right + offset });
|
|
156
|
+
case 'bottom-right':
|
|
157
|
+
return __assign(__assign({}, base), { top: rect.bottom + offset, right: window.innerWidth - rect.right });
|
|
158
|
+
case 'bottom-center':
|
|
159
|
+
return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
|
|
160
|
+
case 'bottom-left':
|
|
161
|
+
return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left });
|
|
162
|
+
case 'left-bottom':
|
|
163
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, right: window.innerWidth - rect.left + offset });
|
|
164
|
+
case 'left-center':
|
|
165
|
+
return __assign(__assign({}, base), { top: rect.top + rect.height / 2, right: window.innerWidth - rect.left + offset, transform: 'translateY(-50%)' });
|
|
166
|
+
case 'left-top':
|
|
167
|
+
return __assign(__assign({}, base), { top: rect.top, right: window.innerWidth - rect.left + offset });
|
|
168
|
+
case 'center':
|
|
169
|
+
return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.left + rect.width / 2, transform: 'translate(-50%, -50%)' });
|
|
170
|
+
default:
|
|
171
|
+
return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
var getMaxWidthStyles = function () {
|
|
175
|
+
// anchor가 있는 경우
|
|
176
|
+
if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
|
|
177
|
+
var rect = anchorRef.current.getBoundingClientRect();
|
|
178
|
+
if (position.includes('top-') || position.includes('bottom-') || position === 'center') {
|
|
179
|
+
return {
|
|
180
|
+
maxWidth: "".concat(rect.width - 48, "px"),
|
|
181
|
+
width: 'max-content'
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
// anchor가 없으면 기본값
|
|
186
|
+
return {
|
|
187
|
+
maxWidth: '640px',
|
|
188
|
+
width: 'max-content'
|
|
189
|
+
};
|
|
190
|
+
};
|
|
191
|
+
var snackbarContent = ((0, jsx_runtime_1.jsx)(S_Container, __assign({ style: __assign(__assign({}, containerStyle), getMaxWidthStyles()) }, { children: (0, jsx_runtime_1.jsx)(S_SnackbarWrapper, __assign({ position: position, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ shapeType: "round", radius: 8, paddingTop: "none", paddingRight: "none", paddingBottom: "none", paddingLeft: "spacing_d", width: "100%", height: "auto", overrideBackgroundColorKey: "ui_cpnt_snackbar_base", overrideCSS: {
|
|
192
|
+
display: 'flex',
|
|
193
|
+
alignItems: 'center',
|
|
194
|
+
justifyContent: 'space-between'
|
|
195
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", colorOverride: "ui_cpnt_snackbar_text", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 2 }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" })] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_Buttons, { children: [onActionBtnClick && actionBtnText && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: actionBtnText, colorTheme: "grey3", size: "xsmall", onClick: onActionBtnClick })), closeBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", iconColorKey: "ui_cpnt_snackbar_text", iconSize: 16, baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleClose })), closeBtnMode === 'none' && actionBtnText && ((0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }))] })] })) })) })));
|
|
196
|
+
return (0, react_dom_1.createPortal)(snackbarContent, document.body);
|
|
197
|
+
};
|
|
198
|
+
var S_Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none;\n width: max-content;\n & > * {\n pointer-events: auto;\n }\n"], ["\n pointer-events: none;\n width: max-content;\n & > * {\n pointer-events: auto;\n }\n"])));
|
|
199
|
+
var getInitialTransform = function (position) {
|
|
200
|
+
if (position.startsWith('top-'))
|
|
201
|
+
return 'translateY(-10px)';
|
|
202
|
+
if (position.startsWith('bottom-'))
|
|
203
|
+
return 'translateY(10px)';
|
|
204
|
+
if (position.startsWith('left-'))
|
|
205
|
+
return 'translateX(-10px)';
|
|
206
|
+
if (position.startsWith('right-'))
|
|
207
|
+
return 'translateX(10px)';
|
|
208
|
+
if (position === 'center')
|
|
209
|
+
return 'scale(0.95)';
|
|
210
|
+
return 'translateY(0)';
|
|
211
|
+
};
|
|
212
|
+
var S_SnackbarWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n opacity: ", ";\n transform: ", ";\n transition: opacity 0.3s ease, transform 0.3s ease;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n opacity: ", ";\n transform: ", ";\n transition: opacity 0.3s ease, transform 0.3s ease;\n width: 100%;\n"])), function (_a) {
|
|
213
|
+
var isVisible = _a.isVisible;
|
|
214
|
+
return (isVisible ? 1 : 0);
|
|
215
|
+
}, function (_a) {
|
|
216
|
+
var isVisible = _a.isVisible, position = _a.position;
|
|
217
|
+
return isVisible ? 'translate(0, 0) scale(1)' : getInitialTransform(position);
|
|
218
|
+
});
|
|
219
|
+
var S_Buttons = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
|
220
|
+
exports.default = Snackbar;
|
|
221
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Snackbar } from './Snackbar';
|
|
@@ -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.Snackbar = void 0;
|
|
7
|
+
var Snackbar_1 = require("./Snackbar");
|
|
8
|
+
Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return __importDefault(Snackbar_1).default; } });
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { BaseSnackbarProps } from './Snackbar';
|
|
3
|
+
interface SnackbarContextType {
|
|
4
|
+
showSnackbar: (props: BaseSnackbarProps) => void;
|
|
5
|
+
hideSnackbar: (id: string) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const SnackbarProvider: ({ children }: {
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
}) => JSX.Element;
|
|
10
|
+
export declare const useSnackbar: () => SnackbarContextType;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.useSnackbar = exports.SnackbarProvider = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var react_1 = require("react");
|
|
20
|
+
var Snackbar_1 = __importDefault(require("./Snackbar"));
|
|
21
|
+
var SnackbarContext = (0, react_1.createContext)(null);
|
|
22
|
+
var SnackbarProvider = function (_a) {
|
|
23
|
+
var children = _a.children;
|
|
24
|
+
var _b = (0, react_1.useState)(null), snackbar = _b[0], setSnackbar = _b[1];
|
|
25
|
+
var value = (0, react_1.useMemo)(function () { return ({
|
|
26
|
+
showSnackbar: function (props) {
|
|
27
|
+
var id = crypto.randomUUID();
|
|
28
|
+
setSnackbar(__assign(__assign({}, props), { id: id }));
|
|
29
|
+
},
|
|
30
|
+
hideSnackbar: function () {
|
|
31
|
+
setSnackbar(null);
|
|
32
|
+
}
|
|
33
|
+
}); }, []);
|
|
34
|
+
return ((0, jsx_runtime_1.jsxs)(SnackbarContext.Provider, __assign({ value: value }, { children: [children, snackbar && ((0, jsx_runtime_1.jsx)(Snackbar_1.default, __assign({}, snackbar, { onClose: function () { return value.hideSnackbar(); } }), snackbar.id))] })));
|
|
35
|
+
};
|
|
36
|
+
exports.SnackbarProvider = SnackbarProvider;
|
|
37
|
+
var useSnackbar = function () {
|
|
38
|
+
var context = (0, react_1.useContext)(SnackbarContext);
|
|
39
|
+
if (!context)
|
|
40
|
+
throw new Error('useSnackbar must be used within a SnackbarProvider');
|
|
41
|
+
return context;
|
|
42
|
+
};
|
|
43
|
+
exports.useSnackbar = useSnackbar;
|
|
@@ -37,6 +37,7 @@ import { ReactionButton } from './ReactionButton';
|
|
|
37
37
|
import { SegmentedButtonGroup } from './SegmentedButtonGroup';
|
|
38
38
|
import { Select } from './Select';
|
|
39
39
|
import { Slider } from './Slider';
|
|
40
|
+
import { Snackbar } from './Snackbar';
|
|
40
41
|
import { StatusBlock } from './StatusBlock';
|
|
41
42
|
import { TextButton } from './TextButton';
|
|
42
43
|
import { TextField } from './TextField';
|
|
@@ -47,4 +48,4 @@ import { UploadTextButton } from './UploadTextButton';
|
|
|
47
48
|
import { UserDesktopNavBar } from './UserDesktopNavBar';
|
|
48
49
|
import { UserDesktopSideTab } from './UserDesktopSideTab';
|
|
49
50
|
import { UserDesktopTabBar } from './UserDesktopTabBar';
|
|
50
|
-
export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
|
|
51
|
+
export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, Snackbar, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
|
|
4
|
+
exports.UserDesktopSideTab = void 0;
|
|
4
5
|
var AdminList_1 = require("./AdminList");
|
|
5
6
|
Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
|
|
6
7
|
var AdminListHeader_1 = require("./AdminListHeader");
|
|
@@ -80,6 +81,8 @@ var Select_1 = require("./Select");
|
|
|
80
81
|
Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
|
|
81
82
|
var Slider_1 = require("./Slider");
|
|
82
83
|
Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
|
|
84
|
+
var Snackbar_1 = require("./Snackbar");
|
|
85
|
+
Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return Snackbar_1.Snackbar; } });
|
|
83
86
|
var StatusBlock_1 = require("./StatusBlock");
|
|
84
87
|
Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
|
|
85
88
|
var TextButton_1 = require("./TextButton");
|
|
@@ -8,5 +8,5 @@ export { ContainersBox as WSContainersBox } from './layout/LayoutWS/ContainersBo
|
|
|
8
8
|
export { LayoutWT } from './layout/LayoutWT';
|
|
9
9
|
export { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
|
|
10
10
|
export { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
|
|
11
|
-
export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, BoxItem as D_BoxItem, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
|
|
11
|
+
export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, BoxItem as D_BoxItem, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, Snackbar as D_Snackbar, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
|
|
12
12
|
export { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopBasicModalWithTab as D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTutorialModal as D_DesktopTutorialModal, DesktopTutorialModalInfoType, SectionSheet as D_SectionSheet } from './panels';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BoxItem = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
|
|
4
|
-
exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = void 0;
|
|
4
|
+
exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Snackbar = void 0;
|
|
5
5
|
// layoutWF
|
|
6
6
|
var LayoutWF_1 = require("./layout/LayoutWF");
|
|
7
7
|
Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
|
|
@@ -68,6 +68,7 @@ Object.defineProperty(exports, "D_ReactionButton", { enumerable: true, get: func
|
|
|
68
68
|
Object.defineProperty(exports, "D_SegmentedButtonGroup", { enumerable: true, get: function () { return components_1.SegmentedButtonGroup; } });
|
|
69
69
|
Object.defineProperty(exports, "D_Select", { enumerable: true, get: function () { return components_1.Select; } });
|
|
70
70
|
Object.defineProperty(exports, "D_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
|
|
71
|
+
Object.defineProperty(exports, "D_Snackbar", { enumerable: true, get: function () { return components_1.Snackbar; } });
|
|
71
72
|
Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
|
|
72
73
|
Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
|
|
73
74
|
Object.defineProperty(exports, "D_TextField", { enumerable: true, get: function () { return components_1.TextField; } });
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type SnackbarPosition = 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-center' | 'right-bottom' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'center';
|
|
3
|
+
export interface BaseSnackbarProps {
|
|
4
|
+
text: string;
|
|
5
|
+
actionBtnText?: string;
|
|
6
|
+
position?: SnackbarPosition;
|
|
7
|
+
closeBtnMode?: 'none' | 'use';
|
|
8
|
+
duration?: number;
|
|
9
|
+
anchorRef?: React.RefObject<HTMLElement>;
|
|
10
|
+
onActionBtnClick?: () => void;
|
|
11
|
+
}
|
|
12
|
+
export interface SnackbarProps extends BaseSnackbarProps {
|
|
13
|
+
id?: string | number;
|
|
14
|
+
onClose?: () => void;
|
|
15
|
+
}
|
|
16
|
+
declare const Snackbar: React.FC<SnackbarProps>;
|
|
17
|
+
export default Snackbar;
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
+
};
|
|
20
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
+
var react_1 = require("react");
|
|
23
|
+
var react_dom_1 = require("react-dom");
|
|
24
|
+
var panels_1 = require("../../../desktop/panels");
|
|
25
|
+
var components_1 = require("../../../hybrid/components");
|
|
26
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
27
|
+
var IconButton_1 = require("../IconButton");
|
|
28
|
+
var TextButton_1 = require("../TextButton");
|
|
29
|
+
var TextLabel_1 = require("../TextLabel");
|
|
30
|
+
var Snackbar = function (_a) {
|
|
31
|
+
var id = _a.id, text = _a.text, _b = _a.actionBtnText, actionBtnText = _b === void 0 ? '' : _b, _c = _a.position, position = _c === void 0 ? 'bottom-center' : _c, _d = _a.closeBtnMode, closeBtnMode = _d === void 0 ? 'none' : _d, _e = _a.duration, duration = _e === void 0 ? 2000 : _e, anchorRef = _a.anchorRef, onActionBtnClick = _a.onActionBtnClick, onClose = _a.onClose;
|
|
32
|
+
var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
|
|
33
|
+
var _g = (0, react_1.useState)({}), containerStyle = _g[0], setContainerStyle = _g[1];
|
|
34
|
+
var timerRef = (0, react_1.useRef)();
|
|
35
|
+
/*
|
|
36
|
+
* 마운트 시 애니메이션
|
|
37
|
+
*/
|
|
38
|
+
(0, react_1.useEffect)(function () {
|
|
39
|
+
var showTimer = setTimeout(function () {
|
|
40
|
+
setIsVisible(true);
|
|
41
|
+
}, 10);
|
|
42
|
+
return function () { return clearTimeout(showTimer); };
|
|
43
|
+
}, [id]);
|
|
44
|
+
/*
|
|
45
|
+
* duration 타이머
|
|
46
|
+
*/
|
|
47
|
+
(0, react_1.useEffect)(function () {
|
|
48
|
+
if (duration > 0) {
|
|
49
|
+
timerRef.current = setTimeout(function () {
|
|
50
|
+
handleClose();
|
|
51
|
+
}, duration);
|
|
52
|
+
}
|
|
53
|
+
return function () {
|
|
54
|
+
if (timerRef.current) {
|
|
55
|
+
clearTimeout(timerRef.current);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}, [id, duration]);
|
|
59
|
+
/*
|
|
60
|
+
* 스크롤, 리사이즈시 포지션 업데이트
|
|
61
|
+
*/
|
|
62
|
+
(0, react_1.useEffect)(function () {
|
|
63
|
+
var updatePosition = function () {
|
|
64
|
+
if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
|
|
65
|
+
var rect = anchorRef.current.getBoundingClientRect();
|
|
66
|
+
var style = getAnchorBasedStyle(position, rect);
|
|
67
|
+
setContainerStyle(style);
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
var style = getViewportBasedStyle(position);
|
|
71
|
+
setContainerStyle(style);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
// 초기 렌더링 시 약간의 딜레이를 주어 DOM이 완전히 준비되도록 함
|
|
75
|
+
var initialTimer = setTimeout(updatePosition, 0);
|
|
76
|
+
if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
|
|
77
|
+
window.addEventListener('resize', updatePosition);
|
|
78
|
+
// ResizeObserver로 anchorRef 요소의 크기 변화 감지
|
|
79
|
+
var resizeObserver_1 = new ResizeObserver(updatePosition);
|
|
80
|
+
resizeObserver_1.observe(anchorRef.current);
|
|
81
|
+
return function () {
|
|
82
|
+
clearTimeout(initialTimer);
|
|
83
|
+
window.removeEventListener('resize', updatePosition);
|
|
84
|
+
resizeObserver_1.disconnect();
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
updatePosition();
|
|
88
|
+
return function () {
|
|
89
|
+
clearTimeout(initialTimer);
|
|
90
|
+
};
|
|
91
|
+
}, [position, anchorRef]);
|
|
92
|
+
var handleClose = function () {
|
|
93
|
+
setIsVisible(false);
|
|
94
|
+
if (onClose) {
|
|
95
|
+
setTimeout(function () {
|
|
96
|
+
onClose();
|
|
97
|
+
}, 300);
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
var getViewportBasedStyle = function (position) {
|
|
101
|
+
var base = {
|
|
102
|
+
position: 'fixed',
|
|
103
|
+
zIndex: 9999
|
|
104
|
+
};
|
|
105
|
+
var offset = 24;
|
|
106
|
+
switch (position) {
|
|
107
|
+
case 'top-left':
|
|
108
|
+
return __assign(__assign({}, base), { top: offset, left: offset });
|
|
109
|
+
case 'top-center':
|
|
110
|
+
return __assign(__assign({}, base), { top: offset, left: '50%', transform: 'translateX(-50%)' });
|
|
111
|
+
case 'top-right':
|
|
112
|
+
return __assign(__assign({}, base), { top: offset, right: offset });
|
|
113
|
+
case 'right-top':
|
|
114
|
+
return __assign(__assign({}, base), { top: offset, right: offset });
|
|
115
|
+
case 'right-center':
|
|
116
|
+
return __assign(__assign({}, base), { top: '50%', right: offset, transform: 'translateY(-50%)' });
|
|
117
|
+
case 'right-bottom':
|
|
118
|
+
return __assign(__assign({}, base), { bottom: offset, right: offset });
|
|
119
|
+
case 'bottom-right':
|
|
120
|
+
return __assign(__assign({}, base), { bottom: offset, right: offset });
|
|
121
|
+
case 'bottom-center':
|
|
122
|
+
return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
|
|
123
|
+
case 'bottom-left':
|
|
124
|
+
return __assign(__assign({}, base), { bottom: offset, left: offset });
|
|
125
|
+
case 'left-bottom':
|
|
126
|
+
return __assign(__assign({}, base), { bottom: offset, left: offset });
|
|
127
|
+
case 'left-center':
|
|
128
|
+
return __assign(__assign({}, base), { top: '50%', left: offset, transform: 'translateY(-50%)' });
|
|
129
|
+
case 'left-top':
|
|
130
|
+
return __assign(__assign({}, base), { top: offset, left: offset });
|
|
131
|
+
case 'center':
|
|
132
|
+
return __assign(__assign({}, base), { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' });
|
|
133
|
+
default:
|
|
134
|
+
return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
var getAnchorBasedStyle = function (position, rect) {
|
|
138
|
+
var base = {
|
|
139
|
+
position: 'fixed',
|
|
140
|
+
zIndex: 9999
|
|
141
|
+
};
|
|
142
|
+
var offset = 24;
|
|
143
|
+
switch (position) {
|
|
144
|
+
case 'top-left':
|
|
145
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left });
|
|
146
|
+
case 'top-center':
|
|
147
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
|
|
148
|
+
case 'top-right':
|
|
149
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, right: window.innerWidth - rect.right });
|
|
150
|
+
case 'right-top':
|
|
151
|
+
return __assign(__assign({}, base), { top: rect.top, left: rect.right + offset });
|
|
152
|
+
case 'right-center':
|
|
153
|
+
return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.right + offset, transform: 'translateY(-50%)' });
|
|
154
|
+
case 'right-bottom':
|
|
155
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, left: rect.right + offset });
|
|
156
|
+
case 'bottom-right':
|
|
157
|
+
return __assign(__assign({}, base), { top: rect.bottom + offset, right: window.innerWidth - rect.right });
|
|
158
|
+
case 'bottom-center':
|
|
159
|
+
return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
|
|
160
|
+
case 'bottom-left':
|
|
161
|
+
return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left });
|
|
162
|
+
case 'left-bottom':
|
|
163
|
+
return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, right: window.innerWidth - rect.left + offset });
|
|
164
|
+
case 'left-center':
|
|
165
|
+
return __assign(__assign({}, base), { top: rect.top + rect.height / 2, right: window.innerWidth - rect.left + offset, transform: 'translateY(-50%)' });
|
|
166
|
+
case 'left-top':
|
|
167
|
+
return __assign(__assign({}, base), { top: rect.top, right: window.innerWidth - rect.left + offset });
|
|
168
|
+
case 'center':
|
|
169
|
+
return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.left + rect.width / 2, transform: 'translate(-50%, -50%)' });
|
|
170
|
+
default:
|
|
171
|
+
return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
var getMaxWidthStyles = function () {
|
|
175
|
+
// anchor가 있는 경우
|
|
176
|
+
if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
|
|
177
|
+
var rect = anchorRef.current.getBoundingClientRect();
|
|
178
|
+
if (position.includes('top-') || position.includes('bottom-') || position === 'center') {
|
|
179
|
+
return {
|
|
180
|
+
maxWidth: "".concat(rect.width - 48, "px"),
|
|
181
|
+
width: 'max-content'
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
// anchor가 없으면 기본값
|
|
186
|
+
return {
|
|
187
|
+
maxWidth: '640px',
|
|
188
|
+
width: 'max-content'
|
|
189
|
+
};
|
|
190
|
+
};
|
|
191
|
+
var snackbarContent = ((0, jsx_runtime_1.jsx)(S_Container, __assign({ style: __assign(__assign({}, containerStyle), getMaxWidthStyles()) }, { children: (0, jsx_runtime_1.jsx)(S_SnackbarWrapper, __assign({ position: position, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ shapeType: "round", radius: 8, paddingTop: "none", paddingRight: "none", paddingBottom: "none", paddingLeft: "spacing_d", width: "100%", height: "auto", overrideBackgroundColorKey: "ui_cpnt_snackbar_base", overrideCSS: {
|
|
192
|
+
display: 'flex',
|
|
193
|
+
alignItems: 'center',
|
|
194
|
+
justifyContent: 'space-between'
|
|
195
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", colorOverride: "ui_cpnt_snackbar_text", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 2 }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" })] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_Buttons, { children: [onActionBtnClick && actionBtnText && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: actionBtnText, colorTheme: "grey3", size: "xsmall", onClick: onActionBtnClick })), closeBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", iconColorKey: "ui_cpnt_snackbar_text", iconSize: 16, baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleClose })), closeBtnMode === 'none' && actionBtnText && ((0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }))] })] })) })) })));
|
|
196
|
+
return (0, react_dom_1.createPortal)(snackbarContent, document.body);
|
|
197
|
+
};
|
|
198
|
+
var S_Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none;\n width: max-content;\n & > * {\n pointer-events: auto;\n }\n"], ["\n pointer-events: none;\n width: max-content;\n & > * {\n pointer-events: auto;\n }\n"])));
|
|
199
|
+
var getInitialTransform = function (position) {
|
|
200
|
+
if (position.startsWith('top-'))
|
|
201
|
+
return 'translateY(-10px)';
|
|
202
|
+
if (position.startsWith('bottom-'))
|
|
203
|
+
return 'translateY(10px)';
|
|
204
|
+
if (position.startsWith('left-'))
|
|
205
|
+
return 'translateX(-10px)';
|
|
206
|
+
if (position.startsWith('right-'))
|
|
207
|
+
return 'translateX(10px)';
|
|
208
|
+
if (position === 'center')
|
|
209
|
+
return 'scale(0.95)';
|
|
210
|
+
return 'translateY(0)';
|
|
211
|
+
};
|
|
212
|
+
var S_SnackbarWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n opacity: ", ";\n transform: ", ";\n transition: opacity 0.3s ease, transform 0.3s ease;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n opacity: ", ";\n transform: ", ";\n transition: opacity 0.3s ease, transform 0.3s ease;\n width: 100%;\n"])), function (_a) {
|
|
213
|
+
var isVisible = _a.isVisible;
|
|
214
|
+
return (isVisible ? 1 : 0);
|
|
215
|
+
}, function (_a) {
|
|
216
|
+
var isVisible = _a.isVisible, position = _a.position;
|
|
217
|
+
return isVisible ? 'translate(0, 0) scale(1)' : getInitialTransform(position);
|
|
218
|
+
});
|
|
219
|
+
var S_Buttons = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
|
220
|
+
exports.default = Snackbar;
|
|
221
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Snackbar } from './Snackbar';
|
|
@@ -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.Snackbar = void 0;
|
|
7
|
+
var Snackbar_1 = require("./Snackbar");
|
|
8
|
+
Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return __importDefault(Snackbar_1).default; } });
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { BaseSnackbarProps } from './Snackbar';
|
|
3
|
+
interface SnackbarContextType {
|
|
4
|
+
showSnackbar: (props: BaseSnackbarProps) => void;
|
|
5
|
+
hideSnackbar: (id: string) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const SnackbarProvider: ({ children }: {
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
}) => JSX.Element;
|
|
10
|
+
export declare const useSnackbar: () => SnackbarContextType;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.useSnackbar = exports.SnackbarProvider = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var react_1 = require("react");
|
|
20
|
+
var Snackbar_1 = __importDefault(require("./Snackbar"));
|
|
21
|
+
var SnackbarContext = (0, react_1.createContext)(null);
|
|
22
|
+
var SnackbarProvider = function (_a) {
|
|
23
|
+
var children = _a.children;
|
|
24
|
+
var _b = (0, react_1.useState)(null), snackbar = _b[0], setSnackbar = _b[1];
|
|
25
|
+
var value = (0, react_1.useMemo)(function () { return ({
|
|
26
|
+
showSnackbar: function (props) {
|
|
27
|
+
var id = crypto.randomUUID();
|
|
28
|
+
setSnackbar(__assign(__assign({}, props), { id: id }));
|
|
29
|
+
},
|
|
30
|
+
hideSnackbar: function () {
|
|
31
|
+
setSnackbar(null);
|
|
32
|
+
}
|
|
33
|
+
}); }, []);
|
|
34
|
+
return ((0, jsx_runtime_1.jsxs)(SnackbarContext.Provider, __assign({ value: value }, { children: [children, snackbar && ((0, jsx_runtime_1.jsx)(Snackbar_1.default, __assign({}, snackbar, { onClose: function () { return value.hideSnackbar(); } }), snackbar.id))] })));
|
|
35
|
+
};
|
|
36
|
+
exports.SnackbarProvider = SnackbarProvider;
|
|
37
|
+
var useSnackbar = function () {
|
|
38
|
+
var context = (0, react_1.useContext)(SnackbarContext);
|
|
39
|
+
if (!context)
|
|
40
|
+
throw new Error('useSnackbar must be used within a SnackbarProvider');
|
|
41
|
+
return context;
|
|
42
|
+
};
|
|
43
|
+
exports.useSnackbar = useSnackbar;
|
|
@@ -30,6 +30,7 @@ import { ReactionButton } from './ReactionButton';
|
|
|
30
30
|
import { SegmentedButtonGroup } from './SegmentedButtonGroup';
|
|
31
31
|
import { Select } from './Select';
|
|
32
32
|
import { Slider } from './Slider';
|
|
33
|
+
import { Snackbar } from './Snackbar';
|
|
33
34
|
import { StatusBlock } from './StatusBlock';
|
|
34
35
|
import { TextButton } from './TextButton';
|
|
35
36
|
import { TextField } from './TextField';
|
|
@@ -37,4 +38,4 @@ import { TextLabel } from './TextLabel';
|
|
|
37
38
|
import { UploadIconButton } from './UploadIconButton';
|
|
38
39
|
import { UploadMainButton } from './UploadMainButton';
|
|
39
40
|
import { UploadTextButton } from './UploadTextButton';
|
|
40
|
-
export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
|
|
41
|
+
export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, Snackbar, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
|
|
3
|
+
exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
|
|
4
4
|
var BasicButtonGroup_1 = require("./BasicButtonGroup");
|
|
5
5
|
Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
|
|
6
6
|
var BasicChatListItem_1 = require("./BasicChatListItem");
|
|
@@ -65,6 +65,8 @@ var Select_1 = require("./Select");
|
|
|
65
65
|
Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
|
|
66
66
|
var Slider_1 = require("./Slider");
|
|
67
67
|
Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
|
|
68
|
+
var Snackbar_1 = require("./Snackbar");
|
|
69
|
+
Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return Snackbar_1.Snackbar; } });
|
|
68
70
|
var StatusBlock_1 = require("./StatusBlock");
|
|
69
71
|
Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
|
|
70
72
|
var TextButton_1 = require("./TextButton");
|
|
@@ -9,5 +9,5 @@ export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBo
|
|
|
9
9
|
export { LayoutMS } from './layout/LayoutMS';
|
|
10
10
|
export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
|
|
11
11
|
export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
|
|
12
|
-
export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
|
|
12
|
+
export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, Snackbar as M_Snackbar, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
|
|
13
13
|
export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';
|
package/dist/src/mobile/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
4
|
-
exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = void 0;
|
|
3
|
+
exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Snackbar = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
|
|
4
|
+
exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = void 0;
|
|
5
5
|
// layoutMF
|
|
6
6
|
var LayoutMF_1 = require("./layout/LayoutMF");
|
|
7
7
|
Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
|
|
@@ -63,6 +63,7 @@ Object.defineProperty(exports, "M_ReactionButton", { enumerable: true, get: func
|
|
|
63
63
|
Object.defineProperty(exports, "M_SegmentedButtonGroup", { enumerable: true, get: function () { return components_1.SegmentedButtonGroup; } });
|
|
64
64
|
Object.defineProperty(exports, "M_Select", { enumerable: true, get: function () { return components_1.Select; } });
|
|
65
65
|
Object.defineProperty(exports, "M_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
|
|
66
|
+
Object.defineProperty(exports, "M_Snackbar", { enumerable: true, get: function () { return components_1.Snackbar; } });
|
|
66
67
|
Object.defineProperty(exports, "M_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
|
|
67
68
|
Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
|
|
68
69
|
Object.defineProperty(exports, "M_TextField", { enumerable: true, get: function () { return components_1.TextField; } });
|
|
@@ -202,10 +202,15 @@ function AdminList(_a) {
|
|
|
202
202
|
}) }))
|
|
203
203
|
: toolBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolBar, (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), headerRowMode === 'use' && ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, selectAllMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: (0, jsx_runtime_1.jsx)(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), flexibleHideInfoMode: flexibleHideInfoMode, onClickSelectAllCheckbox: handleSelectAllCheckbox }) }) }))), (0, jsx_runtime_1.jsx)(S_ScrollBox, __assign({ scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, { children: react_1.default.Children.count(children) ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, checkboxMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: childrenWithWidthProps }) }))) : ((0, jsx_runtime_1.jsx)(S_EmptyTextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }) })) }))] })));
|
|
204
204
|
}
|
|
205
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
205
206
|
var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &::-webkit-scrollbar {\n all: unset;\n display: block;\n }\n"], ["\n &::-webkit-scrollbar {\n all: unset;\n display: block;\n }\n"])));
|
|
206
|
-
|
|
207
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
208
|
+
var scrollVisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n display: initial;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n"], ["\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n display: initial;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n"])), function (_a) {
|
|
209
|
+
var theme = _a.theme;
|
|
210
|
+
return theme.ui_cpnt_button_line_border_enabled;
|
|
211
|
+
});
|
|
207
212
|
var S_AdminList = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
208
|
-
var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n overflow-y: ", ";\n
|
|
213
|
+
var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n overflow-y: ", ";\n scrollbar-width: ", ";\n"], ["\n flex: 1;\n overflow-y: ", ";\n scrollbar-width: ", ";\n"])), function (_a) {
|
|
209
214
|
var scrollMode = _a.scrollMode;
|
|
210
215
|
switch (scrollMode) {
|
|
211
216
|
case 'infinite':
|
|
@@ -218,15 +223,7 @@ var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateO
|
|
|
218
223
|
}
|
|
219
224
|
}, function (_a) {
|
|
220
225
|
var scrollVisibleType = _a.scrollVisibleType;
|
|
221
|
-
|
|
222
|
-
case 'moving':
|
|
223
|
-
case 'visible': {
|
|
224
|
-
return scrollVisible;
|
|
225
|
-
}
|
|
226
|
-
case 'hidden': {
|
|
227
|
-
return scrollInvisible;
|
|
228
|
-
}
|
|
229
|
-
}
|
|
226
|
+
return scrollVisibleType === 'hidden' ? 'none' : 'thin !important';
|
|
230
227
|
});
|
|
231
228
|
var S_EmptyTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-bottom: 88px;\n padding-top: 88px;\n"], ["\n padding-bottom: 88px;\n padding-top: 88px;\n"])));
|
|
232
229
|
exports.default = AdminList;
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v2.2.
|
|
2
|
+
## [v2.2.193]
|
|
3
3
|
## daily|https://design.storybook.publ.biz/
|
|
4
4
|
|
|
5
5
|
### 업데이트 사항
|
|
6
|
-
* [PDS-
|
|
7
|
-
|
|
6
|
+
* [PDS-1326] Snackbar 컴포넌트 생성 건
|
|
7
|
+
|