@bigbinary/neeto-molecules 1.0.0

package/dist/Columns.cjs.js

@@ -0,0 +1,183 @@
+'use strict';
+
+var React = require('react');
+var pure = require('@bigbinary/neeto-commons-frontend/pure');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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 _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var removeFixedColumns = function removeFixedColumns(fixedColumns, columnData) {
+  return pure.removeBy({
+    dataIndex: ramda.includes(ramda.__, fixedColumns)
+  }, columnData);
+};
+var filterBySearchTerm = function filterBySearchTerm(searchTerm, columns) {
+  return ramda.filter(function (_ref) {
+    var title = _ref.title;
+    return ramda.includes(ramda.trim(ramda.toLower(searchTerm)), ramda.trim(ramda.toLower(title)));
+  }, columns);
+};
+
+var Columns = function Columns(_ref) {
+  var actionBlock = _ref.actionBlock,
+    _ref$checkboxProps = _ref.checkboxProps,
+    checkboxProps = _ref$checkboxProps === void 0 ? {} : _ref$checkboxProps,
+    _ref$columnData = _ref.columnData,
+    columnData = _ref$columnData === void 0 ? [] : _ref$columnData,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    _ref$fixedColumns = _ref.fixedColumns,
+    fixedColumns = _ref$fixedColumns === void 0 ? [] : _ref$fixedColumns,
+    _ref$isSearchable = _ref.isSearchable,
+    isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
+    _ref$localStorageKey = _ref.localStorageKey,
+    localStorageKey = _ref$localStorageKey === void 0 ? "" : _ref$localStorageKey,
+    _ref$noColumnMessage = _ref.noColumnMessage,
+    noColumnMessage = _ref$noColumnMessage === void 0 ? "No columns found!" : _ref$noColumnMessage,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? ramda.identity : _ref$onChange,
+    _ref$searchProps = _ref.searchProps,
+    searchProps = _ref$searchProps === void 0 ? {} : _ref$searchProps;
+  var Divider = neetoui.Dropdown.Divider,
+    Menu = neetoui.Dropdown.Menu,
+    MenuItem = neetoui.Dropdown.MenuItem;
+  var _useLocalStorage = reactUtils.useLocalStorage(localStorageKey, []),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    hiddenColumns = _useLocalStorage2[0],
+    setHiddenColumns = _useLocalStorage2[1];
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var columns = removeFixedColumns(fixedColumns, columnData);
+  var filteredColumns = filterBySearchTerm(searchTerm, columns);
+  var handleChange = function handleChange(_ref2) {
+    var _ref2$target = _ref2.target,
+      dataIndex = _ref2$target.name,
+      checked = _ref2$target.checked;
+    return checked ? setHiddenColumns(ramda.without([dataIndex], hiddenColumns)) : setHiddenColumns(ramda.append(dataIndex, hiddenColumns));
+  };
+  var handleSearch = function handleSearch(_ref3) {
+    var value = _ref3.target.value;
+    return setSearchTerm(value);
+  };
+  React.useEffect(function () {
+    onChange(pure.removeBy({
+      dataIndex: ramda.includes(ramda.__, hiddenColumns)
+    }, columnData));
+  }, [columnData, hiddenColumns]);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, _extends({
+    buttonSize: "medium",
+    buttonStyle: "text",
+    closeOnSelect: false,
+    label: "Columns",
+    position: "bottom-end",
+    onClose: function onClose() {
+      return setSearchTerm("");
+    }
+  }, dropdownProps), /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement("div", null, isSearchable && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({
+    className: "neeto-ui-px-3 neeto-ui-py-2",
+    "data-cy": "neeto-ui-columns-search",
+    placeholder: "Search columns",
+    prefix: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Search, null),
+    type: "search",
+    value: searchTerm,
+    onChange: handleSearch
+  }, searchProps)), pure.isNotEmpty(filteredColumns) ? filteredColumns.map(function (_ref4) {
+    var dataIndex = _ref4.dataIndex,
+      key = _ref4.key,
+      title = _ref4.title;
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+      key: key
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+      className: "neeto-ui-w-full neeto-ui-px-3 neeto-ui-py-2 hover:neeto-ui-bg-gray-200 neeto-ui-cursor-pointer",
+      htmlFor: dataIndex
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, _extends({
+      checked: !hiddenColumns.includes(dataIndex),
+      "data-cy": "neeto-ui-columns-checkbox",
+      id: dataIndex,
+      label: title,
+      name: dataIndex,
+      onChange: handleChange
+    }, checkboxProps))));
+  }) : /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-p-2"
+  }, noColumnMessage), !!actionBlock && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Divider, null), actionBlock))));
+};
+
+module.exports = Columns;

package/dist/Columns.js

@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from 'react';
+import { removeBy, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
+import { useLocalStorage } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { Search } from '@bigbinary/neeto-icons';
+import { Dropdown, Input, Label, Checkbox } from '@bigbinary/neetoui';
+import { includes, __, filter, trim, toLower, identity, without, append } from 'ramda';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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 _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var removeFixedColumns = function removeFixedColumns(fixedColumns, columnData) {
+  return removeBy({
+    dataIndex: includes(__, fixedColumns)
+  }, columnData);
+};
+var filterBySearchTerm = function filterBySearchTerm(searchTerm, columns) {
+  return filter(function (_ref) {
+    var title = _ref.title;
+    return includes(trim(toLower(searchTerm)), trim(toLower(title)));
+  }, columns);
+};
+
+var Columns = function Columns(_ref) {
+  var actionBlock = _ref.actionBlock,
+    _ref$checkboxProps = _ref.checkboxProps,
+    checkboxProps = _ref$checkboxProps === void 0 ? {} : _ref$checkboxProps,
+    _ref$columnData = _ref.columnData,
+    columnData = _ref$columnData === void 0 ? [] : _ref$columnData,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    _ref$fixedColumns = _ref.fixedColumns,
+    fixedColumns = _ref$fixedColumns === void 0 ? [] : _ref$fixedColumns,
+    _ref$isSearchable = _ref.isSearchable,
+    isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
+    _ref$localStorageKey = _ref.localStorageKey,
+    localStorageKey = _ref$localStorageKey === void 0 ? "" : _ref$localStorageKey,
+    _ref$noColumnMessage = _ref.noColumnMessage,
+    noColumnMessage = _ref$noColumnMessage === void 0 ? "No columns found!" : _ref$noColumnMessage,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? identity : _ref$onChange,
+    _ref$searchProps = _ref.searchProps,
+    searchProps = _ref$searchProps === void 0 ? {} : _ref$searchProps;
+  var Divider = Dropdown.Divider,
+    Menu = Dropdown.Menu,
+    MenuItem = Dropdown.MenuItem;
+  var _useLocalStorage = useLocalStorage(localStorageKey, []),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    hiddenColumns = _useLocalStorage2[0],
+    setHiddenColumns = _useLocalStorage2[1];
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var columns = removeFixedColumns(fixedColumns, columnData);
+  var filteredColumns = filterBySearchTerm(searchTerm, columns);
+  var handleChange = function handleChange(_ref2) {
+    var _ref2$target = _ref2.target,
+      dataIndex = _ref2$target.name,
+      checked = _ref2$target.checked;
+    return checked ? setHiddenColumns(without([dataIndex], hiddenColumns)) : setHiddenColumns(append(dataIndex, hiddenColumns));
+  };
+  var handleSearch = function handleSearch(_ref3) {
+    var value = _ref3.target.value;
+    return setSearchTerm(value);
+  };
+  useEffect(function () {
+    onChange(removeBy({
+      dataIndex: includes(__, hiddenColumns)
+    }, columnData));
+  }, [columnData, hiddenColumns]);
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    buttonSize: "medium",
+    buttonStyle: "text",
+    closeOnSelect: false,
+    label: "Columns",
+    position: "bottom-end",
+    onClose: function onClose() {
+      return setSearchTerm("");
+    }
+  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", null, isSearchable && /*#__PURE__*/React.createElement(Input, _extends({
+    className: "neeto-ui-px-3 neeto-ui-py-2",
+    "data-cy": "neeto-ui-columns-search",
+    placeholder: "Search columns",
+    prefix: /*#__PURE__*/React.createElement(Search, null),
+    type: "search",
+    value: searchTerm,
+    onChange: handleSearch
+  }, searchProps)), isNotEmpty(filteredColumns) ? filteredColumns.map(function (_ref4) {
+    var dataIndex = _ref4.dataIndex,
+      key = _ref4.key,
+      title = _ref4.title;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: key
+    }, /*#__PURE__*/React.createElement(Label, {
+      className: "neeto-ui-w-full neeto-ui-px-3 neeto-ui-py-2 hover:neeto-ui-bg-gray-200 neeto-ui-cursor-pointer",
+      htmlFor: dataIndex
+    }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+      checked: !hiddenColumns.includes(dataIndex),
+      "data-cy": "neeto-ui-columns-checkbox",
+      id: dataIndex,
+      label: title,
+      name: dataIndex,
+      onChange: handleChange
+    }, checkboxProps))));
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-p-2"
+  }, noColumnMessage), !!actionBlock && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), actionBlock))));
+};
+
+export { Columns as default };