@gechiui/components/build-module/dimension-control/index.js

UI components for GeChiUI.

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { isFunction } from 'lodash';
/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */

import { Icon, SelectControl } from '../';
import { __ } from '@gechiui/i18n';
import { Fragment } from '@gechiui/element';
/**
 * Internal dependencies
 */

import sizesTable, { findSizeBySlug } from './sizes';
export function DimensionControl(props) {
  const {
    label,
    value,
    sizes = sizesTable,
    icon,
    onChange,
    className = ''
  } = props;

  const onChangeSpacingSize = val => {
    const theSize = findSizeBySlug(sizes, val);

    if (!theSize || value === theSize.slug) {
      onChange(undefined);
    } else if (isFunction(onChange)) {
      onChange(theSize.slug);
    }
  };

  const formatSizesAsOptions = theSizes => {
    const options = theSizes.map(_ref => {
      let {
        name,
        slug
      } = _ref;
      return {
        label: name,
        value: slug
      };
    });
    return [{
      label: __('默认'),
      value: ''
    }].concat(options);
  };

  const selectLabel = createElement(Fragment, null, icon && createElement(Icon, {
    icon: icon
  }), label);
  return createElement(SelectControl, {
    className: classnames(className, 'block-editor-dimension-control'),
    label: selectLabel,
    hideLabelFromVision: false,
    value: value,
    onChange: onChangeSpacingSize,
    options: formatSizesAsOptions(sizes)
  });
}
export default DimensionControl;
//# sourceMappingURL=index.js.map