@sinco/react 1.1.2-rc.89 → 1.1.2-rc.90
Sign up to get free protection for your applications and to get access to all the features.
- package/index.esm.js +54 -41
- package/package.json +1 -1
- package/src/lib/Components/CardRadio.d.ts +9 -8
package/index.esm.js
CHANGED
@@ -8993,7 +8993,9 @@ var components = {
|
|
8993
8993
|
MuiDialog: {
|
8994
8994
|
styleOverrides: {
|
8995
8995
|
root: {
|
8996
|
-
|
8996
|
+
".MuiPaper-elevation": {
|
8997
|
+
boxShadow: "0px 1px 5px rgba(24, 39, 75, 0.12), 0px 2px 2px rgba(24, 39, 75, 0.14), 0px 3px 1px -2px rgba(24, 39, 75, 0.2) "
|
8998
|
+
},
|
8997
8999
|
".MuiBackdrop-root": {
|
8998
9000
|
backgroundColor: "#f0f0f099",
|
8999
9001
|
backdropFilter: "blur(2px) !important"
|
@@ -9001,11 +9003,24 @@ var components = {
|
|
9001
9003
|
}
|
9002
9004
|
}
|
9003
9005
|
},
|
9006
|
+
MuiDialogTitle: {
|
9007
|
+
styleOverrides: {
|
9008
|
+
root: {
|
9009
|
+
padding: "8px 16px !important"
|
9010
|
+
}
|
9011
|
+
}
|
9012
|
+
},
|
9004
9013
|
MuiDialogContent: {
|
9005
9014
|
styleOverrides: {
|
9006
9015
|
root: {
|
9007
|
-
|
9008
|
-
|
9016
|
+
padding: "8px 16px !important"
|
9017
|
+
}
|
9018
|
+
}
|
9019
|
+
},
|
9020
|
+
MuiDialogActions: {
|
9021
|
+
styleOverrides: {
|
9022
|
+
root: {
|
9023
|
+
padding: "12px 16px !important"
|
9009
9024
|
}
|
9010
9025
|
}
|
9011
9026
|
},
|
@@ -9083,7 +9098,7 @@ var components = {
|
|
9083
9098
|
},
|
9084
9099
|
".MuiChip-deleteIconMedium": {
|
9085
9100
|
height: 20,
|
9086
|
-
|
9101
|
+
width: 20
|
9087
9102
|
}
|
9088
9103
|
}
|
9089
9104
|
}
|
@@ -9366,10 +9381,10 @@ var components = {
|
|
9366
9381
|
},
|
9367
9382
|
outlined: {
|
9368
9383
|
"&.MuiInputLabel-outlined.MuiInputLabel-sizeSmall ": {
|
9369
|
-
transform: "translate(14px,
|
9384
|
+
transform: "translate(14px,7px) scale(1)"
|
9370
9385
|
},
|
9371
9386
|
"&.MuiInputLabel-outlined ": {
|
9372
|
-
transform: "translate(14px,
|
9387
|
+
transform: "translate(14px, 14px) scale(1)",
|
9373
9388
|
"&.MuiInputLabel-shrink": {
|
9374
9389
|
transform: "translate(14px, -7px) scale(0.75)"
|
9375
9390
|
}
|
@@ -14417,19 +14432,18 @@ var ProgressSinco = function ProgressSinco(_ref) {
|
|
14417
14432
|
var timeProgress = time || 10;
|
14418
14433
|
var _useState = useState(true),
|
14419
14434
|
_useState2 = _slicedToArray(_useState, 2),
|
14420
|
-
|
14421
|
-
|
14435
|
+
showProgress = _useState2[0],
|
14436
|
+
setShowProgress = _useState2[1];
|
14422
14437
|
var _useProgress = useProgress(timeProgress, lote),
|
14423
14438
|
progress = _useProgress.progress;
|
14424
14439
|
useEffect(function () {
|
14425
14440
|
if (progress >= 100) {
|
14426
|
-
|
14441
|
+
setShowProgress(false);
|
14427
14442
|
}
|
14428
14443
|
}, [progress]);
|
14429
|
-
return React__default.createElement(React__default.Fragment, null,
|
14430
|
-
position: 'fixed',
|
14444
|
+
return React__default.createElement(React__default.Fragment, null, showProgress && React__default.createElement(Stack$1, {
|
14431
14445
|
zIndex: 1000,
|
14432
|
-
height: '
|
14446
|
+
height: '100vh',
|
14433
14447
|
width: '100%',
|
14434
14448
|
alignItems: 'center',
|
14435
14449
|
justifyContent: 'center'
|
@@ -14497,49 +14511,48 @@ var CardRadio = function CardRadio(_ref) {
|
|
14497
14511
|
var _ref$RadioPosition = _ref.RadioPosition,
|
14498
14512
|
RadioPosition = _ref$RadioPosition === void 0 ? 'right' : _ref$RadioPosition,
|
14499
14513
|
states = _ref.states,
|
14500
|
-
|
14501
|
-
|
14502
|
-
|
14503
|
-
_ref$
|
14504
|
-
|
14514
|
+
media = _ref.media,
|
14515
|
+
header = _ref.header,
|
14516
|
+
content = _ref.content,
|
14517
|
+
_ref$topRadioPosition = _ref.topRadioPosition,
|
14518
|
+
topRadioPosition = _ref$topRadioPosition === void 0 ? false : _ref$topRadioPosition,
|
14505
14519
|
_ref$color = _ref.color,
|
14506
14520
|
color = _ref$color === void 0 ? 'primary' : _ref$color,
|
14507
|
-
|
14508
|
-
|
14509
|
-
|
14521
|
+
value = _ref.value,
|
14522
|
+
onChange = _ref.onChange,
|
14523
|
+
checked = _ref.checked;
|
14524
|
+
var _useState = useState(checked !== null && checked !== void 0 ? checked : false),
|
14510
14525
|
_useState2 = _slicedToArray(_useState, 2),
|
14511
14526
|
isChecked = _useState2[0],
|
14512
14527
|
setIsChecked = _useState2[1];
|
14513
14528
|
var _useState3 = useState(states === 'active'),
|
14514
|
-
_useState4 = _slicedToArray(_useState3,
|
14515
|
-
isActive = _useState4[0]
|
14516
|
-
setIsActive = _useState4[1];
|
14529
|
+
_useState4 = _slicedToArray(_useState3, 1),
|
14530
|
+
isActive = _useState4[0];
|
14517
14531
|
var handleClick = function handleClick() {
|
14518
14532
|
if (states === 'disabled') return;
|
14519
14533
|
setIsChecked(!isChecked);
|
14520
|
-
|
14534
|
+
onChange(value);
|
14521
14535
|
};
|
14522
14536
|
var getBackgroundColor = function getBackgroundColor() {
|
14523
14537
|
if (states === 'disabled') return '';
|
14524
|
-
|
14525
|
-
return color === 'primary' ? '#2063A014' : '#00BCD414';
|
14526
|
-
} else {
|
14527
|
-
return color === 'primary' ? '#2063A00A' : '#00BCD40A';
|
14528
|
-
}
|
14538
|
+
return isChecked ? color === 'primary' ? '#E4ECF4' : color === 'secondary' ? '#00BCD414' : '#FBFBFB' : 'transparent';
|
14529
14539
|
};
|
14530
14540
|
var getBorderColor = function getBorderColor() {
|
14531
|
-
return
|
14541
|
+
return isChecked ? color === 'primary' ? '#2063A080' : color === 'secondary' ? '#00BCD480' : '#00BCD4' : '#0000001F';
|
14542
|
+
};
|
14543
|
+
var getHoverColor = function getHoverColor() {
|
14544
|
+
return color === 'primary' ? '#2063A00A' : color === 'secondary' ? '#00BCD40A' : 'FBFBFB';
|
14532
14545
|
};
|
14533
|
-
|
14534
|
-
|
14535
|
-
|
14536
|
-
|
14546
|
+
useEffect(function () {
|
14547
|
+
if (checked !== undefined) setIsChecked(checked);
|
14548
|
+
}, [checked]);
|
14549
|
+
return React__default.createElement(Stack$1, {
|
14537
14550
|
padding: '8px 16px',
|
14538
14551
|
borderRadius: 1,
|
14552
|
+
border: "solid 1px ".concat(getBorderColor()),
|
14539
14553
|
sx: {
|
14540
|
-
border: isActive ? "solid 1px ".concat(getBorderColor()) : 'solid 1px #0000001F',
|
14541
14554
|
'&:hover': {
|
14542
|
-
backgroundColor: states === 'disabled' ? '
|
14555
|
+
backgroundColor: checked ? 'none' : states === 'disabled' ? 'inherit' : getHoverColor()
|
14543
14556
|
},
|
14544
14557
|
cursor: 'pointer'
|
14545
14558
|
},
|
@@ -14553,19 +14566,19 @@ var CardRadio = function CardRadio(_ref) {
|
|
14553
14566
|
flexDirection: 'row',
|
14554
14567
|
padding: '0px 16px 0 0',
|
14555
14568
|
gap: 1
|
14556
|
-
},
|
14569
|
+
}, media && React__default.createElement(Stack$1, null, media), React__default.createElement(Stack$1, null, header && React__default.createElement(Typography$1, {
|
14557
14570
|
variant: "subtitle2",
|
14558
14571
|
color: states === 'disabled' ? 'text.disabled' : isActive ? 'text.primary' : 'text.primary'
|
14559
|
-
},
|
14572
|
+
}, content), content && React__default.createElement(Typography$1, {
|
14560
14573
|
variant: "caption",
|
14561
14574
|
color: states === 'disabled' ? 'text.disabled' : isActive ? 'text.secondary' : 'text.secondary'
|
14562
|
-
},
|
14563
|
-
justifyContent:
|
14575
|
+
}, content))), React__default.createElement(Stack$1, {
|
14576
|
+
justifyContent: topRadioPosition === true ? 'flex-start' : 'center'
|
14564
14577
|
}, React__default.createElement(Radio$1, {
|
14565
14578
|
checked: isChecked,
|
14566
14579
|
color: color,
|
14567
14580
|
disabled: states === 'disabled'
|
14568
|
-
}))))
|
14581
|
+
}))));
|
14569
14582
|
};
|
14570
14583
|
|
14571
14584
|
/**
|
package/package.json
CHANGED
@@ -1,17 +1,18 @@
|
|
1
1
|
import React, { FC } from 'react';
|
2
2
|
type RadioPosition = 'left' | 'right';
|
3
3
|
type RadioStates = 'active' | 'disabled';
|
4
|
-
type
|
5
|
-
type RadioColors = 'primary' | 'secondary';
|
4
|
+
type CardRadioColors = 'primary' | 'secondary';
|
6
5
|
export interface CardRadioProps {
|
7
6
|
RadioPosition?: RadioPosition;
|
8
|
-
|
7
|
+
topRadioPosition?: boolean;
|
9
8
|
states?: RadioStates;
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
color?:
|
14
|
-
|
9
|
+
media?: React.ReactNode;
|
10
|
+
header?: React.ReactNode | string;
|
11
|
+
content?: React.ReactNode | string;
|
12
|
+
color?: CardRadioColors;
|
13
|
+
onChange: (value: string | number) => void;
|
14
|
+
value: string | number;
|
15
|
+
checked?: boolean;
|
15
16
|
}
|
16
17
|
export declare const CardRadio: FC<CardRadioProps>;
|
17
18
|
export {};
|