@activecollab/components 2.0.179 → 2.0.181
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.
- package/dist/cjs/components/Nav/Nav.js +60 -196
- package/dist/cjs/components/Nav/Nav.js.map +1 -1
- package/dist/cjs/components/Nav/Styles.js +1 -1
- package/dist/cjs/components/Nav/Styles.js.map +1 -1
- package/dist/esm/components/Nav/Nav.d.ts +3 -9
- package/dist/esm/components/Nav/Nav.d.ts.map +1 -1
- package/dist/esm/components/Nav/Nav.js +52 -172
- package/dist/esm/components/Nav/Nav.js.map +1 -1
- package/dist/esm/components/Nav/Styles.d.ts.map +1 -1
- package/dist/esm/components/Nav/Styles.js +1 -1
- package/dist/esm/components/Nav/Styles.js.map +1 -1
- package/dist/index.js +64 -200
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.Nav = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
-
var _lodash = _interopRequireDefault(require("lodash.debounce"));
|
|
10
|
-
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
|
|
11
9
|
var _Styles = require("./Item/Styles");
|
|
12
10
|
var _Styles2 = require("./Styles");
|
|
11
|
+
var _utils = require("../../utils");
|
|
13
12
|
var _ExpandSingle = require("../Expanders/ExpandSingle");
|
|
14
13
|
var _Select = require("../Select/Select");
|
|
15
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -22,75 +21,76 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
22
21
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
23
22
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
24
23
|
var Nav = exports.Nav = function Nav(_ref) {
|
|
24
|
+
var _dimensions$width, _childDimensions$widt;
|
|
25
25
|
var children = _ref.children,
|
|
26
26
|
_ref$alignment = _ref.alignment,
|
|
27
27
|
alignment = _ref$alignment === void 0 ? "left" : _ref$alignment,
|
|
28
28
|
onSelect = _ref.onSelect,
|
|
29
|
-
onMoreOptionSelect = _ref.onMoreOptionSelect,
|
|
30
29
|
className = _ref.className,
|
|
31
30
|
_ref$role = _ref.role,
|
|
32
31
|
role = _ref$role === void 0 ? "bold" : _ref$role,
|
|
33
|
-
|
|
34
|
-
_ref$type = _ref.type,
|
|
35
|
-
type = _ref$type === void 0 ? "inline" : _ref$type;
|
|
32
|
+
targetId = _ref.targetId;
|
|
36
33
|
var _useState = (0, _react.useState)(0),
|
|
37
34
|
_useState2 = _slicedToArray(_useState, 2),
|
|
38
35
|
active = _useState2[0],
|
|
39
36
|
setActive = _useState2[1];
|
|
40
|
-
var _useState3 = (0, _react.useState)(
|
|
37
|
+
var _useState3 = (0, _react.useState)(false),
|
|
41
38
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var _useState5 = (0, _react.useState)(
|
|
39
|
+
moreOpened = _useState4[0],
|
|
40
|
+
setMoreOpened = _useState4[1];
|
|
41
|
+
var _useState5 = (0, _react.useState)("inline"),
|
|
45
42
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
renderNavAsSelect = _useState10[0],
|
|
55
|
-
setRenderNavAsSelect = _useState10[1];
|
|
56
|
-
var _useState11 = (0, _react.useState)([]),
|
|
57
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
58
|
-
options = _useState12[0],
|
|
59
|
-
setOptions = _useState12[1];
|
|
60
|
-
var _useState13 = (0, _react.useState)(false),
|
|
61
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
62
|
-
moreOpened = _useState14[0],
|
|
63
|
-
setMoreOpened = _useState14[1];
|
|
64
|
-
var _useState15 = (0, _react.useState)(false),
|
|
65
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
66
|
-
isMounted = _useState16[0],
|
|
67
|
-
setIsMounted = _useState16[1];
|
|
43
|
+
type = _useState6[0],
|
|
44
|
+
setType = _useState6[1];
|
|
45
|
+
var setMoreOpen = (0, _react.useCallback)(function () {
|
|
46
|
+
return setMoreOpened(true);
|
|
47
|
+
}, []);
|
|
48
|
+
var setMoreClose = (0, _react.useCallback)(function () {
|
|
49
|
+
return setMoreOpened(false);
|
|
50
|
+
}, []);
|
|
68
51
|
var navItemNames = (0, _react.useMemo)(function () {
|
|
69
|
-
return children.map(function (item) {
|
|
70
|
-
|
|
71
|
-
|
|
52
|
+
return children ? _react.Children.toArray(children).map(function (item) {
|
|
53
|
+
var _item$props;
|
|
54
|
+
return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.name;
|
|
55
|
+
}) : [];
|
|
72
56
|
}, [children]);
|
|
73
57
|
var allOptions = (0, _react.useMemo)(function () {
|
|
74
|
-
return navItemNames.map(function (name, index) {
|
|
58
|
+
return navItemNames === null || navItemNames === void 0 ? void 0 : navItemNames.map(function (name, index) {
|
|
75
59
|
return {
|
|
76
60
|
id: index,
|
|
77
61
|
name: name
|
|
78
62
|
};
|
|
79
63
|
});
|
|
80
64
|
}, [navItemNames]);
|
|
81
|
-
|
|
82
|
-
// REFS
|
|
83
65
|
var navRef = (0, _react.useRef)(null);
|
|
84
|
-
var
|
|
85
|
-
var
|
|
66
|
+
var wrapRef = (0, _react.useRef)(null);
|
|
67
|
+
var dimensions = (0, _utils.useResizeObserver)(wrapRef);
|
|
68
|
+
var childDimensions = (0, _utils.useResizeObserver)(navRef);
|
|
69
|
+
var parentWidth = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : 0;
|
|
70
|
+
var childWidth = (_childDimensions$widt = childDimensions === null || childDimensions === void 0 ? void 0 : childDimensions.width) !== null && _childDimensions$widt !== void 0 ? _childDimensions$widt : 0;
|
|
71
|
+
var _useState7 = (0, _react.useState)(childWidth),
|
|
72
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
73
|
+
childrenWidth = _useState8[0],
|
|
74
|
+
setChildrenWidth = _useState8[1];
|
|
75
|
+
(0, _react.useLayoutEffect)(function () {
|
|
76
|
+
if (type === "inline") setChildrenWidth(childWidth);
|
|
77
|
+
}, [childWidth, type]);
|
|
86
78
|
var onClick = (0, _react.useCallback)(function (e) {
|
|
79
|
+
if (e.metaKey || e.ctrlKey) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
87
82
|
if (e.target && e.currentTarget.dataset.index && !e.currentTarget.dataset.disabled) {
|
|
88
83
|
var _index = Number(e.currentTarget.dataset.index);
|
|
89
84
|
setActive(_index);
|
|
90
85
|
if (onSelect) {
|
|
91
86
|
onSelect(_index);
|
|
92
87
|
}
|
|
93
|
-
|
|
88
|
+
}
|
|
89
|
+
}, [onSelect]);
|
|
90
|
+
var onMoreOptionClick = (0, _react.useCallback)(function (id) {
|
|
91
|
+
setActive(id);
|
|
92
|
+
if (onSelect) {
|
|
93
|
+
onSelect(id);
|
|
94
94
|
}
|
|
95
95
|
}, [onSelect]);
|
|
96
96
|
(0, _react.useMemo)(function () {
|
|
@@ -100,190 +100,54 @@ var Nav = exports.Nav = function Nav(_ref) {
|
|
|
100
100
|
}
|
|
101
101
|
});
|
|
102
102
|
}, [children]);
|
|
103
|
-
(0, _react.useLayoutEffect)(function () {
|
|
104
|
-
if (type === "inline" && measuringRender && isMounted) {
|
|
105
|
-
var _navRef$current;
|
|
106
|
-
var containerWidth = ((_navRef$current = navRef.current) === null || _navRef$current === void 0 ? void 0 : _navRef$current.offsetWidth) || 0;
|
|
107
|
-
var itemsWidth = Object.values(navItemsRefs.current).reduce(function (acc, item) {
|
|
108
|
-
var itemEl = item;
|
|
109
|
-
return acc + (itemEl ? itemEl.offsetWidth : 0);
|
|
110
|
-
}, 0);
|
|
111
|
-
|
|
112
|
-
// all tabs are visible
|
|
113
|
-
if (containerWidth >= itemsWidth) {
|
|
114
|
-
setVisibleTabIndexes(Array.from(navItemNames.keys()));
|
|
115
|
-
setMoreVisible(false);
|
|
116
|
-
setRenderNavAsSelect(false);
|
|
117
|
-
return setMeasuringRender(false);
|
|
118
|
-
}
|
|
119
|
-
setMoreVisible(true);
|
|
120
|
-
if (moreVisible) {
|
|
121
|
-
var _moreItemRef$current;
|
|
122
|
-
var moreItemWidth = ((_moreItemRef$current = moreItemRef.current) === null || _moreItemRef$current === void 0 ? void 0 : _moreItemRef$current.offsetWidth) || 0;
|
|
123
|
-
var firstItemWidth = navItemsRefs.current[0].offsetWidth;
|
|
124
|
-
|
|
125
|
-
// collapse Nav to Select, there is no enough room
|
|
126
|
-
if (containerWidth < moreItemWidth + firstItemWidth) {
|
|
127
|
-
setVisibleTabIndexes([]);
|
|
128
|
-
var _options = navItemNames.map(function (name, index) {
|
|
129
|
-
return {
|
|
130
|
-
id: index,
|
|
131
|
-
name: name
|
|
132
|
-
};
|
|
133
|
-
});
|
|
134
|
-
setOptions(_options);
|
|
135
|
-
setRenderNavAsSelect(true);
|
|
136
|
-
setMoreVisible(false);
|
|
137
|
-
return setMeasuringRender(false);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
// item(s) + More...
|
|
141
|
-
var visible = [];
|
|
142
|
-
var allWidth = 0;
|
|
143
|
-
Object.values(navItemsRefs.current).forEach(function (item, index) {
|
|
144
|
-
var liItem = item;
|
|
145
|
-
allWidth += liItem.offsetWidth;
|
|
146
|
-
if (moreItemWidth + allWidth <= containerWidth) {
|
|
147
|
-
visible.push(index);
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
setVisibleTabIndexes(visible);
|
|
151
|
-
var _options2 = navItemNames.map(function (name, index) {
|
|
152
|
-
return {
|
|
153
|
-
id: index,
|
|
154
|
-
name: name
|
|
155
|
-
};
|
|
156
|
-
}).filter(function (item) {
|
|
157
|
-
return !visible.includes(item.id);
|
|
158
|
-
});
|
|
159
|
-
setOptions(_options2);
|
|
160
|
-
setRenderNavAsSelect(false);
|
|
161
|
-
setMeasuringRender(false);
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}, [children, isMounted, measuringRender, moreVisible, navItemNames, type, visibleTabIndexes]);
|
|
165
|
-
(0, _react.useEffect)(function () {
|
|
166
|
-
if (type === "inline") {
|
|
167
|
-
var handleResize = (0, _lodash.default)(function () {
|
|
168
|
-
setMeasuringRender(true);
|
|
169
|
-
}, 300);
|
|
170
|
-
window.addEventListener("resize", handleResize);
|
|
171
|
-
return function () {
|
|
172
|
-
window.removeEventListener("resize", handleResize);
|
|
173
|
-
};
|
|
174
|
-
}
|
|
175
|
-
}, [type]);
|
|
176
|
-
|
|
177
|
-
// we are using observer to solve the problem of the initial rendering
|
|
178
|
-
(0, _react.useEffect)(function () {
|
|
179
|
-
if (type === "inline" && navRef.current) {
|
|
180
|
-
var resizeObserver = new _resizeObserverPolyfill.default(function (entries) {
|
|
181
|
-
for (var entry of entries) {
|
|
182
|
-
var contentRect = entry.contentRect;
|
|
183
|
-
var _contentRect$width = contentRect.width,
|
|
184
|
-
width = _contentRect$width === void 0 ? 0 : _contentRect$width;
|
|
185
|
-
if (width > 0) {
|
|
186
|
-
setMeasuringRender(true);
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
});
|
|
190
|
-
resizeObserver.observe(navRef.current);
|
|
191
|
-
setTimeout(function () {
|
|
192
|
-
if (navRef.current) {
|
|
193
|
-
resizeObserver.unobserve(navRef.current);
|
|
194
|
-
}
|
|
195
|
-
}, 2000);
|
|
196
|
-
return function () {
|
|
197
|
-
resizeObserver.disconnect();
|
|
198
|
-
};
|
|
199
|
-
}
|
|
200
|
-
}, [type]);
|
|
201
|
-
(0, _react.useEffect)(function () {
|
|
202
|
-
setMeasuringRender(true);
|
|
203
|
-
setIsMounted(true);
|
|
204
|
-
}, []);
|
|
205
|
-
var visibleTabs = (0, _react.useMemo)(function () {
|
|
206
|
-
var tabs = _react.Children.toArray(children);
|
|
207
|
-
if (measuringRender || !isMounted) {
|
|
208
|
-
return tabs;
|
|
209
|
-
} else {
|
|
210
|
-
return tabs.filter(function (child, index) {
|
|
211
|
-
return visibleTabIndexes.includes(index);
|
|
212
|
-
});
|
|
213
|
-
}
|
|
214
|
-
}, [children, isMounted, measuringRender, visibleTabIndexes]);
|
|
215
|
-
var onMoreOptionClick = (0, _react.useCallback)(function (id) {
|
|
216
|
-
setActive(id);
|
|
217
|
-
if (onMoreOptionSelect) {
|
|
218
|
-
onMoreOptionSelect(id);
|
|
219
|
-
}
|
|
220
|
-
setMeasuringRender(true);
|
|
221
|
-
}, [onMoreOptionSelect]);
|
|
222
103
|
var navAsSelect = (0, _react.useMemo)(function () {
|
|
223
|
-
return /*#__PURE__*/_react.default.createElement(_Styles2.StyledNavAsSelect,
|
|
104
|
+
return /*#__PURE__*/_react.default.createElement(_Styles2.StyledNavAsSelect, {
|
|
105
|
+
id: targetId
|
|
106
|
+
}, /*#__PURE__*/_react.default.createElement("span", null, navItemNames[active]), /*#__PURE__*/_react.default.createElement(_ExpandSingle.ExpandSingle, {
|
|
224
107
|
expanded: moreOpened,
|
|
225
108
|
fill: "currentColor"
|
|
226
109
|
}));
|
|
227
|
-
}, [active, moreOpened, navItemNames]);
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
110
|
+
}, [active, moreOpened, navItemNames, targetId]);
|
|
111
|
+
(0, _react.useEffect)(function () {
|
|
112
|
+
if (!navRef.current || !wrapRef.current) return;
|
|
113
|
+
if (childrenWidth >= parentWidth) {
|
|
114
|
+
setType("dropdown");
|
|
115
|
+
} else {
|
|
116
|
+
setType("inline");
|
|
117
|
+
}
|
|
118
|
+
}, [childrenWidth, parentWidth]);
|
|
119
|
+
if (!children) return;
|
|
234
120
|
return /*#__PURE__*/_react.default.createElement(_Styles2.StyledNav, {
|
|
235
121
|
className: (0, _classnames.default)("c-nav", className),
|
|
236
122
|
$align: alignment,
|
|
237
|
-
$role: role
|
|
123
|
+
$role: role,
|
|
124
|
+
ref: wrapRef
|
|
238
125
|
}, /*#__PURE__*/_react.default.createElement(_Styles2.StyledNavList, {
|
|
239
126
|
ref: navRef
|
|
240
|
-
}, type === "inline" &&
|
|
127
|
+
}, type === "inline" && _react.Children.toArray(children).map(function (child, index) {
|
|
241
128
|
var element = child;
|
|
242
129
|
return /*#__PURE__*/(0, _react.cloneElement)(element, {
|
|
243
130
|
active: index === active,
|
|
244
131
|
role,
|
|
245
|
-
ref: function ref(el) {
|
|
246
|
-
navItemsRefs.current[index] = el;
|
|
247
|
-
},
|
|
248
132
|
onClick,
|
|
249
133
|
"data-index": index,
|
|
250
134
|
"data-disabled": element.props.disabled
|
|
251
135
|
});
|
|
252
|
-
}), type === "
|
|
253
|
-
ref: moreItemRef,
|
|
136
|
+
}), type === "dropdown" ? /*#__PURE__*/_react.default.createElement(_Styles.StyledNavListItemMore, {
|
|
254
137
|
name: "More",
|
|
255
|
-
active:
|
|
256
|
-
role: role
|
|
257
|
-
}, /*#__PURE__*/_react.default.createElement(_Select.Select, {
|
|
258
|
-
selected: active,
|
|
259
|
-
target: /*#__PURE__*/_react.default.createElement(_Styles2.StyledNavAsMoreTarget, {
|
|
260
|
-
$role: role
|
|
261
|
-
}, moreLabel),
|
|
262
|
-
disabledInternalSort: true,
|
|
263
|
-
onChange: onMoreOptionClick,
|
|
264
|
-
options: options,
|
|
265
|
-
type: "single",
|
|
266
|
-
mode: "normal",
|
|
267
|
-
forceCloseMenu: true,
|
|
268
|
-
disableSearch: true,
|
|
269
|
-
keepSameOptionsOrder: true,
|
|
270
|
-
onSelectOpen: setMoreOpen,
|
|
271
|
-
onSelectClose: setMoreClose
|
|
272
|
-
})) : null, type === "dropdown" || renderNavAsSelect ? /*#__PURE__*/_react.default.createElement(_Styles.StyledNavListItemMore, {
|
|
273
|
-
name: "More",
|
|
274
|
-
active: visibleTabIndexes.indexOf(active) === -1,
|
|
138
|
+
active: Array.from(navItemNames.keys()).indexOf(active) === -1,
|
|
275
139
|
role: role
|
|
276
140
|
}, /*#__PURE__*/_react.default.createElement(_Select.Select, {
|
|
277
141
|
selected: active,
|
|
278
142
|
target: navAsSelect,
|
|
279
143
|
disabledInternalSort: true,
|
|
280
|
-
onChange: onMoreOptionClick,
|
|
281
144
|
options: allOptions,
|
|
282
145
|
type: "single",
|
|
283
146
|
mode: "normal",
|
|
284
147
|
forceCloseMenu: true,
|
|
285
148
|
disableSearch: true,
|
|
286
149
|
keepSameOptionsOrder: true,
|
|
150
|
+
onChange: onMoreOptionClick,
|
|
287
151
|
onSelectOpen: setMoreOpen,
|
|
288
152
|
onSelectClose: setMoreClose
|
|
289
153
|
})) : null));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_lodash","_resizeObserverPolyfill","_Styles","_Styles2","_ExpandSingle","_Select","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","length","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","Nav","exports","_ref","children","_ref$alignment","alignment","onSelect","onMoreOptionSelect","className","_ref$role","role","moreLabel","_ref$type","type","_useState","useState","_useState2","active","setActive","_useState3","_useState4","visibleTabIndexes","setVisibleTabIndexes","_useState5","_useState6","measuringRender","setMeasuringRender","_useState7","_useState8","moreVisible","setMoreVisible","_useState9","_useState10","renderNavAsSelect","setRenderNavAsSelect","_useState11","_useState12","options","setOptions","_useState13","_useState14","moreOpened","setMoreOpened","_useState15","_useState16","isMounted","setIsMounted","navItemNames","useMemo","map","item","props","allOptions","index","id","navRef","useRef","navItemsRefs","moreItemRef","onClick","useCallback","target","currentTarget","dataset","disabled","Number","Children","forEach","child","useLayoutEffect","_navRef$current","containerWidth","current","offsetWidth","itemsWidth","values","reduce","acc","itemEl","keys","_moreItemRef$current","moreItemWidth","firstItemWidth","visible","allWidth","liItem","filter","includes","useEffect","handleResize","debounce","window","addEventListener","removeEventListener","resizeObserver","ResizeObserver","entries","entry","contentRect","_contentRect$width","width","observe","setTimeout","unobserve","disconnect","visibleTabs","tabs","toArray","onMoreOptionClick","navAsSelect","createElement","StyledNavAsSelect","ExpandSingle","expanded","fill","setMoreOpen","setMoreClose","StyledNav","classNames","$align","$role","StyledNavList","ref","element","cloneElement","el","StyledNavListItemMore","indexOf","Select","selected","StyledNavAsMoreTarget","disabledInternalSort","onChange","mode","forceCloseMenu","disableSearch","keepSameOptionsOrder","onSelectOpen","onSelectClose","displayName"],"sources":["../../../../src/components/Nav/Nav.tsx"],"sourcesContent":["import React, {\n ReactElement,\n FC,\n ReactNode,\n useState,\n useRef,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n Children,\n cloneElement,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport debounce from \"lodash.debounce\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\nimport { ItemProps } from \"./Item/Item\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport {\n StyledNav,\n StyledNavAsMoreTarget,\n StyledNavAsSelect,\n StyledNavList,\n} from \"./Styles\";\nimport { ISyntheticEvent } from \"../../types\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\nimport { IOptionItemProps } from \"../Select/Option\";\nimport { Select } from \"../Select/Select\";\n\ntype NavType = \"inline\" | \"dropdown\";\nexport type NavAlignType = \"left\" | \"center\" | \"right\";\nexport type NavRoleType = \"bold\" | \"light\";\n\nexport interface INavProps {\n children: ReactElement<ItemProps>[];\n /** Function for changing active navs. */\n onSelect?: (index: number) => void;\n /** Function triggered when option in More... is selected */\n onMoreOptionSelect?: (index: number) => void;\n /** Aligment of nav component. */\n alignment?: NavAlignType;\n /** CSS classes. */\n className?: string;\n /** Role of nav component. */\n role?: NavRoleType;\n /** Label for More... item */\n moreLabel?: string;\n /** Nav type */\n type?: NavType;\n}\n\nexport const Nav: FC<INavProps> = ({\n children,\n alignment = \"left\",\n onSelect,\n onMoreOptionSelect,\n className,\n role = \"bold\",\n moreLabel,\n type = \"inline\",\n}) => {\n const [active, setActive] = useState(0);\n const [visibleTabIndexes, setVisibleTabIndexes] = useState<number[]>([]);\n const [measuringRender, setMeasuringRender] = useState(false);\n const [moreVisible, setMoreVisible] = useState(false);\n const [renderNavAsSelect, setRenderNavAsSelect] = useState(false);\n const [options, setOptions] = useState<IOptionItemProps[]>([]);\n const [moreOpened, setMoreOpened] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const navItemNames = useMemo(\n () => children.map((item) => item.props.name),\n [children]\n );\n\n const allOptions = useMemo(() => {\n return navItemNames.map((name, index) => {\n return { id: index, name: name };\n });\n }, [navItemNames]);\n\n // REFS\n const navRef = useRef<HTMLUListElement | null>(null);\n const navItemsRefs = useRef<\n { index: number; element: HTMLLIElement } | Record<string, unknown>\n >({});\n const moreItemRef = useRef<HTMLLIElement | null>(null);\n\n const onClick = useCallback(\n (e: ISyntheticEvent) => {\n if (\n e.target &&\n e.currentTarget.dataset.index &&\n !e.currentTarget.dataset.disabled\n ) {\n const index = Number(e.currentTarget.dataset.index);\n setActive(index);\n if (onSelect) {\n onSelect(index);\n }\n setMeasuringRender(true);\n }\n },\n [onSelect]\n );\n\n useMemo(() => {\n Children.forEach(\n children as ReactElement[],\n (child: ReactElement, index) => {\n if (child && child.props.active) {\n setActive(index);\n }\n }\n );\n }, [children]);\n\n useLayoutEffect(() => {\n if (type === \"inline\" && measuringRender && isMounted) {\n const containerWidth = navRef.current?.offsetWidth || 0;\n const itemsWidth = Object.values(navItemsRefs.current).reduce(\n (acc: number, item) => {\n const itemEl = item as HTMLLIElement;\n return acc + (itemEl ? itemEl.offsetWidth : 0);\n },\n 0\n );\n\n // all tabs are visible\n if (containerWidth >= itemsWidth) {\n setVisibleTabIndexes(Array.from(navItemNames.keys()));\n setMoreVisible(false);\n setRenderNavAsSelect(false);\n return setMeasuringRender(false);\n }\n\n setMoreVisible(true);\n\n if (moreVisible) {\n const moreItemWidth = moreItemRef.current?.offsetWidth || 0;\n const firstItemWidth = navItemsRefs.current[0].offsetWidth;\n\n // collapse Nav to Select, there is no enough room\n if (containerWidth < moreItemWidth + firstItemWidth) {\n setVisibleTabIndexes([]);\n const options = navItemNames.map((name, index) => {\n return { id: index, name: name };\n });\n setOptions(options);\n setRenderNavAsSelect(true);\n setMoreVisible(false);\n return setMeasuringRender(false);\n }\n\n // item(s) + More...\n const visible: number[] = [];\n let allWidth = 0;\n Object.values(navItemsRefs.current).forEach((item, index) => {\n const liItem = item as HTMLLIElement;\n allWidth += liItem.offsetWidth;\n if (moreItemWidth + allWidth <= containerWidth) {\n visible.push(index);\n }\n });\n setVisibleTabIndexes(visible);\n const options = navItemNames\n .map((name, index) => {\n return { id: index, name: name };\n })\n .filter((item) => !visible.includes(item.id));\n setOptions(options);\n setRenderNavAsSelect(false);\n setMeasuringRender(false);\n }\n }\n }, [\n children,\n isMounted,\n measuringRender,\n moreVisible,\n navItemNames,\n type,\n visibleTabIndexes,\n ]);\n\n useEffect(() => {\n if (type === \"inline\") {\n const handleResize = debounce((): void => {\n setMeasuringRender(true);\n }, 300);\n window.addEventListener(\"resize\", handleResize);\n return (): void => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }\n }, [type]);\n\n // we are using observer to solve the problem of the initial rendering\n useEffect(() => {\n if (type === \"inline\" && navRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const { contentRect } = entry;\n const { width = 0 } = contentRect;\n if (width > 0) {\n setMeasuringRender(true);\n }\n }\n });\n\n resizeObserver.observe(navRef.current);\n\n setTimeout(() => {\n if (navRef.current) {\n resizeObserver.unobserve(navRef.current);\n }\n }, 2000);\n\n return (): void => {\n resizeObserver.disconnect();\n };\n }\n }, [type]);\n\n useEffect(() => {\n setMeasuringRender(true);\n setIsMounted(true);\n }, []);\n\n const visibleTabs = useMemo(() => {\n const tabs = Children.toArray(children);\n if (measuringRender || !isMounted) {\n return tabs;\n } else {\n return tabs.filter((child, index) => {\n return visibleTabIndexes.includes(index);\n });\n }\n }, [children, isMounted, measuringRender, visibleTabIndexes]);\n\n const onMoreOptionClick = useCallback(\n (id) => {\n setActive(id);\n if (onMoreOptionSelect) {\n onMoreOptionSelect(id);\n }\n setMeasuringRender(true);\n },\n [onMoreOptionSelect]\n );\n\n const navAsSelect = useMemo(() => {\n return (\n <StyledNavAsSelect>\n <span>{navItemNames[active]}</span>\n <ExpandSingle expanded={moreOpened} fill=\"currentColor\" />\n </StyledNavAsSelect>\n );\n }, [active, moreOpened, navItemNames]);\n\n const setMoreOpen = useCallback(() => setMoreOpened(true), []);\n const setMoreClose = useCallback(() => setMoreOpened(false), []);\n\n return (\n <StyledNav\n className={classNames(\"c-nav\", className)}\n $align={alignment}\n $role={role}\n >\n <StyledNavList ref={navRef}>\n {type === \"inline\" &&\n visibleTabs.map((child: ReactNode, index: number) => {\n const element = child as ReactElement;\n return cloneElement(element, {\n active: index === active,\n role,\n ref: (el) => {\n navItemsRefs.current[index] = el;\n },\n onClick,\n \"data-index\": index,\n \"data-disabled\": element.props.disabled,\n });\n })}\n {type === \"inline\" && moreVisible ? (\n <StyledNavListItemMore\n ref={moreItemRef}\n name=\"More\"\n active={visibleTabIndexes.indexOf(active) === -1}\n role={role}\n >\n <Select\n selected={active}\n target={\n <StyledNavAsMoreTarget $role={role}>\n {moreLabel}\n </StyledNavAsMoreTarget>\n }\n disabledInternalSort\n onChange={onMoreOptionClick}\n options={options}\n type=\"single\"\n mode=\"normal\"\n forceCloseMenu\n disableSearch\n keepSameOptionsOrder\n onSelectOpen={setMoreOpen}\n onSelectClose={setMoreClose}\n />\n </StyledNavListItemMore>\n ) : null}\n {type === \"dropdown\" || renderNavAsSelect ? (\n <StyledNavListItemMore\n name=\"More\"\n active={visibleTabIndexes.indexOf(active) === -1}\n role={role}\n >\n <Select\n selected={active}\n target={navAsSelect}\n disabledInternalSort\n onChange={onMoreOptionClick}\n options={allOptions}\n type=\"single\"\n mode=\"normal\"\n forceCloseMenu\n disableSearch\n keepSameOptionsOrder\n onSelectOpen={setMoreOpen}\n onSelectClose={setMoreClose}\n />\n </StyledNavListItemMore>\n ) : null}\n </StyledNavList>\n </StyledNav>\n );\n};\n\nNav.displayName = \"Nav\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Nav.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_Styles2","_utils","_ExpandSingle","_Select","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","length","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","Nav","exports","_ref","_dimensions$width","_childDimensions$widt","children","_ref$alignment","alignment","onSelect","className","_ref$role","role","targetId","_useState","useState","_useState2","active","setActive","_useState3","_useState4","moreOpened","setMoreOpened","_useState5","_useState6","type","setType","setMoreOpen","useCallback","setMoreClose","navItemNames","useMemo","Children","toArray","map","item","_item$props","props","allOptions","index","id","navRef","useRef","wrapRef","dimensions","useResizeObserver","childDimensions","parentWidth","width","childWidth","_useState7","_useState8","childrenWidth","setChildrenWidth","useLayoutEffect","onClick","metaKey","ctrlKey","target","currentTarget","dataset","disabled","Number","onMoreOptionClick","forEach","child","navAsSelect","createElement","StyledNavAsSelect","ExpandSingle","expanded","fill","useEffect","current","StyledNav","classNames","$align","$role","ref","StyledNavList","element","cloneElement","StyledNavListItemMore","keys","indexOf","Select","selected","disabledInternalSort","options","mode","forceCloseMenu","disableSearch","keepSameOptionsOrder","onChange","onSelectOpen","onSelectClose","displayName"],"sources":["../../../../src/components/Nav/Nav.tsx"],"sourcesContent":["import React, {\n ReactElement,\n FC,\n ReactNode,\n useState,\n useRef,\n useCallback,\n useMemo,\n Children,\n cloneElement,\n useEffect,\n useLayoutEffect,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { ItemProps } from \"./Item/Item\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport { StyledNav, StyledNavAsSelect, StyledNavList } from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\nimport { Select } from \"../Select/Select\";\n\ntype NavType = \"inline\" | \"dropdown\";\nexport type NavAlignType = \"left\" | \"center\" | \"right\";\nexport type NavRoleType = \"bold\" | \"light\";\n\nexport interface INavProps {\n children?: ReactElement<ItemProps>[];\n /** Function for changing active navs. */\n onSelect?: (index: number) => void;\n /** Aligment of nav component. */\n alignment?: NavAlignType;\n /** CSS classes. */\n className?: string;\n /** Role of nav component. */\n role?: NavRoleType;\n /** Target id */\n targetId?: string;\n}\n\nexport const Nav: FC<INavProps> = ({\n children,\n alignment = \"left\",\n onSelect,\n className,\n role = \"bold\",\n targetId,\n}) => {\n const [active, setActive] = useState(0);\n const [moreOpened, setMoreOpened] = useState(false);\n const [type, setType] = useState<NavType>(\"inline\");\n\n const setMoreOpen = useCallback(() => setMoreOpened(true), []);\n const setMoreClose = useCallback(() => setMoreOpened(false), []);\n\n const navItemNames = useMemo(() => {\n return children\n ? (Children.toArray(children) as ReactElement<ItemProps>[]).map(\n (item) => item?.props?.name\n )\n : [];\n }, [children]);\n\n const allOptions = useMemo(() => {\n return navItemNames?.map((name, index) => {\n return { id: index, name: name };\n });\n }, [navItemNames]);\n\n const navRef = useRef<HTMLUListElement | null>(null);\n const wrapRef = useRef<HTMLElement | null>(null);\n const dimensions = useResizeObserver(wrapRef);\n const childDimensions = useResizeObserver(navRef);\n\n const parentWidth = dimensions?.width ?? 0;\n const childWidth = childDimensions?.width ?? 0;\n\n const [childrenWidth, setChildrenWidth] = useState(childWidth);\n\n useLayoutEffect(() => {\n if (type === \"inline\") setChildrenWidth(childWidth);\n }, [childWidth, type]);\n\n const onClick = useCallback(\n (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (e.metaKey || e.ctrlKey) {\n return;\n }\n if (\n e.target &&\n e.currentTarget.dataset.index &&\n !e.currentTarget.dataset.disabled\n ) {\n const index = Number(e.currentTarget.dataset.index);\n setActive(index);\n if (onSelect) {\n onSelect(index);\n }\n }\n },\n [onSelect]\n );\n\n const onMoreOptionClick = useCallback(\n (id) => {\n setActive(id);\n if (onSelect) {\n onSelect(id);\n }\n },\n [onSelect]\n );\n\n useMemo(() => {\n Children.forEach(\n children as ReactElement[],\n (child: ReactElement, index) => {\n if (child && child.props.active) {\n setActive(index);\n }\n }\n );\n }, [children]);\n\n const navAsSelect = useMemo(() => {\n return (\n <StyledNavAsSelect id={targetId}>\n <span>{navItemNames[active]}</span>\n <ExpandSingle expanded={moreOpened} fill=\"currentColor\" />\n </StyledNavAsSelect>\n );\n }, [active, moreOpened, navItemNames, targetId]);\n\n useEffect(() => {\n if (!navRef.current || !wrapRef.current) return;\n\n if (childrenWidth >= parentWidth) {\n setType(\"dropdown\");\n } else {\n setType(\"inline\");\n }\n }, [childrenWidth, parentWidth]);\n\n if (!children) return;\n\n return (\n <StyledNav\n className={classNames(\"c-nav\", className)}\n $align={alignment}\n $role={role}\n ref={wrapRef}\n >\n <StyledNavList ref={navRef}>\n {type === \"inline\" &&\n Children.toArray(children).map((child: ReactNode, index: number) => {\n const element = child as ReactElement;\n return cloneElement(element, {\n active: index === active,\n role,\n onClick,\n \"data-index\": index,\n \"data-disabled\": element.props.disabled,\n });\n })}\n {type === \"dropdown\" ? (\n <StyledNavListItemMore\n name=\"More\"\n active={Array.from(navItemNames.keys()).indexOf(active) === -1}\n role={role}\n >\n <Select\n selected={active}\n target={navAsSelect}\n disabledInternalSort\n options={allOptions}\n type=\"single\"\n mode=\"normal\"\n forceCloseMenu\n disableSearch\n keepSameOptionsOrder\n onChange={onMoreOptionClick}\n onSelectOpen={setMoreOpen}\n onSelectClose={setMoreClose}\n />\n </StyledNavListItemMore>\n ) : null}\n </StyledNavList>\n </StyledNav>\n );\n};\n\nNav.displayName = \"Nav\";\n"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
10
10
|
var StyledNav = exports.StyledNav = _styledComponents.default.nav.withConfig({
|
|
11
11
|
displayName: "Styles__StyledNav",
|
|
12
12
|
componentId: "sc-1khiypw-0"
|
|
13
|
-
})(["", " height:100%;overflow:clip visible;", " ", " ", " ", ""], {
|
|
13
|
+
})(["", " height:100%;width:100%;overflow:clip visible;", " ", " ", " ", ""], {
|
|
14
14
|
"display": "flex"
|
|
15
15
|
}, function (props) {
|
|
16
16
|
return props.$align === "left" && (0, _styledComponents.css)(["", ""], {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledNav","exports","styled","nav","withConfig","displayName","componentId","props","$align","css","$role","StyledNavList","ul","StyledNavListItem","li","$disabled","$active","StyledNavAsSelect","div","StyledNavAsMoreTarget"],"sources":["../../../../src/components/Nav/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { NavAlignType, NavRoleType } from \"./Nav\";\n\ninterface StyledNavProps {\n $align?: NavAlignType;\n $role?: NavRoleType;\n}\n\nexport const StyledNav = styled.nav<StyledNavProps>`\n ${tw`tw-flex`}\n height: 100%;\n overflow: clip visible;\n\n ${(props) =>\n props.$align === \"left\" &&\n css`\n ${tw`tw-justify-start`}\n `}\n\n ${(props) =>\n props.$align === \"center\" &&\n css`\n ${tw`tw-justify-center`}\n `}\n\n ${(props) =>\n props.$align === \"right\" &&\n css`\n ${tw`tw-justify-end`}\n `}\n\n ${(props) =>\n props.$role === \"light\" &&\n css`\n height: auto;\n `}\n`;\n\nStyledNav.displayName = \"StyledNav\";\n\nexport const StyledNavList = styled.ul`\n ${tw`tw-flex tw-list-none tw-m-0 tw-p-0`}\n overflow: clip visible;\n`;\n\nStyledNavList.displayName = \"StyledNavList\";\n\ninterface StyledNavListItemProps {\n $active?: boolean;\n $disabled?: boolean;\n $role?: NavRoleType;\n $asMore?: boolean;\n}\n\nexport const StyledNavListItem = styled.li<StyledNavListItemProps>`\n ${tw`tw-text-sm tw-cursor-default tw-relative tw-select-none`}\n color: var(--color-theme-700);\n font-size: 15px;\n display: flex;\n align-items: center;\n font-weight: 500;\n padding: 0 10px;\n flex-shrink: 0;\n\n &:hover,\n &:hover * {\n ${(props) =>\n !props.$disabled &&\n css`\n ${tw`tw-text-primary`}\n `}\n }\n\n ${(props) =>\n !props.$active &&\n !props.$disabled &&\n css`\n ${tw`tw-cursor-pointer`}\n `}\n\n &::after {\n content: \"\";\n ${tw`tw-absolute tw-block tw-m-auto tw-w-0 tw-bg-transparent`}\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n height: 3px;\n transition: width 0.3s ease, background-color 0.3s ease;\n }\n\n ${(props) =>\n props.$active &&\n css`\n ${tw`tw-pointer-events-none`}\n &::after {\n ${tw`tw-w-full tw-bg-primary`}\n }\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n ${tw`tw-select-none tw-cursor-not-allowed tw-opacity-50`}\n `}\n\n ${(props) =>\n props.$role === \"light\" &&\n css`\n ${tw`tw-text-sm`}\n color: var(--color-theme-800);\n font-weight: 400;\n padding: 0 8px;\n\n &::after {\n bottom: -4px;\n height: 2px;\n }\n `}\n\n ${(props) =>\n props.$active &&\n css`\n ${tw`tw-text-primary`}\n & * {\n ${tw`tw-text-primary`}\n }\n `}\n`;\n\nStyledNavListItem.displayName = \"StyledNavListItem\";\n\nexport const StyledNavAsSelect = styled.div`\n padding: 0 10px;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg {\n color: var(--color-primary);\n }\n`;\n\nStyledNavAsSelect.displayName = \"StyledNavAsSelect\";\n\nexport const StyledNavAsMoreTarget = styled.div<{\n $role?: NavRoleType;\n}>`\n padding: 0 10px;\n height: 100%;\n display: flex;\n align-items: center;\n\n ${(props) =>\n props.$role === \"light\" &&\n css`\n padding: 0;\n `}\n`;\n\nStyledNavAsMoreTarget.displayName = \"StyledNavAsMoreTarget\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAUzC,IAAMY,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledNav","exports","styled","nav","withConfig","displayName","componentId","props","$align","css","$role","StyledNavList","ul","StyledNavListItem","li","$disabled","$active","StyledNavAsSelect","div","StyledNavAsMoreTarget"],"sources":["../../../../src/components/Nav/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { NavAlignType, NavRoleType } from \"./Nav\";\n\ninterface StyledNavProps {\n $align?: NavAlignType;\n $role?: NavRoleType;\n}\n\nexport const StyledNav = styled.nav<StyledNavProps>`\n ${tw`tw-flex`}\n height: 100%;\n width: 100%;\n overflow: clip visible;\n\n ${(props) =>\n props.$align === \"left\" &&\n css`\n ${tw`tw-justify-start`}\n `}\n\n ${(props) =>\n props.$align === \"center\" &&\n css`\n ${tw`tw-justify-center`}\n `}\n\n ${(props) =>\n props.$align === \"right\" &&\n css`\n ${tw`tw-justify-end`}\n `}\n\n ${(props) =>\n props.$role === \"light\" &&\n css`\n height: auto;\n `}\n`;\n\nStyledNav.displayName = \"StyledNav\";\n\nexport const StyledNavList = styled.ul`\n ${tw`tw-flex tw-list-none tw-m-0 tw-p-0`}\n overflow: clip visible;\n`;\n\nStyledNavList.displayName = \"StyledNavList\";\n\ninterface StyledNavListItemProps {\n $active?: boolean;\n $disabled?: boolean;\n $role?: NavRoleType;\n $asMore?: boolean;\n}\n\nexport const StyledNavListItem = styled.li<StyledNavListItemProps>`\n ${tw`tw-text-sm tw-cursor-default tw-relative tw-select-none`}\n color: var(--color-theme-700);\n font-size: 15px;\n display: flex;\n align-items: center;\n font-weight: 500;\n padding: 0 10px;\n flex-shrink: 0;\n\n &:hover,\n &:hover * {\n ${(props) =>\n !props.$disabled &&\n css`\n ${tw`tw-text-primary`}\n `}\n }\n\n ${(props) =>\n !props.$active &&\n !props.$disabled &&\n css`\n ${tw`tw-cursor-pointer`}\n `}\n\n &::after {\n content: \"\";\n ${tw`tw-absolute tw-block tw-m-auto tw-w-0 tw-bg-transparent`}\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n height: 3px;\n transition: width 0.3s ease, background-color 0.3s ease;\n }\n\n ${(props) =>\n props.$active &&\n css`\n ${tw`tw-pointer-events-none`}\n &::after {\n ${tw`tw-w-full tw-bg-primary`}\n }\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n ${tw`tw-select-none tw-cursor-not-allowed tw-opacity-50`}\n `}\n\n ${(props) =>\n props.$role === \"light\" &&\n css`\n ${tw`tw-text-sm`}\n color: var(--color-theme-800);\n font-weight: 400;\n padding: 0 8px;\n\n &::after {\n bottom: -4px;\n height: 2px;\n }\n `}\n\n ${(props) =>\n props.$active &&\n css`\n ${tw`tw-text-primary`}\n & * {\n ${tw`tw-text-primary`}\n }\n `}\n`;\n\nStyledNavListItem.displayName = \"StyledNavListItem\";\n\nexport const StyledNavAsSelect = styled.div`\n padding: 0 10px;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg {\n color: var(--color-primary);\n }\n`;\n\nStyledNavAsSelect.displayName = \"StyledNavAsSelect\";\n\nexport const StyledNavAsMoreTarget = styled.div<{\n $role?: NavRoleType;\n}>`\n padding: 0 10px;\n height: 100%;\n display: flex;\n align-items: center;\n\n ${(props) =>\n props.$role === \"light\" &&\n css`\n padding: 0;\n `}\n`;\n\nStyledNavAsMoreTarget.displayName = \"StyledNavAsMoreTarget\";\n"],"mappings":"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"}
|
|
@@ -1,25 +1,19 @@
|
|
|
1
1
|
import { ReactElement, FC } from "react";
|
|
2
2
|
import { ItemProps } from "./Item/Item";
|
|
3
|
-
type NavType = "inline" | "dropdown";
|
|
4
3
|
export type NavAlignType = "left" | "center" | "right";
|
|
5
4
|
export type NavRoleType = "bold" | "light";
|
|
6
5
|
export interface INavProps {
|
|
7
|
-
children
|
|
6
|
+
children?: ReactElement<ItemProps>[];
|
|
8
7
|
/** Function for changing active navs. */
|
|
9
8
|
onSelect?: (index: number) => void;
|
|
10
|
-
/** Function triggered when option in More... is selected */
|
|
11
|
-
onMoreOptionSelect?: (index: number) => void;
|
|
12
9
|
/** Aligment of nav component. */
|
|
13
10
|
alignment?: NavAlignType;
|
|
14
11
|
/** CSS classes. */
|
|
15
12
|
className?: string;
|
|
16
13
|
/** Role of nav component. */
|
|
17
14
|
role?: NavRoleType;
|
|
18
|
-
/**
|
|
19
|
-
|
|
20
|
-
/** Nav type */
|
|
21
|
-
type?: NavType;
|
|
15
|
+
/** Target id */
|
|
16
|
+
targetId?: string;
|
|
22
17
|
}
|
|
23
18
|
export declare const Nav: FC<INavProps>;
|
|
24
|
-
export {};
|
|
25
19
|
//# sourceMappingURL=Nav.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,YAAY,EACZ,EAAE,EAUH,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,YAAY,EACZ,EAAE,EAUH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQxC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;IACrC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,SAAS,CAqJ7B,CAAC"}
|