Skip to content

Commit

Permalink
can render autocomplete multiple and trigger query
Browse files Browse the repository at this point in the history
  • Loading branch information
@eric-burel
eric-burel committed Dec 3, 2021
1 parent 5f0ec37 commit 2fff8e1
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 21 deletions.
10 changes: 6 additions & 4 deletions packages/react-ui/components/form/VulcanComponents/defaultVulcanComponents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -78,8 +78,8 @@ const defaultFormComponents: PossibleFormComponents = {
FormComponentTime,
FormComponentStaticText,
FormComponentLikert,
FormComponentAutocomplete,
FormComponentMultiAutocomplete,
//FormComponentAutocomplete,
//FormComponentMultiAutocomplete,
// Components defined in default vulcan/forms
FormComponent,
FormComponentInner,
Expand Down Expand Up @@ -114,6 +114,8 @@ const defaultFormComponents: PossibleFormComponents = {
Form,
//
FormItem,
FormComponentAutocomplete,
FormComponentMultiAutocomplete: AutocompleteMultiple,
};

export const defaultVulcanComponents = {
Expand Down
29 changes: 20 additions & 9 deletions packages/react-ui/components/form/inputs/AutocompleteMultiple.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -24,7 +28,6 @@ export const MultiAutocomplete = (props) => {
itemProperties = {},
autocompleteQuery,
optionsFunction,
formComponents,
} = props;

const Components = useVulcanComponents();
Expand All @@ -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<string | undefined>();

// 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 },
}
Expand All @@ -59,20 +62,28 @@ 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<any>).includes(d.value)
);

// console.log(queryData)
// console.log(queryData && optionsFunction({ data: queryData }));
// console.log(value)
// console.log(selectedItems)

return (
<Components.FormItem path={path} label={label} {...itemProperties}>
<Components.FormItem
{...props} /*path={path} label={label} {...itemProperties}*/
>
{/** @ts-ignore */}
<AsyncTypeahead
{...inputProperties}
multiple
onChange={(selected) => {
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}
Expand Down
5 changes: 3 additions & 2 deletions packages/react-ui/components/form/inputs/BasicInputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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";
1 change: 1 addition & 0 deletions packages/react-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
99 changes: 93 additions & 6 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -9068,7 +9106,7 @@ [email protected]:
dependencies:
loose-envify "^1.0.0"

[email protected], invariant@^2.2.3, invariant@^2.2.4:
[email protected], 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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down

0 comments on commit 2fff8e1

Please sign in to comment.