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

UI components for WordPress.

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

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

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

import Button from '../button';
import { FlexItem, FlexBlock } from '../flex';
import AllInputControl from './all-input-control';
import InputControls from './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 { DEFAULT_VALUES, DEFAULT_VISUALIZER_VALUES, 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({
  id: idProp,
  inputProps = defaultInputProps,
  onChange = noop,
  onChangeShowVisualizer = noop,
  label = __('Box Control'),
  values: valuesProp,
  units,
  sides,
  resetValues = DEFAULT_VALUES
}) {
  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(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({ ...DEFAULT_VISUALIZER_VALUES,
      ...next
    });
  };

  const handleOnHoverOff = (next = {}) => {
    onChangeShowVisualizer({ ...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 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)), createElement(FlexItem, null, createElement(Button, {
    className: "component-box-control__reset-button",
    isSecondary: true,
    isSmall: true,
    onClick: handleOnReset,
    disabled: !isDirty
  }, __('Reset')))), 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))), !hasOneSide && createElement(FlexItem, null, createElement(LinkedButton, {
    onClick: toggleLinked,
    isLinked: isLinked
  }))), !isLinked && createElement(InputControls, inputControlProps));
}
BoxControl.__Visualizer = Visualizer;
//# sourceMappingURL=index.js.map