aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/detail/view/modal-dtmpl-view.tsx

@@ -1,59 +1,72 @@
-import React from 'react';
-import {Modal, ModalProps as AntdModalProps,Form,Button} from 'antd'
-import ActDtmplView, {ActDtmplViewProps} from "./act-dtmpl-view";
-import Scrollbars from 'react-custom-scrollbars';
-interface ModalDtmplViewProps extends  ActDtmplViewProps{
-    height?:any,
-    onCancel:()=>any,
-    open?:boolean,
-    children?:any,
+import React from "react";
+import { Modal, ModalProps as AntdModalProps, Form, Button } from "antd";
+import ActDtmplView, { ActDtmplViewProps } from "./act-dtmpl-view";
+import Scrollbars from "react-custom-scrollbars";
+import { LocaleContext } from "../../locale/LocaleProvider";
+interface ModalDtmplViewProps extends ActDtmplViewProps {
+  height?: any;
+  onCancel: () => any;
+  open?: boolean;
+  children?: any;
 }
 
-interface ModalDtmplViewState {
-
-}
-
-export default class ModalDtmplView extends React.PureComponent<ModalDtmplViewProps, ModalDtmplViewState> {
-
-    static defaultProps = {
-        showConfirm: true,
-        height:500,
-        //antd modal
-        forceRender:true,
-        style:{maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
-        cancelText:"取消",
-        form:Form.useForm,
-    }
-    static state={
-        viewOrEdit:'view',
-    }
+interface ModalDtmplViewState {}
 
+export default class ModalDtmplView extends React.PureComponent<
+  ModalDtmplViewProps,
+  ModalDtmplViewState
+> {
+  static defaultProps = {
+    showConfirm: true,
+    height: 500,
+    //antd modal
+    forceRender: true,
+    style: { maxWidth: "calc(100vw - 60px)", maxHeight: "calc(100vh - 50px)" },
+    cancelText: "取消",
+    form: Form.useForm,
+  };
+  static state = {
+    viewOrEdit: "view",
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    // onCancel=()=>{
-    //
-    // }
+  // onCancel=()=>{
+  //
+  // }
 
-    render() {
-        // console.log('antdModalProps:',this.antdModalProps);
-        const {code,sourceId,serverKey,open,onCancel,height} = this.props
-
-        return <Modal
-            open={open}
-            title={"查看"}
-            width={"82vw"}
-            centered
-            wrapClassName={'aaa'}
-            bodyStyle={{height: height, overflow: 'auto'}}
-            onCancel={onCancel}
-            footer={[
-                <Button key="back"  onClick={onCancel}>
-                    取 消
-                </Button>]}
-        >
-            <Scrollbars  autoHide autoHideTimeout={1000}>
-            {code?<ActDtmplView serverKey={serverKey} showRightNav={false} sourceId={sourceId}  code={code} />:""}
-            </Scrollbars>
-        </Modal>
-    }
-
-}
+  render() {
+    // console.log('antdModalProps:',this.antdModalProps);
+    const { code, sourceId, serverKey, open, onCancel, height } = this.props;
+    const { translate } = this.context;
+    return (
+      <Modal
+        open={open}
+        title={translate("${查看}")}
+        width={"82vw"}
+        centered
+        wrapClassName={"aaa"}
+        bodyStyle={{ height: height, overflow: "auto" }}
+        onCancel={onCancel}
+        footer={[
+          <Button key="back" onClick={onCancel}>
+            {translate("${取消}")}
+          </Button>,
+        ]}
+      >
+        <Scrollbars autoHide autoHideTimeout={1000}>
+          {code ? (
+            <ActDtmplView
+              serverKey={serverKey}
+              showRightNav={false}
+              sourceId={sourceId}
+              code={code}
+            />
+          ) : (
+            ""
+          )}
+        </Scrollbars>
+      </Modal>
+    );
+  }
+}

package/src/aldehyde/detail/view/snapshot-timeline.tsx

@@ -1,131 +1,164 @@
-import React from 'react'
-import {Button, Drawer, Timeline} from 'antd'
+import React from "react";
+import { Button, Drawer, Timeline } from "antd";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
-import '../dtmpl.css';
-import {DtmplConfig} from "../../tmpl/interface";
-import Units from '../../units';
+import "../dtmpl.css";
+import { DtmplConfig } from "../../tmpl/interface";
+import Units from "../../units";
 import DtmplView from "./dtmpl-view";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 export interface SnapshotTimelineProps {
-    sourceId: string;
-    serverKey?:string,
-    code: string;
-    showSnapshot?: (id: number) => void;
-    onClose: () => void;
-    open: boolean;
-    dtmplConfig: DtmplConfig;
-};
+  sourceId: string;
+  serverKey?: string;
+  code: string;
+  showSnapshot?: (id: number) => void;
+  onClose: () => void;
+  open: boolean;
+  dtmplConfig: DtmplConfig;
+}
 
 export interface SnapshotTimelineStat {
-    list?: any[],
-    loading?: boolean,
-    current?: number;
-};
-
-class SnapshotTimeline extends React.PureComponent<SnapshotTimelineProps, SnapshotTimelineStat> {
-    static defaultProps = {}
-
-    state = {
-        list: undefined,
-        loading: false,
-        current: undefined,
-    }
+  list?: any[];
+  loading?: boolean;
+  current?: number;
+}
 
-    async componentDidMount() {
+class SnapshotTimeline extends React.PureComponent<
+  SnapshotTimelineProps,
+  SnapshotTimelineStat
+> {
+  static defaultProps = {};
 
-    }
+  state = {
+    list: undefined,
+    loading: false,
+    current: undefined,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    async componentDidUpdate(prevProps) {
-        const {open} = this.props;
-        const {list} = this.state;
-        if (open && !list) {
-            this.loadData();
-        }
-    }
+  async componentDidMount() {}
 
-    loadData = async () => {
-        const {sourceId, code, showSnapshot,serverKey} = this.props;
-        const {current} = this.state;
-        if (code) {
-            this.setState({
-                loading: true,
-            })
-            const list = await HcserviceV3.requestVersionList(serverKey, sourceId, code);
-            this.setState({
-                list, current: !current && list.length > 0 ? list[0].code : current,
-                loading: false,
-            })
-        }
+  async componentDidUpdate(prevProps) {
+    const { open } = this.props;
+    const { list } = this.state;
+    if (open && !list) {
+      this.loadData();
     }
+  }
 
-    onChange = (code: number) => {
-        const {showSnapshot} = this.props;
-        this.setState({
-            current: code
-        })
-        showSnapshot(code);
+  loadData = async () => {
+    const { sourceId, code, showSnapshot, serverKey } = this.props;
+    const { current } = this.state;
+    if (code) {
+      this.setState({
+        loading: true,
+      });
+      const list = await HcserviceV3.requestVersionList(
+        serverKey,
+        sourceId,
+        code
+      );
+      this.setState({
+        list,
+        current: !current && list.length > 0 ? list[0].code : current,
+        loading: false,
+      });
     }
+  };
 
-    detailHistory = () => {
-        const {list, current} = this.state;
-        let detailHistory
-        if (list.length > 0) {
-            detailHistory = list.map((item, index) => {
-                const isCurrentItem = (current ? item.code === current : false);
-                const color = isCurrentItem ? "red" : "blue";
-                return <Timeline.Item color={color} key={index}>
-                    {Units.formateDate(item.time)}<br/>
-                    {`` + item.userName}
-                    {isCurrentItem ? "" : <Button
-                        style={{marginLeft: 10}}
-                        type="primary"
-                        size="small"
-                        onClick={() => this.onChange(item.code)}
-                    >查看</Button>
-                    }
-                </Timeline.Item>
-            })
-
-            return detailHistory;
-        }
-    }
+  onChange = (code: number) => {
+    const { showSnapshot } = this.props;
+    this.setState({
+      current: code,
+    });
+    showSnapshot(code);
+  };
 
-    render() {
-        const {open, onClose, dtmplConfig, sourceId,  code,serverKey} = this.props;
-        const {list, current} = this.state;
+  detailHistory = () => {
+    const { list, current } = this.state;
+    const { translate } = this.context;
+    let detailHistory;
+    if (list.length > 0) {
+      detailHistory = list.map((item, index) => {
+        const isCurrentItem = current ? item.code === current : false;
+        const color = isCurrentItem ? "red" : "blue";
         return (
-            <>
-                <Drawer
-                    title="快照列表"
-                    closable={true}
-                    onClose={onClose}
-                    open={open}
-                    width={350}
-                >
-                    {list && list.length > 0 ? <Timeline mode="alternate">
-                        {this.detailHistory()}
-                    </Timeline> : "暂无历史记录"}
-                </Drawer>
-                <Drawer
-                    placement={'left'}
-                    title="快照查看"
-                    closable={true}
-                    mask={false}
-                    onClose={onClose}
-                    open={open}
-                    width={'calc(100% - 380px)'}
-                    style={{
-                        maxWidth: 1960,
-                    }}
-                >
-                    <DtmplView serverKey={serverKey} showRightNav={false} dtmplConfig={dtmplConfig} sourceId={sourceId}
-                                code={code} versionId={current}></DtmplView>
-                </Drawer>
-            </>
+          <Timeline.Item color={color} key={index}>
+            {Units.formateDate(item.time)}
+            <br />
+            {`` + item.userName}
+            {isCurrentItem ? (
+              ""
+            ) : (
+              <Button
+                style={{ marginLeft: 10 }}
+                type="primary"
+                size="small"
+                onClick={() => this.onChange(item.code)}
+              >
+                {translate("${查看}")}
+              </Button>
+            )}
+          </Timeline.Item>
         );
+      });
+
+      return detailHistory;
     }
-}
+  };
 
+  render() {
+    const {
+      open,
+      onClose,
+      dtmplConfig,
+      sourceId,
+      code,
+      serverKey,
+    } = this.props;
+    const { list, current } = this.state;
+    const { translate } = this.context;
 
-export default SnapshotTimeline;
+    return (
+      <>
+        <Drawer
+          title={translate("${快照列表}")}
+          closable={true}
+          onClose={onClose}
+          open={open}
+          width={350}
+        >
+          {list && list.length > 0 ? (
+            <Timeline mode="alternate">{this.detailHistory()}</Timeline>
+          ) : (
+            translate("${暂无历史记录}")
+          )}
+        </Drawer>
+        <Drawer
+          placement={"left"}
+          title={translate("${快照查看}")}
+          closable={true}
+          mask={false}
+          onClose={onClose}
+          open={open}
+          width={"calc(100% - 380px)"}
+          style={{
+            maxWidth: 1960,
+          }}
+        >
+          <DtmplView
+            serverKey={serverKey}
+            showRightNav={false}
+            dtmplConfig={dtmplConfig}
+            sourceId={sourceId}
+            code={code}
+            versionId={current}
+          ></DtmplView>
+        </Drawer>
+      </>
+    );
+  }
+}
 
+export default SnapshotTimeline;