pne-ui 4.0.26 → 4.0.28
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ButtonProps } from '@mui/material';
|
|
2
|
-
import * as React from
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
export type PneButtonStyle = 'contained' | 'outlined' | 'error' | 'text';
|
|
4
4
|
declare const PneButton: <C extends React.ElementType>(props: ButtonProps<C, {
|
|
5
5
|
component?: C;
|
|
@@ -2,46 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const material_1 = require("@mui/material");
|
|
5
|
-
const styles_1 = require("@mui/material/styles");
|
|
6
5
|
const React = tslib_1.__importStar(require("react"));
|
|
7
|
-
const buttonMinWidth = 64;
|
|
8
|
-
const outlinedBorderWidth = 1;
|
|
9
|
-
const buttonSizeConfig = {
|
|
10
|
-
small: {
|
|
11
|
-
height: 28,
|
|
12
|
-
verticalPadding: 4,
|
|
13
|
-
horizontalPadding: 16,
|
|
14
|
-
iconNearPadding: 12,
|
|
15
|
-
iconFarPadding: 16,
|
|
16
|
-
iconOnlyPadding: 6,
|
|
17
|
-
gap: 4,
|
|
18
|
-
},
|
|
19
|
-
medium: {
|
|
20
|
-
height: 32,
|
|
21
|
-
verticalPadding: 6,
|
|
22
|
-
horizontalPadding: 20,
|
|
23
|
-
iconNearPadding: 16,
|
|
24
|
-
iconFarPadding: 20,
|
|
25
|
-
iconOnlyPadding: 8,
|
|
26
|
-
gap: 8,
|
|
27
|
-
},
|
|
28
|
-
large: {
|
|
29
|
-
height: 40,
|
|
30
|
-
verticalPadding: 10,
|
|
31
|
-
horizontalPadding: 20,
|
|
32
|
-
iconNearPadding: 16,
|
|
33
|
-
iconFarPadding: 20,
|
|
34
|
-
iconOnlyPadding: 10,
|
|
35
|
-
gap: 8,
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
const isPneButtonSize = (size) => {
|
|
39
|
-
return size === 'small' || size === 'medium' || size === 'large';
|
|
40
|
-
};
|
|
41
6
|
// https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
|
|
42
7
|
const PneButton = (props) => {
|
|
43
|
-
const { sx, children, variant, color, size = 'large', pneStyle,
|
|
44
|
-
const resolvedSize = isPneButtonSize(size) ? size : 'large';
|
|
8
|
+
const { sx, children, variant, color, size = 'large', pneStyle, ...rest } = props;
|
|
45
9
|
let finalVariant = 'contained';
|
|
46
10
|
let finalColor = 'primary';
|
|
47
11
|
if (pneStyle) {
|
|
@@ -70,139 +34,17 @@ const PneButton = (props) => {
|
|
|
70
34
|
finalVariant = variant || finalVariant;
|
|
71
35
|
finalColor = color || finalColor;
|
|
72
36
|
}
|
|
73
|
-
const hasStartIcon = Boolean(startIcon);
|
|
74
|
-
const hasEndIcon = Boolean(endIcon);
|
|
75
|
-
const hasChildren = React.Children.count(children) > 0;
|
|
76
|
-
const iconOnly = !hasChildren && (hasStartIcon || hasEndIcon);
|
|
77
37
|
const _sx = [
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}),
|
|
38
|
+
{
|
|
39
|
+
height: size === 'large' ? '40px' : 'inherit',
|
|
40
|
+
fontSize: '12px',
|
|
41
|
+
lineHeight: '22px',
|
|
42
|
+
fontWeight: '400',
|
|
43
|
+
textTransform: 'initial'
|
|
44
|
+
},
|
|
86
45
|
...(Array.isArray(sx) ? sx : [sx])
|
|
87
46
|
];
|
|
88
|
-
return React.createElement(material_1.Button, { sx: _sx, variant: finalVariant, color: finalColor, size:
|
|
89
|
-
};
|
|
90
|
-
const createButtonSx = (options) => theme => {
|
|
91
|
-
const config = buttonSizeConfig[options.size];
|
|
92
|
-
const iconOnlyPadding = config.iconOnlyPadding;
|
|
93
|
-
const iconOnlySize = 16 + iconOnlyPadding * 2;
|
|
94
|
-
return {
|
|
95
|
-
...createButtonBaseSx(config, options, iconOnlyPadding, iconOnlySize),
|
|
96
|
-
...createPrimaryButtonColorSx(theme, options.variant, options.color),
|
|
97
|
-
};
|
|
98
|
-
};
|
|
99
|
-
const createButtonBaseSx = (config, options, iconOnlyPadding, iconOnlySize) => {
|
|
100
|
-
const padding = getButtonPadding(config, options, iconOnlyPadding);
|
|
101
|
-
return {
|
|
102
|
-
borderRadius: '4px',
|
|
103
|
-
boxShadow: 'none',
|
|
104
|
-
boxSizing: 'border-box',
|
|
105
|
-
fontFamily: 'Arial, sans-serif',
|
|
106
|
-
fontSize: '14px',
|
|
107
|
-
fontWeight: 400,
|
|
108
|
-
gap: options.iconOnly ? 0 : `${config.gap}px`,
|
|
109
|
-
height: options.iconOnly ? `${iconOnlySize}px` : `${config.height}px`,
|
|
110
|
-
lineHeight: '20px',
|
|
111
|
-
minHeight: options.iconOnly ? `${iconOnlySize}px` : `${config.height}px`,
|
|
112
|
-
minWidth: options.iconOnly ? `${iconOnlySize}px` : `${buttonMinWidth}px`,
|
|
113
|
-
padding,
|
|
114
|
-
textTransform: 'none',
|
|
115
|
-
...(options.iconOnly ? { width: `${iconOnlySize}px` } : {}),
|
|
116
|
-
'&:hover': {
|
|
117
|
-
boxShadow: 'none',
|
|
118
|
-
},
|
|
119
|
-
'&:active': {
|
|
120
|
-
boxShadow: 'none',
|
|
121
|
-
},
|
|
122
|
-
'&&& .MuiButton-startIcon, &&& .MuiButton-endIcon': {
|
|
123
|
-
display: 'inline-flex',
|
|
124
|
-
marginLeft: 0,
|
|
125
|
-
marginRight: 0,
|
|
126
|
-
},
|
|
127
|
-
'&&& .MuiButton-startIcon > *:nth-of-type(1), &&& .MuiButton-endIcon > *:nth-of-type(1)': {
|
|
128
|
-
fontSize: 16,
|
|
129
|
-
},
|
|
130
|
-
'&&& .MuiButton-startIcon svg, &&& .MuiButton-endIcon svg': {
|
|
131
|
-
height: 16,
|
|
132
|
-
width: 16,
|
|
133
|
-
},
|
|
134
|
-
};
|
|
135
|
-
};
|
|
136
|
-
const getButtonPadding = (config, options, iconOnlyPadding) => {
|
|
137
|
-
if (options.iconOnly) {
|
|
138
|
-
return `${iconOnlyPadding}px`;
|
|
139
|
-
}
|
|
140
|
-
const compensateBorder = options.variant === 'outlined';
|
|
141
|
-
const verticalPadding = getButtonPaddingValue(config.verticalPadding, compensateBorder);
|
|
142
|
-
const horizontalPadding = getButtonPaddingValue(config.horizontalPadding, compensateBorder);
|
|
143
|
-
const iconNearPadding = getButtonPaddingValue(config.iconNearPadding, compensateBorder);
|
|
144
|
-
const iconFarPadding = getButtonPaddingValue(config.iconFarPadding, compensateBorder);
|
|
145
|
-
if (options.hasStartIcon) {
|
|
146
|
-
return `${verticalPadding}px ${iconFarPadding}px ${verticalPadding}px ${iconNearPadding}px`;
|
|
147
|
-
}
|
|
148
|
-
if (options.hasEndIcon) {
|
|
149
|
-
return `${verticalPadding}px ${iconNearPadding}px ${verticalPadding}px ${iconFarPadding}px`;
|
|
150
|
-
}
|
|
151
|
-
return `${verticalPadding}px ${horizontalPadding}px`;
|
|
152
|
-
};
|
|
153
|
-
const getButtonPaddingValue = (padding, compensateBorder) => {
|
|
154
|
-
return compensateBorder ? padding - outlinedBorderWidth : padding;
|
|
155
|
-
};
|
|
156
|
-
const createPrimaryButtonColorSx = (theme, variant, color) => {
|
|
157
|
-
if (color !== 'primary') {
|
|
158
|
-
return {};
|
|
159
|
-
}
|
|
160
|
-
const feedbackBackgroundColor = (0, styles_1.alpha)(theme.palette.primary.main, 0.1);
|
|
161
|
-
if (variant === 'contained') {
|
|
162
|
-
return {
|
|
163
|
-
backgroundColor: theme.palette.primary.main,
|
|
164
|
-
color: theme.palette.primary.contrastText,
|
|
165
|
-
'&:hover, &:active': {
|
|
166
|
-
backgroundColor: theme.palette.primary.dark,
|
|
167
|
-
boxShadow: 'none',
|
|
168
|
-
},
|
|
169
|
-
'&.Mui-disabled': {
|
|
170
|
-
backgroundColor: '#B0B7C3',
|
|
171
|
-
color: '#fff',
|
|
172
|
-
},
|
|
173
|
-
};
|
|
174
|
-
}
|
|
175
|
-
if (variant === 'outlined') {
|
|
176
|
-
return {
|
|
177
|
-
backgroundColor: 'transparent',
|
|
178
|
-
borderColor: theme.palette.primary.main,
|
|
179
|
-
color: theme.palette.primary.main,
|
|
180
|
-
'&:hover, &:active': {
|
|
181
|
-
backgroundColor: feedbackBackgroundColor,
|
|
182
|
-
borderColor: theme.palette.primary.dark,
|
|
183
|
-
color: theme.palette.primary.dark,
|
|
184
|
-
},
|
|
185
|
-
'&.Mui-disabled': {
|
|
186
|
-
backgroundColor: 'transparent',
|
|
187
|
-
borderColor: '#B0B7C3',
|
|
188
|
-
color: '#B0B7C3',
|
|
189
|
-
},
|
|
190
|
-
};
|
|
191
|
-
}
|
|
192
|
-
if (variant === 'text') {
|
|
193
|
-
return {
|
|
194
|
-
color: theme.palette.primary.main,
|
|
195
|
-
'&:hover, &:active': {
|
|
196
|
-
backgroundColor: feedbackBackgroundColor,
|
|
197
|
-
color: theme.palette.primary.dark,
|
|
198
|
-
},
|
|
199
|
-
'&.Mui-disabled': {
|
|
200
|
-
backgroundColor: 'transparent',
|
|
201
|
-
color: '#B0B7C3',
|
|
202
|
-
},
|
|
203
|
-
};
|
|
204
|
-
}
|
|
205
|
-
return {};
|
|
47
|
+
return React.createElement(material_1.Button, { sx: _sx, variant: finalVariant, color: finalColor, size: size, ...rest }, children);
|
|
206
48
|
};
|
|
207
49
|
exports.default = PneButton;
|
|
208
50
|
//# sourceMappingURL=PneButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PneButton.js","sourceRoot":"","sources":["../../src/component/PneButton.tsx"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"PneButton.js","sourceRoot":"","sources":["../../src/component/PneButton.tsx"],"names":[],"mappings":";;;AAAA,4CAA2D;AAC3D,qDAA+B;AAI/B,uFAAuF;AACvF,MAAM,SAAS,GAAG,CACd,KAAsE,EACxE,EAAE;IACA,MAAM,EACF,EAAE,EACF,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IAEV,IAAI,YAAY,GAA2B,WAAW,CAAA;IACtD,IAAI,UAAU,GAAyB,SAAS,CAAA;IAEhD,IAAI,QAAQ,EAAE,CAAC;QACX,QAAQ,QAAQ,EAAE,CAAC;YACf,KAAK,WAAW;gBACZ,YAAY,GAAG,WAAW,CAAA;gBAC1B,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT,KAAK,UAAU;gBACX,YAAY,GAAG,UAAU,CAAA;gBACzB,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT,KAAK,OAAO;gBACR,YAAY,GAAG,UAAU,CAAA;gBACzB,UAAU,GAAG,OAAO,CAAA;gBACpB,MAAK;YACT,KAAK,MAAM;gBACP,YAAY,GAAG,MAAM,CAAA;gBACrB,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT;gBACI,OAAO,CAAC,IAAI,CAAC,qBAAqB,QAAQ,EAAE,CAAC,CAAA;QACrD,CAAC;IACL,CAAC;SAAM,CAAC;QACJ,YAAY,GAAG,OAAO,IAAI,YAAY,CAAA;QACtC,UAAU,GAAG,KAAK,IAAI,UAAU,CAAA;IACpC,CAAC;IAED,MAAM,GAAG,GAAY;QACjB;YACI,MAAM,EAAE,IAAI,KAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC5C,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;YAClB,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,SAAS;SAC3B;QACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACrC,CAAA;IAED,OAAO,oBAAC,iBAAM,IAAC,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,KAAM,IAAI,IAAG,QAAQ,CAAU,CAAA;AAC/G,CAAC,CAAA;AAED,kBAAe,SAAS,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ButtonProps } from '@mui/material';
|
|
2
|
-
import * as React from
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
export type PneButtonStyle = 'contained' | 'outlined' | 'error' | 'text';
|
|
4
4
|
declare const PneButton: <C extends React.ElementType>(props: ButtonProps<C, {
|
|
5
5
|
component?: C;
|
|
@@ -1,44 +1,8 @@
|
|
|
1
1
|
import { Button } from '@mui/material';
|
|
2
|
-
import
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
const buttonMinWidth = 64;
|
|
5
|
-
const outlinedBorderWidth = 1;
|
|
6
|
-
const buttonSizeConfig = {
|
|
7
|
-
small: {
|
|
8
|
-
height: 28,
|
|
9
|
-
verticalPadding: 4,
|
|
10
|
-
horizontalPadding: 16,
|
|
11
|
-
iconNearPadding: 12,
|
|
12
|
-
iconFarPadding: 16,
|
|
13
|
-
iconOnlyPadding: 6,
|
|
14
|
-
gap: 4,
|
|
15
|
-
},
|
|
16
|
-
medium: {
|
|
17
|
-
height: 32,
|
|
18
|
-
verticalPadding: 6,
|
|
19
|
-
horizontalPadding: 20,
|
|
20
|
-
iconNearPadding: 16,
|
|
21
|
-
iconFarPadding: 20,
|
|
22
|
-
iconOnlyPadding: 8,
|
|
23
|
-
gap: 8,
|
|
24
|
-
},
|
|
25
|
-
large: {
|
|
26
|
-
height: 40,
|
|
27
|
-
verticalPadding: 10,
|
|
28
|
-
horizontalPadding: 20,
|
|
29
|
-
iconNearPadding: 16,
|
|
30
|
-
iconFarPadding: 20,
|
|
31
|
-
iconOnlyPadding: 10,
|
|
32
|
-
gap: 8,
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
const isPneButtonSize = (size) => {
|
|
36
|
-
return size === 'small' || size === 'medium' || size === 'large';
|
|
37
|
-
};
|
|
2
|
+
import * as React from "react";
|
|
38
3
|
// https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
|
|
39
4
|
const PneButton = (props) => {
|
|
40
|
-
const { sx, children, variant, color, size = 'large', pneStyle,
|
|
41
|
-
const resolvedSize = isPneButtonSize(size) ? size : 'large';
|
|
5
|
+
const { sx, children, variant, color, size = 'large', pneStyle, ...rest } = props;
|
|
42
6
|
let finalVariant = 'contained';
|
|
43
7
|
let finalColor = 'primary';
|
|
44
8
|
if (pneStyle) {
|
|
@@ -67,139 +31,17 @@ const PneButton = (props) => {
|
|
|
67
31
|
finalVariant = variant || finalVariant;
|
|
68
32
|
finalColor = color || finalColor;
|
|
69
33
|
}
|
|
70
|
-
const hasStartIcon = Boolean(startIcon);
|
|
71
|
-
const hasEndIcon = Boolean(endIcon);
|
|
72
|
-
const hasChildren = React.Children.count(children) > 0;
|
|
73
|
-
const iconOnly = !hasChildren && (hasStartIcon || hasEndIcon);
|
|
74
34
|
const _sx = [
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}),
|
|
35
|
+
{
|
|
36
|
+
height: size === 'large' ? '40px' : 'inherit',
|
|
37
|
+
fontSize: '12px',
|
|
38
|
+
lineHeight: '22px',
|
|
39
|
+
fontWeight: '400',
|
|
40
|
+
textTransform: 'initial'
|
|
41
|
+
},
|
|
83
42
|
...(Array.isArray(sx) ? sx : [sx])
|
|
84
43
|
];
|
|
85
|
-
return React.createElement(Button, { sx: _sx, variant: finalVariant, color: finalColor, size:
|
|
86
|
-
};
|
|
87
|
-
const createButtonSx = (options) => theme => {
|
|
88
|
-
const config = buttonSizeConfig[options.size];
|
|
89
|
-
const iconOnlyPadding = config.iconOnlyPadding;
|
|
90
|
-
const iconOnlySize = 16 + iconOnlyPadding * 2;
|
|
91
|
-
return {
|
|
92
|
-
...createButtonBaseSx(config, options, iconOnlyPadding, iconOnlySize),
|
|
93
|
-
...createPrimaryButtonColorSx(theme, options.variant, options.color),
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
|
-
const createButtonBaseSx = (config, options, iconOnlyPadding, iconOnlySize) => {
|
|
97
|
-
const padding = getButtonPadding(config, options, iconOnlyPadding);
|
|
98
|
-
return {
|
|
99
|
-
borderRadius: '4px',
|
|
100
|
-
boxShadow: 'none',
|
|
101
|
-
boxSizing: 'border-box',
|
|
102
|
-
fontFamily: 'Arial, sans-serif',
|
|
103
|
-
fontSize: '14px',
|
|
104
|
-
fontWeight: 400,
|
|
105
|
-
gap: options.iconOnly ? 0 : `${config.gap}px`,
|
|
106
|
-
height: options.iconOnly ? `${iconOnlySize}px` : `${config.height}px`,
|
|
107
|
-
lineHeight: '20px',
|
|
108
|
-
minHeight: options.iconOnly ? `${iconOnlySize}px` : `${config.height}px`,
|
|
109
|
-
minWidth: options.iconOnly ? `${iconOnlySize}px` : `${buttonMinWidth}px`,
|
|
110
|
-
padding,
|
|
111
|
-
textTransform: 'none',
|
|
112
|
-
...(options.iconOnly ? { width: `${iconOnlySize}px` } : {}),
|
|
113
|
-
'&:hover': {
|
|
114
|
-
boxShadow: 'none',
|
|
115
|
-
},
|
|
116
|
-
'&:active': {
|
|
117
|
-
boxShadow: 'none',
|
|
118
|
-
},
|
|
119
|
-
'&&& .MuiButton-startIcon, &&& .MuiButton-endIcon': {
|
|
120
|
-
display: 'inline-flex',
|
|
121
|
-
marginLeft: 0,
|
|
122
|
-
marginRight: 0,
|
|
123
|
-
},
|
|
124
|
-
'&&& .MuiButton-startIcon > *:nth-of-type(1), &&& .MuiButton-endIcon > *:nth-of-type(1)': {
|
|
125
|
-
fontSize: 16,
|
|
126
|
-
},
|
|
127
|
-
'&&& .MuiButton-startIcon svg, &&& .MuiButton-endIcon svg': {
|
|
128
|
-
height: 16,
|
|
129
|
-
width: 16,
|
|
130
|
-
},
|
|
131
|
-
};
|
|
132
|
-
};
|
|
133
|
-
const getButtonPadding = (config, options, iconOnlyPadding) => {
|
|
134
|
-
if (options.iconOnly) {
|
|
135
|
-
return `${iconOnlyPadding}px`;
|
|
136
|
-
}
|
|
137
|
-
const compensateBorder = options.variant === 'outlined';
|
|
138
|
-
const verticalPadding = getButtonPaddingValue(config.verticalPadding, compensateBorder);
|
|
139
|
-
const horizontalPadding = getButtonPaddingValue(config.horizontalPadding, compensateBorder);
|
|
140
|
-
const iconNearPadding = getButtonPaddingValue(config.iconNearPadding, compensateBorder);
|
|
141
|
-
const iconFarPadding = getButtonPaddingValue(config.iconFarPadding, compensateBorder);
|
|
142
|
-
if (options.hasStartIcon) {
|
|
143
|
-
return `${verticalPadding}px ${iconFarPadding}px ${verticalPadding}px ${iconNearPadding}px`;
|
|
144
|
-
}
|
|
145
|
-
if (options.hasEndIcon) {
|
|
146
|
-
return `${verticalPadding}px ${iconNearPadding}px ${verticalPadding}px ${iconFarPadding}px`;
|
|
147
|
-
}
|
|
148
|
-
return `${verticalPadding}px ${horizontalPadding}px`;
|
|
149
|
-
};
|
|
150
|
-
const getButtonPaddingValue = (padding, compensateBorder) => {
|
|
151
|
-
return compensateBorder ? padding - outlinedBorderWidth : padding;
|
|
152
|
-
};
|
|
153
|
-
const createPrimaryButtonColorSx = (theme, variant, color) => {
|
|
154
|
-
if (color !== 'primary') {
|
|
155
|
-
return {};
|
|
156
|
-
}
|
|
157
|
-
const feedbackBackgroundColor = alpha(theme.palette.primary.main, 0.1);
|
|
158
|
-
if (variant === 'contained') {
|
|
159
|
-
return {
|
|
160
|
-
backgroundColor: theme.palette.primary.main,
|
|
161
|
-
color: theme.palette.primary.contrastText,
|
|
162
|
-
'&:hover, &:active': {
|
|
163
|
-
backgroundColor: theme.palette.primary.dark,
|
|
164
|
-
boxShadow: 'none',
|
|
165
|
-
},
|
|
166
|
-
'&.Mui-disabled': {
|
|
167
|
-
backgroundColor: '#B0B7C3',
|
|
168
|
-
color: '#fff',
|
|
169
|
-
},
|
|
170
|
-
};
|
|
171
|
-
}
|
|
172
|
-
if (variant === 'outlined') {
|
|
173
|
-
return {
|
|
174
|
-
backgroundColor: 'transparent',
|
|
175
|
-
borderColor: theme.palette.primary.main,
|
|
176
|
-
color: theme.palette.primary.main,
|
|
177
|
-
'&:hover, &:active': {
|
|
178
|
-
backgroundColor: feedbackBackgroundColor,
|
|
179
|
-
borderColor: theme.palette.primary.dark,
|
|
180
|
-
color: theme.palette.primary.dark,
|
|
181
|
-
},
|
|
182
|
-
'&.Mui-disabled': {
|
|
183
|
-
backgroundColor: 'transparent',
|
|
184
|
-
borderColor: '#B0B7C3',
|
|
185
|
-
color: '#B0B7C3',
|
|
186
|
-
},
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
|
-
if (variant === 'text') {
|
|
190
|
-
return {
|
|
191
|
-
color: theme.palette.primary.main,
|
|
192
|
-
'&:hover, &:active': {
|
|
193
|
-
backgroundColor: feedbackBackgroundColor,
|
|
194
|
-
color: theme.palette.primary.dark,
|
|
195
|
-
},
|
|
196
|
-
'&.Mui-disabled': {
|
|
197
|
-
backgroundColor: 'transparent',
|
|
198
|
-
color: '#B0B7C3',
|
|
199
|
-
},
|
|
200
|
-
};
|
|
201
|
-
}
|
|
202
|
-
return {};
|
|
44
|
+
return React.createElement(Button, { sx: _sx, variant: finalVariant, color: finalColor, size: size, ...rest }, children);
|
|
203
45
|
};
|
|
204
46
|
export default PneButton;
|
|
205
47
|
//# sourceMappingURL=PneButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PneButton.js","sourceRoot":"","sources":["../../src/component/PneButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"PneButton.js","sourceRoot":"","sources":["../../src/component/PneButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAuB,MAAM,eAAe,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,uFAAuF;AACvF,MAAM,SAAS,GAAG,CACd,KAAsE,EACxE,EAAE;IACA,MAAM,EACF,EAAE,EACF,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IAEV,IAAI,YAAY,GAA2B,WAAW,CAAA;IACtD,IAAI,UAAU,GAAyB,SAAS,CAAA;IAEhD,IAAI,QAAQ,EAAE,CAAC;QACX,QAAQ,QAAQ,EAAE,CAAC;YACf,KAAK,WAAW;gBACZ,YAAY,GAAG,WAAW,CAAA;gBAC1B,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT,KAAK,UAAU;gBACX,YAAY,GAAG,UAAU,CAAA;gBACzB,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT,KAAK,OAAO;gBACR,YAAY,GAAG,UAAU,CAAA;gBACzB,UAAU,GAAG,OAAO,CAAA;gBACpB,MAAK;YACT,KAAK,MAAM;gBACP,YAAY,GAAG,MAAM,CAAA;gBACrB,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT;gBACI,OAAO,CAAC,IAAI,CAAC,qBAAqB,QAAQ,EAAE,CAAC,CAAA;QACrD,CAAC;IACL,CAAC;SAAM,CAAC;QACJ,YAAY,GAAG,OAAO,IAAI,YAAY,CAAA;QACtC,UAAU,GAAG,KAAK,IAAI,UAAU,CAAA;IACpC,CAAC;IAED,MAAM,GAAG,GAAY;QACjB;YACI,MAAM,EAAE,IAAI,KAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC5C,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;YAClB,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,SAAS;SAC3B;QACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACrC,CAAA;IAED,OAAO,oBAAC,MAAM,IAAC,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,KAAM,IAAI,IAAG,QAAQ,CAAU,CAAA;AAC/G,CAAC,CAAA;AAED,eAAe,SAAS,CAAC"}
|