@skymp/skymp-ui-components/dist/index.es.js

Library of UI components, styles and resources of Skymp

import e,{useState as t,useMemo as r,useRef as o,useLayoutEffect as i,useEffect as a}from"react";import n from"classnames";var s;!function(e){e[e.Left=0]="Left",e[e.Right=1]="Right",e[e.Top=2]="Top",e[e.Bottom=3]="Bottom",e[e.TopLeft=4]="TopLeft",e[e.TopRight=5]="TopRight",e[e.BottomLeft=6]="BottomLeft",e[e.BottomRight=7]="BottomRight"}(s||(s={}));const l=({isMovable:e=!1,isResizable:r=!1,minWidth:o=0,minHeight:i=0,...a})=>{const[n,l]=t(a.width),[d,h]=t(a.height),[m,g]=t(a.top),[c,p]=t(a.left),[w,y,f,k]=(e=>{const[r,o]=t({left:0,top:0}),[i,a]=t(!1),[n,s]=t(!1),[l,d]=t(!1);return[({isMouseEvents:t=!1,isMovable:i=!0,isAxisX:l=!0,isAxisY:h=!0})=>{const m=i&&e.isMovable?t=>{n&&(0===t.buttons?c():(a(!0),0!==t.clientY&&0!==t.clientX&&(l&&e.setLeft(t.clientX-r.left),h&&e.setTop(t.clientY-r.top))))}:()=>{},g=i&&e.isMovable?t=>{window.addEventListener("mousemove",m),d(!1),s(!0),o({left:t.clientX-e.left,top:t.clientY-e.top})}:()=>{},c=i&&e.isMovable?()=>{window.removeEventListener("mousemove",m),a(!1),s(!1),d(!0)}:()=>{};return t?{onMouseDown:g,onMouseMove:m,onMouseUp:c}:{draggable:i&&e.isMovable,onDrag:m,onDragStart:e=>{e.dataTransfer.setDragImage(new Image,0,0),g(e)},onDragEnd:c}},i,n,l]})({left:c,top:m,setLeft:p,setTop:g,isMovable:e}),[u,v,_,b]=(({minWidth:e=0,minHeight:r=0,...o})=>{const[i,a]=t({X:0,Y:0}),[n,l]=t(!1),[d,h]=t(!1),[m,g]=t(!1);return[({direction:t=s.BottomRight,isMouseEvents:d=!1,isResizable:m=!0})=>{let c,p,w,y;t!==s.Left&&t!==s.TopLeft&&t!==s.BottomLeft||(y=e=>e,c=e=>-e),t!==s.Right&&t!==s.TopRight&&t!==s.BottomRight||(c=e=>e),t!==s.Top&&t!==s.TopLeft&&t!==s.TopRight||(w=e=>e,p=e=>-e),t!==s.Bottom&&t!==s.BottomLeft&&t!==s.BottomRight||(p=e=>e);const f=m&&o.isResizable?t=>{if(n)if(0===t.buttons)u();else if(h(!0),0!==t.clientX&&0!==t.clientY){const n=o.width+c(t.clientX-i.X),s=o.height+p(t.clientY-i.Y);n>=e&&(void 0===o.maxWidth||n<=o.maxWidth)&&(o.setWidth(n),o.setLeft(o.left+y(t.clientX-i.X))),s>=r&&(void 0===o.maxHeight||s<=o.maxHeight)&&(o.setHeight(s),o.setTop(o.top+w(t.clientY-i.Y))),a({X:t.clientX,Y:t.clientY})}}:()=>{},k=m&&o.isResizable?e=>{g(!1),l(!0),a({X:e.clientX,Y:e.clientY})}:()=>{},u=m&&o.isResizable?()=>{l(!1),h(!1),g(!0)}:()=>{};return d?{onMouseDown:k,onMouseMove:f,onMouseUp:u}:{draggable:m&&o.isResizable,onDrag:f,onDragStart:e=>{e.dataTransfer.setDragImage(new Image,0,0),k(e)},onDragEnd:u}},n,d,m]})({width:n,height:d,top:m,left:c,setWidth:l,setHeight:h,setTop:g,setLeft:p,maxWidth:a.maxWidth,maxHeight:a.maxHeight,minWidth:o,minHeight:i,isResizable:r});return{createDragMove:w,hasMoveStart:f,hasMove:y,hasMoveEnd:k,createDragResize:u,hasResizeStart:v,hasResize:_,hasResizeEnd:b,width:n,height:d,top:m,left:c,setWidth:l,setHeight:h,setTop:g,setLeft:p}},d=t=>e.createElement("linearGradient",{id:t.id?t.id:"",x1:t.x1?t.x1:"0%",y1:t.y1?t.y1:"0%",x2:t.x2?t.x2:"0%",y2:t.y2?t.y2:"100%",gradientUnits:"userSpaceOnUse",gradientTransform:t.gradientTransform?t.gradientTransform:""},t.children?t.children:e.createElement(e.Fragment,null,e.createElement("stop",{offset:t.firstOffset?t.firstOffset:"0%",style:{stopColor:t.firstColor?t.firstColor:"",stopOpacity:t.firstOpacity?t.firstOpacity:1}}),e.createElement("stop",{offset:t.secondOffset?t.secondOffset:"100%",style:{stopColor:t.secondColor?t.secondColor:"",stopOpacity:t.secondOpacity?t.secondOpacity:1}}))),h=t=>{const o=r(()=>t.height/Math.sqrt(3),[t.height]),i=r(()=>t.width-2*o,[o,t.width]),a=r(()=>"M"+t.x+" "+(t.y+t.holeCorner-1)+"l"+o+" "+(t.height+1)+"h"+i+"l"+o+" -"+(t.height+1)+"Z",[i,t.height,t.holeCorner,o,t.x,t.y]),n=r(()=>"M"+(t.x+t.marginFrame)+" "+t.y+"l"+o+" "+(t.height+t.holeCorner-t.marginFrame-.5*t.strokeWidth)+"h"+(i-2*t.marginFrame)+"l"+o+" -"+(t.height+t.holeCorner-t.marginFrame-.5*t.strokeWidth),[i,t.height,t.holeCorner,t.marginFrame,o,t.strokeWidth,t.x,t.y]);return e.createElement(e.Fragment,null,e.createElement("g",{id:t.id,strokeWidth:t.strokeWidth},e.createElement("path",{className:"skymp-window__background",d:a,fill:"url(#skymp-window__background-gradient)"}),e.createElement("path",{className:"skymp-window__frame-lines",strokeLinecap:"butt",strokeLinejoin:"miter",stroke:"url(#skymp-window__lines-gradient)",d:n})))},m=t=>{const o=r(()=>t.heightHeader/Math.sqrt(3),[t.heightHeader]),i=r(()=>t.widthHeader-2*o,[o,t.widthHeader]),a=r(()=>(i-t.widthLogo-2*t.marginFrame)/2,[t.marginFrame,i,t.widthLogo]),n=r(()=>"M"+(t.x+.5*(t.widthHeader-t.widthLogo))+" "+(t.y+t.heightLogo+1)+"l"+o+" -"+(t.heightLogo+1)+"h"+(t.widthLogo-2*o)+"l"+o+" "+(t.heightLogo+1)+"Z",[t.x,t.widthHeader,t.widthLogo,t.y,t.heightLogo,o]),s=r(()=>"M"+(t.x+.5*(t.widthHeader-t.widthLogo)+t.marginFrame-o)+" "+(t.y+t.heightLogo+t.marginFrame+.5*t.strokeWidth)+"h"+o+"l"+o+" -"+t.heightLogo+"h"+(t.widthLogo-2*o-2*t.marginFrame)+"l"+o+" "+t.heightLogo+"h"+o,[o,t.heightLogo,t.marginFrame,t.strokeWidth,t.widthHeader,t.widthLogo,t.x,t.y]),l=r(()=>"M"+t.x+" "+(t.y+t.heightHeader+t.heightLogo+1)+"l"+o+" -"+(t.heightHeader+1)+"h"+i+"l"+o+" "+(t.heightHeader+1)+"Z",[t.heightHeader,t.heightLogo,o,i,t.x,t.y]),d=r(()=>"M"+(t.x+t.marginFrame)+" "+(t.y+t.heightHeader+t.heightLogo+t.marginFrame+.5*t.strokeWidth)+"l"+o+" -"+t.heightHeader+"h"+(t.isLogoVisible?a+"m"+t.widthLogo+" 0h"+a:i-2*t.marginFrame)+"l"+o+" "+t.heightHeader,[t.heightHeader,t.heightLogo,t.isLogoVisible,t.marginFrame,o,t.strokeWidth,i,a,t.widthLogo,t.x,t.y]);return e.createElement(e.Fragment,null,e.createElement("g",null,e.createElement("g",{id:t.headerId},e.createElement("path",{className:"skymp-window__background",fill:"url(#skymp-window__background-gradient)",d:l}),e.createElement("path",{className:"skymp-window__frame-lines",strokeWidth:t.strokeWidth,strokeLinecap:"butt",strokeLinejoin:"miter",stroke:"url(#skymp-window__lines-gradient)",d:d})),e.createElement("g",{id:t.logoId,strokeWidth:t.strokeWidth},e.createElement("path",{className:"skymp-window__background",fill:"url(#skymp-window__background-gradient)",d:n}),e.createElement("path",{className:"skymp-window__frame-lines",strokeLinecap:"butt",strokeLinejoin:"miter",stroke:"url(#skymp-window__lines-gradient)",d:s}))))},g=t=>e.createElement("g",Object.assign({},t,{id:t.id}),e.createElement("path",{d:"M10.752 22.354 L10.752,15.908 L12.626 15.908 L12.626 13.729 L7.868 13.729 L7.868 15.908 L7.868 22.354 Z"}),e.createElement("path",{d:"M22.354 3.203 L3.203 3.203 L3.203 21.902 L7.203 21.902 L7.203 19.231 L5.329 19.231 L5.329 5.874 L19.616 5.874 L19.616 13.397 L22.354 13.397 Z"}),e.createElement("path",{d:"M16.453 19.231 L13.623 19.231 L13.623 7.097 L18.527 7.097 L18.527 9.822 L16.453 9.822 Z"}),e.createElement("path",{d:"M11.536 20.095 L20.294 20.095 L20.294 18.061 L23.005 18.061 L23.005 22.354 L20.294 22.354 L11.536 22.354 Z"}),e.createElement("path",{d:"M16.427 29.77l0 -6.339 -2.791 0 0 10.526c5.755,-2.313 13.317,-6.379 18.208,-16.865l0.027 0 0.292 -0.678c0.306,-0.691 0.611,-1.395 0.904,-2.126l0 -0 0 0 0 0 -0 0 -15.138 0 0 2.791 10.739 0c-2.884,5.569 -6.858,9.901 -12.214,12.679z"})),c=t=>{const o=r(()=>19.151*t.scale,[t.scale]),i=r(()=>o+2*t.marginFrame,[o,t.marginFrame]),a=r(()=>t.width-2*i,[i,t.width]),n=r(()=>t.height-2*i,[t.height,i]),s=r(()=>t.width-2*(o+t.marginFrame),[o,t.marginFrame,t.width]),l=r(()=>t.height-2*(o+t.marginFrame),[t.height,o,t.marginFrame]),h=r(()=>t.marginFrame+o+1,[o,t.marginFrame]),m=r(()=>o+t.marginFrame-1,[o,t.marginFrame]),c=r(()=>"M"+t.x+" "+t.y+"h"+i+"v"+t.holeCorner+"h"+a+"v-"+t.holeCorner+"h"+i+"v"+i+"h-"+t.holeCorner+"v"+n+"h"+t.holeCorner+"v"+i+"h-"+i+"v-"+t.holeCorner+"h-"+a+"v"+t.holeCorner+"h-"+i+"v-"+i+"h"+t.holeCorner+"v-"+n+"h-"+t.holeCorner+"v-"+i+"Z",[n,t.holeCorner,i,a,t.x,t.y]);return e.createElement(e.Fragment,null,e.createElement("defs",null,t.frameGradientSvg?[e.cloneElement(t.frameGradientSvg,{id:"skymp-window__top-left-corner-gradient",key:"skymp-window__top-left-corner-gradient",gradientTransform:`translate(${t.x}, ${t.y})`,gradientUnits:"userSpaceOnUse"}),e.cloneElement(t.frameGradientSvg,{id:"skymp-window__top-right-corner-gradient",key:"skymp-window__top-right-corner-gradient",gradientTransform:`translate(${t.y} -${t.width-t.x}) scale(${t.scale}) rotate(90)`,gradientUnits:"userSpaceOnUse"}),e.cloneElement(t.frameGradientSvg,{id:"skymp-window__bottom-left-corner-gradient",key:"skymp-window__bottom-left-corner-gradient",gradientTransform:`translate(-${t.height+t.y} ${t.x}) scale(${t.scale}) rotate(-90)`,gradientUnits:"userSpaceOnUse"}),e.cloneElement(t.frameGradientSvg,{id:"skymp-window__bottom-right-corner-gradient",key:"skymp-window__bottom-right-corner-gradient",gradientTransform:`translate(-${t.width-t.x} -${t.height+t.y})`,gradientUnits:"userSpaceOnUse"})]:e.createElement(e.Fragment,null,e.createElement(d,{id:"skymp-window__top-left-corner-gradient",gradientTransform:`translate(${t.x}, ${t.y})`,firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}),e.createElement(d,{id:"skymp-window__top-right-corner-gradient",gradientTransform:`translate(${t.y} -${t.width-t.x}) scale(${t.scale}) rotate(90)`,firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}),e.createElement(d,{id:"skymp-window__bottom-left-corner-gradient",gradientTransform:`translate(-${t.height+t.y} ${t.x}) scale(${t.scale}) rotate(-90)`,firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}),e.createElement(d,{id:"skymp-window__bottom-right-corner-gradient",gradientTransform:`translate(-${t.width-t.x} -${t.height+t.y})`,firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}))),e.createElement("g",{id:t.id,strokeWidth:t.strokeWidth},e.createElement("path",{className:"skymp-window__background dash",fill:"url(#skymp-window__background-gradient)",d:c}),e.createElement("g",{className:"skymp-window__lines"},e.createElement("g",{className:"skymp-window__frame-corners"},e.createElement(g,{transform:`translate(${t.x} ${t.y}) scale(${t.scale})`,fill:"url(#skymp-window__top-left-corner-gradient)"}),e.createElement(g,{transform:`rotate(90) translate(${t.y} -${t.width-t.x}) scale(${t.scale})`,fill:"url(#skymp-window__top-right-corner-gradient)"}),e.createElement(g,{transform:`rotate(-90) translate(-${t.height+t.y} ${t.x}) scale(${t.scale})`,fill:"url(#skymp-window__bottom-left-corner-gradient)"}),e.createElement(g,{transform:`rotate(180) translate(-${t.width-t.x} -${t.height+t.y}) scale(${t.scale})`,fill:"url(#skymp-window__bottom-right-corner-gradient)"})),e.createElement("g",{className:"skymp-window__frame-lines",stroke:"url(#skymp-window__lines-gradient)"},e.createElement("path",{d:`M${t.x+h} ${t.y+t.holeCorner+t.marginFrame+.5*t.strokeWidth} h${s}`}),e.createElement("path",{d:`M${t.x+m} ${t.y+t.height-t.holeCorner-t.marginFrame-.5*t.strokeWidth} h${s}`}),e.createElement("path",{d:`M${t.x+t.holeCorner+t.marginFrame+.5*t.strokeWidth} ${t.y+m} v${l}`}),e.createElement("path",{d:`M${t.x+t.width-t.holeCorner-t.marginFrame-.5*t.strokeWidth} ${t.y+h} v${l}`})))))},p=t=>{const o=r(()=>!!t.header,[t.header]),i=r(()=>!(!t.logo||!o),[o,t.logo]),a=r(()=>!!t.footer,[t.footer]),n=r(()=>i?t.width/8.732876712328768:0,[i,t.width]),s=r(()=>i?t.height/14.34210526315789:0,[i,t.height]),l=r(()=>o?t.width/1.186046511627907:0,[o,t.width]),g=r(()=>o?t.height/12.97619047619048:0,[o,t.height]),p=r(()=>a?t.width/1.577970297029703:0,[a,t.width]),w=r(()=>a?t.height/16.26865671641791:0,[a,t.height]),y=r(()=>t.height-s-g-w,[w,g,s,t.height]);return e.createElement(e.Fragment,null,e.createElement("svg",{width:t.width,height:t.height,xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",style:{shapeRendering:"geometricPrecision",textRendering:"geometricPrecision",position:"absolute",zIndex:-1}},e.createElement("defs",null,void 0!==t.frameGradientSvg?e.cloneElement(t.frameGradientSvg,{id:"skymp-window__lines-gradient",gradientUnits:"userSpaceOnUse"}):e.createElement(d,{id:"skymp-window__lines-gradient",firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}),t.backgroundGradientSvg?e.cloneElement(t.backgroundGradientSvg,{id:"skymp-window__background-gradient",gradientUnits:"userSpaceOnUse"}):e.createElement(d,{id:"skymp-window__background-gradient",firstColor:"rgba(var(--skymp-background-color), 1)",firstOpacity:.8,secondColor:"rgba(var(--skymp-background-color), 1)",secondOpacity:.8})),e.createElement("g",null,e.createElement(c,{id:"skymp-window__content",width:t.width,height:y,scale:t.scale,marginFrame:t.marginFrame,holeCorner:t.holeCorner,strokeWidth:t.strokeWidth,createDragMove:t.createDragMove,createDragResize:t.createDragResize,frameGradientSvg:t.frameGradientSvg,x:0,y:t.header?g-t.holeCorner+(t.logo?s:0):0}),o&&e.createElement(m,{logoId:"skymp-window__logo",headerId:"skymp-window__header",widthHeader:l,heightHeader:g,widthLogo:n,heightLogo:s,marginFrame:t.marginFrame,strokeWidth:t.strokeWidth,isLogoVisible:i,createDragMove:t.createDragMove,createDragResize:t.createDragResize,x:.5*(t.width-l),y:0}),a&&e.createElement(h,{id:"skymp-window__footer",width:p,height:w,marginFrame:t.marginFrame,holeCorner:t.holeCorner,strokeWidth:t.strokeWidth,createDragMove:t.createDragMove,createDragResize:t.createDragResize,x:.5*(t.width-p),y:t.height-w-3*t.holeCorner}))),i&&e.createElement("div",{className:"skymp-window__logo",style:{width:n,height:s}},t.logo),o&&e.createElement("div",{className:"skymp-window__header",style:{width:l,height:g}},t.header),e.createElement("div",{className:"skymp-window__content"},t.content),a&&e.createElement("div",{className:"skymp-window__footer",style:{width:p,height:w}},t.footer))};var w;!function(e){e[e.default=0]="default",e[e.system=1]="system"}(w||(w={}));const y=({type:n=w.default,isMovable:s=!1,isResizable:d=!1,top:h=0,left:m=0,scale:g=1,...c})=>{const y=r(()=>3.203*g,[g]),f=r(()=>2.884*g,[g]),k=r(()=>4.665*g,[g]),[u,v]=t(!1),_=o(null);i(()=>{v(!0)},[]);const b=l({width:c.width,height:c.height,top:h,left:m,isMovable:s,isResizable:d,maxWidth:c.maxWidth,maxHeight:c.maxHeight,minWidth:c.minWidth,minHeight:c.minHeight});return a(()=>{u&&(n===w.default?(void 0===c.width?b.setWidth(_.current&&_.current.offsetWidth):b.setWidth(c.width),void 0===c.height?b.setHeight(_.current&&_.current.offsetHeight):b.setHeight(c.height)):n===w.system&&(b.setWidth(1275),b.setHeight(680)))},[u,c.height,c.width,n,b,_]),e.createElement("div",{ref:_,className:"skymp-window",style:{position:"absolute",top:b.top,left:b.left,opacity:_?1:0}},void 0!==b.width&&void 0!==b.height&&e.createElement(p,{width:b.width,height:b.height,logo:n===w.system?c.logo:void 0,header:n===w.system?c.header:void 0,content:c.content,footer:n===w.system?c.footer:void 0,scale:g,marginFrame:y,strokeWidth:f,holeCorner:k,createDragMove:n===w.system?()=>b.createDragMove({isMovable:!1}):b.createDragMove,createDragResize:n===w.system?()=>b.createDragResize:b.createDragResize,frameGradientSvg:c.frameGradientSvg,backgroundGradientSvg:c.backgroundGradientSvg}))},f=e.forwardRef(({children:t,disabled:r,active:o,className:i,...a},s)=>e.createElement("button",Object.assign({ref:s},a,{"data-active":o,className:n("skymp-button",i,{"skymp-button_disabled":r,"skymp-button_active":o})}),t));f.displayName="SkympButton";const k=t=>e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",xmlSpace:"preserve",width:"1em",height:"1em",style:{shapeRendering:"geometricPrecision",textRendering:"geometricPrecision",fillRule:"evenodd",clipRule:"evenodd"}},t),t.children),u=t=>e.createElement(k,Object.assign({},t,{viewBox:"0 0 0.72 0.88"}),e.createElement("g",{stroke:"none",fill:"currentColor"},e.createElement("path",{d:"M-0 0.88l0.08 -0 0.08 -0.08 0.13 0.08 0.43 -0.44 -0.42 -0.44 -0.08 0 -0.06 0.09 -0.11 -0.09 -0.04 0 0 0.64 0 0.24zm0.23 -0.12l-0.19 -0.18 -0.01 -0.26 0.21 -0.19 0.33 0.32 -0.35 0.32z"}),e.createElement("polygon",{points:"0.22,0.54 0.22,0.59 0.26,0.59 0.39,0.44 0.26,0.29 0.22,0.29 0.22,0.34 0.18,0.34 0.18,0.53 0.18,0.55"}))),v=({children:t,className:r,visibleIcons:o,...i})=>e.createElement("div",Object.assign({},i,{className:n("skymp-button-group",r)}),e.Children.map(t,(t,r)=>{if("SkympButton"!==t.type.displayName&&"development"===process.env.NODE_ENV)throw new Error("Button.Group should be have children type SkympButton");return e.cloneElement(t,{key:r.toString(),className:n("skymp-button-group__button",{"skymp-button-group_visible":o,"skymp-button-group_active":t.props.active},t.props.className),children:e.createElement(e.Fragment,null,e.createElement(u,{className:"skymp-button-group__icon"}),t.props.children,e.createElement(u,{className:"skymp-button-group__icon"}))})}));v.displayName="SkympButtonGroup";const _=Object.assign(f,{Group:v});export{_ as Button,y as Window,w as WindowType};
//# sourceMappingURL=index.es.js.map