feffery_utils_components 0.0.31 → 0.0.32

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -42,11 +42,13 @@
     "react-highlight-words": "^0.18.0",
     "react-hot-toast": "^2.4.0",
     "react-lazy-load": "^3.1.14",
+    "react-lazy-load-image-component": "^1.5.5",
     "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-stickynode": "^4.1.0",
     "react-syntax-highlighter": "^15.4.4",
     "react-toastify": "9.0.3",
     "react-use": "^17.4.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -42,11 +42,13 @@
     "react-highlight-words": "^0.18.0",
     "react-hot-toast": "^2.4.0",
     "react-lazy-load": "^3.1.14",
+    "react-lazy-load-image-component": "^1.5.5",
     "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-stickynode": "^4.1.0",
     "react-syntax-highlighter": "^15.4.4",
     "react-toastify": "9.0.3",
     "react-use": "^17.4.0",

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.0.31"
+const version = "0.0.32"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -12,15 +12,13 @@ include("jl/''_fefferyhexcolorpicker.jl")
 include("jl/''_fefferyrgbcolorpicker.jl")
 include("jl/''_fefferytwittercolorpicker.jl")
 include("jl/''_fefferywheelcolorpicker.jl")
-include("jl/''_fefferyexternalcss.jl")
-include("jl/''_fefferyexternaljs.jl")
-include("jl/''_fefferyrawhtml.jl")
-include("jl/''_fefferysettitle.jl")
 include("jl/''_fefferycaptcha.jl")
 include("jl/''_fefferycountdown.jl")
 include("jl/''_fefferycssvar.jl")
 include("jl/''_fefferydiv.jl")
 include("jl/''_fefferyexecutejs.jl")
+include("jl/''_fefferyexternalcss.jl")
+include("jl/''_fefferyexternaljs.jl")
 include("jl/''_fefferyextraspinner.jl")
 include("jl/''_fefferyeyedropper.jl")
 include("jl/''_fefferyfancymessage.jl")
@@ -28,12 +26,16 @@ 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")
 include("jl/''_fefferyscroll.jl")
 include("jl/''_fefferyscrollbars.jl")
+include("jl/''_fefferysettitle.jl")
 include("jl/''_fefferyshortcutpanel.jl")
+include("jl/''_fefferysticky.jl")
 include("jl/''_fefferystyle.jl")
 include("jl/''_fefferysyntaxhighlighter.jl")
 include("jl/''_fefferytimeout.jl")
@@ -60,14 +62,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.31/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.32/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.31/feffery_utils_components/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",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferydiv.jl

@@ -45,10 +45,11 @@ Those elements have the following types:
 Those elements have the following types:
   - `index` (Real; optional)
   - `element` (a list of or a singular dash component, string or number; optional)
+- `shadow` (a value equal to: 'no-shadow', 'hover-shadow', 'always-shadow'; optional)
 - `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, :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, :shadow, :style]
         wild_props = Symbol[]
         return Component("''_fefferydiv", "FefferyDiv", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

package/src/jl/''_fefferylazyloadimage.jl

@@ -0,0 +1,29 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferylazyloadimage
+
+"""
+    ''_fefferylazyloadimage(;kwargs...)
+
+A FefferyLazyLoadImage component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `alt` (String; optional)
+- `height` (String | 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
+- `placeholderSrc` (String; optional)
+- `src` (String; optional)
+- `threshold` (Real; optional)
+- `width` (String | Real; optional)
+"""
+function ''_fefferylazyloadimage(; kwargs...)
+        available_props = Symbol[:id, :alt, :height, :loading_state, :placeholderSrc, :src, :threshold, :width]
+        wild_props = Symbol[]
+        return Component("''_fefferylazyloadimage", "FefferyLazyLoadImage", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferysticky.jl

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

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

@@ -3,11 +3,12 @@ import { useCss } from 'react-use';
 import { isString } from 'lodash';
 import PropTypes from 'prop-types';
 import { useSize, useRequest, useHover, useClickAway } from 'ahooks';
+import './styles.css'
 
 // 定义进阶div容器组件FefferyDiv
 const FefferyDiv = (props) => {
     // 取得必要属性或参数
-    const {
+    let {
         id,
         key,
         children,
@@ -24,6 +25,7 @@ const FefferyDiv = (props) => {
         insertChild,
         replaceChild,
         deleteChildIndex,
+        shadow,
         setProps,
         loading_state
     } = props;
@@ -106,6 +108,13 @@ const FefferyDiv = (props) => {
         setProps({ clickAwayCount: clickAwayCount + 1 })
     }, ref);
 
+    // 根据shadow参数预处理className
+    if (shadow === 'hover-shadow') {
+        className = className ? `${className} feffery-div-hover-shadow` : 'feffery-div-hover-shadow'
+    } else if (shadow === 'always-shadow') {
+        className = className ? `${className} feffery-div-always-shadow` : 'feffery-div-always-shadow'
+    }
+
     return <div
         id={id}
         key={key}
@@ -219,6 +228,10 @@ FefferyDiv.propTypes = {
     // 监听元素外点击事件发生次数，默认为0
     clickAwayCount: PropTypes.number,
 
+    // 设置当前容器的快捷阴影效果，可选的有'no-shadow'、'hover-shadow'、'always-shadow'
+    // 默认为'no-shadow'
+    shadow: PropTypes.oneOf(['no-shadow', 'hover-shadow', 'always-shadow']),
+
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.
@@ -249,7 +262,8 @@ FefferyDiv.defaultProps = {
     nDoubleClicks: 0,
     enableListenContextMenu: false,
     debounceWait: 150,
-    clickAwayCount: 0
+    clickAwayCount: 0,
+    shadow: 'no-shadow'
 }
 
 export default React.memo(FefferyDiv);

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import PropTypes from 'prop-types';
+import 'react-lazy-load-image-component/src/effects/opacity.css';
+
+// 定义图片懒加载组件FefferyLazyLoadImage
+const FefferyLazyLoadImage = (props) => {
+    // 取得必要属性或参数
+    const {
+        id,
+        alt,
+        height,
+        width,
+        src,
+        placeholderSrc,
+        threshold,
+        setProps,
+        loading_state
+    } = props;
+
+    return <LazyLoadImage
+        id={id}
+        alt={alt}
+        height={height}
+        width={width}
+        src={src}
+        placeholderSrc={placeholderSrc}
+        threshold={threshold}
+        effect={'opacity'}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />;
+}
+
+// 定义参数或属性
+FefferyLazyLoadImage.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 设置图片alt信息
+    alt: PropTypes.string,
+
+    // 设置图片高度
+    height: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+
+    // 设置图片宽度
+    width: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+
+    // 设置图片url地址
+    src: PropTypes.string,
+
+    // 图片未显示或加载失败时的占位图地址
+    placeholderSrc: PropTypes.string,
+
+    // 设置触发加载像素距离阈值，当图片未划入视口但距离视口低于此阈值时
+    // 开始触发加载延时倒计时，默认为100
+    threshold: 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,
+};
+
+// 设置默认参数
+FefferyLazyLoadImage.defaultProps = {
+    threshold: 100
+}
+
+export default React.memo(FefferyLazyLoadImage);

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

@@ -0,0 +1,93 @@
+import Sticky from 'react-stickynode';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// 定义粘性布局组件FefferySticky
+const FefferySticky = (props) => {
+    // 取得必要属性或参数
+    const {
+        id,
+        children,
+        enabled,
+        top,
+        bottomBoundary,
+        zIndex,
+        setProps,
+        loading_state
+    } = props;
+
+    return <Sticky
+        id={id}
+        enabled={enabled}
+        top={top}
+        bottomBoundary={bottomBoundary}
+        innerZ={zIndex}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } >
+        {children}
+    </ Sticky>;
+}
+
+
+// 定义参数或属性
+FefferySticky.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    children: PropTypes.node,
+
+    // 设置是否启用粘性布局效果，默认为true
+    enabled: PropTypes.bool,
+
+    // 用于设置触发粘性布局效果对应的顶部距离阈值
+    // 当传入字符型时，字符应为css选择器规则，则此时的顶部距离阈值
+    // 为选择器对应目标元素的高度
+    top: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+
+    // 设置粘性布局元素底部距离文档顶部的像素距离阈值，
+    // 当超出这个阈值范围时，粘性状态会被解除
+    // 当传入字符型时，字符应为css选择器规则，则此时当目标元素底部
+    // 到达粘性布局元素底部时，粘性状态会被解除
+    bottomBoundary: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+
+    // 设置粘性布局元素的z-index属性
+    zIndex: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+
+    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,
+};
+
+// 设置默认参数
+FefferySticky.defaultProps = {
+    enabled: true
+}
+
+export default React.memo(FefferySticky);

package/src/lib/components/styles.css

@@ -98,3 +98,16 @@
 .sortable-helper {
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
 }
+
+.feffery-div-always-shadow {
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+}
+
+.feffery-div-hover-shadow {
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+.feffery-div-hover-shadow:hover {
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.3s ease-in-out;
+}

package/src/lib/index.js

@@ -23,9 +23,9 @@ import FefferyCircleColorPicker from "./components/colorPickers/FefferyCircleCol
 import FefferyWheelColorPicker from "./components/colorPickers/FefferyWheelColorPicker.react";
 import FefferyHighlightWords from "./components/FefferyHighlightWords.react";
 import FefferyDocumentVisibility from "./components/listeners/FefferyDocumentVisibility.react";
-import FefferyExternalCss from "./components/dom/FefferyExternalCss.react";
-import FefferyExternalJs from "./components/dom/FefferyExternalJs.react";
-import FefferySetTitle from "./components/dom/FefferySetTitle.react";
+import FefferyExternalCss from "./components/FefferyExternalCss.react";
+import FefferyExternalJs from "./components/FefferyExternalJs.react";
+import FefferySetTitle from "./components/FefferySetTitle.react";
 import FefferyResponsive from "./components/listeners/FefferyResponsive.react";
 import FefferyGeolocation from "./components/listeners/FefferyGeolocation.react";
 import FefferyIdle from "./components/listeners/FefferyIdle.react";
@@ -35,7 +35,7 @@ import FefferyTimeout from "./components/FefferyTimeout.react";
 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 FefferyRawHTML from "./components/FefferyRawHTML.react";
 import FefferyFancyNotification from "./components/FefferyFancyNotification";
 import FefferyQRCode from "./components/FefferyQrcode.react";
 import FefferyFancyMessage from "./components/FefferyFancyMessage";
@@ -44,6 +44,8 @@ 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 FefferySticky from "./components/FefferySticky.react";
+import FefferyLazyLoadImage from "./components/FefferyLazyLoadImage.react";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -112,5 +114,7 @@ export {
     FefferyDiv,
     FefferyReload,
     FefferyCssVar,
-    FefferyEyeDropper
+    FefferyEyeDropper,
+    FefferySticky,
+    FefferyLazyLoadImage
 };

package/tests/FefferyLazyLoadImageTest/app.py

@@ -0,0 +1,33 @@
+if True:
+    import sys
+    import time
+    sys.path.append('../..')
+    import dash
+    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.Div(
+            [
+                i,
+                fuc.FefferyLazyLoadImage(
+                    src=f'https://joeschmoe.io/api/v1/random?index={i}',
+                    height=200,
+                    threshold=200
+                )
+            ],
+        )
+        for i in range(100)
+    ],
+    style={
+        'height': '2000px'
+    }
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/FefferyStickyTest/app.py

@@ -0,0 +1,41 @@
+if True:
+    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(
+    [
+        html.Div(
+            fuc.FefferySticky(
+                fuc.FefferyDiv(
+                    shadow='always-shadow',
+                    style={
+                        'height': '100px',
+                        'width': '100px',
+                        'background': 'white'
+                    }
+                ),
+                top=100,
+                bottomBoundary='#sticky-boundary-target'
+            ),
+            id='sticky-boundary-target',
+            style={
+                'height': '2000px',
+                'background': 'lightgrey',
+                'padding': '200px 25px'
+            }
+        )
+    ],
+    style={
+        'padding': '100px',
+        'height': '10000px'
+    }
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/usage.py

@@ -1,47 +0,0 @@
-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(
-    [
-        html.Button(
-            '开启色彩拾取',
-            id='enable-eye-dropper'
-        ),
-        fuc.FefferyDiv(
-            fuc.FefferyEyeDropper(
-                id='eye-dropper'
-            )
-        ),
-
-        html.Div(
-            className='demo-div'
-        ),
-
-        fuc.FefferyStyle(
-            rawStyle='''
-.demo-div {
-    width: 200px;
-    height: 200px;
-    background: green;
-    border: 5px dashed red;
-}
-'''
-        )
-    ]
-)
-
-
-app.clientside_callback(
-    '''(n_clicks) => true''',
-    Output('eye-dropper', 'enable'),
-    Input('enable-eye-dropper', 'n_clicks'),
-    prevent_initial_call=True
-)
-
-
-if __name__ == '__main__':
-    app.run(debug=True)