feffery_utils_components 0.0.9 → 0.0.10

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

@@ -0,0 +1,170 @@
+import React from 'react';
+import { animateScroll as scroll, scroller } from 'react-scroll'
+
+// 定义滚动操作组件FefferyScroll，api参数参考https://github.com/fisshy/react-scroll
+const FefferyScroll = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        scrollMode,
+        executeScroll,
+        scrollTopOffset,
+        scrollRelativeOffset,
+        scrollTargetId,
+        duration,
+        smooth,
+        delay,
+        containerId,
+        offset,
+        setProps,
+        loading_state
+    } = props;
+
+    if (executeScroll && scrollMode) {
+        if (scrollMode === 'to-top') {
+            scroll.scrollToTop({
+                duration,
+                smooth,
+                delay,
+                containerId,
+                offset
+            })
+        } else if (scrollMode === 'to-bottom') {
+            scroll.scrollToBottom({
+                duration,
+                smooth,
+                delay,
+                containerId,
+                offset
+            })
+        } else if (scrollMode === 'top-offset') {
+            scroll.scrollTo(
+                scrollTopOffset,
+                {
+                    duration,
+                    smooth,
+                    delay,
+                    containerId,
+                    offset
+                }
+            )
+        } else if (scrollMode === 'relative-offset') {
+            scroll.scrollMore(
+                scrollRelativeOffset,
+                {
+                    duration,
+                    smooth,
+                    delay,
+                    containerId,
+                    offset
+                }
+            )
+        } else {
+            scroller.scrollTo(
+                scrollTargetId,
+                {
+                    duration,
+                    smooth,
+                    delay,
+                    containerId,
+                    offset
+                }
+            )
+        }
+
+        // 重置executeScroll为false
+        setProps({
+            executeScroll: false
+        })
+    }
+
+    return (
+        <div id={id}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } />
+    );
+}
+
+// 定义参数或属性
+FefferyScroll.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 设置页面滚动模式，可选的有'top'、'bottom'、'top-offset'、'relative-offset'、'target'
+    scrollMode: PropTypes.oneOf([
+        'to-top', 'to-bottom', 'top-offset', 'relative-offset', 'target'
+    ]),
+
+    // 用于指示是否进行滚动操作，默认为false
+    // 在回调中可executeScroll参数Output为true从而触发新一次滚动
+    // 每次由executeScroll=true触发的滚动完成后，executeScroll会自动恢复为false
+    executeScroll: PropTypes.bool,
+
+    // 当scrollMode='top-offset'时，用于设置滚动终点距离页面顶端的像素
+    scrollTopOffset: PropTypes.number,
+
+    // 当scrollMode='relative-offset'时，用于设置相对滚动的像素距离，负数则为向上滚动
+    scrollRelativeOffset: PropTypes.number,
+
+    // 当scrollMode='target'时，用于设置滚动目标元素的id信息
+    scrollTargetId: PropTypes.string,
+
+    // 用于设置滚动过程耗时（单位：毫秒）
+    duration: PropTypes.number,
+
+    // 用于设置滚动过程动画模式
+    smooth: PropTypes.oneOf([
+        'linear',
+        'easeInQuad',
+        'easeOutQuad',
+        'easeInOutQuad',
+        'easeInCubic',
+        'easeOutCubic',
+        'easeInOutCubic',
+        'easeInQuart',
+        'easeOutQuart',
+        'easeInOutQuart',
+        'easeInQuint',
+        'easeOutQuint',
+        'easeInOutQuint'
+    ]),
+
+    // 用于设置滚动延时（单位：毫秒）
+    delay: PropTypes.number,
+
+    // 当滚动目标位于局部滚动条内时，用于设置局部滚动条所在的容器id信息
+    containerId: PropTypes.string,
+
+    // 设置滚动过程的额外偏移像素距离
+    offset: 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
+};
+
+// 设置默认参数
+FefferyScroll.defaultProps = {
+    executeScroll: false,
+    scrollMode: 'to-top'
+}
+
+export default FefferyScroll;

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

@@ -89,6 +89,7 @@ const FefferyShortcutPanel = (props) => {
         theme,
         locale,
         setProps,
+        loading_state
     } = props;
 
     data = data || [
@@ -180,7 +181,10 @@ const FefferyShortcutPanel = (props) => {
             disableHotkeys={disableHotkeys}
             openHotkey={openHotkey}
             hotKeysJoinedView={true}
-            hideBreadcrumbs={true} >
+            hideBreadcrumbs={true}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } >
             {locale === 'en' ? footerHtmlEn : footerHtmlZh}
         </ ninja-keys>
     );

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/styles.css

@@ -51,10 +51,6 @@
     opacity: 0.7;
 }
 
-html {
-    overflow: auto !important;
-}
-
 .feffery-split-vertical {
     border: none;
 }

package/src/lib/index.js

@@ -1,25 +1,25 @@
 /* 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";
 
 
 export {
     FefferyCaptcha,
-    FefferyWaterMark,
     FefferySyntaxHighlighter,
-    FefferyPasteImage,
     FefferyTopProgress,
     FefferyShortcutPanel,
     FefferyGuide,
     FefferySplit,
     FefferySplitPane,
-    FefferyExecuteJs
+    FefferyExecuteJs,
+    FefferyCircleColorPicker,
+    FefferyScroll
 };

package/usage.py

@@ -11,6 +11,33 @@ app.layout = html.Div(
     fuc.FefferyTopProgress(
         [
 
+            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.FefferySplit(
@@ -91,7 +118,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 +167,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 +176,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,
@@ -222,22 +234,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 +245,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)

package/build/lib/feffery_utils_components/FefferyGuide.py

@@ -1,69 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class FefferyGuide(Component):
-    """A FefferyGuide component.
-
-
-Keyword arguments:
-
-- id (optional)
-
-- arrow (optional)
-
-- className (optional)
-
-- closable (optional)
-
-- hotspot (optional)
-
-- loading_state (optional)
-
-- localKey (optional)
-
-- locale (default 'zh')
-
-- mask (optional)
-
-- maskClassName (optional)
-
-- modalClassName (optional)
-
-- nextText (optional)
-
-- okText (optional)
-
-- prevText (optional)
-
-- setProps (optional):
-    Dash-assigned callback that should be called to report property
-    changes  to Dash, to make them available for callbacks.
-
-- showPreviousBtn (default True)
-
-- step (optional)
-
-- stepText (optional)
-
-- steps (optional)
-
-- style (optional)"""
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, locale=Component.UNDEFINED, steps=Component.UNDEFINED, localKey=Component.UNDEFINED, closable=Component.UNDEFINED, modalClassName=Component.UNDEFINED, maskClassName=Component.UNDEFINED, mask=Component.UNDEFINED, arrow=Component.UNDEFINED, hotspot=Component.UNDEFINED, stepText=Component.UNDEFINED, nextText=Component.UNDEFINED, prevText=Component.UNDEFINED, showPreviousBtn=Component.UNDEFINED, okText=Component.UNDEFINED, step=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'arrow', 'className', 'closable', 'hotspot', 'loading_state', 'localKey', 'locale', 'mask', 'maskClassName', 'modalClassName', 'nextText', 'okText', 'prevText', 'setProps', 'showPreviousBtn', 'step', 'stepText', 'steps', 'style']
-        self._type = 'FefferyGuide'
-        self._namespace = 'feffery_utils_components'
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'arrow', 'className', 'closable', 'hotspot', 'loading_state', 'localKey', 'locale', 'mask', 'maskClassName', 'modalClassName', 'nextText', 'okText', 'prevText', 'setProps', 'showPreviousBtn', 'step', 'stepText', 'steps', 'style']
-        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(FefferyGuide, self).__init__(**args)