Skip to content

Commit eff58da

Browse files
dicearrAvaq
dicearr
authored and
Avaq
committed
Replace css props with emotion className
1 parent 1517abe commit eff58da

File tree

9 files changed

+1262
-573
lines changed

9 files changed

+1262
-573
lines changed

‎src/Select.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1379,6 +1379,7 @@ export default class Select extends Component<Props, State> {
13791379
disabled={isDisabled}
13801380
tabIndex={tabIndex}
13811381
value=""
1382+
emotion={this.emotion}
13821383
/>
13831384
);
13841385
}
@@ -1411,6 +1412,7 @@ export default class Select extends Component<Props, State> {
14111412
theme={theme}
14121413
type="text"
14131414
value={inputValue}
1415+
emotion={this.emotion}
14141416
{...ariaAttributes}
14151417
/>
14161418
);
@@ -1688,7 +1690,7 @@ export default class Select extends Component<Props, State> {
16881690
onTopArrive={onMenuScrollToTop}
16891691
onBottomArrive={onMenuScrollToBottom}
16901692
>
1691-
<ScrollBlock isEnabled={menuShouldBlockScroll}>
1693+
<ScrollBlock emotion={this.emotion} isEnabled={menuShouldBlockScroll}>
16921694
<MenuList
16931695
{...commonProps}
16941696
innerRef={this.getMenuListRef}
@@ -1759,7 +1761,7 @@ export default class Select extends Component<Props, State> {
17591761
renderLiveRegion() {
17601762
if (!this.state.isFocused) return null;
17611763
return (
1762-
<A11yText aria-live="assertive">
1764+
<A11yText emotion={this.emotion} aria-live="assertive">
17631765
<p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
17641766
<p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>
17651767
</A11yText>

‎src/__tests__/__snapshots__/Async.test.js.snap

Lines changed: 593 additions & 229 deletions
Large diffs are not rendered by default.

‎src/__tests__/__snapshots__/AsyncCreatable.test.js.snap

Lines changed: 593 additions & 229 deletions
Large diffs are not rendered by default.

‎src/__tests__/__snapshots__/Select.test.js.snap

Lines changed: 54 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,7 @@ exports[`snapshot - defaults 1`] = `
1515
"registered": Object {},
1616
"sheet": StyleSheet {
1717
"before": null,
18-
"container": <head>
19-
<style
20-
data-emotion=""
21-
>
22-
23-
</style>
24-
</head>,
18+
"container": <head />,
2519
"ctr": 0,
2620
"isSpeedy": false,
2721
"key": "css",
@@ -40,13 +34,7 @@ exports[`snapshot - defaults 1`] = `
4034
"merge": [Function],
4135
"sheet": StyleSheet {
4236
"before": null,
43-
"container": <head>
44-
<style
45-
data-emotion=""
46-
>
47-
48-
</style>
49-
</head>,
37+
"container": <head />,
5038
"ctr": 0,
5139
"isSpeedy": false,
5240
"key": "css",
@@ -156,13 +144,7 @@ exports[`snapshot - defaults 1`] = `
156144
"registered": Object {},
157145
"sheet": StyleSheet {
158146
"before": null,
159-
"container": <head>
160-
<style
161-
data-emotion=""
162-
>
163-
164-
</style>
165-
</head>,
147+
"container": <head />,
166148
"ctr": 0,
167149
"isSpeedy": false,
168150
"key": "css",
@@ -181,13 +163,7 @@ exports[`snapshot - defaults 1`] = `
181163
"merge": [Function],
182164
"sheet": StyleSheet {
183165
"before": null,
184-
"container": <head>
185-
<style
186-
data-emotion=""
187-
>
188-
189-
</style>
190-
</head>,
166+
"container": <head />,
191167
"ctr": 0,
192168
"isSpeedy": false,
193169
"key": "css",
@@ -298,13 +274,7 @@ exports[`snapshot - defaults 1`] = `
298274
"registered": Object {},
299275
"sheet": StyleSheet {
300276
"before": null,
301-
"container": <head>
302-
<style
303-
data-emotion=""
304-
>
305-
306-
</style>
307-
</head>,
277+
"container": <head />,
308278
"ctr": 0,
309279
"isSpeedy": false,
310280
"key": "css",
@@ -323,13 +293,7 @@ exports[`snapshot - defaults 1`] = `
323293
"merge": [Function],
324294
"sheet": StyleSheet {
325295
"before": null,
326-
"container": <head>
327-
<style
328-
data-emotion=""
329-
>
330-
331-
</style>
332-
</head>,
296+
"container": <head />,
333297
"ctr": 0,
334298
"isSpeedy": false,
335299
"key": "css",
@@ -432,13 +396,7 @@ exports[`snapshot - defaults 1`] = `
432396
"registered": Object {},
433397
"sheet": StyleSheet {
434398
"before": null,
435-
"container": <head>
436-
<style
437-
data-emotion=""
438-
>
439-
440-
</style>
441-
</head>,
399+
"container": <head />,
442400
"ctr": 0,
443401
"isSpeedy": false,
444402
"key": "css",
@@ -457,13 +415,7 @@ exports[`snapshot - defaults 1`] = `
457415
"merge": [Function],
458416
"sheet": StyleSheet {
459417
"before": null,
460-
"container": <head>
461-
<style
462-
data-emotion=""
463-
>
464-
465-
</style>
466-
</head>,
418+
"container": <head />,
467419
"ctr": 0,
468420
"isSpeedy": false,
469421
"key": "css",
@@ -562,6 +514,46 @@ exports[`snapshot - defaults 1`] = `
562514
autoComplete="off"
563515
autoCorrect="off"
564516
cx={[Function]}
517+
emotion={
518+
Object {
519+
"cache": Object {
520+
"compat": true,
521+
"insert": [Function],
522+
"inserted": Object {},
523+
"key": "css",
524+
"nonce": undefined,
525+
"registered": Object {},
526+
"sheet": StyleSheet {
527+
"before": null,
528+
"container": <head />,
529+
"ctr": 0,
530+
"isSpeedy": false,
531+
"key": "css",
532+
"nonce": undefined,
533+
"speedy": [Function],
534+
"tags": Array [],
535+
},
536+
},
537+
"css": [Function],
538+
"cx": [Function],
539+
"flush": [Function],
540+
"getRegisteredStyles": [Function],
541+
"hydrate": [Function],
542+
"injectGlobal": [Function],
543+
"keyframes": [Function],
544+
"merge": [Function],
545+
"sheet": StyleSheet {
546+
"before": null,
547+
"container": <head />,
548+
"ctr": 0,
549+
"isSpeedy": false,
550+
"key": "css",
551+
"nonce": undefined,
552+
"speedy": [Function],
553+
"tags": Array [],
554+
},
555+
}
556+
}
565557
getStyles={[Function]}
566558
id="react-select-2-input"
567559
innerRef={[Function]}
@@ -618,13 +610,7 @@ exports[`snapshot - defaults 1`] = `
618610
"registered": Object {},
619611
"sheet": StyleSheet {
620612
"before": null,
621-
"container": <head>
622-
<style
623-
data-emotion=""
624-
>
625-
626-
</style>
627-
</head>,
613+
"container": <head />,
628614
"ctr": 0,
629615
"isSpeedy": false,
630616
"key": "css",
@@ -643,13 +629,7 @@ exports[`snapshot - defaults 1`] = `
643629
"merge": [Function],
644630
"sheet": StyleSheet {
645631
"before": null,
646-
"container": <head>
647-
<style
648-
data-emotion=""
649-
>
650-
651-
</style>
652-
</head>,
632+
"container": <head />,
653633
"ctr": 0,
654634
"isSpeedy": false,
655635
"key": "css",
@@ -752,13 +732,7 @@ exports[`snapshot - defaults 1`] = `
752732
"registered": Object {},
753733
"sheet": StyleSheet {
754734
"before": null,
755-
"container": <head>
756-
<style
757-
data-emotion=""
758-
>
759-
760-
</style>
761-
</head>,
735+
"container": <head />,
762736
"ctr": 0,
763737
"isSpeedy": false,
764738
"key": "css",
@@ -777,13 +751,7 @@ exports[`snapshot - defaults 1`] = `
777751
"merge": [Function],
778752
"sheet": StyleSheet {
779753
"before": null,
780-
"container": <head>
781-
<style
782-
data-emotion=""
783-
>
784-
785-
</style>
786-
</head>,
754+
"container": <head />,
787755
"ctr": 0,
788756
"isSpeedy": false,
789757
"key": "css",
@@ -887,13 +855,7 @@ exports[`snapshot - defaults 1`] = `
887855
"registered": Object {},
888856
"sheet": StyleSheet {
889857
"before": null,
890-
"container": <head>
891-
<style
892-
data-emotion=""
893-
>
894-
895-
</style>
896-
</head>,
858+
"container": <head />,
897859
"ctr": 0,
898860
"isSpeedy": false,
899861
"key": "css",
@@ -912,13 +874,7 @@ exports[`snapshot - defaults 1`] = `
912874
"merge": [Function],
913875
"sheet": StyleSheet {
914876
"before": null,
915-
"container": <head>
916-
<style
917-
data-emotion=""
918-
>
919-
920-
</style>
921-
</head>,
877+
"container": <head />,
922878
"ctr": 0,
923879
"isSpeedy": false,
924880
"key": "css",

‎src/components/Input.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export type InputProps = PropsWithStyles & {
1313
/** Whether the input is disabled */
1414
isDisabled?: boolean,
1515
className?: string,
16+
emotion: any,
1617
};
1718

1819
export const inputCSS = ({ isDisabled, theme: { spacing, colors } }: InputProps) => ({
@@ -40,9 +41,10 @@ const Input = ({
4041
isHidden,
4142
isDisabled,
4243
theme,
44+
emotion,
4345
...props
4446
}: InputProps) => (
45-
<div css={getStyles('input', { theme, ...props })}>
47+
<div className={emotion.css(getStyles('input', { theme, ...props }))}>
4648
<AutosizeInput
4749
className={cx(null, { 'input': true }, className)}
4850
inputRef={innerRef}

‎src/components/indicators.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -164,10 +164,10 @@ export const loadingIndicatorCSS = ({
164164
verticalAlign: 'middle',
165165
});
166166

167-
type DotProps = { color: string, delay: number, offset: boolean };
168-
const LoadingDot = ({ color, delay, offset }: DotProps) => (
167+
type DotProps = { color: string, delay: number, offset: boolean, emotion: any };
168+
const LoadingDot = ({ color, delay, offset, emotion }: DotProps) => (
169169
<span
170-
css={{
170+
className={emotion.css({
171171
animationDuration: '1s',
172172
animationDelay: `${delay}ms`,
173173
animationIterationCount: 'infinite',
@@ -180,7 +180,7 @@ const LoadingDot = ({ color, delay, offset }: DotProps) => (
180180
height: '1em',
181181
verticalAlign: 'top',
182182
width: '1em',
183-
}}
183+
})}
184184
/>
185185
);
186186

@@ -220,9 +220,9 @@ export const LoadingIndicator = (props: LoadingIconProps) => {
220220
className
221221
)}
222222
>
223-
<LoadingDot color={color} delay={0} offset={isRtl} />
224-
<LoadingDot color={color} delay={160} offset />
225-
<LoadingDot color={color} delay={320} offset={!isRtl} />
223+
<LoadingDot emotion={emotion} color={color} delay={0} offset={isRtl} />
224+
<LoadingDot emotion={emotion} color={color} delay={160} offset />
225+
<LoadingDot emotion={emotion} color={color} delay={320} offset={!isRtl} />
226226
</div>
227227
);
228228
};

‎src/internal/A11yText.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react';
44
// Assistive text to describe visual elements. Hidden for sighted users.
55
const A11yText = (props: any) => (
66
<span
7-
css={{
7+
className={props.emotion.css({
88
zIndex: 9999,
99
border: 0,
1010
clip: 'rect(1px, 1px, 1px, 1px)',
@@ -16,7 +16,7 @@ const A11yText = (props: any) => (
1616
whiteSpace: 'nowrap',
1717
backgroundColor: 'red',
1818
color: 'blue',
19-
}}
19+
})}
2020
{...props}
2121
/>
2222
);

‎src/internal/DummyInput.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import React, { Component } from 'react';
44

55
export default class DummyInput extends Component<any> {
66
render () {
7-
const { in: inProp, out, onExited, appear, enter, exit, innerRef, ...props } = this.props;
7+
const { in: inProp, out, onExited, appear, enter, exit, innerRef, emotion, ...props } = this.props;
88
return(
99
<input
1010
ref={innerRef}
1111
{...props}
12-
css={{
12+
className={emotion.css({
1313
// get rid of any default styles
1414
background: 0,
1515
border: 0,
@@ -28,7 +28,7 @@ export default class DummyInput extends Component<any> {
2828
opacity: 0,
2929
position: 'relative',
3030
transform: 'scale(0)',
31-
}}
31+
})}
3232
/>
3333
);
3434
}

0 commit comments

Comments
 (0)