@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/h5public/src/components/factory/src/RemoteComponent/constant.ts

@@ -1,22 +1,23 @@
-import FishRender from './components/FishRender';
 import ReactRender from './components/ReactRender';
+import FishRender from './components/FishRender';
 import VueRender from './components/VueRender';
 
+
 /**
  * 合并方法，支持对象中包含getter方法
  * @param object
  * @param otherArgs
  */
-export function mergeGetter<T extends Record<string, any>, S1 extends Record<string, any>, S2 extends Record<string, any>>(
-  object: T,
-  source1: S1,
-  ...args: S2[]
-) {
+export function mergeGetter<
+  T extends Record<string, any>,
+  S1 extends Record<string, any>,
+  S2 extends Record<string, any>,
+>(object: T, source1: S1, ...args: S2[]) {
   const target: Record<string, any> = object || {};
 
   // 合并ref 保持getter对象不被转义
   const merge = (o: Record<string, any> = {}) => {
-    Object.keys(o).forEach(key => {
+    Object.keys(o).forEach((key) => {
       const descriptor = Object.getOwnPropertyDescriptor(o, key);
       if (descriptor) {
         Object.defineProperty(target, key, descriptor!);
@@ -31,7 +32,7 @@ export function mergeGetter<T extends Record<string, any>, S1 extends Record<str
 
   const sources: (S1 | S2)[] = [source1, ...args];
 
-  sources.forEach(source => {
+  sources.forEach((source) => {
     merge(source);
   });
 

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

@@ -1,7 +1,7 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useDeepCompareEffect } from '../utils/ahooks';
-import { mergeGetter, RemoteComponentMap } from './constant';
+import { RemoteComponentMap, mergeGetter } from './constant';
 
 export interface MyRemoteComponentProps {
   url: string;
@@ -13,64 +13,70 @@ export interface MyRemoteComponentProps {
   type?: 'React' | 'Vue' | 'Fish';
 }
 
-const RemoteComponent = LingxiForwardRef<any, MyRemoteComponentProps>((props, ref) => {
-  const { url, customProps: myProps, visible = true, fileCode, associatedType = 'file', getEngineApis, type = 'React', ...restProps } = props;
-  const [remoteUrl, setRemoteUrl] = useState<string>(url || '');
-  const engineApis = getEngineApis();
-  const [customProps, setProps] = useState<any>(myProps);
-  const [myRefs, setMyRefs] = useState<any>();
-  const isDid = useRef(false);
-  useDeepCompareEffect(() => {
-    setProps(myProps);
-  }, [myProps]);
-  useEffect(() => {
-    // 如果是远程服务组件
-    if (fileCode && associatedType === 'file') {
-      setRemoteUrl(engineApis?.getAppFileUrlByFileCode(fileCode));
-    } else if (url) {
-      setRemoteUrl(url);
+const RemoteComponent = LingxiForwardRef<any, MyRemoteComponentProps>(
+  (props, ref) => {
+    const {
+      url,
+      customProps: myProps,
+      visible = true,
+      fileCode,
+      associatedType = 'file',
+      getEngineApis,
+      type = 'React',
+      ...restProps
+    } = props;
+    const [remoteUrl, setRemoteUrl] = useState<string>(url || '');
+    const engineApis = getEngineApis();
+    const [customProps, setProps] = useState<any>(myProps);
+    const [myRefs, setMyRefs] = useState<any>();
+    const isDid = useRef(false);
+    useDeepCompareEffect(() => {
+      setProps(myProps);
+    }, [myProps]);
+    useEffect(() => {
+      // 如果是远程服务组件
+      if (fileCode && associatedType === 'file') {
+        setRemoteUrl(engineApis?.getAppFileUrlByFileCode(fileCode));
+      } else if (url) {
+        setRemoteUrl(url);
+      }
+    }, [url, fileCode]);
+
+    useImperativeHandle(ref, () => (mergeGetter(myRefs || {}, {
+      setCompProps: (params: any) => {
+        setProps({ ...customProps, ...params });
+      },
+      setSrc: (src: string) => {
+        if (src.startsWith('http')) {
+          setRemoteUrl(src);
+        } else {
+          // 怀疑是文件id
+          setRemoteUrl(engineApis?.getAppFileUrlByFileCode(src));
+        }
+      },
+    })), [myRefs]);
+
+    if (!visible) {
+      return <></>;
     }
-  }, [url, fileCode]);
 
-  useImperativeHandle(
-    ref,
-    () =>
-      mergeGetter(myRefs || {}, {
-        setCompProps: (params: any) => {
-          setProps({ ...customProps, ...params });
-        },
-        setSrc: (src: string) => {
-          if (src.startsWith('http')) {
-            setRemoteUrl(src);
-          } else {
-            // 怀疑是文件id
-            setRemoteUrl(engineApis?.getAppFileUrlByFileCode(src));
+    const Component = RemoteComponentMap[type];
+    return (
+      <Component
+        engineType="engine"
+        {...restProps}
+        customProps={customProps}
+        url={remoteUrl}
+        getEngineApis={getEngineApis}
+        forwardRef={(refs: any) => {
+          if (refs && isDid.current === false) {
+            isDid.current = true;
+            setMyRefs(refs);
           }
-        },
-      }),
-    [myRefs]
-  );
-
-  if (!visible) {
-    return <></>;
+        }}
+      />
+    );
   }
-
-  const Component = RemoteComponentMap[type];
-  return (
-    <Component
-      engineType="engine"
-      {...restProps}
-      customProps={customProps}
-      url={remoteUrl}
-      getEngineApis={getEngineApis}
-      forwardRef={(refs: any) => {
-        if (refs && isDid.current === false) {
-          isDid.current = true;
-          setMyRefs(refs);
-        }
-      }}
-    />
-  );
-});
+);
 
 export default RemoteComponent;

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

@@ -0,0 +1,180 @@
+import Calendar from '@lingxiteam/antd-mobile-plus/es/Calendar';
+import SearchView from '@lingxiteam/antd-mobile-plus/es/SearchView';
+import { SearchViewType } from '@lingxiteam/antd-mobile-plus/es/SearchView/PropsType';
+import moment from 'moment';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { $$componentItem } from '../interfaces/types';
+import './index.less';
+import { getCalendarLocale } from '../utils/i18n';
+
+interface SearchStyle extends React.CSSProperties {
+  inputStyle?: React.CSSProperties
+}
+export interface MySearchViewProps extends SearchViewType {
+  style: SearchStyle;
+  searchViewType?: string;
+  _component?: any;
+  showDateRange?: boolean;
+  onChange?: any;
+  minStartDate?: string;
+  visible?: boolean;
+  $$componentItem: $$componentItem;
+  className: string;
+  myOnChange: (e: any) => void;
+  filterObject?: any;
+  setFilterObject: (e: any) => void;
+  myFilterData?: any;
+  myFilterValue?: any;
+  setMyFilterValue?: (value: any) => void;
+}
+
+const prefixWrap = 'alita-search-view-wrap';
+
+const MySearchView = LingxiForwardRef<unknown, MySearchViewProps>((props, ref) => {
+  const {
+    children,
+    _component,
+    filterData,
+    filterValue,
+    style = {},
+    searchViewType = 'text',
+    onFilterChange = () => { },
+    onChange,
+    showDateRange,
+    minStartDate,
+    value,
+    visible = true,
+    $$componentItem,
+    className,
+    getEngineApis,
+    labelAlias = 'label',
+    valueAlias = 'value',
+    myOnChange,
+    filterObject,
+    setFilterObject,
+    myFilterData,
+    myFilterValue,
+    setMyFilterValue = () => { },
+    ...restProps
+  } = props;
+  const { getLocale } = getEngineApis?.() || {};
+  const { inputStyle = {}, ...restStyle } = style;
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [startDate, setStartDate] = useState('开始时间');
+  const [endDate, setEndDate] = useState('结束时间');
+  const [minDate, setMinDate] = useState(new Date('2016/01/01'));
+  // 获取默认
+  const filterItemWithValue = (data: any[] = [], value = '', labelAlias: string, valueAlias: string) => {
+    if (data.length === 0) {
+      return {
+        [labelAlias]: '',
+        [valueAlias]: '',
+      };
+    }
+    const resultList = data.filter((item: any) => item[valueAlias] === value);
+    if (resultList.length > 0) {
+      return resultList[0];
+    }
+    return data[0];
+  };
+
+  // 重写onFilterChange,修复搜索栏左侧数据选择新值后展示数据未修改的问题。
+  const myOnFilterChange = (e: any) => {
+    const object: any = { ...filterObject };
+    if (e[valueAlias]) {
+      object[valueAlias] = e[valueAlias];
+      object[labelAlias] = e[labelAlias];
+      setMyFilterValue(e[valueAlias]);
+    }
+    if (e.startDate) {
+      object.startDate = e.startDate;
+      object.endDate = e.endDate;
+    }
+    setFilterObject({ ...object });
+    if (onFilterChange) {
+      onFilterChange(object);
+    }
+  };
+
+
+  useEffect(() => {
+    if (minStartDate) {
+      if (minStartDate.includes('new Date')) {
+        setMinDate(new Date());
+      } else {
+        setMinDate(new Date(minStartDate));
+      }
+    }
+  }, [minStartDate]);
+  useEffect(() => {
+    const object = filterItemWithValue(filterData, filterObject, labelAlias, valueAlias);
+    setFilterObject({ ...object });
+    setMyFilterValue(filterValue);
+  }, [filterValue]);
+
+
+  if (!visible) {
+    return <></>;
+  }
+  return (
+    <div id={$$componentItem.id} className={classNames(prefixWrap, className)}>
+      <SearchView
+        {...restProps}
+        // @ts-ignore
+        value={typeof value === 'object' ? value?.inputValue : value}
+        filterData={myFilterData}
+        type={searchViewType}
+        filterValue={myFilterValue}
+        PopViewPanel={children}
+        onFilterChange={myOnFilterChange}
+        onChange={myOnChange}
+        style={{ ...restStyle }}
+        inputStyle={inputStyle}
+        labelAlias={labelAlias}
+        valueAlias={valueAlias}
+        cancelText={getLocale('cancelText')}
+        // @ts-ignore
+        autoComplete="off"
+      />
+      {showDateRange && (
+        <div className={`${prefixWrap}-date-range`} onClick={() => setShowCalendar(true)}>
+          <div className="range-content">
+            <span className="date">{startDate === '开始时间' ? getLocale('DformRangePicker.selectStart', '开始时间') : startDate}</span>
+            <span className="date-space">——</span>
+            <span className="date">{endDate === '结束时间' ? getLocale('DformRangePicker.selectEnd', '结束时间') : endDate}</span>
+          </div>
+        </div>
+      )}
+      <Calendar
+        show={showCalendar}
+        type="range"
+        allowSameDay
+        minDate={minDate}
+        maxDate={new Date()}
+        onClose={() => {
+          setShowCalendar(false);
+        }}
+        onConfirm={(e: any) => {
+          setShowCalendar(false);
+          if (Array.isArray(e) && e.length > 1) {
+            const start = moment(e[0]).format('yyyy/MM/DD');
+            const end = moment(e[1]).format('yyyy/MM/DD');
+            setStartDate(start);
+            setEndDate(end);
+            myOnFilterChange({ startDate: start, endDate: end });
+          }
+        }}
+        title={getLocale('SearchView.title')}
+        confirmText={getLocale('confirm')}
+        confirmDisabledText={getLocale('confirm')}
+        getLocale={(t, tempValue) => {
+          return getCalendarLocale(getLocale, t, tempValue);
+        }}
+      />
+    </div>
+  );
+});
+
+export default MySearchView;

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

@@ -1,61 +1,25 @@
-import { Calendar, SearchView, SearchViewType } from '@lingxiteam/antd-mobile-plus';
+import React, { useImperativeHandle, useState, useEffect } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import classNames from 'classnames';
-import moment from 'moment';
-import React, { useEffect, useImperativeHandle, useState } from 'react';
-import { $$componentItem, reloadSelectDataType } from '../interfaces/types';
-import { getCalendarLocale } from '../utils/i18n';
-import './index.less';
+import SearchViewLoader from './loader';
+import { reloadSelectDataType } from '../interfaces/types';
 
-interface SearchStyle extends React.CSSProperties {
-  inputStyle?: React.CSSProperties;
-}
-export interface MySearchViewProps extends SearchViewType {
-  style: SearchStyle;
-  searchViewType?: string;
-  _component?: any;
-  showDateRange?: boolean;
-  onChange?: any;
-  minStartDate?: string;
-  visible?: boolean;
-  $$componentItem: $$componentItem;
-  className: string;
-}
-
-const prefixWrap = 'alita-search-view-wrap';
-
-const MySearchView = LingxiForwardRef<unknown, MySearchViewProps>((props, ref) => {
+const SearchView = LingxiForwardRef<unknown, any>((props, ref) => {
   const {
-    children,
-    _component,
-    filterData,
-    filterValue,
-    style = {},
-    searchViewType = 'text',
-    onFilterChange = () => {},
     onChange,
-    showDateRange,
-    minStartDate,
-    value,
-    visible = true,
-    labelAlias: IlabelAlias = 'label',
+    filterValue,
+    labelAlias:
+     IlabelAlias = 'label',
     valueAlias: VvalueAlias = 'value',
-    $$componentItem,
-    className,
-    getEngineApis,
-    ...restProps
+    filterData,
+    value,
   } = props;
-  const { getLocale } = getEngineApis?.() || {};
-  const { inputStyle = {}, ...restStyle } = style;
-  const [showCalendar, setShowCalendar] = useState(false);
-  const [startDate, setStartDate] = useState('开始时间');
-  const [endDate, setEndDate] = useState('结束时间');
-  const [myFilterValue, setMyFilterValue] = useState(filterValue);
-  const [minDate, setMinDate] = useState(new Date('2016/01/01'));
-  const [filterObject, setFilterObject] = useState<any>({});
-  const [myFilterData, setFilterData] = useState(filterData);
+
   const [labelAlias, setLabelAlias] = useState(IlabelAlias);
   const [valueAlias, setValueAlias] = useState(VvalueAlias);
+  const [filterObject, setFilterObject] = useState<any>({});
+  const [myFilterValue, setMyFilterValue] = useState(filterValue);
+  const [myFilterData, setFilterData] = useState(filterData);
+ 
 
   useEffect(() => {
     setFilterData(filterData);
@@ -66,16 +30,19 @@ const MySearchView = LingxiForwardRef<unknown, MySearchViewProps>((props, ref) =
       onChange({ inputValue: e, filterValue: filterObject });
     }
   };
+
   useImperativeHandle(ref, () => ({
+    // 这里暴漏部分指令方法，后续有需要可以补充
     setDataWithLabelAndValue: (params: reloadSelectDataType) => {
       const { labelKey = 'label', valueKey = 'value', childrenKey, dataSource = [] } = params || {};
       if (dataSource.length === 0 || !valueKey || !labelKey) return;
       let isFindItem;
-      const data = dataSource?.map(item => {
+      const data = dataSource?.map((item: { [x: string]: any; }) => {
         if (item[valueKey] === childrenKey) {
           isFindItem = item;
         }
         return {
+
           ...item,
           [labelKey]: item[labelKey],
           [valueKey]: item[valueKey],
@@ -86,19 +53,15 @@ const MySearchView = LingxiForwardRef<unknown, MySearchViewProps>((props, ref) =
       if (isFindItem) {
         setFilterObject(isFindItem);
         // @ts-ignore
-        setMyFilterValue(isFindItem.value);
+        setMyFilterValue(isFindItem?.value);
       } else if (data.length > 0) {
         setFilterObject(data[0]);
-        // @ts-ignore
         setMyFilterValue(data[0]?.value);
       }
       setFilterData(data);
       if (onChange) {
         // @ts-ignore
-        onChange({
-          inputValue: typeof value === 'object' ? value?.inputValue : value,
-          filterObject,
-        });
+        onChange({ inputValue: typeof value === 'object' ? value?.inputValue : value, filterObject });
       }
       // setData(initData(params.dataSource, params.labelKey, params.valueKey, params.childrenKey));
     },
@@ -107,7 +70,7 @@ const MySearchView = LingxiForwardRef<unknown, MySearchViewProps>((props, ref) =
         onChange({ inputValue: '', filterValue });
       }
     },
-    setValue(value: Object | string) {
+    setValue (value: Object | string) {
       if (typeof value === 'object') {
         if (onChange) {
           onChange(value);
@@ -118,121 +81,22 @@ const MySearchView = LingxiForwardRef<unknown, MySearchViewProps>((props, ref) =
     },
     get value() {
       // @ts-ignore
-      return {
-        inputValue: typeof value === 'object' ? value?.inputValue : value,
-        filterObject,
-      };
+      return { inputValue: typeof value === 'object' ? value?.inputValue : value, filterObject };
     },
   }));
-
-  // 获取默认
-  const filterItemWithValue = (data: any[] = [], value = '', labelAlias: string, valueAlias: string) => {
-    if (data.length === 0) {
-      return {
-        [labelAlias]: '',
-        [valueAlias]: '',
-      };
-    }
-    const resultList = data.filter((item: any) => item[valueAlias] === value);
-    if (resultList.length > 0) {
-      return resultList[0];
-    }
-    return data[0];
-  };
-
-  // 重写onFilterChange,修复搜索栏左侧数据选择新值后展示数据未修改的问题。
-  const myOnFilterChange = (e: any) => {
-    const object: any = { ...filterObject };
-    if (e[valueAlias]) {
-      object[valueAlias] = e[valueAlias];
-      object[labelAlias] = e[labelAlias];
-      setMyFilterValue(e[valueAlias]);
-    }
-    if (e.startDate) {
-      object.startDate = e.startDate;
-      object.endDate = e.endDate;
-    }
-    setFilterObject({ ...object });
-    if (onFilterChange) {
-      onFilterChange(object);
-    }
-  };
-
-  useEffect(() => {
-    if (minStartDate) {
-      if (minStartDate.includes('new Date')) {
-        setMinDate(new Date());
-      } else {
-        setMinDate(new Date(minStartDate));
-      }
-    }
-  }, [minStartDate]);
-  useEffect(() => {
-    const object = filterItemWithValue(filterData, filterObject, labelAlias, valueAlias);
-    setFilterObject({ ...object });
-    setMyFilterValue(filterValue);
-  }, [filterValue]);
-
-  if (!visible) {
-    return <></>;
-  }
-  return (
-    <div id={$$componentItem.id} className={classNames(prefixWrap, className)}>
-      <SearchView
-        {...restProps}
-        // @ts-ignore
-        value={typeof value === 'object' ? value?.inputValue : value}
-        filterData={myFilterData}
-        type={searchViewType}
-        filterValue={myFilterValue}
-        PopViewPanel={children}
-        onFilterChange={myOnFilterChange}
-        onChange={myOnChange}
-        style={{ ...restStyle }}
-        inputStyle={inputStyle}
-        labelAlias={labelAlias}
-        valueAlias={valueAlias}
-        cancelText={getLocale('cancelText')}
-        // @ts-ignore
-        autoComplete="off"
-      />
-      {showDateRange && (
-        <div className={`${prefixWrap}-date-range`} onClick={() => setShowCalendar(true)}>
-          <div className="range-content">
-            <span className="date">{startDate === '开始时间' ? getLocale('DformRangePicker.selectStart', '开始时间') : startDate}</span>
-            <span className="date-space">——</span>
-            <span className="date">{endDate === '结束时间' ? getLocale('DformRangePicker.selectEnd', '结束时间') : endDate}</span>
-          </div>
-        </div>
-      )}
-      <Calendar
-        show={showCalendar}
-        type="range"
-        allowSameDay
-        minDate={minDate}
-        maxDate={new Date()}
-        onClose={() => {
-          setShowCalendar(false);
-        }}
-        onConfirm={(e: any) => {
-          setShowCalendar(false);
-          if (Array.isArray(e) && e.length > 1) {
-            const start = moment(e[0]).format('yyyy/MM/DD');
-            const end = moment(e[1]).format('yyyy/MM/DD');
-            setStartDate(start);
-            setEndDate(end);
-            myOnFilterChange({ startDate: start, endDate: end });
-          }
-        }}
-        title={getLocale('SearchView.title')}
-        confirmText={getLocale('confirm')}
-        confirmDisabledText={getLocale('confirm')}
-        getLocale={(t, tempValue) => {
-          return getCalendarLocale(getLocale, t, tempValue);
-        }}
-      />
-    </div>
-  );
+  
+  return <SearchViewLoader
+    {...props}
+    ref={ref}
+    labelAlias={labelAlias}
+    valueAlias={valueAlias}
+    myOnChange={myOnChange}
+    filterObject={filterObject}
+    myFilterData={myFilterData}
+    setFilterObject={setFilterObject}
+    myFilterValue={myFilterValue}
+    setMyFilterValue={setMyFilterValue}
+  />;
 });
 
-export default MySearchView;
+export default SearchView;

package/lib/h5public/src/components/factory/src/SearchView/loader.tsx

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const LoadableLXRadarChart = Loadable({
+  loader: async () => (await import(/* webpackChunkName: 'factory-SearchView' */ './SearchView')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default LoadableLXRadarChart;