Page MenuHomePhabricator
Files F3509387

No OneTemporary
Actions

View Options

diff --git a/native/components/color-rows.react.js b/native/components/color-rows.react.js
index 50aaf4953..04d2c1a0a 100644
--- a/native/components/color-rows.react.js
+++ b/native/components/color-rows.react.js
@@ -1,57 +1,59 @@
// @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>,
+ +outerRingSelectedColor?: string,
};
function ColorRows(props: Props): React.Node {
- const { pendingColor, setPendingColor } = props;
+ const { pendingColor, setPendingColor, outerRingSelectedColor } = props;
const colorSelectorButtons = React.useMemo(
() =>
selectedThreadColors.map(color => (
<ColorSelectorButton
key={color}
color={color}
pendingColor={pendingColor}
setPendingColor={setPendingColor}
+ outerRingSelectedColor={outerRingSelectedColor}
/>
)),
- [pendingColor, setPendingColor],
+ [outerRingSelectedColor, 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-button.react.js b/native/components/color-selector-button.react.js
index 012a0420d..c1c2ca5b0 100644
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -1,61 +1,72 @@
// @flow
import * as React from 'react';
import { TouchableOpacity, View } from 'react-native';
import tinycolor from 'tinycolor2';
import type { SetState } from 'lib/types/hook-types.js';
import { useStyles } from '../themes/colors.js';
type ColorSelectorButtonProps = {
+color: string,
+pendingColor: string,
+setPendingColor: SetState<string>,
+ +outerRingSelectedColor?: string,
};
function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
- const { color, pendingColor, setPendingColor } = props;
+ const { color, pendingColor, setPendingColor, outerRingSelectedColor } =
+ props;
const styles = useStyles(unboundStyles);
const colorSplotchStyle = React.useMemo(() => {
return [styles.button, { backgroundColor: `#${color}` }];
}, [color, styles.button]);
+ const outerRingSelectedStyle = React.useMemo(() => {
+ const result = [styles.outerRingSelected];
+ if (outerRingSelectedColor) {
+ result.push({ backgroundColor: `#${outerRingSelectedColor}` });
+ }
+
+ return result;
+ }, [outerRingSelectedColor, styles.outerRingSelected]);
+
const onPendingColorSelected = React.useCallback(() => {
setPendingColor(color);
}, [setPendingColor, color]);
const isSelected = tinycolor.equals(pendingColor, color);
return (
- <View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
+ <View style={isSelected ? outerRingSelectedStyle : styles.outerRing}>
<TouchableOpacity
style={colorSplotchStyle}
onPress={onPendingColorSelected}
/>
</View>
);
}
const unboundStyles = {
button: {
borderRadius: 20,
height: 40,
margin: 10,
width: 40,
},
outerRing: {
borderRadius: 40,
height: 60,
margin: 5,
width: 60,
},
outerRingSelected: {
backgroundColor: 'modalForegroundBorder',
borderRadius: 30,
height: 60,
margin: 5,
width: 60,
},
};
export default ColorSelectorButton;

File Metadata

Mime Type
text/x-diff
Expires
Mon, Dec 23, 4:05 AM (11 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690334
Default Alt Text
(4 KB)

Event Timeline