Skip to content

Commit f31edb6

Browse files
Yanko-GeorgievYanko-Georgiev
committed
chore: fix build and add virtualization
1 parent d308c50 commit f31edb6

532 files changed

Lines changed: 53317 additions & 236 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ node_modules/
22
dist/
33
.vite/
44
*.local
5+
package-lock.json

‎docs/content/buttons/examples/button/appearance/func/style-configurator.tsx‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
import * as React from 'react';
2+
3+
import { Label } from '@progress/kendo-react-labels';
4+
import { DropDownList, DropDownListChangeEvent, ListItemProps } from '@progress/kendo-react-dropdowns';
5+
6+
interface StyleConfiguratorProps {
7+
size?: 'small' | 'medium' | 'large';
8+
sizes?: Array<'small' | 'medium' | 'large'>;
9+
onSizeChange?: (size: 'small' | 'medium' | 'large') => void;
10+
11+
themeColor?:
12+
| 'base'
13+
| 'primary'
14+
| 'secondary'
15+
| 'tertiary'
16+
| 'info'
17+
| 'success'
18+
| 'warning'
19+
| 'dark'
20+
| 'light'
21+
| 'inverse';
22+
themeColors?: Array<
23+
'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse'
24+
>;
25+
onThemeColorChange?: (
26+
themeColor:
27+
| 'base'
28+
| 'primary'
29+
| 'secondary'
30+
| 'tertiary'
31+
| 'info'
32+
| 'success'
33+
| 'warning'
34+
| 'dark'
35+
| 'light'
36+
| 'inverse'
37+
) => void;
38+
39+
fillMode?: 'solid' | 'outline' | 'flat' | 'link' | 'clear';
40+
fillModes?: Array<'solid' | 'outline' | 'flat' | 'link' | 'clear'>;
41+
onFillModeChange?: (fillMode: 'solid' | 'outline' | 'flat' | 'link') => void;
42+
43+
rounded?: 'small' | 'medium' | 'large' | 'full';
44+
roundedOptions?: Array<'small' | 'medium' | 'large' | 'full'>;
45+
onRoundedChange?: (rounded: 'small' | 'medium' | 'large' | 'full') => void;
46+
}
47+
48+
export const StyleConfigurator = (props: StyleConfiguratorProps) => {
49+
const {
50+
sizes,
51+
onSizeChange,
52+
53+
themeColors,
54+
onThemeColorChange,
55+
56+
fillModes,
57+
onFillModeChange,
58+
59+
roundedOptions,
60+
onRoundedChange
61+
} = { ...StyleConfigurator.defaultProps, ...props };
62+
63+
const handleSizeChange = (event: DropDownListChangeEvent) => {
64+
onSizeChange(event.value);
65+
};
66+
67+
const handleThemeColorChange = (event: DropDownListChangeEvent) => {
68+
onThemeColorChange(event.value);
69+
};
70+
71+
const handleFillModeChange = (event: DropDownListChangeEvent) => {
72+
onFillModeChange(event.value);
73+
};
74+
75+
const handleRoundedChange = (event: DropDownListChangeEvent) => {
76+
onRoundedChange(event.value);
77+
};
78+
79+
return (
80+
<div style={{ margin: '-30px -30px 30px -30px' }}>
81+
<div style={{ display: 'flex', justifyContent: 'center' }}>
82+
<span className="k-color-primary" style={{ textTransform: 'uppercase', padding: '4px 0' }}>
83+
Configurator
84+
</span>
85+
</div>
86+
<div
87+
className="example-config"
88+
style={{
89+
display: 'flex',
90+
justifyContent: 'space-between',
91+
flexWrap: 'wrap'
92+
}}
93+
>
94+
{props.size !== undefined && (
95+
<span className="k-form-field" style={{ flex: '1 1 0px' }}>
96+
<Label>
97+
Size
98+
<div className="k-form-field-wrap">
99+
<DropDownList
100+
data={sizes}
101+
value={props.size}
102+
onChange={handleSizeChange}
103+
style={{ minWidth: 120 }}
104+
/>
105+
</div>
106+
</Label>
107+
</span>
108+
)}
109+
{props.themeColor !== undefined && (
110+
<span className="k-form-field" style={{ flex: '1 1 0px' }}>
111+
<Label>
112+
Theme Color
113+
<div className="k-form-field-wrap">
114+
<DropDownList
115+
data={themeColors}
116+
value={props.themeColor}
117+
onChange={handleThemeColorChange}
118+
itemRender={ColorItemRender}
119+
style={{ minWidth: 120 }}
120+
/>
121+
</div>
122+
</Label>
123+
</span>
124+
)}
125+
{props.fillMode !== undefined && (
126+
<span className="k-form-field" style={{ flex: '1 1 0px' }}>
127+
<Label>
128+
Fill Mode
129+
<div className="k-form-field-wrap">
130+
<DropDownList
131+
data={fillModes}
132+
value={props.fillMode}
133+
onChange={handleFillModeChange}
134+
style={{ minWidth: 120 }}
135+
/>
136+
</div>
137+
</Label>
138+
</span>
139+
)}
140+
{props.rounded !== undefined && (
141+
<span className="k-form-field" style={{ flex: '1 1 0px' }}>
142+
<Label>
143+
Border Radius
144+
<div className="k-form-field-wrap">
145+
<DropDownList
146+
data={roundedOptions}
147+
value={props.rounded}
148+
onChange={handleRoundedChange}
149+
style={{ minWidth: 120 }}
150+
/>
151+
</div>
152+
</Label>
153+
</span>
154+
)}
155+
</div>
156+
</div>
157+
);
158+
};
159+
160+
const ColorItemRender = (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => {
161+
const itemChildren = (
162+
<React.Fragment>
163+
{li.props.children as any}{' '}
164+
<span
165+
style={{
166+
width: 16,
167+
height: 16,
168+
background: 'currentColor',
169+
display: 'inline-block'
170+
}}
171+
className={`k-color-${itemProps.dataItem}`}
172+
/>
173+
</React.Fragment>
174+
);
175+
return React.cloneElement(
176+
li,
177+
{
178+
...li.props,
179+
style: {
180+
...li.props.style,
181+
display: 'flex',
182+
alignItems: 'center',
183+
justifyContent: 'space-between'
184+
}
185+
},
186+
itemChildren
187+
);
188+
};
189+
190+
StyleConfigurator.defaultProps = {
191+
sizes: ['small', 'medium', 'large'],
192+
onSizeChange: () => {
193+
/* noop */
194+
},
195+
196+
themeColors: [
197+
'base',
198+
'primary',
199+
'secondary',
200+
'tertiary',
201+
'info',
202+
'success',
203+
'warning',
204+
'error',
205+
'dark',
206+
'light',
207+
'inverse'
208+
],
209+
onThemeColorChange: () => {
210+
/* noop */
211+
},
212+
213+
fillModes: ['solid', 'outline', 'flat', 'link', 'clear'],
214+
onFillModeChange: () => {
215+
/* noop */
216+
},
217+
218+
roundedOptions: ['small', 'medium', 'large', 'full'],
219+
onRoundedChange: () => {
220+
/* noop */
221+
}
222+
};

0 commit comments

Comments
 (0)