@wordpress/components/build/checkbox-control/index.js

UI components for WordPress.

"use strict";

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

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

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

var _icons = require("@wordpress/icons");

var _baseControl = _interopRequireDefault(require("../base-control"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function CheckboxControl({
  label,
  className,
  heading,
  checked,
  help,
  onChange,
  ...props
}) {
  if (heading) {
    (0, _deprecated.default)('`heading` prop in `CheckboxControl`', {
      alternative: 'a separate element to implement a heading',
      plugin: 'Gutenberg'
    });
  }

  const instanceId = (0, _compose.useInstanceId)(CheckboxControl);
  const id = `inspector-checkbox-control-${instanceId}`;

  const onChangeValue = event => onChange(event.target.checked);

  return (0, _element.createElement)(_baseControl.default, {
    label: heading,
    id: id,
    help: help,
    className: (0, _classnames.default)('components-checkbox-control', className)
  }, (0, _element.createElement)("span", {
    className: "components-checkbox-control__input-container"
  }, (0, _element.createElement)("input", (0, _extends2.default)({
    id: id,
    className: "components-checkbox-control__input",
    type: "checkbox",
    value: "1",
    onChange: onChangeValue,
    checked: checked,
    "aria-describedby": !!help ? id + '__help' : undefined
  }, props)), checked ? (0, _element.createElement)(_icons.Icon, {
    icon: _icons.check,
    className: "components-checkbox-control__checked",
    role: "presentation"
  }) : null), (0, _element.createElement)("label", {
    className: "components-checkbox-control__label",
    htmlFor: id
  }, label));
}
//# sourceMappingURL=index.js.map