feffery_utils_components 0.0.9 → 0.0.13

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

@@ -16,7 +16,8 @@ import {
     okaidia,
     prism,
     solarizedlight,
-    twilight
+    twilight,
+    loading_state
 } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import './styles.css'
@@ -53,7 +54,10 @@ const FefferySyntaxHighlighter = (props) => {
     const [isCopied, setIsCopied] = useState(false);
 
     return (
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: 'relative' }}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
             <CopyToClipboard
                 onCopy={() => {
                     setIsCopied(true);

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
+import './nprogress.css';
 
 
 const parseChildrenToArray = children => {
@@ -24,12 +24,12 @@ const FefferyTopProgress = (props) => {
         speed,
         showSpinner,
         spinning,
-        loading_state,
         listenPropsMode,
         excludeProps,
         includeProps,
         debug,
-        setProps
+        setProps,
+        loading_state
     } = props;
 
     // 配置NProgress参数信息

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

@@ -0,0 +1,88 @@
+import { Component } from 'react';
+import { CirclePicker } from 'react-color';
+
+// 定义circle型取色器FefferyCircleColorPicker
+export default class FefferyCircleColorPicker extends Component {
+    render() {
+        // 取得必要属性或参数
+        const {
+            id,
+            className,
+            style,
+            width,
+            colors,
+            circleSize,
+            circleSpacing,
+            color,
+            setProps,
+            loading_state
+        } = this.props;
+
+        return (
+            <CirclePicker id={id}
+                className={className}
+                style={style}
+                color={color}
+                width={width}
+                colors={colors}
+                circleSize={circleSize}
+                circleSpacing={circleSpacing}
+                onChangeComplete={(c, event) => {
+                    setProps({
+                        color: c.hex
+                    })
+                }}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } />
+        );
+    }
+}
+
+
+// 定义参数或属性
+FefferyCircleColorPicker.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 设置取色盘的宽度，默认为'252px'
+    width: PropTypes.string,
+
+    // 设置取色盘中供选择的色彩数组
+    // 默认值为["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]
+    colors: PropTypes.arrayOf(PropTypes.string),
+
+    // 设取色盘中的圆形像素尺寸，默认为28
+    circleSize: PropTypes.number,
+
+    // 设置取色盘中圆形之间的间隔像素大小，默认为14
+    circleSpacing: PropTypes.number,
+
+    // 对应当前选中的颜色
+    color: 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
+    })
+};
+
+// 设置默认参数
+FefferyCircleColorPicker.defaultProps = {
+}

package/src/lib/components/nprogress.css

@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 99999;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/lib/components/split/FefferySplit.react.js

@@ -33,15 +33,6 @@ const resolveChildProps = child => {
 // 定义分割面板组件FefferySplit，api参数参考https://github.com/nathancahill/split/tree/master/packages/splitjs
 export default class FefferySplit extends Component {
 
-    constructor(props) {
-        super(props)
-        // 初始化value
-        if (props.defaultSizes) {
-            // 当defaultSizes不为空时，为sizes初始化defaultSizes对应的sizes值
-            props.setProps({ sizes: props.defaultSizes })
-        }
-    }
-
     render() {
         // 取得必要属性或参数
         let {
@@ -50,7 +41,6 @@ export default class FefferySplit extends Component {
             className,
             style,
             sizes,
-            defaultSizes,
             minSize,
             maxSize,
             expandToMin,
@@ -64,40 +54,39 @@ export default class FefferySplit extends Component {
 
         children = parseChildrenToArray(children)
 
-        const splitPanes = children.map(
-            (child) => {
-                let childProps = resolveChildProps(child)
-
-                const {
-                    id,
-                    className,
-                    style,
-                    loading_state,
-                    ...otherProps
-                } = childProps;
-
-                return (
-                    <div
-                        id={id}
-                        className={className}
-                        style={style}
-                        loading_state={loading_state}
-                        {...omit(
-                            ['setProps', 'persistence', 'persistence_type', 'persisted_props'],
-                            otherProps
-                        )}>
-                        {child}
-                    </div>
-                );
-            }
-        )
+        // const splitPanes = children.map(
+        //     (child) => {
+        //         let childProps = resolveChildProps(child)
+
+        //         const {
+        //             id,
+        //             className,
+        //             style,
+        //             loading_state,
+        //             ...otherProps
+        //         } = childProps;
+
+        //         return (
+        //             <div
+        //                 id={id}
+        //                 className={className}
+        //                 style={style}
+        //                 loading_state={loading_state}
+        //                 {...omit(
+        //                     ['setProps', 'persistence', 'persistence_type', 'persisted_props'],
+        //                     otherProps
+        //                 )}>
+        //             </div>
+        //         );
+        //     }
+        // )
 
         // 返回向页面注入的快捷键监听
         return (
             <Split id={id}
                 className={className ? `feffery-split-${direction}` + ' ' + className : `feffery-split-${direction}`}
                 style={style}
-                sizes={defaultSizes}
+                sizes={sizes}
                 minSize={minSize}
                 maxSize={maxSize}
                 expandToMin={expandToMin}
@@ -113,7 +102,7 @@ export default class FefferySplit extends Component {
                     (loading_state && loading_state.is_loading) || undefined
                 }
             >
-                {splitPanes}
+                {children}
             </Split>
         );
     }
@@ -133,9 +122,6 @@ FefferySplit.propTypes = {
     // 自定义css字典
     style: PropTypes.object,
 
-    // 以数组的形式，分别为每个子元素盒子设置百分比尺寸
-    defaultSizes: PropTypes.arrayOf(PropTypes.number),
-
     // 记录当前最新的sizes变动情况，分别为每个子元素盒子设置百分比尺寸
     sizes: PropTypes.arrayOf(PropTypes.number),
 

package/src/lib/components/styles.css

@@ -51,10 +51,6 @@
     opacity: 0.7;
 }
 
-html {
-    overflow: auto !important;
-}
-
 .feffery-split-vertical {
     border: none;
 }
@@ -65,19 +61,47 @@ html {
 }
 
 .gutter {
-    background-color: #e3f2fd;
-    background-repeat: no-repeat;
-    background-position: 50%;
+    position: relative;
 }
 
 .gutter:hover {
-    background-color: #42a5f5;
+    /* background-color: #42a5f5; */
 }
 
 .gutter.gutter-horizontal {
     cursor: col-resize;
 }
 
+.gutter.gutter-horizontal:after {
+    content: "";
+    box-sizing: border-box;
+    border-right: 1px solid #e6e6e6;
+    inset: 0;
+    position: absolute;
+    transform: translateX(-50%);
+    left: 1px;
+}
+
 .gutter.gutter-vertical {
     cursor: row-resize;
+}
+
+.gutter.gutter-horizontal:after {
+    content: "";
+    box-sizing: border-box;
+    border-right: 1px solid #e6e6e6;
+    inset: 0;
+    position: absolute;
+    transform: translateX(-50%);
+    left: 1px;
+}
+
+.gutter.gutter-vertical:after {
+    content: '';
+    box-sizing: border-box;
+    border-bottom: 1px solid #e6e6e6;
+    inset: 0;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 1px;
 }

package/src/lib/index.js

@@ -1,25 +1,30 @@
 /* eslint-disable import/prefer-default-export */
 import FefferyCaptcha from "./components/FefferyCaptcha.react";
-import FefferyWaterMark from "./components/FefferyWaterMark.react";
 import FefferySyntaxHighlighter from "./components/FefferySyntaxHighlighter.react";
-import FefferyPasteImage from "./components/FefferyPasteImage.react";
 import FefferyTopProgress from "./components/FefferyTopProgress.react"
 import FefferyShortcutPanel from "./components/FefferyShortcutPanel.react"
 import FefferyGuide from "./components/FefferyGuide.react"
 import FefferySplit from "./components/split/FefferySplit.react";
 import FefferySplitPane from "./components/split/FefferySplitPane.react"
 import FefferyExecuteJs from "./components/FefferyExecuteJs.react";
-
+import FefferyCircleColorPicker from "./components/colorPickers/FefferyCircleColorPicker.react";
+import FefferyScroll from "./components/FefferyScroll.react";
+import FefferyScrollbars from "./components/FefferyScrollbars.react";
+import FefferyExtraSpinner from "./components/FefferyExtraSpinner.react";
+import FefferyDiv from "./components/FefferyDiv.react";
 
 export {
     FefferyCaptcha,
-    FefferyWaterMark,
     FefferySyntaxHighlighter,
-    FefferyPasteImage,
     FefferyTopProgress,
     FefferyShortcutPanel,
     FefferyGuide,
     FefferySplit,
     FefferySplitPane,
-    FefferyExecuteJs
+    FefferyExecuteJs,
+    FefferyCircleColorPicker,
+    FefferyScroll,
+    FefferyScrollbars,
+    FefferyExtraSpinner,
+    FefferyDiv
 };

package/usage.py

@@ -7,12 +7,19 @@ import uuid
 app = dash.Dash(__name__)
 
 
+@app.callback(
+    Output('execute-js-demo-output', 'jsString'),
+    Input('execute-js-demo', 'n_clicks')
+)
+def execute_js_demo(n_clicks):
+
+    if n_clicks:
+        return f'console.log({n_clicks});window.open("https://www.baidu.com/")'
+
+
 app.layout = html.Div(
     fuc.FefferyTopProgress(
         [
-
-            fuc.FefferyExecuteJs(),
-
             fuc.FefferySplit(
                 [
                     fuc.FefferySplitPane(
@@ -22,8 +29,8 @@ app.layout = html.Div(
                                     html.Div(
                                         'a',
                                         style={
-                                            'width': '100px',
-                                            'height': '100px',
+                                            'width': '100%',
+                                            'height': '100%',
                                             'border': '1px solid red'
                                         }
                                     )
@@ -31,9 +38,9 @@ app.layout = html.Div(
                                 fuc.FefferySplitPane('b'),
                                 fuc.FefferySplitPane('c'),
                             ],
-                            # defaultSizes=[20, 40, 40],
+                            sizes=[20, 40, 40],
                             minSize=20,
-                            gutterSize=3,
+                            gutterSize=10,
                             # dragInterval=1,
                             # direction='vertical',
                             style={
@@ -47,7 +54,7 @@ app.layout = html.Div(
                     fuc.FefferySplitPane('b'),
                     fuc.FefferySplitPane('c'),
                 ],
-                # defaultSizes=[20, 40, 40],
+                sizes=[20, 40, 40],
                 minSize=20,
                 gutterSize=3,
                 # dragInterval=1,
@@ -58,6 +65,85 @@ app.layout = html.Div(
                 }
             ),
 
+
+            html.Div(
+                [
+                    html.Div(
+                        [
+                            html.H5(_type),
+                            fuc.FefferyExtraSpinner(
+                                type=_type,
+                                style={
+                                    'marginBottom': '25px'
+                                }
+                            )
+                        ]
+                    )
+                    for _type in [
+                        "ball", "swap", "bars", "grid", "wave", "push", "firework",
+                        "stage", "ring", "heart", "guard", "rotate", "spiral", "pulse",
+                        "swish", "sequence", "impulse", "cube", "magic", "flag", "fill",
+                        "sphere", "domino", "goo", "comb", "pong", "rainbow", "hoop",
+                        "flapper", "jellyfish", "trace", "classic", "whisper", "metro"
+                    ]
+                ],
+                style={
+                    'marginBottom': '100px'
+                }
+            ),
+
+            fuc.FefferyScrollbars(
+                html.Div(
+                    '测试'*5000,
+                    style={
+                        'padding': '50px'
+                    }
+                ),
+                scrollbarMaxSize=50,
+                style={
+                    'height': '500px',
+                    'border': '1px solid black'
+                }
+            ),
+
+            html.Button(
+                '跳转',
+                id='execute-js-demo'
+            ),
+
+            fuc.FefferyExecuteJs(
+                id='execute-js-demo-output',
+            ),
+
+            html.Div(
+                style={
+                    'height': '2000px'
+                }
+            ),
+
+            html.Div(
+                html.Button(
+                    'scroll！',
+                    id='scroll-trigger'
+                )
+            ),
+
+            # 绑定滚动器
+            fuc.FefferyScroll(
+                id='scroll',
+                duration=3000,
+                smooth='easeInOutQuad',
+                scrollMode='target',
+                scrollTargetId='step3',
+                offset=-300
+            ),
+
+            fuc.FefferyCircleColorPicker(
+                color='red'
+            ),
+
+            fuc.FefferyExecuteJs(),
+
             fuc.FefferyGuide(
                 steps=[
                     {
@@ -91,7 +177,7 @@ app.layout = html.Div(
                 # hotspot=True,
                 showPreviousBtn=True,
                 closable=True,
-                # step=-1
+                step=-1
             ),
 
             html.H2('节点1', id='step1', style={'marginBottom': '200px'}),
@@ -140,16 +226,6 @@ app.layout = html.Div(
                 ]
             ),
 
-            fuc.FefferyPasteImage(
-                id='test',
-                style={
-                    'height': '500px',
-                    'width': '800px',
-                    'marginBottom': '100px'
-                }
-            ),
-            html.Div(id='test-output'),
-
             fuc.FefferyCaptcha(id='captcha-demo',
                                charNum=10,
                                width=300,
@@ -159,11 +235,6 @@ app.layout = html.Div(
                 html.Em(id='output-demo')
             ),
 
-            fuc.FefferyWaterMark(
-                content='fuc FefferyWaterMark',
-                fontSize=26
-            ),
-
             fuc.FefferySyntaxHighlighter(
                 id='syntax-highlighter-demo',
                 showLineNumbers=True,
@@ -223,21 +294,6 @@ def test(captcha):
     return captcha
 
 
-@app.callback(
-    Output('test-output', 'children'),
-    Input('test', 'currentPastedImages')
-)
-def test_(currentPastedImages):
-
-    if currentPastedImages:
-        return [
-            html.Img(
-                src=currentPastedImage
-            )
-            for currentPastedImage in currentPastedImages
-        ]
-
-
 @app.callback(
     Output('shortcut-panel-demo', 'theme'),
     Input('shortcut-panel-demo', 'triggeredHotkey'),
@@ -249,5 +305,17 @@ def shotycut_panel_demo(triggeredHotkey, theme):
     return 'dark' if theme == 'light' else 'light'
 
 
+@app.callback(
+    Output('scroll', 'executeScroll'),
+    Input('scroll-trigger', 'n_clicks')
+)
+def scroll_test(n_clicks):
+
+    if n_clicks:
+        return True
+
+    return False
+
+
 if __name__ == '__main__':
     app.run_server(debug=True)

package/build/lib/feffery_utils_components/FefferyCaptcha.py

@@ -1,51 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class FefferyCaptcha(Component):
-    """A FefferyCaptcha component.
-
-
-Keyword arguments:
-
-- id (optional)
-
-- bgColor (optional)
-
-- captcha (optional)
-
-- charNum (default 4)
-
-- className (optional)
-
-- fontSize (optional)
-
-- height (optional)
-
-- loading_state (optional)
-
-- setProps (optional):
-    Dash-assigned callback that should be called to report property
-    changes  to Dash, to make them available for callbacks.
-
-- style (optional)
-
-- width (optional)"""
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, captcha=Component.UNDEFINED, charNum=Component.UNDEFINED, height=Component.UNDEFINED, width=Component.UNDEFINED, bgColor=Component.UNDEFINED, fontSize=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'bgColor', 'captcha', 'charNum', 'className', 'fontSize', 'height', 'loading_state', 'setProps', 'style', 'width']
-        self._type = 'FefferyCaptcha'
-        self._namespace = 'feffery_utils_components'
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'bgColor', 'captcha', 'charNum', 'className', 'fontSize', 'height', 'loading_state', 'setProps', 'style', 'width']
-        self.available_wildcard_properties =            []
-        _explicit_args = kwargs.pop('_explicit_args')
-        _locals = locals()
-        _locals.update(kwargs)  # For wildcard attrs
-        args = {k: _locals[k] for k in _explicit_args if k != 'children'}
-        for k in []:
-            if k not in args:
-                raise TypeError(
-                    'Required argument `' + k + '` was not specified.')
-        super(FefferyCaptcha, self).__init__(**args)