chore: 同步能力中心代码

src/components/Mood/index.tsx

@@ -5,7 +5,7 @@
  * @LastEditTime: 2020-09-22 18:04:44
  * @Description: 评价笑脸组件
  */
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import {
   SmileFilled,
   MehFilled,
@@ -13,30 +13,40 @@ import {
 } from '@ant-design/icons';
 
 interface MoodProps {
+  /**
+   * 类型
+   */
   type: 'smile' | 'notBad' | 'sad';
+  /**
+   * 自定义外部样式
+   */
+  customStyle?: CSSProperties,
 };
 
-const Mood: React.FC<MoodProps> = ({ type = 'smile' }) => {
-  let node = null;
+const Mood: React.FC<MoodProps> = ({ type = 'smile', customStyle = {} }) => {
+  let node: any = null;
 
   switch (type) {
     case 'smile':
-      node = <><SmileFilled style={{ color: '#41CC9E', marginRight: 4 }} /></>;
+      node = <><SmileFilled style={{ color: '#41CC9E', ...customStyle }} /></>;
       break;
       
     case 'notBad':
-      node = <><MehFilled style={{ color: '#FFC400', marginRight: 4 }} /></>;
+      node = <><MehFilled style={{ color: '#FFC400', ...customStyle }} /></>;
       break;
 
     case 'sad':
-      node = <><FrownFilled style={{ color: '#EF6260', marginRight: 4 }} /></>;
+      node = <><FrownFilled style={{ color: '#EF6260', ...customStyle }} /></>;
       break;
 
     default:
       break;
   }
-
   return node;
 };
 
+Mood.defaultProps = {
+  customStyle: {},
+};
+
 export default Mood;
\ No newline at end of file

src/components/NiceForm/components/SmilingFace.tsx

 import React from 'react';
 import Mood from '@/components/Mood';
-
+import { getIntl } from 'umi';
+const intl = getIntl();
 interface SmilingFaceProps {
   value: number;
 };
 
-const SmilingFace: React.FC<SmilingFaceProps> = ({
-  value, 
-}) => {
-  let node = null;
+const SmilingFace = (props) => {
+  const { value, schema } = props
+  const componentProps = schema?.getExtendsComponentProps() || {};
+
+  let node: any = null;
 
   switch (value) {
+    case 0:
     case 1:
     case 2: {
       node = (
-        <>
-          <Mood type="sad" />
-          <span>差评</span>
-        </>
+        <div {...componentProps}>
+          <Mood type="sad" customStyle={{ marginRight: 8 }} />
+          <span>{intl.formatMessage({id: 'components.chaping'})}</span>
+        </div>
       );
       break;
     }
 
     case 3: {
       node = (
-        <>
-          <Mood type="notBad" />
-          <span>中评</span>
-        </>
+        <div {...componentProps}>
+          <Mood type="notBad" customStyle={{ marginRight: 8 }} />
+          <span>{intl.formatMessage({id: 'components.zhongping'})}</span>
+        </div>
       );
       break;
     }
@@ -35,10 +38,10 @@ const SmilingFace: React.FC<SmilingFaceProps> = ({
     case 4:
     case 5: {
       node = (
-        <>
-          <Mood type="smile" />
-          <span>好评</span>
-        </>
+        <div {...componentProps}>
+          <Mood type="smile" customStyle={{ marginRight: 8 }} />
+          <span>{intl.formatMessage({id: 'components.haoping'})}</span>
+        </div>
       );
       break;
     }
@@ -49,4 +52,6 @@ const SmilingFace: React.FC<SmilingFaceProps> = ({
   return node;
 };
 
+SmilingFace.isFieldComponent = true;
+
 export default SmilingFace;