Skip to content

Remove object assign #1435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 11, 2018
Merged

Remove object assign #1435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1ccef8c
Remove object.assign from library
interactivellama Jun 26, 2018
d052156
Remove object assign from examples
interactivellama Jun 26, 2018
73a2d59
Remove object.assign from codebase overview
interactivellama Jul 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions components/combobox/__examples__/base-custom-menu-item.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,9 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: (
<Icon
assistiveText="Account"
Expand All @@ -61,8 +62,8 @@ const accountsWithIcon = accounts.map((elem) =>
name={elem.type}
/>
),
})
);
},
}));

const CustomMenuItem = (props) => (
<span>
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/base-inherit-menu-width.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/base-menu-separator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/base-menu-subheader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/base-predefined-options-only.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/base.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/inline-multiple.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/inline-single.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/readonly-single-selection-custom-menu-item.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,9 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: (
<Icon
assistiveText="Account"
Expand All @@ -61,8 +62,8 @@ const accountsWithIcon = accounts.map((elem) =>
name={elem.type}
/>
),
})
);
},
}));

const CustomMenuItem = (props) => (
<span className="slds-media">
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/required-input-error-state.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/snapshot/base-open-class-name.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/snapshot/base-open.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
42 changes: 6 additions & 36 deletions components/combobox/__examples__/snapshot/base-selected.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,20 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
super(props);

this.state = {
inputValue: '',
selection: [accounts[1]],
selection: [accountsWithIcon[1]],
};
}

Expand All @@ -45,37 +46,6 @@ class Example extends React.Component {
placeholder: 'Search Salesforce',
}}
menuPosition="relative"
onChange={(event, { value }) => {
console.log('onChange', value);
this.setState({ inputValue: value });
}}
onRequestRemoveSelectedOption={(event, data) => {
this.setState({
inputValue: '',
selection: [],
});
}}
onSubmit={(event, { value }) => {
console.log('onSubmit', value);
this.setState({
selection: [
{
label: value,
icon: (
<Icon
assistiveText="Account"
category="standard"
name="account"
/>
),
},
],
});
}}
onSelect={(event, data) => {
console.log('onSelect', data);
this.setState({ selection: data.selection });
}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The removal of this code doesn't look related to Object.assign.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Snapshots don't need events.

options={accountsWithIcon}
selection={this.state.selection}
value={
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/snapshot/inline-multiple-selection-selected.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/snapshot/inline-multiple-selection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/snapshot/inline-single-selection-selected.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
9 changes: 5 additions & 4 deletions components/combobox/__examples__/snapshot/inline-single-selection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ const accounts = [
},
];

const accountsWithIcon = accounts.map((elem) =>
Object.assign(elem, {
const accountsWithIcon = accounts.map((elem) => ({
...elem,
...{
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
})
);
},
}));

class Example extends React.Component {
constructor (props) {
Expand Down
2 changes: 1 addition & 1 deletion components/utilities/dialog/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,7 @@ const Dialog = createReactClass({
}

if (this.props.style) {
style = Object.assign(style, this.props.style);
style = { ...style, ...this.props.style };
}

const contents = (
Expand Down
2 changes: 1 addition & 1 deletion docs/codebase-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ If you are new to React, you may be trained to design components in a more compl

### Use "the good parts"

* <a name="do-not-mutate-data" href="#do-not-mutate-data">#</a> **Do not mutate data.** React tries to [optimize and prevent re-rendering the DOM when possible](https://facebook.github.io/react/docs/optimizing-performance.html#the-power-of-not-mutating-data). Many times this is not what you want. Avoid solitary use of `push`, `pop`, `shift`, `unshift`, `sort`, `reverse`, `splice` and `delete` when mutating arrays. If you ever have to ask yourself, why isn't my component rendering, this is likely the reason. Use `Object.assign()` on objects and `Array.concat()` on arrays instead of directly modifying these variables that are accessed by reference. A common pattern is to deconstruct an array with `...` and create a new one. You may consider exploring some new ES6 types such as [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) which are collections that help store unique values of any type.
* <a name="do-not-mutate-data" href="#do-not-mutate-data">#</a> **Do not mutate data.** React tries to [optimize and prevent re-rendering the DOM when possible](https://facebook.github.io/react/docs/optimizing-performance.html#the-power-of-not-mutating-data). Many times this is not what you want. Avoid solitary use of `push`, `pop`, `shift`, `unshift`, `sort`, `reverse`, `splice` and `delete` when mutating arrays. If you ever have to ask yourself, why isn't my component rendering with new props, this is likely the reason. Use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) on objects and arrays--or [`Array.concat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) on arrays instead of directly modifying these variables that are accessed by reference. You may consider exploring some new ES6 types such as [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) which are collections that help store unique values of any type.

* <a name="rest-operators-with-jsx" href="#rest-operators-with-jsx">#</a> Be careful with [rest operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) when passively applying unnamed and unknown props to JSX nodes. This concept allows flexibility to the consuming developer, but is difficult to track for maintainers. If rest operators should be used, be sure to deconstruct each one that is actually needed by the JSX nodes, so that the rest operator only handles "unknown props" passed in from the outside developer. In short, don't utilize any properties in the `...props` object within the component. After using `const { active, className, ...rest } = props;` do not go back to using `this.prop.*` anywhere in the render function.

Expand Down