@onesy/ui-react
Version:
UI for React
217 lines (208 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _ = require("..");
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; }
const Transitions = props_ => {
var _theme$ui, _theme$ui2;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTransitions) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const {
mode = 'out-in',
switch: switch_,
id,
TransitionProps,
children: children__
} = props;
const [init, setInit] = _react.default.useState(false);
const [status, setStatus] = _react.default.useState(_.STATUS.entered);
const [children, setChildren] = _react.default.useState((0, _utils.is)('array', children__) ? children__ : [children__]);
const other = _objectSpread({
className: true
}, TransitionProps);
const [element, setElement] = _react.default.useState(/*#__PURE__*/_react.default.cloneElement(children__, _objectSpread({
in: true
}, other)));
const refs = {
element: _react.default.useRef(undefined),
previousKeyValue: _react.default.useRef(undefined),
status: _react.default.useRef(undefined),
id: _react.default.useRef(undefined),
noTransition: _react.default.useRef(undefined)
};
refs.element.current = element;
refs.status.current = status;
_react.default.useEffect(() => {
if (id !== undefined) {
if (id !== refs.id.current) {
refs.noTransition.current = false;
refs.id.current = id;
} else refs.noTransition.current = true;
}
}, [id]);
_react.default.useEffect(() => {
if (id !== undefined) refs.noTransition.current = id === refs.id.current;
}, [status]);
_react.default.useEffect(() => {
setInit(true);
}, []);
// Regular
_react.default.useEffect(() => {
if (!switch_) {
const newChildren = (0, _utils.is)('array', children__) ? children__ : [children__];
setChildren(items => {
let newItems = (0, _utils.unique)([...items, ...newChildren], 'key');
newItems = newItems.map(item => {
const prev = items.find(item_ => item_.key === item.key);
const next = newChildren.find(item__0 => item__0.key === item.key);
const isExiting = !(prev !== null && prev !== void 0 && prev.props.in);
// New or readded previous add it
if (next && (!prev || isExiting)) return /*#__PURE__*/_react.default.cloneElement(item, _objectSpread({
in: true,
onExited: onExited(item),
enterOnAdd: true
}, other));
// No prev in new and it's not already exiting exit it
if (!next && prev && !isExiting) return /*#__PURE__*/_react.default.cloneElement(item, _objectSpread({
in: false
}, other));
return item;
});
return newItems;
});
}
}, [children__.length]);
// Switch
_react.default.useEffect(() => {
refs.previousKeyValue.current = children__.key;
// Abrupted value update
if (refs.noTransition.current) {
setStatus(_.STATUS.entered);
setElement(children__);
} else if (refs.status.current !== 'entered') {
setStatus(_.STATUS.entered);
setElement(/*#__PURE__*/_react.default.cloneElement(children__, _objectSpread({
in: true,
enterOnAdd: true
}, other)));
} else if (element !== children__ && element.key !== children__.key &&
// Lets transition run properly
refs.status.current === 'entered') {
setStatus(_.STATUS.exit);
}
}, [children__.key]);
const onExited = element_ => elementHTML => {
// Invoke a method
if ((0, _utils.is)('function', element_.props.onExited)) element_.props.onExited(elementHTML);
// Update
setChildren(items_0 => {
const newItems_0 = [...items_0];
const index = newItems_0.findIndex(item_0 => (item_0 === null || item_0 === void 0 ? void 0 : item_0.key) === (element_ === null || element_ === void 0 ? void 0 : element_.key));
if (index > -1) newItems_0.splice(index, 1);
return newItems_0;
});
};
let children_ = children;
// Init
if (!init && !switch_) {
children_ = children_.map(item_1 => /*#__PURE__*/_react.default.cloneElement(item_1, _objectSpread({
in: true,
onExited: onExited(item_1)
}, other)));
}
// Switch
if (switch_) {
children_ = element;
switch (status) {
case _.STATUS.enter:
if (mode === 'in-out') {
const newElement = /*#__PURE__*/_react.default.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, _objectSpread({
in: true
}, other));
children_ = [/*#__PURE__*/_react.default.cloneElement(children_, _objectSpread({
in: false,
onExited: () => {
var _children__$props, _children__$props2;
if (refs.status.current === 'entered') return;
if ((_children__$props = children__.props) !== null && _children__$props !== void 0 && _children__$props.onExited) (_children__$props2 = children__.props) === null || _children__$props2 === void 0 || _children__$props2.onExited();
setStatus(_.STATUS.entered);
setElement(newElement);
},
exitOnAdd: true,
removeOnExited: true
}, other)), newElement];
} else if (mode === 'out-in') {
children_ = /*#__PURE__*/_react.default.cloneElement(children__, _objectSpread({
in: true,
onEntered: () => {
var _children__$props3, _children__$props4;
if (refs.status.current === 'entered') return;
if ((_children__$props3 = children__.props) !== null && _children__$props3 !== void 0 && _children__$props3.onEntered) (_children__$props4 = children__.props) === null || _children__$props4 === void 0 || _children__$props4.onEntered();
setStatus(_.STATUS.entered);
setElement(/*#__PURE__*/_react.default.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, _objectSpread({
in: true
}, other)));
},
enterOnAdd: true
}, other));
}
break;
case _.STATUS.exit:
if (mode === 'in-out') {
children_ = [element, /*#__PURE__*/_react.default.cloneElement(children__, _objectSpread({
in: true,
onEntered: () => {
var _children__$props5, _children__$props6;
if (refs.status.current === 'entered') return;
if ((_children__$props5 = children__.props) !== null && _children__$props5 !== void 0 && _children__$props5.onEnter) (_children__$props6 = children__.props) === null || _children__$props6 === void 0 || _children__$props6.onEnter();
setStatus(_.STATUS.enter);
},
enterOnAdd: true
}, other))];
} else if (mode === 'out-in') {
children_ = /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread({
in: false,
onExited: () => {
var _children__$props7, _children__$props8;
if (refs.status.current === 'entered') return;
if ((_children__$props7 = children__.props) !== null && _children__$props7 !== void 0 && _children__$props7.onExited) (_children__$props8 = children__.props) === null || _children__$props8 === void 0 || _children__$props8.onExited();
setStatus(_.STATUS.enter);
},
exitOnAdd: true
}, other));
} else if (mode === 'in-out-follow') {
if (children__.key === children_.key) return children_;
children_ = [/*#__PURE__*/_react.default.cloneElement(children__, _objectSpread({
in: true,
onEntered: () => {
var _children__$props9, _children__$props0;
if (refs.status.current === 'entered') return;
if ((_children__$props9 = children__.props) !== null && _children__$props9 !== void 0 && _children__$props9.onEntered) (_children__$props0 = children__.props) === null || _children__$props0 === void 0 || _children__$props0.onEntered();
setElement(/*#__PURE__*/_react.default.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, _objectSpread({
in: true
}, other)));
setStatus(_.STATUS.entered);
},
enterOnAdd: true
}, other)), /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread({
in: false,
exitOnAdd: true
}, other))];
}
break;
default:
break;
}
}
return children_;
};
Transitions.displayName = 'onesy-Transitions';
var _default = exports.default = Transitions;