wix-style-react/src/common/FluidColumns/FluidColumns.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';

import { dataHooks } from './constants';
import { st, classes, vars } from './FluidColumns.st.css';

/** A fluid columns component*/
class FluidColumns extends React.PureComponent {
  render() {
    const { dataHook, className, cols, children } = this.props;

    return (
      <div
        className={st(classes.root, className)}
        data-hook={dataHook}
        style={{ [vars.cols]: cols }}
      >
        {React.Children.map(children, (child, index) => {
          return (
            <div
              key={index}
              data-hook={dataHooks.item}
              className={classes.item}
            >
              {child}
            </div>
          );
        })}
      </div>
    );
  }
}

FluidColumns.displayName = 'FluidColumns';

FluidColumns.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** A css class to be applied to the component's root element */
  className: PropTypes.string,

  /** Define the number of columns. It is used for the grid in order to define how many features will be displayed in a row. The default value is 3. */
  cols: PropTypes.number,

  /** Children to render. */
  children: PropTypes.node.isRequired,
};

FluidColumns.defaultProps = {
  cols: 3,
};

export default FluidColumns;