From f8682255a5ad8869222830f92361b2c36d87695a Mon Sep 17 00:00:00 2001 From: xwx <1093967571@qq.com> Date: Wed, 29 Jun 2022 15:48:01 +0800 Subject: [PATCH 01/28] feat: init --- .python-version | 1 + README.md | 38 +- docs/advance.md | 4 +- docs/get-started.md | 18 +- docs/inline-editing.md | 2 +- docs/selection.md | 4 +- package.json | 14 +- src/BaseTable.js | 34 +- src/utils.js | 13 +- types/index.d.ts | 2 +- website/.eslintignore | 2 +- website/README.md | 8 +- website/gatsby-config.js | 2 +- website/gatsby-node.js | 9 +- website/package.json | 10 +- website/src/components/Header.js | 4 +- website/src/components/Page.js | 2 +- website/src/pages/index.js | 2 +- website/src/utils/baseScope.js | 6 +- website/yarn.lock | 12451 ++++++++++++++++------------- yarn.lock | 1017 ++- 21 files changed, 7987 insertions(+), 5656 deletions(-) create mode 100644 .python-version diff --git a/.python-version b/.python-version new file mode 100644 index 00000000..a6164926 --- /dev/null +++ b/.python-version @@ -0,0 +1 @@ +2.7.18 diff --git a/README.md b/README.md index b55c3cd6..5540d9f9 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,31 @@ -# react-base-table +# react-context-table BaseTable is a react table component to display large datasets with high performance and flexibility - - - - + + + + ## Install ```bash # npm -npm install react-base-table --save +npm install react-context-table --save # yarn -yarn add react-base-table +yarn add react-context-table ``` ## Usage ```js -import BaseTable, { Column } from 'react-base-table' -import 'react-base-table/styles.css' -// Important: if you fail to import react-base-table/styles.css then +import BaseTable, { Column } from 'react-context-table' +import 'react-context-table/styles.css' +// Important: if you fail to import react-context-table/styles.css then // BaseTable will not render as advertised in the included examples. // For advanced styling see link below: -// https://github.com/Autodesk/react-base-table#advance +// https://github.com/Autodesk/react-context-table#advance ... @@ -35,7 +35,7 @@ import 'react-base-table/styles.css' ... ``` -Learn more at the [website](https://autodesk.github.io/react-base-table/) +Learn more at the [website](https://autodesk.github.io/react-context-table/) ### unique key @@ -45,14 +45,14 @@ Make sure each item in `data` is unique by a key, the default key is `id`, you c ### size -`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-base-table/examples/flex-column) example +`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-context-table/examples/flex-column) example `width` and `height`(or `maxHeight`) are required to display the table properly -In the [examples](https://autodesk.github.io/react-base-table/examples) +In the [examples](https://autodesk.github.io/react-context-table/examples) we are using a wrapper `const Table = props => ` to do that -If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-base-table/examples/auto-resize) example +If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-context-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-context-table/examples/auto-resize) example ### closure problem in custom renderers @@ -62,13 +62,13 @@ It's recommended to inject the external data in column definition to solve the p Things getting worse with the introduction of React hooks, we use primitive state instead of `this.state`, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via `useCallback` or `useMemo`, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set `ignoreFunctionInColumnCompare` to `false` which is introduced since `v1.11.0` -Here is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate +Here is an [example](https://autodesk.github.io/react-context-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate ## Browser Support `BaseTable` is well tested on all modern browsers and IE11. _You have to polyfill `Array.prototype.findIndex` to make it works on IE_ -**The [examples](https://autodesk.github.io/react-base-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.** +**The [examples](https://autodesk.github.io/react-context-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.** ## Advance @@ -90,7 +90,7 @@ $column-padding: 7.5px; $show-frozen-rows-shadow: false; $show-frozen-columns-shadow: true; -@import '~react-base-table/es/_BaseTable.scss'; +@import '~react-context-table/es/_BaseTable.scss'; .#{$table-prefix} { &:not(.#{$table-prefix}--show-left-shadow) { @@ -128,7 +128,7 @@ You can write your own styles from scratch or use CSS-in-JS solutions to achieve ### Custom renderers & props -There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-base-table/api) and [examples](https://autodesk.github.io/react-base-table/examples) for more details +There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-context-table/api) and [examples](https://autodesk.github.io/react-context-table/examples) for more details ### Example diff --git a/docs/advance.md b/docs/advance.md index f26eb307..8edb6251 100644 --- a/docs/advance.md +++ b/docs/advance.md @@ -18,7 +18,7 @@ $column-padding: 7.5px; $show-frozen-rows-shadow: false; $show-frozen-columns-shadow: true; -@import '~react-base-table/es/_BaseTable.scss'; +@import '~react-context-table/es/_BaseTable.scss'; .#{$table-prefix} { &:not(.#{$table-prefix}--show-left-shadow) { @@ -56,4 +56,4 @@ You can write your own styles from scratch or use CSS-in-JS solutions to achieve ## Custom renderers & props -There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-base-table/api) and [examples](https://autodesk.github.io/react-base-table/examples) for more details +There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-context-table/api) and [examples](https://autodesk.github.io/react-context-table/examples) for more details diff --git a/docs/get-started.md b/docs/get-started.md index c619e3db..338ee8bf 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -6,17 +6,17 @@ BaseTable is a react table component to display large data set with high perform ```bash # npm -npm install react-base-table --save +npm install react-context-table --save # yarn -yarn add react-base-table +yarn add react-context-table ``` ## Usage ```js -import BaseTable, { Column } from 'react-base-table' -import 'react-base-table/styles.css' +import BaseTable, { Column } from 'react-context-table' +import 'react-context-table/styles.css' ... @@ -35,14 +35,14 @@ Make sure each item in `data` is unique by a key, the default key is `id`, you c ### size -`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-base-table/examples/flex-column) example +`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-context-table/examples/flex-column) example `width` and `height`(or `maxHeight`) are required to display the table properly -In the [examples](https://autodesk.github.io/react-base-table/examples) +In the [examples](https://autodesk.github.io/react-context-table/examples) we are using a wrapper `const Table = props => ` to do that -If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-base-table/examples/auto-resize) example +If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-context-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-context-table/examples/auto-resize) example ### closure problem in custom renderers @@ -52,13 +52,13 @@ It's recommended to inject the external data in column definition to solve the p Things getting worse with the introduction of React hooks, we use primitive state instead of `this.state`, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via `useCallback` or `useMemo`, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set `ignoreFunctionInColumnCompare` to `false` which is introduced since `v1.11.0` -Here is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate +Here is an [example](https://autodesk.github.io/react-context-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate ## Browser Support `BaseTable` is well tested on all modern browsers and IE11. _You have to polyfill `Array.prototype.findIndex` to make it works on IE_ -**The [examples](https://autodesk.github.io/react-base-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.** +**The [examples](https://autodesk.github.io/react-context-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.** ## Playground diff --git a/docs/inline-editing.md b/docs/inline-editing.md index 38aec7a2..46de3765 100644 --- a/docs/inline-editing.md +++ b/docs/inline-editing.md @@ -123,4 +123,4 @@ export default () => ( ## Example -Check the live example [here](https://autodesk.github.io/react-base-table/examples/inline-editing). +Check the live example [here](https://autodesk.github.io/react-context-table/examples/inline-editing). diff --git a/docs/selection.md b/docs/selection.md index ee643ea1..d3d7a707 100644 --- a/docs/selection.md +++ b/docs/selection.md @@ -1,6 +1,6 @@ # Selection -There is a [PR](https://github.com/Autodesk/react-base-table/pull/39) to add selection feature, but I don't want to merge it with [good reasons](https://github.com/Autodesk/react-base-table/pull/39#pullrequestreview-241987600), so I'd like to share a recipe here for reference +There is a [PR](https://github.com/Autodesk/react-context-table/pull/39) to add selection feature, but I don't want to merge it with [good reasons](https://github.com/Autodesk/react-context-table/pull/39#pullrequestreview-241987600), so I'd like to share a recipe here for reference ## Recipe @@ -155,4 +155,4 @@ SelectableTable.defaultProps = { ## Example -Check the live example [here](https://autodesk.github.io/react-base-table/examples/selection). +Check the live example [here](https://autodesk.github.io/react-context-table/examples/selection). diff --git a/package.json b/package.json index 8a98e7da..bb7be0a3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-base-table", - "version": "1.13.2", + "name": "react-context-table", + "version": "1.0.0", "description": "a react table component to display large data set with high performance and flexibility", "main": "lib/index.js", "module": "es/index.js", @@ -15,7 +15,7 @@ "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/Autodesk/react-base-table.git" + "url": "https://github.com/yuennx/react-base-table.git" }, "scripts": { "start": "cd website && npm start", @@ -82,13 +82,17 @@ "jest": "^23.5.0", "lerna": "^3.2.1", "lint-staged": "^7.2.2", - "node-sass": "^4.9.3", + "node-sass": "^7.0.1", "prettier": "^1.14.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-test-renderer": "^17.0.2", "rimraf": "^2.6.2" }, + "resolutions": { + "remark-mdx": "2.0.0-next.4", + "remark-mdxjs": "2.0.0-next.4" + }, "jest": { "roots": [ "/src" @@ -101,4 +105,4 @@ "/node_modules/" ] } -} +} \ No newline at end of file diff --git a/src/BaseTable.js b/src/BaseTable.js index 93f574fd..10fa764a 100644 --- a/src/BaseTable.js +++ b/src/BaseTable.js @@ -29,6 +29,7 @@ import { throttle, debounce, noop, + getRowKey, } from './utils'; const getColumns = memoize((columns, children) => columns || normalizeColumns(children)); @@ -317,10 +318,15 @@ class BaseTable extends React.PureComponent { renderExpandIcon({ rowData, rowIndex, depth, onExpand }) { const { rowKey, expandColumnKey, expandIconProps } = this.props; + const _rowKey = getRowKey({ + rowData, + rowIndex, + rowKey, + }); if (!expandColumnKey) return null; const expandable = rowIndex >= 0 && hasChildren(rowData); - const expanded = rowIndex >= 0 && this.getExpandedRowKeys().indexOf(rowData[rowKey]) >= 0; + const expanded = rowIndex >= 0 && this.getExpandedRowKeys().indexOf(_rowKey) >= 0; const extraProps = callOrReturn(expandIconProps, { rowData, rowIndex, depth, expandable, expanded }); const ExpandIcon = this._getComponent('ExpandIcon'); @@ -332,7 +338,11 @@ class BaseTable extends React.PureComponent { const rowClass = callOrReturn(rowClassName, { columns, rowData, rowIndex }); const extraProps = callOrReturn(this.props.rowProps, { columns, rowData, rowIndex }); - const rowKey = rowData[this.props.rowKey]; + const rowKey = getRowKey({ + rowData, + rowIndex, + rowKey: this.props.rowKey, + }); const depth = this._depthMap[rowKey] || 0; const className = cn(this._prefixClass('row'), rowClass, { @@ -374,10 +384,15 @@ class BaseTable extends React.PureComponent { } renderRowCell({ isScrolling, columns, column, columnIndex, rowData, rowIndex, expandIcon }) { + const rowKey = getRowKey({ + rowData, + rowIndex, + rowKey: this.props.rowKey, + }); if (column[ColumnManager.PlaceholderKey]) { return (
@@ -402,10 +417,11 @@ class BaseTable extends React.PureComponent { const extraProps = callOrReturn(this.props.cellProps, { columns, column, columnIndex, rowData, rowIndex }); const { tagName, ...rest } = extraProps || {}; const Tag = tagName || 'div'; + return ( = 0) expandedRowKeys.push(rowKey); @@ -1090,7 +1112,7 @@ BaseTable.propTypes = { /** * The key field of each data item */ - rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired, /** * The width of the table */ diff --git a/src/utils.js b/src/utils.js index 94cacc6e..c4ff7ac5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,4 +1,5 @@ import React from 'react'; +import { isFunction } from 'lodash'; export function renderElement(renderer, props) { if (React.isValidElement(renderer)) { @@ -98,6 +99,10 @@ export function unflatten(array, rootId = null, dataKey = 'id', parentKey = 'par return tree; } +export function getRowKey({ rowData, rowIndex, rowKey }) { + return isFunction(rowKey) ? rowKey(rowData, rowIndex) : rowData[rowKey]; +} + export function flattenOnKeys(tree, keys, depthMap = {}, dataKey = 'id') { if (!keys || !keys.length) return tree; @@ -106,14 +111,18 @@ export function flattenOnKeys(tree, keys, depthMap = {}, dataKey = 'id') { keys.forEach(x => keysSet.add(x)); let stack = [].concat(tree); - stack.forEach(x => (depthMap[x[dataKey]] = 0)); + stack.forEach((x, index) => (depthMap[getRowKey({ rowData: x, rowIndex: index, rowKey: dataKey })] = 0)); while (stack.length > 0) { const item = stack.shift(); array.push(item); if (keysSet.has(item[dataKey]) && Array.isArray(item.children) && item.children.length > 0) { stack = [].concat(item.children, stack); - item.children.forEach(x => (depthMap[x[dataKey]] = depthMap[item[dataKey]] + 1)); + item.children.forEach( + (x, index) => + (depthMap[getRowKey({ rowData: x, rowIndex: index, rowKey: dataKey })] = + depthMap[getRowKey({ rowData: item, rowIndex: index, rowKey: dataKey })] + 1) + ); } } diff --git a/types/index.d.ts b/types/index.d.ts index bbadb93f..42b6b391 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,4 +1,4 @@ -declare module 'react-base-table' { +declare module 'react-context-table' { export type SortOrder = 'asc' | 'desc'; export type Alignment = 'left' | 'right' | 'center'; diff --git a/website/.eslintignore b/website/.eslintignore index 4a3b0076..67fb542b 100644 --- a/website/.eslintignore +++ b/website/.eslintignore @@ -1,3 +1,3 @@ src/examples/ -react-base-table/ +react-context-table/ diff --git a/website/README.md b/website/README.md index 5a0c5d03..f3098def 100644 --- a/website/README.md +++ b/website/README.md @@ -1,12 +1,12 @@ -# react-base-table +# react-context-table -[BaseTable website](https://autodesk.github.io/react-base-table/) +[BaseTable website](https://autodesk.github.io/react-context-table/) ## Start ```bash -git clone https://github.com/Autodesk/react-base-table.git -cd react-base-table +git clone https://github.com/Autodesk/react-context-table.git +cd react-context-table cd website yarn # install dependencies ``` diff --git a/website/gatsby-config.js b/website/gatsby-config.js index 86dc6774..45ada2d3 100644 --- a/website/gatsby-config.js +++ b/website/gatsby-config.js @@ -1,5 +1,5 @@ module.exports = { - pathPrefix: '/react-base-table', + pathPrefix: '/react-context-table', siteMetadata: { title: 'BaseTable', description: 'BaseTable website', diff --git a/website/gatsby-node.js b/website/gatsby-node.js index 671b5923..be1a9600 100644 --- a/website/gatsby-node.js +++ b/website/gatsby-node.js @@ -12,9 +12,12 @@ exports.onCreateWebpackConfig = ({ stage, getConfig, actions }) => { components: path.resolve(__dirname, 'src/components'), utils: path.resolve(__dirname, 'src/utils'), siteConfig: path.resolve(__dirname, 'siteConfig'), - 'react-base-table/package.json': path.resolve(__dirname, '../package.json'), - 'react-base-table/styles.css': path.resolve(__dirname, '../styles.css'), - 'react-base-table': path.resolve(__dirname, '../src'), + 'react-context-table/package.json': path.resolve( + __dirname, + '../package.json' + ), + 'react-context-table/styles.css': path.resolve(__dirname, '../styles.css'), + 'react-context-table': path.resolve(__dirname, '../src'), } actions.replaceWebpackConfig(config) diff --git a/website/package.json b/website/package.json index 8e9fb8a5..db4e9284 100644 --- a/website/package.json +++ b/website/package.json @@ -1,9 +1,9 @@ { - "name": "react-base-table-website", + "name": "react-context-table-website", "description": "BaseTable website", "version": "1.0.0", "author": "Neo Nie ", - "homepage": "https://autodesk.github.io/react-base-table/", + "homepage": "https://autodesk.github.io/react-context-table/", "dependencies": { "classnames": "^2.2.6", "clipboard": "^2.0.4", @@ -60,6 +60,10 @@ "format": "prettier --write 'src/**/*.{js,css}'", "test": "echo \"Error: no test specified\" && exit 1" }, + "resolutions": { + "remark-mdx": "2.0.0-next.4", + "remark-mdxjs": "2.0.0-next.4" + }, "lint-staged": { "*.js": [ "prettier --write", @@ -70,4 +74,4 @@ "git add" ] } -} +} \ No newline at end of file diff --git a/website/src/components/Header.js b/website/src/components/Header.js index ac7b11d4..f75596ff 100644 --- a/website/src/components/Header.js +++ b/website/src/components/Header.js @@ -1,7 +1,7 @@ import React from 'react' import { Link } from 'gatsby' import styled from 'styled-components' -import pkg from 'react-base-table/package.json' +import pkg from 'react-context-table/package.json' import linkIcon from 'assets/mark-github.svg' @@ -79,7 +79,7 @@ const Header = ({ pathname }) => {