@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/h5public/src/components/factory/src/BasicComponents/DFormWrapper/index.tsx

@@ -1,9 +1,9 @@
+import React, { useMemo } from 'react';
 import { EngineBaseProps } from '@lingxiteam/types';
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
+import './dform.less';
 import Icon from '../../Icon';
 import { dateToFormatter, toDate } from '../../utils/date';
-import './dform.less';
 
 const prefixCls = 'lcdp-dformwrapper';
 
@@ -15,7 +15,7 @@ interface DformWrapperProps {
   getEngineApis: EngineBaseProps['getEngineApis'];
 }
 
-const DFormWrapper: React.FC<DformWrapperProps> = props => {
+const DFormWrapper: React.FC<DformWrapperProps> = (props) => {
   const { children, style, visible, ctmCoverStyle, getEngineApis } = props;
   const { useTopContainerHidden } = getEngineApis?.() || {};
   // 获取上层容器是否被隐藏
@@ -80,7 +80,15 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
   // ];
 
   const getExtra = () => {
-    const { onDformItemExtra, icon = {}, fieldProps, defaultValue, postfix, postfixIconPosition, iconColor } = children?.props || {};
+    const {
+      onDformItemExtra,
+      icon = {},
+      fieldProps,
+      defaultValue,
+      postfix,
+      postfixIconPosition,
+      iconColor,
+    } = children?.props || {};
     const { type, theme, isIconFont, fontAddress, iconFileInfo, iconFile } = icon;
     let value = defaultValue;
     if (children?.props?.dformType === 'DAddressPicker') {
@@ -97,7 +105,7 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
       gap: '4px',
       whiteSpace: 'nowrap',
     };
-    if (type) {
+    if (type || icon?.isSystem || iconFile?.fileCode) {
       after = (
         // @ts-ignore
         <Icon
@@ -108,6 +116,8 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
             iconFileInfo,
             fontAddress,
             iconFile,
+            isSystem: icon.isSystem,
+            systemIconKey: icon.systemIconKey,
           }}
           className={`${prefixCls}-extra`}
           style={{ color: iconColor }}
@@ -150,8 +160,19 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
     );
   };
   const getOriginStyle = (props: any) => {
-    const { borderSetting, borderRadius, backgroundColor, color, fontSize, fontWeight, textAlign, lineHeight, boxStyle, titleStyle, coverStyle } =
-      props || {};
+    const {
+      borderSetting,
+      borderRadius,
+      backgroundColor,
+      color,
+      fontSize,
+      fontWeight,
+      textAlign,
+      lineHeight,
+      boxStyle,
+      titleStyle,
+      coverStyle,
+    } = props || {};
     const originStyle = {
       backgroundColor,
       fontSize,
@@ -206,13 +227,7 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
       borderArr = borderSetting.split(' ');
     }
     dformStyleProps.boxStyle = { borderRadius, backgroundColor, ...boxStyle };
-    dformStyleProps.titleStyle = {
-      color,
-      fontSize,
-      fontWeight,
-      lineHeight,
-      ...titleStyle,
-    };
+    dformStyleProps.titleStyle = { color, fontSize, fontWeight, lineHeight, ...titleStyle };
     dformStyleProps.coverStyle = {
       color: inputColor || color,
       fontSize: inputFontSize || fontSize,
@@ -254,7 +269,10 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
     } else {
       dformStyleProps.showExtra = !!dformStyleProps.extra;
     }
-    if (children?.props?.dformType !== 'DformInput' && children?.props?.dformType !== 'DformInputNumber') {
+    if (
+      children?.props?.dformType !== 'DformInput' &&
+      children?.props?.dformType !== 'DformInputNumber'
+    ) {
       dformStyleProps.arrow = !getExtra();
     }
   }
@@ -292,7 +310,7 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
   // 标题图标
   const { titleIcon, prefixIcon, color, fontSize, titleExtension } = children?.props || {};
   const titleIconRender = useMemo(() => {
-    if (titleIcon === 'icon' && (prefixIcon?.prefixIconType || prefixIcon?.prefixIconiconFile) && !titleExtension) {
+    if (titleIcon === 'icon' && (prefixIcon?.prefixIconType || prefixIcon?.prefixIconiconFile || prefixIcon?.isSystem) && !titleExtension) {
       return (
         // @ts-ignore
         <Icon
@@ -303,14 +321,11 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
             fontAddress: prefixIcon?.prefixIconFontAddress,
             iconFileInfo: prefixIcon?.prefixIconIconFileInfo,
             iconFile: prefixIcon?.prefixIconiconFile,
+            isSystem: prefixIcon?.isSystem,
+            systemIconKey: prefixIcon?.systemIconKey,
           }}
           className="cust-icon-theme"
-          style={{
-            fontSize,
-            width: fontSize,
-            height: fontSize,
-            marginRight: '6px',
-          }}
+          style={{ fontSize, width: fontSize, height: fontSize, marginRight: '6px' }}
           getEngineApis={getEngineApis}
         />
       );
@@ -318,7 +333,7 @@ const DFormWrapper: React.FC<DformWrapperProps> = props => {
     return '';
   }, [titleIcon, prefixIcon, color, fontSize]);
 
-  const myProps = { titleExtension: titleIconRender, ...children?.props } || {};
+  const myProps = { titleExtension: titleIconRender, ...children?.props };
   // if (children?.props?.status === '4') { // 设置表单只读
   //   myProps.readonly = true;
   // } else {

package/lib/h5public/src/components/factory/src/BasicComponents/Empty/empty.tsx

@@ -4,24 +4,10 @@ export default (props: any) => {
   return (
     <svg width="1.28rem" viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g id=".components/empty-img-simple" clipPath="url(#clip0_6752_81174)">
-        <path
-          id="Vector"
-          d="M32 39.7027C49.6731 39.7027 64 36.592 64 32.7547C64 28.9174 49.6731 25.8066 32 25.8066C14.3269 25.8066 0 28.9174 0 32.7547C0 36.592 14.3269 39.7027 32 39.7027Z"
-          fill="#F5F5F5"
-        />
+        <path id="Vector" d="M32 39.7027C49.6731 39.7027 64 36.592 64 32.7547C64 28.9174 49.6731 25.8066 32 25.8066C14.3269 25.8066 0 28.9174 0 32.7547C0 36.592 14.3269 39.7027 32 39.7027Z" fill="#F5F5F5" />
         <g id="Group">
-          <path
-            id="Vector_2"
-            d="M55 13.6653L44.854 2.24866C44.367 1.47048 43.656 1 42.907 1H21.093C20.344 1 19.633 1.47048 19.146 2.24767L9 13.6663V22.8367H55V13.6653Z"
-            fill="white"
-            stroke="#D9D9D9"
-          />
-          <path
-            id="Vector_3"
-            d="M41.613 16.8135C41.613 15.2205 42.607 13.9053 43.84 13.9043H55V31.9067C55 34.0139 53.68 35.741 52.05 35.741H11.95C10.32 35.741 9 34.0129 9 31.9067V13.9043H20.16C21.393 13.9043 22.387 15.2175 22.387 16.8106V16.8324C22.387 18.4255 23.392 19.7119 24.624 19.7119H39.376C40.608 19.7119 41.613 18.4136 41.613 16.8205V16.8135Z"
-            fill="#FAFAFA"
-            stroke="#D9D9D9"
-          />
+          <path id="Vector_2" d="M55 13.6653L44.854 2.24866C44.367 1.47048 43.656 1 42.907 1H21.093C20.344 1 19.633 1.47048 19.146 2.24767L9 13.6663V22.8367H55V13.6653Z" fill="white" stroke="#D9D9D9" />
+          <path id="Vector_3" d="M41.613 16.8135C41.613 15.2205 42.607 13.9053 43.84 13.9043H55V31.9067C55 34.0139 53.68 35.741 52.05 35.741H11.95C10.32 35.741 9 34.0129 9 31.9067V13.9043H20.16C21.393 13.9043 22.387 15.2175 22.387 16.8106V16.8324C22.387 18.4255 23.392 19.7119 24.624 19.7119H39.376C40.608 19.7119 41.613 18.4136 41.613 16.8205V16.8135Z" fill="#FAFAFA" stroke="#D9D9D9" />
         </g>
       </g>
       <defs>

package/lib/h5public/src/components/factory/src/BasicComponents/Empty/index.tsx

@@ -1,8 +1,8 @@
-import { LocaleFunction } from '@lingxiteam/types';
-import { ErrorBlock } from 'antd-mobile-5';
 import React, { FC, useMemo } from 'react';
-import useCompState from '../../utils/hooks/useCompState';
+import { ErrorBlock } from 'antd-mobile-5';
+import { LocaleFunction } from '@lingxiteam/types';
 import EmptySvg from './empty';
+import useCompState from '../../utils/hooks/useCompState';
 import './index.less';
 
 interface EmptyProps {
@@ -10,7 +10,7 @@ interface EmptyProps {
   getLocale: LocaleFunction;
 }
 
-const Empty: FC<EmptyProps> = props => {
+const Empty: FC<EmptyProps> = (props) => {
   const { dataState, getLocale } = props;
 
   const { stateIcon, stateTip } = useCompState({ dataState, type: 'empty' });

package/lib/h5public/src/components/factory/src/BasicComponents/FormItem/index.tsx

@@ -5,7 +5,7 @@ import React, { FC } from 'react';
  */
 interface FormItemProps {}
 
-const FormItem: FC<FormItemProps> = props => {
+const FormItem: FC<FormItemProps> = (props) => {
   // 增加form组件的classname, 使对应的customClass生效。
   let formItemClassName = '';
   const getClassName = (item: any) => {

package/lib/h5public/src/components/factory/src/BasicComponents/ForwardRef/index.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 function AppForwardRef<P, T = any>(
-  Comp: FC<P & { ref?: React.LegacyRef<T> | undefined }>
+  Comp: FC<P & { ref?: React.LegacyRef<T> | undefined }>,
 ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
 
 function AppForwardRef(Comp: any) {

package/lib/h5public/src/components/factory/src/BasicComponents/Image/index.tsx

@@ -1,12 +1,13 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
-export interface ImageProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface ImageProps
+  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
   defaultSrc?: string;
   errorSrc?: string;
 }
 
-const MyImage: FC<ImageProps> = props => {
+const MyImage: FC<ImageProps> = (props) => {
   const { defaultSrc, errorSrc, ...restProps } = props;
   const imageRef = useRef<HTMLImageElement>();
   const [src, setSrc] = useState(props.defaultSrc);

package/lib/h5public/src/components/factory/src/BasicComponents/Spin/index.tsx

@@ -1,6 +1,6 @@
+import type { FC } from 'react';
 import React from 'react';
 import classNames from 'classnames';
-import type { FC } from 'react';
 import './index.less';
 
 interface SpinProps {
@@ -32,7 +32,7 @@ const SpinItem = (props: SpinProps) => {
   );
 };
 
-const Spin: FC<SpinProps> = props => {
+const Spin: FC<SpinProps> = (props) => {
   const { spinning = true, tip, children, size = 'default' } = props;
 
   const SpinWrapper = (

package/lib/h5public/src/components/factory/src/BasicComponents/SpinComp/index.tsx

@@ -1,5 +1,5 @@
-import { DotLoading } from 'antd-mobile-5';
 import React, { FC, useMemo } from 'react';
+import { DotLoading } from 'antd-mobile-5';
 // import { LocaleFunction } from '@lingxiteam/types';
 import useCompState from '../../utils/hooks/useCompState';
 
@@ -11,7 +11,7 @@ interface SpinProps {
 /**
  * 根据数据状态dataState设置返回
  */
-const Spin: FC<SpinProps> = props => {
+const Spin: FC<SpinProps> = (props) => {
   const { dataState } = props;
   const { stateIcon, stateTip } = useCompState({ dataState, type: 'loading' });
 

package/lib/h5public/src/components/factory/src/BasicComponents/Sticky/index.tsx

@@ -1,5 +1,5 @@
+import React, { FC, useRef, useMemo } from 'react';
 import { useInViewport } from 'ahooks';
-import React, { FC, useMemo, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import './index.less';
 
@@ -16,7 +16,7 @@ interface StickyProps {
   children: (opts: StickyChildProps) => React.ReactElement;
 }
 
-const StickyHeader: FC<StickyProps> = props => {
+const StickyHeader: FC<StickyProps> = (props) => {
   const { children, isOpenSticky = false, top = 0 } = props;
   const ref = useRef(null);
   const contentRef = useRef<Element>();

package/lib/h5public/src/components/factory/src/BasicComponents/index.ts

@@ -1,8 +1,8 @@
-export { default as DFormWrapper } from './DFormWrapper';
-export { default as Empty } from './Empty';
-export { default as FormItem } from './FormItem';
 export { default as AppForwardRef } from './ForwardRef';
 export { default as Image } from './Image';
+export { default as DFormWrapper } from './DFormWrapper';
 export { default as Spin } from './Spin';
-export { default as SpinComp } from './SpinComp';
 export { default as StickyHeader } from './Sticky';
+export { default as FormItem } from './FormItem';
+export { default as SpinComp } from './SpinComp';
+export { default as Empty } from './Empty';

package/lib/h5public/src/components/factory/src/BlockSelect/components/ActionView/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import CustomBtn from '../../../DGroup/CustomBtn';
 import Icon from '../../../Icon';
-import '../../index.less';
 import CheckIcon from '../Icon';
+import '../../index.less';
 
 const ActionView = (props: any) => {
   const {
@@ -42,7 +42,8 @@ const ActionView = (props: any) => {
           {myActionView.map((item: any, index: number) => {
             const { title, iconPos, icon, customStyle, customCode, isIcon, rule } = item;
 
-            const svgContent = (icon && icon?.iconFileInfo && icon?.iconFileInfo?.svgContent) || null;
+            const svgContent =
+              (icon && icon?.iconFileInfo && icon?.iconFileInfo?.svgContent) || null;
 
             let myTitle = title;
             const buttonPadding: any = {};
@@ -172,37 +173,19 @@ const ActionView = (props: any) => {
             switch (customStyle) {
               case 'borderBtn': // 描边按钮
                 return (
-                  <div
-                    className="borderBtn"
-                    style={buttonPadding}
-                    onClick={e => {
-                      myOnClick(e);
-                    }}
-                  >
+                  <div className="borderBtn" style={buttonPadding} onClick={(e) => { myOnClick(e); }}>
                     {view}
                   </div>
                 );
               case 'ligthColor': // 浅色按钮
                 return (
-                  <div
-                    className="lightBtn"
-                    style={buttonPadding}
-                    onClick={e => {
-                      myOnClick(e);
-                    }}
-                  >
+                  <div className="lightBtn" style={buttonPadding} onClick={(e) => { myOnClick(e); }}>
                     {view}
                   </div>
                 );
               case 'primaryBtn': // 纯色按钮
                 return (
-                  <div
-                    className="primaryBtn"
-                    style={buttonPadding}
-                    onClick={e => {
-                      myOnClick(e);
-                    }}
-                  >
+                  <div className="primaryBtn" style={buttonPadding} onClick={(e) => { myOnClick(e); }}>
                     {view}
                   </div>
                 );
@@ -212,19 +195,17 @@ const ActionView = (props: any) => {
                   ...icon,
                   svgContent,
                 };
-                return <CustomBtn customCode={customCode} icon={iconInfo} title={myTitle} isIcon={isIcon} />;
-              default: {
-                // 默认图标按钮
                 return (
-                  <div
-                    style={{ ...buttonStyle, ...buttonPadding }}
-                    onClick={e => {
-                      myOnClick(e);
-                    }}
-                  >
-                    {view}
-                  </div>
+                  <CustomBtn
+                    customCode={customCode}
+                    icon={iconInfo}
+                    title={myTitle}
+                    isIcon={isIcon}
+                  />
                 );
+              default: {
+                // 默认图标按钮
+                return <div style={{ ...buttonStyle, ...buttonPadding }} onClick={(e) => { myOnClick(e); }}>{view}</div>;
               }
             }
           })}
@@ -277,13 +258,7 @@ const ActionView = (props: any) => {
             >
               {getLocale('selectAll', '全选')}
             </span>
-            {showChecked && (
-              <span className="styleOne-number">
-                {getLocale('selectNumber', `已选${selectedNumber}个`, {
-                  num: selectedNumber,
-                })}
-              </span>
-            )}
+            {showChecked && <span className="styleOne-number">{getLocale('selectNumber', `已选${selectedNumber}个`, { num: selectedNumber })}</span>}
           </div>
         );
         break;
@@ -298,13 +273,7 @@ const ActionView = (props: any) => {
             >
               {getLocale('selectAll', '全选')}
             </span>
-            {showChecked && (
-              <span className="styleTwo-number">
-                {getLocale('selectNumber', `已选${selectedNumber}个`, {
-                  num: selectedNumber,
-                })}
-              </span>
-            )}
+            {showChecked && <span className="styleTwo-number">{getLocale('selectNumber', `已选${selectedNumber}个`, { num: selectedNumber })}</span>}
           </div>
         );
         break;
@@ -333,13 +302,7 @@ const ActionView = (props: any) => {
               }}
             >
               <span>{getLocale('selectAll', '全选')}</span>
-              {showChecked && (
-                <span className="styleDefault-number">
-                  {getLocale('selectNumber', `已选${selectedNumber}个`, {
-                    num: selectedNumber,
-                  })}
-                </span>
-              )}
+              {showChecked && <span className="styleDefault-number">{getLocale('selectNumber', `已选${selectedNumber}个`, { num: selectedNumber })}</span>}
             </div>
           );
         }

package/lib/h5public/src/components/factory/src/BlockSelect/components/CheckBox/index.tsx

@@ -19,7 +19,7 @@ interface CheckBoxProps extends IconProps {
   selectIconColor?: any;
 }
 
-const CheckBox: FC<CheckBoxProps> = props => {
+const CheckBox: FC<CheckBoxProps> = (props) => {
   const { col, space, style, children, iconPosition, defaultIcon, ...iconProps } = props;
   const myStyle = { ...style } || {};
   if (iconProps?.restItem?.myBSHidden === 'hidden') {
@@ -29,7 +29,13 @@ const CheckBox: FC<CheckBoxProps> = props => {
   }
   return (
     <div style={myStyle} className={classNames(`${prefixCls}-blockSelect`)}>
-      {iconPosition === 'left' && defaultIcon !== 'none' && <Icon {...iconProps} iconPosition={iconPosition} defaultIcon={defaultIcon} />}
+      {iconPosition === 'left' && defaultIcon !== 'none' && (
+        <Icon
+          {...iconProps}
+          iconPosition={iconPosition}
+          defaultIcon={defaultIcon}
+        />
+      )}
       <div
         className={`${prefixCls}-content`}
         onClick={() =>
@@ -41,7 +47,13 @@ const CheckBox: FC<CheckBoxProps> = props => {
       >
         {children}
       </div>
-      {iconPosition === 'right' && defaultIcon !== 'none' && <Icon {...iconProps} iconPosition={iconPosition} defaultIcon={defaultIcon} />}
+      {iconPosition === 'right' && defaultIcon !== 'none' && (
+        <Icon
+          {...iconProps}
+          iconPosition={iconPosition}
+          defaultIcon={defaultIcon}
+        />
+      )}
     </div>
   );
 };

package/lib/h5public/src/components/factory/src/BlockSelect/components/Icon/index.tsx

@@ -1,9 +1,14 @@
+import type { FC } from 'react';
 import React from 'react';
 import { EngineBaseProps } from '@lingxiteam/types';
-import type { FC } from 'react';
-import MyIcon from '../../../Icon';
-import { circleNormalIcon, circleSelectedIcon, squareNormalIcon, squareSelectedIcon } from '../../assets';
+import {
+  circleNormalIcon,
+  circleSelectedIcon,
+  squareNormalIcon,
+  squareSelectedIcon,
+} from '../../assets';
 import '../../index.less';
+import MyIcon from '../../../Icon';
 
 const prefixCls = 'lcdp-blockselect';
 
@@ -24,7 +29,7 @@ export interface IconProps {
   $$componentItem: EngineBaseProps['$$componentItem'];
 }
 
-const Icon: FC<IconProps> = props => {
+const Icon: FC<IconProps> = (props) => {
   const {
     selectImg,
     normalImg,
@@ -62,8 +67,7 @@ const Icon: FC<IconProps> = props => {
       return squareSelectedIcon(myOnClick, `${myClassName} ${className}`);
     }
     return squareNormalIcon(myOnClick, myClassName);
-  }
-  if (defaultIcon === 'circle') {
+  } if (defaultIcon === 'circle') {
     if (checked) {
       return circleSelectedIcon(myOnClick, `${myClassName} ${className}`);
     }
@@ -73,33 +77,13 @@ const Icon: FC<IconProps> = props => {
     if (typeof selectImg === 'string') {
       return <img onClick={myOnClick} src={selectImg} alt="" className={`${myClassName} ${className}`} />;
     }
-    return (
-      <MyIcon
-        {...selectImg}
-        onClick={myOnClick}
-        className={`${myClassName}`}
-        style={{ color: selectIconColor }}
-        getEngineApis={getEngineApis}
-        name={name}
-        $$componentItem={props.$$componentItem}
-      />
-    );
+    return <MyIcon {...selectImg} onClick={myOnClick} className={`${myClassName}`} style={{ color: selectIconColor }} getEngineApis={getEngineApis} name={name} $$componentItem={props.$$componentItem} />;
   }
   if (typeof normalImg === 'string') {
     return <img onClick={myOnClick} src={normalImg} alt="" className={myClassName} />;
   }
   // eslint-disable-next-line max-len
-  return (
-    <MyIcon
-      {...normalImg}
-      onClick={myOnClick}
-      className={myClassName}
-      style={{ color: normalIconColor }}
-      getEngineApis={getEngineApis}
-      name={name}
-      $$componentItem={props.$$componentItem}
-    />
-  );
+  return <MyIcon {...normalImg} onClick={myOnClick} className={myClassName} style={{ color: normalIconColor }} getEngineApis={getEngineApis} name={name} $$componentItem={props.$$componentItem} />;
 };
 
 export default Icon;

package/lib/h5public/src/components/factory/src/BlockSelect/components/NoCheckBox/index.tsx

@@ -1,8 +1,8 @@
-import classNames from 'classnames';
 import type { FC } from 'react';
 import React from 'react';
-import '../../index.less';
+import classNames from 'classnames';
 import type { IconProps } from '../Icon';
+import '../../index.less';
 
 const prefixCls = 'lcdp-blockselect';
 interface NoCheckBoxProps extends IconProps {
@@ -14,7 +14,7 @@ interface NoCheckBoxProps extends IconProps {
   valueKey?: string;
 }
 
-const NoCheckBox: FC<NoCheckBoxProps> = props => {
+const NoCheckBox: FC<NoCheckBoxProps> = (props) => {
   // 去除非选则模式下的默认选中框
   // const { checked, style, children, onChange, getEngineApis, ...restProps } = props;
   const { style, children, onChange, getEngineApis, ...restProps } = props;
@@ -28,9 +28,7 @@ const NoCheckBox: FC<NoCheckBoxProps> = props => {
   return (
     <div
       style={myStyle}
-      className={classNames(
-        `${prefixCls}-blockSelect`,
-        `${prefixCls}-showIcon`
+      className={classNames(`${prefixCls}-blockSelect`, `${prefixCls}-showIcon`,
         // { [`${prefixCls}-select`]: checked }
       )}
       onClick={(e: any) => {