-
Notifications
You must be signed in to change notification settings - Fork 413
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Disable toolbar buttons when editing (#2080)
- Loading branch information
1 parent
86fa732
commit f546340
Showing
13 changed files
with
253 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
web/client/components/data/featuregrid/editors/AttributeEditor.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| const PropTypes = require('prop-types'); | ||
| const { editors } = require('react-data-grid'); | ||
|
|
||
| class AttributeEditor extends editors.SimpleTextEditor { | ||
| static propTypes = { | ||
| onTemporaryChanges: PropTypes.func | ||
| }; | ||
| static defaultProps = { | ||
| onTemporaryChanges: () => {} | ||
| }; | ||
| componentDidMount() { | ||
| if (this.props.onTemporaryChanges) { | ||
| this.props.onTemporaryChanges(true); | ||
| } | ||
| } | ||
| componentWillUnmount() { | ||
| // needs to be detouched. | ||
| // Otherwise this will trigger before other events out of the editors | ||
| // and so the tempChanges seems to be not present. | ||
| if (this.props.onTemporaryChanges) { | ||
| setTimeout( () => this.props.onTemporaryChanges(false), 300); | ||
| } | ||
| } | ||
| } | ||
| module.exports = AttributeEditor; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
web/client/components/data/featuregrid/editors/__tests__/AttributeEditor-test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| const React = require('react'); | ||
| const ReactDOM = require('react-dom'); | ||
| const AttributeEditor = require('../AttributeEditor'); | ||
| var expect = require('expect'); | ||
|
|
||
| let testColumn = { | ||
| key: 'columnKey' | ||
| }; | ||
|
|
||
|
|
||
| describe('FeatureGrid AttributeEditor component', () => { | ||
| beforeEach((done) => { | ||
| document.body.innerHTML = '<div id="container"></div>'; | ||
| setTimeout(done); | ||
| }); | ||
|
|
||
| afterEach((done) => { | ||
| ReactDOM.unmountComponentAtNode(document.getElementById("container")); | ||
| document.body.innerHTML = ''; | ||
| setTimeout(done); | ||
| }); | ||
| it('AttributeEditor', () => { | ||
|
|
||
| const cmp = ReactDOM.render(<AttributeEditor | ||
| value={"A"} | ||
| rowIdx={1} | ||
| column={testColumn}/>, document.getElementById("container")); | ||
| expect(cmp.getValue().columnKey).toBe("A"); | ||
| }); | ||
| it('Test onTemporaryChanges triggered on render', (done) => { | ||
| const onTemporaryChanges = () => done(); | ||
| ReactDOM.render(<AttributeEditor | ||
| onTemporaryChanges={onTemporaryChanges} | ||
| dataType="int" | ||
| value={1.1} | ||
| rowIdx={2} | ||
| column={testColumn}/>, document.getElementById("container")); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,10 @@ | ||
| const React = require('react'); | ||
| const Editor = require('./AttributeEditor'); | ||
| const NumberEditor = require('./NumberEditor'); | ||
| module.exports = { | ||
| "int": <NumberEditor dataType="int" inputProps={{step: 1}}/>, | ||
| "number": <NumberEditor dataType="number" /> | ||
| }; | ||
|
|
||
| const types = { | ||
| "defaultEditor": (props) => <Editor {...props}/>, | ||
| "int": (props) => <NumberEditor dataType="int" inputProps={{step: 1, type: "number"}} {...props}/>, | ||
| "number": (props) => <NumberEditor dataType="number" inputProps={{step: 1, type: "number"}} {...props}/> | ||
| }; | ||
| module.exports = (type, props) => types[type] ? types[type](props) : types.defaultEditor(props); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
web/client/components/data/featuregrid/toolbars/TButton.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| const React = require('react'); | ||
| const {Button, Glyphicon, Tooltip, OverlayTrigger} = require('react-bootstrap'); | ||
| const hideStyle = { | ||
| width: 0, | ||
| padding: 0, | ||
| borderWidth: 0 | ||
| }; | ||
| const normalStyle = { | ||
| }; | ||
|
|
||
| const getStyle = (visible) => visible ? normalStyle : hideStyle; | ||
| module.exports = ({disabled, id, tooltip="", visible, onClick, glyph, active}) => | ||
| (<OverlayTrigger placement="top" overlay={<Tooltip id={`fe-${id}`}>{tooltip}</Tooltip>}> | ||
| <Button key={id} bsStyle={active ? "success" : "primary"} disabled={disabled} id={`fg-${id}`} | ||
| style={getStyle(visible)} | ||
| className="square-button" | ||
| onClick={() => !disabled && onClick()}> | ||
| <Glyphicon glyph={glyph}/> | ||
| </Button> | ||
| </OverlayTrigger>); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
web/client/components/data/featuregrid/toolbars/__tests__/TButton-test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* | ||
| * Copyright 2017, GeoSolutions Sas. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
| var React = require('react'); | ||
| var ReactDOM = require('react-dom'); | ||
| var TButton = require('../TButton'); | ||
| var expect = require('expect'); | ||
| const spyOn = expect.spyOn; | ||
|
|
||
| const isVisibleButton = (el) => { | ||
| return el.style.width !== 0 && el.style.width !== "0" && el.style.width !== "0px"; | ||
| }; | ||
|
|
||
| describe('Featuregrid TButton', () => { | ||
| beforeEach((done) => { | ||
| document.body.innerHTML = '<div id="container"></div>'; | ||
| setTimeout(done); | ||
| }); | ||
|
|
||
| afterEach((done) => { | ||
| ReactDOM.unmountComponentAtNode(document.getElementById("container")); | ||
| document.body.innerHTML = ''; | ||
| setTimeout(done); | ||
| }); | ||
| it('TButton', () => { | ||
| const events = { | ||
| onClick: () => {} | ||
| }; | ||
| spyOn(events, "onClick"); | ||
| ReactDOM.render(<TButton id="TEST_BUTTON" onClick={events.onClick} visible />, document.getElementById("container")); | ||
| let editButton = document.getElementById("fg-TEST_BUTTON"); | ||
| expect(editButton).toExist(); | ||
| expect(isVisibleButton(editButton)).toBe(true); | ||
| editButton.click(); | ||
| expect(events.onClick).toHaveBeenCalled(); | ||
| ReactDOM.render(<TButton id="TEST_BUTTON" onClick={events.onClick} visible active/>, document.getElementById("container")); | ||
| editButton = document.getElementById("fg-TEST_BUTTON"); | ||
| expect(editButton.className.indexOf("success") >= 0).toBe(true); | ||
| ReactDOM.render(<TButton id="TEST_BUTTON" onClick={events.onClick} />, document.getElementById("container")); | ||
| editButton = document.getElementById("fg-TEST_BUTTON"); | ||
| expect(isVisibleButton(editButton)).toBe(false); | ||
| }); | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.