@bigbinary/neeto-form-frontend 1.0.30 → 1.0.32
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 +43 -33
- package/dist/index.cjs.js +48797 -44025
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +48600 -43828
- package/dist/index.js.map +1 -1
- package/dist/main.css +1 -1
- package/index.d.ts +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,21 +62,24 @@ 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. |
|
|
82
|
+
| `allowAdditionalGuests` | `boolean` | To specify whether we need to allow additional guests input field in the form. If specified as `true` a checkbox will be displayed in the form to allow additional guests. The default value will be `false`. (neetoCal specific) |
|
|
80
83
|
|
|
81
84
|
`ExternalForm` component is used to render a form.
|
|
82
85
|
|
|
@@ -144,16 +147,17 @@ const {
|
|
|
144
147
|
```
|
|
145
148
|
|
|
146
149
|
Following components are currently available:
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
150
|
+
|
|
151
|
+
- `Email`
|
|
152
|
+
- `Dropdown`
|
|
153
|
+
- `ShortText`
|
|
154
|
+
- `LongText`
|
|
155
|
+
- `MultipleChoice`
|
|
156
|
+
- `SingleChoice`
|
|
157
|
+
- `Phone`
|
|
158
|
+
- `Rating`
|
|
159
|
+
- `Terms`
|
|
160
|
+
- `StarRating`
|
|
157
161
|
|
|
158
162
|
## Hooks
|
|
159
163
|
|
|
@@ -204,19 +208,24 @@ const Component = () => {
|
|
|
204
208
|
|
|
205
209
|
The usage is as follows.
|
|
206
210
|
|
|
207
|
-
|
|
208
211
|
```js
|
|
209
|
-
import {
|
|
212
|
+
import {
|
|
213
|
+
useForm,
|
|
214
|
+
useForm,
|
|
215
|
+
useCreateForm,
|
|
216
|
+
useUpdateForm,
|
|
217
|
+
useDeleteForm,
|
|
218
|
+
} from "@bigbinary/neeto-form-frontend";
|
|
210
219
|
|
|
211
220
|
const Component = () => {
|
|
212
221
|
const { data: forms, isLoading } = useForms();
|
|
213
|
-
const { data: form, isLoading } = useForm({formId: "form-id"});
|
|
222
|
+
const { data: form, isLoading } = useForm({ formId: "form-id" });
|
|
214
223
|
|
|
215
224
|
const { mutate: createForm, isLoading } = useCreateForm();
|
|
216
225
|
createForm(payload);
|
|
217
226
|
|
|
218
227
|
const { mutate: updateForm, isLoading } = useUpdateForm();
|
|
219
|
-
updateForm({id: "form-id", values: payload});
|
|
228
|
+
updateForm({ id: "form-id", values: payload });
|
|
220
229
|
|
|
221
230
|
const { mutate: deleteForm, isLoading } = useDeleteForm();
|
|
222
231
|
deleteForm("form-id");
|
|
@@ -225,12 +234,13 @@ const Component = () => {
|
|
|
225
234
|
};
|
|
226
235
|
```
|
|
227
236
|
|
|
228
|
-
|
|
237
|
+
_`useCreate`, `useUpdate` & `useDelete` uses react-query's useMutation hook
|
|
238
|
+
under the hood._
|
|
229
239
|
|
|
230
|
-
|
|
240
|
+
_`useForm` & `useForms` uses react-query's useQuery hook under the hood._
|
|
231
241
|
|
|
232
|
-
|
|
233
|
-
|
|
242
|
+
_We can pass in extra options supported by react-query to these hooks. We can
|
|
243
|
+
also destructure all react-query supported props from the response._
|
|
234
244
|
|
|
235
245
|
## Development
|
|
236
246
|
|