pds-dev-kit-web 1.4.45 → 1.4.46

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 (3) hide show
  1. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +41 -47
  2. package/package.json +1 -1
  3. package/release-note.md +3 -5
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js CHANGED
@@ -35,6 +35,7 @@ function DesktopTabBar(_a) {
35
35
  var history = (0, react_router_dom_1.useHistory)();
36
36
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
37
37
  if (itemArray) {
38
+ var isSubTabBarActivated = itemArray.some(function (item) { return item.isActive && item.subArray; });
38
39
  var handelClickTabItem_1 = function (item, e) {
39
40
  if (item.onClick) {
40
41
  item.onClick(e);
@@ -51,13 +52,14 @@ function DesktopTabBar(_a) {
51
52
  return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
52
53
  }
53
54
  };
54
- return (react_1.default.createElement(S_TabBox, null,
55
- itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
56
- react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
57
- item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); }),
58
- itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
55
+ return (react_1.default.createElement(S_TabBarBox, null,
56
+ react_1.default.createElement(S_MainTabBarSpace, null, itemArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.title },
57
+ react_1.default.createElement(S_MainTabItemWrapper, { text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
58
+ item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); })),
59
+ isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
59
60
  }
60
61
  if (textArray) {
62
+ var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
61
63
  var handleClick_1 = function (value) {
62
64
  if (value) {
63
65
  history.push(value.path);
@@ -74,24 +76,26 @@ function DesktopTabBar(_a) {
74
76
  return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
75
77
  }
76
78
  };
77
- return (react_1.default.createElement(S_TabBox, null,
78
- textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, isActive: pathname.includes(item.path), styleTheme: styleTheme },
79
- react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () {
80
- handleClick_1(item);
81
- } }, textLabel_2(item, false)),
82
- item.subArray && pathname.includes(item.path) && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.path, text: subItem.title, onClick: function () {
83
- handleClick_1(subItem);
84
- } }, textLabel_2(subItem, true))); }))))); }),
85
- textArray.map(function (item) {
86
- return item.subArray && pathname.includes(item.path) && react_1.default.createElement(S_SubBackground, { key: item.path });
87
- })));
79
+ return (react_1.default.createElement(S_TabBarBox, null,
80
+ react_1.default.createElement(S_MainTabBarSpace, null, textArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.path },
81
+ react_1.default.createElement(S_MainTabItemWrapper, { isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, textLabel_2(item, false)),
82
+ pathname.includes(item.path) && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, textLabel_2(subItem, true))); }))))); })),
83
+ isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
88
84
  }
89
85
  return react_1.default.createElement(react_1.default.Fragment, null);
90
86
  }
91
- var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n display: flex;\n margin-right: ", ";\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: flex-end;\n box-sizing: border-box;\n justify-content: center;\n display: flex;\n margin-right: ", ";\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) {
87
+ var S_TabBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
88
+ var S_MainTabBarSpace = 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 padding-left: ", ";\n height: 40px;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n height: 40px;\n"])), function (_a) {
92
89
  var theme = _a.theme;
93
- return theme.spacing.spacingD;
90
+ return theme.ui_cpnt_tabbar_base_area;
91
+ }, function (_a) {
92
+ var theme = _a.theme;
93
+ return theme.ui_cpnt_divider;
94
94
  }, function (_a) {
95
+ var theme = _a.theme;
96
+ return theme.spacing.spacingE;
97
+ });
98
+ var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &::after {\n background-color: ", ";\n bottom: -1px;\n left: 0px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n &::after {\n background-color: ", ";\n bottom: -1px;\n left: 0px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
95
99
  var theme = _a.theme, styleTheme = _a.styleTheme;
96
100
  return styleTheme === 'content'
97
101
  ? theme.ui_cpnt_tabbar_border_active_indicator
@@ -101,51 +105,41 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
101
105
  return !isActive && "display: none;";
102
106
  });
103
107
  // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
104
- var textOffset = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"], ["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"])), function (_a) {
105
- var text = _a.text;
106
- return "'" + text + "'";
107
- });
108
- var S_TabWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n ", "\n"], ["\n position: relative;\n ", "\n"])), mediumStyle);
109
- var S_TitleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n padding: 0 ", ";\n padding-bottom: ", ";\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"], ["\n cursor: pointer;\n padding: 0 ", ";\n padding-bottom: ", ";\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"])), function (_a) {
108
+ var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n & > div::before {\n font-weight: ", ";\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n\n & > div::after {\n font-weight: ", ";\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n"], ["\n & > div::before {\n font-weight: ", ";\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n\n & > div::after {\n font-weight: ", ";\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n"])), function (_a) {
110
109
  var theme = _a.theme;
111
- return theme.spacing.spacingA;
110
+ return theme.fontWeight.normal;
112
111
  }, function (_a) {
113
- var theme = _a.theme;
114
- return theme.spacing.spacingB;
112
+ var text = _a.text;
113
+ return "'" + text + "'";
115
114
  }, function (_a) {
116
- var theme = _a.theme;
117
- return theme.fontWeight.normal;
118
- }, textOffset, function (_a) {
119
115
  var theme = _a.theme;
120
116
  return theme.fontWeight.bold;
121
- }, textOffset);
122
- var S_TabBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"])), function (_a) {
123
- var theme = _a.theme;
124
- return theme.ui_cpnt_tabbar_base_area;
125
117
  }, function (_a) {
118
+ var text = _a.text;
119
+ return "'" + text + "'";
120
+ });
121
+ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n"], ["\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n"])), function (_a) {
126
122
  var theme = _a.theme;
127
- return theme.ui_cpnt_divider;
123
+ return theme.spacing.spacingD;
124
+ });
125
+ var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-end;\n display: flex;\n height: 100%;\n box-sizing: border-box;\n padding: 0 ", ";\n padding-bottom: ", ";\n cursor: pointer;\n\n ", "\n ", "\n"], ["\n align-items: flex-end;\n display: flex;\n height: 100%;\n box-sizing: border-box;\n padding: 0 ", ";\n padding-bottom: ", ";\n cursor: pointer;\n\n ", "\n ", "\n"])), function (_a) {
126
+ var theme = _a.theme;
127
+ return theme.spacing.spacingA;
128
128
  }, function (_a) {
129
129
  var theme = _a.theme;
130
- return theme.spacing.spacingE;
131
- });
132
- var S_SubBackground = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"], ["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"])), function (_a) {
130
+ return theme.spacing.spacingB;
131
+ }, tabIndicator, textOffset);
132
+ var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: max-content;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n"], ["\n width: max-content;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n"])));
133
+ var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 32px;\n background-color: ", ";\n"], ["\n height: 32px;\n background-color: ", ";\n"])), function (_a) {
133
134
  var theme = _a.theme;
134
135
  return theme.ui_cpnt_tabbar_base_area_sub;
135
136
  });
136
- var S_SubTabBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"], ["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"])));
137
- var S_SubWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"])), function (_a) {
137
+ var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n ", "\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n ", "\n"])), function (_a) {
138
138
  var theme = _a.theme;
139
139
  return theme.spacing.spacingE;
140
140
  }, function (_a) {
141
141
  var theme = _a.theme;
142
142
  return theme.spacing.spacingA;
143
- }, function (_a) {
144
- var theme = _a.theme;
145
- return theme.fontWeight.normal;
146
- }, textOffset, function (_a) {
147
- var theme = _a.theme;
148
- return theme.fontWeight.bold;
149
143
  }, textOffset);
150
144
  exports.default = DesktopTabBar;
151
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
145
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.45",
3
+ "version": "1.4.46",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.45]
2
+ ## [v1.4.46]
3
3
 
4
4
  ### Component
5
- * Dropdown
6
- * value값이 undefined일 때와 null일 때를 구분할 수 있도록 수정
7
- * FilterBar
8
- * chip의 value값이 false나 null일때도 잘 넘겨줄 수 있도록 수정
5
+ * DesktopTabBar
6
+ * subTabBar가 영역을 가질 수 있도록 수정