Skip to content

Commit

Permalink
UI: Replaced react-autocomplete with custom based on Bootstrap dropdo…
Browse files Browse the repository at this point in the history 
…wn (#362)
  • Loading branch information
@psrok1
psrok1 committed Apr 30, 2021
1 parent f590986 commit b8b5093
Show file tree
Hide file tree
Showing 11 changed files with 148 additions and 381 deletions.
14 changes: 0 additions & 14 deletions mwdb/web/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion mwdb/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
"query-string": "^5.1.1",
"react": "^16.13.1",
"react-ace": "^6.2.0",
"react-autocomplete": "^1.8.1",
"react-bootstrap": "^0.32.1",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.4.1",
Expand Down
1 change: 0 additions & 1 deletion mwdb/web/src/commons/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"lodash": "*",
"react": "*",
"react-ace": "*",
"react-autocomplete": "*",
"react-copy-to-clipboard": "*",
"react-js-pagination": "*",
"react-router": "*",
Expand Down
43 changes: 43 additions & 0 deletions mwdb/web/src/commons/ui/Autocomplete.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from "react";

export default function Autocomplete({
items,
getItemValue,
renderItem,
value,
onChange,
children,
prependChildren,
...inputProps
}) {
const itemValue = getItemValue || ((item) => item);
const ItemComponent = renderItem || (({ item }) => itemValue(item));
const menuStyle = items.length === 0 ? { display: "none" } : {};

return (
<div className="dropdown input-group">
{prependChildren ? children : []}
<input
value={value}
onChange={(ev) => onChange(ev.target.value)}
{...(inputProps || {})}
data-toggle="dropdown"
/>
<div className="dropdown-menu" role="menu" style={menuStyle}>
{items.map((item) => (
<button
key={itemValue(item)}
className="dropdown-item"
onClick={(ev) => {
ev.preventDefault();
onChange(itemValue(item));
}}
>
<ItemComponent item={item} />
</button>
))}
</div>
{prependChildren ? [] : children}
</div>
);
}
59 changes: 10 additions & 49 deletions mwdb/web/src/commons/ui/MemberList.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from "react";

import Autocomplete from "react-autocomplete";
import Autocomplete from "./Autocomplete";
import PagedList from "./PagedList";
import ConfirmationModal from "./ConfirmationModal";

Expand Down Expand Up @@ -135,58 +135,19 @@ class MemberItem extends Component {
<td style={{ textAlign: "left" }}>
<Autocomplete
value={this.state.newMember}
inputProps={{ id: "states-autocomplete" }}
wrapperStyle={{
position: "relative",
display: "inline-block",
}}
items={this.props.newMemberItems}
getItemValue={(item) => item[this.props.nameKey]}
shouldItemRender={(item, value) => {
return (
items={this.props.newMemberItems.filter(
(item) =>
item[this.props.nameKey]
.toLowerCase()
.indexOf(value.toLowerCase()) !== -1
);
}}
onChange={(event) =>
this.setState({ newMember: event.target.value })
}
onSelect={(value) =>
.indexOf(
this.state.newMember.toLowerCase()
) !== -1
)}
getItemValue={(item) => item[this.props.nameKey]}
onChange={(value) =>
this.setState({ newMember: value })
}
renderInput={(props) => (
<input {...props} className="form-control" />
)}
renderMenu={(children) => (
<div
className={
"dropdown-menu " +
(children.length !== 0 ? "show" : "")
}
>
{children.map((c, idx) => (
<a
key={idx}
href="#dropdown"
className="dropdown-item"
style={{ cursor: "pointer" }}
>
{c}
</a>
))}
</div>
)}
renderItem={(item, isHighlighted) => (
<div
className={`item ${
isHighlighted ? "item-highlighted" : ""
}`}
key={item[this.props.nameKey]}
>
{item[this.props.nameKey]}
</div>
)}
className="form-control"
/>
</td>
<td>
Expand Down
1 change: 1 addition & 0 deletions mwdb/web/src/commons/ui/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";

export { default as APIKeyList } from "./APIKeyList";
export { default as Autocomplete } from "./Autocomplete";
export { default as ConfirmationModal } from "./ConfirmationModal";
export { default as DataTable } from "./DataTable";
export { default as DateString } from "./DateString";
Expand Down
77 changes: 15 additions & 62 deletions mwdb/web/src/components/AttributeUpdate.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import React, { Component } from "react";
import { withRouter } from "react-router";
import Autocomplete from "react-autocomplete";

import _ from "lodash";

import api from "@mwdb-web/commons/api";
import { ConfirmationModal, ObjectLink, View } from "@mwdb-web/commons/ui";
import {
Autocomplete,
ConfirmationModal,
ObjectLink,
View,
} from "@mwdb-web/commons/ui";

class AttributePermissionsBox extends Component {
state = {
Expand Down Expand Up @@ -197,76 +201,25 @@ class AttributePermissionsBox extends Component {
</tr>
))}
<tr>
<td colSpan="2">
<td>
<Autocomplete
value={this.state.newMember}
inputProps={{ id: "states-autocomplete" }}
wrapperStyle={{
position: "relative",
display: "inline-block",
}}
items={this.props.groupItems}
getItemValue={(item) => item.name}
shouldItemRender={(item, value) => {
return (
items={this.props.groupItems.filter(
(item) =>
item.name
.toLowerCase()
.indexOf(
value.toLowerCase()
this.state.newMember.toLowerCase()
) !== -1
);
}}
onChange={(event) =>
this.setState({
newMember: event.target.value,
})
}
onSelect={(value) =>
)}
getItemValue={(item) => item.name}
onChange={(value) =>
this.setState({ newMember: value })
}
renderInput={(props) => (
<input
{...props}
className="form-control"
/>
)}
renderMenu={(children) => (
<div
className={
"dropdown-menu " +
(children.length !== 0
? "show"
: "")
}
>
{children.map((c, idx) => (
<a
key={idx}
href="#dropdown"
className="dropdown-item"
style={{
cursor: "pointer",
}}
>
{c}
</a>
))}
</div>
)}
renderItem={(item, isHighlighted) => (
<div
className={`item ${
isHighlighted
? "item-highlighted"
: ""
}`}
key={item.name}
>
{item.name}
</div>
)}
className="form-control"
/>
</td>
<td />
<td>
<button
type="button"
Expand Down
79 changes: 16 additions & 63 deletions mwdb/web/src/components/Settings/Views/AttributeUpdate.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import React, { Component } from "react";
import { withRouter } from "react-router";
import Autocomplete from "react-autocomplete";

import _ from "lodash";

import api from "@mwdb-web/commons/api";
import { ConfirmationModal, ObjectLink, View } from "@mwdb-web/commons/ui";
import {
Autocomplete,
ConfirmationModal,
ObjectLink,
View,
} from "@mwdb-web/commons/ui";

class AttributePermissionsBox extends Component {
state = {
Expand Down Expand Up @@ -197,76 +201,25 @@ class AttributePermissionsBox extends Component {
</tr>
))}
<tr>
<td colSpan="2">
<td>
<Autocomplete
value={this.state.newMember}
inputProps={{ id: "states-autocomplete" }}
wrapperStyle={{
position: "relative",
display: "inline-block",
}}
items={this.props.groupItems}
getItemValue={(item) => item.name}
shouldItemRender={(item, value) => {
return (
items={this.props.groupItems.filter(
(item) =>
item.name
.toLowerCase()
.indexOf(
value.toLowerCase()
this.state.newMember.toLowerCase()
) !== -1
);
}}
onChange={(event) =>
this.setState({
newMember: event.target.value,
})
}
onSelect={(value) =>
)}
getItemValue={(item) => item.name}
onChange={(value) =>
this.setState({ newMember: value })
}
renderInput={(props) => (
<input
{...props}
className="form-control"
/>
)}
renderMenu={(children) => (
<div
className={
"dropdown-menu " +
(children.length !== 0
? "show"
: "")
}
>
{children.map((c, idx) => (
<a
key={idx}
href="#dropdown"
className="dropdown-item"
style={{
cursor: "pointer",
}}
>
{c}
</a>
))}
</div>
)}
renderItem={(item, isHighlighted) => (
<div
className={`item ${
isHighlighted
? "item-highlighted"
: ""
}`}
key={item.name}
>
{item.name}
</div>
)}
className="form-control"
/>
</td>
<td />
<td>
<button
type="button"
Expand Down Expand Up @@ -428,7 +381,7 @@ class AttributeUpdate extends Component {
this.setState({ disabledModalButton: true });
try {
await api.removeMetakeyDefinition(metakey);
this.props.history.push("/admin/attributes");
this.props.history.push("/attributes");
} catch (error) {
this.setState({
disabledModalButton: false,
Expand Down

0 comments on commit b8b5093

Please sign in to comment.