linkmore-design
Version:
🌈 🚀lm组件库。🚀
134 lines (131 loc) • 6.61 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
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 = ["record", "col", "rowKey", "children", "rowIndex", "colIndex", "onMouseDown", "onMouseOver", "isSelected", "selectIng", "onContextMenu", "onDoubleClick", "dataSourceChange"],
_excluded2 = ["onMouseEnter", "onMouseLeave"];
import React, { useRef, useState } from 'react';
import cls from 'classnames';
import { useUpdateEffect } from 'ahooks';
import { omit } from 'lodash';
import InputDataEdit from "./inputDataEdit";
var SheelTabelCell = function SheelTabelCell(props) {
var record = props.record,
col = props.col,
rowKey = props.rowKey,
children = props.children,
rowIndex = props.rowIndex,
colIndex = props.colIndex,
onMouseDown = props.onMouseDown,
onMouseOver = props.onMouseOver,
isSelected = props.isSelected,
selectIng = props.selectIng,
onContextMenu = props.onContextMenu,
onDoubleClick = props.onDoubleClick,
dataSourceChange = props.dataSourceChange,
restProps = _objectWithoutProperties(props, _excluded);
var onMouseEnter = restProps.onMouseEnter,
onMouseLeave = restProps.onMouseLeave,
clearProps = _objectWithoutProperties(restProps, _excluded2);
var _ref = (isSelected === null || isSelected === void 0 ? void 0 : isSelected(rowIndex, colIndex)) || {},
_ref$isSelected = _ref.isSelected,
_selected = _ref$isSelected === void 0 ? false : _ref$isSelected,
_ref$isEnd = _ref.isEnd,
isEnd = _ref$isEnd === void 0 ? false : _ref$isEnd,
_ref$isRightEnd = _ref.isRightEnd,
isRightEnd = _ref$isRightEnd === void 0 ? false : _ref$isRightEnd,
_ref$isEditing = _ref.isEditing,
isEditing = _ref$isEditing === void 0 ? false : _ref$isEditing,
_ref$isVaildCommit = _ref.isVaildCommit,
isVaildCommit = _ref$isVaildCommit === void 0 ? false : _ref$isVaildCommit,
_ref$selectedReadonly = _ref.selectedReadonly,
selectedReadonly = _ref$selectedReadonly === void 0 ? false : _ref$selectedReadonly;
var _useState = useState((record === null || record === void 0 ? void 0 : record[col === null || col === void 0 ? void 0 : col.dataIndex]) || ''),
_useState2 = _slicedToArray(_useState, 2),
value = _useState2[0],
setValue = _useState2[1];
var valueRef = useRef((record === null || record === void 0 ? void 0 : record[col === null || col === void 0 ? void 0 : col.dataIndex]) || '');
var endCellRef = useRef(null);
useUpdateEffect(function () {
valueRef.current = value;
}, [value]);
useUpdateEffect(function () {
if (value !== (record === null || record === void 0 ? void 0 : record[col === null || col === void 0 ? void 0 : col.dataIndex])) {
setValue(record === null || record === void 0 ? void 0 : record[col === null || col === void 0 ? void 0 : col.dataIndex]);
}
}, [record]);
/** 鼠标点击 */
var handleMouseDown = function handleMouseDown(e) {
if (e.button === 2) {
console.log('点击了右键');
} else if (!(col !== null && col !== void 0 && col.disableEvents)) {
var _endCellRef$current;
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(rowIndex, colIndex, e, !!(endCellRef !== null && endCellRef !== void 0 && (_endCellRef$current = endCellRef.current) !== null && _endCellRef$current !== void 0 && _endCellRef$current.contains(e.target)));
}
};
/** 鼠标右键 */
var handleContextMenu = function handleContextMenu(e) {
if (col && !col.disableEvents) {
onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(e, rowIndex, colIndex);
}
};
/** 鼠标松开 */
var handleMouseOver = function handleMouseOver(e) {
if (!(col !== null && col !== void 0 && col.disableEvents)) {
onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(rowIndex, colIndex);
}
};
/** 双击 */
var handleDoubleClick = function handleDoubleClick(e) {
/** 当行数据中带内部关键词_group时，认为当前双击的是分组行，不允许进行编辑 */
if (!(col !== null && col !== void 0 && col.disableEvents) && !(record !== null && record !== void 0 && record._group)) {
onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(rowIndex, colIndex, col);
}
};
var renderComponent = function renderComponent() {
var _ref2 = col || {},
component = _ref2.component,
readOnly = _ref2.readOnly;
if (isEditing && !readOnly) {
return component || null;
}
return null;
};
var saveRenderValue = function saveRenderValue() {
if (valueRef.current !== (record === null || record === void 0 ? void 0 : record[col === null || col === void 0 ? void 0 : col.dataIndex])) {
dataSourceChange === null || dataSourceChange === void 0 ? void 0 : dataSourceChange(rowIndex, colIndex, valueRef.current, _objectSpread(_objectSpread({}, record), {}, _defineProperty({}, col.dataIndex, valueRef.current)));
}
};
var renderEditor = function renderEditor() {
if (isEditing) {
var Editor = (col === null || col === void 0 ? void 0 : col.dataEditor) || InputDataEdit;
return /*#__PURE__*/React.createElement(Editor, {
cell: col,
row: rowIndex,
col: colIndex,
value: value,
onChange: function onChange(value) {
setValue(value);
},
handleSave: saveRenderValue
});
}
return null;
};
var renderViewer = children;
var content = renderComponent() || renderEditor() || renderViewer;
return /*#__PURE__*/React.createElement("td", _extends({}, omit(clearProps, ['commitIng', 'editIng']), {
// style={{ userSelect: 'none' }}
className: cls(colIndex === undefined && 'row_selection_td', 'unselection', _selected && selectIng && 'selected', isEnd && 'end', isRightEnd && 'right_end', isEditing && 'editing', isVaildCommit && 'commiting', selectedReadonly && 'readonly_red'),
onMouseDown: handleMouseDown,
onMouseOver: handleMouseOver,
onContextMenu: handleContextMenu,
onDoubleClick: handleDoubleClick,
key: "".concat(rowIndex, "_").concat(colIndex)
}), content, isRightEnd && isEnd && !isEditing && /*#__PURE__*/React.createElement("div", {
ref: endCellRef,
className: "lmtable_cell_end_icon"
}));
};
export default SheelTabelCell;