@pdg/react-form 1.1.0 → 1.1.2

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.
Files changed (3) hide show
  1. package/dist/index.esm.js +543 -1070
  2. package/dist/index.js +542 -1069
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -492,24 +492,7 @@ var appendFormValueData = function (data, itemCommands) {
492
492
  },
493
493
  };
494
494
  }, [submit]);
495
- React.useLayoutEffect(function () {
496
- if (ref) {
497
- if (typeof ref === 'function') {
498
- ref(commands);
499
- }
500
- else {
501
- ref.current = commands;
502
- }
503
- return function () {
504
- if (typeof ref === 'function') {
505
- ref(null);
506
- }
507
- else {
508
- ref.current = null;
509
- }
510
- };
511
- }
512
- }, [commands, ref]);
495
+ reactHook.useForwardLayoutRef(ref, commands);
513
496
  /********************************************************************************************************************
514
497
  * Event Handler
515
498
  * ******************************************************************************************************************/
@@ -1132,66 +1115,35 @@ var templateObject_1$e, templateObject_2$7;var PFormBody = function (_a) {
1132
1115
  /********************************************************************************************************************
1133
1116
  * Commands
1134
1117
  * ******************************************************************************************************************/
1135
- React.useLayoutEffect(function () {
1136
- if (ref || (!noFormValueItem && onAddValueItem)) {
1137
- var commands = {
1138
- getType: function () { return 'default'; },
1139
- getName: function () { return name; },
1140
- getReset: function () { return getFinalValue(initValue); },
1141
- reset: function () { return updateValue(initValue); },
1142
- getValue: function () { return valueRef.current; },
1143
- setValue: updateValue,
1144
- getData: function () { return dataRef.current; },
1145
- setData: setData,
1146
- isExceptValue: function () { return !!exceptValue; },
1147
- isDisabled: function () { return !!disabledRef.current; },
1148
- setDisabled: setDisabled,
1149
- isHidden: function () { return !!hiddenRef.current; },
1150
- setHidden: setHidden,
1151
- focus: focus,
1152
- focusValidate: focus,
1153
- validate: function () { return validate(valueRef.current); },
1154
- setError: function (error, errorText) {
1155
- return setErrorErrorHelperText(error, error ? errorText : undefined);
1156
- },
1157
- };
1158
- if (ref) {
1159
- if (typeof ref === 'function') {
1160
- ref(commands);
1161
- }
1162
- else {
1163
- ref.current = commands;
1164
- }
1165
- }
1166
- if (!noFormValueItem && onAddValueItem)
1167
- onAddValueItem(id, commands);
1168
- return function () {
1169
- if (ref) {
1170
- if (typeof ref === 'function') {
1171
- ref(null);
1172
- }
1173
- else {
1174
- ref.current = null;
1175
- }
1176
- }
1177
- if (!noFormValueItem && onRemoveValueItem)
1178
- onRemoveValueItem(id);
1179
- };
1180
- }
1181
- }, [
1118
+ var commands = React.useMemo(function () { return ({
1119
+ getType: function () { return 'default'; },
1120
+ getName: function () { return name; },
1121
+ getReset: function () { return getFinalValue(initValue); },
1122
+ reset: function () { return updateValue(initValue); },
1123
+ getValue: function () { return valueRef.current; },
1124
+ setValue: updateValue,
1125
+ getData: function () { return dataRef.current; },
1126
+ setData: setData,
1127
+ isExceptValue: function () { return !!exceptValue; },
1128
+ isDisabled: function () { return !!disabledRef.current; },
1129
+ setDisabled: setDisabled,
1130
+ isHidden: function () { return !!hiddenRef.current; },
1131
+ setHidden: setHidden,
1132
+ focus: focus,
1133
+ focusValidate: focus,
1134
+ validate: function () { return validate(valueRef.current); },
1135
+ setError: function (error, errorText) {
1136
+ return setErrorErrorHelperText(error, error ? errorText : undefined);
1137
+ },
1138
+ }); }, [
1182
1139
  dataRef,
1183
1140
  disabledRef,
1184
1141
  exceptValue,
1185
1142
  focus,
1186
1143
  getFinalValue,
1187
1144
  hiddenRef,
1188
- id,
1189
1145
  initValue,
1190
1146
  name,
1191
- noFormValueItem,
1192
- onAddValueItem,
1193
- onRemoveValueItem,
1194
- ref,
1195
1147
  setData,
1196
1148
  setDisabled,
1197
1149
  setErrorErrorHelperText,
@@ -1200,6 +1152,9 @@ var templateObject_1$e, templateObject_2$7;var PFormBody = function (_a) {
1200
1152
  validate,
1201
1153
  valueRef,
1202
1154
  ]);
1155
+ var handleCommandSet = React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]);
1156
+ var handleCommandUnset = React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]);
1157
+ reactHook.useForwardLayoutRef(ref, commands, !noFormValueItem ? handleCommandSet : undefined, !noFormValueItem ? handleCommandUnset : undefined);
1203
1158
  /********************************************************************************************************************
1204
1159
  * Event Handler
1205
1160
  * ******************************************************************************************************************/
@@ -2667,65 +2622,39 @@ PFormItemBase.displayName = 'PFormItemBase';var PFormCheckbox = React.forwardRef
2667
2622
  /********************************************************************************************************************
2668
2623
  * Commands
2669
2624
  * ******************************************************************************************************************/
2670
- React.useLayoutEffect(function () {
2671
- var commands = {
2672
- getType: function () { return 'PFormCheckbox'; },
2673
- getName: function () { return name; },
2674
- getReset: function () { return initChecked; },
2675
- reset: function () { return updateChecked(initChecked); },
2676
- getValue: function () { return valueRef.current; },
2677
- setValue: setValue,
2678
- getData: function () { return dataRef.current; },
2679
- setData: setData,
2680
- getUncheckedValue: function () { return uncheckedValueRef.current; },
2681
- setUncheckedValue: setUncheckedValue,
2682
- getChecked: function () { return checkedRef.current; },
2683
- setChecked: updateChecked,
2684
- isExceptValue: function () { return !!exceptValue; },
2685
- isDisabled: function () { return !!disabledRef.current; },
2686
- setDisabled: setDisabled,
2687
- isHidden: function () { return !!hiddenRef.current; },
2688
- setHidden: setHidden,
2689
- focus: focus,
2690
- focusValidate: focus,
2691
- validate: function () { return validate(checkedRef.current); },
2692
- setError: function (error, errorHelperText) {
2693
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
2694
- },
2695
- };
2696
- onAddValueItem(id, commands);
2697
- if (ref) {
2698
- if (typeof ref === 'function') {
2699
- ref(commands);
2700
- }
2701
- else {
2702
- ref.current = commands;
2703
- }
2704
- }
2705
- return function () {
2706
- onRemoveValueItem(id);
2707
- if (ref) {
2708
- if (typeof ref === 'function') {
2709
- ref(null);
2710
- }
2711
- else {
2712
- ref.current = null;
2713
- }
2714
- }
2715
- };
2716
- }, [
2625
+ var commands = React.useMemo(function () { return ({
2626
+ getType: function () { return 'PFormCheckbox'; },
2627
+ getName: function () { return name; },
2628
+ getReset: function () { return initChecked; },
2629
+ reset: function () { return updateChecked(initChecked); },
2630
+ getValue: function () { return valueRef.current; },
2631
+ setValue: setValue,
2632
+ getData: function () { return dataRef.current; },
2633
+ setData: setData,
2634
+ getUncheckedValue: function () { return uncheckedValueRef.current; },
2635
+ setUncheckedValue: setUncheckedValue,
2636
+ getChecked: function () { return checkedRef.current; },
2637
+ setChecked: updateChecked,
2638
+ isExceptValue: function () { return !!exceptValue; },
2639
+ isDisabled: function () { return !!disabledRef.current; },
2640
+ setDisabled: setDisabled,
2641
+ isHidden: function () { return !!hiddenRef.current; },
2642
+ setHidden: setHidden,
2643
+ focus: focus,
2644
+ focusValidate: focus,
2645
+ validate: function () { return validate(checkedRef.current); },
2646
+ setError: function (error, errorHelperText) {
2647
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
2648
+ },
2649
+ }); }, [
2717
2650
  checkedRef,
2718
2651
  dataRef,
2719
2652
  disabledRef,
2720
2653
  exceptValue,
2721
2654
  focus,
2722
2655
  hiddenRef,
2723
- id,
2724
2656
  initChecked,
2725
2657
  name,
2726
- onAddValueItem,
2727
- onRemoveValueItem,
2728
- ref,
2729
2658
  setData,
2730
2659
  setDisabled,
2731
2660
  setErrorErrorHelperText,
@@ -2737,6 +2666,7 @@ PFormItemBase.displayName = 'PFormItemBase';var PFormCheckbox = React.forwardRef
2737
2666
  validate,
2738
2667
  valueRef,
2739
2668
  ]);
2669
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
2740
2670
  /********************************************************************************************************************
2741
2671
  * Event Handler
2742
2672
  * ******************************************************************************************************************/
@@ -2874,6 +2804,16 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
2874
2804
  /********************************************************************************************************************
2875
2805
  * Effect
2876
2806
  * ******************************************************************************************************************/
2807
+ React.useEffect(function () {
2808
+ if (onLoadItems) {
2809
+ setIsOnGetItemLoading(true);
2810
+ onLoadItems().then(function (items) {
2811
+ setItems(items);
2812
+ setIsOnGetItemLoading(false);
2813
+ });
2814
+ }
2815
+ // eslint-disable-next-line react-hooks/exhaustive-deps
2816
+ }, []);
2877
2817
  React.useEffect(function () {
2878
2818
  if (!fullWidth || initWidth) {
2879
2819
  var findParentByClassName_1 = function (element, className) {
@@ -2939,67 +2879,41 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
2939
2879
  /********************************************************************************************************************
2940
2880
  * Commands
2941
2881
  * ******************************************************************************************************************/
2942
- React.useLayoutEffect(function () {
2943
- var commands = {
2944
- getType: function () { return 'PFormRadioGroup'; },
2945
- getName: function () { return name; },
2946
- getReset: function () { return getFinalValue(initValue); },
2947
- reset: function () { return updateValue(initValue); },
2948
- getValue: function () { return valueRef.current; },
2949
- setValue: updateValue,
2950
- getData: function () { return dataRef.current; },
2951
- setData: setData,
2952
- isExceptValue: function () { return !!exceptValue; },
2953
- isDisabled: function () { return !!disabledRef.current; },
2954
- setDisabled: setDisabled,
2955
- isHidden: function () { return !!hiddenRef.current; },
2956
- setHidden: setHidden,
2957
- focus: focus,
2958
- focusValidate: focus,
2959
- validate: function () { return validate(valueRef.current); },
2960
- setError: function (error, errorHelperText) {
2961
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
2962
- },
2963
- getItems: function () { return itemsRef.current; },
2964
- setItems: setItems,
2965
- getLoading: function () { return !!loadingRef.current; },
2966
- setLoading: setLoading,
2967
- };
2968
- onAddValueItem(id, commands);
2969
- if (ref) {
2970
- if (typeof ref === 'function') {
2971
- ref(commands);
2972
- }
2973
- else {
2974
- ref.current = commands;
2975
- }
2976
- }
2977
- return function () {
2978
- onRemoveValueItem(id);
2979
- if (ref) {
2980
- if (typeof ref === 'function') {
2981
- ref(null);
2982
- }
2983
- else {
2984
- ref.current = null;
2985
- }
2986
- }
2987
- };
2988
- }, [
2882
+ var commands = React.useMemo(function () { return ({
2883
+ getType: function () { return 'PFormRadioGroup'; },
2884
+ getName: function () { return name; },
2885
+ getReset: function () { return getFinalValue(initValue); },
2886
+ reset: function () { return updateValue(initValue); },
2887
+ getValue: function () { return valueRef.current; },
2888
+ setValue: updateValue,
2889
+ getData: function () { return dataRef.current; },
2890
+ setData: setData,
2891
+ isExceptValue: function () { return !!exceptValue; },
2892
+ isDisabled: function () { return !!disabledRef.current; },
2893
+ setDisabled: setDisabled,
2894
+ isHidden: function () { return !!hiddenRef.current; },
2895
+ setHidden: setHidden,
2896
+ focus: focus,
2897
+ focusValidate: focus,
2898
+ validate: function () { return validate(valueRef.current); },
2899
+ setError: function (error, errorHelperText) {
2900
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
2901
+ },
2902
+ getItems: function () { return itemsRef.current; },
2903
+ setItems: setItems,
2904
+ getLoading: function () { return !!loadingRef.current; },
2905
+ setLoading: setLoading,
2906
+ }); }, [
2989
2907
  dataRef,
2990
2908
  disabledRef,
2991
2909
  exceptValue,
2992
2910
  focus,
2993
2911
  getFinalValue,
2994
2912
  hiddenRef,
2995
- id,
2996
2913
  initValue,
2997
2914
  itemsRef,
2998
2915
  loadingRef,
2999
2916
  name,
3000
- onAddValueItem,
3001
- onRemoveValueItem,
3002
- ref,
3003
2917
  setData,
3004
2918
  setDisabled,
3005
2919
  setErrorErrorHelperText,
@@ -3010,16 +2924,7 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
3010
2924
  validate,
3011
2925
  valueRef,
3012
2926
  ]);
3013
- React.useEffect(function () {
3014
- if (onLoadItems) {
3015
- setIsOnGetItemLoading(true);
3016
- onLoadItems().then(function (items) {
3017
- setItems(items);
3018
- setIsOnGetItemLoading(false);
3019
- });
3020
- }
3021
- // eslint-disable-next-line react-hooks/exhaustive-deps
3022
- }, []);
2927
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
3023
2928
  /********************************************************************************************************************
3024
2929
  * Event Handler
3025
2930
  * ******************************************************************************************************************/
@@ -3352,60 +3257,34 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
3352
3257
  /********************************************************************************************************************
3353
3258
  * Commands
3354
3259
  * ******************************************************************************************************************/
3355
- React.useLayoutEffect(function () {
3356
- if (ref || onAddValueItem) {
3357
- var commands = {
3358
- getType: function () { return 'PFormToggleButtonGroup'; },
3359
- getName: function () { return name; },
3360
- getReset: function () { return getFinalValue(initValue); },
3361
- reset: function () { return updateValue(initValue); },
3362
- getValue: function () { return valueRef.current; },
3363
- setValue: updateValue,
3364
- getData: function () { return dataRef.current; },
3365
- setData: setData,
3366
- isExceptValue: function () { return !!exceptValue; },
3367
- isDisabled: function () { return !!disabledRef.current; },
3368
- setDisabled: setDisabled,
3369
- isHidden: function () { return !!hiddenRef.current; },
3370
- setHidden: setHidden,
3371
- focus: focus,
3372
- focusValidate: focus,
3373
- validate: function () { return validate(valueRef.current); },
3374
- setError: function (error, errorText) {
3375
- return setErrorErrorHelperText(error, error ? errorText : undefined);
3376
- },
3377
- getFormValueSeparator: function () { return formValueSeparator; },
3378
- isFormValueSort: function () { return !!formValueSort; },
3379
- getItems: function () { return itemsRef.current; },
3380
- setItems: setItems,
3381
- isMultiple: function () { return !!multiple; },
3382
- getLoading: function () { return !!loadingRef.current; },
3383
- setLoading: setLoading,
3384
- };
3385
- if (ref) {
3386
- if (typeof ref === 'function') {
3387
- ref(commands);
3388
- }
3389
- else {
3390
- ref.current = commands;
3391
- }
3392
- }
3393
- if (onAddValueItem)
3394
- onAddValueItem(id, commands);
3395
- return function () {
3396
- if (ref) {
3397
- if (typeof ref === 'function') {
3398
- ref(null);
3399
- }
3400
- else {
3401
- ref.current = null;
3402
- }
3403
- }
3404
- if (onRemoveValueItem)
3405
- onRemoveValueItem(id);
3406
- };
3407
- }
3408
- }, [
3260
+ var commands = React.useMemo(function () { return ({
3261
+ getType: function () { return 'PFormToggleButtonGroup'; },
3262
+ getName: function () { return name; },
3263
+ getReset: function () { return getFinalValue(initValue); },
3264
+ reset: function () { return updateValue(initValue); },
3265
+ getValue: function () { return valueRef.current; },
3266
+ setValue: updateValue,
3267
+ getData: function () { return dataRef.current; },
3268
+ setData: setData,
3269
+ isExceptValue: function () { return !!exceptValue; },
3270
+ isDisabled: function () { return !!disabledRef.current; },
3271
+ setDisabled: setDisabled,
3272
+ isHidden: function () { return !!hiddenRef.current; },
3273
+ setHidden: setHidden,
3274
+ focus: focus,
3275
+ focusValidate: focus,
3276
+ validate: function () { return validate(valueRef.current); },
3277
+ setError: function (error, errorText) {
3278
+ return setErrorErrorHelperText(error, error ? errorText : undefined);
3279
+ },
3280
+ getFormValueSeparator: function () { return formValueSeparator; },
3281
+ isFormValueSort: function () { return !!formValueSort; },
3282
+ getItems: function () { return itemsRef.current; },
3283
+ setItems: setItems,
3284
+ isMultiple: function () { return !!multiple; },
3285
+ getLoading: function () { return !!loadingRef.current; },
3286
+ setLoading: setLoading,
3287
+ }); }, [
3409
3288
  dataRef,
3410
3289
  disabledRef,
3411
3290
  exceptValue,
@@ -3414,15 +3293,11 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
3414
3293
  formValueSort,
3415
3294
  getFinalValue,
3416
3295
  hiddenRef,
3417
- id,
3418
3296
  initValue,
3419
3297
  itemsRef,
3420
3298
  loadingRef,
3421
3299
  multiple,
3422
3300
  name,
3423
- onAddValueItem,
3424
- onRemoveValueItem,
3425
- ref,
3426
3301
  setData,
3427
3302
  setDisabled,
3428
3303
  setErrorErrorHelperText,
@@ -3433,6 +3308,7 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
3433
3308
  validate,
3434
3309
  valueRef,
3435
3310
  ]);
3311
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
3436
3312
  /********************************************************************************************************************
3437
3313
  * Event Handler
3438
3314
  * ******************************************************************************************************************/
@@ -3703,61 +3579,35 @@ PFormToggleButtonGroup.displayName = 'PFormToggleButtonGroup';var PFormRating =
3703
3579
  /********************************************************************************************************************
3704
3580
  * Commands
3705
3581
  * ******************************************************************************************************************/
3706
- React.useLayoutEffect(function () {
3707
- var commands = {
3708
- getType: function () { return 'PFormRating'; },
3709
- getName: function () { return name; },
3710
- getReset: function () { return getFinalValue(initValue); },
3711
- reset: function () { return updateValue(initValue); },
3712
- getValue: function () { return valueRef.current; },
3713
- setValue: updateValue,
3714
- getData: function () { return dataRef.current; },
3715
- setData: setData,
3716
- isExceptValue: function () { return !!exceptValue; },
3717
- isDisabled: function () { return !!disabledRef.current; },
3718
- setDisabled: setDisabled,
3719
- isHidden: function () { return !!hiddenRef.current; },
3720
- setHidden: setHidden,
3721
- focus: focus,
3722
- focusValidate: focus,
3723
- validate: function () { return validate(valueRef.current); },
3724
- setError: function (error, errorHelperText) {
3725
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
3726
- },
3727
- };
3728
- onAddValueItem(id, commands);
3729
- if (ref) {
3730
- if (typeof ref === 'function') {
3731
- ref(commands);
3732
- }
3733
- else {
3734
- ref.current = commands;
3735
- }
3736
- }
3737
- return function () {
3738
- onRemoveValueItem(id);
3739
- if (ref) {
3740
- if (typeof ref === 'function') {
3741
- ref(null);
3742
- }
3743
- else {
3744
- ref.current = null;
3745
- }
3746
- }
3747
- };
3748
- }, [
3582
+ var commands = React.useMemo(function () { return ({
3583
+ getType: function () { return 'PFormRating'; },
3584
+ getName: function () { return name; },
3585
+ getReset: function () { return getFinalValue(initValue); },
3586
+ reset: function () { return updateValue(initValue); },
3587
+ getValue: function () { return valueRef.current; },
3588
+ setValue: updateValue,
3589
+ getData: function () { return dataRef.current; },
3590
+ setData: setData,
3591
+ isExceptValue: function () { return !!exceptValue; },
3592
+ isDisabled: function () { return !!disabledRef.current; },
3593
+ setDisabled: setDisabled,
3594
+ isHidden: function () { return !!hiddenRef.current; },
3595
+ setHidden: setHidden,
3596
+ focus: focus,
3597
+ focusValidate: focus,
3598
+ validate: function () { return validate(valueRef.current); },
3599
+ setError: function (error, errorHelperText) {
3600
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
3601
+ },
3602
+ }); }, [
3749
3603
  dataRef,
3750
3604
  disabledRef,
3751
3605
  exceptValue,
3752
3606
  focus,
3753
3607
  getFinalValue,
3754
3608
  hiddenRef,
3755
- id,
3756
3609
  initValue,
3757
3610
  name,
3758
- onAddValueItem,
3759
- onRemoveValueItem,
3760
- ref,
3761
3611
  setData,
3762
3612
  setDisabled,
3763
3613
  setErrorErrorHelperText,
@@ -3766,6 +3616,7 @@ PFormToggleButtonGroup.displayName = 'PFormToggleButtonGroup';var PFormRating =
3766
3616
  validate,
3767
3617
  valueRef,
3768
3618
  ]);
3619
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
3769
3620
  /********************************************************************************************************************
3770
3621
  * Event Handler
3771
3622
  * ******************************************************************************************************************/
@@ -3883,60 +3734,34 @@ PFormRating.displayName = 'PFormRating';var getFinalValue$8 = function (value) {
3883
3734
  /********************************************************************************************************************
3884
3735
  * Commands
3885
3736
  * ******************************************************************************************************************/
3886
- React.useLayoutEffect(function () {
3887
- var commands = {
3888
- getType: function () { return 'PFormTextEditor'; },
3889
- getName: function () { return name; },
3890
- getReset: function () { return getFinalValue$8(initValue); },
3891
- reset: function () { return updateValue(initValue); },
3892
- getValue: function () { return valueRef.current; },
3893
- setValue: updateValue,
3894
- getData: function () { return dataRef.current; },
3895
- setData: setData,
3896
- isExceptValue: function () { return !!exceptValue; },
3897
- isDisabled: function () { return !!disabledRef.current; },
3898
- setDisabled: setDisabled,
3899
- isHidden: function () { return !!hiddenRef.current; },
3900
- setHidden: setHidden,
3901
- focus: focus,
3902
- focusValidate: focus,
3903
- validate: function () { return validate(valueRef.current); },
3904
- setError: function (error, errorText) {
3905
- return setErrorErrorHelperText(error, error ? errorText : undefined);
3906
- },
3907
- };
3908
- onAddValueItem(id, commands);
3909
- if (ref) {
3910
- if (typeof ref === 'function') {
3911
- ref(commands);
3912
- }
3913
- else {
3914
- ref.current = commands;
3915
- }
3916
- }
3917
- return function () {
3918
- onRemoveValueItem(id);
3919
- if (ref) {
3920
- if (typeof ref === 'function') {
3921
- ref(null);
3922
- }
3923
- else {
3924
- ref.current = null;
3925
- }
3926
- }
3927
- };
3928
- }, [
3737
+ var commands = React.useMemo(function () { return ({
3738
+ getType: function () { return 'PFormTextEditor'; },
3739
+ getName: function () { return name; },
3740
+ getReset: function () { return getFinalValue$8(initValue); },
3741
+ reset: function () { return updateValue(initValue); },
3742
+ getValue: function () { return valueRef.current; },
3743
+ setValue: updateValue,
3744
+ getData: function () { return dataRef.current; },
3745
+ setData: setData,
3746
+ isExceptValue: function () { return !!exceptValue; },
3747
+ isDisabled: function () { return !!disabledRef.current; },
3748
+ setDisabled: setDisabled,
3749
+ isHidden: function () { return !!hiddenRef.current; },
3750
+ setHidden: setHidden,
3751
+ focus: focus,
3752
+ focusValidate: focus,
3753
+ validate: function () { return validate(valueRef.current); },
3754
+ setError: function (error, errorText) {
3755
+ return setErrorErrorHelperText(error, error ? errorText : undefined);
3756
+ },
3757
+ }); }, [
3929
3758
  dataRef,
3930
3759
  disabledRef,
3931
3760
  exceptValue,
3932
3761
  focus,
3933
3762
  hiddenRef,
3934
- id,
3935
3763
  initValue,
3936
3764
  name,
3937
- onAddValueItem,
3938
- onRemoveValueItem,
3939
- ref,
3940
3765
  setData,
3941
3766
  setDisabled,
3942
3767
  setErrorErrorHelperText,
@@ -3945,6 +3770,7 @@ PFormRating.displayName = 'PFormRating';var getFinalValue$8 = function (value) {
3945
3770
  validate,
3946
3771
  valueRef,
3947
3772
  ]);
3773
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
3948
3774
  /********************************************************************************************************************
3949
3775
  * Event Handler
3950
3776
  * ******************************************************************************************************************/
@@ -4339,36 +4165,34 @@ PFormTextEditor.displayName = 'PFormTextEditor';var PFormAutocomplete = ToForwar
4339
4165
  /********************************************************************************************************************
4340
4166
  * Commands
4341
4167
  * ******************************************************************************************************************/
4342
- var commands = React.useMemo(function () {
4343
- return ({
4344
- getType: function () { return 'PFormAutocomplete'; },
4345
- getName: function () { return name; },
4346
- getReset: function () { return getFinalValue(initValue); },
4347
- reset: function () { return updateValue(initValue); },
4348
- getValue: function () { return valueRef.current; },
4349
- setValue: function (newValue) { return updateValue(newValue); },
4350
- getData: function () { return dataRef.current; },
4351
- setData: function (data) { return setData(data); },
4352
- isExceptValue: function () { return !!exceptValue; },
4353
- isDisabled: function () { return !!disabledRef.current; },
4354
- setDisabled: function (disabled) { return setDisabled(disabled); },
4355
- isHidden: function () { return !!hiddenRef.current; },
4356
- setHidden: function (hidden) { return setHidden(hidden); },
4357
- focus: focus,
4358
- focusValidate: focus,
4359
- validate: function () { return validate(valueRef.current); },
4360
- setError: function (error, errorText) {
4361
- return setErrorErrorHelperText(error, error ? errorText : undefined);
4362
- },
4363
- getFormValueSeparator: function () { return formValueSeparator; },
4364
- isFormValueSort: function () { return !!formValueSort; },
4365
- getItems: function () { return itemsRef.current; },
4366
- setItems: function (items) { return setItems(items); },
4367
- isMultiple: function () { return !!multiple; },
4368
- getLoading: function () { return !!loadingRef.current; },
4369
- setLoading: function (loading) { return setLoading(loading); },
4370
- });
4371
- }, [
4168
+ var commands = React.useMemo(function () { return ({
4169
+ getType: function () { return 'PFormAutocomplete'; },
4170
+ getName: function () { return name; },
4171
+ getReset: function () { return getFinalValue(initValue); },
4172
+ reset: function () { return updateValue(initValue); },
4173
+ getValue: function () { return valueRef.current; },
4174
+ setValue: function (newValue) { return updateValue(newValue); },
4175
+ getData: function () { return dataRef.current; },
4176
+ setData: function (data) { return setData(data); },
4177
+ isExceptValue: function () { return !!exceptValue; },
4178
+ isDisabled: function () { return !!disabledRef.current; },
4179
+ setDisabled: function (disabled) { return setDisabled(disabled); },
4180
+ isHidden: function () { return !!hiddenRef.current; },
4181
+ setHidden: function (hidden) { return setHidden(hidden); },
4182
+ focus: focus,
4183
+ focusValidate: focus,
4184
+ validate: function () { return validate(valueRef.current); },
4185
+ setError: function (error, errorText) {
4186
+ return setErrorErrorHelperText(error, error ? errorText : undefined);
4187
+ },
4188
+ getFormValueSeparator: function () { return formValueSeparator; },
4189
+ isFormValueSort: function () { return !!formValueSort; },
4190
+ getItems: function () { return itemsRef.current; },
4191
+ setItems: function (items) { return setItems(items); },
4192
+ isMultiple: function () { return !!multiple; },
4193
+ getLoading: function () { return !!loadingRef.current; },
4194
+ setLoading: function (loading) { return setLoading(loading); },
4195
+ }); }, [
4372
4196
  dataRef,
4373
4197
  disabledRef,
4374
4198
  exceptValue,
@@ -4392,32 +4216,7 @@ PFormTextEditor.displayName = 'PFormTextEditor';var PFormAutocomplete = ToForwar
4392
4216
  validate,
4393
4217
  valueRef,
4394
4218
  ]);
4395
- React.useLayoutEffect(function () {
4396
- if (ref || onAddValueItem) {
4397
- if (ref) {
4398
- if (typeof ref === 'function') {
4399
- ref(commands);
4400
- }
4401
- else {
4402
- ref.current = commands;
4403
- }
4404
- }
4405
- if (onAddValueItem)
4406
- onAddValueItem(id, commands);
4407
- return function () {
4408
- if (ref) {
4409
- if (typeof ref === 'function') {
4410
- ref(null);
4411
- }
4412
- else {
4413
- ref.current = null;
4414
- }
4415
- }
4416
- if (onRemoveValueItem)
4417
- onRemoveValueItem(id);
4418
- };
4419
- }
4420
- }, [commands, id, onAddValueItem, onRemoveValueItem, ref]);
4219
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
4421
4220
  /********************************************************************************************************************
4422
4221
  * Event Handler
4423
4222
  * ******************************************************************************************************************/
@@ -5339,29 +5138,9 @@ var PrivateTimeSelect = React.forwardRef(function (_a, ref) {
5339
5138
  // eslint-disable-next-line react-hooks/exhaustive-deps
5340
5139
  }, []);
5341
5140
  /********************************************************************************************************************
5342
- * LayoutEffect
5141
+ * Commands
5343
5142
  * ******************************************************************************************************************/
5344
- React.useLayoutEffect(function () {
5345
- if (ref) {
5346
- var commands = {
5347
- scrollToValue: scrollToValue,
5348
- };
5349
- if (typeof ref === 'function') {
5350
- ref(commands);
5351
- }
5352
- else {
5353
- ref.current = commands;
5354
- }
5355
- return function () {
5356
- if (typeof ref === 'function') {
5357
- ref(null);
5358
- }
5359
- else {
5360
- ref.current = null;
5361
- }
5362
- };
5363
- }
5364
- }, [ref, scrollToValue]);
5143
+ reactHook.useForwardLayoutRef(ref, React.useMemo(function () { return ({ scrollToValue: scrollToValue }); }, [scrollToValue]));
5365
5144
  /********************************************************************************************************************
5366
5145
  * Event Handler
5367
5146
  * ******************************************************************************************************************/
@@ -5558,25 +5337,7 @@ var PrivateStaticDatePicker = React.forwardRef(function (_a, ref) {
5558
5337
  /********************************************************************************************************************
5559
5338
  * Commands
5560
5339
  * ******************************************************************************************************************/
5561
- React.useLayoutEffect(function () {
5562
- if (ref) {
5563
- var commands = {};
5564
- if (typeof ref === 'function') {
5565
- ref(commands);
5566
- }
5567
- else {
5568
- ref.current = commands;
5569
- }
5570
- return function () {
5571
- if (typeof ref === 'function') {
5572
- ref(null);
5573
- }
5574
- else {
5575
- ref.current = null;
5576
- }
5577
- };
5578
- }
5579
- }, [ref]);
5340
+ reactHook.useForwardLayoutRef(ref, React.useMemo(function () { return ({}); }, []));
5580
5341
  /********************************************************************************************************************
5581
5342
  * Render - Function
5582
5343
  * ******************************************************************************************************************/
@@ -5853,68 +5614,36 @@ var PrivateStaticDatePicker = React.forwardRef(function (_a, ref) {
5853
5614
  /********************************************************************************************************************
5854
5615
  * Commands
5855
5616
  * ******************************************************************************************************************/
5856
- React.useLayoutEffect(function () {
5857
- if (ref || onAddValueItem) {
5858
- var commands = {
5859
- getType: function () { return 'default'; },
5860
- getName: function () { return name; },
5861
- getReset: function () { return initValue; },
5862
- reset: function () { return updateValue(initValue); },
5863
- getValue: function () { return valueRef.current; },
5864
- setValue: updateValue,
5865
- getData: function () { return dataRef.current; },
5866
- setData: setData,
5867
- isExceptValue: function () { return !!exceptValue; },
5868
- isDisabled: function () { return !!disabledRef.current; },
5869
- setDisabled: setDisabled,
5870
- isHidden: function () { return !!hiddenRef.current; },
5871
- setHidden: setHidden,
5872
- focus: focus,
5873
- focusValidate: focus,
5874
- validate: function () { return validate(valueRef.current); },
5875
- setError: function (error, errorText) {
5876
- return setErrorErrorHelperText(error, error ? errorText : undefined);
5877
- },
5878
- getFormValueFormat: function () {
5879
- return initFormValueFormat ? initFormValueFormat : getDateTimeFormValueFormat(type, time);
5880
- },
5881
- };
5882
- if (ref) {
5883
- if (typeof ref === 'function') {
5884
- ref(commands);
5885
- }
5886
- else {
5887
- ref.current = commands;
5888
- }
5889
- }
5890
- if (onAddValueItem)
5891
- onAddValueItem(id, commands);
5892
- return function () {
5893
- if (ref) {
5894
- if (typeof ref === 'function') {
5895
- ref(null);
5896
- }
5897
- else {
5898
- ref.current = null;
5899
- }
5900
- }
5901
- if (onRemoveValueItem)
5902
- onRemoveValueItem(id);
5903
- };
5904
- }
5905
- }, [
5617
+ var commands = React.useMemo(function () { return ({
5618
+ getType: function () { return 'default'; },
5619
+ getName: function () { return name; },
5620
+ getReset: function () { return initValue; },
5621
+ reset: function () { return updateValue(initValue); },
5622
+ getValue: function () { return valueRef.current; },
5623
+ setValue: updateValue,
5624
+ getData: function () { return dataRef.current; },
5625
+ setData: setData,
5626
+ isExceptValue: function () { return !!exceptValue; },
5627
+ isDisabled: function () { return !!disabledRef.current; },
5628
+ setDisabled: setDisabled,
5629
+ isHidden: function () { return !!hiddenRef.current; },
5630
+ setHidden: setHidden,
5631
+ focus: focus,
5632
+ focusValidate: focus,
5633
+ validate: function () { return validate(valueRef.current); },
5634
+ setError: function (error, errorText) {
5635
+ return setErrorErrorHelperText(error, error ? errorText : undefined);
5636
+ },
5637
+ getFormValueFormat: function () { return (initFormValueFormat ? initFormValueFormat : getDateTimeFormValueFormat(type, time)); },
5638
+ }); }, [
5906
5639
  dataRef,
5907
5640
  disabledRef,
5908
5641
  exceptValue,
5909
5642
  focus,
5910
5643
  hiddenRef,
5911
- id,
5912
5644
  initFormValueFormat,
5913
5645
  initValue,
5914
5646
  name,
5915
- onAddValueItem,
5916
- onRemoveValueItem,
5917
- ref,
5918
5647
  setData,
5919
5648
  setDisabled,
5920
5649
  setErrorErrorHelperText,
@@ -5925,6 +5654,7 @@ var PrivateStaticDatePicker = React.forwardRef(function (_a, ref) {
5925
5654
  validate,
5926
5655
  valueRef,
5927
5656
  ]);
5657
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
5928
5658
  /********************************************************************************************************************
5929
5659
  * Event Handler
5930
5660
  * ******************************************************************************************************************/
@@ -6198,27 +5928,9 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
6198
5928
  /********************************************************************************************************************
6199
5929
  * Commands
6200
5930
  * ******************************************************************************************************************/
6201
- React.useLayoutEffect(function () {
6202
- if (ref) {
6203
- var commands = {
6204
- timeSelectScrollToDate: timeSelectScrollToDate,
6205
- };
6206
- if (typeof ref === 'function') {
6207
- ref(commands);
6208
- }
6209
- else {
6210
- ref.current = commands;
6211
- }
6212
- return function () {
6213
- if (typeof ref === 'function') {
6214
- ref(null);
6215
- }
6216
- else {
6217
- ref.current = null;
6218
- }
6219
- };
6220
- }
6221
- }, [ref, timeSelectScrollToDate]);
5931
+ reactHook.useForwardLayoutRef(ref, React.useMemo(function () { return ({
5932
+ timeSelectScrollToDate: timeSelectScrollToDate,
5933
+ }); }, [timeSelectScrollToDate]));
6222
5934
  /********************************************************************************************************************
6223
5935
  * Render - Function
6224
5936
  * ******************************************************************************************************************/
@@ -6480,68 +6192,36 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
6480
6192
  /********************************************************************************************************************
6481
6193
  * Commands
6482
6194
  * ******************************************************************************************************************/
6483
- React.useLayoutEffect(function () {
6484
- if (ref || onAddValueItem) {
6485
- var commands = {
6486
- getType: function () { return 'default'; },
6487
- getName: function () { return name; },
6488
- getReset: function () { return getFinalValue$7(initValue); },
6489
- reset: function () { return updateValue(initValue); },
6490
- getValue: function () { return valueRef.current; },
6491
- setValue: updateValue,
6492
- getData: function () { return dataRef.current; },
6493
- setData: setData,
6494
- isExceptValue: function () { return !!exceptValue; },
6495
- isDisabled: function () { return !!disabledRef.current; },
6496
- setDisabled: setDisabled,
6497
- isHidden: function () { return !!hiddenRef.current; },
6498
- setHidden: setHidden,
6499
- focus: focus,
6500
- focusValidate: focus,
6501
- validate: function () { return validate(valueRef.current); },
6502
- setError: function (error, errorText) {
6503
- return setErrorErrorHelperText(error, error ? errorText : undefined);
6504
- },
6505
- getFormValueFormat: function () {
6506
- return initFormValueFormat ? initFormValueFormat : getDateTimeFormValueFormat(type, time);
6507
- },
6508
- };
6509
- if (ref) {
6510
- if (typeof ref === 'function') {
6511
- ref(commands);
6512
- }
6513
- else {
6514
- ref.current = commands;
6515
- }
6516
- }
6517
- if (onAddValueItem)
6518
- onAddValueItem(id, commands);
6519
- return function () {
6520
- if (ref) {
6521
- if (typeof ref === 'function') {
6522
- ref(null);
6523
- }
6524
- else {
6525
- ref.current = null;
6526
- }
6527
- }
6528
- if (onRemoveValueItem)
6529
- onRemoveValueItem(id);
6530
- };
6531
- }
6532
- }, [
6195
+ var commands = React.useMemo(function () { return ({
6196
+ getType: function () { return 'default'; },
6197
+ getName: function () { return name; },
6198
+ getReset: function () { return getFinalValue$7(initValue); },
6199
+ reset: function () { return updateValue(initValue); },
6200
+ getValue: function () { return valueRef.current; },
6201
+ setValue: updateValue,
6202
+ getData: function () { return dataRef.current; },
6203
+ setData: setData,
6204
+ isExceptValue: function () { return !!exceptValue; },
6205
+ isDisabled: function () { return !!disabledRef.current; },
6206
+ setDisabled: setDisabled,
6207
+ isHidden: function () { return !!hiddenRef.current; },
6208
+ setHidden: setHidden,
6209
+ focus: focus,
6210
+ focusValidate: focus,
6211
+ validate: function () { return validate(valueRef.current); },
6212
+ setError: function (error, errorText) {
6213
+ return setErrorErrorHelperText(error, error ? errorText : undefined);
6214
+ },
6215
+ getFormValueFormat: function () { return (initFormValueFormat ? initFormValueFormat : getDateTimeFormValueFormat(type, time)); },
6216
+ }); }, [
6533
6217
  dataRef,
6534
6218
  disabledRef,
6535
6219
  exceptValue,
6536
6220
  focus,
6537
6221
  hiddenRef,
6538
- id,
6539
6222
  initFormValueFormat,
6540
6223
  initValue,
6541
6224
  name,
6542
- onAddValueItem,
6543
- onRemoveValueItem,
6544
- ref,
6545
6225
  setData,
6546
6226
  setDisabled,
6547
6227
  setErrorErrorHelperText,
@@ -6552,6 +6232,7 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
6552
6232
  validate,
6553
6233
  valueRef,
6554
6234
  ]);
6235
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
6555
6236
  /********************************************************************************************************************
6556
6237
  * Event Handler
6557
6238
  * ******************************************************************************************************************/
@@ -7840,23 +7521,15 @@ PFormDateTimePicker.displayName = 'PFormDateTimePicker';var PFormTimePicker = Re
7840
7521
  });
7841
7522
  PFormTimePicker.displayName = 'PFormTimePicker';insertStyle(".PFormDateRangePickerTooltipPicker .MuiPickersCalendarHeader-root{display:none}.PFormDateRangePickerTooltipPicker .MuiDayPicker-header>span{margin:0}.PFormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content{min-width:292px}.PFormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content .MuiCalendarOrClockPicker-root>div{width:292px}.PFormDateRangePickerTooltipPicker .MuiPickerStaticWrapper-content .MuiCalendarOrClockPicker-root>div .MuiCalendarPicker-root{width:292px}.PFormDateRangePickerTooltipPicker .selected-bg{display:none;position:absolute}.PFormDateRangePickerTooltipPicker .selected-bg.sel{display:block;position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(66,165,245,.6)}.PFormDateRangePickerTooltipPicker .selected-bg.sel.ui-start,.PFormDateRangePickerTooltipPicker .selected-bg.sel.s-start{border-top-left-radius:50%;border-bottom-left-radius:50%}.PFormDateRangePickerTooltipPicker .selected-bg.sel.ui-end,.PFormDateRangePickerTooltipPicker .selected-bg.sel.s-end{border-top-right-radius:50%;border-bottom-right-radius:50%}.PFormDateRangePickerTooltipPicker .selected-bg.sel~.MuiPickersDay-root{border:0}.PFormDateRangePickerTooltipPicker .selected-bg.sel~.MuiPickersDay-root:not(:hover):not(:active):not(.Mui-selected){background-color:rgba(0,0,0,0)}.PFormDateRangePickerTooltipPicker .focused-bg{display:none;position:absolute}.PFormDateRangePickerTooltipPicker .focused-bg.focused{display:block;position:absolute;top:0;bottom:0;left:0;right:0;border:2px solid #efefef;border-left:0;border-right:0}.PFormDateRangePickerTooltipPicker .focused-bg.focused.ui-start,.PFormDateRangePickerTooltipPicker .focused-bg.focused.f-start{border-left:2px solid #efefef;border-top-left-radius:50%;border-bottom-left-radius:50%}.PFormDateRangePickerTooltipPicker .focused-bg.focused.ui-end,.PFormDateRangePickerTooltipPicker .focused-bg.focused.f-end{border-right:2px solid #efefef;border-top-right-radius:50%;border-bottom-right-radius:50%}.PFormDateRangePickerTooltipPicker .focused-bg.focused~.MuiPickersDay-root:not(:hover):not(:active):not(.Mui-selected){background-color:rgba(0,0,0,0)}");var PFormDateRangePickerTooltipPicker = React.forwardRef(function (_a, ref) {
7842
7523
  /********************************************************************************************************************
7843
- * State
7524
+ * Ref
7844
7525
  * ******************************************************************************************************************/
7845
7526
  var selectType = _a.selectType, initValue = _a.value, focusedDate = _a.focusedDate, month = _a.month, disableFuture = _a.disableFuture, disablePast = _a.disablePast, minDate = _a.minDate, maxDate = _a.maxDate, onValueChange = _a.onValueChange, onMouseEnterPickersDay = _a.onMouseEnterPickersDay, onMonthChange = _a.onMonthChange;
7846
- var _b = React.useState(null), activeMonthValue = _b[0], setActiveMonthValue = _b[1];
7847
- /********************************************************************************************************************
7848
- * Memo
7849
- * ******************************************************************************************************************/
7850
- var value = React.useMemo(function () { return (initValue ? initValue : [null, null]); }, [initValue]);
7851
- /********************************************************************************************************************
7852
- * Effect
7853
- * ******************************************************************************************************************/
7854
- React.useEffect(function () {
7855
- setActiveMonthValue(null);
7856
- }, [selectType]);
7857
- //--------------------------------------------------------------------------------------------------------------------
7858
7527
  var leftArrowOnClickRef = React.useRef(undefined);
7859
7528
  var rightArrowOnClickRef = React.useRef(undefined);
7529
+ /********************************************************************************************************************
7530
+ * State
7531
+ * ******************************************************************************************************************/
7532
+ var _b = React.useState(null), activeMonthValue = _b[0], setActiveMonthValue = _b[1];
7860
7533
  var LeftArrowButton = React.useState(function () {
7861
7534
  var ArrowButton = function (props) {
7862
7535
  leftArrowOnClickRef.current = props.onClick;
@@ -7871,11 +7544,25 @@ PFormTimePicker.displayName = 'PFormTimePicker';insertStyle(".PFormDateRangePick
7871
7544
  };
7872
7545
  return ArrowButton;
7873
7546
  })[0];
7874
- //--------------------------------------------------------------------------------------------------------------------
7547
+ /********************************************************************************************************************
7548
+ * Memo
7549
+ * ******************************************************************************************************************/
7550
+ var value = React.useMemo(function () { return (initValue ? initValue : [null, null]); }, [initValue]);
7551
+ /********************************************************************************************************************
7552
+ * Effect
7553
+ * ******************************************************************************************************************/
7554
+ React.useEffect(function () {
7555
+ setActiveMonthValue(null);
7556
+ }, [selectType]);
7557
+ /********************************************************************************************************************
7558
+ * Function
7559
+ * ******************************************************************************************************************/
7875
7560
  var getDateVal = React.useCallback(function (date) {
7876
7561
  return Number(date.format('YYYYMMDD'));
7877
7562
  }, []);
7878
- //--------------------------------------------------------------------------------------------------------------------
7563
+ /********************************************************************************************************************
7564
+ * Memo
7565
+ * ******************************************************************************************************************/
7879
7566
  var baseClassNames = React.useMemo(function () {
7880
7567
  var newValue = {};
7881
7568
  var lastDayOfMonth = month.endOf('month').date();
@@ -7963,7 +7650,9 @@ PFormTimePicker.displayName = 'PFormTimePicker';insertStyle(".PFormDateRangePick
7963
7650
  }
7964
7651
  return newValue;
7965
7652
  }, [value, getDateVal, focusedDate, month, selectType]);
7966
- //--------------------------------------------------------------------------------------------------------------------
7653
+ /********************************************************************************************************************
7654
+ * Function
7655
+ * ******************************************************************************************************************/
7967
7656
  var previousMonth = React.useCallback(function () {
7968
7657
  if (leftArrowOnClickRef.current) {
7969
7658
  leftArrowOnClickRef.current({});
@@ -7977,30 +7666,6 @@ PFormTimePicker.displayName = 'PFormTimePicker';insertStyle(".PFormDateRangePick
7977
7666
  var activeMonth = React.useCallback(function (month) {
7978
7667
  setActiveMonthValue(month);
7979
7668
  }, []);
7980
- React.useLayoutEffect(function () {
7981
- if (ref) {
7982
- var commands = {
7983
- previousMonth: previousMonth,
7984
- nextMonth: nextMonth,
7985
- activeMonth: activeMonth,
7986
- };
7987
- if (typeof ref === 'function') {
7988
- ref(commands);
7989
- }
7990
- else {
7991
- ref.current = commands;
7992
- }
7993
- return function () {
7994
- if (typeof ref === 'function') {
7995
- ref(null);
7996
- }
7997
- else {
7998
- ref.current = null;
7999
- }
8000
- };
8001
- }
8002
- }, [ref, previousMonth, nextMonth, activeMonth]);
8003
- //--------------------------------------------------------------------------------------------------------------------
8004
7669
  var handleRenderDay = React.useCallback(function (props) {
8005
7670
  var startDate = value[0];
8006
7671
  var endDate = value[1];
@@ -8013,6 +7678,15 @@ PFormTimePicker.displayName = 'PFormTimePicker';insertStyle(".PFormDateRangePick
8013
7678
  React.createElement("div", { className: classNames('selected-bg', baseClassName, selectedClassName) }),
8014
7679
  React.createElement(xDatePickers.PickersDay, __assign({}, props, { disableMargin: true, selected: props.day.isSame(startDate, 'date') || props.day.isSame(endDate, 'date'), onMouseEnter: value[0] || value[1] ? function () { return onMouseEnterPickersDay && onMouseEnterPickersDay(props.day); } : undefined }))));
8015
7680
  }, [value, getDateVal, baseClassNames, selectedClassNames, focusedClassNames, onMouseEnterPickersDay]);
7681
+ /********************************************************************************************************************
7682
+ * Commands
7683
+ * ******************************************************************************************************************/
7684
+ var commands = React.useMemo(function () { return ({
7685
+ previousMonth: previousMonth,
7686
+ nextMonth: nextMonth,
7687
+ activeMonth: activeMonth,
7688
+ }); }, [activeMonth, nextMonth, previousMonth]);
7689
+ reactHook.useForwardLayoutRef(ref, commands);
8016
7690
  /********************************************************************************************************************
8017
7691
  * Render
8018
7692
  * ******************************************************************************************************************/
@@ -8148,29 +7822,7 @@ var PFormDateRangePickerTooltipPickerContainer = React.forwardRef(function (_a,
8148
7822
  /********************************************************************************************************************
8149
7823
  * Commands
8150
7824
  * ******************************************************************************************************************/
8151
- React.useLayoutEffect(function () {
8152
- if (ref) {
8153
- var commands = {
8154
- previousMonth: previousMonth,
8155
- nextMonth: nextMonth,
8156
- activeMonth: activeMonth,
8157
- };
8158
- if (typeof ref === 'function') {
8159
- ref(commands);
8160
- }
8161
- else {
8162
- ref.current = commands;
8163
- }
8164
- return function () {
8165
- if (typeof ref === 'function') {
8166
- ref(null);
8167
- }
8168
- else {
8169
- ref.current = null;
8170
- }
8171
- };
8172
- }
8173
- }, [ref, previousMonth, nextMonth, activeMonth]);
7825
+ reactHook.useForwardLayoutRef(ref, React.useMemo(function () { return ({ previousMonth: previousMonth, nextMonth: nextMonth, activeMonth: activeMonth }); }, [activeMonth, nextMonth, previousMonth]));
8174
7826
  /********************************************************************************************************************
8175
7827
  * Render Function
8176
7828
  * ******************************************************************************************************************/
@@ -8707,66 +8359,40 @@ var PFormDateRangePicker = React.forwardRef(function (_a, ref) {
8707
8359
  /********************************************************************************************************************
8708
8360
  * Commands
8709
8361
  * ******************************************************************************************************************/
8710
- React.useLayoutEffect(function () {
8711
- if (ref || onAddValueItem) {
8712
- var commands = {
8713
- getType: function () { return 'PFormDateRangePicker'; },
8714
- getName: function () { return name; },
8715
- getReset: function () { return getFinalValue$6(initValue); },
8716
- reset: function () { return updateValue(initValue); },
8717
- getValue: function () { return valueRef.current; },
8718
- setValue: updateValue,
8719
- getData: function () { return dataRef.current; },
8720
- setData: setData,
8721
- getFromValue: function () { return valueRef.current[0]; },
8722
- setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
8723
- getToValue: function () { return valueRef.current[1]; },
8724
- setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
8725
- isExceptValue: function () { return !!exceptValue; },
8726
- isDisabled: function () { return !!disabledRef.current; },
8727
- setDisabled: setDisabled,
8728
- isHidden: function () { return !!hiddenRef.current; },
8729
- setHidden: setHidden,
8730
- focus: focus,
8731
- focusValidate: focusValidate,
8732
- validate: function () { return validate(valueRef.current); },
8733
- setError: function (error, errorText) {
8734
- return setErrorErrorHelperText(error, error ? errorText : undefined);
8735
- },
8736
- getFormValueFormat: function () { return formValueFormat; },
8737
- getFormValueFromNameSuffix: function () { return formValueFromNameSuffix; },
8738
- getFormValueToNameSuffix: function () { return formValueToNameSuffix; },
8739
- getFormValueFromName: function () {
8740
- return "".concat(name).concat(formValueFromNameSuffix);
8741
- },
8742
- getFormValueToName: function () {
8743
- return "".concat(name).concat(formValueToNameSuffix);
8744
- },
8745
- };
8746
- if (ref) {
8747
- if (typeof ref === 'function') {
8748
- ref(commands);
8749
- }
8750
- else {
8751
- ref.current = commands;
8752
- }
8753
- }
8754
- if (onAddValueItem)
8755
- onAddValueItem(id, commands);
8756
- return function () {
8757
- if (ref) {
8758
- if (typeof ref === 'function') {
8759
- ref(null);
8760
- }
8761
- else {
8762
- ref.current = null;
8763
- }
8764
- }
8765
- if (onRemoveValueItem)
8766
- onRemoveValueItem(id);
8767
- };
8768
- }
8769
- }, [
8362
+ var commands = React.useMemo(function () { return ({
8363
+ getType: function () { return 'PFormDateRangePicker'; },
8364
+ getName: function () { return name; },
8365
+ getReset: function () { return getFinalValue$6(initValue); },
8366
+ reset: function () { return updateValue(initValue); },
8367
+ getValue: function () { return valueRef.current; },
8368
+ setValue: updateValue,
8369
+ getData: function () { return dataRef.current; },
8370
+ setData: setData,
8371
+ getFromValue: function () { return valueRef.current[0]; },
8372
+ setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
8373
+ getToValue: function () { return valueRef.current[1]; },
8374
+ setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
8375
+ isExceptValue: function () { return !!exceptValue; },
8376
+ isDisabled: function () { return !!disabledRef.current; },
8377
+ setDisabled: setDisabled,
8378
+ isHidden: function () { return !!hiddenRef.current; },
8379
+ setHidden: setHidden,
8380
+ focus: focus,
8381
+ focusValidate: focusValidate,
8382
+ validate: function () { return validate(valueRef.current); },
8383
+ setError: function (error, errorText) {
8384
+ return setErrorErrorHelperText(error, error ? errorText : undefined);
8385
+ },
8386
+ getFormValueFormat: function () { return formValueFormat; },
8387
+ getFormValueFromNameSuffix: function () { return formValueFromNameSuffix; },
8388
+ getFormValueToNameSuffix: function () { return formValueToNameSuffix; },
8389
+ getFormValueFromName: function () {
8390
+ return "".concat(name).concat(formValueFromNameSuffix);
8391
+ },
8392
+ getFormValueToName: function () {
8393
+ return "".concat(name).concat(formValueToNameSuffix);
8394
+ },
8395
+ }); }, [
8770
8396
  dataRef,
8771
8397
  disabledRef,
8772
8398
  exceptValue,
@@ -8776,12 +8402,8 @@ var PFormDateRangePicker = React.forwardRef(function (_a, ref) {
8776
8402
  formValueFromNameSuffix,
8777
8403
  formValueToNameSuffix,
8778
8404
  hiddenRef,
8779
- id,
8780
8405
  initValue,
8781
8406
  name,
8782
- onAddValueItem,
8783
- onRemoveValueItem,
8784
- ref,
8785
8407
  setData,
8786
8408
  setDisabled,
8787
8409
  setErrorErrorHelperText,
@@ -8790,6 +8412,7 @@ var PFormDateRangePicker = React.forwardRef(function (_a, ref) {
8790
8412
  validate,
8791
8413
  valueRef,
8792
8414
  ]);
8415
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
8793
8416
  /********************************************************************************************************************
8794
8417
  * Variable
8795
8418
  * ******************************************************************************************************************/
@@ -9017,60 +8640,34 @@ var PFormFile = React.forwardRef(function (_a, ref) {
9017
8640
  /********************************************************************************************************************
9018
8641
  * Commands
9019
8642
  * ******************************************************************************************************************/
9020
- React.useLayoutEffect(function () {
9021
- var commands = {
9022
- getType: function () { return 'PFormFile'; },
9023
- getName: function () { return name; },
9024
- getReset: function () { return getFinalValue$5(initValue); },
9025
- reset: function () { return updateValue(initValue); },
9026
- getValue: function () { return valueRef.current; },
9027
- setValue: updateValue,
9028
- getData: function () { return dataRef.current; },
9029
- setData: setData,
9030
- isExceptValue: function () { return !!exceptValue; },
9031
- isDisabled: function () { return !!disabledRef.current; },
9032
- setDisabled: setDisabled,
9033
- isHidden: function () { return !!hiddenRef.current; },
9034
- setHidden: setHidden,
9035
- focus: focus,
9036
- focusValidate: focus,
9037
- validate: function () { return validate(valueRef.current); },
9038
- setError: function (error, errorHelperText) {
9039
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
9040
- },
9041
- };
9042
- onAddValueItem(id, commands);
9043
- if (ref) {
9044
- if (typeof ref === 'function') {
9045
- ref(commands);
9046
- }
9047
- else {
9048
- ref.current = commands;
9049
- }
9050
- }
9051
- return function () {
9052
- onRemoveValueItem(id);
9053
- if (ref) {
9054
- if (typeof ref === 'function') {
9055
- ref(null);
9056
- }
9057
- else {
9058
- ref.current = null;
9059
- }
9060
- }
9061
- };
9062
- }, [
8643
+ var commands = React.useMemo(function () { return ({
8644
+ getType: function () { return 'PFormFile'; },
8645
+ getName: function () { return name; },
8646
+ getReset: function () { return getFinalValue$5(initValue); },
8647
+ reset: function () { return updateValue(initValue); },
8648
+ getValue: function () { return valueRef.current; },
8649
+ setValue: updateValue,
8650
+ getData: function () { return dataRef.current; },
8651
+ setData: setData,
8652
+ isExceptValue: function () { return !!exceptValue; },
8653
+ isDisabled: function () { return !!disabledRef.current; },
8654
+ setDisabled: setDisabled,
8655
+ isHidden: function () { return !!hiddenRef.current; },
8656
+ setHidden: setHidden,
8657
+ focus: focus,
8658
+ focusValidate: focus,
8659
+ validate: function () { return validate(valueRef.current); },
8660
+ setError: function (error, errorHelperText) {
8661
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
8662
+ },
8663
+ }); }, [
9063
8664
  dataRef,
9064
8665
  disabledRef,
9065
8666
  exceptValue,
9066
8667
  focus,
9067
8668
  hiddenRef,
9068
- id,
9069
8669
  initValue,
9070
8670
  name,
9071
- onAddValueItem,
9072
- onRemoveValueItem,
9073
- ref,
9074
8671
  setData,
9075
8672
  setDisabled,
9076
8673
  setErrorErrorHelperText,
@@ -9079,6 +8676,7 @@ var PFormFile = React.forwardRef(function (_a, ref) {
9079
8676
  validate,
9080
8677
  valueRef,
9081
8678
  ]);
8679
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
9082
8680
  /********************************************************************************************************************
9083
8681
  * Function
9084
8682
  * ******************************************************************************************************************/
@@ -9525,73 +9123,51 @@ var PFormMonthPicker = React.forwardRef(function (_a, ref) {
9525
9123
  /********************************************************************************************************************
9526
9124
  * Commands
9527
9125
  * ******************************************************************************************************************/
9528
- React.useLayoutEffect(function () {
9529
- var commands = {
9530
- getType: function () { return 'PFormMonthPicker'; },
9531
- getName: function () { return name; },
9532
- getReset: function () { return getFinalValue$3(initValue); },
9533
- reset: function () { return updateValue(initValue); },
9534
- getValue: function () { return valueRef.current; },
9535
- setValue: updateValue,
9536
- getData: function () { return dataRef.current; },
9537
- setData: setData,
9538
- getYear: function () { return (valueRef.current ? valueRef.current.year : null); },
9539
- setYear: function (year) {
9540
- updateValue(year === null
9541
- ? null
9542
- : valueRef.current
9543
- ? { year: year, month: valueRef.current.month }
9544
- : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 });
9545
- },
9546
- getMonth: function () { return (valueRef.current ? valueRef.current.month : null); },
9547
- setMonth: function (month) {
9548
- updateValue(month === null
9549
- ? null
9550
- : valueRef.current
9551
- ? { year: valueRef.current.year, month: month }
9552
- : { year: new Date().getFullYear(), month: month });
9553
- },
9554
- isExceptValue: function () { return !!exceptValue; },
9555
- isDisabled: function () { return !!disabledRef.current; },
9556
- setDisabled: setDisabled,
9557
- isHidden: function () { return !!hiddenRef.current; },
9558
- setHidden: setHidden,
9559
- focus: focus,
9560
- focusValidate: focus,
9561
- validate: function () { return validate(valueRef.current); },
9562
- setError: function (error, errorHelperText) {
9563
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
9564
- },
9565
- getFormValueYearNameSuffix: function () { return formValueYearNameSuffix; },
9566
- getFormValueMonthNameSuffix: function () { return formValueMonthNameSuffix; },
9567
- getFormValueYearName: function () {
9568
- return "".concat(name).concat(formValueYearNameSuffix);
9569
- },
9570
- getFormValueMonthName: function () {
9571
- return "".concat(name).concat(formValueMonthNameSuffix);
9572
- },
9573
- };
9574
- onAddValueItem(id, commands);
9575
- if (ref) {
9576
- if (typeof ref === 'function') {
9577
- ref(commands);
9578
- }
9579
- else {
9580
- ref.current = commands;
9581
- }
9582
- }
9583
- return function () {
9584
- onRemoveValueItem(id);
9585
- if (ref) {
9586
- if (typeof ref === 'function') {
9587
- ref(null);
9588
- }
9589
- else {
9590
- ref.current = null;
9591
- }
9592
- }
9593
- };
9594
- }, [
9126
+ var commands = React.useMemo(function () { return ({
9127
+ getType: function () { return 'PFormMonthPicker'; },
9128
+ getName: function () { return name; },
9129
+ getReset: function () { return getFinalValue$3(initValue); },
9130
+ reset: function () { return updateValue(initValue); },
9131
+ getValue: function () { return valueRef.current; },
9132
+ setValue: updateValue,
9133
+ getData: function () { return dataRef.current; },
9134
+ setData: setData,
9135
+ getYear: function () { return (valueRef.current ? valueRef.current.year : null); },
9136
+ setYear: function (year) {
9137
+ updateValue(year === null
9138
+ ? null
9139
+ : valueRef.current
9140
+ ? { year: year, month: valueRef.current.month }
9141
+ : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 });
9142
+ },
9143
+ getMonth: function () { return (valueRef.current ? valueRef.current.month : null); },
9144
+ setMonth: function (month) {
9145
+ updateValue(month === null
9146
+ ? null
9147
+ : valueRef.current
9148
+ ? { year: valueRef.current.year, month: month }
9149
+ : { year: new Date().getFullYear(), month: month });
9150
+ },
9151
+ isExceptValue: function () { return !!exceptValue; },
9152
+ isDisabled: function () { return !!disabledRef.current; },
9153
+ setDisabled: setDisabled,
9154
+ isHidden: function () { return !!hiddenRef.current; },
9155
+ setHidden: setHidden,
9156
+ focus: focus,
9157
+ focusValidate: focus,
9158
+ validate: function () { return validate(valueRef.current); },
9159
+ setError: function (error, errorHelperText) {
9160
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
9161
+ },
9162
+ getFormValueYearNameSuffix: function () { return formValueYearNameSuffix; },
9163
+ getFormValueMonthNameSuffix: function () { return formValueMonthNameSuffix; },
9164
+ getFormValueYearName: function () {
9165
+ return "".concat(name).concat(formValueYearNameSuffix);
9166
+ },
9167
+ getFormValueMonthName: function () {
9168
+ return "".concat(name).concat(formValueMonthNameSuffix);
9169
+ },
9170
+ }); }, [
9595
9171
  dataRef,
9596
9172
  disabledRef,
9597
9173
  exceptValue,
@@ -9599,12 +9175,8 @@ var PFormMonthPicker = React.forwardRef(function (_a, ref) {
9599
9175
  formValueMonthNameSuffix,
9600
9176
  formValueYearNameSuffix,
9601
9177
  hiddenRef,
9602
- id,
9603
9178
  initValue,
9604
9179
  name,
9605
- onAddValueItem,
9606
- onRemoveValueItem,
9607
- ref,
9608
9180
  setData,
9609
9181
  setDisabled,
9610
9182
  setErrorErrorHelperText,
@@ -9613,6 +9185,7 @@ var PFormMonthPicker = React.forwardRef(function (_a, ref) {
9613
9185
  validate,
9614
9186
  valueRef,
9615
9187
  ]);
9188
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
9616
9189
  /********************************************************************************************************************
9617
9190
  * Event Handler
9618
9191
  * ******************************************************************************************************************/
@@ -9891,113 +9464,91 @@ var PFormMonthRangePicker = React.forwardRef(function (_a, ref) {
9891
9464
  /********************************************************************************************************************
9892
9465
  * Commands
9893
9466
  * ******************************************************************************************************************/
9894
- React.useLayoutEffect(function () {
9895
- var commands = {
9896
- getType: function () { return 'PFormMonthRangePicker'; },
9897
- getName: function () { return name; },
9898
- getReset: function () { return getFinalValue$2(initValue); },
9899
- reset: function () { return updateValue(initValue); },
9900
- getValue: function () { return valueRef.current; },
9901
- setValue: updateValue,
9902
- getData: function () { return dataRef.current; },
9903
- setData: setData,
9904
- getFromValue: function () { return valueRef.current[0]; },
9905
- setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
9906
- getToValue: function () { return valueRef.current[1]; },
9907
- setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
9908
- getFromYear: function () { return (valueRef.current[0] ? valueRef.current[0].year : null); },
9909
- setFromYear: function (year) {
9910
- updateValue([
9911
- year === null
9912
- ? null
9913
- : valueRef.current[0]
9914
- ? { year: year, month: valueRef.current[0].month }
9915
- : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 },
9916
- valueRef.current[1],
9917
- ]);
9918
- },
9919
- getFromMonth: function () { return (valueRef.current[0] ? valueRef.current[0].month : null); },
9920
- setFromMonth: function (month) {
9921
- updateValue([
9922
- month === null
9923
- ? null
9924
- : valueRef.current[0]
9925
- ? { year: valueRef.current[0].year, month: month }
9926
- : { year: new Date().getFullYear(), month: month },
9927
- valueRef.current[1],
9928
- ]);
9929
- },
9930
- getToYear: function () { return (valueRef.current[1] ? valueRef.current[1].year : null); },
9931
- setToYear: function (year) {
9932
- updateValue([
9933
- valueRef.current[0],
9934
- year === null
9935
- ? null
9936
- : valueRef.current[1]
9937
- ? { year: year, month: valueRef.current[1].month }
9938
- : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 },
9939
- ]);
9940
- },
9941
- getToMonth: function () { return (valueRef.current[1] ? valueRef.current[1].month : null); },
9942
- setToMonth: function (month) {
9943
- updateValue([
9944
- valueRef.current[0],
9945
- month === null
9946
- ? null
9947
- : valueRef.current[1]
9948
- ? { year: valueRef.current[1].year, month: month }
9949
- : { year: new Date().getFullYear(), month: month },
9950
- ]);
9951
- },
9952
- isExceptValue: function () { return !!exceptValue; },
9953
- isDisabled: function () { return !!disabledRef.current; },
9954
- setDisabled: setDisabled,
9955
- isHidden: function () { return !!hiddenRef.current; },
9956
- setHidden: setHidden,
9957
- focus: focus,
9958
- focusValidate: focus,
9959
- validate: function () { return validate(valueRef.current); },
9960
- setError: function (error, errorHelperText) {
9961
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
9962
- },
9963
- getFormValueFromYearNameSuffix: function () { return formValueFromYearNameSuffix; },
9964
- getFormValueFromMonthNameSuffix: function () { return formValueFromMonthNameSuffix; },
9965
- getFormValueToYearNameSuffix: function () { return formValueToYearNameSuffix; },
9966
- getFormValueToMonthNameSuffix: function () { return formValueToMonthNameSuffix; },
9967
- getFormValueFromYearName: function () {
9968
- return "".concat(name).concat(formValueFromYearNameSuffix);
9969
- },
9970
- getFormValueFromMonthName: function () {
9971
- return "".concat(name).concat(formValueFromMonthNameSuffix);
9972
- },
9973
- getFormValueToYearName: function () {
9974
- return "".concat(name).concat(formValueToYearNameSuffix);
9975
- },
9976
- getFormValueToMonthName: function () {
9977
- return "".concat(name).concat(formValueToMonthNameSuffix);
9978
- },
9979
- };
9980
- onAddValueItem(id, commands);
9981
- if (ref) {
9982
- if (typeof ref === 'function') {
9983
- ref(commands);
9984
- }
9985
- else {
9986
- ref.current = commands;
9987
- }
9988
- }
9989
- return function () {
9990
- onRemoveValueItem(id);
9991
- if (ref) {
9992
- if (typeof ref === 'function') {
9993
- ref(null);
9994
- }
9995
- else {
9996
- ref.current = null;
9997
- }
9998
- }
9999
- };
10000
- }, [
9467
+ var commands = React.useMemo(function () { return ({
9468
+ getType: function () { return 'PFormMonthRangePicker'; },
9469
+ getName: function () { return name; },
9470
+ getReset: function () { return getFinalValue$2(initValue); },
9471
+ reset: function () { return updateValue(initValue); },
9472
+ getValue: function () { return valueRef.current; },
9473
+ setValue: updateValue,
9474
+ getData: function () { return dataRef.current; },
9475
+ setData: setData,
9476
+ getFromValue: function () { return valueRef.current[0]; },
9477
+ setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
9478
+ getToValue: function () { return valueRef.current[1]; },
9479
+ setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
9480
+ getFromYear: function () { return (valueRef.current[0] ? valueRef.current[0].year : null); },
9481
+ setFromYear: function (year) {
9482
+ updateValue([
9483
+ year === null
9484
+ ? null
9485
+ : valueRef.current[0]
9486
+ ? { year: year, month: valueRef.current[0].month }
9487
+ : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 },
9488
+ valueRef.current[1],
9489
+ ]);
9490
+ },
9491
+ getFromMonth: function () { return (valueRef.current[0] ? valueRef.current[0].month : null); },
9492
+ setFromMonth: function (month) {
9493
+ updateValue([
9494
+ month === null
9495
+ ? null
9496
+ : valueRef.current[0]
9497
+ ? { year: valueRef.current[0].year, month: month }
9498
+ : { year: new Date().getFullYear(), month: month },
9499
+ valueRef.current[1],
9500
+ ]);
9501
+ },
9502
+ getToYear: function () { return (valueRef.current[1] ? valueRef.current[1].year : null); },
9503
+ setToYear: function (year) {
9504
+ updateValue([
9505
+ valueRef.current[0],
9506
+ year === null
9507
+ ? null
9508
+ : valueRef.current[1]
9509
+ ? { year: year, month: valueRef.current[1].month }
9510
+ : { year: year, month: year === new Date().getFullYear() ? new Date().getMonth() + 1 : 1 },
9511
+ ]);
9512
+ },
9513
+ getToMonth: function () { return (valueRef.current[1] ? valueRef.current[1].month : null); },
9514
+ setToMonth: function (month) {
9515
+ updateValue([
9516
+ valueRef.current[0],
9517
+ month === null
9518
+ ? null
9519
+ : valueRef.current[1]
9520
+ ? { year: valueRef.current[1].year, month: month }
9521
+ : { year: new Date().getFullYear(), month: month },
9522
+ ]);
9523
+ },
9524
+ isExceptValue: function () { return !!exceptValue; },
9525
+ isDisabled: function () { return !!disabledRef.current; },
9526
+ setDisabled: setDisabled,
9527
+ isHidden: function () { return !!hiddenRef.current; },
9528
+ setHidden: setHidden,
9529
+ focus: focus,
9530
+ focusValidate: focus,
9531
+ validate: function () { return validate(valueRef.current); },
9532
+ setError: function (error, errorHelperText) {
9533
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
9534
+ },
9535
+ getFormValueFromYearNameSuffix: function () { return formValueFromYearNameSuffix; },
9536
+ getFormValueFromMonthNameSuffix: function () { return formValueFromMonthNameSuffix; },
9537
+ getFormValueToYearNameSuffix: function () { return formValueToYearNameSuffix; },
9538
+ getFormValueToMonthNameSuffix: function () { return formValueToMonthNameSuffix; },
9539
+ getFormValueFromYearName: function () {
9540
+ return "".concat(name).concat(formValueFromYearNameSuffix);
9541
+ },
9542
+ getFormValueFromMonthName: function () {
9543
+ return "".concat(name).concat(formValueFromMonthNameSuffix);
9544
+ },
9545
+ getFormValueToYearName: function () {
9546
+ return "".concat(name).concat(formValueToYearNameSuffix);
9547
+ },
9548
+ getFormValueToMonthName: function () {
9549
+ return "".concat(name).concat(formValueToMonthNameSuffix);
9550
+ },
9551
+ }); }, [
10001
9552
  dataRef,
10002
9553
  disabledRef,
10003
9554
  exceptValue,
@@ -10007,12 +9558,8 @@ var PFormMonthRangePicker = React.forwardRef(function (_a, ref) {
10007
9558
  formValueToMonthNameSuffix,
10008
9559
  formValueToYearNameSuffix,
10009
9560
  hiddenRef,
10010
- id,
10011
9561
  initValue,
10012
9562
  name,
10013
- onAddValueItem,
10014
- onRemoveValueItem,
10015
- ref,
10016
9563
  setData,
10017
9564
  setDisabled,
10018
9565
  setErrorErrorHelperText,
@@ -10021,6 +9568,7 @@ var PFormMonthRangePicker = React.forwardRef(function (_a, ref) {
10021
9568
  validate,
10022
9569
  valueRef,
10023
9570
  ]);
9571
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
10024
9572
  /********************************************************************************************************************
10025
9573
  * Event Handler
10026
9574
  * ******************************************************************************************************************/
@@ -10284,60 +9832,34 @@ var PFormYearPicker = React.forwardRef(function (_a, ref) {
10284
9832
  /********************************************************************************************************************
10285
9833
  * Commands
10286
9834
  * ******************************************************************************************************************/
10287
- React.useLayoutEffect(function () {
10288
- var commands = {
10289
- getType: function () { return 'PFormYearPicker'; },
10290
- getName: function () { return name; },
10291
- getReset: function () { return getFinalValue$1(initValue); },
10292
- reset: function () { return updateValue(initValue); },
10293
- getValue: function () { return valueRef.current; },
10294
- setValue: updateValue,
10295
- getData: function () { return dataRef.current; },
10296
- setData: setData,
10297
- isExceptValue: function () { return !!exceptValue; },
10298
- isDisabled: function () { return !!disabledRef.current; },
10299
- setDisabled: setDisabled,
10300
- isHidden: function () { return !!hiddenRef.current; },
10301
- setHidden: setHidden,
10302
- focus: focus,
10303
- focusValidate: focus,
10304
- validate: function () { return validate(valueRef.current); },
10305
- setError: function (error, errorHelperText) {
10306
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
10307
- },
10308
- };
10309
- onAddValueItem(id, commands);
10310
- if (ref) {
10311
- if (typeof ref === 'function') {
10312
- ref(commands);
10313
- }
10314
- else {
10315
- ref.current = commands;
10316
- }
10317
- }
10318
- return function () {
10319
- onRemoveValueItem(id);
10320
- if (ref) {
10321
- if (typeof ref === 'function') {
10322
- ref(null);
10323
- }
10324
- else {
10325
- ref.current = null;
10326
- }
10327
- }
10328
- };
10329
- }, [
9835
+ var commands = React.useMemo(function () { return ({
9836
+ getType: function () { return 'PFormYearPicker'; },
9837
+ getName: function () { return name; },
9838
+ getReset: function () { return getFinalValue$1(initValue); },
9839
+ reset: function () { return updateValue(initValue); },
9840
+ getValue: function () { return valueRef.current; },
9841
+ setValue: updateValue,
9842
+ getData: function () { return dataRef.current; },
9843
+ setData: setData,
9844
+ isExceptValue: function () { return !!exceptValue; },
9845
+ isDisabled: function () { return !!disabledRef.current; },
9846
+ setDisabled: setDisabled,
9847
+ isHidden: function () { return !!hiddenRef.current; },
9848
+ setHidden: setHidden,
9849
+ focus: focus,
9850
+ focusValidate: focus,
9851
+ validate: function () { return validate(valueRef.current); },
9852
+ setError: function (error, errorHelperText) {
9853
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
9854
+ },
9855
+ }); }, [
10330
9856
  dataRef,
10331
9857
  disabledRef,
10332
9858
  exceptValue,
10333
9859
  focus,
10334
9860
  hiddenRef,
10335
- id,
10336
9861
  initValue,
10337
9862
  name,
10338
- onAddValueItem,
10339
- onRemoveValueItem,
10340
- ref,
10341
9863
  setData,
10342
9864
  setDisabled,
10343
9865
  setErrorErrorHelperText,
@@ -10346,6 +9868,7 @@ var PFormYearPicker = React.forwardRef(function (_a, ref) {
10346
9868
  validate,
10347
9869
  valueRef,
10348
9870
  ]);
9871
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
10349
9872
  /********************************************************************************************************************
10350
9873
  * Event Handler
10351
9874
  * ******************************************************************************************************************/
@@ -10585,61 +10108,39 @@ var getFinalValue = function (value) {
10585
10108
  /********************************************************************************************************************
10586
10109
  * Commands
10587
10110
  * ******************************************************************************************************************/
10588
- React.useLayoutEffect(function () {
10589
- var commands = {
10590
- getType: function () { return 'PFormYearRangePicker'; },
10591
- getName: function () { return name; },
10592
- getReset: function () { return getFinalValue(initValue); },
10593
- reset: function () { return updateValue(initValue); },
10594
- getValue: function () { return valueRef.current; },
10595
- setValue: updateValue,
10596
- getData: function () { return dataRef.current; },
10597
- setData: setData,
10598
- getFromValue: function () { return valueRef.current[0]; },
10599
- setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
10600
- getToValue: function () { return valueRef.current[1]; },
10601
- setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
10602
- isExceptValue: function () { return !!exceptValue; },
10603
- isDisabled: function () { return !!disabledRef.current; },
10604
- setDisabled: setDisabled,
10605
- isHidden: function () { return !!hiddenRef.current; },
10606
- setHidden: setHidden,
10607
- focus: focus,
10608
- focusValidate: focus,
10609
- validate: function () { return validate(valueRef.current); },
10610
- setError: function (error, errorHelperText) {
10611
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
10612
- },
10613
- getFormValueFromNameSuffix: function () { return formValueFromNameSuffix; },
10614
- getFormValueToNameSuffix: function () { return formValueToNameSuffix; },
10615
- getFormValueFromName: function () {
10616
- return "".concat(name).concat(formValueFromNameSuffix);
10617
- },
10618
- getFormValueToName: function () {
10619
- return "".concat(name).concat(formValueToNameSuffix);
10620
- },
10621
- };
10622
- onAddValueItem(id, commands);
10623
- if (ref) {
10624
- if (typeof ref === 'function') {
10625
- ref(commands);
10626
- }
10627
- else {
10628
- ref.current = commands;
10629
- }
10630
- }
10631
- return function () {
10632
- onRemoveValueItem(id);
10633
- if (ref) {
10634
- if (typeof ref === 'function') {
10635
- ref(null);
10636
- }
10637
- else {
10638
- ref.current = null;
10639
- }
10640
- }
10641
- };
10642
- }, [
10111
+ var commands = React.useMemo(function () { return ({
10112
+ getType: function () { return 'PFormYearRangePicker'; },
10113
+ getName: function () { return name; },
10114
+ getReset: function () { return getFinalValue(initValue); },
10115
+ reset: function () { return updateValue(initValue); },
10116
+ getValue: function () { return valueRef.current; },
10117
+ setValue: updateValue,
10118
+ getData: function () { return dataRef.current; },
10119
+ setData: setData,
10120
+ getFromValue: function () { return valueRef.current[0]; },
10121
+ setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
10122
+ getToValue: function () { return valueRef.current[1]; },
10123
+ setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
10124
+ isExceptValue: function () { return !!exceptValue; },
10125
+ isDisabled: function () { return !!disabledRef.current; },
10126
+ setDisabled: setDisabled,
10127
+ isHidden: function () { return !!hiddenRef.current; },
10128
+ setHidden: setHidden,
10129
+ focus: focus,
10130
+ focusValidate: focus,
10131
+ validate: function () { return validate(valueRef.current); },
10132
+ setError: function (error, errorHelperText) {
10133
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
10134
+ },
10135
+ getFormValueFromNameSuffix: function () { return formValueFromNameSuffix; },
10136
+ getFormValueToNameSuffix: function () { return formValueToNameSuffix; },
10137
+ getFormValueFromName: function () {
10138
+ return "".concat(name).concat(formValueFromNameSuffix);
10139
+ },
10140
+ getFormValueToName: function () {
10141
+ return "".concat(name).concat(formValueToNameSuffix);
10142
+ },
10143
+ }); }, [
10643
10144
  dataRef,
10644
10145
  disabledRef,
10645
10146
  exceptValue,
@@ -10647,12 +10148,8 @@ var getFinalValue = function (value) {
10647
10148
  formValueFromNameSuffix,
10648
10149
  formValueToNameSuffix,
10649
10150
  hiddenRef,
10650
- id,
10651
10151
  initValue,
10652
10152
  name,
10653
- onAddValueItem,
10654
- onRemoveValueItem,
10655
- ref,
10656
10153
  setData,
10657
10154
  setDisabled,
10658
10155
  setErrorErrorHelperText,
@@ -10661,6 +10158,7 @@ var getFinalValue = function (value) {
10661
10158
  validate,
10662
10159
  valueRef,
10663
10160
  ]);
10161
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
10664
10162
  /********************************************************************************************************************
10665
10163
  * Event Handler
10666
10164
  * ******************************************************************************************************************/
@@ -10878,61 +10376,35 @@ PFormYearRangePicker.displayName = 'PFormYearRangePicker';var PFormSwitch = Reac
10878
10376
  /********************************************************************************************************************
10879
10377
  * Commands
10880
10378
  * ******************************************************************************************************************/
10881
- React.useLayoutEffect(function () {
10882
- var commands = {
10883
- getType: function () { return 'PFormSwitch'; },
10884
- getName: function () { return name; },
10885
- getReset: function () { return getFinalValue(initValue); },
10886
- reset: function () { return updateValue(initValue); },
10887
- getValue: function () { return valueRef.current; },
10888
- setValue: updateValue,
10889
- getData: function () { return dataRef.current; },
10890
- setData: setData,
10891
- isExceptValue: function () { return !!exceptValue; },
10892
- isDisabled: function () { return !!disabledRef.current; },
10893
- setDisabled: setDisabled,
10894
- isHidden: function () { return !!hiddenRef.current; },
10895
- setHidden: setHidden,
10896
- focus: focus,
10897
- focusValidate: focus,
10898
- validate: function () { return validate(valueRef.current); },
10899
- setError: function (error, errorHelperText) {
10900
- return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
10901
- },
10902
- };
10903
- onAddValueItem(id, commands);
10904
- if (ref) {
10905
- if (typeof ref === 'function') {
10906
- ref(commands);
10907
- }
10908
- else {
10909
- ref.current = commands;
10910
- }
10911
- }
10912
- return function () {
10913
- onRemoveValueItem(id);
10914
- if (ref) {
10915
- if (typeof ref === 'function') {
10916
- ref(null);
10917
- }
10918
- else {
10919
- ref.current = null;
10920
- }
10921
- }
10922
- };
10923
- }, [
10379
+ var commands = React.useMemo(function () { return ({
10380
+ getType: function () { return 'PFormSwitch'; },
10381
+ getName: function () { return name; },
10382
+ getReset: function () { return getFinalValue(initValue); },
10383
+ reset: function () { return updateValue(initValue); },
10384
+ getValue: function () { return valueRef.current; },
10385
+ setValue: updateValue,
10386
+ getData: function () { return dataRef.current; },
10387
+ setData: setData,
10388
+ isExceptValue: function () { return !!exceptValue; },
10389
+ isDisabled: function () { return !!disabledRef.current; },
10390
+ setDisabled: setDisabled,
10391
+ isHidden: function () { return !!hiddenRef.current; },
10392
+ setHidden: setHidden,
10393
+ focus: focus,
10394
+ focusValidate: focus,
10395
+ validate: function () { return validate(valueRef.current); },
10396
+ setError: function (error, errorHelperText) {
10397
+ return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
10398
+ },
10399
+ }); }, [
10924
10400
  dataRef,
10925
10401
  disabledRef,
10926
10402
  exceptValue,
10927
10403
  focus,
10928
10404
  getFinalValue,
10929
10405
  hiddenRef,
10930
- id,
10931
10406
  initValue,
10932
10407
  name,
10933
- onAddValueItem,
10934
- onRemoveValueItem,
10935
- ref,
10936
10408
  setData,
10937
10409
  setDisabled,
10938
10410
  setErrorErrorHelperText,
@@ -10941,6 +10413,7 @@ PFormYearRangePicker.displayName = 'PFormYearRangePicker';var PFormSwitch = Reac
10941
10413
  validate,
10942
10414
  valueRef,
10943
10415
  ]);
10416
+ reactHook.useForwardLayoutRef(ref, commands, React.useCallback(function (commands) { return onAddValueItem(id, commands); }, [id, onAddValueItem]), React.useCallback(function () { return onRemoveValueItem(id); }, [id, onRemoveValueItem]));
10944
10417
  /********************************************************************************************************************
10945
10418
  * Event Handler
10946
10419
  * ******************************************************************************************************************/