pds-dev-kit-web-test 0.3.65 → 0.3.67

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.
Files changed (4) hide show
  1. package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js +19 -15
  2. package/dist/src/desktop/components/TextButton/TextButton.d.ts +3 -2
  3. package/dist/src/desktop/components/TextButton/TextButton.js +2 -2
  4. package/package.json +1 -1
package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js CHANGED
@@ -44,20 +44,24 @@ function DesktopAlertDialog(_a) {
44
44
  };
45
45
  }, []);
46
46
  // Enter 키 입력 감지를 위한 useEffect
47
- (0, react_1.useEffect)(function () {
48
- var handleKeyDown = function (event) {
49
- console.log('event listener');
50
- if (event.key === 'Enter') {
51
- console.log('enter');
52
- onClickTBtn1 && onClickTBtn1();
53
- }
54
- };
55
- document.addEventListener('keydown', handleKeyDown);
56
- return function () {
57
- console.log('key down remove');
58
- document.removeEventListener('keydown', handleKeyDown);
59
- };
60
- }, []);
47
+ // useEffect(() => {
48
+ // const handleKeyDown = (event: KeyboardEvent) => {
49
+ // if (event.isComposing) return;
50
+ // if (event.key === 'Enter') {
51
+ // onClickTBtn1 && onClickTBtn1();
52
+ // }
53
+ // };
54
+ // document.addEventListener('keydown', handleKeyDown);
55
+ // return () => {
56
+ // document.removeEventListener('keydown', handleKeyDown);
57
+ // };
58
+ // }, []);
59
+ function handleKeyDown(e) {
60
+ console.log(e);
61
+ if (e.key === 'Enter') {
62
+ onClickTBtn1 && onClickTBtn1();
63
+ }
64
+ }
61
65
  var btn1Mode = ['tbtn_amount1', 'tbtn_amount2', 'tbtn_amount3'];
62
66
  var btn2Mode = ['tbtn_amount2', 'tbtn_amount3'];
63
67
  var btn3Mode = ['tbtn_amount3'];
@@ -66,7 +70,7 @@ function DesktopAlertDialog(_a) {
66
70
  return ((0, jsx_runtime_1.jsxs)(S_IconWrapper, { children: [iconMode === 'success' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" })), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" })), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" })), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }))] }));
67
71
  }
68
72
  };
69
- return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_UpperBox, { children: [icon(), iconMode !== 'none' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" })), titleText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" }))] })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [btn3Mode.includes(btnMode) && tBtn3Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn2Mode.includes(btnMode) && tBtn2Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1 }))] })] }))] }), container);
73
+ return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_UpperBox, { children: [icon(), iconMode !== 'none' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" })), titleText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" }))] })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [btn3Mode.includes(btnMode) && tBtn3Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn2Mode.includes(btnMode) && tBtn2Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1, onKeyDown: function (e) { return handleKeyDown(e); } }))] })] }))] }), container);
70
74
  }
71
75
  var S_UpperBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n margin: ", ";\n"], ["\n display: flex;\n margin: ", ";\n"])), function (_a) {
72
76
  var theme = _a.theme;
package/dist/src/desktop/components/TextButton/TextButton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- /// <reference types="react" />
2
1
  import type { PDSTextType } from '../../../common';
2
+ import type React from 'react';
3
3
  export type TextButtonProps = {
4
4
  text?: PDSTextType;
5
5
  size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
@@ -9,6 +9,7 @@ export type TextButtonProps = {
9
9
  state?: 'normal' | 'disabled';
10
10
  colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
11
11
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
12
+ onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
12
13
  };
13
- declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
14
+ declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
14
15
  export default TextButton;
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -69,13 +69,13 @@ var textColor = {
69
69
  white2: 'sysTextWhite'
70
70
  };
71
71
  function TextButton(_a) {
72
- var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
72
+ var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick", "onKeyDown"]);
73
73
  var handleClick = function (e) {
74
74
  if (onClick) {
75
75
  onClick(e);
76
76
  }
77
77
  };
78
- return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
78
+ return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
79
79
  }
80
80
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
81
81
  var size = _a.size;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.3.65",
3
+ "version": "0.3.67",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",