@pointcloud/pcloud-components 0.1.20 → 0.1.23

package/dist/esm/DSelect/index.js

@@ -2,17 +2,33 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "popupClassName", "fieldNames", "searchValue", "filterOption", "options", "onSearch", "loading", "debounce"];
-/*
- * @Author       : wangfeihu
- * @Date         : 2023-05-17 08:41:25
- * @LastEditors  : wangfeihu
- * @LastEditTime : 2023-07-11 15:44:04
- * @Description  : 基于antd的Select组件
- */
 import React, { forwardRef, useEffect, useRef, useState, useMemo, useContext } from 'react';
 import { Select } from 'antd';
 import { ConfigContext } from "../ConfigProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 获取延时时间，默认800ms，true代表默认时间,false代表0
+function getDelayTime(value) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 800;
+  if (value === true) {
+    return defaultValue;
+  } else if (value === false) {
+    return 0;
+  } else {
+    return typeof value === 'number' ? Number(value) || 0 : defaultValue;
+  }
+}
+
+// 获取默认本地搜索方法
+function getFilterOption(showSearch, filterOption, fieldNames) {
+  if (filterOption) {
+    return filterOption;
+  } else {
+    return showSearch && function (value, option) {
+      var _option$fieldNames$la;
+      return (_option$fieldNames$la = option[fieldNames.label]) === null || _option$fieldNames$la === void 0 ? void 0 : _option$fieldNames$la.includes(value);
+    };
+  }
+}
 function InternalSelect(props, ref) {
   var _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
@@ -57,29 +73,19 @@ function InternalSelect(props, ref) {
   var _loading = typeof initLoading === 'boolean' ? initLoading : loading;
   var _filterOption = getFilterOption(!_showSearch, filterOption, _fieldNames);
   var getOptions = useMemo(function () {
-    return typeof initOptions === 'function' ? initOptions : function (params) {
+    return typeof initOptions === 'function' ? initOptions : function () {
       return Promise.resolve(initOptions || []);
     };
   }, [initOptions]);
-  var _onSearch = function _onSearch(value) {
-    if (onSearch) {
-      if (_debounce > 0) {
-        clearTimeout(debounceRef.current);
-        debounceRef.current = setTimeout(function () {
-          updateOptions(onSearch, value);
-        }, _debounce);
-      } else {
-        updateOptions(onSearch, value);
-      }
-    }
-  };
   var updateOptions = function updateOptions(fun, value) {
     // 设置加载中状态
     if (_loadingState > 0) {
       loadingRef.current.status = 'loading';
       clearTimeout(loadingRef.current.timer);
       loadingRef.current.timer = setTimeout(function () {
-        loadingRef.current.status === 'loading' && setLoading(true);
+        if (loadingRef.current.status === 'loading') {
+          setLoading(true);
+        }
       }, _loadingState);
     }
 
@@ -88,7 +94,7 @@ function InternalSelect(props, ref) {
     setOptions([]);
 
     // 发起请求
-    fun === null || fun === void 0 ? void 0 : fun(value).then(function (response) {
+    fun === null || fun === void 0 || fun(value).then(function (response) {
       if (loadingParamsRef.current === value) {
         setOptions(response);
         setLoading(false);
@@ -101,6 +107,18 @@ function InternalSelect(props, ref) {
       }
     });
   };
+  var _onSearch = function _onSearch(value) {
+    if (onSearch) {
+      if (_debounce > 0) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(function () {
+          updateOptions(onSearch, value);
+        }, _debounce);
+      } else {
+        updateOptions(onSearch, value);
+      }
+    }
+  };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(function () {
@@ -121,29 +139,5 @@ function InternalSelect(props, ref) {
     options: options
   }));
 }
-
-// 获取延时时间，默认800ms，true代表默认时间,false代表0
-function getDelayTime(value) {
-  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 800;
-  if (value === true) {
-    return defaultValue;
-  } else if (value === false) {
-    return 0;
-  } else {
-    return typeof value === 'number' ? Number(value) || 0 : defaultValue;
-  }
-}
-
-// 获取默认本地搜索方法
-function getFilterOption(showSearch, filterOption, fieldNames) {
-  if (filterOption) {
-    return filterOption;
-  } else {
-    return showSearch && function (value, option) {
-      var _option$fieldNames$la;
-      return (_option$fieldNames$la = option[fieldNames.label]) === null || _option$fieldNames$la === void 0 ? void 0 : _option$fieldNames$la.includes(value);
-    };
-  }
-}
 var DSelect = /*#__PURE__*/forwardRef(InternalSelect);
 export default DSelect;

package/dist/esm/DTable/index.js

@@ -162,8 +162,8 @@ function InternalTable(props, ref) {
           loading: false
         }));
         if (showErrorMsg) {
-          var _err$response, _err$response$data;
-          var errMsg = (err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.msg) || (err === null || err === void 0 ? void 0 : err.msg) || (err === null || err === void 0 ? void 0 : err.message);
+          var _err$response;
+          var errMsg = (err === null || err === void 0 || (_err$response = err.response) === null || _err$response === void 0 || (_err$response = _err$response.data) === null || _err$response === void 0 ? void 0 : _err$response.msg) || (err === null || err === void 0 ? void 0 : err.msg) || (err === null || err === void 0 ? void 0 : err.message);
           message.error(typeof showErrorMsg === 'function' ? showErrorMsg(err) : "\u6570\u636E\u52A0\u8F7D\u5F02\u5E38\uFF1A".concat(errMsg));
         } else {
           throw err;

package/dist/esm/DTable/index.less

@@ -1,71 +1,71 @@
-@import '../commonStyle/index.less';
-
-.@{prefix}-table {
-  .ant-spin-nested-loading,
-  .ant-spin-container,
-  .ant-table-container,
-  .ant-table {
-    width: 100%;
-    height: 100%;
-  }
-
-  // 隐藏表头最后一个滚动样式单元格
-  // .ant-table-thead .ant-table-cell-scrollbar {
-  //     position: absolute;
-  //     top: -1px;
-  //     border: none;
-  //     box-shadow: none;
-  //     background-color: #2e404d;
-  // }
-
-  .ant-table-body {
-    position: absolute;
-    overflow-y: auto !important;
-    min-width: 100%;
-    max-width: 100%;
-    min-height: calc(100% - 56px);
-    max-height: calc(100% - 56px);
-
-    // 表内单元格不省略
-    .ant-table-tbody > tr > td.ant-table-cell.d-table-cell-wrap {
-      white-space: initial;
-    }
-
-    // x轨道的宽度和y轨道的高度
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 8px;
-    }
-
-    // 轨道拖动部分的背景颜色
-    &::-webkit-scrollbar-thumb {
-      background-color: #0084ff;
-    }
-
-    // 轨道背景颜色
-    &::-webkit-scrollbar-track {
-      background-color: #f1f1f1;
-      border-radius: 2px;
-    }
-
-    // x、y两条轨道的交叉处
-    &::-webkit-scrollbar-corner {
-      background-color: #f1f1f1;
-    }
-  }
-
-  .ant-spin-nested-loading > div > .ant-spin {
-    max-height: initial;
-  }
-
-  .ant-pagination-total-text span {
-    color: #40a9ff;
-    font-weight: bold;
-  }
-
-  &.height-on-page {
-    .ant-table {
-      height: calc(100% - 56px);
-    }
-  }
-}
+@import '../commonStyle/index.less';
+
+.@{prefix}-table {
+  .ant-spin-nested-loading,
+  .ant-spin-container,
+  .ant-table-container,
+  .ant-table {
+    width: 100%;
+    height: 100%;
+  }
+
+  // 隐藏表头最后一个滚动样式单元格
+  // .ant-table-thead .ant-table-cell-scrollbar {
+  //     position: absolute;
+  //     top: -1px;
+  //     border: none;
+  //     box-shadow: none;
+  //     background-color: #2e404d;
+  // }
+
+  .ant-table-body {
+    position: absolute;
+    overflow-y: auto !important;
+    min-width: 100%;
+    max-width: 100%;
+    min-height: calc(100% - 56px);
+    max-height: calc(100% - 56px);
+
+    // 表内单元格不省略
+    .ant-table-tbody > tr > td.ant-table-cell.d-table-cell-wrap {
+      white-space: initial;
+    }
+
+    // x轨道的宽度和y轨道的高度
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 8px;
+    }
+
+    // 轨道拖动部分的背景颜色
+    &::-webkit-scrollbar-thumb {
+      background-color: #0084ff;
+    }
+
+    // 轨道背景颜色
+    &::-webkit-scrollbar-track {
+      background-color: #f1f1f1;
+      border-radius: 2px;
+    }
+
+    // x、y两条轨道的交叉处
+    &::-webkit-scrollbar-corner {
+      background-color: #f1f1f1;
+    }
+  }
+
+  .ant-spin-nested-loading > div > .ant-spin {
+    max-height: initial;
+  }
+
+  .ant-pagination-total-text span {
+    color: #40a9ff;
+    font-weight: bold;
+  }
+
+  &.height-on-page {
+    .ant-table {
+      height: calc(100% - 56px);
+    }
+  }
+}

package/dist/esm/DTreeSelect/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { TreeSelectProps } from 'antd';
 import { DefaultOptionType } from 'antd/lib/select';
-import { BaseSelectRef } from 'rc-select/lib/BaseSelect';
 import './index.less';
 export declare type DTreeSelectProps = Omit<TreeSelectProps, 'treeData' | 'loadData' | 'loading'> & {
     /** antd的treeData属性，可以是一个treeData数组，或一个返回等价treeData数组的promise */
@@ -13,14 +12,5 @@ export declare type DTreeSelectProps = Omit<TreeSelectProps, 'treeData' | 'loadD
     /** antd的loading属性，是否显示加载中：传入数字表示延迟加载,单位毫秒，0等同于false */
     loading?: boolean | number;
 };
-declare const DTreeSelect: React.ForwardRefExoticComponent<Omit<TreeSelectProps<any, import("rc-tree-select/lib/TreeSelect").DefaultOptionType>, "loading" | "treeData" | "loadData"> & {
-    /** antd的treeData属性，可以是一个treeData数组，或一个返回等价treeData数组的promise */
-    treeData?: import("rc-tree-select/lib/TreeSelect").DefaultOptionType[] | ((node?: DefaultOptionType) => Promise<TreeSelectProps['treeData']>) | undefined;
-    /** antd的loadData属性，动态加载子级列表数据,默认使用treeData所提供的方法，如果传入null，则表示不进行动态加载,该方法要求返回一个treeData数组或与其等价的Promise */
-    loadData?: ((node?: DefaultOptionType) => Promise<TreeSelectProps['treeData']>) | null | undefined;
-    /** 等同antd的loadData属性,用于监听loadData事件*/
-    onLoadData?: ((node?: DefaultOptionType) => void) | undefined;
-    /** antd的loading属性，是否显示加载中：传入数字表示延迟加载,单位毫秒，0等同于false */
-    loading?: number | boolean | undefined;
-} & React.RefAttributes<BaseSelectRef>>;
+declare const DTreeSelect: React.ForwardRefExoticComponent<DTreeSelectProps & React.RefAttributes<any>>;
 export default DTreeSelect;

package/dist/esm/DTreeSelect/index.js

@@ -3,14 +3,6 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "popupClassName", "treeData", "fieldNames", "loadData", "onLoadData", "loading"];
-/*
- * @Author       : wangfeihu
- * @Date         : 2023-05-22 10:38:17
- * @LastEditors  : wangfeihu
- * @LastEditTime : 2023-06-30 16:24:47
- * @Description  : 基于antd的TreeSelect组件
- */
-
 import React, { useRef, forwardRef, useState, useEffect, useMemo, useContext } from 'react';
 import { TreeSelect } from 'antd';
 import { ConfigContext } from "../ConfigProvider";
@@ -104,7 +96,7 @@ function InternalTreeSelect(props, ref) {
       }, _loadingState);
     }
     // 发起请求
-    fun === null || fun === void 0 ? void 0 : fun(value).then(function (response) {
+    fun === null || fun === void 0 || fun(value).then(function (response) {
       if (loadingParamsRef.current === value) {
         setTreeData(response);
         setLoading(false);

package/dist/esm/DTreeSelect/index.less

@@ -1,11 +1,11 @@
-@import '../commonStyle/index.less';
-
-.@{prefix}-tree-select-dropdown .ant-select-tree-node-content-wrapper {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.@{prefix}-tree-select-dropdown .ant-select-tree-node-content-wrapper .ant-select-tree-title {
-  overflow: hidden;
-}
+@import '../commonStyle/index.less';
+
+.@{prefix}-tree-select-dropdown .ant-select-tree-node-content-wrapper {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.@{prefix}-tree-select-dropdown .ant-select-tree-node-content-wrapper .ant-select-tree-title {
+  overflow: hidden;
+}

package/dist/esm/DUpload/helper.d.ts

@@ -52,7 +52,7 @@ declare function getUploadFile(files: any, maxCount?: number): any[];
  */
 declare function getThumbOption(option?: ThumbOptionProps | null): {
     size: number;
-    filter: (file: DUploadFile) => boolean;
+    filter: ((file: DUploadFile) => boolean) | ((file: any) => any);
     compress: {
         width: number;
         height: number;

package/dist/esm/DUpload/helper.js

@@ -238,7 +238,7 @@ function deepFindJsx(object, fn) {
     var _obj$props;
     if (fn(obj, parent)) return obj;
     if (parentPath.split(/\./).length >= maxDepth) return;
-    var children = obj === null || obj === void 0 ? void 0 : (_obj$props = obj.props) === null || _obj$props === void 0 ? void 0 : _obj$props.children;
+    var children = obj === null || obj === void 0 || (_obj$props = obj.props) === null || _obj$props === void 0 ? void 0 : _obj$props.children;
     if (children instanceof Array) {
       for (var index = 0; index < children.length; index++) {
         var pathString = parentPath ? "".concat(parentPath, ".children[").concat(index, "]") : ".children[".concat(index, "]");

package/dist/esm/DUpload/index.d.ts

@@ -26,7 +26,7 @@ declare type DUploadProps = Omit<UploadProps, 'fileList' | 'onChange' | 'customR
     itemClassName?: string;
     enablePreview?: boolean | ((file: DUploadFile) => boolean);
 };
-declare const DUpload: React.ForwardRefExoticComponent<Omit<UploadProps<any>, "onChange" | "fileList" | "customRequest" | "onRemove" | "onDownload" | "onPreview"> & {
+declare const DUpload: React.ForwardRefExoticComponent<Omit<UploadProps<any>, "fileList" | "onChange" | "customRequest" | "onRemove" | "onDownload" | "onPreview"> & {
     /** 初始文件列表(相当于defaultFileList,但优先级高于defaultFileList) */
     value?: DUploadFile | DUploadFile[] | undefined;
     /** 文件列表(在Form组件中表现为受控列表，在一般情况下相当于初始文件列表，其优先级高于value属性) */
@@ -42,7 +42,7 @@ declare const DUpload: React.ForwardRefExoticComponent<Omit<UploadProps<any>, "o
     /** 点击预览按钮时的回调，支持Promise */
     onPreview?: ((file: DUploadFile) => DUploadFile | Blob | Promise<DUploadFile | Blob> | void) | undefined;
     /** 上传按钮，等同于children但优先于children */
-    uploadButton?: ReactNode;
+    uploadButton?: any;
     /** 上传文件时的缩略图选项,null表示不生成缩略图 */
     thumbOption?: ThumbOptionProps | null | undefined;
     /** 列表项样式类名 */

package/dist/esm/DUpload/index.js

@@ -6,12 +6,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 var _excluded = ["value", "thumbOption", "uploadButton", "itemClassName", "enablePreview", "className", "maxCount", "children", "itemRender", "customRequest", "onRemove", "onDownload", "onPreview", "onChange", "defaultFileList", "showUploadList", "fileList"];
-/*
- * @Author       : wangfeihu
- * @Date         : 2023-06-16 09:37:07
- * @LastEditors  : wangfeihu
- * @LastEditTime : 2023-09-07 16:33:53
- * @Description  : 基于antd的Upload组件
+/*
+ * @Author       : wangfeihu
+ * @Date         : 2023-06-16 09:37:07
+ * @LastEditors  : wangfeihu
+ * @LastEditTime : 2023-09-07 16:33:53
+ * @Description  : 基于antd的Upload组件
  */
 
 import React, { forwardRef, useEffect, useMemo, useState, useContext } from 'react';
@@ -151,7 +151,7 @@ function InternalUpload(props, ref) {
                 if (list) {
                   setFileList(_toConsumableArray(list));
                   setTempList(_toConsumableArray(list));
-                  onChange === null || onChange === void 0 ? void 0 : onChange(list, {
+                  onChange === null || onChange === void 0 || onChange(list, {
                     file: file,
                     fileList: list
                   });
@@ -161,7 +161,7 @@ function InternalUpload(props, ref) {
               if (_list) {
                 setFileList(_toConsumableArray(_list));
                 setTempList(_toConsumableArray(_list));
-                onChange === null || onChange === void 0 ? void 0 : onChange(_list, {
+                onChange === null || onChange === void 0 || onChange(_list, {
                   file: file,
                   fileList: _list
                 });
@@ -189,7 +189,7 @@ function InternalUpload(props, ref) {
           case 20:
             _context.prev = 20;
             _context.t0 = _context["catch"](13);
-            (_thumbOption$onError = _thumbOption.onError) === null || _thumbOption$onError === void 0 ? void 0 : _thumbOption$onError.call(_thumbOption, _context.t0);
+            (_thumbOption$onError = _thumbOption.onError) === null || _thumbOption$onError === void 0 || _thumbOption$onError.call(_thumbOption, _context.t0);
             updateFileList(file, 'done', false);
           case 24:
             _context.next = 43;
@@ -212,7 +212,7 @@ function InternalUpload(props, ref) {
           case 36:
             _context.prev = 36;
             _context.t1 = _context["catch"](29);
-            (_thumbOption$onError2 = _thumbOption.onError) === null || _thumbOption$onError2 === void 0 ? void 0 : _thumbOption$onError2.call(_thumbOption, _context.t1);
+            (_thumbOption$onError2 = _thumbOption.onError) === null || _thumbOption$onError2 === void 0 || _thumbOption$onError2.call(_thumbOption, _context.t1);
             updateFileList(file, 'done', false);
           case 40:
             _context.next = 43;
@@ -237,7 +237,7 @@ function InternalUpload(props, ref) {
         _list2.then(function (list) {
           if (list) {
             setFileList(_toConsumableArray(list));
-            onChange === null || onChange === void 0 ? void 0 : onChange(list, {
+            onChange === null || onChange === void 0 || onChange(list, {
               file: file,
               fileList: list
             });
@@ -246,7 +246,7 @@ function InternalUpload(props, ref) {
       } else if (_list2 instanceof Array) {
         if (_list2) {
           setFileList(_toConsumableArray(_list2));
-          onChange === null || onChange === void 0 ? void 0 : onChange(_list2, {
+          onChange === null || onChange === void 0 || onChange(_list2, {
             file: file,
             fileList: _list2
           });
@@ -264,7 +264,7 @@ function InternalUpload(props, ref) {
       }
       var _list3 = _toConsumableArray(fileList);
       setTempList(_list3);
-      onChange === null || onChange === void 0 ? void 0 : onChange(_list3, {
+      onChange === null || onChange === void 0 || onChange(_list3, {
         file: file,
         fileList: _list3
       });
@@ -299,7 +299,7 @@ function InternalUpload(props, ref) {
       var actionChildren = action.props.children.map(function (item, index) {
         if (index > 0) {
           var _item$props2, _item$props3, _children2;
-          var _children = (item === null || item === void 0 ? void 0 : (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.children) || (item === null || item === void 0 ? void 0 : (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.icon);
+          var _children = (item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.children) || (item === null || item === void 0 || (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.icon);
           if ((_children2 = _children) !== null && _children2 !== void 0 && _children2.props) {
             _children = _objectSpread(_objectSpread({}, _children), {}, {
               key: index,

package/dist/esm/DUpload/index.less

@@ -1,19 +1,19 @@
-@import '../commonStyle/index.less';
-
-.@{prefix}-upload {
-  .preview .ant-upload-list-item-actions a[target='_blank'][rel='noopener noreferrer'] {
-    opacity: initial !important;
-    pointer-events: initial !important;
-  }
-
-  .ant-upload-list.ant-upload-list-picture-card .ant-upload-span {
-    .ant-upload-list-item-thumbnail {
-      height: 46px;
-    }
-
-    .ant-upload-list-item-name {
-      position: absolute;
-      display: initial;
-    }
-  }
-}
+@import '../commonStyle/index.less';
+
+.@{prefix}-upload {
+  .preview .ant-upload-list-item-actions a[target='_blank'][rel='noopener noreferrer'] {
+    opacity: initial !important;
+    pointer-events: initial !important;
+  }
+
+  .ant-upload-list.ant-upload-list-picture-card .ant-upload-span {
+    .ant-upload-list-item-thumbnail {
+      height: 46px;
+    }
+
+    .ant-upload-list-item-name {
+      position: absolute;
+      display: initial;
+    }
+  }
+}

package/dist/esm/ErrorBoundary/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import './index.less';
 declare function ErrorBoundary({ err }: {
     err?: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default ErrorBoundary;

package/dist/esm/ErrorBoundary/index.less

@@ -1,44 +1,44 @@
-@import '../commonStyle/index.less';
-
-.@{prefix}-error-boundary {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  margin: 20px;
-  padding: 15px;
-  background-color: rgb(221, 127, 127);
-  border-radius: 10px;
-
-  .error-text {
-    margin-top: 20px;
-  }
-
-  .error-refresh {
-    width: 140px;
-    height: 40px;
-    color: white;
-    font-weight: bold;
-    line-height: 40px;
-    text-align: center;
-    background-color: #4593ef;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-
-  .errorDetiles {
-    .detilesLink {
-      color: blue;
-    }
-
-    .errordetails {
-      padding: 10px;
-      color: #777;
-      font-size: 80%;
-      background-color: rgb(204, 198, 190);
-      border: 1px solid #777;
-      border-radius: 5px;
-    }
-  }
-}
+@import '../commonStyle/index.less';
+
+.@{prefix}-error-boundary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  margin: 20px;
+  padding: 15px;
+  background-color: rgb(221, 127, 127);
+  border-radius: 10px;
+
+  .error-text {
+    margin-top: 20px;
+  }
+
+  .error-refresh {
+    width: 140px;
+    height: 40px;
+    color: white;
+    font-weight: bold;
+    line-height: 40px;
+    text-align: center;
+    background-color: #4593ef;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .errorDetiles {
+    .detilesLink {
+      color: blue;
+    }
+
+    .errordetails {
+      padding: 10px;
+      color: #777;
+      font-size: 80%;
+      background-color: rgb(204, 198, 190);
+      border: 1px solid #777;
+      border-radius: 5px;
+    }
+  }
+}

package/dist/esm/IPAddress/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import './index.less';
+export interface IPAddressProps {
+    className?: string;
+    value?: string;
+    onChange?: (_value: string) => void;
+    onFocus?: (_value: string, _index: number) => void;
+    onBlur?: (_value: string, _index: number) => void;
+    type?: 'IPv4' | 'IPv6';
+    delimiter?: React.ReactNode;
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: 'small' | 'middle' | 'large';
+    style?: React.CSSProperties;
+    inputProps?: {
+        style?: React.CSSProperties;
+        [key: string]: any;
+    };
+    autoComplete?: boolean;
+    normalize?: boolean;
+}
+declare const IPAddress: React.FC<IPAddressProps>;
+export default IPAddress;