@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 4.16 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": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAK9B,SAAS,iBAAiB;AAC1B,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;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,aAAa,cAAc,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,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,qBAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,sBAAM,QAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,qBAAK,YAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC,GAAgB,qBAAK,WAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,WAAW,KAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,gBAAgB,WAAW,wBAAwB;AAChE,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
"names": []
}