pds-dev-kit-web-test 0.3.66 → 0.3.68

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 -17
  2. package/dist/src/desktop/components/TextButton/TextButton.d.ts +3 -2
  3. package/dist/src/desktop/components/TextButton/TextButton.js +11 -2
  4. package/package.json +1 -1
package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js CHANGED
@@ -44,22 +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', event);
50
- if (event.isComposing)
51
- return;
52
- if (event.key === 'Enter') {
53
- console.log('enter');
54
- onClickTBtn1 && onClickTBtn1();
55
- }
56
- };
57
- document.addEventListener('keydown', handleKeyDown);
58
- return function () {
59
- console.log('key down remove');
60
- document.removeEventListener('keydown', handleKeyDown);
61
- };
62
- }, []);
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
+ }
63
65
  var btn1Mode = ['tbtn_amount1', 'tbtn_amount2', 'tbtn_amount3'];
64
66
  var btn2Mode = ['tbtn_amount2', 'tbtn_amount3'];
65
67
  var btn3Mode = ['tbtn_amount3'];
@@ -68,7 +70,7 @@ function DesktopAlertDialog(_a) {
68
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" }))] }));
69
71
  }
70
72
  };
71
- 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);
72
74
  }
73
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) {
74
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
@@ -50,6 +50,7 @@ var __rest = (this && this.__rest) || function (s, e) {
50
50
  };
51
51
  Object.defineProperty(exports, "__esModule", { value: true });
52
52
  var jsx_runtime_1 = require("react/jsx-runtime");
53
+ var react_1 = require("react");
53
54
  var styled_components_1 = __importStar(require("styled-components"));
54
55
  var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
55
56
  var TextLabel_1 = require("../TextLabel");
@@ -69,13 +70,21 @@ var textColor = {
69
70
  white2: 'sysTextWhite'
70
71
  };
71
72
  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"]);
73
+ 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"]);
74
+ var buttonRef = (0, react_1.useRef)(null);
75
+ (0, react_1.useEffect)(function () {
76
+ if (!onKeyDown)
77
+ return;
78
+ if (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) {
79
+ buttonRef.current.focus();
80
+ }
81
+ }, []);
73
82
  var handleClick = function (e) {
74
83
  if (onClick) {
75
84
  onClick(e);
76
85
  }
77
86
  };
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" }) })));
87
+ return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ ref: buttonRef, "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, tabIndex: 0 }, { 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
88
  }
80
89
  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
90
  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.66",
3
+ "version": "0.3.68",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",