@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 4.23 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/higher-order/with-notices/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport { v4 as uuid } from 'uuid';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState, useMemo } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NoticeList from '../../notice/list';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Override the default edit UI to include notices if supported.\n *\n * Wrapping the original component with `withNotices` encapsulates the component\n * with the additional props `noticeOperations` and `noticeUI`.\n *\n * ```jsx\n * import { withNotices, Button } from '@wordpress/components';\n *\n * const MyComponentWithNotices = withNotices(\n * \t( { noticeOperations, noticeUI } ) => {\n * \t\tconst addError = () =>\n * \t\t\tnoticeOperations.createErrorNotice( 'Error message' );\n * \t\treturn (\n * \t\t\t<div>\n * \t\t\t\t{ noticeUI }\n * \t\t\t\t<Button variant=\"secondary\" onClick={ addError }>\n * \t\t\t\t\tAdd error\n * \t\t\t\t</Button>\n * \t\t\t</div>\n * \t\t);\n * \t}\n * );\n * ```\n *\n * @param OriginalComponent Original component.\n *\n * @return Wrapped component.\n */\nexport default createHigherOrderComponent(OriginalComponent => {\n function Component(props, ref) {\n const [noticeList, setNoticeList] = useState([]);\n const noticeOperations = useMemo(() => {\n const createNotice = notice => {\n const noticeToAdd = notice.id ? notice : {\n ...notice,\n id: uuid()\n };\n setNoticeList(current => [...current, noticeToAdd]);\n };\n return {\n createNotice,\n createErrorNotice: msg => {\n // @ts-expect-error TODO: Missing `id`, potentially a bug\n createNotice({\n status: 'error',\n content: msg\n });\n },\n removeNotice: id => {\n setNoticeList(current => current.filter(notice => notice.id !== id));\n },\n removeAllNotices: () => {\n setNoticeList([]);\n }\n };\n }, []);\n const propsOut = {\n ...props,\n noticeList,\n noticeOperations,\n noticeUI: noticeList.length > 0 && /*#__PURE__*/_jsx(NoticeList, {\n className: \"components-with-notices-ui\",\n notices: noticeList,\n onRemove: noticeOperations.removeNotice\n })\n };\n return isForwardRef ? /*#__PURE__*/_jsx(OriginalComponent, {\n ...propsOut,\n ref: ref\n }) : /*#__PURE__*/_jsx(OriginalComponent, {\n ...propsOut\n });\n }\n let isForwardRef;\n // @ts-expect-error - `render` will only be present when OriginalComponent was wrapped with forwardRef().\n const {\n render\n } = OriginalComponent;\n // Returns a forwardRef if OriginalComponent appears to be a forwardRef.\n if (typeof render === 'function') {\n isForwardRef = true;\n return forwardRef(Component);\n }\n return Component;\n}, 'withNotices');"],
"mappings": ";AAGA,SAAS,MAAM,YAAY;AAK3B,SAAS,YAAY,UAAU,eAAe;AAC9C,SAAS,kCAAkC;AAK3C,OAAO,gBAAgB;AACvB,SAAS,OAAO,YAAY;AA8B5B,IAAO,uBAAQ,2BAA2B,uBAAqB;AAC7D,WAAS,UAAU,OAAO,KAAK;AAC7B,UAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC,CAAC;AAC/C,UAAM,mBAAmB,QAAQ,MAAM;AACrC,YAAM,eAAe,YAAU;AAC7B,cAAM,cAAc,OAAO,KAAK,SAAS;AAAA,UACvC,GAAG;AAAA,UACH,IAAI,KAAK;AAAA,QACX;AACA,sBAAc,aAAW,CAAC,GAAG,SAAS,WAAW,CAAC;AAAA,MACpD;AACA,aAAO;AAAA,QACL;AAAA,QACA,mBAAmB,SAAO;AAExB,uBAAa;AAAA,YACX,QAAQ;AAAA,YACR,SAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,QACA,cAAc,QAAM;AAClB,wBAAc,aAAW,QAAQ,OAAO,YAAU,OAAO,OAAO,EAAE,CAAC;AAAA,QACrE;AAAA,QACA,kBAAkB,MAAM;AACtB,wBAAc,CAAC,CAAC;AAAA,QAClB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AACL,UAAM,WAAW;AAAA,MACf,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,UAAU,WAAW,SAAS,KAAkB,qBAAK,YAAY;AAAA,QAC/D,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU,iBAAiB;AAAA,MAC7B,CAAC;AAAA,IACH;AACA,WAAO,eAA4B,qBAAK,mBAAmB;AAAA,MACzD,GAAG;AAAA,MACH;AAAA,IACF,CAAC,IAAiB,qBAAK,mBAAmB;AAAA,MACxC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,MAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AAEJ,MAAI,OAAO,WAAW,YAAY;AAChC,mBAAe;AACf,WAAO,WAAW,SAAS;AAAA,EAC7B;AACA,SAAO;AACT,GAAG,aAAa;",
"names": []
}