@sinco/react 1.2.0 → 1.2.2-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.esm.css +9 -9
- package/index.esm.js +105 -22
- package/package.json +1 -1
- package/src/lib/Components/CardRadio.d.ts +2 -2
- package/src/lib/Components/FooterAction.d.ts +2 -2
package/index.esm.css
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
#react-
|
|
2
|
-
animation: react-
|
|
1
|
+
#react-module_path1__Aym94 {
|
|
2
|
+
animation: react-module_spin__r5eLZ 3s linear infinite;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
#react-
|
|
6
|
-
animation: react-
|
|
5
|
+
#react-module_path2__3IZeX {
|
|
6
|
+
animation: react-module_spin__r5eLZ 3s linear infinite 0.2s;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
#react-
|
|
10
|
-
animation: react-
|
|
9
|
+
#react-module_path3__VghnM {
|
|
10
|
+
animation: react-module_spin__r5eLZ 3s linear infinite 0.7s;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
#react-
|
|
14
|
-
animation: react-
|
|
13
|
+
#react-module_path4__Nydjg {
|
|
14
|
+
animation: react-module_spin__r5eLZ 3s linear infinite 1.2s;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
@keyframes react-
|
|
17
|
+
@keyframes react-module_spin__r5eLZ {
|
|
18
18
|
0% {
|
|
19
19
|
opacity: 1;
|
|
20
20
|
}
|
package/index.esm.js
CHANGED
|
@@ -6039,7 +6039,8 @@ var components = {
|
|
|
6039
6039
|
paddingBlock: 10
|
|
6040
6040
|
},
|
|
6041
6041
|
root: {
|
|
6042
|
-
minHeight: 40
|
|
6042
|
+
minHeight: 40,
|
|
6043
|
+
textTransform: "none"
|
|
6043
6044
|
}
|
|
6044
6045
|
}
|
|
6045
6046
|
},
|
|
@@ -6242,6 +6243,9 @@ var components = {
|
|
|
6242
6243
|
}
|
|
6243
6244
|
},
|
|
6244
6245
|
MuiChip: {
|
|
6246
|
+
defaultProps: {
|
|
6247
|
+
color: "primary"
|
|
6248
|
+
},
|
|
6245
6249
|
styleOverrides: {
|
|
6246
6250
|
sizeSmall: {
|
|
6247
6251
|
height: 16
|
|
@@ -6268,6 +6272,69 @@ var components = {
|
|
|
6268
6272
|
".MuiChip-deleteIconMedium": {
|
|
6269
6273
|
height: 20,
|
|
6270
6274
|
width: 20
|
|
6275
|
+
},
|
|
6276
|
+
color: "#101840de",
|
|
6277
|
+
".MuiChip-deleteIcon": {
|
|
6278
|
+
color: "#1018408a",
|
|
6279
|
+
"&:hover": {
|
|
6280
|
+
color: "#1018408a"
|
|
6281
|
+
}
|
|
6282
|
+
}
|
|
6283
|
+
},
|
|
6284
|
+
filled: {
|
|
6285
|
+
"&.MuiChip-filledPrimary": {
|
|
6286
|
+
backgroundColor: "#BCD0E3",
|
|
6287
|
+
"&:hover": {
|
|
6288
|
+
backgroundColor: "#BCD0E3 !important",
|
|
6289
|
+
"&.MuiChip-clickableColorPrimary": {
|
|
6290
|
+
backgroundColor: "#8FB1D0 !important"
|
|
6291
|
+
}
|
|
6292
|
+
}
|
|
6293
|
+
},
|
|
6294
|
+
"&.MuiChip-filledSecondary": {
|
|
6295
|
+
backgroundColor: "#B3EBF2",
|
|
6296
|
+
"&:hover": {
|
|
6297
|
+
backgroundColor: "#B3EBF2 !important",
|
|
6298
|
+
"&.MuiChip-clickableColorSecondary": {
|
|
6299
|
+
backgroundColor: "#80DEEA !important"
|
|
6300
|
+
}
|
|
6301
|
+
}
|
|
6302
|
+
},
|
|
6303
|
+
"&.MuiChip-filledError": {
|
|
6304
|
+
backgroundColor: "#F1C7C7",
|
|
6305
|
+
"&:hover": {
|
|
6306
|
+
backgroundColor: "#F1C7C7 !important",
|
|
6307
|
+
"&.MuiChip-clickableColorError": {
|
|
6308
|
+
backgroundColor: "#E8A1A1 !important"
|
|
6309
|
+
}
|
|
6310
|
+
}
|
|
6311
|
+
},
|
|
6312
|
+
"&.MuiChip-filledSuccess": {
|
|
6313
|
+
backgroundColor: "#DDEFC4",
|
|
6314
|
+
"&:hover": {
|
|
6315
|
+
backgroundColor: "#DDEFC4 !important",
|
|
6316
|
+
"&.MuiChip-clickableColorSuccess": {
|
|
6317
|
+
backgroundColor: "#C7E49D !important"
|
|
6318
|
+
}
|
|
6319
|
+
}
|
|
6320
|
+
},
|
|
6321
|
+
"&.MuiChip-filledInfo": {
|
|
6322
|
+
backgroundColor: "#C0E2EE",
|
|
6323
|
+
"&:hover": {
|
|
6324
|
+
backgroundColor: "#C0E2EE !important",
|
|
6325
|
+
"&.MuiChip-clickableColorInfo": {
|
|
6326
|
+
backgroundColor: "#96CFE2 !important"
|
|
6327
|
+
}
|
|
6328
|
+
}
|
|
6329
|
+
},
|
|
6330
|
+
"&.MuiChip-filledWarning": {
|
|
6331
|
+
backgroundColor: "#FEDAB3",
|
|
6332
|
+
"&:hover": {
|
|
6333
|
+
backgroundColor: "#FEDAB3 !important",
|
|
6334
|
+
"&.MuiChip-clickableColorWarning": {
|
|
6335
|
+
backgroundColor: "#FDC280 !important"
|
|
6336
|
+
}
|
|
6337
|
+
}
|
|
6271
6338
|
}
|
|
6272
6339
|
}
|
|
6273
6340
|
}
|
|
@@ -6664,17 +6731,31 @@ var components = {
|
|
|
6664
6731
|
},
|
|
6665
6732
|
MuiList: {
|
|
6666
6733
|
defaultProps: {
|
|
6667
|
-
dense:
|
|
6734
|
+
dense: false
|
|
6668
6735
|
},
|
|
6669
6736
|
styleOverrides: {
|
|
6670
|
-
|
|
6671
|
-
".
|
|
6672
|
-
|
|
6737
|
+
root: {
|
|
6738
|
+
"& .MuiButtonBase-root ": {
|
|
6739
|
+
marginBlock: 0,
|
|
6740
|
+
padding: 0
|
|
6741
|
+
},
|
|
6742
|
+
"& .MuiListItem-root": {
|
|
6743
|
+
padding: "8px 16px 8px 16px"
|
|
6744
|
+
},
|
|
6745
|
+
"& .MuiListItemText-root": {
|
|
6746
|
+
marginBlock: " 4.4px !important"
|
|
6673
6747
|
}
|
|
6674
6748
|
},
|
|
6675
6749
|
dense: {
|
|
6676
|
-
".MuiListItem-dense": {
|
|
6677
|
-
padding: "
|
|
6750
|
+
"& .MuiListItem-dense": {
|
|
6751
|
+
padding: "4px 16px 4px 16px",
|
|
6752
|
+
"& .MuiListItemIcon-root": {
|
|
6753
|
+
minWidth: "30px"
|
|
6754
|
+
},
|
|
6755
|
+
"& .MuiButtonBase-root": {
|
|
6756
|
+
marginBlock: 0,
|
|
6757
|
+
padding: 0
|
|
6758
|
+
}
|
|
6678
6759
|
}
|
|
6679
6760
|
}
|
|
6680
6761
|
}
|
|
@@ -14181,7 +14262,7 @@ var DrawerComponent = function DrawerComponent(_ref) {
|
|
|
14181
14262
|
var FooterAction = function FooterAction(_ref) {
|
|
14182
14263
|
var leftContent = _ref.leftContent,
|
|
14183
14264
|
rightContent = _ref.rightContent,
|
|
14184
|
-
|
|
14265
|
+
children = _ref.children;
|
|
14185
14266
|
return React__default.createElement(AppBar$1, {
|
|
14186
14267
|
position: "fixed",
|
|
14187
14268
|
color: "inherit",
|
|
@@ -14196,7 +14277,7 @@ var FooterAction = function FooterAction(_ref) {
|
|
|
14196
14277
|
}
|
|
14197
14278
|
}, leftContent, React__default.createElement(Box$2, {
|
|
14198
14279
|
flexGrow: 1
|
|
14199
|
-
}), React__default.createElement(Box$2, null,
|
|
14280
|
+
}), React__default.createElement(Box$2, null, children), rightContent));
|
|
14200
14281
|
};
|
|
14201
14282
|
|
|
14202
14283
|
var useProgress = function useProgress(timeProgress, lote) {
|
|
@@ -14504,9 +14585,11 @@ var ProgressSinco = function ProgressSinco(_ref) {
|
|
|
14504
14585
|
};
|
|
14505
14586
|
|
|
14506
14587
|
var CardRadio = function CardRadio(_ref) {
|
|
14588
|
+
var _ref2;
|
|
14507
14589
|
var _ref$RadioPosition = _ref.RadioPosition,
|
|
14508
14590
|
RadioPosition = _ref$RadioPosition === void 0 ? 'right' : _ref$RadioPosition,
|
|
14509
|
-
|
|
14591
|
+
_ref$state = _ref.state,
|
|
14592
|
+
state = _ref$state === void 0 ? 'default' : _ref$state,
|
|
14510
14593
|
media = _ref.media,
|
|
14511
14594
|
header = _ref.header,
|
|
14512
14595
|
content = _ref.content,
|
|
@@ -14517,24 +14600,24 @@ var CardRadio = function CardRadio(_ref) {
|
|
|
14517
14600
|
value = _ref.value,
|
|
14518
14601
|
onChange = _ref.onChange,
|
|
14519
14602
|
checked = _ref.checked;
|
|
14520
|
-
var _useState = useState(checked !== null &&
|
|
14603
|
+
var _useState = useState((_ref2 = checked || state === 'active') !== null && _ref2 !== void 0 ? _ref2 : false),
|
|
14521
14604
|
_useState2 = _slicedToArray(_useState, 2),
|
|
14522
14605
|
isChecked = _useState2[0],
|
|
14523
14606
|
setIsChecked = _useState2[1];
|
|
14524
|
-
var _useState3 = useState(
|
|
14607
|
+
var _useState3 = useState(state === 'active'),
|
|
14525
14608
|
_useState4 = _slicedToArray(_useState3, 1),
|
|
14526
14609
|
isActive = _useState4[0];
|
|
14527
14610
|
var handleClick = function handleClick() {
|
|
14528
|
-
if (
|
|
14611
|
+
if (state === 'disabled') return;
|
|
14529
14612
|
setIsChecked(!isChecked);
|
|
14530
14613
|
onChange(value);
|
|
14531
14614
|
};
|
|
14532
14615
|
var getBackgroundColor = function getBackgroundColor() {
|
|
14533
|
-
if (
|
|
14534
|
-
return isChecked ? color === 'primary' ? '#E4ECF4' : color === 'secondary' ? '#00BCD414' : '#FBFBFB' : 'transparent';
|
|
14616
|
+
if (state === 'disabled') return '';
|
|
14617
|
+
return isChecked || isActive ? color === 'primary' ? '#E4ECF4' : color === 'secondary' ? '#00BCD414' : '#FBFBFB' : 'transparent';
|
|
14535
14618
|
};
|
|
14536
14619
|
var getBorderColor = function getBorderColor() {
|
|
14537
|
-
return isChecked ? color === 'primary' ? '#2063A080' : color === 'secondary' ? '#00BCD480' : '#00BCD4' : '#0000001F';
|
|
14620
|
+
return isChecked || isActive ? color === 'primary' ? '#2063A080' : color === 'secondary' ? '#00BCD480' : '#00BCD4' : '#0000001F';
|
|
14538
14621
|
};
|
|
14539
14622
|
var getHoverColor = function getHoverColor() {
|
|
14540
14623
|
return color === 'primary' ? '#2063A00A' : color === 'secondary' ? '#00BCD40A' : 'FBFBFB';
|
|
@@ -14549,7 +14632,7 @@ var CardRadio = function CardRadio(_ref) {
|
|
|
14549
14632
|
border: "solid 1px ".concat(getBorderColor()),
|
|
14550
14633
|
sx: {
|
|
14551
14634
|
'&:hover': {
|
|
14552
|
-
backgroundColor: checked ? 'none' :
|
|
14635
|
+
backgroundColor: checked ? 'none' : state === 'disabled' ? 'inherit' : getHoverColor()
|
|
14553
14636
|
},
|
|
14554
14637
|
cursor: 'pointer'
|
|
14555
14638
|
},
|
|
@@ -14565,16 +14648,16 @@ var CardRadio = function CardRadio(_ref) {
|
|
|
14565
14648
|
gap: 1
|
|
14566
14649
|
}, media && React__default.createElement(Stack$1, null, media), React__default.createElement(Stack$1, null, header && React__default.createElement(Typography$1, {
|
|
14567
14650
|
variant: "subtitle2",
|
|
14568
|
-
color:
|
|
14569
|
-
},
|
|
14651
|
+
color: state === 'disabled' ? 'text.disabled' : isActive ? 'text.primary' : 'text.primary'
|
|
14652
|
+
}, header), content && React__default.createElement(Typography$1, {
|
|
14570
14653
|
variant: "caption",
|
|
14571
|
-
color:
|
|
14654
|
+
color: state === 'disabled' ? 'text.disabled' : isActive ? 'text.secondary' : 'text.secondary'
|
|
14572
14655
|
}, content))), React__default.createElement(Stack$1, {
|
|
14573
14656
|
justifyContent: topRadioPosition === true ? 'flex-start' : 'center'
|
|
14574
14657
|
}, React__default.createElement(Radio$1, {
|
|
14575
|
-
checked: isChecked,
|
|
14658
|
+
checked: isChecked || isChecked,
|
|
14576
14659
|
color: color,
|
|
14577
|
-
disabled:
|
|
14660
|
+
disabled: state === 'disabled'
|
|
14578
14661
|
}))));
|
|
14579
14662
|
};
|
|
14580
14663
|
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
2
|
type RadioPosition = 'left' | 'right';
|
|
3
|
-
type
|
|
3
|
+
type Radiostate = 'active' | 'disabled' | 'default';
|
|
4
4
|
type CardRadioColors = 'primary' | 'secondary';
|
|
5
5
|
export interface CardRadioProps {
|
|
6
6
|
RadioPosition?: RadioPosition;
|
|
7
7
|
topRadioPosition?: boolean;
|
|
8
|
-
|
|
8
|
+
state?: Radiostate;
|
|
9
9
|
media?: React.ReactNode;
|
|
10
10
|
header?: React.ReactNode | string;
|
|
11
11
|
content?: React.ReactNode | string;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface FooterActionsProperties {
|
|
3
|
-
|
|
3
|
+
children?: React.ReactNode | string;
|
|
4
4
|
leftContent?: React.ReactNode;
|
|
5
5
|
rightContent?: React.ReactNode;
|
|
6
6
|
}
|
|
7
|
-
export declare const FooterAction: ({ leftContent, rightContent,
|
|
7
|
+
export declare const FooterAction: ({ leftContent, rightContent, children, }: FooterActionsProperties) => React.JSX.Element;
|
|
8
8
|
export {};
|