@dev-fastn-ai/react-core 2.4.3 → 2.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -61
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -603,15 +603,7 @@ For fields of type `select` or `multi-select`, use the `useFieldOptions` hook to
|
|
|
603
603
|
```tsx
|
|
604
604
|
import { useFieldOptions } from "@fastn-ai/react-core";
|
|
605
605
|
|
|
606
|
-
|
|
607
|
-
field: any;
|
|
608
|
-
value: any;
|
|
609
|
-
onChange: (value: any) => void;
|
|
610
|
-
isMulti?: boolean;
|
|
611
|
-
context?: any;
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
function SelectField({ field, value, onChange, isMulti = false, context }: SelectFieldProps) {
|
|
606
|
+
function SelectField({ field, value, onChange, isMulti = false }) {
|
|
615
607
|
const {
|
|
616
608
|
options,
|
|
617
609
|
loading,
|
|
@@ -621,9 +613,9 @@ function SelectField({ field, value, onChange, isMulti = false, context }: Selec
|
|
|
621
613
|
error,
|
|
622
614
|
search,
|
|
623
615
|
totalLoadedOptions,
|
|
624
|
-
} = useFieldOptions(field,
|
|
616
|
+
} = useFieldOptions(field,context);
|
|
625
617
|
|
|
626
|
-
function handleInputChange(e
|
|
618
|
+
function handleInputChange(e) {
|
|
627
619
|
search(e.target.value);
|
|
628
620
|
}
|
|
629
621
|
|
|
@@ -631,7 +623,7 @@ function SelectField({ field, value, onChange, isMulti = false, context }: Selec
|
|
|
631
623
|
if (hasNext && !loadingMore) loadMore();
|
|
632
624
|
}
|
|
633
625
|
|
|
634
|
-
function handleSelectChange(selectedOptions
|
|
626
|
+
function handleSelectChange(selectedOptions) {
|
|
635
627
|
if (isMulti) {
|
|
636
628
|
// For multi-select, value should be an array of { label, value } objects
|
|
637
629
|
const selectedValues = selectedOptions.map(option => ({
|
|
@@ -672,12 +664,12 @@ function SelectField({ field, value, onChange, isMulti = false, context }: Selec
|
|
|
672
664
|
|
|
673
665
|
<select
|
|
674
666
|
multiple={isMulti}
|
|
675
|
-
value={isMulti ? (value || []).map(
|
|
676
|
-
onChange={(e
|
|
667
|
+
value={isMulti ? (value || []).map(v => v.value) : (value?.value || '')}
|
|
668
|
+
onChange={(e) => {
|
|
677
669
|
if (isMulti) {
|
|
678
670
|
const selectedOptions = Array.from(e.target.selectedOptions).map(option => {
|
|
679
671
|
const opt = options.find(o => o.value === option.value);
|
|
680
|
-
return { label: opt
|
|
672
|
+
return { label: opt.label, value: opt.value };
|
|
681
673
|
});
|
|
682
674
|
handleSelectChange(selectedOptions);
|
|
683
675
|
} else {
|
|
@@ -721,52 +713,6 @@ function SelectField({ field, value, onChange, isMulti = false, context }: Selec
|
|
|
721
713
|
}
|
|
722
714
|
```
|
|
723
715
|
|
|
724
|
-
#### **Using Context with Select Fields**
|
|
725
|
-
|
|
726
|
-
The `useFieldOptions` hook now supports passing context data to the `getOptions` and `loadMore` methods. This is useful when you need to pass additional form data or parameters to filter or customize the options:
|
|
727
|
-
|
|
728
|
-
```tsx
|
|
729
|
-
function SelectFieldWithContext({ field, value, onChange, formData }) {
|
|
730
|
-
// Pass form data as context to the hook
|
|
731
|
-
const context = formData; // This will be passed to getOptions and loadMore
|
|
732
|
-
|
|
733
|
-
const {
|
|
734
|
-
options,
|
|
735
|
-
loading,
|
|
736
|
-
loadingMore,
|
|
737
|
-
hasNext,
|
|
738
|
-
loadMore,
|
|
739
|
-
error,
|
|
740
|
-
search,
|
|
741
|
-
totalLoadedOptions,
|
|
742
|
-
} = useFieldOptions(field, context);
|
|
743
|
-
|
|
744
|
-
// ... rest of the component logic remains the same
|
|
745
|
-
}
|
|
746
|
-
```
|
|
747
|
-
|
|
748
|
-
**When to use context:**
|
|
749
|
-
- When options depend on other form field values
|
|
750
|
-
- When you need to pass authentication tokens or user-specific data
|
|
751
|
-
- When implementing cascading dropdowns (e.g., country → state → city)
|
|
752
|
-
- When options need to be filtered based on current form state
|
|
753
|
-
|
|
754
|
-
**Example with cascading dropdowns:**
|
|
755
|
-
```tsx
|
|
756
|
-
function CascadingSelectField({ field, value, onChange, parentValue }) {
|
|
757
|
-
// Create context with parent field value
|
|
758
|
-
const context = {
|
|
759
|
-
parentField: parentValue,
|
|
760
|
-
// Add other relevant form data
|
|
761
|
-
};
|
|
762
|
-
|
|
763
|
-
const { options, loading, error, search } = useFieldOptions(field, context);
|
|
764
|
-
|
|
765
|
-
// The getOptions method in your field.optionsSource will receive this context
|
|
766
|
-
// and can use it to filter options based on the parent selection
|
|
767
|
-
}
|
|
768
|
-
```
|
|
769
|
-
|
|
770
716
|
### **Google Drive Picker Fields**
|
|
771
717
|
|
|
772
718
|
For Google Drive file picker fields, handle the file selection flow. These fields also work with `{ label, value }` objects:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dev-fastn-ai/react-core",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.4",
|
|
4
4
|
"description": "React hooks and components for integrating Fastn AI connector marketplace into your applications. Built on top of @fastn-ai/core with React Query for optimal performance.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|