aldehyde 0.2.99 → 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;