x-star-design 0.0.46 → 0.0.47

package/dist/feedback/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+type feedbackItem = {
+    value: string;
+    label: string;
+};
+interface FeedbackProps {
+    /**
+     * @description Radio.Group 的选项
+     */
+    feedbackList?: feedbackItem[];
+    /**
+     * @description 选中的颜色
+     */
+    activeColor: string;
+    /**
+     * @description 提交的回调
+     */
+    onSubmit?: (value: any) => void;
+    /**
+     * @description 好评、差评的Form.Item name
+     */
+    feedbackKey: string;
+    /**
+     * @description 问题类型的Form.Item name
+     */
+    feedbackTypeKey: string;
+    /**
+     * @description 问题描述TextArea的Form.Item name
+     */
+    feedbackTextAreaKey: string;
+}
+declare const Feedback: React.FC<FeedbackProps>;
+export default Feedback;

package/dist/feedback/index.js

@@ -0,0 +1,198 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 ConfigProviderWrapper from "../config-provider-wrapper";
+import { useLocale } from "../locales";
+import { prefix } from "../utils/global";
+var Text = Typography.Text;
+var TextArea = Input.TextArea;
+var Feedback = function Feedback(_ref) {
+  var feedbackList = _ref.feedbackList,
+    activeColor = _ref.activeColor,
+    onSubmit = _ref.onSubmit,
+    feedbackKey = _ref.feedbackKey,
+    feedbackTypeKey = _ref.feedbackTypeKey,
+    feedbackTextAreaKey = _ref.feedbackTextAreaKey;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    choiceType = _useState2[0],
+    setChoiceType = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showSubmitContent = _useState4[0],
+    setShowSubmitContent = _useState4[1];
+  var _useLocale = useLocale('Feedback'),
+    t = _useLocale.format;
+  var mainContainer = useRef(null);
+  var submittedContent = function submittedContent() {
+    return /*#__PURE__*/React.createElement(Space, {
+      direction: "vertical",
+      className: classNames("".concat(prefix, "-feedbackSpace"), _defineProperty({}, "".concat(prefix, "-feedbackHidden"), !showSubmitContent)),
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefix, "-feedbackIcon"))
+    }, /*#__PURE__*/React.createElement(CoffeeOutlined, null)), /*#__PURE__*/React.createElement("div", null, t('FEEDBACK_RESPONSE')));
+  };
+  var submitFormContent = function submitFormContent() {
+    return /*#__PURE__*/React.createElement(Form, {
+      form: form,
+      onFinish: function onFinish(val) {
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(val);
+        setShowSubmitContent(true);
+      },
+      className: classNames("".concat(prefix, "-feedbackForm"), _defineProperty({}, "".concat(prefix, "-feedbackFormHidden"), showSubmitContent))
+    }, /*#__PURE__*/React.createElement(Space, {
+      className: classNames(_defineProperty({}, "".concat(prefix, "-feedbackHidden"), showSubmitContent)),
+      direction: "vertical",
+      size: 0,
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Item, {
+      name: feedbackKey,
+      rules: [{
+        required: true,
+        message: t('PLEASE_SELECT_FEEDBACK_TYPE')
+      }]
+    }, /*#__PURE__*/React.createElement(Radio.Group, {
+      className: classNames("".concat(prefix, "-feedbackRadioGroup")),
+      style: {
+        padding: '20px 0 10px 0'
+      }
+    }, /*#__PURE__*/React.createElement(Radio, {
+      value: 1,
+      "data-testid": "feedbackKey-testId",
+      onClick: function onClick() {
+        setChoiceType(1);
+      },
+      style: {
+        color: choiceType === 1 ? activeColor : '#d9d9d9',
+        transition: 'color 0.3s ease-in-out',
+        fontSize: '36px'
+      }
+    }, /*#__PURE__*/React.createElement(LikeFilled, null)), /*#__PURE__*/React.createElement(Radio, {
+      value: 0,
+      "data-testid": "feedbackKey-testId-dislike",
+      style: {
+        color: choiceType === 0 ? activeColor : '#d9d9d9',
+        transition: 'color 0.3s ease-in-out',
+        fontSize: '36px'
+      },
+      onClick: function onClick() {
+        setChoiceType(0);
+      }
+    }, /*#__PURE__*/React.createElement(DislikeFilled, null))))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 10
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "secondary",
+      style: {
+        marginBottom: '24px'
+      }
+    }, t('FEEDBACK_TYPE'))), /*#__PURE__*/React.createElement(Form.Item, {
+      name: feedbackTypeKey,
+      rules: [{
+        required: true,
+        message: t('PLEASE_SELECT_FEEDBACK_TYPE')
+      }]
+    }, /*#__PURE__*/React.createElement(Checkbox.Group, {
+      style: {
+        width: '100%'
+      },
+      "data-testid": "feedbackTypeKey-testId"
+    }, /*#__PURE__*/React.createElement(Row, {
+      gutter: [4, 4],
+      style: {
+        width: '100%'
+      }
+    }, feedbackList === null || feedbackList === void 0 ? void 0 : feedbackList.map(function (item) {
+      return /*#__PURE__*/React.createElement(Col, {
+        span: 8,
+        key: item.value
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        value: item.value
+      }, item.label));
+    })))), /*#__PURE__*/React.createElement(Form.Item, {
+      name: feedbackTextAreaKey,
+      rules: [{
+        required: true,
+        message: t('PLEASE_SELECT_FEEDBACK_TYPE')
+      }]
+    }, /*#__PURE__*/React.createElement(TextArea, {
+      "data-testid": "feedbackTextAreaKey-testId",
+      placeholder: "\u8BF7\u8BE6\u7EC6\u63CF\u8FF0\u4F60\u7684\u53CD\u9988\uFF0C\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u5904\u7406",
+      className: "".concat(prefix, "-feedbackTextArea")
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      style: {
+        marginBottom: 0
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      className: classNames("".concat(prefix, "-feedbackButton")),
+      htmlType: "submit"
+    }, t('SUBMIT')))));
+  };
+  var content = /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "-feedbackContent"))
+  }, submittedContent(), submitFormContent());
+  return /*#__PURE__*/React.createElement(ConfigProviderWrapper, null, /*#__PURE__*/React.createElement("div", {
+    ref: mainContainer,
+    className: classNames("".concat(prefix, "-feedbackContainer"))
+  }, /*#__PURE__*/React.createElement(Popover, {
+    content: content,
+    title: t('FEEDBACK_ON_THE_PROBLEM'),
+    placement: "bottom",
+    getPopupContainer: function getPopupContainer() {
+      return mainContainer.current;
+    },
+    trigger: ['click'],
+    onOpenChange: function onOpenChange(open) {
+      if (open) {
+        setShowSubmitContent(false);
+      } else {
+        form.resetFields();
+      }
+    },
+    overlayInnerStyle: {
+      width: '400px',
+      minHeight: '320px',
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(Space, {
+    size: 0
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    "data-testid": "feedback-button-like",
+    icon: choiceType === 1 ? /*#__PURE__*/React.createElement(LikeFilled, {
+      style: {
+        color: activeColor
+      }
+    }) : /*#__PURE__*/React.createElement(LikeOutlined, null),
+    onClick: function onClick() {
+      setChoiceType(1);
+      form.setFieldsValue(_defineProperty({}, "".concat(feedbackKey), 1));
+    }
+  }, t('ACCLAIM')), /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    "data-testid": "feedback-button-dislike",
+    icon: choiceType === 0 ? /*#__PURE__*/React.createElement(DislikeFilled, {
+      style: {
+        color: activeColor
+      }
+    }) : /*#__PURE__*/React.createElement(DislikeOutlined, null),
+    onClick: function onClick() {
+      setChoiceType(0);
+      form.setFieldsValue(_defineProperty({}, "".concat(feedbackKey), 0));
+    }
+  }, t('BAD_REVIEW'))))));
+};
+export default Feedback;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { default as ContactButton } from './contact-button';
 export { default as DraggableLayout } from './draggable-layout';
 export { default as ErrorBoundary } from './error-boundary';
 export type { FallbackProps } from './error-boundary';
+export { default as Feedback } from './feedback';
 export { default as InputNumbers } from './input-numbers';
 export { default as LoadingMask } from './loading-mask';
 export { LocaleProvider } from './locales';

package/dist/index.js

@@ -6,6 +6,7 @@ export { LangId, Language, Theme } from "./code-mirror-wrapper/define";
 export { default as ContactButton } from "./contact-button";
 export { default as DraggableLayout } from "./draggable-layout";
 export { default as ErrorBoundary } from "./error-boundary";
+export { default as Feedback } from "./feedback";
 export { default as InputNumbers } from "./input-numbers";
 export { default as LoadingMask } from "./loading-mask";
 export { LocaleProvider } from "./locales";

package/dist/locales/en_US.d.ts

@@ -62,5 +62,15 @@ declare const _default: {
         readonly RETRY: "Retry";
         readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "Technical department contact email: ";
     };
+    readonly Feedback: {
+        readonly FEEDBACK_RESPONSE: "Thank you for your valuable comments, we will continue to improve~";
+        readonly FEEDBACK_TYPE: "Feedback Type";
+        readonly SUBMIT: "Submit";
+        readonly FEEDBACK_ON_THE_PROBLEM: "Your feedback on this problem";
+        readonly ACCLAIM: "Acclaim";
+        readonly BAD_REVIEW: "Bad Review";
+        readonly PLEASE_SELECT_FEEDBACK_TYPE: "Please fill in the feedback review";
+        readonly FEEDBACK_TEXTAREA_PLACEHOLDER: "Please describe your feedback in detail and we will deal with it as soon as possible";
+    };
 };
 export default _default;

package/dist/locales/en_US.js

@@ -61,5 +61,15 @@ export default {
     RETURN_TO_HOME: 'Return to home',
     RETRY: 'Retry',
     TECHNICAL_DEPARTMENT_CONTACT_EMAIL: 'Technical department contact email: '
+  },
+  Feedback: {
+    FEEDBACK_RESPONSE: 'Thank you for your valuable comments, we will continue to improve~',
+    FEEDBACK_TYPE: 'Feedback Type',
+    SUBMIT: 'Submit',
+    FEEDBACK_ON_THE_PROBLEM: 'Your feedback on this problem',
+    ACCLAIM: 'Acclaim',
+    BAD_REVIEW: 'Bad Review',
+    PLEASE_SELECT_FEEDBACK_TYPE: 'Please fill in the feedback review',
+    FEEDBACK_TEXTAREA_PLACEHOLDER: 'Please describe your feedback in detail and we will deal with it as soon as possible'
   }
 };

package/dist/locales/index.d.ts

@@ -7,7 +7,7 @@ interface LocaleProviderProps {
 }
 export declare const LocaleProvider: ({ children, locale, }: LocaleProviderProps) => React.JSX.Element;
 type MessageMap = typeof zh_CN | typeof en_US;
-export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton" | "CodeDetailModal" | "ContactButton" | "ErrorPage">(slice: T) => {
+export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton" | "CodeDetailModal" | "ContactButton" | "ErrorPage" | "Feedback">(slice: T) => {
     locale: string;
     format: <U extends keyof MessageMap[T]>(key: U) => ({
         readonly VisualDataConfig: {
@@ -73,6 +73,16 @@ export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton
             readonly RETRY: "重试";
             readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "技术部联系邮箱：";
         };
+        readonly Feedback: {
+            readonly FEEDBACK_RESPONSE: "感谢您宝贵的意见，我们会持续改进~";
+            readonly FEEDBACK_TYPE: "反馈类型";
+            readonly SUBMIT: "提交";
+            readonly FEEDBACK_ON_THE_PROBLEM: "您对本题目的反馈";
+            readonly ACCLAIM: "好评";
+            readonly BAD_REVIEW: "差评";
+            readonly PLEASE_SELECT_FEEDBACK_TYPE: "请填写反馈评价";
+            readonly FEEDBACK_TEXTAREA_PLACEHOLDER: "请详细描述你的反馈，我们会尽快处理";
+        };
     } | {
         readonly VisualDataConfig: {
             readonly Time_MS: "Time Limit(MS)";
@@ -137,6 +147,16 @@ export declare const useLocale: <T extends "VisualDataConfig" | "TranslateButton
             readonly RETRY: "Retry";
             readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "Technical department contact email: ";
         };
+        readonly Feedback: {
+            readonly FEEDBACK_RESPONSE: "Thank you for your valuable comments, we will continue to improve~";
+            readonly FEEDBACK_TYPE: "Feedback Type";
+            readonly SUBMIT: "Submit";
+            readonly FEEDBACK_ON_THE_PROBLEM: "Your feedback on this problem";
+            readonly ACCLAIM: "Acclaim";
+            readonly BAD_REVIEW: "Bad Review";
+            readonly PLEASE_SELECT_FEEDBACK_TYPE: "Please fill in the feedback review";
+            readonly FEEDBACK_TEXTAREA_PLACEHOLDER: "Please describe your feedback in detail and we will deal with it as soon as possible";
+        };
     })[T][U];
 };
 export {};

package/dist/locales/zh_CN.d.ts

@@ -62,5 +62,15 @@ declare const _default: {
         readonly RETRY: "重试";
         readonly TECHNICAL_DEPARTMENT_CONTACT_EMAIL: "技术部联系邮箱：";
     };
+    readonly Feedback: {
+        readonly FEEDBACK_RESPONSE: "感谢您宝贵的意见，我们会持续改进~";
+        readonly FEEDBACK_TYPE: "反馈类型";
+        readonly SUBMIT: "提交";
+        readonly FEEDBACK_ON_THE_PROBLEM: "您对本题目的反馈";
+        readonly ACCLAIM: "好评";
+        readonly BAD_REVIEW: "差评";
+        readonly PLEASE_SELECT_FEEDBACK_TYPE: "请填写反馈评价";
+        readonly FEEDBACK_TEXTAREA_PLACEHOLDER: "请详细描述你的反馈，我们会尽快处理";
+    };
 };
 export default _default;

package/dist/locales/zh_CN.js

@@ -61,5 +61,15 @@ export default {
     RETURN_TO_HOME: '回到首页',
     RETRY: '重试',
     TECHNICAL_DEPARTMENT_CONTACT_EMAIL: '技术部联系邮箱：'
+  },
+  Feedback: {
+    FEEDBACK_RESPONSE: '感谢您宝贵的意见，我们会持续改进~',
+    FEEDBACK_TYPE: '反馈类型',
+    SUBMIT: '提交',
+    FEEDBACK_ON_THE_PROBLEM: '您对本题目的反馈',
+    ACCLAIM: '好评',
+    BAD_REVIEW: '差评',
+    PLEASE_SELECT_FEEDBACK_TYPE: '请填写反馈评价',
+    FEEDBACK_TEXTAREA_PLACEHOLDER: '请详细描述你的反馈，我们会尽快处理'
   }
 };

package/dist/styles/index.css

@@ -168,6 +168,73 @@
   color: #40a9ff;
 }
 
+.x-star-design-feedbackContainer .x-star-design-feedbackContent {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent .x-star-design-feedbackRow {
+  width: 100%;
+  margin-bottom: 20px;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent .x-star-design-feedbackRow .x-star-design-feedbackCol {
+  font-size: 36px;
+  text-align: center;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent .x-star-design-feedbackButton {
+  width: 100%;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent .x-star-design-feedbackTextArea {
+  height: 100px;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent :global(.x-star-design-form-item) {
+  margin-bottom: 10px;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent .x-star-design-feedbackHidden {
+  display: none;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent .x-star-design-feedbackRadioGroup {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent .x-star-design-feedbackRadioGroup .x-star-design-radio {
+  display: none !important;
+}
+.x-star-design-feedbackContainer .x-star-design-feedbackContent .x-star-design-form-item {
+  margin-bottom: 10px;
+}
+.x-star-design-feedbackContainer .x-star-design-popover-title {
+  margin-bottom: 0 !important;
+}
+.x-star-design-feedbackContainer .x-star-design-popover-inner {
+  display: flex;
+  flex-direction: column;
+}
+.x-star-design-feedbackContainer .x-star-design-popover-inner .x-star-design-popover-inner-content {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.x-star-design-feedbackSpace {
+  width: 100%;
+  text-align: center;
+}
+.x-star-design-feedbackSpace .x-star-design-feedbackIcon {
+  font-size: 45px;
+}
+
+.x-star-design-feedbackForm {
+  width: 100%;
+}
+
+.x-star-design-feedbackFormHidden {
+  width: unset;
+}
+
 .x-star-design-loadingMask {
   position: absolute;
   inset: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-design",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "description": "A react component library developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",