@gechiui/components/build-module/unit-control/unit-select-control.js

UI components for GeChiUI.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { noop } from 'lodash';
import classnames from 'classnames'; // eslint-disable-next-line no-restricted-imports

import { UnitSelect, UnitLabel } from './styles/unit-control-styles';
import { CSS_UNITS, hasUnits } from './utils';
export default function UnitSelectControl(_ref) {
  let {
    className,
    isUnitSelectTabbable: isTabbable = true,
    onChange = noop,
    size = 'default',
    unit = 'px',
    units = CSS_UNITS,
    ...props
  } = _ref;

  if (!units || !hasUnits(units) || (units === null || units === void 0 ? void 0 : units.length) === 1) {
    return createElement(UnitLabel, {
      className: "components-unit-control__unit-label",
      selectSize: size
    }, unit);
  }

  const handleOnChange = event => {
    const {
      value: unitValue
    } = event.target;
    const data = units.find(option => option.value === unitValue);
    onChange(unitValue, {
      event,
      data
    });
  };

  const classes = classnames('components-unit-control__select', className);
  return createElement(UnitSelect, _extends({
    className: classes,
    onChange: handleOnChange,
    selectSize: size,
    tabIndex: isTabbable ? undefined : -1,
    value: unit
  }, props), units.map(option => createElement("option", {
    value: option.value,
    key: option.value
  }, option.label)));
}
//# sourceMappingURL=unit-select-control.js.map