From 159f67f70b392296083f2831adc00d41d5860161 Mon Sep 17 00:00:00 2001 From: ashwin Date: Wed, 17 Jul 2019 18:36:17 +0530 Subject: [PATCH 01/16] Add Basic Rending for Tree Grid --- components/storybook-stories.js | 1 + .../tree-grid/__docs__/storybook-stories.jsx | 10 + components/tree-grid/__examples__/default.jsx | 133 ++++++++++ components/tree-grid/docs.json | 7 + components/tree-grid/index.jsx | 248 ++++++++++++++++++ utilities/constants.js | 1 + 6 files changed, 400 insertions(+) create mode 100644 components/tree-grid/__docs__/storybook-stories.jsx create mode 100644 components/tree-grid/__examples__/default.jsx create mode 100644 components/tree-grid/docs.json create mode 100644 components/tree-grid/index.jsx diff --git a/components/storybook-stories.js b/components/storybook-stories.js index 762537c6fb..8023e0ae86 100644 --- a/components/storybook-stories.js +++ b/components/storybook-stories.js @@ -67,6 +67,7 @@ export TimePicker from '../components/time-picker/__docs__/storybook-stories'; export Toast from '../components/toast/__docs__/storybook-stories'; export Tooltip from '../components/tooltip/__docs__/storybook-stories'; export Tree from '../components/tree/__docs__/storybook-stories'; +export TreeGrid from '../components/tree-grid/__docs__/storybook-stories'; export TrialBar from '../components/trial-bar/__docs__/storybook-stories'; export VerticalNavigation from '../components/vertical-navigation/__docs__/storybook-stories'; export VisualPicker from '../components/visual-picker/__docs__/storybook-stories'; diff --git a/components/tree-grid/__docs__/storybook-stories.jsx b/components/tree-grid/__docs__/storybook-stories.jsx new file mode 100644 index 0000000000..2f49636d03 --- /dev/null +++ b/components/tree-grid/__docs__/storybook-stories.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { TREE_GRID } from '../../../utilities/constants'; +import Default from '../__examples__/default'; + +storiesOf(TREE_GRID, module) + .addDecorator((getStory) => ( +
{getStory()}
+ )) + .add('Default', () => ); diff --git a/components/tree-grid/__examples__/default.jsx b/components/tree-grid/__examples__/default.jsx new file mode 100644 index 0000000000..660df6eb91 --- /dev/null +++ b/components/tree-grid/__examples__/default.jsx @@ -0,0 +1,133 @@ +import React from 'react'; +import TreeGrid from '~/components/tree-grid'; +import IconSettings from '~/components/icon-settings'; + +const data = { + cols: [ + { + id: '1', + label: 'Account Name', + href: 'javascript:void(0);', + }, + { + id: '2', + label: 'Employees', + href: 'javascript:void(0);', + }, + { + id: '3', + label: 'Phone Number', + href: 'javascript:void(0);', + }, + { + id: '4', + label: 'Account Owner', + href: 'javascript:void(0);', + }, + { + id: '5', + label: 'Billing City', + href: 'javascript:void(0);', + }, + ], + rows: [ + { + id: '1', + cols: [ + { + label: 'Rewis Inc', + }, + { + label: '3100', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'Phoenix, AZ', + }, + ], + }, + { + id: '2', + cols: [ + { + label: 'Acme Corporation', + }, + { + label: '10000', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'San Francisco, CA', + }, + ], + }, + { + id: '3', + cols: [ + { + label: 'Rohde Enterprises', + }, + { + label: '6000', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'New York, NY', + }, + ], + }, + { + id: '4', + cols: [ + { + label: 'Cheese Corp', + }, + { + label: '1234', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'Paris, France', + }, + ], + }, + ], +}; + +class Example extends React.Component { + static displayName = 'treeGridExample'; + + render() { + return ( + + + + ); + } +} + +export default Example; diff --git a/components/tree-grid/docs.json b/components/tree-grid/docs.json new file mode 100644 index 0000000000..64febe5a69 --- /dev/null +++ b/components/tree-grid/docs.json @@ -0,0 +1,7 @@ +{ + "component": "tree-grid", + "status": "prod", + "display-name": "Tree Grid", + "SLDS-component-path": "/components/tree-grid", + "url-slug": "tree-grid" +} diff --git a/components/tree-grid/index.jsx b/components/tree-grid/index.jsx new file mode 100644 index 0000000000..f94991a7a5 --- /dev/null +++ b/components/tree-grid/index.jsx @@ -0,0 +1,248 @@ +/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */ +/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */ + +// Implements the [Welcome Mat design pattern](https://lightningdesignsystem.com/components/welcome-mat/) in React. +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +// ### shortid +// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid) +// shortid is a short, non-sequential, url-friendly, unique id generator +import shortid from 'shortid'; +import Icon from '../icon'; +import Button from '../button'; + +import { TREE_GRID } from '../../utilities/constants'; + +const displayName = TREE_GRID; + +const propTypes = { + /** + * CSS class names to be added to the container element. `array`, `object`, or `string` are accepted. + */ + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.object, + PropTypes.string, + ]), + /** + * HTML id for component. + */ + id: PropTypes.string, + + labels: PropTypes.shape({ + chooseRow: PropTypes.string, + selectAll: PropTypes.string, + }), + + data: PropTypes.object.isRequired, +}; + +/** + * A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed. + */ +class TreeGrid extends React.Component { + componentWillMount() { + this.generatedId = shortid.generate(); + } + + /** + * Get the TreeGrid's HTML id. Generate a new one if no ID present. + */ + getId() { + return this.props.id || this.generatedId; + } + + render() { + return ( + + + + + {this.props.data.cols.map((col) => ( + + ))} + + + + {this.props.data.rows + ? this.props.data.rows.map((row) => ( + + + {row.cols.map( + (col, i) => + i === 0 ? ( + + ) : ( + + ) + )} + + + )) + : null} + +
+ + Choose a row + +
+
+ + +
+
+ 		+ + Sort by: +
+ + {col.label} + + +
+ +
+
+ + +
+ 		+ + +
+ {col.href ? ( + + {col.label} + + ) : ( + <>{col.label} + )} +
+ 		+
+ ); + } +} + +TreeGrid.displayName = displayName; +TreeGrid.propTypes = propTypes; +// TreeGrid.defaultProps = defaultProps; + +export default TreeGrid; diff --git a/utilities/constants.js b/utilities/constants.js index 782829b1e8..4a5126ecd4 100644 --- a/utilities/constants.js +++ b/utilities/constants.js @@ -135,6 +135,7 @@ export const TOAST_CONTAINER = 'SLDSToastContainer'; export const TREE = 'SLDSTree'; export const TREE_BRANCH = 'SLDSTreeBranch'; export const TREE_ITEM = 'SLDSTreeItem'; +export const TREE_GRID = 'SLDSTreeGrid'; export const TRIAL_BAR = 'SLDSTrialBar'; export const TRIAL_BAR_DROPDOWN = 'SLDSTrialBarDropdown'; export const TRIAL_BAR_BUTTON = 'SLDSTrialBarButton'; From 595c3ed1353d89a320529df5560b8fe125f677a6 Mon Sep 17 00:00:00 2001 From: ashwin Date: Wed, 17 Jul 2019 20:57:23 +0530 Subject: [PATCH 02/16] Added Support for Nested Rows --- .../tree-grid/__docs__/storybook-stories.jsx | 4 +- components/tree-grid/__examples__/nested.jsx | 155 ++++++++++++++++++ components/tree-grid/index.jsx | 84 +--------- components/tree-grid/private/row.jsx | 99 +++++++++++ utilities/constants.js | 1 + 5 files changed, 266 insertions(+), 77 deletions(-) create mode 100644 components/tree-grid/__examples__/nested.jsx create mode 100644 components/tree-grid/private/row.jsx diff --git a/components/tree-grid/__docs__/storybook-stories.jsx b/components/tree-grid/__docs__/storybook-stories.jsx index 2f49636d03..d70f3a5cdf 100644 --- a/components/tree-grid/__docs__/storybook-stories.jsx +++ b/components/tree-grid/__docs__/storybook-stories.jsx @@ -2,9 +2,11 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { TREE_GRID } from '../../../utilities/constants'; import Default from '../__examples__/default'; +import Nested from '../__examples__/nested'; storiesOf(TREE_GRID, module) .addDecorator((getStory) => (
{getStory()}
)) - .add('Default', () => ); + .add('Default', () => ) + .add('Nested', () => ); diff --git a/components/tree-grid/__examples__/nested.jsx b/components/tree-grid/__examples__/nested.jsx new file mode 100644 index 0000000000..83cb4ab73a --- /dev/null +++ b/components/tree-grid/__examples__/nested.jsx @@ -0,0 +1,155 @@ +import React from 'react'; +import TreeGrid from '~/components/tree-grid'; +import IconSettings from '~/components/icon-settings'; + +const data = { + cols: [ + { + id: '1', + label: 'Account Name', + href: 'javascript:void(0);', + }, + { + id: '2', + label: 'Employees', + href: 'javascript:void(0);', + }, + { + id: '3', + label: 'Phone Number', + href: 'javascript:void(0);', + }, + { + id: '4', + label: 'Account Owner', + href: 'javascript:void(0);', + }, + { + id: '5', + label: 'Billing City', + href: 'javascript:void(0);', + }, + ], + rows: [ + { + id: '1', + cols: [ + { + label: 'Rewis Inc', + }, + { + label: '3100', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'Phoenix, AZ', + }, + ], + }, + { + id: '2', + cols: [ + { + label: 'Acme Corporation', + }, + { + label: '10000', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'San Francisco, CA', + }, + ], + subRows: [ + { + cols: [ + { + label: 'Acme Corporation (Oakland)', + }, + { + label: '745', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'New York, NY', + }, + ], + }, + ], + }, + { + id: '3', + cols: [ + { + label: 'Rohde Enterprises', + }, + { + label: '6000', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'New York, NY', + }, + ], + }, + { + id: '4', + cols: [ + { + label: 'Cheese Corp', + }, + { + label: '1234', + }, + { + label: '837-555-1212', + }, + { + label: 'Jane Doe', + href: 'javascript:void(0);', + }, + { + label: 'Paris, France', + }, + ], + }, + ], +}; + +class Example extends React.Component { + static displayName = 'treeGridNestedExample'; + + render() { + return ( + + + + ); + } +} + +export default Example; diff --git a/components/tree-grid/index.jsx b/components/tree-grid/index.jsx index f94991a7a5..ea561c87f4 100644 --- a/components/tree-grid/index.jsx +++ b/components/tree-grid/index.jsx @@ -9,6 +9,8 @@ import classNames from 'classnames'; // [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid) // shortid is a short, non-sequential, url-friendly, unique id generator import shortid from 'shortid'; + +import Row from './private/row'; import Icon from '../icon'; import Button from '../button'; @@ -157,82 +159,12 @@ class TreeGrid extends React.Component { {this.props.data.rows ? this.props.data.rows.map((row) => ( - - -
- - -
- - {row.cols.map( - (col, i) => - i === 0 ? ( - - - - ) : ( - -
- {col.href ? ( - - {col.label} - - ) : ( - <>{col.label} - )} -
- - ) - )} - -