Page MenuHomePhabricator
Files F3390848

D7302.diff
No OneTemporary
Actions

D7302.diff
View Options

diff --git a/native/components/color-rows.react.js b/native/components/color-rows.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/color-rows.react.js
@@ -0,0 +1,57 @@
+// @flow
+
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { selectedThreadColors } from 'lib/shared/color-utils.js';
+import type { SetState } from 'lib/types/hook-types.js';
+
+import ColorSelectorButton from './color-selector-button.react.js';
+
+type Props = {
+ +pendingColor: string,
+ +setPendingColor: SetState<string>,
+};
+
+function ColorRows(props: Props): React.Node {
+ const { pendingColor, setPendingColor } = props;
+
+ const colorSelectorButtons = React.useMemo(
+ () =>
+ selectedThreadColors.map(color => (
+ <ColorSelectorButton
+ key={color}
+ color={color}
+ pendingColor={pendingColor}
+ setPendingColor={setPendingColor}
+ />
+ )),
+ [pendingColor, setPendingColor],
+ );
+
+ const firstRow = React.useMemo(
+ () => colorSelectorButtons.slice(0, colorSelectorButtons.length / 2),
+ [colorSelectorButtons],
+ );
+
+ const secondRow = React.useMemo(
+ () => colorSelectorButtons.slice(colorSelectorButtons.length / 2),
+ [colorSelectorButtons],
+ );
+
+ return (
+ <>
+ <View style={styles.colorRowContainer}>{firstRow}</View>
+ <View style={styles.colorRowContainer}>{secondRow}</View>
+ </>
+ );
+}
+
+const styles = StyleSheet.create({
+ colorRowContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-evenly',
+ },
+});
+
+export default ColorRows;
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
@@ -4,9 +4,7 @@
import { Text, TouchableOpacity, View } from 'react-native';
import tinycolor from 'tinycolor2';
-import { selectedThreadColors } from 'lib/shared/color-utils.js';
-
-import ColorSelectorButton from './color-selector-button.react.js';
+import ColorRows from './color-rows.react.js';
import { useStyles } from '../themes/colors.js';
type ColorSelectorProps = {
@@ -19,29 +17,6 @@
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(
() => [
@@ -61,8 +36,10 @@
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>
+ <ColorRows
+ pendingColor={pendingColor}
+ setPendingColor={setPendingColor}
+ />
<TouchableOpacity
style={saveButtonStyle}
onPress={onColorSplotchSaved}
@@ -75,10 +52,6 @@
}
const unboundStyles = {
- colorButtons: {
- flexDirection: 'row',
- justifyContent: 'space-evenly',
- },
container: {
alignItems: 'center',
flex: 1,

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 1, 1:13 AM (21 h, 20 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2603114
Default Alt Text
D7302.diff (3 KB)

Event Timeline