Skip to content

Commit

Permalink
Upgrade react-spring (#54)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jigsawye @kpman
jigsawye authored and kpman committed Feb 13, 2019
1 parent 0dbf225 commit a535e1e
Show file tree
Hide file tree
Showing 24 changed files with 380 additions and 312 deletions.
40 changes: 21 additions & 19 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"immutable": "3.7.4",
"moment": "^2.24.0",
"polished": "^2.3.3",
"prop-types": "^15.6.2",
"prop-types": "^15.7.1",
"ramda": "^0.26.1",
"rc-calendar": "^9.10.8",
"rc-editor-mention": "1.1.7",
Expand All @@ -61,15 +61,16 @@
"react-html-attributes": "^1.4.3",
"react-intl-tel-input": "^6.1.0",
"react-select": "^2.3.0",
"react-spring": "^7.2.10",
"react-textarea-autosize": "^7.1.0",
"resize-observer-polyfill": "^1.5.1",
"styled-normalize": "^8.0.6",
"styled-system": "^3.2.1"
},
"peerDependencies": {
"react": "16.8.0-alpha.0",
"react-dom": "16.8.0-alpha.0",
"react": ">=16.8.0",
"react-dom": ">=16.8.0",
"react-icons": ">=3.2.0",
"react-spring": ">=8.0.0",
"styled-components": ">=4.1.0"
},
"devDependencies": {
Expand All @@ -81,20 +82,20 @@
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.1.0",
"@types/jest": "^24.0.0",
"@types/ramda": "^0.25.47",
"@types/react": "16.7.22",
"@types/react-dom": "^16.0.11",
"@types/jest": "^24.0.3",
"@types/ramda": "^0.25.49",
"@types/react": "16.8.2",
"@types/react-dom": "^16.8.0",
"@types/react-select": "^2.0.11",
"@types/styled-components": "4.1.8",
"@types/styled-system": "^3.2.0",
"@types/styled-components": "4.1.9",
"@types/styled-system": "^3.2.1",
"babel-core": "^7.0.0-0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
"babel-plugin-module-resolver": "^3.1.3",
"babel-plugin-module-resolver": "^3.2.0",
"babel-plugin-ramda": "^2.0.0",
"babel-plugin-styled-components": "^1.10.0",
"babel-plugin-typescript-to-proptypes": "^0.17.0",
"babel-plugin-typescript-to-proptypes": "^0.17.1",
"commitizen": "^3.0.5",
"conventional-changelog-cli": "^2.0.11",
"cross-env": "^5.2.0",
Expand All @@ -109,20 +110,21 @@
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^0.0.0",
"eslint-plugin-react-hooks": "^1.0.1",
"eslint-plugin-sort-imports-es6-autofix": "^0.3.0",
"eslint-plugin-typescript": "^0.14.0",
"husky": "^1.3.1",
"jest": "^24.1.0",
"jest-dom": "^3.0.1",
"jest-dom": "^3.1.1",
"jest-styled-components": "^6.3.1",
"lint-staged": "^8.1.3",
"prettier": "^1.16.4",
"prettier-package-json": "^2.0.1",
"react": "16.8.0-alpha.0",
"react-dom": "16.8.0-alpha.0",
"react-icons": "^3.3.0",
"react-testing-library": "^5.4.4",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-icons": "^3.4.0",
"react-spring": "^8.0.7",
"react-testing-library": "^5.8.0",
"rollup": "^1.1.2",
"rollup-plugin-commonjs": "^9.2.0",
"styled-components": "^4.1.3",
Expand All @@ -135,7 +137,7 @@
"tslint": "^5.12.1",
"tslint-config-prettier": "^1.18.0",
"tslint-plugin-prettier": "^2.0.1",
"typescript": "3.3.1",
"typescript": "3.3.3",
"typescript-eslint-parser": "22.0.0"
},
"husky": {
Expand Down
35 changes: 17 additions & 18 deletions src/Alert/BaseAlert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { FunctionComponent, ReactNode } from 'react';
import React, { ReactNode, forwardRef } from 'react';
import styled from 'styled-components';
import { MdClose } from 'react-icons/md';
import { SpaceProps, space } from 'styled-system';
Expand Down Expand Up @@ -38,22 +38,21 @@ export interface IBaseAlertProps extends IAlertTypes {
onClose?: () => void;
}

const BaseAlert: FunctionComponent<IBaseAlertProps> = ({
message,
type,
closable,
onClose,
...props
}) => (
<StyledAlert type={type} {...omit(['onClosed'], props)}>
<Flex flex="none">{getTypeIcon(type)}</Flex>
<Box flex="auto">{message}</Box>
{closable && (
<Flex flex="none">
<Icon size="16" cursor="pointer" type={MdClose} onClick={onClose} />
</Flex>
)}
</StyledAlert>
);
const BaseAlert = forwardRef<{}, IBaseAlertProps>(function BaseAlert(
{ message, type, closable, onClose, ...props },
ref
) {
return (
<StyledAlert type={type} ref={ref} {...omit(['onClosed'], props)}>
<Flex flex="none">{getTypeIcon(type)}</Flex>
<Box flex="auto">{message}</Box>
{closable && (
<Flex flex="none">
<Icon size="16" cursor="pointer" type={MdClose} onClick={onClose} />
</Flex>
)}
</StyledAlert>
);
});

export default BaseAlert;
57 changes: 26 additions & 31 deletions src/Alert/ClosableAlert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { FunctionComponent, useState } from 'react';
import { Spring, animated, config } from 'react-spring';
import { animated, config, useSpring } from 'react-spring';

import useMeasure from 'utils/useMeasure';

import BaseAlert, { IBaseAlertProps } from './BaseAlert';

Expand All @@ -11,41 +13,34 @@ const ClosableAlert: FunctionComponent<IAlertProps> = ({
onClosed,
...props
}) => {
const [bind, { height: boundHeight }] = useMeasure();
const [visible, setVisible] = useState(true);
const { x, height } = useSpring({
x: visible ? 1 : 0,
height: visible ? boundHeight : 0,
onRest: (rest: any) => {
if (rest.x === 0 && onClosed) {
onClosed();
}
},
config: {
...config.default,
precision: 0.1,
},
});

return (
<Spring
native
onRest={({ x }: any) => {
if (x === 0 && onClosed) {
onClosed();
}
}}
from={{
x: 1,
height: 'auto',
}}
to={{
x: visible ? 1 : 0,
height: visible ? 'auto' : 0,
}}
config={{
...config.default,
precision: 0.1,
<animated.div
style={{
transform: (x as any).interpolate((_x: number) => `scaleY(${_x})`),
opacity: x,
height,
}}
>
{({ x, height }: { x: any; height: any }) => (
<animated.div
style={{
transform: x.interpolate((_x: number) => `scaleY(${_x})`),
opacity: x,
height,
}}
>
<BaseAlert onClose={() => setVisible(false)} {...props} />
</animated.div>
)}
</Spring>
<div {...bind}>
<BaseAlert onClose={() => setVisible(false)} {...props} />
</div>
</animated.div>
);
};

Expand Down
46 changes: 27 additions & 19 deletions src/Backdrop/Backdrop.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { FunctionComponent } from 'react';
import styled from 'styled-components';
import { Transition, animated, config } from 'react-spring';
import { animated, config, useTransition } from 'react-spring';

const StyledBackdrop = styled.div`
position: fixed;
Expand All @@ -19,27 +19,35 @@ export interface IBackdropProps {
[key: string]: any;
}

const Backdrop: FunctionComponent<IBackdropProps> = ({ visible, ...props }) => (
<Transition
native
items={visible}
from={{
const Backdrop: FunctionComponent<IBackdropProps> = ({
visible,
...otherProps
}) => {
const transition = useTransition(visible, null, {
from: {
opacity: 0,
}}
enter={{
},
enter: {
opacity: 1,
}}
leave={{
},
leave: {
opacity: 0,
pointerEvents: 'none',
}}
config={config.stiff}
>
{_visible =>
_visible &&
(styles => <AnimatedStyledBackdrop style={styles} {...props} />)
}
</Transition>
);
},
config: config.stiff,
});

return (
// FIXME: react type
<>
{transition.map(
({ item, key, props }) =>
item && (
<AnimatedStyledBackdrop key={key} style={props} {...otherProps} />
)
)}
</>
);
};

export default Backdrop;
65 changes: 35 additions & 30 deletions src/Drawer/Drawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React, { FunctionComponent, ReactNode, useEffect } from 'react';
import React, {
Fragment,
FunctionComponent,
ReactNode,
useEffect,
} from 'react';
import styled, { css } from 'styled-components';
import { Transition, animated, config } from 'react-spring';
import { animated, config, useTransition } from 'react-spring';

import Portal from 'utils/Portal';
import tag from 'utils/CleanTag';
Expand Down Expand Up @@ -108,6 +113,22 @@ const Drawer: FunctionComponent<IDrawerProps> = ({
const transformAxis = getTransformAxis(placement);
const transformBreadth = getTransformBreadth({ placement, breadth });

const transition = useTransition(visible, null, {
from: {
offset: transformBreadth,
},
enter: {
offset: '0px',
},
leave: {
offset: transformBreadth,
},
config: {
...config.default,
precision: 0.1,
},
});

useKeydown({
listening: visible,
keyCode: ESC_KEY_CODE,
Expand All @@ -124,27 +145,10 @@ const Drawer: FunctionComponent<IDrawerProps> = ({

return (
<Portal appendFor="drawer">
<Transition
native
items={visible}
from={{
offset: transformBreadth,
}}
enter={{
offset: '0px',
}}
leave={{
offset: transformBreadth,
}}
config={{
...config.default,
precision: 0.1,
}}
>
{_visible =>
_visible &&
((props: { offset: any }) => (
<>
{transition.map(
({ item, key, props }) =>
item && (
<Fragment key={key}>
<Backdrop
visible={visible}
onClick={() => {
Expand All @@ -155,9 +159,11 @@ const Drawer: FunctionComponent<IDrawerProps> = ({
/>
<animated.div
style={{
transform: props.offset.interpolate(
(offset: any) => `${transformAxis}(${offset})`
),
transform:
props.offset &&
props.offset.interpolate(
offset => `${transformAxis}(${offset})`
),
}}
>
<DrawerWrapper placement={placement} breadth={breadth}>
Expand All @@ -172,10 +178,9 @@ const Drawer: FunctionComponent<IDrawerProps> = ({
{footer && <FooterWrapper>{footer}</FooterWrapper>}
</DrawerWrapper>
</animated.div>
</>
))
}
</Transition>
</Fragment>
)
)}
</Portal>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/Dropdown/List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
overflow,
textAlign,
} from 'styled-system';
import { animated } from 'react-spring';
import { animated } from 'react-spring/renderprops.cjs';

import tag from 'utils/CleanTag';

Expand Down
Loading

0 comments on commit a535e1e

Please sign in to comment.