shineout 1.12.2 → 1.12.3

package/esm/Modal/styles/modal.less

@@ -0,0 +1,377 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+@modal-prefix: ~'@{so-prefix}-modal';
+@card-prefix: ~'@{so-prefix}-card';
+@moveable-prefix: ~'@{so-prefix}-moveable';
+
+@keyframes scale-in {
+  0% {
+    transform: scale(.2);
+  }
+  100% {
+    transform: scale(1) translate(0, 0);
+  }
+}
+
+@keyframes scale-out {
+  0% {
+    transform: scale(1) translate(0, 0);
+  }
+  100% {
+    transform: scale(.2);
+  }
+}
+
+.@{modal-prefix} {
+  position: fixed;
+  z-index: @zindex-modal;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  opacity: 0;
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-panel {
+    // max-width: 90%;
+    padding: @modal-panel-padding;
+    text-align: left;
+    margin: 0 auto;
+    transform: translateY(-100px);
+    .@{modal-prefix}-rtl & {
+      text-align: right;
+    }
+  }
+
+  &-zoom {
+    transform: none;
+  }
+
+  &-title {
+    color: @modal-title-color;
+    font-size: @modal-title-font-size;
+    font-weight: 500;
+    font-family: @modal-title-font;
+    line-height: 1.5;
+    padding-right: @modal-title-distance-to-right;
+    .@{modal-prefix}-rtl &{
+      padding-right: 0;
+      padding-left: @modal-title-distance-to-right;;
+    }
+
+    &.@{modal-prefix}-with-icon {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    .@{modal-prefix}-icon{
+      margin-right: 8px;
+      width: @modal-default-title-icon-size;
+      height: @modal-default-title-icon-size;
+      display: flex;
+      .@{modal-prefix}-rtl &{
+        margin-left: 8px;
+        margin-right: 0;
+      }
+
+      svg {
+        width: @modal-default-title-icon-size;
+        height: @modal-default-title-icon-size;
+        font-size: @modal-default-title-icon-size;
+      }
+    }
+  }
+
+  &-method-title {
+    padding-right: @modal-method-header-padding-right;
+    .@{modal-prefix}-rtl & {
+      padding-right: 0;
+      padding-left: @modal-method-header-padding-right;
+    }
+  }
+
+  & &-body {
+    padding: 40px 40px 20px 70px;
+    .@{modal-prefix}-rtl & {
+      padding: 40px 70px 20px 40px;
+    }
+
+    .@{modal-prefix}-title {
+      margin-bottom: 8px;
+    }
+
+    .@{modal-prefix}-icon {
+      position: absolute;
+      top: @modal-icon-top;
+      left: @modal-icon-left;
+      width: @modal-icon-size;
+      height: @modal-icon-size;
+      .@{modal-prefix}-rtl& {
+        left: auto;
+        right: @modal-icon-left;
+      }
+    }
+  }
+
+  &-position {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    transition: opacity .3s @zoom-out;
+    .@{modal-prefix}-mask > .@{modal-prefix}-panel {
+      transition: transform .3s @zoom-out;
+      border-radius: 0;
+      padding: 0;
+      > .@{modal-prefix}-title {
+        border-radius: 0;
+        background: @gray-100;
+        padding: @modal-drawer-header-vertical-padding @modal-drawer-padding;
+        padding-right: @modal-drawer-padding + 30;
+        .@{modal-prefix}-rtl& {
+          padding-right: @modal-drawer-padding;
+          padding-left: @modal-drawer-padding + 30;
+        }
+      }
+      > .@{card-prefix}-body {
+        border-radius: 0;
+        padding: @modal-drawer-padding;
+        .@{modal-prefix}-rtl& {
+          padding: @modal-drawer-padding;
+        }
+      }
+      > .@{card-prefix}-footer {
+        border-radius: 0;
+        padding: @modal-drawer-padding;
+      }
+      > .@{modal-prefix}-close {
+        top: 0;
+        right: 0;
+        margin-top: @modal-drawer-header-vertical-padding;
+        margin-right: @modal-drawer-header-vertical-padding;
+        .@{modal-prefix}-rtl& {
+          left: 0;
+          right: auto;
+          margin-right: auto;
+          margin-left: @modal-drawer-header-vertical-padding;
+        }
+      }
+    }
+  }
+
+  &-end {
+    opacity: 0;
+    transition: opacity .3s @zoom-out;
+    .@{modal-prefix}-panel {
+      transition: transform .3s @zoom-out;
+    }
+    .@{modal-prefix}-panel.@{modal-prefix}-zoom {
+      animation: scale-out .3s @zoom-out;
+    }
+  }
+
+  &-show {
+    opacity: 1;
+    transition: opacity .3s @zoom-in;
+    .@{modal-prefix}-panel {
+      transition: transform .3s @zoom-in;
+      transform: scale(1) translate(0, 0);
+    }
+  }
+
+  &-start {
+    .@{modal-prefix}-panel.@{modal-prefix}-zoom {
+      animation: scale-in .3s @zoom-in;
+    }
+  }
+
+  &-right {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    transform: translate(100%, 0);
+  }
+
+  &-left {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    transform: translate(-100%, 0);
+  }
+
+  &-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    margin: 0;
+    transform: translate(0, -100%);
+  }
+
+  &-bottom {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    transform: translate(0, 100%);
+  }
+
+  &-top,
+  &-bottom {
+    max-width: 100%;
+  }
+
+  &-success &-icon path {
+    fill: @colors-success;
+  }
+
+  &-info &-icon path {
+    fill: @colors-info;
+  }
+
+  &-warning &-icon path,
+  &-confirm &-icon path {
+    fill: @colors-warning;
+  }
+
+  &-error &-icon path {
+    fill: @colors-danger;
+  }
+
+  &-info,
+  &-success,
+  &-warning,
+  &-error,
+  &-normal,
+  &-confirm {
+    .@{modal-prefix}-footer.@{modal-prefix}-method {
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  &-close {
+    position: absolute;
+    z-index: 100;
+    top: @modal-close-top-margin;
+    right: @modal-close-right-margin;
+    display: block;
+    width: 10px;
+    height: 10px;
+    padding: 0;
+    margin-top: @modal-panel-padding;
+    margin-right: @modal-panel-padding;
+    .@{modal-prefix}-rtl & {
+      left: 0;
+      right: auto;
+      margin-right: 0;
+      margin-left: @modal-panel-padding;
+    }
+
+    &:hover > svg {
+      fill: @modal-close-icon-hover-color;
+    }
+
+    > svg {
+      fill: @modal-close-icon-color;
+    }
+  }
+
+  .@{moveable-prefix} {
+    .@{modal-prefix}-title {
+      cursor: move;
+    }
+  }
+
+  &-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100%;
+
+    > .@{card-prefix} {
+      font-size: @modal-font-size;
+      border-radius: @modal-border-radius;
+      border: @modal-border-width solid @modal-border-color;
+      color:  @modal-color;
+      &-hover:hover,
+      &-shadow {
+        box-shadow: @modal-box-shadow;
+      }
+      > .@{card-prefix}-header {
+        padding-top: @modal-header-padding-top;
+        padding-right: @modal-header-padding-right;
+        padding-bottom: @modal-header-padding-bottom;
+        padding-left: @modal-header-padding-left;
+        border-radius: @modal-border-radius @modal-border-radius 0 0;
+        background: @modal-header-bg;
+        .@{modal-prefix}-rtl & {
+          padding-right: @modal-header-padding-left;
+          padding-left: @modal-header-padding-right;
+        }
+      }
+      > .@{card-prefix}-body {
+        padding-top: @modal-body-padding-top;
+        padding-right: @modal-body-padding-right;
+        padding-bottom: @modal-body-padding-bottom;
+        padding-left: @modal-body-padding-left;
+        .@{modal-prefix}-rtl & {
+          padding-right: @modal-body-padding-left;
+          padding-left: @modal-body-padding-right;
+        }
+      }
+      .@{modal-prefix}-body {
+        padding-top: @modal-icon-body-padding-top;
+        padding-right: @modal-icon-body-padding-right;
+        padding-bottom: @modal-icon-body-padding-bottom;
+        padding-left: @modal-icon-body-padding-left;
+        .@{modal-prefix}-rtl & {
+          padding-right: @modal-icon-body-padding-left;
+          padding-left: @modal-icon-body-padding-right;
+        }
+      }
+      > .@{card-prefix}-footer {
+        padding: @modal-footer-padding;
+        border-radius: 0 0 @modal-border-radius @modal-border-radius;
+        background: @modal-footer-bg;
+        .@{modal-prefix}-rtl & {
+          text-align: left;
+        }
+      }
+      > .@{card-prefix}-header, > .@{card-prefix}-footer {
+        &:after {
+          height: @modal-divider-height;
+          width: @modal-divider-width;
+          background: @modal-divider-color;
+        }
+      }
+    }
+    > .@{card-prefix}.@{modal-prefix}-normal {
+      .@{modal-prefix}-body {
+          padding-left: @modal-icon-body-padding-right;
+          .@{modal-prefix}-rtl & {
+            padding-right: @modal-icon-body-padding-right;
+          }
+        }
+    }
+  }
+
+  &-full-screen {
+    .@{modal-prefix}-panel {
+      border-radius: 0;
+      overflow: auto;
+    }
+    &.@{modal-prefix}-position {
+      .@{modal-prefix}-panel {
+        width: 100vw;
+        height: 100vh;
+      }
+    }
+  }
+}

package/esm/Pagination/Item.d.ts

@@ -0,0 +1,12 @@
+import { PureComponent } from 'react';
+import { PaginationItem } from './Props';
+declare class Item extends PureComponent<PaginationItem> {
+    static defaultProps: {
+        disabled: boolean;
+        isCurrent: boolean;
+    };
+    constructor(props: PaginationItem);
+    handleClick(): void;
+    render(): JSX.Element;
+}
+export default Item;

package/esm/Pagination/Item.js

@@ -0,0 +1,54 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import { getDirectionClass } from '../utils/classname';
+import { paginationClass } from './styles';
+var DefaultValue = {
+  disabled: false,
+  isCurrent: false
+};
+
+var Item =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Item, _PureComponent);
+
+  function Item(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Item.prototype;
+
+  _proto.handleClick = function handleClick() {
+    var _this$props = this.props,
+        page = _this$props.page,
+        onClick = _this$props.onClick;
+    onClick(page);
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        children = _this$props2.children,
+        isCurrent = _this$props2.isCurrent,
+        disabled = _this$props2.disabled;
+    var className = paginationClass(getDirectionClass('item'), this.props.className, isCurrent && 'current');
+    return (// @ts-ignore
+      React.createElement("a", {
+        className: className,
+        disabled: disabled || isCurrent,
+        onClick: this.handleClick
+      }, children)
+    );
+  };
+
+  return Item;
+}(PureComponent);
+
+_defineProperty(Item, "defaultProps", DefaultValue);
+
+export default Item;

package/esm/Pagination/Jumper.d.ts

@@ -0,0 +1,11 @@
+import React, { PureComponent } from 'react';
+import { JumperProps } from './Props';
+declare class Jumper extends PureComponent<JumperProps> {
+    renderRequire: string;
+    autoFocus: boolean;
+    constructor(props: JumperProps);
+    getMax(): number;
+    handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export default Jumper;

package/esm/Pagination/Jumper.js

@@ -0,0 +1,101 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import { getUidStr } from '../utils/uid';
+import { paginationClass } from './styles';
+import Input from '../Input';
+import { getDirectionClass } from '../utils/classname';
+var inputStyle = {
+  width: 60,
+  display: 'inline-block'
+};
+
+var nofunc = function nofunc() {};
+
+var Jumper =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Jumper, _PureComponent);
+
+  function Jumper(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderRequire", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "autoFocus", void 0);
+
+    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderRequire = getUidStr();
+    return _this;
+  }
+
+  var _proto = Jumper.prototype;
+
+  _proto.getMax = function getMax() {
+    var _this$props = this.props,
+        total = _this$props.total,
+        pageSize = _this$props.pageSize;
+    return Math.ceil(total / pageSize) || 1;
+  };
+
+  _proto.handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === 13) {
+      var current = parseInt(e.target.value, 10);
+      this.autoFocus = true;
+      if (!Number.isFinite(current)) return;
+      if (current < 1) current = 1;
+      this.renderRequire = getUidStr();
+      var max = this.getMax();
+      if (current > max) current = max;
+
+      if (current === this.props.current) {
+        this.forceUpdate();
+      }
+
+      this.props.onChange(current);
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        current = _this$props2.current,
+        text = _this$props2.text,
+        size = _this$props2.size,
+        isSimple = _this$props2.isSimple;
+    var txt = text.jumper ? text.jumper.split('{input}') : [];
+
+    if (isSimple) {
+      var spanClass = paginationClass('simple-span');
+      txt = [[], [React.createElement("span", {
+        key: "separator",
+        className: spanClass
+      }, "/"), React.createElement("span", {
+        key: "pageMax",
+        className: spanClass
+      }, this.getMax())]];
+    }
+
+    return React.createElement("div", {
+      className: paginationClass(getDirectionClass('section'))
+    }, txt[0] ? React.createElement("span", null, txt[0]) : undefined, React.createElement(Input, {
+      key: this.renderRequire,
+      value: String(current),
+      onChange: nofunc,
+      autoFocus: this.autoFocus,
+      onKeyDown: this.handleKeyDown,
+      digits: 0,
+      type: "number",
+      style: inputStyle,
+      size: size,
+      className: paginationClass(isSimple && 'simple-input'),
+      delay: 400
+    }), txt[1] ? React.createElement("span", null, txt[1]) : undefined);
+  };
+
+  return Jumper;
+}(PureComponent);
+
+export default Jumper;

package/esm/Pagination/Links.d.ts

@@ -0,0 +1,14 @@
+import { PureComponent } from 'react';
+import { LinksProps } from './Props';
+declare class Links extends PureComponent<LinksProps> {
+    static defaultProps: {
+        span: number;
+        text: {};
+    };
+    getLinks(): {
+        links: (string | number)[];
+        max: number;
+    };
+    render(): JSX.Element;
+}
+export default Links;

package/esm/Pagination/Links.js

@@ -0,0 +1,144 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import icons from '../icons';
+import { paginationClass } from './styles';
+import Item from './Item';
+import Prev from './Prev';
+import Next from './Next';
+import { isRTL } from '../config';
+import { getDirectionClass } from '../utils/classname';
+var DefaultValue = {
+  span: 5,
+  text: {}
+};
+
+var renderIcon = function renderIcon(isPrev) {
+  var rtl = isRTL();
+
+  if (isPrev && rtl || !isPrev && !rtl) {
+    return icons.AngleDoubleRight;
+  }
+
+  return icons.AngleDoubleLeft;
+};
+
+var Links =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Links, _PureComponent);
+
+  function Links() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Links.prototype;
+
+  _proto.getLinks = function getLinks() {
+    var _this$props = this.props,
+        current = _this$props.current,
+        total = _this$props.total,
+        pageSize = _this$props.pageSize,
+        _this$props$span = _this$props.span,
+        span = _this$props$span === void 0 ? DefaultValue.span : _this$props$span;
+    if (total === 0) return {
+      links: [],
+      max: 0
+    };
+    var max = Math.ceil(total / pageSize);
+    var links = [];
+    var right;
+    var left = current - Math.floor(span / 2);
+
+    if (left < 3) {
+      left = 3;
+    }
+
+    right = left + span;
+
+    if (right + 1 >= max) {
+      right = max - 1;
+      left = right - span;
+
+      if (left < 1) {
+        left = 1;
+      }
+    } else {
+      right -= left > 1 ? 1 : 0;
+    }
+
+    if (left > 1) {
+      links.push(1);
+    }
+
+    if (left === 3) {
+      links.push(2);
+    } else if (left > 3) {
+      links.push('<<');
+    }
+
+    for (var i = left; i < right + 1; i++) {
+      links.push(i);
+    }
+
+    if (right === max - 2) {
+      links.push(max - 1);
+    } else if (right < max - 1) {
+      links.push('>>');
+    }
+
+    if (right < max) {
+      links.push(max);
+    }
+
+    return {
+      links: links,
+      max: max
+    };
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        current = _this$props2.current,
+        onChange = _this$props2.onChange,
+        _this$props2$span = _this$props2.span,
+        span = _this$props2$span === void 0 ? DefaultValue.span : _this$props2$span,
+        disabled = _this$props2.disabled;
+
+    var _this$getLinks = this.getLinks(),
+        links = _this$getLinks.links,
+        max = _this$getLinks.max;
+
+    return React.createElement("div", {
+      className: paginationClass('links', getDirectionClass('section'))
+    }, React.createElement(Prev, this.props), links.map(function (p) {
+      if (typeof p === 'number') {
+        return React.createElement(Item, {
+          key: p,
+          disabled: disabled,
+          isCurrent: current === p,
+          page: p,
+          onClick: onChange
+        }, p);
+      }
+
+      var isPrev = p === '<<';
+      var page = isPrev ? current - span : current + span;
+      if (page < 1) page = 1;
+      if (page > max) page = max;
+      return React.createElement(Item, {
+        key: p,
+        disabled: disabled,
+        page: page,
+        className: "no-border " + (isPrev ? 'more-left' : 'more-right'),
+        onClick: onChange
+      }, renderIcon(isPrev));
+    }), React.createElement(Next, this.props));
+  };
+
+  return Links;
+}(PureComponent);
+
+_defineProperty(Links, "defaultProps", DefaultValue);
+
+export default Links;