@bigbinary/neeto-form-frontend 1.0.30 → 1.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -33
- package/dist/index.cjs.js +1303 -811
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1303 -811
- package/dist/index.js.map +1 -1
- package/index.d.ts +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,21 +62,23 @@ const App = () => {
|
|
|
62
62
|
import { BuildForm } from "@bigbinary/neeto-form-frontend";
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
-
| prop | type
|
|
66
|
-
| ------------------------ |
|
|
67
|
-
| `id` | `string`
|
|
68
|
-
| `onUpdate` | `function`
|
|
69
|
-
| `buildRequestArgs` | `object`
|
|
70
|
-
| `showAddQuestionDivider` | `boolean`
|
|
71
|
-
| `nonRemovableFields` | `string[]`
|
|
72
|
-
| `submitButtonProps` | `object`
|
|
73
|
-
| `cancelButtonProps` | `object`
|
|
74
|
-
| `requiredFields` | `string[]`
|
|
75
|
-
| `questionKinds` | `object[]`
|
|
76
|
-
| `isKindAlreadyActive` | `function`
|
|
77
|
-
| `getActiveKindDetails` | `function`
|
|
78
|
-
| `showLoader` | `boolean`
|
|
79
|
-
| `kindUniqueOn` | `string[]`
|
|
65
|
+
| prop | type | description |
|
|
66
|
+
| ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
67
|
+
| `id` | `string` | Form id |
|
|
68
|
+
| `onUpdate` | `function` | Callback for form update |
|
|
69
|
+
| `buildRequestArgs` | `object` | Arguments for build request |
|
|
70
|
+
| `showAddQuestionDivider` | `boolean` | To show add question divider |
|
|
71
|
+
| `nonRemovableFields` | `string[]` | Field kinds that cant be deleted from a form. Accepts array of kinds: `name`, `email`, `phone`, `rating`, `checkbox`, `dropdown` |
|
|
72
|
+
| `submitButtonProps` | `object` | Props for submit button |
|
|
73
|
+
| `cancelButtonProps` | `object` | Props for cancel button |
|
|
74
|
+
| `requiredFields` | `string[]` | Fields that are required. Provided fields will be treated as required by default in the External form, the checkbox for toggling `required` will be hidden for the fields. Accepts array of kinds: `name`, `email`, `phone`, `rating`, `checkbox`, `dropdown` |
|
|
75
|
+
| `questionKinds` | `object[]` | To override default question kinds |
|
|
76
|
+
| `isKindAlreadyActive` | `function` | To override the logic for equality checking of question kinds. The function will receive `activeQuestions` and `kind` as arguments |
|
|
77
|
+
| `getActiveKindDetails` | `function` | To override the logic for extracting the details of the specified item. The function will receive `allQuestionKinds` and `item` as arguments and returns `kind`, `label`, `FieldComponent`, `FieldIcon` and `isSingular` props for the specified `item` |
|
|
78
|
+
| `showLoader` | `boolean` | To specify whether we need to show a page loader while loading questions. If specified as `true` a page loader will be displayed otherwise placeholder data will be shown while loading questions. The default value will be `false` |
|
|
79
|
+
| `kindUniqueOn` | `string[]` | To specify the prop used for uniquely identifying each question kind. Accepts the path of the prop as a `string[]`. The default value will be `["type"]` |
|
|
80
|
+
| `isFieldRequired` | `(item: Item) => boolean;` | To specify whether a question is required or not. The function will receive `item` as an argument and returns a boolean value. Fields that return `true` will be treated as required by default in the External form |
|
|
81
|
+
| `isQuestionDeletable` | `(item: Item) => boolean;` | To specify whether a question is deletable or not. The function will receive `item` as an argument and returns a boolean value. Fields that return `true` cannot be removed from a form. |
|
|
80
82
|
|
|
81
83
|
`ExternalForm` component is used to render a form.
|
|
82
84
|
|
|
@@ -144,16 +146,17 @@ const {
|
|
|
144
146
|
```
|
|
145
147
|
|
|
146
148
|
Following components are currently available:
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
149
|
+
|
|
150
|
+
- `Email`
|
|
151
|
+
- `Dropdown`
|
|
152
|
+
- `ShortText`
|
|
153
|
+
- `LongText`
|
|
154
|
+
- `MultipleChoice`
|
|
155
|
+
- `SingleChoice`
|
|
156
|
+
- `Phone`
|
|
157
|
+
- `Rating`
|
|
158
|
+
- `Terms`
|
|
159
|
+
- `StarRating`
|
|
157
160
|
|
|
158
161
|
## Hooks
|
|
159
162
|
|
|
@@ -204,19 +207,24 @@ const Component = () => {
|
|
|
204
207
|
|
|
205
208
|
The usage is as follows.
|
|
206
209
|
|
|
207
|
-
|
|
208
210
|
```js
|
|
209
|
-
import {
|
|
211
|
+
import {
|
|
212
|
+
useForm,
|
|
213
|
+
useForm,
|
|
214
|
+
useCreateForm,
|
|
215
|
+
useUpdateForm,
|
|
216
|
+
useDeleteForm,
|
|
217
|
+
} from "@bigbinary/neeto-form-frontend";
|
|
210
218
|
|
|
211
219
|
const Component = () => {
|
|
212
220
|
const { data: forms, isLoading } = useForms();
|
|
213
|
-
const { data: form, isLoading } = useForm({formId: "form-id"});
|
|
221
|
+
const { data: form, isLoading } = useForm({ formId: "form-id" });
|
|
214
222
|
|
|
215
223
|
const { mutate: createForm, isLoading } = useCreateForm();
|
|
216
224
|
createForm(payload);
|
|
217
225
|
|
|
218
226
|
const { mutate: updateForm, isLoading } = useUpdateForm();
|
|
219
|
-
updateForm({id: "form-id", values: payload});
|
|
227
|
+
updateForm({ id: "form-id", values: payload });
|
|
220
228
|
|
|
221
229
|
const { mutate: deleteForm, isLoading } = useDeleteForm();
|
|
222
230
|
deleteForm("form-id");
|
|
@@ -225,12 +233,13 @@ const Component = () => {
|
|
|
225
233
|
};
|
|
226
234
|
```
|
|
227
235
|
|
|
228
|
-
|
|
236
|
+
_`useCreate`, `useUpdate` & `useDelete` uses react-query's useMutation hook
|
|
237
|
+
under the hood._
|
|
229
238
|
|
|
230
|
-
|
|
239
|
+
_`useForm` & `useForms` uses react-query's useQuery hook under the hood._
|
|
231
240
|
|
|
232
|
-
|
|
233
|
-
|
|
241
|
+
_We can pass in extra options supported by react-query to these hooks. We can
|
|
242
|
+
also destructure all react-query supported props from the response._
|
|
234
243
|
|
|
235
244
|
## Development
|
|
236
245
|
|