Skip to content

Commit bc6e266

Browse files
adids1221adids1221
authored
ColorPicker now support backgroundColor prop (#2328)
* ColorPicker now support backgroundColor prop * Fixed review notes, added background color to ColorPicker screen * Removed the View warpper from colorPalette * View wrapper have background style prop
1 parent cbfe527 commit bc6e266

File tree

3 files changed

+80
-62
lines changed

3 files changed

+80
-62
lines changed

‎demo/src/screens/componentScreens/ColorPickerScreen.tsx

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {StyleSheet, ScrollView} from 'react-native';
44
import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
5-
5+
import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
66

77
interface Props {}
88
interface State {
9-
color: string,
10-
textColor: string,
11-
customColors: string[],
12-
paletteChange: boolean
9+
color: string;
10+
textColor: string;
11+
customColors: string[];
12+
paletteChange: boolean;
13+
backgroundColor: string;
1314
}
1415

1516
const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -24,37 +25,37 @@ const colors = [
2425
'#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
2526
];
2627

27-
2828
export default class ColorPickerScreen extends Component<Props, State> {
2929
state: State = {
3030
color: INITIAL_COLOR,
3131
textColor: Colors.$textDefaultLight,
3232
customColors: [],
33-
paletteChange: false
33+
paletteChange: false,
34+
backgroundColor: Colors.$backgroundDefault
3435
};
3536

3637
onDismiss = () => {
3738
console.log(`screen onDismiss`);
38-
}
39+
};
3940

4041
onSubmit = (color: string, textColor: string) => {
4142
const {customColors} = this.state;
4243
customColors.push(color);
4344
this.setState({color, textColor, customColors: _.clone(customColors), paletteChange: false});
44-
}
45+
};
4546

4647
onValueChange = (value: string, options: object) => {
4748
this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: false});
48-
}
49+
};
4950

5051
onPaletteValueChange = (value: string, options: object) => {
5152
this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: true});
52-
}
53+
};
5354

5455
render() {
55-
const {color, textColor, customColors, paletteChange} = this.state;
56-
const paletteValue = paletteChange ? (color || INITIAL_COLOR) : undefined;
57-
const pickerValue = !paletteChange ? (color || INITIAL_COLOR) : undefined;
56+
const {color, textColor, customColors, paletteChange, backgroundColor} = this.state;
57+
const paletteValue = paletteChange ? color || INITIAL_COLOR : undefined;
58+
const pickerValue = !paletteChange ? color || INITIAL_COLOR : undefined;
5859

5960
const mappedColor = ColorName.name(color);
6061
const nearestColor = mappedColor[0];
@@ -67,18 +68,30 @@ export default class ColorPickerScreen extends Component<Props, State> {
6768
<Text text60 margin-10 style={{color}}>
6869
Selected Color: {color}
6970
</Text>
70-
<View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}} >
71+
<View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}}>
7172
<Text text60 style={{color: textColor}}>
7273
{color}
7374
</Text>
7475
</View>
7576
</View>
7677
<View bg-$backgroundDefault>
78+
<View marginH-20>
79+
{renderMultipleSegmentOptions.call(this, 'backgroundColor:', 'backgroundColor', [
80+
{label: 'Default', value: Colors.$backgroundDefault},
81+
{label: 'Primary', value: Colors.$backgroundPrimaryHeavy},
82+
{label: 'Success', value: Colors.$backgroundSuccessHeavy}
83+
])}
84+
</View>
7785
<Text text60 marginL-20 marginB-4 marginT-24>
7886
Theme Color
7987
</Text>
8088
<Text marginL-20>Choose a color for your place’s theme.</Text>
81-
<ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors}/>
89+
<ColorPalette
90+
value={paletteValue}
91+
onValueChange={this.onPaletteValueChange}
92+
colors={colors}
93+
backgroundColor={backgroundColor}
94+
/>
8295
<Text marginL-20 marginT-16>
8396
Custom Colors
8497
</Text>
@@ -90,6 +103,7 @@ export default class ColorPickerScreen extends Component<Props, State> {
90103
onValueChange={this.onValueChange}
91104
value={pickerValue}
92105
// animatedIndex={0}
106+
backgroundColor={backgroundColor}
93107
/>
94108
</View>
95109

‎src/components/colorPalette/index.tsx

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ interface Props {
5353
onValueChange?: (value: string, options: object) => void;
5454
style?: StyleProp<ViewStyle>;
5555
testID?: string;
56+
/**
57+
* Give the ColorPalette a background color
58+
*/
59+
backgroundColor?: string;
5660
}
5761
export type ColorPaletteProps = Props;
5862

@@ -81,7 +85,8 @@ class ColorPalette extends PureComponent<Props, State> {
8185
static defaultProps = {
8286
numberOfRows: DEFAULT_NUMBER_OF_ROWS,
8387
usePagination: true,
84-
loop: true
88+
loop: true,
89+
backgroundColor: Colors.$backgroundDefault
8590
};
8691

8792
constructor(props: Props) {
@@ -219,30 +224,31 @@ class ColorPalette extends PureComponent<Props, State> {
219224
return (margin - 0.001) / 2;
220225
}
221226

222-
scrollToSelected = () => setTimeout(() => {
223-
const {scrollable, currentPage} = this.state;
224-
225-
if (scrollable && this.selectedColorIndex !== undefined && this.itemsRefs.current) {
226-
// The this.selectedColorIndex layout doesn't update on time
227-
// so we use this.selectedColorIndex - 1 and add an offset of 1 Swatch
228-
const childRef: any = this.itemsRefs.current[this.selectedColorIndex - 1]?.current;
229-
230-
if (childRef) {
231-
const childLayout = childRef.getLayout();
232-
const leftMargins = this.getHorizontalMargins(this.selectedColorIndex).marginLeft;
233-
const childX = childLayout.x + childLayout.width + SWATCH_MARGIN + leftMargins + SWATCH_SIZE;
234-
if (childX > this.containerWidth) {
235-
this.scrollBar?.current?.scrollTo({
236-
x: childX + HORIZONTAL_PADDING - this.containerWidth,
237-
y: 0,
238-
animated: false
239-
});
227+
scrollToSelected = () =>
228+
setTimeout(() => {
229+
const {scrollable, currentPage} = this.state;
230+
231+
if (scrollable && this.selectedColorIndex !== undefined && this.itemsRefs.current) {
232+
// The this.selectedColorIndex layout doesn't update on time
233+
// so we use this.selectedColorIndex - 1 and add an offset of 1 Swatch
234+
const childRef: any = this.itemsRefs.current[this.selectedColorIndex - 1]?.current;
235+
236+
if (childRef) {
237+
const childLayout = childRef.getLayout();
238+
const leftMargins = this.getHorizontalMargins(this.selectedColorIndex).marginLeft;
239+
const childX = childLayout.x + childLayout.width + SWATCH_MARGIN + leftMargins + SWATCH_SIZE;
240+
if (childX > this.containerWidth) {
241+
this.scrollBar?.current?.scrollTo({
242+
x: childX + HORIZONTAL_PADDING - this.containerWidth,
243+
y: 0,
244+
animated: false
245+
});
246+
}
247+
} else if (this.usePagination) {
248+
this.carousel?.current?.goToPage(this.selectedPage || currentPage, false);
240249
}
241-
} else if (this.usePagination) {
242-
this.carousel?.current?.goToPage(this.selectedPage || currentPage, false);
243250
}
244-
}
245-
}, 100)
251+
}, 100);
246252

247253
onContentSizeChange = (contentWidth: number) => {
248254
this.setState({
@@ -331,32 +337,32 @@ class ColorPalette extends PureComponent<Props, State> {
331337
}
332338

333339
renderScrollableContent() {
334-
const {containerStyle, ...others} = this.props;
340+
const {containerStyle, backgroundColor, ...others} = this.props;
335341
const {scrollable, contentWidth} = this.state;
336342

337343
return (
338344
<ScrollBar
339345
ref={this.scrollBar}
340-
style={[containerStyle, styles.scrollContainer]}
346+
style={[containerStyle, {backgroundColor}]}
341347
scrollEnabled={scrollable}
342348
onContentSizeChange={this.onContentSizeChange}
343349
height={SCROLLABLE_HEIGHT}
344350
containerProps={{width: !scrollable ? contentWidth : undefined}}
345351
gradientHeight={SCROLLABLE_HEIGHT - 12}
346-
gradientColor={Colors.$backgroundDefault}
352+
gradientColor={backgroundColor}
347353
>
348354
{this.renderPalette(others, styles.scrollContent, this.colors, 0)}
349355
</ScrollBar>
350356
);
351357
}
352358

353359
renderPaginationContent() {
354-
const {containerStyle, loop, ...others} = this.props;
360+
const {containerStyle, loop, backgroundColor, ...others} = this.props;
355361
const {currentPage} = this.state;
356362
const colorGroups = _.chunk(this.colors, this.itemsPerPage);
357363

358364
return (
359-
<View center style={[containerStyle, styles.paginationContainer]}>
365+
<View center style={[containerStyle, styles.paginationContainer, {backgroundColor}]}>
360366
<Carousel loop={loop} onChangePage={this.onChangePage} ref={this.carousel}>
361367
{_.map(colorGroups, (colorsPerPage, index) => {
362368
return this.renderPalette(others, {...styles.page, width: this.containerWidth}, colorsPerPage, index);
@@ -390,12 +396,8 @@ const styles = StyleSheet.create({
390396
},
391397
paginationContainer: {
392398
flex: 1,
393-
backgroundColor: Colors.$backgroundDefault,
394399
paddingBottom: VERTICAL_PADDING
395400
},
396-
scrollContainer: {
397-
backgroundColor: Colors.$backgroundDefault
398-
},
399401
page: {
400402
flexWrap: 'wrap'
401403
},

‎src/components/colorPicker/index.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import ColorPalette from '../colorPalette';
88
import {SWATCH_MARGIN, SWATCH_SIZE} from '../colorSwatch';
99
import ColorPickerDialog, {ColorPickerDialogProps} from './ColorPickerDialog';
1010

11-
1211
interface Props extends ColorPickerDialogProps {
1312
/**
1413
* Array of colors for the picker's color palette (hex values)
@@ -36,13 +35,17 @@ interface Props extends ColorPickerDialogProps {
3635
* }
3736
*/
3837
accessibilityLabels?: {
39-
addButton?: string,
40-
dismissButton?: string,
41-
doneButton?: string,
42-
input?: string
38+
addButton?: string;
39+
dismissButton?: string;
40+
doneButton?: string;
41+
input?: string;
4342
};
4443
style?: StyleProp<ViewStyle>;
4544
testID?: string;
45+
/**
46+
* Give the ColorPicker a background color
47+
*/
48+
backgroundColor?: string;
4649
}
4750
export type ColorPickerProps = Props;
4851

@@ -63,7 +66,8 @@ class ColorPicker extends PureComponent<Props> {
6366
static displayName = 'ColorPicker';
6467

6568
static defaultProps = {
66-
accessibilityLabels: ACCESSIBILITY_LABELS
69+
accessibilityLabels: ACCESSIBILITY_LABELS,
70+
backgroundColor: Colors.$backgroundDefault
6771
};
6872

6973
state = {
@@ -84,14 +88,13 @@ class ColorPicker extends PureComponent<Props> {
8488

8589
hideDialog = () => {
8690
this.setState({show: false});
87-
}
91+
};
8892

8993
render() {
90-
const {initialColor, colors, value, testID, accessibilityLabels} = this.props;
94+
const {initialColor, colors, value, testID, accessibilityLabels, backgroundColor} = this.props;
9195
const {show} = this.state;
92-
9396
return (
94-
<View row testID={testID}>
97+
<View row testID={testID} style={{backgroundColor}}>
9598
<ColorPalette
9699
value={value}
97100
colors={colors}
@@ -100,8 +103,9 @@ class ColorPicker extends PureComponent<Props> {
100103
animatedIndex={this.animatedIndex}
101104
onValueChange={this.onValueChange}
102105
testID={`${testID}-palette`}
106+
backgroundColor={backgroundColor}
103107
/>
104-
<View style={styles.buttonContainer}>
108+
<View style={[styles.buttonContainer, {backgroundColor}]}>
105109
<Button
106110
color={Colors.$textDefault}
107111
outlineColor={Colors.$textDefault}
@@ -137,7 +141,6 @@ class ColorPicker extends PureComponent<Props> {
137141

138142
export default ColorPicker;
139143

140-
141144
const plusButtonContainerWidth = SWATCH_SIZE + 20 + 12;
142145
const plusButtonContainerHeight = 92 - 2 * SWATCH_MARGIN;
143146

@@ -154,8 +157,7 @@ const styles = StyleSheet.create({
154157
marginBottom: SWATCH_MARGIN,
155158
alignItems: 'flex-end',
156159
justifyContent: 'center',
157-
paddingTop: 1,
158-
backgroundColor: Colors.$backgroundDefault
160+
paddingTop: 1
159161
},
160162
button: {
161163
width: SWATCH_SIZE,

0 commit comments

Comments
 (0)