with react select
This commit is contained in:
lingdocs
parent
80637ac20c
commit
9212c89c64
|
|
@ -25,6 +25,7 @@
|
|||
"react-router-hash-link": "^2.4.3",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-scrollspy": "^3.4.3",
|
||||
"react-select": "^5.1.0",
|
||||
"react-smooth-collapse": "^2.1.0",
|
||||
"react-swipeable": "^6.2.0",
|
||||
"web-vitals": "^1.0.1"
|
||||
|
|
@ -62,7 +63,7 @@
|
|||
"@types/react": "^17.0.27",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"babel-loader": "8.1.0",
|
||||
"typescript": "^4.4.3",
|
||||
"node-fetch": "^2.6.1"
|
||||
"node-fetch": "^2.6.1",
|
||||
"typescript": "^4.4.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
ButtonSelect,
|
||||
} from "@lingdocs/pashto-inflector";
|
||||
import { isPluralEntry } from "../../lib/type-predicates";
|
||||
import Select from "react-select";
|
||||
|
||||
export function PredicateSelector({ state, dispatch }: {
|
||||
state: ExplorerState,
|
||||
|
|
@ -19,11 +20,15 @@ export function PredicateSelector({ state, dispatch }: {
|
|||
const t = e.target.value as PredicateType;
|
||||
dispatch({ type: "setPredicateType", payload: t });
|
||||
}
|
||||
function onPredicateSelect(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||
const ts = parseInt(e.target.value);
|
||||
dispatch({ type: "setPredicate", payload: ts });
|
||||
function onPredicateSelect({ value }: any) {
|
||||
dispatch({ type: "setPredicate", payload: parseInt(value) });
|
||||
}
|
||||
return <div className="form-group ml-2">
|
||||
const options = inputs[state.predicateType].map(e => ({
|
||||
value: `${e.ts}`,
|
||||
label: makeOptionLabel(e),
|
||||
}));
|
||||
const predicate = state.predicatesSelected[state.predicateType];
|
||||
return <div className="form-group ml-2 flex-fill" style={{ maxWidth: "50%" }}>
|
||||
<label htmlFor="predicate-select"><strong>Predicate:</strong></label>
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -54,16 +59,15 @@ export function PredicateSelector({ state, dispatch }: {
|
|||
Unisex Nouns
|
||||
</label>
|
||||
</div>
|
||||
<select
|
||||
className="form-control"
|
||||
id="predicate-select"
|
||||
value={state.predicatesSelected[state.predicateType].ts}
|
||||
<Select
|
||||
value={predicate.ts.toString()}
|
||||
onChange={onPredicateSelect}
|
||||
>
|
||||
{inputs[state.predicateType].map(e => (
|
||||
<option key={e.ts+"s"} value={e.ts}>{makeOptionLabel(e)}</option>
|
||||
))}
|
||||
</select>
|
||||
className="mb-2"
|
||||
// @ts-ignore
|
||||
options={options}
|
||||
isSearchable
|
||||
placeholder={options.find(o => o.value === predicate.ts.toString())?.label}
|
||||
/>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
@ -75,14 +79,22 @@ export function SubjectSelector({ state, dispatch }: {
|
|||
const t = e.target.value as SubjectType;
|
||||
dispatch({ type: "setSubjectType", payload: t });
|
||||
}
|
||||
function onSubjectSelect(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||
const ts = parseInt(e.target.value);
|
||||
dispatch({ type: "setSubject", payload: ts });
|
||||
function onSubjectSelect({ value }: any) {
|
||||
dispatch({ type: "setSubject", payload: parseInt(value) });
|
||||
}
|
||||
const pluralNounSelected = (
|
||||
state.subjectType === "noun" && isPluralEntry(state.subjectsSelected.noun)
|
||||
)
|
||||
return <div className="form-group mr-2">
|
||||
);
|
||||
const options = state.subjectType === "pronouns"
|
||||
? []
|
||||
: inputs[state.subjectType].map(e => ({
|
||||
value: e.ts.toString(),
|
||||
label: makeOptionLabel(e),
|
||||
}));
|
||||
const subject = state.subjectType === "pronouns"
|
||||
? undefined
|
||||
: state.subjectsSelected[state.subjectType]
|
||||
return <div className="form-group mr-2 flex-fill">
|
||||
<label htmlFor="predicate-select"><strong>Subject:</strong></label>
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -114,16 +126,15 @@ export function SubjectSelector({ state, dispatch }: {
|
|||
</div>
|
||||
{state.subjectType !== "pronouns" &&
|
||||
<>
|
||||
<select
|
||||
className="form-control mb-3"
|
||||
id="subject-select"
|
||||
value={state.subjectsSelected[state.subjectType].ts}
|
||||
<Select
|
||||
value={subject?.ts.toString()}
|
||||
onChange={onSubjectSelect}
|
||||
>
|
||||
{inputs[state.subjectType].map(e => (
|
||||
<option key={e.ts+"s"} value={e.ts}>{makeOptionLabel(e)}</option>
|
||||
))}
|
||||
</select>
|
||||
className="mb-2"
|
||||
// @ts-ignore
|
||||
options={options}
|
||||
isSearchable
|
||||
placeholder={options.find(o => o.value === subject?.ts.toString())?.label}
|
||||
/>
|
||||
<ButtonSelect
|
||||
small
|
||||
options={[
|
||||
|
|
|
|||
96
yarn.lock
96
yarn.lock
|
|
@ -1208,7 +1208,7 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.14.0", "@babel/runtime@^7.2.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.13.8", "@babel/runtime@^7.14.0", "@babel/runtime@^7.2.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
version "7.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
|
||||
integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
|
||||
|
|
@ -1310,6 +1310,22 @@
|
|||
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
|
||||
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
|
||||
|
||||
"@emotion/cache@^11.4.0", "@emotion/cache@^11.5.0":
|
||||
version "11.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.5.0.tgz#a5eb78cbef8163939ee345e3ddf0af217b845e62"
|
||||
integrity sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw==
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.7.4"
|
||||
"@emotion/sheet" "^1.0.3"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
"@emotion/weak-memoize" "^0.2.5"
|
||||
stylis "^4.0.10"
|
||||
|
||||
"@emotion/hash@^0.8.0":
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
|
||||
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
|
||||
|
||||
"@emotion/is-prop-valid@^0.7.3":
|
||||
version "0.7.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
|
||||
|
|
@ -1322,6 +1338,55 @@
|
|||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
|
||||
integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
|
||||
|
||||
"@emotion/memoize@^0.7.4":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
|
||||
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
|
||||
|
||||
"@emotion/react@^11.1.1":
|
||||
version "11.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd"
|
||||
integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@emotion/cache" "^11.5.0"
|
||||
"@emotion/serialize" "^1.0.2"
|
||||
"@emotion/sheet" "^1.0.3"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
"@emotion/weak-memoize" "^0.2.5"
|
||||
hoist-non-react-statics "^3.3.1"
|
||||
|
||||
"@emotion/serialize@^1.0.2":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
|
||||
integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.8.0"
|
||||
"@emotion/memoize" "^0.7.4"
|
||||
"@emotion/unitless" "^0.7.5"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@emotion/sheet@^1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.3.tgz#00c326cd7985c5ccb8fe2c1b592886579dcfab8f"
|
||||
integrity sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ==
|
||||
|
||||
"@emotion/unitless@^0.7.5":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
|
||||
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
|
||||
|
||||
"@emotion/utils@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
|
||||
integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
|
||||
|
||||
"@emotion/weak-memoize@^0.2.5":
|
||||
version "0.2.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
|
||||
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
|
||||
|
||||
"@eslint/eslintrc@^0.3.0":
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318"
|
||||
|
|
@ -2172,7 +2237,7 @@
|
|||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-transition-group@^4.4.1":
|
||||
"@types/react-transition-group@^4.4.0", "@types/react-transition-group@^4.4.1":
|
||||
version "4.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.3.tgz#b0994da0a7023d67dbb4a8910a62112bc00d5688"
|
||||
integrity sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==
|
||||
|
|
@ -6150,7 +6215,7 @@ hmac-drbg@^1.0.1:
|
|||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^3.1.0:
|
||||
hoist-non-react-statics@^3.1.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==
|
||||
|
|
@ -7985,6 +8050,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@^5.0.0:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
|
||||
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
|
||||
|
||||
memory-fs@^0.4.1:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
|
||||
|
|
@ -10403,6 +10473,19 @@ react-scrollspy@^3.4.3:
|
|||
classnames "^2.2.5"
|
||||
prop-types "^15.5.10"
|
||||
|
||||
react-select@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.1.0.tgz#ac384c8e25ba6f03126026192b2bdad0f53fbf50"
|
||||
integrity sha512-SkEBD1AYsSXrIdNj5HBt7+Ehe+jxdiB448J0atJqR6lE3l/GcFlRf4JYB3NlHe/02jrW4AnIQLo1t0IqWrxXOw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.0"
|
||||
"@emotion/cache" "^11.4.0"
|
||||
"@emotion/react" "^11.1.1"
|
||||
"@types/react-transition-group" "^4.4.0"
|
||||
memoize-one "^5.0.0"
|
||||
prop-types "^15.6.0"
|
||||
react-transition-group "^4.3.0"
|
||||
|
||||
react-smooth-collapse@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-smooth-collapse/-/react-smooth-collapse-2.1.0.tgz#64be7af94b61d6d203d9a09af0fba671f9b5983c"
|
||||
|
|
@ -10416,7 +10499,7 @@ react-swipeable@^6.2.0:
|
|||
resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.0.tgz#057271cb7a6fb4af9d2a3f6d80ccdf33e2f64d47"
|
||||
integrity sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==
|
||||
|
||||
react-transition-group@^4.4.1:
|
||||
react-transition-group@^4.3.0, react-transition-group@^4.4.1:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
|
||||
integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
|
||||
|
|
@ -11829,6 +11912,11 @@ stylehacks@^4.0.0:
|
|||
postcss "^7.0.0"
|
||||
postcss-selector-parser "^3.0.0"
|
||||
|
||||
stylis@^4.0.10:
|
||||
version "4.0.10"
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
|
||||
integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
|
||||
|
||||
supports-color@^5.3.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
|
||||
|
|
|
|||
Loading…
Reference in New Issue