feat(ActionBar): 新增 placeholder 属性 (#62)

* feat(ActionBar): 增加 placeholder 属性

* feat: 将renderPlaceholder抽象为hook

Author: windole

packages/rc-ui-lib/src/action-bar/ActionBar.tsx

@@ -1,38 +1,45 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import { ActionBarProps } from './PropsType';
 import ActionBarContext from './ActionBarContext';
 import ConfigProviderContext from '../config-provider/ConfigProviderContext';
+import { usePlaceholder } from '../hooks/use-placeholder';
 
 const ActionBar: React.FC<ActionBarProps> = (props) => {
   const { prefixCls, createNamespace } = useContext(ConfigProviderContext);
   const [bem] = createNamespace('action-bar', prefixCls);
+  const root = useRef<HTMLDivElement>(null);
 
   const children = useMemo(() => React.Children.toArray(props.children), [props.children]);
 
-  return (
+  const renderPlaceholder = usePlaceholder(root, bem);
+
+  const renderActionBar = () => (
     <ActionBarContext.Provider value={{ parent: { children } }}>
       <div
+        ref={root}
         className={classnames(props.className, bem(), {
           'rc-safe-area-bottom': props.safeAreaInsetBottom,
         })}
         style={props.style}
       >
         {React.Children.toArray(props.children)
           .filter(Boolean)
-          .map((child: React.ReactFragment, index: number) => {
-            // @ts-ignore
+          .map((child: React.ReactElement, index: number) => {
             return React.cloneElement(child, {
               index,
             });
           })}
       </div>
     </ActionBarContext.Provider>
   );
+
+  return props.placeholder ? renderPlaceholder(renderActionBar) : renderActionBar();
 };
 
 ActionBar.defaultProps = {
   safeAreaInsetBottom: true,
+  placeholder: false,
 };
 
 export default ActionBar;

packages/rc-ui-lib/src/action-bar/PropsType.ts

@@ -6,6 +6,8 @@ import { BaseTypeProps } from '../utils';
 export interface ActionBarProps extends BaseTypeProps {
   /** 是否开启底部安全区适配	 */
   safeAreaInsetBottom?: boolean;
+  /** 是否在标签位置生成一个等高的占位元素  */
+  placeholder?: boolean;
   /** 自元素 */
   children?: React.ReactNode;
 }

packages/rc-ui-lib/src/action-bar/README.md

@@ -78,6 +78,7 @@ export default () => {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | safeAreaInsetBottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
+| placeholder | 是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
 
 ### ActionBarIcon Props
 
@@ -87,7 +88,7 @@ export default () => {
 | icon | 图标 | _string\|ReactNode_ | - |
 | color | 图标颜色 | _string_ | `#323233` |
 | iconClass | 图标额外类名 | _string_ | - |
-| icoPrefix | 图标类名前缀，等同于 Icon 组件的 [classPrefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
+| iconPrefix | 图标类名前缀，等同于 Icon 组件的 [classPrefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | badge | 图标右上角徽标设置 | _BadgeProps_ | - |
 | onClick | 点击事件 | _(event) => void_ | - |
 
@@ -96,7 +97,7 @@ export default () => {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | text | 按钮文字 | _ReactNode_ | - |
-| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
+| type | 按钮类型，可选值为 `default` `primary` `info` `warning` `danger` | _string_ | `default` |
 | color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - |
 | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | disabled | 是否禁用按钮 | _boolean_ | `false` |