@connect-soft/form-generator 1.1.0-alpha3 → 1.1.0-alpha4

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/dist/index.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import React, { createElement, memo, useRef, useMemo, useImperativeHandle } from 'react';
2
+ import React, { createElement, memo, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
3
3
  import * as n$1 from 'zod/v4/core';
4
+ import { c } from 'react/compiler-runtime';
4
5
  import { z } from 'zod';
5
6
  export { z } from 'zod';
6
- import { c } from 'react/compiler-runtime';
7
7
 
8
8
  var isCheckBoxInput = (element) => element.type === 'checkbox';
9
9
 
@@ -3110,6 +3110,105 @@ function clearAllRegistries() {
3110
3110
  clearLayoutRegistry();
3111
3111
  }
3112
3112
 
3113
+ const RESERVED_PROPS = new Set(['all', 'remaining', 'names', 'has', 'render']);
3114
+ function createTemplateFields(fieldEntries) {
3115
+ const accessedFields = new Set();
3116
+ const handler = {
3117
+ get(_, prop) {
3118
+ if (typeof prop === 'symbol') {
3119
+ return undefined;
3120
+ }
3121
+ if (prop === 'all') {
3122
+ return Array.from(fieldEntries.values()).map(entry => entry.element);
3123
+ }
3124
+ if (prop === 'remaining') {
3125
+ return Array.from(fieldEntries.entries()).filter(([name]) => !accessedFields.has(name)).map(([, entry]) => entry.element);
3126
+ }
3127
+ if (prop === 'names') {
3128
+ return Array.from(fieldEntries.keys());
3129
+ }
3130
+ if (prop === 'has') {
3131
+ return name => fieldEntries.has(name);
3132
+ }
3133
+ if (prop === 'render') {
3134
+ return (...names) => {
3135
+ return names.filter(name => fieldEntries.has(name)).map(name => {
3136
+ accessedFields.add(name);
3137
+ return fieldEntries.get(name).element;
3138
+ });
3139
+ };
3140
+ }
3141
+ if (fieldEntries.has(prop)) {
3142
+ accessedFields.add(prop);
3143
+ return fieldEntries.get(prop).element;
3144
+ }
3145
+ return undefined;
3146
+ },
3147
+ has(_, prop) {
3148
+ if (typeof prop === 'symbol') {
3149
+ return false;
3150
+ }
3151
+ return RESERVED_PROPS.has(prop) || fieldEntries.has(prop);
3152
+ },
3153
+ ownKeys() {
3154
+ return [...RESERVED_PROPS, ...fieldEntries.keys()];
3155
+ },
3156
+ getOwnPropertyDescriptor(_, prop) {
3157
+ if (typeof prop === 'symbol') {
3158
+ return undefined;
3159
+ }
3160
+ if (RESERVED_PROPS.has(prop) || fieldEntries.has(prop)) {
3161
+ return {
3162
+ configurable: true,
3163
+ enumerable: true,
3164
+ value: this.get(_, prop, {})
3165
+ };
3166
+ }
3167
+ return undefined;
3168
+ }
3169
+ };
3170
+ return new Proxy({}, handler);
3171
+ }
3172
+ function createTemplateLayouts(layoutEntries) {
3173
+ const handler = {
3174
+ get(_, prop) {
3175
+ if (typeof prop === 'symbol') {
3176
+ return undefined;
3177
+ }
3178
+ if (prop === 'all') {
3179
+ return Array.from(layoutEntries.values()).map(entry => entry.element);
3180
+ }
3181
+ if (layoutEntries.has(prop)) {
3182
+ return layoutEntries.get(prop).element;
3183
+ }
3184
+ return undefined;
3185
+ },
3186
+ has(_, prop) {
3187
+ if (typeof prop === 'symbol') {
3188
+ return false;
3189
+ }
3190
+ return prop === 'all' || layoutEntries.has(prop);
3191
+ },
3192
+ ownKeys() {
3193
+ return ['all', ...layoutEntries.keys()];
3194
+ },
3195
+ getOwnPropertyDescriptor(_, prop) {
3196
+ if (typeof prop === 'symbol') {
3197
+ return undefined;
3198
+ }
3199
+ if (prop === 'all' || layoutEntries.has(prop)) {
3200
+ return {
3201
+ configurable: true,
3202
+ enumerable: true,
3203
+ value: this.get(_, prop, {})
3204
+ };
3205
+ }
3206
+ return undefined;
3207
+ }
3208
+ };
3209
+ return new Proxy({}, handler);
3210
+ }
3211
+
3113
3212
  const FieldRenderer = /*#__PURE__*/memo(t0 => {
3114
3213
  const $ = c(5);
3115
3214
  const {
@@ -3355,8 +3454,9 @@ const defaultValidators = {
3355
3454
  tel: stringValidator,
3356
3455
  number: field => {
3357
3456
  let schema = z.coerce.number();
3358
- if (field.min !== undefined) schema = schema.min(field.min);
3359
- if (field.max !== undefined) schema = schema.max(field.max);
3457
+ const numberField = field;
3458
+ if (numberField.min !== undefined) schema = schema.min(numberField.min);
3459
+ if (numberField.max !== undefined) schema = schema.max(numberField.max);
3360
3460
  return schema;
3361
3461
  },
3362
3462
  checkbox: () => z.coerce.boolean(),
@@ -3442,6 +3542,38 @@ function getItemKey(item, index) {
3442
3542
  }
3443
3543
  return item.name;
3444
3544
  }
3545
+ function extractFields(items) {
3546
+ const fields = [];
3547
+ for (const item of items) {
3548
+ if (isLayoutBlock(item)) {
3549
+ let childItems = [];
3550
+ if (item.type === 'columns') {
3551
+ for (const column of item.columns) {
3552
+ childItems.push(...column.children);
3553
+ }
3554
+ } else if (item.type === 'section') {
3555
+ childItems = item.children;
3556
+ }
3557
+ fields.push(...extractFields(childItems));
3558
+ } else {
3559
+ fields.push(item);
3560
+ }
3561
+ }
3562
+ return fields;
3563
+ }
3564
+ function extractLayouts(items) {
3565
+ const layouts = [];
3566
+ items.forEach((item, index) => {
3567
+ if (isLayoutBlock(item)) {
3568
+ layouts.push({
3569
+ layout: item,
3570
+ index
3571
+ });
3572
+ }
3573
+ });
3574
+ return layouts;
3575
+ }
3576
+
3445
3577
  function hasSchema(props) {
3446
3578
  return props.schema !== undefined;
3447
3579
  }
@@ -3453,6 +3585,11 @@ function FormGeneratorImpl(props) {
3453
3585
  submitText = 'Submit',
3454
3586
  disabled,
3455
3587
  mode = 'onChange',
3588
+ title,
3589
+ description,
3590
+ showReset = false,
3591
+ resetText = 'Reset',
3592
+ children,
3456
3593
  ref
3457
3594
  } = props;
3458
3595
  const userSchema = hasSchema(props) ? props.schema : undefined;
@@ -3476,6 +3613,9 @@ function FormGeneratorImpl(props) {
3476
3613
  const handleSubmit = form.handleSubmit(async data => {
3477
3614
  await onSubmit(data);
3478
3615
  });
3616
+ const handleReset = useCallback(() => {
3617
+ form.reset(mergedDefaultValues);
3618
+ }, [form, mergedDefaultValues]);
3479
3619
  useImperativeHandle(ref, () => ({
3480
3620
  setValues: values => {
3481
3621
  Object.entries(values).forEach(([key, value]) => {
@@ -3500,26 +3640,124 @@ function FormGeneratorImpl(props) {
3500
3640
  setError: (name, error) => form.setError(name, error),
3501
3641
  isValid: () => form.formState.isValid,
3502
3642
  isDirty: () => form.formState.isDirty,
3503
- form
3643
+ form: form
3504
3644
  }), [form, handleSubmit, mergedDefaultValues]);
3505
3645
  const SubmitButton = getFormComponent('SubmitButton');
3646
+ const fieldEntries = useMemo(() => {
3647
+ const entries = new Map();
3648
+ const allFields = extractFields(fields);
3649
+ allFields.forEach((field, index) => {
3650
+ if (!field.hidden) {
3651
+ const element = jsx(FieldRenderer, {
3652
+ field: field
3653
+ }, field.name || `field-${index}`);
3654
+ entries.set(field.name, {
3655
+ field,
3656
+ element,
3657
+ accessed: false
3658
+ });
3659
+ }
3660
+ });
3661
+ return entries;
3662
+ }, [fields]);
3663
+ const layoutEntries = useMemo(() => {
3664
+ const entries_0 = new Map();
3665
+ const allLayouts = extractLayouts(fields);
3666
+ allLayouts.forEach(({
3667
+ layout,
3668
+ index: index_0
3669
+ }) => {
3670
+ if (!layout.hidden) {
3671
+ const key_0 = layout.name || `layout-${layout.type}-${index_0}`;
3672
+ const element_0 = jsx(FormItemRenderer, {
3673
+ item: layout
3674
+ }, key_0);
3675
+ if (layout.name) {
3676
+ entries_0.set(layout.name, {
3677
+ layout,
3678
+ element: element_0
3679
+ });
3680
+ }
3681
+ }
3682
+ });
3683
+ return entries_0;
3684
+ }, [fields]);
3685
+ const templateFields = useMemo(() => createTemplateFields(fieldEntries), [fieldEntries]);
3686
+ const templateLayouts = useMemo(() => createTemplateLayouts(layoutEntries), [layoutEntries]);
3687
+ const buttons = useMemo(() => {
3688
+ const result = {
3689
+ submit: jsx(SubmitButton, {
3690
+ disabled: disabled || form.formState.isSubmitting,
3691
+ isSubmitting: form.formState.isSubmitting,
3692
+ children: submitText
3693
+ }, "submit")
3694
+ };
3695
+ if (showReset) {
3696
+ result.reset = jsx("button", {
3697
+ type: "button",
3698
+ onClick: handleReset,
3699
+ disabled: disabled,
3700
+ children: resetText
3701
+ }, "reset");
3702
+ }
3703
+ return result;
3704
+ }, [SubmitButton, disabled, form.formState.isSubmitting, submitText, showReset, resetText, handleReset]);
3705
+ const renderField = useCallback((field_0, options) => {
3706
+ return jsx(FieldRenderer, {
3707
+ field: field_0,
3708
+ namePrefix: options === null || options === void 0 ? void 0 : options.namePrefix
3709
+ });
3710
+ }, []);
3711
+ const renderLayout = useCallback((layout_0, options_0) => {
3712
+ return jsx(FormItemRenderer, {
3713
+ item: layout_0,
3714
+ namePrefix: options_0 === null || options_0 === void 0 ? void 0 : options_0.namePrefix
3715
+ });
3716
+ }, []);
3717
+ if (!children) {
3718
+ return jsx(FormProvider, {
3719
+ ...form,
3720
+ children: jsxs("form", {
3721
+ ref: formRef,
3722
+ onSubmit: handleSubmit,
3723
+ className: className,
3724
+ children: [fields.map((item, index_1) => jsx(FormItemRenderer, {
3725
+ item: item
3726
+ }, getItemKey(item, index_1))), jsx(SubmitButton, {
3727
+ disabled: disabled || form.formState.isSubmitting,
3728
+ isSubmitting: form.formState.isSubmitting,
3729
+ children: submitText
3730
+ })]
3731
+ })
3732
+ });
3733
+ }
3734
+ const renderProps = {
3735
+ fields: templateFields,
3736
+ layouts: templateLayouts,
3737
+ buttons,
3738
+ title,
3739
+ description,
3740
+ form: form,
3741
+ isSubmitting: form.formState.isSubmitting,
3742
+ isValid: form.formState.isValid,
3743
+ isDirty: form.formState.isDirty,
3744
+ renderField,
3745
+ renderLayout
3746
+ };
3747
+ const renderFn = children;
3506
3748
  return jsx(FormProvider, {
3507
3749
  ...form,
3508
- children: jsxs("form", {
3750
+ children: jsx("form", {
3509
3751
  ref: formRef,
3510
3752
  onSubmit: handleSubmit,
3511
3753
  className: className,
3512
- children: [fields.map((item, index) => jsx(FormItemRenderer, {
3513
- item: item
3514
- }, getItemKey(item, index))), jsx(SubmitButton, {
3515
- disabled: disabled || form.formState.isSubmitting,
3516
- isSubmitting: form.formState.isSubmitting,
3517
- children: submitText
3518
- })]
3754
+ children: renderFn(renderProps)
3519
3755
  })
3520
3756
  });
3521
3757
  }
3522
- const FormGenerator = FormGeneratorImpl;
3758
+ function FormGenerator(props) {
3759
+ return FormGeneratorImpl(props);
3760
+ }
3523
3761
 
3524
3762
  export { Controller, FieldRenderer, FormGenerator, FormProvider, clearAllRegistries, clearFieldRegistry, clearFormComponentRegistry, clearLayoutRegistry, getFieldComponent, getFormComponent, getFormComponents, getLayoutComponent, getRegisteredFieldTypes, hasFieldType, hasFormComponent, hasLayoutComponent, isLayoutBlock, registerField, registerFields, registerFormComponent, registerFormComponents, registerLayoutComponent, registerLayoutComponents, resetFormComponentRegistry, unregisterField, useFieldArray, useForm, useFormContext, useWatch };
3525
3763
  //# sourceMappingURL=index.mjs.map