From 2fff8e198261ae71deb2ec2b749046dce993db72 Mon Sep 17 00:00:00 2001 From: eric-burel Date: Fri, 3 Dec 2021 09:35:39 +0100 Subject: [PATCH] can render autocomplete multiple and trigger query --- .../defaultVulcanComponents.ts | 10 +- .../form/inputs/AutocompleteMultiple.tsx | 29 ++++-- .../components/form/inputs/BasicInputs.tsx | 5 +- packages/react-ui/package.json | 1 + yarn.lock | 99 +++++++++++++++++-- 5 files changed, 123 insertions(+), 21 deletions(-) diff --git a/packages/react-ui/components/form/VulcanComponents/defaultVulcanComponents.ts b/packages/react-ui/components/form/VulcanComponents/defaultVulcanComponents.ts index 15669007..f300b4a0 100644 --- a/packages/react-ui/components/form/VulcanComponents/defaultVulcanComponents.ts +++ b/packages/react-ui/components/form/VulcanComponents/defaultVulcanComponents.ts @@ -41,11 +41,11 @@ import { FormComponentTime, FormComponentStaticText, FormComponentLikert, - FormComponentAutocomplete, - FormComponentMultiAutocomplete, // used by ui-bootstrap and ui-material FormItem, + FormComponentAutocomplete, } from "../inputs/BasicInputs"; +import { AutocompleteMultiple } from "../inputs/AutocompleteMultiple"; import { Button } from "../core/Button"; import { Loading } from "../core/Loading"; import { PossibleCoreComponents, PossibleFormComponents } from "./typings"; @@ -78,8 +78,8 @@ const defaultFormComponents: PossibleFormComponents = { FormComponentTime, FormComponentStaticText, FormComponentLikert, - FormComponentAutocomplete, - FormComponentMultiAutocomplete, + //FormComponentAutocomplete, + //FormComponentMultiAutocomplete, // Components defined in default vulcan/forms FormComponent, FormComponentInner, @@ -114,6 +114,8 @@ const defaultFormComponents: PossibleFormComponents = { Form, // FormItem, + FormComponentAutocomplete, + FormComponentMultiAutocomplete: AutocompleteMultiple, }; export const defaultVulcanComponents = { diff --git a/packages/react-ui/components/form/inputs/AutocompleteMultiple.tsx b/packages/react-ui/components/form/inputs/AutocompleteMultiple.tsx index ac7aa91e..078c3a03 100644 --- a/packages/react-ui/components/form/inputs/AutocompleteMultiple.tsx +++ b/packages/react-ui/components/form/inputs/AutocompleteMultiple.tsx @@ -8,13 +8,17 @@ */ import { AsyncTypeahead } from "react-bootstrap-typeahead"; // ES2015 import React, { useState } from "react"; -// TODO: @see packages/vulcan-lib/lib/modules/fragments.js -import { expandQueryFragments } from "meteor/vulcan:core"; +// We don't auto-expand queries in Vulcan NPM, since we don't use the registry pattern +// anymore. Instead, provide the right fragments directly, using composition with string templates. +//import { expandQueryFragments } from "meteor/vulcan:core"; import { useLazyQuery } from "@apollo/client"; import gql from "graphql-tag"; import { useVulcanComponents } from "../VulcanComponents/Consumer"; +import { FormInputProps } from "../FormComponentInner"; -export const MultiAutocomplete = (props) => { +export interface AutocompleteMultipleProps extends FormInputProps {} +export const AutocompleteMultiple = (props: AutocompleteMultipleProps) => { + // TODO: some props are now comming from the context const { queryData, updateCurrentValues, @@ -24,7 +28,6 @@ export const MultiAutocomplete = (props) => { itemProperties = {}, autocompleteQuery, optionsFunction, - formComponents, } = props; const Components = useVulcanComponents(); @@ -36,13 +39,13 @@ export const MultiAutocomplete = (props) => { const { value, label } = inputProperties; // store current autocomplete query string in local component state - const [queryString, setQueryString] = useState(); + const [queryString, setQueryString] = useState(); // get component's autocomplete query and use it to load autocomplete suggestions // note: we use useLazyQuery because // we don't want to trigger the query until the user has actually typed in something const [loadAutocompleteOptions, { loading, error, data }] = useLazyQuery( - gql(expandQueryFragments(autocompleteQuery())), + gql(/*expandQueryFragments(*/ autocompleteQuery() /*)*/), { variables: { queryString }, } @@ -59,7 +62,9 @@ export const MultiAutocomplete = (props) => { // extra unwanted items if field-level data loading loaded too many items const selectedItems = queryData && - optionsFunction({ data: queryData }).filter((d) => value.includes(d.value)); + optionsFunction({ data: queryData }).filter((d) => + (value as Array).includes(d.value) + ); // console.log(queryData) // console.log(queryData && optionsFunction({ data: queryData })); @@ -67,12 +72,18 @@ export const MultiAutocomplete = (props) => { // console.log(selectedItems) return ( - + + {/** @ts-ignore */} { - const selectedIds = selected.map(({ value }) => value); + const selectedIds = selected.map( + // @ts-ignore Typing is wrong for some reason + ({ value }) => value + ); updateCurrentValues({ [path]: selectedIds }); }} options={autocompleteOptions} diff --git a/packages/react-ui/components/form/inputs/BasicInputs.tsx b/packages/react-ui/components/form/inputs/BasicInputs.tsx index 3ff02771..a2e3fbd1 100644 --- a/packages/react-ui/components/form/inputs/BasicInputs.tsx +++ b/packages/react-ui/components/form/inputs/BasicInputs.tsx @@ -26,6 +26,7 @@ const HTMLInputAdapter = (props: FormInputProps & { type: string }) => { ); }; // TODO: might need some sanitization // For consistency with Vulcan Meteor ui bootstrap and ui material +// @see packages/vulcan-ui-bootstrap/lib/components/forms/FormItem.jsx export const FormItem = HTMLInputAdapter; const HTMLSelectAdapter = (props: FormInputProps) => { @@ -100,5 +101,5 @@ export const FormComponentLikert = (props) => "Likert component not yet implemented"; export const FormComponentAutocomplete = (props) => "Autocomplete component not yet implemented"; -export const FormComponentMultiAutocomplete = (props) => - "MultiAutocomplete component not yet implemented"; +//export const FormComponentMultiAutocomplete = (props) => +// "MultiAutocomplete component not yet implemented"; diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index d7d2440f..9b29a280 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -24,6 +24,7 @@ "classnames": "^2.3.1", "debug": "^4.3.1", "lodash": "^4.17.21", + "react-bootstrap-typeahead": "^6.0.0-alpha.4", "simpl-schema": "^1.12.0" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index aff2fa37..4449ad83 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1122,7 +1122,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.16.3", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.13.8", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7": version "7.16.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5" integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ== @@ -2733,6 +2733,11 @@ schema-utils "^2.6.5" source-map "^0.7.3" +"@popperjs/core@^2.10.2", "@popperjs/core@^2.8.6": + version "2.11.0" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7" + integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ== + "@popperjs/core@^2.4.4": version "2.10.2" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590" @@ -2806,6 +2811,20 @@ prop-types "^15.6.1" react-lifecycles-compat "^3.0.4" +"@restart/hooks@^0.3.26": + version "0.3.27" + resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.27.tgz#91f356d66d4699a8cd8b3d008402708b6a9dc505" + integrity sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw== + dependencies: + dequal "^2.0.2" + +"@restart/hooks@^0.4.0": + version "0.4.1" + resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.1.tgz#716b1fd7a67650a6d4ed441b5d704b4f73ca2612" + integrity sha512-87UMGZcFwbj0Gr+8eEBAzL6H8xF5pMwq/S3LWeFK9cg4+lTqLFMsiVQFT4ncMJzqgpdD7T6ktF8PsEHeN2O+MQ== + dependencies: + dequal "^2.0.2" + "@sinonjs/commons@^1.7.0": version "1.8.2" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.2.tgz#858f5c4b48d80778fde4b9d541f27edc0d56488b" @@ -4048,6 +4067,15 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/react@>=16.9.11": + version "17.0.37" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959" + integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/react@^16.9.23": version "16.14.5" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.5.tgz#2c39b5cadefaf4829818f9219e5e093325979f4d" @@ -4135,6 +4163,11 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ== +"@types/warning@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52" + integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI= + "@types/webpack-env@^1.16.0": version "1.16.0" resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.0.tgz#8c0a9435dfa7b3b1be76562f3070efb3f92637b4" @@ -5921,7 +5954,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5, classnames@^2.3.1: +classnames@^2.2.0, classnames@^2.2.5, classnames@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== @@ -6872,6 +6905,11 @@ deps-regex@^0.1.4: resolved "https://registry.yarnpkg.com/deps-regex/-/deps-regex-0.1.4.tgz#518667b7691460a5e7e0a341be76eb7ce8090184" integrity sha1-UYZnt2kUYKXn4KNBvnbrfOgJAYQ= +dequal@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d" + integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug== + des.js@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843" @@ -6993,7 +7031,7 @@ dom-converter@^0.2: dependencies: utila "~0.4" -dom-helpers@^5.0.1: +dom-helpers@^5.0.1, dom-helpers@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== @@ -9068,7 +9106,7 @@ invariant@2.2.2: dependencies: loose-envify "^1.0.0" -invariant@2.2.4, invariant@^2.2.3, invariant@^2.2.4: +invariant@2.2.4, invariant@^2.2.1, invariant@^2.2.3, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -12789,6 +12827,24 @@ react-autosuggest@^10.1.0: section-iterator "^2.0.0" shallow-equal "^1.2.1" +react-bootstrap-typeahead@^6.0.0-alpha.4: + version "6.0.0-alpha.4" + resolved "https://registry.yarnpkg.com/react-bootstrap-typeahead/-/react-bootstrap-typeahead-6.0.0-alpha.4.tgz#e4553761620ff49318a6b1a71624b17067f43187" + integrity sha512-qpu9Dk0oIVuXSIB7AVq8y1n1zkQcU1JbBEv+hYMW448kGBSW8OkCD/ezhxostQejP39h5pHYTBmQGp4uKdYNdA== + dependencies: + "@babel/runtime" "^7.14.6" + "@popperjs/core" "^2.10.2" + "@restart/hooks" "^0.4.0" + classnames "^2.2.0" + fast-deep-equal "^3.1.1" + invariant "^2.2.1" + lodash.debounce "^4.0.8" + prop-types "^15.5.8" + react-overlays "^5.1.0" + react-popper "^2.2.5" + scroll-into-view-if-needed "^2.2.20" + warning "^4.0.1" + react-colorful@^5.0.1: version "5.1.1" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.1.1.tgz#b242a3a59dc2e740fef9ee072c1d8b49d3465b62" @@ -12932,6 +12988,20 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-overlays@^5.1.0: + version "5.1.1" + resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.1.1.tgz#2e7cf49744b56537c7828ccb94cfc63dd778ae4f" + integrity sha512-eCN2s2/+GVZzpnId4XVWtvDPYYBD2EtOGP74hE+8yDskPzFy9+pV1H3ZZihxuRdEbQzzacySaaDkR7xE0ydl4Q== + dependencies: + "@babel/runtime" "^7.13.8" + "@popperjs/core" "^2.8.6" + "@restart/hooks" "^0.3.26" + "@types/warning" "^3.0.0" + dom-helpers "^5.2.0" + prop-types "^15.7.2" + uncontrollable "^7.2.1" + warning "^4.0.3" + react-popper-tooltip@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac" @@ -12941,7 +13011,7 @@ react-popper-tooltip@^3.1.1: "@popperjs/core" "^2.5.4" react-popper "^2.2.4" -react-popper@^2.2.4: +react-popper@^2.2.4, react-popper@^2.2.5: version "2.2.5" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96" integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw== @@ -13706,6 +13776,13 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" +scroll-into-view-if-needed@^2.2.20: + version "2.2.28" + resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.28.tgz#5a15b2f58a52642c88c8eca584644e01703d645a" + integrity sha512-8LuxJSuFVc92+0AdNv4QOxRL4Abeo1DgLnGNkn1XlaujPH/3cCFz3QI60r2VNu4obJJROzgnIUw5TKQkZvZI1w== + dependencies: + compute-scroll-into-view "^1.0.17" + scss-parser@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/scss-parser/-/scss-parser-1.0.4.tgz#61cdeb28701ffcb497954b9b05729c6d38eb8b9f" @@ -15103,6 +15180,16 @@ unbox-primitive@^1.0.0: has-symbols "^1.0.2" which-boxed-primitive "^1.0.2" +uncontrollable@^7.2.1: + version "7.2.1" + resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738" + integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ== + dependencies: + "@babel/runtime" "^7.6.3" + "@types/react" ">=16.9.11" + invariant "^2.2.4" + react-lifecycles-compat "^3.0.4" + unfetch@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be" @@ -15497,7 +15584,7 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" -warning@^4.0.2, warning@^4.0.3: +warning@^4.0.1, warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==