fix: add onChange and inputValue for bookmarksection textfield (#167)

Altinn · Jan 9, 2025 · e07105e · e07105e
1 parent d47277c
commit e07105e
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 27 deletions.
diff --git a/lib/components/Autocomplete/Autocomplete.stories.tsx b/lib/components/Autocomplete/Autocomplete.stories.tsx
@@ -302,7 +302,6 @@ export const ScopesResultsAndSuggestions: Story = {
     },
     items: [
       ...ScopesAndMixedResults.args.items,
-
       {
         id: '2a',
         groupId: '2',

diff --git a/lib/components/Bookmarks/BookmarksListItem.tsx b/lib/components/Bookmarks/BookmarksListItem.tsx
@@ -15,6 +15,10 @@ import { type QueryItemProps, QueryLabel } from './QueryLabel';
 
 export interface BookmarksListItemProps extends ListItemInputProps {
   id: string;
+  /** Input value */
+  inputValue?: string;
+  /** On change */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   /** Loading */
   loading?: boolean;
   /** Expanded */
@@ -37,11 +41,6 @@ export interface BookmarksListItemProps extends ListItemInputProps {
   as?: React.ElementType;
 }
 
-interface FormData {
-  title?: string;
-  params?: QueryItemProps[];
-}
-
 export const BookmarksListItem = ({
   size = 'sm',
   icon = 'bookmark',
@@ -54,18 +53,12 @@ export const BookmarksListItem = ({
   onToggle,
   saveButton,
   removeButton,
+  inputValue,
+  onChange,
   as,
   ...rest
 }: BookmarksListItemProps) => {
-  const [formData, setFormData] = useState<FormData>({ title, params });
-
-  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = event.target;
-    setFormData((prevState) => ({
-      ...prevState,
-      [name]: value,
-    }));
-  };
+  const [internalValue, setInternalValue] = useState<string>('');
 
   if (expanded && !loading) {
     return (
@@ -82,7 +75,20 @@ export const BookmarksListItem = ({
         {expanded && (
           <Section padding="lg" spacing="lg">
             <QueryLabel params={params} />
-            {titleField && <TextField {...titleField} name="title" value={formData?.title || ''} onChange={onChange} />}
+            {titleField && (
+              <TextField
+                {...titleField}
+                name="title"
+                value={typeof inputValue === 'string' ? inputValue : internalValue}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  if (typeof onChange === 'function') {
+                    onChange(e);
+                  } else {
+                    setInternalValue(e.target.value);
+                  }
+                }}
+              />
+            )}
             {(saveButton || removeButton) && (
               <Flex as="footer" direction="row" spacing="sm">
                 {saveButton && <Button {...saveButton} />}

diff --git a/lib/components/Bookmarks/BookmarksSection.stories.tsx b/lib/components/Bookmarks/BookmarksSection.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { type ChangeEvent, useMemo, useState } from 'react';
 import { BookmarksSection, type BookmarksSectionProps } from './BookmarksSection';
 
 const meta = {
@@ -83,6 +83,32 @@ export const ExpandedItem: Story = {
 
 export const ControlledState = (args: BookmarksSectionProps) => {
   const [expandedId, setExpandedId] = useState<string>('');
+  const [inputValue, setInputValue] = useState<Record<string, string>>({});
+
+  const bookmarkProps: BookmarksSectionProps = useMemo(
+    () => ({
+      ...args,
+      items: args.items.map((item) => ({
+        ...item,
+        inputValue: (typeof inputValue[item.id] === 'undefined' ? item.title : inputValue[item.id]) ?? '',
+        onChange: (e: ChangeEvent<HTMLInputElement>) => {
+          setInputValue((prevState) => ({
+            ...prevState,
+            [item.id]: e.target.value,
+          }));
+        },
+        onToggle: () => onToggle(item.id),
+        saveButton: {
+          ...item.saveButton,
+          onClick: () => {
+            alert(`Lagre søk med tittel ${inputValue[item.id]}`);
+          },
+        },
+        expanded: expandedId === item.id,
+      })),
+    }),
+    [args, expandedId, inputValue],
+  );
 
   const onToggle = (id: string) => {
     setExpandedId((prevState) => {
@@ -93,15 +119,15 @@ export const ControlledState = (args: BookmarksSectionProps) => {
     });
   };
 
-  return <BookmarksSection {...args} expandedId={expandedId} onToggle={onToggle} />;
+  return <BookmarksSection {...bookmarkProps} expandedId={expandedId} onToggle={onToggle} />;
 };
 
 export const LoadingState: Story = {
   args: {
     loading: true,
     title: 'Henter lagrede søk ...',
     description: '',
-    items: [{ id: '1', title: 'Loading the bookmark' }],
+    items: [{ id: '1', title: 'Loading the bookmark', inputValue: '', onChange: () => {} }],
   },
 };
 
@@ -133,6 +159,8 @@ export const AsLink: Story = {
         removeButton: {
           label: 'Slett',
         },
+        inputValue: '',
+        onChange: () => {},
         as: (props) => <a {...props} href="#bookmark-1" />,
         params: [
           { type: 'search', label: 'Skatt' },
@@ -141,6 +169,8 @@ export const AsLink: Story = {
       },
       {
         id: 'bookmark-2',
+        inputValue: '',
+        onChange: () => {},
         as: (props) => <a {...props} href="#bookmark-2" />,
         params: [
           { type: 'search', label: 'Skatt' },

diff --git a/package.json b/package.json
@@ -2,17 +2,11 @@
   "name": "@altinn/altinn-components",
   "version": "0.13.0",
   "main": "dist/index.js",
-  "files": [
-    "dist/",
-    "!dist/stories/",
-    "!dist/components/*/*.stories.js"
-  ],
+  "files": ["dist/", "!dist/stories/", "!dist/components/*/*.stories.js"],
   "types": "dist/types/lib/index.d.ts",
   "type": "module",
   "description": "Reusable react components",
-  "sideEffects": [
-    "*.css"
-  ],
+  "sideEffects": ["*.css"],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",