Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-floater
Advanced tools
react-floater - npm Package Compare versions
Comparing version 0.6.2 to 0.6.3
@@ -7,2 +7,3 @@ import React from 'react'; | ||
| import is from 'is-lite'; | ||
| import treeChanges from 'tree-changes'; | ||
| import ReactDOM from 'react-dom'; | ||
@@ -154,3 +155,3 @@ import ExecutionEnvironment from 'exenv'; | ||
| var canUseDOM=ExecutionEnvironment.canUseDOM;var isReact16=ReactDOM.createPortal!==undefined;function comparator(data,nextData){return {changedFrom:function changedFrom(key,previous,actual){return data[key]===previous&&nextData[key]===actual;},changedTo:function changedTo(key,actual){return data[key]!==actual&&nextData[key]===actual;},changed:function changed(key){return data[key]!==nextData[key];}};}function isMobile(){return 'ontouchstart'in window&&/Mobi/.test(navigator.userAgent);}/** | ||
| var canUseDOM=ExecutionEnvironment.canUseDOM;var isReact16=ReactDOM.createPortal!==undefined;function isMobile(){return 'ontouchstart'in window&&/Mobi/.test(navigator.userAgent);}/** | ||
| * Log method calls if debug is enabled | ||
@@ -164,8 +165,8 @@ * | ||
| * @param {boolean} [arg.debug] - Nothing will be logged unless debug is true | ||
| */function log(_ref){var title=_ref.title,data=_ref.data,_ref$warn=_ref.warn,warn=_ref$warn===void 0?false:_ref$warn,_ref$debug=_ref.debug,debug=_ref$debug===void 0?false:_ref$debug;/* eslint-disable no-console */var logFn=warn?console.warn||console.error:console.log;if(debug&&title&&data){console.groupCollapsed("%creact-floater: ".concat(title),'color: #9b00ff; font-weight: bold; font-size: 12px;');if(Array.isArray(data)){data.forEach(function(d){if(is.plainObject(d)&&d.key){logFn.apply(console,[d.key,d.value]);}else{logFn.apply(console,[d]);}});}else{logFn.apply(console,[data]);}console.groupEnd();}/* eslint-enable */}function on(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.addEventListener(event,cb,capture);}function off(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.removeEventListener(event,cb,capture);}function once(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var _nextCB;_nextCB=function nextCB(e){//eslint-disable-line prefer-const | ||
| cb(e);off(element,event,_nextCB);};on(element,event,_nextCB,capture);}function noop(){} | ||
| */function log(_ref){var title=_ref.title,data=_ref.data,_ref$warn=_ref.warn,warn=_ref$warn===void 0?false:_ref$warn,_ref$debug=_ref.debug,debug=_ref$debug===void 0?false:_ref$debug;/* eslint-disable no-console */var logFn=warn?console.warn||console.error:console.log;if(debug&&title&&data){console.groupCollapsed("%creact-floater: ".concat(title),'color: #9b00ff; font-weight: bold; font-size: 12px;');if(Array.isArray(data)){data.forEach(function(d){if(is.plainObject(d)&&d.key){logFn.apply(console,[d.key,d.value]);}else{logFn.apply(console,[d]);}});}else{logFn.apply(console,[data]);}console.groupEnd();}/* eslint-enable */}function on(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.addEventListener(event,cb,capture);}function off(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.removeEventListener(event,cb,capture);}function once(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var _nextCB;// eslint-disable-next-line prefer-const | ||
| _nextCB=function nextCB(e){cb(e);off(element,event,_nextCB);};on(element,event,_nextCB,capture);}function noop(){} | ||
| var ReactFloaterPortal=/*#__PURE__*/function(_React$Component){_inherits(ReactFloaterPortal,_React$Component);function ReactFloaterPortal(props){var _this;_classCallCheck(this,ReactFloaterPortal);_this=_possibleConstructorReturn(this,_getPrototypeOf(ReactFloaterPortal).call(this,props));if(!canUseDOM)return _possibleConstructorReturn(_this);_this.node=document.createElement('div');if(props.id){_this.node.id=props.id;}if(props.zIndex){_this.node.style.zIndex=props.zIndex;}document.body.appendChild(_this.node);return _this;}_createClass(ReactFloaterPortal,[{key:"componentDidMount",value:function componentDidMount(){if(!canUseDOM)return;if(!isReact16){this.renderPortal();}}},{key:"componentDidUpdate",value:function componentDidUpdate(){if(!canUseDOM)return;if(!isReact16){this.renderPortal();}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(!canUseDOM||!this.node)return;if(!isReact16){ReactDOM.unmountComponentAtNode(this.node);}document.body.removeChild(this.node);}},{key:"renderPortal",value:function renderPortal(){if(!canUseDOM)return null;var _this$props=this.props,children=_this$props.children,setRef=_this$props.setRef;/* istanbul ignore else */if(isReact16){return ReactDOM.createPortal(children,this.node);}var portal=ReactDOM.unstable_renderSubtreeIntoContainer(this,children.length>1?React.createElement("div",null,children):children[0],this.node);setRef(portal);return null;}},{key:"renderReact16",value:function renderReact16(){var _this$props2=this.props,hasChildren=_this$props2.hasChildren,placement=_this$props2.placement,target=_this$props2.target;if(!hasChildren){if(target||placement==='center'){return this.renderPortal();}return null;}return this.renderPortal();}},{key:"render",value:function render(){if(!isReact16){return null;}return this.renderReact16();}}]);return ReactFloaterPortal;}(React.Component);_defineProperty(ReactFloaterPortal,"propTypes",{children:PropTypes.oneOfType([PropTypes.element,PropTypes.array]),hasChildren:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),placement:PropTypes.string,setRef:PropTypes.func.isRequired,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),zIndex:PropTypes.number}); | ||
| var FloaterArrow=/*#__PURE__*/function(_React$Component){_inherits(FloaterArrow,_React$Component);function FloaterArrow(){_classCallCheck(this,FloaterArrow);return _possibleConstructorReturn(this,_getPrototypeOf(FloaterArrow).apply(this,arguments));}_createClass(FloaterArrow,[{key:"render",value:function render(){var _this$props=this.props,placement=_this$props.placement,setArrowRef=_this$props.setArrowRef,styles=_this$props.styles;var _styles$arrow=styles.arrow,color=_styles$arrow.color,display=_styles$arrow.display,length=_styles$arrow.length,position=_styles$arrow.position,spread=_styles$arrow.spread;var arrowStyles={display:display,position:position};var points;var x=spread;var y=length;/* istanbul ignore else */if(placement.startsWith('top')){points="0,0 ".concat(x/2,",").concat(y," ").concat(x,",0");arrowStyles.bottom=0;}else if(placement.startsWith('bottom')){points="".concat(x,",").concat(y," ").concat(x/2,",0 0,").concat(y);arrowStyles.top=0;}else if(placement.startsWith('left')){y=spread;x=length;points="0,0 ".concat(x,",").concat(y/2," 0,").concat(y);arrowStyles.right=0;}else if(placement.startsWith('right')){y=spread;x=length;points="".concat(x,",").concat(y," ").concat(x,",0 0,").concat(y/2);arrowStyles.left=0;}return React.createElement("div",{className:"__floater__arrow",style:this.parentStyle},React.createElement("span",{ref:setArrowRef,style:arrowStyles},React.createElement("svg",{width:x,height:y,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},React.createElement("polygon",{points:points,fill:color}))));}},{key:"parentStyle",get:function get(){var _this$props2=this.props,placement=_this$props2.placement,styles=_this$props2.styles;var length=styles.arrow.length;var arrow={position:'absolute'};/* istanbul ignore else */if(placement.startsWith('top')){arrow.bottom=0;arrow.left=0;arrow.right=0;arrow.height=length;}else if(placement.startsWith('bottom')){arrow.left=0;arrow.right=0;arrow.top=0;arrow.height=length;}else if(placement.startsWith('left')){arrow.right=0;arrow.top=0;arrow.bottom=0;}else if(placement.startsWith('right')){arrow.left=0;arrow.top=0;}return arrow;}}]);return FloaterArrow;}(React.Component);_defineProperty(FloaterArrow,"propTypes",{placement:PropTypes.string.isRequired,setArrowRef:PropTypes.func.isRequired,styles:PropTypes.object.isRequired}); | ||
| var FloaterArrow=/*#__PURE__*/function(_React$Component){_inherits(FloaterArrow,_React$Component);function FloaterArrow(){_classCallCheck(this,FloaterArrow);return _possibleConstructorReturn(this,_getPrototypeOf(FloaterArrow).apply(this,arguments));}_createClass(FloaterArrow,[{key:"render",value:function render(){var _this$props=this.props,placement=_this$props.placement,setArrowRef=_this$props.setArrowRef,styles=_this$props.styles;var _styles$arrow=styles.arrow,color=_styles$arrow.color,display=_styles$arrow.display,length=_styles$arrow.length,margin=_styles$arrow.margin,position=_styles$arrow.position,spread=_styles$arrow.spread;var arrowStyles={display:display,position:position};var points;var x=spread;var y=length;/* istanbul ignore else */if(placement.startsWith('top')){points="0,0 ".concat(x/2,",").concat(y," ").concat(x,",0");arrowStyles.bottom=0;arrowStyles.marginLeft=margin;arrowStyles.marginRight=margin;}else if(placement.startsWith('bottom')){points="".concat(x,",").concat(y," ").concat(x/2,",0 0,").concat(y);arrowStyles.top=0;arrowStyles.marginLeft=margin;arrowStyles.marginRight=margin;}else if(placement.startsWith('left')){y=spread;x=length;points="0,0 ".concat(x,",").concat(y/2," 0,").concat(y);arrowStyles.right=0;arrowStyles.marginTop=margin;arrowStyles.marginBottom=margin;}else if(placement.startsWith('right')){y=spread;x=length;points="".concat(x,",").concat(y," ").concat(x,",0 0,").concat(y/2);arrowStyles.left=0;arrowStyles.marginTop=margin;arrowStyles.marginBottom=margin;}return React.createElement("div",{className:"__floater__arrow",style:this.parentStyle},React.createElement("span",{ref:setArrowRef,style:arrowStyles},React.createElement("svg",{width:x,height:y,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},React.createElement("polygon",{points:points,fill:color}))));}},{key:"parentStyle",get:function get(){var _this$props2=this.props,placement=_this$props2.placement,styles=_this$props2.styles;var length=styles.arrow.length;var arrow={position:'absolute'};/* istanbul ignore else */if(placement.startsWith('top')){arrow.bottom=0;arrow.left=0;arrow.right=0;arrow.height=length;}else if(placement.startsWith('bottom')){arrow.left=0;arrow.right=0;arrow.top=0;arrow.height=length;}else if(placement.startsWith('left')){arrow.right=0;arrow.top=0;arrow.bottom=0;}else if(placement.startsWith('right')){arrow.left=0;arrow.top=0;}return arrow;}}]);return FloaterArrow;}(React.Component);_defineProperty(FloaterArrow,"propTypes",{placement:PropTypes.string.isRequired,setArrowRef:PropTypes.func.isRequired,styles:PropTypes.object.isRequired}); | ||
@@ -176,10 +177,12 @@ var FloaterCloseBtn=function FloaterCloseBtn(_ref){var handleClick=_ref.handleClick,styles=_ref.styles;var color=styles.color,height=styles.height,width=styles.width,style=_objectWithoutProperties(styles,["color","height","width"]);return React.createElement("button",{"aria-label":"close",onClick:handleClick,style:style,type:"button"},React.createElement("svg",{width:"".concat(width,"px"),height:"".concat(height,"px"),viewBox:"0 0 18 18",version:"1.1",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid"},React.createElement("g",null,React.createElement("path",{d:"M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z",fill:color}))));};FloaterCloseBtn.propTypes={handleClick:PropTypes.func.isRequired,styles:PropTypes.object.isRequired}; | ||
| var Floater=/*#__PURE__*/function(_React$Component){_inherits(Floater,_React$Component);function Floater(){_classCallCheck(this,Floater);return _possibleConstructorReturn(this,_getPrototypeOf(Floater).apply(this,arguments));}_createClass(Floater,[{key:"render",value:function render(){var _this$props=this.props,component=_this$props.component,closeFn=_this$props.handleClick,hideArrow=_this$props.hideArrow,setFloaterRef=_this$props.setFloaterRef,status=_this$props.status;var output={};var classes=['__floater'];if(component){if(React.isValidElement(component)){output.content=React.cloneElement(component,{closeFn:closeFn});}else{output.content=component({closeFn:closeFn});}}else{output.content=React.createElement(FloaterContainer,this.props);}if(status===STATUS.OPEN){classes.push('__floater__open');}if(!hideArrow){output.arrow=React.createElement(FloaterArrow,this.props);}return React.createElement("div",{ref:setFloaterRef,className:classes.join(' '),style:this.style},React.createElement("div",{className:"__floater__body"},output.content,output.arrow));}},{key:"style",get:function get(){var _this$props2=this.props,disableAnimation=_this$props2.disableAnimation,component=_this$props2.component,placement=_this$props2.placement,hideArrow=_this$props2.hideArrow,isPositioned=_this$props2.isPositioned,status=_this$props2.status,styles=_this$props2.styles;var length=styles.arrow.length,floater=styles.floater,floaterCentered=styles.floaterCentered,floaterClosing=styles.floaterClosing,floaterOpening=styles.floaterOpening,floaterWithAnimation=styles.floaterWithAnimation,floaterWithComponent=styles.floaterWithComponent;var element={};if(!hideArrow){if(placement.startsWith('top')){element.padding="0 0 ".concat(length,"px");}else if(placement.startsWith('bottom')){element.padding="".concat(length,"px 0 0");}else if(placement.startsWith('left')){element.padding="0 ".concat(length,"px 0 0");}else if(placement.startsWith('right')){element.padding="0 0 0 ".concat(length,"px");}}if([STATUS.OPENING,STATUS.OPEN].indexOf(status)!==-1){element=_objectSpread({},element,floaterOpening);}if(status===STATUS.CLOSING){element=_objectSpread({},element,floaterClosing);}if(status===STATUS.OPEN&&!disableAnimation&&!isPositioned){element=_objectSpread({},element,floaterWithAnimation);}if(placement==='center'){element=_objectSpread({},element,floaterCentered);}if(component){element=_objectSpread({},element,floaterWithComponent);}return _objectSpread({},floater,element);}}]);return Floater;}(React.Component);_defineProperty(Floater,"propTypes",{component:PropTypes.oneOfType([PropTypes.func,PropTypes.element]),content:PropTypes.node,disableAnimation:PropTypes.bool.isRequired,footer:PropTypes.node,handleClick:PropTypes.func.isRequired,hideArrow:PropTypes.bool.isRequired,isPositioned:PropTypes.bool,open:PropTypes.bool,placement:PropTypes.string.isRequired,positionWrapper:PropTypes.bool.isRequired,setArrowRef:PropTypes.func.isRequired,setFloaterRef:PropTypes.func.isRequired,showCloseButton:PropTypes.bool,status:PropTypes.string.isRequired,styles:PropTypes.object.isRequired,title:PropTypes.node}); | ||
| var Floater=/*#__PURE__*/function(_React$Component){_inherits(Floater,_React$Component);function Floater(){_classCallCheck(this,Floater);return _possibleConstructorReturn(this,_getPrototypeOf(Floater).apply(this,arguments));}_createClass(Floater,[{key:"render",value:function render(){var _this$props=this.props,component=_this$props.component,closeFn=_this$props.handleClick,hideArrow=_this$props.hideArrow,setFloaterRef=_this$props.setFloaterRef,status=_this$props.status;var output={};var classes=['__floater'];if(component){if(React.isValidElement(component)){output.content=React.cloneElement(component,{closeFn:closeFn});}else{output.content=component({closeFn:closeFn});}}else{output.content=React.createElement(FloaterContainer,this.props);}if(status===STATUS.OPEN){classes.push('__floater__open');}if(!hideArrow){output.arrow=React.createElement(FloaterArrow,this.props);}return React.createElement("div",{ref:setFloaterRef,className:classes.join(' '),style:this.style},React.createElement("div",{className:"__floater__body"},output.content,output.arrow));}},{key:"style",get:function get(){var _this$props2=this.props,disableAnimation=_this$props2.disableAnimation,component=_this$props2.component,placement=_this$props2.placement,hideArrow=_this$props2.hideArrow,isPositioned=_this$props2.isPositioned,status=_this$props2.status,styles=_this$props2.styles;var length=styles.arrow.length,floater=styles.floater,floaterCentered=styles.floaterCentered,floaterClosing=styles.floaterClosing,floaterOpening=styles.floaterOpening,floaterWithAnimation=styles.floaterWithAnimation,floaterWithComponent=styles.floaterWithComponent;var element={};if(!hideArrow){if(placement.startsWith('top')){element.padding="0 0 ".concat(length,"px");}else if(placement.startsWith('bottom')){element.padding="".concat(length,"px 0 0");}else if(placement.startsWith('left')){element.padding="0 ".concat(length,"px 0 0");}else if(placement.startsWith('right')){element.padding="0 0 0 ".concat(length,"px");}}if([STATUS.OPENING,STATUS.OPEN].includes(status)){element=_objectSpread({},element,floaterOpening);}if(status===STATUS.CLOSING){element=_objectSpread({},element,floaterClosing);}if(status===STATUS.OPEN&&!disableAnimation&&!isPositioned){element=_objectSpread({},element,floaterWithAnimation);}if(placement==='center'){element=_objectSpread({},element,floaterCentered);}if(component){element=_objectSpread({},element,floaterWithComponent);}return _objectSpread({},floater,element);}}]);return Floater;}(React.Component);_defineProperty(Floater,"propTypes",{component:PropTypes.oneOfType([PropTypes.func,PropTypes.element]),content:PropTypes.node,disableAnimation:PropTypes.bool.isRequired,footer:PropTypes.node,handleClick:PropTypes.func.isRequired,hideArrow:PropTypes.bool.isRequired,isPositioned:PropTypes.bool,open:PropTypes.bool,placement:PropTypes.string.isRequired,positionWrapper:PropTypes.bool.isRequired,setArrowRef:PropTypes.func.isRequired,setFloaterRef:PropTypes.func.isRequired,showCloseButton:PropTypes.bool,status:PropTypes.string.isRequired,styles:PropTypes.object.isRequired,title:PropTypes.node}); | ||
| var ReactFloaterWrapper=/*#__PURE__*/function(_React$Component){_inherits(ReactFloaterWrapper,_React$Component);function ReactFloaterWrapper(){_classCallCheck(this,ReactFloaterWrapper);return _possibleConstructorReturn(this,_getPrototypeOf(ReactFloaterWrapper).apply(this,arguments));}_createClass(ReactFloaterWrapper,[{key:"render",value:function render(){var _this$props=this.props,children=_this$props.children,handleClick=_this$props.handleClick,handleMouseEnter=_this$props.handleMouseEnter,handleMouseLeave=_this$props.handleMouseLeave,setChildRef=_this$props.setChildRef,setWrapperRef=_this$props.setWrapperRef,style=_this$props.style,styles=_this$props.styles;var element;/* istanbul ignore else */if(children){if(React.Children.count(children)===1){if(!React.isValidElement(children)){element=React.createElement("span",null,children);}else{var refProp=is.function(children.type)?'innerRef':'ref';element=React.cloneElement(React.Children.only(children),_defineProperty({},refProp,setChildRef));}}else{element=children;}}if(!element){return null;}return React.createElement("span",{ref:setWrapperRef,style:_objectSpread({},styles,style),onClick:handleClick,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave},element);}}]);return ReactFloaterWrapper;}(React.Component);_defineProperty(ReactFloaterWrapper,"propTypes",{children:PropTypes.node,handleClick:PropTypes.func.isRequired,handleMouseEnter:PropTypes.func.isRequired,handleMouseLeave:PropTypes.func.isRequired,setChildRef:PropTypes.func.isRequired,setWrapperRef:PropTypes.func.isRequired,style:PropTypes.object,styles:PropTypes.object.isRequired}); | ||
| var defaultOptions={zIndex:100};function getStyles(styles){var options=deepmerge(defaultOptions,styles.options||{});return {wrapper:{cursor:'help',display:'inline-flex',flexDirection:'column',zIndex:options.zIndex},wrapperPosition:{left:-1000,position:'absolute',top:-1000,visibility:'hidden'},floater:{display:'inline-block',filter:'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',maxWidth:300,opacity:0,position:'relative',transition:'opacity 0.3s',visibility:'hidden',zIndex:options.zIndex},floaterOpening:{opacity:1,visibility:'visible'},floaterWithAnimation:{opacity:1,transition:'opacity 0.3s, transform 0.2s',visibility:'visible'},floaterWithComponent:{maxWidth:'100%'},floaterClosing:{opacity:0,visibility:'visible'},floaterCentered:{left:'50%',position:'fixed',top:'50%',transform:'translate(-50%, -50%)'},container:{backgroundColor:'#fff',color:'#666',minHeight:60,minWidth:200,padding:20,position:'relative'},title:{borderBottom:'1px solid #555',color:'#555',fontSize:18,marginBottom:5,paddingBottom:6,paddingRight:18},content:{fontSize:15},close:{backgroundColor:'transparent',border:0,borderRadius:0,color:'#555',fontSize:0,height:15,outline:'none',padding:10,position:'absolute',right:0,top:0,width:15,WebkitAppearance:'none'},footer:{borderTop:'1px solid #ccc',fontSize:13,marginTop:10,paddingTop:5},arrow:{color:'#fff',display:'inline-flex',length:16,position:'absolute',spread:32},options:options};} | ||
| var defaultOptions={zIndex:100};function getStyles(styles){var options=deepmerge(defaultOptions,styles.options||{});return {wrapper:{cursor:'help',display:'inline-flex',flexDirection:'column',zIndex:options.zIndex},wrapperPosition:{left:-1000,position:'absolute',top:-1000,visibility:'hidden'},floater:{display:'inline-block',filter:'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',maxWidth:300,opacity:0,position:'relative',transition:'opacity 0.3s',visibility:'hidden',zIndex:options.zIndex},floaterOpening:{opacity:1,visibility:'visible'},floaterWithAnimation:{opacity:1,transition:'opacity 0.3s, transform 0.2s',visibility:'visible'},floaterWithComponent:{maxWidth:'100%'},floaterClosing:{opacity:0,visibility:'visible'},floaterCentered:{left:'50%',position:'fixed',top:'50%',transform:'translate(-50%, -50%)'},container:{backgroundColor:'#fff',color:'#666',minHeight:60,minWidth:200,padding:20,position:'relative'},title:{borderBottom:'1px solid #555',color:'#555',fontSize:18,marginBottom:5,paddingBottom:6,paddingRight:18},content:{fontSize:15},close:{backgroundColor:'transparent',border:0,borderRadius:0,color:'#555',fontSize:0,height:15,outline:'none',padding:10,position:'absolute',right:0,top:0,width:15,WebkitAppearance:'none'},footer:{borderTop:'1px solid #ccc',fontSize:13,marginTop:10,paddingTop:5},arrow:{color:'#fff',display:'inline-flex',length:16,margin:8,position:'absolute',spread:32},options:options};} | ||
| var POSITIONING_PROPS=['position','top','right','bottom','left'];var ReactFloater=/*#__PURE__*/function(_React$Component){_inherits(ReactFloater,_React$Component);function ReactFloater(props){var _this;_classCallCheck(this,ReactFloater);_this=_possibleConstructorReturn(this,_getPrototypeOf(ReactFloater).call(this,props));/* istanbul ignore else */_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setArrowRef",function(ref){_this.arrowRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setChildRef",function(ref){_this.childRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setFloaterRef",function(ref){if(!_this.floaterRef){_this.floaterRef=ref;}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setWrapperRef",function(ref){_this.wrapperRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleTransitionEnd",function(){var status=_this.state.status;var callback=_this.props.callback;/* istanbul ignore else */if(_this.wrapperPopper){_this.wrapperPopper.instance.update();}_this.setState({status:status===STATUS.OPENING?STATUS.OPEN:STATUS.IDLE},function(){var newStatus=_this.state.status;callback(newStatus===STATUS.OPEN?'open':'close',_this.props);});});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleClick",function(){var _this$props=_this.props,event=_this$props.event,open=_this$props.open;if(is.boolean(open))return;var _this$state=_this.state,positionWrapper=_this$state.positionWrapper,status=_this$state.status;/* istanbul ignore else */if(_this.event==='click'||_this.event==='hover'&&positionWrapper){log({title:'click',data:[{event:event,status:status===STATUS.OPEN?'closing':'opening'}],debug:_this.debug});_this.toggle();}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMouseEnter",function(){var _this$props2=_this.props,event=_this$props2.event,open=_this$props2.open;if(is.boolean(open)||isMobile())return;var status=_this.state.status;/* istanbul ignore else */if(_this.event==='hover'&&status===STATUS.IDLE){log({title:'mouseEnter',data:[{key:'originalEvent',value:event}],debug:_this.debug});clearTimeout(_this.eventDelayTimeout);_this.toggle();}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMouseLeave",function(){var _this$props3=_this.props,event=_this$props3.event,eventDelay=_this$props3.eventDelay,open=_this$props3.open;if(is.boolean(open)||isMobile())return;var _this$state2=_this.state,status=_this$state2.status,positionWrapper=_this$state2.positionWrapper;/* istanbul ignore else */if(_this.event==='hover'){log({title:'mouseLeave',data:[{key:'originalEvent',value:event}],debug:_this.debug});if(!eventDelay){_this.toggle(STATUS.IDLE);}else if([STATUS.OPENING,STATUS.OPEN].indexOf(status)!==-1&&!positionWrapper&&!_this.eventDelayTimeout){_this.eventDelayTimeout=setTimeout(function(){delete _this.eventDelayTimeout;_this.toggle();},eventDelay*1000);}}});_this.state={currentPlacement:props.placement,positionWrapper:props.wrapperOptions.position&&!!props.target,status:STATUS.INIT,statusWrapper:STATUS.INIT};_this._isMounted=false;return _this;}_createClass(ReactFloater,[{key:"componentDidMount",value:function componentDidMount(){if(!canUseDOM)return;var positionWrapper=this.state.positionWrapper;var _this$props5=this.props,children=_this$props5.children,open=_this$props5.open,target=_this$props5.target;this._isMounted=true;log({title:'init',data:{hasChildren:!!children,hasTarget:!!target,isControlled:is.boolean(open),positionWrapper:positionWrapper,target:this.target,floater:this.floaterRef},debug:this.debug});this.initPopper();if(!children&&target&&!is.boolean(open));}},{key:"componentWillReceiveProps",value:function componentWillReceiveProps(nextProps){if(!canUseDOM)return;var _this$props6=this.props,open=_this$props6.open,target=_this$props6.target,wrapperOptions=_this$props6.wrapperOptions;if(open!==nextProps.open){this.toggle();}if(wrapperOptions.position!==nextProps.wrapperOptions.position||target!==nextProps.target){this.changeWrapperPosition(nextProps);}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(!canUseDOM)return;var _this$props7=this.props,autoOpen=_this$props7.autoOpen,open=_this$props7.open;var _comparator=comparator(prevState,this.state),changedFrom=_comparator.changedFrom,changedTo=_comparator.changedTo;if(changedTo('status',STATUS.IDLE)&&open){this.toggle(STATUS.OPEN);}else if(changedFrom('status',STATUS.INIT,STATUS.IDLE)&&autoOpen){this.toggle(STATUS.OPEN);}if(this.floaterRef&&(changedTo('status',STATUS.OPENING)||changedTo('status',STATUS.CLOSING))){once(this.floaterRef,'transitionend',this.handleTransitionEnd);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(!canUseDOM)return;this._isMounted=false;if(this.popper){this.popper.instance.destroy();}if(this.wrapperPopper){this.wrapperPopper.instance.destroy();}}},{key:"initPopper",value:function initPopper(){var _this2=this;var target=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.target;var positionWrapper=this.state.positionWrapper;var _this$props8=this.props,disableFlip=_this$props8.disableFlip,getPopper=_this$props8.getPopper,hideArrow=_this$props8.hideArrow,offset=_this$props8.offset,placement=_this$props8.placement,wrapperOptions=_this$props8.wrapperOptions;var flipBehavior=placement==='top'||placement==='bottom'?'flip':['right','bottom-end','top-end','left','top-start','bottom-start'];/* istanbul ignore else */if(placement==='center'){this.setState({status:STATUS.IDLE});}else if(target&&this.floaterRef){new Popper(target,this.floaterRef,{placement:placement,modifiers:{arrow:_objectSpread({enabled:!hideArrow,element:this.arrowRef},this.options.arrow),computeStyle:this.options.computeStyle,flip:_objectSpread({enabled:!disableFlip,behavior:flipBehavior},this.options.flip),keepTogether:this.options.keepTogether,hide:this.options.hide,inner:this.options.inner,offset:_objectSpread({offset:"0, ".concat(offset,"px")},this.options.offset),preventOverflow:this.options.preventOverflow,shift:this.options.shift},onCreate:function onCreate(data){_this2.popper=data;getPopper(data,'floater');if(_this2._isMounted){_this2.setState({currentPlacement:data.placement,status:STATUS.IDLE});}if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}},onUpdate:function onUpdate(data){_this2.popper=data;var currentPlacement=_this2.state.currentPlacement;if(_this2._isMounted&&data.placement!==currentPlacement){_this2.setState({currentPlacement:data.placement});}}});}if(positionWrapper){var wrapperOffset=!is.undefined(wrapperOptions.offset)?wrapperOptions.offset:0;new Popper(this.target,this.wrapperRef,{placement:wrapperOptions.placement||placement,modifiers:{arrow:{enabled:false},offset:{offset:"0, ".concat(wrapperOffset,"px")},flip:{enabled:false}},onCreate:function onCreate(data){_this2.wrapperPopper=data;if(_this2._isMounted){_this2.setState({statusWrapper:STATUS.IDLE});}getPopper(data,'wrapper');if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}}});}}},{key:"changeWrapperPosition",value:function changeWrapperPosition(_ref){var target=_ref.target,wrapperOptions=_ref.wrapperOptions;this.setState({positionWrapper:wrapperOptions.position&&!!target});}},{key:"toggle",value:function toggle(forceStatus){var status=this.state.status;var nextStatus=status===STATUS.OPEN?STATUS.CLOSING:STATUS.OPENING;if(!is.undefined(forceStatus)){nextStatus=forceStatus;}this.setState({status:nextStatus});}},{key:"render",value:function render(){var _this$state3=this.state,currentPlacement=_this$state3.currentPlacement,positionWrapper=_this$state3.positionWrapper,status=_this$state3.status;var _this$props9=this.props,children=_this$props9.children,component=_this$props9.component,content=_this$props9.content,disableAnimation=_this$props9.disableAnimation,footer=_this$props9.footer,hideArrow=_this$props9.hideArrow,id=_this$props9.id,isPositioned=_this$props9.isPositioned,open=_this$props9.open,showCloseButton=_this$props9.showCloseButton,style=_this$props9.style,target=_this$props9.target,title=_this$props9.title;var wrapper=React.createElement(ReactFloaterWrapper,{handleClick:this.handleClick,handleMouseEnter:this.handleMouseEnter,handleMouseLeave:this.handleMouseLeave,setChildRef:this.setChildRef,setWrapperRef:this.setWrapperRef,style:style,styles:this.styles.wrapper},children);var output={};if(positionWrapper){output.wrapperInPortal=wrapper;}else{output.wrapperAsChildren=wrapper;}return React.createElement("span",null,React.createElement(ReactFloaterPortal,{hasChildren:!!children,id:id,placement:currentPlacement,setRef:this.setFloaterRef,status:status,zIndex:this.styles.options.zIndex,target:target},React.createElement(Floater,{component:component,content:content,disableAnimation:disableAnimation,footer:footer,handleClick:this.handleClick,hideArrow:hideArrow||currentPlacement==='center',isPositioned:isPositioned,open:open,placement:currentPlacement,positionWrapper:positionWrapper,setArrowRef:this.setArrowRef,setFloaterRef:this.setFloaterRef,showCloseButton:showCloseButton,status:status,styles:this.styles,title:title}),output.wrapperInPortal),output.wrapperAsChildren);}},{key:"debug",get:function get(){var debug=this.props.debug;return debug||!!global.ReactFloaterDebug;}},{key:"event",get:function get(){var _this$props10=this.props,disableHoverToClick=_this$props10.disableHoverToClick,event=_this$props10.event;if(event==='hover'&&isMobile()&&!disableHoverToClick){return 'click';}return event;}},{key:"options",get:function get(){var options=this.props.options;return deepmerge(DEFAULTS,options||{});}},{key:"styles",get:function get(){var _this3=this;var _this$state4=this.state,status=_this$state4.status,positionWrapper=_this$state4.positionWrapper,statusWrapper=_this$state4.statusWrapper;var styles=this.props.styles;var nextStyles=deepmerge(getStyles(styles),styles);if(positionWrapper){var wrapperStyles;if(!([STATUS.IDLE].indexOf(status)!==-1)||!([STATUS.IDLE].indexOf(statusWrapper)!==-1)){wrapperStyles=nextStyles.wrapperPosition;}else{wrapperStyles=this.wrapperPopper.styles;}nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,wrapperStyles);}/* istanbul ignore else */if(this.target){var targetStyles=window.getComputedStyle(this.target);/* istanbul ignore else */if(this.wrapperStyles){nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,this.wrapperStyles);}else if(!(['relative','static'].indexOf(targetStyles.position)!==-1)){this.wrapperStyles={};if(!positionWrapper){POSITIONING_PROPS.forEach(function(d){_this3.wrapperStyles[d]=targetStyles[d];});nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,this.wrapperStyles);this.target.style.position='relative';this.target.style.top='auto';this.target.style.right='auto';this.target.style.bottom='auto';this.target.style.left='auto';}}}return nextStyles;}},{key:"target",get:function get(){var target=this.props.target;if(target){if(is.domElement(target)){return target;}return document.querySelector(target);}return this.childRef||this.wrapperRef;}}]);return ReactFloater;}(React.Component);_defineProperty(ReactFloater,"propTypes",{autoOpen:PropTypes.bool,callback:PropTypes.func,children:PropTypes.node,component:isRequiredIf(PropTypes.oneOfType([PropTypes.func,PropTypes.element]),function(props){return !props.content;}),content:isRequiredIf(PropTypes.node,function(props){return !props.component;}),debug:PropTypes.bool,disableAnimation:PropTypes.bool,disableFlip:PropTypes.bool,disableHoverToClick:PropTypes.bool,event:PropTypes.oneOf(['hover','click']),eventDelay:PropTypes.number,footer:PropTypes.node,getPopper:PropTypes.func,hideArrow:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),isPositioned:PropTypes.bool,offset:PropTypes.number,open:PropTypes.bool,options:PropTypes.object,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto','center']),showCloseButton:PropTypes.bool,style:PropTypes.object,styles:PropTypes.object,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),title:PropTypes.node,wrapperOptions:PropTypes.shape({offset:PropTypes.number,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto']),position:PropTypes.bool})});_defineProperty(ReactFloater,"defaultProps",{autoOpen:false,callback:noop,debug:false,disableAnimation:false,disableFlip:false,disableHoverToClick:false,event:'click',eventDelay:0.4,getPopper:noop,hideArrow:false,offset:15,placement:'bottom',showCloseButton:false,styles:{},target:null,wrapperOptions:{position:false}}); | ||
| var POSITIONING_PROPS=['position','top','right','bottom','left'];var ReactFloater=/*#__PURE__*/function(_React$Component){_inherits(ReactFloater,_React$Component);function ReactFloater(props){var _this;_classCallCheck(this,ReactFloater);_this=_possibleConstructorReturn(this,_getPrototypeOf(ReactFloater).call(this,props));/* istanbul ignore else */_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setArrowRef",function(ref){_this.arrowRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setChildRef",function(ref){_this.childRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setFloaterRef",function(ref){if(!_this.floaterRef){_this.floaterRef=ref;}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setWrapperRef",function(ref){_this.wrapperRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleTransitionEnd",function(){var status=_this.state.status;var callback=_this.props.callback;/* istanbul ignore else */if(_this.wrapperPopper){_this.wrapperPopper.instance.update();}_this.setState({status:status===STATUS.OPENING?STATUS.OPEN:STATUS.IDLE},function(){var newStatus=_this.state.status;callback(newStatus===STATUS.OPEN?'open':'close',_this.props);});});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleClick",function(){var _this$props=_this.props,event=_this$props.event,open=_this$props.open;if(is.boolean(open))return;var _this$state=_this.state,positionWrapper=_this$state.positionWrapper,status=_this$state.status;/* istanbul ignore else */if(_this.event==='click'||_this.event==='hover'&&positionWrapper){log({title:'click',data:[{event:event,status:status===STATUS.OPEN?'closing':'opening'}],debug:_this.debug});_this.toggle();}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMouseEnter",function(){var _this$props2=_this.props,event=_this$props2.event,open=_this$props2.open;if(is.boolean(open)||isMobile())return;var status=_this.state.status;/* istanbul ignore else */if(_this.event==='hover'&&status===STATUS.IDLE){log({title:'mouseEnter',data:[{key:'originalEvent',value:event}],debug:_this.debug});clearTimeout(_this.eventDelayTimeout);_this.toggle();}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMouseLeave",function(){var _this$props3=_this.props,event=_this$props3.event,eventDelay=_this$props3.eventDelay,open=_this$props3.open;if(is.boolean(open)||isMobile())return;var _this$state2=_this.state,status=_this$state2.status,positionWrapper=_this$state2.positionWrapper;/* istanbul ignore else */if(_this.event==='hover'){log({title:'mouseLeave',data:[{key:'originalEvent',value:event}],debug:_this.debug});if(!eventDelay){_this.toggle(STATUS.IDLE);}else if([STATUS.OPENING,STATUS.OPEN].includes(status)&&!positionWrapper&&!_this.eventDelayTimeout){_this.eventDelayTimeout=setTimeout(function(){delete _this.eventDelayTimeout;_this.toggle();},eventDelay*1000);}}});if(process.env.NODE_ENV!=='production'){var _this$props4=_this.props,children=_this$props4.children,open=_this$props4.open,target=_this$props4.target,wrapperOptions=_this$props4.wrapperOptions;if(wrapperOptions.position&&!target){console.warn('Missing props! You need to set a `target` to use `wrapperOptions.position`');//eslint-disable-line no-console | ||
| }if(!children&&!is.boolean(open)){console.warn('Missing props! You need to set `children`.');//eslint-disable-line no-console | ||
| }}_this.state={currentPlacement:props.placement,positionWrapper:props.wrapperOptions.position&&!!props.target,status:STATUS.INIT,statusWrapper:STATUS.INIT};_this._isMounted=false;return _this;}_createClass(ReactFloater,[{key:"componentDidMount",value:function componentDidMount(){if(!canUseDOM)return;var positionWrapper=this.state.positionWrapper;var _this$props5=this.props,children=_this$props5.children,open=_this$props5.open,target=_this$props5.target;this._isMounted=true;log({title:'init',data:{hasChildren:!!children,hasTarget:!!target,isControlled:is.boolean(open),positionWrapper:positionWrapper,target:this.target,floater:this.floaterRef},debug:this.debug});this.initPopper();if(!children&&target&&!is.boolean(open));}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(!canUseDOM)return;var _this$props6=this.props,autoOpen=_this$props6.autoOpen,open=_this$props6.open,target=_this$props6.target,wrapperOptions=_this$props6.wrapperOptions;var _treeChanges=treeChanges(prevState,this.state),changedFrom=_treeChanges.changedFrom,changedTo=_treeChanges.changedTo;if(prevProps.open!==open){this.toggle();}if(prevProps.wrapperOptions.position!==wrapperOptions.position||prevProps.target!==target){this.changeWrapperPosition(this.props);}if(changedTo('status',STATUS.IDLE)&&open){this.toggle(STATUS.OPEN);}else if(changedFrom('status',STATUS.INIT,STATUS.IDLE)&&autoOpen){this.toggle(STATUS.OPEN);}if(this.floaterRef&&(changedTo('status',STATUS.OPENING)||changedTo('status',STATUS.CLOSING))){once(this.floaterRef,'transitionend',this.handleTransitionEnd);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(!canUseDOM)return;this._isMounted=false;if(this.popper){this.popper.instance.destroy();}if(this.wrapperPopper){this.wrapperPopper.instance.destroy();}}},{key:"initPopper",value:function initPopper(){var _this2=this;var target=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.target;var positionWrapper=this.state.positionWrapper;var _this$props7=this.props,disableFlip=_this$props7.disableFlip,getPopper=_this$props7.getPopper,hideArrow=_this$props7.hideArrow,offset=_this$props7.offset,placement=_this$props7.placement,wrapperOptions=_this$props7.wrapperOptions;var flipBehavior=placement==='top'||placement==='bottom'?'flip':['right','bottom-end','top-end','left','top-start','bottom-start'];/* istanbul ignore else */if(placement==='center'){this.setState({status:STATUS.IDLE});}else if(target&&this.floaterRef){new Popper(target,this.floaterRef,{placement:placement,modifiers:{arrow:_objectSpread({enabled:!hideArrow,element:this.arrowRef},this.options.arrow),computeStyle:this.options.computeStyle,flip:_objectSpread({enabled:!disableFlip,behavior:flipBehavior},this.options.flip),keepTogether:this.options.keepTogether,hide:this.options.hide,inner:this.options.inner,offset:_objectSpread({offset:"0, ".concat(offset,"px")},this.options.offset),preventOverflow:this.options.preventOverflow,shift:this.options.shift},onCreate:function onCreate(data){_this2.popper=data;getPopper(data,'floater');if(_this2._isMounted){_this2.setState({currentPlacement:data.placement,status:STATUS.IDLE});}if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}},onUpdate:function onUpdate(data){_this2.popper=data;var currentPlacement=_this2.state.currentPlacement;if(_this2._isMounted&&data.placement!==currentPlacement){_this2.setState({currentPlacement:data.placement});}}});}if(positionWrapper){var wrapperOffset=!is.undefined(wrapperOptions.offset)?wrapperOptions.offset:0;new Popper(this.target,this.wrapperRef,{placement:wrapperOptions.placement||placement,modifiers:{arrow:{enabled:false},offset:{offset:"0, ".concat(wrapperOffset,"px")},flip:{enabled:false}},onCreate:function onCreate(data){_this2.wrapperPopper=data;if(_this2._isMounted){_this2.setState({statusWrapper:STATUS.IDLE});}getPopper(data,'wrapper');if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}}});}}},{key:"changeWrapperPosition",value:function changeWrapperPosition(_ref){var target=_ref.target,wrapperOptions=_ref.wrapperOptions;this.setState({positionWrapper:wrapperOptions.position&&!!target});}},{key:"toggle",value:function toggle(forceStatus){var status=this.state.status;var nextStatus=status===STATUS.OPEN?STATUS.CLOSING:STATUS.OPENING;if(!is.undefined(forceStatus)){nextStatus=forceStatus;}this.setState({status:nextStatus});}},{key:"render",value:function render(){var _this$state3=this.state,currentPlacement=_this$state3.currentPlacement,positionWrapper=_this$state3.positionWrapper,status=_this$state3.status;var _this$props8=this.props,children=_this$props8.children,component=_this$props8.component,content=_this$props8.content,disableAnimation=_this$props8.disableAnimation,footer=_this$props8.footer,hideArrow=_this$props8.hideArrow,id=_this$props8.id,isPositioned=_this$props8.isPositioned,open=_this$props8.open,showCloseButton=_this$props8.showCloseButton,style=_this$props8.style,target=_this$props8.target,title=_this$props8.title;var wrapper=React.createElement(ReactFloaterWrapper,{handleClick:this.handleClick,handleMouseEnter:this.handleMouseEnter,handleMouseLeave:this.handleMouseLeave,setChildRef:this.setChildRef,setWrapperRef:this.setWrapperRef,style:style,styles:this.styles.wrapper},children);var output={};if(positionWrapper){output.wrapperInPortal=wrapper;}else{output.wrapperAsChildren=wrapper;}return React.createElement("span",null,React.createElement(ReactFloaterPortal,{hasChildren:!!children,id:id,placement:currentPlacement,setRef:this.setFloaterRef,target:target,zIndex:this.styles.options.zIndex},React.createElement(Floater,{component:component,content:content,disableAnimation:disableAnimation,footer:footer,handleClick:this.handleClick,hideArrow:hideArrow||currentPlacement==='center',isPositioned:isPositioned,open:open,placement:currentPlacement,positionWrapper:positionWrapper,setArrowRef:this.setArrowRef,setFloaterRef:this.setFloaterRef,showCloseButton:showCloseButton,status:status,styles:this.styles,title:title}),output.wrapperInPortal),output.wrapperAsChildren);}},{key:"debug",get:function get(){var debug=this.props.debug;return debug||!!global.ReactFloaterDebug;}},{key:"event",get:function get(){var _this$props9=this.props,disableHoverToClick=_this$props9.disableHoverToClick,event=_this$props9.event;if(event==='hover'&&isMobile()&&!disableHoverToClick){return 'click';}return event;}},{key:"options",get:function get(){var options=this.props.options;return deepmerge(DEFAULTS,options||{});}},{key:"styles",get:function get(){var _this3=this;var _this$state4=this.state,status=_this$state4.status,positionWrapper=_this$state4.positionWrapper,statusWrapper=_this$state4.statusWrapper;var styles=this.props.styles;var nextStyles=deepmerge(getStyles(styles),styles);if(positionWrapper){var wrapperStyles;if(![STATUS.IDLE].includes(status)||![STATUS.IDLE].includes(statusWrapper)){wrapperStyles=nextStyles.wrapperPosition;}else{wrapperStyles=this.wrapperPopper.styles;}nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,wrapperStyles);}/* istanbul ignore else */if(this.target){var targetStyles=window.getComputedStyle(this.target);/* istanbul ignore else */if(this.wrapperStyles){nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,this.wrapperStyles);}else if(!['relative','static'].includes(targetStyles.position)){this.wrapperStyles={};if(!positionWrapper){POSITIONING_PROPS.forEach(function(d){_this3.wrapperStyles[d]=targetStyles[d];});nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,this.wrapperStyles);this.target.style.position='relative';this.target.style.top='auto';this.target.style.right='auto';this.target.style.bottom='auto';this.target.style.left='auto';}}}return nextStyles;}},{key:"target",get:function get(){var target=this.props.target;if(target){if(is.domElement(target)){return target;}return document.querySelector(target);}return this.childRef||this.wrapperRef;}}]);return ReactFloater;}(React.Component);_defineProperty(ReactFloater,"propTypes",{autoOpen:PropTypes.bool,callback:PropTypes.func,children:PropTypes.node,component:isRequiredIf(PropTypes.oneOfType([PropTypes.func,PropTypes.element]),function(props){return !props.content;}),content:isRequiredIf(PropTypes.node,function(props){return !props.component;}),debug:PropTypes.bool,disableAnimation:PropTypes.bool,disableFlip:PropTypes.bool,disableHoverToClick:PropTypes.bool,event:PropTypes.oneOf(['hover','click']),eventDelay:PropTypes.number,footer:PropTypes.node,getPopper:PropTypes.func,hideArrow:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),isPositioned:PropTypes.bool,offset:PropTypes.number,open:PropTypes.bool,options:PropTypes.object,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto','center']),showCloseButton:PropTypes.bool,style:PropTypes.object,styles:PropTypes.object,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),title:PropTypes.node,wrapperOptions:PropTypes.shape({offset:PropTypes.number,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto']),position:PropTypes.bool})});_defineProperty(ReactFloater,"defaultProps",{autoOpen:false,callback:noop,debug:false,disableAnimation:false,disableFlip:false,disableHoverToClick:false,event:'click',eventDelay:0.4,getPopper:noop,hideArrow:false,offset:15,placement:'bottom',showCloseButton:false,styles:{},target:null,wrapperOptions:{position:false}}); | ||
| export default ReactFloater; |
@@ -1,9 +0,19 @@ | ||
| declare module "react-floater" { | ||
| declare module 'react-floater' { | ||
| import * as React from 'react'; | ||
| type Placement = 'top' | 'top-start' | 'top-end' | | ||
| 'bottom' | 'bottom-start' | 'bottom-end' | | ||
| 'left' | 'left-start' | 'left-end' | | ||
| 'right' | 'right-start' | 'right-end' | | ||
| 'auto' | 'center'; | ||
| type Placement = | ||
| | 'top' | ||
| | 'top-start' | ||
| | 'top-end' | ||
| | 'bottom' | ||
| | 'bottom-start' | ||
| | 'bottom-end' | ||
| | 'left' | ||
| | 'left-start' | ||
| | 'left-end' | ||
| | 'right' | ||
| | 'right-start' | ||
| | 'right-end' | ||
| | 'auto' | ||
| | 'center'; | ||
@@ -13,16 +23,16 @@ type Action = 'open' | 'close'; | ||
| interface Options { | ||
| arrow?: Object, | ||
| computeStyle?: Object, | ||
| flip?: Object, | ||
| keepTogether?: Object, | ||
| hide?: Object, | ||
| inner?: Object, | ||
| offset?: Object, | ||
| preventOverflow?: Object, | ||
| shift?: Object, | ||
| arrow?: Object; | ||
| computeStyle?: Object; | ||
| flip?: Object; | ||
| keepTogether?: Object; | ||
| hide?: Object; | ||
| inner?: Object; | ||
| offset?: Object; | ||
| preventOverflow?: Object; | ||
| shift?: Object; | ||
| } | ||
| interface CallBackProps { | ||
| action: Action, | ||
| props: Props, | ||
| action: Action; | ||
| props: Props; | ||
| } | ||
@@ -34,11 +44,11 @@ | ||
| */ | ||
| autoOpen?: Boolean, | ||
| autoOpen?: Boolean; | ||
| /** | ||
| * It will be called when the Floater change state | ||
| */ | ||
| callback?: () => CallBackProps, | ||
| callback?: () => CallBackProps; | ||
| /** | ||
| * An element to trigger the Floater. | ||
| */ | ||
| children?: React.ReactNode, | ||
| children?: React.ReactNode; | ||
| /** | ||
@@ -48,3 +58,3 @@ * A React component or function to as a custom UI for the Floater. | ||
| */ | ||
| component?: React.ReactNode, | ||
| component?: React.ReactNode; | ||
| /** | ||
@@ -54,19 +64,19 @@ * The Floater content. It can be anything that can be rendered. | ||
| */ | ||
| content: React.ReactNode, | ||
| content: React.ReactNode; | ||
| /** | ||
| * Log some basic actions. | ||
| */ | ||
| debug?: Boolean, | ||
| debug?: Boolean; | ||
| /** | ||
| * Animate the Floater on scroll/resize. | ||
| */ | ||
| disableAnimation?: Boolean, | ||
| disableAnimation?: Boolean; | ||
| /** | ||
| * Disable changes in the Floater position on scroll/resize. | ||
| */ | ||
| disableFlip?: Boolean, | ||
| disableFlip?: Boolean; | ||
| /** | ||
| * Don't convert hover event to click on mobile. | ||
| */ | ||
| disableHoverToClick?: Boolean, | ||
| disableHoverToClick?: Boolean; | ||
| /** | ||
@@ -76,61 +86,61 @@ * The event that will trigger the Floater. It can be hover | click. | ||
| */ | ||
| event?: String, | ||
| event?: String; | ||
| /** | ||
| * The amount of time (in seconds) that the floater should wait after a mouseLeave event before hiding. Only valid for event type hover. | ||
| */ | ||
| eventDelay?: Number, | ||
| eventDelay?: Number; | ||
| /** | ||
| * It can be anything that can be rendered. | ||
| */ | ||
| footer?: React.ReactNode, | ||
| footer?: React.ReactNode; | ||
| /** | ||
| * Get the pooper.js instance | ||
| */ | ||
| getPopper?: Function, | ||
| getPopper?: Function; | ||
| /** | ||
| * Don't show the arrow. Useful for centered or modal layout. | ||
| */ | ||
| hideArrow?: Boolean, | ||
| hideArrow?: Boolean; | ||
| /** | ||
| * In case that you need to identify the portal. | ||
| */ | ||
| id?: String | Number, | ||
| isPositioned?: Boolean, | ||
| id?: String | Number; | ||
| isPositioned?: Boolean; | ||
| /** | ||
| * The distance between the Floater and its target in pixels. | ||
| */ | ||
| offset?: Number, | ||
| offset?: Number; | ||
| /** | ||
| * The switch between normal and controlled modes. | ||
| */ | ||
| open?: Boolean, | ||
| open?: Boolean; | ||
| /** | ||
| * Customize popper.js modifiers. | ||
| */ | ||
| options?: Options, | ||
| options?: Options; | ||
| /** | ||
| * The placement of the Floater. It will update the position if there's no space available. | ||
| */ | ||
| placement?: Placement, | ||
| placement?: Placement; | ||
| /** | ||
| * It will show a ⨉ button to close the Floater. | ||
| */ | ||
| showCloseButton?: Boolean, | ||
| style?: Object, | ||
| showCloseButton?: Boolean; | ||
| style?: Object; | ||
| /** | ||
| * Customize the default UI. | ||
| */ | ||
| styles?: Object, | ||
| styles?: Object; | ||
| /** | ||
| * The target used to calculate the Floater position. If it's not set, it will use the `children` as the target. | ||
| */ | ||
| target?: String | Object, | ||
| target?: String | Object; | ||
| /** | ||
| * It can be anything that can be rendered. | ||
| */ | ||
| title?: React.ReactNode, | ||
| title?: React.ReactNode; | ||
| /** | ||
| * Position the wrapper relative to the target. | ||
| */ | ||
| wrapperOptions?: Object, | ||
| wrapperOptions?: Object; | ||
| } | ||
@@ -137,0 +147,0 @@ |
@@ -11,2 +11,3 @@ 'use strict'; | ||
| var is = _interopDefault(require('is-lite')); | ||
| var treeChanges = _interopDefault(require('tree-changes')); | ||
| var ReactDOM = _interopDefault(require('react-dom')); | ||
@@ -158,3 +159,3 @@ var ExecutionEnvironment = _interopDefault(require('exenv')); | ||
| var canUseDOM=ExecutionEnvironment.canUseDOM;var isReact16=ReactDOM.createPortal!==undefined;function comparator(data,nextData){return {changedFrom:function changedFrom(key,previous,actual){return data[key]===previous&&nextData[key]===actual;},changedTo:function changedTo(key,actual){return data[key]!==actual&&nextData[key]===actual;},changed:function changed(key){return data[key]!==nextData[key];}};}function isMobile(){return 'ontouchstart'in window&&/Mobi/.test(navigator.userAgent);}/** | ||
| var canUseDOM=ExecutionEnvironment.canUseDOM;var isReact16=ReactDOM.createPortal!==undefined;function isMobile(){return 'ontouchstart'in window&&/Mobi/.test(navigator.userAgent);}/** | ||
| * Log method calls if debug is enabled | ||
@@ -168,8 +169,8 @@ * | ||
| * @param {boolean} [arg.debug] - Nothing will be logged unless debug is true | ||
| */function log(_ref){var title=_ref.title,data=_ref.data,_ref$warn=_ref.warn,warn=_ref$warn===void 0?false:_ref$warn,_ref$debug=_ref.debug,debug=_ref$debug===void 0?false:_ref$debug;/* eslint-disable no-console */var logFn=warn?console.warn||console.error:console.log;if(debug&&title&&data){console.groupCollapsed("%creact-floater: ".concat(title),'color: #9b00ff; font-weight: bold; font-size: 12px;');if(Array.isArray(data)){data.forEach(function(d){if(is.plainObject(d)&&d.key){logFn.apply(console,[d.key,d.value]);}else{logFn.apply(console,[d]);}});}else{logFn.apply(console,[data]);}console.groupEnd();}/* eslint-enable */}function on(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.addEventListener(event,cb,capture);}function off(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.removeEventListener(event,cb,capture);}function once(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var _nextCB;_nextCB=function nextCB(e){//eslint-disable-line prefer-const | ||
| cb(e);off(element,event,_nextCB);};on(element,event,_nextCB,capture);}function noop(){} | ||
| */function log(_ref){var title=_ref.title,data=_ref.data,_ref$warn=_ref.warn,warn=_ref$warn===void 0?false:_ref$warn,_ref$debug=_ref.debug,debug=_ref$debug===void 0?false:_ref$debug;/* eslint-disable no-console */var logFn=warn?console.warn||console.error:console.log;if(debug&&title&&data){console.groupCollapsed("%creact-floater: ".concat(title),'color: #9b00ff; font-weight: bold; font-size: 12px;');if(Array.isArray(data)){data.forEach(function(d){if(is.plainObject(d)&&d.key){logFn.apply(console,[d.key,d.value]);}else{logFn.apply(console,[d]);}});}else{logFn.apply(console,[data]);}console.groupEnd();}/* eslint-enable */}function on(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.addEventListener(event,cb,capture);}function off(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.removeEventListener(event,cb,capture);}function once(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var _nextCB;// eslint-disable-next-line prefer-const | ||
| _nextCB=function nextCB(e){cb(e);off(element,event,_nextCB);};on(element,event,_nextCB,capture);}function noop(){} | ||
| var ReactFloaterPortal=/*#__PURE__*/function(_React$Component){_inherits(ReactFloaterPortal,_React$Component);function ReactFloaterPortal(props){var _this;_classCallCheck(this,ReactFloaterPortal);_this=_possibleConstructorReturn(this,_getPrototypeOf(ReactFloaterPortal).call(this,props));if(!canUseDOM)return _possibleConstructorReturn(_this);_this.node=document.createElement('div');if(props.id){_this.node.id=props.id;}if(props.zIndex){_this.node.style.zIndex=props.zIndex;}document.body.appendChild(_this.node);return _this;}_createClass(ReactFloaterPortal,[{key:"componentDidMount",value:function componentDidMount(){if(!canUseDOM)return;if(!isReact16){this.renderPortal();}}},{key:"componentDidUpdate",value:function componentDidUpdate(){if(!canUseDOM)return;if(!isReact16){this.renderPortal();}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(!canUseDOM||!this.node)return;if(!isReact16){ReactDOM.unmountComponentAtNode(this.node);}document.body.removeChild(this.node);}},{key:"renderPortal",value:function renderPortal(){if(!canUseDOM)return null;var _this$props=this.props,children=_this$props.children,setRef=_this$props.setRef;/* istanbul ignore else */if(isReact16){return ReactDOM.createPortal(children,this.node);}var portal=ReactDOM.unstable_renderSubtreeIntoContainer(this,children.length>1?React.createElement("div",null,children):children[0],this.node);setRef(portal);return null;}},{key:"renderReact16",value:function renderReact16(){var _this$props2=this.props,hasChildren=_this$props2.hasChildren,placement=_this$props2.placement,target=_this$props2.target;if(!hasChildren){if(target||placement==='center'){return this.renderPortal();}return null;}return this.renderPortal();}},{key:"render",value:function render(){if(!isReact16){return null;}return this.renderReact16();}}]);return ReactFloaterPortal;}(React.Component);_defineProperty(ReactFloaterPortal,"propTypes",{children:PropTypes.oneOfType([PropTypes.element,PropTypes.array]),hasChildren:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),placement:PropTypes.string,setRef:PropTypes.func.isRequired,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),zIndex:PropTypes.number}); | ||
| var FloaterArrow=/*#__PURE__*/function(_React$Component){_inherits(FloaterArrow,_React$Component);function FloaterArrow(){_classCallCheck(this,FloaterArrow);return _possibleConstructorReturn(this,_getPrototypeOf(FloaterArrow).apply(this,arguments));}_createClass(FloaterArrow,[{key:"render",value:function render(){var _this$props=this.props,placement=_this$props.placement,setArrowRef=_this$props.setArrowRef,styles=_this$props.styles;var _styles$arrow=styles.arrow,color=_styles$arrow.color,display=_styles$arrow.display,length=_styles$arrow.length,position=_styles$arrow.position,spread=_styles$arrow.spread;var arrowStyles={display:display,position:position};var points;var x=spread;var y=length;/* istanbul ignore else */if(placement.startsWith('top')){points="0,0 ".concat(x/2,",").concat(y," ").concat(x,",0");arrowStyles.bottom=0;}else if(placement.startsWith('bottom')){points="".concat(x,",").concat(y," ").concat(x/2,",0 0,").concat(y);arrowStyles.top=0;}else if(placement.startsWith('left')){y=spread;x=length;points="0,0 ".concat(x,",").concat(y/2," 0,").concat(y);arrowStyles.right=0;}else if(placement.startsWith('right')){y=spread;x=length;points="".concat(x,",").concat(y," ").concat(x,",0 0,").concat(y/2);arrowStyles.left=0;}return React.createElement("div",{className:"__floater__arrow",style:this.parentStyle},React.createElement("span",{ref:setArrowRef,style:arrowStyles},React.createElement("svg",{width:x,height:y,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},React.createElement("polygon",{points:points,fill:color}))));}},{key:"parentStyle",get:function get(){var _this$props2=this.props,placement=_this$props2.placement,styles=_this$props2.styles;var length=styles.arrow.length;var arrow={position:'absolute'};/* istanbul ignore else */if(placement.startsWith('top')){arrow.bottom=0;arrow.left=0;arrow.right=0;arrow.height=length;}else if(placement.startsWith('bottom')){arrow.left=0;arrow.right=0;arrow.top=0;arrow.height=length;}else if(placement.startsWith('left')){arrow.right=0;arrow.top=0;arrow.bottom=0;}else if(placement.startsWith('right')){arrow.left=0;arrow.top=0;}return arrow;}}]);return FloaterArrow;}(React.Component);_defineProperty(FloaterArrow,"propTypes",{placement:PropTypes.string.isRequired,setArrowRef:PropTypes.func.isRequired,styles:PropTypes.object.isRequired}); | ||
| var FloaterArrow=/*#__PURE__*/function(_React$Component){_inherits(FloaterArrow,_React$Component);function FloaterArrow(){_classCallCheck(this,FloaterArrow);return _possibleConstructorReturn(this,_getPrototypeOf(FloaterArrow).apply(this,arguments));}_createClass(FloaterArrow,[{key:"render",value:function render(){var _this$props=this.props,placement=_this$props.placement,setArrowRef=_this$props.setArrowRef,styles=_this$props.styles;var _styles$arrow=styles.arrow,color=_styles$arrow.color,display=_styles$arrow.display,length=_styles$arrow.length,margin=_styles$arrow.margin,position=_styles$arrow.position,spread=_styles$arrow.spread;var arrowStyles={display:display,position:position};var points;var x=spread;var y=length;/* istanbul ignore else */if(placement.startsWith('top')){points="0,0 ".concat(x/2,",").concat(y," ").concat(x,",0");arrowStyles.bottom=0;arrowStyles.marginLeft=margin;arrowStyles.marginRight=margin;}else if(placement.startsWith('bottom')){points="".concat(x,",").concat(y," ").concat(x/2,",0 0,").concat(y);arrowStyles.top=0;arrowStyles.marginLeft=margin;arrowStyles.marginRight=margin;}else if(placement.startsWith('left')){y=spread;x=length;points="0,0 ".concat(x,",").concat(y/2," 0,").concat(y);arrowStyles.right=0;arrowStyles.marginTop=margin;arrowStyles.marginBottom=margin;}else if(placement.startsWith('right')){y=spread;x=length;points="".concat(x,",").concat(y," ").concat(x,",0 0,").concat(y/2);arrowStyles.left=0;arrowStyles.marginTop=margin;arrowStyles.marginBottom=margin;}return React.createElement("div",{className:"__floater__arrow",style:this.parentStyle},React.createElement("span",{ref:setArrowRef,style:arrowStyles},React.createElement("svg",{width:x,height:y,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},React.createElement("polygon",{points:points,fill:color}))));}},{key:"parentStyle",get:function get(){var _this$props2=this.props,placement=_this$props2.placement,styles=_this$props2.styles;var length=styles.arrow.length;var arrow={position:'absolute'};/* istanbul ignore else */if(placement.startsWith('top')){arrow.bottom=0;arrow.left=0;arrow.right=0;arrow.height=length;}else if(placement.startsWith('bottom')){arrow.left=0;arrow.right=0;arrow.top=0;arrow.height=length;}else if(placement.startsWith('left')){arrow.right=0;arrow.top=0;arrow.bottom=0;}else if(placement.startsWith('right')){arrow.left=0;arrow.top=0;}return arrow;}}]);return FloaterArrow;}(React.Component);_defineProperty(FloaterArrow,"propTypes",{placement:PropTypes.string.isRequired,setArrowRef:PropTypes.func.isRequired,styles:PropTypes.object.isRequired}); | ||
@@ -180,10 +181,12 @@ var FloaterCloseBtn=function FloaterCloseBtn(_ref){var handleClick=_ref.handleClick,styles=_ref.styles;var color=styles.color,height=styles.height,width=styles.width,style=_objectWithoutProperties(styles,["color","height","width"]);return React.createElement("button",{"aria-label":"close",onClick:handleClick,style:style,type:"button"},React.createElement("svg",{width:"".concat(width,"px"),height:"".concat(height,"px"),viewBox:"0 0 18 18",version:"1.1",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid"},React.createElement("g",null,React.createElement("path",{d:"M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z",fill:color}))));};FloaterCloseBtn.propTypes={handleClick:PropTypes.func.isRequired,styles:PropTypes.object.isRequired}; | ||
| var Floater=/*#__PURE__*/function(_React$Component){_inherits(Floater,_React$Component);function Floater(){_classCallCheck(this,Floater);return _possibleConstructorReturn(this,_getPrototypeOf(Floater).apply(this,arguments));}_createClass(Floater,[{key:"render",value:function render(){var _this$props=this.props,component=_this$props.component,closeFn=_this$props.handleClick,hideArrow=_this$props.hideArrow,setFloaterRef=_this$props.setFloaterRef,status=_this$props.status;var output={};var classes=['__floater'];if(component){if(React.isValidElement(component)){output.content=React.cloneElement(component,{closeFn:closeFn});}else{output.content=component({closeFn:closeFn});}}else{output.content=React.createElement(FloaterContainer,this.props);}if(status===STATUS.OPEN){classes.push('__floater__open');}if(!hideArrow){output.arrow=React.createElement(FloaterArrow,this.props);}return React.createElement("div",{ref:setFloaterRef,className:classes.join(' '),style:this.style},React.createElement("div",{className:"__floater__body"},output.content,output.arrow));}},{key:"style",get:function get(){var _this$props2=this.props,disableAnimation=_this$props2.disableAnimation,component=_this$props2.component,placement=_this$props2.placement,hideArrow=_this$props2.hideArrow,isPositioned=_this$props2.isPositioned,status=_this$props2.status,styles=_this$props2.styles;var length=styles.arrow.length,floater=styles.floater,floaterCentered=styles.floaterCentered,floaterClosing=styles.floaterClosing,floaterOpening=styles.floaterOpening,floaterWithAnimation=styles.floaterWithAnimation,floaterWithComponent=styles.floaterWithComponent;var element={};if(!hideArrow){if(placement.startsWith('top')){element.padding="0 0 ".concat(length,"px");}else if(placement.startsWith('bottom')){element.padding="".concat(length,"px 0 0");}else if(placement.startsWith('left')){element.padding="0 ".concat(length,"px 0 0");}else if(placement.startsWith('right')){element.padding="0 0 0 ".concat(length,"px");}}if([STATUS.OPENING,STATUS.OPEN].indexOf(status)!==-1){element=_objectSpread({},element,floaterOpening);}if(status===STATUS.CLOSING){element=_objectSpread({},element,floaterClosing);}if(status===STATUS.OPEN&&!disableAnimation&&!isPositioned){element=_objectSpread({},element,floaterWithAnimation);}if(placement==='center'){element=_objectSpread({},element,floaterCentered);}if(component){element=_objectSpread({},element,floaterWithComponent);}return _objectSpread({},floater,element);}}]);return Floater;}(React.Component);_defineProperty(Floater,"propTypes",{component:PropTypes.oneOfType([PropTypes.func,PropTypes.element]),content:PropTypes.node,disableAnimation:PropTypes.bool.isRequired,footer:PropTypes.node,handleClick:PropTypes.func.isRequired,hideArrow:PropTypes.bool.isRequired,isPositioned:PropTypes.bool,open:PropTypes.bool,placement:PropTypes.string.isRequired,positionWrapper:PropTypes.bool.isRequired,setArrowRef:PropTypes.func.isRequired,setFloaterRef:PropTypes.func.isRequired,showCloseButton:PropTypes.bool,status:PropTypes.string.isRequired,styles:PropTypes.object.isRequired,title:PropTypes.node}); | ||
| var Floater=/*#__PURE__*/function(_React$Component){_inherits(Floater,_React$Component);function Floater(){_classCallCheck(this,Floater);return _possibleConstructorReturn(this,_getPrototypeOf(Floater).apply(this,arguments));}_createClass(Floater,[{key:"render",value:function render(){var _this$props=this.props,component=_this$props.component,closeFn=_this$props.handleClick,hideArrow=_this$props.hideArrow,setFloaterRef=_this$props.setFloaterRef,status=_this$props.status;var output={};var classes=['__floater'];if(component){if(React.isValidElement(component)){output.content=React.cloneElement(component,{closeFn:closeFn});}else{output.content=component({closeFn:closeFn});}}else{output.content=React.createElement(FloaterContainer,this.props);}if(status===STATUS.OPEN){classes.push('__floater__open');}if(!hideArrow){output.arrow=React.createElement(FloaterArrow,this.props);}return React.createElement("div",{ref:setFloaterRef,className:classes.join(' '),style:this.style},React.createElement("div",{className:"__floater__body"},output.content,output.arrow));}},{key:"style",get:function get(){var _this$props2=this.props,disableAnimation=_this$props2.disableAnimation,component=_this$props2.component,placement=_this$props2.placement,hideArrow=_this$props2.hideArrow,isPositioned=_this$props2.isPositioned,status=_this$props2.status,styles=_this$props2.styles;var length=styles.arrow.length,floater=styles.floater,floaterCentered=styles.floaterCentered,floaterClosing=styles.floaterClosing,floaterOpening=styles.floaterOpening,floaterWithAnimation=styles.floaterWithAnimation,floaterWithComponent=styles.floaterWithComponent;var element={};if(!hideArrow){if(placement.startsWith('top')){element.padding="0 0 ".concat(length,"px");}else if(placement.startsWith('bottom')){element.padding="".concat(length,"px 0 0");}else if(placement.startsWith('left')){element.padding="0 ".concat(length,"px 0 0");}else if(placement.startsWith('right')){element.padding="0 0 0 ".concat(length,"px");}}if([STATUS.OPENING,STATUS.OPEN].includes(status)){element=_objectSpread({},element,floaterOpening);}if(status===STATUS.CLOSING){element=_objectSpread({},element,floaterClosing);}if(status===STATUS.OPEN&&!disableAnimation&&!isPositioned){element=_objectSpread({},element,floaterWithAnimation);}if(placement==='center'){element=_objectSpread({},element,floaterCentered);}if(component){element=_objectSpread({},element,floaterWithComponent);}return _objectSpread({},floater,element);}}]);return Floater;}(React.Component);_defineProperty(Floater,"propTypes",{component:PropTypes.oneOfType([PropTypes.func,PropTypes.element]),content:PropTypes.node,disableAnimation:PropTypes.bool.isRequired,footer:PropTypes.node,handleClick:PropTypes.func.isRequired,hideArrow:PropTypes.bool.isRequired,isPositioned:PropTypes.bool,open:PropTypes.bool,placement:PropTypes.string.isRequired,positionWrapper:PropTypes.bool.isRequired,setArrowRef:PropTypes.func.isRequired,setFloaterRef:PropTypes.func.isRequired,showCloseButton:PropTypes.bool,status:PropTypes.string.isRequired,styles:PropTypes.object.isRequired,title:PropTypes.node}); | ||
| var ReactFloaterWrapper=/*#__PURE__*/function(_React$Component){_inherits(ReactFloaterWrapper,_React$Component);function ReactFloaterWrapper(){_classCallCheck(this,ReactFloaterWrapper);return _possibleConstructorReturn(this,_getPrototypeOf(ReactFloaterWrapper).apply(this,arguments));}_createClass(ReactFloaterWrapper,[{key:"render",value:function render(){var _this$props=this.props,children=_this$props.children,handleClick=_this$props.handleClick,handleMouseEnter=_this$props.handleMouseEnter,handleMouseLeave=_this$props.handleMouseLeave,setChildRef=_this$props.setChildRef,setWrapperRef=_this$props.setWrapperRef,style=_this$props.style,styles=_this$props.styles;var element;/* istanbul ignore else */if(children){if(React.Children.count(children)===1){if(!React.isValidElement(children)){element=React.createElement("span",null,children);}else{var refProp=is.function(children.type)?'innerRef':'ref';element=React.cloneElement(React.Children.only(children),_defineProperty({},refProp,setChildRef));}}else{element=children;}}if(!element){return null;}return React.createElement("span",{ref:setWrapperRef,style:_objectSpread({},styles,style),onClick:handleClick,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave},element);}}]);return ReactFloaterWrapper;}(React.Component);_defineProperty(ReactFloaterWrapper,"propTypes",{children:PropTypes.node,handleClick:PropTypes.func.isRequired,handleMouseEnter:PropTypes.func.isRequired,handleMouseLeave:PropTypes.func.isRequired,setChildRef:PropTypes.func.isRequired,setWrapperRef:PropTypes.func.isRequired,style:PropTypes.object,styles:PropTypes.object.isRequired}); | ||
| var defaultOptions={zIndex:100};function getStyles(styles){var options=deepmerge(defaultOptions,styles.options||{});return {wrapper:{cursor:'help',display:'inline-flex',flexDirection:'column',zIndex:options.zIndex},wrapperPosition:{left:-1000,position:'absolute',top:-1000,visibility:'hidden'},floater:{display:'inline-block',filter:'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',maxWidth:300,opacity:0,position:'relative',transition:'opacity 0.3s',visibility:'hidden',zIndex:options.zIndex},floaterOpening:{opacity:1,visibility:'visible'},floaterWithAnimation:{opacity:1,transition:'opacity 0.3s, transform 0.2s',visibility:'visible'},floaterWithComponent:{maxWidth:'100%'},floaterClosing:{opacity:0,visibility:'visible'},floaterCentered:{left:'50%',position:'fixed',top:'50%',transform:'translate(-50%, -50%)'},container:{backgroundColor:'#fff',color:'#666',minHeight:60,minWidth:200,padding:20,position:'relative'},title:{borderBottom:'1px solid #555',color:'#555',fontSize:18,marginBottom:5,paddingBottom:6,paddingRight:18},content:{fontSize:15},close:{backgroundColor:'transparent',border:0,borderRadius:0,color:'#555',fontSize:0,height:15,outline:'none',padding:10,position:'absolute',right:0,top:0,width:15,WebkitAppearance:'none'},footer:{borderTop:'1px solid #ccc',fontSize:13,marginTop:10,paddingTop:5},arrow:{color:'#fff',display:'inline-flex',length:16,position:'absolute',spread:32},options:options};} | ||
| var defaultOptions={zIndex:100};function getStyles(styles){var options=deepmerge(defaultOptions,styles.options||{});return {wrapper:{cursor:'help',display:'inline-flex',flexDirection:'column',zIndex:options.zIndex},wrapperPosition:{left:-1000,position:'absolute',top:-1000,visibility:'hidden'},floater:{display:'inline-block',filter:'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',maxWidth:300,opacity:0,position:'relative',transition:'opacity 0.3s',visibility:'hidden',zIndex:options.zIndex},floaterOpening:{opacity:1,visibility:'visible'},floaterWithAnimation:{opacity:1,transition:'opacity 0.3s, transform 0.2s',visibility:'visible'},floaterWithComponent:{maxWidth:'100%'},floaterClosing:{opacity:0,visibility:'visible'},floaterCentered:{left:'50%',position:'fixed',top:'50%',transform:'translate(-50%, -50%)'},container:{backgroundColor:'#fff',color:'#666',minHeight:60,minWidth:200,padding:20,position:'relative'},title:{borderBottom:'1px solid #555',color:'#555',fontSize:18,marginBottom:5,paddingBottom:6,paddingRight:18},content:{fontSize:15},close:{backgroundColor:'transparent',border:0,borderRadius:0,color:'#555',fontSize:0,height:15,outline:'none',padding:10,position:'absolute',right:0,top:0,width:15,WebkitAppearance:'none'},footer:{borderTop:'1px solid #ccc',fontSize:13,marginTop:10,paddingTop:5},arrow:{color:'#fff',display:'inline-flex',length:16,margin:8,position:'absolute',spread:32},options:options};} | ||
| var POSITIONING_PROPS=['position','top','right','bottom','left'];var ReactFloater=/*#__PURE__*/function(_React$Component){_inherits(ReactFloater,_React$Component);function ReactFloater(props){var _this;_classCallCheck(this,ReactFloater);_this=_possibleConstructorReturn(this,_getPrototypeOf(ReactFloater).call(this,props));/* istanbul ignore else */_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setArrowRef",function(ref){_this.arrowRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setChildRef",function(ref){_this.childRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setFloaterRef",function(ref){if(!_this.floaterRef){_this.floaterRef=ref;}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setWrapperRef",function(ref){_this.wrapperRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleTransitionEnd",function(){var status=_this.state.status;var callback=_this.props.callback;/* istanbul ignore else */if(_this.wrapperPopper){_this.wrapperPopper.instance.update();}_this.setState({status:status===STATUS.OPENING?STATUS.OPEN:STATUS.IDLE},function(){var newStatus=_this.state.status;callback(newStatus===STATUS.OPEN?'open':'close',_this.props);});});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleClick",function(){var _this$props=_this.props,event=_this$props.event,open=_this$props.open;if(is.boolean(open))return;var _this$state=_this.state,positionWrapper=_this$state.positionWrapper,status=_this$state.status;/* istanbul ignore else */if(_this.event==='click'||_this.event==='hover'&&positionWrapper){log({title:'click',data:[{event:event,status:status===STATUS.OPEN?'closing':'opening'}],debug:_this.debug});_this.toggle();}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMouseEnter",function(){var _this$props2=_this.props,event=_this$props2.event,open=_this$props2.open;if(is.boolean(open)||isMobile())return;var status=_this.state.status;/* istanbul ignore else */if(_this.event==='hover'&&status===STATUS.IDLE){log({title:'mouseEnter',data:[{key:'originalEvent',value:event}],debug:_this.debug});clearTimeout(_this.eventDelayTimeout);_this.toggle();}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMouseLeave",function(){var _this$props3=_this.props,event=_this$props3.event,eventDelay=_this$props3.eventDelay,open=_this$props3.open;if(is.boolean(open)||isMobile())return;var _this$state2=_this.state,status=_this$state2.status,positionWrapper=_this$state2.positionWrapper;/* istanbul ignore else */if(_this.event==='hover'){log({title:'mouseLeave',data:[{key:'originalEvent',value:event}],debug:_this.debug});if(!eventDelay){_this.toggle(STATUS.IDLE);}else if([STATUS.OPENING,STATUS.OPEN].indexOf(status)!==-1&&!positionWrapper&&!_this.eventDelayTimeout){_this.eventDelayTimeout=setTimeout(function(){delete _this.eventDelayTimeout;_this.toggle();},eventDelay*1000);}}});_this.state={currentPlacement:props.placement,positionWrapper:props.wrapperOptions.position&&!!props.target,status:STATUS.INIT,statusWrapper:STATUS.INIT};_this._isMounted=false;return _this;}_createClass(ReactFloater,[{key:"componentDidMount",value:function componentDidMount(){if(!canUseDOM)return;var positionWrapper=this.state.positionWrapper;var _this$props5=this.props,children=_this$props5.children,open=_this$props5.open,target=_this$props5.target;this._isMounted=true;log({title:'init',data:{hasChildren:!!children,hasTarget:!!target,isControlled:is.boolean(open),positionWrapper:positionWrapper,target:this.target,floater:this.floaterRef},debug:this.debug});this.initPopper();if(!children&&target&&!is.boolean(open));}},{key:"componentWillReceiveProps",value:function componentWillReceiveProps(nextProps){if(!canUseDOM)return;var _this$props6=this.props,open=_this$props6.open,target=_this$props6.target,wrapperOptions=_this$props6.wrapperOptions;if(open!==nextProps.open){this.toggle();}if(wrapperOptions.position!==nextProps.wrapperOptions.position||target!==nextProps.target){this.changeWrapperPosition(nextProps);}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(!canUseDOM)return;var _this$props7=this.props,autoOpen=_this$props7.autoOpen,open=_this$props7.open;var _comparator=comparator(prevState,this.state),changedFrom=_comparator.changedFrom,changedTo=_comparator.changedTo;if(changedTo('status',STATUS.IDLE)&&open){this.toggle(STATUS.OPEN);}else if(changedFrom('status',STATUS.INIT,STATUS.IDLE)&&autoOpen){this.toggle(STATUS.OPEN);}if(this.floaterRef&&(changedTo('status',STATUS.OPENING)||changedTo('status',STATUS.CLOSING))){once(this.floaterRef,'transitionend',this.handleTransitionEnd);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(!canUseDOM)return;this._isMounted=false;if(this.popper){this.popper.instance.destroy();}if(this.wrapperPopper){this.wrapperPopper.instance.destroy();}}},{key:"initPopper",value:function initPopper(){var _this2=this;var target=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.target;var positionWrapper=this.state.positionWrapper;var _this$props8=this.props,disableFlip=_this$props8.disableFlip,getPopper=_this$props8.getPopper,hideArrow=_this$props8.hideArrow,offset=_this$props8.offset,placement=_this$props8.placement,wrapperOptions=_this$props8.wrapperOptions;var flipBehavior=placement==='top'||placement==='bottom'?'flip':['right','bottom-end','top-end','left','top-start','bottom-start'];/* istanbul ignore else */if(placement==='center'){this.setState({status:STATUS.IDLE});}else if(target&&this.floaterRef){new Popper(target,this.floaterRef,{placement:placement,modifiers:{arrow:_objectSpread({enabled:!hideArrow,element:this.arrowRef},this.options.arrow),computeStyle:this.options.computeStyle,flip:_objectSpread({enabled:!disableFlip,behavior:flipBehavior},this.options.flip),keepTogether:this.options.keepTogether,hide:this.options.hide,inner:this.options.inner,offset:_objectSpread({offset:"0, ".concat(offset,"px")},this.options.offset),preventOverflow:this.options.preventOverflow,shift:this.options.shift},onCreate:function onCreate(data){_this2.popper=data;getPopper(data,'floater');if(_this2._isMounted){_this2.setState({currentPlacement:data.placement,status:STATUS.IDLE});}if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}},onUpdate:function onUpdate(data){_this2.popper=data;var currentPlacement=_this2.state.currentPlacement;if(_this2._isMounted&&data.placement!==currentPlacement){_this2.setState({currentPlacement:data.placement});}}});}if(positionWrapper){var wrapperOffset=!is.undefined(wrapperOptions.offset)?wrapperOptions.offset:0;new Popper(this.target,this.wrapperRef,{placement:wrapperOptions.placement||placement,modifiers:{arrow:{enabled:false},offset:{offset:"0, ".concat(wrapperOffset,"px")},flip:{enabled:false}},onCreate:function onCreate(data){_this2.wrapperPopper=data;if(_this2._isMounted){_this2.setState({statusWrapper:STATUS.IDLE});}getPopper(data,'wrapper');if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}}});}}},{key:"changeWrapperPosition",value:function changeWrapperPosition(_ref){var target=_ref.target,wrapperOptions=_ref.wrapperOptions;this.setState({positionWrapper:wrapperOptions.position&&!!target});}},{key:"toggle",value:function toggle(forceStatus){var status=this.state.status;var nextStatus=status===STATUS.OPEN?STATUS.CLOSING:STATUS.OPENING;if(!is.undefined(forceStatus)){nextStatus=forceStatus;}this.setState({status:nextStatus});}},{key:"render",value:function render(){var _this$state3=this.state,currentPlacement=_this$state3.currentPlacement,positionWrapper=_this$state3.positionWrapper,status=_this$state3.status;var _this$props9=this.props,children=_this$props9.children,component=_this$props9.component,content=_this$props9.content,disableAnimation=_this$props9.disableAnimation,footer=_this$props9.footer,hideArrow=_this$props9.hideArrow,id=_this$props9.id,isPositioned=_this$props9.isPositioned,open=_this$props9.open,showCloseButton=_this$props9.showCloseButton,style=_this$props9.style,target=_this$props9.target,title=_this$props9.title;var wrapper=React.createElement(ReactFloaterWrapper,{handleClick:this.handleClick,handleMouseEnter:this.handleMouseEnter,handleMouseLeave:this.handleMouseLeave,setChildRef:this.setChildRef,setWrapperRef:this.setWrapperRef,style:style,styles:this.styles.wrapper},children);var output={};if(positionWrapper){output.wrapperInPortal=wrapper;}else{output.wrapperAsChildren=wrapper;}return React.createElement("span",null,React.createElement(ReactFloaterPortal,{hasChildren:!!children,id:id,placement:currentPlacement,setRef:this.setFloaterRef,status:status,zIndex:this.styles.options.zIndex,target:target},React.createElement(Floater,{component:component,content:content,disableAnimation:disableAnimation,footer:footer,handleClick:this.handleClick,hideArrow:hideArrow||currentPlacement==='center',isPositioned:isPositioned,open:open,placement:currentPlacement,positionWrapper:positionWrapper,setArrowRef:this.setArrowRef,setFloaterRef:this.setFloaterRef,showCloseButton:showCloseButton,status:status,styles:this.styles,title:title}),output.wrapperInPortal),output.wrapperAsChildren);}},{key:"debug",get:function get(){var debug=this.props.debug;return debug||!!global.ReactFloaterDebug;}},{key:"event",get:function get(){var _this$props10=this.props,disableHoverToClick=_this$props10.disableHoverToClick,event=_this$props10.event;if(event==='hover'&&isMobile()&&!disableHoverToClick){return 'click';}return event;}},{key:"options",get:function get(){var options=this.props.options;return deepmerge(DEFAULTS,options||{});}},{key:"styles",get:function get(){var _this3=this;var _this$state4=this.state,status=_this$state4.status,positionWrapper=_this$state4.positionWrapper,statusWrapper=_this$state4.statusWrapper;var styles=this.props.styles;var nextStyles=deepmerge(getStyles(styles),styles);if(positionWrapper){var wrapperStyles;if(!([STATUS.IDLE].indexOf(status)!==-1)||!([STATUS.IDLE].indexOf(statusWrapper)!==-1)){wrapperStyles=nextStyles.wrapperPosition;}else{wrapperStyles=this.wrapperPopper.styles;}nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,wrapperStyles);}/* istanbul ignore else */if(this.target){var targetStyles=window.getComputedStyle(this.target);/* istanbul ignore else */if(this.wrapperStyles){nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,this.wrapperStyles);}else if(!(['relative','static'].indexOf(targetStyles.position)!==-1)){this.wrapperStyles={};if(!positionWrapper){POSITIONING_PROPS.forEach(function(d){_this3.wrapperStyles[d]=targetStyles[d];});nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,this.wrapperStyles);this.target.style.position='relative';this.target.style.top='auto';this.target.style.right='auto';this.target.style.bottom='auto';this.target.style.left='auto';}}}return nextStyles;}},{key:"target",get:function get(){var target=this.props.target;if(target){if(is.domElement(target)){return target;}return document.querySelector(target);}return this.childRef||this.wrapperRef;}}]);return ReactFloater;}(React.Component);_defineProperty(ReactFloater,"propTypes",{autoOpen:PropTypes.bool,callback:PropTypes.func,children:PropTypes.node,component:isRequiredIf(PropTypes.oneOfType([PropTypes.func,PropTypes.element]),function(props){return !props.content;}),content:isRequiredIf(PropTypes.node,function(props){return !props.component;}),debug:PropTypes.bool,disableAnimation:PropTypes.bool,disableFlip:PropTypes.bool,disableHoverToClick:PropTypes.bool,event:PropTypes.oneOf(['hover','click']),eventDelay:PropTypes.number,footer:PropTypes.node,getPopper:PropTypes.func,hideArrow:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),isPositioned:PropTypes.bool,offset:PropTypes.number,open:PropTypes.bool,options:PropTypes.object,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto','center']),showCloseButton:PropTypes.bool,style:PropTypes.object,styles:PropTypes.object,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),title:PropTypes.node,wrapperOptions:PropTypes.shape({offset:PropTypes.number,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto']),position:PropTypes.bool})});_defineProperty(ReactFloater,"defaultProps",{autoOpen:false,callback:noop,debug:false,disableAnimation:false,disableFlip:false,disableHoverToClick:false,event:'click',eventDelay:0.4,getPopper:noop,hideArrow:false,offset:15,placement:'bottom',showCloseButton:false,styles:{},target:null,wrapperOptions:{position:false}}); | ||
| var POSITIONING_PROPS=['position','top','right','bottom','left'];var ReactFloater=/*#__PURE__*/function(_React$Component){_inherits(ReactFloater,_React$Component);function ReactFloater(props){var _this;_classCallCheck(this,ReactFloater);_this=_possibleConstructorReturn(this,_getPrototypeOf(ReactFloater).call(this,props));/* istanbul ignore else */_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setArrowRef",function(ref){_this.arrowRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setChildRef",function(ref){_this.childRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setFloaterRef",function(ref){if(!_this.floaterRef){_this.floaterRef=ref;}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setWrapperRef",function(ref){_this.wrapperRef=ref;});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleTransitionEnd",function(){var status=_this.state.status;var callback=_this.props.callback;/* istanbul ignore else */if(_this.wrapperPopper){_this.wrapperPopper.instance.update();}_this.setState({status:status===STATUS.OPENING?STATUS.OPEN:STATUS.IDLE},function(){var newStatus=_this.state.status;callback(newStatus===STATUS.OPEN?'open':'close',_this.props);});});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleClick",function(){var _this$props=_this.props,event=_this$props.event,open=_this$props.open;if(is.boolean(open))return;var _this$state=_this.state,positionWrapper=_this$state.positionWrapper,status=_this$state.status;/* istanbul ignore else */if(_this.event==='click'||_this.event==='hover'&&positionWrapper){log({title:'click',data:[{event:event,status:status===STATUS.OPEN?'closing':'opening'}],debug:_this.debug});_this.toggle();}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMouseEnter",function(){var _this$props2=_this.props,event=_this$props2.event,open=_this$props2.open;if(is.boolean(open)||isMobile())return;var status=_this.state.status;/* istanbul ignore else */if(_this.event==='hover'&&status===STATUS.IDLE){log({title:'mouseEnter',data:[{key:'originalEvent',value:event}],debug:_this.debug});clearTimeout(_this.eventDelayTimeout);_this.toggle();}});_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMouseLeave",function(){var _this$props3=_this.props,event=_this$props3.event,eventDelay=_this$props3.eventDelay,open=_this$props3.open;if(is.boolean(open)||isMobile())return;var _this$state2=_this.state,status=_this$state2.status,positionWrapper=_this$state2.positionWrapper;/* istanbul ignore else */if(_this.event==='hover'){log({title:'mouseLeave',data:[{key:'originalEvent',value:event}],debug:_this.debug});if(!eventDelay){_this.toggle(STATUS.IDLE);}else if([STATUS.OPENING,STATUS.OPEN].includes(status)&&!positionWrapper&&!_this.eventDelayTimeout){_this.eventDelayTimeout=setTimeout(function(){delete _this.eventDelayTimeout;_this.toggle();},eventDelay*1000);}}});if(process.env.NODE_ENV!=='production'){var _this$props4=_this.props,children=_this$props4.children,open=_this$props4.open,target=_this$props4.target,wrapperOptions=_this$props4.wrapperOptions;if(wrapperOptions.position&&!target){console.warn('Missing props! You need to set a `target` to use `wrapperOptions.position`');//eslint-disable-line no-console | ||
| }if(!children&&!is.boolean(open)){console.warn('Missing props! You need to set `children`.');//eslint-disable-line no-console | ||
| }}_this.state={currentPlacement:props.placement,positionWrapper:props.wrapperOptions.position&&!!props.target,status:STATUS.INIT,statusWrapper:STATUS.INIT};_this._isMounted=false;return _this;}_createClass(ReactFloater,[{key:"componentDidMount",value:function componentDidMount(){if(!canUseDOM)return;var positionWrapper=this.state.positionWrapper;var _this$props5=this.props,children=_this$props5.children,open=_this$props5.open,target=_this$props5.target;this._isMounted=true;log({title:'init',data:{hasChildren:!!children,hasTarget:!!target,isControlled:is.boolean(open),positionWrapper:positionWrapper,target:this.target,floater:this.floaterRef},debug:this.debug});this.initPopper();if(!children&&target&&!is.boolean(open));}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(!canUseDOM)return;var _this$props6=this.props,autoOpen=_this$props6.autoOpen,open=_this$props6.open,target=_this$props6.target,wrapperOptions=_this$props6.wrapperOptions;var _treeChanges=treeChanges(prevState,this.state),changedFrom=_treeChanges.changedFrom,changedTo=_treeChanges.changedTo;if(prevProps.open!==open){this.toggle();}if(prevProps.wrapperOptions.position!==wrapperOptions.position||prevProps.target!==target){this.changeWrapperPosition(this.props);}if(changedTo('status',STATUS.IDLE)&&open){this.toggle(STATUS.OPEN);}else if(changedFrom('status',STATUS.INIT,STATUS.IDLE)&&autoOpen){this.toggle(STATUS.OPEN);}if(this.floaterRef&&(changedTo('status',STATUS.OPENING)||changedTo('status',STATUS.CLOSING))){once(this.floaterRef,'transitionend',this.handleTransitionEnd);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(!canUseDOM)return;this._isMounted=false;if(this.popper){this.popper.instance.destroy();}if(this.wrapperPopper){this.wrapperPopper.instance.destroy();}}},{key:"initPopper",value:function initPopper(){var _this2=this;var target=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.target;var positionWrapper=this.state.positionWrapper;var _this$props7=this.props,disableFlip=_this$props7.disableFlip,getPopper=_this$props7.getPopper,hideArrow=_this$props7.hideArrow,offset=_this$props7.offset,placement=_this$props7.placement,wrapperOptions=_this$props7.wrapperOptions;var flipBehavior=placement==='top'||placement==='bottom'?'flip':['right','bottom-end','top-end','left','top-start','bottom-start'];/* istanbul ignore else */if(placement==='center'){this.setState({status:STATUS.IDLE});}else if(target&&this.floaterRef){new Popper(target,this.floaterRef,{placement:placement,modifiers:{arrow:_objectSpread({enabled:!hideArrow,element:this.arrowRef},this.options.arrow),computeStyle:this.options.computeStyle,flip:_objectSpread({enabled:!disableFlip,behavior:flipBehavior},this.options.flip),keepTogether:this.options.keepTogether,hide:this.options.hide,inner:this.options.inner,offset:_objectSpread({offset:"0, ".concat(offset,"px")},this.options.offset),preventOverflow:this.options.preventOverflow,shift:this.options.shift},onCreate:function onCreate(data){_this2.popper=data;getPopper(data,'floater');if(_this2._isMounted){_this2.setState({currentPlacement:data.placement,status:STATUS.IDLE});}if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}},onUpdate:function onUpdate(data){_this2.popper=data;var currentPlacement=_this2.state.currentPlacement;if(_this2._isMounted&&data.placement!==currentPlacement){_this2.setState({currentPlacement:data.placement});}}});}if(positionWrapper){var wrapperOffset=!is.undefined(wrapperOptions.offset)?wrapperOptions.offset:0;new Popper(this.target,this.wrapperRef,{placement:wrapperOptions.placement||placement,modifiers:{arrow:{enabled:false},offset:{offset:"0, ".concat(wrapperOffset,"px")},flip:{enabled:false}},onCreate:function onCreate(data){_this2.wrapperPopper=data;if(_this2._isMounted){_this2.setState({statusWrapper:STATUS.IDLE});}getPopper(data,'wrapper');if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}}});}}},{key:"changeWrapperPosition",value:function changeWrapperPosition(_ref){var target=_ref.target,wrapperOptions=_ref.wrapperOptions;this.setState({positionWrapper:wrapperOptions.position&&!!target});}},{key:"toggle",value:function toggle(forceStatus){var status=this.state.status;var nextStatus=status===STATUS.OPEN?STATUS.CLOSING:STATUS.OPENING;if(!is.undefined(forceStatus)){nextStatus=forceStatus;}this.setState({status:nextStatus});}},{key:"render",value:function render(){var _this$state3=this.state,currentPlacement=_this$state3.currentPlacement,positionWrapper=_this$state3.positionWrapper,status=_this$state3.status;var _this$props8=this.props,children=_this$props8.children,component=_this$props8.component,content=_this$props8.content,disableAnimation=_this$props8.disableAnimation,footer=_this$props8.footer,hideArrow=_this$props8.hideArrow,id=_this$props8.id,isPositioned=_this$props8.isPositioned,open=_this$props8.open,showCloseButton=_this$props8.showCloseButton,style=_this$props8.style,target=_this$props8.target,title=_this$props8.title;var wrapper=React.createElement(ReactFloaterWrapper,{handleClick:this.handleClick,handleMouseEnter:this.handleMouseEnter,handleMouseLeave:this.handleMouseLeave,setChildRef:this.setChildRef,setWrapperRef:this.setWrapperRef,style:style,styles:this.styles.wrapper},children);var output={};if(positionWrapper){output.wrapperInPortal=wrapper;}else{output.wrapperAsChildren=wrapper;}return React.createElement("span",null,React.createElement(ReactFloaterPortal,{hasChildren:!!children,id:id,placement:currentPlacement,setRef:this.setFloaterRef,target:target,zIndex:this.styles.options.zIndex},React.createElement(Floater,{component:component,content:content,disableAnimation:disableAnimation,footer:footer,handleClick:this.handleClick,hideArrow:hideArrow||currentPlacement==='center',isPositioned:isPositioned,open:open,placement:currentPlacement,positionWrapper:positionWrapper,setArrowRef:this.setArrowRef,setFloaterRef:this.setFloaterRef,showCloseButton:showCloseButton,status:status,styles:this.styles,title:title}),output.wrapperInPortal),output.wrapperAsChildren);}},{key:"debug",get:function get(){var debug=this.props.debug;return debug||!!global.ReactFloaterDebug;}},{key:"event",get:function get(){var _this$props9=this.props,disableHoverToClick=_this$props9.disableHoverToClick,event=_this$props9.event;if(event==='hover'&&isMobile()&&!disableHoverToClick){return 'click';}return event;}},{key:"options",get:function get(){var options=this.props.options;return deepmerge(DEFAULTS,options||{});}},{key:"styles",get:function get(){var _this3=this;var _this$state4=this.state,status=_this$state4.status,positionWrapper=_this$state4.positionWrapper,statusWrapper=_this$state4.statusWrapper;var styles=this.props.styles;var nextStyles=deepmerge(getStyles(styles),styles);if(positionWrapper){var wrapperStyles;if(![STATUS.IDLE].includes(status)||![STATUS.IDLE].includes(statusWrapper)){wrapperStyles=nextStyles.wrapperPosition;}else{wrapperStyles=this.wrapperPopper.styles;}nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,wrapperStyles);}/* istanbul ignore else */if(this.target){var targetStyles=window.getComputedStyle(this.target);/* istanbul ignore else */if(this.wrapperStyles){nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,this.wrapperStyles);}else if(!['relative','static'].includes(targetStyles.position)){this.wrapperStyles={};if(!positionWrapper){POSITIONING_PROPS.forEach(function(d){_this3.wrapperStyles[d]=targetStyles[d];});nextStyles.wrapper=_objectSpread({},nextStyles.wrapper,this.wrapperStyles);this.target.style.position='relative';this.target.style.top='auto';this.target.style.right='auto';this.target.style.bottom='auto';this.target.style.left='auto';}}}return nextStyles;}},{key:"target",get:function get(){var target=this.props.target;if(target){if(is.domElement(target)){return target;}return document.querySelector(target);}return this.childRef||this.wrapperRef;}}]);return ReactFloater;}(React.Component);_defineProperty(ReactFloater,"propTypes",{autoOpen:PropTypes.bool,callback:PropTypes.func,children:PropTypes.node,component:isRequiredIf(PropTypes.oneOfType([PropTypes.func,PropTypes.element]),function(props){return !props.content;}),content:isRequiredIf(PropTypes.node,function(props){return !props.component;}),debug:PropTypes.bool,disableAnimation:PropTypes.bool,disableFlip:PropTypes.bool,disableHoverToClick:PropTypes.bool,event:PropTypes.oneOf(['hover','click']),eventDelay:PropTypes.number,footer:PropTypes.node,getPopper:PropTypes.func,hideArrow:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),isPositioned:PropTypes.bool,offset:PropTypes.number,open:PropTypes.bool,options:PropTypes.object,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto','center']),showCloseButton:PropTypes.bool,style:PropTypes.object,styles:PropTypes.object,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),title:PropTypes.node,wrapperOptions:PropTypes.shape({offset:PropTypes.number,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto']),position:PropTypes.bool})});_defineProperty(ReactFloater,"defaultProps",{autoOpen:false,callback:noop,debug:false,disableAnimation:false,disableFlip:false,disableHoverToClick:false,event:'click',eventDelay:0.4,getPopper:noop,hideArrow:false,offset:15,placement:'bottom',showCloseButton:false,styles:{},target:null,wrapperOptions:{position:false}}); | ||
| module.exports = ReactFloater; |
104
package.json
| { | ||
| "name": "react-floater", | ||
| "version": "0.6.2", | ||
| "version": "0.6.3", | ||
| "description": "Floaters everywhere!", | ||
@@ -19,3 +19,2 @@ "author": "Gil Barbara <gilbarbara@gmail.com>", | ||
| "lib", | ||
| "src", | ||
| "index.d.ts" | ||
@@ -41,7 +40,8 @@ ], | ||
| "dependencies": { | ||
| "deepmerge": "^3.0.0", | ||
| "deepmerge": "^3.1.0", | ||
| "exenv": "^1.2.2", | ||
| "is-lite": "^0.2.2", | ||
| "popper.js": "^1.14.6", | ||
| "react-proptype-conditional-require": "^1.0.4" | ||
| "react-proptype-conditional-require": "^1.0.4", | ||
| "tree-changes": "^0.4.0" | ||
| }, | ||
@@ -52,4 +52,4 @@ "devDependencies": { | ||
| "@babel/plugin-external-helpers": "7.2.0", | ||
| "@babel/plugin-proposal-class-properties": "7.2.3", | ||
| "@babel/plugin-proposal-decorators": "7.2.3", | ||
| "@babel/plugin-proposal-class-properties": "7.3.0", | ||
| "@babel/plugin-proposal-decorators": "7.3.0", | ||
| "@babel/plugin-proposal-do-expressions": "7.2.0", | ||
@@ -65,3 +65,3 @@ "@babel/plugin-proposal-export-default-from": "7.2.0", | ||
| "@babel/plugin-proposal-optional-chaining": "7.2.0", | ||
| "@babel/plugin-proposal-pipeline-operator": "7.2.0", | ||
| "@babel/plugin-proposal-pipeline-operator": "7.3.0", | ||
| "@babel/plugin-proposal-throw-expressions": "7.2.0", | ||
@@ -71,29 +71,37 @@ "@babel/plugin-syntax-dynamic-import": "7.2.0", | ||
| "@babel/plugin-transform-flow-strip-types": "7.2.3", | ||
| "@babel/preset-env": "7.2.3", | ||
| "@babel/preset-env": "7.3.1", | ||
| "@babel/preset-flow": "7.0.0", | ||
| "@babel/preset-react": "7.0.0", | ||
| "autoprefixer": "^9.4.3", | ||
| "autoprefixer": "^9.4.6", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
| "babel-eslint": "^10.0.1", | ||
| "babel-jest": "^23.6.0", | ||
| "babel-jest": "^24.0.0", | ||
| "babel-plugin-array-includes": "^2.0.3", | ||
| "babel-plugin-transform-node-env-inline": "^0.4.3", | ||
| "babel-plugin-transform-react-remove-prop-types": "^0.4.21", | ||
| "bundlesize": "^0.17.0", | ||
| "chalk": "^2.4.1", | ||
| "babel-plugin-transform-react-remove-prop-types": "^0.4.23", | ||
| "bundlesize": "^0.17.1", | ||
| "chalk": "^2.4.2", | ||
| "cross-env": "^5.2.0", | ||
| "enzyme": "^3.8.0", | ||
| "enzyme-adapter-react-16": "^1.7.1", | ||
| "enzyme-adapter-react-16": "^1.8.0", | ||
| "enzyme-to-json": "^3.3.5", | ||
| "eslint": "^5.11.0", | ||
| "eslint": "^5.12.1", | ||
| "eslint-config-airbnb": "^17.1.0", | ||
| "eslint-config-prettier": "^3.6.0", | ||
| "eslint-plugin-babel": "^5.3.0", | ||
| "eslint-plugin-flowtype": "^3.2.0", | ||
| "eslint-plugin-import": "^2.14.0", | ||
| "eslint-plugin-jsx-a11y": "^6.1.2", | ||
| "eslint-plugin-react": "^7.11.1", | ||
| "flow-bin": "^0.89.0", | ||
| "husky": "^1.2.1", | ||
| "jest": "^23.6.0", | ||
| "eslint-plugin-flowtype": "^3.2.1", | ||
| "eslint-plugin-import": "^2.15.0", | ||
| "eslint-plugin-jsx-a11y": "^6.2.0", | ||
| "eslint-plugin-prettier": "^3.0.1", | ||
| "eslint-plugin-react": "^7.12.4", | ||
| "flow-bin": "^0.91.0", | ||
| "husky": "^1.3.1", | ||
| "is-ci-cli": "^1.1.1", | ||
| "jest": "^24.0.0", | ||
| "jest-chain": "^1.1.2", | ||
| "jest-enzyme": "^7.0.1", | ||
| "jest-extended": "^0.11.0", | ||
| "jest-watch-typeahead": "^0.2.1", | ||
| "lint-staged": "^8.1.0", | ||
| "prettier": "^1.16.1", | ||
| "prop-types": "^15.6.2", | ||
@@ -103,22 +111,23 @@ "react": "^16.7.0", | ||
| "react-test-renderer": "^16.7.0", | ||
| "rimraf": "^2.6.2", | ||
| "rollup": "^0.68.1", | ||
| "rollup-plugin-babel": "^4.1.0", | ||
| "rimraf": "^2.6.3", | ||
| "rollup": "^1.1.2", | ||
| "rollup-plugin-babel": "^4.3.2", | ||
| "rollup-plugin-commonjs": "^9.2.0", | ||
| "rollup-plugin-node-resolve": "^4.0.0", | ||
| "styled-components": "^4.1.3", | ||
| "watch-run": "^1.2.5" | ||
| "watch-run": "^1.2.5", | ||
| "yargs": "^12.0.5" | ||
| }, | ||
| "scripts": { | ||
| "build": "npm run clean && npm run build:commonjs && npm run build:es", | ||
| "build:commonjs": "cross-env NODE_ENV=production rollup -c -f cjs -o lib/index.js", | ||
| "build:es": "cross-env NODE_ENV=production rollup -c", | ||
| "watch": "cross-env NODE_ENV=production rollup -cw", | ||
| "build": "cross-env NODE_ENV=production npm run clean && rollup -c", | ||
| "watch": "rollup -cw", | ||
| "clean": "rimraf es && rimraf lib", | ||
| "lint": "eslint --ext .js --ext .jsx src test", | ||
| "test": "jest --coverage", | ||
| "test:watch": "jest --watch", | ||
| "test": "is-ci \"test:coverage\" \"test:watch\"", | ||
| "test:coverage": "jest --bail --coverage", | ||
| "test:watch": "jest --watch --verbose", | ||
| "validate": "npm run lint && npm run test:coverage && flow && npm run build && npm run bundlesize", | ||
| "format": "prettier \"**/*.{js,jsx,ts}\" --write", | ||
| "bundlesize": "bundlesize", | ||
| "precommit": "npm run lint && npm test && bundlesize", | ||
| "prepublishOnly": "npm run build" | ||
| "prepublishOnly": "npm run validate" | ||
| }, | ||
@@ -137,5 +146,30 @@ "bundlesize": [ | ||
| "hooks": { | ||
| "pre-commit": "npm run precommit" | ||
| "post-merge": "node tools update", | ||
| "pre-commit": "node tools upstream && lint-staged && flow" | ||
| } | ||
| }, | ||
| "prettier": { | ||
| "jsxBracketSameLine": false, | ||
| "printWidth": 100, | ||
| "singleQuote": true, | ||
| "trailingComma": "all" | ||
| }, | ||
| "lint-staged": { | ||
| "linters": { | ||
| "**/*.+(js|jsx)": [ | ||
| "eslint --fix", | ||
| "git add", | ||
| "jest --findRelatedTests" | ||
| ], | ||
| "**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)": [ | ||
| "prettier --write", | ||
| "git add" | ||
| ] | ||
| }, | ||
| "ignore": [ | ||
| "**/coverage/*", | ||
| "**/es/*", | ||
| "**/lib/*" | ||
| ] | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-27.32%
82566
- Dependency count
- increased by12.5%
9
- Dev dependency count
- increased by15.52%
67
- Number of package files
- decreased by-66.67%
6
- Lines of code
- decreased by-64.06%
639
- Number of low supply chain risk alerts
- increased by100%
2
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedtree-changes@^0.4.0
+ Addeddeep-diff@1.0.2(transitive)
+ Addednested-property@0.0.7(transitive)
+ Addedtree-changes@0.4.0(transitive)
Updateddeepmerge@^3.1.0