@shopify/react-form - npm Package Compare versions

Comparing version 0.0.0-snapshot-20220829233403 to 0.0.0-snapshot-20220907212019

build/cjs/hooks/list/dynamiclist.js

@@ -37,2 +37,6 @@ 'use strict';
 
+  function editItem(editedItem, index) {
+    dispatch(reducer.editFieldItemAction(editedItem, index));
+  }
+
   function moveItem(fromIndex, toIndex) {
@@ -46,6 +50,12 @@ dispatch(reducer.moveFieldItemAction(fromIndex, toIndex));
 
+  function removeItems(indicesToRemove) {
+    dispatch(reducer.removeFieldItemsAction(indicesToRemove));
+  }
+
   return {
     fields,
     addItem,
+    editItem,
     removeItem,
+    removeItems,
     moveItem,
@@ -52,0 +62,0 @@ reset,

build/cjs/hooks/list/hooks/reducer.js

@@ -25,2 +25,11 @@ 'use strict';
 }
+function editFieldItemAction(editedItem, index) {
+  return {
+    type: 'editFieldItem',
+    payload: {
+      editedItem,
+      index
+    }
+  };
+}
 function moveFieldItemAction(fromIndex, toIndex) {
@@ -43,2 +52,10 @@ return {
 }
+function removeFieldItemsAction(indicesToRemove) {
+  return {
+    type: 'removeFieldItems',
+    payload: {
+      indicesToRemove
+    }
+  };
+}
 function updateAction(payload) {
@@ -116,2 +133,19 @@ return {
 
+    case 'editFieldItem':
+      {
+        var _state$list, _state$list$map;
+
+        const {
+          editedItem,
+          index
+        } = action.payload; // Don't do a full rewrite of the object, only edit data which is supplied.
+
+        const list = state === null || state === void 0 ? void 0 : (_state$list = state.list) === null || _state$list === void 0 ? void 0 : (_state$list$map = _state$list.map) === null || _state$list$map === void 0 ? void 0 : _state$list$map.call(_state$list, (item, i) => i === index ? { ...item,
+          ...editedItem
+        } : item);
+        return { ...state,
+          list
+        };
+      }
+
     case 'removeFieldItem':
@@ -126,2 +160,13 @@ {
 
+    case 'removeFieldItems':
+      {
+        var _action$payload$indic, _action$payload;
+
+        const indicesToRemove = (_action$payload$indic = action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : _action$payload.indicesToRemove) !== null && _action$payload$indic !== void 0 ? _action$payload$indic : [];
+        const list = state.list.filter((_, i) => !indicesToRemove.includes(i));
+        return { ...state,
+          list
+        };
+      }
+
     case 'updateError':
@@ -203,2 +248,3 @@ {
 exports.addFieldItemAction = addFieldItemAction;
+exports.editFieldItemAction = editFieldItemAction;
 exports.moveFieldItemAction = moveFieldItemAction;
@@ -208,2 +254,3 @@ exports.newDefaultAction = newDefaultAction;
 exports.removeFieldItemAction = removeFieldItemAction;
+exports.removeFieldItemsAction = removeFieldItemsAction;
 exports.resetAction = resetAction;
@@ -210,0 +257,0 @@ exports.resetListAction = resetListAction;

build/ts/hooks/list/dynamiclist.d.ts

@@ -1,2 +0,2 @@
-import { FieldDictionary } from '../../types';
+import { FieldDictionary, FieldStates } from '../../types';
 import { FieldListConfig } from './baselist';
@@ -6,3 +6,5 @@ export interface DynamicList<Item extends object> {
     addItem(factoryArgument?: any): void;
+    editItem(item: FieldStates<Item>, index: number): void;
     removeItem(index: number): void;
+    removeItems(indicesToRemove: number[]): void;
     moveItem(fromIndex: number, toIndex: number): void;
@@ -9,0 +11,0 @@ reset(): void;

build/ts/hooks/list/hooks/index.d.ts

 export { useHandlers } from './handlers';
-export { reinitializeAction, useListReducer, updateAction, updateErrorAction, newDefaultAction, resetAction, addFieldItemAction, moveFieldItemAction, removeFieldItemAction, resetListAction, } from './reducer';
+export { reinitializeAction, useListReducer, updateAction, updateErrorAction, newDefaultAction, resetAction, addFieldItemAction, editFieldItemAction, moveFieldItemAction, removeFieldItemAction, removeFieldItemsAction, resetListAction, } from './reducer';
 export type { ListAction, ListState } from './reducer';
 //# sourceMappingURL=index.d.ts.map

build/ts/hooks/list/hooks/reducer.d.ts

 /// <reference types="react" />
 import { FieldStates, ErrorValue } from '../../../types';
-export declare type ListAction<Item> = ReinitializeAction<Item> | AddFieldItemAction<Item> | MoveFieldItemAction | RemoveFieldItemAction | UpdateErrorAction<Item> | UpdateAction<Item, keyof Item> | ResetAction<Item, keyof Item> | NewDefaultAction<Item, keyof Item> | ResetListAction;
+export declare type ListAction<Item> = ReinitializeAction<Item> | AddFieldItemAction<Item> | EditFieldItemAction<FieldStates<object>> | MoveFieldItemAction | RemoveFieldItemAction | RemoveFieldItemsAction | UpdateErrorAction<Item> | UpdateAction<Item, keyof Item> | ResetAction<Item, keyof Item> | NewDefaultAction<Item, keyof Item> | ResetListAction;
 interface ReinitializeAction<Item> {
@@ -16,2 +16,9 @@ type: 'reinitialize';
 }
+interface EditFieldItemAction<Item extends object> {
+    type: 'editFieldItem';
+    payload: {
+        index: number;
+        editedItem: Item;
+    };
+}
 interface MoveFieldItemAction {
@@ -33,2 +40,8 @@ type: 'moveFieldItem';
 }
+interface RemoveFieldItemsAction {
+    type: 'removeFieldItems';
+    payload: {
+        indicesToRemove: number[];
+    };
+}
 interface TargetedPayload<Item, Key extends keyof Item> {
@@ -70,4 +83,6 @@ target: {
 export declare function addFieldItemAction<Item>(list: Item[]): AddFieldItemAction<Item>;
+export declare function editFieldItemAction<Item extends object>(editedItem: Item, index: number): EditFieldItemAction<Item>;
 export declare function moveFieldItemAction(fromIndex: number, toIndex: number): MoveFieldItemAction;
 export declare function removeFieldItemAction(indexToRemove: number): RemoveFieldItemAction;
+export declare function removeFieldItemsAction(indicesToRemove: number[]): RemoveFieldItemsAction;
 export declare function updateAction<Item, Key extends keyof Item>(payload: TargetedPayload<Item, Key>): UpdateAction<Item, Key>;
@@ -74,0 +89,0 @@ export declare function resetAction<Item, Key extends keyof Item>(payload: ResetAction<Item, Key>['payload']): ResetAction<Item, Key>;

build/ts/hooks/submit.d.ts

@@ -1,5 +0,4 @@
-/// <reference types="react" />
 import { FormMapping, SubmitHandler, SubmitResult, FieldBag, FormError, DynamicListBag } from '../types';
 export declare function useSubmit<T extends FieldBag>(onSubmit: SubmitHandler<FormMapping<T, "value">> | undefined, fieldBag: T, makeCleanAfterSubmit?: boolean, dynamicListBag?: DynamicListBag): {
-    submit: (event?: import("react").FormEvent<Element> | undefined) => Promise<void>;
+    submit: (event?: React.FormEvent) => Promise<void>;
     submitting: boolean;
@@ -6,0 +5,0 @@ errors: FormError[];

package.json

 {
   "name": "@shopify/react-form",
-  "version": "0.0.0-snapshot-20220829233403",
+  "version": "0.0.0-snapshot-20220907212019",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Manage React forms tersely and safely-typed with no magic using React hooks",

README.md

@@ -359,3 +359,3 @@ # `@shopify/react-form`
   validates: (title) => {
-    if (title.length > 3) {
+    if (title.length <= 3) {
       return 'Title must be longer than three characters';
@@ -374,3 +374,3 @@ }
     (title) => {
-      if (title.length > 3) {
+      if (title.length <= 3) {
         return 'Title must be longer than three characters';
@@ -701,2 +701,3 @@ }
   removeItem,
+  removeItems,
   moveItem,
@@ -729,2 +730,3 @@ reset,
   removeItem,
+  removeItems,
   moveItem,
@@ -759,6 +761,4 @@ reset,
 
-const {fields, addItem, removeItem, moveItem, reset, dirty} = useDynamicList(
-  loadedCards,
-  emptyCardFactory,
-);
+const {fields, addItem, removeItem, removeItems, moveItem, reset, dirty} =
+  useDynamicList(loadedCards, emptyCardFactory);
 ```
@@ -799,2 +799,5 @@
   ))}
+  <Button onClick={() => removeItems([0])}>
+    Remove multiple fields by index
+  </Button>
   <Button onClick={() => addItem()}>Add Card</Button>
@@ -801,0 +804,0 @@ <Button disabled={!dirty} onClick={reset}>

No alert changes

Improved metrics

Total package byte prevSize

236068

2.99%

Lines of code

3510

3.39%

Number of lines in readme file

1403

0.21%

No dependency changes