@gechiui/block-editor/build/components/border-radius-control/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BorderRadiusControl;

var _element = require("@gechiui/element");

var _components = require("@gechiui/components");

var _i18n = require("@gechiui/i18n");

var _allInputControl = _interopRequireDefault(require("./all-input-control"));

var _inputControls = _interopRequireDefault(require("./input-controls"));

var _linkedButton = _interopRequireDefault(require("./linked-button"));

var _useSetting = _interopRequireDefault(require("../use-setting"));

var _utils = require("./utils");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const DEFAULT_VALUES = {
  topLeft: null,
  topRight: null,
  bottomLeft: null,
  bottomRight: null
};
const MIN_BORDER_RADIUS_VALUE = 0;
const MAX_BORDER_RADIUS_VALUES = {
  px: 100,
  em: 20,
  rem: 20
};
/**
 * Control to display border radius options.
 *
 * @param {Object}   props          Component props.
 * @param {Function} props.onChange Callback to handle onChange.
 * @param {Object}   props.values   Border radius values.
 *
 * @return {GCElement}              Custom border radius control.
 */

function BorderRadiusControl(_ref) {
  let {
    onChange,
    values
  } = _ref;
  const [isLinked, setIsLinked] = (0, _element.useState)(!(0, _utils.hasDefinedValues)(values) || !(0, _utils.hasMixedValues)(values));
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: (0, _useSetting.default)('spacing.units') || ['px', 'em', 'rem']
  });
  const unit = (0, _utils.getAllUnit)(values);
  const unitConfig = units && units.find(item => item.value === unit);
  const step = (unitConfig === null || unitConfig === void 0 ? void 0 : unitConfig.step) || 1;
  const [allValue] = (0, _components.__experimentalParseUnit)((0, _utils.getAllValue)(values));

  const toggleLinked = () => setIsLinked(!isLinked);

  const handleSliderChange = next => {
    onChange(next !== undefined ? `${next}${unit}` : undefined);
  };

  return (0, _element.createElement)("fieldset", {
    className: "components-border-radius-control"
  }, (0, _element.createElement)("legend", null, (0, _i18n.__)('等比例')), (0, _element.createElement)("div", {
    className: "components-border-radius-control__wrapper"
  }, isLinked ? (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_allInputControl.default, {
    className: "components-border-radius-control__unit-control",
    values: values,
    min: MIN_BORDER_RADIUS_VALUE,
    onChange: onChange,
    unit: unit,
    units: units
  }), (0, _element.createElement)(_components.RangeControl, {
    className: "components-border-radius-control__range-control",
    value: allValue,
    min: MIN_BORDER_RADIUS_VALUE,
    max: MAX_BORDER_RADIUS_VALUES[unit],
    initialPosition: 0,
    withInputField: false,
    onChange: handleSliderChange,
    step: step
  })) : (0, _element.createElement)(_inputControls.default, {
    min: MIN_BORDER_RADIUS_VALUE,
    onChange: onChange,
    values: values || DEFAULT_VALUES,
    units: units
  }), (0, _element.createElement)(_linkedButton.default, {
    onClick: toggleLinked,
    isLinked: isLinked
  })));
}
//# sourceMappingURL=index.js.map