Skip to content

Commit f0698aa

Browse files
futuremintfuturemint
authored
Merge pull request #1435 from interactivellama/remove-object-assign
Remove object assign
2 parents e18fff5 + 73a2d59 commit f0698aa

18 files changed

+87
-101
lines changed

‎components/combobox/__examples__/base-custom-menu-item.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,9 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: (
5758
<Icon
5859
assistiveText="Account"
@@ -61,8 +62,8 @@ const accountsWithIcon = accounts.map((elem) =>
6162
name={elem.type}
6263
/>
6364
),
64-
})
65-
);
65+
},
66+
}));
6667

6768
const CustomMenuItem = (props) => (
6869
<span>

‎components/combobox/__examples__/base-inherit-menu-width.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,12 @@ const accounts = [
4646
},
4747
];
4848

49-
const accountsWithIcon = accounts.map((elem) =>
50-
Object.assign(elem, {
49+
const accountsWithIcon = accounts.map((elem) => ({
50+
...elem,
51+
...{
5152
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
52-
})
53-
);
53+
},
54+
}));
5455

5556
class Example extends React.Component {
5657
constructor (props) {

‎components/combobox/__examples__/base-menu-separator.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,12 @@ const accounts = [
5353
},
5454
];
5555

56-
const accountsWithIcon = accounts.map((elem) =>
57-
Object.assign(elem, {
56+
const accountsWithIcon = accounts.map((elem) => ({
57+
...elem,
58+
...{
5859
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
59-
})
60-
);
60+
},
61+
}));
6162

6263
class Example extends React.Component {
6364
constructor (props) {

‎components/combobox/__examples__/base-menu-subheader.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,12 @@ const accounts = [
5959
},
6060
];
6161

62-
const accountsWithIcon = accounts.map((elem) =>
63-
Object.assign(elem, {
62+
const accountsWithIcon = accounts.map((elem) => ({
63+
...elem,
64+
...{
6465
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
65-
})
66-
);
66+
},
67+
}));
6768

6869
class Example extends React.Component {
6970
constructor (props) {

‎components/combobox/__examples__/base-predefined-options-only.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,12 @@ const accounts = [
5252
},
5353
];
5454

55-
const accountsWithIcon = accounts.map((elem) =>
56-
Object.assign(elem, {
55+
const accountsWithIcon = accounts.map((elem) => ({
56+
...elem,
57+
...{
5758
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
58-
})
59-
);
59+
},
60+
}));
6061

6162
class Example extends React.Component {
6263
constructor (props) {

‎components/combobox/__examples__/base.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
57-
})
58-
);
58+
},
59+
}));
5960

6061
class Example extends React.Component {
6162
constructor (props) {

‎components/combobox/__examples__/inline-multiple.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
57-
})
58-
);
58+
},
59+
}));
5960

6061
class Example extends React.Component {
6162
constructor (props) {

‎components/combobox/__examples__/inline-single.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
57-
})
58-
);
58+
},
59+
}));
5960

6061
class Example extends React.Component {
6162
constructor (props) {

‎components/combobox/__examples__/readonly-single-selection-custom-menu-item.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,9 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: (
5758
<Icon
5859
assistiveText="Account"
@@ -61,8 +62,8 @@ const accountsWithIcon = accounts.map((elem) =>
6162
name={elem.type}
6263
/>
6364
),
64-
})
65-
);
65+
},
66+
}));
6667

6768
const CustomMenuItem = (props) => (
6869
<span className="slds-media">

‎components/combobox/__examples__/required-input-error-state.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
57-
})
58-
);
58+
},
59+
}));
5960

6061
class Example extends React.Component {
6162
constructor (props) {

‎components/combobox/__examples__/snapshot/base-open-class-name.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,12 @@ const accounts = [
2525
},
2626
];
2727

28-
const accountsWithIcon = accounts.map((elem) =>
29-
Object.assign(elem, {
28+
const accountsWithIcon = accounts.map((elem) => ({
29+
...elem,
30+
...{
3031
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
31-
})
32-
);
32+
},
33+
}));
3334

3435
class Example extends React.Component {
3536
constructor (props) {

‎components/combobox/__examples__/snapshot/base-open.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,12 @@ const accounts = [
2020
},
2121
];
2222

23-
const accountsWithIcon = accounts.map((elem) =>
24-
Object.assign(elem, {
23+
const accountsWithIcon = accounts.map((elem) => ({
24+
...elem,
25+
...{
2526
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
26-
})
27-
);
27+
},
28+
}));
2829

2930
class Example extends React.Component {
3031
constructor (props) {

‎components/combobox/__examples__/snapshot/base-selected.jsx

Lines changed: 6 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,20 @@ const accounts = [
2020
},
2121
];
2222

23-
const accountsWithIcon = accounts.map((elem) =>
24-
Object.assign(elem, {
23+
const accountsWithIcon = accounts.map((elem) => ({
24+
...elem,
25+
...{
2526
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
26-
})
27-
);
27+
},
28+
}));
2829

2930
class Example extends React.Component {
3031
constructor (props) {
3132
super(props);
3233

3334
this.state = {
3435
inputValue: '',
35-
selection: [accounts[1]],
36+
selection: [accountsWithIcon[1]],
3637
};
3738
}
3839

@@ -45,37 +46,6 @@ class Example extends React.Component {
4546
placeholder: 'Search Salesforce',
4647
}}
4748
menuPosition="relative"
48-
onChange={(event, { value }) => {
49-
console.log('onChange', value);
50-
this.setState({ inputValue: value });
51-
}}
52-
onRequestRemoveSelectedOption={(event, data) => {
53-
this.setState({
54-
inputValue: '',
55-
selection: [],
56-
});
57-
}}
58-
onSubmit={(event, { value }) => {
59-
console.log('onSubmit', value);
60-
this.setState({
61-
selection: [
62-
{
63-
label: value,
64-
icon: (
65-
<Icon
66-
assistiveText="Account"
67-
category="standard"
68-
name="account"
69-
/>
70-
),
71-
},
72-
],
73-
});
74-
}}
75-
onSelect={(event, data) => {
76-
console.log('onSelect', data);
77-
this.setState({ selection: data.selection });
78-
}}
7949
options={accountsWithIcon}
8050
selection={this.state.selection}
8151
value={

‎components/combobox/__examples__/snapshot/inline-multiple-selection-selected.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
57-
})
58-
);
58+
},
59+
}));
5960

6061
class Example extends React.Component {
6162
constructor (props) {

‎components/combobox/__examples__/snapshot/inline-multiple-selection.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
57-
})
58-
);
58+
},
59+
}));
5960

6061
class Example extends React.Component {
6162
constructor (props) {

‎components/combobox/__examples__/snapshot/inline-single-selection-selected.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
57-
})
58-
);
58+
},
59+
}));
5960

6061
class Example extends React.Component {
6162
constructor (props) {

‎components/combobox/__examples__/snapshot/inline-single-selection.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,12 @@ const accounts = [
5151
},
5252
];
5353

54-
const accountsWithIcon = accounts.map((elem) =>
55-
Object.assign(elem, {
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
5657
icon: <Icon assistiveText="Account" category="standard" name={elem.type} />,
57-
})
58-
);
58+
},
59+
}));
5960

6061
class Example extends React.Component {
6162
constructor (props) {

‎docs/codebase-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ If you are new to React, you may be trained to design components in a more compl
105105

106106
### Use "the good parts"
107107

108-
* <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.
108+
* <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.
109109

110110
* <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.
111111

0 commit comments

Comments
 (0)