ffr-components/es/table/LeadingCheckboxRenderer.js

Fiori styled UI components

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useRef } from 'react';
import { Checkbox } from '../dynamic-form';
import { connect } from './TableContext';
import classnames from 'classnames';
import { REF_TYPE } from './constant';
import { generateTableIndex } from './tableUtil';
export var SELECTION = 'selection';
export var isLeadingCheckbox = function isLeadingCheckbox(col) {
  return col[Symbol["for"](SELECTION)];
};
export var HeaderCheckbox = function HeaderCheckbox(_ref) {
  var col = _ref.col,
      className = _ref.className,
      spanProps = _ref.spanProps,
      selectionColumn = _ref.selectionColumn,
      tableContext = _ref.tableContext,
      handleMoveFocus = _ref.handleMoveFocus,
      fixed = _ref.fixed;
  var isSelectAll = tableContext.isSlectedAll();
  var classNames = classnames('ffr-checkbox-header', className);
  var handleChange = useRef(function (e, checked) {
    var onSelectAll = selectionColumn.onSelectAll;
    var changed = tableContext.updateSelectAll(checked);
    var recordsObj = tableContext.getSelectedRecords();

    if (onSelectAll) {
      onSelectAll(checked, Object.keys(recordsObj).map(function (k) {
        return recordsObj[k];
      }), changed);
    }
  });
  return React.createElement("th", _extends({
    key: col.key || col.attribute
  }, spanProps, {
    className: classNames,
    onKeyDown: handleMoveFocus,
    "data-index": generateTableIndex(REF_TYPE.header, fixed, 0, 0)
  }), React.createElement("div", null, React.createElement(Checkbox, {
    checked: isSelectAll,
    onChange: handleChange.current
  })));
};
export var CheckboxHeader = connect('selectionColumn', 'isSelectAll')(HeaderCheckbox);
export var CheckboxCell =
/*#__PURE__*/
function (_React$Component) {
  _inherits(CheckboxCell, _React$Component);

  function CheckboxCell() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, CheckboxCell);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(CheckboxCell)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.handleChange = function (e) {
      var _this$props = _this.props,
          rowData = _this$props.rowData,
          rowKey = _this$props.rowKey,
          selectionColumn = _this$props.selectionColumn,
          tableContext = _this$props.tableContext;
      var checked = e.target.checked;
      var onSelect = selectionColumn.onSelect;
      var selectedRecords = tableContext.updateSelectedRecords(rowData, checked, rowKey);

      if (onSelect) {
        onSelect(rowData, checked, Object.keys(selectedRecords).map(function (k) {
          return selectedRecords[k];
        }));
      }
    };

    return _this;
  }

  _createClass(CheckboxCell, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          isChecked = _this$props2.isChecked,
          _this$props2$disabled = _this$props2.disabled,
          disabled = _this$props2$disabled === void 0 ? false : _this$props2$disabled;
      return React.createElement("div", {
        className: "ffr-leading-check"
      }, React.createElement(Checkbox, {
        checked: isChecked,
        onChange: this.handleChange,
        disabled: disabled
      }));
    }
  }]);

  return CheckboxCell;
}(React.Component);
export var LeadingCheckbox = connect('selectionColumn')(CheckboxCell);