@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/Selector/LxSelector.tsx

@@ -0,0 +1,285 @@
+import ErrorTip from '@lingxiteam/dform/es/baseComponents/ErrorTip';
+import Field from '@lingxiteam/dform/es/components/Field';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Selector, Toast } from 'antd-mobile-5';
+import { Rule } from 'rc-field-form/es/interface';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { DFormWrapper } from '../BasicComponents';
+import { useFormItem } from '../utils/hooks/useFormItem';
+import useStyle from '../View/useStyle';
+
+export interface SelectorProps {
+  options: any;
+  style: any;
+  showCheckMark?: boolean;
+  defaultValue?: any;
+  multiple?: boolean;
+  className?: string;
+  columns?: string;
+  customize?: number; // 自定义列数
+  src?: string;
+  fileCode?: string;
+  backgroundType: any;
+  status?: string;
+  onChange?: any;
+  min?: number | undefined;
+  max?: number | undefined;
+  value?: any;
+  fieldProps: string;
+  name?: string;
+}
+const LxSelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
+  const {
+    options,
+    showCheckMark,
+    style,
+    defaultValue,
+    multiple,
+    className,
+    columns,
+    customize,
+    src,
+    fileCode,
+    backgroundType = {},
+    onChange,
+    min,
+    max,
+    fieldProps,
+    status,
+    name,
+    value,
+    getEngineApis,
+    ...restProps
+  } = props;
+  const { getLocale } = getEngineApis?.() || {};
+  const imperativeHandle = {
+    // eslint-disable-next-line consistent-return
+    getSelectedData: () => {
+      const targetValue = isForm ? form?.getFieldValue(fieldProps) : curValue;
+      let length = 1; // 在配置态默认是以多个字符串隔开,在表单当中val,是根据default，兼容错误数据
+      if (Array.isArray(targetValue)) {
+        // eslint-disable-next-line prefer-destructuring
+        length = targetValue.length;
+      }
+      if (!visible) {
+        // 隐藏的情况下，则不校验
+        return targetValue;
+      }
+      if (min && length < min) {
+        Toast.show({
+          content: getLocale('minRule', `低于最小选项限制[最少选${min}个]`, {
+            min: `${min}`,
+          }),
+        });
+      } else if (max && length > max) {
+        Toast.show({
+          content: getLocale('maxRule', `超过最大选项限制[最多选${max}个]`, {
+            max: `${max}`,
+          }),
+        });
+      } else {
+        return targetValue;
+      }
+    },
+    setSelectorOptions: (params: {
+      dataSource: any[];
+      labelKey?: string;
+      valueKey?: string;
+      descriptionKey?: string;
+      disabledKey?: string;
+    }) => {
+      const {
+        labelKey = '',
+        valueKey = '',
+        descriptionKey,
+        disabledKey,
+        dataSource,
+      } = params;
+      if (dataSource && Array.isArray(dataSource)) {
+        const temDataSoure = (dataSource || [])?.map((item) => {
+          if (labelKey && valueKey) {
+            if (item[labelKey]) {
+              return {
+                label: item[labelKey],
+                value: item[valueKey],
+                description: descriptionKey ? item[descriptionKey] : '',
+                disabled: disabledKey ? item[disabledKey] : false,
+              };
+            }
+          }
+          return item;
+        });
+        setCurOptions(temDataSoure);
+      }
+    },
+    setSelectorDisabelItems: (params: { disabledKeys: any }) => {
+      const { disabledKeys = [] } = params;
+      if (disabledKeys && Array.isArray(disabledKeys)) {
+        const newOptions: any = curOptions?.map((item: any) => {
+          if (item?.value && disabledKeys.includes(item.value)) {
+            return { ...item, disabled: true };
+          }
+          return item;
+        });
+        setCurOptions(newOptions);
+      }
+    },
+  };
+
+  const { getAppFileUrlByFileCode } = getEngineApis();
+
+  const { isForm, form, disabled, onInputChange, visible, getRules } =
+    useFormItem(ref, props as any, imperativeHandle);
+  const [imgSrc, setImgSrc] = useState<string>();
+  const [curValue, setCurValue] = useState<any>([]);
+  const [curOptions, setCurOptions] = useState<any[]>([]);
+  const myColumns: any = () => {
+    switch (columns) {
+      case 'customize':
+        return customize;
+      case '2':
+        return 2;
+      case '3':
+        return 3;
+      case '4':
+        return 4;
+      default:
+        return undefined;
+    }
+  };
+  const viewRef = useRef();
+  const resultStyle = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+    },
+    viewRef,
+  );
+  useEffect(() => {
+    if (options && Array.isArray(options)) {
+      setCurOptions(options);
+    }
+  }, [JSON.stringify(options)]);
+  useEffect(() => {
+    if (backgroundType.image || fileCode) {
+      setImgSrc(getAppFileUrlByFileCode(backgroundType.image || fileCode));
+    }
+  }, [backgroundType, src, fileCode]);
+  const myStyle = () => {
+    const {
+      defaultBg,
+      defaultColor,
+      defaultBorder,
+      checkedBColor,
+      checkedColor,
+      checkedBorder,
+      itemBorderRadius,
+      itemGap,
+      ...restProps
+    } = style;
+    let itemBorder = null;
+    let cBorder = null;
+    if (defaultBorder && defaultBorder.includes('border ')) {
+      itemBorder = defaultBorder.split('border ')[1];
+    }
+    if (checkedBorder && checkedBorder.includes('border ')) {
+      cBorder = checkedBorder.split('border ')[1];
+    }
+    let horizontal = '8px';
+    let vertical = '16px';
+    if (itemGap && itemGap.includes(' ')) {
+      const gapLimit = itemGap.split(' ');
+      horizontal = gapLimit[0];
+      vertical = gapLimit[1];
+    }
+    return {
+      '--color': defaultBg,
+      '--text-color': defaultColor,
+      '--border': itemBorder,
+      '--checked-color': checkedBColor,
+      '--checked-text-color': checkedColor,
+      '--checked-border': cBorder,
+      '--border-radius': itemBorderRadius,
+      '--gap-horizontal': horizontal,
+      '--gap-vertical': vertical,
+      ...restProps,
+    };
+  };
+  const myDefaultValue = useMemo(() => {
+    if (defaultValue && typeof defaultValue === 'string') {
+      const initValues = defaultValue.split(',');
+      setCurValue(initValues);
+      return initValues;
+    }
+    if (Array.isArray(defaultValue) && defaultValue.length > 0) {
+      setCurValue(defaultValue);
+      return defaultValue;
+    }
+    return [];
+  }, [defaultValue]);
+
+  const newRules: Rule[] = useMemo(() => {
+    if (!min && !max) {
+      return [];
+    }
+    const minMsg: Rule[] = [];
+    const maxMsg: Rule[] = [];
+    if (min) {
+      minMsg.push({
+        type: 'array',
+        min,
+        message: getLocale('minRule', `低于最小选项限制[最少选${min}个]`, {
+          min: `${min}`,
+        }),
+      });
+    }
+    if (max) {
+      maxMsg.push({
+        type: 'array',
+        max,
+        message: getLocale('maxRule', `超过最大选项限制[最多选${max}个]`, {
+          max: `${max}`,
+        }),
+      });
+    }
+    return [...minMsg, ...maxMsg];
+  }, [min, max]);
+  return (
+    <Field
+      required={false}
+      title={name}
+      name={fieldProps}
+      rules={[...getRules(), ...newRules]}
+      initialValue={myDefaultValue}
+      params={{ formFlag: true, hidden: !visible }}
+    >
+      <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+        <Selector
+          {...restProps}
+          style={{ ...resultStyle, ...myStyle() }}
+          options={curOptions}
+          showCheckMark={showCheckMark}
+          defaultValue={myDefaultValue}
+          multiple={multiple}
+          className={className}
+          columns={myColumns()}
+          disabled={disabled}
+          value={curValue}
+          onChange={(value) => {
+            let _curValue = value;
+            if (max && value.length > max) {
+              // 超过最大值则取后面选的
+              const tartgetVal = value.slice(-max);
+              _curValue = tartgetVal;
+            }
+            onInputChange([..._curValue], true);
+            setCurValue([..._curValue]);
+          }}
+        />
+        <ErrorTip show fieldProps={fieldProps} />
+      </DFormWrapper>
+    </Field>
+  );
+});
+
+export default LxSelector;

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

@@ -0,0 +1,54 @@
+import Field from '@lingxiteam/dform/es/components/Field';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React from 'react';
+import { FormItem } from '../BasicComponents';
+import { DFormContext } from '../utils/form';
+import LxSelector from './LxSelector';
+
+export interface SelectorProps {
+  options: any;
+  style: any;
+  showCheckMark?: boolean;
+  defaultValue?: any;
+  multiple?: boolean;
+  className?: string;
+  columns?: string;
+  customize?: number; // 自定义列数
+  src?: string;
+  fileCode?: string;
+  backgroundType: any;
+  status?: string;
+  onChange?: any;
+  min?: number;
+  max?: number;
+  value?: any;
+  fieldProps: string;
+  name?: string;
+}
+const MySelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
+  const { fieldProps, name } = props;
+
+  const { isForm } = React.useContext(DFormContext) || {};
+
+  if (!isForm) {
+    return (
+      <FormItem>
+        <LxSelector {...props} ref={ref} />
+      </FormItem>
+    );
+  }
+  return (
+    <FormItem>
+      <Field
+        required={false}
+        title={name}
+        name={fieldProps}
+        params={{ formFlag: true, hidden: true }}
+      >
+        <LxSelector {...props} ref={ref} />
+      </Field>
+    </FormItem>
+  );
+});
+
+export default MySelector;

package/lib/h5public/src/components/factory/src/SideBar/PropsType.ts

@@ -0,0 +1,17 @@
+export interface SideBarTabsProps {
+  title: string;
+  key: string;
+  pagePath?: string;
+  badge?: string | number;
+  isShow?: boolean;
+  disabled?: boolean;
+}
+export interface SideBarProps {
+  tabs: [SideBarTabsProps];
+  style: any;
+  sideBarItem?: boolean;
+  sideBarIndex?: boolean;
+  lcdpParentRenderId: string;
+  defaultSideBarActiviteKey?: string;
+  onChange?: (key: string) => void;
+}

package/lib/h5public/src/components/factory/src/SideBar/TabPage.tsx

@@ -0,0 +1,63 @@
+import { EngineBaseProps } from '@lingxiteam/types';
+import React, { useEffect, useState } from 'react';
+import { SideBarTabsProps } from './PropsType';
+
+interface TabPageProps {
+  getEngineApis: EngineBaseProps['getEngineApis'];
+  $$componentItem: EngineBaseProps['$$componentItem'];
+  activeKey?: string;
+  lcdpParentRenderId: string;
+  item: SideBarTabsProps;
+  index: number;
+  reloadPageKey?: string;
+}
+
+const TabPage: React.FC<TabPageProps> = (props) => {
+  const {
+    getEngineApis,
+    $$componentItem,
+    activeKey,
+    lcdpParentRenderId,
+    item,
+    index,
+    reloadPageKey,
+  } = props;
+  const { PageView } = getEngineApis();
+  const [load, setLoad] = useState(false);
+
+  useEffect(() => {
+    if (activeKey === item.key) {
+      setLoad(true);
+    }
+  }, [activeKey]);
+
+  useEffect(() => {
+    if (reloadPageKey) {
+      const realKeyArray = reloadPageKey.split('--##sideBarKey##--');
+      if (item.key === realKeyArray?.[0]) {
+        // 页面进行重载刷新
+        setLoad(false);
+        setTimeout(() => setLoad(true), 100);
+      }
+    }
+  }, [reloadPageKey]);
+
+  return load ? (
+    <PageView
+      lcdpParentRenderId={lcdpParentRenderId}
+      platform="h5"
+      key={item.key}
+      pageSrc={item?.pagePath || ''}
+      appId={$$componentItem?.appId}
+      $$componentItem={$$componentItem}
+      getEngineApis={getEngineApis}
+      visible
+      style={{ width: '100%', height: '100%', overflow: 'hidden auto' }}
+      compId=""
+      className=""
+      pageViewCompState={{ sideBarItem: item, sideBarIndex: index }}
+    />
+  ) : null;
+};
+
+export default TabPage;

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

@@ -0,0 +1,79 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+@prefixCls: appSideBar;
+
+.@{prefixCls}-wrap {
+  width: 100%;
+  height: 100%;
+
+  .my-side-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    
+    .side {
+      flex: none;
+    }
+
+    .main {
+      flex: 1;
+    }
+
+    .content {
+      height: 100%;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      // padding: 12 * @hd;
+      font-size: 12 * @hd;
+      color: #cccccc;
+      word-break: break-all;
+      word-wrap: break-word;
+      &.active {
+        display: flex;
+      }
+    }
+
+    .adm-side-bar {
+      font-size: var(--my-side-bar-font-size);
+    }
+    .adm-side-bar-item-highlight {
+      background: var(--my-side-bar-pointer-color);
+    }
+    .adm-side-bar-item-active {
+      background-color: var(--my-side-bar-active-bg-color);
+    }
+    .adm-side-bar-item {
+      path {
+        fill: var(--my-side-bar-active-bg-color);
+      }
+    }
+    .adm-side-bar-item-active-next-sibling {
+      path {
+        fill: var(--my-side-bar-active-bg-color);
+      }
+    }
+  }
+
+  .my-side-bar-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    padding: 16 * @hd;
+    color: #afb4bd;
+    font-weight: 400;
+    font-size: 17 * @hd;
+    text-align: center;
+    background: #e9ecf5;
+
+    .notice {
+      color: #333;
+      font-weight: 600;
+    }
+  }
+}

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

@@ -0,0 +1,150 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { SideBar } from 'antd-mobile-5';
+import classNames from 'classnames';
+import { useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import './index.less';
+import { SideBarProps, SideBarTabsProps } from './PropsType';
+import TabPage from './TabPage';
+
+const prefixCls = 'appSideBar';
+const MySideBar = LingxiForwardRef<any, SideBarProps>((props, ref) => {
+  const {
+    className,
+    tabs,
+    style,
+    getEngineApis,
+    $$componentItem,
+    lcdpParentRenderId,
+    defaultSideBarActiviteKey,
+    onChange,
+  } = props;
+  const {
+    tabBarWidth,
+    tabBarHeight,
+    tabBarBackgroundColor = '',
+    tabBarActiveTextColor = '',
+    tabBarInactiveTextColor = '',
+    tabPointerColor = '',
+    tabBarActiveBackgroundColor = '',
+    tabBarTextFont,
+    tabItemBorderRadius,
+  } = style;
+  const [activeKey, setActiveKey] = useState<string | undefined>();
+  const [reloadPageKey, setReloadPageKey] = useState<string | undefined>();
+  const [finalTabs, setFinalTabs] = useState<any[]>([]);
+  const { px2rem } = getEngineApis();
+
+  const customTitle = useCallback(
+    (item: { key: string | number; title: string }) => {
+      const textColor =
+        item.key === activeKey
+          ? tabBarActiveTextColor
+          : tabBarInactiveTextColor;
+      return <div style={{ color: textColor }}>{item?.title || item.key}</div>;
+    },
+    [tabBarActiveTextColor, tabBarInactiveTextColor, activeKey],
+  );
+
+  const onSideBarChange = (key: string) => {
+    setActiveKey(key);
+    if (onChange) {
+      onChange(key);
+    }
+  };
+
+  const tabReloadPage = (key: string) => {
+    setReloadPageKey(`${key}--##sideBarKey##--${Date.now()}`);
+  };
+
+  useImperativeHandle(ref, () => ({
+    reloadPage: tabReloadPage,
+  }));
+
+  useEffect(() => {
+    // finalTabs用于展示可显示的侧栏数量，tabs用作右侧页面的缓存，防止页面设置为可显示的时候又重新加载已显示的页面。
+    const pages: any[] = [];
+    let selectPageId = defaultSideBarActiviteKey;
+    tabs?.forEach((item: SideBarTabsProps) => {
+      const newItem = { ...item };
+      if (!item.hasOwnProperty('isShow') || item.isShow !== false) {
+        if (!selectPageId && !item?.disabled) {
+          selectPageId = item.key;
+        }
+        newItem.isShow = true;
+        pages.push(newItem);
+      }
+    });
+    setFinalTabs(pages);
+    setActiveKey(selectPageId);
+  }, [tabs, defaultSideBarActiviteKey]);
+
+  return (
+    <div className={classNames(`${prefixCls}-wrap`, className)}>
+      {Array.isArray(tabs) && tabs?.length ? (
+        <div
+          className="my-side-container"
+          style={px2rem({
+            '--my-side-bar-pointer-color':
+              tabPointerColor || 'var(--adm-color-primary)',
+            '--my-side-bar-active-bg-color':
+              tabBarActiveBackgroundColor || 'var(--adm-color-background)',
+            '--my-side-bar-font-size':
+              `${tabBarTextFont}px` || 'var(--adm-font-size-main)',
+          })}
+        >
+          <div className="side">
+            <SideBar
+              activeKey={activeKey}
+              onChange={onSideBarChange}
+              style={px2rem({
+                '--width': tabBarWidth,
+                '--height': tabBarHeight,
+                '--background-color': tabBarBackgroundColor,
+                '--item-border-radius': `${tabItemBorderRadius || 8}px`,
+              })}
+            >
+              {finalTabs.map((item: SideBarTabsProps) => (
+                <SideBar.Item
+                  key={item.key}
+                  title={customTitle(item)}
+                  badge={Number(item?.badge) > 99 ? '99+' : Number(item?.badge)}
+                  disabled={item?.disabled}
+                />
+              ))}
+            </SideBar>
+          </div>
+          <div className="main">
+            {tabs.map((item: SideBarTabsProps, index: number) => (
+              <div
+                className={classNames(
+                  'content',
+                  activeKey === item.key && 'active',
+                )}
+              >
+                <TabPage
+                  getEngineApis={getEngineApis}
+                  $$componentItem={$$componentItem}
+                  activeKey={activeKey}
+                  lcdpParentRenderId={lcdpParentRenderId}
+                  item={item}
+                  index={index}
+                  reloadPageKey={reloadPageKey}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="my-side-bar-body">
+          {Array.isArray(tabs) ? (
+            <span>组件未配置页面</span>
+          ) : (
+            <span>组件面板设置数据格式错误</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default MySideBar;