Page MenuHomePhabricator
Files F3352228

D3939.id12564.diff
No OneTemporary
Actions

D3939.id12564.diff
View Options

diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -4,22 +4,31 @@
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import tinycolor from 'tinycolor2';
+import type { SetState } from 'lib/types/hook-types';
+
type ColorSelectorButtonProps = {
+color: string,
- +currentColor: string,
+ +pendingColor: string,
+ +setPendingColor: SetState<string>,
};
-
function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
- const { color, currentColor } = props;
+ const { color, pendingColor, setPendingColor } = props;
const colorSplotchStyle = React.useMemo(() => {
return [styles.button, { backgroundColor: `#${color}` }];
}, [color]);
- const isSelected = tinycolor.equals(currentColor, color);
+ const onPendingColorSelected = React.useCallback(() => {
+ setPendingColor(color);
+ }, [setPendingColor, color]);
+
+ const isSelected = tinycolor.equals(pendingColor, color);
return (
<View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
- <TouchableOpacity style={colorSplotchStyle} />
+ <TouchableOpacity
+ style={colorSplotchStyle}
+ onPress={onPendingColorSelected}
+ />
</View>
);
}
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -1,7 +1,8 @@
// @flow
import * as React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { Button, Text, View, StyleSheet } from 'react-native';
+import tinycolor from 'tinycolor2';
import { selectedThreadColors } from 'lib/shared/thread-utils';
@@ -9,10 +10,11 @@
type ColorSelectorProps = {
+currentColor: string,
+ +onColorSelected: (hex: string) => void,
};
-
function ColorSelector(props: ColorSelectorProps): React.Node {
- const { currentColor } = props;
+ const { currentColor, onColorSelected } = props;
+ const [pendingColor, setPendingColor] = React.useState(currentColor);
const colorSelectorButtons = React.useMemo(
() =>
@@ -20,26 +22,44 @@
<ColorSelectorButton
key={color}
color={color}
- currentColor={currentColor}
+ pendingColor={pendingColor}
+ setPendingColor={setPendingColor}
/>
)),
- [currentColor],
+ [pendingColor],
+ );
+
+ const saveButtonDisabled = tinycolor.equals(currentColor, pendingColor);
+ const saveButtonStyle = React.useMemo(
+ () => [
+ styles.saveButton,
+ { backgroundColor: saveButtonDisabled ? '#404040' : `#${pendingColor}` },
+ ],
+ [saveButtonDisabled, pendingColor],
);
+ const onColorSplotchSaved = React.useCallback(() => {
+ onColorSelected(`#${pendingColor}`);
+ }, [onColorSelected, pendingColor]);
+
return (
<View style={styles.container}>
- <View style={styles.textContainer}>
- <Text style={styles.text}>Select thread color</Text>
- </View>
+ <Text style={styles.header}>Select thread color</Text>
<View style={styles.colorButtons}>{colorSelectorButtons}</View>
+ <View style={saveButtonStyle}>
+ <Button
+ title="Save"
+ color="white"
+ onPress={onColorSplotchSaved}
+ disabled={saveButtonDisabled}
+ />
+ </View>
</View>
);
}
const styles = StyleSheet.create({
colorButtons: {
- alignItems: 'center',
- display: 'flex',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
@@ -47,20 +67,21 @@
},
container: {
alignItems: 'center',
- display: 'flex',
flex: 1,
- flexDirection: 'column',
- flexWrap: 'wrap',
justifyContent: 'center',
},
- text: {
+ header: {
color: 'white',
fontSize: 24,
fontWeight: 'bold',
- },
- textContainer: {
margin: 20,
},
+ saveButton: {
+ borderRadius: 5,
+ margin: 10,
+ padding: 5,
+ width: 320,
+ },
});
export default ColorSelector;

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 5:09 AM (20 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2573606
Default Alt Text
D3939.id12564.diff (4 KB)

Event Timeline