shineout 1.12.2 → 1.12.3

package/esm/Image/Magnify.js

@@ -0,0 +1,147 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+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;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _this.state = {
+      loading: true,
+      status: 0,
+      style: {
+        maxHeight: props.maxHeight,
+        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;
+  }
+
+  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({
+        loading: true,
+        status: 0,
+        style: {
+          maxHeight: this.props.maxHeight,
+          maxWidth: this.props.maxWidth
+        }
+      });
+      this.props.lockScroll(false);
+    }
+  };
+
+  _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;
+  };
+
+  _proto.handleLoaded = function handleLoaded() {
+    this.setState({
+      loading: false
+    });
+  };
+
+  _proto.handleMove = function handleMove(e) {
+    this.move(e.clientX, e.clientY);
+  };
+
+  _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
+    };
+
+    if (status === 1) {
+      style.overflow = 'scroll';
+      style.borderRightWidth = 0;
+      style.borderBottomWidth = 0;
+    }
+
+    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);
+
+export default Magnify;

package/esm/Image/Props.d.ts

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import { StandardProps } from '../@types/common';
+declare type ReactNode = React.ReactNode;
+export interface ImageProps extends StandardProps {
+    /**
+     * the height of the image(When the value is percentage, the ratio is the width of the image)
+     *
+     * 图片高度(值为百分比时，对比值为图片宽度)
+     *
+     * default: '100%'
+     */
+    height?: string | number;
+    /**
+     * original picture address
+     *
+     * 原始图片地址
+     *
+     * default: none
+     */
+    href?: string;
+    /**
+     * whether to delay loading, number to set lazy offset
+     *
+     * 是否延迟加载，如果为数字则表示懒加载偏移量
+     *
+     * default: false
+     */
+    lazy?: boolean | number;
+    /**
+     * the picture address
+     *
+     * 图片地址
+     *
+     * default: required
+     */
+    src?: string;
+    /**
+     * Alternate address, applied when src is invalid
+     *
+     * 备用地址，src无效时会应用
+     *
+     * default: none
+     */
+    alt?: string;
+    /**
+     * callback of image src or alt request fail
+     *
+     * src或alt 地址请求出错回调
+     *
+     * default: -
+     */
+    onError?: (error: Event, type?: number) => void;
+    /**
+     * target of image
+     *
+     * 图片打开方式
+     *
+     * default: '_modal'
+     */
+    target?: '_modal' | '_blank' | '_self' | '_download';
+    /**
+     * the width of the image
+     *
+     * 图片宽度
+     *
+     * default: '100%'
+     */
+    width?: string | number;
+    /**
+     * loading image placeholder content
+     *
+     * 图片加载中占位内容
+     *
+     * default: 'loading'
+     */
+    placeholder?: ReactNode;
+    /**
+     * the special element selector witch container the lazy image, such as: '#id', '.class'
+     *
+     * 对特定元素进行懒加载判断的选择器, 如: '#id', '.class'
+     *
+     * default: -
+     */
+    container?: string | Element;
+    /**
+     * image error placeholder
+     *
+     * 图片载入错误的文案
+     *
+     * default: none
+     */
+    error?: ReactNode;
+    /**
+     * auto transform protocol
+     *
+     * 是否根据页面自动转换协议
+     *
+     * default: false
+     */
+    autoSSL?: boolean;
+    /**
+     * fit the container
+     *
+     * 适应容器的方式
+     *
+     * default: -
+     */
+    fit?: 'fill' | 'fit' | 'stretch' | 'center';
+    /**
+     * shape of image
+     *
+     * 图片样式
+     *
+     * default: 'rounded'
+     */
+    shape?: 'rounded' | 'circle' | 'thumbnail';
+    /**
+     * The callback of click
+     *
+     * 点击图片的回调
+     *
+     * default: -
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * The original property of html
+     *
+     * 原生 title 属性
+     *
+     * default: -
+     */
+    title?: string;
+}
+export interface ImageGroupProps extends StandardProps {
+    /**
+     * the height of single image(When the value is percentage, the ratio is the width of the image)
+     *
+     * 单个图片高度(值为百分比时，对比值为图片宽度)
+     *
+     * default: '100%'
+     */
+    height?: string | number;
+    /**
+     * whether to delay loading
+     *
+     * 是否延迟加载
+     *
+     * default: false
+     */
+    lazy?: boolean;
+    /**
+     * whether to stack
+     *
+     * 是否堆叠
+     *
+     * default: false
+     */
+    pile?: boolean;
+    /**
+     * target of image
+     *
+     * 图片打开方式
+     *
+     * default: '_modal'
+     */
+    target?: '_modal' | '_blank' | '_self' | '_download';
+    /**
+     * the width of single picture
+     *
+     * 单个图片宽度
+     *
+     * default: '100%'
+     */
+    width?: string | number;
+    /**
+     * children
+     *
+     * 子元素
+     *
+     * default: -
+     */
+    children?: ReactNode;
+}
+export {};

package/esm/Image/Props.js

@@ -0,0 +1 @@
+export {};

package/esm/Image/events.d.ts

@@ -0,0 +1,6 @@
+export interface GalleryImage {
+    src?: string;
+    thumb?: string;
+    key?: number | string;
+}
+export default function events(images: GalleryImage | GalleryImage[], current?: number): void;

package/esm/Image/events.js

@@ -0,0 +1,40 @@
+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);
+  if (container && container.parentNode) container.parentNode.removeChild(container);
+  container = null;
+}
+
+function keyClose(e) {
+  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;
+}
+
+export default function events(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/esm/Image/index.d.ts

@@ -0,0 +1,2 @@
+import Image from './Image';
+export default Image;

package/esm/Image/index.js

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

package/esm/Image/interface.d.ts

@@ -0,0 +1 @@
+export { ImageProps as Props, ImageGroupProps as GroupProps } from './Props';

package/esm/Image/interface.js

@@ -0,0 +1 @@
+export {};

package/esm/Image/styles/image.less

@@ -0,0 +1,311 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@image-prefix: ~'@{so-prefix}-image';
+
+.@{image-prefix} {
+  @keyframe-f2c: ~'@{image-prefix}-kf-f2c';
+  @keyframe-c2f: ~'@{image-prefix}-kf-c2f';
+  @keyframe-b2c: ~'@{image-prefix}-kf-b2c';
+  @keyframe-c2b: ~'@{image-prefix}-kf-c2b';
+
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  & > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &-inner {
+    right: 0;
+    bottom: 0;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  &-mask {
+    display: flex;
+    background: @gray-100;
+    color: @gray-500;
+
+    div {
+      margin: auto;
+    }
+  }
+
+  &-rounded {
+    border-radius: @border-radius-base;
+  }
+
+  &-circle {
+    border-radius: 50%;
+  }
+
+  &-thumbnail {
+    background-color: @thumbnail-bg;
+    border-radius: @thumbnail-border-radius;
+    box-shadow: @thumbnail-box-shadow;
+    transition: all 0.2s ease-in-out;
+
+    .@{image-prefix}-inner {
+      top: @thumbnail-padding;
+      right: @thumbnail-padding;
+      bottom: @thumbnail-padding;
+      left: @thumbnail-padding;
+    }
+  }
+
+  &-fill &-inner,
+  &-fit &-inner {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+  }
+
+  &-fill &-inner {
+    background-size: cover;
+  }
+
+  &-center &-inner {
+    display: flex;
+
+    img {
+      margin: auto;
+    }
+  }
+
+  &-stretch &-inner {
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-group & {
+    margin-right: 8px;
+  }
+
+  &-pile&-group {
+    position: relative;
+
+    .@{image-prefix} {
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      left: 0;
+      display: none;
+
+      &:first-child {
+        position: relative;
+        z-index: 10;
+        display: inline-block;
+      }
+
+      &:nth-child(2) {
+        top: 8px;
+        left: 8px;
+        display: inline-block;
+      }
+    }
+  }
+
+  &-gallery {
+    position: fixed;
+    z-index: 1100;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    .@{image-prefix}-center,
+    .@{image-prefix}-left,
+    .@{image-prefix}-right {
+      display: flex;
+      position: absolute;
+      z-index: 10;
+      top: 50%;
+      background: #fff;
+
+      & > div {
+        box-sizing: content-box;
+        border: solid 10px #fff;
+      }
+    }
+
+    .@{image-prefix}-center {
+      z-index: 20;
+      min-width: 100px;
+      min-height: 100px;
+    }
+
+    .@{image-prefix}-left,
+    .@{image-prefix}-right {
+      &:hover {
+        cursor: pointer;
+        opacity: 1;
+      }
+    }
+
+    @keyframes @keyframe-f2c {
+      0% {
+        left: 100%;
+        margin-left: -80px;
+        transform: translate(0, -50%);
+      }
+
+      100% {
+        left: 50%;
+        margin-left: 0;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    @keyframes @keyframe-c2b {
+      0% {
+        right: 50%;
+        margin-right: 0;
+        transform: translate(50%, -50%);
+      }
+
+      100% {
+        right: 100%;
+        margin-right: -80px;
+        transform: translate(0, -50%);
+      }
+    }
+
+    @keyframes @keyframe-c2f {
+      0% {
+        left: 50%;
+        margin-left: 0;
+        transform: translate(-50%, -50%);
+      }
+
+      100% {
+        left: 100%;
+        margin-left: -80px;
+        transform: translate(0, -50%);
+      }
+    }
+
+    @keyframes @keyframe-b2c {
+      0% {
+        right: 100%;
+        margin-right: -80px;
+        transform: translate(0, -50%);
+      }
+
+      100% {
+        right: 50%;
+        margin-right: 0;
+        transform: translate(50%, -50%);
+      }
+    }
+
+    .@{image-prefix}-center.@{image-prefix}-init {
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .@{image-prefix}-left.@{image-prefix}-init,
+    .@{image-prefix}-left.@{image-prefix}-backward {
+      right: 100%;
+      margin-right: -80px;
+      opacity: 0.4;
+      transform: translate(0, -50%);
+    }
+
+    .@{image-prefix}-right.@{image-prefix}-init,
+    .@{image-prefix}-right.@{image-prefix}-forward {
+      left: 100%;
+      margin-left: -80px;
+      opacity: 0.4;
+      transform: translate(0, -50%);
+    }
+
+    .@{image-prefix}-center.@{image-prefix}-forward {
+      animation: @keyframe-f2c 0.42s linear;
+    }
+
+    .@{image-prefix}-left.@{image-prefix}-forward {
+      animation: @keyframe-c2b 0.42s linear;
+    }
+
+    .@{image-prefix}-center.@{image-prefix}-backward {
+      animation: @keyframe-b2c 0.42s linear;
+    }
+
+    .@{image-prefix}-right.@{image-prefix}-backward {
+      animation: @keyframe-c2f 0.42s linear;
+    }
+
+    .@{image-prefix}-overlay {
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .@{image-prefix}-close {
+      position: absolute;
+      top: -14px;
+      right: -10px;
+      width: 24px;
+      height: 24px;
+      border: solid 1px #fff;
+      background: #333;
+      border-radius: 12px;
+      box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.3);
+
+      svg {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        width: 12px;
+        height: 12px;
+        fill: #fff;
+      }
+    }
+
+    img {
+      display: block;
+    }
+  }
+
+  &-magnify {
+    display: inline-block;
+    margin: auto;
+    > img {
+      background: #fff;
+      position: relative;
+      z-index: 2;
+    }
+    &-loading {
+      z-index: 1;
+      display: inline-block;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 30px;
+      height: 30px;
+      pointer-events: none;
+    }
+  }
+
+  &-left, &-right {
+    .@{image-prefix}-magnify-loading {
+      display: none;
+    }
+  }
+}

package/esm/Image/styles/index.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/normalize.less';
+export declare const imageClass: (...args: any) => string;

package/esm/Image/styles/index.js

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