@xyo-network/react-drawer 3.0.0 → 3.0.2
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer,
|
|
1
|
+
{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import type { DrawerProps } from '@mui/material'\nimport { Drawer, Paper, styled, Typography } 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')]: {\n width: widthVariant === 'full' ? '100%' : '50%',\n },\n [theme.breakpoints.up('md')]: {\n width: widthVariant === 'full' ? '100%' : '75%',\n },\n}))\n"],"mappings":";;;;AACA,SAASA,QAAQC,OAAOC,QAAQC,kBAAkB;AAClD,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;IAC5BjC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;EACA,CAACmC,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BjC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;AACF,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
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
},
|
|
8
8
|
"bugs": {
|
|
9
9
|
"email": "support@xyo.network",
|
|
10
|
-
"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
|
|
10
|
+
"url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xylabs/react-flexbox": "^4.0.
|
|
13
|
+
"@xylabs/react-flexbox": "^4.0.3"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
16
|
"@mui/material": "^5",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@storybook/react": "^8.2.9",
|
|
23
|
-
"@xylabs/ts-scripts-yarn3": "^4.0.0-rc.
|
|
24
|
-
"@xylabs/tsconfig-react": "^4.0.0-rc.
|
|
23
|
+
"@xylabs/ts-scripts-yarn3": "^4.0.0-rc.20",
|
|
24
|
+
"@xylabs/tsconfig-react": "^4.0.0-rc.20",
|
|
25
25
|
"typescript": "^5.5.4"
|
|
26
26
|
},
|
|
27
27
|
"description": "Common React library for all XYO projects that use React",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
},
|
|
52
52
|
"repository": {
|
|
53
53
|
"type": "git",
|
|
54
|
-
"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
|
|
54
|
+
"url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
|
|
55
55
|
},
|
|
56
56
|
"scripts": {
|
|
57
57
|
"lint-pkg": "npmPkgJsonLint .",
|
|
@@ -59,6 +59,6 @@
|
|
|
59
59
|
},
|
|
60
60
|
"sideEffects": false,
|
|
61
61
|
"types": "dist/browser/index.d.ts",
|
|
62
|
-
"version": "3.0.
|
|
62
|
+
"version": "3.0.2",
|
|
63
63
|
"type": "module"
|
|
64
64
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { Meta, StoryFn } from '@storybook/react'
|
|
1
|
+
import type { Meta, StoryFn } from '@storybook/react'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import type { DrawerExProps } from './Drawer.tsx'
|
|
5
|
+
import { DrawerEx } from './Drawer.tsx'
|
|
5
6
|
|
|
6
7
|
export default {
|
|
7
8
|
title: 'modules/drawer/Ex',
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { DrawerProps } from '@mui/material'
|
|
2
|
+
import { Drawer, Paper, styled, Typography } from '@mui/material'
|
|
2
3
|
import { FlexCol } from '@xylabs/react-flexbox'
|
|
3
|
-
import
|
|
4
|
+
import type { MouseEvent, PropsWithChildren } from 'react'
|
|
5
|
+
import React, { useMemo } from 'react'
|
|
4
6
|
|
|
5
7
|
export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
|
|
6
8
|
heightVariant?: 'full' | 'auto'
|
package/xy.config.ts
CHANGED