app-base-react/lib/library/image-slider/index.js

react development common base package.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _button=require("antd/lib/button"),_button2=_interopRequireDefault(_button),_image=require("antd/lib/image"),_image2=_interopRequireDefault(_image),_createClass=function(){function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}}(),_icons=(require("antd/lib/button/style/css"),require("antd/lib/image/style/css"),require("@ant-design/icons")),_antd=require("antd"),_react=require("react"),_react2=_interopRequireDefault(_react);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var ImageSlider=function(){function t(e){_classCallCheck(this,t);var a=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return a.handleLeftClick=function(){var e=a.state,t=e.currentIndex,e=e.step;e<=t&&a.setState({currentIndex:t-e})},a.handleRightClick=function(){var e=a.state,t=e.currentIndex,n=e.data,r=e.displayCount,e=e.step;t+r+e<=n.length&&a.setState({currentIndex:t+e})},a.handleClick=function(e,t){var n;a.props.onClick(e,t)&&(n=(n=a.state.selectedIndices)==t?null:t,a.setState({selectedIndices:n}),console.log(e,t,n))},a.handleImageClick=function(e,t){console.log(e,t),a.props.onImageClick(e,t)},a.handleImageDelete=function(e,n){var t;a.state.selectedIndices;a.setState({selectedIndices:n}),a.props.onDel(e,n)?(e=a.state.data.filter(function(e,t){return t!==n}),t=0<Math.min(a.state.currentIndex,e.length-a.state.displayCount)?Math.min(a.state.currentIndex,e.length-a.state.displayCount):0,a.setState({data:e,currentIndex:t,selectedIndices:null})):a.setState({selectedIndices:null})},a.state={currentIndex:0,data:a.props.data||[],displayCount:a.props.displayCount||4,imgWidth:a.props.imgWidth||100,imgHeight:a.props.imgHeight||100,step:a.props.step||1,showButton:a.props.showButton||!0,buttonText:a.props.buttonText||"详情",selectedIndices:null},a}return _inherits(t,_react.Component),_createClass(t,[{key:"render",value:function(){var n=this,e=this.state,r=e.currentIndex,t=e.data,a=e.displayCount,i=e.imgWidth,l=e.imgHeight,o=e.step,c=e.showButton,s=e.selectedIndices,u=e.buttonText,e=t.slice(r,r+a).map(function(e,t){return _react2.default.createElement("div",{key:t,style:{marginRight:8,padding:"5px"}},_react2.default.createElement("div",{className:s==r+t?"picBorder":"",style:{position:"relative",width:i,height:l}},_react2.default.createElement(_image2.default,{onClick:function(){return n.handleImageClick(e,r+t)},src:e.url,width:i,height:l,fallback:"https://fdfs.7ipr.com:443/group1/M00/0B/82/wKgBtmbWdjyAVsHqAAAJZLR7VNQ011.png?attname=fail.png"}),_react2.default.createElement(_icons.CloseOutlined,{style:{position:"absolute",top:0,right:0,cursor:"pointer",color:"rgba(0, 0, 0, 0.45)",fontSize:14,padding:"0"},onClick:function(){return n.handleImageDelete(e,r+t)}})),c?_react2.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",marginTop:"10px"}},_react2.default.createElement(_button2.default,{onClick:function(){return n.handleClick(e,r+t)}},u+"["+(r+t+1)+"]")):"")});return _react2.default.createElement("div",{style:{display:"flex",alignItems:"center"}},t.length&&t.length>a?_react2.default.createElement(_button2.default,{onClick:this.handleLeftClick,disabled:r<o},_react2.default.createElement(_icons.LeftOutlined,null)):"",_react2.default.createElement("div",{style:{display:"flex",overflowX:"auto",whiteSpace:"nowrap",margin:"0 10px",padding:"5px"}},e),t.length&&t.length>a?_react2.default.createElement(_button2.default,{onClick:this.handleRightClick,disabled:r+a>=t.length-o+1},_react2.default.createElement(_icons.RightOutlined,null)):"")}}]),t}();exports.default=ImageSlider;