@xyo-network/react-drawer 3.0.2 → 3.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/components/Drawer.d.ts +11 -0
- package/dist/browser/components/Drawer.d.ts.map +1 -0
- package/dist/browser/components/index.d.ts +2 -0
- package/dist/browser/components/index.d.ts.map +1 -0
- package/dist/browser/index.d.ts +2 -12
- package/dist/browser/index.d.ts.map +1 -0
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +47 -42
- package/src/components/Drawer.stories.tsx +5 -7
- package/src/components/Drawer.tsx +5 -7
- package/xy.config.ts +1 -3
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { DrawerProps } from '@mui/material';
|
|
2
|
+
import type { PropsWithChildren } from 'react';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
|
|
5
|
+
heightVariant?: 'full' | 'auto';
|
|
6
|
+
subTitle?: string;
|
|
7
|
+
title?: string;
|
|
8
|
+
widthVariant?: 'full' | 'partial';
|
|
9
|
+
}
|
|
10
|
+
export declare const DrawerEx: React.FC<DrawerExProps>;
|
|
11
|
+
//# sourceMappingURL=Drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAKhD,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqD5C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
package/dist/browser/index.d.ts
CHANGED
|
@@ -1,12 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
interface DrawerExProps extends PropsWithChildren<DrawerProps> {
|
|
5
|
-
heightVariant?: 'full' | 'auto';
|
|
6
|
-
subTitle?: string;
|
|
7
|
-
title?: string;
|
|
8
|
-
widthVariant?: 'full' | 'partial';
|
|
9
|
-
}
|
|
10
|
-
declare const DrawerEx: React.FC<DrawerExProps>;
|
|
11
|
-
|
|
12
|
-
export { DrawerEx, type DrawerExProps };
|
|
1
|
+
export * from './components/index.ts';
|
|
2
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import type { DrawerProps } from '@mui/material'\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import type { DrawerProps } from '@mui/material'\nimport {\n Drawer, Paper, styled, Typography,\n} from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { MouseEvent, PropsWithChildren } from 'react'\nimport React, { useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n heightVariant?: 'full' | 'auto'\n subTitle?: string\n title?: string\n widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n children,\n heightVariant = 'full',\n subTitle,\n title,\n onClose,\n widthVariant = 'partial',\n ...props\n}) => {\n const variantBasedProps = useMemo(() => {\n return {\n PaperProps: {\n sx: {\n alignItems: 'center',\n background: 'transparent',\n boxShadow: 'none',\n height: heightVariant === 'full' ? '100%' : 'auto',\n width: widthVariant === 'partial' ? 'auto' : '100%',\n },\n },\n onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n }\n }, [heightVariant, onClose, widthVariant])\n\n return (\n <Drawer anchor=\"top\" onClose={onClose} {...variantBasedProps} {...props}>\n {/* Trap the event to prevent triggering the backdrop onClick */}\n <StyledDrawerContentPaper\n widthVariant={widthVariant}\n elevation={16}\n onClick={event => event.stopPropagation()}\n sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n >\n {title || subTitle\n ? (\n <FlexCol alignItems=\"start\" gap={1}>\n {title\n ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n : null}\n {subTitle\n ? (\n <Typography variant=\"subtitle1\" textTransform=\"none\">\n {subTitle}\n </Typography>\n )\n : null}\n </FlexCol>\n )\n : null}\n {children}\n </StyledDrawerContentPaper>\n </Drawer>\n )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n maxWidth: '100%',\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n name: 'StyledDrawerContentPaper',\n shouldForwardProp: prop => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n alignItems: 'stretch',\n borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(2),\n height: '100%',\n maxWidth: '100%',\n overflowX: 'hidden',\n padding: theme.spacing(3),\n [theme.breakpoints.up('lg')]: { width: widthVariant === 'full' ? '100%' : '50%' },\n [theme.breakpoints.up('md')]: { width: widthVariant === 'full' ? '100%' : '75%' },\n}))\n"],"mappings":";;;;AACA,SACEA,QAAQC,OAAOC,QAAQC,kBAClB;AACP,SAASC,eAAe;AAExB,OAAOC,SAASC,eAAe;AASxB,IAAMC,WAAoC,wBAAC,EAChDC,UACAC,gBAAgB,QAChBC,UACAC,OACAC,SACAC,eAAe,WACf,GAAGC,MAAAA,MACJ;AACC,QAAMC,oBAAoBC,QAAQ,MAAA;AAChC,WAAO;MACLC,YAAY;QACVC,IAAI;UACFC,YAAY;UACZC,YAAY;UACZC,WAAW;UACXC,QAAQb,kBAAkB,SAAS,SAAS;UAC5Cc,OAAOV,iBAAiB,YAAY,SAAS;QAC/C;MACF;MACAW,SAAS,wBAACC,UAAsBb,UAAUa,OAAO,eAAA,GAAxC;IACX;EACF,GAAG;IAAChB;IAAeG;IAASC;GAAa;AAEzC,SACE,sBAAA,cAACa,QAAAA;IAAOC,QAAO;IAAMf;IAAmB,GAAGG;IAAoB,GAAGD;KAEhE,sBAAA,cAACc,0BAAAA;IACCf;IACAgB,WAAW;IACXL,SAASC,wBAAAA,UAASA,MAAMK,gBAAe,GAA9BL;IACTP,IAAI;MAAEK,OAAOV,iBAAiB,SAAS,SAASkB;IAAU;KAEzDpB,SAASD,WAEJ,sBAAA,cAACsB,SAAAA;IAAQb,YAAW;IAAQc,KAAK;KAC9BtB,QACG,sBAAA,cAACuB,0BAAAA;IAAyBC,SAAQ;KAAMxB,KAAAA,IACxC,MACHD,WAEK,sBAAA,cAAC0B,YAAAA;IAAWD,SAAQ;IAAYE,eAAc;KAC3C3B,QAAAA,IAGL,IAAA,IAGR,MACHF,QAAAA,CAAAA;AAIT,GArDiD;AAuDjD,IAAM0B,2BAA2BI,OAAOF,YAAY;EAAEG,MAAM;AAA2B,CAAA,EAAG,OAAO;EAC/FC,UAAU;EACVC,WAAW;EACXC,cAAc;EACdC,YAAY;AACd,EAAA;AAEA,IAAMf,2BAA2BU,OAAOM,OAAO;EAC7CL,MAAM;EACNM,mBAAmBC,wBAAAA,SAAQ,CAAC;IAAC;IAAgBC,SAASD,IAAAA,GAAnCA;AACrB,CAAA,EAAkB,CAAC,EAAEE,OAAOnC,aAAY,OAAQ;EAC9CM,YAAY;EACZ8B,cAAc,OAAOD,MAAME,MAAMD,YAAY,MAAMD,MAAME,MAAMD,YAAY;EAC3EE,SAAS;EACTC,eAAe;EACfnB,KAAKe,MAAMK,QAAQ,CAAA;EACnB/B,QAAQ;EACRkB,UAAU;EACVC,WAAW;EACXa,SAASN,MAAMK,QAAQ,CAAA;EACvB,CAACL,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAAEjC,OAAOV,iBAAiB,SAAS,SAAS;EAAM;EAChF,CAACmC,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAAEjC,OAAOV,iBAAiB,SAAS,SAAS;EAAM;AAClF,EAAA;","names":["Drawer","Paper","styled","Typography","FlexCol","React","useMemo","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","useMemo","PaperProps","sx","alignItems","background","boxShadow","height","width","onClick","event","Drawer","anchor","StyledDrawerContentPaper","elevation","stopPropagation","undefined","FlexCol","gap","StyledEllipsisTypography","variant","Typography","textTransform","styled","name","maxWidth","overflowX","textOverflow","whiteSpace","Paper","shouldForwardProp","prop","includes","theme","borderRadius","shape","display","flexDirection","spacing","padding","breakpoints","up"]}
|
package/package.json
CHANGED
|
@@ -1,31 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-drawer",
|
|
3
|
-
"
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
"
|
|
7
|
-
|
|
3
|
+
"version": "3.0.3",
|
|
4
|
+
"description": "Common React library for all XYO projects that use React",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"xyo",
|
|
7
|
+
"utility",
|
|
8
|
+
"typescript",
|
|
9
|
+
"react"
|
|
10
|
+
],
|
|
11
|
+
"homepage": "https://xyo.network",
|
|
8
12
|
"bugs": {
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
},
|
|
12
|
-
"dependencies": {
|
|
13
|
-
"@xylabs/react-flexbox": "^4.0.3"
|
|
13
|
+
"url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues",
|
|
14
|
+
"email": "support@xyo.network"
|
|
14
15
|
},
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"react": "^18",
|
|
19
|
-
"react-dom": "^18"
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
|
|
20
19
|
},
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
20
|
+
"license": "LGPL-3.0-only",
|
|
21
|
+
"author": {
|
|
22
|
+
"name": "XYO Development Team",
|
|
23
|
+
"email": "support@xyo.network",
|
|
24
|
+
"url": "https://xyo.network"
|
|
26
25
|
},
|
|
27
|
-
"
|
|
28
|
-
"
|
|
26
|
+
"sideEffects": false,
|
|
27
|
+
"type": "module",
|
|
29
28
|
"exports": {
|
|
30
29
|
".": {
|
|
31
30
|
"import": {
|
|
@@ -38,27 +37,33 @@
|
|
|
38
37
|
"./package.json": "./package.json"
|
|
39
38
|
},
|
|
40
39
|
"module": "dist/browser/index.mjs",
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"typescript",
|
|
46
|
-
"react"
|
|
47
|
-
],
|
|
48
|
-
"license": "LGPL-3.0-only",
|
|
49
|
-
"publishConfig": {
|
|
50
|
-
"access": "public"
|
|
40
|
+
"types": "dist/browser/index.d.ts",
|
|
41
|
+
"scripts": {
|
|
42
|
+
"license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\"",
|
|
43
|
+
"lint-pkg": "npmPkgJsonLint ."
|
|
51
44
|
},
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
|
|
45
|
+
"dependencies": {
|
|
46
|
+
"@xylabs/react-flexbox": "^4.0.3"
|
|
55
47
|
},
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@mui/material": "^5.16.7",
|
|
50
|
+
"@mui/styles": "^5.16.7",
|
|
51
|
+
"@storybook/react": "^8.2.9",
|
|
52
|
+
"@xylabs/ts-scripts-yarn3": "^4.0.7",
|
|
53
|
+
"@xylabs/tsconfig-react": "^4.0.7",
|
|
54
|
+
"react": "^18.3.1",
|
|
55
|
+
"react-dom": "^18.3.1",
|
|
56
|
+
"storybook": "^8.2.9",
|
|
57
|
+
"typescript": "^5.5.4"
|
|
59
58
|
},
|
|
60
|
-
"
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
"peerDependencies": {
|
|
60
|
+
"@mui/material": "^5",
|
|
61
|
+
"@mui/styles": "^5",
|
|
62
|
+
"react": "^18",
|
|
63
|
+
"react-dom": "^18"
|
|
64
|
+
},
|
|
65
|
+
"publishConfig": {
|
|
66
|
+
"access": "public"
|
|
67
|
+
},
|
|
68
|
+
"docs": "dist/docs.json"
|
|
64
69
|
}
|
|
@@ -4,9 +4,7 @@ import React from 'react'
|
|
|
4
4
|
import type { DrawerExProps } from './Drawer.tsx'
|
|
5
5
|
import { DrawerEx } from './Drawer.tsx'
|
|
6
6
|
|
|
7
|
-
export default {
|
|
8
|
-
title: 'modules/drawer/Ex',
|
|
9
|
-
} as Meta
|
|
7
|
+
export default { title: 'modules/drawer/Ex' } as Meta
|
|
10
8
|
|
|
11
9
|
const Template: StoryFn<React.FC<DrawerExProps>> = (props) => {
|
|
12
10
|
return (
|
|
@@ -20,9 +18,7 @@ const Default = Template.bind({})
|
|
|
20
18
|
Default.args = {}
|
|
21
19
|
|
|
22
20
|
const WithOpen = Template.bind({})
|
|
23
|
-
WithOpen.args = {
|
|
24
|
-
open: true,
|
|
25
|
-
}
|
|
21
|
+
WithOpen.args = { open: true }
|
|
26
22
|
|
|
27
23
|
const WithFullScreen = Template.bind({})
|
|
28
24
|
WithFullScreen.args = {
|
|
@@ -38,4 +34,6 @@ WithTitles.args = {
|
|
|
38
34
|
title: 'Title',
|
|
39
35
|
}
|
|
40
36
|
|
|
41
|
-
export {
|
|
37
|
+
export {
|
|
38
|
+
Default, WithFullScreen, WithOpen, WithTitles,
|
|
39
|
+
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { DrawerProps } from '@mui/material'
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Drawer, Paper, styled, Typography,
|
|
4
|
+
} from '@mui/material'
|
|
3
5
|
import { FlexCol } from '@xylabs/react-flexbox'
|
|
4
6
|
import type { MouseEvent, PropsWithChildren } from 'react'
|
|
5
7
|
import React, { useMemo } from 'react'
|
|
@@ -86,10 +88,6 @@ const StyledDrawerContentPaper = styled(Paper, {
|
|
|
86
88
|
maxWidth: '100%',
|
|
87
89
|
overflowX: 'hidden',
|
|
88
90
|
padding: theme.spacing(3),
|
|
89
|
-
[theme.breakpoints.up('lg')]: {
|
|
90
|
-
|
|
91
|
-
},
|
|
92
|
-
[theme.breakpoints.up('md')]: {
|
|
93
|
-
width: widthVariant === 'full' ? '100%' : '75%',
|
|
94
|
-
},
|
|
91
|
+
[theme.breakpoints.up('lg')]: { width: widthVariant === 'full' ? '100%' : '50%' },
|
|
92
|
+
[theme.breakpoints.up('md')]: { width: widthVariant === 'full' ? '100%' : '75%' },
|
|
95
93
|
}))
|