feffery_antd_components 0.4.4 → 0.4.5

package/src/lib/fragments/dataDisplay/AntdRibbon.react.js

@@ -9,13 +9,16 @@ import { useLoading } from '../../components/utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataDisplay/AntdRibbon.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataDisplay/AntdRibbon.react';
 
 /**
  * 缎带组件AntdRibbon
  */
 const AntdRibbon = (props) => {
-    let {
+    const {
         id,
         children,
         className,
@@ -31,12 +34,17 @@ const AntdRibbon = (props) => {
     return (
         <Badge.Ribbon
             // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+            {...pickBy(
+                (_, k) => k.startsWith('data-') || k.startsWith('aria-'),
+                others
+            )}
             id={id}
             className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
+                isString(className)
+                    ? className
+                    : className
+                      ? useCss(className)
+                      : undefined
             }
             style={style}
             key={key}
@@ -44,11 +52,13 @@ const AntdRibbon = (props) => {
             placement={placement}
             text={text}
             data-dash-is-loading={useLoading()}
-        >{children}</Badge.Ribbon>
+        >
+            {children}
+        </Badge.Ribbon>
     );
-}
+};
 
 export default AntdRibbon;
 
 AntdRibbon.defaultProps = defaultProps;
-AntdRibbon.propTypes = propTypes;
+AntdRibbon.propTypes = propTypes;

package/src/lib/fragments/dataDisplay/AntdSegmented.react.js

@@ -2,7 +2,7 @@
 import React, { useEffect, useContext } from 'react';
 // antd核心
 import { Segmented } from 'antd';
-import AntdIcon from "../../components/general/AntdIcon.react";
+import AntdIcon from '../../components/general/AntdIcon.react';
 // 辅助库
 import { isString, isUndefined, isNumber } from 'lodash';
 import { pickBy } from 'ramda';
@@ -12,7 +12,10 @@ import useCss from '../../hooks/useCss';
 // 上下文
 import PropsContext from '../../contexts/PropsContext';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataDisplay/AntdSegmented.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataDisplay/AntdSegmented.react';
 
 /**
  * 分段控制器组件AntdSegmented
@@ -42,66 +45,66 @@ const AntdSegmented = (props) => {
     // 批属性监听
     useEffect(() => {
         if (batchPropsNames && batchPropsNames.length !== 0) {
-            let _batchPropsValues = {};
-            for (let propName of batchPropsNames) {
+            const _batchPropsValues = {};
+            for (const propName of batchPropsNames) {
                 _batchPropsValues[propName] = props[propName];
             }
             setProps({
-                batchPropsValues: _batchPropsValues
-            })
+                batchPropsValues: _batchPropsValues,
+            });
         }
-    })
+    });
 
-    const context = useContext(PropsContext)
+    const context = useContext(PropsContext);
 
-    options = options || []
+    options = options || [];
 
     useEffect(() => {
         if (defaultValue && !value) {
             // 当defaultValue不为空时，为value初始化defaultValue对应的value值
-            setProps({ value: defaultValue })
+            setProps({ value: defaultValue });
         }
-    }, [])
+    }, []);
 
     const onSelect = (v) => {
-        setProps({ value: v })
-    }
+        setProps({ value: v });
+    };
 
     return (
         <Segmented
             // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+            {...pickBy(
+                (_, k) => k.startsWith('data-') || k.startsWith('aria-'),
+                others
+            )}
             id={id}
             className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
+                isString(className)
+                    ? className
+                    : className
+                      ? useCss(className)
+                      : undefined
             }
             style={style}
             key={key}
             options={
-                options.every(item => isNumber(item) || isString(item)) ?
-                    // 快捷方式
-                    options.map(item => ({ label: item, value: item })) :
-                    options.map(item => {
-                        return {
-                            ...item,
-                            icon: item.icon && (
-                                item.iconRenderer === 'fontawesome' ?
-                                    (
-                                        React.createElement(
-                                            'i',
-                                            {
-                                                className: item.icon
-                                            }
-                                        )
-                                    ) :
-                                    (
-                                        <AntdIcon icon={item.icon} />
-                                    )
-                            )
-                        }
-                    })
+                options.every((item) => isNumber(item) || isString(item))
+                    ? // 快捷方式
+                      options.map((item) => ({ label: item, value: item }))
+                    : options.map((item) => {
+                          return {
+                              ...item,
+                              icon:
+                                  item.icon &&
+                                  (item.iconRenderer === 'fontawesome' ? (
+                                      React.createElement('i', {
+                                          className: item.icon,
+                                      })
+                                  ) : (
+                                      <AntdIcon icon={item.icon} />
+                                  )),
+                          };
+                      })
             }
             defaultValue={defaultValue}
             value={value}
@@ -109,22 +112,22 @@ const AntdSegmented = (props) => {
             shape={shape}
             vertical={vertical}
             disabled={
-                context && !isUndefined(context.componentDisabled) ?
-                    context.componentDisabled :
-                    disabled
+                context && !isUndefined(context.componentDisabled)
+                    ? context.componentDisabled
+                    : disabled
             }
             size={
-                context && !isUndefined(context.componentSize) ?
-                    context.componentSize :
-                    size
+                context && !isUndefined(context.componentSize)
+                    ? context.componentSize
+                    : size
             }
             onChange={onSelect}
             data-dash-is-loading={useLoading()}
         />
     );
-}
+};
 
 export default AntdSegmented;
 
 AntdSegmented.defaultProps = defaultProps;
-AntdSegmented.propTypes = propTypes;
+AntdSegmented.propTypes = propTypes;

package/src/lib/fragments/dataDisplay/AntdSpoiler.react.js

@@ -11,7 +11,10 @@ import { useLoading } from '../../components/utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataDisplay/AntdSpoiler.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataDisplay/AntdSpoiler.react';
 
 const { Link } = Typography;
 
@@ -19,7 +22,7 @@ const { Link } = Typography;
  * 展开收起组件AntdSpoiler
  */
 const AntdSpoiler = (props) => {
-    let {
+    const {
         id,
         children,
         className,
@@ -44,54 +47,64 @@ const AntdSpoiler = (props) => {
     return (
         <div
             // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+            {...pickBy(
+                (_, k) => k.startsWith('data-') || k.startsWith('aria-'),
+                others
+            )}
             id={id}
             key={key}
             className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
+                isString(className)
+                    ? className
+                    : className
+                      ? useCss(className)
+                      : undefined
             }
             style={style}
-            data-dash-is-loading={useLoading()}>
+            data-dash-is-loading={useLoading()}
+        >
             <div
                 className={
-                    isString(contentClassName) ?
-                        contentClassName :
-                        (contentClassName ? useCss(contentClassName) : undefined)
+                    isString(contentClassName)
+                        ? contentClassName
+                        : contentClassName
+                          ? useCss(contentClassName)
+                          : undefined
                 }
-                style={
-                    {
-                        transitionTimingFunction: 'ease',
-                        ...contentStyle,
-                        maxHeight: open ? (size && size.height) : maxHeight,
-                        transitionDuration: `${transitionDuration}s`,
-                        transitionProperty: 'max-height',
-                        overflow: 'hidden'
-                    }
-                }>
-                <div ref={ref}>
-                    {children}
-                </div>
+                style={{
+                    transitionTimingFunction: 'ease',
+                    ...contentStyle,
+                    maxHeight: open ? size && size.height : maxHeight,
+                    transitionDuration: `${transitionDuration}s`,
+                    transitionProperty: 'max-height',
+                    overflow: 'hidden',
+                }}
+            >
+                <div ref={ref}>{children}</div>
             </div>
-            <div style={{
-                textAlign: labelPosition
-            }}>
-                <Link onClick={() => {
-                    setProps({
-                        open: !open
-                    })
-                }}>
-                    {
-                        open ? hideLabel || locale2text.AntdSpoiler[locale].hideLabel : showLabel || locale2text.AntdSpoiler[locale].showLabel
-                    }
+            <div
+                style={{
+                    textAlign: labelPosition,
+                }}
+            >
+                <Link
+                    onClick={() => {
+                        setProps({
+                            open: !open,
+                        });
+                    }}
+                >
+                    {open
+                        ? hideLabel || locale2text.AntdSpoiler[locale].hideLabel
+                        : showLabel ||
+                          locale2text.AntdSpoiler[locale].showLabel}
                 </Link>
             </div>
         </div>
     );
-}
+};
 
 export default AntdSpoiler;
 
 AntdSpoiler.defaultProps = defaultProps;
-AntdSpoiler.propTypes = propTypes;
+AntdSpoiler.propTypes = propTypes;

package/src/lib/fragments/dataDisplay/AntdTabs.react.js

@@ -10,7 +10,10 @@ import { useLoading } from '../../components/utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataDisplay/AntdTabs.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataDisplay/AntdTabs.react';
 
 /**
  * 标签页组件AntdTabs
@@ -50,118 +53,127 @@ const AntdTabs = (props) => {
         // 初始化value
         if (defaultActiveKey && !activeKey) {
             // 当defaultValue不为空时，为value初始化defaultValue对应的value值
-            setProps({ activeKey: defaultActiveKey })
+            setProps({ activeKey: defaultActiveKey });
         }
-    }, [])
+    }, []);
 
     useEffect(() => {
         // 更新最新的标签页数量
         setProps({
-            tabCount: (items || []).length
-        })
-    }, [items])
+            tabCount: (items || []).length,
+        });
+    }, [items]);
 
     useEffect(() => {
         // 同步当前items子项key值数组
         setProps({
-            itemKeys: (items || []).map(item => item.key)
-        })
-    }, [items])
+            itemKeys: (items || []).map((item) => item.key),
+        });
+    }, [items]);
 
-    const onChange = e => {
-        setProps({ activeKey: e })
-    }
+    const onChange = (e) => {
+        setProps({ activeKey: e });
+    };
 
     const onEdit = (targetKey, action) => {
-        setProps({ latestDeletePane: targetKey, tabCloseCounts: tabCloseCounts + 1 })
-    }
+        setProps({
+            latestDeletePane: targetKey,
+            tabCloseCounts: tabCloseCounts + 1,
+        });
+    };
 
     // 根据disabledTabKeys进行指定标签页的禁用
     if (disabledTabKeys) {
-        items = (items || []).map(
-            item => {
-                // 处理批量标签页禁用
-                if (disabledTabKeys.includes(item.key)) {
-                    item = {
-                        ...item,
-                        disabled: true
-                    }
-                }
-                return item;
+        items = (items || []).map((item) => {
+            // 处理批量标签页禁用
+            if (disabledTabKeys.includes(item.key)) {
+                item = {
+                    ...item,
+                    disabled: true,
+                };
             }
-        )
+            return item;
+        });
     }
 
     return (
         <>
             <Tabs
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+                {...pickBy(
+                    (_, k) => k.startsWith('data-') || k.startsWith('aria-'),
+                    others
+                )}
                 id={id}
                 className={
-                    isString(className) ?
-                        className :
-                        (className ? useCss(className) : undefined)
+                    isString(className)
+                        ? className
+                        : className
+                          ? useCss(className)
+                          : undefined
                 }
                 style={
                     // 子项为空且无额外内容时
-                    ((!items || items.length === 0) && !(tabBarLeftExtraContent || tabBarRightExtraContent)) ?
-                        { ...style, display: 'none' } :
-                        style
+                    (!items || items.length === 0) &&
+                    !(tabBarLeftExtraContent || tabBarRightExtraContent)
+                        ? { ...style, display: 'none' }
+                        : style
                 }
                 key={key}
                 items={
                     // 处理标签页标题右键菜单功能
-                    (items || []).map(
-                        item => {
-                            if (item.contextMenu) {
-                                item.label = <Dropdown
+                    (items || []).map((item) => {
+                        if (item.contextMenu) {
+                            item.label = (
+                                <Dropdown
                                     menu={{
                                         items: item.contextMenu.map(
-                                            itemProps => {
+                                            (itemProps) => {
                                                 return {
                                                     ...itemProps,
-                                                    icon: itemProps.icon && (
-                                                        itemProps.iconRenderer === 'fontawesome' ?
-                                                            (
-                                                                React.createElement(
-                                                                    'i',
-                                                                    {
-                                                                        className: itemProps.icon
-                                                                    }
-                                                                )
-                                                            ) :
-                                                            (
-                                                                <AntdIcon icon={itemProps.icon} />
+                                                    icon:
+                                                        itemProps.icon &&
+                                                        (itemProps.iconRenderer ===
+                                                        'fontawesome' ? (
+                                                            React.createElement(
+                                                                'i',
+                                                                {
+                                                                    className:
+                                                                        itemProps.icon,
+                                                                }
                                                             )
-                                                    )
-                                                }
+                                                        ) : (
+                                                            <AntdIcon
+                                                                icon={
+                                                                    itemProps.icon
+                                                                }
+                                                            />
+                                                        )),
+                                                };
                                             }
                                         ),
                                         // 右键菜单事件监听
                                         onClick: (e) => {
                                             // 阻止事件蔓延
-                                            e.domEvent.stopPropagation()
+                                            e.domEvent.stopPropagation();
                                             // 更新相关事件信息
                                             setProps({
                                                 clickedContextMenu: {
                                                     tabKey: item.key,
                                                     menuKey: e.key,
-                                                    timestamp: Date.now()
-                                                }
-                                            })
-                                        }
+                                                    timestamp: Date.now(),
+                                                },
+                                            });
+                                        },
                                     }}
                                     trigger={['contextMenu']}
                                 >
-                                    <div >
-                                        {item.label}
-                                    </div>
+                                    <div>{item.label}</div>
                                 </Dropdown>
-                            }
-                            return item;
+                            );
                         }
-                    )
+                        return item;
+                    })
                 }
                 defaultActiveKey={defaultActiveKey}
                 activeKey={activeKey}
@@ -179,34 +191,33 @@ const AntdTabs = (props) => {
                         }
                         return origin;
                     },
-                    align: indicator?.align
+                    align: indicator?.align,
                 }}
                 tabBarGutter={tabBarGutter}
                 tabBarStyle={tabBarStyle}
                 tabBarExtraContent={{
                     left: tabBarLeftExtraContent,
-                    right: tabBarRightExtraContent
+                    right: tabBarRightExtraContent,
                 }}
                 animated={{
                     inkBar: inkBarAnimated,
-                    tabPane: tabPaneAnimated
+                    tabPane: tabPaneAnimated,
                 }}
                 destroyOnHidden={destroyInactiveTabPane}
                 hideAdd={true}
                 onChange={onChange}
                 onEdit={onEdit}
-                data-dash-is-loading={useLoading()} />
+                data-dash-is-loading={useLoading()}
+            />
             {
                 // 子项为空时
-                (!items || items.length === 0) ?
-                    placeholder :
-                    null
+                !items || items.length === 0 ? placeholder : null
             }
         </>
     );
-}
+};
 
 export default AntdTabs;
 
 AntdTabs.defaultProps = defaultProps;
-AntdTabs.propTypes = propTypes;
+AntdTabs.propTypes = propTypes;

package/src/lib/fragments/dataDisplay/AntdTag.react.js

@@ -9,13 +9,16 @@ import { useLoading } from '../../components/utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataDisplay/AntdTag.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataDisplay/AntdTag.react';
 
 /**
  * 标签组件AntdTag
  */
 const AntdTag = (props) => {
-    let {
+    const {
         id,
         className,
         style,
@@ -35,13 +38,18 @@ const AntdTag = (props) => {
     return (
         <Tag
             // 提取具有data-*或aria-*通配格式的属性
-            {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+            {...pickBy(
+                (_, k) => k.startsWith('data-') || k.startsWith('aria-'),
+                others
+            )}
             id={id}
             key={key}
             className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
+                isString(className)
+                    ? className
+                    : className
+                      ? useCss(className)
+                      : undefined
             }
             style={style}
             icon={icon}
@@ -52,16 +60,23 @@ const AntdTag = (props) => {
                 // 阻止默认关闭事件
                 e.preventDefault();
                 setProps({
-                    closeCounts: closeCounts + 1
-                })
+                    closeCounts: closeCounts + 1,
+                });
             }}
-            data-dash-is-loading={useLoading()}>
-            {href ? <a href={href} target={target}>{content}</a> : content}
+            data-dash-is-loading={useLoading()}
+        >
+            {href ? (
+                <a href={href} target={target}>
+                    {content}
+                </a>
+            ) : (
+                content
+            )}
         </Tag>
     );
-}
+};
 
 export default AntdTag;
 
 AntdTag.defaultProps = defaultProps;
-AntdTag.propTypes = propTypes;
+AntdTag.propTypes = propTypes;