@lingxiteam/ebe-utils 0.0.9 → 0.0.10

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

@@ -0,0 +1,178 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useThrottleFn } from 'ahooks';
+import { Button, DotLoading } from 'antd-mobile-5';
+import { useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import Icon from '../Icon';
+import useCompState from '../utils/hooks/useCompState';
+import { useListenToggleBoolean } from '../utils/hooks/useToggleBoolean';
+import './index.less';
+
+export interface MyButtonProps {
+  [x: string]: any;
+  name: any;
+  children: any;
+  mImagePostion: any;
+  icontype: any;
+  style?: any;
+  status?: string;
+  className: string;
+}
+
+// const prefixCls = 'lcdp-button';
+
+const MyButton = LingxiForwardRef<unknown, MyButtonProps>((props, ref) => {
+  // eslint-disable-next-line max-len
+  const {
+    name,
+    children,
+    className,
+    mImagePostion,
+    icontype,
+    style,
+    type,
+    shape,
+    size,
+    disabled: propsDisabled,
+    onClick,
+    fill,
+    loadingText,
+    loading,
+    visible,
+    btnIcon,
+    getEngineApis,
+  } = props;
+  const [disabled, setDisabled] = useListenToggleBoolean(propsDisabled); // 兼容旧数据
+  const [innerLoading, setLoading] = useListenToggleBoolean(loading);
+  const [myChildren, setChildren] = useState(children || name);
+  const { dataState } = getEngineApis?.() || {};
+  const { stateIcon, stateTip } = useCompState({ dataState, type: 'loading' });
+
+  useImperativeHandle(ref, () => ({
+    setDisabled,
+    get disabled() {
+      return disabled;
+    },
+    setValue(v: any) {
+      setChildren(v);
+    },
+    get value() {
+      return myChildren;
+    },
+    setLoading,
+  }));
+
+  const { run } = useThrottleFn(
+    (e) => {
+      e.stopPropagation();
+      onClick && onClick(e);
+    },
+    {
+      wait: 200,
+      trailing: false,
+    },
+  );
+  if (style) {
+    if (style.padding && !style.height) {
+      style.height = 'auto';
+    }
+  }
+  const color = useMemo(() => {
+    // 兼容旧数据
+    switch (type) {
+      case 'ghost':
+        return 'primary';
+      case 'dashed':
+      case 'text':
+      case 'link':
+        return 'default';
+      default:
+        return type;
+    }
+  }, [type]);
+
+  useEffect(() => {
+    setChildren(children);
+  }, [children]);
+  const mFill = useMemo(() => {
+    // 兼容旧数据
+    if (type === 'ghost') {
+      return 'outline';
+    }
+
+    return fill;
+  }, [type, fill]);
+  const myStyle = useMemo(() => {
+    const _style = { display: 'flex', alignItems: 'center', ...style };
+    let justifyContent = 'center';
+    switch (style?.textAlign) {
+      case 'left':
+        justifyContent = 'flex-start';
+        break;
+      case 'right':
+        justifyContent = 'flex-end';
+        break;
+      default:
+        justifyContent = 'center';
+        break;
+    }
+    return { justifyContent, ..._style };
+  }, [style]);
+
+  useEffect(() => {
+    setLoading(loading);
+  }, [loading]);
+
+  if (!visible) {
+    // eslint-disable-next-line react/react-in-jsx-scope
+    return <></>;
+  }
+  return (
+    // eslint-disable-next-line react/react-in-jsx-scope
+    <Button
+      style={{ ...myStyle }}
+      loading={innerLoading}
+      onClick={run}
+      shape={shape}
+      loadingText={loadingText ?? stateTip}
+      loadingIcon={stateIcon || <DotLoading color="currentColor" />}
+      disabled={disabled}
+      size={size}
+      color={color}
+      fill={mFill}
+      type={type}
+      block
+      className={`lcdp-button-type-${type} ${className}`}
+    >
+      {/** @ts-ignore */}
+      {mImagePostion === 'left' && btnIcon && (
+        <Icon
+          icon={icontype}
+          style={{ marginRight: '8px', fontSize: myStyle?.fontSize || '14px' }}
+          getEngineApis={props.getEngineApis}
+          name={props.name}
+          $$componentItem={props.$$componentItem}
+        />
+      )}
+      {/** 如果children是数字0 的话，会导致不显示 */}
+      <span style={{ display: 'inline-block' }}>
+        {(typeof myChildren === 'number' ? `${myChildren}` : myChildren) ||
+          name}
+      </span>
+      {/** @ts-ignore */}
+      {mImagePostion === 'right' && btnIcon && (
+        <Icon
+          icon={icontype}
+          style={{ marginLeft: '8px', fontSize: myStyle?.fontSize || '14px' }}
+          getEngineApis={props.getEngineApis}
+          name={props.name}
+          $$componentItem={props.$$componentItem}
+        />
+      )}
+    </Button>
+  );
+});
+
+MyButton.displayName = 'Button';
+
+export default MyButton;

package/lib/h5public/src/components/factory/src/Calendar/InnerCalendar.tsx

@@ -0,0 +1,117 @@
+import {
+  BaseCalendarType,
+  Calendar,
+  CalendarType,
+} from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useImperativeHandle, useMemo } from 'react';
+import {
+  dateToFormatter,
+  subtractDate,
+  toDate,
+  useLocaleFormatter,
+} from '../utils/date';
+import { useListenToggleBoolean } from '../utils/hooks/useToggleBoolean';
+import { getCalendarLocale } from '../utils/i18n';
+
+interface CalendarStyle extends React.CSSProperties {
+  themeColor: string;
+}
+
+export interface MyCalendarProps {
+  dateRange?: string;
+  title?: BaseCalendarType['title'];
+  formatter: string;
+  onChange?: (date?: string | string[]) => void;
+  style: CalendarStyle;
+  type: CalendarType;
+  visible?: string;
+  minDate?: string;
+  maxDate?: string;
+}
+
+const MyCalendar = LingxiForwardRef<any, MyCalendarProps>((props, ref) => {
+  const {
+    dateRange,
+    title,
+    formatter: newFormatter = 'YYYY-MM-DD HH:mm:ss',
+    onChange,
+    style,
+    type,
+    visible = false,
+    getEngineApis,
+  } = props;
+
+  const { themeColor } = style;
+  const [show, setShow] = useListenToggleBoolean(visible);
+  const { getLocale, getLocaleEnv } = getEngineApis();
+  const lanEnv = getLocaleEnv();
+  const { showFormat: formatter } = useLocaleFormatter(newFormatter, lanEnv);
+  useImperativeHandle(ref, () => ({
+    visible: show,
+    setVisible: setShow,
+  }));
+
+  const [minDate, maxDate] = useMemo(() => {
+    if (dateRange === 'custom') {
+      let afterMinDate: any = props.minDate;
+      let afterMaxDate: any = props.maxDate;
+      if (afterMinDate === 'new Date();') {
+        afterMinDate = new Date();
+      } else {
+        afterMinDate = toDate(afterMinDate);
+      }
+      if (afterMaxDate === 'new Date();') {
+        afterMaxDate = new Date();
+      } else {
+        afterMaxDate = toDate(afterMaxDate);
+      }
+      return [afterMinDate, afterMaxDate];
+    }
+    return [subtractDate(new Date(), dateRange, 'months'), new Date()];
+  }, [dateRange, props.maxDate, props.minDate]);
+
+  const formatterDate = (val: Date | Date[]) => {
+    if (!Array.isArray(val)) {
+      // 单选直接输出
+      return dateToFormatter(formatter, val);
+    }
+    return val.map((d) => dateToFormatter(formatter, d));
+  };
+
+  const onClose = () => {
+    setShow(false);
+  };
+
+  const CalendarComp = Calendar;
+
+  return (
+    <CalendarComp
+      type={type}
+      minDate={minDate}
+      maxDate={maxDate}
+      poppable
+      show={show}
+      title={title}
+      color={themeColor}
+      onClose={onClose}
+      onConfirm={(val: Date | Date[]) => {
+        console.log('====val', val);
+        if (onChange) {
+          /** @ts-ignore */
+          onChange(formatterDate(val));
+        }
+        onClose();
+      }}
+      confirmText={getLocale('confirm')}
+      confirmDisabledText={getLocale('confirm')}
+      getLocale={(t, tempValue) => {
+        return getCalendarLocale(getLocale, t, tempValue);
+      }}
+    />
+  );
+});
+
+MyCalendar.displayName = 'InnerCalendar';
+
+export default MyCalendar;

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

@@ -0,0 +1,13 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import DformCustom from '../DformCustom';
+import InnerCalendar, { MyCalendarProps } from './InnerCalendar';
+
+const Calendar = LingxiForwardRef<any, MyCalendarProps>((props, ref) => {
+  return (
+    <DformCustom.Item showError={false}>
+      <InnerCalendar {...props} ref={ref} />
+    </DformCustom.Item>
+  );
+});
+
+export default Calendar;

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

@@ -0,0 +1,119 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+@prefixCls: lcdp-h5-card;
+
+.@{prefixCls} {
+  &-title {
+    display: flex;
+    align-items: center;
+  }
+
+  &-title-img {
+    width: 16* @hd;
+    height: 16* @hd;
+    margin-right: 5* @hd;
+  }
+
+  &-vStyle {
+    display: inline-block;
+    width: 6* @hd;
+    height: 15* @hd;
+    margin-right: 4* @hd;
+    background: #47e;
+    border-radius: 100* @hd;
+  }
+
+  &-hStyle {
+    position: absolute;
+    left: 0;
+    display: inline-block;
+    width: 10* @hd;
+    height: 8* @hd;
+    margin-right: 4* @hd;
+    background: #47e;
+    border-radius: 0 100* @hd 100* @hd 0;
+  }
+
+  &-icon {
+    width: 16* @hd;
+    height: 16* @hd;
+    margin-top: -5* @hd;
+    margin-right: 4* @hd;
+
+    svg {
+      width: 16* @hd;
+      height: 16* @hd;
+    }
+  }
+
+  .after381Color {
+    color: rgba(28, 36, 46, 0.55);
+  }
+
+  &-extra {
+    display: flex;
+    align-items: center;
+
+    .marginRight2px {
+      margin-right: 2 * @hd;
+    }
+
+    .marginRight6px {
+      margin-right: 6 * @hd;
+    }
+
+  }
+
+  &-extra-icon {
+    width: 12 * @hd;
+    height: 12* @hd;
+    line-height: 12 * @hd;
+
+    .anticon {
+      width: 12* @hd;
+      height: 12* @hd;
+    }
+
+    svg {
+      width: 12* @hd;
+      height: 12* @hd;
+    }
+  }
+
+  .adm-card-header {
+    // padding-bottom: 12px !important;
+    position: relative;
+    border-radius: 0px !important;
+  }
+
+  .adm-card-header:not(:last-child) {
+    border-bottom: solid 1px #f0f0f0;
+  }
+
+  .adm-card-body {
+    padding-top: 12px !important;
+    padding-bottom: 12px !important;
+  }
+}
+
+.@{prefixCls}-after381-card {
+  .adm-card-body {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .lcdp-card-body {
+    padding: 0 !important;
+  }
+  .lcdp-card-footer-draw-box {
+    // padding-top: 12 * @hd !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+}
+
+.@{prefixCls}-after381-card-default {
+  .adm-card-body {
+    padding: 0 !important;
+  }
+  
+}

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

@@ -0,0 +1,262 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Card as AntCard } from 'antd-mobile-5';
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+import Icon from '../Icon';
+import useStyle from '../View/useStyle';
+import './index.less';
+
+const prefixCls = 'lcdp-h5-card';
+export interface MyCardProps {
+  // full?: CardProps['full'];
+  style?: any;
+  cardType?: string;
+  title?: React.ReactNode;
+  showHeader?: boolean;
+  headerBackground?: string;
+  headerType?: string;
+  headerIcon?: any;
+  thumb?: any;
+  postfixIcon?: any;
+  iconColor?: string;
+  postfixIconPosition?: string;
+  postfix?: string;
+  postFixColor?: string;
+  postFixFontSize?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  customStyle?: any;
+  visible?: boolean;
+  onHeaderClick?: (e: any) => void;
+  onClick?: (e: any) => void;
+  onBodyClick?: (e: any) => void;
+  $$ISNEW?: boolean; // 用来区分是否是新旧数据
+  src?: string;
+  fileCode?: string;
+  backgroundType: any;
+  className: string;
+}
+const Card = LingxiForwardRef<any, MyCardProps>((props, ref) => {
+  const {
+    style,
+    children,
+    title,
+    showHeader = true,
+    headerBackground,
+    headerType = 'none',
+    headerIcon,
+    thumb,
+    postfixIcon,
+    iconColor,
+    postfixIconPosition = 'after',
+    postfix,
+    postFixColor,
+    postFixFontSize,
+    headerClassName,
+    bodyClassName,
+    onHeaderClick,
+    visible,
+    onBodyClick,
+    onClick,
+    $$ISNEW,
+    src,
+    fileCode,
+    backgroundType = {},
+    className,
+    getEngineApis,
+    ...restProps
+  } = props;
+
+  if (!visible) {
+    return null;
+  }
+  const { getAppFileUrlByFileCode } = getEngineApis();
+  const finialStyle = {
+    ...style,
+    padding: style?.padding || '12px',
+  };
+
+  const [imgSrc, setImgSrc] = useState<string>();
+  const renderChildren = () => {
+    return React.Children.toArray(children).map((child: any) => {
+      if ($$ISNEW) {
+        return React.cloneElement(child, {
+          extendProps: {
+            onBodyClick,
+            style: finialStyle,
+            isContainer: child?.props?.schema?.isContainer,
+            ...restProps,
+          },
+        });
+      }
+      return child;
+    });
+  };
+  const renderIcon = (
+    iconInfo: any,
+    iconClass = `${prefixCls}-icon`,
+    color = '',
+  ) => {
+    if (!iconInfo) {
+      return null;
+    }
+    let iconView = null;
+    if (
+      iconInfo?.iconFileInfo &&
+      JSON.stringify(iconInfo?.iconFileInfo) !== '{}'
+    ) {
+      iconView = (
+        <div
+          className={iconClass || `${prefixCls}-icon`}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: iconInfo?.iconFileInfo?.svgContent,
+          }}
+        />
+      );
+    } else {
+      const { type, theme, isIconFont, fontAddress } = iconInfo;
+      iconView = (
+        <div className={iconClass || `${prefixCls}-icon`}>
+          {/** @ts-ignore */}
+          <Icon
+            type={type}
+            theme={theme}
+            isIconFont={isIconFont}
+            fontAddress={fontAddress}
+            color={color}
+            getEngineApis={getEngineApis}
+          />
+        </div>
+      );
+    }
+    return iconView;
+  };
+  const renderTitleIcon = () => {
+    switch (headerType) {
+      case 'vStyle':
+      case 'hStyle':
+        return (
+          <span
+            className={
+              headerType === 'vStyle'
+                ? `${prefixCls}-vStyle`
+                : `${prefixCls}-hStyle`
+            }
+          />
+        );
+      case 'icon':
+        return renderIcon(headerIcon);
+      case 'auto': // 自定义图片
+        return thumb ? (
+          <img src={thumb} className={`${prefixCls}-title-img`} alt="" />
+        ) : null;
+      default:
+        return null;
+    }
+  };
+  const headerStyle = () => {
+    const { titleLineHeight, padding } = style;
+    const defaultStyle = {
+      ...style,
+      background: headerBackground,
+      titleLineHeight,
+      padding: padding || '12px', // 兼容旧数据
+    };
+    if (props?.cardType === '2') {
+      return { ...defaultStyle, border: 'none' };
+    }
+    delete defaultStyle.backgroundColor; // 背景区域的样式会渲染在背景当中
+    return defaultStyle;
+  };
+  const newTitle = () => {
+    if (showHeader && $$ISNEW) {
+      const { titleColor, titleFontSize, titleFontWeight } = style;
+      return (
+        <div
+          className={`${prefixCls}-title`}
+          style={{
+            color: titleColor,
+            fontSize: titleFontSize,
+            fontWeight: titleFontWeight,
+          }}
+        >
+          {renderTitleIcon()}
+          {title}
+        </div>
+      );
+    }
+    return null;
+  };
+  const extra = () => {
+    const text = (
+      <div style={{ fontSize: postFixFontSize, color: postFixColor }}>
+        {postfix}
+      </div>
+    );
+    if (postfixIconPosition === 'before') {
+      return (
+        <div className={classNames(`${prefixCls}-extra`, 'after381Color')}>
+          {renderIcon(postfixIcon, `${prefixCls}-extra-icon`, iconColor)}
+          <div className="marginRight6px">{text}</div>
+        </div>
+      );
+    }
+    return (
+      <div className={classNames(`${prefixCls}-extra`, 'after381Color')}>
+        <div className="marginRight2px">{text}</div>
+        {renderIcon(postfixIcon, `${prefixCls}-extra-icon`, iconColor)}
+      </div>
+    );
+  };
+  useEffect(() => {
+    if (backgroundType.image || fileCode) {
+      (async () => {
+        setImgSrc(getAppFileUrlByFileCode(backgroundType.image || fileCode));
+      })();
+    }
+  }, [backgroundType, src, fileCode]);
+  const viewRef = useRef<HTMLDivElement>();
+  const restStyle = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+    },
+    viewRef,
+  );
+  return (
+    <AntCard
+      className={classNames(
+        `${prefixCls} ${className}`,
+        props?.cardType === '2'
+          ? `${prefixCls}-after381-card`
+          : `${prefixCls}-after381-card-default`,
+      )}
+      headerClassName={headerClassName}
+      bodyClassName={bodyClassName}
+      title={newTitle()}
+      headerStyle={$$ISNEW && showHeader ? headerStyle() : { display: 'none' }}
+      style={{ ...style, overflow: 'hidden', padding: 0 }}
+      extra={showHeader ? extra() : null}
+      bodyStyle={$$ISNEW ? { padding: '0', ...restStyle } : {}}
+      onClick={(e) => {
+        if (onClick) {
+          onClick(e);
+          e.stopPropagation();
+        }
+      }}
+      onHeaderClick={(e) => {
+        if (onHeaderClick) {
+          onHeaderClick(e);
+          e.stopPropagation();
+        }
+      }}
+    >
+      {renderChildren()}
+    </AntCard>
+  );
+});
+
+Card.displayName = 'Card';
+
+export default Card;