@lingxiteam/ebe-utils 0.5.11 → 0.6.2

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

@@ -1,12 +1,12 @@
-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 React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { DFormWrapper } from '../BasicComponents';
-import { useFormItem } from '../utils/hooks/useFormItem';
 import useStyle from '../View/useStyle';
+import { Selector, Toast } from 'antd-mobile-5';
+import { useFormItem } from '../utils/hooks/useFormItem';
+import Field from '@lingxiteam/dform/es/components/Field';
+import ErrorTip from '@lingxiteam/dform/es/baseComponents/ErrorTip';
+import { Rule } from 'rc-field-form/es/interface';
 
 export interface SelectorProps {
   options: any;
@@ -69,25 +69,23 @@ const LxSelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
         return targetValue;
       }
       if (min && length < min) {
-        Toast.show({
-          content: getLocale('minRule', `低于最小选项限制[最少选${min}个]`, {
-            min: `${min}`,
-          }),
-        });
+        Toast.show({ content: getLocale('minRule', `低于最小选项限制[最少选${min}个]`, { min: `${min}` }) });
       } else if (max && length > max) {
-        Toast.show({
-          content: getLocale('maxRule', `超过最大选项限制[最多选${max}个]`, {
-            max: `${max}`,
-          }),
-        });
+        Toast.show({ content: getLocale('maxRule', `超过最大选项限制[最多选${max}个]`, { max: `${max}` }) });
       } else {
         return targetValue;
       }
     },
-    setSelectorOptions: (params: { dataSource: any[]; labelKey?: string; valueKey?: string; descriptionKey?: string; disabledKey?: string }) => {
+    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 => {
+        const temDataSoure = (dataSource || [])?.map((item) => {
           if (labelKey && valueKey) {
             if (item[labelKey]) {
               return {
@@ -122,7 +120,11 @@ const LxSelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
 
   const { getAppFileUrlByFileCode } = getEngineApis();
 
-  const { isForm, form, disabled, onInputChange, visible, getRules } = useFormItem(ref, props as any, imperativeHandle);
+  const { isForm, form, disabled, onInputChange, visible, getRules } = useFormItem(
+    ref,
+    props as any,
+    imperativeHandle,
+  );
   const myColumns: any = () => {
     switch (columns) {
       case 'customize':
@@ -143,7 +145,7 @@ const LxSelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
       ...props,
       src: imgSrc,
     },
-    viewRef
+    viewRef,
   );
   useEffect(() => {
     if (options && Array.isArray(options)) {
@@ -156,7 +158,17 @@ const LxSelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
     }
   }, [backgroundType, src, fileCode]);
   const myStyle = () => {
-    const { defaultBg, defaultColor, defaultBorder, checkedBColor, checkedColor, checkedBorder, itemBorderRadius, itemGap, ...restProps } = style;
+    const {
+      defaultBg,
+      defaultColor,
+      defaultBorder,
+      checkedBColor,
+      checkedColor,
+      checkedBorder,
+      itemBorderRadius,
+      itemGap,
+      ...restProps
+    } = style;
     let itemBorder = null;
     let cBorder = null;
     if (defaultBorder && defaultBorder.includes('border ')) {
@@ -190,8 +202,7 @@ const LxSelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
       const initValues = defaultValue.split(',');
       setCurValue(initValues);
       return initValues;
-    }
-    if (Array.isArray(defaultValue) && defaultValue.length > 0) {
+    } if (Array.isArray(defaultValue) && defaultValue.length > 0) {
       setCurValue(defaultValue);
       return defaultValue;
     }
@@ -205,22 +216,10 @@ const LxSelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
     const minMsg: Rule[] = [];
     const maxMsg: Rule[] = [];
     if (min) {
-      minMsg.push({
-        type: 'array',
-        min,
-        message: getLocale('minRule', `低于最小选项限制[最少选${min}个]`, {
-          min: `${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}`,
-        }),
-      });
+      maxMsg.push({ type: 'array', max, message: getLocale('maxRule', `超过最大选项限制[最多选${max}个]`, { max: `${max}` }) });
     }
     return [...minMsg, ...maxMsg];
   }, [min, max]);
@@ -245,7 +244,7 @@ const LxSelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
           columns={myColumns()}
           disabled={disabled}
           value={curValue}
-          onChange={value => {
+          onChange={(value) => {
             let _curValue = value;
             if (max && value.length > max) {
               // 超过最大值则取后面选的

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

@@ -1,9 +1,9 @@
-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 Field from '@lingxiteam/dform/es/components/Field';
 import LxSelector from './LxSelector';
+import React from 'react';
+import { DFormContext } from '../utils/form';
 
 export interface SelectorProps {
   options: any;
@@ -13,7 +13,7 @@ export interface SelectorProps {
   multiple?: boolean;
   className?: string;
   columns?: string;
-  customize?: number; // 自定义列数
+  customize?: number;// 自定义列数
   src?: string;
   fileCode?: string;
   backgroundType: any;
@@ -26,7 +26,10 @@ export interface SelectorProps {
   name?: string;
 }
 const MySelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
-  const { fieldProps, name } = props;
+  const {
+    fieldProps,
+    name,
+  } = props;
 
   const { isForm } = React.useContext(DFormContext) || {};
 
@@ -39,7 +42,12 @@ const MySelector = LingxiForwardRef<any, SelectorProps>((props, ref) => {
   }
   return (
     <FormItem>
-      <Field required={false} title={name} name={fieldProps} params={{ formFlag: true, hidden: true }}>
+      <Field
+        required={false}
+        title={name}
+        name={fieldProps}
+        params={{ formFlag: true, hidden: true }}
+      >
         <LxSelector {...props} ref={ref} />
       </Field>
     </FormItem>

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

@@ -1,5 +1,5 @@
-import { EngineBaseProps } from '@lingxiteam/types';
 import React, { useEffect, useState } from 'react';
+import { EngineBaseProps } from '@lingxiteam/types';
 import { SideBarTabsProps } from './PropsType';
 
 interface TabPageProps {
@@ -12,7 +12,7 @@ interface TabPageProps {
   reloadPageKey?: string;
 }
 
-const TabPage: React.FC<TabPageProps> = props => {
+const TabPage: React.FC<TabPageProps> = (props) => {
   const { getEngineApis, $$componentItem, activeKey, lcdpParentRenderId, item, index, reloadPageKey } = props;
   const { PageView } = getEngineApis();
   const [load, setLoad] = useState(false);
@@ -34,22 +34,21 @@ const TabPage: React.FC<TabPageProps> = props => {
     }
   }, [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;
+
+  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.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useImperativeHandle, useState } from 'react';
-import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useState, useCallback, useEffect, useImperativeHandle } from 'react';
 import { SideBar } from 'antd-mobile-5';
-import classNames from 'classnames';
-import './index.less';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { SideBarProps, SideBarTabsProps } from './PropsType';
 import TabPage from './TabPage';
+import classNames from 'classnames';
+import './index.less';
+
 
 const prefixCls = 'appSideBar';
 const MySideBar = LingxiForwardRef<any, SideBarProps>((props, ref) => {
@@ -24,14 +25,12 @@ const MySideBar = LingxiForwardRef<any, SideBarProps>((props, ref) => {
   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 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);
@@ -44,9 +43,12 @@ const MySideBar = LingxiForwardRef<any, SideBarProps>((props, ref) => {
     setReloadPageKey(`${key}--##sideBarKey##--${Date.now()}`);
   };
 
-  useImperativeHandle(ref, () => ({
-    reloadPage: tabReloadPage,
-  }));
+  useImperativeHandle(
+    ref,
+    () => ({
+      reloadPage: tabReloadPage,
+    }),
+  );
 
   useEffect(() => {
     // finalTabs用于展示可显示的侧栏数量，tabs用作右侧页面的缓存，防止页面设置为可显示的时候又重新加载已显示的页面。
@@ -68,55 +70,60 @@ const MySideBar = LingxiForwardRef<any, SideBarProps>((props, ref) => {
 
   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}
-                />
+      {(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>
               ))}
-            </SideBar>
+            </div>
           </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 className="my-side-bar-body">
+            {Array.isArray(tabs) ? (<span>组件未配置页面</span>) : (<span>组件面板设置数据格式错误</span>)}
           </div>
-        </div>
-      ) : (
-        <div className="my-side-bar-body">{Array.isArray(tabs) ? <span>组件未配置页面</span> : <span>组件面板设置数据格式错误</span>}</div>
-      )}
+        )
+      }
     </div>
   );
 });

package/lib/h5public/src/components/factory/src/Signature/Signature.tsx

@@ -0,0 +1,144 @@
+import Signature from '@lingxiteam/antd-mobile-plus/es/Signature';
+import { SignatureType } from '@lingxiteam/antd-mobile-plus/es/Signature/PropsType';
+import { Toast } from 'antd-mobile-5';
+import React, { useEffect } from 'react';
+import { dataURLtoFile } from '../utils';
+import UploadHandle from '../utils/upload';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+
+export interface SignatureProps extends SignatureType {
+  resAliaKeys?: any;
+  onChange: (e: any) => void;
+  fileName: string;
+  headers?: any;
+  credentials: boolean;
+  uploadType?: string;
+  visible: boolean;
+  columns:any;
+  uploadResultRef?: any;
+}
+
+export interface SignatureRef {
+  value?: () => any;
+  clearValue?: () => void;
+}
+const MySignature = LingxiForwardRef<SignatureRef, SignatureProps>((props, ref) => {
+  const {
+    onChange,
+    fileName = 'file',
+    headers,
+    resAliaKeys,
+    credentials,
+    uploadType,
+    style,
+    visible = true,
+    columns,
+    getEngineApis,
+    className,
+    $$componentItem,
+    type = 'image/png',
+    encoderOptions = 0.92,
+    clear,
+    footerNode,
+    getCanvasRef,
+    uploadResultRef,
+    ...restProps
+  } = props;
+  const { api = '', _source, _serviceId } = columns || {};
+  // @ts-ignore
+  const { contentBackground, contentBorderRadius, ...resStyle } = style || {};
+  const { http, downFieldPrefix, getLocale, getAppFileUrlById } = getEngineApis() || {};
+  const hiddenStyle = useHiddenStyle(visible);
+  
+  useEffect(() => {
+    if (!uploadResultRef.current) {
+      const extendData: any = {};
+      if (_source === 'std') {
+        extendData['ORCHESTRATION.appId'] = $$componentItem?.appId;
+        extendData['ORCHESTRATION.serviceVersionId'] = _serviceId;
+      }
+      uploadResultRef.current = new UploadHandle({
+        request: http,
+        alias: resAliaKeys,
+        filePrefix: downFieldPrefix(),
+        fileName,
+        getLocale,
+        url: api,
+        headers,
+        onChange: (v) => {
+          if (onChange) {
+            onChange(v);
+          }
+        },
+        credentials: credentials === true ? 'include' : 'same-origin',
+        extendUploadData: extendData,
+        getAppFileUrlById,
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (uploadResultRef?.current) {
+      uploadResultRef.current.setLocale(getLocale);
+    }
+  }, [getLocale]);
+  const getSigin = (dataURI: string) => {
+    if (uploadType === 'base64StringType') {
+      // 不做图片上传，将图片base64数据返回
+      if (onChange) {
+        onChange(dataURI);
+      }
+    } else {
+      uploadResultRef.current.setProps({
+        file: dataURLtoFile(dataURI, 'png'),
+        hooks: {
+          uploadAfter: () => {
+            Toast.show({
+              content: getLocale('Upload.success'),
+              icon: 'success',
+            });
+          },
+          uploadError: () => {
+            Toast.show({
+              content: getLocale('Upload.failed'),
+              icon: 'fail',
+            });
+          },
+        },
+      });
+      uploadResultRef.current.sendRequest();
+    }
+  };
+
+  const renderFooterNode = () => {
+    if (footerNode === true) {
+      return <></>;
+    }
+    // 使用内部的footerNode
+    return undefined;
+  };
+  return (
+    <Signature
+      {...restProps}
+      style={{
+        width: `${style?.width ? style.width : '100%'}`,
+        height: `${style?.height ? style.height : '100%'}`,
+        ...resStyle,
+        ...hiddenStyle,
+      }}
+      footerNode={renderFooterNode()}
+      className={className}
+      contentBackground={contentBackground}
+      contentBorderRadius={contentBorderRadius}
+      getSigin={getSigin}
+      getCanvasRef={getCanvasRef}
+      clear={clear}
+      type={type}
+      encoderOptions={encoderOptions}
+      okText={getLocale('confirm')}
+      clearText={getLocale('clearText')}
+    />
+  );
+});
+
+export default MySignature;