@canlooks/can-ui 0.0.153 → 0.0.155
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/tabs/tab.js +11 -10
- package/dist/cjs/components/tabs/tabs.js +2 -1
- package/dist/cjs/components/tabs/tabs.style.d.ts +1 -0
- package/dist/cjs/components/tabs/tabs.style.js +2 -5
- package/dist/cjs/components/transitionBase/collapse.js +14 -5
- package/dist/esm/components/tabs/tab.js +11 -10
- package/dist/esm/components/tabs/tabs.js +2 -1
- package/dist/esm/components/tabs/tabs.style.d.ts +1 -0
- package/dist/esm/components/tabs/tabs.style.js +2 -5
- package/dist/esm/components/transitionBase/collapse.js +14 -5
- package/package.json +1 -1
|
@@ -10,6 +10,7 @@ const button_1 = require("../button");
|
|
|
10
10
|
const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
|
|
11
11
|
const icon_1 = require("../icon");
|
|
12
12
|
const sortableItem_1 = require("../sortableItem");
|
|
13
|
+
const transitionBase_1 = require("../transitionBase");
|
|
13
14
|
exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }) => {
|
|
14
15
|
const context = (0, tabs_1.useTabsContext)();
|
|
15
16
|
const colorValue = (0, utils_1.useColor)(color ?? context.color);
|
|
@@ -19,14 +20,14 @@ exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, va
|
|
|
19
20
|
context.onClose?.(value);
|
|
20
21
|
};
|
|
21
22
|
const _sortable = sortable ?? context.sortable;
|
|
22
|
-
return ((0, jsx_runtime_1.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
23
|
+
return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { ...props, className: (0, utils_1.clsx)(tabs_style_1.classes.tabWrapper, props.className), component: transitionBase_1.Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.tab, style: {
|
|
24
|
+
borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
|
|
25
|
+
color: _active ? colorValue : void 0,
|
|
26
|
+
...props.style
|
|
27
|
+
}, "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: (e) => {
|
|
28
|
+
!disabled && props.onClick?.(e);
|
|
29
|
+
}, children: [!!prefix &&
|
|
30
|
+
(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabPrefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.label, children: label }), !!suffix &&
|
|
31
|
+
(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabSuffix, children: suffix }), _closable &&
|
|
32
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { className: tabs_style_1.classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }) }));
|
|
32
33
|
});
|
|
@@ -13,6 +13,7 @@ const tabsEllipsis_1 = require("./tabsEllipsis");
|
|
|
13
13
|
const lineIndicator_1 = require("./lineIndicator");
|
|
14
14
|
const core_1 = require("@dnd-kit/core");
|
|
15
15
|
const sortable_1 = require("@dnd-kit/sortable");
|
|
16
|
+
const react_transition_group_1 = require("react-transition-group");
|
|
16
17
|
const TabsContext = (0, react_2.createContext)({});
|
|
17
18
|
function useTabsContext() {
|
|
18
19
|
return (0, react_2.useContext)(TabsContext);
|
|
@@ -139,7 +140,7 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
|
|
|
139
140
|
}), [
|
|
140
141
|
color, variant, closable, onClose, sortable,
|
|
141
142
|
animating.current
|
|
142
|
-
]), children: [renderTabs(), variant === 'line' &&
|
|
143
|
+
]), children: [(0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { component: null, children: renderTabs() }), variant === 'line' &&
|
|
143
144
|
(0, jsx_runtime_1.jsx)(lineIndicator_1.LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }) }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
|
|
144
145
|
(0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.suffix, children: [(shadowStart || shadowEnd) &&
|
|
145
146
|
(0, jsx_runtime_1.jsx)(tabsEllipsis_1.TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
|
|
@@ -12,6 +12,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('tabs', [
|
|
|
12
12
|
'ellipsis',
|
|
13
13
|
'prefix',
|
|
14
14
|
'suffix',
|
|
15
|
+
'tabWrapper',
|
|
15
16
|
'tab',
|
|
16
17
|
'label',
|
|
17
18
|
'tabPrefix',
|
|
@@ -137,6 +138,7 @@ function useStyle({ color, variant }) {
|
|
|
137
138
|
overflow: hidden;
|
|
138
139
|
z-index: 1;
|
|
139
140
|
-webkit-tap-highlight-color: transparent;
|
|
141
|
+
transition: all .25s ${easing.easeOut};
|
|
140
142
|
|
|
141
143
|
&[data-orientation=vertical] {
|
|
142
144
|
flex-direction: column;
|
|
@@ -231,10 +233,6 @@ function useStyle({ color, variant }) {
|
|
|
231
233
|
gap: 0 ${spacing[10]}px;
|
|
232
234
|
}
|
|
233
235
|
|
|
234
|
-
.${exports.classes.tab} {
|
|
235
|
-
transition: color .25s ${easing.easeOut};
|
|
236
|
-
}
|
|
237
|
-
|
|
238
236
|
&[data-position=top],
|
|
239
237
|
&[data-position=bottom] {
|
|
240
238
|
.${exports.classes.tab} {
|
|
@@ -322,7 +320,6 @@ function useStyle({ color, variant }) {
|
|
|
322
320
|
.${exports.classes.tab} {
|
|
323
321
|
border: 1px solid ${gray(.1)};
|
|
324
322
|
background-color: ${background.body};
|
|
325
|
-
transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
|
|
326
323
|
|
|
327
324
|
&[data-active=true] {
|
|
328
325
|
background-color: ${background.content};
|
|
@@ -22,10 +22,19 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
|
|
|
22
22
|
return getCollapsedSize();
|
|
23
23
|
});
|
|
24
24
|
const [isEntered, setIsEntered] = (0, react_1.useState)(_in && !appear);
|
|
25
|
+
const styleProperty = orientation === 'vertical' ? 'height' : 'width';
|
|
25
26
|
const expand = () => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
const el = innerRef.current;
|
|
28
|
+
if (el) {
|
|
29
|
+
el.style.transition = 'none';
|
|
30
|
+
el.style[styleProperty] = 'auto';
|
|
31
|
+
const newSize = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
|
|
32
|
+
el.style[styleProperty] = size + 'px';
|
|
33
|
+
el.style.transition = '';
|
|
34
|
+
requestAnimationFrame(() => {
|
|
35
|
+
setSize(newSize);
|
|
36
|
+
});
|
|
37
|
+
}
|
|
29
38
|
};
|
|
30
39
|
const collapse = () => {
|
|
31
40
|
setIsEntered(false);
|
|
@@ -48,8 +57,8 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
|
|
|
48
57
|
: collapse();
|
|
49
58
|
}, [_in]);
|
|
50
59
|
return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, appear: appear, orientation: orientation, in: _in, ref: (0, utils_1.cloneRef)(ref, innerRef), style: {
|
|
51
|
-
[
|
|
52
|
-
...!isEntered
|
|
60
|
+
[styleProperty]: isEntered ? 'auto' : size,
|
|
61
|
+
...!isEntered && { overflow: 'hidden' },
|
|
53
62
|
...props.style
|
|
54
63
|
}, onEntered: () => setIsEntered(true) }));
|
|
55
64
|
};
|
|
@@ -7,6 +7,7 @@ import { Button } from '../button';
|
|
|
7
7
|
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
|
|
8
8
|
import { Icon } from '../icon';
|
|
9
9
|
import { SortableItem } from '../sortableItem';
|
|
10
|
+
import { Collapse } from '../transitionBase';
|
|
10
11
|
export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }) => {
|
|
11
12
|
const context = useTabsContext();
|
|
12
13
|
const colorValue = useColor(color ?? context.color);
|
|
@@ -16,14 +17,14 @@ export const Tab = memo(({ prefix, suffix, color, orientation, label, value, dis
|
|
|
16
17
|
context.onClose?.(value);
|
|
17
18
|
};
|
|
18
19
|
const _sortable = sortable ?? context.sortable;
|
|
19
|
-
return (
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
return (_jsx(SortableItem, { ...props, className: clsx(classes.tabWrapper, props.className), component: Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: _jsxs("div", { className: classes.tab, style: {
|
|
21
|
+
borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
|
|
22
|
+
color: _active ? colorValue : void 0,
|
|
23
|
+
...props.style
|
|
24
|
+
}, "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: (e) => {
|
|
25
|
+
!disabled && props.onClick?.(e);
|
|
26
|
+
}, children: [!!prefix &&
|
|
27
|
+
_jsx("div", { className: classes.tabPrefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
|
|
28
|
+
_jsx("div", { className: classes.tabSuffix, children: suffix }), _closable &&
|
|
29
|
+
_jsx(Button, { className: classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }) }));
|
|
29
30
|
});
|
|
@@ -9,6 +9,7 @@ import { TabsEllipsis } from './tabsEllipsis';
|
|
|
9
9
|
import { LineIndicator } from './lineIndicator';
|
|
10
10
|
import { DndContext } from '@dnd-kit/core';
|
|
11
11
|
import { SortableContext } from '@dnd-kit/sortable';
|
|
12
|
+
import { TransitionGroup } from 'react-transition-group';
|
|
12
13
|
const TabsContext = createContext({});
|
|
13
14
|
export function useTabsContext() {
|
|
14
15
|
return useContext(TabsContext);
|
|
@@ -135,7 +136,7 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
|
|
|
135
136
|
}), [
|
|
136
137
|
color, variant, closable, onClose, sortable,
|
|
137
138
|
animating.current
|
|
138
|
-
]), children: [renderTabs(), variant === 'line' &&
|
|
139
|
+
]), children: [_jsx(TransitionGroup, { component: null, children: renderTabs() }), variant === 'line' &&
|
|
139
140
|
_jsx(LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }) }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
|
|
140
141
|
_jsxs("div", { className: classes.suffix, children: [(shadowStart || shadowEnd) &&
|
|
141
142
|
_jsx(TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
|
|
@@ -8,6 +8,7 @@ export const classes = defineInnerClasses('tabs', [
|
|
|
8
8
|
'ellipsis',
|
|
9
9
|
'prefix',
|
|
10
10
|
'suffix',
|
|
11
|
+
'tabWrapper',
|
|
11
12
|
'tab',
|
|
12
13
|
'label',
|
|
13
14
|
'tabPrefix',
|
|
@@ -133,6 +134,7 @@ export function useStyle({ color, variant }) {
|
|
|
133
134
|
overflow: hidden;
|
|
134
135
|
z-index: 1;
|
|
135
136
|
-webkit-tap-highlight-color: transparent;
|
|
137
|
+
transition: all .25s ${easing.easeOut};
|
|
136
138
|
|
|
137
139
|
&[data-orientation=vertical] {
|
|
138
140
|
flex-direction: column;
|
|
@@ -227,10 +229,6 @@ export function useStyle({ color, variant }) {
|
|
|
227
229
|
gap: 0 ${spacing[10]}px;
|
|
228
230
|
}
|
|
229
231
|
|
|
230
|
-
.${classes.tab} {
|
|
231
|
-
transition: color .25s ${easing.easeOut};
|
|
232
|
-
}
|
|
233
|
-
|
|
234
232
|
&[data-position=top],
|
|
235
233
|
&[data-position=bottom] {
|
|
236
234
|
.${classes.tab} {
|
|
@@ -318,7 +316,6 @@ export function useStyle({ color, variant }) {
|
|
|
318
316
|
.${classes.tab} {
|
|
319
317
|
border: 1px solid ${gray(.1)};
|
|
320
318
|
background-color: ${background.body};
|
|
321
|
-
transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
|
|
322
319
|
|
|
323
320
|
&[data-active=true] {
|
|
324
321
|
background-color: ${background.content};
|
|
@@ -18,10 +18,19 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
|
|
|
18
18
|
return getCollapsedSize();
|
|
19
19
|
});
|
|
20
20
|
const [isEntered, setIsEntered] = useState(_in && !appear);
|
|
21
|
+
const styleProperty = orientation === 'vertical' ? 'height' : 'width';
|
|
21
22
|
const expand = () => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
const el = innerRef.current;
|
|
24
|
+
if (el) {
|
|
25
|
+
el.style.transition = 'none';
|
|
26
|
+
el.style[styleProperty] = 'auto';
|
|
27
|
+
const newSize = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
|
|
28
|
+
el.style[styleProperty] = size + 'px';
|
|
29
|
+
el.style.transition = '';
|
|
30
|
+
requestAnimationFrame(() => {
|
|
31
|
+
setSize(newSize);
|
|
32
|
+
});
|
|
33
|
+
}
|
|
25
34
|
};
|
|
26
35
|
const collapse = () => {
|
|
27
36
|
setIsEntered(false);
|
|
@@ -44,8 +53,8 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
|
|
|
44
53
|
: collapse();
|
|
45
54
|
}, [_in]);
|
|
46
55
|
return (_jsx(TransitionBase, { ...props, appear: appear, orientation: orientation, in: _in, ref: cloneRef(ref, innerRef), style: {
|
|
47
|
-
[
|
|
48
|
-
...!isEntered
|
|
56
|
+
[styleProperty]: isEntered ? 'auto' : size,
|
|
57
|
+
...!isEntered && { overflow: 'hidden' },
|
|
49
58
|
...props.style
|
|
50
59
|
}, onEntered: () => setIsEntered(true) }));
|
|
51
60
|
};
|