Skip to content

Commit 243bbed

Browse files
PierreCrbPierreCrb
authored
add gradient panel & fix zIndex (#117)
* add gradient panel & fix zIndex * fix * fix & add external component * add ColorPicker component * fix * fix * fix gradient * fix btn ui & ts type
1 parent 5b76624 commit 243bbed

File tree

8 files changed

+443
-151
lines changed

8 files changed

+443
-151
lines changed

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
"dependencies": {
66
"@bugsnag/js": "^6.5.2",
77
"@bugsnag/plugin-react": "^6.5.0",
8-
"@chakra-ui/icons": "^1.0.1",
9-
"@chakra-ui/react": "^1.0.1",
10-
"@chakra-ui/theme": "^1.0.1",
8+
"@chakra-ui/icons": "^1.0.4",
9+
"@chakra-ui/react": "^1.2.1",
10+
"@chakra-ui/theme": "^1.5.0",
1111
"@emotion/react": "^11.1.1",
1212
"@emotion/styled": "^11.0.0",
1313
"@mdx-js/react": "^1.5.5",
@@ -18,7 +18,7 @@
1818
"codesandbox": "^2.1.11",
1919
"coloreact": "^0.3.1",
2020
"copy-to-clipboard": "^3.2.1",
21-
"framer-motion": "^2.9.4",
21+
"framer-motion": "^3.3.0",
2222
"lodash": "^4.17.15",
2323
"lodash-es": "^4.17.15",
2424
"lz-string": "^1.4.4",

‎src/components/CodePanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const CodePanel = () => {
2323

2424
return (
2525
<Box
26-
zIndex={40}
26+
zIndex={5}
2727
p={4}
2828
fontSize="sm"
2929
backgroundColor="#011627"

‎src/components/editor/ComponentPreview.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ const componentsToTest = [
5757
// 'Tab',
5858
'Input',
5959
'Radio',
60-
'ListItem',
61-
'ListIcon',
60+
//'ListItem',
61+
//'ListIcon',
6262
// 'AlertIcon',
6363
// 'AccordionIcon',
6464
'Box',

‎src/components/inspector/controls/ColorPickerControl.tsx

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import React from 'react'
2+
import {
3+
Popover,
4+
PopoverTrigger,
5+
PopoverContent,
6+
PopoverArrow,
7+
PopoverBody,
8+
IconButton,
9+
Box,
10+
Tabs,
11+
TabList,
12+
Tab,
13+
TabPanels,
14+
TabPanel,
15+
Input,
16+
Portal,
17+
useTheme,
18+
} from '@chakra-ui/react'
19+
import ColorPicker from 'coloreact'
20+
import HuesPickerControl from './HuesPickerControl'
21+
import { useForm } from '~hooks/useForm'
22+
import omit from 'lodash/omit'
23+
import usePropsSelector from '~hooks/usePropsSelector'
24+
25+
type ColorPickerPropType = {
26+
withFullColor?: boolean
27+
name: string
28+
gradient: boolean
29+
gradientColor?: string
30+
index?: number
31+
updateGradient?: (value: string, index: number) => Promise<void>
32+
}
33+
34+
const ColorPickerControl = (props: ColorPickerPropType) => {
35+
const theme = useTheme()
36+
const themeColors: any = omit(theme.colors, [
37+
'transparent',
38+
'current',
39+
'black',
40+
'white',
41+
])
42+
43+
const { setValue, setValueFromEvent } = useForm()
44+
const value = usePropsSelector(props.name)
45+
46+
let propsIconButton: any = { bg: value }
47+
if (value && themeColors[value]) {
48+
propsIconButton = { colorScheme: value }
49+
}
50+
51+
return (
52+
<>
53+
<Popover placement="bottom">
54+
<PopoverTrigger>
55+
{props.gradient ? (
56+
<IconButton
57+
mr={2}
58+
boxShadow="md"
59+
border={props.gradientColor ? 'none' : '2px solid grey'}
60+
isRound
61+
aria-label="Color"
62+
size="xs"
63+
colorScheme={props.gradientColor}
64+
bg={props.gradientColor}
65+
/>
66+
) : (
67+
<IconButton
68+
mr={2}
69+
boxShadow="md"
70+
border={value ? 'none' : '2px solid grey'}
71+
isRound
72+
aria-label="Color"
73+
size="xs"
74+
{...propsIconButton}
75+
/>
76+
)}
77+
</PopoverTrigger>
78+
<Portal>
79+
<PopoverContent width="200px">
80+
<PopoverArrow />
81+
<PopoverBody>
82+
{props.withFullColor ? (
83+
<Tabs size="sm" variant="soft-rounded" colorScheme="green">
84+
<TabList>
85+
<Tab>Theme</Tab>
86+
<Tab>All</Tab>
87+
</TabList>
88+
<TabPanels mt={4}>
89+
<TabPanel p={0}>
90+
{props.gradient ? (
91+
<HuesPickerControl
92+
name={props.name}
93+
themeColors={themeColors}
94+
enableHues
95+
setValue={setValue}
96+
gradient={true}
97+
index={props.index}
98+
updateGradient={props.updateGradient}
99+
/>
100+
) : (
101+
<HuesPickerControl
102+
name={props.name}
103+
themeColors={themeColors}
104+
enableHues
105+
setValue={setValue}
106+
gradient={props.gradient}
107+
/>
108+
)}
109+
</TabPanel>
110+
111+
<TabPanel p={0}>
112+
<Box position="relative" height="150px">
113+
<ColorPicker
114+
color={value}
115+
onChange={(color: any) => {
116+
props.gradient
117+
? props.updateGradient!(
118+
`#${color.hex}`,
119+
props.index!,
120+
)
121+
: setValue(props.name, `#${color.hex}`)
122+
}}
123+
/>
124+
);
125+
</Box>
126+
</TabPanel>
127+
</TabPanels>
128+
</Tabs>
129+
) : props.gradient ? (
130+
<HuesPickerControl
131+
name={props.name}
132+
themeColors={themeColors}
133+
enableHues
134+
setValue={setValue}
135+
gradient={true}
136+
index={props.index}
137+
updateGradient={props.updateGradient}
138+
/>
139+
) : (
140+
<HuesPickerControl
141+
name={props.name}
142+
themeColors={themeColors}
143+
enableHues={false}
144+
setValue={setValue}
145+
gradient={props.gradient}
146+
/>
147+
)}
148+
</PopoverBody>
149+
</PopoverContent>
150+
</Portal>
151+
</Popover>
152+
{props.gradient ? (
153+
<Input
154+
width="100px"
155+
size="sm"
156+
name={props.name}
157+
onChange={setValueFromEvent}
158+
value={props.gradientColor}
159+
/>
160+
) : (
161+
<Input
162+
width="100px"
163+
size="sm"
164+
name={props.name}
165+
onChange={setValueFromEvent}
166+
value={value}
167+
/>
168+
)}
169+
</>
170+
)
171+
}
172+
173+
export default ColorPickerControl

‎src/components/inspector/controls/ColorsControl.tsx

Lines changed: 5 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,6 @@
1-
import React, { ReactNode, useState, memo } from 'react'
2-
import {
3-
Popover,
4-
PopoverTrigger,
5-
PopoverContent,
6-
PopoverArrow,
7-
Grid,
8-
PopoverBody,
9-
IconButton,
10-
SliderTrack,
11-
SliderFilledTrack,
12-
SliderThumb,
13-
Box,
14-
Tabs,
15-
TabList,
16-
Tab,
17-
TabPanels,
18-
TabPanel,
19-
Input,
20-
useTheme,
21-
Slider,
22-
Portal,
23-
} from '@chakra-ui/react'
1+
import React, { ReactNode, memo } from 'react'
242
import FormControl from './FormControl'
25-
import { useForm } from '~hooks/useForm'
26-
import omit from 'lodash/omit'
27-
import ColorPicker from 'coloreact'
28-
import usePropsSelector from '~hooks/usePropsSelector'
3+
import ColorPickerControl from './ColorPickerControl'
294

305
type ColorControlPropsType = {
316
name: string
@@ -35,126 +10,12 @@ type ColorControlPropsType = {
3510
}
3611

3712
const ColorsControl = (props: ColorControlPropsType) => {
38-
const { setValue, setValueFromEvent } = useForm()
39-
const [hue, setHue] = useState(500)
40-
const value = usePropsSelector(props.name)
41-
const theme = useTheme()
42-
43-
const themeColors: any = omit(theme.colors, [
44-
'transparent',
45-
'current',
46-
'black',
47-
'white',
48-
])
49-
50-
let propsIconButton: any = { bg: value }
51-
if (value && themeColors[value]) {
52-
propsIconButton = { colorScheme: value }
53-
}
54-
55-
const huesPicker = (
56-
<>
57-
<Grid mb={2} templateColumns="repeat(5, 1fr)" gap={0}>
58-
{Object.keys(themeColors).map(colorName => (
59-
<Box
60-
border={colorName.includes('white') ? '1px solid lightgrey' : ''}
61-
key={colorName}
62-
_hover={{ boxShadow: 'lg' }}
63-
cursor="pointer"
64-
bg={`${colorName}.${props.enableHues ? hue : 500}`}
65-
onClick={() =>
66-
setValue(
67-
props.name,
68-
props.enableHues ? `${colorName}.${hue}` : colorName,
69-
)
70-
}
71-
mt={2}
72-
borderRadius="full"
73-
height="30px"
74-
width="30px"
75-
/>
76-
))}
77-
</Grid>
78-
79-
{props.enableHues && (
80-
<>
81-
<Slider
82-
onChange={value => {
83-
value = value === 0 ? 50 : value
84-
setHue(value)
85-
}}
86-
min={0}
87-
max={900}
88-
step={100}
89-
value={hue}
90-
>
91-
<SliderTrack>
92-
<SliderFilledTrack />
93-
</SliderTrack>
94-
<SliderThumb boxSize={8}>
95-
<Box borderRadius="full" fontSize="xs">
96-
{hue}
97-
</Box>
98-
</SliderThumb>
99-
</Slider>
100-
</>
101-
)}
102-
</>
103-
)
104-
10513
return (
10614
<FormControl label={props.label}>
107-
<Popover placement="bottom">
108-
<PopoverTrigger>
109-
<IconButton
110-
mr={2}
111-
boxShadow="md"
112-
border={value ? 'none' : '2px solid grey'}
113-
isRound
114-
aria-label="Color"
115-
size="xs"
116-
{...propsIconButton}
117-
/>
118-
</PopoverTrigger>
119-
<Portal>
120-
<PopoverContent width="200px">
121-
<PopoverArrow />
122-
<PopoverBody>
123-
{props.withFullColor ? (
124-
<Tabs size="sm" variant="soft-rounded" colorScheme="green">
125-
<TabList>
126-
<Tab>Theme</Tab>
127-
<Tab>All</Tab>
128-
</TabList>
129-
<TabPanels mt={4}>
130-
<TabPanel p={0}>{huesPicker}</TabPanel>
131-
132-
<TabPanel p={0}>
133-
<Box position="relative" height="150px">
134-
<ColorPicker
135-
color={value}
136-
onChange={(color: any) => {
137-
setValue(props.name, `#${color.hex}`)
138-
}}
139-
/>
140-
);
141-
</Box>
142-
</TabPanel>
143-
</TabPanels>
144-
</Tabs>
145-
) : (
146-
huesPicker
147-
)}
148-
</PopoverBody>
149-
</PopoverContent>
150-
</Portal>
151-
</Popover>
152-
<Input
153-
width="100px"
154-
size="sm"
15+
<ColorPickerControl
16+
withFullColor={props.withFullColor}
15517
name={props.name}
156-
onChange={setValueFromEvent}
157-
value={value}
18+
gradient={false}
15819
/>
15920
</FormControl>
16021
)

0 commit comments

Comments
 (0)