From e8ecc8f61718014e35e9ea3335bbd247fcf8fea2 Mon Sep 17 00:00:00 2001 From: Jason Wang <7934854+jasondashwang@users.noreply.github.com> Date: Sat, 23 Mar 2019 02:54:51 -0700 Subject: [PATCH] [docs] Add TypeScript demos for Simple and Spanning Table (#14985) * added doc types for SimpleTable and SpanningTable * changed to interface * added doc types for SimpleTable and SpanningTable * changed to interface * simplification proposal * accept incoming merge * removed merge error Co-authored-by: Olivier Tassinari --- docs/src/pages/demos/tables/SimpleTable.js | 6 +- docs/src/pages/demos/tables/SimpleTable.tsx | 74 ++++++++++++ docs/src/pages/demos/tables/SpanningTable.js | 15 +-- docs/src/pages/demos/tables/SpanningTable.tsx | 107 ++++++++++++++++++ 4 files changed, 191 insertions(+), 11 deletions(-) create mode 100644 docs/src/pages/demos/tables/SimpleTable.tsx create mode 100644 docs/src/pages/demos/tables/SpanningTable.tsx diff --git a/docs/src/pages/demos/tables/SimpleTable.js b/docs/src/pages/demos/tables/SimpleTable.js index be9598b8265f32..b6588aee48de00 100644 --- a/docs/src/pages/demos/tables/SimpleTable.js +++ b/docs/src/pages/demos/tables/SimpleTable.js @@ -19,10 +19,8 @@ const styles = theme => ({ }, }); -let id = 0; function createData(name, calories, fat, carbs, protein) { - id += 1; - return { id, name, calories, fat, carbs, protein }; + return { name, calories, fat, carbs, protein }; } const rows = [ @@ -50,7 +48,7 @@ function SimpleTable(props) { {rows.map(row => ( - + {row.name} diff --git a/docs/src/pages/demos/tables/SimpleTable.tsx b/docs/src/pages/demos/tables/SimpleTable.tsx new file mode 100644 index 00000000000000..201a51983f0eff --- /dev/null +++ b/docs/src/pages/demos/tables/SimpleTable.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 650, + }, + }); + +function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { + return { name, calories, fat, carbs, protein }; +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + +export interface SimpleTableProps extends WithStyles {} + +function SimpleTable(props: SimpleTableProps) { + const { classes } = props; + + return ( + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map(row => ( + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ))} + +
+ + ); +} + +SimpleTable.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SimpleTable); diff --git a/docs/src/pages/demos/tables/SpanningTable.js b/docs/src/pages/demos/tables/SpanningTable.js index fee73c68851b34..5cdafa5afe2b22 100644 --- a/docs/src/pages/demos/tables/SpanningTable.js +++ b/docs/src/pages/demos/tables/SpanningTable.js @@ -29,9 +29,9 @@ function priceRow(qty, unit) { return qty * unit; } -function createRow(id, desc, qty, unit) { +function createRow(desc, qty, unit) { const price = priceRow(qty, unit); - return { id, desc, qty, unit, price }; + return { desc, qty, unit, price }; } function subtotal(items) { @@ -39,10 +39,10 @@ function subtotal(items) { } const rows = [ - ['Paperclips (Box)', 100, 1.15], - ['Paper (Case)', 10, 45.99], - ['Waste Basket', 2, 17.99], -].map((row, id) => createRow(id, ...row)); + createRow('Paperclips (Box)', 100, 1.15), + createRow('Paper (Case)', 10, 45.99), + createRow('Waste Basket', 2, 17.99), +]; const invoiceSubtotal = subtotal(rows); const invoiceTaxes = TAX_RATE * invoiceSubtotal; @@ -63,13 +63,14 @@ function SpanningTable(props) { {rows.map(row => ( - + {row.desc} {row.qty} {row.unit} {ccyFormat(row.price)} ))} + Subtotal diff --git a/docs/src/pages/demos/tables/SpanningTable.tsx b/docs/src/pages/demos/tables/SpanningTable.tsx new file mode 100644 index 00000000000000..5641ab2b1efe44 --- /dev/null +++ b/docs/src/pages/demos/tables/SpanningTable.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; + +const TAX_RATE = 0.07; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, + }); + +function ccyFormat(num: number) { + return `${num.toFixed(2)}`; +} + +function priceRow(qty: number, unit: number) { + return qty * unit; +} + +function createRow(desc: string, qty: number, unit: number) { + const price = priceRow(qty, unit); + return { desc, qty, unit, price }; +} + +interface Row { + desc: string; + qty: number; + unit: number; + price: number; +} + +function subtotal(items: Row[]) { + return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0); +} + +const rows = [ + createRow('Paperclips (Box)', 100, 1.15), + createRow('Paper (Case)', 10, 45.99), + createRow('Waste Basket', 2, 17.99), +]; + +const invoiceSubtotal = subtotal(rows); +const invoiceTaxes = TAX_RATE * invoiceSubtotal; +const invoiceTotal = invoiceTaxes + invoiceSubtotal; + +export interface SpanningTableProps extends WithStyles {} + +function SpanningTable(props: SpanningTableProps) { + const { classes } = props; + return ( + + + + + Desc + Qty. + @ + Price + + + + {rows.map(row => ( + + {row.desc} + {row.qty} + {row.unit} + {ccyFormat(row.price)} + + ))} + + + Subtotal + {ccyFormat(invoiceSubtotal)} + + + Tax + {`${(TAX_RATE * 100).toFixed(0)} %`} + {ccyFormat(invoiceTaxes)} + + + Total + {ccyFormat(invoiceTotal)} + + +
+ + ); +} + +SpanningTable.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SpanningTable);