@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
});
exports.default = BoxControl;

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

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

var _lodash = require("lodash");

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

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

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

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

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

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

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

var _text = require("../text");

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

var _visualizer = _interopRequireDefault(require("./visualizer"));

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

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

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

function useUniqueId(idProp) {
  const instanceId = (0, _compose.useInstanceId)(BoxControl, 'inspector-box-control');
  return idProp || instanceId;
}

function BoxControl({
  id: idProp,
  inputProps = defaultInputProps,
  onChange = _lodash.noop,
  onChangeShowVisualizer = _lodash.noop,
  label = (0, _i18n.__)('Box Control'),
  values: valuesProp,
  units,
  sides,
  resetValues = _utils.DEFAULT_VALUES
}) {
  const [values, setValues] = (0, _hooks.useControlledState)(valuesProp, {
    fallback: _utils.DEFAULT_VALUES
  });
  const inputValues = values || _utils.DEFAULT_VALUES;
  const hasInitialValue = (0, _utils.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, _utils.isValuesMixed)(inputValues) || hasOneSide);
  const [side, setSide] = (0, _element.useState)(isLinked ? 'all' : 'top');
  const id = useUniqueId(idProp);
  const headingId = `${id}-heading`;

  const toggleLinked = () => {
    setIsLinked(!isLinked);
    setSide(!isLinked ? 'all' : 'top');
  };

  const handleOnFocus = (event, {
    side: nextSide
  }) => {
    setSide(nextSide);
  };

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

  const handleOnHoverOn = (next = {}) => {
    onChangeShowVisualizer({ ..._utils.DEFAULT_VISUALIZER_VALUES,
      ...next
    });
  };

  const handleOnHoverOff = (next = {}) => {
    onChangeShowVisualizer({ ..._utils.DEFAULT_VISUALIZER_VALUES,
      ...next
    });
  };

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

  const inputControlProps = { ...inputProps,
    onChange: handleOnChange,
    onFocus: handleOnFocus,
    onHoverOn: handleOnHoverOn,
    onHoverOff: handleOnHoverOff,
    isLinked,
    units,
    sides,
    values: inputValues
  };
  return (0, _element.createElement)(_boxControlStyles.Root, {
    id: id,
    role: "region",
    "aria-labelledby": headingId
  }, (0, _element.createElement)(_boxControlStyles.Header, {
    className: "component-box-control__header"
  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_text.Text, {
    id: headingId,
    className: "component-box-control__label"
  }, label)), (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_button.default, {
    className: "component-box-control__reset-button",
    isSecondary: true,
    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))), !hasOneSide && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_linkedButton.default, {
    onClick: toggleLinked,
    isLinked: isLinked
  }))), !isLinked && (0, _element.createElement)(_inputControls.default, inputControlProps));
}

BoxControl.__Visualizer = _visualizer.default;
//# sourceMappingURL=index.js.map