feffery_utils_components 0.1.13 → 0.1.14

package/feffery_utils_components/metadata.json

@@ -4687,13 +4687,6 @@
         "required": false,
         "description": ""
       },
-      "style": {
-        "type": {
-          "name": "object"
-        },
-        "required": false,
-        "description": ""
-      },
       "locale": {
         "type": {
           "name": "enum",
@@ -4767,17 +4760,22 @@
             }
           }
         },
-        "required": false,
+        "required": true,
         "description": ""
       },
       "triggeredHotkey": {
         "type": {
-          "name": "union",
-          "value": [
-            {
-              "name": "string"
+          "name": "exact",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "timestamp": {
+              "name": "number",
+              "required": false
             }
-          ]
+          }
         },
         "required": false,
         "description": ""
@@ -4789,19 +4787,16 @@
         "required": false,
         "description": ""
       },
-      "disableHotkeys": {
-        "type": {
-          "name": "bool"
-        },
-        "required": false,
-        "description": ""
-      },
       "openHotkey": {
         "type": {
           "name": "string"
         },
         "required": false,
-        "description": ""
+        "description": "",
+        "defaultValue": {
+          "value": "'cmd+k,ctrl+k'",
+          "computed": false
+        }
       },
       "theme": {
         "type": {
@@ -4824,6 +4819,28 @@
           "computed": false
         }
       },
+      "open": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "close": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
       "loading_state": {
         "type": {
           "name": "shape",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "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.13",
+  "version": "0.1.14",
   "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.13"
+const version = "0.1.14"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -68,14 +68,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.1.13/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.14/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.13/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.14/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferyshortcutpanel.jl

@@ -9,7 +9,8 @@ A FefferyShortcutPanel component.
 
 Keyword arguments:
 - `id` (String; optional)
-- `data` (optional): . data has the following type: Array of lists containing elements 'id', 'title', 'hotkey', 'handler', 'parent', 'keywords', 'children', 'section'.
+- `close` (Bool; optional)
+- `data` (required): . data has the following type: Array of lists containing elements 'id', 'title', 'hotkey', 'handler', 'parent', 'keywords', 'children', 'section'.
 Those elements have the following types:
   - `id` (String; required)
   - `title` (String; required)
@@ -19,21 +20,23 @@ Those elements have the following types:
   - `keywords` (String; optional)
   - `children` (Array of Strings; optional)
   - `section` (String; optional)s
-- `disableHotkeys` (Bool; optional)
 - `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
 Those elements have the following types:
   - `is_loading` (Bool; optional): Determines if the component is loading or not
   - `prop_name` (String; optional): Holds which property is loading
   - `component_name` (String; optional): Holds the name of the component that is loading
 - `locale` (a value equal to: 'en', 'zh'; optional)
+- `open` (Bool; optional)
 - `openHotkey` (String; optional)
 - `placeholder` (String; optional)
-- `style` (Dict; optional)
 - `theme` (a value equal to: 'light', 'dark'; optional)
-- `triggeredHotkey` (String; optional)
+- `triggeredHotkey` (optional): . triggeredHotkey has the following type: lists containing elements 'id', 'timestamp'.
+Those elements have the following types:
+  - `id` (String; optional)
+  - `timestamp` (Real; optional)
 """
 function ''_fefferyshortcutpanel(; kwargs...)
-        available_props = Symbol[:id, :data, :disableHotkeys, :loading_state, :locale, :openHotkey, :placeholder, :style, :theme, :triggeredHotkey]
+        available_props = Symbol[:id, :close, :data, :loading_state, :locale, :open, :openHotkey, :placeholder, :theme, :triggeredHotkey]
         wild_props = Symbol[]
         return Component("''_fefferyshortcutpanel", "FefferyShortcutPanel", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

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

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { isString } from 'lodash';
 import "ninja-keys";
-import './styles.css'
 
 const footerHtmlEn = <div class="modal-footer" slot="footer">
     <span class="help">
@@ -76,76 +76,45 @@ const footerHtmlZh = <div className="modal-footer" slot="footer">
     </span>
 </div>
 
+const locale2footer = new Map([
+    ['en', footerHtmlEn],
+    ['zh', footerHtmlZh]
+])
+
+const locale2placeholder = new Map([
+    ['en', 'Type a command or search...'],
+    ['zh', '输入指令或进行搜索...']
+])
 
 // 定义快捷方式面板部件FefferyShortcutPanel，api参数参考https://github.com/ssleptsov/ninja-keys
 const FefferyShortcutPanel = (props) => {
     // 取得必要属性或参数
     let {
         id,
-        style,
         data,
         placeholder,
-        disableHotkeys,
         openHotkey,
         theme,
         locale,
+        open,
+        close,
         setProps,
         loading_state
     } = props;
 
-    data = data || [
-        {
-            id: "Home",
-            title: "Open Home",
-            hotkey: "cmd+h",
-            handler: () => {
-                console.log("navigation to home");
-            }
-        },
-        {
-            id: "Open Projects",
-            title: "Open Projects",
-            hotkey: "cmd+p",
-            handler: () => {
-                console.log("navigation to projects");
-            }
-        },
-        {
-            id: "Theme",
-            title: "Change theme...",
-            children: [
-                'Light Theme', 'Dark Theme'
-            ]
-        },
-        {
-            id: "Light Theme",
-            title: "Change theme to Light",
-            parent: 'Theme',
-            handler: () => {
-                console.log("theme light");
-            }
-        },
-        {
-            id: "Dark Theme",
-            title: "Change theme to Dark",
-            parent: 'Theme',
-            keywords: "lol",
-            handler: () => {
-                console.log("theme dark");
-            }
-        }
-    ]
-
     // 填充handler缺省时的默认逻辑
     data = data.map(
         item => {
-            return typeof item.handler === typeof '' || item.hasOwnProperty('children') ?
+            return isString(item.handler) || item.hasOwnProperty('children') ?
                 item : {
                     ...item,
                     ...{
                         handler: () => {
                             setProps({
-                                triggeredHotkey: item.id + ' ' + Date.parse(new Date()).toString()
+                                triggeredHotkey: {
+                                    id: item.id,
+                                    timestamp: Date.parse(new Date())
+                                }
                             })
                         }
                     }
@@ -156,7 +125,7 @@ const FefferyShortcutPanel = (props) => {
     const ninjaKeys = useRef(null);
     const [hotkeys, setHotkeys] = useState(
         data.map(
-            item => typeof item.handler === typeof '' ?
+            item => isString(item.handler) ?
                 {
                     ...item,
                     ...{
@@ -172,21 +141,40 @@ const FefferyShortcutPanel = (props) => {
         }
     }, []);
 
+    // 自主控制指令面板打开/关闭
+    useEffect(() => {
+        if (ninjaKeys.current && open) {
+            ninjaKeys.current.open()
+            // 重置
+            setProps({
+                open: false
+            })
+        }
+    }, [open])
+
+    useEffect(() => {
+        if (ninjaKeys.current && close) {
+            ninjaKeys.current.close()
+            // 重置
+            setProps({
+                close: false
+            })
+        }
+    }, [close])
+
     // 返回向页面注入的快捷键监听
     return (
         <ninja-keys id={id}
-            class={theme || 'light'}
-            style={style}
+            class={theme}
             ref={ninjaKeys}
-            placeholder={placeholder}
-            disableHotkeys={disableHotkeys}
+            placeholder={placeholder || locale2placeholder.get(locale)}
             openHotkey={openHotkey}
             hotKeysJoinedView={true}
             hideBreadcrumbs={true}
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
             } >
-            {locale === 'en' ? footerHtmlEn : footerHtmlZh}
+            {locale2footer.get(locale)}
         </ ninja-keys>
     );
 }
@@ -196,13 +184,53 @@ FefferyShortcutPanel.propTypes = {
     // 部件id
     id: PropTypes.string,
 
-    // 自定义css字典
-    style: PropTypes.object,
-
-    // 设置语言，可选的有'en'、'zh'
+    // 设置语言，可选的有'en'、'zh'，默认为'zh'
     locale: PropTypes.oneOf(['en', 'zh']),
 
     // 用于定义热键节点的数据结构
+    // 例：
+    // [
+    //     {
+    //         id: "Home",
+    //         title: "Open Home",
+    //         hotkey: "cmd+h",
+    //         handler: () => {
+    //             console.log("navigation to home");
+    //         }
+    //     },
+    //     {
+    //         id: "Open Projects",
+    //         title: "Open Projects",
+    //         hotkey: "cmd+p",
+    //         handler: () => {
+    //             console.log("navigation to projects");
+    //         }
+    //     },
+    //     {
+    //         id: "Theme",
+    //         title: "Change theme...",
+    //         children: [
+    //             'Light Theme', 'Dark Theme'
+    //         ]
+    //     },
+    //     {
+    //         id: "Light Theme",
+    //         title: "Change theme to Light",
+    //         parent: 'Theme',
+    //         handler: () => {
+    //             console.log("theme light");
+    //         }
+    //     },
+    //     {
+    //         id: "Dark Theme",
+    //         title: "Change theme to Dark",
+    //         parent: 'Theme',
+    //         keywords: "lol",
+    //         handler: () => {
+    //             console.log("theme dark");
+    //         }
+    //     }
+    // ]
     data: PropTypes.arrayOf(
         PropTypes.exact({
             // 用于定义当前热键的唯一id，会在顶端热键面包屑中进行显示
@@ -232,25 +260,31 @@ FefferyShortcutPanel.propTypes = {
             // 用于设置分组标题文字
             section: PropTypes.string
         })
-    ),
+    ).isRequired,
 
-    // 监听记录最近一次被触发的热键id以及对应触发时间的秒级时间戳信息
-    triggeredHotkey: PropTypes.oneOfType([
-        PropTypes.string
-    ]),
+    // 监听记录最近一次被触发的热键id以及对应触发时间的时间戳信息
+    triggeredHotkey: PropTypes.exact({
+        // 触发指令菜单项id
+        id: PropTypes.string,
+        // 触发时间戳信息
+        timestamp: PropTypes.number
+    }),
 
-    // 定义输入框提示内容
+    // 定义输入框提示内容，默认会根据locale赋以不同的缺省值
     placeholder: PropTypes.string,
 
-    // 设置是否禁用热键，默认为false
-    disableHotkeys: PropTypes.bool,
-
     // 设置唤出指令面板的快捷键组合，默认为'cmd+k,ctrl+k'
     openHotkey: PropTypes.string,
 
-    // 设置主题，可选的有'light'、'dark'
+    // 设置主题，可选的有'light'、'dark'，默认为'light'
     theme: PropTypes.oneOf(['light', 'dark']),
 
+    // 传入true时手动展开指令面板，默认为false
+    open: PropTypes.bool,
+
+    // 传入true时手动关闭指令面板，默认为false
+    close: PropTypes.bool,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -276,7 +310,10 @@ FefferyShortcutPanel.propTypes = {
 // 设置默认参数
 FefferyShortcutPanel.defaultProps = {
     locale: 'zh',
-    theme: 'light'
+    theme: 'light',
+    openHotkey: 'cmd+k,ctrl+k',
+    open: false,
+    close: false
 }
 
 export default FefferyShortcutPanel;

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { BlockPicker } from 'react-color';
+import BlockPicker from 'react-color/es/Block';
 import PropTypes from 'prop-types';
 import '../styles.css';
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { CirclePicker } from 'react-color';
+import CirclePicker from 'react-color/es/Circle';
 import PropTypes from 'prop-types';
 import '../styles.css';
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { GithubPicker } from 'react-color';
+import GithubPicker from 'react-color/es/Github';
 import PropTypes from 'prop-types';
 import '../styles.css';
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { TwitterPicker } from 'react-color';
+import TwitterPicker from 'react-color/es/Twitter';
 import PropTypes from 'prop-types';
 import '../styles.css';
 

package/src/lib/components/styles.css

@@ -174,4 +174,9 @@
 
 .react-json-view svg {
   vertical-align: middle !important;
+}
+
+/* firefox */
+ninja-keys::part(actions-list) {
+  scrollbar-width: thin;
 }

package/tests/ShortcutPanelTest/app.py

@@ -0,0 +1,32 @@
+if True:
+    import sys
+    sys.path.append('../..')
+    import dash
+    from dash import html, dcc
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output, State
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferyShortcutPanel(
+            data=[
+                {
+                    'id': f'指令{i}',
+                    'title': f'指令{i}',
+                    'handler': f'() => alert("指令{i}")'
+                }
+                for i in range(20)
+            ],
+            open=True
+        )
+    ],
+    style={
+        'height': '2000px'
+    }
+)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)