feffery_utils_components 0.0.9 → 0.0.13

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

@@ -0,0 +1,373 @@
+import {
+    BallSpinner,
+    SwapSpinner,
+    BarsSpinner,
+    GridSpinner,
+    WaveSpinner,
+    PushSpinner,
+    FireworkSpinner,
+    StageSpinner,
+    RingSpinner,
+    HeartSpinner,
+    GuardSpinner,
+    RotateSpinner,
+    SpiralSpinner,
+    PulseSpinner,
+    SwishSpinner,
+    SequenceSpinner,
+    ImpulseSpinner,
+    CubeSpinner,
+    MagicSpinner,
+    FlagSpinner,
+    FillSpinner,
+    SphereSpinner,
+    DominoSpinner,
+    GooSpinner,
+    CombSpinner,
+    PongSpinner,
+    RainbowSpinner,
+    HoopSpinner,
+    FlapperSpinner,
+    JellyfishSpinner,
+    TraceSpinner,
+    ClassicSpinner,
+    WhisperSpinner,
+    MetroSpinner
+} from "react-spinners-kit";
+
+
+// 定义额外加载动画组件FefferyExtraSpinner，api参考https://github.com/dmitrymorozoff/react-spinners-kit
+// 取得必要属性或参数
+const FefferyExtraSpinner = (props) => {
+    // 取得必要属性或参数
+    const {
+        id,
+        style,
+        className,
+        type,
+        size,
+        color,
+        frontColor,
+        backColor,
+        loading_state
+    } = props;
+
+    let spinner;
+
+    if (type === 'ball') {
+        spinner = <BallSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'swap') {
+        spinner = <SwapSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'bars') {
+        spinner = <BarsSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'grid') {
+        spinner = <GridSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'wave') {
+        spinner = <WaveSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'push') {
+        spinner = <PushSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'firework') {
+        spinner = <FireworkSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'stage') {
+        spinner = <StageSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'ring') {
+        spinner = <RingSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'heart') {
+        spinner = <HeartSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'guard') {
+        spinner = <GuardSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'rotate') {
+        spinner = <RotateSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'spiral') {
+        spinner = <SpiralSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'pulse') {
+        spinner = <PulseSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'swish') {
+        spinner = <SwishSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'sequence') {
+        spinner = <SequenceSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'impulse') {
+        spinner = <ImpulseSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'cube') {
+        spinner = <CubeSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'magic') {
+        spinner = <MagicSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'flag') {
+        spinner = <FlagSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'fill') {
+        spinner = <FillSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'sphere') {
+        spinner = <SphereSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'domino') {
+        spinner = <DominoSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'goo') {
+        spinner = <GooSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'comb') {
+        spinner = <CombSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'pong') {
+        spinner = <PongSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'rainbow') {
+        spinner = <RainbowSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'hoop') {
+        spinner = <HoopSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'flapper') {
+        spinner = <FlapperSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'jellyfish') {
+        spinner = <JellyfishSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'trace') {
+        spinner = <TraceSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'classic') {
+        spinner = <ClassicSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'whisper') {
+        spinner = <WhisperSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    } else if (type === 'metro') {
+        spinner = <MetroSpinner
+            size={size || 40}
+            color={color}
+            frontColor={frontColor}
+            backColor={backColor}
+        />;
+    }
+
+    return <div
+        id={id}
+        style={{
+            ...{
+                display: 'flex',
+                justifyContent: 'center'
+            },
+            ...style
+        }}
+        className={className}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        }>
+        {spinner}
+    </div>;
+}
+
+
+// 定义参数或属性
+FefferyExtraSpinner.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    style: PropTypes.object,
+
+    className: PropTypes.string,
+
+    // 加载动画类型
+    type: PropTypes.oneOf([
+        "ball", "swap", "bars", "grid", "wave", "push", "firework",
+        "stage", "ring", "heart", "guard", "rotate", "spiral", "pulse",
+        "swish", "sequence", "impulse", "cube", "magic", "flag", "fill",
+        "sphere", "domino", "goo", "comb", "pong", "rainbow", "hoop",
+        "flapper", "jellyfish", "trace", "classic", "whisper", "metro"
+    ]),
+
+    // 设置尺寸
+    size: PropTypes.number,
+
+    // 设置尺寸值单位，默认为'px'
+    sizeUnit: PropTypes.string,
+
+    // 设置颜色
+    color: PropTypes.string,
+
+    // 设置前景色
+    frontColor: PropTypes.string,
+
+    // 设置背景色
+    backColor: 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
+    })
+};
+
+// 设置默认参数
+FefferyExtraSpinner.defaultProps = {
+    sizeUnit: 'px',
+    type: 'ball',
+    color: '#1890ff',
+    frontColor: '#def6ff',
+    backColor: '#1890ff'
+}
+
+export default FefferyExtraSpinner;

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

@@ -25,6 +25,7 @@ const FefferyGuide = (props) => {
         okText,
         step,
         setProps,
+        loading_state
     } = props;
 
     // 返回向页面注入的快捷键监听
@@ -47,7 +48,10 @@ const FefferyGuide = (props) => {
             prevText={prevText}
             showPreviousBtn={showPreviousBtn}
             okText={okText}
-            step={step} />
+            step={step}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } />
     );
 }
 
@@ -89,9 +93,12 @@ FefferyGuide.propTypes = {
             // 设置展示面板的描述内容
             content: PropTypes.string,
 
-            // 设置展示面板相对锚点的方位，可选的有'bottom-left'、'left-bottom'、'bottom'，默认为'bottom'
+            // 设置展示面板相对锚点的方位，可选的有'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom',
+            // 'right-top', 'right-bottom'，默认为'bottom'
             placement: PropTypes.oneOf([
-                'bottom-left', 'left-bottom', 'bottom'
+                'top', 'bottom', 'left', 'right', 'top-left', 'top-right',
+                'bottom-left', 'bottom-right', 'left-top', 'left-bottom',
+                'right-top', 'right-bottom'
             ]),
 
             // 设置展示面板的像素偏移量
@@ -116,7 +123,7 @@ FefferyGuide.propTypes = {
     // 设置蒙版层的类名
     maskClassName: PropTypes.string,
 
-    // 设置是否展示蒙板层，默认为true
+    // 设置是否展示蒙板层，默认为true 
     mask: PropTypes.bool,
 
     // 设置展示面板是否添加箭头，默认为true

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/FefferyScrollbars.react.js

@@ -0,0 +1,104 @@
+import SimpleBarReact from "simplebar-react";
+import "simplebar/src/simplebar.css";
+
+// 定义自定义滚动条容器组件FefferyScrollbars
+const FefferyScrollbars = (props) => {
+    // 取得必要属性或参数
+    const {
+        id,
+        children,
+        style,
+        className,
+        autoHide,
+        classNames,
+        forceVisible,
+        timeout,
+        scrollbarMinSize,
+        scrollbarMaxSize,
+        loading_state
+    } = props;
+
+    return <SimpleBarReact
+        id={id}
+        style={style}
+        className={className}
+        autoHide={autoHide}
+        classNames={classNames}
+        forceVisible={forceVisible}
+        timeout={timeout}
+        scrollbarMinSize={scrollbarMinSize}
+        scrollbarMaxSize={scrollbarMaxSize}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } >
+        {children}
+    </ SimpleBarReact>;
+}
+
+
+// 定义参数或属性
+FefferyScrollbars.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    children: PropTypes.node,
+
+    style: PropTypes.object,
+
+    className: PropTypes.string,
+
+    // 设置是否在无操作时自动隐藏滚动条，默认为true
+    autoHide: PropTypes.bool,
+
+    // 针对各组成部分单独设置自定义css类名
+    classNames: PropTypes.exact({
+        // 内容区域容器
+        content: PropTypes.string,
+        // 正在滚动的内容容器
+        scrollContent: PropTypes.string,
+        // 滚动条
+        scrollbar: PropTypes.string,
+        // 滚动条滑块
+        track: PropTypes.string
+    }),
+
+    // 设置滑块区域是否强制可见
+    forceVisible: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.oneOf(['x', 'y'])
+    ]),
+
+    // 设置滑块自动隐藏的毫秒数，默认为1000
+    timeout: PropTypes.number,
+
+    // 设置滚动条最小像素长度，默认为25
+    scrollbarMinSize: PropTypes.number,
+
+    // 设置滚动条最大像素长度，默认为0，代表无限制
+    scrollbarMaxSize: 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
+    })
+};
+
+// 设置默认参数
+FefferyScrollbars.defaultProps = {
+    autoHide: true,
+    timeout: 1000,
+    scrollbarMinSize: 25,
+    forceVisible: false
+}
+
+export default FefferyScrollbars;

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>
     );