@sinco/react 1.1.2-rc.85 → 1.1.2-rc.87
Sign up to get free protection for your applications and to get access to all the features.
package/index.esm.js
CHANGED
@@ -2117,6 +2117,41 @@ function setRef(ref, value) {
|
|
2117
2117
|
const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
2118
2118
|
var useEnhancedEffect$1 = useEnhancedEffect;
|
2119
2119
|
|
2120
|
+
function useControlled({
|
2121
|
+
controlled,
|
2122
|
+
default: defaultProp,
|
2123
|
+
name,
|
2124
|
+
state = 'value'
|
2125
|
+
}) {
|
2126
|
+
// isControlled is ignored in the hook dependency lists as it should never change.
|
2127
|
+
const {
|
2128
|
+
current: isControlled
|
2129
|
+
} = React.useRef(controlled !== undefined);
|
2130
|
+
const [valueState, setValue] = React.useState(defaultProp);
|
2131
|
+
const value = isControlled ? controlled : valueState;
|
2132
|
+
if (process.env.NODE_ENV !== 'production') {
|
2133
|
+
React.useEffect(() => {
|
2134
|
+
if (isControlled !== (controlled !== undefined)) {
|
2135
|
+
console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
2136
|
+
}
|
2137
|
+
}, [state, name, controlled]);
|
2138
|
+
const {
|
2139
|
+
current: defaultValue
|
2140
|
+
} = React.useRef(defaultProp);
|
2141
|
+
React.useEffect(() => {
|
2142
|
+
if (!isControlled && defaultValue !== defaultProp) {
|
2143
|
+
console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
|
2144
|
+
}
|
2145
|
+
}, [JSON.stringify(defaultProp)]);
|
2146
|
+
}
|
2147
|
+
const setValueIfUncontrolled = React.useCallback(newValue => {
|
2148
|
+
if (!isControlled) {
|
2149
|
+
setValue(newValue);
|
2150
|
+
}
|
2151
|
+
}, []);
|
2152
|
+
return [value, setValueIfUncontrolled];
|
2153
|
+
}
|
2154
|
+
|
2120
2155
|
/**
|
2121
2156
|
* Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
|
2122
2157
|
* See RFC in https://github.com/reactjs/rfcs/pull/220
|
@@ -3205,7 +3240,7 @@ const internal_processStyles = (tag, processor) => {
|
|
3205
3240
|
}
|
3206
3241
|
};
|
3207
3242
|
|
3208
|
-
const _excluded$
|
3243
|
+
const _excluded$t = ["values", "unit", "step"];
|
3209
3244
|
const sortBreakpointsValues = values => {
|
3210
3245
|
const breakpointsAsArray = Object.keys(values).map(key => ({
|
3211
3246
|
key,
|
@@ -3240,7 +3275,7 @@ function createBreakpoints(breakpoints) {
|
|
3240
3275
|
unit = 'px',
|
3241
3276
|
step = 5
|
3242
3277
|
} = breakpoints,
|
3243
|
-
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$
|
3278
|
+
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$t);
|
3244
3279
|
const sortedValues = sortBreakpointsValues(values);
|
3245
3280
|
const keys = Object.keys(sortedValues);
|
3246
3281
|
function up(key) {
|
@@ -4336,7 +4371,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
|
|
4336
4371
|
styleFunctionSx.filterProps = ['sx'];
|
4337
4372
|
var styleFunctionSx$1 = styleFunctionSx;
|
4338
4373
|
|
4339
|
-
const _excluded$
|
4374
|
+
const _excluded$s = ["breakpoints", "palette", "spacing", "shape"];
|
4340
4375
|
function createTheme$1(options = {}, ...args) {
|
4341
4376
|
const {
|
4342
4377
|
breakpoints: breakpointsInput = {},
|
@@ -4344,7 +4379,7 @@ function createTheme$1(options = {}, ...args) {
|
|
4344
4379
|
spacing: spacingInput,
|
4345
4380
|
shape: shapeInput = {}
|
4346
4381
|
} = options,
|
4347
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
4382
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$s);
|
4348
4383
|
const breakpoints = createBreakpoints(breakpointsInput);
|
4349
4384
|
const spacing = createSpacing(spacingInput);
|
4350
4385
|
let muiTheme = deepmerge({
|
@@ -4382,7 +4417,7 @@ function useTheme$1(defaultTheme = systemDefaultTheme$1) {
|
|
4382
4417
|
return useTheme$2(defaultTheme);
|
4383
4418
|
}
|
4384
4419
|
|
4385
|
-
const _excluded$
|
4420
|
+
const _excluded$r = ["sx"];
|
4386
4421
|
const splitProps = props => {
|
4387
4422
|
var _props$theme$unstable, _props$theme;
|
4388
4423
|
const result = {
|
@@ -4403,7 +4438,7 @@ function extendSxProp(props) {
|
|
4403
4438
|
const {
|
4404
4439
|
sx: inSx
|
4405
4440
|
} = props,
|
4406
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
4441
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$r);
|
4407
4442
|
const {
|
4408
4443
|
systemProps,
|
4409
4444
|
otherProps
|
@@ -4429,7 +4464,7 @@ function extendSxProp(props) {
|
|
4429
4464
|
|
4430
4465
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
4431
4466
|
|
4432
|
-
const _excluded$
|
4467
|
+
const _excluded$q = ["className", "component"];
|
4433
4468
|
function createBox(options = {}) {
|
4434
4469
|
const {
|
4435
4470
|
themeId,
|
@@ -4447,7 +4482,7 @@ function createBox(options = {}) {
|
|
4447
4482
|
className,
|
4448
4483
|
component = 'div'
|
4449
4484
|
} = _extendSxProp,
|
4450
|
-
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$
|
4485
|
+
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$q);
|
4451
4486
|
return /*#__PURE__*/jsx(BoxRoot, _extends({
|
4452
4487
|
as: component,
|
4453
4488
|
ref: ref,
|
@@ -4458,7 +4493,7 @@ function createBox(options = {}) {
|
|
4458
4493
|
return Box;
|
4459
4494
|
}
|
4460
4495
|
|
4461
|
-
const _excluded$
|
4496
|
+
const _excluded$p = ["variant"];
|
4462
4497
|
function isEmpty$1(string) {
|
4463
4498
|
return string.length === 0;
|
4464
4499
|
}
|
@@ -4472,7 +4507,7 @@ function propsToClassKey(props) {
|
|
4472
4507
|
const {
|
4473
4508
|
variant
|
4474
4509
|
} = props,
|
4475
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
4510
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$p);
|
4476
4511
|
let classKey = variant || '';
|
4477
4512
|
Object.keys(other).sort().forEach(key => {
|
4478
4513
|
if (key === 'color') {
|
@@ -4484,7 +4519,7 @@ function propsToClassKey(props) {
|
|
4484
4519
|
return classKey;
|
4485
4520
|
}
|
4486
4521
|
|
4487
|
-
const _excluded$
|
4522
|
+
const _excluded$o = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
|
4488
4523
|
function isEmpty(obj) {
|
4489
4524
|
return Object.keys(obj).length === 0;
|
4490
4525
|
}
|
@@ -4621,7 +4656,7 @@ function createStyled(input = {}) {
|
|
4621
4656
|
// For more details: https://github.com/mui/material-ui/pull/37908
|
4622
4657
|
overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
|
4623
4658
|
} = inputOptions,
|
4624
|
-
options = _objectWithoutPropertiesLoose(inputOptions, _excluded$
|
4659
|
+
options = _objectWithoutPropertiesLoose(inputOptions, _excluded$o);
|
4625
4660
|
|
4626
4661
|
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
|
4627
4662
|
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
|
@@ -5042,7 +5077,7 @@ function lighten(color, coefficient) {
|
|
5042
5077
|
return recomposeColor(color);
|
5043
5078
|
}
|
5044
5079
|
|
5045
|
-
const _excluded$
|
5080
|
+
const _excluded$n = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
5046
5081
|
const defaultTheme$3 = createTheme$1();
|
5047
5082
|
// widening Theme to any so that the consumer can own the theme structure.
|
5048
5083
|
const defaultCreateStyledComponent = systemStyled('div', {
|
@@ -5175,7 +5210,7 @@ function createStack(options = {}) {
|
|
5175
5210
|
className,
|
5176
5211
|
useFlexGap = false
|
5177
5212
|
} = props,
|
5178
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
5213
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$n);
|
5179
5214
|
const ownerState = {
|
5180
5215
|
direction,
|
5181
5216
|
spacing,
|
@@ -5349,7 +5384,7 @@ const green = {
|
|
5349
5384
|
};
|
5350
5385
|
var green$1 = green;
|
5351
5386
|
|
5352
|
-
const _excluded$
|
5387
|
+
const _excluded$m = ["mode", "contrastThreshold", "tonalOffset"];
|
5353
5388
|
const light = {
|
5354
5389
|
// The colors used to style the text.
|
5355
5390
|
text: {
|
@@ -5518,7 +5553,7 @@ function createPalette(palette) {
|
|
5518
5553
|
contrastThreshold = 3,
|
5519
5554
|
tonalOffset = 0.2
|
5520
5555
|
} = palette,
|
5521
|
-
other = _objectWithoutPropertiesLoose(palette, _excluded$
|
5556
|
+
other = _objectWithoutPropertiesLoose(palette, _excluded$m);
|
5522
5557
|
const primary = palette.primary || getDefaultPrimary(mode);
|
5523
5558
|
const secondary = palette.secondary || getDefaultSecondary(mode);
|
5524
5559
|
const error = palette.error || getDefaultError(mode);
|
@@ -5642,7 +5677,7 @@ const theme2 = createTheme({ palette: {
|
|
5642
5677
|
return paletteOutput;
|
5643
5678
|
}
|
5644
5679
|
|
5645
|
-
const _excluded$
|
5680
|
+
const _excluded$l = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
|
5646
5681
|
function round(value) {
|
5647
5682
|
return Math.round(value * 1e5) / 1e5;
|
5648
5683
|
}
|
@@ -5673,7 +5708,7 @@ function createTypography(palette, typography) {
|
|
5673
5708
|
allVariants,
|
5674
5709
|
pxToRem: pxToRem2
|
5675
5710
|
} = _ref,
|
5676
|
-
other = _objectWithoutPropertiesLoose(_ref, _excluded$
|
5711
|
+
other = _objectWithoutPropertiesLoose(_ref, _excluded$l);
|
5677
5712
|
if (process.env.NODE_ENV !== 'production') {
|
5678
5713
|
if (typeof fontSize !== 'number') {
|
5679
5714
|
console.error('MUI: `fontSize` is required to be a number.');
|
@@ -5741,7 +5776,7 @@ function createShadow(...px) {
|
|
5741
5776
|
const shadows$1 = ['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)];
|
5742
5777
|
var shadows$2 = shadows$1;
|
5743
5778
|
|
5744
|
-
const _excluded$
|
5779
|
+
const _excluded$k = ["duration", "easing", "delay"];
|
5745
5780
|
// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
|
5746
5781
|
// to learn the context in which each easing should be used.
|
5747
5782
|
const easing = {
|
@@ -5792,7 +5827,7 @@ function createTransitions(inputTransitions) {
|
|
5792
5827
|
easing: easingOption = mergedEasing.easeInOut,
|
5793
5828
|
delay = 0
|
5794
5829
|
} = options,
|
5795
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
5830
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$k);
|
5796
5831
|
if (process.env.NODE_ENV !== 'production') {
|
5797
5832
|
const isString = value => typeof value === 'string';
|
5798
5833
|
// IE11 support, replace with Number.isNaN
|
@@ -5842,7 +5877,7 @@ const zIndex = {
|
|
5842
5877
|
};
|
5843
5878
|
var zIndex$1 = zIndex;
|
5844
5879
|
|
5845
|
-
const _excluded$
|
5880
|
+
const _excluded$j = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
|
5846
5881
|
function createTheme(options = {}, ...args) {
|
5847
5882
|
const {
|
5848
5883
|
mixins: mixinsInput = {},
|
@@ -5850,7 +5885,7 @@ function createTheme(options = {}, ...args) {
|
|
5850
5885
|
transitions: transitionsInput = {},
|
5851
5886
|
typography: typographyInput = {}
|
5852
5887
|
} = options,
|
5853
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
5888
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$j);
|
5854
5889
|
if (options.vars) {
|
5855
5890
|
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
|
5856
5891
|
Please use another name.` : formatMuiErrorMessage(18));
|
@@ -5957,8 +5992,8 @@ function getTypographyUtilityClass(slot) {
|
|
5957
5992
|
}
|
5958
5993
|
generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
|
5959
5994
|
|
5960
|
-
const _excluded$
|
5961
|
-
const useUtilityClasses$
|
5995
|
+
const _excluded$i = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
|
5996
|
+
const useUtilityClasses$e = ownerState => {
|
5962
5997
|
const {
|
5963
5998
|
align,
|
5964
5999
|
gutterBottom,
|
@@ -6044,7 +6079,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
|
|
6044
6079
|
variant = 'body1',
|
6045
6080
|
variantMapping = defaultVariantMapping
|
6046
6081
|
} = props,
|
6047
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
6082
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$i);
|
6048
6083
|
const ownerState = _extends({}, props, {
|
6049
6084
|
align,
|
6050
6085
|
color,
|
@@ -6057,7 +6092,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
|
|
6057
6092
|
variantMapping
|
6058
6093
|
});
|
6059
6094
|
const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
|
6060
|
-
const classes = useUtilityClasses$
|
6095
|
+
const classes = useUtilityClasses$e(ownerState);
|
6061
6096
|
return /*#__PURE__*/jsx(TypographyRoot, _extends({
|
6062
6097
|
as: Component,
|
6063
6098
|
ref: ref,
|
@@ -6142,6 +6177,19 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
|
|
6142
6177
|
} : void 0;
|
6143
6178
|
var Typography$1 = Typography;
|
6144
6179
|
|
6180
|
+
/**
|
6181
|
+
* @ignore - internal component.
|
6182
|
+
*/
|
6183
|
+
const FormControlContext = /*#__PURE__*/React.createContext(undefined);
|
6184
|
+
if (process.env.NODE_ENV !== 'production') {
|
6185
|
+
FormControlContext.displayName = 'FormControlContext';
|
6186
|
+
}
|
6187
|
+
var FormControlContext$1 = FormControlContext;
|
6188
|
+
|
6189
|
+
function useFormControl() {
|
6190
|
+
return React.useContext(FormControlContext$1);
|
6191
|
+
}
|
6192
|
+
|
6145
6193
|
function _setPrototypeOf(o, p) {
|
6146
6194
|
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
6147
6195
|
o.__proto__ = p;
|
@@ -7211,7 +7259,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
|
|
7211
7259
|
const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
|
7212
7260
|
var touchRippleClasses$1 = touchRippleClasses;
|
7213
7261
|
|
7214
|
-
const _excluded$
|
7262
|
+
const _excluded$h = ["center", "classes", "className"];
|
7215
7263
|
let _$1 = t => t,
|
7216
7264
|
_t$1,
|
7217
7265
|
_t2$1,
|
@@ -7340,7 +7388,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
|
|
7340
7388
|
classes = {},
|
7341
7389
|
className
|
7342
7390
|
} = props,
|
7343
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
7391
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$h);
|
7344
7392
|
const [ripples, setRipples] = React.useState([]);
|
7345
7393
|
const nextKey = React.useRef(0);
|
7346
7394
|
const rippleCallback = React.useRef(null);
|
@@ -7543,8 +7591,8 @@ function getButtonBaseUtilityClass(slot) {
|
|
7543
7591
|
const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
|
7544
7592
|
var buttonBaseClasses$1 = buttonBaseClasses;
|
7545
7593
|
|
7546
|
-
const _excluded$
|
7547
|
-
const useUtilityClasses$
|
7594
|
+
const _excluded$g = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
|
7595
|
+
const useUtilityClasses$d = ownerState => {
|
7548
7596
|
const {
|
7549
7597
|
disabled,
|
7550
7598
|
focusVisible,
|
@@ -7645,7 +7693,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
|
|
7645
7693
|
touchRippleRef,
|
7646
7694
|
type
|
7647
7695
|
} = props,
|
7648
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
7696
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$g);
|
7649
7697
|
const buttonRef = React.useRef(null);
|
7650
7698
|
const rippleRef = React.useRef(null);
|
7651
7699
|
const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
|
@@ -7812,7 +7860,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
|
|
7812
7860
|
tabIndex,
|
7813
7861
|
focusVisible
|
7814
7862
|
});
|
7815
|
-
const classes = useUtilityClasses$
|
7863
|
+
const classes = useUtilityClasses$d(ownerState);
|
7816
7864
|
return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
|
7817
7865
|
as: ComponentProp,
|
7818
7866
|
className: clsx(classes.root, className),
|
@@ -8003,13 +8051,762 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
|
|
8003
8051
|
} : void 0;
|
8004
8052
|
var ButtonBase$1 = ButtonBase;
|
8005
8053
|
|
8054
|
+
function getSwitchBaseUtilityClass(slot) {
|
8055
|
+
return generateUtilityClass('PrivateSwitchBase', slot);
|
8056
|
+
}
|
8057
|
+
generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
|
8058
|
+
|
8059
|
+
const _excluded$f = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
|
8060
|
+
const useUtilityClasses$c = ownerState => {
|
8061
|
+
const {
|
8062
|
+
classes,
|
8063
|
+
checked,
|
8064
|
+
disabled,
|
8065
|
+
edge
|
8066
|
+
} = ownerState;
|
8067
|
+
const slots = {
|
8068
|
+
root: ['root', checked && 'checked', disabled && 'disabled', edge && `edge${capitalize(edge)}`],
|
8069
|
+
input: ['input']
|
8070
|
+
};
|
8071
|
+
return composeClasses(slots, getSwitchBaseUtilityClass, classes);
|
8072
|
+
};
|
8073
|
+
const SwitchBaseRoot = styled$1(ButtonBase$1)(({
|
8074
|
+
ownerState
|
8075
|
+
}) => _extends({
|
8076
|
+
padding: 9,
|
8077
|
+
borderRadius: '50%'
|
8078
|
+
}, ownerState.edge === 'start' && {
|
8079
|
+
marginLeft: ownerState.size === 'small' ? -3 : -12
|
8080
|
+
}, ownerState.edge === 'end' && {
|
8081
|
+
marginRight: ownerState.size === 'small' ? -3 : -12
|
8082
|
+
}));
|
8083
|
+
const SwitchBaseInput = styled$1('input', {
|
8084
|
+
shouldForwardProp: rootShouldForwardProp
|
8085
|
+
})({
|
8086
|
+
cursor: 'inherit',
|
8087
|
+
position: 'absolute',
|
8088
|
+
opacity: 0,
|
8089
|
+
width: '100%',
|
8090
|
+
height: '100%',
|
8091
|
+
top: 0,
|
8092
|
+
left: 0,
|
8093
|
+
margin: 0,
|
8094
|
+
padding: 0,
|
8095
|
+
zIndex: 1
|
8096
|
+
});
|
8097
|
+
|
8098
|
+
/**
|
8099
|
+
* @ignore - internal component.
|
8100
|
+
*/
|
8101
|
+
const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref) {
|
8102
|
+
const {
|
8103
|
+
autoFocus,
|
8104
|
+
checked: checkedProp,
|
8105
|
+
checkedIcon,
|
8106
|
+
className,
|
8107
|
+
defaultChecked,
|
8108
|
+
disabled: disabledProp,
|
8109
|
+
disableFocusRipple = false,
|
8110
|
+
edge = false,
|
8111
|
+
icon,
|
8112
|
+
id,
|
8113
|
+
inputProps,
|
8114
|
+
inputRef,
|
8115
|
+
name,
|
8116
|
+
onBlur,
|
8117
|
+
onChange,
|
8118
|
+
onFocus,
|
8119
|
+
readOnly,
|
8120
|
+
required = false,
|
8121
|
+
tabIndex,
|
8122
|
+
type,
|
8123
|
+
value
|
8124
|
+
} = props,
|
8125
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$f);
|
8126
|
+
const [checked, setCheckedState] = useControlled({
|
8127
|
+
controlled: checkedProp,
|
8128
|
+
default: Boolean(defaultChecked),
|
8129
|
+
name: 'SwitchBase',
|
8130
|
+
state: 'checked'
|
8131
|
+
});
|
8132
|
+
const muiFormControl = useFormControl();
|
8133
|
+
const handleFocus = event => {
|
8134
|
+
if (onFocus) {
|
8135
|
+
onFocus(event);
|
8136
|
+
}
|
8137
|
+
if (muiFormControl && muiFormControl.onFocus) {
|
8138
|
+
muiFormControl.onFocus(event);
|
8139
|
+
}
|
8140
|
+
};
|
8141
|
+
const handleBlur = event => {
|
8142
|
+
if (onBlur) {
|
8143
|
+
onBlur(event);
|
8144
|
+
}
|
8145
|
+
if (muiFormControl && muiFormControl.onBlur) {
|
8146
|
+
muiFormControl.onBlur(event);
|
8147
|
+
}
|
8148
|
+
};
|
8149
|
+
const handleInputChange = event => {
|
8150
|
+
// Workaround for https://github.com/facebook/react/issues/9023
|
8151
|
+
if (event.nativeEvent.defaultPrevented) {
|
8152
|
+
return;
|
8153
|
+
}
|
8154
|
+
const newChecked = event.target.checked;
|
8155
|
+
setCheckedState(newChecked);
|
8156
|
+
if (onChange) {
|
8157
|
+
// TODO v6: remove the second argument.
|
8158
|
+
onChange(event, newChecked);
|
8159
|
+
}
|
8160
|
+
};
|
8161
|
+
let disabled = disabledProp;
|
8162
|
+
if (muiFormControl) {
|
8163
|
+
if (typeof disabled === 'undefined') {
|
8164
|
+
disabled = muiFormControl.disabled;
|
8165
|
+
}
|
8166
|
+
}
|
8167
|
+
const hasLabelFor = type === 'checkbox' || type === 'radio';
|
8168
|
+
const ownerState = _extends({}, props, {
|
8169
|
+
checked,
|
8170
|
+
disabled,
|
8171
|
+
disableFocusRipple,
|
8172
|
+
edge
|
8173
|
+
});
|
8174
|
+
const classes = useUtilityClasses$c(ownerState);
|
8175
|
+
return /*#__PURE__*/jsxs(SwitchBaseRoot, _extends({
|
8176
|
+
component: "span",
|
8177
|
+
className: clsx(classes.root, className),
|
8178
|
+
centerRipple: true,
|
8179
|
+
focusRipple: !disableFocusRipple,
|
8180
|
+
disabled: disabled,
|
8181
|
+
tabIndex: null,
|
8182
|
+
role: undefined,
|
8183
|
+
onFocus: handleFocus,
|
8184
|
+
onBlur: handleBlur,
|
8185
|
+
ownerState: ownerState,
|
8186
|
+
ref: ref
|
8187
|
+
}, other, {
|
8188
|
+
children: [/*#__PURE__*/jsx(SwitchBaseInput, _extends({
|
8189
|
+
autoFocus: autoFocus,
|
8190
|
+
checked: checkedProp,
|
8191
|
+
defaultChecked: defaultChecked,
|
8192
|
+
className: classes.input,
|
8193
|
+
disabled: disabled,
|
8194
|
+
id: hasLabelFor ? id : undefined,
|
8195
|
+
name: name,
|
8196
|
+
onChange: handleInputChange,
|
8197
|
+
readOnly: readOnly,
|
8198
|
+
ref: inputRef,
|
8199
|
+
required: required,
|
8200
|
+
ownerState: ownerState,
|
8201
|
+
tabIndex: tabIndex,
|
8202
|
+
type: type
|
8203
|
+
}, type === 'checkbox' && value === undefined ? {} : {
|
8204
|
+
value
|
8205
|
+
}, inputProps)), checked ? checkedIcon : icon]
|
8206
|
+
}));
|
8207
|
+
});
|
8208
|
+
|
8209
|
+
// NB: If changed, please update Checkbox, Switch and Radio
|
8210
|
+
// so that the API documentation is updated.
|
8211
|
+
process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
|
8212
|
+
/**
|
8213
|
+
* If `true`, the `input` element is focused during the first mount.
|
8214
|
+
*/
|
8215
|
+
autoFocus: PropTypes.bool,
|
8216
|
+
/**
|
8217
|
+
* If `true`, the component is checked.
|
8218
|
+
*/
|
8219
|
+
checked: PropTypes.bool,
|
8220
|
+
/**
|
8221
|
+
* The icon to display when the component is checked.
|
8222
|
+
*/
|
8223
|
+
checkedIcon: PropTypes.node.isRequired,
|
8224
|
+
/**
|
8225
|
+
* Override or extend the styles applied to the component.
|
8226
|
+
* See [CSS API](#css) below for more details.
|
8227
|
+
*/
|
8228
|
+
classes: PropTypes.object,
|
8229
|
+
/**
|
8230
|
+
* @ignore
|
8231
|
+
*/
|
8232
|
+
className: PropTypes.string,
|
8233
|
+
/**
|
8234
|
+
* @ignore
|
8235
|
+
*/
|
8236
|
+
defaultChecked: PropTypes.bool,
|
8237
|
+
/**
|
8238
|
+
* If `true`, the component is disabled.
|
8239
|
+
*/
|
8240
|
+
disabled: PropTypes.bool,
|
8241
|
+
/**
|
8242
|
+
* If `true`, the keyboard focus ripple is disabled.
|
8243
|
+
* @default false
|
8244
|
+
*/
|
8245
|
+
disableFocusRipple: PropTypes.bool,
|
8246
|
+
/**
|
8247
|
+
* If given, uses a negative margin to counteract the padding on one
|
8248
|
+
* side (this is often helpful for aligning the left or right
|
8249
|
+
* side of the icon with content above or below, without ruining the border
|
8250
|
+
* size and shape).
|
8251
|
+
* @default false
|
8252
|
+
*/
|
8253
|
+
edge: PropTypes.oneOf(['end', 'start', false]),
|
8254
|
+
/**
|
8255
|
+
* The icon to display when the component is unchecked.
|
8256
|
+
*/
|
8257
|
+
icon: PropTypes.node.isRequired,
|
8258
|
+
/**
|
8259
|
+
* The id of the `input` element.
|
8260
|
+
*/
|
8261
|
+
id: PropTypes.string,
|
8262
|
+
/**
|
8263
|
+
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
8264
|
+
*/
|
8265
|
+
inputProps: PropTypes.object,
|
8266
|
+
/**
|
8267
|
+
* Pass a ref to the `input` element.
|
8268
|
+
*/
|
8269
|
+
inputRef: refType$1,
|
8270
|
+
/*
|
8271
|
+
* @ignore
|
8272
|
+
*/
|
8273
|
+
name: PropTypes.string,
|
8274
|
+
/**
|
8275
|
+
* @ignore
|
8276
|
+
*/
|
8277
|
+
onBlur: PropTypes.func,
|
8278
|
+
/**
|
8279
|
+
* Callback fired when the state is changed.
|
8280
|
+
*
|
8281
|
+
* @param {object} event The event source of the callback.
|
8282
|
+
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
|
8283
|
+
*/
|
8284
|
+
onChange: PropTypes.func,
|
8285
|
+
/**
|
8286
|
+
* @ignore
|
8287
|
+
*/
|
8288
|
+
onFocus: PropTypes.func,
|
8289
|
+
/**
|
8290
|
+
* It prevents the user from changing the value of the field
|
8291
|
+
* (not from interacting with the field).
|
8292
|
+
*/
|
8293
|
+
readOnly: PropTypes.bool,
|
8294
|
+
/**
|
8295
|
+
* If `true`, the `input` element is required.
|
8296
|
+
*/
|
8297
|
+
required: PropTypes.bool,
|
8298
|
+
/**
|
8299
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
8300
|
+
*/
|
8301
|
+
sx: PropTypes.object,
|
8302
|
+
/**
|
8303
|
+
* @ignore
|
8304
|
+
*/
|
8305
|
+
tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
8306
|
+
/**
|
8307
|
+
* The input component prop `type`.
|
8308
|
+
*/
|
8309
|
+
type: PropTypes.string.isRequired,
|
8310
|
+
/**
|
8311
|
+
* The value of the component.
|
8312
|
+
*/
|
8313
|
+
value: PropTypes.any
|
8314
|
+
} : void 0;
|
8315
|
+
var SwitchBase$1 = SwitchBase;
|
8316
|
+
|
8317
|
+
function getSvgIconUtilityClass(slot) {
|
8318
|
+
return generateUtilityClass('MuiSvgIcon', slot);
|
8319
|
+
}
|
8320
|
+
generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
|
8321
|
+
|
8322
|
+
const _excluded$e = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
|
8323
|
+
const useUtilityClasses$b = ownerState => {
|
8324
|
+
const {
|
8325
|
+
color,
|
8326
|
+
fontSize,
|
8327
|
+
classes
|
8328
|
+
} = ownerState;
|
8329
|
+
const slots = {
|
8330
|
+
root: ['root', color !== 'inherit' && `color${capitalize(color)}`, `fontSize${capitalize(fontSize)}`]
|
8331
|
+
};
|
8332
|
+
return composeClasses(slots, getSvgIconUtilityClass, classes);
|
8333
|
+
};
|
8334
|
+
const SvgIconRoot = styled$1('svg', {
|
8335
|
+
name: 'MuiSvgIcon',
|
8336
|
+
slot: 'Root',
|
8337
|
+
overridesResolver: (props, styles) => {
|
8338
|
+
const {
|
8339
|
+
ownerState
|
8340
|
+
} = props;
|
8341
|
+
return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
|
8342
|
+
}
|
8343
|
+
})(({
|
8344
|
+
theme,
|
8345
|
+
ownerState
|
8346
|
+
}) => {
|
8347
|
+
var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
|
8348
|
+
return {
|
8349
|
+
userSelect: 'none',
|
8350
|
+
width: '1em',
|
8351
|
+
height: '1em',
|
8352
|
+
display: 'inline-block',
|
8353
|
+
// the <svg> will define the property that has `currentColor`
|
8354
|
+
// e.g. heroicons uses fill="none" and stroke="currentColor"
|
8355
|
+
fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
|
8356
|
+
flexShrink: 0,
|
8357
|
+
transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
|
8358
|
+
duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
|
8359
|
+
}),
|
8360
|
+
fontSize: {
|
8361
|
+
inherit: 'inherit',
|
8362
|
+
small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
|
8363
|
+
medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
|
8364
|
+
large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
|
8365
|
+
}[ownerState.fontSize],
|
8366
|
+
// TODO v5 deprecate, v6 remove for sx
|
8367
|
+
color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
|
8368
|
+
action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
|
8369
|
+
disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
|
8370
|
+
inherit: undefined
|
8371
|
+
}[ownerState.color]
|
8372
|
+
};
|
8373
|
+
});
|
8374
|
+
const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
8375
|
+
const props = useThemeProps({
|
8376
|
+
props: inProps,
|
8377
|
+
name: 'MuiSvgIcon'
|
8378
|
+
});
|
8379
|
+
const {
|
8380
|
+
children,
|
8381
|
+
className,
|
8382
|
+
color = 'inherit',
|
8383
|
+
component = 'svg',
|
8384
|
+
fontSize = 'medium',
|
8385
|
+
htmlColor,
|
8386
|
+
inheritViewBox = false,
|
8387
|
+
titleAccess,
|
8388
|
+
viewBox = '0 0 24 24'
|
8389
|
+
} = props,
|
8390
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$e);
|
8391
|
+
const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
|
8392
|
+
const ownerState = _extends({}, props, {
|
8393
|
+
color,
|
8394
|
+
component,
|
8395
|
+
fontSize,
|
8396
|
+
instanceFontSize: inProps.fontSize,
|
8397
|
+
inheritViewBox,
|
8398
|
+
viewBox,
|
8399
|
+
hasSvgAsChild
|
8400
|
+
});
|
8401
|
+
const more = {};
|
8402
|
+
if (!inheritViewBox) {
|
8403
|
+
more.viewBox = viewBox;
|
8404
|
+
}
|
8405
|
+
const classes = useUtilityClasses$b(ownerState);
|
8406
|
+
return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
|
8407
|
+
as: component,
|
8408
|
+
className: clsx(classes.root, className),
|
8409
|
+
focusable: "false",
|
8410
|
+
color: htmlColor,
|
8411
|
+
"aria-hidden": titleAccess ? undefined : true,
|
8412
|
+
role: titleAccess ? 'img' : undefined,
|
8413
|
+
ref: ref
|
8414
|
+
}, more, other, hasSvgAsChild && children.props, {
|
8415
|
+
ownerState: ownerState,
|
8416
|
+
children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/jsx("title", {
|
8417
|
+
children: titleAccess
|
8418
|
+
}) : null]
|
8419
|
+
}));
|
8420
|
+
});
|
8421
|
+
process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */ = {
|
8422
|
+
// ----------------------------- Warning --------------------------------
|
8423
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
8424
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
8425
|
+
// ----------------------------------------------------------------------
|
8426
|
+
/**
|
8427
|
+
* Node passed into the SVG element.
|
8428
|
+
*/
|
8429
|
+
children: PropTypes.node,
|
8430
|
+
/**
|
8431
|
+
* Override or extend the styles applied to the component.
|
8432
|
+
*/
|
8433
|
+
classes: PropTypes.object,
|
8434
|
+
/**
|
8435
|
+
* @ignore
|
8436
|
+
*/
|
8437
|
+
className: PropTypes.string,
|
8438
|
+
/**
|
8439
|
+
* The color of the component.
|
8440
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
8441
|
+
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
|
8442
|
+
* You can use the `htmlColor` prop to apply a color attribute to the SVG element.
|
8443
|
+
* @default 'inherit'
|
8444
|
+
*/
|
8445
|
+
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
8446
|
+
/**
|
8447
|
+
* The component used for the root node.
|
8448
|
+
* Either a string to use a HTML element or a component.
|
8449
|
+
*/
|
8450
|
+
component: PropTypes.elementType,
|
8451
|
+
/**
|
8452
|
+
* The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
|
8453
|
+
* @default 'medium'
|
8454
|
+
*/
|
8455
|
+
fontSize: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), PropTypes.string]),
|
8456
|
+
/**
|
8457
|
+
* Applies a color attribute to the SVG element.
|
8458
|
+
*/
|
8459
|
+
htmlColor: PropTypes.string,
|
8460
|
+
/**
|
8461
|
+
* If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
|
8462
|
+
* prop will be ignored.
|
8463
|
+
* Useful when you want to reference a custom `component` and have `SvgIcon` pass that
|
8464
|
+
* `component`'s viewBox to the root node.
|
8465
|
+
* @default false
|
8466
|
+
*/
|
8467
|
+
inheritViewBox: PropTypes.bool,
|
8468
|
+
/**
|
8469
|
+
* The shape-rendering attribute. The behavior of the different options is described on the
|
8470
|
+
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
|
8471
|
+
* If you are having issues with blurry icons you should investigate this prop.
|
8472
|
+
*/
|
8473
|
+
shapeRendering: PropTypes.string,
|
8474
|
+
/**
|
8475
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
8476
|
+
*/
|
8477
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
8478
|
+
/**
|
8479
|
+
* Provides a human-readable title for the element that contains it.
|
8480
|
+
* https://www.w3.org/TR/SVG-access/#Equivalent
|
8481
|
+
*/
|
8482
|
+
titleAccess: PropTypes.string,
|
8483
|
+
/**
|
8484
|
+
* Allows you to redefine what the coordinates without units mean inside an SVG element.
|
8485
|
+
* For example, if the SVG element is 500 (width) by 200 (height),
|
8486
|
+
* and you pass viewBox="0 0 50 20",
|
8487
|
+
* this means that the coordinates inside the SVG will go from the top left corner (0,0)
|
8488
|
+
* to bottom right (50,20) and each unit will be worth 10px.
|
8489
|
+
* @default '0 0 24 24'
|
8490
|
+
*/
|
8491
|
+
viewBox: PropTypes.string
|
8492
|
+
} : void 0;
|
8493
|
+
SvgIcon.muiName = 'SvgIcon';
|
8494
|
+
var SvgIcon$1 = SvgIcon;
|
8495
|
+
|
8496
|
+
function createSvgIcon(path, displayName) {
|
8497
|
+
function Component(props, ref) {
|
8498
|
+
return /*#__PURE__*/jsx(SvgIcon$1, _extends({
|
8499
|
+
"data-testid": `${displayName}Icon`,
|
8500
|
+
ref: ref
|
8501
|
+
}, props, {
|
8502
|
+
children: path
|
8503
|
+
}));
|
8504
|
+
}
|
8505
|
+
if (process.env.NODE_ENV !== 'production') {
|
8506
|
+
// Need to set `displayName` on the inner component for React.memo.
|
8507
|
+
// React prior to 16.14 ignores `displayName` on the wrapper.
|
8508
|
+
Component.displayName = `${displayName}Icon`;
|
8509
|
+
}
|
8510
|
+
Component.muiName = SvgIcon$1.muiName;
|
8511
|
+
return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
|
8512
|
+
}
|
8513
|
+
|
8514
|
+
var RadioButtonUncheckedIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
|
8515
|
+
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
8516
|
+
}), 'RadioButtonUnchecked');
|
8517
|
+
|
8518
|
+
var RadioButtonCheckedIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
|
8519
|
+
d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
8520
|
+
}), 'RadioButtonChecked');
|
8521
|
+
|
8522
|
+
const RadioButtonIconRoot = styled$1('span', {
|
8523
|
+
shouldForwardProp: rootShouldForwardProp
|
8524
|
+
})({
|
8525
|
+
position: 'relative',
|
8526
|
+
display: 'flex'
|
8527
|
+
});
|
8528
|
+
const RadioButtonIconBackground = styled$1(RadioButtonUncheckedIcon)({
|
8529
|
+
// Scale applied to prevent dot misalignment in Safari
|
8530
|
+
transform: 'scale(1)'
|
8531
|
+
});
|
8532
|
+
const RadioButtonIconDot = styled$1(RadioButtonCheckedIcon)(({
|
8533
|
+
theme,
|
8534
|
+
ownerState
|
8535
|
+
}) => _extends({
|
8536
|
+
left: 0,
|
8537
|
+
position: 'absolute',
|
8538
|
+
transform: 'scale(0)',
|
8539
|
+
transition: theme.transitions.create('transform', {
|
8540
|
+
easing: theme.transitions.easing.easeIn,
|
8541
|
+
duration: theme.transitions.duration.shortest
|
8542
|
+
})
|
8543
|
+
}, ownerState.checked && {
|
8544
|
+
transform: 'scale(1)',
|
8545
|
+
transition: theme.transitions.create('transform', {
|
8546
|
+
easing: theme.transitions.easing.easeOut,
|
8547
|
+
duration: theme.transitions.duration.shortest
|
8548
|
+
})
|
8549
|
+
}));
|
8550
|
+
|
8551
|
+
/**
|
8552
|
+
* @ignore - internal component.
|
8553
|
+
*/
|
8554
|
+
function RadioButtonIcon(props) {
|
8555
|
+
const {
|
8556
|
+
checked = false,
|
8557
|
+
classes = {},
|
8558
|
+
fontSize
|
8559
|
+
} = props;
|
8560
|
+
const ownerState = _extends({}, props, {
|
8561
|
+
checked
|
8562
|
+
});
|
8563
|
+
return /*#__PURE__*/jsxs(RadioButtonIconRoot, {
|
8564
|
+
className: classes.root,
|
8565
|
+
ownerState: ownerState,
|
8566
|
+
children: [/*#__PURE__*/jsx(RadioButtonIconBackground, {
|
8567
|
+
fontSize: fontSize,
|
8568
|
+
className: classes.background,
|
8569
|
+
ownerState: ownerState
|
8570
|
+
}), /*#__PURE__*/jsx(RadioButtonIconDot, {
|
8571
|
+
fontSize: fontSize,
|
8572
|
+
className: classes.dot,
|
8573
|
+
ownerState: ownerState
|
8574
|
+
})]
|
8575
|
+
});
|
8576
|
+
}
|
8577
|
+
process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes = {
|
8578
|
+
/**
|
8579
|
+
* If `true`, the component is checked.
|
8580
|
+
*/
|
8581
|
+
checked: PropTypes.bool,
|
8582
|
+
/**
|
8583
|
+
* Override or extend the styles applied to the component.
|
8584
|
+
* See [CSS API](#css) below for more details.
|
8585
|
+
*/
|
8586
|
+
classes: PropTypes.object,
|
8587
|
+
/**
|
8588
|
+
* The size of the component.
|
8589
|
+
* `small` is equivalent to the dense radio styling.
|
8590
|
+
*/
|
8591
|
+
fontSize: PropTypes.oneOf(['small', 'medium'])
|
8592
|
+
} : void 0;
|
8593
|
+
|
8594
|
+
/**
|
8595
|
+
* @ignore - internal component.
|
8596
|
+
*/
|
8597
|
+
const RadioGroupContext = /*#__PURE__*/React.createContext(undefined);
|
8598
|
+
if (process.env.NODE_ENV !== 'production') {
|
8599
|
+
RadioGroupContext.displayName = 'RadioGroupContext';
|
8600
|
+
}
|
8601
|
+
var RadioGroupContext$1 = RadioGroupContext;
|
8602
|
+
|
8603
|
+
function useRadioGroup() {
|
8604
|
+
return React.useContext(RadioGroupContext$1);
|
8605
|
+
}
|
8606
|
+
|
8607
|
+
function getRadioUtilityClass(slot) {
|
8608
|
+
return generateUtilityClass('MuiRadio', slot);
|
8609
|
+
}
|
8610
|
+
const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
|
8611
|
+
var radioClasses$1 = radioClasses;
|
8612
|
+
|
8613
|
+
const _excluded$d = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
|
8614
|
+
const useUtilityClasses$a = ownerState => {
|
8615
|
+
const {
|
8616
|
+
classes,
|
8617
|
+
color,
|
8618
|
+
size
|
8619
|
+
} = ownerState;
|
8620
|
+
const slots = {
|
8621
|
+
root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
|
8622
|
+
};
|
8623
|
+
return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
|
8624
|
+
};
|
8625
|
+
const RadioRoot = styled$1(SwitchBase$1, {
|
8626
|
+
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
8627
|
+
name: 'MuiRadio',
|
8628
|
+
slot: 'Root',
|
8629
|
+
overridesResolver: (props, styles) => {
|
8630
|
+
const {
|
8631
|
+
ownerState
|
8632
|
+
} = props;
|
8633
|
+
return [styles.root, ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`]];
|
8634
|
+
}
|
8635
|
+
})(({
|
8636
|
+
theme,
|
8637
|
+
ownerState
|
8638
|
+
}) => _extends({
|
8639
|
+
color: (theme.vars || theme).palette.text.secondary
|
8640
|
+
}, !ownerState.disableRipple && {
|
8641
|
+
'&:hover': {
|
8642
|
+
backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
8643
|
+
// Reset on touch devices, it doesn't add specificity
|
8644
|
+
'@media (hover: none)': {
|
8645
|
+
backgroundColor: 'transparent'
|
8646
|
+
}
|
8647
|
+
}
|
8648
|
+
}, ownerState.color !== 'default' && {
|
8649
|
+
[`&.${radioClasses$1.checked}`]: {
|
8650
|
+
color: (theme.vars || theme).palette[ownerState.color].main
|
8651
|
+
}
|
8652
|
+
}, {
|
8653
|
+
[`&.${radioClasses$1.disabled}`]: {
|
8654
|
+
color: (theme.vars || theme).palette.action.disabled
|
8655
|
+
}
|
8656
|
+
}));
|
8657
|
+
function areEqualValues(a, b) {
|
8658
|
+
if (typeof b === 'object' && b !== null) {
|
8659
|
+
return a === b;
|
8660
|
+
}
|
8661
|
+
|
8662
|
+
// The value could be a number, the DOM will stringify it anyway.
|
8663
|
+
return String(a) === String(b);
|
8664
|
+
}
|
8665
|
+
const defaultCheckedIcon = /*#__PURE__*/jsx(RadioButtonIcon, {
|
8666
|
+
checked: true
|
8667
|
+
});
|
8668
|
+
const defaultIcon = /*#__PURE__*/jsx(RadioButtonIcon, {});
|
8669
|
+
const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
|
8670
|
+
var _defaultIcon$props$fo, _defaultCheckedIcon$p;
|
8671
|
+
const props = useThemeProps({
|
8672
|
+
props: inProps,
|
8673
|
+
name: 'MuiRadio'
|
8674
|
+
});
|
8675
|
+
const {
|
8676
|
+
checked: checkedProp,
|
8677
|
+
checkedIcon = defaultCheckedIcon,
|
8678
|
+
color = 'primary',
|
8679
|
+
icon = defaultIcon,
|
8680
|
+
name: nameProp,
|
8681
|
+
onChange: onChangeProp,
|
8682
|
+
size = 'medium',
|
8683
|
+
className
|
8684
|
+
} = props,
|
8685
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$d);
|
8686
|
+
const ownerState = _extends({}, props, {
|
8687
|
+
color,
|
8688
|
+
size
|
8689
|
+
});
|
8690
|
+
const classes = useUtilityClasses$a(ownerState);
|
8691
|
+
const radioGroup = useRadioGroup();
|
8692
|
+
let checked = checkedProp;
|
8693
|
+
const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
|
8694
|
+
let name = nameProp;
|
8695
|
+
if (radioGroup) {
|
8696
|
+
if (typeof checked === 'undefined') {
|
8697
|
+
checked = areEqualValues(radioGroup.value, props.value);
|
8698
|
+
}
|
8699
|
+
if (typeof name === 'undefined') {
|
8700
|
+
name = radioGroup.name;
|
8701
|
+
}
|
8702
|
+
}
|
8703
|
+
return /*#__PURE__*/jsx(RadioRoot, _extends({
|
8704
|
+
type: "radio",
|
8705
|
+
icon: /*#__PURE__*/React.cloneElement(icon, {
|
8706
|
+
fontSize: (_defaultIcon$props$fo = defaultIcon.props.fontSize) != null ? _defaultIcon$props$fo : size
|
8707
|
+
}),
|
8708
|
+
checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
|
8709
|
+
fontSize: (_defaultCheckedIcon$p = defaultCheckedIcon.props.fontSize) != null ? _defaultCheckedIcon$p : size
|
8710
|
+
}),
|
8711
|
+
ownerState: ownerState,
|
8712
|
+
classes: classes,
|
8713
|
+
name: name,
|
8714
|
+
checked: checked,
|
8715
|
+
onChange: onChange,
|
8716
|
+
ref: ref,
|
8717
|
+
className: clsx(classes.root, className)
|
8718
|
+
}, other));
|
8719
|
+
});
|
8720
|
+
process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ = {
|
8721
|
+
// ----------------------------- Warning --------------------------------
|
8722
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
8723
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
8724
|
+
// ----------------------------------------------------------------------
|
8725
|
+
/**
|
8726
|
+
* If `true`, the component is checked.
|
8727
|
+
*/
|
8728
|
+
checked: PropTypes.bool,
|
8729
|
+
/**
|
8730
|
+
* The icon to display when the component is checked.
|
8731
|
+
* @default <RadioButtonIcon checked />
|
8732
|
+
*/
|
8733
|
+
checkedIcon: PropTypes.node,
|
8734
|
+
/**
|
8735
|
+
* Override or extend the styles applied to the component.
|
8736
|
+
*/
|
8737
|
+
classes: PropTypes.object,
|
8738
|
+
/**
|
8739
|
+
* @ignore
|
8740
|
+
*/
|
8741
|
+
className: PropTypes.string,
|
8742
|
+
/**
|
8743
|
+
* The color of the component.
|
8744
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
8745
|
+
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
|
8746
|
+
* @default 'primary'
|
8747
|
+
*/
|
8748
|
+
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
8749
|
+
/**
|
8750
|
+
* If `true`, the component is disabled.
|
8751
|
+
*/
|
8752
|
+
disabled: PropTypes.bool,
|
8753
|
+
/**
|
8754
|
+
* If `true`, the ripple effect is disabled.
|
8755
|
+
* @default false
|
8756
|
+
*/
|
8757
|
+
disableRipple: PropTypes.bool,
|
8758
|
+
/**
|
8759
|
+
* The icon to display when the component is unchecked.
|
8760
|
+
* @default <RadioButtonIcon />
|
8761
|
+
*/
|
8762
|
+
icon: PropTypes.node,
|
8763
|
+
/**
|
8764
|
+
* The id of the `input` element.
|
8765
|
+
*/
|
8766
|
+
id: PropTypes.string,
|
8767
|
+
/**
|
8768
|
+
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
8769
|
+
*/
|
8770
|
+
inputProps: PropTypes.object,
|
8771
|
+
/**
|
8772
|
+
* Pass a ref to the `input` element.
|
8773
|
+
*/
|
8774
|
+
inputRef: refType$1,
|
8775
|
+
/**
|
8776
|
+
* Name attribute of the `input` element.
|
8777
|
+
*/
|
8778
|
+
name: PropTypes.string,
|
8779
|
+
/**
|
8780
|
+
* Callback fired when the state is changed.
|
8781
|
+
*
|
8782
|
+
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
|
8783
|
+
* You can pull out the new value by accessing `event.target.value` (string).
|
8784
|
+
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
|
8785
|
+
*/
|
8786
|
+
onChange: PropTypes.func,
|
8787
|
+
/**
|
8788
|
+
* If `true`, the `input` element is required.
|
8789
|
+
* @default false
|
8790
|
+
*/
|
8791
|
+
required: PropTypes.bool,
|
8792
|
+
/**
|
8793
|
+
* The size of the component.
|
8794
|
+
* `small` is equivalent to the dense radio styling.
|
8795
|
+
* @default 'medium'
|
8796
|
+
*/
|
8797
|
+
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
|
8798
|
+
/**
|
8799
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
8800
|
+
*/
|
8801
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
8802
|
+
/**
|
8803
|
+
* The value of the component. The DOM API casts this to a string.
|
8804
|
+
*/
|
8805
|
+
value: PropTypes.any
|
8806
|
+
} : void 0;
|
8807
|
+
var Radio$1 = Radio;
|
8808
|
+
|
8006
8809
|
var components = {
|
8007
|
-
MuiPopper: {
|
8008
|
-
defaultProps: {
|
8009
|
-
placement: "top"
|
8010
|
-
},
|
8011
|
-
styleOverrides: {}
|
8012
|
-
},
|
8013
8810
|
MuiSelect: {
|
8014
8811
|
styleOverrides: {
|
8015
8812
|
icon: {
|
@@ -8286,7 +9083,7 @@ var components = {
|
|
8286
9083
|
},
|
8287
9084
|
".MuiChip-deleteIconMedium": {
|
8288
9085
|
height: 20,
|
8289
|
-
|
9086
|
+
widht: 20
|
8290
9087
|
}
|
8291
9088
|
}
|
8292
9089
|
}
|
@@ -8317,7 +9114,7 @@ var components = {
|
|
8317
9114
|
root: {
|
8318
9115
|
fontFamily: "Roboto",
|
8319
9116
|
textTransform: "unset",
|
8320
|
-
|
9117
|
+
fontWeightLight: 300,
|
8321
9118
|
fontSize: "13px",
|
8322
9119
|
lineHeight: "normal",
|
8323
9120
|
"@media(max-width: 885px)": {
|
@@ -13259,7 +14056,7 @@ var EmptyStateComponent = function EmptyStateComponent(_ref2) {
|
|
13259
14056
|
subtitle = _ref2.subtitle,
|
13260
14057
|
actions = _ref2.actions,
|
13261
14058
|
_ref2$containerHeight = _ref2.containerHeight,
|
13262
|
-
containerHeight = _ref2$containerHeight === void 0 ? '
|
14059
|
+
containerHeight = _ref2$containerHeight === void 0 ? '100vh' : _ref2$containerHeight,
|
13263
14060
|
iconStyle = _ref2.iconStyle,
|
13264
14061
|
_ref2$icon = _ref2.icon,
|
13265
14062
|
icon = _ref2$icon === void 0 ? React__default.createElement(DefaultIcon, {
|
@@ -13269,7 +14066,6 @@ var EmptyStateComponent = function EmptyStateComponent(_ref2) {
|
|
13269
14066
|
return React__default.createElement(Stack$1, {
|
13270
14067
|
alignItems: "center",
|
13271
14068
|
justifyContent: "center",
|
13272
|
-
padding: 1,
|
13273
14069
|
spacing: 2,
|
13274
14070
|
height: containerHeight,
|
13275
14071
|
"data-testid": "empty-state-container"
|
@@ -13375,7 +14171,6 @@ var FooterAction = function FooterAction(_ref) {
|
|
13375
14171
|
var leftContent = _ref.leftContent,
|
13376
14172
|
rightContent = _ref.rightContent,
|
13377
14173
|
labelChangeCounter = _ref.labelChangeCounter;
|
13378
|
-
_ref.children;
|
13379
14174
|
return React__default.createElement(AppBar$1, {
|
13380
14175
|
position: "fixed",
|
13381
14176
|
color: "inherit",
|
@@ -13610,7 +14405,15 @@ var ProgressSinco = function ProgressSinco(_ref) {
|
|
13610
14405
|
variant = _ref$variant === void 0 ? 'indeterminate' : _ref$variant,
|
13611
14406
|
valueBuffer = _ref.valueBuffer,
|
13612
14407
|
_ref$lote = _ref.lote,
|
13613
|
-
lote = _ref$lote === void 0 ? 0 : _ref$lote
|
14408
|
+
lote = _ref$lote === void 0 ? 0 : _ref$lote,
|
14409
|
+
_ref$porcent = _ref.porcent,
|
14410
|
+
porcent = _ref$porcent === void 0 ? true : _ref$porcent,
|
14411
|
+
_ref$progressBar = _ref.progressBar,
|
14412
|
+
progressBar = _ref$progressBar === void 0 ? true : _ref$progressBar,
|
14413
|
+
_ref$textPorcent = _ref.textPorcent,
|
14414
|
+
textPorcent = _ref$textPorcent === void 0 ? true : _ref$textPorcent,
|
14415
|
+
_ref$ilustration = _ref.ilustration,
|
14416
|
+
ilustration = _ref$ilustration === void 0 ? true : _ref$ilustration;
|
13614
14417
|
var timeProgress = time || 10;
|
13615
14418
|
var _useState = useState(true),
|
13616
14419
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -13635,7 +14438,7 @@ var ProgressSinco = function ProgressSinco(_ref) {
|
|
13635
14438
|
gap: 0.8,
|
13636
14439
|
justifyContent: 'center',
|
13637
14440
|
alignItems: 'center'
|
13638
|
-
}, React__default.createElement(Stack$1, {
|
14441
|
+
}, ilustration && React__default.createElement(Stack$1, {
|
13639
14442
|
width: 60,
|
13640
14443
|
height: 60,
|
13641
14444
|
justifyContent: 'center'
|
@@ -13644,30 +14447,30 @@ var ProgressSinco = function ProgressSinco(_ref) {
|
|
13644
14447
|
height: "60",
|
13645
14448
|
viewBox: "0 0 100 100"
|
13646
14449
|
}, React__default.createElement("symbol", {
|
13647
|
-
id:
|
14450
|
+
id: "spinner",
|
13648
14451
|
viewBox: "0 0 91 60"
|
13649
14452
|
}, React__default.createElement("path", {
|
13650
|
-
id:
|
14453
|
+
id: "path1",
|
13651
14454
|
d: "M16.8395 59.9966L34.0333 41.8759L23.6316 19.7821L0.100342 19.845L16.8395 59.9966Z",
|
13652
14455
|
fill: "#0C4271"
|
13653
14456
|
}), React__default.createElement("path", {
|
13654
|
-
id:
|
14457
|
+
id: "path2",
|
13655
14458
|
d: "M0 18.1417H54.2501L69.5867 0L13.9796 0.160958L0 18.1417Z",
|
13656
14459
|
fill: "#3872A9"
|
13657
14460
|
}), React__default.createElement("path", {
|
13658
|
-
id:
|
14461
|
+
id: "path3",
|
13659
14462
|
d: "M90.177 41.0402L71.8396 0.0457764L55.4082 19.2962L65.6909 41.0332L90.177 41.0402Z",
|
13660
14463
|
fill: "#2063A0"
|
13661
14464
|
}), React__default.createElement("path", {
|
13662
|
-
id:
|
14465
|
+
id: "path4",
|
13663
14466
|
d: "M35.4515 42.6838L19.1216 59.9965L76.425 60L90.1772 42.6838H35.4515Z",
|
13664
14467
|
fill: "#4E91C3"
|
13665
14468
|
})), React__default.createElement("use", {
|
13666
14469
|
xlinkHref: "#spinner"
|
13667
|
-
}))), React__default.createElement(Typography$1, {
|
14470
|
+
}))), textPorcent && React__default.createElement(Typography$1, {
|
13668
14471
|
variant: "body2",
|
13669
14472
|
color: 'text.secondary'
|
13670
|
-
}, "Progresando..."), React__default.createElement(LinearProgress$1, {
|
14473
|
+
}, "Progresando..."), progressBar && React__default.createElement(LinearProgress$1, {
|
13671
14474
|
value: progress,
|
13672
14475
|
variant: variant === 'lote' ? 'determinate' : variant,
|
13673
14476
|
valueBuffer: valueBuffer,
|
@@ -13684,12 +14487,83 @@ var ProgressSinco = function ProgressSinco(_ref) {
|
|
13684
14487
|
clipPath: 'polygon(5% 0, 100% 0, 95% 100%, 0 100%)'
|
13685
14488
|
}
|
13686
14489
|
}
|
13687
|
-
}), React__default.createElement(Typography$1, {
|
14490
|
+
}), porcent && React__default.createElement(Typography$1, {
|
13688
14491
|
color: 'text.secondary',
|
13689
14492
|
variant: "subtitle2"
|
13690
14493
|
}, "".concat(progress, "%")))));
|
13691
14494
|
};
|
13692
14495
|
|
14496
|
+
var CardRadio = function CardRadio(_ref) {
|
14497
|
+
var _ref$RadioPosition = _ref.RadioPosition,
|
14498
|
+
RadioPosition = _ref$RadioPosition === void 0 ? 'right' : _ref$RadioPosition,
|
14499
|
+
states = _ref.states,
|
14500
|
+
slotMedia = _ref.slotMedia,
|
14501
|
+
slotHeader = _ref.slotHeader,
|
14502
|
+
slotContent = _ref.slotContent,
|
14503
|
+
_ref$heightPosition = _ref.heightPosition,
|
14504
|
+
heightPosition = _ref$heightPosition === void 0 ? 'top' : _ref$heightPosition,
|
14505
|
+
_ref$color = _ref.color,
|
14506
|
+
color = _ref$color === void 0 ? 'primary' : _ref$color;
|
14507
|
+
var _useState = useState(states === 'active'),
|
14508
|
+
_useState2 = _slicedToArray(_useState, 2),
|
14509
|
+
isChecked = _useState2[0],
|
14510
|
+
setIsChecked = _useState2[1];
|
14511
|
+
var _useState3 = useState(states === 'active'),
|
14512
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
14513
|
+
isActive = _useState4[0],
|
14514
|
+
setIsActive = _useState4[1];
|
14515
|
+
var handleClick = function handleClick() {
|
14516
|
+
if (states === 'disabled') return;
|
14517
|
+
setIsChecked(!isChecked);
|
14518
|
+
setIsActive(!isActive);
|
14519
|
+
};
|
14520
|
+
var getBackgroundColor = function getBackgroundColor() {
|
14521
|
+
if (states === 'disabled') return '';
|
14522
|
+
if (isActive) {
|
14523
|
+
return color === 'primary' ? '#2063A014' : '#00BCD414';
|
14524
|
+
} else {
|
14525
|
+
return color === 'primary' ? '#2063A00A' : '#00BCD40A';
|
14526
|
+
}
|
14527
|
+
};
|
14528
|
+
var getBorderColor = function getBorderColor() {
|
14529
|
+
return isActive ? color === 'primary' ? '#2063A0' : '#00BCD4' : '#0000001F';
|
14530
|
+
};
|
14531
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(Stack$1, {
|
14532
|
+
"data-testid": "card-radio",
|
14533
|
+
padding: '8px 16px',
|
14534
|
+
borderRadius: 1,
|
14535
|
+
sx: {
|
14536
|
+
border: isActive ? "solid 1px ".concat(getBorderColor()) : 'solid 1px #0000001F',
|
14537
|
+
'&:hover': {
|
14538
|
+
backgroundColor: states === 'disabled' ? 'none' : getBackgroundColor()
|
14539
|
+
},
|
14540
|
+
cursor: 'pointer'
|
14541
|
+
},
|
14542
|
+
bgcolor: getBackgroundColor(),
|
14543
|
+
onClick: handleClick
|
14544
|
+
}, React__default.createElement(Stack$1, {
|
14545
|
+
justifyContent: 'space-between',
|
14546
|
+
flexDirection: RadioPosition === 'right' ? 'row' : 'row-reverse',
|
14547
|
+
gap: RadioPosition === 'left' ? 1 : 0
|
14548
|
+
}, React__default.createElement(Stack$1, {
|
14549
|
+
flexDirection: 'row',
|
14550
|
+
padding: '0px 16px 0 0',
|
14551
|
+
gap: 1
|
14552
|
+
}, slotMedia && React__default.createElement(Stack$1, null, slotMedia), React__default.createElement(Stack$1, null, slotHeader && React__default.createElement(Typography$1, {
|
14553
|
+
variant: "subtitle2",
|
14554
|
+
color: states === 'disabled' ? 'text.disabled' : isActive ? 'text.primary' : 'text.primary'
|
14555
|
+
}, slotContent), slotContent && React__default.createElement(Typography$1, {
|
14556
|
+
variant: "caption",
|
14557
|
+
color: states === 'disabled' ? 'text.disabled' : isActive ? 'text.secondary' : 'text.secondary'
|
14558
|
+
}, slotContent))), React__default.createElement(Stack$1, {
|
14559
|
+
justifyContent: heightPosition === 'top' ? 'flex-start' : 'center'
|
14560
|
+
}, React__default.createElement(Radio$1, {
|
14561
|
+
checked: isChecked,
|
14562
|
+
color: color,
|
14563
|
+
disabled: states === 'disabled'
|
14564
|
+
})))));
|
14565
|
+
};
|
14566
|
+
|
13693
14567
|
/**
|
13694
14568
|
* @license
|
13695
14569
|
* Copyright 2021 Google LLC
|
@@ -18096,4 +18970,4 @@ var useDynamicColor = function useDynamicColor(url) {
|
|
18096
18970
|
};
|
18097
18971
|
};
|
18098
18972
|
|
18099
|
-
export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, PageHeader, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };
|
18973
|
+
export { AdproSincoTheme, CardRadio, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, PageHeader, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };
|
package/package.json
CHANGED
package/src/index.d.ts
CHANGED
@@ -0,0 +1,16 @@
|
|
1
|
+
import React, { FC } from 'react';
|
2
|
+
type RadioPosition = 'left' | 'right';
|
3
|
+
type RadioStates = 'active' | 'disabled';
|
4
|
+
type RadioHeightPosition = 'top' | 'center';
|
5
|
+
type RadioColors = 'primary' | 'secondary';
|
6
|
+
export interface CardRadioProps {
|
7
|
+
RadioPosition?: RadioPosition;
|
8
|
+
heightPosition?: RadioHeightPosition;
|
9
|
+
states?: RadioStates;
|
10
|
+
slotMedia?: React.ReactNode;
|
11
|
+
slotHeader?: React.ReactNode | string;
|
12
|
+
slotContent?: React.ReactNode | string;
|
13
|
+
color?: RadioColors;
|
14
|
+
}
|
15
|
+
export declare const CardRadio: FC<CardRadioProps>;
|
16
|
+
export {};
|
@@ -1,9 +1,8 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
interface FooterActionsProperties {
|
3
|
-
children?: React.ReactNode;
|
4
3
|
labelChangeCounter: React.ReactNode | string;
|
5
4
|
leftContent?: React.ReactNode;
|
6
5
|
rightContent?: React.ReactNode;
|
7
6
|
}
|
8
|
-
export declare const FooterAction: ({ leftContent, rightContent, labelChangeCounter,
|
7
|
+
export declare const FooterAction: ({ leftContent, rightContent, labelChangeCounter, }: FooterActionsProperties) => React.JSX.Element;
|
9
8
|
export {};
|
@@ -6,6 +6,10 @@ interface ProgressProps {
|
|
6
6
|
variant?: Variant;
|
7
7
|
valueBuffer?: number;
|
8
8
|
lote?: number;
|
9
|
+
porcent?: boolean;
|
10
|
+
progressBar?: boolean;
|
11
|
+
textPorcent?: boolean;
|
12
|
+
ilustration?: boolean;
|
9
13
|
}
|
10
14
|
export declare const ProgressSinco: FC<ProgressProps>;
|
11
15
|
export {};
|