@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 5.88 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/checkbox-control/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n * const [ isChecked, setChecked ] = useState( true );\n * return (\n * <CheckboxControl\n * label=\"Is author\"\n * help=\"Is the user a author or not?\"\n * checked={ isChecked }\n * onChange={ setChecked }\n * />\n * );\n * };\n * ```\n */\nexport function CheckboxControl(props) {\n const {\n // Prevent passing this to `input`.\n __nextHasNoMarginBottom: _,\n label,\n className,\n heading,\n checked,\n indeterminate,\n help,\n id: idProp,\n onChange,\n onClick,\n ...additionalProps\n } = props;\n if (heading) {\n deprecated('`heading` prop in `CheckboxControl`', {\n alternative: 'a separate element to implement a heading',\n since: '5.8'\n });\n }\n const [showCheckedIcon, setShowCheckedIcon] = useState(false);\n const [showIndeterminateIcon, setShowIndeterminateIcon] = useState(false);\n\n // Run the following callback every time the `ref` (and the additional\n // dependencies) change.\n const ref = useRefEffect(node => {\n if (!node) {\n return;\n }\n\n // It cannot be set using an HTML attribute.\n node.indeterminate = !!indeterminate;\n setShowCheckedIcon(node.matches(':checked'));\n setShowIndeterminateIcon(node.matches(':indeterminate'));\n }, [checked, indeterminate]);\n const id = useInstanceId(CheckboxControl, 'inspector-checkbox-control', idProp);\n const onChangeValue = event => onChange(event.target.checked);\n return /*#__PURE__*/_jsx(BaseControl, {\n label: heading,\n id: id,\n help: help && /*#__PURE__*/_jsx(\"span\", {\n className: \"components-checkbox-control__help\",\n children: help\n }),\n className: clsx('components-checkbox-control', className),\n children: /*#__PURE__*/_jsxs(HStack, {\n spacing: 0,\n justify: \"start\",\n alignment: \"top\",\n children: [/*#__PURE__*/_jsxs(\"span\", {\n className: \"components-checkbox-control__input-container\",\n children: [/*#__PURE__*/_jsx(\"input\", {\n ref: ref,\n id: id,\n className: \"components-checkbox-control__input\",\n type: \"checkbox\",\n value: \"1\",\n onChange: onChangeValue,\n checked: checked,\n \"aria-describedby\": !!help ? id + '__help' : undefined,\n onClick: event => {\n // Compat code for Safari to ensure that the checkbox is focused when clicked.\n event.currentTarget.focus();\n onClick?.(event);\n },\n ...additionalProps\n }), showIndeterminateIcon ? /*#__PURE__*/_jsx(Icon, {\n icon: reset,\n className: \"components-checkbox-control__indeterminate\",\n role: \"presentation\"\n }) : null, showCheckedIcon ? /*#__PURE__*/_jsx(Icon, {\n icon: check,\n className: \"components-checkbox-control__checked\",\n role: \"presentation\"\n }) : null]\n }), label && /*#__PURE__*/_jsx(\"label\", {\n className: \"components-checkbox-control__label\",\n htmlFor: id,\n children: label\n })]\n })\n });\n}\nexport default CheckboxControl;"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAyB;AACzB,qBAA4C;AAC5C,wBAAuB;AACvB,mBAAmC;AAKnC,0BAAwB;AACxB,qBAAuB;AACvB,yBAA2C;AAqBpC,SAAS,gBAAgB,OAAO;AACrC,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,MAAI,SAAS;AACX,0BAAAA,SAAW,uCAAuC;AAAA,MAChD,aAAa;AAAA,MACb,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AACA,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS,KAAK;AAC5D,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,yBAAS,KAAK;AAIxE,QAAM,UAAM,6BAAa,UAAQ;AAC/B,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAGA,SAAK,gBAAgB,CAAC,CAAC;AACvB,uBAAmB,KAAK,QAAQ,UAAU,CAAC;AAC3C,6BAAyB,KAAK,QAAQ,gBAAgB,CAAC;AAAA,EACzD,GAAG,CAAC,SAAS,aAAa,CAAC;AAC3B,QAAM,SAAK,8BAAc,iBAAiB,8BAA8B,MAAM;AAC9E,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,OAAO;AAC5D,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC,OAAO;AAAA,IACP;AAAA,IACA,MAAM,QAAqB,uCAAAD,KAAK,QAAQ;AAAA,MACtC,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,eAAW,YAAAE,SAAK,+BAA+B,SAAS;AAAA,IACxD,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,CAAc,uCAAAA,MAAM,QAAQ;AAAA,QACpC,WAAW;AAAA,QACX,UAAU,CAAc,uCAAAH,KAAK,SAAS;AAAA,UACpC;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX,MAAM;AAAA,UACN,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,UAC7C,SAAS,WAAS;AAEhB,kBAAM,cAAc,MAAM;AAC1B,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,GAAG;AAAA,QACL,CAAC,GAAG,wBAAqC,uCAAAA,KAAK,mBAAM;AAAA,UAClD,MAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAM;AAAA,QACR,CAAC,IAAI,MAAM,kBAA+B,uCAAAA,KAAK,mBAAM;AAAA,UACnD,MAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAM;AAAA,QACR,CAAC,IAAI,IAAI;AAAA,MACX,CAAC,GAAG,SAAsB,uCAAAA,KAAK,SAAS;AAAA,QACtC,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,2BAAQ;",
"names": ["deprecated", "_jsx", "BaseControl", "clsx", "_jsxs"]
}