Page MenuHomePhabricator
Files F3351590

D3868.id12022.diff
No OneTemporary
Actions

D3868.id12022.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
@@ -1,19 +1,51 @@
// @flow
import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import tinycolor from 'tinycolor2';
type ColorSelectorButtonProps = {
- color: string,
+ +color: string,
+ +currentColor: string,
};
function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
- const { color } = props;
- const buttonStyle = React.useMemo(
- () => [styles.button, { backgroundColor: color }],
- [color],
+ const { color, currentColor } = props;
+
+ const isSelected = tinycolor.equals(currentColor, color);
+
+ const selectedButtonStyle = React.useMemo(() => {
+ if (isSelected) {
+ return {
+ alignItems: 'center',
+ justifyContent: 'center',
+ shadowColor: `#${color}`,
+ shadowOpacity: 1,
+ shadowRadius: 20,
+ };
+ }
+ }, [color, isSelected]);
+
+ const colorSplotchStyle = React.useMemo(() => {
+ return [
+ styles.button,
+ { backgroundColor: `#${color}` },
+ selectedButtonStyle,
+ ];
+ }, [color, selectedButtonStyle]);
+
+ const selectedButtonContent = React.useMemo(() => {
+ if (isSelected) {
+ return <Icon name="ios-checkmark" size={36} color="white" />;
+ }
+ }, [isSelected]);
+
+ return (
+ <TouchableOpacity style={colorSplotchStyle}>
+ {selectedButtonContent}
+ </TouchableOpacity>
);
- return <View style={buttonStyle} />;
}
const styles = StyleSheet.create({
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
@@ -3,26 +3,31 @@
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
+import { selectedThreadColors } from 'lib/shared/thread-utils';
+
import ColorSelectorButton from './color-selector-button.react';
-function ColorSelector(): React.Node {
+type ColorSelectorProps = {
+ +currentColor: string,
+};
+
+function ColorSelector(props: ColorSelectorProps): React.Node {
+ const { currentColor } = props;
+
+ const colorSelectorButtons = selectedThreadColors.map(color => (
+ <ColorSelectorButton
+ key={color}
+ color={color}
+ currentColor={currentColor}
+ />
+ ));
+
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.text}>Select thread color</Text>
</View>
- <View style={styles.colorButtons}>
- <ColorSelectorButton color="#4B87AA" />
- <ColorSelectorButton color="#5C9F5F" />
- <ColorSelectorButton color="#B8753D" />
- <ColorSelectorButton color="#AA4B4B" />
- <ColorSelectorButton color="#6D49AB" />
- <ColorSelectorButton color="#C85000" />
- <ColorSelectorButton color="#008F83" />
- <ColorSelectorButton color="#648CAA" />
- <ColorSelectorButton color="#57697F" />
- <ColorSelectorButton color="#575757" />
- </View>
+ <View style={styles.colorButtons}>{colorSelectorButtons}</View>
</View>
);
}

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 2:41 AM (20 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2573572
Default Alt Text
D3868.id12022.diff (3 KB)

Event Timeline