@toptal/picasso 28.11.0 → 28.13.0
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/Tab/Tab.d.ts +4 -0
- package/Tab/Tab.js +29 -4
- package/Tab/Tab.js.map +1 -1
- package/Tab/styles.d.ts +1 -1
- package/Tab/styles.js +17 -9
- package/Tab/styles.js.map +1 -1
- package/TabDescription/TabDescription.d.ts +6 -0
- package/TabDescription/TabDescription.js +12 -0
- package/TabDescription/TabDescription.js.map +1 -0
- package/TabDescription/index.d.ts +1 -0
- package/TabDescription/index.js +2 -0
- package/TabDescription/index.js.map +1 -0
- package/TabDescription/styles.d.ts +6 -0
- package/TabDescription/styles.js +7 -0
- package/TabDescription/styles.js.map +1 -0
- package/TabLabel/TabLabel.d.ts +8 -0
- package/TabLabel/TabLabel.js +12 -0
- package/TabLabel/TabLabel.js.map +1 -0
- package/TabLabel/index.d.ts +1 -0
- package/TabLabel/index.js +2 -0
- package/TabLabel/index.js.map +1 -0
- package/Tabs/styles.js +2 -0
- package/Tabs/styles.js.map +1 -1
- package/package.json +1 -1
- package/utils/index.d.ts +2 -1
- package/utils/index.js +2 -1
- package/utils/index.js.map +1 -1
- package/utils/useBoolean/index.d.ts +1 -0
- package/utils/useBoolean/index.js +2 -0
- package/utils/useBoolean/index.js.map +1 -0
- package/utils/useBoolean/use-boolean.d.ts +15 -0
- package/utils/useBoolean/use-boolean.js +15 -0
- package/utils/useBoolean/use-boolean.js.map +1 -0
package/Tab/Tab.d.ts
CHANGED
|
@@ -13,6 +13,10 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
|
|
|
13
13
|
label?: ReactNode;
|
|
14
14
|
/** The Icon element */
|
|
15
15
|
icon?: ReactElement;
|
|
16
|
+
/** Image URL */
|
|
17
|
+
avatar?: string | null;
|
|
18
|
+
/** Description */
|
|
19
|
+
description?: string;
|
|
16
20
|
selected?: boolean;
|
|
17
21
|
onChange?: TabProps['onChange'];
|
|
18
22
|
onClick?: TabProps['onClick'];
|
package/Tab/Tab.js
CHANGED
|
@@ -13,17 +13,25 @@ import React, { forwardRef, useContext, } from 'react';
|
|
|
13
13
|
import { makeStyles } from '@material-ui/core/styles';
|
|
14
14
|
import MUITab from '@material-ui/core/Tab';
|
|
15
15
|
import { useTitleCase } from '@toptal/picasso-shared';
|
|
16
|
-
import
|
|
16
|
+
import UserBadge from '../UserBadge';
|
|
17
17
|
import styles from './styles';
|
|
18
|
-
import toTitleCase from '../utils/to-title-case';
|
|
19
18
|
import { TabsOrientationContext } from '../Tabs/Tabs';
|
|
19
|
+
import TabLabel from '../TabLabel';
|
|
20
|
+
import TabDescription from '../TabDescription';
|
|
20
21
|
const useStyles = makeStyles(styles, { name: 'PicassoTab' });
|
|
21
22
|
export const Tab = forwardRef(function Tab(props, ref) {
|
|
22
|
-
const { disabled, value, label, icon, selected, onChange, onClick, titleCase: propsTitleCase } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "selected", "onChange", "onClick", "titleCase"]);
|
|
23
|
+
const { disabled, value, label, icon, selected, onChange, onClick, titleCase: propsTitleCase, description, avatar } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "selected", "onChange", "onClick", "titleCase", "description", "avatar"]);
|
|
23
24
|
const classes = useStyles();
|
|
24
25
|
const titleCase = useTitleCase(propsTitleCase);
|
|
25
|
-
const labelComponent = (React.createElement(Typography, { as: 'div', size: 'small', weight: 'semibold', color: 'inherit' }, titleCase ? toTitleCase(label) : label));
|
|
26
26
|
const orientation = useContext(TabsOrientationContext);
|
|
27
|
+
const labelComponent = getLabelComponent({
|
|
28
|
+
avatar,
|
|
29
|
+
description,
|
|
30
|
+
disabled,
|
|
31
|
+
label,
|
|
32
|
+
orientation,
|
|
33
|
+
titleCase,
|
|
34
|
+
});
|
|
27
35
|
return (React.createElement(MUITab, Object.assign({}, rest, { ref: ref, tabIndex: 0, disabled: disabled, label: labelComponent, icon: icon, value: value, selected: selected, onChange: onChange, onClick: onClick, classes: {
|
|
28
36
|
root: classes[orientation],
|
|
29
37
|
selected: classes.selected,
|
|
@@ -32,5 +40,22 @@ export const Tab = forwardRef(function Tab(props, ref) {
|
|
|
32
40
|
});
|
|
33
41
|
Tab.defaultProps = {};
|
|
34
42
|
Tab.displayName = 'Tab';
|
|
43
|
+
const getLabelComponent = ({ avatar, description, disabled, label, orientation, titleCase, }) => {
|
|
44
|
+
if (!label) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
const isHorizontal = orientation === 'horizontal';
|
|
48
|
+
const isCustomLabel = typeof label !== 'string';
|
|
49
|
+
const Label = () => (React.createElement(TabLabel, { titleCase: titleCase, label: label, orientation: orientation }));
|
|
50
|
+
if (isHorizontal || isCustomLabel) {
|
|
51
|
+
return React.createElement(Label, null);
|
|
52
|
+
}
|
|
53
|
+
if (typeof avatar === 'undefined') {
|
|
54
|
+
return (React.createElement(React.Fragment, null,
|
|
55
|
+
React.createElement(Label, null),
|
|
56
|
+
description && (React.createElement(TabDescription, { disabled: disabled }, description))));
|
|
57
|
+
}
|
|
58
|
+
return (React.createElement(UserBadge, { renderName: Label, name: label, avatar: avatar }, description && (React.createElement(TabDescription, { disabled: disabled }, description))));
|
|
59
|
+
};
|
|
35
60
|
export default Tab;
|
|
36
61
|
//# sourceMappingURL=Tab.js.map
|
package/Tab/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EAIV,UAAU,GACX,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,MAAoB,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAA6B,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,
|
|
1
|
+
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tab/Tab.tsx"],"names":[],"mappings":"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"}
|
package/Tab/styles.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ sizes, palette, shadows }: Theme) => import("@material-ui/styles").StyleRules<{}, "horizontal" | "vertical" | "selected" | "wrapper">;
|
|
2
|
+
declare const _default: ({ sizes, palette, shadows, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "horizontal" | "vertical" | "selected" | "wrapper">;
|
|
3
3
|
export default _default;
|
package/Tab/styles.js
CHANGED
|
@@ -40,34 +40,42 @@ PicassoProvider.override(({ breakpoints, palette }) => ({
|
|
|
40
40
|
disabled: {},
|
|
41
41
|
},
|
|
42
42
|
}));
|
|
43
|
-
export default ({ sizes, palette, shadows }) => createStyles({
|
|
43
|
+
export default ({ sizes, palette, shadows, transitions }) => createStyles({
|
|
44
44
|
horizontal: {
|
|
45
45
|
'&:not(:last-child)': {
|
|
46
46
|
marginRight: '2em',
|
|
47
47
|
},
|
|
48
48
|
},
|
|
49
49
|
vertical: {
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
width: '100%',
|
|
51
|
+
borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
|
|
52
|
+
margin: '0.25rem 0',
|
|
52
53
|
overflow: 'hidden',
|
|
53
|
-
padding: '0.
|
|
54
|
+
padding: '0.5rem 1rem',
|
|
55
|
+
transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
|
|
56
|
+
textAlign: 'left',
|
|
57
|
+
backgroundColor: palette.grey.lighter,
|
|
58
|
+
opacity: 1,
|
|
59
|
+
color: palette.grey.dark,
|
|
54
60
|
'&:first-child': {
|
|
55
|
-
marginTop: '
|
|
61
|
+
marginTop: '1rem',
|
|
56
62
|
},
|
|
57
63
|
'&:last-child': {
|
|
58
|
-
marginBottom: '
|
|
64
|
+
marginBottom: '1rem',
|
|
65
|
+
},
|
|
66
|
+
'&:hover': {
|
|
67
|
+
color: palette.common.black,
|
|
59
68
|
},
|
|
60
69
|
'&:hover:not($selected)': {
|
|
61
70
|
backgroundColor: palette.grey.lighter2,
|
|
62
71
|
},
|
|
63
72
|
'& $wrapper': {
|
|
64
|
-
|
|
65
|
-
marginRight: '2em',
|
|
66
|
-
alignItems: 'flex-start',
|
|
73
|
+
display: 'block',
|
|
67
74
|
},
|
|
68
75
|
},
|
|
69
76
|
selected: {
|
|
70
77
|
'&$vertical': {
|
|
78
|
+
color: palette.common.black,
|
|
71
79
|
boxShadow: shadows[1],
|
|
72
80
|
backgroundColor: palette.grey.lightest,
|
|
73
81
|
'&::before': {
|
package/Tab/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,SAAS,EAAE,CAAC;YACZ,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,EAAE;YACxC,QAAQ,EAAE,SAAS;YAEnB,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;gBACtB,OAAO,EAAE,SAAS;aACnB;YAED,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAExB,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;gBACtB,QAAQ,EAAE,MAAM;gBAChB,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,SAAS,EAAE;YACT,SAAS,EAAE,CAAC;YACZ,YAAY,EAAE,QAAQ;YACtB,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;YACtB,4BAA4B,EAAE;gBAC5B,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,CAAC;gBACR,YAAY,EAAE,CAAC;aAChB;SACF;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,gBAAgB,EAAE;YAChB,YAAY,EAAE;gBACZ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;aACzB;SACF;QACD,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAS,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tab/styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
3
|
+
import TypographyOverflow from '../TypographyOverflow';
|
|
4
|
+
import styles from './styles';
|
|
5
|
+
const useStyles = makeStyles(styles, { name: 'PicassoTabDescription' });
|
|
6
|
+
const TabDescription = ({ children, disabled }) => {
|
|
7
|
+
const classes = useStyles();
|
|
8
|
+
const color = disabled ? 'inherit' : undefined;
|
|
9
|
+
return (React.createElement(TypographyOverflow, { className: classes.root, size: 'xxsmall', inline: true, color: color }, children));
|
|
10
|
+
};
|
|
11
|
+
export default TabDescription;
|
|
12
|
+
//# sourceMappingURL=TabDescription.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabDescription.js","sourceRoot":"","sources":["../../src/TabDescription/TabDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAE5D,OAAO,kBAAkB,MAAM,uBAAuB,CAAA;AACtD,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC,CAAA;AAE9E,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAS,EAAE,EAAE;IACvD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAA;IAE9C,OAAO,CACL,oBAAC,kBAAkB,IACjB,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,IAAI,EAAC,SAAS,EACd,MAAM,QACN,KAAK,EAAE,KAAK,IAEX,QAAQ,CACU,CACtB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './TabDescription';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TabDescription/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TabDescription/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe;IACb,IAAI,EAAE;QACJ,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC;KACtB;CACF,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import TypographyOverflow from '../TypographyOverflow';
|
|
3
|
+
import Typography from '../Typography';
|
|
4
|
+
import toTitleCase from '../utils/to-title-case';
|
|
5
|
+
const TabLabel = ({ label, orientation, titleCase }) => {
|
|
6
|
+
if (orientation === 'horizontal') {
|
|
7
|
+
return (React.createElement(Typography, { as: 'div', size: 'small', weight: 'semibold', color: 'inherit' }, titleCase ? toTitleCase(label) : label));
|
|
8
|
+
}
|
|
9
|
+
return (React.createElement(TypographyOverflow, { as: 'div', color: 'inherit', inline: true, size: 'medium', variant: 'body', weight: 'semibold' }, titleCase ? toTitleCase(label) : label));
|
|
10
|
+
};
|
|
11
|
+
export default TabLabel;
|
|
12
|
+
//# sourceMappingURL=TabLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabLabel.js","sourceRoot":"","sources":["../../src/TabLabel/TabLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,kBAAkB,MAAM,uBAAuB,CAAA;AACtD,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,WAAW,MAAM,wBAAwB,CAAA;AAQhD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAS,EAAE,EAAE;IAC5D,IAAI,WAAW,KAAK,YAAY,EAAE;QAChC,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,SAAS,IAChE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAC5B,CACd,CAAA;KACF;IAED,OAAO,CACL,oBAAC,kBAAkB,IACjB,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,SAAS,EACf,MAAM,QACN,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,UAAU,IAEhB,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CACpB,CACtB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './TabLabel';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TabLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}
|
package/Tabs/styles.js
CHANGED
package/Tabs/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,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,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
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,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"}
|
package/package.json
CHANGED
package/utils/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ declare const colorUtils: {
|
|
|
5
5
|
darken: (inputColor: string, amount: number) => string;
|
|
6
6
|
};
|
|
7
7
|
export { colorUtils };
|
|
8
|
-
export { breakpointsList as breakpoints, screens, isScreenSize, useBreakpoint, useScreens, shadows, colors as palette, generateRandomString, generateRandomStringOrGetEmptyInTest, } from '@toptal/picasso-provider';
|
|
8
|
+
export { breakpointsList as breakpoints, screens, isScreenSize, useBreakpoint, useScreens, shadows, colors as palette, generateRandomString, generateRandomStringOrGetEmptyInTest, sizes, } from '@toptal/picasso-provider';
|
|
9
9
|
export { useIsomorphicLayoutEffect, isBrowser } from '@toptal/picasso-shared';
|
|
10
10
|
export { default as ClickAwayListener } from '@material-ui/core/ClickAwayListener';
|
|
11
11
|
export { capitalize } from './capitalize';
|
|
@@ -26,6 +26,7 @@ export { default as useCombinedRefs } from './use-combined-refs';
|
|
|
26
26
|
export { default as useSafeState } from './use-safe-state';
|
|
27
27
|
export { default as useWidthOf } from './use-width-of';
|
|
28
28
|
export { default as unsafeErrorLog } from './unsafe-error-log';
|
|
29
|
+
export { default as useBoolean } from './useBoolean/use-boolean';
|
|
29
30
|
export { default as sum } from './sum';
|
|
30
31
|
export { default as htmlToHast, hastSanitizeSchema } from './html-to-hast';
|
|
31
32
|
export type { ReferenceObject } from './use-width-of';
|
package/utils/index.js
CHANGED
|
@@ -6,7 +6,7 @@ const colorUtils = {
|
|
|
6
6
|
darken,
|
|
7
7
|
};
|
|
8
8
|
export { colorUtils };
|
|
9
|
-
export { breakpointsList as breakpoints, screens, isScreenSize, useBreakpoint, useScreens, shadows, colors as palette, generateRandomString, generateRandomStringOrGetEmptyInTest, } from '@toptal/picasso-provider';
|
|
9
|
+
export { breakpointsList as breakpoints, screens, isScreenSize, useBreakpoint, useScreens, shadows, colors as palette, generateRandomString, generateRandomStringOrGetEmptyInTest, sizes, } from '@toptal/picasso-provider';
|
|
10
10
|
export { useIsomorphicLayoutEffect, isBrowser } from '@toptal/picasso-shared';
|
|
11
11
|
export { default as ClickAwayListener } from '@material-ui/core/ClickAwayListener';
|
|
12
12
|
export { capitalize } from './capitalize';
|
|
@@ -26,6 +26,7 @@ export { default as useCombinedRefs } from './use-combined-refs';
|
|
|
26
26
|
export { default as useSafeState } from './use-safe-state';
|
|
27
27
|
export { default as useWidthOf } from './use-width-of';
|
|
28
28
|
export { default as unsafeErrorLog } from './unsafe-error-log';
|
|
29
|
+
export { default as useBoolean } from './useBoolean/use-boolean';
|
|
29
30
|
export { default as sum } from './sum';
|
|
30
31
|
export { default as htmlToHast, hastSanitizeSchema } from './html-to-hast';
|
|
31
32
|
export const Transitions = TransitionUtils;
|
package/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,eAAe,MAAM,eAAe,CAAA;AAEhD,MAAM,UAAU,GAAG;IACjB,KAAK;IACL,OAAO;IACP,MAAM;CACP,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,OAAO,EACL,eAAe,IAAI,WAAW,EAC9B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,IAAI,OAAO,EACjB,oBAAoB,EACpB,oCAAoC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,eAAe,MAAM,eAAe,CAAA;AAEhD,MAAM,UAAU,GAAG;IACjB,KAAK;IACL,OAAO;IACP,MAAM;CACP,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,OAAO,EACL,eAAe,IAAI,WAAW,EAC9B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,IAAI,OAAO,EACjB,oBAAoB,EACpB,oCAAoC,EACpC,KAAK,GACN,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE7E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAElF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAEnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG1E,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAA;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7E,cAAc,+BAA+B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './use-boolean';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/useBoolean/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/** Set value to true */
|
|
2
|
+
declare type SetTruthy = () => void;
|
|
3
|
+
/** Set value to false */
|
|
4
|
+
declare type SetFalsy = () => void;
|
|
5
|
+
/** Toggle the value */
|
|
6
|
+
declare type Toggle = () => void;
|
|
7
|
+
declare type IsTruthy = boolean;
|
|
8
|
+
declare type UseBooleanType = (defaultValue?: boolean) => [IsTruthy, SetTruthy, SetFalsy, Toggle];
|
|
9
|
+
/**
|
|
10
|
+
*
|
|
11
|
+
* @param defaultValue?: Boolean
|
|
12
|
+
* @returns [isTruthy, setTruthy, setFalsy, toggle]
|
|
13
|
+
*/
|
|
14
|
+
declare const useBoolean: UseBooleanType;
|
|
15
|
+
export default useBoolean;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* @param defaultValue?: Boolean
|
|
5
|
+
* @returns [isTruthy, setTruthy, setFalsy, toggle]
|
|
6
|
+
*/
|
|
7
|
+
const useBoolean = (defaultValue = false) => {
|
|
8
|
+
const [isTruthy, setBoolean] = useState(defaultValue);
|
|
9
|
+
const setTruthy = () => setBoolean(true);
|
|
10
|
+
const setFalsy = () => setBoolean(false);
|
|
11
|
+
const toggle = () => setBoolean(value => !value);
|
|
12
|
+
return [isTruthy, setTruthy, setFalsy, toggle];
|
|
13
|
+
};
|
|
14
|
+
export default useBoolean;
|
|
15
|
+
//# sourceMappingURL=use-boolean.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-boolean.js","sourceRoot":"","sources":["../../../src/utils/useBoolean/use-boolean.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAchC;;;;GAIG;AACH,MAAM,UAAU,GAAmB,CAAC,YAAY,GAAG,KAAK,EAAE,EAAE;IAC1D,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IAErD,MAAM,SAAS,GAAc,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IACnD,MAAM,QAAQ,GAAa,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IAClD,MAAM,MAAM,GAAW,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;IAExD,OAAO,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;AAChD,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
|