ztxkui 2.8.1 → 2.8.4

package/dist/App.js

@@ -784,6 +784,24 @@ function App() {
                 type: 'select',
             },
         },
+        {
+            title: '测试下拉框',
+            dataIndex: 'datate',
+            key: 'datate',
+            width: 150,
+            render: function () {
+                return React.createElement(DatePicker, null);
+            },
+        },
+        {
+            title: '测试下拉框',
+            dataIndex: 'datate1',
+            key: 'datate1',
+            width: 150,
+            render: function () {
+                return React.createElement(DatePicker.RangePicker, null);
+            },
+        },
         {
             title: '测试数字输入框',
             dataIndex: 'inputNumber1',

package/dist/Demo.js

@@ -64,7 +64,7 @@ function Demo() {
             }
         };
     }, []);
-    return (React.createElement("div", null,
+    return (React.createElement("div", { style: { height: 2000 } },
         React.createElement(Link, { to: "/test" }, "test"),
         React.createElement("h1", null, "\u4F5C\u4E3A\u6F14\u793A\u4F7F\u7528"),
         React.createElement("h2", null, "\u5982\u679C\u6570\u636E\u662F\u901A\u8FC7\u5916\u90E8\u83B7\u53D6\u7684\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4F20\u9012list\u5C5E\u6027"),

package/dist/DemoCom/BasicDemo.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import './style.scss';
+export declare const RANGEPICKER_RANGES: any;
 declare function BasicDemo(): JSX.Element;
 export default BasicDemo;

package/dist/DemoCom/BasicDemo.js

@@ -1,12 +1,56 @@
 import InputNumber from 'components/InputNumber';
 import Tag from 'components/Tag';
 import Input from 'components/Input';
-import { FormList } from '../index';
+import { FormList, RangePicker } from '../index';
 import GridList from 'components/business/NewList';
 import { useState } from 'react';
 import './style.scss';
+import dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+dayjs.extend(quarterOfYear);
+var getLastMonth = function () {
+    var date = [];
+    var start = dayjs().subtract(1, 'month').format('YYYY-MM') + '-01';
+    var end = dayjs(start)
+        .subtract(-1, 'month')
+        .add(-1, 'days')
+        .format('YYYY-MM-DD');
+    date.push(dayjs(start));
+    date.push(dayjs(end));
+    return date;
+};
+// 日期选择下边的按钮配置
+export var RANGEPICKER_RANGES = {
+    此刻: [dayjs(), dayjs()],
+    最近7天: [dayjs().subtract(6, 'days'), dayjs().subtract(0, 'days')],
+    最近30天: [dayjs().subtract(29, 'days'), dayjs().subtract(0, 'days')],
+    上月: getLastMonth(),
+    本月: [dayjs().startOf('month'), dayjs().endOf('month')],
+    上季度: [
+        dayjs()
+            .quarter(dayjs().quarter() - 1)
+            .startOf('quarter'),
+        dayjs()
+            .quarter(dayjs().quarter() - 1)
+            .endOf('quarter'),
+    ],
+    本季度: [dayjs().startOf('quarter'), dayjs().endOf('quarter')],
+    上一年: [
+        dayjs()
+            .year(dayjs().year() - 1)
+            .startOf('year'),
+        dayjs()
+            .year(dayjs().year() - 1)
+            .endOf('year'),
+    ],
+    本年: [dayjs().startOf('year'), dayjs().endOf('year')],
+};
 function BasicDemo() {
     var _a = useState(10), value = _a[0], setValue = _a[1];
+    var _b = useState([
+        dayjs('2022-05-11'),
+        dayjs('9999-12-31'),
+    ]), rangeValue = _b[0], setRangeValue = _b[1];
     return (React.createElement(React.Fragment, null,
         React.createElement(InputNumber, { value: value, onChange: function (value) {
                 console.log(value);
@@ -18,7 +62,12 @@ function BasicDemo() {
             React.createElement(Tag, { type: "processing" }, "\u4F60\u597D"),
             React.createElement(Tag, { type: "warning" }, "\u4F60\u597D")),
         React.createElement("div", { className: "placeholder" },
-            React.createElement("button", { onClick: function () { return console.log(value); } }, "\u83B7\u53D6\u6570\u636E")),
+            React.createElement("button", { onClick: function () {
+                    var _a, _b, _c, _d;
+                    console.log(value, rangeValue);
+                    console.log((_b = (_a = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue[0]) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.call(_a, 'YYYY-MM-DD'));
+                    console.log((_d = (_c = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue[1]) === null || _c === void 0 ? void 0 : _c.format) === null || _d === void 0 ? void 0 : _d.call(_c, 'YYYY-MM-DD'));
+                } }, "\u83B7\u53D6\u6570\u636E")),
         React.createElement(Input.TextArea, { className: "placeholder" }),
         React.createElement("div", { style: { border: '1px solid red' } },
             React.createElement(FormList, { gutter: 16 },
@@ -61,6 +110,7 @@ function BasicDemo() {
                 React.createElement(GridList.FormItem, { span: 6, title: "\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5" }, "\u518D\u89C1"),
                 React.createElement(GridList.FormItem, { span: 6, title: "\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5" }, "\u518D\u89C1"),
                 React.createElement(GridList.FormItem, { span: 6, title: "\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5" }, "\u518D\u89C1"),
-                React.createElement(GridList.FormItem, { span: 6, title: "\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5" }, "\u518D\u89C1")))));
+                React.createElement(GridList.FormItem, { span: 6, title: "\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5" }, "\u518D\u89C1"))),
+        React.createElement(RangePicker, { showFar: true, ranges: RANGEPICKER_RANGES, value: rangeValue, onChange: function (value) { return setRangeValue(value); } })));
 }
 export default BasicDemo;

package/dist/DemoCom/PrintDemo.js

@@ -2,11 +2,10 @@
  * @author 陈亚雄
  * @description
  */
-import React, { useRef } from 'react';
+import React from 'react';
 // import { findDOMNode } from 'react-dom';
-import { Button } from '../index';
+import { Button, ZtIcon } from '../index';
 import Table from 'components/Table';
-import { useReactToPrint } from 'react-to-print';
 var dataSource = new Array(10).fill('1').map(function (item, index) { return ({
     test1: "\u6D4B\u8BD5\u4E00" + index,
     test2: "\u6D4B\u8BD5\u4E8C" + index,
@@ -15,7 +14,6 @@ var dataSource = new Array(10).fill('1').map(function (item, index) { return ({
     id: "" + index,
 }); });
 var PrintDemo = function () {
-    var componentRef = useRef();
     var columns = [
         {
             title: '测试一',
@@ -42,16 +40,21 @@ var PrintDemo = function () {
             key: 'test4',
         },
     ];
-    var handlePrint = useReactToPrint({
-        content: function () { return componentRef.current; },
-    });
     return (React.createElement(React.Fragment, null,
         React.createElement("div", null,
             React.createElement(Button, { onClick: function () {
-                    handlePrint();
+                    var styleDom = document.createElement('style');
+                    styleDom.setAttribute('type', 'text/css');
+                    styleDom.innerText =
+                        '@media print{ .test1, .test2 { display: none; }  }';
+                    document.head.appendChild(styleDom);
+                    window.print();
                 } }, "\u6253\u5370")),
-        React.createElement("div", { ref: componentRef },
+        React.createElement("div", { className: "print-container" },
+            React.createElement(ZtIcon, { type: "iconwenjian1" }),
             React.createElement(Table, { columns: columns, dataSource: dataSource, rowKey: "id" }),
-            React.createElement("iframe", { style: { width: '1000px', height: '400px' }, title: "\u6D4B\u8BD5iframe\u6253\u5370", src: "http://localhost:8787/table" }))));
+            React.createElement("iframe", { style: { width: '1000px', height: '400px' }, title: "\u6D4B\u8BD5iframe\u6253\u5370", src: "http://localhost:8787/print" })),
+        React.createElement("div", { className: "test1" }, "\u6211\u662F\u591A\u4F59\u7684\u6570\u636E \u6211\u662F\u591A\u4F59\u7684\u6570\u636E"),
+        React.createElement("div", { className: "test2" }, "\u6211\u662F\u591A\u4F59\u7684\u6570\u636E \u6211\u662F\u591A\u4F59\u7684\u6570\u636E")));
 };
 export default PrintDemo;

package/dist/components/DatePicker/data-picker.js

@@ -2,4 +2,20 @@ import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import generatePicker from 'antd/es/date-picker/generatePicker';
 import 'antd/es/date-picker/style/index';
 var DatePicker = generatePicker(dayjsGenerateConfig);
+// if (DatePicker.defaultProps) {
+//   DatePicker.defaultProps.getPopupContainer = (trigger) =>
+//     trigger || document.body;
+// } else {
+//   DatePicker.defaultProps = {
+//     getPopupContainer: (trigger) => trigger || document.body,
+//   };
+// }
+// if (DatePicker.RangePicker.defaultProps) {
+//   DatePicker.RangePicker.defaultProps.getPopupContainer = (trigger) =>
+//     trigger || document.body;
+// } else {
+//   DatePicker.RangePicker.defaultProps = {
+//     getPopupContainer: (trigger) => trigger || document.body,
+//   };
+// }
 export default DatePicker;

package/dist/components/EnhanceSelect/index.js

@@ -498,6 +498,8 @@ function EnhanceSelect(_a) {
         }
         currentClick.current = true;
     };
-    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()));
+    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, 
+        // getPopupContainer={(trigger) => trigger || document.body}
+        open: isOpen }, restProps, { disabled: remoteSearch ? restProps.disabled : loading || restProps.disabled }), renderSelectOption()));
 }
 export default memo(EnhanceSelect);

package/dist/components/RangePicker/index.d.ts

@@ -0,0 +1,2 @@
+import RangePicker from './range-picker';
+export default RangePicker;

package/dist/components/RangePicker/index.js

@@ -0,0 +1,2 @@
+import RangePicker from './range-picker';
+export default RangePicker;

package/dist/components/RangePicker/range-picker.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { RangePickerProps } from 'antd/es/date-picker/generatePicker';
+import { Dayjs } from 'dayjs';
+interface IProps {
+    /** 是否显示至今选项 */
+    showFar?: boolean;
+    /** 至今选项是否选中 */
+    farChecked?: boolean;
+}
+declare function RangePicker({ showFar, farChecked, picker, ...restProps }: IProps & RangePickerProps<Dayjs>): JSX.Element;
+export default RangePicker;

package/dist/components/RangePicker/range-picker.js

@@ -0,0 +1,108 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * 包含至今的范围选择器
+ */
+import React, { useState, useEffect, useMemo } from 'react';
+import { DatePicker, Checkbox } from '../../index';
+import dayjs from 'dayjs';
+var AntRangePicker = DatePicker.RangePicker;
+var dateFormat = 'YYYY-MM-DD';
+var monthFormat = 'YYYY-MM';
+var timeFormat = 'HH-mm-ss';
+var yearFormat = 'YYYY';
+function getFormat(picker) {
+    switch (picker) {
+        case 'date':
+            return dateFormat;
+        case 'month':
+            return monthFormat;
+        case 'time':
+            return timeFormat;
+        case 'year':
+            return yearFormat;
+        default:
+            return dateFormat;
+    }
+}
+var noformat = ['quarter', 'week'];
+function RangePicker(_a) {
+    var _b = _a.showFar, showFar = _b === void 0 ? false : _b, _c = _a.farChecked, farChecked = _c === void 0 ? false : _c, _d = _a.picker, picker = _d === void 0 ? 'date' : _d, restProps = __rest(_a, ["showFar", "farChecked", "picker"]);
+    var _e = useState(farChecked), checked = _e[0], setChecked = _e[1];
+    var _f = useState(), datePickerValue = _f[0], setDatePickerValue = _f[1];
+    /**
+     * @description 获取formatString
+     */
+    var formatString = useMemo(function () { return getFormat(picker); }, [picker]);
+    /**
+     * @description 初始化设置是否选中至今
+     */
+    useEffect(function () {
+        setChecked(farChecked);
+    }, [farChecked]);
+    /**
+     * @description 监听值改变触发单独选择框的值改变
+     */
+    useEffect(function () {
+        var _a, _b, _c, _d;
+        if (Array.isArray(restProps.value)) {
+            setDatePickerValue(restProps.value[0]);
+            console.log((_b = (_a = restProps.value[1]) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.call(_a, formatString));
+            if (restProps.value[1] &&
+                ['9999', '9999-12-31', '9999-12'].includes((_d = (_c = restProps.value[1]) === null || _c === void 0 ? void 0 : _c.format) === null || _d === void 0 ? void 0 : _d.call(_c, formatString))) {
+                setChecked(true);
+            }
+        }
+    }, [restProps.value, formatString]);
+    /**至今组件切换 */
+    var onFarChangeHandle = function (e) {
+        if (e.target.checked &&
+            Array.isArray(restProps.value) &&
+            restProps.value[0]) {
+            var firstValue = restProps.value[0];
+            restProps.onChange &&
+                restProps.onChange([firstValue, dayjs('9999-12-31')], [firstValue.format(formatString), '9999-12-31']);
+            setDatePickerValue(firstValue);
+        }
+        setChecked(e.target.checked);
+    };
+    /**至今组件 */
+    var renderExtraFooterHandle = function () {
+        return (React.createElement(Checkbox, { checked: checked, onChange: onFarChangeHandle }, "\u81F3\u4ECA"));
+    };
+    /**
+     * @description 如果是至今转换参数
+     */
+    var formatHandle = function (value) {
+        return value.format(formatString) + " -> \u81F3\u4ECA";
+    };
+    /**
+     * @description 单独传递参数
+     */
+    var onDatePickerChangeHandle = function (value, dateString) {
+        restProps.onChange &&
+            restProps.onChange([value, dayjs('9999-12-31')], [value.format(formatString), '9999-12-31']);
+    };
+    return checked ? (React.createElement(DatePicker, { value: datePickerValue, onChange: onDatePickerChangeHandle, renderExtraFooter: showFar ? renderExtraFooterHandle : undefined, format: noformat.includes(picker) ? undefined : formatHandle })) : (React.createElement(AntRangePicker, __assign({ renderExtraFooter: showFar ? renderExtraFooterHandle : undefined, picker: picker }, restProps)));
+}
+export default RangePicker;

package/dist/components/Table/hooks/useColumns.js

@@ -30,7 +30,8 @@ function useColumns(props) {
         columns.forEach(function (col) {
             var _column = __assign({}, col);
             // 添加超出隐藏
-            if (_column.ellipsis !== false) {
+            // !_column.render 兼容下拉框滚动行为，设置了ellipsis的话，会导致overflow:hidden，导致一些问题
+            if (_column.ellipsis !== false && !_column.render) {
                 _column.ellipsis = true;
             }
             // 如果列需要编辑
@@ -47,6 +48,10 @@ function useColumns(props) {
                             handleSave: onEditableSave,
                         });
                     } });
+                // 兼容下拉框滚动行为
+                if ((editableConfig_1 === null || editableConfig_1 === void 0 ? void 0 : editableConfig_1.type) === 'select') {
+                    _column.ellipsis = false;
+                }
             }
             // 如果配置了固定列的 不做处理
             if (!col.fixed) {

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as Button } from './components/Button';
 export { default as Calendar } from './components/Calendar';
 export { default as Checkbox } from './components/Checkbox';
 export { default as DatePicker } from './components/DatePicker';
+export { default as RangePicker } from './components/RangePicker';
 export { default as Input } from './components/Input';
 export { default as InputNumber } from './components/InputNumber';
 export { default as Radio } from './components/Radio';

package/dist/index.js

@@ -100,6 +100,7 @@ export { default as Button } from './components/Button';
 export { default as Calendar } from './components/Calendar';
 export { default as Checkbox } from './components/Checkbox';
 export { default as DatePicker } from './components/DatePicker';
+export { default as RangePicker } from './components/RangePicker';
 export { default as Input } from './components/Input';
 export { default as InputNumber } from './components/InputNumber';
 export { default as Radio } from './components/Radio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ztxkui",
-  "version": "2.8.1",
+  "version": "2.8.4",
   "private": false,
   "description": "React components library",
   "author": "zt-front-end",