shineout 1.12.2 → 1.12.3

package/esm/InputTitle/styles/inputTitle.less

@@ -0,0 +1,139 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@input-title-prefix: ~'@{so-prefix}-input-title-box';
+@input-prefix: ~'@{so-prefix}-input';
+@select-prefix: ~'@{so-prefix}-select';
+@datepicker-prefix: ~'@{so-prefix}-datepicker';
+@move-time: 150ms;
+@move-offset: -10px;
+
+
+
+.@{input-title-prefix} {
+  position: relative;
+  width: 100%;
+  input.@{input-title-prefix}-item,
+  textarea.@{input-title-prefix}-item{
+    line-height: inherit;
+  }
+
+  &:not(&-open) &-hidable {
+    opacity: 0;
+  }
+  &-title {
+    color: @input-color-placeholder;
+    font-size: @input-size-placeholder;
+    padding: @title-padding-base-vertical @title-padding-base-horizontal;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &-top{
+    position: relative;
+    padding-bottom: 0!important;
+    opacity: 0;
+    user-select: none;
+    pointer-events: none;
+  }
+  &-place {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    pointer-events:none;
+    opacity: 1;
+    > div {
+      flex-grow: 1;
+      width: 0;
+    }
+    .@{input-title-prefix}-title {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+  &-animation {
+    .@{input-title-prefix}-top {
+      transition: opacity 0s ease-in @move-time;
+      animation: moveout @move-time ease-in;
+    }
+    .@{input-title-prefix}-place {
+      transition: opacity 0s ease-in @move-time;
+    }
+    @keyframes moveout {
+      0% { bottom: 0px}
+      100% {bottom: @move-offset}
+    }
+  }
+  &:not(&-open) &-hideable {opacity: 0;}
+  &:hover + .@{input-prefix}-clear-wrapper {display: block;}
+  &-content > &-item
+  {padding: @title-padding-base-vertical @title-padding-base-horizontal;}
+  & &-item {padding-top: 0!important;}
+  & &-item-scroll {padding-bottom: 0!important; padding-top: 0!important;}
+}
+.@{input-title-prefix}-open {
+  .@{input-title-prefix}-top.@{input-title-prefix}-title {
+    opacity: 1;
+    transition: none;
+    user-select: initial;
+    pointer-events: initial;
+  }
+  &.@{input-title-prefix}-animation {
+    .@{input-title-prefix}-top.@{input-title-prefix}-title {
+      animation: movein @move-time ease;
+    }
+    @keyframes movein {
+      from {
+        bottom: @move-offset;
+      }
+      to {
+        bottom: 0;
+      }
+    }
+  }
+  .@{input-title-prefix}-place {
+    opacity: 0;
+    transition: none;
+    user-select: none;
+    pointer-events: none;
+  }
+
+}
+
+.@{input-prefix}-small {
+    .@{input-title-prefix}-title {
+      padding: @title-padding-small-vertical @title-padding-small-horizontal;
+      font-size: @font-size-small;
+    }
+
+  *.@{input-title-prefix}-item{
+      padding: @title-padding-small-vertical @title-padding-small-horizontal;
+    }
+}
+.@{input-prefix}-large {
+  .@{input-title-prefix} {
+    line-height: 24px;
+  }
+
+  .@{input-title-prefix}-title {
+    padding: @title-padding-large-vertical @title-padding-large-horizontal;
+    font-size: @font-size-large;
+  }
+  *.@{input-title-prefix}-item{
+    padding: @title-padding-large-vertical @title-padding-large-horizontal;
+  }
+}
+.@{datepicker-prefix}-inner-title {
+  .@{input-title-prefix} {
+    &-title {
+      padding: 0!important;
+    }
+  }
+}
+
+
+

package/esm/Lazyload/Props.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface LazyloadProps {
+    children?: ReactNode;
+    placeholder?: ReactNode;
+    container?: HTMLElement;
+    offset?: number;
+}

package/esm/Lazyload/Props.js

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

package/esm/Lazyload/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { LazyloadProps } from './Props';
+interface LazyloadState {
+    ready: boolean;
+}
+declare class Lazyload extends PureComponent<LazyloadProps, LazyloadState> {
+    static defaultProps: {
+        offset: number;
+    };
+    placeholder: HTMLSpanElement;
+    lazyId: string | null;
+    constructor(props: LazyloadProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    placeholderRef: (el: HTMLSpanElement) => void;
+    render(): React.ReactNode;
+}
+export default Lazyload;

package/esm/Lazyload/index.js

@@ -0,0 +1,78 @@
+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 { PureComponent } from '../component';
+import { lazyloadClass } from './styles';
+import { addStack, removeStack } from '../utils/lazyload';
+var DefaultProps = {
+  offset: 0
+};
+
+var Lazyload =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Lazyload, _PureComponent);
+
+  function Lazyload(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "placeholder", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lazyId", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "placeholderRef", function (el) {
+      _this.placeholder = el;
+    });
+
+    _this.state = {
+      ready: false
+    };
+    return _this;
+  }
+
+  var _proto = Lazyload.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        container = _this$props.container,
+        _this$props$offset = _this$props.offset,
+        offset = _this$props$offset === void 0 ? DefaultProps.offset : _this$props$offset;
+    this.lazyId = addStack({
+      offset: offset,
+      container: container,
+      element: this.placeholder,
+      render: function render() {
+        return _this2.setState({
+          ready: true
+        });
+      }
+    });
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    removeStack(this.lazyId);
+  };
+
+  _proto.render = function render() {
+    var ready = this.state.ready;
+    var _this$props2 = this.props,
+        children = _this$props2.children,
+        placeholder = _this$props2.placeholder;
+    if (ready) return children;
+    return React.createElement("span", {
+      ref: this.placeholderRef,
+      className: lazyloadClass('_')
+    }, placeholder);
+  };
+
+  return Lazyload;
+}(PureComponent);
+
+_defineProperty(Lazyload, "defaultProps", DefaultProps);
+
+export default Lazyload;

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

@@ -0,0 +1 @@
+export const lazyloadClass: (...args: any) => string;

package/esm/Lazyload/styles/index.js

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

package/esm/Lazyload/styles/lazyload.less

@@ -0,0 +1,8 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@lazyload-prefix: ~'@{so-prefix}-lazyload';
+
+.@{lazyload-prefix} {
+    border: 1px solid transparent;
+}

package/esm/List/index.d.ts

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

package/esm/List/index.js

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

package/esm/List/interface.d.ts

@@ -0,0 +1 @@
+export { ListProps as Props, ListBaseItemProps as BaseItemProps } from '../DataList/Props';

package/esm/List/interface.js

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

package/esm/Menu/Item.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ItemProps, BaseItemProps } from './Props';
+declare const _default: React.FC<import("./Props").MenuProviderProps<ItemProps<BaseItemProps<any>>>>;
+export default _default;

package/esm/Menu/Item.js

@@ -0,0 +1,339 @@
+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, { cloneElement } from 'react';
+import classnames from 'classnames';
+import { PureComponent } from '../component';
+import { getKey as _getKey, getUidStr } from '../utils/uid';
+import { menuClass } from './styles';
+import List from './List';
+import { consumer } from './context';
+import { isLink } from '../utils/is';
+import { isRTL } from '../config';
+import { getParent } from '../utils/dom/element';
+import { DefaultProps } from './Root';
+
+var getBaseIndent = function getBaseIndent() {
+  return 16;
+};
+
+var calcIndent = function calcIndent(flag, indent) {
+  if (!flag) return indent;
+  return Math.ceil(indent / 3 * 2);
+};
+
+var Item =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Item, _PureComponent);
+
+  function Item(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseEnter", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseLeave", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggleTimer", void 0);
+
+    _this.id = props.path + "," + getUidStr();
+
+    var key = _this.getKey(props);
+
+    var noop = function noop() {};
+
+    var _props$bindItem = props.bindItem(_this.id, noop, noop, noop),
+        activeUpdate = _props$bindItem[0],
+        openUpdate = _props$bindItem[1],
+        inPathUpdate = _props$bindItem[2];
+
+    _this.state = {
+      open: openUpdate(key),
+      isActive: activeUpdate(_this.id, props.data),
+      inPath: inPathUpdate(_this.id),
+      isHighLight: false
+    };
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleSwitch = _this.handleSwitch.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleMouseEnter = _this.handleToggle.bind(_assertThisInitialized(_assertThisInitialized(_this)), true);
+    _this.handleMouseLeave = _this.handleToggle.bind(_assertThisInitialized(_assertThisInitialized(_this)), false);
+    _this.renderLink = _this.renderLink.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Item.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    this.props.bindItem(this.id, this.update.bind(this), this.updateOpen.bind(this), this.updateInPath.bind(this));
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    this.props.unbindItem(this.id);
+    this.unbindDocumentEvent();
+  };
+
+  _proto.getKey = function getKey(props) {
+    if (props === void 0) {
+      props = this.props;
+    }
+
+    return _getKey(props.data, props.keygen, props.index);
+  };
+
+  _proto.getCalcStyle = function getCalcStyle() {
+    var style = {};
+    var _this$props = this.props,
+        frontCaret = _this$props.frontCaret,
+        level = _this$props.level,
+        _this$props$inlineInd = _this$props.inlineIndent,
+        inlineIndent = _this$props$inlineInd === void 0 ? DefaultProps.inlineIndent : _this$props$inlineInd,
+        mode = _this$props.mode;
+    var rtl = isRTL();
+    if (mode !== 'inline') return style;
+    var indent = calcIndent(frontCaret, inlineIndent);
+
+    if (rtl) {
+      style.paddingRight = getBaseIndent() + level * indent;
+    } else {
+      style.paddingLeft = getBaseIndent() + level * indent;
+    }
+
+    return style;
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.element = el;
+  };
+
+  _proto.unbindDocumentEvent = function unbindDocumentEvent() {
+    document.removeEventListener('click', this.handleMouseLeave);
+  };
+
+  _proto.update = function update(check, activePath) {
+    var isActive = check(this.id, this.props.data);
+    var isHighLight = activePath && isActive ? activePath.indexOf(this.id) > -1 : false;
+    this.setState({
+      isActive: isActive,
+      isHighLight: isHighLight
+    });
+  };
+
+  _proto.updateOpen = function updateOpen(check) {
+    var isOpen = check(this.getKey());
+    this.setState({
+      open: isOpen
+    });
+  };
+
+  _proto.updateInPath = function updateInPath(check) {
+    var inPath = check(this.id);
+    this.setState({
+      inPath: inPath
+    });
+  };
+
+  _proto.handleToggle = function handleToggle(open) {
+    var _this$props2 = this.props,
+        toggleOpenKeys = _this$props2.toggleOpenKeys,
+        toggleDuration = _this$props2.toggleDuration;
+    var key = this.getKey();
+    if (this.toggleTimer) clearTimeout(this.toggleTimer);
+
+    if (open) {
+      toggleOpenKeys(key, true);
+      document.addEventListener('click', this.handleMouseLeave);
+    } else {
+      this.toggleTimer = setTimeout(function () {
+        toggleOpenKeys(key, false);
+      }, toggleDuration);
+      this.unbindDocumentEvent();
+    }
+  };
+
+  _proto.handleClick = function handleClick(e) {
+    var _this$props3 = this.props,
+        data = _this$props3.data,
+        onClick = _this$props3.onClick,
+        mode = _this$props3.mode,
+        toggleOpenKeys = _this$props3.toggleOpenKeys,
+        looseChildren = _this$props3.looseChildren,
+        parentSelectable = _this$props3.parentSelectable;
+    var expandClick = getParent(e.target, "." + menuClass('expand'));
+    var canExpand = !parentSelectable || expandClick;
+
+    if (mode === 'inline' && data.children && canExpand) {
+      var shouldToggle = looseChildren || data.children.length;
+      if (shouldToggle) toggleOpenKeys(this.getKey(), !this.state.open);
+      if (parentSelectable && expandClick) return;
+    }
+
+    if (data.disabled) return;
+
+    if (typeof data.onClick === 'function') {
+      data.onClick(this.id, data);
+    } else if ((!data.children || data.children.length === 0 || data.onClick === true || parentSelectable) && typeof onClick === 'function') {
+      onClick(this.id, data);
+    }
+
+    var isLeaf = ((data || {}).children || []).length === 0;
+    if (!isLeaf) e.nativeEvent.stopImmediatePropagation();
+  };
+
+  _proto.handleItemClick = function handleItemClick(clickMethod, e) {
+    clickMethod();
+    this.handleClick(e);
+  };
+
+  _proto.handleSwitch = function handleSwitch(e) {
+    var _this$props4 = this.props,
+        renderItem = _this$props4.renderItem,
+        data = _this$props4.data,
+        index = _this$props4.index;
+    var item = renderItem(data, index);
+
+    if (item.props && item.props.onClick) {
+      this.handleItemClick(item.props.onClick, e);
+    } else {
+      this.handleClick(e);
+    }
+  };
+
+  _proto.renderLink = function renderLink(data) {
+    var linkKey = this.props.linkKey;
+    if (!linkKey) return null;
+    if (typeof linkKey === 'function') return linkKey(data);
+    return data[linkKey];
+  };
+
+  _proto.renderItem = function renderItem(hasChilds, style) {
+    if (hasChilds === void 0) {
+      hasChilds = false;
+    }
+
+    var _this$props5 = this.props,
+        renderItem = _this$props5.renderItem,
+        data = _this$props5.data,
+        index = _this$props5.index,
+        frontCaret = _this$props5.frontCaret,
+        caretColor = _this$props5.caretColor;
+    var item = renderItem(data, index);
+    var link = this.renderLink(data);
+
+    if (isLink(item)) {
+      var mergeClass = classnames(menuClass('title'), item.props && item.props.className);
+      var mergeStyle = Object.assign({}, style, item.props && item.props.style);
+      return cloneElement(item, {
+        className: mergeClass,
+        style: mergeStyle,
+        onClick: this.handleSwitch
+      });
+    }
+
+    var props = {
+      className: menuClass('title'),
+      style: style,
+      onClick: this.handleClick
+    };
+    if (link) props.href = link;
+
+    if (frontCaret) {
+      return React.createElement("a", props, React.createElement("div", {
+        style: {
+          color: caretColor
+        },
+        className: menuClass('caret', hasChilds && 'has-childs')
+      }), item);
+    }
+
+    return React.createElement("a", props, item, React.createElement("span", {
+      className: menuClass('expand'),
+      style: {
+        color: caretColor
+      }
+    }));
+  };
+
+  _proto.render = function render() {
+    var _this$props6 = this.props,
+        data = _this$props6.data,
+        renderItem = _this$props6.renderItem,
+        mode = _this$props6.mode,
+        keygen = _this$props6.keygen,
+        level = _this$props6.level,
+        onClick = _this$props6.onClick,
+        inlineIndent = _this$props6.inlineIndent,
+        disabled = _this$props6.disabled,
+        toggleOpenKeys = _this$props6.toggleOpenKeys,
+        bottomLine = _this$props6.bottomLine,
+        topLine = _this$props6.topLine,
+        linkKey = _this$props6.linkKey,
+        toggleDuration = _this$props6.toggleDuration,
+        frontCaret = _this$props6.frontCaret,
+        looseChildren = _this$props6.looseChildren,
+        parentSelectable = _this$props6.parentSelectable,
+        frontCaretType = _this$props6.frontCaretType;
+    var _this$state = this.state,
+        open = _this$state.open,
+        isActive = _this$state.isActive,
+        isHighLight = _this$state.isHighLight,
+        inPath = _this$state.inPath;
+    var dChildren = data.children;
+    var children = dChildren || [];
+    var isDisabled = typeof disabled === 'function' ? disabled(data) : disabled;
+    var isUp = false;
+
+    if (mode === 'vertical-auto' && this.element) {
+      isUp = this.element.getBoundingClientRect().bottom - topLine > (bottomLine - topLine) / 2;
+    }
+
+    var hasChilds = looseChildren ? Array.isArray(dChildren) : children.length > 0;
+    var className = menuClass('item', isDisabled === true && 'disabled', hasChilds ? 'has-children' : 'no-children', isActive && 'active', open && 'open', isUp && 'open-up', isHighLight && 'highlight', inPath && 'in-path', frontCaret && "caret-" + frontCaretType, parentSelectable && 'selectable');
+    var style = this.getCalcStyle();
+    var events = {};
+
+    if (mode !== 'inline') {
+      events.onMouseEnter = this.handleMouseEnter;
+      events.onMouseLeave = this.handleMouseLeave;
+    }
+
+    return React.createElement("li", _extends({
+      className: className
+    }, events, {
+      ref: this.bindElement
+    }), this.renderItem(hasChilds, style), hasChilds && React.createElement(List // className={menuClass('sub')}
+    , {
+      data: children,
+      disabled: disabled,
+      renderItem: renderItem,
+      keygen: keygen,
+      inlineIndent: mode === 'horizontal' ? 0 : inlineIndent,
+      mode: mode === 'horizontal' ? 'inline' : mode,
+      onClick: onClick,
+      path: this.id,
+      level: level + 1,
+      open: open,
+      toggleOpenKeys: toggleOpenKeys,
+      linkKey: linkKey,
+      toggleDuration: toggleDuration,
+      frontCaret: frontCaret,
+      looseChildren: looseChildren,
+      parentSelectable: parentSelectable
+    }));
+  };
+
+  return Item;
+}(PureComponent);
+
+export default consumer(Item);

package/esm/Menu/List.d.ts

@@ -0,0 +1,6 @@
+import { PureComponent } from 'react';
+import { BaseItemProps, ListProps } from './Props';
+declare class List<U extends BaseItemProps<U>> extends PureComponent<ListProps<U>> {
+    render(): JSX.Element;
+}
+export default List;