shineout 1.12.2 → 1.12.3

package/esm/DataList/List.d.ts

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { BaseListProps } from './Props';
+declare class Index<U, T> extends Component<BaseListProps<U, T>> {
+    static defaultProps: {
+        colNum: number;
+        loading: boolean;
+        size: string;
+    };
+    id: string | null;
+    node: HTMLDivElement | null;
+    observer: HTMLDivElement | null;
+    static displayName: string;
+    constructor(props: BaseListProps<U, T>);
+    componentWillUnmount(): void;
+    getItemClassName(value: U, index: number, flag?: boolean): string;
+    getContent(value: U, index: number): React.ReactNode;
+    scrollLoading(): void;
+    bindNode(node: HTMLDivElement): void;
+    bindObserver(node: HTMLDivElement): void;
+    renderCheckBox(flag: boolean, data: U, index: number): JSX.Element | null;
+    renderItem(value: U, index: number): JSX.Element;
+    renderList(isEmpty: boolean): JSX.Element | JSX.Element[];
+    renderFooter(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default Index;

package/esm/DataList/List.js

@@ -0,0 +1,209 @@
+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, { Component, isValidElement } from 'react';
+import classnames from 'classnames';
+import { getLocale } from '../locale';
+import LazyList from '../AnimationList/LazyList';
+import { listClass } from './styles';
+import { isFunc, isArray, isString } from '../utils/is';
+import { getKey } from '../utils/uid';
+import { removeStack, addStack } from '../utils/lazyload';
+import Spin from '../Spin';
+import getDataset from '../utils/dom/getDataset';
+import Checkbox from '../Table/Checkbox';
+import { isRTL } from '../config';
+var DefaultProps = {
+  colNum: 1,
+  loading: false,
+  size: 'default'
+};
+
+var Index =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Index, _Component);
+
+  function Index(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "node", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "observer", void 0);
+
+    _this.bindNode = _this.bindNode.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindObserver = _this.bindObserver.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.scrollLoading = _this.scrollLoading.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderItem = _this.renderItem.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.id = null;
+    return _this;
+  }
+
+  var _proto = Index.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    removeStack(this.id, true);
+    this.node = null;
+    this.observer = null;
+    this.id = null;
+  };
+
+  _proto.getItemClassName = function getItemClassName(value, index, flag) {
+    var rowClassName = this.props.rowClassName;
+    var base = listClass('item', flag && 'checkbox');
+    if (isFunc(rowClassName) && rowClassName) return classnames(base, rowClassName(value, index));
+    if (isString(rowClassName)) return classnames(base, rowClassName);
+    return base;
+  };
+
+  _proto.getContent = function getContent(value, index) {
+    var renderItem = this.props.renderItem;
+    if (renderItem && typeof renderItem === 'function') return renderItem(value, index);
+    if (isString(renderItem)) return value[renderItem];
+    if (isString(value)) return value;
+    return null;
+  };
+
+  _proto.scrollLoading = function scrollLoading() {
+    var scrollLoading = this.props.scrollLoading;
+    if (!isFunc(scrollLoading)) return;
+    if (scrollLoading) scrollLoading();
+  };
+
+  _proto.bindNode = function bindNode(node) {
+    this.node = node;
+  };
+
+  _proto.bindObserver = function bindObserver(node) {
+    this.observer = node;
+    if (!node) return;
+    removeStack(this.id, true);
+    this.id = addStack({
+      container: this.node,
+      element: node,
+      render: this.scrollLoading,
+      offset: 20,
+      noRemove: true
+    });
+  };
+
+  _proto.renderCheckBox = function renderCheckBox(flag, data, index) {
+    if (!flag) return null;
+    var datum = this.props.datum;
+    return React.createElement(Checkbox, {
+      data: data,
+      index: index,
+      datum: datum,
+      force: datum.check(data)
+    });
+  };
+
+  _proto.renderItem = function renderItem(value, index) {
+    var _this$props = this.props,
+        keygen = _this$props.keygen,
+        onChange = _this$props.onChange;
+    var haveRowSelected = isFunc(onChange);
+    var content = this.getContent(value, index);
+    return React.createElement("div", {
+      className: this.getItemClassName(value, index, haveRowSelected),
+      key: getKey(value, keygen, index)
+    }, this.renderCheckBox(haveRowSelected, value, index), haveRowSelected ? React.createElement("div", {
+      className: listClass('item-meta')
+    }, content) : content);
+  };
+
+  _proto.renderList = function renderList(isEmpty) {
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        empty = _this$props2.empty,
+        keygen = _this$props2.keygen,
+        fixed = _this$props2.fixed,
+        rowsInView = _this$props2.rowsInView,
+        lineHeight = _this$props2.lineHeight,
+        value = _this$props2.value,
+        colNum = _this$props2.colNum;
+    if (isEmpty) return React.createElement("div", {
+      className: listClass('item', 'empty')
+    }, empty || getLocale('noData'));
+
+    if (!fixed) {
+      var items = data.map(this.renderItem);
+
+      if (colNum && colNum > 1) {
+        var frs = Array(colNum).fill('1fr').join(' ');
+        return React.createElement("div", {
+          style: {
+            display: 'grid',
+            gridTemplateColumns: frs
+          }
+        }, items);
+      }
+
+      return items;
+    }
+
+    return React.createElement(LazyList, {
+      lineHeight: lineHeight,
+      data: data,
+      keygen: keygen,
+      renderItem: this.renderItem,
+      itemsInView: rowsInView,
+      force: value,
+      colNum: colNum
+    });
+  };
+
+  _proto.renderFooter = function renderFooter() {
+    var footer = this.props.footer;
+    if (footer && typeof footer === 'function') return React.createElement("div", {
+      className: listClass('footer')
+    }, footer());
+    if (isValidElement(footer)) return React.createElement("div", {
+      className: listClass('footer')
+    }, footer);
+    return null;
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        data = _this$props3.data,
+        loading = _this$props3.loading,
+        style = _this$props3.style,
+        size = _this$props3.size,
+        bordered = _this$props3.bordered,
+        fixed = _this$props3.fixed,
+        height = _this$props3.height,
+        scrollLoading = _this$props3.scrollLoading;
+    var isEmpty = !isArray(data) || data.length <= 0;
+    var ms = Object.assign({}, style, height && {
+      height: height
+    });
+    return React.createElement("div", _extends({
+      className: classnames(listClass('container', size, bordered && 'bordered', fixed && 'fixed', isRTL() && 'rtl'), this.props.className),
+      style: ms,
+      ref: this.bindNode
+    }, getDataset(this.props)), loading && React.createElement("div", {
+      className: listClass('loading')
+    }, typeof loading === 'boolean' ? React.createElement(Spin, {
+      size: 40
+    }) : loading), React.createElement("div", {
+      className: listClass('list', isEmpty && 'empty')
+    }, this.renderList(isEmpty)), !isEmpty && isFunc(scrollLoading) && React.createElement("div", {
+      ref: this.bindObserver
+    }), this.renderFooter());
+  };
+
+  return Index;
+}(Component);
+
+_defineProperty(Index, "defaultProps", DefaultProps);
+
+_defineProperty(Index, "displayName", void 0);
+
+Index.displayName = 'ShineoutList';
+export default Index;

package/esm/DataList/Meta.d.ts

@@ -0,0 +1,16 @@
+import { Component, ReactNode } from 'react';
+interface MetaProps {
+    avatar: ReactNode | (() => ReactNode);
+    title?: string;
+    desc: string;
+    content?: ReactNode | (() => ReactNode);
+    className?: string;
+}
+declare class Meta extends Component<MetaProps> {
+    renderAvatar(): JSX.Element | null;
+    renderTitle(): JSX.Element | null;
+    renderDesc(): JSX.Element | null;
+    renderContent(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default Meta;

package/esm/DataList/Meta.js

@@ -0,0 +1,120 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { Component, isValidElement } from 'react';
+import classnames from 'classnames';
+import { isFunc, isString } from '../utils/is';
+import { listClass } from './styles';
+import Image from '../Image';
+
+var metaClass = function metaClass() {
+  for (var _len = arguments.length, a = new Array(_len), _key = 0; _key < _len; _key++) {
+    a[_key] = arguments[_key];
+  }
+
+  return listClass.apply(void 0, a.map(function (v) {
+    return "meta-" + v;
+  }));
+};
+
+var Meta =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Meta, _Component);
+
+  function Meta() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Meta.prototype;
+
+  _proto.renderAvatar = function renderAvatar() {
+    var avatar = this.props.avatar;
+    if (!avatar) return null;
+
+    if (isValidElement(avatar)) {
+      return React.createElement("div", {
+        className: metaClass('avatar')
+      }, avatar);
+    }
+
+    if (isFunc(avatar)) {
+      return React.createElement("div", {
+        className: metaClass('avatar')
+      }, avatar());
+    }
+
+    if (isString(avatar)) return React.createElement("div", {
+      className: metaClass('avatar')
+    }, React.createElement(Image, {
+      lazy: true,
+      src: avatar
+    }));
+    return null;
+  };
+
+  _proto.renderTitle = function renderTitle() {
+    var _this$props = this.props,
+        title = _this$props.title,
+        desc = _this$props.desc;
+    if (!title) return null;
+    var flag = !desc;
+    return React.createElement("div", {
+      className: metaClass('title', flag && 'center')
+    }, title);
+  };
+
+  _proto.renderDesc = function renderDesc() {
+    var _this$props2 = this.props,
+        desc = _this$props2.desc,
+        title = _this$props2.title;
+    if (!desc) return null;
+    var flag = !title;
+    return React.createElement("div", {
+      className: metaClass('desc', flag && 'center')
+    }, desc);
+  };
+
+  _proto.renderContent = function renderContent() {
+    var content = this.props.content;
+    if (!content) return null;
+    if (isFunc(content)) return React.createElement("div", {
+      className: metaClass('content')
+    }, content());
+    return React.createElement("div", {
+      className: metaClass('content')
+    }, content);
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        className = _this$props3.className,
+        content = _this$props3.content,
+        title = _this$props3.title,
+        desc = _this$props3.desc; // if content && title && desc is all null, just render avatar
+
+    if (!content && !title && !desc) {
+      return React.createElement("div", {
+        className: classnames(listClass('meta'), className)
+      }, this.renderAvatar());
+    } // if title && desc is null, render classic layout
+
+
+    if (!title && !desc) {
+      return React.createElement("div", {
+        className: classnames(listClass('meta', 'includes'), className)
+      }, this.renderAvatar(), this.renderContent());
+    } // full layout
+
+
+    return React.createElement("div", {
+      className: classnames(listClass('meta'), className)
+    }, React.createElement("div", {
+      className: metaClass('container')
+    }, this.renderAvatar(), React.createElement("div", {
+      className: metaClass('meta')
+    }, this.renderTitle(), this.renderDesc())), this.renderContent());
+  };
+
+  return Meta;
+}(Component);
+
+export default Meta;

package/esm/DataList/Pagination.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PaginationProps } from '../Pagination/Props';
+export default function Pagination<T extends {
+    pagination: PaginationProps;
+}>(Origin: React.ComponentType): (props: T) => JSX.Element;

package/esm/DataList/Pagination.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import pagable from '../hoc/pagable';
+export default function Pagination(Origin) {
+  return function (props) {
+    var pagination = props.pagination;
+    var Render = pagination ? pagable(Origin) : Origin;
+    return React.createElement(Render, props);
+  };
+}

package/esm/DataList/Props.d.ts

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { StandardProps, RegularAttributes, LiteralUnion, KeygenType } from '../@types/common';
+import ListDatum from '../Datum/List';
+import { GetPagableProps } from '../hoc/Props';
+import { GetDatumListProps } from '../Datum/Props';
+export interface BaseListProps<Item, Value> extends StandardProps {
+    /**
+     * Multi-column display
+     *
+     * 多列展示
+     *
+     * default: 1
+     */
+    colNum?: number;
+    data: Item[];
+    keygen: KeygenType<Item>;
+    /**
+     * 内部属性
+     */
+    datum: ListDatum<Item, Value>;
+    renderItem?: LiteralUnion<Item> | ((d: Item, index: number) => React.ReactNode);
+    /**
+     * The current selected value.
+     *
+     * 当前选中值，格式和 onChange 返回值一致
+     *
+     * default: none
+     */
+    value?: Value[];
+    /**
+     * virtualized list
+     *
+     * 是否启用虚拟列表
+     *
+     * default: false
+     */
+    fixed?: boolean;
+    /**
+     * list height
+     *
+     * 列表高度
+     *
+     * default: -
+     */
+    height?: number;
+    /**
+     * show border
+     *
+     * 是否显示边框
+     *
+     * default: null
+     */
+    bordered?: boolean;
+    /**
+     * height of item
+     *
+     * 列表项高度
+     *
+     * default: 32
+     */
+    lineHeight?: number;
+    /**
+     * 同时展示的列表项数量
+     *
+     * Number of list items displayed at the same time
+     *
+     * default: 10
+     */
+    rowsInView?: number;
+    /**
+     * What to display when no data
+     *
+     * 无数据时展示的内容
+     *
+     * default:null
+     */
+    empty?: string | React.ReactNode;
+    /**
+     * Triggered when scrolling to the bottom
+     *
+     * 滚动到底部时触发
+     *
+     * default: null
+     */
+    scrollLoading?: () => void;
+    size?: RegularAttributes.Size;
+    /**
+     * loading
+     *
+     * 加载中
+     *
+     * default: false
+     */
+    loading?: boolean | React.ReactNode;
+    /**
+     * The content at the bottom
+     *
+     * 底部内容
+     *
+     * default: null
+     */
+    footer?: React.ReactNode | (() => React.ReactNode);
+    /**
+     * Select the row ,rowData is the selected data, rowIndex is the selected row number. If the data needs to be formatted, it is recommended to configure format
+     *
+     * 选择行。rowData为选中的数据，rowIndex为选中行号。如果需要数据需要格式化的处理，建议配置 format。
+     *
+     * default: null
+     */
+    onChange?: (rowData: Value[], index: number) => void;
+    /**
+     * custom row className
+     *
+     * 自定义行 className
+     *
+     * default: null
+     */
+    rowClassName?: (rowData: Item, index: number) => string;
+}
+export interface ListBaseItemProps {
+    desc?: string;
+    title?: string;
+    className?: string;
+    extra?: Array<React.ReactNode> | React.ReactNode;
+    avatar?: string | React.ReactNode | (() => React.ReactNode);
+    content?: string | React.ReactNode | (() => React.ReactNode);
+}
+export declare type ListPropsWithPagination<Item, Value> = GetPagableProps<BaseListProps<Item, Value>>;
+export declare type DataListDatumKey = 'disabled' | 'limit' | 'format' | 'prediction' | 'distinct';
+export declare type ListProps<Item, Value> = GetDatumListProps<ListPropsWithPagination<Item, Value>, Item, Value, DataListDatumKey>;
+export declare class BaseItemClass extends React.Component<ListBaseItemProps, {}> {
+    render(): JSX.Element;
+}
+export declare class ListClass<Item, Value> extends React.Component<ListProps<Item, Value>, {}> {
+    static BaseItem: typeof BaseItemClass;
+    render(): JSX.Element;
+}
+export declare type ListType = typeof ListClass;

package/esm/DataList/Props.js

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

package/esm/DataList/index.d.ts

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

package/esm/DataList/index.js

@@ -0,0 +1,14 @@
+import { compose } from '../utils/func';
+import Datum from '../Datum';
+import DList from './List';
+import BaseItem from './BaseItem';
+import Pagination from './Pagination';
+var bindKeys = ['disabled', 'limit', 'format', 'prediction', 'distinct'];
+var List = compose(Datum.hoc({
+  bindProps: bindKeys,
+  ignoreUndefined: true,
+  setValueType: null,
+  pure: false
+}), Pagination)(DList);
+List.BaseItem = BaseItem;
+export default List;

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

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

package/esm/DataList/styles/index.js

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