gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #576 from netlify/entry-disable-save

Browse Source 
Disable "Save" button when entry has not been changed.
This commit is contained in:
Shawn Erquhart 2017-09-15 16:12:34 -04:00 committed by GitHub
commit 63b874e295
5 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/EntryEditor/EntryEditor.js
View File

@ -47,6 +47,7 @@ class EntryEditor extends Component {
fieldsErrors, fieldsErrors,
getAsset, getAsset,
onChange, onChange,
enableSave,
showDelete, showDelete,
onDelete, onDelete,
onValidate, onValidate,
@ -131,6 +132,7 @@ class EntryEditor extends Component {
onCancelEdit={onCancelEdit} onCancelEdit={onCancelEdit}
onDelete={onDelete} onDelete={onDelete}
showDelete={showDelete} showDelete={showDelete}
enableSave={enableSave}
/> />
</div> </div>
</div> </div>
@ -149,6 +151,7 @@ EntryEditor.propTypes = {
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
onValidate: PropTypes.func.isRequired, onValidate: PropTypes.func.isRequired,
onPersist: PropTypes.func.isRequired, onPersist: PropTypes.func.isRequired,
enableSave: PropTypes.bool.isRequired,
showDelete: PropTypes.bool.isRequired, showDelete: PropTypes.bool.isRequired,
onDelete: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired,
onRemoveAsset: PropTypes.func.isRequired, onRemoveAsset: PropTypes.func.isRequired,

4
src/components/EntryEditor/EntryEditorToolbar.js
View File

@ -5,11 +5,12 @@ const EntryEditorToolbar = (
{ {
isPersisting, isPersisting,
onPersist, onPersist,
enableSave,
showDelete, showDelete,
onDelete, onDelete,
onCancelEdit, onCancelEdit,
}) => { }) => {
const disabled = isPersisting; const disabled = !enableSave || isPersisting;
return ( return (
<div> <div>
<Button <Button
@ -37,6 +38,7 @@ const EntryEditorToolbar = (
EntryEditorToolbar.propTypes = { EntryEditorToolbar.propTypes = {
isPersisting: PropTypes.bool, isPersisting: PropTypes.bool,
onPersist: PropTypes.func.isRequired, onPersist: PropTypes.func.isRequired,
enableSave: PropTypes.bool.isRequired,
showDelete: PropTypes.bool.isRequired, showDelete: PropTypes.bool.isRequired,
onDelete: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired,
onCancelEdit: PropTypes.func.isRequired, onCancelEdit: PropTypes.func.isRequired,

15
src/components/EntryEditor/__tests__/EntryEditorToolbar.spec.js
View File

@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import EntryEditorToolbar from '../EntryEditorToolbar'; import EntryEditorToolbar from '../EntryEditorToolbar';
describe('EntryEditorToolbar', () => { describe('EntryEditorToolbar', () => {
it('should have both buttons enabled initially', () => { it('should have the Save button disabled initally, and the Cancel button enabled', () => {
const component = shallow( const component = shallow(
<EntryEditorToolbar <EntryEditorToolbar
onPersist={() => {}} onPersist={() => {}}
@ -15,6 +15,19 @@ describe('EntryEditorToolbar', () => {
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();
}); });
it('should enable the Save button', () => {
const component = shallow(
<EntryEditorToolbar
enableSave
onPersist={() => {}}
onCancelEdit={() => {}}
onDelete={() => {}}
/>
);
const tree = component.html();
expect(tree).toMatchSnapshot();
});
it('should disable and update label of Save button when persisting', () => { it('should disable and update label of Save button when persisting', () => {
const component = shallow( const component = shallow(
<EntryEditorToolbar <EntryEditorToolbar

4
src/components/EntryEditor/__tests__/__snapshots__/EntryEditorToolbar.spec.js.snap
View File

@ -2,4 +2,6 @@
exports[`EntryEditorToolbar should disable and update label of Save button when persisting 1`] = `"<div><button disabled=\\"\\" class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Saving...</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`; exports[`EntryEditorToolbar should disable and update label of Save button when persisting 1`] = `"<div><button disabled=\\"\\" class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Saving...</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`;
exports[`EntryEditorToolbar should have both buttons enabled initially 1`] = `"<div><button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Save</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`; exports[`EntryEditorToolbar should enable the Save button 1`] = `"<div><button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Save</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`;
exports[`EntryEditorToolbar should have the Save button disabled initally, and the Cancel button enabled 1`] = `"<div><button disabled=\\"\\" class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Save</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`;

1
src/containers/EntryPage.js
View File

@ -151,6 +151,7 @@ class EntryPage extends React.Component {
onPersist={this.handlePersistEntry} onPersist={this.handlePersistEntry}
onDelete={this.handleDeleteEntry} onDelete={this.handleDeleteEntry}
showDelete={this.props.showDelete} showDelete={this.props.showDelete}
enableSave={entryDraft.get('hasChanged')}
onCancelEdit={this.handleCloseEntry} onCancelEdit={this.handleCloseEntry}
/> />
); );