@zat-design/sisyphus-react 3.0.13 → 3.0.16-beta.4

package/es/ProTreeSelect/index.js

@@ -0,0 +1,426 @@
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import "antd/es/tree-select/style";
+import _TreeSelect from "antd/es/tree-select";
+var _excluded = ["disabled", "code", "dataSource", "defaultDisableValue", "onChange", "useRequest", "updateDataSource", "transformResponse", "fieldNames", "tooltip", "showSearch", "filterTreeNode", "treeNodeFilterProp", "treeDefaultExpandAll", "treeCheckable", "onSearch", "otherProps", "width", "dropdownStyle", "style", "allowClear", "listHeight", "showCodeName"],
+  _excluded2 = ["children"];
+/*
+ *@Date: 2023-05-19 13:31:48
+ *@LastEditTime: 2023-05-19 13:31:48
+ *@Author: liudongliang
+ *@Description: 树选择组件
+*/
+import { useDeepCompareEffect, useRequest as useRequestFunc, useSetState } from 'ahooks';
+import React, { useImperativeHandle, forwardRef } from 'react';
+import { cloneDeep } from 'lodash';
+import { useProConfig } from '@zat-design/sisyphus-react';
+import Container from '../ProForm/components/Container';
+var SHOW_PARENT = _TreeSelect.SHOW_PARENT;
+export var ProTreeSelect = function ProTreeSelect(props, ref) {
+  // 全局属性配置在ConfigProvider
+  var _ref = useProConfig('ProTreeSelect') || {},
+    _ref$fieldNames = _ref.fieldNames,
+    proSelectFieldNames = _ref$fieldNames === void 0 ? {} : _ref$fieldNames;
+  var _useProConfig = useProConfig('ProEnum'),
+    _useProConfig$dics = _useProConfig.dics,
+    dics = _useProConfig$dics === void 0 ? {} : _useProConfig$dics;
+  var label = 'label';
+  var code = 'value';
+  if (proSelectFieldNames && Object.keys(proSelectFieldNames).length) {
+    code = proSelectFieldNames.value;
+    label = proSelectFieldNames.label;
+  }
+  // 配置属性
+  var disabled = props.disabled,
+    enumCode = props.code,
+    dataSource = props.dataSource,
+    defaultDisableValue = props.defaultDisableValue,
+    onChange = props.onChange,
+    useRequest = props.useRequest,
+    updateDataSource = props.updateDataSource,
+    transformResponse = props.transformResponse,
+    fieldNames = props.fieldNames,
+    _props$tooltip = props.tooltip,
+    tooltip = _props$tooltip === void 0 ? false : _props$tooltip,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
+    filterTreeNode = props.filterTreeNode,
+    _props$treeNodeFilter = props.treeNodeFilterProp,
+    treeNodeFilterProp = _props$treeNodeFilter === void 0 ? 'label' : _props$treeNodeFilter,
+    _props$treeDefaultExp = props.treeDefaultExpandAll,
+    treeDefaultExpandAll = _props$treeDefaultExp === void 0 ? true : _props$treeDefaultExp,
+    _props$treeCheckable = props.treeCheckable,
+    treeCheckable = _props$treeCheckable === void 0 ? true : _props$treeCheckable,
+    _onSearch = props.onSearch,
+    otherProps = props.otherProps,
+    width = props.width,
+    dropdownStyle = props.dropdownStyle,
+    style = props.style,
+    allowClear = props.allowClear,
+    listHeight = props.listHeight,
+    showCodeName = props.showCodeName,
+    selectProps = _objectWithoutProperties(props, _excluded);
+  var value = props.value;
+  var _ref2 = otherProps || {},
+    isView = _ref2.isView,
+    viewEmpty = _ref2.viewEmpty;
+  if (fieldNames && Object.keys(fieldNames).length) {
+    code = fieldNames.value || 'value';
+    label = fieldNames.label || 'label';
+  }
+  // 经过处理后的枚举数据，可能来自用户配置的处理函数后返回的结果
+  var _useSetState = useSetState({}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    _useSetState2$ = _useSetState2[0],
+    _useSetState2$$select = _useSetState2$.selectList,
+    selectList = _useSetState2$$select === void 0 ? [] : _useSetState2$$select,
+    _useSetState2$$origDa = _useSetState2$.origDataSource,
+    origDataSource = _useSetState2$$origDa === void 0 ? [] : _useSetState2$$origDa,
+    setState = _useSetState2[1];
+  /**
+   * 如果数据少于10条那么将数据平铺返回
+   * @param dictsEnum 原始数据
+   * @returns 平铺或者原始数据
+   */
+  var countChild = function countChild(dictsEnum) {
+    if (treeCheckable) {
+      return dictsEnum;
+    }
+    var count = 0;
+    var result = [];
+    var loopCount = function loopCount(data) {
+      data.map(function (item) {
+        count += 1;
+        var children = item.children,
+          other = _objectWithoutProperties(item, _excluded2);
+        result.push(_objectSpread({}, other));
+        if (item.children) {
+          loopCount(item.children);
+        }
+        return item;
+      });
+    };
+    if ((dictsEnum === null || dictsEnum === void 0 ? void 0 : dictsEnum.length) > 10) {
+      return dictsEnum;
+    }
+    loopCount(dictsEnum);
+    if (count <= 10) {
+      return result;
+    }
+    return dictsEnum;
+  };
+  /**
+   * 如果要展示code-name，那么将源数据的label转为code-name
+   * @param dataArr 源数据
+   * @param showCodeAndName 是否展示code-name
+   * @returns 转换结果
+   */
+  var transferDataSource = function transferDataSource(dataArr, showCodeAndName) {
+    var copyData = cloneDeep(dataArr);
+    var loop = function loop(arr) {
+      arr.map(function (item) {
+        item[label] = "".concat(item[code], "-").concat(item[label]);
+        if (item.children) {
+          loop(item.children);
+        }
+        return item;
+      });
+    };
+    if (showCodeAndName) {
+      loop(copyData);
+    }
+    return copyData;
+  };
+  // 配置了异步数据源，拉取枚举数据逻辑 如果有code不掉接口从local里根据code取值
+  var fetchFunction = useRequestFunc(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread({
+    manual: true,
+    onSuccess: function onSuccess(data) {
+      // 用户配置了处理枚举函数
+      // console.log('异步加载数据成功', data);
+      if (transformResponse && typeof transformResponse === 'function') {
+        var responseData = transformResponse(data);
+        var resultData = transferDataSource(responseData, showCodeName);
+        setState({
+          selectList: countChild(resultData),
+          origDataSource: resultData
+        });
+      }
+    },
+    debounceWait: 300
+  }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
+  useImperativeHandle(ref, function () {
+    return {
+      useRequestRef: fetchFunction
+    };
+  });
+  useDeepCompareEffect(function () {
+    if (enumCode) {
+      var dictEnum = dics[enumCode] || [];
+      var resultData = transferDataSource(dictEnum, showCodeName);
+      setState({
+        selectList: countChild(resultData),
+        origDataSource: resultData
+      });
+    } else if (dataSource) {
+      var _resultData = transferDataSource(dataSource, showCodeName);
+      setState({
+        selectList: countChild(_resultData),
+        origDataSource: _resultData
+      });
+    }
+  }, [enumCode, dataSource]);
+  useDeepCompareEffect(function () {
+    // code存在，不执行接口请求
+    if (enumCode) {
+      return undefined;
+    }
+    // dataSource存在不执行接口请求
+    if (dataSource) {
+      return undefined;
+    }
+    // disabled 状态时，不查询接口
+    if (defaultDisableValue || !useRequest) {
+      return undefined;
+    }
+    // 如果配置手动加载，不执行请求
+    var _ref3 = (useRequest === null || useRequest === void 0 ? void 0 : useRequest.options) || {},
+      defaultParams = _ref3.defaultParams;
+    // 执行用户配置的枚举服务，拉取枚举数据进行更新
+    fetchFunction.run(defaultParams);
+  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, defaultDisableValue]);
+  // disable默认值
+  if (defaultDisableValue) {
+    return /*#__PURE__*/React.createElement("span", {
+      title: defaultDisableValue
+    }, /*#__PURE__*/React.createElement(_Input, {
+      disabled: true,
+      defaultValue: defaultDisableValue,
+      style: props === null || props === void 0 ? void 0 : props.style
+    }));
+  }
+  /**
+   * 根据值进行回显
+   * @param value 输入值
+   * @returns 对应枚举label
+   */
+  var transToLabel = function transToLabel(value) {
+    if (!Array.isArray(origDataSource) || !origDataSource.length) {
+      return viewEmpty;
+    }
+    var labelResult = [];
+    var queryLabel = function queryLabel(dicts) {
+      return dicts.map(function (item) {
+        if (value.includes(item[code])) {
+          var labelText = item[label];
+          labelResult.push(labelText);
+        }
+        if (item.children) {
+          queryLabel(item.children);
+        }
+        return item;
+      });
+    };
+    queryLabel(origDataSource);
+    return labelResult === null || labelResult === void 0 ? void 0 : labelResult.join('，');
+  };
+  // 纯展示处理
+  if (isView || props.isView) {
+    if (Array.isArray(value)) {
+      return /*#__PURE__*/React.createElement(Container, {
+        tooltip: true,
+        viewEmpty: viewEmpty
+      }, transToLabel(value));
+    }
+    return /*#__PURE__*/React.createElement(Container, {
+      viewEmpty: viewEmpty
+    }, value ? transToLabel([value]) : null);
+  }
+  var Icon = function Icon() {
+    return /*#__PURE__*/React.createElement("svg", {
+      className: "icon",
+      viewBox: "0 0 1433 1024",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      "p-id": "2318",
+      width: "1em",
+      height: "1em"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M209.92 337.2032l362.0864 361.984L1223.68 47.5136l144.7936 144.896-796.4672 796.4672-506.88-506.88z",
+      "p-id": "2319",
+      fill: "currentColor"
+    }));
+  };
+  /**
+   * 自定义渲染子树
+   * @param node 每个节点数据对象
+   * @returns 整个react节点树
+   */
+  var renderTreeNode = function renderTreeNode(node, grade) {
+    var children = node.children,
+      icon = node.icon;
+    var labelText = node[label];
+    var titleHtml = /*#__PURE__*/React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: labelText
+      }
+    });
+    var title = treeCheckable ? titleHtml : /*#__PURE__*/React.createElement("span", {
+      className: "check-option-text"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "check-option-text-content"
+    }, titleHtml), /*#__PURE__*/React.createElement("span", {
+      className: "check-mark-icon"
+    }, /*#__PURE__*/React.createElement(Icon, null)));
+    var value = node[code];
+    if (!children) {
+      return /*#__PURE__*/React.createElement(_TreeSelect.TreeNode, {
+        key: value,
+        value: value,
+        title: title,
+        "attr-data": value,
+        disabled: node.disabled,
+        checkable: node.checkable,
+        icon: icon,
+        className: "node-val-".concat(value)
+      });
+    }
+    var sonGrade = grade + 1;
+    return /*#__PURE__*/React.createElement(_TreeSelect.TreeNode, {
+      key: value,
+      value: value,
+      title: title,
+      "attr-data": value,
+      disabled: node.disabled,
+      checkable: node.checkable,
+      className: "node-val-".concat(value)
+    }, children.map(function (child) {
+      return renderTreeNode(child, sonGrade);
+    }));
+  };
+  /**
+   * 从树形数据中找出用户搜索得数据，并且将搜索字符串高亮标识
+   * @param data 全量树
+   * @param searchStr 搜索字符串
+   * @returns 处理后得树
+   */
+  function filterTree(sourceList, keyWord) {
+    var filterData = function filterData(data) {
+      var currentAllNodeChild = []; // 记录当前节点得所有子节点
+      // 遍历数组
+      for (var i = 0; i < data.length; i++) {
+        var _item$children;
+        var item = data[i];
+        // 一直递归到最后一层子节点
+        var currentNodeChild = []; // 记录当前节点下得子节点匹配到的节点个数
+        if (item.children && item.children.length > 0) {
+          currentNodeChild = filterData(item.children);
+        }
+        // 迭代完子节点向上回溯，如果有匹配到得子节点，那么加入当前节点得孩子对象上,否则加入得是空数组
+        item.children = currentNodeChild;
+        var tag = false;
+        // 判断节点title是否包含关键字 如果有，那么直接进行下一循环
+        if (item[label].indexOf(keyWord) > -1) {
+          var regExp = new RegExp(keyWord);
+          item[label] = item[label].replace(regExp, "<span class=\"highlight-search-text\">".concat(keyWord, "</span>"));
+          tag = true;
+        }
+        if (tag || (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) {
+          // 如果子节点有匹配项或者自己匹配了那么都加入结果中
+          currentAllNodeChild.push(item);
+        }
+      }
+      return currentAllNodeChild;
+    };
+    sourceList = filterData(sourceList);
+    return sourceList;
+  }
+  var searchTreeEvent = function searchTreeEvent(searchVal) {
+    if (!searchVal) {
+      setState({
+        selectList: cloneDeep(origDataSource || [])
+      });
+      return null;
+    }
+    var result = filterTree(cloneDeep(origDataSource || []), searchVal);
+    setState({
+      selectList: result || []
+    });
+  };
+  var handleChange = function handleChange(newVal, option) {
+    onChange && onChange(newVal, option, null);
+    // 重置搜索
+    showSearch && searchTreeEvent('');
+  };
+  /**
+   * 全局点击事件, 如果是单选的情况那么点击选中节点后取消勾选
+   * @param e 事件源
+   */
+  var nodeChangeEvent = function nodeChangeEvent(e) {
+    var el = e.target;
+    var classStr = el.className;
+    if (classStr && !treeCheckable) {
+      var _classStr$split = classStr.split(' '),
+        _classStr$split2 = _slicedToArray(_classStr$split, 1),
+        valStr = _classStr$split2[0];
+      if (valStr && classStr.startsWith('node-val-')) {
+        var choiceVal = valStr.replace('node-val-', '');
+        if (value === choiceVal) {
+          onChange && onChange(undefined, [], null);
+        }
+      }
+    }
+  };
+  // 如果单选情况下只有10条那么设置class控制样式
+  var tenCountClass = '';
+  var countTen = function countTen(enums) {
+    if (!enums) {
+      return '';
+    }
+    var noneChild = true;
+    var loopCount = function loopCount(data) {
+      data.map(function (item) {
+        var _item$children2;
+        if (item === null || item === void 0 ? void 0 : (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) {
+          noneChild = false;
+        }
+        return item;
+      });
+    };
+    loopCount(enums);
+    return noneChild ? 'ten-count-tree-node' : '';
+  };
+  tenCountClass = countTen(selectList);
+  var treeProps = _objectSpread({
+    disabled: disabled,
+    showSearch: showSearch,
+    filterTreeNode: false,
+    treeDefaultExpandAll: treeDefaultExpandAll,
+    treeCheckable: treeCheckable,
+    showCheckedStrategy: SHOW_PARENT,
+    value: value,
+    onChange: handleChange,
+    dropdownStyle: _objectSpread({
+      maxHeight: 320,
+      overflow: 'auto',
+      width: 'auto!important',
+      maxWidth: '580px'
+    }, dropdownStyle),
+    listHeight: listHeight || 320,
+    style: _objectSpread({
+      width: width || '100%'
+    }, style),
+    popupClassName: treeCheckable ? 'checkable-tree' : "".concat(tenCountClass, " signal-tree"),
+    onSearch: searchTreeEvent,
+    allowClear: allowClear || true,
+    showArrow: true
+  }, selectProps);
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: nodeChangeEvent
+  }, /*#__PURE__*/React.createElement(_TreeSelect, _objectSpread({}, treeProps), selectList.map(function (node) {
+    return renderTreeNode(node, 1);
+  })));
+};
+export default /*#__PURE__*/forwardRef(ProTreeSelect);

package/es/ProTreeSelect/propsType.d.ts

@@ -0,0 +1,95 @@
+import React, { ReactNode } from 'react';
+import type { TreeSelectProps } from 'antd';
+import { Service, Options, Result } from 'ahooks/lib/useRequest/src/types';
+import { ProFormOtherProps } from '../ProForm/propsType';
+export interface DataProps {
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    title?: string;
+}
+export interface DataOption {
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    children?: DataProps[];
+    title?: string;
+    [key: string]: any;
+}
+export interface BaseOptionType {
+    disabled?: boolean;
+    checkable?: boolean;
+    disableCheckbox?: boolean;
+    children?: BaseOptionType[];
+    [name: string]: any;
+}
+export interface DefaultOptionType extends BaseOptionType {
+    value?: any;
+    title?: React.ReactNode;
+    label: React.ReactNode;
+    key?: React.Key;
+    children?: DefaultOptionType[];
+}
+export interface PropTreeSelectProps extends Omit<TreeSelectProps, 'onSearch'> {
+    /** 是否查看模式 */
+    isView?: boolean;
+    /** 是否根据输入项进行筛选, 默认true */
+    filterTreeNode?: boolean;
+    /** 输入项过滤对应的 treeNode 属性, 默认label */
+    treeNodeFilterProp?: string;
+    /** 是否展开所有树 */
+    treeDefaultExpandAll?: boolean;
+    /** 是否支持复选、多选,默认多选 */
+    treeCheckable?: boolean;
+    /** 输入框宽度，默认100% */
+    width?: any;
+    /** 枚举code-从localStorage里面根据次code取枚举值 */
+    code?: string;
+    /** 数据源 */
+    dataSource?: DataOption[];
+    /** 兼容 2.0 版本、3.0 使用view 模式 */
+    defaultDisableValue?: string;
+    /** 兼容 2.0 版本、3.0 使用 transformResponse */
+    updateDataSource?: (data: any, setSelectList: any) => void;
+    /** 格式化数据 */
+    transformResponse?: (data: any) => DataOption[];
+    /** 是否展示 tooltip、当 label 特别长的时候使用 */
+    tooltip?: boolean;
+    /** 是否展示 code-label 形式 */
+    showCodeName?: boolean;
+    /** 集成表单 form 的属性 */
+    otherProps?: ProFormOtherProps;
+    onSearch?: (value: string, useRequest: Result<any, any>) => void;
+    /** 自定义展示 */
+    optionRender?: (value: DataOption) => string | ReactNode;
+    /** 远程请求接口 */
+    useRequest?: {
+        service: Service<any, any>;
+        options?: Options<any, any>;
+    };
+}
+export interface ProSelectAction {
+    /** 实例方法、根据 code ｜ code[] 批量获取数据 */
+    getValueObject?: (code: string | string[], key?: string) => any;
+    /** 获取发生请求的 useRequest 的 ref */
+    useRequestRef: Result<any, any>;
+}
+export interface TreeNodeData extends DataOption {
+    title: string;
+    value: string;
+    children?: TreeNodeData[];
+    icon?: React.ReactNode;
+}
+export interface TreeSelectFormProps {
+    type: string;
+    label: string;
+    name?: string;
+    fieldProps?: PropTreeSelectProps;
+    [key: string]: any;
+}

package/es/ProTreeSelect/propsType.js

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

package/es/ProTreeSelect/style/index.less

@@ -0,0 +1,109 @@
+
+.ant-select-selector{
+    // 单选树选择结果框里title不用待后缀
+    .check-mark-icon{
+        display: none;
+    }
+}
+.ant-select.ant-select-single.ant-select-show-arrow{
+    &.ant-select-open{
+        .ant-select-arrow{
+            transition: transform 300ms ease-in-out;
+            transform: rotate(180deg);
+        }
+    }
+}
+.ant-select-dropdown{
+    .highlight-search-text{
+        color: @zaui-brand;
+    }
+    .ant-select-tree-list-holder-inner{
+        position: relative!important;
+    }
+    &.ant-tree-select-dropdown{
+        width: auto!important;
+        padding: 0px;
+    }
+    &.singal-tree,&.checkable-tree{
+        .ant-select-tree{
+            .ant-select-tree-treenode{
+                padding-top: 5px;
+                padding-bottom: 5px;
+            }
+        }
+        .highlight{
+            color: red;
+        }
+    }
+    // 单选
+    &.signal-tree{
+        .ant-select-tree{
+            .ant-select-tree-treenode{
+                position: relative;
+                padding-right: 50px;
+                padding-left: 7px;
+                z-index: 1;
+                &:after{
+                    content: '';
+                    display: none;
+                    position: absolute;
+                    z-index: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background-color: @zaui-brand;
+                    opacity: 0.1;
+                }
+                &.ant-select-tree-treenode-selected:after{
+                    display: block;
+                }
+            }
+            .ant-select-tree-node-content-wrapper{
+                background-color: transparent;
+                &.ant-select-tree-node-selected{
+                    .check-mark-icon{
+                        display: block;
+                    }
+                }
+            }
+            .ant-select-tree-treenode:hover{
+                background-color: #f5f5f5;
+            }
+            .check-option-text{
+                .check-mark-icon{
+                    position: absolute;
+                    right: -34px;
+                    top: 2px;
+                    display: none;
+                    color: @zaui-list-item-selected-bg;
+                }
+            }
+        }
+    }
+    // 复选
+    &.checkable-tree{
+        .ant-select-tree{
+            .ant-select-tree-treenode{
+                padding-left: 7px;
+            }
+            .ant-select-tree-treenode:hover{
+                background-color: #f5f5f5;
+            }
+            .ant-select-tree-node-content-wrapper{
+                padding-right: 16px;
+            }
+            .ant-select-tree-node-content-wrapper:hover{
+                background-color: transparent;
+            }
+            .ant-select-tree-checkbox{
+                margin-top: 0px;
+            }
+        }
+    }
+    // 数据小于10条
+    &.ten-count-tree-node{
+        .ant-select-tree-switcher-noop{
+            width: 4px;
+        }
+    }
+}

package/es/ProUpload/Example.js

@@ -7,7 +7,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * @Description:
  */
 import React, { useState } from 'react';
-import { ProDrawerForm } from 'zat-design-pro-component';
+import { ProDrawerForm } from '@zat-design/sisyphus-react';
 export var Example = function Example(props) {
   var content = props.content,
     className = props.className;

package/es/ProUpload/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { ProUploadProps } from './propsType';
-import './style/index.less';
 declare const ProUpload: React.FC<ProUploadProps>;
 export default ProUpload;

package/es/ProUpload/index.js

@@ -8,7 +8,14 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import "antd/es/upload/style";
-import _Upload from "antd/es/upload";
+import _Upload from "antd/es/upload"; // @ts-noCheck
+/*
+ * @Author: wangshengqiang
+ * @Date: 2023-02-03 14:18:59
+ * @LastEditTime: 2023-04-25 11:57:13
+ * @LastEditors: wangshengqiang
+ * @Description: 上传控件
+ */
 var _excluded = ["value", "size", "action", "maxCount", "headerRender", "footerRender", "disabled", "uploadType", "buttonProps", "accept", "extraTipText", "beforeUpload", "onChange", "onDownload", "onPreview", "onRemove", "method", "className", "dataParams", "showExampleContent", "otherProps", "transformResponse"];
 import React, { useEffect, useRef, useState } from 'react';
 import { CloudUploadOutlined, PlusOutlined } from '@ant-design/icons';
@@ -18,7 +25,6 @@ import { Example } from './Example';
 import lookSvg from './style/look.svg';
 import deleteSvg from './style/delete.svg';
 import downloadSvg from './style/download.svg';
-import './style/index.less';
 var validateSize = function validateSize(size, file) {
   if (size !== undefined) {
     return file.size <= size * 1024 * 1024;

package/es/ProUpload/style/fileItem.less

@@ -42,6 +42,7 @@
       overflow: hidden;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
+      word-break: keep-all;
     }
     .file-name.file-name-pf0 {
       padding-left: 0;
@@ -120,10 +121,11 @@
     }
     .file-name {
       display: -webkit-box;
-      padding-left: 32px;
+      padding-left: 8px;
       overflow: hidden;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
+      word-break: keep-all;
     }
     .file-name.file-name-pf0 {
       padding-left: 0;