doui-react 1.0.0

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

@@ -0,0 +1,19 @@
+import { EllipsisConfig } from 'antd/lib/typography/Base';
+import type { TypographyProps } from 'antd/lib/typography/Typography';
+export interface TextProps extends Omit<TypographyProps<any>, 'onChange'> {
+    /**
+     * @description 最多显示的行数，设置为 `0` 时，不显示省略号
+     * @default 1
+     */
+    rows?: number | false;
+    /**
+     * @description 提示信息
+     * @replaceAll ReactNode | TooltipProps
+     * @link TooltipProps: https://4x.ant.design/components/tooltip-cn/#API
+     */
+    tooltip?: EllipsisConfig['tooltip'];
+    /**
+     * 只有当文本超出时，才显示提示信息，设置为 `false` 时，始终显示提示信息
+     */
+    autoShowTooltip?: boolean;
+}

package/lib/text/type/index.js

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

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

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { getPopupContainer } from "../../api";
+import { TooltipProps } from "..";
+export declare const tooltipOverlayClassName: string;
+export declare function getTooltipProps(props: TooltipProps): {
+    color?: string | undefined;
+    title?: import("react").ReactNode | import("antd/lib/tooltip").RenderFunction;
+    overlay?: import("react").ReactNode | import("antd/lib/tooltip").RenderFunction;
+    style?: import("react").CSSProperties | undefined;
+    className?: string | undefined;
+    placement?: import("antd/lib/tooltip").TooltipPlacement | undefined;
+    builtinPlacements?: import("rc-trigger").BuildInPlacements | undefined;
+    openClassName?: string | undefined;
+    arrowPointAtCenter: boolean;
+    autoAdjustOverflow?: boolean | import("antd/lib/tooltip").AdjustOverflow | undefined;
+    getPopupContainer: typeof getPopupContainer;
+    children?: import("react").ReactNode;
+    visible?: boolean | undefined;
+    open?: boolean | undefined;
+    defaultVisible?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
+    onOpenChange?: ((visible: boolean) => void) | undefined;
+    afterVisibleChange?: ((visible: boolean) => void) | undefined;
+    afterOpenChange?: ((visible: boolean) => void) | undefined;
+    zIndex?: number | undefined;
+    animation?: string | undefined;
+    motion?: import("rc-motion").CSSMotionProps | undefined;
+    id?: string | undefined;
+    prefixCls?: string | undefined;
+    onPopupAlign?: ((element: HTMLElement, align: import("rc-trigger/lib/interface").AlignType) => void) | undefined;
+    trigger?: string | string[] | undefined;
+    transitionName?: string | undefined;
+    overlayStyle?: import("react").CSSProperties | undefined;
+    overlayClassName: string;
+    mouseEnterDelay?: number | undefined;
+    mouseLeaveDelay?: number | undefined;
+    getTooltipContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
+    destroyTooltipOnHide?: boolean | {
+        keepParent?: boolean | undefined;
+    } | undefined;
+    align?: import("rc-trigger/lib/interface").AlignType | undefined;
+    showArrow?: boolean | undefined;
+    arrowContent?: import("react").ReactNode;
+    popupVisible?: boolean | undefined;
+    overlayInnerStyle?: import("react").CSSProperties | undefined;
+};
+export declare function Tooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/tooltip/component/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = Tooltip;
+exports.getTooltipProps = getTooltipProps;
+exports.tooltipOverlayClassName = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _api = require("../../api");
+var _css = require("@emotion/css");
+var _antd = require("antd");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _templateObject;
+var tooltipOverlayClassName = exports.tooltipOverlayClassName = (0, _css.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --tooltip-background-color: #02334a;\n\n  .ant-tooltip-inner {\n    border-radius: 8px;\n    white-space: pre-wrap;\n    line-height: 1.3;\n    background-color: var(--tooltip-background-color);\n  }\n\n  .ant-tooltip-arrow-content {\n    --antd-arrow-background-color: var(--tooltip-background-color);\n  }\n"])));
+function getTooltipProps(props) {
+  return (0, _objectSpread2.default)({
+    overlayClassName: tooltipOverlayClassName,
+    arrowPointAtCenter: true,
+    getPopupContainer: _api.getPopupContainer
+  }, props);
+}
+function Tooltip(props) {
+  var mergedProps = getTooltipProps(props);
+  return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)({}, mergedProps));
+}

package/lib/tooltip/index.d.ts

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

package/lib/tooltip/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/tooltip/type/index.d.ts

@@ -0,0 +1,8 @@
+import { TooltipPropsWithOverlay } from 'antd/lib/tooltip';
+export interface TooltipProps extends TooltipPropsWithOverlay {
+    /**
+     * @description 背景颜色
+     * @default #02334a
+     */
+    color?: string;
+}

package/lib/tooltip/type/index.js

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

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

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

package/lib/tree/component/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tree = Tree;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _stack = require("../../stack");
+var _treeSelect = require("../../tree-select");
+var _reactUse = require("react-use");
+var _style = _interopRequireDefault(require("../style"));
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function Tree(props) {
+  var _useMeasure = (0, _reactUse.useMeasure)(),
+    _useMeasure2 = (0, _slicedToArray2.default)(_useMeasure, 2),
+    ref = _useMeasure2[0],
+    height = _useMeasure2[1].height;
+  return (0, _jsxRuntime.jsx)(_stack.VStack, {
+    refs: ref,
+    css: _style.default.wrapper,
+    children: (0, _jsxRuntime.jsx)(_treeSelect.TreeSelect, (0, _objectSpread2.default)({
+      open: true,
+      getPopupContainer: _utils.getPopupContainer,
+      listHeight: height
+    }, props))
+  });
+}

package/lib/tree/component/utils.d.ts

@@ -0,0 +1 @@
+export declare function getPopupContainer(trigger: HTMLElement): HTMLElement;

package/lib/tree/component/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPopupContainer = getPopupContainer;
+function getPopupContainer(trigger) {
+  return trigger.parentNode;
+}

package/lib/tree/index.d.ts

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

package/lib/tree/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/tree/style/index.d.ts

@@ -0,0 +1,4 @@
+declare const style: {
+    wrapper: import("@emotion/react").SerializedStyles;
+};
+export default style;

package/lib/tree/style/index.js

@@ -0,0 +1,14 @@
+"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 = {
+  wrapper: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: 100%;\n\n    .ant-select-tree,\n    .ant-tree-select-dropdown {\n      background: unset;\n      box-shadow: unset;\n    }\n\n    .ant-select-selector,\n    .ant-select-arrow {\n      opacity: 0 !important;\n      height: 0 !important;\n      border: none !important;\n      padding: 0 !important;\n      overflow: hidden !important;\n\n      ~ div {\n        position: unset !important;\n      }\n    }\n\n    .ant-tree-select-dropdown {\n      position: unset !important;\n      width: 100% !important;\n      min-width: unset !important;\n      padding: 0;\n    }\n  "])))
+};
+var _default = exports.default = style;

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

@@ -0,0 +1,2 @@
+import { TreeSelectProps } from "../../tree-select";
+export type TreeProps = TreeSelectProps;

package/lib/tree/type/index.js

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

package/lib/tree-select/component/index.d.ts

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

package/lib/tree-select/component/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeSelect = TreeSelect;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _antd = require("antd");
+var _useTreeSelect = require("./use-tree-select");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function TreeSelect(props) {
+  var params = (0, _useTreeSelect.useTreeSelect)(props);
+  return (0, _jsxRuntime.jsx)(_antd.TreeSelect, (0, _objectSpread2.default)({
+    maxTagCount: "responsive",
+    fieldNames: {
+      label: 'label',
+      value: 'value',
+      children: 'options'
+    }
+  }, params));
+}

package/lib/tree-select/component/use-tree-select.d.ts

@@ -0,0 +1,2 @@
+import { TreeSelectProps } from "..";
+export declare function useTreeSelect({ presetProcessOption, treeNodeAlign, ...props }: TreeSelectProps): any;

package/lib/tree-select/component/use-tree-select.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeSelect = useTreeSelect;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _checkbox = require("../../checkbox");
+var _useSelect2 = require("../../select/component/use-select");
+var _css = require("@emotion/css");
+var _style = _interopRequireDefault(require("../style"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["presetProcessOption", "treeNodeAlign"],
+  _excluded2 = ["optionFilterProp", "optionLabelProp", "options", "popupClassName", "activeBackgroundColor", "indent", "multiple"];
+function useTreeSelect(_ref) {
+  var presetProcessOption = _ref.presetProcessOption,
+    _ref$treeNodeAlign = _ref.treeNodeAlign,
+    treeNodeAlign = _ref$treeNodeAlign === void 0 ? 'center' : _ref$treeNodeAlign,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useSelect = (0, _useSelect2.useSelect)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      presetProcessOption: processOption
+    })),
+    treeNodeFilterProp = _useSelect.optionFilterProp,
+    treeNodeLabelProp = _useSelect.optionLabelProp,
+    treeData = _useSelect.options,
+    popupClassName = _useSelect.popupClassName,
+    _useSelect$activeBack = _useSelect.activeBackgroundColor,
+    activeBackgroundColor = _useSelect$activeBack === void 0 ? '#e6f7ff' : _useSelect$activeBack,
+    indent = _useSelect.indent,
+    multiple = _useSelect.multiple,
+    params = (0, _objectWithoutProperties2.default)(_useSelect, _excluded2);
+  function processOption(option) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
+      icon: function icon(_ref2) {
+        var checked = _ref2.checked,
+          halfChecked = _ref2.halfChecked,
+          disabled = _ref2.disabled,
+          boxTooltip = _ref2.boxTooltip;
+        return (0, _jsxRuntime.jsx)(_checkbox.Checkbox, {
+          value: checked,
+          indeterminate: halfChecked,
+          disabled: disabled,
+          boxTooltip: boxTooltip
+        });
+      }
+    }, presetProcessOption === null || presetProcessOption === void 0 ? void 0 : presetProcessOption(option));
+  }
+  var classString = _style.default.wrapper({
+    activeBackgroundColor: activeBackgroundColor,
+    indent: indent,
+    switcherIcon: params.switcherIcon,
+    treeNodeAlign: treeNodeAlign
+  });
+  return (0, _objectSpread2.default)({
+    treeNodeFilterProp: treeNodeFilterProp,
+    treeNodeLabelProp: treeNodeLabelProp,
+    treeData: treeData,
+    multiple: multiple,
+    popupClassName: (0, _css.cx)(popupClassName, classString),
+    treeCheckable: multiple,
+    treeExpandAction: multiple ? false : 'click',
+    treeIcon: multiple
+  }, params);
+}

package/lib/tree-select/index.d.ts

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

package/lib/tree-select/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/tree-select/style/index.d.ts

@@ -0,0 +1,5 @@
+import { TreeSelectProps } from "..";
+declare const style: {
+    wrapper: ({ activeBackgroundColor, indent, switcherIcon, treeNodeAlign }: TreeSelectProps) => string;
+};
+export default style;

package/lib/tree-select/style/index.js

@@ -0,0 +1,22 @@
+"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 _api = require("../../api");
+var _style = require("../../stack/style");
+var _css = require("@emotion/css");
+var _templateObject;
+var style = {
+  wrapper: function wrapper(_ref) {
+    var activeBackgroundColor = _ref.activeBackgroundColor,
+      indent = _ref.indent,
+      switcherIcon = _ref.switcherIcon,
+      treeNodeAlign = _ref.treeNodeAlign;
+    return (0, _css.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    span.ant-select-tree-node-content-wrapper {\n      display: flex;\n      align-items: ", ";\n      overflow: hidden;\n\n      &.ant-select-tree-node-selected {\n        background-color: ", ";\n      }\n    }\n\n    .ant-select-tree .ant-select-tree-treenode {\n      &:has(.ant-select-tree-indent-unit) .ant-select-tree-node-content-wrapper {\n        margin-left: ", ";\n      }\n\n      .ant-select-tree-switcher {\n        display: ", ";\n      }\n\n      .ant-select-tree-checkbox {\n        display: none !important;\n      }\n\n      .ant-select-tree-iconEle {\n        width: unset;\n        height: unset;\n        margin-right: 10px;\n      }\n\n      .ant-select-tree-title {\n        min-width: 0;\n        overflow: hidden;\n      }\n    }\n  "])), (0, _style.getAlign)(treeNodeAlign), activeBackgroundColor, (0, _api.transformValueWithStyleUnit)(indent), switcherIcon === false ? 'none' : undefined);
+  }
+};
+var _default = exports.default = style;

package/lib/tree-select/type/index.d.ts

@@ -0,0 +1,23 @@
+import { SelectProps } from "../../select";
+import { HStackProps } from "../../stack";
+import { TreeSelectProps as RCTreeSelectProps } from 'rc-tree-select/lib/TreeSelect';
+type UnionType = Omit<SelectProps, 'fieldNames' | 'onChange' | 'onDeselect' | 'onSelect'> & RCTreeSelectProps;
+/**
+ * @noExtends
+ */
+export interface TreeSelectProps extends UnionType {
+    /**
+     * @description 缩进
+     */
+    indent?: number | string;
+    /**
+     * @description 选中的背景色
+     * @default #e6f7ff
+     */
+    activeBackgroundColor?: string;
+    /**
+     * @default center
+     */
+    treeNodeAlign?: HStackProps['align'];
+}
+export {};

package/lib/tree-select/type/index.js

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

package/lib/virtual-list/component/index.d.ts

@@ -0,0 +1,2 @@
+import { VirtualListProps } from "..";
+export declare function VirtualList({ data, emptyText, children, ...props }: VirtualListProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/virtual-list/component/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VirtualList = VirtualList;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _empty = require("../../empty");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactVirtuoso = require("react-virtuoso");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["data", "emptyText", "children"];
+function VirtualList(_ref) {
+  var data = _ref.data,
+    emptyText = _ref.emptyText,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  if (_lodash.default.isEmpty(data)) {
+    return (0, _jsxRuntime.jsx)("div", {
+      className: props.className,
+      style: props.style,
+      children: (0, _jsxRuntime.jsx)(_empty.Empty, {
+        description: emptyText
+      })
+    });
+  }
+  return (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, (0, _objectSpread2.default)({
+    data: data,
+    itemContent: function itemContent(index, item, context) {
+      return children(item, index, context);
+    }
+  }, props));
+}

package/lib/virtual-list/index.d.ts

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

package/lib/virtual-list/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/virtual-list/type/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { VirtuosoProps } from 'react-virtuoso';
+export interface VirtualListProps extends VirtuosoProps<any, any> {
+    /**
+     * @description 数据
+     */
+    data?: any[];
+    /**
+     * @description 每一项渲染函数
+     */
+    children(item: any, index: number, context: any): ReactNode;
+    /**
+     * @description 空数据时显示的文本
+     * @default No data
+     */
+    emptyText?: ReactNode;
+}

package/lib/virtual-list/type/index.js

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