Skip to content

Commit ea2b89d

Browse files
cee-chencee-chen
committed
[EuiFilterGroup] Memoize styles
+ prefer inline JSX
1 parent 6ddec0c commit ea2b89d

3 files changed

Lines changed: 34 additions & 40 deletions

File tree

‎src/components/filter_group/__snapshots__/filter_button.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`]
110110
/>
111111
<span
112112
aria-label="5 active filters"
113-
class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-accent-euiFilterButton__notification-badgeContent"
113+
class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-accent-euiFilterButton__notification"
114114
role="marquee"
115115
>
116116
5
@@ -132,7 +132,7 @@ exports[`EuiFilterButton props numFilters renders 1`] = `
132132
/>
133133
<span
134134
aria-label="5 available filters"
135-
class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
135+
class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification"
136136
role="marquee"
137137
>
138138
5
@@ -203,7 +203,7 @@ exports[`EuiFilterButton renders zero properly 1`] = `
203203
/>
204204
<span
205205
aria-label="0 available filters"
206-
class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
206+
class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification"
207207
role="marquee"
208208
>
209209
0

‎src/components/filter_group/filter_button.tsx‎

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import React, { FunctionComponent } from 'react';
1010
import classNames from 'classnames';
1111

12-
import { useEuiTheme } from '../../services';
12+
import { useEuiMemoizedStyles } from '../../services';
1313
import { useEuiI18n } from '../i18n';
1414
import { useInnerText } from '../inner_text';
1515
import { DistributiveOmit } from '../common';
@@ -78,8 +78,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
7878
const numActiveFiltersDefined =
7979
numActiveFilters != null && numActiveFilters > 0;
8080

81-
const euiTheme = useEuiTheme();
82-
const styles = euiFilterButtonStyles(euiTheme);
81+
const styles = useEuiMemoizedStyles(euiFilterButtonStyles);
8382
const cssStyles = [
8483
styles.euiFilterButton,
8584
withNext && styles.withNext,
@@ -91,7 +90,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
9190
content: contentStyles,
9291
text: textStyles,
9392
notification: notificationStyles,
94-
} = euiFilterButtonChildStyles(euiTheme);
93+
} = useEuiMemoizedStyles(euiFilterButtonChildStyles);
9594

9695
const classes = classNames(
9796
'euiFilterButton',
@@ -118,21 +117,10 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
118117
'{count} available filters',
119118
{ count: badgeCount }
120119
);
121-
122-
const badgeContent = showBadge && (
123-
<EuiNotificationBadge
124-
className="euiFilterButton__notification"
125-
css={[
126-
notificationStyles.euiFilterButton__notification,
127-
isDisabled && notificationStyles.disabled,
128-
]}
129-
aria-label={hasActiveFilters ? activeBadgeLabel : availableBadgeLabel}
130-
color={isDisabled || !hasActiveFilters ? 'subdued' : badgeColor}
131-
role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
132-
>
133-
{badgeCount}
134-
</EuiNotificationBadge>
135-
);
120+
const badgeStyles = [
121+
notificationStyles.euiFilterButton__notification,
122+
isDisabled && notificationStyles.disabled,
123+
];
136124

137125
/**
138126
* Text
@@ -152,19 +140,6 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
152140
const dataText =
153141
children && typeof children === 'string' ? children : innerText;
154142

155-
const textContent = (
156-
<span
157-
ref={ref}
158-
data-text={dataText}
159-
title={dataText}
160-
{...textProps}
161-
className={buttonTextClassNames}
162-
css={textCssStyles}
163-
>
164-
{children}
165-
</span>
166-
);
167-
168143
return (
169144
<EuiButtonEmpty
170145
className={classes}
@@ -185,8 +160,28 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
185160
}}
186161
{...rest}
187162
>
188-
{textContent}
189-
{badgeContent}
163+
<span
164+
ref={ref}
165+
data-text={dataText}
166+
title={dataText}
167+
{...textProps}
168+
className={buttonTextClassNames}
169+
css={textCssStyles}
170+
>
171+
{children}
172+
</span>
173+
174+
{showBadge && (
175+
<EuiNotificationBadge
176+
className="euiFilterButton__notification"
177+
css={badgeStyles}
178+
aria-label={hasActiveFilters ? activeBadgeLabel : availableBadgeLabel}
179+
color={isDisabled || !hasActiveFilters ? 'subdued' : badgeColor}
180+
role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
181+
>
182+
{badgeCount}
183+
</EuiNotificationBadge>
184+
)}
190185
</EuiButtonEmpty>
191186
);
192187
};

‎src/components/filter_group/filter_group.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
1010
import classNames from 'classnames';
1111

12-
import { useEuiTheme } from '../../services';
12+
import { useEuiMemoizedStyles } from '../../services';
1313
import { CommonProps } from '../common';
1414

1515
import { euiFilterGroupStyles } from './filter_group.styles';
@@ -34,8 +34,7 @@ export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps> = ({
3434
compressed,
3535
...rest
3636
}) => {
37-
const euiTheme = useEuiTheme();
38-
const styles = euiFilterGroupStyles(euiTheme);
37+
const styles = useEuiMemoizedStyles(euiFilterGroupStyles);
3938
const cssStyles = [
4039
styles.euiFilterGroup,
4140
fullWidth && styles.fullWidth,

0 commit comments

Comments
 (0)