pds-dev-kit-web-test 2.6.8 → 2.6.10

package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js

@@ -32,22 +32,30 @@ var mobileTabBarThemes = {
         activeTextColor: 'sysTextPrimary',
         inActiveTextColor: 'sysTextTertiary',
         activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator'
+    },
+    content: {
+        activeTextColor: 'sysTextPrimary',
+        inActiveTextColor: 'sysTextTertiary'
     }
 };
 function MobileTabBar(_a) {
-    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, textArray = _a.textArray;
+    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'main' : _c, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
-        var hasScroll_1 = itemArray.length > 3;
+        var hasScroll_1 = styleTheme === 'content' ? true : itemArray.length > 3;
         var handleClickTabItem_1 = function (item, e) {
             if (item.onClick) {
                 item.onClick(e);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: item.isActive
-                                ? mobileTabBarThemes[colorTheme].activeTextColor
-                                : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }), item.isActive && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), index)); }) })) }));
+        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", styleTheme: styleTheme, hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, styleTheme: styleTheme, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: styleTheme === 'main' ? 'body2Bold' : 'caption1Bold', wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: styleTheme === 'content'
+                                ? item.isActive
+                                    ? mobileTabBarThemes.content.activeTextColor
+                                    : mobileTabBarThemes.content.inActiveTextColor
+                                : item.isActive
+                                    ? mobileTabBarThemes[colorTheme].activeTextColor
+                                    : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }), item.isActive && styleTheme !== 'content' && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), index)); }) })) })));
     }
     if (textArray) {
         var hasScroll_2 = textArray.length > 3;
@@ -56,7 +64,7 @@ function MobileTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2 }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_2, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_2 ? 'keep_all' : 'normal', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }), pathname === value.path && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), value.path)); }) })) }));
+        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2, styleTheme: styleTheme }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_2, styleTheme: styleTheme, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_2 ? 'keep_all' : 'normal', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }), pathname === value.path && styleTheme !== 'content' && ((0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme }))] }), value.path)); }) })) })));
     }
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 }
@@ -68,25 +76,40 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
     var isActive = _a.isActive, theme = _a.theme;
     return isActive && theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
-    var theme = _a.theme;
-    return "1px solid ".concat(theme.ui_cpnt_divider);
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' && "1px solid ".concat(theme.ui_cpnt_divider);
 }, function (_a) {
     var hasScroll = _a.hasScroll;
     return (hasScroll ? 'inline-flex' : 'flex');
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return (styleTheme === 'main' ? theme.spacing.spacingD : "10px");
 }, function (_a) {
     var hasScroll = _a.hasScroll;
-    return hasScroll && 'nowrap';
+    return (hasScroll ? 'nowrap' : 'normal');
 });
-var S_TabBarContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  background-color: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
+var S_TabBarContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  background-color: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'content' && "1px solid ".concat(theme.ui_cpnt_divider);
 });
-var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  height: 48px;\n  width: 100%;\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  height: 48px;\n  width: 100%;\n"])), function (_a) {
+var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  height: ", ";\n  width: ", ";\n\n  & > :first-child {\n    padding-left: ", ";\n  }\n\n  & > :last-child {\n    padding-right: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  height: ", ";\n  width: ", ";\n\n  & > :first-child {\n    padding-left: ", ";\n  }\n\n  & > :last-child {\n    padding-right: ", ";\n  }\n"])), function (_a) {
     var hasScroll = _a.hasScroll;
     return (hasScroll ? 'inline-flex' : 'flex');
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '48px' : '46px');
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '100%' : undefined);
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme === 'content' && theme.spacing.spacingE;
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme === 'content' && theme.spacing.spacingE;
 });
 exports.default = MobileTabBar;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/components/PriceTextField/PriceTextField.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Path } from 'react-hook-form';
+import { CurrencyCode } from '../../../core/pricing';
+import type { IFormValues, PDSTextType } from '../../../common';
+import type { TextFieldBaseProps } from '../../common/components/TextFieldBase/TextFieldBase';
+export declare const DEFAULT_DECIMAL_PLACES: {
+    readonly KRW: 0;
+    readonly USD: 2;
+};
+type Props = {
+    name: Path<IFormValues>;
+    hintText?: PDSTextType;
+    defaultAmount?: number;
+    size?: 'large' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
+    state?: 'normal' | 'read_only' | 'disabled';
+    dropdownState?: 'normal' | 'read_only';
+    customWidth?: string;
+    baseCurrency?: CurrencyCode;
+    currencies?: CurrencyCode[];
+    decimalPlaces?: Record<string, number>;
+    exchangeRates?: {
+        [key: string]: number;
+    };
+    hintTextFontWeight?: 'normal' | 'bold';
+    validation?: any;
+    useRequiredValidation?: 'none' | 'use';
+    useDotBadge?: 'none' | 'use';
+    deleteBtnMode?: 'none' | 'use';
+    minPriceAmount?: string | number;
+    onChange?: (value: string) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onCurrencyChange?: (selectedCurrency: string) => void;
+    onValueChange?: (data: {
+        selectedCurrency: string;
+        baseCurrencyValue: number;
+        calculatedValue: number;
+        displayValue: string;
+    }) => void;
+} & Omit<Partial<TextFieldBaseProps>, 'textAlign' | 'preventBlankMode' | 'enterSubmitMode' | 'multiRows' | 'colorTheme'>;
+declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, deleteBtnMode, minPriceAmount, onChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
+export default PriceTextField;