x-star-design 0.0.52 → 0.0.54

package/dist/error-boundary/error-page/index.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-interface Props {
-    onReset?: () => void;
-    homeLink?: string;
-}
-declare const ErrorPage: ({ onReset, homeLink }: Props) => React.JSX.Element;
+import type { FallbackProps } from 'react-error-boundary';
+declare const ErrorPage: ({ error, resetErrorBoundary }: FallbackProps) => React.JSX.Element;
 export default ErrorPage;

package/dist/error-boundary/error-page/index.js

@@ -2,40 +2,54 @@ import classNames from 'classnames';
 import React from 'react';
 import { useLocale } from "../../locales";
 import { prefix } from "../../utils/global";
+var isFetchError = function isFetchError(error) {
+  var _error$message;
+  return (_error$message = error.message) === null || _error$message === void 0 ? void 0 : _error$message.includes('Failed to fetch dynamically imported module:');
+};
 var ErrorPage = function ErrorPage(_ref) {
-  var onReset = _ref.onReset,
-    homeLink = _ref.homeLink;
+  var error = _ref.error,
+    resetErrorBoundary = _ref.resetErrorBoundary;
   var _useLocale = useLocale('ErrorPage'),
     t = _useLocale.format;
+  if (isFetchError(error)) {
+    location.reload();
+  }
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "-errorPage")),
-    "data-testid": 'errorPage'
+    className: classNames("".concat(prefix, "-errorPage"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("hello")
+    className: classNames('hello')
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames("ip")
+    className: classNames('ip')
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames("planets")
+    className: classNames('planets')
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames("content")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("alert")
+    className: classNames('content')
+  }, isFetchError(error) ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": "hint",
+    className: classNames('hint')
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("alertContent")
+    className: classNames('description')
+  }, /*#__PURE__*/React.createElement("div", null, t('RELOAD_HINT')))) : /*#__PURE__*/React.createElement("div", {
+    "data-testid": "alert",
+    className: classNames('alert')
   }, /*#__PURE__*/React.createElement("h2", {
     style: {
       fontWeight: 'bold'
     }
   }, t('ERROR')), /*#__PURE__*/React.createElement("div", {
-    className: classNames("description")
+    className: classNames('description')
   }, /*#__PURE__*/React.createElement("div", null, t('ERROR_BOUNDARY_TIP_1')), /*#__PURE__*/React.createElement("div", null, t('ERROR_BOUNDARY_TIP_2')), /*#__PURE__*/React.createElement("div", {
-    className: classNames("actions")
+    className: classNames('actions')
   }, /*#__PURE__*/React.createElement("a", {
-    href: homeLink || '/'
+    href: "/"
   }, ">> ".concat(t('RETURN_TO_HOME'))), /*#__PURE__*/React.createElement("a", {
-    onClick: onReset
+    onClick: resetErrorBoundary
   }, ">> ".concat(t('RETRY')))), /*#__PURE__*/React.createElement("div", null, t('TECHNICAL_DEPARTMENT_CONTACT_EMAIL'), /*#__PURE__*/React.createElement("a", {
     href: "mailto:tech@xinyoudui.com"
-  }, 'tech@xinyoudui.com')))))));
+  }, "tech@xinyoudui.com")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: 'red'
+    }
+  }, t('ERROR_MESSAGE'), error.message)))));
 };
 export default ErrorPage;

package/dist/error-boundary/index.d.ts

@@ -1,30 +1,4 @@
 import React from 'react';
-type FallbackElement = React.ReactElement<unknown, string | React.FC | typeof React.Component> | null;
-export interface FallbackProps {
-    error: Error;
-    resetErrorBoundary: () => void;
-}
-interface ErrorBoundaryState {
-    error: Error | null;
-}
-export declare function FallbackRender(props: FallbackProps): FallbackElement;
-interface ErrorBoundaryProps {
-    fallback?: FallbackElement;
-    fallbackRender?: typeof FallbackRender;
-    onError?: (error: Error, info: string) => void;
-    onReset?: () => void;
-    homeLink?: string;
-}
-/**
- * 错误边界捕获
- */
-declare class ErrorBoundary extends React.Component<React.PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
-    state: ErrorBoundaryState;
-    updatedWithError: boolean;
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    componentDidUpdate(): void;
-    reset: () => void;
-    resetErrorBoundary: () => void;
-    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
-}
+import type { ErrorBoundaryProps as ReactErrorBoundaryProps } from 'react-error-boundary';
+declare const ErrorBoundary: ({ fallback, fallbackRender, FallbackComponent, ...rest }: Partial<ReactErrorBoundaryProps>) => React.JSX.Element;
 export default ErrorBoundary;

package/dist/error-boundary/index.js

@@ -1,145 +1,22 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-// 本组件代码参考自 https://juejin.cn/post/6937474904375689224
-import { message } from 'antd';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["fallback", "fallbackRender", "FallbackComponent"];
 import React from 'react';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 import ErrorPage from "./error-page";
-
-// 出错后显示的元素类型
-
-// 出错显示组件的 props
-
-// 本组件 ErrorBoundary 的 props
-
-// 初始状态
-var initialState = {
-  error: null
+var ErrorBoundary = function ErrorBoundary(_ref) {
+  var fallback = _ref.fallback,
+    fallbackRender = _ref.fallbackRender,
+    _ref$FallbackComponen = _ref.FallbackComponent,
+    FallbackComponent = _ref$FallbackComponen === void 0 ? ErrorPage : _ref$FallbackComponen,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var props = fallback !== undefined ? _objectSpread({
+    fallback: fallback
+  }, rest) : fallbackRender !== undefined ? _objectSpread({
+    fallbackRender: fallbackRender
+  }, rest) : _objectSpread({
+    FallbackComponent: FallbackComponent
+  }, rest);
+  return /*#__PURE__*/React.createElement(ReactErrorBoundary, props);
 };
-
-// 本组件 ErrorBoundary 的 props
-/**
- * 错误边界捕获
- */
-var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  _inherits(ErrorBoundary, _React$Component);
-  var _super = _createSuper(ErrorBoundary);
-  function ErrorBoundary() {
-    var _this;
-    _classCallCheck(this, ErrorBoundary);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", initialState);
-    // 是否已经由于 error 而引发的 render/update
-    _defineProperty(_assertThisInitialized(_this), "updatedWithError", false);
-    // 重置该组件状态，将 error 设置 null
-    _defineProperty(_assertThisInitialized(_this), "reset", function () {
-      _this.updatedWithError = false;
-      _this.setState(initialState);
-    });
-    // 执行自定义重置逻辑，并重置组件状态
-    _defineProperty(_assertThisInitialized(_this), "resetErrorBoundary", function () {
-      var _this$props$onReset = _this.props.onReset,
-        onReset = _this$props$onReset === void 0 ? function () {
-          message.info('开发人员正在解救陷入黑洞的代码，请耐心等待和尝试。Developers are rescuing code trapped in a black hole. Please be patient and try again');
-        } : _this$props$onReset;
-      onReset();
-      _this.reset();
-    });
-    return _this;
-  }
-  _createClass(ErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, errorInfo) {
-      if (this.props.onError) {
-        this.props.onError(error, errorInfo.componentStack);
-      } else {
-        console.error('Page Crash! Have been captured by error boundary.');
-      }
-      this.setState({
-        error: error
-      });
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var error = this.state.error;
-
-      // 已经存在错误，并且是第一次由于 error 而引发的 render/update，那么设置 flag=true，不会重置
-      if (error !== null && !this.updatedWithError) {
-        this.updatedWithError = true;
-        return;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        fallback = _this$props.fallback,
-        _this$props$fallbackR = _this$props.fallbackRender,
-        fallbackRender = _this$props$fallbackR === void 0 ? function (props) {
-          // fallback 组件的渲染函数 ErrorPage需要自己定义该组件
-          return /*#__PURE__*/React.createElement(ErrorPage, {
-            onReset: props.resetErrorBoundary,
-            homeLink: _this2.props.homeLink
-          });
-        } : _this$props$fallbackR;
-      var error = this.state.error;
-      if (error !== null) {
-        var fallbackProps = {
-          error: error,
-          resetErrorBoundary: this.resetErrorBoundary // 将 resetErrorBoundary 传入 fallback
-        };
-
-        if ( /*#__PURE__*/React.isValidElement(fallback)) {
-          return fallback;
-        }
-        return fallbackRender(fallbackProps);
-      }
-      return this.props.children;
-    }
-  }]);
-  return ErrorBoundary;
-}(React.Component);
-export default ErrorBoundary;
-
-// [example for ErrorBoundary]
-{
-  /*
-    const onError = () => console.error('页面崩溃');
-    const onReset = () => {
-    console.log('已重置');
-    message.info('刚刚出错了，不好意思，现在已经重置好了，请找老板锤这个开发');
-    };
-    const renderFallback = (props: FallbackProps) => {
-        // fallback 组件的渲染函数
-        return (
-            <Alert
-            className={styles.alert}
-            message="出错啦"
-            showIcon
-            description="不好意思，页面因为一些原因崩溃了，您可以尝试重置"
-            type="error"
-            action={
-                <Button size="small" danger onClick={props.resetErrorBoundary}>
-                {'重置'}
-                </Button>
-            }
-            />
-        );
-    };
-     <ErrorBoundary
-        fallbackRender={renderFallback}
-        onError={onError}
-        onReset={onReset}
-        >
-        <Routes />
-    </ErrorBoundary>; 
-  */
-}
+export default ErrorBoundary;

package/dist/feedback/index.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { CoffeeOutlined, DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Col, Form, Input, Popover, Radio, Row, Space, Typography } from 'antd';
 import classNames from 'classnames';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import ConfigProviderWrapper from "../config-provider-wrapper";
 import { useLocale } from "../locales";
 import { prefix } from "../utils/global";
@@ -43,6 +43,9 @@ var Feedback = function Feedback(_ref) {
       return feedbackListBad;
     }
   };
+  useEffect(function () {
+    form.setFieldsValue(_defineProperty({}, "".concat(feedbackTypeKey), undefined));
+  }, [choiceType]);
   var submittedContent = function submittedContent() {
     return /*#__PURE__*/React.createElement(Space, {
       direction: "vertical",
@@ -151,9 +154,6 @@ var Feedback = function Feedback(_ref) {
     }))))), /*#__PURE__*/React.createElement(Form.Item, {
       name: feedbackTextAreaKey,
       rules: [{
-        required: true,
-        message: t('FEEDBACK_MESSAGE_3')
-      }, {
         validator: function validator(_, value) {
           //空格字符串校验
           if (/^\s+$/g.test(value)) {
@@ -196,6 +196,7 @@ var Feedback = function Feedback(_ref) {
     content: content,
     title: title !== null && title !== void 0 ? title : t('FEEDBACK_ON_THE_PROBLEM'),
     placement: "bottom",
+    forceRender: true,
     trigger: ['click'],
     getPopupContainer: function getPopupContainer() {
       return mainContainer.current;
@@ -207,6 +208,7 @@ var Feedback = function Feedback(_ref) {
         setOpen(true);
       } else {
         form.resetFields();
+        setChoiceType(undefined);
         setOpen(false);
       }
     },

package/dist/locales/en_US.d.ts

@@ -55,12 +55,14 @@ declare const _default: {
         readonly CONTACT_US: "Contact Us";
     };
     readonly ErrorPage: {
-        readonly ERROR: "☹ Error";
+        readonly RELOAD_HINT: "Page update detected, reloading the page...";
+        readonly ERROR: "💔 Error";
         readonly ERROR_BOUNDARY_TIP_1: "Sorry, the code accidentally got caught in a black hole and the page crashed.";
         readonly ERROR_BOUNDARY_TIP_2: "You can try accessing the page again, or you can visit another page first.";
         readonly RETURN_TO_HOME: "Return to home";
         readonly RETRY: "Retry";
         readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "Technical department contact email: ";
+        readonly ERROR_MESSAGE: "Error message: ";
     };
     readonly Feedback: {
         readonly FEEDBACK_RESPONSE: "Thank you for your valuable comments, we will continue to improve~";

package/dist/locales/en_US.js

@@ -55,12 +55,14 @@ export default {
     CONTACT_US: 'Contact Us'
   },
   ErrorPage: {
-    ERROR: '☹ Error',
+    RELOAD_HINT: 'Page update detected, reloading the page...',
+    ERROR: '💔 Error',
     ERROR_BOUNDARY_TIP_1: 'Sorry, the code accidentally got caught in a black hole and the page crashed.',
     ERROR_BOUNDARY_TIP_2: 'You can try accessing the page again, or you can visit another page first.',
     RETURN_TO_HOME: 'Return to home',
     RETRY: 'Retry',
-    TECHNICAL_DEPARTMENT_CONTACT_EMAIL: 'Technical department contact email: '
+    TECHNICAL_DEPARTMENT_CONTACT_EMAIL: 'Technical department contact email: ',
+    ERROR_MESSAGE: 'Error message: '
   },
   Feedback: {
     FEEDBACK_RESPONSE: 'Thank you for your valuable comments, we will continue to improve~',

package/dist/locales/index.d.ts

@@ -66,12 +66,14 @@ export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton
             readonly CONTACT_US: "联系我们";
         };
         readonly ErrorPage: {
-            readonly ERROR: "☹ 出错啦";
+            readonly RELOAD_HINT: "监测到页面更新，正在刷新页面...";
+            readonly ERROR: "💔 出错啦";
             readonly ERROR_BOUNDARY_TIP_1: "不好意思，代码意外卷入了黑洞，页面发生了崩溃。";
             readonly ERROR_BOUNDARY_TIP_2: "您可以重试访问该页面，或可以先访问其他页面。";
             readonly RETURN_TO_HOME: "回到首页";
             readonly RETRY: "重试";
             readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "技术部联系邮箱：";
+            readonly ERROR_MESSAGE: "错误信息：";
         };
         readonly Feedback: {
             readonly FEEDBACK_RESPONSE: "感谢您宝贵的意见，我们会持续改进~";
@@ -143,12 +145,14 @@ export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton
             readonly CONTACT_US: "Contact Us";
         };
         readonly ErrorPage: {
-            readonly ERROR: "☹ Error";
+            readonly RELOAD_HINT: "Page update detected, reloading the page...";
+            readonly ERROR: "💔 Error";
             readonly ERROR_BOUNDARY_TIP_1: "Sorry, the code accidentally got caught in a black hole and the page crashed.";
             readonly ERROR_BOUNDARY_TIP_2: "You can try accessing the page again, or you can visit another page first.";
             readonly RETURN_TO_HOME: "Return to home";
             readonly RETRY: "Retry";
             readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "Technical department contact email: ";
+            readonly ERROR_MESSAGE: "Error message: ";
         };
         readonly Feedback: {
             readonly FEEDBACK_RESPONSE: "Thank you for your valuable comments, we will continue to improve~";

package/dist/locales/zh_CN.d.ts

@@ -55,12 +55,14 @@ declare const _default: {
         readonly CONTACT_US: "联系我们";
     };
     readonly ErrorPage: {
-        readonly ERROR: "☹ 出错啦";
+        readonly RELOAD_HINT: "监测到页面更新，正在刷新页面...";
+        readonly ERROR: "💔 出错啦";
         readonly ERROR_BOUNDARY_TIP_1: "不好意思，代码意外卷入了黑洞，页面发生了崩溃。";
         readonly ERROR_BOUNDARY_TIP_2: "您可以重试访问该页面，或可以先访问其他页面。";
         readonly RETURN_TO_HOME: "回到首页";
         readonly RETRY: "重试";
         readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "技术部联系邮箱：";
+        readonly ERROR_MESSAGE: "错误信息：";
     };
     readonly Feedback: {
         readonly FEEDBACK_RESPONSE: "感谢您宝贵的意见，我们会持续改进~";

package/dist/locales/zh_CN.js

@@ -55,12 +55,14 @@ export default {
     CONTACT_US: '联系我们'
   },
   ErrorPage: {
-    ERROR: '☹ 出错啦',
+    RELOAD_HINT: '监测到页面更新，正在刷新页面...',
+    ERROR: '💔 出错啦',
     ERROR_BOUNDARY_TIP_1: '不好意思，代码意外卷入了黑洞，页面发生了崩溃。',
     ERROR_BOUNDARY_TIP_2: '您可以重试访问该页面，或可以先访问其他页面。',
     RETURN_TO_HOME: '回到首页',
     RETRY: '重试',
-    TECHNICAL_DEPARTMENT_CONTACT_EMAIL: '技术部联系邮箱：'
+    TECHNICAL_DEPARTMENT_CONTACT_EMAIL: '技术部联系邮箱：',
+    ERROR_MESSAGE: '错误信息：'
   },
   Feedback: {
     FEEDBACK_RESPONSE: '感谢您宝贵的意见，我们会持续改进~',

package/dist/styles/index.css

@@ -118,40 +118,39 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
   color: rgba(0, 0, 0, 0.88);
   transform: translate(-50%, -50%);
-  flex-direction: column;
 }
+.x-star-design-errorPage .content .hint,
 .x-star-design-errorPage .content .alert {
   position: relative;
-  display: flex;
-  align-items: flex-start;
   margin: 0;
   padding: 8px 12px;
-  border: 1px solid #ffccc7;
   border-radius: 8px;
   font-size: 16px;
   color: rgba(0, 0, 0, 0.88);
-  background-color: #fff2f0;
   padding-inline: 24px;
   padding-block: 20px;
   box-sizing: border-box;
 }
-.x-star-design-errorPage .content .alert .description {
-  display: flex;
-  flex-direction: column;
-}
+.x-star-design-errorPage .content .hint .description div,
 .x-star-design-errorPage .content .alert .description div {
   line-height: 2.5rem;
 }
+.x-star-design-errorPage .content .hint .description .actions,
 .x-star-design-errorPage .content .alert .description .actions {
   display: flex;
   justify-content: space-between;
   width: 50%;
 }
+.x-star-design-errorPage .content .hint {
+  border: 1px solid #ccffc7;
+  background-color: #f2fff0;
+}
+.x-star-design-errorPage .content .alert {
+  border: 1px solid #ffccc7;
+  background-color: #fff2f0;
+}
 .x-star-design-errorPage .content a {
   color: #1890ff;
   text-decoration: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-design",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "description": "A react component library developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",
@@ -62,6 +62,7 @@
     "dayjs": "^1.11.10",
     "randomcolor": "^0.6.2",
     "rc-resize-observer": "^1.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-sortable-hoc": "^2.0.0",
     "react-window": "^1.8.9",
     "x-star-utils": "^0.0.9"