2019-12-13 12:22:29 +00:00
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import React from "react";
|
2019-08-20 13:07:30 +00:00
|
|
|
|
2021-02-09 13:13:52 +00:00
|
|
|
import Checkbox from "../checkbox";
|
|
|
|
import ContextMenuButton from "../context-menu-button";
|
2021-10-29 08:30:00 +00:00
|
|
|
import NewContextMenu from "../new-context-menu";
|
2021-02-09 13:13:52 +00:00
|
|
|
import {
|
|
|
|
StyledOptionButton,
|
|
|
|
StyledContentElement,
|
|
|
|
StyledElement,
|
|
|
|
StyledCheckbox,
|
|
|
|
StyledContent,
|
|
|
|
StyledRow,
|
|
|
|
} from "./styled-row";
|
2019-11-15 09:18:35 +00:00
|
|
|
|
|
|
|
class Row extends React.Component {
|
2020-10-09 14:07:35 +00:00
|
|
|
constructor(props) {
|
2020-09-01 12:17:59 +00:00
|
|
|
super(props);
|
|
|
|
|
2021-04-01 10:22:37 +00:00
|
|
|
this.cm = React.createRef();
|
2021-04-02 14:31:36 +00:00
|
|
|
this.row = React.createRef();
|
2020-09-01 12:17:59 +00:00
|
|
|
}
|
2020-07-31 08:08:33 +00:00
|
|
|
|
2019-11-15 09:18:35 +00:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
checked,
|
|
|
|
children,
|
2020-10-09 14:07:35 +00:00
|
|
|
contentElement,
|
2020-03-30 07:23:26 +00:00
|
|
|
contextButtonSpacerWidth,
|
2019-11-15 09:18:35 +00:00
|
|
|
contextOptions,
|
2020-03-30 07:23:26 +00:00
|
|
|
data,
|
|
|
|
element,
|
2020-05-08 13:25:38 +00:00
|
|
|
indeterminate,
|
2020-03-30 07:23:26 +00:00
|
|
|
onSelect,
|
2021-03-19 15:07:16 +00:00
|
|
|
rowContextClick,
|
2020-10-30 11:21:27 +00:00
|
|
|
sectionWidth,
|
2019-11-15 09:18:35 +00:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
const renderCheckbox = Object.prototype.hasOwnProperty.call(
|
|
|
|
this.props,
|
|
|
|
"checked"
|
|
|
|
);
|
|
|
|
|
|
|
|
const renderElement = Object.prototype.hasOwnProperty.call(
|
|
|
|
this.props,
|
|
|
|
"element"
|
|
|
|
);
|
|
|
|
|
2020-10-09 14:07:35 +00:00
|
|
|
const renderContentElement =
|
|
|
|
Object.prototype.hasOwnProperty.call(this.props, "contentElement") &&
|
2020-10-30 11:21:27 +00:00
|
|
|
sectionWidth > 500;
|
2020-10-09 14:07:35 +00:00
|
|
|
|
2019-11-15 09:18:35 +00:00
|
|
|
const renderContext =
|
|
|
|
Object.prototype.hasOwnProperty.call(this.props, "contextOptions") &&
|
|
|
|
contextOptions.length > 0;
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const changeCheckbox = (e) => {
|
2019-11-15 09:18:35 +00:00
|
|
|
onSelect && onSelect(e.target.checked, data);
|
|
|
|
};
|
|
|
|
|
2021-03-19 14:33:58 +00:00
|
|
|
const getOptions = () => {
|
2021-03-19 15:07:16 +00:00
|
|
|
rowContextClick && rowContextClick();
|
2021-03-19 14:33:58 +00:00
|
|
|
return contextOptions;
|
|
|
|
};
|
2019-11-15 09:18:35 +00:00
|
|
|
|
2021-04-01 10:22:37 +00:00
|
|
|
const onContextMenu = (e) => {
|
|
|
|
rowContextClick && rowContextClick();
|
2021-04-02 14:31:36 +00:00
|
|
|
if (!this.cm.current.menuRef.current) {
|
|
|
|
this.row.current.click(e); //TODO: need fix context menu to global
|
|
|
|
}
|
2021-04-01 10:22:37 +00:00
|
|
|
this.cm.current.show(e);
|
|
|
|
};
|
|
|
|
|
2021-11-01 08:10:07 +00:00
|
|
|
let contextMenuHeader = {};
|
|
|
|
if (children.props.item) {
|
|
|
|
contextMenuHeader = {
|
|
|
|
icon: children.props.item.icon,
|
|
|
|
title: children.props.item.title,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2021-05-11 11:54:30 +00:00
|
|
|
const { onRowClick, ...rest } = this.props;
|
|
|
|
|
2019-11-15 09:18:35 +00:00
|
|
|
return (
|
2021-05-11 11:54:30 +00:00
|
|
|
<StyledRow ref={this.row} {...rest} onContextMenu={onContextMenu}>
|
2019-11-15 09:18:35 +00:00
|
|
|
{renderCheckbox && (
|
2021-05-27 10:27:08 +00:00
|
|
|
<StyledCheckbox className="not-selectable">
|
2020-10-16 13:16:01 +00:00
|
|
|
<Checkbox
|
2021-05-27 10:27:08 +00:00
|
|
|
className="checkbox"
|
2020-10-16 13:16:01 +00:00
|
|
|
isChecked={checked}
|
|
|
|
isIndeterminate={indeterminate}
|
|
|
|
onChange={changeCheckbox}
|
|
|
|
/>
|
2019-11-15 09:18:35 +00:00
|
|
|
</StyledCheckbox>
|
|
|
|
)}
|
2020-10-26 12:40:49 +00:00
|
|
|
{renderElement && (
|
2021-05-11 11:54:30 +00:00
|
|
|
<StyledElement onClick={onRowClick} className="styled-element">
|
|
|
|
{element}
|
|
|
|
</StyledElement>
|
2020-10-26 12:40:49 +00:00
|
|
|
)}
|
2021-05-11 11:54:30 +00:00
|
|
|
<StyledContent onClick={onRowClick} className="row_content">
|
|
|
|
{children}
|
|
|
|
</StyledContent>
|
2020-10-16 13:16:01 +00:00
|
|
|
<StyledOptionButton
|
|
|
|
className="row_context-menu-wrapper"
|
|
|
|
spacerWidth={contextButtonSpacerWidth}
|
|
|
|
>
|
|
|
|
{renderContentElement && (
|
2021-03-12 08:48:57 +00:00
|
|
|
<StyledContentElement>{contentElement}</StyledContentElement>
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
|
|
|
{renderContext ? (
|
|
|
|
<ContextMenuButton
|
|
|
|
color="#A3A9AE"
|
|
|
|
hoverColor="#657077"
|
|
|
|
className="expandButton"
|
|
|
|
getData={getOptions}
|
2021-03-18 15:54:33 +00:00
|
|
|
directionX="right"
|
2021-04-23 14:58:06 +00:00
|
|
|
isNew={true}
|
|
|
|
onClick={onContextMenu}
|
2020-10-16 13:16:01 +00:00
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<div className="expandButton"> </div>
|
|
|
|
)}
|
2021-11-01 08:10:07 +00:00
|
|
|
<NewContextMenu
|
|
|
|
model={contextOptions}
|
|
|
|
ref={this.cm}
|
|
|
|
header={contextMenuHeader}
|
|
|
|
></NewContextMenu>
|
2019-11-15 09:18:35 +00:00
|
|
|
</StyledOptionButton>
|
|
|
|
</StyledRow>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-08-20 13:07:30 +00:00
|
|
|
|
|
|
|
Row.propTypes = {
|
2021-03-10 10:02:57 +00:00
|
|
|
/** Required to host the Checkbox component. Its location is fixed and it is always the first.
|
|
|
|
* If there is no value, the occupied space is distributed among the other child elements. */
|
2019-08-20 13:07:30 +00:00
|
|
|
checked: PropTypes.bool,
|
|
|
|
children: PropTypes.element,
|
2021-03-10 10:02:57 +00:00
|
|
|
/** Accepts class */
|
2019-12-03 12:50:11 +00:00
|
|
|
className: PropTypes.string,
|
2020-10-30 11:21:27 +00:00
|
|
|
contentElement: PropTypes.any,
|
2021-03-10 10:02:57 +00:00
|
|
|
/** Required for the width task of the ContextMenuButton component. */
|
2020-03-30 07:23:26 +00:00
|
|
|
contextButtonSpacerWidth: PropTypes.string,
|
2021-03-10 10:02:57 +00:00
|
|
|
/** Required to host the ContextMenuButton component. It is always located near the right border of the container,
|
|
|
|
* regardless of the contents of the child elements. If there is no value, the occupied space is distributed among the other child elements. */
|
2019-12-13 12:22:29 +00:00
|
|
|
contextOptions: PropTypes.array,
|
2021-03-10 10:02:57 +00:00
|
|
|
/** Current row item information. */
|
2019-12-13 12:22:29 +00:00
|
|
|
data: PropTypes.object,
|
2021-03-10 10:02:57 +00:00
|
|
|
/** Required to host some component. It has a fixed order of location, if the Checkbox component is specified,
|
|
|
|
* then it follows, otherwise it occupies the first position. If there is no value, the occupied space is distributed among the other child elements. */
|
2019-12-13 12:22:29 +00:00
|
|
|
element: PropTypes.element,
|
2021-03-10 10:02:57 +00:00
|
|
|
/** Accepts id */
|
2019-12-03 12:50:11 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-12 12:40:21 +00:00
|
|
|
/** If true, this state is shown as a rectangle in the checkbox */
|
2020-05-08 13:25:38 +00:00
|
|
|
indeterminate: PropTypes.bool,
|
2021-03-10 10:02:57 +00:00
|
|
|
/** when selecting row element. Returns data value. */
|
2019-12-13 12:22:29 +00:00
|
|
|
onSelect: PropTypes.func,
|
2021-05-11 11:54:30 +00:00
|
|
|
/** On click anywhere in the row, except the checkbox and context menu */
|
|
|
|
onRowClick: PropTypes.func,
|
2021-03-19 15:07:16 +00:00
|
|
|
rowContextClick: PropTypes.func,
|
2021-03-10 10:02:57 +00:00
|
|
|
/** Accepts css style */
|
2020-10-09 14:07:35 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2020-10-30 11:21:27 +00:00
|
|
|
sectionWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
2019-08-20 13:07:30 +00:00
|
|
|
};
|
|
|
|
|
2020-03-30 07:23:26 +00:00
|
|
|
Row.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
contextButtonSpacerWidth: "26px",
|
2020-03-30 07:23:26 +00:00
|
|
|
};
|
|
|
|
|
2019-11-15 09:18:35 +00:00
|
|
|
export default Row;
|