aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/table/column/column-selector.tsx

@@ -1,91 +1,130 @@
 import React from "react";
-import {Checkbox, Col, Row} from "antd";
-import {ColumnConfig,} from "../../tmpl/interface";
-import {MenuOutlined} from '@ant-design/icons';
-import {SortableContainer, SortableElement, SortableHandle} from 'react-sortable-hoc';
-import {arrayMoveImmutable} from 'array-move';
+import { Checkbox, Col, Row } from "antd";
+import { ColumnConfig } from "../../tmpl/interface";
+import { MenuOutlined } from "@ant-design/icons";
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+} from "react-sortable-hoc";
+import { arrayMoveImmutable } from "array-move";
+import { useLocale } from "../../locale/useLocale";
 
 interface ColumnSelectorProps {
-    columns: ColumnConfig[],
-    hiddenColIds: string[],
-    ignoredColIds?: string[],
-    disabledColIds?:string[],
-    onChangeHiddenCols?: (hiddenColIds: string[]) => void;
-    onChangeColSort?: (columns: ColumnConfig[]) => void;
-};
-
-interface ColumnSelectorStat {
+  columns: ColumnConfig[];
+  hiddenColIds: string[];
+  ignoredColIds?: string[];
+  disabledColIds?: string[];
+  onChangeHiddenCols?: (hiddenColIds: string[]) => void;
+  onChangeColSort?: (columns: ColumnConfig[]) => void;
+}
 
-};
+interface ColumnSelectorStat {}
 
 interface SortableElementProps {
-    index:number,
-    value:string,
-    disabledColIds:string[]
-};
+  index: number;
+  value: string;
+  disabledColIds: string[];
+}
 
 interface SortableContainerProps {
-    selected:string[],
-    items:ColumnConfig[],
-    disabledColIds:string[],
-    onChange:(checkedValues:[])=>void
-};
+  selected: string[];
+  items: ColumnConfig[];
+  disabledColIds: string[];
+  onChange: (checkedValues: []) => void;
+}
 
-const SortableCheckbox = SortableElement<SortableElementProps>(({value, index,disabledColIds}) => <Col key={index}  span={24}>
-    <Checkbox disabled={disabledColIds.includes(value.id)} value={value.id}><DragHandle/> {value.title}</Checkbox>
-</Col>);
-const DragHandle = SortableHandle(() => <MenuOutlined style={{cursor: 'grab', color: '#999'}}/>);
-const SortableGroupContainer = SortableContainer<SortableContainerProps>(({items, selected, onChange,disabledColIds}) => {
-    return <Checkbox.Group value={selected} onChange={onChange}>
-        <Row style={{width: '148px'}}>
-            {items.map((value, index) => (
-                <SortableCheckbox key={`item-${value.id}`} index={index} value={value} disabledColIds={disabledColIds}/>
-            ))}
+const SortableCheckbox = SortableElement<SortableElementProps>(
+  ({ value, index, disabledColIds }) => {
+    const { translate } = useLocale();
+    return (
+      <Col key={index} span={24}>
+        <Checkbox disabled={disabledColIds.includes(value.id)} value={value.id}>
+          <DragHandle /> {translate("${" + value.title + "}")}
+        </Checkbox>
+      </Col>
+    );
+  }
+);
+const DragHandle = SortableHandle(() => (
+  <MenuOutlined style={{ cursor: "grab", color: "#999" }} />
+));
+const SortableGroupContainer = SortableContainer<SortableContainerProps>(
+  ({ items, selected, onChange, disabledColIds }) => {
+    return (
+      <Checkbox.Group value={selected} onChange={onChange}>
+        <Row style={{ width: "148px" }}>
+          {items.map((value, index) => (
+            <SortableCheckbox
+              key={`item-${value.id}`}
+              index={index}
+              value={value}
+              disabledColIds={disabledColIds}
+            />
+          ))}
         </Row>
-    </Checkbox.Group>
-});
+      </Checkbox.Group>
+    );
+  }
+);
 
-class ColumnSelector extends React.PureComponent<ColumnSelectorProps, ColumnSelectorStat> {
+class ColumnSelector extends React.PureComponent<
+  ColumnSelectorProps,
+  ColumnSelectorStat
+> {
+  static defaultProps = {
+    ignoredColIds: [],
+  };
 
-    static defaultProps = {
-        ignoredColIds: [],
+  onChange = (checkedValues) => {
+    const { onChangeHiddenCols, columns, ignoredColIds } = this.props;
+    //console.log('checked = ', checkedValues);
+    const hiddenColIds = [];
+    for (let c of columns) {
+      if (
+        checkedValues.length != 0 &&
+        !checkedValues.includes(c.id) &&
+        !ignoredColIds.includes(c.id)
+      ) {
+        hiddenColIds.push(c.id);
+      }
     }
-
-    onChange = (checkedValues) => {
-        const {onChangeHiddenCols, columns, ignoredColIds} = this.props;
-        //console.log('checked = ', checkedValues);
-        const hiddenColIds = [];
-        for (let c of columns) {
-            if (checkedValues.length != 0 && !checkedValues.includes(c.id) && !ignoredColIds.includes(c.id)) {
-                hiddenColIds.push(c.id);
-            }
-        }
-        onChangeHiddenCols(hiddenColIds);
+    onChangeHiddenCols(hiddenColIds);
+  };
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const { columns, onChangeColSort } = this.props;
+    if (oldIndex !== newIndex) {
+      const newData = arrayMoveImmutable(
+        [].concat(columns),
+        oldIndex,
+        newIndex
+      ).filter((el) => !!el);
+      //console.log('Sorted items: ', newData);
+      onChangeColSort(newData);
     }
-    onSortEnd = ({oldIndex, newIndex}) => {
-        const {columns,onChangeColSort} = this.props;
-        if (oldIndex !== newIndex) {
-            const newData = arrayMoveImmutable([].concat(columns), oldIndex, newIndex).filter(
-                el => !!el,
-            );
-            //console.log('Sorted items: ', newData);
-            onChangeColSort(newData);
-        }
-    };
+  };
 
-    render() {
-        const {hiddenColIds, columns,disabledColIds} = this.props;
-        const showColIds_str = [];
-        if (columns) {
-            for (let c of columns) {
-                if (!hiddenColIds || !hiddenColIds.includes(c.id)) {
-                    showColIds_str.push(c.id);
-                }
-            }
+  render() {
+    const { hiddenColIds, columns, disabledColIds } = this.props;
+    const showColIds_str = [];
+    if (columns) {
+      for (let c of columns) {
+        if (!hiddenColIds || !hiddenColIds.includes(c.id)) {
+          showColIds_str.push(c.id);
         }
-        return <SortableGroupContainer disabledColIds={disabledColIds} helperClass={'row-dragging'}   items={columns} selected={showColIds_str} onChange={this.onChange}
-                                       onSortEnd={this.onSortEnd}/>
+      }
     }
+    return (
+      <SortableGroupContainer
+        disabledColIds={disabledColIds}
+        helperClass={"row-dragging"}
+        items={columns}
+        selected={showColIds_str}
+        onChange={this.onChange}
+        onSortEnd={this.onSortEnd}
+      />
+    );
+  }
 }
 
-export default ColumnSelector;
+export default ColumnSelector;

package/src/aldehyde/table/control-table-x-axis-wrapper.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from "react";
+import { Table as _Table } from "antd";
+import type { TableProps } from "antd/lib";
+
+export const ControlTableXAxisWrapper: <T>(TableComponent: React.FC<T>) => React.FC<T>  = (TableComponent) => {
+  return ({ ...args }) => {
+    const table = useRef(null);
+    useEffect(() => {
+      const tableBody = table.current.querySelector(".ant-table");
+      let isMove = false;
+      const mouseDown = (e) => {
+        if (e.which === 3) isMove = true
+      }
+      const mouseUp = (e) => {
+        if (e.which === 3) isMove = false
+      }
+      const mouseMove = (e: any) => {
+        if (isMove) {
+          const { movementX, movementY, offsetX, offsetY } = e;
+          tableBody.scrollBy(movementX * 5, 0);
+          e.preventDefault()
+        }
+      };
+      const contextmenu = (e: any) => {
+        e.preventDefault()
+      }
+      if (tableBody) {
+        tableBody.addEventListener("mousedown", mouseDown);
+        tableBody.addEventListener("mousemove", mouseMove);
+        tableBody.addEventListener("mouseup", mouseUp);
+        tableBody.addEventListener("contextmenu", contextmenu);
+      }
+      return () => {
+        if (tableBody) {
+          tableBody.removeEventListener("mousedown", mouseDown);
+          tableBody.removeEventListener("mousemove", mouseMove);
+          tableBody.removeEventListener("mouseup", mouseUp);
+          tableBody.removeEventListener("contextmenu", contextmenu);
+        }
+      };
+    }, []);
+    return (
+      <div ref={table}>
+        <TableComponent {...args}></TableComponent>
+      </div>
+    );
+  };
+};
+
+
+// 这里为可以右键滑动控制X轴坐标的二封 antd 的 table 组件
+export const Table = ControlTableXAxisWrapper<TableProps>(_Table);

package/src/aldehyde/table/pagination.tsx

@@ -1,71 +1,78 @@
 import React from "react";
-import {PageInfo} from "../tmpl/interface";
-import {Pagination as AntdPagination} from 'antd';
-import './pagination.css';
+import { PageInfo } from "../tmpl/interface";
+import { Pagination as AntdPagination } from "antd";
+import "./pagination.css";
+import { LocaleContext } from "../locale/LocaleProvider";
 
 interface PaginationProps {
-    pageTo: (pageNo: number, pageSize: number) => void;
-    queryTotal: () => void;
-    pageInfo: PageInfo;
-    total: number;
-    touchEnd: boolean;
-};
-
-interface PaginationStat {
-
-};
+  pageTo: (pageNo: number, pageSize: number) => void;
+  queryTotal: () => void;
+  pageInfo: PageInfo;
+  total: number;
+  touchEnd: boolean;
+}
 
+interface PaginationStat {}
 
 class Pagination extends React.PureComponent<PaginationProps, PaginationStat> {
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    render() {
-        const {queryTotal, pageInfo, total, pageTo, touchEnd} = this.props;
+  render() {
+    const { queryTotal, pageInfo, total, pageTo, touchEnd } = this.props;
+    const { translate } = this.context;
 
-        if(!pageInfo){
-            return <></>
-        }
-        let virtualTotal;
-        let myTotal;
-        let sewTotal: boolean = true;
-        let seeTotalTitle: string = "";
-
-        if (total &&  total >= 0) {
-            virtualTotal = total;
-            sewTotal = true;
-            if (total > 0) {
-                seeTotalTitle = `共${total}条`;
-            }
-        } else if (touchEnd ) {
-            sewTotal = false;
-            virtualTotal = pageInfo.virtualEndPageNo * pageInfo.pageSize+1;
-            seeTotalTitle = `点击查看总数`;
-        } else {//这里还有问题
-            sewTotal = false;
-            virtualTotal = pageInfo.virtualEndPageNo *  pageInfo.pageSize + 1;
-            seeTotalTitle = `点击查看总数`;
-        }
+    if (!pageInfo) {
+      return <></>;
+    }
+    let virtualTotal;
+    let myTotal;
+    let sewTotal: boolean = true;
+    let seeTotalTitle: string = "";
 
-        return (!virtualTotal || virtualTotal < pageInfo.pageSize?"":
-            <div className='Pagination'>
-                        <span className={sewTotal ? 'sewTotal' : 'seeTotal'} onClick={queryTotal}>
-                            {seeTotalTitle}
-                        </span>
-                <AntdPagination
-                    style={{display: 'inline-block'}}
-                    showQuickJumper
-                    showSizeChanger
-                    pageSizeOptions={['5', '10', '20', '50', '100', '500']}
-                    defaultCurrent={1}
-                    current={parseInt(pageInfo.pageNo.toString())}
-                    pageSize={pageInfo.pageSize}
-                    onChange={(page, pageSize) => pageTo(page, pageSize)}
-                    onShowSizeChange={(current, size) => pageTo(current, size)}
-                    hideOnSinglePage={total === 0 ? true : false}
-                    total={virtualTotal}
-                />
-            </div>
-        );
+    if (total && total >= 0) {
+      virtualTotal = total;
+      sewTotal = true;
+      if (total > 0) {
+        seeTotalTitle = translate("${总共}" + total + "${条}");
+      }
+    } else if (touchEnd) {
+      sewTotal = false;
+      virtualTotal = pageInfo.virtualEndPageNo * pageInfo.pageSize + 1;
+      seeTotalTitle = translate("${点击查看总数}");
+    } else {
+      //这里还有问题
+      sewTotal = false;
+      virtualTotal = pageInfo.virtualEndPageNo * pageInfo.pageSize + 1;
+      seeTotalTitle = translate("${点击查看总数}");
     }
+
+    return !virtualTotal || virtualTotal < pageInfo.pageSize ? (
+      ""
+    ) : (
+      <div className="Pagination">
+        <span
+          className={sewTotal ? "sewTotal" : "seeTotal"}
+          onClick={queryTotal}
+        >
+          {seeTotalTitle}
+        </span>
+        <AntdPagination
+          style={{ display: "inline-block" }}
+          showQuickJumper
+          showSizeChanger
+          pageSizeOptions={["5", "10", "20", "50", "100", "500"]}
+          defaultCurrent={1}
+          current={parseInt(pageInfo.pageNo.toString())}
+          pageSize={pageInfo.pageSize}
+          onChange={(page, pageSize) => pageTo(page, pageSize)}
+          onShowSizeChange={(current, size) => pageTo(current, size)}
+          hideOnSinglePage={total === 0 ? true : false}
+          total={virtualTotal}
+        />
+      </div>
+    );
+  }
 }
 
-export default Pagination;
+export default Pagination;