jrs-react 1.1.11 → 1.1.12

package/build/index.js

@@ -6058,6 +6058,25 @@ const flexType = (type, me, payload, doElse) => {
   const result = typeof type === 'function' ? type?.bind(me)(payload) : type ?? doElse;
   return result;
 };
+const whatType = ({
+  type,
+  typeStyle: _typeStyle,
+  render,
+  ...config
+}, me, doElse) => {
+  if (type) {
+    // const style=flexType(typeStyle,me,{},{})
+    // return 'type'
+    const typeStyle = typeof _typeStyle === 'function' ? _typeStyle?.bind(me)() : _typeStyle;
+    return /*#__PURE__*/React.createElement(type, {
+      style: typeStyle
+    });
+  } else if (render) {
+    return render.bind(me)();
+  } else {
+    return doElse;
+  }
+};
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -7477,6 +7496,840 @@ class JRFrame extends JRSubmit {
   }
 }
 
+const StyledSlider = dt.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+    height:100%;
+    width:6px;
+    user-select: none;
+    &.resizing:hover,&.resizing{
+        border-right:1px dashed black;
+    }
+    &:hover{
+        cursor: col-resize;
+        border-right:1px dashed gray;
+    }
+`;
+class Slider extends React.Component {
+  constructor() {
+    super();
+    this.sliderRef = /*#__PURE__*/React.createRef();
+  }
+  stop = e => {
+    this.sliderRef.current.classList.remove('resizing');
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  move = ({
+    clientX
+  }) => {
+    const {
+      th,
+      selectedCols,
+      widthRates
+    } = this.data;
+    const {
+      left
+    } = th.getBoundingClientRect();
+    const min = left + 10;
+    const x = clientX >= min ? clientX : min;
+    const width = x - left;
+    selectedCols.forEach((col, index) => {
+      const _width = Math.round(width / 100 * widthRates[index]);
+      col.style.width = _width + 'px';
+    });
+  };
+  start(thPRef, column) {
+    const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
+    const totalWidth = selectedCols.reduce((aco, {
+      offsetWidth
+    }) => aco + offsetWidth, 0);
+    const widthRates = selectedCols.map(({
+      offsetWidth
+    }) => {
+      return 100 * (offsetWidth / totalWidth);
+    });
+    this.data = {
+      selectedCols,
+      th: thPRef.current,
+      widthRates
+    };
+    this.sliderRef.current.classList.add('resizing');
+    document.body.style.cursor = 'col-resize';
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  }
+  render() {
+    const column = this.props.column;
+    return /*#__PURE__*/React.createElement(StyledSlider, {
+      ref: this.sliderRef,
+      onMouseDown: e => {
+        this.start(this.props.thRef, column);
+      }
+    });
+  }
+}
+
+const Colgroup = ({
+  leafColumns,
+  colGroupRef
+}) => {
+  return /*#__PURE__*/React.createElement("colgroup", {
+    ref: colGroupRef
+  }, leafColumns?.map((_column, index) => {
+    const {
+      width,
+      ...column
+    } = _column;
+    const style = {
+      width
+    };
+    return /*#__PURE__*/React.createElement("col", {
+      style: style,
+      key: index
+    });
+  }));
+};
+const Ths$1 = ({
+  deep,
+  rowColumn,
+  rowIndex,
+  table
+}) => {
+  return rowColumn?.map((column, colIndex) => {
+    const thRef = /*#__PURE__*/React.createRef();
+    return /*#__PURE__*/React.createElement("th", {
+      key: colIndex,
+      ref: thRef,
+      colSpan: column.colSpan,
+      rowSpan: column.rowSpan ?? (column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null)
+    }, flexType(column.label, table), table.props.resizableColumns === true && /*#__PURE__*/React.createElement(Slider, {
+      table: table,
+      thRef: thRef,
+      column: column
+    }));
+  });
+};
+const HeadTrs = ({
+  columns: _columns,
+  trClassName,
+  table
+}) => {
+  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
+  return columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React.createElement("tr", {
+      className: trClassName,
+      key: rowIndex
+    }, /*#__PURE__*/React.createElement(Ths$1, {
+      deep: columns.length - 1,
+      rowColumn: rowColumn,
+      rowIndex: rowIndex,
+      table: table
+    }));
+  });
+};
+const THead = ({
+  columns,
+  leafColumns,
+  table
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(HeadTrs, {
+    columns: columns,
+    table: table
+  })), /*#__PURE__*/React.createElement(Colgroup, {
+    leafColumns: leafColumns,
+    colGroupRef: table.colGroupRef
+  }));
+};
+const FootThs = ({
+  table,
+  groupData,
+  groupIndex,
+  deep,
+  columns,
+  rowIndex
+}) => {
+  return columns?.map((column, colIndex) => {
+    // let content
+    // if(type){
+    //     content='type'
+    // }else if(render){
+
+    //     content=render?.bind(table)({groupData,groupIndex,ths:111})
+    // }else{
+    //     content=column.label
+    // }
+    let style = flexType(column.style, table, {}, {});
+    const content = whatType(column, table, column.label);
+    return /*#__PURE__*/React.createElement("th", {
+      style: style,
+      colSpan: column.colSpan,
+      rowSpan: column.rowSpan
+    }, content);
+  });
+};
+const TFoot = ({
+  table,
+  columns
+}) => {
+  const trs = columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: rowIndex
+    }, /*#__PURE__*/React.createElement(FootThs, {
+      columns: rowColumn,
+      table: table
+    }));
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tfoot", null, trs));
+};
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+dt.tbody`
+    th{
+        height:4px;
+        background:#c6c6c6;
+    }
+`;
+
+////////////////////////////////////////////////////////////////////////////
+
+const Ths = ({
+  table,
+  groupData,
+  groupIndex,
+  deep,
+  rowColumn,
+  rowIndex
+}) => {
+  return rowColumn?.map(({
+    style: _style,
+    align,
+    type,
+    render,
+    ...column
+  }, colIndex) => {
+    const style = flexType(_style, table, {}, {});
+    let content;
+    if (type) {
+      content = 'type';
+    } else if (render) {
+      content = render?.bind(table)({
+        groupData,
+        groupIndex,
+        ths: 111
+      });
+    } else {
+      content = column.label;
+    }
+    // style.textAlign=align
+    return /*#__PURE__*/React.createElement("th", {
+      key: colIndex,
+      style: {
+        textAlign: align,
+        ...style
+      },
+      colSpan: column.colSpan,
+      rowSpan: column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null
+    }, content);
+  });
+};
+const GroupColumns = ({
+  table,
+  columns: _columns,
+  trClassName,
+  groupData,
+  tbodyIndex
+}) => {
+  const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
+  return columns?.map((rowColumn, rowIndex) => {
+    return /*#__PURE__*/React.createElement("tr", {
+      className: trClassName,
+      key: rowIndex
+    }, /*#__PURE__*/React.createElement(Ths, {
+      table: table,
+      groupData: groupData,
+      groupIndex: tbodyIndex,
+      deep: columns.length - 1,
+      rowColumn: rowColumn,
+      rowIndex: rowIndex
+    }));
+  });
+};
+dt.tr`
+    z-index: 1;
+    XXposition: sticky;
+    XXtop: 50px;
+    th{
+        text-align: left;
+        border:1px solid #222222;
+    }
+`;
+const GroupHeader = props => {
+  return /*#__PURE__*/React.createElement(GroupColumns, _extends({
+    trClassName: 'jr-group-header'
+  }, props));
+};
+dt.tr`
+    th{
+        border:1px solid #222222;
+        text-align: left;
+    }
+`;
+const GroupFooter = props => {
+  return /*#__PURE__*/React.createElement(GroupColumns, _extends({
+    trClassName: 'jr-group-footer'
+  }, props));
+};
+
+////////////////////////////////////////////////////////////////////////////
+const Td = ({
+  column: _column,
+  record,
+  tbodyIndex,
+  trIndex,
+  tdIndex,
+  table
+}) => {
+  let content;
+  const {
+    style: _style,
+    align,
+    vAlign = 'baseline',
+    type,
+    typeStyle: _typeStyle,
+    render,
+    setValue,
+    getValue,
+    onChange: _onChange,
+    funcProps,
+    ...column
+  } = _column;
+  const onChange = inputValue => {
+    const targetValue = inputValue?.target?.value ?? inputValue;
+    setValue(record, targetValue);
+    table.setValue(table.getValue());
+  };
+  const value = getValue(record);
+  let style = render ? {} : flexType(_style, table, {
+    value,
+    record
+  }, {});
+  const setStyle = _style => {
+    style = _style;
+  };
+  setStyle.bind(undefined);
+  render?.bind(table);
+  if (type) {
+    const typeStyle = flexType(_typeStyle, table, {
+      record
+    }, {});
+    content = /*#__PURE__*/React.createElement(type, {
+      onChange: _onChange ? e => {
+        _onChange?.bind(undefined)(e, {
+          value,
+          onChange,
+          me: content
+        });
+      } : onChange,
+      value,
+      style: typeStyle,
+      render,
+      ...column,
+      ...funcProps?.bind(undefined)({
+        value
+      })
+    });
+  } else if (render) {
+    content = render({
+      index: trIndex,
+      groupIndex: tbodyIndex,
+      value,
+      record,
+      onChange,
+      setStyle
+    });
+  } else {
+    content = value;
+  }
+  return /*#__PURE__*/React.createElement("td", {
+    colSpan: style.colSpan,
+    rowSpan: style.rowSpan,
+    style: {
+      textAlign: align,
+      verticalAlign: vAlign,
+      ...style
+    },
+    key: tdIndex
+  }, content);
+};
+const Tds = ({
+  leafColumns,
+  record,
+  table,
+  tbodyIndex,
+  trIndex
+}) => {
+  return leafColumns?.map((column, tdIndex) => {
+    return /*#__PURE__*/React.createElement(Td, {
+      column: column,
+      key: tdIndex,
+      record: record,
+      table: table,
+      tbodyIndex: tbodyIndex,
+      trIndex: trIndex,
+      tdIndex: tdIndex
+    });
+  });
+};
+////////////////////////////////////////////////////////////////////////////
+
+const TBody = ({
+  groupData,
+  groupHeader,
+  leafColumns,
+  groupFooter,
+  table,
+  tbodyIndex
+}) => {
+  const neededProps = {
+    table,
+    tbodyIndex
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tbody", {
+    key: `tbody${tbodyIndex}`
+  }, groupData?.length > 0 && /*#__PURE__*/React.createElement(GroupHeader, _extends({
+    groupData: groupData,
+    columns: groupHeader
+  }, neededProps)), groupData?.map((record, trIndex) => {
+    const onRowClick = table.props.onRowClick?.bind(table);
+    return /*#__PURE__*/React.createElement("tr", {
+      key: trIndex,
+      onClick: () => {
+        onRowClick?.({
+          record,
+          index: trIndex,
+          groupIndex: tbodyIndex
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Tds, _extends({
+      record: record,
+      trIndex: trIndex
+    }, neededProps, {
+      leafColumns: leafColumns
+    })));
+  }), groupData?.length > 0 && /*#__PURE__*/React.createElement(GroupFooter, _extends({
+    groupData: groupData,
+    columns: groupFooter
+  }, neededProps))));
+};
+const TBodies = ({
+  groupHeader,
+  leafColumns,
+  groupFooter,
+  dataSource: _dataSource,
+  table
+}) => {
+  // po('--TBodies--')
+  const isGroupDataType = Array.isArray(_dataSource?.[0]);
+  const dataSource = isGroupDataType ? _dataSource : [_dataSource];
+
+  // po('dataSource',dataSource)    
+  return dataSource?.map((groupData, tbodyIndex, c) => {
+    return /*#__PURE__*/React.createElement(TBody, {
+      key: `tbody${tbodyIndex}`,
+      table: table
+      // dataSource={dataSource}
+      // dataGroup={groupData} 
+      ,
+      groupData: groupData,
+      tbodyIndex: tbodyIndex,
+      groupHeader: groupHeader,
+      leafColumns: leafColumns,
+      groupFooter: groupFooter
+    });
+  });
+};
+
+const StyledJRTable = dt.div`
+    --column-bd-color:#cccccc;
+    --column-b-color:#eeeeee;
+    --column-b-hover-color:#ffffff;
+
+    position: relative;
+    background: var(--column-b-color);
+    border:1px solid var(--column-bd-color);
+
+    display:flex;
+    flex-direction: column;
+    flex:1;
+    overflow: overlay;
+
+
+
+
+    &.row-highlightable{
+        tbody{
+            tr:not(.jr-group-header,.jr-group-footer):hover{
+                background:var(--column-b-hover-color);
+                cursor: pointer;
+                transition:  background-color .8s;
+                td{
+                    color:black;
+                    transition:color .8s;
+                }
+
+            }
+        }
+    }
+
+    table{
+        Xheight: 100%;
+        min-width:100%;
+        width: max-content;
+        border-spacing: 0;
+
+        thead{
+            position: sticky;
+            top: 0;
+
+            th{
+                position: relative;
+                height:32px;
+                padding: 4px;
+                background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
+                box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
+                color: #525252;
+                white-space: nowrap;
+            }
+        }
+
+        tfoot{
+            position: sticky;
+            bottom: -1px;
+
+            Xtr:nth-child(1){
+                th{
+                    Xborder-top:1px solid var(--column-bd-color);
+                }
+            }
+            Xth:nth-child(1){
+                Xborder-left:1px solid var(--column-bd-color);
+            }
+                
+            th{
+                height:32px;
+                padding: 4px;
+                background: #e4e4e4;
+                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
+                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
+                color: #525252;
+                white-space: nowrap;
+
+                border-left:2px solid #f4f4f4;
+                border-top:2px solid #f4f4f4;
+                border-right:2px solid var(--column-bd-color);
+                border-bottom:2px solid var(--column-bd-color);
+            }
+        }
+
+        tbody{
+            tr{
+                transition: background .3s linear;
+                background:var(--column-b-color);
+                a:#ededed;
+                th{
+                    color:#444444;
+                }
+                td{
+                    border-bottom: 1px solid var(--column-bd-color);
+                    color:#2e2e2e;
+                    padding: 4px;
+                }
+            }
+            tr:hover{
+                background:var(--column-b-hover-color);
+                
+            }
+            
+            tr.jr-group-header
+            ,tr.jr-group-footer{
+                text-align:left;
+                background:#dddbdb;
+
+                th{
+                    border-bottom: 1px solid var(--column-bd-color);
+                    border-right: 1px solid var(--column-bd-color);
+                    padding: 4px 8px;
+                }
+            }
+        }
+        tbody.empty-tbody{
+            td{
+                border:10px solid red;
+            }
+        }
+    } 
+        
+    
+
+
+    > .empty{
+        user-select: none;
+        color:#848484;
+        height:100%;
+        flex:1;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }    
+`;
+
+const getMapObject = (map, names) => {
+  const name = names.shift(names);
+  if (names.length) {
+    return getMapObject(map?.[name], names);
+  } else {
+    return map;
+  }
+};
+const setMapObject = (map, names, value) => {
+  const name = names.shift(names);
+  if (names?.length) {
+    if (typeof map[name] != 'object') {
+      map[name] = {};
+    }
+    setMapObject(map[name], names, value);
+  } else {
+    map[name] = value;
+  }
+};
+class JRTable extends JRFrame {
+  constructor(props) {
+    super(props);
+    this.colGroupRef = /*#__PURE__*/React.createRef();
+  }
+  UNSAFE_componentWillMount() {
+    this.setColumns(this.props.columns);
+  }
+
+  //------------------------------------------------------------------------------------
+  getChecked() {
+    return [1, 2, 3, 4];
+  }
+  checkableColumn(props) {
+    return {
+      //方法1
+      render({
+        value,
+        onChange
+      }) {
+        return /*#__PURE__*/React.createElement("checkbox", {
+          checked: value,
+          onChange: e => {
+            onChange(e.target.checked);
+          }
+        });
+      },
+      align: 'center',
+      name: 'checked',
+      ...props
+    };
+    // return {//方法2
+    //     type:Checkbox
+    //     ,funcProps({value}){
+    //         po('fffffffffffff',value)
+    //         return {
+    //             align:'center'
+    //             ,checked:value
+    //         }
+    //     }
+    //     // ,label:'A'
+    //     ,onChange(e,{value,onChange,me}){
+    //         onChange(e.target.checked)
+    //     }
+    //     ,...props
+    // }
+  }
+  deletableColumn({
+    name = 'deletable',
+    sendValue,
+    sendName,
+    valueName,
+    ...props
+  }) {
+    return {
+      render({
+        value,
+        onChange
+      }) {
+        return /*#__PURE__*/React.createElement("checkbox", {
+          checked: value,
+          onChange: e => {
+            onChange(e.target.checked);
+          }
+        });
+      },
+      align: 'center',
+      name,
+      label() {
+        return /*#__PURE__*/React.createElement("button", {
+          onClick: () => {
+            const value = this.props.delete.value ?? this.getDataSource()?.filter(record => record[name]).map(record => sendValue ? record[sendValue] : record);
+            const callback = this.props.delete.callback ?? function (a, b, c) {
+              this.reload();
+            };
+            this.delete({
+              value: sendName ? {
+                [sendName]: value
+              } : value,
+              callback,
+              ...props
+            });
+          }
+        }, "\u522A\u9664");
+      },
+      ...props
+    };
+  }
+  initColumn(column, level, result, leafColumns, names, lastColSpan) {
+    const isBranch = column.type === undefined && column?.columns && column?.columns.length;
+    const _names = column.name ? [...names, column.name] : names;
+    if (isBranch) {
+      if (column.label !== null) result[level].push(column);
+      const c = this.initColumns(column.columns, level + (column.label !== null ? 1 : 0) + (column.rowSpan != null ? column.rowSpan - 1 : 0), result, leafColumns, _names, lastColSpan);
+      column.colSpan = c.colSpan;
+      column.columnNo = lastColSpan;
+      return {
+        colSpan: column.colSpan
+      };
+    } else {
+      column.columnNo = lastColSpan;
+      result[level].push({
+        ...column,
+        isLeaf: true
+      });
+      leafColumns.push(column);
+      column.names = _names;
+      if (_names?.length > 1) {
+        column.setValue = function (record, value) {
+          try {
+            getMapObject(record, [..._names])[column.name] = value;
+          } catch {
+            setMapObject(record, [..._names], value);
+          }
+        };
+        column.getValue = function (record) {
+          return _names.reduce((acc, name) => {
+            return acc?.[name];
+          }, record);
+        };
+      } else {
+        column.setValue = function (record, value) {
+          record[column.name] = value;
+        };
+        column.getValue = function (record) {
+          return record[column.name];
+        };
+      }
+      return {
+        colSpan: 1
+      };
+    }
+  }
+  initColumns(columns, level, result, leafColumns, names, lastColSpan) {
+    for (let i = result.length; i <= level; i++) {
+      if (!result[i]) {
+        result.push([]);
+      }
+    }
+    let _lastColSpan = lastColSpan;
+    const childrenLength = columns?.reduce((acc, column) => {
+      const c = this.initColumn(column, level, result, leafColumns, names, _lastColSpan);
+      acc.colSpan += c.colSpan;
+      _lastColSpan += c.colSpan;
+      return acc;
+    }, {
+      colSpan: 0
+    });
+    return childrenLength;
+  }
+  setColumns([..._columns]) {
+    if (this.props.checkable) _columns.unshift(this.checkableColumn(this.props.checkable));
+    if (this.props.deletable) {
+      _columns.unshift(this.deletableColumn(this.props.deletable));
+    }
+    const columns = [];
+    const leafColumns = [];
+    this.initColumns(_columns, 0, columns, leafColumns, [], 0);
+    // po('initColumns',initColumns)
+    this.setState({
+      columns,
+      leafColumns
+    });
+  }
+  //------------------------------------------------------------------------------------
+  setDataSource(dataSource) {}
+  getDataSource() {
+    return this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue();
+  }
+  add(record, index = this.getDataSource()?.length ?? 0, group) {
+    //group 還沒有考慮到
+
+    if (this.getDataSource()) {
+      if (group === undefined) {
+        this.getDataSource().splice(index, 0, record); //.push(record)
+      } else {
+        this.getDataSource()[group].splice(index, 0, record); //.push(record)
+      }
+      this.setValue(this.getValue());
+    } else {
+      //未完成. 沒有資料的時候, 要考慮有或沒有dataSourceName的不同處理
+      this.setValue({
+        [this.props.dataSourceName]: [record]
+      });
+    }
+  }
+  noData() {
+    const data = this.getDataSource();
+    return data == null || data.length == 0;
+  }
+  //------------------------------------------------------------------------------------
+  renderMe() {
+    return /*#__PURE__*/React.createElement(StyledJRTable, {
+      className: `${this.props.className ?? ''} jr-table ${this.props.onRowClick ? 'row-highlightable' : ''}`
+    }, /*#__PURE__*/React.createElement("table", {
+      className: 'jr-table-table'
+    }, /*#__PURE__*/React.createElement(TBodies, {
+      table: this,
+      leafColumns: this.state.leafColumns,
+      groupHeader: this.props.groupHeader,
+      groupFooter: this.props.groupFooter,
+      dataSource: this.getDataSource(),
+      onRowClick: this.props.onRowClick
+    }), /*#__PURE__*/React.createElement(TFoot, {
+      columns: this.props.footColumns,
+      table: this
+    }), /*#__PURE__*/React.createElement(THead, {
+      columns: this.state.columns,
+      leafColumns: this.state.leafColumns,
+      table: this
+    })), /*#__PURE__*/React.createElement("div", {
+      className: 'empty'
+    }, this.noData() && '無資料'));
+  }
+}
+
 function JRTest() {
   return 'I am JRTest string';
 }
@@ -7488,5 +8341,6 @@ class JRTestReact extends React.Component {
 
 exports.JRFrame = JRFrame;
 exports.JRSubmit = JRSubmit;
+exports.JRTable = JRTable;
 exports.JRTest = JRTest;
 exports.JRTestReact = JRTestReact;