Page MenuHomePhabricator
Files F3294640

D3684.diff
No OneTemporary
Actions

D3684.diff
View Options

diff --git a/web/modals/threads/color-selector-button.react.js b/web/modals/threads/color-selector-button.react.js
--- a/web/modals/threads/color-selector-button.react.js
+++ b/web/modals/threads/color-selector-button.react.js
@@ -3,15 +3,19 @@
import classNames from 'classnames';
import * as React from 'react';
+import { type SetState } from 'lib/types/hook-types.js';
+
import css from './color-selector-button.css';
type ColorSelectorButtonProps = {
+color: string,
- +active: boolean,
+ +pendingColorSelection: string,
+ +setPendingColorSelection: SetState<string>,
};
function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
- const { color, active } = props;
+ const { color, pendingColorSelection, setPendingColorSelection } = props;
+ const active = color === pendingColorSelection;
const containerClassName = classNames(css.container, {
[css.active]: active,
});
@@ -23,8 +27,12 @@
[color],
);
+ const onColorSplotchClicked = React.useCallback(() => {
+ setPendingColorSelection(color);
+ }, [setPendingColorSelection, color]);
+
return (
- <div className={containerClassName}>
+ <div onClick={onColorSplotchClicked} className={containerClassName}>
<div className={css.colorSplotch} style={colorSplotchStyle} />
</div>
);
diff --git a/web/modals/threads/color-selector.react.js b/web/modals/threads/color-selector.react.js
--- a/web/modals/threads/color-selector.react.js
+++ b/web/modals/threads/color-selector.react.js
@@ -5,22 +5,70 @@
import ColorSelectorButton from './color-selector-button.react';
import css from './color-selector.css';
-function ColorSelector(): React.Node {
+type ColorSelectorProps = {
+ +currentThreadColor: string,
+};
+function ColorSelector(props: ColorSelectorProps): React.Node {
+ const { currentThreadColor } = props;
+ const [pendingColorSelection, setPendingColorSelection] = React.useState(
+ currentThreadColor,
+ );
+
return (
<div className={css.container}>
<div className={css.row}>
- <ColorSelectorButton color="#4B87AA" active={true} />
- <ColorSelectorButton color="#5C9F5F" active={false} />
- <ColorSelectorButton color="#B8753D" active={false} />
- <ColorSelectorButton color="#AA4B4B" active={false} />
- <ColorSelectorButton color="#6D49AB" active={false} />
+ <ColorSelectorButton
+ color="#4B87AA"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
+ <ColorSelectorButton
+ color="#5C9F5F"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
+ <ColorSelectorButton
+ color="#B8753D"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
+ <ColorSelectorButton
+ color="#AA4B4B"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
+ <ColorSelectorButton
+ color="#6D49AB"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
</div>
<div className={css.row}>
- <ColorSelectorButton color="#C85000" active={false} />
- <ColorSelectorButton color="#008F83" active={false} />
- <ColorSelectorButton color="#648CAA" active={false} />
- <ColorSelectorButton color="#57697F" active={false} />
- <ColorSelectorButton color="#575757" active={false} />
+ <ColorSelectorButton
+ color="#C85000"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
+ <ColorSelectorButton
+ color="#008F83"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
+ <ColorSelectorButton
+ color="#648CAA"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
+ <ColorSelectorButton
+ color="#57697F"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
+ <ColorSelectorButton
+ color="#575757"
+ pendingColorSelection={pendingColorSelection}
+ setPendingColorSelection={setPendingColorSelection}
+ />
</div>
</div>
);

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 7:38 PM (21 h, 53 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2531517
Default Alt Text
D3684.diff (4 KB)

Event Timeline