@bigbinary/neeto-fields-frontend 1.0.8 → 1.1.0

package/README.md

@@ -169,7 +169,9 @@ default, but you can customize its behavior by passing optional props.
    name as key and the corresponding yup validation schema as the value.
    `initialValues` must also be provided as a map with the field name as key and
    the corresponding value. Prop `hideRequiredSwitch` set to `true` hides the
-   toggle switch for `isRequried`.
+   toggle switch for `isRequried`. Also `onMutationSuccess`,a callback function
+   which is triggered on the success of mutation functions( create, update &
+   delete).
 7. `showStateFilter`: Boolean value which specifies whether to show or hide
    state filters.
 8. `fieldStatesTaxonomy`: Specifies the names to be rendered for `active` and
@@ -251,23 +253,31 @@ import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
 />;
 ```
 
-## 2. `AddField`
+## 2. `FieldsPane`
 
 <div align="center">
   <img src="https://s11.gifyu.com/images/SWngt.gif" alt="AddField component gif" width="700"/>
 </div>
 
-The `AddField` component consists of a button and a pane that opens when the
-button is clicked.
+This is the pane which handles the Add / Edit operations of the field.
 
 #### Props:
 
-1. `resourceType`: Specifies the resource_type of the field to be created via
+1. `isOpen`: Boolean state which specifies the open/close state of the pane.
+2. `onClose`: The function to be executed on closing the pane.
+3. `resourceType`: Specifies the resource_type of the field to be created via
    the pane.
-2. `allowedKinds`: Specifies the list of field kinds allowed to be created.
-3. `children`: Children components for the pane.
-4. `additionalValidations`: Validations for the formik fields in `children`.
-5. `initialValues`: Initial values for the formik fields in `children`.
+4. `allowedKinds`: Specifies the list of field kinds allowed to be created.
+5. `children`: Children components for the pane.
+6. `additionalValidations`: Validations for the formik fields in `children`.
+7. `initialValues`: Initial values for the formik fields in `children`.
+8. `selectedField`: The field object whose editing is concerned with. If this
+   prop is given, the pane will act as an Edit pane. Else it act as Add pane.
+9. `hideRequiredSwitch`: Specify whether to hide the `Is required` toggle switch
+   for field in pane.
+10. `ownerId`: The ID of the owner in case the owner is not an organization.
+11. `onMutationSuccess`: The callback function which is triggered on the success
+    of mutation functions( create, update & delete).
 
 #### Usage:
 
@@ -305,26 +315,26 @@ specific resource.
 4. `resourceId`: The ID of the resource.
 5. `ownerId`:The ID of the owner. This prop is required only if the owner is not
    an organization.
-6. `queryKeysToBeInvalidatedOnSuccess`: An array of queryKeys that should be
-   invalidated when changing the field value.
-7. `customComponents`: If the host application has any extra `kind` other than
+6. `customComponents`: If the host application has any extra `kind` other than
    the supported ones, you can specify the component to be displayed
    corresponding to that kind using this prop. It takes the `kind` name as the
    key and the component rendering callback function as the value. The callback
    function can expect the `field` object as argument.
-8. `className`: Class names for styling.
-9. `showBorder`: Boolean value to specify whether to show or hide borders.
+7. `className`: Class names for styling.
+8. `showBorder`: Boolean value to specify whether to show or hide borders.
    Default true.
-10. `formRefs`: A React Ref object that can be used to access the Formik context
-    of the forms corresponding to each field as key value pairs.
-11. `disabled`: Boolean value to specify whether to disable all fields.
-12. `isRequiredColumnName`: The name of column which holds the value which
+9. `formRefs`: A React Ref object that can be used to access the Formik context
+   of the forms corresponding to each field as key value pairs.
+10. `disabled`: Boolean value to specify whether to disable all fields.
+11. `isRequiredColumnName`: The name of column which holds the value which
     suggests if a field value is a `required` one or not. Default is
     `isRequired` column.
-13. `fieldContainerClassName`: Class names for styling the `div` containing the
+12. `fieldContainerClassName`: Class names for styling the `div` containing the
     input field.
-14. `fieldClassName`: Class names for styling the field.
-15. `labelClassName`: Class names for styling the label for fields.
+13. `fieldClassName`: Class names for styling the field.
+14. `labelClassName`: Class names for styling the label for fields.
+15. `onMutationSuccess`: The callback function which is triggered on the success
+    of mutation functions( create, update & delete).
 
 #### Usage:
 
@@ -334,13 +344,14 @@ Say the resource over here is a user.
 import { FieldValuesContainer } from "@bigbinary/neeto-fields-frontend";
 
 const formRefs = useRef({});
+const queryClient = useQueryClient();
 
 <FieldValuesContainer
   formRefs={formRefs}
   fieldValues={user.fieldValues} // We expect the user response from host's backend to send associated field_values with it.
-  queryKeysToBeInvalidatedOnSuccess={["users"]}
   resourceId={user?.id}
   resourceType="users"
+  onMutationSuccess={() => queryClient.invalidateQueries(["users"])}
   customComponents={{
     hostSpecificKindName: field => <HostSpecificInputFields />,
   }}
@@ -513,13 +524,14 @@ This is a React Query hook for fetching details of a field.
 #### Argument
 
 - `fieldId`: The ID of field for fetching details.
+- `ownerId`: The ID of the owner in case the owner is not an organization.
 
 #### Usage
 
 ```jsx
 const {
   data: { field },
-} = useShowField(fieldId);
+} = useShowField({ fieldId, ownerId });
 ```
 
 #### 3. `useCreateField`
@@ -530,7 +542,7 @@ This is a React Query hook for creating a field.
 
 ```jsx
 const { mutate: create } = useCreateField();
-const payload = { name, kind, resourceType, ownerId, data };
+const payload = { field: { name, kind, resourceType, ownerId, data } };
 create(payload);
 ```
 
@@ -542,7 +554,7 @@ This is a React Query hook for updating a field.
 
 ```jsx
 const { mutate: update } = useUpdateField();
-const payload = { name, kind, resourceType, ownerId, data };
+const payload = { field: { name, kind, resourceType, ownerId, data } };
 update({ fieldId, payload });
 ```
 
@@ -554,9 +566,12 @@ This is a React Query hook for deleting a field.
 
 ```jsx
 const { mutate: delete } = useDestroyField();
-delete(fieldId)
+delete({ fieldId })
 ```
 
+_Pass the `ownerId` too with the payload in case the owner is not an
+organization._
+
 # Customizability
 
 ## Engine customizability