ztxkui 2.7.4 → 2.7.5

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.
@@ -0,0 +1,7 @@
1
+ /**
2
+ * @author 陈亚雄
3
+ * @description
4
+ */
5
+ import React from 'react';
6
+ declare const PrintDemo: React.FC;
7
+ export default PrintDemo;
@@ -0,0 +1,57 @@
1
+ /**
2
+ * @author 陈亚雄
3
+ * @description
4
+ */
5
+ import React, { useRef } from 'react';
6
+ // import { findDOMNode } from 'react-dom';
7
+ import { Button } from '../index';
8
+ import Table from 'components/Table';
9
+ import { useReactToPrint } from 'react-to-print';
10
+ var dataSource = new Array(10).fill('1').map(function (item, index) { return ({
11
+ test1: "\u6D4B\u8BD5\u4E00" + index,
12
+ test2: "\u6D4B\u8BD5\u4E8C" + index,
13
+ test3: "\u6D4B\u8BD5\u4E09" + index,
14
+ test4: "\u6D4B\u8BD5\u56DB" + index,
15
+ id: "" + index,
16
+ }); });
17
+ var PrintDemo = function () {
18
+ var componentRef = useRef();
19
+ var columns = [
20
+ {
21
+ title: '测试一',
22
+ width: 100,
23
+ dataIndex: 'test1',
24
+ key: 'test1',
25
+ },
26
+ {
27
+ title: '测试一',
28
+ width: 100,
29
+ dataIndex: 'test2',
30
+ key: 'test2',
31
+ },
32
+ {
33
+ title: '测试一',
34
+ width: 100,
35
+ dataIndex: 'test3',
36
+ key: 'test3',
37
+ },
38
+ {
39
+ title: '测试一',
40
+ width: 100,
41
+ dataIndex: 'test4',
42
+ key: 'test4',
43
+ },
44
+ ];
45
+ var handlePrint = useReactToPrint({
46
+ content: function () { return componentRef.current; },
47
+ });
48
+ return (React.createElement(React.Fragment, null,
49
+ React.createElement("div", null,
50
+ React.createElement(Button, { onClick: function () {
51
+ handlePrint();
52
+ } }, "\u6253\u5370")),
53
+ React.createElement("div", { ref: componentRef },
54
+ React.createElement(Table, { columns: columns, dataSource: dataSource, rowKey: "id" }),
55
+ React.createElement("iframe", { style: { width: '1000px', height: '400px' }, title: "\u6D4B\u8BD5iframe\u6253\u5370", src: "http://localhost:8787/table" }))));
56
+ };
57
+ export default PrintDemo;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * @author 陈亚雄
3
+ * @description
4
+ */
5
+ import React from 'react';
6
+ declare const TableDemo1: React.FC;
7
+ export default TableDemo1;
@@ -0,0 +1,235 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ /**
13
+ * @author 陈亚雄
14
+ * @description
15
+ */
16
+ import React, { useState, useCallback, useRef, useEffect } from 'react';
17
+ // redux
18
+ // ztxkui公共组件
19
+ import Table from 'components/Table';
20
+ import EnhanceSelect from 'components/EnhanceSelect';
21
+ // 路由配置
22
+ // store
23
+ // 自定义组件
24
+ // 其他文件
25
+ var companyList = [
26
+ { id: '100', name: '百度' },
27
+ { id: '200', name: '阿里' },
28
+ { id: '300', name: '腾讯' },
29
+ ];
30
+ var depListObj = {
31
+ '100': [
32
+ { id: '100100', name: '百度-事业部' },
33
+ { id: '100200', name: '百度-电商部' },
34
+ { id: '100300', name: '百度-工程部' },
35
+ ],
36
+ '200': [
37
+ { id: '200100', name: '阿里-事业部' },
38
+ { id: '200200', name: '阿里-电商部' },
39
+ { id: '200300', name: '阿里-工程部' },
40
+ ],
41
+ '300': [
42
+ { id: '300100', name: '腾讯-事业部' },
43
+ { id: '300200', name: '腾讯-电商部' },
44
+ { id: '300300', name: '腾讯-工程部' },
45
+ ],
46
+ all: [
47
+ { id: '100100', name: '百度-事业部' },
48
+ { id: '100200', name: '百度-电商部' },
49
+ { id: '100300', name: '百度-工程部' },
50
+ { id: '200100', name: '阿里-事业部' },
51
+ { id: '200200', name: '阿里-电商部' },
52
+ { id: '200300', name: '阿里-工程部' },
53
+ { id: '300100', name: '腾讯-事业部' },
54
+ { id: '300200', name: '腾讯-电商部' },
55
+ { id: '300300', name: '腾讯-工程部' },
56
+ ],
57
+ };
58
+ var TableDemo1 = function () {
59
+ var _a = useState([
60
+ { id: '1' },
61
+ { id: '2' },
62
+ { id: '3' },
63
+ ]), records = _a[0], setRecords = _a[1];
64
+ var recordsRef = useRef();
65
+ // 初始化渲染,针对配置了editable、editableConfig的列配置
66
+ var _b = useState(false), firstRender = _b[0], setFirstRender = _b[1];
67
+ useEffect(function () {
68
+ setFirstRender(true);
69
+ }, []);
70
+ useEffect(function () {
71
+ recordsRef.current = records;
72
+ }, [records]);
73
+ // 表格列配置
74
+ var columns = [
75
+ {
76
+ title: '序号',
77
+ width: 62,
78
+ fixed: 'left',
79
+ align: 'center',
80
+ key: 'index',
81
+ render: function (_text, _record, index) { return "" + (index + 1); },
82
+ },
83
+ {
84
+ title: '公司',
85
+ width: 120,
86
+ key: 'company',
87
+ dataIndex: 'company',
88
+ shouldCellUpdate: function (record, preRecord) {
89
+ return record.company !== preRecord.company;
90
+ },
91
+ render: function (_text, _record, index) {
92
+ console.log('公司下拉框-render', index);
93
+ return (React.createElement(EnhanceSelect, { list: companyList, value: _text, onChange: function (value, option, fullData) {
94
+ var newRecord = {
95
+ company: value,
96
+ department: '',
97
+ };
98
+ onEditableSaveHandle(newRecord, index);
99
+ } }));
100
+ },
101
+ },
102
+ {
103
+ title: '部门',
104
+ width: 120,
105
+ key: 'department',
106
+ dataIndex: 'department',
107
+ shouldCellUpdate: function (record, preRecord) {
108
+ return (record.company !== preRecord.company ||
109
+ record.department !== preRecord.department);
110
+ },
111
+ render: function (_text, _record, index) {
112
+ console.log('部门下拉框-render', index);
113
+ var company = _record.company;
114
+ var depList = depListObj.all;
115
+ if (company) {
116
+ depList = depListObj[company];
117
+ }
118
+ return (React.createElement(EnhanceSelect, { list: depList, value: _text, onChange: function (value, option, fullData) {
119
+ var newRecord = {
120
+ department: value,
121
+ };
122
+ onEditableSaveHandle(newRecord, index);
123
+ } }));
124
+ },
125
+ },
126
+ {
127
+ title: '输入text',
128
+ width: 120,
129
+ key: 'inText',
130
+ dataIndex: 'inText',
131
+ shouldCellUpdate: function (record, preRecord) {
132
+ if (firstRender) {
133
+ setFirstRender(false);
134
+ return true;
135
+ }
136
+ return record.inText !== preRecord.inText;
137
+ },
138
+ editable: true,
139
+ },
140
+ {
141
+ title: '输入text1',
142
+ width: 120,
143
+ key: 'inText1',
144
+ dataIndex: 'inText1',
145
+ shouldCellUpdate: function (record, preRecord) {
146
+ if (firstRender) {
147
+ setFirstRender(false);
148
+ return true;
149
+ }
150
+ return record.inText1 !== preRecord.inText1;
151
+ },
152
+ editable: true,
153
+ },
154
+ {
155
+ title: '输入number',
156
+ width: 120,
157
+ key: 'inNumber',
158
+ dataIndex: 'inNumber',
159
+ shouldCellUpdate: function (record, preRecord) {
160
+ if (firstRender) {
161
+ setFirstRender(false);
162
+ return true;
163
+ }
164
+ return record.inNumber !== preRecord.inNumber;
165
+ },
166
+ editable: true,
167
+ editableConfig: {
168
+ type: 'inputNumber',
169
+ },
170
+ },
171
+ {
172
+ title: '输入number1',
173
+ width: 120,
174
+ key: 'inNumber1',
175
+ dataIndex: 'inNumber1',
176
+ shouldCellUpdate: function (record, preRecord) {
177
+ if (firstRender) {
178
+ setFirstRender(false);
179
+ return true;
180
+ }
181
+ return record.inNumber1 !== preRecord.inNumber1;
182
+ },
183
+ editable: true,
184
+ editableConfig: {
185
+ type: 'inputNumber',
186
+ },
187
+ },
188
+ {
189
+ title: '下拉框1',
190
+ width: 120,
191
+ key: 'selector',
192
+ dataIndex: 'selector',
193
+ shouldCellUpdate: function (record, preRecord) {
194
+ return record.selector !== preRecord.selector;
195
+ },
196
+ render: function (_text, _record, index) {
197
+ console.log('下拉框1-render', index);
198
+ return React.createElement(EnhanceSelect, null);
199
+ },
200
+ },
201
+ ];
202
+ var onEditableSaveHandle = useCallback(function (record, index, _dataIndex) {
203
+ var _a;
204
+ if (_dataIndex === void 0) { _dataIndex = ''; }
205
+ if (typeof index === 'number') {
206
+ var newRecords = recordsRef.current.slice();
207
+ var item = newRecords[index];
208
+ newRecords.splice(index, 1, _dataIndex
209
+ ? __assign(__assign(__assign({}, record), item), (_a = {}, _a[_dataIndex] = record[_dataIndex], _a)) : __assign(__assign({}, item), record));
210
+ setRecords(newRecords);
211
+ }
212
+ }, []);
213
+ console.log('render');
214
+ return (React.createElement(React.Fragment, null,
215
+ React.createElement(Table, { columns: columns, dataSource: records, rowKey: "id", onEditableSave: onEditableSaveHandle }),
216
+ React.createElement("button", { onClick: function () {
217
+ console.log(records);
218
+ } }, "\u83B7\u53D6\u6570\u636E")));
219
+ };
220
+ export default TableDemo1;
221
+ // import React, { useEffect, useState } from 'react';
222
+ // export default function TableDemo1() {
223
+ // const [count, setCount] = useState<number>(-1);
224
+ // useEffect(() => {
225
+ // console.log()
226
+ // setCount(0);
227
+ // });
228
+ // console.log('log');
229
+ // return (
230
+ // <div>
231
+ // 111
232
+ // <button>{count}</button>
233
+ // </div>
234
+ // );
235
+ // }
@@ -115,6 +115,6 @@ export interface IProps<T> extends Omit<SelectProps<T>, 'onChange'> {
115
115
  * { code: 200, data: { records: [] } } || { status: 200, data: { code: 200, data: { records: [] } } }
116
116
  * 如果数据不能在接口层面满足以上形式,那么组件提供transformData属性,转换接口数据格式
117
117
  */
118
- declare function EnhanceSelect<VT extends SelectValue = SelectValue>({ list, defaultList, params, url, method, timeout, dataKey, componentKey, titleKey, showAll, isCatch, onCompleted, onChange, request, remoteSearch, remoteSearchKey, remoteSearchDataKey, isRemoteSearchDataKey, transformData, joinKey, joinStr, mustHasParams, disabledValues, ...restProps }: IProps<VT>): JSX.Element;
118
+ declare function EnhanceSelect<VT extends SelectValue = SelectValue>({ list, defaultList, params, url, method, timeout, dataKey, componentKey, titleKey, showAll, isCatch, onCompleted, onChange, onSearch, request, remoteSearch, remoteSearchKey, remoteSearchDataKey, isRemoteSearchDataKey, transformData, joinKey, joinStr, mustHasParams, disabledValues, ...restProps }: IProps<VT>): JSX.Element;
119
119
  declare const _default: React.MemoExoticComponent<typeof EnhanceSelect>;
120
120
  export default _default;
@@ -76,7 +76,7 @@ function getData(request, options) {
76
76
  * 如果数据不能在接口层面满足以上形式,那么组件提供transformData属性,转换接口数据格式
77
77
  */
78
78
  function EnhanceSelect(_a) {
79
- var list = _a.list, defaultList = _a.defaultList, params = _a.params, url = _a.url, _b = _a.method, method = _b === void 0 ? 'GET' : _b, _c = _a.timeout, timeout = _c === void 0 ? 30000 : _c, _d = _a.dataKey, dataKey = _d === void 0 ? 'id' : _d, componentKey = _a.componentKey, _e = _a.titleKey, titleKey = _e === void 0 ? 'name' : _e, showAll = _a.showAll, isCatch = _a.isCatch, onCompleted = _a.onCompleted, onChange = _a.onChange, request = _a.request, remoteSearch = _a.remoteSearch, remoteSearchKey = _a.remoteSearchKey, remoteSearchDataKey = _a.remoteSearchDataKey, _f = _a.isRemoteSearchDataKey, isRemoteSearchDataKey = _f === void 0 ? true : _f, transformData = _a.transformData, joinKey = _a.joinKey, _g = _a.joinStr, joinStr = _g === void 0 ? '-' : _g, mustHasParams = _a.mustHasParams, disabledValues = _a.disabledValues, restProps = __rest(_a, ["list", "defaultList", "params", "url", "method", "timeout", "dataKey", "componentKey", "titleKey", "showAll", "isCatch", "onCompleted", "onChange", "request", "remoteSearch", "remoteSearchKey", "remoteSearchDataKey", "isRemoteSearchDataKey", "transformData", "joinKey", "joinStr", "mustHasParams", "disabledValues"]);
79
+ var list = _a.list, defaultList = _a.defaultList, params = _a.params, url = _a.url, _b = _a.method, method = _b === void 0 ? 'GET' : _b, _c = _a.timeout, timeout = _c === void 0 ? 30000 : _c, _d = _a.dataKey, dataKey = _d === void 0 ? 'id' : _d, componentKey = _a.componentKey, _e = _a.titleKey, titleKey = _e === void 0 ? 'name' : _e, showAll = _a.showAll, isCatch = _a.isCatch, onCompleted = _a.onCompleted, onChange = _a.onChange, onSearch = _a.onSearch, request = _a.request, remoteSearch = _a.remoteSearch, remoteSearchKey = _a.remoteSearchKey, remoteSearchDataKey = _a.remoteSearchDataKey, _f = _a.isRemoteSearchDataKey, isRemoteSearchDataKey = _f === void 0 ? true : _f, transformData = _a.transformData, joinKey = _a.joinKey, _g = _a.joinStr, joinStr = _g === void 0 ? '-' : _g, mustHasParams = _a.mustHasParams, disabledValues = _a.disabledValues, restProps = __rest(_a, ["list", "defaultList", "params", "url", "method", "timeout", "dataKey", "componentKey", "titleKey", "showAll", "isCatch", "onCompleted", "onChange", "onSearch", "request", "remoteSearch", "remoteSearchKey", "remoteSearchDataKey", "isRemoteSearchDataKey", "transformData", "joinKey", "joinStr", "mustHasParams", "disabledValues"]);
80
80
  var currentClick = useRef(true);
81
81
  // 下拉数据源
82
82
  var _h = useFetchState([]), selectList = _h[0], setSelectList = _h[1];
@@ -234,6 +234,7 @@ function EnhanceSelect(_a) {
234
234
  var searchHandle = function (value) {
235
235
  // 当value有值时才进行搜索
236
236
  // if (value) {
237
+ onSearch && onSearch(value);
237
238
  getRemoteDataHandle(value, '');
238
239
  // }
239
240
  };
@@ -492,6 +493,6 @@ function EnhanceSelect(_a) {
492
493
  }
493
494
  currentClick.current = true;
494
495
  };
495
- return (React.createElement(Select, __assign({ defaultValue: showAll ? '' : undefined, allowClear: true, showSearch: true, filterOption: remoteSearch ? false : filterOptionHandle, onSearch: remoteSearch ? onSearchHandle : undefined, onChange: onChangeHandle, optionLabelProp: "title", loading: loading, onFocus: onFocusHandle, onBlur: onBlurHandle, onClear: onClearHandle, onSelect: onSelectHandle, onClick: onClickHandle, open: isOpen }, restProps, { disabled: remoteSearch ? restProps.disabled : loading || restProps.disabled }), renderSelectOption()));
496
+ return (React.createElement(Select, __assign({ defaultValue: showAll ? '' : undefined, allowClear: true, showSearch: true, filterOption: remoteSearch ? false : filterOptionHandle, onSearch: remoteSearch ? onSearchHandle : onSearch, onChange: onChangeHandle, optionLabelProp: "title", loading: loading, onFocus: onFocusHandle, onBlur: onBlurHandle, onClear: onClearHandle, onSelect: onSelectHandle, onClick: onClickHandle, open: isOpen }, restProps, { disabled: remoteSearch ? restProps.disabled : loading || restProps.disabled }), renderSelectOption()));
496
497
  }
497
498
  export default memo(EnhanceSelect);
package/dist/index.js CHANGED
@@ -14,10 +14,12 @@
14
14
  // import TimelineDemo from './DemoCom/TimelineDemo';
15
15
  // import WeChatDemo from './DemoCom/WechatDemo';
16
16
  // import TableDemo from './DemoCom/TableDemo';
17
+ // import TableDemo1 from './DemoCom/TableDemo1';
17
18
  // import BasicDemo from './DemoCom/BasicDemo';
18
19
  // import FormDemo from './DemoCom/FormDemo';
19
20
  // import TableAnalyse from './DemoCom/TableAnalyse';
20
21
  // import DragSort from './DemoCom/DragSort';
22
+ // import PrintDemo from './DemoCom/PrintDemo';
21
23
  // dayjs.locale(zhCn);
22
24
  // ReactDOM.render(
23
25
  // // <React.StrictMode>
@@ -51,12 +53,18 @@
51
53
  // <Route exact path="/table">
52
54
  // <TableDemo />
53
55
  // </Route>
56
+ // <Route exact path="/table1">
57
+ // <TableDemo1 />
58
+ // </Route>
54
59
  // <Route exact path="/basic">
55
60
  // <BasicDemo />
56
61
  // </Route>
57
62
  // <Route exact path="/form">
58
63
  // <FormDemo />
59
64
  // </Route>
65
+ // <Route exact path="/print">
66
+ // <PrintDemo />
67
+ // </Route>
60
68
  // <Route exact path="/table-analyse">
61
69
  // <TableAnalyse />
62
70
  // </Route>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ztxkui",
3
- "version": "2.7.4",
3
+ "version": "2.7.5",
4
4
  "private": false,
5
5
  "description": "React components library",
6
6
  "author": "zt-front-end",
@@ -20,6 +20,7 @@
20
20
  "number-precision": "^1.5.0",
21
21
  "react-dnd": "^14.0.2",
22
22
  "react-dnd-html5-backend": "^14.0.0",
23
+ "react-to-print": "^2.14.7",
23
24
  "ztxkutils": "^2.5.1"
24
25
  },
25
26
  "scripts": {