jrs-react 1.1.13 → 1.1.16

package/build/index.js

@@ -6058,25 +6058,6 @@ 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.
@@ -7432,60 +7413,23 @@ const StyledJRFrame = dt.div`
 
 `;
 
-const FreeType = ({
-  tag: Tag,
-  config,
-  me,
-  className
-}) => {
-  if (typeof config === 'function') {
-    let style;
-    const setStyle = function (_style) {
-      style = _style;
-    };
-    const content = config.bind(me)({
-      setStyle
-    });
-    return /*#__PURE__*/React.createElement(Tag, {
-      className: className,
-      style: style
-    }, content);
-  }
-};
+// const FreeType=({tag:Tag,config,me,className})=>{
+//     if(typeof config==='function'){
+//         let style
+//         const setStyle=function(_style){
+//             style=_style
+//         }
+//         const content=config.bind(me)({setStyle})
+//         return <Tag className={className} style={style}>{content}</Tag>
+//     }
+// }
+
 class JRFrame extends JRSubmit {
   renderer() {
     return /*#__PURE__*/React.createElement(StyledJRFrame, {
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React.createElement(FreeType, {
-      tag: "div",
-      config: this.props.start,
-      me: this,
-      className: 'start'
-    }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FreeType, {
-      tag: "header",
-      config: this.props.top,
-      me: this
-    }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FreeType, {
-      tag: "div",
-      config: this.props.left,
-      me: this,
-      className: 'left'
-    }), this.renderMe(), /*#__PURE__*/React.createElement(FreeType, {
-      tag: "div",
-      config: this.props.right,
-      me: this,
-      className: 'right'
-    })), /*#__PURE__*/React.createElement(FreeType, {
-      tag: "footer",
-      config: this.props.bottom,
-      me: this
-    })), /*#__PURE__*/React.createElement(FreeType, {
-      tag: "div",
-      config: this.props.end,
-      me: this,
-      className: 'end'
-    }));
+    }, this.renderMe());
   }
   renderMe() {
     return /*#__PURE__*/React.createElement("div", {
@@ -7496,853 +7440,16 @@ 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;
-    }    
-`;
-
-// import JRFrame from "../JRFrame/JRFrame";
-
-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 JRSubmit {
-  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';
 }
-class JRTestReact extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, "JRTestReact");
+class JRTestReact extends JRSubmit {
+  renderer() {
+    return /*#__PURE__*/React.createElement("div", null, "JRTestReact extends JRSubmit");
   }
 }
 
 exports.JRFrame = JRFrame;
 exports.JRSubmit = JRSubmit;
-exports.JRTable = JRTable;
 exports.JRTest = JRTest;
 exports.JRTestReact = JRTestReact;