doui-react 1.0.0

package/es/table/component/utils.js

@@ -0,0 +1,222 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["type", "disabled", "onClick"];
+import { executeFunction } from "../../api";
+import _ from 'lodash';
+import { Actions } from "./actions";
+import { formPropsKeysInTable } from "./constant";
+import { Editor } from "./editor";
+import { getFilterColumn } from "./filter";
+import { Link } from "./link";
+import { getSortColumn } from "./sort";
+import { Switch } from "./switch";
+import { Time } from "./time";
+import { Wrapper } from "./wrapper";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export var componentMap = {
+  time: Time,
+  link: Link,
+  switch: Switch,
+  actions: Actions,
+  selection: '',
+  editor: Editor,
+  default: function _default(props) {
+    return props.children;
+  }
+};
+export function generateColumns(_ref) {
+  var columns = _ref.columns,
+    getSearchColumn = _ref.getSearchColumn;
+  return _.filter(columns, function (column) {
+    return column.width !== 0;
+  }).map(function (column) {
+    var newColumn = _.clone(column);
+    var search = newColumn.search,
+      sort = newColumn.sort,
+      filters = newColumn.filters,
+      originRender = newColumn.render;
+    _.assign(newColumn, getColumnWidth(newColumn));
+    if (search) {
+      _.assign(newColumn, getSearchColumn(column));
+    } else {
+      _.assign(newColumn, {
+        render: function render(text) {
+          return text;
+        }
+      });
+    }
+    if (sort) {
+      _.assign(newColumn, getSortColumn(newColumn));
+    }
+    if (!_.isEmpty(filters)) {
+      _.assign(newColumn, getFilterColumn(newColumn));
+    }
+    if (newColumn.type === 'actions') {
+      var _newColumn$fixed;
+      (_newColumn$fixed = newColumn.fixed) !== null && _newColumn$fixed !== void 0 ? _newColumn$fixed : newColumn.fixed = 'right';
+    }
+    var render = function render(current, record, index) {
+      var result = newColumn.render(current);
+      var component = renderComponent({
+        index: index,
+        record: record,
+        current: current,
+        children: result,
+        column: newColumn
+      });
+      if (originRender) {
+        var getHighlight = function getHighlight(text) {
+          return newColumn.render(text !== null && text !== void 0 ? text : current);
+        };
+        return originRender({
+          index: index,
+          record: record,
+          current: current,
+          component: component,
+          getHighlight: getHighlight
+        });
+      }
+      return component;
+    };
+    return _objectSpread(_objectSpread({}, newColumn), {}, {
+      render: render
+    });
+  });
+}
+var noEllipsisTypes = ['actions', 'switch', 'editor'];
+function renderComponent(props) {
+  var children = props.children,
+    column = props.column;
+  var type = column.type || 'default';
+  var Component = componentMap[type];
+  if (noEllipsisTypes.includes(type)) {
+    return _jsx("div", {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      },
+      children: _jsx(Component, _objectSpread({}, props))
+    });
+  }
+  if (_.isNil(children)) {
+    return '-';
+  }
+  return _jsx(Wrapper, _objectSpread(_objectSpread({}, props), {}, {
+    children: _jsx(Component, _objectSpread({}, props))
+  }));
+}
+function getColumnWidth(_ref2) {
+  var width = _ref2.width,
+    minWidth = _ref2.minWidth,
+    maxWidth = _ref2.maxWidth;
+  var style;
+  if (_.isNil(width)) {
+    style = {
+      width: maxWidth,
+      minWidth: minWidth
+    };
+  } else {
+    style = {
+      width: width,
+      minWidth: width
+    };
+  }
+  return {
+    RC_TABLE_INTERNAL_COL_DEFINE: {
+      style: style
+    }
+  };
+}
+export function getRowSelection(_ref3) {
+  var rowKey = _ref3.rowKey,
+    columns = _ref3.columns,
+    context = _ref3.context;
+  var column = _.find(columns, {
+    type: 'selection'
+  });
+  if (!column) {
+    return;
+  }
+  var selectedRowKeys = context.selectedRowKeys,
+    setSelectedRowKeys = context.setSelectedRowKeys,
+    dataSource = context.dataSource;
+  var type = column.type,
+    disabled = column.disabled,
+    onClick = column.onClick,
+    rest = _objectWithoutProperties(column, _excluded);
+  return _objectSpread({
+    selectedRowKeys: selectedRowKeys,
+    getCheckboxProps: function getCheckboxProps(record) {
+      return {
+        disabled: executeFunction(disabled, _objectSpread(_objectSpread({}, context), {}, {
+          record: record
+        }))
+      };
+    },
+    onSelect: function onSelect(record, selected, selectedRows) {
+      var keys = onClick === null || onClick === void 0 ? void 0 : onClick(_objectSpread(_objectSpread({}, context), {}, {
+        record: record,
+        selectedRows: selectedRows,
+        index: 0
+      }));
+      var rowKeys = keys || _.map(selectedRows, rowKey);
+      setSelectedRowKeys(rowKeys);
+    },
+    onSelectAll: function onSelectAll(selected) {
+      if (selected) {
+        var selectedRows = _.filter(dataSource, function (record) {
+          return !executeFunction(disabled, _objectSpread(_objectSpread({}, context), {}, {
+            record: record
+          }));
+        });
+        setSelectedRowKeys(_.map(selectedRows, rowKey));
+        return;
+      }
+      setSelectedRowKeys([]);
+    }
+  }, rest);
+}
+export function getTableAndFormProps(props) {
+  var formProps = _objectSpread({
+    initialValues: {},
+    focusFirstOnMount: false
+  }, _.pick(props, formPropsKeysInTable));
+  var tableProps = _objectSpread({}, _.omit(props, formPropsKeysInTable));
+  return {
+    formProps: formProps,
+    tableProps: tableProps
+  };
+}
+export function isUseFormWrapper(_ref4) {
+  var columns = _ref4.columns,
+    context = _ref4.context,
+    form = _ref4.form;
+  // 在 Form 中时，将 context 挂载给 formContext
+  if (form) {
+    _.assign(form.getContext(), context);
+    return false;
+  }
+  return _.some(columns, {
+    type: 'editor'
+  });
+}
+export function getTableFormInitialValues(_ref5) {
+  var rowKey = _ref5.rowKey,
+    columns = _ref5.columns,
+    dataSource = _ref5.dataSource;
+  var dataIndex = _.map(columns, function (col) {
+    return col.type === 'editor' && col.dataIndex;
+  });
+  var keys = _.compact(dataIndex);
+  if (_.isEmpty(keys)) {
+    return;
+  }
+  return _.map(dataSource, function (item) {
+    return _.pick(item, [rowKey].concat(_toConsumableArray(keys)));
+  });
+}
+export function updateDataSourceByFormValues(formValues, dataSource) {
+  _.forEach(dataSource, function (item, index) {
+    return _.merge(item, formValues[index]);
+  });
+}

package/es/table/component/wrapper.d.ts

@@ -0,0 +1,6 @@
+import { Column, CommonProps } from "..";
+export interface ComponentProps extends Pick<CommonProps, 'current' | 'record' | 'index'> {
+    children: any;
+    column: Column;
+}
+export declare function Wrapper({ column, children, ...props }: ComponentProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/es/table/component/wrapper.js

@@ -0,0 +1,30 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["column", "children"];
+import { executeFunction } from "../../api";
+import { useTableContext } from "./..";
+import { Text } from "../../text";
+import style from "../style";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function Wrapper(_ref) {
+  var _executeFunction;
+  var column = _ref.column,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _column$rows = column.rows,
+    rows = _column$rows === void 0 ? 2 : _column$rows,
+    tooltip = column.tooltip,
+    _onClick = column.onClick;
+  var context = useTableContext();
+  var params = _objectSpread(_objectSpread({}, props), context);
+  return _jsx(Text, {
+    tooltip: (_executeFunction = executeFunction(tooltip, params)) !== null && _executeFunction !== void 0 ? _executeFunction : params.current,
+    rows: rows === 1 ? 2 : rows // 修复单行省略时，无法显示 Tooltip 的问题
+    ,
+    css: style.ellipsisText(rows),
+    onClick: function onClick(event) {
+      return _onClick && event.stopPropagation();
+    },
+    children: children
+  });
+}

package/es/table/hook/index.d.ts

@@ -0,0 +1,7 @@
+import { TableContext } from "..";
+import { ReactNode } from 'react';
+export * from './search';
+export declare function TableProvider({ children, ...props }: TableContext & {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useTableContext<T>(): T & TableContext;

package/es/table/hook/index.js

@@ -0,0 +1,17 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import { createContext, useContext } from 'react';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export * from "./search";
+var TableCtx = /*#__PURE__*/createContext({});
+export function TableProvider(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return _jsx(TableCtx.Provider, {
+    value: props,
+    children: children
+  });
+}
+export function useTableContext() {
+  return useContext(TableCtx);
+}

package/es/table/hook/search.d.ts

@@ -0,0 +1,5 @@
+import { ColumnType } from 'antd/lib/table';
+import { Column } from '../type';
+export declare function useSearchColumn(): {
+    getSearchColumn: ({ dataIndex, ...rest }: Column) => ColumnType<any>;
+};

package/es/table/hook/search.js

@@ -0,0 +1,131 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["dataIndex"];
+import { lowercasedContains } from "../../api";
+import { Button } from "../../button";
+import { HighlightText } from "../../highlight-text";
+import { SearchOutlined } from '@ant-design/icons';
+import { Input } from 'antd';
+import _ from 'lodash';
+import React from 'react';
+import { useSetState } from 'react-use';
+import style from "../style";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+export function useSearchColumn() {
+  var _useSetState = useSetState({}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    search = _useSetState2[0],
+    setSearch = _useSetState2[1];
+  var getSearchColumn = function getSearchColumn(_ref) {
+    var _ref$dataIndex = _ref.dataIndex,
+      dataIndex = _ref$dataIndex === void 0 ? '' : _ref$dataIndex,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    return getSearchableColumn(_objectSpread(_objectSpread({
+      dataIndex: dataIndex
+    }, rest), {}, {
+      searchText: search[dataIndex],
+      setSearchText: function setSearchText(value) {
+        return setSearch(_defineProperty({}, dataIndex, value));
+      }
+    }));
+  };
+  return {
+    getSearchColumn: getSearchColumn
+  };
+}
+function getSearchableColumn(column) {
+  var _column$placeholder = column.placeholder,
+    placeholder = _column$placeholder === void 0 ? 'Search' : _column$placeholder,
+    searchText = column.searchText,
+    setSearchText = column.setSearchText;
+  var currentInput = null;
+  var handleSearch = function handleSearch(_ref2) {
+    var selectedKeys = _ref2.selectedKeys,
+      confirm = _ref2.confirm;
+    setSearchText(selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys[0]);
+    confirm === null || confirm === void 0 || confirm();
+  };
+  return {
+    filterDropdown: function filterDropdown(_ref3) {
+      var setSelectedKeys = _ref3.setSelectedKeys,
+        selectedKeys = _ref3.selectedKeys,
+        confirm = _ref3.confirm;
+      return _jsxs("div", {
+        css: style.filterDropdown,
+        children: [_jsx(Input, {
+          ref: function ref(elem) {
+            return currentInput = elem;
+          },
+          placeholder: placeholder,
+          value: selectedKeys[0],
+          onChange: function onChange(e) {
+            return setSelectedKeys(e.target.value ? [e.target.value] : []);
+          },
+          onPressEnter: function onPressEnter() {
+            return handleSearch({
+              selectedKeys: selectedKeys,
+              confirm: confirm
+            });
+          }
+        }), _jsx(Button, {
+          type: "primary",
+          onClick: function onClick() {
+            return handleSearch({
+              selectedKeys: selectedKeys,
+              confirm: confirm
+            });
+          },
+          children: "Search"
+        })]
+      });
+    },
+    filterIcon: function filterIcon(filtered) {
+      return _jsx(SearchOutlined, {
+        style: {
+          color: filtered ? '#108ee9' : '#aaa'
+        }
+      });
+    },
+    onFilter: function onFilter() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return filter.apply(void 0, [column].concat(args));
+    },
+    onFilterDropdownOpenChange: function onFilterDropdownOpenChange(visible) {
+      if (visible) {
+        setTimeout(function () {
+          var _currentInput;
+          return (_currentInput = currentInput) === null || _currentInput === void 0 ? void 0 : _currentInput.focus();
+        }, 30);
+      }
+    },
+    render: function render(text) {
+      return _jsx(HighlightText, {
+        text: text,
+        highlight: searchText,
+        tooltip: false
+      });
+    }
+  };
+}
+function filter(column, searchText, record) {
+  var dataIndex = column.dataIndex,
+    search = column.search;
+  var current = record[dataIndex];
+  if (_.isFunction(search)) {
+    return search({
+      record: record,
+      current: current,
+      filter: searchText
+    });
+  }
+  if (_.isArray(search)) {
+    return search.some(function (key) {
+      return lowercasedContains(record[key], searchText);
+    });
+  }
+  return lowercasedContains(current, searchText);
+}

package/es/table/index.d.ts

@@ -0,0 +1,3 @@
+export * from './component';
+export * from './hook';
+export * from './type';

package/es/table/index.js

@@ -0,0 +1,3 @@
+export * from "./component";
+export * from "./hook";
+export * from "./type";

package/es/table/style/index.d.ts

@@ -0,0 +1,9 @@
+import { TableProps } from "..";
+declare const style: {
+    wrapper: (maxHeight: TableProps['maxHeight']) => import("@emotion/react").SerializedStyles;
+    filterDropdown: import("@emotion/react").SerializedStyles;
+    ellipsisText: (rows: number) => import("@emotion/react").SerializedStyles;
+    editor: import("@emotion/react").SerializedStyles;
+    divider: import("@emotion/react").SerializedStyles;
+};
+export default style;

package/es/table/style/index.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { transformValueWithStyleUnit } from "../../api";
+import { css } from '@emotion/react';
+var style = {
+  wrapper: function wrapper(maxHeight) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n\n    .ant-table-wrapper,\n    .ant-spin-nested-loading,\n    .ant-spin-container,\n    .ant-table,\n    .ant-table-container {\n      width: 100%;\n      max-height: 100%;\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n    }\n\n    .ant-table-content {\n      overflow: auto !important;\n      width: calc(100% + 1px); // \u4FEE\u590D\u7A7A\u6570\u636E\u65F6\uFF0C\u51FA\u73B0\u6EDA\u52A8\u6761\u7684 bug\n      max-height: ", ";\n    }\n\n    .ant-table-thead {\n      position: sticky;\n      top: 0;\n      z-index: 10;\n    }\n\n    .ant-table-pagination.ant-pagination {\n      margin-bottom: 0;\n    }\n  "])), transformValueWithStyleUnit(maxHeight));
+  },
+  filterDropdown: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 8px;\n    border-radius: 6px;\n    background: #fff;\n    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);\n\n    input {\n      width: 130px;\n      margin-right: 8px;\n    }\n  "]))),
+  ellipsisText: function ellipsisText(rows) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    -webkit-line-clamp: ", " !important;\n  "])), rows);
+  },
+  editor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-bottom: 0;\n\n    .ant-form-item-label {\n      display: none !important;\n    }\n  "]))),
+  divider: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: 0;\n  "])))
+};
+export default style;

package/es/table/type/action.d.ts

@@ -0,0 +1,48 @@
+import { FunctionReturn } from "../../api";
+import { ButtonProps } from "../../button";
+import { FormListActionProps, FormListProps } from "../../form";
+import { TableContext } from "..";
+import { ReactNode } from 'react';
+type ButtonType = Omit<ButtonProps & Partial<FormListActionProps> & Pick<FormListProps, 'focusFirstOnAdd'>, 'icon' | 'show' | 'disabled' | 'tooltip' | 'confirm' | 'confirmMessage' | 'onClick'>;
+export interface ActionProps extends ButtonType {
+    /**
+     * @description 图标
+     * @link TableContext: #tablecontext
+     * @style { minWidth: 300 }
+     */
+    icon?: ReactNode | ((props: TableContext) => ReactNode);
+    /**
+     * @description 是否可见
+     * @default true
+     * @link TableContext: #tablecontext
+     */
+    show?: boolean | ((props: TableContext) => boolean);
+    /**
+     * @description 是否禁用
+     * @default false
+     * @link TableContext: #tablecontext
+     */
+    disabled?: boolean | ((props: TableContext) => boolean);
+    /**
+     * @description 提示信息
+     * @link TableContext: #tablecontext
+     */
+    tooltip?: ReactNode | ((props: TableContext) => ReactNode);
+    /**
+     * @description 是否需要确认
+     * @default false
+     * @link TableContext: #tablecontext
+     */
+    confirm?: boolean | ((props: TableContext) => boolean);
+    /**
+     * @description 确认信息
+     * @link TableContext: #tablecontext
+     */
+    confirmMessage?: ReactNode | ((props: TableContext) => ReactNode);
+    /**
+     * @description 点击回调
+     * @link TableContext: #tablecontext
+     */
+    onClick?(props: TableContext): FunctionReturn<void>;
+}
+export {};

package/es/table/type/action.js

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

package/es/table/type/column.d.ts

@@ -0,0 +1,110 @@
+import { FunctionReturn } from "../../api";
+import { FormItemProps } from "../../form";
+import { ActionProps, CommonProps } from "..";
+import { componentMap } from "../component/utils";
+import { ColumnType } from 'antd/lib/table';
+import { ColumnFilterItem, TableRowSelection } from 'antd/lib/table/interface';
+import React, { ReactNode } from 'react';
+type UnionColumnType = Omit<ColumnType<any>, 'ellipsis' | 'filters'> & Omit<TableRowSelection<any>, 'type'>;
+export interface Column extends UnionColumnType {
+    /**
+     * @description 字段名
+     * @default (必选)
+     */
+    dataIndex?: string;
+    /**
+     * @description 列类型
+     */
+    type?: keyof Omit<typeof componentMap, 'default'>;
+    /**
+     * @description 列宽度
+     */
+    width?: string | number;
+    /**
+     * @description 列最小宽度
+     */
+    minWidth?: string | number;
+    /**
+     * @description 列最大宽度
+     */
+    maxWidth?: string | number;
+    /**
+     * @description 最多显示的行数
+     * @default 2
+     */
+    rows?: number;
+    /**
+     * @description 时间类型的 `Format` 格式
+     * @default YYYY-MM-DD hh:mm:ss A
+     */
+    timeFormat?: string;
+    /**
+     * @description 是否禁用
+     * @default false
+     * @link CommonProps: #commonprops
+     */
+    disabled?: boolean | ((props: CommonProps) => boolean);
+    /**
+     * @description 提示信息
+     * @link CommonProps: #commonprops
+     */
+    tooltip?: ReactNode | ((props: CommonProps) => ReactNode);
+    /**
+     * @description 点击时的回调函数
+     * @link CommonProps: #commonprops
+     */
+    onClick?(props: CommonProps): FunctionReturn<any>;
+    /**
+     * @description 是否可搜索
+     * @default false
+     */
+    search?: boolean | string[] | ((props: CustomFilterProps) => boolean);
+    /**
+     * @description 搜索框的占位符
+     * @default Search
+     */
+    placeholder?: string;
+    /**
+     * @description 是否可排序
+     * @default false
+     * @replaceAll boolean | (a, b, sortOrder) => number
+     */
+    sort?: ColumnType<any>['sorter'];
+    /**
+     * @description 筛选菜单项
+     */
+    filters?: Array<React.Key | boolean | ColumnFilterItem>;
+    filterBy?: string[] | ((props: CustomFilterProps) => boolean);
+    /**
+     * @description 操作列配置，具体项见下表
+     * @link ActionProps: #actionbutton
+     */
+    actions?: ActionProps[] | ((props: CommonProps) => ActionProps[]);
+    /**
+     * @description `editor` 的 `props`
+     * @link FormItemProps: /components/form#formitem
+     */
+    editorProps?: FormItemProps | ((props: CommonProps) => FormItemProps);
+    /**
+     * @description 自定义渲染
+     * @link RenderProps: #renderprops
+     */
+    render?: (props: RenderProps) => ReactNode;
+}
+export interface RenderProps extends Pick<CommonProps, 'current' | 'record' | 'index'> {
+    /**
+     * @description 带有 `highlight` 和 `ellipsis` 效果的组件, 一般用于自定义 `Cell` 时使用
+     */
+    component: ReactNode;
+    /**
+     * @description 通过传入的文本，获取 `Highlight` 组件
+     */
+    getHighlight(text?: string): ReactNode;
+}
+export interface CustomFilterProps {
+    current: any;
+    record: any;
+    filter: React.Key | boolean;
+}
+export type GetSearchColumn = (params: Column) => ColumnType<any>;
+export {};

package/es/table/type/column.js

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