@sinco/react 1.0.11-rc.0 → 1.0.11-rc.2
Sign up to get free protection for your applications and to get access to all the features.
- package/index.js +188 -197
- package/package.json +1 -1
- package/src/index.d.ts +4 -0
- package/src/lib/Components/Drawer.d.ts +5 -5
- package/src/lib/Components/EmptyState.d.ts +7 -7
- package/src/lib/Components/PageHeader.d.ts +9 -9
- package/src/lib/Components/ToastNofitication.d.ts +3 -2
- package/src/lib/Hooks/index.d.ts +1 -0
- package/src/lib/Hooks/useDynamicColor.d.ts +3 -0
- package/src/lib/Utils/DynamicColor.d.ts +1 -2
- package/src/Index.d.ts +0 -4
- package/src/lib/Hooks/Index.d.ts +0 -1
- package/src/lib/Hooks/UseDynamicColor.d.ts +0 -3
- /package/src/lib/Components/{Index.d.ts → index.d.ts} +0 -0
- /package/src/lib/Theme/{Index.d.ts → index.d.ts} +0 -0
- /package/src/lib/Utils/{Index.d.ts → index.d.ts} +0 -0
package/index.js
CHANGED
@@ -8782,8 +8782,8 @@ function createShadow(...px) {
|
|
8782
8782
|
}
|
8783
8783
|
|
8784
8784
|
// Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
|
8785
|
-
const shadows
|
8786
|
-
var shadows$
|
8785
|
+
const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
|
8786
|
+
var shadows$1 = shadows;
|
8787
8787
|
|
8788
8788
|
const _excluded$k = ["duration", "easing", "delay"];
|
8789
8789
|
// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
|
@@ -8902,7 +8902,7 @@ Please use another name.` : formatMuiErrorMessage(18));
|
|
8902
8902
|
mixins: createMixins(systemTheme.breakpoints, mixinsInput),
|
8903
8903
|
palette,
|
8904
8904
|
// Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
|
8905
|
-
shadows: shadows$
|
8905
|
+
shadows: shadows$1.slice(),
|
8906
8906
|
typography: createTypography(palette, typographyInput),
|
8907
8907
|
transitions: createTransitions(transitionsInput),
|
8908
8908
|
zIndex: _extends({}, zIndex$1)
|
@@ -10959,142 +10959,6 @@ const components = {
|
|
10959
10959
|
}
|
10960
10960
|
};
|
10961
10961
|
|
10962
|
-
const breakpoints = createBreakpoints({
|
10963
|
-
values: {
|
10964
|
-
xs: 0,
|
10965
|
-
sm: 600,
|
10966
|
-
md: 960,
|
10967
|
-
lg: 1280,
|
10968
|
-
xl: 1920
|
10969
|
-
}
|
10970
|
-
});
|
10971
|
-
|
10972
|
-
const typography = {
|
10973
|
-
fontSize: 13,
|
10974
|
-
body3: {
|
10975
|
-
fontFamily: 'Roboto',
|
10976
|
-
fontWeight: 310,
|
10977
|
-
fontSize: 12,
|
10978
|
-
letterSpacing: 0.17,
|
10979
|
-
lineHeight: 1.2,
|
10980
|
-
[breakpoints.down('md')]: {
|
10981
|
-
fontSize: 11
|
10982
|
-
}
|
10983
|
-
},
|
10984
|
-
body1: {
|
10985
|
-
fontFamily: 'Roboto',
|
10986
|
-
fontSize: 14,
|
10987
|
-
fontWeight: 400,
|
10988
|
-
letterSpacing: 0.15,
|
10989
|
-
lineHeight: 1.4,
|
10990
|
-
'@media(max-width: 885px)': {
|
10991
|
-
fontSize: 15
|
10992
|
-
}
|
10993
|
-
},
|
10994
|
-
body2: {
|
10995
|
-
fontFamily: 'Roboto',
|
10996
|
-
fontSize: 13,
|
10997
|
-
fontWeight: 400,
|
10998
|
-
letterSpacing: 0.17,
|
10999
|
-
lineHeight: 1.2,
|
11000
|
-
'@media(max-width: 885px)': {
|
11001
|
-
fontSize: 14
|
11002
|
-
}
|
11003
|
-
},
|
11004
|
-
subtitle1: {
|
11005
|
-
fontFamily: 'Roboto',
|
11006
|
-
fontSize: 14,
|
11007
|
-
fontWeight: 500,
|
11008
|
-
letterSpacing: 0.15,
|
11009
|
-
lineHeight: 1.4,
|
11010
|
-
'@media(max-width: 885px)': {
|
11011
|
-
fontSize: 15
|
11012
|
-
}
|
11013
|
-
},
|
11014
|
-
subtitle2: {
|
11015
|
-
fontFamily: 'Roboto',
|
11016
|
-
fontSize: 13,
|
11017
|
-
fontWeight: 500,
|
11018
|
-
letterSpacing: 0.1,
|
11019
|
-
lineHeight: 1.4,
|
11020
|
-
'@media(max-width: 885px)': {
|
11021
|
-
fontSize: 14
|
11022
|
-
}
|
11023
|
-
},
|
11024
|
-
caption: {
|
11025
|
-
fontFamily: 'Roboto',
|
11026
|
-
fontSize: 11,
|
11027
|
-
fontWeight: 400,
|
11028
|
-
letterSpacing: 0.4,
|
11029
|
-
lineHeight: 1.4,
|
11030
|
-
'@media(max-width: 885px)': {
|
11031
|
-
fontSize: 12
|
11032
|
-
}
|
11033
|
-
},
|
11034
|
-
overline: {
|
11035
|
-
fontFamily: 'Roboto',
|
11036
|
-
fontSize: 11,
|
11037
|
-
fontWeight: 400,
|
11038
|
-
letterSpacing: 1,
|
11039
|
-
lineHeight: 2.66,
|
11040
|
-
'@media(max-width: 885px)': {
|
11041
|
-
fontSize: 12
|
11042
|
-
}
|
11043
|
-
},
|
11044
|
-
h6: {
|
11045
|
-
fontFamily: 'Nunito',
|
11046
|
-
fontSize: 16,
|
11047
|
-
fontWeight: 600,
|
11048
|
-
lineHeight: 1.6,
|
11049
|
-
'@media(max-width: 885px)': {
|
11050
|
-
fontSize: 17
|
11051
|
-
}
|
11052
|
-
},
|
11053
|
-
h5: {
|
11054
|
-
fontFamily: 'Nunito',
|
11055
|
-
fontSize: 18,
|
11056
|
-
fontWeight: 600,
|
11057
|
-
lineHeight: 1.8
|
11058
|
-
},
|
11059
|
-
h4: {
|
11060
|
-
fontFamily: 'Nunito',
|
11061
|
-
fontSize: 20,
|
11062
|
-
fontWeight: 600,
|
11063
|
-
letterSpacing: 0.25,
|
11064
|
-
lineHeight: 1
|
11065
|
-
},
|
11066
|
-
h3: {
|
11067
|
-
fontFamily: 'Nunito',
|
11068
|
-
fontSize: 28,
|
11069
|
-
fontWeight: 500,
|
11070
|
-
lineHeight: 1.2
|
11071
|
-
},
|
11072
|
-
h2: {
|
11073
|
-
fontFamily: 'Nunito',
|
11074
|
-
fontSize: 32,
|
11075
|
-
fontWeight: 400,
|
11076
|
-
letterSpacing: -0.5,
|
11077
|
-
lineHeight: 1.2
|
11078
|
-
},
|
11079
|
-
h1: {
|
11080
|
-
fontFamily: 'Nunito',
|
11081
|
-
fontSize: 40,
|
11082
|
-
fontWeight: 300,
|
11083
|
-
letterSpacing: -1.5,
|
11084
|
-
lineHeight: 1.4
|
11085
|
-
},
|
11086
|
-
button: {
|
11087
|
-
fontFamily: 'Roboto',
|
11088
|
-
textTransform: 'unset',
|
11089
|
-
fontWeightLight: 300,
|
11090
|
-
fontSize: 13,
|
11091
|
-
lineHeight: 'normal',
|
11092
|
-
'@media(max-width: 885px)': {
|
11093
|
-
fontSize: 14
|
11094
|
-
}
|
11095
|
-
}
|
11096
|
-
};
|
11097
|
-
|
11098
10962
|
const palette = {
|
11099
10963
|
primary: {
|
11100
10964
|
50: "#E4ECF4",
|
@@ -11238,6 +11102,16 @@ const palette = {
|
|
11238
11102
|
divider: "rgba(16,24,64,0.12)"
|
11239
11103
|
};
|
11240
11104
|
|
11105
|
+
const breakpoints = createBreakpoints({
|
11106
|
+
values: {
|
11107
|
+
xs: 0,
|
11108
|
+
sm: 600,
|
11109
|
+
md: 960,
|
11110
|
+
lg: 1280,
|
11111
|
+
xl: 1920
|
11112
|
+
}
|
11113
|
+
});
|
11114
|
+
|
11241
11115
|
const mixins = {
|
11242
11116
|
toolbar: {
|
11243
11117
|
minHeight: 48,
|
@@ -11247,7 +11121,131 @@ const mixins = {
|
|
11247
11121
|
}
|
11248
11122
|
};
|
11249
11123
|
|
11250
|
-
const
|
11124
|
+
const typography = {
|
11125
|
+
fontSize: 13,
|
11126
|
+
body3: {
|
11127
|
+
fontFamily: 'Roboto',
|
11128
|
+
fontWeight: 310,
|
11129
|
+
fontSize: 12,
|
11130
|
+
letterSpacing: 0.17,
|
11131
|
+
lineHeight: 1.2,
|
11132
|
+
[breakpoints.down('md')]: {
|
11133
|
+
fontSize: 11
|
11134
|
+
}
|
11135
|
+
},
|
11136
|
+
body1: {
|
11137
|
+
fontFamily: 'Roboto',
|
11138
|
+
fontSize: 14,
|
11139
|
+
fontWeight: 400,
|
11140
|
+
letterSpacing: 0.15,
|
11141
|
+
lineHeight: 1.4,
|
11142
|
+
'@media(max-width: 885px)': {
|
11143
|
+
fontSize: 15
|
11144
|
+
}
|
11145
|
+
},
|
11146
|
+
body2: {
|
11147
|
+
fontFamily: 'Roboto',
|
11148
|
+
fontSize: 13,
|
11149
|
+
fontWeight: 400,
|
11150
|
+
letterSpacing: 0.17,
|
11151
|
+
lineHeight: 1.2,
|
11152
|
+
'@media(max-width: 885px)': {
|
11153
|
+
fontSize: 14
|
11154
|
+
}
|
11155
|
+
},
|
11156
|
+
subtitle1: {
|
11157
|
+
fontFamily: 'Roboto',
|
11158
|
+
fontSize: 14,
|
11159
|
+
fontWeight: 500,
|
11160
|
+
letterSpacing: 0.15,
|
11161
|
+
lineHeight: 1.4,
|
11162
|
+
'@media(max-width: 885px)': {
|
11163
|
+
fontSize: 15
|
11164
|
+
}
|
11165
|
+
},
|
11166
|
+
subtitle2: {
|
11167
|
+
fontFamily: 'Roboto',
|
11168
|
+
fontSize: 13,
|
11169
|
+
fontWeight: 500,
|
11170
|
+
letterSpacing: 0.1,
|
11171
|
+
lineHeight: 1.4,
|
11172
|
+
'@media(max-width: 885px)': {
|
11173
|
+
fontSize: 14
|
11174
|
+
}
|
11175
|
+
},
|
11176
|
+
caption: {
|
11177
|
+
fontFamily: 'Roboto',
|
11178
|
+
fontSize: 11,
|
11179
|
+
fontWeight: 400,
|
11180
|
+
letterSpacing: 0.4,
|
11181
|
+
lineHeight: 1.4,
|
11182
|
+
'@media(max-width: 885px)': {
|
11183
|
+
fontSize: 12
|
11184
|
+
}
|
11185
|
+
},
|
11186
|
+
overline: {
|
11187
|
+
fontFamily: 'Roboto',
|
11188
|
+
fontSize: 11,
|
11189
|
+
fontWeight: 400,
|
11190
|
+
letterSpacing: 1,
|
11191
|
+
lineHeight: 2.66,
|
11192
|
+
'@media(max-width: 885px)': {
|
11193
|
+
fontSize: 12
|
11194
|
+
}
|
11195
|
+
},
|
11196
|
+
h6: {
|
11197
|
+
fontFamily: 'Nunito',
|
11198
|
+
fontSize: 16,
|
11199
|
+
fontWeight: 600,
|
11200
|
+
lineHeight: 1.6,
|
11201
|
+
'@media(max-width: 885px)': {
|
11202
|
+
fontSize: 17
|
11203
|
+
}
|
11204
|
+
},
|
11205
|
+
h5: {
|
11206
|
+
fontFamily: 'Nunito',
|
11207
|
+
fontSize: 18,
|
11208
|
+
fontWeight: 600,
|
11209
|
+
lineHeight: 1.8
|
11210
|
+
},
|
11211
|
+
h4: {
|
11212
|
+
fontFamily: 'Nunito',
|
11213
|
+
fontSize: 20,
|
11214
|
+
fontWeight: 600,
|
11215
|
+
letterSpacing: 0.25,
|
11216
|
+
lineHeight: 1
|
11217
|
+
},
|
11218
|
+
h3: {
|
11219
|
+
fontFamily: 'Nunito',
|
11220
|
+
fontSize: 28,
|
11221
|
+
fontWeight: 500,
|
11222
|
+
lineHeight: 1.2
|
11223
|
+
},
|
11224
|
+
h2: {
|
11225
|
+
fontFamily: 'Nunito',
|
11226
|
+
fontSize: 32,
|
11227
|
+
fontWeight: 400,
|
11228
|
+
letterSpacing: -0.5,
|
11229
|
+
lineHeight: 1.2
|
11230
|
+
},
|
11231
|
+
h1: {
|
11232
|
+
fontFamily: 'Nunito',
|
11233
|
+
fontSize: 40,
|
11234
|
+
fontWeight: 300,
|
11235
|
+
letterSpacing: -1.5,
|
11236
|
+
lineHeight: 1.4
|
11237
|
+
},
|
11238
|
+
button: {
|
11239
|
+
fontFamily: 'Roboto',
|
11240
|
+
textTransform: 'unset',
|
11241
|
+
fontWeightLight: 300,
|
11242
|
+
fontSize: 13,
|
11243
|
+
lineHeight: 'normal',
|
11244
|
+
'@media(max-width: 885px)': {
|
11245
|
+
fontSize: 14
|
11246
|
+
}
|
11247
|
+
}
|
11248
|
+
};
|
11251
11249
|
|
11252
11250
|
const themeOptions = {
|
11253
11251
|
components,
|
@@ -11255,8 +11253,7 @@ const themeOptions = {
|
|
11255
11253
|
palette,
|
11256
11254
|
spacing: 8,
|
11257
11255
|
mixins,
|
11258
|
-
breakpoints
|
11259
|
-
shadows
|
11256
|
+
breakpoints
|
11260
11257
|
};
|
11261
11258
|
|
11262
11259
|
const SincoTheme = createTheme(Object.assign({}, themeOptions));
|
@@ -16646,7 +16643,7 @@ var EmptyStateImageUrls;
|
|
16646
16643
|
(function (EmptyStateImageUrls) {
|
16647
16644
|
EmptyStateImageUrls["error"] = "error";
|
16648
16645
|
EmptyStateImageUrls["search"] = "search";
|
16649
|
-
EmptyStateImageUrls["
|
16646
|
+
EmptyStateImageUrls["noresult"] = "noresult";
|
16650
16647
|
EmptyStateImageUrls["create"] = "create";
|
16651
16648
|
})(EmptyStateImageUrls || (EmptyStateImageUrls = {}));
|
16652
16649
|
const EmptyStateComponent = ({
|
@@ -17159,6 +17156,15 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
|
|
17159
17156
|
}), 'Close');
|
17160
17157
|
default_1 = Close.default = _default;
|
17161
17158
|
|
17159
|
+
const stylesDrawer = {
|
17160
|
+
display: 'flex',
|
17161
|
+
flexDirection: 'column',
|
17162
|
+
alignContent: 'flex-start',
|
17163
|
+
justifyContent: 'space-between',
|
17164
|
+
width: '530px',
|
17165
|
+
height: '100%',
|
17166
|
+
overflow: 'hidden'
|
17167
|
+
};
|
17162
17168
|
const stylesDrawerHeader = {
|
17163
17169
|
display: 'flex',
|
17164
17170
|
alignContent: 'center',
|
@@ -17187,31 +17193,22 @@ const stylesDrawerActions = {
|
|
17187
17193
|
py: '12px',
|
17188
17194
|
px: '8px'
|
17189
17195
|
};
|
17190
|
-
const stylesDrawer = {
|
17191
|
-
display: 'flex',
|
17192
|
-
flexDirection: 'column',
|
17193
|
-
alignContent: 'flex-start',
|
17194
|
-
justifyContent: 'space-between',
|
17195
|
-
width: '530px',
|
17196
|
-
height: '100%',
|
17197
|
-
overflow: 'hidden'
|
17198
|
-
};
|
17199
17196
|
const DrawerComponent = ({
|
17200
|
-
open,
|
17201
|
-
onClose,
|
17202
|
-
anchor,
|
17203
17197
|
title,
|
17204
17198
|
content,
|
17205
|
-
actions
|
17199
|
+
actions,
|
17200
|
+
position,
|
17201
|
+
open,
|
17202
|
+
onClose
|
17206
17203
|
}) => {
|
17207
|
-
const [stateActions,
|
17208
|
-
const
|
17209
|
-
|
17204
|
+
const [stateActions, setActionsState] = useState(false);
|
17205
|
+
const handleDrawerAcciones = () => {
|
17206
|
+
setActionsState(true);
|
17210
17207
|
};
|
17211
17208
|
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
17212
17209
|
theme: SincoTheme
|
17213
17210
|
}, /*#__PURE__*/React__default.createElement(Drawer$1, {
|
17214
|
-
anchor:
|
17211
|
+
anchor: position,
|
17215
17212
|
open: open,
|
17216
17213
|
onClose: onClose
|
17217
17214
|
}, /*#__PURE__*/React__default.createElement(Box$2, {
|
@@ -17226,21 +17223,21 @@ const DrawerComponent = ({
|
|
17226
17223
|
}, /*#__PURE__*/React__default.createElement(default_1, {
|
17227
17224
|
fontSize: "small"
|
17228
17225
|
})))), /*#__PURE__*/React__default.createElement(Box$2, {
|
17229
|
-
onClick:
|
17226
|
+
onClick: handleDrawerAcciones,
|
17230
17227
|
sx: stylesDrawerContent
|
17231
17228
|
}, content), stateActions && /*#__PURE__*/React__default.createElement(Box$2, {
|
17232
17229
|
sx: stylesDrawerActions
|
17233
17230
|
}, actions))));
|
17234
17231
|
};
|
17235
17232
|
|
17236
|
-
const
|
17233
|
+
const ToastContainer = styled$1(Stack$1)(() => ({
|
17237
17234
|
position: 'fixed',
|
17238
17235
|
zIndex: 1400,
|
17239
17236
|
boxShadow: '0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)',
|
17240
17237
|
right: 16,
|
17241
17238
|
marginTop: 16
|
17242
17239
|
}));
|
17243
|
-
const
|
17240
|
+
const ToastContent = styled$1(Box$2)(({
|
17244
17241
|
theme
|
17245
17242
|
}) => ({
|
17246
17243
|
padding: theme.spacing(1.5),
|
@@ -17280,7 +17277,7 @@ const RippleIcon = styled$1(Stack$1)(({
|
|
17280
17277
|
backgroundColor: '#8FC93A1F'
|
17281
17278
|
}
|
17282
17279
|
}));
|
17283
|
-
const
|
17280
|
+
const ToastIconContainer = styled$1(Stack$1)(({
|
17284
17281
|
theme
|
17285
17282
|
}) => ({
|
17286
17283
|
'&.icon-color.color-info': {
|
@@ -17301,13 +17298,13 @@ const ToastNotification = toast => {
|
|
17301
17298
|
const [stateOptions, setStateOptions] = useState(true);
|
17302
17299
|
const [progress, setProgress] = useState(100);
|
17303
17300
|
const timeProgress = toast.time || 8000;
|
17304
|
-
const
|
17301
|
+
const toastIconOption = {
|
17305
17302
|
success: /*#__PURE__*/React__default.createElement(CheckCircleRounded, null),
|
17306
17303
|
error: /*#__PURE__*/React__default.createElement(ErrorRounded, null),
|
17307
17304
|
warning: /*#__PURE__*/React__default.createElement(WarningRounded, null),
|
17308
17305
|
info: /*#__PURE__*/React__default.createElement(InfoRounded, null)
|
17309
17306
|
};
|
17310
|
-
const
|
17307
|
+
const ToastIconConfig = toastIconOption[toast.type || 'info'];
|
17311
17308
|
const toastColorOption = {
|
17312
17309
|
success: 'success',
|
17313
17310
|
error: 'error',
|
@@ -17318,10 +17315,9 @@ const ToastNotification = toast => {
|
|
17318
17315
|
const closeToast = () => {
|
17319
17316
|
setStateToast(false);
|
17320
17317
|
};
|
17321
|
-
const
|
17318
|
+
const toggleToastOptions = () => {
|
17322
17319
|
setStateOptions(prevShowOptions => !prevShowOptions);
|
17323
17320
|
};
|
17324
|
-
const seeOptions = toast.seeMore;
|
17325
17321
|
useEffect(() => {
|
17326
17322
|
let seconds = 0;
|
17327
17323
|
const interval = setInterval(() => {
|
@@ -17346,15 +17342,15 @@ const ToastNotification = toast => {
|
|
17346
17342
|
right: 16,
|
17347
17343
|
position: "absolute",
|
17348
17344
|
zIndex: 1400
|
17349
|
-
}, /*#__PURE__*/React__default.createElement(
|
17345
|
+
}, /*#__PURE__*/React__default.createElement(ToastContainer, {
|
17350
17346
|
position: 'fixed'
|
17351
|
-
}, /*#__PURE__*/React__default.createElement(
|
17347
|
+
}, /*#__PURE__*/React__default.createElement(ToastContent, {
|
17352
17348
|
className: `color-${toast.type || 'info'}`
|
17353
17349
|
}, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
|
17354
17350
|
className: `ripple-${toast.type || 'info'}`
|
17355
|
-
}, /*#__PURE__*/React__default.createElement(
|
17351
|
+
}, /*#__PURE__*/React__default.createElement(ToastIconContainer, {
|
17356
17352
|
className: `icon-color color-${toast.type || 'info'}`
|
17357
|
-
},
|
17353
|
+
}, ToastIconConfig)), /*#__PURE__*/React__default.createElement(Divider$1, {
|
17358
17354
|
orientation: "vertical",
|
17359
17355
|
flexItem: true
|
17360
17356
|
}), /*#__PURE__*/React__default.createElement(Stack$1, {
|
@@ -17404,8 +17400,8 @@ const ToastNotification = toast => {
|
|
17404
17400
|
}, toast.actions && /*#__PURE__*/React__default.createElement(Stack$1, {
|
17405
17401
|
flexDirection: "row",
|
17406
17402
|
gap: 1
|
17407
|
-
}, toast.actions),
|
17408
|
-
onClick:
|
17403
|
+
}, toast.actions), toast.seeMore && /*#__PURE__*/React__default.createElement(Button$1, {
|
17404
|
+
onClick: toggleToastOptions,
|
17409
17405
|
size: "small",
|
17410
17406
|
variant: "text",
|
17411
17407
|
color: toastColorConfig,
|
@@ -17421,31 +17417,26 @@ const ToastNotification = toast => {
|
|
17421
17417
|
})))));
|
17422
17418
|
};
|
17423
17419
|
|
17424
|
-
const
|
17420
|
+
const PageContent = styled$1(Stack$1)(({
|
17425
17421
|
theme
|
17426
17422
|
}) => ({
|
17427
|
-
backgroundColor:
|
17428
|
-
boxShadow:
|
17423
|
+
backgroundColor: "#fff",
|
17424
|
+
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)",
|
17429
17425
|
zIndex: 100,
|
17430
|
-
padding:
|
17431
|
-
justifyContent:
|
17426
|
+
padding: "8px 24px",
|
17427
|
+
justifyContent: "space-between",
|
17432
17428
|
minHeight: 39,
|
17433
|
-
position:
|
17434
|
-
width:
|
17429
|
+
position: "fixed",
|
17430
|
+
width: "100%"
|
17435
17431
|
}));
|
17436
|
-
const
|
17437
|
-
title,
|
17438
|
-
subtitle,
|
17439
|
-
actions,
|
17440
|
-
buttonBack
|
17441
|
-
}) => {
|
17432
|
+
const PageHeader = page => {
|
17442
17433
|
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
17443
17434
|
theme: SincoTheme
|
17444
17435
|
}, /*#__PURE__*/React__default.createElement("div", {
|
17445
17436
|
style: {
|
17446
17437
|
minHeight: 56
|
17447
17438
|
}
|
17448
|
-
}, /*#__PURE__*/React__default.createElement(
|
17439
|
+
}, /*#__PURE__*/React__default.createElement(PageContent, null, /*#__PURE__*/React__default.createElement(Stack$1, {
|
17449
17440
|
width: "90%",
|
17450
17441
|
justifyContent: "space-between",
|
17451
17442
|
flexDirection: "row",
|
@@ -17454,17 +17445,17 @@ const PageHeaderComponent = ({
|
|
17454
17445
|
gap: 1.5,
|
17455
17446
|
flexDirection: "row",
|
17456
17447
|
alignItems: "center"
|
17457
|
-
}, buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17448
|
+
}, page.buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17458
17449
|
variant: "h6",
|
17459
17450
|
color: "text.primary"
|
17460
|
-
}, title), /*#__PURE__*/React__default.createElement(Typography$1, {
|
17451
|
+
}, page.title), /*#__PURE__*/React__default.createElement(Typography$1, {
|
17461
17452
|
variant: "caption",
|
17462
17453
|
color: "text.secondary"
|
17463
|
-
}, subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
17454
|
+
}, page.subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
17464
17455
|
gap: 1,
|
17465
17456
|
alignItems: "center",
|
17466
17457
|
flexDirection: "row"
|
17467
|
-
}, actions)))));
|
17458
|
+
}, page.actions)))));
|
17468
17459
|
};
|
17469
17460
|
|
17470
17461
|
var classof$2 = classofRaw$2;
|
@@ -22852,7 +22843,7 @@ const DynamicColor = async src => {
|
|
22852
22843
|
const imageElement = document.createElement("img");
|
22853
22844
|
imageElement.src = src;
|
22854
22845
|
const dynamicPalette = await themeFromImage(imageElement);
|
22855
|
-
const
|
22846
|
+
const extractHctInstance = color => {
|
22856
22847
|
const {
|
22857
22848
|
hue,
|
22858
22849
|
chroma,
|
@@ -22868,8 +22859,8 @@ const DynamicColor = async src => {
|
|
22868
22859
|
dark,
|
22869
22860
|
light
|
22870
22861
|
} = dynamicPalette.schemes;
|
22871
|
-
const primaryMain =
|
22872
|
-
const secondaryMain =
|
22862
|
+
const primaryMain = extractHctInstance(primary);
|
22863
|
+
const secondaryMain = extractHctInstance(secondary);
|
22873
22864
|
const primaryLight = hexFromArgb(dark.primary);
|
22874
22865
|
const primaryDark = hexFromArgb(light.primary);
|
22875
22866
|
const secondaryLight = hexFromArgb(dark.secondary);
|
@@ -22897,7 +22888,7 @@ const DynamicColor = async src => {
|
|
22897
22888
|
};
|
22898
22889
|
};
|
22899
22890
|
|
22900
|
-
const
|
22891
|
+
const useDynamicColor = url => {
|
22901
22892
|
const [primary, setPrimary] = useState(SincoTheme.palette.primary);
|
22902
22893
|
const [secondary, setSecondary] = useState(SincoTheme.palette.secondary);
|
22903
22894
|
const [background, setBackground] = useState(SincoTheme.palette.background);
|
@@ -22922,4 +22913,4 @@ const UseDynamicColor = url => {
|
|
22922
22913
|
};
|
22923
22914
|
};
|
22924
22915
|
|
22925
|
-
export { DrawerComponent, EmptyStateComponent, EmptyStateImageUrls,
|
22916
|
+
export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, PageContent, PageHeader, SincoTheme, ToastNotification, useDynamicColor };
|
package/package.json
CHANGED
package/src/index.d.ts
ADDED
@@ -1,11 +1,11 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
-
export type
|
2
|
+
export type handleDrawerPosition = 'left' | 'right';
|
3
3
|
export interface DrawerComponentProperties {
|
4
|
-
open: boolean;
|
5
|
-
onClose: () => void;
|
6
|
-
anchor?: Anchor;
|
7
4
|
title: string;
|
8
5
|
content: ReactNode;
|
9
6
|
actions: ReactNode;
|
7
|
+
position?: handleDrawerPosition;
|
8
|
+
open: boolean;
|
9
|
+
onClose: () => void;
|
10
10
|
}
|
11
|
-
export declare const DrawerComponent: ({
|
11
|
+
export declare const DrawerComponent: ({ title, content, actions, position, open, onClose, }: DrawerComponentProperties) => JSX.Element;
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
export type EmptyStateStates = 'create' | 'error' | 'noresult' | 'search';
|
3
|
+
export declare enum EmptyStateImageUrls {
|
4
|
+
error = "error",
|
5
|
+
search = "search",
|
6
|
+
noresult = "noresult",
|
7
|
+
create = "create"
|
8
|
+
}
|
2
9
|
export interface EmptyStateProperties {
|
3
10
|
state?: EmptyStateStates;
|
4
11
|
title?: string;
|
5
12
|
content?: string;
|
6
13
|
actions?: ReactNode;
|
7
14
|
}
|
8
|
-
export type EmptyStateStates = 'create' | 'error' | 'noResult' | 'search';
|
9
|
-
export declare enum EmptyStateImageUrls {
|
10
|
-
error = "error",
|
11
|
-
search = "search",
|
12
|
-
noResult = "noResult",
|
13
|
-
create = "create"
|
14
|
-
}
|
15
15
|
export declare const EmptyStateComponent: ({ state, title, content, actions, }: EmptyStateProperties) => JSX.Element;
|
@@ -1,5 +1,11 @@
|
|
1
|
-
import React from
|
2
|
-
|
1
|
+
import React from "react";
|
2
|
+
interface Pageheader {
|
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> & {
|
3
9
|
children?: React.ReactNode;
|
4
10
|
direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
|
5
11
|
spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
|
@@ -9,11 +15,5 @@ export declare const PageHeaderContent: import("@emotion/styled").StyledComponen
|
|
9
15
|
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
10
16
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
11
17
|
}, 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>, {}, {}>;
|
12
|
-
|
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;
|
18
|
+
export declare const PageHeader: (page: Pageheader) => JSX.Element;
|
19
19
|
export {};
|
@@ -1,11 +1,12 @@
|
|
1
|
-
import
|
1
|
+
import { ReactElement } from 'react';
|
2
|
+
import React from 'react';
|
2
3
|
export interface Option {
|
3
4
|
}
|
4
5
|
export interface ToastNotificationProperties {
|
5
6
|
type?: string;
|
7
|
+
subtitle?: string;
|
6
8
|
time?: number | any;
|
7
9
|
title?: string;
|
8
|
-
subtitle?: string;
|
9
10
|
dataOpt?: Option[];
|
10
11
|
actions?: React.ReactNode;
|
11
12
|
seeMore?: boolean;
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './useDynamicColor';
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import { PaletteColor, TypeBackground } from "@mui/material";
|
2
|
-
declare const DynamicColor: (src: string) => Promise<{
|
2
|
+
export declare const DynamicColor: (src: string) => Promise<{
|
3
3
|
primaryColor: PaletteColor;
|
4
4
|
secondaryColor: PaletteColor;
|
5
5
|
backgroundColor: TypeBackground;
|
6
6
|
}>;
|
7
|
-
export default DynamicColor;
|
package/src/Index.d.ts
DELETED
package/src/lib/Hooks/Index.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './UseDynamicColor';
|
File without changes
|
File without changes
|
File without changes
|