Skip to content

Commit 8e6c442

Browse files
nstepiennstepien
committed
Merge branch 'canary' into ts42
2 parents 33a8db7 + a6fc34a commit 8e6c442

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+1105
-786
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
/.linaria-cache
12
/coverage
2-
/dist
33
/lib
44
/node_modules
55
/storybook-static

‎.storybook/preview.tsx

+50-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,56 @@
11
import 'core-js/stable';
2-
import '../style/index.less';
3-
import '../stories/index.less';
42
import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
3+
import { css } from '@linaria/core';
54

65
if (typeof ResizeObserver === 'undefined') {
76
window.ResizeObserver = Polyfill;
87
}
8+
9+
css`
10+
:global() {
11+
body,
12+
html {
13+
padding: 0 !important;
14+
margin: 0 !important;
15+
font-family: sans-serif;
16+
}
17+
18+
#root {
19+
display: flex;
20+
flex-direction: column;
21+
box-sizing: border-box;
22+
height: 100vh;
23+
padding: 8px;
24+
}
25+
26+
.rdg.fill-grid {
27+
height: 100%;
28+
}
29+
30+
.rdg.small-grid {
31+
height: 300px;
32+
}
33+
34+
.rdg.big-grid {
35+
height: 600px;
36+
}
37+
38+
:root {
39+
@media (prefers-color-scheme: light) {
40+
background-color: #fff;
41+
color: #111;
42+
}
43+
44+
@media (prefers-color-scheme: dark) {
45+
background-color: #111;
46+
color: #fff;
47+
}
48+
}
49+
50+
.rdg-cell .Select {
51+
max-height: 30px;
52+
font-size: 12px;
53+
font-weight: normal;
54+
}
55+
}
56+
`;

‎.storybook/webpack.config.cjs

+5-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,13 @@ module.exports = function({ config, mode }) {
1111
use: [{
1212
loader: 'babel-loader',
1313
options: { cacheDirectory: !isProd }
14+
}, {
15+
loader: '@linaria/webpack-loader',
16+
options: { sourceMap: !isProd },
1417
}]
1518
}, {
16-
test: /\.less$/,
17-
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
19+
test: /\.css$/,
20+
use: [MiniCssExtractPlugin.loader, 'css-loader']
1821
}];
1922

2023
config.plugins.push(new MiniCssExtractPlugin({

‎CHANGELOG.md

+83
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,87 @@
11
# Changelog
22

3+
## v7.0.0-canary.35
4+
- Migrate to css-in-js with linaria ([PR](https://github.com/adazzle/react-data-grid/pull/2256)). RDG now internally uses [linaria](https://github.com/callstack/linaria) to manage styles. The stylesheets are automatically injected and there is no stylesheet to manually import anymore.
5+
- Expose data grid root element reference ([PR](https://github.com/adazzle/react-data-grid/pull/2258)).
6+
- (Bug fix) Tabbing into the grid should initiate keyboard navigation ([PR](https://github.com/adazzle/react-data-grid/pull/2289)).
7+
8+
## v7.0.0-canary.34
9+
- Only show the vertical scrollbar when necessary ([PR](https://github.com/adazzle/react-data-grid/pull/2231))
10+
- Fix `editorPortalTarget` default value for server-side rendering ([PR](https://github.com/adazzle/react-data-grid/pull/2245))
11+
- Use grid layout for rows, split column metrics from compute columns ([PR](https://github.com/adazzle/react-data-grid/pull/2272)). Resizing columns no longer recreates columns so less re-renders
12+
- Augment `onRowsChange` with `indexes` and `column` data ([PR](https://github.com/adazzle/react-data-grid/pull/2278))
13+
14+
## v7.0.0-canary.33
15+
- (Bug) Commit changes before exiting grid ([PR](https://github.com/adazzle/react-data-grid/pull/2224))
16+
17+
## v7.0.0-canary.32
18+
- Fix importing rdg with webpack 4 ([PR](https://github.com/adazzle/react-data-grid/pull/2221))
19+
20+
## v7.0.0-canary.31
21+
- (Breaking) Remove some exports from the grid ([PR](https://github.com/adazzle/react-data-grid/pull/2210))
22+
- Use a pseudo-element for header resizer ([PR](https://github.com/adazzle/react-data-grid/pull/2217))
23+
- (new) Formatters now receive a new onRowChange prop ([PR](https://github.com/adazzle/react-data-grid/pull/2220))
24+
- (new) Change `column.name` type from `string` to `string/ReactElement` ([PR](https://github.com/adazzle/react-data-grid/pull/2220))
25+
- Publish bundles instead of modules, use babel only for transpilation ([PR](https://github.com/adazzle/react-data-grid/pull/2214))
26+
- Use the new jsx runtime ([PR](https://github.com/adazzle/react-data-grid/pull/2184)). The minimum supported react version is 16.14 now.
27+
28+
## v7.0.0-canary.30
29+
- Forward sorting props to `headerRenderer` ([PR](https://github.com/adazzle/react-data-grid/pull/2204))
30+
- Disable cell navigation while editing. This behavior can be controlled using the new `column.editorOptions.onNavigation` option ([PR](https://github.com/adazzle/react-data-grid/pull/2196))
31+
32+
## v7.0.0-canary.29
33+
- Fix crash when `rows` are `undefined` ([PR](https://github.com/adazzle/react-data-grid/pull/2197))
34+
- Fix a scrolling bug caused by `scroll-behavior: smooth` ([PR](https://github.com/adazzle/react-data-grid/pull/2200))
35+
36+
## v7.0.0-canary.28
37+
- (Breaking) Removed `onRowsUpdate`, `enableCellCopyPaste`, and `enableCellDragAndDrop` props. Added 2 new props (`onFill` and `onPaste`) ([PR](https://github.com/adazzle/react-data-grid/pull/2194))
38+
- (Breaking) Rename `enableFilters` to `enableFilterRow` ([PR](https://github.com/adazzle/react-data-grid/pull/2195))
39+
40+
## v7.0.0-canary.27
41+
- (Breaking) Removed old editor API ([PR](https://github.com/adazzle/react-data-grid/pull/2149))
42+
- (Breaking) Removed `onCheckCellIsEditable` prop ([PR](https://github.com/adazzle/react-data-grid/pull/2016)). Use `column.editable` instead.
43+
= (Breaking) Replaced rowKey prop with rowKeyGetter ([PR](https://github.com/adazzle/react-data-grid/pull/2190))
44+
45+
## v7.0.0-canary.26
46+
- Fixed Copy & Paste events not working properly in non-English keyboards ([PR](https://github.com/adazzle/react-data-grid/pull/2097))
47+
48+
## v7.0.0-canary.25
49+
- Added support for webpack 5 ([PR](https://github.com/adazzle/react-data-grid/pull/2178))
50+
51+
## v7.0.0-canary.24
52+
- Fixed a bug where grid was getting scrolled on cell focus
53+
54+
## v7.0.0-canary.23
55+
- Minor style fixes
56+
57+
## v7.0.0-canary.22
58+
- Add Grouping ([PR](https://github.com/adazzle/react-data-grid/pull/2106)). Check the new [example](https://adazzle.github.io/react-data-grid/canary/?path=/story/demos--grouping).
59+
- (Breaking) Removed `height` and `width` props and added new `className` and `style` props. We are now using `ResizeObserver` to calculate all the grid dimensions ([PR](https://github.com/adazzle/react-data-grid/pull/2130))
60+
- (Breaking) Removed formatterOptions. Grid now handles formatter focus internally so this prop is no longer required ([PR](https://github.com/adazzle/react-data-grid/pull/2138))
61+
- Added support for React 17
62+
63+
## v7.0.0-canary.21
64+
- Editor2 bug fixes ([PR](https://github.com/adazzle/react-data-grid/pull/2126))
65+
- `formatterOptions.focusable` can be a function now so different rows can have different focus behavior for the same column
66+
- Grid now internally uses `ResizeObserver` API to calculate the available width ([PR](https://github.com/adazzle/react-data-grid/pull/2129))
67+
68+
## v7.0.0-canary.20
69+
- A new editor api that does not require a ref ([PR](https://github.com/adazzle/react-data-grid/pull/2102))
70+
- A new `columnDefaultOptions` prop. This replaces `minColumnWidth` and `defaultFormatter` props ([PR](https://github.com/adazzle/react-data-grid/pull/2117))
71+
72+
## v7.0.0-canary.19
73+
- Allow setting ref on `Cell/Row` renderers ([PR](https://github.com/adazzle/react-data-grid/pull/2111))
74+
75+
## v7.0.0-canary.18
76+
- Accessibility improvements. Added various aria attributes. ([PR](https://github.com/adazzle/react-data-grid/pull/2084))
77+
- Removed enableCellAutoFocus prop ([PR](https://github.com/adazzle/react-data-grid/pull/2073))
78+
- Removed InteractionMasks component. This is an internal change to prepare for grouping and it fixes a few selected cell position bugs
79+
- Improved focus for custom formatters using the new formatterOptions ([PR](https://github.com/adazzle/react-data-grid/pull/2104))
80+
81+
## v7.0.0-canary.17
82+
- Performance improvements ([PR](https://github.com/adazzle/react-data-grid/pull/2015))
83+
- A new rowClass prop ([PR](https://github.com/adazzle/react-data-grid/pull/2058))
84+
385
## `alpha` to `canary`
486
- **Added:**
587
- **Props:**
@@ -114,6 +196,7 @@
114196
- ⚠️ the `rowKeyGetter` prop is now required for row selection.
115197
- ⚠️ `column.cellClass` does not affect header cells anymore.
116198
- ⚠️ `onScroll` will directly pass the UIEvent rather than the scrollLeft and scrollRight only.
199+
- ⚠️ The stylesheets are now automatically injected, there is no stylsheet to manually import anymore.
117200

118201
## `master` to `alpha`
119202
- **Added:**

‎README.md

-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ See [documentation](https://github.com/rollup/plugins/tree/master/packages/babel
104104

105105
```jsx
106106
import DataGrid from 'react-data-grid';
107-
import 'react-data-grid/dist/react-data-grid.css';
108107

109108
const columns = [
110109
{ key: 'id', name: 'ID' },

‎babel.config.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@
1212
]
1313
}],
1414
["@babel/react", { "runtime": "automatic" }],
15-
"@babel/typescript"
15+
"@babel/typescript",
16+
"@linaria"
1617
],
1718
"plugins": [
1819
["@babel/transform-runtime", { "useESModules": true }],
19-
"babel-plugin-optimize-clsx"
20+
["optimize-clsx", { "functionNames": ["getCellClassname"] }]
2021
]
2122
}

‎package.json

+14-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-data-grid",
3-
"version": "7.0.0-canary.34",
3+
"version": "7.0.0-canary.36",
44
"license": "MIT",
55
"description": "Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like",
66
"keywords": [
@@ -18,31 +18,25 @@
1818
"module": "./lib/bundle.js",
1919
"require": "./lib/bundle.cjs",
2020
"default": "./lib/bundle.js"
21-
},
22-
"./dist/": "./dist/"
21+
}
2322
},
2423
"browser": "./lib/bundle.js",
2524
"main": "./lib/bundle.cjs",
2625
"module": "./lib/bundle.js",
2726
"types": "./lib/index.d.ts",
2827
"files": [
29-
"dist",
3028
"lib"
3129
],
32-
"sideEffects": [
33-
"*.css",
34-
"*.less"
35-
],
30+
"sideEffects": false,
3631
"scripts": {
37-
"start": "start-storybook --quiet --no-dll -p 6006",
32+
"start": "start-storybook --quiet -p 6006",
3833
"build": "rollup --config --no-stdin",
39-
"postbuild": "node tools/buildStylesheets.js",
4034
"test": "jest",
4135
"test:watch": "jest --watch",
42-
"eslint": "eslint --ext js,ts,tsx --max-warnings 0 -f codeframe --cache --color src stories test tools",
36+
"eslint": "eslint --ext js,ts,tsx --max-warnings 0 -f codeframe --cache --color src stories test",
4337
"eslint:fix": "npm run eslint -- --fix",
4438
"typecheck": "tsc -p tsconfig.all.json",
45-
"build-storybook": "build-storybook --quiet --no-dll",
39+
"build-storybook": "build-storybook --quiet",
4640
"prepublishOnly": "npm install && npm run build && tsc",
4741
"postpublish": "git push --follow-tags origin HEAD"
4842
},
@@ -57,12 +51,18 @@
5751
"@babel/preset-typescript": "^7.12.7",
5852
"@babel/runtime": "^7.12.5",
5953
"@juggle/resize-observer": "^3.2.0",
54+
"@linaria/babel-preset": "^3.0.0-beta.1",
55+
"@linaria/core": "^3.0.0-beta.1",
56+
"@linaria/rollup": "^3.0.0-beta.1",
57+
"@linaria/shaker": "^3.0.0-beta.1",
58+
"@linaria/webpack-loader": "^3.0.0-beta.1",
6059
"@popperjs/core": "^2.6.0",
6160
"@rollup/plugin-babel": "^5.2.2",
6261
"@rollup/plugin-node-resolve": "^11.0.1",
6362
"@storybook/react": "^6.1.11",
6463
"@testing-library/jest-dom": "^5.11.6",
6564
"@testing-library/react": "^11.2.2",
65+
"@testing-library/user-event": "^12.6.0",
6666
"@types/faker": "^5.1.5",
6767
"@types/jest": "^26.0.19",
6868
"@types/lodash": "^4.14.165",
@@ -73,7 +73,6 @@
7373
"@typescript-eslint/parser": "^4.10.0",
7474
"babel-loader": "^8.2.2",
7575
"babel-plugin-optimize-clsx": "^2.6.1",
76-
"clean-css": "^4.2.3",
7776
"core-js": "^3.8.1",
7877
"css-loader": "^5.0.1",
7978
"eslint": "^7.15.0",
@@ -85,10 +84,9 @@
8584
"eslint-plugin-sonarjs": "^0.5.0",
8685
"faker": "^5.1.0",
8786
"jest": "^26.6.3",
88-
"less": "^3.13.0",
89-
"less-loader": "^7.1.0",
9087
"lodash": "^4.17.20",
9188
"mini-css-extract-plugin": "^1.3.3",
89+
"postcss": "^8.2.1",
9290
"react": "^17.0.1",
9391
"react-contextmenu": "^2.14.0",
9492
"react-dnd": "^11.1.3",
@@ -98,6 +96,7 @@
9896
"react-select": "^3.1.1",
9997
"react-sortable-hoc": "^1.11.0",
10098
"rollup": "^2.35.1",
99+
"rollup-plugin-postcss": "^4.0.0",
101100
"typescript": "beta"
102101
},
103102
"peerDependencies": {

‎rollup.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { isAbsolute } from 'path';
2+
import linaria from '@linaria/rollup';
3+
import postcss from 'rollup-plugin-postcss';
24
import { babel } from '@rollup/plugin-babel';
35
import nodeResolve from '@rollup/plugin-node-resolve';
6+
import pkg from './package.json';
47

58
const extensions = ['.ts', '.tsx'];
69

@@ -20,6 +23,14 @@ export default {
2023
}],
2124
external: id => !id.startsWith('.') && !isAbsolute(id),
2225
plugins: [
26+
linaria({
27+
classNameSlug(hash) {
28+
// We add the package version as suffix to avoid style conflicts
29+
// between multiple versions of RDG on the same page.
30+
return `${hash}${pkg.version.replaceAll('.', '')}`;
31+
}
32+
}),
33+
postcss({ minimize: true }),
2334
babel({
2435
babelHelpers: 'runtime',
2536
extensions,

‎src/Cell.tsx

+44-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,44 @@
11
import { forwardRef, memo } from 'react';
2-
import clsx from 'clsx';
2+
import { css } from '@linaria/core';
33

4+
import { cellSelectedClassname } from './style';
5+
import { getCellStyle, getCellClassname, wrapEvent } from './utils';
46
import type { CellRendererProps } from './types';
5-
import { getCellStyle, wrapEvent } from './utils';
7+
8+
const cellCopied = css`
9+
background-color: #ccccff;
10+
`;
11+
12+
const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`;
13+
14+
const cellDraggedOver = css`
15+
background-color: #ccccff;
16+
17+
&.${cellCopied} {
18+
background-color: #9999ff;
19+
}
20+
`;
21+
22+
const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;
23+
24+
const cellDragHandle = css`
25+
cursor: move;
26+
position: absolute;
27+
right: 0;
28+
bottom: 0;
29+
width: 8px;
30+
height: 8px;
31+
background-color: var(--selection-color);
32+
33+
&:hover {
34+
width: 16px;
35+
height: 16px;
36+
border: 2px solid var(--selection-color);
37+
background-color: var(--background-color);
38+
}
39+
`;
40+
41+
const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
642

743
function Cell<R, SR>({
844
className,
@@ -24,14 +60,12 @@ function Cell<R, SR>({
2460
...props
2561
}: CellRendererProps<R, SR>, ref: React.Ref<HTMLDivElement>) {
2662
const { cellClass } = column;
27-
className = clsx(
28-
'rdg-cell',
63+
className = getCellClassname(
64+
column,
2965
{
30-
'rdg-cell-frozen': column.frozen,
31-
'rdg-cell-frozen-last': column.isLastFrozenColumn,
32-
'rdg-cell-selected': isCellSelected,
33-
'rdg-cell-copied': isCopied,
34-
'rdg-cell-dragged-over': isDraggedOver
66+
[cellSelectedClassname]: isCellSelected,
67+
[cellCopiedClassname]: isCopied,
68+
[cellDraggedOverClassname]: isDraggedOver
3569
},
3670
typeof cellClass === 'function' ? cellClass(row) : cellClass,
3771
className
@@ -87,7 +121,7 @@ function Cell<R, SR>({
87121
onRowChange={handleRowChange}
88122
/>
89123
{dragHandleProps && (
90-
<div className="rdg-cell-drag-handle" {...dragHandleProps} />
124+
<div className={cellDragHandleClassname} {...dragHandleProps} />
91125
)}
92126
</>
93127
)}

0 commit comments

Comments
 (0)