@nulogy/components 6.3.2 → 6.4.0

package/dist/main.js

@@ -52640,6 +52640,89 @@
     }, props));
   };
 
+  var numericAlphabeticalSort = function numericAlphabeticalSort(a, b, numeric) {
+    return String(a).localeCompare(b, undefined, {
+      numeric: numeric,
+      sensitivity: "base"
+    });
+  };
+
+  var applySort = function applySort(rows, sortColumn, columns) {
+    return [].concat(rows).sort(function (a, b) {
+      var column = columns.find(function (col) {
+        return col.dataKey === sortColumn;
+      });
+      var numeric = column.numeric;
+      return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
+    });
+  };
+
+  var sortRows = function sortRows(rows, columns, sortState) {
+    var sortedRows = applySort(rows, sortState.sortColumn, columns);
+    return sortState.ascending ? sortedRows : sortedRows.reverse();
+  };
+
+  var SortingTable = function SortingTable(_a) {
+    var incomingColumns = _a.columns,
+        incomingRows = _a.rows,
+        initialSortColumn = _a.initialSortColumn,
+        props = __rest(_a, ["columns", "rows", "initialSortColumn"]);
+
+    var _useState = React.useState({
+      ascending: true,
+      sortColumn: initialSortColumn
+    }),
+        sortState = _useState[0],
+        setSortState = _useState[1];
+
+    var _useState2 = React.useState(function () {
+      return sortRows(incomingRows, incomingColumns, sortState);
+    }),
+        rows = _useState2[0],
+        setRows = _useState2[1];
+
+    var onSortChange = function onSortChange(dataKey) {
+      var newSortState;
+      setSortState(function (previousState) {
+        var ascending = previousState.sortColumn !== dataKey || !previousState.ascending;
+        newSortState = {
+          ascending: ascending,
+          sortColumn: dataKey
+        };
+        return newSortState;
+      });
+      setRows(function (previousState) {
+        return sortRows(previousState, incomingColumns, newSortState);
+      });
+    };
+
+    var transformColumn = function transformColumn(column) {
+      var isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
+      return Object.assign(Object.assign({}, column), {
+        headerFormatter: function headerFormatter(_ref) {
+          var label = _ref.label,
+              dataKey = _ref.dataKey;
+          return /*#__PURE__*/React__default['default'].createElement(Table.SortingHeader, {
+            onChange: function onChange() {
+              return onSortChange(dataKey);
+            },
+            label: label,
+            ascending: isAscending,
+            active: dataKey === sortState.sortColumn
+          });
+        }
+      });
+    };
+
+    var columns = incomingColumns.map(function (column) {
+      return transformColumn(column);
+    });
+    return /*#__PURE__*/React__default['default'].createElement(Table, Object.assign({
+      columns: columns,
+      rows: rows
+    }, props));
+  };
+
   exports.ALL_NDS_LOCALES = ALL_NDS_LOCALES;
   exports.Alert = Alert;
   exports.AnimatedBox = AnimatedBox;
@@ -52706,6 +52789,7 @@
   exports.SelectMultiValue = SelectMultiValue;
   exports.SelectOption = SelectOption;
   exports.Sidebar = Sidebar;
+  exports.SortingTable = SortingTable;
   exports.StatusIndicator = StatusIndicator;
   exports.Tab = Tab;
   exports.Table = Table;

package/dist/main.module.js

@@ -52614,4 +52614,87 @@ var Divider = function Divider(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, StatusIndicator, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };
+var numericAlphabeticalSort = function numericAlphabeticalSort(a, b, numeric) {
+  return String(a).localeCompare(b, undefined, {
+    numeric: numeric,
+    sensitivity: "base"
+  });
+};
+
+var applySort = function applySort(rows, sortColumn, columns) {
+  return [].concat(rows).sort(function (a, b) {
+    var column = columns.find(function (col) {
+      return col.dataKey === sortColumn;
+    });
+    var numeric = column.numeric;
+    return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
+  });
+};
+
+var sortRows = function sortRows(rows, columns, sortState) {
+  var sortedRows = applySort(rows, sortState.sortColumn, columns);
+  return sortState.ascending ? sortedRows : sortedRows.reverse();
+};
+
+var SortingTable = function SortingTable(_a) {
+  var incomingColumns = _a.columns,
+      incomingRows = _a.rows,
+      initialSortColumn = _a.initialSortColumn,
+      props = __rest(_a, ["columns", "rows", "initialSortColumn"]);
+
+  var _useState = useState({
+    ascending: true,
+    sortColumn: initialSortColumn
+  }),
+      sortState = _useState[0],
+      setSortState = _useState[1];
+
+  var _useState2 = useState(function () {
+    return sortRows(incomingRows, incomingColumns, sortState);
+  }),
+      rows = _useState2[0],
+      setRows = _useState2[1];
+
+  var onSortChange = function onSortChange(dataKey) {
+    var newSortState;
+    setSortState(function (previousState) {
+      var ascending = previousState.sortColumn !== dataKey || !previousState.ascending;
+      newSortState = {
+        ascending: ascending,
+        sortColumn: dataKey
+      };
+      return newSortState;
+    });
+    setRows(function (previousState) {
+      return sortRows(previousState, incomingColumns, newSortState);
+    });
+  };
+
+  var transformColumn = function transformColumn(column) {
+    var isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
+    return Object.assign(Object.assign({}, column), {
+      headerFormatter: function headerFormatter(_ref) {
+        var label = _ref.label,
+            dataKey = _ref.dataKey;
+        return /*#__PURE__*/React__default.createElement(Table.SortingHeader, {
+          onChange: function onChange() {
+            return onSortChange(dataKey);
+          },
+          label: label,
+          ascending: isAscending,
+          active: dataKey === sortState.sortColumn
+        });
+      }
+    });
+  };
+
+  var columns = incomingColumns.map(function (column) {
+    return transformColumn(column);
+  });
+  return /*#__PURE__*/React__default.createElement(Table, Object.assign({
+    columns: columns,
+    rows: rows
+  }, props));
+};
+
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };

package/dist/src/SortingTable/SortingTable.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { TableProps } from "../Table";
+declare type SortingTableProps = TableProps & {
+    initialSortColumn: string;
+};
+declare const SortingTable: React.FC<SortingTableProps>;
+export default SortingTable;

package/dist/src/SortingTable/SortingTable.story.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("../Table/BaseTable").BaseTableProps & {
+        selectedRows?: string[];
+        onRowSelectionChange?: (...args: any[]) => any;
+        onRowExpansionChange?: (...args: any[]) => any;
+        rowsPerPage?: number;
+        onPageChange?: (...args: any[]) => any;
+        selectAllAriaLabel?: string;
+        deselectAllAriaLabel?: string;
+        paginationCss?: any;
+        paginationProps?: any;
+        expandedRows?: any[];
+        hasSelectableRows?: boolean;
+        hasExpandableRows?: boolean;
+        onSelectRow?: (...args: any[]) => any;
+        onSelectHeader?: (...args: any[]) => any;
+        isHeaderSelected?: any;
+    } & {
+        initialSortColumn: string;
+    }>;
+};
+export default _default;
+export declare const _SortingTable: () => JSX.Element;

package/dist/src/SortingTable/index.d.ts

@@ -0,0 +1 @@
+export { default as SortingTable } from "./SortingTable";

package/dist/src/Table/{TableWithSorting.story.d.ts → TableWithCustomSorting.story.d.ts}

@@ -3,7 +3,7 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const WithSorting: {
+export declare const WithCustomSorting: {
     (): JSX.Element;
     story: {
         name: string;

package/dist/src/index.d.ts

@@ -46,3 +46,4 @@ export { AsyncSelect } from "./AsyncSelect";
 export { ApplicationFrame, Page, Sidebar } from "./Layout";
 export { useWindowDimensions } from "./utils";
 export { Divider } from "./Divider";
+export { SortingTable } from "./SortingTable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.3.2",
+  "version": "6.4.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {