@carbon/react 0.17.0 → 1.0.0-rc.0

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

@@ -0,0 +1,110 @@
+/**
+ * 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.
+ */
+
+import { getCellId } from './cells.js';
+import { sortStates } from '../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[getCellId(a, key)];
+    var cellB = cellsById[getCellId(b, key)];
+    return sortRow(cellA && cellA.value, cellB && cellB.value, {
+      key: key,
+      sortDirection: sortDirection,
+      locale: locale,
+      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);
+};
+
+export { compare, compareStrings, defaultSortRow, sortRows };

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -0,0 +1,133 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var dataTableSkeletonClasses = cx(className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--data-table"), true), _defineProperty(_cx, "".concat(prefix, "--data-table--zebra"), zebra), _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.createElement("tr", {
+      key: i
+    }, columnsArray.map(function (j) {
+      return /*#__PURE__*/React__default.createElement("td", {
+        key: j
+      }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null)));
+    }));
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--data-table-container")
+  }, showHeader ? /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--data-table-header")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--data-table-header__title")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--data-table-header__description")
+  })) : null, showToolbar ? /*#__PURE__*/React__default.createElement("section", {
+    "aria-label": "data table toolbar",
+    className: "".concat(prefix, "--table-toolbar")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--toolbar-content")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--btn ").concat(prefix, "--btn--sm")
+  }))) : null, /*#__PURE__*/React__default.createElement("table", _extends({
+    className: dataTableSkeletonClasses
+  }, rest), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, columnsArray.map(function (i) {
+    var _headers$i;
+
+    return /*#__PURE__*/React__default.createElement("th", {
+      key: i
+    }, headers ? /*#__PURE__*/React__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.createElement("span", null)));
+  }))), /*#__PURE__*/React__default.createElement("tbody", null, rows)));
+};
+
+DataTableSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the number of columns that you want to render in the skeleton state
+   */
+  columnCount: PropTypes.number,
+
+  /**
+   * Optionally specify whether you want the Skeleton to be rendered as a
+   * compact DataTable
+   */
+  compact: PropTypes.bool,
+
+  /**
+   * Optionally specify the displayed headers
+   */
+  headers: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
+    key: PropTypes.string
+  })]),
+
+  /**
+   * Specify the number of rows that you want to render in the skeleton state
+   */
+  rowCount: PropTypes.number,
+
+  /**
+   * Specify if the table header should be rendered as part of the skeleton.
+   */
+  showHeader: PropTypes.bool,
+
+  /**
+   * Specify if the table toolbar should be rendered as part of the skeleton.
+   */
+  showToolbar: PropTypes.bool,
+
+  /**
+   * Optionally specify whether you want the DataTable to be zebra striped
+   */
+  zebra: PropTypes.bool
+};
+DataTableSkeleton.defaultProps = {
+  rowCount: 5,
+  columnCount: 5,
+  zebra: false,
+  compact: false,
+  showHeader: true,
+  showToolbar: true
+};
+var DataTableSkeleton$1 = DataTableSkeleton;
+
+export { DataTableSkeleton$1 as default };

package/es/components/DatePicker/DatePicker.Skeleton.js

@@ -0,0 +1,69 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["range", "id", "className"];
+
+var DatePickerSkeleton = function DatePickerSkeleton(_ref) {
+  var range = _ref.range,
+      id = _ref.id,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var dateInput = /*#__PURE__*/React__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.createElement("label", {
+    className: "".concat(prefix, "--label"),
+    htmlFor: id
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--date-picker__input ").concat(prefix, "--skeleton")
+  }));
+
+  if (range) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--form-item")
+    }, /*#__PURE__*/React__default.createElement("div", _extends({
+      className: cx("".concat(prefix, "--date-picker"), "".concat(prefix, "--date-picker--range"), "".concat(prefix, "--skeleton"), className)
+    }, rest), dateInput, dateInput));
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-item")
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".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.string,
+
+  /**
+   * Specify the id to add.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Specify whether the skeleton should be of range date picker.
+   */
+  range: PropTypes.bool
+};
+var DatePickerSkeleton$1 = DatePickerSkeleton;
+
+export { DatePickerSkeleton$1 as default };