Page MenuHomePhabricator
Files F3528401

D4899.diff
No OneTemporary
Actions

D4899.diff
View Options

diff --git a/native/chat/settings/color-selector-modal.react.js b/native/chat/settings/color-selector-modal.react.js
--- a/native/chat/settings/color-selector-modal.react.js
+++ b/native/chat/settings/color-selector-modal.react.js
@@ -50,73 +50,82 @@
request: UpdateThreadRequest,
) => Promise<ChangeThreadSettingsPayload>,
};
-class ColorSelectorModal extends React.PureComponent<Props> {
- render() {
- const { color } = this.props.route.params;
- // Based on the assumption we are always in portrait,
- // and consequently width is the lowest dimensions
- const modalStyle = { height: 0.75 * this.props.windowWidth };
- return (
- <Modal
- modalStyle={[this.props.styles.colorSelectorContainer, modalStyle]}
- >
- <ColorSelector
- currentColor={color}
- windowWidth={this.props.windowWidth}
- onColorSelected={this.onColorSelected}
- />
- <TouchableHighlight
- onPress={this.close}
- style={this.props.styles.closeButton}
- underlayColor={this.props.colors.modalIosHighlightUnderlay}
- >
- <Icon
- name="close"
- size={16}
- style={this.props.styles.closeButtonIcon}
- />
- </TouchableHighlight>
- </Modal>
- );
- }
-
- close = () => {
- this.props.navigation.goBackOnce();
- };
-
- onColorSelected = (color: string) => {
- const colorEditValue = color.substr(1);
- this.props.route.params.setColor(colorEditValue);
- this.close();
- this.props.dispatchActionPromise(
- changeThreadSettingsActionTypes,
- this.editColor(colorEditValue),
- { customKeyName: `${changeThreadSettingsActionTypes.started}:color` },
- );
- };
-
- async editColor(newColor: string) {
- const threadID = this.props.route.params.threadInfo.id;
- try {
- return await this.props.changeThreadSettings({
- threadID,
- changes: { color: newColor },
- });
- } catch (e) {
- Alert.alert(
- 'Unknown error',
- 'Uhh... try again?',
- [{ text: 'OK', onPress: this.onErrorAcknowledged }],
- { cancelable: false },
- );
- throw e;
- }
- }
+function ColorSelectorModal(props: Props): React.Node {
+ const {
+ changeThreadSettings: updateThreadSettings,
+ dispatchActionPromise,
+ windowWidth,
+ } = props;
+ const { threadInfo, setColor } = props.route.params;
+
+ const close = props.navigation.goBackOnce;
- onErrorAcknowledged = () => {
- const { threadInfo, setColor } = this.props.route.params;
+ const onErrorAcknowledged = React.useCallback(() => {
setColor(threadInfo.color);
- };
+ }, [setColor, threadInfo.color]);
+
+ const editColor = React.useCallback(
+ async (newColor: string) => {
+ const threadID = threadInfo.id;
+ try {
+ return await updateThreadSettings({
+ threadID,
+ changes: { color: newColor },
+ });
+ } catch (e) {
+ Alert.alert(
+ 'Unknown error',
+ 'Uhh... try again?',
+ [{ text: 'OK', onPress: onErrorAcknowledged }],
+ { cancelable: false },
+ );
+ throw e;
+ }
+ },
+ [onErrorAcknowledged, threadInfo.id, updateThreadSettings],
+ );
+
+ const onColorSelected = React.useCallback(
+ (color: string) => {
+ const colorEditValue = color.substr(1);
+ setColor(colorEditValue);
+ close();
+
+ dispatchActionPromise(
+ changeThreadSettingsActionTypes,
+ editColor(colorEditValue),
+ { customKeyName: `${changeThreadSettingsActionTypes.started}:color` },
+ );
+ },
+ [setColor, close, dispatchActionPromise, editColor],
+ );
+
+ const { colorSelectorContainer, closeButton, closeButtonIcon } = props.styles;
+ // Based on the assumption we are always in portrait,
+ // and consequently width is the lowest dimensions
+ const modalStyle = React.useMemo(
+ () => [colorSelectorContainer, { height: 0.75 * windowWidth }],
+ [colorSelectorContainer, windowWidth],
+ );
+
+ const { modalIosHighlightUnderlay } = props.colors;
+ const { color } = props.route.params;
+ return (
+ <Modal modalStyle={modalStyle}>
+ <ColorSelector
+ currentColor={color}
+ windowWidth={windowWidth}
+ onColorSelected={onColorSelected}
+ />
+ <TouchableHighlight
+ onPress={close}
+ style={closeButton}
+ underlayColor={modalIosHighlightUnderlay}
+ >
+ <Icon name="close" size={16} style={closeButtonIcon} />
+ </TouchableHighlight>
+ </Modal>
+ );
}
const unboundStyles = {

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 25, 9:17 AM (9 h, 26 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2702235
Default Alt Text
D4899.diff (4 KB)

Event Timeline