76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import * as React from "react";
|
|
import { IBaseColumnProps } from "./IBaseColumnProps";
|
|
import ColumnUtils from "./ColumnUtils";
|
|
import IGetColumnPropsArgs from "./IGetColumnPropsArgs";
|
|
import { IColumn } from "./IColumn";
|
|
import DataCell from "../datacell/DataCell";
|
|
import { Checkbox } from "antd";
|
|
import { CheckboxChangeEvent } from "antd/lib/checkbox/Checkbox";
|
|
import CheckCircleIcon from "../icon/CheckCircleIcon";
|
|
|
|
export interface ICheckboxColumnProps extends IBaseColumnProps {
|
|
|
|
}
|
|
|
|
/**
|
|
* @beta
|
|
*/
|
|
const CheckboxColumn: React.FC<ICheckboxColumnProps> & IColumn = (props: ICheckboxColumnProps) => {
|
|
// Note this class is only for intellisense with typescript.
|
|
// The column component for a datagrid is never rendered. It is only used to propagate props.
|
|
// Component lifecycle and constructor will never be called.
|
|
// Don't put any logic here. It will never be called.
|
|
|
|
// In case you didn't read above, DO NOT PUT ANY LOGIC HERE.
|
|
return null;
|
|
}
|
|
|
|
CheckboxColumn.className = "CheckboxColumn";
|
|
|
|
CheckboxColumn.getColumnProps = (args: IGetColumnPropsArgs) => {
|
|
const { props, onCellEditChange, rowDataKeyField } = args;
|
|
let { align = "center", width, isCellEditable, editable, ...validProps } = props as ICheckboxColumnProps;
|
|
|
|
validProps.className = ("p-datatable-checkbox-cell " + (validProps.className || "")).trim();
|
|
|
|
if (validProps.body == null) {
|
|
validProps.body = (args: any, columnInfo: any) => {
|
|
const cellArgs = ColumnUtils.getCellArgs(rowDataKeyField, args, columnInfo || props);
|
|
const value = cellArgs.rowData[cellArgs.field];
|
|
let isEditable = editable;
|
|
if (isCellEditable != null) {
|
|
isEditable = isCellEditable(cellArgs);
|
|
}
|
|
if (isEditable) {
|
|
return <Checkbox key={cellArgs.cellKey + "_checkbox"}
|
|
checked={value === true}
|
|
onChange={(e: CheckboxChangeEvent) => onCellEditChange(cellArgs, e.target.checked)}></Checkbox>;
|
|
} else {
|
|
return value === true ? <CheckCircleIcon /> : null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// remove sorting on editable columns (at least until this is solved: https://github.com/primefaces/primereact/issues/1257)
|
|
if (editable || isCellEditable != null) {
|
|
validProps.sortable = false;
|
|
}
|
|
|
|
// don't allow custom editor since if editable is true, a checkbox is already rendered for every row
|
|
validProps.editor = undefined;
|
|
|
|
// handle filter
|
|
if (validProps.filter) {
|
|
validProps.filterMatchMode = validProps.filterMatchMode || "contains";
|
|
}
|
|
|
|
validProps.style = Object.assign({}, validProps.style, {
|
|
textAlign: align,
|
|
width: width
|
|
});
|
|
|
|
return validProps;
|
|
}
|
|
|
|
|
|
export default CheckboxColumn; |