pds-dev-kit-web 2.2.67 → 2.2.69

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 (6) hide show
  1. package/dist/src/desktop/components/TextField/TextField.js +5 -2
  2. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +20 -8
  3. package/dist/src/mobile/components/TextField/TextField.js +5 -2
  4. package/package.json +1 -1
  5. package/pipeline_output.log +6456 -0
  6. package/release-note.md +3 -14
package/dist/src/desktop/components/TextField/TextField.js CHANGED
@@ -69,7 +69,10 @@ function TextField(_a) {
69
69
  var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
70
70
  var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
71
71
  var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
72
- var isError = Object.keys(errors).some(function (error) { return error === name; });
72
+ var getErrorByName = function (errors, name) {
73
+ return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
74
+ };
75
+ var isError = getErrorByName(errors, name);
73
76
  var handleClickIBtn1 = function () {
74
77
  if (onClickIBtn1) {
75
78
  onClickIBtn1();
@@ -155,7 +158,7 @@ function TextField(_a) {
155
158
  }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
156
159
  }
157
160
  };
158
- return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
161
+ return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
159
162
  }
160
163
  var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
161
164
  var size = _a.size;
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js CHANGED
@@ -39,28 +39,33 @@ function MobileTabBar(_a) {
39
39
  var history = (0, react_router_dom_1.useHistory)();
40
40
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
41
41
  if (itemArray) {
42
+ var hasScroll_1 = itemArray.length > 3;
42
43
  var handleClickTabItem_1 = function (item, e) {
43
44
  if (item.onClick) {
44
45
  item.onClick(e);
45
46
  }
46
47
  };
47
- return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ 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", colorTheme: item.isActive
48
- ? mobileTabBarThemes[colorTheme].activeTextColor
49
- : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }) }), index)); }) })));
48
+ 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.jsx)(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
49
+ ? mobileTabBarThemes[colorTheme].activeTextColor
50
+ : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }) }), index)); }) })) }));
50
51
  }
51
52
  if (textArray) {
53
+ var hasScroll_2 = textArray.length > 3;
52
54
  var handleClick_1 = function (value) {
53
55
  if (value) {
54
56
  history.push(value.path);
55
57
  }
56
58
  };
57
- return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ 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", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), value.path)); }) })));
59
+ 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.jsx)(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" }) }), value.path)); }) })) }));
58
60
  }
59
61
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
60
62
  }
61
- var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
63
+ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: ", ";\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: 0px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n\n & > div {\n white-space: ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n display: ", ";\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: 0px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n\n & > div {\n white-space: ", ";\n }\n"])), function (_a) {
62
64
  var isActive = _a.isActive, theme = _a.theme;
63
65
  return isActive && theme.ui_cpnt_tabbar_base_area;
66
+ }, function (_a) {
67
+ var hasScroll = _a.hasScroll;
68
+ return (hasScroll ? 'inline-flex' : 'flex');
64
69
  }, function (_a) {
65
70
  var theme = _a.theme;
66
71
  return theme.spacing.spacingD;
@@ -70,13 +75,20 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
70
75
  }, function (_a) {
71
76
  var isActive = _a.isActive;
72
77
  return !isActive && "display: none;";
78
+ }, function (_a) {
79
+ var hasScroll = _a.hasScroll;
80
+ return hasScroll && 'nowrap';
73
81
  });
74
- var S_TabBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"])), function (_a) {
82
+ var S_TabBarContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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) {
75
83
  var theme = _a.theme;
76
84
  return theme.ui_cpnt_tabbar_base_area;
77
- }, function (_a) {
85
+ });
86
+ var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: ", ";\n height: 48px;\n"], ["\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: ", ";\n height: 48px;\n"])), function (_a) {
78
87
  var theme = _a.theme;
79
88
  return theme.ui_cpnt_divider;
89
+ }, function (_a) {
90
+ var hasScroll = _a.hasScroll;
91
+ return (hasScroll ? 'inline-flex' : 'flex');
80
92
  });
81
93
  exports.default = MobileTabBar;
82
- var templateObject_1, templateObject_2;
94
+ var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/mobile/components/TextField/TextField.js CHANGED
@@ -69,7 +69,10 @@ function TextField(_a) {
69
69
  var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
70
70
  var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
71
71
  var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
72
- var isError = Object.keys(errors).some(function (error) { return error === name; });
72
+ var getErrorByName = function (errors, name) {
73
+ return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
74
+ };
75
+ var isError = getErrorByName(errors, name);
73
76
  var handleClickIBtn1 = function () {
74
77
  if (onClickIBtn1) {
75
78
  onClickIBtn1();
@@ -155,7 +158,7 @@ function TextField(_a) {
155
158
  }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
156
159
  }
157
160
  };
158
- return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
161
+ return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
159
162
  }
160
163
  var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
161
164
  var size = _a.size;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.67",
3
+ "version": "2.2.69",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",