fe-fabric-react 0.0.1-security → 2.864.3

package/lib/fe-table/FeTable.js

@@ -0,0 +1,703 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _core = require("../core");
+
+var _utils = require("../core/utils");
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+
+          if (desc.get || desc.set) {
+            Object.defineProperty(newObj, key, desc);
+          } else {
+            newObj[key] = obj[key];
+          }
+        }
+      }
+    }
+
+    newObj.default = obj;
+    return newObj;
+  }
+}
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+var FeTable =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(FeTable, _Component);
+
+  function FeTable(props) {
+    var _this;
+
+    _classCallCheck(this, FeTable);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FeTable).call(this, props));
+    _this.state = {
+      sequence: _this.getHeaderItemSequence(),
+      dragIndex: null,
+      dragStart: false,
+      dragColumnOffset: null,
+      pageXstart: null,
+      columnOffsets: null,
+      checkedIndexes: [],
+      checkAll: false
+    };
+    _this.onActionItemClick = _this.onActionItemClick.bind(_assertThisInitialized(_this));
+    _this.onToggleActionDropdown = _this.onToggleActionDropdown.bind(_assertThisInitialized(_this));
+    _this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this));
+    _this.onDrag = _this.onDrag.bind(_assertThisInitialized(_this));
+    _this.onDragEnd = _this.onDragEnd.bind(_assertThisInitialized(_this));
+    _this.handleCheckAll = _this.handleCheckAll.bind(_assertThisInitialized(_this));
+    _this.changeChecked = _this.changeChecked.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(FeTable, [{
+    key: "onActionItemClick",
+    value: function onActionItemClick(event) {
+      if (this.props.actions[event.itemIndex]['onClick']) {
+        this.props.actions[event.itemIndex]['onClick'](this.props.data[event.otherProps.index]);
+      }
+    }
+  }, {
+    key: "onToggleActionDropdown",
+    value: function onToggleActionDropdown(event) {
+      if (event.isOpen) {
+        var previousCell = this.tableNode.querySelector('.fe-table__cell.fe-table__cell--options.zi-1');
+        previousCell && previousCell.classList.remove('zi-1');
+        var cell = event.originalEvent.currentTarget.parentElement.parentElement.parentElement;
+        cell.classList.add('zi-1');
+      }
+    }
+  }, {
+    key: "getHeaderItemSequence",
+    value: function getHeaderItemSequence() {
+      var sequence = [];
+      this.props.tableHeaders.forEach(function (item) {
+        if (item.name) {
+          sequence.push({
+            name: item.name
+          });
+        }
+      });
+      return sequence;
+    }
+  }, {
+    key: "onDragStart",
+    value: function onDragStart(event) {
+      event.preventDefault();
+      this.columnDragNode.style.width = event.currentTarget.parentNode.clientWidth + 1 + 'px';
+      this.columnDragNode.style.opacity = 1;
+      this.columnDragNode.style.left = event.currentTarget.parentNode.offsetLeft + 'px';
+      var columnOffsets = [];
+      var nodes = this.tableNode.querySelectorAll('.fe-table__header-cell[name]');
+      var dragIndex = null;
+      nodes.forEach(function (node, i) {
+        if (node.offsetLeft === event.currentTarget.parentNode.offsetLeft) {
+          dragIndex = i;
+        }
+
+        columnOffsets.push({
+          'name': node.getAttribute('name'),
+          'width': node.clientWidth,
+          'offset': node.offsetLeft
+        });
+      });
+      this.setState({
+        dragIndex: dragIndex,
+        dragStart: true,
+        dragColumnOffset: event.currentTarget.parentNode.offsetLeft,
+        pageXstart: event.pageX,
+        columnOffsets: columnOffsets
+      });
+    }
+  }, {
+    key: "onDrag",
+    value: function onDrag(event) {
+      event.preventDefault();
+      var left = this.state.dragColumnOffset + (event.pageX - this.state.pageXstart);
+      var clientWidth = event.currentTarget.clientWidth;
+      var tableWidth = this.state.columnOffsets[this.state.columnOffsets.length - 1]['offset'] + this.state.columnOffsets[this.state.columnOffsets.length - 1]['width'];
+
+      if (left < 0) {
+        left = 0;
+      }
+
+      if (left + clientWidth > tableWidth) {
+        left = tableWidth - clientWidth;
+      }
+
+      var index = (0, _utils.findLastIndex)(this.state.columnOffsets, function (column) {
+        return left + clientWidth >= column.offset;
+      });
+      var lineHighlightLeft = index > -1 ? this.state.columnOffsets[index]['offset'] : null;
+      this.columnDragNode.style.transform = "translateX(".concat(left - this.state.dragColumnOffset, "px)");
+
+      if (lineHighlightLeft) {
+        this.lineDragNode.style.left = lineHighlightLeft + 'px';
+        this.lineDragNode.style.opacity = 1;
+      }
+    }
+  }, {
+    key: "onDragEnd",
+    value: function onDragEnd(event) {
+      var _this2 = this;
+
+      event.preventDefault();
+      var _this$state = this.state,
+          dragIndex = _this$state.dragIndex,
+          columnOffsets = _this$state.columnOffsets,
+          sequence = _this$state.sequence;
+      var dropIndex = this.lineDragNode.style.opacity && columnOffsets.findIndex(function (item) {
+        return item.offset === _this2.lineDragNode.offsetLeft;
+      }) || dragIndex;
+
+      if (dropIndex !== -1 && !(dropIndex === dragIndex || dropIndex - 1 === dragIndex)) {
+        //change header sequence
+        var item = sequence[dragIndex];
+        sequence.splice(dragIndex, 1);
+
+        if (dragIndex <= dropIndex) {
+          sequence.splice(dropIndex - 1, 0, item);
+        } else {
+          sequence.splice(dropIndex, 0, item);
+        }
+      }
+
+      this.columnDragNode.style.width = 0 + 'px';
+      this.columnDragNode.style.transform = 'translateX(0px)';
+      this.columnDragNode.style.opacity = 0;
+      this.columnDragNode.style.left = 0 + 'px';
+      this.lineDragNode.style.left = 0 + 'px';
+      this.lineDragNode.style.opacity = 0;
+      this.setState({
+        sequence: sequence,
+        dragIndex: null,
+        dragStart: false,
+        dragColumnOffset: null,
+        pageXstart: null,
+        columnOffsets: null
+      });
+    }
+  }, {
+    key: "handleCheckAll",
+    value: function handleCheckAll(event) {
+      var _this3 = this;
+
+      var checked = event.target.checked;
+      var checkedIndexes = [];
+      var records = [];
+
+      if (checked) {
+        this.props.data.forEach(function (record, index) {
+          if (!_this3.props.selectConfig(record)) {
+            checkedIndexes.push("".concat(index));
+            records.push(record);
+          }
+        });
+        this.setState({
+          checkAll: true
+        });
+      } else {
+        this.setState({
+          checkAll: false
+        });
+      }
+
+      this.setState({
+        checkedIndexes: checkedIndexes
+      });
+
+      if (this.props.onSelectedChange) {
+        this.props.onSelectedChange({
+          records: records,
+          isSelectAll: true,
+          event: event
+        });
+      }
+    }
+  }, {
+    key: "changeChecked",
+    value: function changeChecked(event) {
+      var _this4 = this;
+
+      var checked = event.target.checked;
+      var checkedIndexes = this.state.checkedIndexes;
+
+      if (checked) {
+        checkedIndexes.push(event.target.value);
+      } else {
+        var checkedIndex = checkedIndexes.indexOf(event.target.value);
+        checkedIndexes.splice(checkedIndex, 1);
+        this.setState({
+          checkAll: false
+        });
+      }
+
+      this.setState({
+        checkedIndexes: checkedIndexes
+      });
+
+      if (this.props.onSelectedChange) {
+        var records = [];
+        this.state.checkedIndexes.forEach(function (index) {
+          records.push(_this4.props.data[index]);
+        });
+        this.props.onSelectedChange({
+          records: records,
+          event: event
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+      /** Minimum condition required to render*/
+
+      /** Rendering of component */
+
+
+      var className = (0, _classnames.default)('fe-table', {
+        'fe-table--sticky-options': this.props.config.stickyAction && this.props.actions.length
+      }, this.props.className);
+      var headers;
+
+      if (this.state.sequence && this.state.sequence.length) {
+        headers = [];
+        this.state.sequence.forEach(function (_ref) {
+          var name = _ref.name;
+
+          var item = _this5.props.tableHeaders.find(function (header) {
+            return header.name === name;
+          });
+
+          headers.push(item);
+        });
+      } else {
+        headers = Object.assign([], this.props.tableHeaders);
+      }
+
+      return _react.default.createElement("div", {
+        className: className,
+        ref: function ref(node) {
+          return _this5.tableNode = node;
+        },
+        role: "table"
+      }, _react.default.createElement(FeTableHeader, _extends({
+        headers: headers,
+        tableHeaders: this.props.tableHeaders,
+        sortBy: this.props.sortBy,
+        sortOrder: this.props.sortOrder,
+        filterApplied: this.props.filterApplied,
+        onSortChange: this.props.onSortChange,
+        onFilterChange: this.props.onFilterChange,
+        onDragStart: this.onDragStart,
+        onSelectAll: this.handleCheckAll,
+        checkAll: this.state.checkAll,
+        dragIndex: this.state.dragIndex
+      }, this.props.config)), _react.default.createElement(FeTableBody, _extends({
+        headers: headers,
+        tableHeaders: this.props.tableHeaders,
+        data: this.props.data,
+        actions: this.props.actions,
+        selectConfig: this.props.selectConfig,
+        dragIndex: this.state.dragIndex,
+        changeChecked: this.changeChecked,
+        checkedIndexes: this.state.checkedIndexes
+      }, this.props.config, {
+        onActionItemClick: this.onActionItemClick,
+        onToggleActionDropdown: this.props.config.stickyAction ? this.onToggleActionDropdown : null
+      })), this.props.config.columnDrag && _react.default.createElement(_react.Fragment, null, _react.default.createElement("div", {
+        className: "fe-table__dragged ".concat(!this.state.dragStart ? 'hide' : ''),
+        onMouseMove: this.onDrag,
+        onMouseUp: this.onDragEnd,
+        ref: function ref(node) {
+          return _this5.columnDragNode = node;
+        }
+      }), _react.default.createElement("div", {
+        className: "fe-table__droppable-highlight ".concat(!this.state.dragStart ? 'hide' : ''),
+        ref: function ref(node) {
+          return _this5.lineDragNode = node;
+        }
+      })));
+    }
+  }]);
+
+  return FeTable;
+}(_react.Component);
+
+var FeTableHeader = function FeTableHeader(props) {
+  return _react.default.createElement("div", {
+    className: "fe-table__thead",
+    role: "rowgroup"
+  }, _react.default.createElement(_core.FeTableRow, null, props.selectColumn && _react.default.createElement(SelectCell, {
+    isHeader: true,
+    value: "value",
+    onSelectAll: props.onSelectAll,
+    checked: props.checkAll,
+    disabled: !props.withSelectAll
+  }), props.headers.map(function (item, i) {
+    var className = (0, _classnames.default)(item.className, {
+      'fe-table__header-cell--selected': props.dragIndex !== null && props.dragIndex === i
+    });
+    var filterValue = props.filterApplied && props.filterApplied[item.name] !== undefined && "".concat(props.filterApplied[item.name]) || '';
+    return _react.default.createElement(_core.FeTableHeaderCell, _extends({
+      key: i
+    }, item, {
+      className: className,
+      isDraggable: props.columnDrag && item.isDraggable !== false ? true : false,
+      isSortable: props.columnSort && item.isSortable !== false ? true : false,
+      withFilter: props.withFilter && item.withFilter !== false ? true : false,
+      sortBy: props.sortBy,
+      sortOrder: props.sortOrder,
+      filterValue: filterValue,
+      onSortChange: props.onSortChange,
+      onFilterChange: props.onFilterChange,
+      onDragStart: props.onDragStart
+    }));
+  }), props.actionColumn && _react.default.createElement(_core.FeTableHeaderCell, {
+    className: "fe-table__header-cell--options",
+    label: props.actionColumnLabel,
+    isDraggable: false,
+    isSortable: false,
+    withFilter: false
+  })));
+};
+
+var FeTableBody = function FeTableBody(props) {
+  return _react.default.createElement("div", {
+    className: "fe-table__tbody",
+    role: "rowgroup"
+  }, props.data.map(function (record, key) {
+    return _react.default.createElement(_core.FeTableRow, {
+      key: key
+    }, props.selectColumn && _react.default.createElement(SelectCell, {
+      value: "".concat(key),
+      changeChecked: props.changeChecked,
+      disabled: props.selectConfig(record),
+      checked: props.checked || props.checkedIndexes.includes("".concat(key))
+    }), props.headers.map(function (item, i) {
+      var className = (0, _classnames.default)({
+        'fe-table__cell--selected': props.dragIndex !== null && props.dragIndex === i
+      });
+
+      if (item.render) {
+        return _react.default.createElement(_core.FeTableCell, {
+          key: i,
+          className: className,
+          columnClass: item.columnClass
+        }, item.render(record));
+      }
+
+      return _react.default.createElement(_core.FeTableCell, {
+        key: i,
+        className: className,
+        columnClass: item.columnClass
+      }, record[item.name]);
+    }), props.actionColumn && _react.default.createElement(ActionsCell, {
+      stickyAction: props.stickyAction,
+      actions: props.actions,
+      record: record,
+      index: "".concat(key),
+      onActionItemClick: props.onActionItemClick,
+      onToggleActionDropdown: props.onToggleActionDropdown
+    }));
+  }));
+};
+
+var ActionsCell = function ActionsCell(props) {
+  var actions = props.actions,
+      record = props.record;
+  var list = [];
+  actions.forEach(function (action) {
+    var disabled = false;
+    var actionItem = Object.assign({}, action);
+
+    if (action.isDisabled) {
+      disabled = action.isDisabled(record);
+    }
+
+    if (disabled) {
+      actionItem.disabled = true;
+    }
+
+    delete actionItem.onClick;
+    delete actionItem.isDisabled;
+    list.push(actionItem);
+  });
+  return _react.default.createElement(_core.FeTableCell, {
+    className: "fe-table__cell--options"
+  }, _react.default.createElement("div", null, _react.default.createElement(_core.FeDropdown, {
+    buttonStyle: "cog",
+    position: "bottom-right",
+    list: list,
+    index: props.index,
+    onItemClick: props.onActionItemClick,
+    onToggleDropdown: props.onToggleActionDropdown
+  })));
+};
+
+var SelectCell = function SelectCell(props) {
+  if (props.isHeader) {
+    return _react.default.createElement(_core.FeTableHeaderCell, {
+      className: "fe-table__header-cell--select",
+      isDraggable: false,
+      isSortable: false,
+      withFilter: false
+    }, _react.default.createElement(_core.FeCheckbox, {
+      name: "select",
+      value: props.value,
+      checked: props.checked,
+      onChange: props.onSelectAll,
+      disabled: props.disabled
+    }));
+  } else {
+    return _react.default.createElement(_core.FeTableCell, {
+      className: "fe-table__cell--select"
+    }, _react.default.createElement(_core.FeCheckbox, {
+      name: "select",
+      value: props.value,
+      disabled: props.disabled,
+      checked: props.checked,
+      onChange: props.changeChecked
+    }));
+  }
+};
+
+FeTable.defaultProps = {
+  config: {
+    id: null,
+    columnDrag: false,
+    columnSort: false,
+    withFilter: false,
+    actionColumn: false,
+    withSelectAll: false,
+    selectColumn: false,
+    stickyAction: false,
+    actionColumnLabel: 'Options'
+  },
+  tableHeaders: [],
+  actions: [],
+  data: [],
+  selectConfig: null,
+  sortBy: null,
+  sortOrder: null,
+  filterApplied: null,
+  onSortChange: null,
+  onFilterChange: null,
+  onSelectedChange: null
+};
+FeTable.propTypes = {
+  /** Provide table configs
+  config: {
+    id: null,
+    columnDrag: false,
+    columnSort: false,
+    withFilter: false,
+    actionColumn: false,
+    stickyAction: false,
+    actionColumnLabel: 'Options'
+  }
+  */
+  config: _propTypes.default.object,
+
+  /** Provide table header configs
+  tableHeaders: [
+    {
+      name: 'id',
+      label: 'ID',
+      columnClass: 'dummy__grid-class-1',
+      isDraggable: true,
+      isSortable: true,
+      withFilter: true,
+      render: (item) => {
+        return <b>Dummy template</b>
+      }
+    }
+  ]
+  */
+  tableHeaders: _propTypes.default.array,
+
+  /** Provide action handlers
+  actions: [
+    {
+      label: 'Edit',
+      isDisabled: (item) => {
+        return false;
+      },
+      onClick: (props) => {
+        console.log(props);
+      }
+    }
+  ]
+  */
+  actions: _propTypes.default.array,
+
+  /** Provide table data
+  data: [
+    {
+      id: 50132,
+      alert_type: 'Malware Object',
+      malware_name: 'Malware.Binary.exe',
+      url: 'auf-jeder.com/4.exe',
+      severity: 2
+    }
+  ]
+  */
+  data: _propTypes.default.array,
+
+  /**Provide select config to enable or disable selection of any record*/
+  selectConfig: _propTypes.default.func,
+
+  /** Provide field name*/
+  sortBy: _propTypes.default.string,
+
+  /** Provide sort order like 'asc' or 'desc'*/
+  sortOrder: _propTypes.default.oneOf(['asc', 'desc']),
+
+  /** Provide applied filter on column
+  filterApplied: {
+    'id': 50132
+  }
+  */
+  filterApplied: _propTypes.default.object,
+
+  /** Provide handler for sorting*/
+  onSortChange: _propTypes.default.func,
+
+  /** Provide handler for filter change*/
+  onFilterChange: _propTypes.default.func,
+
+  /** Provide handler for filter change*/
+  onSelectedChange: _propTypes.default.func
+};
+FeTable.displayName = 'FeTable';
+var _default = FeTable;
+exports.default = _default;

package/lib/fe-table/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _FeTable = _interopRequireDefault(require("./FeTable"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+var _default = _FeTable.default;
+exports.default = _default;