aldehyde 0.2.97 → 0.2.99

package/src/aldehyde/controls/view-control.tsx

@@ -1,206 +1,268 @@
-import React from 'react'
-import {Alert, Badge, Input, Spin,Tooltip} from "antd";
+import React from "react";
+import { Alert, Badge, Input, Spin, Tooltip } from "antd";
 import loadable from "@loadable/component";
-import {ControlHolderType, FieldConfig, ViewOrEdit} from "../tmpl/interface";
-import ControlTypeSupportor from '../tmpl/control-type-supportor';
-import EnumTags from './enum-tag';
-import EnumBadge from './enum-badge';
+import { ControlHolderType, FieldConfig, ViewOrEdit } from "../tmpl/interface";
+import ControlTypeSupportor from "../tmpl/control-type-supportor";
+import EnumTags from "./enum-tag";
+import EnumBadge from "./enum-badge";
 import Steps from "./steps";
-import Units from './../units';
+import Units from "./../units";
 import Rfield from "./rfield";
 import dayjs from "dayjs";
-import Progress from './progress'
+import Progress from "./progress";
 
-import EllipsisText from './text/ellipsis-text'
-import {ProgramConfig} from "../index";
+import EllipsisText from "./text/ellipsis-text";
+import { ProgramConfig, useLocale } from "../index";
 
-const Loading = <Spin tip="Loading...">
-    <Alert
-        message="正在加载数据。。。"
-        description="初次访问加载数据较多，可能需要几秒或几分钟，请耐心等待！！"
-        type="info"
-    />
-</Spin>;
-const Signature = loadable(() =>
-    import("./signature"), {fallback: Loading});
-const ChemStruc = loadable(() =>
-    import("./chemstruc/graph"), {fallback: Loading});
-const SqlCodeEditor = loadable(() =>
-    import("./code-editor/sql-code-editor"), {fallback: Loading});
-const ColorPicker = loadable(() =>
-    import("./color-picker"), {fallback: Loading});
-const FileView = loadable(() =>
-    import("../controls/file-view"), {fallback: Loading});
+// const Loading = (() => {
+//   const { translate } = useLocale();
+
+//   return (
+//     <Spin tip="Loading...">
+//       <Alert
+//         message={translate("${正在加载数据}...")}
+//         description={translate(
+//           "${初次访问加载数据较多, 可能需要几秒或几分钟, 请耐心等待!!}"
+//         )}
+//         type="info"
+//       />
+//     </Spin>
+//   );
+// })();
+// 暂时先这样, 异步组件国际化有问题
+const Loading = <>loading</>;
+
+const Signature = loadable(() => import("./signature"), { fallback: Loading });
+const ChemStruc = loadable(() => import("./chemstruc/graph"), {
+  fallback: Loading,
+});
+const SqlCodeEditor = loadable(() => import("./code-editor/sql-code-editor"), {
+  fallback: Loading,
+});
+const ColorPicker = loadable(() => import("./color-picker"), {
+  fallback: Loading,
+});
+const FileView = loadable(() => import("../controls/file-view"), {
+  fallback: Loading,
+});
 interface FieldViewControlProps {
-    serverKey?:string,
-    value?: any;
-    fieldConfig: FieldConfig;
-    holderType:ControlHolderType;
-    style?:any;
+  serverKey?: string;
+  value?: any;
+  fieldConfig: FieldConfig;
+  holderType: ControlHolderType;
+  style?: any;
 }
 
-function renderControl(fieldConfig: FieldConfig, fieldValue: any,pHolderType:ControlHolderType, width: any,other:any) {
+function renderControl(
+  fieldConfig: FieldConfig,
+  fieldValue: any,
+  pHolderType: ControlHolderType,
+  width: any,
+  other: any
+) {
+  const { translate } = useLocale();
 
-    let itemType = ControlTypeSupportor.getControlType(fieldConfig, fieldValue);
-    let holderType:ControlHolderType=pHolderType;
-    if(!holderType){
-        holderType="descriptions";
-    }
+  let itemType = ControlTypeSupportor.getControlType(fieldConfig, fieldValue);
+  let holderType: ControlHolderType = pHolderType;
+  if (!holderType) {
+    holderType = "descriptions";
+  }
 
-    const colNum = fieldConfig.colNum;
-    let scalableWidth = width;
-    if (colNum == 2) {
-        scalableWidth = width * colNum * 1.52;
-    }
-    let viewControl = undefined;
+  const colNum = fieldConfig.colNum;
+  let scalableWidth = width;
+  if (colNum == 2) {
+    scalableWidth = width * colNum * 1.52;
+  }
+  let viewControl = undefined;
 
-    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
-    let disabled: boolean = fieldConfig.disabled;
-    let value = fieldValue ? fieldValue : fieldConfig.defaultValue && !Units.isConfigDefaultValue(fieldConfig.defaultValue) ? fieldConfig.defaultValue : "";
-    let viewOrEdit:ViewOrEdit='view';
-    let controlProps = {
-        fieldConfig, itemType, value,viewOrEdit,...other
-    }
-    //自定义组件为先
-    if(ProgramConfig.getCustomEditControl(itemType)){
-        return React.createElement(ProgramConfig.getCustomViewControl(itemType),controlProps);
-    }
+  let placeholder = !fieldConfig.disabled
+    ? translate("${请输入}${" + fieldConfig.title + "}")
+    : translate("${无需输入}");
+  let disabled: boolean = fieldConfig.disabled;
+  let value = fieldValue
+    ? fieldValue
+    : fieldConfig.defaultValue &&
+      !Units.isConfigDefaultValue(fieldConfig.defaultValue)
+    ? fieldConfig.defaultValue
+    : "";
+  let viewOrEdit: ViewOrEdit = "view";
+  let controlProps = {
+    fieldConfig,
+    itemType,
+    value,
+    viewOrEdit,
+    ...other,
+  };
+  //自定义组件为先
+  if (ProgramConfig.getCustomEditControl(itemType)) {
+    return React.createElement(
+      ProgramConfig.getCustomViewControl(itemType),
+      controlProps
+    );
+  }
 
-    const unSupportControl =
-        <span className="infoStyle">{`暂未完成-${itemType}`}</span>;
+  const unSupportControl = (
+    <span className="infoStyle">
+      {translate("${暂未完成}-${" + itemType + "}")}
+    </span>
+  );
 
-    switch (itemType) {
-        case 'int':
-        case 'decimal':
-        case 'float':
-        case 'double':
-        case 'intrange':
-        case 'decimalrange':
-        case "range":
-            viewControl = <span className="infoStyle">{value}</span>
-            break;
-        case 'date-YY':
-        case 'date-M1':
-        case 'date':
-        case 'datetime-HH':
-        case 'datetime-mm':
-        case 'datetime':
-        case 'time-HH':
-        case 'time-mm':
-        case 'time':
-            viewControl = <span className="infoStyle">{value ? dayjs(value).format(Units.getDayjsFormat(itemType)) : undefined}</span>
-            break;
-        case 'daterange-YY':
-        case 'daterange-M1':
-        case 'daterange':
-        case 'datetimerange-HH':
-        case 'datetimerange-mm':
-        case 'datetimerange':
-        case 'timerange-HH':
-        case 'timerange-mm':
-        case 'timerange':
-            viewControl = <span className="infoStyle">{value}</span>
-            break;
-        case 'text':
-        case 'textarea':
-        case 'preselect':
-            if(holderType=='table'){
-                viewControl=<EllipsisText maxWidth={'400px'} isHtml={false} value={value} showMax={fieldConfig.ellipsisLength} ></EllipsisText>
-            }else{
-                viewControl = <span className="infoStyle">{value}</span>
-            }
-            break;
-        case 'select':
-        case 'radio':
-        case "yes-no-switch":
-            viewControl = <EnumBadge {...controlProps}/>
-            break;
-        case 'yes-no-radio':
-            viewControl =  <span className="infoStyle">
-                      {value ?
-                          <Badge color={value=='是' ?  'green':'red'} text={value}/>
-                          : null}
-            </span>
-            break;
-        case 'multiselect':
-        case 'checkbox':
-            viewControl = <EnumTags {...controlProps} />
-            break;
-        case 'html':
-            if(holderType=='table'){
-                viewControl=<EllipsisText isHtml={true} value={value} ></EllipsisText>
-            }else{
-                viewControl=<div dangerouslySetInnerHTML={{__html: value}} ></div>;
-            }
-            break;
-        case 'steps':
-            viewControl = <Steps {...controlProps} />
-            break;
-        case 'password':
-            if(value){
-                viewControl = <Tooltip title={value} color={'#fff1b8'} {...controlProps}>
-                    <span className="infoStyle">********</span>
-                </Tooltip>
-            }else{
-                viewControl=null;
-            }
-            break;
-        case 'caselect':
-            viewControl = <span className="infoStyle">{value}</span>;
-            break;
-        case 'relation':
-            viewControl = unSupportControl
-            break;
-        case 'file':
-        case 'picture':
-        case 'video':
-            viewControl = <FileView {...controlProps}></FileView>
-            break;
-        case 'non-download-file':
-            viewControl = <FileView {...controlProps} downloadable={false}></FileView>
-            break;
-        case 'chemstruc':
-            viewControl = <ChemStruc  {...controlProps}></ChemStruc>
-            //viewControl = unSupportControl
-            break;
-        case 'sql-code-editor':
-            viewControl = <SqlCodeEditor viewOrEdit={'view'} {...controlProps}></SqlCodeEditor>
-            break;
-        case 'relselect':
-        case 'refselect':
-        case 'entity-select':
-        case 'table-entity-select':
-            viewControl = <Rfield {...controlProps}/>;
-            break;
-        case 'progress':
-            viewControl=<Progress {...controlProps}></Progress>
-            break;
-        case 'signature':
-            viewControl=<Signature {...controlProps}></Signature>
-            break;
-        case 'color':
-            viewControl = <ColorPicker {...controlProps}></ColorPicker>
-            break;
-        case 'url':
-            viewControl = <a target={"_blank"} href={value}>网址</a>
-            break;
-        case 'hidden'://
-            viewControl = <Input
-                type="hidden"
-                value={fieldValue}
-                disabled={true}
-            />;
-            break;
-        default:
-            viewControl =unSupportControl;
-            break;
-    }
-    return viewControl;
+  switch (itemType) {
+    case "int":
+    case "decimal":
+    case "float":
+    case "double":
+    case "intrange":
+    case "decimalrange":
+    case "range":
+      viewControl = <span className="infoStyle">{value}</span>;
+      break;
+    case "date-YY":
+    case "date-M1":
+    case "date":
+    case "datetime-HH":
+    case "datetime-mm":
+    case "datetime":
+    case "time-HH":
+    case "time-mm":
+    case "time":
+      viewControl = (
+        <span className="infoStyle">
+          {value
+            ? dayjs(value).format(Units.getDayjsFormat(itemType))
+            : undefined}
+        </span>
+      );
+      break;
+    case "daterange-YY":
+    case "daterange-M1":
+    case "daterange":
+    case "datetimerange-HH":
+    case "datetimerange-mm":
+    case "datetimerange":
+    case "timerange-HH":
+    case "timerange-mm":
+    case "timerange":
+      viewControl = <span className="infoStyle">{value}</span>;
+      break;
+    case "text":
+    case "textarea":
+    case "preselect":
+      if (holderType == "table") {
+        viewControl = (
+          <EllipsisText
+            maxWidth={"400px"}
+            isHtml={false}
+            value={value}
+            showMax={fieldConfig.ellipsisLength}
+          ></EllipsisText>
+        );
+      } else {
+        viewControl = <span className="infoStyle">{value}</span>;
+      }
+      break;
+    case "select":
+    case "radio":
+    case "yes-no-switch":
+      viewControl = <EnumBadge {...controlProps} />;
+      break;
+    case "yes-no-radio":
+      viewControl = (
+        <span className="infoStyle">
+          {value ? (
+            <Badge
+              color={value == translate("${是}") ? "green" : "red"}
+              text={value}
+            />
+          ) : null}
+        </span>
+      );
+      break;
+    case "multiselect":
+    case "checkbox":
+      viewControl = <EnumTags {...controlProps} />;
+      break;
+    case "html":
+      if (holderType == "table") {
+        viewControl = <EllipsisText isHtml={true} value={value}></EllipsisText>;
+      } else {
+        viewControl = <div dangerouslySetInnerHTML={{ __html: value }}></div>;
+      }
+      break;
+    case "steps":
+      viewControl = <Steps {...controlProps} />;
+      break;
+    case "password":
+      if (value) {
+        viewControl = (
+          <Tooltip title={value} color={"#fff1b8"} {...controlProps}>
+            <span className="infoStyle">********</span>
+          </Tooltip>
+        );
+      } else {
+        viewControl = null;
+      }
+      break;
+    case "caselect":
+      viewControl = <span className="infoStyle">{value}</span>;
+      break;
+    case "relation":
+      viewControl = unSupportControl;
+      break;
+    case "file":
+    case "picture":
+    case "video":
+      viewControl = <FileView {...controlProps}></FileView>;
+      break;
+    case "non-download-file":
+      viewControl = (
+        <FileView {...controlProps} downloadable={false}></FileView>
+      );
+      break;
+    case "chemstruc":
+      viewControl = <ChemStruc {...controlProps}></ChemStruc>;
+      //viewControl = unSupportControl
+      break;
+    case "sql-code-editor":
+      viewControl = (
+        <SqlCodeEditor viewOrEdit={"view"} {...controlProps}></SqlCodeEditor>
+      );
+      break;
+    case "relselect":
+    case "refselect":
+    case "entity-select":
+    case "table-entity-select":
+      viewControl = <Rfield {...controlProps} />;
+      break;
+    case "progress":
+      viewControl = <Progress {...controlProps}></Progress>;
+      break;
+    case "signature":
+      viewControl = <Signature {...controlProps}></Signature>;
+      break;
+    case "color":
+      viewControl = <ColorPicker {...controlProps}></ColorPicker>;
+      break;
+    case "url":
+      viewControl = (
+        <a target={"_blank"} href={value}>
+          {translate("${网址}")}
+        </a>
+      );
+      break;
+    case "hidden": //
+      viewControl = <Input type="hidden" value={fieldValue} disabled={true} />;
+      break;
+    default:
+      viewControl = unSupportControl;
+      break;
+  }
+  return viewControl;
 }
 
 const ViewControl: React.FC<FieldViewControlProps> = (props) => {
-    const {fieldConfig, value,holderType,...other} = props;
-    return renderControl(fieldConfig, value, holderType,null,other);
-}
+  const { fieldConfig, value, holderType, ...other } = props;
+  return renderControl(fieldConfig, value, holderType, null, other);
+};
 
-export default ViewControl;
+export default ViewControl;

package/src/aldehyde/custom-page/def-custom-page.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Typography } from "antd";
+import { useLocale } from "../locale/useLocale";
+const { Title } = Typography;
+
+const DefCustomPage = (props: { pageName: string }) => {
+  const { translate } = useLocale();
+  return (
+    <Typography>
+      <Title>{translate("${没有找到自定义页面}")}</Title>
+      <Title level={5}>url:/{props.pageName}</Title>
+      <Title level={5}>{translate("${请确认配置}")}</Title>
+    </Typography>
+  );
+};
+
+export default DefCustomPage;

package/src/aldehyde/custom-page/dtmpl-custom-edit-modal-page.tsx

@@ -1,78 +1,87 @@
-import React, {ReactNode} from 'react';
-import {Button, Drawer, Modal, Popconfirm, Space} from 'antd'
+import React, { ReactNode } from "react";
+import { Button, Drawer, Modal, Popconfirm, Space } from "antd";
 import DefCustomPage from "./def-custom-page";
-import {ProgramConfig} from "../index";
+import { ProgramConfig } from "../index";
+import { LocaleContext } from "../locale/LocaleProvider";
 
 interface DtmplCustomEditModalPageProps {
-    serverKey?:string,
-    height?: any,
-    width?: number,
-    bodyWidth?:number|string,
-    open: boolean,
-    onOk: () => void,
-    title?: ReactNode,
-    code?: string,//详情模板code，添加时code为null
-    mainCode?: string,//模块名称
-    sourceId: string,
-    customPath: string,
+  serverKey?: string;
+  height?: any;
+  width?: number;
+  bodyWidth?: number | string;
+  open: boolean;
+  onOk: () => void;
+  title?: ReactNode;
+  code?: string; //详情模板code，添加时code为null
+  mainCode?: string; //模块名称
+  sourceId: string;
+  customPath: string;
 }
 
-interface DtmplCustomEditModalPageState {
+interface DtmplCustomEditModalPageState {}
 
-}
-
-export default class DtmplCustomEditModalPage extends React.PureComponent<DtmplCustomEditModalPageProps, DtmplCustomEditModalPageState> {
-    state = {}
+export default class DtmplCustomEditModalPage extends React.PureComponent<
+  DtmplCustomEditModalPageProps,
+  DtmplCustomEditModalPageState
+> {
+  state = {};
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    static defaultProps = {
-        height: "82vh",
-        width:"82vw",
-        bodyWidth:'100%',
-        forceRender: true,
-        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
-    }
+  static defaultProps = {
+    height: "82vh",
+    width: "82vw",
+    bodyWidth: "100%",
+    forceRender: true,
+    style: { maxWidth: "calc(100vw - 60px)", maxHeight: "calc(100vh - 50px)" },
+  };
 
-    getFooter=()=>{
-        const {onOk}=this.props;
-        const footerButtons = [];
-        footerButtons.unshift(
-            <Button onClick={onOk}  type={'primary'} >
-                关 闭
-            </Button>)
-        return footerButtons;
-    }
+  getFooter = () => {
+    const { onOk } = this.props;
+    const { translate } = this.context;
+    const footerButtons = [];
+    footerButtons.unshift(
+      <Button onClick={onOk} type={"primary"}>
+        {translate("${关闭}")}
+      </Button>
+    );
+    return footerButtons;
+  };
 
-    customPage = () => {
-        const {code, sourceId, open, mainCode, customPath,onOk} = this.props
-        if (open) {
-            let Page = ProgramConfig.getCustomPage(customPath) || DefCustomPage;
-            return React.createElement(Page, {code, sourceId, mainCode,pageName:customPath,onOk});
-        }
+  customPage = () => {
+    const { code, sourceId, open, mainCode, customPath, onOk } = this.props;
+    if (open) {
+      let Page = ProgramConfig.getCustomPage(customPath) || DefCustomPage;
+      return React.createElement(Page, {
+        code,
+        sourceId,
+        mainCode,
+        pageName: customPath,
+        onOk,
+      });
     }
+  };
 
-    render() {
-        const {height, onOk, open,  width, title,bodyWidth} = this.props
+  render() {
+    const { height, onOk, open, width, title, bodyWidth } = this.props;
+    const { translate } = this.context;
 
-        return (<Modal
-                open={open}
-                width={width}
-                title={title}
-                closable={false}
-                bodyStyle={{height: height,width:bodyWidth,overflow: 'auto'}}
-                destroyOnClose={true}
-                centered
-                onCancel={onOk}
-                footer={[<Button  onClick={()=>onOk()}>
-                    关 闭
-                </Button>]
-                }
-            >
-                {
-                    this.customPage()
-                }
-            </Modal>
-        )
-
-    }
-
-}
+    return (
+      <Modal
+        open={open}
+        width={width}
+        title={title}
+        closable={false}
+        bodyStyle={{ height: height, width: bodyWidth, overflow: "auto" }}
+        destroyOnClose={true}
+        centered
+        onCancel={onOk}
+        footer={[
+          <Button onClick={() => onOk()}>{translate("${关闭}")}</Button>,
+        ]}
+      >
+        {this.customPage()}
+      </Modal>
+    );
+  }
+}