shineout 1.12.2 → 1.12.3

package/esm/Transfer/Props.d.ts

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import ListDatum from '../Datum/List';
+import { GetDatumListProps } from '../Datum/Props';
+import { KeygenResult, LiteralUnion, StructKeygenType } from '../@types/common';
+import { GetInputableProps } from '../Form/Props';
+declare type filterProps = {
+    value: string;
+    disabled: boolean;
+    onFilter?: (value: string) => void;
+    placeholder?: string;
+};
+export declare type SelectedArr = [KeygenResult[], KeygenResult[]];
+export declare type IndexType = 1 | 0;
+export declare type NodeItem = React.ReactNode | undefined;
+/** ----------- context ------------*/
+export interface TransferContextValue {
+    selecteds: SelectedArr;
+    setSelecteds: (index: IndexType, value: KeygenResult[]) => void;
+    itemClass: string | undefined;
+}
+/** ----------- transfer ------------*/
+export interface BaseTransferProps<DataItem, Value extends any[]> {
+    titles?: [NodeItem, NodeItem];
+    data: DataItem[];
+    datum: ListDatum<DataItem, Value>;
+    keygen: StructKeygenType<DataItem>;
+    renderItem?: ((data: DataItem) => React.ReactNode) | LiteralUnion<DataItem>;
+    footers?: [NodeItem, NodeItem];
+    operations?: [NodeItem, NodeItem];
+    operationIcon?: boolean;
+    value: Value;
+    className?: string;
+    style?: React.CSSProperties;
+    listClassName?: string;
+    listStyle?: React.CSSProperties;
+    /**
+     * desc: checked lists
+     *
+     * 被勾选的列表, 勾选的值均使用的是 keygen 的结果
+     *
+     * default: none
+     */
+    selectedKeys?: KeygenResult[];
+    /**
+     * desc: checked by default
+     *
+     * 默认被勾选的列表
+     *
+     * default: none
+     */
+    defaultSelectedKeys?: KeygenResult[];
+    /**
+     * desc: select event
+     *
+     * 勾选触发的方法
+     *
+     * default: none
+     */
+    onSelectChange?: (sourceKeys: KeygenResult[], targetKeys: KeygenResult[]) => void;
+    disabled?: boolean | ((data: DataItem) => boolean);
+    /**
+     * desc: contentless display
+     *
+     * 无内容的展示
+     *
+     * default: "无数据"
+     */
+    empty?: React.ReactNode;
+    /**
+     * desc: fileter data
+     *
+     * 筛选函数, 参数为: 输入文本, 数据, 是否为左侧数据
+     *
+     * default: none
+     */
+    onFilter?: (text: string, data: DataItem, isSource: boolean) => boolean;
+    itemClass?: string;
+    /**
+     * desc: loading
+     *
+     * 加载中, 如果需要两侧加载中状态不一致, 需要传入数组
+     *
+     * default: none
+     */
+    loading?: boolean | [boolean, boolean];
+    /**
+     * desc: seach event
+     *
+     * 输入框值变化的回调, 参数为: 输入文本, 是否为左侧数据
+     *
+     * default: none
+     */
+    onSearch?: (text: string, isSource: boolean) => void;
+    /**
+     * desc: number of data loaded at one time
+     *
+     * 一次加载的数据条数
+     *
+     * default: 20
+     */
+    rowsInView?: number;
+    /**
+     * desc: line height of list
+     *
+     * 列表行高
+     *
+     * default: 32
+     */
+    lineHeight?: number;
+    /**
+     * desc: list height
+     *
+     * 列表高度
+     *
+     * default: 180
+     */
+    listHeight?: number;
+    /**
+     * desc: custom render filter. The type filterProps: value : string; disabled : boolean; onFilter : Function; placeholder : string
+     *
+     * 自定义过滤器渲染。自定义过滤器渲染。filterProps 包含参数如下：value : string; disabled : boolean; onFilter : Function; placeholder : string
+     *
+     * default: -
+     */
+    renderFilter?: (value: filterProps) => React.ReactNode;
+    children?: React.ReactNode;
+}
+/** ----------- btns ------------*/
+export interface BtnProps<DataItem, Value extends any[]> extends Pick<BaseTransferProps<DataItem, Value>, 'datum' | 'keygen' | 'operationIcon' | 'data' | 'disabled'>, Required<Pick<BaseTransferProps<DataItem, Value>, 'operations' | 'data'>> {
+    selecteds: SelectedArr;
+    setSelecteds: (index: IndexType, value: KeygenResult[]) => void;
+    sources: DataItem[];
+    targets: DataItem[];
+}
+/** ----------- card ------------*/
+export interface CardProps<DataItem, Value extends any[]> extends Pick<BaseTransferProps<DataItem, Value>, 'keygen' | 'renderItem' | 'listClassName' | 'listStyle' | 'empty' | 'disabled' | 'onSearch' | 'renderFilter'>, Pick<Required<BaseTransferProps<DataItem, Value>>, 'lineHeight' | 'listHeight' | 'rowsInView'> {
+    title: NodeItem;
+    selecteds: KeygenResult[];
+    data: DataItem[];
+    setSelecteds: (index: IndexType, value: KeygenResult[]) => void;
+    index: IndexType;
+    footer: NodeItem;
+    loading?: boolean;
+    customRender: BaseTransferProps<DataItem, Value>['children'];
+    values: Value;
+    onFilter?: (text: string) => void;
+    filterText: string;
+}
+/** ----------- filter ------------*/
+export declare type GetFilterProps<Props, DataItem, Value extends any[]> = Omit<Props, 'onFilter' | 'filterText'> & {
+    onFilter: BaseTransferProps<DataItem, Value>['onFilter'];
+};
+export declare class FilterComp<DataItem, Value extends any[]> extends React.Component<GetFilterProps<CardProps<DataItem, Value>, DataItem, Value>, any> {
+    render: () => JSX.Element;
+}
+export declare type FilterType = typeof FilterComp;
+/** ----------- item ------------*/
+export interface ItemProps<DataItem, Value extends any[]> extends Pick<CardProps<DataItem, Value>, 'lineHeight' | 'index'>, Pick<TransferContextValue, 'selecteds' | 'setSelecteds' | 'itemClass'> {
+    disabled: boolean;
+    checkKey: KeygenResult;
+    liData: DataItem;
+    content: React.ReactNode;
+}
+export interface ItemConsumerProps<DataItem, Value extends any[]> extends Omit<ItemProps<DataItem, Value>, keyof TransferContextValue> {
+}
+/** ----------- index ------------*/
+export declare type TransferBindType = 'disabled' | 'limit' | 'format' | 'prediction' | 'separator';
+export declare type TransferPropsWithListDatum<DataItem, Value extends any[]> = GetDatumListProps<BaseTransferProps<DataItem, Value>, DataItem, Value, TransferBindType>;
+export declare type TransferPropsWithInputable<DataItem, Value extends any[]> = GetInputableProps<TransferPropsWithListDatum<DataItem, Value>, Value>;
+export declare type TransferProps<DataItem, Value extends any[]> = Omit<TransferPropsWithInputable<DataItem, Value>, 'separator'>;
+export declare class TransferComp<DataItem, Value extends any[]> extends React.Component<TransferProps<DataItem, Value>, any> {
+    render: () => JSX.Element;
+}
+export declare type TransferType = typeof TransferComp;
+export {};

package/esm/Transfer/Props.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/esm/Transfer/Transfer.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PureComponent } from '../component';
+import { BaseTransferProps, SelectedArr, IndexType } from './Props';
+import { KeygenResult } from '../@types/common';
+interface TransferState {
+    selecteds: SelectedArr;
+}
+declare class Transfer<DataItem, Value extends any[]> extends PureComponent<BaseTransferProps<DataItem, Value>, TransferState> {
+    static defaultProps: any;
+    constructor(props: BaseTransferProps<DataItem, Value>);
+    getLoading(index: IndexType): boolean | undefined;
+    getSelected(): SelectedArr;
+    setSelecteds(index: IndexType, value: KeygenResult[]): void;
+    render(): JSX.Element;
+}
+export default Transfer;

package/esm/Transfer/Transfer.js

@@ -0,0 +1,192 @@
+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 Btns from './btns';
+import { PureComponent } from '../component';
+import Card from './Card';
+import { transferClass } from './styles';
+import Context from './context';
+import splitSelecteds from './select';
+import { isRTL } from '../config';
+import getDataset from '../utils/dom/getDataset';
+var DefaultProps = {
+  titles: [],
+  data: [],
+  footers: [],
+  operations: [],
+  operationIcon: true,
+  renderItem: function renderItem(d) {
+    return d;
+  },
+  rowsInView: 20,
+  lineHeight: 32,
+  listHeight: 180
+};
+
+var Transfer =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Transfer, _PureComponent);
+
+  function Transfer(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      selecteds: props.selectedKeys ? splitSelecteds(props.selectedKeys, props) : splitSelecteds(props.defaultSelectedKeys, props) || [[], []]
+    };
+    _this.getSelected = _this.getSelected.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setSelecteds = _this.setSelecteds.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.getLoading = _this.getLoading.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Transfer.prototype;
+
+  _proto.getLoading = function getLoading(index) {
+    var loading = this.props.loading;
+    if (Array.isArray(loading)) return loading[index];
+    return loading;
+  };
+
+  _proto.getSelected = function getSelected() {
+    if ('selectedKeys' in this.props) return splitSelecteds(this.props.selectedKeys || [], this.props);
+    return this.state.selecteds;
+  };
+
+  _proto.setSelecteds = function setSelecteds(index, value) {
+    var onSelectChange = this.props.onSelectChange;
+    var selecteds = this.state.selecteds;
+    var newSelecteds = index ? [selecteds[0], value] : [value, selecteds[1]];
+    if (onSelectChange) onSelectChange(newSelecteds[0], newSelecteds[1]);
+    this.setState({
+      selecteds: newSelecteds
+    });
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        _this$props$titles = _this$props.titles,
+        titles = _this$props$titles === void 0 ? DefaultProps.titles : _this$props$titles,
+        data = _this$props.data,
+        datum = _this$props.datum,
+        keygen = _this$props.keygen,
+        renderItem = _this$props.renderItem,
+        _this$props$footers = _this$props.footers,
+        footers = _this$props$footers === void 0 ? DefaultProps.footers : _this$props$footers,
+        _this$props$operation = _this$props.operations,
+        operations = _this$props$operation === void 0 ? DefaultProps.operations : _this$props$operation,
+        operationIcon = _this$props.operationIcon,
+        className = _this$props.className,
+        style = _this$props.style,
+        listClassName = _this$props.listClassName,
+        listStyle = _this$props.listStyle,
+        onFilter = _this$props.onFilter,
+        onSearch = _this$props.onSearch,
+        empty = _this$props.empty,
+        disabled = _this$props.disabled,
+        itemClass = _this$props.itemClass,
+        _this$props$rowsInVie = _this$props.rowsInView,
+        rowsInView = _this$props$rowsInVie === void 0 ? DefaultProps.rowsInView : _this$props$rowsInVie,
+        _this$props$lineHeigh = _this$props.lineHeight,
+        lineHeight = _this$props$lineHeigh === void 0 ? DefaultProps.lineHeight : _this$props$lineHeigh,
+        _this$props$listHeigh = _this$props.listHeight,
+        listHeight = _this$props$listHeigh === void 0 ? DefaultProps.listHeight : _this$props$listHeigh,
+        renderFilter = _this$props.renderFilter,
+        children = _this$props.children;
+    var selecteds = this.getSelected();
+    var datumValues = datum.getValue(); // use this.props.value prioritized
+
+    if ('value' in this.props && datumValues !== this.props.value) {
+      this.props.datum.setValue(this.props.value);
+    }
+
+    var sources = [];
+    var targets = [];
+
+    for (var i = 0; i < data.length; i++) {
+      var d = data[i];
+
+      if (datum.check(d)) {
+        targets.push(d);
+      } else {
+        sources.push(d);
+      }
+    }
+
+    return React.createElement("div", _extends({
+      className: classnames(transferClass('_', isRTL() && 'rtl'), className),
+      style: style
+    }, getDataset(this.props)), React.createElement(Context.Provider, {
+      value: {
+        selecteds: selecteds,
+        setSelecteds: this.setSelecteds,
+        itemClass: itemClass
+      }
+    }, React.createElement(Card, {
+      title: titles[0],
+      selecteds: selecteds[0],
+      data: sources,
+      keygen: keygen,
+      renderItem: renderItem,
+      setSelecteds: this.setSelecteds,
+      index: 0,
+      footer: footers[0],
+      listClassName: listClassName,
+      listStyle: listStyle,
+      loading: this.getLoading(0),
+      onFilter: onFilter,
+      empty: empty,
+      disabled: disabled,
+      onSearch: onSearch,
+      rowsInView: rowsInView,
+      lineHeight: lineHeight,
+      listHeight: listHeight,
+      renderFilter: renderFilter,
+      customRender: children,
+      values: datumValues
+    }), React.createElement(Btns, {
+      selecteds: selecteds,
+      datum: datum,
+      setSelecteds: this.setSelecteds,
+      keygen: keygen,
+      sources: sources,
+      targets: targets,
+      operations: operations,
+      operationIcon: operationIcon,
+      data: data,
+      disabled: disabled
+    }), React.createElement(Card, {
+      title: titles[1],
+      selecteds: selecteds[1],
+      data: targets,
+      keygen: keygen,
+      renderItem: renderItem,
+      loading: this.getLoading(1),
+      setSelecteds: this.setSelecteds,
+      index: 1,
+      footer: footers[1],
+      listClassName: listClassName,
+      listStyle: listStyle,
+      onFilter: onFilter,
+      empty: empty,
+      disabled: disabled,
+      onSearch: onSearch,
+      rowsInView: rowsInView,
+      lineHeight: lineHeight,
+      listHeight: listHeight,
+      renderFilter: renderFilter,
+      customRender: children,
+      values: datumValues
+    })));
+  };
+
+  return Transfer;
+}(PureComponent);
+
+_defineProperty(Transfer, "defaultProps", DefaultProps);
+
+export default Transfer;

package/esm/Transfer/btns.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Component } from '../component';
+import { BtnProps, IndexType } from './Props';
+declare class Btns<DataItem, Value extends any[]> extends Component<BtnProps<DataItem, Value>> {
+    toSource: () => void;
+    toTarget: () => void;
+    constructor(props: BtnProps<DataItem, Value>);
+    getDataMap(): Map<any, any>;
+    change(index: IndexType): void;
+    renderButtonText(mode?: string): JSX.Element[];
+    render(): JSX.Element;
+}
+export default Btns;

package/esm/Transfer/btns.js

@@ -0,0 +1,113 @@
+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 { getKey } from '../utils/uid';
+import Button from '../Button';
+import { Component } from '../component';
+import { transferClass } from './styles';
+import icons from '../icons';
+import { isRTL } from '../config';
+
+var Btns =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Btns, _Component);
+
+  function Btns(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toSource", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toTarget", void 0);
+
+    _this.toSource = _this.change.bind(_assertThisInitialized(_assertThisInitialized(_this)), 0);
+    _this.toTarget = _this.change.bind(_assertThisInitialized(_assertThisInitialized(_this)), 1);
+    return _this;
+  }
+
+  var _proto = Btns.prototype;
+
+  _proto.getDataMap = function getDataMap() {
+    var _this$props = this.props,
+        data = _this$props.data,
+        keygen = _this$props.keygen;
+    var dataMap = new Map();
+
+    for (var i = 0; i < data.length; i++) {
+      dataMap.set(getKey(data[i], keygen, i), data[i]);
+    }
+
+    return dataMap;
+  };
+
+  _proto.change = function change(index) {
+    var _this$props2 = this.props,
+        setSelecteds = _this$props2.setSelecteds,
+        selecteds = _this$props2.selecteds,
+        datum = _this$props2.datum;
+    var dataMap = this.getDataMap();
+    var newValue = selecteds[1 - index].map(function (c) {
+      return dataMap.get(c);
+    }); // const newValue = selecteds[1 - index].map(c => data.find((d, i) => getKey(d, keygen, i) === c))
+
+    setSelecteds(1 - index, []);
+    datum[index ? 'add' : 'remove'](newValue, undefined, undefined, true);
+  };
+
+  _proto.renderButtonText = function renderButtonText(mode) {
+    if (mode === void 0) {
+      mode = 'left';
+    }
+
+    var _this$props3 = this.props,
+        operations = _this$props3.operations,
+        operationIcon = _this$props3.operationIcon;
+
+    if (mode === 'left') {
+      var left = [React.createElement(React.Fragment, {
+        key: "operationIcon"
+      }, operationIcon && icons.AngleLeft), React.createElement(React.Fragment, {
+        key: "operations"
+      }, operations[1])];
+      if (isRTL()) return left.reverse();
+      return left;
+    }
+
+    var right = [React.createElement(React.Fragment, {
+      key: "operationIcon"
+    }, operationIcon && icons.AngleRight), React.createElement(React.Fragment, {
+      key: "operations"
+    }, operations[0])];
+    if (isRTL()) return right.reverse();
+    return right;
+  };
+
+  _proto.render = function render() {
+    var _this$props4 = this.props,
+        selecteds = _this$props4.selecteds,
+        disabled = _this$props4.disabled;
+    var disable = disabled === true;
+    return React.createElement("div", {
+      className: transferClass('btns')
+    }, React.createElement("div", null, React.createElement(Button, {
+      type: "primary",
+      disabled: disable || !selecteds[0].length,
+      size: "small",
+      className: transferClass('btns-button', 'btns-bottom'),
+      onClick: this.toTarget
+    }, this.renderButtonText('right')), React.createElement("br", null), React.createElement(Button, {
+      type: "primary",
+      disabled: disable || !selecteds[1].length,
+      size: "small",
+      className: transferClass('btns-button'),
+      onClick: this.toSource
+    }, this.renderButtonText('left'))));
+  };
+
+  return Btns;
+}(Component);
+
+export default Btns;

package/esm/Transfer/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TransferContextValue } from './Props';
+declare const _default: import("react").Context<TransferContextValue>;
+export default _default;

package/esm/Transfer/context.js

@@ -0,0 +1,2 @@
+import createContext from '../context';
+export default createContext({});

package/esm/Transfer/filter.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CardProps } from './Props';
+export interface FilterState {
+    text: string;
+}
+declare const _default: <DataItem, Value extends any[]>(Origin: React.ComponentType<CardProps<DataItem, Value>>) => typeof import("./Props").FilterComp;
+export default _default;

package/esm/Transfer/filter.js

@@ -0,0 +1,70 @@
+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 PropTypes from 'prop-types';
+import { Component } from '../component';
+export default (function (Origin) {
+  var _class, _temp;
+
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_Component) {
+    _inheritsLoose(_class, _Component);
+
+    function _class(props) {
+      var _this;
+
+      _this = _Component.call(this, props) || this;
+      _this.state = {
+        text: ''
+      };
+      _this.handleFilter = _this.handleFilter.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      return _this;
+    }
+
+    var _proto = _class.prototype;
+
+    _proto.getData = function getData() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          onFilter = _this$props.onFilter,
+          data = _this$props.data,
+          index = _this$props.index;
+      if (!onFilter || !this.state.text) return data;
+      return data.filter(function (d) {
+        return onFilter(_this2.state.text, d, !index);
+      });
+    };
+
+    _proto.handleFilter = function handleFilter(text) {
+      var _this$props2 = this.props,
+          onSearch = _this$props2.onSearch,
+          index = _this$props2.index;
+      if (onSearch) onSearch(text, !index);
+      this.setState({
+        text: text
+      });
+    };
+
+    _proto.render = function render() {
+      var onFilter = this.props.onFilter;
+      var data = this.getData();
+      var filter = onFilter ? this.handleFilter : undefined;
+      return React.createElement(Origin, _extends({}, this.props, {
+        onFilter: filter,
+        filterText: this.state.text,
+        data: data
+      }));
+    };
+
+    return _class;
+  }(Component), _defineProperty(_class, "propTypes", {
+    data: PropTypes.array,
+    onFilter: PropTypes.func,
+    onSearch: PropTypes.func,
+    index: PropTypes.number
+  }), _temp;
+});

package/esm/Transfer/index.d.ts

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

package/esm/Transfer/index.js

@@ -0,0 +1,10 @@
+import Transfer from './Transfer';
+import inputable from '../Form/inputable';
+import { compose } from '../utils/func';
+import Datum from '../Datum';
+var bindProps = ['disabled', 'limit', 'format', 'prediction', 'separator'];
+var exportTransfer = compose(inputable, Datum.hoc({
+  bindProps: bindProps
+}))(Transfer);
+exportTransfer.displayName = 'ShineoutTransfer';
+export default exportTransfer;

package/esm/Transfer/interface.d.ts

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

package/esm/Transfer/interface.js

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

package/esm/Transfer/item.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ItemConsumerProps } from './Props';
+declare const _default: <DataItem, Value extends any[]>(prop: ItemConsumerProps<DataItem, Value>) => JSX.Element;
+export default _default;