@wordpress/components/build/box-control/index.js

UI components for WordPress.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "applyValueToSides", {
  enumerable: true,
  get: function () {
    return _utils2.applyValueToSides;
  }
});
exports.default = void 0;

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

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

var _compose = require("@wordpress/compose");

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

var _baseControl = require("../base-control");

var _button = _interopRequireDefault(require("../button"));

var _flex = require("../flex");

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

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

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

var _icon = _interopRequireDefault(require("./icon"));

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

var _boxControlStyles = require("./styles/box-control-styles");

var _utils = require("../unit-control/utils");

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

var _hooks = require("../utils/hooks");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const defaultInputProps = {
  min: 0
};

const noop = () => {};

function useUniqueId(idProp) {
  const instanceId = (0, _compose.useInstanceId)(BoxControl, 'inspector-box-control');
  return idProp || instanceId;
}
/**
 * BoxControl components let users set values for Top, Right, Bottom, and Left.
 * This can be used as an input control for values like `padding` or `margin`.
 *
 * ```jsx
 * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const Example = () => {
 * 	const [ values, setValues ] = useState( {
 * 		top: '50px',
 * 		left: '10%',
 * 		right: '10%',
 * 		bottom: '50px',
 * 	} );
 *
 * 	return (
 * 		<BoxControl
 * 			values={ values }
 * 			onChange={ ( nextValues ) => setValues( nextValues ) }
 * 		/>
 * 	);
 * };
 * ```
 */


function BoxControl(_ref) {
  let {
    id: idProp,
    inputProps = defaultInputProps,
    onChange = noop,
    label = (0, _i18n.__)('Box Control'),
    values: valuesProp,
    units,
    sides,
    splitOnAxis = false,
    allowReset = true,
    resetValues = _utils2.DEFAULT_VALUES,
    onMouseOver,
    onMouseOut
  } = _ref;
  const [values, setValues] = (0, _hooks.useControlledState)(valuesProp, {
    fallback: _utils2.DEFAULT_VALUES
  });
  const inputValues = values || _utils2.DEFAULT_VALUES;
  const hasInitialValue = (0, _utils2.isValuesDefined)(valuesProp);
  const hasOneSide = (sides === null || sides === void 0 ? void 0 : sides.length) === 1;
  const [isDirty, setIsDirty] = (0, _element.useState)(hasInitialValue);
  const [isLinked, setIsLinked] = (0, _element.useState)(!hasInitialValue || !(0, _utils2.isValuesMixed)(inputValues) || hasOneSide);
  const [side, setSide] = (0, _element.useState)((0, _utils2.getInitialSide)(isLinked, splitOnAxis)); // Tracking selected units via internal state allows filtering of CSS unit
  // only values from being saved while maintaining preexisting unit selection
  // behaviour. Filtering CSS only values prevents invalid style values.

  const [selectedUnits, setSelectedUnits] = (0, _element.useState)({
    top: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.top)[1],
    right: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.right)[1],
    bottom: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.bottom)[1],
    left: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.left)[1]
  });
  const id = useUniqueId(idProp);
  const headingId = `${id}-heading`;

  const toggleLinked = () => {
    setIsLinked(!isLinked);
    setSide((0, _utils2.getInitialSide)(!isLinked, splitOnAxis));
  };

  const handleOnFocus = (_event, _ref2) => {
    let {
      side: nextSide
    } = _ref2;
    setSide(nextSide);
  };

  const handleOnChange = nextValues => {
    onChange(nextValues);
    setValues(nextValues);
    setIsDirty(true);
  };

  const handleOnReset = () => {
    onChange(resetValues);
    setValues(resetValues);
    setSelectedUnits(resetValues);
    setIsDirty(false);
  };

  const inputControlProps = { ...inputProps,
    onChange: handleOnChange,
    onFocus: handleOnFocus,
    isLinked,
    units,
    selectedUnits,
    setSelectedUnits,
    sides,
    values: inputValues,
    onMouseOver,
    onMouseOut
  };
  return (0, _element.createElement)(_boxControlStyles.Root, {
    id: id,
    role: "group",
    "aria-labelledby": headingId
  }, (0, _element.createElement)(_boxControlStyles.Header, {
    className: "component-box-control__header"
  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_baseControl.BaseControl.VisualLabel, {
    id: headingId
  }, label)), allowReset && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_button.default, {
    className: "component-box-control__reset-button",
    variant: "secondary",
    isSmall: true,
    onClick: handleOnReset,
    disabled: !isDirty
  }, (0, _i18n.__)('Reset')))), (0, _element.createElement)(_boxControlStyles.HeaderControlWrapper, {
    className: "component-box-control__header-control-wrapper"
  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_icon.default, {
    side: side,
    sides: sides
  })), isLinked && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_allInputControl.default, (0, _extends2.default)({
    "aria-label": label
  }, inputControlProps))), !isLinked && splitOnAxis && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_axialInputControls.default, inputControlProps)), !hasOneSide && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_linkedButton.default, {
    onClick: toggleLinked,
    isLinked: isLinked
  }))), !isLinked && !splitOnAxis && (0, _element.createElement)(_inputControls.default, inputControlProps));
}

var _default = BoxControl;
exports.default = _default;
//# sourceMappingURL=index.js.map