@cdc/map 4.25.8 → 4.25.11

package/src/components/EditorPanel/components/HexShapeSettings.tsx

@@ -6,26 +6,20 @@ import {
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 import ConfigContext from '../../../context'
 import _ from 'lodash'
-
-const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'Arrow Left', 'None']
-
-// todo: Move duplicated operators to CORE
-export const DATA_OPERATOR_LESS = '<'
-export const DATA_OPERATOR_GREATER = '>'
-export const DATA_OPERATOR_LESSEQUAL = '<='
-export const DATA_OPERATOR_GREATEREQUAL = '>='
-export const DATA_OPERATOR_EQUAL = '='
-export const DATA_OPERATOR_NOTEQUAL = '≠'
-export const DATA_OPERATORS = [
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
+import {
   DATA_OPERATOR_LESS,
   DATA_OPERATOR_GREATER,
   DATA_OPERATOR_LESSEQUAL,
   DATA_OPERATOR_GREATEREQUAL,
   DATA_OPERATOR_EQUAL,
   DATA_OPERATOR_NOTEQUAL
-]
+} from '@cdc/core/helpers/constants'
+
+const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'Arrow Left', 'None']
 
 /**
  * Notice: each shape Col has a legend title and description should the title/desc need to be different for different shapes.
@@ -105,7 +99,7 @@ const HexSettingShapeColumns = props => {
                               type='text'
                               value={shapeGroup.legendTitle || ''}
                               onChange={e => {
-                                const newConfig = _.cloneDeep(config)
+                                const newConfig = cloneConfig(config)
                                 newConfig.hexMap.shapeGroups[shapeGroupIndex].legendTitle = e.target.value
                                 setConfig(newConfig)
                               }}
@@ -134,91 +128,60 @@ const HexSettingShapeColumns = props => {
                                   </AccordionItemHeading>
                                   <AccordionItemPanel>
                                     <>
+                                      <Select
+                                        label='Shape Column'
+                                        value={
+                                          config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape ||
+                                          'Arrow Up'
+                                        }
+                                        options={shapeOptions}
+                                        fieldName={`shape-${shapeGroupIndex}-${itemIndex}`}
+                                        updateField={(section, subsection, fieldName, value) => {
+                                          handleItemUpdate('shape', value, shapeGroupIndex, itemIndex)
+                                        }}
+                                      />
+
+                                      <Select
+                                        label='Column'
+                                        value={config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].key || ''}
+                                        options={columnsOptions.map(c => c.key)}
+                                        fieldName={`key-${shapeGroupIndex}-${itemIndex}`}
+                                        updateField={(section, subsection, fieldName, value) =>
+                                          handleItemUpdate('key', value, shapeGroupIndex, itemIndex)
+                                        }
+                                      />
+
+                                      <Select
+                                        label='Operator'
+                                        value={
+                                          config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].operator || '='
+                                        }
+                                        options={[
+                                          DATA_OPERATOR_EQUAL,
+                                          DATA_OPERATOR_NOTEQUAL,
+                                          DATA_OPERATOR_LESS,
+                                          DATA_OPERATOR_GREATER,
+                                          DATA_OPERATOR_LESSEQUAL,
+                                          DATA_OPERATOR_GREATEREQUAL
+                                        ]}
+                                        fieldName={`operator-${shapeGroupIndex}-${itemIndex}`}
+                                        updateField={(section, subsection, fieldName, value) =>
+                                          handleItemUpdate('operator', value, shapeGroupIndex, itemIndex)
+                                        }
+                                      />
+
                                       <label>
-                                        <span className='edit-label column-heading'>Shape Column</span>
-                                        <select
+                                        <span className='edit-label column-heading'>Value</span>
+                                        <input
+                                          type='text'
                                           value={
-                                            config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape
-                                              ? config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape
-                                              : 'select'
+                                            config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].value || ''
+                                          }
+                                          onChange={e =>
+                                            handleItemUpdate('value', e.target.value, shapeGroupIndex, itemIndex)
                                           }
-                                          onChange={e => {
-                                            handleItemUpdate('shape', e.target.value, shapeGroupIndex, itemIndex)
-                                          }}
-                                        >
-                                          {shapeOptions.map(shape => (
-                                            <option value={shape}>{shape}</option>
-                                          ))}
-                                        </select>
+                                        />
                                       </label>
-
-                                      <div className='cove-input-group'>
-                                        <label className=''>
-                                          <span className='edit-label cove-input__label'>Column Conditional</span>
-                                        </label>
-                                        <div className='cove-accordion__panel-row cove-accordion__small-inputs'>
-                                          <div className='cove-accordion__panel-col cove-input'>
-                                            <select
-                                              value={
-                                                config.hexMap.shapeGroups[shapeGroupIndex].key === ''
-                                                  ? 'Select'
-                                                  : config.hexMap.shapeGroups[shapeGroupIndex].key
-                                              }
-                                              className='cove-input'
-                                              onChange={e =>
-                                                handleItemUpdate('key', e.target.value, shapeGroupIndex, itemIndex)
-                                              }
-                                            >
-                                              {columnsOptions}
-                                            </select>
-                                          </div>
-                                          <div className='cove-accordion__panel-col cove-input'>
-                                            <select
-                                              value={
-                                                config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].operator ||
-                                                '-SELECT-'
-                                              }
-                                              initial='Select'
-                                              className='cove-input'
-                                              onChange={e =>
-                                                handleItemUpdate('operator', e.target.value, shapeGroupIndex, itemIndex)
-                                              }
-                                            >
-                                              {[DATA_OPERATOR_EQUAL].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_NOTEQUAL].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_LESS].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_GREATER].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_LESSEQUAL].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_GREATEREQUAL].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                            </select>
-                                          </div>
-                                          <div className='cove-accordion__panel-col cove-input'>
-                                            <input
-                                              type='text'
-                                              value={
-                                                config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].value || ''
-                                              }
-                                              className='cove-input'
-                                              style={{ height: '100%' }}
-                                              onChange={e =>
-                                                handleItemUpdate('value', e.target.value, shapeGroupIndex, itemIndex)
-                                              }
-                                            />
-                                          </div>
-                                        </div>
-                                      </div>
                                       <button
                                         className='cove-button cove-button--warn'
                                         style={{
@@ -243,7 +206,7 @@ const HexSettingShapeColumns = props => {
                               className='cove-button'
                               style={{ marginTop: '15px' }}
                               onClick={() => {
-                                const newConfig = _.cloneDeep(config)
+                                const newConfig = cloneConfig(config)
                                 _.set(
                                   newConfig,
                                   'hexMap.shapeGroups',

package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx

@@ -7,13 +7,16 @@ import {
   AccordionItemButton
 } from 'react-accessible-accordion'
 import ConfigContext from '../../../../context'
+import { useLegendMemoContext } from '../../../../context/LegendMemoContext'
 import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 import './Panel.PatternSettings-style.css'
 import Alert from '@cdc/core/components/Alert'
 import _ from 'lodash'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 // topojson helpers for checking color contrasts
 import { feature } from 'topojson-client'
@@ -26,8 +29,8 @@ type PanelProps = {
 }
 
 const PatternSettings = ({ name }: PanelProps) => {
-  const { config, setConfig, runtimeData, legendMemo, legendSpecialClassLastMemo, runtimeLegend } =
-    useContext<MapContext>(ConfigContext)
+  const { config, setConfig, runtimeData, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const defaultPattern = 'circles'
   const patternTypes = ['circles', 'waves', 'lines']
 
@@ -114,14 +117,14 @@ const PatternSettings = ({ name }: PanelProps) => {
   }
 
   const handlePatternFieldUpdate = (field: string, color: string, patternIndex: number) => {
-    const _newConfig = _.cloneDeep(config)
+    const _newConfig = cloneConfig(config)
     _newConfig.map.patterns[patternIndex][field] = color
     reviewColorContrast(_newConfig, patternIndex)
     setConfig(_newConfig)
   }
 
   const handleRemovePattern = index => {
-    const _newConfig = _.cloneDeep(config)
+    const _newConfig = cloneConfig(config)
     const updatedPatterns = config.map.patterns.filter((pattern, i) => i !== index)
     _newConfig.map.patterns = updatedPatterns
     if (checkPatternContrasts()) {
@@ -161,7 +164,7 @@ const PatternSettings = ({ name }: PanelProps) => {
         {patterns.length > 0 && (
           <Alert
             type={checkPatternContrasts() ? 'success' : 'danger'}
-            message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.'
+            message='Pattern colors must comply with <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.'
           />
         )}
         <br />
@@ -194,21 +197,16 @@ const PatternSettings = ({ name }: PanelProps) => {
                           message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>'
                         />
                       )}{' '}
-                      <label htmlFor={`pattern-dataKey--${patternIndex}`}>Data Key:</label>
-                      <select
-                        id={`pattern-dataKey--${patternIndex}`}
-                        value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'}
-                        onChange={e => handlePatternFieldUpdate('dataKey', e.target.value, patternIndex)}
-                      >
-                        {/* TODO: sort these? */}
-                        {dataKeyOptions.map((d, index) => {
-                          return (
-                            <option value={d} key={index}>
-                              {d}
-                            </option>
-                          )
-                        })}
-                      </select>
+                      <Select
+                        label='Data Key:'
+                        value={pattern.dataKey}
+                        options={dataKeyOptions.filter(d => d !== 'Select')}
+                        initial='Select'
+                        fieldName={`pattern-dataKey--${patternIndex}`}
+                        updateField={(section, subsection, fieldName, value) =>
+                          handlePatternFieldUpdate('dataKey', value, patternIndex)
+                        }
+                      />
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
                         <input
@@ -227,30 +225,24 @@ const PatternSettings = ({ name }: PanelProps) => {
                           value={pattern.label === '' ? '' : pattern.label}
                         />
                       </label>
-                      <label htmlFor={`pattern-type--${patternIndex}`}>Pattern Type:</label>
-                      <select
-                        id={`pattern-type--${patternIndex}`}
+                      <Select
+                        label='Pattern Type:'
                         value={pattern?.pattern}
-                        onChange={e => handlePatternFieldUpdate('pattern', e.target.value, patternIndex)}
-                      >
-                        {patternTypes.map((patternName, index) => (
-                          <option value={patternName} key={index}>
-                            {patternName}
-                          </option>
-                        ))}
-                      </select>
-                      <label htmlFor={`pattern-size--${patternIndex}`}>Pattern Size:</label>
-                      <select
-                        id={`pattern-size--${patternIndex}`}
+                        options={patternTypes}
+                        fieldName={`pattern-type--${patternIndex}`}
+                        updateField={(section, subsection, fieldName, value) =>
+                          handlePatternFieldUpdate('pattern', value, patternIndex)
+                        }
+                      />
+                      <Select
+                        label='Pattern Size:'
                         value={pattern?.size}
-                        onChange={e => handlePatternFieldUpdate('size', e.target.value, patternIndex)}
-                      >
-                        {['small', 'medium', 'large'].map((size, index) => (
-                          <option value={size} key={index}>
-                            {size}
-                          </option>
-                        ))}
-                      </select>
+                        options={['small', 'medium', 'large']}
+                        fieldName={`pattern-size--${patternIndex}`}
+                        updateField={(section, subsection, fieldName, value) =>
+                          handlePatternFieldUpdate('size', value, patternIndex)
+                        }
+                      />
                       <div className='pattern-input__color'>
                         <label htmlFor='patternColor'>
                           Pattern Color