@sinco/react 1.0.10-rc.22 → 1.0.10-rc.23
Sign up to get free protection for your applications and to get access to all the features.
- package/index.js +57 -47
- package/package.json +1 -1
- package/src/lib/Components/Drawer.d.ts +4 -3
package/index.js
CHANGED
@@ -15898,78 +15898,88 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
|
|
15898
15898
|
default_1 = Close.default = _default;
|
15899
15899
|
|
15900
15900
|
const stylesDrawerContainer = {
|
15901
|
-
display:
|
15902
|
-
flexDirection:
|
15903
|
-
alignContent:
|
15904
|
-
justifyContent:
|
15905
|
-
width:
|
15906
|
-
height:
|
15907
|
-
overflow:
|
15901
|
+
display: "flex",
|
15902
|
+
flexDirection: "column",
|
15903
|
+
alignContent: "flex-start",
|
15904
|
+
justifyContent: "space-between",
|
15905
|
+
width: "530px",
|
15906
|
+
height: "100%",
|
15907
|
+
overflow: "hidden"
|
15908
15908
|
};
|
15909
15909
|
const stylesEncabezado = {
|
15910
|
-
display:
|
15911
|
-
alignContent:
|
15912
|
-
justifyContent:
|
15913
|
-
backgroundColor:
|
15914
|
-
py:
|
15915
|
-
px:
|
15910
|
+
display: "flex",
|
15911
|
+
alignContent: "center",
|
15912
|
+
justifyContent: "space-between",
|
15913
|
+
backgroundColor: "primary.main",
|
15914
|
+
py: "12px",
|
15915
|
+
px: "8px"
|
15916
15916
|
};
|
15917
15917
|
const stylesContenido = {
|
15918
|
-
display:
|
15919
|
-
overflow:
|
15920
|
-
alignItems:
|
15921
|
-
flexDirection:
|
15922
|
-
height:
|
15923
|
-
py:
|
15924
|
-
px:
|
15918
|
+
display: "flex",
|
15919
|
+
overflow: "auto",
|
15920
|
+
alignItems: "flex-start",
|
15921
|
+
flexDirection: "column",
|
15922
|
+
height: "-webkit-fill-available",
|
15923
|
+
py: "12px",
|
15924
|
+
px: "8px"
|
15925
15925
|
};
|
15926
15926
|
const stylesAcciones = {
|
15927
|
-
display:
|
15928
|
-
alignContent:
|
15929
|
-
justifyContent:
|
15930
|
-
borderTop:
|
15931
|
-
backgroundColor:
|
15932
|
-
mt:
|
15933
|
-
|
15934
|
-
|
15935
|
-
px: '8px'
|
15927
|
+
display: "flex",
|
15928
|
+
alignContent: "center",
|
15929
|
+
justifyContent: "flex-start",
|
15930
|
+
borderTop: "1px solid rgba(16, 24, 64, 0.23)",
|
15931
|
+
backgroundColor: "#F1F0EE",
|
15932
|
+
mt: "4px",
|
15933
|
+
py: "12px",
|
15934
|
+
px: "8px"
|
15936
15935
|
};
|
15937
|
-
const DrawerComponent =
|
15936
|
+
const DrawerComponent = ({
|
15937
|
+
open,
|
15938
|
+
onClose,
|
15939
|
+
anchor,
|
15940
|
+
titulo,
|
15941
|
+
children,
|
15942
|
+
acciones
|
15943
|
+
}) => {
|
15938
15944
|
const [showActions, setShowActions] = useState(false);
|
15945
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
15946
|
+
const [drawerAbierto, setDrawerAbierto] = useState(false);
|
15939
15947
|
const mostrarAcciones = () => {
|
15940
15948
|
setShowActions(true);
|
15941
15949
|
};
|
15950
|
+
const toggleDrawer = () => {
|
15951
|
+
setDrawerAbierto(!drawerAbierto);
|
15952
|
+
onClose();
|
15953
|
+
};
|
15942
15954
|
return jsx(Drawer$1, {
|
15943
|
-
anchor:
|
15944
|
-
open:
|
15945
|
-
onClose:
|
15946
|
-
PaperProps: {
|
15947
|
-
style: {
|
15948
|
-
borderRadius: '8px 0px 0px 0px'
|
15949
|
-
}
|
15950
|
-
},
|
15955
|
+
anchor: anchor,
|
15956
|
+
open: open,
|
15957
|
+
onClose: toggleDrawer,
|
15951
15958
|
children: jsxs(Box$2, {
|
15952
15959
|
sx: stylesDrawerContainer,
|
15953
15960
|
children: [jsxs(Box$2, {
|
15954
15961
|
sx: stylesEncabezado,
|
15962
|
+
gap: 2,
|
15955
15963
|
children: [jsx(Typography$1, {
|
15956
15964
|
variant: "h6",
|
15957
|
-
|
15958
|
-
children:
|
15959
|
-
}), jsx(
|
15960
|
-
|
15961
|
-
|
15962
|
-
|
15963
|
-
|
15965
|
+
component: "h6",
|
15966
|
+
children: titulo
|
15967
|
+
}), jsx(Box$2, {
|
15968
|
+
children: jsx(IconButton$1, {
|
15969
|
+
onClick: toggleDrawer,
|
15970
|
+
size: "small",
|
15971
|
+
children: jsx(default_1, {
|
15972
|
+
fontSize: "small"
|
15973
|
+
})
|
15964
15974
|
})
|
15965
15975
|
})]
|
15966
15976
|
}), jsx(Box$2, {
|
15967
15977
|
onClick: mostrarAcciones,
|
15968
15978
|
sx: stylesContenido,
|
15969
|
-
children:
|
15979
|
+
children: children
|
15970
15980
|
}), showActions && jsx(Box$2, {
|
15971
15981
|
sx: stylesAcciones,
|
15972
|
-
children:
|
15982
|
+
children: acciones
|
15973
15983
|
})]
|
15974
15984
|
})
|
15975
15985
|
});
|
package/package.json
CHANGED
@@ -1,11 +1,12 @@
|
|
1
|
+
import React from "react";
|
1
2
|
import { ReactNode } from 'react';
|
2
|
-
export type Anchor =
|
3
|
+
export type Anchor = "left" | "right";
|
3
4
|
export interface DrawerComponentProps {
|
4
|
-
titulo:
|
5
|
+
titulo: ReactNode;
|
5
6
|
children: ReactNode;
|
6
7
|
acciones: ReactNode;
|
7
8
|
open: boolean;
|
8
9
|
onClose: () => void;
|
9
10
|
anchor?: Anchor;
|
10
11
|
}
|
11
|
-
export declare const DrawerComponent:
|
12
|
+
export declare const DrawerComponent: React.FC<DrawerComponentProps>;
|