pds-dev-kit-web 1.4.23 → 1.4.24
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 +7 -3
- package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts +15 -0
- package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +134 -0
- package/dist/src/desktop/components/BasicChatListItem/index.d.ts +1 -0
- package/dist/src/desktop/components/BasicChatListItem/index.js +8 -0
- package/dist/src/desktop/components/ChatList/Body.d.ts +7 -0
- package/dist/src/desktop/components/ChatList/Body.js +90 -0
- package/dist/src/desktop/components/ChatList/ChatList.d.ts +23 -0
- package/dist/src/desktop/components/ChatList/ChatList.js +93 -0
- package/dist/src/desktop/components/ChatList/ChatTextField.d.ts +7 -0
- package/dist/src/desktop/components/ChatList/ChatTextField.js +41 -0
- package/dist/src/desktop/components/ChatList/Footer.d.ts +7 -0
- package/dist/src/desktop/components/ChatList/Footer.js +27 -0
- package/dist/src/desktop/components/ChatList/Header.d.ts +5 -0
- package/dist/src/desktop/components/ChatList/Header.js +50 -0
- package/dist/src/desktop/components/ChatList/index.d.ts +1 -0
- package/dist/src/desktop/components/ChatList/index.js +8 -0
- package/dist/src/desktop/components/ChatList/useAutoScrollToBottom.d.ts +10 -0
- package/dist/src/desktop/components/ChatList/useAutoScrollToBottom.js +48 -0
- package/dist/src/desktop/components/index.d.ts +3 -1
- package/dist/src/desktop/components/index.js +5 -1
- package/dist/src/desktop/index.d.ts +2 -2
- package/dist/src/desktop/index.js +4 -2
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +3 -1
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTT.d.ts +11 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTT.js +65 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/index.d.ts +1 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/index.js +3 -1
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +12 -4
- package/dist/src/hybrid/components/Spacing/Spacing.js +1 -1
- package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts +15 -0
- package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +134 -0
- package/dist/src/mobile/components/BasicChatListItem/index.d.ts +1 -0
- package/dist/src/mobile/components/BasicChatListItem/index.js +8 -0
- package/dist/src/mobile/components/ChatList/Body.d.ts +7 -0
- package/dist/src/mobile/components/ChatList/Body.js +93 -0
- package/dist/src/mobile/components/ChatList/ChatList.d.ts +23 -0
- package/dist/src/mobile/components/ChatList/ChatList.js +93 -0
- package/dist/src/mobile/components/ChatList/ChatTextField.d.ts +7 -0
- package/dist/src/mobile/components/ChatList/ChatTextField.js +41 -0
- package/dist/src/mobile/components/ChatList/Footer.d.ts +7 -0
- package/dist/src/mobile/components/ChatList/Footer.js +27 -0
- package/dist/src/mobile/components/ChatList/Header.d.ts +5 -0
- package/dist/src/mobile/components/ChatList/Header.js +50 -0
- package/dist/src/mobile/components/ChatList/index.d.ts +1 -0
- package/dist/src/mobile/components/ChatList/index.js +8 -0
- package/dist/src/mobile/components/ChatList/useAutoScrollToBottom.d.ts +10 -0
- package/dist/src/mobile/components/ChatList/useAutoScrollToBottom.js +48 -0
- package/dist/src/mobile/components/ChatList/useTimeout.d.ts +6 -0
- package/dist/src/mobile/components/ChatList/useTimeout.js +11 -0
- package/dist/src/mobile/components/index.d.ts +3 -1
- package/dist/src/mobile/components/index.js +5 -1
- package/dist/src/mobile/index.d.ts +2 -2
- package/dist/src/mobile/index.js +3 -1
- package/package.json +1 -1
- package/release-note.md +10 -3
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Props = {
|
|
3
|
+
behavior?: 'auto' | 'smooth';
|
|
4
|
+
heightOfEndOfList?: number;
|
|
5
|
+
};
|
|
6
|
+
declare function useAutoScrollToBottom({ behavior, heightOfEndOfList }?: Props): {
|
|
7
|
+
triggerScrollToBottom: () => void;
|
|
8
|
+
EndOfList: () => JSX.Element;
|
|
9
|
+
};
|
|
10
|
+
export default useAutoScrollToBottom;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
var react_1 = __importStar(require("react"));
|
|
23
|
+
function useAutoScrollToBottom(_a) {
|
|
24
|
+
var _b = _a === void 0 ? {} : _a, _c = _b.behavior, behavior = _c === void 0 ? 'auto' : _c, _d = _b.heightOfEndOfList, heightOfEndOfList = _d === void 0 ? 10 : _d;
|
|
25
|
+
var scrollRef = (0, react_1.useRef)(null);
|
|
26
|
+
var _e = (0, react_1.useState)(false), scrollTrigger = _e[0], setScrollTrigger = _e[1];
|
|
27
|
+
/**
|
|
28
|
+
* @when scrollTrigger가 변할 때마다(false -> true, vice versa)
|
|
29
|
+
* @expected EndOfList가 화면에 보이도록 스크롤 한다.
|
|
30
|
+
* @clear -
|
|
31
|
+
*/
|
|
32
|
+
(0, react_1.useEffect)(function () {
|
|
33
|
+
if (scrollRef.current) {
|
|
34
|
+
scrollRef.current.scrollIntoView({ behavior: behavior });
|
|
35
|
+
}
|
|
36
|
+
}, [scrollTrigger]);
|
|
37
|
+
function triggerScrollToBottom() {
|
|
38
|
+
setScrollTrigger(function (prev) { return !prev; });
|
|
39
|
+
}
|
|
40
|
+
function EndOfList() {
|
|
41
|
+
return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
|
|
42
|
+
}
|
|
43
|
+
return {
|
|
44
|
+
triggerScrollToBottom: triggerScrollToBottom,
|
|
45
|
+
EndOfList: EndOfList
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
exports.default = useAutoScrollToBottom;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { AdminList } from './AdminList';
|
|
2
2
|
import { AdminListHeader } from './AdminListHeader';
|
|
3
3
|
import { AdminListItem } from './AdminListItem';
|
|
4
|
+
import { BasicChatListItem } from './BasicChatListItem';
|
|
4
5
|
import { BasicFormGroup } from './BasicFormGroup';
|
|
5
6
|
import { BasicList } from './BasicList';
|
|
6
7
|
import { BasicListItem } from './BasicListItem';
|
|
@@ -8,6 +9,7 @@ import { BlogTextField } from './BlogTextField';
|
|
|
8
9
|
import { BodyTextGroup } from './BodyTextGroup';
|
|
9
10
|
import { Card } from './Card';
|
|
10
11
|
import { CardList } from './CardList';
|
|
12
|
+
import { ChatList } from './ChatList';
|
|
11
13
|
import { Checkbox } from './Checkbox';
|
|
12
14
|
import { Chip } from './Chip';
|
|
13
15
|
import { ContextMenu } from './ContextMenu';
|
|
@@ -39,4 +41,4 @@ import { UploadTextButton } from './UploadTextButton';
|
|
|
39
41
|
import { UserDesktopNavBar } from './UserDesktopNavBar';
|
|
40
42
|
import { UserDesktopSideTab } from './UserDesktopSideTab';
|
|
41
43
|
import { UserDesktopTabBar } from './UserDesktopTabBar';
|
|
42
|
-
export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
|
|
44
|
+
export { AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = 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.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
|
|
3
|
+
exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = 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.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
|
|
4
4
|
var AdminList_1 = require("./AdminList");
|
|
5
5
|
Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
|
|
6
6
|
var AdminListHeader_1 = require("./AdminListHeader");
|
|
7
7
|
Object.defineProperty(exports, "AdminListHeader", { enumerable: true, get: function () { return AdminListHeader_1.AdminListHeader; } });
|
|
8
8
|
var AdminListItem_1 = require("./AdminListItem");
|
|
9
9
|
Object.defineProperty(exports, "AdminListItem", { enumerable: true, get: function () { return AdminListItem_1.AdminListItem; } });
|
|
10
|
+
var BasicChatListItem_1 = require("./BasicChatListItem");
|
|
11
|
+
Object.defineProperty(exports, "BasicChatListItem", { enumerable: true, get: function () { return BasicChatListItem_1.BasicChatListItem; } });
|
|
10
12
|
var BasicFormGroup_1 = require("./BasicFormGroup");
|
|
11
13
|
Object.defineProperty(exports, "BasicFormGroup", { enumerable: true, get: function () { return BasicFormGroup_1.BasicFormGroup; } });
|
|
12
14
|
var BasicList_1 = require("./BasicList");
|
|
@@ -21,6 +23,8 @@ var Card_1 = require("./Card");
|
|
|
21
23
|
Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
|
|
22
24
|
var CardList_1 = require("./CardList");
|
|
23
25
|
Object.defineProperty(exports, "CardList", { enumerable: true, get: function () { return CardList_1.CardList; } });
|
|
26
|
+
var ChatList_1 = require("./ChatList");
|
|
27
|
+
Object.defineProperty(exports, "ChatList", { enumerable: true, get: function () { return ChatList_1.ChatList; } });
|
|
24
28
|
var Checkbox_1 = require("./Checkbox");
|
|
25
29
|
Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
|
|
26
30
|
var Chip_1 = require("./Chip");
|
|
@@ -9,7 +9,7 @@ import { LayoutWT } from './layout/LayoutWT';
|
|
|
9
9
|
import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
|
|
10
10
|
import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
|
|
11
11
|
export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
|
|
12
|
-
import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, 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, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, 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';
|
|
13
|
-
export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, 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_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
|
|
12
|
+
import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, 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, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, 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';
|
|
13
|
+
export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, 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_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
|
|
14
14
|
import { DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal } from './panels';
|
|
15
15
|
export { D_DesktopBasicModal, D_DesktopHeadlessModal };
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
/* eslint-disable import/order */
|
|
3
3
|
/* eslint-disable import/first */
|
|
4
4
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
5
|
-
exports.
|
|
6
|
-
exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = void 0;
|
|
5
|
+
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_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = 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_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
|
|
6
|
+
exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = void 0;
|
|
7
7
|
// layoutWF
|
|
8
8
|
var LayoutWF_1 = require("./layout/LayoutWF");
|
|
9
9
|
Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
|
|
@@ -28,6 +28,7 @@ var components_1 = require("./components");
|
|
|
28
28
|
Object.defineProperty(exports, "D_AdminList", { enumerable: true, get: function () { return components_1.AdminList; } });
|
|
29
29
|
Object.defineProperty(exports, "D_AdminListHeader", { enumerable: true, get: function () { return components_1.AdminListHeader; } });
|
|
30
30
|
Object.defineProperty(exports, "D_AdminListItem", { enumerable: true, get: function () { return components_1.AdminListItem; } });
|
|
31
|
+
Object.defineProperty(exports, "D_BasicChatListItem", { enumerable: true, get: function () { return components_1.BasicChatListItem; } });
|
|
31
32
|
Object.defineProperty(exports, "D_BasicFormGroup", { enumerable: true, get: function () { return components_1.BasicFormGroup; } });
|
|
32
33
|
Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function () { return components_1.BasicList; } });
|
|
33
34
|
Object.defineProperty(exports, "D_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
|
|
@@ -35,6 +36,7 @@ Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: funct
|
|
|
35
36
|
Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
|
|
36
37
|
Object.defineProperty(exports, "D_Card", { enumerable: true, get: function () { return components_1.Card; } });
|
|
37
38
|
Object.defineProperty(exports, "D_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
|
|
39
|
+
Object.defineProperty(exports, "D_ChatList", { enumerable: true, get: function () { return components_1.ChatList; } });
|
|
38
40
|
Object.defineProperty(exports, "D_Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
|
|
39
41
|
Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () { return components_1.Chip; } });
|
|
40
42
|
Object.defineProperty(exports, "D_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
|
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
|
|
|
2
2
|
export declare type ContentsContainerProps = {
|
|
3
3
|
content1?: JSX.Element;
|
|
4
4
|
content2?: JSX.Element;
|
|
5
|
-
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2';
|
|
5
|
+
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2';
|
|
6
6
|
containerColor?: string;
|
|
7
7
|
areaColor?: string;
|
|
8
8
|
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
@@ -46,7 +46,9 @@ var ContentsContainer = function (_a) {
|
|
|
46
46
|
WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
|
|
47
47
|
WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
|
|
48
48
|
WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
|
|
49
|
-
WTS_2: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref }))
|
|
49
|
+
WTS_2: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
|
|
50
|
+
WTT_1: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
|
|
51
|
+
WTT_2: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref }))
|
|
50
52
|
}[layoutType]));
|
|
51
53
|
};
|
|
52
54
|
exports.default = ContentsContainer;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
|
+
export declare type WTTProps = {
|
|
3
|
+
content1?: JSX.Element;
|
|
4
|
+
content2?: JSX.Element;
|
|
5
|
+
layoutType: 'WTT_1' | 'WTT_2';
|
|
6
|
+
containerColor?: string;
|
|
7
|
+
areaColor?: string;
|
|
8
|
+
container1Ref?: MutableRefObject<HTMLDivElement | null>;
|
|
9
|
+
};
|
|
10
|
+
declare const WTT: ({ content1, content2, containerColor, areaColor, layoutType, container1Ref }: WTTProps) => JSX.Element;
|
|
11
|
+
export default WTT;
|
|
@@ -0,0 +1,65 @@
|
|
|
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
var react_1 = __importDefault(require("react"));
|
|
30
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
|
+
var hybrid_1 = require("../../../../../../hybrid");
|
|
32
|
+
var WTT = function (_a) {
|
|
33
|
+
var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, container1Ref = _a.container1Ref;
|
|
34
|
+
return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
|
|
35
|
+
react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
|
|
36
|
+
react_1.default.createElement(S_Content1, null, content1)),
|
|
37
|
+
react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
|
|
38
|
+
react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
|
|
39
|
+
react_1.default.createElement(S_Content2, null, content2))));
|
|
40
|
+
};
|
|
41
|
+
var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 1200px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 1200px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
|
|
42
|
+
var theme = _a.theme;
|
|
43
|
+
return theme.ui_contentscontainer01_background;
|
|
44
|
+
}, function (_a) {
|
|
45
|
+
var containerColor = _a.containerColor;
|
|
46
|
+
return "background-color: " + containerColor;
|
|
47
|
+
});
|
|
48
|
+
var S_ContentsArea1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n min-width: 1200px;\n width: 100%;\n ", ";\n"], ["\n box-sizing: border-box;\n min-width: 1200px;\n width: 100%;\n ", ";\n"])), function (_a) {
|
|
49
|
+
var areaColor = _a.areaColor;
|
|
50
|
+
return "background-color: " + areaColor;
|
|
51
|
+
});
|
|
52
|
+
var WTT_1ContentsArea2 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-bottom: 88px;\n padding-left: 24px;\n padding-right: 24px;\n padding-top: 24px;\n max-width: 1400px;\n min-width: 1200px;\n"], ["\n padding-bottom: 88px;\n padding-left: 24px;\n padding-right: 24px;\n padding-top: 24px;\n max-width: 1400px;\n min-width: 1200px;\n"])));
|
|
53
|
+
var WTT_2ContentsArea2 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-bottom: 88px;\n padding-top: 24px;\n width: 960px;\n"], ["\n padding-bottom: 88px;\n padding-top: 24px;\n width: 960px;\n"])));
|
|
54
|
+
var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n width: 100%;\n ", ";\n ", ";\n"])), function (_a) {
|
|
55
|
+
var layoutType = _a.layoutType;
|
|
56
|
+
return ({ WTT_1: WTT_1ContentsArea2, WTT_2: WTT_2ContentsArea2 }[layoutType]);
|
|
57
|
+
}, function (_a) {
|
|
58
|
+
var areaColor = _a.areaColor;
|
|
59
|
+
return "background-color: " + areaColor;
|
|
60
|
+
});
|
|
61
|
+
// TODO: 철학에 위배되지만, 히어로 배너를 쓰지 않을 경우를 위해 임시로 제거 상태. 추후 조치 필요
|
|
62
|
+
var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n /* min-height: 480px; */\n"], ["\n /* min-height: 480px; */\n"])));
|
|
63
|
+
var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
64
|
+
exports.default = WTT;
|
|
65
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.WTS = exports.WTQ = exports.WTP = exports.WTO = exports.WTN = exports.WTM = exports.WTL = exports.WTK = exports.WTJ = exports.WTI = exports.WTH = exports.WTG = exports.WTF = exports.WTE = exports.WTD = exports.WTC = exports.WTB = exports.WTA = void 0;
|
|
6
|
+
exports.WTT = exports.WTS = exports.WTQ = exports.WTP = exports.WTO = exports.WTN = exports.WTM = exports.WTL = exports.WTK = exports.WTJ = exports.WTI = exports.WTH = exports.WTG = exports.WTF = exports.WTE = exports.WTD = exports.WTC = exports.WTB = exports.WTA = void 0;
|
|
7
7
|
var WTA_1 = require("./WTA");
|
|
8
8
|
Object.defineProperty(exports, "WTA", { enumerable: true, get: function () { return __importDefault(WTA_1).default; } });
|
|
9
9
|
var WTB_1 = require("./WTB");
|
|
@@ -40,3 +40,5 @@ var WTQ_1 = require("./WTQ");
|
|
|
40
40
|
Object.defineProperty(exports, "WTQ", { enumerable: true, get: function () { return __importDefault(WTQ_1).default; } });
|
|
41
41
|
var WTS_1 = require("./WTS");
|
|
42
42
|
Object.defineProperty(exports, "WTS", { enumerable: true, get: function () { return __importDefault(WTS_1).default; } });
|
|
43
|
+
var WTT_1 = require("./WTT");
|
|
44
|
+
Object.defineProperty(exports, "WTT", { enumerable: true, get: function () { return __importDefault(WTT_1).default; } });
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { MutableRefObject } from 'react';
|
|
2
2
|
export declare type ContainersBoxProps = {
|
|
3
|
-
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2';
|
|
3
|
+
layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2';
|
|
4
4
|
pageMenuContent?: JSX.Element;
|
|
5
5
|
tabMenuContent?: JSX.Element;
|
|
6
6
|
subMenuContent?: JSX.Element;
|
|
@@ -71,7 +71,9 @@ var ContainersBox = function (_a) {
|
|
|
71
71
|
WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
72
72
|
WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
73
73
|
WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
74
|
-
WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
|
|
74
|
+
WTS_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
75
|
+
WTT_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
76
|
+
WTT_2: react_1.default.createElement(react_1.default.Fragment, null)
|
|
75
77
|
}[layoutType],
|
|
76
78
|
react_1.default.createElement(S_RightBox, null,
|
|
77
79
|
{
|
|
@@ -113,7 +115,9 @@ var ContainersBox = function (_a) {
|
|
|
113
115
|
WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
114
116
|
WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
115
117
|
WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
116
|
-
WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
|
|
118
|
+
WTS_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
119
|
+
WTT_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
|
|
120
|
+
WTT_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor }))
|
|
117
121
|
}[layoutType],
|
|
118
122
|
{
|
|
119
123
|
WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
@@ -154,7 +158,9 @@ var ContainersBox = function (_a) {
|
|
|
154
158
|
WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
155
159
|
WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
156
160
|
WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
157
|
-
WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
|
|
161
|
+
WTS_2: react_1.default.createElement(react_1.default.Fragment, null),
|
|
162
|
+
WTT_1: react_1.default.createElement(react_1.default.Fragment, null),
|
|
163
|
+
WTT_2: react_1.default.createElement(react_1.default.Fragment, null)
|
|
158
164
|
}[layoutType],
|
|
159
165
|
react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
|
|
160
166
|
{
|
|
@@ -196,7 +202,9 @@ var ContainersBox = function (_a) {
|
|
|
196
202
|
WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor })),
|
|
197
203
|
WTQ_1: '',
|
|
198
204
|
WTS_1: '',
|
|
199
|
-
WTS_2: ''
|
|
205
|
+
WTS_2: '',
|
|
206
|
+
WTT_1: '',
|
|
207
|
+
WTT_2: ''
|
|
200
208
|
}[layoutType],
|
|
201
209
|
react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })))));
|
|
202
210
|
};
|
|
@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
function Spacing(_a) {
|
|
32
|
-
var
|
|
32
|
+
var size = _a.size, _b = _a.spacingType, spacingType = _b === void 0 ? 'height' : _b;
|
|
33
33
|
return react_1.default.createElement(S_Spacing, { size: size, spacingType: spacingType });
|
|
34
34
|
}
|
|
35
35
|
var spacing_a = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n"], ["\n height: ", ";\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n"])), function (_a) {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PDSTextType, PDSValueOption } from '../../../common';
|
|
3
|
+
declare type Props = {
|
|
4
|
+
titleText?: PDSTextType;
|
|
5
|
+
contentText?: PDSTextType;
|
|
6
|
+
leftImageMode?: 'none' | 'use';
|
|
7
|
+
imageSrc?: string;
|
|
8
|
+
hoverBtnMode?: 'none' | 'use';
|
|
9
|
+
contextMenuOptionArray?: PDSValueOption[];
|
|
10
|
+
contextMenuState?: 'normal' | 'disabled';
|
|
11
|
+
colorTheme?: 'seller' | 'subscriber';
|
|
12
|
+
onClickContextMenu?: (option: PDSValueOption) => void;
|
|
13
|
+
};
|
|
14
|
+
declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverBtnMode, contextMenuOptionArray, onClickContextMenu, contextMenuState, colorTheme }: Props): JSX.Element;
|
|
15
|
+
export default BasicChatListItem;
|
|
@@ -0,0 +1,134 @@
|
|
|
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
var react_1 = __importStar(require("react"));
|
|
30
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
31
|
+
var hybrid_1 = require("../../../hybrid");
|
|
32
|
+
var ContextMenu_1 = require("../ContextMenu");
|
|
33
|
+
var ContextMenuItem_1 = require("../ContextMenuItem");
|
|
34
|
+
var IconButton_1 = require("../IconButton");
|
|
35
|
+
var TextLabel_1 = require("../TextLabel");
|
|
36
|
+
var titleTextColors = {
|
|
37
|
+
seller: 'usrTextBrandPrimary',
|
|
38
|
+
subscriber: 'sysTextSecondary'
|
|
39
|
+
};
|
|
40
|
+
var backgroundColorTheme = {
|
|
41
|
+
seller: 'ui_cpnt_list_base_area_seller',
|
|
42
|
+
subscriber: 'ui_cpnt_list_base_area'
|
|
43
|
+
};
|
|
44
|
+
function BasicChatListItem(_a) {
|
|
45
|
+
var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverBtnMode, hoverBtnMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenu = _a.onClickContextMenu, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
|
|
46
|
+
var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
|
|
47
|
+
var contextMenuRef = (0, react_1.useRef)(null);
|
|
48
|
+
/**
|
|
49
|
+
* @when contextMenu가 열려 있을 때
|
|
50
|
+
* @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
|
|
51
|
+
* @clear document의 클릭 이벤트를 제거합니다.
|
|
52
|
+
*/
|
|
53
|
+
(0, react_1.useEffect)(function () {
|
|
54
|
+
// NOTE pop up 개념이 생기기 전까지의 임시 조치 방법입니다.
|
|
55
|
+
var chatBody = document.querySelector('#chatMessageBox');
|
|
56
|
+
if (chatBody) {
|
|
57
|
+
if (isContextMenuOpen) {
|
|
58
|
+
chatBody.style.overflowY = 'hidden';
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
chatBody.style.overflowY = 'auto';
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
function handleClickOutside(e) {
|
|
65
|
+
if (contextMenuRef.current && !contextMenuRef.current.contains(e.target)) {
|
|
66
|
+
if (isContextMenuOpen) {
|
|
67
|
+
e.stopPropagation();
|
|
68
|
+
setIsContextMenuOpen(false);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
document.addEventListener('click', handleClickOutside);
|
|
73
|
+
return function () {
|
|
74
|
+
document.removeEventListener('click', handleClickOutside);
|
|
75
|
+
};
|
|
76
|
+
}, [isContextMenuOpen]);
|
|
77
|
+
var handleClickMoreButton = function () {
|
|
78
|
+
setIsContextMenuOpen(function (prev) { return !prev; });
|
|
79
|
+
};
|
|
80
|
+
var handleClickContextMenuItem = function (option) {
|
|
81
|
+
if (onClickContextMenu) {
|
|
82
|
+
onClickContextMenu(option);
|
|
83
|
+
}
|
|
84
|
+
setIsContextMenuOpen(false);
|
|
85
|
+
};
|
|
86
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
87
|
+
react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverBtnMode: hoverBtnMode },
|
|
88
|
+
leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
|
|
89
|
+
react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
|
|
90
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
|
|
91
|
+
react_1.default.createElement(S_ContentTextWrapper, null,
|
|
92
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
|
|
93
|
+
react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen },
|
|
94
|
+
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_on_primary", onClick: handleClickMoreButton }),
|
|
95
|
+
isContextMenuOpen && (react_1.default.createElement(S_ContextMenuWrapper, { ref: contextMenuRef },
|
|
96
|
+
react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleClickContextMenuItem, state: contextMenuState })); }))))))));
|
|
97
|
+
}
|
|
98
|
+
var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: ", ";\n margin-left: ", ";\n position: relative;\n"], ["\n display: ", ";\n margin-left: ", ";\n position: relative;\n"])), function (_a) {
|
|
99
|
+
var isContextMenuOpen = _a.isContextMenuOpen;
|
|
100
|
+
return (isContextMenuOpen ? 'block' : 'none');
|
|
101
|
+
}, function (_a) {
|
|
102
|
+
var theme = _a.theme;
|
|
103
|
+
return theme.spacing.spacingA;
|
|
104
|
+
});
|
|
105
|
+
var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n min-height: 24px;\n max-width: 100%;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", ";\n\n :hover {\n ", " {\n display: ", ";\n }\n }\n"], ["\n display: flex;\n height: fit-content;\n min-height: 24px;\n max-width: 100%;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", ";\n\n :hover {\n ", " {\n display: ", ";\n }\n }\n"])), function (_a) {
|
|
106
|
+
var theme = _a.theme;
|
|
107
|
+
return theme.spacing.spacingA;
|
|
108
|
+
}, function (_a) {
|
|
109
|
+
var theme = _a.theme;
|
|
110
|
+
return theme.spacing.spacingE;
|
|
111
|
+
}, function (_a) {
|
|
112
|
+
var theme = _a.theme;
|
|
113
|
+
return theme.spacing.spacingD;
|
|
114
|
+
}, function (_a) {
|
|
115
|
+
var theme = _a.theme;
|
|
116
|
+
return theme.spacing.spacingA;
|
|
117
|
+
}, function (_a) {
|
|
118
|
+
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
119
|
+
return colorTheme && theme[backgroundColorTheme[colorTheme]];
|
|
120
|
+
}, S_SeeMoreButton, function (_a) {
|
|
121
|
+
var hoverBtnMode = _a.hoverBtnMode;
|
|
122
|
+
return hoverBtnMode === 'use' && 'block';
|
|
123
|
+
});
|
|
124
|
+
var S_ImageViewWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"], ["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"])), function (_a) {
|
|
125
|
+
var theme = _a.theme;
|
|
126
|
+
return theme.spacing.spacingB;
|
|
127
|
+
});
|
|
128
|
+
var S_ContentTextWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
|
|
129
|
+
var theme = _a.theme;
|
|
130
|
+
return theme.spacing.spacingC;
|
|
131
|
+
});
|
|
132
|
+
var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n right: -4px;\n z-index: 10;\n"], ["\n position: absolute;\n right: -4px;\n z-index: 10;\n"])));
|
|
133
|
+
exports.default = BasicChatListItem;
|
|
134
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as BasicChatListItem } from './BasicChatListItem';
|
|
@@ -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.BasicChatListItem = void 0;
|
|
7
|
+
var BasicChatListItem_1 = require("./BasicChatListItem");
|
|
8
|
+
Object.defineProperty(exports, "BasicChatListItem", { enumerable: true, get: function () { return __importDefault(BasicChatListItem_1).default; } });
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { Props as ChatListProps } from './ChatList';
|
|
3
|
+
declare type Props = Pick<ChatListProps, 'scrollVisibleType' | 'children' | 'bodyBtnText'> & {
|
|
4
|
+
isSubmitted: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare function Body({ scrollVisibleType, children, isSubmitted, bodyBtnText }: Props): JSX.Element;
|
|
7
|
+
export default Body;
|