1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports.useTabListStyle = exports.useTabStyle = exports.orientationStyle = exports.variantStyle = exports.disabledProps = exports.baseProps = void 0;
|
7 |
|
8 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9 |
|
10 | var _react = require("react");
|
11 |
|
12 | var _ = require(".");
|
13 |
|
14 | var _ColorModeProvider = require("../ColorModeProvider");
|
15 |
|
16 | var _ThemeProvider = require("../ThemeProvider");
|
17 |
|
18 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
19 |
|
20 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
21 |
|
22 | var baseProps = {
|
23 | display: "flex",
|
24 | cursor: "pointer",
|
25 | alignItems: "center",
|
26 | justifyContent: "center",
|
27 | transition: "all 0.2s",
|
28 | _focus: {
|
29 | zIndex: "1",
|
30 | boxShadow: "outline"
|
31 | }
|
32 | };
|
33 | exports.baseProps = baseProps;
|
34 | var disabledProps = {
|
35 | _disabled: {
|
36 | opacity: 0.4,
|
37 | cursor: "not-allowed"
|
38 | }
|
39 | };
|
40 | exports.disabledProps = disabledProps;
|
41 |
|
42 | var lineStyle = function lineStyle(_ref) {
|
43 | var color = _ref.color,
|
44 | colorMode = _ref.colorMode;
|
45 | var _color = {
|
46 | light: color + ".600",
|
47 | dark: color + ".300"
|
48 | };
|
49 | return {
|
50 | tabList: {
|
51 | borderBottom: "2px",
|
52 | borderColor: "inherit"
|
53 | },
|
54 | tab: {
|
55 | borderBottom: "2px",
|
56 | borderColor: "transparent",
|
57 | mb: "-2px",
|
58 | _selected: {
|
59 | color: _color[colorMode],
|
60 | borderColor: "currentColor"
|
61 | },
|
62 | _active: {
|
63 | bg: "gray.200"
|
64 | },
|
65 | _disabled: {
|
66 | opacity: 0.4,
|
67 | cursor: "not-allowed"
|
68 | }
|
69 | }
|
70 | };
|
71 | };
|
72 |
|
73 |
|
74 | var enclosedStyle = function enclosedStyle(_ref2) {
|
75 | var color = _ref2.color,
|
76 | colorMode = _ref2.colorMode,
|
77 | theme = _ref2.theme;
|
78 | var _selectedColor = {
|
79 | light: color + ".600",
|
80 | dark: color + ".300"
|
81 | };
|
82 | var _selectedBg = {
|
83 | light: "#fff",
|
84 | dark: theme.colors.gray[800]
|
85 | };
|
86 | return {
|
87 | tab: {
|
88 | roundedTop: "md",
|
89 | border: "1px",
|
90 | borderColor: "transparent",
|
91 | mb: "-1px",
|
92 | _selected: {
|
93 | color: _selectedColor[colorMode],
|
94 | borderColor: "inherit",
|
95 | borderBottomColor: _selectedBg[colorMode]
|
96 | }
|
97 | },
|
98 | tabList: {
|
99 | mb: "-1px",
|
100 | borderBottom: "1px",
|
101 | borderColor: "inherit"
|
102 | }
|
103 | };
|
104 | };
|
105 |
|
106 | var enclosedColoredStyle = function enclosedColoredStyle(_ref3) {
|
107 | var color = _ref3.color,
|
108 | colorMode = _ref3.colorMode;
|
109 | var bg = {
|
110 | light: "gray.50",
|
111 | dark: "whiteAlpha.50"
|
112 | };
|
113 | var _selectedColor = {
|
114 | light: color + ".600",
|
115 | dark: color + ".300"
|
116 | };
|
117 | var _selectedBg = {
|
118 | light: "#fff",
|
119 | dark: "gray.800"
|
120 | };
|
121 | return {
|
122 | tab: {
|
123 | border: "1px",
|
124 | borderColor: "inherit",
|
125 | bg: bg[colorMode],
|
126 | mb: "-1px",
|
127 | _notLast: {
|
128 | mr: "-1px"
|
129 | },
|
130 | _selected: {
|
131 | bg: _selectedBg[colorMode],
|
132 | color: _selectedColor[colorMode],
|
133 | borderColor: "inherit",
|
134 | borderTopColor: "currentColor",
|
135 | borderBottomColor: "transparent"
|
136 | }
|
137 | },
|
138 | tabList: {
|
139 | mb: "-1px",
|
140 | borderBottom: "1px",
|
141 | borderColor: "inherit"
|
142 | }
|
143 | };
|
144 | };
|
145 |
|
146 | var softRoundedStyle = function softRoundedStyle(_ref4) {
|
147 | var color = _ref4.color;
|
148 | return {
|
149 | tab: {
|
150 | rounded: "full",
|
151 | fontWeight: "semibold",
|
152 | color: "gray.600",
|
153 | _selected: {
|
154 | color: color + ".700",
|
155 | bg: color + ".100"
|
156 | }
|
157 | },
|
158 | tabList: {}
|
159 | };
|
160 | };
|
161 |
|
162 | var solidRoundedStyle = function solidRoundedStyle(_ref5) {
|
163 | var color = _ref5.color,
|
164 | colorMode = _ref5.colorMode;
|
165 | var _color = {
|
166 | light: "gray.600",
|
167 | dark: "inherit"
|
168 | };
|
169 | var _selectedBg = {
|
170 | light: color + ".600",
|
171 | dark: color + ".300"
|
172 | };
|
173 | var _selectedColor = {
|
174 | light: "#fff",
|
175 | dark: "gray.800"
|
176 | };
|
177 | return {
|
178 | tab: {
|
179 | rounded: "full",
|
180 | fontWeight: "semibold",
|
181 | color: _color[colorMode],
|
182 | _selected: {
|
183 | color: _selectedColor[colorMode],
|
184 | bg: _selectedBg[colorMode]
|
185 | }
|
186 | },
|
187 | tabList: {}
|
188 | };
|
189 | };
|
190 |
|
191 | var variantStyle = function variantStyle(props) {
|
192 | switch (props.variant) {
|
193 | case "line":
|
194 | return lineStyle(props);
|
195 |
|
196 | case "enclosed":
|
197 | return enclosedStyle(props);
|
198 |
|
199 | case "enclosed-colored":
|
200 | return enclosedColoredStyle(props);
|
201 |
|
202 | case "soft-rounded":
|
203 | return softRoundedStyle(props);
|
204 |
|
205 | case "solid-rounded":
|
206 | return solidRoundedStyle(props);
|
207 |
|
208 | case "unstyled":
|
209 | return {};
|
210 |
|
211 | default:
|
212 | break;
|
213 | }
|
214 | };
|
215 |
|
216 |
|
217 | exports.variantStyle = variantStyle;
|
218 |
|
219 | var orientationStyle = function orientationStyle(_ref6) {
|
220 | var align = _ref6.align,
|
221 | orientation = _ref6.orientation;
|
222 | var alignments = {
|
223 | end: "flex-end",
|
224 | center: "center",
|
225 | start: "flex-start"
|
226 | };
|
227 | var tabListStyle;
|
228 | var tabStyle;
|
229 |
|
230 | if (orientation === "horizontal") {
|
231 | tabListStyle = {
|
232 | alignItems: "center",
|
233 | justifyContent: alignments[align],
|
234 | maxWidth: "full"
|
235 | };
|
236 | tabStyle = {
|
237 | height: "100%"
|
238 | };
|
239 | }
|
240 |
|
241 | if (orientation === "vertical") {
|
242 | tabListStyle = {
|
243 | flexDirection: "column"
|
244 | };
|
245 | tabStyle = {
|
246 | width: "100%"
|
247 | };
|
248 | }
|
249 |
|
250 | return {
|
251 | tabList: tabListStyle,
|
252 | tab: tabStyle
|
253 | };
|
254 | };
|
255 |
|
256 | exports.orientationStyle = orientationStyle;
|
257 | var tabSizes = {
|
258 | sm: {
|
259 | padding: "0.25rem 1rem",
|
260 | fontSize: "0.85rem"
|
261 | },
|
262 | md: {
|
263 | fontSize: "1rem",
|
264 | padding: "0.5rem 1rem"
|
265 | },
|
266 | lg: {
|
267 | fontSize: "1.15rem",
|
268 | padding: "0.75rem 1rem"
|
269 | }
|
270 | };
|
271 |
|
272 | var useTabStyle = function useTabStyle() {
|
273 | var theme = (0, _ThemeProvider.useTheme)();
|
274 |
|
275 | var _useContext = (0, _react.useContext)(_.TabContext),
|
276 | variant = _useContext.variant,
|
277 | color = _useContext.color,
|
278 | size = _useContext.size,
|
279 | isFitted = _useContext.isFitted,
|
280 | orientation = _useContext.orientation;
|
281 |
|
282 | var _useColorMode = (0, _ColorModeProvider.useColorMode)(),
|
283 | colorMode = _useColorMode.colorMode;
|
284 |
|
285 | var _variantStyle = variantStyle({
|
286 | variant: variant,
|
287 | color: color,
|
288 | theme: theme,
|
289 | colorMode: colorMode
|
290 | });
|
291 |
|
292 | var _orientationStyle = orientationStyle({
|
293 | orientation: orientation
|
294 | });
|
295 |
|
296 | return _objectSpread({}, baseProps, {}, disabledProps, {}, tabSizes[size], {}, _variantStyle && _variantStyle.tab, {}, _orientationStyle && _orientationStyle.tab, {}, isFitted && {
|
297 | flex: 1
|
298 | });
|
299 | };
|
300 |
|
301 | exports.useTabStyle = useTabStyle;
|
302 |
|
303 | var useTabListStyle = function useTabListStyle() {
|
304 | var theme = (0, _ThemeProvider.useTheme)();
|
305 |
|
306 | var _useContext2 = (0, _react.useContext)(_.TabContext),
|
307 | variant = _useContext2.variant,
|
308 | align = _useContext2.align,
|
309 | orientation = _useContext2.orientation;
|
310 |
|
311 | var _variantStyle = variantStyle({
|
312 | variant: variant,
|
313 | theme: theme
|
314 | });
|
315 |
|
316 | var _orientationStyle = orientationStyle({
|
317 | align: align,
|
318 | orientation: orientation
|
319 | });
|
320 |
|
321 | return _objectSpread({}, _variantStyle && _variantStyle.tabList, {}, _orientationStyle && _orientationStyle.tabList);
|
322 | };
|
323 |
|
324 | exports.useTabListStyle = useTabListStyle; |
\ | No newline at end of file |