Skip to content

Commit d13e983

Browse files
author
Jonas Gossens
committed
✨ Add children prop to colorPicker
1 parent 74e3958 commit d13e983

File tree

3 files changed

+91
-21
lines changed

3 files changed

+91
-21
lines changed

‎examples/react-chayns-color_picker/Example.jsx

+61-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import React, { PureComponent } from 'react';
33
import { ColorPicker } from '../../src/index';
44
import Bubble from '../../src/react-chayns-bubble/component/Bubble';
55
import { hsvToHexString, hsvToRgb } from '../../src/utils/color/hsv';
6+
import Input from '../../src/react-chayns-input/component/Input';
67

78
export default class ColorPickerExample extends PureComponent {
9+
constructor(props) {
10+
super(props);
11+
this.state = {
12+
childrenColor: chayns.env.site.color,
13+
};
14+
}
15+
816
render() {
17+
const { childrenColor } = this.state;
918
return (
10-
<div style={{ marginBottom: '300px' }}>
19+
<div style={{
20+
marginBottom: '300px',
21+
}}
22+
>
1123
<h2>ColorPicker with transparency</h2>
1224
<ColorPicker
1325
color={chayns.env.site.color}
@@ -17,7 +29,10 @@ export default class ColorPickerExample extends PureComponent {
1729
console.log(hsvToHexString(color));
1830
}}
1931
transparency
20-
style={{ marginBottom: '30px', marginTop: '20px' }}
32+
style={{
33+
marginBottom: '30px',
34+
marginTop: '20px',
35+
}}
2136
/>
2237
<h2>ColorPicker with transparency and input</h2>
2338
<ColorPicker
@@ -29,7 +44,10 @@ export default class ColorPickerExample extends PureComponent {
2944
}}
3045
transparency
3146
input
32-
style={{ marginBottom: '30px', marginTop: '20px' }}
47+
style={{
48+
marginBottom: '30px',
49+
marginTop: '20px',
50+
}}
3351
/>
3452
<h2>ColorPicker without transparency</h2>
3553
<ColorPicker
@@ -38,7 +56,10 @@ export default class ColorPickerExample extends PureComponent {
3856
onChangeEnd={(color) => {
3957
console.log(hsvToRgb(color));
4058
}}
41-
style={{ marginBottom: '30px', marginTop: '20px' }}
59+
style={{
60+
marginBottom: '30px',
61+
marginTop: '20px',
62+
}}
4263
/>
4364
<h2>ColorPicker with input and without transparency</h2>
4465
<ColorPicker
@@ -48,8 +69,43 @@ export default class ColorPickerExample extends PureComponent {
4869
console.log(hsvToRgb(color));
4970
}}
5071
input
51-
style={{ marginBottom: '30px', marginTop: '20px' }}
72+
style={{
73+
marginBottom: '30px',
74+
marginTop: '20px',
75+
}}
5276
/>
77+
<h2>ColorPicker with children</h2>
78+
<div
79+
style={{
80+
marginBottom: '30px',
81+
marginTop: '20px',
82+
display: 'flex',
83+
}}
84+
>
85+
<ColorPicker
86+
color={chayns.env.site.color}
87+
bubblePosition={Bubble.position.BOTTOM_RIGHT}
88+
onChange={(color) => {
89+
const selectedColor = hsvToHexString(color);
90+
console.log(selectedColor);
91+
this.setState({ childrenColor: selectedColor });
92+
}}
93+
input
94+
>
95+
<div
96+
style={{
97+
backgroundColor: childrenColor,
98+
height: '20px',
99+
width: '20px',
100+
}}
101+
/>
102+
</ColorPicker>
103+
<Input
104+
style={{
105+
marginLeft: '5px',
106+
}}
107+
/>
108+
</div>
53109
</div>
54110
);
55111
}

‎src/react-chayns-color_picker/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,6 @@ You can set the following props on a ColorPicker element:
3232
| transparency | Adds the transparency slider | bool |
3333
| input | Adds an input to type colors | bool |
3434
| defaultColorModel | Default used color model | number (from ColorPicker.colorModels) |
35+
| children | Children rendered into the tapp | node |
3536

3637
**Note:** The color from the callback is in the hsva color model. You can convert it to the hex(a)- or rgb(a)-model using the [helper functions](https://github.com/TobitSoftware/chayns-components/blob/master/src/react-chayns-color_picker/utils/colorHelper.js).

‎src/react-chayns-color_picker/component/ColorPicker.jsx

+29-16
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ export default class ColorPicker extends Component {
4343
bubbleClassName: PropTypes.string,
4444
bubbleStyle: PropTypes.object,
4545
input: PropTypes.bool,
46-
defaultColorModel: PropTypes.number, // TODO add to readme
46+
defaultColorModel: PropTypes.number,
47+
children: PropTypes.node,
4748
};
4849

4950
static defaultProps = {
@@ -58,6 +59,7 @@ export default class ColorPicker extends Component {
5859
bubbleStyle: null,
5960
input: false,
6061
defaultColorModel: null,
62+
children: null,
6163
};
6264

6365
static colorModels = {
@@ -79,6 +81,7 @@ export default class ColorPicker extends Component {
7981
this.bubbleRef = React.createRef();
8082
this.bubbleContentRef = React.createRef();
8183
this.linkRef = React.createRef();
84+
this.childrenRef = React.createRef();
8285
}
8386

8487
componentDidUpdate(prevProps) {
@@ -108,7 +111,9 @@ export default class ColorPicker extends Component {
108111
};
109112

110113
openBubble = () => {
111-
const rect = this.linkRef.current.getBoundingClientRect();
114+
const { children } = this.props;
115+
const ref = children ? this.childrenRef : this.linkRef;
116+
const rect = ref.current.getBoundingClientRect();
112117
this.setState({ coordinates: { x: rect.left + (rect.width / 2), y: rect.bottom } });
113118
this.bubbleRef.current.show();
114119
// Add event listeners to hide the bubble
@@ -157,6 +162,7 @@ export default class ColorPicker extends Component {
157162
bubbleClassName,
158163
bubbleStyle,
159164
input,
165+
children,
160166
} = this.props;
161167
const {
162168
color,
@@ -171,21 +177,28 @@ export default class ColorPicker extends Component {
171177
style={style}
172178
onClick={this.openBubble}
173179
key="div"
180+
ref={this.childrenRef}
174181
>
175-
<div
176-
className="cc__color-picker__color-circle"
177-
style={{ backgroundColor: rgbToRgbString(rgb255, true) }}
178-
/>
179-
<div
180-
className="cc__color-picker__color-link chayns__color--headline chayns__border-color--headline"
181-
ref={this.linkRef}
182-
>
183-
{
184-
colorModel === ColorPicker.colorModels.RGB
185-
? rgbToRgbString(rgb255, transparency)
186-
: rgbToHexString(rgb255, transparency)
187-
}
188-
</div>
182+
{
183+
children || [
184+
<div
185+
key="circle"
186+
className="cc__color-picker__color-circle"
187+
style={{ backgroundColor: rgbToRgbString(rgb255, true) }}
188+
/>,
189+
<div
190+
key="link"
191+
className="cc__color-picker__color-link chayns__color--headline chayns__border-color--headline"
192+
ref={this.linkRef}
193+
>
194+
{
195+
colorModel === ColorPicker.colorModels.RGB
196+
? rgbToRgbString(rgb255, transparency)
197+
: rgbToHexString(rgb255, transparency)
198+
}
199+
</div>]
200+
201+
}
189202
</div>,
190203
<Bubble
191204
ref={this.bubbleRef}

0 commit comments

Comments
 (0)