feffery_utils_components 0.0.32 → 0.1.0

package/feffery_utils_components/metadata.json

@@ -210,6 +210,69 @@
       }
     }
   },
+  "src/lib/components/colorPickers/FefferyEyeDropper.react.js": {
+    "description": "",
+    "displayName": "FefferyEyeDropper",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "enable": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "color": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "loading_state": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "is_loading": {
+              "name": "bool",
+              "description": "Determines if the component is loading or not",
+              "required": false
+            },
+            "prop_name": {
+              "name": "string",
+              "description": "Holds which property is loading",
+              "required": false
+            },
+            "component_name": {
+              "name": "string",
+              "description": "Holds the name of the component that is loading",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": ""
+      },
+      "setProps": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Dash-assigned callback that should be called to report property changes\r\nto Dash, to make them available for callbacks."
+      }
+    }
+  },
   "src/lib/components/colorPickers/FefferyGithubColorPicker.react.js": {
     "description": "",
     "displayName": "FefferyGithubColorPicker",
@@ -1113,6 +1176,17 @@
           "computed": false
         }
       },
+      "enableClickAway": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
       "setProps": {
         "type": {
           "name": "func"
@@ -1612,69 +1686,6 @@
       }
     }
   },
-  "src/lib/components/FefferyEyeDropper.react.js": {
-    "description": "",
-    "displayName": "FefferyEyeDropper",
-    "methods": [],
-    "props": {
-      "id": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": ""
-      },
-      "enable": {
-        "type": {
-          "name": "bool"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "false",
-          "computed": false
-        }
-      },
-      "color": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": ""
-      },
-      "loading_state": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "is_loading": {
-              "name": "bool",
-              "description": "Determines if the component is loading or not",
-              "required": false
-            },
-            "prop_name": {
-              "name": "string",
-              "description": "Holds which property is loading",
-              "required": false
-            },
-            "component_name": {
-              "name": "string",
-              "description": "Holds the name of the component that is loading",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": ""
-      },
-      "setProps": {
-        "type": {
-          "name": "func"
-        },
-        "required": false,
-        "description": "Dash-assigned callback that should be called to report property changes\r\nto Dash, to make them available for callbacks."
-      }
-    }
-  },
   "src/lib/components/FefferyFancyMessage.js": {
     "description": "",
     "displayName": "FefferyFancyMessage",
@@ -2788,96 +2799,6 @@
       }
     }
   },
-  "src/lib/components/FefferyLocation.react.js": {
-    "description": "",
-    "displayName": "FefferyLocation",
-    "methods": [
-      {
-        "name": "updateLocation",
-        "docblock": null,
-        "modifiers": [],
-        "params": [
-          {
-            "name": "props",
-            "type": null
-          }
-        ],
-        "returns": null
-      },
-      {
-        "name": "onLocationChange",
-        "docblock": null,
-        "modifiers": [],
-        "params": [],
-        "returns": null
-      }
-    ],
-    "props": {
-      "id": {
-        "type": {
-          "name": "string"
-        },
-        "required": true,
-        "description": "The ID of this component, used to identify dash components\r\nin callbacks. The ID needs to be unique across all of the\r\ncomponents in an app."
-      },
-      "pathname": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "pathname in window.location - e.g., \"/my/full/pathname\""
-      },
-      "search": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "search in window.location - e.g., \"?myargument=1\""
-      },
-      "hash": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "hash in window.location - e.g., \"#myhash\""
-      },
-      "href": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "href in window.location - e.g., \"/my/full/pathname?myargument=1#myhash\""
-      },
-      "refresh": {
-        "type": {
-          "name": "bool"
-        },
-        "required": false,
-        "description": "Refresh the page when the location is updated?",
-        "defaultValue": {
-          "value": "true",
-          "computed": false
-        }
-      },
-      "includePathnames": {
-        "type": {
-          "name": "arrayOf",
-          "value": {
-            "name": "string"
-          }
-        },
-        "required": false,
-        "description": ""
-      },
-      "setProps": {
-        "type": {
-          "name": "func"
-        },
-        "required": false,
-        "description": "Dash-assigned callback that gets fired when the value changes."
-      }
-    }
-  },
   "src/lib/components/FefferyQRCode.react.js": {
     "description": "",
     "displayName": "FefferyQRCode",

package/feffery_utils_components/package-info.json

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

package/package.json

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

package/src/FefferyUtilsComponents.jl

@@ -3,10 +3,11 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.0.32"
+const version = "0.1.0"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
+include("jl/''_fefferyeyedropper.jl")
 include("jl/''_fefferygithubcolorpicker.jl")
 include("jl/''_fefferyhexcolorpicker.jl")
 include("jl/''_fefferyrgbcolorpicker.jl")
@@ -20,14 +21,12 @@ include("jl/''_fefferyexecutejs.jl")
 include("jl/''_fefferyexternalcss.jl")
 include("jl/''_fefferyexternaljs.jl")
 include("jl/''_fefferyextraspinner.jl")
-include("jl/''_fefferyeyedropper.jl")
 include("jl/''_fefferyfancymessage.jl")
 include("jl/''_fefferyfancynotification.jl")
 include("jl/''_fefferyguide.jl")
 include("jl/''_fefferyhighlightwords.jl")
 include("jl/''_fefferylazyload.jl")
 include("jl/''_fefferylazyloadimage.jl")
-include("jl/''_fefferylocation.jl")
 include("jl/''_fefferyqrcode.jl")
 include("jl/''_fefferyrawhtml.jl")
 include("jl/''_fefferyreload.jl")
@@ -62,14 +61,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.32/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.0/feffery_utils_components/feffery_utils_components.min.js",
     dynamic = nothing,
     async = nothing,
     type = :js
 ),
 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js.map",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.32/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.0/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferydiv.jl

@@ -25,6 +25,7 @@ Those elements have the following types:
   - `timestamp` (Real; optional)
 - `debounceWait` (Real; optional)
 - `deleteChildIndex` (Real; optional)
+- `enableClickAway` (Bool; optional)
 - `enableListenContextMenu` (Bool; optional)
 - `insertChild` (optional): . insertChild has the following type: lists containing elements 'index', 'element'.
 Those elements have the following types:
@@ -49,7 +50,7 @@ Those elements have the following types:
 - `style` (Dict; optional)
 """
 function ''_fefferydiv(; kwargs...)
-        available_props = Symbol[:children, :id, :_height, :_width, :appendChild, :className, :clickAwayCount, :contextMenuEvent, :debounceWait, :deleteChildIndex, :enableListenContextMenu, :insertChild, :isHovering, :key, :loading_state, :mouseEnterCount, :mouseLeaveCount, :nClicks, :nDoubleClicks, :replaceChild, :shadow, :style]
+        available_props = Symbol[:children, :id, :_height, :_width, :appendChild, :className, :clickAwayCount, :contextMenuEvent, :debounceWait, :deleteChildIndex, :enableClickAway, :enableListenContextMenu, :insertChild, :isHovering, :key, :loading_state, :mouseEnterCount, :mouseLeaveCount, :nClicks, :nDoubleClicks, :replaceChild, :shadow, :style]
         wild_props = Symbol[]
         return Component("''_fefferydiv", "FefferyDiv", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

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

@@ -26,6 +26,7 @@ const FefferyDiv = (props) => {
         replaceChild,
         deleteChildIndex,
         shadow,
+        enableClickAway,
         setProps,
         loading_state
     } = props;
@@ -104,9 +105,11 @@ const FefferyDiv = (props) => {
     }, [_isHovering])
 
     // 监听元素外点击事件
-    useClickAway(() => {
-        setProps({ clickAwayCount: clickAwayCount + 1 })
-    }, ref);
+    if (enableClickAway) {
+        useClickAway(() => {
+            setProps({ clickAwayCount: clickAwayCount + 1 })
+        }, ref);
+    }
 
     // 根据shadow参数预处理className
     if (shadow === 'hover-shadow') {
@@ -232,6 +235,10 @@ FefferyDiv.propTypes = {
     // 默认为'no-shadow'
     shadow: PropTypes.oneOf(['no-shadow', 'hover-shadow', 'always-shadow']),
 
+    // 设置是否启用元素外点击事件监听，当页面中有大量FefferyDiv元素时，建议不要开启此特性，会导致明显的性能问题
+    // 默认为false
+    enableClickAway: PropTypes.bool,
+
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.
@@ -263,7 +270,8 @@ FefferyDiv.defaultProps = {
     enableListenContextMenu: false,
     debounceWait: 150,
     clickAwayCount: 0,
-    shadow: 'no-shadow'
+    shadow: 'no-shadow',
+    enableClickAway: false
 }
 
 export default React.memo(FefferyDiv);

package/src/lib/components/FefferyTopProgress.react.js

@@ -120,7 +120,7 @@ FefferyTopProgress.propTypes = {
     // 设置是否处于加载中状态
     spinning: PropTypes.bool,
 
-    // 设置顶端进度条的初始进度值，默认为0.08，取值在0到1之间
+    // 设置顶端进度条的初始进度值，默认为0.33，取值在0到1之间
     minimum: PropTypes.number,
 
     // 用于设置同名css动画效果，默认为'ease'

package/src/lib/index.js

@@ -12,7 +12,6 @@ import FefferyScrollbars from "./components/FefferyScrollbars.react";
 import FefferyExtraSpinner from "./components/FefferyExtraSpinner.react";
 import FefferyLazyLoad from "./components/FefferyLazyLoad.react";
 import FefferyVirtualList from "./components/FefferyVirtualList.react";
-import FefferyLocation from "./components/FefferyLocation.react";
 import FefferyInViewport from "./components/listeners/FefferyInViewport.react";
 import FefferyHexColorPicker from "./components/colorPickers/FefferyHexColorPicker.react";
 import FefferyRgbColorPicker from "./components/colorPickers/FefferyRgbColorPicker.react";
@@ -43,7 +42,7 @@ import FefferyStyle from "./components/FefferyStyle.react";
 import FefferyDiv from "./components/FefferyDiv.react";
 import FefferyReload from "./components/FefferyReload.react";
 import FefferyCssVar from "./components/FefferyCssVar.react";
-import FefferyEyeDropper from "./components/FefferyEyeDropper.react";
+import FefferyEyeDropper from "./components/colorPickers/FefferyEyeDropper.react";
 import FefferySticky from "./components/FefferySticky.react";
 import FefferyLazyLoadImage from "./components/FefferyLazyLoadImage.react";
 
@@ -83,7 +82,6 @@ export {
     FefferyExtraSpinner,
     FefferyLazyLoad,
     FefferyVirtualList,
-    FefferyLocation,
     FefferyInViewport,
     FefferyHexColorPicker,
     FefferyRgbColorPicker,

package/usage.py

@@ -0,0 +1,39 @@
+import dash
+from dash import html
+import feffery_antd_components as fac
+import feffery_utils_components as fuc
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        *[
+            fuc.FefferyDiv(
+                enableClickAway=True,
+                className={
+                    '&:hover': {
+                        'transform': 'translateX(20px)',
+                        'cursor': 'pointer'
+                    }
+                },
+                style={
+                    'height': '100px',
+                    'width': '100px',
+                    'background': 'lightgrey',
+                    'marginBottom': '20px'
+                }
+            )
+            for i in range(200)
+        ],
+        fac.AntdBackTop(
+            duration=1
+        )
+    ],
+    style={
+        'padding': '100px',
+        'height': '10000px'
+    }
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/src/lib/components/FefferyLocation.react.js

@@ -1,161 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { type } from 'ramda';
-
-import { History } from '@plotly/dash-component-plugins';
-
-export default class FefferyLocation extends Component {
-    constructor(props) {
-        super(props);
-        this.updateLocation = this.updateLocation.bind(this);
-        this.onLocationChange = this.onLocationChange.bind(this);
-    }
-
-    updateLocation(props) {
-        const { hash, href, pathname, refresh, search, setProps } = props;
-
-        // Keep track of props relating to window.location that may need to be updated via setProps
-        const propsToSet = {};
-
-        /**
-         * Check if the field exists in props. If the prop with "fieldName" is not defined,
-         * then it was not set by the user and needs to be equal to the value in window.location.
-         * This only happens on page load (since props will no longer be undefined after componentDidMount).
-         *
-         * @param {string} fieldName
-         *  The name of the prop in window.location and in the component's prop
-         *
-         * @returns {boolean}
-         *  Returns true if the prop with fieldName is different and the window state needs to be updated
-         */
-        const checkExistsUpdateWindowLocation = fieldName => {
-            const propVal = props[fieldName];
-
-            if (
-                (type(propVal) === 'Undefined' || propVal === null) &&
-                type(window.location[fieldName]) !== 'Undefined'
-            ) {
-                // propVal is undefined or null, but window.location has this fieldName defined
-                propsToSet[fieldName] = window.location[fieldName];
-            } else if (propVal !== window.location[fieldName]) {
-                // Prop has changed?
-                if (refresh) {
-                    // Refresh the page?
-                    window.location[fieldName] = propVal;
-                } else if (this.props[fieldName] !== propVal) {
-                    // If this prop has changed, need to setProps
-                    propsToSet[fieldName] = propVal;
-                    // This (`${fieldName}`: propVal) needs to be pushed in the window.history
-                    return true;
-                }
-            }
-            // This (`${fieldName}`: propVal) DOES NOT need to be pushed in the window.history
-            return false;
-        };
-
-        // Check if the prop value needs to be updated (note that this mutates propsToSet)
-        const pathnameUpdated = checkExistsUpdateWindowLocation('pathname');
-        const hrefUpdated = checkExistsUpdateWindowLocation('href');
-        const hashUpdated = checkExistsUpdateWindowLocation('hash');
-        const searchUpdated = checkExistsUpdateWindowLocation('search');
-
-        // propsToSet has been updated -- batch update to Dash
-        if (Object.keys(propsToSet).length > 0) {
-            setProps(propsToSet);
-        }
-
-        // Special case -- overrides everything!
-        if (hrefUpdated) {
-            window.history.pushState({}, '', href);
-        } else if (pathnameUpdated || hashUpdated || searchUpdated) {
-            // Otherwise, we can mash everything together
-            const searchVal = type(search) !== 'Undefined' ? search : '';
-            const hashVal = type(hash) !== 'Undefined' ? hash : '';
-            window.history.pushState(
-                {},
-                '',
-                `${pathname}${searchVal}${hashVal}`
-            );
-        }
-    }
-
-    onLocationChange() {
-        const { setProps, includePathnames } = this.props;
-        const propsToChange = {};
-
-        if (this.props.pathname !== window.location.pathname) {
-            if (includePathnames) {
-                // 仅当当前pathname在includePathnames中时更新pathname值
-                if (includePathnames.indexOf(window.location.pathname) !== -1) {
-                    propsToChange.pathname = window.location.pathname;
-                }
-            } else {
-                propsToChange.pathname = window.location.pathname;
-            }
-        }
-        if (this.props.href !== window.location.href) {
-            propsToChange.href = window.location.href;
-        }
-        if (this.props.hash !== window.location.hash) {
-            propsToChange.hash = window.location.hash;
-        }
-        if (this.props.search !== window.location.search) {
-            propsToChange.search = window.location.search;
-        }
-
-        setProps(propsToChange);
-
-        History.dispatchChangeEvent();
-    }
-
-    componentDidMount() {
-        window.onpopstate = this.onLocationChange;
-
-        window.addEventListener(
-            '_dashprivate_pushstate',
-            this.onLocationChange
-        );
-        this.updateLocation(this.props);
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        this.updateLocation(nextProps);
-    }
-
-    render() {
-        return null;
-    }
-}
-
-FefferyLocation.propTypes = {
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string.isRequired,
-
-    /** pathname in window.location - e.g., "/my/full/pathname" */
-    pathname: PropTypes.string,
-    /** search in window.location - e.g., "?myargument=1" */
-    search: PropTypes.string,
-    /** hash in window.location - e.g., "#myhash" */
-    hash: PropTypes.string,
-    /** href in window.location - e.g., "/my/full/pathname?myargument=1#myhash" */
-    href: PropTypes.string,
-
-    /** Refresh the page when the location is updated? */
-    refresh: PropTypes.bool,
-
-    // 设置仅监听的pathname枚举数组
-    includePathnames: PropTypes.arrayOf(PropTypes.string),
-
-    /**
-     * Dash-assigned callback that gets fired when the value changes.
-     */
-    setProps: PropTypes.func,
-};
-
-FefferyLocation.defaultProps = {
-    refresh: true,
-};