新增环境变量组件 (#49)

Co-authored-by: wb-fc932227 <[email protected]>

Author: g-fengchen

packages/dingtalk-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serverless-cd/dingtalk-ui",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

packages/dingtalk-ui/src/index.md

@@ -5,7 +5,7 @@ Demo:
 ```tsx
 import React, { useEffect, useState, useRef } from 'react';
 import '@alicloud/console-components/dist/wind.css';
-import { Field, Button } from '@alicloud/console-components';
+import { Field, Button, Loading } from '@alicloud/console-components';
 import DingTalk from '@serverless-cd/dingtalk-ui';
 
 // 使用方式
@@ -14,7 +14,9 @@ import DingTalk from '@serverless-cd/dingtalk-ui';
 export default () => {
   const field = Field.useField();
   const { init, getValue, setValue, getValues, validate } = field;
-  const [disabled, setDisabled] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [visible, setVisible] = useState(false);
+
   const values = getValues();
   const dingdingRef = useRef(null);
   const onVerify = () => {
@@ -34,6 +36,14 @@ export default () => {
     console.log(getValue('dingding'), 'dingding');
   };
 
+  const onAsync = () => {
+    setVisible(true);
+    setTimeout(() => {
+      setVisible(false);
+      setValue('dingding', { ...initValue, webhook: 'https://111.com' });
+    }, [1000]);
+  };
+
   const initValue = {
     webhook: 'https://xxxxx.com',
     enable: true,
@@ -46,17 +56,20 @@ export default () => {
   };
 
   return (
-    <>
+    <Loading visible={visible}>
       <DingTalk
-        {...init('dingding', { initValue })}
+        {...init('dingding', {
+          initValue: {},
+        })}
         isPreview={disabled}
         initValue={initValue}
         ref={dingdingRef}
       />
       <Button onClick={onVerify}>校验</Button>
       <Button onClick={onEdit}>{disabled ? '编辑' : '保存'}</Button>
       <Button onClick={onSubmit}>提交</Button>
-    </>
+      <Button onClick={onAsync}>异步回填数据</Button>
+    </Loading>
   );
 };
 ```

packages/dingtalk-ui/src/index.tsx

@@ -13,7 +13,7 @@ const dataSource = [
 ];
 
 const DingTalk = (props: IProps, ref) => {
-  const { value = {}, onChange = noop, className = {}, isPreview } = props;
+  const { value = {}, onChange = noop, className = {}, isPreview, messageHelp = '' } = props;
   const field = Field.useField({
     onChange: () => {
       onChange(getValues());
@@ -88,10 +88,21 @@ const DingTalk = (props: IProps, ref) => {
           </Form.Item>
           <Form.Item
             label={i18n('ui.notifiy.messageContent.label')}
-            help={HELP_RENDER[HELP_TYPE.MESSAGE_CONTENT]}
+            extra={
+              <span
+                style={{ display: 'inline-block', textAlign: 'justify' }}
+                dangerouslySetInnerHTML={{
+                  __html: messageHelp,
+                }}
+              ></span>
+            }
+            required
           >
             <Input.TextArea
-              {...init('messageContent', { initValue: value['messageContent'] })}
+              {...init('messageContent', {
+                initValue: value['messageContent'],
+                rules: [{ required: true, message: i18n('ui.notifiy.help.message.text') }],
+              })}
               placeholder={i18n('ui.notifiy.messageContent.placeholder')}
               className="full-width"
             />

packages/dingtalk-ui/src/types.tsx

@@ -22,6 +22,7 @@ export interface IProps {
   onChange?: Function;
   className?: object | any;
   isPreview?: boolean;
+  messageHelp?: string | any;
 }
 
 export enum HELP_TYPE {

packages/dingtalk-ui/src/utils/i18n/en.tsx

@@ -39,4 +39,5 @@ export default {
     'If you need @multiple users, you can use English comma "," to split, for example: dfounderliu, mydingding',
   'ui.notifiy.help.enable.text':
     'After the DingTalk robot needs to be activated and configured here, the DingTalk robot notifications in each process of the pipeline will take effect.',
+  'ui.notifiy.help.message.text': 'A custom message is required',
 };

packages/dingtalk-ui/src/utils/i18n/ja.tsx

@@ -39,4 +39,5 @@ export default {
     '@複数のユーザーが必要な場合は、英語のカンマ「,」を使用して分割できます。例: dfounderliu, mydingding',
   'ui.notifiy.help.enable.text':
     'ここで DingTalk ロボットをアクティブ化して構成する必要があると、パイプラインの各プロセスでの DingTalk ロボット通知が有効になります。',
+  'ui.notifiy.help.message.text': 'カスタム メッセージが必要です',
 };

packages/dingtalk-ui/src/utils/i18n/zh.tsx

@@ -34,4 +34,5 @@ export default {
     '如果需要@多个用户,可以用英文逗号“,”进行分割,例如:dfounderliu, mydingding',
   'ui.notifiy.help.enable.text':
     '需要在此处开通并配置钉钉机器人后，流水线各个流程中的钉钉机器人通知才会生效。',
+  'ui.notifiy.help.message.text': '自定义消息是必填项',
 };

packages/variable-ui/.fatherrc.ts

@@ -0,0 +1,4 @@
+export default {
+  // more father 4 config: https://github.com/umijs/father-next/blob/master/docs/config.md
+  esm: {},
+};

packages/variable-ui/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true