@lingxiteam/ebe-utils 0.0.8 → 0.0.10

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

@@ -0,0 +1,345 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Badge } from 'antd-mobile-5';
+import classNames from 'classnames';
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import { StickyHeader } from '../BasicComponents';
+import { useSyncState } from '../common/hooks';
+import Icon from '../Icon';
+import basicStatusTransfer from '../utils/basicStatusTransfer';
+import CustomModule from '../utils/CustomModule';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import { withTransformProps } from '../utils/withTransformProps';
+import './index.less';
+import type { TabBarProps } from './TabBar';
+import TabBar from './TabBar';
+import Tabs from './Tabs';
+import transformProps from './transformProps';
+
+const prefixCls = 'appTabs';
+export interface StaticTabsProps extends TabBarProps {
+  underlineType?: TabBarProps['underlineType'];
+  underlineWidth?: TabBarProps['underlineWidth'];
+  initialPage?: any;
+  isOpenSticky: boolean; // 是否开启吸顶效果
+  stickyTop: string | number;
+  visible: boolean;
+  // $$componentItem: $$componentItem;
+  tabBarPage: number;
+  tabBarSelectedBackgroundColor?: string;
+  onChange: (item: any, page: number) => void;
+}
+
+const StaticTabs = LingxiForwardRef<any, StaticTabsProps>((props, ref) => {
+  const {
+    underlineType,
+    underlineWidth,
+    initialPage: myInitialPage,
+    isOpenSticky = false,
+    stickyTop = 45,
+    visible = true,
+    // $$componentItem,
+    tabBarPage = 5,
+    className,
+    tabBarSelectedBackgroundColor = 'transparent',
+    getEngineApis,
+    tabBarUnderlineStyle,
+    tabBarTextStyle,
+    ...restProps
+  } = props;
+
+  const { sandBoxSafeRun, sandBoxLoadModule, px2rem } = getEngineApis();
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun);
+
+  // const { $$engineEvalExp } = $$componentItem || {};
+  const [tabs, setTabs] = useState<any[]>([]);
+
+  // 根据id进行查找
+  const initialPage = (p: any) => {
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < tabs?.length; index++) {
+      const element = tabs[index];
+      // eslint-disable-next-line eqeqeq
+      if (element.id == p) {
+        return index;
+      }
+    }
+    return undefined;
+  };
+
+  const [page, setPage] = useSyncState<number | string>(
+    props.page || initialPage(myInitialPage) || 0,
+  );
+  const hiddenStyle = useHiddenStyle(visible);
+
+  // 修复函数中使用数据源无法刷新的bug
+  const renderTabs = (() => {
+    const mTabs = [] as any;
+    // eslint-disable-next-line consistent-return
+    tabs?.forEach((item: any, index: number) => {
+      const { isShow = true } = item;
+
+      if (isShow) {
+        const { badge, title, badgeRendering, jsx, ...other } = item;
+        // 自定义渲染函数
+        if (badge && badgeRendering) {
+          let titleNode: React.ReactNode = title;
+
+          if (jsx) {
+            titleNode = (
+              <div style={{ position: 'relative', display: 'flex' }}>
+                {title}
+                <CustomModule
+                  code={badgeRendering}
+                  compProps={{
+                    text: badge,
+                    item,
+                    index,
+                  }}
+                  sandBoxLoadModule={sandBoxLoadModule}
+                  errorInfo={{ id: props.$$componentItem.id }}
+                />
+              </div>
+            );
+          } else if (funcExpExecute) {
+            titleNode = (
+              <div
+                style={{ position: 'relative', display: 'flex' }}
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{
+                  __html: `${title}${funcExpExecute(badgeRendering, [
+                    {
+                      key: 'text',
+                      value: badge,
+                    },
+                    {
+                      key: 'row',
+                      value: item,
+                    },
+                    {
+                      key: 'index',
+                      value: index,
+                    },
+                  ])}`,
+                }}
+              />
+            );
+          }
+
+          return mTabs.push({
+            ...other,
+            title: titleNode,
+          });
+        }
+
+        if (badge && !badgeRendering) {
+          let content = badge;
+          if (content) {
+            const num = Number(content);
+            if (!isNaN(num)) {
+              if (num > 99) {
+                content = '99+';
+              }
+            }
+          }
+          return mTabs.push({
+            ...other,
+            title: (
+              <Badge
+                content={content}
+                style={{ '--top': '20%', '--right': '-20%' }}
+              >
+                {title}
+              </Badge>
+            ),
+          });
+        }
+
+        mTabs.push(item);
+      }
+    });
+
+    if (
+      (mTabs.length < tabBarPage && props.tabBarPosition === 'left') ||
+      props.tabBarPosition === 'right'
+    ) {
+      /**
+       * 因为 rmc-tabs 的源码设置了tabBar子项高度或宽度是根据数据源长度，将每个tab均等分，若希望实现非均等分的tabBar子项，需要引入虚拟tabBar
+       * 虚拟tabBar数量,根据设置的一屏展示tabBar数量，若大于数据源长度，说明希望展示的每一个tab不可均等分，需要插入虚拟tab
+       * 根据差值，插入对应的虚拟tabBar，注意：虚拟的tabBar需要将所有的设置清空，即不可点击，不可设置样式等等
+       */
+      const virtual = tabBarPage - mTabs.length;
+      let i = 0;
+      while (i < virtual) {
+        mTabs.push({});
+        // eslint-disable-next-line no-plusplus
+        i++;
+      }
+    }
+
+    return mTabs;
+  })();
+
+  const tabchildren = useMemo(() => {
+    const newChildren = Array.isArray(props.children)
+      ? [...(props.children || [])]
+      : [props.children];
+    const temTabchildren: any = [];
+    tabs?.forEach((v: any, index: number) => {
+      const { isShow = true } = v;
+      if (isShow) {
+        if (newChildren?.[index]) {
+          temTabchildren.push(newChildren[index]);
+        } else if (newChildren.length > 0) {
+          temTabchildren.push(newChildren[0]);
+        }
+      }
+    });
+    return temTabchildren;
+  }, [JSON.stringify(tabs), props.children]);
+
+  useEffect(() => {
+    if (props?.tabs) {
+      setTabs(props?.tabs);
+    }
+  }, [JSON.stringify(props?.tabs)]);
+
+  useEffect(() => {
+    const np = initialPage(myInitialPage) || Number(myInitialPage || '0');
+    if (np !== page) {
+      setPage(np);
+    }
+  }, [JSON.stringify(props?.tabs), myInitialPage]);
+
+  useImperativeHandle(ref, () => ({
+    goToTab: (p: any, completeHandle?: () => void) => {
+      const nP = initialPage(p) || Number(p);
+      setPage(nP, completeHandle);
+    },
+    setTabsData: (tabsDataOptions: any = {}) => {
+      const { data, key, title, status, badge } = tabsDataOptions;
+
+      const resolvedData = data.map((tab: any) => {
+        const tabKey = tab[key || 'id'];
+        const tabTitle = tab[title || 'title'];
+        const tabIsShow = tab.isShow;
+        const tabBadge = tab[badge || 'badge'];
+
+        const matchTab: any = tabs?.find((t: any) => t.id === tabKey) || {};
+        const newTab = { ...matchTab };
+
+        if (typeof tabKey !== 'undefined') {
+          newTab.id = tabKey;
+        }
+
+        if (typeof tabTitle !== 'undefined') {
+          newTab.title = tabTitle;
+        }
+
+        if (typeof status !== 'undefined') {
+          newTab.isShow = basicStatusTransfer(tab?.[status])?.visible;
+        } else {
+          newTab.isShow = tabIsShow;
+        }
+
+        if (typeof tabBadge !== 'undefined') {
+          newTab.badge = tabBadge;
+        }
+
+        return newTab;
+      });
+
+      setTabs(resolvedData);
+    },
+  }));
+
+  const renderTabBar = (p: any) => {
+    return (
+      <StickyHeader isOpenSticky={isOpenSticky} top={stickyTop}>
+        {({ style = {} }) => (
+          <div
+            // id={id}
+            className={classNames({
+              [`${prefixCls}-wrapper`]: !isOpenSticky,
+            })}
+            style={
+              isOpenSticky
+                ? {
+                    ...style,
+                    zIndex: 1,
+                  }
+                : {}
+            }
+          >
+            <TabBar
+              {...p}
+              realTablength={renderTabs?.length}
+              page={
+                props.tabBarPosition === 'left' ||
+                props.tabBarPosition === 'right'
+                  ? tabBarPage
+                  : 5
+              }
+              onGoToTab={(index) => {
+                // if (index + 1 > props?.tabs?.length) return;
+                if (page !== index) {
+                  setPage(index);
+                  if (props.onChange) {
+                    props.onChange(renderTabs[index], index);
+                  }
+                }
+              }}
+              // initialPage={props.initialPage}
+              underlineType={underlineType}
+              underlineWidth={underlineWidth}
+              // @ts-ignore
+              renderIcon={(iconProps) => (
+                <Icon {...iconProps} getEngineApis={props.getEngineApis} />
+              )}
+            />
+          </div>
+        )}
+      </StickyHeader>
+    );
+  };
+  if (renderTabs.length) {
+    return (
+      <div
+        className={`use-app-statictabs ${className}`}
+        style={
+          {
+            '--myTabs-selected-background': tabBarSelectedBackgroundColor,
+            ...hiddenStyle,
+          } as any
+        }
+      >
+        <Tabs
+          {...restProps}
+          tabBarUnderlineStyle={px2rem(tabBarUnderlineStyle)}
+          tabBarTextStyle={px2rem(tabBarTextStyle)}
+          tabs={renderTabs}
+          page={page}
+          // eslint-disable-next-line react/no-children-prop
+          children={tabchildren}
+          onChange={(tab, index) => {
+            if (page !== index) {
+              setPage(index);
+              if (props.onChange) {
+                props.onChange(renderTabs[index], index);
+              }
+            }
+          }}
+          renderTabBar={(p) => renderTabBar(p)}
+        />
+      </div>
+    );
+  }
+  return null;
+});
+
+export default withTransformProps(StaticTabs, transformProps);

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

@@ -0,0 +1,30 @@
+interface Props {
+  components: Props; // 选项卡
+  tabPosition: 'top' | 'left' | 'right' | 'bottom';
+  defaultActiveKey: string;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { components, tabPosition, defaultActiveKey, ...restProps } = props;
+  let initialPage = '0' as string;
+  // 零代码默认值根据key展示，低代码根据下标展示，需要做一层转换.零代码子节点运行态为components，编辑态为props.children
+  const tabs =
+    (components || props.children)?.map((i: any, index: number) => {
+      const { props } = i;
+      // eslint-disable-next-line eqeqeq
+      if (props.key || i.key == defaultActiveKey) initialPage = String(index);
+      return {
+        id: props.key || i.key,
+        title: props.tab,
+      };
+    }) || [];
+
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    tabs,
+    tabBarPosition: tabPosition,
+    initialPage,
+  };
+  return newProps;
+}

package/lib/h5public/src/components/factory/src/StepBar/constant/checkcircle.tsx

@@ -0,0 +1,29 @@
+export default (props: any) => {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="CheckCircle" clipPath="url(#clip0_2704_29331)">
+        <g id="Vector">
+          <path d="M15.0061 6.4502H13.9592C13.7315 6.4502 13.515 6.55957 13.3811 6.74707L9.87214 11.6131L8.28286 9.40778C8.14893 9.22252 7.93464 9.11091 7.70473 9.11091H6.65786C6.51277 9.11091 6.42795 9.27609 6.51277 9.39439L9.29402 13.2515C9.35972 13.3432 9.44634 13.418 9.54668 13.4695C9.64703 13.5211 9.75822 13.5479 9.87103 13.5479C9.98384 13.5479 10.095 13.5211 10.1954 13.4695C10.2957 13.418 10.3823 13.3432 10.448 13.2515L15.1489 6.73368C15.236 6.61537 15.1512 6.4502 15.0061 6.4502Z" />
+          <path d="M10.832 0C5.30971 0 0.832031 4.47768 0.832031 10C0.832031 15.5223 5.30971 20 10.832 20C16.3544 20 20.832 15.5223 20.832 10C20.832 4.47768 16.3544 0 10.832 0ZM10.832 18.3036C6.24721 18.3036 2.52846 14.5848 2.52846 10C2.52846 5.41518 6.24721 1.69643 10.832 1.69643C15.4169 1.69643 19.1356 5.41518 19.1356 10C19.1356 14.5848 15.4169 18.3036 10.832 18.3036Z" />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_2704_29331">
+          <rect
+            width="20"
+            height="20"
+            fill="white"
+            transform="translate(0.832031)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/lib/h5public/src/components/factory/src/StepBar/constant/index.ts

@@ -0,0 +1,2 @@
+export { default as CheckCircle } from './checkcircle';
+export { default as Vector } from './vector';

package/lib/h5public/src/components/factory/src/StepBar/constant/vector.tsx

@@ -0,0 +1,13 @@
+export default (props: any) => {
+  return (
+    <svg
+      height="20"
+      viewBox="0 0 21 20"
+      width="21"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="m10.5 0c-2.82737.074349-5.18227 1.05169-7.0647 2.93203-1.88244 1.88034-2.860868 4.24004-2.9353 7.07907.074432 2.8243 1.05286 5.1765 2.9353 7.0569 1.88243 1.8803 4.23733 2.8577 7.0647 2.932 2.8422-.0743 5.2046-1.0517 7.087-2.932 1.8824-1.8804 2.8534-4.2326 2.913-7.0569-.0596-2.83903-1.0306-5.19873-2.913-7.07907s-4.2448-2.857681-7.087-2.93203zm0 18.6846c-2.45534-.0744-4.5015-.9254-6.13847-2.5532-1.63698-1.6276-2.48519-3.6677-2.54463-6.1203.05957-2.46742.90778-4.51501 2.54463-6.14274 1.63684-1.6276 3.683-2.47865 6.13847-2.55313 2.4553.07435 4.5014.9254 6.1383 2.55313 1.637 1.6276 2.4852 3.67519 2.5448 6.14274-.0596 2.4526-.9078 4.4927-2.5448 6.1203-1.6369 1.6278-3.683 2.4788-6.1383 2.5532zm-7.67847-8.6735c0 1.3825.33853 2.6571 1.01558 3.8239.67706 1.1669 1.61828 2.0996 2.82365 2.7982 1.20538.6986 2.48513 1.0479 3.83924 1.0479 1.3541 0 2.6339-.3493 3.8392-1.0479 1.2054-.6986 2.1466-1.6313 2.8237-2.7982.677-1.167 1.0156-2.4454 1.0156-3.8352 0-1.38984-.3386-2.66822-1.0156-3.83515-.6771-1.1668-1.6183-2.09955-2.8237-2.79824-1.2053-.6987-2.4851-1.04805-3.8392-1.04805-1.35411 0-2.63386.34935-3.83924 1.04805-1.20537.69869-2.14659 1.63144-2.82365 2.79824-.67705 1.16693-1.01558 2.44902-1.01558 3.84625z" />
+    </svg>
+  );
+};

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

@@ -0,0 +1,120 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: lcdp-stepprocess;
+
+.@{prefixCls}-stepProcess {
+  display: block;
+  width: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+
+  .@{prefixCls}-start-content {
+    justify-content: start;
+  }
+
+  .@{prefixCls}-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10 * @hd;
+    color: #c6c7c9;
+  }
+
+  .@{prefixCls}-title {
+    .@{prefixCls}-subTitle {
+      margin-top: 4 * @hd;
+      font-size: 12 * @hd;
+      opacity: 0.65;
+    }
+  }
+
+  .@{prefixCls}-description {
+    opacity: 0.85;
+  }
+
+
+  // 数字类型样式
+  .@{prefixCls}-numberBox {
+    text-align: center;
+    line-height: 16 * @hd;
+    width: 18 * @hd;
+    height: 18 * @hd;
+    border-radius: 50%;
+    font-size: 12 * @hd;
+  }
+
+  // 数字类型迷你样式
+  .@{prefixCls}-numberBox-small {
+    width: 12 * @hd;
+    height: 12 * @hd;
+    line-height: 14 * @hd;
+  }
+
+  // 点类型样式
+  .@{prefixCls}-dot {
+    width: 12 * @hd;
+    height: 12 * @hd;
+    opacity: 1;
+    border-radius: 50%;
+  }
+
+  // 点类型迷你样式
+  .@{prefixCls}-dot-small {
+    width: 8 * @hd;
+    height: 8 * @hd;
+  }
+
+  .@{prefixCls}-dot-finish {
+    background-color: @brand-primary; // FIXME:换主题色
+  }
+
+  .@{prefixCls}-dot-process {
+    background-color: @brand-primary; // FIXME:换主题色
+  }
+
+  .@{prefixCls}-dot-wait {
+    background-color: #e5e5e5; // FIXME:换主题色
+  }
+
+  .@{prefixCls}-dot-error {
+    background-color: @brand-error; // FIXME:换主题色
+  }
+
+  .@{prefixCls}-finish {
+    border: 2px solid @brand-primary; // FIXME:换主题色
+    color: @brand-primary; // FIXME:换主题色
+  }
+
+  .@{prefixCls}-process {
+    border: 2px solid @brand-primary; // FIXME:换主题色
+    background-color: @brand-primary; // FIXME:换主题色
+    color: #fff; // FIXME:换主题色
+  }
+
+  .@{prefixCls}-wait {
+    border: 2px solid #E5E5E5; // FIXME:换主题色
+    color: rgba(28, 36, 46, 0.85);
+  }
+
+  .@{prefixCls}-error {
+    border: 2px solid @brand-error; // FIXME:换主题色
+    color: @brand-error; // FIXME:换主题色
+  }
+}
+
+.@{prefixCls}-stepProcess-vertical {
+  .@{prefixCls}-title {
+    display: flex;
+
+    .@{prefixCls}-subTitle {
+      margin-left: 4 * @hd;
+    }
+  }
+}
+
+.@{prefixCls}-stepProcess-navigate {
+  .adm-steps-horizontal .adm-step .adm-step-indicator::after {
+    height: 0;
+  }
+}