From f5d79fc2039318f8f4e159f08a12009c4717327e Mon Sep 17 00:00:00 2001 From: ghana Date: Sun, 2 May 2021 21:22:01 +0530 Subject: [PATCH] Fixing Transition state update bug --- docs/js/components/DemoControl.js | 64 ++++++++++++--------- docs/js/pages/Home.js | 70 ++++++++++++----------- docs/js/pages/HorizontalFlow.js | 63 ++++++++++---------- src/animations/request-animation-frame.js | 11 ++-- 4 files changed, 111 insertions(+), 97 deletions(-) diff --git a/docs/js/components/DemoControl.js b/docs/js/components/DemoControl.js index 83598d9..26a6b66 100644 --- a/docs/js/components/DemoControl.js +++ b/docs/js/components/DemoControl.js @@ -1,60 +1,58 @@ /* eslint-disable react/prop-types */ /* eslint-disable import/no-extraneous-dependencies */ -import React, { Component } from 'react'; -import Slider from 'rc-slider'; -import { easings, transitions } from '../../../src/'; +import React, { Component } from "react"; +import Slider from "rc-slider"; +import { easings, transitions } from "../../../src/"; -const selectEasingOptions = Object.keys(easings).map(k => ({ +const selectEasingOptions = Object.keys(easings).map((k) => ({ label: k, value: easings[k], })); -const selectTransitionOptions = Object.keys(transitions).map(k => ({ +const selectTransitionOptions = Object.keys(transitions).map((k) => ({ label: k, value: k, })); - - export default class DemoControl extends Component { handleShuffle = () => { this.props.onShuffle(); - } + }; handlePrepend = () => { this.props.onPrepend(); - } + }; handleAppend = () => { this.props.onAppend(); - } + }; handleMultipleAppend = () => { this.props.onMultipleAppend(); - } + }; handleDurationChange = (value) => { this.props.onDurationChange(value); - } + }; handleColumnWidthChange = (value) => { this.props.onColumnWidthChange(value); - } + }; handleGutterChange = (value) => { this.props.onGutterChange(value); - } + }; handleEasingChange = (e) => { this.props.onEasingChange(e.target.value); - } + }; handleTransitionChange = (e) => { this.props.onTransitionChange(e.target.value); - } + }; handleRTLChange = (e) => { this.props.onRTLChange(e.target.checked); - } + }; render() { const { @@ -69,21 +67,29 @@ export default class DemoControl extends Component { return (
- +
- +
- +
- +
@@ -123,18 +129,22 @@ export default class DemoControl extends Component {
diff --git a/docs/js/pages/Home.js b/docs/js/pages/Home.js index d245f52..b354e1f 100644 --- a/docs/js/pages/Home.js +++ b/docs/js/pages/Home.js @@ -2,20 +2,20 @@ /* eslint-disable react/prop-types */ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import React, { Component } from 'react'; -import StackGrid, { transitions, easings } from '../../../src/'; -import DemoControl from '../components/DemoControl'; +import React, { Component } from "react"; +import StackGrid, { transitions, easings } from "../../../src/"; +import DemoControl from "../components/DemoControl"; const itemModifier = [ - 'pattern1', - 'pattern2', - 'pattern3', - 'gray', - 'gray-light', - 'gray-dark', - 'yellow', - 'pink', - 'purple', + "pattern1", + "pattern2", + "pattern3", + "gray", + "gray-light", + "gray-dark", + "yellow", + "pink", + "purple", ]; export default class Home extends Component { @@ -34,15 +34,16 @@ export default class Home extends Component { columnWidth: 150, gutter: 5, easing: easings.quartOut, - transition: 'fadeDown', + transition: "fadeDown", rtl: false, }; } createItem() { const id = Math.random().toString(36).substr(2, 9); - const height = Math.floor((Math.random() * (300 - 80)) + 80); - const modifier = itemModifier[Math.floor(Math.random() * itemModifier.length)]; + const height = Math.floor(Math.random() * (300 - 80) + 80); + const modifier = + itemModifier[Math.floor(Math.random() * itemModifier.length)]; return { id, height, modifier }; } @@ -59,19 +60,19 @@ export default class Home extends Component { } this.setState({ items: newItems }); - } + }; prependItem = () => { this.setState({ items: [this.createItem(), ...this.state.items], }); - } + }; appendItem = () => { this.setState({ items: [...this.state.items, this.createItem()], }); - } + }; multipleAppendItem = () => { const newItems = []; @@ -83,37 +84,39 @@ export default class Home extends Component { this.setState({ items: [...this.state.items, ...newItems], }); - } + }; removeItem = (id) => { this.setState({ - items: this.state.items.filter(o => o.id !== id), + items: this.state.items.filter((o) => o.id !== id), }); - } + }; handleDurationChange = (duration) => { this.setState({ duration }); - } + }; handleColumnWidthChange = (columnWidth) => { this.setState({ columnWidth }); - } + }; handleGutterChange = (gutter) => { this.setState({ gutter }); - } + }; handleEasingChange = (easing) => { this.setState({ easing }); - } + }; handleTransitionChange = (transition) => { + this.setState({ transition }); - } + + }; handleRTLChange = (rtl) => { this.setState({ rtl }); - } + }; render() { const { @@ -122,11 +125,10 @@ export default class Home extends Component { columnWidth, gutter, easing, - transition: transitionSelect, + transition, rtl, } = this.state; - const transition = transitions[transitionSelect]; return (
{ - console.log('[DEMO] `onLayout()` has been called.'); // eslint-disable-line + // eslint-disable-line }} > - {items.map(item => - (
( +
this.removeItem(item.id)} - />) - )} + /> + ))}
); diff --git a/docs/js/pages/HorizontalFlow.js b/docs/js/pages/HorizontalFlow.js index 5a3b73f..2020fd1 100644 --- a/docs/js/pages/HorizontalFlow.js +++ b/docs/js/pages/HorizontalFlow.js @@ -2,20 +2,20 @@ /* eslint-disable react/prop-types */ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import React, { Component } from 'react'; -import StackGrid, { transitions, easings } from '../../../src/'; -import DemoControl from '../components/DemoControl'; +import React, { Component } from "react"; +import StackGrid, { transitions, easings } from "../../../src/"; +import DemoControl from "../components/DemoControl"; const itemModifier = [ - 'pattern1', - 'pattern2', - 'pattern3', - 'gray', - 'gray-light', - 'gray-dark', - 'yellow', - 'pink', - 'purple', + "pattern1", + "pattern2", + "pattern3", + "gray", + "gray-light", + "gray-dark", + "yellow", + "pink", + "purple", ]; export default class HorizontalFlow extends Component { @@ -34,14 +34,15 @@ export default class HorizontalFlow extends Component { columnWidth: 150, gutter: 5, easing: easings.quartOut, - transition: 'fadeDown', + transition: "fadeDown", }; } createItem() { const id = Math.random().toString(36).substr(2, 9); - const height = Math.floor((Math.random() * (300 - 80)) + 80); - const modifier = itemModifier[Math.floor(Math.random() * itemModifier.length)]; + const height = Math.floor(Math.random() * (300 - 80) + 80); + const modifier = + itemModifier[Math.floor(Math.random() * itemModifier.length)]; return { id, height, modifier }; } @@ -58,19 +59,19 @@ export default class HorizontalFlow extends Component { } this.setState({ items: newItems }); - } + }; prependItem = () => { this.setState({ items: [this.createItem(), ...this.state.items], }); - } + }; appendItem = () => { this.setState({ items: [...this.state.items, this.createItem()], }); - } + }; multipleAppendItem = () => { const newItems = []; @@ -82,33 +83,33 @@ export default class HorizontalFlow extends Component { this.setState({ items: [...this.state.items, ...newItems], }); - } + }; removeItem = (id) => { this.setState({ - items: this.state.items.filter(o => o.id !== id), + items: this.state.items.filter((o) => o.id !== id), }); - } + }; handleDurationChange = (duration) => { this.setState({ duration }); - } + }; handleColumnWidthChange = (columnWidth) => { this.setState({ columnWidth }); - } + }; handleGutterChange = (gutter) => { this.setState({ gutter }); - } + }; handleEasingChange = (easing) => { this.setState({ easing }); - } + }; handleTransitionChange = (transition) => { this.setState({ transition }); - } + }; render() { const { @@ -154,17 +155,17 @@ export default class HorizontalFlow extends Component { entered={transition.entered} leaved={transition.leaved} onLayout={() => { - console.log('[DEMO] `onLayout()` has been called.'); // eslint-disable-line + console.log("[DEMO] `onLayout()` has been called."); // eslint-disable-line }} > - {items.map(item => - (
( +
this.removeItem(item.id)} - />) - )} + /> + ))}
); diff --git a/src/animations/request-animation-frame.js b/src/animations/request-animation-frame.js index bdf0ac2..2746a76 100644 --- a/src/animations/request-animation-frame.js +++ b/src/animations/request-animation-frame.js @@ -1,7 +1,7 @@ // @flow -import ExecutionEnvironment from 'exenv'; +import ExecutionEnvironment from "exenv"; -const vendors = ['ms', 'moz', 'webkit']; +const vendors = ["ms", "moz", "webkit"]; let tmpRaf = null; let tmpCaf = null; @@ -12,12 +12,13 @@ if (ExecutionEnvironment.canUseDOM) { // eslint-disable-next-line no-plusplus for (let x = 0; x < vendors.length && !tmpRaf; ++x) { tmpRaf = window[`${vendors[x]}RequestAnimationFrame`]; - tmpCaf = window[`${vendors[x]}CancelAnimationFrame`] || + tmpCaf = + window[`${vendors[x]}CancelAnimationFrame`] || window[`${vendors[x]}CancelRequestAnimationFrame`]; } } else { - tmpRaf = (callback: Function): number => callback(); - tmpCaf = (id: number): void => {}; // eslint-disable-line no-unused-vars + tmpRaf = (callback) => callback(); + tmpCaf = (id) => {}; // eslint-disable-line no-unused-vars } export const raf = tmpRaf;