From 0df2ad929b3db6fab12b9f95038325b6b488cac4 Mon Sep 17 00:00:00 2001 From: Joe Heffernan Date: Thu, 19 Oct 2023 17:02:35 -0700 Subject: [PATCH] remove recentcolors code --- src/components/ColorPicker/index.tsx | 147 -------------------- src/components/ColorPicker/style.css | 116 --------------- src/components/ColorPickerPopover/index.tsx | 39 ------ src/components/ColorPickerPopover/style.css | 10 -- src/state/selection/actions.ts | 8 -- src/state/selection/reducer.ts | 15 -- src/state/selection/selectors/basic.ts | 1 - src/state/selection/types.ts | 5 - 8 files changed, 341 deletions(-) delete mode 100644 src/components/ColorPicker/index.tsx delete mode 100644 src/components/ColorPicker/style.css delete mode 100644 src/components/ColorPickerPopover/index.tsx delete mode 100644 src/components/ColorPickerPopover/style.css diff --git a/src/components/ColorPicker/index.tsx b/src/components/ColorPicker/index.tsx deleted file mode 100644 index c17ddd284..000000000 --- a/src/components/ColorPicker/index.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { ActionCreator } from "redux"; -import { connect } from "react-redux"; -import { Tooltip } from "antd"; -import { HexColorInput, HexColorPicker } from "react-colorful"; -import classNames from "classnames"; - -import selectionStateBranch from "../../state/selection"; -import { AGENT_COLORS } from "../../containers/ViewerPanel/constants"; -import { - ColorChangesMap, - SetColorChangesAction, - SetRecentColorsAction, -} from "../../state/selection/types"; - -import styles from "./style.css"; -interface ColorPickerProps { - oldColor: string; - agentName: string; - tags: string[]; - setColorChanges: ActionCreator; - setRecentColors: ActionCreator; - recentColors: string[]; -} - -const ColorPicker = ({ - oldColor, - setColorChanges, - agentName, - tags, - recentColors, - setRecentColors, -}: ColorPickerProps) => { - const [color, setColor] = useState(oldColor); - - const handleColorChange = (color: string) => { - const colorChanges: ColorChangesMap = { - agents: { [agentName]: tags }, - color: color, - }; - setColorChanges(colorChanges); - updateRecentColors(color); - }; - - useEffect(() => { - handleColorChange(color); - }, [color]); - - const updateRecentColors = (color: string) => { - if (recentColors.includes(color)) { - return; - } - const newRecentColors = [color, ...recentColors]; - if (newRecentColors.length > 18) { - newRecentColors.pop(); - } - setRecentColors(newRecentColors); - }; - - return ( -
- -
-
-
{ - setColor(oldColor); - }} - > - {" "} -
-

CURRENT

-
-
-
- {" "} -
-

NEW

-
-
- -

HEX

-
-
-
- {AGENT_COLORS.map((color) => ( - -
-

Recent

-
- {recentColors.map((color) => ( -
-
- ); -}; - -const mapStateToProps = (state: any) => ({ - recentColors: selectionStateBranch.selectors.getRecentColors(state), -}); - -const dispatchToPropsMap = { - setColorChanges: selectionStateBranch.actions.setColorChanges, - setRecentColors: selectionStateBranch.actions.setRecentColors, -}; - -export default connect(mapStateToProps, dispatchToPropsMap)(ColorPicker); diff --git a/src/components/ColorPicker/style.css b/src/components/ColorPicker/style.css deleted file mode 100644 index 2cd9a33c1..000000000 --- a/src/components/ColorPicker/style.css +++ /dev/null @@ -1,116 +0,0 @@ -.container { - padding-left: 4px; -} - -.container :global(.react-colorful) { - gap: 7px; - padding-bottom: 8px; - height: auto; -} - -.container :global(.react-colorful__saturation) { - border-radius: 0px; - height: 115px; - width: 196px; -} - -.container :global(.react-colorful__hue) { - border-radius: 0px; - width: 196px; - height: 12px; -} - -.container .selection-display { - display: flex; -} - -.container .selection-display-text { - color: white; -} - -.container .hex-input { - height: 30px; - width: 68px; - background-color: transparent; - border: 1px solid var(--white-two); - font-size: 14px; - text-transform: uppercase; - padding-left: 6px; - padding-top: 4px; -} - -.container .old-color, -.container .new-color { - height: 30px; - width: 60px; -} - -.container .old-color-container { - display: flex; - flex-direction: column; - text-align: center; - font-size: 9px; - color: var(--white-two); - gap: 4px; -} - -.container .new-color { - margin-right: 8px; -} - -.container .agent-colors-swatches { - padding-top: 6px; - padding-bottom: 12px; -} - -.container .colors { - display: flex; - flex-wrap: wrap; - gap: 7px; -} - -.container .swatch { - height: 15.5px; - width: 15.5px; - cursor: pointer; - border: none; -} - -.container .tooltip { - box-shadow: 0px 3px 4px #000000; - height: 20px !important; -} - -.tooltip :global(.ant-tooltip-inner) { - font-size: 9px; - letter-spacing: 0px; - min-height: 0px; - padding: 5px 10px 16px 10px; - text-transform: uppercase; - height: 20px !important; -} - -.container .recentColorText { - text-align: left; - font-size: 12px; - color: var(--white-two); - margin-bottom: 2px; - font-weight: 300; -} - -.container :global(.react-colorful__saturation-pointer) { - width: 0px; - height: 0px; - border-radius: 0px; - border: none; -} -.container :global(.react-colorful__hue-pointer) { - width: 5px; - height: 16px; - border: 1px solid var(--white-two); - border-radius: 0px; -} - -.container :global(.react-colorful__pointer-fill) { - background-color: black !important; -} diff --git a/src/components/ColorPickerPopover/index.tsx b/src/components/ColorPickerPopover/index.tsx deleted file mode 100644 index fdf8d4216..000000000 --- a/src/components/ColorPickerPopover/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import { Popover } from "antd"; -import ColorPicker from "../ColorPicker"; - -import styles from "./style.css"; - -interface ColorPickerPopoverProps { - oldColor: string; - isOpen: boolean; - closeModal: () => void; - agentName: string; - tags: string[]; -} - -const ColorPickerPopover = ({ - oldColor, - isOpen, - closeModal, - agentName, - tags, -}: ColorPickerPopoverProps) => { - return ( - - } - placement="right" - onOpenChange={closeModal} - trigger="click" - /> - ); -}; -export default ColorPickerPopover; diff --git a/src/components/ColorPickerPopover/style.css b/src/components/ColorPickerPopover/style.css deleted file mode 100644 index f28c054b5..000000000 --- a/src/components/ColorPickerPopover/style.css +++ /dev/null @@ -1,10 +0,0 @@ -.popover :global(.ant-popover-content) { - width: 215px; - box-shadow: 0px 3px 6px #000000; -} - -.popover :global(.ant-popover-inner-content) { - padding: 10px 8px; - display: flex; - justify-content: center; -} diff --git a/src/state/selection/actions.ts b/src/state/selection/actions.ts index 9025bdc14..2953cea89 100644 --- a/src/state/selection/actions.ts +++ b/src/state/selection/actions.ts @@ -18,7 +18,6 @@ import { ResetAction, SetColorChangesAction, ColorChangesMap, - SetRecentColorsAction, } from "./types"; export function changeTime(time: number): ChangeTimeAction { @@ -87,10 +86,3 @@ export function resetAgentSelectionsAndHighlights(): ResetAction { type: RESET_AGENT_SELECTIONS_AND_HIGHLIGHTS, }; } - -export function setRecentColors(colors: string[]): SetRecentColorsAction { - return { - payload: colors, - type: SET_RECENT_COLORS, - }; -} diff --git a/src/state/selection/reducer.ts b/src/state/selection/reducer.ts index b41856d2c..20a9bb54f 100644 --- a/src/state/selection/reducer.ts +++ b/src/state/selection/reducer.ts @@ -23,7 +23,6 @@ import { SetVisibleAction, ResetAction, SetColorChangesAction, - SetRecentColorsAction, } from "./types"; export const initialState = { @@ -32,7 +31,6 @@ export const initialState = { agentVisibilityMap: {}, agentHighlightMap: {}, colorChangesMap: { agents: {}, color: "" }, - recentColors: [], }; const actionToConfigMap: TypeToDescriptionMap = { @@ -140,19 +138,6 @@ const actionToConfigMap: TypeToDescriptionMap = { }; }, }, - [SET_RECENT_COLORS]: { - accepts: (action: AnyAction): action is SetRecentColorsAction => - action.type === SET_RECENT_COLORS, - perform: ( - state: SelectionStateBranch, - action: SetRecentColorsAction - ) => { - return { - ...state, - recentColors: action.payload, - }; - }, - }, }; export default makeReducer( diff --git a/src/state/selection/selectors/basic.ts b/src/state/selection/selectors/basic.ts index 530a43f91..8d2f6ade8 100644 --- a/src/state/selection/selectors/basic.ts +++ b/src/state/selection/selectors/basic.ts @@ -9,4 +9,3 @@ export const getColorChangesMap = (state: State) => state.selection.colorChangesMap; export const getNumberCollapsed = (state: State) => state.selection.numberPanelsCollapsed; -export const getRecentColors = (state: State) => state.selection.recentColors; diff --git a/src/state/selection/types.ts b/src/state/selection/types.ts index 008b50728..a961dc4fe 100644 --- a/src/state/selection/types.ts +++ b/src/state/selection/types.ts @@ -56,8 +56,3 @@ export interface ColorChangesMap { agents: VisibilitySelectionMap; color: string; } - -export interface SetRecentColorsAction { - payload: string[]; - type: string; -}