{"id":6404,"date":"2022-07-20T15:01:22","date_gmt":"2022-07-20T14:01:22","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=6404"},"modified":"2022-07-20T15:01:22","modified_gmt":"2022-07-20T14:01:22","slug":"react-modal-handling-wip","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-modal-handling-wip\/","title":{"rendered":"React Modal handling (WIP)"},"content":{"rendered":"\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"typescript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">import { Button, Modal } from \"antd\";\nimport { useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\ninterface ISelectorProps {\n    onSelected: (item?: string) => any;\n}\n\nexport function MyStringSelector(props: ISelectorProps): JSX.Element {\n    const { onSelected } = props;\n    return &lt;>\n        &lt;Button onClick={() => onSelected(\"A\")}>A&lt;\/Button>\n        &lt;Button onClick={() => onSelected(\"B\")}>B&lt;\/Button>\n        &lt;Button onClick={() => onSelected(\"C\")}>C&lt;\/Button>\n    &lt;\/>;\n}\n\ninterface IProps {\n    title: string | JSX.Element;\n    selector: JSX.Element;\n    onSelect: () => any;\n    onCancel: () => any;\n}\n\nexport function SelectorModal(props: IProps): JSX.Element {\n    const { title, selector, onSelect, onCancel } = props;\n    const [isModalVisible, setIsModalVisible] = useState(true);\n    const myRef = useRef(null);\n    function handleOk() {\n        onSelect();\n        unmount();\n    }\n    function handleCancel() {\n        onCancel();\n        unmount();\n    }\n    function unmount() {\n        setIsModalVisible(false);\n        if (!myRef.current) return;\n        setTimeout(() => ReactDOM.unmountComponentAtNode(myRef.current!), 500);\n    }\n    return &lt;div ref={myRef}>\n        &lt;Modal title={title} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>{selector}&lt;\/Modal>\n    &lt;\/div>\n}\n\nfunction selectAValue() {\n    return new Promise&lt;string | undefined>((resolve) => {\n        let selectedValue: string | undefined = undefined;\n        ReactDOM.createPortal(&lt;SelectorModal title=\"Selecteer een waarde\" onSelect={() => resolve(selectedValue)} onCancel={() => resolve(undefined)} selector={&lt;MyStringSelector onSelected={(x) => selectedValue = x} \/>} \/>, document.body);\n    });\n}\n\n\nasync function Test() {\n    const result = await selectAValue();\n    \/\/ if (result.selectedLine) {\n    \/\/     \/\/ set it!\n    \/\/ }\n}\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6404","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=6404"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6404\/revisions"}],"predecessor-version":[{"id":6405,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6404\/revisions\/6405"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=6404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=6404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=6404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}