Skip to content

Commit 1594a93

Browse files
mhnpdmhnpd
committed
Add experimental components category and update BaseProps interface
1 parent d056c6d commit 1594a93

File tree

6 files changed

+277
-88
lines changed

6 files changed

+277
-88
lines changed

‎docs/docs/experimental/_category_.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"label": "Experimental Components",
3+
"position": 3,
4+
"collapsed": true,
5+
"link": {
6+
"type": "generated-index",
7+
"description": "Checkout the experimental components"
8+
}
9+
}

‎docs/docs/experimental/hairball.mdx

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
---
3+
4+
import PropsTable from '../../src/components/props-table'
5+
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
6+
import { getPropsTableData } from '../../src/components/helpers'
7+
import { Hairball, HairballPreset, HairballPresetColors } from '../../../src/experimental/hairball'
8+
9+
10+
# Hairball
11+
12+
<LiveProvider
13+
code={`
14+
// import { Hairball, HairballPreset } from 'react-loader-spinner';
15+
16+
render(<Hairball
17+
preset="sunset" // or preset={HairballPreset.sunset}
18+
/>)
19+
`}
20+
scope={{ Hairball }}
21+
noInline={true}
22+
>
23+
<LivePreview />
24+
<br />
25+
<LiveEditor />
26+
<LiveError />
27+
</LiveProvider>
28+
29+
---
30+
31+
## More Example:
32+
Here are some more examples of the Hairball component using different presets. It
33+
is recommended that you use the presets, as they are designed to work well with
34+
the Hairball component. However, you can also pass your own colors to the Hairball
35+
component. See the `colors` props section for more information.
36+
37+
<div style={{display: 'flex'}}>
38+
<Hairball />
39+
<Hairball preset={HairballPreset.midnight} />
40+
<Hairball preset={HairballPreset.midday} />
41+
<Hairball preset={HairballPreset.rainbow} />
42+
<Hairball preset={HairballPreset.forest}/>
43+
<Hairball preset={HairballPreset.dawn}/>
44+
<Hairball preset={HairballPreset.dusk} />
45+
<Hairball preset={HairballPreset.sunrise} />
46+
</div>
47+
48+
---
49+
50+
## Props
51+
52+
<PropsTable
53+
properties={[
54+
...getPropsTableData('Hairball', ['colors']),
55+
{
56+
name: 'preset',
57+
type: Object.keys(HairballPreset).map(preset => `'${preset}'`).join(' | '),
58+
default: 'undefined',
59+
description: 'The preset color schema to use. Please see Preset section for more information.',
60+
},
61+
{
62+
name: 'colors',
63+
type: '{fillColor1: string, fillColor2: string, fillColor3:string, fillColor4:string}',
64+
default: 'undefined',
65+
description: 'An objects of colors to use in given structure. If this prop is provided, the preset prop will be ignored.',
66+
},
67+
]}
68+
/>
69+
70+
## Presets
71+
72+
The following presets are available:
73+
74+
<table>
75+
<thead>
76+
<tr>
77+
<th>Preset</th>
78+
<th>Colors</th>
79+
<th>Name</th>
80+
</tr>
81+
</thead>
82+
<tbody>
83+
{Object.keys(HairballPresetColors).map((preset, index) => (
84+
<tr key={preset}>
85+
<td>{preset}</td>
86+
<td>
87+
<div style={{display:'flex'}}>
88+
<div style={{backgroundColor:HairballPresetColors[preset].fillColor1, width: "20px", height: "20px"}}></div>
89+
<div style={{backgroundColor:HairballPresetColors[preset].fillColor2, width: "20px", height: "20px"}}></div>
90+
<div style={{backgroundColor:HairballPresetColors[preset].fillColor3, width: "20px", height: "20px"}}></div>
91+
<div style={{backgroundColor:HairballPresetColors[preset].fillColor4, width: "20px", height: "20px"}}></div>
92+
</div>
93+
</td>
94+
<td>{`preset={HairballPreset.${preset}}`}</td>
95+
</tr>
96+
)
97+
)}
98+
</tbody>
99+
</table>
100+
101+
Each preset corresponds to a unique color schema. You can use these presets to easily change the color scheme of the Hairball component. Simply pass the name of the preset to the `preset` prop of the Hairball component, like this: `<Hairball preset={HairballPreset.sunset} />`.
102+
103+
---
104+
## Custom Colors
105+
106+
You can also pass your own colors to the Hairball component. To do this, pass an object to the `colors` prop of the Hairball component, like this:
107+
108+
<Hairball colors={
109+
{
110+
fillColor1: '#ff0000',
111+
fillColor2: '#00ff00',
112+
fillColor3: '#0000ff',
113+
fillColor4: '#ffff00',
114+
}
115+
} />
116+
117+
```jsx
118+
<Hairball colors={
119+
{
120+
fillColor1: '#ff0000',
121+
fillColor2: '#00ff00',
122+
fillColor3: '#0000ff',
123+
fillColor4: '#ffff00',
124+
}
125+
} />
126+
```
127+
128+
The `colors` prop takes an object with the following properties:
129+
- `fillColor1` - The color of the first fill.
130+
- `fillColor2` - The color of the second fill.
131+
- `fillColor3` - The color of the third fill.
132+
- `fillColor4` - The color of the fourth fill.

‎src/color-schemas/four-colors-schema.ts

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
export const FourColorsSchema = {
2+
sunsetSchema: {
3+
fillColor1: '#e15b64',
4+
fillColor2: '#f47e60',
5+
fillColor3: '#f8b26a',
6+
fillColor4: '#abbd81',
7+
},
8+
oceanSchema: {
9+
fillColor1: '#3498db',
10+
fillColor2: '#2ecc71',
11+
fillColor3: '#1abc9c',
12+
fillColor4: '#9b59b6',
13+
},
14+
forestSchema: {
15+
fillColor1: '#27ae60',
16+
fillColor2: '#16a085',
17+
fillColor3: '#f39c12',
18+
fillColor4: '#d35400',
19+
},
20+
twilightSchema: {
21+
fillColor1: '#8e44ad',
22+
fillColor2: '#c0392b',
23+
fillColor3: '#d35400',
24+
fillColor4: '#f39c12',
25+
},
26+
dawnSchema: {
27+
fillColor1: '#c0392b',
28+
fillColor2: '#d35400',
29+
fillColor3: '#f39c12',
30+
fillColor4: '#16a085',
31+
},
32+
duskSchema: {
33+
fillColor1: '#9b59b6',
34+
fillColor2: '#34495e',
35+
fillColor3: '#16a085',
36+
fillColor4: '#27ae60',
37+
},
38+
middaySchema: {
39+
fillColor1: '#2ecc71',
40+
fillColor2: '#3498db',
41+
fillColor3: '#9b59b6',
42+
fillColor4: '#34495e',
43+
},
44+
midnightSchema: {
45+
fillColor1: '#34495e',
46+
fillColor2: '#16a085',
47+
fillColor3: '#27ae60',
48+
fillColor4: '#8e44ad',
49+
},
50+
sunriseSchema: {
51+
fillColor1: '#f1c40f',
52+
fillColor2: '#e67e22',
53+
fillColor3: '#e74c3c',
54+
fillColor4: '#ecf0f1',
55+
},
56+
rainbowSchema: {
57+
fillColor1: '#16a085',
58+
fillColor2: '#27ae60',
59+
fillColor3: '#3498db',
60+
fillColor4: '#8e44ad',
61+
},
62+
};
63+
64+
export type FourColorsSchemaType = keyof typeof FourColorsSchema;

‎src/wip/hairball.tsx renamed to ‎src/experimental/hairball.tsx

+67-14
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,87 @@
11
import React, { FC } from 'react'
2+
import { FourColorsSchema } from '../color-schemas/four-colors-schema'
3+
import { PrimaryProps } from '../type'
24

3-
interface HairballProps {
4-
fillColor1?: string
5-
fillColor2?: string
6-
fillColor3?: string
7-
fillColor4?: string
5+
export interface HairballCustomColor {
6+
fillColor1: string
7+
fillColor2: string
8+
fillColor3: string
9+
fillColor4: string
10+
}
11+
12+
export const HairballPreset = {
13+
sunset: 'sunset',
14+
ocean: 'ocean',
15+
forest: 'forest',
16+
twilight: 'twilight',
17+
dawn: 'dawn',
18+
dusk: 'dusk',
19+
midday: 'midday',
20+
midnight: 'midnight',
21+
sunrise: 'sunrise',
22+
rainbow: 'rainbow',
23+
}
24+
25+
export const HairballPresetColors = {
26+
[HairballPreset.sunset]:FourColorsSchema.sunsetSchema,
27+
[HairballPreset.ocean]: FourColorsSchema.oceanSchema,
28+
[HairballPreset.forest]: FourColorsSchema.forestSchema,
29+
[HairballPreset.twilight]: FourColorsSchema.twilightSchema,
30+
[HairballPreset.dawn]: FourColorsSchema.dawnSchema,
31+
[HairballPreset.dusk]: FourColorsSchema.duskSchema,
32+
[HairballPreset.midday]: FourColorsSchema.middaySchema,
33+
[HairballPreset.midnight]: FourColorsSchema.midnightSchema,
34+
[HairballPreset.sunrise]: FourColorsSchema.sunriseSchema,
35+
[HairballPreset.rainbow]: FourColorsSchema.rainbowSchema,
36+
}
37+
38+
export type HairBallColorSchema = keyof typeof HairballPreset
39+
40+
export const HAIRBALL_DEFAULT_COLOR = HairballPresetColors.sunset
41+
42+
43+
export interface HairballProps extends PrimaryProps {
44+
colors?: HairballCustomColor,
45+
preset?: HairBallColorSchema,
846
backgroundColor?: string
947
speed?: number
10-
visible?: boolean
48+
width?: number
49+
height?: number
1150
}
1251

1352
export const Hairball: FC<HairballProps> = ({
14-
fillColor1 = '#e15b64',
15-
fillColor2 = '#f47e60',
16-
fillColor3 = '#f8b26a',
17-
fillColor4 = '#abbd81',
53+
colors = HAIRBALL_DEFAULT_COLOR,
1854
backgroundColor = '#fff',
19-
visible = true,
2055
speed = 2,
56+
width = 100,
57+
height = 100,
58+
visible = true,
59+
ariaLabel = 'Hairball loading',
60+
wrapperClass = '',
61+
wrapperStyle = {},
62+
preset,
2163
}) => {
64+
const colorSchema = preset ? HairballPresetColors[preset] : colors
65+
66+
const {
67+
fillColor1 = HAIRBALL_DEFAULT_COLOR.fillColor1,
68+
fillColor2 = HAIRBALL_DEFAULT_COLOR.fillColor2,
69+
fillColor3 = HAIRBALL_DEFAULT_COLOR.fillColor3,
70+
fillColor4 = HAIRBALL_DEFAULT_COLOR.fillColor4,
71+
} = colorSchema
72+
2273
if (!visible) {
2374
return null
2475
}
2576
return (
2677
<svg
2778
xmlns="http://www.w3.org/2000/svg"
2879
xmlnsXlink="http://www.w3.org/1999/xlink"
29-
style={{ margin: 'auto', background: backgroundColor, display: 'block' }}
30-
width="200px"
31-
height="200px"
80+
style={{ margin: 'auto', background: backgroundColor, display: 'block', ...wrapperStyle }}
81+
width={width}
82+
height={height}
83+
aria-label={ariaLabel}
84+
className={wrapperClass}
3285
viewBox="0 0 100 100"
3386
preserveAspectRatio="xMidYMid"
3487
role="progressbar"

‎src/type.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@ export type Style = {
99
[key: string]: string
1010
}
1111

12-
export interface BaseProps {
12+
export interface PrimaryProps {
1313
height?: string | number
1414
width?: string | number
15-
color?: string
1615
ariaLabel?: string
1716
wrapperStyle?: Style
1817
wrapperClass?: string
1918
visible?: boolean
2019
}
20+
21+
export interface BaseProps extends PrimaryProps {
22+
color?: string
23+
}

0 commit comments

Comments
 (0)