{"ast":null,"code":"import _objectSpread from\"C:/Users/user/Desktop/02portreact/node_modules/@babel/runtime/helpers/esm/objectSpread2.js\";import _classCallCheck from\"C:/Users/user/Desktop/02portreact/node_modules/@babel/runtime/helpers/esm/classCallCheck.js\";import _createClass from\"C:/Users/user/Desktop/02portreact/node_modules/@babel/runtime/helpers/esm/createClass.js\";import _inherits from\"C:/Users/user/Desktop/02portreact/node_modules/@babel/runtime/helpers/esm/inherits.js\";import _createSuper from\"C:/Users/user/Desktop/02portreact/node_modules/@babel/runtime/helpers/esm/createSuper.js\";import React,{Component}from'react';import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var CardCrea=/*#__PURE__*/function(_Component){_inherits(CardCrea,_Component);var _super=_createSuper(CardCrea);function CardCrea(props){var _this;_classCallCheck(this,CardCrea);_this=_super.call(this,props);_this.handleMouseMove=function(e){var _this$cardRef$current=_this.cardRef.current,offsetLeft=_this$cardRef$current.offsetLeft,offsetTop=_this$cardRef$current.offsetTop;var _this$state=_this.state,width=_this$state.width,height=_this$state.height;_this.setState({mouseX:e.pageX-offsetLeft-width/2,mouseY:e.pageY-offsetTop-height/2});};_this.handleMouseEnter=function(){clearTimeout(_this.state.mouseLeaveDelay);};_this.handleMouseLeave=function(){var mouseLeaveDelay=setTimeout(function(){_this.setState({mouseX:0,mouseY:0});},1000);_this.setState({mouseLeaveDelay:mouseLeaveDelay});};_this.state={width:0,height:0,mouseX:0,mouseY:0,mouseLeaveDelay:null};_this.cardRef=/*#__PURE__*/React.createRef();return _this;}_createClass(CardCrea,[{key:\"componentDidMount\",value:function componentDidMount(){this.setState({width:this.cardRef.current.offsetWidth,height:this.cardRef.current.offsetHeight});}},{key:\"render\",value:function render(){var dataImage=this.props.dataImage;var _this$state2=this.state,mouseX=_this$state2.mouseX,mouseY=_this$state2.mouseY,width=_this$state2.width,height=_this$state2.height;var cardStyle={transform:\"rotateY(\".concat(mouseX/width*55,\"deg) rotateX(\").concat(mouseY/height*3,\"deg)\")};var cardBgTransform={transform:\"translateX(\".concat(mouseX/width*-40,\"px) translateY(\").concat(mouseY/height*100,\"px)\")};var cardBgImage={backgroundImage:\"url(\".concat(dataImage,\")\")};return/*#__PURE__*/_jsx(\"div\",{className:\"card-wrap\",onMouseMove:this.handleMouseMove,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,ref:this.cardRef,children:/*#__PURE__*/_jsxs(\"div\",{className:\"card\",style:cardStyle,children:[/*#__PURE__*/_jsx(\"div\",{className:\"card-bg\",style:_objectSpread(_objectSpread({},cardBgTransform),cardBgImage)}),/*#__PURE__*/_jsx(\"div\",{className:\"card-info\",children:this.props.children})]})});}}]);return CardCrea;}(Component);export default CardCrea;","map":{"version":3,"names":["React","Component","jsx","_jsx","jsxs","_jsxs","CardCrea","_Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","handleMouseMove","e","_this$cardRef$current","cardRef","current","offsetLeft","offsetTop","_this$state","state","width","height","setState","mouseX","pageX","mouseY","pageY","handleMouseEnter","clearTimeout","mouseLeaveDelay","handleMouseLeave","setTimeout","createRef","_createClass","key","value","componentDidMount","offsetWidth","offsetHeight","render","dataImage","_this$state2","cardStyle","transform","concat","cardBgTransform","cardBgImage","backgroundImage","className","onMouseMove","onMouseEnter","onMouseLeave","ref","children","style","_objectSpread"],"sources":["C:/Users/user/Desktop/02portreact/src/components/pages/design/cardCrea.js"],"sourcesContent":["\r\nimport React, { Component } from 'react';\r\n\r\nclass CardCrea extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n width: 0,\r\n height: 0,\r\n mouseX: 0,\r\n mouseY: 0,\r\n mouseLeaveDelay: null,\r\n };\r\n\r\n this.cardRef = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n width: this.cardRef.current.offsetWidth,\r\n height: this.cardRef.current.offsetHeight,\r\n });\r\n }\r\n\r\n handleMouseMove = (e) => {\r\n const { offsetLeft, offsetTop } = this.cardRef.current;\r\n const { width, height } = this.state;\r\n\r\n this.setState({\r\n mouseX: e.pageX - offsetLeft - width / 2,\r\n mouseY: e.pageY - offsetTop - height / 2,\r\n });\r\n };\r\n\r\n handleMouseEnter = () => {\r\n clearTimeout(this.state.mouseLeaveDelay);\r\n };\r\n\r\n handleMouseLeave = () => {\r\n const mouseLeaveDelay = setTimeout(() => {\r\n this.setState({\r\n mouseX: 0,\r\n mouseY: 0,\r\n });\r\n }, 1000);\r\n\r\n this.setState({ mouseLeaveDelay });\r\n };\r\n\r\n render() {\r\n const { dataImage } = this.props;\r\n const { mouseX, mouseY, width, height } = this.state;\r\n\r\n const cardStyle = {\r\n \r\n transform: `rotateY(${mouseX / width * 55}deg) rotateX(${mouseY / height * 3}deg)`,\r\n };\r\n\r\n const cardBgTransform = {\r\n transform: `translateX(${mouseX / width * -40}px) translateY(${mouseY / height *100}px)`,\r\n };\r\n\r\n const cardBgImage = {\r\n backgroundImage: `url(${dataImage})`,\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {this.props.children}\r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default CardCrea;\r\n\r\n\r\n"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}