From 99ea7cb413f15d7c4540b07b0a6b6a4757a8f978 Mon Sep 17 00:00:00 2001 From: hopelessmuffins Date: Wed, 20 Mar 2019 23:15:49 -0700 Subject: [PATCH 1/6] added doc types for SimpleTable and SpanningTable --- docs/src/pages/demos/tables/SimpleTable.tsx | 76 ++++++++++++ docs/src/pages/demos/tables/SpanningTable.tsx | 115 ++++++++++++++++++ 2 files changed, 191 insertions(+) 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.tsx b/docs/src/pages/demos/tables/SimpleTable.tsx new file mode 100644 index 00000000000000..c628a8e5bb1607 --- /dev/null +++ b/docs/src/pages/demos/tables/SimpleTable.tsx @@ -0,0 +1,76 @@ +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, + }, + }); + +let id = 0; +function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { + id += 1; + return { id, 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.tsx b/docs/src/pages/demos/tables/SpanningTable.tsx new file mode 100644 index 00000000000000..14e0f89a067036 --- /dev/null +++ b/docs/src/pages/demos/tables/SpanningTable.tsx @@ -0,0 +1,115 @@ +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; +} + +class Row { + id: number; + desc: string; + qty: number; + unit: number; + price: number; + constructor(id: number, desc: string, qty: number, unit: number, price: number) { + this.id = id; + this.desc = desc; + this.qty = qty; + this.unit = unit; + this.price = price; + } +} + +function createRow(id: number, desc: string, qty: number, unit: number) { + const price = priceRow(qty, unit); + return new Row(id, desc, qty, unit, price); +} + +function subtotal(items: Row[]) { + return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0); +} + +const rows = [ + { desc: 'Paperclips (Box)', qty: 100, unit: 1.15 }, + { desc: 'Paper (Case)', qty: 10, unit: 45.99 }, + { desc: 'Waste Basket', qty: 2, unit: 17.99 }, +].map((row, id) => createRow(id, row.desc, row.qty, row.unit)); + +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); From ab09027ed867106dea5648e6dc28de101692c401 Mon Sep 17 00:00:00 2001 From: hopelessmuffins Date: Wed, 20 Mar 2019 23:41:06 -0700 Subject: [PATCH 2/6] changed to interface --- docs/src/pages/demos/tables/SpanningTable.tsx | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/docs/src/pages/demos/tables/SpanningTable.tsx b/docs/src/pages/demos/tables/SpanningTable.tsx index 14e0f89a067036..ccb674fe17afc1 100644 --- a/docs/src/pages/demos/tables/SpanningTable.tsx +++ b/docs/src/pages/demos/tables/SpanningTable.tsx @@ -30,24 +30,17 @@ function priceRow(qty: number, unit: number) { return qty * unit; } -class Row { +function createRow(id: number, desc: string, qty: number, unit: number) { + const price = priceRow(qty, unit); + return { id, desc, qty, unit, price }; +} + +interface Row { id: number; desc: string; qty: number; unit: number; price: number; - constructor(id: number, desc: string, qty: number, unit: number, price: number) { - this.id = id; - this.desc = desc; - this.qty = qty; - this.unit = unit; - this.price = price; - } -} - -function createRow(id: number, desc: string, qty: number, unit: number) { - const price = priceRow(qty, unit); - return new Row(id, desc, qty, unit, price); } function subtotal(items: Row[]) { @@ -55,10 +48,10 @@ function subtotal(items: Row[]) { } const rows = [ - { desc: 'Paperclips (Box)', qty: 100, unit: 1.15 }, - { desc: 'Paper (Case)', qty: 10, unit: 45.99 }, - { desc: 'Waste Basket', qty: 2, unit: 17.99 }, -].map((row, id) => createRow(id, row.desc, row.qty, row.unit)); + ['Paperclips (Box)', 100, 1.15], + ['Paper (Case)', 10, 45.99], + ['Waste Basket', 2, 17.99], +].map((row, id) => createRow(id, row[0] as string, row[1] as number, row[2] as number)); const invoiceSubtotal = subtotal(rows); const invoiceTaxes = TAX_RATE * invoiceSubtotal; From afbf8f9d301d889d141aa4d4b421015894d653de Mon Sep 17 00:00:00 2001 From: hopelessmuffins Date: Wed, 20 Mar 2019 23:15:49 -0700 Subject: [PATCH 3/6] added doc types for SimpleTable and SpanningTable --- docs/src/pages/demos/tables/SimpleTable.tsx | 76 ++++++++++++ docs/src/pages/demos/tables/SpanningTable.tsx | 115 ++++++++++++++++++ 2 files changed, 191 insertions(+) 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.tsx b/docs/src/pages/demos/tables/SimpleTable.tsx new file mode 100644 index 00000000000000..c628a8e5bb1607 --- /dev/null +++ b/docs/src/pages/demos/tables/SimpleTable.tsx @@ -0,0 +1,76 @@ +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, + }, + }); + +let id = 0; +function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { + id += 1; + return { id, 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.tsx b/docs/src/pages/demos/tables/SpanningTable.tsx new file mode 100644 index 00000000000000..14e0f89a067036 --- /dev/null +++ b/docs/src/pages/demos/tables/SpanningTable.tsx @@ -0,0 +1,115 @@ +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; +} + +class Row { + id: number; + desc: string; + qty: number; + unit: number; + price: number; + constructor(id: number, desc: string, qty: number, unit: number, price: number) { + this.id = id; + this.desc = desc; + this.qty = qty; + this.unit = unit; + this.price = price; + } +} + +function createRow(id: number, desc: string, qty: number, unit: number) { + const price = priceRow(qty, unit); + return new Row(id, desc, qty, unit, price); +} + +function subtotal(items: Row[]) { + return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0); +} + +const rows = [ + { desc: 'Paperclips (Box)', qty: 100, unit: 1.15 }, + { desc: 'Paper (Case)', qty: 10, unit: 45.99 }, + { desc: 'Waste Basket', qty: 2, unit: 17.99 }, +].map((row, id) => createRow(id, row.desc, row.qty, row.unit)); + +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); From e6bc41dc0677e57a5ddc853da41966dc97257800 Mon Sep 17 00:00:00 2001 From: hopelessmuffins Date: Wed, 20 Mar 2019 23:41:06 -0700 Subject: [PATCH 4/6] changed to interface --- docs/src/pages/demos/tables/SpanningTable.tsx | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/docs/src/pages/demos/tables/SpanningTable.tsx b/docs/src/pages/demos/tables/SpanningTable.tsx index 14e0f89a067036..ccb674fe17afc1 100644 --- a/docs/src/pages/demos/tables/SpanningTable.tsx +++ b/docs/src/pages/demos/tables/SpanningTable.tsx @@ -30,24 +30,17 @@ function priceRow(qty: number, unit: number) { return qty * unit; } -class Row { +function createRow(id: number, desc: string, qty: number, unit: number) { + const price = priceRow(qty, unit); + return { id, desc, qty, unit, price }; +} + +interface Row { id: number; desc: string; qty: number; unit: number; price: number; - constructor(id: number, desc: string, qty: number, unit: number, price: number) { - this.id = id; - this.desc = desc; - this.qty = qty; - this.unit = unit; - this.price = price; - } -} - -function createRow(id: number, desc: string, qty: number, unit: number) { - const price = priceRow(qty, unit); - return new Row(id, desc, qty, unit, price); } function subtotal(items: Row[]) { @@ -55,10 +48,10 @@ function subtotal(items: Row[]) { } const rows = [ - { desc: 'Paperclips (Box)', qty: 100, unit: 1.15 }, - { desc: 'Paper (Case)', qty: 10, unit: 45.99 }, - { desc: 'Waste Basket', qty: 2, unit: 17.99 }, -].map((row, id) => createRow(id, row.desc, row.qty, row.unit)); + ['Paperclips (Box)', 100, 1.15], + ['Paper (Case)', 10, 45.99], + ['Waste Basket', 2, 17.99], +].map((row, id) => createRow(id, row[0] as string, row[1] as number, row[2] as number)); const invoiceSubtotal = subtotal(rows); const invoiceTaxes = TAX_RATE * invoiceSubtotal; From 0431101a3435c72ee99646db5e09ffedc7830858 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 21 Mar 2019 09:18:50 +0100 Subject: [PATCH 5/6] simplification proposal --- docs/src/pages/demos/tables/SimpleTable.js | 6 ++---- docs/src/pages/demos/tables/SimpleTable.tsx | 6 ++---- docs/src/pages/demos/tables/SpanningTable.js | 15 ++++++++------- docs/src/pages/demos/tables/SpanningTable.tsx | 15 +++++++-------- 4 files changed, 19 insertions(+), 23 deletions(-) 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 index c628a8e5bb1607..201a51983f0eff 100644 --- a/docs/src/pages/demos/tables/SimpleTable.tsx +++ b/docs/src/pages/demos/tables/SimpleTable.tsx @@ -20,10 +20,8 @@ const styles = (theme: Theme) => }, }); -let id = 0; function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { - id += 1; - return { id, name, calories, fat, carbs, protein }; + return { name, calories, fat, carbs, protein }; } const rows = [ @@ -53,7 +51,7 @@ function SimpleTable(props: SimpleTableProps) { {rows.map(row => ( - + {row.name} 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 index ccb674fe17afc1..5641ab2b1efe44 100644 --- a/docs/src/pages/demos/tables/SpanningTable.tsx +++ b/docs/src/pages/demos/tables/SpanningTable.tsx @@ -30,13 +30,12 @@ function priceRow(qty: number, unit: number) { return qty * unit; } -function createRow(id: number, desc: string, qty: number, unit: number) { +function createRow(desc: string, qty: number, unit: number) { const price = priceRow(qty, unit); - return { id, desc, qty, unit, price }; + return { desc, qty, unit, price }; } interface Row { - id: number; desc: string; qty: number; unit: number; @@ -48,10 +47,10 @@ function subtotal(items: Row[]) { } const rows = [ - ['Paperclips (Box)', 100, 1.15], - ['Paper (Case)', 10, 45.99], - ['Waste Basket', 2, 17.99], -].map((row, id) => createRow(id, row[0] as string, row[1] as number, row[2] as number)); + 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; @@ -74,7 +73,7 @@ function SpanningTable(props: SpanningTableProps) { {rows.map(row => ( - + {row.desc} {row.qty} {row.unit} From ae3fc378b7f35190e6c1c88de99741e8c13ee13c Mon Sep 17 00:00:00 2001 From: hopelessmuffins Date: Thu, 21 Mar 2019 08:26:09 -0700 Subject: [PATCH 6/6] removed merge error --- docs/src/pages/demos/tables/SimpleTable.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/docs/src/pages/demos/tables/SimpleTable.tsx b/docs/src/pages/demos/tables/SimpleTable.tsx index 6ab7da66e912d0..201a51983f0eff 100644 --- a/docs/src/pages/demos/tables/SimpleTable.tsx +++ b/docs/src/pages/demos/tables/SimpleTable.tsx @@ -20,15 +20,8 @@ const styles = (theme: Theme) => }, }); -<<<<<<< HEAD -let id = 0; -function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { - id += 1; - return { id, name, calories, fat, carbs, protein }; -======= function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { return { name, calories, fat, carbs, protein }; ->>>>>>> 0431101a3435c72ee99646db5e09ffedc7830858 } const rows = [ @@ -58,11 +51,7 @@ function SimpleTable(props: SimpleTableProps) { {rows.map(row => ( -<<<<<<< HEAD - -======= ->>>>>>> 0431101a3435c72ee99646db5e09ffedc7830858 {row.name}