laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
271 lines (270 loc) • 7.39 kB
JavaScript
"use client";
import * as j from "react";
import { useContext as M, createContext as _, PureComponent as x, Children as p, cloneElement as N } from "react";
import J from "../../../../_virtual/isEqual.js";
import { createAnimateManager as B } from "./AnimationManager.js";
import { configEasing as D } from "./easing.js";
import R from "./configUpdate.js";
import { getTransitionVal as T } from "./util.js";
import { RequestAnimationFrameTimeoutController as U } from "./timeoutController.js";
var W = ["children", "begin", "duration", "attributeName", "easing", "isActive", "from", "to", "canBegin", "onAnimationEnd", "shouldReAnimate", "onAnimationReStart", "animationManager"];
function b() {
return b = Object.assign ? Object.assign.bind() : function(e) {
for (var t = 1; t < arguments.length; t++) {
var n = arguments[t];
for (var i in n) ({}).hasOwnProperty.call(n, i) && (e[i] = n[i]);
}
return e;
}, b.apply(null, arguments);
}
function k(e, t) {
if (e == null) return {};
var n, i, r = q(e, t);
if (Object.getOwnPropertySymbols) {
var a = Object.getOwnPropertySymbols(e);
for (i = 0; i < a.length; i++) n = a[i], t.indexOf(n) === -1 && {}.propertyIsEnumerable.call(e, n) && (r[n] = e[n]);
}
return r;
}
function q(e, t) {
if (e == null) return {};
var n = {};
for (var i in e) if ({}.hasOwnProperty.call(e, i)) {
if (t.indexOf(i) !== -1) continue;
n[i] = e[i];
}
return n;
}
function O(e, t) {
var n = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var i = Object.getOwnPropertySymbols(e);
t && (i = i.filter(function(r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), n.push.apply(n, i);
}
return n;
}
function c(e) {
for (var t = 1; t < arguments.length; t++) {
var n = arguments[t] != null ? arguments[t] : {};
t % 2 ? O(Object(n), !0).forEach(function(i) {
h(e, i, n[i]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : O(Object(n)).forEach(function(i) {
Object.defineProperty(e, i, Object.getOwnPropertyDescriptor(n, i));
});
}
return e;
}
function h(e, t, n) {
return (t = F(t)) in e ? Object.defineProperty(e, t, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = n, e;
}
function F(e) {
var t = I(e, "string");
return typeof t == "symbol" ? t : t + "";
}
function I(e, t) {
if (typeof e != "object" || !e) return e;
var n = e[Symbol.toPrimitive];
if (n !== void 0) {
var i = n.call(e, t);
if (typeof i != "object") return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (t === "string" ? String : Number)(e);
}
function K() {
return B(new U());
}
class y extends x {
constructor(t, n) {
super(t, n), h(this, "mounted", !1), h(this, "manager", null), h(this, "stopJSAnimation", null), h(this, "unSubscribe", null);
var {
isActive: i,
attributeName: r,
from: a,
to: o,
children: u,
duration: s,
animationManager: m
} = this.props;
if (this.manager = m, this.handleStyleChange = this.handleStyleChange.bind(this), this.changeStyle = this.changeStyle.bind(this), !i || s <= 0) {
this.state = {
style: {}
}, typeof u == "function" && (this.state = {
style: o
});
return;
}
if (a) {
if (typeof u == "function") {
this.state = {
style: a
};
return;
}
this.state = {
style: r ? {
[r]: a
} : a
};
} else
this.state = {
style: {}
};
}
componentDidMount() {
var {
isActive: t,
canBegin: n
} = this.props;
this.mounted = !0, !(!t || !n) && this.runAnimation(this.props);
}
componentDidUpdate(t) {
var {
isActive: n,
canBegin: i,
attributeName: r,
shouldReAnimate: a,
to: o,
from: u
} = this.props, {
style: s
} = this.state;
if (i) {
if (!n) {
var m = {
style: r ? {
[r]: o
} : o
};
this.state && s && (r && s[r] !== o || !r && s !== o) && this.setState(m);
return;
}
if (!(J(t.to, o) && t.canBegin && t.isActive)) {
var f = !t.canBegin || !t.isActive;
this.manager.stop(), this.stopJSAnimation && this.stopJSAnimation();
var l = f || a ? u : t.to;
if (this.state && s) {
var d = {
style: r ? {
[r]: l
} : l
};
(r && s[r] !== l || !r && s !== l) && this.setState(d);
}
this.runAnimation(c(c({}, this.props), {}, {
from: l,
begin: 0
}));
}
}
}
componentWillUnmount() {
this.mounted = !1;
var {
onAnimationEnd: t
} = this.props;
this.unSubscribe && this.unSubscribe(), this.manager.stop(), this.stopJSAnimation && this.stopJSAnimation(), t && t();
}
handleStyleChange(t) {
this.changeStyle(t);
}
changeStyle(t) {
this.mounted && this.setState({
style: t
});
}
runJSAnimation(t) {
var {
from: n,
to: i,
duration: r,
easing: a,
begin: o,
onAnimationEnd: u,
onAnimationStart: s
} = t, m = R(n, i, D(a), r, this.changeStyle, this.manager.getTimeoutController()), f = () => {
this.stopJSAnimation = m();
};
this.manager.start([s, o, f, r, u]);
}
runAnimation(t) {
var {
begin: n,
duration: i,
attributeName: r,
to: a,
easing: o,
onAnimationStart: u,
onAnimationEnd: s,
children: m
} = t;
if (this.unSubscribe = this.manager.subscribe(this.handleStyleChange), typeof o == "function" || typeof m == "function" || o === "spring") {
this.runJSAnimation(t);
return;
}
var f = r ? {
[r]: a
} : a, l = T(Object.keys(f), i, o);
this.manager.start([u, n, c(c({}, f), {}, {
transition: l
}), i, s]);
}
render() {
var t = this.props, {
children: n,
begin: i,
duration: r,
attributeName: a,
easing: o,
isActive: u,
from: s,
to: m,
canBegin: f,
onAnimationEnd: l,
shouldReAnimate: d,
onAnimationReStart: L,
animationManager: V
} = t, P = k(t, W), v = p.count(n), A = this.state.style;
if (typeof n == "function")
return n(A);
if (!u || v === 0 || r <= 0)
return n;
var S = (g) => {
var {
style: w = {},
className: E
} = g.props, C = /* @__PURE__ */ N(g, c(c({}, P), {}, {
style: c(c({}, w), A),
className: E
}));
return C;
};
return v === 1 ? S(p.only(n)) : /* @__PURE__ */ j.createElement("div", null, p.map(n, (g) => S(g)));
}
}
h(y, "displayName", "Animate");
h(y, "defaultProps", {
begin: 0,
duration: 1e3,
attributeName: "",
easing: "ease",
isActive: !0,
canBegin: !0,
onAnimationEnd: () => {
},
onAnimationStart: () => {
}
});
var $ = /* @__PURE__ */ _(null);
function tt(e) {
var t, n, i = M($);
return /* @__PURE__ */ j.createElement(y, b({}, e, {
animationManager: (t = (n = e.animationManager) !== null && n !== void 0 ? n : i) !== null && t !== void 0 ? t : K()
}));
}
export {
tt as Animate,
$ as AnimationManagerContext
};