linkmore-design 1.0.33 → 1.0.36

package/es/EditTable/EditTable.js

@@ -67,12 +67,16 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _UploadOss = _interopRequireDefault(require("../UploadOss"));
 
-var _IconFont = _interopRequireDefault(require("../IconFont"));
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodash = require("lodash");
+
+var _icons = require("@ant-design/icons");
 
 var _excluded = ["value", "onChange"],
     _excluded2 = ["index"],
-    _excluded3 = ["isEdit", "editEnum", "valueType", "editable", "children", "dataIndex", "record", "handleSave", "rowKey", "handleAdd", "handleDelete", "getLength", "itemProps", "setValid"],
-    _excluded4 = ["value", "onChange", "columns", "isEdit", "isAdd", "rowKey"];
+    _excluded3 = ["isEdit", "isHoverEdit", "editEnum", "valueType", "editable", "children", "dataIndex", "record", "handleSave", "rowKey", "handleAdd", "handleDelete", "getLength", "itemProps", "setValid", "reWriteOriginSource"],
+    _excluded4 = ["value", "onChange", "columns", "isEdit", "isAdd", "rowKey", "isHoverEdit"];
 var UploadBtn = _UploadOss.default.UploadBtn;
 
 var EditableContext = /*#__PURE__*/_react.default.createContext(null);
@@ -88,7 +92,7 @@ var UploadSingle = function UploadSingle(props) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "upload_single"
-  }, value ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+  }, value ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(IconFont, {
     type: "lmweb-link",
     style: {
       fontSize: 14,
@@ -98,7 +102,7 @@ var UploadSingle = function UploadSingle(props) {
     href: "".concat(value === null || value === void 0 ? void 0 : value.externalUrl, "/").concat(value === null || value === void 0 ? void 0 : value.filePath).concat(value === null || value === void 0 ? void 0 : value.realFileName),
     target: "_blank",
     rel: "noreferrer"
-  }, value === null || value === void 0 ? void 0 : value.fileName), /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+  }, value === null || value === void 0 ? void 0 : value.fileName), /*#__PURE__*/_react.default.createElement(IconFont, {
     type: "lmweb-delete",
     style: {
       fontSize: 14,
@@ -164,7 +168,7 @@ var Opetate = function Opetate(_ref2) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({
     type: "link",
     size: "small",
-    icon: /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    icon: /*#__PURE__*/_react.default.createElement(IconFont, {
       type: "lmweb-minus-circle",
       style: {
         fontSize: 16
@@ -178,7 +182,7 @@ var Opetate = function Opetate(_ref2) {
   })), /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({
     type: "link",
     size: "small",
-    icon: /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    icon: /*#__PURE__*/_react.default.createElement(IconFont, {
       type: "lmweb-plus-circle",
       style: {
         fontSize: 16
@@ -207,6 +211,16 @@ var EditableRow = function EditableRow(_ref3) {
     value: form
   }, /*#__PURE__*/_react.default.createElement("tr", props)));
 };
+
+var isValidValue = function isValidValue(verifyValue) {
+  var toStringValue = JSON.stringify(verifyValue);
+
+  if (verifyValue === undefined || verifyValue === null || verifyValue === '' || toStringValue === '[]' || toStringValue === '{}') {
+    return false;
+  }
+
+  return true;
+};
 /*
   表格单元格
   editEnum： 下拉框时的数据数组（非数组时是配置设置）
@@ -216,6 +230,7 @@ var EditableRow = function EditableRow(_ref3) {
 
 var EditableCell = function EditableCell(props) {
   var isEdit = props.isEdit,
+      isHoverEdit = props.isHoverEdit,
       editEnum = props.editEnum,
       valueType = props.valueType,
       editable = props.editable,
@@ -229,6 +244,7 @@ var EditableCell = function EditableCell(props) {
       getLength = props.getLength,
       itemProps = props.itemProps,
       setValid = props.setValid,
+      reWriteOriginSource = props.reWriteOriginSource,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
 
   var _useState = (0, _react.useState)(true),
@@ -236,10 +252,63 @@ var EditableCell = function EditableCell(props) {
       editing = _useState2[0],
       setEditing = _useState2[1];
 
-  var form = (0, _react.useContext)(EditableContext); // 出现死循环找我
+  var focusCapturedRef = (0, _react.useRef)(false);
+  var curValue = (0, _lodash.get)(record, dataIndex);
+  var curValueIsValid = isValidValue(curValue);
+
+  var getDefaultChildNode = function getDefaultChildNode() {
+    var focusCaptured = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var childNode = children;
+
+    if (!isHoverEdit) {
+      if (isEdit && editable) {
+        childNode = /*#__PURE__*/_react.default.createElement(_form.default.Item, (0, _extends2.default)({
+          style: {
+            margin: 0
+          }
+        }, itemProps, {
+          name: dataIndex
+        }), Control(editable));
+      }
+    }
+
+    if (isHoverEdit && editable) {
+      if (focusCaptured) {
+        childNode = /*#__PURE__*/_react.default.createElement(_form.default.Item, (0, _extends2.default)({
+          style: {
+            margin: 0
+          }
+        }, itemProps, {
+          name: dataIndex
+        }), Control(editable));
+      }
+
+      if (!curValueIsValid) {
+        childNode = /*#__PURE__*/_react.default.createElement(_form.default.Item, (0, _extends2.default)({
+          style: {
+            margin: 0
+          }
+        }, itemProps, {
+          name: dataIndex
+        }), Control(editable));
+      }
+    }
+
+    return childNode;
+  };
+
+  var _useState3 = (0, _react.useState)(getDefaultChildNode),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      childNode = _useState4[0],
+      setChildNode = _useState4[1];
+
+  var form = (0, _react.useContext)(EditableContext);
+  (0, _react.useEffect)(function () {
+    setChildNode(getDefaultChildNode(focusCapturedRef.current));
+  }, [children]); // 出现死循环找我
 
   (0, _react.useEffect)(function () {
-    if (isEdit && editable && record[dataIndex]) {
+    if (isEdit && editable && record[dataIndex] || isHoverEdit && editable && record[dataIndex]) {
       form.setFieldsValue((0, _defineProperty2.default)({}, dataIndex, editable === 'date' ? (0, _dayjs.default)(record[dataIndex]) : record[dataIndex]));
     }
   }, [record]); // 校验保存
@@ -305,9 +374,8 @@ var EditableCell = function EditableCell(props) {
 
   var handleFormItemChange = function handleFormItemChange() {
     save === null || save === void 0 ? void 0 : save();
-  };
+  }; // 输入框
 
-  var childNode = children; // 输入框
 
   function Control(con) {
     switch (con) {
@@ -425,17 +493,43 @@ var EditableCell = function EditableCell(props) {
     }
   }
 
-  if (isEdit && editable) {
-    childNode = /*#__PURE__*/_react.default.createElement(_form.default.Item, (0, _extends2.default)({
-      style: {
-        margin: 0
-      }
-    }, itemProps, {
-      name: dataIndex
-    }), Control(editable));
+  var isOpenEdit = isEdit && focusCapturedRef.current || isHoverEdit && focusCapturedRef.current;
+  var classNames = (0, _classnames.default)({
+    'lm_base_editTable_cell': true,
+    'lm_base_editTable_cell_edit': isOpenEdit || isHoverEdit && !curValueIsValid
+  });
+  var extensionConfig = {};
+
+  var mouseEnterCell = function mouseEnterCell() {
+    focusCapturedRef.current = true;
+    var newChildNode = getDefaultChildNode(true);
+    setChildNode(newChildNode);
+  };
+
+  var mouseLeaveCell = function mouseLeaveCell() {
+    focusCapturedRef.current = false;
+    var nextValue = form.getFieldValue(dataIndex);
+    var prevValue = (0, _lodash.get)(record, dataIndex);
+
+    if (!(0, _lodash.eq)(prevValue, nextValue)) {
+      var rowValue = (0, _lodash.get)(record, rowKey);
+      reWriteOriginSource(rowKey, rowValue, dataIndex, nextValue);
+    } else {
+      var newChildNode = getDefaultChildNode(false);
+      setChildNode(newChildNode);
+    }
+  };
+
+  if (isHoverEdit && editable) {
+    (0, _lodash.set)(extensionConfig, 'onMouseEnter', mouseEnterCell);
+    (0, _lodash.set)(extensionConfig, 'onMouseLeave', mouseLeaveCell);
   }
 
-  return /*#__PURE__*/_react.default.createElement("td", restProps, childNode);
+  return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({}, restProps, {
+    className: classNames
+  }, extensionConfig, {
+    key: "".concat((0, _lodash.get)(record, rowKey), "_").concat(dataIndex)
+  }), childNode);
 };
 
 var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -447,26 +541,27 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isAdd = _props$isAdd === void 0 ? true : _props$isAdd,
       _props$rowKey = props.rowKey,
       _rowKey = _props$rowKey === void 0 ? '_ID' : _props$rowKey,
+      isHoverEdit = props.isHoverEdit,
       resetProps = (0, _objectWithoutProperties2.default)(props, _excluded4);
 
-  var _useState3 = (0, _react.useState)(function () {
+  var _useState5 = (0, _react.useState)(function () {
     return defaultData === null || defaultData === void 0 ? void 0 : defaultData.map(function (v, idx) {
       return (0, _objectSpread5.default)((0, _defineProperty2.default)({}, _rowKey, "v".concat(idx + 1)), v);
     });
   }),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      dataSource = _useState4[0],
-      setDataSource = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(2),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      count = _useState6[0],
-      setCount = _useState6[1];
+      dataSource = _useState6[0],
+      setDataSource = _useState6[1];
 
-  var _useState7 = (0, _react.useState)({}),
+  var _useState7 = (0, _react.useState)(2),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      _valid = _useState8[0],
-      setValid = _useState8[1]; // 删除
+      count = _useState8[0],
+      setCount = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({}),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      _valid = _useState10[0],
+      setValid = _useState10[1]; // 删除
 
 
   var handleDelete = function handleDelete(key) {
@@ -506,6 +601,18 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(newData);
   };
 
+  var reWriteOriginSource = function reWriteOriginSource(rowKey, rowValue, dataIndex, nextValue) {
+    setDataSource(function (prevDataSource) {
+      return prevDataSource.map(function (item) {
+        if ((0, _lodash.get)(item, rowKey) === rowValue) {
+          (0, _lodash.set)(item, dataIndex, nextValue);
+        }
+
+        return item;
+      });
+    });
+  };
+
   var config = (0, _react.useMemo)(function () {
     return (0, _objectSpread5.default)({
       size: 'small',
@@ -529,6 +636,9 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
 
         return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, col), {}, {
+          render: function render(value) {
+            return value;
+          },
           onCell: function onCell(record) {
             return {
               getLength: function getLength() {
@@ -538,6 +648,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
               rowKey: _rowKey,
               record: record,
               isEdit: isEdit,
+              isHoverEdit: isHoverEdit,
               handleAdd: handleAdd,
               handleDelete: handleDelete,
               editable: col.editable,
@@ -545,7 +656,8 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
               itemProps: col.itemProps,
               editEnum: typeof col.editEnum === 'function' ? col.editEnum(record) : col.editEnum,
               valueType: typeof col.valueType === 'function' ? col.valueType(record) : col.valueType,
-              handleSave: handleSave
+              handleSave: handleSave,
+              reWriteOriginSource: reWriteOriginSource
             };
           }
         });
@@ -565,6 +677,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     };
   });
+  var isShowAddAction = isEdit && isAdd || isHoverEdit && isAdd;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "lm_base_editTable_warpper"
   }, /*#__PURE__*/_react.default.createElement(_table.default, (0, _extends2.default)({}, config, {
@@ -573,15 +686,16 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     bordered: true,
     dataSource: dataSource
-  })), isEdit && isAdd && /*#__PURE__*/_react.default.createElement(_button.default, {
+  })), isShowAddAction && /*#__PURE__*/_react.default.createElement(_button.default, {
+    className: "lm_base_editTable_add_bar",
     type: "dashed",
     block: true,
     onClick: handleAdd,
     style: {
       marginTop: 8
     }
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "iconfont lmweb-plus"
+  }, /*#__PURE__*/_react.default.createElement(_icons.PlusCircleOutlined, {
+    className: "lm_base_editTable_add_icon"
   }), "\u65B0\u589E"));
 });
 var _default = EditTable;

package/es/EditTable/style/style.css

@@ -515,7 +515,169 @@ html {
 .lm_base_editTable_warpper .ant-table-cell:empty::before {
   content: '-';
 }
+.lm_base_editTable_warpper .ant-table-thead .ant-table-cell {
+  height: 40px;
+  padding: 10px 8px !important;
+  font-family: PingFangSC-Medium;
+  font-size: 12px;
+  line-height: 20px;
+  letter-spacing: 0em;
+  color: var(--color-85);
+}
+.lm_base_editTable_warpper .lm_base_editTable_cell {
+  cursor: pointer;
+  height: 40px;
+  padding: 8px 16px !important;
+  box-sizing: border-box;
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: var(--color-85);
+}
+.lm_base_editTable_warpper .lm_base_editTable_cell_edit {
+  height: 40px;
+  padding: 8px 8px !important;
+  box-sizing: border-box;
+}
+.lm_base_editTable_warpper .ant-form-item-control-input {
+  min-height: 24px;
+}
+.lm_base_editTable_warpper .ant-form-item-control-input .ant-input {
+  height: 24px;
+  padding-left: 7px;
+  padding-right: 7px;
+  box-sizing: border-box;
+}
+.lm_base_editTable_warpper .ant-form-item-control-input .ant-input-number-group-addon {
+  width: 22px !important;
+  max-width: 22px !important;
+  text-align: center !important;
+  padding: 0 !important;
+  font-size: 12px !important;
+  color: var(--color-85);
+}
+.lm_base_editTable_warpper .ant-input-number-in-form-item {
+  height: 24px;
+}
+.lm_base_editTable_warpper .ant-input-number-input-wrap {
+  position: relative;
+  height: 22px;
+}
+.lm_base_editTable_warpper .ant-input-number-input-wrap .ant-input-number-input {
+  height: 22px;
+  padding: 2px 8px;
+  padding-left: 7px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+}
+.lm_base_editTable_warpper .ant-select-selector {
+  height: 24px !important;
+  padding: 0 7px !important;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.lm_base_editTable_warpper .ant-select-selector .ant-select-selection-search {
+  left: 7px !important;
+  height: 100%;
+  overflow: hidden;
+}
+.lm_base_editTable_warpper .ant-select-selector .ant-select-selection-search .ant-select-selection-search-input {
+  height: 100% !important;
+}
+.lm_base_editTable_warpper .ant-select-selector .ant-select-selection-item {
+  line-height: 22px !important;
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-85);
+  overflow: hidden;
+}
+.lm_base_editTable_warpper .ant-select-selector::after {
+  line-height: 22px !important;
+}
+.lm_base_editTable_warpper .ant-picker {
+  height: 24px !important;
+  padding: 2px 8px;
+  padding-left: 7px;
+  box-sizing: border-box;
+}
+.lm_base_editTable_warpper .ant-input-number-input {
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-85);
+  line-height: 1;
+}
+.lm_base_editTable_warpper .ant-checkbox-group {
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-85);
+}
+.lm_base_editTable_warpper .ant-picker-input > input {
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-85);
+  line-height: 1;
+}
+.lm_base_editTable_warpper .ant-select-selection-placeholder {
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-25);
+  line-height: 22px !important;
+}
+.lm_base_editTable_warpper .ant-select-selection-search-mirror {
+  height: 18px;
+}
+.lm_base_editTable_warpper .ant-form-item-control-input-content {
+  height: 24px;
+}
+.lm_base_editTable_warpper .ant-select-selection-overflow {
+  height: 18px;
+  position: relative;
+  top: -1.5px;
+}
+.lm_base_editTable_warpper .ant-select-selection-overflow .ant-select-selection-item {
+  height: 18px;
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-85);
+  margin: 0;
+}
+.lm_base_editTable_warpper .ant-select-selection-overflow .ant-select-selection-item .ant-select-selection-item-content {
+  line-height: 16px;
+}
+.lm_base_editTable_warpper .ant-select-selection-overflow .ant-select-selection-item .ant-select-selection-item-remove {
+  line-height: 16px;
+}
+.lm_base_editTable_warpper .ant-select-selection-overflow .ant-select-selection-overflow-item-suffix {
+  height: 18px;
+}
+.lm_base_editTable_warpper .ant-checkbox-wrapper {
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-85);
+}
+.lm_base_editTable_warpper .ant-radio-wrapper {
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-85);
+}
 .lm_base_editTable_wrapperRange .inputRange {
   display: inline-flex;
   align-items: center;
 }
+.lm_base_editTable_add_bar {
+  height: 32px;
+  font-family: PingFangSC-Regular;
+  font-size: 12px;
+  color: var(--color-85);
+}
+.lm_base_editTable_add_bar span {
+  margin-left: 5px !important;
+}
+.lm_base_editTable_add_bar .lm_base_editTable_add_icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-85);
+  margin-left: 0 !important;
+}