@source-bug/magic-design-react
Version:
A component library that can achieve magic effects
354 lines (353 loc) • 10.2 kB
JavaScript
import React, { useState, useMemo, useRef, useEffect } from "react";
const element2d = "_element-2d_tm8h5_1";
const element3d = "_element-3d_tm8h5_1";
const cornerSwiper = "_corner-swiper_tm8h5_1";
const swiperContainer = "_swiper-container_tm8h5_5";
var styles$6 = {
"element-2d": "_element-2d_tm8h5_1",
element2d,
"element-3d": "_element-3d_tm8h5_1",
element3d,
"corner-swiper": "_corner-swiper_tm8h5_1",
cornerSwiper,
"swiper-container": "_swiper-container_tm8h5_5",
swiperContainer
};
var jsxRuntime = { exports: {} };
var reactJsxRuntime_production_min = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var f = React, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
function q(c, a, g) {
var b, d = {}, e = null, h = null;
void 0 !== g && (e = "" + g);
void 0 !== a.key && (e = "" + a.key);
void 0 !== a.ref && (h = a.ref);
for (b in a)
m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
if (c && c.defaultProps)
for (b in a = c.defaultProps, a)
void 0 === d[b] && (d[b] = a[b]);
return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
}
reactJsxRuntime_production_min.Fragment = l;
reactJsxRuntime_production_min.jsx = q;
reactJsxRuntime_production_min.jsxs = q;
{
jsxRuntime.exports = reactJsxRuntime_production_min;
}
const jsx = jsxRuntime.exports.jsx;
const jsxs = jsxRuntime.exports.jsxs;
const oneItem = 270;
const CornerSwiper = ({
current,
children,
className = "",
position = 0.2,
rotateX = "0deg",
rotateY = "-45deg",
defaultCurrent = 0,
defaultMargin = true,
perspective = "1000px",
perspectiveOriginX = "50%",
perspectiveOriginY = "50%"
}) => {
const [_currentIndex] = useState(defaultCurrent);
const currentIndex = current != null ? current : _currentIndex;
const childrenList = useMemo(() => {
const childList = Array.isArray(children) ? children : [children];
if (!defaultMargin) {
return childList;
}
return childList.map((child) => React.cloneElement(child, {
...child.props,
className: `${child.props.className || ""} mg-mr-5`
}));
}, [children, defaultMargin]);
const swiperElement = /* @__PURE__ */ jsx("div", {
className: `mg-w-full mg-h-full mg-flex-row mg-flex mg-flex-nowrap ${className}`,
children: childrenList
});
const translatePercent = currentIndex / childrenList.length;
const positionStr = `${(position + translatePercent) * 100}%`;
const element3D = React.cloneElement(swiperElement, {
...swiperElement.props,
className: `mg-absolute mg-top-0 mg-left-0 mg-overflow-hidden ${styles$6["element-3d"]} ${swiperElement.props.className}`,
style: {
"--position": positionStr,
"--rotate-x": rotateX,
"--rotate-y": rotateY
}
});
const element2D = React.cloneElement(swiperElement, {
...swiperElement.props,
className: ` mg-relative ${styles$6["element-2d"]} ${swiperElement.props.className}`,
style: {
"--position": positionStr,
"--rotate-x": rotateX
}
});
return /* @__PURE__ */ jsx("div", {
className: `${styles$6["swiper-container"]}`,
style: {
transform: `translatex(${-translatePercent * oneItem * childrenList.length}px)`
},
children: /* @__PURE__ */ jsxs("div", {
className: `mg-w-full mg-h-full mg-relative ${styles$6["corner-swiper"]}`,
style: {
perspective,
perspectiveOrigin: `${perspectiveOriginX} ${perspectiveOriginY}`
},
children: [element3D, element2D]
})
});
};
const SwiperItem = ({
children,
className = "",
...rest
}) => {
return /* @__PURE__ */ jsx("div", {
className: `mg-w-full mg-h-full ${className}`,
...rest,
children
});
};
SwiperItem.displayName = "SwiperItem";
const cloud = "_cloud_18iyn_6";
const move = "_move_18iyn_1";
const cloudx = "_cloudx_18iyn_18";
var styles$5 = {
cloud,
move,
cloudx
};
const Cloudy = ({
className = ""
}) => {
return /* @__PURE__ */ jsxs("div", {
className,
children: [/* @__PURE__ */ jsx("div", {
className: styles$5.cloud
}), /* @__PURE__ */ jsx("div", {
className: styles$5.cloudx
})]
});
};
const night = "_night_w4lpv_11";
const meteor = "_meteor_w4lpv_1";
const moon = "_moon_w4lpv_50";
const spot1 = "_spot1_w4lpv_61";
const spot2 = "_spot2_w4lpv_71";
var styles$4 = {
night,
meteor,
moon,
spot1,
spot2
};
const Nighty = ({
className = ""
}) => {
return /* @__PURE__ */ jsx("div", {
className,
children: /* @__PURE__ */ jsxs("div", {
className: styles$4.night,
children: [/* @__PURE__ */ jsx("span", {
className: styles$4.moon
}), /* @__PURE__ */ jsx("span", {
className: styles$4.spot1
}), /* @__PURE__ */ jsx("span", {
className: styles$4.spot2
}), /* @__PURE__ */ jsxs("ul", {
children: [/* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {})]
})]
})
});
};
const rainy = "_rainy_1dkxs_27";
const fall$1 = "_fall_1dkxs_1";
const rainyCloud = "_rainy-cloud_1dkxs_62";
const rainyFlash = "_rainy-flash_1dkxs_1";
var styles$3 = {
rainy,
fall: fall$1,
"rainy-cloud": "_rainy-cloud_1dkxs_62",
rainyCloud,
"rainy-flash": "_rainy-flash_1dkxs_1",
rainyFlash
};
const Rainy = ({
className = ""
}) => {
return /* @__PURE__ */ jsxs("div", {
className: `${styles$3.rainy} ${className}`,
children: [/* @__PURE__ */ jsxs("ul", {
children: [/* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {})]
}), /* @__PURE__ */ jsx("span", {
className: styles$3["rainy-cloud"]
})]
});
};
const snowy = "_snowy_yom2l_13";
const fall = "_fall_yom2l_1";
const snowe = "_snowe_yom2l_66";
const snowex = "_snowex_yom2l_76";
const stick = "_stick_yom2l_86";
const stick2 = "_stick2_yom2l_97";
var styles$2 = {
snowy,
fall,
snowe,
snowex,
stick,
stick2
};
const Snowy = ({
className = ""
}) => {
return /* @__PURE__ */ jsxs("div", {
className: `${styles$2.snowy} ${className}`,
children: [/* @__PURE__ */ jsxs("ul", {
children: [/* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {}), /* @__PURE__ */ jsx("li", {})]
}), /* @__PURE__ */ jsx("span", {
className: styles$2.snowe
}), /* @__PURE__ */ jsx("span", {
className: styles$2.snowex
}), /* @__PURE__ */ jsx("span", {
className: styles$2.stick
}), /* @__PURE__ */ jsx("span", {
className: styles$2.stick2
})]
});
};
const sun = "_sun_14k97_9";
const inex = "_inex_14k97_1";
const sunx = "_sunx_14k97_21";
var styles$1 = {
sun,
inex,
sunx
};
const Sunny = ({
className
}) => {
return /* @__PURE__ */ jsxs("div", {
className,
children: [/* @__PURE__ */ jsx("div", {
className: styles$1.sun
}), /* @__PURE__ */ jsx("div", {
className: styles$1.sunx
})]
});
};
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
const useSetState = (initVal) => {
const [state, setState] = useState(initVal);
return [state, (obj) => {
if (obj instanceof Object) {
setState({
...state,
...obj
});
return;
}
setState(obj);
}];
};
const weatherContainer = "_weather-container_r2qa2_1";
const weatherSunny = "_weather-sunny_r2qa2_10";
const weatherCloudy = "_weather-cloudy_r2qa2_16";
const weatherRainy = "_weather-rainy_r2qa2_22";
const weatherSnowy = "_weather-snowy_r2qa2_28";
const weatherNighty = "_weather-nighty_r2qa2_34";
var styles = {
"weather-container": "_weather-container_r2qa2_1",
weatherContainer,
"weather-sunny": "_weather-sunny_r2qa2_10",
weatherSunny,
"weather-cloudy": "_weather-cloudy_r2qa2_16",
weatherCloudy,
"weather-rainy": "_weather-rainy_r2qa2_22",
weatherRainy,
"weather-snowy": "_weather-snowy_r2qa2_28",
weatherSnowy,
"weather-nighty": "_weather-nighty_r2qa2_34",
weatherNighty
};
const WeatherTypeStore = {
["sunny"]: {
class: styles["weather-sunny"],
component: Sunny
},
["cloudy"]: {
class: styles["weather-cloudy"],
component: Cloudy
},
["rainy"]: {
class: styles["weather-rainy"],
component: Rainy
},
["snowy"]: {
class: styles["weather-snowy"],
component: Snowy
},
["nighty"]: {
class: styles["weather-nighty"],
component: Nighty
}
};
const Weather = ({
type,
duration = 3600,
iconDuration,
className = ""
}) => {
const {
class: typeClassName,
component: Component
} = WeatherTypeStore[type];
const preType = usePrevious(type);
const {
component: PreComponent
} = WeatherTypeStore[preType || type];
const [animates, setAnimates] = useSetState({
preClassName: "",
curClassName: ""
});
useEffect(() => {
if (!preType) {
return;
}
setAnimates({
preClassName: "animate__fadeOut",
curClassName: "animate__fadeIn"
});
}, [preType, type, setAnimates]);
const style = {
"--animate-duration": `${iconDuration != null ? iconDuration : duration / 2}ms`
};
return /* @__PURE__ */ jsxs("div", {
className: `${styles["weather-container"]} ${typeClassName} ${className}`,
style,
children: [preType ? /* @__PURE__ */ jsx(PreComponent, {
className: `animate__animated ${animates.preClassName}`
}) : null, /* @__PURE__ */ jsx(Component, {
className: `animate__animated ${animates.curClassName}`
})]
});
};
export { Cloudy, CornerSwiper, Nighty, Rainy, Snowy, Sunny, SwiperItem, Weather };