@wordpress/block-library/build/form-input/edit.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function InputFieldBlock({
  attributes,
  setAttributes,
  className
}) {
  const {
    type,
    name,
    label,
    inlineLabel,
    required,
    placeholder,
    value
  } = attributes;
  const blockProps = (0, _blockEditor.useBlockProps)();
  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
  const ref = (0, _element.useRef)();
  const TagName = type === 'textarea' ? 'textarea' : 'input';
  const borderProps = (0, _blockEditor.__experimentalUseBorderProps)(attributes);
  const colorProps = (0, _blockEditor.__experimentalUseColorProps)(attributes);
  if (ref.current) {
    ref.current.focus();
  }

  // Note: radio inputs aren't implemented yet.
  const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
  const controls = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: ['hidden' !== type && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
        label: (0, _i18n.__)('Settings'),
        resetAll: () => {
          setAttributes({
            inlineLabel: false,
            required: false
          });
        },
        dropdownMenuProps: dropdownMenuProps,
        children: ['checkbox' !== type && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          label: (0, _i18n.__)('Inline label'),
          hasValue: () => !!inlineLabel,
          onDeselect: () => setAttributes({
            inlineLabel: false
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
            __nextHasNoMarginBottom: true,
            label: (0, _i18n.__)('Inline label'),
            checked: inlineLabel,
            onChange: newVal => {
              setAttributes({
                inlineLabel: newVal
              });
            }
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          label: (0, _i18n.__)('Required'),
          hasValue: () => !!required,
          onDeselect: () => setAttributes({
            required: false
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
            __nextHasNoMarginBottom: true,
            label: (0, _i18n.__)('Required'),
            checked: required,
            onChange: newVal => {
              setAttributes({
                required: newVal
              });
            }
          })
        })]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
      group: "advanced",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        autoComplete: "off",
        label: (0, _i18n.__)('Name'),
        value: name,
        onChange: newVal => {
          setAttributes({
            name: newVal
          });
        },
        help: (0, _i18n.__)('Affects the "name" attribute of the input element, and is used as a name for the form submission results.')
      })
    })]
  });
  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
    tagName: "span",
    className: "wp-block-form-input__label-content",
    value: label,
    onChange: newLabel => setAttributes({
      label: newLabel
    }),
    "aria-label": label ? (0, _i18n.__)('Label') : (0, _i18n.__)('Empty label'),
    "data-empty": !label,
    placeholder: (0, _i18n.__)('Type the label for this input')
  });
  if ('hidden' === type) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [controls, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
        type: "hidden",
        className: (0, _clsx.default)(className, 'wp-block-form-input__input', colorProps.className, borderProps.className),
        "aria-label": (0, _i18n.__)('Value'),
        value: value,
        onChange: event => setAttributes({
          value: event.target.value
        })
      })]
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ...blockProps,
    children: [controls, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
      className: (0, _clsx.default)('wp-block-form-input__label', {
        'is-label-inline': inlineLabel || 'checkbox' === type
      }),
      children: [!isCheckboxOrRadio && content, /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
        type: 'textarea' === type ? undefined : type,
        className: (0, _clsx.default)(className, 'wp-block-form-input__input', colorProps.className, borderProps.className),
        "aria-label": (0, _i18n.__)('Optional placeholder text')
        // We hide the placeholder field's placeholder when there is a value. This
        // stops screen readers from reading the placeholder field's placeholder
        // which is confusing.
        ,
        placeholder: placeholder ? undefined : (0, _i18n.__)('Optional placeholder…'),
        value: placeholder,
        onChange: event => setAttributes({
          placeholder: event.target.value
        }),
        "aria-required": required,
        style: {
          ...borderProps.style,
          ...colorProps.style
        }
      }), isCheckboxOrRadio && content]
    })]
  });
}
var _default = exports.default = InputFieldBlock;
//# sourceMappingURL=edit.js.map