Refactor, avoid passing colors through several levels

WordPress · Jul 17, 2018 · 4b9dfee · 4b9dfee
1 parent 0081052
commit 4b9dfee
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 57 deletions.
diff --git a/editor/components/panel-color-settings/index.js b/editor/components/panel-color-settings/index.js
@@ -23,38 +23,27 @@ import ColorPalette from '../color-palette';
 import withColorContext from '../color-palette/with-color-context';
 import { getColorName } from '../colors';
 
-const getColorIndicatorProps = ( colors, { value, colorIndicatorAriaLabel } ) => {
+const ColorIndicatorWithColorContext = withColorContext( ( { value, colorIndicatorAriaLabel, colors } ) => {
 	if ( ! value ) {
-		return;
+		return null;
 	}
 
 	const colorName = getColorName( colors, value );
 
-	return {
-		colorValue: value,
-		ariaLabel: sprintf( colorIndicatorAriaLabel, colorName || value ),
-	};
-};
-
-const TextWithColorIndicators = ( { text, colorIndicatorProps } ) => (
-	<Fragment>
-		{ text }
-		{ colorIndicatorProps.map( ( props, index ) => props && (
-			<ColorIndicator
-				key={ index }
-				{ ...props }
-			/>
-		) ) }
-	</Fragment>
-);
+	return (
+		<ColorIndicator
+			colorValue={ value }
+			ariaLabel={ sprintf( colorIndicatorAriaLabel, colorName || value ) }
+		/>
+	);
+} );
 
-const ColorPaletteControl = ( { label, colors, ...settings } ) => {
-	const colorIndicatorProps = getColorIndicatorProps( colors, settings );
+const ColorPaletteControl = ( { label, ...settings } ) => {
 	const labelElement = (
-		<TextWithColorIndicators
-			text={ label }
-			colorIndicatorProps={ [ colorIndicatorProps ] }
-		/>
+		<Fragment>
+			{ label }
+			{ <ColorIndicatorWithColorContext { ...settings } /> }
+		</Fragment>
 	);
 
 	return (
@@ -68,32 +57,27 @@ const ColorPaletteControl = ( { label, colors, ...settings } ) => {
 	);
 };
 
-export function PanelColorSettings( { title, colors, colorSettings, children } ) {
+export function PanelColorSettings( { title, colorSettings, children } ) {
 	const className = 'editor-panel-color-settings';
 
-	const titleColorIndicatorProps = colorSettings.map( ( settings ) => {
-		return getColorIndicatorProps( colors, settings );
-	} );
-
 	const titleElement = (
-		<TextWithColorIndicators
-			className="editor-panel-color-settings__panel-title"
-			text={ title }
-			colorIndicatorProps={ titleColorIndicatorProps }
-		/>
+		<span className={ `${ className }__panel-title` }>
+			{ title }
+			{ colorSettings.map(
+				( settings, index ) => (
+					<ColorIndicatorWithColorContext key={ index } { ...settings } />
+				)
+			) }
+		</span>
 	);
 
 	return (
 		<PanelBody
 			className={ className }
 			title={ titleElement }
 		>
-
 			{ colorSettings.map( ( settings, index ) => (
-				<ColorPaletteControl
-					key={ index }
-					colors={ colors }
-					{ ...settings } />
+				<ColorPaletteControl key={ index } { ...settings } />
 			) ) }
 
 			{ children }

diff --git a/editor/components/panel-color-settings/test/__snapshots__/index.js.snap b/editor/components/panel-color-settings/test/__snapshots__/index.js.snap
@@ -4,35 +4,34 @@ exports[`PanelColorSettings matches the snapshot 1`] = `
 <PanelBody
   className="editor-panel-color-settings"
   title={
-    <TextWithColorIndicators
+    <span
       className="editor-panel-color-settings__panel-title"
-      colorIndicatorProps={
-        Array [
-          Object {
-            "ariaLabel": "black",
-            "colorValue": "#000",
-          },
-          Object {
-            "ariaLabel": "nearly black",
-            "colorValue": "#111",
-          },
-        ]
-      }
-      text="Test Title"
-    />
+    >
+      Test Title
+      <WithColorContext(Component)
+        colorIndicatorAriaLabel="black"
+        label="black color"
+        onChange={[Function]}
+        value="#000"
+      />
+      <WithColorContext(Component)
+        colorIndicatorAriaLabel="nearly black"
+        label="nearly black color"
+        onChange={[Function]}
+        value="#111"
+      />
+    </span>
   }
 >
   <ColorPaletteControl
     colorIndicatorAriaLabel="black"
-    colors={Array []}
     key="0"
     label="black color"
     onChange={[Function]}
     value="#000"
   />
   <ColorPaletteControl
     colorIndicatorAriaLabel="nearly black"
-    colors={Array []}
     key="1"
     label="nearly black color"
     onChange={[Function]}