@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 4.28 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/toggle-control/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedToggleControl({\n label,\n checked,\n help,\n className,\n onChange,\n disabled,\n // Prevent passing to internal component.\n __nextHasNoMarginBottom: _,\n ...additionalProps\n}, ref) {\n function onChangeToggle(event) {\n onChange(event.target.checked);\n }\n const instanceId = useInstanceId(ToggleControl);\n const id = `inspector-toggle-control-${instanceId}`;\n let describedBy, helpLabel;\n if (help) {\n if (typeof help === 'function') {\n // `help` as a function works only for controlled components where\n // `checked` is passed down from parent component. Uncontrolled\n // component can show only a static help label.\n if (checked !== undefined) {\n helpLabel = help(checked);\n }\n } else {\n helpLabel = help;\n }\n if (helpLabel) {\n describedBy = id + '__help';\n }\n }\n return /*#__PURE__*/_jsx(BaseControl, {\n id: id,\n help: helpLabel && /*#__PURE__*/_jsx(\"span\", {\n className: \"components-toggle-control__help\",\n children: helpLabel\n }),\n className: clsx('components-toggle-control', className),\n children: /*#__PURE__*/_jsxs(HStack, {\n justify: \"flex-start\",\n spacing: 2,\n children: [/*#__PURE__*/_jsx(FormToggle, {\n id: id,\n checked: checked,\n onChange: onChangeToggle,\n \"aria-describedby\": describedBy,\n disabled: disabled,\n ref: ref,\n ...additionalProps\n }), /*#__PURE__*/_jsx(FlexBlock, {\n as: \"label\",\n htmlFor: id,\n className: clsx('components-toggle-control__label', {\n 'is-disabled': disabled\n }),\n children: label\n })]\n })\n });\n}\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n * const [ value, setValue ] = useState( false );\n *\n * return (\n * <ToggleControl\n * label=\"Fixed Background\"\n * checked={ value }\n * onChange={ () => setValue( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport const ToggleControl = forwardRef(UnforwardedToggleControl);\nToggleControl.displayName = 'ToggleControl';\nexport default ToggleControl;"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA2B;AAC3B,qBAA8B;AAK9B,kBAA0B;AAC1B,yBAAuB;AACvB,0BAAwB;AACxB,qBAAuB;AACvB,yBAA2C;AAC3C,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA,yBAAyB;AAAA,EACzB,GAAG;AACL,GAAG,KAAK;AACN,WAAS,eAAe,OAAO;AAC7B,aAAS,MAAM,OAAO,OAAO;AAAA,EAC/B;AACA,QAAM,iBAAa,8BAAc,aAAa;AAC9C,QAAM,KAAK,4BAA4B,UAAU;AACjD,MAAI,aAAa;AACjB,MAAI,MAAM;AACR,QAAI,OAAO,SAAS,YAAY;AAI9B,UAAI,YAAY,QAAW;AACzB,oBAAY,KAAK,OAAO;AAAA,MAC1B;AAAA,IACF,OAAO;AACL,kBAAY;AAAA,IACd;AACA,QAAI,WAAW;AACb,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AACA,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,uCAAAD,KAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,eAAW,YAAAE,SAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,uCAAAH,KAAK,mBAAAI,SAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC,GAAgB,uCAAAJ,KAAK,uBAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,eAAW,YAAAE,SAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,oBAAgB,2BAAW,wBAAwB;AAChE,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
"names": ["_jsx", "BaseControl", "clsx", "_jsxs", "FormToggle"]
}