@integec/grid-tools/lib/stories/flex/flex.stories.js

Integ Grid Tools

"use strict";

var _range2 = _interopRequireDefault(require("ramda/src/range"));

var _take2 = _interopRequireDefault(require("ramda/src/take"));

var _react = _interopRequireWildcard(require("react"));

var _react2 = require("@storybook/react");

var _data = require("../data");

var _ControlledEditDemo = _interopRequireDefault(require("./ControlledEditDemo"));

var _CellEditDemo = _interopRequireDefault(require("./CellEditDemo"));

var _index = _interopRequireWildcard(require("../../index"));

var _FilterDemo = _interopRequireDefault(require("./FilterDemo"));

var _ScrollSyncHelper = _interopRequireDefault(require("../../ScrollSyncHelper"));

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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

// const createRow = _ => randomRow(headers)
// const createData = R.compose(R.map(createRow), R.range(0))

/*   grid code starts here */
var data = (0, _data.createData)(80);

var redOn3X3Renderer = function redOn3X3Renderer(props) {
  var rowIndex = props.rowIndex,
      columnIndex = props.columnIndex,
      width = props.width,
      height = props.height,
      data = props.data,
      header = props.header;

  if (rowIndex === 3 && columnIndex === 3) {
    return _react["default"].createElement(_index.FlexCell, {
      style: {
        position: 'relative'
      },
      color: "red",
      fontSize: ".8em",
      fontWeight: "bold",
      width: width,
      height: height
    }, "$", data[rowIndex][header.ident], _react["default"].createElement("div", {
      style: {
        position: 'absolute',
        top: '0px',
        right: '0px',
        width: '10px',
        height: '10px',
        backgroundColor: 'blue'
      }
    }));
  }

  return (0, _index.defaultFlexCellRenderer)(props);
};

var splitColHeaderRenderer = function splitColHeaderRenderer(props) {
  var header = props.header;

  if (header.ident === 'unitId') {
    return _react["default"].createElement(_index.FlexColHeader, {
      backgroundColor: "black",
      width: props.width
    }, _react["default"].createElement("div", null, "Left"), _react["default"].createElement("div", null, "|"), _react["default"].createElement("div", null, "Right"));
  }

  return (0, _index.defaultFlexColHeaderRenderer)(props);
};

var commonProps = {
  headers: _data.headers,
  data: data
};
var debugHeaders = (0, _take2["default"])(5, _data.headers);
var debugData = (0, _range2["default"])(0, 5).map(function (_) {
  return (0, _data.randomRow)(debugHeaders);
});
var debugProps = {
  headers: debugHeaders,
  data: debugData
};
var tenKData = (0, _data.createData)(10000);

var OnEditCopyPasteDemo = function OnEditCopyPasteDemo() {
  var _useState = (0, _react.useState)(debugData),
      _useState2 = _slicedToArray(_useState, 2),
      data = _useState2[0],
      setData = _useState2[1];

  var processEdit = function processEdit(_ref) {
    var editedRow = _ref.editedRow,
        originalRow = _ref.originalRow;
    return function (d) {
      return d.map(function (row) {
        return row === originalRow ? editedRow : row;
      });
    };
  };

  return _react["default"].createElement(_index.GridToolContext.Provider, {
    value: {
      debug: true,
      columnHeaderProps: {
        backgroundColor: 'green'
      }
    }
  }, _react["default"].createElement(_index["default"], _extends({
    data: data,
    headers: debugHeaders,
    isEditable: true,
    editMode: "cell"
  }, (0, _index.createControlledEditProps)({
    data: data,
    setData: setData,
    processEdit: processEdit
  }), {
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 1100,
      height: 400,
      autoFixColByKey: true
    })
  })));
};

var GridWithScrollSync = function GridWithScrollSync() {
  var gridRef = (0, _react.useRef)();
  var divRef = (0, _react.useRef)();
  (0, _react.useEffect)(function () {
    var pane;

    if (gridRef.current && divRef.current) {
      pane = divRef.current;
      gridRef.current.scrollSync.registerPane(pane, _ScrollSyncHelper["default"].HORIZONTAL);
    }

    return function () {
      if (pane) {
        gridRef.current.scrollSync.unReisterPane(pane);
      }
    };
  }, []);
  return _react["default"].createElement("div", null, _react["default"].createElement("div", {
    ref: divRef,
    style: {
      overflow: 'auto',
      width: 800
    }
  }, _react["default"].createElement("div", {
    style: {
      padding: 20,
      background: 'red',
      width: _data.headers.map(function (h) {
        return h.width || 150;
      }).reduce(function (sum, val) {
        return sum + val;
      }, 0)
    }
  }, "Scroll Me!!!")), _react["default"].createElement(_index["default"], _extends({
    ref: gridRef
  }, commonProps, {
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 800,
      height: 400,
      autoFixColByKey: true
    })
  })));
};

(0, _react2.storiesOf)('Flex Grid', module).add('debug', function () {
  return _react["default"].createElement(_index["default"], _extends({}, debugProps, {
    isEditable: true,
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 1100,
      height: 400,
      autoFixColByKey: true
    })
  }));
}).add('On Edit Copy & Paste', function () {
  return _react["default"].createElement(OnEditCopyPasteDemo, null);
}).add('Browser Scroll/No Scroll', function () {
  return _react["default"].createElement(_index["default"], _extends({}, commonProps, {
    render: (0, _index.flexGridRenderer)()
  }));
}).add('Simple Scroll', function () {
  return _react["default"].createElement(_index["default"], _extends({}, commonProps, {
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 800,
      height: 400
    })
  }));
}).add('Scroll with fixed col', function () {
  return _react["default"].createElement(_index["default"], _extends({}, commonProps, {
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 800,
      height: 400,
      autoFixColByKey: true
    })
  }));
}).add('Scroll Sync', function () {
  return _react["default"].createElement(GridWithScrollSync, null);
}).add('Custom Selection Range', function () {
  var CustomSelectionStory = function CustomSelectionStory() {
    var initialRect = {
      x1: 3,
      y1: 2,
      x2: 5,
      y2: 5
    };
    var subGridRef = (0, _react.useRef)();
    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_index["default"], _extends({}, commonProps, {
      data: data.filter(function (_, index) {
        return index < 5;
      }),
      render: (0, _index.flexGridRenderer)(),
      onSelectionChange: function onSelectionChange(_ref2) {
        var selectedRows = _ref2.selectedRows;
        var y1 = data.findIndex(function (r) {
          return r.unitId === selectedRows[0].unitId;
        });
        subGridRef.current.setSelectedRect(_objectSpread({}, initialRect, {
          y1: y1
        }));
      }
    })), _react["default"].createElement("br", null), _react["default"].createElement("br", null), _react["default"].createElement(_index["default"], _extends({}, commonProps, {
      ref: subGridRef,
      render: (0, _index.flexGridRenderer)()
    })));
  };

  return _react["default"].createElement(CustomSelectionStory, null);
}).add('Customized Cell Renderer', function () {
  return _react["default"].createElement(_index["default"], _extends({}, commonProps, {
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 800,
      height: 400,
      autoFixColByKey: true,
      cellRenderer: redOn3X3Renderer
    })
  }));
}).add('Customized Row Header Renderer', function () {
  return _react["default"].createElement(_index["default"], _extends({}, commonProps, {
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 800,
      height: 400,
      autoFixColByKey: true,
      colHeaderRenderer: splitColHeaderRenderer
    })
  }));
}).add('Fuzzy Filter', function () {
  return _react["default"].createElement(_FilterDemo["default"], {
    headers: _data.headers,
    data: tenKData,
    rowsPerPage: 15,
    render: (0, _index.flexGridRenderer)()
  });
}).add('Scrolled Fixed col with paging', function () {
  return _react["default"].createElement(_index["default"], _extends({}, commonProps, {
    rowsPerPage: 18,
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 800,
      height: 400,
      autoFixColByKey: true
    })
  }));
}).add('No Scroll with paging', function () {
  return _react["default"].createElement(_index["default"], _extends({}, commonProps, {
    rowsPerPage: 15,
    render: (0, _index.flexGridRenderer)()
  }));
}).add('10k rows scroll with alt rows', function () {
  return _react["default"].createElement(_index["default"], {
    headers: _data.headers,
    data: tenKData,
    rowsPerPage: 20,
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 800,
      height: 400,
      autoFixColByKey: true
    }),
    altBgColor: "red",
    altBy: function altBy(data) {
      return data.unitId;
    }
  });
}).add('10k rows scroll paging', function () {
  return _react["default"].createElement(_index["default"], {
    headers: _data.headers,
    data: tenKData,
    rowsPerPage: 20,
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 800,
      height: 400,
      autoFixColByKey: true
    })
  });
}).add('10k rows non Scroll paging', function () {
  return _react["default"].createElement(_index["default"], {
    headers: _data.headers,
    data: tenKData,
    rowsPerPage: 15,
    render: (0, _index.flexGridRenderer)()
  });
}).add('Controlled Row Editor', function () {
  return _react["default"].createElement(_ControlledEditDemo["default"], _extends({}, commonProps, {
    controlled: true
  }));
}).add('Un-Controlled Row Editor', function () {
  return _react["default"].createElement(_ControlledEditDemo["default"], commonProps);
}).add('Free Edit', function () {
  return _react["default"].createElement(_CellEditDemo["default"], debugProps);
}).add('No Data Render', function () {
  return _react["default"].createElement(_index["default"], {
    headers: _data.headers,
    data: [],
    isEditable: true,
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 1100,
      height: 400,
      autoFixColByKey: true
    })
  });
}).add('hide No Data Render', function () {
  return _react["default"].createElement(_index["default"], {
    headers: _data.headers,
    data: [],
    isEditable: true,
    render: (0, _index.flexGridRenderer)({
      headerRowHeight: 60,
      width: 1100,
      height: 400,
      autoFixColByKey: true,
      noDataRender: null
    })
  });
});
//# sourceMappingURL=flex.stories.js.map