jrs-react 1.1.12 → 1.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.es.js CHANGED
@@ -6054,25 +6054,6 @@ const flexType = (type, me, payload, doElse) => {
6054
6054
  const result = typeof type === 'function' ? type?.bind(me)(payload) : type ?? doElse;
6055
6055
  return result;
6056
6056
  };
6057
- const whatType = ({
6058
- type,
6059
- typeStyle: _typeStyle,
6060
- render,
6061
- ...config
6062
- }, me, doElse) => {
6063
- if (type) {
6064
- // const style=flexType(typeStyle,me,{},{})
6065
- // return 'type'
6066
- const typeStyle = typeof _typeStyle === 'function' ? _typeStyle?.bind(me)() : _typeStyle;
6067
- return /*#__PURE__*/React.createElement(type, {
6068
- style: typeStyle
6069
- });
6070
- } else if (render) {
6071
- return render.bind(me)();
6072
- } else {
6073
- return doElse;
6074
- }
6075
- };
6076
6057
 
6077
6058
  /******************************************************************************
6078
6059
  Copyright (c) Microsoft Corporation.
@@ -7428,60 +7409,23 @@ const StyledJRFrame = dt.div`
7428
7409
 
7429
7410
  `;
7430
7411
 
7431
- const FreeType = ({
7432
- tag: Tag,
7433
- config,
7434
- me,
7435
- className
7436
- }) => {
7437
- if (typeof config === 'function') {
7438
- let style;
7439
- const setStyle = function (_style) {
7440
- style = _style;
7441
- };
7442
- const content = config.bind(me)({
7443
- setStyle
7444
- });
7445
- return /*#__PURE__*/React.createElement(Tag, {
7446
- className: className,
7447
- style: style
7448
- }, content);
7449
- }
7450
- };
7412
+ // const FreeType=({tag:Tag,config,me,className})=>{
7413
+ // if(typeof config==='function'){
7414
+ // let style
7415
+ // const setStyle=function(_style){
7416
+ // style=_style
7417
+ // }
7418
+ // const content=config.bind(me)({setStyle})
7419
+ // return <Tag className={className} style={style}>{content}</Tag>
7420
+ // }
7421
+ // }
7422
+
7451
7423
  class JRFrame extends JRSubmit {
7452
7424
  renderer() {
7453
7425
  return /*#__PURE__*/React.createElement(StyledJRFrame, {
7454
7426
  style: this.props.style,
7455
7427
  className: `${this.props.className} jr-frame`
7456
- }, /*#__PURE__*/React.createElement(FreeType, {
7457
- tag: "div",
7458
- config: this.props.start,
7459
- me: this,
7460
- className: 'start'
7461
- }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FreeType, {
7462
- tag: "header",
7463
- config: this.props.top,
7464
- me: this
7465
- }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FreeType, {
7466
- tag: "div",
7467
- config: this.props.left,
7468
- me: this,
7469
- className: 'left'
7470
- }), this.renderMe(), /*#__PURE__*/React.createElement(FreeType, {
7471
- tag: "div",
7472
- config: this.props.right,
7473
- me: this,
7474
- className: 'right'
7475
- })), /*#__PURE__*/React.createElement(FreeType, {
7476
- tag: "footer",
7477
- config: this.props.bottom,
7478
- me: this
7479
- })), /*#__PURE__*/React.createElement(FreeType, {
7480
- tag: "div",
7481
- config: this.props.end,
7482
- me: this,
7483
- className: 'end'
7484
- }));
7428
+ }, this.renderMe());
7485
7429
  }
7486
7430
  renderMe() {
7487
7431
  return /*#__PURE__*/React.createElement("div", {
@@ -7492,840 +7436,6 @@ class JRFrame extends JRSubmit {
7492
7436
  }
7493
7437
  }
7494
7438
 
7495
- const StyledSlider = dt.div`
7496
- position: absolute;
7497
- top: 0;
7498
- right: 0;
7499
- height:100%;
7500
- width:6px;
7501
- user-select: none;
7502
- &.resizing:hover,&.resizing{
7503
- border-right:1px dashed black;
7504
- }
7505
- &:hover{
7506
- cursor: col-resize;
7507
- border-right:1px dashed gray;
7508
- }
7509
- `;
7510
- class Slider extends React.Component {
7511
- constructor() {
7512
- super();
7513
- this.sliderRef = /*#__PURE__*/React.createRef();
7514
- }
7515
- stop = e => {
7516
- this.sliderRef.current.classList.remove('resizing');
7517
- document.body.style.cursor = 'default';
7518
- window.removeEventListener('mousemove', this.move);
7519
- window.removeEventListener('mouseup', this.stop);
7520
- };
7521
- move = ({
7522
- clientX
7523
- }) => {
7524
- const {
7525
- th,
7526
- selectedCols,
7527
- widthRates
7528
- } = this.data;
7529
- const {
7530
- left
7531
- } = th.getBoundingClientRect();
7532
- const min = left + 10;
7533
- const x = clientX >= min ? clientX : min;
7534
- const width = x - left;
7535
- selectedCols.forEach((col, index) => {
7536
- const _width = Math.round(width / 100 * widthRates[index]);
7537
- col.style.width = _width + 'px';
7538
- });
7539
- };
7540
- start(thPRef, column) {
7541
- const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
7542
- const totalWidth = selectedCols.reduce((aco, {
7543
- offsetWidth
7544
- }) => aco + offsetWidth, 0);
7545
- const widthRates = selectedCols.map(({
7546
- offsetWidth
7547
- }) => {
7548
- return 100 * (offsetWidth / totalWidth);
7549
- });
7550
- this.data = {
7551
- selectedCols,
7552
- th: thPRef.current,
7553
- widthRates
7554
- };
7555
- this.sliderRef.current.classList.add('resizing');
7556
- document.body.style.cursor = 'col-resize';
7557
- window.addEventListener('mousemove', this.move);
7558
- window.addEventListener('mouseup', this.stop);
7559
- }
7560
- render() {
7561
- const column = this.props.column;
7562
- return /*#__PURE__*/React.createElement(StyledSlider, {
7563
- ref: this.sliderRef,
7564
- onMouseDown: e => {
7565
- this.start(this.props.thRef, column);
7566
- }
7567
- });
7568
- }
7569
- }
7570
-
7571
- const Colgroup = ({
7572
- leafColumns,
7573
- colGroupRef
7574
- }) => {
7575
- return /*#__PURE__*/React.createElement("colgroup", {
7576
- ref: colGroupRef
7577
- }, leafColumns?.map((_column, index) => {
7578
- const {
7579
- width,
7580
- ...column
7581
- } = _column;
7582
- const style = {
7583
- width
7584
- };
7585
- return /*#__PURE__*/React.createElement("col", {
7586
- style: style,
7587
- key: index
7588
- });
7589
- }));
7590
- };
7591
- const Ths$1 = ({
7592
- deep,
7593
- rowColumn,
7594
- rowIndex,
7595
- table
7596
- }) => {
7597
- return rowColumn?.map((column, colIndex) => {
7598
- const thRef = /*#__PURE__*/React.createRef();
7599
- return /*#__PURE__*/React.createElement("th", {
7600
- key: colIndex,
7601
- ref: thRef,
7602
- colSpan: column.colSpan,
7603
- rowSpan: column.rowSpan ?? (column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null)
7604
- }, flexType(column.label, table), table.props.resizableColumns === true && /*#__PURE__*/React.createElement(Slider, {
7605
- table: table,
7606
- thRef: thRef,
7607
- column: column
7608
- }));
7609
- });
7610
- };
7611
- const HeadTrs = ({
7612
- columns: _columns,
7613
- trClassName,
7614
- table
7615
- }) => {
7616
- const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
7617
- return columns?.map((rowColumn, rowIndex) => {
7618
- return /*#__PURE__*/React.createElement("tr", {
7619
- className: trClassName,
7620
- key: rowIndex
7621
- }, /*#__PURE__*/React.createElement(Ths$1, {
7622
- deep: columns.length - 1,
7623
- rowColumn: rowColumn,
7624
- rowIndex: rowIndex,
7625
- table: table
7626
- }));
7627
- });
7628
- };
7629
- const THead = ({
7630
- columns,
7631
- leafColumns,
7632
- table
7633
- }) => {
7634
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(HeadTrs, {
7635
- columns: columns,
7636
- table: table
7637
- })), /*#__PURE__*/React.createElement(Colgroup, {
7638
- leafColumns: leafColumns,
7639
- colGroupRef: table.colGroupRef
7640
- }));
7641
- };
7642
- const FootThs = ({
7643
- table,
7644
- groupData,
7645
- groupIndex,
7646
- deep,
7647
- columns,
7648
- rowIndex
7649
- }) => {
7650
- return columns?.map((column, colIndex) => {
7651
- // let content
7652
- // if(type){
7653
- // content='type'
7654
- // }else if(render){
7655
-
7656
- // content=render?.bind(table)({groupData,groupIndex,ths:111})
7657
- // }else{
7658
- // content=column.label
7659
- // }
7660
- let style = flexType(column.style, table, {}, {});
7661
- const content = whatType(column, table, column.label);
7662
- return /*#__PURE__*/React.createElement("th", {
7663
- style: style,
7664
- colSpan: column.colSpan,
7665
- rowSpan: column.rowSpan
7666
- }, content);
7667
- });
7668
- };
7669
- const TFoot = ({
7670
- table,
7671
- columns
7672
- }) => {
7673
- const trs = columns?.map((rowColumn, rowIndex) => {
7674
- return /*#__PURE__*/React.createElement("tr", {
7675
- key: rowIndex
7676
- }, /*#__PURE__*/React.createElement(FootThs, {
7677
- columns: rowColumn,
7678
- table: table
7679
- }));
7680
- });
7681
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tfoot", null, trs));
7682
- };
7683
-
7684
- function _extends() {
7685
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
7686
- for (var e = 1; e < arguments.length; e++) {
7687
- var t = arguments[e];
7688
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
7689
- }
7690
- return n;
7691
- }, _extends.apply(null, arguments);
7692
- }
7693
-
7694
- dt.tbody`
7695
- th{
7696
- height:4px;
7697
- background:#c6c6c6;
7698
- }
7699
- `;
7700
-
7701
- ////////////////////////////////////////////////////////////////////////////
7702
-
7703
- const Ths = ({
7704
- table,
7705
- groupData,
7706
- groupIndex,
7707
- deep,
7708
- rowColumn,
7709
- rowIndex
7710
- }) => {
7711
- return rowColumn?.map(({
7712
- style: _style,
7713
- align,
7714
- type,
7715
- render,
7716
- ...column
7717
- }, colIndex) => {
7718
- const style = flexType(_style, table, {}, {});
7719
- let content;
7720
- if (type) {
7721
- content = 'type';
7722
- } else if (render) {
7723
- content = render?.bind(table)({
7724
- groupData,
7725
- groupIndex,
7726
- ths: 111
7727
- });
7728
- } else {
7729
- content = column.label;
7730
- }
7731
- // style.textAlign=align
7732
- return /*#__PURE__*/React.createElement("th", {
7733
- key: colIndex,
7734
- style: {
7735
- textAlign: align,
7736
- ...style
7737
- },
7738
- colSpan: column.colSpan,
7739
- rowSpan: column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null
7740
- }, content);
7741
- });
7742
- };
7743
- const GroupColumns = ({
7744
- table,
7745
- columns: _columns,
7746
- trClassName,
7747
- groupData,
7748
- tbodyIndex
7749
- }) => {
7750
- const columns = Array.isArray(_columns?.[0]) ? _columns : [_columns];
7751
- return columns?.map((rowColumn, rowIndex) => {
7752
- return /*#__PURE__*/React.createElement("tr", {
7753
- className: trClassName,
7754
- key: rowIndex
7755
- }, /*#__PURE__*/React.createElement(Ths, {
7756
- table: table,
7757
- groupData: groupData,
7758
- groupIndex: tbodyIndex,
7759
- deep: columns.length - 1,
7760
- rowColumn: rowColumn,
7761
- rowIndex: rowIndex
7762
- }));
7763
- });
7764
- };
7765
- dt.tr`
7766
- z-index: 1;
7767
- XXposition: sticky;
7768
- XXtop: 50px;
7769
- th{
7770
- text-align: left;
7771
- border:1px solid #222222;
7772
- }
7773
- `;
7774
- const GroupHeader = props => {
7775
- return /*#__PURE__*/React.createElement(GroupColumns, _extends({
7776
- trClassName: 'jr-group-header'
7777
- }, props));
7778
- };
7779
- dt.tr`
7780
- th{
7781
- border:1px solid #222222;
7782
- text-align: left;
7783
- }
7784
- `;
7785
- const GroupFooter = props => {
7786
- return /*#__PURE__*/React.createElement(GroupColumns, _extends({
7787
- trClassName: 'jr-group-footer'
7788
- }, props));
7789
- };
7790
-
7791
- ////////////////////////////////////////////////////////////////////////////
7792
- const Td = ({
7793
- column: _column,
7794
- record,
7795
- tbodyIndex,
7796
- trIndex,
7797
- tdIndex,
7798
- table
7799
- }) => {
7800
- let content;
7801
- const {
7802
- style: _style,
7803
- align,
7804
- vAlign = 'baseline',
7805
- type,
7806
- typeStyle: _typeStyle,
7807
- render,
7808
- setValue,
7809
- getValue,
7810
- onChange: _onChange,
7811
- funcProps,
7812
- ...column
7813
- } = _column;
7814
- const onChange = inputValue => {
7815
- const targetValue = inputValue?.target?.value ?? inputValue;
7816
- setValue(record, targetValue);
7817
- table.setValue(table.getValue());
7818
- };
7819
- const value = getValue(record);
7820
- let style = render ? {} : flexType(_style, table, {
7821
- value,
7822
- record
7823
- }, {});
7824
- const setStyle = _style => {
7825
- style = _style;
7826
- };
7827
- setStyle.bind(undefined);
7828
- render?.bind(table);
7829
- if (type) {
7830
- const typeStyle = flexType(_typeStyle, table, {
7831
- record
7832
- }, {});
7833
- content = /*#__PURE__*/React.createElement(type, {
7834
- onChange: _onChange ? e => {
7835
- _onChange?.bind(undefined)(e, {
7836
- value,
7837
- onChange,
7838
- me: content
7839
- });
7840
- } : onChange,
7841
- value,
7842
- style: typeStyle,
7843
- render,
7844
- ...column,
7845
- ...funcProps?.bind(undefined)({
7846
- value
7847
- })
7848
- });
7849
- } else if (render) {
7850
- content = render({
7851
- index: trIndex,
7852
- groupIndex: tbodyIndex,
7853
- value,
7854
- record,
7855
- onChange,
7856
- setStyle
7857
- });
7858
- } else {
7859
- content = value;
7860
- }
7861
- return /*#__PURE__*/React.createElement("td", {
7862
- colSpan: style.colSpan,
7863
- rowSpan: style.rowSpan,
7864
- style: {
7865
- textAlign: align,
7866
- verticalAlign: vAlign,
7867
- ...style
7868
- },
7869
- key: tdIndex
7870
- }, content);
7871
- };
7872
- const Tds = ({
7873
- leafColumns,
7874
- record,
7875
- table,
7876
- tbodyIndex,
7877
- trIndex
7878
- }) => {
7879
- return leafColumns?.map((column, tdIndex) => {
7880
- return /*#__PURE__*/React.createElement(Td, {
7881
- column: column,
7882
- key: tdIndex,
7883
- record: record,
7884
- table: table,
7885
- tbodyIndex: tbodyIndex,
7886
- trIndex: trIndex,
7887
- tdIndex: tdIndex
7888
- });
7889
- });
7890
- };
7891
- ////////////////////////////////////////////////////////////////////////////
7892
-
7893
- const TBody = ({
7894
- groupData,
7895
- groupHeader,
7896
- leafColumns,
7897
- groupFooter,
7898
- table,
7899
- tbodyIndex
7900
- }) => {
7901
- const neededProps = {
7902
- table,
7903
- tbodyIndex
7904
- };
7905
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tbody", {
7906
- key: `tbody${tbodyIndex}`
7907
- }, groupData?.length > 0 && /*#__PURE__*/React.createElement(GroupHeader, _extends({
7908
- groupData: groupData,
7909
- columns: groupHeader
7910
- }, neededProps)), groupData?.map((record, trIndex) => {
7911
- const onRowClick = table.props.onRowClick?.bind(table);
7912
- return /*#__PURE__*/React.createElement("tr", {
7913
- key: trIndex,
7914
- onClick: () => {
7915
- onRowClick?.({
7916
- record,
7917
- index: trIndex,
7918
- groupIndex: tbodyIndex
7919
- });
7920
- }
7921
- }, /*#__PURE__*/React.createElement(Tds, _extends({
7922
- record: record,
7923
- trIndex: trIndex
7924
- }, neededProps, {
7925
- leafColumns: leafColumns
7926
- })));
7927
- }), groupData?.length > 0 && /*#__PURE__*/React.createElement(GroupFooter, _extends({
7928
- groupData: groupData,
7929
- columns: groupFooter
7930
- }, neededProps))));
7931
- };
7932
- const TBodies = ({
7933
- groupHeader,
7934
- leafColumns,
7935
- groupFooter,
7936
- dataSource: _dataSource,
7937
- table
7938
- }) => {
7939
- // po('--TBodies--')
7940
- const isGroupDataType = Array.isArray(_dataSource?.[0]);
7941
- const dataSource = isGroupDataType ? _dataSource : [_dataSource];
7942
-
7943
- // po('dataSource',dataSource)
7944
- return dataSource?.map((groupData, tbodyIndex, c) => {
7945
- return /*#__PURE__*/React.createElement(TBody, {
7946
- key: `tbody${tbodyIndex}`,
7947
- table: table
7948
- // dataSource={dataSource}
7949
- // dataGroup={groupData}
7950
- ,
7951
- groupData: groupData,
7952
- tbodyIndex: tbodyIndex,
7953
- groupHeader: groupHeader,
7954
- leafColumns: leafColumns,
7955
- groupFooter: groupFooter
7956
- });
7957
- });
7958
- };
7959
-
7960
- const StyledJRTable = dt.div`
7961
- --column-bd-color:#cccccc;
7962
- --column-b-color:#eeeeee;
7963
- --column-b-hover-color:#ffffff;
7964
-
7965
- position: relative;
7966
- background: var(--column-b-color);
7967
- border:1px solid var(--column-bd-color);
7968
-
7969
- display:flex;
7970
- flex-direction: column;
7971
- flex:1;
7972
- overflow: overlay;
7973
-
7974
-
7975
-
7976
-
7977
- &.row-highlightable{
7978
- tbody{
7979
- tr:not(.jr-group-header,.jr-group-footer):hover{
7980
- background:var(--column-b-hover-color);
7981
- cursor: pointer;
7982
- transition: background-color .8s;
7983
- td{
7984
- color:black;
7985
- transition:color .8s;
7986
- }
7987
-
7988
- }
7989
- }
7990
- }
7991
-
7992
- table{
7993
- Xheight: 100%;
7994
- min-width:100%;
7995
- width: max-content;
7996
- border-spacing: 0;
7997
-
7998
- thead{
7999
- position: sticky;
8000
- top: 0;
8001
-
8002
- th{
8003
- position: relative;
8004
- height:32px;
8005
- padding: 4px;
8006
- background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
8007
- box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
8008
- color: #525252;
8009
- white-space: nowrap;
8010
- }
8011
- }
8012
-
8013
- tfoot{
8014
- position: sticky;
8015
- bottom: -1px;
8016
-
8017
- Xtr:nth-child(1){
8018
- th{
8019
- Xborder-top:1px solid var(--column-bd-color);
8020
- }
8021
- }
8022
- Xth:nth-child(1){
8023
- Xborder-left:1px solid var(--column-bd-color);
8024
- }
8025
-
8026
- th{
8027
- height:32px;
8028
- padding: 4px;
8029
- background: #e4e4e4;
8030
- xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
8031
- xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
8032
- color: #525252;
8033
- white-space: nowrap;
8034
-
8035
- border-left:2px solid #f4f4f4;
8036
- border-top:2px solid #f4f4f4;
8037
- border-right:2px solid var(--column-bd-color);
8038
- border-bottom:2px solid var(--column-bd-color);
8039
- }
8040
- }
8041
-
8042
- tbody{
8043
- tr{
8044
- transition: background .3s linear;
8045
- background:var(--column-b-color);
8046
- a:#ededed;
8047
- th{
8048
- color:#444444;
8049
- }
8050
- td{
8051
- border-bottom: 1px solid var(--column-bd-color);
8052
- color:#2e2e2e;
8053
- padding: 4px;
8054
- }
8055
- }
8056
- tr:hover{
8057
- background:var(--column-b-hover-color);
8058
-
8059
- }
8060
-
8061
- tr.jr-group-header
8062
- ,tr.jr-group-footer{
8063
- text-align:left;
8064
- background:#dddbdb;
8065
-
8066
- th{
8067
- border-bottom: 1px solid var(--column-bd-color);
8068
- border-right: 1px solid var(--column-bd-color);
8069
- padding: 4px 8px;
8070
- }
8071
- }
8072
- }
8073
- tbody.empty-tbody{
8074
- td{
8075
- border:10px solid red;
8076
- }
8077
- }
8078
- }
8079
-
8080
-
8081
-
8082
-
8083
- > .empty{
8084
- user-select: none;
8085
- color:#848484;
8086
- height:100%;
8087
- flex:1;
8088
- display:flex;
8089
- justify-content: center;
8090
- align-items: center;
8091
- }
8092
- `;
8093
-
8094
- const getMapObject = (map, names) => {
8095
- const name = names.shift(names);
8096
- if (names.length) {
8097
- return getMapObject(map?.[name], names);
8098
- } else {
8099
- return map;
8100
- }
8101
- };
8102
- const setMapObject = (map, names, value) => {
8103
- const name = names.shift(names);
8104
- if (names?.length) {
8105
- if (typeof map[name] != 'object') {
8106
- map[name] = {};
8107
- }
8108
- setMapObject(map[name], names, value);
8109
- } else {
8110
- map[name] = value;
8111
- }
8112
- };
8113
- class JRTable extends JRFrame {
8114
- constructor(props) {
8115
- super(props);
8116
- this.colGroupRef = /*#__PURE__*/React.createRef();
8117
- }
8118
- UNSAFE_componentWillMount() {
8119
- this.setColumns(this.props.columns);
8120
- }
8121
-
8122
- //------------------------------------------------------------------------------------
8123
- getChecked() {
8124
- return [1, 2, 3, 4];
8125
- }
8126
- checkableColumn(props) {
8127
- return {
8128
- //方法1
8129
- render({
8130
- value,
8131
- onChange
8132
- }) {
8133
- return /*#__PURE__*/React.createElement("checkbox", {
8134
- checked: value,
8135
- onChange: e => {
8136
- onChange(e.target.checked);
8137
- }
8138
- });
8139
- },
8140
- align: 'center',
8141
- name: 'checked',
8142
- ...props
8143
- };
8144
- // return {//方法2
8145
- // type:Checkbox
8146
- // ,funcProps({value}){
8147
- // po('fffffffffffff',value)
8148
- // return {
8149
- // align:'center'
8150
- // ,checked:value
8151
- // }
8152
- // }
8153
- // // ,label:'A'
8154
- // ,onChange(e,{value,onChange,me}){
8155
- // onChange(e.target.checked)
8156
- // }
8157
- // ,...props
8158
- // }
8159
- }
8160
- deletableColumn({
8161
- name = 'deletable',
8162
- sendValue,
8163
- sendName,
8164
- valueName,
8165
- ...props
8166
- }) {
8167
- return {
8168
- render({
8169
- value,
8170
- onChange
8171
- }) {
8172
- return /*#__PURE__*/React.createElement("checkbox", {
8173
- checked: value,
8174
- onChange: e => {
8175
- onChange(e.target.checked);
8176
- }
8177
- });
8178
- },
8179
- align: 'center',
8180
- name,
8181
- label() {
8182
- return /*#__PURE__*/React.createElement("button", {
8183
- onClick: () => {
8184
- const value = this.props.delete.value ?? this.getDataSource()?.filter(record => record[name]).map(record => sendValue ? record[sendValue] : record);
8185
- const callback = this.props.delete.callback ?? function (a, b, c) {
8186
- this.reload();
8187
- };
8188
- this.delete({
8189
- value: sendName ? {
8190
- [sendName]: value
8191
- } : value,
8192
- callback,
8193
- ...props
8194
- });
8195
- }
8196
- }, "\u522A\u9664");
8197
- },
8198
- ...props
8199
- };
8200
- }
8201
- initColumn(column, level, result, leafColumns, names, lastColSpan) {
8202
- const isBranch = column.type === undefined && column?.columns && column?.columns.length;
8203
- const _names = column.name ? [...names, column.name] : names;
8204
- if (isBranch) {
8205
- if (column.label !== null) result[level].push(column);
8206
- const c = this.initColumns(column.columns, level + (column.label !== null ? 1 : 0) + (column.rowSpan != null ? column.rowSpan - 1 : 0), result, leafColumns, _names, lastColSpan);
8207
- column.colSpan = c.colSpan;
8208
- column.columnNo = lastColSpan;
8209
- return {
8210
- colSpan: column.colSpan
8211
- };
8212
- } else {
8213
- column.columnNo = lastColSpan;
8214
- result[level].push({
8215
- ...column,
8216
- isLeaf: true
8217
- });
8218
- leafColumns.push(column);
8219
- column.names = _names;
8220
- if (_names?.length > 1) {
8221
- column.setValue = function (record, value) {
8222
- try {
8223
- getMapObject(record, [..._names])[column.name] = value;
8224
- } catch {
8225
- setMapObject(record, [..._names], value);
8226
- }
8227
- };
8228
- column.getValue = function (record) {
8229
- return _names.reduce((acc, name) => {
8230
- return acc?.[name];
8231
- }, record);
8232
- };
8233
- } else {
8234
- column.setValue = function (record, value) {
8235
- record[column.name] = value;
8236
- };
8237
- column.getValue = function (record) {
8238
- return record[column.name];
8239
- };
8240
- }
8241
- return {
8242
- colSpan: 1
8243
- };
8244
- }
8245
- }
8246
- initColumns(columns, level, result, leafColumns, names, lastColSpan) {
8247
- for (let i = result.length; i <= level; i++) {
8248
- if (!result[i]) {
8249
- result.push([]);
8250
- }
8251
- }
8252
- let _lastColSpan = lastColSpan;
8253
- const childrenLength = columns?.reduce((acc, column) => {
8254
- const c = this.initColumn(column, level, result, leafColumns, names, _lastColSpan);
8255
- acc.colSpan += c.colSpan;
8256
- _lastColSpan += c.colSpan;
8257
- return acc;
8258
- }, {
8259
- colSpan: 0
8260
- });
8261
- return childrenLength;
8262
- }
8263
- setColumns([..._columns]) {
8264
- if (this.props.checkable) _columns.unshift(this.checkableColumn(this.props.checkable));
8265
- if (this.props.deletable) {
8266
- _columns.unshift(this.deletableColumn(this.props.deletable));
8267
- }
8268
- const columns = [];
8269
- const leafColumns = [];
8270
- this.initColumns(_columns, 0, columns, leafColumns, [], 0);
8271
- // po('initColumns',initColumns)
8272
- this.setState({
8273
- columns,
8274
- leafColumns
8275
- });
8276
- }
8277
- //------------------------------------------------------------------------------------
8278
- setDataSource(dataSource) {}
8279
- getDataSource() {
8280
- return this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue();
8281
- }
8282
- add(record, index = this.getDataSource()?.length ?? 0, group) {
8283
- //group 還沒有考慮到
8284
-
8285
- if (this.getDataSource()) {
8286
- if (group === undefined) {
8287
- this.getDataSource().splice(index, 0, record); //.push(record)
8288
- } else {
8289
- this.getDataSource()[group].splice(index, 0, record); //.push(record)
8290
- }
8291
- this.setValue(this.getValue());
8292
- } else {
8293
- //未完成. 沒有資料的時候, 要考慮有或沒有dataSourceName的不同處理
8294
- this.setValue({
8295
- [this.props.dataSourceName]: [record]
8296
- });
8297
- }
8298
- }
8299
- noData() {
8300
- const data = this.getDataSource();
8301
- return data == null || data.length == 0;
8302
- }
8303
- //------------------------------------------------------------------------------------
8304
- renderMe() {
8305
- return /*#__PURE__*/React.createElement(StyledJRTable, {
8306
- className: `${this.props.className ?? ''} jr-table ${this.props.onRowClick ? 'row-highlightable' : ''}`
8307
- }, /*#__PURE__*/React.createElement("table", {
8308
- className: 'jr-table-table'
8309
- }, /*#__PURE__*/React.createElement(TBodies, {
8310
- table: this,
8311
- leafColumns: this.state.leafColumns,
8312
- groupHeader: this.props.groupHeader,
8313
- groupFooter: this.props.groupFooter,
8314
- dataSource: this.getDataSource(),
8315
- onRowClick: this.props.onRowClick
8316
- }), /*#__PURE__*/React.createElement(TFoot, {
8317
- columns: this.props.footColumns,
8318
- table: this
8319
- }), /*#__PURE__*/React.createElement(THead, {
8320
- columns: this.state.columns,
8321
- leafColumns: this.state.leafColumns,
8322
- table: this
8323
- })), /*#__PURE__*/React.createElement("div", {
8324
- className: 'empty'
8325
- }, this.noData() && '無資料'));
8326
- }
8327
- }
8328
-
8329
7439
  function JRTest() {
8330
7440
  return 'I am JRTest string';
8331
7441
  }
@@ -8335,4 +7445,4 @@ class JRTestReact extends React.Component {
8335
7445
  }
8336
7446
  }
8337
7447
 
8338
- export { JRFrame, JRSubmit, JRTable, JRTest, JRTestReact };
7448
+ export { JRFrame, JRSubmit, JRTest, JRTestReact };