Skip to content

Commit 301a1a9

Browse files
xulingzhihouxulingzhihou
authored
Replace default props with default parameter in functional components (#3145)
* replace default props with default parameters in breadcrumb, builder header and card components * replace default props with default parameters in carousel, combobox, data table and files components * replace default props with default parameter in forms, global header and global navigation bar components * replace default props with default parameter for icon and illustration components * replace default props with default parameters in components * replace default props with default parameter in components * fix issues caught by snapshot tests * fix combobox browser test * replace defaultProps with default parameter in tree item component
1 parent 45537ff commit 301a1a9

44 files changed

Lines changed: 811 additions & 628 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/breadcrumb/index.jsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,27 +74,37 @@ const getBreadcrumbDropdown = (overflowDropdownMenu, props) => {
7474
/**
7575
* Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.Breadcrumb based on SLDS 2.1.0-dev
7676
*/
77-
const Breadcrumb = (props) => {
78-
checkProps(BREADCRUMB, props, componentDoc);
77+
const Breadcrumb = ({
78+
assistiveText = defaultProps.assistiveText,
79+
id,
80+
overflowDropdownMenu,
81+
styleContainer,
82+
trail,
83+
...rest
84+
}) => {
85+
checkProps(
86+
BREADCRUMB,
87+
{ assistiveText, id, overflowDropdownMenu, styleContainer, trail, ...rest },
88+
componentDoc
89+
);
7990

80-
const { overflowDropdownMenu, trail } = props;
81-
const assistiveText =
82-
typeof props.assistiveText === 'string'
83-
? props.assistiveText
91+
const assistiveTextLabel =
92+
typeof assistiveText === 'string'
93+
? assistiveText
8494
: {
8595
...defaultProps.assistiveText,
86-
...props.assistiveText,
96+
...assistiveText,
8797
}.label;
8898

8999
return (
90100
<nav
91101
role="navigation"
92-
aria-label={assistiveText}
93-
style={props.styleContainer}
102+
aria-label={assistiveTextLabel}
103+
style={styleContainer}
94104
>
95105
<ol className="slds-breadcrumb slds-list_horizontal">
96106
{overflowDropdownMenu &&
97-
getBreadcrumbDropdown(overflowDropdownMenu, props)}
107+
getBreadcrumbDropdown(overflowDropdownMenu, { id })}
98108
{trail.map((crumb, index) => (
99109
/* eslint-disable react/no-array-index-key */
100110
<li
@@ -111,6 +121,4 @@ const Breadcrumb = (props) => {
111121

112122
Breadcrumb.displayName = BREADCRUMB;
113123
Breadcrumb.propTypes = propTypes;
114-
Breadcrumb.defaultProps = defaultProps;
115-
116124
export default Breadcrumb;

‎components/builder-header/index.jsx‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -119,18 +119,29 @@ const defaultProps = {
119119
/**
120120
* Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name.
121121
*/
122-
const BuilderHeader = (props) => {
123-
const assistiveText = {
122+
const BuilderHeader = ({
123+
assistiveText = defaultProps.assistiveText,
124+
children,
125+
className,
126+
events = {},
127+
iconCategory = defaultProps.iconCategory,
128+
iconClassName,
129+
iconName = defaultProps.iconName,
130+
iconPath,
131+
labels = defaultProps.labels,
132+
style,
133+
}) => {
134+
const mergedAssistiveText = {
124135
...defaultProps.assistiveText,
125-
...props.assistiveText,
136+
...assistiveText,
126137
};
127-
const events = {
138+
const mergedEvents = {
128139
...{},
129-
...props.events,
140+
...events,
130141
};
131-
const labels = {
142+
const mergedLabels = {
132143
...defaultProps.labels,
133-
...props.labels,
144+
...labels,
134145
};
135146

136147
let nav;
@@ -139,23 +150,23 @@ const BuilderHeader = (props) => {
139150
let utilities = (
140151
<BuilderHeaderUtilities>
141152
<BuilderHeaderNavLink
142-
assistiveText={{ icon: assistiveText.backIcon }}
153+
assistiveText={{ icon: mergedAssistiveText.backIcon }}
143154
iconCategory="utility"
144155
iconName="back"
145-
label={labels.back}
146-
onClick={EventUtil.trappedHandler(events.onClickBack)}
156+
label={mergedLabels.back}
157+
onClick={EventUtil.trappedHandler(mergedEvents.onClickBack)}
147158
/>
148159
<BuilderHeaderNavLink
149-
assistiveText={{ icon: assistiveText.helpIcon }}
160+
assistiveText={{ icon: mergedAssistiveText.helpIcon }}
150161
iconCategory="utility"
151162
iconName="help"
152-
label={labels.help}
153-
onClick={EventUtil.trappedHandler(events.onClickHelp)}
163+
label={mergedLabels.help}
164+
onClick={EventUtil.trappedHandler(mergedEvents.onClickHelp)}
154165
/>
155166
</BuilderHeaderUtilities>
156167
);
157168
const misc = [];
158-
React.Children.forEach(props.children, (child) => {
169+
React.Children.forEach(children, (child) => {
159170
if (child) {
160171
switch (child.type.displayName) {
161172
case BUILDER_HEADER_NAV:
@@ -176,40 +187,41 @@ const BuilderHeader = (props) => {
176187
}
177188
});
178189

179-
let iconCategory;
180-
let iconName;
181-
let iconPath;
182-
if (props.iconPath) {
183-
({ iconPath } = props);
190+
let resolvedIconCategory;
191+
let resolvedIconName;
192+
let resolvedIconPath;
193+
if (iconPath) {
194+
resolvedIconPath = iconPath;
184195
} else {
185-
({ iconCategory, iconName } = props);
196+
resolvedIconCategory = iconCategory;
197+
resolvedIconName = iconName;
186198
}
187199

188200
return (
189201
<div style={{ position: 'relative', height: '100px' }}>
190202
<div
191-
className={classNames('slds-builder-header_container', props.className)}
192-
style={props.style}
203+
className={classNames('slds-builder-header_container', className)}
204+
style={style}
193205
>
194206
<header className="slds-builder-header">
195207
<div className="slds-builder-header__item">
196208
<div className="slds-builder-header__item-label slds-media slds-media_center">
197209
<div className="slds-media__figure">
198210
<Icon
199-
assistiveText={{ label: assistiveText.icon }}
200-
category={iconCategory}
211+
assistiveText={{ label: mergedAssistiveText.icon }}
212+
category={resolvedIconCategory}
201213
containerClassName={classNames(
202214
'slds-icon_container',
203215
'slds-icon-utility-builder',
204216
'slds-current-color',
205-
props.iconClassName
217+
iconClassName
206218
)}
207-
name={iconName}
208-
path={iconPath}
219+
name={resolvedIconName}
220+
path={resolvedIconPath}
209221
size="x-small"
210222
/>
211223
</div>
212-
<div className="slds-media__body">{labels.title}</div>
224+
<div className="slds-media__body">{mergedLabels.title}</div>
213225
</div>
214226
</div>
215227
{nav}
@@ -219,8 +231,8 @@ const BuilderHeader = (props) => {
219231
) : (
220232
<div className="slds-builder-header__item slds-has-flexi-truncate">
221233
<h1 className="slds-builder-header__item-label">
222-
<span className="slds-truncate" title={labels.pageType}>
223-
{labels.pageType}
234+
<span className="slds-truncate" title={mergedLabels.pageType}>
235+
{mergedLabels.pageType}
224236
</span>
225237
</h1>
226238
</div>
@@ -236,5 +248,4 @@ const BuilderHeader = (props) => {
236248

237249
BuilderHeader.displayName = BUILDER_HEADER;
238250
BuilderHeader.propTypes = propTypes;
239-
BuilderHeader.defaultProps = defaultProps;
240251
export default BuilderHeader;

‎components/builder-header/toolbar.jsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,18 @@ const defaultProps = {
4343
/**
4444
* The toolbar section of the header.
4545
*/
46-
const BuilderHeaderToolbar = (props) => {
47-
const assistiveText = {
46+
const BuilderHeaderToolbar = ({
47+
assistiveText = defaultProps.assistiveText,
48+
children,
49+
onRenderActions,
50+
}) => {
51+
const mergedAssistiveText = {
4852
...defaultProps.assistiveText,
49-
...props.assistiveText,
53+
...assistiveText,
5054
};
5155
return (
5256
<div className="slds-builder-toolbar" role="toolbar">
53-
{React.Children.map(props.children, (child) => {
57+
{React.Children.map(children, (child) => {
5458
if (child.type.displayName === BUTTON_GROUP) {
5559
return (
5660
<div
@@ -65,15 +69,14 @@ const BuilderHeaderToolbar = (props) => {
6569
})}
6670
<div
6771
className="slds-builder-toolbar__actions"
68-
aria-label={assistiveText.actions}
72+
aria-label={mergedAssistiveText.actions}
6973
>
70-
{props.onRenderActions && props.onRenderActions()}
74+
{onRenderActions && onRenderActions()}
7175
</div>
7276
</div>
7377
);
7478
};
7579

7680
BuilderHeaderToolbar.displayName = BUILDER_HEADER_TOOLBAR;
7781
BuilderHeaderToolbar.propTypes = propTypes;
78-
BuilderHeaderToolbar.defaultProps = defaultProps;
7982
export default BuilderHeaderToolbar;

‎components/button-stateful/__examples__/icon.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class Example extends React.Component {
2323
<ButtonStateful
2424
assistiveText={{ icon: this.state.isActive ? 'liked' : 'not liked' }}
2525
aria-pressed={this.state.isActive}
26-
icon={<ButtonIcon name="like" />}
26+
icon={<ButtonIcon name="like" size="medium" />}
2727
onClick={this.handleOnClick}
2828
variant="icon-filled"
2929
/>

‎components/card/empty.jsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ import { CARD_EMPTY } from '../../utilities/constants';
1111
/**
1212
* A default empty state for Cards.
1313
*/
14-
const CardEmpty = (props) => (
14+
const CardEmpty = ({ heading = 'No Related Items', children }) => (
1515
<div className="slds-p-horizontal_small">
1616
<div className="slds-text-align_center slds-m-bottom_x-large">
1717
<h3 className="slds-text-heading_small slds-p-top_large slds-p-bottom_large">
18-
{props.heading}
18+
{heading}
1919
</h3>
20-
{props.children}
20+
{children}
2121
</div>
2222
</div>
2323
);
@@ -38,8 +38,4 @@ CardEmpty.propTypes = {
3838
heading: PropTypes.string,
3939
};
4040

41-
CardEmpty.defaultProps = {
42-
heading: 'No Related Items',
43-
};
44-
4541
export default CardEmpty;

‎components/card/filter.jsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ import { CARD_FILTER } from '../../utilities/constants';
1313
/**
1414
* A default filter or search input for Cards that contain items.
1515
*/
16-
const Filter = (props) => {
17-
const { id, placeholder, onChange, ...rest } = props;
18-
16+
const Filter = ({ id, placeholder = 'Find in List', onChange, ...rest }) => {
1917
return (
2018
<Input
2119
{...rest}
@@ -45,11 +43,7 @@ Filter.propTypes = {
4543
/**
4644
* Text present in input until the user enters text. This text will also be used for a visually hidden label on the filter `input` element for accessibility.
4745
*/
48-
placeholder: PropTypes.string.isRequired,
49-
};
50-
51-
Filter.defaultProps = {
52-
placeholder: 'Find in List',
46+
placeholder: PropTypes.string,
5347
};
5448

5549
export default Filter;

0 commit comments

Comments
 (0)