shineout 1.12.2 → 1.12.3

package/esm/Scroll/styles/scroll.less

@@ -0,0 +1,175 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@scroll-prefix: ~'@{so-prefix}-scroll';
+@select-prefix: ~'@{so-prefix}-select';
+@input-prefix: ~'@{so-prefix}-input';
+@menu-prefix: ~'@{so-prefix}-menu';
+@transfer-prefix: ~'@{so-prefix}-transfer';
+
+.@{scroll-prefix} {
+  position: relative;
+  overflow: hidden;
+
+  &-inner {
+    position: relative;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+  }
+
+  &-iframe {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background: transparent;
+  }
+
+  &-dragging {
+    user-select: none;
+  }
+
+  &-bar {
+    position: absolute;
+    z-index: 90;
+    border: 1px solid transparent;
+    background: @scrollbar-bg;
+
+    &:hover,
+    &.@{scroll-prefix}-dragging {
+      // border-color: @scrollbar-hover-border;
+
+      .@{scroll-prefix}-handle {
+        background: @scrollbar-hover-color;
+      }
+    }
+
+    .@{scroll-prefix}-handle {
+      position: absolute;
+      z-index: 2;
+      display: none;
+      background: @scrollbar-color;
+      border-radius: ((@scrollbar-width - 4) / 2);
+      cursor: default;
+
+      &:focus {
+        background: @scrollbar-hover-color;
+      }
+    }
+
+    &.@{scroll-prefix}-y {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: @scrollbar-width;
+      border-width: 0 1px;
+
+      .@{scroll-prefix}-handle {
+        left: 2px;
+        width: @scrollbar-width - 6;
+        min-height: 20px;
+      }
+
+      &.@{scroll-prefix}-padding-y:after {
+        position: absolute;
+        z-index: 1;
+        top: 100%;
+        left: -1px;
+        width: @scrollbar-width;
+        height: @scrollbar-width;
+        background: @scrollbar-bg;
+        content: ' ';
+      }
+    }
+
+    &.@{scroll-prefix}-x {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: @scrollbar-width;
+      border-width: 1px 0;
+
+      .@{scroll-prefix}-handle {
+        top: 2px;
+        min-width: 20px;
+        height: @scrollbar-width - 6;
+      }
+    }
+
+    &.@{scroll-prefix}-show .@{scroll-prefix}-handle {
+      display: block;
+    }
+  }
+
+  &-show-x {
+    padding-bottom: @scrollbar-width;
+
+    .@{scroll-prefix}-y {
+      bottom: @scrollbar-width;
+    }
+  }
+
+  &-show-y {
+    padding-right: @scrollbar-width;
+
+    .@{scroll-prefix}-x {
+      right: @scrollbar-width;
+    }
+  }
+
+  &-show-x &-inner {
+    right: @scrollbar-width;
+  }
+
+  &-show-y &-inner {
+    bottom: @scrollbar-width;
+  }
+}
+
+
+.@{scroll-prefix}.@{scroll-prefix}-rtl {
+  direction: rtl;
+  .@{scroll-prefix}-inner {
+    left: auto;
+    right: 0;
+  }
+  .@{scroll-prefix}-bar {
+    &.@{scroll-prefix}-y {
+      right: auto;
+      left: 0;
+      .@{scroll-prefix}-handle {
+        right: 2px;
+        left: auto;
+      }
+      &.@{scroll-prefix}-padding-y:after {
+        right: -1px;
+        left: auto;
+      }
+    }
+  }
+
+  &.@{scroll-prefix}-show-y {
+    padding-right: 0;
+    padding-left: @scrollbar-width;
+    .@{scroll-prefix}-x {
+      right: 0;
+      left: @scrollbar-width;
+    }
+  }
+  .@{scroll-prefix}-show-x &-inner {
+    right: 0;
+    left: @scrollbar-width;
+  }
+  .@{scroll-prefix}-bar.@{scroll-prefix}-y {
+    right: auto;
+    left: 0;
+  }
+}
+

package/esm/Select/BoxList.d.ts

@@ -0,0 +1,19 @@
+import { Component } from 'react';
+import { BoxListProps } from './Props';
+declare class BoxList<Item, Value> extends Component<BoxListProps<Item, Value>> {
+    static defaultProps: {
+        columnWidth: number;
+    };
+    handleMouseMove: () => void;
+    constructor(props: BoxListProps<Item, Value>);
+    getText(key: string): any;
+    getWidth(): number;
+    handleSelectAll(_: any, checked: boolean): void;
+    handleRenderItem(data: Item[], groupIndex: number): JSX.Element;
+    renderHeader(count: number): JSX.Element | null;
+    renderLazyList(): JSX.Element;
+    renderStack(): JSX.Element[];
+    renderOptions(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default BoxList;

package/esm/Select/BoxList.js

@@ -0,0 +1,218 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { getLocale } from '../locale'; // import icons from '../icons'
+
+import { getKey } from '../utils/uid';
+import List from '../AnimationList';
+import Spin from '../Spin'; // import Input from '../Input'
+
+import Checkbox from '../Checkbox/Checkbox';
+import { selectClass } from './styles';
+import BoxOption from './BoxOption';
+import LazyList from '../AnimationList/LazyList';
+import { getCustomList } from './utils';
+var ScaleList = List(['fade', 'scale-y'], 'fast', 'flex');
+
+var emptyFunc = function emptyFunc() {};
+
+var DefaultValue = {
+  columnWidth: 160
+};
+
+var BoxList =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(BoxList, _Component);
+
+  function BoxList(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this; // fake events
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseMove", void 0);
+
+    props.bindOptionFunc('handleHover', emptyFunc);
+    props.bindOptionFunc('hoverMove', emptyFunc);
+    props.bindOptionFunc('getIndex', emptyFunc);
+    _this.handleSelectAll = _this.handleSelectAll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleRenderItem = _this.handleRenderItem.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = BoxList.prototype;
+
+  _proto.getText = function getText(key) {
+    return this.props.text[key] || getLocale(key);
+  };
+
+  _proto.getWidth = function getWidth() {
+    var _this$props = this.props,
+        _this$props$columnWid = _this$props.columnWidth,
+        columnWidth = _this$props$columnWid === void 0 ? DefaultValue.columnWidth : _this$props$columnWid,
+        columns = _this$props.columns;
+    if (columns === -1) return columnWidth;
+    return columnWidth * columns;
+  };
+
+  _proto.handleSelectAll = function handleSelectAll(_, checked) {
+    var _this$props2 = this.props,
+        datum = _this$props2.datum,
+        data = _this$props2.data;
+    if (checked) datum.add(data);else datum.remove(data);
+  };
+
+  _proto.handleRenderItem = function handleRenderItem(data, groupIndex) {
+    var _this$props3 = this.props,
+        datum = _this$props3.datum,
+        keygen = _this$props3.keygen,
+        columns = _this$props3.columns,
+        multiple = _this$props3.multiple,
+        onChange = _this$props3.onChange,
+        renderItem = _this$props3.renderItem,
+        lineHeight = _this$props3.lineHeight;
+    return React.createElement("div", {
+      style: {
+        height: lineHeight
+      }
+    }, data.map(function (d, i) {
+      var isActive = datum.check(d);
+      return React.createElement(BoxOption, {
+        key: getKey(d, keygen, groupIndex + i),
+        isActive: isActive,
+        disabled: datum.disabled(d),
+        data: d,
+        columns: columns,
+        multiple: multiple,
+        onClick: onChange,
+        renderItem: renderItem
+      });
+    }));
+  };
+
+  _proto.renderHeader = function renderHeader(count) {
+    var _this$props4 = this.props,
+        data = _this$props4.data,
+        loading = _this$props4.loading,
+        multiple = _this$props4.multiple,
+        columnsTitle = _this$props4.columnsTitle;
+    if (loading || !multiple) return null;
+    var checked = 'indeterminate';
+    if (count === 0) checked = false;else if (count === data.length) checked = true;
+    return React.createElement("div", {
+      className: selectClass('header')
+    }, multiple && React.createElement(Checkbox, {
+      onChange: this.handleSelectAll,
+      checked: checked
+    }, this.getText('selectAll')), columnsTitle && React.createElement("span", {
+      className: selectClass('header-title')
+    }, columnsTitle));
+  };
+
+  _proto.renderLazyList = function renderLazyList() {
+    var _this$props5 = this.props,
+        columns = _this$props5.columns,
+        height = _this$props5.height,
+        lineHeight = _this$props5.lineHeight,
+        data = _this$props5.data,
+        itemsInView = _this$props5.itemsInView;
+    var sliceData = data.reduce(function (red, item) {
+      var lastItem = red[red.length - 1];
+
+      if (!lastItem) {
+        lastItem = [];
+        red.push(lastItem);
+      }
+
+      if (lastItem.length >= columns) red.push([item]);else lastItem.push(item);
+      return red;
+    }, []);
+    return React.createElement(LazyList, {
+      keygen: true,
+      lineHeight: lineHeight,
+      data: sliceData,
+      itemsInView: itemsInView,
+      height: height,
+      renderItem: this.handleRenderItem
+    });
+  };
+
+  _proto.renderStack = function renderStack() {
+    var _this$props6 = this.props,
+        columns = _this$props6.columns,
+        datum = _this$props6.datum,
+        multiple = _this$props6.multiple,
+        onChange = _this$props6.onChange,
+        renderItem = _this$props6.renderItem,
+        data = _this$props6.data,
+        keygen = _this$props6.keygen;
+    return data.map(function (d, i) {
+      var isActive = datum.check(d);
+      return React.createElement(BoxOption, {
+        key: getKey(d, keygen, i),
+        isActive: isActive,
+        disabled: datum.disabled(d),
+        data: d,
+        columns: columns,
+        multiple: multiple,
+        onClick: onChange,
+        renderItem: renderItem
+      });
+    });
+  };
+
+  _proto.renderOptions = function renderOptions() {
+    var _this$props7 = this.props,
+        loading = _this$props7.loading,
+        columns = _this$props7.columns,
+        data = _this$props7.data,
+        renderPending = _this$props7.renderPending,
+        emptyText = _this$props7.emptyText;
+    if (loading) return null;
+    var stack = columns === -1;
+    var empty = renderPending || data.length === 0;
+    return React.createElement("div", {
+      className: selectClass('box-options', stack && 'scrollable')
+    }, empty ? React.createElement("div", {
+      key: "empty",
+      className: selectClass('no-data')
+    }, emptyText || this.getText('noData')) : React.createElement(React.Fragment, null, stack ? this.renderStack() : this.renderLazyList()));
+  };
+
+  _proto.render = function render() {
+    var _this$props8 = this.props,
+        data = _this$props8.data,
+        datum = _this$props8.datum,
+        style = _this$props8.style,
+        loading = _this$props8.loading,
+        focus = _this$props8.focus,
+        selectId = _this$props8.selectId,
+        getRef = _this$props8.getRef,
+        customHeader = _this$props8.customHeader,
+        renderOptionList = _this$props8.renderOptionList;
+    var checkedCount = data.filter(function (d) {
+      return datum.check(d);
+    }).length;
+    var newStyle = Object.assign({}, style, {
+      width: this.getWidth()
+    });
+    var results = React.createElement(React.Fragment, null, customHeader, loading && typeof loading === 'boolean' ? React.createElement(Spin, {
+      size: 30
+    }) : loading, this.renderHeader(checkedCount), this.renderOptions());
+    return React.createElement(ScaleList, {
+      show: focus,
+      onMouseMove: this.handleMouseMove,
+      "data-id": selectId,
+      style: newStyle,
+      className: selectClass('box-list'),
+      getRef: getRef
+    }, getCustomList(results, renderOptionList, loading));
+  };
+
+  return BoxList;
+}(Component);
+
+_defineProperty(BoxList, "defaultProps", DefaultValue);
+
+export default BoxList;

package/esm/Select/BoxOption.d.ts

@@ -0,0 +1,9 @@
+import { PureComponent } from 'react';
+import { BoxOptionProps } from './Props';
+declare class BoxOption<Item> extends PureComponent<BoxOptionProps<Item>> {
+    locked: boolean;
+    constructor(props: BoxOptionProps<Item>);
+    handleClick(): void;
+    render(): JSX.Element;
+}
+export default BoxOption;

package/esm/Select/BoxOption.js

@@ -0,0 +1,73 @@
+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 Checkbox from '../Checkbox/Checkbox';
+import Radio from '../Radio/Radio';
+import { selectClass } from './styles';
+import { getDirectionClass } from '../utils/classname';
+
+var BoxOption =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(BoxOption, _PureComponent);
+
+  function BoxOption(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "locked", void 0);
+
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = BoxOption.prototype;
+
+  _proto.handleClick = function handleClick() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        data = _this$props.data,
+        onClick = _this$props.onClick,
+        isActive = _this$props.isActive,
+        disabled = _this$props.disabled;
+    if (this.locked || disabled) return;
+    this.locked = true;
+    onClick(!isActive, data);
+    setTimeout(function () {
+      _this2.locked = false;
+    }, 200);
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        isActive = _this$props2.isActive,
+        renderItem = _this$props2.renderItem,
+        columns = _this$props2.columns,
+        multiple = _this$props2.multiple,
+        disabled = _this$props2.disabled;
+    var className = selectClass(getDirectionClass('option'));
+    var width = columns < 0 ? undefined : 1 / columns * 100 + "%";
+    var Input = multiple ? Checkbox : Radio;
+    var result = renderItem(data);
+    var title = typeof result === 'string' ? result : undefined;
+    return React.createElement(Input, {
+      disabled: disabled,
+      style: {
+        width: width
+      },
+      checked: isActive,
+      className: className,
+      onChange: this.handleClick
+    }, React.createElement("span", {
+      title: title
+    }, result));
+  };
+
+  return BoxOption;
+}(PureComponent);
+
+export default BoxOption;

package/esm/Select/Input.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="node" />
+import React, { Component } from 'react';
+import { InputProps } from './Props';
+interface InputState {
+    editable: boolean;
+}
+declare class FilterInput extends Component<InputProps, InputState> {
+    static defaultProps: {
+        text: string;
+        updatAble: boolean;
+    };
+    lastCursorOffset: number;
+    composition: boolean;
+    editElement: HTMLSpanElement;
+    lastSelect: {
+        anchorOffset: number;
+        focusOffset: number;
+        text: string;
+    } | boolean;
+    lastMaxValue: string;
+    blurTimer: NodeJS.Timer;
+    constructor(props: InputProps);
+    componentDidMount(): void;
+    shouldComponentUpdate(): boolean;
+    componentDidUpdate(prevProps: InputProps): void;
+    getProcessedValue(text: string): string;
+    handlePaste(e: React.ClipboardEvent): void;
+    geHandleMax(e: React.ChangeEvent): boolean;
+    reset(): void;
+    focusInput(flag?: boolean): void;
+    focus(): void;
+    bindElement(el: HTMLSpanElement): void;
+    handleInput(e: any): void;
+    handleBlur(e: React.FocusEvent): void;
+    handleCompositionStart(): void;
+    handleCompositionEnd(e: any): void;
+    render(): JSX.Element;
+}
+export default FilterInput;