feffery_utils_components 0.1.1 → 0.1.3

package/feffery_utils_components/metadata.json

@@ -299,17 +299,6 @@
         "required": false,
         "description": ""
       },
-      "width": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "'200px'",
-          "computed": false
-        }
-      },
       "color": {
         "type": {
           "name": "string"
@@ -670,11 +659,7 @@
           "name": "string"
         },
         "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "'#fffc51'",
-          "computed": false
-        }
+        "description": ""
       },
       "loading_state": {
         "type": {
@@ -2239,11 +2224,11 @@
                 "required": false
               },
               "title": {
-                "name": "string",
+                "name": "node",
                 "required": false
               },
               "content": {
-                "name": "string",
+                "name": "node",
                 "required": false
               },
               "placement": {
@@ -2353,7 +2338,11 @@
           "name": "bool"
         },
         "required": false,
-        "description": ""
+        "description": "",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
       },
       "arrow": {
         "type": {

package/feffery_utils_components/package-info.json

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

package/package.json

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

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.1.1"
+const version = "0.1.3"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -61,14 +61,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.1.1/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.3/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.1.1/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.3/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferygithubcolorpicker.jl

@@ -19,10 +19,9 @@ Those elements have the following types:
   - `component_name` (String; optional): Holds the name of the component that is loading
 - `style` (Dict; optional)
 - `triangle` (a value equal to: 'hide', 'top-left', 'top-right'; optional)
-- `width` (String; optional)
 """
 function ''_fefferygithubcolorpicker(; kwargs...)
-        available_props = Symbol[:id, :className, :color, :colors, :loading_state, :style, :triangle, :width]
+        available_props = Symbol[:id, :className, :color, :colors, :loading_state, :style, :triangle]
         wild_props = Symbol[]
         return Component("''_fefferygithubcolorpicker", "FefferyGithubColorPicker", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

package/src/jl/''_fefferyguide.jl

@@ -38,8 +38,8 @@ Those elements have the following types:
   - `left` (Real; optional)
   - `width` (Real; optional)
   - `height` (Real; optional)
-  - `title` (String; optional)
-  - `content` (String; optional)
+  - `title` (a list of or a singular dash component, string or number; optional)
+  - `content` (a list of or a singular dash component, string or number; optional)
   - `placement` (a value equal to: 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom', 'right-top', 'right-bottom'; optional)
   - `offset` (optional): . offset has the following type: lists containing elements 'x', 'y'.
 Those elements have the following types:

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import Guide from 'byte-guide'
 import PropTypes from 'prop-types';
+import { isString } from 'lodash';
 import './styles.css'
 
 // 定义引导部件FefferyGuide，api参数参考https://github.com/bytedance/guide/blob/main/README.zh-CN.md
@@ -29,7 +30,6 @@ const FefferyGuide = (props) => {
         loading_state
     } = props;
 
-    // 返回向页面注入的快捷键监听
     return (
         <Guide id={id}
             className={className}
@@ -43,13 +43,17 @@ const FefferyGuide = (props) => {
             mask={mask}
             arrow={arrow}
             hotspot={hotspot}
-            stepText={typeof stepText === typeof ''
+            stepText={isString(stepText)
                 ? eval(stepText) : stepText}
             nextText={nextText}
             prevText={prevText}
             showPreviousBtn={showPreviousBtn}
             okText={okText}
             step={step}
+            onClose={() => {
+                // 修复引导结束后页面整体无法滚动的问题
+                document.documentElement.style.overflow = 'auto'
+            }}
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
             } />
@@ -58,16 +62,14 @@ const FefferyGuide = (props) => {
 
 // 定义参数或属性
 FefferyGuide.propTypes = {
-    // 部件id
+
     id: PropTypes.string,
 
-    // css类名
     className: PropTypes.string,
 
-    // 自定义css字典
     style: PropTypes.object,
 
-    // 设置语言，可选的有'en'、'zh'
+    // 设置语言，可选的有'en'、'zh'，默认为'zh'
     locale: PropTypes.oneOf(['zh', 'en']),
 
     // 必填，用于构造每一步锚定的页面元素
@@ -89,10 +91,10 @@ FefferyGuide.propTypes = {
             }),
 
             // 设置展示面板的标题内容
-            title: PropTypes.string,
+            title: PropTypes.node,
 
             // 设置展示面板的描述内容
-            content: PropTypes.string,
+            content: PropTypes.node,
 
             // 设置展示面板相对锚点的方位，可选的有'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom',
             // 'right-top', 'right-bottom'，默认为'bottom'
@@ -118,19 +120,19 @@ FefferyGuide.propTypes = {
     // 设置是否允许跳过引导，默认为true
     closable: PropTypes.bool,
 
-    // 设置展示面板的类名
+    // 设置弹窗的css类
     modalClassName: PropTypes.string,
 
-    // 设置蒙版层的类名
+    // 设置蒙版层css类
     maskClassName: PropTypes.string,
 
-    // 设置是否展示蒙板层，默认为true 
+    // 设置是否展示蒙版层，默认为true 
     mask: PropTypes.bool,
 
     // 设置展示面板是否添加箭头，默认为true
     arrow: PropTypes.bool,
 
-    // 设置展示面板是否展示热点，默认为false
+    // 设置展示面板是否展示热点标识，默认为false
     hotspot: PropTypes.bool,
 
     // 自定义步骤信息展示内容的回调函数，默认为"(stepIndex, stepCount) => { return '第${stepIndex}步，共${stepCount}步'; }"
@@ -176,7 +178,8 @@ FefferyGuide.propTypes = {
 // 设置默认参数
 FefferyGuide.defaultProps = {
     locale: 'zh',
-    showPreviousBtn: true
+    showPreviousBtn: true,
+    mask: true
 }
 
 export default FefferyGuide;

package/src/lib/components/colorPickers/FefferyBlockColorPicker.react.js

@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react';
 import { BlockPicker } from 'react-color';
 import PropTypes from 'prop-types';
 import '../styles.css';
@@ -17,6 +18,15 @@ const FefferyBlockColorPicker = (props) => {
         loading_state
     } = props;
 
+    useEffect(() => {
+        if (colors && !color) {
+            // 默认缺省选中色为colors中第0个色彩
+            setProps({
+                color: colors[0]
+            })
+        }
+    }, [])
+
     return (
         <BlockPicker id={id}
             className={className}
@@ -43,7 +53,7 @@ FefferyBlockColorPicker.propTypes = {
     // 自定义css字典
     style: PropTypes.object,
 
-    // 设置组件整体宽度，默认为'276px'
+    // 设置组件整体宽度，默认为'170px'
     width: PropTypes.string,
 
     // 对应当前选中的16进制色彩字符串
@@ -78,4 +88,4 @@ FefferyBlockColorPicker.defaultProps = {
     colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']
 }
 
-export default FefferyBlockColorPicker;
+export default React.memo(FefferyBlockColorPicker);

package/src/lib/components/colorPickers/FefferyCircleColorPicker.react.js

@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react';
 import { CirclePicker } from 'react-color';
 import PropTypes from 'prop-types';
 import '../styles.css';
@@ -18,6 +19,15 @@ const FefferyCircleColorPicker = (props) => {
         loading_state
     } = props;
 
+    useEffect(() => {
+        if (colors && !color) {
+            // 默认缺省选中色为colors中第0个色彩
+            setProps({
+                color: colors[0]
+            })
+        }
+    }, [])
+
     return (
         <CirclePicker id={id}
             className={className}
@@ -84,4 +94,4 @@ FefferyCircleColorPicker.defaultProps = {
     colors: ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]
 }
 
-export default FefferyCircleColorPicker;
+export default React.memo(FefferyCircleColorPicker);

package/src/lib/components/colorPickers/FefferyGithubColorPicker.react.js

@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react';
 import { GithubPicker } from 'react-color';
 import PropTypes from 'prop-types';
 import '../styles.css';
@@ -9,7 +10,6 @@ const FefferyGithubColorPicker = (props) => {
         id,
         className,
         style,
-        width,
         color,
         colors,
         triangle,
@@ -17,13 +17,22 @@ const FefferyGithubColorPicker = (props) => {
         loading_state
     } = props;
 
+
+    useEffect(() => {
+        if (colors && !color) {
+            // 默认缺省选中色为colors中第0个色彩
+            setProps({
+                color: colors[0]
+            })
+        }
+    }, [])
+
     return (
         <GithubPicker id={id}
             className={className}
             style={style}
             color={color}
             colors={colors}
-            width={width}
             triangle={triangle}
             onChangeComplete={(c, e) => setProps({ color: c.hex })}
             data-dash-is-loading={
@@ -43,9 +52,6 @@ FefferyGithubColorPicker.propTypes = {
     // 自定义css字典
     style: PropTypes.object,
 
-    // 设置组件整体宽度，默认为'200px'
-    width: PropTypes.string,
-
     // 对应当前选中的16进制色彩字符串
     color: PropTypes.string,
 
@@ -74,8 +80,7 @@ FefferyGithubColorPicker.propTypes = {
 // 设置默认参数
 FefferyGithubColorPicker.defaultProps = {
     triangle: 'top-left',
-    width: '200px',
     colors: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB']
 }
 
-export default FefferyGithubColorPicker;
+export default React.memo(FefferyGithubColorPicker);

package/src/lib/components/colorPickers/FefferyTwitterColorPicker.react.js

@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react';
 import { TwitterPicker } from 'react-color';
 import PropTypes from 'prop-types';
 import '../styles.css';
@@ -17,6 +18,15 @@ const FefferyTwitterColorPicker = (props) => {
         loading_state
     } = props;
 
+    useEffect(() => {
+        if (colors && !color) {
+            // 默认缺省选中色为colors中第0个色彩
+            setProps({
+                color: colors[0]
+            })
+        }
+    }, [])
+
     return (
         <TwitterPicker id={id}
             className={className}
@@ -78,4 +88,4 @@ FefferyTwitterColorPicker.defaultProps = {
     colors: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']
 }
 
-export default FefferyTwitterColorPicker;
+export default React.memo(FefferyTwitterColorPicker);

package/src/lib/components/colorPickers/FefferyWheelColorPicker.react.js

@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react';
 import Wheel from '@uiw/react-color-wheel';
 import { hsvaToHex, hexToHsva } from '@uiw/color-convert'
 import PropTypes from 'prop-types';
@@ -15,12 +16,22 @@ const FefferyWheelColorPicker = (props) => {
         loading_state
     } = props;
 
+    useEffect(() => {
+        if (!color) {
+            setProps({
+                color: '#fffc51'
+            })
+        }
+    }, [])
+
     return (
         <Wheel id={id}
             className={className}
             style={style}
-            color={color ? hexToHsva(color) : hexToHsva('#fffc51')}
-            onChange={(c) => setProps({ color: hsvaToHex(c.hsva) })}
+            color={color}
+            onChange={(c) => {
+                setProps({ color: c.hex })
+            }}
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
             } />
@@ -59,7 +70,6 @@ FefferyWheelColorPicker.propTypes = {
 
 // 设置默认参数
 FefferyWheelColorPicker.defaultProps = {
-    color: '#fffc51'
 }
 
-export default FefferyWheelColorPicker;
+export default React.memo(FefferyWheelColorPicker);

package/src/lib/components/styles.css

@@ -111,3 +111,7 @@
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.3s ease-in-out;
 }
+
+.github-picker {
+  box-sizing: content-box;
+}

package/usage.py

@@ -1,6 +1,5 @@
 import dash
-from dash import html
-import feffery_antd_components as fac
+from dash import html, dcc
 import feffery_utils_components as fuc
 from dash.dependencies import Input, Output, State
 
@@ -8,59 +7,46 @@ app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
-        fac.AntdSpace(
-            [
-                fac.AntdSwitch(
-                    id='css-var-demo',
-                    checked=False,
-                    unCheckedChildren='🌞',
-                    checkedChildren='🌛'
-                ),
-
-                fuc.FefferyCssVar(
-                    id='css-var-demo-output'
-                ),
-
-                html.Div(
-                    'FefferyCssVar示例',
-                    style={
-                        'background': 'var(--demo-bg-color)',
-                        'color': 'var(--demo-color)',
-                        'display': 'flex',
-                        'justifyContent': 'center',
-                        'alignItems': 'center',
-                        'fontSize': '28px',
-                        'transition': '0.2s',
-                        'padding': '100px 150px'
-                    }
-                )
-            ],
-            direction='vertical'
+        fuc.FefferyWheelColorPicker(
+            id='wheel-color-picker-demo'
+        ),
+
+        html.Div(
+            id='wheel-color-picker-demo-output',
+            style={
+                'width': '200px',
+                'height': '200px',
+                'display': 'flex',
+                'alignItems': 'center',
+                'justifyContent': 'center',
+                'borderRadius': '5px',
+                'boxShadow': '0px 0px 12px rgba(0, 0, 0, .12)',
+                'transition': '0.25s'
+            }
         )
     ],
     style={
-        'padding': '100px'
+        'padding': '50px'
     }
 )
 
+
 @app.callback(
-    Output('css-var-demo-output', 'cssVars'),
-    Input('css-var-demo', 'checked')
+    [Output('wheel-color-picker-demo-output', 'style'),
+     Output('wheel-color-picker-demo-output', 'children')],
+    Input('wheel-color-picker-demo', 'color'),
+    State('wheel-color-picker-demo-output', 'style')
 )
-def css_var_demo(checked):
+def wheel_color_picker_demo(color, old_style):
 
-    print(checked)
+    return [
+        {
+            **old_style,
+            'background': color
+        },
+        color
+    ]
 
-    if checked:
-        return {
-            '--demo-bg-color': 'black',
-            '--demo-color': 'white'
-        }
-
-    return {
-        '--demo-bg-color': 'white',
-        '--demo-color': 'black'
-    }
 
 if __name__ == '__main__':
     app.run(debug=True)