Skip to content

Commit c5b6e92

Browse files
nullptr-znullptr-z
authored
refactor(Input): 拆分属性 #826 (#844)
1 parent 01659c1 commit c5b6e92

File tree

2 files changed

+128
-59
lines changed

2 files changed

+128
-59
lines changed

‎packages/react-input/src/style/input.ts

Lines changed: 105 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,84 @@ import { InputProps } from 'src';
44

55
interface InputWarp extends ThemeVariantValueOptions, Pick<InputProps, 'size' | 'addonAfter' | 'disabled'> {}
66

7-
export const Input = styled.input`
8-
outline: none;
9-
border: none;
10-
border-radius: 3px;
11-
box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15),
12-
inset 0 1px 1px rgba(16, 22, 26, 0.2);
13-
box-sizing: border-box;
14-
background: #fff;
15-
height: 30px;
16-
margin: 0 !important;
17-
padding: 0 10px;
18-
vertical-align: middle;
19-
line-height: 30px;
20-
color: #393e48;
21-
font-weight: 400;
22-
font-size: inherit;
23-
transition: box-shadow 0.3s cubic-bezier(0.4, 1, 0.75, 0.9);
24-
appearance: none;
25-
&:not(:first-child) {
26-
padding-left: 26px;
27-
}
28-
&:focus {
29-
box-shadow: 0 0 0 1px #393e48, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
30-
}
31-
&:hover {
32-
box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0), inset 0 1px 1px rgba(16, 22, 26, 0.2);
33-
}
34-
&:focus&:hover {
35-
box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
36-
}
37-
&:disabled {
38-
box-shadow: none;
39-
background: #dddddd;
40-
opacity: 0.75;
41-
color: #a5a5a5;
42-
cursor: not-allowed;
43-
resize: none;
44-
}
7+
export const Input = styled.input<InputWarp>`
8+
${(props) => {
9+
const boxShadowColorInputBase = getThemeVariantValue(props, `boxShadowColorInputBase`);
10+
const boxShadowColorInputInsHBase = getThemeVariantValue(props, `boxShadowColorInputInsHBase`);
11+
const boxShadowColorInputInsVBase = getThemeVariantValue(props, `boxShadowColorInputInsVBase`);
12+
const boxShadowColorInputVFocus = getThemeVariantValue(props, `boxShadowColorInputVFocus`);
13+
const boxShadowColorInputHHover = getThemeVariantValue(props, `boxShadowColorInputHHover`);
14+
15+
return css`
16+
outline: none;
17+
border: none;
18+
border-radius: 3px;
19+
box-shadow: 0 0 0 0 ${boxShadowColorInputBase}, 0 0 0 0 ${boxShadowColorInputBase},
20+
inset 0 0 0 1px ${boxShadowColorInputInsHBase}, inset 0 1px 1px ${boxShadowColorInputInsVBase};
21+
box-sizing: border-box;
22+
background: ${getThemeVariantValue(props, `backgroundColorInputBase`)};
23+
height: ${getThemeVariantValue(props, `heightInputDefault`)};
24+
margin: 0 !important;
25+
padding: 0 10px;
26+
vertical-align: middle;
27+
line-height: ${getThemeVariantValue(props, `heightInputDefault`)};
28+
color: ${getThemeVariantValue(props, `colorInputBase`)};
29+
font-weight: 400;
30+
font-size: ${getThemeVariantValue(props, `fontSizeInputDefault`)};
31+
transition: box-shadow 0.3s cubic-bezier(0.4, 1, 0.75, 0.9);
32+
appearance: none;
33+
&:not(:first-child) {
34+
padding-left: 26px;
35+
}
36+
&:focus {
37+
box-shadow: 0 0 0 1px ${getThemeVariantValue(props, `boxShadowColorInputHFocus`)},
38+
0 0 0 3px ${boxShadowColorInputVFocus}, inset 0 1px 1px ${boxShadowColorInputInsVBase};
39+
}
40+
&:hover {
41+
box-shadow: 0 0 0 1px ${boxShadowColorInputHHover},
42+
0 0 0 3px ${getThemeVariantValue(props, `boxShadowColorInputVHover`)},
43+
inset 0 1px 1px ${boxShadowColorInputInsVBase};
44+
}
45+
&:focus&:hover {
46+
box-shadow: 0 0 0 1px ${boxShadowColorInputHHover}, 0 0 0 3px ${boxShadowColorInputVFocus},
47+
inset 0 1px 1px ${boxShadowColorInputInsVBase};
48+
}
49+
&:disabled {
50+
box-shadow: none;
51+
background: ${getThemeVariantValue(props, `backgrounColorInputDisabled`)};
52+
opacity: 0.75;
53+
color: ${getThemeVariantValue(props, `colorInputDisabled`)};
54+
cursor: not-allowed;
55+
resize: none;
56+
}
57+
`;
58+
}}
4559
`;
4660

47-
export const InputAddonAfter = styled.span`
48-
position: absolute;
49-
top: 3px;
50-
right: 3px;
51-
display: flex;
52-
bottom: 3px;
53-
> * {
54-
display: flex !important;
55-
align-items: center;
56-
}
61+
export const InputAddonAfter = styled.span<InputWarp>`
62+
${(props) => {
63+
return css`
64+
position: absolute;
65+
top: ${getThemeVariantValue(props, `topInputAddonAfter`)};
66+
right: ${getThemeVariantValue(props, `topInputAddonAfter`)};
67+
display: flex;
68+
bottom: ${getThemeVariantValue(props, `topInputAddonAfter`)};
69+
> * {
70+
display: flex !important;
71+
align-items: center;
72+
}
73+
`;
74+
}}
5775
`;
5876

5977
const InputWarp = styled.div<InputWarp>`
6078
position: relative;
6179
font-size: ${(props) => getThemeVariantValue(props, 'fontSizeDefault')};
62-
line-height: '14px';
63-
width: 100%;
80+
line-height: ${(props) => getThemeVariantValue(props, 'lineHeightInputsDefault')};
81+
width: ${(props) => getThemeVariantValue(props, 'widthInputsDefault')};
6482
6583
& ${Input} {
66-
width: 100%;
84+
width: ${(props) => getThemeVariantValue(props, 'widthInputsDefault')};
6785
}
6886
6987
> .w-icon {
@@ -76,10 +94,10 @@ const InputWarp = styled.div<InputWarp>`
7694
${(props) => {
7795
if (props.size === 'large') {
7896
return css`
79-
font-size: ${(props) => getThemeVariantValue(props, 'fontSizeLarge')};
97+
font-size: ${getThemeVariantValue(props, 'fontSizeLarge')};
8098
${Input} {
81-
line-height: 36px;
82-
height: 36px;
99+
line-height: ${getThemeVariantValue(props, 'lineHeightInputLarge')};
100+
height: ${getThemeVariantValue(props, 'lineHeightInputLarge')};
83101
}
84102
`;
85103
}
@@ -90,29 +108,57 @@ const InputWarp = styled.div<InputWarp>`
90108
return css`
91109
min-width: 20px;
92110
${Input} {
93-
line-height: 24px;
94-
height: 24px;
111+
line-height: ${getThemeVariantValue(props, 'lineHeightInputSmall')};
112+
height: ${getThemeVariantValue(props, 'lineHeightInputSmall')};
95113
padding: 0 6px;
96114
&:not(:first-child) {
97115
padding-left: 26px;
98116
}
99117
}
100118
${InputAddonAfter} {
101119
> * {
102-
line-height: 16px;
103-
min-height: 16px;
120+
line-height: ${getThemeVariantValue(props, 'lineHeightInputAddonAfter')};
121+
min-height: ${getThemeVariantValue(props, 'lineHeightInputAddonAfter')};
104122
}
105123
}
106124
`;
107125
}
108126
}}
109127
`;
110128

129+
Input.defaultProps = {
130+
defaultTheme: {
131+
colorInputBase: '#393e48',
132+
boxShadowColorInputHBase: 'rgba(19, 124, 189, 0)',
133+
boxShadowColorInputInsHBase: 'rgba(16, 22, 26, 0.15)',
134+
boxShadowColorInputInsVBase: 'rgba(16, 22, 26, 0.2)',
135+
backgroundColorInputBase: '#fff',
136+
heightInputDefault: '30px',
137+
fontSizeInputDefault: 'inherit',
138+
boxShadowColorInputHFocus: '#393e48',
139+
boxShadowColorInputVFocus: 'rgba(57, 62, 72, 0.17)',
140+
boxShadowColorInputHHover: '#6e6e6e',
141+
boxShadowColorInputVHover: 'rgba(57, 62, 72, 0)',
142+
backgrounColorInputDisabled: '#dddddd',
143+
colorInputDisabled: '#a5a5a5',
144+
},
145+
};
146+
147+
InputAddonAfter.defaultProps = {
148+
defaultTheme: {
149+
topInputAddonAfter: '3px',
150+
},
151+
};
152+
111153
InputWarp.defaultProps = {
112154
defaultTheme: {
113-
fontSizeSmall: '12px',
114155
fontSizeDefault: '14px',
115156
fontSizeLarge: '16px',
157+
lineHeightInputsDefault: '14px',
158+
widthInputsDefault: '100%',
159+
lineHeightInputLarge: '36px',
160+
lineHeightInputSmall: '24px',
161+
lineHeightInputAddonAfter: '16px',
116162
},
117163
};
118164

‎theme/themeVariant.json5

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,29 @@
161161
// activeBs
162162
colorRateBgBase: '#e9e9e9',
163163

164+
// -------------------------- input 输入框 ----------------------------------
165+
lineHeightInputsDefault: '14px',
166+
widthInputsDefault: '100%',
167+
lineHeightInputLarge: '36px',
168+
lineHeightInputSmall: '24px',
169+
lineHeightInputAddonAfter: '16px',
170+
// Input
171+
colorInputBase: '#393e48',
172+
boxShadowColorInputHBase: 'rgba(19, 124, 189, 0)',
173+
boxShadowColorInputInsHBase: 'rgba(16, 22, 26, 0.15)',
174+
boxShadowColorInputInsVBase: 'rgba(16, 22, 26, 0.2)',
175+
backgroundColorInputBase: '#fff',
176+
heightInputDefault: '30px',
177+
fontSizeInputDefault: 'inherit',
178+
boxShadowColorInputHFocus: '#393e48',
179+
boxShadowColorInputVFocus: 'rgba(57, 62, 72, 0.17)',
180+
boxShadowColorInputHHover: '#6e6e6e',
181+
boxShadowColorInputVHover: 'rgba(57, 62, 72, 0)',
182+
backgrounColorInputDisabled: '#dddddd',
183+
colorInputDisabled: '#a5a5a5',
184+
// AddonAfter
185+
topInputAddonAfter: '3px',
186+
164187
// ---------------------------button 按钮部分 ------------------------------------
165188
colorButtonBase: '#fff',
166189
// 最小高度

0 commit comments

Comments
 (0)