@sinco/react 1.0.10-rc.22 → 1.0.10-rc.23
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/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>;
|