401 lines
9.8 KiB
JavaScript
401 lines
9.8 KiB
JavaScript
"use strict";
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/index.ts
|
|
var src_exports = {};
|
|
__export(src_exports, {
|
|
a: () => animated,
|
|
animated: () => animated
|
|
});
|
|
module.exports = __toCommonJS(src_exports);
|
|
var import_core = require("@react-spring/core");
|
|
var import_react_dom = require("react-dom");
|
|
var import_shared2 = require("@react-spring/shared");
|
|
var import_animated2 = require("@react-spring/animated");
|
|
|
|
// src/applyAnimatedValues.ts
|
|
var isCustomPropRE = /^--/;
|
|
function dangerousStyleValue(name, value) {
|
|
if (value == null || typeof value === "boolean" || value === "") return "";
|
|
if (typeof value === "number" && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]))
|
|
return value + "px";
|
|
return ("" + value).trim();
|
|
}
|
|
var attributeCache = {};
|
|
function applyAnimatedValues(instance, props) {
|
|
if (!instance.nodeType || !instance.setAttribute) {
|
|
return false;
|
|
}
|
|
const isFilterElement = instance.nodeName === "filter" || instance.parentNode && instance.parentNode.nodeName === "filter";
|
|
const {
|
|
className,
|
|
style,
|
|
children,
|
|
scrollTop,
|
|
scrollLeft,
|
|
viewBox,
|
|
...attributes
|
|
} = props;
|
|
const values = Object.values(attributes);
|
|
const names = Object.keys(attributes).map(
|
|
(name) => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(
|
|
/([A-Z])/g,
|
|
// Attributes are written in dash case
|
|
(n) => "-" + n.toLowerCase()
|
|
))
|
|
);
|
|
if (children !== void 0) {
|
|
instance.textContent = children;
|
|
}
|
|
for (const name in style) {
|
|
if (style.hasOwnProperty(name)) {
|
|
const value = dangerousStyleValue(name, style[name]);
|
|
if (isCustomPropRE.test(name)) {
|
|
instance.style.setProperty(name, value);
|
|
} else {
|
|
instance.style[name] = value;
|
|
}
|
|
}
|
|
}
|
|
names.forEach((name, i) => {
|
|
instance.setAttribute(name, values[i]);
|
|
});
|
|
if (className !== void 0) {
|
|
instance.className = className;
|
|
}
|
|
if (scrollTop !== void 0) {
|
|
instance.scrollTop = scrollTop;
|
|
}
|
|
if (scrollLeft !== void 0) {
|
|
instance.scrollLeft = scrollLeft;
|
|
}
|
|
if (viewBox !== void 0) {
|
|
instance.setAttribute("viewBox", viewBox);
|
|
}
|
|
}
|
|
var isUnitlessNumber = {
|
|
animationIterationCount: true,
|
|
borderImageOutset: true,
|
|
borderImageSlice: true,
|
|
borderImageWidth: true,
|
|
boxFlex: true,
|
|
boxFlexGroup: true,
|
|
boxOrdinalGroup: true,
|
|
columnCount: true,
|
|
columns: true,
|
|
flex: true,
|
|
flexGrow: true,
|
|
flexPositive: true,
|
|
flexShrink: true,
|
|
flexNegative: true,
|
|
flexOrder: true,
|
|
gridRow: true,
|
|
gridRowEnd: true,
|
|
gridRowSpan: true,
|
|
gridRowStart: true,
|
|
gridColumn: true,
|
|
gridColumnEnd: true,
|
|
gridColumnSpan: true,
|
|
gridColumnStart: true,
|
|
fontWeight: true,
|
|
lineClamp: true,
|
|
lineHeight: true,
|
|
opacity: true,
|
|
order: true,
|
|
orphans: true,
|
|
tabSize: true,
|
|
widows: true,
|
|
zIndex: true,
|
|
zoom: true,
|
|
// SVG-related properties
|
|
fillOpacity: true,
|
|
floodOpacity: true,
|
|
stopOpacity: true,
|
|
strokeDasharray: true,
|
|
strokeDashoffset: true,
|
|
strokeMiterlimit: true,
|
|
strokeOpacity: true,
|
|
strokeWidth: true
|
|
};
|
|
var prefixKey = (prefix, key) => prefix + key.charAt(0).toUpperCase() + key.substring(1);
|
|
var prefixes = ["Webkit", "Ms", "Moz", "O"];
|
|
isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
|
|
prefixes.forEach((prefix) => acc[prefixKey(prefix, prop)] = acc[prop]);
|
|
return acc;
|
|
}, isUnitlessNumber);
|
|
|
|
// src/AnimatedStyle.ts
|
|
var import_animated = require("@react-spring/animated");
|
|
var import_shared = require("@react-spring/shared");
|
|
var domTransforms = /^(matrix|translate|scale|rotate|skew)/;
|
|
var pxTransforms = /^(translate)/;
|
|
var degTransforms = /^(rotate|skew)/;
|
|
var addUnit = (value, unit) => import_shared.is.num(value) && value !== 0 ? value + unit : value;
|
|
var isValueIdentity = (value, id) => import_shared.is.arr(value) ? value.every((v) => isValueIdentity(v, id)) : import_shared.is.num(value) ? value === id : parseFloat(value) === id;
|
|
var AnimatedStyle = class extends import_animated.AnimatedObject {
|
|
constructor({ x, y, z, ...style }) {
|
|
const inputs = [];
|
|
const transforms = [];
|
|
if (x || y || z) {
|
|
inputs.push([x || 0, y || 0, z || 0]);
|
|
transforms.push((xyz) => [
|
|
`translate3d(${xyz.map((v) => addUnit(v, "px")).join(",")})`,
|
|
// prettier-ignore
|
|
isValueIdentity(xyz, 0)
|
|
]);
|
|
}
|
|
(0, import_shared.eachProp)(style, (value, key) => {
|
|
if (key === "transform") {
|
|
inputs.push([value || ""]);
|
|
transforms.push((transform) => [transform, transform === ""]);
|
|
} else if (domTransforms.test(key)) {
|
|
delete style[key];
|
|
if (import_shared.is.und(value)) return;
|
|
const unit = pxTransforms.test(key) ? "px" : degTransforms.test(key) ? "deg" : "";
|
|
inputs.push((0, import_shared.toArray)(value));
|
|
transforms.push(
|
|
key === "rotate3d" ? ([x2, y2, z2, deg]) => [
|
|
`rotate3d(${x2},${y2},${z2},${addUnit(deg, unit)})`,
|
|
isValueIdentity(deg, 0)
|
|
] : (input) => [
|
|
`${key}(${input.map((v) => addUnit(v, unit)).join(",")})`,
|
|
isValueIdentity(input, key.startsWith("scale") ? 1 : 0)
|
|
]
|
|
);
|
|
}
|
|
});
|
|
if (inputs.length) {
|
|
style.transform = new FluidTransform(inputs, transforms);
|
|
}
|
|
super(style);
|
|
}
|
|
};
|
|
var FluidTransform = class extends import_shared.FluidValue {
|
|
constructor(inputs, transforms) {
|
|
super();
|
|
this.inputs = inputs;
|
|
this.transforms = transforms;
|
|
this._value = null;
|
|
}
|
|
get() {
|
|
return this._value || (this._value = this._get());
|
|
}
|
|
_get() {
|
|
let transform = "";
|
|
let identity = true;
|
|
(0, import_shared.each)(this.inputs, (input, i) => {
|
|
const arg1 = (0, import_shared.getFluidValue)(input[0]);
|
|
const [t, id] = this.transforms[i](
|
|
import_shared.is.arr(arg1) ? arg1 : input.map(import_shared.getFluidValue)
|
|
);
|
|
transform += " " + t;
|
|
identity = identity && id;
|
|
});
|
|
return identity ? "none" : transform;
|
|
}
|
|
// Start observing our inputs once we have an observer.
|
|
observerAdded(count) {
|
|
if (count == 1)
|
|
(0, import_shared.each)(
|
|
this.inputs,
|
|
(input) => (0, import_shared.each)(
|
|
input,
|
|
(value) => (0, import_shared.hasFluidValue)(value) && (0, import_shared.addFluidObserver)(value, this)
|
|
)
|
|
);
|
|
}
|
|
// Stop observing our inputs once we have no observers.
|
|
observerRemoved(count) {
|
|
if (count == 0)
|
|
(0, import_shared.each)(
|
|
this.inputs,
|
|
(input) => (0, import_shared.each)(
|
|
input,
|
|
(value) => (0, import_shared.hasFluidValue)(value) && (0, import_shared.removeFluidObserver)(value, this)
|
|
)
|
|
);
|
|
}
|
|
eventObserved(event) {
|
|
if (event.type == "change") {
|
|
this._value = null;
|
|
}
|
|
(0, import_shared.callFluidObservers)(this, event);
|
|
}
|
|
};
|
|
|
|
// src/primitives.ts
|
|
var primitives = [
|
|
"a",
|
|
"abbr",
|
|
"address",
|
|
"area",
|
|
"article",
|
|
"aside",
|
|
"audio",
|
|
"b",
|
|
"base",
|
|
"bdi",
|
|
"bdo",
|
|
"big",
|
|
"blockquote",
|
|
"body",
|
|
"br",
|
|
"button",
|
|
"canvas",
|
|
"caption",
|
|
"cite",
|
|
"code",
|
|
"col",
|
|
"colgroup",
|
|
"data",
|
|
"datalist",
|
|
"dd",
|
|
"del",
|
|
"details",
|
|
"dfn",
|
|
"dialog",
|
|
"div",
|
|
"dl",
|
|
"dt",
|
|
"em",
|
|
"embed",
|
|
"fieldset",
|
|
"figcaption",
|
|
"figure",
|
|
"footer",
|
|
"form",
|
|
"h1",
|
|
"h2",
|
|
"h3",
|
|
"h4",
|
|
"h5",
|
|
"h6",
|
|
"head",
|
|
"header",
|
|
"hgroup",
|
|
"hr",
|
|
"html",
|
|
"i",
|
|
"iframe",
|
|
"img",
|
|
"input",
|
|
"ins",
|
|
"kbd",
|
|
"keygen",
|
|
"label",
|
|
"legend",
|
|
"li",
|
|
"link",
|
|
"main",
|
|
"map",
|
|
"mark",
|
|
"menu",
|
|
"menuitem",
|
|
"meta",
|
|
"meter",
|
|
"nav",
|
|
"noscript",
|
|
"object",
|
|
"ol",
|
|
"optgroup",
|
|
"option",
|
|
"output",
|
|
"p",
|
|
"param",
|
|
"picture",
|
|
"pre",
|
|
"progress",
|
|
"q",
|
|
"rp",
|
|
"rt",
|
|
"ruby",
|
|
"s",
|
|
"samp",
|
|
"script",
|
|
"section",
|
|
"select",
|
|
"small",
|
|
"source",
|
|
"span",
|
|
"strong",
|
|
"style",
|
|
"sub",
|
|
"summary",
|
|
"sup",
|
|
"table",
|
|
"tbody",
|
|
"td",
|
|
"textarea",
|
|
"tfoot",
|
|
"th",
|
|
"thead",
|
|
"time",
|
|
"title",
|
|
"tr",
|
|
"track",
|
|
"u",
|
|
"ul",
|
|
"var",
|
|
"video",
|
|
"wbr",
|
|
// SVG
|
|
"circle",
|
|
"clipPath",
|
|
"defs",
|
|
"ellipse",
|
|
"foreignObject",
|
|
"g",
|
|
"image",
|
|
"line",
|
|
"linearGradient",
|
|
"mask",
|
|
"path",
|
|
"pattern",
|
|
"polygon",
|
|
"polyline",
|
|
"radialGradient",
|
|
"rect",
|
|
"stop",
|
|
"svg",
|
|
"text",
|
|
"tspan"
|
|
];
|
|
|
|
// src/index.ts
|
|
__reExport(src_exports, require("@react-spring/core"), module.exports);
|
|
import_core.Globals.assign({
|
|
batchedUpdates: import_react_dom.unstable_batchedUpdates,
|
|
createStringInterpolator: import_shared2.createStringInterpolator,
|
|
colors: import_shared2.colors
|
|
});
|
|
var host = (0, import_animated2.createHost)(primitives, {
|
|
applyAnimatedValues,
|
|
createAnimatedStyle: (style) => new AnimatedStyle(style),
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
getComponentProps: ({ scrollTop, scrollLeft, ...props }) => props
|
|
});
|
|
var animated = host.animated;
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
a,
|
|
animated,
|
|
...require("@react-spring/core")
|
|
});
|