linkmore-design
Version:
🌈 🚀lm组件库。🚀
136 lines (132 loc) • 4.27 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _ahooks = require("ahooks");
var _lodash = require("lodash");
var _inputDataEdit = _interopRequireDefault(require("./inputDataEdit"));
const SheelTabelCell = props => {
const {
record,
col,
rowKey,
children,
rowIndex,
colIndex,
onMouseDown,
onMouseOver,
isSelected,
selectIng,
onContextMenu,
onDoubleClick,
dataSourceChange,
...restProps
} = props;
const {
onMouseEnter,
onMouseLeave,
...clearProps
} = restProps;
const {
isSelected: _selected = false,
isEnd = false,
isRightEnd = false,
isEditing = false,
isVaildCommit = false,
selectedReadonly = false
} = isSelected?.(rowIndex, colIndex) || {};
const [value, setValue] = (0, _react.useState)(record?.[col?.dataIndex] || '');
const valueRef = (0, _react.useRef)(record?.[col?.dataIndex] || '');
const endCellRef = (0, _react.useRef)(null);
(0, _ahooks.useUpdateEffect)(() => {
valueRef.current = value;
}, [value]);
(0, _ahooks.useUpdateEffect)(() => {
if (value !== record?.[col?.dataIndex]) {
setValue(record?.[col?.dataIndex]);
}
}, [record]);
/** 鼠标点击 */
const handleMouseDown = e => {
if (e.button === 2) {
console.log('点击了右键');
} else if (!col?.disableEvents) {
onMouseDown?.(rowIndex, colIndex, e, !!endCellRef?.current?.contains(e.target));
}
};
/** 鼠标右键 */
const handleContextMenu = e => {
if (col && !col.disableEvents) {
onContextMenu?.(e, rowIndex, colIndex);
}
};
/** 鼠标松开 */
const handleMouseOver = e => {
if (!col?.disableEvents) {
onMouseOver?.(rowIndex, colIndex);
}
};
/** 双击 */
const handleDoubleClick = e => {
/** 当行数据中带内部关键词_group时，认为当前双击的是分组行，不允许进行编辑 */
if (!col?.disableEvents && !record?._group) {
onDoubleClick?.(rowIndex, colIndex, col);
}
};
const renderComponent = () => {
const {
component,
readOnly
} = col || {};
if (isEditing && !readOnly) {
return component || null;
}
return null;
};
const saveRenderValue = () => {
if (valueRef.current !== record?.[col?.dataIndex]) {
dataSourceChange?.(rowIndex, colIndex, valueRef.current, {
...record,
[col.dataIndex]: valueRef.current
});
}
};
const renderEditor = () => {
if (isEditing) {
const Editor = col?.dataEditor || _inputDataEdit.default;
return /*#__PURE__*/_react.default.createElement(Editor, {
cell: col,
row: rowIndex,
col: colIndex,
value: value,
onChange: value => {
setValue(value);
},
handleSave: saveRenderValue
});
}
return null;
};
const renderViewer = children;
const content = renderComponent() || renderEditor() || renderViewer;
return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({}, (0, _lodash.omit)(clearProps, ['commitIng', 'editIng']), {
// style={{ userSelect: 'none' }}
className: (0, _classnames.default)(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: `${rowIndex}_${colIndex}`
}), content, isRightEnd && isEnd && !isEditing && /*#__PURE__*/_react.default.createElement("div", {
ref: endCellRef,
className: "lmtable_cell_end_icon"
}));
};
var _default = SheelTabelCell;
exports.default = _default;