feffery_utils_components 0.0.22 → 0.0.24

package/feffery_utils_components/metadata.json

@@ -720,6 +720,87 @@
       }
     }
   },
+  "src/lib/components/dom/FefferyExternalJs.react.js": {
+    "description": "",
+    "displayName": "FefferyExternalJs",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "jsUrl": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "''",
+          "computed": false
+        }
+      },
+      "recentlyStatus": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'unset'",
+              "computed": false
+            },
+            {
+              "value": "'loading'",
+              "computed": false
+            },
+            {
+              "value": "'ready'",
+              "computed": false
+            },
+            {
+              "value": "'error'",
+              "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/dom/FefferySetTitle.react.js": {
     "description": "",
     "displayName": "FefferySetTitle",
@@ -2956,7 +3037,15 @@
       },
       "className": {
         "type": {
-          "name": "string"
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "object"
+            }
+          ]
         },
         "required": false,
         "description": ""
@@ -3530,6 +3619,171 @@
       }
     }
   },
+  "src/lib/components/sortable/FefferySortableContainer.react.js": {
+    "description": "",
+    "displayName": "FefferySortableContainer",
+    "methods": [],
+    "props": {
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": ""
+      },
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": ""
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "helperClassName": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "object"
+            }
+          ]
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "'sortable-helper'",
+          "computed": false
+        }
+      },
+      "orders": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "number"
+          }
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
+      "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/sortable/FefferySortableItem.react.js": {
+    "description": "",
+    "displayName": "FefferySortableItem",
+    "methods": [],
+    "props": {
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": ""
+      },
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": ""
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "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/split/FefferySplit.react.js": {
     "description": "",
     "displayName": "FefferySplit",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -26,7 +26,9 @@
     "@uiw/color-convert": "^1.1.0",
     "@uiw/react-color-wheel": "^1.1.0",
     "ahooks": "^3.7.0",
+    "array-move": "^4.0.0",
     "byte-guide": "^1.0.7",
+    "lodash": "^4.17.21",
     "ninja-keys": "^1.1.12",
     "nprogress": "^0.2.0",
     "ramda": "^0.26.1",
@@ -39,6 +41,7 @@
     "react-lazy-load": "^3.1.14",
     "react-resize-detector": "^7.1.2",
     "react-scroll": "^1.8.6",
+    "react-sortable-hoc": "^2.0.0",
     "react-spinners-kit": "^1.9.1",
     "react-split": "^2.0.14",
     "react-syntax-highlighter": "^15.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -26,7 +26,9 @@
     "@uiw/color-convert": "^1.1.0",
     "@uiw/react-color-wheel": "^1.1.0",
     "ahooks": "^3.7.0",
+    "array-move": "^4.0.0",
     "byte-guide": "^1.0.7",
+    "lodash": "^4.17.21",
     "ninja-keys": "^1.1.12",
     "nprogress": "^0.2.0",
     "ramda": "^0.26.1",
@@ -39,6 +41,7 @@
     "react-lazy-load": "^3.1.14",
     "react-resize-detector": "^7.1.2",
     "react-scroll": "^1.8.6",
+    "react-sortable-hoc": "^2.0.0",
     "react-spinners-kit": "^1.9.1",
     "react-split": "^2.0.14",
     "react-syntax-highlighter": "^15.4.4",

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.0.22"
+const version = "0.0.24"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -13,6 +13,7 @@ include("jl/''_fefferyrgbcolorpicker.jl")
 include("jl/''_fefferytwittercolorpicker.jl")
 include("jl/''_fefferywheelcolorpicker.jl")
 include("jl/''_fefferyexternalcss.jl")
+include("jl/''_fefferyexternaljs.jl")
 include("jl/''_fefferysettitle.jl")
 include("jl/''_fefferycaptcha.jl")
 include("jl/''_fefferycountdown.jl")
@@ -37,6 +38,8 @@ include("jl/''_fefferyinviewport.jl")
 include("jl/''_fefferykeypress.jl")
 include("jl/''_fefferyresponsive.jl")
 include("jl/''_fefferywindowsize.jl")
+include("jl/''_fefferysortablecontainer.jl")
+include("jl/''_fefferysortableitem.jl")
 include("jl/''_fefferysplit.jl")
 include("jl/''_fefferysplitpane.jl")
 
@@ -49,14 +52,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.22/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.24/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.22/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.24/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferydiv.jl

@@ -15,7 +15,7 @@ Keyword arguments:
 - `id` (String; optional)
 - `_height` (Real; optional)
 - `_width` (Real; optional)
-- `className` (String; optional)
+- `className` (String | Dict; optional)
 - `clickAwayCount` (Real; optional)
 - `contextMenuEvent` (optional): . contextMenuEvent has the following type: lists containing elements 'pageX', 'pageY', 'timestamp'.
 Those elements have the following types:

package/src/jl/''_fefferyexternaljs.jl

@@ -0,0 +1,25 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferyexternaljs
+
+"""
+    ''_fefferyexternaljs(;kwargs...)
+
+A FefferyExternalJs component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `jsUrl` (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
+- `recentlyStatus` (a value equal to: 'unset', 'loading', 'ready', 'error'; optional)
+"""
+function ''_fefferyexternaljs(; kwargs...)
+        available_props = Symbol[:id, :jsUrl, :loading_state, :recentlyStatus]
+        wild_props = Symbol[]
+        return Component("''_fefferyexternaljs", "FefferyExternalJs", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferysortablecontainer.jl

@@ -0,0 +1,34 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferysortablecontainer
+
+"""
+    ''_fefferysortablecontainer(;kwargs...)
+    ''_fefferysortablecontainer(children::Any;kwargs...)
+    ''_fefferysortablecontainer(children_maker::Function;kwargs...)
+
+
+A FefferySortableContainer component.
+
+Keyword arguments:
+- `children` (a list of or a singular dash component, string or number; optional)
+- `id` (String; optional)
+- `className` (String; optional)
+- `helperClassName` (String | Dict; 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
+- `orders` (Array of Reals; optional)
+- `style` (Dict; optional)
+"""
+function ''_fefferysortablecontainer(; kwargs...)
+        available_props = Symbol[:children, :id, :className, :helperClassName, :loading_state, :orders, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferysortablecontainer", "FefferySortableContainer", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+
+''_fefferysortablecontainer(children::Any; kwargs...) = ''_fefferysortablecontainer(;kwargs..., children = children)
+''_fefferysortablecontainer(children_maker::Function; kwargs...) = ''_fefferysortablecontainer(children_maker(); kwargs...)
+

package/src/jl/''_fefferysortableitem.jl

@@ -0,0 +1,32 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferysortableitem
+
+"""
+    ''_fefferysortableitem(;kwargs...)
+    ''_fefferysortableitem(children::Any;kwargs...)
+    ''_fefferysortableitem(children_maker::Function;kwargs...)
+
+
+A FefferySortableItem component.
+
+Keyword arguments:
+- `children` (a list of or a singular dash component, string or number; optional)
+- `id` (String; optional)
+- `className` (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
+- `style` (Dict; optional)
+"""
+function ''_fefferysortableitem(; kwargs...)
+        available_props = Symbol[:children, :id, :className, :loading_state, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferysortableitem", "FefferySortableItem", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+
+''_fefferysortableitem(children::Any; kwargs...) = ''_fefferysortableitem(;kwargs..., children = children)
+''_fefferysortableitem(children_maker::Function; kwargs...) = ''_fefferysortableitem(children_maker(); kwargs...)
+

package/src/lib/components/dom/FefferyExternalJs.react.js

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react';
+import { useExternal } from 'ahooks';
+import PropTypes from 'prop-types';
+
+// 定义外部js资源动态注入组件FefferyExternalJs
+const FefferyExternalJs = (props) => {
+
+    const {
+        id,
+        jsUrl,
+        setProps,
+        loading_state
+    } = props;
+
+    const status = useExternal(jsUrl, {
+        type: 'js'
+    });
+
+    useEffect(() => {
+        // 更新最近一次资源变更状态
+        if (status) {
+            setProps({
+                recentlyStatus: status
+            })
+        }
+    }, [status])
+
+    return (<div
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />);
+}
+
+// 定义参数或属性
+FefferyExternalJs.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 设置对应绑定的js静态文件资源url，默认为''
+    jsUrl: PropTypes.string,
+
+    // 监听最近一次资源变更操作后对应的状态
+    recentlyStatus: PropTypes.oneOf([
+        'unset', 'loading', 'ready', 'error'
+    ]),
+
+    /**
+     * 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
+    })
+};
+
+// 设置默认参数
+FefferyExternalJs.defaultProps = {
+    jsUrl: ''
+}
+
+export default React.memo(FefferyExternalJs);

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

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef } from 'react';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import PropTypes from 'prop-types';
 import { useSize, useRequest, useHover, useClickAway } from 'ahooks';
 
@@ -62,7 +64,11 @@ const FefferyDiv = (props) => {
     return <div
         id={id}
         style={style}
-        className={className}
+        className={
+            isString(className) ?
+                className :
+                useCss(className)
+        }
         ref={ref}
         onClick={() => setProps({ nClicks: nClicks + 1 })}
         onDoubleClick={() => setProps({ nDoubleClicks: nDoubleClicks + 1 })}
@@ -97,7 +103,10 @@ FefferyDiv.propTypes = {
 
     style: PropTypes.object,
 
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 监听容器像素宽度变化
     _width: PropTypes.number,

package/src/lib/components/sortable/FefferySortableContainer.react.js

@@ -0,0 +1,100 @@
+import React, { useEffect } from 'react';
+import { sortableContainer, sortableElement } from 'react-sortable-hoc';
+import PropTypes from 'prop-types';
+import { arrayMoveImmutable } from 'array-move';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
+
+const SortableContainer = sortableContainer((props) => {
+    return <div {...props} />;
+});
+
+const SortableItem = sortableElement((props) => <div {...props} />);
+
+// 定义排序容器组件FefferySortableContainer
+const FefferySortableContainer = (props) => {
+    let {
+        id,
+        children,
+        style,
+        className,
+        helperClassName,
+        orders,
+        setProps,
+        loading_state
+    } = props;
+
+    useEffect(() => {
+        if (children) {
+            setProps({
+                orders: children.map((_, index) => index)
+            })
+        }
+    }, [])
+
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        setProps({
+            orders: arrayMoveImmutable(orders, oldIndex, newIndex)
+        })
+    };
+
+    return (<SortableContainer
+        id={id}
+        style={style}
+        className={className}
+        helperClass={isString(helperClassName) ? helperClassName : useCss(helperClassName)}
+        onSortEnd={onSortEnd}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } >
+        {orders.map((order, index) => <SortableItem index={index} children={children[order]} />)}
+    </SortableContainer>);
+};
+
+// 定义参数或属性
+FefferySortableContainer.propTypes = {
+
+    children: PropTypes.node,
+
+    id: PropTypes.string,
+
+    style: PropTypes.object,
+
+    className: PropTypes.string,
+
+    helperClassName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
+
+    orders: PropTypes.arrayOf(PropTypes.number),
+
+    /**
+     * 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
+    })
+};
+
+// 设置默认参数
+FefferySortableContainer.defaultProps = {
+    orders: [],
+    helperClassName: 'sortable-helper'
+}
+
+export default React.memo(FefferySortableContainer);