feffery_utils_components 0.2.0-rc20 → 0.2.0-rc22

package/usage.py

@@ -1,4 +1,5 @@
 import dash
+import json
 from dash import html
 import feffery_utils_components as fuc
 from dash.dependencies import Input, Output
@@ -8,26 +9,74 @@ app = dash.Dash(__name__)
 app.layout = html.Div(
     [
         html.Div(
-            id='target-element',
+            [
+                html.Div(
+                    id='drag-block-demo',
+                    style={
+                        'width': 100,
+                        'height': 100,
+                        'border': '1px solid black',
+                        'cursor': 'move',
+                    },
+                )
+            ],
+            style={'padding': 24},
+        ),
+        html.Div(
+            id='drop-container-demo',
             style={
-                'width': '20vw',
-                'height': '20vh',
-                'border': '1px solid black',
+                'height': 500,
+                'border': '1px solid red',
             },
         ),
-        fuc.FefferyListenElementSize(
-            id='listen-element-size-demo',
-            target='target-element',
+        fuc.FefferyListenDrag(
+            targetSelector='#drag-block-demo', data='测试'
+        ),
+        fuc.FefferyListenDrop(
+            id='listen-drop-demo',
+            targetSelector='#drop-container-demo',
+        ),
+        # hoverEvent测试指示器
+        html.Span(
+            '🤩',
+            id='hover-event-indicator',
+            style={
+                'display': 'none',
+                'transition': 'all 0.2s',
+            },
         ),
     ],
-    style={'padding': 50, 'height': 99999, 'width': 99999},
+    style={'padding': 50},
 )
 
+
+@app.callback(
+    Output('drop-container-demo', 'children'),
+    Input('listen-drop-demo', 'dropEvent'),
+    prevent_initial_call=True,
+)
+def listen_drop_event(dropEvent):
+    return json.dumps(
+        dropEvent, indent=4, ensure_ascii=False
+    )
+
+
 app.clientside_callback(
-    """(width, height) => `width: ${width}px; height: ${height}px`""",
-    Output('target-element', 'children'),
-    Input('listen-element-size-demo', 'width'),
-    Input('listen-element-size-demo', 'height'),
+    """(hoverEvent, isHovering) => {
+        if (isHovering && hoverEvent) {
+            return {
+                position: 'fixed',
+                left: hoverEvent.clientX - 50,
+                top: hoverEvent.clientY - 50,
+                transition: 'all 0.2s'
+            };
+        }
+        return { display: 'none' };
+    }""",
+    Output('hover-event-indicator', 'style'),
+    Input('listen-drop-demo', 'hoverEvent'),
+    Input('listen-drop-demo', 'isHovering'),
+    prevent_initial_call=True,
 )
 
 if __name__ == '__main__':

package/.vscode/settings.json

@@ -1,11 +0,0 @@
-{
-    "files.exclude": {
-        "**/.git": true,
-        "**/.svn": true,
-        "**/.hg": true,
-        "**/CVS": true,
-        "**/.DS_Store": true,
-        "**/Thumbs.db": true
-    },
-    "hide-files.files": []
-}