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

UI components for GeChiUI.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { noop } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { useInstanceId } from '@gechiui/compose';
import { useState } from '@gechiui/element';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import Button from '../button';
import { FlexItem, FlexBlock } from '../flex';
import AllInputControl from './all-input-control';
import InputControls from './input-controls';
import AxialInputControls from './axial-input-controls';
import BoxControlIcon from './icon';
import { Text } from '../text';
import LinkedButton from './linked-button';
import Visualizer from './visualizer';
import { Root, Header, HeaderControlWrapper } from './styles/box-control-styles';
import { parseUnit } from '../unit-control/utils';
import { DEFAULT_VALUES, DEFAULT_VISUALIZER_VALUES, getInitialSide, isValuesMixed, isValuesDefined } from './utils';
import { useControlledState } from '../utils/hooks';
const defaultInputProps = {
  min: 0
};

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

export default function BoxControl(_ref) {
  let {
    id: idProp,
    inputProps = defaultInputProps,
    onChange = noop,
    onChangeShowVisualizer = noop,
    label = __('盒子控件'),
    values: valuesProp,
    units,
    sides,
    splitOnAxis = false,
    allowReset = true,
    resetValues = DEFAULT_VALUES
  } = _ref;
  const [values, setValues] = useControlledState(valuesProp, {
    fallback: DEFAULT_VALUES
  });
  const inputValues = values || DEFAULT_VALUES;
  const hasInitialValue = isValuesDefined(valuesProp);
  const hasOneSide = (sides === null || sides === void 0 ? void 0 : sides.length) === 1;
  const [isDirty, setIsDirty] = useState(hasInitialValue);
  const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide);
  const [side, setSide] = useState(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] = useState({
    top: parseUnit(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.top)[1],
    right: parseUnit(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.right)[1],
    bottom: parseUnit(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.bottom)[1],
    left: parseUnit(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.left)[1]
  });
  const id = useUniqueId(idProp);
  const headingId = `${id}-heading`;

  const toggleLinked = () => {
    setIsLinked(!isLinked);
    setSide(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({ ...DEFAULT_VISUALIZER_VALUES,
      ...next
    });
  };

  const handleOnHoverOff = function () {
    let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    onChangeShowVisualizer({ ...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 createElement(Root, {
    id: id,
    role: "region",
    "aria-labelledby": headingId
  }, createElement(Header, {
    className: "component-box-control__header"
  }, createElement(FlexItem, null, createElement(Text, {
    id: headingId,
    className: "component-box-control__label"
  }, label)), allowReset && createElement(FlexItem, null, createElement(Button, {
    className: "component-box-control__reset-button",
    isSecondary: true,
    isSmall: true,
    onClick: handleOnReset,
    disabled: !isDirty
  }, __('重置')))), createElement(HeaderControlWrapper, {
    className: "component-box-control__header-control-wrapper"
  }, createElement(FlexItem, null, createElement(BoxControlIcon, {
    side: side,
    sides: sides
  })), isLinked && createElement(FlexBlock, null, createElement(AllInputControl, _extends({
    "aria-label": label
  }, inputControlProps))), !isLinked && splitOnAxis && createElement(FlexBlock, null, createElement(AxialInputControls, inputControlProps)), !hasOneSide && createElement(FlexItem, null, createElement(LinkedButton, {
    onClick: toggleLinked,
    isLinked: isLinked
  }))), !isLinked && !splitOnAxis && createElement(InputControls, inputControlProps));
}
BoxControl.__Visualizer = Visualizer;
//# sourceMappingURL=index.js.map