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

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { RangeControl, __experimentalParseUnit as parseUnit, __experimentalUseCustomUnits as useCustomUnits } from '@gechiui/components';
import { useState } from '@gechiui/element';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import AllInputControl from './all-input-control';
import InputControls from './input-controls';
import LinkedButton from './linked-button';
import useSetting from '../use-setting';
import { getAllValue, getAllUnit, hasDefinedValues, hasMixedValues } from './utils';
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.
 */

export default function BorderRadiusControl(_ref) {
  let {
    onChange,
    values
  } = _ref;
  const [isLinked, setIsLinked] = useState(!hasDefinedValues(values) || !hasMixedValues(values));
  const units = useCustomUnits({
    availableUnits: useSetting('spacing.units') || ['px', 'em', 'rem']
  });
  const unit = 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] = parseUnit(getAllValue(values));

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

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

  return createElement("fieldset", {
    className: "components-border-radius-control"
  }, createElement("legend", null, __('等比例')), createElement("div", {
    className: "components-border-radius-control__wrapper"
  }, isLinked ? createElement(Fragment, null, createElement(AllInputControl, {
    className: "components-border-radius-control__unit-control",
    values: values,
    min: MIN_BORDER_RADIUS_VALUE,
    onChange: onChange,
    unit: unit,
    units: units
  }), createElement(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
  })) : createElement(InputControls, {
    min: MIN_BORDER_RADIUS_VALUE,
    onChange: onChange,
    values: values || DEFAULT_VALUES,
    units: units
  }), createElement(LinkedButton, {
    onClick: toggleLinked,
    isLinked: isLinked
  })));
}
//# sourceMappingURL=index.js.map