tntd 1.3.64 → 1.4.0

package/es/QueryListScene/Title.js

@@ -0,0 +1,12 @@
+/**
+ * @file Title
+ * @author zhangyou
+ */
+import React from 'react';
+export default (function (_ref) {
+  var title = _ref.title,
+      children = _ref.children;
+  return React.createElement("div", {
+    className: "tnt-querylistscene-title"
+  }, React.createElement("span", null, title), React.createElement("span", null, children));
+});

package/es/QueryListScene/Toolbar.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import cn from 'classnames';
+export default (function (_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      actions = _ref.actions,
+      qslProps = _ref.qslProps,
+      rest = _objectWithoutProperties(_ref, ["className", "children", "actions", "qslProps"]);
+
+  return React.createElement("div", _extends({}, rest, {
+    className: cn('tnt-querylistscene-toolbar', _defineProperty({}, className, className))
+  }), children);
+});

package/es/QueryListScene/createActions.js

@@ -0,0 +1,72 @@
+import EventEmitter from 'eventemitter3';
+import { get, set } from 'lodash';
+export default (function () {
+  var eventEmitter = new EventEmitter();
+  var data = {
+    dataSource: [],
+    pagination: {},
+    formData: {},
+    submittedFormData: {}
+  };
+  return {
+    setData: function setData(key, val) {
+      set(data, key, val);
+    },
+    getFormData: function getFormData(name) {
+      return get(data, "formData".concat(name ? '.' + name : ''));
+    },
+    getSubmittedFormData: function getSubmittedFormData(name) {
+      return get(data, "submittedFormData".concat(name ? '.' + name : ''));
+    },
+    getTableDataSource: function getTableDataSource() {
+      return get(data, 'dataSource');
+    },
+    getPagination: function getPagination() {
+      return get(data, 'pagination');
+    },
+    setFormData: function setFormData(formData) {
+      var needSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      set('formData', formData);
+      eventEmitter.emit('setFormData', formData, needSearch);
+    },
+    resetFormData: function resetFormData() {
+      var needSearch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      eventEmitter.emit('resetFormData', needSearch);
+    },
+    setTableDataSource: function setTableDataSource(dataSource) {
+      set('dataSource', dataSource);
+      eventEmitter.emit('setTableDataSource', dataSource);
+    },
+    setPagination: function setPagination(pagination) {
+      set('pagination', pagination);
+      eventEmitter.emit('setPagination', pagination);
+    },
+    // 重置记忆数据，form、pagination
+    resetMemoryData: function resetMemoryData() {
+      data.formData = {};
+      data.pagination = {};
+    },
+    search: function search() {
+      var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var showLoading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      return new Promise(function (resolve, reject) {
+        eventEmitter.emit('search', params, {
+          callback: resolve,
+          showLoading: showLoading
+        });
+      });
+    },
+    on: function on(eventName, callback) {
+      eventEmitter.on(eventName, callback);
+    },
+    emit: function emit() {
+      eventEmitter.emit.apply(eventEmitter, arguments);
+    },
+    removeListener: function removeListener() {
+      eventEmitter.removeListener.apply(eventEmitter, arguments);
+    },
+    off: function off() {
+      eventEmitter.removeListener.apply(eventEmitter, arguments);
+    }
+  };
+});

package/es/QueryListScene/index.js

@@ -0,0 +1,19 @@
+import QueryListScene from './QueryListScene';
+import Title from './Title';
+import Form from './QueryForm';
+import Toolbar from './Toolbar';
+import List from './List';
+import Actions from './createActions';
+import useActions from './useActions';
+import './index.less';
+export var QueryForm = Form;
+export var QueryList = List;
+export var createActions = Actions;
+QueryListScene.Title = Title;
+QueryListScene.QueryForm = Form;
+QueryListScene.Toolbar = Toolbar;
+QueryListScene.QueryList = List;
+QueryListScene.Field = Form.Field;
+QueryListScene.useActions = useActions;
+QueryListScene.createActions = createActions;
+export default QueryListScene;

package/es/QueryListScene/index.less

@@ -0,0 +1,97 @@
+.tnt-querylistscene {
+    position: relative;
+    &.large-size {
+        .tnt-querylistscene-title {
+            height: 48px;
+        }
+    }
+
+    &-title {
+        position: sticky;
+        top: 0;
+        height: 40px;
+        background: #FFFFFF;
+        line-height: 40px;
+        padding: 0 20px;
+        z-index: 1;
+    
+        & > span {
+            font-size: 14px;
+            color: #17233D;
+            letter-spacing: 0;
+        }
+    }
+
+    &-toolbar {
+        padding: 12px 16px 12px;
+        background: #fff;
+        box-shadow: 0 0 6px 0 rgba(0,0,0,0.06);
+        border-radius: 4px 4px 0 0;
+
+        & > *:not(:last-child) {
+            margin-right: 12px;
+        }
+    }
+
+    &-content {
+        background: #F1F2F5;
+        padding: 16px 20px;
+    }
+
+    &-list {
+        background: #fff;
+        box-shadow: 0 0 6px 0 rgba(0,0,0,0.06);
+        border-radius: 4px;
+        .hasToolbar & {
+            border-radius: 0 0 4px 4px;
+        }
+
+        .ant-table-pagination.ant-pagination {
+            position: relative;
+            width: 100%;
+            text-align: right;
+            margin-bottom: 0;
+            padding: 12px 16px;
+            background: #fff;
+            margin-top: 0;
+            border-radius: 0 0 4px 4px;
+            box-shadow: 0 -2px 4px rgba(0, 0, 0, .06);
+            z-index: 1;
+            // .ant-pagination-item {
+            //     height: 28px;
+            //     line-height: 28px;
+            //     &:not(.ant-pagination-item-active) {
+            //         border: none;
+            //     }
+            // }
+            .ant-pagination-total-text {
+                float: left;
+            }
+            .ant-pagination-options {
+                text-align: left;
+            }
+            .ant-pagination-prev,
+            .ant-pagination-next,
+            .ant-pagination-jump-prev,
+            .ant-pagination-jump-next {
+                height: 28px;
+                line-height: 28px;
+                .ant-pagination-item-link {
+                    border: none;
+                }
+            }
+        }
+
+        &.paginationSticky {
+            .ant-table-pagination.ant-pagination {
+                position: sticky;
+                bottom: 0;
+            }
+        }
+        &.hasScrollToBottom {
+            .ant-table-pagination.ant-pagination {
+                box-shadow: none;
+            }
+        }
+    }
+}

package/es/QueryListScene/useActions.js

@@ -0,0 +1,7 @@
+import { useRef } from 'react';
+import createActions from './createActions';
+export default function useActions() {
+  var actions = useRef(createActions());
+  return actions.current;
+}
+;

package/es/Select/DropDownWrap.js

@@ -0,0 +1,116 @@
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+import React, { PureComponent } from 'react';
+
+var DropDownWrap =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inherits(DropDownWrap, _PureComponent);
+
+  function DropDownWrap(props) {
+    var _this;
+
+    _classCallCheck(this, DropDownWrap);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(DropDownWrap).call(this, props));
+
+    _this.getItemStyle = function (i) {
+      var itemHeight = _this.props.itemHeight;
+      return {
+        position: 'absolute',
+        top: itemHeight * i,
+        height: itemHeight,
+        width: '100%'
+      };
+    };
+
+    _this.reactList = function (allHeight, startIndex, endIndex) {
+      return _this.setState({
+        allHeight: allHeight,
+        startIndex: startIndex,
+        endIndex: endIndex
+      });
+    };
+
+    var _allHeight = props.allHeight,
+        _startIndex = props.startIndex,
+        _endIndex = props.endIndex;
+    _this.state = {
+      allHeight: _allHeight,
+      startIndex: _startIndex,
+      endIndex: _endIndex
+    };
+    return _this;
+  }
+
+  _createClass(DropDownWrap, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.allHeight !== prevProps.allHeight) {
+        this.setState({
+          allHeight: this.props.allHeight
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var menu = this.props.menu;
+      var _this$state = this.state,
+          startIndex = _this$state.startIndex,
+          endIndex = _this$state.endIndex,
+          allHeight = _this$state.allHeight; // 截取 Select 下拉列表中需要显示的部分
+
+      var cloneMenu = React.cloneElement(menu, {
+        menuItems: menu.props.menuItems.slice(startIndex, endIndex).map(function (item, i) {
+          var realIndex = (startIndex || 0) + Number(i);
+
+          var style = _this2.getItemStyle(realIndex); // 未搜到数据提示高度使用默认高度
+
+
+          if (item.key === 'NOT_FOUND') {
+            delete style.height;
+          }
+
+          return React.cloneElement(item, {
+            style: _objectSpread({}, item.props.style, {}, style)
+          });
+        }),
+        dropdownMenuStyle: _objectSpread({}, menu.props.dropdownMenuStyle, {
+          height: allHeight,
+          maxHeight: allHeight,
+          overflow: 'hidden'
+        })
+      });
+      return cloneMenu;
+    }
+  }]);
+
+  return DropDownWrap;
+}(PureComponent);
+
+export { DropDownWrap as default };

package/es/Select/README.md

@@ -0,0 +1,68 @@
+## 基于ant3实现高性能虚拟滚动列表
+
+## 安装
+```bash
+npm i tntd 
+```
+
+## 用法
+所有API同ant3 Select
+- 注：新增maxWidth属性，该属性只有在dropdownMatchSelectWidth=false的时候才起作用,由于dropdownMatchSelectWidth=false，下拉宽度需要系统计算，同时渲染多个此组件时，会有性能消耗，故新增此属性，在渲染之前计算好下拉宽的高度，已达到性能提升。这里也提供一个算文本的像素宽度的方法，仅供参考：
+
+```javascript
+// 获取单行文本的像素宽度
+getTextPixelWith = (text, fontStyle = "14px") => {
+    let canvas = document.createElement("canvas"); // 创建 canvas 画布
+    let context = canvas.getContext("2d"); // 获取 canvas 绘图上下文环境
+    context.font = fontStyle; // 设置字体样式，使用前设置好对应的 font 样式才能准确获取文字的像素长度
+    let dimension = context.measureText(text); // 测量文字
+    return dimension.width;
+}
+```
+
+### 代码演示
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Select } from 'tntd';
+import 'antd/dist/antd.css';
+
+const Option = Select.Option;
+
+const children = [];
+for (let i = 0; i < 10000; i++) {
+	children.push(
+		<Option value={i} key={i}>
+			{`测试${i}`}
+		</Option>
+	);
+}
+
+const Demo = props => {
+    const handleChange = (e) => {
+        console.log(e);
+    }
+
+    return (
+        <Select
+            className="u-width"
+            showSearch
+            optionFilterProp="children"
+            allowClear
+            placeholder="请选择"
+            onChange={handleChange}
+            style={{ width: "200px" }}
+            dropdownMatchSelectWidth={false}
+            defaultValue={500}
+        >
+            {children}
+        </Select>
+    );
+}
+
+ReactDOM.render(
+    <Demo />,
+    document.getElementById('root')
+);
+
+```