ono-react-element 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/AvatarCrop-ByE8oq-Y.js +1 -0
- package/dist/es/Mark-DAMtImfr.js +1 -0
- package/dist/es/TemplateDialog-CEfbPFNt.js +1 -0
- package/dist/es/index.js +1 -1
- package/dist/index.css +1 -1
- package/dist/style/Mark.css +1 -0
- package/dist/style/TemplateDialog.css +1 -1
- package/dist/types/components/Mark/Mark.d.ts +7 -0
- package/dist/types/components/Mark/index.d.ts +1 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.css.br +0 -0
- package/dist/umd/index.css.gz +0 -0
- package/dist/umd/index.umd.cjs +965 -1
- package/dist/umd/index.umd.cjs.br +0 -0
- package/dist/umd/index.umd.cjs.gz +0 -0
- package/package.json +5 -5
- package/dist/es/AvatarCrop-DHnxRLP9.js +0 -1
- package/dist/es/TemplateDialog-xcIPaUIe.js +0 -1
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ono-react-element",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.6",
|
|
5
5
|
"description": "Component library by React + Typescript",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/umd/index.umd.cjs",
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
"license": "MIT",
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@popperjs/core": "^2.11.8",
|
|
37
|
-
"@onoxm/
|
|
38
|
-
"@onoxm/react-
|
|
39
|
-
"@onoxm/
|
|
40
|
-
"@onoxm/utils": "0.1.
|
|
37
|
+
"@onoxm/react-hooks": "0.1.6",
|
|
38
|
+
"@onoxm/react-tools": "0.1.6",
|
|
39
|
+
"@onoxm/event": "0.1.6",
|
|
40
|
+
"@onoxm/utils": "0.1.6"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@types/react": ">=18",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsx as re,jsxs as me,Fragment as ge}from "react/jsx-runtime";import{c as de}from "react/compiler-runtime";import{useState as _,useRef as we,useEffect as he}from "react";const fe=(z)=>{const e=de(70),{imageFile:m,cvsW:H,maskBG:J,border:K,wheelScale:Q,setCtx:D,maskInfo:a,setMaskInfo:b,imageStartState:I,setImageStartState:$,imageState:t,setImageState:o}=z,V=H===void 0 ? 520:H,M=J===void 0 ? "rgba(0,0,0,0.5)":J,w=K===void 0 ? "4px solid #fff":K,L=Q===void 0 ? 0.1:Q,[r,c]=_();let E;e[0]===Symbol.for("react.memo_cache_sentinel")?(E={w:0,h:0},e[0]=E):E=e[0];const [d,ce]=_(E);let v;e[1]===Symbol.for("react.memo_cache_sentinel")?(v={w:0,h:0},e[1]=v):v=e[1];const [i,G]=_(v);let k;e[2]===Symbol.for("react.memo_cache_sentinel")?(k={x:0,y:0},e[2]=k):k=e[2];const [g,S]=_(k),[p,U]=_(!1),N=we(null),x=we(null),s=ue;let f,y,W;if(e[3]!==w||e[4]!==m||e[5]!==D||e[6]!==$||e[7]!==o||e[8]!==b){let l;y=()=>{if(!N.current)return;const{width:n}=N.current.getBoundingClientRect();C(n),ce({w:n,h:n});},e[11]!==w ?(l=()=>{const n=w.split(" ");let h=0;return n.forEach((j)=>{j.includes("px")&&(h=Number(j.split("px")[0]));}),h;},e[11]=w,e[12]=l):l=e[12],f=l;const C=(n)=>{const h=new Image();h.src=typeof m=="string" ? m:URL.createObjectURL(m),h.onload=()=>{let j,R=h.width,B=h.height;R>B ?(j=R/n,R=n,B/=j,s({w:B},b)):(j=B/n,B=n,R/=j,s({w:R},b));const ne=(n-R)/2,se=(n-B)/2;s({w:h.width,h:h.height},G),c(h),s({w:R,h:B,t:se,l:ne},o),$({w:R,h:B,t:se,l:ne}),s(ne>se ?{l:ne}:{l:se},b),D(x.current?.getContext("2d"));};};e[3]=w,e[4]=m,e[5]=D,e[6]=$,e[7]=o,e[8]=b,e[9]=f,e[10]=y;}else f=e[9],y=e[10];e[13]!==t.h||e[14]!==t.l||e[15]!==t.t||e[16]!==t.w||e[17]!==a.l||e[18]!==a.w||e[19]!==o ?(W=()=>{U(!1),t.l>a.l&&s({l:a.l},o),t.t>a.l&&s({t:a.l},o),-t.l>t.w-a.l-a.w&&s({l:-(t.w-a.l-a.w)},o),-t.t>t.h-a.l-a.w&&s({t:-(t.h-a.l-a.w)},o);},e[13]=t.h,e[14]=t.l,e[15]=t.t,e[16]=t.w,e[17]=a.l,e[18]=a.w,e[19]=o,e[20]=W):W=e[20];const u=W;let Y;e[21]!==I.w||e[22]!==i.w||e[23]!==L ?(Y=(l,C)=>{let n=l+(C==="in" ? l*L:-l*L);return n>i.w&&(n=i.w),n<I.w&&(n=I.w),n;},e[21]=I.w,e[22]=i.w,e[23]=L,e[24]=Y):Y=e[24];const X=Y;let F;e[25]!==X||e[26]!==t.w||e[27]!==i.h||e[28]!==i.w||e[29]!==u||e[30]!==o ?(F=(l)=>{l.preventDefault(),l.stopPropagation();const C=l.deltaY<0 ? "in":"out",n=X(t.w,C),h=n/i.w;s({w:n,h:i.h*h},o),u();},e[25]=X,e[26]=t.w,e[27]=i.h,e[28]=i.w,e[29]=u,e[30]=o,e[31]=F):F=e[31];const T=F;let Z,ee,te,oe;e[32]!==y ?(Z=()=>{y();},e[32]=y,e[33]=Z):Z=e[33],e[34]===Symbol.for("react.memo_cache_sentinel")?(ee=[N],e[34]=ee):ee=e[34],he(Z,ee),e[35]!==r||e[36]!==t.h||e[37]!==t.l||e[38]!==t.t||e[39]!==t.w ?(te=()=>{if(!x.current||!r)return;const l=x.current.getContext("2d");l&&(l.clearRect(0,0,x.current.width,x.current.height),l.drawImage(r,t.l,t.t,t.w,t.h));},e[35]=r,e[36]=t.h,e[37]=t.l,e[38]=t.t,e[39]=t.w,e[40]=te):te=e[40],e[41]!==r||e[42]!==t ?(oe=[x,r,t],e[41]=r,e[42]=t,e[43]=oe):oe=e[43],he(te,oe);const ie=p ? "grabbing":"grab";let q,ae,A,O,P,le;return e[44]!==V||e[45]!==ie ?(q={width:V,cursor:ie},e[44]=V,e[45]=ie,e[46]=q):q=e[46],e[47]===Symbol.for("react.memo_cache_sentinel")?(ae=(l)=>{s({x:l.clientX,y:l.clientY},S),U(!0);},e[47]=ae):ae=e[47],e[48]!==t.l||e[49]!==t.t||e[50]!==p||e[51]!==o||e[52]!==g ?(A=(l)=>{if(p){const C=l.clientX-g.x,n=l.clientY-g.y;(Math.abs(C)>10||Math.abs(n)>10)&&(s({t:t.t+n,l:t.l+C},o),s({x:l.clientX,y:l.clientY},S));}},e[48]=t.l,e[49]=t.t,e[50]=p,e[51]=o,e[52]=g,e[53]=A):A=e[53],e[54]!==d.h||e[55]!==d.w||e[56]!==A ?(O=re("canvas",{width:d.w,height:d.h,ref:x,onMouseDown:ae,onMouseMove:A}),e[54]=d.h,e[55]=d.w,e[56]=A,e[57]=O):O=e[57],e[58]!==w||e[59]!==f||e[60]!==r||e[61]!==M||e[62]!==a.w ?(P=r&&re("div",{className:"ono-avatar-mask",children:re("div",{style:{border:w,boxShadow:`${M}0 0 0 10000px`,width:`${a.w+2*f()}px`,height:`${a.w+2*f()}px`}})}),e[58]=w,e[59]=f,e[60]=r,e[61]=M,e[62]=a.w,e[63]=P):P=e[63],e[64]!==T||e[65]!==u||e[66]!==q||e[67]!==O||e[68]!==P ?(le=me("div",{ref:N,className:"ono-avatar-canvas",style:q,onWheel:T,onMouseUp:u,onMouseLeave:u,children:[O,P]}),e[64]=T,e[65]=u,e[66]=q,e[67]=O,e[68]=P,e[69]=le):le=e[69],le;};function ue(z,e){e((m)=>({...m,...z}));}const pe=(z)=>{const e=de(24),{imageFile:m,cvsW:H,maskBG:J,border:K,wheelScale:Q,children:D}=z,a=H===void 0 ? 520:H,b=J===void 0 ? "rgba(0,0,0,0.5)":J,I=K===void 0 ? "4px solid #fff":K,$=Q===void 0 ? 0.1:Q;let t;e[0]===Symbol.for("react.memo_cache_sentinel")?(t={w:0,h:0,t:0,l:0},e[0]=t):t=e[0];const [o,V]=_(t);let M;e[1]===Symbol.for("react.memo_cache_sentinel")?(M={w:0,h:0,t:0,l:0},e[1]=M):M=e[1];const [w,L]=_(M);let r;e[2]===Symbol.for("react.memo_cache_sentinel")?(r={w:0,l:0},e[2]=r):r=e[2];const [c,E]=_(r),[d,ce]=_();let v;e[3]!==o ?(v=(U)=>{L({w:o.w,h:o.h,t:o.t,l:o.l}),U?.();},e[3]=o,e[4]=v):v=e[4];const i=v;let G;e[5]!==d||e[6]!==c ?(G=(U,N)=>{if(!d)return;const x=d.getImageData(c.l,c.l,c.w,c.w),s=document.createElement("canvas"),f=s.getContext("2d");if(s.width=c.w,s.height=c.w,!f)return;const{imageSaveType:y,dataSaveType:W,quality:u}=N||{},Y=y===void 0 ? "png":y,X=W===void 0 ? "base64":W,F=u===void 0 ? 100:u;f.putImageData(x,0,0,0,0,c.w,c.w),X==="base64" ? U(s.toDataURL(`image/${Y}`,F/100)):X==="blob"&&s.toBlob((T)=>{if(T)return U(T);},`image/${Y}`,F/100);},e[5]=d,e[6]=c,e[7]=G):G=e[7];const k=G;let g,S,p;return e[8]!==I||e[9]!==a||e[10]!==m||e[11]!==o||e[12]!==w||e[13]!==b||e[14]!==c||e[15]!==$ ?(g=re(fe,{imageFile:m,cvsW:a,maskBG:b,border:I,wheelScale:$,maskInfo:c,setMaskInfo:E,setCtx:ce,imageStartState:o,setImageStartState:V,imageState:w,setImageState:L}),e[8]=I,e[9]=a,e[10]=m,e[11]=o,e[12]=w,e[13]=b,e[14]=c,e[15]=$,e[16]=g):g=e[16],e[17]!==D||e[18]!==k||e[19]!==i ?(S=D?.({handleConfirm:k,handleReduction:i}),e[17]=D,e[18]=k,e[19]=i,e[20]=S):S=e[20],e[21]!==g||e[22]!==S ?(p=me(ge,{children:[g,S]}),e[21]=g,e[22]=S,e[23]=p):p=e[23],p;};export{pe as A};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsx as d}from "react/jsx-runtime";import{chainClassNames as v,getElementCenterPosition as x}from "./index.js";import{useState as P,useRef as b,useEffect as w}from "react";const F=({children:s,animation:e,className:m,duration:i=300,style:u,maskColor:p="rgba(0,0,0,0.5)",disableContextMenu:f,maskClickClose:y=!0,dialogClose:l})=>{const [a,k]=P(!1),o=b(null),c=()=>{if(o.current)if(k(!0),e){const t=o.current;t.classList.remove(`ono-${e.type}-enter`),t.classList.add(`ono-${e.type}-leave`),setTimeout(l,i);}else l();};return w(()=>{(()=>{if(!e||!o.current)return;const t=o.current.parentElement.style,n=o.current.style;switch(t.setProperty("--duration",i/1e3+"s"),e.type){case "zoom":{const{x:r,y:C}=x(e.element),g=(r/window.innerWidth*100).toFixed(2)+"%",h=(C/window.innerHeight*100).toFixed(2)+"%";n.setProperty("--left",g),n.setProperty("--top",h);break;}case "fade":{const r=e.direction==="left-center" ? "--left":"--top";n.setProperty(r,e.startPosition);break;}}})();},[o,e]),d("div",{className:"ono-dialog-mask ono-dialog-mask-"+(a ? "leave":"enter"),style:{background:p},onClick:()=>y&&c(),onContextMenu:(t)=>f&&t.preventDefault(),children:d("div",{ref:o,className:v("ono-dialog",m,(()=>{if(!e)return "";const t=`ono-${e.type}-enter`,n=`ono-${e.type}-leave`;return a ? n:t;})()),style:u,onClick:(t)=>t.stopPropagation(),children:typeof s=="function" ? s(c):s})});};export{F as T};
|