Modules: app/util/componentClassNameUtils

Members

---

<constant> DEFAULT_MODIFIERS :Array

A set of modifiers that will be appended to each component classname by default. Adds a 'cid-{props.cid}' class when the 'cid' prop is passed to a component.

Type:

• Array

Source:

• app/util/componentClassNameUtils.js, line 17

Methods

---

componentClassName(componentType, componentInstance, modifiers, additionalClasses)

Utility to generate a className for a non-functional React component.

It will add the following classes:

• The component name prefixed with the component type, dashified. For example, the component MyComponent with type atom will get the name atom-my-component
• If the cid prop is passed to the component, it will add an 'cid-{cid}' class
• Classes based on the modifiers argument. See description below

Parameters:

Name	Type	Description
componentType	string	The type of component. This will be used as a prefix for the component name.
componentInstance	object	The instance of a react component. In the render() function of a component, pass this as component instance.
modifiers	*	An object with modifiers may add additional classes. Can be of one of the following types: object An map of classes. The keys are class name strings (see below for syntax), and the values are conditions that determine if the classes are added. The condition can be either of the following: string A string with the name of a prop that should be truthy. For example, adding the string "foo.bar" results in the class only to be added when a prop foo is passed to the component that has a truthy property bar. To lookup properties on React state or context, simply prefix the string like so: "state.isActive", "context.foo.bar". To invert the behavior, prefix the string with a ! (for example, "!disabled") function A function that returns a boolean that determines if the class should be added. The function receives the following parameters: props the component props context the component context state the component state Array An Array that combines the above. All conditions in the array must be met in order for the class to be added. other When passing any other type the class will be added when the value is truthy string A string can be used as a shortcut for the object notation when the class name matches the prop name. For example, "isActive" will add an is-active class whenever a truthy isActive prop is passed to the component. Only the last property will be included in the class name, so "state.input.hasFocus" will result in a has-focus class to be added whenever there is an object input on the component state with a truthy property hasFocus. function A function that returns a class or an array of classes to add. Receives the following parameters: props the component props context the component context state the component state Array An array that combines multiple of the types above syntax for class names all class names provided to the modifier parameter will be converted to lowercase-with-dashes. A classname can include dynamic property values. Wrapping a prop in curly braces will cause the value to be inserted automatically. For example: "type-{type}", "color-{state.color}", "{context.theme}-theme". If one of the properties is undefined or falsy, the class will not be added.
additionalClasses	Array.<string>	An array of additional classes to add to the list of classnames. This parameter is deprecated and included for backwards compatibility. It is recommended to add the following modifier instead: () => (['foo', 'bar'])

Source:

• app/util/componentClassNameUtils.js, line 24

Returns:

A className string

Type

string

Example

class MyComponent extends PureComponent {
  ...
  render() {
    return (
      <div className={componentClassName(
        ComponentType.ATOM, this, ['isActive', 'color-{color}']
      )}>
        ...
      </div>
    );
  }
}

MyComponent.propTypes = {
  isActive: PropTypes.bool,
  color: PropTypes.string.isRequired,
}

---

componentClassNameProp()

Alternative syntax for componentClassName. See componentClassName for a description of the parameters.

Source:

• app/util/componentClassNameUtils.js, line 124

Returns:

The className string wrapped in an object.

Type

object

Example

class MyComponent extends PureComponent {
  ...
  render() {
    return (
      <div {...componentClassNameProp(ComponentType.ATOM, this, ['isActive', 'color-{color}'])}>
        ...
      </div>
    );
  }
}

MyComponent.propTypes = {
  isActive: PropTypes.bool,
  color: PropTypes.string.isRequired,
}

---

functionalComponentClassName(componentType, componentName, props, modifiers, additionalClasses, context)

Utility to generate a className for a functional React component. It is recommended to use the withFunctionalClassName util instead, which has a more compact syntax.

It will add the following classes:

• The component name prefixed with the component type, dashified. For example, the component MyComponent with type atom will get the name atom-my-component
• If the cid prop is passed to the component, it will add an 'cid-{cid}' class
• Classes based on the modifiers argument. See description below

Parameters:

Name	Type	Description
componentType	string	The type of component. This will be used as a prefix for the component name.
componentName	string	The name of the component. This is used to generate the main class and should exactly match the name of the component. It will be automatically converted to lowercase-with-dashes
props	object	The props passed to the component. This is used for processing the modifiers
modifiers	*	An object with modifiers may add additional classes. Can be of one of the following types: object An map of classes. The keys are class name strings (see below for syntax), and the values are conditions that determine if the classes are added. The condition can be either of the following: string A string with the name of a prop that should be truthy. For example, adding the string "foo.bar" results in the class only to be added when a prop foo is passed to the component that has a truthy property bar. To lookup properties on React state or context, simply prefix the string like so: "state.isActive", "context.foo.bar". To invert the behavior, prefix the string with a ! (for example, "!disabled") function A function that returns a boolean that determines if the class should be added. The function receives the following parameters: props the component props context the component context state the component state Array An Array that combines the above. All conditions in the array must be met in order for the class to be added. other When passing any other type the class will be added when the value is truthy string A string can be used as a shortcut for the object notation when the class name matches the prop name. For example, "isActive" will add an is-active class whenever a truthy isActive prop is passed to the component. Only the last property will be included in the class name, so "state.input.hasFocus" will result in a has-focus class to be added whenever there is an object input on the component state with a truthy property hasFocus. function A function that returns a class or an array of classes to add. Receives the following parameters: props the component props context the component context state the component state Array An array that combines multiple of the types above syntax for class names all class names provided to the modifier parameter will be converted to lowercase-with-dashes. A classname can include dynamic property values. Wrapping a prop in curly braces will cause the value to be inserted automatically. For example: "type-{type}", "color-{state.color}", "{context.theme}-theme". If one of the properties is undefined or falsy, the class will not be added.
additionalClasses	Array.<string>	An array of additional classes to add to the list of classnames. This parameter is deprecated and included for backwards compatibility. It is recommended to add the following modifier instead: () => (['foo', 'bar'])
context		The context passed to the component. This is used for processing any modifiers that use context.

Deprecated:

• Yes

Source:

• app/util/componentClassNameUtils.js, line 158

Returns:

A className string

Type

string

Example

const MyComponent = (props, context) => {
  ...
  return (
    <div className={functionalComponentClassName(
      ComponentType.ATOM, 'MyComponent', props, ['isActive', 'color-{color}']
    )}>
      ...
    </div>
  );
};

MyComponent.propTypes = {
  isActive: PropTypes.bool,
  color: PropTypes.string.isRequired,
}

---

withFunctionalClassName(componentType [, componentName] [, modifiers])

Utility to generate a className for a functional React component. This utility will return a function that will enhance a component by providing a className string as a third parameter. See the example below for usage.

Parameters:

Name	Type	Argument	Description
componentType	string		The type of component. This will be used as a prefix for the component name.
componentName	string	<optional>	The name of the component. This is used to generate the main class and should exactly match the name of the component. It will be automatically converted to lowercase-with-dashes. note: This parameter is not really optional, but is marked as such for usage with WP_COMPONENT_DEF, which acts as 2 parameters in 1.
modifiers	*	<optional>	An object with modifiers may add additional classes. Can be of one of the following types: object An map of classes. The keys are class name strings (see below for syntax), and the values are conditions that determine if the classes are added. The condition can be either of the following: string A string with the name of a prop that should be truthy. For example, adding the string "foo.bar" results in the class only to be added when a prop foo is passed to the component that has a truthy property bar. To lookup properties on React state or context, simply prefix the string like so: "state.isActive", "context.foo.bar". To invert the behavior, prefix the string with a ! (for example, "!disabled") function A function that returns a boolean that determines if the class should be added. The function receives the following parameters: props the component props context the component context state the component state Array An Array that combines the above. All conditions in the array must be met in order for the class to be added. other When passing any other type the class will be added when the value is truthy string A string can be used as a shortcut for the object notation when the class name matches the prop name. For example, "isActive" will add an is-active class whenever a truthy isActive prop is passed to the component. Only the last property will be included in the class name, so "state.input.hasFocus" will result in a has-focus class to be added whenever there is an object input on the component state with a truthy property hasFocus. function A function that returns a class or an array of classes to add. Receives the following parameters: props the component props context the component context state the component state Array An array that combines multiple of the types above syntax for class names all class names provided to the modifier parameter will be converted to lowercase-with-dashes. A classname can include dynamic property values. Wrapping a prop in curly braces will cause the value to be inserted automatically. For example: "type-{type}", "color-{state.color}", "{context.theme}-theme". If one of the properties is undefined or falsy, the class will not be added.

Source:

• app/util/componentClassNameUtils.js, line 268

Returns:

A function that will enhance a functional component by passing the className string as a third parameter.

Example

const MyComponent = ({ foo, bar }, context, className) => (
  <div className={className}>
    ...
  </div>
);

MyComponent.propTypes = {
  isActive: PropTypes.bool,
  color: PropTypes.string.isRequired,
}

export default withFunctionalClassName(
  ComponentType.ATOM, 'MyComponent', ['isActive', 'color-{color}']
)(MyComponent);