ronds-metadata 1.0.64 → 1.0.65

package/es/comps/Editable/comps/EditableCell.js

@@ -2,14 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import "antd/es/message/style";
 import _message from "antd/es/message";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["isAddColumn", "editable", "record", "editableType", "dataIndex", "rowIndex", "children"];
+var _excluded = ["title", "isAddColumn", "editable", "record", "editableType", "dataIndex", "rowIndex", "children"];
 import React from 'react';
 import { EditableContext } from '../interface';
 import { getDataCell, isFreeEditCell, isFreeEditRow } from '../utils';
 import "./index.css";
+import Texty from './Texty';
 
 var EditableCell = function EditableCell(props) {
-  var isAddColumn = props.isAddColumn,
+  var title = props.title,
+      isAddColumn = props.isAddColumn,
       editable = props.editable,
       record = props.record,
       editableType = props.editableType,
@@ -64,7 +66,12 @@ var EditableCell = function EditableCell(props) {
   if (editableType === 'single') {
     return /*#__PURE__*/React.createElement("td", _extends({}, restProps, {
       className: "ant-table-cell ".concat(isAddColumn && editConfig.editHeardCellKey === dataIndex ? 'border-right' : '', " ")
-    }), editable && editConfig.curRow === rowIndex ? getDataCell(props) : children);
+    }), editable && editConfig.curRow === rowIndex ? getDataCell(props) : /*#__PURE__*/React.createElement(Texty, {
+      tooltipStyle: {
+        wordWrap: 'break-word'
+      },
+      tooltipMaxWidth: 800
+    }, children));
   }
 
   if (editableType === 'freedom') {
@@ -73,12 +80,22 @@ var EditableCell = function EditableCell(props) {
       onClick: onCellClick
     }, restProps, {
       className: "ant-table-cell ".concat(isAddColumn && editConfig.editHeardCellKey === dataIndex ? 'border-right' : '', " ")
-    }), editable && (isFreeEditRow(editConfig.curRow, rowIndex) || isFreeEditCell(editConfig.editCellKey, dataIndex, rowIndex)) ? getDataCell(props) : children);
+    }), editable && (isFreeEditRow(editConfig.curRow, rowIndex) || isFreeEditCell(editConfig.editCellKey, dataIndex, rowIndex)) ? getDataCell(props) : /*#__PURE__*/React.createElement(Texty, {
+      tooltipStyle: {
+        wordWrap: 'break-word'
+      },
+      tooltipMaxWidth: 800
+    }, children));
   }
 
   return /*#__PURE__*/React.createElement("td", _extends({}, restProps, {
     className: "ant-table-cell ".concat(isAddColumn && editConfig.editHeardCellKey === dataIndex ? 'border-right' : '', " ")
-  }), editable ? getDataCell(props) : children);
+  }), editable ? getDataCell(props) : /*#__PURE__*/React.createElement(Texty, {
+    tooltipStyle: {
+      wordWrap: 'break-word'
+    },
+    tooltipMaxWidth: 800
+  }, children));
 };
 
 export default EditableCell;

package/es/comps/Editable/comps/Texty.css

@@ -0,0 +1,40 @@
+[data-texty] {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-texty-tooltip] {
+  margin: 6px 0;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background-color: #222;
+  color: #fff;
+  z-index: 99999;
+}
+[data-texty-arrow] {
+  position: absolute;
+  bottom: -6px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 6px 0;
+  border-color: #222 transparent transparent;
+}
+[data-texty-arrow*='bottom'] {
+  top: -6px;
+  bottom: inherit;
+  transform: rotate(180deg);
+}
+/* disable the builtin tooltip for truncated text on Safari */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  @supports (not (-ms-ime-align: auto)) {
+    .EllipsisText::before {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+    }
+  }
+}

package/es/comps/Editable/comps/Texty.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import './Texty.less';
+export interface ITextyProps {
+    /** 样式名 */
+    className?: string;
+    /**
+     * 获取组件的ref 默认undefined
+     */
+    innerRef?: Function;
+    /**
+     * tooltip的渲染元素 默认div
+     */
+    tagName?: string;
+    /**
+     * 提示框内容 默认为children
+     */
+    tooltip?: React.ReactElement;
+    /**
+     *  tooltip的className
+     */
+    tooltipClassName?: string;
+    /**
+     * tooltip的Style
+     */
+    tooltipStyle?: React.CSSProperties;
+    /**
+     * tooltip的最大宽度
+     */
+    tooltipMaxWidth?: number;
+    /**
+     *  鼠标移入后 多久显示
+     */
+    showDelay?: number;
+    /**
+     * 鼠标移出后 多久隐藏
+     */
+    hideDelay?: number;
+    /**
+     * 箭头的className
+     */
+    arrowClassName?: string;
+    /**
+     *  隐藏箭头
+     */
+    hideArrow?: boolean;
+    /**
+     * tooltip位置
+     */
+    placement?: 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    /**
+     * 附加tooltip的HTML元素**在大多数情况下，您无需手动设置**
+     */
+    container?: any;
+    /** 鼠标移出事件 */
+    onMouseLeave?: (e: any) => void;
+    /** 鼠标移入事件 */
+    onMouseEnter?: (e: any) => void;
+}
+/**
+ * 基于Popper的tooltip
+ */
+declare class Texty extends React.PureComponent<ITextyProps, any> {
+    state: {
+        isHovered: boolean;
+    };
+    private listenTimer;
+    private targetNode;
+    private hideTimer;
+    private showTimer;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    renderTooltip: ({ ref, style, placement, arrowProps, }: any) => React.ReactPortal;
+    setTargetRef: (ref: any) => void;
+    handleMouseEvent: (e: any) => void;
+    handleScroll: (e: any) => void;
+    _clearListenTimer(): void;
+    _clearShowTimer(): void;
+    _clearHideTimer(): void;
+    handleMouseEnter: (e: any) => void;
+    handleMouseLeave: (e: any) => void;
+}
+export default Texty;

package/es/comps/Editable/comps/Texty.js

@@ -0,0 +1,277 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+var _excluded = ["tagName", "children", "placement", "innerRef", "showDelay", "hideDelay", "tooltip", "tooltipClassName", "tooltipStyle", "tooltipMaxWidth", "hideArrow", "container"];
+import React from 'react';
+import ReactDom from 'react-dom';
+import { Popper } from 'react-popper';
+import "./Texty.css";
+var modifiers = [{
+  name: 'preventOverflow',
+  options: {
+    mainAxis: true,
+    padding: 10
+  }
+}];
+/**
+ * 基于Popper的tooltip
+ */
+
+var Texty = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Texty, _React$PureComponent);
+
+  var _super = _createSuper(Texty);
+
+  function Texty() {
+    var _this;
+
+    _classCallCheck(this, Texty);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      isHovered: false
+    };
+    _this.listenTimer = void 0;
+    _this.targetNode = void 0;
+    _this.hideTimer = void 0;
+    _this.showTimer = void 0;
+
+    _this.renderTooltip = function (_ref) {
+      var ref = _ref.ref,
+          style = _ref.style,
+          placement = _ref.placement,
+          arrowProps = _ref.arrowProps;
+      var _this$props = _this.props,
+          children = _this$props.children,
+          container = _this$props.container,
+          tooltip = _this$props.tooltip,
+          tooltipClassName = _this$props.tooltipClassName,
+          tooltipStyle = _this$props.tooltipStyle,
+          tooltipMaxWidth = _this$props.tooltipMaxWidth,
+          arrowClassName = _this$props.arrowClassName,
+          hideArrow = _this$props.hideArrow;
+      var content = tooltip || children;
+      var extraStyle = tooltipMaxWidth ? _objectSpread(_objectSpread({}, tooltipStyle), {}, {
+        maxWidth: tooltipMaxWidth
+      }) : tooltipStyle;
+      return /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/React.createElement("div", {
+        ref: ref,
+        "data-texty-tooltip": placement,
+        className: tooltipClassName,
+        style: extraStyle ? _objectSpread(_objectSpread({}, style), extraStyle) : style,
+        onClick: _this.handleMouseEvent,
+        onDoubleClick: _this.handleMouseEvent,
+        onContextMenu: _this.handleMouseEvent,
+        onMouseDown: _this.handleMouseEvent,
+        onMouseUp: _this.handleMouseEvent
+      }, content, !hideArrow && /*#__PURE__*/React.createElement("div", {
+        ref: arrowProps.ref,
+        "data-texty-arrow": placement,
+        className: arrowClassName,
+        style: arrowProps.style
+      })), container || _this.targetNode.ownerDocument.body);
+    };
+
+    _this.setTargetRef = function (ref) {
+      _this.props.innerRef && _this.props.innerRef(ref);
+      _this.targetNode = ref; // console.log("setTargetRef",ref,this.targetNode)
+    };
+
+    _this.handleMouseEvent = function (e) {
+      e.stopPropagation();
+    };
+
+    _this.handleScroll = function (e) {
+      var _e$srcElement, _e$srcElement2;
+
+      if ((e === null || e === void 0 ? void 0 : (_e$srcElement = e.srcElement) === null || _e$srcElement === void 0 ? void 0 : _e$srcElement.className) === 'contract-trigger') {
+        return;
+      }
+
+      if ((e === null || e === void 0 ? void 0 : (_e$srcElement2 = e.srcElement) === null || _e$srcElement2 === void 0 ? void 0 : _e$srcElement2.className) === 'texty-scroll') {
+        return;
+      }
+
+      _this.setState({
+        isHovered: false
+      });
+    };
+
+    _this.handleMouseEnter = function (e) {
+      // console.log('handleMouseEnter');
+      // eslint-disable-next-line react/prop-types
+      var _this$props2 = _this.props,
+          showDelay = _this$props2.showDelay,
+          onMouseEnter = _this$props2.onMouseEnter;
+      onMouseEnter && onMouseEnter(e);
+
+      _this._clearHideTimer();
+
+      if (!showDelay) {
+        _this.setState({
+          isHovered: true
+        });
+
+        return;
+      }
+
+      _this.showTimer = setTimeout(function () {
+        _this.setState({
+          isHovered: true
+        });
+
+        delete _this.showTimer;
+      }, showDelay);
+    };
+
+    _this.handleMouseLeave = function (e) {
+      // console.log('handleMouseLeave');
+      // eslint-disable-next-line react/prop-types
+      var _this$props3 = _this.props,
+          hideDelay = _this$props3.hideDelay,
+          onMouseLeave = _this$props3.onMouseLeave;
+      onMouseLeave && onMouseLeave(e);
+
+      _this._clearShowTimer();
+
+      var isHovered = _this.state.isHovered;
+      if (!isHovered) return;
+
+      if (!hideDelay) {
+        _this.setState({
+          isHovered: false
+        });
+
+        return;
+      }
+
+      _this.hideTimer = setTimeout(function () {
+        _this.setState({
+          isHovered: false
+        });
+
+        delete _this.hideTimer;
+      }, hideDelay);
+    };
+
+    return _this;
+  }
+
+  _createClass(Texty, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this2 = this;
+
+      // console.log(this.state);
+      if (this.state.isHovered) {
+        window.addEventListener('scroll', this.handleScroll, true); // react - virtualized - auto - sizer would trigger scroll events after tooltip shown in some case,we have to skip those scroll events
+
+        this.listenTimer = setTimeout(function () {
+          window.removeEventListener('scroll', _this2.handleScroll, true);
+          window.addEventListener('scroll', _this2.handleScroll, true);
+          delete _this2.listenTimer;
+        }, 50);
+      } else {
+        this._clearListenTimer();
+
+        window.removeEventListener('scroll', this.handleScroll, true);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._clearListenTimer();
+
+      window.removeEventListener('scroll', this.handleScroll, true);
+
+      this._clearShowTimer();
+
+      this._clearHideTimer();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      /* eslint-disable no-unused-vars */
+      var _this$props4 = this.props,
+          tagName = _this$props4.tagName,
+          children = _this$props4.children,
+          placement = _this$props4.placement,
+          innerRef = _this$props4.innerRef,
+          showDelay = _this$props4.showDelay,
+          hideDelay = _this$props4.hideDelay,
+          tooltip = _this$props4.tooltip,
+          tooltipClassName = _this$props4.tooltipClassName,
+          tooltipStyle = _this$props4.tooltipStyle,
+          tooltipMaxWidth = _this$props4.tooltipMaxWidth,
+          hideArrow = _this$props4.hideArrow,
+          container = _this$props4.container,
+          rest = _objectWithoutProperties(_this$props4, _excluded);
+      /* eslint-enable no-unused-vars */
+
+
+      var Tag = tagName;
+
+      if (!children) {
+        return null; // return <Tag { ...rest } ref={ this.setTargetRef } data-texty={ false } />;
+      }
+
+      var target = this.targetNode;
+      var isTruncated = !!target && target.scrollWidth > target.offsetWidth;
+      var showTooltip = this.state.isHovered && isTruncated; // console.log("showTooltip",showTooltip)
+
+      return /*#__PURE__*/React.createElement(Tag, _extends({}, rest, {
+        ref: this.setTargetRef,
+        "data-texty": showTooltip,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
+      }), children, showTooltip && /*#__PURE__*/React.createElement(Popper, {
+        referenceElement: target,
+        placement: placement,
+        modifiers: modifiers
+      }, this.renderTooltip));
+    }
+  }, {
+    key: "_clearListenTimer",
+    value: function _clearListenTimer() {
+      if (this.listenTimer) {
+        clearTimeout(this.listenTimer);
+        delete this.listenTimer;
+      }
+    }
+  }, {
+    key: "_clearShowTimer",
+    value: function _clearShowTimer() {
+      if (this.showTimer) {
+        clearTimeout(this.showTimer);
+        delete this.showTimer;
+      }
+    }
+  }, {
+    key: "_clearHideTimer",
+    value: function _clearHideTimer() {
+      if (this.hideTimer) {
+        clearTimeout(this.hideTimer);
+        delete this.hideTimer;
+      }
+    }
+  }]);
+
+  return Texty;
+}(React.PureComponent);
+
+Texty.defaultProps = {
+  tagName: 'div',
+  showDelay: 150,
+  hideDelay: 150,
+  hideArrow: true,
+  placement: 'top'
+};
+export default Texty;

package/es/comps/Editable/index.css

@@ -22,6 +22,13 @@
   background-color: #ebebeb;
   border-right: 1px solid #f2f2f2;
 }
+.ronds-edit-table .ant-table-fixed {
+  table-layout: fixed;
+}
+.ronds-edit-table .ant-table-tbody > tr > td {
+  word-wrap: break-word;
+  word-break: break-all;
+}
 .ronds-edit-table .ant-table.ant-table-small .ant-table-title,
 .ronds-edit-table .ant-table.ant-table-small .ant-table-footer,
 .ronds-edit-table .ant-table.ant-table-small .ant-table-thead > tr > th,

package/es/comps/Editable/index.js

@@ -292,8 +292,8 @@ var Editable = function Editable(props) {
         dataKey: '_aciton_',
         title: '操作',
         width: 40,
-        frozen: 'right',
         ellipsis: true,
+        fixed: 'left',
         render: function render(val, record) {
           return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditableAction, {
             type: type,
@@ -375,9 +375,8 @@ var Editable = function Editable(props) {
   }, /*#__PURE__*/React.createElement(_Table, _extends({
     className: "ronds-edit-table",
     bordered: true,
-    tableLayout: "auto",
     scroll: {
-      x: true,
+      x: '100%',
       y: 'calc(100% - 40px)'
     }
   }, tableProps, {
@@ -405,8 +404,8 @@ var Editable = function Editable(props) {
     block: true,
     type: "dashed",
     style: {
-      marginBottom: 16,
-      marginTop: 16
+      marginBottom: '5px',
+      marginTop: '5px'
     },
     onClick: onAddRow
   }, "\u6DFB\u52A0\u4E00\u884C")));

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -47,6 +47,7 @@
     "react": "^16.12.0",
     "react-color": "^2.19.3",
     "react-markdown-editor-lite": "^1.3.2",
+    "react-popper": "^2.2.5",
     "rxjs": "^7.5.4"
   },
   "peerDependencies": {