wix-style-react
Version:
wix-style-react
359 lines (358 loc) • 13.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.getTransitionStyles = exports.getTimeout = exports.getPercentageValue = exports.getMoveStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _constants = require("../constants");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getPercentageValue = percentage => {
var percentRegex = /^((100)|(\d{1,2}(\.\d*)?))%$/g;
if (percentage.match(percentRegex)) {
var percentNumber = Number(percentage.split('%')[0]);
if (Number.isFinite(percentNumber)) {
return percentNumber / 100;
}
}
return 0;
};
exports.getPercentageValue = getPercentageValue;
var getFadeProps = fade => {
if (fade === true) {
return {
duration: 'medium01'
};
}
return fade;
};
var getMoveProps = move => {
if (move === true) {
return {
duration: 'medium01',
direction: 'bottomToTop',
distance: '10px'
};
}
return move;
};
var getToggleProps = toggle => {
if (toggle === true) {
return {
duration: 'medium01',
direction: 'bottomToTop'
};
}
return toggle;
};
var getScaleProps = (scale, isExiting) => {
if (scale === true) {
return {
duration: 'medium01',
direction: 'center',
scale: isExiting ? '0' : '1'
};
}
return _objectSpread(_objectSpread({}, scale), {}, {
scale: "".concat(getPercentageValue(scale.scale))
});
};
var getDefaultStyles = props => {
var easing = props.easing ? {
transitionTimingFunction: _constants.easingMap[props.easing]
} : undefined;
var delay = props.delay ? {
transitionDelay: "".concat(_constants.timingMap[props.delay], "ms")
} : undefined;
return _objectSpread(_objectSpread({}, easing), delay);
};
var getFadeStyles = (fadeProps, isExiting) => {
var {
duration
} = fadeProps;
var defaultStyles = getDefaultStyles(fadeProps);
return {
[isExiting ? 'exiting' : 'entering']: _objectSpread({
opacity: 0,
transitionProperty: 'opacity',
transitionDuration: "".concat(_constants.timingMap[duration], "ms")
}, isExiting ? defaultStyles : {}),
[isExiting ? 'exited' : 'entered']: _objectSpread({
opacity: 1,
transitionProperty: 'opacity',
transitionDuration: "".concat(_constants.timingMap[duration], "ms")
}, !isExiting ? defaultStyles : {})
};
};
var getMoveStyles = (moveProps, isExiting) => {
var {
direction,
distance,
duration
} = moveProps;
var defaultStyles = getDefaultStyles(moveProps);
var transform = '';
switch (direction) {
case 'topToBottom':
transform = "translateY(".concat(isExiting ? distance : "-".concat(distance), ")");
break;
case 'bottomToTop':
transform = "translateY(".concat(isExiting ? "-".concat(distance) : distance, ")");
break;
case 'leftToRight':
transform = "translateX(".concat(isExiting ? distance : "-".concat(distance), ")");
break;
case 'rightToLeft':
transform = "translateX(".concat(isExiting ? "-".concat(distance) : distance, ")");
break;
default:
throw new Error('unsupported direction');
}
return {
[isExiting ? 'exiting' : 'entering']: _objectSpread({
transform,
transitionProperty: 'transform',
transitionDuration: "".concat(_constants.timingMap[duration], "ms")
}, isExiting ? defaultStyles : {}),
[isExiting ? 'exited' : 'entered']: _objectSpread({
transform: 'none',
transitionProperty: 'transform',
transitionDuration: "".concat(_constants.timingMap[duration], "ms")
}, !isExiting ? defaultStyles : {})
};
};
exports.getMoveStyles = getMoveStyles;
var isDirectionVertical = direction => {
return direction === 'bottomToTop' || direction === 'topToBottom';
};
var getToggleStyles = (toggleProps, isExiting, height, width, oppositeProps) => {
var {
direction,
duration
} = toggleProps;
var defaultStyles = getDefaultStyles(toggleProps);
var isVertical = isDirectionVertical(direction);
var transitionOrigin = isVertical ? 'bottom' : 'left';
var isOppositeVertical = (oppositeProps == null ? void 0 : oppositeProps.direction) && isDirectionVertical(oppositeProps == null ? void 0 : oppositeProps.direction);
var isOppositeOnAnotherAxis = isOppositeVertical !== undefined && isOppositeVertical !== isVertical;
var transitionOriginOutValue = (oppositeProps == null ? void 0 : oppositeProps.direction) === 'bottomToTop' || (oppositeProps == null ? void 0 : oppositeProps.direction) === 'leftToRight' ? '-100%' : '100%';
var oppositeTransitionOrigin = isOppositeVertical ? 'bottom' : 'left';
var transitionOriginIn = '';
switch (direction) {
case 'topToBottom':
case 'rightToLeft':
transitionOriginIn = isExiting ? '-100%' : '100%';
break;
case 'bottomToTop':
case 'leftToRight':
transitionOriginIn = isExiting ? '100%' : '-100%';
break;
default:
throw new Error('unsupported direction');
}
var commonStyles = {
height: isVertical ? "".concat(height, "px") : '100%',
width: isVertical ? '100%' : "".concat(width, "px"),
position: 'relative',
overflow: 'hidden',
transitionProperty: 'bottom, left',
transitionDuration: "".concat(_constants.timingMap[duration], "ms")
};
var styles = {
in: _objectSpread(_objectSpread({}, commonStyles), {}, {
[transitionOrigin]: transitionOriginIn
}, isExiting ? defaultStyles : {}),
out: _objectSpread(_objectSpread(_objectSpread({}, commonStyles), {}, {
[transitionOrigin]: (oppositeProps == null ? void 0 : oppositeProps.direction) === direction || isOppositeVertical === isVertical ? transitionOriginOutValue : '0%'
}, isOppositeOnAnotherAxis ? {
[oppositeTransitionOrigin]: transitionOriginOutValue
} : {}), !isExiting ? defaultStyles : {})
};
if (isExiting) {
return {
entered: _objectSpread(_objectSpread(_objectSpread({}, commonStyles), {}, {
[transitionOrigin]: '0%'
}, isOppositeOnAnotherAxis ? {
[oppositeTransitionOrigin]: '0%'
} : {}), defaultStyles),
exiting: styles.in,
exited: styles.out
};
}
return {
entering: styles.in,
entered: styles.out
};
};
var getScaleStyles = (scaleProps, isExiting) => {
var {
direction,
scale,
duration
} = scaleProps;
var defaultStyles = getDefaultStyles(scaleProps);
var transformOrigin = '';
switch (direction) {
case 'bottom':
transformOrigin = '50% 100%';
break;
case 'bottomEnd':
transformOrigin = '100% 100%';
break;
case 'bottomStart':
transformOrigin = '0% 100%';
break;
case 'center':
transformOrigin = '50% 50%';
break;
case 'left':
transformOrigin = '0% 50%';
break;
case 'right':
transformOrigin = '100% 50%';
break;
case 'top':
transformOrigin = '50% 0%';
break;
case 'topEnd':
transformOrigin = '100% 0%';
break;
case 'topStart':
transformOrigin = '0% 0%';
break;
default:
throw new Error('unsupported direction');
}
return {
[isExiting ? 'exiting' : 'entering']: _objectSpread({
transform: 'scale(0, 0)',
transitionProperty: 'transform',
transitionDuration: "".concat(_constants.timingMap[duration], "ms"),
transformOrigin
}, isExiting ? defaultStyles : {}),
[isExiting ? 'exited' : 'entered']: _objectSpread({
transform: "scale(".concat(scale, ", ").concat(scale, ")"),
transitionProperty: 'transform',
transitionDuration: "".concat(_constants.timingMap[duration], "ms"),
transformOrigin
}, !isExiting ? defaultStyles : {})
};
};
var getToggleWrapperStyles = (expandProps, collapseProps, height, width) => {
if ((expandProps == null ? void 0 : expandProps.direction) === 'topToBottom' && (collapseProps == null ? void 0 : collapseProps.direction) === 'bottomToTop') {
return {};
}
var commonStyles = {
overflow: 'hidden',
height,
width
};
return {
entering: commonStyles,
entered: commonStyles,
exiting: commonStyles,
exited: commonStyles
};
};
var getMergedStyles = (target, source) => {
return {
entering: _objectSpread(_objectSpread({}, target.entering), source.entering),
entered: _objectSpread(_objectSpread({}, target.entered), source.entered),
exiting: _objectSpread(_objectSpread({}, target.exiting), source.exiting),
exited: _objectSpread(_objectSpread({}, target.exited), source.exited)
};
};
var getTransitionStyles = (_ref, enterAnimation, exitAnimation) => {
var {
width,
height
} = _ref;
var transitionStyles = {
fade: {},
move: {},
scale: {},
toggle: {}
};
if (enterAnimation != null && enterAnimation.fadeIn) {
var props = getFadeProps(enterAnimation == null ? void 0 : enterAnimation.fadeIn);
var styles = getFadeStyles(props, false);
Object.assign(transitionStyles.fade, styles);
}
if (exitAnimation != null && exitAnimation.fadeOut) {
var _props = getFadeProps(exitAnimation == null ? void 0 : exitAnimation.fadeOut);
var _styles = getFadeStyles(_props, true);
Object.assign(transitionStyles.fade, _styles);
}
if (enterAnimation != null && enterAnimation.moveIn) {
var _props2 = getMoveProps(enterAnimation == null ? void 0 : enterAnimation.moveIn);
var _styles2 = getMoveStyles(_props2, false);
Object.assign(transitionStyles.move, _styles2);
}
if (exitAnimation != null && exitAnimation.moveOut) {
var _props3 = getMoveProps(exitAnimation == null ? void 0 : exitAnimation.moveOut);
var _styles3 = getMoveStyles(_props3, true);
Object.assign(transitionStyles.move, _styles3);
}
var expandProps = enterAnimation != null && enterAnimation.expand ? getToggleProps(enterAnimation == null ? void 0 : enterAnimation.expand) : undefined;
var collapseProps = exitAnimation != null && exitAnimation.collapse ? getToggleProps(exitAnimation == null ? void 0 : exitAnimation.collapse) : undefined;
if (expandProps) {
var _styles4 = getToggleStyles(expandProps, false, height, width, collapseProps);
Object.assign(transitionStyles.toggle, _styles4);
}
if (collapseProps) {
var _styles5 = getToggleStyles(collapseProps, true, height, width, expandProps);
Object.assign(transitionStyles.toggle, _styles5);
}
if (enterAnimation != null && enterAnimation.scaleUp) {
var _props4 = getScaleProps(enterAnimation == null ? void 0 : enterAnimation.scaleUp);
var _styles6 = getScaleStyles(_props4, false);
Object.assign(transitionStyles.scale, _styles6);
}
if (exitAnimation != null && exitAnimation.scaleDown) {
var _props5 = getScaleProps(exitAnimation == null ? void 0 : exitAnimation.scaleDown, true);
var _styles7 = getScaleStyles(_props5, true);
Object.assign(transitionStyles.scale, _styles7);
}
if (!!expandProps || !!collapseProps) {
var wrapperStyles = getToggleWrapperStyles(expandProps, collapseProps, height, width);
var mergedStyles = getMergedStyles(transitionStyles.scale, wrapperStyles);
Object.assign(transitionStyles.scale, mergedStyles);
}
return transitionStyles;
};
exports.getTransitionStyles = getTransitionStyles;
var getTiming = (type, animation) => {
if (!animation) {
return 0;
}
var entry = Object.entries(animation).find(_ref2 => {
var [key] = _ref2;
return key === type;
});
if (entry) {
var [_, value] = entry;
if (typeof value !== 'boolean') {
var delay = value.delay ? _constants.timingMap[value.delay] : 0;
return _constants.timingMap[value.duration] + delay;
} else if (value === true) {
// Setting default duration to medium01
return _constants.timingMap.medium01;
}
}
return 0;
};
var getTimeout = (enterAnimation, exitAnimation) => {
var fadeEnter = getTiming('fadeIn', enterAnimation);
var fadeExit = getTiming('fadeOut', exitAnimation);
var moveEnter = getTiming('moveIn', enterAnimation);
var moveExit = getTiming('moveOut', exitAnimation);
var expand = getTiming('expand', enterAnimation);
var collapse = getTiming('collapse', exitAnimation);
var scaleUp = getTiming('scaleUp', enterAnimation);
var scaleDown = getTiming('scaleDown', exitAnimation);
return {
enter: Math.max(fadeEnter, moveEnter, expand, scaleUp),
exit: Math.max(fadeExit, moveExit, collapse, scaleDown)
};
};
exports.getTimeout = getTimeout;
//# sourceMappingURL=utils.js.map