Comparing version 1.1.1 to 1.1.2
import * as React from 'react'; | ||
import { MotionStatus, MotionEventHandler, MotionEndEventHandler } from './interface'; | ||
import { MotionEventHandler, MotionEndEventHandler, MotionStatus } from './interface'; | ||
export declare type CSSMotionConfig = boolean | { | ||
transitionSupport?: boolean; | ||
/** @deprecated, no need this anymore since `rc-motion` only support latest react */ | ||
forwardRef?: boolean; | ||
@@ -41,3 +40,3 @@ }; | ||
[key: string]: any; | ||
}, ref: (node: any) => void) => React.ReactElement; | ||
}, ref: (node: any) => void) => React.ReactNode; | ||
} | ||
@@ -55,8 +54,4 @@ export interface CSSMotionState { | ||
*/ | ||
export declare function genCSSMotion(config: CSSMotionConfig): React.ForwardRefExoticComponent<CSSMotionProps & { | ||
ref?: React.Ref<any>; | ||
}>; | ||
declare const _default: React.ForwardRefExoticComponent<CSSMotionProps & { | ||
ref?: React.Ref<any>; | ||
}>; | ||
export declare function genCSSMotion(config: CSSMotionConfig): React.ForwardRefExoticComponent<CSSMotionProps>; | ||
declare const _default: React.ForwardRefExoticComponent<CSSMotionProps>; | ||
export default _default; |
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray"; | ||
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck"; | ||
import _createClass from "@babel/runtime/helpers/esm/createClass"; | ||
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized"; | ||
import _inherits from "@babel/runtime/helpers/esm/inherits"; | ||
import _createSuper from "@babel/runtime/helpers/esm/createSuper"; | ||
import _typeof from "@babel/runtime/helpers/esm/typeof"; | ||
@@ -8,10 +12,8 @@ | ||
import * as React from 'react'; | ||
import { useRef } from 'react'; | ||
import findDOMNode from "rc-util/es/Dom/findDOMNode"; | ||
import { fillRef } from "rc-util/es/ref"; | ||
import classNames from 'classnames'; | ||
import { getTransitionName, supportTransition } from './util/motion'; | ||
import { STATUS_NONE } from './interface'; | ||
import useStatus from './hooks/useStatus'; | ||
import DomWrapper from './DomWrapper'; | ||
import raf from 'raf'; | ||
import { getTransitionName, animationEndName, transitionEndName, supportTransition } from './util/motion'; | ||
import { STATUS_NONE, STATUS_APPEAR, STATUS_ENTER, STATUS_LEAVE } from './interface'; | ||
/** | ||
@@ -24,5 +26,7 @@ * `transitionSupport` is used for none transition test case. | ||
var transitionSupport = config; | ||
var forwardRef = !!React.forwardRef; | ||
if (_typeof(config) === 'object') { | ||
transitionSupport = config.transitionSupport; | ||
forwardRef = 'forwardRef' in config ? config.forwardRef : forwardRef; | ||
} | ||
@@ -34,65 +38,310 @@ | ||
var CSSMotion = React.forwardRef(function (props, ref) { | ||
var _classNames; | ||
var CSSMotion = /*#__PURE__*/function (_React$Component) { | ||
_inherits(CSSMotion, _React$Component); | ||
var _props$visible = props.visible, | ||
visible = _props$visible === void 0 ? true : _props$visible, | ||
_props$removeOnLeave = props.removeOnLeave, | ||
removeOnLeave = _props$removeOnLeave === void 0 ? true : _props$removeOnLeave, | ||
children = props.children, | ||
motionName = props.motionName, | ||
leavedClassName = props.leavedClassName, | ||
eventProps = props.eventProps; | ||
var supportMotion = isSupportTransition(props); // Ref to the react node, it may be a HTMLElement | ||
var _super = _createSuper(CSSMotion); | ||
var nodeRef = useRef(); // Ref to the dom wrapper in case ref can not pass to HTMLElement | ||
function CSSMotion() { | ||
var _this; | ||
var wrapperNodeRef = useRef(); | ||
_classCallCheck(this, CSSMotion); | ||
function getDomElement() { | ||
try { | ||
return findDOMNode(nodeRef.current || wrapperNodeRef.current); | ||
} catch (e) { | ||
// Only happen when `motionDeadline` trigger but element removed. | ||
return null; | ||
} | ||
} | ||
_this = _super.apply(this, arguments); | ||
_this.$cacheEle = null; | ||
_this.node = null; | ||
_this.raf = null; | ||
_this.destroyed = false; | ||
_this.deadlineId = null; | ||
_this.state = { | ||
status: STATUS_NONE, | ||
statusActive: false, | ||
newStatus: false, | ||
statusStyle: null | ||
}; | ||
var _useStatus = useStatus(supportMotion, visible, getDomElement, props), | ||
_useStatus2 = _slicedToArray(_useStatus, 3), | ||
status = _useStatus2[0], | ||
statusActive = _useStatus2[1], | ||
statusStyle = _useStatus2[2]; | ||
_this.onDomUpdate = function () { | ||
var _this$state = _this.state, | ||
status = _this$state.status, | ||
newStatus = _this$state.newStatus; | ||
var _this$props = _this.props, | ||
onAppearStart = _this$props.onAppearStart, | ||
onEnterStart = _this$props.onEnterStart, | ||
onLeaveStart = _this$props.onLeaveStart, | ||
onAppearActive = _this$props.onAppearActive, | ||
onEnterActive = _this$props.onEnterActive, | ||
onLeaveActive = _this$props.onLeaveActive, | ||
motionAppear = _this$props.motionAppear, | ||
motionEnter = _this$props.motionEnter, | ||
motionLeave = _this$props.motionLeave; | ||
var setNodeRef = function setNodeRef(node) { | ||
nodeRef.current = node; | ||
fillRef(ref, node); | ||
}; | ||
if (!isSupportTransition(_this.props)) { | ||
return; | ||
} // Event injection | ||
if (!children) return null; | ||
if (status === STATUS_NONE || !isSupportTransition(props)) { | ||
if (visible) { | ||
return children(_objectSpread({}, eventProps), setNodeRef); | ||
var $ele = _this.getElement(); | ||
if (_this.$cacheEle !== $ele) { | ||
_this.removeEventListener(_this.$cacheEle); | ||
_this.addEventListener($ele); | ||
_this.$cacheEle = $ele; | ||
} // Init status | ||
if (newStatus && status === STATUS_APPEAR && motionAppear) { | ||
_this.updateStatus(onAppearStart, null, null, function () { | ||
_this.updateActiveStatus(onAppearActive, STATUS_APPEAR); | ||
}); | ||
} else if (newStatus && status === STATUS_ENTER && motionEnter) { | ||
_this.updateStatus(onEnterStart, null, null, function () { | ||
_this.updateActiveStatus(onEnterActive, STATUS_ENTER); | ||
}); | ||
} else if (newStatus && status === STATUS_LEAVE && motionLeave) { | ||
_this.updateStatus(onLeaveStart, null, null, function () { | ||
_this.updateActiveStatus(onLeaveActive, STATUS_LEAVE); | ||
}); | ||
} | ||
}; | ||
_this.onMotionEnd = function (event) { | ||
if (event && !event.deadline && event.target !== _this.getElement()) { | ||
// event exists | ||
// not initiated by deadline | ||
// transitionend not fired by inner elements | ||
return; | ||
} | ||
var _this$state2 = _this.state, | ||
status = _this$state2.status, | ||
statusActive = _this$state2.statusActive; | ||
var _this$props2 = _this.props, | ||
onAppearEnd = _this$props2.onAppearEnd, | ||
onEnterEnd = _this$props2.onEnterEnd, | ||
onLeaveEnd = _this$props2.onLeaveEnd; | ||
if (status === STATUS_APPEAR && statusActive) { | ||
_this.updateStatus(onAppearEnd, { | ||
status: STATUS_NONE | ||
}, event); | ||
} else if (status === STATUS_ENTER && statusActive) { | ||
_this.updateStatus(onEnterEnd, { | ||
status: STATUS_NONE | ||
}, event); | ||
} else if (status === STATUS_LEAVE && statusActive) { | ||
_this.updateStatus(onLeaveEnd, { | ||
status: STATUS_NONE | ||
}, event); | ||
} | ||
}; | ||
_this.setNodeRef = function (node) { | ||
var internalRef = _this.props.internalRef; | ||
_this.node = node; | ||
fillRef(internalRef, node); | ||
}; | ||
_this.getElement = function () { | ||
try { | ||
return findDOMNode(_this.node || _assertThisInitialized(_this)); | ||
} catch (e) { | ||
/** | ||
* Fallback to cache element. | ||
* This is only happen when `motionDeadline` trigger but element removed. | ||
*/ | ||
return _this.$cacheEle; | ||
} | ||
}; | ||
_this.addEventListener = function ($ele) { | ||
if (!$ele) return; | ||
$ele.addEventListener(transitionEndName, _this.onMotionEnd); | ||
$ele.addEventListener(animationEndName, _this.onMotionEnd); | ||
}; | ||
_this.removeEventListener = function ($ele) { | ||
if (!$ele) return; | ||
$ele.removeEventListener(transitionEndName, _this.onMotionEnd); | ||
$ele.removeEventListener(animationEndName, _this.onMotionEnd); | ||
}; | ||
_this.updateStatus = function (styleFunc, additionalState, event, callback) { | ||
var statusStyle = styleFunc ? styleFunc(_this.getElement(), event) : null; | ||
if (statusStyle === false || _this.destroyed) return; | ||
var nextStep; | ||
if (callback) { | ||
nextStep = function nextStep() { | ||
_this.nextFrame(callback); | ||
}; | ||
} | ||
_this.setState(_objectSpread({ | ||
statusStyle: _typeof(statusStyle) === 'object' ? statusStyle : null, | ||
newStatus: false | ||
}, additionalState), nextStep); // Trigger before next frame & after `componentDidMount` | ||
}; | ||
_this.updateActiveStatus = function (styleFunc, currentStatus) { | ||
// `setState` use `postMessage` to trigger at the end of frame. | ||
// Let's use requestAnimationFrame to update new state in next frame. | ||
_this.nextFrame(function () { | ||
var status = _this.state.status; | ||
if (status !== currentStatus) return; | ||
var motionDeadline = _this.props.motionDeadline; | ||
_this.updateStatus(styleFunc, { | ||
statusActive: true | ||
}); | ||
if (motionDeadline > 0) { | ||
_this.deadlineId = setTimeout(function () { | ||
_this.onMotionEnd({ | ||
deadline: true | ||
}); | ||
}, motionDeadline); | ||
} | ||
}); | ||
}; | ||
_this.nextFrame = function (func) { | ||
_this.cancelNextFrame(); | ||
_this.raf = raf(func); | ||
}; | ||
_this.cancelNextFrame = function () { | ||
if (_this.raf) { | ||
raf.cancel(_this.raf); | ||
_this.raf = null; | ||
} | ||
}; | ||
return _this; | ||
} | ||
_createClass(CSSMotion, [{ | ||
key: "componentDidMount", | ||
value: function componentDidMount() { | ||
this.onDomUpdate(); | ||
} | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate() { | ||
this.onDomUpdate(); | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
this.destroyed = true; | ||
this.removeEventListener(this.$cacheEle); | ||
this.cancelNextFrame(); | ||
clearTimeout(this.deadlineId); | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _classNames; | ||
if (!removeOnLeave) { | ||
var _this$state3 = this.state, | ||
status = _this$state3.status, | ||
statusActive = _this$state3.statusActive, | ||
statusStyle = _this$state3.statusStyle; | ||
var _this$props3 = this.props, | ||
children = _this$props3.children, | ||
motionName = _this$props3.motionName, | ||
visible = _this$props3.visible, | ||
removeOnLeave = _this$props3.removeOnLeave, | ||
leavedClassName = _this$props3.leavedClassName, | ||
eventProps = _this$props3.eventProps; | ||
if (!children) return null; | ||
if (status === STATUS_NONE || !isSupportTransition(this.props)) { | ||
if (visible) { | ||
return children(_objectSpread({}, eventProps), this.setNodeRef); | ||
} | ||
if (!removeOnLeave) { | ||
return children(_objectSpread(_objectSpread({}, eventProps), {}, { | ||
className: leavedClassName | ||
}), this.setNodeRef); | ||
} | ||
return null; | ||
} | ||
return children(_objectSpread(_objectSpread({}, eventProps), {}, { | ||
className: leavedClassName | ||
}), setNodeRef); | ||
className: classNames(getTransitionName(motionName, status), (_classNames = {}, _defineProperty(_classNames, getTransitionName(motionName, "".concat(status, "-active")), statusActive), _defineProperty(_classNames, motionName, typeof motionName === 'string'), _classNames)), | ||
style: statusStyle | ||
}), this.setNodeRef); | ||
} | ||
}], [{ | ||
key: "getDerivedStateFromProps", | ||
value: function getDerivedStateFromProps(props, _ref) { | ||
var prevProps = _ref.prevProps, | ||
prevStatus = _ref.status; | ||
if (!isSupportTransition(props)) return {}; | ||
var visible = props.visible, | ||
motionAppear = props.motionAppear, | ||
motionEnter = props.motionEnter, | ||
motionLeave = props.motionLeave, | ||
motionLeaveImmediately = props.motionLeaveImmediately; | ||
var newState = { | ||
prevProps: props | ||
}; // Clean up status if prop set to false | ||
return null; | ||
} | ||
if (prevStatus === STATUS_APPEAR && !motionAppear || prevStatus === STATUS_ENTER && !motionEnter || prevStatus === STATUS_LEAVE && !motionLeave) { | ||
newState.status = STATUS_NONE; | ||
newState.statusActive = false; | ||
newState.newStatus = false; | ||
} // Appear | ||
return React.createElement(DomWrapper, { | ||
ref: wrapperNodeRef | ||
}, children(_objectSpread(_objectSpread({}, eventProps), {}, { | ||
className: classNames(getTransitionName(motionName, status), (_classNames = {}, _defineProperty(_classNames, getTransitionName(motionName, "".concat(status, "-active")), statusActive), _defineProperty(_classNames, motionName, typeof motionName === 'string'), _classNames)), | ||
style: statusStyle | ||
}), setNodeRef)); | ||
if (!prevProps && visible && motionAppear) { | ||
newState.status = STATUS_APPEAR; | ||
newState.statusActive = false; | ||
newState.newStatus = true; | ||
} // Enter | ||
if (prevProps && !prevProps.visible && visible && motionEnter) { | ||
newState.status = STATUS_ENTER; | ||
newState.statusActive = false; | ||
newState.newStatus = true; | ||
} // Leave | ||
if (prevProps && prevProps.visible && !visible && motionLeave || !prevProps && motionLeaveImmediately && !visible && motionLeave) { | ||
newState.status = STATUS_LEAVE; | ||
newState.statusActive = false; | ||
newState.newStatus = true; | ||
} | ||
return newState; | ||
} | ||
}]); | ||
return CSSMotion; | ||
}(React.Component); | ||
CSSMotion.defaultProps = { | ||
visible: true, | ||
motionEnter: true, | ||
motionAppear: true, | ||
motionLeave: true, | ||
removeOnLeave: true | ||
}; | ||
if (!forwardRef) { | ||
return CSSMotion; | ||
} | ||
return React.forwardRef(function (props, ref) { | ||
return React.createElement(CSSMotion, Object.assign({ | ||
internalRef: ref | ||
}, props)); | ||
}); | ||
CSSMotion.displayName = 'CSSMotion'; | ||
return CSSMotion; | ||
} | ||
export default genCSSMotion(supportTransition); |
@@ -14,6 +14,4 @@ import * as React from 'react'; | ||
} | ||
export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps & { | ||
ref?: React.Ref<any>; | ||
}>): React.ComponentClass<CSSMotionListProps>; | ||
export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps>): React.ComponentClass<CSSMotionListProps>; | ||
declare const _default: React.ComponentClass<CSSMotionListProps, any>; | ||
export default _default; |
@@ -7,5 +7,5 @@ import { MotionName } from '../CSSMotion'; | ||
export declare function getVendorPrefixedEventName(eventName: string): any; | ||
export declare const supportTransition: boolean; | ||
export declare const animationEndName: any; | ||
export declare const transitionEndName: any; | ||
export declare const supportTransition: boolean; | ||
export declare function getTransitionName(transitionName: MotionName, transitionType: string): any; |
import _typeof from "@babel/runtime/helpers/esm/typeof"; | ||
import canUseDOM from "rc-util/es/Dom/canUseDom"; // ================= Transition ================= | ||
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); // ================= Transition ================= | ||
// Event wrapper. Copy from react source code | ||
@@ -33,6 +33,6 @@ | ||
} | ||
var vendorPrefixes = getVendorPrefixes(canUseDOM(), typeof window !== 'undefined' ? window : {}); | ||
var vendorPrefixes = getVendorPrefixes(canUseDOM, typeof window !== 'undefined' ? window : {}); | ||
var style = {}; | ||
if (canUseDOM()) { | ||
if (canUseDOM) { | ||
var _document$createEleme = document.createElement('div'); | ||
@@ -67,7 +67,5 @@ | ||
} | ||
var internalAnimationEndName = getVendorPrefixedEventName('animationend'); | ||
var internalTransitionEndName = getVendorPrefixedEventName('transitionend'); | ||
export var supportTransition = !!(internalAnimationEndName && internalTransitionEndName); | ||
export var animationEndName = internalAnimationEndName || 'animationend'; | ||
export var transitionEndName = internalTransitionEndName || 'transitionend'; | ||
export var animationEndName = getVendorPrefixedEventName('animationend'); | ||
export var transitionEndName = getVendorPrefixedEventName('transitionend'); | ||
export var supportTransition = !!(animationEndName && transitionEndName); | ||
export function getTransitionName(transitionName, transitionType) { | ||
@@ -74,0 +72,0 @@ if (!transitionName) return null; |
import * as React from 'react'; | ||
import { MotionStatus, MotionEventHandler, MotionEndEventHandler } from './interface'; | ||
import { MotionEventHandler, MotionEndEventHandler, MotionStatus } from './interface'; | ||
export declare type CSSMotionConfig = boolean | { | ||
transitionSupport?: boolean; | ||
/** @deprecated, no need this anymore since `rc-motion` only support latest react */ | ||
forwardRef?: boolean; | ||
@@ -41,3 +40,3 @@ }; | ||
[key: string]: any; | ||
}, ref: (node: any) => void) => React.ReactElement; | ||
}, ref: (node: any) => void) => React.ReactNode; | ||
} | ||
@@ -55,8 +54,4 @@ export interface CSSMotionState { | ||
*/ | ||
export declare function genCSSMotion(config: CSSMotionConfig): React.ForwardRefExoticComponent<CSSMotionProps & { | ||
ref?: React.Ref<any>; | ||
}>; | ||
declare const _default: React.ForwardRefExoticComponent<CSSMotionProps & { | ||
ref?: React.Ref<any>; | ||
}>; | ||
export declare function genCSSMotion(config: CSSMotionConfig): React.ForwardRefExoticComponent<CSSMotionProps>; | ||
declare const _default: React.ForwardRefExoticComponent<CSSMotionProps>; | ||
export default _default; |
@@ -17,4 +17,12 @@ "use strict"; | ||
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); | ||
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); | ||
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); | ||
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); | ||
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper")); | ||
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); | ||
@@ -26,6 +34,8 @@ | ||
var _ref = require("rc-util/lib/ref"); | ||
var _ref2 = require("rc-util/lib/ref"); | ||
var _classnames = _interopRequireDefault(require("classnames")); | ||
var _raf = _interopRequireDefault(require("raf")); | ||
var _motion = require("./util/motion"); | ||
@@ -35,6 +45,2 @@ | ||
var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus")); | ||
var _DomWrapper = _interopRequireDefault(require("./DomWrapper")); | ||
/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */ | ||
@@ -48,5 +54,7 @@ | ||
var transitionSupport = config; | ||
var forwardRef = !!React.forwardRef; | ||
if ((0, _typeof2.default)(config) === 'object') { | ||
transitionSupport = config.transitionSupport; | ||
forwardRef = 'forwardRef' in config ? config.forwardRef : forwardRef; | ||
} | ||
@@ -58,64 +66,308 @@ | ||
var CSSMotion = React.forwardRef(function (props, ref) { | ||
var _classNames; | ||
var CSSMotion = /*#__PURE__*/function (_React$Component) { | ||
(0, _inherits2.default)(CSSMotion, _React$Component); | ||
var _props$visible = props.visible, | ||
visible = _props$visible === void 0 ? true : _props$visible, | ||
_props$removeOnLeave = props.removeOnLeave, | ||
removeOnLeave = _props$removeOnLeave === void 0 ? true : _props$removeOnLeave, | ||
children = props.children, | ||
motionName = props.motionName, | ||
leavedClassName = props.leavedClassName, | ||
eventProps = props.eventProps; | ||
var supportMotion = isSupportTransition(props); // Ref to the react node, it may be a HTMLElement | ||
var _super = (0, _createSuper2.default)(CSSMotion); | ||
var nodeRef = (0, React.useRef)(); // Ref to the dom wrapper in case ref can not pass to HTMLElement | ||
function CSSMotion() { | ||
var _this; | ||
var wrapperNodeRef = (0, React.useRef)(); | ||
(0, _classCallCheck2.default)(this, CSSMotion); | ||
_this = _super.apply(this, arguments); | ||
_this.$cacheEle = null; | ||
_this.node = null; | ||
_this.raf = null; | ||
_this.destroyed = false; | ||
_this.deadlineId = null; | ||
_this.state = { | ||
status: _interface.STATUS_NONE, | ||
statusActive: false, | ||
newStatus: false, | ||
statusStyle: null | ||
}; | ||
function getDomElement() { | ||
try { | ||
return (0, _findDOMNode.default)(nodeRef.current || wrapperNodeRef.current); | ||
} catch (e) { | ||
// Only happen when `motionDeadline` trigger but element removed. | ||
return null; | ||
} | ||
} | ||
_this.onDomUpdate = function () { | ||
var _this$state = _this.state, | ||
status = _this$state.status, | ||
newStatus = _this$state.newStatus; | ||
var _this$props = _this.props, | ||
onAppearStart = _this$props.onAppearStart, | ||
onEnterStart = _this$props.onEnterStart, | ||
onLeaveStart = _this$props.onLeaveStart, | ||
onAppearActive = _this$props.onAppearActive, | ||
onEnterActive = _this$props.onEnterActive, | ||
onLeaveActive = _this$props.onLeaveActive, | ||
motionAppear = _this$props.motionAppear, | ||
motionEnter = _this$props.motionEnter, | ||
motionLeave = _this$props.motionLeave; | ||
var _useStatus = (0, _useStatus3.default)(supportMotion, visible, getDomElement, props), | ||
_useStatus2 = (0, _slicedToArray2.default)(_useStatus, 3), | ||
status = _useStatus2[0], | ||
statusActive = _useStatus2[1], | ||
statusStyle = _useStatus2[2]; | ||
if (!isSupportTransition(_this.props)) { | ||
return; | ||
} // Event injection | ||
var setNodeRef = function setNodeRef(node) { | ||
nodeRef.current = node; | ||
(0, _ref.fillRef)(ref, node); | ||
}; | ||
if (!children) return null; | ||
var $ele = _this.getElement(); | ||
if (status === _interface.STATUS_NONE || !isSupportTransition(props)) { | ||
if (visible) { | ||
return children((0, _objectSpread2.default)({}, eventProps), setNodeRef); | ||
if (_this.$cacheEle !== $ele) { | ||
_this.removeEventListener(_this.$cacheEle); | ||
_this.addEventListener($ele); | ||
_this.$cacheEle = $ele; | ||
} // Init status | ||
if (newStatus && status === _interface.STATUS_APPEAR && motionAppear) { | ||
_this.updateStatus(onAppearStart, null, null, function () { | ||
_this.updateActiveStatus(onAppearActive, _interface.STATUS_APPEAR); | ||
}); | ||
} else if (newStatus && status === _interface.STATUS_ENTER && motionEnter) { | ||
_this.updateStatus(onEnterStart, null, null, function () { | ||
_this.updateActiveStatus(onEnterActive, _interface.STATUS_ENTER); | ||
}); | ||
} else if (newStatus && status === _interface.STATUS_LEAVE && motionLeave) { | ||
_this.updateStatus(onLeaveStart, null, null, function () { | ||
_this.updateActiveStatus(onLeaveActive, _interface.STATUS_LEAVE); | ||
}); | ||
} | ||
}; | ||
_this.onMotionEnd = function (event) { | ||
if (event && !event.deadline && event.target !== _this.getElement()) { | ||
// event exists | ||
// not initiated by deadline | ||
// transitionend not fired by inner elements | ||
return; | ||
} | ||
var _this$state2 = _this.state, | ||
status = _this$state2.status, | ||
statusActive = _this$state2.statusActive; | ||
var _this$props2 = _this.props, | ||
onAppearEnd = _this$props2.onAppearEnd, | ||
onEnterEnd = _this$props2.onEnterEnd, | ||
onLeaveEnd = _this$props2.onLeaveEnd; | ||
if (status === _interface.STATUS_APPEAR && statusActive) { | ||
_this.updateStatus(onAppearEnd, { | ||
status: _interface.STATUS_NONE | ||
}, event); | ||
} else if (status === _interface.STATUS_ENTER && statusActive) { | ||
_this.updateStatus(onEnterEnd, { | ||
status: _interface.STATUS_NONE | ||
}, event); | ||
} else if (status === _interface.STATUS_LEAVE && statusActive) { | ||
_this.updateStatus(onLeaveEnd, { | ||
status: _interface.STATUS_NONE | ||
}, event); | ||
} | ||
}; | ||
_this.setNodeRef = function (node) { | ||
var internalRef = _this.props.internalRef; | ||
_this.node = node; | ||
(0, _ref2.fillRef)(internalRef, node); | ||
}; | ||
_this.getElement = function () { | ||
try { | ||
return (0, _findDOMNode.default)(_this.node || (0, _assertThisInitialized2.default)(_this)); | ||
} catch (e) { | ||
/** | ||
* Fallback to cache element. | ||
* This is only happen when `motionDeadline` trigger but element removed. | ||
*/ | ||
return _this.$cacheEle; | ||
} | ||
}; | ||
_this.addEventListener = function ($ele) { | ||
if (!$ele) return; | ||
$ele.addEventListener(_motion.transitionEndName, _this.onMotionEnd); | ||
$ele.addEventListener(_motion.animationEndName, _this.onMotionEnd); | ||
}; | ||
_this.removeEventListener = function ($ele) { | ||
if (!$ele) return; | ||
$ele.removeEventListener(_motion.transitionEndName, _this.onMotionEnd); | ||
$ele.removeEventListener(_motion.animationEndName, _this.onMotionEnd); | ||
}; | ||
_this.updateStatus = function (styleFunc, additionalState, event, callback) { | ||
var statusStyle = styleFunc ? styleFunc(_this.getElement(), event) : null; | ||
if (statusStyle === false || _this.destroyed) return; | ||
var nextStep; | ||
if (callback) { | ||
nextStep = function nextStep() { | ||
_this.nextFrame(callback); | ||
}; | ||
} | ||
_this.setState((0, _objectSpread2.default)({ | ||
statusStyle: (0, _typeof2.default)(statusStyle) === 'object' ? statusStyle : null, | ||
newStatus: false | ||
}, additionalState), nextStep); // Trigger before next frame & after `componentDidMount` | ||
}; | ||
_this.updateActiveStatus = function (styleFunc, currentStatus) { | ||
// `setState` use `postMessage` to trigger at the end of frame. | ||
// Let's use requestAnimationFrame to update new state in next frame. | ||
_this.nextFrame(function () { | ||
var status = _this.state.status; | ||
if (status !== currentStatus) return; | ||
var motionDeadline = _this.props.motionDeadline; | ||
_this.updateStatus(styleFunc, { | ||
statusActive: true | ||
}); | ||
if (motionDeadline > 0) { | ||
_this.deadlineId = setTimeout(function () { | ||
_this.onMotionEnd({ | ||
deadline: true | ||
}); | ||
}, motionDeadline); | ||
} | ||
}); | ||
}; | ||
_this.nextFrame = function (func) { | ||
_this.cancelNextFrame(); | ||
_this.raf = (0, _raf.default)(func); | ||
}; | ||
_this.cancelNextFrame = function () { | ||
if (_this.raf) { | ||
_raf.default.cancel(_this.raf); | ||
_this.raf = null; | ||
} | ||
}; | ||
return _this; | ||
} | ||
(0, _createClass2.default)(CSSMotion, [{ | ||
key: "componentDidMount", | ||
value: function componentDidMount() { | ||
this.onDomUpdate(); | ||
} | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate() { | ||
this.onDomUpdate(); | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
this.destroyed = true; | ||
this.removeEventListener(this.$cacheEle); | ||
this.cancelNextFrame(); | ||
clearTimeout(this.deadlineId); | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _classNames; | ||
if (!removeOnLeave) { | ||
var _this$state3 = this.state, | ||
status = _this$state3.status, | ||
statusActive = _this$state3.statusActive, | ||
statusStyle = _this$state3.statusStyle; | ||
var _this$props3 = this.props, | ||
children = _this$props3.children, | ||
motionName = _this$props3.motionName, | ||
visible = _this$props3.visible, | ||
removeOnLeave = _this$props3.removeOnLeave, | ||
leavedClassName = _this$props3.leavedClassName, | ||
eventProps = _this$props3.eventProps; | ||
if (!children) return null; | ||
if (status === _interface.STATUS_NONE || !isSupportTransition(this.props)) { | ||
if (visible) { | ||
return children((0, _objectSpread2.default)({}, eventProps), this.setNodeRef); | ||
} | ||
if (!removeOnLeave) { | ||
return children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, { | ||
className: leavedClassName | ||
}), this.setNodeRef); | ||
} | ||
return null; | ||
} | ||
return children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, { | ||
className: leavedClassName | ||
}), setNodeRef); | ||
className: (0, _classnames.default)((0, _motion.getTransitionName)(motionName, status), (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _motion.getTransitionName)(motionName, "".concat(status, "-active")), statusActive), (0, _defineProperty2.default)(_classNames, motionName, typeof motionName === 'string'), _classNames)), | ||
style: statusStyle | ||
}), this.setNodeRef); | ||
} | ||
}], [{ | ||
key: "getDerivedStateFromProps", | ||
value: function getDerivedStateFromProps(props, _ref) { | ||
var prevProps = _ref.prevProps, | ||
prevStatus = _ref.status; | ||
if (!isSupportTransition(props)) return {}; | ||
var visible = props.visible, | ||
motionAppear = props.motionAppear, | ||
motionEnter = props.motionEnter, | ||
motionLeave = props.motionLeave, | ||
motionLeaveImmediately = props.motionLeaveImmediately; | ||
var newState = { | ||
prevProps: props | ||
}; // Clean up status if prop set to false | ||
return null; | ||
} | ||
if (prevStatus === _interface.STATUS_APPEAR && !motionAppear || prevStatus === _interface.STATUS_ENTER && !motionEnter || prevStatus === _interface.STATUS_LEAVE && !motionLeave) { | ||
newState.status = _interface.STATUS_NONE; | ||
newState.statusActive = false; | ||
newState.newStatus = false; | ||
} // Appear | ||
return React.createElement(_DomWrapper.default, { | ||
ref: wrapperNodeRef | ||
}, children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, { | ||
className: (0, _classnames.default)((0, _motion.getTransitionName)(motionName, status), (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _motion.getTransitionName)(motionName, "".concat(status, "-active")), statusActive), (0, _defineProperty2.default)(_classNames, motionName, typeof motionName === 'string'), _classNames)), | ||
style: statusStyle | ||
}), setNodeRef)); | ||
if (!prevProps && visible && motionAppear) { | ||
newState.status = _interface.STATUS_APPEAR; | ||
newState.statusActive = false; | ||
newState.newStatus = true; | ||
} // Enter | ||
if (prevProps && !prevProps.visible && visible && motionEnter) { | ||
newState.status = _interface.STATUS_ENTER; | ||
newState.statusActive = false; | ||
newState.newStatus = true; | ||
} // Leave | ||
if (prevProps && prevProps.visible && !visible && motionLeave || !prevProps && motionLeaveImmediately && !visible && motionLeave) { | ||
newState.status = _interface.STATUS_LEAVE; | ||
newState.statusActive = false; | ||
newState.newStatus = true; | ||
} | ||
return newState; | ||
} | ||
}]); | ||
return CSSMotion; | ||
}(React.Component); | ||
CSSMotion.defaultProps = { | ||
visible: true, | ||
motionEnter: true, | ||
motionAppear: true, | ||
motionLeave: true, | ||
removeOnLeave: true | ||
}; | ||
if (!forwardRef) { | ||
return CSSMotion; | ||
} | ||
return React.forwardRef(function (props, ref) { | ||
return React.createElement(CSSMotion, Object.assign({ | ||
internalRef: ref | ||
}, props)); | ||
}); | ||
CSSMotion.displayName = 'CSSMotion'; | ||
return CSSMotion; | ||
} | ||
@@ -122,0 +374,0 @@ |
@@ -14,6 +14,4 @@ import * as React from 'react'; | ||
} | ||
export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps & { | ||
ref?: React.Ref<any>; | ||
}>): React.ComponentClass<CSSMotionListProps>; | ||
export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps>): React.ComponentClass<CSSMotionListProps>; | ||
declare const _default: React.ComponentClass<CSSMotionListProps, any>; | ||
export default _default; |
@@ -7,5 +7,5 @@ import { MotionName } from '../CSSMotion'; | ||
export declare function getVendorPrefixedEventName(eventName: string): any; | ||
export declare const supportTransition: boolean; | ||
export declare const animationEndName: any; | ||
export declare const transitionEndName: any; | ||
export declare const supportTransition: boolean; | ||
export declare function getTransitionName(transitionName: MotionName, transitionType: string): any; |
@@ -11,10 +11,9 @@ "use strict"; | ||
exports.getTransitionName = getTransitionName; | ||
exports.transitionEndName = exports.animationEndName = exports.supportTransition = void 0; | ||
exports.supportTransition = exports.transitionEndName = exports.animationEndName = void 0; | ||
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); | ||
var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom")); | ||
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); // ================= Transition ================= | ||
// Event wrapper. Copy from react source code | ||
// ================= Transition ================= | ||
// Event wrapper. Copy from react source code | ||
function makePrefixMap(styleProp, eventName) { | ||
@@ -49,6 +48,6 @@ var prefixes = {}; | ||
var vendorPrefixes = getVendorPrefixes((0, _canUseDom.default)(), typeof window !== 'undefined' ? window : {}); | ||
var vendorPrefixes = getVendorPrefixes(canUseDOM, typeof window !== 'undefined' ? window : {}); | ||
var style = {}; | ||
if ((0, _canUseDom.default)()) { | ||
if (canUseDOM) { | ||
var _document$createEleme = document.createElement('div'); | ||
@@ -85,10 +84,8 @@ | ||
var internalAnimationEndName = getVendorPrefixedEventName('animationend'); | ||
var internalTransitionEndName = getVendorPrefixedEventName('transitionend'); | ||
var supportTransition = !!(internalAnimationEndName && internalTransitionEndName); | ||
exports.supportTransition = supportTransition; | ||
var animationEndName = internalAnimationEndName || 'animationend'; | ||
var animationEndName = getVendorPrefixedEventName('animationend'); | ||
exports.animationEndName = animationEndName; | ||
var transitionEndName = internalTransitionEndName || 'transitionend'; | ||
var transitionEndName = getVendorPrefixedEventName('transitionend'); | ||
exports.transitionEndName = transitionEndName; | ||
var supportTransition = !!(animationEndName && transitionEndName); | ||
exports.supportTransition = supportTransition; | ||
@@ -95,0 +92,0 @@ function getTransitionName(transitionName, transitionType) { |
{ | ||
"name": "rc-motion", | ||
"version": "1.1.1", | ||
"version": "1.1.2", | ||
"description": "React lifecycle controlled motion library", | ||
@@ -46,3 +46,4 @@ "keywords": [ | ||
"classnames": "^2.2.1", | ||
"rc-util": "^5.2.1" | ||
"raf": "^3.4.1", | ||
"rc-util": "^5.0.6" | ||
}, | ||
@@ -53,2 +54,3 @@ "devDependencies": { | ||
"@types/jest": "^26.0.8", | ||
"@types/raf": "^3.4.0", | ||
"@types/react": "^16.9.2", | ||
@@ -65,3 +67,2 @@ "@types/react-dom": "^16.9.0", | ||
"np": "^6.2.4", | ||
"prettier": "^2.1.1", | ||
"react": "^16.0.0", | ||
@@ -68,0 +69,0 @@ "react-dom": "^16.0.0" |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
65519
6
30
1433
+ Addedraf@^3.4.1
+ Addedperformance-now@2.1.0(transitive)
+ Addedraf@3.4.1(transitive)
Updatedrc-util@^5.0.6