From 032c1da399666719d7445b1afc5c5d414100735d Mon Sep 17 00:00:00 2001 From: anusree-mmlab Date: Thu, 12 Oct 2017 15:34:27 +0530 Subject: [PATCH 1/2] Slight modification on cellClick Inside _this.handleCellClick There is a condition if (onCellClick && !selectable) This prevents the cell from clicked when selected. I programatically shows the selected show and i need to work selected and onClick work together --- src/DataTables/DataTables.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DataTables/DataTables.js b/src/DataTables/DataTables.js index 9ba9c23..aa497b3 100644 --- a/src/DataTables/DataTables.js +++ b/src/DataTables/DataTables.js @@ -185,7 +185,7 @@ class DataTables extends Component { handleCellClick = (rowIndex, columnIndex, event) => { const {onCellClick, selectable} = this.props; - if (onCellClick && !selectable) { + if (onCellClick) { const adjustedColumnIndex = this.props.showCheckboxes ? columnIndex : columnIndex - 1; onCellClick( rowIndex, From e073c05d1c26d6a5c148fe3b8265f6e964dc4bb7 Mon Sep 17 00:00:00 2001 From: anusree Date: Thu, 12 Oct 2017 16:38:11 +0530 Subject: [PATCH 2/2] re-ordered folders --- {src/DataTables => DataTables}/DataTables.js | 0 .../DataTablesHeaderColumn.js | 0 .../DataTablesHeaderToolbar.js | 0 .../DataTablesRow.js | 0 .../DataTablesRowColumn.js | 0 .../DataTablesTable.js | 0 .../DataTablesTableBody.js | 0 {src/DataTables => DataTables}/index.js | 0 example/app/index.html | 23 - example/app/main.css | 8 - example/src/Main.js | 593 --------------- example/src/app.js | 8 - src/index.js => index.js | 0 test/DataTables/DataTables.spec.js | 696 ------------------ test/DataTables/tableSettings.js | 249 ------- 15 files changed, 1577 deletions(-) rename {src/DataTables => DataTables}/DataTables.js (100%) rename {src/DataTables => DataTables}/DataTablesHeaderColumn.js (100%) rename {src/DataTables => DataTables}/DataTablesHeaderToolbar.js (100%) rename {src/DataTables => DataTables}/DataTablesRow.js (100%) rename {src/DataTables => DataTables}/DataTablesRowColumn.js (100%) rename {src/DataTables => DataTables}/DataTablesTable.js (100%) rename {src/DataTables => DataTables}/DataTablesTableBody.js (100%) rename {src/DataTables => DataTables}/index.js (100%) delete mode 100644 example/app/index.html delete mode 100644 example/app/main.css delete mode 100644 example/src/Main.js delete mode 100644 example/src/app.js rename src/index.js => index.js (100%) delete mode 100644 test/DataTables/DataTables.spec.js delete mode 100644 test/DataTables/tableSettings.js diff --git a/src/DataTables/DataTables.js b/DataTables/DataTables.js similarity index 100% rename from src/DataTables/DataTables.js rename to DataTables/DataTables.js diff --git a/src/DataTables/DataTablesHeaderColumn.js b/DataTables/DataTablesHeaderColumn.js similarity index 100% rename from src/DataTables/DataTablesHeaderColumn.js rename to DataTables/DataTablesHeaderColumn.js diff --git a/src/DataTables/DataTablesHeaderToolbar.js b/DataTables/DataTablesHeaderToolbar.js similarity index 100% rename from src/DataTables/DataTablesHeaderToolbar.js rename to DataTables/DataTablesHeaderToolbar.js diff --git a/src/DataTables/DataTablesRow.js b/DataTables/DataTablesRow.js similarity index 100% rename from src/DataTables/DataTablesRow.js rename to DataTables/DataTablesRow.js diff --git a/src/DataTables/DataTablesRowColumn.js b/DataTables/DataTablesRowColumn.js similarity index 100% rename from src/DataTables/DataTablesRowColumn.js rename to DataTables/DataTablesRowColumn.js diff --git a/src/DataTables/DataTablesTable.js b/DataTables/DataTablesTable.js similarity index 100% rename from src/DataTables/DataTablesTable.js rename to DataTables/DataTablesTable.js diff --git a/src/DataTables/DataTablesTableBody.js b/DataTables/DataTablesTableBody.js similarity index 100% rename from src/DataTables/DataTablesTableBody.js rename to DataTables/DataTablesTableBody.js diff --git a/src/DataTables/index.js b/DataTables/index.js similarity index 100% rename from src/DataTables/index.js rename to DataTables/index.js diff --git a/example/app/index.html b/example/app/index.html deleted file mode 100644 index a8dda43..0000000 --- a/example/app/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - Material-UI Custom Components Example - - - - - - - - -
- - - - - diff --git a/example/app/main.css b/example/app/main.css deleted file mode 100644 index 76718ab..0000000 --- a/example/app/main.css +++ /dev/null @@ -1,8 +0,0 @@ -html { - font-family: 'Roboto', sans-serif; -} - -body { - font-size: 13px; - line-height: 20px; -} diff --git a/example/src/Main.js b/example/src/Main.js deleted file mode 100644 index c3cfd91..0000000 --- a/example/src/Main.js +++ /dev/null @@ -1,593 +0,0 @@ -import React, {Component} from 'react'; -import RaisedButton from 'material-ui/RaisedButton'; -import Dialog from 'material-ui/Dialog'; -import {deepOrange500} from 'material-ui/styles/colors'; -import FlatButton from 'material-ui/FlatButton'; -import getMuiTheme from 'material-ui/styles/getMuiTheme'; -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; -import MenuItem from 'material-ui/MenuItem'; -import {Card, CardHeader} from 'material-ui/Card'; -import IconButton from 'material-ui/IconButton'; -import PersonAdd from 'material-ui/svg-icons/social/person-add'; -import InfoOutline from 'material-ui/svg-icons/action/info-outline'; - -import DataTables from '../../src'; - -const styles = { - container: { - textAlign: 'center', - }, - component: { - margin: '60px 20px', - }, - titleStyle: { - fontSize: 16, - color: deepOrange500, - }, - footerToolbarStyle: { - padding: '0 100px', - }, - tableStyle: { - tableLayout: 'auto', - }, - tableBodyStyle: { - overflowX: 'auto', - }, - tableWrapperStyle: { - padding: 5, - }, -}; - -const muiTheme = getMuiTheme({ - palette: { - accent1Color: deepOrange500, - }, -}); - -const TABLE_COLUMNS = [ - { - key: 'name', - label: 'Dessert (100g serving)', - }, { - key: 'calories', - label: 'Calories', - }, { - key: 'fat', - label: 'Fat (g)', - }, { - key: 'carbs', - label: 'Carbs (g)', - }, { - key: 'protein', - label: 'Protein (g)', - }, { - key: 'sodium', - label: 'Sodium (mg)', - }, { - key: 'calcium', - label: 'Calcium (%)', - }, { - key: 'iron', - label: 'Iron (%)', - }, -]; - -const TABLE_COLUMNS_TOOLTIP = [ - { - key: 'name', - label: 'Dessert (100g serving)', - tooltip: 'Dessert (100g serving)', - }, { - key: 'calories', - label: 'Calories', - tooltip: 'Calories', - }, { - key: 'fat', - label: 'Fat (g)', - tooltip: 'Fat (g)', - }, { - key: 'carbs', - label: 'Carbs (g)', - tooltip: 'Carbs (g)', - }, { - key: 'protein', - label: 'Protein (g)', - tooltip: 'Protein (g)', - }, { - key: 'sodium', - label: 'Sodium (mg)', - tooltip: 'Sodium (mg)', - }, { - key: 'calcium', - label: 'Calcium (%)', - tooltip: 'Calcium (%)', - }, { - key: 'iron', - label: 'Iron (%)', - tooltip: 'Iron (%)', - }, -]; - -const TABLE_COLUMNS_SORT_STYLE = [ - { - key: 'name', - label: 'Dessert (100g serving)', - sortable: true, - style: { - width: 250, - } - }, { - key: 'calories', - label: 'Calories', - sortable: true, - }, { - key: 'fat', - label: 'Fat (g)', - alignRight: true, - }, { - key: 'carbs', - label: 'Carbs (g)', - }, { - key: 'protein', - label: 'Protein (g)', - }, { - key: 'sodium', - label: 'Sodium (mg)', - }, { - key: 'calcium', - label: 'Calcium (%)', - }, { - key: 'iron', - label: 'Iron (%)', - }, -]; - -const TABLE_COLUMNS_CLASSNAME = [ - { - key: 'name', - label: 'Dessert (100g serving)', - className: 'important-column', - }, { - key: 'calories', - label: 'Calories', - className: 'important-column', - }, { - key: 'fat', - label: 'Fat (g)', - }, { - key: 'carbs', - label: 'Carbs (g)', - }, { - key: 'protein', - label: 'Protein (g)', - }, { - key: 'sodium', - label: 'Sodium (mg)', - }, { - key: 'calcium', - label: 'Calcium (%)', - }, { - key: 'iron', - label: 'Iron (%)', - }, -]; - -const TABLE_DATA = [ - { - name: 'Frozen yogurt', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Ice cream sandwich', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Eclair', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Cupcake', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Gingerbread', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Jelly bean', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Lollipop', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Honeycomb', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Donut', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'KitKat', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, -]; - -const TABLE_DATA_NEXT = [ - { - name: 'Marshmallow', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, -]; - -class Main extends Component { - constructor(props, context) { - super(props, context); - this.handleSortOrderChange = this.handleSortOrderChange.bind(this); - this.handleFilterValueChange = this.handleFilterValueChange.bind(this); - this.handleCellClick = this.handleCellClick.bind(this); - this.handleCellDoubleClick = this.handleCellDoubleClick.bind(this); - this.handleRowSelection = this.handleRowSelection.bind(this); - this.handlePreviousPageClick = this.handlePreviousPageClick.bind(this); - this.handleNextPageClick = this.handleNextPageClick.bind(this); - this.handlePersonAddClick = this.handlePersonAddClick.bind(this); - this.handleInfoClick = this.handleInfoClick.bind(this); - - this.state = { - data: TABLE_DATA, - page: 1, - }; - } - - handleSortOrderChange(key, order) { - console.log('key:' + key + ' order: ' + order); - } - - handleFilterValueChange(value) { - console.log('filter value: ' + value); - } - - handleCellClick(rowIndex, columnIndex, row, column) { - console.log('rowIndex: ' + rowIndex + ' columnIndex: ' + columnIndex); - } - - handleCellDoubleClick(rowIndex, columnIndex, row, column) { - console.log('rowIndex: ' + rowIndex + ' columnIndex: ' + columnIndex); - } - - handleRowSelection(selectedRows) { - console.log('selectedRows: ' + selectedRows); - } - - handlePreviousPageClick() { - console.log('handlePreviousPageClick'); - this.setState({ - data: TABLE_DATA, - page: 1, - }); - } - - handleNextPageClick() { - console.log('handleNextPageClick'); - this.setState({ - data: TABLE_DATA_NEXT, - page: 2, - }); - } - - handlePersonAddClick() { - console.log('handlePersonAddClick'); - } - - handleInfoClick() { - console.log('handleInfoClick'); - } - - render() { - return ( - -
-

Material-UI-Custom-Components

-
-

DataTables (Basic)

- - - - -
-
-

DataTables (Selectable & Tooltip & Pagination)

- - - - -
-
-

DataTables (Filter & Column Sort & Styled Column)

- - - -
-
-

DataTables (Internationalization)

- - {return `${start} - ${end} ${count}件`}} - showCheckboxes={false} - showHeaderToolbar={true} - count={100} - /> - -
-
-

DataTables (Toolbar Icons & Styled title & Styled table)

- - - - , - - - - ]} - /> - -
-
-

DataTables (Column class name)

- - - - -
-
-

DataTables (Programmatically select rows)

- - - - -
-
-

DataTables (onRowSelection handler & onCellDoubleClick handler)

- - - - -
-
-

DataTables (Disable footer toolbar)

- - - - -
-
-

DataTables (Header toolbar mode)

- - - -
-
-

DataTables (Hide filter icon)

- - - -
-
- - ); - } -} - -export default Main; diff --git a/example/src/app.js b/example/src/app.js deleted file mode 100644 index d0deab9..0000000 --- a/example/src/app.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import {render} from 'react-dom'; -import injectTapEventPlugin from 'react-tap-event-plugin'; -import Main from './Main'; - -injectTapEventPlugin(); - -render(
, document.getElementById('root')); diff --git a/src/index.js b/index.js similarity index 100% rename from src/index.js rename to index.js diff --git a/test/DataTables/DataTables.spec.js b/test/DataTables/DataTables.spec.js deleted file mode 100644 index cf4ca57..0000000 --- a/test/DataTables/DataTables.spec.js +++ /dev/null @@ -1,696 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {shallow, mount} from 'enzyme'; -import {expect} from 'chai'; -import sinon from 'sinon'; - -import getMuiTheme from 'material-ui/styles/getMuiTheme'; -import {TableHeader} from 'material-ui/Table'; -import {Toolbar, ToolbarTitle} from 'material-ui/Toolbar'; -import DropDownMenu from 'material-ui/DropDownMenu'; -import MenuItem from 'material-ui/MenuItem'; -import FlatButton from 'material-ui/FlatButton'; -import IconButton from 'material-ui/IconButton'; -import TextField from 'material-ui/TextField'; -import PersonAdd from 'material-ui/svg-icons/social/person-add'; -import InfoOutline from 'material-ui/svg-icons/action/info-outline'; -import FilterListIcon from 'material-ui/svg-icons/content/filter-list'; -import {deepOrange500} from 'material-ui/styles/colors'; - -import { - TABLE_COLUMNS, - TABLE_COLUMNS_TOOLTIP, - TABLE_COLUMNS_SORT_STYLE, - TABLE_COLUMNS_CLASSNAME, - TABLE_DATA, - styles, -} from './tableSettings'; -import DataTables from '../../src/DataTables/DataTables'; -import DataTablesHeaderColumn from '../../src/DataTables/DataTablesHeaderColumn'; -import DataTablesRow from '../../src/DataTables/DataTablesRow'; -import DataTablesRowColumn from '../../src/DataTables/DataTablesRowColumn'; -import DataTablesHeaderToolbar from '../../src/DataTables/DataTablesHeaderToolbar'; -import DataTablesTable from '../../src/DataTables/DataTablesTable'; - -describe('', function() { - describe('Basic', function() { - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // shallow rendering - wrapper = shallow( - , - { - context: {muiTheme: muiTheme}, - } - ); - }); - - it('should render table header', function() { - expect(wrapper.find(TableHeader)).to.have.length(1); - }); - it('should render header columns', function() { - const headerColumns = wrapper.find(DataTablesHeaderColumn); - expect(headerColumns).to.have.length(8); - expect(headerColumns.getNodes()[0].props.children.props.children).to.equal('Dessert (100g serving)'); - expect(headerColumns.getNodes()[1].props.children.props.children).to.equal('Calories'); - expect(headerColumns.getNodes()[2].props.children.props.children).to.equal('Fat (g)'); - expect(headerColumns.getNodes()[3].props.children.props.children).to.equal('Carbs (g)'); - expect(headerColumns.getNodes()[4].props.children.props.children).to.equal('Protein (g)'); - expect(headerColumns.getNodes()[5].props.children.props.children).to.equal('Sodium (mg)'); - expect(headerColumns.getNodes()[6].props.children.props.children).to.equal('Calcium (%)'); - expect(headerColumns.getNodes()[7].props.children.props.children).to.equal('Iron (%)'); - }); - it('should render 10 data rows by default', function() { - const dataRows = wrapper.find(DataTablesRow); - expect(dataRows).to.have.length(10); - }); - it('should render data columns', function() { - const dataRows = wrapper.find(DataTablesRow); - expect(dataRows.getNodes()[3].props.children[0].props.children).to.equal('Cupcake'); - expect(dataRows.getNodes()[3].props.children[1].props.children).to.equal('159'); - expect(dataRows.getNodes()[3].props.children[2].props.children).to.equal('6.0'); - expect(dataRows.getNodes()[3].props.children[3].props.children).to.equal('24'); - expect(dataRows.getNodes()[3].props.children[4].props.children).to.equal('4.0'); - expect(dataRows.getNodes()[3].props.children[5].props.children).to.equal('87'); - expect(dataRows.getNodes()[3].props.children[6].props.children).to.equal('14%'); - expect(dataRows.getNodes()[3].props.children[7].props.children).to.equal('1%'); - }); - it('should render data columns render function', function() { - const dataRows = wrapper.find(DataTablesRow); - expect(dataRows.getNodes()[2].props.children[2].props.children).to.equal('6.0'); - }); - it('should render row size label', function() { - const rowSizeLabelWrapper = wrapper.find({style: styles.footerToolbarItem}).getNodes()[0]; - expect(rowSizeLabelWrapper.props.children.props.children).to.equal('Rows per page:'); - }); - it('should render row size menu', function() { - expect(wrapper.find(DropDownMenu)).to.have.length(1); - }); - it('should render 10, 30, 50, 100 row size items by default', function() { - const rowSizeItems = wrapper.find(MenuItem); - expect(rowSizeItems).to.have.length(4); - expect(rowSizeItems.getNodes()[0].props.value).to.equal(10); - expect(rowSizeItems.getNodes()[1].props.value).to.equal(30); - expect(rowSizeItems.getNodes()[2].props.value).to.equal(50); - expect(rowSizeItems.getNodes()[3].props.value).to.equal(100); - }); - it('should render summary label', function() { - const summaryLabelWrapper = wrapper.find({style: styles.footerToolbarItem}).getNodes()[1]; - expect(summaryLabelWrapper.props.children.props.children).to.equal('1 - 10 of 100'); - }); - it('should render pagination buttons', function() { - expect(wrapper.find(FlatButton)).to.have.length(2); - }); - it('should not render checkboxes', function() { - expect(wrapper.find('[type="checkbox"]')).to.have.length(0); - }); - it('should render footer toolbar', function() { - expect(wrapper.find({style: styles.footerToolbar})).to.have.length(1); - }); - }); - - describe('Selectable & Tooltip & Pagination', function() { - const handleNextPageClick = sinon.spy(); - const handlePreviousPageClick = sinon.spy(); - const handleRowSelection = sinon.spy(); - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - - // dummy - global.window.getSelection = function() { - return { - removeAllRanges: function() { - }, - }; - }; - }); - - it('should call row select handler', function(done) { - wrapper.find(DataTablesRowColumn).first().simulate('click'); - setTimeout(() => { - expect(handleRowSelection).to.have.property('callCount', 1); - expect(wrapper.find(DataTablesRow).first().prop('selected')).to.equal(true); - done(); - }, 500); - }); - it('should render tooltips', function() { - const headerColumns = wrapper.find(DataTablesHeaderColumn); - expect(headerColumns.getNodes()[0].props.tooltip).to.equal('Dessert (100g serving)'); - expect(headerColumns.getNodes()[1].props.tooltip).to.equal('Calories'); - }); - it('should call pagination handler', function() { - wrapper.find(FlatButton).last().simulate('click'); - expect(handleNextPageClick).to.have.property('callCount', 1); - wrapper.setProps({page: 2}); - wrapper.find(FlatButton).first().simulate('click'); - expect(handlePreviousPageClick).to.have.property('callCount', 1); - }); - it('should render checkboxes', function() { - expect(wrapper.find('[type="checkbox"]')).to.have.length(11); - }); - }); - - describe('Filter & Column Sort & Styled Column', function() { - const handleCellClick = sinon.spy(); - const handleCellDoubleClick = sinon.spy(); - const handleFilterValueChange = sinon.spy(); - const handleSortOrderChange = sinon.spy(); - const handleRowSizeChange = sinon.spy(); - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - - // dummy - global.window.getSelection = function() { - return { - removeAllRanges: function() { - }, - }; - }; - }); - - it('should render header tool bar', function() { - expect(wrapper.find(DataTablesHeaderToolbar)).to.have.length(1); - }); - it('should render data tables title', function() { - expect(wrapper.find(DataTablesHeaderToolbar).prop('title')).to.equal('Nutrition'); - }); - it('should call click handler', function(done) { - wrapper.find(DataTablesRowColumn).first().simulate('click'); - setTimeout(() => { - expect(handleCellClick).to.have.property('callCount', 1); - done(); - }, 500); - }); - it('should call dobule click handler', function() { - // simulate double click - wrapper.find(DataTablesRowColumn).first().simulate('click'); - wrapper.find(DataTablesRowColumn).first().simulate('click'); - expect(handleCellDoubleClick).to.have.property('callCount', 1); - }); - it('should call filter value change handler and set focus to input', function(done) { - wrapper.find(DataTablesHeaderToolbar).find(IconButton).simulate('click'); - const inputNodeInstanceId = Object.keys(wrapper.find(DataTablesHeaderToolbar).find(TextField).find('input').getDOMNode())[0]; - const inputDomId = wrapper.find(DataTablesHeaderToolbar).find(TextField).find('input').getDOMNode()[inputNodeInstanceId]._domID; - const activeElementDomId = document.activeElement[inputNodeInstanceId]._domID; - expect(inputDomId).to.equal(activeElementDomId); - wrapper.find(DataTablesHeaderToolbar).find(TextField).find('input') - .simulate('change', {target: {value: 'dummy'}}); - setTimeout(() => { - expect(handleFilterValueChange).to.have.property('callCount', 1); - expect(handleFilterValueChange.calledWith('dummy')).to.equal(true); - done(); - }, 800); - }); - it('should call row size change handler', function() { - wrapper.find(DropDownMenu).props().onChange({}, 1, 30); - expect(handleRowSizeChange).to.have.property('callCount', 1); - expect(handleRowSizeChange.calledWith(1, 30)).to.equal(true); - }); - it('should call sort order change handler', function() { - wrapper.find(DataTablesHeaderColumn).first().simulate('click'); - expect(handleSortOrderChange).to.have.property('callCount', 1); - expect(handleSortOrderChange.calledWith('name', 'asc')).to.equal(true); - wrapper.find(DataTablesHeaderColumn).first().simulate('click'); - expect(handleSortOrderChange.calledWith('name', 'desc')).to.equal(true); - }); - }); - - describe('Internationalization', function() { - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - `${start} - ${end} ${count}件` - } - showCheckboxes={false} - showHeaderToolbar={true} - count={100} - />, - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should render data tables title', function() { - expect(wrapper.find(DataTablesHeaderToolbar).prop('title')).to.equal('ニュートリション'); - }); - it('should render row size label with customized label', function() { - expect( - wrapper.find({style: styles.footerToolbarItem}) - .at(0).props().children.props.children - ) - .to.equal('ページサイズ'); - }); - it('should render summary label with customized label', function() { - expect( - wrapper.find({style: styles.footerToolbarItem}) - .at(1).props().children.props.children - ) - .to.equal('1 - 10 100件'); - }); - it('should render search hint with customized text', function() { - wrapper.find(DataTablesHeaderToolbar).find(IconButton).simulate('click'); - expect(wrapper.find(DataTablesHeaderToolbar).find(TextField).prop('hintText')).to.equal('検索'); - }); - }); - - describe('Toolbar Icons & Styled title & Styled table', function() { - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - - - , - - - , - ]} - />, - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should render custom tool bar icons', function() { - expect(wrapper.find(DataTablesHeaderToolbar).find(IconButton)).to.have.length(3); - expect(wrapper.find(DataTablesHeaderToolbar).find(FilterListIcon)).to.have.length(1); - expect(wrapper.find(DataTablesHeaderToolbar).find(PersonAdd)).to.have.length(1); - expect(wrapper.find(DataTablesHeaderToolbar).find(InfoOutline)).to.have.length(1); - }); - - it('should have inline styles for title', function() { - expect(wrapper.find(ToolbarTitle).prop('style').fontSize).not.to.equal(undefined); - expect(wrapper.find(ToolbarTitle).prop('style').color).not.to.equal(undefined); - expect(wrapper.find(ToolbarTitle).prop('style').fontSize).to.equal(16); - expect(wrapper.find(ToolbarTitle).prop('style').color).to.equal(deepOrange500); - }); - - it('should have footerToolbar styles defined', function() { - expect(wrapper.find(Toolbar).at(1).prop('style').padding).to.equal('0 100px'); - }); - - it('should have table styles defined', function() { - expect(wrapper.find(DataTablesTable).at(0).prop('style').tableLayout).to.equal('auto'); - }); - - it('should have table body styles defined', function() { - expect(wrapper.find(DataTablesTable).at(0).prop('bodyStyle').overflowX).to.equal('auto'); - }); - - it('should have table wrapper styles defined', function() { - expect(wrapper.find(DataTablesTable).at(0).prop('wrapperStyle').padding).to.equal(5); - }); - }); - - describe('Column class name', function() { - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should have column class name', function() { - const headerColumns = wrapper.find(DataTablesHeaderColumn); - expect(headerColumns.getNodes()[0].props.className).to.equal('important-column'); - expect(headerColumns.getNodes()[1].props.className).to.equal('important-column'); - expect(headerColumns.getNodes()[2].props.className).to.equal(undefined); - }); - }); - - describe('Programmatically select rows', function() { - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should render selected rows by default', function() { - const tableRows = wrapper.find(DataTablesRow); - expect(tableRows.getNodes()[0].props.selected).to.equal(true); - expect(tableRows.getNodes()[1].props.selected).to.equal(false); - expect(tableRows.getNodes()[2].props.selected).to.equal(true); - expect(tableRows.getNodes()[3].props.selected).to.equal(false); - expect(tableRows.getNodes()[4].props.selected).to.equal(false); - expect(tableRows.getNodes()[5].props.selected).to.equal(true); - }); - }); - - describe('onRowSelection handler & onCellDoubleClick handler', function() { - const handleRowSelection = sinon.spy(); - const handleCellDoubleClick = sinon.spy(); - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - - // dummy - global.window.getSelection = function() { - return { - removeAllRanges: function() { - }, - }; - }; - }); - - it('should call row select handler', function(done) { - wrapper.find(DataTablesRowColumn).first().simulate('click'); - setTimeout(() => { - expect(handleRowSelection).to.have.property('callCount', 1); - done(); - }, 500); - }); - - it('should call dobule click handler', function() { - // simulate double click - wrapper.find(DataTablesRowColumn).first().simulate('click'); - wrapper.find(DataTablesRowColumn).first().simulate('click'); - expect(handleCellDoubleClick).to.have.property('callCount', 1); - }); - }); - - describe('row size controls', function() { - const muiTheme = getMuiTheme(); - describe('when showRowSizeControls = false', function() { - let wrapper; - before(function() { - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should not render row size label', function() { - expect(wrapper.find({style: styles.footerToolbarItem})).to.have.length(2); - }); - - it('should not render row size menu', function() { - expect(wrapper.find(DropDownMenu)).to.have.length(0); - }); - - it('should not render any row size items', function() { - const rowSizeItems = wrapper.find(MenuItem); - expect(rowSizeItems).to.have.length(0); - }); - }); - - describe( 'when rowSizeList is empty', function() { - let wrapper; - before(function() { - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should render row size label', function() { - expect(wrapper.find({style: styles.footerToolbarItem})).to.have.length(3); - }); - - it('should not render row size menu', function() { - expect(wrapper.find(DropDownMenu)).to.have.length(0); - }); - }); - }); - - describe('Disable footer toolbar', function() { - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should not render footer toolbar', function() { - expect(wrapper.find({style: styles.footerToolbar})).to.have.length(0); - }); - }); - - describe('Header toolbar mode', function() { - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should render header toolbar with filter mode', function() { - expect(wrapper.find(DataTablesHeaderToolbar).prop('mode')).to.equal('filter'); - expect(wrapper.find(DataTablesHeaderToolbar).prop('filterValue')).to.equal('test'); - }); - }); - - describe('Hide filter icon', function() { - let wrapper; - const muiTheme = getMuiTheme(); - - before(function() { - // full rendering - wrapper = mount( - , - { - context: {muiTheme: muiTheme}, - childContextTypes: {muiTheme: PropTypes.object}, - } - ); - }); - - it('should not render filter icon in header toolbar', function() { - expect(wrapper.find(DataTablesHeaderToolbar).find(FilterListIcon)).to.have.length(0); - }); - }); -}); diff --git a/test/DataTables/tableSettings.js b/test/DataTables/tableSettings.js deleted file mode 100644 index ed27fc4..0000000 --- a/test/DataTables/tableSettings.js +++ /dev/null @@ -1,249 +0,0 @@ -import React from 'react'; -import {deepOrange500} from 'material-ui/styles/colors'; - -export const TABLE_COLUMNS = [ - { - key: 'name', - label: 'Dessert (100g serving)', - }, { - key: 'calories', - label: 'Calories', - }, { - key: 'fat', - label: 'Fat (g)', - }, { - key: 'carbs', - label: 'Carbs (g)', - }, { - key: 'protein', - label: 'Protein (g)', - }, { - key: 'sodium', - label: 'Sodium (mg)', - }, { - key: 'calcium', - label: 'Calcium (%)', - }, { - key: 'iron', - label: 'Iron (%)', - }, -]; - -export const TABLE_COLUMNS_TOOLTIP = [ - { - key: 'name', - label: 'Dessert (100g serving)', - tooltip: 'Dessert (100g serving)', - }, { - key: 'calories', - label: 'Calories', - tooltip: 'Calories', - }, { - key: 'fat', - label: 'Fat (g)', - tooltip: 'Fat (g)', - }, { - key: 'carbs', - label: 'Carbs (g)', - tooltip: 'Carbs (g)', - }, { - key: 'protein', - label: 'Protein (g)', - tooltip: 'Protein (g)', - }, { - key: 'sodium', - label: 'Sodium (mg)', - tooltip: 'Sodium (mg)', - }, { - key: 'calcium', - label: 'Calcium (%)', - tooltip: 'Calcium (%)', - }, { - key: 'iron', - label: 'Iron (%)', - tooltip: 'Iron (%)', - }, -]; - -export const TABLE_COLUMNS_SORT_STYLE = [ - { - key: 'name', - label: 'Dessert (100g serving)', - sortable: true, - style: { - width: 250, - }, - }, { - key: 'calories', - label: 'Calories', - sortable: true, - }, { - key: 'fat', - label: 'Fat (g)', - render: (fat) =>
{fat}
- }, { - key: 'carbs', - label: 'Carbs (g)', - }, { - key: 'protein', - label: 'Protein (g)', - }, { - key: 'sodium', - label: 'Sodium (mg)', - }, { - key: 'calcium', - label: 'Calcium (%)', - }, { - key: 'iron', - label: 'Iron (%)', - }, -]; - -export const TABLE_COLUMNS_CLASSNAME = [ - { - key: 'name', - label: 'Dessert (100g serving)', - className: 'important-column', - }, { - key: 'calories', - label: 'Calories', - className: 'important-column', - }, { - key: 'fat', - label: 'Fat (g)', - }, { - key: 'carbs', - label: 'Carbs (g)', - }, { - key: 'protein', - label: 'Protein (g)', - }, { - key: 'sodium', - label: 'Sodium (mg)', - }, { - key: 'calcium', - label: 'Calcium (%)', - }, { - key: 'iron', - label: 'Iron (%)', - }, -]; - -export const TABLE_DATA = [ - { - name: 'Frozen yogurt', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Ice cream sandwich', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Eclair', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Cupcake', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Gingerbread', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Jelly bean', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Lollipop', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Honeycomb', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'Donut', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, { - name: 'KitKat', - calories: '159', - fat: '6.0', - carbs: '24', - protein: '4.0', - sodium: '87', - calcium: '14%', - iron: '1%', - }, -]; - -export const styles = { - footerToolbarItem: { - marginLeft: 8, - marginRight: 8, - alignItems: 'center', - display: 'flex', - }, - titleStyle: { - fontSize: 16, - color: deepOrange500, - }, - footerToolbarStyle: { - padding: '0 100px', - }, - tableStyle: { - tableLayout: 'auto', - }, - tableBodyStyle: { - overflowX: 'auto', - }, - tableWrapperStyle: { - padding: 5, - }, -};