@longline/aqua-ui 1.0.259 → 1.0.261

package/controls/ListView/Column.d.ts

@@ -19,6 +19,11 @@ interface IColumnProps {
      * Optional sort key. If not specified, column is not sortable.
      */
     sort?: string;
+    /**
+     * Optional function that, given any item, must return the value that
+     * sorting must work on.
+     */
+    sortValue?: (item: any) => any;
     /**
      * If set, this is the default sort column. If not set, the first column will
      * be the sort column.

package/controls/ListView/ListView.d.ts

@@ -10,6 +10,9 @@ interface IProps extends IListViewProps {
      */
     children?: React.ReactElement<IColumnProps> | React.ReactElement<IColumnProps>[];
 }
+/**
+ * Customizable `ListView` component.
+ */
 declare const ListView: {
     ({ data, dark, noheader, hover, striped, grid, total, singular, plural, shadow, ghost, rowHeight, columnsEditable, expanded, focusActive, virtual, overscan, ...props }: IProps): React.JSX.Element;
     displayName: string;

package/controls/ListView/ListView.js

@@ -71,8 +71,14 @@ var ListViewBase = function (props) {
     var _f = React.useState((_b = sortColumn.reverse) !== null && _b !== void 0 ? _b : false), reverse = _f[0], setReverse = _f[1];
     var _g = React.useState(null), data = _g[0], setData = _g[1];
     React.useEffect(function () {
-        if (Array.isArray(props.data))
-            setData(sortItems(props.data, sort, reverse));
+        // Don't sort if no data is available yet:
+        if (!Array.isArray(props.data))
+            return;
+        // Find column corresponding to sort key. Abort if column now found.
+        var sortColumn = columns.find(function (c) { return c.sort == sort; });
+        if (!sortColumn)
+            return;
+        setData(sortItems(props.data, sort, reverse, sortColumn.sortValue));
     }, [props.data, sort, reverse]);
     // If children change, then update columns state.
     React.useEffect(function () {
@@ -124,7 +130,9 @@ var ListViewBase = function (props) {
     }
     return (React.createElement(Table, __assign({}, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
 };
-// Wrapper for default values:
+/**
+ * Customizable `ListView` component.
+ */
 var ListView = function (_a) {
     var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dark, dark = _c === void 0 ? false : _c, _d = _a.noheader, noheader = _d === void 0 ? false : _d, _e = _a.hover, hover = _e === void 0 ? false : _e, _f = _a.striped, striped = _f === void 0 ? false : _f, _g = _a.grid, grid = _g === void 0 ? false : _g, _h = _a.total, total = _h === void 0 ? false : _h, _j = _a.singular, singular = _j === void 0 ? "record" : _j, _k = _a.plural, plural = _k === void 0 ? "records" : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, _q = _a.expanded, expanded = _q === void 0 ? false : _q, _r = _a.focusActive, focusActive = _r === void 0 ? false : _r, _s = _a.virtual, virtual = _s === void 0 ? false : _s, _t = _a.overscan, overscan = _t === void 0 ? 10 : _t, props = __rest(_a, ["data", "dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded", "focusActive", "virtual", "overscan"]);
     return React.createElement(ListViewBase, __assign({ data: data, dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable, expanded: expanded, focusActive: focusActive, virtual: virtual, overscan: overscan }, props));

package/controls/ListView/elements/sortItems.d.ts

@@ -2,5 +2,5 @@
  * Sort function. By default, this sorts items by comparing the "sort" field.
  * However, a custom value retrieval function can be provided.
  */
-declare const sortItems: (items: any[], sort: string, reverse: boolean, onSortValue?: (item: any, key: string) => any) => any[];
+declare const sortItems: (items: any[], sort: string, reverse: boolean, onSortValue?: (item: any) => any) => any[];
 export { sortItems };

package/controls/ListView/elements/sortItems.js

@@ -17,8 +17,8 @@ var sortItems = function (items, sort, reverse, onSortValue) {
         var _a, _b;
         if (a == null || b == null)
             return 0;
-        var vA = (_a = (onSortValue ? onSortValue(a, sort) : a[sort])) !== null && _a !== void 0 ? _a : "";
-        var vB = (_b = (onSortValue ? onSortValue(b, sort) : b[sort])) !== null && _b !== void 0 ? _b : "";
+        var vA = (_a = (onSortValue ? onSortValue(a) : a[sort])) !== null && _a !== void 0 ? _a : "";
+        var vB = (_b = (onSortValue ? onSortValue(b) : b[sort])) !== null && _b !== void 0 ? _b : "";
         // Trim strings, because leading spaces will throw sort off.
         if (typeof vA === 'string')
             vA = vA.trim();

package/controls/PrimaryButton/PrimaryButton.js

@@ -54,7 +54,7 @@ var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
         outlineColor: (p.positive || p.negative) ? p.theme.colors.primary[1]
             : p.theme.colors.accent
     };
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 4px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"], [" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 4px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  // Size:\n  height: 46px; // was 56\n  padding-left: 12px; // was 16\n  padding-right: 12px; // was 16\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 2px; // was 4\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"], [" \n  // Size:\n  height: 46px; // was 56\n  padding-left: 12px; // was 16\n  padding-right: 12px; // was 16\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 2px; // was 4\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"
     /**
      * Primary buttons denote the primary action. They may have icons or not and
      * have three colors: `positive`, `negative`, and themed (the default).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.259",
+  "version": "1.0.261",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",