aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/detail/edit/row-edit-card.tsx

@@ -1,126 +1,177 @@
-import React from 'react';
-import {Button, Card, FormInstance, Popconfirm, Popover, Space, Tooltip} from 'antd'
-import {CloseOutlined} from '@ant-design/icons'
-import {DtmplData, FieldGroupConfig} from "../../tmpl/interface";
-import FieldGroupForm from '../../form/field-group-form';
-import {ButtonType} from "antd/es/button";
+import React from "react";
+import {
+  Button,
+  Card,
+  FormInstance,
+  Popconfirm,
+  Popover,
+  Space,
+  Tooltip,
+} from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+import { DtmplData, FieldGroupConfig } from "../../tmpl/interface";
+import FieldGroupForm from "../../form/field-group-form";
+import { ButtonType } from "antd/es/button";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 interface RowEditCardProps {
-    serverKey?:string,
-    height?: any,
-    onCancel?: () => void,
-    onOk: (value: DtmplData,hidden:boolean) => void,
-    fieldGroupConfig: FieldGroupConfig,
-    dtmplData?: DtmplData,
-    okButtonType?: ButtonType,
-    okDanger?: boolean,
-    needConfirm?: boolean,
+  serverKey?: string;
+  height?: any;
+  onCancel?: () => void;
+  onOk: (value: DtmplData, hidden: boolean) => void;
+  fieldGroupConfig: FieldGroupConfig;
+  dtmplData?: DtmplData;
+  okButtonType?: ButtonType;
+  okDanger?: boolean;
+  needConfirm?: boolean;
 }
 
 interface RowEditCardState {
-    isAdded?:boolean,
+  isAdded?: boolean;
 }
 
-export default class RowEditCard extends React.PureComponent<RowEditCardProps, RowEditCardState> {
-    formRef = React.createRef<FormInstance>();
-    static defaultProps = {
-        forceRender: true,
-        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
-        needConfirm: false,
-        okButtonType: 'primary',
-        okDanger: false,
-    }
-    state = {
-        isAdded:false,
-    }
+export default class RowEditCard extends React.PureComponent<
+  RowEditCardProps,
+  RowEditCardState
+> {
+  formRef = React.createRef<FormInstance>();
+  static defaultProps = {
+    forceRender: true,
+    style: { maxWidth: "calc(100vw - 60px)", maxHeight: "calc(100vh - 50px)" },
+    needConfirm: false,
+    okButtonType: "primary",
+    okDanger: false,
+  };
+  state = {
+    isAdded: false,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    async componentDidMount() {
+  async componentDidMount() {}
 
-    }
+  async componentDidUpdate() {
+    //this.reset();
+  }
 
-    async componentDidUpdate() {
-        //this.reset();
-    }
+  reset = () => {
+    // if (this.formRef.current) {
+    //     this.formRef.current.resetFields();
+    // }
+  };
 
-    reset = () => {
-        // if (this.formRef.current) {
-        //     this.formRef.current.resetFields();
-        // }
-    }
+  onOk = () => {
+    this.setState({ isAdded: false });
+    this.formRef.current.submit();
+  };
+  add = () => {
+    this.setState({ isAdded: true });
+    this.formRef.current.submit();
+  };
 
-    onOk = () => {
-        this.setState({isAdded:false})
-        this.formRef.current.submit();
+  getTitle = () => {
+    const { fieldGroupConfig, dtmplData } = this.props;
+    const { translate } = this.context;
 
+    let title = "";
+    title = fieldGroupConfig.title;
+    if (dtmplData) {
+      title = title + translate("[${行编辑}]");
+    } else {
+      title = title + translate("[${新建一行}]");
     }
-    add = () => {
-        this.setState({isAdded:true})
-        this.formRef.current.submit();
-    }
+    return title;
+  };
 
-    getTitle = () => {
-        const {fieldGroupConfig, dtmplData} = this.props
-        let title = "";
-        title = fieldGroupConfig.title;
-        if (dtmplData) {
-            title = title + "【行编辑】";
-        } else {
-            title = title + "【新建一行】";
-        }
-        return title;
+  render() {
+    const {
+      height,
+      onOk,
+      fieldGroupConfig,
+      dtmplData,
+      onCancel,
+      okButtonType,
+      needConfirm,
+      okDanger,
+      serverKey,
+    } = this.props;
+    const { isAdded } = this.state;
+    const { translate } = this.context;
+
+    function okButton(onOk) {
+      return needConfirm ? (
+        okDanger ? (
+          <Popconfirm
+            placement="rightBottom"
+            title={translate("${确定要执行提交吗}?")}
+            onConfirm={onOk}
+            okText={translate("${确定}")}
+            cancelText={translate("${取消}")}
+            okType={"danger"}
+          >
+            <Button type={okButtonType} danger={true} size="small">
+              确定
+            </Button>
+          </Popconfirm>
+        ) : (
+          <Popconfirm
+            placement="rightBottom"
+            title={translate("${确定要执行提交吗}?")}
+            onConfirm={onOk}
+            okText={translate("${确定}")}
+            cancelText={translate("${取消}")}
+          >
+            <Button size="small" type={okButtonType}>
+              {translate("${确定}")}
+            </Button>
+          </Popconfirm>
+        )
+      ) : (
+        <Button type={okButtonType} size="small" onClick={onOk}>
+          {translate("${确定}")}
+        </Button>
+      );
     }
 
-    render() {
-        const {height, onOk, fieldGroupConfig, dtmplData, onCancel, okButtonType, needConfirm, okDanger,serverKey} = this.props
-        const {isAdded} = this.state;
+    return (
+      <Card
+        style={{ width: 1000 }}
+        title={this.getTitle()}
+        bodyStyle={{ overflow: "auto" }}
+        extra={
+          <>
+            <Space size={[8, 0]}>
+              {/*<Button onClick={this.reset}>重置</Button>*/}
+              {okButton(this.onOk)}
+              {dtmplData ? (
+                ""
+              ) : (
+                <Tooltip placement="top" title={translate("${可连续添加}")}>
+                  <Button type={"primary"} size={"small"} onClick={this.add}>
+                    {translate("${添加}")}
+                  </Button>
+                </Tooltip>
+              )}
 
-        function okButton(onOk) {
-            return needConfirm ? okDanger ?
-                <Popconfirm
-                    placement="rightBottom"
-                    title={`确定要执行提交吗？`}
-                    onConfirm={onOk}
-                    okText="确定"
-                    cancelText="取消"
-                    okType={'danger'}
-                >
-                    <Button type={okButtonType} danger={true} size="small"
-                    >确定</Button>
-                </Popconfirm> :
-                <Popconfirm
-                    placement="rightBottom"
-                    title={`确定要执行提交吗？`}
-                    onConfirm={onOk}
-                    okText="确定"
-                    cancelText="取消"
-                >
-                    <Button size="small" type={okButtonType}
-                    >确定</Button>
-                </Popconfirm> :
-                <Button type={okButtonType} size="small" onClick={onOk}
-                >确定</Button>
+              {onCancel ? (
+                <Button onClick={onCancel}>
+                  <CloseOutlined />
+                </Button>
+              ) : (
+                ""
+              )}
+            </Space>
+          </>
         }
-
-        return <Card
-            style={{width: 1000}}
-            title={this.getTitle()}
-            bodyStyle={{overflow: 'auto'}}
-            extra={<><Space size={[8, 0]}>
-                {/*<Button onClick={this.reset}>重置</Button>*/}
-                {okButton(this.onOk)}
-                {
-                    dtmplData?"":  <Tooltip placement="top" title="可连续添加">
-                        <Button type={'primary'} size={'small'} onClick={this.add}>添加</Button>
-                    </Tooltip>
-                }
-
-                {onCancel ? <Button onClick={onCancel}><CloseOutlined/></Button> : ""}
-            </Space></>}
-        >
-            <FieldGroupForm serverKey={serverKey} fieldGroupConfig={fieldGroupConfig} formRef={this.formRef}
-                            onFinish={(value)=>onOk(value,!isAdded)}
-                            dtmplData={dtmplData} />
-        </Card>
-    }
-
-}
+      >
+        <FieldGroupForm
+          serverKey={serverKey}
+          fieldGroupConfig={fieldGroupConfig}
+          formRef={this.formRef}
+          onFinish={(value) => onOk(value, !isAdded)}
+          dtmplData={dtmplData}
+        />
+      </Card>
+    );
+  }
+}

package/src/aldehyde/detail/rightbar/index.tsx

@@ -1,76 +1,92 @@
-import React from 'react'
-import './index.css'
-import {DtmplConfig, TmplBase} from "../../tmpl/interface";
-import {Affix, Button} from "antd";
+import React from "react";
+import "./index.css";
+import { DtmplConfig, TmplBase } from "../../tmpl/interface";
+import { Affix, Button } from "antd";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 interface RightBarProps {
-    parentId:string,
-    dtmplConfig: DtmplConfig,
-    positionRight?:number
+  parentId: string;
+  dtmplConfig: DtmplConfig;
+  positionRight?: number;
 }
 
+interface RightBarState {}
 
-interface RightBarState {
+export default class RightBar extends React.PureComponent<
+  RightBarProps,
+  RightBarState
+> {
+  static defaultProps = {
+    positionRight: 15,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-}
-
-export default class RightBar extends React.PureComponent<RightBarProps, RightBarState> {
-
-    static defaultProps = {
-        positionRight:15,
-    }
-    scrollToAnchor = (anchor: TmplBase) => {
-        if (anchor) {
-            let anchorElement = document.getElementById(this.props.parentId+anchor.id);
-            if (anchorElement) {
-                anchorElement.scrollIntoView({behavior: "smooth", block: "end"})
-            }
-        }
+  scrollToAnchor = (anchor: TmplBase) => {
+    if (anchor) {
+      let anchorElement = document.getElementById(
+        this.props.parentId + anchor.id
+      );
+      if (anchorElement) {
+        anchorElement.scrollIntoView({ behavior: "smooth", block: "end" });
+      }
     }
-    scroll = (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        const list = document.getElementsByClassName("rightBar")[0]
-        if (list) {
-            const ul = list.getElementsByTagName("ul")[0]
-            ul.style.marginTop = ""
-        }
+  };
+  scroll = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const list = document.getElementsByClassName("rightBar")[0];
+    if (list) {
+      const ul = list.getElementsByTagName("ul")[0];
+      ul.style.marginTop = "";
     }
+  };
 
-    render() {
-        const {dtmplConfig,positionRight} = this.props
-        const cardList: TmplBase[] = [];
+  render() {
+    const { dtmplConfig, positionRight } = this.props;
+    const cardList: TmplBase[] = [];
+    const { translate } = this.context;
 
-        if(dtmplConfig){
-            dtmplConfig.groups.forEach(g => {
-                cardList.push({
-                    title: g.title,
-                    id: g.id,
-                });
-            })
-        }
-
-        if (dtmplConfig && dtmplConfig.premises && dtmplConfig.premises.length > 0) {
-            cardList.push({
-                id: dtmplConfig.premises[0].id, title: '默认字段',
-            });
-        }
-
-        // @ts-ignore
-        return (
-            cardList && cardList.length>3?
-            <Affix  style={{position: 'absolute',top:60,right: positionRight,}}  offsetTop={80}>
-                <div className={'rightBar'} onScroll={this.scroll}>
-                    <ul>
-                        {
-                            cardList ? cardList.map((item, index) =>
-                                <li onClick={() => this.scrollToAnchor(item)} key={index}>{item.title}</li>
+    if (dtmplConfig) {
+      dtmplConfig.groups.forEach((g) => {
+        cardList.push({
+          title: g.title,
+          id: g.id,
+        });
+      });
+    }
 
-                            ) : ""
-                        }
-                    </ul>
-                </div>
-            </Affix>:""
-        )
+    if (
+      dtmplConfig &&
+      dtmplConfig.premises &&
+      dtmplConfig.premises.length > 0
+    ) {
+      cardList.push({
+        id: dtmplConfig.premises[0].id,
+        title: translate("${默认字段}"),
+      });
     }
+
+    // @ts-ignore
+    return cardList && cardList.length > 3 ? (
+      <Affix
+        style={{ position: "absolute", top: 60, right: positionRight }}
+        offsetTop={80}
+      >
+        <div className={"rightBar"} onScroll={this.scroll}>
+          <ul>
+            {cardList
+              ? cardList.map((item, index) => (
+                  <li onClick={() => this.scrollToAnchor(item)} key={index}>
+                    {item.title}
+                  </li>
+                ))
+              : ""}
+          </ul>
+        </div>
+      </Affix>
+    ) : (
+      ""
+    );
+  }
 }