dlt-for-react 1.0.2 → 1.0.3

package/README.md

@@ -6,12 +6,14 @@ npm publish
 
 ## 前端dlt-for-react依赖包版本更新记录
 
-##### 当前最新版本：1.0.2
+##### 当前最新版本：1.0.3
 
 ##### 安装依赖
 > cnpm install dlt-for-react --save
 
 ##### 版本修改记录
+#### V1.0.3—2023年9月28日
+1. 补充KyInputPicker、KyModal、KyUpload及KyPreview组件
 #### V1.0.2—2023年9月27日
 1. 初始化组件
 ## 发布

package/assets/components/KyInputPicker/index.less

@@ -0,0 +1,8 @@
+.avatar-uploader > .ant-upload {
+    width: 128px;
+    height: 128px;
+}
+.ant-upload-list-item-card-actions {
+    position: absolute;
+    right: 0;
+}

package/assets/components/KyModal/index.less

@@ -0,0 +1,21 @@
+:global {
+  .vertical-center-modal {
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .vertical-center-modal:before {
+    display: inline-block;
+    width: 0;
+    height: 100%;
+    vertical-align: middle;
+    content: '';
+  }
+
+  .vertical-center-modal .ant-modal {
+    top: 0;
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+  }
+}

package/assets/components/KyPreview/index.less

@@ -0,0 +1,38 @@
+:global {
+  .KyPreview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    .fileContent {
+      width: 100%;
+      height: calc(100% - 42px);
+      .pg-viewer-wrapper button,
+      .pg-viewer-wrapper input,
+      .pg-viewer-wrapper select,
+      .pg-viewer-wrapper textarea {
+        margin-top: 5px;
+      }
+    }
+
+    .filePdf {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      height: calc(100% - 84px);
+      overflow: scroll;
+      overflow-x: hidden;
+    }
+    .filePdfFooter {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 42px;
+    }
+    .filePdfPage {
+      margin: 0 10px;
+    }
+  }
+}

package/assets/components/KyUpload/index.less

@@ -0,0 +1,41 @@
+:global {
+  .button_ctrl {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    background: #e8e8e8;
+  }
+
+  .button_ctrl img {
+    padding-right: 10px;
+  }
+
+  .nhUpload-removeDelete {
+    .ant-upload-list-item-card-actions .anticon-delete,
+    .ant-upload-list-item-actions .anticon-delete {
+      //禁用时样式去掉删除按钮
+      display: none;
+    }
+  }
+  .kyUpload-hint {
+    margin-top: 4px !important;
+    color: red;
+    font-size: 12px;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .ky-upload {
+    .file-view {
+      .ant-upload-list-item-actions a:first-child {
+        opacity: 1 !important;
+        pointer-events: auto !important;
+      }
+      .ant-upload-list-item-name {
+        color: #397ef0;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/lib/components/DragM/index.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;