@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/RecordSelectionList/RecordSelectList-story.js

@@ -0,0 +1,491 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = require("lodash");
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _tableData = require("../../../.storybook/data/tableData");
+
+var _RecordSelectionList = _interopRequireDefault(require("../RecordSelectionList/RecordSelectionList"));
+
+var _Modal = _interopRequireDefault(require("../Modal/Modal"));
+
+var _Card = _interopRequireWildcard(require("../Card"));
+
+var stories = (0, _react2.storiesOf)('RecordSelectionList', module);
+stories.addDecorator(_react3.withKnobs);
+
+var RecordListItemsExample =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(RecordListItemsExample, _Component);
+
+  function RecordListItemsExample(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RecordListItemsExample);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf3["default"])(RecordListItemsExample).call(this, props));
+    var selectedIds = props.locations.map(function (loc) {
+      return loc.node.id;
+    });
+
+    if (props.canSelect === 'one') {
+      selectedIds = (0, _lodash.sampleSize)(selectedIds, 1);
+    } else {
+      selectedIds = (0, _lodash.sampleSize)(selectedIds, Math.floor(selectedIds.length / 2));
+    }
+
+    var unselectedIds = props.locations.map(function (loc) {
+      return loc.node.id;
+    }).filter(function (locationId) {
+      return selectedIds.indexOf(locationId) === -1;
+    });
+    var unselectableIds = (0, _lodash.sampleSize)(unselectedIds, unselectedIds.length / 2);
+    _this.state = {
+      selectedIds: selectedIds,
+      locations: props.locations,
+      unselectableIds: unselectableIds
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RecordListItemsExample, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          _this$props$canSearch = _this$props.canSearch,
+          canSearch = _this$props$canSearch === void 0 ? true : _this$props$canSearch,
+          canSelect = _this$props.canSelect,
+          canRemove = _this$props.canRemove,
+          totalRecordCount = _this$props.totalRecordCount,
+          onSearchChange = _this$props.onSearchChange,
+          maxRowsVisible = _this$props.maxRowsVisible,
+          searchValue = _this$props.searchValue;
+      var _this$state = this.state,
+          selectedIds = _this$state.selectedIds,
+          locations = _this$state.locations,
+          unselectableIds = _this$state.unselectableIds;
+      return _react["default"].createElement(_RecordSelectionList["default"], {
+        searchValue: searchValue,
+        onSearchChange: onSearchChange,
+        canSearch: canSearch,
+        searchLabel: 'Search Label',
+        selectedIds: selectedIds,
+        unselectableIds: unselectableIds,
+        loadRecordListItems:
+        /*#__PURE__*/
+        function () {
+          var _ref2 = (0, _asyncToGenerator2["default"])(
+          /*#__PURE__*/
+          _regenerator["default"].mark(function _callee(_ref) {
+            var limit, offset, search, results, filteredLocations, recordListItems;
+            return _regenerator["default"].wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    limit = _ref.limit, offset = _ref.offset, search = _ref.search;
+                    _context.next = 3;
+                    return new Promise(function (resolve) {
+                      return setTimeout(function () {
+                        resolve();
+                      }, Math.random() * 1000);
+                    });
+
+                  case 3:
+                    results = [];
+
+                    if (search) {
+                      filteredLocations = locations.filter(function (location) {
+                        return location.node.publicName.match(new RegExp(search, 'ig'));
+                      });
+                      results = filteredLocations.slice(offset, offset + limit);
+                    } else {
+                      results = locations.slice(offset, offset + limit);
+                    }
+
+                    recordListItems = results.map(function (result) {
+                      return {
+                        id: result.node.id,
+                        title: result.node.publicName,
+                        subtitle: result.node.address,
+                        isDisabled: unselectableIds.indexOf(result.node.id) >= 0,
+                        note: unselectableIds.indexOf(result.node.id) >= 0 && 'Location already in group!'
+                      };
+                    });
+                    return _context.abrupt("return", recordListItems);
+
+                  case 7:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          return function (_x) {
+            return _ref2.apply(this, arguments);
+          };
+        }(),
+        canSelect: canSelect,
+        canRemove: canRemove,
+        onSelect: function onSelect(id) {
+          // Typically you'd want "many" or "one", so you'd only need one side
+          // of this conditional.
+          if (canSelect === 'many') {
+            if (selectedIds.indexOf(id) >= 0) {
+              _this2.setState({
+                selectedIds: selectedIds.filter(function (selectedId) {
+                  return selectedId !== id;
+                })
+              });
+            } else {
+              _this2.setState({
+                selectedIds: [].concat((0, _toConsumableArray2["default"])(selectedIds), [id])
+              });
+            }
+          } else if (canSelect === 'one') {
+            _this2.setState({
+              selectedIds: [id]
+            });
+          }
+        },
+        onRemove: function onRemove(id) {
+          // The component maintains state of the records it has loaded, but
+          // it's up to you to remove them from your list in your local state.
+          // Also, if for some reason you want to have selection alongside deletion,
+          // you should be sure to clear out the selection at the same time.
+          _this2.setState({
+            selectedIds: selectedIds.filter(function (selectedId) {
+              return selectedId !== id;
+            }),
+            locations: locations.filter(function (location) {
+              return location.id !== id;
+            })
+          });
+        },
+        totalRecordCount: totalRecordCount,
+        maxRowsVisible: maxRowsVisible && maxRowsVisible !== 'auto' ? parseInt(maxRowsVisible, 10) : maxRowsVisible,
+        noSearchResultsEmptyState: {
+          headline: "Nothin' here...",
+          icon: 'no_matches',
+          primaryAction: {
+            text: "Show all, y'all!"
+          }
+        }
+      });
+    }
+  }]);
+  return RecordListItemsExample;
+}(_react.Component);
+
+stories.add('In a Card', function () {
+  return _react["default"].createElement("div", {
+    style: {
+      width: '320px',
+      padding: '8px'
+    }
+  }, _react["default"].createElement(_Card["default"], null, _react["default"].createElement(_Card.CardHeader, {
+    title: "Card Title"
+  }), _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement(RecordListItemsExample, {
+    canSelect: (0, _react3.select)('Can Select', [null, 'many', 'one'], null),
+    canRemove: (0, _react3["boolean"])('Can Remove', false),
+    locations: (0, _lodash.map)((0, _tableData.generateLocations)({
+      amount: 50
+    }), function (o) {
+      return {
+        node: (0, _objectSpread2["default"])({}, o)
+      };
+    }),
+    totalRecordCount: 50,
+    maxRowsVisible: (0, _react3.select)('Max Rows Visible', [null, 3, 'auto'], 3)
+  }))));
+});
+
+var ExternalStateExample =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2["default"])(ExternalStateExample, _React$Component);
+
+  function ExternalStateExample() {
+    var _getPrototypeOf2;
+
+    var _this3;
+
+    (0, _classCallCheck2["default"])(this, ExternalStateExample);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this3 = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(ExternalStateExample)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "state", {
+      searchValue: ''
+    });
+    return _this3;
+  }
+
+  (0, _createClass2["default"])(ExternalStateExample, [{
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var searchValue = this.state.searchValue;
+      return _react["default"].createElement("div", {
+        style: {
+          width: '320px',
+          padding: '8px'
+        }
+      }, _react["default"].createElement("p", null, "This input will control the search of the following RecordSelectionList"), _react["default"].createElement("input", {
+        type: "text",
+        value: searchValue,
+        onChange: function onChange(e) {
+          _this4.setState({
+            searchValue: e.target.value
+          });
+        }
+      }), _react["default"].createElement("br", null), _react["default"].createElement("br", null), _react["default"].createElement(_Card["default"], null, _react["default"].createElement(_Card.CardHeader, {
+        title: "Card Title"
+      }), _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement(RecordListItemsExample, {
+        canSearch: false,
+        searchValue: searchValue,
+        onSearchChange: function onSearchChange(newSearchValue) {
+          _this4.setState({
+            searchValue: newSearchValue
+          });
+        },
+        canSelect: (0, _react3.select)('Can Select', [null, 'many', 'one'], null),
+        canRemove: (0, _react3["boolean"])('Can Remove', false),
+        locations: (0, _lodash.map)((0, _tableData.generateLocations)({
+          amount: 50
+        }), function (o) {
+          return {
+            node: (0, _objectSpread2["default"])({}, o)
+          };
+        }),
+        totalRecordCount: 50,
+        maxRowsVisible: (0, _react3.select)('Max Rows Visible', [null, 3, 'auto'], 3)
+      }))));
+    }
+  }]);
+  return ExternalStateExample;
+}(_react["default"].Component);
+
+stories.add('Search Controlled by External State', function () {
+  return _react["default"].createElement(ExternalStateExample, null);
+});
+stories.add('In a Modal', function () {
+  return _react["default"].createElement(_Modal["default"], {
+    isOpen: true,
+    onAfterOpen: function onAfterOpen() {
+      return null;
+    },
+    onRequestClose: function onRequestClose() {
+      return null;
+    }
+  }, _react["default"].createElement(_Modal["default"].Header, {
+    title: "Modal title",
+    onRequestClose: function onRequestClose() {
+      return null;
+    }
+  }), _react["default"].createElement(_Modal["default"].Body, null, _react["default"].createElement(RecordListItemsExample, {
+    canSelect: (0, _react3.select)('Can Select', [null, 'many', 'one'], 'many'),
+    canRemove: (0, _react3["boolean"])('Can Remove', true),
+    locations: (0, _lodash.map)((0, _tableData.generateLocations)({
+      amount: 100
+    }), function (o) {
+      return {
+        node: (0, _objectSpread2["default"])({}, o)
+      };
+    }),
+    totalRecordCount: 100,
+    maxRowsVisible: (0, _react3.select)('Max Rows Visible', [null, 3, 'auto'], 3)
+  })));
+});
+stories.add('Empty State', function () {
+  return _react["default"].createElement("div", {
+    style: {
+      width: '320px',
+      padding: '8px'
+    }
+  }, _react["default"].createElement(_Card["default"], null, _react["default"].createElement(_Card.CardHeader, {
+    title: "Card Title"
+  }), _react["default"].createElement(_Card.CardBody, {
+    isSectioned: false,
+    hasBottomPadding: false
+  }, _react["default"].createElement(_RecordSelectionList["default"], {
+    canSearch: false,
+    selectedIds: [],
+    unselectableIds: [],
+    loadRecordListItems:
+    /*#__PURE__*/
+    (0, _asyncToGenerator2["default"])(
+    /*#__PURE__*/
+    _regenerator["default"].mark(function _callee2() {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              return _context2.abrupt("return", []);
+
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })),
+    noDataEmptyState: {
+      headline: (0, _react3.text)('emptyState:headline', 'Nothing to see here'),
+      subheadline: (0, _react3.text)('emptyState:subheadline', 'There is none of that here'),
+      icon: (0, _react3.text)('emptyState:icon', 'team'),
+      isLineIcon: true,
+      primaryAction: {
+        text: (0, _react3.text)('emptyState:primaryAction text', 'Do something about it')
+      }
+    }
+  }))));
+});
+
+var RecordSelectionListSearchExample =
+/*#__PURE__*/
+function (_Component2) {
+  (0, _inherits2["default"])(RecordSelectionListSearchExample, _Component2);
+
+  function RecordSelectionListSearchExample() {
+    (0, _classCallCheck2["default"])(this, RecordSelectionListSearchExample);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf3["default"])(RecordSelectionListSearchExample).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(RecordSelectionListSearchExample, [{
+    key: "render",
+    value: function render() {
+      var locations = this.props.locations;
+      return _react["default"].createElement(_RecordSelectionList["default"], {
+        searchLabel: 'Search Label',
+        loadRecordListItems:
+        /*#__PURE__*/
+        function () {
+          var _ref5 = (0, _asyncToGenerator2["default"])(
+          /*#__PURE__*/
+          _regenerator["default"].mark(function _callee3(_ref4) {
+            var limit, offset, search, results, filteredLocations, recordListItems;
+            return _regenerator["default"].wrap(function _callee3$(_context3) {
+              while (1) {
+                switch (_context3.prev = _context3.next) {
+                  case 0:
+                    limit = _ref4.limit, offset = _ref4.offset, search = _ref4.search;
+
+                    if (search) {
+                      _context3.next = 3;
+                      break;
+                    }
+
+                    return _context3.abrupt("return", []);
+
+                  case 3:
+                    _context3.next = 5;
+                    return new Promise(function (resolve) {
+                      return setTimeout(function () {
+                        resolve();
+                      }, Math.random() * 1000);
+                    });
+
+                  case 5:
+                    results = [];
+
+                    if (search) {
+                      filteredLocations = locations.filter(function (location) {
+                        return location.node.publicName.match(new RegExp(search, 'ig'));
+                      });
+                      results = filteredLocations.slice(offset, offset + limit);
+                    } else {
+                      results = locations.slice(offset, offset + limit);
+                    }
+
+                    recordListItems = results.map(function (result) {
+                      return {
+                        id: result.node.id,
+                        title: result.node.publicName,
+                        subtitle: result.node.address
+                      };
+                    });
+                    return _context3.abrupt("return", recordListItems);
+
+                  case 9:
+                  case "end":
+                    return _context3.stop();
+                }
+              }
+            }, _callee3);
+          }));
+
+          return function (_x2) {
+            return _ref5.apply(this, arguments);
+          };
+        }(),
+        canSearch: true,
+        maxRowsVisible: 5,
+        noSearchResultsEmptyState: {
+          headline: "Nothin' here...",
+          icon: 'no_matches',
+          primaryAction: {
+            text: "Show all, y'all!"
+          }
+        }
+      });
+    }
+  }]);
+  return RecordSelectionListSearchExample;
+}(_react.Component);
+
+stories.add('Only Showing Records When Searching', function () {
+  return _react["default"].createElement("div", {
+    style: {
+      width: '320px',
+      padding: '8px'
+    }
+  }, _react["default"].createElement(_Card["default"], null, _react["default"].createElement(_Card.CardHeader, {
+    title: "Card Title"
+  }), _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement(RecordSelectionListSearchExample, {
+    locations: (0, _lodash.map)((0, _tableData.generateLocations)({
+      amount: 50
+    }), function (o) {
+      return {
+        node: (0, _objectSpread2["default"])({}, o)
+      };
+    })
+  }))));
+});
+//# sourceMappingURL=RecordSelectList-story.js.map

package/lib/components/RecordSelectionList/RecordSelectList-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RecordSelectionList/RecordSelectList-story.js"],"names":["stories","module","addDecorator","withKnobs","RecordListItemsExample","props","selectedIds","locations","map","loc","node","id","canSelect","Math","floor","length","unselectedIds","filter","locationId","indexOf","unselectableIds","state","canSearch","canRemove","totalRecordCount","onSearchChange","maxRowsVisible","searchValue","limit","offset","search","Promise","resolve","setTimeout","random","results","filteredLocations","location","publicName","match","RegExp","slice","recordListItems","result","title","subtitle","address","isDisabled","note","setState","selectedId","parseInt","headline","icon","primaryAction","text","Component","add","width","padding","amount","o","ExternalStateExample","e","target","value","newSearchValue","React","subheadline","isLineIcon","RecordSelectionListSearchExample"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport { map, sampleSize } from 'lodash'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, boolean, select, text } from '@storybook/addon-knobs/react'\n\nimport { generateLocations } from '../../../.storybook/data/tableData'\nimport RecordSelectionList from '../RecordSelectionList/RecordSelectionList'\nimport Modal from '../Modal/Modal'\nimport Card, { CardHeader, CardBody } from '../Card'\n\nconst stories = storiesOf('RecordSelectionList', module)\n\nstories.addDecorator(withKnobs)\n\ntype RSLExampleProps = {\n\tcanSelect?: 'many' | 'one',\n\tcanRemove: boolean,\n\tlocations: Array<Object>,\n\ttotalRecordCount: number,\n\tmaxRowsVisible?: number | 'auto'\n}\n\ntype RSLExampleState = {\n\tisModalOpen?: boolean,\n\tselectedIds: Array<string>,\n\tunselectableIds: Array<string>,\n\tlocations: Array<Object>,\n\temptyState: any\n}\n\nclass RecordListItemsExample extends Component<\n\tRSLExampleProps,\n\tRSLExampleState\n> {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t\tlet selectedIds = props.locations.map(loc => loc.node.id)\n\n\t\tif (props.canSelect === 'one') {\n\t\t\tselectedIds = sampleSize(selectedIds, 1)\n\t\t} else {\n\t\t\tselectedIds = sampleSize(selectedIds, Math.floor(selectedIds.length / 2))\n\t\t}\n\n\t\tconst unselectedIds = props.locations\n\t\t\t.map(loc => loc.node.id)\n\t\t\t.filter(locationId => selectedIds.indexOf(locationId) === -1)\n\n\t\tconst unselectableIds = sampleSize(unselectedIds, unselectedIds.length / 2)\n\n\t\tthis.state = { selectedIds, locations: props.locations, unselectableIds }\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tcanSearch = true,\n\t\t\tcanSelect,\n\t\t\tcanRemove,\n\t\t\ttotalRecordCount,\n\t\t\tonSearchChange,\n\t\t\tmaxRowsVisible,\n\t\t\tsearchValue\n\t\t} = this.props\n\n\t\tconst { selectedIds, locations, unselectableIds } = this.state\n\n\t\treturn (\n\t\t\t<RecordSelectionList\n\t\t\t\tsearchValue={searchValue}\n\t\t\t\tonSearchChange={onSearchChange}\n\t\t\t\tcanSearch={canSearch}\n\t\t\t\tsearchLabel={'Search Label'}\n\t\t\t\tselectedIds={selectedIds}\n\t\t\t\tunselectableIds={unselectableIds}\n\t\t\t\tloadRecordListItems={async ({ limit, offset, search }) => {\n\t\t\t\t\t// Artificial API wait time\n\t\t\t\t\tawait new Promise(resolve =>\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tresolve()\n\t\t\t\t\t\t}, Math.random() * 1000)\n\t\t\t\t\t)\n\n\t\t\t\t\tlet results = []\n\n\t\t\t\t\tif (search) {\n\t\t\t\t\t\tconst filteredLocations = locations.filter(location => {\n\t\t\t\t\t\t\treturn location.node.publicName.match(new RegExp(search, 'ig'))\n\t\t\t\t\t\t})\n\n\t\t\t\t\t\tresults = filteredLocations.slice(offset, offset + limit)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresults = locations.slice(offset, offset + limit)\n\t\t\t\t\t}\n\n\t\t\t\t\tconst recordListItems = results.map(result => {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: result.node.id,\n\t\t\t\t\t\t\ttitle: result.node.publicName,\n\t\t\t\t\t\t\tsubtitle: result.node.address,\n\t\t\t\t\t\t\tisDisabled: unselectableIds.indexOf(result.node.id) >= 0,\n\t\t\t\t\t\t\tnote:\n\t\t\t\t\t\t\t\tunselectableIds.indexOf(result.node.id) >= 0 &&\n\t\t\t\t\t\t\t\t'Location already in group!'\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\n\t\t\t\t\treturn recordListItems\n\t\t\t\t}}\n\t\t\t\tcanSelect={canSelect}\n\t\t\t\tcanRemove={canRemove}\n\t\t\t\tonSelect={id => {\n\t\t\t\t\t// Typically you'd want \"many\" or \"one\", so you'd only need one side\n\t\t\t\t\t// of this conditional.\n\t\t\t\t\tif (canSelect === 'many') {\n\t\t\t\t\t\tif (selectedIds.indexOf(id) >= 0) {\n\t\t\t\t\t\t\tthis.setState({\n\t\t\t\t\t\t\t\tselectedIds: selectedIds.filter(selectedId => selectedId !== id)\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.setState({ selectedIds: [...selectedIds, id] })\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (canSelect === 'one') {\n\t\t\t\t\t\tthis.setState({ selectedIds: [id] })\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonRemove={id => {\n\t\t\t\t\t// The component maintains state of the records it has loaded, but\n\t\t\t\t\t// it's up to you to remove them from your list in your local state.\n\t\t\t\t\t// Also, if for some reason you want to have selection alongside deletion,\n\t\t\t\t\t// you should be sure to clear out the selection at the same time.\n\t\t\t\t\tthis.setState({\n\t\t\t\t\t\tselectedIds: selectedIds.filter(selectedId => selectedId !== id),\n\t\t\t\t\t\tlocations: locations.filter(location => location.id !== id)\n\t\t\t\t\t})\n\t\t\t\t}}\n\t\t\t\ttotalRecordCount={totalRecordCount}\n\t\t\t\tmaxRowsVisible={\n\t\t\t\t\tmaxRowsVisible && maxRowsVisible !== 'auto'\n\t\t\t\t\t\t? parseInt(maxRowsVisible, 10)\n\t\t\t\t\t\t: maxRowsVisible\n\t\t\t\t}\n\t\t\t\tnoSearchResultsEmptyState={{\n\t\t\t\t\theadline: \"Nothin' here...\",\n\t\t\t\t\ticon: 'no_matches',\n\t\t\t\t\tprimaryAction: {\n\t\t\t\t\t\ttext: \"Show all, y'all!\"\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nstories.add('In a Card', () => (\n\t<div style={{ width: '320px', padding: '8px' }}>\n\t\t<Card>\n\t\t\t<CardHeader title=\"Card Title\" />\n\t\t\t<CardBody>\n\t\t\t\t<RecordListItemsExample\n\t\t\t\t\tcanSelect={select('Can Select', [null, 'many', 'one'], null)}\n\t\t\t\t\tcanRemove={boolean('Can Remove', false)}\n\t\t\t\t\tlocations={map(generateLocations({ amount: 50 }), o => ({\n\t\t\t\t\t\tnode: { ...o }\n\t\t\t\t\t}))}\n\t\t\t\t\ttotalRecordCount={50}\n\t\t\t\t\tmaxRowsVisible={select('Max Rows Visible', [null, 3, 'auto'], 3)}\n\t\t\t\t/>\n\t\t\t</CardBody>\n\t\t</Card>\n\t</div>\n))\n\nclass ExternalStateExample extends React.Component {\n\tstate = { searchValue: '' }\n\n\trender() {\n\t\tconst { searchValue } = this.state\n\n\t\treturn (\n\t\t\t<div style={{ width: '320px', padding: '8px' }}>\n\t\t\t\t<p>\n\t\t\t\t\tThis input will control the search of the following\n\t\t\t\t\tRecordSelectionList\n\t\t\t\t</p>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={searchValue}\n\t\t\t\t\tonChange={e => {\n\t\t\t\t\t\tthis.setState({ searchValue: e.target.value })\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<br />\n\t\t\t\t<br />\n\n\t\t\t\t<Card>\n\t\t\t\t\t<CardHeader title=\"Card Title\" />\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<RecordListItemsExample\n\t\t\t\t\t\t\tcanSearch={false}\n\t\t\t\t\t\t\tsearchValue={searchValue}\n\t\t\t\t\t\t\tonSearchChange={newSearchValue => {\n\t\t\t\t\t\t\t\tthis.setState({ searchValue: newSearchValue })\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tcanSelect={select('Can Select', [null, 'many', 'one'], null)}\n\t\t\t\t\t\t\tcanRemove={boolean('Can Remove', false)}\n\t\t\t\t\t\t\tlocations={map(generateLocations({ amount: 50 }), o => ({\n\t\t\t\t\t\t\t\tnode: { ...o }\n\t\t\t\t\t\t\t}))}\n\t\t\t\t\t\t\ttotalRecordCount={50}\n\t\t\t\t\t\t\tmaxRowsVisible={select('Max Rows Visible', [null, 3, 'auto'], 3)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nstories.add('Search Controlled by External State', () => {\n\treturn <ExternalStateExample />\n})\n\nstories.add('In a Modal', () => (\n\t<Modal isOpen onAfterOpen={() => null} onRequestClose={() => null}>\n\t\t<Modal.Header title=\"Modal title\" onRequestClose={() => null} />\n\t\t<Modal.Body>\n\t\t\t<RecordListItemsExample\n\t\t\t\tcanSelect={select('Can Select', [null, 'many', 'one'], 'many')}\n\t\t\t\tcanRemove={boolean('Can Remove', true)}\n\t\t\t\tlocations={map(generateLocations({ amount: 100 }), o => ({\n\t\t\t\t\tnode: { ...o }\n\t\t\t\t}))}\n\t\t\t\ttotalRecordCount={100}\n\t\t\t\tmaxRowsVisible={select('Max Rows Visible', [null, 3, 'auto'], 3)}\n\t\t\t/>\n\t\t</Modal.Body>\n\t</Modal>\n))\n\nstories.add('Empty State', () => (\n\t<div style={{ width: '320px', padding: '8px' }}>\n\t\t<Card>\n\t\t\t<CardHeader title=\"Card Title\" />\n\t\t\t<CardBody isSectioned={false} hasBottomPadding={false}>\n\t\t\t\t<RecordSelectionList\n\t\t\t\t\tcanSearch={false}\n\t\t\t\t\tselectedIds={[]}\n\t\t\t\t\tunselectableIds={[]}\n\t\t\t\t\tloadRecordListItems={async () => []}\n\t\t\t\t\tnoDataEmptyState={{\n\t\t\t\t\t\theadline: text('emptyState:headline', 'Nothing to see here'),\n\t\t\t\t\t\tsubheadline: text(\n\t\t\t\t\t\t\t'emptyState:subheadline',\n\t\t\t\t\t\t\t'There is none of that here'\n\t\t\t\t\t\t),\n\t\t\t\t\t\ticon: text('emptyState:icon', 'team'),\n\t\t\t\t\t\tisLineIcon: true,\n\t\t\t\t\t\tprimaryAction: {\n\t\t\t\t\t\t\ttext: text(\n\t\t\t\t\t\t\t\t'emptyState:primaryAction text',\n\t\t\t\t\t\t\t\t'Do something about it'\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</CardBody>\n\t\t</Card>\n\t</div>\n))\n\ninterface RecordSelectionListSearchExampleProps {\n\tlocations: Array<Object>;\n}\ninterface RecordSelectionListSearchExampleState {}\n\nclass RecordSelectionListSearchExample extends Component<\n\tRecordSelectionListSearchExampleProps,\n\tRecordSelectionListSearchExampleState\n> {\n\trender() {\n\t\tconst { locations } = this.props\n\n\t\treturn (\n\t\t\t<RecordSelectionList\n\t\t\t\tsearchLabel={'Search Label'}\n\t\t\t\tloadRecordListItems={async ({ limit, offset, search }) => {\n\t\t\t\t\tif (!search) {\n\t\t\t\t\t\treturn []\n\t\t\t\t\t}\n\n\t\t\t\t\t// Artificial API wait time\n\t\t\t\t\tawait new Promise(resolve =>\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tresolve()\n\t\t\t\t\t\t}, Math.random() * 1000)\n\t\t\t\t\t)\n\n\t\t\t\t\tlet results = []\n\n\t\t\t\t\tif (search) {\n\t\t\t\t\t\tconst filteredLocations = locations.filter(location => {\n\t\t\t\t\t\t\treturn location.node.publicName.match(new RegExp(search, 'ig'))\n\t\t\t\t\t\t})\n\n\t\t\t\t\t\tresults = filteredLocations.slice(offset, offset + limit)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresults = locations.slice(offset, offset + limit)\n\t\t\t\t\t}\n\n\t\t\t\t\tconst recordListItems = results.map(result => {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: result.node.id,\n\t\t\t\t\t\t\ttitle: result.node.publicName,\n\t\t\t\t\t\t\tsubtitle: result.node.address\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\n\t\t\t\t\treturn recordListItems\n\t\t\t\t}}\n\t\t\t\tcanSearch\n\t\t\t\tmaxRowsVisible={5}\n\t\t\t\tnoSearchResultsEmptyState={{\n\t\t\t\t\theadline: \"Nothin' here...\",\n\t\t\t\t\ticon: 'no_matches',\n\t\t\t\t\tprimaryAction: {\n\t\t\t\t\t\ttext: \"Show all, y'all!\"\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nstories.add('Only Showing Records When Searching', () => (\n\t<div style={{ width: '320px', padding: '8px' }}>\n\t\t<Card>\n\t\t\t<CardHeader title=\"Card Title\" />\n\t\t\t<CardBody>\n\t\t\t\t<RecordSelectionListSearchExample\n\t\t\t\t\tlocations={map(generateLocations({ amount: 50 }), o => ({\n\t\t\t\t\t\tnode: { ...o }\n\t\t\t\t\t}))}\n\t\t\t\t/>\n\t\t\t</CardBody>\n\t\t</Card>\n\t</div>\n))\n"],"file":"RecordSelectList-story.js"}

package/lib/components/RecordSelectionList/RecordSelectionList.d.ts

@@ -0,0 +1,112 @@
+import React, { Component } from 'react';
+import { IListItemProps } from '../List/components/ListItem/ListItem';
+import { IEmptyStateProps } from '../EmptyState/EmptyState';
+export interface IRecordSelectionListItemProps extends IListItemProps {
+    id: string;
+}
+export interface IRecordSelectionListProps {
+    /** DEPRECATED Required method to render a record into a node */
+    renderRecord?: (record: any) => React.ReactElement;
+    /** DEPRECATED Get a unique ID for a record; given that data may be shaped in an unpredictable manner,
+     * you must implement this at each usage if using loadRecords method.
+     */
+    getRecordId?: (record: any) => string;
+    /** DEPRECATED Load custom records data for the offset/limit provided */
+    loadRecords?: (options: {
+        offset: number;
+        limit: number;
+        search?: string;
+    }) => Promise<any[]>;
+    /** Load records as list items for the offset/limit provided */
+    loadRecordListItems?: ({ offset, limit, search }: {
+        offset: number;
+        limit: number;
+        search?: string;
+    }) => Promise<IRecordSelectionListItemProps[]>;
+    /** How many records should be retrieved from the server at one time? */
+    recordsPerRequest: number;
+    /** Total number of records that could be in this list.
+     * Optional, but optimizes infinite load and adds supplementary UI */
+    totalRecordCount?: number;
+    /** Array of IDs in this collection of records that should be marked as selected */
+    selectedIds?: string[];
+    /** Can the search the records in the list? */
+    canSearch?: boolean;
+    /** If provided, controls the value of the search string */
+    searchValue?: string;
+    /** Respond to changes to the search value */
+    onSearchChange?: (value: string) => any;
+    /** delays invoking search until after a certain ms have elapsed since the last time the
+     * search was invoked */
+    searchDelayMs?: number;
+    /** Array of IDs that should not be selectable */
+    unselectableIds?: string[];
+    /** Can the user select many or one records in this list? */
+    canSelect?: 'many' | 'one';
+    /** Can the user remove records from this list? */
+    canRemove?: boolean;
+    /** Optionally provide a label for the search input */
+    searchLabel?: string;
+    /** Optionally provide a placeholder to the search input */
+    searchPlaceholder?: string;
+    /** Set to false to hide "# selected" text - defaults to true */
+    showSelectedCount?: boolean;
+    /** Callback for selection of a record */
+    onSelect?: (RecordId: any, Record: any) => void;
+    /** Callback for when user requests to remove a record from the list. */
+    onRemove?: (RecordId: any, Record: any) => void;
+    /** When set, list will become infinitely scrollable
+    /*  A number value will set the max height of the list to the number of rows specified
+    /*  A value of 'auto' will allow the list to fill the height of the parent container */
+    maxRowsVisible?: number | 'auto';
+    /** Should the no-data empty state be hidden? */
+    hideDataEmptyState?: boolean;
+    /** Should the no-result empty state be hidden? */
+    hideSearchResultsEmptyState?: boolean;
+    /** Props for the no-result empty state */
+    noSearchResultsEmptyState?: IEmptyStateProps;
+    /** Props for the no-data empty state */
+    noDataEmptyState?: IEmptyStateProps;
+}
+interface IRecordSelectionListState {
+    /** Records that have been loaded into state via `loadRecords` */
+    loadedRecords: Record<string, any>[];
+    /** Is the list loading data? */
+    isLoading: boolean;
+    /** Search value */
+    search?: string;
+    /** ID to manage the last request to loadRecords */
+    loadingId?: string;
+    listHeight: number;
+}
+export default class RecordSelectionList extends Component<IRecordSelectionListProps, IRecordSelectionListState> {
+    static defaultProps: {
+        showSelectedCount: boolean;
+        hideSearchResultsEmptyState: boolean;
+        hideDataEmptyState: boolean;
+        recordsPerRequest: number;
+    };
+    private listContainer;
+    private virtualizedList;
+    private infiniteLoader;
+    private cache;
+    private loadSearchResults;
+    constructor(props: IRecordSelectionListProps);
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: IRecordSelectionListProps): void;
+    reset({ persistSearch }?: {
+        /** Persist the value of the search when resetting. Defaults `false`. */
+        persistSearch?: boolean;
+    }): Promise<void>;
+    getVisibleRecordHeight: () => number;
+    render(): React.ReactElement;
+    private updateSearchValue;
+    private resetVirtualizedList;
+    private loadRecordsRequest;
+    private renderRow;
+    private renderInnerRow;
+    private handleInfiniteLoad;
+    private handleRemoveSelection;
+}
+export {};
+//# sourceMappingURL=RecordSelectionList.d.ts.map

package/lib/components/RecordSelectionList/RecordSelectionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordSelectionList.d.ts","sourceRoot":"","sources":["../../../src/components/RecordSelectionList/RecordSelectionList.tsx"],"names":[],"mappings":"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"}