@sinco/react 1.0.11-rc.5 → 1.0.11-rc.6
Sign up to get free protection for your applications and to get access to all the features.
- package/index.js +27 -23
- package/package.json +1 -1
- package/src/lib/Components/Drawer.d.ts +4 -2
package/index.js
CHANGED
@@ -17437,24 +17437,29 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
|
|
17437
17437
|
}), 'Close');
|
17438
17438
|
default_1 = Close.default = _default;
|
17439
17439
|
|
17440
|
-
const
|
17440
|
+
const DrawerContainer = styled$1(Box$2)(({
|
17441
|
+
theme
|
17442
|
+
}) => ({
|
17441
17443
|
display: 'flex',
|
17442
17444
|
flexDirection: 'column',
|
17443
17445
|
alignContent: 'flex-start',
|
17444
17446
|
justifyContent: 'space-between',
|
17445
|
-
width: '530px',
|
17446
17447
|
height: '100%',
|
17447
17448
|
overflow: 'hidden'
|
17448
|
-
};
|
17449
|
-
const
|
17449
|
+
}));
|
17450
|
+
const DrawerHeader = styled$1(Box$2)(({
|
17451
|
+
theme
|
17452
|
+
}) => ({
|
17450
17453
|
display: 'flex',
|
17451
17454
|
alignContent: 'center',
|
17452
17455
|
justifyContent: 'space-between',
|
17453
17456
|
backgroundColor: 'secondary.main',
|
17454
17457
|
py: '12px',
|
17455
17458
|
px: '8px'
|
17456
|
-
};
|
17457
|
-
const
|
17459
|
+
}));
|
17460
|
+
const DrawerContent = styled$1(Box$2)(({
|
17461
|
+
theme
|
17462
|
+
}) => ({
|
17458
17463
|
display: 'flex',
|
17459
17464
|
overflow: 'auto',
|
17460
17465
|
alignItems: 'flex-start',
|
@@ -17462,27 +17467,31 @@ const stylesDrawerContent = {
|
|
17462
17467
|
height: '-webkit-fill-available',
|
17463
17468
|
py: '12px',
|
17464
17469
|
px: '8px'
|
17465
|
-
};
|
17466
|
-
const
|
17470
|
+
}));
|
17471
|
+
const DrawerActions = styled$1(Box$2)(({
|
17472
|
+
theme
|
17473
|
+
}) => ({
|
17467
17474
|
display: 'flex',
|
17468
17475
|
alignContent: 'center',
|
17469
17476
|
justifyContent: 'flex-end',
|
17470
17477
|
borderTop: '1px solid rgba(16, 24, 64, 0.23)',
|
17471
17478
|
backgroundColor: '#F1F0EE',
|
17472
|
-
mt: '4px',
|
17473
17479
|
gap: '8px',
|
17480
|
+
mt: '4px',
|
17474
17481
|
py: '12px',
|
17475
17482
|
px: '8px'
|
17476
|
-
};
|
17483
|
+
}));
|
17477
17484
|
const DrawerComponent = ({
|
17478
17485
|
title,
|
17479
17486
|
children,
|
17480
|
-
|
17487
|
+
renderActions,
|
17488
|
+
showActions,
|
17481
17489
|
position,
|
17490
|
+
width,
|
17482
17491
|
open,
|
17483
17492
|
onClose
|
17484
17493
|
}) => {
|
17485
|
-
const [stateActions, setActionsState] = useState(
|
17494
|
+
const [stateActions, setActionsState] = useState(showActions);
|
17486
17495
|
const handleDrawerActions = () => {
|
17487
17496
|
setActionsState(true);
|
17488
17497
|
};
|
@@ -17492,23 +17501,18 @@ const DrawerComponent = ({
|
|
17492
17501
|
anchor: position,
|
17493
17502
|
open: open,
|
17494
17503
|
onClose: onClose
|
17495
|
-
}, /*#__PURE__*/React__default.createElement(
|
17496
|
-
|
17497
|
-
}, /*#__PURE__*/React__default.createElement(
|
17498
|
-
sx: stylesDrawerHeader
|
17499
|
-
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17504
|
+
}, /*#__PURE__*/React__default.createElement(DrawerContainer, {
|
17505
|
+
width: width
|
17506
|
+
}, /*#__PURE__*/React__default.createElement(DrawerHeader, null, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17500
17507
|
variant: "h6"
|
17501
17508
|
}, title), /*#__PURE__*/React__default.createElement(Box$2, null, /*#__PURE__*/React__default.createElement(IconButton$1, {
|
17502
17509
|
onClick: onClose,
|
17503
17510
|
size: "small"
|
17504
17511
|
}, /*#__PURE__*/React__default.createElement(default_1, {
|
17505
17512
|
fontSize: "small"
|
17506
|
-
})))), /*#__PURE__*/React__default.createElement(
|
17507
|
-
onClick: handleDrawerActions
|
17508
|
-
|
17509
|
-
}, children), stateActions && /*#__PURE__*/React__default.createElement(Box$2, {
|
17510
|
-
sx: stylesDrawerActions
|
17511
|
-
}, actions))));
|
17513
|
+
})))), /*#__PURE__*/React__default.createElement(DrawerContent, {
|
17514
|
+
onClick: handleDrawerActions
|
17515
|
+
}, children), stateActions && /*#__PURE__*/React__default.createElement(DrawerActions, null, renderActions))));
|
17512
17516
|
};
|
17513
17517
|
|
17514
17518
|
const ToastContainer = styled$1(Stack$1)(() => ({
|
package/package.json
CHANGED
@@ -3,9 +3,11 @@ export type handleDrawerPosition = 'left' | 'right';
|
|
3
3
|
export interface DrawerComponentProperties {
|
4
4
|
title: string;
|
5
5
|
children: ReactNode;
|
6
|
-
|
6
|
+
renderActions: ReactNode;
|
7
|
+
showActions?: boolean;
|
7
8
|
position?: handleDrawerPosition;
|
9
|
+
width: string;
|
8
10
|
open: boolean;
|
9
11
|
onClose: () => void;
|
10
12
|
}
|
11
|
-
export declare const DrawerComponent: ({ title, children,
|
13
|
+
export declare const DrawerComponent: ({ title, children, renderActions, showActions, position, width, open, onClose, }: DrawerComponentProperties) => JSX.Element;
|