@gechiui/block-editor/build/hooks/border-width.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BorderWidthEdit = void 0;

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

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

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

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

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

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const MIN_BORDER_WIDTH = 0;
/**
 * Inspector control for configuring border width property.
 *
 * @param {Object} props Block properties.
 *
 * @return {GCElement} Border width edit element.
 */

const BorderWidthEdit = props => {
  const {
    attributes: {
      borderColor,
      style
    },
    setAttributes
  } = props;
  const {
    width,
    color: customBorderColor,
    style: borderStyle
  } = (style === null || style === void 0 ? void 0 : style.border) || {};
  const [styleSelection, setStyleSelection] = (0, _element.useState)();
  const [colorSelection, setColorSelection] = (0, _element.useState)(); // Temporarily track previous border color & style selections to be able to
  // restore them when border width changes from zero value.

  (0, _element.useEffect)(() => {
    if (borderStyle !== 'none') {
      setStyleSelection(borderStyle);
    }
  }, [borderStyle]);
  (0, _element.useEffect)(() => {
    if (borderColor || customBorderColor) {
      setColorSelection({
        name: !!borderColor ? borderColor : undefined,
        color: !!customBorderColor ? customBorderColor : undefined
      });
    }
  }, [borderColor, customBorderColor]);

  const onChange = newWidth => {
    let newStyle = { ...style,
      border: { ...(style === null || style === void 0 ? void 0 : style.border),
        width: newWidth
      }
    }; // Used to clear named border color attribute.

    let borderPaletteColor = borderColor;
    const hasZeroWidth = parseFloat(newWidth) === 0; // Setting the border width explicitly to zero will also set the
    // border style to `none` and clear border color attributes.

    if (hasZeroWidth) {
      borderPaletteColor = undefined;
      newStyle.border.color = undefined;
      newStyle.border.style = 'none';
    } // Restore previous border style selection if width is now not zero and
    // border style was 'none'. This is to support changes to the UI which
    // change the border style UI to a segmented control without a "none"
    // option.


    if (!hasZeroWidth && borderStyle === 'none') {
      newStyle.border.style = styleSelection;
    } // Restore previous border color selection if width is no longer zero
    // and current border color is undefined.


    if (!hasZeroWidth && borderColor === undefined) {
      borderPaletteColor = colorSelection === null || colorSelection === void 0 ? void 0 : colorSelection.name;
      newStyle.border.color = colorSelection === null || colorSelection === void 0 ? void 0 : colorSelection.color;
    } // If width was reset, clean out undefined styles.


    if (newWidth === undefined || newWidth === '') {
      newStyle = (0, _utils.cleanEmptyObject)(newStyle);
    }

    setAttributes({
      borderColor: borderPaletteColor,
      style: newStyle
    });
  };

  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: (0, _useSetting.default)('spacing.units') || ['px', 'em', 'rem']
  });
  return (0, _element.createElement)(_components.__experimentalUnitControl, {
    value: width,
    label: (0, _i18n.__)('宽度'),
    min: MIN_BORDER_WIDTH,
    onChange: onChange,
    units: units
  });
};

exports.BorderWidthEdit = BorderWidthEdit;
//# sourceMappingURL=border-width.js.map