Page MenuHomePhabricator
Files F3509662

No OneTemporary
Actions

View Options

diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
index c857472b2..65b349c04 100644
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -1,103 +1,105 @@
// @flow
import * as React from 'react';
-import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
import tinycolor from 'tinycolor2';
import { selectedThreadColors } from 'lib/shared/thread-utils';
+import { useStyles } from '../themes/colors';
import ColorSelectorButton from './color-selector-button.react';
type ColorSelectorProps = {
+currentColor: string,
+windowWidth: number,
+onColorSelected: (hex: string) => void,
};
function ColorSelector(props: ColorSelectorProps): React.Node {
const { currentColor, onColorSelected } = props;
const [pendingColor, setPendingColor] = React.useState(currentColor);
+ const styles = useStyles(unboundStyles);
const colorSelectorButtons = React.useMemo(
() =>
selectedThreadColors.map(color => (
<ColorSelectorButton
key={color}
color={color}
pendingColor={pendingColor}
setPendingColor={setPendingColor}
/>
)),
[pendingColor],
);
const firstRow = React.useMemo(
() => colorSelectorButtons.slice(0, colorSelectorButtons.length / 2),
[colorSelectorButtons],
);
const secondRow = React.useMemo(
() => colorSelectorButtons.slice(colorSelectorButtons.length / 2),
[colorSelectorButtons],
);
const saveButtonDisabled = tinycolor.equals(currentColor, pendingColor);
const saveButtonStyle = React.useMemo(
() => [
styles.saveButton,
{
backgroundColor: saveButtonDisabled ? '#404040' : `#${pendingColor}`,
width: 0.75 * props.windowWidth,
},
],
- [saveButtonDisabled, pendingColor, props.windowWidth],
+ [styles.saveButton, saveButtonDisabled, pendingColor, props.windowWidth],
);
const onColorSplotchSaved = React.useCallback(() => {
onColorSelected(`#${pendingColor}`);
}, [onColorSelected, pendingColor]);
return (
<View style={styles.container}>
<Text style={styles.header}>Select chat color</Text>
<View style={styles.colorButtons}>{firstRow}</View>
<View style={styles.colorButtons}>{secondRow}</View>
<TouchableOpacity
style={saveButtonStyle}
onPress={onColorSplotchSaved}
disabled={saveButtonDisabled}
>
<Text style={styles.saveButtonText}>Save</Text>
</TouchableOpacity>
</View>
);
}
-const styles = StyleSheet.create({
+const unboundStyles = {
colorButtons: {
flexDirection: 'row',
justifyContent: 'space-evenly',
},
container: {
alignItems: 'center',
flex: 1,
},
header: {
color: 'modalForegroundLabel',
fontSize: 24,
fontWeight: 'bold',
marginBottom: 10,
marginTop: 20,
},
saveButton: {
alignItems: 'center',
borderRadius: 5,
margin: 10,
padding: 10,
},
saveButtonText: {
color: 'white',
fontSize: 16,
},
-});
+};
export default ColorSelector;

File Metadata

Mime Type
text/x-diff
Expires
Mon, Dec 23, 7:08 AM (1 d, 6 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690532
Default Alt Text
(3 KB)

Event Timeline