feffery_antd_components 0.3.15 → 0.4.0-rc5

package/src/lib/components/proEditor/AntdDraggablePanel.react.js

@@ -1,181 +0,0 @@
-import React, { Suspense } from 'react';
-import PropTypes from 'prop-types';
-
-const LazyAntdDraggablePanel = React.lazy(() => import(/* webpackChunkName: "pro_editor" */ '../../fragments/proEditor/AntdDraggablePanel.react'));
-
-/**
- * 可拖拽面板组件AntdDraggablePanel
- */
-const AntdDraggablePanel = (props) => {
-    return (
-        <Suspense fallback={null}>
-            <LazyAntdDraggablePanel {...props} />
-        </Suspense>
-    );
-}
-
-AntdDraggablePanel.propTypes = {
-    /**
-     * 组件唯一id
-     */
-    id: PropTypes.string,
-
-    /**
-     * 对当前组件的`key`值进行更新，可实现强制重绘当前组件的效果
-     */
-    key: PropTypes.string,
-
-    /**
-     * 组件型，内嵌元素
-     */
-    children: PropTypes.node,
-
-    /**
-     * 当前组件css样式
-     */
-    style: PropTypes.object,
-
-    /**
-     * 当前组件css类名，支持[动态css](/advanced-classname)
-     */
-    className: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object
-    ]),
-
-    /**
-     * 设置面板模式，可选项有`'fixed'`（固定模式）、`'float'`（浮动窗口模式）
-     * 默认值：`'fixed'`
-     */
-    mode: PropTypes.oneOf(['fixed', 'float']),
-
-    /**
-     * 设置当前面板默认尺寸
-     */
-    defaultSize: PropTypes.exact({
-        /**
-         * 设置像素宽度数值，或css宽度字符串
-         */
-        width: PropTypes.oneOfType([
-            PropTypes.number,
-            PropTypes.string
-        ]),
-
-        /**
-         * 设置像素高度数值，或css高度字符串
-         */
-        height: PropTypes.oneOfType([
-            PropTypes.number,
-            PropTypes.string
-        ])
-    }),
-
-    /**
-     * 设置当前面板默认位置
-     */
-    defaultPosition: PropTypes.exact({
-        /**
-         * 设置距离文档左端像素距离
-         */
-        x: PropTypes.number,
-
-        /**
-         * 设置距离文档顶端像素距离
-         */
-        y: PropTypes.number
-    }),
-
-    /**
-     * 固定模式下，用于设置面板朝向，可选项有`'right'`、`'left'`、`'top'`、`'bottom'`
-     * 默认值：`'right'`
-     */
-    placement: PropTypes.oneOf(['right', 'left', 'top', 'bottom']),
-
-    /**
-     * 面板最小像素宽度
-     */
-    minWidth: PropTypes.number,
-
-    /**
-     * 面板最小像素高度
-     */
-    minHeight: PropTypes.number,
-
-    /**
-     * 面板最大像素宽度
-     */
-    maxWidth: PropTypes.number,
-
-    /**
-     * 面板最大像素高度
-     */
-    maxHeight: PropTypes.number,
-
-    /**
-     * 配置尺寸可调整性，可独立控制各个方向，也可直接控制所有方向是否可调整尺寸
-     */
-    resize: PropTypes.oneOfType(
-        [
-            PropTypes.bool,
-            PropTypes.exact({
-                bottom: PropTypes.bool,
-                bottomLeft: PropTypes.bool,
-                bottomRight: PropTypes.bool,
-                left: PropTypes.bool,
-                right: PropTypes.bool,
-                top: PropTypes.bool,
-                topLeft: PropTypes.bool,
-                topRight: PropTypes.bool
-            })
-        ]
-    ),
-
-    /**
-     * 面板是否可展开
-     * 默认值：`true`
-     */
-    expandable: PropTypes.bool,
-
-    /**
-     * `data-*`格式属性通配
-     */
-    'data-*': PropTypes.string,
-
-    /**
-     * `aria-*`格式属性通配
-     */
-    'aria-*': 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
-};
-
-// 设置默认参数
-AntdDraggablePanel.defaultProps = {
-    mode: 'fixed',
-    placement: 'right',
-    expandable: true
-}
-
-export default AntdDraggablePanel;
-
-export const propTypes = AntdDraggablePanel.propTypes;
-export const defaultProps = AntdDraggablePanel.defaultProps;

package/src/lib/components/proEditor/AntdEditorLayout.react.js

@@ -1,336 +0,0 @@
-import React, { Suspense } from 'react';
-import PropTypes from 'prop-types';
-
-const LazyAntdEditorLayout = React.lazy(() => import(/* webpackChunkName: "pro_editor" */ '../../fragments/proEditor/AntdEditorLayout.react'));
-
-/**
- * 编辑器布局组件AntdEditorLayout
- */
-const AntdEditorLayout = (props) => {
-    return (
-        <Suspense fallback={null}>
-            <LazyAntdEditorLayout {...props} />
-        </Suspense>
-    );
-}
-
-AntdEditorLayout.propTypes = {
-    /**
-     * 组件唯一id
-     */
-    id: PropTypes.string,
-
-    /**
-     * 对当前组件的`key`值进行更新，可实现强制重绘当前组件的效果
-     */
-    key: PropTypes.string,
-
-    /**
-     * 当前组件css样式
-     */
-    style: PropTypes.object,
-
-    /**
-     * 当前组件css类名，支持[动态css](/advanced-classname)
-     */
-    className: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object
-    ]),
-
-    /**
-     * 配置页首布局内容，设置为`false`时不显示
-     */
-    header: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * 页首标题元素
-             */
-            title: PropTypes.node,
-            /**
-             * 页首额外操作区元素
-             */
-            extra: PropTypes.node,
-            /**
-             * 页首css样式
-             */
-            style: PropTypes.object,
-            /**
-             * 页首css类名
-             */
-            className: PropTypes.string,
-            /**
-             * 页首主要区域子元素
-             */
-            children: PropTypes.node,
-            /**
-             * 页首主题类型，可选的有`'ghost'`、`'block'`、`'pure'`
-             */
-            themeType: PropTypes.oneOf(['ghost', 'block', 'pure'])
-        }),
-        PropTypes.bool
-    ]),
-
-    /**
-     * 配置页脚布局内容，设置为`false`时不显示
-     */
-    footer: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * 页脚标题元素
-             */
-            title: PropTypes.node,
-            /**
-             * 页脚额外操作区元素
-             */
-            extra: PropTypes.node,
-            /**
-             * 页脚css样式
-             */
-            style: PropTypes.object,
-            /**
-             * 页脚css类名
-             */
-            className: PropTypes.string,
-            /**
-             * 页脚主要区域子元素
-             */
-            children: PropTypes.node,
-            /**
-             * 页脚主题类型，可选的有`'ghost'`、`'block'`、`'pure'`
-             */
-            themeType: PropTypes.oneOf(['ghost', 'block', 'pure'])
-        }),
-        PropTypes.bool
-    ]),
-
-    /**
-     * 配置左侧面板布局内容，设置为`false`时不显示
-     */
-    leftPannel: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * 面板子元素内容
-             */
-            children: PropTypes.node,
-            /**
-             * 面板方向，可选的有`'horizontal'`、`'vertical'`
-             */
-            direction: PropTypes.oneOf(['horizontal', 'vertical']),
-            /**
-             * 面板最小像素宽度
-             */
-            minWidth: PropTypes.number,
-            /**
-             * 面板最小像素高度
-             */
-            minHeight: PropTypes.number,
-            /**
-             * 面板最大像素宽度
-             */
-            maxWidth: PropTypes.number,
-            /**
-             * 面板最大像素高度
-             */
-            maxHeight: PropTypes.number,
-            /**
-             * 面板css样式
-             */
-            style: PropTypes.object,
-            /**
-             * 面板css类名
-             */
-            className: PropTypes.string,
-            /**
-             * 面板主题类型，可选的有`'ghost'`、`'block'`、`'pure'`
-             */
-            themeType: PropTypes.oneOf(['ghost', 'block', 'pure'])
-        }),
-        PropTypes.bool
-    ]),
-
-    /**
-     * 配置右侧面板布局内容，设置为`false`时不显示
-     */
-    rightPannel: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * 面板子元素内容
-             */
-            children: PropTypes.node,
-            /**
-             * 面板方向，可选的有`'horizontal'`、`'vertical'`
-             */
-            direction: PropTypes.oneOf(['horizontal', 'vertical']),
-            /**
-             * 面板最小像素宽度
-             */
-            minWidth: PropTypes.number,
-            /**
-             * 面板最小像素高度
-             */
-            minHeight: PropTypes.number,
-            /**
-             * 面板最大像素宽度
-             */
-            maxWidth: PropTypes.number,
-            /**
-             * 面板最大像素高度
-             */
-            maxHeight: PropTypes.number,
-            /**
-             * 面板css样式
-             */
-            style: PropTypes.object,
-            /**
-             * 面板css类名
-             */
-            className: PropTypes.string,
-            /**
-             * 面板主题类型，可选的有`'ghost'`、`'block'`、`'pure'`
-             */
-            themeType: PropTypes.oneOf(['ghost', 'block', 'pure'])
-        }),
-        PropTypes.bool
-    ]),
-
-    /**
-     * 配置底部面板布局内容，设置为`false`时不显示
-     */
-    bottomPannel: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * 面板子元素内容
-             */
-            children: PropTypes.node,
-            /**
-             * 面板方向，可选的有`'horizontal'`、`'vertical'`
-             */
-            direction: PropTypes.oneOf(['horizontal', 'vertical']),
-            /**
-             * 面板最小像素宽度
-             */
-            minWidth: PropTypes.number,
-            /**
-             * 面板最小像素高度
-             */
-            minHeight: PropTypes.number,
-            /**
-             * 面板最大像素宽度
-             */
-            maxWidth: PropTypes.number,
-            /**
-             * 面板最大像素高度
-             */
-            maxHeight: PropTypes.number,
-            /**
-             * 面板css样式
-             */
-            style: PropTypes.object,
-            /**
-             * 面板css类名
-             */
-            className: PropTypes.string,
-            /**
-             * 面板主题类型，可选的有`'ghost'`、`'block'`、`'pure'`
-             */
-            themeType: PropTypes.oneOf(['ghost', 'block', 'pure'])
-        }),
-        PropTypes.bool
-    ]),
-
-    /**
-     * 配置中心面板布局内容，设置为`false`时不显示
-     */
-    centerPannel: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * 面板子元素内容
-             */
-            children: PropTypes.node,
-            /**
-             * 面板方向，可选的有`'horizontal'`、`'vertical'`
-             */
-            direction: PropTypes.oneOf(['horizontal', 'vertical']),
-            /**
-             * 面板最小像素宽度
-             */
-            minWidth: PropTypes.number,
-            /**
-             * 面板最小像素高度
-             */
-            minHeight: PropTypes.number,
-            /**
-             * 面板最大像素宽度
-             */
-            maxWidth: PropTypes.number,
-            /**
-             * 面板最大像素高度
-             */
-            maxHeight: PropTypes.number,
-            /**
-             * 面板css样式
-             */
-            style: PropTypes.object,
-            /**
-             * 面板css类名
-             */
-            className: PropTypes.string,
-            /**
-             * 面板主题类型，可选的有`'ghost'`、`'block'`、`'pure'`
-             */
-            themeType: PropTypes.oneOf(['ghost', 'block', 'pure'])
-        }),
-        PropTypes.bool
-    ]),
-
-    /**
-     * 布局类型，可选的有`'Left&Right'`、`'LeftFull'`、`'RightFull'`、`'Bottom'`
-     */
-    type: PropTypes.oneOf(['Left&Right', 'LeftFull', 'RightFull', 'Bottom']),
-
-    /**
-     * 整体主题类型，可选的有`'ghost'`、`'block'`、`'pure'`
-     */
-    themeType: PropTypes.oneOf(['ghost', 'block', 'pure']),
-
-    /**
-     * `data-*`格式属性通配
-     */
-    'data-*': PropTypes.string,
-
-    /**
-     * `aria-*`格式属性通配
-     */
-    'aria-*': 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
-};
-
-// 设置默认参数
-AntdEditorLayout.defaultProps = {
-}
-
-export default AntdEditorLayout;
-
-export const propTypes = AntdEditorLayout.propTypes;
-export const defaultProps = AntdEditorLayout.defaultProps;

package/src/lib/fragments/proEditor/AntdDraggablePanel.react.js

@@ -1,70 +0,0 @@
-// react核心
-import React from 'react';
-// antd核心
-import { DraggablePanel } from '@ant-design/pro-editor';
-// 辅助库
-import { isString } from 'lodash';
-import { pickBy } from 'ramda';
-// 自定义hooks
-import useCss from '../../hooks/useCss';
-// 参数类型
-import { propTypes, defaultProps } from '../../components/proEditor/AntdDraggablePanel.react';
-
-/**
- * 可拖拽面板组件AntdDraggablePanel
- */
-const AntdDraggablePanel = (props) => {
-    let {
-        id,
-        children,
-        style,
-        className,
-        key,
-        mode,
-        defaultSize,
-        defaultPosition,
-        placement,
-        minWidth,
-        minHeight,
-        maxWidth,
-        maxHeight,
-        resize,
-        expandable,
-        setProps,
-        loading_state
-    } = props;
-
-    return (
-        <DraggablePanel
-            // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
-            id={id}
-            className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
-            }
-            style={style}
-            key={key}
-            mode={mode}
-            defaultSize={defaultSize}
-            defaultPosition={defaultPosition}
-            placement={placement}
-            minWidth={minWidth}
-            minHeight={minHeight}
-            maxWidth={maxWidth}
-            maxHeight={maxHeight}
-            resize={resize}
-            expandable={expandable}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            } >
-            {children}
-        </DraggablePanel>
-    );
-}
-
-export default AntdDraggablePanel;
-
-AntdDraggablePanel.defaultProps = defaultProps;
-AntdDraggablePanel.propTypes = propTypes;

package/src/lib/fragments/proEditor/AntdEditorLayout.react.js

@@ -1,79 +0,0 @@
-// react核心
-import React from 'react';
-// 辅助库
-import { isString, isBoolean } from 'lodash';
-import { pickBy } from 'ramda';
-// antd核心
-import { EditorLayout } from '@ant-design/pro-editor';
-// 自定义hooks
-import useCss from '../../hooks/useCss';
-// 自定义上下文
-import { propTypes, defaultProps } from '../../components/proEditor/AntdEditorLayout.react';
-
-/**
- * 编辑器布局组件AntdEditorLayout
- */
-const AntdEditorLayout = (props) => {
-    let {
-        id,
-        style,
-        className,
-        header,
-        footer,
-        leftPannel,
-        rightPannel,
-        bottomPannel,
-        centerPannel,
-        type,
-        themeType,
-        setProps,
-        loading_state
-    } = props;
-
-    return (
-        <EditorLayout
-            // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), props)}
-            id={id}
-            className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
-            }
-            style={style}
-            header={
-                (isBoolean(header) && !header) ?
-                    header :
-                    {
-                        ...header,
-                        iconConfig: {
-                            title: header?.title || ''
-                        }
-                    }
-            }
-            footer={
-                (isBoolean(footer) && !footer) ?
-                    footer :
-                    {
-                        ...footer,
-                        iconConfig: {
-                            title: footer?.title || ''
-                        }
-                    }
-            }
-            leftPannel={leftPannel}
-            rightPannel={rightPannel}
-            bottomPannel={bottomPannel}
-            centerPannel={centerPannel}
-            type={type}
-            themeType={themeType}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            } />
-    );
-}
-
-export default AntdEditorLayout;
-
-AntdEditorLayout.defaultProps = defaultProps;
-AntdEditorLayout.propTypes = propTypes;