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

UI components for GeChiUI.

"use strict";

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

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

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

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

var _lodash = require("lodash");

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

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

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 _text = require("../text");

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

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

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

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

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

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

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

function BoxControl(_ref) {
  let {
    id: idProp,
    inputProps = defaultInputProps,
    onChange = _lodash.noop,
    onChangeShowVisualizer = _lodash.noop,
    label = (0, _i18n.__)('盒子控件'),
    values: valuesProp,
    units,
    sides,
    splitOnAxis = false,
    allowReset = true,
    resetValues = _utils2.DEFAULT_VALUES
  } = _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.parseUnit)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.top)[1],
    right: (0, _utils.parseUnit)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.right)[1],
    bottom: (0, _utils.parseUnit)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.bottom)[1],
    left: (0, _utils.parseUnit)(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 handleOnHoverOn = function () {
    let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    onChangeShowVisualizer({ ..._utils2.DEFAULT_VISUALIZER_VALUES,
      ...next
    });
  };

  const handleOnHoverOff = function () {
    let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    onChangeShowVisualizer({ ..._utils2.DEFAULT_VISUALIZER_VALUES,
      ...next
    });
  };

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

  const inputControlProps = { ...inputProps,
    onChange: handleOnChange,
    onFocus: handleOnFocus,
    onHoverOn: handleOnHoverOn,
    onHoverOff: handleOnHoverOff,
    isLinked,
    units,
    selectedUnits,
    setSelectedUnits,
    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)), allowReset && (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.__)('重置')))), (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));
}

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