feffery_utils_components 0.0.7 → 0.0.8

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,45 @@
+
+// 定义js直接执行部件FefferyExecuteJs
+const FefferyExecuteJs = (props) => {
+    // 取得必要属性或参数
+    const {
+        jsString
+    } = 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 = {
+}
+
+export default FefferyExecuteJs;

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

@@ -39,7 +39,7 @@ const footerHtmlEn = <div class="modal-footer" slot="footer">
 </div>
 
 
-const footerHtmlCn = <div className="modal-footer" slot="footer">
+const footerHtmlZh = <div className="modal-footer" slot="footer">
     <span className="help">
         <span className="ninja-examplekey esc">enter</span>
         选择
@@ -86,7 +86,6 @@ const FefferyShortcutPanel = (props) => {
         placeholder,
         disableHotkeys,
         openHotkey,
-        hotKeysJoinedView,
         theme,
         locale,
         setProps,
@@ -182,7 +181,7 @@ const FefferyShortcutPanel = (props) => {
             openHotkey={openHotkey}
             hotKeysJoinedView={true}
             hideBreadcrumbs={true} >
-            {locale === 'en' ? footerHtmlEn : footerHtmlCn}
+            {locale === 'en' ? footerHtmlEn : footerHtmlZh}
         </ ninja-keys>
     );
 }
@@ -192,14 +191,11 @@ FefferyShortcutPanel.propTypes = {
     // 部件id
     id: PropTypes.string,
 
-    // css类名
-    className: PropTypes.string,
-
     // 自定义css字典
     style: PropTypes.object,
 
-    // 设置语言，可选的有'en'、'cn'
-    locale: PropTypes.oneOf(['en', 'cn']),
+    // 设置语言，可选的有'en'、'zh'
+    locale: PropTypes.oneOf(['en', 'zh']),
 
     // 用于定义热键节点的数据结构
     data: PropTypes.arrayOf(
@@ -274,7 +270,7 @@ FefferyShortcutPanel.propTypes = {
 
 // 设置默认参数
 FefferyShortcutPanel.defaultProps = {
-    locale: 'cn',
+    locale: 'zh',
     theme: 'light'
 }
 

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

@@ -0,0 +1,199 @@
+import React, { Component } from 'react';
+import Split from 'react-split'
+import { isNil, omit } from 'ramda';
+import '../styles.css'
+
+const parseChildrenToArray = children => {
+    if (children && !Array.isArray(children)) {
+        return [children];
+    }
+    return children;
+};
+
+
+const resolveChildProps = child => {
+    // This may need to change in the future if https://github.com/plotly/dash-renderer/issues/84 is addressed
+    if (
+        // disabled is a defaultProp (so it's always set)
+        // meaning that if it's not set on child.props, the actual
+        // props we want are lying a bit deeper - which means they
+        // are coming from Dash
+        isNil(child.props.disabled) &&
+        child.props._dashprivate_layout &&
+        child.props._dashprivate_layout.props
+    ) {
+        // props are coming from Dash
+        return child.props._dashprivate_layout.props;
+    } else {
+        // else props are coming from React (e.g. Demo.js, or Tabs.test.js)
+        return child.props;
+    }
+};
+
+// 定义分割面板组件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 {
+            children,
+            id,
+            className,
+            style,
+            sizes,
+            defaultSizes,
+            minSize,
+            maxSize,
+            expandToMin,
+            gutterSize,
+            dragInterval,
+            direction,
+            cursor,
+            setProps,
+            loading_state
+        } = this.props;
+
+        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>
+                );
+            }
+        )
+
+        // 返回向页面注入的快捷键监听
+        return (
+            <Split id={id}
+                className={className ? `feffery-split-${direction}` + ' ' + className : `feffery-split-${direction}`}
+                style={style}
+                sizes={defaultSizes}
+                minSize={minSize}
+                maxSize={maxSize}
+                expandToMin={expandToMin}
+                gutterSize={gutterSize}
+                snapOffset={1}
+                dragInterval={dragInterval}
+                direction={direction}
+                cursor={cursor}
+                onDragEnd={(e) => {
+                    setProps({ sizes: e })
+                }}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+            >
+                {splitPanes}
+            </Split>
+        );
+    }
+}
+
+// 定义参数或属性
+FefferySplit.propTypes = {
+
+    children: PropTypes.node,
+
+    // 部件id
+    id: PropTypes.string,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 以数组的形式，分别为每个子元素盒子设置百分比尺寸
+    defaultSizes: PropTypes.arrayOf(PropTypes.number),
+
+    // 记录当前最新的sizes变动情况，分别为每个子元素盒子设置百分比尺寸
+    sizes: PropTypes.arrayOf(PropTypes.number),
+
+    // 设置每个子元素盒子的最小像素尺寸，默认为100
+    minSize: PropTypes.oneOfType([
+        // 统一设置最小尺寸
+        PropTypes.number,
+        // 逐一设置最小尺寸
+        PropTypes.arrayOf(PropTypes.number)
+    ]),
+
+    // 设置每个子元素盒子的最大像素尺寸，默认为Infinity即无限制
+    maxSize: PropTypes.oneOfType([
+        // 统一设置最大尺寸
+        PropTypes.number,
+        // 逐一设置最大尺寸
+        PropTypes.arrayOf(PropTypes.number)
+    ]),
+
+    // 设置当有子元素盒子的初始宽度小于设定的minSize时，是否自动调整到minSize，默认为false
+    expandToMin: PropTypes.bool,
+
+    // 设置间隙像素尺寸，默认为10
+    gutterSize: PropTypes.number,
+
+    // 设置拖拽行为的像素移动步长，默认为1
+    dragInterval: PropTypes.number,
+
+    // 设置分割方向，可选的有'horizontal'、'vertical'
+    direction: PropTypes.oneOf(['horizontal', 'vertical']),
+
+    // 设置拖拽分隔条时的鼠标指针，当direction='horizontal'时默认为'col-resize'
+    // 当direction='vertical'时默认为'row-resize'
+    cursor: 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
+    }),
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func
+};
+
+// 设置默认参数
+FefferySplit.defaultProps = {
+    direction: 'horizontal'
+}

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

@@ -35,7 +35,6 @@
     padding: 0.06em 0.25em;
     border-radius: var(--ninja-key-border-radius);
     color: var(--ninja-secondary-text-color);
-    /* width: 1em; */
     height: 1em;
     margin-right: 0.5em;
     font-size: 1.25em;
@@ -50,4 +49,35 @@
 
 .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

@@ -5,6 +5,10 @@ import FefferySyntaxHighlighter from "./components/FefferySyntaxHighlighter.reac
 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 {
@@ -13,5 +17,9 @@ export {
     FefferySyntaxHighlighter,
     FefferyPasteImage,
     FefferyTopProgress,
-    FefferyShortcutPanel
+    FefferyShortcutPanel,
+    FefferyGuide,
+    FefferySplit,
+    FefferySplitPane,
+    FefferyExecuteJs
 };