feffery_utils_components 0.0.5 → 0.0.8

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

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const parseChildrenToArray = children => {
+    if (children && !Array.isArray(children)) {
+        return [children];
+    }
+    return children;
+};
+
+// 定义分割子面板组件FefferySplitPane
+export default class FefferySplitPane extends Component {
+    render() {
+        // 取得必要属性或参数
+        let {
+            id,
+            children,
+            className,
+            style,
+            loading_state
+        } = this.props;
+
+        children = parseChildrenToArray(children)
+
+        return (
+            <div id={id}
+                className={className}
+                style={style}
+                children={children}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }>
+            </div>
+        );
+    }
+}
+
+// 定义参数或属性
+FefferySplitPane.propTypes = {
+    // 组件id
+    id: PropTypes.string,
+
+    children: PropTypes.node,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    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
+};
+
+// 设置默认参数
+FefferySplitPane.defaultProps = {
+}

package/src/lib/components/styles.css

@@ -1,16 +1,83 @@
 .linenumber react-syntax-highlighter-line-number {
-    min-width: 2rem!important;
+    min-width: 2rem !important;
 }
 
-
 .feffery-paste-image-container {
     height: 400px;
     overflow: auto;
     border: 1px solid #d9d9d9;
-    transition: all .3s,height 0s;
+    transition: all .3s, height 0s;
     cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAkdJREFUSEtjZMABcnNny3ByMpQyMzNpISv59u3XtokTM/tx6UMXZ4QJJCTM5+Dh+WIB4zMxMe83M1NhkJUVRdFz8eJ9hgcPXr/+9etXGEzi3z+mG9OmZb/AZinYgqbqqWVvvzC2Gyv8YgLxP3xjYvjwR4AhM8sTq0Obm1czmCj+gsu9+cx879MPxicNbTn2WH2Qnzftb5rTF7Dhh2+yM7z8yMzw8x8rgyAfKwPci1Cd/xkYGF69+8Ugwv2bQV3yN4OqxB+wzPaLnA+fvGdxmDAh8wGyJWD9teVT70dYflUAsb/+ZGTgZAMZQxgwIdl+9Bbbg0uPmBOnTMk9gNcCwsZiV0GRBTP38eC1l52dlYGL+efnt1/++5Hlg23XJRmi4/1xWjJ16jqGz5+/MTAw/N84aVJ2AMlBRMiCSZPWMLS3JzLk509nYGRknDZxYmY2zBKMSMbmTEIW9PevZOjqSgFrBVnCwMAwf9KkrCQQgyoW9PQsZ+jtTYO7DdkSqljQ2bmU4f9/rEm7iioWgJz+8+d3hl+/fsJ9cfHi7W+HDl3zppoF6JbQxAJkS2hmAcyS06evUD+IkJP44cNnvh4+fNWHqnGAbMGhQ+c/HzlyyQ9sQU3ZlIeRVt/kcJUFhDIaNn0oFlSXTX0UZfVVlmYWVJVNeRxk8l2GlQV7PbDrJv7CjhgfzFEQ/R0oyvtPCJvim+/FGWLjfUmqKlCCCKSzrHhyAA87QzA2U5i5RMKcXUzYSLHhwYNniEgmpLGsbG4XITXY5Lu6kssAynVWbI/9nxAAAAAASUVORK5CYII=), auto;
 }
 
 .feffery-paste-image-container:hover {
     border: 1px solid rgb(64, 169, 255);
+}
+
+.modal-footer {
+    background: var(--ninja-footer-background);
+    padding: 0.5em 1em;
+    display: flex;
+    /* font-size: 0.75em; */
+    border-top: var(--ninja-separate-border);
+    color: var(--ninja-secondary-text-color);
+}
+
+.modal-footer .help {
+    display: flex;
+    margin-right: 1em;
+    align-items: center;
+    font-size: 0.75em;
+}
+
+.ninja-examplekey {
+    background: var(--ninja-secondary-background-color);
+    padding: 0.06em 0.25em;
+    border-radius: var(--ninja-key-border-radius);
+    color: var(--ninja-secondary-text-color);
+    height: 1em;
+    margin-right: 0.5em;
+    font-size: 1.25em;
+    fill: currentColor;
+}
+
+.ninja-examplekey.esc {
+    width: auto;
+    height: auto;
+    font-size: 1.1em;
+}
+
+.ninja-examplekey.backspace {
+    opacity: 0.7;
+}
+
+html {
+    overflow: auto !important;
+}
+
+.feffery-split-vertical {
+    border: none;
+}
+
+.feffery-split-horizontal {
+    display: flex;
+    flex-direction: row;
+}
+
+.gutter {
+    background-color: #e3f2fd;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter:hover {
+    background-color: #42a5f5;
+}
+
+.gutter.gutter-horizontal {
+    cursor: col-resize;
+}
+
+.gutter.gutter-vertical {
+    cursor: row-resize;
 }

package/src/lib/index.js

@@ -3,11 +3,23 @@ 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";
 
 
 export {
     FefferyCaptcha,
     FefferyWaterMark,
     FefferySyntaxHighlighter,
-    FefferyPasteImage
+    FefferyPasteImage,
+    FefferyTopProgress,
+    FefferyShortcutPanel,
+    FefferyGuide,
+    FefferySplit,
+    FefferySplitPane,
+    FefferyExecuteJs
 };

package/usage.py

@@ -1,41 +1,172 @@
 import feffery_utils_components as fuc
 import dash
-from dash.dependencies import Input, Output
+from dash.dependencies import Input, Output, State
 from dash import html
+import uuid
 
 app = dash.Dash(__name__)
 
-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,
-                           height=100,
-                           fontSize=60),
-        html.Div(
-            html.Em(id='output-demo')
-        ),
-
-        fuc.FefferyWaterMark(
-            content='fuc FefferyWaterMark',
-            fontSize=26
-        ),
 
-        fuc.FefferySyntaxHighlighter(
-            showLineNumbers=True,
-            showInlineLineNumbers=True,
-            codeString='''html.Div(
+app.layout = html.Div(
+    fuc.FefferyTopProgress(
+        [
+
+            fuc.FefferySplit(
+                [
+                    fuc.FefferySplitPane(
+                        fuc.FefferySplit(
+                            [
+                                fuc.FefferySplitPane(
+                                    html.Div(
+                                        'a',
+                                        style={
+                                            'width': '100px',
+                                            'height': '100px',
+                                            'border': '1px solid red'
+                                        }
+                                    )
+                                ),
+                                fuc.FefferySplitPane('b'),
+                                fuc.FefferySplitPane('c'),
+                            ],
+                            # defaultSizes=[20, 40, 40],
+                            minSize=20,
+                            gutterSize=3,
+                            # dragInterval=1,
+                            # direction='vertical',
+                            style={
+                                'height': '100%'
+                            }
+                        ),
+                        style={
+                            'height': '100%'
+                        }
+                    ),
+                    fuc.FefferySplitPane('b'),
+                    fuc.FefferySplitPane('c'),
+                ],
+                # defaultSizes=[20, 40, 40],
+                minSize=20,
+                gutterSize=3,
+                # dragInterval=1,
+                direction='vertical',
+                style={
+                    'height': '400px',
+                    # 'border': '1px dashed black'
+                }
+            ),
+
+            fuc.FefferyGuide(
+                steps=[
+                    {
+                        'selector': '#step1',
+                        'title': '第1步',
+                        'content': '这是第1步balabalabalabala'
+                    },
+                    {
+                        'selector': '#step2',
+                        'placement': 'left-bottom',
+                        'title': '第2步',
+                        'content': '这是第2步balabalabalabala'
+                    },
+                    {
+                        'selector': '#step3',
+                        'title': '第3步',
+                        'content': '这是第3步balabalabalabala'
+                    },
+                    {
+                        'selector': '#test',
+                        'title': '第4步',
+                        'content': '这是第4步balabalabalabala'
+                    },
+                    {
+                        'selector': '#syntax-highlighter-demo',
+                        'title': '第5步',
+                        'content': '这是第5步balabalabalabala'
+                    }
+                ],
+                localKey=str(uuid.uuid4()),
+                # hotspot=True,
+                showPreviousBtn=True,
+                closable=True,
+                # step=-1
+            ),
+
+            html.H2('节点1', id='step1', style={'marginBottom': '200px'}),
+
+            html.H2('节点2', id='step2', style={
+                'float': 'right', 'marginBottom': '200px'}),
+            html.Hr(),
+
+            html.H2('节点3', id='step3', style={'marginBottom': '200px'}),
+
+            fuc.FefferyShortcutPanel(
+                id='shortcut-panel-demo',
+                locale='zh',
+                placeholder='搜索热键功能...',
+                theme='dark',
+                data=[
+                    {
+                        'id': "主页",
+                        'title': "打开主页",
+                        'hotkey': "ctrl+h",
+                        'section': '分组1',
+                        'handler': '() => window.open("http://www.baidu.com")'
+                    },
+                    {
+                        'id': '主题',
+                        'title': '切换主题',
+                        'hotkey': 'ctrl+t',
+                        'section': '分组1'
+                    },
+                    {
+                        'id': '指令1',
+                        'title': '指令1',
+                        'children': ['指令1-2', '指令1-1'],
+                        'section': '分组2'
+                    },
+                    {
+                        'id': '指令1-1',
+                        'title': '指令1-1',
+                        'parent': '指令1'
+                    },
+                    {
+                        'id': '指令1-2',
+                        'title': '指令1-2',
+                        'parent': '指令1'
+                    }
+                ]
+            ),
+
+            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,
+                               height=100,
+                               fontSize=60),
+            html.Div(
+                html.Em(id='output-demo')
+            ),
+
+            fuc.FefferyWaterMark(
+                content='fuc FefferyWaterMark',
+                fontSize=26
+            ),
+
+            fuc.FefferySyntaxHighlighter(
+                id='syntax-highlighter-demo',
+                showLineNumbers=True,
+                showInlineLineNumbers=True,
+                codeString='''html.Div(
     [
         fac.AntdBackTop(
             containerId='back-top-container-demo',
@@ -62,10 +193,15 @@ app.layout = html.Div(
     }
 )
 ''',
-            language='python',
-            codeStyle='coy-without-shadows'
-        )
-    ],
+                language='python',
+                codeStyle='coy-without-shadows'
+            )
+        ],
+        # listenPropsMode='exclude',
+        # excludeProps=['output-demo.children'],
+        debug=True,
+        showSpinner=False
+    ),
     style={
         'padding': '100px'
     }
@@ -74,14 +210,13 @@ app.layout = html.Div(
 
 @app.callback(
     Output('output-demo', 'children'),
-    Input('captcha-demo', 'captcha'),
-    prevent_initial_call=True
+    Input('captcha-demo', 'captcha')
 )
 def test(captcha):
 
     import time
 
-    time.sleep(3)
+    # time.sleep(3)
 
     return captcha
 
@@ -101,5 +236,16 @@ def test_(currentPastedImages):
         ]
 
 
+@app.callback(
+    Output('shortcut-panel-demo', 'theme'),
+    Input('shortcut-panel-demo', 'triggeredHotkey'),
+    State('shortcut-panel-demo', 'theme')
+)
+def shotycut_panel_demo(triggeredHotkey, theme):
+    print(triggeredHotkey, theme)
+
+    return 'dark' if theme == 'light' else 'light'
+
+
 if __name__ == '__main__':
     app.run_server(debug=True)

package/webpack.config.js

@@ -37,6 +37,8 @@ module.exports = (env, argv) => {
 
     const devtool = overrides.devtool || 'source-map';
 
+    // const devtool = 'cheap-module-eval-source-map';
+
     const externals = ('externals' in overrides) ? overrides.externals : ({
         react: 'React',
         'react-dom': 'ReactDOM',

package/feffery_utils_components/FefferyFefferySyntaxHighlighter.py

@@ -1,46 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class FefferyFefferySyntaxHighlighter(Component):
-    """A FefferyFefferySyntaxHighlighter component.
-
-
-Keyword arguments:
-
-- id (string; optional)
-
-- codeString (string; required)
-
-- language (string; default 'python')
-
-- loading_state (dict; optional)
-
-    `loading_state` is a dict with keys:
-
-    - component_name (string; optional):
-        Holds the name of the component that is loading.
-
-    - is_loading (boolean; optional):
-        Determines if the component is loading or not.
-
-    - prop_name (string; optional):
-        Holds which property is loading."""
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, codeString=Component.REQUIRED, language=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'codeString', 'language', 'loading_state']
-        self._type = 'FefferyFefferySyntaxHighlighter'
-        self._namespace = 'feffery_utils_components'
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'codeString', 'language', 'loading_state']
-        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 ['codeString']:
-            if k not in args:
-                raise TypeError(
-                    'Required argument `' + k + '` was not specified.')
-        super(FefferyFefferySyntaxHighlighter, self).__init__(**args)

package/feffery_utils_components/feffery_utils_components.min.js.LICENSE.txt

@@ -1,32 +0,0 @@
-/*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/**
- * Prism: Lightweight, robust, elegant syntax highlighting
- *
- * @license MIT <https://opensource.org/licenses/MIT>
- * @author Lea Verou <https://lea.verou.me>
- * @namespace
- * @public
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/feffery_utils_components/feffery_utils_components.min.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"feffery_utils_components.min.js","sourceRoot":""}