From 03f51c36ac9f57d4fd4692ee7af39dd3efc36a0f Mon Sep 17 00:00:00 2001 From: AllenFang Date: Tue, 1 May 2018 17:26:03 +0800 Subject: [PATCH] add example for rich cell editor --- .../cell-edit/checkbox-editor-table.js | 64 +++++++++ .../examples/cell-edit/custom-editor-table.js | 130 ++++++++++++++++++ .../examples/cell-edit/date-editor-table.js | 77 +++++++++++ .../cell-edit/dropdown-editor-table.js | 100 ++++++++++++++ .../cell-edit/textarea-editor-table.js | 68 +++++++++ .../src/utils/common.js | 28 +++- .../stories/index.js | 12 +- 7 files changed, 476 insertions(+), 3 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/checkbox-editor-table.js create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-table.js create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/checkbox-editor-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/checkbox-editor-table.js new file mode 100644 index 0000000..39a3df0 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/cell-edit/checkbox-editor-table.js @@ -0,0 +1,64 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; +import Code from 'components/common/code-block'; +import { todosGenerator } from 'utils/common'; + +const todos = todosGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Todo ID' +}, { + dataField: 'todo', + text: 'Todo Name' +}, { + dataField: 'done', + text: 'Done', + editor: { + type: Type.CHECKBOX, + value: 'Y:N' + } +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; + +const columns = [{ + dataField: 'id', + text: 'Todo ID' +}, { + dataField: 'todo', + text: 'Todo Name' +}, { + dataField: 'done', + text: 'Done', + editor: { + type: Type.CHECKBOX, + value: 'Y:N' + } +}]; + + +`; + +export default () => ( +
+

Dropdown Editor

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js new file mode 100644 index 0000000..99a0f95 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js @@ -0,0 +1,130 @@ +/* eslint react/prefer-stateless-function: 0 */ +/* eslint no-return-assign: 0 */ +/* eslint no-unused-vars: 0 */ +import React from 'react'; +import PropTypes from 'prop-types'; +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory from 'react-bootstrap-table2-editor'; +import Code from 'components/common/code-block'; +import { productsQualityGenerator } from 'utils/common'; + +const products = productsQualityGenerator(); + +class QualityRanger extends React.Component { + static propTypes = { + value: PropTypes.number, + onUpdate: PropTypes.func.isRequired + } + static defaultProps = { + value: 0 + } + getValue() { + return parseInt(this.range.value, 10); + } + render() { + const { value, onUpdate, ...rest } = this.props; + return [ + this.range = node } + type="range" + min="0" + max="100" + />, + + ]; + } +} + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'quality', + text: 'Product Quality', + editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => ( + + ) +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory from 'react-bootstrap-table2-editor'; + +class QualityRanger extends React.Component { + static propTypes = { + value: PropTypes.number, + onUpdate: PropTypes.func.isRequired + } + static defaultProps = { + value: 0 + } + getValue() { + return parseInt(this.range.value, 10); + } + render() { + const { value, onUpdate, ...rest } = this.props; + return [ + this.range = node } + type="range" + min="0" + max="100" + />, + + ]; + } +} + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'quality', + text: 'Product Quality', + editorRenderer: (editorProps, value, row, rowIndex, columnIndex) => ( + + ) +}]; + + +`; + +export default () => ( +
+

Dropdown Editor

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js new file mode 100644 index 0000000..e507caa --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js @@ -0,0 +1,77 @@ +/* eslint prefer-template: 0 */ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; +import Code from 'components/common/code-block'; +import { stockGenerator } from 'utils/common'; + +const stocks = stockGenerator(); + +const columns = [{ + dataField: 'id', + text: 'ID' +}, { + dataField: 'name', + text: 'Name' +}, { + dataField: 'inStockDate', + text: 'Stock Date', + formatter: (cell) => { + let dateObj = cell; + if (typeof cell !== 'object') { + dateObj = new Date(cell); + } + return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`; + }, + editor: { + type: Type.DATE + } +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; + +const columns = [{ + dataField: 'id', + text: 'ID' +}, { + dataField: 'name', + text: 'Name' +}, { + dataField: 'inStockDate', + text: 'Stock Date', + formatter: (cell) => { + let dateObj = cell; + if (typeof cell !== 'object') { + dateObj = new Date(cell); + } + return \`$\{('0' + dateObj.getDate()).slice(-2)}/$\{('0' + (dateObj.getMonth() + 1)).slice(-2)}/$\{dateObj.getFullYear()}\`; + }, + editor: { + type: Type.DATE + } +}]; + + +`; + +export default () => ( +
+

Dropdown Editor

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-table.js new file mode 100644 index 0000000..11fcbbf --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-table.js @@ -0,0 +1,100 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; +import Code from 'components/common/code-block'; +import { jobsGenerator } from 'utils/common'; + +const jobs = jobsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'name', + text: 'Job Name' +}, { + dataField: 'owner', + text: 'Job Owner' +}, { + dataField: 'type', + text: 'Job Type', + editor: { + type: Type.SELECT, + options: [{ + value: 'A', + label: 'A' + }, { + value: 'B', + label: 'B' + }, { + value: 'C', + label: 'C' + }, { + value: 'D', + label: 'D' + }, { + value: 'E', + label: 'E' + }] + } +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; + +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'name', + text: 'Job Name' +}, { + dataField: 'owner', + text: 'Job Owner' +}, { + dataField: 'type', + text: 'Job Type', + editor: { + type: Type.SELECT, + options: [{ + value: 'A', + label: 'A' + }, { + value: 'B', + label: 'B' + }, { + value: 'C', + label: 'C' + }, { + value: 'D', + label: 'D' + }, { + value: 'E', + label: 'E' + }] + } +}]; + + +`; + +export default () => ( +
+

Dropdown Editor

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js new file mode 100644 index 0000000..7b21907 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js @@ -0,0 +1,68 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; +import Code from 'components/common/code-block'; +import { jobsGenerator } from 'utils/common'; + +const jobs = jobsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'name', + text: 'Job Name' +}, { + dataField: 'owner', + text: 'Job Owner' +}, { + dataField: 'type', + text: 'Job Type', + editor: { + type: Type.TEXTAREA + } +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; + +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'name', + text: 'Job Name' +}, { + dataField: 'owner', + text: 'Job Owner' +}, { + dataField: 'type', + text: 'Job Type', + editor: { + type: Type.TEXTAREA + } +}]; + + +`; + +export default () => ( +
+

Dropdown Editor

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js index 0f1c9f1..b8f954e 100644 --- a/packages/react-bootstrap-table2-example/src/utils/common.js +++ b/packages/react-bootstrap-table2-example/src/utils/common.js @@ -1,3 +1,5 @@ +/* eslint no-mixed-operators: 0 */ + /** * products generator for stories * @@ -27,12 +29,34 @@ export const productsQualityGenerator = (quantity = 5) => quality: index % 3 })); +const jobType = ['A', 'B', 'C', 'D', 'E']; + +const jobOwner = ['Allen', 'Bob', 'Cindy']; + export const jobsGenerator = (quantity = 5) => Array.from({ length: quantity }, (value, index) => ({ id: index, name: `Job name ${index}`, - owner: Math.floor(Math.random() * 3), - type: Math.floor(Math.random() * 5) + owner: jobOwner[Math.floor((Math.random() * 2) + 1)], + type: jobType[Math.floor((Math.random() * 4) + 1)] + })); + +export const todosGenerator = (quantity = 5) => + Array.from({ length: quantity }, (value, index) => ({ + id: index, + todo: `Todo item ${index}`, + done: Math.random() > 0.4 ? 'Y' : 'N' + })); + +const startDate = new Date(2017, 0, 1); +const endDate = new Date(); + +export const stockGenerator = (quantity = 5) => + Array.from({ length: quantity }, (value, index) => ({ + id: index, + name: `Todo item ${index}`, + inStockDate: + new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())) })); export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 7e3ba5e..42f2985 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -79,6 +79,11 @@ import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table'; import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table'; import EditorStyleTable from 'examples/cell-edit/editor-style-table'; import EditorClassTable from 'examples/cell-edit/editor-class-table'; +import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table'; +import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table'; +import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table'; +import DateEditorTable from 'examples/cell-edit/date-editor-table'; +import CustomEditorTable from 'examples/cell-edit/custom-editor-table'; // work on row selection import SingleSelectionTable from 'examples/row-selection/single-selection'; @@ -200,7 +205,12 @@ storiesOf('Cell Editing', module) .add('Custom Cell Style', () => ) .add('Custom Cell Classes', () => ) .add('Custom Editor Classes', () => ) - .add('Custom Editor Style', () => ); + .add('Custom Editor Style', () => ) + .add('Dropdown Editor', () => ) + .add('Textarea Editor', () => ) + .add('Checkbox Editor', () => ) + .add('Date Editor', () => ) + .add('Custom Editor', () => ); storiesOf('Row Selection', module) .add('Single Selection', () => )