feffery_utils_components 0.0.25 → 0.0.26

package/feffery_utils_components/metadata.json

@@ -1391,6 +1391,279 @@
       }
     }
   },
+  "src/lib/components/FefferyFancyNotification.js": {
+    "description": "",
+    "displayName": "FefferyFancyNotification",
+    "methods": [],
+    "props": {
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": ""
+      },
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": ""
+      },
+      "type": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'info'",
+              "computed": false
+            },
+            {
+              "value": "'success'",
+              "computed": false
+            },
+            {
+              "value": "'warning'",
+              "computed": false
+            },
+            {
+              "value": "'error'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": ""
+      },
+      "visible": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "position": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'top-right'",
+              "computed": false
+            },
+            {
+              "value": "'top-center'",
+              "computed": false
+            },
+            {
+              "value": "'top-left'",
+              "computed": false
+            },
+            {
+              "value": "'bottom-right'",
+              "computed": false
+            },
+            {
+              "value": "'bottom-cente'",
+              "computed": false
+            },
+            {
+              "value": "'bottom-left'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": ""
+      },
+      "autoClose": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "bool"
+            },
+            {
+              "name": "number"
+            }
+          ]
+        },
+        "required": false,
+        "description": ""
+      },
+      "closable": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "hideProgressBar": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
+      "pauseOnHover": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
+      "closeOnClick": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
+      "newestOnTop": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
+      "toastClassName": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "bodyClassName": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "progressClassName": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "progressStyle": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": ""
+      },
+      "draggable": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
+      "draggablePercent": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "containerId": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "limit": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "theme": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'light'",
+              "computed": false
+            },
+            {
+              "value": "'dark'",
+              "computed": false
+            },
+            {
+              "value": "'colored'",
+              "computed": 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."
+      },
+      "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": ""
+      }
+    }
+  },
   "src/lib/components/FefferyGuide.react.js": {
     "description": "",
     "displayName": "FefferyGuide",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -46,6 +46,7 @@
     "react-spinners-kit": "^1.9.1",
     "react-split": "^2.0.14",
     "react-syntax-highlighter": "^15.4.4",
+    "react-toastify": "9.0.3",
     "react-use": "^17.4.0",
     "simplebar-react": "^2.3.7"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -46,6 +46,7 @@
     "react-spinners-kit": "^1.9.1",
     "react-split": "^2.0.14",
     "react-syntax-highlighter": "^15.4.4",
+    "react-toastify": "9.0.3",
     "react-use": "^17.4.0",
     "simplebar-react": "^2.3.7"
   },

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.0.25"
+const version = "0.0.26"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -20,6 +20,7 @@ include("jl/''_fefferycaptcha.jl")
 include("jl/''_fefferycountdown.jl")
 include("jl/''_fefferyexecutejs.jl")
 include("jl/''_fefferyextraspinner.jl")
+include("jl/''_fefferyfancynotification.jl")
 include("jl/''_fefferyguide.jl")
 include("jl/''_fefferyhighlightwords.jl")
 include("jl/''_fefferylazyload.jl")
@@ -53,14 +54,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.25/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.26/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.25/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.26/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferyfancynotification.jl

@@ -0,0 +1,51 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferyfancynotification
+
+"""
+    ''_fefferyfancynotification(;kwargs...)
+    ''_fefferyfancynotification(children::Any;kwargs...)
+    ''_fefferyfancynotification(children_maker::Function;kwargs...)
+
+
+A FefferyFancyNotification component.
+
+Keyword arguments:
+- `children` (a list of or a singular dash component, string or number; optional)
+- `id` (String; optional)
+- `autoClose` (Bool | Real; optional)
+- `bodyClassName` (String; optional)
+- `className` (String; optional)
+- `closable` (Bool; optional)
+- `closeOnClick` (Bool; optional)
+- `containerId` (String; optional)
+- `draggable` (Bool; optional)
+- `draggablePercent` (Real; optional)
+- `hideProgressBar` (Bool; optional)
+- `key` (String; optional)
+- `limit` (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
+- `newestOnTop` (Bool; optional)
+- `pauseOnHover` (Bool; optional)
+- `position` (a value equal to: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-cente', 'bottom-left'; optional)
+- `progressClassName` (String; optional)
+- `progressStyle` (Dict; optional)
+- `style` (Dict; optional)
+- `theme` (a value equal to: 'light', 'dark', 'colored'; optional)
+- `toastClassName` (String; optional)
+- `type` (a value equal to: 'info', 'success', 'warning', 'error'; optional)
+- `visible` (Bool; optional)
+"""
+function ''_fefferyfancynotification(; kwargs...)
+        available_props = Symbol[:children, :id, :autoClose, :bodyClassName, :className, :closable, :closeOnClick, :containerId, :draggable, :draggablePercent, :hideProgressBar, :key, :limit, :loading_state, :newestOnTop, :pauseOnHover, :position, :progressClassName, :progressStyle, :style, :theme, :toastClassName, :type, :visible]
+        wild_props = Symbol[]
+        return Component("''_fefferyfancynotification", "FefferyFancyNotification", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+
+''_fefferyfancynotification(children::Any; kwargs...) = ''_fefferyfancynotification(;kwargs..., children = children)
+''_fefferyfancynotification(children_maker::Function; kwargs...) = ''_fefferyfancynotification(children_maker(); kwargs...)
+

package/src/lib/components/FefferyFancyNotification.js

@@ -0,0 +1,191 @@
+import { useEffect } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import PropTypes from 'prop-types';
+import 'react-toastify/dist/ReactToastify.css';
+
+// 定义美观通知提示组件FefferyFancyNotification
+const FefferyFancyNotification = (props) => {
+
+    const {
+        id,
+        children,
+        key,
+        className,
+        style,
+        type,
+        visible,
+        position,
+        autoClose,
+        closable,
+        hideProgressBar,
+        pauseOnHover,
+        closeOnClick,
+        newestOnTop,
+        toastClassName,
+        bodyClassName,
+        progressClassName,
+        progressStyle,
+        draggable,
+        draggablePercent,
+        containerId,
+        limit,
+        theme,
+        setProps,
+        loading_state
+    } = props;
+
+    useEffect(() => {
+        if (visible) {
+            if (type) {
+                toast(
+                    children,
+                    {
+                        type: type
+                    }
+                )
+            } else {
+                toast(
+                    children,
+                )
+            }
+            setProps({
+                visible: false
+            })
+        }
+
+    }, [visible])
+
+    return (<ToastContainer
+        id={id}
+        key={key}
+        className={className}
+        style={style}
+        position={position}
+        autoClose={autoClose}
+        closeButton={closable}
+        hideProgressBar={hideProgressBar}
+        pauseOnHover={pauseOnHover}
+        closeOnClick={closeOnClick}
+        newestOnTop={newestOnTop}
+        toastClassName={toastClassName}
+        bodyClassName={bodyClassName}
+        progressClassName={progressClassName}
+        progressStyle={progressStyle}
+        draggable={draggable}
+        draggablePercent={draggablePercent}
+        containerId={containerId}
+        limit={limit}
+        theme={theme}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />);
+}
+
+// 定义参数或属性
+FefferyFancyNotification.propTypes = {
+
+    children: PropTypes.node,
+
+    // 部件id
+    id: PropTypes.string,
+
+    key: PropTypes.string,
+
+    // 设置容器的css类名
+    className: PropTypes.string,
+
+    // 设置容器的css样式
+    style: PropTypes.object,
+
+    // 设置信息类型，可选的有'info', 'success', 'warning', 'error'
+    type: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
+
+    // 主动设置是否可见，默认为false
+    visible: PropTypes.bool,
+
+    // 设置通知提示弹出方位，可选的有'top-right'、'top-center'、'top-left'、
+    // 'bottom-right'、'bottom-cente'、'bottom-left'
+    // 默认为'top-right'
+    position: PropTypes.oneOf([
+        'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-cente', 'bottom-left'
+    ]),
+
+    // 配置自动关闭延时（单位：毫秒），默认为5000
+    // 当设置为false时不会自动关闭
+    autoClose: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.number
+    ]),
+
+    // 设置是否可关闭，默认为true
+    closable: PropTypes.bool,
+
+    // 设置是否显示关闭倒计时进度条，默认为false
+    hideProgressBar: PropTypes.bool,
+
+    // 设置当鼠标悬浮于通知框上时，是否暂停倒计时
+    // 默认为true
+    pauseOnHover: PropTypes.bool,
+
+    // 设置是否允许通知框在被点击后自动关闭，默认为true
+    closeOnClick: PropTypes.bool,
+
+    // 设置是否将新的通知框显示在更顶端的位置，默认为false
+    newestOnTop: PropTypes.bool,
+
+    toastClassName: PropTypes.string,
+
+    bodyClassName: PropTypes.string,
+
+    progressClassName: PropTypes.string,
+
+    progressStyle: PropTypes.object,
+
+    // 设置通知框是否可拖拽，默认为true
+    draggable: PropTypes.bool,
+
+    // 设置通知框被拖拽距离占自身宽度的百分比阈值
+    // 拖拽距离超出此阈值时通知框会被关闭，默认为80
+    draggablePercent: PropTypes.number,
+
+    // 可选，设置局部目标容器的id
+    containerId: PropTypes.string,
+
+    // 设置屏幕中允许同时显示的通知框数量上限，默认无上限
+    limit: PropTypes.number,
+
+    // 设置主题，可选的有'light'、'dark'、'colored'
+    // 默认为'light'
+    theme: PropTypes.oneOf([
+        'light', 'dark', 'colored'
+    ]),
+
+    /**
+     * 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
+    })
+};
+
+// 设置默认参数
+FefferyFancyNotification.defaultProps = {
+    visible: true,
+    closable: true
+}
+
+export default React.memo(FefferyFancyNotification);

package/src/lib/index.js

@@ -37,6 +37,7 @@ import FefferyCountDown from "./components/FefferyCountDown.react";
 import FefferySortableItem from "./components/sortable/FefferySortableItem.react";
 import FefferySortableContainer from "./components/sortable/FefferySortableContainer.react";
 import FefferyRawHTML from "./components/dom/FefferyRawHTML.react";
+import FefferyFancyNotification from "./components/FefferyFancyNotification";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -98,5 +99,6 @@ export {
     FefferyCountDown,
     FefferySortableItem,
     FefferySortableContainer,
-    FefferyRawHTML
+    FefferyRawHTML,
+    FefferyFancyNotification
 };

package/tests/FancyNotificationTest/app.py

@@ -0,0 +1,50 @@
+if True:
+    import sys
+    import time
+    sys.path.append('../..')
+    import dash
+    import uuid
+    from dash import html, dcc
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output, State
+
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        html.Button(
+            '触发',
+            id='trigger-button'
+        ),
+
+        html.Div(
+            id='fancy-notification-container',
+            style={
+                'height': '800px'
+            }
+        )
+    ]
+)
+
+
+@app.callback(
+    Output('fancy-notification-container', 'children'),
+    Input('trigger-button', 'n_clicks')
+)
+def demo(n_clicks):
+
+    if n_clicks:
+
+        return fuc.FefferyFancyNotification(
+            html.Span('自定义内容测试', style={'color': 'green'}),
+            autoClose=5000,
+            closable=False,
+            position='top-left',
+            type='success',
+            draggable=False
+        )
+
+
+if __name__ == '__main__':
+    app.run(debug=True)