From 50594c537c3d31b821c74cd7c92795d7b43f4bdd Mon Sep 17 00:00:00 2001 From: Narikawa <38754367+TakaoNarikawa@users.noreply.github.com> Date: Mon, 13 Sep 2021 14:34:18 +0900 Subject: [PATCH 1/3] update --- README.md | 25 +++++++++++++++---------- lib/index.js | 14 +++++++------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 8b3fcfb..b077485 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,10 @@ # React Native Animated Multistep +## Fork 変更内容 + +- Props の `duration` が効かないので `durations` へ名称変更 + - おそらく `Animatable.createAnimatableComponent` が `duration` Props を許可していない + ## Preview ![GIF](previews/1.gif) @@ -34,7 +39,7 @@ const allSteps = [ { name: "step 1", component: Step1 }, { name: "step 2", component: Step2 }, { name: "step 3", component: Step3 }, - { name: "step 4", component: Step4 } + { name: "step 4", component: Step4 }, ]; /* Define your class */ @@ -53,7 +58,7 @@ export default class App extends Component { /* define the method to be called when the wizard is finished */ - finish = finalState => { + finish = (finalState) => { console.log(finalState); }; @@ -90,15 +95,15 @@ class step1 extends Component { super(props); this.state = { totalSteps: "", - currentStep: "" + currentStep: "", }; } - static getDerivedStateFromProps = props => { + static getDerivedStateFromProps = (props) => { const { getTotalSteps, getCurrentStep } = props; return { totalSteps: getTotalSteps(), - currentStep: getCurrentStep() + currentStep: getCurrentStep(), }; }; @@ -128,14 +133,14 @@ class step1 extends Component { this.setState({ text })} + onChangeText={(text) => this.setState({ text })} value={this.state.text} placeholder={"First Name"} placeholderTextColor="#fff" /> this.setState({ text })} + onChangeText={(text) => this.setState({ text })} value={this.state.text} placeholder={"Last Name"} placeholderTextColor="#fff" @@ -199,8 +204,8 @@ Use this method to get total steps. | OutOnNext | `String` | define you animation type when the component goes out on next, default is `fadeOutRight` | ❌ | | comeInOnBack | `String` | define you animation type when the component comes in on back, default is `fadeInRight` | ❌ | | OutOnBack | `String` | define you animation type when the component goes out on next, default is `fadeOutLeft` | ❌ | -| duration | `number` | define you animation duration `duration` | ❌ | -| defaultState | `Object` | define your default state to use across the steps, default is `empty` | ❌ | +| duration | `number` | define you animation duration `duration` | ❌ | +| defaultState | `Object` | define your default state to use across the steps, default is `empty` | ❌ | ### Note: @@ -213,7 +218,7 @@ you can add more animation and set-up animations by your own, check [react-nativ | `next()` | `none` | use this method to jump on next step | | `back()` | `none` | use this method to go back on previous step | | `saveState()` | `Object` | use this method to save your state, in order to get in other steps | -| `resetState()` | `none` | use this method to for reset state | +| `resetState()` | `none` | use this method to for reset state | | `getState()` | `none` | use this method to get you saved state by `saveState()` method | | `getCurrentStep()` | `none` | use this method to get current step | | `getTotalSteps()` | `none` | use this method to get total steps | diff --git a/lib/index.js b/lib/index.js index 6ba8026..80ee4e6 100644 --- a/lib/index.js +++ b/lib/index.js @@ -54,7 +54,7 @@ export class AnimatedMultistep extends Component { const { animate = true, OutOnNext = defaultOutOnNext, - duration = 1000, + durations = 1000, } = this.props; if (currentStep !== totalSteps) { this.onNext(); @@ -62,7 +62,7 @@ export class AnimatedMultistep extends Component { if (animate) { setTimeout(() => { this.setState({ currentStep: currentStep + 1 }); - }, duration); + }, durations); } } else { this.finish(); @@ -74,7 +74,7 @@ export class AnimatedMultistep extends Component { const { animate = true, OutOnBack = defaultOutOnBack, - duration = 1000, + durations = 1000, } = this.props; if (currentStep !== 0) { this.onBack(); @@ -82,7 +82,7 @@ export class AnimatedMultistep extends Component { if (animate) { setTimeout(() => { this.setState({ currentStep: currentStep - 1 }); - }, duration); + }, durations); } } }; @@ -157,7 +157,7 @@ export class AnimatedMultistep extends Component { }; render() { - const { steps = 0, duration = 1000 } = this.props; + const { steps = 0, durations = 1000 } = this.props; const { currentStep, action } = this.state; const Step = steps[currentStep].component; return ( @@ -166,7 +166,7 @@ export class AnimatedMultistep extends Component { animation={action} onAnimationEnd={this.animationEnd} style={{ flex: 1 }} - duration={duration} + durations={durations} > Date: Mon, 13 Sep 2021 14:38:47 +0900 Subject: [PATCH 2/3] Update index.js --- lib/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/index.js b/lib/index.js index 80ee4e6..85cfea7 100644 --- a/lib/index.js +++ b/lib/index.js @@ -166,7 +166,7 @@ export class AnimatedMultistep extends Component { animation={action} onAnimationEnd={this.animationEnd} style={{ flex: 1 }} - durations={durations} + duration={durations} > Date: Wed, 29 Dec 2021 10:49:23 +0900 Subject: [PATCH 3/3] Update index.js --- lib/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/index.js b/lib/index.js index 85cfea7..4a8d1a9 100644 --- a/lib/index.js +++ b/lib/index.js @@ -34,7 +34,7 @@ export class AnimatedMultistep extends Component { constructor(props) { super(props); this.state = { - currentStep: 0, + currentStep: props.initialStep ?? 0, totalSteps: 0, userState: props.defaultState || {}, action: "fadeInLeft", @@ -193,6 +193,7 @@ AnimatedMultistep.propTypes = { OutOnBack: PropTypes.string, durations: PropTypes.number, defaultState: PropTypes.object, + initialStep: PropTypes.number, }; export default Animatable.createAnimatableComponent(AnimatedMultistep);