diff --git a/ext/src/options/EditableList.tsx b/ext/src/options/EditableList.tsx index 459c3db..cd5ec37 100644 --- a/ext/src/options/EditableList.tsx +++ b/ext/src/options/EditableList.tsx @@ -15,7 +15,6 @@ interface EditableListProps { } interface EditableListState { - items: Set; addingNewItem: boolean; rawView: boolean; rawViewValue: string; @@ -30,8 +29,7 @@ export default class EditableList extends Component< super(props); this.state = { - items: new Set(this.props.data) - , addingNewItem: false + addingNewItem: false , rawView: false , rawViewValue: "" }; @@ -47,18 +45,18 @@ export default class EditableList extends Component< } public render () { - const items = Array.from(this.state.items.values()); - return (
{ this.state.rawView && }
@@ -103,26 +102,17 @@ export default class EditableList extends Component< } private handleItemRemove (item: string) { - this.setState(currentState => { - const newItems = new Set(currentState.items); - newItems.delete(item); - return { - items: newItems - }; - }, () => { - this.props.onChange(Array.from(this.state.items)); - }); + const newItems = new Set(this.props.data); + newItems.delete(item); + + this.props.onChange([...newItems]); } private handleItemEdit (item: string, newValue: string) { - this.setState(currentState => ({ - items: new Set([...currentState.items] - .map(currentItem => currentItem === item + this.props.onChange(this.props.data.map( + currentItem => currentItem === item ? newValue - : currentItem)) - }), () => { - this.props.onChange(Array.from(this.state.items)); - }); + : currentItem)); } private handleSwitchView () { @@ -136,7 +126,7 @@ export default class EditableList extends Component< return { rawView: true - , rawViewValue: Array.from(currentState.items.values()).join("\n") + , rawViewValue: this.props.data.join("\n") }; }); } @@ -158,11 +148,7 @@ export default class EditableList extends Component< this.rawViewTextArea.setCustomValidity(""); } - return { - items: new Set(newItems) - }; - }, () => { - this.props.onChange(Array.from(this.state.items)); + this.props.onChange(newItems); }); } @@ -189,11 +175,10 @@ export default class EditableList extends Component< } private handleNewItemEdit (item: string, newItem: string) { - this.setState(currentState => ({ - items: new Set([ ...currentState.items, newItem ]) - , addingNewItem: false - }), () => { - this.props.onChange(Array.from(this.state.items)); + this.setState({ + addingNewItem: false + }, () => { + this.props.onChange([ ...this.props.data, newItem ]); }); } } diff --git a/ext/src/options/EditableListItem.tsx b/ext/src/options/EditableListItem.tsx index 00dfc5c..a6e3197 100644 --- a/ext/src/options/EditableListItem.tsx +++ b/ext/src/options/EditableListItem.tsx @@ -58,10 +58,12 @@ export default class EditableListItem extends Component< onKeyPress={ this.handleInputKeyPress }/> : this.props.text }
- - diff --git a/ext/src/options/index.tsx b/ext/src/options/index.tsx index 8ebce70..1bc4dbb 100644 --- a/ext/src/options/index.tsx +++ b/ext/src/options/index.tsx @@ -244,7 +244,8 @@ class OptionsApp extends Component<{}, OptionsAppState> {
{ this.state.hasSaved && _("optionsSaved") }
-