dlt-for-react 1.0.1

package/lib/components/NHModal/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/NHModal/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/NHModal/index.js

@@ -0,0 +1,326 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.NHModal = 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);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//Modal的最大宽度、高度为屏幕宽度、高度的2/3
+var maxWidth = window.screen.width * 2 / 3;
+var maxHeight = window.screen.height * 2 / 3;
+
+/**
+ * Ant Design Modal 模态对话框二次封装
+ * Author: zengxiangkai@ly-sky.com
+ * Created on: 2018-01-23 14:37:19
+ * Version: 1.0
+ * Modify log:
+ * 2018-05-25：
+ *  1、解决控制台警告问题；
+ *  2、对话框居中；
+ *  3、点击保存按钮后，保存按钮默认变成loading状态，
+ *     可在onOk回调方法中调用回调函数stopLoading来终止按钮的loading状态；
+ * 2018-06-04:
+ *  1、“保存”按钮更改为“确认”
+ */
+
+var NHModal = exports.NHModal = function (_React$Component) {
+    (0, _inherits3.default)(NHModal, _React$Component);
+
+    function NHModal(props) {
+        (0, _classCallCheck3.default)(this, NHModal);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (NHModal.__proto__ || (0, _getPrototypeOf2.default)(NHModal)).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)(NHModal, [{
+        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;
+
+            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 (footer === undefined && visible) {
+                return _react2.default.createElement(
+                    'div',
+                    null,
+                    _react2.default.createElement(
+                        _modal2.default,
+                        (0, _extends3.default)({}, this.props, {
+                            title: _title,
+                            style: style,
+                            bodyStyle: bodyStyle,
+                            visible: visible,
+                            width: width,
+                            okText: '\u786E\u5B9A',
+                            onOk: this.handleOk,
+                            cancelText: '\u8FD4\u56DE',
+                            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
+                            )
+                        )
+                    ),
+                    _react2.default.createElement(
+                        'style',
+                        { jsx: 'true', global: 'true' },
+                        '\n                            .vertical-center-modal {\n                                text-align: center;\n                                white-space: nowrap;\n                            }\n\n                            .vertical-center-modal:before {\n                                content: \'\';\n                                display: inline-block;\n                                height: 100%;\n                                vertical-align: middle;\n                                width: 0;\n                            }\n\n                            .vertical-center-modal .ant-modal {\n                                display: inline-block;\n                                vertical-align: middle;\n                                top: 0;\n                                text-align: left;\n                            }\n                        '
+                    )
+                );
+            } else if (visible) {
+                //如果footer为null，则不显示页脚按钮
+                var buttons = [];
+                if (footer != null && 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(
+                    'div',
+                    null,
+                    _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
+                            )
+                        )
+                    ),
+                    _react2.default.createElement(
+                        'style',
+                        { jsx: 'true', global: 'true' },
+                        '\n                            .vertical-center-modal {\n                                text-align: center;\n                                white-space: nowrap;\n                            }\n\n                            .vertical-center-modal:before {\n                                content: \'\';\n                                display: inline-block;\n                                height: 100%;\n                                vertical-align: middle;\n                                width: 0;\n                            }\n\n                            .vertical-center-modal .ant-modal {\n                                display: inline-block;\n                                vertical-align: middle;\n                                top: 0;\n                                text-align: left;\n                            }\n                        '
+                    )
+                );
+            } else {
+                return null;
+            }
+        }
+    }]);
+    return NHModal;
+}(_react2.default.Component);
+
+/**
+ *  NHModal默认属性
+ */
+
+
+NHModal.defaultProps = {
+    title: "标题",
+    width: 520, //默认最小宽度
+    maxSize: false, //是否最大化窗口
+    destroyOnClose: true, //关闭时销毁 Modal 里的子元素
+    onOk: function onOk() {},
+    onCancel: function onCancel() {},
+    afterClose: function afterClose() {},
+    drag: true
+
+    /**
+     *  NHModal属性检查
+     */
+};NHModal.propTypes = {
+    title: _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 = NHModal;