@onesy/ui-react
Version:
UI for React
204 lines (196 loc) • 8.01 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import React from 'react';
import { is, unique } from '@onesy/utils';
import { useOnesyTheme } from '@onesy/style-react';
import { STATUS } from '..';
const Transitions = props_ => {
const theme = useOnesyTheme();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTransitions?.props?.default), props_);
const {
mode = 'out-in',
switch: switch_,
id,
TransitionProps,
children: children__
} = props;
const [init, setInit] = React.useState(false);
const [status, setStatus] = React.useState(STATUS.entered);
const [children, setChildren] = React.useState(is('array', children__) ? children__ : [children__]);
const other = _objectSpread({
className: true
}, TransitionProps);
const [element, setElement] = React.useState(/*#__PURE__*/React.cloneElement(children__, _objectSpread({
in: true
}, other)));
const refs = {
element: React.useRef(undefined),
previousKeyValue: React.useRef(undefined),
status: React.useRef(undefined),
id: React.useRef(undefined),
noTransition: React.useRef(undefined)
};
refs.element.current = element;
refs.status.current = status;
React.useEffect(() => {
if (id !== undefined) {
if (id !== refs.id.current) {
refs.noTransition.current = false;
refs.id.current = id;
} else refs.noTransition.current = true;
}
}, [id]);
React.useEffect(() => {
if (id !== undefined) refs.noTransition.current = id === refs.id.current;
}, [status]);
React.useEffect(() => {
setInit(true);
}, []);
// Regular
React.useEffect(() => {
if (!switch_) {
const newChildren = is('array', children__) ? children__ : [children__];
setChildren(items => {
let newItems = 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?.props.in;
// New or readded previous add it
if (next && (!prev || isExiting)) return /*#__PURE__*/React.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.cloneElement(item, _objectSpread({
in: false
}, other));
return item;
});
return newItems;
});
}
}, [children__.length]);
// Switch
React.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.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 (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?.key === 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.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.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, _objectSpread({
in: true
}, other));
children_ = [/*#__PURE__*/React.cloneElement(children_, _objectSpread({
in: false,
onExited: () => {
if (refs.status.current === 'entered') return;
if (children__.props?.onExited) children__.props?.onExited();
setStatus(STATUS.entered);
setElement(newElement);
},
exitOnAdd: true,
removeOnExited: true
}, other)), newElement];
} else if (mode === 'out-in') {
children_ = /*#__PURE__*/React.cloneElement(children__, _objectSpread({
in: true,
onEntered: () => {
if (refs.status.current === 'entered') return;
if (children__.props?.onEntered) children__.props?.onEntered();
setStatus(STATUS.entered);
setElement(/*#__PURE__*/React.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.cloneElement(children__, _objectSpread({
in: true,
onEntered: () => {
if (refs.status.current === 'entered') return;
if (children__.props?.onEnter) children__.props?.onEnter();
setStatus(STATUS.enter);
},
enterOnAdd: true
}, other))];
} else if (mode === 'out-in') {
children_ = /*#__PURE__*/React.cloneElement(children_, _objectSpread({
in: false,
onExited: () => {
if (refs.status.current === 'entered') return;
if (children__.props?.onExited) children__.props?.onExited();
setStatus(STATUS.enter);
},
exitOnAdd: true
}, other));
} else if (mode === 'in-out-follow') {
if (children__.key === children_.key) return children_;
children_ = [/*#__PURE__*/React.cloneElement(children__, _objectSpread({
in: true,
onEntered: () => {
if (refs.status.current === 'entered') return;
if (children__.props?.onEntered) children__.props?.onEntered();
setElement(/*#__PURE__*/React.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, _objectSpread({
in: true
}, other)));
setStatus(STATUS.entered);
},
enterOnAdd: true
}, other)), /*#__PURE__*/React.cloneElement(children_, _objectSpread({
in: false,
exitOnAdd: true
}, other))];
}
break;
default:
break;
}
}
return children_;
};
Transitions.displayName = 'onesy-Transitions';
export default Transitions;