mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-11-12 15:34:00 +00:00
Replacing selectr with choices.js for community searching. (#932)
- Fixes #839 - Fixes #847
This commit is contained in:
Dessalines
GitHub
parent
debbd316c2
commit
8e96507cb1
6 changed files with 68 additions and 21 deletions
1
ui/assets/css/choices.min.css
vendored
Normal file
1
ui/assets/css/choices.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
ui/assets/css/selectr.min.css
vendored
7
ui/assets/css/selectr.min.css
vendored
File diff suppressed because one or more lines are too long
2
ui/package.json
vendored
2
ui/package.json
vendored
|
|
@ -23,6 +23,7 @@
|
|||
"@types/node": "^13.11.1",
|
||||
"autosize": "^4.0.2",
|
||||
"bootswatch": "^4.3.1",
|
||||
"choices.js": "^9.0.1",
|
||||
"classcat": "^4.0.2",
|
||||
"dotenv": "^8.2.0",
|
||||
"emoji-short-name": "^1.0.0",
|
||||
|
|
@ -36,7 +37,6 @@
|
|||
"markdown-it": "^10.0.0",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"markdown-it-emoji": "^1.4.0",
|
||||
"mobius1-selectr": "^2.4.13",
|
||||
"moment": "^2.24.0",
|
||||
"node-fetch": "^2.6.0",
|
||||
"prettier": "^2.0.4",
|
||||
|
|
|
|||
46
ui/src/components/post-form.tsx
vendored
46
ui/src/components/post-form.tsx
vendored
|
|
@ -39,7 +39,7 @@ import {
|
|||
import autosize from 'autosize';
|
||||
import Tribute from 'tributejs/src/Tribute.js';
|
||||
import emojiShortName from 'emoji-short-name';
|
||||
import Selectr from 'mobius1-selectr';
|
||||
import Choices from 'choices.js';
|
||||
import { i18n } from '../i18next';
|
||||
|
||||
const MAX_POST_TITLE_LENGTH = 200;
|
||||
|
|
@ -69,6 +69,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
private id = `post-form-${randomStr()}`;
|
||||
private tribute: Tribute;
|
||||
private subscription: Subscription;
|
||||
private choices: Choices;
|
||||
private emptyState: PostFormState = {
|
||||
postForm: {
|
||||
name: null,
|
||||
|
|
@ -164,6 +165,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
|
||||
componentWillUnmount() {
|
||||
this.subscription.unsubscribe();
|
||||
this.choices.destroy();
|
||||
window.onbeforeunload = null;
|
||||
}
|
||||
|
||||
|
|
@ -596,11 +598,45 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
// Set up select searching
|
||||
let selectId: any = document.getElementById('post-community');
|
||||
if (selectId) {
|
||||
let selector = new Selectr(selectId, { nativeDropdown: false });
|
||||
selector.on('selectr.select', option => {
|
||||
this.state.postForm.community_id = Number(option.value);
|
||||
this.setState(this.state);
|
||||
this.choices = new Choices(selectId, {
|
||||
shouldSort: false,
|
||||
classNames: {
|
||||
containerOuter: 'choices',
|
||||
containerInner: 'choices__inner bg-secondary border-0',
|
||||
input: 'form-control',
|
||||
inputCloned: 'choices__input--cloned',
|
||||
list: 'choices__list',
|
||||
listItems: 'choices__list--multiple',
|
||||
listSingle: 'choices__list--single',
|
||||
listDropdown: 'choices__list--dropdown',
|
||||
item: 'choices__item bg-secondary',
|
||||
itemSelectable: 'choices__item--selectable',
|
||||
itemDisabled: 'choices__item--disabled',
|
||||
itemChoice: 'choices__item--choice',
|
||||
placeholder: 'choices__placeholder',
|
||||
group: 'choices__group',
|
||||
groupHeading: 'choices__heading',
|
||||
button: 'choices__button',
|
||||
activeState: 'is-active',
|
||||
focusState: 'is-focused',
|
||||
openState: 'is-open',
|
||||
disabledState: 'is-disabled',
|
||||
highlightedState: 'text-info',
|
||||
selectedState: 'text-info',
|
||||
flippedState: 'is-flipped',
|
||||
loadingState: 'is-loading',
|
||||
noResults: 'has-no-results',
|
||||
noChoices: 'has-no-choices',
|
||||
},
|
||||
});
|
||||
this.choices.passedElement.element.addEventListener(
|
||||
'choice',
|
||||
(e: any) => {
|
||||
this.state.postForm.community_id = Number(e.detail.choice.value);
|
||||
this.setState(this.state);
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
} else if (res.op == UserOperation.CreatePost) {
|
||||
let data = res.data as PostResponse;
|
||||
|
|
|
|||
2
ui/src/index.html
vendored
2
ui/src/index.html
vendored
|
|
@ -13,7 +13,7 @@
|
|||
<!-- Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/css/tribute.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/css/toastify.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/css/selectr.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/css/choices.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/css/tippy.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/litely.min.css" id="default-light" media="(prefers-color-scheme: light)" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" />
|
||||
|
|
|
|||
31
ui/yarn.lock
vendored
31
ui/yarn.lock
vendored
|
|
@ -1412,6 +1412,15 @@ chardet@^0.7.0:
|
|||
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
|
||||
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
|
||||
|
||||
choices.js@^9.0.1:
|
||||
version "9.0.1"
|
||||
resolved "https://registry.yarnpkg.com/choices.js/-/choices.js-9.0.1.tgz#745fb29af8670428fdc0bf1cc9dfaa404e9d0510"
|
||||
integrity sha512-JgpeDY0Tmg7tqY6jaW/druSklJSt7W68tXFJIw0GSGWmO37SDAL8o60eICNGbzIODjj02VNNtf5h6TgoHDtCsA==
|
||||
dependencies:
|
||||
deepmerge "^4.2.0"
|
||||
fuse.js "^3.4.5"
|
||||
redux "^4.0.4"
|
||||
|
||||
chokidar@^1.6.1:
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
|
||||
|
|
@ -1734,7 +1743,7 @@ deep-is@~0.1.3:
|
|||
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
|
||||
integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
|
||||
|
||||
deepmerge@^4.2.2:
|
||||
deepmerge@^4.2.0, deepmerge@^4.2.2:
|
||||
version "4.2.2"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
|
||||
integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
|
||||
|
|
@ -2750,6 +2759,11 @@ fuse-concat-with-sourcemaps@^1.0.5:
|
|||
dependencies:
|
||||
source-map "^0.6.1"
|
||||
|
||||
fuse.js@^3.4.5:
|
||||
version "3.6.1"
|
||||
resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c"
|
||||
integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==
|
||||
|
||||
gensync@^1.0.0-beta.1:
|
||||
version "1.0.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
|
||||
|
|
@ -4464,11 +4478,6 @@ mkdirp@^0.5.1:
|
|||
dependencies:
|
||||
minimist "0.0.8"
|
||||
|
||||
mobius1-selectr@^2.4.13:
|
||||
version "2.4.13"
|
||||
resolved "https://registry.yarnpkg.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz#0019dfd9f984840d6e40f70683ab3ec78ce3b5df"
|
||||
integrity sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw==
|
||||
|
||||
moment@^2.24.0:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||
|
|
@ -5232,6 +5241,14 @@ reconnecting-websocket@^4.4.0:
|
|||
resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783"
|
||||
integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==
|
||||
|
||||
redux@^4.0.4:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
|
||||
integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
|
||||
dependencies:
|
||||
loose-envify "^1.4.0"
|
||||
symbol-observable "^1.2.0"
|
||||
|
||||
regenerate-unicode-properties@^8.1.0:
|
||||
version "8.1.0"
|
||||
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
|
||||
|
|
@ -6083,7 +6100,7 @@ supports-hyperlinks@^2.0.0:
|
|||
has-flag "^4.0.0"
|
||||
supports-color "^7.0.0"
|
||||
|
||||
symbol-observable@^1.1.0:
|
||||
symbol-observable@^1.1.0, symbol-observable@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
|
||||
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
|
||||
|
|
|
|||
Loading…
Reference in a new issue