dlt-for-react 1.0.2 → 1.0.3

package/lib/components/KyModal/buildTitle.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _dragM = require('./dragM');
+
+var _dragM2 = _interopRequireDefault(_dragM);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var BuildTitle = function (_React$Component) {
+    (0, _inherits3.default)(BuildTitle, _React$Component);
+
+    function BuildTitle() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
+        (0, _classCallCheck3.default)(this, BuildTitle);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = BuildTitle.__proto__ || (0, _getPrototypeOf2.default)(BuildTitle)).call.apply(_ref, [this].concat(args))), _this), _this.updateTransform = function (transformStr) {
+            _this.modalDom.style.transform = transformStr;
+        }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+    }
+
+    (0, _createClass3.default)(BuildTitle, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            var modalList = document.getElementsByClassName('ant-modal'); //modal的class是ant-modal
+            this.modalDom = modalList[modalList.length - 1];
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var title = this.props.title;
+
+            return _react2.default.createElement(
+                _dragM2.default,
+                { updateTransform: this.updateTransform },
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    title
+                )
+            );
+        }
+    }]);
+    return BuildTitle;
+}(_react2.default.Component);
+
+exports.default = BuildTitle;

package/lib/components/KyModal/dragM.js

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DragM = function (_React$Component) {
+    (0, _inherits3.default)(DragM, _React$Component);
+
+    function DragM() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
+        (0, _classCallCheck3.default)(this, DragM);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DragM.__proto__ || (0, _getPrototypeOf2.default)(DragM)).call.apply(_ref, [this].concat(args))), _this), _this.position = {
+            startX: 0,
+            startY: 0,
+            dx: 0,
+            dy: 0,
+            tx: 0,
+            ty: 0
+        }, _this.start = function (event) {
+            if (event.button != 0) {
+                //只允许左键，右键问题在于不选择conextmenu就不会触发mouseup事件
+                return;
+            }
+            document.addEventListener('mousemove', _this.docMove);
+            _this.position.startX = event.pageX - _this.position.dx;
+            _this.position.startY = event.pageY - _this.position.dy;
+        }, _this.docMove = function (event) {
+            var tx = event.pageX - _this.position.startX;
+            var ty = event.pageY - _this.position.startY;
+            var transformStr = 'translate(' + tx + 'px,' + ty + 'px)';
+            _this.props.updateTransform(transformStr, tx, ty, _this.tdom);
+            _this.position.dx = tx;
+            _this.position.dy = ty;
+        }, _this.docMouseUp = function (event) {
+            document.removeEventListener('mousemove', _this.docMove);
+        }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+    }
+
+    (0, _createClass3.default)(DragM, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.tdom.addEventListener('mousedown', this.start);
+            //用document移除对mousemove事件的监听
+            document.addEventListener('mouseup', this.docMouseUp);
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            this.tdom.removeEventListener('mousedown', this.start);
+            document.removeEventListener('mouseup', this.docMouseUp);
+            document.removeEventListener('mousemove', this.docMove);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var children = this.props.children;
+
+            var newStyle = (0, _extends3.default)({}, children.props.style, {
+                cursor: 'move',
+                userSelect: 'none'
+            });
+            return _react2.default.cloneElement(_react2.default.Children.only(children), {
+                ref: function ref(tdom) {
+                    return _this2.tdom = tdom;
+                },
+                style: newStyle
+            });
+        }
+    }]);
+    return DragM;
+}(_react2.default.Component);
+
+DragM.propTypes = {
+    children: _propTypes2.default.element.isRequired
+};
+DragM.defaultProps = {
+    //默认是移动children dom,覆盖该方法，可以把tranform行为同步给外部
+    updateTransform: function updateTransform(transformStr, tx, ty, tdom) {
+        tdom.style.transform = transformStr;
+    }
+};
+exports.default = DragM;

package/lib/components/KyModal/index.js

@@ -0,0 +1,321 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KyModal = undefined;
+
+var _button = require('antd/lib/button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _getIterator2 = require('babel-runtime/core-js/get-iterator');
+
+var _getIterator3 = _interopRequireDefault(_getIterator2);
+
+var _modal = require('antd/lib/modal');
+
+var _modal2 = _interopRequireDefault(_modal);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+require('antd/lib/button/style');
+
+require('antd/lib/modal/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCustomScrollbars = require('react-custom-scrollbars');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _buildTitle = require('./buildTitle');
+
+var _buildTitle2 = _interopRequireDefault(_buildTitle);
+
+require('../../../assets/components/KyModal/index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//Modal的最大宽度、高度为屏幕宽度、高度的2/3
+var maxWidth = window.screen.width * 2 / 3; /**
+                                             * @Description: 对话框二次封装
+                                             * @Version: 1.0
+                                             * @Author: 琴时
+                                             * @Date: 2022-04-24 17:00:53
+                                             * @LastEditors: 琴时
+                                             * @LastEditTime: 2022-06-06 10:07:04
+                                             * Modify log:
+                                             * 1、解决控制台警告问题；
+                                             * 2、对话框居中；
+                                             * 3、点击保存按钮后，保存按钮默认变成loading状态，可在onOk回调方法中调用回调函数stopLoading来终止按钮的loading状态；
+                                             */
+
+var maxHeight = window.screen.height * 2 / 3;
+
+var KyModal = exports.KyModal = function (_React$Component) {
+  (0, _inherits3.default)(KyModal, _React$Component);
+
+  function KyModal(props) {
+    (0, _classCallCheck3.default)(this, KyModal);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (KyModal.__proto__ || (0, _getPrototypeOf2.default)(KyModal)).call(this, props));
+
+    _this.show = function () {
+      _this.setState({ visible: true });
+    };
+
+    _this.close = function () {
+      _this.setState({ visible: false, confirmLoading: false });
+    };
+
+    _this.stopLoading = function () {
+      _this.setState({ confirmLoading: false });
+    };
+
+    _this.handleOk = function () {
+      _this.setState({ confirmLoading: true });
+      _this.props.onOk(_this.stopLoading);
+    };
+
+    _this.handleCancel = function () {
+      _this.close();
+      _this.props.onCancel();
+    };
+
+    _this.state = {
+      visible: false, //默认不可见
+      confirmLoading: false //确定按钮 loading
+    };
+    return _this;
+  }
+
+  //显示
+
+
+  //关闭
+
+
+  //隐藏加载动画
+
+
+  //确认
+
+
+  //取消
+
+
+  (0, _createClass3.default)(KyModal, [{
+    key: 'render',
+    value: function render() {
+      var _state = this.state,
+          visible = _state.visible,
+          confirmLoading = _state.confirmLoading;
+      var _props = this.props,
+          title = _props.title,
+          style = _props.style,
+          bodyStyle = _props.bodyStyle,
+          maxSize = _props.maxSize,
+          destroyOnClose = _props.destroyOnClose,
+          footer = _props.footer,
+          afterClose = _props.afterClose,
+          drag = _props.drag,
+          okText = _props.okText,
+          cancelText = _props.cancelText,
+          height = _props.height;
+
+      var width = this.props.width;
+      var _title = title && drag ? _react2.default.createElement(_buildTitle2.default, { visible: visible, title: title }) : title;
+      if (maxSize) {
+        width = maxWidth;
+      } else if (width > maxWidth) {
+        width = maxWidth;
+      }
+      if (!visible) return null;
+      //如果未定义页脚按钮，则使用默认按钮
+      if (!footer) {
+        return _react2.default.createElement(
+          _modal2.default,
+          (0, _extends3.default)({}, this.props, {
+            title: _title,
+            style: style,
+            bodyStyle: bodyStyle,
+            visible: visible,
+            width: width,
+            okText: okText,
+            onOk: this.handleOk,
+            cancelText: cancelText,
+            onCancel: this.handleCancel,
+            wrapClassName: 'vertical-center-modal',
+            confirmLoading: confirmLoading,
+            maskClosable: false,
+            destroyOnClose: destroyOnClose,
+            afterClose: afterClose
+          }),
+          _react2.default.createElement(
+            'div',
+            { style: { maxHeight: height || maxHeight } },
+            _react2.default.createElement(
+              _reactCustomScrollbars.Scrollbars,
+              { autoHide: true, autoHeight: true, autoHeightMax: maxHeight, style: { width: '100%' } },
+              this.props.children
+            )
+          )
+        );
+      } else {
+        //如果footer为null，则不显示页脚按钮
+        var buttons = [];
+        if (footer && footer.length > 0) {
+          var buttonKey = 0;
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
+
+          try {
+            for (var _iterator = (0, _getIterator3.default)(footer), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var buttonParam = _step.value;
+
+              //text：按钮描述，type：按钮类型，icon：按钮图标，loading：加载状态，onClick：按钮点击事件
+              var _buttonParam$text = buttonParam.text,
+                  text = _buttonParam$text === undefined ? '' : _buttonParam$text,
+                  _buttonParam$type = buttonParam.type,
+                  type = _buttonParam$type === undefined ? 'primary' : _buttonParam$type,
+                  _buttonParam$icon = buttonParam.icon,
+                  icon = _buttonParam$icon === undefined ? '' : _buttonParam$icon,
+                  _buttonParam$loading = buttonParam.loading,
+                  loading = _buttonParam$loading === undefined ? false : _buttonParam$loading,
+                  _buttonParam$onClick = buttonParam.onClick,
+                  onClick = _buttonParam$onClick === undefined ? function () {} : _buttonParam$onClick,
+                  _buttonParam$disabled = buttonParam.disabled,
+                  disabled = _buttonParam$disabled === undefined ? false : _buttonParam$disabled;
+
+              var customButton = _react2.default.createElement(
+                _button2.default,
+                {
+                  key: buttonKey,
+                  type: type,
+                  icon: icon,
+                  loading: loading,
+                  onClick: onClick,
+                  disabled: disabled
+                },
+                text
+              );
+              buttons.push(customButton);
+              buttonKey++;
+            }
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
+          }
+        } else {
+          buttons = null;
+        }
+
+        return _react2.default.createElement(
+          _modal2.default,
+          (0, _extends3.default)({}, this.props, {
+            title: title,
+            style: style,
+            bodyStyle: bodyStyle,
+            visible: visible,
+            width: width,
+            footer: buttons,
+            onCancel: this.handleCancel,
+            wrapClassName: 'vertical-center-modal',
+            confirmLoading: confirmLoading,
+            maskClosable: false,
+            destroyOnClose: destroyOnClose,
+            afterClose: afterClose
+          }),
+          _react2.default.createElement(
+            'div',
+            { style: { maxHeight: maxHeight } },
+            _react2.default.createElement(
+              _reactCustomScrollbars.Scrollbars,
+              { autoHide: true, autoHeight: true, autoHeightMax: maxHeight, style: { width: '100%' } },
+              this.props.children
+            )
+          )
+        );
+      }
+    }
+  }]);
+  return KyModal;
+}(_react2.default.Component);
+
+/**
+ *  KyModal默认属性
+ */
+
+
+KyModal.defaultProps = {
+  title: '标题',
+  cancelText: '取消',
+  okText: '确定',
+  width: 520, //默认最小宽度
+  maxSize: false, //是否最大化窗口
+  height: undefined, //高度
+  destroyOnClose: true, //关闭时销毁 Modal 里的子元素
+  onOk: function onOk() {},
+  onCancel: function onCancel() {},
+  afterClose: function afterClose() {},
+  drag: true
+};
+
+/**
+ *  KyModal属性检查
+ */
+KyModal.propTypes = {
+  title: _propTypes2.default.string, //对话框标题
+  cancelText: _propTypes2.default.string, //返回按钮文字
+  okText: _propTypes2.default.string, //确认按钮文字
+  style: _propTypes2.default.object, //对话框样式
+  bodyStyle: _propTypes2.default.object, //Modal body 样式
+  width: _propTypes2.default.number, //宽度
+  maxSize: _propTypes2.default.bool, //最大化窗口
+  footer: _propTypes2.default.arrayOf(_propTypes2.default.object), //按钮组
+  destroyOnClose: _propTypes2.default.bool, //关闭时销毁对话框内子元素
+  onOk: _propTypes2.default.func, //保存事件回调方法
+  onCancel: _propTypes2.default.func, //返回事件回调方法
+  afterClose: _propTypes2.default.func, //Modal 完全关闭后的回调
+  drag: _propTypes2.default.bool // 是否可拖拽
+};
+
+exports.default = KyModal;