shineout 1.12.2 → 1.12.3

package/esm/hoc/hidable.js

@@ -0,0 +1,156 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import classnames from 'classnames';
+import createReactContext from '../context';
+import { PureComponent } from '../component';
+import { getUidStr } from '../utils/uid';
+import { hidableClass } from './styles';
+var context = createReactContext({});
+export var consumer = function consumer(Origin) {
+  return function (props) {
+    return React.createElement(context.Consumer, null, function (value) {
+      return React.createElement(Origin, _extends({}, value, props));
+    });
+  };
+};
+/**
+ * @param {*} Component
+ * @param {*} duration
+ * @param {*} type - fade, collapse, tranlate
+ */
+
+export default function (Component, _ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? ['fade'] : _ref$type,
+      _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? 360 : _ref$duration,
+      _ref$display = _ref.display,
+      display = _ref$display === void 0 ? 'block' : _ref$display;
+  var hasCollapse = type.indexOf('collapse') >= 0;
+  var needTransform = type.indexOf('scale-y') >= 0;
+
+  var Hidable =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(Hidable, _PureComponent);
+
+    function Hidable(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "height", void 0);
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);
+
+      _this.state = {
+        show: props.show
+      };
+      _this.height = 0;
+      _this.id = "__hidable_" + getUidStr() + "__";
+      return _this;
+    }
+
+    var _proto = Hidable.prototype;
+
+    _proto.componentDidMount = function componentDidMount() {
+      _PureComponent.prototype.componentDidMount.call(this);
+
+      var el = this.getElement();
+      if (!el) return;
+      if (this.props.show) return;
+      if (hasCollapse) this.height = el.offsetHeight;
+      el.style.display = 'none';
+
+      if (hasCollapse) {
+        el.style.overflow = 'hidden';
+        el.style.height = '0px';
+      }
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+      if (this.props.show === prevProps.show) return;
+      if (this.props.show) this.show();else this.hide();
+    };
+
+    _proto.getElement = function getElement() {
+      return document.querySelector("." + this.id);
+    };
+
+    _proto.show = function show() {
+      var _this2 = this;
+
+      var es = this.getElement().style;
+      es.display = display;
+      setTimeout(function () {
+        if (_this2.$isMounted) {
+          _this2.setState({
+            show: true
+          });
+
+          if (hasCollapse) {
+            es.height = _this2.height + "px";
+            setTimeout(function () {
+              es.height = 'auto';
+              es.overflow = '';
+            }, duration);
+          }
+        }
+      }, 10);
+    };
+
+    _proto.hide = function hide() {
+      var _this3 = this;
+
+      this.setState({
+        show: false
+      });
+      var element = this.getElement();
+
+      if (hasCollapse) {
+        this.height = element.offsetHeight;
+        element.style.height = this.height + "px";
+        element.style.overflow = 'hidden';
+        setTimeout(function () {
+          element.style.height = '0px';
+        }, 10);
+      }
+
+      setTimeout(function () {
+        if (_this3.state.show === false && element) {
+          element.style.display = 'none';
+        }
+      }, duration);
+    };
+
+    _proto.render = function render() {
+      var animation = "animation-" + duration;
+
+      if (!needTransform) {
+        animation = "fade-" + animation;
+      }
+
+      var className = classnames(hidableClass.apply(void 0, ['_'].concat(type, [animation, this.state.show && 'show'])), this.props.className, this.id);
+      var provider = {
+        visible: this.state.show
+      };
+      return React.createElement(context.Provider, {
+        value: provider
+      }, React.createElement(Component, _extends({}, this.props, {
+        className: className
+      })));
+    };
+
+    return Hidable;
+  }(PureComponent);
+
+  _defineProperty(Hidable, "defaultProps", {
+    className: '',
+    show: false
+  });
+
+  return Hidable;
+}

package/esm/hoc/inputBorder.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/esm/hoc/inputBorder.js

@@ -0,0 +1,139 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+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 classnames from 'classnames';
+import { Component } from '../component';
+import { curry } from '../utils/func';
+import { popoverClass } from '../Popover/styles';
+import { buttonClass } from '../Button/styles';
+import { inputClass } from '../Input/styles';
+import { inputBorderClass } from '../Form/styles';
+import Popover from '../Popover';
+import { isRTL } from '../config';
+import getDataset from '../utils/dom/getDataset';
+export default curry(function (options, Origin) {
+  var _class, _temp;
+
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_Component) {
+    _inheritsLoose(_class, _Component);
+
+    function _class(props) {
+      var _this;
+
+      _this = _Component.call(this, props) || this;
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "el", void 0);
+
+      _this.el = null;
+      _this.state = {
+        focus: props.autoFocus
+      };
+      _this.bindRef = _this.bindRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_assertThisInitialized(_this))); // this.enterPress = this.enterPress.bind(this)
+
+      return _this;
+    }
+
+    var _proto = _class.prototype;
+
+    _proto.bindRef = function bindRef(el) {
+      this.el = el;
+    };
+
+    _proto.handleBlur = function handleBlur(event) {
+      this.setState({
+        focus: false
+      });
+      var onBlur = this.props.onBlur;
+      if (onBlur) onBlur(event);
+    };
+
+    _proto.handleFocus = function handleFocus(event) {
+      this.setState({
+        focus: true
+      });
+      var onFocus = this.props.onFocus;
+      if (onFocus) onFocus(event);
+    };
+
+    _proto.renderHelp = function renderHelp(focus) {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          error = _this$props.error,
+          tip = _this$props.tip,
+          popover = _this$props.popover,
+          _this$props$popoverPr = _this$props.popoverProps,
+          popoverProps = _this$props$popoverPr === void 0 ? {} : _this$props$popoverPr;
+      var classList = ['input-tip'];
+      var position = popover || (isRTL() ? 'bottom-right' : 'bottom-left');
+      var styles = popoverProps.style && popoverProps.style.width ? popoverProps.style : Object.assign({
+        minWidth: 200,
+        maxWidth: 400
+      }, popoverProps.style || {}); // 只有有错需要popover，或者tip被focus才显示
+
+      if (error && popover || tip && focus) {
+        if (error) classList.push('input-error');
+        return React.createElement(Popover, _extends({
+          getPopupContainer: function getPopupContainer() {
+            return _this2.el;
+          }
+        }, popoverProps, {
+          visible: true,
+          style: styles,
+          className: popoverClass.apply(void 0, classList),
+          position: position
+        }), error ? error.message : tip);
+      }
+
+      return null;
+    };
+
+    _proto.render = function render() {
+      var _this$props2 = this.props,
+          className = _this$props2.className,
+          border = _this$props2.border,
+          size = _this$props2.size,
+          tip = _this$props2.tip,
+          popover = _this$props2.popover,
+          width = _this$props2.width,
+          style = _this$props2.style,
+          error = _this$props2.error,
+          popoverProps = _this$props2.popoverProps,
+          underline = _this$props2.underline,
+          other = _objectWithoutPropertiesLoose(_this$props2, ["className", "border", "size", "tip", "popover", "width", "style", "error", "popoverProps", "underline"]);
+
+      var focus = this.state.focus;
+      var rtl = isRTL();
+      var Tag = options.tag || 'label';
+      var newStyle = Object.assign({
+        width: width
+      }, style);
+      var isDisabled = typeof other.disabled === 'function' ? false : !!other.disabled;
+      var newClassName = classnames(inputBorderClass(rtl && 'rtl'), inputClass('_', rtl && 'rtl', focus && !isDisabled && 'focus', isDisabled && 'disabled', options.isGroup && 'group', size, newStyle.width && 'inline', !border && 'no-border', options.overflow && "overflow-" + options.overflow, error && 'invalid', popover && error && 'focus', underline && 'underline'), buttonClass(options.isGroup && 'group', options.from === 'input' && options.isGroup && 'from-input-group'), typeof options.className === 'function' ? options.className(this.props) : options.className, this.props.className);
+      return React.createElement(Tag, _extends({
+        ref: this.bindRef,
+        className: newClassName,
+        style: newStyle,
+        tabIndex: options.enterPress ? 0 : undefined
+      }, getDataset(other)), React.createElement(Origin, _extends({}, other, {
+        size: size,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        inputFocus: focus
+      })), this.renderHelp(focus));
+    };
+
+    return _class;
+  }(Component), _defineProperty(_class, "defaultProps", {
+    border: true,
+    style: {},
+    popoverProps: {}
+  }), _temp;
+});

package/esm/hoc/moveable.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/esm/hoc/moveable.js

@@ -0,0 +1,143 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+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 classnames from 'classnames';
+import { docSize } from '../utils/dom/document';
+import { moveableClass } from './styles';
+import { getUidStr } from '../utils/uid';
+import { curry } from '../utils/func';
+var DIS_LIMIT = 50;
+export default curry(function (handler, Origin) {
+  var _temp;
+
+  return _temp =
+  /*#__PURE__*/
+  function (_React$Component) {
+    _inheritsLoose(Moveable, _React$Component);
+
+    function Moveable(props) {
+      var _this;
+
+      _this = _React$Component.call(this, props) || this;
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "moveabledId", void 0);
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "el", void 0);
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlerEl", void 0);
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "hasDragged", void 0);
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlerPos", void 0);
+
+      _this.state = {
+        x: 0,
+        y: 0,
+        draging: false
+      };
+      _this.moveabledId = getUidStr();
+      _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      _this.handleMouseUp = _this.handleMouseUp.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      return _this;
+    }
+
+    var _proto = Moveable.prototype;
+
+    _proto.componentDidMount = function componentDidMount() {
+      this.bindEvent();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this.el) {
+        this.el.removeEventListener('mousedown', this.handleMouseDown);
+      }
+    };
+
+    _proto.getStyle = function getStyle() {
+      var _this$state = this.state,
+          x = _this$state.x,
+          y = _this$state.y;
+      if (!this.hasDragged) return undefined;
+      return {
+        transform: "translate(" + x + "px, " + y + "px)"
+      };
+    };
+
+    _proto.bindEvent = function bindEvent() {
+      this.el = document.querySelector("." + moveableClass(this.moveabledId));
+      if (!this.el) return;
+      this.el.addEventListener('mousedown', this.handleMouseDown);
+      this.handlerEl = handler ? this.el.querySelector(handler) || this.el : this.el;
+    };
+
+    _proto.handleMouseDown = function handleMouseDown(e) {
+      if (e.button !== 0 || !this.el) return;
+      if (handler && !e.target.matches(handler)) return;
+      document.addEventListener('mousemove', this.handleMouseMove);
+      document.addEventListener('mouseup', this.handleMouseUp);
+      document.addEventListener('mouseleave', this.handleMouseUp);
+
+      if (!this.handlerPos) {
+        this.handlerPos = this.handlerEl.getBoundingClientRect();
+      }
+
+      this.hasDragged = true;
+      this.setState({
+        draging: true
+      });
+    };
+
+    _proto.handleMouseMove = function handleMouseMove(e) {
+      var _this2 = this;
+
+      this.setState(function (prev) {
+        var x = prev.x + e.movementX;
+        var y = prev.y + e.movementY;
+
+        if (_this2.handlerPos.right + x < DIS_LIMIT || _this2.handlerPos.left + x > docSize.width - DIS_LIMIT) {
+          // eslint-disable-next-line prefer-destructuring
+          x = prev.x;
+        }
+
+        if (_this2.handlerPos.bottom + y < DIS_LIMIT || _this2.handlerPos.top + y > docSize.height - DIS_LIMIT) {
+          // eslint-disable-next-line prefer-destructuring
+          y = prev.y;
+        }
+
+        return {
+          x: x,
+          y: y
+        };
+      });
+    };
+
+    _proto.handleMouseUp = function handleMouseUp() {
+      document.removeEventListener('mousemove', this.handleMouseMove);
+      document.removeEventListener('mouseup', this.handleMouseUp);
+      document.removeEventListener('mouseleave', this.handleMouseUp);
+      this.setState({
+        draging: false
+      });
+    };
+
+    _proto.render = function render() {
+      var _this$props = this.props,
+          moveable = _this$props.moveable,
+          others = _objectWithoutPropertiesLoose(_this$props, ["moveable"]);
+
+      if (!moveable) return React.createElement(Origin, others);
+      var ms = Object.assign({}, this.props.style, this.getStyle());
+      var mc = classnames(this.props.className, moveableClass('_', this.moveabledId, this.state.draging && 'draging'));
+      return React.createElement(Origin, _extends({}, others, {
+        style: ms,
+        className: mc
+      }));
+    };
+
+    return Moveable;
+  }(React.Component), _temp;
+});

package/esm/hoc/pagable.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="node" />
+import React from 'react';
+import { PaginationProps } from '../Pagination/Props';
+import { GetPagableProps } from './Props';
+interface PagableProps {
+    data?: any;
+    loading?: any;
+}
+interface PagableState {
+    current: number;
+    pageSize: number;
+}
+export default function <U extends PagableProps>(Component: React.ComponentType<U>): {
+    new (props: GetPagableProps<U>): {
+        getProp(key: 'current' | 'pageSize'): number;
+        getPager(data: any, pagination: PaginationProps): PaginationProps & Required<Pick<PaginationProps, 'current' | 'pageSize' | 'total'>>;
+        handleChange(current: number, pageSize: number): void;
+        render(): JSX.Element[];
+        $isMounted: boolean;
+        forceUpdateTimer: NodeJS.Timeout;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        setState(...args: any[]): void;
+        forceUpdate(): void;
+        context: any;
+        readonly props: Readonly<GetPagableProps<U>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<PagableState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<GetPagableProps<U>>, nextState: Readonly<PagableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<GetPagableProps<U>>, prevState: Readonly<PagableState>): any;
+        componentDidUpdate?(prevProps: Readonly<GetPagableProps<U>>, prevState: Readonly<PagableState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<GetPagableProps<U>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<GetPagableProps<U>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<GetPagableProps<U>>, nextState: Readonly<PagableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<GetPagableProps<U>>, nextState: Readonly<PagableState>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export {};

package/esm/hoc/pagable.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import { PureComponent } from '../component';
+import Pagination from '../Pagination';
+
+function getData(data, pager) {
+  if (!Array.isArray(data)) return data;
+  if (data.length <= pager.pageSize) return data;
+  var start = (pager.current - 1) * pager.pageSize;
+  return data.slice(start, start + pager.pageSize);
+}
+
+export default function (Component) {
+  return (
+    /*#__PURE__*/
+    function (_PureComponent) {
+      _inheritsLoose(_class, _PureComponent);
+
+      function _class(props) {
+        var _this;
+
+        _this = _PureComponent.call(this, props) || this;
+        var pp = props.pagination || {};
+        _this.state = {
+          current: pp.current || pp.defaultCurrent || 1,
+          pageSize: pp.pageSize || 10
+        };
+        _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+        return _this;
+      }
+
+      var _proto = _class.prototype;
+
+      _proto.getProp = function getProp(key) {
+        return this.props.pagination[key] || this.state[key];
+      };
+
+      _proto.getPager = function getPager(data, pagination) {
+        var loading = this.props.loading;
+        var total = Array.isArray(data) ? data.length : 0;
+        return Object.assign({
+          current: this.getProp('current'),
+          pageSize: this.getProp('pageSize'),
+          total: total,
+          disabled: !!loading
+        }, pagination, {
+          onChange: this.handleChange
+        });
+      };
+
+      _proto.handleChange = function handleChange(current, pageSize) {
+        var onChange = this.props.pagination.onChange;
+        this.setState({
+          current: current,
+          pageSize: pageSize
+        });
+        if (onChange) onChange(current, pageSize);
+      };
+
+      _proto.render = function render() {
+        var _this$props = this.props,
+            pagination = _this$props.pagination,
+            data = _this$props.data,
+            props = _objectWithoutPropertiesLoose(_this$props, ["pagination", "data"]);
+
+        var pager = this.getPager(data, pagination);
+        return [React.createElement(Component, _extends({
+          key: "origin",
+          data: getData(data, pager)
+        }, props)), React.createElement(Pagination, _extends({
+          key: "pager"
+        }, pager))];
+      };
+
+      return _class;
+    }(PureComponent)
+  );
+}

package/esm/hoc/resizable.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ResizableType } from './Props';
+interface BaseProps {
+    style?: React.CSSProperties;
+    className?: string;
+}
+interface ResizeableState {
+    x: number;
+    y: number;
+}
+declare type Direction = 'x' | 'y' | 'xy';
+declare const _default: <U extends BaseProps>(Origin: React.ComponentType<U>) => {
+    new (props: ResizableType<U>): {
+        resizableId: string;
+        handlers: Map<HTMLElement, EventListener>;
+        active?: Direction | undefined;
+        appended?: boolean | undefined;
+        size?: {
+            width: number;
+            height: number;
+        } | undefined;
+        el: HTMLElement;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        getStyle(): {
+            width: number;
+            height: number;
+        } | undefined;
+        handleMouseMove(e: MouseEvent): void;
+        handleMouseDown(dir: Direction): void;
+        handleMouseUp(): void;
+        appendHandler(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends keyof ResizeableState>(state: ResizeableState | ((prevState: Readonly<ResizeableState>, props: Readonly<ResizableType<U>>) => ResizeableState | Pick<ResizeableState, K> | null) | Pick<ResizeableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ResizableType<U>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ResizeableState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<ResizableType<U>>, nextState: Readonly<ResizeableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ResizableType<U>>, prevState: Readonly<ResizeableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ResizableType<U>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ResizableType<U>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ResizableType<U>>, nextState: Readonly<ResizeableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ResizableType<U>>, nextState: Readonly<ResizeableState>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;