UNPKG

@sourcebug/magic-design-react

Version:

A component library that can achieve magic effects

10 lines (9 loc) 6.87 kB
(function(l,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],i):(l=typeof globalThis!="undefined"?globalThis:l||self,i(l.magicDesign={},l.React))})(this,function(l,i){"use strict";function M(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var h=M(i),p={"element-2d":"_element-2d_tm8h5_1",element2d:"_element-2d_tm8h5_1","element-3d":"_element-3d_tm8h5_1",element3d:"_element-3d_tm8h5_1","corner-swiper":"_corner-swiper_tm8h5_1",cornerSwiper:"_corner-swiper_tm8h5_1","swiper-container":"_swiper-container_tm8h5_5",swiperContainer:"_swiper-container_tm8h5_5"},x={exports:{}},f={};/** * @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 D=h.default,U=Symbol.for("react.element"),B=Symbol.for("react.fragment"),J=Object.prototype.hasOwnProperty,Y=D.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,z={key:!0,ref:!0,__self:!0,__source:!0};function k(e,n,r){var s,a={},c=null,o=null;r!==void 0&&(c=""+r),n.key!==void 0&&(c=""+n.key),n.ref!==void 0&&(o=n.ref);for(s in n)J.call(n,s)&&!z.hasOwnProperty(s)&&(a[s]=n[s]);if(e&&e.defaultProps)for(s in n=e.defaultProps,n)a[s]===void 0&&(a[s]=n[s]);return{$$typeof:U,type:e,key:c,ref:o,props:a,_owner:Y.current}}f.Fragment=B,f.jsx=k,f.jsxs=k,x.exports=f;const t=x.exports.jsx,_=x.exports.jsxs,G=270,H=({current:e,children:n,className:r="",position:s=.2,rotateX:a="0deg",rotateY:c="-45deg",defaultCurrent:o=0,defaultMargin:u=!0,perspective:m="1000px",perspectiveOriginX:N="50%",perspectiveOriginY:S="50%"})=>{const[te]=i.useState(o),re=e!=null?e:te,$=i.useMemo(()=>{const W=Array.isArray(n)?n:[n];return u?W.map(C=>h.default.cloneElement(C,{...C.props,className:`${C.props.className||""} mg-mr-5`})):W},[n,u]),d=t("div",{className:`mg-w-full mg-h-full mg-flex-row mg-flex mg-flex-nowrap ${r}`,children:$}),L=re/$.length,A=`${(s+L)*100}%`,se=h.default.cloneElement(d,{...d.props,className:`mg-absolute mg-top-0 mg-left-0 mg-overflow-hidden ${p["element-3d"]} ${d.props.className}`,style:{"--position":A,"--rotate-x":a,"--rotate-y":c}}),ae=h.default.cloneElement(d,{...d.props,className:` mg-relative ${p["element-2d"]} ${d.props.className}`,style:{"--position":A,"--rotate-x":a}});return t("div",{className:`${p["swiper-container"]}`,style:{transform:`translatex(${-L*G*$.length}px)`},children:_("div",{className:`mg-w-full mg-h-full mg-relative ${p["corner-swiper"]}`,style:{perspective:m,perspectiveOrigin:`${N} ${S}`},children:[se,ae]})})},b=({children:e,className:n="",...r})=>t("div",{className:`mg-w-full mg-h-full ${n}`,...r,children:e});b.displayName="SwiperItem";var O={cloud:"_cloud_18iyn_6",move:"_move_18iyn_1",cloudx:"_cloudx_18iyn_18"};const j=({className:e=""})=>_("div",{className:e,children:[t("div",{className:O.cloud}),t("div",{className:O.cloudx})]});var v={night:"_night_w4lpv_11",meteor:"_meteor_w4lpv_1",moon:"_moon_w4lpv_50",spot1:"_spot1_w4lpv_61",spot2:"_spot2_w4lpv_71"};const q=({className:e=""})=>t("div",{className:e,children:_("div",{className:v.night,children:[t("span",{className:v.moon}),t("span",{className:v.spot1}),t("span",{className:v.spot2}),_("ul",{children:[t("li",{}),t("li",{}),t("li",{}),t("li",{}),t("li",{})]})]})});var T={rainy:"_rainy_1dkxs_27",fall:"_fall_1dkxs_1","rainy-cloud":"_rainy-cloud_1dkxs_62",rainyCloud:"_rainy-cloud_1dkxs_62","rainy-flash":"_rainy-flash_1dkxs_1",rainyFlash:"_rainy-flash_1dkxs_1"};const E=({className:e=""})=>_("div",{className:`${T.rainy} ${e}`,children:[_("ul",{children:[t("li",{}),t("li",{}),t("li",{}),t("li",{}),t("li",{})]}),t("span",{className:T["rainy-cloud"]})]});var w={snowy:"_snowy_yom2l_13",fall:"_fall_yom2l_1",snowe:"_snowe_yom2l_66",snowex:"_snowex_yom2l_76",stick:"_stick_yom2l_86",stick2:"_stick2_yom2l_97"};const R=({className:e=""})=>_("div",{className:`${w.snowy} ${e}`,children:[_("ul",{children:[t("li",{}),t("li",{}),t("li",{}),t("li",{}),t("li",{}),t("li",{}),t("li",{}),t("li",{})]}),t("span",{className:w.snowe}),t("span",{className:w.snowex}),t("span",{className:w.stick}),t("span",{className:w.stick2})]});var I={sun:"_sun_14k97_9",inex:"_inex_14k97_1",sunx:"_sunx_14k97_21"};const P=({className:e})=>_("div",{className:e,children:[t("div",{className:I.sun}),t("div",{className:I.sunx})]});var K=function(n){return typeof n=="function"},Q=function(n,r){return!Object.is(n,r)};function V(e,n){n===void 0&&(n=Q);var r=i.useRef(),s=i.useRef();return n(s.current,e)&&(r.current=s.current,s.current=e),r.current}var g=globalThis&&globalThis.__assign||function(){return g=Object.assign||function(e){for(var n,r=1,s=arguments.length;r<s;r++){n=arguments[r];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},g.apply(this,arguments)},Z=globalThis&&globalThis.__read||function(e,n){var r=typeof Symbol=="function"&&e[Symbol.iterator];if(!r)return e;var s=r.call(e),a,c=[],o;try{for(;(n===void 0||n-- >0)&&!(a=s.next()).done;)c.push(a.value)}catch(u){o={error:u}}finally{try{a&&!a.done&&(r=s.return)&&r.call(s)}finally{if(o)throw o.error}}return c},X=function(n){var r=Z(i.useState(n),2),s=r[0],a=r[1],c=i.useCallback(function(o){a(function(u){var m=K(o)?o(u):o;return m?g(g({},u),m):u})},[]);return[s,c]},ee=X,y={"weather-container":"_weather-container_r2qa2_1",weatherContainer:"_weather-container_r2qa2_1","weather-sunny":"_weather-sunny_r2qa2_10",weatherSunny:"_weather-sunny_r2qa2_10","weather-cloudy":"_weather-cloudy_r2qa2_16",weatherCloudy:"_weather-cloudy_r2qa2_16","weather-rainy":"_weather-rainy_r2qa2_22",weatherRainy:"_weather-rainy_r2qa2_22","weather-snowy":"_weather-snowy_r2qa2_28",weatherSnowy:"_weather-snowy_r2qa2_28","weather-nighty":"_weather-nighty_r2qa2_34",weatherNighty:"_weather-nighty_r2qa2_34"};const F={sunny:{class:y["weather-sunny"],component:P},cloudy:{class:y["weather-cloudy"],component:j},rainy:{class:y["weather-rainy"],component:E},snowy:{class:y["weather-snowy"],component:R},nighty:{class:y["weather-nighty"],component:q}},ne=({type:e,duration:n=3600,iconDuration:r,className:s=""})=>{const{class:a,component:c}=F[e],o=V(e),{component:u}=F[o||e],[m,N]=ee({preClassName:"",curClassName:""});i.useEffect(()=>{!o||N({preClassName:"animate__fadeOut",curClassName:"animate__fadeIn"})},[o,e,N]);const S={"--animate-duration":`${r!=null?r:n/2}ms`};return _("div",{className:`${y["weather-container"]} ${a} ${s}`,style:S,children:[o?t(u,{className:`animate__animated ${m.preClassName}`}):null,t(c,{className:`animate__animated ${m.curClassName}`})]})};l.Cloudy=j,l.CornerSwiper=H,l.Nighty=q,l.Rainy=E,l.Snowy=R,l.Sunny=P,l.SwiperItem=b,l.Weather=ne,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});