shineout 1.7.1 → 1.8.0-beta.2

package/es/Image/Magnify.js

@@ -1,29 +1,38 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import immer from 'immer'
-import Spin from '../Spin'
-import { imageClass } from './styles'
-import { PureComponent } from '../component'
-
-class Magnify extends PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.state = {
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import PropTypes from 'prop-types';
+import immer from 'immer';
+import Spin from '../Spin';
+import { imageClass } from './styles';
+import { PureComponent } from '../component';
+
+var Magnify =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Magnify, _PureComponent);
+
+  function Magnify(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
       loading: true,
       status: 0,
       style: {
         maxHeight: props.maxHeight,
-        maxWidth: props.maxWidth,
-      },
-    }
-
-    this.handleMove = this.handleMove.bind(this)
-    this.handleResize = this.handleResize.bind(this)
-    this.handleLoaded = this.handleLoaded.bind(this)
+        maxWidth: props.maxWidth
+      }
+    };
+    _this.handleMove = _this.handleMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleLoaded = _this.handleLoaded.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
   }
 
-  componentDidUpdate(prevProps) {
+  var _proto = Magnify.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     if (prevProps.src !== this.props.src && this.state.status === 1) {
       // eslint-disable-next-line
       this.setState({
@@ -31,92 +40,112 @@ class Magnify extends PureComponent {
         status: 0,
         style: {
           maxHeight: this.props.maxHeight,
-          maxWidth: this.props.maxWidth,
-        },
-      })
-      this.props.lockScroll(false)
+          maxWidth: this.props.maxWidth
+        }
+      });
+      this.props.lockScroll(false);
     }
-  }
+  };
 
-  move(clientX, clientY) {
-    const rect = this.element.getBoundingClientRect()
-    const image = this.element.querySelector('img')
-    const width = rect.width - 100
-    const height = rect.height - 100
-    const x = (clientX - rect.left - 50) / width
-    const y = (clientY - rect.top - 50) / height
-    this.element.scrollTop = (image.offsetHeight - height) * y
-    this.element.scrollLeft = (image.offsetWidth - width) * x
-  }
+  _proto.move = function move(clientX, clientY) {
+    var rect = this.element.getBoundingClientRect();
+    var image = this.element.querySelector('img');
+    var width = rect.width - 100;
+    var height = rect.height - 100;
+    var x = (clientX - rect.left - 50) / width;
+    var y = (clientY - rect.top - 50) / height;
+    this.element.scrollTop = (image.offsetHeight - height) * y;
+    this.element.scrollLeft = (image.offsetWidth - width) * x;
+  };
 
-  handleLoaded() {
-    this.setState({ loading: false })
-  }
+  _proto.handleLoaded = function handleLoaded() {
+    this.setState({
+      loading: false
+    });
+  };
 
-  handleMove(e) {
-    this.move(e.clientX, e.clientY)
-  }
+  _proto.handleMove = function handleMove(e) {
+    this.move(e.clientX, e.clientY);
+  };
 
-  handleResize(e) {
-    const { maxHeight, maxWidth, position } = this.props
-    if (position !== 'center') return
-    const status = this.state.status === 1 ? 0 : 1
-    const { clientX, clientY } = e
-
-    this.setState(
-      immer(state => {
-        state.status = status
-        state.style = status === 0 ? { maxHeight, maxWidth } : undefined
-      }),
-      () => {
-        if (status === 0) return
-        this.move(clientX, clientY)
-      }
-    )
-    this.props.lockScroll(status === 1)
-  }
+  _proto.handleResize = function handleResize(e) {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        maxHeight = _this$props.maxHeight,
+        maxWidth = _this$props.maxWidth,
+        position = _this$props.position;
+    if (position !== 'center') return;
+    var status = this.state.status === 1 ? 0 : 1;
+    var clientX = e.clientX,
+        clientY = e.clientY;
+    this.setState(immer(function (state) {
+      state.status = status;
+      state.style = status === 0 ? {
+        maxHeight: maxHeight,
+        maxWidth: maxWidth
+      } : undefined;
+    }), function () {
+      if (status === 0) return;
+
+      _this2.move(clientX, clientY);
+    });
+    this.props.lockScroll(status === 1);
+  };
+
+  _proto.render = function render() {
+    var _this3 = this;
+
+    var _this$props2 = this.props,
+        maxHeight = _this$props2.maxHeight,
+        maxWidth = _this$props2.maxWidth,
+        src = _this$props2.src;
+    var _this$state = this.state,
+        status = _this$state.status,
+        loading = _this$state.loading; // eslint-disable-next-line
+
+    var cursor = this.props.position === 'center' ? status === 1 ? 'zoom-out' : 'zoom-in' : 'pointer';
+    var style = {
+      maxHeight: maxHeight,
+      maxWidth: maxWidth,
+      cursor: cursor
+    };
 
-  render() {
-    const { maxHeight, maxWidth, src } = this.props
-    const { status, loading } = this.state
-    // eslint-disable-next-line
-    const cursor = this.props.position === 'center' ? (status === 1 ? 'zoom-out' : 'zoom-in') : 'pointer'
-    const style = { maxHeight, maxWidth, cursor }
     if (status === 1) {
-      style.overflow = 'scroll'
-      style.borderRightWidth = 0
-      style.borderBottomWidth = 0
+      style.overflow = 'scroll';
+      style.borderRightWidth = 0;
+      style.borderBottomWidth = 0;
     }
 
-    const onMouseMove = status === 1 ? this.handleMove : undefined
-
-    return (
-      <div
-        onClick={this.handleResize}
-        onMouseMove={onMouseMove}
-        ref={el => {
-          this.element = el
-        }}
-        style={style}
-        className={imageClass('magnify')}
-      >
-        <img onLoad={this.handleLoaded} src={src} alt="" style={this.state.style} />
-        {loading && (
-          <div className={imageClass('magnify-loading')}>
-            <Spin size={30} />
-          </div>
-        )}
-      </div>
-    )
-  }
-}
+    var onMouseMove = status === 1 ? this.handleMove : undefined;
+    return React.createElement("div", {
+      onClick: this.handleResize,
+      onMouseMove: onMouseMove,
+      ref: function ref(el) {
+        _this3.element = el;
+      },
+      style: style,
+      className: imageClass('magnify')
+    }, React.createElement("img", {
+      onLoad: this.handleLoaded,
+      src: src,
+      alt: "",
+      style: this.state.style
+    }), loading && React.createElement("div", {
+      className: imageClass('magnify-loading')
+    }, React.createElement(Spin, {
+      size: 30
+    })));
+  };
+
+  return Magnify;
+}(PureComponent);
 
 Magnify.propTypes = {
   lockScroll: PropTypes.func,
   maxHeight: PropTypes.number,
   maxWidth: PropTypes.number,
   position: PropTypes.string,
-  src: PropTypes.string,
-}
-
-export default Magnify
+  src: PropTypes.string
+};
+export default Magnify;

package/es/Image/events.js

@@ -1,37 +1,40 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import Gallery from './Gallery'
-import { imageClass } from './styles'
-
-let container
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Gallery from './Gallery';
+import { imageClass } from './styles';
+var container;
 
 function close() {
   // eslint-disable-next-line
-  document.removeEventListener('keydown', keyClose)
-  ReactDOM.unmountComponentAtNode(container)
-  document.body.removeChild(container)
-  container = null
+  document.removeEventListener('keydown', keyClose);
+  ReactDOM.unmountComponentAtNode(container);
+  document.body.removeChild(container);
+  container = null;
 }
 
 function keyClose(e) {
-  if (e.keyCode === 27) close()
+  if (e.keyCode === 27) close();
 }
 
 function getContainer() {
-  if (container) return container
-
-  container = document.createElement('div')
-  document.body.appendChild(container)
-  container.className = imageClass('gallery')
-
-  return container
+  if (container) return container;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  container.className = imageClass('gallery');
+  return container;
 }
 
-export default function(images, current = 0) {
-  if (!Array.isArray(images)) images = [images]
-  const div = getContainer()
-
-  document.addEventListener('keydown', keyClose)
-
-  ReactDOM.render(<Gallery onClose={close} current={current} images={images} />, div)
-}
+export default function (images, current) {
+  if (current === void 0) {
+    current = 0;
+  }
+
+  if (!Array.isArray(images)) images = [images];
+  var div = getContainer();
+  document.addEventListener('keydown', keyClose);
+  ReactDOM.render(React.createElement(Gallery, {
+    onClose: close,
+    current: current,
+    images: images
+  }), div);
+}

package/es/Image/index.js

@@ -1,9 +1,6 @@
-import Image from './Image'
-import Group from './Group'
-
-Image.Group = Group
-
-Image.displayName = 'ShineoutImage'
-Image.Group.displayName = 'ShineoutImageGroup'
-
-export default Image
+import Image from './Image';
+import Group from './Group';
+Image.Group = Group;
+Image.displayName = 'ShineoutImage';
+Image.Group.displayName = 'ShineoutImageGroup';
+export default Image;

package/es/Image/styles/index.js

@@ -1,4 +1,3 @@
-import imageLess from './image.less'
-import genaration from '../../utils/classname'
-
-export const imageClass = genaration(imageLess, 'image')
+import imageLess from './image.less';
+import genaration from '../../utils/classname';
+export var imageClass = genaration(imageLess, 'image');

package/es/Input/Group.js

@@ -1,18 +1,24 @@
-import React, { Children, cloneElement } from 'react'
-import PropTypes from 'prop-types'
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import React, { Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
 
 function Group(props) {
-  const { children, style, ...other } = props
-  return Children.toArray(children).map((child, i) => {
+  var children = props.children,
+      style = props.style,
+      other = _objectWithoutPropertiesLoose(props, ["children", "style"]);
+
+  return Children.toArray(children).map(function (child, i) {
     if (typeof child === 'string') {
-      return <span key={i}>{child}</span>
+      return React.createElement("span", {
+        key: i
+      }, child);
     }
-    return cloneElement(child, other)
-  })
-}
 
-Group.propTypes = {
-  children: PropTypes.any,
+    return cloneElement(child, other);
+  });
 }
 
-export default Group
+Group.propTypes = {
+  children: PropTypes.any
+};
+export default Group;