vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-12 20:00:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring cell edit consumer

Browse Source
This commit is contained in:
AllenFang
2018-10-09 00:18:17 +08:00
parent 95623bbb5f
commit 6735536fd8
7 changed files with 24 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-bootstrap-table2-editor/index.js
Vendored
+2 -2
View File
@@ -1,5 +1,5 @@
import createContext from './src/context';
import bindRowLevelCellEdit from './src/row-binder';
import withRowLevelCellEdit from './src/row-consumer';
import createEditingCell from './src/editing-cell-binder';
import {
EDITTYPE,
@@ -10,7 +10,7 @@ import {
export default (options = {}) => ({
createContext,
createEditingCell,
bindRowLevelCellEdit,
withRowLevelCellEdit,
DBCLICK_TO_CELL_EDIT,
DELAY_FOR_DBCLICK,
options
packages/react-bootstrap-table2-editor/src/row-binder.js → packages/react-bootstrap-table2-editor/src/row-consumer.js
Vendored
+10 -5
View File
@@ -30,9 +30,14 @@ export default (Component, selectRowEnabled) => {
/>
);
};
return props => (
<Consumer>
{ cellEdit => renderWithCellEdit(props, cellEdit) }
</Consumer>
);
function withConsumer(props) {
return (
<Consumer>
{ cellEdit => renderWithCellEdit(props, cellEdit) }
</Consumer>
);
}
withConsumer.displayName = 'WithCellEditingRowConsumer';
return withConsumer;
};
packages/react-bootstrap-table2-editor/test/cell-binder.test.js
-210
View File
@@ -1,210 +0,0 @@
import 'jsdom-global/register';
import React from 'react';
import { mount } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import op from 'react-bootstrap-table-next/src/store/operators';
import cellEditFactory from '../index';
import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from '../src/const';
import createCellEditContext from '../src/context';
import bindCellEditing from '../src/cell-binder';
describe('Cell Binder', () => {
let wrapper;
let cellEdit;
const data = [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}];
let columns;
const rowIndex = 1;
const row = { id: 1, name: 'A' };
const keyField = 'id';
const columnIndex = 1;
const { Provider } = createCellEditContext(_, op, false, jest.fn());
const BaseComponent = () => null;
const WithCellEditComponent = bindCellEditing(
props => <BaseComponent { ...props } />,
keyField,
_
);
beforeEach(() => {
columns = [{
dataField: 'id',
text: 'ID'
}, {
dataField: 'name',
text: 'Name'
}];
});
describe(`if cellEdit.mode is ${CLICK_TO_CELL_EDIT}`, () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
/>
</Provider>
);
});
it('should inject correct props to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('clickToEdit')).toBeTruthy();
expect(wrapper.find(BaseComponent).prop('dbclickToEdit')).toBeFalsy();
});
});
describe(`if cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: DBCLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
/>
</Provider>
);
});
it('should inject correct props to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('clickToEdit')).toBeFalsy();
expect(wrapper.find(BaseComponent).prop('dbclickToEdit')).toBeTruthy();
});
});
describe('if column prop is a key column', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[0] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable
/>
</Provider>
);
});
it('should inject negative editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
describe('if editable prop is true(Row Level)', () => {
describe('but column.editable prop is false', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editable = false;
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable
/>
</Provider>
);
});
it('should inject negative editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
describe('and column.editable prop is true or not defined', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable
/>
</Provider>
);
});
it('should inject positive editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
});
});
});
describe('if editable prop is false(Row Level)', () => {
describe('even if column.editable prop is true or not defined', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editable = true;
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable={ false }
/>
</Provider>
);
});
it('should inject negative editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
});
describe('if column.editable prop is a function', () => {
beforeEach(() => {
cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
columns[1].editable = jest.fn().mockReturnValue(false);
wrapper = mount(
<Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
<WithCellEditComponent
row={ row }
column={ columns[1] }
rowIndex={ rowIndex }
columnIndex={ columnIndex }
editable
/>
</Provider>
);
});
it('should call column.editable function correctly', () => {
expect(columns[1].editable).toHaveBeenCalledTimes(1);
});
it('should inject correct editable prop to target component', () => {
expect(wrapper.find(BaseComponent)).toHaveLength(1);
expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
});
});
});
packages/react-bootstrap-table2-editor/test/row-binder.test.js → packages/react-bootstrap-table2-editor/test/row-consumer.test.js
+8 -8
View File
@@ -4,12 +4,12 @@ import { mount } from 'enzyme';
import _ from 'react-bootstrap-table-next/src/utils';
import op from 'react-bootstrap-table-next/src/store/operators';
import cellEditFactory from '../index';
import cellEditFactory from '..';
import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT, DELAY_FOR_DBCLICK } from '../src/const';
import createCellEditContext from '../src/context';
import bindCellEditing from '../src/row-binder';
import withRowLevelCellEdit from '../src/row-consumer';
describe('Row Binder', () => {
describe('Row Consumer', () => {
let wrapper;
let cellEdit;
const data = [{
@@ -28,7 +28,7 @@ describe('Row Binder', () => {
describe('if cellEdit.nonEditableRows is undefined', () => {
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
const WithCellEditComponent = withRowLevelCellEdit(
props => <BaseComponent { ...props } />,
false
);
@@ -52,7 +52,7 @@ describe('Row Binder', () => {
const nonEditableRows = jest.fn().mockReturnValue([value]);
describe('if value prop is match in one of cellEdit.nonEditableRows', () => {
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
const WithCellEditComponent = withRowLevelCellEdit(
props => <BaseComponent { ...props } />,
false
);
@@ -72,7 +72,7 @@ describe('Row Binder', () => {
describe('if value prop is not match in one of cellEdit.nonEditableRows', () => {
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
const WithCellEditComponent = withRowLevelCellEdit(
props => <BaseComponent { ...props } />,
false
);
@@ -93,7 +93,7 @@ describe('Row Binder', () => {
describe(`if selectRowEnabled argument is true and cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
const WithCellEditComponent = withRowLevelCellEdit(
props => <BaseComponent { ...props } />,
true
);
@@ -115,7 +115,7 @@ describe('Row Binder', () => {
const ridx = 0;
const cidx = 1;
beforeEach(() => {
const WithCellEditComponent = bindCellEditing(
const WithCellEditComponent = withRowLevelCellEdit(
props => <BaseComponent { ...props } />,
false
);
packages/react-bootstrap-table2/src/body.js
Vendored
+1 -1
View File
@@ -59,7 +59,7 @@ class Body extends React.Component {
}
if (cellEdit.createContext) {
RowComponent = cellEdit.bindRowLevelCellEdit(RowComponent, selectRowEnabled, keyField, _);
RowComponent = cellEdit.withRowLevelCellEdit(RowComponent, selectRowEnabled, keyField, _);
additionalRowProps.EditingCellComponent = this.EditingCell;
}
packages/react-bootstrap-table2/test/body.test.js
+2 -2
View File
@@ -261,7 +261,7 @@ describe('Body', () => {
options: { onStartEdit: jest.fn() },
createContext: jest.fn(),
createEditingCell: jest.fn().mockReturnValue(EditingCellComponent),
bindRowLevelCellEdit: jest.fn().mockReturnValue(RowComponent)
withRowLevelCellEdit: jest.fn().mockReturnValue(RowComponent)
};
beforeEach(() => {
wrapper = shallow(
@@ -278,7 +278,7 @@ describe('Body', () => {
it('should render Row Component correctly', () => {
expect(wrapper.length).toBe(1);
expect(cellEdit.createEditingCell).toHaveBeenCalledTimes(1);
expect(cellEdit.bindRowLevelCellEdit).toHaveBeenCalledTimes(1);
expect(cellEdit.withRowLevelCellEdit).toHaveBeenCalledTimes(1);
expect(wrapper.find(RowComponent)).toHaveLength(2);
const aRowElement = wrapper.find(RowComponent).get(0);
expect(aRowElement.props.EditingCellComponent).toBeDefined();
packages/react-bootstrap-table2/test/contexts/index.test.js
+1 -2
View File
@@ -113,9 +113,8 @@ describe('Context', () => {
Consumer: CellEditContext.Consumer
}),
options: {},
bindCellLevelCellEdit: jest.fn().mockReturnValue(() => null),
createEditingCell: jest.fn().mockReturnValue(() => null),
bindRowLevelCellEdit: jest.fn().mockReturnValue(() => null)
withRowLevelCellEdit: jest.fn().mockReturnValue(() => null)
};
wrapper = shallow(
<BootstrapTable