jrs-react 1.1.13 → 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 +13 -905
- package/build/index.js +12 -905
- package/package.json +1 -1
- package/src/components/JRFrame/JRFrame.jsx +13 -12
- package/src/components/JRTable/JRTable.jsx +9 -8
- package/src/index.js +2 -2
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
|
-
|
|
7433
|
-
|
|
7434
|
-
|
|
7435
|
-
|
|
7436
|
-
}
|
|
7437
|
-
|
|
7438
|
-
|
|
7439
|
-
|
|
7440
|
-
|
|
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
|
-
},
|
|
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,842 +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
|
-
// import JRFrame from "../JRFrame/JRFrame";
|
|
8095
|
-
|
|
8096
|
-
const getMapObject = (map, names) => {
|
|
8097
|
-
const name = names.shift(names);
|
|
8098
|
-
if (names.length) {
|
|
8099
|
-
return getMapObject(map?.[name], names);
|
|
8100
|
-
} else {
|
|
8101
|
-
return map;
|
|
8102
|
-
}
|
|
8103
|
-
};
|
|
8104
|
-
const setMapObject = (map, names, value) => {
|
|
8105
|
-
const name = names.shift(names);
|
|
8106
|
-
if (names?.length) {
|
|
8107
|
-
if (typeof map[name] != 'object') {
|
|
8108
|
-
map[name] = {};
|
|
8109
|
-
}
|
|
8110
|
-
setMapObject(map[name], names, value);
|
|
8111
|
-
} else {
|
|
8112
|
-
map[name] = value;
|
|
8113
|
-
}
|
|
8114
|
-
};
|
|
8115
|
-
class JRTable extends JRSubmit {
|
|
8116
|
-
constructor(props) {
|
|
8117
|
-
super(props);
|
|
8118
|
-
this.colGroupRef = /*#__PURE__*/React.createRef();
|
|
8119
|
-
}
|
|
8120
|
-
UNSAFE_componentWillMount() {
|
|
8121
|
-
this.setColumns(this.props.columns);
|
|
8122
|
-
}
|
|
8123
|
-
|
|
8124
|
-
//------------------------------------------------------------------------------------
|
|
8125
|
-
getChecked() {
|
|
8126
|
-
return [1, 2, 3, 4];
|
|
8127
|
-
}
|
|
8128
|
-
checkableColumn(props) {
|
|
8129
|
-
return {
|
|
8130
|
-
//方法1
|
|
8131
|
-
render({
|
|
8132
|
-
value,
|
|
8133
|
-
onChange
|
|
8134
|
-
}) {
|
|
8135
|
-
return /*#__PURE__*/React.createElement("checkbox", {
|
|
8136
|
-
checked: value,
|
|
8137
|
-
onChange: e => {
|
|
8138
|
-
onChange(e.target.checked);
|
|
8139
|
-
}
|
|
8140
|
-
});
|
|
8141
|
-
},
|
|
8142
|
-
align: 'center',
|
|
8143
|
-
name: 'checked',
|
|
8144
|
-
...props
|
|
8145
|
-
};
|
|
8146
|
-
// return {//方法2
|
|
8147
|
-
// type:Checkbox
|
|
8148
|
-
// ,funcProps({value}){
|
|
8149
|
-
// po('fffffffffffff',value)
|
|
8150
|
-
// return {
|
|
8151
|
-
// align:'center'
|
|
8152
|
-
// ,checked:value
|
|
8153
|
-
// }
|
|
8154
|
-
// }
|
|
8155
|
-
// // ,label:'A'
|
|
8156
|
-
// ,onChange(e,{value,onChange,me}){
|
|
8157
|
-
// onChange(e.target.checked)
|
|
8158
|
-
// }
|
|
8159
|
-
// ,...props
|
|
8160
|
-
// }
|
|
8161
|
-
}
|
|
8162
|
-
deletableColumn({
|
|
8163
|
-
name = 'deletable',
|
|
8164
|
-
sendValue,
|
|
8165
|
-
sendName,
|
|
8166
|
-
valueName,
|
|
8167
|
-
...props
|
|
8168
|
-
}) {
|
|
8169
|
-
return {
|
|
8170
|
-
render({
|
|
8171
|
-
value,
|
|
8172
|
-
onChange
|
|
8173
|
-
}) {
|
|
8174
|
-
return /*#__PURE__*/React.createElement("checkbox", {
|
|
8175
|
-
checked: value,
|
|
8176
|
-
onChange: e => {
|
|
8177
|
-
onChange(e.target.checked);
|
|
8178
|
-
}
|
|
8179
|
-
});
|
|
8180
|
-
},
|
|
8181
|
-
align: 'center',
|
|
8182
|
-
name,
|
|
8183
|
-
label() {
|
|
8184
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
8185
|
-
onClick: () => {
|
|
8186
|
-
const value = this.props.delete.value ?? this.getDataSource()?.filter(record => record[name]).map(record => sendValue ? record[sendValue] : record);
|
|
8187
|
-
const callback = this.props.delete.callback ?? function (a, b, c) {
|
|
8188
|
-
this.reload();
|
|
8189
|
-
};
|
|
8190
|
-
this.delete({
|
|
8191
|
-
value: sendName ? {
|
|
8192
|
-
[sendName]: value
|
|
8193
|
-
} : value,
|
|
8194
|
-
callback,
|
|
8195
|
-
...props
|
|
8196
|
-
});
|
|
8197
|
-
}
|
|
8198
|
-
}, "\u522A\u9664");
|
|
8199
|
-
},
|
|
8200
|
-
...props
|
|
8201
|
-
};
|
|
8202
|
-
}
|
|
8203
|
-
initColumn(column, level, result, leafColumns, names, lastColSpan) {
|
|
8204
|
-
const isBranch = column.type === undefined && column?.columns && column?.columns.length;
|
|
8205
|
-
const _names = column.name ? [...names, column.name] : names;
|
|
8206
|
-
if (isBranch) {
|
|
8207
|
-
if (column.label !== null) result[level].push(column);
|
|
8208
|
-
const c = this.initColumns(column.columns, level + (column.label !== null ? 1 : 0) + (column.rowSpan != null ? column.rowSpan - 1 : 0), result, leafColumns, _names, lastColSpan);
|
|
8209
|
-
column.colSpan = c.colSpan;
|
|
8210
|
-
column.columnNo = lastColSpan;
|
|
8211
|
-
return {
|
|
8212
|
-
colSpan: column.colSpan
|
|
8213
|
-
};
|
|
8214
|
-
} else {
|
|
8215
|
-
column.columnNo = lastColSpan;
|
|
8216
|
-
result[level].push({
|
|
8217
|
-
...column,
|
|
8218
|
-
isLeaf: true
|
|
8219
|
-
});
|
|
8220
|
-
leafColumns.push(column);
|
|
8221
|
-
column.names = _names;
|
|
8222
|
-
if (_names?.length > 1) {
|
|
8223
|
-
column.setValue = function (record, value) {
|
|
8224
|
-
try {
|
|
8225
|
-
getMapObject(record, [..._names])[column.name] = value;
|
|
8226
|
-
} catch {
|
|
8227
|
-
setMapObject(record, [..._names], value);
|
|
8228
|
-
}
|
|
8229
|
-
};
|
|
8230
|
-
column.getValue = function (record) {
|
|
8231
|
-
return _names.reduce((acc, name) => {
|
|
8232
|
-
return acc?.[name];
|
|
8233
|
-
}, record);
|
|
8234
|
-
};
|
|
8235
|
-
} else {
|
|
8236
|
-
column.setValue = function (record, value) {
|
|
8237
|
-
record[column.name] = value;
|
|
8238
|
-
};
|
|
8239
|
-
column.getValue = function (record) {
|
|
8240
|
-
return record[column.name];
|
|
8241
|
-
};
|
|
8242
|
-
}
|
|
8243
|
-
return {
|
|
8244
|
-
colSpan: 1
|
|
8245
|
-
};
|
|
8246
|
-
}
|
|
8247
|
-
}
|
|
8248
|
-
initColumns(columns, level, result, leafColumns, names, lastColSpan) {
|
|
8249
|
-
for (let i = result.length; i <= level; i++) {
|
|
8250
|
-
if (!result[i]) {
|
|
8251
|
-
result.push([]);
|
|
8252
|
-
}
|
|
8253
|
-
}
|
|
8254
|
-
let _lastColSpan = lastColSpan;
|
|
8255
|
-
const childrenLength = columns?.reduce((acc, column) => {
|
|
8256
|
-
const c = this.initColumn(column, level, result, leafColumns, names, _lastColSpan);
|
|
8257
|
-
acc.colSpan += c.colSpan;
|
|
8258
|
-
_lastColSpan += c.colSpan;
|
|
8259
|
-
return acc;
|
|
8260
|
-
}, {
|
|
8261
|
-
colSpan: 0
|
|
8262
|
-
});
|
|
8263
|
-
return childrenLength;
|
|
8264
|
-
}
|
|
8265
|
-
setColumns([..._columns]) {
|
|
8266
|
-
if (this.props.checkable) _columns.unshift(this.checkableColumn(this.props.checkable));
|
|
8267
|
-
if (this.props.deletable) {
|
|
8268
|
-
_columns.unshift(this.deletableColumn(this.props.deletable));
|
|
8269
|
-
}
|
|
8270
|
-
const columns = [];
|
|
8271
|
-
const leafColumns = [];
|
|
8272
|
-
this.initColumns(_columns, 0, columns, leafColumns, [], 0);
|
|
8273
|
-
// po('initColumns',initColumns)
|
|
8274
|
-
this.setState({
|
|
8275
|
-
columns,
|
|
8276
|
-
leafColumns
|
|
8277
|
-
});
|
|
8278
|
-
}
|
|
8279
|
-
//------------------------------------------------------------------------------------
|
|
8280
|
-
setDataSource(dataSource) {}
|
|
8281
|
-
getDataSource() {
|
|
8282
|
-
return this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue();
|
|
8283
|
-
}
|
|
8284
|
-
add(record, index = this.getDataSource()?.length ?? 0, group) {
|
|
8285
|
-
//group 還沒有考慮到
|
|
8286
|
-
|
|
8287
|
-
if (this.getDataSource()) {
|
|
8288
|
-
if (group === undefined) {
|
|
8289
|
-
this.getDataSource().splice(index, 0, record); //.push(record)
|
|
8290
|
-
} else {
|
|
8291
|
-
this.getDataSource()[group].splice(index, 0, record); //.push(record)
|
|
8292
|
-
}
|
|
8293
|
-
this.setValue(this.getValue());
|
|
8294
|
-
} else {
|
|
8295
|
-
//未完成. 沒有資料的時候, 要考慮有或沒有dataSourceName的不同處理
|
|
8296
|
-
this.setValue({
|
|
8297
|
-
[this.props.dataSourceName]: [record]
|
|
8298
|
-
});
|
|
8299
|
-
}
|
|
8300
|
-
}
|
|
8301
|
-
noData() {
|
|
8302
|
-
const data = this.getDataSource();
|
|
8303
|
-
return data == null || data.length == 0;
|
|
8304
|
-
}
|
|
8305
|
-
//------------------------------------------------------------------------------------
|
|
8306
|
-
renderMe() {
|
|
8307
|
-
return /*#__PURE__*/React.createElement(StyledJRTable, {
|
|
8308
|
-
className: `${this.props.className ?? ''} jr-table ${this.props.onRowClick ? 'row-highlightable' : ''}`
|
|
8309
|
-
}, /*#__PURE__*/React.createElement("table", {
|
|
8310
|
-
className: 'jr-table-table'
|
|
8311
|
-
}, /*#__PURE__*/React.createElement(TBodies, {
|
|
8312
|
-
table: this,
|
|
8313
|
-
leafColumns: this.state.leafColumns,
|
|
8314
|
-
groupHeader: this.props.groupHeader,
|
|
8315
|
-
groupFooter: this.props.groupFooter,
|
|
8316
|
-
dataSource: this.getDataSource(),
|
|
8317
|
-
onRowClick: this.props.onRowClick
|
|
8318
|
-
}), /*#__PURE__*/React.createElement(TFoot, {
|
|
8319
|
-
columns: this.props.footColumns,
|
|
8320
|
-
table: this
|
|
8321
|
-
}), /*#__PURE__*/React.createElement(THead, {
|
|
8322
|
-
columns: this.state.columns,
|
|
8323
|
-
leafColumns: this.state.leafColumns,
|
|
8324
|
-
table: this
|
|
8325
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
8326
|
-
className: 'empty'
|
|
8327
|
-
}, this.noData() && '無資料'));
|
|
8328
|
-
}
|
|
8329
|
-
}
|
|
8330
|
-
|
|
8331
7439
|
function JRTest() {
|
|
8332
7440
|
return 'I am JRTest string';
|
|
8333
7441
|
}
|
|
@@ -8337,4 +7445,4 @@ class JRTestReact extends React.Component {
|
|
|
8337
7445
|
}
|
|
8338
7446
|
}
|
|
8339
7447
|
|
|
8340
|
-
export { JRFrame, JRSubmit,
|
|
7448
|
+
export { JRFrame, JRSubmit, JRTest, JRTestReact };
|