@chief-editor/ui
Version:
UI Component for chief editor
1 lines • 3.6 kB
JavaScript
var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(r[o[a]]=e[o[a]])}return r};import{getZIndex}from"@co-hooks/dom";import{useCSSEnterLeave}from"@rc-hooks/animation";import{RcMask}from"@rc-hooks/mask";import{RcPortal}from"@rc-hooks/portal";import{useCombineRef,useRefGetter}from"@rc-hooks/use";import React,{useCallback,useMemo,useRef,useState}from"react";import{LayerContext}from"../../context/layer";import{useLayer}from"../../hooks";function getWrapperStyle(e){return{position:e,top:0,right:0,bottom:0,left:0,pointerEvents:"none"}}function getPositionStyle(e,t){void 0===t&&(t=!1);var r={pointerEvents:t?"none":"auto",position:"absolute",zIndex:2};switch(e.horizontal){case"left":r.left=(e.left||0)+"px";break;case"right":r.right=(e.right||0)+"px";break;case"center":r.left="50%",r.transform="translateX(-50%)";break;case"dock":r.left=(e.left||0)+"px",r.right=(e.right||0)+"px"}switch(e.vertical){case"top":r.top=(e.top||0)+"px";break;case"bottom":r.bottom=(e.bottom||0)+"px";break;case"center":r.top="50%",r.transform="translateY(-50%)";break;case"dock":r.top=(e.top||0)+"px",r.bottom=(e.bottom||0)+"px"}return"center"===e.horizontal&&"center"===e.vertical&&(r.transform="translate(-50%, -50%)"),r}var ACTIVE_POSTION={fixed:!0,absolute:!0,relative:!0};function getWrapperPosition(e){var t=getComputedStyle(e).position;return e===document.body?"fixed":(ACTIVE_POSTION[t||""]||(e.style.position="relative"),"absolute")}function RcDialogFC(e){var t=e.show,r=void 0!==t&&t,o=e.maskClassName,a=e.maskStyle,n=void 0===a?{}:a,s=e.onMaskClick,i=e.children,l=e.getContainer,c=e.zIndex,p=e.mask,f=e.preventPointerEvent,m=void 0!==f&&f,u=e.forceFixed,g=void 0!==u&&u,v=e.wrapperClassName,d=e.wrapperStyle,h=e.animation,b=void 0===h?{disabled:!0}:h,y=e.wrapperRef,k=void 0===y?null:y,_=e.style,x=e.horizontal,R=e.left,C=e.right,S=e.top,w=e.bottom,O=e.vertical,E=__rest(e,["show","maskClassName","maskStyle","onMaskClick","children","getContainer","zIndex","mask","preventPointerEvent","forceFixed","wrapperClassName","wrapperStyle","animation","wrapperRef","style","horizontal","left","right","top","bottom","vertical"]),P={horizontal:x,left:R,right:C,top:S,bottom:w,vertical:O},I=useRefGetter(l),z=useLayer(),N=useRef(null),j=useRef(null),L=useCombineRef(k,N),M=useState("absolute"),F=M[0],T=M[1],W=useMemo((function(){return null!=c?c:getZIndex()}),[c,r]),D=useCallback((function(){var e=I();return e?e():z()}),[]),A=useCallback((function(){var e=D();e&&T(g?"fixed":getWrapperPosition(e))}),[]);return useCSSEnterLeave(N,b),React.createElement(RcPortal,{getContainer:D,onUpdated:A},r&&React.createElement("div",{ref:L,className:v,style:__assign(__assign({zIndex:W},getWrapperStyle(F)),d)},p&&React.createElement(RcMask,{show:!0,className:o,style:__assign(__assign({},n),{zIndex:1}),onClick:s}),React.createElement(LayerContext.Provider,{value:j},React.createElement("div",__assign({},E,{ref:j,style:__assign(__assign({},getPositionStyle(P,m)),_)}),i))))}export var RcDialog=React.forwardRef((function(e,t){return React.createElement(RcDialogFC,__assign({},e,{wrapperRef:t}))}));