diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..94826a2 --- /dev/null +++ b/.babelrc @@ -0,0 +1,36 @@ +{ + "presets": [ + [ + "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-preset-env/lib/index.js", + { + "loose": true, + "modules": false + } + ], + "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-preset-react/lib/index.js", + "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-preset-stage-1/lib/index.js" + ], + "plugins": [ + "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-plugin-transform-decorators-legacy/lib/index.js", + [ + "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-plugin-transform-react-remove-prop-types/lib/index.js", + { + "mode": "wrap" + } + ], + [ + "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-plugin-transform-runtime/lib/index.js", + { + "helpers": false, + "polyfill": false, + "regenerator": true + } + ] + ], + "ignore": [ + ".spec.js", + ".test.js", + "-test.js", + "/__tests__/" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index c4df947..4b194e9 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ [Developed by Flipbyte](https://www.flipbyte.com/) [![npm package][npm-badge]][npm] +[![Codacy Badge][codacy-badge]][codacy] Datatable built using React and Redux to fetch JSON data asynchronously using REST API. @@ -46,33 +47,30 @@ import { reducer, epics } from '@flipbyte/redux-datatable'; name: 'your_table_name', // this is the key used to set your table data inside the table reducer height: 500, rowHeight: 50, - pagination: { - items: [{ - type: 'limiter', - visible: true, - position: 10, - options: [10, 20, 50, 200, 2000], - default: 200, - style: { - right: false, - } - }, { - type: 'pages', - visible: true, - position: 20, - style: { + pagination: { + // visible: true, // or an object { top: true, bottom: false } default visible + items: { + limiter: { + type: 'limiter', + visible: true, + position: 10, + options: [10, 20, 50, 200, 2000], + default: 200, + }, + pages: { + type: 'pages', + visible: true, + position: 20, right: true, - } - }, { - type: 'resultCount', - visible: true, - position: 30, - style: { - width: '350px', - textAlign: 'center', - } - }] - }, + }, + resultCount: { + type: 'resultCount', + visible: true, + position: 30, + right: true, + }, + } + }, routes: { // You can add other routes and handle them using custom actions. get: { // The route used to fetch data and it's params route: '/{your_route}', @@ -95,9 +93,6 @@ import { reducer, epics } from '@flipbyte/redux-datatable'; label: 'Columns', visible: true, state: false, - style: { - right: true - } }, ... ] @@ -199,29 +194,24 @@ const YourComponent = () => | routes | object | true | - | Routes definition to fetch data and other custom routes config for custom handling (Check below) | | toolbar | array | false | [] | Toolbar definition (Check below) | | columns | array | true | - | Columns to display | +| styles | object | false | {} | Custom styles for your table | #### Pagination object | Key | Type | Required | Default | Description | | ------------ | ------------ | ------------ | ------------ | ------------ | -| items | array | false | [] | Array of item objects available for display in the pagination bar. Check below for items available | +| items | object | false | {} | Items available for display in the pagination bar. Check below for items available | | visible | boolean/object | false | true | Whether the pagination is visible or not | -##### Pagination items array: +##### Pagination items object: | Key | Type | Required | Default | Description | | ------------ | ------------ | ------------ | ------------ | ------------ | | type | string | true | - | One of the following: limiter, pages, resultCount | | visible | boolean | false | true | Whether the item is visible | -| style | object | false | {} | Stylable properties | | **Limiter specific options** | | | | | | options | array | true | - | Array of integers with limiter options | | default | array | true | - | One of the values in the limiter options key | -| **- style** | | | | | -| right | boolean | false | false | Align the item to the right | -| width | integer | false | 200 | Width of the item | -| textAlign | string | false | left | Align the text of the item to the right, left or center| -| fontSize | string | false | 14 | The font size of the text in the item | #### Routes object @@ -244,7 +234,6 @@ Toolbar config is an array of array of object where objects are the toolbar item | label | string | true | - | Label for the toolbar item | | visible | boolean | false | true | Whether the item is visible | | state | boolean | false | false | Whether to pass the state object as item prop | -| style | object | false | {} | Define toolbar item styles | | **For type: actions** | | | | | | options | array | true | - | Array of option objects | | **-- options** | | | | | @@ -252,10 +241,6 @@ Toolbar config is an array of array of object where objects are the toolbar item | name | string | true | - | Unique name for the action | | label | string | true | - | Label for the action | | thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. | -| **- styles** | | | | | -| right | boolean | false | false | Align the item to the right | -| width | integer | false | 200 | Width of the item | -| fontSize | string | false | 14 | The font size of the text in the item | #### Columns object @@ -276,8 +261,29 @@ Toolbar config is an array of array of object where objects are the toolbar item | label | string | true | - | Label for the action | | thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. | +#### Styles object + +Styles has the following properties avaailable: + +| Key | Type | Required | Default | Description | +| ------------ | ------------ | ------------ | ------------ | ------------ | +| tableContainer | styled-components style object | false | - | Outer table container | +| table | styled-components style object | false | - | Table component | +| thead | styled-components style object | false | - | Table header component | +| tbody | styled-components style object | false | - | Table body component | +| tr | object | false | - | Table rows - the object can contain the following keys `header`, `filter`, `body`, each of whose values is a styled-components style object| | +| th | styled-components style object | false | - | Table header columns | +| td | object | false | - | Table columns - the object contain the following keys `filter`, `body` whose value is a styled-components style object | +| toolbar | object | false | - | Keys `container` and `row` which are styled-components style object and `item` which is an object with keys that are the names of the respective items (as defined in the config) and the value is a styled-components style object | +| pagination | object | false | - | Keys `container` - a styled-components style object and `item` - same as above toolbar item | +| filter | object | false | - | Each key is the name of the column and the value is the styled-components style object | +| body | object | false | - | Same as `filter` (above) | + ## License The MIT License (MIT) [npm-badge]: https://img.shields.io/npm/v/@flipbyte/redux-datatable.svg [npm]: https://www.npmjs.com/package/@flipbyte/redux-datatable + +[codacy-badge]: https://api.codacy.com/project/badge/Grade/67274650b4874f5db55ede76156ab4d2 +[codacy]: https://www.codacy.com/app/flipbyte/redux-datatable?utm_source=github.com&utm_medium=referral&utm_content=flipbyte/redux-datatable&utm_campaign=Badge_Grade diff --git a/demo/src/css/simple-sidebar.css b/demo/src/css/simple-sidebar.css index 69d3ef5..00bcb8d 100644 --- a/demo/src/css/simple-sidebar.css +++ b/demo/src/css/simple-sidebar.css @@ -38,7 +38,7 @@ body { .content { position: fixed; - overflow: scroll; + overflow: hidden; height: 100%; top: 60px; } @@ -54,7 +54,7 @@ body { #page-content-wrapper { min-width: 0; - width: 100%; + /* width: 100%; */ margin-left: 15rem; } diff --git a/demo/src/index.js b/demo/src/index.js index 8e47fad..22b41c8 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -6,7 +6,7 @@ import { Provider } from 'react-redux'; import configureStore from './store'; import config from './config'; -import '../../node_modules/bootstrap/dist/css/bootstrap.css'; +// import '../../node_modules/bootstrap/dist/css/bootstrap.css'; import './css/simple-sidebar.css'; import './css/styles.css'; diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js index d6dedb7..d3dd6ba 100644 --- a/demo/src/schema/basic.js +++ b/demo/src/schema/basic.js @@ -4,33 +4,114 @@ export default { rowHeight: 50, filterable: true, headers: true, + // styles: { + // tableContainer: { + // fontSize: '16px', + // }, + // // table: { + // // background: '#000', + // // }, + // // thead: { + // // background: '#000' + // // }, + // // tbody: { + // // background: '#000' + // // }, + // // tr: { + // // header: { fontWeight: 'normal' }, + // // filter: { }, + // // body: { }, + // // }, + // // th: { textAlign: 'center', ':last-child': { + // // textAlign: 'right' + // // }}, + // // td: { + // // filter: {}, + // // body: { textAlign: 'center', ':last-child': { + // // textAlign: 'right' + // // }} + // // }, + // toolbar: { + // // item: { + // // backgroundColor: '#000', + // // }, + // // containr: + // // row: + // // item: + // item: { + // actions: { + // marginRight: '5px' + // }, + // columns: { + // float: 'right', + // 'button': { + // background: '#fff', + // color: '#6c757d' + // }, + // '> div > div': { + // right: 0, + // left: '' + // } + // } + // } + // }, + // pagination: { + // // container: + // // item: + // // items: { + // // [name]: + // // }, + // item: { + // pages: { + // float: 'right', + // } + // } + // }, + // filter: { + // // pageId: {' input': { + // // border: '1px solid #000' + // // }} + // // [name]: + // }, + // body: { + // actions: { + // ' button': { + // fontSize: '12px', + // ':last-child': { + // background: '#dc3545', + // color: '#fff', + // ':hover': { + // backgroundColor: '#c82333', + // } + // } + // } + // } + // // [name]: + // } + // }, pagination: { // visible: true, // or an object { top: true, bottom: false } default visible - items: [{ - type: 'limiter', - visible: true, - position: 10, - options: [10, 20, 50, 200, 2000], - default: 200, - style: { - right: false, - } - }, { - type: 'pages', - visible: true, - position: 20, - style: { + items: { + limiter: { + type: 'limiter', + visible: true, + position: 10, + options: [10, 20, 50, 200, 2000], + default: 200, + }, + pages: { + type: 'pages', + visible: true, + position: 20, right: true, - } - }, { - type: 'resultCount', - visible: true, - position: 30, - style: { - width: '350px', - textAlign: 'center', - } - }] + }, + resultCount: { + type: 'resultCount', + visible: true, + position: 30, + right: true, + }, + } }, routes: { get: { @@ -47,6 +128,7 @@ export default { }, toolbar: [ [{ + name: 'actions', label: 'Actions', id: 'dropdown', options: [{ @@ -66,112 +148,20 @@ export default { label: 'Edit this field', indexField: '@id' }], - visible: true, - style: { - right: false, - width: '100px' - } + visible: true }, { - type: 'reset-filters', + type: 'resetFilters', label: 'Reset Filters', visible: true, state: false, }, { + name: 'columns', type: 'columns', label: 'Columns', visible: true, - state: false, - style: { - right: true - } - }/*, { - label: 'NACTIONS', - id: 'massActions', - delete: { - type: 'action', - name: 'delete', - label: 'Delete', - indexField: '@id' - }, - visible: true, - style: { - right: false, - width: '200px' - } - }, { - label: '2Actions', - id: 'massActions', - delete: { - type: 'action', - name: 'delete', - label: 'Delete', - indexField: '@id' - }, - visible: true, - style: { - right: true, - width: '100px' - } - }*/], - // [{ - // label: 'Actions', - // id: 'massActions', - // delete: { - // type: 'action', - // name: 'delete', - // label: 'Delete', - // indexField: '@id' - // }, - // visible: true, - // style: { - // right: false, - // width: '200px' - // } - // }, { - // type: 'columns', - // label: 'Columns', - // visible: true, - // }, { - // label: 'NACTIONS', - // id: 'massActions', - // delete: { - // type: 'action', - // name: 'delete', - // label: 'Delete', - // indexField: '@id' - // }, - // visible: true, - // style: { - // width: '200px' - // } - // }, { - // label: '2Actions', - // id: 'massActions', - // delete: { - // type: 'action', - // name: 'delete', - // label: 'Delete', - // indexField: '@id' - // }, - // visible: true, - // style: { - // right: true, - // width: '100px' - // } - // }] + state: false + }], ], - // toolbar: { - // massActions: { - // label: 'Actions', - // delete: { - // type: 'action', - // name: 'delete', - // label: 'Delete', - // indexField: '@id' - // } - // }, - // columns: true - // }, columns: [{ name: 'ids', label: '', @@ -184,36 +174,10 @@ export default { label: 'ID', type: 'number', name: 'pageId', - sortable: true, width: 150, filterable: true, sortable: true, - }, /*{ - label: 'Avatar', - type: 'image', - name: 'avatar', - sortable: false, - textAlign: 'center', - width: 200, - filterable: false, - imgHeight: 50 - }, { - label: 'First Name', - type: 'string', - name: 'first_name', - sortable: true, - textAlign: 'text-left', - width: 200, - filterable: true, }, { - label: 'Last Name', - type: 'string', - name: 'last_name', - sortable: true, - textAlign: 'text-left', - width: 200, - filterable: true, - },*/{ label: 'Created at', type: 'date', name: 'createdAt', diff --git a/package-lock.json b/package-lock.json index 15f2745..91a8c09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@flipbyte/redux-datatable", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -8,6 +8,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz", "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==", + "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -16,6 +17,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz", "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==", + "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -32,6 +34,7 @@ "version": "7.3.4", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.3.4.tgz", "integrity": "sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==", + "dev": true, "requires": { "esutils": "^2.0.2", "lodash": "^4.17.11", @@ -41,7 +44,8 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true } } }, @@ -49,6 +53,7 @@ "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "dev": true, "requires": { "@emotion/memoize": "0.7.1" } @@ -56,12 +61,14 @@ "@emotion/memoize": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", - "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==", + "dev": true }, "@emotion/unitless": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", - "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==", + "dev": true }, "@insin/npm-install-webpack-plugin": { "version": "5.0.0", @@ -1122,6 +1129,7 @@ "version": "1.10.0", "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz", "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==", + "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.0.0", "@babel/helper-module-imports": "^7.0.0", @@ -1198,7 +1206,8 @@ "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", - "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", + "dev": true }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", @@ -2471,7 +2480,8 @@ "camelize": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", - "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", + "dev": true }, "caniuse-lite": { "version": "1.0.30000943", @@ -3081,7 +3091,8 @@ "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", + "dev": true }, "css-loader": { "version": "1.0.0", @@ -3165,6 +3176,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.0.tgz", "integrity": "sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw==", + "dev": true, "requires": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", @@ -3934,7 +3946,8 @@ "esutils": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", - "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=" + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", + "dev": true }, "etag": { "version": "1.8.1", @@ -5386,7 +5399,8 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true }, "has-symbols": { "version": "1.0.0", @@ -7952,7 +7966,8 @@ "memoize-one": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz", - "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==" + "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==", + "dev": true }, "memory-fs": { "version": "0.4.1", @@ -9565,7 +9580,8 @@ "postcss-value-parser": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true }, "prelude-ls": { "version": "1.1.2", @@ -11585,18 +11601,11 @@ "schema-utils": "^0.4.5" } }, - "styled-button-component": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/styled-button-component/-/styled-button-component-3.0.1.tgz", - "integrity": "sha512-Y88+H5GgL9ZXvu4BY2hxRmLp/wDJhcrVpf3fBjay+wBgAPK6JocBAPq8X+/PXYhg8Fzi0GcOilSo0DVh4L06LA==", - "requires": { - "styled-config": "^3.0.1" - } - }, "styled-components": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.3.tgz", "integrity": "sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==", + "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", "@emotion/is-prop-valid": "^0.7.3", @@ -11615,34 +11624,24 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, "requires": { "has-flag": "^3.0.0" } } } }, - "styled-config": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/styled-config/-/styled-config-3.0.1.tgz", - "integrity": "sha512-dzXbqRgJPTEbm30T2FYx3JyWCLAXI2B7zoyJcukFLB2WqGZlx640/4TqIq8sgpUlkkLZW5ufeX09i79sREwYFw==" - }, - "styled-dropdown-component": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/styled-dropdown-component/-/styled-dropdown-component-3.0.1.tgz", - "integrity": "sha512-pjZME8BBAIXdysHMJPMoIaMsDM43RJE9Upb2yqaAzk2sWA08bUXUURNzckTlcj1wLuxp68B9ocUtFXk4DMGxYg==", - "requires": { - "styled-config": "^3.0.1" - } - }, "stylis": { "version": "3.5.4", "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", - "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==", + "dev": true }, "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", + "dev": true }, "supports-color": { "version": "6.1.0", diff --git a/package.json b/package.json index 9a1bd96..23c9b37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@flipbyte/redux-datatable", - "version": "0.1.0", + "version": "0.2.0", "description": "React-Redux data table", "main": "lib/index.js", "module": "es/index.js", @@ -25,7 +25,8 @@ "rxjs": "^6.4.0", "prop-types": "^15.6.2", "react-redux": "^6.0.1", - "redux": "^4.0.1" + "redux": "^4.0.1", + "styled-components": "^4.1.3" }, "dependencies": { "lodash": ">=4.17.10", @@ -35,10 +36,7 @@ "react-pure-time": "^0.2.2", "react-redux-notify": "^4.1.0", "redux-observable": "^1.0.0", - "redux-thunk": "^2.3.0", - "styled-button-component": "^3.0.1", - "styled-components": "^4.1.3", - "styled-dropdown-component": "^3.0.1" + "redux-thunk": "^2.3.0" }, "devDependencies": { "axios": "^0.18.0", @@ -51,7 +49,8 @@ "react-redux": "^6.0.1", "redux": "^4.0.1", "redux-logger": "^3.0.6", - "rxjs": "^6.4.0" + "rxjs": "^6.4.0", + "styled-components": "^4.1.3" }, "author": "", "homepage": "", diff --git a/src/Datatable/Container.js b/src/Datatable/Container.js deleted file mode 100644 index 14b6774..0000000 --- a/src/Datatable/Container.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import Styles from './Styles'; - -const Container = ({ children }) => - - { React.Children.map(children, (child, i) => - { child } - ) } - - -export default Container; diff --git a/src/Datatable/Pagination.js b/src/Datatable/Pagination.js deleted file mode 100644 index ab9fbd5..0000000 --- a/src/Datatable/Pagination.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import PropTypes from "prop-types"; -import Styles from './Styles'; -import Limiter, { TYPE_LIMITER } from './Pagination/Limiter'; -import ResultCount from './Pagination/ResultCount'; -import Pages from './Pagination/Pages'; -import { calculatePaginationProps, getLimiter } from '../utils'; - -const renderers = { - 'limiter': Limiter, - 'pages': Pages, - 'resultCount': ResultCount, -} - -const isVisible = (visible, position) => visible === true - || (typeof visible === 'object' - && (visible[position] === true || visible[position] === undefined)); - -const getRenderer = ( type ) => renderers[type]; -const Pagination = ({ - query, - render, - position, - margin, - componentConfig: { - items = [], - visible = true - } -}) => { - const limiter = getLimiter(items); - const defaultLimit = limiter.default || 10; - const paginationProps = calculatePaginationProps(query, defaultLimit); - return( - isVisible(visible, position) && - { items.map((item, index) => { - const { visible: itemVisible, style, type } = item; - return ( - itemVisible && - { render(getRenderer(type), item, paginationProps, index) } - - ) - })} - - ) -} - -export default Pagination; diff --git a/src/Datatable/Pagination/Pages.js b/src/Datatable/Pagination/Pages.js deleted file mode 100644 index 7fa93dd..0000000 --- a/src/Datatable/Pagination/Pages.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import Styles from '../Styles'; -import { SET_PAGE } from '../../actions'; - -const NUM_LINKS = 5; - -const fillRange = ( start, end ) => { - return Array(end - start + 1).fill().map((item, index) => start + index); -}; - -const getPages = ( currentPage, total ) => { - var padding = Math.floor(NUM_LINKS / 2); - var left = (currentPage - padding < padding) ? 1 : currentPage - padding; - var right = (left + NUM_LINKS - 1 > total) ? total : left + NUM_LINKS - 1; - - left = (right == total) ? - (right - NUM_LINKS < 1) ? 1 : right - NUM_LINKS + 1 - : left; - - return fillRange(left, right); -} - -const Pages = ({ page, total, action }) => { - const setPage = ( page ) => action(SET_PAGE)({ page }); - return ( - - First - Previous - { getPages(page, total).map( (link, index) => - { link } - ) } - = total }>Next - Last - - ); -} - -export default Pages diff --git a/src/Datatable/Renderer.js b/src/Datatable/Renderer.js deleted file mode 100644 index c6d4d72..0000000 --- a/src/Datatable/Renderer.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import Styles from './Styles'; -import Filter from './Renderer/Filter'; -import Header from './Renderer/Header'; -import Body from './Renderer/Body'; - -const getRenderer = (ofType) => { - const renderers = { - header: Header, - filter: Filter, - default: Body, - } - - return renderers[ofType] || renderers['default']; -} - -const Renderer = ({ ofType, ...props }) => { - const Renderer = getRenderer(ofType); - return -} - -export default Renderer; diff --git a/src/Datatable/Renderer/Body.js b/src/Datatable/Renderer/Body.js deleted file mode 100644 index 727a92c..0000000 --- a/src/Datatable/Renderer/Body.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import Styles from '../Styles'; - -import Text from './Body/Text'; -import Date from './Body/Date'; -import Image from './Body/Image'; -import Actions from './Body/Actions'; -import Options from './Body/Options'; -import Selection from './Body/Selection'; - -const renderers = { - date: Date, - actions: Actions, - selection: Selection, - options: Options, - image: Image, - default: Text -}; - -const ColumnRenderer = ( props ) => { - const { renderer, type } = props.colConfig; - const Component = renderer || renderers[type] || renderers['default']; - return -}; - -const Body = ({ index, item, top, action, thunk, extra, ...column }) => - - - - -export default Body; diff --git a/src/Datatable/Renderer/Body/Date.js b/src/Datatable/Renderer/Body/Date.js deleted file mode 100644 index d413247..0000000 --- a/src/Datatable/Renderer/Body/Date.js +++ /dev/null @@ -1,21 +0,0 @@ -import _ from 'lodash'; -import Time from 'react-pure-time'; -import React, { Component } from 'react'; -import { shouldUpdate } from '../../../utils'; - -class Date extends Component { - shouldComponentUpdate({ data, colConfig: { name } }) { - return shouldUpdate(this.props.data, data, name); - } - - render() { - const { - data, - index, - colConfig: { name, textAlign, format } - } = this.props; - return