@lingxiteam/ebe-utils 0.0.9 → 0.0.10

package/lib/h5public/src/components/factory/src/StaticTabs/TabBar.tsx

@@ -0,0 +1,118 @@
+import Tabs from './Tabs';
+
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+import type { PropsType } from 'rmc-tabs/es/DefaultTabBar';
+import { useRefs } from '../utils/hooks/useRefs';
+import './index.less';
+
+const prefixCls = 'appTabs';
+export interface TabBarProps extends PropsType {
+  initialPage?: string | number;
+  underlineType?: 'default' | 'custom' | 'fitTextWidth';
+  underlineWidth?: string;
+  onGoToTab?: (tab: number) => void;
+  style: React.CSSProperties;
+  isEd: boolean;
+  page: number;
+  realTablength: number;
+  renderIcon: (p: Record<string, any>) => React.ReactNode;
+}
+
+const TabBar: FC<TabBarProps> = (props) => {
+  const {
+    underlineType = 'default',
+    underlineWidth,
+    onGoToTab = () => {},
+    style,
+    tabBarPosition,
+    renderIcon,
+    ...restProps
+  } = props;
+  const { refs, setRefs } = useRefs();
+  const tabBarRef = useRef<any>(null);
+  const [active, setActive] = React.useState(
+    +(props.activeTab || props.initialPage || 0),
+  );
+  const getStyle = (width: number, defaultStyle: React.CSSProperties) => {
+    const style = defaultStyle;
+    const tabbarSize =
+      tabBarRef.current?.layout?.getBoundingClientRect?.() || {};
+    // 下划线居中
+    if (tabBarPosition === 'left' || tabBarPosition === 'right') {
+      const barSize = tabbarSize.height / props.tabs.length;
+      // 若点击的是虚拟tab，则返回
+      style.height = width;
+      style.top = +active * barSize + (barSize - width) / 2;
+      return style;
+    }
+    const barSize = tabbarSize.width / props.tabs.length;
+    style.left = +active * barSize + (barSize - width) / 2;
+    style.width = width;
+    return style;
+  };
+
+  const getUnderlineStyle = (
+    defaultStyle: React.CSSProperties,
+  ): React.CSSProperties => {
+    const style = defaultStyle;
+    if (underlineType === 'default') {
+      return defaultStyle;
+    }
+    if (underlineType === 'custom') {
+      return getStyle(underlineWidth ? parseFloat(underlineWidth) : 0, style);
+    }
+
+    if (refs.length > active) {
+      const { width, height }: DOMRect = (
+        refs[active]?.ref as HTMLDivElement
+      )?.getBoundingClientRect();
+      return getStyle(
+        tabBarPosition === 'left' || tabBarPosition === 'right'
+          ? height
+          : width,
+        style,
+      );
+    }
+    return style;
+  };
+
+  const goToTab = (index: number) => {
+    if (index < props.realTablength) {
+      setActive(index);
+      onGoToTab(index);
+    }
+  };
+
+  return (
+    <Tabs.DefaultTabBar
+      {...restProps}
+      tabBarPosition={tabBarPosition}
+      ref={tabBarRef}
+      goToTab={goToTab}
+      renderTab={(tabProps) => {
+        if (!tabProps.id) return null;
+        const { icon = {} } = tabProps;
+        return (
+          <span
+            className={`${prefixCls}-tabBarWrapper`}
+            ref={(ref) => {
+              if (ref) {
+                setRefs(`tabbar_${tabProps.id}`, ref);
+              }
+            }}
+          >
+            {/* {props.isEd ? <IconED {...icon} /> : <Icon {...icon} />} */}
+            {renderIcon(icon)}
+            <span className={`${prefixCls}-span`}> {tabProps.title}</span>
+          </span>
+        );
+      }}
+      renderUnderline={({ style, className }) => {
+        return <div className={className} style={getUnderlineStyle(style)} />;
+      }}
+    />
+  );
+};
+
+export default TabBar;

package/lib/h5public/src/components/factory/src/StaticTabs/Tabs/PropsType.tsx

@@ -0,0 +1,8 @@
+import { Models, PropsType } from 'rmc-tabs';
+
+interface TabsProps extends PropsType {
+  /** render for replace the tab of tabbar. */
+  renderTab?: (tab: Models.TabData) => React.ReactNode;
+}
+
+export default TabsProps;

package/lib/h5public/src/components/factory/src/StaticTabs/Tabs/index.less

@@ -0,0 +1,251 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/mixins';
+@import '~@lingxiteam/antd-mobile-v2-theme/es/themes/default.less';
+
+@tabs-prefix-cls: am-tabs;
+@tabs-default-bar-prefix-cls: am-tabs-default-bar;
+@badge-prefix-cls: am-badge;
+
+@easing-in-out: cubic-bezier(0.35, 0, 0.25, 1);
+@effect-duration: .3s;
+@page-hide-color: rgba(255, 255, 255, 0);
+@page-show-color: rgba(255, 255, 255, 1);
+
+.common-pagination() {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 59 * @hd;
+  height: 100%;
+  content: ' ';
+  z-index: @tabs-pagination-zindex;
+}
+
+.@{tabs-prefix-cls} {
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+
+  display: flex;
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+
+  &-content-wrap {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+
+    &-animated {
+      transition: transform @effect-duration @easing-in-out, left @effect-duration @easing-in-out, top @effect-duration @easing-in-out;
+      will-change: transform, left, top;
+    }
+  }
+
+  &-pane-wrap {
+    width: 100%;
+    flex-shrink: 0;
+    overflow-y: auto;
+  }
+
+  &-tab-bar-wrap {
+    flex-shrink: 0;
+  }
+
+  &-horizontal {
+    .@{tabs-prefix-cls} {
+      &-pane-wrap-active {
+        height: auto;
+      }
+
+      &-pane-wrap-inactive {
+        height: 0;
+        overflow: visible;
+      }
+    }
+  }
+
+  &-vertical {
+    .@{tabs-prefix-cls} {
+      &-content-wrap {
+        flex-direction: column;
+      }
+
+      &-tab-bar-wrap {
+        height: 100%;
+      }
+
+      &-pane-wrap {
+        height: 100%;
+      }
+
+      &-pane-wrap-active {
+        overflow: auto;
+      }
+
+      &-pane-wrap-inactive {
+        overflow: hidden;
+      }
+    }
+  }
+
+  &-top,
+  &-bottom {
+    flex-direction: column;
+  }
+
+  &-left,
+  &-right {
+    flex-direction: row;
+  }
+}
+
+.@{tabs-default-bar-prefix-cls} {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  z-index: 1;
+
+  &-tab {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    font-size: @tabs-font-size-heading;
+    height: @tabs-height;
+    line-height: @tabs-height;
+
+    .@{badge-prefix-cls} {
+      .@{badge-prefix-cls}-text {
+        top: -13 * @hd;
+        transform: translateX(-5 * @hd);
+      }
+      .@{badge-prefix-cls}-dot {
+        top: -6 * @hd;
+        transform: translateX(0);
+      }
+    }
+  }
+
+  &-tab-active {
+    color: @tabs-color;
+    background: var(--myTabs-selected-background);
+  }
+
+  &-underline {
+    position: absolute;
+    border: 1px @tabs-color solid;
+    // force GPU acceleration
+    transform: translate3d(0, 0, 0);
+  }
+
+  &-animated &-content {
+    transition: transform @effect-duration @easing-in-out;
+    will-change: transform;
+  }
+
+  &-animated &-underline {
+    transition: top @effect-duration @easing-in-out, left @effect-duration @easing-in-out, color @effect-duration @easing-in-out, width @effect-duration @easing-in-out;
+    will-change: top, left, width, color;
+  }
+
+  &-top,
+  &-bottom {
+    flex-direction: row;
+
+    .@{tabs-default-bar-prefix-cls} {
+      &-content {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+      }
+
+      &-prevpage {
+        .common-pagination();
+
+        left: 0;
+        background: linear-gradient(to right, @page-show-color, @page-hide-color);
+      }
+
+      &-nextpage {
+        .common-pagination();
+
+        right: 0;
+        background: linear-gradient(to right, @page-hide-color, @page-show-color);
+      }
+
+      &-tab {
+        padding: 8px 0;
+      }
+
+      &-underline {
+        bottom: 0;
+      }
+    }
+  }
+
+  &-top {
+    .@{tabs-default-bar-prefix-cls} {
+      &-tab {
+        .hairline('bottom');
+      }
+    }
+  }
+
+  &-bottom {
+    .@{tabs-default-bar-prefix-cls} {
+      &-tab {
+        .hairline('top');
+      }
+    }
+  }
+
+  &-left,
+  &-right {
+    flex-direction: column;
+
+    .@{tabs-default-bar-prefix-cls} {
+      &-content {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+      }
+
+      &-tab {
+        padding: 0 8px;
+      }
+    }
+  }
+
+  &-left {
+    .@{tabs-default-bar-prefix-cls} {
+      &-underline {
+        right: 0;
+      }
+      &-tab {
+        .hairline('right');
+      }
+    }
+  }
+
+  &-right {
+    .@{tabs-default-bar-prefix-cls} {
+      &-underline {
+        left: 0;
+      }
+      &-tab {
+        .hairline('left');
+      }
+    }
+  }
+}

package/lib/h5public/src/components/factory/src/StaticTabs/Tabs/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  DefaultTabBar as RMCDefaultTabBar,
+  TabBarPropsType,
+  Tabs as RMCTabs,
+} from 'rmc-tabs';
+import './index.less';
+import TabsProps from './PropsType';
+
+export class DefaultTabBar extends RMCDefaultTabBar {
+  static defaultProps = {
+    ...(RMCDefaultTabBar as any).defaultProps,
+    prefixCls: 'am-tabs-default-bar',
+  };
+}
+
+export default class Tabs extends React.PureComponent<TabsProps, {}> {
+  // eslint-disable-next-line react/sort-comp
+  public static DefaultTabBar = DefaultTabBar;
+
+  static defaultProps = {
+    prefixCls: 'am-tabs',
+  };
+
+  renderTabBar = (props: TabBarPropsType) => {
+    const { renderTab } = this.props;
+    return <DefaultTabBar {...props} renderTab={renderTab} />;
+  };
+
+  render() {
+    return <RMCTabs renderTabBar={this.renderTabBar} {...this.props} />;
+  }
+}

package/lib/h5public/src/components/factory/src/StaticTabs/index.less

@@ -0,0 +1,17 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: appTabs;
+
+.@{prefixCls}-wrapper{
+  height: 100%;
+}
+
+.@{prefixCls}-tabBarWrapper{
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+
+  .@{prefixCls}-span{
+    margin-left: 4px;
+  }
+}