Added PersistedPaneset component

CHANGELOG.md

@@ -9,6 +9,7 @@
 * Support custom `getEntity` and `getEntityTags` methods in `Tags` component (UIDATIMP-461)
 * Check if the component exists for `customField.type` before rendering. Fixes STSMACOM-333.
 * Change `redirectToView`, `redirectToEdit` props in CustomFields to `viewRoute` and `editRoute`. Refs UIU-1594.
+* Added `PersistedPaneset` component.
 
 ## [3.1.0](https://github.com/folio-org/stripes-smart-components/tree/v3.1.0) (2020-03-16)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v3.0.0...v3.1.0)

index.js

@@ -20,6 +20,8 @@ export { default as LocationSelection } from './lib/LocationSelection';
 
 export { default as PasswordValidationField } from './lib/PasswordValidationField';
 
+export { default as PersistedPaneset } from './lib/PersistedPaneset';
+
 export { default as ProxyManager } from './lib/ProxyManager';
 
 export { default as SearchAndSort } from './lib/SearchAndSort';

lib/PersistedPaneset/PersistedPaneset.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useLocalStorage, writeStorage } from '@rehooks/local-storage';
+
+import { Paneset } from '@folio/stripes-components';
+
+const propTypes = {
+  appId: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  id: PropTypes.string.isRequired,
+};
+
+const PersistedPaneset = ({
+  appId,
+  children,
+  id: panesetId,
+}) => {
+  const persistKey = `${appId}/${panesetId}/layout`;
+  const [storedPanesetLayout] = useLocalStorage(persistKey);
+
+  return (
+    <Paneset
+      id={panesetId}
+      initialLayouts={storedPanesetLayout}
+      onResize={({ layoutCache }) => {
+        // We don't want to persist any layout that contains a NaN so filter those out first.
+        const persistedLayoutCache = layoutCache.filter(layout => {
+          const widths = Object.values(layout);
+          const hasNaN = widths.some(width => width.includes('NaN'));
+          return !hasNaN;
+        });
+
+        writeStorage(persistKey, persistedLayoutCache);
+      }}
+    >
+      {children}
+    </Paneset>
+  );
+};
+
+PersistedPaneset.propTypes = propTypes;
+export default PersistedPaneset;

lib/PersistedPaneset/index.js

@@ -0,0 +1 @@
+export { default } from './PersistedPaneset';

lib/PersistedPaneset/readme.md

@@ -0,0 +1,14 @@
+# PersistedPaneset
+
+Paneset with LocalStorage-backed persistence
+
+## Description
+
+`stripes-components` provides a `Paneset` component that supports drag-and-drop resizing of its child `Pane`s. This component saves those layout sizes to the client browser's `localStorage`.
+
+### Properties
+
+Name | Type | Required | Description
+--- | --- | --- | ----
+appId | string | Yes | The app ID that will be used for namespacing `localStorage`. Eg, `@folio/users`
+id | string | Yes | The ID of the Paneset itself. This will be used for namespacing `localStorage`.

package.json

@@ -60,6 +60,7 @@
     "@folio/stripes-form": "~3.2.0",
     "@folio/stripes-logger": "~1.0.0",
     "@folio/stripes-util": "~2.1.0",
+    "@rehooks/local-storage": "^2.3.0",
     "classnames": "^2.2.6",
     "final-form": "^4.18.2",
     "final-form-arrays": "^3.0.2",