Make Multiselect functional

This commit is contained in:
Nathan Barber
2021-04-07 12:15:23 -04:00
parent 752d6305fd
commit c3fc549bd6
4 changed files with 54 additions and 68 deletions

File diff suppressed because one or more lines are too long

View File

@@ -25,7 +25,6 @@ const CreateGroup = (props) => {
id="group-name" id="group-name"
placeholder="group name..." placeholder="group name..."
onChange={(e) => { onChange={(e) => {
console.log(e.target.value);
setGroupName(e.target.value); setGroupName(e.target.value);
}} }}
></input> ></input>

View File

@@ -1,61 +1,41 @@
import React, { Component } from "react"; import React, { useState } from "react";
import "./multi-select.css"; import "./multi-select.css";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default class Multiselect extends Component { const Multiselect = (props) => {
static get propTypes() { var { onChange, options, value } = props;
return {
value: PropTypes.array,
onChange: PropTypes.func,
options: PropTypes.array,
};
}
constructor(props) { var [selected, setSelected] = useState(value);
super(props);
this.state = {
selected: props.value,
};
}
render() {
var { onChange, options, value } = this.props;
if (!options) return null; if (!options) return null;
return ( return (
<div className="multi-container"> <div className="multi-container">
<div> <div>
{this.state.selected.map((e, i) => ( {selected.map((e, i) => (
<div <div
key={"selected" + i} key={"selected" + i}
className="item selected" className="item selected"
onClick={() => { onClick={() => {
let updated_selection = this.state.selected let updated_selection = selected
.slice(0, i) .slice(0, i)
.concat(this.state.selected.slice(i + 1)); .concat(selected.slice(i + 1));
onChange(updated_selection, options); onChange(updated_selection, options);
this.setState( setSelected(updated_selection);
Object.assign({}, this.state, { selected: updated_selection })
);
}} }}
> >
{e} {e}
</div> </div>
))} ))}
{options.map((e, i) => {options.map((e, i) =>
this.state.selected.includes(e) ? undefined : ( selected.includes(e) ? undefined : (
<div <div
key={"unselected" + i} key={"unselected" + i}
className="item unselected" className="item unselected"
onClick={() => { onClick={() => {
let updated_selection = this.state.selected.concat([e]); let updated_selection = selected.concat([e]);
onChange(updated_selection, options); onChange(updated_selection, options);
this.setState( setSelected(updated_selection);
Object.assign({}, this.state, {
selected: updated_selection,
})
);
}} }}
> >
{e} {e}
@@ -65,5 +45,12 @@ export default class Multiselect extends Component {
</div> </div>
</div> </div>
); );
} };
}
Multiselect.propTypes = {
value: PropTypes.array,
onChange: PropTypes.func,
options: PropTypes.array,
};
export default Multiselect;

File diff suppressed because one or more lines are too long