@wordpress/components
Version:
UI components for WordPress.
126 lines (121 loc) • 9.25 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ToggleControl = void 0;
var _react = require("@emotion/react");
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _flex = require("../flex");
var _formToggle = _interopRequireDefault(require("../form-toggle"));
var _baseControl = _interopRequireDefault(require("../base-control"));
var _hStack = require("../h-stack");
var _utils = require("../utils");
var _space = require("../utils/space");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function UnforwardedToggleControl({
__nextHasNoMarginBottom,
label,
checked,
help,
className,
onChange,
disabled
}, ref) {
function onChangeToggle(event) {
onChange(event.target.checked);
}
const instanceId = (0, _compose.useInstanceId)(ToggleControl);
const id = `inspector-toggle-control-${instanceId}`;
const cx = (0, _utils.useCx)();
const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/(0, _react.css)({
marginBottom: (0, _space.space)(3)
}, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50LCBGb3J3YXJkZWRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgY2xzeCBmcm9tICdjbHN4JztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5pbXBvcnQgZGVwcmVjYXRlZCBmcm9tICdAd29yZHByZXNzL2RlcHJlY2F0ZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4QmxvY2sgfSBmcm9tICcuLi9mbGV4JztcbmltcG9ydCBGb3JtVG9nZ2xlIGZyb20gJy4uL2Zvcm0tdG9nZ2xlJztcbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL2NvbnRleHQvd29yZHByZXNzLWNvbXBvbmVudCc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUNvbnRyb2xQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5mdW5jdGlvbiBVbmZvcndhcmRlZFRvZ2dsZUNvbnRyb2woXG5cdHtcblx0XHRfX25leHRIYXNOb01hcmdpbkJvdHRvbSxcblx0XHRsYWJlbCxcblx0XHRjaGVja2VkLFxuXHRcdGhlbHAsXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdG9uQ2hhbmdlLFxuXHRcdGRpc2FibGVkLFxuXHR9OiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgVG9nZ2xlQ29udHJvbFByb3BzLCAnaW5wdXQnLCBmYWxzZSA+LFxuXHRyZWY6IEZvcndhcmRlZFJlZjwgSFRNTElucHV0RWxlbWVudCA+XG4pIHtcblx0ZnVuY3Rpb24gb25DaGFuZ2VUb2dnbGUoIGV2ZW50OiBDaGFuZ2VFdmVudDwgSFRNTElucHV0RWxlbWVudCA+ICkge1xuXHRcdG9uQ2hhbmdlKCBldmVudC50YXJnZXQuY2hlY2tlZCApO1xuXHR9XG5cdGNvbnN0IGluc3RhbmNlSWQgPSB1c2VJbnN0YW5jZUlkKCBUb2dnbGVDb250cm9sICk7XG5cdGNvbnN0IGlkID0gYGluc3BlY3Rvci10b2dnbGUtY29udHJvbC0keyBpbnN0YW5jZUlkIH1gO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblx0Y29uc3QgY2xhc3NlcyA9IGN4KFxuXHRcdCdjb21wb25lbnRzLXRvZ2dsZS1jb250cm9sJyxcblx0XHRjbGFzc05hbWUsXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBjc3MoIHsgbWFyZ2luQm90dG9tOiBzcGFjZSggMyApIH0gKVxuXHQpO1xuXG5cdGlmICggISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSApIHtcblx0XHRkZXByZWNhdGVkKCAnQm90dG9tIG1hcmdpbiBzdHlsZXMgZm9yIHdwLmNvbXBvbmVudHMuVG9nZ2xlQ29udHJvbCcsIHtcblx0XHRcdHNpbmNlOiAnNi43Jyxcblx0XHRcdHZlcnNpb246ICc3LjAnLFxuXHRcdFx0aGludDogJ1NldCB0aGUgYF9fbmV4dEhhc05vTWFyZ2luQm90dG9tYCBwcm9wIHRvIHRydWUgdG8gc3RhcnQgb3B0aW5nIGludG8gdGhlIG5ldyBzdHlsZXMsIHdoaWNoIHdpbGwgYmVjb21lIHRoZSBkZWZhdWx0IGluIGEgZnV0dXJlIHZlcnNpb24uJyxcblx0XHR9ICk7XG5cdH1cblxuXHRsZXQgZGVzY3JpYmVkQnksIGhlbHBMYWJlbDtcblx0aWYgKCBoZWxwICkge1xuXHRcdGlmICggdHlwZW9mIGhlbHAgPT09ICdmdW5jdGlvbicgKSB7XG5cdFx0XHQvLyBgaGVscGAgYXMgYSBmdW5jdGlvbiB3b3JrcyBvbmx5IGZvciBjb250cm9sbGVkIGNvbXBvbmVudHMgd2hlcmVcblx0XHRcdC8vIGBjaGVja2VkYCBpcyBwYXNzZWQgZG93biBmcm9tIHBhcmVudCBjb21wb25lbnQuIFVuY29udHJvbGxlZFxuXHRcdFx0Ly8gY29tcG9uZW50IGNhbiBzaG93IG9ubHkgYSBzdGF0aWMgaGVscCBsYWJlbC5cblx0XHRcdGlmICggY2hlY2tlZCAhPT0gdW5kZWZpbmVkICkge1xuXHRcdFx0XHRoZWxwTGFiZWwgPSBoZWxwKCBjaGVja2VkICk7XG5cdFx0XHR9XG5cdFx0fSBlbHNlIHtcblx0XHRcdGhlbHBMYWJlbCA9IGhlbHA7XG5cdFx0fVxuXHRcdGlmICggaGVscExhYmVsICkge1xuXHRcdFx0ZGVzY3JpYmVkQnkgPSBpZCArICdfX2hlbHAnO1xuXHRcdH1cblx0fVxuXG5cdHJldHVybiAoXG5cdFx0PEJhc2VDb250cm9sXG5cdFx0XHRpZD17IGlkIH1cblx0XHRcdGhlbHA9e1xuXHRcdFx0XHRoZWxwTGFiZWwgJiYgKFxuXHRcdFx0XHRcdDxzcGFuIGNsYXNzTmFtZT1cImNvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2xfX2hlbHBcIj5cblx0XHRcdFx0XHRcdHsgaGVscExhYmVsIH1cblx0XHRcdFx0XHQ8L3NwYW4+XG5cdFx0XHRcdClcblx0XHRcdH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b21cblx0XHQ+XG5cdFx0XHQ8SFN0YWNrIGp1c3RpZnk9XCJmbGV4LXN0YXJ0XCIgc3BhY2luZz17IDIgfT5cblx0XHRcdFx0PEZvcm1Ub2dnbGVcblx0XHRcdFx0XHRpZD17IGlkIH1cblx0XHRcdFx0XHRjaGVja2VkPXsgY2hlY2tlZCB9XG5cdFx0XHRcdFx0b25DaGFuZ2U9eyBvbkNoYW5nZVRvZ2dsZSB9XG5cdFx0XHRcdFx0YXJpYS1kZXNjcmliZWRieT17IGRlc2NyaWJlZEJ5IH1cblx0XHRcdFx0XHRkaXNhYmxlZD17IGRpc2FibGVkIH1cblx0XHRcdFx0XHRyZWY9eyByZWYgfVxuXHRcdFx0XHQvPlxuXHRcdFx0XHQ8RmxleEJsb2NrXG5cdFx0XHRcdFx0YXM9XCJsYWJlbFwiXG5cdFx0XHRcdFx0aHRtbEZvcj17IGlkIH1cblx0XHRcdFx0XHRjbGFzc05hbWU9eyBjbHN4KCAnY29tcG9uZW50cy10b2dnbGUtY29udHJvbF9fbGFiZWwnLCB7XG5cdFx0XHRcdFx0XHQnaXMtZGlzYWJsZWQnOiBkaXNhYmxlZCxcblx0XHRcdFx0XHR9ICkgfVxuXHRcdFx0XHQ+XG5cdFx0XHRcdFx0eyBsYWJlbCB9XG5cdFx0XHRcdDwvRmxleEJsb2NrPlxuXHRcdFx0PC9IU3RhY2s+XG5cdFx0PC9CYXNlQ29udHJvbD5cblx0KTtcbn1cblxuLyoqXG4gKiBUb2dnbGVDb250cm9sIGlzIHVzZWQgdG8gZ2VuZXJhdGUgYSB0b2dnbGUgdXNlciBpbnRlcmZhY2UuXG4gKlxuICogYGBganN4XG4gKiBpbXBvcnQgeyBUb2dnbGVDb250cm9sIH0gZnJvbSAnQHdvcmRwcmVzcy9jb21wb25lbnRzJztcbiAqIGltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbiAqXG4gKiBjb25zdCBNeVRvZ2dsZUNvbnRyb2wgPSAoKSA9PiB7XG4gKiAgIGNvbnN0IFsgdmFsdWUsIHNldFZhbHVlIF0gPSB1c2VTdGF0ZSggZmFsc2UgKTtcbiAqXG4gKiAgIHJldHVybiAoXG4gKiAgICAgPFRvZ2dsZUNvbnRyb2xcbiAqICAgICAgIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG4gKiAgICAgICBsYWJlbD1cIkZpeGVkIEJhY2tncm91bmRcIlxuICogICAgICAgY2hlY2tlZD17IHZhbHVlIH1cbiAqICAgICAgIG9uQ2hhbmdlPXsgKCkgPT4gc2V0VmFsdWUoICggc3RhdGUgKSA9PiAhIHN0YXRlICkgfVxuICogICAgIC8+XG4gKiAgICk7XG4gKiB9O1xuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBUb2dnbGVDb250cm9sID0gZm9yd2FyZFJlZiggVW5mb3J3YXJkZWRUb2dnbGVDb250cm9sICk7XG5cbmV4cG9ydCBkZWZhdWx0IFRvZ2dsZUNvbnRyb2w7XG4iXX0= */"));
if (!__nextHasNoMarginBottom) {
(0, _deprecated.default)('Bottom margin styles for wp.components.ToggleControl', {
since: '6.7',
version: '7.0',
hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
});
}
let describedBy, helpLabel;
if (help) {
if (typeof help === 'function') {
// `help` as a function works only for controlled components where
// `checked` is passed down from parent component. Uncontrolled
// component can show only a static help label.
if (checked !== undefined) {
helpLabel = help(checked);
}
} else {
helpLabel = help;
}
if (helpLabel) {
describedBy = id + '__help';
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
id: id,
help: helpLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "components-toggle-control__help",
children: helpLabel
}),
className: classes,
__nextHasNoMarginBottom: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
justify: "flex-start",
spacing: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_formToggle.default, {
id: id,
checked: checked,
onChange: onChangeToggle,
"aria-describedby": describedBy,
disabled: disabled,
ref: ref
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexBlock, {
as: "label",
htmlFor: id,
className: (0, _clsx.default)('components-toggle-control__label', {
'is-disabled': disabled
}),
children: label
})]
})
});
}
/**
* ToggleControl is used to generate a toggle user interface.
*
* ```jsx
* import { ToggleControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const MyToggleControl = () => {
* const [ value, setValue ] = useState( false );
*
* return (
* <ToggleControl
* __nextHasNoMarginBottom
* label="Fixed Background"
* checked={ value }
* onChange={ () => setValue( ( state ) => ! state ) }
* />
* );
* };
* ```
*/
const ToggleControl = exports.ToggleControl = (0, _element.forwardRef)(UnforwardedToggleControl);
var _default = exports.default = ToggleControl;
//# sourceMappingURL=index.js.map