@wordpress/components/build/angle-picker-control/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.AnglePickerControl = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _flex = require("../flex");
var _spacer = require("../spacer");
var _numberControl = _interopRequireDefault(require("../number-control"));
var _angleCircle = _interopRequireDefault(require("./angle-circle"));
var _anglePickerControlStyles = require("./styles/angle-picker-control-styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function UnforwardedAnglePickerControl(props, ref) {
  const {
    className,
    label = (0, _i18n.__)('Angle'),
    onChange,
    value,
    ...restProps
  } = props;
  const handleOnNumberChange = unprocessedValue => {
    if (onChange === undefined) {
      return;
    }
    const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
    onChange(inputValue);
  };
  const classes = (0, _clsx.default)('components-angle-picker-control', className);
  const unitText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_anglePickerControlStyles.UnitText, {
    children: "\xB0"
  });
  const [prefixedUnitText, suffixedUnitText] = (0, _i18n.isRTL)() ? [unitText, null] : [null, unitText];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_flex.Flex, {
    ...restProps,
    ref: ref,
    className: classes,
    gap: 2,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexBlock, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_numberControl.default, {
        __next40pxDefaultSize: true,
        label: label,
        className: "components-angle-picker-control__input-field",
        max: 360,
        min: 0,
        onChange: handleOnNumberChange,
        step: "1",
        value: value,
        spinControls: "none",
        prefix: prefixedUnitText,
        suffix: suffixedUnitText
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
      marginBottom: "1",
      marginTop: "auto",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_angleCircle.default, {
        "aria-hidden": "true",
        value: value,
        onChange: onChange
      })
    })]
  });
}

/**
 * `AnglePickerControl` is a React component to render a UI that allows users to
 * pick an angle. Users can choose an angle in a visual UI with the mouse by
 * dragging an angle indicator inside a circle or by directly inserting the
 * desired angle in a text field.
 *
 * ```jsx
 * import { useState } from '@wordpress/element';
 * import { AnglePickerControl } from '@wordpress/components';
 *
 * function Example() {
 *   const [ angle, setAngle ] = useState( 0 );
 *   return (
 *     <AnglePickerControl
 *       value={ angle }
 *       onChange={ setAngle }
 *     />
 *   );
 * }
 * ```
 */
const AnglePickerControl = exports.AnglePickerControl = (0, _element.forwardRef)(UnforwardedAnglePickerControl);
var _default = exports.default = AnglePickerControl;
//# sourceMappingURL=index.js.map