1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.StyledTabPanel = exports.StyledTabHighlight = exports.StyledTabBorder = exports.StyledArtworkContainer = exports.StyledTab = exports.StyledTabList = exports.StyledRoot = void 0;
|
7 |
|
8 | var _index = require("../styles/index.js");
|
9 |
|
10 | var _constants = require("./constants.js");
|
11 |
|
12 | var _utils = require("./utils.js");
|
13 |
|
14 | 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; }
|
15 |
|
16 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
17 |
|
18 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
19 |
|
20 | var StyledRoot = (0, _index.styled)('div', function (_ref) {
|
21 | var $theme = _ref.$theme,
|
22 | _ref$$orientation = _ref.$orientation,
|
23 | $orientation = _ref$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref$$orientation;
|
24 | var style = {
|
25 |
|
26 |
|
27 | transform: 'scale(1)'
|
28 | };
|
29 |
|
30 | if ((0, _utils.isVertical)($orientation)) {
|
31 | style.display = 'flex';
|
32 | }
|
33 |
|
34 | return style;
|
35 | });
|
36 | exports.StyledRoot = StyledRoot;
|
37 | StyledRoot.displayName = "StyledRoot";
|
38 | var StyledTabList = (0, _index.styled)('div', function (_ref2) {
|
39 | var $theme = _ref2.$theme,
|
40 | _ref2$$fill = _ref2.$fill,
|
41 | $fill = _ref2$$fill === void 0 ? _constants.FILL.intrinsic : _ref2$$fill,
|
42 | _ref2$$orientation = _ref2.$orientation,
|
43 | $orientation = _ref2$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref2$$orientation;
|
44 | var style = {
|
45 | position: 'relative',
|
46 | display: 'flex',
|
47 | flexWrap: 'nowrap'
|
48 | };
|
49 |
|
50 | if ((0, _utils.isHorizontal)($orientation)) {
|
51 | style.flexDirection = 'row';
|
52 | style.paddingBottom = '5px';
|
53 | style.marginBottom = '-5px';
|
54 | } else {
|
55 | style.flexDirection = 'column';
|
56 |
|
57 | if ((0, _utils.isRTL)($theme.direction)) {
|
58 | style.paddingLeft = '5px';
|
59 | style.marginLeft = '-5px';
|
60 | } else {
|
61 | style.paddingRight = '5px';
|
62 | style.marginRight = '-5px';
|
63 | }
|
64 | }
|
65 |
|
66 | if ((0, _utils.isIntrinsic)($fill)) {
|
67 | style['::-webkit-scrollbar'] = {
|
68 | display: 'none'
|
69 | };
|
70 |
|
71 | style['-ms-overflow-style'] = 'none';
|
72 | style.scrollbarWidth = 'none';
|
73 |
|
74 | if ((0, _utils.isHorizontal)($orientation)) {
|
75 | style.overflowX = 'scroll';
|
76 | } else {
|
77 | style.overflowY = 'scroll';
|
78 | }
|
79 | }
|
80 |
|
81 | return style;
|
82 | });
|
83 | exports.StyledTabList = StyledTabList;
|
84 | StyledTabList.displayName = "StyledTabList";
|
85 | var StyledTab = (0, _index.styled)('button', function (_ref3) {
|
86 | var $theme = _ref3.$theme,
|
87 | _ref3$$orientation = _ref3.$orientation,
|
88 | $orientation = _ref3$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref3$$orientation,
|
89 | _ref3$$fill = _ref3.$fill,
|
90 | $fill = _ref3$$fill === void 0 ? _constants.FILL.intrinsic : _ref3$$fill,
|
91 | _ref3$$focusVisible = _ref3.$focusVisible,
|
92 | $focusVisible = _ref3$$focusVisible === void 0 ? false : _ref3$$focusVisible,
|
93 | _ref3$$isActive = _ref3.$isActive,
|
94 | $isActive = _ref3$$isActive === void 0 ? false : _ref3$$isActive;
|
95 |
|
96 | var style = _objectSpread({
|
97 | cursor: 'pointer',
|
98 | WebkitAppearance: 'none',
|
99 | marginLeft: '0',
|
100 | marginRight: '0',
|
101 | marginTop: '0',
|
102 | marginBottom: '0',
|
103 | boxSizing: 'border-box',
|
104 | display: 'inline-flex',
|
105 | alignItems: 'center',
|
106 | paddingLeft: $theme.sizing.scale600,
|
107 | paddingTop: $theme.sizing.scale600,
|
108 | paddingRight: $theme.sizing.scale600,
|
109 | paddingBottom: $theme.sizing.scale600,
|
110 | borderLeftWidth: 0,
|
111 | borderTopWidth: 0,
|
112 | borderRightWidth: 0,
|
113 | borderBottomWidth: 0,
|
114 | borderLeftStyle: 'none',
|
115 | borderTopStyle: 'none',
|
116 | borderRightStyle: 'none',
|
117 | borderBottomStyle: 'none',
|
118 | color: $theme.colors.contentPrimary,
|
119 | background: $theme.colors.backgroundPrimary,
|
120 | transitionProperty: 'background',
|
121 | transitionDuration: $theme.animation.timing200,
|
122 | transitionTimingFunction: $theme.animation.linearCurve,
|
123 | outline: 'none',
|
124 | outlineOffset: '-3px',
|
125 | ':disabled': {
|
126 | cursor: 'not-allowed',
|
127 | color: $theme.colors.contentStateDisabled
|
128 | },
|
129 | ':hover': {
|
130 | background: $theme.colors.backgroundSecondary
|
131 | },
|
132 | ':disabled:hover': {
|
133 | background: 'none'
|
134 | }
|
135 | }, $theme.typography.LabelSmall);
|
136 |
|
137 | if ($focusVisible) {
|
138 | style.outline = "3px solid ".concat($theme.colors.accent);
|
139 | }
|
140 |
|
141 | if ((0, _utils.isFixed)($fill)) {
|
142 | style.flexGrow = 1;
|
143 | style.flexBasis = 0;
|
144 | }
|
145 |
|
146 | if ((0, _utils.isHorizontal)($orientation)) {
|
147 | style.justifyContent = 'center';
|
148 | } else {
|
149 | style.justifyContent = 'flex-end';
|
150 | }
|
151 |
|
152 | return style;
|
153 | });
|
154 | exports.StyledTab = StyledTab;
|
155 | StyledTab.displayName = "StyledTab";
|
156 | var StyledArtworkContainer = (0, _index.styled)('div', function (_ref4) {
|
157 | var $theme = _ref4.$theme,
|
158 | _ref4$$orientation = _ref4.$orientation,
|
159 | $orientation = _ref4$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref4$$orientation;
|
160 | var style = {
|
161 | display: 'flex'
|
162 | };
|
163 |
|
164 | if ((0, _utils.isRTL)($theme.direction)) {
|
165 | style.marginLeft = $theme.sizing.scale300;
|
166 | } else {
|
167 | style.marginRight = $theme.sizing.scale300;
|
168 | }
|
169 |
|
170 | return style;
|
171 | });
|
172 | exports.StyledArtworkContainer = StyledArtworkContainer;
|
173 | StyledArtworkContainer.displayName = "StyledArtworkContainer";
|
174 | var StyledTabBorder = (0, _index.styled)('div', function (_ref5) {
|
175 | var $theme = _ref5.$theme,
|
176 | _ref5$$orientation = _ref5.$orientation,
|
177 | $orientation = _ref5$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref5$$orientation;
|
178 | var style = {
|
179 | backgroundColor: $theme.colors.borderOpaque,
|
180 | position: 'relative'
|
181 | };
|
182 |
|
183 | if ((0, _utils.isHorizontal)($orientation)) {
|
184 | style.height = '5px';
|
185 | } else {
|
186 | style.width = '5px';
|
187 | }
|
188 |
|
189 | return style;
|
190 | });
|
191 | exports.StyledTabBorder = StyledTabBorder;
|
192 | StyledTabBorder.displayName = "StyledTabBorder";
|
193 | var StyledTabHighlight = (0, _index.styled)('div', function (_ref6) {
|
194 | var $theme = _ref6.$theme,
|
195 | _ref6$$orientation = _ref6.$orientation,
|
196 | $orientation = _ref6$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref6$$orientation,
|
197 | _ref6$$length = _ref6.$length,
|
198 | $length = _ref6$$length === void 0 ? 0 : _ref6$$length,
|
199 | _ref6$$distance = _ref6.$distance,
|
200 | $distance = _ref6$$distance === void 0 ? 0 : _ref6$$distance,
|
201 | _ref6$$animate = _ref6.$animate,
|
202 | $animate = _ref6$$animate === void 0 ? false : _ref6$$animate;
|
203 | var style = {
|
204 | backgroundColor: $theme.colors.borderSelected,
|
205 | position: 'absolute',
|
206 | zIndex: 1
|
207 | };
|
208 |
|
209 | if ((0, _utils.isHorizontal)($orientation)) {
|
210 | style.bottom = '0px';
|
211 | style.left = '0px';
|
212 | style.height = '5px';
|
213 | style.width = "".concat($length, "px");
|
214 | style.transform = "translateX(".concat($distance, "px)");
|
215 | } else {
|
216 | style.transform = "translateY(".concat($distance, "px)");
|
217 | style.width = '5px';
|
218 | style.height = "".concat($length, "px");
|
219 |
|
220 | if ((0, _utils.isRTL)($theme.direction)) {
|
221 | style.left = '0px';
|
222 | } else {
|
223 | style.right = '0px';
|
224 | }
|
225 | }
|
226 |
|
227 | if ($animate) {
|
228 | style.transitionProperty = 'all';
|
229 | style.transitionDuration = $theme.animation.timing400;
|
230 | style.transitionTimingFunction = $theme.animation.easeInOutQuinticCurve;
|
231 | }
|
232 |
|
233 | return style;
|
234 | });
|
235 | exports.StyledTabHighlight = StyledTabHighlight;
|
236 | StyledTabHighlight.displayName = "StyledTabHighlight";
|
237 | var StyledTabPanel = (0, _index.styled)('div', function (_ref7) {
|
238 | var $theme = _ref7.$theme,
|
239 | _ref7$$pad = _ref7.$pad,
|
240 | $pad = _ref7$$pad === void 0 ? true : _ref7$$pad;
|
241 | var style = {
|
242 | flexGrow: 1,
|
243 |
|
244 | outline: 'none'
|
245 | };
|
246 |
|
247 | if ($pad) {
|
248 | style.paddingTop = $theme.sizing.scale600;
|
249 | style.paddingRight = $theme.sizing.scale600;
|
250 | style.paddingBottom = $theme.sizing.scale600;
|
251 | style.paddingLeft = $theme.sizing.scale600;
|
252 | }
|
253 |
|
254 | return style;
|
255 | });
|
256 | exports.StyledTabPanel = StyledTabPanel;
|
257 | StyledTabPanel.displayName = "StyledTabPanel"; |
\ | No newline at end of file |