shineout 1.12.2 → 1.12.3

package/esm/Tooltip/Props.d.ts

@@ -0,0 +1,83 @@
+import { ReactNode, CSSProperties, FC } from 'react';
+import { StandardProps } from '../@types/common';
+import { GetScrollContextConsumerValue } from '../Scroll/Props';
+export declare type ToolPosition = 'top' | 'left' | 'right' | 'bottom' | 'bottom-right' | 'cover';
+export declare type TriggerType = 'click' | 'hover';
+export interface ContainerOptions {
+    show: (props: ContainerProps, id: string, innerStyle?: CSSProperties) => void;
+    hide: () => void;
+    move: (id: string, pos: Pick<CSSProperties, 'left' | 'right' | 'top' | 'bottom'>) => void;
+    isCurrent: (id: string) => boolean;
+}
+export interface ContainerProps extends StandardProps {
+    /**
+     * use animation
+     *
+     * 弹出是否使用动画，默认为 true
+     *
+     * default: true
+     */
+    animation?: boolean;
+    /**
+     * The child element can only be a ReactElement.
+     *
+     * 子元素只能为一个 ReactElement
+     *
+     * default: required
+     */
+    children: ReactNode;
+    /**
+     * The position of the pop-up layer, options: ['left', 'top', 'right', 'bottom']
+     *
+     * 弹出层位置
+     *
+     * default: 'top'
+     */
+    position?: ToolPosition;
+    /**
+     * 内部属性在 scrollContext 中获取
+     */
+    scrollElement?: HTMLElement;
+    /**
+     * 内部属性在 scrollContext 中获取
+     */
+    scrollLeft?: number;
+    /**
+     * 内部属性在 scrollContext 中获取
+     */
+    scrollTop?: number;
+    /**
+     * Pop-up type, one of  ["hover", "click"]
+     *
+     * 弹出方式
+     *
+     * default: "hover"
+     */
+    trigger?: TriggerType;
+    /**
+     * make disabled element work
+     *
+     * 使被禁用的元素正常显示提示
+     *
+     * default: false
+     */
+    disabledChild?: boolean;
+    /**
+     * Pop up texts
+     *
+     * 弹出文字
+     *
+     * default: required
+     */
+    tip: ReactNode;
+    /**
+     * Popup delay
+     *
+     * 弹出延迟
+     *
+     * default: 0
+     */
+    delay?: number;
+}
+export declare type TooltipProps = GetScrollContextConsumerValue<ContainerProps>;
+export declare type TooltipType = FC<TooltipProps>;

package/esm/Tooltip/Props.js

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

package/esm/Tooltip/events.d.ts

@@ -0,0 +1,5 @@
+import { ContainerOptions } from './Props';
+export declare function hide(): void;
+export declare const show: ContainerOptions['show'];
+export declare const move: ContainerOptions['move'];
+export declare const isCurrent: ContainerOptions['isCurrent'];

package/esm/Tooltip/events.js

@@ -0,0 +1,96 @@
+import classnames from 'classnames';
+import ReactDOM from 'react-dom';
+import { tooltipClass } from './styles';
+import getCommonContainer from '../utils/dom/popContainer';
+var div = null;
+var timer;
+var arrow = null;
+var inner = null;
+var currentId;
+
+var transStyle = function transStyle(value) {
+  if (value === void 0) {
+    value = '';
+  }
+
+  return typeof value === 'number' ? value + "px" : value;
+};
+
+export function hide() {
+  if (timer) clearTimeout(timer);
+
+  if (div) {
+    div.style.display = 'none';
+    div.className = '';
+  }
+
+  currentId = undefined;
+}
+
+function clickaway() {
+  hide();
+  document.removeEventListener('click', clickaway);
+}
+
+export var show = function show(props, id, innerStyle) {
+  var position = props.position,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      tip = props.tip,
+      trigger = props.trigger,
+      animation = props.animation,
+      cn = props.className; // create
+
+  if (!div) {
+    div = document.createElement('div');
+    div.style.display = 'none';
+    getCommonContainer().appendChild(div);
+  }
+
+  if (!arrow) {
+    arrow = document.createElement('div');
+    arrow.className = tooltipClass('arrow');
+    div.appendChild(arrow);
+  }
+
+  if (!inner) {
+    inner = document.createElement('div');
+    inner.className = tooltipClass('inner');
+    div.appendChild(inner);
+  }
+
+  currentId = id;
+  div.style.cssText = 'display: none';
+  Object.keys(style).forEach(function (k) {
+    div.style[k] = transStyle(style[k]);
+  });
+  var className = tooltipClass('_', 'in', position, animation && 'animation'); // fix safari
+
+  timer = setTimeout(function () {
+    div.style.display = 'block';
+    div.className = classnames(className, cn);
+  }, 0);
+  ReactDOM.render(tip, inner);
+  inner.setAttribute('style', '');
+
+  if (innerStyle) {
+    Object.keys(innerStyle).forEach(function (k) {
+      inner.style[k] = transStyle(innerStyle[k]);
+    });
+  }
+
+  if (trigger === 'click') {
+    document.addEventListener('click', clickaway);
+  }
+};
+export var move = function move(id, pos) {
+  if (id === currentId && div) {
+    // eslint-disable-next-line no-return-assign
+    Object.keys(pos).map(function (key) {
+      return div.style[key] = transStyle(pos[key]);
+    });
+  }
+};
+export var isCurrent = function isCurrent(id) {
+  return id === currentId;
+};

package/esm/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import { TooltipType } from './Props';
+declare const Tooltip: TooltipType;
+export default Tooltip;

package/esm/Tooltip/index.js

@@ -0,0 +1,5 @@
+import create from './Container';
+import * as events from './events';
+var Tooltip = create(events);
+Tooltip.displayName = 'ShineoutTooltip';
+export default Tooltip;

package/esm/Tooltip/interface.d.ts

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

package/esm/Tooltip/interface.js

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

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

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

package/esm/Tooltip/styles/index.js

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

package/esm/Tooltip/styles/tooltip.less

@@ -0,0 +1,169 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+@tooltip-prefix: ~'@{so-prefix}-tooltip';
+
+@arrowOffset: (-@tooltip-arrow-width + 1px);
+
+.@{tooltip-prefix} {
+  @keyframe-opacity: ~'@{tooltip-prefix}-kf-opacity';
+  @keyframe-top: ~'@{tooltip-prefix}-kf-top';
+  @keyframe-right: ~'@{tooltip-prefix}-kf-right';
+  @keyframe-bottom: ~'@{tooltip-prefix}-kf-bottom';
+  @keyframe-left: ~'@{tooltip-prefix}-kf-left';
+
+  @keyframes @keyframe-opacity {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes @keyframe-top {
+    0% {
+      margin-top: 0;
+    }
+
+    100% {
+      margin-top: -@tooltip-margin - @tooltip-arrow-width;
+    }
+  }
+
+  @keyframes @keyframe-bottom {
+    0% {
+      margin-top: 0;
+    }
+
+    100% {
+      margin-top: @tooltip-margin + @tooltip-arrow-width;
+    }
+  }
+
+  @keyframes @keyframe-left {
+    0% {
+      margin-left: 0;
+    }
+
+    100% {
+      margin-left: -@tooltip-margin - @tooltip-arrow-width;
+    }
+  }
+
+  @keyframes @keyframe-right {
+    0% {
+      margin-left: 0;
+    }
+
+    100% {
+      margin-left: @tooltip-margin + @tooltip-arrow-width;
+    }
+  }
+
+  position: absolute;
+  z-index: @zindex-tooltip;
+  display: block;
+  font-size: @font-size-small;
+  word-wrap: break-word;
+  pointer-events: none;
+
+  &-animation {
+    transition: opacity 0.3 ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  }
+
+  &-disabled-wrapper {
+    display: inline-block;
+  }
+
+  &-arrow {
+    position: absolute;
+    z-index: 1;
+    display: inline-block;
+    width: 0;
+    height: 0;
+  }
+
+  &-inner {
+    position: relative;
+    z-index: 2;
+    max-width: @tooltip-max-width;
+    padding: @tooltip-padding-y @tooltip-padding-x;
+    background-color: @tooltip-bg;
+    border-radius: 4px;
+    color: @tooltip-color;
+    text-align: center;
+  }
+
+  &-top {
+    margin-top: -@tooltip-margin - @tooltip-arrow-width;
+    transform: translate(-50%, -100%);
+
+    .@{tooltip-prefix}-arrow {
+      bottom: @arrowOffset;
+      left: 50%;
+      border-top: @tooltip-arrow-width solid @tooltip-bg;
+      border-right: @tooltip-arrow-width solid transparent;
+      border-left: @tooltip-arrow-width solid transparent;
+      transform: translate(-50%, 0);
+    }
+  }
+
+  &-top&-animation {
+    animation: @keyframe-opacity 0.3s ease, @keyframe-top 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  }
+
+  &-right {
+    margin-left: @tooltip-margin + @tooltip-arrow-width;
+    transform: translate(0, -50%);
+
+    .@{tooltip-prefix}-arrow {
+      top: 50%;
+      left: @arrowOffset;
+      border-top: @tooltip-arrow-width solid transparent;
+      border-right: @tooltip-arrow-width solid @tooltip-bg;
+      border-bottom: @tooltip-arrow-width solid transparent;
+      transform: translateY(-50%);
+    }
+  }
+
+  &-right&-animation {
+    animation: @keyframe-opacity 0.3s ease, @keyframe-right 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  }
+
+  &-left {
+    margin-left: -@tooltip-margin - @tooltip-arrow-width;
+    transform: translate(-100%, -50%);
+
+    .@{tooltip-prefix}-arrow {
+      top: 50%;
+      right: @arrowOffset;
+      border-top: @tooltip-arrow-width solid transparent;
+      border-bottom: @tooltip-arrow-width solid transparent;
+      border-left: @tooltip-arrow-width solid @tooltip-bg;
+      transform: translateY(-50%);
+    }
+  }
+
+  &-left&-animation {
+    animation: @keyframe-opacity 0.3s ease, @keyframe-left 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  }
+
+  &-bottom {
+    margin-top: @tooltip-margin + @tooltip-arrow-width;
+    transform: translateX(-50%);
+
+    .@{tooltip-prefix}-arrow {
+      top: @arrowOffset;
+      left: 50%;
+      border-right: @tooltip-arrow-width solid transparent;
+      border-bottom: @tooltip-arrow-width solid @tooltip-bg;
+      border-left: @tooltip-arrow-width solid transparent;
+      transform: translate(-50%, 0);
+    }
+  }
+
+  &-bottom&-animation {
+    animation: @keyframe-opacity 0.3s ease, @keyframe-bottom 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  }
+}

package/esm/Transfer/Card.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof import("./Props").FilterComp;
+export default _default;

package/esm/Transfer/Card.js

@@ -0,0 +1,247 @@
+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 Spin from '../Spin';
+import filter from './filter';
+import SCard from '../Card';
+import Checkbox from '../Checkbox';
+import { PureComponent } from '../component';
+import { transferClass } from './styles';
+import { getKey } from '../utils/uid';
+import { createFunc } from '../utils/func';
+import { isFunc } from '../utils/is';
+import Item from './item';
+import LazyList from '../AnimationList/LazyList';
+import { getLocale } from '../locale';
+import Input from '../Input';
+
+var Card =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Card, _PureComponent);
+
+  function Card(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cardBody", void 0);
+
+    _this.getCheckAll = _this.getCheckAll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.checkAll = _this.checkAll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleRenderItem = _this.handleRenderItem.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindCardBody = _this.bindCardBody.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.customSetSelected = _this.customSetSelected.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.state = {
+      listHeight: props.listHeight,
+      mounted: false
+    };
+    return _this;
+  }
+
+  var _proto = Card.prototype;
+
+  _proto.getCheckAll = function getCheckAll() {
+    var _this$props = this.props,
+        selecteds = _this$props.selecteds,
+        data = _this$props.data;
+    if (selecteds.length === 0) return false;
+    if (selecteds.length === data.length) return true;
+    return 'indeterminate';
+  };
+
+  _proto.bindCardBody = function bindCardBody(node) {
+    this.cardBody = node;
+    var listHeight = this.props.listHeight;
+
+    if (node) {
+      listHeight = node.offsetHeight;
+    }
+
+    this.setState({
+      listHeight: listHeight,
+      mounted: true
+    });
+  };
+
+  _proto.checkAll = function checkAll(c) {
+    var _this$props2 = this.props,
+        setSelecteds = _this$props2.setSelecteds,
+        index = _this$props2.index,
+        data = _this$props2.data,
+        keygen = _this$props2.keygen,
+        disabled = _this$props2.disabled;
+
+    if (c) {
+      if (typeof disabled === 'function') setSelecteds(index, data.reduce(function (r, d, i) {
+        if (disabled(d)) return r;
+        r.push(getKey(d, keygen, i));
+        return r;
+      }, []));else setSelecteds(index, data.map(function (d, i) {
+        return getKey(d, keygen, i);
+      }));
+    } else {
+      setSelecteds(index, []);
+    }
+  };
+
+  _proto.handleRenderItem = function handleRenderItem(d, i) {
+    var _this$props3 = this.props,
+        keygen = _this$props3.keygen,
+        index = _this$props3.index,
+        renderItem = _this$props3.renderItem,
+        disabled = _this$props3.disabled,
+        lineHeight = _this$props3.lineHeight;
+    var disable = disabled === true;
+    var key = getKey(d, keygen, i);
+    return React.createElement(Item, {
+      lineHeight: lineHeight,
+      key: key,
+      disabled: disable || typeof disabled === 'function' && disabled(d),
+      index: index,
+      checkKey: key,
+      liData: d,
+      content: createFunc(renderItem)(d)
+    });
+  };
+
+  _proto.customSetSelected = function customSetSelected(value) {
+    var _this$props4 = this.props,
+        index = _this$props4.index,
+        setSelecteds = _this$props4.setSelecteds,
+        selecteds = _this$props4.selecteds;
+
+    if (typeof value === 'string') {
+      setSelecteds(index, [].concat(selecteds, [value]));
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      setSelecteds(index, value);
+    }
+  };
+
+  _proto.renderLazyList = function renderLazyList() {
+    var _this$props5 = this.props,
+        filterText = _this$props5.filterText,
+        data = _this$props5.data,
+        rowsInView = _this$props5.rowsInView,
+        lineHeight = _this$props5.lineHeight,
+        keygen = _this$props5.keygen;
+    var _this$state = this.state,
+        mounted = _this$state.mounted,
+        listHeight = _this$state.listHeight;
+    if (!mounted) return null;
+    return React.createElement(LazyList, {
+      stay: !filterText,
+      data: data,
+      itemsInView: rowsInView,
+      lineHeight: lineHeight,
+      height: listHeight,
+      keygen: keygen // scrollHeight={lineHeight * data.length}
+      ,
+      renderItem: this.handleRenderItem
+    });
+  };
+
+  _proto.renderBody = function renderBody() {
+    var _this$props6 = this.props,
+        customRender = _this$props6.customRender,
+        index = _this$props6.index,
+        values = _this$props6.values,
+        filterText = _this$props6.filterText;
+
+    if (isFunc(customRender)) {
+      var custom = customRender({
+        onSelected: this.customSetSelected,
+        direction: index === 0 ? 'left' : 'right',
+        selectedKeys: this.props.selecteds,
+        value: values,
+        filterText: filterText
+      });
+      if (custom) return custom;
+    }
+
+    return this.renderLazyList();
+  };
+
+  _proto.renderFilter = function renderFilter() {
+    var _this$props7 = this.props,
+        onFilter = _this$props7.onFilter,
+        onSearch = _this$props7.onSearch,
+        renderFilter = _this$props7.renderFilter,
+        filterText = _this$props7.filterText,
+        disabled = _this$props7.disabled;
+    if (!onFilter && !onSearch) return null;
+
+    if (renderFilter && typeof renderFilter === 'function') {
+      return React.createElement("div", {
+        className: transferClass('filter')
+      }, renderFilter({
+        value: filterText,
+        disabled: disabled === true,
+        onFilter: onFilter,
+        placeholder: getLocale('search')
+      }));
+    }
+
+    return React.createElement("div", {
+      className: transferClass('filter')
+    }, React.createElement(Input, {
+      disabled: disabled === true,
+      onChange: onFilter,
+      placeholder: getLocale('search'),
+      clearable: true,
+      value: filterText
+    }));
+  };
+
+  _proto.render = function render() {
+    var _this$props8 = this.props,
+        title = _this$props8.title,
+        data = _this$props8.data,
+        selecteds = _this$props8.selecteds,
+        footer = _this$props8.footer,
+        listClassName = _this$props8.listClassName,
+        listStyle = _this$props8.listStyle,
+        empty = _this$props8.empty,
+        disabled = _this$props8.disabled,
+        loading = _this$props8.loading,
+        listHeight = _this$props8.listHeight,
+        customRender = _this$props8.customRender;
+    var check = this.getCheckAll();
+    var disable = disabled === true;
+    var listms = Object.assign({}, listStyle, {
+      height: listHeight
+    });
+    return React.createElement(SCard, {
+      className: transferClass('card')
+    }, React.createElement(SCard.Header, {
+      className: transferClass('card-header')
+    }, React.createElement("div", null, React.createElement(Checkbox, {
+      onChange: this.checkAll,
+      checked: check,
+      disabled: disable
+    }, check ? selecteds.length + " " + getLocale('selected') : getLocale('selectAll'))), React.createElement("div", {
+      className: transferClass('card-header-title')
+    }, title)), this.renderFilter(), React.createElement(Spin, {
+      loading: loading
+    }, React.createElement(SCard.Body, {
+      className: classnames(transferClass('card-body'), listClassName),
+      style: listms
+    }, React.createElement("div", {
+      className: transferClass('body-container'),
+      ref: this.bindCardBody
+    }, this.renderBody(), !isFunc(customRender) && data.length === 0 && React.createElement("div", {
+      className: transferClass('empty')
+    }, empty || getLocale('noData'))))), footer && React.createElement(SCard.Footer, {
+      className: transferClass('card-footer')
+    }, footer));
+  };
+
+  return Card;
+}(PureComponent);
+
+export default filter(Card);