diff --git a/CHANGELOG.md b/CHANGELOG.md index e5f828db..58ab2be2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,41 @@ ## NEXT VERSION +## v1.10.4 (2020-07-02) + +- fix: flicker on expanding in dynamic mode + +## v1.10.3 (2020-06-30) + +- fix: horizontal scrollbar in flex mode with dynamic row height +- chore: tweak row height measurement + +## v1.10.2 (2020-06-26) + +- fix: regression of expansion with frozen columns +- fix: dynamic rowHeight is not updated when `data` or `columns` changed + +## v1.10.1 (2020-06-24) + +- fix: dynamic rowHeight is not calculated correctly with frozen columns +- fix: dynamic rowHeight is not updated when resizing column + +## v1.10.0 (2020-06-22) + +- feat: add `estimatedRowHeight` to support dynamic row height + +## v1.9.4 (2020-06-22) + +- chore: loosen prop type check for `data` + +## v1.9.3 (2020-05-26) + +- fix: wrong description for Column props + +## v1.9.2 (2020-04-22) + +- fix: frozen data not shown with empty data + ## v1.9.1 (2019-10-17) - reverted #80, now custom renderer doesn't support top level hooks, see #109 diff --git a/README.md b/README.md index 69bafc19..c8bc6979 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,8 @@ We are using a advanced table component based on `BaseTable` internally, with mu ![AdvanceTable](screenshots/advance-table.png) +[In real products](https://blogs.autodesk.com/bim360-release-notes/2019/11/18/bim-360-cost-management-update-november-2019/) + ## Contributing Please check [guidelines](CONTRIBUTING.md) for more details diff --git a/package.json b/package.json index 0edaba35..113a4e48 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-base-table", - "version": "1.9.1", + "version": "1.10.4", "description": "a react table component to display large data set with high performance and flexibility", "main": "dist/index.js", "module": "dist/react-base-table.esm.js", diff --git a/src/BaseTable.tsx b/src/BaseTable.tsx index d540d731..8dda35dd 100644 --- a/src/BaseTable.tsx +++ b/src/BaseTable.tsx @@ -9,7 +9,7 @@ import TableHeaderRow from './TableHeaderRow'; import TableRow, { RowKey, RowRendererProps } from './TableRow'; import TableHeaderCell, { TableHeaderCellProps } from './TableHeaderCell'; import TableCell, { TableCellProps } from './TableCell'; -import Column, { Alignment, FrozenDirection, ColumnProps } from './Column'; +import Column, { Alignment, FrozenDirection, ColumnProps, FrozenDirectionValue } from './Column'; import SortOrder, { SortOrderValue } from './SortOrder'; import ExpandIcon, { ExpandIconProps } from './ExpandIcon'; import SortIndicator, { SortIndicatorProps } from './SortIndicator'; @@ -26,6 +26,7 @@ import { cloneArray, getValue, throttle, + debounce, noop, } from './utils'; @@ -118,6 +119,10 @@ export interface BaseTableProps { * The height of each table row */ rowHeight: number; + /** + * Estimated row height, the real height will be measure dynamically according to the content + */ + estimatedRowHeight?: number; /** * The height of the table header, set to 0 to hide the header, could be an array to render multi headers. */ @@ -388,11 +393,11 @@ export default class BaseTable extends React.PureComponent any; _resetColumnManager: (columns: any, fixed: any) => void; - _depthMap: any; + _depthMap: Record; _scroll: { scrollLeft: number; scrollTop: number }; _scrollHeight: number; _lastScannedRowIndex: number; @@ -625,6 +634,15 @@ export default class BaseTable extends React.PureComponent; + _rowHeightMapBuffer: Record; + _mainRowHeightMap: Record; + _leftRowHeightMap: Record; + _rightRowHeightMap: Record; + _updateRowHeights: () => void; + tableNode: HTMLDivElement | null = null; table: GridTable | null = null; leftTable: GridTable | null = null; @@ -664,6 +682,8 @@ export default class BaseTable extends React.PureComponent { this.columnManager.reset(columns, fixed); + + if (this.props.estimatedRowHeight && fixed) { + if (!this.columnManager.hasLeftFrozenColumns()) { + this._leftRowHeightMap = {}; + } + if (!this.columnManager.hasRightFrozenColumns()) { + this._rightRowHeightMap = {}; + } + } }, isObjectEqual); + this._isResetting = false; + this._resetIndex = null; + this._rowHeightMap = {}; + this._rowHeightMapBuffer = {}; + this._mainRowHeightMap = {}; + this._leftRowHeightMap = {}; + this._rightRowHeightMap = {}; + this._getRowHeight = this._getRowHeight.bind(this); + this._updateRowHeights = debounce(() => { + this._isResetting = true; + this._rowHeightMap = { ...this._rowHeightMap, ...this._rowHeightMapBuffer }; + this.resetAfterRowIndex(this._resetIndex || 0, false); + this._rowHeightMapBuffer = {}; + this._resetIndex = null; + this.forceUpdateTable(); + this._isResetting = false; + }, 0); + this._scroll = { scrollLeft: 0, scrollTop: 0 }; this._scrollHeight = 0; this._lastScannedRowIndex = -1; @@ -725,7 +772,12 @@ export default class BaseTable extends React.PureComponent= 0 ? estimatedRowHeight : undefined, + getIsResetting: this._getIsResetting, cellRenderer: this.renderRowCell, expandIconRenderer: this.renderExpandIcon, onRowExpand: this._handleRowExpand, // for fixed table, we need to sync the hover state across the inner tables - onRowHover: this.columnManager.hasFrozenColumns() ? this._handleRowHover : null, + onRowHover: hasFrozenColumns ? this._handleRowHover : null, + onRowHeightChange: hasFrozenColumns ? this._handleFrozenRowHeightChange : this._handleRowHeightChange, }; return ; @@ -1024,7 +1092,7 @@ export default class BaseTable extends React.PureComponent @@ -1193,14 +1267,14 @@ export default class BaseTable extends React.PureComponent 0, [`${classPrefix}--has-frozen-columns`]: this.columnManager.hasFrozenColumns(), [`${classPrefix}--disabled`]: disabled, + [`${classPrefix}--dynamic`]: !!estimatedRowHeight, }); return (
this._setContainerRef(r)} className={cls} style={containerStyle}> @@ -1279,6 +1354,16 @@ export default class BaseTable extends React.PureComponent lastScrollTop) this._maybeCallOnEndReached(); } @@ -1478,4 +1563,43 @@ export default class BaseTable extends React.PureComponent rowIndex) this._resetIndex = rowIndex; + + this._rowHeightMapBuffer[rowKey] = size; + this._updateRowHeights(); + } + + _resetRowHeightCache() { + if (!this.props.estimatedRowHeight) return; + + this._resetIndex = null; + this._rowHeightMapBuffer = {}; + this._rowHeightMap = {}; + this._mainRowHeightMap = {}; + this._leftRowHeightMap = {}; + this._rightRowHeightMap = {}; + } } diff --git a/src/Column.tsx b/src/Column.tsx index 103454d6..c03117a2 100644 --- a/src/Column.tsx +++ b/src/Column.tsx @@ -97,11 +97,11 @@ export interface ColumnProps { */ hidden?: boolean; /** - * Whether the column is resizable, defaults to true + * Whether the column is resizable, defaults to false */ resizable?: boolean; /** - * Whether the column is sortable, defaults to true + * Whether the column is sortable, defaults to false */ sortable?: boolean; /** diff --git a/src/GridTable.tsx b/src/GridTable.tsx index a4becf44..d0847f31 100644 --- a/src/GridTable.tsx +++ b/src/GridTable.tsx @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import cn from 'classnames'; -import { FixedSizeGrid as Grid, FixedSizeGridProps, GridOnItemsRenderedProps, Align } from 'react-window'; +import { FixedSizeGrid, VariableSizeGrid, FixedSizeGridProps, GridOnItemsRenderedProps, Align } from 'react-window'; +import memoize from 'memoize-one'; import Header from './TableHeader'; import { fn } from './type-utils'; @@ -12,12 +13,16 @@ export type PickProps = Pick< 'className' | 'width' | 'height' | 'rowHeight' | 'useIsScrolling' | 'overscanRowCount' | 'style' | 'onScroll' >; +export type Grid = FixedSizeGrid | VariableSizeGrid | null; + export interface GridTableProps extends PickProps { containerStyle?: React.CSSProperties; classPrefix?: string; headerHeight: number | number[]; headerWidth: number; bodyWidth: number; + estimatedRowHeight?: number; + getRowHeight?: (rowIndex: number) => number; columns: T[]; data: any[]; rowKey: RowKey; @@ -49,10 +54,12 @@ export default class GridTable extends React.PureComponent extends React.PureComponent>) { super(props); this._setHeaderRef = this._setHeaderRef.bind(this); this._setBodyRef = this._setBodyRef.bind(this); + this._setInnerRef = this._setInnerRef.bind(this); this._itemKey = this._itemKey.bind(this); + this._getBodyWidth = this._getBodyWidth.bind(this); this._handleItemsRendered = this._handleItemsRendered.bind(this); + // @ts-ignore + this._resetColumnWidthCache = memoize(bodyWidth => { + if (!this.props.estimatedRowHeight) return; + this.bodyRef && (this.bodyRef as VariableSizeGrid).resetAfterColumnIndex(0, false); + }); this.renderRow = this.renderRow.bind(this); } + resetAfterRowIndex(rowIndex = 0, shouldForceUpdate: boolean) { + if (!this.props.estimatedRowHeight) return; + this.bodyRef && (this.bodyRef as VariableSizeGrid).resetAfterRowIndex(rowIndex, shouldForceUpdate); + } + forceUpdateTable() { this.headerRef && this.headerRef.forceUpdate(); this.bodyRef && this.bodyRef.forceUpdate(); @@ -101,6 +122,15 @@ export default class GridTable extends React.PureComponent extends React.PureComponent extends React.PureComponent extends React.PureComponent extends React.PureComponent extends React.PureComponent { rowIndex: number; isScrolling?: boolean; className?: string; - style?: React.CSSProperties; + style: React.CSSProperties; rowKey?: RowKey; expandColumnKey?: string; depth?: number; @@ -29,15 +29,22 @@ export interface TableRowProps { rowRenderer?: Parameters[0]; cellRenderer?: fn; expandIconRenderer?: fn; + estimatedRowHeight?: number; + getIsResetting: () => boolean; onRowHover?: fn; onRowExpand?: fn; + onRowHeightChange?: fn; tagName: ReactElementType; } +interface TableRowState { + measured: boolean; +} + /** * Row component for BaseTable */ -class TableRow extends React.PureComponent> { +class TableRow extends React.PureComponent, TableRowState> { public static ofType() { return TableRow as new (props: TableRowProps) => TableRow; } @@ -65,11 +72,36 @@ class TableRow extends React.PureComponent> { tagName: PropTypes.elementType, }; + ref: Element | null = null; + constructor(props: Readonly) { super(props); + + this.state = { + measured: false, + }; + + this._setRef = this._setRef.bind(this); this._handleExpand = this._handleExpand.bind(this); } + componentDidMount() { + this.props.estimatedRowHeight && this.props.rowIndex >= 0 && this._measureHeight(true); + } + + componentDidUpdate(_: TableRowProps, prevState: TableRowState) { + if ( + this.props.estimatedRowHeight && + this.props.rowIndex >= 0 && + // should not re-measure if it's updated after measured and reset + !this.props.getIsResetting() && + this.state.measured && + prevState.measured + ) { + this.setState({ measured: false }, () => this._measureHeight()); + } + } + render() { /* eslint-disable no-unused-vars */ const { @@ -82,14 +114,17 @@ class TableRow extends React.PureComponent> { expandColumnKey, depth, rowEventHandlers, + estimatedRowHeight, rowRenderer, cellRenderer, expandIconRenderer, tagName, // omit the following from rest rowKey, + getIsResetting, onRowHover, onRowExpand, + onRowHeightChange, ...rest } = this.props; /* eslint-enable no-unused-vars */ @@ -114,6 +149,22 @@ class TableRow extends React.PureComponent> { } const eventHandlers = this._getEventHandlers(rowEventHandlers); + + if (estimatedRowHeight && rowIndex >= 0) { + const { height, ...otherStyles } = style; + return ( + + {cells} + + ); + } + return ( {cells} @@ -121,11 +172,28 @@ class TableRow extends React.PureComponent> { ); } - _handleExpand(expanded: any) { + _setRef(ref: Element | null) { + this.ref = ref; + } + + _handleExpand(expanded: boolean) { const { onRowExpand, rowData, rowIndex, rowKey } = this.props; onRowExpand && onRowExpand({ expanded, rowData, rowIndex, rowKey }); } + _measureHeight(initialMeasure?: boolean) { + if (!this.ref) return; + + const { style, rowKey, onRowHeightChange, rowIndex, columns } = this.props; + const height = this.ref.getBoundingClientRect().height; + this.setState({ measured: true }, () => { + if (initialMeasure || height !== style.height) + onRowHeightChange && + // @ts-ignore + onRowHeightChange(rowKey, height, rowIndex, columns[0] && !columns[0].__placeholder__ && columns[0].frozen); + }); + } + _getEventHandlers(handlers: any = {}) { const { rowData, rowIndex, rowKey, onRowHover } = this.props; const eventHandlers: any = {}; @@ -168,32 +236,4 @@ class TableRow extends React.PureComponent> { } } -/** - * Row component for BaseTable - */ -// class PrevTableRow extends React.PureComponent> {} - -// TableRow.defaultProps = { -// tagName: 'div', -// }; - -// TableRow.propTypes = { -// isScrolling: PropTypes.bool, -// className: PropTypes.string, -// style: PropTypes.object, -// columns: PropTypes.arrayOf(PropTypes.object).isRequired, -// rowData: PropTypes.object.isRequired, -// rowIndex: PropTypes.number.isRequired, -// rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), -// expandColumnKey: PropTypes.string, -// depth: PropTypes.number, -// rowEventHandlers: PropTypes.object, -// rowRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), -// cellRenderer: PropTypes.func, -// expandIconRenderer: PropTypes.func, -// onRowHover: PropTypes.func, -// onRowExpand: PropTypes.func, -// tagName: PropTypes.elementType, -// }; - export default TableRow; diff --git a/src/_BaseTable.scss b/src/_BaseTable.scss index 8984098d..f859d451 100644 --- a/src/_BaseTable.scss +++ b/src/_BaseTable.scss @@ -60,6 +60,22 @@ $table-prefix: BaseTable !default; pointer-events: none; } + &--dynamic { + .#{$table-prefix}__row { + overflow: hidden; + align-items: stretch; + } + } + + &:not(.#{$table-prefix}--dynamic), + .#{$table-prefix}__row--frozen { + .#{$table-prefix}__row-cell-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + @if ($show-frozen-rows-shadow) { &--has-frozen-rows { .#{$table-prefix}__header { @@ -185,12 +201,6 @@ $table-prefix: BaseTable !default; justify-content: flex-end; text-align: right; } - - &-text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } } &__header-cell { diff --git a/src/utils.ts b/src/utils.ts index 3f505bb7..e0823715 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -184,7 +184,18 @@ export function getValue(object: any, path: string, defaultValue?: any) { return object; } -// copied from https://30secondsofcode.org/function#throttle +// copied from https://www.30secondsofcode.org/js/s/debounce +export function debounce(fn: T, ms: number): T; +export function debounce(fn: T, ms: number): (...args: Parameters) => void; +export function debounce(fn: Function, ms: number = 0): Function { + let timeoutId: number; + return function(...args: any) { + clearTimeout(timeoutId); + timeoutId = setTimeout((() => fn(...args)) as TimerHandler, ms); + }; +} + +// copied from https://www.30secondsofcode.org/js/s/throttle export function throttle(fn: T, wait: number): T; export function throttle(fn: T, wait: number): (...args: Parameters) => void; export function throttle(fn: Function, wait: number): Function { @@ -192,7 +203,7 @@ export function throttle(fn: Function, wait: number): Function { let lastFn: number; let lastTime: number; - return (...args: any) => { + return function(...args: any) { if (!inThrottle) { fn(...args); lastTime = Date.now(); diff --git a/website/gatsby-config.js b/website/gatsby-config.js index 86dc6774..927b7d35 100644 --- a/website/gatsby-config.js +++ b/website/gatsby-config.js @@ -31,6 +31,7 @@ module.exports = { color: 'tomato', }, }, + 'gatsby-plugin-typescript', 'gatsby-plugin-react-helmet', 'gatsby-plugin-remove-trailing-slashes', 'gatsby-plugin-catch-links', diff --git a/website/package.json b/website/package.json index 5f4c7c21..449f2574 100644 --- a/website/package.json +++ b/website/package.json @@ -7,6 +7,7 @@ "dependencies": { "classnames": "^2.2.6", "clipboard": "^2.0.4", + "faker": "^4.1.0", "gatsby": "^2.13.1", "gatsby-plugin-catch-links": "^2.1.0", "gatsby-plugin-google-analytics": "^2.1.1", @@ -16,6 +17,7 @@ "gatsby-plugin-react-helmet": "^3.1.0", "gatsby-plugin-remove-trailing-slashes": "^2.1.0", "gatsby-plugin-styled-components": "^3.1.0", + "gatsby-plugin-typescript": "^2.4.14", "gatsby-remark-copy-linked-files": "^2.1.0", "gatsby-source-filesystem": "^2.1.2", "gatsby-transformer-code": "^0.1.0", diff --git a/website/siteConfig.js b/website/siteConfig.js index aa3cafd0..40e159b8 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -52,6 +52,14 @@ module.exports = { title: 'JSX Column', path: '/examples/jsx-column', }, + { + title: 'Custom Cell', + path: '/examples/custom-cell', + }, + { + title: 'Dynamic Row Height', + path: '/examples/dynamic-row-heights', + }, { title: 'Tooltip Cell', path: '/examples/tooltip-cell', @@ -96,6 +104,10 @@ module.exports = { title: 'Draggable Rows', path: '/examples/draggable-rows', }, + { + title: 'Draggable Rows with frozen columns', + path: '/examples/draggable-rows-frozen', + }, { title: 'Multi Header', path: '/examples/multi-header', @@ -180,6 +192,10 @@ module.exports = { title: 'Expand - Controlled', path: '/examples/expand-controlled', }, + { + title: 'Detail View', + path: '/examples/detail-view', + }, { title: 'Use IsScrolling', path: '/examples/is-scrolling', diff --git a/website/src/examples/custom-cell.js b/website/src/examples/custom-cell.js new file mode 100644 index 00000000..159e4213 --- /dev/null +++ b/website/src/examples/custom-cell.js @@ -0,0 +1,186 @@ +const dataGenerator = () => ({ + id: faker.random.uuid(), + name: faker.name.findName(), + gender: faker.random.boolean() ? 'male' : 'female', + score: { + math: faker.random.number(70) + 30, + }, + birthday: faker.date.between(1995, 2005), + attachments: faker.random.number(5), + description: faker.lorem.sentence(), + email: faker.internet.email(), + country: faker.address.country(), + address: { + street: faker.address.streetAddress(), + city: faker.address.city(), + zipCode: faker.address.zipCode(), + }, +}) + +const GenderContainer = styled.div` + background-color: ${props => + props.gender === 'male' ? 'lightblue' : 'pink'}; + color: white; + border-radius: 3px; + width: 20px; + height: 20px; + font-size: 16px; + font-weight: bold; + line-height: 20px; + text-align: center; +` + +const Gender = ({ gender }) => ( + + {gender === 'male' ? '♂' : '♀'} + +) + +const Score = styled.span` + color: ${props => (props.score >= 60 ? 'green' : 'red')}; +` + +const Attachment = styled.div` + background-color: lightgray; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + border-radius: 4px; + color: gray; +` + +const defaultData = new Array(5000) + .fill(0) + .map(dataGenerator) + .sort((a, b) => (a.name > b.name ? 1 : -1)) + +const defaultSort = { key: 'name', order: SortOrder.ASC } + +export default class App extends React.Component { + state = { + data: defaultData, + sortBy: defaultSort, + } + + columns = [ + { + key: 'name', + title: 'Name', + dataKey: 'name', + width: 150, + resizable: true, + sortable: true, + frozen: Column.FrozenDirection.LEFT, + }, + { + key: 'score', + title: 'Score', + dataKey: 'score.math', + width: 60, + align: Column.Alignment.CENTER, + sortable: false, + }, + { + key: 'gender', + title: '♂♀', + dataKey: 'gender', + cellRenderer: ({ cellData: gender }) => , + width: 60, + align: Column.Alignment.CENTER, + sortable: true, + }, + { + key: 'birthday', + title: 'Birthday', + dataKey: 'birthday', + dataGetter: ({ column, rowData }) => + rowData[column.dataKey].toLocaleDateString(), + width: 100, + align: Column.Alignment.RIGHT, + sortable: true, + }, + { + key: 'attachments', + title: 'Attachments', + dataKey: 'attachments', + width: 60, + align: Column.Alignment.CENTER, + headerRenderer: () => ?, + cellRenderer: ({ cellData }) => {cellData}, + }, + { + key: 'description', + title: 'Description', + dataKey: 'description', + width: 200, + resizable: true, + sortable: true, + cellRenderer: ({ cellData }) => {cellData}, + }, + { + key: 'email', + title: 'Email', + dataKey: 'email', + width: 200, + resizable: true, + sortable: true, + }, + { + key: 'country', + title: 'Country', + dataKey: 'country', + width: 100, + resizable: true, + sortable: true, + }, + { + key: 'address', + title: 'Address', + dataKey: 'address.street', + width: 200, + resizable: true, + }, + { + key: 'action', + width: 100, + align: Column.Alignment.CENTER, + frozen: Column.FrozenDirection.RIGHT, + cellRenderer: ({ rowData }) => ( + + ), + }, + ] + + onColumnSort = sortBy => { + const order = sortBy.order === SortOrder.ASC ? 1 : -1 + const data = [...this.state.data] + data.sort((a, b) => (a[sortBy.key] > b[sortBy.key] ? order : -order)) + this.setState({ + sortBy, + data, + }) + } + + render() { + const { data, sortBy } = this.state + return ( + + ) + } +} diff --git a/website/src/examples/detail-view.js b/website/src/examples/detail-view.js new file mode 100644 index 00000000..e1fca0af --- /dev/null +++ b/website/src/examples/detail-view.js @@ -0,0 +1,44 @@ +const columns = generateColumns(10) +const data = generateData(columns, 200) + +data.forEach(x => { + x.children = [ + { + id: `${x.id}-detail`, + content: faker.lorem.paragraphs(), + }, + ] +}) + +const GlobalStyle = createGlobalStyle` + .BaseTable__row--depth-0 { + height: 50px; + } + + .BaseTable__row--depth-0 .BaseTable__row-cell-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +` + +const Row = styled.div` + padding: 15px; +` +const rowRenderer = ({ rowData, cells }) => { + if (rowData.content) return {rowData.content} + return cells +} + +export default () => ( + <> + +
+ +) diff --git a/website/src/examples/draggable-rows-frozen.js b/website/src/examples/draggable-rows-frozen.js new file mode 100644 index 00000000..3e1ea115 --- /dev/null +++ b/website/src/examples/draggable-rows-frozen.js @@ -0,0 +1,121 @@ +// import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc' +const { sortableContainer, sortableElement, sortableHandle } = ReactSortableHoc +const DraggableContainer = sortableContainer(({ children }) => children) +const DraggableElement = sortableElement(({ children }) => children) +const DraggableHandle = sortableHandle(({ children }) => children) + +const Handle = styled.div` + flex: none; + width: 7.5px; + height: 100%; + + &::before { + content: ''; + border-left: 4px dotted #ccc; + display: block; + height: 20px; + margin: 15px 3px; + } + + &:hover::before { + border-color: #888; + } +` + +const Row = ({ key, index, children, ...rest }) => { + // if the children's length is not equal the columns' length, then it's rendering row for frozen table + if (children.length !== 10) + return ( + +
+ + + + {children} +
+ + ) + + return
{children}
+} + +const rowProps = ({ rowIndex }) => ({ + tagName: Row, + index: rowIndex, +}) + +class DraggableTable extends React.PureComponent { + state = { + data: this.props.data, + } + + table = React.createRef() + + getContainer = () => { + // for fixed table with frozen columns, the drag handle is in the left frozen table + return this.table.current + .getDOMNode() + .querySelector('.BaseTable__table-frozen-left .BaseTable__body') + } + + getHelperContainer = () => { + return this.table.current + .getDOMNode() + .querySelector('.BaseTable__table-frozen-left') + } + + rowProps = args => { + // don't forget to passing the incoming rowProps + const extraProps = callOrReturn(this.props.rowProps) + return { + ...extraProps, + tagName: Row, + index: args.rowIndex, + } + } + + handleSortEnd = ({ oldIndex, newIndex }) => { + const data = [...this.state.data] + const [removed] = data.splice(oldIndex, 1) + data.splice(newIndex, 0, removed) + this.setState({ data }) + } + + render() { + return ( + +
+ + ) + } +} + +const Hint = styled.div` + font-size: 16px; + font-weight: 700; + color: #336699; + margin-bottom: 10px; +` + +const columns = generateColumns(10) +const data = generateData(columns, 200) +columns[0].minWidth = 150 +columns[0].frozen = true + +export default () => ( + <> + Drag the dots, only works in fixed mode(fixed=true) + + +) diff --git a/website/src/examples/draggable-rows.js b/website/src/examples/draggable-rows.js index 2320ec76..fdee3119 100644 --- a/website/src/examples/draggable-rows.js +++ b/website/src/examples/draggable-rows.js @@ -43,12 +43,14 @@ class DraggableTable extends React.PureComponent { data: this.props.data, } - getContainer() { - return document.querySelector('.BaseTable__body') + table = React.createRef() + + getContainer = () => { + return this.table.current.getDOMNode().querySelector('.BaseTable__body') } - getHelperContainer() { - return document.querySelector('.BaseTable__table') + getHelperContainer = () => { + return this.table.current.getDOMNode().querySelector('.BaseTable__table') } rowProps = args => { @@ -78,6 +80,7 @@ class DraggableTable extends React.PureComponent { >
({ + id: faker.random.uuid(), + name: faker.name.findName(), + gender: faker.random.boolean() ? 'male' : 'female', + score: { + math: faker.random.number(70) + 30, + }, + birthday: faker.date.between(1995, 2005), + attachments: faker.random.number(5), + description: faker.lorem.sentence(), + email: faker.internet.email(), + country: faker.address.country(), + address: { + street: faker.address.streetAddress(), + city: faker.address.city(), + zipCode: faker.address.zipCode(), + }, +}) + +const GenderContainer = styled.div` + background-color: ${props => + props.gender === 'male' ? 'lightblue' : 'pink'}; + color: white; + border-radius: 3px; + width: 20px; + height: 20px; + font-size: 16px; + font-weight: bold; + line-height: 20px; + text-align: center; +` + +const Gender = ({ gender }) => ( + + {gender === 'male' ? '♂' : '♀'} + +) + +const Score = styled.span` + color: ${props => (props.score >= 60 ? 'green' : 'red')}; +` + +const Attachment = styled.div` + background-color: lightgray; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + border-radius: 4px; + color: gray; +` + +const defaultData = new Array(5000) + .fill(0) + .map(dataGenerator) + .sort((a, b) => (a.name > b.name ? 1 : -1)) + +const defaultSort = { key: 'name', order: SortOrder.ASC } + +export default class App extends React.Component { + state = { + data: defaultData, + sortBy: defaultSort, + } + + columns = [ + { + key: 'name', + title: 'Name', + dataKey: 'name', + width: 150, + resizable: true, + sortable: true, + frozen: Column.FrozenDirection.LEFT, + }, + { + key: 'score', + title: 'Score', + dataKey: 'score.math', + width: 60, + align: Column.Alignment.CENTER, + sortable: false, + }, + { + key: 'gender', + title: '♂♀', + dataKey: 'gender', + cellRenderer: ({ cellData: gender }) => , + width: 60, + align: Column.Alignment.CENTER, + sortable: true, + }, + { + key: 'birthday', + title: 'Birthday', + dataKey: 'birthday', + dataGetter: ({ column, rowData }) => + rowData[column.dataKey].toLocaleDateString(), + width: 100, + align: Column.Alignment.RIGHT, + sortable: true, + }, + { + key: 'attachments', + title: 'Attachments', + dataKey: 'attachments', + width: 60, + align: Column.Alignment.CENTER, + headerRenderer: () => ?, + cellRenderer: ({ cellData }) => {cellData}, + }, + { + key: 'description', + title: 'Description', + dataKey: 'description', + width: 200, + resizable: true, + sortable: true, + }, + { + key: 'email', + title: 'Email', + dataKey: 'email', + width: 200, + resizable: true, + sortable: true, + }, + { + key: 'country', + title: 'Country', + dataKey: 'country', + width: 100, + resizable: true, + sortable: true, + }, + { + key: 'address', + title: 'Address', + dataKey: 'address.street', + width: 200, + resizable: true, + }, + { + key: 'action', + width: 100, + align: Column.Alignment.CENTER, + frozen: Column.FrozenDirection.RIGHT, + cellRenderer: ({ rowData }) => ( + + ), + }, + ] + + onColumnSort = sortBy => { + const order = sortBy.order === SortOrder.ASC ? 1 : -1 + const data = [...this.state.data] + data.sort((a, b) => (a[sortBy.key] > b[sortBy.key] ? order : -order)) + this.setState({ + sortBy, + data, + }) + } + + render() { + const { data, sortBy } = this.state + return ( + <> + +
+ + ) + } +} diff --git a/website/src/examples/multi-header.js b/website/src/examples/multi-header.js index ac821028..6b12ef25 100644 --- a/website/src/examples/multi-header.js +++ b/website/src/examples/multi-header.js @@ -1,4 +1,4 @@ -const columns = generateColumns(10) +const columns = generateColumns(15) const data = generateData(columns, 200) const GroupCell = styled.div` @@ -12,9 +12,12 @@ const GroupCell = styled.div` } ` -columns[0].frozen = Column.FrozenDirection.LEFT -columns[1].frozen = Column.FrozenDirection.LEFT -columns[2].frozen = Column.FrozenDirection.RIGHT +const fixedColumns = columns.map((column, columnIndex) => { + let frozen + if (columnIndex < 3) frozen = Column.FrozenDirection.LEFT + if (columnIndex > 12) frozen = Column.FrozenDirection.RIGHT + return { ...column, frozen, width: 100 } +}) const headerRenderer = ({ cells, columns, headerIndex }) => { if (headerIndex === 2) return cells @@ -34,7 +37,7 @@ const headerRenderer = ({ cells, columns, headerIndex }) => { if ( columnIndex === columns.length - 1 || nextColumn[Table.PlaceholderKey] || - idx === 3 - headerIndex + idx === (headerIndex === 0 ? 4 : 2) ) { groupCells.push( { export default () => (
( )) Table.Column = Column +Table.PlaceholderKey = BaseTable.PlaceholderKey export default { React, @@ -61,6 +63,7 @@ export default { ReactSortableHoc, ReactOverlays, ReactTexty, + faker, BaseTable, Column, diff --git a/website/yarn.lock b/website/yarn.lock index 18ea1c2e..54c2bbb8 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -9,6 +9,13 @@ dependencies: "@babel/highlight" "^7.0.0" +"@babel/code-frame@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a" + integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== + dependencies: + "@babel/highlight" "^7.10.4" + "@babel/core@^7.0.0", "@babel/core@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.5.tgz#17b2686ef0d6bc58f963dddd68ab669755582c30" @@ -29,6 +36,28 @@ semver "^5.4.1" source-map "^0.5.0" +"@babel/core@^7.10.3": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.4.tgz#780e8b83e496152f8dd7df63892b2e052bf1d51d" + integrity sha512-3A0tS0HWpy4XujGc7QtOIHTeNwUgWaZc/WuS5YQrfhU67jnVmsD6OGPc1AKHH0LJHQICGncy3+YUjIhVlfDdcA== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/generator" "^7.10.4" + "@babel/helper-module-transforms" "^7.10.4" + "@babel/helpers" "^7.10.4" + "@babel/parser" "^7.10.4" + "@babel/template" "^7.10.4" + "@babel/traverse" "^7.10.4" + "@babel/types" "^7.10.4" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.1" + json5 "^2.1.2" + lodash "^4.17.13" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + "@babel/generator@^7.0.0", "@babel/generator@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.5.tgz#873a7f936a3c89491b43536d12245b626664e3cf" @@ -40,6 +69,16 @@ source-map "^0.5.0" trim-right "^1.0.1" +"@babel/generator@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.4.tgz#e49eeed9fe114b62fa5b181856a43a5e32f5f243" + integrity sha512-toLIHUIAgcQygFZRAQcsLQV3CBuX6yOIru1kJk/qqqvcRmZrYe6WavZTSG+bB8MxhnL9YPf+pKQfuiP161q7ng== + dependencies: + "@babel/types" "^7.10.4" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -72,6 +111,18 @@ "@babel/traverse" "^7.4.4" "@babel/types" "^7.4.4" +"@babel/helper-create-class-features-plugin@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.4.tgz#2d4015d0136bd314103a70d84a7183e4b344a355" + integrity sha512-9raUiOsXPxzzLjCXeosApJItoMnX3uyT4QdM2UldffuGApNrF8e938MwNpDCK9CPoyxrEoCgT+hObJc3mZa6lQ== + dependencies: + "@babel/helper-function-name" "^7.10.4" + "@babel/helper-member-expression-to-functions" "^7.10.4" + "@babel/helper-optimise-call-expression" "^7.10.4" + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/helper-replace-supers" "^7.10.4" + "@babel/helper-split-export-declaration" "^7.10.4" + "@babel/helper-create-class-features-plugin@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.5.5.tgz#401f302c8ddbc0edd36f7c6b2887d8fa1122e5a4" @@ -110,6 +161,15 @@ "@babel/template" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-function-name@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a" + integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ== + dependencies: + "@babel/helper-get-function-arity" "^7.10.4" + "@babel/template" "^7.10.4" + "@babel/types" "^7.10.4" + "@babel/helper-get-function-arity@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3" @@ -117,6 +177,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-get-function-arity@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2" + integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A== + dependencies: + "@babel/types" "^7.10.4" + "@babel/helper-hoist-variables@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a" @@ -124,6 +191,13 @@ dependencies: "@babel/types" "^7.4.4" +"@babel/helper-member-expression-to-functions@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.4.tgz#7cd04b57dfcf82fce9aeae7d4e4452fa31b8c7c4" + integrity sha512-m5j85pK/KZhuSdM/8cHUABQTAslV47OjfIB9Cc7P+PvlAoBzdb79BGNfw8RhT5Mq3p+xGd0ZfAKixbrUZx0C7A== + dependencies: + "@babel/types" "^7.10.4" + "@babel/helper-member-expression-to-functions@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz#1fb5b8ec4453a93c439ee9fe3aeea4a84b76b590" @@ -138,6 +212,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-module-imports@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620" + integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw== + dependencies: + "@babel/types" "^7.10.4" + "@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a" @@ -150,6 +231,19 @@ "@babel/types" "^7.5.5" lodash "^4.17.13" +"@babel/helper-module-transforms@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.4.tgz#ca1f01fdb84e48c24d7506bb818c961f1da8805d" + integrity sha512-Er2FQX0oa3nV7eM1o0tNCTx7izmQtwAQsIiaLRWtavAAEcskb0XJ5OjJbVrYXWOTr8om921Scabn4/tzlx7j1Q== + dependencies: + "@babel/helper-module-imports" "^7.10.4" + "@babel/helper-replace-supers" "^7.10.4" + "@babel/helper-simple-access" "^7.10.4" + "@babel/helper-split-export-declaration" "^7.10.4" + "@babel/template" "^7.10.4" + "@babel/types" "^7.10.4" + lodash "^4.17.13" + "@babel/helper-optimise-call-expression@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5" @@ -157,11 +251,23 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-optimise-call-expression@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673" + integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg== + dependencies: + "@babel/types" "^7.10.4" + "@babel/helper-plugin-utils@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250" integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA== +"@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375" + integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg== + "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351" @@ -180,6 +286,16 @@ "@babel/traverse" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-replace-supers@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf" + integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A== + dependencies: + "@babel/helper-member-expression-to-functions" "^7.10.4" + "@babel/helper-optimise-call-expression" "^7.10.4" + "@babel/traverse" "^7.10.4" + "@babel/types" "^7.10.4" + "@babel/helper-replace-supers@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.5.5.tgz#f84ce43df031222d2bad068d2626cb5799c34bc2" @@ -198,6 +314,21 @@ "@babel/template" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-simple-access@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461" + integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw== + dependencies: + "@babel/template" "^7.10.4" + "@babel/types" "^7.10.4" + +"@babel/helper-split-export-declaration@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz#2c70576eaa3b5609b24cb99db2888cc3fc4251d1" + integrity sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg== + dependencies: + "@babel/types" "^7.10.4" + "@babel/helper-split-export-declaration@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677" @@ -205,6 +336,11 @@ dependencies: "@babel/types" "^7.4.4" +"@babel/helper-validator-identifier@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2" + integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== + "@babel/helper-wrap-function@^7.1.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa" @@ -215,6 +351,15 @@ "@babel/traverse" "^7.1.0" "@babel/types" "^7.2.0" +"@babel/helpers@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.4.tgz#2abeb0d721aff7c0a97376b9e1f6f65d7a475044" + integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA== + dependencies: + "@babel/template" "^7.10.4" + "@babel/traverse" "^7.10.4" + "@babel/types" "^7.10.4" + "@babel/helpers@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.5.5.tgz#63908d2a73942229d1e6685bc2a0e730dde3b75e" @@ -233,11 +378,25 @@ esutils "^2.0.2" js-tokens "^4.0.0" +"@babel/highlight@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143" + integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA== + dependencies: + "@babel/helper-validator-identifier" "^7.10.4" + chalk "^2.0.0" + js-tokens "^4.0.0" + "@babel/parser@^7.0.0", "@babel/parser@^7.4.4", "@babel/parser@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.5.tgz#02f077ac8817d3df4a832ef59de67565e71cca4b" integrity sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g== +"@babel/parser@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.4.tgz#9eedf27e1998d87739fb5028a5120557c06a1a64" + integrity sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA== + "@babel/plugin-proposal-async-generator-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e" @@ -271,6 +430,22 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-json-strings" "^7.2.0" +"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a" + integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0" + +"@babel/plugin-proposal-numeric-separator@^7.10.1": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06" + integrity sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-numeric-separator" "^7.10.4" + "@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.5.tgz#61939744f71ba76a3ae46b5eea18a54c16d22e58" @@ -287,6 +462,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-optional-catch-binding" "^7.2.0" +"@babel/plugin-proposal-optional-chaining@^7.10.3": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.4.tgz#750f1255e930a1f82d8cdde45031f81a0d0adff7" + integrity sha512-ZIhQIEeavTgouyMSdZRap4VPPHqJJ3NEs2cuHs5p0erH+iz6khB0qfgU8g7UuJkG88+fBMy23ZiU+nuHvekJeQ== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-optional-chaining" "^7.8.0" + "@babel/plugin-proposal-unicode-property-regex@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.4.4.tgz#501ffd9826c0b91da22690720722ac7cb1ca9c78" @@ -338,6 +521,20 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0": + version "7.8.3" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9" + integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ== + dependencies: + "@babel/helper-plugin-utils" "^7.8.0" + +"@babel/plugin-syntax-numeric-separator@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97" + integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e" @@ -352,6 +549,20 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-optional-chaining@^7.8.0": + version "7.8.3" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a" + integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg== + dependencies: + "@babel/helper-plugin-utils" "^7.8.0" + +"@babel/plugin-syntax-typescript@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.10.4.tgz#2f55e770d3501e83af217d782cb7517d7bb34d25" + integrity sha512-oSAEz1YkBCAKr5Yiq8/BNtvSAPwkp/IyUnwZogd8p+F0RuYQQrLeRUzIQhueQTTBy/F+a40uS7OFKxnkRvmvFQ== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550" @@ -639,6 +850,15 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-transform-typescript@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.10.4.tgz#8b01cb8d77f795422277cc3fcf45af72bc68ba78" + integrity sha512-3WpXIKDJl/MHoAN0fNkSr7iHdUMHZoppXjf2HJ9/ed5Xht5wNIsXllJXdityKOxeA3Z8heYRb1D3p2H5rfCdPw== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.10.4" + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-typescript" "^7.10.4" + "@babel/plugin-transform-unicode-regex@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.4.4.tgz#ab4634bb4f14d36728bf5978322b35587787970f" @@ -723,6 +943,14 @@ "@babel/plugin-transform-react-jsx-self" "^7.0.0" "@babel/plugin-transform-react-jsx-source" "^7.0.0" +"@babel/preset-typescript@^7.10.1": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.10.4.tgz#7d5d052e52a682480d6e2cc5aa31be61c8c25e36" + integrity sha512-SdYnvGPv+bLlwkF2VkJnaX/ni1sMNetcGI1+nThF1gyv6Ph8Qucc4ZZAjM5yZcE/AKRXIOTZz7eSRDWOEjPyRQ== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-transform-typescript" "^7.10.4" + "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" @@ -730,6 +958,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.10.3": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99" + integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.1.0", "@babel/template@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237" @@ -739,6 +974,15 @@ "@babel/parser" "^7.4.4" "@babel/types" "^7.4.4" +"@babel/template@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278" + integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/parser" "^7.10.4" + "@babel/types" "^7.10.4" + "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.5.tgz#f664f8f368ed32988cd648da9f72d5ca70f165bb" @@ -754,6 +998,21 @@ globals "^11.1.0" lodash "^4.17.13" +"@babel/traverse@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.4.tgz#e642e5395a3b09cc95c8e74a27432b484b697818" + integrity sha512-aSy7p5THgSYm4YyxNGz6jZpXf+Ok40QF3aA2LyIONkDHpAcJzDUqlCKXv6peqYUs2gmic849C/t2HKw2a2K20Q== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/generator" "^7.10.4" + "@babel/helper-function-name" "^7.10.4" + "@babel/helper-split-export-declaration" "^7.10.4" + "@babel/parser" "^7.10.4" + "@babel/types" "^7.10.4" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.13" + "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.5.tgz#97b9f728e182785909aa4ab56264f090a028d18a" @@ -763,6 +1022,15 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@babel/types@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.4.tgz#369517188352e18219981efd156bfdb199fff1ee" + integrity sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg== + dependencies: + "@babel/helper-validator-identifier" "^7.10.4" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@emotion/is-prop-valid@^0.8.1": version "0.8.2" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc" @@ -1727,6 +1995,11 @@ babel-plugin-remove-graphql-queries@^2.7.5: resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.7.5.tgz#841631756b95c6919a0db37d26530c7b2174b3b8" integrity sha512-cc2EGIp+bMZmpTg4+zO8LEiCP/+x+4rQpH8ekaGrpu7IkyDL07nrhdOBTmVs+Xwx8coFIdCU6RUvRv2RwmCxtg== +babel-plugin-remove-graphql-queries@^2.9.13: + version "2.9.13" + resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.9.13.tgz#0e2bb2d81c40898b48499a809e2a5645d2c64a75" + integrity sha512-UpxqC9Wt2O+kYbCP4KnAyZrMO29bwEvilWzomOqB5bwAJpXeZ2NwvRoWBKGJSzSyOCOoyz7xPSZ/OJM3kO5Xyw== + "babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.6: version "1.10.6" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b" @@ -2798,6 +3071,13 @@ convert-source-map@^1.1.0: dependencies: safe-buffer "~5.1.1" +convert-source-map@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" + integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== + dependencies: + safe-buffer "~5.1.1" + cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c" @@ -4264,6 +4544,11 @@ extsprintf@^1.2.0: resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8= +faker@^4.1.0: + version "4.1.0" + resolved "https://registry.npm.taobao.org/faker/download/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f" + integrity sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8= + fast-deep-equal@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49" @@ -4822,6 +5107,19 @@ gatsby-plugin-styled-components@^3.1.0: dependencies: "@babel/runtime" "^7.5.5" +gatsby-plugin-typescript@^2.4.14: + version "2.4.14" + resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.14.tgz#2687f404cba7d9034112d37a88b053ab87bf853e" + integrity sha512-8lMEK+F+xQZ+SGUuj4GMuWk2vy6x5PBVPRLO3eKNEGpX9o+vJcyQxTtu9Nd1GToLjr1K1r0ak0hERwGNzaJLow== + dependencies: + "@babel/core" "^7.10.3" + "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1" + "@babel/plugin-proposal-numeric-separator" "^7.10.1" + "@babel/plugin-proposal-optional-chaining" "^7.10.3" + "@babel/preset-typescript" "^7.10.1" + "@babel/runtime" "^7.10.3" + babel-plugin-remove-graphql-queries "^2.9.13" + gatsby-react-router-scroll@^2.1.6: version "2.1.6" resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.1.6.tgz#45e9b99ac5fc3d3c469a0fda39443f1442d8e21b" @@ -5083,6 +5381,11 @@ gauge@~2.7.3: strip-ansi "^3.0.1" wide-align "^1.1.0" +gensync@^1.0.0-beta.1: + version "1.0.0-beta.1" + resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269" + integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg== + get-caller-file@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a" @@ -6695,6 +6998,13 @@ json5@^2.1.0: dependencies: minimist "^1.2.0" +json5@^2.1.2: + version "2.1.3" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43" + integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA== + dependencies: + minimist "^1.2.5" + jsonfile@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" @@ -7464,6 +7774,11 @@ minimist@^1.2.0: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= +minimist@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" + integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== + minipass@^2.2.1, minipass@^2.3.5: version "2.4.0" resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.4.0.tgz#38f0af94f42fb6f34d3d7d82a90e2c99cd3ff485" @@ -9576,6 +9891,11 @@ regenerator-runtime@^0.13.2: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5" integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw== +regenerator-runtime@^0.13.4: + version "0.13.5" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" + integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA== + regenerator-transform@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"