@sinco/react 1.0.11-rc.4 → 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 +48 -39
- package/package.json +1 -1
- package/src/lib/Components/Drawer.d.ts +4 -2
- package/src/lib/Components/EmptyState.d.ts +2 -2
- package/src/lib/Components/PageHeader.d.ts +9 -9
- package/src/lib/Utils/index.d.ts +1 -1
- /package/src/lib/Utils/{DynamicColor.d.ts → dynamicColor.d.ts} +0 -0
package/index.js
CHANGED
@@ -16924,7 +16924,7 @@ var EmptyStateImageUrls;
|
|
16924
16924
|
(function (EmptyStateImageUrls) {
|
16925
16925
|
EmptyStateImageUrls["error"] = "error";
|
16926
16926
|
EmptyStateImageUrls["search"] = "search";
|
16927
|
-
EmptyStateImageUrls["
|
16927
|
+
EmptyStateImageUrls["noResult"] = "noResult";
|
16928
16928
|
EmptyStateImageUrls["create"] = "create";
|
16929
16929
|
})(EmptyStateImageUrls || (EmptyStateImageUrls = {}));
|
16930
16930
|
const EmptyStateComponent = ({
|
@@ -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,28 +17467,32 @@ 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(
|
17486
|
-
const
|
17494
|
+
const [stateActions, setActionsState] = useState(showActions);
|
17495
|
+
const handleDrawerActions = () => {
|
17487
17496
|
setActionsState(true);
|
17488
17497
|
};
|
17489
17498
|
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
@@ -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:
|
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)(() => ({
|
@@ -17698,26 +17702,31 @@ const ToastNotificationComponent = toast => {
|
|
17698
17702
|
})))));
|
17699
17703
|
};
|
17700
17704
|
|
17701
|
-
const
|
17705
|
+
const PageHeaderContent = styled$1(Stack$1)(({
|
17702
17706
|
theme
|
17703
17707
|
}) => ({
|
17704
|
-
backgroundColor:
|
17705
|
-
boxShadow:
|
17708
|
+
backgroundColor: '#fff',
|
17709
|
+
boxShadow: '0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)',
|
17706
17710
|
zIndex: 100,
|
17707
|
-
padding:
|
17708
|
-
justifyContent:
|
17711
|
+
padding: '8px 24px',
|
17712
|
+
justifyContent: 'space-between',
|
17709
17713
|
minHeight: 39,
|
17710
|
-
position:
|
17711
|
-
width:
|
17714
|
+
position: 'fixed',
|
17715
|
+
width: '100%'
|
17712
17716
|
}));
|
17713
|
-
const PageHeaderComponent =
|
17717
|
+
const PageHeaderComponent = ({
|
17718
|
+
title,
|
17719
|
+
subtitle,
|
17720
|
+
actions,
|
17721
|
+
buttonBack
|
17722
|
+
}) => {
|
17714
17723
|
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
17715
17724
|
theme: SincoTheme
|
17716
17725
|
}, /*#__PURE__*/React__default.createElement("div", {
|
17717
17726
|
style: {
|
17718
17727
|
minHeight: 56
|
17719
17728
|
}
|
17720
|
-
}, /*#__PURE__*/React__default.createElement(
|
17729
|
+
}, /*#__PURE__*/React__default.createElement(PageHeaderContent, null, /*#__PURE__*/React__default.createElement(Stack$1, {
|
17721
17730
|
width: "90%",
|
17722
17731
|
justifyContent: "space-between",
|
17723
17732
|
flexDirection: "row",
|
@@ -17726,17 +17735,17 @@ const PageHeaderComponent = page => {
|
|
17726
17735
|
gap: 1.5,
|
17727
17736
|
flexDirection: "row",
|
17728
17737
|
alignItems: "center"
|
17729
|
-
},
|
17738
|
+
}, buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17730
17739
|
variant: "h6",
|
17731
17740
|
color: "text.primary"
|
17732
|
-
},
|
17741
|
+
}, title), /*#__PURE__*/React__default.createElement(Typography$1, {
|
17733
17742
|
variant: "caption",
|
17734
17743
|
color: "text.secondary"
|
17735
|
-
},
|
17744
|
+
}, subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
17736
17745
|
gap: 1,
|
17737
17746
|
alignItems: "center",
|
17738
17747
|
flexDirection: "row"
|
17739
|
-
},
|
17748
|
+
}, actions)))));
|
17740
17749
|
};
|
17741
17750
|
|
17742
17751
|
const FooterActionComponent = ({
|
@@ -23226,4 +23235,4 @@ const useDynamicColor = url => {
|
|
23226
23235
|
};
|
23227
23236
|
};
|
23228
23237
|
|
23229
|
-
export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent,
|
23238
|
+
export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderContent, SincoTheme, ToastNotificationComponent, useDynamicColor };
|
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;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
-
export type EmptyStateStates = 'create' | 'error' | '
|
2
|
+
export type EmptyStateStates = 'create' | 'error' | 'noResult' | 'search';
|
3
3
|
export declare enum EmptyStateImageUrls {
|
4
4
|
error = "error",
|
5
5
|
search = "search",
|
6
|
-
|
6
|
+
noResult = "noResult",
|
7
7
|
create = "create"
|
8
8
|
}
|
9
9
|
export interface EmptyStateProperties {
|
@@ -1,11 +1,5 @@
|
|
1
|
-
import React from
|
2
|
-
|
3
|
-
title: string;
|
4
|
-
subtitle?: string;
|
5
|
-
actions?: React.ReactNode;
|
6
|
-
buttonBack?: React.ReactNode;
|
7
|
-
}
|
8
|
-
export declare const PageContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
|
1
|
+
import React from 'react';
|
2
|
+
export declare const PageHeaderContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
|
9
3
|
children?: React.ReactNode;
|
10
4
|
direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
|
11
5
|
spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
|
@@ -15,5 +9,11 @@ export declare const PageContent: import("@emotion/styled").StyledComponent<impo
|
|
15
9
|
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
16
10
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
17
11
|
}, keyof import("@mui/material/OverridableComponent").CommonProps | "direction" | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "spacing" | "divider" | "useFlexGap" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
18
|
-
|
12
|
+
interface PageheaderProperties {
|
13
|
+
title: string;
|
14
|
+
subtitle?: string;
|
15
|
+
actions?: React.ReactNode;
|
16
|
+
buttonBack?: React.ReactNode;
|
17
|
+
}
|
18
|
+
export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, }: PageheaderProperties) => JSX.Element;
|
19
19
|
export {};
|
package/src/lib/Utils/index.d.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export * from './
|
1
|
+
export * from './dynamicColor';
|
File without changes
|