sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-12 10:39:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix all buttons causing form submit and make list a controlled component

Browse Source
This commit is contained in:
hensm
2019-03-28 02:05:35 +00:00
parent 588c0073df
commit d98397da42
3 changed files with 28 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
ext/src/options/EditableList.tsx
View File

@@ -15,7 +15,6 @@ interface EditableListProps {
} }
interface EditableListState { interface EditableListState {
items: Set<string>;
addingNewItem: boolean; addingNewItem: boolean;
rawView: boolean; rawView: boolean;
rawViewValue: string; rawViewValue: string;
@@ -30,8 +29,7 @@ export default class EditableList extends Component<
super(props); super(props);
this.state = { this.state = {
items: new Set(this.props.data) addingNewItem: false
, addingNewItem: false
, rawView: false , rawView: false
, rawViewValue: "" , rawViewValue: ""
}; };
@@ -47,18 +45,18 @@ export default class EditableList extends Component<
} }
public render () { public render () {
const items = Array.from(this.state.items.values());
return ( return (
<div className="editable-list"> <div className="editable-list">
<div className="editable-list__view-actions"> <div className="editable-list__view-actions">
{ this.state.rawView && { this.state.rawView &&
<button className="editable-list__save-raw-button" <button className="editable-list__save-raw-button"
onClick={ this.handleSaveRaw }> onClick={ this.handleSaveRaw }
type="button">
{ _("optionsUserAgentWhitelistSaveRaw") } { _("optionsUserAgentWhitelistSaveRaw") }
</button> } </button> }
<button className="editable-list__view-button" <button className="editable-list__view-button"
onClick={ this.handleSwitchView }> onClick={ this.handleSwitchView }
type="button">
{ this.state.rawView { this.state.rawView
? _("optionsUserAgentWhitelistBasicView") ? _("optionsUserAgentWhitelistBasicView")
: _("optionsUserAgentWhitelistRawView") } : _("optionsUserAgentWhitelistRawView") }
@@ -68,14 +66,14 @@ export default class EditableList extends Component<
{ this.state.rawView { this.state.rawView
? ( ? (
<textarea className="editable-list__raw-view" <textarea className="editable-list__raw-view"
rows={ items.length} rows={ this.props.data.length}
value={ this.state.rawViewValue} value={ this.state.rawViewValue}
onChange={ this.handleRawViewTextAreaChange } onChange={ this.handleRawViewTextAreaChange }
ref={ el => { this.rawViewTextArea = el; }}> ref={ el => { this.rawViewTextArea = el; }}>
</textarea> </textarea>
) : ( ) : (
<ul className="editable-list__items"> <ul className="editable-list__items">
{ items.map((item, i) => { this.props.data.map((item, i) =>
<EditableListItem text={ item } <EditableListItem text={ item }
itemPattern={ this.props.itemPattern } itemPattern={ this.props.itemPattern }
itemPatternError={ this.props.itemPatternError } itemPatternError={ this.props.itemPatternError }
@@ -92,7 +90,8 @@ export default class EditableList extends Component<
<div className="editable-list__item editable-list__item-actions"> <div className="editable-list__item editable-list__item-actions">
<button className="editable-list__add-button" <button className="editable-list__add-button"
onClick={ this.handleAddItem }> onClick={ this.handleAddItem }
type="button">
{ _("optionsUserAgentWhitelistAddItem") } { _("optionsUserAgentWhitelistAddItem") }
</button> </button>
</div> </div>
@@ -103,26 +102,17 @@ export default class EditableList extends Component<
} }
private handleItemRemove (item: string) { private handleItemRemove (item: string) {
this.setState(currentState => { const newItems = new Set(this.props.data);
const newItems = new Set(currentState.items); newItems.delete(item);
newItems.delete(item);
return { this.props.onChange([...newItems]);
items: newItems
};
}, () => {
this.props.onChange(Array.from(this.state.items));
});
} }
private handleItemEdit (item: string, newValue: string) { private handleItemEdit (item: string, newValue: string) {
this.setState(currentState => ({ this.props.onChange(this.props.data.map(
items: new Set([...currentState.items] currentItem => currentItem === item
.map(currentItem => currentItem === item
? newValue ? newValue
: currentItem)) : currentItem));
}), () => {
this.props.onChange(Array.from(this.state.items));
});
} }
private handleSwitchView () { private handleSwitchView () {
@@ -136,7 +126,7 @@ export default class EditableList extends Component<
return { return {
rawView: true 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(""); this.rawViewTextArea.setCustomValidity("");
} }
return { this.props.onChange(newItems);
items: new Set(newItems)
};
}, () => {
this.props.onChange(Array.from(this.state.items));
}); });
} }
@@ -189,11 +175,10 @@ export default class EditableList extends Component<
} }
private handleNewItemEdit (item: string, newItem: string) { private handleNewItemEdit (item: string, newItem: string) {
this.setState(currentState => ({ this.setState({
items: new Set([ ...currentState.items, newItem ]) addingNewItem: false
, addingNewItem: false }, () => {
}), () => { this.props.onChange([ ...this.props.data, newItem ]);
this.props.onChange(Array.from(this.state.items));
}); });
} }
} }

6
ext/src/options/EditableListItem.tsx
View File

@@ -58,10 +58,12 @@ export default class EditableListItem extends Component<
onKeyPress={ this.handleInputKeyPress }/> onKeyPress={ this.handleInputKeyPress }/>
: this.props.text } : this.props.text }
</div> </div>
<button onClick={ this.handleEditBegin }> <button onClick={ this.handleEditBegin }
type="button">
{ _("optionsUserAgentWhitelistEditItem") } { _("optionsUserAgentWhitelistEditItem") }
</button> </button>
<button onClick={ this.handleRemove }> <button onClick={ this.handleRemove }
type="button">
{ _("optionsUserAgentWhitelistRemoveItem") } { _("optionsUserAgentWhitelistRemoveItem") }
</button> </button>
</li> </li>

3
ext/src/options/index.tsx
View File

@@ -244,7 +244,8 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div id="status-line"> <div id="status-line">
{ this.state.hasSaved && _("optionsSaved") } { this.state.hasSaved && _("optionsSaved") }
</div> </div>
<button onClick={ this.handleReset }> <button onClick={ this.handleReset }
type="button">
{ _("optionsReset") } { _("optionsReset") }
</button> </button>
<button type="submit" <button type="submit"