update docs and examples after improvements

BearStudio · Sep 19, 2024 · b6b78d2 · b6b78d2
1 parent c77437f
commit b6b78d2
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 13 deletions.
diff --git a/apps/docs/src/pages/core/useField.mdx b/apps/docs/src/pages/core/useField.mdx
@@ -72,7 +72,7 @@ const MyField = (props) => {
   }, [externalProcessing]);
 
   /* ... */
-}
+};
 ```
 
 ## Hook values
@@ -81,7 +81,7 @@ const MyField = (props) => {
 
 Get the current value of the field, before it has been modified by `formatValue`.
 
-Will be `undefined` while field is not register to a ready form.
+Will be `undefined` while the form isn't ready, so the field neither.
 
 ```tsx
 const MyField = (props) => {
@@ -93,7 +93,9 @@ const MyField = (props) => {
 
 ### formattedValue
 
-Get the current value of the field, after it has been formated by `formatValue` (if you used it).
+Get the current value of the field, after it has been formated by `formatValue` (if you used it, will be equal to value instead).
+
+Will be `undefined` while the form isn't ready, so the field neither.
 
 ```tsx
 const MyField = (props) => {
@@ -161,6 +163,16 @@ Return `true` if the field is running async validations.
 const { isValidating } = useField(props);
 ```
 
+### isDebouncing
+
+<Type type="boolean" />
+
+Return `true` if the field is debouncing async validations.
+
+```jsx
+const { isDebouncing } = useField(props);
+```
+
 ### isPristine
 
 <Type type="boolean" />

diff --git a/apps/examples/src/pages/collection.tsx b/apps/examples/src/pages/collection.tsx
@@ -252,6 +252,17 @@ const Collection = () => {
           </HStack>
         </Stack>
 
+        <Stack mt={10}>
+          <Stack spacing={0}>
+            <Text fontWeight="medium">Nested collections</Text>
+            <Text fontSize="xs" color="gray.500">
+              This show that an unmount collection is unregister, then the
+              collection keys are reset on remount
+            </Text>
+          </Stack>
+          <NestedCollections />
+        </Stack>
+
         <Flex mt="4">
           <Button
             type="submit"
@@ -285,7 +296,74 @@ const ConditionedCollection = () => {
           />
         </HStack>
       ))}
-      <Button onClick={() => conditionedCollection.append()}>Add item</Button>
+      <AddPlaceholder
+        onClick={() => conditionedCollection.append()}
+        label="Add item"
+        my={2}
+      />
+    </Stack>
+  );
+};
+
+const NestedCollections = () => {
+  const parentCollection = useCollection("parent");
+
+  return (
+    <Stack flex={1}>
+      {parentCollection.keys.map((key, index) => (
+        <HStack key={key} alignItems="start" p={4}>
+          <Stack flex={1}>
+            <FieldInput
+              name={`parent[${index}].name`}
+              label={`Parent ${index}`}
+            />
+            <Stack pl={20}>
+              <Text fontWeight="bold" fontSize="sm">
+                Children
+              </Text>
+              <NestedCollectionsChild name={`parent[${index}].children`} />
+            </Stack>
+          </Stack>
+          <IconButton
+            aria-label="Delete"
+            icon={<Icon as={FiTrash2} />}
+            onClick={() => parentCollection.remove(index)}
+          />
+        </HStack>
+      ))}
+      <AddPlaceholder
+        onClick={() => parentCollection.append()}
+        label="Add parent"
+        my={2}
+      />
+    </Stack>
+  );
+};
+
+const NestedCollectionsChild = (props: { name: string }) => {
+  const childCollection = useCollection(props.name);
+
+  return (
+    <Stack flex={1}>
+      {childCollection.keys.map((key, index) => (
+        <HStack key={key} alignItems="end">
+          <FieldInput
+            name={`${props.name}[${index}]`}
+            label={`Child ${index}`}
+          />
+          <IconButton
+            aria-label="Delete"
+            icon={<Icon as={FiTrash2} />}
+            onClick={() => childCollection.remove(index)}
+            variant="outline"
+          />
+        </HStack>
+      ))}
+      <AddPlaceholder
+        onClick={() => childCollection.append()}
+        label="Add child"
+        my={0}
+      />
     </Stack>
   );
 };

diff --git a/apps/examples/src/pages/exotic-fields.tsx b/apps/examples/src/pages/exotic-fields.tsx
@@ -34,15 +34,15 @@ const ExoticFields: NextPage = () => {
             label="Same images field"
             helper="Select two identical images"
             options={[
-              "https://source.unsplash.com/WLUHO9A_xik/200x200",
-              "https://source.unsplash.com/mEZ3PoFGs_k/200x200",
-              "https://source.unsplash.com/2Mr4lBxHpcg/200x200",
-              "https://source.unsplash.com/AjvgNTbyuG8/200x200",
-              "https://source.unsplash.com/hyGX23RpLTU/200x200",
-              "https://source.unsplash.com/4nulm-JUYFo/200x200",
-              "https://source.unsplash.com/MQ4eKnHtOUg/200x200",
-              "https://source.unsplash.com/pzMP-RGJ7mY/200x200",
-              "https://source.unsplash.com/httxBNGKapo/200x200",
+              "https://picsum.photos/seed/usefield/200",
+              "https://picsum.photos/seed/useform/200",
+              "https://picsum.photos/seed/useformfields/200",
+              "https://picsum.photos/seed/formiz/200",
+              "https://picsum.photos/seed/usecollection/200",
+              "https://picsum.photos/seed/ant/200",
+              "https://picsum.photos/seed/field/200",
+              "https://picsum.photos/seed/useformcontext/200",
+              "https://picsum.photos/seed/formiziscool/200",
             ]}
           />