@bigbinary/neeto-fields-frontend 1.0.5 → 1.0.7

package/README.md

@@ -20,6 +20,10 @@ referred as custom fields) for the resources across neeto products.
     - [transformValues](#2-neetofieldsutilstransformvalues)
   - [Hooks](#hooks)
     - [useFetchFields](#1-usefetchfields)
+    - [useShowFields](#2-useshowfield)
+    - [useCreateField](#3-usecreatefield)
+    - [useUpdateField](#4-useupdatefield)
+    - [useDestroyField](#5-usedestroyfield)
 - [Customizability](#customizability)
   - [Engine customizability](#engine-customizability)
 - [Development instructions](#development-instructions)
@@ -45,7 +49,7 @@ referred as custom fields) for the resources across neeto products.
   `kinds` are:
 
   `text`, `number`, `monetary`, `single_option`, `multi_option`, `date`, `time`,
-  `date_range`, `time_range`, `text_area`, `person`, `checkbox`, `regex`,
+  `date_range`, `time_range`, `textarea`, `person`, `checkbox`, `regex`,
   `integer`, `decimal`, `datetime`.
 
 # Installation instructions
@@ -164,7 +168,8 @@ default, but you can customize its behavior by passing optional props.
    in the `children`. `validations` must be provided as a map with the field
    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.
+   the corresponding value. Prop `hideRequiredSwitch` set to `true` hides the
+   toggle switch for `isRequried`.
 7. `showStateFilter`: Boolean value which specifies whether to show or hide
    state filters.
 8. `fieldStatesTaxonomy`: Specifies the names to be rendered for `active` and
@@ -306,8 +311,18 @@ specific resource.
    key and the component rendering callback function as the value. The callback
    function can expect the `field` object as argument.
 7. `className`: Class names for styling.
-8. showBorder: Boolean value to specify whether to show or hide borders. Default
-   true.
+8. `showBorder`: Boolean value to specify whether to show or hide borders.
+   Default true.
+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.
+12. `fieldContainerClassName`: Class names for styling the `div` containing the
+    input field.
+13. `fieldClassName`: Class names for styling the field.
+14. `labelClassName`: Class names for styling the label for fields.
 
 #### Usage:
 
@@ -316,7 +331,10 @@ Say the resource over here is a user.
 ```jsx
 import { FieldValuesContainer } from "@bigbinary/neeto-fields-frontend";
 
+const formRefs = useRef({});
+
 <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}
@@ -344,6 +362,11 @@ the following props:
    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.
+3. `formRefs`: A React Ref object that can be used to access the Formik context
+   of the form.
+4. `disabled`: Boolean value to specify whether to disable all fields.
+5. `isRequiredColumnName`: The name of column which holds the value which
+   suggests if a field value is a `required` one or not.
 
 > :memo: **_Note:_**
 >
@@ -363,6 +386,8 @@ import {
   neetoFieldsUtils,
 } from "@bigbinary/neeto-fields-frontend";
 
+const formRef = useRef();
+
 const HostForm = () => {
   const {
     data: { fields },
@@ -386,7 +411,7 @@ const HostForm = () => {
     >
       {/* Other host specific input fields */}
 
-      <FieldInputs fields={fields} />
+      <FieldInputs formRef={formRef} fields={fields} />
 
       <Button type="submit" label="Submit" />
     </Form>
@@ -472,13 +497,64 @@ This is a React Query hook for fetching all the fields.
 
 ```jsx
 const {
-  data: { fields },
+  data: { fields, count, activeFieldsCount, inactiveFieldsCount },
 } = useFetchFields({
   resourceType: "users",
   ownerId: "ownerId",
 });
 ```
 
+#### 2. `useShowField`
+
+This is a React Query hook for fetching details of a field.
+
+#### Argument
+
+- `fieldId`: The ID of field for fetching details.
+
+#### Usage
+
+```jsx
+const {
+  data: { field },
+} = useShowField(fieldId);
+```
+
+#### 3. `useCreateField`
+
+This is a React Query hook for creating a field.
+
+#### Usage
+
+```jsx
+const { mutate: create } = useCreateField();
+const payload = { name, kind, resourceType, ownerId, data };
+create(payload);
+```
+
+#### 4. `useUpdateField`
+
+This is a React Query hook for updating a field.
+
+#### Usage
+
+```jsx
+const { mutate: update } = useUpdateField();
+const payload = { name, kind, resourceType, ownerId, data };
+update({ fieldId, payload });
+```
+
+#### 5. `useDestroyField`
+
+This is a React Query hook for deleting a field.
+
+#### Usage
+
+```jsx
+const { mutate: delete } = useDestroyField();
+delete(fieldId)
+```
+
 # Customizability
 
 ## Engine customizability