feffery_utils_components 0.0.6 → 0.0.9

package/src/jl/''_fefferyguide.jl

@@ -0,0 +1,38 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferyguide
+
+"""
+    ''_fefferyguide(;kwargs...)
+
+A FefferyGuide component.
+
+Keyword arguments:
+- `id` (optional)
+- `arrow` (optional)
+- `className` (optional)
+- `closable` (optional)
+- `hotspot` (optional)
+- `loading_state` (optional)
+- `localKey` (optional)
+- `locale` (optional)
+- `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` (optional)
+- `step` (optional)
+- `stepText` (optional)
+- `steps` (optional)
+- `style` (optional)
+"""
+function ''_fefferyguide(; kwargs...)
+        available_props = Symbol[:id, :arrow, :className, :closable, :hotspot, :loading_state, :localKey, :locale, :mask, :maskClassName, :modalClassName, :nextText, :okText, :prevText, :showPreviousBtn, :step, :stepText, :steps, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferyguide", "FefferyGuide", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferykeyboardshortcut.jl

@@ -0,0 +1,36 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferykeyboardshortcut
+
+"""
+    ''_fefferykeyboardshortcut(;kwargs...)
+
+A FefferyKeyboardShortcut component.
+
+Keyword arguments:
+- `id` (optional)
+- `className` (optional)
+- `closeHotkey` (optional)
+- `data` (optional)
+- `disableHotkeys` (optional)
+- `goBackHotkey` (optional)
+- `hotKeysJoinedView` (optional)
+- `loading_state` (optional)
+- `locale` (optional)
+- `navigationDownHotkey` (optional)
+- `navigationUpHotkey` (optional)
+- `openHotkey` (optional)
+- `placeholder` (optional)
+- `selectHotkey` (optional)
+- `setProps` (optional): Dash-assigned callback that should be called to report property changes
+to Dash, to make them available for callbacks.
+- `style` (optional)
+- `theme` (optional)
+- `triggeredHotkey` (optional)
+"""
+function ''_fefferykeyboardshortcut(; kwargs...)
+        available_props = Symbol[:id, :className, :closeHotkey, :data, :disableHotkeys, :goBackHotkey, :hotKeysJoinedView, :loading_state, :locale, :navigationDownHotkey, :navigationUpHotkey, :openHotkey, :placeholder, :selectHotkey, :style, :theme, :triggeredHotkey]
+        wild_props = Symbol[]
+        return Component("''_fefferykeyboardshortcut", "FefferyKeyboardShortcut", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferyresizable.jl

@@ -0,0 +1,23 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferyresizable
+
+"""
+    ''_fefferyresizable(;kwargs...)
+
+A FefferyResizable component.
+
+Keyword arguments:
+- `id` (optional)
+- `className` (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)
+"""
+function ''_fefferyresizable(; kwargs...)
+        available_props = Symbol[:id, :className, :loading_state, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferyresizable", "FefferyResizable", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferyshortcutpanel.jl

@@ -0,0 +1,29 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferyshortcutpanel
+
+"""
+    ''_fefferyshortcutpanel(;kwargs...)
+
+A FefferyShortcutPanel component.
+
+Keyword arguments:
+- `id` (optional)
+- `data` (optional)
+- `disableHotkeys` (optional)
+- `loading_state` (optional)
+- `locale` (optional)
+- `openHotkey` (optional)
+- `placeholder` (optional)
+- `setProps` (optional): Dash-assigned callback that should be called to report property changes
+to Dash, to make them available for callbacks.
+- `style` (optional)
+- `theme` (optional)
+- `triggeredHotkey` (optional)
+"""
+function ''_fefferyshortcutpanel(; kwargs...)
+        available_props = Symbol[:id, :data, :disableHotkeys, :loading_state, :locale, :openHotkey, :placeholder, :style, :theme, :triggeredHotkey]
+        wild_props = Symbol[]
+        return Component("''_fefferyshortcutpanel", "FefferyShortcutPanel", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferysplit.jl

@@ -0,0 +1,39 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferysplit
+
+"""
+    ''_fefferysplit(;kwargs...)
+    ''_fefferysplit(children::Any;kwargs...)
+    ''_fefferysplit(children_maker::Function;kwargs...)
+
+
+A FefferySplit component.
+
+Keyword arguments:
+- `children` (optional)
+- `id` (optional)
+- `className` (optional)
+- `cursor` (optional)
+- `defaultSizes` (optional)
+- `direction` (optional)
+- `dragInterval` (optional)
+- `expandToMin` (optional)
+- `gutterSize` (optional)
+- `loading_state` (optional)
+- `maxSize` (optional)
+- `minSize` (optional)
+- `setProps` (optional): Dash-assigned callback that should be called to report property changes
+to Dash, to make them available for callbacks.
+- `sizes` (optional)
+- `style` (optional)
+"""
+function ''_fefferysplit(; kwargs...)
+        available_props = Symbol[:children, :id, :className, :cursor, :defaultSizes, :direction, :dragInterval, :expandToMin, :gutterSize, :loading_state, :maxSize, :minSize, :sizes, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferysplit", "FefferySplit", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+
+''_fefferysplit(children::Any; kwargs...) = ''_fefferysplit(;kwargs..., children = children)
+''_fefferysplit(children_maker::Function; kwargs...) = ''_fefferysplit(children_maker(); kwargs...)
+

package/src/jl/''_fefferysplitpane.jl

@@ -0,0 +1,32 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferysplitpane
+
+"""
+    ''_fefferysplitpane(;kwargs...)
+    ''_fefferysplitpane(children::Any;kwargs...)
+    ''_fefferysplitpane(children_maker::Function;kwargs...)
+
+
+A FefferySplitPane component.
+
+Keyword arguments:
+- `children` (a list of or a singular dash component, string or number; optional)
+- `id` (String; optional)
+- `className` (String; 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
+- `style` (Dict; optional)
+"""
+function ''_fefferysplitpane(; kwargs...)
+        available_props = Symbol[:children, :id, :className, :loading_state, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferysplitpane", "FefferySplitPane", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+
+''_fefferysplitpane(children::Any; kwargs...) = ''_fefferysplitpane(;kwargs..., children = children)
+''_fefferysplitpane(children_maker::Function; kwargs...) = ''_fefferysplitpane(children_maker(); kwargs...)
+

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

@@ -0,0 +1,47 @@
+import { Component } from 'react';
+
+
+// 定义js直接执行部件FefferyExecuteJs
+export default class FefferyExecuteJs extends Component {
+    render() {
+        // 取得必要属性或参数
+        const {
+            jsString
+        } = this.props;
+
+        // 执行原生js程序
+        if (jsString) {
+            eval(jsString)
+        }
+
+        return <></>
+    }
+
+}
+// 定义参数或属性
+FefferyExecuteJs.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 设置要执行的js代码字符串
+    jsString: 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
+    })
+};
+
+// 设置默认参数
+FefferyExecuteJs.defaultProps = {
+}

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import Guide from 'byte-guide'
+import './styles.css'
+
+// 定义引导部件FefferyGuide，api参数参考https://github.com/bytedance/guide/blob/main/README.zh-CN.md
+const FefferyGuide = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        locale,
+        steps,
+        localKey,
+        closable,
+        modalClassName,
+        maskClassName,
+        mask,
+        arrow,
+        hotspot,
+        stepText,
+        nextText,
+        prevText,
+        showPreviousBtn,
+        okText,
+        step,
+        setProps,
+    } = props;
+
+    // 返回向页面注入的快捷键监听
+    return (
+        <Guide id={id}
+            className={className}
+            style={style}
+            lang={locale}
+            steps={steps}
+            localKey={localKey}
+            closable={closable}
+            modalClassName={modalClassName}
+            maskClassName={maskClassName}
+            mask={mask}
+            arrow={arrow}
+            hotspot={hotspot}
+            stepText={typeof stepText === typeof ''
+                ? eval(stepText) : stepText}
+            nextText={nextText}
+            prevText={prevText}
+            showPreviousBtn={showPreviousBtn}
+            okText={okText}
+            step={step} />
+    );
+}
+
+// 定义参数或属性
+FefferyGuide.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 设置语言，可选的有'en'、'zh'
+    locale: PropTypes.oneOf(['zh', 'en']),
+
+    // 必填，用于构造每一步锚定的页面元素
+    steps: PropTypes.arrayOf(
+        PropTypes.exact({
+            // 对应当前步骤锚定的元素对应的css选择器
+            selector: PropTypes.string,
+
+            // 当selector参数缺省时，可用targetPos参数基于绝对位置进行步骤锚定
+            targetPos: PropTypes.exact({
+                // 设置距离顶部的像素距离
+                top: PropTypes.number,
+                // 设置距离左端的像素距离
+                left: PropTypes.number,
+                // 设置锚定范围像素宽度
+                width: PropTypes.number,
+                // 设置锚定范围像素高度
+                height: PropTypes.number
+            }),
+
+            // 设置展示面板的标题内容
+            title: PropTypes.string,
+
+            // 设置展示面板的描述内容
+            content: PropTypes.string,
+
+            // 设置展示面板相对锚点的方位，可选的有'bottom-left'、'left-bottom'、'bottom'，默认为'bottom'
+            placement: PropTypes.oneOf([
+                'bottom-left', 'left-bottom', 'bottom'
+            ]),
+
+            // 设置展示面板的像素偏移量
+            offset: PropTypes.exact({
+                // 水平方向偏移像素距离
+                x: PropTypes.number,
+                // 竖直方向偏移像素距离
+                y: PropTypes.number
+            })
+        })
+    ).isRequired,
+
+    // 用于设置本地缓存唯一标识key，从而辅助应用判断是否已展示过该引导页
+    localKey: PropTypes.string.isRequired,
+
+    // 设置是否允许跳过引导，默认为true
+    closable: PropTypes.bool,
+
+    // 设置展示面板的类名
+    modalClassName: PropTypes.string,
+
+    // 设置蒙版层的类名
+    maskClassName: PropTypes.string,
+
+    // 设置是否展示蒙板层，默认为true
+    mask: PropTypes.bool,
+
+    // 设置展示面板是否添加箭头，默认为true
+    arrow: PropTypes.bool,
+
+    // 设置展示面板是否展示热点，默认为false
+    hotspot: PropTypes.bool,
+
+    // 自定义步骤信息展示内容的回调函数，默认为"(stepIndex, stepCount) => { return '第${stepIndex}步，共${stepCount}步'; }"
+    stepText: PropTypes.string,
+
+    // 设置“下一步”按钮的文案信息
+    nextText: PropTypes.string,
+
+    // 设置“上一步”按钮的文案信息
+    prevText: PropTypes.string,
+
+    // 设置是否显示“上一步”按钮，默认为true
+    showPreviousBtn: PropTypes.bool,
+
+    // 设置确认按钮的文案信息
+    okText: PropTypes.string,
+
+    // 设置初始化时的起始步骤，为-1时则不显示引导组件，默认为0
+    step: 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
+};
+
+// 设置默认参数
+FefferyGuide.defaultProps = {
+    locale: 'zh',
+    showPreviousBtn: true
+}
+
+export default FefferyGuide;

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

@@ -0,0 +1,277 @@
+import React, { useState, useRef, useEffect } from 'react';
+import "ninja-keys";
+import './styles.css'
+
+const footerHtmlEn = <div class="modal-footer" slot="footer">
+    <span class="help">
+        <span className="ninja-examplekey esc">enter</span>
+        to select
+    </span>
+    <span className="help">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ninja-examplekey"
+            viewBox="0 0 24 24"
+        >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+            />
+        </svg>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ninja-examplekey"
+            viewBox="0 0 24 24"
+        >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+        </svg>
+        to navigate
+    </span>
+    <span className="help">
+        <span className="ninja-examplekey esc">esc</span>
+        to close
+    </span>
+    <span className="help">
+        <span className="ninja-examplekey esc">backspace</span>
+        move to parent
+    </span>
+</div>
+
+
+const footerHtmlZh = <div className="modal-footer" slot="footer">
+    <span className="help">
+        <span className="ninja-examplekey esc">enter</span>
+        选择
+    </span>
+    <span className="help">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ninja-examplekey"
+            viewBox="0 0 24 24"
+        >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+            />
+        </svg>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ninja-examplekey"
+            viewBox="0 0 24 24"
+        >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+        </svg>
+        上下切换
+    </span>
+    <span className="help">
+        <span className="ninja-examplekey esc">esc</span>
+        关闭面板
+    </span>
+    <span className="help">
+        <span className="ninja-examplekey esc">backspace</span>
+        回到上一级
+    </span>
+</div>
+
+
+// 定义快捷方式面板部件FefferyShortcutPanel，api参数参考https://github.com/ssleptsov/ninja-keys
+const FefferyShortcutPanel = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        style,
+        data,
+        placeholder,
+        disableHotkeys,
+        openHotkey,
+        theme,
+        locale,
+        setProps,
+    } = 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') ?
+                item : {
+                    ...item,
+                    ...{
+                        handler: () => {
+                            setProps({
+                                triggeredHotkey: item.id + ' ' + Date.parse(new Date()).toString()
+                            })
+                        }
+                    }
+                }
+        }
+    )
+
+    const ninjaKeys = useRef(null);
+    const [hotkeys, setHotkeys] = useState(
+        data.map(
+            item => typeof item.handler === typeof '' ?
+                {
+                    ...item,
+                    ...{
+                        handler: eval(item.handler)
+                    }
+                } : item
+        )
+    );
+
+    useEffect(() => {
+        if (ninjaKeys.current) {
+            ninjaKeys.current.data = hotkeys;
+        }
+    }, []);
+
+    // 返回向页面注入的快捷键监听
+    return (
+        <ninja-keys id={id}
+            class={theme || 'light'}
+            style={style}
+            ref={ninjaKeys}
+            placeholder={placeholder}
+            disableHotkeys={disableHotkeys}
+            openHotkey={openHotkey}
+            hotKeysJoinedView={true}
+            hideBreadcrumbs={true} >
+            {locale === 'en' ? footerHtmlEn : footerHtmlZh}
+        </ ninja-keys>
+    );
+}
+
+// 定义参数或属性
+FefferyShortcutPanel.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 设置语言，可选的有'en'、'zh'
+    locale: PropTypes.oneOf(['en', 'zh']),
+
+    // 用于定义热键节点的数据结构
+    data: PropTypes.arrayOf(
+        PropTypes.exact({
+            // 用于定义当前热键的唯一id，会在顶端热键面包屑中进行显示
+            id: PropTypes.string.isRequired,
+
+            // 用于定义当前热键的标题信息
+            title: PropTypes.string.isRequired,
+
+            // 用于定义当前热键对应的快捷键方式
+            hotkey: PropTypes.string,
+
+            // 用于传入字符型的js函数体源码，作为当前热键被触发时的行为
+            handler: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.func
+            ]),
+
+            // 用于设置当前热键上一层级节点的id信息
+            parent: PropTypes.string,
+
+            // 用于设置当前热键被搜索时对应的关键词
+            keywords: PropTypes.string,
+
+            // 用于设置当前热键节点下一层级对应的节点id信息数组
+            children: PropTypes.arrayOf(PropTypes.string),
+
+            // 用于设置分组标题文字
+            section: PropTypes.string
+        })
+    ),
+
+    // 监听记录最近一次被触发的热键id以及对应触发时间的秒级时间戳信息
+    triggeredHotkey: PropTypes.oneOfType([
+        PropTypes.string
+    ]),
+
+    // 定义输入框提示内容
+    placeholder: PropTypes.string,
+
+    // 设置是否禁用热键，默认为false
+    disableHotkeys: PropTypes.bool,
+
+    // 设置唤出指令面板的快捷键组合，默认为'cmd+k,ctrl+k'
+    openHotkey: PropTypes.string,
+
+    // 设置主题，可选的有'light'、'dark'
+    theme: PropTypes.oneOf(['light', 'dark']),
+
+    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
+};
+
+// 设置默认参数
+FefferyShortcutPanel.defaultProps = {
+    locale: 'zh',
+    theme: 'light'
+}
+
+export default FefferyShortcutPanel;