ronds-metadata 1.1.0 → 1.1.3

package/es/comps/Editable/comps/EditableHeardCell.js

@@ -10,7 +10,7 @@ import _Input from "antd/es/input";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "dataIndex", "isAddColumn", "children", "className"];
+var _excluded = ["title", "dataIndex", "isAddColumn", "children", "className", "style"];
 import { PlusSquareOutlined, DeleteOutlined } from '@ant-design/icons';
 import React from 'react';
 import { EditableContext } from '../interface';
@@ -24,6 +24,7 @@ var EditableHeardCell = function EditableHeardCell(props) {
       isAddColumn = props.isAddColumn,
       children = props.children,
       className = props.className,
+      style = props.style,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var _ref = React.useContext(EditableContext) || undefined,
@@ -46,6 +47,27 @@ var EditableHeardCell = function EditableHeardCell(props) {
       visible = _React$useState4[0],
       setVisible = _React$useState4[1];
 
+  var myStyle = React.useMemo(function () {
+    var res = {};
+
+    if (style) {
+      res = _objectSpread(_objectSpread({}, style), {}, {
+        right: style.right - 6
+      });
+    }
+
+    return res;
+  }, [style]);
+  var myClassName = React.useMemo(function () {
+    var _cls = className;
+
+    if (_cls && _cls.indexOf('ant-table-cell-scrollbar')) {
+      _cls = _cls.replace('ant-table-cell-scrollbar', '');
+    }
+
+    return _cls;
+  }, [className]);
+
   var onMouseOver = function onMouseOver() {
     editableStream.next({
       type: 'editHeardCellKey',
@@ -112,8 +134,10 @@ var EditableHeardCell = function EditableHeardCell(props) {
     setVisible(b);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", _extends({}, restProps, {
-    className: "".concat(className, " ant-table-th font-bold ").concat(isAddColumn && editConfig.editHeardCellKey === dataIndex ? 'border-right ' : '', " ")
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", _extends({
+    className: "".concat(myClassName, " ant-table-th font-bold ").concat(isAddColumn && editConfig.editHeardCellKey === dataIndex ? 'border-right ' : '', " ")
+  }, restProps, {
+    style: _objectSpread({}, myStyle)
   }), isAddColumn && /*#__PURE__*/React.createElement(_Popover, {
     placement: "rightTop",
     content: content,

package/es/comps/Editable/index.css

@@ -2,8 +2,17 @@
   width: 100%;
   height: 100%;
 }
-.ronds-edit-table table {
-  border-collapse: collapse !important;
+.ronds-edit-table .ant-table-body {
+  overflow: auto !important;
+}
+.ronds-edit-table .ant-table-fixed-left .ant-table-body-outer,
+.ronds-edit-table .ant-table-fixed-right .ant-table-body-outer {
+  margin-bottom: 0 !important;
+}
+.ronds-edit-table .ant-table-fixed-left .ant-table-cell-scrollbar,
+.ronds-edit-table .ant-table-fixed-right .ant-table-cell-scrollbar {
+  margin: 0 !important;
+  padding: 0 !important;
 }
 .ronds-edit-table .ant-spin-nested-loading,
 .ronds-edit-table .ant-spin-container,
@@ -18,10 +27,6 @@
   height: 30px;
   padding: 0px 8px !important;
 }
-.ronds-edit-table .ant-table-cell-fix-right {
-  position: sticky !important;
-  right: 0 !important;
-}
 .ronds-edit-table .ant-table-body {
   height: 100%;
   overflow-y: auto !important;

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

@@ -33,10 +33,6 @@ interface IEditableProps<R = any> {
      * 是否可以添加列
      */
     isAddColumn?: boolean;
-    /**
-     * 删除列白名单
-     */
-    whiteColumn?: string[];
     /**
      * antd自身的属性
      */

package/es/comps/Editable/index.js

@@ -32,7 +32,6 @@ var Editable = function Editable(props) {
       addPosition = _props$addPosition === void 0 ? 'bottom' : _props$addPosition,
       _props$isAddColumn = props.isAddColumn,
       isAddColumn = _props$isAddColumn === void 0 ? false : _props$isAddColumn,
-      whiteColumn = props.whiteColumn,
       tableProps = props.tableProps,
       onRowConfirm = props.onRowConfirm,
       onRowDelete = props.onRowDelete,
@@ -67,16 +66,9 @@ var Editable = function Editable(props) {
   var _React$useState9 = React.useState(),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       editHeardCellKey = _React$useState10[0],
-      setEditHeardCellkey = _React$useState10[1]; // 记录临时加的列头
+      setEditHeardCellkey = _React$useState10[1]; // 记录上一次发生改变的行值
 
 
-  var _React$useState11 = React.useState([]),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      addColumns = _React$useState12[0],
-      setAddColumns = _React$useState12[1];
-
-  var addColumnsRef = React.useRef([]); // 记录上一次发生改变的行值
-
   var lastValueRef = React.useRef(); // 记录上一次的datasource
 
   var lastDataSourceRef = React.useRef();
@@ -127,12 +119,6 @@ var Editable = function Editable(props) {
       case 'editHeardCellKey':
         setEditHeardCellkey(data.payload);
         break;
-      // case 'onAddColumn':
-      //   processAddColumnsData(data.payload);
-      //   break;
-      // case 'onDeleteColumn':
-      //   processDeleteColumnsData(data.payload);
-      //   break;
 
       case 'onSingleSave':
         if (lastValueRef.current && lastValueRef.current.rowIdx === data.payload._rowKey_) {
@@ -200,36 +186,7 @@ var Editable = function Editable(props) {
     }
   }, [type]); // 集中处理数据流
 
-  useObservable(processStreamFactory, [editableStream]); // const processAddColumnsData = (data: any) => {
-  //   const _columns = addColumnsRef.current.length > 0 ? addColumnsRef.current : columns;
-  //   // 判断key是否重复
-  //   if (_columns.findIndex((v) => v.key === data.key) > -1) {
-  //     // message.warning('表格的key不可以重复');
-  //     return;
-  //   }
-  //   const idx = _columns.findIndex((v: any) => v.dataIndex === data.dataIndex);
-  //   const obj = {
-  //     title: data.title,
-  //     key: data.key,
-  //     dataIndex: data.key,
-  //   };
-  //   _columns.splice(idx + 1, 0, { ..._columns[0], ...obj });
-  //   setAddColumns([..._columns]);
-  //   addColumnsRef.current = _columns;
-  //   // editableStream.next({ type: 'editHeardCellKey', payload: undefined });
-  // };
-  // const processDeleteColumnsData = (data: any) => {
-  //   let _columns = addColumnsRef.current.length > 0 ? addColumnsRef.current : columns;
-  //   if (whiteColumn.findIndex((v) => v === data.dataIndex) > -1) {
-  //     // message.warning(`${data.dataIndex}无法删除`);
-  //     return;
-  //   }
-  //   _columns = _columns.filter((v: any) => v.dataIndex != data.dataIndex);
-  //   setAddColumns([..._columns]);
-  //   addColumnsRef.current = _columns;
-  //   // editableStream.next({ type: 'editHeardCellKey', payload: undefined });
-  // };
-  // 返回stream的实例
+  useObservable(processStreamFactory, [editableStream]); // 返回stream的实例
 
   React.useEffect(function () {
     if (firstLoadRef && editableStream) {
@@ -272,7 +229,7 @@ var Editable = function Editable(props) {
   }, [readonly, type]); // 处理一下编辑表格的数据
 
   var _columns = React.useMemo(function () {
-    var __columns__ = addColumns && addColumns.length > 0 ? addColumns : columns;
+    var __columns__ = columns;
 
     var res = __columns__.map(getEditColumn);
 
@@ -299,7 +256,7 @@ var Editable = function Editable(props) {
     }
 
     return res;
-  }, [columns, readonly, type, addColumns]); // 主要是自己加一层rowkey
+  }, [columns, readonly, type]); // 主要是自己加一层rowkey
 
 
   var _dataSource = React.useMemo(function () {
@@ -362,6 +319,7 @@ var Editable = function Editable(props) {
       }
     }
   }, /*#__PURE__*/React.createElement(_Table, _extends({
+    key: _columns.length,
     className: "ronds-edit-table",
     bordered: true,
     scroll: {

package/es/theme.css

@@ -1,6 +1,50 @@
 .ronds-metadata-dark {
   --ronds-metadata-color-border-1: #314162;
 }
+.ronds-metadata-dark ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  overflow: auto;
+}
+.ronds-metadata-dark ::-webkit-scrollbar-corner {
+  background-color: transparent;
+  color: transparent;
+}
+.ronds-metadata-dark ::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+  background: var(--scrollbar-color);
+  min-height: 25px;
+  min-width: 25px;
+  border-radius: 3px;
+}
+.ronds-metadata-dark ::-webkit-scrollbar-thumb:hover {
+  border-radius: 2px;
+  background: var(--scrollbar-color-hover);
+}
+.ronds-metadata-dark ::-webkit-scrollbar-thumb:active {
+  background: var(--scrollbar-color-hover);
+}
 .ronds-metadata-normal {
   --ronds-metadata-color-border-1: #d9d9d9;
 }
+.ronds-metadata-normal ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  overflow: auto;
+}
+.ronds-metadata-normal ::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-color);
+  min-height: 25px;
+  min-width: 25px;
+  border-radius: 3px;
+  /* border: 1px solid #e0e0e0; */
+}
+.ronds-metadata-normal ::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a8a8;
+}
+.ronds-metadata-normal ::-webkit-scrollbar-thumb:active {
+  background-color: #787878;
+}
+.ronds-metadata-normal ::-webkit-scrollbar-track {
+  background-color: #f7f7f7;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",