From f97e3b9654fe0e90723a5ffb4beb3e530d96b194 Mon Sep 17 00:00:00 2001 From: Maxwell Austensen Date: Wed, 5 Apr 2023 08:55:12 -0400 Subject: [PATCH 01/26] add react-select package --- client/package.json | 9 ++- client/yarn.lock | 185 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 189 insertions(+), 5 deletions(-) diff --git a/client/package.json b/client/package.json index fc81d5f56..62fbd10d9 100644 --- a/client/package.json +++ b/client/package.json @@ -13,6 +13,7 @@ "@lingui/macro": "^2.9.1", "@lingui/react": "^2.9.1", "@tanstack/react-table": "8.5.30", + "@typeform/embed-react": "^1.20.0", "@types/chartjs-plugin-annotation": "^0.5.0", "@types/file-saver": "^2.0.1", "@types/googlemaps": "^3.0.0", @@ -32,7 +33,6 @@ "@types/react-modal": "^3.8.2", "@types/react-router-dom": "5.1.5", "@types/react-transition-group": "^4.4.0", - "@typeform/embed-react": "^1.20.0", "@xstate/react": "^0.8.1", "algoliasearch": "^4.10.5", "babel-core": "^7.0.0-bridge.0", @@ -50,7 +50,6 @@ "leaflet": "^1.1.0", "lodash": "^4.17.21", "mapbox-gl": "^1.12.0", - "sass": "^1.49.9", "prop-types": "^15.7.2", "react": "^16.11.0", "react-app-polyfill": "^0.2.0", @@ -69,9 +68,11 @@ "react-papaparse": "^3.17.1", "react-router-dom": "^5.1.2", "react-scripts": "^4.0.3", + "react-select": "^5.7.2", "react-social": "^1.10.0", "react-transition-group": "^2.2.1", "rollbar": "^2.14.4", + "sass": "^1.49.9", "spectre.scss": "0.0.2", "typescript": "^4.9.3", "widont": "^0.3.3", @@ -97,11 +98,11 @@ "@babel/preset-env": "^7.7.6", "@babel/preset-typescript": "^7.7.4", "@babel/register": "^7.7.4", + "@svgr/webpack": "5.5.0", "dotenv": "^8.2.0", "jest-fetch-mock": "^3.0.3", "npm-run-all": "^4.0.2", - "prettier": "2.0.5", - "@svgr/webpack": "5.5.0" + "prettier": "2.0.5" }, "overrides": { "@svgr/webpack": "$@svgr/webpack" diff --git a/client/yarn.lock b/client/yarn.lock index 18e33bf75..c37f45fbf 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -593,6 +593,13 @@ dependencies: "@babel/types" "^7.10.4" +"@babel/helper-module-imports@^7.16.7": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af" + integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg== + dependencies: + "@babel/types" "^7.21.4" + "@babel/helper-module-imports@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91" @@ -2114,6 +2121,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.12.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.8.7": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673" + integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd" @@ -2283,6 +2297,15 @@ "@babel/helper-validator-identifier" "^7.19.1" to-fast-properties "^2.0.0" +"@babel/types@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4" + integrity sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA== + dependencies: + "@babel/helper-string-parser" "^7.19.4" + "@babel/helper-validator-identifier" "^7.19.1" + to-fast-properties "^2.0.0" + "@babel/types@^7.7.0", "@babel/types@^7.7.2": version "7.7.2" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.2.tgz#550b82e5571dcd174af576e23f0adba7ffc683f7" @@ -2336,6 +2359,94 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== +"@emotion/babel-plugin@^11.10.6": + version "11.10.6" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz#a68ee4b019d661d6f37dec4b8903255766925ead" + integrity sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/serialize" "^1.1.1" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.1.3" + +"@emotion/cache@^11.10.5", "@emotion/cache@^11.4.0": + version "11.10.5" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12" + integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA== + dependencies: + "@emotion/memoize" "^0.8.0" + "@emotion/sheet" "^1.2.1" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + stylis "4.1.3" + +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + +"@emotion/memoize@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@emotion/react@^11.8.1": + version "11.10.6" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.6.tgz#dbe5e650ab0f3b1d2e592e6ab1e006e75fd9ac11" + integrity sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.6" + "@emotion/cache" "^11.10.5" + "@emotion/serialize" "^1.1.1" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0" + integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA== + dependencies: + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/unitless" "^0.8.0" + "@emotion/utils" "^1.2.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c" + integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA== + +"@emotion/unitless@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" + integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== + +"@emotion/utils@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" + integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== + +"@emotion/weak-memoize@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" + integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== + "@eslint/eslintrc@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" @@ -2351,6 +2462,18 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@floating-ui/core@^1.2.4": + version "1.2.5" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.5.tgz#612f0d203e6f647490d572c7b798eebac9e3cf54" + integrity sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ== + +"@floating-ui/dom@^1.0.1": + version "1.2.5" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.5.tgz#c9ec259a24ce0958b1ea29674df4eee4455361a9" + integrity sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ== + dependencies: + "@floating-ui/core" "^1.2.4" + "@gar/promisify@^1.0.1": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" @@ -5487,7 +5610,7 @@ convert-source-map@^1.4.0: dependencies: safe-buffer "~5.1.1" -convert-source-map@^1.6.0: +convert-source-map@^1.5.0, convert-source-map@^1.6.0: version "1.9.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== @@ -6327,6 +6450,14 @@ dom-helpers@^3.4.0: dependencies: "@babel/runtime" "^7.1.2" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@0: version "0.1.1" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0" @@ -7358,6 +7489,11 @@ find-cache-dir@^3.3.1: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19" @@ -8015,6 +8151,13 @@ hoist-non-react-statics@^3.1.0: dependencies: react-is "^16.7.0" +hoist-non-react-statics@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" @@ -10022,6 +10165,11 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= +memoize-one@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" + integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw== + memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -12675,6 +12823,21 @@ react-scripts@^4.0.3: optionalDependencies: fsevents "^2.1.3" +react-select@^5.7.2: + version "5.7.2" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.2.tgz#ccd40071b9429277983bf15526e7a5773a060e09" + integrity sha512-cTlJkQ8YjV6T/js8wW0owTzht0hHGABh29vjLscY4HfZGkv7hc3FFTmRp9NzY/Ib1uQ36GieAKEjxpHdpCFpcA== + dependencies: + "@babel/runtime" "^7.12.0" + "@emotion/cache" "^11.4.0" + "@emotion/react" "^11.8.1" + "@floating-ui/dom" "^1.0.1" + "@types/react-transition-group" "^4.4.0" + memoize-one "^6.0.0" + prop-types "^15.6.0" + react-transition-group "^4.3.0" + use-isomorphic-layout-effect "^1.1.2" + react-side-effect@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3" @@ -12698,6 +12861,16 @@ react-transition-group@^2.2.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" +react-transition-group@^4.3.0: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^16.11.0: version "16.14.0" resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" @@ -14205,6 +14378,11 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" +stylis@4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7" + integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA== + supercluster@^7.0.0, supercluster@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-7.1.0.tgz#f0a457426ec0ab95d69c5f03b51e049774b94479" @@ -14940,6 +15118,11 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-isomorphic-layout-effect@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" + integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" From 5665f10b1c1f6802ee7df4edfd44689be11b9157 Mon Sep 17 00:00:00 2001 From: Maxwell Austensen Date: Wed, 5 Apr 2023 23:08:22 -0400 Subject: [PATCH 02/26] add react-relect (wip) --- client/src/components/MultiSelect2.tsx | 120 +++++++++++++++++++++ client/src/components/PortfolioFilters.tsx | 53 ++++++++- client/src/styles/MultiSelect2.scss | 95 ++++++++++++++++ client/src/styles/PortfolioFilters.scss | 3 + client/src/styles/_vars.scss | 1 + 5 files changed, 270 insertions(+), 2 deletions(-) create mode 100644 client/src/components/MultiSelect2.tsx create mode 100644 client/src/styles/MultiSelect2.scss diff --git a/client/src/components/MultiSelect2.tsx b/client/src/components/MultiSelect2.tsx new file mode 100644 index 000000000..4e45e9e85 --- /dev/null +++ b/client/src/components/MultiSelect2.tsx @@ -0,0 +1,120 @@ +import React, { useCallback, useState, Children } from "react"; +import Select, { components, Props, ValueContainerProps } from "react-select"; +import { I18n } from "@lingui/core"; +import { t, Trans } from "@lingui/macro"; +import { Alert } from "./Alert"; +import "../styles/MultiSelect2.scss"; + +export type Option = { + value: string; + label: string; + [key: string]: string; +}; + +type MultiSelectProps = Omit & { + options: Option[]; + onApply: (selectedList: any) => void; + i18n: I18n; + previewSelectedNum?: number; + infoAlert?: React.ReactNode; +}; + + +const ValueContainer= ({ children, ...props }: ValueContainerProps) => { + const removedTypes = ["IndicatorsContainer", "Input"]; + const allowedChildren = Children.map(children, (child) => { + // @ts-ignore + return child && !removedTypes.includes(child.type.name) ? child : null; + }); + return ( + + {/* @ts-ignore */} + {/* */} + {/* @ts-ignore */} + + {/* @ts-ignore */} + + {allowedChildren} + + ); +}; + +const MultiSelect: React.FC = ({ + children, + options, + onApply, + infoAlert, + onChange, + onInputChange, + i18n, + ...props +}) => { + const [selections, setValue] = useState([]); + const [hasError, setHasError] = useState(false); + const [inputValue, setInputValue] = useState(undefined); + + const handleChange = useCallback( + (newValue, actionMeta) => { + if (onChange) onChange(newValue, actionMeta); + setValue(newValue); + }, + [onChange] + ); + const handleInputChange = useCallback( + (newValue, actionMeta) => { + if (onInputChange) onInputChange(newValue, actionMeta); + if (actionMeta.action !== "input-blur" && actionMeta.action !== "menu-close") { + setInputValue(newValue); + } + }, + [onInputChange] + ); + + return ( +
+ ({value: val, label: val}))} + onChange={(newValue, actionMeta) => { + console.log({ newValue, actionMeta }); + }} + hideSelectedOptions={false} + closeMenuOnSelect={false} + backspaceRemovesValue={false} + tabSelectsValue={false} + placeholder={i18n._(t`Search`) + `... (${zipOptions.length})`} + autoFocus={!isMobile} + noOptionsMessage={() => i18n._(t`ZIP CODE is not applicable`)} + /> */} + diff --git a/client/src/styles/MultiSelect2.scss b/client/src/styles/MultiSelect2.scss new file mode 100644 index 000000000..b7aba5fbb --- /dev/null +++ b/client/src/styles/MultiSelect2.scss @@ -0,0 +1,95 @@ +@import "./vars"; +@import "./typography"; + +.multiselect-container2 { + display: flex; + flex-direction: column; + font-family: $wow-font; + font-style: normal; + font-weight: 600; + line-height: 100%; + letter-spacing: 0.02em; + padding: 0 1.2rem; + + &.hasError .multiselect__input-container { + border: 0.2rem $justfix-orange solid; + } + + .multiselect__control { + background: none; + border: none; + box-shadow: none; + min-height: unset; + + .multiselect__value-container, + .multiselect__input-container { + flex: 1 1 100%; + } + + .multiselect__value-container { + gap: 0.6rem; + padding: 0; + margin: 0; + + .multiselect__multi-value { + background-color: $justfix-black; + border-radius: 0.8rem; + padding: 0.8rem 1.4rem; + margin: 0; + white-space: pre-line; + gap: 0.5rem; + + .multiselect__multi-value__label, + .multiselect__multi-value__remove { + color: $justfix-grey-50; + } + .multiselect__multi-value__label { + text-transform: uppercase; + font-size: 1.4rem; + padding: 0; + } + + .multiselect__multi-value__remove { + padding: 0; + } + } + + .multiselect__input-container, + .multiselect__placeholder { + padding: 0.5rem; + margin: 0; + } + // .multiselect__placeholder { + // height: 100%; + // display: flex; + // align-items: center; + // } + + .multiselect__input-container { + background-color: $justfix-white; + border: 0.1rem $justfix-black solid; + border-radius: 0.2rem 0.2rem 0 0; + font-size: 1.6rem; + + &::placeholder, + &::-moz-placeholder, + &::-webkit-input-placeholder { + color: $justfix-grey-600; + text-transform: uppercase; + } + // &::after { + // content: none; + // } + } + } + } + .multiselect__menu { + margin: 0; + border-radius: 0 0 0.2rem 0.2rem; + position: relative; + border: 0.1rem $justfix-grey-400 solid; + border-top: none; + box-shadow: none; + background-color: $justfix-white; + } +} diff --git a/client/src/styles/PortfolioFilters.scss b/client/src/styles/PortfolioFilters.scss index 9b1b34939..ea8f47162 100644 --- a/client/src/styles/PortfolioFilters.scss +++ b/client/src/styles/PortfolioFilters.scss @@ -178,6 +178,8 @@ &.zip-accordion .dropdown-container { width: 15rem; + height: 500px; + width: 200px; @include for-phone-only { width: unset; } @@ -703,3 +705,4 @@ color: $justfix-black; } } + diff --git a/client/src/styles/_vars.scss b/client/src/styles/_vars.scss index 49c6c30c7..623fff1e0 100644 --- a/client/src/styles/_vars.scss +++ b/client/src/styles/_vars.scss @@ -97,6 +97,7 @@ $size-lg: 899px; $justfix-black: #242323; $justfix-white: #faf8f4; $justfix-grey: #9a9898; +$justfix-grey-50: #f2f2f2; $justfix-grey-dark: #676565; $justfix-grey-600: #676565; $justfix-grey-700: #4e4b4b; From 623bb31641b5e106131df24fdecff873c713ce14 Mon Sep 17 00:00:00 2001 From: Maxwell Austensen Date: Thu, 6 Apr 2023 14:54:17 -0400 Subject: [PATCH 03/26] add back placeholder styles --- client/src/styles/MultiSelect2.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/styles/MultiSelect2.scss b/client/src/styles/MultiSelect2.scss index b7aba5fbb..eb96874c4 100644 --- a/client/src/styles/MultiSelect2.scss +++ b/client/src/styles/MultiSelect2.scss @@ -59,14 +59,14 @@ padding: 0.5rem; margin: 0; } - // .multiselect__placeholder { - // height: 100%; - // display: flex; - // align-items: center; - // } + .multiselect__placeholder { + background-color: $justfix-white; + height: 100%; + display: flex; + align-items: center; + } .multiselect__input-container { - background-color: $justfix-white; border: 0.1rem $justfix-black solid; border-radius: 0.2rem 0.2rem 0 0; font-size: 1.6rem; From 819cef2e969644391369cea509f8df34f5575935 Mon Sep 17 00:00:00 2001 From: Maxwell Austensen Date: Thu, 6 Apr 2023 18:02:39 -0400 Subject: [PATCH 04/26] separated selected values working --- client/src/components/MultiSelect2.tsx | 163 +++++++++++++++++++------ 1 file changed, 129 insertions(+), 34 deletions(-) diff --git a/client/src/components/MultiSelect2.tsx b/client/src/components/MultiSelect2.tsx index 4e45e9e85..e451bf4c3 100644 --- a/client/src/components/MultiSelect2.tsx +++ b/client/src/components/MultiSelect2.tsx @@ -1,9 +1,13 @@ -import React, { useCallback, useState, Children } from "react"; -import Select, { components, Props, ValueContainerProps } from "react-select"; +import React, { useCallback, useState } from "react"; +import Select, { components, Props, ContainerProps, GroupBase } from "react-select"; import { I18n } from "@lingui/core"; import { t, Trans } from "@lingui/macro"; import { Alert } from "./Alert"; import "../styles/MultiSelect2.scss"; +import classNames from "classnames"; + +// Example of separating out selected values (sadly with many typescript errors, which I've tried to address) +// https://github.com/JedWatson/react-select/discussions/4850 export type Option = { value: string; @@ -11,36 +15,22 @@ export type Option = { [key: string]: string; }; -type MultiSelectProps = Omit & { - options: Option[]; +interface CustomMultiselectProps { onApply: (selectedList: any) => void; i18n: I18n; previewSelectedNum?: number; infoAlert?: React.ReactNode; -}; +} +interface CustomSelectProps { + removeValue: (removed: any) => void; +} -const ValueContainer= ({ children, ...props }: ValueContainerProps) => { - const removedTypes = ["IndicatorsContainer", "Input"]; - const allowedChildren = Children.map(children, (child) => { - // @ts-ignore - return child && !removedTypes.includes(child.type.name) ? child : null; - }); - return ( - - {/* @ts-ignore */} - {/* */} - {/* @ts-ignore */} - - {/* @ts-ignore */} - - {allowedChildren} - - ); -}; - -const MultiSelect: React.FC = ({ - children, +function MultiSelect< + Option, + IsMulti extends boolean = true, + GroupType extends GroupBase