From d9b81419e58f59e7b6d76d7f9ce117d49d18cc82 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 10 Sep 2020 19:13:46 +0200 Subject: [PATCH] [docs] Polish the first experience --- docs/public/_redirects | 3 + .../columns/CustomColumnTypesGrid.js | 6 +- .../columns/CustomColumnTypesGrid.tsx | 6 +- .../data-grid/overview/DataGridDemo.js | 15 ++-- .../data-grid/overview/DataGridDemo.tsx | 15 ++-- packages/grid/data-grid/README.md | 5 +- .../grid/x-grid-data-generator/package.json | 17 ++--- .../src/commodities.columns.tsx | 48 +++++------- .../src/employees.columns.tsx | 18 ++--- .../src/renderer/country-renderer.tsx | 44 ----------- .../src/renderer/done-renderer.tsx | 13 ---- .../src/renderer/email-renderer.tsx | 13 ---- .../src/renderer/index.ts | 20 ++--- .../src/renderer/link-renderer.tsx | 14 ---- .../src/renderer/progress-renderer.tsx | 51 ------------- .../{avatar-renderer.tsx => renderAvatar.tsx} | 2 +- .../src/renderer/renderCountry.tsx | 53 ++++++++++++++ .../src/renderer/renderDone.tsx | 16 ++++ .../src/renderer/renderEmail.tsx | 9 +++ ...coterm-renderer.tsx => renderIncoterm.tsx} | 31 ++++++-- .../src/renderer/renderLink.tsx | 35 +++++++++ .../src/renderer/renderPnl.tsx | 47 ++++++++++++ .../src/renderer/renderProgress.tsx | 64 ++++++++++++++++ .../{rating-renderer.tsx => renderRating.tsx} | 2 +- .../src/renderer/renderStatus.tsx | 72 ++++++++++++++++++ .../src/renderer/renderTotalPrice.tsx | 48 ++++++++++++ .../src/renderer/status-renderer.tsx | 69 ------------------ .../src/services/index.ts | 2 +- .../src/components/checkbox-renderer.tsx | 34 ++++----- .../styled-wrappers/GridRootStyles.ts | 5 +- packages/grid/x-grid/README.md | 73 +------------------ 31 files changed, 463 insertions(+), 387 deletions(-) delete mode 100644 packages/grid/x-grid-data-generator/src/renderer/country-renderer.tsx delete mode 100644 packages/grid/x-grid-data-generator/src/renderer/done-renderer.tsx delete mode 100644 packages/grid/x-grid-data-generator/src/renderer/email-renderer.tsx delete mode 100644 packages/grid/x-grid-data-generator/src/renderer/link-renderer.tsx delete mode 100644 packages/grid/x-grid-data-generator/src/renderer/progress-renderer.tsx rename packages/grid/x-grid-data-generator/src/renderer/{avatar-renderer.tsx => renderAvatar.tsx} (84%) create mode 100644 packages/grid/x-grid-data-generator/src/renderer/renderCountry.tsx create mode 100644 packages/grid/x-grid-data-generator/src/renderer/renderDone.tsx create mode 100644 packages/grid/x-grid-data-generator/src/renderer/renderEmail.tsx rename packages/grid/x-grid-data-generator/src/renderer/{incoterm-renderer.tsx => renderIncoterm.tsx} (50%) create mode 100644 packages/grid/x-grid-data-generator/src/renderer/renderLink.tsx create mode 100644 packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx create mode 100644 packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx rename packages/grid/x-grid-data-generator/src/renderer/{rating-renderer.tsx => renderRating.tsx} (80%) create mode 100644 packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx create mode 100644 packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx delete mode 100644 packages/grid/x-grid-data-generator/src/renderer/status-renderer.tsx diff --git a/docs/public/_redirects b/docs/public/_redirects index e69de29bb2d1d..5fbc2cd9d9b35 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -0,0 +1,3 @@ +# Proxies +# material-ui-x is configured to be hosted at the root. +/static/* https://material-ui.netlify.app/static/:splat 200 diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js index f1a2cbcb11e19..ea5d63bca3a10 100644 --- a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js +++ b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js @@ -27,7 +27,7 @@ const rows = [ }, ]; -const valueFormatter = new Intl.NumberFormat('en-US', { +const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }); @@ -35,14 +35,14 @@ const valueFormatter = new Intl.NumberFormat('en-US', { const usdPrice = { type: 'number', width: 130, - valueFormatter: ({ value }) => valueFormatter.format(Number(value)), + valueFormatter: ({ value }) => currencyFormatter.format(Number(value)), cellClassName: 'font-tabular-nums', }; const useStyles = makeStyles({ root: { '& .font-tabular-nums': { - fontVariantNumeric: 'font-tabular-nums', + fontVariantNumeric: 'tabular-nums', }, }, }); diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx index 621321dc28b54..e40f1cfa0e22a 100644 --- a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx +++ b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx @@ -27,7 +27,7 @@ const rows = [ }, ]; -const valueFormatter = new Intl.NumberFormat('en-US', { +const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }); @@ -35,14 +35,14 @@ const valueFormatter = new Intl.NumberFormat('en-US', { const usdPrice: ColTypeDef = { type: 'number', width: 130, - valueFormatter: ({ value }) => valueFormatter.format(Number(value)), + valueFormatter: ({ value }) => currencyFormatter.format(Number(value)), cellClassName: 'font-tabular-nums', }; const useStyles = makeStyles({ root: { '& .font-tabular-nums': { - fontVariantNumeric: 'font-tabular-nums', + fontVariantNumeric: 'tabular-nums', }, }, }); diff --git a/docs/src/pages/components/data-grid/overview/DataGridDemo.js b/docs/src/pages/components/data-grid/overview/DataGridDemo.js index aaa9bcb6e8789..cdae078e63a65 100644 --- a/docs/src/pages/components/data-grid/overview/DataGridDemo.js +++ b/docs/src/pages/components/data-grid/overview/DataGridDemo.js @@ -2,20 +2,21 @@ import * as React from 'react'; import { DataGrid } from '@material-ui/data-grid'; const columns = [ - { field: 'id' }, - { field: 'firstName' }, - { field: 'lastName' }, + { field: 'id', headerName: 'ID', width: 70 }, + { field: 'firstName', headerName: 'First name', width: 130 }, + { field: 'lastName', headerName: 'Last name', width: 130 }, { field: 'age', - cellClassName: ['age'], - headerClassName: ['age'], + headerName: 'Age', type: 'number', + width: 90, }, { field: 'fullName', - description: 'this column has a value getter and is not sortable', - headerClassName: 'highlight', + headerName: 'Full name', + description: 'This column has a value getter and is not sortable.', sortable: false, + width: 160, valueGetter: (params) => `${params.getValue('firstName') || ''} ${ params.getValue('lastName') || '' diff --git a/docs/src/pages/components/data-grid/overview/DataGridDemo.tsx b/docs/src/pages/components/data-grid/overview/DataGridDemo.tsx index 5c1a21082af86..ab59bf5d43394 100644 --- a/docs/src/pages/components/data-grid/overview/DataGridDemo.tsx +++ b/docs/src/pages/components/data-grid/overview/DataGridDemo.tsx @@ -2,20 +2,21 @@ import * as React from 'react'; import { DataGrid, ColDef } from '@material-ui/data-grid'; const columns: ColDef[] = [ - { field: 'id' }, - { field: 'firstName' }, - { field: 'lastName' }, + { field: 'id', headerName: 'ID', width: 70 }, + { field: 'firstName', headerName: 'First name', width: 130 }, + { field: 'lastName', headerName: 'Last name', width: 130 }, { field: 'age', - cellClassName: ['age'], - headerClassName: ['age'], + headerName: 'Age', type: 'number', + width: 90, }, { field: 'fullName', - description: 'this column has a value getter and is not sortable', - headerClassName: 'highlight', + headerName: 'Full name', + description: 'This column has a value getter and is not sortable.', sortable: false, + width: 160, valueGetter: (params) => `${params.getValue('firstName') || ''} ${ params.getValue('lastName') || '' diff --git a/packages/grid/data-grid/README.md b/packages/grid/data-grid/README.md index fe199cbf565c0..be753c85d0776 100644 --- a/packages/grid/data-grid/README.md +++ b/packages/grid/data-grid/README.md @@ -14,13 +14,12 @@ npm install @material-ui/data-grid yarn add @material-ui/data-grid ``` -This component has 3 peer dependencies that you will need to install as well. +This component has 2 peer dependencies that you will need to install as well. ```json "peerDependencies": { "@material-ui/core": "^4.9.12", - "react": "^16.8.0", - "styled-components": "^5.1.0" + "react": "^16.8.0" }, ``` diff --git a/packages/grid/x-grid-data-generator/package.json b/packages/grid/x-grid-data-generator/package.json index b2aee0525bd4c..916a6c65801a2 100644 --- a/packages/grid/x-grid-data-generator/package.json +++ b/packages/grid/x-grid-data-generator/package.json @@ -16,6 +16,13 @@ "bin": { "datagen": "./bin/data-gen-script.js" }, + "scripts": { + "precommit": "npm run lint", + "build": "rollup -c", + "start": "rollup -cw", + "lint": "../../../node_modules/.bin/tsc --noEmit && eslint 'src/**/*.{ts,tsx}' --quiet --fix -c ../../../.eslintrc.js && npm run lint:css", + "lint:css": "stylelint 'src/**/*.{ts,tsx}' ../../../.stylelintrc.js" + }, "dependencies": { "@types/chance": "^1.1.0", "chance": "^1.1.6", @@ -42,15 +49,7 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.54", "@material-ui/x-grid": "^0.1.35", - "react": "^16.8.0", - "styled-components": "^5.1.0" - }, - "scripts": { - "precommit": "npm run lint", - "build": "rollup -c", - "start": "rollup -cw", - "lint": "../../../node_modules/.bin/tsc --noEmit && eslint 'src/**/*.{ts,tsx}' --quiet --fix -c ../../../.eslintrc.js && npm run lint:css", - "lint:css": "stylelint 'src/**/*.{ts,tsx}' ../../../.stylelintrc.js" + "react": "^16.8.0" }, "setupFiles": [ "/src/setupTests.js" diff --git a/packages/grid/x-grid-data-generator/src/commodities.columns.tsx b/packages/grid/x-grid-data-generator/src/commodities.columns.tsx index 7b14ad669822d..308e233bc0f9f 100644 --- a/packages/grid/x-grid-data-generator/src/commodities.columns.tsx +++ b/packages/grid/x-grid-data-generator/src/commodities.columns.tsx @@ -32,20 +32,16 @@ import { randomTaxCode, } from './services'; import { - CountryRenderer, - DoneRenderer, - EmailRenderer, - IncotermRenderer, - ProgressRenderer, - StatusRenderer, + renderCountry, + renderDone, + renderEmail, + renderIncoterm, + renderPnl, + renderProgress, + renderStatus, + renderTotalPrice, } from './renderer'; -const totalPriceFormatter = ({ value }) => `$ ${Number(value).toLocaleString()}`; -const pnlFormatter = (params) => - Number(params.value!) < 0 - ? `(${Math.abs(Number(params.value!)).toLocaleString()})` - : Number(params.value).toLocaleString(); - export const commodityColumns: any[] = [ { field: 'id', @@ -73,7 +69,7 @@ export const commodityColumns: any[] = [ field: 'traderEmail', headerName: 'Trader Email', generateData: randomEmail, - renderCell: EmailRenderer, + renderCell: renderEmail, disableClickEventBubbling: true, width: 150, }, @@ -88,14 +84,14 @@ export const commodityColumns: any[] = [ field: 'filledQuantity', headerName: 'Filled Quantity', generateData: generateFilledQuantity, - renderCell: ProgressRenderer, + renderCell: renderProgress, type: 'number', width: 120, }, { field: 'isFilled', headerName: 'Is Filled', - renderCell: DoneRenderer, + renderCell: renderDone, align: 'center', generateData: generateIsFilled, width: 80, @@ -104,7 +100,7 @@ export const commodityColumns: any[] = [ field: 'status', headerName: 'Status', generateData: randomStatusOptions, - renderCell: StatusRenderer, + renderCell: renderStatus, width: 150, }, { @@ -143,31 +139,23 @@ export const commodityColumns: any[] = [ { field: 'incoTerm', generateData: randomIncoterm, - renderCell: IncotermRenderer, + renderCell: renderIncoterm, }, { field: 'totalPrice', headerName: 'Total in USD', generateData: generateTotalPrice, - valueFormatter: totalPriceFormatter, - cellClassRules: { - good: ({ value }) => Number(value) > 1000000, - bad: ({ value }) => Number(value) < 1000000, - }, + renderCell: renderTotalPrice, type: 'number', - width: 120, + width: 160, }, { field: 'pnl', headerName: 'PnL', generateData: randomPnL, - valueFormatter: pnlFormatter, - cellClassRules: { - positive: ({ value }) => Number(value) > 0, - negative: ({ value }) => Number(value) < 0, - }, + renderCell: renderPnl, type: 'number', - width: 120, + width: 140, }, { field: 'maturityDate', @@ -203,7 +191,7 @@ export const commodityColumns: any[] = [ field: 'counterPartyCountry', headerName: 'Counterparty Country', generateData: randomCountry, - renderCell: CountryRenderer, + renderCell: renderCountry, width: 120, }, { diff --git a/packages/grid/x-grid-data-generator/src/employees.columns.tsx b/packages/grid/x-grid-data-generator/src/employees.columns.tsx index 7914a4140095a..3fdc67002059f 100644 --- a/packages/grid/x-grid-data-generator/src/employees.columns.tsx +++ b/packages/grid/x-grid-data-generator/src/employees.columns.tsx @@ -15,13 +15,7 @@ import { randomUrl, randomUserName, } from './services'; -import { - AvatarRenderer, - CountryRenderer, - EmailRenderer, - LinkRenderer, - RatingRenderer, -} from './renderer'; +import { renderAvatar, renderCountry, renderEmail, renderLink, renderRating } from './renderer'; export const employeeColumns: any[] = [ { @@ -34,7 +28,7 @@ export const employeeColumns: any[] = [ headerName: '', sortable: false, generateData: randomAvatar, - renderCell: AvatarRenderer, + renderCell: renderAvatar, }, { field: 'name', @@ -49,7 +43,7 @@ export const employeeColumns: any[] = [ field: 'email', headerName: 'Email', generateData: randomEmail, - renderCell: EmailRenderer, + renderCell: renderEmail, disableClickEventBubbling: true, width: 150, }, @@ -69,14 +63,14 @@ export const employeeColumns: any[] = [ field: 'website', headerName: 'website', generateData: randomUrl, - renderCell: LinkRenderer, + renderCell: renderLink, width: 160, }, { field: 'rating', headerName: 'Rating', generateData: randomRating, - renderCell: RatingRenderer, + renderCell: renderRating, sortDirection: 'desc', sortIndex: 0, width: 180, @@ -90,7 +84,7 @@ export const employeeColumns: any[] = [ field: 'country', headerName: 'Country', generateData: randomCountry, - renderCell: CountryRenderer, + renderCell: renderCountry, width: 150, }, { diff --git a/packages/grid/x-grid-data-generator/src/renderer/country-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/country-renderer.tsx deleted file mode 100644 index 743a02448781e..0000000000000 --- a/packages/grid/x-grid-data-generator/src/renderer/country-renderer.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; -import { CellParams } from '@material-ui/x-grid'; - -const Container = styled.div` - display: flex; - - .country-flag { - margin-right: 5px; - margin-top: 5px; - height: 32px; - width: 32px; - font-size: 32px; - } - .country-name { - overflow: hidden; - text-overflow: ellipsis; - } -`; -// ISO 3166-1 alpha-2 -// ⚠️ No support for IE 11 -function countryToFlag(isoCode: string) { - return typeof String.fromCodePoint !== 'undefined' - ? isoCode - .toUpperCase() - .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397)) - : isoCode; -} - -export const Country: React.FC<{ value: { code: string; label: string } }> = React.memo( - ({ value }) => { - return ( - - {countryToFlag(value.code)} - {value.label} - - ); - }, -); -Country.displayName = 'Country'; - -export function CountryRenderer(params: CellParams) { - return ; -} diff --git a/packages/grid/x-grid-data-generator/src/renderer/done-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/done-renderer.tsx deleted file mode 100644 index 6604fb5f6f2a2..0000000000000 --- a/packages/grid/x-grid-data-generator/src/renderer/done-renderer.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import DoneIcon from '@material-ui/icons/Done'; -import ClearIcon from '@material-ui/icons/Clear'; -import { CellParams } from '@material-ui/x-grid'; - -export const IsDone: React.FC<{ value: boolean }> = React.memo(({ value }) => - value ? : , -); -IsDone.displayName = 'IsDone'; - -export function DoneRenderer(params: CellParams) { - return ; -} diff --git a/packages/grid/x-grid-data-generator/src/renderer/email-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/email-renderer.tsx deleted file mode 100644 index 8cdac130569aa..0000000000000 --- a/packages/grid/x-grid-data-generator/src/renderer/email-renderer.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import { CellParams } from '@material-ui/x-grid'; -import { Link } from './link-renderer'; - -const EmailLink: React.FC<{ label?: string; email: string }> = React.memo(({ label, email }) => { - return {label || email}; -}); -EmailLink.displayName = 'EmailRenderer'; - -export function EmailRenderer(params: CellParams) { - const email = params.value?.toString(); - return ; -} diff --git a/packages/grid/x-grid-data-generator/src/renderer/index.ts b/packages/grid/x-grid-data-generator/src/renderer/index.ts index fc80abe5711de..677d5651a4b76 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/index.ts +++ b/packages/grid/x-grid-data-generator/src/renderer/index.ts @@ -1,9 +1,11 @@ -export * from './avatar-renderer'; -export * from './country-renderer'; -export * from './done-renderer'; -export * from './email-renderer'; -export * from './incoterm-renderer'; -export * from './progress-renderer'; -export * from './status-renderer'; -export * from './rating-renderer'; -export * from './link-renderer'; +export * from './renderAvatar'; +export * from './renderCountry'; +export * from './renderDone'; +export * from './renderEmail'; +export * from './renderIncoterm'; +export * from './renderLink'; +export * from './renderPnl'; +export * from './renderProgress'; +export * from './renderRating'; +export * from './renderStatus'; +export * from './renderTotalPrice'; diff --git a/packages/grid/x-grid-data-generator/src/renderer/link-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/link-renderer.tsx deleted file mode 100644 index 4115b9a93c2e0..0000000000000 --- a/packages/grid/x-grid-data-generator/src/renderer/link-renderer.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; -import { CellParams } from '@material-ui/x-grid'; - -export const Link = styled.a` - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - color: inherit; -`; - -export function LinkRenderer(params: CellParams) { - return {params.value!.toString()}; -} diff --git a/packages/grid/x-grid-data-generator/src/renderer/progress-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/progress-renderer.tsx deleted file mode 100644 index 451e708990772..0000000000000 --- a/packages/grid/x-grid-data-generator/src/renderer/progress-renderer.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import clsx from 'clsx'; -import styled from 'styled-components'; -import { CellParams } from '@material-ui/x-grid'; - -const Container = styled.div` - border: 1px solid #bec3c7; - position: relative; - overflow: hidden; - - .progress-bar--value { - position: absolute; - line-height: 30px; - width: 100%; - display: flex; - justify-content: center; - } - .progress-bar { - max-height: 30px; - min-height: 30px; - background: #088208a3; - &.small-filled { - background: #f44336; - } - &.medium-filled { - background: #efbb5aa3; - } - &.major-filled { - background: #088208a3; - } - } -`; - -export const ProgressBar: React.FC<{ value: number }> = React.memo(({ value }) => { - const valueInPercent = value * 100; - - let barColor = valueInPercent < 30 ? 'small-filled' : 'medium-filled'; - barColor = valueInPercent > 70 ? 'major-filled' : barColor; - - return ( - -
{`${valueInPercent.toLocaleString()} %`}
-
- - ); -}); -ProgressBar.displayName = 'ProgressBar'; - -export function ProgressRenderer(params: CellParams) { - return ; -} diff --git a/packages/grid/x-grid-data-generator/src/renderer/avatar-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderAvatar.tsx similarity index 84% rename from packages/grid/x-grid-data-generator/src/renderer/avatar-renderer.tsx rename to packages/grid/x-grid-data-generator/src/renderer/renderAvatar.tsx index 804089b7dcc68..1c72b1b553482 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/avatar-renderer.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderAvatar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Avatar from '@material-ui/core/Avatar'; import { CellParams } from '@material-ui/x-grid'; -export function AvatarRenderer(params: CellParams) { +export function renderAvatar(params: CellParams) { return ( {(params.value! as any).name!.toString().substring(0, 1)} diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderCountry.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderCountry.tsx new file mode 100644 index 0000000000000..a4d30771cd653 --- /dev/null +++ b/packages/grid/x-grid-data-generator/src/renderer/renderCountry.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { CellParams } from '@material-ui/x-grid'; + +// ISO 3166-1 alpha-2 +// ⚠️ No support for IE 11 +function countryToFlag(isoCode: string) { + return typeof String.fromCodePoint !== 'undefined' + ? isoCode + .toUpperCase() + .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397)) + : isoCode; +} + +const useStyles = makeStyles({ + root: { + display: 'flex', + }, + flag: { + marginRight: 4, + marginTop: 2, + height: 32, + width: 32, + fontSize: '28px', + }, + label: { + overflow: 'hidden', + textOverflow: 'ellipsis', + }, +}); + +interface CountryProps { + value: { + code: string; + label: string; + }; +} + +const Country = React.memo(function Country(props: CountryProps) { + const { value } = props; + const classes = useStyles(); + + return ( +
+ {countryToFlag(value.code)} + {value.label} +
+ ); +}); + +export function renderCountry(params: CellParams) { + return ; +} diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderDone.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderDone.tsx new file mode 100644 index 0000000000000..c43a23ad0d621 --- /dev/null +++ b/packages/grid/x-grid-data-generator/src/renderer/renderDone.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import DoneIcon from '@material-ui/icons/Done'; +import ClearIcon from '@material-ui/icons/Clear'; +import { CellParams } from '@material-ui/x-grid'; + +interface IsDoneProps { + value: boolean; +} + +const IsDone = React.memo(function IsDone(props: IsDoneProps) { + return props.value ? : ; +}); + +export function renderDone(params: CellParams) { + return ; +} diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderEmail.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderEmail.tsx new file mode 100644 index 0000000000000..78a885bba6973 --- /dev/null +++ b/packages/grid/x-grid-data-generator/src/renderer/renderEmail.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import { CellParams } from '@material-ui/x-grid'; +import { DemoLink } from './renderLink'; + +export function renderEmail(params: CellParams) { + const email = params.value?.toString(); + + return {email}; +} diff --git a/packages/grid/x-grid-data-generator/src/renderer/incoterm-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderIncoterm.tsx similarity index 50% rename from packages/grid/x-grid-data-generator/src/renderer/incoterm-renderer.tsx rename to packages/grid/x-grid-data-generator/src/renderer/renderIncoterm.tsx index 0d29bcc80c435..7ebe71821b99a 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/incoterm-renderer.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderIncoterm.tsx @@ -2,25 +2,46 @@ import * as React from 'react'; import Tooltip from '@material-ui/core/Tooltip'; import InfoIcon from '@material-ui/icons/Info'; import { CellParams, CellValue } from '@material-ui/x-grid'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles({ + root: { + display: 'flex', + justifyContent: 'space-between', + }, + icon: { + color: '#2196f3', + alignSelf: 'center', + marginLeft: 8, + }, +}); + +interface IncotermProps { + value: CellValue; +} + +const Incoterm = React.memo(function Incoterm(props: IncotermProps) { + const { value } = props; + const classes = useStyles(); -export const Incoterm: React.FC<{ value: CellValue }> = React.memo(({ value }) => { if (!value) { return null; } + const valueStr = value.toString(); const tooltip = valueStr.slice(valueStr.indexOf('(') + 1, valueStr.indexOf(')')); const code = valueStr.slice(0, valueStr.indexOf('(')).trim(); + return ( -
+
{code} - +
); }); -Incoterm.displayName = 'Incoterm'; -export function IncotermRenderer(params: CellParams) { +export function renderIncoterm(params: CellParams) { return ; } diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderLink.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderLink.tsx new file mode 100644 index 0000000000000..1fd8f404c57c2 --- /dev/null +++ b/packages/grid/x-grid-data-generator/src/renderer/renderLink.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { CellParams } from '@material-ui/x-grid'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles({ + root: { + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + color: 'inherit', + }, +}); + +interface DemoLinkProps { + href: string; + children: string; +} + +export const DemoLink = React.memo(function DemoLink(props: DemoLinkProps) { + const classes = useStyles(); + + const handleClick = (event) => { + event.preventDefault(); + }; + + return ( + + {props.children} + + ); +}); + +export function renderLink(params: CellParams) { + return {params.value!.toString()}; +} diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx new file mode 100644 index 0000000000000..0189df00812f3 --- /dev/null +++ b/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { CellParams } from '@material-ui/x-grid'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + fontVariantNumeric: 'tabular-nums', + }, + positive: { + color: theme.palette.type === 'light' ? theme.palette.success.dark : theme.palette.success.light, + }, + negative: { + color: theme.palette.type === 'light' ? theme.palette.error.dark : theme.palette.error.light, + }, + }), +); + +function pnlFormatter(value) { + return value < 0 ? `(${Math.abs(value).toLocaleString()})` : value.toLocaleString(); +} + +interface PnlProps { + value: number; +} + +const Pnl = React.memo(function Pnl(props: PnlProps) { + const { value } = props; + const classes = useStyles(); + + return ( +
0, + [classes.negative]: value < 0, + })} + > + {pnlFormatter(value)} +
+ ); +}); + +export function renderPnl(params: CellParams) { + return ; +} diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx new file mode 100644 index 0000000000000..72a022e7790e8 --- /dev/null +++ b/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx @@ -0,0 +1,64 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import { CellParams } from '@material-ui/x-grid'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + border: `1px solid ${theme.palette.divider}`, + position: 'relative', + overflow: 'hidden', + width: '100%', + height: 26, + borderRadius: 2, + }, + value: { + position: 'absolute', + lineHeight: '24px', + width: '100%', + display: 'flex', + justifyContent: 'center', + }, + bar: { + height: '100%', + '&.low': { + backgroundColor: '#f44336', + }, + '&.medium': { + backgroundColor: '#efbb5aa3', + }, + '&.high': { + backgroundColor: '#088208a3', + }, + }, + }), +); + +interface ProgressBarProps { + value: number; +} + +const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) { + const { value } = props; + const valueInPercent = value * 100; + const classes = useStyles(); + + return ( +
+
{`${valueInPercent.toLocaleString()} %`}
+
= 30 && valueInPercent <= 70, + high: valueInPercent > 70, + })} + style={{ maxWidth: `${valueInPercent}%` }} + /> +
+ ); +}); + +export function renderProgress(params: CellParams) { + return ; +} diff --git a/packages/grid/x-grid-data-generator/src/renderer/rating-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx similarity index 80% rename from packages/grid/x-grid-data-generator/src/renderer/rating-renderer.tsx rename to packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx index 345962bb2f37e..b964231c4d8dc 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/rating-renderer.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx @@ -2,6 +2,6 @@ import { CellParams } from '@material-ui/x-grid'; import { Rating } from '@material-ui/lab'; import * as React from 'react'; -export function RatingRenderer(params: CellParams) { +export function renderRating(params: CellParams) { return ; } diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx new file mode 100644 index 0000000000000..125462fdb87db --- /dev/null +++ b/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import ReportProblemIcon from '@material-ui/icons/ReportProblem'; +import InfoIcon from '@material-ui/icons/Info'; +import AutorenewIcon from '@material-ui/icons/Autorenew'; +import DoneIcon from '@material-ui/icons/Done'; +import Chip from '@material-ui/core/Chip'; +import { CellParams } from '@material-ui/x-grid'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + justifyContent: 'left', + '& .icon': { + color: 'inherit', + }, + }, + Open: { + color: theme.palette.info.dark, + border: `1px solid ${theme.palette.info.main}`, + }, + Filled: { + color: theme.palette.success.dark, + border: `1px solid ${theme.palette.success.main}`, + }, + PartiallyFilled: { + color: theme.palette.warning.dark, + border: `1px solid ${theme.palette.warning.main}`, + }, + Rejected: { + color: theme.palette.error.dark, + border: `1px solid ${theme.palette.error.main}`, + }, + }), +); + +interface StatusProps { + status: string; +} + +const Status = React.memo((props: StatusProps) => { + const { status } = props; + let icon: any = null; + const classes = useStyles(); + if (status === 'Rejected') { + icon = ; + } else if (status === 'Open') { + icon = ; + } else if (status === 'PartiallyFilled') { + icon = ; + } else if (status === 'Filled') { + icon = ; + } + let label = status; + if (status === 'PartiallyFilled') { + label = 'Partially Filled'; + } + return ( + + ); +}); + +export function renderStatus(params: CellParams) { + return ; +} diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx new file mode 100644 index 0000000000000..e1b6999550838 --- /dev/null +++ b/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import { makeStyles, createStyles, Theme, fade } from '@material-ui/core/styles'; +import { CellParams } from '@material-ui/x-grid'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + paddingRight: 8, + fontVariantNumeric: 'tabular-nums', + }, + good: { + backgroundColor: fade(theme.palette.success.main, 0.3), + }, + bad: { + backgroundColor: fade(theme.palette.error.main, 0.3), + }, + }), +); + +interface TotalPriceProps { + value: number; +} + +const currencyFormatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', +}); + +const TotalPrice = React.memo(function TotalPrice(props: TotalPriceProps) { + const { value } = props; + const classes = useStyles(); + return ( +
1000000, + [classes.bad]: value < 1000000, + })} + > + {currencyFormatter.format(value)} +
+ ); +}); + +export function renderTotalPrice(params: CellParams) { + return ; +} diff --git a/packages/grid/x-grid-data-generator/src/renderer/status-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/status-renderer.tsx deleted file mode 100644 index 4cffc84f26c56..0000000000000 --- a/packages/grid/x-grid-data-generator/src/renderer/status-renderer.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; -import clsx from 'clsx'; -import ReportProblemIcon from '@material-ui/icons/ReportProblem'; -import InfoIcon from '@material-ui/icons/Info'; -import AutorenewIcon from '@material-ui/icons/Autorenew'; -import DoneIcon from '@material-ui/icons/Done'; -import Chip from '@material-ui/core/Chip'; -import styled from 'styled-components'; -import { CellParams } from '@material-ui/x-grid'; - -const StatusContainer = styled.div` - justify-content: left !important; - - .status.Open { - color: #1976d2; - border: 1px solid #1976d2; - } - .status.Open .icon { - color: #1976d2; - } - .status.Rejected { - color: #d20704; - border: 1px solid #d20704; - } - .status.Rejected .icon { - color: #d20704; - } - .status.Filled { - color: #008508; - border: 1px solid #008508; - } - .status.Filled .icon { - color: #008508; - } - .status.PartiallyFilled { - color: #d29f26; - border: 1px solid #d29f26; - } - .status.PartiallyFilled .icon { - color: #d29f26; - } -`; - -export const Status: React.FC<{ status: string }> = React.memo(({ status }) => { - let icon: any = null; - if (status === 'Rejected') { - icon = ; - } else if (status === 'Open') { - icon = ; - } else if (status === 'PartiallyFilled') { - icon = ; - } else if (status === 'Filled') { - icon = ; - } - let label = status; - if (status === 'PartiallyFilled') { - label = 'Partially Filled'; - } - return ( - - - - ); -}); -Status.displayName = 'Status'; - -export function StatusRenderer(params: CellParams) { - return ; -} diff --git a/packages/grid/x-grid-data-generator/src/services/index.ts b/packages/grid/x-grid-data-generator/src/services/index.ts index b9350d0aacd21..3e74ee9b393a7 100644 --- a/packages/grid/x-grid-data-generator/src/services/index.ts +++ b/packages/grid/x-grid-data-generator/src/services/index.ts @@ -1,3 +1,3 @@ export * from './generatableColDef'; -export * from './real-data-service'; export * from './random-generator'; +export * from './real-data-service'; 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 dd97db4e6940a..93e5d927ad684 100644 --- a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx +++ b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx @@ -28,16 +28,14 @@ export const HeaderCheckbox: React.FC = React.memo(({ api }) => { }, [api, selectionChange]); return ( -
- -
+ ); }); HeaderCheckbox.displayName = 'HeaderCheckbox'; @@ -48,15 +46,13 @@ export const CellCheckboxRenderer: React.FC = React.memo(({ api, row }; return ( -
- -
+ ); }); CellCheckboxRenderer.displayName = 'CellCheckboxRenderer'; 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 0e970b183cd98..b128abcf1d90b 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 @@ -71,6 +71,8 @@ export const useStyles = makeStyles( }, '& .MuiDataGrid-colCellCheckbox, & .MuiDataGrid-cellCheckbox': { padding: 0, + justifyContent: 'center', + alignItems: 'center', }, '& .MuiDataGrid-colCell': { position: 'relative', @@ -174,8 +176,7 @@ export const useStyles = makeStyles( }, '& .MuiDataGrid-cellWithRenderer': { display: 'flex', - flexDirection: 'column', - justifyContent: 'center', + alignItems: 'center', }, '& .MuiDataGrid-withBorder': { borderRight: `1px solid ${borderColor}`, diff --git a/packages/grid/x-grid/README.md b/packages/grid/x-grid/README.md index 111561e65c46a..9636e292aa4b0 100644 --- a/packages/grid/x-grid/README.md +++ b/packages/grid/x-grid/README.md @@ -14,84 +14,15 @@ npm install @material-ui/x-grid yarn add @material-ui/x-grid ``` -This component has 3 peer dependencies that you will need to install as well. +This component has 2 peer dependencies that you will need to install as well. ```json "peerDependencies": { "@material-ui/core": "^4.9.12", - "react": "^16.8.0", - "styled-components": "^5.1.0" + "react": "^16.8.0" }, ``` -## Quick Guide - -After installing the package, you are now ready to use the grid. -First you have to import the component as below. - -```js -import { XGrid } from '@material-ui/x-grid'; -``` - -Then you need to create some columns which are simple objects containing at least a field property. -You can import `ColDef` to see all column properties. -A simple set of column can be. - -```tsx -const columns = [{ field: 'id' }, { field: 'name', headerName: 'Client Name' }...]; -``` - -Rows are string key value pair objects. - -```tsx -const rows = [{ id: 1, name:'Jon Snow' }, { id: 2, name: 'Tyrion Lannister' }...]; -``` - -A complete example below. - -```tsx -import * as React from 'react'; -import { XGrid, ColDef } from '@material-ui/x-grid'; - -const columns: ColDef[] = [ - { field: 'id' }, - { field: 'firstName' }, - { field: 'lastName' }, - { - field: 'age', - cellClassName: ['age'], - headerClassName: ['age'], - type: 'number', - sortDirection: 'desc', - }, - { - field: 'fullName', - description: 'this column has a value getter and is not sortable', - headerClassName: 'highlight', - sortable: false, - valueGetter: (params) => - `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`, - }, -]; - -const rows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, - { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, - { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, -]; - -export default function MyApp() { - return ( -
- -
- ); -} -``` - ## Documentation [The documentation](https://material-ui.com/components/data-grid/)