@zhenliang/sheet 0.1.7-3.beta.4 → 0.1.7-3.beta.7

package/dist/core/sheet/Remark.js

@@ -5,23 +5,26 @@ export var Remark = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     position = props.position;
   var transform = useMemo(function () {
-    if (document.body.clientWidth - position.left < 200) {
-      return 'translate(-100%,40px)';
+    var rightOverflow = document.body.clientWidth - position.left < 200;
+    var bottomOverflow = document.body.clientHeight - position.top < 400;
+    if (rightOverflow && bottomOverflow) {
+      return "translate(-100%, -100%)";
+    } else if (rightOverflow && !bottomOverflow) {
+      return "translate(-100%, 40px)";
+    } else if (!rightOverflow && bottomOverflow) {
+      return "translate(0, calc(40px - 100%))";
     }
     return '';
-  }, [position.left]);
+  }, [position.left, showRemark]);
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     children: /*#__PURE__*/_jsx("div", {
-      className: "harvest-remark-container",
+      className: "harvest-remark-container ".concat(showRemark ? 'remark-show' : null),
       style: {
         position: 'fixed',
         top: position.top,
         left: position.left,
-        transform: transform,
-        opacity: showRemark ? 1 : 0,
-        pointerEvents: showRemark ? 'all' : 'none',
-        minWidth: showRemark ? 200 : 0
+        transform: transform
       },
       children: showRemark ? children : null
     })

package/dist/core/sheet/index.js

@@ -132,14 +132,15 @@ var Sheet = function Sheet(props) {
       },
       goTo: function goTo(row, col) {
         dispatch(function (d, getState) {
+          var _groupConfig$groupOpe, _groupConfig$groups;
           var _getState2 = getState(),
             groupConfig = _getState2.groupConfig,
             data = _getState2.data,
             eventBus = _getState2.eventBus;
-          var nextLoop = groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.groupOpen.some(function (v) {
+          var nextLoop = groupConfig === null || groupConfig === void 0 || (_groupConfig$groupOpe = groupConfig.groupOpen) === null || _groupConfig$groupOpe === void 0 ? void 0 : _groupConfig$groupOpe.some(function (v) {
             return !v;
           });
-          if (nextLoop) {
+          if (nextLoop && groupConfig !== null && groupConfig !== void 0 && (_groupConfig$groups = groupConfig.groups) !== null && _groupConfig$groups !== void 0 && _groupConfig$groups.length) {
             eventBus === null || eventBus === void 0 || eventBus.emit('group-open-title', true);
           }
           var container = sheetWrapperRef.current;
@@ -236,8 +237,8 @@ var Sheet = function Sheet(props) {
     }
   }, [state.editing, state.start]);
   var visibleData = useMemo(function () {
-    var _groupConfig$groups, _state$data;
-    if (!(groupConfig !== null && groupConfig !== void 0 && (_groupConfig$groups = groupConfig.groups) !== null && _groupConfig$groups !== void 0 && _groupConfig$groups.length)) {
+    var _groupConfig$groups2, _state$data;
+    if (!(groupConfig !== null && groupConfig !== void 0 && (_groupConfig$groups2 = groupConfig.groups) !== null && _groupConfig$groups2 !== void 0 && _groupConfig$groups2.length)) {
       return state.data;
     }
     return (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.filter(function (item, index) {

package/dist/core/sheet/index.less

@@ -96,6 +96,7 @@ span.harvest-sheet-container:focus {
     border-right: 1px solid;
     border-color: var(--cell-border-color);
     content: '';
+    pointer-events: none;
   }
 
   &.cell-title {
@@ -379,15 +380,35 @@ span.harvest-sheet-container:focus {
   }
 }
 .harvest-remark-container{
-  opacity: 1;
   border:1px solid #E5E5E5;
+  max-height: 400px;
   border-radius: 2px;
   z-index: 10;
   margin-left: 5px;
-  transition: min-height .2s linear,height .2s linear;
-  padding: 8px;
-  overflow: hidden;
+  overflow: auto;
+  padding: 0;
   background: rgb(255,255,255);
-  // box-shadow: 2px 2px 5px #888888;
   box-shadow: 0 4px 8px rgba(216,223,235,.5);
 }
+.harvest-remark-container::-webkit-scrollbar{
+  display: none;
+}
+
+.harvest-remark-container.remark-show{
+  padding: 8px;
+  animation: scaleAnimation .3s ease-in-out normal;
+  min-width:20px
+}
+
+@keyframes scaleAnimation {
+  0% {
+    scale:0;
+    opacity: 0;
+    transform-origin:top left;
+  }
+  100% {
+    scale:1;
+    opacity: 1;
+    transform-origin:top left;
+  }
+}

package/dist/core/table/index.js

@@ -41,7 +41,7 @@ var Table = function Table(_ref) {
     handleBatchAdd = _ref.handleBatchAdd,
     draggable = _ref.draggable,
     eventHandler = _ref.eventHandler,
-    remarkRender = _ref.remarkRender,
+    RemarkRender = _ref.remarkRender,
     handleAddRemark = _ref.handleAddRemark,
     _ref$showRemark = _ref.showRemark,
     showRemark = _ref$showRemark === void 0 ? false : _ref$showRemark,
@@ -205,11 +205,15 @@ var Table = function Table(_ref) {
     setShowRemark(!!(data !== null && data !== void 0 && (_data$row2 = data[row]) !== null && _data$row2 !== void 0 && (_data$row2 = _data$row2[col]) !== null && _data$row2 !== void 0 && (_data$row2 = _data$row2.record) !== null && _data$row2 !== void 0 && (_data$row2 = _data$row2.remarks) !== null && _data$row2 !== void 0 && _data$row2.includes(columnKey)));
   }, [offset, columns, data]);
   var remarkElement = useMemo(function () {
-    if (!showRemark || !remarkInfo) {
+    if (!showRemark || !remarkInfo || !RemarkRender) {
       return null;
     }
-    return remarkRender === null || remarkRender === void 0 ? void 0 : remarkRender(remarkInfo);
-  }, [remarkRender, remarkInfo, showRemark, data]);
+    return /*#__PURE__*/_jsx(RemarkRender, _objectSpread(_objectSpread({}, remarkInfo), {}, {
+      close: function close() {
+        return setShowRemark(false);
+      }
+    }));
+  }, [RemarkRender, remarkInfo, showRemark, data]);
   var addRemark = useCallback(function (value) {
     handleAddRemark === null || handleAddRemark === void 0 || handleAddRemark(value);
     setShowRemark(true);
@@ -234,7 +238,6 @@ var Table = function Table(_ref) {
             _ref5$row = _ref5.row,
             row = _ref5$row === void 0 ? -1 : _ref5$row;
           var target = data === null || data === void 0 || (_data$row3 = data[row]) === null || _data$row3 === void 0 ? void 0 : _data$row3[col + 1];
-          console.log(data, target, row, col);
           if ((target === null || target === void 0 ? void 0 : target.readonly) !== true && !target.fixed) {
             return /*#__PURE__*/_jsx("div", {
               className: "harvest-menu",

package/dist/example/valuationAnalyze.js

@@ -4,19 +4,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable react-hooks/rules-of-hooks */
 import { getNumberEditor, getSelectEditor, Table } from "./..";
-import { Button, Input } from 'antd';
-import { isNil } from 'lodash';
+import { Button, Input, Select } from 'antd';
+import { isNil, uniq } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SwitchViewer } from "../core/viewer";
 import { SheetType } from "../type";
@@ -37,6 +38,64 @@ var RateViewer = function RateViewer(props) {
     children: value ? value + '%' : '-'
   });
 };
+var RemarkRender = function RemarkRender(handleRemark, remarks) {
+  var render = function render(value) {
+    var _remarks$find;
+    var _useState = useState((remarks === null || remarks === void 0 || (_remarks$find = remarks.find(function (r) {
+        return r.id === value.id;
+      })) === null || _remarks$find === void 0 ? void 0 : _remarks$find.remarks) || []),
+      _useState2 = _slicedToArray(_useState, 2),
+      rm = _useState2[0],
+      setRm = _useState2[1];
+    var inputRef = useRef();
+    return /*#__PURE__*/_jsxs("div", {
+      style: {
+        background: 'white'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          height: 350
+        }
+      }), /*#__PURE__*/_jsxs("p", {
+        children: [" columns:", value.columnKey]
+      }), /*#__PURE__*/_jsxs("p", {
+        children: [" id:", value.id]
+      }), /*#__PURE__*/_jsx("p", {
+        children: " bugs --"
+      }), /*#__PURE__*/_jsx(Select, {
+        onMouseDown: function onMouseDown(e) {
+          return e.stopPropagation();
+        },
+        options: [{
+          label: '2',
+          value: 3
+        }, {
+          label: '1',
+          value: 2
+        }]
+      }), rm === null || rm === void 0 ? void 0 : rm.map(function (r) {
+        return /*#__PURE__*/_jsx("p", {
+          children: r
+        }, r);
+      }), /*#__PURE__*/_jsx(Input, {
+        ref: inputRef,
+        autoFocus: true,
+        onPressEnter: function onPressEnter(e) {
+          setRm(function (s) {
+            return uniq([].concat(_toConsumableArray(s), [e.target.value]));
+          });
+          handleRemark([{
+            id: value.id,
+            remarks: [value.columnKey]
+          }]);
+          e.target.value = '';
+          inputRef.current.input.value = '';
+        }
+      })]
+    });
+  };
+  return render;
+};
 var data = [{
   id: 2443,
   draftId: '101601',
@@ -231,9 +290,9 @@ var evaluateMethods = [{
 }];
 var EvaSelect = getSelectEditor(evaluateMethods);
 export default (function () {
-  var _useState = useState(data),
-    _useState2 = _slicedToArray(_useState, 1),
-    state = _useState2[0];
+  var _useState3 = useState(data),
+    _useState4 = _slicedToArray(_useState3, 1),
+    state = _useState4[0];
   var columns = [{
     title: '默认使用',
     dataIndex: 'isEnabled',
@@ -434,31 +493,13 @@ export default (function () {
       });
     }, 3);
   }, []);
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentRemark = _useState4[0],
-    setCurrentRemark = _useState4[1];
-  var renderRemark = useCallback(function (value) {
-    return /*#__PURE__*/_jsxs("div", {
-      style: {
-        background: 'white'
-      },
-      children: [/*#__PURE__*/_jsxs("p", {
-        children: [" columns:", value.columnKey]
-      }), /*#__PURE__*/_jsxs("p", {
-        children: [" id:", value.id]
-      }), /*#__PURE__*/_jsx("p", {
-        children: " bugs --"
-      }), /*#__PURE__*/_jsx(Input, {
-        onPressEnter: function onPressEnter(e) {
-          setCurrentRemark([{
-            id: value.id,
-            remarks: [value.columnKey]
-          }]);
-        }
-      })]
-    });
-  }, []);
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentRemark = _useState6[0],
+    setCurrentRemark = _useState6[1];
+  var RenderRemarkSimple = useMemo(function () {
+    return RemarkRender(setCurrentRemark, currentRemark);
+  }, [currentRemark]);
   var wrapData = useMemo(function () {
     return state.map(function (d) {
       var _currentRemark$find;
@@ -487,7 +528,7 @@ export default (function () {
       sheetInstance: sheetInstance,
       columns: columns,
       showRemark: true,
-      remarkRender: renderRemark
+      remarkRender: RenderRemarkSimple
       // handleAddRemark={handleAddRemark}
       ,
       dataSource: wrapData,

package/dist/type/sheetTable.d.ts

@@ -60,6 +60,7 @@ export type RemarkProps = {
     cell: SheetType.CellPosition;
     columnKey: string;
     id?: string | number;
+    close: () => void;
 };
 export type TableProps = {
     /**
@@ -88,7 +89,7 @@ export type TableProps = {
     freeze?: boolean;
     showBackEdit?: boolean;
     showRemark?: boolean;
-    remarkRender?: (props: RemarkProps) => ReactNode;
+    remarkRender?: React.FC<RemarkProps>;
     handleAddRemark?: (value: RemarkProps) => void;
     backEditStyle?: Partial<CSSProperties>;
     searchStyle?: Partial<CSSProperties>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.1.73.beta.4",
+  "version": "0.1.73.beta.7",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -21,9 +21,6 @@
     "prepublishOnly": "father doctor && npm run build",
     "start": "npm run dev"
   },
-  "resolutions": {
-    "@types/react": "17.0.40"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -46,6 +43,9 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "resolutions": {
+    "@types/react": "17.0.40"
+  },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "antd": "^4.24.0",
@@ -85,4 +85,4 @@
     "fizz.zhou@ap.jll.com"
   ],
   "preid": "beta"
-}
+}