feffery_utils_components 0.0.28 → 0.0.30

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.0.28"
+const version = "0.0.30"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -18,6 +18,7 @@ include("jl/''_fefferyrawhtml.jl")
 include("jl/''_fefferysettitle.jl")
 include("jl/''_fefferycaptcha.jl")
 include("jl/''_fefferycountdown.jl")
+include("jl/''_fefferydiv.jl")
 include("jl/''_fefferyexecutejs.jl")
 include("jl/''_fefferyextraspinner.jl")
 include("jl/''_fefferyfancymessage.jl")
@@ -27,14 +28,15 @@ include("jl/''_fefferyhighlightwords.jl")
 include("jl/''_fefferylazyload.jl")
 include("jl/''_fefferylocation.jl")
 include("jl/''_fefferyqrcode.jl")
+include("jl/''_fefferyreload.jl")
 include("jl/''_fefferyscroll.jl")
 include("jl/''_fefferyscrollbars.jl")
 include("jl/''_fefferyshortcutpanel.jl")
+include("jl/''_fefferystyle.jl")
 include("jl/''_fefferysyntaxhighlighter.jl")
 include("jl/''_fefferytimeout.jl")
 include("jl/''_fefferytopprogress.jl")
 include("jl/''_fefferyvirtuallist.jl")
-include("jl/''_fefferydiv.jl")
 include("jl/''_fefferydocumentvisibility.jl")
 include("jl/''_fefferygeolocation.jl")
 include("jl/''_fefferyidle.jl")
@@ -56,14 +58,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.28/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.30/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.28/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.30/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferydiv.jl

@@ -15,6 +15,7 @@ Keyword arguments:
 - `id` (String; optional)
 - `_height` (Real; optional)
 - `_width` (Real; optional)
+- `appendChild` (a list of or a singular dash component, string or number; optional)
 - `className` (String | Dict; optional)
 - `clickAwayCount` (Real; optional)
 - `contextMenuEvent` (optional): . contextMenuEvent has the following type: lists containing elements 'pageX', 'pageY', 'timestamp'.
@@ -23,8 +24,14 @@ Those elements have the following types:
   - `pageY` (Real; optional)
   - `timestamp` (Real; optional)
 - `debounceWait` (Real; optional)
+- `deleteChildIndex` (Real; optional)
 - `enableListenContextMenu` (Bool; optional)
+- `insertChild` (optional): . insertChild has the following type: lists containing elements 'index', 'element'.
+Those elements have the following types:
+  - `index` (Real; optional)
+  - `element` (a list of or a singular dash component, string or number; optional)
 - `isHovering` (Bool; optional)
+- `key` (String; optional)
 - `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
 Those elements have the following types:
   - `is_loading` (Bool; optional): Determines if the component is loading or not
@@ -34,10 +41,14 @@ Those elements have the following types:
 - `mouseLeaveCount` (Real; optional)
 - `nClicks` (Real; optional)
 - `nDoubleClicks` (Real; optional)
+- `replaceChild` (optional): . replaceChild has the following type: lists containing elements 'index', 'element'.
+Those elements have the following types:
+  - `index` (Real; optional)
+  - `element` (a list of or a singular dash component, string or number; optional)
 - `style` (Dict; optional)
 """
 function ''_fefferydiv(; kwargs...)
-        available_props = Symbol[:children, :id, :_height, :_width, :className, :clickAwayCount, :contextMenuEvent, :debounceWait, :enableListenContextMenu, :isHovering, :loading_state, :mouseEnterCount, :mouseLeaveCount, :nClicks, :nDoubleClicks, :style]
+        available_props = Symbol[:children, :id, :_height, :_width, :appendChild, :className, :clickAwayCount, :contextMenuEvent, :debounceWait, :deleteChildIndex, :enableListenContextMenu, :insertChild, :isHovering, :key, :loading_state, :mouseEnterCount, :mouseLeaveCount, :nClicks, :nDoubleClicks, :replaceChild, :style]
         wild_props = Symbol[]
         return Component("''_fefferydiv", "FefferyDiv", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

package/src/jl/''_fefferyreload.jl

@@ -0,0 +1,25 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferyreload
+
+"""
+    ''_fefferyreload(;kwargs...)
+
+A FefferyReload component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `delay` (Real; optional)
+- `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
+Those elements have the following types:
+  - `is_loading` (Bool; optional): Determines if the component is loading or not
+  - `prop_name` (String; optional): Holds which property is loading
+  - `component_name` (String; optional): Holds the name of the component that is loading
+- `reload` (Bool; optional)
+"""
+function ''_fefferyreload(; kwargs...)
+        available_props = Symbol[:id, :delay, :loading_state, :reload]
+        wild_props = Symbol[]
+        return Component("''_fefferyreload", "FefferyReload", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferystyle.jl

@@ -0,0 +1,24 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferystyle
+
+"""
+    ''_fefferystyle(;kwargs...)
+
+A FefferyStyle component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
+Those elements have the following types:
+  - `is_loading` (Bool; optional): Determines if the component is loading or not
+  - `prop_name` (String; optional): Holds which property is loading
+  - `component_name` (String; optional): Holds the name of the component that is loading
+- `rawStyle` (String; optional)
+"""
+function ''_fefferystyle(; kwargs...)
+        available_props = Symbol[:id, :loading_state, :rawStyle]
+        wild_props = Symbol[]
+        return Component("''_fefferystyle", "FefferyStyle", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/lib/components/{listeners/FefferyDiv.react.js → FefferyDiv.react.js}

@@ -9,6 +9,7 @@ const FefferyDiv = (props) => {
     // 取得必要属性或参数
     const {
         id,
+        key,
         children,
         style,
         className,
@@ -19,6 +20,10 @@ const FefferyDiv = (props) => {
         enableListenContextMenu,
         debounceWait,
         clickAwayCount,
+        appendChild,
+        insertChild,
+        replaceChild,
+        deleteChildIndex,
         setProps,
         loading_state
     } = props;
@@ -27,6 +32,46 @@ const FefferyDiv = (props) => {
     const size = useSize(ref);
     const _isHovering = useHover(ref);
 
+    // 快捷children数组增删操作
+    useEffect(() => {
+        if (children && appendChild) {
+            setProps({
+                children: children.concat(appendChild),
+                appendChild: null // 重置
+            })
+        }
+    }, [appendChild])
+
+    useEffect(() => {
+        if (children && insertChild && insertChild.index && insertChild.element) {
+            setProps({
+                children: children.slice(0, insertChild.index)
+                    .concat([insertChild.element])
+                    .concat(children.slice(insertChild.index)),
+                insertChild: null // 重置
+            })
+        }
+    }, [insertChild])
+
+    useEffect(() => {
+        if (children && replaceChild && replaceChild.index && replaceChild.element) {
+            children[replaceChild.index] = replaceChild.element
+            setProps({
+                children: children,
+                replaceChild: undefined // 重置
+            })
+        }
+    }, [replaceChild])
+
+    useEffect(() => {
+        if (children && deleteChildIndex) {
+            setProps({
+                children: children.filter((_, i) => i !== deleteChildIndex),
+                deleteChildIndex: undefined // 重置
+            })
+        }
+    }, [deleteChildIndex])
+
     // 防抖更新容器尺寸
     const { run: updateWidthHeight } = useRequest(
         (e) => {
@@ -63,11 +108,12 @@ const FefferyDiv = (props) => {
 
     return <div
         id={id}
+        key={key}
         style={style}
         className={
             isString(className) ?
                 className :
-                useCss(className)
+                (className ? useCss(className) : undefined)
         }
         ref={ref}
         onClick={() => setProps({ nClicks: nClicks + 1 })}
@@ -93,14 +139,38 @@ const FefferyDiv = (props) => {
     </ div>;
 }
 
-
 // 定义参数或属性
 FefferyDiv.propTypes = {
     // 部件id
     id: PropTypes.string,
 
+    key: PropTypes.string,
+
     children: PropTypes.node,
 
+    // 快捷children数组增删参数，在有效值传入促使组件更新后会自动重置为undefined
+    // 用于快捷向children数组末尾追加新元素
+    appendChild: PropTypes.node,
+
+    // 用于快捷在原children数组第index个位置插入新元素
+    insertChild: PropTypes.exact({
+        // 要插入的位序
+        index: PropTypes.number,
+        // 要插入的元素
+        element: PropTypes.node
+    }),
+
+    // 用于快捷对children数组第index个位置的元素进行替换
+    replaceChild: PropTypes.exact({
+        // 要替换元素的位序
+        index: PropTypes.number,
+        // 要替换的新元素
+        element: PropTypes.node
+    }),
+
+    // 用于快捷删除原children第index个位置的元素
+    deleteChildIndex: PropTypes.number,
+
     style: PropTypes.object,
 
     className: PropTypes.oneOfType([
@@ -182,4 +252,4 @@ FefferyDiv.defaultProps = {
     clickAwayCount: 0
 }
 
-export default FefferyDiv;
+export default React.memo(FefferyDiv);

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

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+// 定义页面重载组件FefferyReload
+const FefferyReload = (props) => {
+    const {
+        id,
+        reload,
+        delay,
+        setProps,
+        loading_state
+    } = props;
+
+    useEffect(() => {
+        // 执行页面重载操作
+        if (reload) {
+            if (delay) {
+                // 延时重载
+                setTimeout(
+                    () => window.location.reload(),
+                    delay
+                )
+            } else {
+                // 立即重载
+                window.location.reload()
+            }
+        }
+    }, [reload])
+
+    return <div
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />;
+}
+
+
+// 定义参数或属性
+FefferyReload.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 执行页面重载操作的标志，当设置为true时会进行页面重载
+    reload: PropTypes.bool,
+
+    // 设置重载执行的延时时长（单位：毫秒）
+    delay: PropTypes.number,
+
+    loading_state: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        is_loading: PropTypes.bool,
+        /**
+         * Holds which property is loading
+         */
+        prop_name: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        component_name: PropTypes.string
+    }),
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+};
+
+// 设置默认参数
+FefferyReload.defaultProps = {
+}
+
+export default FefferyReload;

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

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+
+// 定义动态样式组件FefferyStyle
+const FefferyStyle = (props) => {
+
+    const {
+        id,
+        rawStyle,
+        setProps,
+        loading_state
+    } = props;
+
+    return (<style
+        jsx
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } >{rawStyle}</style>);
+}
+
+// 定义参数或属性
+FefferyStyle.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    rawStyle: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+
+    loading_state: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        is_loading: PropTypes.bool,
+        /**
+         * Holds which property is loading
+         */
+        prop_name: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        component_name: PropTypes.string
+    })
+};
+
+// 设置默认参数
+FefferyStyle.defaultProps = {
+}
+
+export default React.memo(FefferyStyle);

package/src/lib/index.js

@@ -13,7 +13,6 @@ 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 FefferyDiv from "./components/listeners/FefferyDiv.react";
 import FefferyInViewport from "./components/listeners/FefferyInViewport.react";
 import FefferyHexColorPicker from "./components/colorPickers/FefferyHexColorPicker.react";
 import FefferyRgbColorPicker from "./components/colorPickers/FefferyRgbColorPicker.react";
@@ -40,6 +39,9 @@ import FefferyRawHTML from "./components/dom/FefferyRawHTML.react";
 import FefferyFancyNotification from "./components/FefferyFancyNotification";
 import FefferyQRCode from "./components/FefferyQrcode.react";
 import FefferyFancyMessage from "./components/FefferyFancyMessage";
+import FefferyStyle from "./components/FefferyStyle.react";
+import FefferyDiv from "./components/FefferyDiv.react";
+import FefferyReload from "./components/FefferyReload.react";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -75,7 +77,6 @@ export {
     FefferyScroll,
     FefferyScrollbars,
     FefferyExtraSpinner,
-    FefferyDiv,
     FefferyLazyLoad,
     FefferyVirtualList,
     FefferyLocation,
@@ -104,5 +105,8 @@ export {
     FefferyRawHTML,
     FefferyFancyNotification,
     FefferyQRCode,
-    FefferyFancyMessage
+    FefferyFancyMessage,
+    FefferyStyle,
+    FefferyDiv,
+    FefferyReload
 };

package/tests/FefferyReloadTest/app.py

@@ -0,0 +1,61 @@
+if True:
+    import sys
+    sys.path.append('../..')
+    import dash
+    import json
+    from dash import html
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        html.Button(
+            '立即重载',
+            id='reload'
+        ),
+
+        html.Button(
+            '延时3秒重载',
+            id='reload-delay'
+        ),
+
+        fuc.FefferyReload(
+            id='reload-demo'
+        ),
+
+        fuc.FefferyReload(
+            id='reload-delay-demo',
+            delay=3000
+        )
+    ],
+    style={
+        'padding': '20px',
+        'height': '100vh'
+    }
+)
+
+
+@app.callback(
+    Output('reload-demo', 'reload'),
+    Input('reload', 'n_clicks'),
+    prevent_initial_call=True
+)
+def reload(n_clicks):
+
+    return True
+
+
+@app.callback(
+    Output('reload-delay-demo', 'reload'),
+    Input('reload-delay', 'n_clicks'),
+    prevent_initial_call=True
+)
+def reload_delay(n_clicks):
+
+    return True
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/usage.py

@@ -6,27 +6,21 @@ app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
-        fuc.FefferySyntaxHighlighter(
-            showLineNumbers=True,
-            language='python',
-            codeString="""
-fac.AntdDivider(
-    '默认linkTarget="_blank"',
-    innerTextOrientation='left'
-),
-fmc.FefferyMarkdown(
-    markdownStr='''[fac官网](http://fac.feffery.tech/)'''
-),
+        fuc.FefferyDiv(),
 
-fac.AntdDivider(
-    'linkTarget="_self"',
-    innerTextOrientation='left'
-),
-fmc.FefferyMarkdown(
-    linkTarget='_self',
-    markdownStr='''[fac官网](http://fac.feffery.tech/)'''
-)
-"""
+        html.Div(
+            className='demo-div'
+        ),
+
+        fuc.FefferyStyle(
+            rawStyle='''
+.demo-div {
+    width: 200px;
+    height: 200px;
+    background: green;
+    border: 5px dashed red;
+}
+'''
         )
     ]
 )

package/build/lib/feffery_utils_components/FefferyBlockColorPicker.py

@@ -1,53 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class FefferyBlockColorPicker(Component):
-    """A FefferyBlockColorPicker component.
-
-
-Keyword arguments:
-
-- id (string; optional)
-
-- className (string; optional)
-
-- color (string; optional)
-
-- colors (list of strings; default ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'])
-
-- loading_state (dict; optional)
-
-    `loading_state` is a dict with keys:
-
-    - component_name (string; optional):
-        Holds the name of the component that is loading.
-
-    - is_loading (boolean; optional):
-        Determines if the component is loading or not.
-
-    - prop_name (string; optional):
-        Holds which property is loading.
-
-- style (dict; optional)
-
-- triangle (a value equal to: 'hide', 'top'; default 'top')
-
-- width (string; default '170px')"""
-    _children_props = []
-    _base_nodes = ['children']
-    _namespace = 'feffery_utils_components'
-    _type = 'FefferyBlockColorPicker'
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, width=Component.UNDEFINED, color=Component.UNDEFINED, colors=Component.UNDEFINED, triangle=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'className', 'color', 'colors', 'loading_state', 'style', 'triangle', 'width']
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'className', 'color', 'colors', 'loading_state', 'style', 'triangle', 'width']
-        self.available_wildcard_properties =            []
-        _explicit_args = kwargs.pop('_explicit_args')
-        _locals = locals()
-        _locals.update(kwargs)  # For wildcard attrs and excess named props
-        args = {k: _locals[k] for k in _explicit_args}
-
-        super(FefferyBlockColorPicker, self).__init__(**args)

package/build/lib/feffery_utils_components/FefferyCaptcha.py

@@ -1,59 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class FefferyCaptcha(Component):
-    """A FefferyCaptcha component.
-
-
-Keyword arguments:
-
-- id (string; optional)
-
-- bgColor (string; optional)
-
-- captcha (string; optional)
-
-- charNum (number; default 4)
-
-- className (string; optional)
-
-- fontSize (number; optional)
-
-- height (number; optional)
-
-- loading_state (dict; optional)
-
-    `loading_state` is a dict with keys:
-
-    - component_name (string; optional):
-        Holds the name of the component that is loading.
-
-    - is_loading (boolean; optional):
-        Determines if the component is loading or not.
-
-    - prop_name (string; optional):
-        Holds which property is loading.
-
-- refresh (boolean; optional)
-
-- style (dict; optional)
-
-- width (number; optional)"""
-    _children_props = []
-    _base_nodes = ['children']
-    _namespace = 'feffery_utils_components'
-    _type = 'FefferyCaptcha'
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, captcha=Component.UNDEFINED, charNum=Component.UNDEFINED, height=Component.UNDEFINED, width=Component.UNDEFINED, bgColor=Component.UNDEFINED, fontSize=Component.UNDEFINED, refresh=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'bgColor', 'captcha', 'charNum', 'className', 'fontSize', 'height', 'loading_state', 'refresh', 'style', 'width']
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'bgColor', 'captcha', 'charNum', 'className', 'fontSize', 'height', 'loading_state', 'refresh', 'style', 'width']
-        self.available_wildcard_properties =            []
-        _explicit_args = kwargs.pop('_explicit_args')
-        _locals = locals()
-        _locals.update(kwargs)  # For wildcard attrs and excess named props
-        args = {k: _locals[k] for k in _explicit_args}
-
-        super(FefferyCaptcha, self).__init__(**args)