Skip to content

Commit decbc13

Browse files
ivansfdcivansfdc
committed
Merge pull request #258 from salesforce-ux/data-table-squashed
Slds for React DataTable
2 parents aeeffd7 + 7bf3f15 commit decbc13

34 files changed

+3041
-66
lines changed

‎.babelrc

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
{
2-
"presets": ["react", "es2015"],
3-
"plugins": ["transform-class-properties"]
2+
"presets": ["react", "es2015", "stage-1"]
43
}

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ This project is in beta and very experimental. Please visit [Design System React
1616
* <a href="https://design-system-react.herokuapp.com/#/button">Button</a>
1717
* <a href="https://design-system-react.herokuapp.com/#/button-group">ButtonGroup</a>
1818
* <a href="https://design-system-react.herokuapp.com/#/button-stateful">ButtonStateful</a>
19+
* <a href="https://design-system-react.herokuapp.com/#/data-table">DataTable</a>
1920
* <a href="https://design-system-react.herokuapp.com/#/dateinput">DatePickerSingleSelect</a>
2021
* <a href="https://design-system-react.herokuapp.com/#/icon">Icon</a>
2122
* <a href="https://design-system-react.herokuapp.com/#/lookup">Lookup</a>
@@ -51,7 +52,7 @@ npm run pages
5152

5253
## Getting Started
5354

54-
Note: design-system-react is optimized for react0.14.x and uses Lightning Design System 0.12.1.
55+
Note: design-system-react is optimized for react0.14.x and uses Lightning Design System 1.0.0.
5556

5657
### NPM
5758

@@ -100,7 +101,7 @@ Note: the SLDSPopoverTooltip requires a focusable element as a child (ie. either
100101

101102
4. **Which version of React and Lightning Design System do you support?**
102103

103-
Design System React is optimized for react0.14.x and uses Lightning Design System 0.12.1.
104+
Design System React is optimized for react0.14.x and uses Lightning Design System 1.0.0.
104105

105106
5. **Which browsers are supported?**
106107

@@ -128,4 +129,3 @@ Please read the <a href="CONTRIBUTING.md">CONTRIBUTING.md</a> first.
128129
## Got feedback?
129130

130131
Please create a <a href="https://github.com/salesforce-ux/design-system-react/issues">GitHub Issue</a>
131-

‎components/SLDSDataTable/Cell.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import SLDSDataTableCell from '../data-table/cell';
2+
module.exports = SLDSDataTableCell;

‎components/SLDSDataTable/Column.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import SLDSDataTableColumn from '../data-table/column';
2+
module.exports = SLDSDataTableColumn;

‎components/SLDSDataTable/RowActions.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import SLDSDataTableRowActions from '../data-table/row-actions';
2+
module.exports = SLDSDataTableRowActions;

‎components/SLDSDataTable/index.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import SLDSDataTable from '../data-table';
2+
module.exports = SLDSDataTable;

‎components/SLDSMenuDropdown/index.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,9 @@ class SLDSMenuDropdown extends React.Component {
312312
return <SLDSButton
313313
aria-haspopup="true"
314314
assistiveText={this.props.assistiveText}
315+
className={this.props.buttonClassName}
315316
disabled={this.props.disabled}
317+
hint={this.props.hint}
316318
iconName={this.props.iconName}
317319
iconVariant={this.props.iconVariant}
318320
id={this.state.triggerId}
@@ -343,4 +345,3 @@ SLDSMenuDropdown.defaultProps = defaultProps;
343345
module.exports = SLDSMenuDropdown;
344346
module.exports.ListItem = ListItem;
345347
module.exports.ListItemLabel = ListItemLabel;
346-

‎components/checkbox/index.js

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
6+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
7+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
8+
9+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
10+
*/
11+
/* eslint-disable indent */
12+
13+
// # Checkbox Component
14+
15+
// Implements the [Checkbox design pattern](https://www.lightningdesignsystem.com/components/forms/#checkbox) in React.
16+
17+
// ### React
18+
import React from 'react';
19+
20+
// ### isFunction
21+
import isFunction from 'lodash.isfunction';
22+
23+
// ### Event Helpers
24+
import { KEYS, EventUtil } from "../utils";
25+
26+
// ### classNames
27+
import classNames from 'classnames';
28+
29+
// Remove the need for `React.PropTypes`
30+
const { PropTypes } = React;
31+
32+
export const COMPONENT = 'Checkbox';
33+
34+
/**
35+
* The ability to style checkboxes with CSS varies across browsers. Using this component ensures checkboxes look the same everywhere.
36+
*/
37+
const Checkbox = React.createClass({
38+
// ### Display Name
39+
// Always use the canonical component name as the React display name.
40+
displayName: COMPONENT,
41+
42+
// ### Prop Types
43+
propTypes: {
44+
/**
45+
* Text that is visually hidden but read aloud by screenreaders to tell the user what the Checkbox is for.
46+
* If the Checkbox has a visible label, you can omit the <code>assistiveText</code> prop and use the <code>label</code> prop.
47+
*/
48+
assistiveText: React.PropTypes.string,
49+
/**
50+
* The Checkbox is a controlled component, and will always be in this state.
51+
*/
52+
checked: React.PropTypes.bool,
53+
/**
54+
* Class names to be added to the outer container of the Checkbox.
55+
*/
56+
className: PropTypes.oneOfType([
57+
PropTypes.array,
58+
PropTypes.object,
59+
PropTypes.string
60+
]),
61+
/**
62+
* Disables the Checkbox and prevents clicking it.
63+
*/
64+
disabled: PropTypes.bool,
65+
/**
66+
* Message to display when the Checkbox is in an error state. When this is present, also visually highlights the component as in error.
67+
*/
68+
errorText: React.PropTypes.string,
69+
/**
70+
* An optional label for the Checkbox.
71+
*/
72+
label: React.PropTypes.string,
73+
/**
74+
* This event fires when the Checkbox changes.
75+
*/
76+
onChange: PropTypes.func,
77+
/**
78+
* Highlights the Checkbox as a required field (does not perform any validation).
79+
*/
80+
required: PropTypes.bool
81+
},
82+
83+
// ### Render
84+
render () {
85+
const {
86+
assistiveText,
87+
checked,
88+
className,
89+
disabled,
90+
errorText,
91+
label,
92+
onChange,
93+
required,
94+
95+
// ### Additional properties
96+
// Using [object destructuring](https://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx) to pass on any properties which are not explicitly defined.
97+
...props
98+
} = this.props;
99+
100+
return (
101+
<div className={classNames('slds-form-element', {
102+
'is-required': required,
103+
'slds-has-error': errorText
104+
},
105+
className)}
106+
onKeyDown={this.handleKeyDown}
107+
>
108+
<div className="slds-form-element__control">
109+
<label className="slds-checkbox">
110+
{required ? <abbr className="slds-required" title="required">*</abbr> : null}
111+
<input
112+
{...props}
113+
checked={checked}
114+
disabled={disabled}
115+
onChange={this.handleChange}
116+
type="checkbox"
117+
/>
118+
<span className="slds-checkbox--faux"></span>
119+
{label
120+
? <span className="slds-form-element__label">
121+
{label}
122+
</span>
123+
: null}
124+
{assistiveText
125+
? <span className="slds-assistive-text">
126+
{assistiveText}
127+
</span>
128+
: null}
129+
</label>
130+
</div>
131+
{errorText ? <div className="slds-form-element__help">{errorText}</div> : null}
132+
</div>
133+
);
134+
},
135+
136+
handleChange (e) {
137+
if (isFunction(this.props.onChange)) {
138+
this.props.onChange(!this.props.checked, e);
139+
}
140+
},
141+
142+
handleKeyDown (e){
143+
if (e.keyCode) {
144+
if (e.keyCode === KEYS.ENTER ||
145+
e.keyCode === KEYS.SPACE) {
146+
EventUtil.trap(e);
147+
this.handleChange(e);
148+
}
149+
}
150+
}
151+
});
152+
153+
export default Checkbox;

‎components/data-table/cell.jsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
6+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
7+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
8+
9+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
10+
*/
11+
/* eslint-disable indent */
12+
13+
// ### React
14+
import React from 'react';
15+
16+
// Removes the need for `PropTypes`.
17+
const { PropTypes } = React;
18+
19+
// The component name will be used as the `DisplayName` and exported along with
20+
// the component itself.
21+
export const COMPONENT = 'DataTableCell';
22+
23+
/**
24+
* The default Cell renderer for the DataTable. Pass in any React component with the same `displayName` which takes the same props to provide custom rendering.
25+
*/
26+
const DataTableCell = React.createClass({
27+
// ### Display Name
28+
// Always use the canonical component name as the React display name.
29+
displayName: COMPONENT,
30+
31+
// ### Prop Types
32+
propTypes: {
33+
/**
34+
* Class names to be added to the cell.
35+
*/
36+
className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
37+
/**
38+
* The item from the items which represents this row.
39+
*/
40+
item: PropTypes.object,
41+
/**
42+
* The column label.
43+
*/
44+
label: PropTypes.string,
45+
/**
46+
* The property of this item to display.
47+
*/
48+
property: PropTypes.string
49+
},
50+
51+
// ### Render
52+
// Should return a `<td></td>`.
53+
render () {
54+
return (
55+
<td className={this.props.className} data-label={this.props.label}>
56+
{this.props.item[this.props.property]}
57+
</td>
58+
);
59+
}
60+
});
61+
62+
export default DataTableCell;

‎components/data-table/check-props.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
6+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
7+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
8+
9+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
10+
*/
11+
/* eslint-disable indent */
12+
13+
import deprecatedProperty from '../utils/warning/deprecated-property';
14+
import sunsetProperty from '../utils/warning/sunset-property';
15+
16+
let checkProps = function () {};
17+
18+
if (process.env.NODE_ENV !== 'production') {
19+
checkProps = function (COMPONENT, props) {
20+
/* eslint-disable max-len */
21+
// Deprecated and changed to another property
22+
deprecatedProperty(COMPONENT, props.onSelect, 'collection', 'items');
23+
deprecatedProperty(COMPONENT, props.onSelect, 'onSelect', 'onChange');
24+
deprecatedProperty(COMPONENT, props.onSelect, 'onDeselect', 'onChange');
25+
sunsetProperty(COMPONENT, props.sortable, 'sortable', 'The table is sortable if one or more of its columns are sortable.');
26+
27+
// Deprecated and moved to a child
28+
sunsetProperty(COMPONENT, props.columns, 'columns', 'Please provide one or more children of the type <Column /> instead.');
29+
/* eslint-enable max-len */
30+
};
31+
}
32+
33+
export default checkProps;

‎components/data-table/column.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
6+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
7+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
8+
9+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
10+
*/
11+
/* eslint-disable indent */
12+
13+
// ### React
14+
import React from 'react';
15+
16+
// Removes the need for `PropTypes`.
17+
const { PropTypes } = React;
18+
19+
// The component name will be used as the `DisplayName` and exported along with
20+
// the component itself.
21+
export const COMPONENT = 'DataTableColumn';
22+
23+
/**
24+
* Columns define the structure of the data displayed in the DataTable.
25+
*/
26+
const DataTableColumn = React.createClass({
27+
// ### Display Name
28+
// Always use the canonical component name as the React display name.
29+
displayName: COMPONENT,
30+
31+
// ### Prop Types
32+
propTypes: {
33+
children: React.PropTypes.element,
34+
label: PropTypes.node,
35+
property: PropTypes.string.isRequired,
36+
sortable: PropTypes.bool,
37+
sortDirection: PropTypes.oneOf(['desc', 'asc']),
38+
truncate: PropTypes.bool
39+
},
40+
41+
// ### Render
42+
render () {
43+
return null;
44+
}
45+
});
46+
47+
export default DataTableColumn;

0 commit comments

Comments
 (0)