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

Library of UI components, styles and resources of Skymp

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),o=e(require("classnames"));var i;!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"}(i||(i={}));const a=({isMovable:e=!1,isResizable:r=!1,minWidth:o=0,minHeight:a=0,...n})=>{const[s,d]=t.useState(n.width),[l,m]=t.useState(n.height),[h,g]=t.useState(n.top),[c,p]=t.useState(n.left),[w,u,y,f]=(e=>{const[r,o]=t.useState({left:0,top:0}),[i,a]=t.useState(!1),[n,s]=t.useState(!1),[d,l]=t.useState(!1);return[({isMouseEvents:t=!1,isMovable:i=!0,isAxisX:d=!0,isAxisY:m=!0})=>{const h=i&&e.isMovable?t=>{n&&(0===t.buttons?c():(a(!0),0!==t.clientY&&0!==t.clientX&&(d&&e.setLeft(t.clientX-r.left),m&&e.setTop(t.clientY-r.top))))}:()=>{},g=i&&e.isMovable?t=>{window.addEventListener("mousemove",h),l(!1),s(!0),o({left:t.clientX-e.left,top:t.clientY-e.top})}:()=>{},c=i&&e.isMovable?()=>{window.removeEventListener("mousemove",h),a(!1),s(!1),l(!0)}:()=>{};return t?{onMouseDown:g,onMouseMove:h,onMouseUp:c}:{draggable:i&&e.isMovable,onDrag:h,onDragStart:e=>{e.dataTransfer.setDragImage(new Image,0,0),g(e)},onDragEnd:c}},i,n,d]})({left:c,top:h,setLeft:p,setTop:g,isMovable:e}),[k,v,_,b]=(({minWidth:e=0,minHeight:r=0,...o})=>{const[a,n]=t.useState({X:0,Y:0}),[s,d]=t.useState(!1),[l,m]=t.useState(!1),[h,g]=t.useState(!1);return[({direction:t=i.BottomRight,isMouseEvents:l=!1,isResizable:h=!0})=>{let c,p,w,u;t!==i.Left&&t!==i.TopLeft&&t!==i.BottomLeft||(u=e=>e,c=e=>-e),t!==i.Right&&t!==i.TopRight&&t!==i.BottomRight||(c=e=>e),t!==i.Top&&t!==i.TopLeft&&t!==i.TopRight||(w=e=>e,p=e=>-e),t!==i.Bottom&&t!==i.BottomLeft&&t!==i.BottomRight||(p=e=>e);const y=h&&o.isResizable?t=>{if(s)if(0===t.buttons)k();else if(m(!0),0!==t.clientX&&0!==t.clientY){const i=o.width+c(t.clientX-a.X),s=o.height+p(t.clientY-a.Y);i>=e&&(void 0===o.maxWidth||i<=o.maxWidth)&&(o.setWidth(i),o.setLeft(o.left+u(t.clientX-a.X))),s>=r&&(void 0===o.maxHeight||s<=o.maxHeight)&&(o.setHeight(s),o.setTop(o.top+w(t.clientY-a.Y))),n({X:t.clientX,Y:t.clientY})}}:()=>{},f=h&&o.isResizable?e=>{g(!1),d(!0),n({X:e.clientX,Y:e.clientY})}:()=>{},k=h&&o.isResizable?()=>{d(!1),m(!1),g(!0)}:()=>{};return l?{onMouseDown:f,onMouseMove:y,onMouseUp:k}:{draggable:h&&o.isResizable,onDrag:y,onDragStart:e=>{e.dataTransfer.setDragImage(new Image,0,0),f(e)},onDragEnd:k}},s,l,h]})({width:s,height:l,top:h,left:c,setWidth:d,setHeight:m,setTop:g,setLeft:p,maxWidth:n.maxWidth,maxHeight:n.maxHeight,minWidth:o,minHeight:a,isResizable:r});return{createDragMove:w,hasMoveStart:y,hasMove:u,hasMoveEnd:f,createDragResize:k,hasResizeStart:v,hasResize:_,hasResizeEnd:b,width:s,height:l,top:h,left:c,setWidth:d,setHeight:m,setTop:g,setLeft:p}},n=e=>r.createElement("linearGradient",{id:e.id?e.id:"",x1:e.x1?e.x1:"0%",y1:e.y1?e.y1:"0%",x2:e.x2?e.x2:"0%",y2:e.y2?e.y2:"100%",gradientUnits:"userSpaceOnUse",gradientTransform:e.gradientTransform?e.gradientTransform:""},e.children?e.children:r.createElement(r.Fragment,null,r.createElement("stop",{offset:e.firstOffset?e.firstOffset:"0%",style:{stopColor:e.firstColor?e.firstColor:"",stopOpacity:e.firstOpacity?e.firstOpacity:1}}),r.createElement("stop",{offset:e.secondOffset?e.secondOffset:"100%",style:{stopColor:e.secondColor?e.secondColor:"",stopOpacity:e.secondOpacity?e.secondOpacity:1}}))),s=e=>{const o=t.useMemo(()=>e.height/Math.sqrt(3),[e.height]),i=t.useMemo(()=>e.width-2*o,[o,e.width]),a=t.useMemo(()=>"M"+e.x+" "+(e.y+e.holeCorner-1)+"l"+o+" "+(e.height+1)+"h"+i+"l"+o+" -"+(e.height+1)+"Z",[i,e.height,e.holeCorner,o,e.x,e.y]),n=t.useMemo(()=>"M"+(e.x+e.marginFrame)+" "+e.y+"l"+o+" "+(e.height+e.holeCorner-e.marginFrame-.5*e.strokeWidth)+"h"+(i-2*e.marginFrame)+"l"+o+" -"+(e.height+e.holeCorner-e.marginFrame-.5*e.strokeWidth),[i,e.height,e.holeCorner,e.marginFrame,o,e.strokeWidth,e.x,e.y]);return r.createElement(r.Fragment,null,r.createElement("g",{id:e.id,strokeWidth:e.strokeWidth},r.createElement("path",{className:"skymp-window__background",d:a,fill:"url(#skymp-window__background-gradient)"}),r.createElement("path",{className:"skymp-window__frame-lines",strokeLinecap:"butt",strokeLinejoin:"miter",stroke:"url(#skymp-window__lines-gradient)",d:n})))},d=e=>{const o=t.useMemo(()=>e.heightHeader/Math.sqrt(3),[e.heightHeader]),i=t.useMemo(()=>e.widthHeader-2*o,[o,e.widthHeader]),a=t.useMemo(()=>(i-e.widthLogo-2*e.marginFrame)/2,[e.marginFrame,i,e.widthLogo]),n=t.useMemo(()=>"M"+(e.x+.5*(e.widthHeader-e.widthLogo))+" "+(e.y+e.heightLogo+1)+"l"+o+" -"+(e.heightLogo+1)+"h"+(e.widthLogo-2*o)+"l"+o+" "+(e.heightLogo+1)+"Z",[e.x,e.widthHeader,e.widthLogo,e.y,e.heightLogo,o]),s=t.useMemo(()=>"M"+(e.x+.5*(e.widthHeader-e.widthLogo)+e.marginFrame-o)+" "+(e.y+e.heightLogo+e.marginFrame+.5*e.strokeWidth)+"h"+o+"l"+o+" -"+e.heightLogo+"h"+(e.widthLogo-2*o-2*e.marginFrame)+"l"+o+" "+e.heightLogo+"h"+o,[o,e.heightLogo,e.marginFrame,e.strokeWidth,e.widthHeader,e.widthLogo,e.x,e.y]),d=t.useMemo(()=>"M"+e.x+" "+(e.y+e.heightHeader+e.heightLogo+1)+"l"+o+" -"+(e.heightHeader+1)+"h"+i+"l"+o+" "+(e.heightHeader+1)+"Z",[e.heightHeader,e.heightLogo,o,i,e.x,e.y]),l=t.useMemo(()=>"M"+(e.x+e.marginFrame)+" "+(e.y+e.heightHeader+e.heightLogo+e.marginFrame+.5*e.strokeWidth)+"l"+o+" -"+e.heightHeader+"h"+(e.isLogoVisible?a+"m"+e.widthLogo+" 0h"+a:i-2*e.marginFrame)+"l"+o+" "+e.heightHeader,[e.heightHeader,e.heightLogo,e.isLogoVisible,e.marginFrame,o,e.strokeWidth,i,a,e.widthLogo,e.x,e.y]);return r.createElement(r.Fragment,null,r.createElement("g",null,r.createElement("g",{id:e.headerId},r.createElement("path",{className:"skymp-window__background",fill:"url(#skymp-window__background-gradient)",d:d}),r.createElement("path",{className:"skymp-window__frame-lines",strokeWidth:e.strokeWidth,strokeLinecap:"butt",strokeLinejoin:"miter",stroke:"url(#skymp-window__lines-gradient)",d:l})),r.createElement("g",{id:e.logoId,strokeWidth:e.strokeWidth},r.createElement("path",{className:"skymp-window__background",fill:"url(#skymp-window__background-gradient)",d:n}),r.createElement("path",{className:"skymp-window__frame-lines",strokeLinecap:"butt",strokeLinejoin:"miter",stroke:"url(#skymp-window__lines-gradient)",d:s}))))},l=e=>r.createElement("g",Object.assign({},e,{id:e.id}),r.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"}),r.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"}),r.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"}),r.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"}),r.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"})),m=e=>{const o=t.useMemo(()=>19.151*e.scale,[e.scale]),i=t.useMemo(()=>o+2*e.marginFrame,[o,e.marginFrame]),a=t.useMemo(()=>e.width-2*i,[i,e.width]),s=t.useMemo(()=>e.height-2*i,[e.height,i]),d=t.useMemo(()=>e.width-2*(o+e.marginFrame),[o,e.marginFrame,e.width]),m=t.useMemo(()=>e.height-2*(o+e.marginFrame),[e.height,o,e.marginFrame]),h=t.useMemo(()=>e.marginFrame+o+1,[o,e.marginFrame]),g=t.useMemo(()=>o+e.marginFrame-1,[o,e.marginFrame]),c=t.useMemo(()=>"M"+e.x+" "+e.y+"h"+i+"v"+e.holeCorner+"h"+a+"v-"+e.holeCorner+"h"+i+"v"+i+"h-"+e.holeCorner+"v"+s+"h"+e.holeCorner+"v"+i+"h-"+i+"v-"+e.holeCorner+"h-"+a+"v"+e.holeCorner+"h-"+i+"v-"+i+"h"+e.holeCorner+"v-"+s+"h-"+e.holeCorner+"v-"+i+"Z",[s,e.holeCorner,i,a,e.x,e.y]);return r.createElement(r.Fragment,null,r.createElement("defs",null,e.frameGradientSvg?[r.cloneElement(e.frameGradientSvg,{id:"skymp-window__top-left-corner-gradient",key:"skymp-window__top-left-corner-gradient",gradientTransform:`translate(${e.x}, ${e.y})`,gradientUnits:"userSpaceOnUse"}),r.cloneElement(e.frameGradientSvg,{id:"skymp-window__top-right-corner-gradient",key:"skymp-window__top-right-corner-gradient",gradientTransform:`translate(${e.y} -${e.width-e.x}) scale(${e.scale}) rotate(90)`,gradientUnits:"userSpaceOnUse"}),r.cloneElement(e.frameGradientSvg,{id:"skymp-window__bottom-left-corner-gradient",key:"skymp-window__bottom-left-corner-gradient",gradientTransform:`translate(-${e.height+e.y} ${e.x}) scale(${e.scale}) rotate(-90)`,gradientUnits:"userSpaceOnUse"}),r.cloneElement(e.frameGradientSvg,{id:"skymp-window__bottom-right-corner-gradient",key:"skymp-window__bottom-right-corner-gradient",gradientTransform:`translate(-${e.width-e.x} -${e.height+e.y})`,gradientUnits:"userSpaceOnUse"})]:r.createElement(r.Fragment,null,r.createElement(n,{id:"skymp-window__top-left-corner-gradient",gradientTransform:`translate(${e.x}, ${e.y})`,firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}),r.createElement(n,{id:"skymp-window__top-right-corner-gradient",gradientTransform:`translate(${e.y} -${e.width-e.x}) scale(${e.scale}) rotate(90)`,firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}),r.createElement(n,{id:"skymp-window__bottom-left-corner-gradient",gradientTransform:`translate(-${e.height+e.y} ${e.x}) scale(${e.scale}) rotate(-90)`,firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}),r.createElement(n,{id:"skymp-window__bottom-right-corner-gradient",gradientTransform:`translate(-${e.width-e.x} -${e.height+e.y})`,firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}))),r.createElement("g",{id:e.id,strokeWidth:e.strokeWidth},r.createElement("path",{className:"skymp-window__background dash",fill:"url(#skymp-window__background-gradient)",d:c}),r.createElement("g",{className:"skymp-window__lines"},r.createElement("g",{className:"skymp-window__frame-corners"},r.createElement(l,{transform:`translate(${e.x} ${e.y}) scale(${e.scale})`,fill:"url(#skymp-window__top-left-corner-gradient)"}),r.createElement(l,{transform:`rotate(90) translate(${e.y} -${e.width-e.x}) scale(${e.scale})`,fill:"url(#skymp-window__top-right-corner-gradient)"}),r.createElement(l,{transform:`rotate(-90) translate(-${e.height+e.y} ${e.x}) scale(${e.scale})`,fill:"url(#skymp-window__bottom-left-corner-gradient)"}),r.createElement(l,{transform:`rotate(180) translate(-${e.width-e.x} -${e.height+e.y}) scale(${e.scale})`,fill:"url(#skymp-window__bottom-right-corner-gradient)"})),r.createElement("g",{className:"skymp-window__frame-lines",stroke:"url(#skymp-window__lines-gradient)"},r.createElement("path",{d:`M${e.x+h} ${e.y+e.holeCorner+e.marginFrame+.5*e.strokeWidth} h${d}`}),r.createElement("path",{d:`M${e.x+g} ${e.y+e.height-e.holeCorner-e.marginFrame-.5*e.strokeWidth} h${d}`}),r.createElement("path",{d:`M${e.x+e.holeCorner+e.marginFrame+.5*e.strokeWidth} ${e.y+g} v${m}`}),r.createElement("path",{d:`M${e.x+e.width-e.holeCorner-e.marginFrame-.5*e.strokeWidth} ${e.y+h} v${m}`})))))},h=e=>{const o=t.useMemo(()=>!!e.header,[e.header]),i=t.useMemo(()=>!(!e.logo||!o),[o,e.logo]),a=t.useMemo(()=>!!e.footer,[e.footer]),l=t.useMemo(()=>i?e.width/8.732876712328768:0,[i,e.width]),h=t.useMemo(()=>i?e.height/14.34210526315789:0,[i,e.height]),g=t.useMemo(()=>o?e.width/1.186046511627907:0,[o,e.width]),c=t.useMemo(()=>o?e.height/12.97619047619048:0,[o,e.height]),p=t.useMemo(()=>a?e.width/1.577970297029703:0,[a,e.width]),w=t.useMemo(()=>a?e.height/16.26865671641791:0,[a,e.height]),u=t.useMemo(()=>e.height-h-c-w,[w,c,h,e.height]);return r.createElement(r.Fragment,null,r.createElement("svg",{width:e.width,height:e.height,xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",style:{shapeRendering:"geometricPrecision",textRendering:"geometricPrecision",position:"absolute",zIndex:-1}},r.createElement("defs",null,void 0!==e.frameGradientSvg?r.cloneElement(e.frameGradientSvg,{id:"skymp-window__lines-gradient",gradientUnits:"userSpaceOnUse"}):r.createElement(n,{id:"skymp-window__lines-gradient",firstColor:"rgba(var(--skymp-second-color), 1)",secondColor:"rgba(var(--skymp-second-color), 1)"}),e.backgroundGradientSvg?r.cloneElement(e.backgroundGradientSvg,{id:"skymp-window__background-gradient",gradientUnits:"userSpaceOnUse"}):r.createElement(n,{id:"skymp-window__background-gradient",firstColor:"rgba(var(--skymp-background-color), 1)",firstOpacity:.8,secondColor:"rgba(var(--skymp-background-color), 1)",secondOpacity:.8})),r.createElement("g",null,r.createElement(m,{id:"skymp-window__content",width:e.width,height:u,scale:e.scale,marginFrame:e.marginFrame,holeCorner:e.holeCorner,strokeWidth:e.strokeWidth,createDragMove:e.createDragMove,createDragResize:e.createDragResize,frameGradientSvg:e.frameGradientSvg,x:0,y:e.header?c-e.holeCorner+(e.logo?h:0):0}),o&&r.createElement(d,{logoId:"skymp-window__logo",headerId:"skymp-window__header",widthHeader:g,heightHeader:c,widthLogo:l,heightLogo:h,marginFrame:e.marginFrame,strokeWidth:e.strokeWidth,isLogoVisible:i,createDragMove:e.createDragMove,createDragResize:e.createDragResize,x:.5*(e.width-g),y:0}),a&&r.createElement(s,{id:"skymp-window__footer",width:p,height:w,marginFrame:e.marginFrame,holeCorner:e.holeCorner,strokeWidth:e.strokeWidth,createDragMove:e.createDragMove,createDragResize:e.createDragResize,x:.5*(e.width-p),y:e.height-w-3*e.holeCorner}))),i&&r.createElement("div",{className:"skymp-window__logo",style:{width:l,height:h}},e.logo),o&&r.createElement("div",{className:"skymp-window__header",style:{width:g,height:c}},e.header),r.createElement("div",{className:"skymp-window__content"},e.content),a&&r.createElement("div",{className:"skymp-window__footer",style:{width:p,height:w}},e.footer))};var g;(g=exports.WindowType||(exports.WindowType={}))[g.default=0]="default",g[g.system=1]="system";const c=r.forwardRef(({children:e,disabled:t,active:i,className:a,...n},s)=>r.createElement("button",Object.assign({ref:s},n,{"data-active":i,className:o("skymp-button",a,{"skymp-button_disabled":t,"skymp-button_active":i})}),e));c.displayName="SkympButton";const p=e=>r.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"}},e),e.children),w=e=>r.createElement(p,Object.assign({},e,{viewBox:"0 0 0.72 0.88"}),r.createElement("g",{stroke:"none",fill:"currentColor"},r.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"}),r.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"}))),u=({children:e,className:t,visibleIcons:i,...a})=>r.createElement("div",Object.assign({},a,{className:o("skymp-button-group",t)}),r.Children.map(e,(e,t)=>{if("SkympButton"!==e.type.displayName&&"development"===process.env.NODE_ENV)throw new Error("Button.Group should be have children type SkympButton");return r.cloneElement(e,{key:t.toString(),className:o("skymp-button-group__button",{"skymp-button-group_visible":i,"skymp-button-group_active":e.props.active},e.props.className),children:r.createElement(r.Fragment,null,r.createElement(w,{className:"skymp-button-group__icon"}),e.props.children,r.createElement(w,{className:"skymp-button-group__icon"}))})}));u.displayName="SkympButtonGroup";const y=Object.assign(c,{Group:u});exports.Button=y,exports.Window=({type:e=exports.WindowType.default,isMovable:o=!1,isResizable:i=!1,top:n=0,left:s=0,scale:d=1,...l})=>{const m=t.useMemo(()=>3.203*d,[d]),g=t.useMemo(()=>2.884*d,[d]),c=t.useMemo(()=>4.665*d,[d]),[p,w]=t.useState(!1),u=t.useRef(null);t.useLayoutEffect(()=>{w(!0)},[]);const y=a({width:l.width,height:l.height,top:n,left:s,isMovable:o,isResizable:i,maxWidth:l.maxWidth,maxHeight:l.maxHeight,minWidth:l.minWidth,minHeight:l.minHeight});return t.useEffect(()=>{p&&(e===exports.WindowType.default?(void 0===l.width?y.setWidth(u.current&&u.current.offsetWidth):y.setWidth(l.width),void 0===l.height?y.setHeight(u.current&&u.current.offsetHeight):y.setHeight(l.height)):e===exports.WindowType.system&&(y.setWidth(1275),y.setHeight(680)))},[p,l.height,l.width,e,y,u]),r.createElement("div",{ref:u,className:"skymp-window",style:{position:"absolute",top:y.top,left:y.left,opacity:u?1:0}},void 0!==y.width&&void 0!==y.height&&r.createElement(h,{width:y.width,height:y.height,logo:e===exports.WindowType.system?l.logo:void 0,header:e===exports.WindowType.system?l.header:void 0,content:l.content,footer:e===exports.WindowType.system?l.footer:void 0,scale:d,marginFrame:m,strokeWidth:g,holeCorner:c,createDragMove:e===exports.WindowType.system?()=>y.createDragMove({isMovable:!1}):y.createDragMove,createDragResize:e===exports.WindowType.system?()=>y.createDragResize:y.createDragResize,frameGradientSvg:l.frameGradientSvg,backgroundGradientSvg:l.backgroundGradientSvg}))};
//# sourceMappingURL=index.js.map