pds-dev-kit-web 2.2.8 → 2.2.9-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts +1 -2
- package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +1 -1
- package/dist/src/desktop/components/BasicChatListItem/Popup.d.ts +2 -2
- package/dist/src/desktop/components/BasicChatListItem/Popup.js +19 -19
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +1 -2
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +1 -1
- package/dist/src/desktop/components/ChatBubbleListItem/Popup.d.ts +2 -2
- package/dist/src/desktop/components/ChatBubbleListItem/Popup.js +19 -19
- package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts +1 -2
- package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +1 -1
- package/dist/src/mobile/components/BasicChatListItem/Popup.d.ts +2 -2
- package/dist/src/mobile/components/BasicChatListItem/Popup.js +19 -19
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +1 -2
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +1 -1
- package/dist/src/mobile/components/ChatBubbleListItem/Popup.d.ts +2 -2
- package/dist/src/mobile/components/ChatBubbleListItem/Popup.js +19 -19
- package/package.json +1 -1
- package/release-note.md +7 -8
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PlacementTypes } from './Popup';
|
|
3
2
|
import type { PDSTextType, PDSValueOption } from '../../../common';
|
|
4
3
|
type Props = {
|
|
5
4
|
titleText?: PDSTextType;
|
|
@@ -10,7 +9,7 @@ type Props = {
|
|
|
10
9
|
contextMenuOptionArray?: PDSValueOption[];
|
|
11
10
|
contextMenuState?: 'normal' | 'disabled';
|
|
12
11
|
colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
|
|
13
|
-
contextMenuPosition?:
|
|
12
|
+
contextMenuPosition?: 'top_end';
|
|
14
13
|
onClickContextMenuItem?: (option: PDSValueOption) => void;
|
|
15
14
|
};
|
|
16
15
|
declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
|
|
@@ -44,7 +44,7 @@ var backgroundColorTheme = {
|
|
|
44
44
|
white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
|
|
45
45
|
};
|
|
46
46
|
function BasicChatListItem(_a) {
|
|
47
|
-
var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? '
|
|
47
|
+
var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? 'top_end' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
|
|
48
48
|
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
|
|
49
49
|
var contextMenuRef = (0, react_1.useRef)(null);
|
|
50
50
|
var chatBody = document.querySelector('#chatMessageBox');
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
|
-
export type PlacementTypes = '
|
|
2
|
+
export type PlacementTypes = 'v_auto' | 'h_auto' | 'v_center' | 'h_center' | 'top' | 'top_start' | 'top_end' | 'top_both' | 'top_center' | 'bottom' | 'bottom_start' | 'bottom_end' | 'bottom_both' | 'bottom_center' | 'left' | 'left_start' | 'left_end' | 'left_center' | 'right' | 'right_start' | 'right_end' | 'right_center';
|
|
3
3
|
type Props = {
|
|
4
4
|
targetRef: MutableRefObject<HTMLElement | null>;
|
|
5
5
|
isOpen: boolean;
|
|
6
6
|
onClickOutside?: () => void;
|
|
7
7
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
8
|
-
placement:
|
|
8
|
+
placement: PlacementTypes;
|
|
9
9
|
wrapperHeight?: number;
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
};
|
|
@@ -54,13 +54,13 @@ function getHCenterPlacement(_a) {
|
|
|
54
54
|
function getNormalizedPlacement(_a) {
|
|
55
55
|
var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
|
|
56
56
|
switch (placement) {
|
|
57
|
-
case '
|
|
57
|
+
case 'v_auto':
|
|
58
58
|
return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
59
|
-
case '
|
|
59
|
+
case 'h_auto':
|
|
60
60
|
return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
61
|
-
case '
|
|
61
|
+
case 'v_center':
|
|
62
62
|
return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
63
|
-
case '
|
|
63
|
+
case 'h_center':
|
|
64
64
|
return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
65
65
|
default:
|
|
66
66
|
return placement;
|
|
@@ -77,22 +77,22 @@ function updatePosition(_a) {
|
|
|
77
77
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
78
78
|
popupElem.style.width = 'auto';
|
|
79
79
|
break;
|
|
80
|
-
case '
|
|
80
|
+
case 'top_start':
|
|
81
81
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
82
82
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
83
83
|
popupElem.style.width = 'auto';
|
|
84
84
|
break;
|
|
85
|
-
case '
|
|
85
|
+
case 'top_end':
|
|
86
86
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
87
87
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
|
|
88
88
|
popupElem.style.width = 'auto';
|
|
89
89
|
break;
|
|
90
|
-
case '
|
|
90
|
+
case 'top_both':
|
|
91
91
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
92
92
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
93
93
|
popupElem.style.width = "".concat(targetRect.width, "px");
|
|
94
94
|
break;
|
|
95
|
-
case '
|
|
95
|
+
case 'top_center':
|
|
96
96
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
97
97
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
98
98
|
popupElem.style.width = 'auto';
|
|
@@ -102,22 +102,22 @@ function updatePosition(_a) {
|
|
|
102
102
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
103
103
|
popupElem.style.width = 'auto';
|
|
104
104
|
break;
|
|
105
|
-
case '
|
|
105
|
+
case 'bottom_start':
|
|
106
106
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
107
107
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
108
108
|
popupElem.style.width = 'auto';
|
|
109
109
|
break;
|
|
110
|
-
case '
|
|
110
|
+
case 'bottom_end':
|
|
111
111
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
112
112
|
popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
|
|
113
113
|
popupElem.style.width = 'auto';
|
|
114
114
|
break;
|
|
115
|
-
case '
|
|
115
|
+
case 'bottom_both':
|
|
116
116
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
117
117
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
118
118
|
popupElem.style.width = "".concat(targetRect.width, "px");
|
|
119
119
|
break;
|
|
120
|
-
case '
|
|
120
|
+
case 'bottom_center':
|
|
121
121
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
122
122
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
123
123
|
popupElem.style.width = 'auto';
|
|
@@ -127,17 +127,17 @@ function updatePosition(_a) {
|
|
|
127
127
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
128
128
|
popupElem.style.width = 'auto';
|
|
129
129
|
break;
|
|
130
|
-
case '
|
|
130
|
+
case 'left_start':
|
|
131
131
|
popupElem.style.top = "".concat(targetRect.top, "px");
|
|
132
132
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
133
133
|
popupElem.style.width = 'auto';
|
|
134
134
|
break;
|
|
135
|
-
case '
|
|
135
|
+
case 'left_end':
|
|
136
136
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
|
|
137
137
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
138
138
|
popupElem.style.width = 'auto';
|
|
139
139
|
break;
|
|
140
|
-
case '
|
|
140
|
+
case 'left_center':
|
|
141
141
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
|
|
142
142
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
143
143
|
popupElem.style.width = 'auto';
|
|
@@ -147,17 +147,17 @@ function updatePosition(_a) {
|
|
|
147
147
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
148
148
|
popupElem.style.width = 'auto';
|
|
149
149
|
break;
|
|
150
|
-
case '
|
|
150
|
+
case 'right_start':
|
|
151
151
|
popupElem.style.top = "".concat(targetRect.top, "px");
|
|
152
152
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
153
153
|
popupElem.style.width = 'auto';
|
|
154
154
|
break;
|
|
155
|
-
case '
|
|
155
|
+
case 'right_end':
|
|
156
156
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
|
|
157
157
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
158
158
|
popupElem.style.width = 'auto';
|
|
159
159
|
break;
|
|
160
|
-
case '
|
|
160
|
+
case 'right_center':
|
|
161
161
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
|
|
162
162
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
163
163
|
popupElem.style.width = 'auto';
|
|
@@ -168,7 +168,7 @@ function updatePosition(_a) {
|
|
|
168
168
|
return normPlacement;
|
|
169
169
|
}
|
|
170
170
|
function Popup(_a) {
|
|
171
|
-
var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? '
|
|
171
|
+
var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom_start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
|
|
172
172
|
var popupRootRef = (0, react_1.useContext)(PopupContext);
|
|
173
173
|
var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
|
|
174
174
|
var popupRef = (0, react_1.useRef)(null);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PlacementTypes } from './Popup';
|
|
3
2
|
import type { PDSTextType, PDSValueOption } from '../../../common';
|
|
4
3
|
type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
|
|
5
4
|
export type ChatBubbleListItemProps = {
|
|
@@ -12,7 +11,7 @@ export type ChatBubbleListItemProps = {
|
|
|
12
11
|
timeText?: PDSTextType;
|
|
13
12
|
contextMenuOptionArray?: PDSValueOption[];
|
|
14
13
|
contextMenuState?: 'normal' | 'disabled';
|
|
15
|
-
contextMenuPosition?:
|
|
14
|
+
contextMenuPosition?: 'top_end';
|
|
16
15
|
children?: React.ReactNode;
|
|
17
16
|
onClickContextMenuItem?: (option: PDSValueOption) => void;
|
|
18
17
|
};
|
|
@@ -67,7 +67,7 @@ var profileImageBorderColorTheme = {
|
|
|
67
67
|
translucent_black: 'ui_avatar_border_translucent_black'
|
|
68
68
|
};
|
|
69
69
|
function ChatBubbleListItem(_a) {
|
|
70
|
-
var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? '
|
|
70
|
+
var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'top_end' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
|
|
71
71
|
var isMe = styleTheme.includes('me');
|
|
72
72
|
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
|
|
73
73
|
var contextMenuRef = (0, react_1.useRef)(null);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
|
-
export type PlacementTypes = '
|
|
2
|
+
export type PlacementTypes = 'v_auto' | 'h_auto' | 'v_center' | 'h_center' | 'top' | 'top_start' | 'top_end' | 'top_both' | 'top_center' | 'bottom' | 'bottom_start' | 'bottom_end' | 'bottom_both' | 'bottom_center' | 'left' | 'left_start' | 'left_end' | 'left_center' | 'right' | 'right_start' | 'right_end' | 'right_center';
|
|
3
3
|
type Props = {
|
|
4
4
|
targetRef: MutableRefObject<HTMLElement | null>;
|
|
5
5
|
isOpen: boolean;
|
|
6
6
|
onClickOutside?: () => void;
|
|
7
7
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
8
|
-
placement:
|
|
8
|
+
placement: PlacementTypes;
|
|
9
9
|
wrapperHeight?: number;
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
};
|
|
@@ -54,13 +54,13 @@ function getHCenterPlacement(_a) {
|
|
|
54
54
|
function getNormalizedPlacement(_a) {
|
|
55
55
|
var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
|
|
56
56
|
switch (placement) {
|
|
57
|
-
case '
|
|
57
|
+
case 'v_auto':
|
|
58
58
|
return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
59
|
-
case '
|
|
59
|
+
case 'h_auto':
|
|
60
60
|
return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
61
|
-
case '
|
|
61
|
+
case 'v_center':
|
|
62
62
|
return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
63
|
-
case '
|
|
63
|
+
case 'h_center':
|
|
64
64
|
return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
65
65
|
default:
|
|
66
66
|
return placement;
|
|
@@ -77,22 +77,22 @@ function updatePosition(_a) {
|
|
|
77
77
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
78
78
|
popupElem.style.width = 'auto';
|
|
79
79
|
break;
|
|
80
|
-
case '
|
|
80
|
+
case 'top_start':
|
|
81
81
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
82
82
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
83
83
|
popupElem.style.width = 'auto';
|
|
84
84
|
break;
|
|
85
|
-
case '
|
|
85
|
+
case 'top_end':
|
|
86
86
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
87
87
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
|
|
88
88
|
popupElem.style.width = 'auto';
|
|
89
89
|
break;
|
|
90
|
-
case '
|
|
90
|
+
case 'top_both':
|
|
91
91
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
92
92
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
93
93
|
popupElem.style.width = "".concat(targetRect.width, "px");
|
|
94
94
|
break;
|
|
95
|
-
case '
|
|
95
|
+
case 'top_center':
|
|
96
96
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
97
97
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
98
98
|
popupElem.style.width = 'auto';
|
|
@@ -102,22 +102,22 @@ function updatePosition(_a) {
|
|
|
102
102
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
103
103
|
popupElem.style.width = 'auto';
|
|
104
104
|
break;
|
|
105
|
-
case '
|
|
105
|
+
case 'bottom_start':
|
|
106
106
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
107
107
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
108
108
|
popupElem.style.width = 'auto';
|
|
109
109
|
break;
|
|
110
|
-
case '
|
|
110
|
+
case 'bottom_end':
|
|
111
111
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
112
112
|
popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
|
|
113
113
|
popupElem.style.width = 'auto';
|
|
114
114
|
break;
|
|
115
|
-
case '
|
|
115
|
+
case 'bottom_both':
|
|
116
116
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
117
117
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
118
118
|
popupElem.style.width = "".concat(targetRect.width, "px");
|
|
119
119
|
break;
|
|
120
|
-
case '
|
|
120
|
+
case 'bottom_center':
|
|
121
121
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
122
122
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
123
123
|
popupElem.style.width = 'auto';
|
|
@@ -127,17 +127,17 @@ function updatePosition(_a) {
|
|
|
127
127
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
128
128
|
popupElem.style.width = 'auto';
|
|
129
129
|
break;
|
|
130
|
-
case '
|
|
130
|
+
case 'left_start':
|
|
131
131
|
popupElem.style.top = "".concat(targetRect.top, "px");
|
|
132
132
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
133
133
|
popupElem.style.width = 'auto';
|
|
134
134
|
break;
|
|
135
|
-
case '
|
|
135
|
+
case 'left_end':
|
|
136
136
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
|
|
137
137
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
138
138
|
popupElem.style.width = 'auto';
|
|
139
139
|
break;
|
|
140
|
-
case '
|
|
140
|
+
case 'left_center':
|
|
141
141
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
|
|
142
142
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
143
143
|
popupElem.style.width = 'auto';
|
|
@@ -147,17 +147,17 @@ function updatePosition(_a) {
|
|
|
147
147
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
148
148
|
popupElem.style.width = 'auto';
|
|
149
149
|
break;
|
|
150
|
-
case '
|
|
150
|
+
case 'right_start':
|
|
151
151
|
popupElem.style.top = "".concat(targetRect.top, "px");
|
|
152
152
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
153
153
|
popupElem.style.width = 'auto';
|
|
154
154
|
break;
|
|
155
|
-
case '
|
|
155
|
+
case 'right_end':
|
|
156
156
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
|
|
157
157
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
158
158
|
popupElem.style.width = 'auto';
|
|
159
159
|
break;
|
|
160
|
-
case '
|
|
160
|
+
case 'right_center':
|
|
161
161
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
|
|
162
162
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
163
163
|
popupElem.style.width = 'auto';
|
|
@@ -168,7 +168,7 @@ function updatePosition(_a) {
|
|
|
168
168
|
return normPlacement;
|
|
169
169
|
}
|
|
170
170
|
function Popup(_a) {
|
|
171
|
-
var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? '
|
|
171
|
+
var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom_start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
|
|
172
172
|
var popupRootRef = (0, react_1.useContext)(PopupContext);
|
|
173
173
|
var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
|
|
174
174
|
var popupRef = (0, react_1.useRef)(null);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PlacementTypes } from './Popup';
|
|
3
2
|
import type { PDSTextType, PDSValueOption } from '../../../common';
|
|
4
3
|
type Props = {
|
|
5
4
|
titleText?: PDSTextType;
|
|
@@ -10,7 +9,7 @@ type Props = {
|
|
|
10
9
|
contextMenuOptionArray?: PDSValueOption[];
|
|
11
10
|
contextMenuState?: 'normal' | 'disabled';
|
|
12
11
|
colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
|
|
13
|
-
contextMenuPosition?:
|
|
12
|
+
contextMenuPosition?: 'top_end';
|
|
14
13
|
onClickContextMenuItem?: (option: PDSValueOption) => void;
|
|
15
14
|
};
|
|
16
15
|
declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
|
|
@@ -44,7 +44,7 @@ var backgroundColorTheme = {
|
|
|
44
44
|
white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
|
|
45
45
|
};
|
|
46
46
|
function BasicChatListItem(_a) {
|
|
47
|
-
var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? '
|
|
47
|
+
var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? 'top_end' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
|
|
48
48
|
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
|
|
49
49
|
var contextMenuRef = (0, react_1.useRef)(null);
|
|
50
50
|
var chatBody = document.querySelector('#chatMessageBox');
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
|
-
export type PlacementTypes = '
|
|
2
|
+
export type PlacementTypes = 'v_auto' | 'h_auto' | 'v_center' | 'h_center' | 'top' | 'top_start' | 'top_end' | 'top_both' | 'top_center' | 'bottom' | 'bottom_start' | 'bottom_end' | 'bottom_both' | 'bottom_center' | 'left' | 'left_start' | 'left_end' | 'left_center' | 'right' | 'right_start' | 'right_end' | 'right_center';
|
|
3
3
|
type Props = {
|
|
4
4
|
targetRef: MutableRefObject<HTMLElement | null>;
|
|
5
5
|
isOpen: boolean;
|
|
6
6
|
onClickOutside?: () => void;
|
|
7
7
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
8
|
-
placement:
|
|
8
|
+
placement: PlacementTypes;
|
|
9
9
|
wrapperHeight?: number;
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
};
|
|
@@ -54,13 +54,13 @@ function getHCenterPlacement(_a) {
|
|
|
54
54
|
function getNormalizedPlacement(_a) {
|
|
55
55
|
var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
|
|
56
56
|
switch (placement) {
|
|
57
|
-
case '
|
|
57
|
+
case 'v_auto':
|
|
58
58
|
return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
59
|
-
case '
|
|
59
|
+
case 'h_auto':
|
|
60
60
|
return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
61
|
-
case '
|
|
61
|
+
case 'v_center':
|
|
62
62
|
return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
63
|
-
case '
|
|
63
|
+
case 'h_center':
|
|
64
64
|
return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
65
65
|
default:
|
|
66
66
|
return placement;
|
|
@@ -77,22 +77,22 @@ function updatePosition(_a) {
|
|
|
77
77
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
78
78
|
popupElem.style.width = 'auto';
|
|
79
79
|
break;
|
|
80
|
-
case '
|
|
80
|
+
case 'top_start':
|
|
81
81
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
82
82
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
83
83
|
popupElem.style.width = 'auto';
|
|
84
84
|
break;
|
|
85
|
-
case '
|
|
85
|
+
case 'top_end':
|
|
86
86
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
87
87
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
|
|
88
88
|
popupElem.style.width = 'auto';
|
|
89
89
|
break;
|
|
90
|
-
case '
|
|
90
|
+
case 'top_both':
|
|
91
91
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
92
92
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
93
93
|
popupElem.style.width = "".concat(targetRect.width, "px");
|
|
94
94
|
break;
|
|
95
|
-
case '
|
|
95
|
+
case 'top_center':
|
|
96
96
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
97
97
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
98
98
|
popupElem.style.width = 'auto';
|
|
@@ -102,22 +102,22 @@ function updatePosition(_a) {
|
|
|
102
102
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
103
103
|
popupElem.style.width = 'auto';
|
|
104
104
|
break;
|
|
105
|
-
case '
|
|
105
|
+
case 'bottom_start':
|
|
106
106
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
107
107
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
108
108
|
popupElem.style.width = 'auto';
|
|
109
109
|
break;
|
|
110
|
-
case '
|
|
110
|
+
case 'bottom_end':
|
|
111
111
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
112
112
|
popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
|
|
113
113
|
popupElem.style.width = 'auto';
|
|
114
114
|
break;
|
|
115
|
-
case '
|
|
115
|
+
case 'bottom_both':
|
|
116
116
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
117
117
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
118
118
|
popupElem.style.width = "".concat(targetRect.width, "px");
|
|
119
119
|
break;
|
|
120
|
-
case '
|
|
120
|
+
case 'bottom_center':
|
|
121
121
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
122
122
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
123
123
|
popupElem.style.width = 'auto';
|
|
@@ -127,17 +127,17 @@ function updatePosition(_a) {
|
|
|
127
127
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
128
128
|
popupElem.style.width = 'auto';
|
|
129
129
|
break;
|
|
130
|
-
case '
|
|
130
|
+
case 'left_start':
|
|
131
131
|
popupElem.style.top = "".concat(targetRect.top, "px");
|
|
132
132
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
133
133
|
popupElem.style.width = 'auto';
|
|
134
134
|
break;
|
|
135
|
-
case '
|
|
135
|
+
case 'left_end':
|
|
136
136
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
|
|
137
137
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
138
138
|
popupElem.style.width = 'auto';
|
|
139
139
|
break;
|
|
140
|
-
case '
|
|
140
|
+
case 'left_center':
|
|
141
141
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
|
|
142
142
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
143
143
|
popupElem.style.width = 'auto';
|
|
@@ -147,17 +147,17 @@ function updatePosition(_a) {
|
|
|
147
147
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
148
148
|
popupElem.style.width = 'auto';
|
|
149
149
|
break;
|
|
150
|
-
case '
|
|
150
|
+
case 'right_start':
|
|
151
151
|
popupElem.style.top = "".concat(targetRect.top, "px");
|
|
152
152
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
153
153
|
popupElem.style.width = 'auto';
|
|
154
154
|
break;
|
|
155
|
-
case '
|
|
155
|
+
case 'right_end':
|
|
156
156
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
|
|
157
157
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
158
158
|
popupElem.style.width = 'auto';
|
|
159
159
|
break;
|
|
160
|
-
case '
|
|
160
|
+
case 'right_center':
|
|
161
161
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
|
|
162
162
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
163
163
|
popupElem.style.width = 'auto';
|
|
@@ -168,7 +168,7 @@ function updatePosition(_a) {
|
|
|
168
168
|
return normPlacement;
|
|
169
169
|
}
|
|
170
170
|
function Popup(_a) {
|
|
171
|
-
var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? '
|
|
171
|
+
var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom_start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
|
|
172
172
|
var popupRootRef = (0, react_1.useContext)(PopupContext);
|
|
173
173
|
var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
|
|
174
174
|
var popupRef = (0, react_1.useRef)(null);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PlacementTypes } from './Popup';
|
|
3
2
|
import type { PDSTextType, PDSValueOption } from '../../../common';
|
|
4
3
|
type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
|
|
5
4
|
export type ChatBubbleListItemProps = {
|
|
@@ -12,7 +11,7 @@ export type ChatBubbleListItemProps = {
|
|
|
12
11
|
timeText?: PDSTextType;
|
|
13
12
|
contextMenuOptionArray?: PDSValueOption[];
|
|
14
13
|
contextMenuState?: 'normal' | 'disabled';
|
|
15
|
-
contextMenuPosition?:
|
|
14
|
+
contextMenuPosition?: 'top_end';
|
|
16
15
|
children?: React.ReactNode;
|
|
17
16
|
onClickContextMenuItem?: (option: PDSValueOption) => void;
|
|
18
17
|
};
|
|
@@ -67,7 +67,7 @@ var profileImageBorderColorTheme = {
|
|
|
67
67
|
translucent_black: 'ui_avatar_border_translucent_black'
|
|
68
68
|
};
|
|
69
69
|
function ChatBubbleListItem(_a) {
|
|
70
|
-
var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? '
|
|
70
|
+
var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'top_end' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
|
|
71
71
|
var isMe = styleTheme.includes('me');
|
|
72
72
|
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
|
|
73
73
|
var contextMenuRef = (0, react_1.useRef)(null);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
|
-
export type PlacementTypes = '
|
|
2
|
+
export type PlacementTypes = 'v_auto' | 'h_auto' | 'v_center' | 'h_center' | 'top' | 'top_start' | 'top_end' | 'top_both' | 'top_center' | 'bottom' | 'bottom_start' | 'bottom_end' | 'bottom_both' | 'bottom_center' | 'left' | 'left_start' | 'left_end' | 'left_center' | 'right' | 'right_start' | 'right_end' | 'right_center';
|
|
3
3
|
type Props = {
|
|
4
4
|
targetRef: MutableRefObject<HTMLElement | null>;
|
|
5
5
|
isOpen: boolean;
|
|
6
6
|
onClickOutside?: () => void;
|
|
7
7
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
8
|
-
placement:
|
|
8
|
+
placement: PlacementTypes;
|
|
9
9
|
wrapperHeight?: number;
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
};
|
|
@@ -54,13 +54,13 @@ function getHCenterPlacement(_a) {
|
|
|
54
54
|
function getNormalizedPlacement(_a) {
|
|
55
55
|
var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
|
|
56
56
|
switch (placement) {
|
|
57
|
-
case '
|
|
57
|
+
case 'v_auto':
|
|
58
58
|
return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
59
|
-
case '
|
|
59
|
+
case 'h_auto':
|
|
60
60
|
return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
61
|
-
case '
|
|
61
|
+
case 'v_center':
|
|
62
62
|
return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
63
|
-
case '
|
|
63
|
+
case 'h_center':
|
|
64
64
|
return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
|
|
65
65
|
default:
|
|
66
66
|
return placement;
|
|
@@ -77,22 +77,22 @@ function updatePosition(_a) {
|
|
|
77
77
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
78
78
|
popupElem.style.width = 'auto';
|
|
79
79
|
break;
|
|
80
|
-
case '
|
|
80
|
+
case 'top_start':
|
|
81
81
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
82
82
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
83
83
|
popupElem.style.width = 'auto';
|
|
84
84
|
break;
|
|
85
|
-
case '
|
|
85
|
+
case 'top_end':
|
|
86
86
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
87
87
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
|
|
88
88
|
popupElem.style.width = 'auto';
|
|
89
89
|
break;
|
|
90
|
-
case '
|
|
90
|
+
case 'top_both':
|
|
91
91
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
92
92
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
93
93
|
popupElem.style.width = "".concat(targetRect.width, "px");
|
|
94
94
|
break;
|
|
95
|
-
case '
|
|
95
|
+
case 'top_center':
|
|
96
96
|
popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
|
|
97
97
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
98
98
|
popupElem.style.width = 'auto';
|
|
@@ -102,22 +102,22 @@ function updatePosition(_a) {
|
|
|
102
102
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
103
103
|
popupElem.style.width = 'auto';
|
|
104
104
|
break;
|
|
105
|
-
case '
|
|
105
|
+
case 'bottom_start':
|
|
106
106
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
107
107
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
108
108
|
popupElem.style.width = 'auto';
|
|
109
109
|
break;
|
|
110
|
-
case '
|
|
110
|
+
case 'bottom_end':
|
|
111
111
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
112
112
|
popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
|
|
113
113
|
popupElem.style.width = 'auto';
|
|
114
114
|
break;
|
|
115
|
-
case '
|
|
115
|
+
case 'bottom_both':
|
|
116
116
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
117
117
|
popupElem.style.left = "".concat(targetRect.left, "px");
|
|
118
118
|
popupElem.style.width = "".concat(targetRect.width, "px");
|
|
119
119
|
break;
|
|
120
|
-
case '
|
|
120
|
+
case 'bottom_center':
|
|
121
121
|
popupElem.style.top = "".concat(targetRect.bottom, "px");
|
|
122
122
|
popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
|
|
123
123
|
popupElem.style.width = 'auto';
|
|
@@ -127,17 +127,17 @@ function updatePosition(_a) {
|
|
|
127
127
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
128
128
|
popupElem.style.width = 'auto';
|
|
129
129
|
break;
|
|
130
|
-
case '
|
|
130
|
+
case 'left_start':
|
|
131
131
|
popupElem.style.top = "".concat(targetRect.top, "px");
|
|
132
132
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
133
133
|
popupElem.style.width = 'auto';
|
|
134
134
|
break;
|
|
135
|
-
case '
|
|
135
|
+
case 'left_end':
|
|
136
136
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
|
|
137
137
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
138
138
|
popupElem.style.width = 'auto';
|
|
139
139
|
break;
|
|
140
|
-
case '
|
|
140
|
+
case 'left_center':
|
|
141
141
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
|
|
142
142
|
popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
|
|
143
143
|
popupElem.style.width = 'auto';
|
|
@@ -147,17 +147,17 @@ function updatePosition(_a) {
|
|
|
147
147
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
148
148
|
popupElem.style.width = 'auto';
|
|
149
149
|
break;
|
|
150
|
-
case '
|
|
150
|
+
case 'right_start':
|
|
151
151
|
popupElem.style.top = "".concat(targetRect.top, "px");
|
|
152
152
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
153
153
|
popupElem.style.width = 'auto';
|
|
154
154
|
break;
|
|
155
|
-
case '
|
|
155
|
+
case 'right_end':
|
|
156
156
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
|
|
157
157
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
158
158
|
popupElem.style.width = 'auto';
|
|
159
159
|
break;
|
|
160
|
-
case '
|
|
160
|
+
case 'right_center':
|
|
161
161
|
popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
|
|
162
162
|
popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
|
|
163
163
|
popupElem.style.width = 'auto';
|
|
@@ -168,7 +168,7 @@ function updatePosition(_a) {
|
|
|
168
168
|
return normPlacement;
|
|
169
169
|
}
|
|
170
170
|
function Popup(_a) {
|
|
171
|
-
var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? '
|
|
171
|
+
var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom_start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
|
|
172
172
|
var popupRootRef = (0, react_1.useContext)(PopupContext);
|
|
173
173
|
var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
|
|
174
174
|
var popupRef = (0, react_1.useRef)(null);
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v2.2.
|
|
3
|
-
##
|
|
2
|
+
## [v2.2.9-alpha.0]
|
|
3
|
+
## alpha|https://design.storybook.publ.biz/
|
|
4
4
|
|
|
5
|
-
###
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
|
|
9
|
-
*
|
|
10
|
-
* textUtil에서 PRETENDARD를 선택할 경우 Pretendard-Regular가 아닌 Pretendard JP가 부여될 수 있도록 수정
|
|
5
|
+
### Component
|
|
6
|
+
* BasicChatListItem
|
|
7
|
+
* contextMenuPosition의 value 축소 (top_end만 존재)
|
|
8
|
+
* ChatBubbleListItem
|
|
9
|
+
* contextMenuPosition의 value 축소 (top_end만 존재)
|