feffery_utils_components 0.2.0-rc24 → 0.2.0-rc25

package/feffery_utils_components/feffery_utils_components.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"feffery_utils_components.min.js","sourceRoot":""}

package/feffery_utils_components/metadata.json

@@ -1953,6 +1953,24 @@
         "required": false,
         "description": "\u7528\u4e8e\u7f16\u6392\u5177\u6709\u522b\u540d\u7684\u6837\u5f0f\u7ec4"
       },
+      "animated": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u5f53\u524d\u7ec4\u4ef6\u7684`animate`\u76ee\u6807\u52a8\u753b\u8fc7\u7a0b\u662f\u5426\u5df2\u5b8c\u6210"
+      },
+      "destroyWhenAnimated": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u662f\u5426\u5728\u52a8\u753b\u5b8c\u6210\u540e\u9500\u6bc1\u5f53\u524d\u7ec4\u4ef6\r\n\u9ed8\u8ba4\u503c\uff1a`false`",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
       "loading_state": {
         "type": {
           "name": "shape",
@@ -4829,6 +4847,66 @@
         "required": false,
         "description": "css\u7c7b\u540d"
       },
+      "enableEvents": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "enum",
+            "value": [
+              {
+                "value": "'click'",
+                "computed": false
+              },
+              {
+                "value": "'dbclick'",
+                "computed": false
+              },
+              {
+                "value": "'size'",
+                "computed": false
+              },
+              {
+                "value": "'mouseenter'",
+                "computed": false
+              },
+              {
+                "value": "'mouseleave'",
+                "computed": false
+              },
+              {
+                "value": "'contextmenu'",
+                "computed": false
+              },
+              {
+                "value": "'hover'",
+                "computed": false
+              },
+              {
+                "value": "'touch'",
+                "computed": false
+              },
+              {
+                "value": "'clickaway'",
+                "computed": false
+              },
+              {
+                "value": "'position'",
+                "computed": false
+              },
+              {
+                "value": "'focus'",
+                "computed": false
+              }
+            ]
+          }
+        },
+        "required": false,
+        "description": "\u63a7\u5236\u8981\u5f00\u542f\u7684\u4e8b\u4ef6\u76d1\u542c\u7c7b\u578b\u6570\u7ec4\uff0c\u53ef\u9009\u9879\u6709`'click'`\uff08\u5355\u51fb\u4e8b\u4ef6\uff09\u3001`'dbclick'`\uff08\u53cc\u51fb\u4e8b\u4ef6\uff09\u3001`'size'`\uff08\u5c3a\u5bf8\u53d8\u5316\u4e8b\u4ef6\uff09\u3001\r\n`'mouseenter'`\uff08\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\uff09\uff0c`'mouseleave'`\uff08\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\uff09\u3001`'contextmenu'`\uff08\u9f20\u6807\u53f3\u952e\u70b9\u51fb\u4e8b\u4ef6\uff09\u3001\r\n`'hover'`\uff08\u9f20\u6807\u60ac\u505c\u4e8b\u4ef6\uff09\u3001`'touch'`\uff08\u79fb\u52a8\u7aef\u89e6\u78b0\u4e8b\u4ef6\uff09\u3001`'clickaway'`\uff08\u5143\u7d20\u5916\u70b9\u51fb\u4e8b\u4ef6\uff09\u3001`'position'`\uff08\u5de6\u4e0a\u89d2\u5750\u6807\u4f4d\u7f6e\u53d8\u5316\u4e8b\u4ef6\uff09\u3001\r\n`'focus'`\uff08\u805a\u7126\u72b6\u6001\u5207\u6362\u4e8b\u4ef6\uff09\r\n\u9ed8\u8ba4\u503c\uff1a`['click', 'dbclick']`",
+        "defaultValue": {
+          "value": "['click', 'dbclick']",
+          "computed": false
+        }
+      },
       "_width": {
         "type": {
           "name": "number"
@@ -5048,6 +5126,13 @@
         "required": false,
         "description": "\u76d1\u542c\u5f53\u524d\u5143\u7d20\u662f\u5426\u88ab\u9f20\u6807\u60ac\u6d6e"
       },
+      "isTouching": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u9488\u5bf9\u79fb\u52a8\u7aef\u573a\u666f\uff0c\u76d1\u542c\u5f53\u524d\u5143\u7d20\u662f\u5426\u89e6\u78b0\u4e2d"
+      },
       "enableClickAway": {
         "type": {
           "name": "bool"

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc24",
+  "version": "0.2.0-rc25",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc24",
+  "version": "0.2.0-rc25",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

package/src/lib/components/animations/FefferyMotion.react.js

@@ -183,6 +183,17 @@ FefferyMotion.propTypes = {
      */
     variants: PropTypes.objectOf(PropTypes.object),
 
+    /**
+     * 监听当前组件的`animate`目标动画过程是否已完成
+     */
+    animated: PropTypes.bool,
+
+    /**
+     * 是否在动画完成后销毁当前组件
+     * 默认值：`false`
+     */
+    destroyWhenAnimated: PropTypes.bool,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -207,6 +218,7 @@ FefferyMotion.propTypes = {
 
 // 设置默认参数
 FefferyMotion.defaultProps = {
+    destroyWhenAnimated: false
 }
 
 export default FefferyMotion;

package/src/lib/components/container/FefferyDiv.react.js

@@ -1,9 +1,12 @@
+// react核心
 import React, { useEffect, useRef } from 'react';
-import useCss from '../../hooks/useCss'
-import { isString, isNull } from 'lodash';
 import PropTypes from 'prop-types';
+// 辅助库
+import { isString, isNull, isEqual } from 'lodash';
 import { useElementBounding, useFocus } from '@reactuses/core';
 import { useSize, useRequest, useHover, useClickAway } from 'ahooks';
+// 自定义hooks
+import useCss from '../../hooks/useCss'
 
 // 定义兼容虚拟className的阴影效果、滚动条样式字典
 const shadowVirtualClassName = new Map(
@@ -78,13 +81,13 @@ const scrollbarVirtualClassName = new Map(
  * 进阶div容器组件FefferyDiv
  */
 const FefferyDiv = (props) => {
-    // 取得必要属性或参数
     let {
         id,
         key,
         children,
         style,
         className,
+        enableEvents,
         mouseEnterCount,
         mouseLeaveCount,
         nClicks,
@@ -110,10 +113,10 @@ const FefferyDiv = (props) => {
     } = props;
 
     const ref = useRef(null);
-    const size = useSize(ref);
-    const _bounding = useElementBounding(ref);
-    const _isHovering = useHover(ref);
-    const [_focus, setFocus] = useFocus(ref)
+    const size = useSize(enableEvents?.includes('size') ? ref : null);
+    const _bounding = useElementBounding(enableEvents?.includes('position') ? ref : null);
+    const _isHovering = useHover(enableEvents?.includes('hover') ? ref : null);
+    const [_focus, setFocus] = useFocus(enableEvents?.includes('focus') ? ref : null);
 
     useEffect(() => {
         setProps({
@@ -187,7 +190,7 @@ const FefferyDiv = (props) => {
     }, [_isHovering])
 
     // 监听元素外点击事件
-    if (enableClickAway) {
+    if (enableClickAway || enableEvents?.includes('clickaway')) {
         useClickAway(() => {
             setProps({ clickAwayCount: clickAwayCount + 1 })
         }, ref);
@@ -281,53 +284,81 @@ const FefferyDiv = (props) => {
                 (className ? useCss(className) : undefined)
         }
         ref={ref}
-        onClick={(e) => {
-            setProps({
-                nClicks: nClicks + 1,
-                clickEvent: {
-                    pageX: e.pageX,
-                    pageY: e.pageY,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    screenX: e.screenX,
-                    screenY: e.screenY,
-                    timestamp: Date.now()
-                }
-            })
-        }}
-        onDoubleClick={(e) => {
-            setProps({
-                nDoubleClicks: nDoubleClicks + 1,
-                doubleClickEvent: {
-                    pageX: e.pageX,
-                    pageY: e.pageY,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    screenX: e.screenX,
-                    screenY: e.screenY,
-                    timestamp: Date.now()
-                }
-            })
-        }}
-        onContextMenu={(e) => {
-            if (enableListenContextMenu) {
-                e.preventDefault()
-                setProps({
-                    contextMenuEvent: {
-                        pageX: e.pageX,
-                        pageY: e.pageY,
-                        clientX: e.clientX,
-                        clientY: e.clientY,
-                        screenX: e.screenX,
-                        screenY: e.screenY,
-                        timestamp: Date.now()
-                    }
-                })
-            }
-        }}
-        onMouseEnter={() => setProps({ mouseEnterCount: mouseEnterCount + 1 })}
-        onMouseLeave={() => setProps({ mouseLeaveCount: mouseLeaveCount + 1 })}
-        tabIndex={enableFocus ? 0 : undefined}
+        onClick={
+            enableEvents?.includes('click') ?
+                (e) => {
+                    setProps({
+                        nClicks: nClicks + 1,
+                        clickEvent: {
+                            pageX: e.pageX,
+                            pageY: e.pageY,
+                            clientX: e.clientX,
+                            clientY: e.clientY,
+                            screenX: e.screenX,
+                            screenY: e.screenY,
+                            timestamp: Date.now()
+                        }
+                    })
+                } :
+                undefined
+        }
+        onDoubleClick={
+            enableEvents?.includes('dbclick') ?
+                (e) => {
+                    setProps({
+                        nDoubleClicks: nDoubleClicks + 1,
+                        doubleClickEvent: {
+                            pageX: e.pageX,
+                            pageY: e.pageY,
+                            clientX: e.clientX,
+                            clientY: e.clientY,
+                            screenX: e.screenX,
+                            screenY: e.screenY,
+                            timestamp: Date.now()
+                        }
+                    })
+                } :
+                undefined
+        }
+        onContextMenu={
+            enableListenContextMenu || enableEvents?.includes('contextmenu') ?
+                (e) => {
+                    e.preventDefault()
+                    setProps({
+                        contextMenuEvent: {
+                            pageX: e.pageX,
+                            pageY: e.pageY,
+                            clientX: e.clientX,
+                            clientY: e.clientY,
+                            screenX: e.screenX,
+                            screenY: e.screenY,
+                            timestamp: Date.now()
+                        }
+                    })
+                } :
+                undefined
+        }
+        onMouseEnter={
+            enableEvents?.includes('mouseenter') ?
+                () => setProps({ mouseEnterCount: mouseEnterCount + 1 }) :
+                undefined
+        }
+        onMouseLeave={
+            enableEvents?.includes('mouseleave') ?
+                () => setProps({ mouseLeaveCount: mouseLeaveCount + 1 }) :
+                undefined
+        }
+        onTouchStart={
+            enableEvents?.includes('touch') ?
+                () => setProps({ isTouching: true }) :
+                undefined
+        }
+        onTouchEnd={
+            enableEvents?.includes('touch') ?
+                () => setProps({ isTouching: false }) :
+                undefined
+        }
+        tabIndex={enableFocus || enableEvents?.includes('focus') ? 0 : undefined}
         data-dash-is-loading={
             (loading_state && loading_state.is_loading) || undefined
         } >
@@ -365,6 +396,29 @@ FefferyDiv.propTypes = {
         PropTypes.object
     ]),
 
+    /**
+     * 控制要开启的事件监听类型数组，可选项有`'click'`（单击事件）、`'dbclick'`（双击事件）、`'size'`（尺寸变化事件）、
+     * `'mouseenter'`（鼠标移入事件），`'mouseleave'`（鼠标移出事件）、`'contextmenu'`（鼠标右键点击事件）、
+     * `'hover'`（鼠标悬停事件）、`'touch'`（移动端触碰事件）、`'clickaway'`（元素外点击事件）、`'position'`（左上角坐标位置变化事件）、
+     * `'focus'`（聚焦状态切换事件）
+     * 默认值：`['click', 'dbclick']`
+     */
+    enableEvents: PropTypes.arrayOf(
+        PropTypes.oneOf([
+            'click',
+            'dbclick',
+            'size',
+            'mouseenter',
+            'mouseleave',
+            'contextmenu',
+            'hover',
+            'touch',
+            'clickaway',
+            'position',
+            'focus'
+        ])
+    ),
+
     /**
      * 监听容器像素宽度变化
      */
@@ -513,6 +567,11 @@ FefferyDiv.propTypes = {
      */
     isHovering: PropTypes.bool,
 
+    /**
+     * 针对移动端场景，监听当前元素是否触碰中
+     */
+    isTouching: PropTypes.bool,
+
     /**
      * 设置是否启用元素外点击事件监听，当页面中有大量FefferyDiv元素时，建议不要开启此特性，会导致明显的性能问题
      * 默认为false
@@ -643,6 +702,7 @@ FefferyDiv.propTypes = {
 
 // 设置默认参数
 FefferyDiv.defaultProps = {
+    enableEvents: ['click', 'dbclick'],
     mouseEnterCount: 0,
     mouseLeaveCount: 0,
     nClicks: 0,

package/src/lib/fragments/animations/FefferyMotion.react.js

@@ -29,6 +29,8 @@ const FefferyMotion = (props) => {
         whileInView,
         viewport,
         variants,
+        animated,
+        destroyWhenAnimated,
         setProps,
         loading_state
     } = props;
@@ -39,29 +41,34 @@ const FefferyMotion = (props) => {
     }
 
     return (
-        <motion.div
-            id={id}
-            className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
-            }
-            style={style}
-            key={key}
-            initial={initial}
-            animate={animate}
-            exit={exit}
-            whileHover={whileHover}
-            whileTap={whileTap}
-            transition={transition}
-            whileInView={whileInView}
-            viewport={viewport}
-            variants={variants}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            } >
-            {children}
-        </motion.div>
+        destroyWhenAnimated && animated ?
+            null :
+            (
+                <motion.div
+                    id={id}
+                    className={
+                        isString(className) ?
+                            className :
+                            (className ? useCss(className) : undefined)
+                    }
+                    style={style}
+                    key={key}
+                    initial={initial}
+                    animate={animate}
+                    exit={exit}
+                    whileHover={whileHover}
+                    whileTap={whileTap}
+                    transition={transition}
+                    whileInView={whileInView}
+                    viewport={viewport}
+                    variants={variants}
+                    onAnimationComplete={() => setProps({ animated: true })}
+                    data-dash-is-loading={
+                        (loading_state && loading_state.is_loading) || undefined
+                    } >
+                    {children}
+                </motion.div>
+            )
     );
 }
 

package/tests/MotionTest/app.py

@@ -0,0 +1,50 @@
+import sys
+
+sys.path.append('../..')
+
+import dash
+from dash import html
+import feffery_utils_components as fuc
+from dash.dependencies import Input, Output
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferyMotion(
+            '示例',
+            id='motion-demo',
+            style={
+                'border': '1px dashed #71afe5',
+                'width': '100px',
+                'height': '100px',
+                'display': 'flex',
+                'justifyContent': 'center',
+                'alignItems': 'center',
+            },
+            animate={
+                'transform': 'translateX(300px) rotate(180deg)',
+                'borderRadius': '100%',
+            },
+            transition={
+                'duration': 2,
+                'repeat': 10,
+            },
+        ),
+        html.Pre(id='animated'),
+    ],
+    style={'padding': 50},
+)
+
+
+@app.callback(
+    Output('animated', 'children'),
+    Input('motion-demo', 'animated'),
+    prevent_initial_call=True,
+)
+def demo(animated):
+    return f'animated: {animated}'
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/usage.py

@@ -1,46 +1,46 @@
-import json
 import dash
-import time
 from dash import html
-from flask import Response, abort
 import feffery_utils_components as fuc
 from dash.dependencies import Input, Output
 
 app = dash.Dash(__name__)
 
-
-@app.server.route('/stream')
-def stream():
-    def _stream():
-        for i in range(999):
-            time.sleep(0.5)
-            yield 'data: {}\n\n'.format(time.time())
-
-    time.sleep(3)
-    abort(404)
-    return Response(_stream(), mimetype='text/event-stream')
-
-
 app.layout = html.Div(
     [
-        fuc.FefferyEventSource(
-            id='sse-demo',
-            url='/stream',
+        fuc.FefferyMotion(
+            '示例',
+            id='motion-demo',
+            style={
+                'border': '1px dashed #71afe5',
+                'width': '100px',
+                'height': '100px',
+                'display': 'flex',
+                'justifyContent': 'center',
+                'alignItems': 'center',
+            },
+            animate={
+                'transform': 'translateX(300px) rotate(180deg)',
+                'borderRadius': '100%',
+            },
+            transition={
+                'duration': 2,
+            },
+            destroyWhenAnimated=True,
         ),
-        html.Pre(id='output'),
+        html.Pre(id='animated'),
     ],
     style={'padding': 50},
 )
 
 
 @app.callback(
-    Output('output', 'children'),
-    Input('sse-demo', 'errorEvent'),
+    Output('animated', 'children'),
+    Input('motion-demo', 'animated'),
     prevent_initial_call=True,
 )
-def show_error(errorEvent):
-    return json.dumps(errorEvent)
+def demo(animated):
+    return f'animated: {animated}'
 
 
 if __name__ == '__main__':
-    app.run(debug=True)
+    app.run(debug=False)

package/webpack.config.js

@@ -1,10 +1,9 @@
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
 const packagejson = require('./package.json');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const vditorPkg = require('vditor/package.json');
 
 const dashLibraryName = packagejson.name.replace(/-/g, '_');
@@ -57,7 +56,8 @@ module.exports = (env, argv) => {
             library: dashLibraryName,
             libraryTarget: 'window',
         },
-        devtool,
+        // devtool: false, // 开发阶段使用，生成全量source-map
+        devtool, // 发布阶段使用，生成最小化source-map
         externals,
         module: {
             rules: [
@@ -148,14 +148,6 @@ module.exports = (env, argv) => {
                         warnings: false,
                         ie8: false
                     }
-                }),
-                new UglifyJsPlugin({
-                    uglifyOptions: {
-                        output: {
-                            comments: false, // 移除注释
-                        },
-                        warnings: false // 移除警告
-                    }
                 })
             ],
             splitChunks: {