@amaui/ui-react
Version:
UI for React
207 lines (198 loc) • 8.23 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { is, unique } from '@amaui/utils';
import { useAmauiTheme } from '@amaui/style-react';
import { STATUS } from '..';
const Transitions = props_ => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiTransitions?.props?.default), props_), [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;
// No transition controll
// bug solve in nextjs
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_ => item_.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 => {
const newItems = [...items];
const index = newItems.findIndex(item => item?.key === element_?.key);
if (index > -1) newItems.splice(index, 1);
return newItems;
});
};
let children_ = children;
// Init
if (!init && !switch_) {
children_ = children_.map(item => /*#__PURE__*/React.cloneElement(item, _objectSpread({
in: true,
onExited: onExited(item)
}, 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 = 'amaui-Transitions';
export default Transitions;