@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/DataTable/tools/filter.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Default implementation of how we filter rows internally. The idea behind this
+ * implementation is to use the given list of row ids and headers to get the
+ * individual cell values for a row. Then, we go through each cell value and see
+ * if any of them includes the given inputValue.
+ *
+ * @param {object} config
+ * @param {Array<string>} config.rowIds array of all the row ids in the table
+ * @param {Array<object>} config.headers
+ * @param {object} config.cellsById object containing a map of cell id to cell
+ * @param {string} config.inputValue the current input value in the Table Search
+ * @param {Function} config.getCellId
+ * @returns {Array<string>} rowIds
+ */
+var defaultFilterRows = function defaultFilterRows(_ref) {
+  var rowIds = _ref.rowIds,
+      headers = _ref.headers,
+      cellsById = _ref.cellsById,
+      inputValue = _ref.inputValue,
+      getCellId = _ref.getCellId;
+  return rowIds.filter(function (rowId) {
+    return headers.some(function (_ref2) {
+      var key = _ref2.key;
+      var id = getCellId(rowId, key);
+
+      if (typeof cellsById[id].value === 'boolean') {
+        return false;
+      }
+
+      return ('' + cellsById[id].value).toLowerCase().includes(inputValue.toLowerCase());
+    });
+  });
+};
+
+exports.defaultFilterRows = defaultFilterRows;

package/lib/components/DataTable/tools/instanceId.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Generic utility to initialize a method that will return a unique instance id
+ * for a component.
+ */
+var setupGetInstanceId = function setupGetInstanceId() {
+  var instanceId = 0;
+  return function getInstanceId() {
+    return ++instanceId;
+  };
+};
+
+var setupGetInstanceId$1 = setupGetInstanceId;
+
+exports["default"] = setupGetInstanceId$1;

package/lib/components/DataTable/tools/normalize.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cells = require('./cells.js');
+
+/**
+ * Normalize a collection of rows with the given headers.
+ *
+ * @param {Array<object>} rows
+ * @param {Array<object>} headers
+ * @returns {object}
+ */
+
+var normalize = function normalize(rows, headers) {
+  var prevState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var prevRowsByIds = prevState.rowsById;
+  var rowIds = new Array(rows.length);
+  var rowsById = {};
+  var cellsById = {};
+  rows.forEach(function (row, i) {
+    rowIds[i] = row.id; // Initialize the row info and state values, namely for selection and
+    // expansion
+
+    var id = row.id,
+        _row$isSelected = row.isSelected,
+        isSelected = _row$isSelected === void 0 ? false : _row$isSelected,
+        _row$isExpanded = row.isExpanded,
+        isExpanded = _row$isExpanded === void 0 ? false : _row$isExpanded,
+        _row$disabled = row.disabled,
+        disabled = _row$disabled === void 0 ? false : _row$disabled;
+    rowsById[id] = {
+      id: id,
+      isSelected: isSelected,
+      isExpanded: isExpanded,
+      disabled: disabled,
+      cells: new Array(headers.length)
+    }; // If we have a previous state, and the row existed in that previous state,
+    // then we'll set the state values of the row to the previous state values.
+
+    if (prevRowsByIds && prevRowsByIds[row.id] !== undefined) {
+      rowsById[row.id].isSelected = prevRowsByIds[row.id].isSelected;
+      rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded;
+    }
+
+    headers.forEach(function (_ref, i) {
+      var key = _ref.key;
+      var id = cells.getCellId(row.id, key); // Initialize the cell info and state values, namely for editing
+
+      cellsById[id] = {
+        id: id,
+        value: row[key],
+        isEditable: false,
+        isEditing: false,
+        isValid: true,
+        errors: null,
+        info: {
+          header: key
+        }
+      }; // TODO: When working on inline edits, we'll need to derive the state
+      // values similarly to rows above.
+
+      rowsById[row.id].cells[i] = id;
+    });
+  });
+  return {
+    rowIds: rowIds,
+    rowsById: rowsById,
+    cellsById: cellsById
+  };
+};
+
+var normalize$1 = normalize;
+
+exports["default"] = normalize$1;

package/lib/components/DataTable/tools/sorting.js

@@ -0,0 +1,117 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cells = require('./cells.js');
+var sortStates = require('../state/sortStates.js');
+
+/**
+ * Compare two primitives to determine which comes first. Initially, this method
+ * will try and figure out if both entries are the same type. If so, it will
+ * apply the default sort algorithm for those types. Otherwise, it defaults to a
+ * string conversion.
+ *
+ * @param {number|string} a
+ * @param {number|string} b
+ * @param {string} locale
+ * @returns {number}
+ */
+
+var compare = function compare(a, b) {
+  var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a - b;
+  }
+
+  if (typeof a === 'string' && typeof b === 'string') {
+    return compareStrings(a, b, locale);
+  }
+
+  return compareStrings('' + a, '' + b, locale);
+};
+/**
+ * Use the built-in `localeCompare` function available on strings to compare two
+ * strings.
+ *
+ * @param {string} a
+ * @param {string} b
+ * @param {string} locale
+ * @returns {number}
+ */
+
+var compareStrings = function compareStrings(a, b) {
+  var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+
+  // Only set `numeric: true` if the string only contains numbers
+  // https://stackoverflow.com/a/175787
+  if (!isNaN(a) && !isNaN(parseFloat(a))) {
+    return a.localeCompare(b, locale, {
+      numeric: true
+    });
+  }
+
+  return a.localeCompare(b, locale);
+};
+/**
+ * Default implementation of how we sort rows internally. The idea behind this
+ * implementation is to use the given list of row ids to look up the cells in
+ * the row by the given key. We then use the value of these cells and pipe them
+ * into our local `compareStrings` method, including the locale where
+ * appropriate.
+ *
+ * @param {object} config
+ * @param {Array[string]} config.rowIds array of all the row ids in the table
+ * @param {object} config.cellsById object containing a mapping of cell id to
+ * cell
+ * @param {string} config.key the header key that we use to lookup the cell
+ * @param {string} [config.locale] optional locale used in the comparison
+ * function
+ * @param {string} config.sortDirection the sort direction used to determine the
+ * order the comparison is called in
+ * @param {Function} config.sortRow
+ * @returns {Array[string]} array of sorted rowIds
+ */
+
+var sortRows = function sortRows(_ref) {
+  var rowIds = _ref.rowIds,
+      cellsById = _ref.cellsById,
+      sortDirection = _ref.sortDirection,
+      key = _ref.key,
+      locale = _ref.locale,
+      sortRow = _ref.sortRow;
+  return rowIds.slice().sort(function (a, b) {
+    var cellA = cellsById[cells.getCellId(a, key)];
+    var cellB = cellsById[cells.getCellId(b, key)];
+    return sortRow(cellA && cellA.value, cellB && cellB.value, {
+      key: key,
+      sortDirection: sortDirection,
+      locale: locale,
+      sortStates: sortStates.sortStates,
+      compare: compare
+    });
+  });
+};
+var defaultSortRow = function defaultSortRow(cellA, cellB, _ref2) {
+  var sortDirection = _ref2.sortDirection,
+      sortStates = _ref2.sortStates,
+      locale = _ref2.locale;
+
+  if (sortDirection === sortStates.ASC) {
+    return compare(cellA, cellB, locale);
+  }
+
+  return compare(cellB, cellA, locale);
+};
+
+exports.compare = compare;
+exports.compareStrings = compareStrings;
+exports.defaultSortRow = defaultSortRow;
+exports.sortRows = sortRows;

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -0,0 +1,143 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _span, _span2;
+
+var _excluded = ["headers", "rowCount", "columnCount", "zebra", "compact", "className", "showHeader", "showToolbar"];
+
+var DataTableSkeleton = function DataTableSkeleton(_ref) {
+  var _cx;
+
+  var headers = _ref.headers,
+      rowCount = _ref.rowCount,
+      columnCount = _ref.columnCount,
+      zebra = _ref.zebra,
+      compact = _ref.compact,
+      className = _ref.className,
+      showHeader = _ref.showHeader,
+      showToolbar = _ref.showToolbar,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var dataTableSkeletonClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--zebra"), zebra), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--compact"), compact), _cx));
+  var rowRepeat = rowCount;
+  var rows = Array(rowRepeat);
+  var columnsArray = Array.from({
+    length: columnCount
+  }, function (_, index) {
+    return index;
+  });
+
+  for (var i = 0; i < rowRepeat; i++) {
+    rows[i] = /*#__PURE__*/React__default["default"].createElement("tr", {
+      key: i
+    }, columnsArray.map(function (j) {
+      return /*#__PURE__*/React__default["default"].createElement("td", {
+        key: j
+      }, _span || (_span = /*#__PURE__*/React__default["default"].createElement("span", null)));
+    }));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--data-table-container")
+  }, showHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--data-table-header")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--data-table-header__title")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--data-table-header__description")
+  })) : null, showToolbar ? /*#__PURE__*/React__default["default"].createElement("section", {
+    "aria-label": "data table toolbar",
+    className: "".concat(prefix, "--table-toolbar")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--toolbar-content")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--btn ").concat(prefix, "--btn--sm")
+  }))) : null, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
+    className: dataTableSkeletonClasses
+  }, rest), /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columnsArray.map(function (i) {
+    var _headers$i;
+
+    return /*#__PURE__*/React__default["default"].createElement("th", {
+      key: i
+    }, headers ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "bx--table-header-label"
+    }, (_headers$i = headers[i]) === null || _headers$i === void 0 ? void 0 : _headers$i.header) : _span2 || (_span2 = /*#__PURE__*/React__default["default"].createElement("span", null)));
+  }))), /*#__PURE__*/React__default["default"].createElement("tbody", null, rows)));
+};
+
+DataTableSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the number of columns that you want to render in the skeleton state
+   */
+  columnCount: PropTypes__default["default"].number,
+
+  /**
+   * Optionally specify whether you want the Skeleton to be rendered as a
+   * compact DataTable
+   */
+  compact: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally specify the displayed headers
+   */
+  headers: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
+    key: PropTypes__default["default"].string
+  })]),
+
+  /**
+   * Specify the number of rows that you want to render in the skeleton state
+   */
+  rowCount: PropTypes__default["default"].number,
+
+  /**
+   * Specify if the table header should be rendered as part of the skeleton.
+   */
+  showHeader: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if the table toolbar should be rendered as part of the skeleton.
+   */
+  showToolbar: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally specify whether you want the DataTable to be zebra striped
+   */
+  zebra: PropTypes__default["default"].bool
+};
+DataTableSkeleton.defaultProps = {
+  rowCount: 5,
+  columnCount: 5,
+  zebra: false,
+  compact: false,
+  showHeader: true,
+  showToolbar: true
+};
+var DataTableSkeleton$1 = DataTableSkeleton;
+
+exports["default"] = DataTableSkeleton$1;

package/lib/components/DatePicker/DatePicker.Skeleton.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["range", "id", "className"];
+
+var DatePickerSkeleton = function DatePickerSkeleton(_ref) {
+  var range = _ref.range,
+      id = _ref.id,
+      className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var dateInput = /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--date-picker-container")
+  },
+  /*#__PURE__*/
+
+  /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control */
+  React__default["default"].createElement("label", {
+    className: "".concat(prefix, "--label"),
+    htmlFor: id
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--date-picker__input ").concat(prefix, "--skeleton")
+  }));
+
+  if (range) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--form-item")
+    }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+      className: cx__default["default"]("".concat(prefix, "--date-picker"), "".concat(prefix, "--date-picker--range"), "".concat(prefix, "--skeleton"), className)
+    }, rest), dateInput, dateInput));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-item")
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--date-picker"), "".concat(prefix, "--date-picker--short"), "".concat(prefix, "--date-picker--simple"), "".concat(prefix, "--skeleton"), className)
+  }, rest), dateInput));
+};
+
+DatePickerSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the id to add.
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the skeleton should be of range date picker.
+   */
+  range: PropTypes__default["default"].bool
+};
+var DatePickerSkeleton$1 = DatePickerSkeleton;
+
+exports["default"] = DatePickerSkeleton$1;