diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 6e85c8a3c1..0000000000 --- a/.eslintrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "root": true, - "extends": ["react-spring"] -} diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs new file mode 100644 index 0000000000..f9d8426466 --- /dev/null +++ b/.git-blame-ignore-revs @@ -0,0 +1,6 @@ +# Bulk reformat commits — ignore in `git blame` to keep line history meaningful. +# Configure once locally with: +# git config blame.ignoreRevsFile .git-blame-ignore-revs + +# chore(format): consolidate prettier configs — reformat sandboxes + __tests__ to root style +397c97ec diff --git a/.oxlintrc.json b/.oxlintrc.json new file mode 100644 index 0000000000..a084571ab4 --- /dev/null +++ b/.oxlintrc.json @@ -0,0 +1,32 @@ +{ + "$schema": "./node_modules/oxlint/configuration_schema.json", + "plugins": ["react", "react-hooks"], + "env": { + "browser": true, + "es2020": true, + "node": true + }, + "settings": { + "react": { "version": "19.0" } + }, + "rules": { + "prefer-const": "error", + "no-console": ["error", { "allow": ["warn", "error"] }], + "no-unused-vars": "off", + "no-sparse-arrays": "off", + "no-useless-escape": "off", + "typescript/no-unused-vars": [ + "warn", + { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" } + ] + }, + "ignorePatterns": [ + "**/dist/**", + "**/node_modules/**", + "**/api/**", + "**/public/**", + "**/.turbo/**", + "**/coverage/**", + "**/build/**" + ] +} diff --git a/demo/.eslintrc b/demo/.eslintrc deleted file mode 100644 index 6e85c8a3c1..0000000000 --- a/demo/.eslintrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "root": true, - "extends": ["react-spring"] -} diff --git a/demo/package.json b/demo/package.json index 43e1aa9d02..f4e005e48f 100644 --- a/demo/package.json +++ b/demo/package.json @@ -9,7 +9,6 @@ "scripts": { "dev": "vite", "clean": "rm -rf .turbo && rm -rf node_modules", - "lint": "TIMING=1 eslint \"src/**/*.ts*\"", "serve": "vite preview" }, "dependencies": { diff --git a/demo/src/sandboxes/animating-auto/.prettierrc b/demo/src/sandboxes/animating-auto/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/animating-auto/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/animating-auto/src/App.tsx b/demo/src/sandboxes/animating-auto/src/App.tsx index 21ceafd65c..e01b70ec87 100644 --- a/demo/src/sandboxes/animating-auto/src/App.tsx +++ b/demo/src/sandboxes/animating-auto/src/App.tsx @@ -13,7 +13,9 @@ export default function App() {
toggle(!open)}> - {props.width.to(x => x.toFixed(0))} + + {props.width.to(x => x.toFixed(0))} +
) diff --git a/demo/src/sandboxes/cards-stack/.prettierrc b/demo/src/sandboxes/cards-stack/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/cards-stack/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/cards-stack/src/App.tsx b/demo/src/sandboxes/cards-stack/src/App.tsx index 7d3a6dd482..f2261adb72 100644 --- a/demo/src/sandboxes/cards-stack/src/App.tsx +++ b/demo/src/sandboxes/cards-stack/src/App.tsx @@ -33,30 +33,32 @@ function Deck() { from: from(i), })) // Create a bunch of springs using the helpers above // Create a gesture, we're interested in down-state, delta (current-pos - click-pos), direction and velocity - const bind = useDrag(({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => { - const trigger = velocity > 0.2 // If you flick hard enough it should trigger the card to fly out - const dir = xDir < 0 ? -1 : 1 // Direction should either point left or right - if (!down && trigger) gone.add(index) // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out - api.start(i => { - if (index !== i) return // We're only interested in changing spring-data for the current spring - const isGone = gone.has(index) - const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0 // When a card is gone it flys out left or right, otherwise goes back to zero - const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0) // How much the card tilts, flicking it harder makes it rotate faster - const scale = down ? 1.1 : 1 // Active cards lift up a bit - return { - x, - rot, - scale, - delay: undefined, - config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 }, - } - }) - if (!down && gone.size === cards.length) - setTimeout(() => { - gone.clear() - api.start(i => to(i)) - }, 600) - }) + const bind = useDrag( + ({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => { + const trigger = velocity > 0.2 // If you flick hard enough it should trigger the card to fly out + const dir = xDir < 0 ? -1 : 1 // Direction should either point left or right + if (!down && trigger) gone.add(index) // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out + api.start(i => { + if (index !== i) return // We're only interested in changing spring-data for the current spring + const isGone = gone.has(index) + const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0 // When a card is gone it flys out left or right, otherwise goes back to zero + const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0) // How much the card tilts, flicking it harder makes it rotate faster + const scale = down ? 1.1 : 1 // Active cards lift up a bit + return { + x, + rot, + scale, + delay: undefined, + config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 }, + } + }) + if (!down && gone.size === cards.length) + setTimeout(() => { + gone.clear() + api.start(i => to(i)) + }, 600) + } + ) // Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-) return ( <> diff --git a/demo/src/sandboxes/css-gradients/.prettierrc b/demo/src/sandboxes/css-gradients/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/css-gradients/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/css-gradients/src/App.tsx b/demo/src/sandboxes/css-gradients/src/App.tsx index 3c9611a613..c7be61b593 100644 --- a/demo/src/sandboxes/css-gradients/src/App.tsx +++ b/demo/src/sandboxes/css-gradients/src/App.tsx @@ -1,6 +1,11 @@ import * as React from 'react' import { cubicCoordinates, stepsCoordinates } from 'easing-coordinates' -import { useSpring, animated, to as interpolate, createInterpolator } from '@react-spring/web' +import { + useSpring, + animated, + to as interpolate, + createInterpolator, +} from '@react-spring/web' import { useControls } from 'leva' import styles from './styles.module.css' @@ -30,7 +35,14 @@ export default function App() { }, easing: { value: 'ease-in-out', - options: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'steps'], + options: [ + 'linear', + 'ease', + 'ease-in', + 'ease-out', + 'ease-in-out', + 'steps', + ], }, easeCustom: '', }) @@ -52,27 +64,41 @@ export default function App() { coordinates = cubicCoordinates(x1, y1, x2, y2, stops) } } else { - coordinates = cubicCoordinates(customBezier[0], customBezier[1], customBezier[2], customBezier[3], stops) + coordinates = cubicCoordinates( + customBezier[0], + customBezier[1], + customBezier[2], + customBezier[3], + stops + ) } return coordinates }, [easing, easeCustom, stops]) - const allStops = interpolate([colorFrom, colorMid, colorTo], (from, mid, to) => { - const blend = createInterpolator({ range: [0, 0.5, 1], output: [from, mid, to] }) + const allStops = interpolate( + [colorFrom, colorMid, colorTo], + (from, mid, to) => { + const blend = createInterpolator({ + range: [0, 0.5, 1], + output: [from, mid, to], + }) - return coordinates.map(({ x, y }) => { - const color = blend(y) + return coordinates.map(({ x, y }) => { + const color = blend(y) - return `${color} ${x * 100}%` - }) - }) + return `${color} ${x * 100}%` + }) + } + ) return ( `linear-gradient(${angle}deg, ${args.join(', ')})`), + backgroundImage: allStops.to( + (...args) => `linear-gradient(${angle}deg, ${args.join(', ')})` + ), }} /> ) diff --git a/demo/src/sandboxes/css-keyframes/.prettierrc b/demo/src/sandboxes/css-keyframes/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/css-keyframes/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/css-variables/.prettierrc b/demo/src/sandboxes/css-variables/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/css-variables/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/draggable-list/.prettierrc b/demo/src/sandboxes/draggable-list/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/draggable-list/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/draggable-list/src/App.tsx b/demo/src/sandboxes/draggable-list/src/App.tsx index 86c280102a..79a7cd0c59 100644 --- a/demo/src/sandboxes/draggable-list/src/App.tsx +++ b/demo/src/sandboxes/draggable-list/src/App.tsx @@ -30,7 +30,11 @@ function DraggableList({ items }: { items: string[] }) { const [springs, api] = useSprings(items.length, fn(order.current)) // Create springs, each corresponds to an item, controlling its transform, scale, etc. const bind = useDrag(({ args: [originalIndex], active, movement: [, y] }) => { const curIndex = order.current.indexOf(originalIndex) - const curRow = clamp(Math.round((curIndex * 100 + y) / 100), 0, items.length - 1) + const curRow = clamp( + Math.round((curIndex * 100 + y) / 100), + 0, + items.length - 1 + ) const newOrder = swap(order.current, curIndex, curRow) api.start(fn(newOrder, active, originalIndex, curIndex, y)) // Feed springs new style data, they'll animate the view without causing a single render if (!active) order.current = newOrder @@ -43,7 +47,9 @@ function DraggableList({ items }: { items: string[] }) { key={i} style={{ zIndex, - boxShadow: shadow.to(s => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`), + boxShadow: shadow.to( + s => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px` + ), y, scale, }} diff --git a/demo/src/sandboxes/floating-button/.prettierrc b/demo/src/sandboxes/floating-button/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/floating-button/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/floating-button/src/App.tsx b/demo/src/sandboxes/floating-button/src/App.tsx index 26835c6398..1fc3b84d6c 100644 --- a/demo/src/sandboxes/floating-button/src/App.tsx +++ b/demo/src/sandboxes/floating-button/src/App.tsx @@ -40,7 +40,9 @@ const App = () => { if (avatarRefInitialPositions.current.length === 0) { const { y: buttonY } = buttonRef.current.getBoundingClientRect() - avatarRefInitialPositions.current = avatarRefs.current.map(node => buttonY - node.getBoundingClientRect().y) + avatarRefInitialPositions.current = avatarRefs.current.map( + node => buttonY - node.getBoundingClientRect().y + ) } avatarApi.start(i => ({ @@ -60,12 +62,19 @@ const App = () => { } }, []) - const backgroundTimeoutRef = React.useRef>(undefined) - const avatarTimeoutRef = React.useRef>(undefined) + const backgroundTimeoutRef = + React.useRef>(undefined) + const avatarTimeoutRef = + React.useRef>(undefined) const bindGestures = useGesture( { - onDrag: ({ down, offset: [ox, oy], velocity: [vx, vy], direction: [dx, dy] }) => { + onDrag: ({ + down, + offset: [ox, oy], + velocity: [vx, vy], + direction: [dx, dy], + }) => { api.start({ x: ox, y: oy, @@ -73,11 +82,26 @@ const App = () => { onChange: ({ value }) => { const bounds = getBounds() if ( - !(value.x >= bounds.left && value.x <= bounds.right && value.y >= bounds.top && value.y <= bounds.bottom) + !( + value.x >= bounds.left && + value.x <= bounds.right && + value.y >= bounds.top && + value.y <= bounds.bottom + ) ) { api.set({ - x: value.x < bounds.left ? bounds.left : value.x > bounds.right ? bounds.right : value.x, - y: value.y < bounds.top ? bounds.top : value.y > bounds.bottom ? bounds.bottom : value.y, + x: + value.x < bounds.left + ? bounds.left + : value.x > bounds.right + ? bounds.right + : value.x, + y: + value.y < bounds.top + ? bounds.top + : value.y > bounds.bottom + ? bounds.bottom + : value.y, }) } }, @@ -134,17 +158,19 @@ const App = () => { } ) - const { onPointerEnter, onPointerLeave, onPointerDown, ...restGestures } = bindGestures() + const { onPointerEnter, onPointerLeave, onPointerDown, ...restGestures } = + bindGestures() - const handlePointerDown = (isBackground: boolean) => (e: React.PointerEvent) => { - if (isBackground && !isVisible.current) { - return - } + const handlePointerDown = + (isBackground: boolean) => (e: React.PointerEvent) => { + if (isBackground && !isVisible.current) { + return + } - if (onPointerDown) { - onPointerDown(e) + if (onPointerDown) { + onPointerDown(e) + } } - } return ( <> @@ -160,7 +186,13 @@ const App = () => { }} > - + { onPointerDown={handlePointerDown(false)} {...restGestures} style={{ - boxShadow: opacity.to(o => `0px 3px 8px 2px rgba(0,0,0,${0.4 * 1 - o})`), + boxShadow: opacity.to( + o => `0px 3px 8px 2px rgba(0,0,0,${0.4 * 1 - o})` + ), }} > - + diff --git a/demo/src/sandboxes/image-fade/.prettierrc b/demo/src/sandboxes/image-fade/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/image-fade/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/list-reordering/.prettierrc b/demo/src/sandboxes/list-reordering/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/list-reordering/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/list-reordering/src/App.tsx b/demo/src/sandboxes/list-reordering/src/App.tsx index cf61a34ebd..f3b6f3361b 100644 --- a/demo/src/sandboxes/list-reordering/src/App.tsx +++ b/demo/src/sandboxes/list-reordering/src/App.tsx @@ -27,9 +27,15 @@ function List() { return (
{transitions((style, item, t, index) => ( - +
-
+
))} diff --git a/demo/src/sandboxes/macos-dock/.prettierrc b/demo/src/sandboxes/macos-dock/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/macos-dock/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/macos-dock/src/components/Dock/DockContext.ts b/demo/src/sandboxes/macos-dock/src/components/Dock/DockContext.ts index f55251a4d4..eacb9cedb1 100644 --- a/demo/src/sandboxes/macos-dock/src/components/Dock/DockContext.ts +++ b/demo/src/sandboxes/macos-dock/src/components/Dock/DockContext.ts @@ -8,7 +8,11 @@ type DockApi = { setIsZooming: (isZooming: boolean) => void } -export const DockContext = createContext({ width: 0, hovered: false, setIsZooming: () => {} }) +export const DockContext = createContext({ + width: 0, + hovered: false, + setIsZooming: () => {}, +}) export const useDock = () => { return useContext(DockContext) diff --git a/demo/src/sandboxes/macos-dock/src/components/DockCard/index.tsx b/demo/src/sandboxes/macos-dock/src/components/DockCard/index.tsx index 099668db5d..90ec9e7246 100644 --- a/demo/src/sandboxes/macos-dock/src/components/DockCard/index.tsx +++ b/demo/src/sandboxes/macos-dock/src/components/DockCard/index.tsx @@ -1,5 +1,9 @@ import * as React from 'react' -import { animated, useIsomorphicLayoutEffect, useSpringValue } from '@react-spring/web' +import { + animated, + useIsomorphicLayoutEffect, + useSpringValue, +} from '@react-spring/web' import { useMousePosition } from '../hooks/useMousePosition' import { useWindowResize } from '../hooks/useWindowResize' @@ -50,7 +54,10 @@ export const DockCard = ({ children }: DockCardProps) => { if (dock.width > 0) { const transformedValue = - INITIAL_WIDTH + 36 * Math.cos((((mouseX - elCenterX) / dock.width) * Math.PI) / 2) ** 12 + INITIAL_WIDTH + + 36 * + Math.cos((((mouseX - elCenterX) / dock.width) * Math.PI) / 2) ** + 12 if (dock.hovered) { size.start(transformedValue) diff --git a/demo/src/sandboxes/macos-dock/src/components/hooks/useCallbackRef.ts b/demo/src/sandboxes/macos-dock/src/components/hooks/useCallbackRef.ts index 8939efe385..3d8dbdd3b1 100644 --- a/demo/src/sandboxes/macos-dock/src/components/hooks/useCallbackRef.ts +++ b/demo/src/sandboxes/macos-dock/src/components/hooks/useCallbackRef.ts @@ -4,7 +4,9 @@ import * as React from 'react' * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a * prop or avoid re-executing effects when passed as a dependency */ -function useCallbackRef any>(callback: T | undefined): T { +function useCallbackRef any>( + callback: T | undefined +): T { const callbackRef = React.useRef(callback) React.useEffect(() => { @@ -12,7 +14,10 @@ function useCallbackRef any>(callback: T | undefin }) // https://github.com/facebook/react/issues/19240 - return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []) + return React.useMemo( + () => ((...args) => callbackRef.current?.(...args)) as T, + [] + ) } export { useCallbackRef } diff --git a/demo/src/sandboxes/macos-dock/src/components/hooks/useMousePosition.ts b/demo/src/sandboxes/macos-dock/src/components/hooks/useMousePosition.ts index c17945c26a..ab6799947f 100644 --- a/demo/src/sandboxes/macos-dock/src/components/hooks/useMousePosition.ts +++ b/demo/src/sandboxes/macos-dock/src/components/hooks/useMousePosition.ts @@ -1,8 +1,14 @@ import { useSpring, UseSpringProps } from '@react-spring/web' import { useEffect, useMemo } from 'react' -export const useMousePosition = (springProps?: UseSpringProps, springDeps?: readonly any[]) => { - const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0, ...springProps }), springDeps) +export const useMousePosition = ( + springProps?: UseSpringProps, + springDeps?: readonly any[] +) => { + const [{ x, y }, api] = useSpring( + () => ({ x: 0, y: 0, ...springProps }), + springDeps + ) useEffect(() => { const handleMouseMove = (event: MouseEvent) => { diff --git a/demo/src/sandboxes/macos-dock/src/components/hooks/useWindowResize.ts b/demo/src/sandboxes/macos-dock/src/components/hooks/useWindowResize.ts index a207640417..15c15f737f 100644 --- a/demo/src/sandboxes/macos-dock/src/components/hooks/useWindowResize.ts +++ b/demo/src/sandboxes/macos-dock/src/components/hooks/useWindowResize.ts @@ -2,7 +2,9 @@ import * as React from 'react' import { useCallbackRef } from './useCallbackRef' -export const useWindowResize = (callback: (width: number, height: number) => void) => { +export const useWindowResize = ( + callback: (width: number, height: number) => void +) => { const callbackRef = useCallbackRef(callback) React.useEffect(() => { diff --git a/demo/src/sandboxes/masonry/.prettierrc b/demo/src/sandboxes/masonry/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/masonry/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/masonry/src/App.tsx b/demo/src/sandboxes/masonry/src/App.tsx index 35da18587f..2e0ed12f2b 100644 --- a/demo/src/sandboxes/masonry/src/App.tsx +++ b/demo/src/sandboxes/masonry/src/App.tsx @@ -10,7 +10,11 @@ import styles from './styles.module.css' function Masonry() { // Hook1: Tie media queries to the number of columns - const columns = useMedia(['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'], [5, 4, 3], 2) + const columns = useMedia( + ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'], + [5, 4, 3], + 2 + ) // Hook2: Measure the width of the container element const [ref, { width }] = useMeasure() // Hook3: Hold items @@ -27,7 +31,13 @@ function Masonry() { const column = heights.indexOf(Math.min(...heights)) // Basic masonry-grid placing, puts tile into the smallest column using Math.min const x = (width / columns) * column // x = container width / number of columns * column index, const y = (heights[column] += child.height / 2) - child.height / 2 // y = it's just the height of the current column - return { ...child, x, y, width: width / columns, height: child.height / 2 } + return { + ...child, + x, + y, + width: width / columns, + height: child.height / 2, + } }) return [heights, gridItems] }, [columns, items, width]) @@ -43,10 +53,18 @@ function Masonry() { }) // Render the grid return ( -
+
{transitions((style, item) => ( -
+
))}
diff --git a/demo/src/sandboxes/masonry/src/data.ts b/demo/src/sandboxes/masonry/src/data.ts index 46612c49e9..1edefec6e0 100644 --- a/demo/src/sandboxes/masonry/src/data.ts +++ b/demo/src/sandboxes/masonry/src/data.ts @@ -1,16 +1,58 @@ export default [ - { css: 'https://images.pexels.com/photos/416430/pexels-photo-416430.jpeg', height: 150 }, - { css: 'https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg', height: 300 }, - { css: 'https://images.pexels.com/photos/911738/pexels-photo-911738.jpeg', height: 300 }, - { css: 'https://images.pexels.com/photos/358574/pexels-photo-358574.jpeg', height: 300 }, - { css: 'https://images.pexels.com/photos/1738986/pexels-photo-1738986.jpeg', height: 300 }, - { css: 'https://images.pexels.com/photos/96381/pexels-photo-96381.jpeg', height: 300 }, - { css: 'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg', height: 200 }, - { css: 'https://images.pexels.com/photos/227675/pexels-photo-227675.jpeg', height: 300 }, - { css: 'https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg', height: 200 }, - { css: 'https://images.pexels.com/photos/327482/pexels-photo-327482.jpeg', height: 400 }, - { css: 'https://images.pexels.com/photos/2736834/pexels-photo-2736834.jpeg', height: 200 }, - { css: 'https://images.pexels.com/photos/249074/pexels-photo-249074.jpeg', height: 150 }, - { css: 'https://images.pexels.com/photos/310452/pexels-photo-310452.jpeg', height: 400 }, - { css: 'https://images.pexels.com/photos/380337/pexels-photo-380337.jpeg', height: 200 }, + { + css: 'https://images.pexels.com/photos/416430/pexels-photo-416430.jpeg', + height: 150, + }, + { + css: 'https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg', + height: 300, + }, + { + css: 'https://images.pexels.com/photos/911738/pexels-photo-911738.jpeg', + height: 300, + }, + { + css: 'https://images.pexels.com/photos/358574/pexels-photo-358574.jpeg', + height: 300, + }, + { + css: 'https://images.pexels.com/photos/1738986/pexels-photo-1738986.jpeg', + height: 300, + }, + { + css: 'https://images.pexels.com/photos/96381/pexels-photo-96381.jpeg', + height: 300, + }, + { + css: 'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg', + height: 200, + }, + { + css: 'https://images.pexels.com/photos/227675/pexels-photo-227675.jpeg', + height: 300, + }, + { + css: 'https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg', + height: 200, + }, + { + css: 'https://images.pexels.com/photos/327482/pexels-photo-327482.jpeg', + height: 400, + }, + { + css: 'https://images.pexels.com/photos/2736834/pexels-photo-2736834.jpeg', + height: 200, + }, + { + css: 'https://images.pexels.com/photos/249074/pexels-photo-249074.jpeg', + height: 150, + }, + { + css: 'https://images.pexels.com/photos/310452/pexels-photo-310452.jpeg', + height: 400, + }, + { + css: 'https://images.pexels.com/photos/380337/pexels-photo-380337.jpeg', + height: 200, + }, ] diff --git a/demo/src/sandboxes/masonry/src/useMedia.ts b/demo/src/sandboxes/masonry/src/useMedia.ts index 2bcbb10422..e3de8165a6 100644 --- a/demo/src/sandboxes/masonry/src/useMedia.ts +++ b/demo/src/sandboxes/masonry/src/useMedia.ts @@ -1,6 +1,10 @@ import { useCallback, useEffect, useState } from 'react' -export default function useMedia(queries: string[], values: number[], defaultValue: number) { +export default function useMedia( + queries: string[], + values: number[], + defaultValue: number +) { const match = useCallback( () => values[queries.findIndex(q => matchMedia(q).matches)] || defaultValue, [defaultValue, queries, values] diff --git a/demo/src/sandboxes/multistage-transition/.prettierrc b/demo/src/sandboxes/multistage-transition/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/multistage-transition/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/multistage-transition/src/App.tsx b/demo/src/sandboxes/multistage-transition/src/App.tsx index 5597b42d82..832b44b9c5 100644 --- a/demo/src/sandboxes/multistage-transition/src/App.tsx +++ b/demo/src/sandboxes/multistage-transition/src/App.tsx @@ -19,7 +19,11 @@ export default function App() { { transform: 'perspective(600px) rotateX(180deg)', color: '#28d79f' }, { transform: 'perspective(600px) rotateX(0deg)' }, ], - leave: [{ color: '#c23369' }, { innerHeight: 0 }, { opacity: 0, height: 0 }], + leave: [ + { color: '#c23369' }, + { innerHeight: 0 }, + { opacity: 0, height: 0 }, + ], update: { color: '#28b4d7' }, }) @@ -27,9 +31,13 @@ export default function App() { ref.current.forEach(clearTimeout) ref.current = [] set([]) - ref.current.push(setTimeout(() => set(['Apples', 'Oranges', 'Kiwis']), 2000)) + ref.current.push( + setTimeout(() => set(['Apples', 'Oranges', 'Kiwis']), 2000) + ) ref.current.push(setTimeout(() => set(['Apples', 'Kiwis']), 5000)) - ref.current.push(setTimeout(() => set(['Apples', 'Bananas', 'Kiwis']), 8000)) + ref.current.push( + setTimeout(() => set(['Apples', 'Bananas', 'Kiwis']), 8000) + ) }, []) useEffect(() => { @@ -41,8 +49,14 @@ export default function App() {
{transitions(({ innerHeight, ...rest }, item) => ( - - {item} + + + {item} + ))}
diff --git a/demo/src/sandboxes/noise/.prettierrc b/demo/src/sandboxes/noise/.prettierrc deleted file mode 100644 index dd400a7d96..0000000000 --- a/demo/src/sandboxes/noise/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "arrowParens": "avoid", - - "printWidth": 120, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/demo/src/sandboxes/noise/src/App.tsx b/demo/src/sandboxes/noise/src/App.tsx index d0a76ff2d6..0a05ea16b0 100644 --- a/demo/src/sandboxes/noise/src/App.tsx +++ b/demo/src/sandboxes/noise/src/App.tsx @@ -23,10 +23,32 @@ export default function App() { key => (phase === 'enter' && key === 'life' ? { duration: timeout } : config), + config: (item, index, phase) => key => + phase === 'enter' && key === 'life' ? { duration: timeout } : config, }) React.useEffect(() => { @@ -67,7 +68,8 @@ function MessageHub({