doui-react 1.0.0

package/lib/stack/type/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/switch/component/index.d.ts

@@ -0,0 +1,2 @@
+import { SwitchProps } from '../type';
+export declare function Switch({ tooltip, ...props }: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/switch/component/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = Switch;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _hooks = require("../../hooks");
+var _text = require("../../text");
+var _tooltip = require("../../tooltip");
+var _css = require("@emotion/css");
+var _antd = require("antd");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _style = _interopRequireDefault(require("../style"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["value", "disabled", "checkedColor", "unCheckedColor", "refs"],
+  _excluded2 = ["tooltip"];
+/**
+ * 1. 单独抽离 SwitchComponent，修复切换 Switch 时，无动画的问题
+ * 2. disabled 时，无法显示 Tooltip，需要自行处理该场景
+ * 3. 支持 checkedColor 和 unCheckedColor 自定义颜色
+ */
+function SwitchComponent(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    checkedColor = _ref.checkedColor,
+    unCheckedColor = _ref.unCheckedColor,
+    refs = _ref.refs,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useLoading = (0, _hooks.useLoading)(props.onChange),
+    _useLoading2 = (0, _slicedToArray2.default)(_useLoading, 2),
+    loading = _useLoading2[0],
+    onChange = _useLoading2[1];
+  var className = (0, _css.cx)({
+    'ant-switch-disabled': disabled
+  }, props.className);
+  function handleChange(checked) {
+    !disabled && onChange(checked);
+  }
+  return (0, _jsxRuntime.jsx)(_antd.Switch, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    ref: refs,
+    loading: loading,
+    css: _style.default.backgroundColor({
+      value: value,
+      checkedColor: checkedColor,
+      unCheckedColor: unCheckedColor
+    })
+  }, props), {}, {
+    className: className,
+    checked: value,
+    onChange: handleChange
+  }));
+}
+function Switch(_ref2) {
+  var tooltip = _ref2.tooltip,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  if (_lodash.default.isNil(tooltip)) {
+    return (0, _jsxRuntime.jsx)(SwitchComponent, (0, _objectSpread2.default)({}, props));
+  }
+  var tooltipProps = (0, _text.generateTooltip)(tooltip);
+  return (0, _jsxRuntime.jsx)(_tooltip.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tooltipProps), {}, {
+    children: (0, _jsxRuntime.jsx)(SwitchComponent, (0, _objectSpread2.default)({}, props))
+  }));
+}

package/lib/switch/index.d.ts

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

package/lib/switch/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _component = require("./component");
+Object.keys(_component).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _component[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _component[key];
+    }
+  });
+});
+var _type = require("./type");
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _type[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _type[key];
+    }
+  });
+});

package/lib/switch/style/index.d.ts

@@ -0,0 +1,5 @@
+import { SwitchProps } from '../type';
+declare const style: {
+    backgroundColor: ({ value, checkedColor, unCheckedColor }: SwitchProps) => import("@emotion/react").SerializedStyles;
+};
+export default style;

package/lib/switch/style/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+var style = {
+  backgroundColor: function backgroundColor(_ref) {
+    var value = _ref.value,
+      checkedColor = _ref.checkedColor,
+      unCheckedColor = _ref.unCheckedColor;
+    var color = value ? checkedColor : unCheckedColor;
+    return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      background-color: ", ";\n    "])), color);
+  }
+};
+var _default = exports.default = style;

package/lib/switch/type/index.d.ts

@@ -0,0 +1,27 @@
+import { BaseComponentProps, FunctionReturn } from "../../api";
+import { SwitchProps as AntdSwitchProps } from 'antd/lib/switch';
+import { EllipsisConfig } from 'antd/lib/typography/Base';
+export interface SwitchProps extends AntdSwitchProps, BaseComponentProps {
+    /**
+     * @description 提示信息
+     * @replaceAll ReactNode | TooltipProps
+     * @link TooltipProps: https://4x.ant.design/components/tooltip-cn/#API
+     */
+    tooltip?: EllipsisConfig['tooltip'];
+    /**
+     * @description 当前值
+     */
+    value?: boolean;
+    /**
+     * @description 选中颜色
+     */
+    checkedColor?: string;
+    /**
+     * @description 未选中颜色
+     */
+    unCheckedColor?: string;
+    /**
+     * @description 点击时的回调函数
+     */
+    onChange?: (value: boolean) => FunctionReturn<void>;
+}

package/lib/switch/type/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/table/component/action-button.d.ts

@@ -0,0 +1,2 @@
+import { ActionProps } from "..";
+export declare function ActionButton({ operation: operationType, defaultValue, insertIndex, index, from, to, focusFirstOnAdd, ...props }: ActionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/table/component/action-button.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionButton = ActionButton;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _api = require("../../api");
+var _button = require("../../button");
+var _form = require("../../form");
+var _utils = require("../../form/component/utils");
+var _hooks = require("../../hooks");
+var _2 = require("./..");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["operation", "defaultValue", "insertIndex", "index", "from", "to", "focusFirstOnAdd"];
+function generateAction(action, params) {
+  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, action), {}, {
+    icon: (0, _api.executeFunction)(action.icon, params),
+    show: (0, _api.executeFunction)(action.show, params),
+    disabled: (0, _api.executeFunction)(action.disabled, params),
+    tooltip: (0, _api.executeFunction)(action.tooltip, params),
+    confirm: (0, _api.executeFunction)(action.confirm, params),
+    confirmMessage: (0, _api.executeFunction)(action.confirmMessage, params),
+    onClick: function onClick() {
+      var _action$onClick;
+      return (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action, params);
+    }
+  });
+}
+function getDefaultValue() {
+  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var rowKey = arguments.length > 1 ? arguments[1] : undefined;
+  var defaultKey = _lodash.default.get(defaultValue, rowKey, (0, _api.uuid)());
+  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, defaultValue), {}, (0, _defineProperty2.default)({}, rowKey, defaultKey));
+}
+function ActionButton(_ref) {
+  var operationType = _ref.operation,
+    defaultValue = _ref.defaultValue,
+    insertIndex = _ref.insertIndex,
+    index = _ref.index,
+    _ref$from = _ref.from,
+    from = _ref$from === void 0 ? 0 : _ref$from,
+    _ref$to = _ref.to,
+    to = _ref$to === void 0 ? 0 : _ref$to,
+    focusFirstOnAdd = _ref.focusFirstOnAdd,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useFormContext = (0, _form.useFormContext)(),
+    form = _useFormContext.form;
+  var context = (0, _2.useTableContext)();
+  var action = generateAction(props, context);
+  if (operationType) {
+    var rowKey = context.rowKey,
+      dataSource = context.dataSource,
+      operation = context.operation,
+      editorValueKey = context.editorValueKey;
+    var propsMap = {
+      add: {
+        onClick: function onClick() {
+          var value = getDefaultValue(defaultValue, rowKey);
+          operation.add(value, insertIndex);
+          return (0, _utils.scrollToFieldOnAdd)({
+            form: form,
+            name: editorValueKey,
+            insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : dataSource.length,
+            focusFirstOnAdd: focusFirstOnAdd
+          });
+        }
+      },
+      remove: {
+        onClick: function onClick() {
+          return operation.remove(index);
+        }
+      },
+      moveUp: {
+        onClick: function onClick() {
+          return operation.moveUp(index);
+        },
+        disabled: !(0, _hooks.isValidMoveUpAction)(index)
+      },
+      moveDown: {
+        onClick: function onClick() {
+          return operation.moveDown(index);
+        },
+        disabled: !(0, _hooks.isValidMoveDownAction)(index, dataSource)
+      },
+      move: {
+        onClick: function onClick() {
+          return operation.move(from, to);
+        },
+        disabled: !(0, _hooks.isValidMoveAction)(from, to, dataSource)
+      }
+    };
+    var operationProps = propsMap[operationType];
+    var mergedProps = (0, _api.mergeProps)(operationProps, action);
+    return (0, _jsxRuntime.jsx)(_button.Button, (0, _objectSpread3.default)({}, mergedProps));
+  }
+  return (0, _jsxRuntime.jsx)(_button.Button, (0, _objectSpread3.default)({}, action));
+}

package/lib/table/component/actions.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from './wrapper';
+export declare function Actions({ column, children, ...props }: ComponentProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/table/component/actions.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Actions = Actions;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _2 = require("./..");
+var _antd = require("antd");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _style = _interopRequireDefault(require("../style"));
+var _actionButton = require("./action-button");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["column", "children"];
+function Actions(_ref) {
+  var column = _ref.column,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var context = (0, _2.useTableContext)();
+  var params = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), context);
+  var items = (0, _api.executeFunction)(column.actions, params);
+  var showItems = _lodash.default.filter(items, function (item) {
+    return (0, _api.executeFunction)(item.show, params) !== false;
+  });
+  return (0, _jsxRuntime.jsx)(_antd.Space, {
+    split: (0, _jsxRuntime.jsx)(_antd.Divider, {
+      type: "vertical",
+      css: _style.default.divider
+    }),
+    size: 0,
+    children: showItems.map(function (item, index) {
+      return (0, _jsxRuntime.jsx)(_actionButton.ActionButton, (0, _objectSpread2.default)({
+        type: "link",
+        loading: false,
+        index: params.index
+      }, item), index);
+    })
+  });
+}

package/lib/table/component/constant.d.ts

@@ -0,0 +1 @@
+export declare const formPropsKeysInTable: string[];

package/lib/table/component/constant.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formPropsKeysInTable = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _constant = require("../../open-modal/component/constant");
+var formPropsKeys = _lodash.default.without(_constant.formPropsKeys, 'children', 'footer', 'initialContext', 'size', 'loading');
+var formPropsKeysInTable = exports.formPropsKeysInTable = [].concat((0, _toConsumableArray2.default)(formPropsKeys), ['className', 'style']);

package/lib/table/component/editor.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from './wrapper';
+export declare function Editor({ column, current, record, index }: ComponentProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/table/component/editor.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Editor = Editor;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _api = require("../../api");
+var _form = require("../../form");
+var _ = require("./..");
+var _style = _interopRequireDefault(require("../style"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function Editor(_ref) {
+  var column = _ref.column,
+    current = _ref.current,
+    record = _ref.record,
+    index = _ref.index;
+  var dataIndex = column.dataIndex,
+    editorProps = column.editorProps,
+    title = column.title;
+  var context = (0, _.useTableContext)();
+  var name = "".concat(context.editorValueKey, ".").concat(index, ".").concat(dataIndex);
+  var params = (0, _objectSpread2.default)({
+    current: current,
+    record: record,
+    index: index
+  }, context);
+  var props = (0, _api.executeFunction)(editorProps, params);
+  return (
+    // @ts-ignore 占位的作用
+    (0, _jsxRuntime.jsx)(_form.FormListProvider, {
+      children: (0, _jsxRuntime.jsx)(_form.Form.FormItem, (0, _objectSpread2.default)({
+        label: title,
+        name: name,
+        css: _style.default.editor,
+        initialValue: current,
+        isListField: true
+      }, props))
+    })
+  );
+}

package/lib/table/component/filter.d.ts

@@ -0,0 +1,3 @@
+import { Column } from "..";
+import { ColumnType } from 'antd/lib/table';
+export declare function getFilterColumn(column: Column): ColumnType<any>;

package/lib/table/component/filter.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFilterColumn = getFilterColumn;
+var _api = require("../../api");
+var _icons = require("@ant-design/icons");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function getFilterColumn(column) {
+  var filters = generateFilters(column);
+  return {
+    filters: filters,
+    // filterDropdown: (props: FilterDropdownProps) => <Filter {...props} filters={filters} />,
+    filterIcon: function filterIcon(filtered) {
+      return (0, _jsxRuntime.jsx)(_icons.FilterOutlined, {
+        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));
+    }
+  };
+}
+function generateFilters(_ref) {
+  var filters = _ref.filters;
+  return _lodash.default.map(filters, function (filter) {
+    if (_lodash.default.isObject(filter)) {
+      return filter;
+    }
+    return {
+      text: filter,
+      value: filter
+    };
+  });
+}
+function filter(column, search, record) {
+  var _column$dataIndex = column.dataIndex,
+    dataIndex = _column$dataIndex === void 0 ? '' : _column$dataIndex,
+    filterBy = column.filterBy;
+  var current = record[dataIndex];
+  if (_lodash.default.isFunction(filterBy)) {
+    return filterBy({
+      record: record,
+      current: current,
+      filter: search
+    });
+  }
+  if (_lodash.default.isArray(filterBy)) {
+    return filterBy.some(function (key) {
+      return record[key] === search;
+    });
+  }
+  return (0, _api.includesNonStrictMode)([current], search);
+}

package/lib/table/component/index.d.ts

@@ -0,0 +1,7 @@
+import { ActionButton } from './action-button';
+import { Table as InternalTable } from './table';
+type TableType = typeof InternalTable & {
+    ActionButton: typeof ActionButton;
+};
+export declare const Table: TableType;
+export {};

package/lib/table/component/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+var _actionButton = require("./action-button");
+var _table = require("./table");
+var Table = exports.Table = _table.Table;
+Table.ActionButton = _actionButton.ActionButton;

package/lib/table/component/link.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from './wrapper';
+export declare function Link({ column, children, ...props }: ComponentProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/table/component/link.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = Link;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _ = require("./..");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["column", "children"];
+function Link(_ref) {
+  var column = _ref.column,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var context = (0, _.useTableContext)();
+  var params = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), context);
+  return (0, _jsxRuntime.jsx)("a", {
+    onClick: function onClick(e) {
+      var _column$onClick;
+      e.preventDefault();
+      (_column$onClick = column.onClick) === null || _column$onClick === void 0 || _column$onClick.call(column, params);
+    },
+    children: children
+  });
+}

package/lib/table/component/sort.d.ts

@@ -0,0 +1,6 @@
+import { Column } from '../type';
+export declare function getSortColumn({ dataIndex, sort }: Column): {
+    sorter: import("antd/lib/table/interface").CompareFn<any>;
+} | {
+    sorter: (a: any, b: any) => any;
+};

package/lib/table/component/sort.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortColumn = getSortColumn;
+var _api = require("../../api");
+var _lodash = _interopRequireDefault(require("lodash"));
+function getSortColumn(_ref) {
+  var _ref$dataIndex = _ref.dataIndex,
+    dataIndex = _ref$dataIndex === void 0 ? '' : _ref$dataIndex,
+    sort = _ref.sort;
+  if (_lodash.default.isFunction(sort)) {
+    return {
+      sorter: sort
+    };
+  }
+  return {
+    sorter: function sorter(a, b) {
+      return (0, _api.sorter)(a[dataIndex], b[dataIndex]);
+    }
+  };
+}

package/lib/table/component/switch.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from './wrapper';
+export declare function Switch({ column, children, ...props }: ComponentProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/table/component/switch.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = Switch;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _switch = require("../../switch");
+var _ = require("./..");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["column", "children"];
+function Switch(_ref) {
+  var column = _ref.column,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var disabled = column.disabled,
+    tooltip = column.tooltip,
+    onClick = column.onClick;
+  var context = (0, _.useTableContext)();
+  var params = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), context);
+  return (0, _jsxRuntime.jsx)(_switch.Switch, {
+    value: children,
+    onChange: function onChange(value) {
+      return onClick === null || onClick === void 0 ? void 0 : onClick((0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), {}, {
+        current: value
+      }));
+    },
+    disabled: (0, _api.executeFunction)(disabled, params),
+    tooltip: (0, _api.executeFunction)(tooltip, params)
+  });
+}

package/lib/table/component/table-body.d.ts

@@ -0,0 +1,6 @@
+import { DataSource, TableProps } from "..";
+interface TableBodyProps extends TableProps {
+    dataSource: DataSource;
+}
+export declare function TableBody({ children, footer, autoCollectFormValue, ...props }: TableBodyProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};