pds-dev-kit-web 2.2.184 → 2.2.186
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/common/components/TextFieldBase/TextFieldBase.d.ts +2 -1
- package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js +20 -16
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +2 -3
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +3 -8
- package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts +1 -1
- package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js +3 -2
- package/dist/src/hybrid/components/Divider/Divider.d.ts +3 -1
- package/dist/src/hybrid/components/Divider/Divider.js +9 -7
- package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.d.ts +2 -1
- package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js +20 -16
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +2 -3
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +3 -8
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/helper.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/helper.js +15 -5
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -23,6 +23,7 @@ export type TextFieldBaseProps = {
|
|
|
23
23
|
max?: number;
|
|
24
24
|
maxLength?: number;
|
|
25
25
|
textSize: DesktopFontSize;
|
|
26
|
+
customFontSize?: string;
|
|
26
27
|
textWeight: FontWeight;
|
|
27
28
|
fieldPaddingRight?: number;
|
|
28
29
|
fieldPaddingLeft?: number;
|
|
@@ -47,5 +48,5 @@ export type TextFieldBaseProps = {
|
|
|
47
48
|
inputRef?: any;
|
|
48
49
|
[x: string]: any;
|
|
49
50
|
} & Record<string, any>;
|
|
50
|
-
declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, textWeight, fieldPaddingRight, fieldPaddingLeft, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
|
|
51
|
+
declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, customFontSize, textWeight, fieldPaddingRight, fieldPaddingLeft, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
|
|
51
52
|
export default TextFieldBase;
|
|
@@ -61,7 +61,7 @@ var common_1 = require("../../../../common");
|
|
|
61
61
|
var IconButton_1 = require("../../../components/IconButton");
|
|
62
62
|
var constants_1 = require("./constants");
|
|
63
63
|
function TextFieldBase(_a) {
|
|
64
|
-
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
|
|
64
|
+
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, customFontSize = _a.customFontSize, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "customFontSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
|
|
65
65
|
var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
|
|
66
66
|
var timeout;
|
|
67
67
|
var suffixTextRef = (0, react_1.useRef)(null);
|
|
@@ -226,7 +226,7 @@ function TextFieldBase(_a) {
|
|
|
226
226
|
}
|
|
227
227
|
var S_TextFieldBase = function () {
|
|
228
228
|
if (textLineType === 'single') {
|
|
229
|
-
return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
|
|
229
|
+
return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
|
|
230
230
|
ref(e);
|
|
231
231
|
if (inputRef) {
|
|
232
232
|
inputRef.current = e;
|
|
@@ -234,7 +234,7 @@ function TextFieldBase(_a) {
|
|
|
234
234
|
} })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
|
|
235
235
|
}
|
|
236
236
|
if (textLineType === 'multi') {
|
|
237
|
-
return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
|
|
237
|
+
return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
|
|
238
238
|
ref(e);
|
|
239
239
|
if (inputRef) {
|
|
240
240
|
inputRef.current = e;
|
|
@@ -242,7 +242,7 @@ function TextFieldBase(_a) {
|
|
|
242
242
|
} })));
|
|
243
243
|
}
|
|
244
244
|
if (textLineType === 'auto') {
|
|
245
|
-
return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
|
|
245
|
+
return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
|
|
246
246
|
ref(e);
|
|
247
247
|
if (textAreaRef) {
|
|
248
248
|
textAreaRef.current = e;
|
|
@@ -332,8 +332,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
|
|
|
332
332
|
var state = _a.state;
|
|
333
333
|
return (state === 'disabled' ? 'not-allowed' : 'text');
|
|
334
334
|
}, function (_a) {
|
|
335
|
-
var textSize = _a.textSize;
|
|
336
|
-
return common_1.desktopFontSize[textSize];
|
|
335
|
+
var textSize = _a.textSize, customFontSize = _a.customFontSize;
|
|
336
|
+
return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
|
|
337
337
|
}, function (_a) {
|
|
338
338
|
var textWeight = _a.textWeight;
|
|
339
339
|
return common_1.fontWeight[textWeight];
|
|
@@ -352,8 +352,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
|
|
|
352
352
|
transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
|
|
353
353
|
}[colorTheme];
|
|
354
354
|
}, function (_a) {
|
|
355
|
-
var textSize = _a.textSize;
|
|
356
|
-
return common_1.desktopFontSize[textSize];
|
|
355
|
+
var textSize = _a.textSize, customFontSize = _a.customFontSize;
|
|
356
|
+
return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
|
|
357
357
|
}, function (_a) {
|
|
358
358
|
var textWeight = _a.textWeight;
|
|
359
359
|
return common_1.fontWeight[textWeight];
|
|
@@ -496,19 +496,23 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
|
|
|
496
496
|
return theme.ui_cpnt_textfield_text_typed;
|
|
497
497
|
});
|
|
498
498
|
var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n ", "\n ", ";\n"], ["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n ", "\n ", ";\n"])), basicStyle, function (_a) {
|
|
499
|
-
var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
|
|
499
|
+
var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
|
|
500
500
|
return autoMaxRows &&
|
|
501
501
|
fieldHeight &&
|
|
502
|
-
"max-height: ".concat(
|
|
503
|
-
Number(common_1.desktopLineHeight[textSize]) *
|
|
504
|
-
|
|
502
|
+
"max-height: ".concat(customFontSize
|
|
503
|
+
? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMaxRows
|
|
504
|
+
: Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
|
|
505
|
+
Number(common_1.desktopLineHeight[textSize]) *
|
|
506
|
+
autoMaxRows, "px;");
|
|
505
507
|
}, function (_a) {
|
|
506
|
-
var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
|
|
508
|
+
var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
|
|
507
509
|
return autoMinRows &&
|
|
508
510
|
fieldHeight &&
|
|
509
|
-
"min-height: ".concat(
|
|
510
|
-
Number(common_1.desktopLineHeight[textSize]) *
|
|
511
|
-
|
|
511
|
+
"min-height: ".concat(customFontSize
|
|
512
|
+
? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMinRows
|
|
513
|
+
: Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
|
|
514
|
+
Number(common_1.desktopLineHeight[textSize]) *
|
|
515
|
+
autoMinRows, "px;");
|
|
512
516
|
});
|
|
513
517
|
var S_Multi = styled_components_1.default.textarea(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n"], ["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n"])), basicStyle);
|
|
514
518
|
exports.default = TextFieldBase;
|
|
@@ -9,8 +9,7 @@ export type ChatBubbleListItemProps = {
|
|
|
9
9
|
colorTheme?: ColorThemeType;
|
|
10
10
|
timeMode?: 'none' | 'use';
|
|
11
11
|
timeText?: PDSTextType;
|
|
12
|
-
|
|
13
|
-
countText?: PDSTextType;
|
|
12
|
+
labelText?: PDSTextType;
|
|
14
13
|
contextMenuOptionArray?: PDSValueOption[];
|
|
15
14
|
contextMenuState?: 'normal' | 'disabled';
|
|
16
15
|
children?: React.ReactNode;
|
|
@@ -18,5 +17,5 @@ export type ChatBubbleListItemProps = {
|
|
|
18
17
|
onClickContextMenuItem?: (option: PDSValueOption) => void;
|
|
19
18
|
onClickDownloadIBtn?: () => void;
|
|
20
19
|
};
|
|
21
|
-
declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText,
|
|
20
|
+
declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
|
|
22
21
|
export default ChatBubbleListItem;
|
|
@@ -68,8 +68,8 @@ var profileImageBorderColorTheme = {
|
|
|
68
68
|
transparent: 'ui_cpnt_list_chatbubble_base_transparent'
|
|
69
69
|
};
|
|
70
70
|
function ChatBubbleListItem(_a) {
|
|
71
|
-
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,
|
|
72
|
-
var
|
|
71
|
+
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, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
|
|
72
|
+
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
|
|
73
73
|
var contextMenuRef = (0, react_1.useRef)(null);
|
|
74
74
|
var chatBody = document.querySelector('#chatMessageBox');
|
|
75
75
|
var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
|
|
@@ -80,26 +80,21 @@ function ChatBubbleListItem(_a) {
|
|
|
80
80
|
styleTheme === 'other_avatar' ||
|
|
81
81
|
styleTheme === 'other_avatar_sub';
|
|
82
82
|
var titleTextColorTheme = 'sysTextPrimary';
|
|
83
|
-
var countTextColorTheme = 'sysTextPrimary';
|
|
84
83
|
switch (colorTheme) {
|
|
85
84
|
case 'grey': {
|
|
86
85
|
titleTextColorTheme = 'sysTextPrimary';
|
|
87
|
-
countTextColorTheme = 'sysTextPrimary';
|
|
88
86
|
break;
|
|
89
87
|
}
|
|
90
88
|
case 'brand_primary': {
|
|
91
89
|
titleTextColorTheme = 'usrTextBrandPrimary';
|
|
92
|
-
countTextColorTheme = 'sysTextPrimary';
|
|
93
90
|
break;
|
|
94
91
|
}
|
|
95
92
|
case 'translucent_white': {
|
|
96
93
|
titleTextColorTheme = 'sysTextBlack';
|
|
97
|
-
countTextColorTheme = 'sysTextPrimary';
|
|
98
94
|
break;
|
|
99
95
|
}
|
|
100
96
|
case 'translucent_black': {
|
|
101
97
|
titleTextColorTheme = 'sysTextWhite';
|
|
102
|
-
countTextColorTheme = 'sysTextPrimary';
|
|
103
98
|
}
|
|
104
99
|
}
|
|
105
100
|
/**
|
|
@@ -140,7 +135,7 @@ function ChatBubbleListItem(_a) {
|
|
|
140
135
|
}
|
|
141
136
|
setIsContextMenuOpen(false);
|
|
142
137
|
};
|
|
143
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [
|
|
138
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
|
|
144
139
|
}
|
|
145
140
|
var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
146
141
|
var theme = _a.theme;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { PDSTextType } from '../../../common/types';
|
|
3
3
|
type DesktopHeadlessModalProps = {
|
|
4
4
|
body: React.ReactNode;
|
|
5
|
-
size?: 'large' | 'medium' | 'small' | 'rlarge' | 'xlarge';
|
|
5
|
+
size?: 'large' | 'medium' | 'small' | 'rlarge' | 'xlarge' | 'rxlarge';
|
|
6
6
|
dimmedClickCloseMode?: 'use' | 'none';
|
|
7
7
|
scrollVisibleType?: 'hidden' | 'moving' | 'visible';
|
|
8
8
|
footerMode?: 'use' | 'none';
|
|
@@ -108,7 +108,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
|
|
|
108
108
|
return theme.boxShadow.elevation4;
|
|
109
109
|
}, function (_a) {
|
|
110
110
|
var size = _a.size;
|
|
111
|
-
return size === 'rlarge'
|
|
111
|
+
return size === 'rlarge' ? '960px' : size === 'rxlarge' ? '1200px' : undefined;
|
|
112
112
|
}, function (_a) {
|
|
113
113
|
var size = _a.size;
|
|
114
114
|
var sizes = {
|
|
@@ -116,7 +116,8 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
|
|
|
116
116
|
medium: '688px',
|
|
117
117
|
large: '960px',
|
|
118
118
|
rlarge: '60vw',
|
|
119
|
-
xlarge: '1200px'
|
|
119
|
+
xlarge: '1200px',
|
|
120
|
+
rxlarge: '70vw'
|
|
120
121
|
};
|
|
121
122
|
return sizes[size];
|
|
122
123
|
}, animationStyle_1.modalOnAni);
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import type { UiColors } from '../../../common/types';
|
|
2
3
|
export type DividerProps = {
|
|
3
4
|
displayType?: 'line' | 'area';
|
|
4
5
|
direction?: 'vertical' | 'horizontal';
|
|
5
6
|
height?: number;
|
|
6
7
|
colorTheme?: 'none' | 'divider1' | 'divider2';
|
|
8
|
+
overrideColorKey?: UiColors;
|
|
7
9
|
};
|
|
8
|
-
declare function Divider({ displayType, direction, height, colorTheme }: DividerProps): JSX.Element;
|
|
10
|
+
declare function Divider({ displayType, direction, height, colorTheme, overrideColorKey }: DividerProps): JSX.Element;
|
|
9
11
|
export default Divider;
|
|
@@ -30,8 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
30
30
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
function Divider(_a) {
|
|
33
|
-
var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
|
|
34
|
-
return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
|
|
33
|
+
var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, overrideColorKey = _a.overrideColorKey;
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme, overrideColorKey: overrideColorKey }));
|
|
35
35
|
}
|
|
36
36
|
var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n height: ", ";\n width: 100%;\n"], ["\n background-color: ", ";\n height: ", ";\n width: 100%;\n"])), function (_a) {
|
|
37
37
|
var displayType = _a.displayType, theme = _a.theme;
|
|
@@ -63,20 +63,22 @@ var divider2Color = (0, styled_components_1.css)(templateObject_4 || (templateOb
|
|
|
63
63
|
var theme = _a.theme;
|
|
64
64
|
return theme.ui_cpnt_divider_white_opacity00;
|
|
65
65
|
});
|
|
66
|
-
var S_Divider = styled_components_1.default.div(
|
|
66
|
+
var S_Divider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n ", ";\n\n ", ";\n"], ["\n ", ";\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
67
67
|
var $direction = _a.$direction;
|
|
68
68
|
return $direction === 'horizontal' && horizontal;
|
|
69
69
|
}, function (_a) {
|
|
70
70
|
var $direction = _a.$direction, displayType = _a.displayType;
|
|
71
71
|
return $direction === 'vertical' && displayType === 'line' && vertical;
|
|
72
72
|
}, function (_a) {
|
|
73
|
-
var colorTheme = _a.colorTheme;
|
|
74
|
-
|
|
73
|
+
var overrideColorKey = _a.overrideColorKey, theme = _a.theme, colorTheme = _a.colorTheme;
|
|
74
|
+
if (overrideColorKey)
|
|
75
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), theme[overrideColorKey]);
|
|
76
|
+
return (colorTheme &&
|
|
75
77
|
{
|
|
76
78
|
divider1: divider1Color,
|
|
77
79
|
divider2: divider2Color,
|
|
78
80
|
none: ''
|
|
79
|
-
}[colorTheme];
|
|
81
|
+
}[colorTheme]);
|
|
80
82
|
});
|
|
81
83
|
exports.default = Divider;
|
|
82
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
84
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -23,6 +23,7 @@ export type TextFieldBaseProps = {
|
|
|
23
23
|
max?: number;
|
|
24
24
|
maxLength?: number;
|
|
25
25
|
textSize: DesktopFontSize;
|
|
26
|
+
customFontSize?: string;
|
|
26
27
|
textWeight: FontWeight;
|
|
27
28
|
fieldPaddingRight?: number;
|
|
28
29
|
fieldPaddingLeft?: number;
|
|
@@ -46,5 +47,5 @@ export type TextFieldBaseProps = {
|
|
|
46
47
|
onTarget?: () => void;
|
|
47
48
|
[x: string]: any;
|
|
48
49
|
} & Record<string, any>;
|
|
49
|
-
declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, textWeight, fieldPaddingRight, fieldPaddingLeft, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
|
|
50
|
+
declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, customFontSize, textWeight, fieldPaddingRight, fieldPaddingLeft, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
|
|
50
51
|
export default TextFieldBase;
|
|
@@ -61,7 +61,7 @@ var common_1 = require("../../../../common");
|
|
|
61
61
|
var IconButton_1 = require("../../../components/IconButton");
|
|
62
62
|
var constants_1 = require("./constants");
|
|
63
63
|
function TextFieldBase(_a) {
|
|
64
|
-
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
|
|
64
|
+
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, customFontSize = _a.customFontSize, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "customFontSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
|
|
65
65
|
var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
|
|
66
66
|
var timeout;
|
|
67
67
|
var suffixTextRef = (0, react_1.useRef)(null);
|
|
@@ -226,13 +226,13 @@ function TextFieldBase(_a) {
|
|
|
226
226
|
}
|
|
227
227
|
var S_TextFieldBase = function () {
|
|
228
228
|
if (textLineType === 'single') {
|
|
229
|
-
return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
|
|
229
|
+
return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
|
|
230
230
|
}
|
|
231
231
|
if (textLineType === 'multi') {
|
|
232
|
-
return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })));
|
|
232
|
+
return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })));
|
|
233
233
|
}
|
|
234
234
|
if (textLineType === 'auto') {
|
|
235
|
-
return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
|
|
235
|
+
return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
|
|
236
236
|
ref(e);
|
|
237
237
|
textAreaRef.current = e;
|
|
238
238
|
}, onInput: handleResizeHeight })));
|
|
@@ -314,8 +314,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
|
|
|
314
314
|
transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
|
|
315
315
|
}[colorTheme];
|
|
316
316
|
}, function (_a) {
|
|
317
|
-
var textSize = _a.textSize;
|
|
318
|
-
return common_1.desktopFontSize[textSize];
|
|
317
|
+
var textSize = _a.textSize, customFontSize = _a.customFontSize;
|
|
318
|
+
return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
|
|
319
319
|
}, function (_a) {
|
|
320
320
|
var textWeight = _a.textWeight;
|
|
321
321
|
return common_1.fontWeight[textWeight];
|
|
@@ -334,8 +334,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
|
|
|
334
334
|
transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
|
|
335
335
|
}[colorTheme];
|
|
336
336
|
}, function (_a) {
|
|
337
|
-
var textSize = _a.textSize;
|
|
338
|
-
return common_1.desktopFontSize[textSize];
|
|
337
|
+
var textSize = _a.textSize, customFontSize = _a.customFontSize;
|
|
338
|
+
return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
|
|
339
339
|
}, function (_a) {
|
|
340
340
|
var textWeight = _a.textWeight;
|
|
341
341
|
return common_1.fontWeight[textWeight];
|
|
@@ -478,19 +478,23 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
|
|
|
478
478
|
return theme.ui_cpnt_textfield_text_typed;
|
|
479
479
|
});
|
|
480
480
|
var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n ", "\n ", ";\n"], ["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n ", "\n ", ";\n"])), basicStyle, function (_a) {
|
|
481
|
-
var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
|
|
481
|
+
var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
|
|
482
482
|
return autoMaxRows &&
|
|
483
483
|
fieldHeight &&
|
|
484
|
-
"max-height: ".concat(
|
|
485
|
-
Number(common_1.desktopLineHeight[textSize]) *
|
|
486
|
-
|
|
484
|
+
"max-height: ".concat(customFontSize
|
|
485
|
+
? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMaxRows
|
|
486
|
+
: Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
|
|
487
|
+
Number(common_1.desktopLineHeight[textSize]) *
|
|
488
|
+
autoMaxRows, "px;");
|
|
487
489
|
}, function (_a) {
|
|
488
|
-
var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
|
|
490
|
+
var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
|
|
489
491
|
return autoMinRows &&
|
|
490
492
|
fieldHeight &&
|
|
491
|
-
"min-height: ".concat(
|
|
492
|
-
Number(common_1.desktopLineHeight[textSize]) *
|
|
493
|
-
|
|
493
|
+
"min-height: ".concat(customFontSize
|
|
494
|
+
? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMinRows
|
|
495
|
+
: Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
|
|
496
|
+
Number(common_1.desktopLineHeight[textSize]) *
|
|
497
|
+
autoMinRows, "px;");
|
|
494
498
|
});
|
|
495
499
|
var S_Multi = styled_components_1.default.textarea(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n"], ["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n"])), basicStyle);
|
|
496
500
|
exports.default = TextFieldBase;
|
|
@@ -9,8 +9,7 @@ export type ChatBubbleListItemProps = {
|
|
|
9
9
|
colorTheme?: ColorThemeType;
|
|
10
10
|
timeMode?: 'none' | 'use';
|
|
11
11
|
timeText?: PDSTextType;
|
|
12
|
-
|
|
13
|
-
countText?: PDSTextType;
|
|
12
|
+
labelText?: PDSTextType;
|
|
14
13
|
contextMenuOptionArray?: PDSValueOption[];
|
|
15
14
|
contextMenuState?: 'normal' | 'disabled';
|
|
16
15
|
children?: React.ReactNode;
|
|
@@ -18,5 +17,5 @@ export type ChatBubbleListItemProps = {
|
|
|
18
17
|
onClickContextMenuItem?: (option: PDSValueOption) => void;
|
|
19
18
|
onClickDownloadIBtn?: () => void;
|
|
20
19
|
};
|
|
21
|
-
declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText,
|
|
20
|
+
declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
|
|
22
21
|
export default ChatBubbleListItem;
|
|
@@ -68,8 +68,8 @@ var profileImageBorderColorTheme = {
|
|
|
68
68
|
transparent: 'ui_cpnt_list_chatbubble_base_transparent'
|
|
69
69
|
};
|
|
70
70
|
function ChatBubbleListItem(_a) {
|
|
71
|
-
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,
|
|
72
|
-
var
|
|
71
|
+
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, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
|
|
72
|
+
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
|
|
73
73
|
var contextMenuRef = (0, react_1.useRef)(null);
|
|
74
74
|
var chatBody = document.querySelector('#chatMessageBox');
|
|
75
75
|
var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
|
|
@@ -80,26 +80,21 @@ function ChatBubbleListItem(_a) {
|
|
|
80
80
|
styleTheme === 'other_avatar' ||
|
|
81
81
|
styleTheme === 'other_avatar_sub';
|
|
82
82
|
var titleTextColorTheme = 'sysTextPrimary';
|
|
83
|
-
var countTextColorTheme = 'sysTextPrimary';
|
|
84
83
|
switch (colorTheme) {
|
|
85
84
|
case 'grey': {
|
|
86
85
|
titleTextColorTheme = 'sysTextPrimary';
|
|
87
|
-
countTextColorTheme = 'sysTextPrimary';
|
|
88
86
|
break;
|
|
89
87
|
}
|
|
90
88
|
case 'brand_primary': {
|
|
91
89
|
titleTextColorTheme = 'usrTextBrandPrimary';
|
|
92
|
-
countTextColorTheme = 'sysTextPrimary';
|
|
93
90
|
break;
|
|
94
91
|
}
|
|
95
92
|
case 'translucent_white': {
|
|
96
93
|
titleTextColorTheme = 'sysTextBlack';
|
|
97
|
-
countTextColorTheme = 'sysTextPrimary';
|
|
98
94
|
break;
|
|
99
95
|
}
|
|
100
96
|
case 'translucent_black': {
|
|
101
97
|
titleTextColorTheme = 'sysTextWhite';
|
|
102
|
-
countTextColorTheme = 'sysTextPrimary';
|
|
103
98
|
}
|
|
104
99
|
}
|
|
105
100
|
/**
|
|
@@ -142,7 +137,7 @@ function ChatBubbleListItem(_a) {
|
|
|
142
137
|
}
|
|
143
138
|
setIsContextMenuOpen(false);
|
|
144
139
|
};
|
|
145
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [
|
|
140
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
|
|
146
141
|
}
|
|
147
142
|
var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
148
143
|
var theme = _a.theme;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.parseTargetUrl = void 0;
|
|
3
|
+
exports.convertToCdnUrl = exports.parseTargetUrl = void 0;
|
|
4
4
|
function parseTargetUrl(url) {
|
|
5
5
|
var _a = url.split('?'), encodedURL = _a[0], query = _a[1];
|
|
6
6
|
if (!query) {
|
|
7
7
|
return {
|
|
8
|
-
encodedURL: encodedURL,
|
|
8
|
+
encodedURL: convertToCdnUrl(encodedURL),
|
|
9
9
|
fallbackURL: null
|
|
10
10
|
};
|
|
11
11
|
}
|
|
@@ -13,13 +13,23 @@ function parseTargetUrl(url) {
|
|
|
13
13
|
var fallbackUrl = params.get('fallbackUrl');
|
|
14
14
|
if (!fallbackUrl) {
|
|
15
15
|
return {
|
|
16
|
-
encodedURL: encodedURL,
|
|
16
|
+
encodedURL: convertToCdnUrl(encodedURL),
|
|
17
17
|
fallbackURL: null
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
20
|
return {
|
|
21
|
-
encodedURL: encodedURL,
|
|
22
|
-
fallbackURL: "https://".concat(fallbackUrl)
|
|
21
|
+
encodedURL: convertToCdnUrl(encodedURL),
|
|
22
|
+
fallbackURL: convertToCdnUrl("https://".concat(fallbackUrl))
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
exports.parseTargetUrl = parseTargetUrl;
|
|
26
|
+
function convertToCdnUrl(url) {
|
|
27
|
+
if (!url) {
|
|
28
|
+
return url;
|
|
29
|
+
}
|
|
30
|
+
return url
|
|
31
|
+
.replace(/^https?:\/\/publ-upload-local\.s3\.ap-northeast-2\.amazonaws\.com\//, 'https://cdn.local.publishingkit.net/')
|
|
32
|
+
.replace(/^https?:\/\/publ-upload-dev\.s3\.ap-northeast-2\.amazonaws\.com\//, 'https://cdn.dev.publishingkit.net/')
|
|
33
|
+
.replace(/^https?:\/\/publ-upload-prod\.s3\.ap-northeast-2\.amazonaws\.com\//, 'https://cdn.publishingkit.net/');
|
|
34
|
+
}
|
|
35
|
+
exports.convertToCdnUrl = convertToCdnUrl;
|
package/package.json
CHANGED
package/release-note.md
CHANGED