fix: auto_loading & cloned node

modelscope · Nov 21, 2024 · 6a38225 · 6a38225
1 parent b067c6d
commit 6a38225
Show file tree

Hide file tree

Showing 20 changed files with 305 additions and 58 deletions.
diff --git a/.changeset/spotty-seals-poke.md b/.changeset/spotty-seals-poke.md
@@ -0,0 +1,17 @@
+---
+'@modelscope-studio/legacy-waterfall-gallery': patch
+'@modelscope-studio/legacy-multimodal-input': patch
+'@modelscope-studio/legacy-lifecycle': patch
+'@modelscope-studio/legacy-markdown': patch
+'@modelscope-studio/legacy-compiled': patch
+'@modelscope-studio/legacy-chatbot': patch
+'@modelscope-studio/legacy-flow': patch
+'@modelscope-studio/lint-config': patch
+'@modelscope-studio/changelog': patch
+'@modelscope-studio/antd': patch
+'@modelscope-studio/base': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+fix: auto_loading & cloned node
diff --git a/backend/modelscope_studio/components/antd/auto_complete/option/__init__.py b/backend/modelscope_studio/components/antd/auto_complete/option/__init__.py
@@ -13,9 +13,7 @@ class AntdAutoCompleteOption(ModelScopeLayoutComponent):
     EVENTS = []
 
     # supported slots
-    SLOTS = [
-        'label',
-    ]
+    SLOTS = ['label', 'options']
 
     def __init__(
             self,

diff --git a/docs/app.py b/docs/app.py
@@ -166,6 +166,18 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
         "label": get_text("Steps", "Steps 步骤条"),
         "key": "steps"
     }]
+}, {
+    "label":
+    get_text("Data Entry", "数据录入"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("AutoComplete", "AutoComplete 自动完成"),
+        "key": "auto_complete"
+    }, {
+        "label": get_text("Select", "Select 选择器"),
+        "key": "select"
+    }]
 }, {
     "label":
     get_text("Other", "其他"),

diff --git a/docs/components/antd/auto_complete/README-zh_CN.md b/docs/components/antd/auto_complete/README-zh_CN.md
@@ -0,0 +1,8 @@
+# AutoComplete
+
+Autocomplete function of input field. See [Ant Design](https://ant.design/components/auto-complete/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="lookup_patterns" title="Lookup-Patterns"></demo>
diff --git a/docs/components/antd/auto_complete/README.md b/docs/components/antd/auto_complete/README.md
@@ -0,0 +1,8 @@
+# AutoComplete
+
+Autocomplete function of input field. See [Ant Design](https://ant.design/components/auto-complete/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="lookup_patterns" title="Lookup-Patterns"></demo>
diff --git a/docs/components/antd/auto_complete/app.py b/docs/components/antd/auto_complete/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/auto_complete/demos/basic.py b/docs/components/antd/auto_complete/demos/basic.py
@@ -0,0 +1,32 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_search(e: gr.EventData):
+    text = e._data["payload"][0]
+    domains = ["gmail.com", "163.com", "qq.com"]
+    if not text or "@" in text:
+        return gr.update(options=[])
+    return gr.update(options=[{
+        "value": f"{text}@{domain}",
+        "label": f"{text}@{domain}"
+    } for domain in domains])
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            auto_complete = antd.AutoComplete(placeholder="Typing here...",
+                                              elem_style=dict(width=200))
+            antd.Divider("Customize Input   Component")
+            with antd.AutoComplete() as customize_auto_complete:
+                with ms.Slot("children"):
+                    antd.Input.Textarea(placeholder="Typing here...")
+            auto_complete.search(on_search, outputs=[auto_complete])
+            customize_auto_complete.search(on_search,
+                                           outputs=[customize_auto_complete])
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/auto_complete/demos/lookup_patterns.py b/docs/components/antd/auto_complete/demos/lookup_patterns.py
@@ -0,0 +1,57 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def Title(title: str):
+    with antd.Flex(align="center", justify="space-between"):
+        ms.Span(title)
+
+        antd.Button("more",
+                    type="link",
+                    href="https://www.google.com/search?q=antd",
+                    href_target="_blank")
+
+
+def AutoCompleteSubOption(title: str, count: int):
+    with antd.AutoComplete.Option(value=title):
+        with ms.Slot("label"):
+            with antd.Flex(align="center", justify="space-between"):
+                ms.Text(title)
+                with ms.Span():
+                    antd.Icon("UserOutlined")
+                    ms.Text(count)
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.AutoComplete(elem_style=dict(width=250),
+                                   size="large",
+                                   popup_match_select_width=500):
+                with ms.Slot("children"):
+                    antd.Input.Search(size="large",
+                                      placeholder="Typing here...")
+                with ms.Slot("options"):
+                    with antd.AutoComplete.Option():
+                        with ms.Slot("label"):
+                            Title("Libraries")
+                        with ms.Slot("options"):
+                            AutoCompleteSubOption("Ant Design", 10000)
+                            AutoCompleteSubOption('AntDesign UI', 10600)
+                    with antd.AutoComplete.Option():
+                        with ms.Slot("label"):
+                            Title("Solutions")
+                        with ms.Slot("options"):
+                            AutoCompleteSubOption('AntDesign UI FAQ', 60100)
+                            AutoCompleteSubOption('AntDesign FAQ', 30010)
+                    with antd.AutoComplete.Option():
+                        with ms.Slot("label"):
+                            Title("Articles")
+                        with ms.Slot("options"):
+                            AutoCompleteSubOption('AntDesign design language',
+                                                  100000)
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/config_provider/demos/basic.py b/docs/components/antd/config_provider/demos/basic.py
@@ -19,9 +19,9 @@
                             ms.Text("English")
                         with antd.Radio("zh_CN"):
                             ms.Text("中文")
-                        with antd.Radio("jp_JP"):
+                        with antd.Radio("ja_JP"):
                             ms.Text("日本語")
-                        with antd.Radio("kr_KR"):
+                        with antd.Radio("ko_KR"):
                             ms.Text("한국어")
                     with antd.Space(wrap=True):
                         antd.DatePicker()

diff --git a/docs/components/antd/select/README-zh_CN.md b/docs/components/antd/select/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Select
+
+A dropdown menu for displaying choices. See [Ant Design](https://ant.design/components/select/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/docs/components/antd/select/README.md b/docs/components/antd/select/README.md
@@ -0,0 +1,7 @@
+# Select
+
+A dropdown menu for displaying choices. See [Ant Design](https://ant.design/components/select/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/docs/components/antd/select/app.py b/docs/components/antd/select/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/select/demos/basic.py b/docs/components/antd/select/demos/basic.py
@@ -0,0 +1,50 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Space(direction="vertical"):
+                antd.Select(elem_style=dict(width=200),
+                            allow_clear=True,
+                            options=[
+                                {
+                                    "value": 'jack',
+                                    "label": 'Jack'
+                                },
+                                {
+                                    "value": 'lucy',
+                                    "label": 'Lucy'
+                                },
+                                {
+                                    "value": 'Yiminghe',
+                                    "label": 'yiminghe'
+                                },
+                                {
+                                    "value": 'disabled',
+                                    "label": 'Disabled',
+                                    "disabled": True
+                                },
+                            ])
+                # custom label
+                with antd.Select(
+                        elem_style=dict(width=200),
+                        mode="multiple",
+                ):
+                    with antd.Select.Option(value="jack"):
+                        with ms.Slot("label"):
+                            antd.Tag("Jack", color="red")
+                    with antd.Select.Option(value="lucy"):
+                        with ms.Slot("label"):
+                            antd.Tag("Lucy", color="green")
+                    with antd.Select.Option(value="Yiminghe"):
+                        with ms.Slot("label"):
+                            antd.Tag("Yiminghe", color="blue")
+                    with antd.Select.Option(value="disabled", disabled=True):
+                        with ms.Slot("label"):
+                            antd.Tag("Disabled", color="gray")
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/helper/Docs.py b/docs/helper/Docs.py
@@ -89,20 +89,39 @@ def _render_demo(self,
             if title:
                 with ms.Slot("title"):
                     ms.Text(title)
-            with antd.Row(align="stretch", wrap=False):
-                with antd.Col(span=10):
-                    with antd.Flex(elem_style=dict(height='100%')):
-                        prefix = prefix + "\n" if prefix else ""
-                        suffix = "\n" + suffix if suffix else ""
-                        gr.Markdown(f"""{prefix}```python
+            with antd.Row(align="stretch", wrap=True, gutter=8):
+                with antd.Col(sm=dict(span=10, order=1),
+                              xs=dict(span=24, order=2)):
+                    with antd.Row(elem_style=dict(height='100%'),
+                                  gutter=[8, 8]):
+                        with antd.Col(sm=0, xs=24):
+                            antd.Divider(type="horizontal",
+                                         variant="dashed",
+                                         elem_style=dict(width='100%',
+                                                         margin='8px 0 0'))
+                        with antd.Col(sm=23, xs=24):
+                            prefix = prefix + "\n" if prefix else ""
+                            suffix = "\n" + suffix if suffix else ""
+                            gr.Markdown(f"""{prefix}```python
 {content}
 ```{suffix}""",
-                                    header_links=True)
-                        antd.Divider(type="vertical",
-                                     variant="dashed",
-                                     elem_style=dict(height='100%'))
+                                        header_links=True)
+
+                        with antd.Col(sm=1,
+                                      xs=0,
+                                      elem_style=dict(height="100%")):
+                            with ms.Div(
+                                    elem_style=dict(display="flex",
+                                                    justifyContent="center",
+                                                    width="100%",
+                                                    height="100%")):
+                                antd.Divider(type="vertical",
+                                             variant="dashed",
+                                             elem_style=dict(height='100%',
+                                                             margin=0))
                 with antd.Col(
-                        span=14,
+                        sm=dict(span=14, order=2),
+                        xs=dict(span=24, order=1),
                         elem_style=dict(
                             width='100%',
                             transform="translate(0, 0)" if fixed else None)):

diff --git a/frontend/antd/auto-complete/option/Index.svelte b/frontend/antd/auto-complete/option/Index.svelte
@@ -63,24 +63,26 @@
   const setItem = getSetItemFn();
   const { default: items, options } = getItems(['default', 'options']);
 
-  $: setItem($slotKey, $mergedProps._internal.index || 0, {
-    props: {
-      style: $mergedProps.elem_style,
-      className: cls(
-        $mergedProps.elem_classes,
-        'ms-gr-antd-auto-complete-option'
-      ),
-      id: $mergedProps.elem_id,
-      value: $mergedProps.value,
-      label: $mergedProps.label,
-      ...$mergedProps.restProps,
-      ...$mergedProps.props,
-      ...bindEvents($mergedProps),
-    },
-    slots: $slots,
-    options:
-      $options.length > 0 ? $options : $items.length > 0 ? $items : undefined,
-  });
+  $: {
+    setItem($slotKey, $mergedProps._internal.index || 0, {
+      props: {
+        style: $mergedProps.elem_style,
+        className: cls(
+          $mergedProps.elem_classes,
+          'ms-gr-antd-auto-complete-option'
+        ),
+        id: $mergedProps.elem_id,
+        value: $mergedProps.value ?? undefined,
+        label: $mergedProps.label,
+        ...$mergedProps.restProps,
+        ...$mergedProps.props,
+        ...bindEvents($mergedProps),
+      },
+      slots: $slots,
+      options:
+        $options.length > 0 ? $options : $items.length > 0 ? $items : undefined,
+    });
+  }
 </script>
 
 {#if $mergedProps.visible}

diff --git a/frontend/antd/flex/flex.tsx b/frontend/antd/flex/flex.tsx
@@ -1,8 +1,10 @@
 import { sveltify } from '@svelte-preprocess-react';
 import { Flex as AFlex, type GetProps } from 'antd';
 
-export const Flex = sveltify<GetProps<typeof AFlex>>((props) => {
-  return <AFlex {...props} />;
-});
+export const Flex = sveltify<GetProps<typeof AFlex>>(
+  ({ children, ...props }) => {
+    return <AFlex {...props}>{children}</AFlex>;
+  }
+);
 
 export default Flex;
diff --git a/frontend/svelte-preprocess-react/internal/Bridge.ts b/frontend/svelte-preprocess-react/internal/Bridge.ts
@@ -33,12 +33,15 @@ const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
   const autoCompleteContext = useAutoCompleteContext();
   let props: typeof nodeProps = useMemo(() => {
     return {
-      ...autoCompleteContext,
       ...omitUndefinedProps(nodeProps),
       ...(formItemContext || {}),
+      ...autoCompleteContext,
       onChange:
-        formItemContext?.onChange || nodeProps.onChange
+        autoCompleteContext?.onChange ||
+        formItemContext?.onChange ||
+        nodeProps.onChange
           ? (...args: any[]) => {
+              autoCompleteContext?.onChange?.(...args);
               formItemContext?.onChange?.(...args);
               return nodeProps?.onChange?.(...args);
             }

diff --git a/frontend/svelte-preprocess-react/provider.ts b/frontend/svelte-preprocess-react/provider.ts
@@ -55,7 +55,7 @@ export function getSetLoadingStatusFn() {
     | undefined;
 
   return (loadingStatus: LoadingStatus | null) => {
-    if (!ctx) {
+    if (!ctx || !loadingStatus) {
       return;
     }
     const { loadingStatusMap, options } = ctx;