From 94c836a3740965f70de874f1559bc8d1ca7c87f1 Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Tue, 19 Sep 2017 12:00:05 +0300 Subject: [PATCH] fix(Visibility): fire on window resize, fix behaviour of reverse calls --- .../behaviors/Visibility/Settings/index.js | 36 +++++----- .../behaviors/Visibility/Types/index.js | 10 +-- src/behaviors/Visibility/Visibility.js | 71 +++++++++---------- 3 files changed, 56 insertions(+), 61 deletions(-) diff --git a/docs/app/Examples/behaviors/Visibility/Settings/index.js b/docs/app/Examples/behaviors/Visibility/Settings/index.js index 7c21456f3a..d3038c8c18 100644 --- a/docs/app/Examples/behaviors/Visibility/Settings/index.js +++ b/docs/app/Examples/behaviors/Visibility/Settings/index.js @@ -5,29 +5,29 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' const VisibilitySettingsExamples = () => ( - - + {/**/} + {/**/} - + {/**/} ) diff --git a/docs/app/Examples/behaviors/Visibility/Types/index.js b/docs/app/Examples/behaviors/Visibility/Types/index.js index 52ff021199..96505585a0 100644 --- a/docs/app/Examples/behaviors/Visibility/Types/index.js +++ b/docs/app/Examples/behaviors/Visibility/Types/index.js @@ -5,11 +5,11 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' const VisibilityTypesExamples = () => ( - + {/**/} ) diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js index eeab312af5..e276f42c37 100644 --- a/src/behaviors/Visibility/Visibility.js +++ b/src/behaviors/Visibility/Visibility.js @@ -181,11 +181,11 @@ export default class Visibility extends Component { offScreen: false, } - firedCallbacks = [] + occuredCallbacks = [] componentWillReceiveProps({ continuous, once }) { const cleanOut = continuous !== this.props.continuous || once !== this.props.once - if (cleanOut) this.firedCallbacks = [] + if (cleanOut) this.occuredCallbacks = [] } componentDidMount() { @@ -193,6 +193,7 @@ export default class Visibility extends Component { const { context, fireOnMount } = this.props + context.addEventListener('resize', this.handleScroll) context.addEventListener('scroll', this.handleScroll) if (fireOnMount) this.handleUpdate() } @@ -201,36 +202,28 @@ export default class Visibility extends Component { if (!isBrowser) return const { context } = this.props + context.removeEventListener('resize', this.handleScroll) context.removeEventListener('scroll', this.handleScroll) } - execute = (callback, name) => { - const { continuous, once } = this.props + fire(callback, name, reverse = false) { + const { once } = this.props + const callbackName = reverse ? `${name}Reverse` : name + const calculation = this.calculations[name] - if (!callback) return - // Reverse callbacks aren't fired continuously - if (this.calculations[name] === false) return - - // Always fire callback if continuous = true - if (continuous) { - callback(null, { ...this.props, calculations: this.calculations }) - return - } + if(calculation !== reverse && calculation !== this.oldCalculations[name]) this.execute(callback, callbackName) + if(!once) this.occuredCallbacks = _.without(this.occuredCallbacks, callbackName) + } - // If once = true, fire callback only if it wasn't fired before - if (once) { - if (!_.includes(this.firedCallbacks, name)) { - this.firedCallbacks.push(name) - callback(null, { ...this.props, calculations: this.calculations }) - } + execute(callback, name) { + const { continuous } = this.props + if (!callback) return - return - } + // Heads up! When `continuous` is true, callback will be fired always + if (!continuous && _.includes(this.occuredCallbacks, name)) return - // Fire callback only if the value changed - if (this.calculations[name] !== this.oldCalculations[name]) { - callback(null, { ...this.props, calculations: this.calculations }) - } + callback(null, { ...this.props, calculations: this.calculations }) + this.occuredCallbacks.push(name) } fireCallbacks() { @@ -249,27 +242,27 @@ export default class Visibility extends Component { onOnScreen, } = this.props const callbacks = { - bottomPassed: onBottomPassed, - bottomVisible: onBottomVisible, - passing: onPassing, - offScreen: onOffScreen, - onScreen: onOnScreen, + // bottomPassed: onBottomPassed, + // bottomVisible: onBottomVisible, + // passing: onPassing, + // offScreen: onOffScreen, + // onScreen: onOnScreen, topPassed: onTopPassed, - topVisible: onTopVisible, + // topVisible: onTopVisible, } const reverse = { - bottomPassed: onBottomPassedReverse, - bottomVisible: onBottomVisibleReverse, - passing: onPassingReverse, + // bottomPassed: onBottomPassedReverse, + // bottomVisible: onBottomVisibleReverse, + // passing: onPassingReverse, topPassed: onTopPassedReverse, - topVisible: onTopVisibleReverse, + // topVisible: onTopVisibleReverse, } _.invoke(this.props, 'onUpdate', null, { ...this.props, calculations: this.calculations }) this.fireOnPassed() - _.forEach(callbacks, (callback, name) => this.execute(callback, name)) - _.forEach(reverse, (callback, name) => this.execute(callback, name)) + _.forEach(reverse, (callback, name) => this.fire(callback, name, true)) + _.forEach(callbacks, (callback, name) => this.fire(callback, name)) } fireOnPassed = () => { @@ -310,7 +303,7 @@ export default class Visibility extends Component { const topPassed = top < topOffset const bottomPassed = bottom < bottomOffset - +console.log(topPassed) const pixelsPassed = bottomPassed ? 0 : Math.max(top * -1, 0) const percentagePassed = pixelsPassed / height @@ -323,6 +316,8 @@ export default class Visibility extends Component { const onScreen = (topVisible || topPassed) && !bottomPassed const offScreen = !onScreen + /* TODO: DIRECTION */ + this.oldCalculations = this.calculations this.calculations = { bottomPassed,