From e3fa2da89876932c7cded7ca16905198cde1967f Mon Sep 17 00:00:00 2001 From: Derrick Koo Date: Fri, 21 May 2021 09:35:14 -0600 Subject: [PATCH] refactor: use AutocompleteWithSuggestions from newspack-components (#56) --- package-lock.json | 369 +++++++++++++++++++++++------- package.json | 2 +- src/blocks/list-container/edit.js | 16 +- src/blocks/listing/edit.js | 49 +++- src/blocks/listing/editor.scss | 23 -- src/components/index.js | 1 - src/components/query-controls.js | 150 ------------ 7 files changed, 332 insertions(+), 278 deletions(-) delete mode 100644 src/components/query-controls.js diff --git a/package-lock.json b/package-lock.json index 800ea376..d7a25b2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1578,6 +1578,14 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, + "@emotion/native": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/native/-/native-10.0.27.tgz", + "integrity": "sha512-3qxR2XFizGfABKKbX9kAYc0PHhKuCEuyxshoq3TaMEbi9asWHdQVChg32ULpblm4XAf9oxaitAU7J9SfdwFxtw==", + "requires": { + "@emotion/primitives-core": "10.0.27" + } + }, "@emotion/primitives-core": { "version": "10.0.27", "resolved": "https://registry.npmjs.org/@emotion/primitives-core/-/primitives-core-10.0.27.tgz", @@ -1974,14 +1982,14 @@ } }, "@material-ui/core": { - "version": "4.11.3", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz", - "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==", + "version": "4.11.4", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz", + "integrity": "sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==", "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.11.3", + "@material-ui/styles": "^4.11.4", "@material-ui/system": "^4.11.3", - "@material-ui/types": "^5.1.0", + "@material-ui/types": "5.1.0", "@material-ui/utils": "^4.11.2", "@types/react-transition-group": "^4.2.0", "clsx": "^1.0.4", @@ -2001,13 +2009,13 @@ } }, "@material-ui/styles": { - "version": "4.11.3", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz", - "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==", + "version": "4.11.4", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", + "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==", "requires": { "@babel/runtime": "^7.4.4", "@emotion/hash": "^0.8.0", - "@material-ui/types": "^5.1.0", + "@material-ui/types": "5.1.0", "@material-ui/utils": "^4.11.2", "clsx": "^1.0.4", "csstype": "^2.5.2", @@ -7025,6 +7033,59 @@ } } }, + "@wp-g2/create-styles": { + "version": "0.0.140", + "resolved": "https://registry.npmjs.org/@wp-g2/create-styles/-/create-styles-0.0.140.tgz", + "integrity": "sha512-/60DxWjCAhsoYOqY7aiHVbkTAF+L6qZIyHyH50oNs9FTVkcRLHQFSC0kHgAam+Z9K3eImQ7hM52wfBDqae0q2Q==", + "requires": { + "@emotion/core": "^10.1.1", + "@emotion/is-prop-valid": "^0.8.8", + "@wp-g2/utils": "^0.0.140", + "create-emotion": "^10.0.27", + "emotion": "^10.0.27", + "emotion-theming": "^10.0.27", + "lodash": "^4.17.19", + "mitt": "^2.1.0", + "rtlcss": "^2.6.2", + "styled-griddie": "^0.1.3" + }, + "dependencies": { + "@wp-g2/utils": { + "version": "0.0.140", + "resolved": "https://registry.npmjs.org/@wp-g2/utils/-/utils-0.0.140.tgz", + "integrity": "sha512-a4uYi/XQEDrOAIO3JUQ+L/oeSkgp+08pSy41xxQ1nIRHs7X+Du84X2EFQrvZfGBRuXuVlVuUIlN2e0IE8yUZKw==", + "requires": { + "copy-to-clipboard": "^3.3.1", + "create-emotion": "^10.0.27", + "deepmerge": "^4.2.2", + "fast-deep-equal": "^3.1.3", + "hoist-non-react-statics": "^3.3.2", + "json2mq": "^0.2.0", + "lodash": "^4.17.19", + "memize": "^1.1.0", + "react-merge-refs": "^1.1.0", + "react-resize-aware": "^3.1.0", + "reakit-warning": "^0.5.5", + "tinycolor2": "^1.4.2", + "use-enhanced-state": "^0.0.13", + "use-isomorphic-layout-effect": "^1.0.0" + } + }, + "reakit-utils": { + "version": "0.14.4", + "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.14.4.tgz", + "integrity": "sha512-jDEf/NmZVJ6fs10G16ifD+RFhQikSLN7VfjRHu0CPoUj4g6lFXd5PPcRXCY81qiqc9FVHjr2d2fmsw1hs6xUxA==" + }, + "reakit-warning": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.5.5.tgz", + "integrity": "sha512-OuP1r7rlSSJZsoLuc0CPA2ACPKnWO8HDbFktiiidbT67UjuX6udYV1AUsIgMJ8ado9K5gZGjPj7IB/GDYo9Yjg==", + "requires": { + "reakit-utils": "^0.14.4" + } + } + } + }, "@wp-g2/styles": { "version": "0.0.160", "resolved": "https://registry.npmjs.org/@wp-g2/styles/-/styles-0.0.160.tgz", @@ -10693,18 +10754,18 @@ } }, "dom-helpers": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", - "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "requires": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" }, "dependencies": { "csstype": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", - "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" } } }, @@ -15889,9 +15950,9 @@ }, "dependencies": { "csstype": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", - "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" } } }, @@ -17404,76 +17465,228 @@ "dev": true }, "newspack-components": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/newspack-components/-/newspack-components-1.4.0.tgz", - "integrity": "sha512-zDbPICE3PdqJFyeW9JfmrNx7rXYVra2V6n/X5uYW/ZVF9JQ7GpG8LxgS6J8HgSeMAhBfCOVbDgOEaGoCjJBXow==", - "requires": { - "@material-ui/core": "^4.8.2", - "@material-ui/icons": "^4.5.1", - "@wordpress/base-styles": "^1.0.0", - "@wordpress/components": "^7.3.1", - "@wordpress/element": "^2.3.0", - "@wordpress/i18n": "^3.11.0", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/newspack-components/-/newspack-components-1.5.1.tgz", + "integrity": "sha512-sl8Bwp8TWmQO+olAkzpwa+wQra6iMjYUQRotLQ2Yd+qp7jl8PEZYw8AjKnTXMZR8NsXWLWw+2F8pFV9OihLmoA==", + "requires": { + "@material-ui/core": "^4.11.2", + "@material-ui/icons": "^4.11.2", + "@wordpress/base-styles": "^1.6.0", + "@wordpress/components": "^12.0.6", + "@wordpress/element": "^2.19.0", + "@wordpress/i18n": "^3.17.0", "classnames": "^2.2.6", "lodash": "^4.17.20", - "react-router-dom": "^5.0.1" + "qs": "^6.9.6", + "react-router-dom": "^5.2.0" }, "dependencies": { "@wordpress/components": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-7.4.0.tgz", - "integrity": "sha512-riVey0Z5835YdPZLWFSAs/4Hzo0nr7WA/393mRXwGuUtkqdk7ia++5emKfhyaCLYbinVBd6366xFFfiFxxcsCA==", - "requires": { - "@babel/runtime": "^7.4.4", - "@wordpress/a11y": "^2.3.0", - "@wordpress/api-fetch": "^3.2.0", - "@wordpress/compose": "^3.3.0", - "@wordpress/dom": "^2.3.0", - "@wordpress/element": "^2.4.0", - "@wordpress/hooks": "^2.3.0", - "@wordpress/i18n": "^3.4.0", - "@wordpress/is-shallow-equal": "^1.3.0", - "@wordpress/keycodes": "^2.3.0", - "@wordpress/rich-text": "^3.3.0", - "@wordpress/url": "^2.6.0", + "version": "12.0.8", + "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-12.0.8.tgz", + "integrity": "sha512-sq0vs7Bm9yoF0Li3XpXUN6z7ggf72pPmqJd0u+DrAg0ZaPxYfCNCdazOHRXrc/0psyHF+xSTb5J8XpsE1DiWLQ==", + "requires": { + "@babel/runtime": "^7.12.5", + "@emotion/core": "^10.1.1", + "@emotion/css": "^10.0.22", + "@emotion/native": "^10.0.22", + "@emotion/styled": "^10.0.23", + "@wordpress/a11y": "^2.14.3", + "@wordpress/compose": "^3.24.5", + "@wordpress/date": "^3.13.1", + "@wordpress/deprecated": "^2.11.1", + "@wordpress/dom": "^2.16.2", + "@wordpress/element": "^2.19.1", + "@wordpress/hooks": "^2.11.1", + "@wordpress/i18n": "^3.18.0", + "@wordpress/icons": "^2.9.1", + "@wordpress/is-shallow-equal": "^3.0.1", + "@wordpress/keycodes": "^2.18.3", + "@wordpress/primitives": "^1.11.1", + "@wordpress/rich-text": "^3.24.8", + "@wordpress/warning": "^1.3.1", + "@wp-g2/components": "^0.0.140", + "@wp-g2/context": "^0.0.140", + "@wp-g2/styles": "^0.0.140", + "@wp-g2/utils": "^0.0.140", "classnames": "^2.2.5", - "clipboard": "^2.0.1", - "diff": "^3.5.0", "dom-scroll-into-view": "^1.2.1", - "lodash": "^4.17.11", - "memize": "^1.0.5", + "downshift": "^6.0.15", + "gradient-parser": "^0.1.5", + "highlight-words-core": "^1.2.2", + "lodash": "^4.17.19", + "memize": "^1.1.0", "moment": "^2.22.1", - "mousetrap": "^1.6.2", - "re-resizable": "^4.7.1", - "react-click-outside": "^3.0.0", + "re-resizable": "^6.4.0", "react-dates": "^17.1.1", + "react-merge-refs": "^1.0.0", + "react-resize-aware": "^3.1.0", + "react-spring": "^8.0.20", + "react-use-gesture": "^9.0.0", + "reakit": "^1.3.5", "rememo": "^3.0.0", - "tinycolor2": "^1.4.1", - "uuid": "^3.3.2" + "tinycolor2": "^1.4.2", + "uuid": "^8.3.0" } }, "@wordpress/is-shallow-equal": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.8.0.tgz", - "integrity": "sha512-OV3qJqP9LhjuOzt85TsyBwv+//CvC8Byf/81D3NmjPKlstLaD/bBCC5nBhH6dKAv4bShYtQ2Hmut+V4dZnOM1A==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-3.1.3.tgz", + "integrity": "sha512-eDLhfC4aaSgklzqwc6F/F4zmJVpTVTAvhqX+q0SP/8LPcP2HuKErPHVrEc75PMWqIutja2wJg98YSNPdewrj1w==", "requires": { - "@babel/runtime": "^7.8.3" + "@babel/runtime": "^7.13.10" } }, - "diff": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", - "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==" + "@wp-g2/components": { + "version": "0.0.140", + "resolved": "https://registry.npmjs.org/@wp-g2/components/-/components-0.0.140.tgz", + "integrity": "sha512-bychuhZ3wPSB457CHYcogoPQPlP/eUA9GoTo0Fv0rj7f44Gr9XlPoqVT+GQa3CmPnvSCAl1sjoe75Vkaoo/O1w==", + "requires": { + "@popperjs/core": "^2.5.4", + "@wp-g2/context": "^0.0.140", + "@wp-g2/styles": "^0.0.140", + "@wp-g2/utils": "^0.0.140", + "csstype": "^3.0.3", + "downshift": "^6.0.15", + "framer-motion": "^2.1.0", + "highlight-words-core": "^1.2.2", + "history": "^4.9.0", + "lodash": "^4.17.19", + "path-to-regexp": "^1.7.0", + "react-colorful": "4.4.4", + "react-textarea-autosize": "^8.2.0", + "react-use-gesture": "^9.0.0", + "reakit": "1.1.0" + }, + "dependencies": { + "reakit": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/reakit/-/reakit-1.1.0.tgz", + "integrity": "sha512-d/ERtwgBndBPsyPBPUl5jueyfFgsglIfQCnLMKuxM0PaWiIZ6Ys3XsYaNy/AaG8k46Ee5cQPMdRrR30nVcSToQ==", + "requires": { + "@popperjs/core": "^2.4.2", + "body-scroll-lock": "^3.0.2", + "reakit-system": "^0.13.0", + "reakit-utils": "^0.13.0", + "reakit-warning": "^0.4.0" + } + }, + "reakit-utils": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.13.1.tgz", + "integrity": "sha512-NBKgsot3tU91gZgK5MTInI/PR0T3kIsTmbU5MbGggSOcwU2dG/kbE8IrM2lC6ayCSL2W2QWkijT6kewdrIX7Gw==" + }, + "reakit-warning": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.4.1.tgz", + "integrity": "sha512-AgnRN6cf8DYBF/mK2JEMFVL67Sbon8fDbFy1kfm0EDibtGsMOQtsFYfozZL7TwmJ4yg68VMhg8tmPHchVQRrlg==", + "requires": { + "reakit-utils": "^0.13.1" + } + } + } }, - "re-resizable": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-4.11.0.tgz", - "integrity": "sha512-dye+7rERqNf/6mDT1iwps+4Gf42420xuZgygF33uX178DxffqcyeuHbBuJ382FIcB5iP6mMZOhfW7kI0uXwb/Q==" + "@wp-g2/context": { + "version": "0.0.140", + "resolved": "https://registry.npmjs.org/@wp-g2/context/-/context-0.0.140.tgz", + "integrity": "sha512-z32fxZ2tCVmYQC+wyyziyrhEvWBPFBQfUhUHF85JmTUPzQQeEPiLC3rgDAT0fUTFlJHinPJQq6871RDqFSwCUA==", + "requires": { + "@wp-g2/styles": "^0.0.140", + "@wp-g2/utils": "^0.0.140", + "lodash": "^4.17.19" + } }, - "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + "@wp-g2/styles": { + "version": "0.0.140", + "resolved": "https://registry.npmjs.org/@wp-g2/styles/-/styles-0.0.140.tgz", + "integrity": "sha512-wAvtqQOqX2zYpfEdVK4l4abH/hUUgw/+8+E5PvPgrsvqFg8IehNSksnjNF5/IloLRGAH70d8ytjMuMnUK8PVYA==", + "requires": { + "@wp-g2/create-styles": "^0.0.140", + "@wp-g2/utils": "^0.0.140" + } + }, + "@wp-g2/utils": { + "version": "0.0.140", + "resolved": "https://registry.npmjs.org/@wp-g2/utils/-/utils-0.0.140.tgz", + "integrity": "sha512-a4uYi/XQEDrOAIO3JUQ+L/oeSkgp+08pSy41xxQ1nIRHs7X+Du84X2EFQrvZfGBRuXuVlVuUIlN2e0IE8yUZKw==", + "requires": { + "copy-to-clipboard": "^3.3.1", + "create-emotion": "^10.0.27", + "deepmerge": "^4.2.2", + "fast-deep-equal": "^3.1.3", + "hoist-non-react-statics": "^3.3.2", + "json2mq": "^0.2.0", + "lodash": "^4.17.19", + "memize": "^1.1.0", + "react-merge-refs": "^1.1.0", + "react-resize-aware": "^3.1.0", + "reakit-warning": "^0.5.5", + "tinycolor2": "^1.4.2", + "use-enhanced-state": "^0.0.13", + "use-isomorphic-layout-effect": "^1.0.0" + } + }, + "csstype": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + }, + "downshift": { + "version": "6.1.3", + "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.3.tgz", + "integrity": "sha512-RA1MuaNcTbt0j+sVLhSs8R2oZbBXYAtdQP/V+uHhT3DoDteZzJPjlC+LQVm9T07Wpvo84QXaZtUCePLDTDwGXg==", + "requires": { + "@babel/runtime": "^7.13.10", + "compute-scroll-into-view": "^1.0.17", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + } + }, + "qs": { + "version": "6.10.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz", + "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==", + "requires": { + "side-channel": "^1.0.4" + } + }, + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + }, + "react-use-gesture": { + "version": "9.1.3", + "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.3.tgz", + "integrity": "sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==" + }, + "reakit-system": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.13.1.tgz", + "integrity": "sha512-qglfQ53FsJh5+VSkjMtBg7eZiowj9zXOyfJJxfaXh/XYTVe/5ibzWg6rvGHyvSm6C3D7Q2sg/NPCLmCtYGGvQA==", + "requires": { + "reakit-utils": "^0.13.1" + }, + "dependencies": { + "reakit-utils": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.13.1.tgz", + "integrity": "sha512-NBKgsot3tU91gZgK5MTInI/PR0T3kIsTmbU5MbGggSOcwU2dG/kbE8IrM2lC6ayCSL2W2QWkijT6kewdrIX7Gw==" + } + } + }, + "reakit-utils": { + "version": "0.14.4", + "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.14.4.tgz", + "integrity": "sha512-jDEf/NmZVJ6fs10G16ifD+RFhQikSLN7VfjRHu0CPoUj4g6lFXd5PPcRXCY81qiqc9FVHjr2d2fmsw1hs6xUxA==" + }, + "reakit-warning": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.5.5.tgz", + "integrity": "sha512-OuP1r7rlSSJZsoLuc0CPA2ACPKnWO8HDbFktiiidbT67UjuX6udYV1AUsIgMJ8ado9K5gZGjPj7IB/GDYo9Yjg==", + "requires": { + "reakit-utils": "^0.14.4" + } } } }, @@ -23022,21 +23235,6 @@ "prop-types": "^15.5.6" } }, - "react-click-outside": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/react-click-outside/-/react-click-outside-3.0.1.tgz", - "integrity": "sha512-d0KWFvBt+esoZUF15rL2UBB7jkeAqLU8L/Ny35oLK6fW6mIbOv/ChD+ExF4sR9PD26kVx+9hNfD0FTIqRZEyRQ==", - "requires": { - "hoist-non-react-statics": "^2.1.1" - }, - "dependencies": { - "hoist-non-react-statics": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" - } - } - }, "react-colorful": { "version": "4.4.4", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-4.4.4.tgz", @@ -25002,7 +25200,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", - "dev": true, "requires": { "call-bind": "^1.0.0", "get-intrinsic": "^1.0.2", diff --git a/package.json b/package.json index a1d7f5b2..0999ed29 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ "@wordpress/plugins": "^2.21.0", "@wordpress/url": "^2.18.0", "lodash": "^4.17.20", - "newspack-components": "^1.4.0" + "newspack-components": "^1.5.1" }, "devDependencies": { "@automattic/calypso-build": "^6.3.0", diff --git a/src/blocks/list-container/edit.js b/src/blocks/list-container/edit.js index 6c2b895f..3963b987 100644 --- a/src/blocks/list-container/edit.js +++ b/src/blocks/list-container/edit.js @@ -8,15 +8,9 @@ import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -const ListContainerEditorComponent = ( { - clientId, - innerBlocks, - isSelected, - parent, - setAttributes, -} ) => { +const ListContainerEditorComponent = ( { clientId, innerBlocks, parent, setAttributes } ) => { const parentAttributes = parent.attributes || {}; - const { queryMode, queryOptions, isSelected: parentIsSelected, showSortUi } = parentAttributes; + const { queryMode, queryOptions, showSortUi } = parentAttributes; const { order } = queryOptions; // Sync parent attributes to list container attributes, so that we can use parent attributes in the PHP render callback. @@ -105,11 +99,7 @@ const ListContainerEditorComponent = ( { 'newspack-listings/marketplace', 'newspack-listings/place', ] } - renderAppender={ () => - queryMode || ( ! isSelected && ! parentIsSelected ) ? null : ( - - ) - } + renderAppender={ () => ( queryMode ? null : ) } /> ); diff --git a/src/blocks/listing/edit.js b/src/blocks/listing/edit.js index 877a6176..7f6a3e61 100644 --- a/src/blocks/listing/edit.js +++ b/src/blocks/listing/edit.js @@ -6,13 +6,14 @@ import apiFetch from '@wordpress/api-fetch'; import { Button, Placeholder, Spinner } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; +import { decodeEntities } from '@wordpress/html-entities'; import { addQueryArgs } from '@wordpress/url'; /** * Internal dependencies */ import { Listing } from './listing'; -import { QueryControls } from '../../components'; +import { AutocompleteWithSuggestions } from 'newspack-components'; import { capitalize, getIcon } from '../../editor/utils'; const ListingEditorComponent = ( { @@ -103,14 +104,54 @@ const ListingEditorComponent = ( { label={ capitalize( listingTypeSlug ) } icon={ getIcon( listingTypeSlug ) } > - { + const posts = await apiFetch( { + path: addQueryArgs( 'newspack-listings/v1/listings', { + per_page: 100, + include: postIDs.join( ',' ), + _fields: 'id,title', + } ), + } ); + + return posts.map( _post => ( { + value: _post.id, + label: decodeEntities( _post.title ) || __( '(no title)', 'newspack-listings' ), + } ) ); + } } + fetchSuggestions={ async search => { + const posts = await apiFetch( { + path: addQueryArgs( '/newspack-listings/v1/listings', { + search, + per_page: 10, + _fields: 'id,title', + type: listingType, + } ), + } ); + + // Only show suggestions if they aren't already in the list. + const result = posts.reduce( ( acc, _post ) => { + if ( + listItems.indexOf( _post.id ) < 0 && + listItems.indexOf( _post.id.toString() ) < 0 + ) { + acc.push( { + value: _post.id, + label: decodeEntities( _post.title ) || __( '(no title)', 'newspack-listings' ), + } ); + } + + return acc; + }, [] ); + return result; + } } + postType={ listingType } + postTypeSlug={ listingTypeSlug } maxLength={ 1 } onChange={ _listing => { if ( _listing.length ) { diff --git a/src/blocks/listing/editor.scss b/src/blocks/listing/editor.scss index c37a796b..59917652 100644 --- a/src/blocks/listing/editor.scss +++ b/src/blocks/listing/editor.scss @@ -37,29 +37,6 @@ } } - &__search-suggestions { - border-radius: 2px; - border: 1px solid var( --newspack-listings--grey-medium ); - max-height: 204px; - padding: 4px; - overflow: scroll; - - .components-button { - color: var( --newspack-listings--grey-dark ); - display: block; - margin: 0; - padding: 10px 12px; - text-decoration: none; - width: 100%; - - &:active:not( :disabled ), - &:hover:not( :disabled ) { - background: var( --wp-admin-theme-color ); - color: white; - } - } - } - &__error { margin: 1rem auto 2rem; } diff --git a/src/components/index.js b/src/components/index.js index 166bc3c0..822d18b3 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,2 +1 @@ export { default as SidebarQueryControls } from './sidebar-query-controls'; -export { default as QueryControls } from './query-controls'; diff --git a/src/components/query-controls.js b/src/components/query-controls.js deleted file mode 100644 index d4723ec7..00000000 --- a/src/components/query-controls.js +++ /dev/null @@ -1,150 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { Fragment, Component } from '@wordpress/element'; -import apiFetch from '@wordpress/api-fetch'; -import { addQueryArgs } from '@wordpress/url'; -import { decodeEntities } from '@wordpress/html-entities'; - -/** - * External dependencies. - */ -import { AutocompleteTokenField } from 'newspack-components'; -import './autocomplete-tokenfield.scss'; - -class QueryControls extends Component { - constructor( props ) { - super( props ); - this.state = { - suggestions: [], - }; - } - - /** - * Fetch recent posts to show as suggestions. - */ - componentDidMount() { - this.fetchListingSuggestions().then( suggestions => { - if ( 0 < suggestions.length ) { - this.setState( { suggestions } ); - } - } ); - } - - /** - * Fetch posts to show as suggestions. - * - * @param {string} search An optional search string to use to query posts by title. - */ - fetchListingSuggestions = search => { - const { listingType, listItems } = this.props; - return apiFetch( { - path: addQueryArgs( '/newspack-listings/v1/listings', { - search, - per_page: 10, - _fields: 'id,title', - type: listingType, - } ), - } ).then( function( posts ) { - // Only show suggestions if they aren't already in the list. - const result = posts.reduce( ( acc, post ) => { - if ( listItems.indexOf( post.id ) < 0 && listItems.indexOf( post.id.toString() ) < 0 ) { - acc.push( { - value: post.id, - label: decodeEntities( post.title ) || __( '(no title)', 'newspack-listings' ), - } ); - } - - return acc; - }, [] ); - return result; - } ); - }; - - /** - * If there are saved posts, fetch post info to be tokenized and displayed. - * - * @param {Array} postIDs Array of post IDs. - */ - fetchSavedPosts = postIDs => { - return apiFetch( { - path: addQueryArgs( 'newspack-listings/v1/listings', { - per_page: 100, - include: postIDs.join( ',' ), - _fields: 'id,title', - } ), - } ).then( function( posts ) { - return posts.map( post => ( { - value: post.id, - label: decodeEntities( post.title ) || __( '(no title)', 'newspack-listings' ), - } ) ); - } ); - }; - - /** - * Render a single suggestion object that can be clicked to select it immediately. - * - * @param {Object} suggestion Suggestion object with value and label keys. - * @param {number} index Index of this suggestion in the array. - */ - renderSuggestion( suggestion, index ) { - const { onChange } = this.props; - return ( - - ); - } - - /** - * Render a list of suggestions that can be clicked to select instead of searching by title. - */ - renderSuggestions() { - const { listingTypeSlug } = this.props; - const { suggestions } = this.state; - - return ( - -

- { __( 'Or, select a recent ', 'newspack-listings' ) + - listingTypeSlug + - __( ' listing:', 'newspack-listings' ) } -

-
- { suggestions.map( this.renderSuggestion.bind( this ) ) } -
- - ); - } - - render = () => { - const { label, selectedPost, onChange } = this.props; - const { suggestions } = this.state; - - return ( - - this.fetchSavedPosts( postIDs ) } - label={ label } - help={ __( - 'Begin typing listing title, click autocomplete result to select.', - 'newspack-listings' - ) } - /> - { 0 < suggestions.length && this.renderSuggestions() } - - ); - }; -} - -QueryControls.defaultProps = { - selectedPost: 0, -}; - -export default QueryControls;