Skip to content

Commit

Permalink
Replace css props with emotion className
Browse files Browse the repository at this point in the history
  • Loading branch information
@dicearr @Avaq
dicearr authored and Avaq committed Dec 21, 2018
1 parent 4bad8b8 commit 7842d0d
Show file tree
Hide file tree
Showing 9 changed files with 1,262 additions and 573 deletions.
6 changes: 4 additions & 2 deletions src/Select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1379,6 +1379,7 @@ export default class Select extends Component<Props, State> {
disabled={isDisabled}
tabIndex={tabIndex}
value=""
emotion={this.emotion}
/>
);
}
Expand Down Expand Up @@ -1411,6 +1412,7 @@ export default class Select extends Component<Props, State> {
theme={theme}
type="text"
value={inputValue}
emotion={this.emotion}
{...ariaAttributes}
/>
);
Expand Down Expand Up @@ -1688,7 +1690,7 @@ export default class Select extends Component<Props, State> {
onTopArrive={onMenuScrollToTop}
onBottomArrive={onMenuScrollToBottom}
>
<ScrollBlock isEnabled={menuShouldBlockScroll}>
<ScrollBlock emotion={this.emotion} isEnabled={menuShouldBlockScroll}>
<MenuList
{...commonProps}
innerRef={this.getMenuListRef}
Expand Down Expand Up @@ -1759,7 +1761,7 @@ export default class Select extends Component<Props, State> {
renderLiveRegion() {
if (!this.state.isFocused) return null;
return (
<A11yText aria-live="assertive">
<A11yText emotion={this.emotion} aria-live="assertive">
<p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
<p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>
</A11yText>
Expand Down
822 changes: 593 additions & 229 deletions src/__tests__/__snapshots__/Async.test.js.snap
View file

Large diffs are not rendered by default.

822 changes: 593 additions & 229 deletions src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
View file

Large diffs are not rendered by default.

152 changes: 54 additions & 98 deletions src/__tests__/__snapshots__/Select.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,7 @@ exports[`snapshot - defaults 1`] = `
"registered": Object {},
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand All @@ -40,13 +34,7 @@ exports[`snapshot - defaults 1`] = `
"merge": [Function],
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand Down Expand Up @@ -156,13 +144,7 @@ exports[`snapshot - defaults 1`] = `
"registered": Object {},
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand All @@ -181,13 +163,7 @@ exports[`snapshot - defaults 1`] = `
"merge": [Function],
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand Down Expand Up @@ -298,13 +274,7 @@ exports[`snapshot - defaults 1`] = `
"registered": Object {},
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand All @@ -323,13 +293,7 @@ exports[`snapshot - defaults 1`] = `
"merge": [Function],
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand Down Expand Up @@ -432,13 +396,7 @@ exports[`snapshot - defaults 1`] = `
"registered": Object {},
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand All @@ -457,13 +415,7 @@ exports[`snapshot - defaults 1`] = `
"merge": [Function],
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand Down Expand Up @@ -562,6 +514,46 @@ exports[`snapshot - defaults 1`] = `
autoComplete="off"
autoCorrect="off"
cx={[Function]}
emotion={
Object {
"cache": Object {
"compat": true,
"insert": [Function],
"inserted": Object {},
"key": "css",
"nonce": undefined,
"registered": Object {},
"sheet": StyleSheet {
"before": null,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"speedy": [Function],
"tags": Array [],
},
},
"css": [Function],
"cx": [Function],
"flush": [Function],
"getRegisteredStyles": [Function],
"hydrate": [Function],
"injectGlobal": [Function],
"keyframes": [Function],
"merge": [Function],
"sheet": StyleSheet {
"before": null,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"speedy": [Function],
"tags": Array [],
},
}
}
getStyles={[Function]}
id="react-select-2-input"
innerRef={[Function]}
Expand Down Expand Up @@ -618,13 +610,7 @@ exports[`snapshot - defaults 1`] = `
"registered": Object {},
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand All @@ -643,13 +629,7 @@ exports[`snapshot - defaults 1`] = `
"merge": [Function],
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand Down Expand Up @@ -752,13 +732,7 @@ exports[`snapshot - defaults 1`] = `
"registered": Object {},
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand All @@ -777,13 +751,7 @@ exports[`snapshot - defaults 1`] = `
"merge": [Function],
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand Down Expand Up @@ -887,13 +855,7 @@ exports[`snapshot - defaults 1`] = `
"registered": Object {},
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand All @@ -912,13 +874,7 @@ exports[`snapshot - defaults 1`] = `
"merge": [Function],
"sheet": StyleSheet {
"before": null,
"container": <head>
<style
data-emotion=""
>
</style>
</head>,
"container": <head />,
"ctr": 0,
"isSpeedy": false,
"key": "css",
Expand Down
4 changes: 3 additions & 1 deletion src/components/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export type InputProps = PropsWithStyles & {
/** Whether the input is disabled */
isDisabled?: boolean,
className?: string,
emotion: any,
};

export const inputCSS = ({ isDisabled, theme: { spacing, colors } }: InputProps) => ({
Expand Down Expand Up @@ -40,9 +41,10 @@ const Input = ({
isHidden,
isDisabled,
theme,
emotion,
...props
}: InputProps) => (
<div css={getStyles('input', { theme, ...props })}>
<div className={emotion.css(getStyles('input', { theme, ...props }))}>
<AutosizeInput
className={cx(null, { 'input': true }, className)}
inputRef={innerRef}
Expand Down
14 changes: 7 additions & 7 deletions src/components/indicators.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,10 +164,10 @@ export const loadingIndicatorCSS = ({
verticalAlign: 'middle',
});

type DotProps = { color: string, delay: number, offset: boolean };
const LoadingDot = ({ color, delay, offset }: DotProps) => (
type DotProps = { color: string, delay: number, offset: boolean, emotion: any };
const LoadingDot = ({ color, delay, offset, emotion }: DotProps) => (
<span
css={{
className={emotion.css({
animationDuration: '1s',
animationDelay: `${delay}ms`,
animationIterationCount: 'infinite',
Expand All @@ -180,7 +180,7 @@ const LoadingDot = ({ color, delay, offset }: DotProps) => (
height: '1em',
verticalAlign: 'top',
width: '1em',
}}
})}
/>
);

Expand Down Expand Up @@ -220,9 +220,9 @@ export const LoadingIndicator = (props: LoadingIconProps) => {
className
)}
>
<LoadingDot color={color} delay={0} offset={isRtl} />
<LoadingDot color={color} delay={160} offset />
<LoadingDot color={color} delay={320} offset={!isRtl} />
<LoadingDot emotion={emotion} color={color} delay={0} offset={isRtl} />
<LoadingDot emotion={emotion} color={color} delay={160} offset />
<LoadingDot emotion={emotion} color={color} delay={320} offset={!isRtl} />
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/internal/A11yText.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react';
// Assistive text to describe visual elements. Hidden for sighted users.
const A11yText = (props: any) => (
<span
css={{
className={props.emotion.css({
zIndex: 9999,
border: 0,
clip: 'rect(1px, 1px, 1px, 1px)',
Expand All @@ -16,7 +16,7 @@ const A11yText = (props: any) => (
whiteSpace: 'nowrap',
backgroundColor: 'red',
color: 'blue',
}}
})}
{...props}
/>
);
Expand Down
6 changes: 3 additions & 3 deletions src/internal/DummyInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import React, { Component } from 'react';

export default class DummyInput extends Component<any> {
render () {
const { in: inProp, out, onExited, appear, enter, exit, innerRef, ...props } = this.props;
const { in: inProp, out, onExited, appear, enter, exit, innerRef, emotion, ...props } = this.props;
return(
<input
ref={innerRef}
{...props}
css={{
className={emotion.css({
// get rid of any default styles
background: 0,
border: 0,
Expand All @@ -28,7 +28,7 @@ export default class DummyInput extends Component<any> {
opacity: 0,
position: 'relative',
transform: 'scale(0)',
}}
})}
/>
);
}
Expand Down
Loading

0 comments on commit 7842d0d

Please sign in to comment.