From d1ae9ff6a337af14ff357c0f29c22a18b29da70a Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 13 Aug 2020 18:34:06 +0200 Subject: [PATCH 01/29] remove style-components --- babel.config.js | 1 + packages/grid/data-grid/package.json | 3 +- packages/grid/x-grid-modules/package.json | 3 +- .../x-grid-modules/src/components/cell.tsx | 8 +- .../src/components/checkbox-renderer.tsx | 13 +- .../src/components/column-header-item.tsx | 8 +- .../components/column-header-separator.tsx | 4 +- .../components/column-header-sort-icon.tsx | 13 +- .../src/components/column-headers.tsx | 8 +- .../src/components/options-context.ts | 4 +- .../x-grid-modules/src/components/row.tsx | 7 + .../styled-wrappers/columns-container.tsx | 6 +- .../components/styled-wrappers/grid-root.tsx | 242 +---------------- .../styled-wrappers/styles.module.css | 244 +++++++++++++++++ .../styled-wrappers/styles.module.css.d.ts | 2 + .../styled-wrappers/window-overlay.tsx | 25 +- .../src/components/styled-wrappers/window.tsx | 6 +- .../src/constants/cssClassesConstants.ts | 2 +- .../grid/x-grid-modules/src/gridComponent.tsx | 3 +- packages/grid/x-grid/package.json | 3 +- packages/storybook/.storybook/main.js | 16 +- packages/storybook/package.json | 6 +- packages/storybook/tsconfig.json | 14 +- packages/storybook/typings/styles.module.d.ts | 24 ++ tsconfig.json | 8 +- yarn.lock | 254 ++++++++++++++++-- 26 files changed, 606 insertions(+), 321 deletions(-) create mode 100644 packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css create mode 100644 packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css.d.ts create mode 100644 packages/storybook/typings/styles.module.d.ts diff --git a/babel.config.js b/babel.config.js index d938a7760a114..74383d690bc32 100644 --- a/babel.config.js +++ b/babel.config.js @@ -41,6 +41,7 @@ module.exports = { }, }, ], +'react-css-modules', 'babel-plugin-optimize-clsx', ['@babel/plugin-proposal-class-properties', { loose: true }], ['@babel/plugin-proposal-object-rest-spread', { loose: true }], diff --git a/packages/grid/data-grid/package.json b/packages/grid/data-grid/package.json index 0ac76813d2f32..bc1487d523b95 100644 --- a/packages/grid/data-grid/package.json +++ b/packages/grid/data-grid/package.json @@ -29,8 +29,7 @@ }, "peerDependencies": { "@material-ui/core": "^4.9.12", - "react": "^16.13.1", - "styled-components": "^5.1.0" + "react": "^16.13.1" }, "scripts": { "precommit": "npm run lint", diff --git a/packages/grid/x-grid-modules/package.json b/packages/grid/x-grid-modules/package.json index 7e186ecbc0b62..119ce0f950e40 100644 --- a/packages/grid/x-grid-modules/package.json +++ b/packages/grid/x-grid-modules/package.json @@ -24,8 +24,7 @@ }, "peerDependencies": { "@material-ui/core": "^4.9.12", - "react": "^16.13.1", - "styled-components": "^5.1.0" + "react": "^16.13.1" }, "scripts": { "precommit": "npm run lint", diff --git a/packages/grid/x-grid-modules/src/components/cell.tsx b/packages/grid/x-grid-modules/src/components/cell.tsx index 573eab80a18ab..b98153381dda0 100644 --- a/packages/grid/x-grid-modules/src/components/cell.tsx +++ b/packages/grid/x-grid-modules/src/components/cell.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Alignement, CellValue } from '../models'; import { CELL_CSS_CLASS } from '../constants/cssClassesConstants'; import { classnames } from '../utils'; +import {OptionsContext} from "@material-ui/x-grid-modules/components/options-context"; export interface GridCellProps { field?: string; @@ -37,6 +38,7 @@ export const Cell: React.FC = React.memo( align !== 'left' ? align : '', ); const valueToRender = formattedValue || value; + const {rowHeight} = React.useContext(OptionsContext); return (
= React.memo( data-colindex={colIndex} data-rowindex={rowIndex} aria-colindex={colIndex} - style={{ minWidth: width, maxWidth: width }} + style={{ minWidth: width, maxWidth: width, + lineHeight: `${rowHeight - 1 }px`, + minHeight: rowHeight, + maxHeight: rowHeight + }} tabIndex={tabIndex} > {children || valueToRender?.toString()} diff --git a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx index e9e1616cbbe9e..19aade0df29d2 100644 --- a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx +++ b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx @@ -1,14 +1,9 @@ import * as React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; -import styled from 'styled-components'; import { SelectionChangeParams } from '../models/params/selectionChangeParams'; import { ColParams } from '../models/params/colParams'; import { CellParams } from '../models/params/cellParams'; -const CheckboxInputContainer = styled.div` - display: block; -`; - export const HeaderCheckbox: React.FC = React.memo(({ api }) => { const [isChecked, setChecked] = React.useState(false); const [isIndeterminate, setIndeterminate] = React.useState(false); @@ -32,7 +27,7 @@ export const HeaderCheckbox: React.FC = React.memo(({ api }) => { return api.onSelectionChange(selectionChange); }, [api, selectionChange]); return ( - +
= React.memo(({ api }) => { className="checkbox-input" inputProps={{ 'aria-label': 'Select All Rows checkbox' }} /> - +
); }); HeaderCheckbox.displayName = 'HeaderCheckbox'; @@ -51,14 +46,14 @@ export const CellCheckboxRenderer: React.FC = React.memo(({ api, row }; return ( - +
- +
); }); CellCheckboxRenderer.displayName = 'CellCheckboxRenderer'; diff --git a/packages/grid/x-grid-modules/src/components/column-header-item.tsx b/packages/grid/x-grid-modules/src/components/column-header-item.tsx index 688cf4ce4465a..933b0f78bfc8e 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-item.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-item.tsx @@ -6,17 +6,18 @@ import { classnames } from '../utils'; import { ColumnHeaderSortIcon } from './column-header-sort-icon'; import { ColumnHeaderTitle } from './column-header-title'; import { ColumnHeaderSeparator } from './column-header-separator'; +import {OptionsContext} from "./options-context"; interface ColumnHeaderItemProps { column: ColDef; - headerHeight: number; colIndex: number; onResizeColumn?: (c: any) => void; } export const ColumnHeaderItem = React.memo( - ({ column, colIndex, headerHeight, onResizeColumn }: ColumnHeaderItemProps) => { + ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => { const api = React.useContext(ApiContext); + const {headerHeight, showColumnRightBorder} = React.useContext(OptionsContext); const cssClass = classnames( HEADER_CELL_CSS_CLASS, @@ -55,6 +56,7 @@ export const ColumnHeaderItem = React.memo( maxWidth: width, maxHeight: headerHeight, minHeight: headerHeight, + borderRight: showColumnRightBorder ? '1px solid #bdc3c7' : 'none' }} role="columnheader" tabIndex={-1} @@ -66,6 +68,7 @@ export const ColumnHeaderItem = React.memo( direction={column.sortDirection} index={column.sortIndex} hide={column.hideSortIcons} + height={headerHeight} /> )} {headerComponent || ( @@ -80,6 +83,7 @@ export const ColumnHeaderItem = React.memo( direction={column.sortDirection} index={column.sortIndex} hide={column.hideSortIcons} + height={headerHeight} /> )} diff --git a/packages/grid/x-grid-modules/src/components/column-header-separator.tsx b/packages/grid/x-grid-modules/src/components/column-header-separator.tsx index 8100747468444..5df530fa6398c 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-separator.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-separator.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { useIcons } from '../hooks/utils/useIcons'; +import {OptionsContext} from "./options-context"; export interface ColumnHeaderSeparatorProps { resizable: boolean | undefined; @@ -9,6 +10,7 @@ export interface ColumnHeaderSeparatorProps { export const ColumnHeaderSeparator: React.FC = React.memo( ({ onResize, resizable }) => { const icons = useIcons(); + const {showColumnRightBorder, headerHeight} = React.useContext(OptionsContext); const resizeIconProps = { className: `icon separator ${resizable ? 'resizable' : ''}`, @@ -17,7 +19,7 @@ export const ColumnHeaderSeparator: React.FC = React const icon = React.createElement(icons!.columnResize!, resizeIconProps); - return
{icon}
; + return
{icon}
; }, ); ColumnHeaderSeparator.displayName = 'ColumnHeaderSeparator'; diff --git a/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx b/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx index b0406b9bba9bc..f3c2c70938977 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx @@ -8,15 +8,16 @@ export interface ColumnHeaderSortIconProps { direction: SortDirection; index: number | undefined; hide?: boolean; + height: number; } -const getIcon = (icons: IconsOptions, direction: SortDirection): React.ReactNode => +const getIcon = (icons: IconsOptions, direction: SortDirection, height: number): React.ReactNode => direction === 'asc' - ? React.createElement(icons!.columnSortedAscending!) - : React.createElement(icons!.columnSortedDescending!); + ? React.createElement(icons!.columnSortedAscending!, {styles: {minHeight: height}}) + : React.createElement(icons!.columnSortedDescending!, {styles: {minHeight: height}}); export const ColumnHeaderSortIcon: React.FC = React.memo( - ({ direction, index, hide }) => { + ({ direction, index, hide, height }) => { const icons = useIcons(); if (hide || direction == null) { @@ -28,13 +29,13 @@ export const ColumnHeaderSortIcon: React.FC = React.m {index != null && ( - {getIcon(icons, direction)} + {getIcon(icons, direction, height)} )} {index == null && ( - {getIcon(icons, direction)} + {getIcon(icons, direction, height)} )} diff --git a/packages/grid/x-grid-modules/src/components/column-headers.tsx b/packages/grid/x-grid-modules/src/components/column-headers.tsx index 75a95047b2376..c60d37081be08 100644 --- a/packages/grid/x-grid-modules/src/components/column-headers.tsx +++ b/packages/grid/x-grid-modules/src/components/column-headers.tsx @@ -6,17 +6,15 @@ import { LeftEmptyCell, RightEmptyCell } from './cell'; export interface ColumnHeadersItemCollectionProps { columns: Columns; - headerHeight: number; onResizeColumn?: (col: ColDef) => void; } export const ColumnHeaderItemCollection: React.FC = React.memo( - ({ headerHeight, onResizeColumn, columns }) => { + ({ onResizeColumn, columns }) => { const items = columns.map((col, idx) => ( )); @@ -29,14 +27,13 @@ ColumnHeaderItemCollection.displayName = 'ColumnHeaderItemCollection'; export interface ColumnsHeaderProps { columns: Columns; hasScrollX: boolean; - headerHeight: number; onResizeColumn?: (col: ColDef) => void; renderCtx: Partial | null; } export const ColumnsHeader = React.memo( React.forwardRef( - ({ columns, hasScrollX, headerHeight, onResizeColumn, renderCtx }, columnsHeaderRef) => { + ({ columns, hasScrollX, onResizeColumn, renderCtx }, columnsHeaderRef) => { const wrapperCssClasses = `material-col-cell-wrapper ${hasScrollX ? 'scroll' : ''}`; const api = React.useContext(ApiContext); @@ -78,7 +75,6 @@ export const ColumnsHeader = React.memo(
diff --git a/packages/grid/x-grid-modules/src/components/options-context.ts b/packages/grid/x-grid-modules/src/components/options-context.ts index af482c2ec6c49..abb3efd9937cd 100644 --- a/packages/grid/x-grid-modules/src/components/options-context.ts +++ b/packages/grid/x-grid-modules/src/components/options-context.ts @@ -1,4 +1,4 @@ import * as React from 'react'; -import { GridOptions } from '../models'; +import {DEFAULT_GRID_OPTIONS, GridOptions} from '../models'; -export const OptionsContext = React.createContext(undefined); +export const OptionsContext = React.createContext(DEFAULT_GRID_OPTIONS); diff --git a/packages/grid/x-grid-modules/src/components/row.tsx b/packages/grid/x-grid-modules/src/components/row.tsx index 42a2554bfefa6..20ef16951e529 100644 --- a/packages/grid/x-grid-modules/src/components/row.tsx +++ b/packages/grid/x-grid-modules/src/components/row.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { RowId } from '../models'; import { ROW_CSS_CLASS } from '../constants/cssClassesConstants'; +import {OptionsContext} from "./options-context"; export interface RowProps { id: RowId; @@ -12,6 +13,8 @@ export interface RowProps { export const Row: React.FC = ({ selected, id, className, rowIndex, children }) => { const cssClasses = (selected ? 'selected ' : ' ') + (className || ''); const ariaRowIndex = rowIndex + 2; // 1 for the header row and 1 as it's 1 based + const {rowHeight} = React.useContext(OptionsContext); + return (
= ({ selected, id, className, rowIndex, chi className={`${ROW_CSS_CLASS} ${cssClasses}`} aria-rowindex={ariaRowIndex} aria-selected={selected} + style = {{ + maxHeight: rowHeight, + minHeight: rowHeight + }} > {children}
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx index df4293688d0fe..ee7fb58a27eb5 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { DivProps } from './grid-root'; import { classnames } from '../../utils'; -export const ColumnsContainer = React.forwardRef((props, ref) => { - const { className, ...other } = props; - return
; +export const ColumnsContainer = React.forwardRef((props, ref) => { + const { className, height, ...other } = props; + return
; }); ColumnsContainer.displayName = 'ColumnsContainer'; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index 04720a99c8c31..09712ecb9cd40 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import styled from 'styled-components'; import { GridOptions } from '../../models'; import { classnames } from '../../utils'; +import styles from './styles.module.css'; export type DivProps = React.HTMLAttributes; @@ -9,248 +9,14 @@ export interface GridRootProps { options: GridOptions; } -export const RootStyle = styled.div` - box-sizing: border-box; - * { - box-sizing: border-box; - } - &.grid-root { - position: relative; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, - Cantarell, 'Helvetica Neue', sans-serif; - border: 1px solid #bdc3c7; - border-radius: 4px; - outline: none; - display: flex; - flex: 1; - flex-direction: column; - - .main-grid-container { - position: relative; - flex-grow: 1; - flex-direction: column; - display: flex; - } - .watermark { - position: absolute; - pointer-events: none; - color: #8282829e; - z-index: 100000; - width: 100%; - text-align: center; - bottom: 50%; - right: 0; - letter-spacing: 5px; - font-size: 24px; - } - .footer { - display: flex; - justify-content: space-between; - flex-direction: row; - padding: 0 16px; - } - .row-count, - .selected-row-count { - display: flex; - align-items: center; - font-size: 0.875rem; - font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; - font-weight: 400; - line-height: 1.43; - letter-spacing: 0.01071em; - min-height: 48px; - } - @media (max-width: 650px) { - .row-count, - .selected-row-count { - display: none; - } - } - .material-cell:focus, - .material-col-cell:focus { - outline: dashed; - outline-color: black; - outline-width: 2px; - outline-offset: -3px; - } - .overlay { - top: ${(p) => p.options.headerHeight}px; - } - .columns-container { - position: absolute; - top: 0; - left: 0; - right: 0; - overflow-x: hidden; - overflow-y: hidden; - display: flex; - flex-direction: column; - border-bottom: 1px solid #bdc3c7; - z-index: 100; - - min-height: ${(p) => p.options.headerHeight}px; - max-height: ${(p) => p.options.headerHeight}px; - line-height: ${(p) => p.options.headerHeight}px; - - background-color: #f9f9f9; - color: #000000; - font-weight: 600; - font-size: 12px; - - .material-col-cell-wrapper { - display: flex; - width: 100%; - align-items: center; - - .material-col-cell { - position: relative; - display: flex; - padding: 0 16px; - border-right: ${(p) => (p.options.showColumnRightBorder ? '1px solid #bdc3c7' : 'none')}; - - &.sortable { - cursor: pointer; - } - - &.center { - justify-content: center; - } - - &.right { - justify-content: flex-end; - } - - .title { - text-transform: capitalize; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - & > .icon, - .sort-icon > .icon { - min-height: ${(p) => p.options.headerHeight}px; - } - .column-separator { - position: absolute; - right: -12px; - z-index: 100; - display: flex; - flex-direction: column; - justify-content: center; - min-height: ${(p) => p.options.headerHeight}px; - opacity: ${(p) => (p.options.showColumnRightBorder ? 0 : 1)}; - - .icon.separator { - color: #bdc3c7; - } - &:hover .separator.resizable { - cursor: col-resize; - color: inherit; - } - } - * { - max-height: ${(p) => p.options.headerHeight}px; - } - &.checkbox-selection-header-cell .checkbox-input { - padding: 12px; - } - } - &.scroll .material-col-cell:last-child { - border-right: none; - } - } - } - .data-container { - position: relative; - flex-grow: 1; - display: flex; - flex-direction: column; - } - .window { - position: absolute; - top: ${(p) => p.options.headerHeight}px; - bottom: 0px; - left: 0px; - right: 0px; - overflow-y: ${(p) => (p.options.autoHeight ? 'hidden' : 'auto')}; - overflow-x: auto; - - .viewport { - position: sticky; - top: 0px; - left: 0px; - display: flex; - flex-direction: column; - overflow: hidden; - } - .material-row { - display: flex; - width: fit-content; - max-height: ${(p) => p.options.rowHeight}px; - min-height: ${(p) => p.options.rowHeight}px; - background-color: #fff; - - &.even { - background-color: #fff; - } - - &.odd { - background-color: #fcfcfc; - } - - &:hover { - cursor: pointer; - background-color: #4b99ec52; - } - &.selected { - background-color: #4a98ec; - color: #fff; - } - - .material-cell { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: 0 16px; - line-height: ${(p) => p.options.rowHeight - 1}px; /* 1 = border bottom; */ - max-height: ${(p) => p.options.rowHeight}px; - min-height: ${(p) => p.options.rowHeight}px; - font-size: 12px; - border-bottom: 1px solid #bdc3c7; - - &.with-renderer { - display: flex; - flex-direction: column; - justify-content: center; - } - &.with-border { - border-right: 1px solid #bdc3c7; - } - &.right { - text-align: right; - } - &.center { - text-align: center; - } - &.checkbox-selection-cell .checkbox-input { - padding: 12px; - } - } - } - } - } -`; -RootStyle.displayName = 'RootStyle'; - export const GridRoot = React.forwardRef((props, ref) => { const { options, className, ...other } = props; return ( - ); diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css b/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css new file mode 100644 index 0000000000000..05d6953a49cbf --- /dev/null +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css @@ -0,0 +1,244 @@ +.gridRoot { + box-sizing: border-box; +} +.gridRoot * { + box-sizing: border-box; +} + +.gridRoot { + position: relative; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, + Cantarell, 'Helvetica Neue', sans-serif; + border: 1px solid #bdc3c7; + border-radius: 4px; + outline: none; + display: flex; + flex: 1; + flex-direction: column; +} +.gridRoot .main-grid-container { + position: relative; + flex-grow: 1; + flex-direction: column; + display: flex; +} +.gridRoot .watermark { + position: absolute; + pointer-events: none; + color: #8282829e; + z-index: 100000; + width: 100%; + text-align: center; + bottom: 50%; + right: 0; + letter-spacing: 5px; + font-size: 24px; +} +.gridRoot .footer { + display: flex; + justify-content: space-between; + flex-direction: row; + padding: 0 16px; +} +.gridRoot .row-count, +.gridRoot .selected-row-count { + display: flex; + align-items: center; + font-size: 0.875rem; + font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; + font-weight: 400; + line-height: 1.43; + letter-spacing: 0.01071em; + min-height: 48px; +} +@media (max-width: 650px) { + .gridRoot .row-count, + .gridRoot .selected-row-count { + display: none; + } +} +.gridRoot .material-cell:focus, +.gridRoot .material-col-cell:focus { + outline: dotted; + outline-color: #000; + outline-width: 2px; + outline-offset: -3px; +} +.gridRoot .overlay { + /*top: 56px; !* p.options.headerHeight *!*/ + + display: flex; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 15px; + align-self: center; + align-items: center; + z-index: 10; +} +.gridRoot .overlay .content { + flex: 1; + display: flex; + justify-content: center; +} + +.gridRoot .columns-container { + position: absolute; + top: 0; + left: 0; + right: 0; + overflow-x: hidden; + overflow-y: hidden; + display: flex; + flex-direction: column; + border-bottom: 1px solid #bdc3c7; + z-index: 100; + + /*min-height: 56px; !* p.options.headerHeight *!*/ + /*max-height: 56px; !* p.options.headerHeight *!*/ + /*line-height: 56px; !* p.options.headerHeight *!*/ + + background-color: #f9f9f9; + color: #000000; + font-weight: 600; + font-size: 12px; +} +.gridRoot .columns-container .material-col-cell-wrapper { + display: flex; + width: 100%; + align-items: center; +} +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell { + position: relative; + display: flex; + padding: 0 16px; + /*border-right: 'none'; !* todo override style in component *!*/ + /*border-right: ${(p) => (p.options.showColumnRightBorder ? '1px solid #bdc3c7' : 'none')};*/ +} +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.sortable { + cursor: pointer; + } + +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.center { + justify-content: center; + } + +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.right { + justify-content: flex-end; + } + +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .title { + text-transform: capitalize; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .title > .icon, +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .sort-icon > .icon { + /*min-height: 56px; !* p.options.headerHeight *!*/ + } +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .column-separator { + position: absolute; + right: -12px; + z-index: 100; + display: flex; + flex-direction: column; + justify-content: center; + /*min-height: 56px; !* p.options.headerHeight *!*/ + /*opacity: 1; !*${(p) => (p.options.showColumnRightBorder ? 0 : 1)};*!*/ +} +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .column-separator .icon.separator { + color: #bdc3c7; +} +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .column-separator:hover .separator.resizable { + cursor: col-resize; + color: inherit; + } +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell * { + max-height: 56px; +} +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.checkbox-selection-header-cell .checkbox-input { + padding: 12px; + } + +.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell-wrapper.scroll .material-col-cell:last-child { + border-right: none; + } + +.gridRoot .data-container { + position: relative; + flex-grow: 1; + display: flex; + flex-direction: column; +} +.gridRoot .window { + position: absolute; + /*top: 56px; !*p.options.headerHeight*!*/ + bottom: 0px; + left: 0px; + right: 0px; + /*overflow-y: auto; !*p.options.autoHeight ? 'hidden' : 'auto'*!*/ + overflow-x: auto; +} +.gridRoot .window .viewport { + position: sticky; + top: 0px; + left: 0px; + display: flex; + flex-direction: column; + overflow: hidden; +} +.gridRoot .window .material-row { + display: flex; + width: fit-content; + /*max-height: 52px; !*p.options.rowHeight*!*/ + /*min-height: 52px; !*p.options.rowHeight*!*/ + background-color: #fff; +} +.gridRoot .window .material-row.even { + background-color: #fff; + } + +.gridRoot .window .material-row.odd { + background-color: #fcfcfc; + } + +.gridRoot .window .material-row:hover { + cursor: pointer; + background-color: #4b99ec52; + } +.gridRoot .window .material-row.selected { + background-color: #4a98ec; + color: #fff; + } + +.gridRoot .window .material-cell { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 0 16px; + /*line-height: 51px; !* ${(p) => p.options.rowHeight - 1}px; !* 1 = border bottom; *!*/ + /*max-height: 52px; !*> p.options.rowHeight *!*/ + /*min-height: 52px; !*> p.options.rowHeight *!*/ + font-size: 12px; + border-bottom: 1px solid #bdc3c7; +} +.gridRoot .window .material-cell.with-renderer { + display: flex; + flex-direction: column; + justify-content: center; + } +.gridRoot .window .material-cell.with-border { + border-right: 1px solid #bdc3c7; + } +.gridRoot .window .material-cell.right { + text-align: right; + } +.gridRoot .window .material-cell.center { + text-align: center; + } +.gridRoot .window .material-cell.checkbox-selection-cell .checkbox-input { + padding: 12px; + } diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css.d.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css.d.ts new file mode 100644 index 0000000000000..3fd1b508b302e --- /dev/null +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css.d.ts @@ -0,0 +1,2 @@ +const classes: any; +export default classes; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx index d0b14f3b74200..4ae617ef8aa08 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx @@ -1,32 +1,15 @@ import * as React from 'react'; -import styled from 'styled-components'; import { classnames } from '../../utils'; import { DivProps } from './grid-root'; - -export const Overlay = styled.div` - display: flex; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 15px; - align-self: center; - align-items: center; - z-index: 10; - - .content { - flex: 1; - display: flex; - justify-content: center; - } -`; +import {OptionsContext} from "../options-context"; export function GridOverlay(props: DivProps) { const { className, children, ...other } = props; + const options = React.useContext(OptionsContext); return ( - +
{children}
- +
); } GridOverlay.displayName = 'GridOverlay'; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx index c86bb5ad18341..acad473fd703d 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx @@ -1,9 +1,13 @@ import * as React from 'react'; import { DivProps } from './grid-root'; import { classnames } from '../../utils'; +import {OptionsContext} from "../options-context"; export const Window = React.forwardRef((props, ref) => { + const {headerHeight, autoHeight} = React.useContext(OptionsContext); const { className, ...other } = props; - return
; + return
; }); Window.displayName = 'Window'; diff --git a/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts b/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts index 15cb9162cff4e..7d28c19812b88 100644 --- a/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts +++ b/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts @@ -2,5 +2,5 @@ export const CELL_CSS_CLASS = 'material-cell'; export const ROW_CSS_CLASS = 'material-row'; export const HEADER_CELL_CSS_CLASS = 'material-col-cell'; -export const ROOT_CSS_CLASS = 'grid-root'; +export const ROOT_CSS_CLASS = 'gridRoot'; export const DATA_CONTAINER_CSS_CLASS = 'data-container'; diff --git a/packages/grid/x-grid-modules/src/gridComponent.tsx b/packages/grid/x-grid-modules/src/gridComponent.tsx index bf5df96521b55..0226d2c5bdd63 100644 --- a/packages/grid/x-grid-modules/src/gridComponent.tsx +++ b/packages/grid/x-grid-modules/src/gridComponent.tsx @@ -182,12 +182,11 @@ export const GridComponent: React.FC = React.memo((props) => {customComponents.headerComponent}
- + diff --git a/packages/grid/x-grid/package.json b/packages/grid/x-grid/package.json index d6116b72ea7b1..b7df65aac8dec 100644 --- a/packages/grid/x-grid/package.json +++ b/packages/grid/x-grid/package.json @@ -31,8 +31,7 @@ }, "peerDependencies": { "@material-ui/core": "^4.9.12", - "react": "^16.13.1", - "styled-components": "^5.1.0" + "react": "^16.13.1" }, "scripts": { "precommit": "npm run lint", diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js index 31241696e28cd..dfa2108fe2ad3 100644 --- a/packages/storybook/.storybook/main.js +++ b/packages/storybook/.storybook/main.js @@ -33,6 +33,20 @@ module.exports = { } ], }); + config.module.rules.push({ + test: /\.css$/, + include: path.join(__dirname, 'src/components'), + use: [ + 'style-loader', + { + loader: 'typings-for-css-modules-loader', + options: { + modules: true, + namedExport: true + } + } + ] + }); if (__DEV__) { config.module.rules.push({ @@ -78,7 +92,7 @@ module.exports = { }; config.resolve = { ...config.resolve, - extensions: ['.js', '.ts', '.tsx'], + extensions: ['.js', '.ts', '.tsx', '.css'], alias: { '@material-ui/data-grid': path.resolve(__dirname, '../../../packages/grid/data-grid/src'), '@material-ui/x-grid-data-generator': path.resolve(__dirname, '../../../packages/grid/x-grid-data-generator/src'), diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 4059372c7cb5f..b9db4e6f1f74f 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -34,7 +34,9 @@ "@types/jest-image-snapshot": "^3.1.0", "@types/puppeteer": "^3.0.0", "babel-loader": "^8.1.0", + "babel-plugin-react-css-modules": "^5.2.6", "core-js": "^3.6.5", + "css-loader": "^4.2.1", "jest": "^26.0.1", "jest-image-snapshot": "^4.1.0", "jest-puppeteer": "^4.4.0", @@ -43,8 +45,10 @@ "source-map-loader": "^0.2.4", "start-server-and-test": "^1.11.3", "string-replace-loader": "^2.3.0", + "style-loader": "^1.2.1", "ts-loader": "^7.0.1", - "typescript": "^3.9.6" + "typescript": "^3.9.6", + "typescript-plugin-css-modules": "^2.4.0" }, "scripts": { "start": "start-storybook -p 6006 --ci", diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json index 6e9593d7f656b..52335183d0771 100644 --- a/packages/storybook/tsconfig.json +++ b/packages/storybook/tsconfig.json @@ -22,7 +22,19 @@ "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, - "types": ["node", "jest", "jest-image-snapshot"] + "types": ["node", "jest", "jest-image-snapshot"], + "plugins": [{ "name": "typescript-plugin-css-modules", + "options": { + "classnameTransform": "dashes", + "customMatcher": "\\.m\\.css$" + } + }], + "paths": { + "*": [ + "./typings/*" + ] + }, + "typeRoots" : ["./typings","node_modules/@types"] }, "include": ["src/**/*"], "exclude": ["__tests__", "**/*.test.ts", "node_modules", "lib", "build", "scripts"] diff --git a/packages/storybook/typings/styles.module.d.ts b/packages/storybook/typings/styles.module.d.ts new file mode 100644 index 0000000000000..e519e4b017f95 --- /dev/null +++ b/packages/storybook/typings/styles.module.d.ts @@ -0,0 +1,24 @@ +declare module '*.module.css' { + const classes: { [key: string]: string }; + export default classes; +} + +declare module '*.module.scss' { + const classes: { [key: string]: string }; + export default classes; +} + +declare module '*.module.sass' { + const classes: { [key: string]: string }; + export default classes; +} + +declare module '*.module.less' { + const classes: { [key: string]: string }; + export default classes; +} + +declare module '*.module.styl' { + const classes: { [key: string]: string }; + export default classes; +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 16f596b65e0d4..a97889367717c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,6 +26,12 @@ "@material-ui/x-license/*": ["./packages/license/src/¨"], "@material-ui/data-grid": ["./packages/grid/data-grid/src"], "@material-ui/data-grid/*": ["./packages/grid/data-grid/src/*"] - } + }, + "plugins": [{ "name": "typescript-plugin-css-modules", + "options": { + "classnameTransform": "dashes", + "customMatcher": "\\.m\\.css$" + } + }] } } diff --git a/yarn.lock b/yarn.lock index 59dd9e515e874..24a6500375bd4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -682,7 +682,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.3" -"@babel/plugin-syntax-jsx@^7.10.4": +"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c" integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g== @@ -5115,7 +5115,12 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.0.tgz#5c894537098785926d71e696114a53ce768ed773" integrity sha512-eyoaac3btgU8eJlvh01En8OCKzRqlLe2G5jDsCr3RiE2uLGMEEB1aaGwVVpwR8M95956tGH6R+9edC++OvzaVw== -ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.2, ajv@^6.5.5: +ajv-keywords@^3.2.0: + version "3.5.2" + resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d" + integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ== + +ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.2, ajv@^6.5.3, ajv@^6.5.5: version "6.12.3" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706" integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA== @@ -5929,6 +5934,24 @@ babel-plugin-preval@^2.0.0: babel-plugin-macros "^2.2.2" require-from-string "^2.0.2" +babel-plugin-react-css-modules@^5.2.6: + version "5.2.6" + resolved "https://registry.yarnpkg.com/babel-plugin-react-css-modules/-/babel-plugin-react-css-modules-5.2.6.tgz#176663dae4add31af780f1ec86d3a93115875c83" + integrity sha512-jBU/oVgoEg/58Dcu0tjyNvaXBllxJXip7hlpiX+e0CYTmDADWB484P4pJb7d0L6nWKSzyEqtePcBaq3SKalG/g== + dependencies: + "@babel/plugin-syntax-jsx" "^7.0.0" + "@babel/types" "^7.0.0" + ajv "^6.5.3" + ajv-keywords "^3.2.0" + generic-names "^2.0.1" + postcss "^7.0.2" + postcss-modules "^1.3.2" + postcss-modules-extract-imports "^1.2.0" + postcss-modules-local-by-default "^1.2.0" + postcss-modules-parser "^1.1.1" + postcss-modules-scope "^1.1.0" + postcss-modules-values "^1.3.0" + babel-plugin-react-docgen@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.1.0.tgz#1dfa447dac9ca32d625a123df5733a9e47287c26" @@ -6967,10 +6990,10 @@ chokidar@3.3.1: optionalDependencies: fsevents "~2.1.2" -chokidar@^3.0.0, chokidar@^3.4.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1" - integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g== +"chokidar@>=2.0.0 <4.0.0", chokidar@^3.3.0: + version "3.4.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d" + integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A== dependencies: anymatch "~3.1.1" braces "~3.0.2" @@ -6982,10 +7005,10 @@ chokidar@^3.0.0, chokidar@^3.4.1: optionalDependencies: fsevents "~2.1.2" -chokidar@^3.3.0: - version "3.4.2" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d" - integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A== +chokidar@^3.0.0, chokidar@^3.4.1: + version "3.4.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1" + integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g== dependencies: anymatch "~3.1.1" braces "~3.0.2" @@ -7915,6 +7938,13 @@ css-modules-loader-core@^1.1.0: postcss-modules-scope "1.1.0" postcss-modules-values "1.3.0" +css-parse@~2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4" + integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q= + dependencies: + css "^2.0.0" + css-select-base-adapter@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7" @@ -8881,7 +8911,7 @@ dotenv@^6.2.0: resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064" integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w== -dotenv@^8.0.0: +dotenv@^8.0.0, dotenv@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a" integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw== @@ -10512,6 +10542,13 @@ gauge@~2.7.3: strip-ansi "^3.0.1" wide-align "^1.1.0" +generic-names@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.3.tgz#2d786a121aee508876796939e8e3bff836c20917" + integrity sha1-LXhqEhruUIh2eWk56OO/+DbCCRc= + dependencies: + loader-utils "^0.2.16" + generic-names@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872" @@ -11498,11 +11535,18 @@ iconv-lite@0.4.24, iconv-lite@^0.4.13, iconv-lite@^0.4.24, iconv-lite@~0.4.13: dependencies: safer-buffer ">= 2.1.2 < 3" -icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0: +icss-replace-symbols@1.1.0, icss-replace-symbols@^1.0.2, icss-replace-symbols@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0= +icss-utils@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-3.0.1.tgz#ee70d3ae8cac38c6be5ed91e851b27eed343ad0f" + integrity sha1-7nDTroysOMa+XtkehRsn7tNDrQ8= + dependencies: + postcss "^6.0.2" + icss-utils@^4.0.0, icss-utils@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467" @@ -13311,6 +13355,11 @@ joi@^17.1.1: "@hapi/pinpoint" "^2.0.0" "@hapi/topo" "^5.0.0" +js-base64@^2.1.9: + version "2.6.4" + resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" + integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== + js-string-escape@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef" @@ -13886,6 +13935,21 @@ less@^3.10.3: request "^2.83.0" source-map "~0.6.0" +less@^3.11.1: + version "3.12.2" + resolved "https://registry.yarnpkg.com/less/-/less-3.12.2.tgz#157e6dd32a68869df8859314ad38e70211af3ab4" + integrity sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q== + dependencies: + tslib "^1.10.0" + optionalDependencies: + errno "^0.1.1" + graceful-fs "^4.1.2" + image-size "~0.5.0" + make-dir "^2.1.0" + mime "^1.4.1" + native-request "^1.0.5" + source-map "~0.6.0" + leven@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2" @@ -14031,6 +14095,28 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash._arrayeach@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/lodash._arrayeach/-/lodash._arrayeach-3.0.0.tgz#bab156b2a90d3f1bbd5c653403349e5e5933ef9e" + integrity sha1-urFWsqkNPxu9XGU0AzSeXlkz754= + +lodash._baseeach@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/lodash._baseeach/-/lodash._baseeach-3.0.4.tgz#cf8706572ca144e8d9d75227c990da982f932af3" + integrity sha1-z4cGVyyhROjZ11InyZDamC+TKvM= + dependencies: + lodash.keys "^3.0.0" + +lodash._bindcallback@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" + integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= + +lodash._getnative@^3.0.0: + version "3.9.1" + resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" + integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= + lodash._reinterpolate@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -14066,11 +14152,31 @@ lodash.flattendeep@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2" integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI= +lodash.foreach@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-3.0.3.tgz#6fd7efb79691aecd67fdeac2761c98e701d6c39a" + integrity sha1-b9fvt5aRrs1n/erCdhyY5wHWw5o= + dependencies: + lodash._arrayeach "^3.0.0" + lodash._baseeach "^3.0.0" + lodash._bindcallback "^3.0.0" + lodash.isarray "^3.0.0" + lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= +lodash.isarguments@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a" + integrity sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo= + +lodash.isarray@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" + integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U= + lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" @@ -14081,6 +14187,15 @@ lodash.ismatch@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37" integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc= +lodash.keys@^3.0.0: + version "3.1.2" + resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" + integrity sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo= + dependencies: + lodash._getnative "^3.0.0" + lodash.isarguments "^3.0.0" + lodash.isarray "^3.0.0" + lodash.memoize@4.x, lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -14909,7 +15024,7 @@ mkdirp-promise@^5.0.1: dependencies: mkdirp "*" -mkdirp@*, mkdirp@^1.0.3, mkdirp@^1.0.4: +mkdirp@*, mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== @@ -15065,6 +15180,11 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" +native-request@^1.0.5: + version "1.0.7" + resolved "https://registry.yarnpkg.com/native-request/-/native-request-1.0.7.tgz#ff742dc555b4c8f2f1c14b548639ba174e573856" + integrity sha512-9nRjinI9bmz+S7dgNtf4A70+/vPhnd+2krGpy4SUlADuOuSa24IDkNaZ+R/QT1wQ6S8jBdi6wE7fLekFZNfUpQ== + native-url@0.3.4: version "0.3.4" resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.3.4.tgz#29c943172aed86c63cee62c8c04db7f5756661f8" @@ -16488,6 +16608,13 @@ postcss-discard-overridden@^4.0.1: dependencies: postcss "^7.0.0" +postcss-filter-plugins@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-3.0.1.tgz#9d226e946d56542ab7c26123053459a331df545d" + integrity sha512-tRKbW4wWBEkSSFuJtamV2wkiV9rj6Yy7P3Y13+zaynlPEEZt8EgYKn3y/RBpMeIhNmHXFlSdzofml65hD5OafA== + dependencies: + postcss "^6.0.14" + postcss-flexbugs-fixes@^4.1.0: version "4.2.1" resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690" @@ -16502,6 +16629,17 @@ postcss-html@^0.36.0: dependencies: htmlparser2 "^3.10.0" +postcss-icss-selectors@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz#27fa1afcaab6c602c866cbb298f3218e9bc1c9b3" + integrity sha1-J/oa/Kq2xgLIZsuymPMhjpvBybM= + dependencies: + css-selector-tokenizer "^0.7.0" + generic-names "^1.0.2" + icss-utils "^3.0.1" + lodash "^4.17.4" + postcss "^6.0.2" + postcss-less@^3.1.4: version "3.1.4" resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad" @@ -16601,6 +16739,13 @@ postcss-modules-extract-imports@1.1.0: dependencies: postcss "^6.0.1" +postcss-modules-extract-imports@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz#dc87e34148ec7eab5f791f7cd5849833375b741a" + integrity sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw== + dependencies: + postcss "^6.0.1" + postcss-modules-extract-imports@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e" @@ -16608,7 +16753,7 @@ postcss-modules-extract-imports@^2.0.0: dependencies: postcss "^7.0.5" -postcss-modules-local-by-default@1.2.0: +postcss-modules-local-by-default@1.2.0, postcss-modules-local-by-default@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069" integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk= @@ -16626,7 +16771,16 @@ postcss-modules-local-by-default@^3.0.2, postcss-modules-local-by-default@^3.0.3 postcss-selector-parser "^6.0.2" postcss-value-parser "^4.1.0" -postcss-modules-scope@1.1.0: +postcss-modules-parser@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/postcss-modules-parser/-/postcss-modules-parser-1.1.1.tgz#95f71ad7916f0f39207bb81c401336c8d245738c" + integrity sha1-lfca15FvDzkge7gcQBM2yNJFc4w= + dependencies: + icss-replace-symbols "^1.0.2" + lodash.foreach "^3.0.3" + postcss "^5.0.10" + +postcss-modules-scope@1.1.0, postcss-modules-scope@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90" integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A= @@ -16642,7 +16796,7 @@ postcss-modules-scope@^2.2.0: postcss "^7.0.6" postcss-selector-parser "^6.0.0" -postcss-modules-values@1.3.0: +postcss-modules-values@1.3.0, postcss-modules-values@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20" integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA= @@ -16658,6 +16812,17 @@ postcss-modules-values@^3.0.0: icss-utils "^4.0.0" postcss "^7.0.6" +postcss-modules@^1.3.2: + version "1.5.0" + resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-1.5.0.tgz#08da6ce43fcfadbc685a021fe6ed30ef929f0bcc" + integrity sha512-KiAihzcV0TxTTNA5OXreyIXctuHOfR50WIhqBpc8pe0Q5dcs/Uap9EVlifOI9am7zGGdGOJQ6B1MPYKo2UxgOg== + dependencies: + css-modules-loader-core "^1.1.0" + generic-names "^2.0.1" + lodash.camelcase "^4.3.0" + postcss "^7.0.1" + string-hash "^1.1.1" + postcss-modules@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-2.0.0.tgz#473d0d7326651d8408585c2a154115d5cb36cce0" @@ -16895,7 +17060,17 @@ postcss@7.0.32, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.18 source-map "^0.6.1" supports-color "^6.1.0" -postcss@^6.0.1: +postcss@^5.0.10: + version "5.2.18" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" + integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg== + dependencies: + chalk "^1.1.3" + js-base64 "^2.1.9" + source-map "^0.5.6" + supports-color "^3.2.3" + +postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.2: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== @@ -18460,6 +18635,11 @@ reselect@^4.0.0: resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7" integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA== +reserved-words@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1" + integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE= + resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" @@ -18852,7 +19032,7 @@ safe-regex@^1.1.0: dependencies: ret "~0.1.10" -"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: +"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0: version "2.1.2" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== @@ -18883,6 +19063,13 @@ sass-loader@8.0.2: schema-utils "^2.6.1" semver "^6.3.0" +sass@^1.26.5: + version "1.26.10" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.10.tgz#851d126021cdc93decbf201d1eca2a20ee434760" + integrity sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw== + dependencies: + chokidar ">=2.0.0 <4.0.0" + sax@^1.1.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -20144,6 +20331,20 @@ stylis@3.5.4: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== +stylus@^0.54.7: + version "0.54.8" + resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147" + integrity sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg== + dependencies: + css-parse "~2.0.0" + debug "~3.1.0" + glob "^7.1.6" + mkdirp "~1.0.4" + safer-buffer "^2.1.2" + sax "~1.2.4" + semver "^6.3.0" + source-map "^0.7.3" + sugarss@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d" @@ -20893,6 +21094,23 @@ typedoc@^0.17.8: shelljs "^0.8.4" typedoc-default-themes "^0.10.2" +typescript-plugin-css-modules@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-2.4.0.tgz#64cc702ef5ef0d16cf95841cb576b05312fe1c57" + integrity sha512-+PUKk0Wb6/lvtYjLzdVUqkA2hQ84VH+zDZmpgXD8H9RhfTQ+YADSBJAsf66FZWB2sCENqeDuGVRyxvLxc5bBRw== + dependencies: + dotenv "^8.2.0" + icss-utils "^4.1.1" + less "^3.11.1" + lodash.camelcase "^4.3.0" + postcss "^7.0.27" + postcss-filter-plugins "^3.0.1" + postcss-icss-selectors "^2.0.3" + postcss-load-config "^2.1.0" + reserved-words "^0.1.2" + sass "^1.26.5" + stylus "^0.54.7" + typescript@^3.9.6: version "3.9.7" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" From 41199dadec4244089b3bab46994b7167a399118e Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 13 Aug 2020 18:50:27 +0200 Subject: [PATCH 02/29] fix rollup build --- babel.config.js | 2 +- packages/grid/x-grid-modules/package.json | 1 + packages/grid/x-grid-modules/rollup.config.js | 5 ++++ .../x-grid-modules/src/components/cell.tsx | 12 ++++++---- .../src/components/column-header-item.tsx | 8 +++---- .../components/column-header-separator.tsx | 13 +++++++--- .../components/column-header-sort-icon.tsx | 4 ++-- .../src/components/column-headers.tsx | 5 +--- .../src/components/options-context.ts | 2 +- .../x-grid-modules/src/components/row.tsx | 8 +++---- .../styled-wrappers/columns-container.tsx | 17 +++++++++---- .../components/styled-wrappers/grid-root.tsx | 7 +----- .../styled-wrappers/styles.module.css | 21 ---------------- .../styled-wrappers/window-overlay.tsx | 8 +++++-- .../src/components/styled-wrappers/window.tsx | 15 ++++++++---- packages/storybook/tsconfig.json | 14 +---------- packages/storybook/typings/styles.module.d.ts | 24 ------------------- tsconfig.json | 9 ++++--- yarn.lock | 20 ++++++++++++++++ 19 files changed, 93 insertions(+), 102 deletions(-) delete mode 100644 packages/storybook/typings/styles.module.d.ts diff --git a/babel.config.js b/babel.config.js index 74383d690bc32..16da2d0620836 100644 --- a/babel.config.js +++ b/babel.config.js @@ -41,7 +41,7 @@ module.exports = { }, }, ], -'react-css-modules', + 'react-css-modules', 'babel-plugin-optimize-clsx', ['@babel/plugin-proposal-class-properties', { loose: true }], ['@babel/plugin-proposal-object-rest-spread', { loose: true }], diff --git a/packages/grid/x-grid-modules/package.json b/packages/grid/x-grid-modules/package.json index 119ce0f950e40..f3563d066a1ae 100644 --- a/packages/grid/x-grid-modules/package.json +++ b/packages/grid/x-grid-modules/package.json @@ -15,6 +15,7 @@ "rollup": "^2.6.1", "rollup-plugin-cleaner": "^1.0.0", "rollup-plugin-dts": "^1.4.7", + "rollup-plugin-postcss": "^3.1.5", "rollup-plugin-sourcemaps": "^0.6.2", "rollup-plugin-terser": "^5.3.0", "rollup-plugin-typescript2": "^0.27.1", diff --git a/packages/grid/x-grid-modules/rollup.config.js b/packages/grid/x-grid-modules/rollup.config.js index 7a33100f7b847..7c8f077903eea 100644 --- a/packages/grid/x-grid-modules/rollup.config.js +++ b/packages/grid/x-grid-modules/rollup.config.js @@ -3,6 +3,7 @@ import cleaner from 'rollup-plugin-cleaner'; import sourceMaps from 'rollup-plugin-sourcemaps'; import { terser } from 'rollup-plugin-terser'; import dts from 'rollup-plugin-dts'; +import postcss from 'rollup-plugin-postcss'; import pkg from './package.json'; // dev build if watching, prod build if not @@ -29,6 +30,10 @@ export default [ cleaner({ targets: ['./dist/'], }), + postcss({ + extract: false, + modules: true + }), typescript(), !production && sourceMaps(), production && terser(), diff --git a/packages/grid/x-grid-modules/src/components/cell.tsx b/packages/grid/x-grid-modules/src/components/cell.tsx index b98153381dda0..2c0f21e1582ac 100644 --- a/packages/grid/x-grid-modules/src/components/cell.tsx +++ b/packages/grid/x-grid-modules/src/components/cell.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Alignement, CellValue } from '../models'; import { CELL_CSS_CLASS } from '../constants/cssClassesConstants'; import { classnames } from '../utils'; -import {OptionsContext} from "@material-ui/x-grid-modules/components/options-context"; +import { OptionsContext } from '@material-ui/x-grid-modules/components/options-context'; export interface GridCellProps { field?: string; @@ -38,7 +38,7 @@ export const Cell: React.FC = React.memo( align !== 'left' ? align : '', ); const valueToRender = formattedValue || value; - const {rowHeight} = React.useContext(OptionsContext); + const { rowHeight } = React.useContext(OptionsContext); return (
= React.memo( data-colindex={colIndex} data-rowindex={rowIndex} aria-colindex={colIndex} - style={{ minWidth: width, maxWidth: width, - lineHeight: `${rowHeight - 1 }px`, + style={{ + minWidth: width, + maxWidth: width, + lineHeight: `${rowHeight - 1}px`, minHeight: rowHeight, - maxHeight: rowHeight + maxHeight: rowHeight, }} tabIndex={tabIndex} > diff --git a/packages/grid/x-grid-modules/src/components/column-header-item.tsx b/packages/grid/x-grid-modules/src/components/column-header-item.tsx index 933b0f78bfc8e..19f74a87016fa 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-item.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-item.tsx @@ -6,7 +6,7 @@ import { classnames } from '../utils'; import { ColumnHeaderSortIcon } from './column-header-sort-icon'; import { ColumnHeaderTitle } from './column-header-title'; import { ColumnHeaderSeparator } from './column-header-separator'; -import {OptionsContext} from "./options-context"; +import { OptionsContext } from './options-context'; interface ColumnHeaderItemProps { column: ColDef; @@ -15,9 +15,9 @@ interface ColumnHeaderItemProps { } export const ColumnHeaderItem = React.memo( - ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => { + ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => { const api = React.useContext(ApiContext); - const {headerHeight, showColumnRightBorder} = React.useContext(OptionsContext); + const { headerHeight, showColumnRightBorder } = React.useContext(OptionsContext); const cssClass = classnames( HEADER_CELL_CSS_CLASS, @@ -56,7 +56,7 @@ export const ColumnHeaderItem = React.memo( maxWidth: width, maxHeight: headerHeight, minHeight: headerHeight, - borderRight: showColumnRightBorder ? '1px solid #bdc3c7' : 'none' + borderRight: showColumnRightBorder ? '1px solid #bdc3c7' : 'none', }} role="columnheader" tabIndex={-1} diff --git a/packages/grid/x-grid-modules/src/components/column-header-separator.tsx b/packages/grid/x-grid-modules/src/components/column-header-separator.tsx index 5df530fa6398c..d293ee9004435 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-separator.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-separator.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useIcons } from '../hooks/utils/useIcons'; -import {OptionsContext} from "./options-context"; +import { OptionsContext } from './options-context'; export interface ColumnHeaderSeparatorProps { resizable: boolean | undefined; @@ -10,7 +10,7 @@ export interface ColumnHeaderSeparatorProps { export const ColumnHeaderSeparator: React.FC = React.memo( ({ onResize, resizable }) => { const icons = useIcons(); - const {showColumnRightBorder, headerHeight} = React.useContext(OptionsContext); + const { showColumnRightBorder, headerHeight } = React.useContext(OptionsContext); const resizeIconProps = { className: `icon separator ${resizable ? 'resizable' : ''}`, @@ -19,7 +19,14 @@ export const ColumnHeaderSeparator: React.FC = React const icon = React.createElement(icons!.columnResize!, resizeIconProps); - return
{icon}
; + return ( +
+ {icon} +
+ ); }, ); ColumnHeaderSeparator.displayName = 'ColumnHeaderSeparator'; diff --git a/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx b/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx index f3c2c70938977..33b0c501b36b5 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx @@ -13,8 +13,8 @@ export interface ColumnHeaderSortIconProps { const getIcon = (icons: IconsOptions, direction: SortDirection, height: number): React.ReactNode => direction === 'asc' - ? React.createElement(icons!.columnSortedAscending!, {styles: {minHeight: height}}) - : React.createElement(icons!.columnSortedDescending!, {styles: {minHeight: height}}); + ? React.createElement(icons!.columnSortedAscending!, { styles: { minHeight: height } }) + : React.createElement(icons!.columnSortedDescending!, { styles: { minHeight: height } }); export const ColumnHeaderSortIcon: React.FC = React.memo( ({ direction, index, hide, height }) => { diff --git a/packages/grid/x-grid-modules/src/components/column-headers.tsx b/packages/grid/x-grid-modules/src/components/column-headers.tsx index c60d37081be08..c740a0c8ecd1f 100644 --- a/packages/grid/x-grid-modules/src/components/column-headers.tsx +++ b/packages/grid/x-grid-modules/src/components/column-headers.tsx @@ -72,10 +72,7 @@ export const ColumnsHeader = React.memo( style={{ minWidth: renderCtx?.totalSizes?.width }} > - +
); diff --git a/packages/grid/x-grid-modules/src/components/options-context.ts b/packages/grid/x-grid-modules/src/components/options-context.ts index abb3efd9937cd..72aae12b895a6 100644 --- a/packages/grid/x-grid-modules/src/components/options-context.ts +++ b/packages/grid/x-grid-modules/src/components/options-context.ts @@ -1,4 +1,4 @@ import * as React from 'react'; -import {DEFAULT_GRID_OPTIONS, GridOptions} from '../models'; +import { DEFAULT_GRID_OPTIONS, GridOptions } from '../models'; export const OptionsContext = React.createContext(DEFAULT_GRID_OPTIONS); diff --git a/packages/grid/x-grid-modules/src/components/row.tsx b/packages/grid/x-grid-modules/src/components/row.tsx index 20ef16951e529..332b00524388f 100644 --- a/packages/grid/x-grid-modules/src/components/row.tsx +++ b/packages/grid/x-grid-modules/src/components/row.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { RowId } from '../models'; import { ROW_CSS_CLASS } from '../constants/cssClassesConstants'; -import {OptionsContext} from "./options-context"; +import { OptionsContext } from './options-context'; export interface RowProps { id: RowId; @@ -13,7 +13,7 @@ export interface RowProps { export const Row: React.FC = ({ selected, id, className, rowIndex, children }) => { const cssClasses = (selected ? 'selected ' : ' ') + (className || ''); const ariaRowIndex = rowIndex + 2; // 1 for the header row and 1 as it's 1 based - const {rowHeight} = React.useContext(OptionsContext); + const { rowHeight } = React.useContext(OptionsContext); return (
= ({ selected, id, className, rowIndex, chi className={`${ROW_CSS_CLASS} ${cssClasses}`} aria-rowindex={ariaRowIndex} aria-selected={selected} - style = {{ + style={{ maxHeight: rowHeight, - minHeight: rowHeight + minHeight: rowHeight, }} > {children} diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx index ee7fb58a27eb5..3c00a1025b001 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx @@ -2,8 +2,17 @@ import * as React from 'react'; import { DivProps } from './grid-root'; import { classnames } from '../../utils'; -export const ColumnsContainer = React.forwardRef((props, ref) => { - const { className, height, ...other } = props; - return
; -}); +export const ColumnsContainer = React.forwardRef( + (props, ref) => { + const { className, height, ...other } = props; + return ( +
+ ); + }, +); ColumnsContainer.displayName = 'ColumnsContainer'; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index 09712ecb9cd40..7a93c6867adbd 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -13,12 +13,7 @@ export const GridRoot = React.forwardRef +
); }); GridRoot.displayName = 'GridRoot'; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css b/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css index 05d6953a49cbf..ae0405fabb188 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css @@ -65,8 +65,6 @@ outline-offset: -3px; } .gridRoot .overlay { - /*top: 56px; !* p.options.headerHeight *!*/ - display: flex; position: absolute; top: 0; @@ -95,10 +93,6 @@ border-bottom: 1px solid #bdc3c7; z-index: 100; - /*min-height: 56px; !* p.options.headerHeight *!*/ - /*max-height: 56px; !* p.options.headerHeight *!*/ - /*line-height: 56px; !* p.options.headerHeight *!*/ - background-color: #f9f9f9; color: #000000; font-weight: 600; @@ -113,8 +107,6 @@ position: relative; display: flex; padding: 0 16px; - /*border-right: 'none'; !* todo override style in component *!*/ - /*border-right: ${(p) => (p.options.showColumnRightBorder ? '1px solid #bdc3c7' : 'none')};*/ } .gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.sortable { cursor: pointer; @@ -134,10 +126,6 @@ overflow: hidden; white-space: nowrap; } -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .title > .icon, -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .sort-icon > .icon { - /*min-height: 56px; !* p.options.headerHeight *!*/ - } .gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .column-separator { position: absolute; right: -12px; @@ -145,8 +133,6 @@ display: flex; flex-direction: column; justify-content: center; - /*min-height: 56px; !* p.options.headerHeight *!*/ - /*opacity: 1; !*${(p) => (p.options.showColumnRightBorder ? 0 : 1)};*!*/ } .gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .column-separator .icon.separator { color: #bdc3c7; @@ -174,11 +160,9 @@ } .gridRoot .window { position: absolute; - /*top: 56px; !*p.options.headerHeight*!*/ bottom: 0px; left: 0px; right: 0px; - /*overflow-y: auto; !*p.options.autoHeight ? 'hidden' : 'auto'*!*/ overflow-x: auto; } .gridRoot .window .viewport { @@ -192,8 +176,6 @@ .gridRoot .window .material-row { display: flex; width: fit-content; - /*max-height: 52px; !*p.options.rowHeight*!*/ - /*min-height: 52px; !*p.options.rowHeight*!*/ background-color: #fff; } .gridRoot .window .material-row.even { @@ -219,9 +201,6 @@ text-overflow: ellipsis; white-space: nowrap; padding: 0 16px; - /*line-height: 51px; !* ${(p) => p.options.rowHeight - 1}px; !* 1 = border bottom; *!*/ - /*max-height: 52px; !*> p.options.rowHeight *!*/ - /*min-height: 52px; !*> p.options.rowHeight *!*/ font-size: 12px; border-bottom: 1px solid #bdc3c7; } diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx index 4ae617ef8aa08..84f778688ecdf 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx @@ -1,13 +1,17 @@ import * as React from 'react'; import { classnames } from '../../utils'; import { DivProps } from './grid-root'; -import {OptionsContext} from "../options-context"; +import { OptionsContext } from '../options-context'; export function GridOverlay(props: DivProps) { const { className, children, ...other } = props; const options = React.useContext(OptionsContext); return ( -
+
{children}
); diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx index acad473fd703d..6677da1d3a81d 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx @@ -1,13 +1,18 @@ import * as React from 'react'; import { DivProps } from './grid-root'; import { classnames } from '../../utils'; -import {OptionsContext} from "../options-context"; +import { OptionsContext } from '../options-context'; export const Window = React.forwardRef((props, ref) => { - const {headerHeight, autoHeight} = React.useContext(OptionsContext); + const { headerHeight, autoHeight } = React.useContext(OptionsContext); const { className, ...other } = props; - return
; + return ( +
+ ); }); Window.displayName = 'Window'; diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json index 52335183d0771..6e9593d7f656b 100644 --- a/packages/storybook/tsconfig.json +++ b/packages/storybook/tsconfig.json @@ -22,19 +22,7 @@ "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, - "types": ["node", "jest", "jest-image-snapshot"], - "plugins": [{ "name": "typescript-plugin-css-modules", - "options": { - "classnameTransform": "dashes", - "customMatcher": "\\.m\\.css$" - } - }], - "paths": { - "*": [ - "./typings/*" - ] - }, - "typeRoots" : ["./typings","node_modules/@types"] + "types": ["node", "jest", "jest-image-snapshot"] }, "include": ["src/**/*"], "exclude": ["__tests__", "**/*.test.ts", "node_modules", "lib", "build", "scripts"] diff --git a/packages/storybook/typings/styles.module.d.ts b/packages/storybook/typings/styles.module.d.ts deleted file mode 100644 index e519e4b017f95..0000000000000 --- a/packages/storybook/typings/styles.module.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -declare module '*.module.css' { - const classes: { [key: string]: string }; - export default classes; -} - -declare module '*.module.scss' { - const classes: { [key: string]: string }; - export default classes; -} - -declare module '*.module.sass' { - const classes: { [key: string]: string }; - export default classes; -} - -declare module '*.module.less' { - const classes: { [key: string]: string }; - export default classes; -} - -declare module '*.module.styl' { - const classes: { [key: string]: string }; - export default classes; -} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index a97889367717c..46ce0ced3dd5d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,11 +27,14 @@ "@material-ui/data-grid": ["./packages/grid/data-grid/src"], "@material-ui/data-grid/*": ["./packages/grid/data-grid/src/*"] }, - "plugins": [{ "name": "typescript-plugin-css-modules", + "plugins": [ + { + "name": "typescript-plugin-css-modules", "options": { "classnameTransform": "dashes", "customMatcher": "\\.m\\.css$" - } - }] + } + } + ] } } diff --git a/yarn.lock b/yarn.lock index 24a6500375bd4..00b618d1b615a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18905,6 +18905,26 @@ rollup-plugin-postcss@^3.1.2: safe-identifier "^0.4.1" style-inject "^0.3.0" +rollup-plugin-postcss@^3.1.5: + version "3.1.5" + resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.5.tgz#4bcc19a7f95ab8fb17fb0ca59080fe3887421db2" + integrity sha512-oPD3ubb1JDBwzNMca+OZUpYxyxrIw9ihhUyvEbOwzzj0rR2UEKm8GtfhFXVGDWwBGp5HIK8ss/r8vRStYDddRA== + dependencies: + chalk "^4.0.0" + concat-with-sourcemaps "^1.1.0" + cssnano "^4.1.10" + import-cwd "^3.0.0" + p-queue "^6.3.0" + pify "^5.0.0" + postcss "^7.0.27" + postcss-load-config "^2.1.0" + postcss-modules "^2.0.0" + promise.series "^0.2.0" + resolve "^1.16.1" + rollup-pluginutils "^2.8.2" + safe-identifier "^0.4.1" + style-inject "^0.3.0" + rollup-plugin-sourcemaps@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.6.2.tgz#1eed5a3e07b833dc14c4cdb1e63b300d340f4a74" From 691ed843ae55da9b5ec225d163d30a06a4e1a399 Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 13 Aug 2020 18:51:55 +0200 Subject: [PATCH 03/29] fix import --- packages/grid/x-grid-modules/src/components/cell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-grid-modules/src/components/cell.tsx b/packages/grid/x-grid-modules/src/components/cell.tsx index 2c0f21e1582ac..f454f0fd43495 100644 --- a/packages/grid/x-grid-modules/src/components/cell.tsx +++ b/packages/grid/x-grid-modules/src/components/cell.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Alignement, CellValue } from '../models'; import { CELL_CSS_CLASS } from '../constants/cssClassesConstants'; import { classnames } from '../utils'; -import { OptionsContext } from '@material-ui/x-grid-modules/components/options-context'; +import { OptionsContext } from './options-context'; export interface GridCellProps { field?: string; From b44a69e32a7eb24a08afa9eb424d9a891e46d8f0 Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 14 Aug 2020 16:08:12 +0200 Subject: [PATCH 04/29] convert styles to jss --- babel.config.js | 1 - packages/grid/x-grid-modules/package.json | 1 - packages/grid/x-grid-modules/rollup.config.js | 5 - .../src/components/column-header-item.tsx | 2 +- .../styled-wrappers/columns-container.tsx | 4 +- .../components/styled-wrappers/getStyles.ts | 225 ++++++++++++++++++ .../components/styled-wrappers/grid-root.tsx | 4 +- packages/storybook/.storybook/main.js | 17 +- packages/storybook/package.json | 6 +- tsconfig.json | 11 +- 10 files changed, 233 insertions(+), 43 deletions(-) create mode 100644 packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts diff --git a/babel.config.js b/babel.config.js index 16da2d0620836..d938a7760a114 100644 --- a/babel.config.js +++ b/babel.config.js @@ -41,7 +41,6 @@ module.exports = { }, }, ], - 'react-css-modules', 'babel-plugin-optimize-clsx', ['@babel/plugin-proposal-class-properties', { loose: true }], ['@babel/plugin-proposal-object-rest-spread', { loose: true }], diff --git a/packages/grid/x-grid-modules/package.json b/packages/grid/x-grid-modules/package.json index f3563d066a1ae..119ce0f950e40 100644 --- a/packages/grid/x-grid-modules/package.json +++ b/packages/grid/x-grid-modules/package.json @@ -15,7 +15,6 @@ "rollup": "^2.6.1", "rollup-plugin-cleaner": "^1.0.0", "rollup-plugin-dts": "^1.4.7", - "rollup-plugin-postcss": "^3.1.5", "rollup-plugin-sourcemaps": "^0.6.2", "rollup-plugin-terser": "^5.3.0", "rollup-plugin-typescript2": "^0.27.1", diff --git a/packages/grid/x-grid-modules/rollup.config.js b/packages/grid/x-grid-modules/rollup.config.js index 7c8f077903eea..7a33100f7b847 100644 --- a/packages/grid/x-grid-modules/rollup.config.js +++ b/packages/grid/x-grid-modules/rollup.config.js @@ -3,7 +3,6 @@ import cleaner from 'rollup-plugin-cleaner'; import sourceMaps from 'rollup-plugin-sourcemaps'; import { terser } from 'rollup-plugin-terser'; import dts from 'rollup-plugin-dts'; -import postcss from 'rollup-plugin-postcss'; import pkg from './package.json'; // dev build if watching, prod build if not @@ -30,10 +29,6 @@ export default [ cleaner({ targets: ['./dist/'], }), - postcss({ - extract: false, - modules: true - }), typescript(), !production && sourceMaps(), production && terser(), diff --git a/packages/grid/x-grid-modules/src/components/column-header-item.tsx b/packages/grid/x-grid-modules/src/components/column-header-item.tsx index 19f74a87016fa..d9ea9e98e55fc 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-item.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-item.tsx @@ -21,6 +21,7 @@ export const ColumnHeaderItem = React.memo( const cssClass = classnames( HEADER_CELL_CSS_CLASS, + showColumnRightBorder ? 'with-border' : '', column.headerClassName, column.headerAlign !== 'left' ? column.headerAlign : '', { sortable: column.sortable }, @@ -56,7 +57,6 @@ export const ColumnHeaderItem = React.memo( maxWidth: width, maxHeight: headerHeight, minHeight: headerHeight, - borderRight: showColumnRightBorder ? '1px solid #bdc3c7' : 'none', }} role="columnheader" tabIndex={-1} diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx index 3c00a1025b001..4f5b8411531c9 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx @@ -4,13 +4,13 @@ import { classnames } from '../../utils'; export const ColumnsContainer = React.forwardRef( (props, ref) => { - const { className, height, ...other } = props; + const { className, height, style, ...other } = props; return (
); }, diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts new file mode 100644 index 0000000000000..83abc1a87e3bd --- /dev/null +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -0,0 +1,225 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const getStyles = makeStyles({ + gridRoot: { + 'box-sizing': 'border-box', + position: 'relative', + 'font-family': `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`, + border: '1px solid #bdc3c7', + 'border-radius': '4px', + outline: 'none', + display: 'flex', + flex: 1, + 'flex-direction': 'column', + + '& *': { + 'box-sizing': 'border-box', + }, + + '& .main-grid-container': { + position: 'relative', + 'flex-grow': 1, + 'flex-direction': 'column', + display: 'flex', + }, + + '& .watermark': { + position: 'absolute', + 'pointer-events': 'none', + color: '#8282829e', + 'z-index': 100000, + width: '100%', + 'text-align': 'center', + bottom: '50%', + right: 0, + 'letter-spacing': '5px', + 'font-size': '24px', + }, + + '& .footer': { + display: 'flex', + 'justify-content': 'space-between', + 'flex-direction': 'row', + padding: '0 16px', + }, + + '& .row-count, & .selected-row-count': { + display: 'flex', + 'align-items': 'center', + 'font-size': '0.875rem', + 'font-family': `'Roboto', 'Helvetica', 'Arial', sans-serif`, + 'font-weight': 400, + 'line-height': 1.43, + 'letter-spacing': '0.01071em', + 'min-height': '48px', + }, + '@media (max-width: 650px)': { + '& .row-count, & .selected-row-count': { + display: 'none', + }, + }, + + '& .material-cell:focus, & .material-col-cell:focus': { + outline: 'dotted', + 'outline-color': '#000', + 'outline-width': '2px', + 'outline-offset': '-3px', + }, + '& .overlay': { + display: 'flex', + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: '15px', + 'align-self': 'center', + 'align-items': 'center', + 'z-index': 10, + }, + '& .overlay .content': { + flex: 1, + display: 'flex', + 'justify-content': 'center', + }, + + '& .columns-container': { + position: 'absolute', + top: 0, + left: 0, + right: 0, + 'overflow-x': 'hidden', + 'overflow-y': 'hidden', + display: 'flex', + 'flex-direction': 'column', + 'border-bottom': '1px solid #bdc3c7', + 'z-index': 100, + 'background-color': '#f9f9f9', + color: '#000000', + 'font-weight': 600, + 'font-size': '12px', + }, + '& .columns-container .material-col-cell-wrapper': { + display: 'flex', + width: '100%', + 'align-items': 'center', + }, + '& .columns-container .material-col-cell-wrapper .material-col-cell': { + position: 'relative', + display: 'flex', + padding: '0 16px', + }, + '& .columns-container .material-col-cell-wrapper .material-col-cell.sortable': { + cursor: 'pointer', + }, + + '& .columns-container .material-col-cell-wrapper .material-col-cell.center': { + 'justify-content': 'center', + }, + + '& .columns-container .material-col-cell-wrapper .material-col-cell.right': { + 'justify-content': 'flex-end', + }, + + '& .columns-container .material-col-cell-wrapper .material-col-cell .title': { + 'text-transform': 'capitalize', + 'text-overflow': 'ellipsis', + overflow: 'hidden', + 'white-space': 'nowrap', + }, + '& .columns-container .material-col-cell-wrapper .material-col-cell .column-separator': { + position: 'absolute', + right: '-12px', + 'z-index': 100, + display: 'flex', + 'flex-direction': 'column', + 'justify-content': 'center', + }, + '& .columns-container .material-col-cell-wrapper .material-col-cell .column-separator .icon.separator': { + color: '#bdc3c7', + }, + '& .columns-container .material-col-cell-wrapper .material-col-cell .column-separator:hover .separator.resizable': { + cursor: 'col-resize', + color: 'inherit', + }, + '& .columns-container .material-col-cell-wrapper .material-col-cell *': { + 'max-height': '56px', + }, + '& .columns-container .material-col-cell-wrapper .material-col-cell.checkbox-selection-header-cell .checkbox-input': { + padding: '12px', + }, + + '& .columns-container .material-col-cell-wrapper .material-col-cell-wrapper.scroll .material-col-cell:last-child': { + 'border-right': 'none', + }, + + '& .data-container': { + position: 'relative', + 'flex-grow': 1, + display: 'flex', + 'flex-direction': 'column', + }, + '& .window': { + position: 'absolute', + bottom: '0px', + left: '0px', + right: 0, + 'overflow-x': 'auto', + }, + '& .window .viewport': { + position: 'sticky', + top: '0px', + left: '0px', + display: 'flex', + 'flex-direction': 'column', + overflow: 'hidden', + }, + '& .window .material-row': { + display: 'flex', + width: 'fit-content', + 'background-color': '#fff', + }, + '& .window .material-row.even': { + 'background-color': '#fff', + }, + + '& .window .material-row.odd': { + 'background-color': '#fcfcfc', + }, + + '& .window .material-row:hover': { + cursor: 'pointer', + 'background-color': '#4b99ec52', + }, + '& .window .material-row.selected': { + 'background-color': '#4a98ec', + color: '#fff', + }, + + '& .window .material-cell': { + display: 'block', + overflow: 'hidden', + 'text-overflow': 'ellipsis', + 'white-space': 'nowrap', + padding: '0 16px', + 'font-size': '12px', + 'border-bottom': '1px solid #bdc3c7', + }, + '& .window .material-cell.with-renderer': { + display: 'flex', + 'flex-direction': 'column', + 'justify-content': 'center', + }, + '& .with-border': { + 'border-right': '1px solid #bdc3c7', + }, + '& .window .material-cell.right': { + 'text-align': 'right', + }, + '& .window .material-cell.center': { + 'text-align': 'center', + }, + '& .window .material-cell.checkbox-selection-cell .checkbox-input': { + padding: '12px', + }, + }, +}); diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index 7a93c6867adbd..f0cc2a1dbd5ea 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import { GridOptions } from '../../models'; import { classnames } from '../../utils'; -import styles from './styles.module.css'; +import { getStyles } from './getStyles'; export type DivProps = React.HTMLAttributes; export interface GridRootProps { options: GridOptions; } - export const GridRoot = React.forwardRef((props, ref) => { const { options, className, ...other } = props; + const styles = getStyles(); return (
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js index dfa2108fe2ad3..4615d496310df 100644 --- a/packages/storybook/.storybook/main.js +++ b/packages/storybook/.storybook/main.js @@ -33,21 +33,6 @@ module.exports = { } ], }); - config.module.rules.push({ - test: /\.css$/, - include: path.join(__dirname, 'src/components'), - use: [ - 'style-loader', - { - loader: 'typings-for-css-modules-loader', - options: { - modules: true, - namedExport: true - } - } - ] - }); - if (__DEV__) { config.module.rules.push({ test: /\.(js|ts|tsx)$/, @@ -92,7 +77,7 @@ module.exports = { }; config.resolve = { ...config.resolve, - extensions: ['.js', '.ts', '.tsx', '.css'], + extensions: ['.js', '.ts', '.tsx'], alias: { '@material-ui/data-grid': path.resolve(__dirname, '../../../packages/grid/data-grid/src'), '@material-ui/x-grid-data-generator': path.resolve(__dirname, '../../../packages/grid/x-grid-data-generator/src'), diff --git a/packages/storybook/package.json b/packages/storybook/package.json index b9db4e6f1f74f..4059372c7cb5f 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -34,9 +34,7 @@ "@types/jest-image-snapshot": "^3.1.0", "@types/puppeteer": "^3.0.0", "babel-loader": "^8.1.0", - "babel-plugin-react-css-modules": "^5.2.6", "core-js": "^3.6.5", - "css-loader": "^4.2.1", "jest": "^26.0.1", "jest-image-snapshot": "^4.1.0", "jest-puppeteer": "^4.4.0", @@ -45,10 +43,8 @@ "source-map-loader": "^0.2.4", "start-server-and-test": "^1.11.3", "string-replace-loader": "^2.3.0", - "style-loader": "^1.2.1", "ts-loader": "^7.0.1", - "typescript": "^3.9.6", - "typescript-plugin-css-modules": "^2.4.0" + "typescript": "^3.9.6" }, "scripts": { "start": "start-storybook -p 6006 --ci", diff --git a/tsconfig.json b/tsconfig.json index 46ce0ced3dd5d..16f596b65e0d4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,15 +26,6 @@ "@material-ui/x-license/*": ["./packages/license/src/¨"], "@material-ui/data-grid": ["./packages/grid/data-grid/src"], "@material-ui/data-grid/*": ["./packages/grid/data-grid/src/*"] - }, - "plugins": [ - { - "name": "typescript-plugin-css-modules", - "options": { - "classnameTransform": "dashes", - "customMatcher": "\\.m\\.css$" - } - } - ] + } } } From 81b34445128769599cdefa911af393a580a9cbeb Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 14 Aug 2020 16:30:08 +0200 Subject: [PATCH 05/29] fix style --- .../components/styled-wrappers/getStyles.ts | 72 ++++++++++++------- 1 file changed, 45 insertions(+), 27 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts index 83abc1a87e3bd..b45d6cad47c71 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -1,12 +1,13 @@ -import { makeStyles } from '@material-ui/core/styles'; +import { darken, fade, lighten, makeStyles } from '@material-ui/core/styles'; -export const getStyles = makeStyles({ +export const getStyles = makeStyles((theme) => ({ gridRoot: { + lineHeight: theme.typography.pxToRem(24), 'box-sizing': 'border-box', position: 'relative', - 'font-family': `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`, + 'font-family': theme.typography.fontFamily, border: '1px solid #bdc3c7', - 'border-radius': '4px', + 'border-radius': theme.shape.borderRadius, outline: 'none', display: 'flex', flex: 1, @@ -40,17 +41,17 @@ export const getStyles = makeStyles({ display: 'flex', 'justify-content': 'space-between', 'flex-direction': 'row', - padding: '0 16px', + padding: theme.spacing(0, 2), }, '& .row-count, & .selected-row-count': { display: 'flex', 'align-items': 'center', 'font-size': '0.875rem', - 'font-family': `'Roboto', 'Helvetica', 'Arial', sans-serif`, + 'font-family': theme.typography.fontFamily, 'font-weight': 400, 'line-height': 1.43, - 'letter-spacing': '0.01071em', + 'letter-spacing': theme.typography.body2, 'min-height': '48px', }, '@media (max-width: 650px)': { @@ -91,12 +92,16 @@ export const getStyles = makeStyles({ 'overflow-y': 'hidden', display: 'flex', 'flex-direction': 'column', - 'border-bottom': '1px solid #bdc3c7', + 'border-bottom': '1px solid', + 'border-color': + theme.palette.type === 'light' + ? lighten(fade(theme.palette.divider, 1), 0.88) + : darken(fade(theme.palette.divider, 1), 0.68), 'z-index': 100, 'background-color': '#f9f9f9', - color: '#000000', - 'font-weight': 600, - 'font-size': '12px', + color: theme.palette.text.primary, + 'font-weight': theme.typography.fontWeightMedium, + // 'font-size': '12px', }, '& .columns-container .material-col-cell-wrapper': { display: 'flex', @@ -177,22 +182,27 @@ export const getStyles = makeStyles({ display: 'flex', width: 'fit-content', 'background-color': '#fff', - }, - '& .window .material-row.even': { - 'background-color': '#fff', - }, + '&:hover': { + cursor: 'pointer', + backgroundColor: theme.palette.action.hover, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + }, '& .window .material-row.odd': { 'background-color': '#fcfcfc', }, - - '& .window .material-row:hover': { - cursor: 'pointer', - 'background-color': '#4b99ec52', - }, '& .window .material-row.selected': { - 'background-color': '#4a98ec', - color: '#fff', + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), + '&$focusVisible': { + backgroundColor: fade( + theme.palette.primary.main, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), + }, }, '& .window .material-cell': { @@ -200,9 +210,13 @@ export const getStyles = makeStyles({ overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap', - padding: '0 16px', - 'font-size': '12px', - 'border-bottom': '1px solid #bdc3c7', + padding: theme.spacing(0, 2), + + 'border-bottom': '1px solid', + 'border-color': + theme.palette.type === 'light' + ? lighten(fade(theme.palette.divider, 1), 0.88) + : darken(fade(theme.palette.divider, 1), 0.68), }, '& .window .material-cell.with-renderer': { display: 'flex', @@ -210,7 +224,11 @@ export const getStyles = makeStyles({ 'justify-content': 'center', }, '& .with-border': { - 'border-right': '1px solid #bdc3c7', + 'border-right': '1px solid', + 'border-color': + theme.palette.type === 'light' + ? lighten(fade(theme.palette.divider, 1), 0.88) + : darken(fade(theme.palette.divider, 1), 0.68), }, '& .window .material-cell.right': { 'text-align': 'right', @@ -222,4 +240,4 @@ export const getStyles = makeStyles({ padding: '12px', }, }, -}); +})); From 2b248d16b0f934e83aca8f11ed26b1168cb13f1f Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 14 Aug 2020 16:46:21 +0200 Subject: [PATCH 06/29] more cleanup --- .../x-grid-modules/src/components/row.tsx | 4 +- .../components/styled-wrappers/getStyles.ts | 2 +- .../components/styled-wrappers/grid-root.tsx | 3 +- .../src/constants/cssClassesConstants.ts | 2 +- yarn.lock | 274 ++---------------- 5 files changed, 24 insertions(+), 261 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/row.tsx b/packages/grid/x-grid-modules/src/components/row.tsx index 332b00524388f..76c3be5125bc1 100644 --- a/packages/grid/x-grid-modules/src/components/row.tsx +++ b/packages/grid/x-grid-modules/src/components/row.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { RowId } from '../models'; import { ROW_CSS_CLASS } from '../constants/cssClassesConstants'; import { OptionsContext } from './options-context'; +import {classnames} from "../utils"; export interface RowProps { id: RowId; @@ -11,7 +12,6 @@ export interface RowProps { } export const Row: React.FC = ({ selected, id, className, rowIndex, children }) => { - const cssClasses = (selected ? 'selected ' : ' ') + (className || ''); const ariaRowIndex = rowIndex + 2; // 1 for the header row and 1 as it's 1 based const { rowHeight } = React.useContext(OptionsContext); @@ -21,7 +21,7 @@ export const Row: React.FC = ({ selected, id, className, rowIndex, chi data-id={id} data-rowindex={rowIndex} role="row" - className={`${ROW_CSS_CLASS} ${cssClasses}`} + className={classnames(ROW_CSS_CLASS, className, {'selected': selected})} aria-rowindex={ariaRowIndex} aria-selected={selected} style={{ diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts index b45d6cad47c71..38a9afdb6eddd 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -1,7 +1,7 @@ import { darken, fade, lighten, makeStyles } from '@material-ui/core/styles'; export const getStyles = makeStyles((theme) => ({ - gridRoot: { + 'MuiDataGrid-root': { lineHeight: theme.typography.pxToRem(24), 'box-sizing': 'border-box', position: 'relative', diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index f0cc2a1dbd5ea..3a7bf63cf26f7 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { GridOptions } from '../../models'; import { classnames } from '../../utils'; import { getStyles } from './getStyles'; +import {ROOT_CSS_CLASS} from "../../constants"; export type DivProps = React.HTMLAttributes; @@ -13,7 +14,7 @@ export const GridRoot = React.forwardRef +
); }); GridRoot.displayName = 'GridRoot'; diff --git a/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts b/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts index 7d28c19812b88..a4b752e3b32fc 100644 --- a/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts +++ b/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts @@ -2,5 +2,5 @@ export const CELL_CSS_CLASS = 'material-cell'; export const ROW_CSS_CLASS = 'material-row'; export const HEADER_CELL_CSS_CLASS = 'material-col-cell'; -export const ROOT_CSS_CLASS = 'gridRoot'; +export const ROOT_CSS_CLASS = 'MuiDataGrid-root'; export const DATA_CONTAINER_CSS_CLASS = 'data-container'; diff --git a/yarn.lock b/yarn.lock index 00b618d1b615a..59dd9e515e874 100644 --- a/yarn.lock +++ b/yarn.lock @@ -682,7 +682,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.3" -"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.10.4": +"@babel/plugin-syntax-jsx@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c" integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g== @@ -5115,12 +5115,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.0.tgz#5c894537098785926d71e696114a53ce768ed773" integrity sha512-eyoaac3btgU8eJlvh01En8OCKzRqlLe2G5jDsCr3RiE2uLGMEEB1aaGwVVpwR8M95956tGH6R+9edC++OvzaVw== -ajv-keywords@^3.2.0: - version "3.5.2" - resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d" - integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ== - -ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.2, ajv@^6.5.3, ajv@^6.5.5: +ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.2, ajv@^6.5.5: version "6.12.3" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706" integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA== @@ -5934,24 +5929,6 @@ babel-plugin-preval@^2.0.0: babel-plugin-macros "^2.2.2" require-from-string "^2.0.2" -babel-plugin-react-css-modules@^5.2.6: - version "5.2.6" - resolved "https://registry.yarnpkg.com/babel-plugin-react-css-modules/-/babel-plugin-react-css-modules-5.2.6.tgz#176663dae4add31af780f1ec86d3a93115875c83" - integrity sha512-jBU/oVgoEg/58Dcu0tjyNvaXBllxJXip7hlpiX+e0CYTmDADWB484P4pJb7d0L6nWKSzyEqtePcBaq3SKalG/g== - dependencies: - "@babel/plugin-syntax-jsx" "^7.0.0" - "@babel/types" "^7.0.0" - ajv "^6.5.3" - ajv-keywords "^3.2.0" - generic-names "^2.0.1" - postcss "^7.0.2" - postcss-modules "^1.3.2" - postcss-modules-extract-imports "^1.2.0" - postcss-modules-local-by-default "^1.2.0" - postcss-modules-parser "^1.1.1" - postcss-modules-scope "^1.1.0" - postcss-modules-values "^1.3.0" - babel-plugin-react-docgen@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.1.0.tgz#1dfa447dac9ca32d625a123df5733a9e47287c26" @@ -6990,10 +6967,10 @@ chokidar@3.3.1: optionalDependencies: fsevents "~2.1.2" -"chokidar@>=2.0.0 <4.0.0", chokidar@^3.3.0: - version "3.4.2" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d" - integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A== +chokidar@^3.0.0, chokidar@^3.4.1: + version "3.4.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1" + integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g== dependencies: anymatch "~3.1.1" braces "~3.0.2" @@ -7005,10 +6982,10 @@ chokidar@3.3.1: optionalDependencies: fsevents "~2.1.2" -chokidar@^3.0.0, chokidar@^3.4.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1" - integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g== +chokidar@^3.3.0: + version "3.4.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d" + integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A== dependencies: anymatch "~3.1.1" braces "~3.0.2" @@ -7938,13 +7915,6 @@ css-modules-loader-core@^1.1.0: postcss-modules-scope "1.1.0" postcss-modules-values "1.3.0" -css-parse@~2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4" - integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q= - dependencies: - css "^2.0.0" - css-select-base-adapter@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7" @@ -8911,7 +8881,7 @@ dotenv@^6.2.0: resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064" integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w== -dotenv@^8.0.0, dotenv@^8.2.0: +dotenv@^8.0.0: version "8.2.0" resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a" integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw== @@ -10542,13 +10512,6 @@ gauge@~2.7.3: strip-ansi "^3.0.1" wide-align "^1.1.0" -generic-names@^1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.3.tgz#2d786a121aee508876796939e8e3bff836c20917" - integrity sha1-LXhqEhruUIh2eWk56OO/+DbCCRc= - dependencies: - loader-utils "^0.2.16" - generic-names@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872" @@ -11535,18 +11498,11 @@ iconv-lite@0.4.24, iconv-lite@^0.4.13, iconv-lite@^0.4.24, iconv-lite@~0.4.13: dependencies: safer-buffer ">= 2.1.2 < 3" -icss-replace-symbols@1.1.0, icss-replace-symbols@^1.0.2, icss-replace-symbols@^1.1.0: +icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0= -icss-utils@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-3.0.1.tgz#ee70d3ae8cac38c6be5ed91e851b27eed343ad0f" - integrity sha1-7nDTroysOMa+XtkehRsn7tNDrQ8= - dependencies: - postcss "^6.0.2" - icss-utils@^4.0.0, icss-utils@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467" @@ -13355,11 +13311,6 @@ joi@^17.1.1: "@hapi/pinpoint" "^2.0.0" "@hapi/topo" "^5.0.0" -js-base64@^2.1.9: - version "2.6.4" - resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" - integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== - js-string-escape@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef" @@ -13935,21 +13886,6 @@ less@^3.10.3: request "^2.83.0" source-map "~0.6.0" -less@^3.11.1: - version "3.12.2" - resolved "https://registry.yarnpkg.com/less/-/less-3.12.2.tgz#157e6dd32a68869df8859314ad38e70211af3ab4" - integrity sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q== - dependencies: - tslib "^1.10.0" - optionalDependencies: - errno "^0.1.1" - graceful-fs "^4.1.2" - image-size "~0.5.0" - make-dir "^2.1.0" - mime "^1.4.1" - native-request "^1.0.5" - source-map "~0.6.0" - leven@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2" @@ -14095,28 +14031,6 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" -lodash._arrayeach@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/lodash._arrayeach/-/lodash._arrayeach-3.0.0.tgz#bab156b2a90d3f1bbd5c653403349e5e5933ef9e" - integrity sha1-urFWsqkNPxu9XGU0AzSeXlkz754= - -lodash._baseeach@^3.0.0: - version "3.0.4" - resolved "https://registry.yarnpkg.com/lodash._baseeach/-/lodash._baseeach-3.0.4.tgz#cf8706572ca144e8d9d75227c990da982f932af3" - integrity sha1-z4cGVyyhROjZ11InyZDamC+TKvM= - dependencies: - lodash.keys "^3.0.0" - -lodash._bindcallback@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._getnative@^3.0.0: - version "3.9.1" - resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" - integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= - lodash._reinterpolate@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -14152,31 +14066,11 @@ lodash.flattendeep@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2" integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI= -lodash.foreach@^3.0.3: - version "3.0.3" - resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-3.0.3.tgz#6fd7efb79691aecd67fdeac2761c98e701d6c39a" - integrity sha1-b9fvt5aRrs1n/erCdhyY5wHWw5o= - dependencies: - lodash._arrayeach "^3.0.0" - lodash._baseeach "^3.0.0" - lodash._bindcallback "^3.0.0" - lodash.isarray "^3.0.0" - lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= -lodash.isarguments@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a" - integrity sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo= - -lodash.isarray@^3.0.0: - version "3.0.4" - resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" - integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U= - lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" @@ -14187,15 +14081,6 @@ lodash.ismatch@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37" integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc= -lodash.keys@^3.0.0: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" - integrity sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo= - dependencies: - lodash._getnative "^3.0.0" - lodash.isarguments "^3.0.0" - lodash.isarray "^3.0.0" - lodash.memoize@4.x, lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -15024,7 +14909,7 @@ mkdirp-promise@^5.0.1: dependencies: mkdirp "*" -mkdirp@*, mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4: +mkdirp@*, mkdirp@^1.0.3, mkdirp@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== @@ -15180,11 +15065,6 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" -native-request@^1.0.5: - version "1.0.7" - resolved "https://registry.yarnpkg.com/native-request/-/native-request-1.0.7.tgz#ff742dc555b4c8f2f1c14b548639ba174e573856" - integrity sha512-9nRjinI9bmz+S7dgNtf4A70+/vPhnd+2krGpy4SUlADuOuSa24IDkNaZ+R/QT1wQ6S8jBdi6wE7fLekFZNfUpQ== - native-url@0.3.4: version "0.3.4" resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.3.4.tgz#29c943172aed86c63cee62c8c04db7f5756661f8" @@ -16608,13 +16488,6 @@ postcss-discard-overridden@^4.0.1: dependencies: postcss "^7.0.0" -postcss-filter-plugins@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-3.0.1.tgz#9d226e946d56542ab7c26123053459a331df545d" - integrity sha512-tRKbW4wWBEkSSFuJtamV2wkiV9rj6Yy7P3Y13+zaynlPEEZt8EgYKn3y/RBpMeIhNmHXFlSdzofml65hD5OafA== - dependencies: - postcss "^6.0.14" - postcss-flexbugs-fixes@^4.1.0: version "4.2.1" resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690" @@ -16629,17 +16502,6 @@ postcss-html@^0.36.0: dependencies: htmlparser2 "^3.10.0" -postcss-icss-selectors@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz#27fa1afcaab6c602c866cbb298f3218e9bc1c9b3" - integrity sha1-J/oa/Kq2xgLIZsuymPMhjpvBybM= - dependencies: - css-selector-tokenizer "^0.7.0" - generic-names "^1.0.2" - icss-utils "^3.0.1" - lodash "^4.17.4" - postcss "^6.0.2" - postcss-less@^3.1.4: version "3.1.4" resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad" @@ -16739,13 +16601,6 @@ postcss-modules-extract-imports@1.1.0: dependencies: postcss "^6.0.1" -postcss-modules-extract-imports@^1.2.0: - version "1.2.1" - resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz#dc87e34148ec7eab5f791f7cd5849833375b741a" - integrity sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw== - dependencies: - postcss "^6.0.1" - postcss-modules-extract-imports@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e" @@ -16753,7 +16608,7 @@ postcss-modules-extract-imports@^2.0.0: dependencies: postcss "^7.0.5" -postcss-modules-local-by-default@1.2.0, postcss-modules-local-by-default@^1.2.0: +postcss-modules-local-by-default@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069" integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk= @@ -16771,16 +16626,7 @@ postcss-modules-local-by-default@^3.0.2, postcss-modules-local-by-default@^3.0.3 postcss-selector-parser "^6.0.2" postcss-value-parser "^4.1.0" -postcss-modules-parser@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/postcss-modules-parser/-/postcss-modules-parser-1.1.1.tgz#95f71ad7916f0f39207bb81c401336c8d245738c" - integrity sha1-lfca15FvDzkge7gcQBM2yNJFc4w= - dependencies: - icss-replace-symbols "^1.0.2" - lodash.foreach "^3.0.3" - postcss "^5.0.10" - -postcss-modules-scope@1.1.0, postcss-modules-scope@^1.1.0: +postcss-modules-scope@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90" integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A= @@ -16796,7 +16642,7 @@ postcss-modules-scope@^2.2.0: postcss "^7.0.6" postcss-selector-parser "^6.0.0" -postcss-modules-values@1.3.0, postcss-modules-values@^1.3.0: +postcss-modules-values@1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20" integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA= @@ -16812,17 +16658,6 @@ postcss-modules-values@^3.0.0: icss-utils "^4.0.0" postcss "^7.0.6" -postcss-modules@^1.3.2: - version "1.5.0" - resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-1.5.0.tgz#08da6ce43fcfadbc685a021fe6ed30ef929f0bcc" - integrity sha512-KiAihzcV0TxTTNA5OXreyIXctuHOfR50WIhqBpc8pe0Q5dcs/Uap9EVlifOI9am7zGGdGOJQ6B1MPYKo2UxgOg== - dependencies: - css-modules-loader-core "^1.1.0" - generic-names "^2.0.1" - lodash.camelcase "^4.3.0" - postcss "^7.0.1" - string-hash "^1.1.1" - postcss-modules@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-2.0.0.tgz#473d0d7326651d8408585c2a154115d5cb36cce0" @@ -17060,17 +16895,7 @@ postcss@7.0.32, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.18 source-map "^0.6.1" supports-color "^6.1.0" -postcss@^5.0.10: - version "5.2.18" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" - integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg== - dependencies: - chalk "^1.1.3" - js-base64 "^2.1.9" - source-map "^0.5.6" - supports-color "^3.2.3" - -postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.2: +postcss@^6.0.1: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== @@ -18635,11 +18460,6 @@ reselect@^4.0.0: resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7" integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA== -reserved-words@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1" - integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE= - resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" @@ -18905,26 +18725,6 @@ rollup-plugin-postcss@^3.1.2: safe-identifier "^0.4.1" style-inject "^0.3.0" -rollup-plugin-postcss@^3.1.5: - version "3.1.5" - resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.5.tgz#4bcc19a7f95ab8fb17fb0ca59080fe3887421db2" - integrity sha512-oPD3ubb1JDBwzNMca+OZUpYxyxrIw9ihhUyvEbOwzzj0rR2UEKm8GtfhFXVGDWwBGp5HIK8ss/r8vRStYDddRA== - dependencies: - chalk "^4.0.0" - concat-with-sourcemaps "^1.1.0" - cssnano "^4.1.10" - import-cwd "^3.0.0" - p-queue "^6.3.0" - pify "^5.0.0" - postcss "^7.0.27" - postcss-load-config "^2.1.0" - postcss-modules "^2.0.0" - promise.series "^0.2.0" - resolve "^1.16.1" - rollup-pluginutils "^2.8.2" - safe-identifier "^0.4.1" - style-inject "^0.3.0" - rollup-plugin-sourcemaps@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.6.2.tgz#1eed5a3e07b833dc14c4cdb1e63b300d340f4a74" @@ -19052,7 +18852,7 @@ safe-regex@^1.1.0: dependencies: ret "~0.1.10" -"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0: +"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: version "2.1.2" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== @@ -19083,13 +18883,6 @@ sass-loader@8.0.2: schema-utils "^2.6.1" semver "^6.3.0" -sass@^1.26.5: - version "1.26.10" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.10.tgz#851d126021cdc93decbf201d1eca2a20ee434760" - integrity sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw== - dependencies: - chokidar ">=2.0.0 <4.0.0" - sax@^1.1.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -20351,20 +20144,6 @@ stylis@3.5.4: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== -stylus@^0.54.7: - version "0.54.8" - resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147" - integrity sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg== - dependencies: - css-parse "~2.0.0" - debug "~3.1.0" - glob "^7.1.6" - mkdirp "~1.0.4" - safer-buffer "^2.1.2" - sax "~1.2.4" - semver "^6.3.0" - source-map "^0.7.3" - sugarss@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d" @@ -21114,23 +20893,6 @@ typedoc@^0.17.8: shelljs "^0.8.4" typedoc-default-themes "^0.10.2" -typescript-plugin-css-modules@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-2.4.0.tgz#64cc702ef5ef0d16cf95841cb576b05312fe1c57" - integrity sha512-+PUKk0Wb6/lvtYjLzdVUqkA2hQ84VH+zDZmpgXD8H9RhfTQ+YADSBJAsf66FZWB2sCENqeDuGVRyxvLxc5bBRw== - dependencies: - dotenv "^8.2.0" - icss-utils "^4.1.1" - less "^3.11.1" - lodash.camelcase "^4.3.0" - postcss "^7.0.27" - postcss-filter-plugins "^3.0.1" - postcss-icss-selectors "^2.0.3" - postcss-load-config "^2.1.0" - reserved-words "^0.1.2" - sass "^1.26.5" - stylus "^0.54.7" - typescript@^3.9.6: version "3.9.7" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" From 072a7169946123a97721ec47151594bddcd80c27 Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 14 Aug 2020 16:58:22 +0200 Subject: [PATCH 07/29] prettier --- packages/grid/x-grid-modules/src/components/row.tsx | 4 ++-- .../src/components/styled-wrappers/getStyles.ts | 2 +- .../src/components/styled-wrappers/grid-root.tsx | 8 ++++++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/row.tsx b/packages/grid/x-grid-modules/src/components/row.tsx index 76c3be5125bc1..8ddc89e178036 100644 --- a/packages/grid/x-grid-modules/src/components/row.tsx +++ b/packages/grid/x-grid-modules/src/components/row.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { RowId } from '../models'; import { ROW_CSS_CLASS } from '../constants/cssClassesConstants'; import { OptionsContext } from './options-context'; -import {classnames} from "../utils"; +import { classnames } from '../utils'; export interface RowProps { id: RowId; @@ -21,7 +21,7 @@ export const Row: React.FC = ({ selected, id, className, rowIndex, chi data-id={id} data-rowindex={rowIndex} role="row" - className={classnames(ROW_CSS_CLASS, className, {'selected': selected})} + className={classnames(ROW_CSS_CLASS, className, { selected: selected })} aria-rowindex={ariaRowIndex} aria-selected={selected} style={{ diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts index 38a9afdb6eddd..10d48b9739d0f 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -2,7 +2,7 @@ import { darken, fade, lighten, makeStyles } from '@material-ui/core/styles'; export const getStyles = makeStyles((theme) => ({ 'MuiDataGrid-root': { - lineHeight: theme.typography.pxToRem(24), + lineHeight: theme.typography.pxToRem(24), 'box-sizing': 'border-box', position: 'relative', 'font-family': theme.typography.fontFamily, diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index 3a7bf63cf26f7..f475f6e5317ac 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { GridOptions } from '../../models'; import { classnames } from '../../utils'; import { getStyles } from './getStyles'; -import {ROOT_CSS_CLASS} from "../../constants"; +import { ROOT_CSS_CLASS } from '../../constants'; export type DivProps = React.HTMLAttributes; @@ -14,7 +14,11 @@ export const GridRoot = React.forwardRef +
); }); GridRoot.displayName = 'GridRoot'; From dacbaf0d0d90273f9dfd8f6213163481598ca728 Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 14 Aug 2020 17:06:41 +0200 Subject: [PATCH 08/29] lint --- packages/grid/x-grid-modules/src/components/row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-grid-modules/src/components/row.tsx b/packages/grid/x-grid-modules/src/components/row.tsx index 8ddc89e178036..9c5014b007995 100644 --- a/packages/grid/x-grid-modules/src/components/row.tsx +++ b/packages/grid/x-grid-modules/src/components/row.tsx @@ -21,7 +21,7 @@ export const Row: React.FC = ({ selected, id, className, rowIndex, chi data-id={id} data-rowindex={rowIndex} role="row" - className={classnames(ROW_CSS_CLASS, className, { selected: selected })} + className={classnames(ROW_CSS_CLASS, className, { selected })} aria-rowindex={ariaRowIndex} aria-selected={selected} style={{ From 32511cd41e4fc066e4b98e5ebef14fca961f720e Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 7 Sep 2020 17:15:09 +0200 Subject: [PATCH 09/29] fix font styles and fix hover header error --- .../components/styled-wrappers/getStyles.ts | 12 +- .../styled-wrappers/styles.module.css | 223 ------------------ .../styled-wrappers/styles.module.css.d.ts | 2 - .../src/hooks/root/useEvents.ts | 3 + 4 files changed, 8 insertions(+), 232 deletions(-) delete mode 100644 packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css delete mode 100644 packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css.d.ts diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts index 10d48b9739d0f..6939aa3812e00 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -6,6 +6,7 @@ export const getStyles = makeStyles((theme) => ({ 'box-sizing': 'border-box', position: 'relative', 'font-family': theme.typography.fontFamily, + 'letter-spacing': theme.typography.body2, border: '1px solid #bdc3c7', 'border-radius': theme.shape.borderRadius, outline: 'none', @@ -48,10 +49,8 @@ export const getStyles = makeStyles((theme) => ({ display: 'flex', 'align-items': 'center', 'font-size': '0.875rem', - 'font-family': theme.typography.fontFamily, - 'font-weight': 400, + 'font-weight': theme.typography.fontWeightMedium, 'line-height': 1.43, - 'letter-spacing': theme.typography.body2, 'min-height': '48px', }, '@media (max-width: 650px)': { @@ -100,8 +99,8 @@ export const getStyles = makeStyles((theme) => ({ 'z-index': 100, 'background-color': '#f9f9f9', color: theme.palette.text.primary, - 'font-weight': theme.typography.fontWeightMedium, - // 'font-size': '12px', + 'font-weight': theme.typography.fontWeightBold, + 'font-size': theme.typography.fontSize, }, '& .columns-container .material-col-cell-wrapper': { display: 'flex', @@ -126,7 +125,6 @@ export const getStyles = makeStyles((theme) => ({ }, '& .columns-container .material-col-cell-wrapper .material-col-cell .title': { - 'text-transform': 'capitalize', 'text-overflow': 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', @@ -211,7 +209,7 @@ export const getStyles = makeStyles((theme) => ({ 'text-overflow': 'ellipsis', 'white-space': 'nowrap', padding: theme.spacing(0, 2), - + 'font-size': theme.typography.fontSize, 'border-bottom': '1px solid', 'border-color': theme.palette.type === 'light' diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css b/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css deleted file mode 100644 index ae0405fabb188..0000000000000 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css +++ /dev/null @@ -1,223 +0,0 @@ -.gridRoot { - box-sizing: border-box; -} -.gridRoot * { - box-sizing: border-box; -} - -.gridRoot { - position: relative; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, - Cantarell, 'Helvetica Neue', sans-serif; - border: 1px solid #bdc3c7; - border-radius: 4px; - outline: none; - display: flex; - flex: 1; - flex-direction: column; -} -.gridRoot .main-grid-container { - position: relative; - flex-grow: 1; - flex-direction: column; - display: flex; -} -.gridRoot .watermark { - position: absolute; - pointer-events: none; - color: #8282829e; - z-index: 100000; - width: 100%; - text-align: center; - bottom: 50%; - right: 0; - letter-spacing: 5px; - font-size: 24px; -} -.gridRoot .footer { - display: flex; - justify-content: space-between; - flex-direction: row; - padding: 0 16px; -} -.gridRoot .row-count, -.gridRoot .selected-row-count { - display: flex; - align-items: center; - font-size: 0.875rem; - font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; - font-weight: 400; - line-height: 1.43; - letter-spacing: 0.01071em; - min-height: 48px; -} -@media (max-width: 650px) { - .gridRoot .row-count, - .gridRoot .selected-row-count { - display: none; - } -} -.gridRoot .material-cell:focus, -.gridRoot .material-col-cell:focus { - outline: dotted; - outline-color: #000; - outline-width: 2px; - outline-offset: -3px; -} -.gridRoot .overlay { - display: flex; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 15px; - align-self: center; - align-items: center; - z-index: 10; -} -.gridRoot .overlay .content { - flex: 1; - display: flex; - justify-content: center; -} - -.gridRoot .columns-container { - position: absolute; - top: 0; - left: 0; - right: 0; - overflow-x: hidden; - overflow-y: hidden; - display: flex; - flex-direction: column; - border-bottom: 1px solid #bdc3c7; - z-index: 100; - - background-color: #f9f9f9; - color: #000000; - font-weight: 600; - font-size: 12px; -} -.gridRoot .columns-container .material-col-cell-wrapper { - display: flex; - width: 100%; - align-items: center; -} -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell { - position: relative; - display: flex; - padding: 0 16px; -} -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.sortable { - cursor: pointer; - } - -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.center { - justify-content: center; - } - -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.right { - justify-content: flex-end; - } - -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .title { - text-transform: capitalize; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .column-separator { - position: absolute; - right: -12px; - z-index: 100; - display: flex; - flex-direction: column; - justify-content: center; -} -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .column-separator .icon.separator { - color: #bdc3c7; -} -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell .column-separator:hover .separator.resizable { - cursor: col-resize; - color: inherit; - } -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell * { - max-height: 56px; -} -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell.checkbox-selection-header-cell .checkbox-input { - padding: 12px; - } - -.gridRoot .columns-container .material-col-cell-wrapper .material-col-cell-wrapper.scroll .material-col-cell:last-child { - border-right: none; - } - -.gridRoot .data-container { - position: relative; - flex-grow: 1; - display: flex; - flex-direction: column; -} -.gridRoot .window { - position: absolute; - bottom: 0px; - left: 0px; - right: 0px; - overflow-x: auto; -} -.gridRoot .window .viewport { - position: sticky; - top: 0px; - left: 0px; - display: flex; - flex-direction: column; - overflow: hidden; -} -.gridRoot .window .material-row { - display: flex; - width: fit-content; - background-color: #fff; -} -.gridRoot .window .material-row.even { - background-color: #fff; - } - -.gridRoot .window .material-row.odd { - background-color: #fcfcfc; - } - -.gridRoot .window .material-row:hover { - cursor: pointer; - background-color: #4b99ec52; - } -.gridRoot .window .material-row.selected { - background-color: #4a98ec; - color: #fff; - } - -.gridRoot .window .material-cell { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: 0 16px; - font-size: 12px; - border-bottom: 1px solid #bdc3c7; -} -.gridRoot .window .material-cell.with-renderer { - display: flex; - flex-direction: column; - justify-content: center; - } -.gridRoot .window .material-cell.with-border { - border-right: 1px solid #bdc3c7; - } -.gridRoot .window .material-cell.right { - text-align: right; - } -.gridRoot .window .material-cell.center { - text-align: center; - } -.gridRoot .window .material-cell.checkbox-selection-cell .checkbox-input { - padding: 12px; - } diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css.d.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css.d.ts deleted file mode 100644 index 3fd1b508b302e..0000000000000 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/styles.module.css.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -const classes: any; -export default classes; diff --git a/packages/grid/x-grid-modules/src/hooks/root/useEvents.ts b/packages/grid/x-grid-modules/src/hooks/root/useEvents.ts index 8fec4a71fce53..d4ef9065e3494 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useEvents.ts +++ b/packages/grid/x-grid-modules/src/hooks/root/useEvents.ts @@ -66,6 +66,9 @@ export function useEvents( if (isCell(elem)) { const cellEl = findParentElementFromClassName(elem, CELL_CSS_CLASS)! as HTMLElement; const rowEl = findParentElementFromClassName(elem, ROW_CSS_CLASS)! as HTMLElement; + if(rowEl == null) { + return null; + } const id = getIdFromRowElem(rowEl); const rowModel = apiRef.current.getRowFromId(id); const rowIndex = apiRef.current.getRowIndexFromId(id); From 7e7a644351bd2f24904ae93eefc10a90c002b52d Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 7 Sep 2020 17:25:06 +0200 Subject: [PATCH 10/29] remove some specificity on css --- .../components/styled-wrappers/getStyles.ts | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts index 6939aa3812e00..148622d529bbd 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -107,29 +107,29 @@ export const getStyles = makeStyles((theme) => ({ width: '100%', 'align-items': 'center', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell': { + '& .material-col-cell': { position: 'relative', display: 'flex', padding: '0 16px', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell.sortable': { + '& .material-col-cell.sortable': { cursor: 'pointer', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell.center': { + '& .material-col-cell.center': { 'justify-content': 'center', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell.right': { + '& .material-col-cell.right': { 'justify-content': 'flex-end', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell .title': { + '& .material-col-cell .title': { 'text-overflow': 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell .column-separator': { + '& .material-col-cell .column-separator': { position: 'absolute', right: '-12px', 'z-index': 100, @@ -137,21 +137,21 @@ export const getStyles = makeStyles((theme) => ({ 'flex-direction': 'column', 'justify-content': 'center', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell .column-separator .icon.separator': { + '& .material-col-cell .column-separator .icon.separator': { color: '#bdc3c7', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell .column-separator:hover .separator.resizable': { + '& .material-col-cell .column-separator:hover .separator.resizable': { cursor: 'col-resize', color: 'inherit', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell *': { + '& .material-col-cell *': { 'max-height': '56px', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell.checkbox-selection-header-cell .checkbox-input': { + '& .material-col-cell.checkbox-selection-header-cell .checkbox-input': { padding: '12px', }, - '& .columns-container .material-col-cell-wrapper .material-col-cell-wrapper.scroll .material-col-cell:last-child': { + '& .material-col-cell-wrapper.scroll .material-col-cell:last-child': { 'border-right': 'none', }, From 54f30f96c5eaf0e480285ae7bb80656f2514f43d Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 7 Sep 2020 17:33:12 +0200 Subject: [PATCH 11/29] fix prettier --- packages/grid/x-grid-modules/src/hooks/root/useEvents.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-grid-modules/src/hooks/root/useEvents.ts b/packages/grid/x-grid-modules/src/hooks/root/useEvents.ts index d4ef9065e3494..07ad3a757e3bf 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useEvents.ts +++ b/packages/grid/x-grid-modules/src/hooks/root/useEvents.ts @@ -66,7 +66,7 @@ export function useEvents( if (isCell(elem)) { const cellEl = findParentElementFromClassName(elem, CELL_CSS_CLASS)! as HTMLElement; const rowEl = findParentElementFromClassName(elem, ROW_CSS_CLASS)! as HTMLElement; - if(rowEl == null) { + if (rowEl == null) { return null; } const id = getIdFromRowElem(rowEl); From 16032d15f744c1a70c2b1bb10630d0320ac9427c Mon Sep 17 00:00:00 2001 From: damien tassone Date: Tue, 8 Sep 2020 11:51:34 +0200 Subject: [PATCH 12/29] Update packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts Co-authored-by: Olivier Tassinari --- .../src/components/styled-wrappers/getStyles.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts index 148622d529bbd..8cd742fc676ed 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -195,12 +195,6 @@ export const getStyles = makeStyles((theme) => ({ }, '& .window .material-row.selected': { backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), - '&$focusVisible': { - backgroundColor: fade( - theme.palette.primary.main, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), - }, }, '& .window .material-cell': { From dc2e18b550b9875cf77c7581b99c8f6077c2086d Mon Sep 17 00:00:00 2001 From: damien Date: Tue, 8 Sep 2020 15:52:43 +0200 Subject: [PATCH 13/29] cleanup styling --- .../grid/x-grid-modules/src/GridComponent.tsx | 4 +- .../src/components/column-headers.tsx | 2 +- .../components/styled-wrappers/getStyles.ts | 204 ++++++++---------- .../src/components/watermark.tsx | 20 +- .../src/constants/cssClassesConstants.ts | 8 +- 5 files changed, 113 insertions(+), 125 deletions(-) diff --git a/packages/grid/x-grid-modules/src/GridComponent.tsx b/packages/grid/x-grid-modules/src/GridComponent.tsx index e8189fba9ac44..fec0155659983 100644 --- a/packages/grid/x-grid-modules/src/GridComponent.tsx +++ b/packages/grid/x-grid-modules/src/GridComponent.tsx @@ -71,9 +71,7 @@ export const GridComponent = React.forwardRef { - return apiRef!.current.subscribeEvent(COMPONENT_ERROR, errorHandler); - }, [apiRef]); + React.useEffect(() => apiRef!.current.subscribeEvent(COMPONENT_ERROR, errorHandler), [apiRef]); React.useEffect(() => { apiRef!.current.showError(props.error); diff --git a/packages/grid/x-grid-modules/src/components/column-headers.tsx b/packages/grid/x-grid-modules/src/components/column-headers.tsx index c740a0c8ecd1f..a71ed1502f341 100644 --- a/packages/grid/x-grid-modules/src/components/column-headers.tsx +++ b/packages/grid/x-grid-modules/src/components/column-headers.tsx @@ -34,7 +34,7 @@ export interface ColumnsHeaderProps { export const ColumnsHeader = React.memo( React.forwardRef( ({ columns, hasScrollX, onResizeColumn, renderCtx }, columnsHeaderRef) => { - const wrapperCssClasses = `material-col-cell-wrapper ${hasScrollX ? 'scroll' : ''}`; + const wrapperCssClasses = `MuiDataGrid-col-cell-wrapper ${hasScrollX ? 'scroll' : ''}`; const api = React.useContext(ApiContext); if (!api) { diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts index 148622d529bbd..5f5e8dddc783b 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -1,69 +1,59 @@ import { darken, fade, lighten, makeStyles } from '@material-ui/core/styles'; +import { ROOT_CSS_CLASS } from '@material-ui/x-grid-modules'; -export const getStyles = makeStyles((theme) => ({ - 'MuiDataGrid-root': { +export const getStyles = makeStyles((theme) => { + const borderColor = + theme.palette.type === 'light' + ? lighten(fade(theme.palette.divider, 1), 0.88) + : darken(fade(theme.palette.divider, 1), 0.68); + + const gridStyle: any = {}; + gridStyle[ROOT_CSS_CLASS] = { lineHeight: theme.typography.pxToRem(24), - 'box-sizing': 'border-box', + boxSizing: 'border-box', position: 'relative', - 'font-family': theme.typography.fontFamily, - 'letter-spacing': theme.typography.body2, + fontFamily: theme.typography.fontFamily, + letterSpacing: theme.typography.body2, border: '1px solid #bdc3c7', - 'border-radius': theme.shape.borderRadius, + borderRadius: theme.shape.borderRadius, outline: 'none', display: 'flex', flex: 1, - 'flex-direction': 'column', + flexDirection: 'column', '& *': { - 'box-sizing': 'border-box', + boxSizing: 'border-box', }, '& .main-grid-container': { position: 'relative', - 'flex-grow': 1, - 'flex-direction': 'column', + flexGrow: 1, + flexDirection: 'column', display: 'flex', }, - - '& .watermark': { - position: 'absolute', - 'pointer-events': 'none', - color: '#8282829e', - 'z-index': 100000, - width: '100%', - 'text-align': 'center', - bottom: '50%', - right: 0, - 'letter-spacing': '5px', - 'font-size': '24px', - }, - '& .footer': { display: 'flex', - 'justify-content': 'space-between', - 'flex-direction': 'row', + justifyContent: 'space-between', + flexDirection: 'row', padding: theme.spacing(0, 2), }, - '& .row-count, & .selected-row-count': { display: 'flex', - 'align-items': 'center', - 'font-size': '0.875rem', - 'font-weight': theme.typography.fontWeightMedium, - 'line-height': 1.43, - 'min-height': '48px', + alignItems: 'center', + fontSize: '0.875rem', + fontWeight: theme.typography.fontWeightMedium, + lineHeight: 1.43, + minHeight: '48px', }, '@media (max-width: 650px)': { '& .row-count, & .selected-row-count': { display: 'none', }, }, - - '& .material-cell:focus, & .material-col-cell:focus': { + '& .MuiDataGrid-cell:focus, & .MuiDataGrid-col-cell:focus': { outline: 'dotted', - 'outline-color': '#000', - 'outline-width': '2px', - 'outline-offset': '-3px', + outlineWidth: '1px', + outlineOffset: '-2px', }, '& .overlay': { display: 'flex', @@ -72,14 +62,14 @@ export const getStyles = makeStyles((theme) => ({ left: 0, right: 0, bottom: '15px', - 'align-self': 'center', - 'align-items': 'center', - 'z-index': 10, + alignSelf: 'center', + alignItems: 'center', + zIndex: 10, }, '& .overlay .content': { flex: 1, display: 'flex', - 'justify-content': 'center', + justifyContent: 'center', }, '& .columns-container': { @@ -87,99 +77,95 @@ export const getStyles = makeStyles((theme) => ({ top: 0, left: 0, right: 0, - 'overflow-x': 'hidden', - 'overflow-y': 'hidden', + overflowX: 'hidden', + overflowY: 'hidden', display: 'flex', - 'flex-direction': 'column', - 'border-bottom': '1px solid', - 'border-color': - theme.palette.type === 'light' - ? lighten(fade(theme.palette.divider, 1), 0.88) - : darken(fade(theme.palette.divider, 1), 0.68), - 'z-index': 100, - 'background-color': '#f9f9f9', + flexDirection: 'column', + borderBottom: `1px solid ${borderColor}`, + zIndex: 100, + backgroundColor: '#f9f9f9', color: theme.palette.text.primary, - 'font-weight': theme.typography.fontWeightBold, - 'font-size': theme.typography.fontSize, + fontWeight: theme.typography.fontWeightBold, + fontSize: theme.typography.fontSize, }, - '& .columns-container .material-col-cell-wrapper': { + '& .columns-container .MuiDataGrid-col-cell-wrapper': { display: 'flex', width: '100%', - 'align-items': 'center', + alignItems: 'center', }, - '& .material-col-cell': { + '& .MuiDataGrid-col-cell': { position: 'relative', display: 'flex', padding: '0 16px', }, - '& .material-col-cell.sortable': { + '& .MuiDataGrid-col-cell.sortable': { cursor: 'pointer', }, - '& .material-col-cell.center': { - 'justify-content': 'center', + '& .MuiDataGrid-col-cell.center': { + justifyContent: 'center', }, - '& .material-col-cell.right': { - 'justify-content': 'flex-end', + '& .MuiDataGrid-col-cell.right': { + justifyContent: 'flex-end', }, - '& .material-col-cell .title': { - 'text-overflow': 'ellipsis', + '& .MuiDataGrid-col-cell .title': { + textOverflow: 'ellipsis', overflow: 'hidden', - 'white-space': 'nowrap', + whiteSpace: 'nowrap', }, - '& .material-col-cell .column-separator': { + '& .MuiDataGrid-col-cell .column-separator': { position: 'absolute', right: '-12px', - 'z-index': 100, + zIndex: 100, display: 'flex', - 'flex-direction': 'column', - 'justify-content': 'center', + flexDirection: 'column', + justifyContent: 'center', }, - '& .material-col-cell .column-separator .icon.separator': { + '& .MuiDataGrid-col-cell .column-separator .icon.separator': { color: '#bdc3c7', }, - '& .material-col-cell .column-separator:hover .separator.resizable': { + '& .MuiDataGrid-col-cell .column-separator:hover .separator.resizable': { cursor: 'col-resize', color: 'inherit', }, - '& .material-col-cell *': { - 'max-height': '56px', + '& .MuiDataGrid-col-cell *': { + maxHeight: '56px', }, - '& .material-col-cell.checkbox-selection-header-cell .checkbox-input': { + '& .MuiDataGrid-col-cell.checkbox-selection-header-cell .checkbox-input': { padding: '12px', }, - '& .material-col-cell-wrapper.scroll .material-col-cell:last-child': { - 'border-right': 'none', + '& .MuiDataGrid-col-cell-wrapper.scroll .MuiDataGrid-col-cell:last-child': { + borderRight: 'none', }, '& .data-container': { position: 'relative', - 'flex-grow': 1, + flexGrow: 1, display: 'flex', - 'flex-direction': 'column', + flexDirection: 'column', }, '& .window': { position: 'absolute', bottom: '0px', left: '0px', right: 0, - 'overflow-x': 'auto', + overflowX: 'auto', }, '& .window .viewport': { position: 'sticky', top: '0px', left: '0px', display: 'flex', - 'flex-direction': 'column', + flexDirection: 'column', overflow: 'hidden', }, - '& .window .material-row': { + '& .window .MuiDataGrid-row': { display: 'flex', width: 'fit-content', - 'background-color': '#fff', + backgroundColor: '#fff', '&:hover': { cursor: 'pointer', @@ -190,52 +176,38 @@ export const getStyles = makeStyles((theme) => ({ }, }, }, - '& .window .material-row.odd': { - 'background-color': '#fcfcfc', + '& .window .MuiDataGrid-row.odd': { + backgroundColor: '#fcfcfc', }, - '& .window .material-row.selected': { + '& .window .MuiDataGrid-row.selected': { backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), - '&$focusVisible': { - backgroundColor: fade( - theme.palette.primary.main, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), - }, }, - - '& .window .material-cell': { + '& .window .MuiDataGrid-cell': { display: 'block', overflow: 'hidden', - 'text-overflow': 'ellipsis', - 'white-space': 'nowrap', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', padding: theme.spacing(0, 2), - 'font-size': theme.typography.fontSize, - 'border-bottom': '1px solid', - 'border-color': - theme.palette.type === 'light' - ? lighten(fade(theme.palette.divider, 1), 0.88) - : darken(fade(theme.palette.divider, 1), 0.68), - }, - '& .window .material-cell.with-renderer': { + fontSize: theme.typography.fontSize, + borderBottom: `1px solid ${borderColor}`, + }, + '& .window .MuiDataGrid-cell.with-renderer': { display: 'flex', - 'flex-direction': 'column', - 'justify-content': 'center', + flexDirection: 'column', + justifyContent: 'center', }, '& .with-border': { - 'border-right': '1px solid', - 'border-color': - theme.palette.type === 'light' - ? lighten(fade(theme.palette.divider, 1), 0.88) - : darken(fade(theme.palette.divider, 1), 0.68), + borderRight: `1px solid ${borderColor}`, }, - '& .window .material-cell.right': { - 'text-align': 'right', + '& .window .MuiDataGrid-cell.right': { + textAlign: 'right', }, - '& .window .material-cell.center': { - 'text-align': 'center', + '& .window .MuiDataGrid-cell.center': { + textAlign: 'center', }, - '& .window .material-cell.checkbox-selection-cell .checkbox-input': { + '& .window .MuiDataGrid-cell.checkbox-selection-cell .checkbox-input': { padding: '12px', }, - }, -})); + }; + return gridStyle; +}); diff --git a/packages/grid/x-grid-modules/src/components/watermark.tsx b/packages/grid/x-grid-modules/src/components/watermark.tsx index e7563ba94b4a3..269bea0372ac1 100644 --- a/packages/grid/x-grid-modules/src/components/watermark.tsx +++ b/packages/grid/x-grid-modules/src/components/watermark.tsx @@ -30,5 +30,23 @@ export const Watermark: React.FC = ({ licenseStatus }) => { return null; } - return
{getLicenseErrorMessage(licenseStatus)}
; + return ( +
+ {' '} + {getLicenseErrorMessage(licenseStatus)}{' '} +
+ ); }; diff --git a/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts b/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts index a4b752e3b32fc..c49499b60f883 100644 --- a/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts +++ b/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts @@ -1,6 +1,6 @@ // CSS_CLASSES_CONSTANTS -export const CELL_CSS_CLASS = 'material-cell'; -export const ROW_CSS_CLASS = 'material-row'; -export const HEADER_CELL_CSS_CLASS = 'material-col-cell'; -export const ROOT_CSS_CLASS = 'MuiDataGrid-root'; +export const CELL_CSS_CLASS = 'MuiDataGrid-cell'; +export const ROW_CSS_CLASS = 'MuiDataGrid-row'; +export const HEADER_CELL_CSS_CLASS = 'MuiDataGrid-col-cell'; +export const ROOT_CSS_CLASS = 'root'; export const DATA_CONTAINER_CSS_CLASS = 'data-container'; From 548ccaeaca912c9905e425f2b454f4da75e161ec Mon Sep 17 00:00:00 2001 From: damien Date: Tue, 8 Sep 2020 16:20:12 +0200 Subject: [PATCH 14/29] fix dependency no cycle --- packages/grid/x-grid-modules/src/GridComponent.tsx | 4 +++- .../src/components/styled-wrappers/getStyles.ts | 3 +-- .../src/components/styled-wrappers/grid-root.tsx | 2 +- .../grid/x-grid-modules/src/hooks/features/useComponents.tsx | 3 ++- packages/grid/x-grid-modules/src/index.ts | 2 +- 5 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/grid/x-grid-modules/src/GridComponent.tsx b/packages/grid/x-grid-modules/src/GridComponent.tsx index fec0155659983..22584a921ee88 100644 --- a/packages/grid/x-grid-modules/src/GridComponent.tsx +++ b/packages/grid/x-grid-modules/src/GridComponent.tsx @@ -11,7 +11,9 @@ import { } from './hooks/features'; import { DEFAULT_GRID_OPTIONS, ElementSize, RootContainerRef } from './models'; import { COMPONENT_ERROR, DATA_CONTAINER_CSS_CLASS } from './constants'; -import { ColumnsContainer, DataContainer, GridRoot } from './components/styled-wrappers'; +import { GridRoot } from './components/styled-wrappers/grid-root'; +import { DataContainer } from './components/styled-wrappers/data-container'; +import { ColumnsContainer } from './components/styled-wrappers/columns-container'; import { useVirtualRows } from './hooks/virtualization'; import { ApiContext, diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts index 5f5e8dddc783b..ee0f3c8e78b65 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts @@ -1,5 +1,4 @@ import { darken, fade, lighten, makeStyles } from '@material-ui/core/styles'; -import { ROOT_CSS_CLASS } from '@material-ui/x-grid-modules'; export const getStyles = makeStyles((theme) => { const borderColor = @@ -8,7 +7,7 @@ export const getStyles = makeStyles((theme) => { : darken(fade(theme.palette.divider, 1), 0.68); const gridStyle: any = {}; - gridStyle[ROOT_CSS_CLASS] = { + gridStyle['root'] = { lineHeight: theme.typography.pxToRem(24), boxSizing: 'border-box', position: 'relative', diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index f475f6e5317ac..2207d0c91c111 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { GridOptions } from '../../models'; import { classnames } from '../../utils'; import { getStyles } from './getStyles'; -import { ROOT_CSS_CLASS } from '../../constants'; +import { ROOT_CSS_CLASS } from '../../constants/cssClassesConstants'; export type DivProps = React.HTMLAttributes; diff --git a/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx b/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx index d992ebf2f50d0..7e4e6c1db6b3b 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx +++ b/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx @@ -9,8 +9,9 @@ import { InternalColumns, Rows, } from '../../models'; -import { LoadingOverlay, NoRowMessage } from '../../components'; import { ErrorMessage } from '../../components/error-message'; +import { LoadingOverlay } from "../../components/loading-overlay"; +import { NoRowMessage } from "../../components/no-row-message"; export const useComponents = ( columns: InternalColumns, diff --git a/packages/grid/x-grid-modules/src/index.ts b/packages/grid/x-grid-modules/src/index.ts index d887c60492594..ef348dc7f82bb 100644 --- a/packages/grid/x-grid-modules/src/index.ts +++ b/packages/grid/x-grid-modules/src/index.ts @@ -6,4 +6,4 @@ export * from './utils'; export * from './GridComponentProps'; export * from './GridComponent'; -export { useOptionsProp } from '@material-ui/x-grid-modules/hooks/utils/useOptionsProp'; +export * from './hooks/utils/useOptionsProp'; From 3bfd638185d823d757e628ce63fa8855c49fd066 Mon Sep 17 00:00:00 2001 From: damien Date: Tue, 8 Sep 2020 16:29:43 +0200 Subject: [PATCH 15/29] prettier --- .../grid/x-grid-modules/src/hooks/features/useComponents.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx b/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx index 7e4e6c1db6b3b..62266c85a97e5 100644 --- a/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx +++ b/packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx @@ -10,8 +10,8 @@ import { Rows, } from '../../models'; import { ErrorMessage } from '../../components/error-message'; -import { LoadingOverlay } from "../../components/loading-overlay"; -import { NoRowMessage } from "../../components/no-row-message"; +import { LoadingOverlay } from '../../components/loading-overlay'; +import { NoRowMessage } from '../../components/no-row-message'; export const useComponents = ( columns: InternalColumns, From a924dd7ab0269367ee5d745fbeabb307b117be02 Mon Sep 17 00:00:00 2001 From: damien Date: Tue, 8 Sep 2020 19:12:51 +0200 Subject: [PATCH 16/29] small cleanup --- .../components/styled-wrappers/grid-root.tsx | 7 ++-- .../{getStyles.ts => useStyles.ts} | 37 +++++++------------ .../src/components/watermark.tsx | 4 +- .../src/constants/cssClassesConstants.ts | 1 - .../grid/x-grid-modules/src/utils/domUtils.ts | 7 ++-- 5 files changed, 21 insertions(+), 35 deletions(-) rename packages/grid/x-grid-modules/src/components/styled-wrappers/{getStyles.ts => useStyles.ts} (87%) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index 2207d0c91c111..f9ab1e221f8a3 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import { GridOptions } from '../../models'; import { classnames } from '../../utils'; -import { getStyles } from './getStyles'; -import { ROOT_CSS_CLASS } from '../../constants/cssClassesConstants'; +import { useStyles } from './useStyles'; export type DivProps = React.HTMLAttributes; @@ -11,12 +10,12 @@ export interface GridRootProps { } export const GridRoot = React.forwardRef((props, ref) => { const { options, className, ...other } = props; - const styles = getStyles(); + const classes = useStyles(); return (
); diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts similarity index 87% rename from packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts rename to packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts index ee0f3c8e78b65..2b12537d13373 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/getStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts @@ -1,29 +1,25 @@ -import { darken, fade, lighten, makeStyles } from '@material-ui/core/styles'; +import {darken, fade, lighten, makeStyles, Theme} from '@material-ui/core/styles'; -export const getStyles = makeStyles((theme) => { +export const useStyles = makeStyles((theme) => { const borderColor = theme.palette.type === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.68); const gridStyle: any = {}; - gridStyle['root'] = { - lineHeight: theme.typography.pxToRem(24), + gridStyle.root = { boxSizing: 'border-box', position: 'relative', - fontFamily: theme.typography.fontFamily, - letterSpacing: theme.typography.body2, + ...theme.typography.body2, border: '1px solid #bdc3c7', borderRadius: theme.shape.borderRadius, outline: 'none', display: 'flex', flex: 1, flexDirection: 'column', - '& *': { boxSizing: 'border-box', }, - '& .main-grid-container': { position: 'relative', flexGrow: 1, @@ -42,7 +38,7 @@ export const getStyles = makeStyles((theme) => { fontSize: '0.875rem', fontWeight: theme.typography.fontWeightMedium, lineHeight: 1.43, - minHeight: '48px', + minHeight: 48, }, '@media (max-width: 650px)': { '& .row-count, & .selected-row-count': { @@ -60,7 +56,7 @@ export const getStyles = makeStyles((theme) => { top: 0, left: 0, right: 0, - bottom: '15px', + bottom: 15, alignSelf: 'center', alignItems: 'center', zIndex: 10, @@ -70,7 +66,6 @@ export const getStyles = makeStyles((theme) => { display: 'flex', justifyContent: 'center', }, - '& .columns-container': { position: 'absolute', top: 0, @@ -100,15 +95,12 @@ export const getStyles = makeStyles((theme) => { '& .MuiDataGrid-col-cell.sortable': { cursor: 'pointer', }, - '& .MuiDataGrid-col-cell.center': { justifyContent: 'center', }, - '& .MuiDataGrid-col-cell.right': { justifyContent: 'flex-end', }, - '& .MuiDataGrid-col-cell .title': { textOverflow: 'ellipsis', overflow: 'hidden', @@ -135,11 +127,9 @@ export const getStyles = makeStyles((theme) => { '& .MuiDataGrid-col-cell.checkbox-selection-header-cell .checkbox-input': { padding: '12px', }, - '& .MuiDataGrid-col-cell-wrapper.scroll .MuiDataGrid-col-cell:last-child': { borderRight: 'none', }, - '& .data-container': { position: 'relative', flexGrow: 1, @@ -165,7 +155,6 @@ export const getStyles = makeStyles((theme) => { display: 'flex', width: 'fit-content', backgroundColor: '#fff', - '&:hover': { cursor: 'pointer', backgroundColor: theme.palette.action.hover, @@ -175,13 +164,13 @@ export const getStyles = makeStyles((theme) => { }, }, }, - '& .window .MuiDataGrid-row.odd': { + '& .MuiDataGrid-row.odd': { backgroundColor: '#fcfcfc', }, - '& .window .MuiDataGrid-row.selected': { + '& .MuiDataGrid-row.selected': { backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), }, - '& .window .MuiDataGrid-cell': { + '& .MuiDataGrid-cell': { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', @@ -190,7 +179,7 @@ export const getStyles = makeStyles((theme) => { fontSize: theme.typography.fontSize, borderBottom: `1px solid ${borderColor}`, }, - '& .window .MuiDataGrid-cell.with-renderer': { + '& .MuiDataGrid-cell.with-renderer': { display: 'flex', flexDirection: 'column', justifyContent: 'center', @@ -198,13 +187,13 @@ export const getStyles = makeStyles((theme) => { '& .with-border': { borderRight: `1px solid ${borderColor}`, }, - '& .window .MuiDataGrid-cell.right': { + '& .MuiDataGrid-cell.right': { textAlign: 'right', }, - '& .window .MuiDataGrid-cell.center': { + '& .MuiDataGrid-cell.center': { textAlign: 'center', }, - '& .window .MuiDataGrid-cell.checkbox-selection-cell .checkbox-input': { + '& .MuiDataGrid-cell.checkbox-selection-cell .checkbox-input': { padding: '12px', }, }; diff --git a/packages/grid/x-grid-modules/src/components/watermark.tsx b/packages/grid/x-grid-modules/src/components/watermark.tsx index 269bea0372ac1..2c8123fadcfee 100644 --- a/packages/grid/x-grid-modules/src/components/watermark.tsx +++ b/packages/grid/x-grid-modules/src/components/watermark.tsx @@ -41,8 +41,8 @@ export const Watermark: React.FC = ({ licenseStatus }) => { textAlign: 'center', bottom: '50%', right: 0, - letterSpacing: '5px', - fontSize: '24px', + letterSpacing: 5, + fontSize: 24, }} > {' '} diff --git a/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts b/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts index c49499b60f883..eda43db7c8c71 100644 --- a/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts +++ b/packages/grid/x-grid-modules/src/constants/cssClassesConstants.ts @@ -2,5 +2,4 @@ export const CELL_CSS_CLASS = 'MuiDataGrid-cell'; export const ROW_CSS_CLASS = 'MuiDataGrid-row'; export const HEADER_CELL_CSS_CLASS = 'MuiDataGrid-col-cell'; -export const ROOT_CSS_CLASS = 'root'; export const DATA_CONTAINER_CSS_CLASS = 'data-container'; diff --git a/packages/grid/x-grid-modules/src/utils/domUtils.ts b/packages/grid/x-grid-modules/src/utils/domUtils.ts index d178e8e28ef8b..daa055750d0fa 100644 --- a/packages/grid/x-grid-modules/src/utils/domUtils.ts +++ b/packages/grid/x-grid-modules/src/utils/domUtils.ts @@ -2,7 +2,6 @@ import { CELL_CSS_CLASS, DATA_CONTAINER_CSS_CLASS, HEADER_CELL_CSS_CLASS, - ROOT_CSS_CLASS, } from '../constants/cssClassesConstants'; import { CellIndexCoordinates } from '../models/rows'; @@ -37,7 +36,7 @@ export function getFieldFromHeaderElem(colCellEl: Element): string { } export function findCellElementsFromCol(col: HTMLElement): NodeListOf | null { const field = getDataFromElem(col, 'field'); - const root = findParentElementFromClassName(col, ROOT_CSS_CLASS); + const root = findParentElementFromClassName(col, 'root'); if (!root) { throw new Error('Material-UI: The root element is not found.'); } @@ -46,10 +45,10 @@ export function findCellElementsFromCol(col: HTMLElement): NodeListOf | } export function findGridRootFromCurrent(elem: Element): HTMLDivElement | null { - if (elem.classList.contains(ROOT_CSS_CLASS)) { + if (elem.classList.contains('root')) { return elem as HTMLDivElement; } - const root = findParentElementFromClassName(elem, ROOT_CSS_CLASS); + const root = findParentElementFromClassName(elem, 'root'); return root as HTMLDivElement; } From b10794277d093344860a4f246ef963262a7f9a27 Mon Sep 17 00:00:00 2001 From: damien Date: Wed, 9 Sep 2020 14:05:39 +0200 Subject: [PATCH 17/29] prettier --- .../src/components/styled-wrappers/grid-root.tsx | 8 +------- .../src/components/styled-wrappers/useStyles.ts | 2 +- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index f9ab1e221f8a3..2dbc02e90790e 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -12,12 +12,6 @@ export const GridRoot = React.forwardRef - ); + return
; }); GridRoot.displayName = 'GridRoot'; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts index 2b12537d13373..987e03e3ac491 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts @@ -1,4 +1,4 @@ -import {darken, fade, lighten, makeStyles, Theme} from '@material-ui/core/styles'; +import { darken, fade, lighten, makeStyles, Theme } from '@material-ui/core/styles'; export const useStyles = makeStyles((theme) => { const borderColor = From b244586388667037b9e545885ba1a83119eb8876 Mon Sep 17 00:00:00 2001 From: damien Date: Wed, 9 Sep 2020 16:39:10 +0200 Subject: [PATCH 18/29] refactor styles and selector --- .../grid/x-grid-modules/src/GridComponent.tsx | 8 +- .../x-grid-modules/src/components/cell.tsx | 9 +- .../src/components/checkbox-renderer.tsx | 4 +- .../src/components/column-header-item.tsx | 13 ++- .../components/column-header-separator.tsx | 4 +- .../src/components/column-header-title.tsx | 2 +- .../src/components/column-headers.tsx | 2 +- .../src/components/row-cells.tsx | 2 +- .../src/components/row-count.tsx | 2 +- .../x-grid-modules/src/components/row.tsx | 2 +- .../src/components/selected-row-count.tsx | 2 +- .../src/components/sticky-container.tsx | 2 +- .../styled-wrappers/columns-container.tsx | 2 +- .../styled-wrappers/data-container.tsx | 4 +- .../src/components/styled-wrappers/footer.tsx | 2 +- .../components/styled-wrappers/useStyles.ts | 102 +++++++++--------- .../styled-wrappers/window-overlay.tsx | 4 +- .../src/components/styled-wrappers/window.tsx | 2 +- .../src/components/viewport.tsx | 2 +- .../src/constants/cssClassesConstants.ts | 2 +- .../grid/x-grid-modules/src/utils/domUtils.ts | 6 +- 21 files changed, 95 insertions(+), 83 deletions(-) diff --git a/packages/grid/x-grid-modules/src/GridComponent.tsx b/packages/grid/x-grid-modules/src/GridComponent.tsx index 22584a921ee88..69c056db8586b 100644 --- a/packages/grid/x-grid-modules/src/GridComponent.tsx +++ b/packages/grid/x-grid-modules/src/GridComponent.tsx @@ -166,7 +166,7 @@ export const GridComponent = React.forwardRef ( ( -
{customComponents.renderError(errorProps)}
+
+ {customComponents.renderError(errorProps)} +
)} > {customComponents.headerComponent} -
+
= React.memo( ({ value, @@ -34,8 +39,8 @@ export const Cell: React.FC = React.memo( const cssClasses = classnames( CELL_CSS_CLASS, cssClass, - { 'with-border': showRightBorder }, - align !== 'left' ? align : '', + { 'MuiDataGrid-withBorder': showRightBorder }, + align && align !== 'left' ? alignPropToCssClass[align] : '', ); const valueToRender = formattedValue || value; const { rowHeight } = React.useContext(OptionsContext); diff --git a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx index 19aade0df29d2..87293a3276d69 100644 --- a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx +++ b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx @@ -32,7 +32,7 @@ export const HeaderCheckbox: React.FC = React.memo(({ api }) => { indeterminate={isIndeterminate} checked={isChecked} onChange={handleChange} - className="checkbox-input" + className="MuiDataGrid-checkboxInput" inputProps={{ 'aria-label': 'Select All Rows checkbox' }} />
@@ -50,7 +50,7 @@ export const CellCheckboxRenderer: React.FC = React.memo(({ api, row
diff --git a/packages/grid/x-grid-modules/src/components/column-header-item.tsx b/packages/grid/x-grid-modules/src/components/column-header-item.tsx index d9ea9e98e55fc..f0b8b48b14575 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-item.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-item.tsx @@ -13,7 +13,10 @@ interface ColumnHeaderItemProps { colIndex: number; onResizeColumn?: (c: any) => void; } - +const headerAlignPropToCss = { + center: 'MuiDataGrid-colCellCenter', + right: 'MuiDataGrid-colCellRight', +}; export const ColumnHeaderItem = React.memo( ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => { const api = React.useContext(ApiContext); @@ -21,10 +24,12 @@ export const ColumnHeaderItem = React.memo( const cssClass = classnames( HEADER_CELL_CSS_CLASS, - showColumnRightBorder ? 'with-border' : '', + showColumnRightBorder ? 'MuiDataGrid-withBorder' : '', column.headerClassName, - column.headerAlign !== 'left' ? column.headerAlign : '', - { sortable: column.sortable }, + column.headerAlign && column.headerAlign !== 'left' + ? headerAlignPropToCss[column.headerAlign] + : '', + { 'MuiDataGrid-colCellSortable': column.sortable }, ); let headerComponent: React.ReactElement | null = null; diff --git a/packages/grid/x-grid-modules/src/components/column-header-separator.tsx b/packages/grid/x-grid-modules/src/components/column-header-separator.tsx index d293ee9004435..779270f6593e7 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-separator.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-separator.tsx @@ -13,7 +13,7 @@ export const ColumnHeaderSeparator: React.FC = React const { showColumnRightBorder, headerHeight } = React.useContext(OptionsContext); const resizeIconProps = { - className: `icon separator ${resizable ? 'resizable' : ''}`, + className: `MuiDataGrid-iconSeparator ${resizable ? 'MuiDataGrid-resizable' : ''}`, ...(resizable && onResize ? { onMouseDown: onResize } : {}), }; @@ -21,7 +21,7 @@ export const ColumnHeaderSeparator: React.FC = React return (
{icon} diff --git a/packages/grid/x-grid-modules/src/components/column-header-title.tsx b/packages/grid/x-grid-modules/src/components/column-header-title.tsx index beb14b48268e5..92e765e2bd586 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-title.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-title.tsx @@ -11,7 +11,7 @@ const ColumnHeaderInnerTitle = React.forwardRef< return (
diff --git a/packages/grid/x-grid-modules/src/components/column-headers.tsx b/packages/grid/x-grid-modules/src/components/column-headers.tsx index a71ed1502f341..c69012ea0133e 100644 --- a/packages/grid/x-grid-modules/src/components/column-headers.tsx +++ b/packages/grid/x-grid-modules/src/components/column-headers.tsx @@ -34,7 +34,7 @@ export interface ColumnsHeaderProps { export const ColumnsHeader = React.memo( React.forwardRef( ({ columns, hasScrollX, onResizeColumn, renderCtx }, columnsHeaderRef) => { - const wrapperCssClasses = `MuiDataGrid-col-cell-wrapper ${hasScrollX ? 'scroll' : ''}`; + const wrapperCssClasses = `MuiDataGrid-colCellWrapper ${hasScrollX ? 'scroll' : ''}`; const api = React.useContext(ApiContext); if (!api) { diff --git a/packages/grid/x-grid-modules/src/components/row-cells.tsx b/packages/grid/x-grid-modules/src/components/row-cells.tsx index 253034bd29ec8..139f6ba28d6de 100644 --- a/packages/grid/x-grid-modules/src/components/row-cells.tsx +++ b/packages/grid/x-grid-modules/src/components/row-cells.tsx @@ -85,7 +85,7 @@ export const RowCells: React.FC = React.memo((props) => { let cellComponent: React.ReactElement | null = null; if (column.renderCell) { cellComponent = column.renderCell(cellParams); - cssClassProp = { cssClass: `${cssClassProp.cssClass} with-renderer` }; + cssClassProp = { cssClass: `${cssClassProp.cssClass} MuiDataGrid-cellWithRenderer` }; } const cellProps: GridCellProps & { children: any } = { diff --git a/packages/grid/x-grid-modules/src/components/row-count.tsx b/packages/grid/x-grid-modules/src/components/row-count.tsx index 6894e1604c6a0..ee8cf4f9f30c1 100644 --- a/packages/grid/x-grid-modules/src/components/row-count.tsx +++ b/packages/grid/x-grid-modules/src/components/row-count.tsx @@ -4,5 +4,5 @@ export const RowCount: React.FC<{ rowCount: number }> = ({ rowCount }) => { if (rowCount === 0) { return null; } - return
Total Rows: {rowCount.toLocaleString()}
; + return
Total Rows: {rowCount.toLocaleString()}
; }; diff --git a/packages/grid/x-grid-modules/src/components/row.tsx b/packages/grid/x-grid-modules/src/components/row.tsx index 9c5014b007995..3646cd3a6b1d8 100644 --- a/packages/grid/x-grid-modules/src/components/row.tsx +++ b/packages/grid/x-grid-modules/src/components/row.tsx @@ -21,7 +21,7 @@ export const Row: React.FC = ({ selected, id, className, rowIndex, chi data-id={id} data-rowindex={rowIndex} role="row" - className={classnames(ROW_CSS_CLASS, className, { selected })} + className={classnames(ROW_CSS_CLASS, className, { 'Mui-selected': selected })} aria-rowindex={ariaRowIndex} aria-selected={selected} style={{ diff --git a/packages/grid/x-grid-modules/src/components/selected-row-count.tsx b/packages/grid/x-grid-modules/src/components/selected-row-count.tsx index d7371040ed6c3..19086d1bdf5e6 100644 --- a/packages/grid/x-grid-modules/src/components/selected-row-count.tsx +++ b/packages/grid/x-grid-modules/src/components/selected-row-count.tsx @@ -6,7 +6,7 @@ export const SelectedRowCount: React.FC<{ selectedRowCount: number }> = ({ selec } return ( -
+
{`${selectedRowCount.toLocaleString()} ${selectedRowCount > 1 ? 'rows' : 'row'} selected`}
); diff --git a/packages/grid/x-grid-modules/src/components/sticky-container.tsx b/packages/grid/x-grid-modules/src/components/sticky-container.tsx index 84947d7d493cb..f085e0d8d9627 100644 --- a/packages/grid/x-grid-modules/src/components/sticky-container.tsx +++ b/packages/grid/x-grid-modules/src/components/sticky-container.tsx @@ -3,7 +3,7 @@ import { ElementSize } from '../models'; export const StickyContainer: React.FC = ({ height, width, children }) => (
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/data-container.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/data-container.tsx index a390dba409b34..ebc47c87aafbb 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/data-container.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/data-container.tsx @@ -4,6 +4,8 @@ import { classnames } from '../../utils'; export const DataContainer = React.forwardRef((props, ref) => { const { className, ...other } = props; - return
; + return ( +
+ ); }); DataContainer.displayName = 'DataContainer'; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx index be1c7e09bbaa1..c6b6cc3b6b8a4 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx @@ -4,6 +4,6 @@ import { classnames } from '../../utils'; export const Footer = React.forwardRef((props, ref) => { const { className, ...other } = props; - return
; + return
; }); Footer.displayName = 'Footer'; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts index 987e03e3ac491..11bdbeeaed2bd 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts @@ -6,12 +6,12 @@ export const useStyles = makeStyles((theme) => { ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.68); - const gridStyle: any = {}; + const gridStyle: any = { name: 'MuiDataGrid' }; gridStyle.root = { boxSizing: 'border-box', position: 'relative', ...theme.typography.body2, - border: '1px solid #bdc3c7', + border: `1px solid ${borderColor}`, borderRadius: theme.shape.borderRadius, outline: 'none', display: 'flex', @@ -20,37 +20,37 @@ export const useStyles = makeStyles((theme) => { '& *': { boxSizing: 'border-box', }, - '& .main-grid-container': { + '& .MuiDataGrid-mainGridContainer': { position: 'relative', flexGrow: 1, flexDirection: 'column', display: 'flex', }, - '& .footer': { + '& .MuiDataGrid-footer': { display: 'flex', justifyContent: 'space-between', flexDirection: 'row', padding: theme.spacing(0, 2), }, - '& .row-count, & .selected-row-count': { + '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { display: 'flex', alignItems: 'center', - fontSize: '0.875rem', + fontSize: theme.typography.fontSize, fontWeight: theme.typography.fontWeightMedium, lineHeight: 1.43, minHeight: 48, }, '@media (max-width: 650px)': { - '& .row-count, & .selected-row-count': { + '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { display: 'none', }, }, - '& .MuiDataGrid-cell:focus, & .MuiDataGrid-col-cell:focus': { + '& .MuiDataGrid-cell:focus, & .MuiDataGrid-colCell:focus': { outline: 'dotted', - outlineWidth: '1px', - outlineOffset: '-2px', + outlineWidth: 1, + outlineOffset: -2, }, - '& .overlay': { + '& .MuiDataGrid-overlay': { display: 'flex', position: 'absolute', top: 0, @@ -61,100 +61,95 @@ export const useStyles = makeStyles((theme) => { alignItems: 'center', zIndex: 10, }, - '& .overlay .content': { + '& .MuiDataGrid-overlayContent': { flex: 1, display: 'flex', justifyContent: 'center', }, - '& .columns-container': { + '& .MuiDataGrid-columnsContainer': { position: 'absolute', top: 0, left: 0, right: 0, - overflowX: 'hidden', - overflowY: 'hidden', + overflow: 'hidden', display: 'flex', flexDirection: 'column', borderBottom: `1px solid ${borderColor}`, zIndex: 100, - backgroundColor: '#f9f9f9', + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.focusOpacity), color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, fontSize: theme.typography.fontSize, }, - '& .columns-container .MuiDataGrid-col-cell-wrapper': { + '& .MuiDataGrid-colCellWrapper': { display: 'flex', width: '100%', alignItems: 'center', }, - '& .MuiDataGrid-col-cell': { + '& .MuiDataGrid-colCell': { position: 'relative', display: 'flex', padding: '0 16px', }, - '& .MuiDataGrid-col-cell.sortable': { + '& .MuiDataGrid-colCellSortable': { cursor: 'pointer', }, - '& .MuiDataGrid-col-cell.center': { + '& .MuiDataGrid-colCellCenter': { justifyContent: 'center', }, - '& .MuiDataGrid-col-cell.right': { + '& .MuiDataGrid-colCellRight': { justifyContent: 'flex-end', }, - '& .MuiDataGrid-col-cell .title': { + '& .MuiDataGrid-colCellTitle': { textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', }, - '& .MuiDataGrid-col-cell .column-separator': { + '& .MuiDataGrid-columnSeparator': { position: 'absolute', - right: '-12px', + right: -12, zIndex: 100, display: 'flex', flexDirection: 'column', justifyContent: 'center', }, - '& .MuiDataGrid-col-cell .column-separator .icon.separator': { - color: '#bdc3c7', + '& .MuiDataGrid-iconSeparator': { + color: borderColor, }, - '& .MuiDataGrid-col-cell .column-separator:hover .separator.resizable': { + '& .MuiDataGrid-columnSeparator:hover .MuiDataGrid-resizable': { cursor: 'col-resize', color: 'inherit', }, - '& .MuiDataGrid-col-cell *': { - maxHeight: '56px', + '& .MuiDataGrid-colCell *': { + maxHeight: 56, }, - '& .MuiDataGrid-col-cell.checkbox-selection-header-cell .checkbox-input': { - padding: '12px', - }, - '& .MuiDataGrid-col-cell-wrapper.scroll .MuiDataGrid-col-cell:last-child': { + '& .MuiDataGrid-colCellWrapper.scroll .MuiDataGrid-colCell:last-child': { borderRight: 'none', }, - '& .data-container': { + '& .MuiDataGrid-dataContainer': { position: 'relative', flexGrow: 1, display: 'flex', flexDirection: 'column', }, - '& .window': { + '& .MuiDataGrid-window': { position: 'absolute', - bottom: '0px', - left: '0px', + bottom: 0, + left: 0, right: 0, overflowX: 'auto', }, - '& .window .viewport': { + '& .MuiDataGrid-viewport': { position: 'sticky', - top: '0px', - left: '0px', + top: 0, + left: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', }, - '& .window .MuiDataGrid-row': { + '& .MuiDataGrid-row': { display: 'flex', width: 'fit-content', - backgroundColor: '#fff', '&:hover': { cursor: 'pointer', backgroundColor: theme.palette.action.hover, @@ -164,10 +159,10 @@ export const useStyles = makeStyles((theme) => { }, }, }, - '& .MuiDataGrid-row.odd': { - backgroundColor: '#fcfcfc', + '& .MuiDataGrid-row.Mui-odd': { + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.activatedOpacity), }, - '& .MuiDataGrid-row.selected': { + '& .MuiDataGrid-row.Mui-selected': { backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), }, '& .MuiDataGrid-cell': { @@ -176,25 +171,28 @@ export const useStyles = makeStyles((theme) => { textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: theme.spacing(0, 2), - fontSize: theme.typography.fontSize, + ...theme.typography.body1, borderBottom: `1px solid ${borderColor}`, }, - '& .MuiDataGrid-cell.with-renderer': { + '& .MuiDataGrid-colCellWrapper .MuiDataGrid-cell': { + borderBottom: `none`, + }, + '& .MuiDataGrid-cellWithRenderer': { display: 'flex', flexDirection: 'column', justifyContent: 'center', }, - '& .with-border': { + '& .MuiDataGrid-withBorder': { borderRight: `1px solid ${borderColor}`, }, - '& .MuiDataGrid-cell.right': { + '& .MuiDataGrid-cellRight': { textAlign: 'right', }, - '& .MuiDataGrid-cell.center': { + '& .MuiDataGrid-cellCenter': { textAlign: 'center', }, - '& .MuiDataGrid-cell.checkbox-selection-cell .checkbox-input': { - padding: '12px', + '& .MuiDataGrid-checkboxInput': { + padding: 12, }, }; return gridStyle; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx index 84f778688ecdf..b6d722006e787 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx @@ -8,11 +8,11 @@ export function GridOverlay(props: DivProps) { const options = React.useContext(OptionsContext); return (
-
{children}
+
{children}
); } diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx index 6677da1d3a81d..d13a9cfb9f9aa 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx @@ -9,7 +9,7 @@ export const Window = React.forwardRef((props, ref) => return (
diff --git a/packages/grid/x-grid-modules/src/components/viewport.tsx b/packages/grid/x-grid-modules/src/components/viewport.tsx index 6812460c11542..23d9ad1b151ab 100644 --- a/packages/grid/x-grid-modules/src/components/viewport.tsx +++ b/packages/grid/x-grid-modules/src/components/viewport.tsx @@ -27,7 +27,7 @@ export const Viewport: ViewportType = React.forwardRef ( | null { const field = getDataFromElem(col, 'field'); - const root = findParentElementFromClassName(col, 'root'); + const root = findParentElementFromClassName(col, 'MuiXGrid-root'); if (!root) { throw new Error('Material-UI: The root element is not found.'); } @@ -45,10 +45,10 @@ export function findCellElementsFromCol(col: HTMLElement): NodeListOf | } export function findGridRootFromCurrent(elem: Element): HTMLDivElement | null { - if (elem.classList.contains('root')) { + if (elem.classList.contains('MuiXGrid-root')) { return elem as HTMLDivElement; } - const root = findParentElementFromClassName(elem, 'root'); + const root = findParentElementFromClassName(elem, 'MuiXGrid-root'); return root as HTMLDivElement; } From 883c789b56adfff8c489f8907e2d3150b7b33879 Mon Sep 17 00:00:00 2001 From: damien Date: Wed, 9 Sep 2020 17:06:24 +0200 Subject: [PATCH 19/29] fix test --- packages/grid/x-grid/src/XGrid.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-grid/src/XGrid.test.tsx b/packages/grid/x-grid/src/XGrid.test.tsx index 32f6eb9820353..74d897cf3fb3c 100644 --- a/packages/grid/x-grid/src/XGrid.test.tsx +++ b/packages/grid/x-grid/src/XGrid.test.tsx @@ -201,15 +201,15 @@ describe('', () => { const row = document.querySelector('[role="row"][aria-rowindex="2"]'); const checkbox = row!.querySelector('input'); - expect(row).to.not.have.class('selected'); + expect(row).to.not.have.class('MuiDataGrid-selected'); expect(checkbox).to.have.property('checked', false); fireEvent.click(screen.getByRole('cell', { name: 'Nike' })); - expect(row).to.have.class('selected'); + expect(row).to.have.class('Mui-selected'); expect(checkbox).to.have.property('checked', true); fireEvent.click(screen.getByRole('cell', { name: 'Nike' })); - expect(row).to.not.have.class('selected'); + expect(row).to.not.have.class('Mui-selected'); expect(checkbox).to.have.property('checked', false); }); }); From fac1d371ff61d70c08ffbd4535ecddb8a24d522f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 00:09:31 +0200 Subject: [PATCH 20/29] fix DataGrid resizing --- packages/grid/data-grid/src/DataGrid.tsx | 2 +- packages/grid/x-grid-modules/src/utils/domUtils.ts | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index 93c38ff3f4c9d..bae2546a4c300 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -35,7 +35,7 @@ const DataGrid2 = React.forwardRef(function DataG return ( | null { const field = getDataFromElem(col, 'field'); - const root = findParentElementFromClassName(col, 'MuiXGrid-root'); + const root = + findParentElementFromClassName(col, 'MuiXGrid-root') || + findParentElementFromClassName(col, 'MuiDataGrid-root'); if (!root) { throw new Error('Material-UI: The root element is not found.'); } @@ -45,10 +47,12 @@ export function findCellElementsFromCol(col: HTMLElement): NodeListOf | } export function findGridRootFromCurrent(elem: Element): HTMLDivElement | null { - if (elem.classList.contains('MuiXGrid-root')) { + if (elem.classList.contains('MuiXGrid-root') || elem.classList.contains('MuiDataGrid-root')) { return elem as HTMLDivElement; } - const root = findParentElementFromClassName(elem, 'MuiXGrid-root'); + const root = + findParentElementFromClassName(elem, 'MuiXGrid-root') || + findParentElementFromClassName(elem, 'MuiDataGrid-root'); return root as HTMLDivElement; } From 2cf4421324368cf07c3271e188cc636ffdeabead Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 00:09:59 +0200 Subject: [PATCH 21/29] replace class name that doesn't exist --- packages/grid/x-grid/src/XGrid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-grid/src/XGrid.test.tsx b/packages/grid/x-grid/src/XGrid.test.tsx index 74d897cf3fb3c..15b4b6a3f93dd 100644 --- a/packages/grid/x-grid/src/XGrid.test.tsx +++ b/packages/grid/x-grid/src/XGrid.test.tsx @@ -201,7 +201,7 @@ describe('', () => { const row = document.querySelector('[role="row"][aria-rowindex="2"]'); const checkbox = row!.querySelector('input'); - expect(row).to.not.have.class('MuiDataGrid-selected'); + expect(row).to.not.have.class('Mui-selected'); expect(checkbox).to.have.property('checked', false); fireEvent.click(screen.getByRole('cell', { name: 'Nike' })); From eff34f2e9ee47833467fc2701f7de607697903a7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 00:11:12 +0200 Subject: [PATCH 22/29] remove all double spaces --- .../src/components/styled-wrappers/useStyles.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts index 11bdbeeaed2bd..e82c78bb8333c 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts @@ -41,7 +41,7 @@ export const useStyles = makeStyles((theme) => { minHeight: 48, }, '@media (max-width: 650px)': { - '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { + '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { display: 'none', }, }, @@ -159,13 +159,13 @@ export const useStyles = makeStyles((theme) => { }, }, }, - '& .MuiDataGrid-row.Mui-odd': { + '& .MuiDataGrid-row.Mui-odd': { backgroundColor: fade(theme.palette.primary.main, theme.palette.action.activatedOpacity), }, - '& .MuiDataGrid-row.Mui-selected': { + '& .MuiDataGrid-row.Mui-selected': { backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), }, - '& .MuiDataGrid-cell': { + '& .MuiDataGrid-cell': { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', @@ -177,12 +177,12 @@ export const useStyles = makeStyles((theme) => { '& .MuiDataGrid-colCellWrapper .MuiDataGrid-cell': { borderBottom: `none`, }, - '& .MuiDataGrid-cellWithRenderer': { + '& .MuiDataGrid-cellWithRenderer': { display: 'flex', flexDirection: 'column', justifyContent: 'center', }, - '& .MuiDataGrid-withBorder': { + '& .MuiDataGrid-withBorder': { borderRight: `1px solid ${borderColor}`, }, '& .MuiDataGrid-cellRight': { From 332a7d8177ff8339a930b36e4849ef188bf87d94 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 00:17:04 +0200 Subject: [PATCH 23/29] generate a global class names --- .../components/styled-wrappers/grid-root.tsx | 2 + .../components/styled-wrappers/useStyles.ts | 391 +++++++++--------- 2 files changed, 199 insertions(+), 194 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index 2dbc02e90790e..69120abc5d7c0 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -8,10 +8,12 @@ export type DivProps = React.HTMLAttributes; export interface GridRootProps { options: GridOptions; } + export const GridRoot = React.forwardRef((props, ref) => { const { options, className, ...other } = props; const classes = useStyles(); return
; }); + GridRoot.displayName = 'GridRoot'; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts index e82c78bb8333c..8c715d20bd48b 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts @@ -1,199 +1,202 @@ import { darken, fade, lighten, makeStyles, Theme } from '@material-ui/core/styles'; -export const useStyles = makeStyles((theme) => { - const borderColor = - theme.palette.type === 'light' - ? lighten(fade(theme.palette.divider, 1), 0.88) - : darken(fade(theme.palette.divider, 1), 0.68); +export const useStyles = makeStyles( + (theme: Theme) => { + const borderColor = + theme.palette.type === 'light' + ? lighten(fade(theme.palette.divider, 1), 0.88) + : darken(fade(theme.palette.divider, 1), 0.68); - const gridStyle: any = { name: 'MuiDataGrid' }; - gridStyle.root = { - boxSizing: 'border-box', - position: 'relative', - ...theme.typography.body2, - border: `1px solid ${borderColor}`, - borderRadius: theme.shape.borderRadius, - outline: 'none', - display: 'flex', - flex: 1, - flexDirection: 'column', - '& *': { - boxSizing: 'border-box', - }, - '& .MuiDataGrid-mainGridContainer': { - position: 'relative', - flexGrow: 1, - flexDirection: 'column', - display: 'flex', - }, - '& .MuiDataGrid-footer': { - display: 'flex', - justifyContent: 'space-between', - flexDirection: 'row', - padding: theme.spacing(0, 2), - }, - '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { - display: 'flex', - alignItems: 'center', - fontSize: theme.typography.fontSize, - fontWeight: theme.typography.fontWeightMedium, - lineHeight: 1.43, - minHeight: 48, - }, - '@media (max-width: 650px)': { - '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { - display: 'none', - }, - }, - '& .MuiDataGrid-cell:focus, & .MuiDataGrid-colCell:focus': { - outline: 'dotted', - outlineWidth: 1, - outlineOffset: -2, - }, - '& .MuiDataGrid-overlay': { - display: 'flex', - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 15, - alignSelf: 'center', - alignItems: 'center', - zIndex: 10, - }, - '& .MuiDataGrid-overlayContent': { - flex: 1, - display: 'flex', - justifyContent: 'center', - }, - '& .MuiDataGrid-columnsContainer': { - position: 'absolute', - top: 0, - left: 0, - right: 0, - overflow: 'hidden', - display: 'flex', - flexDirection: 'column', - borderBottom: `1px solid ${borderColor}`, - zIndex: 100, - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.focusOpacity), - color: theme.palette.text.primary, - fontWeight: theme.typography.fontWeightBold, - fontSize: theme.typography.fontSize, - }, - '& .MuiDataGrid-colCellWrapper': { - display: 'flex', - width: '100%', - alignItems: 'center', - }, - '& .MuiDataGrid-colCell': { - position: 'relative', - display: 'flex', - padding: '0 16px', - }, - '& .MuiDataGrid-colCellSortable': { - cursor: 'pointer', - }, - '& .MuiDataGrid-colCellCenter': { - justifyContent: 'center', - }, - '& .MuiDataGrid-colCellRight': { - justifyContent: 'flex-end', - }, - '& .MuiDataGrid-colCellTitle': { - textOverflow: 'ellipsis', - overflow: 'hidden', - whiteSpace: 'nowrap', - }, - '& .MuiDataGrid-columnSeparator': { - position: 'absolute', - right: -12, - zIndex: 100, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - }, - '& .MuiDataGrid-iconSeparator': { - color: borderColor, - }, - '& .MuiDataGrid-columnSeparator:hover .MuiDataGrid-resizable': { - cursor: 'col-resize', - color: 'inherit', - }, - '& .MuiDataGrid-colCell *': { - maxHeight: 56, - }, - '& .MuiDataGrid-colCellWrapper.scroll .MuiDataGrid-colCell:last-child': { - borderRight: 'none', - }, - '& .MuiDataGrid-dataContainer': { - position: 'relative', - flexGrow: 1, - display: 'flex', - flexDirection: 'column', - }, - '& .MuiDataGrid-window': { - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - overflowX: 'auto', - }, - '& .MuiDataGrid-viewport': { - position: 'sticky', - top: 0, - left: 0, - display: 'flex', - flexDirection: 'column', - overflow: 'hidden', - }, - '& .MuiDataGrid-row': { - display: 'flex', - width: 'fit-content', - '&:hover': { - cursor: 'pointer', - backgroundColor: theme.palette.action.hover, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', + return { + root: { + boxSizing: 'border-box', + position: 'relative', + ...theme.typography.body2, + border: `1px solid ${borderColor}`, + borderRadius: theme.shape.borderRadius, + outline: 'none', + display: 'flex', + flex: 1, + flexDirection: 'column', + '& *': { + boxSizing: 'border-box', + }, + '& .MuiDataGrid-mainGridContainer': { + position: 'relative', + flexGrow: 1, + flexDirection: 'column', + display: 'flex', + }, + '& .MuiDataGrid-footer': { + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'row', + padding: theme.spacing(0, 2), + }, + '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { + display: 'flex', + alignItems: 'center', + fontSize: theme.typography.fontSize, + fontWeight: theme.typography.fontWeightMedium, + lineHeight: 1.43, + minHeight: 48, + }, + '@media (max-width: 650px)': { + '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { + display: 'none', + }, + }, + '& .MuiDataGrid-cell:focus, & .MuiDataGrid-colCell:focus': { + outline: 'dotted', + outlineWidth: 1, + outlineOffset: -2, + }, + '& .MuiDataGrid-overlay': { + display: 'flex', + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 15, + alignSelf: 'center', + alignItems: 'center', + zIndex: 10, + }, + '& .MuiDataGrid-overlayContent': { + flex: 1, + display: 'flex', + justifyContent: 'center', + }, + '& .MuiDataGrid-columnsContainer': { + position: 'absolute', + top: 0, + left: 0, + right: 0, + overflow: 'hidden', + display: 'flex', + flexDirection: 'column', + borderBottom: `1px solid ${borderColor}`, + zIndex: 100, + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.focusOpacity), + color: theme.palette.text.primary, + fontWeight: theme.typography.fontWeightBold, + fontSize: theme.typography.fontSize, + }, + '& .MuiDataGrid-colCellWrapper': { + display: 'flex', + width: '100%', + alignItems: 'center', + }, + '& .MuiDataGrid-colCell': { + position: 'relative', + display: 'flex', + padding: '0 16px', + }, + '& .MuiDataGrid-colCellSortable': { + cursor: 'pointer', + }, + '& .MuiDataGrid-colCellCenter': { + justifyContent: 'center', + }, + '& .MuiDataGrid-colCellRight': { + justifyContent: 'flex-end', + }, + '& .MuiDataGrid-colCellTitle': { + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + }, + '& .MuiDataGrid-columnSeparator': { + position: 'absolute', + right: -12, + zIndex: 100, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + '& .MuiDataGrid-iconSeparator': { + color: borderColor, + }, + '& .MuiDataGrid-columnSeparator:hover .MuiDataGrid-resizable': { + cursor: 'col-resize', + color: 'inherit', + }, + '& .MuiDataGrid-colCell *': { + maxHeight: 56, + }, + '& .MuiDataGrid-colCellWrapper.scroll .MuiDataGrid-colCell:last-child': { + borderRight: 'none', + }, + '& .MuiDataGrid-dataContainer': { + position: 'relative', + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + }, + '& .MuiDataGrid-window': { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + overflowX: 'auto', + }, + '& .MuiDataGrid-viewport': { + position: 'sticky', + top: 0, + left: 0, + display: 'flex', + flexDirection: 'column', + overflow: 'hidden', + }, + '& .MuiDataGrid-row': { + display: 'flex', + width: 'fit-content', + '&:hover': { + cursor: 'pointer', + backgroundColor: theme.palette.action.hover, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + }, + '& .MuiDataGrid-row.Mui-odd': { + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.activatedOpacity), + }, + '& .MuiDataGrid-row.Mui-selected': { + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), + }, + '& .MuiDataGrid-cell': { + display: 'block', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + padding: theme.spacing(0, 2), + ...theme.typography.body1, + borderBottom: `1px solid ${borderColor}`, + }, + '& .MuiDataGrid-colCellWrapper .MuiDataGrid-cell': { + borderBottom: `none`, + }, + '& .MuiDataGrid-cellWithRenderer': { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + '& .MuiDataGrid-withBorder': { + borderRight: `1px solid ${borderColor}`, + }, + '& .MuiDataGrid-cellRight': { + textAlign: 'right', + }, + '& .MuiDataGrid-cellCenter': { + textAlign: 'center', + }, + '& .MuiDataGrid-checkboxInput': { + padding: 12, }, }, - }, - '& .MuiDataGrid-row.Mui-odd': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.activatedOpacity), - }, - '& .MuiDataGrid-row.Mui-selected': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), - }, - '& .MuiDataGrid-cell': { - display: 'block', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - padding: theme.spacing(0, 2), - ...theme.typography.body1, - borderBottom: `1px solid ${borderColor}`, - }, - '& .MuiDataGrid-colCellWrapper .MuiDataGrid-cell': { - borderBottom: `none`, - }, - '& .MuiDataGrid-cellWithRenderer': { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - }, - '& .MuiDataGrid-withBorder': { - borderRight: `1px solid ${borderColor}`, - }, - '& .MuiDataGrid-cellRight': { - textAlign: 'right', - }, - '& .MuiDataGrid-cellCenter': { - textAlign: 'center', - }, - '& .MuiDataGrid-checkboxInput': { - padding: 12, - }, - }; - return gridStyle; -}); + }; + }, + { name: 'MuiDataGrid' }, +); From 0c9e62925fe125232d33bcf0a953a1833ab1e993 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 00:21:52 +0200 Subject: [PATCH 24/29] remove dead code --- packages/grid/x-grid-modules/src/GridComponent.tsx | 1 - .../src/components/styled-wrappers/grid-root.tsx | 9 ++------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/grid/x-grid-modules/src/GridComponent.tsx b/packages/grid/x-grid-modules/src/GridComponent.tsx index 69c056db8586b..41b4ab097273e 100644 --- a/packages/grid/x-grid-modules/src/GridComponent.tsx +++ b/packages/grid/x-grid-modules/src/GridComponent.tsx @@ -167,7 +167,6 @@ export const GridComponent = React.forwardRef; -export interface GridRootProps { - options: GridOptions; -} - -export const GridRoot = React.forwardRef((props, ref) => { - const { options, className, ...other } = props; +export const GridRoot = React.forwardRef((props, ref) => { + const { className, ...other } = props; const classes = useStyles(); return
; From b7abae5f037821e442d2256e76f663ec76a9fd37 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 00:25:08 +0200 Subject: [PATCH 25/29] all in with MuiDataGrid for the CSS --- packages/grid/x-grid-modules/src/GridComponent.tsx | 2 +- packages/grid/x-grid-modules/src/utils/domUtils.ts | 10 +++------- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/grid/x-grid-modules/src/GridComponent.tsx b/packages/grid/x-grid-modules/src/GridComponent.tsx index 41b4ab097273e..c5b16db90b1c5 100644 --- a/packages/grid/x-grid-modules/src/GridComponent.tsx +++ b/packages/grid/x-grid-modules/src/GridComponent.tsx @@ -166,7 +166,7 @@ export const GridComponent = React.forwardRef ( | null { const field = getDataFromElem(col, 'field'); - const root = - findParentElementFromClassName(col, 'MuiXGrid-root') || - findParentElementFromClassName(col, 'MuiDataGrid-root'); + const root = findParentElementFromClassName(col, 'MuiDataGrid-root'); if (!root) { throw new Error('Material-UI: The root element is not found.'); } @@ -47,12 +45,10 @@ export function findCellElementsFromCol(col: HTMLElement): NodeListOf | } export function findGridRootFromCurrent(elem: Element): HTMLDivElement | null { - if (elem.classList.contains('MuiXGrid-root') || elem.classList.contains('MuiDataGrid-root')) { + if (elem.classList.contains('MuiDataGrid-root')) { return elem as HTMLDivElement; } - const root = - findParentElementFromClassName(elem, 'MuiXGrid-root') || - findParentElementFromClassName(elem, 'MuiDataGrid-root'); + const root = findParentElementFromClassName(elem, 'MuiDataGrid-root'); return root as HTMLDivElement; } From 289503896534c07d3a3443a3668bcc0a94911ba9 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 00:27:22 +0200 Subject: [PATCH 26/29] polish CSS --- .../src/components/selected-row-count.tsx | 10 ++++++++-- .../components/styled-wrappers/useStyles.ts | 18 +++++++----------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/selected-row-count.tsx b/packages/grid/x-grid-modules/src/components/selected-row-count.tsx index 19086d1bdf5e6..795eb7968879a 100644 --- a/packages/grid/x-grid-modules/src/components/selected-row-count.tsx +++ b/packages/grid/x-grid-modules/src/components/selected-row-count.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; -export const SelectedRowCount: React.FC<{ selectedRowCount: number }> = ({ selectedRowCount }) => { +interface SelectedRowCountProps { + selectedRowCount: number; +} + +export function SelectedRowCount(props: SelectedRowCountProps) { + const { selectedRowCount } = props; + if (selectedRowCount === 0) { return null; } @@ -10,4 +16,4 @@ export const SelectedRowCount: React.FC<{ selectedRowCount: number }> = ({ selec {`${selectedRowCount.toLocaleString()} ${selectedRowCount > 1 ? 'rows' : 'row'} selected`}
); -}; +} diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts index 8c715d20bd48b..fa1434c2308f7 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts @@ -11,15 +11,14 @@ export const useStyles = makeStyles( root: { boxSizing: 'border-box', position: 'relative', - ...theme.typography.body2, - border: `1px solid ${borderColor}`, + border: `1px solid ${theme.palette.divider}`, borderRadius: theme.shape.borderRadius, outline: 'none', display: 'flex', flex: 1, flexDirection: 'column', - '& *': { - boxSizing: 'border-box', + '& *, & *::before, & *::after': { + boxSizing: 'inherit', }, '& .MuiDataGrid-mainGridContainer': { position: 'relative', @@ -34,16 +33,13 @@ export const useStyles = makeStyles( padding: theme.spacing(0, 2), }, '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { - display: 'flex', alignItems: 'center', - fontSize: theme.typography.fontSize, - fontWeight: theme.typography.fontWeightMedium, + ...theme.typography.body2, lineHeight: 1.43, minHeight: 48, - }, - '@media (max-width: 650px)': { - '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { - display: 'none', + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', }, }, '& .MuiDataGrid-cell:focus, & .MuiDataGrid-colCell:focus': { From d0baee1075f903eb6f629464326a11a5ea0e5b7b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 00:49:50 +0200 Subject: [PATCH 27/29] start to reproduce https://material-ui.com/components/tables/\#simple-table MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit But I won't have time to push it further today. For tomorrow 😴 --- .../src/components/styled-wrappers/useStyles.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts index fa1434c2308f7..91f512c2bd347 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts @@ -73,10 +73,6 @@ export const useStyles = makeStyles( flexDirection: 'column', borderBottom: `1px solid ${borderColor}`, zIndex: 100, - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.focusOpacity), - color: theme.palette.text.primary, - fontWeight: theme.typography.fontWeightBold, - fontSize: theme.typography.fontSize, }, '& .MuiDataGrid-colCellWrapper': { display: 'flex', @@ -86,7 +82,7 @@ export const useStyles = makeStyles( '& .MuiDataGrid-colCell': { position: 'relative', display: 'flex', - padding: '0 16px', + padding: '0 12px', }, '& .MuiDataGrid-colCellSortable': { cursor: 'pointer', @@ -101,6 +97,10 @@ export const useStyles = makeStyles( textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', + ...theme.typography.body2, + lineHeight: null, + color: theme.palette.text.primary, + fontWeight: theme.typography.fontWeightMedium, }, '& .MuiDataGrid-columnSeparator': { position: 'absolute', @@ -156,9 +156,6 @@ export const useStyles = makeStyles( }, }, }, - '& .MuiDataGrid-row.Mui-odd': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.activatedOpacity), - }, '& .MuiDataGrid-row.Mui-selected': { backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), }, @@ -168,7 +165,7 @@ export const useStyles = makeStyles( textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: theme.spacing(0, 2), - ...theme.typography.body1, + ...theme.typography.body2, borderBottom: `1px solid ${borderColor}`, }, '& .MuiDataGrid-colCellWrapper .MuiDataGrid-cell': { From d6730b4e290c809e0151c6da564f3fa20f6daf6e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 13:00:22 +0200 Subject: [PATCH 28/29] Material Design spec --- .../src/components/checkbox-renderer.tsx | 3 + .../src/components/column-header-item.tsx | 6 +- .../components/column-header-sort-icon.tsx | 17 ++-- .../{useStyles.ts => GridRootStyles.ts} | 89 +++++++++++-------- .../components/styled-wrappers/grid-root.tsx | 6 +- .../src/models/colDef/checkboxSelection.tsx | 6 +- .../integration/staticStories.test.ts | 2 +- 7 files changed, 69 insertions(+), 60 deletions(-) rename packages/grid/x-grid-modules/src/components/styled-wrappers/{useStyles.ts => GridRootStyles.ts} (82%) diff --git a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx index 87293a3276d69..dd97db4e6940a 100644 --- a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx +++ b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx @@ -26,6 +26,7 @@ export const HeaderCheckbox: React.FC = React.memo(({ api }) => { React.useEffect(() => { return api.onSelectionChange(selectionChange); }, [api, selectionChange]); + return (
= React.memo(({ api }) => { checked={isChecked} onChange={handleChange} className="MuiDataGrid-checkboxInput" + color="primary" inputProps={{ 'aria-label': 'Select All Rows checkbox' }} />
@@ -51,6 +53,7 @@ export const CellCheckboxRenderer: React.FC = React.memo(({ api, row checked={!!value} onChange={handleChange} className="MuiDataGrid-checkboxInput" + color="primary" inputProps={{ 'aria-label': 'Select Row checkbox' }} />
diff --git a/packages/grid/x-grid-modules/src/components/column-header-item.tsx b/packages/grid/x-grid-modules/src/components/column-header-item.tsx index f0b8b48b14575..5359cadb0a432 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-item.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-item.tsx @@ -42,7 +42,7 @@ export const ColumnHeaderItem = React.memo( }); } - const onResize = onResizeColumn ? () => onResizeColumn(column) : undefined; + const handleResize = onResizeColumn ? () => onResizeColumn(column) : undefined; const width = column.width!; @@ -73,7 +73,6 @@ export const ColumnHeaderItem = React.memo( direction={column.sortDirection} index={column.sortIndex} hide={column.hideSortIcons} - height={headerHeight} /> )} {headerComponent || ( @@ -88,10 +87,9 @@ export const ColumnHeaderItem = React.memo( direction={column.sortDirection} index={column.sortIndex} hide={column.hideSortIcons} - height={headerHeight} /> )} - +
); }, diff --git a/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx b/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx index 33b0c501b36b5..b907817293f4b 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx +++ b/packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx @@ -8,16 +8,15 @@ export interface ColumnHeaderSortIconProps { direction: SortDirection; index: number | undefined; hide?: boolean; - height: number; } -const getIcon = (icons: IconsOptions, direction: SortDirection, height: number): React.ReactNode => - direction === 'asc' - ? React.createElement(icons!.columnSortedAscending!, { styles: { minHeight: height } }) - : React.createElement(icons!.columnSortedDescending!, { styles: { minHeight: height } }); +function getIcon(icons: IconsOptions, direction: SortDirection) { + const Icon = direction === 'asc' ? icons!.columnSortedAscending! : icons!.columnSortedDescending!; + return ; +} export const ColumnHeaderSortIcon: React.FC = React.memo( - ({ direction, index, hide, height }) => { + ({ direction, index, hide }) => { const icons = useIcons(); if (hide || direction == null) { @@ -25,17 +24,17 @@ export const ColumnHeaderSortIcon: React.FC = React.m } return ( - + {index != null && ( - {getIcon(icons, direction, height)} + {getIcon(icons, direction)} )} {index == null && ( - {getIcon(icons, direction, height)} + {getIcon(icons, direction)} )} diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts similarity index 82% rename from packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts rename to packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts index 91f512c2bd347..49ebcf98b1492 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/useStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts @@ -9,13 +9,13 @@ export const useStyles = makeStyles( return { root: { + flex: 1, boxSizing: 'border-box', position: 'relative', - border: `1px solid ${theme.palette.divider}`, + border: `1px solid ${borderColor}`, borderRadius: theme.shape.borderRadius, outline: 'none', display: 'flex', - flex: 1, flexDirection: 'column', '& *, & *::before, & *::after': { boxSizing: 'inherit', @@ -23,29 +23,8 @@ export const useStyles = makeStyles( '& .MuiDataGrid-mainGridContainer': { position: 'relative', flexGrow: 1, - flexDirection: 'column', display: 'flex', - }, - '& .MuiDataGrid-footer': { - display: 'flex', - justifyContent: 'space-between', - flexDirection: 'row', - padding: theme.spacing(0, 2), - }, - '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { - alignItems: 'center', - ...theme.typography.body2, - lineHeight: 1.43, - minHeight: 48, - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'flex', - }, - }, - '& .MuiDataGrid-cell:focus, & .MuiDataGrid-colCell:focus': { - outline: 'dotted', - outlineWidth: 1, - outlineOffset: -2, + flexDirection: 'column', }, '& .MuiDataGrid-overlay': { display: 'flex', @@ -79,14 +58,30 @@ export const useStyles = makeStyles( width: '100%', alignItems: 'center', }, + '& .MuiDataGrid-colCell, & .MuiDataGrid-cell': { + WebkitTapHighlightColor: 'transparent', + ...theme.typography.body2, + lineHeight: null, + padding: theme.spacing(0, 2), + }, + '& .MuiDataGrid-colCell:focus, & .MuiDataGrid-cell:focus': { + outline: 'dotted', + outlineWidth: 1, + outlineOffset: -2, + }, + '& .MuiDataGrid-colCellCheckbox, & .MuiDataGrid-cellCheckbox': { + padding: 0, + }, '& .MuiDataGrid-colCell': { position: 'relative', display: 'flex', - padding: '0 12px', }, '& .MuiDataGrid-colCellSortable': { cursor: 'pointer', }, + '& .MuiDataGrid-sortIcon': { + fontSize: 18, + }, '& .MuiDataGrid-colCellCenter': { justifyContent: 'center', }, @@ -97,8 +92,6 @@ export const useStyles = makeStyles( textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', - ...theme.typography.body2, - lineHeight: null, color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium, }, @@ -117,9 +110,6 @@ export const useStyles = makeStyles( cursor: 'col-resize', color: 'inherit', }, - '& .MuiDataGrid-colCell *': { - maxHeight: 56, - }, '& .MuiDataGrid-colCellWrapper.scroll .MuiDataGrid-colCell:last-child': { borderRight: 'none', }, @@ -148,28 +138,39 @@ export const useStyles = makeStyles( display: 'flex', width: 'fit-content', '&:hover': { - cursor: 'pointer', backgroundColor: theme.palette.action.hover, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', }, }, - }, - '& .MuiDataGrid-row.Mui-selected': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), + '&.Mui-selected': { + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), + '&:hover': { + backgroundColor: fade( + theme.palette.primary.main, + theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, + ), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: fade( + theme.palette.primary.main, + theme.palette.action.selectedOpacity, + ), + }, + }, + }, }, '& .MuiDataGrid-cell': { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - padding: theme.spacing(0, 2), - ...theme.typography.body2, borderBottom: `1px solid ${borderColor}`, }, + // The very last cell '& .MuiDataGrid-colCellWrapper .MuiDataGrid-cell': { - borderBottom: `none`, + borderBottom: 'none', }, '& .MuiDataGrid-cellWithRenderer': { display: 'flex', @@ -185,8 +186,18 @@ export const useStyles = makeStyles( '& .MuiDataGrid-cellCenter': { textAlign: 'center', }, - '& .MuiDataGrid-checkboxInput': { - padding: 12, + '& .MuiDataGrid-footer': { + display: 'flex', + justifyContent: 'space-between', + padding: theme.spacing(0, 2), + }, + '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { + alignItems: 'center', + ...theme.typography.body2, + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, }, }, }; diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index b90f990ddb79d..aa10c12f978af 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -1,14 +1,12 @@ import * as React from 'react'; import { classnames } from '../../utils'; -import { useStyles } from './useStyles'; +import { useStyles } from './GridRootStyles'; export type DivProps = React.HTMLAttributes; -export const GridRoot = React.forwardRef((props, ref) => { +export const GridRoot = React.forwardRef(function GridRoot(props, ref) { const { className, ...other } = props; const classes = useStyles(); return
; }); - -GridRoot.displayName = 'GridRoot'; diff --git a/packages/grid/x-grid-modules/src/models/colDef/checkboxSelection.tsx b/packages/grid/x-grid-modules/src/models/colDef/checkboxSelection.tsx index 45eaf7f92a93f..c0ba3cac8b200 100644 --- a/packages/grid/x-grid-modules/src/models/colDef/checkboxSelection.tsx +++ b/packages/grid/x-grid-modules/src/models/colDef/checkboxSelection.tsx @@ -6,7 +6,7 @@ export const checkboxSelectionColDef: ColDef = { field: '__check__', description: 'Select Multiple Rows', type: 'checkboxSelection', - width: 80, + width: 48, align: 'center', headerAlign: 'center', resizable: true, @@ -15,6 +15,6 @@ export const checkboxSelectionColDef: ColDef = { valueGetter: (params) => params.rowModel.selected, renderHeader: (params) => , renderCell: (params) => , - cellClassName: 'checkbox-selection-cell', - headerClassName: 'checkbox-selection-header-cell', + cellClassName: 'MuiDataGrid-cellCheckbox', + headerClassName: 'MuiDataGrid-colCellCheckbox', }; diff --git a/packages/storybook/integration/staticStories.test.ts b/packages/storybook/integration/staticStories.test.ts index 7f03695711419..a80bd1eafb518 100644 --- a/packages/storybook/integration/staticStories.test.ts +++ b/packages/storybook/integration/staticStories.test.ts @@ -28,7 +28,7 @@ const stories = [ path: '/story/x-grid-tests-selection--multiple-select-with-checkbox-no-click', beforeTest: async (page) => { await page.click( - '.grid-root .window .material-row:first-child .material-cell.checkbox-selection-cell .checkbox-input', + '.grid-root .window .material-row:first-child .material-cell.MuiDataGrid-cellCheckbox .checkbox-input', ); }, }, From 86406914027d70617a0ab194bb40065a7efe619e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 14:05:36 +0200 Subject: [PATCH 29/29] improve footer display --- .../src/components/styled-wrappers/GridRootStyles.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts b/packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts index 49ebcf98b1492..0e970b183cd98 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts @@ -189,13 +189,14 @@ export const useStyles = makeStyles( '& .MuiDataGrid-footer': { display: 'flex', justifyContent: 'space-between', - padding: theme.spacing(0, 2), }, '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': { alignItems: 'center', ...theme.typography.body2, display: 'none', + paddingLeft: theme.spacing(2), [theme.breakpoints.up('md')]: { + minHeight: 52, // Match TablePagination min height display: 'flex', }, },