aldehyde 0.2.97 → 0.2.99

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;