@amaui/ui-react
Version:
UI for React
178 lines (177 loc) • 7.77 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const subscription_1 = __importDefault(require("@amaui/subscription"));
const style_react_1 = require("@amaui/style-react");
const Context_1 = __importDefault(require("./Context"));
const utils_2 = require("../utils");
const Keyframes = (props_) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiKeyframes) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const { ref, append, update, timeout: timeout_, appendStatusPost, add: add_, runOnEnter, removeOnEnd, keyframes, prefix, onKeyframes, onAppended, onAdd, onAdding, onAdded, onRemoved, className, children, } = props;
const [init, setInit] = react_1.default.useState(false);
const [status, setStatus] = react_1.default.useState(() => {
let statusNew = '';
if (append)
statusNew = 'appended';
return statusNew;
});
const subs = react_1.default.useRef({
status: new subscription_1.default()
});
const refs = {
root: react_1.default.useRef(undefined),
status: react_1.default.useRef(status)
};
react_1.default.useEffect(() => {
initMethod();
}, []);
// Anytime update updates
// keyframes are ran
// meaning you can update
// keyframes between reruns
// and have any version of
// animation based on those points
// ie. Switch ui on and off animation
react_1.default.useEffect(() => {
if (init)
run();
}, [update]);
const initMethod = async () => {
// Appended
if (status === 'appended')
updateStatus(appendStatusPost);
// Add
if (add_ || status === 'add')
await add();
// Run the method
// to run the keyframes
if (runOnEnter)
await run();
// Init
setInit(true);
};
const run = async () => {
// Run all keyframes
if ((0, utils_1.is)('array', keyframes))
for (const keyframe of keyframes)
await runKeyframe(keyframe);
if (removeOnEnd) {
// So exited status has
// enough time to apply some value
setStatus('removed');
// Subscriptions
subs.current.status.emit('removed');
}
};
const runKeyframe = async (value_) => {
if (value_) {
const { name, timeout: timeout__ } = value_;
updateStatus(name);
await (0, utils_1.wait)(timeout__ || 0);
}
};
const timeout = async (status_) => {
let duration = timeout_;
if ((0, utils_1.is)('string', timeout_) &&
theme.transitions.duration[timeout_] !== undefined)
duration = theme.transitions.duration[timeout_];
if ((0, utils_1.is)('object', timeout_))
duration = timeout_[status_] !== undefined ? timeout_[status_] : timeout_.default;
if (!(0, utils_1.is)('number', duration))
duration = theme.transitions.duration.rg;
await (0, utils_1.wait)(duration);
};
const add = async () => {
updateStatus('add');
// Reflow
(0, utils_2.reflow)(refs.root.current);
// Add adding class for animation
setTimeout(() => updateStatus('adding'));
await timeout('add');
updateStatus('added');
await (0, utils_1.wait)(0);
};
const updateStatus = (status_ = status) => {
// Update
setStatus(status_);
// Subscriptions
subs.current.status.emit(status_);
switch (status_) {
case 'appended':
if ((0, utils_1.is)('function', onKeyframes))
onKeyframes(refs.root.current, status_);
if ((0, utils_1.is)('function', onAppended))
onAppended(refs.root.current);
break;
case 'add':
if ((0, utils_1.is)('function', onKeyframes))
onKeyframes(refs.root.current, status_);
if ((0, utils_1.is)('function', onAdd))
onAdd(refs.root.current);
break;
case 'adding':
if ((0, utils_1.is)('function', onKeyframes))
onKeyframes(refs.root.current, status_);
if ((0, utils_1.is)('function', onAdding))
onAdding(refs.root.current);
break;
case 'added':
if ((0, utils_1.is)('function', onKeyframes))
onKeyframes(refs.root.current, status_);
if ((0, utils_1.is)('function', onAdded))
onAdded(refs.root.current);
break;
case 'removed':
if ((0, utils_1.is)('function', onKeyframes))
onKeyframes(refs.root.current, status_);
if ((0, utils_1.is)('function', onRemoved))
onRemoved(refs.root.current);
break;
default:
if ((0, utils_1.is)('function', onKeyframes))
onKeyframes(refs.root.current, status_);
break;
}
// Add className
if (className && (0, utils_1.is)('element', refs.root.current)) {
let className_ = (0, style_react_1.classNames)([refs.root.current.className.split(' ')]);
// Remove all previous state classes
className_ = className_.replace(new RegExp(`${prefix || ''}(add)(ed|ing)?`, 'g'), '');
// Remove all previous keyframes classes
if ((0, utils_1.is)('array', keyframes)) {
const regex = new RegExp(`${keyframes.reduce((result, item, index) => result += `${index !== 0 ? '|' : ''}${item}`, '')}`, 'g');
className_ = className_.replace(regex, '');
}
// Add
className_ += ` ${prefix || ''}${status_}`;
className_ = className_.replace(/ +/g, ' ').trim();
refs.root.current.className = className_;
}
};
if (status === 'removed')
return null;
const value = {
status
};
return ((0, jsx_runtime_1.jsx)(Context_1.default.Provider, Object.assign({ value: value }, { children: (0, utils_1.is)('function', children) ?
children(status, refs.root) :
react_1.default.cloneElement(children, {
ref: (item) => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}
}) })));
};
Keyframes.displayName = 'amaui-Keyframes';
exports.default = Keyframes;