-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: solve some issues in useColors hook #18147
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,13 @@ | |
* External dependencies | ||
*/ | ||
import memoize from 'memize'; | ||
import { kebabCase, camelCase, startCase } from 'lodash'; | ||
import classnames from 'classnames'; | ||
import { | ||
camelCase, | ||
kebabCase, | ||
map, | ||
startCase, | ||
} from 'lodash'; | ||
|
||
/** | ||
* WordPress dependencies | ||
|
@@ -35,17 +41,17 @@ const ColorPanel = ( { | |
<PanelColorSettings | ||
title={ title } | ||
initialOpen={ false } | ||
colorSettings={ colorSettings } | ||
colorSettings={ Object.values( colorSettings ) } | ||
{ ...colorPanelProps } | ||
> | ||
{ contrastCheckerProps && | ||
components.map( ( Component, index ) => ( | ||
map( components, ( ( Component, key ) => ( | ||
<ContrastChecker | ||
key={ Component.displayName } | ||
textColor={ colorSettings[ index ].value } | ||
key={ key } | ||
textColor={ colorSettings[ key ].value } | ||
{ ...contrastCheckerProps } | ||
/> | ||
) ) } | ||
) ) ) } | ||
{ typeof panelChildren === 'function' ? | ||
panelChildren( components ) : | ||
panelChildren } | ||
|
@@ -89,24 +95,35 @@ export default function __experimentalUseColors( | |
const createComponent = useMemo( | ||
() => | ||
memoize( | ||
( property, color, colorValue, customColor ) => ( { children } ) => | ||
( name, property, className, color, colorValue, customColor ) => ( { | ||
children, | ||
className: componentClassName = '', | ||
style: componentStyle = {}, | ||
} ) => | ||
// Clone children, setting the style property from the color configuration, | ||
// if not already set explicitly through props. | ||
Children.map( children, ( child ) => { | ||
let className = child.props.className; | ||
let style = child.props.style; | ||
let colorStyle = {}; | ||
if ( color ) { | ||
className = `${ child.props.className } has-${ kebabCase( | ||
color | ||
) }-${ kebabCase( property ) }`; | ||
style = { [ property ]: colorValue, ...child.props.style }; | ||
colorStyle = { [ property ]: colorValue }; | ||
} else if ( customColor ) { | ||
className = `${ child.props.className } has-${ kebabCase( property ) }`; | ||
style = { [ property ]: customColor, ...child.props.style }; | ||
colorStyle = { [ property ]: customColor }; | ||
} | ||
|
||
return cloneElement( child, { | ||
className, | ||
style, | ||
className: classnames( | ||
componentClassName, | ||
child.props.className, | ||
{ | ||
[ `has-${ kebabCase( color ) }-${ kebabCase( property ) }` ]: color, | ||
[ className || `has-${ kebabCase( name ) }` ]: color || customColor, | ||
} | ||
), | ||
style: { | ||
...colorStyle, | ||
...componentStyle, | ||
...( child.props.style || {} ), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
}, | ||
} ); | ||
} ), | ||
{ maxSize: colorConfigs.length } | ||
|
@@ -135,7 +152,7 @@ export default function __experimentalUseColors( | |
); | ||
|
||
return useMemo( () => { | ||
const colorSettings = []; | ||
const colorSettings = {}; | ||
|
||
const components = colorConfigs.reduce( ( acc, colorConfig ) => { | ||
if ( typeof colorConfig === 'string' ) { | ||
|
@@ -144,6 +161,7 @@ export default function __experimentalUseColors( | |
const { | ||
name, // E.g. 'backgroundColor'. | ||
property = name, // E.g. 'backgroundColor'. | ||
className, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would group this with |
||
|
||
panelLabel = startCase( name ), // E.g. 'Background Color'. | ||
componentName = panelLabel.replace( /\s/g, '' ), // E.g. 'BackgroundColor'. | ||
|
@@ -159,7 +177,9 @@ export default function __experimentalUseColors( | |
// when they are used as props for other components. | ||
const _color = colors.find( ( __color ) => __color.slug === color ); | ||
acc[ componentName ] = createComponent( | ||
name, | ||
property, | ||
className, | ||
color, | ||
_color && _color.color, | ||
attributes[ camelCase( `custom ${ name }` ) ] | ||
|
@@ -168,21 +188,20 @@ export default function __experimentalUseColors( | |
acc[ componentName ].color = color; | ||
acc[ componentName ].setColor = createSetColor( name, colors ); | ||
|
||
const newSettingIndex = | ||
colorSettings.push( { | ||
value: _color ? | ||
_color.color : | ||
attributes[ camelCase( `custom ${ name }` ) ], | ||
onChange: acc[ componentName ].setColor, | ||
label: panelLabel, | ||
colors, | ||
} ) - 1; | ||
colorSettings[ componentName ] = { | ||
value: _color ? | ||
_color.color : | ||
attributes[ camelCase( `custom ${ name }` ) ], | ||
onChange: acc[ componentName ].setColor, | ||
label: panelLabel, | ||
colors, | ||
}; | ||
// These settings will be spread over the `colors` in | ||
// `colorPanelProps`, so we need to unset the key here, | ||
// if not set to an actual value, to avoid overwriting | ||
// an actual value in `colorPanelProps`. | ||
if ( ! colors ) { | ||
delete colorSettings[ newSettingIndex ].colors; | ||
delete colorSettings[ componentName ].colors; | ||
} | ||
|
||
return acc; | ||
|
@@ -193,7 +212,7 @@ export default function __experimentalUseColors( | |
colorSettings, | ||
colorPanelProps, | ||
contrastCheckerProps, | ||
components: Object.values( components ), | ||
components, | ||
panelChildren, | ||
}; | ||
return { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.