Skip to content

Commit 7fd09fb

Browse files
ZxBing0066ZxBing0066
authored
fix(ThemeProvider): fix missing theme props after generate material
close #82
1 parent eb1da3c commit 7fd09fb

File tree

4 files changed

+181
-194
lines changed

4 files changed

+181
-194
lines changed

‎.styleguide/components/ReactExample.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,16 @@ import generateMaterialTheme from 'src/components/ThemeProvider/material';
1212
const materialTheme = generateMaterialTheme({
1313
colorList: {
1414
primary: '#3555f6'
15+
},
16+
Height: {
17+
sm: '24px',
18+
md: '28px',
19+
lg: '32px'
20+
},
21+
Padding: {
22+
sm: '8px',
23+
md: '8px',
24+
lg: '16px'
1525
}
1626
});
1727

‎src/components/ThemeProvider/__demo__/themeprovider.jsx

Lines changed: 163 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -29,202 +29,189 @@ const columns = new Array(5).fill(null).map((v, i) => ({
2929
return <span>content {record.index}</span>;
3030
}
3131
}));
32+
const greenTheme = {
33+
colorList: {
34+
primary: '#168a7e',
35+
primary1: '#02976d',
36+
primary2: '#168a7e',
37+
primary3: '#fbfffe',
38+
primary4: '#fbfbfb',
39+
primary5: '#e9fff9',
40+
primary6: '#fcfcfd',
41+
primary7: '#e2e3e3'
42+
}
43+
};
3244
const materialTheme = generateMaterialTheme({
3345
colorList: {
3446
primary: '#3555f6'
47+
},
48+
Height: {
49+
sm: '24px',
50+
md: '28px',
51+
lg: '32px'
52+
},
53+
Padding: {
54+
sm: '8px',
55+
md: '8px',
56+
lg: '16px'
57+
}
58+
});
59+
const greenMaterialTheme = generateMaterialTheme({
60+
colorList: {
61+
primary: '#168a7e',
62+
primary1: '#02976d',
63+
primary2: '#168a7e',
64+
primary3: '#fbfffe',
65+
primary4: '#fbfbfb',
66+
primary5: '#e9fff9',
67+
primary6: '#fcfcfd',
68+
primary7: '#e2e3e3'
69+
},
70+
Height: {
71+
sm: '24px',
72+
md: '28px',
73+
lg: '32px'
74+
},
75+
Padding: {
76+
sm: '8px',
77+
md: '8px',
78+
lg: '16px'
79+
},
80+
materialVars: {
81+
primaryBoxShadow:
82+
'0 1px 5px 0 rgba(21,56,195,.12), 0 2px 2px 0 rgba(8, 155, 140, 0.24), 0 3px 1px -3px rgba(58, 96, 245,.34)',
83+
primaryBoxShadowActive:
84+
'0 1px 10px 0 rgba(21,56,195,.12), 0 2px 4px -1px rgba(20, 194, 177, 0.2), 0 4px 5px 0 rgba(20, 194, 177, 0.14)',
85+
primaryLinearGradient: 'linear-gradient(#168a7e,#168a7e)',
86+
primaryLinearGradientActive: 'linear-gradient(#29a798,#29a798)'
3587
}
3688
});
89+
const oceanMaterialTheme = generateMaterialTheme({
90+
colorList: {
91+
primary: '#415bf5',
92+
primary1: '#415bf5',
93+
primary2: '#415bf5',
94+
primary3: '#f0f2ff',
95+
primary4: '#fafaff',
96+
primary5: '#c3caf7',
97+
primary6: '#fcfcfd',
98+
primary7: '#cae3ff'
99+
},
100+
Height: {
101+
sm: '24px',
102+
md: '28px',
103+
lg: '32px'
104+
},
105+
Padding: {
106+
sm: '8px',
107+
md: '8px',
108+
lg: '16px'
109+
},
110+
materialVars: {
111+
primaryBoxShadow:
112+
'0 1px 5px 0 rgba(21,56,195,.12), 0 2px 2px 0 rgba(8, 39, 156,.24), 0 3px 1px -3px rgba(58, 96, 245,.34)',
113+
primaryBoxShadowActive:
114+
'0 1px 10px 0 rgba(21,56,195,.12), 0 2px 4px -1px rgba(21,56,195,.2), 0 4px 5px 0 rgba(21,56,195,.14)',
115+
primaryLinearGradient: 'linear-gradient(#415bf5,#415bf5)',
116+
primaryLinearGradientActive: 'linear-gradient(#3d5aff,#3d5aff)'
117+
}
118+
});
119+
37120
const Demo = () => (
38121
<div>
39-
<ThemeProvider
40-
theme={{
41-
colorList: {
42-
primary: '#168a7e',
43-
primary1: '#02976d',
44-
primary2: '#168a7e',
45-
primary3: '#fbfffe',
46-
primary4: '#fbfbfb',
47-
primary5: '#e9fff9',
48-
primary6: '#fcfcfd',
49-
primary7: '#e2e3e3'
50-
}
51-
}}
52-
>
53-
<div>
54-
<div className="demo-wrap">
55-
<Pagination total={100} showSizeChanger showQuickJumper={{ goButton: true }} />
56-
</div>
57-
<div className="demo-wrap">
58-
<Calendar value={moment()} />
59-
</div>
60-
<div className="demo-wrap">
61-
<DatePicker value={moment()} />
62-
</div>
63-
<div className="demo-wrap">
64-
<DatePicker.Month value={moment()} />
65-
</div>
66-
<div className="demo-wrap">
67-
<DatePicker.Range value={[moment(), moment()]} />
68-
</div>
69-
<div className="demo-wrap">
70-
<div className="demo-block">
71-
<Select>
72-
<Select.Option value={1}>1</Select.Option>
73-
<Select.Option value={2}>2</Select.Option>
74-
<Select.Option value={3}>3</Select.Option>
75-
</Select>
122+
{[greenTheme, materialTheme, greenMaterialTheme, oceanMaterialTheme].map((theme, i) => (
123+
<ThemeProvider key={i} theme={theme}>
124+
<div>
125+
<div className="demo-wrap">
126+
<Pagination total={100} showSizeChanger showQuickJumper={{ goButton: true }} />
76127
</div>
77-
<div className="demo-block">
78-
<Select value={[1, 2]} multiple>
79-
<Select.Option value={1}>1</Select.Option>
80-
<Select.Option value={2}>2</Select.Option>
81-
<Select.Option value={3}>3</Select.Option>
82-
</Select>
128+
<div className="demo-wrap">
129+
<Calendar value={moment()} />
83130
</div>
84-
</div>
85-
<div className="demo-wrap">
86-
<div className="demo-block">
87-
<Button className="demo-alert-btn" onClick={() => Modal.alert({ title: 'alert' }, 'content')}>
88-
alert
89-
</Button>
131+
<div className="demo-wrap">
132+
<DatePicker value={moment()} />
90133
</div>
91-
<div className="demo-block">
92-
<Button
93-
className="demo-confirm-btn"
94-
onClick={() => Modal.confirm({ title: 'confirm' }, 'content')}
95-
>
96-
confirm
97-
</Button>
98-
</div>
99-
</div>
100-
<div className="demo-wrap">
101-
<Menu multiple showSelectAll collapse={{ defaultOpenKeys: ['1', '2'] }}>
102-
<Menu.Item itemKey="1">item 1</Menu.Item>
103-
<Menu.SubMenu subMenuKey="1" title="submenu 1">
104-
<Menu.Item itemKey="1-1">item 1-1</Menu.Item>
105-
<Menu.Item itemKey="1-2">item 1-2</Menu.Item>
106-
</Menu.SubMenu>
107-
<Menu.SubMenu subMenuKey="2" title="submenu 2">
108-
<Menu.Item itemKey="2-1">item 2-1</Menu.Item>
109-
<Menu.Item itemKey="2-2">item 2-2</Menu.Item>
110-
</Menu.SubMenu>
111-
</Menu>
112-
</div>
113-
<div className="demo-wrap">
114-
<Upload />
115-
</div>
116-
<div className="demo-wrap">
117-
<Table
118-
className="test-table"
119-
columns={columns}
120-
title={() => (
121-
<div className="clear-fixed">
122-
<div style={{ float: 'right' }}>
123-
<Table.SearchInput className="test-search-input" style={{ marginRight: 5 }} />
124-
<Table.ColumnConfigButton className="test-column-config-btn" />
125-
</div>
126-
</div>
127-
)}
128-
/>
129-
</div>
130-
<div className="demo-wrap">
131-
<div style={{ marginBottom: 10 }}>
132-
<Slider className="test-slider" />
134+
<div className="demo-wrap">
135+
<DatePicker.Month value={moment()} />
133136
</div>
134-
<div>
135-
<Slider className="test-slider-sensitive" isSensitive />
137+
<div className="demo-wrap">
138+
<DatePicker.Range value={[moment(), moment()]} />
136139
</div>
137-
</div>
138-
</div>
139-
</ThemeProvider>
140-
<ThemeProvider theme={materialTheme}>
141-
<div>
142-
<div className="demo-wrap">
143-
<Pagination total={100} showSizeChanger showQuickJumper={{ goButton: true }} />
144-
</div>
145-
<div className="demo-wrap">
146-
<Calendar value={moment()} />
147-
</div>
148-
<div className="demo-wrap">
149-
<DatePicker value={moment()} />
150-
</div>
151-
<div className="demo-wrap">
152-
<DatePicker.Month value={moment()} />
153-
</div>
154-
<div className="demo-wrap">
155-
<DatePicker.Range value={[moment(), moment()]} />
156-
</div>
157-
<div className="demo-wrap">
158-
<div className="demo-block">
159-
<Select>
160-
<Select.Option value={1}>1</Select.Option>
161-
<Select.Option value={2}>2</Select.Option>
162-
<Select.Option value={3}>3</Select.Option>
163-
</Select>
140+
<div className="demo-wrap">
141+
<div className="demo-block">
142+
<Select>
143+
<Select.Option value={1}>1</Select.Option>
144+
<Select.Option value={2}>2</Select.Option>
145+
<Select.Option value={3}>3</Select.Option>
146+
</Select>
147+
</div>
148+
<div className="demo-block">
149+
<Select value={[1, 2]} multiple>
150+
<Select.Option value={1}>1</Select.Option>
151+
<Select.Option value={2}>2</Select.Option>
152+
<Select.Option value={3}>3</Select.Option>
153+
</Select>
154+
</div>
164155
</div>
165-
<div className="demo-block">
166-
<Select value={[1, 2]} multiple>
167-
<Select.Option value={1}>1</Select.Option>
168-
<Select.Option value={2}>2</Select.Option>
169-
<Select.Option value={3}>3</Select.Option>
170-
</Select>
156+
<div className="demo-wrap">
157+
<div className="demo-block">
158+
<Button
159+
className="demo-alert-btn"
160+
onClick={() => Modal.alert({ title: 'alert' }, 'content')}
161+
>
162+
alert
163+
</Button>
164+
</div>
165+
<div className="demo-block">
166+
<Button
167+
className="demo-confirm-btn"
168+
onClick={() => Modal.confirm({ title: 'confirm' }, 'content')}
169+
>
170+
confirm
171+
</Button>
172+
</div>
171173
</div>
172-
</div>
173-
<div className="demo-wrap">
174-
<div className="demo-block">
175-
<Button className="demo-alert-btn" onClick={() => Modal.alert({ title: 'alert' }, 'content')}>
176-
alert
177-
</Button>
174+
<div className="demo-wrap">
175+
<Menu multiple showSelectAll collapse={{ defaultOpenKeys: ['1', '2'] }}>
176+
<Menu.Item itemKey="1">item 1</Menu.Item>
177+
<Menu.SubMenu subMenuKey="1" title="submenu 1">
178+
<Menu.Item itemKey="1-1">item 1-1</Menu.Item>
179+
<Menu.Item itemKey="1-2">item 1-2</Menu.Item>
180+
</Menu.SubMenu>
181+
<Menu.SubMenu subMenuKey="2" title="submenu 2">
182+
<Menu.Item itemKey="2-1">item 2-1</Menu.Item>
183+
<Menu.Item itemKey="2-2">item 2-2</Menu.Item>
184+
</Menu.SubMenu>
185+
</Menu>
178186
</div>
179-
<div className="demo-block">
180-
<Button
181-
className="demo-confirm-btn"
182-
onClick={() => Modal.confirm({ title: 'confirm' }, 'content')}
183-
>
184-
confirm
185-
</Button>
187+
<div className="demo-wrap">
188+
<Upload />
186189
</div>
187-
</div>
188-
<div className="demo-wrap">
189-
<Menu multiple showSelectAll collapse={{ defaultOpenKeys: ['1', '2'] }}>
190-
<Menu.Item itemKey="1">item 1</Menu.Item>
191-
<Menu.SubMenu subMenuKey="1" title="submenu 1">
192-
<Menu.Item itemKey="1-1">item 1-1</Menu.Item>
193-
<Menu.Item itemKey="1-2">item 1-2</Menu.Item>
194-
</Menu.SubMenu>
195-
<Menu.SubMenu subMenuKey="2" title="submenu 2">
196-
<Menu.Item itemKey="2-1">item 2-1</Menu.Item>
197-
<Menu.Item itemKey="2-2">item 2-2</Menu.Item>
198-
</Menu.SubMenu>
199-
</Menu>
200-
</div>
201-
<div className="demo-wrap">
202-
<Upload />
203-
</div>
204-
<div className="demo-wrap">
205-
<Table
206-
className="test-table"
207-
columns={columns}
208-
title={() => (
209-
<div className="clear-fixed">
210-
<div style={{ float: 'right' }}>
211-
<Table.SearchInput className="test-search-input" style={{ marginRight: 5 }} />
212-
<Table.ColumnConfigButton className="test-column-config-btn" />
190+
<div className="demo-wrap">
191+
<Table
192+
className="test-table"
193+
columns={columns}
194+
title={() => (
195+
<div className="clear-fixed">
196+
<div style={{ float: 'right' }}>
197+
<Table.SearchInput className="test-search-input" style={{ marginRight: 5 }} />
198+
<Table.ColumnConfigButton className="test-column-config-btn" />
199+
</div>
213200
</div>
214-
</div>
215-
)}
216-
/>
217-
</div>
218-
<div className="demo-wrap">
219-
<div style={{ marginBottom: 10 }}>
220-
<Slider className="test-slider" />
201+
)}
202+
/>
221203
</div>
222-
<div>
223-
<Slider className="test-slider-sensitive" isSensitive />
204+
<div className="demo-wrap">
205+
<div style={{ marginBottom: 10 }}>
206+
<Slider className="test-slider" />
207+
</div>
208+
<div>
209+
<Slider className="test-slider-sensitive" isSensitive />
210+
</div>
224211
</div>
225212
</div>
226-
</div>
227-
</ThemeProvider>
213+
</ThemeProvider>
214+
))}
228215
</div>
229216
);
230217
// demo end

0 commit comments

Comments
 (0)