feffery_utils_components 0.1.1 → 0.1.2

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"

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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.2",
   "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.2"
 
 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.2/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.2/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/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/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,32 @@ 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.FefferyDiv(
+            id='div-demo',
+            style={
+                'width': '400px',
+                'height': '300px',
+                'border': '1px solid #d9d9d9'
+            }
+        ),
+        html.Span(id='output')
     ],
     style={
-        'padding': '100px'
+        'padding': '50px'
     }
 )
 
 @app.callback(
-    Output('css-var-demo-output', 'cssVars'),
-    Input('css-var-demo', 'checked')
+    Output('output', 'children'),
+    [Input('div-demo', '_width'),
+    Input('div-demo', '_height')],
+    prevent_initial_call=True
 )
-def css_var_demo(checked):
+def demo(_width, _height):
 
-    print(checked)
+    print(_width, _height)
 
-    if checked:
-        return {
-            '--demo-bg-color': 'black',
-            '--demo-color': 'white'
-        }
-
-    return {
-        '--demo-bg-color': 'white',
-        '--demo-color': 'black'
-    }
+    return f'{_width}, {_height}'
 
 if __name__ == '__main__':
-    app.run(debug=True)
+    app.run(debug=True)