rsuite-table - npm Package Compare versions

Comparing version 3.8.4 to 3.9.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# 3.9.0
+
+- **Feature**: Added `expanded` parameter in `renderTreeToggle`.
+- **Feature**: Added support `treeCol` on `<Column>`.
+- **Chore**: Migrate from Flow to Typescript.
+- **Breaking**: Remove the `setRowHeight` property,`rowHeight` supports function values.
+
 # 3.8.4
@@ -2,0 +9,0 @@

package.json

 {
   "name": "rsuite-table",
-  "version": "3.8.4",
+  "version": "3.9.0",
   "description": "A React table component",
   "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "module": "es/index.js",
   "scripts": {
-    "build": "rm -rf lib && babel src --out-dir lib && cp -R src/less lib && npm run build-css",
-    "build-css": "gulp build",
+    "format": "prettier --write \"{src,test}/**/*.{tsx,ts,js}\"",
+    "format:check": "prettier --list-different \"{src,test}/**/*.{tsx,ts,js}\"",
+    "build": "npm run build:gulp",
+    "build:gulp": "gulp build",
     "dev": "NODE_ENV=development webpack-dev-server  --inline --progress --colors --port 3100 --host 0.0.0.0 ",
@@ -13,7 +17,7 @@ "docs": "rm -rf assets &&  NODE_ENV=production webpack",
     "tdd": "karma start",
-    "lint": "eslint src  *.js",
+    "lint:ts": "eslint src/**/*.{ts,tsx}",
+    "lint": "npm run lint:ts",
     "test": "npm run lint && cross-env NODE_ENV=test karma start --single-run",
     "clean": "rm -rf node_modules/gh-pages/.cache",
-    "coveralls": "cat ./coverage/lcov/lcov.info | ./node_modules/.bin/coveralls",
-    "prepublish": "npm run test && npm run build"
+    "coveralls": "cat ./coverage/lcov/lcov.info | ./node_modules/.bin/coveralls"
   },
@@ -26,2 +30,3 @@ "author": "[e-mail]",
     "src",
+    "es",
     "dist"
@@ -34,7 +39,7 @@ ],
   "dependencies": {
+    "@babel/runtime": "^7.8.4",
     "classnames": "^2.2.5",
     "dom-lib": "^1.2.1",
     "element-resize-event": "^3.0.2",
-    "lodash": "^4.17.5",
-    "react-lifecycles-compat": "^3.0.4"
+    "lodash": "^4.17.5"
   },
@@ -46,19 +51,30 @@ "peerDependencies": {
   "devDependencies": {
-    "autoprefixer": "^9.7.3",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.7.6",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-flow-react-proptypes": "^14.0.4",
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-proto-to-assign": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-typescript": "^7.7.2",
+    "@types/classnames": "^2.2.8",
+    "@types/lodash": "^4.14.134",
+    "@types/prop-types": "^15.7.1",
+    "@types/react": "^16.8.20",
+    "@types/react-dom": "^16.8.4",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "autoprefixer": "^8.3.0",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.0",
+    "babel-plugin-add-module-exports": "^1.0.2",
+    "babel-plugin-date-fns": "^0.2.1",
     "babel-plugin-istanbul": "^4.1.4",
-    "babel-plugin-lodash": "^3.3.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-react-flow-handled-props": "^0.1.7",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-standalone": "^6.7.7",
+    "babel-plugin-lodash": "^3.3.4",
     "chai": "^4.1.0",
-    "compression-webpack-plugin": "^1.0.1",
     "coveralls": "^3.0.2",
@@ -68,27 +84,24 @@ "cross-env": "^5.0.5",
     "cssnano": "^4.1.10",
+    "del": "^5.1.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-15": "^1.0.3",
     "es6-promise": "^4.1.1",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.0.1",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-babel": "^4.1.1",
-    "eslint-plugin-flowtype": "^2.46.1",
-    "eslint-plugin-import": "^2.6.1",
-    "eslint-plugin-json": "^1.2.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-prettier": "^2.6.2",
-    "eslint-plugin-react": "^7.3.0",
-    "extract-text-webpack-plugin": "^2.1.0",
+    "eslint": "^6.7.2",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.17.0",
     "faker": "^4.1.0",
     "file-loader": "^0.10.1",
-    "flow-bin": "^0.67.1",
     "gh-pages": "^0.12.0",
     "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
     "gulp-less": "^4.0.0",
     "gulp-postcss": "^7.0.1",
     "gulp-rename": "^1.2.2",
+    "gulp-rtlcss": "^1.4.0",
     "gulp-sourcemaps": "^2.6.4",
     "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^3.2.0",
     "karma": "^3.1.4",
@@ -104,12 +117,13 @@ "karma-chrome-launcher": "^1.0.1",
     "karma-webpack": "2.0.3",
-    "less": "^2.7.1",
-    "less-loader": "^2.2.3",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
     "markdown-loader": "2.0.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "mocha": "^5.2.0",
-    "react": "^16.2.0",
+    "prettier": "^1.19.1",
+    "react": "^16.12.0",
     "react-code-view": "^1.1.6",
-    "react-dom": "^16.2.0",
-    "react-hot-loader": "^3.1.3",
+    "react-dom": "^16.12.0",
     "react-markdown-reader": "^1.1.0",
-    "react-test-renderer": "^16.0.0",
+    "react-test-renderer": "^16.13.0",
     "rsuite": "^2.0.12",
@@ -119,7 +133,9 @@ "sinon": "^4.0.2",
     "style-loader": "^0.13.1",
+    "typescript": "^3.8.2",
     "url-loader": "^0.5.7",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.3.0",
+    "webpack": "^4.5.0",
+    "webpack-cli": "^3.1.1",
+    "webpack-dev-server": "^3.10.3",
     "why-did-you-update": "^0.1.1"
   }
 }

README.md

 # rsuite-table
 
-A React table component,
+A React table component.
 
@@ -48,3 +48,3 @@ [![npm][npm-badge]][npm]
 
-```js
+```tsx
 import { Table, Column, HeaderCell, Cell } from 'rsuite-table';
@@ -59,4 +59,4 @@ import 'rsuite-table/lib/less/index.less'; // or 'rsuite-table/dist/css/rsuite-table.css'
 
-const ImageCell = ({ rowData, dataKey, ...props }) => (
-  <Cell {...props}>
+const ImageCell = ({ rowData, dataKey, ...rest }) => (
+  <Cell {...rest}>
     <img src={rowData[dataKey]} width="50" />
@@ -66,27 +66,29 @@ </Cell>
 
-<Table data={dataList}>
-  <Column width={100} sort fixed resizable>
-    <HeaderCell>ID</HeaderCell>
-    <Cell dataKey="id" />
-  </Column>
+const App = () => (
+  <Table data={dataList}>
+    <Column width={100} sort fixed resizable>
+      <HeaderCell>ID</HeaderCell>
+      <Cell dataKey="id" />
+    </Column>
 
-  <Column width={100} sort resizable>
-    <HeaderCell>Name</HeaderCell>
-    <Cell dataKey="name" />
-  </Column>
+    <Column width={100} sort resizable>
+      <HeaderCell>Name</HeaderCell>
+      <Cell dataKey="name" />
+    </Column>
 
-  <Column width={100} sort resizable>
-    <HeaderCell>Email</HeaderCell>
-    <Cell>
-      {(rowData, rowIndex) => {
-        return <a href={`mailto:${rowData.email}`}>{rowData.email}</a>;
-      }}
-    </Cell>
-  </Column>
+    <Column width={100} sort resizable>
+      <HeaderCell>Email</HeaderCell>
+      <Cell>
+        {(rowData, rowIndex) => {
+          return <a href={`mailto:${rowData.email}`}>{rowData.email}</a>;
+        }}
+      </Cell>
+    </Column>
 
-  <Column width={100} resizable>
-    <HeaderCell>Avartar</HeaderCell>
-    <ImageCell dataKey="avartar" />
-  </Column>
-</Table>;
+    <Column width={100} resizable>
+      <HeaderCell>Avartar</HeaderCell>
+      <ImageCell dataKey="avartar" />
+    </Column>
+  </Table>
+);
 ```
@@ -102,10 +104,10 @@
 | autoHeight             | boolean                                                            | Automatic height                                                                              |
-| bodyRef                | React.ElementRef                                                   | A ref attached to the table body element                                                      |
+| bodyRef                | (ref: HTMLElement) => void                                         | A ref attached to the table body element                                                      |
 | bordered               | boolean                                                            | Show border                                                                                   |
 | cellBordered           | boolean                                                            | Show cell border                                                                              |
-| data \*                | Array&lt;Object&gt;                                                | Table data                                                                                    |
+| data \*                | object[]                                                           | Table data                                                                                    |
 | defaultExpandAllRows   | boolean                                                            | Expand all nodes By default                                                                   |
-| defaultExpandedRowKeys | Array&lt;string&gt;                                                | Specify the default expanded row by `rowkey`                                                  |
+| defaultExpandedRowKeys | string[]                                                           | Specify the default expanded row by `rowkey`                                                  |
 | defaultSortType        | enum: 'desc', 'asc'                                                | Sort type                                                                                     |
-| expandedRowKeys        | Array&lt;string&gt;                                                | Specify the default expanded row by `rowkey` (Controlled)                                     |
+| expandedRowKeys        | string[]                                                           | Specify the default expanded row by `rowkey` (Controlled)                                     |
 | headerHeight           | number`(40)`                                                       | Table Header Height                                                                           |
@@ -122,11 +124,11 @@ | height                 | number`(200)`                                                      | Table height                                                                                  |
 | onSortColumn           | (dataKey:string, sortType:string)=>void                            | Click the callback function of the sort sequence to return the value `sortColumn`, `sortType` |
-| renderEmpty            | (info: React.Node) => React.Node                                   | Customized data is empty display content                                                      |
-| renderLoading          | (loading: React.Node) => React.Node                                | Customize the display content in the data load                                                |
-| renderRowExpanded      | (rowDate?: Object) => React.Node                                   | Customize what you can do to expand a zone                                                    |
-| renderTreeToggle       | (icon:node,rowData:object)=> node                                  | Tree table, the callback function in the expanded node                                        |
+| renderEmpty            | (info: React.ReactNode) => React.ReactNode                         | Customized data is empty display content                                                      |
+| renderLoading          | (loading: React.ReactNode) => React.ReactNode                      | Customize the display content in the data load                                                |
+| renderRowExpanded      | (rowDate?: Object) => React.ReactNode                              | Customize what you can do to expand a zone                                                    |
+| renderTreeToggle       | (icon:node,rowData:object,expanded:boolean)=> node                 | Tree table, the callback function in the expanded node                                        |
 | rowClassName           | string , (rowData:object)=>string                                  | Add an optional extra class name to row                                                       |
 | rowExpandedHeight      | number `(100)`                                                     | Set the height of an expandable area                                                          |
-| rowHeight              | number`(46)`                                                       | Row height                                                                                    |
+| rowHeight              | number`(46)`, (rowData: object) => number                          | Row height                                                                                    |
 | rowKey                 | string `('key')`                                                   | Each row corresponds to the unique `key` in `data`                                            |
-| setRowHeight           | (rowData:object)=> number                                          | Custom Settings Row Height                                                                    |
+| rtl                    | boolean                                                            | Right to left                                                                                 |
 | showHeader             | boolean `(true)`                                                   | Display header                                                                                |
@@ -152,2 +154,3 @@ | sortColumn             | string                                                             | Sort column name ˝                                                                            |
 | width         | number                                           | Column width                                                                                                |
+| treeCol       | boolean                                          | A column of a tree.                                                                                         |
 
@@ -169,3 +172,3 @@ > `sortable` is used to define whether the column is sortable, but depending on what `key` sort needs to set a `dataKey` in `Cell`.
 
-```html
+```tsx
 <Column width="{100}" align="center">
@@ -179,3 +182,3 @@ <HeaderCell>Name</HeaderCell>
 
-```js
+```tsx
 const NameCell = ({ rowData, ...props }) => (
@@ -195,3 +198,3 @@ <Cell {...props}>
 
-```js
+```tsx
 <Column width={100} align="center">
@@ -198,0 +201,0 @@ <HeaderCell>Name</HeaderCell>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

212

increased by1.44%

Worsened metrics

Total package byte prevSize

113026

decreased by-55.5%

Dev dependency count

85

increased by14.86%

Number of package files

50

decreased by-31.51%

Lines of code

2449

decreased by-53.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime@^7.8.4

• + Added@babel/runtime@7.26.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removedreact-lifecycles-compat@^3.0.4

• - Removedreact-lifecycles-compat@3.0.4(transitive)