Browse Source

Add a clear button to FileInput to allow custom styles to be cleared (#2031) (#3669)

tags/v4.7.1
reduckted 1 year ago
committed by Jesse Ostrander
parent
commit
76e8c14502
2 changed files with 24 additions and 5 deletions
  1. +12
    -2
      src/renderer/ui/components/settings/FileInput.js
  2. +12
    -3
      test/electron-renderer/ui/FileInput_spec.js

+ 12
- 2
src/renderer/ui/components/settings/FileInput.js View File

@@ -37,11 +37,15 @@ class FileInput extends Component {

_keyDown = (event) => {
if (event.which === 27) {
this.props.setSetting(this.props.settingsKey, null);
this.props.bonusEvents.forEach((eventName) => Emitter.fire(eventName));
this._triggerClear();
}
}

_triggerClear = () => {
this.props.setSetting(this.props.settingsKey, null);
this.props.bonusEvents.forEach((eventName) => Emitter.fire(eventName));
}

render() {
return (
<div style={{ display: 'flex' }}>
@@ -58,6 +62,12 @@ class FileInput extends Component {
onClick={this._triggerFile}
onKeyDown={this._keyDown}
/>
<RaisedButton
onTouchTap={this._triggerClear}
style={{ backgroundColor: 'transparent', marginLeft: 14, marginTop: 4, maxHeight: 0, minWidth: 44 }}
>
<i className="material-icons" style={{ verticalAlign: 'middle' }}>clear</i>
</RaisedButton>
</div>
);
}


+ 12
- 3
test/electron-renderer/ui/FileInput_spec.js View File

@@ -36,8 +36,8 @@ describe('<FileInput />', () => {
remote.dialog.showOpenDialog = (bw, opts, cb) => { cb(dummyFileList); callCount++; };
});

it('should render a button', () => {
component.find('RaisedButton').length.should.be.equal(1);
it('should render buttons to select a file and clear', () => {
component.find('RaisedButton').length.should.be.equal(2);
});

it('should render a text input field', () => {
@@ -46,7 +46,8 @@ describe('<FileInput />', () => {

it('should open a file dialog when the button is clicked', () => {
callCount.should.be.equal(0);
component.find('RaisedButton').props().onTouchTap();
const button = component.find('RaisedButton').at(0);
button.props().onTouchTap();
callCount.should.be.equal(1);
});

@@ -66,6 +67,7 @@ describe('<FileInput />', () => {
dummyFileList = [__filename];
component.find('TextField').props().onClick();
fired.should.have.property('settings:set');
fired['settings:set'].should.deep.equal([[{ key: 'fakeSettingKey', value: __filename }]]);
});

it('should fire the bonus events when the file exists', () => {
@@ -74,6 +76,13 @@ describe('<FileInput />', () => {
fired.should.have.property('BonusEvent1');
});

it('should update the correct setting when cleared', () => {
const button = component.find('RaisedButton').at(1);
button.props().onTouchTap();
fired.should.have.property('settings:set');
fired['settings:set'].should.deep.equal([[{ key: 'fakeSettingKey', value: null }]]);
});

afterEach(() => {
component.unmount();
});


Loading…
Cancel
Save