@toptal/picasso-tabs 5.0.15-alpha-MP-955-fix-section-closing-animation-d279e2398.0 → 5.0.15-alpha-ff-7-tabs-19babbfd6.8
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-package/src/Tab/Tab.d.ts +3 -3
- package/dist-package/src/Tab/Tab.d.ts.map +1 -1
- package/dist-package/src/Tab/Tab.js +62 -14
- package/dist-package/src/Tab/Tab.js.map +1 -1
- package/dist-package/src/Tabs/Tabs.d.ts +11 -8
- package/dist-package/src/Tabs/Tabs.d.ts.map +1 -1
- package/dist-package/src/Tabs/Tabs.js +53 -16
- package/dist-package/src/Tabs/Tabs.js.map +1 -1
- package/dist-package/src/TabsCompound/index.d.ts +2 -4
- package/dist-package/src/TabsCompound/index.d.ts.map +1 -1
- package/dist-package/src/index.d.ts +0 -1
- package/dist-package/src/index.d.ts.map +1 -1
- package/dist-package/src/index.js +0 -1
- package/dist-package/src/index.js.map +1 -1
- package/package.json +14 -13
- package/src/Tab/Tab.tsx +99 -21
- package/src/Tabs/Tabs.tsx +88 -37
- package/src/Tabs/__snapshots__/test.tsx.snap +56 -71
- package/src/Tabs/test.tsx +4 -4
- package/src/index.ts +0 -1
- package/dist-package/src/Tab/styles.d.ts +0 -4
- package/dist-package/src/Tab/styles.d.ts.map +0 -1
- package/dist-package/src/Tab/styles.js +0 -95
- package/dist-package/src/Tab/styles.js.map +0 -1
- package/dist-package/src/TabScrollButton/TabScrollButton.d.ts +0 -12
- package/dist-package/src/TabScrollButton/TabScrollButton.d.ts.map +0 -1
- package/dist-package/src/TabScrollButton/TabScrollButton.js +0 -30
- package/dist-package/src/TabScrollButton/TabScrollButton.js.map +0 -1
- package/dist-package/src/TabScrollButton/index.d.ts +0 -5
- package/dist-package/src/TabScrollButton/index.d.ts.map +0 -1
- package/dist-package/src/TabScrollButton/index.js +0 -2
- package/dist-package/src/TabScrollButton/index.js.map +0 -1
- package/dist-package/src/Tabs/styles.d.ts +0 -4
- package/dist-package/src/Tabs/styles.d.ts.map +0 -1
- package/dist-package/src/Tabs/styles.js +0 -41
- package/dist-package/src/Tabs/styles.js.map +0 -1
- package/dist-package/src/Tabs/use-tab-action.d.ts +0 -5
- package/dist-package/src/Tabs/use-tab-action.d.ts.map +0 -1
- package/dist-package/src/Tabs/use-tab-action.js +0 -21
- package/dist-package/src/Tabs/use-tab-action.js.map +0 -1
- package/src/Tab/styles.ts +0 -107
- package/src/TabScrollButton/TabScrollButton.tsx +0 -59
- package/src/TabScrollButton/index.ts +0 -6
- package/src/Tabs/styles.ts +0 -45
- package/src/Tabs/use-tab-action.ts +0 -27
@@ -1,30 +0,0 @@
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
-
var t = {};
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
-
t[p] = s[p];
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
-
t[p[i]] = s[p[i]];
|
9
|
-
}
|
10
|
-
return t;
|
11
|
-
};
|
12
|
-
import React, { forwardRef } from 'react';
|
13
|
-
import { ButtonBase } from '@material-ui/core';
|
14
|
-
import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons';
|
15
|
-
import { Container } from '@toptal/picasso-container';
|
16
|
-
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
17
|
-
export const TabScrollButton = forwardRef(function TabScrollButton(props, ref) {
|
18
|
-
const { className, style, direction, disabled } = props, rest = __rest(props, ["className", "style", "direction", "disabled"]);
|
19
|
-
if (disabled) {
|
20
|
-
return null;
|
21
|
-
}
|
22
|
-
return (React.createElement(Container, Object.assign({}, rest, { ref: ref, className: twMerge('relative', className), style: style }),
|
23
|
-
React.createElement(Container, { className: twMerge('absolute w-10 h-full z-10', direction === 'left'
|
24
|
-
? 'bg-gradient-to-r from-white via-white to-transparent'
|
25
|
-
: 'bg-gradient-to-l from-white via-white to-transparent', direction === 'left' ? 'left-0' : 'right-0') },
|
26
|
-
React.createElement(ButtonBase, { className: twMerge('absolute w-4 h-full', direction === 'left' ? 'left-0' : 'right-0'), "aria-label": `${direction} button`, "data-testid": `tab-scroll-button-${direction}` }, direction === 'left' ? React.createElement(BackMinor16, null) : React.createElement(ChevronMinor16, null)))));
|
27
|
-
});
|
28
|
-
TabScrollButton.displayName = 'TabScrollButton';
|
29
|
-
export default TabScrollButton;
|
30
|
-
//# sourceMappingURL=TabScrollButton.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"TabScrollButton.js","sourceRoot":"","sources":["../../../src/TabScrollButton/TabScrollButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1D,+CAAkD,CAAQ,CAAA;IAEhE,IAAI,QAAQ,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,EACzC,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAChB,2BAA2B,EAC3B,SAAS,KAAK,MAAM;gBAClB,CAAC,CAAC,sDAAsD;gBACxD,CAAC,CAAC,sDAAsD,EAC1D,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC5C;YAED,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAChB,qBAAqB,EACrB,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC5C,gBACW,GAAG,SAAS,SAAS,iBACpB,qBAAqB,SAAS,EAAE,IAE5C,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CACjD,CACH,CACF,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAE/C,eAAe,eAAe,CAAA"}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import type { OmitInternalProps } from '@toptal/picasso-shared';
|
2
|
-
import type { Props } from './TabScrollButton';
|
3
|
-
export { default as TabScrollButton } from './TabScrollButton';
|
4
|
-
export declare type TabScrollButtonProps = OmitInternalProps<Props>;
|
5
|
-
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,oBAAY,oBAAoB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCA6BxB,KAAK;AAAlC,wBAeI"}
|
@@ -1,41 +0,0 @@
|
|
1
|
-
import { createStyles } from '@material-ui/core/styles';
|
2
|
-
import { PicassoProvider } from '@toptal/picasso-provider';
|
3
|
-
PicassoProvider.override(({ palette }) => ({
|
4
|
-
MuiTabs: {
|
5
|
-
root: {
|
6
|
-
position: 'relative',
|
7
|
-
minHeight: 0,
|
8
|
-
},
|
9
|
-
vertical: {
|
10
|
-
width: 200,
|
11
|
-
margin: 0,
|
12
|
-
'& $scroller': {
|
13
|
-
// We need a bit of padding to allow active tab's shadow to be visible
|
14
|
-
paddingLeft: '0.5em',
|
15
|
-
},
|
16
|
-
'& $indicator': {
|
17
|
-
display: 'none',
|
18
|
-
},
|
19
|
-
},
|
20
|
-
indicator: {
|
21
|
-
backgroundColor: palette.blue.main,
|
22
|
-
zIndex: 1,
|
23
|
-
},
|
24
|
-
},
|
25
|
-
}));
|
26
|
-
export default ({ palette }) => createStyles({
|
27
|
-
horizontal: {
|
28
|
-
'&::after': {
|
29
|
-
position: 'absolute',
|
30
|
-
content: '""',
|
31
|
-
bottom: 0,
|
32
|
-
left: 0,
|
33
|
-
right: 0,
|
34
|
-
height: 1,
|
35
|
-
backgroundColor: palette.grey.main,
|
36
|
-
zIndex: 0,
|
37
|
-
},
|
38
|
-
},
|
39
|
-
vertical: {},
|
40
|
-
});
|
41
|
-
//# sourceMappingURL=styles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,CAAC;SACb;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;YACT,aAAa,EAAE;gBACb,sEAAsE;gBACtE,WAAW,EAAE,OAAO;aACrB;YAED,cAAc,EAAE;gBACd,OAAO,EAAE,MAAM;aAChB;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,UAAU,EAAE;QACV,UAAU,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;IACD,QAAQ,EAAE,EAAE;CACb,CAAC,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"use-tab-action.d.ts","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAOpD,QAAA,MAAM,YAAY,QAAO,IAAI,WAAW,CAevC,CAAA;AAED,eAAe,YAAY,CAAA"}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import { useEffect, useRef } from 'react';
|
2
|
-
/*
|
3
|
-
* MuiTabs break when the size of a tab changes without rendering with React.
|
4
|
-
* This issue happens when the font is loaded after the initial render of the component.
|
5
|
-
* To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
|
6
|
-
*/
|
7
|
-
const useTabAction = () => {
|
8
|
-
const ref = useRef(null);
|
9
|
-
useEffect(() => {
|
10
|
-
const listener = () => {
|
11
|
-
var _a, _b;
|
12
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.updateIndicator();
|
13
|
-
(_b = ref.current) === null || _b === void 0 ? void 0 : _b.updateScrollButtons();
|
14
|
-
};
|
15
|
-
window.addEventListener('load', listener);
|
16
|
-
return () => window.removeEventListener('load', listener);
|
17
|
-
}, []);
|
18
|
-
return ref;
|
19
|
-
};
|
20
|
-
export default useTabAction;
|
21
|
-
//# sourceMappingURL=use-tab-action.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"use-tab-action.js","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGzC;;;;GAIG;AACH,MAAM,YAAY,GAAG,GAAqB,EAAE;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;;YACpB,MAAA,GAAG,CAAC,OAAO,0CAAE,eAAe,EAAE,CAAA;YAC9B,MAAA,GAAG,CAAC,OAAO,0CAAE,mBAAmB,EAAE,CAAA;QACpC,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAEzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}
|
package/src/Tab/styles.ts
DELETED
@@ -1,107 +0,0 @@
|
|
1
|
-
import type { Theme } from '@material-ui/core/styles'
|
2
|
-
import { createStyles } from '@material-ui/core/styles'
|
3
|
-
import { rem } from '@toptal/picasso-shared'
|
4
|
-
import { PicassoProvider } from '@toptal/picasso-provider'
|
5
|
-
|
6
|
-
PicassoProvider.override(({ breakpoints, palette }: Theme) => ({
|
7
|
-
MuiTab: {
|
8
|
-
root: {
|
9
|
-
minHeight: 0,
|
10
|
-
minWidth: 0,
|
11
|
-
lineHeight: 1,
|
12
|
-
textTransform: 'none',
|
13
|
-
padding: `${rem('9px')} 0 ${rem('7px')}`,
|
14
|
-
overflow: 'initial',
|
15
|
-
|
16
|
-
[breakpoints.up('md')]: {
|
17
|
-
padding: undefined,
|
18
|
-
},
|
19
|
-
|
20
|
-
color: palette.grey.dark,
|
21
|
-
|
22
|
-
[breakpoints.up('md')]: {
|
23
|
-
minWidth: 'auto',
|
24
|
-
fontSize: '1rem',
|
25
|
-
},
|
26
|
-
},
|
27
|
-
labelIcon: {
|
28
|
-
minHeight: 0,
|
29
|
-
paddingRight: '1.5rem',
|
30
|
-
paddingTop: rem('9px'),
|
31
|
-
'& $wrapper > *:first-child': {
|
32
|
-
position: 'absolute',
|
33
|
-
right: 0,
|
34
|
-
marginBottom: 0,
|
35
|
-
},
|
36
|
-
},
|
37
|
-
selected: {
|
38
|
-
color: palette.common.black,
|
39
|
-
},
|
40
|
-
textColorInherit: {
|
41
|
-
'&$disabled': {
|
42
|
-
color: palette.grey.main,
|
43
|
-
},
|
44
|
-
},
|
45
|
-
disabled: {},
|
46
|
-
},
|
47
|
-
}))
|
48
|
-
|
49
|
-
export default ({ sizes, palette, shadows, transitions }: Theme) =>
|
50
|
-
createStyles({
|
51
|
-
horizontal: {
|
52
|
-
paddingTop: 0,
|
53
|
-
'&:not(:last-child)': {
|
54
|
-
marginRight: '2em',
|
55
|
-
},
|
56
|
-
},
|
57
|
-
vertical: {
|
58
|
-
width: '100%',
|
59
|
-
borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
|
60
|
-
margin: '0.25rem 0',
|
61
|
-
overflow: 'hidden',
|
62
|
-
padding: '0.5rem 1rem',
|
63
|
-
transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
|
64
|
-
textAlign: 'left',
|
65
|
-
backgroundColor: palette.grey.lighter,
|
66
|
-
opacity: 1,
|
67
|
-
color: palette.grey.dark,
|
68
|
-
|
69
|
-
'&:first-child': {
|
70
|
-
marginTop: '1rem',
|
71
|
-
},
|
72
|
-
|
73
|
-
'&:last-child': {
|
74
|
-
marginBottom: '1rem',
|
75
|
-
},
|
76
|
-
|
77
|
-
'&:hover': {
|
78
|
-
color: palette.common.black,
|
79
|
-
},
|
80
|
-
|
81
|
-
'&:hover:not($selected)': {
|
82
|
-
backgroundColor: palette.grey.lighter2,
|
83
|
-
},
|
84
|
-
|
85
|
-
'& $wrapper': {
|
86
|
-
display: 'block',
|
87
|
-
},
|
88
|
-
},
|
89
|
-
selected: {
|
90
|
-
'&$vertical': {
|
91
|
-
color: palette.common.black,
|
92
|
-
boxShadow: shadows[1],
|
93
|
-
backgroundColor: palette.grey.lightest,
|
94
|
-
|
95
|
-
'&::before': {
|
96
|
-
content: '""',
|
97
|
-
background: palette.blue.main,
|
98
|
-
position: 'absolute',
|
99
|
-
left: 0,
|
100
|
-
top: 0,
|
101
|
-
bottom: 0,
|
102
|
-
width: '3px',
|
103
|
-
},
|
104
|
-
},
|
105
|
-
},
|
106
|
-
wrapper: {},
|
107
|
-
})
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import React, { forwardRef } from 'react'
|
2
|
-
import { ButtonBase } from '@material-ui/core'
|
3
|
-
import type { BaseProps } from '@toptal/picasso-shared'
|
4
|
-
import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons'
|
5
|
-
import { Container } from '@toptal/picasso-container'
|
6
|
-
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
7
|
-
|
8
|
-
type DirectionType = 'left' | 'right'
|
9
|
-
|
10
|
-
export interface Props extends BaseProps {
|
11
|
-
/** The direction the button should indicate. */
|
12
|
-
direction: DirectionType
|
13
|
-
/** If `true`, the component is disabled. */
|
14
|
-
disabled?: boolean
|
15
|
-
}
|
16
|
-
|
17
|
-
export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
|
18
|
-
function TabScrollButton(props, ref) {
|
19
|
-
const { className, style, direction, disabled, ...rest } = props
|
20
|
-
|
21
|
-
if (disabled) {
|
22
|
-
return null
|
23
|
-
}
|
24
|
-
|
25
|
-
return (
|
26
|
-
<Container
|
27
|
-
{...rest}
|
28
|
-
ref={ref}
|
29
|
-
className={twMerge('relative', className)}
|
30
|
-
style={style}
|
31
|
-
>
|
32
|
-
<Container
|
33
|
-
className={twMerge(
|
34
|
-
'absolute w-10 h-full z-10',
|
35
|
-
direction === 'left'
|
36
|
-
? 'bg-gradient-to-r from-white via-white to-transparent'
|
37
|
-
: 'bg-gradient-to-l from-white via-white to-transparent',
|
38
|
-
direction === 'left' ? 'left-0' : 'right-0'
|
39
|
-
)}
|
40
|
-
>
|
41
|
-
<ButtonBase
|
42
|
-
className={twMerge(
|
43
|
-
'absolute w-4 h-full',
|
44
|
-
direction === 'left' ? 'left-0' : 'right-0'
|
45
|
-
)}
|
46
|
-
aria-label={`${direction} button`}
|
47
|
-
data-testid={`tab-scroll-button-${direction}`}
|
48
|
-
>
|
49
|
-
{direction === 'left' ? <BackMinor16 /> : <ChevronMinor16 />}
|
50
|
-
</ButtonBase>
|
51
|
-
</Container>
|
52
|
-
</Container>
|
53
|
-
)
|
54
|
-
}
|
55
|
-
)
|
56
|
-
|
57
|
-
TabScrollButton.displayName = 'TabScrollButton'
|
58
|
-
|
59
|
-
export default TabScrollButton
|
package/src/Tabs/styles.ts
DELETED
@@ -1,45 +0,0 @@
|
|
1
|
-
import type { Theme } from '@material-ui/core/styles'
|
2
|
-
import { createStyles } from '@material-ui/core/styles'
|
3
|
-
import { PicassoProvider } from '@toptal/picasso-provider'
|
4
|
-
|
5
|
-
PicassoProvider.override(({ palette }: Theme) => ({
|
6
|
-
MuiTabs: {
|
7
|
-
root: {
|
8
|
-
position: 'relative',
|
9
|
-
minHeight: 0,
|
10
|
-
},
|
11
|
-
vertical: {
|
12
|
-
width: 200,
|
13
|
-
margin: 0,
|
14
|
-
'& $scroller': {
|
15
|
-
// We need a bit of padding to allow active tab's shadow to be visible
|
16
|
-
paddingLeft: '0.5em',
|
17
|
-
},
|
18
|
-
|
19
|
-
'& $indicator': {
|
20
|
-
display: 'none',
|
21
|
-
},
|
22
|
-
},
|
23
|
-
indicator: {
|
24
|
-
backgroundColor: palette.blue.main,
|
25
|
-
zIndex: 1,
|
26
|
-
},
|
27
|
-
},
|
28
|
-
}))
|
29
|
-
|
30
|
-
export default ({ palette }: Theme) =>
|
31
|
-
createStyles({
|
32
|
-
horizontal: {
|
33
|
-
'&::after': {
|
34
|
-
position: 'absolute',
|
35
|
-
content: '""',
|
36
|
-
bottom: 0,
|
37
|
-
left: 0,
|
38
|
-
right: 0,
|
39
|
-
height: 1,
|
40
|
-
backgroundColor: palette.grey.main,
|
41
|
-
zIndex: 0,
|
42
|
-
},
|
43
|
-
},
|
44
|
-
vertical: {},
|
45
|
-
})
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import type { Ref } from 'react'
|
2
|
-
import { useEffect, useRef } from 'react'
|
3
|
-
import type { TabsActions } from '@material-ui/core'
|
4
|
-
|
5
|
-
/*
|
6
|
-
* MuiTabs break when the size of a tab changes without rendering with React.
|
7
|
-
* This issue happens when the font is loaded after the initial render of the component.
|
8
|
-
* To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
|
9
|
-
*/
|
10
|
-
const useTabAction = (): Ref<TabsActions> => {
|
11
|
-
const ref = useRef<TabsActions>(null)
|
12
|
-
|
13
|
-
useEffect(() => {
|
14
|
-
const listener = () => {
|
15
|
-
ref.current?.updateIndicator()
|
16
|
-
ref.current?.updateScrollButtons()
|
17
|
-
}
|
18
|
-
|
19
|
-
window.addEventListener('load', listener)
|
20
|
-
|
21
|
-
return () => window.removeEventListener('load', listener)
|
22
|
-
}, [])
|
23
|
-
|
24
|
-
return ref
|
25
|
-
}
|
26
|
-
|
27
|
-
export default useTabAction
|