diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 83c6c8a..0000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["react", "es2015", "stage-0"] -} \ No newline at end of file diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index ca70c65..0000000 --- a/.eslintrc +++ /dev/null @@ -1,27 +0,0 @@ -{ - "extends": "airbnb", - "parser": "babel-eslint", - "env": { - "browser": true, - "jest": true, - "node": true - }, - "plugins": [ - "react" - ], - "rules": { - "comma-dangle": ["error", "never"], - "react/jsx-curly-spacing": [2, "always"], - "react/forbid-prop-types": 0, - "react/jsx-filename-extension": 0, - "react/jsx-space-before-closing": 0, - "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }], - "import/extensions": 0, // skip import extensions - "import/no-unresolved": [0, { "ignore": ["^react-bootstrap-table"] }], // monorepo setup - "import/prefer-default-export": 0, - "import/no-extraneous-dependencies": 0 - }, - "globals": { - "jest": false - } -} \ No newline at end of file diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 1f0b21e..0000000 --- a/.gitignore +++ /dev/null @@ -1,17 +0,0 @@ -# node -node_modules -package-lock.json - -# testing -coverage -.eslintcache - -# misc -.DS_Store -.vscode - -# logs -lerna-debug.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 02a5492..0000000 --- a/.travis.yml +++ /dev/null @@ -1,20 +0,0 @@ -language: node_js - -node_js: - - "7" - - "6" - -cache: - yarn: true - -branches: - only: - # skip master branch when it's under development phase - # - master - - develop - -before_install: - - curl -o- -L https://yarnpkg.com/install.sh | bash -s - - export PATH="$HOME/.yarn/bin:$PATH" - -install: yarn install diff --git a/89889688147bd7575d6327160d64e760.svg b/89889688147bd7575d6327160d64e760.svg new file mode 100644 index 0000000..94fb549 --- /dev/null +++ b/89889688147bd7575d6327160d64e760.svg @@ -0,0 +1,288 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 9d8ed01..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,22 +0,0 @@ -# Contributing - -# Issues -Before opening an issue, please make sure your problem or request doesn't exist. When opening an issue, please provide the following information if possible: - -* Example code or repo (please keep it simple and minimal) -* Steps to reproduce. -* `react-bootstrap-table2` version. - -Additionally, asking questions and requesting new features are welcomed via [issue tracker](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues). - -# Pull Requests -Check [here](./docs/development.md) for getting started with development. - -* We recommend filing an [issue](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues) before you implement any new features. -* Please ensure that all the test suites have passed before submitting a PR. Besides, always test the actual business logic. -* If your PR is trying to fix a bug, please describe the details as much as you could and tag the bug number with hashtag. - -# For the members of react-bootstrap-table2 org -* Please convert the ticket to issue when the ticket has moved from `Backlog` to `Ready`. -* Please update the docs if any API, feature or component props was changed or added. The code and docs should always be in sync. -* Please add a story example if any new feature was implemented. \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index 1d5d13d..0000000 --- a/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# react-bootstrap-table2 -Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table) - -## The problems/features I want to solve -* Performance -* Fully compatiable with bootstrap 3 and 4(`react-bootstrap-table@4.0.0` already done) -* Clean Code and Testing -* Decrease the size of bundled file -* **Split module/functionality from core module, make core module more lightweight** -* Use [`storybook`](https://github.com/storybooks/storybook) to build examples -* Support the aggregation(summary) view -* Support the table footer -* Support column/row span on header and body -* Support sticky header -* Support table section([react-bootstrap-table#721](https://github.com/AllenFang/react-bootstrap-table/pull/721)) -* Handle events well -* Fix unalign issues -* Make **stateless** table more easy to use(`react-bootstrap-table` alread have `remote` mode but have some bugs) -* Customizable table -* Support the nested data([react-bootstrap-table#50](https://github.com/AllenFang/react-bootstrap-table/issues/50◊)) -* Consider to support column resize -* Consider to make animation on `react-bootstrap-table2` more easy - -## The feature may lost on react-bootstrap-table -* Have a great chance that I don't support the vertical scrollbar on table \ No newline at end of file diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 05da321..0000000 --- a/docs/README.md +++ /dev/null @@ -1,261 +0,0 @@ -# Documentation - -## BootstrapTable Props - -#### Required -* [keyField (**required**)](#keyField) -* [data (**required**)](#data) -* [columns (**required**)](#columns) - -#### Optional -* [remote](#remote) -* [loading](#loading) -* [caption](#caption) -* [striped](#striped) -* [bordered](#bordered) -* [hover](#hover) -* [condensed](#condensed) -* [cellEdit](#cellEdit) -* [selectRow](#selectRow) -* [rowStyle](#rowStyle) -* [rowClasses](#rowClasses) -* [rowEvents](#rowEvents) -* [defaultSorted](#defaultSorted) -* [pagination](#pagination) -* [filter](#filter) -* [onTableChange](#onTableChange) - -### keyField(**required**) - [String] -Tells `react-bootstrap-table2` which column is unique. - -### data(**required**) - [Array] -Provides data for your table. It accepts a single Array object. - -### columns(**required**) - [Object] -Accepts a single Array object, please see [columns definition](./columns.md) for more detail. - -### remote - [Bool | Object] -Default is `false`, if enable`remote`, you are suppose to handle all the table change events, like: pagination, insert, filtering etc. -This is a chance that you can connect to your remote server or database to manipulate your data. -For flexibility reason, you can control what functionality should be handled on remote via a object return: - -```js -remote={ { filter: true } } -``` - -In above case, only column filter will be handled on remote. - -> Note: when remote is enable, you are suppose to give [`onTableChange`](#onTableChange) prop on `BootstrapTable` -> It's the only way to communicate to your remote server and update table states. - -A special case for remote pagination: -```js -remote={ { pagination: true, filter: false, sort: false } } -``` - -In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort` etc) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas. - -### loading - [Bool] -Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled. -When `loading` is `true`, `react-bootstrap-table` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table` will ignore the overlay rendering. - -### overlay - [Function] -`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table-overlay` can be a good option for you: - -```sh -$ npm install react-bootstrap-table-overlay -``` -```js -import overlayFactory from 'react-bootstrap-table-overlay'; - - -``` - -Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`: - -```js -overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) } -``` - -### caption - [String | Node] -Same as HTML [caption tag](https://www.w3schools.com/TAgs/tag_caption.asp), you can set it as String or a React JSX. - -### striped - [Bool] -Same as bootstrap `.table-striped` class for adding zebra-stripes to a table. -### bordered - [Bool] -Same as bootstrap `.table-bordered` class for adding borders to a table and table cells. -### hover - [Bool] -Same as bootstrap `.table-hover` class for adding mouse hover effect (grey background color) on table rows. -### condensed - [Bool] -Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half. - -### cellEdit - [Object] -Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail. - -### selectRow - [Object] -Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail. - -### rowStyle = [Object | Function] -Custom the style of table rows: - -```js - -``` - -This prop also accept a callback function for flexible to custom row style: - -```js -const rowStyle = (row, rowIndex) => { - return { ... }; -}; - - -``` - -### rowClasses = [String | Function] -Custom the style of table rows: - -```js - -``` - -This prop also accept a callback function for flexible to custom row style: - -```js -const rowClasses = (row, rowIndex) => { - return 'custom-row-class'; -}; - - -``` - -### rowEvents - [Object] -Custom the events on row: - -```js -const rowEvents = { - onClick: (e) => { - .... - } -}; - -``` - -### defaultSorted - [Array] -`defaultSorted` accept an object array which allow you to define the default sort columns when first render. - -```js -const defaultSorted = [{ - dataField: 'name', // if dataField is not match to any column you defined, it will be ignored. - order: 'desc' // desc or asc -}]; -``` - -### pagination - [Object] -`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly. - -```sh -$ npm install react-bootstrap-table2-paginator --save -``` - -After installation of `react-bootstrap-table2-paginator`, you can enable pagination on `react-bootstrap-table2` easily: - -```js -import paginator from 'react-bootstrap-table2-paginator'; - -// omit... - - -``` - -`paginator` is a function actually and allow to pass some pagination options, following we list all the available options: - -```js -paginator({ - page, // Specify the current page. It's necessary when remote is enabled - sizePerPage, // Specify the size per page. It's necessary when remote is enabled - totalSize, // Total data size. It's necessary when remote is enabled - pageStartIndex: 0, // first page will be 0, default is 1 - paginationSize: 3, // the pagination bar size, default is 5 - sizePerPageList: [ { - text: '5', value: 5 - }, { - text: '10', value: 10 - }, { - text: 'All', value: products.length - } ], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text - withFirstAndLast: false, // hide the going to first and last page button - alwaysShowAllBtns: true, // always show the next and previous page button - firstPageText: 'First', // the text of first page button - prePageText: 'Prev', // the text of previous page button - nextPageText: 'Next', // the text of next page button - lastPageText: 'Last', // the text of last page button - nextPageTitle: 'Go to next', // the title of next page button - prePageTitle: 'Go to previous', // the title of previous page button - firstPageTitle: 'Go to first', // the title of first page button - lastPageTitle: 'Go to last', // the title of last page button - hideSizePerPage: true, // hide the size per page dorpdown - hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false - onPageChange: (page, sizePerPage) => {}, // callback function when page was changing - onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing -}) -``` - -### filter - [Object] -`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly. - -```sh -$ npm install react-bootstrap-table2-filter --save -``` - -After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily: - -```js -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; - -// omit... -const columns = [ { - dataField: 'id', - text: 'Production ID' -}, { - dataField: 'name', - text: 'Production Name', - filter: textFilter() // apply text filter -}, { - dataField: 'price', - text: 'Production Price' -} ]; - -``` - -### onTableChange - [Function] -This callback function will be called when [`remote`](#remote) enabled only. - -```js -const onTableChange = (type, newState) => { - // handle any data change here -} - -``` - -There's only two arguments will be passed to `onTableChange`: `type` and `newState`: - -`type` is tell you what kind of functionality to trigger this table's change: available values at the below: - -* `filter` -* `pagination` - -Following is a shape of `newState` - -```js -{ - page, // newest page - sizePerPage, //newest sizePerPage - filters // an object which have current filter status per column -} -``` \ No newline at end of file diff --git a/docs/cell-edit.md b/docs/cell-edit.md deleted file mode 100644 index 328a94e..0000000 --- a/docs/cell-edit.md +++ /dev/null @@ -1,136 +0,0 @@ -# Properties on cellEdit prop -* [mode (**required**)](#mode) -* [blurToSave](#blurToSave) -* [nonEditableRows](#nonEditableRows) -* [timeToCloseMessage](#timeToCloseMessage) -* [beforeSaveCell](#beforeSaveCell) -* [afterSaveCell](#afterSaveCell) -* [onUpdate](#onUpdate) -* [editing](#editing) -* [errorMessage](#errorMessage) -* [onErrorMessageDisappear](#onErrorMessageDisappear) - -## cellEdit - [Object] -Assign a valid `cellEdit` object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press `ENTER` to save cell or press `ESC` to cancel editing. - -> Note: The `keyField` column can't be edited - -Following is the shape of `cellEdit` object: -```js -{ - mode: 'click', - blurToSave: true, - timeToCloseMessage: 2500, - editing: false|true, - errorMessage: '', - onUpdate: (rowId, dataField, newValue) => { ... }, - beforeSaveCell: (oldValue, newValue, row, column) => { ... }, - afterSaveCell: (oldValue, newValue, row, column) => { ... }, - onErrorMessageDisappear: () => { ... }, - nonEditableRows: () => { ... } -} -``` - -### cellEdit.mode - [String] -`cellEdit.mode` possible value is `click` and `dbclick`. **It's required value** that tell `react-bootstrap-table2` how to trigger the cell editing. - -### cellEdit.blurToSave - [Bool] -Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor. - -### cellEdit.nonEditableRows - [Function] -`cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`) - -### cellEdit.timeToCloseMessage - [Function] -If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond. - -### cellEdit.beforeSaveCell - [Function] -This callback function will be called before triggering cell update. - -```js -const cellEdit = { - // omit... - beforeSaveCell: (oldValue, newValue, row, column) => { ... } -} -``` - -### cellEdit.afterSaveCell - [Function] -This callback function will be called after updating cell. - -```js -const cellEdit = { - // omit... - afterSaveCell: (oldValue, newValue, row, column) => { ... } -}; -``` - -### cellEdit.onUpdate - [Function] -If you want to control the cell updating process by yourself, for example, connect with `Redux` or saving data to backend database, `cellEdit.onUpdate` is a great chance you can work on it. - -Firsylt, `react-bootstrap-table2` allow `cellEdit.onUpdate` to return a promise: - -```js -const cellEdit = { - // omit... - onUpdate: (rowId, dataField, newValue) => { - return apiCall().then(response => { - console.log('update cell to backend successfully'); - // Actually, you dont do any thing here, we will update the new value when resolve your promise - }) - .catch(err => throw new Error(err.message)); - } -}; -``` - -If your promise is resolved successfully, `react-bootstrap-table2` will default help you to update the new cell value. -If your promise is resolved failure, you can throw an `Error` instance, `react-bootstrap-table2` will show up the error message (Same behavior like [`column.validator`](./columns.md#validator)). - -In some case, backend will return a new value to client side and you want to apply this new value instead of the value that user input. In this situation, you can return an object which contain a `value` property: - -```js -const cellEdit = { - // omit... - onUpdate: (rowId, dataField, newValue) => { - return apiCall().then(response => { - return { value: response.value }; // response.value is from your backend api - }) - .catch(err => throw new Error(err.message)); - } -}; -``` - -If your application integgrate with `Redux`, you may need to dispatch an action in `cellEdit.onUpdate` callback. In this circumstances, you need to return `false` explicity which `react-bootstrap-table2` will stop any operation internally and wait rerender by your application. - -In a simple redux application, you probably need to handle those props by your application: - -* [`cellEdit.editing`](#editing): Is cell still on editing or not? This value should always be `true` when saving cell failure. -* [`cellEdit.errorMessage`](#errorMessage): Error message when save the cell failure. -* [`cellEdit.onErrorMessageDisappear`](#onErrorMessageDisappear): This callback will be called when error message alert closed automatically. -* `cellEdit.onUpdate` - -```js -const cellEdit = { - editing: this.props.editing, - errorMessage: this.props.errorMessage, - onErrorMessageDisappear: () => { - // cleanErrorMessage is an action creator - this.props.dispatch(cleanErrorMessage()); - }, - onUpdate: (rowId, dataField, newValue) => { - // updateCell is an action creator - this.props.dispatch(updateCell(rowId, dataField, newValue))); - return false; // Have to return false here - } -}; -``` - -Please check [this](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/develop/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js) exmaple to learn how use `cellEdit` with a redux application - -### cellEdit.editing - [Bool] -This only used when you want to control cell saving externally, `cellEdit.editing` will be a flag to tell `react-bootstrap-table2` whether currecnt editing cell is still editing or not. Because, it's possible that some error happen when you saving cell, in this situation, you need to configre this value as `false` to keep the cell as edtiable and show up an error message. - -### cellEdit.errorMessage - [String] -Same as [`cellEdit.editing`](#editing). This prop is not often used. Only used when you keep the error message in your application state. - -### cellEdit.onErrorMessageDisappear - [Function] -This callback function will be called when error message discard. - diff --git a/docs/columns.md b/docs/columns.md deleted file mode 100644 index 73fdc96..0000000 --- a/docs/columns.md +++ /dev/null @@ -1,559 +0,0 @@ -# Definition of columns props on BootstrapTable - -Available properties in a column object: - -#### Required -* [dataField (**required**)](#dataField) -* [text (**required**)](#text) - -#### Optional -* [hidden](#hidden) -* [formatter](#formatter) -* [formatExtraData](#formatExtraData) -* [sort](#sort) -* [sortFunc](#sortFunc) -* [classes](#classes) -* [style](#style) -* [title](#title) -* [events](#events) -* [align](#align) -* [attrs](#attrs) -* [headerFormatter](#headerFormatter) -* [headerClasses](#headerClasses) -* [headerStyle](#headerStyle) -* [headerTitle](#headerTitle) -* [headerEvents](#headerEvents) -* [headerAlign](#headerAlign) -* [headerAttrs](#headerAttrs) -* [headerSortingClasses](#headerSortingClasses) -* [headerSortingStyle](#headerSortingStyle) -* [editable](#editable) -* [validator](#validator) -* [editCellStyle](#editCellStyle) -* [editCellClasses](#editCellClasses) -* [filter](#filter) -* [filterValue](#filterValue) - -Following is a most simplest and basic usage: - -```js -const rows = [ { id: 1, name: '...', price: '102' } ]; -const columns = [ { - dataField: 'id', - text: 'Production ID' - }, { - dataField: 'name', - text: 'Production Name' - }, { - dataField: 'price', - text: 'Production Price' - } -]; -``` - -Let's introduce the definition of column object - -## column.dataField (**required**) - [String] -Use `dataField` to specify what field should be apply on this column. If your raw data is nested, for example: - -```js -const row = { - id: 'A001', - address: { - postal: '1234-12335', - city: 'Chicago' - } -} -``` -You can use `dataField` with dot(`.`) to describe nested object: - -```js -dataField: 'address.postal' -dataField: 'address.city' -``` - -## column.text (**required**) - [String] -`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter) - -## column.hidden - [Bool] -`hidden` allow you to hide column when `true` given. - -## column.formatter - [Function] -`formatter` allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return. - -* `cell` -* `row` -* `rowIndex` -* [`formatExtraData`](#formatExtraData) - -## column.headerFormatter - [Function] -`headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return. - -* `column`: column object itself -* `colIndex` -* `components`: it's an object which contain all of other react element, like sort caret or filter etc. - -The third argument: `components` have following specified properties: -```js -{ - sortElement, // sort caret element, it will not be undefined when you enable sort on this column - filterElement // filter element, it will not be undefined when you enable column.filter on this column -} -``` - -## column.formatExtraData - [Any] -It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function. - -## column.sort - [Bool] -Enable the column sort via a `true` value given. - -## column.sortFunc - [Function] -`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept four arguments: - -```js -{ - // omit... - sort: true, - sortFunc: (a, b, order, dataField) => { - if (order === 'asc') return a - b; - else return b - a; - } -} -``` -> The possible value of `order` argument is **`asc`** and **`desc`**. - -## column.classes - [String | Function] -It's availabe to have custom class on table column: - -```js -{ - // omit... - classes: 'id-custom-cell' -} -``` -In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take `4` arguments and a `string` is expect to return: - - -```js -{ - classes: function callback(cell, row, rowIndex, colIndex) { ... } -} -``` - -**Parameters** -* `cell`: The value of current cell. -* `row`: The value of `row` being processed in the `BootstrapTable`. -* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `String` will be the result of element class. - -## column.headerClasses - [String | Function] -It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column: - -```js -{ - // omit... - headerClasses: 'id-custom-cell' -} -``` -Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return: - -```js -{ - headerClasses: function callback(column, colIndex) { ... } -} -``` - -**Parameters** -* `column`: The value of current column. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `String` will be the result of element headerClasses. - -## column.style - [Object | Function] -It's availabe to have custom style on table column: - -```js -{ - // omit... - style: { backgroundColor: 'green' } -} -``` - -In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes `4` arguments and an `Object` is expect to return: - - -```js -{ - style: function callback(cell, row, rowIndex, colIndex) { ... } -} -``` - -**Parameters** -* `cell`: The value of current cell. -* `row`: The value of `row` being processed in the `BootstrapTable`. -* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `Object` will be the result of element style. - - -## column.headerStyle - [Object | Function] -It's availabe to have customized inline-style on table header column: - -```js -{ - // omit... - headerStyle: { backgroundColor: 'green' } -} -``` - -Moreover, it also accept a callback function which takes 2 arguments and an `Object` is expect to return: - -```js -{ - headerStyle: function callback(column, colIndex) { ... } -} -``` - -**Parameters** -* `column`: The value of current column. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `Object` will be the result of element headerStyle. - - -## column.title - [Bool | Function] -`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column and take `cell content` as default value. Additionally, you could customize title via a callback. It takes `4` arguments and a `String` is expect to return: - - -```js -{ - // omit... - title: function callback(cell, row, rowIndex, colIndex) { ... } - // return custom title here -} -``` - -**Parameters** -* `cell`: The value of current cell. -* `row`: The value of `row` being processed in the `BootstrapTable`. -* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `String` will be the result of element title. - -## column.headerTitle - [Bool | Function] -`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), - -```js -{ - // omit... - headerTitle: true -} -``` - -It's also availabe to custom via a callback function: -```js -{ - headerTitle: function callback(column, colIndex) { ... } -} -``` - -**Parameters** -* `column`: The value of current column. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `String` will be the result of element headerTitle. - -## column.align - [String | Function] -You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property. - -Besides, `align` also accept a callback function for dynamically setting text align. It takes `4` arguments and a `String` is expect to return: - -```js -{ - // omit... - align: function callback(cell, row, rowIndex, colIndex) { ... } -} -``` - -**Parameters** -* `cell`: The value of current cell. -* `row`: The value of `row` being processed in the `BootstrapTable`. -* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `String` will be the result of element text alignment. - -## column.headerAlign - [String | Function] -It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on header column. - -```js -{ - // omit... - headerAlign: 'center' -} -``` - -Also, you can custom the align by a callback function: - -```js -{ - // omit... - headerAlign: (column, colIndex) => { - // column is an object and perform itself - // return custom title here - } -} -``` -**Parameters** -* `column`: The value of current column. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `String` will be the result of element headerAlign. - - -## column.events - [Object] -You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property: - -```js -{ - // omit... - events: { - onClick: e => { ... } - } -} -``` - -## column.headerEvents - [Object] -`headerEvents` same as [`column.events`](#events) but this is for header column. - -```js -{ - // omit... - headerEvents: { - onClick: e => { ... } - } -} -``` - -## column.attrs - [Object | Function] -Via `attrs` property, You can customize table column [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) which allow user to configure the elements or adjust their behavior. - -```js -{ - // omit... - attrs: { - title: 'bar', - 'data-test': 'foo' - } -} -``` -Not only `Object`, `callback function` is also acceptable. It takes `4` arguments and an `Object` is expect to return: - -```js -{ - attrs: function callback(cell, row, rowIndex, colIndex) { ... } -} -``` - -**Parameters** -* `cell`: The value of current cell. -* `row`: The value of `row` being processed in the `BootstrapTable`. -* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `Object` will be the result of element HTML attributes. - -#### * Caution - -If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited. - -```js -{ - // omit... - title: true, // it will be chosen. - attrs: { title: 'test' } -} -``` - -## column.headerAttrs - [Object | Function] -`headerAttrs` is similiar to [`column.attrs`](#attrs) but it works for header column. -```js -{ - // omit... - headerAttrs: { - title: 'bar', - 'data-test': 'foo' - } -} -``` - -Additionally, customize the header attributes by a `2-arguments` callback function: - -```js -{ - // omit... - headerAttrs: (column, colIndex) => ({ - // return customized HTML attribute here - }) -} -``` - -**Parameters** -* `column`: The value of current column. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -**Return value** - -A new `Object` will be the result of element headerAttrs. - -> Caution: -> Same as [column.attrs](#attrs), it has lower priority and will be -> overwrited when other props related to HTML attributes were given. - -### headerSortingClasses - [String | Function] - -`headerSortingClasses` allows to customize `class` for header cell when this column is sorting. - -```js -const headerSortingClasses = 'demo-sorting'; -``` - -Furthermore, it also accepts a callback which takes **4** arguments and `String` is expected to return: - -```js -const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { ... } -``` - -* `column`: The value of current column. -* `sortOrder`: The order of current sorting -* `isLastSorting`: Is the last one of sorted columns. -* `colIndex`: The index of the current column being processed in BootstrapTable. - -### headerSortingStyle - [Object | Function] - -It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return: - -```js -const sortingHeaderStyle = { - backgroundColor: 'red' -}; -``` - -## column.editable - [Bool | Function] -`column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`. - -If a callback function given, you can control the editable level as cell level: - -```js -{ - // omit... - editable: (cell, row, rowIndex, colIndex) => { - // return true or false; - } -} -``` - -## column.validator - [Function] -`column.validator` used for validate the data when cell on updating. it's should accept a callback function with following argument: -`newValue`, `row` and `column`: - -```js -{ - // omit... - validator: (newValue, row, column) => { - return ...; - } -} -``` - -The return value can be a bool or an object. If your valiation is pass, return `true` explicitly. If your valiation is invalid, return following object instead: -```js -{ - valid: false, - message: 'SOME_REASON_HERE' -} -``` - -## column.editCellStyle - [Object | Function] -You can use `column.editCellStyle` to custom the style of `` when cell editing. It like most of customizable functionality, it also accept a callback function with following params: - -**Parameters** -* `cell`: The value of current cell. -* `row`: The object of `row` being processed in the `BootstrapTable`. -* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`. -* `colIndex`: The index of the current `column` being processed in `BootstrapTable`. - -```js -{ - editCellStyle: { ... } -} -``` -Or take a callback function - -```js -{ - editCellStyle: (cell, row, rowIndex, colIndex) => { - // it is suppose to return an object - } -} -``` - -## column.editCellClasses - [String | Function] -You can use `column.editCellClasses` to add custom class on `` when cell editing. It's same as [`column.editCellStyle`](#editCellStyle) which also accept a callback function to able to custom your class more flexible. Following is the arguments of this callback function: `cell`, `row`, `rowIndex`, `colIndex`. - -```js -{ - editCellClasses: 'custom-class' -} -``` -Or take a callback function - -```js -{ - editCellClasses: (cell, row, rowIndex, colIndex) => { - // it is suppose to return a string - } -} -``` - -## column.filter - [Object] -Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters: - -* Text(`textFilter`) - -We have a quick example to show you how to use `column.filter`: - -``` -import { textFilter } from 'react-bootstrap-table2-filter'; - -// omit... -{ - dataField: 'price', - text: 'Product Price', - filter: textFilter() -} -``` - -For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial. \ No newline at end of file diff --git a/docs/development.md b/docs/development.md deleted file mode 100644 index 372bfa9..0000000 --- a/docs/development.md +++ /dev/null @@ -1,28 +0,0 @@ -## Development Guide - -### Setup -```bash -$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git -$ cd react-bootstrap-table -$ npm install -$ lerna bootstrap # ./node_modules/.bin/lerna bootstrap -``` -### Development -```bash -$ npm start -``` - -### Launch StoryBook -We use [storybook](https://storybook.js.org/) to list our examples and it also has hot reload from source code. Sometimes, it is also a good entry point to development. - -```bash -$ cd packages/react-bootstrap-table2-example -$ npm run storybook -``` - -### Testing -```bash -$ npm test -$ npm run test:watch # for watch mode -$ npm run test:coverage # generate coverage report -``` \ No newline at end of file diff --git a/docs/row-selection.md b/docs/row-selection.md deleted file mode 100644 index 6262be4..0000000 --- a/docs/row-selection.md +++ /dev/null @@ -1,187 +0,0 @@ - -# Row selection -`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first. - - -## Available properties - -The following are available properties in `selectRow`: - -#### Required -* [mode (**required**)](#mode) -* [style](#style) -* [classes)](#classes) -* [bgColor](#bgColor) -* [nonSelectable)](#nonSelectable) -* [clickToSelect)](#clickToSelect) -* [clickToEdit](#clickToEdit) -* [onSelect](#onSelect) -* [onSelectAll](#onSelectAll) -* [hideSelectColumn](#hideSelectColumn) - -#### Optional - -## selectRow.mode - [String] - -Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `radio` was assigned, there will be a radio button in the selection column; otherwise, the `checkbox` instead. - -#### values -* `radio` -* `checkbox` - -#### examples - -```js -const selectRow = { - mode: 'radio' // single row selection -}; - -``` - -```js -const selectRow = { - mode: 'checkbox' // multiple row selection -}; - - -``` - -## selectRow.style - [Object | Function] -`selectRow.style` allow you to have custom style on selected rows: - -```js -const selectRow = { - mode: 'checkbox', - style: { background: 'red' } -}; -``` - -If you wanna more flexible customization, `selectRow.style` also accept a function: - -```js -const selectRow = { - mode: 'checkbox', - style: (row, rowIndex) => { return ...; } -}; -``` - -## selectRow.classes - [String | Function] -`selectRow.classes` allow you to add css class on selected rows: - -```js -const selectRow = { - mode: 'checkbox', - classes: 'custom-class' -}; -``` - -If you wanna more flexible customization, `selectRow.classes` also accept a function: - -```js -const selectRow = { - mode: 'checkbox', - classes: (row, rowIndex) => { return ...; } -}; -``` - -## selectRow.bgColor - [String | Function] -The backgroud color when row is selected - -```js -const selectRow = { - mode: 'checkbox', - bgColor: 'red' -}; -``` - -There's also a more good way to custom it: - -```js -const selectRow = { - mode: 'checkbox', - bgColor: (row, rowIndex) => { - return ....; // return a color code - } -}; -``` - -## selectRow.nonSelectable - [Array] -This prop allow you to restrict some rows which can not be selected by user. `selectRow.nonSelectable` accept an rowkeys array. - -```js -const selectRow = { - mode: 'checkbox', - nonSelectable: [1, 3 ,5] -}; -``` - -## selectRow.clickToSelect - [Bool] -Able to select row when clicking on row. - -```js -const selectRow = { - mode: 'checkbox', - clickToSelect: true -}; -``` - -> Note: if you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing -> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit) - -## selectRow.clickToEdit - [Bool] -Able to click to edit cell and select row - -```js -const selectRow = { - mode: 'checkbox', - clickToSelect: true - clickToEdit: true -}; -``` - -## selectRow.onSelect - [Function] -This callback function will be called when a row is select/unselect and pass following three arguments: -`row`, `isSelect` and `rowIndex`. - -```js -const selectRow = { - mode: 'checkbox', - onSelect: (row, isSelect, rowIndex) => { - // ... - } -}; -``` - -## selectRow.onSelectAll - [Function] -This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`. - -```js -const selectRow = { - mode: 'checkbox', - onSelectAll: (isSelect, results) => { - // ... - } -}; -``` - -## selectRow.hideSelectColumn - [Bool] -Default is `false`, if you don't want to have a selection column, give this prop as `true` - -```js -const selectRow = { - mode: 'radio', - hideSelectColumn: true, - clickToSelect: true, - bgColor: 'red' -}; -``` diff --git a/enzyme-setup.js b/enzyme-setup.js deleted file mode 100644 index e952b30..0000000 --- a/enzyme-setup.js +++ /dev/null @@ -1,8 +0,0 @@ -import Adapter from 'enzyme-adapter-react-16'; -import { configure } from 'enzyme'; - -const configureEnzyme = () => { - configure({ adapter: new Adapter() }); -}; - -configureEnzyme(); diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..31b707d Binary files /dev/null and b/favicon.ico differ diff --git a/iframe.html b/iframe.html new file mode 100644 index 0000000..a771a5c --- /dev/null +++ b/iframe.html @@ -0,0 +1,24 @@ + + + + + + + + + Storybook + + + + + +
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b5d948b --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + + + + Storybook + + + + +
+ + + + \ No newline at end of file diff --git a/lerna.json b/lerna.json deleted file mode 100644 index b34dd47..0000000 --- a/lerna.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "lerna": "2.0.0", - "packages": [ - "packages/*" - ], - "version": "0.0.0" -} diff --git a/package.json b/package.json deleted file mode 100644 index 9fbd101..0000000 --- a/package.json +++ /dev/null @@ -1,88 +0,0 @@ -{ - "name": "react-bootstrap-table2", - "version": "0.0.1", - "description": "Rebuilt for react-bootstrap-table", - "main": "index.js", - "scripts": { - "postinstall": "lerna bootstrap", - "start": "node -r babel-register ./node_modules/.bin/webpack-dev-server --config webpack.config.babel.js", - "lint": "eslint ./packages --ext .js --ext .jsx --ignore-path .gitignore", - "pretest": "yarn lint --cache", - "test": "jest", - "test:coverage": "jest --coverage", - "test:watch": "jest --watch", - "storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git" - }, - "author": "", - "license": "ISC", - "bugs": { - "url": "https://github.com/react-bootstrap-table/react-bootstrap-table2/issues" - }, - "homepage": "https://github.com/react-bootstrap-table/react-bootstrap-table2#readme", - "devDependencies": { - "babel-core": "6.25.0", - "babel-eslint": "7.2.3", - "babel-jest": "20.0.3", - "babel-loader": "7.1.1", - "babel-preset-es2015": "6.24.1", - "babel-preset-react": "6.24.1", - "babel-preset-stage-0": "6.24.1", - "babel-register": "6.24.1", - "css-loader": "0.28.1", - "enzyme": "3.1.1", - "enzyme-adapter-react-16": "1.0.4", - "eslint": "4.5.0", - "eslint-config-airbnb": "15.1.0", - "eslint-loader": "1.9.0", - "eslint-plugin-import": "2.7.0", - "eslint-plugin-jsx-a11y": "5.1.1", - "eslint-plugin-react": "7.2.1", - "git-directory-deploy": "1.5.1", - "html-webpack-plugin": "2.30.1", - "jest": "20.0.4", - "jsdom": "11.2.0", - "jsdom-global": "3.0.2", - "lerna": "2.0.0", - "node-sass": "4.5.3", - "react-test-renderer": "16.0.0", - "rimraf": "2.6.2", - "sass-loader": "6.0.6", - "sinon": "3.2.1", - "style-loader": "0.17.0", - "webpack": "3.5.4", - "webpack-dev-server": "2.7.1" - }, - "dependencies": { - "classnames": "2.2.5", - "prop-types": "15.5.10", - "react": "16.0.0", - "react-dom": "16.0.0" - }, - "peerDependencies": { - "prop-types": "^15.0.0", - "react": "^16.0.0", - "react-dom": "^16.0.0" - }, - "jest": { - "collectCoverageFrom": [ - "packages/**/*.js" - ], - "roots": [ - "/packages" - ], - "setupFiles": [ - "/enzyme-setup.js" - ], - "modulePaths": [ - "/packages/react-bootstrap-table2" - ], - "testEnvironment": "node", - "testMatch": [ - "**/test/**/*.test.js" - ] - } -} diff --git a/packages/react-bootstrap-table2-example/.storybook/addons.js b/packages/react-bootstrap-table2-example/.storybook/addons.js deleted file mode 100644 index afebf47..0000000 --- a/packages/react-bootstrap-table2-example/.storybook/addons.js +++ /dev/null @@ -1,5 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; -import '@storybook/addon-console'; diff --git a/packages/react-bootstrap-table2-example/.storybook/config.js b/packages/react-bootstrap-table2-example/.storybook/config.js deleted file mode 100644 index f50d246..0000000 --- a/packages/react-bootstrap-table2-example/.storybook/config.js +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ -import React from 'react'; -import { configure, addDecorator } from '@storybook/react'; -import { withConsole } from '@storybook/addon-console'; - -function loadStories() { - require('stories'); -} - -const styles = { - margin: '15px', -}; - -const componentDecorator = (story) => ( -
- { story() } -
-); - - -// prepend the story name to log messages -addDecorator((storyFn, context) => withConsole()(storyFn)(context)); - -addDecorator(componentDecorator); - -configure(loadStories, module); diff --git a/packages/react-bootstrap-table2-example/.storybook/preview-head.html b/packages/react-bootstrap-table2-example/.storybook/preview-head.html deleted file mode 100644 index edb9231..0000000 --- a/packages/react-bootstrap-table2-example/.storybook/preview-head.html +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js deleted file mode 100644 index 25f09d8..0000000 --- a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js +++ /dev/null @@ -1,59 +0,0 @@ -const path = require('path'); - -const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src'); -const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/src'); -const overlaySourcePath = path.join(__dirname, '../../react-bootstrap-table2-overlay/src'); -const filterSourcePath = path.join(__dirname, '../../react-bootstrap-table2-filter/src'); -const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style'); -const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style'); -const storyPath = path.join(__dirname, '../stories'); -const examplesPath = path.join(__dirname, '../examples'); -const srcPath = path.join(__dirname, '../src'); -const aliasPath = { - examples: examplesPath, - stories: storyPath, - src: srcPath, - components: path.join(srcPath, 'components'), - utils: path.join(srcPath, 'utils'), -}; - -const loaders = [{ - enforce: 'pre', - test: /\.js?$/, - exclude: /node_modules/, - include: [examplesPath, storyPath], - loader: 'eslint-loader', -}, { - test: /\.js?$/, - use: ['babel-loader'], - exclude: /node_modules/, - include: [sourcePath, paginationSourcePath, overlaySourcePath, filterSourcePath, storyPath], -}, { - test: /\.css$/, - use: ['style-loader', 'css-loader'], -}, { - test: /\.scss$/, - use: ['style-loader', 'css-loader', 'sass-loader'], - include: [storyPath, sourceStylePath, paginationStylePath], -}, { - test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, - loader: 'url-loader?limit=100000', -}]; - -// Export a function. Accept the base config as the only param. -module.exports = (storybookBaseConfig, configType) => { - // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' - // You can change the configuration based on that. - // 'PRODUCTION' is used when building the static version of storybook. - - // loaders - loaders.forEach(value => { - storybookBaseConfig.module.rules.push(value); - }) - - // alias - storybookBaseConfig.resolve.alias = aliasPath; - - // Return the altered config - return storybookBaseConfig; -}; diff --git a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js b/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js deleted file mode 100644 index 5c424e8..0000000 --- a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/basic/caption-table.js b/packages/react-bootstrap-table2-example/examples/basic/caption-table.js deleted file mode 100644 index 7f84142..0000000 --- a/packages/react-bootstrap-table2-example/examples/basic/caption-table.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const CaptionElement = () =>

Component as Header

; - - - -} columns={ columns } /> -`; - -const Caption = () =>

Component as Header

; - -export default () => ( -
- - } columns={ columns } /> - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/basic/index.js b/packages/react-bootstrap-table2-example/examples/basic/index.js deleted file mode 100644 index 91a6588..0000000 --- a/packages/react-bootstrap-table2-example/examples/basic/index.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js deleted file mode 100644 index 44d8662..0000000 --- a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ - - -// Following is more customizable example - -function indication() { - // return something here -} - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js b/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js deleted file mode 100644 index 97b4879..0000000 --- a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js deleted file mode 100644 index db6818c..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const cellEdit = { - mode: 'click', - blurToSave: true -}; - - -`; - -const cellEdit = { - mode: 'click', - blurToSave: true -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js deleted file mode 100644 index 3486700..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js +++ /dev/null @@ -1,59 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - editCellClasses: 'editing-name' -}, { - dataField: 'price', - text: 'Product Price', - editCellClasses: (cell, row, rowIndex, colIndex) => - (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101') -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - editCellClasses: 'editing-name' -}, { - dataField: 'price', - text: 'Product Price', - editCellClasses: (cell, row, rowIndex, colIndex) => - (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101') -}]; - -const cellEdit = { - mode: 'click' -}; - - -`; - -const cellEdit = { - mode: 'click' -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js deleted file mode 100644 index 24779fc..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js +++ /dev/null @@ -1,58 +0,0 @@ -/* eslint no-unused-vars: 0 */ -/* eslint no-console: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const cellEdit = { - mode: 'click', - beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); }, - afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); } -}; - - -`; - -const cellEdit = { - mode: 'click', - beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); }, - afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); } -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js deleted file mode 100644 index 2101bd3..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js +++ /dev/null @@ -1,67 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - editCellStyle: { - backgroundColor: '#20B2AA' - } -}, { - dataField: 'price', - text: 'Product Price', - editCellStyle: (cell, row, rowIndex, colIndex) => { - const backgroundColor = cell > 2101 ? '#00BFFF' : '#00FFFF'; - return { backgroundColor }; - } -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - editCellStyle: { - backgroundColor: '#20B2AA' - } -}, { - dataField: 'price', - text: 'Product Price', - editCellStyle: (cell, row, rowIndex, colIndex) => { - const backgroundColor = cell > 2101 ? '#00BFFF' : '#00FFFF'; - return { backgroundColor }; - } -}]; - -const cellEdit = { - mode: 'click' -}; - - -`; - -const cellEdit = { - mode: 'click' -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js deleted file mode 100644 index 6b31c5d..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -/* eslint no-unused-vars: 0 */ -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price', - validator: (newValue, row, column) => { - if (isNaN(newValue)) { - return { - valid: false, - message: 'Price should be numeric' - }; - } - if (newValue < 2000) { - return { - valid: false, - message: 'Price should bigger than 2000' - }; - } - return true; - } -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price', - validator: (newValue, row, column) => { - if (isNaN(newValue)) { - return { - valid: false, - message: 'Price should be numeric' - }; - } - if (newValue < 2000) { - return { - valid: false, - message: 'Price should bigger than 2000' - }; - } - return true; - } -}]; - -const cellEdit = { - mode: 'click', - blurToSave: true -}; - - -`; - -const cellEdit = { - mode: 'click', - blurToSave: true -}; -export default () => ( -
-

Product Price should bigger than $2000

- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-promise-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-promise-table.js deleted file mode 100644 index c66e3bd..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-promise-table.js +++ /dev/null @@ -1,75 +0,0 @@ -/* eslint no-unused-vars: 0 */ -/* eslint arrow-body-style: 0 */ -import React, { Component } from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator, sleep } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -class CellEditWithPromise extends Component { - handleCellEditing = (rowId, dataField, newValue) => { - return sleep(1000).then(() => { - if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) { - throw new Error('Product Price should bigger than $2000'); - } - }); - } - - render() { - const cellEdit = { - mode: 'click', - blurToSave: true, - onUpdate: this.handleCellEditing - }; - - return ( -
- - { sourceCode } -
- ); - } -} -`; - -class CellEditWithPromise extends Component { - handleCellEditing = (rowId, dataField, newValue) => { - return sleep(1000).then(() => { - if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) { - throw new Error('Product Price should bigger than $2000'); - } - }); - } - - render() { - const cellEdit = { - mode: 'click', - blurToSave: true, - onUpdate: this.handleCellEditing - }; - - return ( -
- - { sourceCode } -
- ); - } -} - -export default CellEditWithPromise; - diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js deleted file mode 100644 index 760c6d9..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js +++ /dev/null @@ -1,212 +0,0 @@ -/* eslint no-unused-vars: 0 */ -/* eslint react/prop-types: 0 */ -/* eslint arrow-body-style: 0 */ -/* eslint consistent-return: 0 */ -/* eslint no-class-assign: 0 */ -import React, { Component } from 'react'; -import thunk from 'redux-thunk'; -import { Provider, connect } from 'react-redux'; -import { createStore, applyMiddleware } from 'redux'; -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -/////////////////////// Action Creator /////////////////////// -const setErrorMessage = (errorMessage = null) => { - return { type: 'SET_ERR_MESSAGE', errorMessage }; -}; - -// Async Action, using redux-thunk -const cellEditingAsync = (rowId, dataField, newValue) => { - return (dispatch) => { - setTimeout(() => { - if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) { - dispatch(setErrorMessage('Product Price should bigger than $2000')); - } else { - dispatch({ type: 'ADD_SUCCESS', rowId, dataField, newValue }); - } - }, 1200); - }; -}; - -/////////////////////// Component /////////////////////// -class CellEditWithRedux extends Component { - // dispatch a async action - handleCellEditing = (rowId, dataField, newValue) => { - this.props.dispatch(cellEditingAsync(rowId, dataField, newValue)); - return false; - } - - handleErrorMsgDisappear = () => { - this.props.dispatch(setErrorMessage()); - } - - render() { - const cellEdit = { - mode: 'click', - editing: this.props.cellEditing, - errorMessage: this.props.errorMessage, - onUpdate: this.handleCellEditing, - onErrorMessageDisappear: this.handleErrorMsgDisappear - }; - - return ( -
- - { sourceCode } -
- ); - } -} -// connect -CellEditWithRedux = connect(state => state)(CellEditWithRedux); - -/////////////////////// Reducer /////////////////////// -// initial state object and simple reducers -const initialState = { - data: productsGenerator(), - cellEditing: false, - errorMessage: null -}; - -const reducers = (state, action) => { - switch (action.type) { - case 'ADD_SUCCESS': { - const { rowId, dataField, newValue } = action; - const data = [...state.data]; - const rowIndex = data.findIndex(r => r.id === rowId); - data[rowIndex][dataField] = newValue; - return { - data, - cellEditing: false, - errorMessage: null - }; - } - case 'SET_ERR_MESSAGE': { - const { errorMessage } = action; - return { - ...state, - cellEditing: true, - errorMessage - }; - } - default: { - return { ...state }; - } - } -}; - -/////////////////////// Index /////////////////////// -const store = createStore(reducers, initialState, applyMiddleware(thunk)); - -const Index = () => ( - - - -); -`; - -const setErrorMessage = (errorMessage = null) => { - return { type: 'SET_ERR_MESSAGE', errorMessage }; -}; - -// Async Action, using redux-thunk -const cellEditingAsync = (rowId, dataField, newValue) => { - return (dispatch) => { - setTimeout(() => { - if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) { - dispatch(setErrorMessage('Product Price should bigger than $2000')); - } else { - dispatch({ type: 'ADD_SUCCESS', rowId, dataField, newValue }); - } - }, 1200); - }; -}; - -class CellEditWithRedux extends Component { - // dispatch a async action - handleCellEditing = (rowId, dataField, newValue) => { - this.props.dispatch(cellEditingAsync(rowId, dataField, newValue)); - return false; - } - - handleErrorMsgDisappear = () => { - this.props.dispatch(setErrorMessage()); - } - - render() { - const cellEdit = { - mode: 'click', - editing: this.props.cellEditing, - errorMessage: this.props.errorMessage, - onUpdate: this.handleCellEditing, - onErrorMessageDisappear: this.handleErrorMsgDisappear - }; - - return ( -
- - { sourceCode } -
- ); - } -} -// connect -CellEditWithRedux = connect(state => state)(CellEditWithRedux); - -// initial state object and simple reducers -const initialState = { - data: productsGenerator(), - cellEditing: false, - errorMessage: null -}; - -const reducers = (state, action) => { - switch (action.type) { - case 'ADD_SUCCESS': { - const { rowId, dataField, newValue } = action; - const data = JSON.parse(JSON.stringify(state.data)); - const rowIndex = data.findIndex(r => r.id === rowId); - data[rowIndex][dataField] = newValue; - return { - data, - cellEditing: false, - errorMessage: null - }; - } - case 'SET_ERR_MESSAGE': { - const { errorMessage } = action; - return { - ...state, - cellEditing: true, - errorMessage - }; - } - default: { - return { ...state }; - } - } -}; - -const store = createStore(reducers, initialState, applyMiddleware(thunk)); - -const Index = () => ( - - - -); - -export default Index; - diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js deleted file mode 100644 index 331792a..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js +++ /dev/null @@ -1,55 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price', - editable: (content, row, rowIndex, columnIndex) => content > 2101 -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price', - editable: (content, row, rowIndex, columnIndex) => content > 2101 -}]; - -const cellEdit = { - mode: 'click' -}; - - -`; - -const cellEdit = { - mode: 'click' -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js deleted file mode 100644 index f48e6e4..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const cellEdit = { - mode: 'click' -}; - - -`; - -const cellEdit = { - mode: 'click' -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js deleted file mode 100644 index 0242911..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - editable: false -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' - // Product Name column can't be edit anymore - editable: false -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const cellEdit = { - mode: 'click', - blurToSave: true -}; - - -`; - -const cellEdit = { - mode: 'click', - blurToSave: true -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js deleted file mode 100644 index c51a155..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const cellEdit = { - mode: 'dbclick' -}; - - -`; - -const cellEdit = { - mode: 'dbclick' -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js deleted file mode 100644 index 99f177a..0000000 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const cellEdit = { - mode: 'click', - blurToSave: true, - // Product ID: 0, 3 will be non-editable - nonEditableRows: () => [0, 3] -}; - - -`; - -const cellEdit = { - mode: 'click', - blurToSave: true, - nonEditableRows: () => [0, 3] -}; -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js deleted file mode 100644 index 55158e0..0000000 --- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js +++ /dev/null @@ -1,74 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; -import BootstrapTable from 'react-bootstrap-table2'; -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; -import Code from 'components/common/code-block'; -import { jobsGenerator } from 'utils/common'; - -const jobs = jobsGenerator(5); - -const owners = ['Allen', 'Bob', 'Cat']; -const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money']; - -const columns = [{ - dataField: 'id', - text: 'Job ID' -}, { - dataField: 'name', - text: 'Job Name', - filter: textFilter() -}, { - dataField: 'owner', - text: 'Job Owner', - filter: textFilter(), - formatter: (cell, row) => owners[cell], - filterValue: (cell, row) => owners[cell] -}, { - dataField: 'type', - text: 'Job Type', - filter: textFilter(), - formatter: (cell, row) => types[cell], - filterValue: (cell, row) => types[cell] -}]; - -const sourceCode = `\ -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; - -const owners = ['Allen', 'Bob', 'Cat']; -const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money']; -const columns = [{ - dataField: 'id', - text: 'Job ID' -}, { - dataField: 'name', - text: 'Job Name', - filter: textFilter() -}, { - dataField: 'owner', - text: 'Job Owner', - filter: textFilter(), - formatter: (cell, row) => owners[cell], - filterValue: (cell, row) => owners[cell] -}, { - dataField: 'type', - text: 'Job Type', - filter: textFilter(), - filterValue: (cell, row) => types[cell] -}]; - -// shape of job: { id: 0, name: 'Job name 0', owner: 1, type: 3 } - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js deleted file mode 100644 index 84edd0b..0000000 --- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js +++ /dev/null @@ -1,68 +0,0 @@ -/* eslint no-console: 0 */ -import React from 'react'; -import BootstrapTable from 'react-bootstrap-table2'; -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(8); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter({ - delay: 1000, // default is 500ms - style: { - backgroundColor: 'yellow' - }, - className: 'test-classname', - placeholder: 'Custom PlaceHolder', - onClick: e => console.log(e) - }) -}]; - -const sourceCode = `\ -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter({ - delay: 1000, // default is 500ms - style: { - backgroundColor: 'yellow' - }, - className: 'test-classname', - placeholder: 'Custom PlaceHolder', - onClick: e => console.log(e) - }) -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js deleted file mode 100644 index edbf0b7..0000000 --- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import BootstrapTable from 'react-bootstrap-table2'; -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(8); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter({ - defaultValue: '2103' - }) -}]; - -const sourceCode = `\ -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; - -const columns = [{ - dataField: 'id', - text: 'Product ID', -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter({ - defaultValue: '2103' - }) -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js deleted file mode 100644 index d062178..0000000 --- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import BootstrapTable from 'react-bootstrap-table2'; -import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(8); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter({ - comparator: Comparator.EQ // default is Comparator.LIKE - }) -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - -const sourceCode = `\ -import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter'; - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter({ - comparator: Comparator.EQ - }) -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - - -`; - -export default () => ( -
-

Product Name filter apply Equal Comparator

- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js deleted file mode 100644 index 03de391..0000000 --- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import BootstrapTable from 'react-bootstrap-table2'; -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(8); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - -const sourceCode = `\ -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; - -const columns = [{ - dataField: 'id', - text: 'Product ID', -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js deleted file mode 100644 index 3385a6e..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js +++ /dev/null @@ -1,51 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - align: 'center' -}, { - dataField: 'name', - text: 'Product Name', - align: (cell, row, rowIndex, colIndex) => { - if (rowIndex % 2 === 0) return 'right'; - return 'left'; - } -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - align: 'center' -}, { - dataField: 'name', - text: 'Product Name', - align: (cell, row, rowIndex, colIndex) => { - if (rowIndex % 2 === 0) return 'right'; - return 'left'; - } -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js deleted file mode 100644 index 0446225..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - attrs: { title: 'id column' } -}, { - dataField: 'name', - text: 'Product Name', - attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': `customized data ${rowIndex}` }) -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - attrs: { title: 'id column' } -}, { - dataField: 'name', - text: 'Product Name', - attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': \`customized data \${rowIndex}\` }) -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js deleted file mode 100644 index d1c6057..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js +++ /dev/null @@ -1,51 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - classes: 'demo-key-row' -}, { - dataField: 'name', - text: 'Product Name', - classes: (cell, row, rowIndex, colIndex) => { - if (rowIndex % 2 === 0) return 'demo-row-even'; - return 'demo-row-odd'; - } -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - classes: 'demo-key-row' -}, { - dataField: 'name', - text: 'Product Name', - classes: (cell, row, rowIndex, colIndex) => { - if (rowIndex % 2 === 0) return 'demo-row-even'; - return 'demo-row-odd'; - } -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js deleted file mode 100644 index 3403a21..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js +++ /dev/null @@ -1,49 +0,0 @@ -/* eslint no-unused-vars: 0 */ -/* eslint no-alert: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - events: { - onClick: () => alert('Click on Product ID field') - } -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - events: { - onClick: () => alert('Click on Product ID field') - } -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
-

Try to Click on Product ID columns

- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js deleted file mode 100644 index 6542af3..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -function priceFormatter(cell, row) { - if (row.onSale) { - return ( - $ { cell } NTD(Sales!!) - ); - } - - return ( - $ { cell } NTD - ); -} - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price', - formatter: priceFormatter -}]; - -const sourceCode = `\ -function priceFormatter(cell, row) { - if (row.onSale) { - return ( - - $ { cell } NTD(Sales!!) - - ); - } - - return ( - $ { cell } NTD - ); -} - -const columns = [ -// omit... -{ - dataField: 'price', - text: 'Product Price', - formatter: priceFormatter -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js deleted file mode 100644 index ba902f0..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js +++ /dev/null @@ -1,71 +0,0 @@ -/* eslint no-console: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(5, (value, index) => ({ - id: index, - name: `User Name ${index}`, - rank: Math.random() < 0.5 ? 'down' : 'up' -})); - -function rankFormatter(cell, row, rowIndex, formatExtraData) { - return ( - - ); -} - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'rank', - text: 'Rank', - formatter: rankFormatter, - formatExtraData: { - up: 'glyphicon glyphicon-chevron-up', - down: 'glyphicon glyphicon-chevron-down' - } -}]; - -const sourceCode = `\ -function rankFormatter(cell, row, rowIndex, formatExtraData) { - return ( - - ); -} - -const columns = [ -// omit... -{ - dataField: 'rank', - text: 'Rank', - formatter: rankFormatter, - formatExtraData: { - up: 'glyphicon glyphicon-chevron-up', - down: 'glyphicon glyphicon-chevron-down' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js deleted file mode 100644 index 57f72d3..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js +++ /dev/null @@ -1,39 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - hidden: true -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - hidden: true -}, -// omit... -]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js deleted file mode 100644 index c559317..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js +++ /dev/null @@ -1,69 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - style: { - fontWeight: 'bold', - fontSize: '18px' - } -}, { - dataField: 'name', - text: 'Product Name', - style: (cell, row, rowIndex, colIndex) => { - if (rowIndex % 2 === 0) { - return { - backgroundColor: '#81c784' - }; - } - return { - backgroundColor: '#c8e6c9' - }; - } -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - style: { - fontWeight: 'bold', - fontSize: '18px' - } -}, { - dataField: 'name', - text: 'Product Name', - style: (cell, row, rowIndex, colIndex) => { - if (rowIndex % 2 === 0) { - return { - backgroundColor: '#81c784' - }; - } - return { - backgroundColor: '#c8e6c9' - }; - } -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js deleted file mode 100644 index e92d3df..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - title: true -}, { - dataField: 'name', - text: 'Product Name', - title: (cell, row, rowIndex, colIndex) => `this is custom title for ${cell}` -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - title: true -}, { - dataField: 'name', - text: 'Product Name', - title: (cell, row, rowIndex, colIndex) => \`this is custom title for \${cell}\` -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js deleted file mode 100644 index 8876d06..0000000 --- a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(5, (value, index) => ({ - id: index, - name: `User Name ${index}`, - phone: 21009831 + index, - address: { - city: 'New York', - postCode: '1111-4512' - } -})); - -const columns = [{ - dataField: 'id', - text: 'User ID' -}, { - dataField: 'name', - text: 'User Name' -}, { - dataField: 'phone', - text: 'Phone' -}, { - dataField: 'address.city', - text: 'City' -}, { - dataField: 'address.postCode', - text: 'PostCode' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'User ID' -}, { - dataField: 'name', - text: 'User Name' -}, { - dataField: 'phone', - text: 'Phone' -}, { - dataField: 'address.city', - text: 'City' -}, { - dataField: 'address.postCode', - text: 'PostCode' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js deleted file mode 100644 index 013a443..0000000 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - headerAlign: 'center' -}, { - dataField: 'name', - text: 'Product Name', - headerAlign: (column, colIndex) => 'right' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - headerAlign: 'center' -}, { - dataField: 'name', - text: 'Product Name', - headerAlign: (column, colIndex) => 'right' -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js deleted file mode 100644 index 4318fb6..0000000 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - headerAttrs: { title: 'ID header column' } -}, { - dataField: 'name', - text: 'Product Name', - headerAttrs: (column, colIndex) => ({ 'data-test': `customized data ${colIndex}` }) -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - headerAttrs: { title: 'ID header column' } -}, { - dataField: 'name', - text: 'Product Name', - headerAttrs: (column, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` }) -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js deleted file mode 100644 index 031e239..0000000 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js +++ /dev/null @@ -1,51 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - headerClasses: 'demo-row-odd' -}, { - dataField: 'price', - text: 'Product Price', - headerClasses: (column, colIndex) => { - if (colIndex % 2 === 0) return 'demo-row-even'; - return 'demo-row-odd'; - } -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - headerClasses: 'demo-row-odd' -}, { - dataField: 'price', - text: 'Product Price', - headerClasses: (column, colIndex) => { - if (colIndex % 2 === 0) return 'demo-row-even'; - return 'demo-row-odd'; - } -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js deleted file mode 100644 index ca547ac..0000000 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js +++ /dev/null @@ -1,49 +0,0 @@ -/* eslint no-unused-vars: 0 */ -/* eslint no-alert: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - headerEvents: { - onClick: () => alert('Click on Product ID header column') - } -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - events: { - onClick: () => alert('Click on Product ID header column') - } -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
-

Try to Click on Product ID header column

- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js deleted file mode 100644 index 5acb143..0000000 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js +++ /dev/null @@ -1,90 +0,0 @@ -/* eslint no-unused-vars: 0 */ -/* eslint react/prefer-stateless-function: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -function priceFormatter(column, colIndex, { sortElement, filterElement }) { - return ( -
- { filterElement } - { column.text } - { sortElement } -
- ); -} - -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true -}, { - dataField: 'name', - text: 'Product Name', - sort: true -}, { - dataField: 'price', - text: 'Product Price', - sort: true, - filter: textFilter(), - headerFormatter: priceFormatter -}]; - -const defaultSorted = [{ - dataField: 'name', - order: 'desc' -}]; - -const sourceCode = `\ -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; -// ... -function priceFormatter(column, colIndex, { sortElement, filterElement }) { - return ( -
- { filterElement } - { column.text } - { sortElement } -
- ); -} - -const columns = [ -// omit... -{ - dataField: 'price', - text: 'Product Price', - sort: true, - filter: textFilter(), - headerFormatter: priceFormatter -}]; - - -`; - -export default class DefaultSortTable extends React.PureComponent { - render() { - return ( -
- - { sourceCode } -
- ); - } -} diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js deleted file mode 100644 index ddc554b..0000000 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js +++ /dev/null @@ -1,59 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -function priceFormatter(column, colIndex) { - return ( -
$$ { column.text } $$
- ); -} - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price', - headerFormatter: priceFormatter -}]; - -const sourceCode = `\ -function priceFormatter(column, colIndex) { - return ( -
$$ { column.text } $$
- ); -} - -const columns = [ -// omit... -{ - dataField: 'price', - text: 'Product Price', - headerFormatter: priceFormatter -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js deleted file mode 100644 index 91e4b56..0000000 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js +++ /dev/null @@ -1,67 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - headerStyle: { - backgroundColor: '#c8e6c9' - } -}, { - dataField: 'price', - text: 'Product Price', - headerStyle: (column, colIndex) => { - if (colIndex % 2 === 0) { - return { - backgroundColor: '#81c784' - }; - } - return { - backgroundColor: '#c8e6c9' - }; - } -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - headerStyle: { - backgroundColor: '#c8e6c9' - } -}, { - dataField: 'price', - text: 'Product Price', - headerStyle: (column, colIndex) => { - if (colIndex % 2 === 0) { - return { - backgroundColor: '#81c784' - }; - } - return { - backgroundColor: '#c8e6c9' - }; - } -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js deleted file mode 100644 index ac2b9b9..0000000 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - headerTitle: true -}, { - dataField: 'name', - text: 'Product Name', - headerTitle: (column, colIndex) => `this is custom title for ${column.text}` -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - headerTitle: true -}, { - dataField: 'name', - text: 'Product Name', - headerTitle: (column, colIndex) => \`this is custom title for \${column.text}\` -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js b/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js deleted file mode 100644 index 6366f16..0000000 --- a/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js +++ /dev/null @@ -1,145 +0,0 @@ -/* eslint react/no-multi-comp: 0 */ -import React from 'react'; -import PropTypes from 'prop-types'; -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(87); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -// ... -const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => ( -
- - { sourceCode } -
-); - -class Container extends React.Component { - constructor(props) { - super(props); - this.state = { - page: 1, - data: products.slice(0, 10), - sizePerPage: 10 - }; - } - - handleTableChange = ({ page, sizePerPage }) => { - const currentIndex = (page - 1) * sizePerPage; - setTimeout(() => { - this.setState(() => ({ - page, - data: products.slice(currentIndex, currentIndex + sizePerPage), - sizePerPage - })); - }, 2000); - } - - render() { - const { data, sizePerPage, page } = this.state; - return ( - - ); - } -} -`; - -const NoDataIndication = () => ( -
-
-
-
-
-
-
-); - -const Table = ({ data, page, sizePerPage, onTableChange, totalSize }) => ( -
- } - /> - { sourceCode } -
-); - -Table.propTypes = { - data: PropTypes.array.isRequired, - page: PropTypes.number.isRequired, - totalSize: PropTypes.number.isRequired, - sizePerPage: PropTypes.number.isRequired, - onTableChange: PropTypes.func.isRequired -}; - -class EmptyTableOverlay extends React.Component { - constructor(props) { - super(props); - this.state = { - page: 1, - data: products.slice(0, 10), - sizePerPage: 10 - }; - } - - handleTableChange = ({ page, sizePerPage }) => { - const currentIndex = (page - 1) * sizePerPage; - setTimeout(() => { - this.setState(() => ({ - page, - data: products.slice(currentIndex, currentIndex + sizePerPage), - sizePerPage - })); - }, 3000); - this.setState(() => ({ data: [] })); - } - - render() { - const { data, sizePerPage, page } = this.state; - return ( - - ); - } -} - -export default EmptyTableOverlay; diff --git a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js b/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js deleted file mode 100644 index b0dca04..0000000 --- a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js +++ /dev/null @@ -1,158 +0,0 @@ -/* eslint react/no-multi-comp: 0 */ -import React from 'react'; -import PropTypes from 'prop-types'; -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import overlayFactory from 'react-bootstrap-table2-overlay'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(87); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import overlayFactory from 'react-bootstrap-table2-overlay'; - -// ... -const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, totalSize }) => ( -
- - { sourceCode } -
-); - -RemotePagination.propTypes = { - data: PropTypes.array.isRequired, - page: PropTypes.number.isRequired, - loading: PropTypes.bool.isRequired, - totalSize: PropTypes.number.isRequired, - sizePerPage: PropTypes.number.isRequired, - onTableChange: PropTypes.func.isRequired -}; - -class Container extends React.Component { - constructor(props) { - super(props); - this.state = { - page: 1, - loading: false, - data: products.slice(0, 10), - sizePerPage: 10 - }; - } - - handleTableChange = ({ page, sizePerPage }) => { - const currentIndex = (page - 1) * sizePerPage; - setTimeout(() => { - this.setState(() => ({ - page, - loading: false, - data: products.slice(currentIndex, currentIndex + sizePerPage), - sizePerPage - })); - }, 3000); - this.setState(() => ({ loading: true })); - } - - render() { - const { data, sizePerPage, page, loading } = this.state; - return ( - - ); - } -} -`; - -const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, totalSize }) => ( -
- - { sourceCode } -
-); - -RemotePagination.propTypes = { - data: PropTypes.array.isRequired, - page: PropTypes.number.isRequired, - loading: PropTypes.bool.isRequired, - totalSize: PropTypes.number.isRequired, - sizePerPage: PropTypes.number.isRequired, - onTableChange: PropTypes.func.isRequired -}; - -class Container extends React.Component { - constructor(props) { - super(props); - this.state = { - page: 1, - loading: false, - data: products.slice(0, 10), - sizePerPage: 10 - }; - } - - handleTableChange = ({ page, sizePerPage }) => { - const currentIndex = (page - 1) * sizePerPage; - setTimeout(() => { - this.setState(() => ({ - page, - loading: false, - data: products.slice(currentIndex, currentIndex + sizePerPage), - sizePerPage - })); - }, 3000); - this.setState(() => ({ loading: true })); - } - - render() { - const { data, sizePerPage, page, loading } = this.state; - return ( - - ); - } -} - -export default Container; diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js deleted file mode 100644 index b9b2fdb..0000000 --- a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js +++ /dev/null @@ -1,82 +0,0 @@ -/* eslint react/prefer-stateless-function: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(87); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -// ... - -const options = { - paginationSize: 4, - pageStartIndex: 0, - // alwaysShowAllBtns: true, // Always show next and previous button - // withFirstAndLast: false, // Hide the going to First and Last page button - // hideSizePerPage: true, // Hide the sizePerPage dropdown always - // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page - firstPageText: 'First', - prePageText: 'Back', - nextPageText: 'Next', - lastPageText: 'Last', - nextPageTitle: 'First page', - prePageTitle: 'Pre page', - firstPageTitle: 'Next page', - lastPageTitle: 'Last page', - sizePerPageList: [{ - text: '5', value: 5 - }, { - text: '10', value: 10 - }, { - text: 'All', value: products.length - }] // A numeric array is also available. the purpose of above example is custom the text -}; - - -`; -const options = { - paginationSize: 4, - pageStartIndex: 0, - // alwaysShowAllBtns: true // Always show next and previous button - // withFirstAndLast: false // Hide the going to First and Last page button - // hideSizePerPage: true, // Hide the sizePerPage dropdown always - // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page - firstPageText: 'First', - prePageText: 'Back', - nextPageText: 'Next', - lastPageText: 'Last', - nextPageTitle: 'First page', - prePageTitle: 'Pre page', - firstPageTitle: 'Next page', - lastPageTitle: 'Last page', - sizePerPageList: [{ - text: '5', value: 5 - }, { - text: '10', value: 10 - }, { - text: 'All', value: products.length - }] // A numeric array is also available. the purpose of above example is custom the text -}; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/pagination/index.js b/packages/react-bootstrap-table2-example/examples/pagination/index.js deleted file mode 100644 index 979d59b..0000000 --- a/packages/react-bootstrap-table2-example/examples/pagination/index.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint react/prefer-stateless-function: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(87); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -// ... -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js b/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js deleted file mode 100644 index 3ff1b15..0000000 --- a/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js +++ /dev/null @@ -1,82 +0,0 @@ -/* eslint react/prefer-stateless-function: 0 */ -/* eslint no-console: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(87); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -// ... -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const options = { - onSizePerPageChange: (sizePerPage, page) => { - console.log('Size per page change!!!'); - console.log('Newest size per page:' + sizePerPage); - console.log('Newest page:' + page); - }, - onPageChange: (page, sizePerPage) => { - console.log('Page change!!!'); - console.log('Newest size per page:' + sizePerPage); - console.log('Newest page:' + page); - } -}; - - -`; - -const options = { - onSizePerPageChange: (sizePerPage, page) => { - console.log('Size per page change!!!'); - console.log(`Newest size per page: ${sizePerPage}`); - console.log(`Newest page: ${page}`); - }, - onPageChange: (page, sizePerPage) => { - console.log('Page change!!!'); - console.log(`Newest size per page: ${sizePerPage}`); - console.log(`Newest page: ${page}`); - } -}; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-all.js b/packages/react-bootstrap-table2-example/examples/remote/remote-all.js deleted file mode 100644 index c23d690..0000000 --- a/packages/react-bootstrap-table2-example/examples/remote/remote-all.js +++ /dev/null @@ -1,202 +0,0 @@ -/* eslint guard-for-in: 0 */ -/* eslint no-restricted-syntax: 0 */ -import React from 'react'; -import PropTypes from 'prop-types'; -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(87); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - -const sourceCode = `\ -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter'; -// ... - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - -const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => ( -
- - { sourceCode } -
-); - -RemoteAll.propTypes = { - data: PropTypes.array.isRequired, - page: PropTypes.number.isRequired, - totalSize: PropTypes.number.isRequired, - sizePerPage: PropTypes.number.isRequired, - onTableChange: PropTypes.func.isRequired -}; - -class Container extends React.Component { - constructor(props) { - super(props); - this.state = { - page: 1, - data: products.slice(0, 10), - totalSize: products.length, - sizePerPage: 10 - }; - this.handleTableChange = this.handleTableChange.bind(this); - } - - handleTableChange = (type, { page, sizePerPage, filters }) => { - const currentIndex = (page - 1) * sizePerPage; - setTimeout(() => { - const result = products.filter((row) => { - let valid = true; - for (const dataField in filters) { - const { filterVal, filterType, comparator } = filters[dataField]; - - if (filterType === 'TEXT') { - if (comparator === Comparator.LIKE) { - valid = row[dataField].toString().indexOf(filterVal) > -1; - } else { - valid = row[dataField] === filterVal; - } - } - if (!valid) break; - } - return valid; - }); - this.setState(() => ({ - page, - data: result.slice(currentIndex, currentIndex + sizePerPage), - totalSize: result.length, - sizePerPage - })); - }, 2000); - } - - render() { - const { data, sizePerPage, page } = this.state; - return ( - - ); - } -} -`; - -const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => ( -
-

When remote.pagination is enabled, the filtering, - sorting and searching will also change to remote mode automatically

- - { sourceCode } -
-); - -RemoteAll.propTypes = { - data: PropTypes.array.isRequired, - page: PropTypes.number.isRequired, - totalSize: PropTypes.number.isRequired, - sizePerPage: PropTypes.number.isRequired, - onTableChange: PropTypes.func.isRequired -}; - -class Container extends React.Component { - constructor(props) { - super(props); - this.state = { - page: 1, - data: products.slice(0, 10), - totalSize: products.length, - sizePerPage: 10 - }; - this.handleTableChange = this.handleTableChange.bind(this); - } - - handleTableChange = (type, { page, sizePerPage, filters }) => { - const currentIndex = (page - 1) * sizePerPage; - setTimeout(() => { - const result = products.filter((row) => { - let valid = true; - for (const dataField in filters) { - const { filterVal, filterType, comparator } = filters[dataField]; - - if (filterType === 'TEXT') { - if (comparator === Comparator.LIKE) { - valid = row[dataField].toString().indexOf(filterVal) > -1; - } else { - valid = row[dataField] === filterVal; - } - } - if (!valid) break; - } - return valid; - }); - this.setState(() => ({ - page, - data: result.slice(currentIndex, currentIndex + sizePerPage), - totalSize: result.length, - sizePerPage - })); - }, 2000); - } - - render() { - const { data, sizePerPage, page } = this.state; - return ( - - ); - } -} - -export default Container; diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js b/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js deleted file mode 100644 index d2b37b6..0000000 --- a/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js +++ /dev/null @@ -1,105 +0,0 @@ -/* eslint guard-for-in: 0 */ -/* eslint no-restricted-syntax: 0 */ -import React from 'react'; -import PropTypes from 'prop-types'; -import BootstrapTable from 'react-bootstrap-table2'; -import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(17); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - -const sourceCode = `\ -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; - -const columns = [{ - dataField: 'id', - text: 'Product ID', -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}, { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - - -`; - -const RemoteFilter = props => ( -
- - { sourceCode } -
-); - -RemoteFilter.propTypes = { - data: PropTypes.array.isRequired, - onTableChange: PropTypes.func.isRequired -}; - -class Container extends React.Component { - constructor(props) { - super(props); - this.state = { - data: products - }; - } - - handleTableChange = (type, { filters }) => { - setTimeout(() => { - const result = products.filter((row) => { - let valid = true; - for (const dataField in filters) { - const { filterVal, filterType, comparator } = filters[dataField]; - - if (filterType === 'TEXT') { - if (comparator === Comparator.LIKE) { - valid = row[dataField].toString().indexOf(filterVal) > -1; - } else { - valid = row[dataField] === filterVal; - } - } - if (!valid) break; - } - return valid; - }); - this.setState(() => ({ - data: result - })); - }, 2000); - } - - render() { - return ( - - ); - } -} - -export default Container; diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js b/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js deleted file mode 100644 index 050dc4d..0000000 --- a/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js +++ /dev/null @@ -1,133 +0,0 @@ -/* eslint react/no-multi-comp: 0 */ -import React from 'react'; -import PropTypes from 'prop-types'; -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(87); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -import BootstrapTable from 'react-bootstrap-table2'; -import paginator from 'react-bootstrap-table2-paginator'; -// ... -const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => ( -
- - { sourceCode } -
-); - -class Container extends React.Component { - constructor(props) { - super(props); - this.state = { - page: 1, - data: products.slice(0, 10), - sizePerPage: 10 - }; - } - - handleTableChange = ({ page, sizePerPage }) => { - const currentIndex = (page - 1) * sizePerPage; - setTimeout(() => { - this.setState(() => ({ - page, - data: products.slice(currentIndex, currentIndex + sizePerPage), - sizePerPage - })); - }, 2000); - } - - render() { - const { data, sizePerPage, page } = this.state; - return ( - - ); - } -} -`; - -const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => ( -
- - { sourceCode } -
-); - -RemotePagination.propTypes = { - data: PropTypes.array.isRequired, - page: PropTypes.number.isRequired, - totalSize: PropTypes.number.isRequired, - sizePerPage: PropTypes.number.isRequired, - onTableChange: PropTypes.func.isRequired -}; - -class Container extends React.Component { - constructor(props) { - super(props); - this.state = { - page: 1, - data: products.slice(0, 10), - sizePerPage: 10 - }; - } - - handleTableChange = (type, { page, sizePerPage }) => { - const currentIndex = (page - 1) * sizePerPage; - setTimeout(() => { - this.setState(() => ({ - page, - data: products.slice(currentIndex, currentIndex + sizePerPage), - sizePerPage - })); - }, 2000); - } - - render() { - const { data, sizePerPage, page } = this.state; - return ( - - ); - } -} - -export default Container; diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js deleted file mode 100644 index cc0c1fe..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - clickToEdit: true -}; - -const cellEdit = { - mode: 'click' -}; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - clickToEdit: true // Click to edit cell also -}; - -const cellEdit = { - mode: 'click' -}; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js deleted file mode 100644 index b792b43..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true -}; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true -}; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js b/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js deleted file mode 100644 index b654411..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - hideSelectColumn: true, - bgColor: '#00BFFF' -}; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - hideSelectColumn: true, - bgColor: '#00BFFF' -}; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js b/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js deleted file mode 100644 index b792b43..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true -}; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true -}; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js deleted file mode 100644 index 69fbf0a..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - nonSelectable: [0, 2, 4] -}; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - nonSelectable: [0, 2, 4] -}; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js deleted file mode 100644 index ede13e0..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js +++ /dev/null @@ -1,92 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow1 = { - mode: 'checkbox', - clickToSelect: true, - bgColor: '#00BFFF' -}; - -const selectRow2 = { - mode: 'checkbox', - clickToSelect: true, - bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF') -}; - -const sourceCode1 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - bgColor: '#00BFFF' -}; - - -`; - -const sourceCode2 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF') -}; - - -`; - -export default () => ( -
- - { sourceCode1 } - - { sourceCode2 } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js deleted file mode 100644 index 4c6b794..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js +++ /dev/null @@ -1,94 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow1 = { - mode: 'checkbox', - clickToSelect: true, - classes: 'selection-row' -}; - -const selectRow2 = { - mode: 'checkbox', - clickToSelect: true, - classes: (row, rowIndex) => - (rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101') -}; - -const sourceCode1 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - classes: 'selection-row' -}; - - -`; - -const sourceCode2 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - classes: (row, rowIndex) => - (rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101') -}; - - -`; - -export default () => ( -
- - { sourceCode1 } - - { sourceCode2 } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js deleted file mode 100644 index fd94d6b..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js +++ /dev/null @@ -1,66 +0,0 @@ - -/* eslint no-console: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - onSelect: (row, isSelect, rowIndex) => { - console.log(row.id); - console.log(isSelect); - console.log(rowIndex); - }, - onSelectAll: (isSelect, rows) => { - console.log(isSelect); - console.log(rows); - } -}; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true -}; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js deleted file mode 100644 index e347c1e..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js +++ /dev/null @@ -1,98 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow1 = { - mode: 'checkbox', - clickToSelect: true, - style: { backgroundColor: '#c8e6c9' } -}; - -const selectRow2 = { - mode: 'checkbox', - clickToSelect: true, - style: (row, rowIndex) => { - const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF'; - return { backgroundColor }; - } -}; - -const sourceCode1 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - style: { backgroundColor: '#c8e6c9' } -}; - - -`; - -const sourceCode2 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'checkbox', - clickToSelect: true, - style: (row, rowIndex) => { - const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF'; - return { backgroundColor }; - } -}; - - -`; - -export default () => ( -
- - { sourceCode1 } - - { sourceCode2 } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js b/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js deleted file mode 100644 index 936dde4..0000000 --- a/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'radio', - clickToSelect: true -}; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const selectRow = { - mode: 'radio', - clickToSelect: true -}; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-class.js b/packages/react-bootstrap-table2-example/examples/rows/row-class.js deleted file mode 100644 index b17f6b1..0000000 --- a/packages/react-bootstrap-table2-example/examples/rows/row-class.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const rowClasses1 = 'custom-row-class'; - -const sourceCode1 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const rowClasses = 'custom-row-class'; - - -`; - -const rowClasses2 = (row, rowIndex) => { - let classes = null; - - if (rowIndex > 2) { - classes = 'index-bigger-than-two'; - } - - return classes; -}; - -const sourceCode2 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const rowClasses = (row, rowIndex) => { - let classes = null; - - if (rowIndex > 2) { - classes = 'index-bigger-than-two'; - } - - return classes; -}; - - -`; - -export default () => ( -
- - { sourceCode1 } - - { sourceCode2 } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-event.js b/packages/react-bootstrap-table2-example/examples/rows/row-event.js deleted file mode 100644 index 1ec5022..0000000 --- a/packages/react-bootstrap-table2-example/examples/rows/row-event.js +++ /dev/null @@ -1,54 +0,0 @@ -/* eslint no-unused-vars: 0 */ -/* eslint no-console: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const rowEvents = { - onClick: (e) => { - console.log('click on row'); - } -}; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const rowEvents = { - onClick: (e) => { - console.log('click on row'); - } -}; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-style.js b/packages/react-bootstrap-table2-example/examples/rows/row-style.js deleted file mode 100644 index 76de2ea..0000000 --- a/packages/react-bootstrap-table2-example/examples/rows/row-style.js +++ /dev/null @@ -1,93 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const rowStyle1 = { backgroundColor: '#c8e6c9' }; - -const sourceCode1 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const rowStyle = { backgroundColor: '#c8e6c9' }; - - -`; - -const rowStyle2 = (row, rowIndex) => { - const style = {}; - if (row.id > 3) { - style.backgroundColor = '#c8e6c9'; - } else { - style.backgroundColor = '#00BFFF'; - } - - if (rowIndex > 2) { - style.fontWeight = 'bold'; - style.color = 'white'; - } - - return style; -}; - -const sourceCode2 = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID' -}, { - dataField: 'name', - text: 'Product Name' -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const rowStyle2 = (row, rowIndex) => { - const style = {}; - if (row.id > 3) { - style.backgroundColor = '#c8e6c9'; - } else { - style.backgroundColor = '#00BFFF'; - } - - if (rowIndex > 2) { - style.fontWeight = 'bold'; - style.color = 'white'; - } - - return style; -}; - - -`; - -export default () => ( -
- - { sourceCode1 } - - { sourceCode2 } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js deleted file mode 100644 index 1763a3e..0000000 --- a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js +++ /dev/null @@ -1,60 +0,0 @@ -/* eslint no-unused-vars: 0 */ - -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true, - // here, we implement a custom sort which perform a reverse sorting - sortFunc: (a, b, order, dataField) => { - if (order === 'asc') { - return b - a; - } - return a - b; // desc - } -}, { - dataField: 'name', - text: 'Product Name', - sort: true -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true, - // here, we implement a custom sort which perform a reverse sorting - sortFunc: (a, b, order, dataField) => { - if (order === 'asc') { - return b - a; - } - return a - b; // desc - } -}, { - dataField: 'name', - text: 'Product Name', - sort: true -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js deleted file mode 100644 index 9cda0a4..0000000 --- a/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js +++ /dev/null @@ -1,69 +0,0 @@ -/* eslint react/prefer-stateless-function: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true -}, { - dataField: 'name', - text: 'Product Name', - sort: true -}, { - dataField: 'price', - text: 'Product Price', - sort: true -}]; - -const defaultSorted = [{ - dataField: 'name', - order: 'desc' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true -}, { - dataField: 'name', - text: 'Product Name', - sort: true -}, { - dataField: 'price', - text: 'Product Price', - sort: true -}]; - -const defaultSorted = [{ - dataField: 'name', - order: 'desc' -}]; - - -`; - - -class DefaultSortTable extends React.PureComponent { - render() { - return ( -
- - { sourceCode } -
- ); - } -} - -export default DefaultSortTable; diff --git a/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js deleted file mode 100644 index 45c7ff4..0000000 --- a/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true -}, { - dataField: 'name', - text: 'Product Name', - sort: true -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true -}, { - dataField: 'name', - text: 'Product Name', - sort: true -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js deleted file mode 100644 index d70bdd7..0000000 --- a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js +++ /dev/null @@ -1,61 +0,0 @@ -/* eslint - no-unused-vars: 0 - arrow-body-style: 0 -*/ - -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => ( - sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc' -); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true, - headerSortingClasses -}, { - dataField: 'name', - text: 'Product Name', - sort: true, - headerSortingClasses -}, { - dataField: 'price', - text: 'Product Price' -}]; - -const sourceCode = `\ -const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => ( - sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc' -); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true, - headerSortingClasses -}, { - dataField: 'name', - text: 'Product Name', - sort: true, - headerSortingClasses -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js deleted file mode 100644 index c390965..0000000 --- a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js +++ /dev/null @@ -1,54 +0,0 @@ -/* eslint no-unused-vars: 0 */ -import React from 'react'; - -import BootstrapTable from 'react-bootstrap-table2'; -import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; - -const products = productsGenerator(); - -const headerSortingStyle = { backgroundColor: '#c8e6c9' }; - -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true, - headerSortingStyle -}, { - dataField: 'name', - text: 'Product Name', - sort: true, - headerSortingStyle -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -const sourceCode = `\ -const headerSortingStyle = { backgroundColor: '#c8e6c9' }; - -const columns = [{ - dataField: 'id', - text: 'Product ID', - sort: true, - headerSortingStyle -}, { - dataField: 'name', - text: 'Product Name', - sort: true, - headerSortingStyle -}, { - dataField: 'price', - text: 'Product Price' -}]; - - -`; - -export default () => ( -
- - { sourceCode } -
-); diff --git a/packages/react-bootstrap-table2-example/examples/welcome.js b/packages/react-bootstrap-table2-example/examples/welcome.js deleted file mode 100644 index 41f3547..0000000 --- a/packages/react-bootstrap-table2-example/examples/welcome.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import Typed from 'typed.js'; - -export default class Welcome extends React.Component { - componentDidMount() { - // type.js config - const options = { - strings: ['It\'s a bootstrap table rebuilt for React.js ♥'], - typeSpeed: 50, - backSpeed: 50 - }; - this.typed = new Typed(this.el, options); - } - - componentWillUnmount() { - // Make sure to destroy Typed instance on unmounting to prevent memory leaks - this.typed.destroy(); - } - - render() { - return ( -
-
-

react-bootstrap-table2

- { this.el = el; } } - /> -
- - - -
- ); - } -} diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json deleted file mode 100644 index 419f884..0000000 --- a/packages/react-bootstrap-table2-example/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "react-bootstrap-table2-example", - "version": "0.0.1", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook" - }, - "author": "", - "license": "ISC", - "peerDependencies": { - "prop-types": "^15.0.0", - "react": "^15.0.0", - "react-dom": "^15.0.0" - }, - "dependencies": { - "bootstrap": "^3.3.7", - "react-bootstrap-table2": "0.0.1", - "react-bootstrap-table2-paginator": "0.0.1", - "react-bootstrap-table2-overlay": "0.0.1", - "react-bootstrap-table2-filter": "0.0.1" - }, - "devDependencies": { - "@storybook/addon-console": "^1.0.0", - "@storybook/react": "^3.2.8", - "react-redux": "^5.0.6", - "redux": "^3.7.2", - "redux-thunk": "^2.2.0", - "typed.js": "^2.0.5" - } -} diff --git a/packages/react-bootstrap-table2-example/src/components/common/code-block.js b/packages/react-bootstrap-table2-example/src/components/common/code-block.js deleted file mode 100644 index c1be07d..0000000 --- a/packages/react-bootstrap-table2-example/src/components/common/code-block.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; - -export default class extends Component { - static propTypes = { - children: PropTypes.string - } - static defaultProps = { - children: '' - } - componentDidMount() { - // code-prettify - // run the PR.prettyPrint() function once your page has finished loading - if (typeof (PR) !== 'undefined') PR.prettyPrint(); // eslint-disable-line no-undef - } - - render() { - return ( -
- 
-          { this.props.children }
-
-
- ); - } -} diff --git a/packages/react-bootstrap-table2-example/src/index.html b/packages/react-bootstrap-table2-example/src/index.html deleted file mode 100644 index 810cd7c..0000000 --- a/packages/react-bootstrap-table2-example/src/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - react-bootstrap-table demo - - - - - - -
- - diff --git a/packages/react-bootstrap-table2-example/src/index.js b/packages/react-bootstrap-table2-example/src/index.js deleted file mode 100644 index 10b6085..0000000 --- a/packages/react-bootstrap-table2-example/src/index.js +++ /dev/null @@ -1,118 +0,0 @@ -/* eslint no-unused-vars: 0 */ -/* eslint no-debugger: 0 */ -/* eslint arrow-body-style: 0 */ -import React from 'react'; -import ReactDom from 'react-dom'; - -import BootstrapTable from 'react-bootstrap-table2'; - -require('react-bootstrap-table2/style/react-bootstrap-table.scss'); - -const products = []; - -function addProducts(quantity) { - const startId = products.length; - for (let i = 0; i < quantity; i += 1) { - const id = startId + i; - products.push({ - id, - name: `Item name ${id}`, - price: 2100 + i, - nest: { - address: 'Address 1', - postcal: '0922-1234' - } - }); - } -} - -addProducts(5); - -const columns = [{ - dataField: 'id', - text: 'Product ID', - style: { - backgroundColor: 'red' - }, - classes: 'my-xxx' -}, { - dataField: 'name', - text: 'Product Name', - headerTitle: true, - formatter: (cell, row) => - (

{ cell }::: ${ row.price }

), - validator: (newValue, row, column) => { - const validationForm = { - valid: true, - message: null - }; - validationForm.valid = false; - validationForm.message = 'Invalid message'; - return validationForm; - } -}, { - dataField: 'price', - text: 'Product Price', - validator: (newValue, row, column) => { - if (newValue < 2000) { - return { - valid: false, - message: 'Price should bigger than 2000' - }; - } - return true; - } -}, { - dataField: 'nest.address', - text: 'Address' -}, { - dataField: 'nest.postcal', - text: 'Postal', - editable: true, - validator: (newValue, row, column) => true -}]; - -const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); - -const cellEdit = { - mode: 'click', - blurToSave: true, - // beforeSaveCell: (oldValue, newValue, row, column) => { - // console.log('beforeSavecell'); - // // console.log(oldValue); - // // console.log(newValue); - // // console.log(row); - // // console.log(column); - // }, - // afterSaveCell: (oldValue, newValue, row, column) => { - // console.log('aftersavecell'); - // // console.log(oldValue); - // // console.log(newValue); - // // console.log(row); - // // console.log(column); - // } - onUpdate: (rowId, dataField, newValue) => { - return sleep(1000).then(() => { - // return { forceUpdate: true }; - throw new Error('test is not successfully'); - }); - } - // nonEditableRows: () => [1, 3, 7] -}; - - -// let Table = withCellEdit({ -// mode: 'click', -// blurToSave: true, -// onEditing: (rowId, dataField, newValue) => { -// return sleep(1000).then(() => { -// // return { forceUpdate: true }; -// throw new Error('test is not successfully'); -// }); -// } -// })(BootstrapTable); -// Table = createTable(Table); - -ReactDom.render( - , - document.getElementById('example')); diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js deleted file mode 100644 index 0d5ad84..0000000 --- a/packages/react-bootstrap-table2-example/src/utils/common.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * products generator for stories - * - * @param {Number} quantity - quantity of products - * @param {Function} callback - callback func which is similiar to 'mapFunction' - * aims to customize product format - * - * @return {Array} - products array - */ -export const productsGenerator = (quantity = 5, callback) => { - if (callback) return Array.from({ length: quantity }, callback); - - // if no given callback, retrun default product format. - return ( - Array.from({ length: quantity }, (value, index) => ({ - id: index, - name: `Item name ${index}`, - price: 2100 + index - })) - ); -}; - -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) - })); - -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 deleted file mode 100644 index 36abbb0..0000000 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ /dev/null @@ -1,195 +0,0 @@ -/* eslint import/no-unresolved: 0 */ -import React from 'react'; -import { storiesOf } from '@storybook/react'; - -// welcome -import Welcome from 'examples/welcome'; -// basic -import BasicTable from 'examples/basic'; -import BorderlessTable from 'examples/basic/borderless-table'; -import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table'; -import NoDataTable from 'examples/basic/no-data-table'; -import CaptionTable from 'examples/basic/caption-table'; - -// work on columns -import NestedDataTable from 'examples/columns/nested-data-table'; -import ColumnFormatTable from 'examples/columns/column-format-table'; -import ColumnFormatExtraDataTable from 'examples/columns/column-format-with-extra-data-table'; -import ColumnClassTable from 'examples/columns/column-class-table'; -import ColumnStyleTable from 'examples/columns/column-style-table'; -import ColumnAlignTable from 'examples/columns/column-align-table'; -import ColumnTitleTable from 'examples/columns/column-title-table'; -import ColumnEventTable from 'examples/columns/column-event-table'; -import ColumnHiddenTable from 'examples/columns/column-hidden-table'; -import ColumnAttrsTable from 'examples/columns/column-attrs-table'; - -// work on header columns -import HeaderColumnFormatTable from 'examples/header-columns/column-format-table'; -import HeaderColumnFormatWithSortFilterTable from 'examples/header-columns/column-format-filter-sort-table.js'; -import HeaderColumnAlignTable from 'examples/header-columns/column-align-table'; -import HeaderColumnTitleTable from 'examples/header-columns/column-title-table'; -import HeaderColumnEventTable from 'examples/header-columns/column-event-table'; -import HeaderColumnClassTable from 'examples/header-columns/column-class-table'; -import HeaderColumnStyleTable from 'examples/header-columns/column-style-table'; -import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table'; - -// column filter -import TextFilter from 'examples/column-filter/text-filter'; -import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value'; -import TextFilterComparator from 'examples/column-filter/text-filter-eq-comparator'; -import CustomTextFilter from 'examples/column-filter/custom-text-filter'; -import CustomFilterValue from 'examples/column-filter/custom-filter-value'; - -// work on rows -import RowStyleTable from 'examples/rows/row-style'; -import RowClassTable from 'examples/rows/row-class'; -import RowEventTable from 'examples/rows/row-event'; - -// table sort -import EnableSortTable from 'examples/sort/enable-sort-table'; -import DefaultSortTable from 'examples/sort/default-sort-table'; -import CustomSortTable from 'examples/sort/custom-sort-table'; -import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes'; -import HeaderSortingStyleTable from 'examples/sort/header-sorting-style'; - -// cell editing -import ClickToEditTable from 'examples/cell-edit/click-to-edit-table'; -import DoubleClickToEditTable from 'examples/cell-edit/dbclick-to-edit-table'; -import BlurToSaveTable from 'examples/cell-edit/blur-to-save-table'; -import RowLevelEditableTable from 'examples/cell-edit/row-level-editable-table'; -import ColumnLevelEditableTable from 'examples/cell-edit/column-level-editable-table'; -import CellLevelEditable from 'examples/cell-edit/cell-level-editable-table'; -import CellEditHooks from 'examples/cell-edit/cell-edit-hooks-table'; -import CellEditValidator from 'examples/cell-edit/cell-edit-validator-table'; -import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table'; -import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table'; -import CellEditWithPromise from 'examples/cell-edit/cell-edit-with-promise-table'; -import CellEditWithRedux from 'examples/cell-edit/cell-edit-with-redux-table'; - -// work on row selection -import SingleSelectionTable from 'examples/row-selection/single-selection'; -import MultipleSelectionTable from 'examples/row-selection/multiple-selection'; -import ClickToSelectTable from 'examples/row-selection/click-to-select'; -import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit'; -import SelectionStyleTable from 'examples/row-selection/selection-style'; -import SelectionClassTable from 'examples/row-selection/selection-class'; -import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows'; -import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor'; -import SelectionHooks from 'examples/row-selection/selection-hooks'; -import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column'; - -// pagination -import PaginationTable from 'examples/pagination'; -import PaginationHooksTable from 'examples/pagination/pagination-hooks'; -import CustomPaginationTable from 'examples/pagination/custom-pagination'; - -// loading overlay -import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay'; -import TableOverlay from 'examples/loading-overlay/table-overlay'; - -// remote -import RemoteFilter from 'examples/remote/remote-filter'; -import RemotePaginationTable from 'examples/remote/remote-pagination'; -import RemoteAll from 'examples/remote/remote-all'; - -// css style -import 'bootstrap/dist/css/bootstrap.min.css'; -import 'stories/stylesheet/tomorrow.min.css'; -import 'stories/stylesheet/storybook.scss'; -import 'react-bootstrap-table2/style/react-bootstrap-table.scss'; -import 'react-bootstrap-table2-paginator/style/react-bootstrap-table-paginator.scss'; - -// import { action } from '@storybook/addon-actions'; - -// action('hello'); -storiesOf('Welcome', module) - .add('react bootstrap table 2 ', () => ); - -storiesOf('Basic Table', module) - .add('basic table', () => ) - .add('striped, hover, condensed table', () => ) - .add('borderless table', () => ) - .add('Indication For Empty Table', () => ) - .add('Table with caption', () => ); - -storiesOf('Work on Columns', module) - .add('Display Nested Data', () => ) - .add('Column Formatter', () => ) - .add('Column Formatter with Custom Data', () => ) - .add('Column Align', () => ) - .add('Column Title', () => ) - .add('Column Hidden', () => ) - .add('Column Event', () => ) - .add('Customize Column Class', () => ) - .add('Customize Column Style', () => ) - .add('Customize Column HTML attribute', () => ); - -storiesOf('Work on Header Columns', module) - .add('Column Formatter', () => ) - .add('Column Format with Filter and Sort', () => ) - .add('Column Align', () => ) - .add('Column Title', () => ) - .add('Column Event', () => ) - .add('Customize Column Class', () => ) - .add('Customize Column Style', () => ) - .add('Customize Column HTML attribute', () => ); - -storiesOf('Column Filter', module) - .add('Text Filter', () => ) - .add('Text Filter with Default Value', () => ) - .add('Text Filter with Comparator', () => ) - .add('Custom Text Filter', () => ) - // add another filter type example right here. - .add('Custom Filter Value', () => ); - -storiesOf('Work on Rows', module) - .add('Customize Row Style', () => ) - .add('Customize Row Class', () => ) - .add('Row Event', () => ); - -storiesOf('Sort Table', module) - .add('Enable Sort', () => ) - .add('Default Sort Table', () => ) - .add('Custom Sort Fuction', () => ) - .add('Custom Classes on Sorting Header Column', () => ) - .add('Custom Style on Sorting Header Column', () => ); - -storiesOf('Cell Editing', module) - .add('Click to Edit', () => ) - .add('DoubleClick to Edit', () => ) - .add('Blur to Save Cell', () => ) - .add('Row Level Editable', () => ) - .add('Column Level Editable', () => ) - .add('Cell Level Editable', () => ) - .add('Rich Hook Functions', () => ) - .add('Validation', () => ) - .add('Custom Cell Style When Editing', () => ) - .add('Custom Cell Classes When Editing', () => ) - .add('Async Cell Editing(Promise)', () => ) - .add('Async Cell Editing(Redux)', () => ); - -storiesOf('Row Selection', module) - .add('Single Selection', () => ) - .add('Multiple Selection', () => ) - .add('Click to Select', () => ) - .add('Click to Select and Edit Cell', () => ) - .add('Selection Style', () => ) - .add('Selection Class', () => ) - .add('Selection Background Color', () => ) - .add('Not Selectabled Rows', () => ) - .add('Selection Hooks', () => ) - .add('Hide Selection Column', () => ); - -storiesOf('Pagination', module) - .add('Basic Pagination Table', () => ) - .add('Pagination Hooks', () => ) - .add('Custom Pagination', () => ); - -storiesOf('EmptyTableOverlay', module) - .add('Empty Table Overlay', () => ) - .add('Table Overlay', () => ); - -storiesOf('Remote', module) - .add('Remote Filter', () => ) - .add('Remote Pagination', () => ) - .add('Remote All', () => ); diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss deleted file mode 100644 index 5ee5a54..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss +++ /dev/null @@ -1,14 +0,0 @@ - -body { - font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif; - font-weight: 300; -} - -// font color -$grey-500: #9E9E9E; -$grey-900: #212121; -$pink-500: #E91E63; -$green-lighten-2: #81c784; -$green-lighten-4: #c8e6c9; -$light-blue: #00BFFF; -$markdown-color: #f6f8fa; diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base/_code-block.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base/_code-block.scss deleted file mode 100644 index 48b2052..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/base/_code-block.scss +++ /dev/null @@ -1,10 +0,0 @@ -.highlight-text-html-basic { - margin-bottom: 16px; - - pre { - background-color: $markdown-color; - padding: 16px; - border-radius: 3px; - } -} - diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base/_github-corner.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base/_github-corner.scss deleted file mode 100644 index a00c580..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/base/_github-corner.scss +++ /dev/null @@ -1,27 +0,0 @@ -.github-corner:hover .octo-arm { - animation: octocat-wave 560ms ease-in-out; -} - -@keyframes octocat-wave { - 0%, - 100% { - transform: rotate(0) - } - 20%, - 60% { - transform: rotate(-25deg) - } - 40%, - 80% { - transform: rotate(10deg) - } -} - -@media (max-width:500px) { - .github-corner:hover .octo-arm { - animation: none - } - .github-corner .octo-arm { - animation: octocat-wave 560ms ease-in-out - } -} diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/cell-edit/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/cell-edit/_index.scss deleted file mode 100644 index 23f543a..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/cell-edit/_index.scss +++ /dev/null @@ -1,11 +0,0 @@ -.editing-name { - background-color: #20B2AA; -} - -.editing-price-bigger-than-2101 { - background-color: #00BFFF; -} - -.editing-price-small-than-2101 { - background-color: #00FFFF; -} \ No newline at end of file diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss deleted file mode 100644 index 3468c70..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss +++ /dev/null @@ -1,12 +0,0 @@ -.demo-key-row { - font-weight: bold; - font-size: 18px; -} - -.demo-row-even { - background-color: $green-lighten-2; -} - -.demo-row-odd { - background-color: $green-lighten-4; -} \ No newline at end of file diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/loading-overlay/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/loading-overlay/_index.scss deleted file mode 100644 index 982c07f..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/loading-overlay/_index.scss +++ /dev/null @@ -1,52 +0,0 @@ -.spinner { - margin: 100px auto; - width: 50px; - height: 40px; - text-align: center; - font-size: 10px; -} - -.spinner > div { - background-color: #333; - height: 100%; - width: 6px; - display: inline-block; - - -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; - animation: sk-stretchdelay 1.2s infinite ease-in-out; -} - -.spinner .rect2 { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; -} - -.spinner .rect3 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; -} - -.spinner .rect4 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; -} - -.spinner .rect5 { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; -} - -@-webkit-keyframes sk-stretchdelay { - 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } - 20% { -webkit-transform: scaleY(1.0) } -} - -@keyframes sk-stretchdelay { - 0%, 40%, 100% { - transform: scaleY(0.4); - -webkit-transform: scaleY(0.4); - } 20% { - transform: scaleY(1.0); - -webkit-transform: scaleY(1.0); - } -} diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/row-selection/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/row-selection/_index.scss deleted file mode 100644 index 91cfc67..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/row-selection/_index.scss +++ /dev/null @@ -1,11 +0,0 @@ -.selection-row { - background-color: #c8e6c9; -} - -.row-index-bigger-than-2101 { - background-color: #00BFFF; -} - -.row-index-small-than-2101 { - background-color: #00FFFF; -} \ No newline at end of file diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/rows/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/rows/_index.scss deleted file mode 100644 index 16da83d..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/rows/_index.scss +++ /dev/null @@ -1,7 +0,0 @@ -.custom-row-class { - background-color: #c8e6c9; -} - -.index-bigger-than-two { - background-color: #00BFFF; -} \ No newline at end of file diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/sort/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/sort/_index.scss deleted file mode 100644 index bb8b1e8..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/sort/_index.scss +++ /dev/null @@ -1,8 +0,0 @@ -.demo-sorting, -.demo-sorting-asc { - background-color: $green-lighten-2; -} - -.demo-sorting-desc { - background-color: $light-blue; -} diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss deleted file mode 100644 index cf0a024..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* customized style for storybook*/ -@import "base/base"; -@import "base/github-corner"; -@import "base/code-block"; - -@import "welcome/index"; -@import "columns/index"; -@import "cell-edit/index"; -@import "row-selection/index"; -@import "rows/index"; -@import "sort/index"; -@import "loading-overlay/index"; diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/tomorrow.min.css b/packages/react-bootstrap-table2-example/stories/stylesheet/tomorrow.min.css deleted file mode 100644 index 3638ea9..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/tomorrow.min.css +++ /dev/null @@ -1,2 +0,0 @@ -/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */ -.prettyprint{background:#fff;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}} \ No newline at end of file diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss deleted file mode 100644 index 1d7949c..0000000 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss +++ /dev/null @@ -1,38 +0,0 @@ -.welcome { - margin-top: 70px; - text-align: center; - padding: 30px 30px; - - &-title { - color: $grey-900; - } - &-sub-title { - font-size: 30px; - color: $grey-500; - } -} - -span.love-icon { - color: $pink-500; -} - -/* Adding cursor blinking animation */ -.typed-cursor{ - font-size: 30px; - color: $grey-500; - opacity: 1; - animation: typedjsBlink 0.7s infinite; -} -@keyframes typedjsBlink{ - 50% { opacity: 0.0; } -} -@-webkit-keyframes typedjsBlink{ - 0% { opacity: 1; } - 50% { opacity: 0.0; } - 100% { opacity: 1; } -} -.typed-fade-out{ - opacity: 0; - transition: opacity .25s; - animation: 0; -} diff --git a/packages/react-bootstrap-table2-example/test/utils/common.test.js b/packages/react-bootstrap-table2-example/test/utils/common.test.js deleted file mode 100644 index ca8ecab..0000000 --- a/packages/react-bootstrap-table2-example/test/utils/common.test.js +++ /dev/null @@ -1,36 +0,0 @@ -import { productsGenerator } from '../../src/utils/common'; - -describe('Utils', () => { - describe('productsGenerator', () => { - const quantity = 2; - - it('should return an array', () => { - expect(Array.isArray(productsGenerator())).toBe(true); - }); - - it('should return 5 products without params', () => { - expect(productsGenerator().length).toEqual(5); - }); - - it('should return an array with given quntity', () => { - expect(productsGenerator(quantity).length).toEqual(quantity); - }); - - describe('when callback is defined', () => { - const callback = (value, index) => ({ - id: index, - name: 'react-bootstrap-table-2' - }); - - it('should return customized products format', () => { - const products = productsGenerator(quantity, callback); - const product = products[0]; - - expect(Array.isArray(products)).toBe(true); - expect(products.length).toBe(quantity); - expect(product).toHaveProperty('id', 0); - expect(product).toHaveProperty('name', 'react-bootstrap-table-2'); - }); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md deleted file mode 100644 index 8cef968..0000000 --- a/packages/react-bootstrap-table2-filter/README.md +++ /dev/null @@ -1,40 +0,0 @@ -# react-bootstrap-table2-filter - -## Filters - -* Text (`textFilter`) - -You can get all of above filters via import and these filters are a factory function to create a individual filter instance. -In addition, for some simple customization reasons, these factory function allow to pass some props. - -### Text Filter - -```js -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; - -// omit... -const columns = [ - ..., { - dataField: 'price', - text: 'Product Price', - filter: textFilter() -}]; - - -``` - -Following we list all the availabe props for `textFilter` function: - -```js -import { Comparator } from 'react-bootstrap-table2-filter'; -// omit... - -const customTextFilter = textFilter({ - placeholder: 'My Custom PlaceHolder', // custom the input placeholder - style: { ... }, // your custom styles on input - className: 'my-custom-text-filter', // custom classname on input - defaultValue: 'test', // default filtering value - delay: 1000, // how long will trigger filtering after user typing, default is 500 ms - comparator: Comparator.EQ // default is Comparator.LIKE -}); -``` \ No newline at end of file diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json deleted file mode 100644 index 826efa7..0000000 --- a/packages/react-bootstrap-table2-filter/package.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "react-bootstrap-table2-filter", - "version": "0.0.1", - "description": "it's the column filter addon for react-bootstrap-table2", - "main": "src/index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "ISC" -} diff --git a/packages/react-bootstrap-table2-filter/src/comparison.js b/packages/react-bootstrap-table2-filter/src/comparison.js deleted file mode 100644 index cc24214..0000000 --- a/packages/react-bootstrap-table2-filter/src/comparison.js +++ /dev/null @@ -1,2 +0,0 @@ -export const LIKE = 'LIKE'; -export const EQ = '='; diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js deleted file mode 100644 index 1c102c3..0000000 --- a/packages/react-bootstrap-table2-filter/src/components/text.js +++ /dev/null @@ -1,107 +0,0 @@ -/* eslint react/require-default-props: 0 */ -/* eslint react/prop-types: 0 */ -/* eslint no-return-assign: 0 */ -import React, { Component } from 'react'; -import { PropTypes } from 'prop-types'; - -import { LIKE, EQ } from '../comparison'; -import { FILTER_TYPE, FILTER_DELAY } from '../const'; - -class TextFilter extends Component { - constructor(props) { - super(props); - this.filter = this.filter.bind(this); - this.handleClick = this.handleClick.bind(this); - this.timeout = null; - this.state = { - value: props.defaultValue - }; - } - componentDidMount() { - const defaultValue = this.input.value; - if (defaultValue) { - this.props.onFilter(this.props.column, defaultValue, FILTER_TYPE.TEXT); - } - } - - componentWillReceiveProps(nextProps) { - if (nextProps.defaultValue !== this.props.defaultValue) { - this.applyFilter(nextProps.defaultValue); - } - } - - componentWillUnmount() { - this.cleanTimer(); - } - - filter(e) { - e.stopPropagation(); - this.cleanTimer(); - const filterValue = e.target.value; - this.setState(() => ({ value: filterValue })); - this.timeout = setTimeout(() => { - this.props.onFilter(this.props.column, filterValue, FILTER_TYPE.TEXT); - }, this.props.delay); - } - - cleanTimer() { - if (this.timeout) { - clearTimeout(this.timeout); - } - } - - cleanFiltered() { - const value = this.props.defaultValue; - this.setState(() => ({ value })); - this.props.onFilter(this.props.column, value, FILTER_TYPE.TEXT); - } - - applyFilter(filterText) { - this.setState(() => ({ value: filterText })); - this.props.onFilter(this.props.column, filterText, FILTER_TYPE.TEXT); - } - - handleClick(e) { - e.stopPropagation(); - if (this.props.onClick) { - this.props.onClick(e); - } - } - - render() { - const { placeholder, column: { text }, style, className, onFilter, ...rest } = this.props; - // stopPropagation for onClick event is try to prevent sort was triggered. - return ( - this.input = n } - type="text" - className={ `filter text-filter form-control ${className}` } - style={ style } - onChange={ this.filter } - onClick={ this.handleClick } - placeholder={ placeholder || `Enter ${text}...` } - value={ this.state.value } - /> - ); - } -} - -TextFilter.propTypes = { - onFilter: PropTypes.func.isRequired, - column: PropTypes.object.isRequired, - comparator: PropTypes.oneOf([LIKE, EQ]), - defaultValue: PropTypes.string, - delay: PropTypes.number, - placeholder: PropTypes.string, - style: PropTypes.object, - className: PropTypes.string -}; - -TextFilter.defaultProps = { - delay: FILTER_DELAY, - defaultValue: '' -}; - - -export default TextFilter; diff --git a/packages/react-bootstrap-table2-filter/src/const.js b/packages/react-bootstrap-table2-filter/src/const.js deleted file mode 100644 index 25faae0..0000000 --- a/packages/react-bootstrap-table2-filter/src/const.js +++ /dev/null @@ -1,5 +0,0 @@ -export const FILTER_TYPE = { - TEXT: 'TEXT' -}; - -export const FILTER_DELAY = 500; diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js deleted file mode 100644 index 03914a8..0000000 --- a/packages/react-bootstrap-table2-filter/src/filter.js +++ /dev/null @@ -1,45 +0,0 @@ -import { FILTER_TYPE } from './const'; -import { LIKE, EQ } from './comparison'; - -export const filterByText = _ => ( - data, - dataField, - { filterVal, comparator = LIKE }, - customFilterValue -) => - data.filter((row) => { - let cell = _.get(row, dataField); - if (customFilterValue) { - cell = customFilterValue(cell, row); - } - const cellStr = _.isDefined(cell) ? cell.toString() : ''; - if (comparator === EQ) { - return cellStr === filterVal; - } - return cellStr.indexOf(filterVal) > -1; - }); - -export const filterFactory = _ => (filterType) => { - let filterFn; - switch (filterType) { - case FILTER_TYPE.TEXT: - filterFn = filterByText(_); - break; - default: - filterFn = filterByText(_); - } - return filterFn; -}; - -export const filters = (store, columns, _) => (currFilters) => { - const factory = filterFactory(_); - let result = store.getAllData(); - let filterFn; - Object.keys(currFilters).forEach((dataField) => { - const filterObj = currFilters[dataField]; - filterFn = factory(filterObj.filterType); - const { filterValue } = columns.find(col => col.dataField === dataField); - result = filterFn(result, dataField, filterObj, filterValue); - }); - return result; -}; diff --git a/packages/react-bootstrap-table2-filter/src/index.js b/packages/react-bootstrap-table2-filter/src/index.js deleted file mode 100644 index 4bba49d..0000000 --- a/packages/react-bootstrap-table2-filter/src/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import TextFilter from './components/text'; -import FilterWrapper from './wrapper'; -import * as Comparison from './comparison'; - -export default (options = {}) => ({ - FilterWrapper, - options -}); - -export const Comparator = Comparison; - -export const textFilter = (props = {}) => ({ - Filter: TextFilter, - props -}); diff --git a/packages/react-bootstrap-table2-filter/src/wrapper.js b/packages/react-bootstrap-table2-filter/src/wrapper.js deleted file mode 100644 index 48e4d73..0000000 --- a/packages/react-bootstrap-table2-filter/src/wrapper.js +++ /dev/null @@ -1,76 +0,0 @@ -/* eslint react/prop-types: 0 */ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { filters } from './filter'; -import { LIKE } from './comparison'; - -export default class FilterWrapper extends Component { - static propTypes = { - store: PropTypes.object.isRequired, - columns: PropTypes.array.isRequired, - baseElement: PropTypes.func.isRequired, - onRemoteFilterChange: PropTypes.func.isRequired, - // refactoring later - _: PropTypes.object.isRequired - } - - constructor(props) { - super(props); - this.state = { currFilters: {}, isDataChanged: false }; - this.onFilter = this.onFilter.bind(this); - } - - componentWillReceiveProps(nextProps) { - // consider to use lodash.isEqual - if (JSON.stringify(this.state.currFilters) !== JSON.stringify(nextProps.store.filters)) { - this.setState(() => ({ isDataChanged: true, currFilters: nextProps.store.filters })); - } else { - this.setState(() => ({ isDataChanged: false })); - } - } - - onFilter(column, filterVal, filterType) { - const { store, columns, _, onRemoteFilterChange } = this.props; - const currFilters = Object.assign({}, this.state.currFilters); - const { dataField, filter } = column; - - if (!_.isDefined(filterVal) || filterVal === '') { - delete currFilters[dataField]; - } else { - const { comparator = LIKE } = filter.props; - currFilters[dataField] = { filterVal, filterType, comparator }; - } - store.filters = currFilters; - - if (this.isRemote() || this.isPaginationRemote()) { - onRemoteFilterChange(this.isPaginationRemote()); - // when remote filtering is enable, dont set currFilters state - // in the componentWillReceiveProps, it's the key point that we can know the filter is changed - return; - } - - store.filteredData = filters(store, columns, _)(currFilters); - this.setState(() => ({ currFilters, isDataChanged: true })); - } - - // refactoring later - isRemote() { - const { remote } = this.props; - return remote === true || (typeof remote === 'object' && remote.filter); - } - - // refactoring later - isPaginationRemote() { - const { remote } = this.props; - return remote === true || (typeof remote === 'object' && remote.pagination); - } - - render() { - return this.props.baseElement({ - ...this.props, - key: 'table', - onFilter: this.onFilter, - isDataChanged: this.state.isDataChanged - }); - } -} diff --git a/packages/react-bootstrap-table2-filter/test/components/text.test.js b/packages/react-bootstrap-table2-filter/test/components/text.test.js deleted file mode 100644 index 4a9c282..0000000 --- a/packages/react-bootstrap-table2-filter/test/components/text.test.js +++ /dev/null @@ -1,190 +0,0 @@ -import 'jsdom-global/register'; -import React from 'react'; -import sinon from 'sinon'; -import { mount } from 'enzyme'; -import TextFilter from '../../src/components/text'; -import { FILTER_TYPE } from '../../src/const'; - -jest.useFakeTimers(); -describe('Text Filter', () => { - let wrapper; - let instance; - const onFilter = sinon.stub(); - const column = { - dataField: 'price', - text: 'Price' - }; - - afterEach(() => { - onFilter.reset(); - }); - - describe('initialization', () => { - beforeEach(() => { - wrapper = mount( - - ); - instance = wrapper.instance(); - }); - - it('should have correct state', () => { - expect(instance.state.value).toEqual(instance.props.defaultValue); - }); - - it('should rendering component successfully', () => { - expect(wrapper).toHaveLength(1); - expect(wrapper.find('input[type="text"]')).toHaveLength(1); - expect(instance.input.getAttribute('placeholder')).toEqual(`Enter ${column.text}...`); - }); - }); - - describe('when defaultValue is defined', () => { - const defaultValue = '123'; - beforeEach(() => { - wrapper = mount( - - ); - instance = wrapper.instance(); - }); - - it('should have correct state', () => { - expect(instance.state.value).toEqual(defaultValue); - }); - - it('should rendering component successfully', () => { - expect(wrapper).toHaveLength(1); - expect(instance.input.value).toEqual(defaultValue); - }); - - it('should calling onFilter on componentDidMount', () => { - expect(onFilter.calledOnce).toBeTruthy(); - expect(onFilter.calledWith(column, defaultValue, FILTER_TYPE.TEXT)).toBeTruthy(); - }); - }); - - describe('when placeholder is defined', () => { - const placeholder = 'test'; - beforeEach(() => { - wrapper = mount( - - ); - instance = wrapper.instance(); - }); - - it('should rendering component successfully', () => { - expect(wrapper).toHaveLength(1); - expect(instance.input.getAttribute('placeholder')).toEqual(placeholder); - }); - }); - - describe('when style is defined', () => { - const style = { backgroundColor: 'red' }; - beforeEach(() => { - wrapper = mount( - - ); - instance = wrapper.instance(); - }); - - it('should rendering component successfully', () => { - expect(wrapper).toHaveLength(1); - expect(wrapper.find('input').prop('style')).toEqual(style); - }); - }); - - describe('componentWillReceiveProps', () => { - const nextDefaultValue = 'tester'; - const nextProps = { - onFilter, - column, - defaultValue: nextDefaultValue - }; - - beforeEach(() => { - wrapper = mount( - - ); - instance = wrapper.instance(); - instance.componentWillReceiveProps(nextProps); - }); - - it('should setting state correctly when props.defaultValue is changed', () => { - expect(instance.state.value).toEqual(nextDefaultValue); - }); - - it('should calling onFilter correctly when props.defaultValue is changed', () => { - expect(onFilter.calledOnce).toBeTruthy(); - expect(onFilter.calledWith(column, nextDefaultValue, FILTER_TYPE.TEXT)).toBeTruthy(); - }); - }); - - describe('cleanFiltered', () => { - beforeEach(() => { - wrapper = mount( - - ); - instance = wrapper.instance(); - instance.cleanFiltered(); - }); - - it('should setting state correctly', () => { - expect(instance.state.value).toEqual(instance.props.defaultValue); - }); - - it('should calling onFilter correctly', () => { - expect(onFilter.calledOnce).toBeTruthy(); - expect(onFilter.calledWith( - column, instance.props.defaultValue, FILTER_TYPE.TEXT)).toBeTruthy(); - }); - }); - - describe('applyFilter', () => { - const filterText = 'test'; - beforeEach(() => { - wrapper = mount( - - ); - instance = wrapper.instance(); - instance.applyFilter(filterText); - }); - - it('should setting state correctly', () => { - expect(instance.state.value).toEqual(filterText); - }); - - it('should calling onFilter correctly', () => { - expect(onFilter.calledOnce).toBeTruthy(); - expect(onFilter.calledWith(column, filterText, FILTER_TYPE.TEXT)).toBeTruthy(); - }); - }); - - describe('filter', () => { - const event = { stopPropagation: sinon.stub(), target: { value: 'tester' } }; - - beforeEach(() => { - wrapper = mount( - - ); - instance = wrapper.instance(); - instance.filter(event); - }); - - afterEach(() => { - setTimeout.mockClear(); - }); - - it('should calling e.stopPropagation', () => { - expect(event.stopPropagation.calledOnce).toBeTruthy(); - }); - - it('should setting state correctly', () => { - expect(instance.state.value).toEqual(event.target.value); - }); - - it('should calling setTimeout correctly', () => { - expect(setTimeout.mock.calls).toHaveLength(1); - expect(setTimeout.mock.calls[0]).toHaveLength(2); - expect(setTimeout.mock.calls[0][1]).toEqual(instance.props.delay); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-filter/test/filter.test.js b/packages/react-bootstrap-table2-filter/test/filter.test.js deleted file mode 100644 index 508c25f..0000000 --- a/packages/react-bootstrap-table2-filter/test/filter.test.js +++ /dev/null @@ -1,94 +0,0 @@ -import sinon from 'sinon'; -import _ from 'react-bootstrap-table2/src/utils'; -import Store from 'react-bootstrap-table2/src/store'; - -import { filters } from '../src/filter'; -import { FILTER_TYPE } from '../src/const'; -import { LIKE, EQ } from '../src/comparison'; - -const data = []; -for (let i = 0; i < 20; i += 1) { - data.push({ - id: i, - name: `itme name ${i}`, - price: 200 + i - }); -} - -describe('filter', () => { - let store; - let filterFn; - let currFilters; - let columns; - - beforeEach(() => { - store = new Store('id'); - store.data = data; - currFilters = {}; - columns = [{ - dataField: 'id', - text: 'ID' - }, { - dataField: 'name', - text: 'Name' - }, { - dataField: 'price', - text: 'Price' - }]; - }); - - describe('text filter', () => { - beforeEach(() => { - filterFn = filters(store, columns, _); - }); - - describe(`when default comparator is ${LIKE}`, () => { - it('should returning correct result', () => { - currFilters.name = { - filterVal: '3', - filterType: FILTER_TYPE.TEXT - }; - - const result = filterFn(currFilters); - expect(result).toBeDefined(); - expect(result).toHaveLength(2); - }); - }); - - describe(`when default comparator is ${EQ}`, () => { - it('should returning correct result', () => { - currFilters.name = { - filterVal: 'itme name 3', - filterType: FILTER_TYPE.TEXT, - comparator: EQ - }; - - const result = filterFn(currFilters); - expect(result).toBeDefined(); - expect(result).toHaveLength(1); - }); - }); - - describe('column.filterValue is defined', () => { - beforeEach(() => { - columns[1].filterValue = sinon.stub(); - filterFn = filters(store, columns, _); - }); - - it('should calling custom filterValue callback correctly', () => { - currFilters.name = { - filterVal: '3', - filterType: FILTER_TYPE.TEXT - }; - - const result = filterFn(currFilters); - expect(result).toBeDefined(); - expect(columns[1].filterValue.callCount).toBe(data.length); - const calls = columns[1].filterValue.getCalls(); - calls.forEach((call, i) => { - expect(call.calledWith(data[i].name, data[i])).toBeTruthy(); - }); - }); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-filter/test/wrapper.test.js b/packages/react-bootstrap-table2-filter/test/wrapper.test.js deleted file mode 100644 index 9541c8d..0000000 --- a/packages/react-bootstrap-table2-filter/test/wrapper.test.js +++ /dev/null @@ -1,213 +0,0 @@ -import React from 'react'; -import sinon from 'sinon'; -import { shallow } from 'enzyme'; - -import _ from 'react-bootstrap-table2/src/utils'; -import BootstrapTable from 'react-bootstrap-table2/src/bootstrap-table'; -import Store from 'react-bootstrap-table2/src/store'; -import filter, { textFilter } from '../src'; -import FilterWrapper from '../src/wrapper'; -import { FILTER_TYPE } from '../src/const'; - -const data = []; -for (let i = 0; i < 20; i += 1) { - data.push({ - id: i, - name: `itme name ${i}`, - price: 200 + i - }); -} - -describe('Wrapper', () => { - let wrapper; - let instance; - const onRemoteFilterChangeCB = sinon.stub(); - - afterEach(() => { - onRemoteFilterChangeCB.reset(); - }); - - const createTableProps = () => { - const tableProps = { - keyField: 'id', - columns: [{ - dataField: 'id', - text: 'ID' - }, { - dataField: 'name', - text: 'Name', - filter: textFilter() - }, { - dataField: 'price', - text: 'Price', - filter: textFilter() - }], - data, - filter: filter(), - _, - store: new Store('id'), - onRemoteFilterChange: onRemoteFilterChangeCB - }; - tableProps.store.data = data; - return tableProps; - }; - - const pureTable = props => (); - - const createFilterWrapper = (props, renderFragment = true) => { - wrapper = shallow(); - instance = wrapper.instance(); - if (renderFragment) { - const fragment = instance.render(); - wrapper = shallow(
{ fragment }
); - } - }; - - describe('default filter wrapper', () => { - const props = createTableProps(); - - beforeEach(() => { - createFilterWrapper(props); - }); - - it('should rendering correctly', () => { - expect(wrapper.length).toBe(1); - }); - - it('should initializing state correctly', () => { - expect(instance.state.isDataChanged).toBeFalsy(); - expect(instance.state.currFilters).toEqual({}); - }); - - it('should rendering BootstraTable correctly', () => { - const table = wrapper.find(BootstrapTable); - expect(table.length).toBe(1); - expect(table.prop('onFilter')).toBeDefined(); - expect(table.prop('isDataChanged')).toEqual(instance.state.isDataChanged); - }); - }); - - describe('componentWillReceiveProps', () => { - let nextProps; - - describe('when props.store.filters is same as current state.currFilters', () => { - beforeEach(() => { - nextProps = createTableProps(); - instance.componentWillReceiveProps(nextProps); - }); - - it('should setting isDataChanged as false (Temporary solution)', () => { - expect(instance.state.isDataChanged).toBeFalsy(); - }); - }); - - describe('when props.store.filters is different from current state.currFilters', () => { - beforeEach(() => { - nextProps = createTableProps(); - nextProps.store.filters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } }; - instance.componentWillReceiveProps(nextProps); - }); - - it('should setting states correctly', () => { - expect(instance.state.isDataChanged).toBeTruthy(); - expect(instance.state.currFilters).toBe(nextProps.store.filters); - }); - }); - }); - - describe('onFilter', () => { - let props; - - beforeEach(() => { - props = createTableProps(); - createFilterWrapper(props); - }); - - describe('when filterVal is empty or undefined', () => { - const filterVals = ['', undefined]; - - it('should setting store object correctly', () => { - filterVals.forEach((filterVal) => { - instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT); - expect(props.store.filtering).toBeFalsy(); - }); - }); - - it('should setting state correctly', () => { - filterVals.forEach((filterVal) => { - instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT); - expect(instance.state.isDataChanged).toBeTruthy(); - expect(Object.keys(instance.state.currFilters)).toHaveLength(0); - }); - }); - }); - - describe('when filterVal is existing', () => { - const filterVal = '3'; - - it('should setting store object correctly', () => { - instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT); - expect(props.store.filters).toEqual(instance.state.currFilters); - }); - - it('should setting state correctly', () => { - instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT); - expect(instance.state.isDataChanged).toBeTruthy(); - expect(Object.keys(instance.state.currFilters)).toHaveLength(1); - }); - }); - - describe('when remote filter is enabled', () => { - const filterVal = '3'; - - beforeEach(() => { - props = createTableProps(); - props.remote = { filter: true }; - createFilterWrapper(props); - instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT); - }); - - it('should not setting store object correctly', () => { - expect(props.store.filters).not.toEqual(instance.state.currFilters); - }); - - it('should not setting state', () => { - expect(instance.state.isDataChanged).toBeFalsy(); - expect(Object.keys(instance.state.currFilters)).toHaveLength(0); - }); - - it('should calling props.onRemoteFilterChange correctly', () => { - expect(onRemoteFilterChangeCB.calledOnce).toBeTruthy(); - }); - }); - - describe('combination', () => { - it('should setting store object correctly', () => { - instance.onFilter(props.columns[1], '3', FILTER_TYPE.TEXT); - expect(props.store.filters).toEqual(instance.state.currFilters); - expect(instance.state.isDataChanged).toBeTruthy(); - expect(Object.keys(instance.state.currFilters)).toHaveLength(1); - - instance.onFilter(props.columns[1], '2', FILTER_TYPE.TEXT); - expect(props.store.filters).toEqual(instance.state.currFilters); - expect(instance.state.isDataChanged).toBeTruthy(); - expect(Object.keys(instance.state.currFilters)).toHaveLength(1); - - instance.onFilter(props.columns[2], '2', FILTER_TYPE.TEXT); - expect(props.store.filters).toEqual(instance.state.currFilters); - expect(instance.state.isDataChanged).toBeTruthy(); - expect(Object.keys(instance.state.currFilters)).toHaveLength(2); - - instance.onFilter(props.columns[2], '', FILTER_TYPE.TEXT); - expect(props.store.filters).toEqual(instance.state.currFilters); - expect(instance.state.isDataChanged).toBeTruthy(); - expect(Object.keys(instance.state.currFilters)).toHaveLength(1); - - instance.onFilter(props.columns[1], '', FILTER_TYPE.TEXT); - expect(props.store.filters).toEqual(instance.state.currFilters); - expect(instance.state.isDataChanged).toBeTruthy(); - expect(Object.keys(instance.state.currFilters)).toHaveLength(0); - }); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-overlay/package.json b/packages/react-bootstrap-table2-overlay/package.json deleted file mode 100644 index d1cd573..0000000 --- a/packages/react-bootstrap-table2-overlay/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "react-bootstrap-table2-overlay", - "version": "0.0.1", - "description": "it's a loading overlay component for react-bootstrap-table2", - "main": "src/index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "ISC", - "dependencies": { - "react-loading-overlay": "0.2.8" - } -} diff --git a/packages/react-bootstrap-table2-overlay/src/index.js b/packages/react-bootstrap-table2-overlay/src/index.js deleted file mode 100644 index a5db872..0000000 --- a/packages/react-bootstrap-table2-overlay/src/index.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint no-return-assign: 0 */ -import React from 'react'; -import LoadingOverlay from 'react-loading-overlay'; - -export default options => (element, loading) => - class TableLoadingOverlayWrapper extends React.Component { - componentDidMount() { - if (loading) { - const { wrapper } = this.overlay; - const masker = wrapper.firstChild; - const headerDOM = wrapper.parentElement.querySelector('thead'); - const bodyDOM = wrapper.parentElement.querySelector('tbody'); - masker.style.marginTop = window.getComputedStyle(headerDOM).height; - masker.style.height = window.getComputedStyle(bodyDOM).height; - } - } - - render() { - return ( - this.overlay = n } - { ...options } - active={ loading } - > - { element } - - ); - } - }; diff --git a/packages/react-bootstrap-table2-overlay/test/index.test.js b/packages/react-bootstrap-table2-overlay/test/index.test.js deleted file mode 100644 index a8fdacb..0000000 --- a/packages/react-bootstrap-table2-overlay/test/index.test.js +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react'; -import { shallow, render } from 'enzyme'; -import LoadingOverlay from 'react-loading-overlay'; - -import overlayFactory from '../src'; - -describe('overlayFactory', () => { - let wrapper; - // let instance; - - const createTable = () => ( -
- - - - - - - - { [1, 2].map(row => ( - - ))} - -
column1column2
{ row }test
- ); - - describe('when loading is false', () => { - beforeEach(() => { - const tableElm = createTable(); - const Overlay = overlayFactory()(tableElm, false); - wrapper = shallow(); - }); - - it('should rendering Overlay component correctly', () => { - const overlay = wrapper.find(LoadingOverlay); - expect(wrapper.length).toBe(1); - expect(overlay.length).toBe(1); - expect(overlay.prop('active')).toBeFalsy(); - }); - }); - - describe('when loading is true', () => { - beforeEach(() => { - const tableElm = createTable(); - const Overlay = overlayFactory()(tableElm, true); - wrapper = render(); - }); - - it('should rendering Overlay component correctly', () => { - const overlay = wrapper.find(LoadingOverlay); - expect(wrapper.length).toBe(1); - expect(overlay.length).toBe(0); - }); - }); - - describe('when options is given', () => { - const options = { - spinner: true, - background: 'red' - }; - beforeEach(() => { - const tableElm = createTable(); - const Overlay = overlayFactory(options)(tableElm, false); - wrapper = shallow(); - }); - - it('should rendering Overlay component with options correctly', () => { - const overlay = wrapper.find(LoadingOverlay); - expect(wrapper.length).toBe(1); - expect(overlay.length).toBe(1); - expect(overlay.prop('active')).toBeFalsy(); - Object.keys(options).forEach((key) => { - expect(overlay.prop(key)).toEqual(options[key]); - }); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-overlay/yarn.lock b/packages/react-bootstrap-table2-overlay/yarn.lock deleted file mode 100644 index f40152b..0000000 --- a/packages/react-bootstrap-table2-overlay/yarn.lock +++ /dev/null @@ -1,200 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - -asap@~2.0.3: - version "2.0.6" - resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" - -base64-js@^1.0.2: - version "1.2.1" - resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886" - -buffer@^5.0.3: - version "5.0.8" - resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24" - dependencies: - base64-js "^1.0.2" - ieee754 "^1.1.4" - -chain-function@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc" - -core-js@^1.0.0: - version "1.2.7" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" - -css-color-keywords@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" - -css-to-react-native@^2.0.3: - version "2.0.4" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b" - dependencies: - css-color-keywords "^1.0.0" - fbjs "^0.8.5" - postcss-value-parser "^3.3.0" - -dom-helpers@^3.2.0: - version "3.2.1" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a" - -encoding@^0.1.11: - version "0.1.12" - resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" - dependencies: - iconv-lite "~0.4.13" - -fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9: - version "0.8.16" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" - dependencies: - core-js "^1.0.0" - isomorphic-fetch "^2.1.1" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.9" - -has-flag@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa" - -hoist-non-react-statics@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" - -iconv-lite@~0.4.13: - version "0.4.19" - resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b" - -ieee754@^1.1.4: - version "1.1.8" - resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4" - -is-function@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5" - -is-plain-object@^2.0.1: - version "2.0.4" - resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" - dependencies: - isobject "^3.0.1" - -is-stream@^1.0.1: - version "1.1.0" - resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" - -isobject@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" - -isomorphic-fetch@^2.1.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" - dependencies: - node-fetch "^1.0.1" - whatwg-fetch ">=0.10.0" - -js-tokens@^3.0.0: - version "3.0.2" - resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" - -loose-envify@^1.0.0, loose-envify@^1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" - dependencies: - js-tokens "^3.0.0" - -node-fetch@^1.0.1: - version "1.7.3" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" - dependencies: - encoding "^0.1.11" - is-stream "^1.0.1" - -object-assign@^4.1.0, object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - -postcss-value-parser@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15" - -promise@^7.1.1: - version "7.3.1" - resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" - dependencies: - asap "~2.0.3" - -prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6: - version "15.6.0" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" - dependencies: - fbjs "^0.8.16" - loose-envify "^1.3.1" - object-assign "^4.1.1" - -react-loading-overlay@0.2.8: - version "0.2.8" - resolved "https://registry.yarnpkg.com/react-loading-overlay/-/react-loading-overlay-0.2.8.tgz#c1c5531c9cfa4be6caca6b9aa0c1eb19e22b03fe" - dependencies: - prop-types "^15.5.10" - react-transition-group "^1.2.1" - styled-components "^2.1.2" - -react-transition-group@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6" - dependencies: - chain-function "^1.0.0" - dom-helpers "^3.2.0" - loose-envify "^1.3.1" - prop-types "^15.5.6" - warning "^3.0.0" - -setimmediate@^1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" - -styled-components@^2.1.2: - version "2.2.4" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.4.tgz#dd87fd3dafd359e7a0d570aec1bd07d691c0b5a2" - dependencies: - buffer "^5.0.3" - css-to-react-native "^2.0.3" - fbjs "^0.8.9" - hoist-non-react-statics "^1.2.0" - is-function "^1.0.1" - is-plain-object "^2.0.1" - prop-types "^15.5.4" - stylis "^3.4.0" - supports-color "^3.2.3" - -stylis@^3.4.0: - version "3.4.5" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e" - -supports-color@^3.2.3: - version "3.2.3" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6" - dependencies: - has-flag "^1.0.0" - -ua-parser-js@^0.7.9: - version "0.7.17" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac" - -warning@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" - dependencies: - loose-envify "^1.0.0" - -whatwg-fetch@>=0.10.0: - version "2.0.3" - resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json deleted file mode 100644 index bb30b4b..0000000 --- a/packages/react-bootstrap-table2-paginator/package.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "react-bootstrap-table2-paginator", - "version": "0.0.1", - "description": "it's the pagination addon for react-bootstrap-table2", - "main": "src/index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "ISC" -} diff --git a/packages/react-bootstrap-table2-paginator/src/const.js b/packages/react-bootstrap-table2-paginator/src/const.js deleted file mode 100644 index eaa1bac..0000000 --- a/packages/react-bootstrap-table2-paginator/src/const.js +++ /dev/null @@ -1,17 +0,0 @@ -export default { - PAGINATION_SIZE: 5, - PAGE_START_INDEX: 1, - With_FIRST_AND_LAST: true, - SHOW_ALL_PAGE_BTNS: false, - FIRST_PAGE_TEXT: '<<', - PRE_PAGE_TEXT: '<', - NEXT_PAGE_TEXT: '>', - LAST_PAGE_TEXT: '>>', - NEXT_PAGE_TITLE: 'next page', - LAST_PAGE_TITLE: 'last page', - PRE_PAGE_TITLE: 'previous page', - FIRST_PAGE_TITLE: 'first page', - SIZE_PER_PAGE_LIST: [10, 25, 30, 50], - HIDE_SIZE_PER_PAGE: false, - HIDE_PAGE_LIST_ONLY_ONE_PAGE: false -}; diff --git a/packages/react-bootstrap-table2-paginator/src/index.js b/packages/react-bootstrap-table2-paginator/src/index.js deleted file mode 100644 index 375f1fa..0000000 --- a/packages/react-bootstrap-table2-paginator/src/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import PaginationWrapper from './wrapper'; - -export default (options = {}) => ({ - PaginationWrapper, - options -}); diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js deleted file mode 100644 index 272fa19..0000000 --- a/packages/react-bootstrap-table2-paginator/src/page-button.js +++ /dev/null @@ -1,47 +0,0 @@ -/* eslint react/require-default-props: 0 */ -/* eslint jsx-a11y/href-no-hash: 0 */ -import cs from 'classnames'; -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; - -class PageButton extends Component { - constructor(props) { - super(props); - this.handleClick = this.handleClick.bind(this); - } - - handleClick(e) { - e.preventDefault(); - this.props.onPageChange(this.props.page); - } - - render() { - const { - page, - title, - active, - disabled - } = this.props; - const classes = cs({ - active, - disabled, - 'page-item': true - }); - - return ( -
  • - { page } -
    • - ); - } -} - -PageButton.propTypes = { - onPageChange: PropTypes.func.isRequired, - page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - active: PropTypes.bool.isRequired, - disabled: PropTypes.bool.isRequired, - title: PropTypes.string -}; - -export default PageButton; diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js deleted file mode 100644 index 931595f..0000000 --- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js +++ /dev/null @@ -1,133 +0,0 @@ -/* eslint no-mixed-operators: 0 */ -export default ExtendBase => - class PageResolver extends ExtendBase { - backToPrevPage() { - const { currPage, pageStartIndex } = this.props; - return (currPage - 1) < pageStartIndex ? pageStartIndex : currPage - 1; - } - - goToNextPage() { - const { currPage } = this.props; - const { lastPage } = this.state; - return (currPage + 1) > lastPage ? lastPage : currPage + 1; - } - - initialState() { - const totalPages = this.calculateTotalPage(); - const lastPage = this.calculateLastPage(totalPages); - return { totalPages, lastPage, dropdownOpen: false }; - } - - calculateTotalPage(sizePerPage = this.props.currSizePerPage, dataSize = this.props.dataSize) { - return Math.ceil(dataSize / sizePerPage); - } - - calculateLastPage(totalPages) { - const { pageStartIndex } = this.props; - return pageStartIndex + totalPages - 1; - } - - calculatePages( - totalPages = this.state.totalPages, - lastPage = this.state.lastPage) { - const { - currPage, - paginationSize, - pageStartIndex, - withFirstAndLast, - firstPageText, - prePageText, - nextPageText, - lastPageText, - alwaysShowAllBtns - } = this.props; - - let pages; - let endPage = totalPages; - if (endPage <= 0) return []; - - let startPage = Math.max(currPage - Math.floor(paginationSize / 2), pageStartIndex); - endPage = startPage + paginationSize - 1; - - if (endPage > lastPage) { - endPage = lastPage; - startPage = endPage - paginationSize + 1; - } - - if (startPage !== pageStartIndex && totalPages > paginationSize && withFirstAndLast) { - pages = [firstPageText, prePageText]; - } else if (totalPages > 1 || alwaysShowAllBtns) { - pages = [prePageText]; - } else { - pages = []; - } - - for (let i = startPage; i <= endPage; i += 1) { - if (i >= pageStartIndex) pages.push(i); - } - - if (endPage <= lastPage && pages.length > 1) { - pages.push(nextPageText); - } - if (endPage !== lastPage && withFirstAndLast) { - pages.push(lastPageText); - } - return pages; - } - - calculatePageStatus(pages = [], lastPage = this.state.lastPage) { - const { - currPage, - pageStartIndex, - firstPageText, - prePageText, - nextPageText, - lastPageText, - alwaysShowAllBtns - } = this.props; - const isStart = page => - (currPage === pageStartIndex && (page === firstPageText || page === prePageText)); - const isEnd = page => - (currPage === lastPage && (page === nextPageText || page === lastPageText)); - - return pages - .filter((page) => { - if (alwaysShowAllBtns) { - return true; - } - return !(isStart(page) || isEnd(page)); - }) - .map((page) => { - let title; - const active = page === currPage; - const disabled = (isStart(page) || isEnd(page)); - - if (page === nextPageText) { - title = this.props.nextPageTitle; - } else if (page === prePageText) { - title = this.props.prePageTitle; - } else if (page === firstPageText) { - title = this.props.firstPageTitle; - } else if (page === lastPageText) { - title = this.props.lastPageTitle; - } else { - title = `${page}`; - } - - return { page, active, disabled, title }; - }); - } - - calculateSizePerPageStatus() { - const { sizePerPageList } = this.props; - return sizePerPageList.map((_sizePerPage) => { - const pageText = _sizePerPage.text || _sizePerPage; - const pageNumber = _sizePerPage.value || _sizePerPage; - return { - text: `${pageText}`, - page: pageNumber - }; - }); - } - }; - diff --git a/packages/react-bootstrap-table2-paginator/src/page.js b/packages/react-bootstrap-table2-paginator/src/page.js deleted file mode 100644 index 1ea54e5..0000000 --- a/packages/react-bootstrap-table2-paginator/src/page.js +++ /dev/null @@ -1,17 +0,0 @@ -export const getByCurrPage = store => (page, sizePerPage, pageStartIndex) => { - const dataSize = store.data.length; - if (!dataSize) return []; - const getNormalizedPage = () => { - const offset = Math.abs(1 - pageStartIndex); - return page + offset; - }; - const end = (getNormalizedPage() * sizePerPage) - 1; - const start = end - (sizePerPage - 1); - - const result = []; - for (let i = start; i <= end; i += 1) { - result.push(store.data[i]); - if (i + 1 === dataSize) break; - } - return result; -}; diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list.js b/packages/react-bootstrap-table2-paginator/src/pagination-list.js deleted file mode 100644 index 805af53..0000000 --- a/packages/react-bootstrap-table2-paginator/src/pagination-list.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import PageButton from './page-button'; - -const PaginatonList = props => ( -
      - { - props.pages.map(pageProps => ( - - )) - } -
    -); - -PaginatonList.propTypes = { - pages: PropTypes.arrayOf(PropTypes.shape({ - page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - active: PropTypes.bool, - disable: PropTypes.bool, - title: PropTypes.string - })).isRequired, - onPageChange: PropTypes.func.isRequired -}; - -export default PaginatonList; diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js deleted file mode 100644 index d103e4b..0000000 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ /dev/null @@ -1,170 +0,0 @@ -/* eslint react/require-default-props: 0 */ -/* eslint arrow-body-style: 0 */ -import cs from 'classnames'; -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import pageResolver from './page-resolver'; -import SizePerPageDropDown from './size-per-page-dropdown'; -import PaginationList from './pagination-list'; -import Const from './const'; - -class Pagination extends pageResolver(Component) { - constructor(props) { - super(props); - this.closeDropDown = this.closeDropDown.bind(this); - this.toggleDropDown = this.toggleDropDown.bind(this); - this.handleChangePage = this.handleChangePage.bind(this); - this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this); - this.state = this.initialState(); - } - - componentWillReceiveProps(nextProps) { - const { dataSize, currSizePerPage } = nextProps; - if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) { - const totalPages = this.calculateTotalPage(currSizePerPage, dataSize); - const lastPage = this.calculateLastPage(totalPages); - this.setState({ totalPages, lastPage }); - } - } - - toggleDropDown() { - const dropdownOpen = !this.state.dropdownOpen; - this.setState(() => { - return { dropdownOpen }; - }); - } - - closeDropDown() { - this.setState(() => { - return { dropdownOpen: false }; - }); - } - - handleChangeSizePerPage(sizePerPage) { - const { currSizePerPage, onSizePerPageChange } = this.props; - const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage; - let { currPage } = this.props; - if (selectedSize !== currSizePerPage) { - const newTotalPages = this.calculateTotalPage(selectedSize); - const newLastPage = this.calculateLastPage(newTotalPages); - if (currPage > newLastPage) currPage = newLastPage; - onSizePerPageChange(selectedSize, currPage); - } - this.closeDropDown(); - } - - handleChangePage(newPage) { - let page; - const { - currPage, - pageStartIndex, - prePageText, - nextPageText, - lastPageText, - firstPageText, - onPageChange - // keepSizePerPageState - } = this.props; - const { lastPage } = this.state; - - if (newPage === prePageText) { - page = this.backToPrevPage(); - } else if (newPage === nextPageText) { - page = (currPage + 1) > lastPage ? lastPage : currPage + 1; - } else if (newPage === lastPageText) { - page = lastPage; - } else if (newPage === firstPageText) { - page = pageStartIndex; - } else { - page = parseInt(newPage, 10); - } - - // if (keepSizePerPageState) { this.closeDropDown(); } - - if (page !== currPage) { - onPageChange(page); - } - } - - render() { - const { totalPages, lastPage, dropdownOpen: open } = this.state; - const { - sizePerPageList, - currSizePerPage, - hideSizePerPage, - hidePageListOnlyOnePage - } = this.props; - const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage); - - const pageListClass = cs( - 'react-bootstrap-table-pagination-list', - 'col-md-6 col-xs-6 col-sm-6 col-lg-6', { - 'react-bootstrap-table-pagination-list-hidden': (hidePageListOnlyOnePage && totalPages === 1) - }); - return ( -
    -
    - { - sizePerPageList.length > 1 && !hideSizePerPage ? - ( - - ) : null - } -
    -
    - -
    -
    - ); - } -} - -Pagination.propTypes = { - dataSize: PropTypes.number.isRequired, - sizePerPageList: PropTypes.array.isRequired, - currPage: PropTypes.number.isRequired, - currSizePerPage: PropTypes.number.isRequired, - onPageChange: PropTypes.func.isRequired, - onSizePerPageChange: PropTypes.func.isRequired, - pageStartIndex: PropTypes.number, - paginationSize: PropTypes.number, - firstPageText: PropTypes.string, - prePageText: PropTypes.string, - nextPageText: PropTypes.string, - lastPageText: PropTypes.string, - nextPageTitle: PropTypes.string, - prePageTitle: PropTypes.string, - firstPageTitle: PropTypes.string, - lastPageTitle: PropTypes.string, - withFirstAndLast: PropTypes.bool, - alwaysShowAllBtns: PropTypes.bool, - hideSizePerPage: PropTypes.bool, - hidePageListOnlyOnePage: PropTypes.bool -}; - -Pagination.defaultProps = { - pageStartIndex: Const.PAGE_START_INDEX, - paginationSize: Const.PAGINATION_SIZE, - withFirstAndLast: Const.With_FIRST_AND_LAST, - alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS, - firstPageText: Const.FIRST_PAGE_TEXT, - prePageText: Const.PRE_PAGE_TEXT, - nextPageText: Const.NEXT_PAGE_TEXT, - lastPageText: Const.LAST_PAGE_TEXT, - sizePerPageList: Const.SIZE_PER_PAGE_LIST, - nextPageTitle: Const.NEXT_PAGE_TITLE, - prePageTitle: Const.PRE_PAGE_TITLE, - firstPageTitle: Const.FIRST_PAGE_TITLE, - lastPageTitle: Const.LAST_PAGE_TITLE, - hideSizePerPage: Const.HIDE_SIZE_PER_PAGE, - hidePageListOnlyOnePage: Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE -}; - -export default Pagination; diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js deleted file mode 100644 index 5ae4298..0000000 --- a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import cs from 'classnames'; -import PropTypes from 'prop-types'; -import SizePerPageOption from './size-per-page-option'; - -const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown'; - -const SizePerPageDropDown = (props) => { - const { - open, - hidden, - onClick, - onBlur, - options, - className, - variation, - btnContextual, - currSizePerPage, - onSizePerPageChange - } = props; - - const dropDownStyle = { visibility: hidden ? 'hidden' : 'visible' }; - const dropdownClasses = cs( - open ? 'open show' : '', - sizePerPageDefaultClass, - variation, - className, - ); - - return ( - - -
      - { - options.map(option => ( - - )) - } -
    -     - ); -}; - -SizePerPageDropDown.propTypes = { - currSizePerPage: PropTypes.string.isRequired, - options: PropTypes.array.isRequired, - onClick: PropTypes.func.isRequired, - onBlur: PropTypes.func.isRequired, - onSizePerPageChange: PropTypes.func.isRequired, - open: PropTypes.bool, - hidden: PropTypes.bool, - btnContextual: PropTypes.string, - variation: PropTypes.oneOf(['dropdown', 'dropup']), - className: PropTypes.string -}; -SizePerPageDropDown.defaultProps = { - open: false, - hidden: false, - btnContextual: 'btn-default btn-secondary', - variation: 'dropdown', - className: '' -}; - - -export default SizePerPageDropDown; diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js deleted file mode 100644 index eba6ca6..0000000 --- a/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js +++ /dev/null @@ -1,32 +0,0 @@ -/* eslint jsx-a11y/href-no-hash: 0 */ -import React from 'react'; -import PropTypes from 'prop-types'; - -const SizePerPageOption = ({ - text, - page, - onSizePerPageChange -}) => ( -
  • - { - e.preventDefault(); - onSizePerPageChange(page); - } } - > - { text } - -
    • -); - -SizePerPageOption.propTypes = { - text: PropTypes.string.isRequired, - page: PropTypes.number.isRequired, - onSizePerPageChange: PropTypes.func.isRequired -}; - -export default SizePerPageOption; diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js deleted file mode 100644 index e01cd51..0000000 --- a/packages/react-bootstrap-table2-paginator/src/wrapper.js +++ /dev/null @@ -1,179 +0,0 @@ -/* eslint react/prop-types: 0 */ -/* eslint arrow-body-style: 0 */ - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; - -import Const from './const'; -import Pagination from './pagination'; -import { getByCurrPage } from './page'; - -class PaginationWrapper extends Component { - static propTypes = { - store: PropTypes.object.isRequired, - baseElement: PropTypes.func.isRequired, - onRemotePageChange: PropTypes.func.isRequired - } - - constructor(props) { - super(props); - this.handleChangePage = this.handleChangePage.bind(this); - this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this); - - let currPage; - let currSizePerPage; - const { options } = props.pagination; - const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST; - - // initialize current page - if (typeof options.page !== 'undefined') { - currPage = options.page; - } else if (typeof options.pageStartIndex !== 'undefined') { - currPage = options.pageStartIndex; - } else { - currPage = Const.PAGE_START_INDEX; - } - - // initialize current sizePerPage - if (typeof options.sizePerPage !== 'undefined') { - currSizePerPage = options.sizePerPage; - } else if (typeof sizePerPageList[0] === 'object') { - currSizePerPage = sizePerPageList[0].value; - } else { - currSizePerPage = sizePerPageList[0]; - } - - this.state = { currPage, currSizePerPage }; - this.saveToStore(currPage, currSizePerPage); - } - - componentWillReceiveProps(nextProps) { - let needNewState = false; - let { currPage, currSizePerPage } = this.state; - const { page, sizePerPage, pageStartIndex, onPageChange } = nextProps.pagination.options; - - if (typeof page !== 'undefined' && currPage !== page) { // user defined page - currPage = page; - needNewState = true; - } else if (nextProps.isDataChanged) { // user didn't defined page but data change - currPage = typeof pageStartIndex !== 'undefined' ? pageStartIndex : Const.PAGE_START_INDEX; - needNewState = true; - } - - if (typeof sizePerPage !== 'undefined') { - currSizePerPage = sizePerPage; - needNewState = true; - } - - this.saveToStore(currPage, currSizePerPage); - - if (needNewState) { - if (onPageChange) { - onPageChange(currPage, currSizePerPage); - } - this.setState(() => ({ currPage, currSizePerPage })); - } - } - - saveToStore(page, sizePerPage) { - this.props.store.page = page; - this.props.store.sizePerPage = sizePerPage; - } - - isRemote() { - const { remote } = this.props; - return remote === true || (typeof remote === 'object' && remote.pagination); - } - - handleChangePage(currPage) { - const { currSizePerPage } = this.state; - const { pagination: { options }, onRemotePageChange } = this.props; - this.saveToStore(currPage, currSizePerPage); - - if (options.onPageChange) { - options.onPageChange(currPage, currSizePerPage); - } - if (this.isRemote()) { - onRemotePageChange(); - return; - } - this.setState(() => { - return { - currPage - }; - }); - } - - handleChangeSizePerPage(currSizePerPage, currPage) { - const { pagination: { options }, onRemotePageChange } = this.props; - this.saveToStore(currPage, currSizePerPage); - - if (options.onSizePerPageChange) { - options.onSizePerPageChange(currSizePerPage, currPage); - } - if (this.isRemote()) { - onRemotePageChange(); - return; - } - this.setState(() => { - return { - currPage, - currSizePerPage - }; - }); - } - - render() { - const { pagination: { options }, store, baseElement } = this.props; - const { currPage, currSizePerPage } = this.state; - const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ? - Const.With_FIRST_AND_LAST : options.withFirstAndLast; - const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ? - Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns; - const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ? - Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage; - const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ? - Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage; - const pageStartIndex = typeof options.pageStartIndex === 'undefined' ? - Const.PAGE_START_INDEX : options.pageStartIndex; - - const data = this.isRemote() ? - this.props.data : - getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex); - - const base = baseElement({ - ...this.props, - key: 'table', - data - }); - - return [ - base, - - ]; - } -} - -export default PaginationWrapper; diff --git a/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table-paginator.scss b/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table-paginator.scss deleted file mode 100644 index a99007e..0000000 --- a/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table-paginator.scss +++ /dev/null @@ -1,8 +0,0 @@ -.react-bootstrap-table-page-btns-ul { - float: right; - margin-top: 0px; -} - -.react-bootstrap-table-pagination-list-hidden { - display: none; -} diff --git a/packages/react-bootstrap-table2-paginator/test/page-button.test.js b/packages/react-bootstrap-table2-paginator/test/page-button.test.js deleted file mode 100644 index 4e3d800..0000000 --- a/packages/react-bootstrap-table2-paginator/test/page-button.test.js +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react'; -import sinon from 'sinon'; -import { shallow } from 'enzyme'; - -import PageButton from '../src/page-button'; - -describe('PageButton', () => { - let wrapper; - const onPageChangeCallback = sinon.stub(); - const props = { - onPageChange: onPageChangeCallback, - page: 2 - }; - - describe('default PageButton', () => { - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should rendering PageButton correctly', () => { - expect(wrapper.find('a.page-link').length).toBe(1); - expect(wrapper.text()).toEqual(`${props.page}`); - }); - - describe('when clicking', () => { - let preventDefault; - beforeEach(() => { - preventDefault = sinon.stub(); - wrapper.find('a.page-link').simulate('click', { preventDefault }); - }); - - afterEach(() => { - onPageChangeCallback.reset(); - }); - - it('should calling e.preventDefault', () => { - expect(preventDefault.calledOnce).toBeTruthy(); - }); - - it('should calling onPageChange prop', () => { - expect(onPageChangeCallback.calledOnce).toBeTruthy(); - }); - - it('should calling onPageChange prop with correct argument', () => { - expect(onPageChangeCallback.calledWith(props.page)).toBeTruthy(); - }); - }); - }); - - describe('when active prop is true', () => { - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should render PageButton correctly', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.hasClass('active')).toBeTruthy(); - }); - }); - - describe('when active prop is false', () => { - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should render PageButton correctly', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.hasClass('active')).toBeFalsy(); - }); - }); - - describe('when disabled prop is true', () => { - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should render PageButton correctly', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.hasClass('disabled')).toBeTruthy(); - }); - }); - - describe('when disabled prop is false', () => { - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should render PageButton correctly', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.hasClass('disabled')).toBeFalsy(); - }); - }); - - describe('when title prop is defined', () => { - const title = 'aTitle'; - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should render PageButton correctly', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.prop('title')).toEqual(title); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js b/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js deleted file mode 100644 index cb5d5cf..0000000 --- a/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js +++ /dev/null @@ -1,416 +0,0 @@ -import React, { Component } from 'react'; -import { shallow } from 'enzyme'; - -import pageResolver from '../src/page-resolver'; - -const extendTo = Base => - class MockComponent extends Base { - constructor(props) { - super(props); - this.state = this.initialState(); - } - render() { return null; } - }; - -describe('PageResolver', () => { - const ExtendBase = pageResolver(Component); - const MockComponent = extendTo(ExtendBase); - - const createMockProps = () => ({ - dataSize: 100, - sizePerPageList: [10, 20, 30, 50], - currPage: 1, - currSizePerPage: 10, - pageStartIndex: 1, - paginationSize: 5, - withFirstAndLast: true, - firstPageText: '<<', - prePageText: '<', - nextPageText: '>', - lastPageText: '>>', - alwaysShowAllBtns: false - }); - - let wrapper; - - describe('initialize', () => { - beforeEach(() => { - const mockElement = React.createElement(MockComponent, createMockProps(), null); - wrapper = shallow(mockElement); - }); - - it('should creating initial state correctly', () => { - const instance = wrapper.instance(); - expect(instance.state.totalPages).toBeDefined(); - expect(instance.state.totalPages).toEqual(instance.calculateTotalPage()); - expect(instance.state.lastPage).toBeDefined(); - expect(instance.state.lastPage).toEqual( - instance.calculateLastPage(instance.state.totalPages)); - expect(instance.state.dropdownOpen).toBeDefined(); - expect(instance.state.dropdownOpen).toBeFalsy(); - }); - }); - - describe('backToPrevPage', () => { - const props = createMockProps(); - - describe('when props.currPage is not hitting props.pageStartIndex', () => { - beforeEach(() => { - props.currPage = 2; - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting previous page correctly', () => { - const instance = wrapper.instance(); - expect(instance.backToPrevPage()).toEqual(props.currPage - 1); - }); - }); - - describe('when props.currPage is hitting props.pageStartIndex', () => { - beforeEach(() => { - props.currPage = props.pageStartIndex; - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should always getting page which must eq props.pageStartIndex', () => { - const instance = wrapper.instance(); - expect(instance.backToPrevPage()).toEqual(props.pageStartIndex); - }); - }); - }); - - describe('goToNextPage', () => { - const props = createMockProps(); - - describe('when props.currPage is not hitting state.lastPage', () => { - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting previous page correctly', () => { - const instance = wrapper.instance(); - expect(instance.goToNextPage()).toEqual(props.currPage + 1); - }); - }); - - describe('when props.currPage is hitting state.lastpage', () => { - beforeEach(() => { - props.currPage = 10; - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should always getting page which must eq props.pageStartIndex', () => { - const instance = wrapper.instance(); - expect(instance.goToNextPage()).toEqual(instance.state.lastPage); - }); - }); - }); - - describe('calculateTotalPage', () => { - const props = createMockProps(); - - describe('when missing sizePerPage argument', () => { - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting total pages correctly by default props.currSizePerPage', () => { - const instance = wrapper.instance(); - expect(instance.calculateTotalPage()).toEqual(10); - }); - }); - - describe('when sizePerPage argument given', () => { - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting total pages correctly by sizePerPage argument', () => { - const instance = wrapper.instance(); - expect(instance.calculateTotalPage(25)).toEqual(4); - }); - }); - }); - - describe('calculateLastPage', () => { - beforeEach(() => { - const props = createMockProps(); - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting last page correctly', () => { - const instance = wrapper.instance(); - expect(instance.calculateLastPage(instance.state.totalPages)).toEqual(10); - }); - }); - - describe('calculatePages', () => { - describe('calculate by state.totalPages and state.lastPage', () => { - const props = createMockProps(); - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting pages list correctly', () => { - const instance = wrapper.instance(); - expect(instance.calculatePages()).toEqual( - [props.prePageText, 1, 2, 3, 4, 5, props.nextPageText, props.lastPageText]); - - expect(instance.calculatePages(4, 4)).toEqual( - [props.prePageText, 1, 2, 3, 4, props.nextPageText]); - }); - }); - - describe('calculate by props.currPage', () => { - const props = createMockProps(); - const { firstPageText, prePageText, nextPageText, lastPageText } = props; - - it('should getting pages list correctly', () => { - const currPages = Array.from(Array(10).keys()); - currPages.forEach((currPage) => { - props.currPage = currPage + 1; - wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); - - if (props.currPage < 4) { - expect(pageList).toEqual( - [prePageText, 1, 2, 3, 4, 5, nextPageText, lastPageText]); - } else if (props.currPage > 7) { - expect(pageList).toEqual( - [firstPageText, prePageText, 6, 7, 8, 9, 10, nextPageText]); - } else if (props.currPage === 4) { - expect(pageList).toEqual( - [firstPageText, prePageText, 2, 3, 4, 5, 6, nextPageText, lastPageText]); - } else if (props.currPage === 5) { - expect(pageList).toEqual( - [firstPageText, prePageText, 3, 4, 5, 6, 7, nextPageText, lastPageText]); - } else if (props.currPage === 6) { - expect(pageList).toEqual( - [firstPageText, prePageText, 4, 5, 6, 7, 8, nextPageText, lastPageText]); - } else { - expect(pageList).toEqual( - [firstPageText, prePageText, 5, 6, 7, 8, 9, nextPageText, lastPageText]); - } - }); - }); - }); - - describe('the quantity of pages is calculated by props.paginationSize', () => { - const props = createMockProps(); - const indicators = [ - props.firstPageText, props.prePageText, props.lastPageText, props.nextPageText - ]; - - it('should getting pages list correctly', () => { - [1, 3, 5, 8, 10].forEach((paginationSize) => { - props.paginationSize = paginationSize; - wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); - const result = pageList.filter(p => indicators.indexOf(p) === -1); - expect(result.length).toEqual(props.paginationSize); - }); - }); - }); - - describe('when props.withFirstAndLast is true', () => { - const props = createMockProps(); - describe('and last page is not visible by props.currPage', () => { - it('should getting pages list which contain last page indication', () => { - [1, 2, 3, 4, 5, 6, 7].forEach((currPage) => { - props.currPage = currPage; - wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); - expect(pageList.indexOf(props.lastPageText) > -1).toBeTruthy(); - }); - }); - }); - - describe('and first page is not visible by props.currPage', () => { - it('should getting pages list which contain first page indication', () => { - [10, 9, 8, 7, 6, 5, 4].forEach((currPage) => { - props.currPage = currPage; - wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); - expect(pageList.indexOf(props.firstPageText) > -1).toBeTruthy(); - }); - }); - }); - }); - - describe('when props.withFirstAndLast is false', () => { - const props = createMockProps(); - it('should not contain first and last page indication always', () => { - const currPages = Array.from(Array(10).keys()); - currPages.forEach((currPage) => { - props.currPage = currPage + 1; - props.withFirstAndLast = false; - wrapper = shallow(); - const pageList = wrapper.instance().calculatePages(); - expect(pageList.indexOf(props.lastPageText) > -1).toBeFalsy(); - expect(pageList.indexOf(props.firstPageText) > -1).toBeFalsy(); - }); - }); - }); - - describe('when props.pageStartIndex is negative number', () => { - const props = createMockProps(); - props.pageStartIndex = -2; - props.currPage = -2; - - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting last page correctly', () => { - const pageList = wrapper.instance().calculatePages(); - expect(pageList).toEqual( - [props.prePageText, -2, -1, 0, 1, 2, props.nextPageText, props.lastPageText]); - }); - }); - - describe('when props.alwaysShowAllBtns is true', () => { - const props = createMockProps(); - props.alwaysShowAllBtns = true; - props.currPage = 1; - props.dataSize = 11; - - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should always having next and previous page indication', () => { - const pageList = wrapper.instance().calculatePages(); - expect(pageList.indexOf(props.nextPageText) > -1).toBeTruthy(); - expect(pageList.indexOf(props.prePageText) > -1).toBeTruthy(); - }); - }); - - describe('when state.totalPages is zero', () => { - const props = createMockProps(); - props.dataSize = 0; - - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting empty array', () => { - expect(wrapper.instance().calculatePages()).toEqual([]); - }); - }); - }); - - describe('calculatePageStatus', () => { - let instance; - let pageStatus; - - describe('default case', () => { - const props = createMockProps(); - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - instance = wrapper.instance(); - pageStatus = instance.calculatePageStatus(instance.calculatePages()); - }); - - it('should returning correct format for page status', () => { - pageStatus.forEach((p) => { - expect(Object.prototype.hasOwnProperty.call(p, 'page')).toBeTruthy(); - expect(Object.prototype.hasOwnProperty.call(p, 'active')).toBeTruthy(); - expect(Object.prototype.hasOwnProperty.call(p, 'disabled')).toBeTruthy(); - expect(Object.prototype.hasOwnProperty.call(p, 'title')).toBeTruthy(); - }); - }); - - it('should mark active status as true when it is props.currPage', () => { - expect(pageStatus.find(p => p.page === props.currPage).active).toBeTruthy(); - }); - - it('only have one page\'s active status is true', () => { - expect(pageStatus.filter(p => p.page === props.currPage).length).toEqual(1); - }); - }); - - describe('when alwaysShowAllBtns is false', () => { - const props = createMockProps(); - describe('and props.currPage is on first page', () => { - it('should filter out previous page indication', () => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - instance = wrapper.instance(); - const pageList = instance.calculatePages(); - pageStatus = instance.calculatePageStatus(pageList); - - expect(pageStatus.find(p => p.page === props.prePageText)).not.toBeDefined(); - }); - }); - - describe('and props.currPage is on last page', () => { - it('should filter out next page indication', () => { - props.currPage = 10; - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - instance = wrapper.instance(); - const pageList = instance.calculatePages(); - pageStatus = instance.calculatePageStatus(pageList); - - expect(pageStatus.find(p => p.page === props.nextPageText)).not.toBeDefined(); - }); - }); - }); - }); - - describe('calculateSizePerPageStatus', () => { - describe('when props.sizePerPageList is an number array', () => { - const props = createMockProps(); - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting correctly sizePerPage status', () => { - const instance = wrapper.instance(); - const result = instance.calculateSizePerPageStatus(); - expect(result.length).toEqual(props.sizePerPageList.length); - result.forEach((sizePerPage, i) => { - expect(sizePerPage.text).toEqual(`${props.sizePerPageList[i]}`); - expect(sizePerPage.page).toEqual(props.sizePerPageList[i]); - }); - }); - }); - - describe('when props.sizePerPageList is an object array', () => { - const props = createMockProps(); - props.sizePerPageList = [{ - text: 'ten', value: 10 - }, { - text: 'thirty', value: 30 - }]; - - beforeEach(() => { - const mockElement = React.createElement(MockComponent, props, null); - wrapper = shallow(mockElement); - }); - - it('should getting correctly sizePerPage status', () => { - const instance = wrapper.instance(); - const result = instance.calculateSizePerPageStatus(); - expect(result.length).toEqual(props.sizePerPageList.length); - result.forEach((sizePerPage, i) => { - expect(sizePerPage.text).toEqual(props.sizePerPageList[i].text); - expect(sizePerPage.page).toEqual(props.sizePerPageList[i].value); - }); - }); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-paginator/test/page.test.js b/packages/react-bootstrap-table2-paginator/test/page.test.js deleted file mode 100644 index f073c86..0000000 --- a/packages/react-bootstrap-table2-paginator/test/page.test.js +++ /dev/null @@ -1,47 +0,0 @@ -import Store from 'react-bootstrap-table2/src/store'; -import { getByCurrPage } from '../src/page'; - -describe('Page Functions', () => { - let data; - let store; - const params = [ - // [page, sizePerPage, pageStartIndex] - [1, 10, 1], - [1, 25, 1], - [1, 30, 1], - [3, 30, 1], - [4, 30, 1], - [10, 10, 1], - [0, 10, 0], - [1, 10, 0], - [9, 10, 0] - ]; - - describe('getByCurrPage', () => { - beforeEach(() => { - data = []; - for (let i = 0; i < 100; i += 1) { - data.push({ id: i, name: `test_name${i}` }); - } - store = new Store('id'); - store.data = data; - }); - - it('should always return correct data', () => { - params.forEach(([page, sizePerPage, pageStartIndex]) => { - const rows = getByCurrPage(store)(page, sizePerPage, pageStartIndex); - expect(rows).toBeDefined(); - expect(Array.isArray(rows)).toBeTruthy(); - expect(rows.every(row => !!row)).toBeTruthy(); - }); - }); - - it('should return empty array when store.data is empty', () => { - store.data = []; - params.forEach(([page, sizePerPage, pageStartIndex]) => { - const rows = getByCurrPage(store)(page, sizePerPage, pageStartIndex); - expect(rows).toHaveLength(0); - }); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js deleted file mode 100644 index 0545006..0000000 --- a/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import sinon from 'sinon'; -import { shallow } from 'enzyme'; - -import PageButton from '../src/page-button'; -import PaginationList from '../src/pagination-list'; - -describe('PaginationList', () => { - let wrapper; - const onPageChange = sinon.stub(); - const pages = [{ - page: 1, - active: false, - disabled: false, - title: '1' - }, { - page: 2, - active: true, - disabled: false, - title: '2' - }, { - page: 3, - active: false, - disabled: false, - title: '3' - }]; - - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should rendering PaginatonList correctly', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.find('ul.react-bootstrap-table-page-btns-ul').length).toBe(1); - expect(wrapper.find(PageButton).length).toBe(pages.length); - }); -}); diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js deleted file mode 100644 index a9e5d35..0000000 --- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js +++ /dev/null @@ -1,288 +0,0 @@ -import React from 'react'; -import sinon from 'sinon'; -import { shallow } from 'enzyme'; - -import SizePerPageDropDown from '../src/size-per-page-dropdown'; -import PaginationList from '../src/pagination-list'; -import Pagination from '../src/pagination'; - -describe('Pagination', () => { - let wrapper; - let instance; - - const createMockProps = props => ({ - dataSize: 100, - sizePerPageList: [10, 20, 30, 50], - currPage: 1, - currSizePerPage: 10, - pageStartIndex: 1, - paginationSize: 5, - withFirstAndLast: true, - firstPageText: '<<', - prePageText: '<', - nextPageText: '>', - lastPageText: '>>', - alwaysShowAllBtns: false, - onPageChange: sinon.stub(), - onSizePerPageChange: sinon.stub(), - hidePageListOnlyOnePage: false, - hideSizePerPage: false, - ...props - }); - - describe('default pagiantion', () => { - const props = createMockProps(); - - beforeEach(() => { - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should rendering correctly', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.hasClass('react-bootstrap-table-pagination')).toBeTruthy(); - expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(0); - }); - - it('should having correct state', () => { - expect(instance.state).toBeDefined(); - expect(instance.state.totalPages).toEqual(instance.calculateTotalPage()); - expect(instance.state.lastPage).toEqual( - instance.calculateLastPage(instance.state.totalPages)); - expect(instance.state.dropdownOpen).toBeFalsy(); - }); - - it('should rendering PaginationList component successfully', () => { - const paginationList = wrapper.find(PaginationList); - expect(paginationList.length).toBe(1); - expect(paginationList.prop('pages')).toEqual(instance.calculatePageStatus(instance.calculatePages())); - expect(paginationList.prop('onPageChange')).toEqual(instance.handleChangePage); - }); - - it('should rendering SizePerPageDropDown component successfully', () => { - const sizePerPageDropDown = wrapper.find(SizePerPageDropDown); - expect(sizePerPageDropDown.length).toBe(1); - - expect(sizePerPageDropDown.prop('currSizePerPage')).toEqual(`${props.currSizePerPage}`); - expect(sizePerPageDropDown.prop('options')).toEqual(instance.calculateSizePerPageStatus()); - expect(sizePerPageDropDown.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage); - expect(sizePerPageDropDown.prop('onClick')).toEqual(instance.toggleDropDown); - expect(sizePerPageDropDown.prop('open')).toEqual(instance.state.dropdownOpen); - }); - }); - - describe('when props.sizePerPageList is empty array', () => { - beforeEach(() => { - const props = createMockProps({ sizePerPageList: [] }); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should not rendering SizePerPageDropDown component', () => { - const sizePerPageDropDown = wrapper.find(SizePerPageDropDown); - expect(sizePerPageDropDown.length).toBe(0); - }); - }); - - describe('when props.hideSizePerPage is true', () => { - beforeEach(() => { - const props = createMockProps({ hideSizePerPage: true }); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should not rendering SizePerPageDropDown component', () => { - const sizePerPageDropDown = wrapper.find(SizePerPageDropDown); - expect(sizePerPageDropDown.length).toBe(0); - }); - }); - - describe('when props.hidePageListOnlyOnePage is true', () => { - beforeEach(() => { - const props = createMockProps({ hidePageListOnlyOnePage: true, dataSize: 7 }); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should find react-bootstrap-table-pagination-list-hidden class when only one page', () => { - expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1); - }); - }); - - describe('componentWillReceiveProps', () => { - describe('when next props.currSizePerPage is diff than current one', () => { - const nextProps = createMockProps({ currSizePerPage: 20 }); - - beforeEach(() => { - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should setting correct state.totalPages', () => { - instance.componentWillReceiveProps(nextProps); - expect(instance.state.totalPages).toEqual( - instance.calculateTotalPage(nextProps.currSizePerPage)); - }); - - it('should setting correct state.lastPage', () => { - instance.componentWillReceiveProps(nextProps); - const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage); - expect(instance.state.lastPage).toEqual( - instance.calculateLastPage(totalPages)); - }); - }); - - describe('when next props.dataSize is diff than current one', () => { - const nextProps = createMockProps({ dataSize: 33 }); - - beforeEach(() => { - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should setting correct state.totalPages', () => { - instance.componentWillReceiveProps(nextProps); - expect(instance.state.totalPages).toEqual( - instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize)); - }); - - it('should setting correct state.lastPage', () => { - instance.componentWillReceiveProps(nextProps); - const totalPages = instance.calculateTotalPage( - nextProps.currSizePerPage, nextProps.dataSize); - expect(instance.state.lastPage).toEqual( - instance.calculateLastPage(totalPages)); - }); - }); - }); - - describe('toggleDropDown', () => { - beforeEach(() => { - const props = createMockProps(); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should setting state.dropdownOpen as true when it is false', () => { - instance.toggleDropDown(); - expect(instance.state.dropdownOpen).toBeTruthy(); - }); - - it('should setting state.dropdownOpen as false when it is true', () => { - instance.toggleDropDown(); - instance.toggleDropDown(); - expect(instance.state.dropdownOpen).toBeFalsy(); - }); - }); - - describe('closeDropDown', () => { - beforeEach(() => { - const props = createMockProps(); - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should always setting state.dropdownOpen as false', () => { - instance.closeDropDown(); - expect(instance.state.dropdownOpen).toBeFalsy(); - instance.closeDropDown(); - expect(instance.state.dropdownOpen).toBeFalsy(); - }); - }); - - describe('handleChangeSizePerPage', () => { - const props = createMockProps(); - - beforeEach(() => { - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should always setting state.dropdownOpen to false', () => { - instance.handleChangeSizePerPage(10); - expect(instance.state.dropdownOpen).toBeFalsy(); - }); - - describe('when new sizePerPage is same as current one', () => { - it('should not calling props.onSizePerPageChange callback', () => { - instance.handleChangeSizePerPage(10); - expect(props.onSizePerPageChange.callCount).toBe(0); - }); - }); - - describe('when new sizePerPage is diff than current one', () => { - it('should not calling props.onSizePerPageChange callback', () => { - instance.handleChangeSizePerPage(30); - expect(props.onSizePerPageChange.callCount).toBe(1); - }); - - describe('and new current page is still in the new lagination list', () => { - it('should calling props.onSizePerPageChange with correct argument', () => { - expect(props.onSizePerPageChange.calledWith(30, props.currPage)); - }); - }); - - describe('and new current page is still in the new lagination list', () => { - beforeEach(() => { - wrapper = shallow(); - instance = wrapper.instance(); - }); - - it('should calling props.onSizePerPageChange with correct argument', () => { - expect(props.onSizePerPageChange.calledWith(30, 4)); - }); - }); - }); - }); - - describe('handleChangePage', () => { - const props = createMockProps(); - - beforeEach(() => { - props.currPage = 6; - wrapper = shallow(); - instance = wrapper.instance(); - }); - - afterEach(() => { - props.onPageChange.reset(); - }); - - it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => { - instance.handleChangePage(props.prePageText); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(5)).toBeTruthy(); - }); - - it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => { - instance.handleChangePage(props.nextPageText); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(7)).toBeTruthy(); - }); - - it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => { - instance.handleChangePage(props.lastPageText); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(10)).toBeTruthy(); - }); - - it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => { - instance.handleChangePage(props.firstPageText); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy(); - }); - - it('should calling props.onPageChange correctly when new page is a numeric page', () => { - const newPage = '8'; - instance.handleChangePage(newPage); - expect(props.onPageChange.callCount).toBe(1); - expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy(); - }); - - it('should not calling props.onPageChange correctly when page is not changed', () => { - const newPage = props.currPage; - instance.handleChangePage(newPage); - expect(props.onPageChange.callCount).toBe(0); - }); - }); -}); diff --git a/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js b/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js deleted file mode 100644 index 21e11cc..0000000 --- a/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js +++ /dev/null @@ -1,127 +0,0 @@ -import React from 'react'; -import sinon from 'sinon'; -import { shallow } from 'enzyme'; - -import SizePerPageOption from '../src/size-per-page-option'; -import SizePerPageDropDown from '../src/size-per-page-dropdown'; - -describe('SizePerPageDropDown', () => { - let wrapper; - const currSizePerPage = '25'; - const options = [{ - text: '10', - page: 10 - }, { - text: '25', - page: 25 - }]; - const onClick = sinon.stub(); - const onBlur = sinon.stub(); - const onSizePerPageChange = sinon.stub(); - const props = { - currSizePerPage, - options, - onClick, - onBlur, - onSizePerPageChange - }; - - describe('default SizePerPageDropDown component', () => { - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should rendering SizePerPageDropDown correctly', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.find('button').length).toBe(1); - expect(wrapper.find('button').text()).toEqual(`${currSizePerPage} `); - }); - - it('should rendering SizePerPageOption successfully', () => { - expect(wrapper.find('ul.dropdown-menu').length).toBe(1); - const sizePerPageOptions = wrapper.find(SizePerPageOption); - expect(sizePerPageOptions.length).toBe(options.length); - sizePerPageOptions.forEach((sizePerPage, i) => { - const option = options[i]; - expect(sizePerPage.prop('text')).toEqual(option.text); - expect(sizePerPage.prop('page')).toEqual(option.page); - expect(sizePerPage.prop('onSizePerPageChange')).toEqual(onSizePerPageChange); - }); - }); - - it('default variation is dropdown', () => { - expect(wrapper.hasClass('dropdown')).toBeTruthy(); - }); - - it('default dropdown is not open', () => { - expect(wrapper.hasClass('open show')).toBeFalsy(); - expect(wrapper.find('[aria-expanded=false]').length).toBe(1); - }); - }); - - describe('when open prop is true', () => { - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should rendering SizePerPageDropDown correctly', () => { - expect(wrapper.hasClass('open show')).toBeTruthy(); - expect(wrapper.find('[aria-expanded=true]').length).toBe(1); - }); - }); - - describe('when hidden prop is true', () => { - beforeEach(() => { - wrapper = shallow( -