@lingxiteam/ebe-utils 0.0.9 → 0.0.10

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

@@ -0,0 +1,170 @@
+import { DformSelect } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useEffect, useState } from 'react';
+import { DFormWrapper, FormItem } from '../BasicComponents';
+import { reloadSelectDataType } from '../interfaces/types';
+import useDefaultValue from '../utils/hooks/useDefaultValue';
+import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
+import { withTransformProps } from '../utils/withTransformProps';
+import transformProps from './transformProps';
+
+export interface MyDformSelectProps extends UseFormItemProps {
+  postfix?: any;
+  type?: string;
+  theme?: string;
+  isIconFont?: boolean;
+  fontAddress?: any;
+  postfixIconPosition?: string;
+  iconColor?: string;
+  color?: string;
+  onChange?: any;
+  titleIcon?: any;
+  prefixIcon?: any;
+  title: string;
+  fontSize?: any;
+  icon?: any;
+  data?: any;
+  ellipsis?: boolean;
+}
+
+const MyDformSelect = LingxiForwardRef<any, MyDformSelectProps>(
+  (props, ref) => {
+    const { getEngineApis, defaultValue, title, ellipsis, ...restProps } =
+      props;
+
+    const findObjectsByValue = (data: any[], values: string[]) => {
+      const result: any[] = [];
+      const traverse = (
+        node: { [x: string]: any; value?: any; children: any },
+        remainingValues: string | any[],
+      ) => {
+        const currentValue = remainingValues[0];
+        const nextValues = remainingValues.slice(1);
+        if (node.value === currentValue) {
+          const { children, ...res } = node;
+          result.push(res);
+          if (children) {
+            children?.forEach(
+              (child: { [x: string]: any; value?: any; children: any }) => {
+                traverse(child, nextValues);
+              },
+            );
+          }
+        }
+      };
+      if (values?.length > 0) {
+        data?.forEach((node) => {
+          if (result.length === values.length) return;
+          traverse(node, JSON.parse(JSON.stringify(values)));
+        });
+      }
+      return result;
+    };
+
+    const {
+      disabled,
+      val,
+      getRules,
+      onInputChange,
+      required,
+      readOnly,
+      visible,
+    } = useFormItem(
+      ref,
+      {
+        ...props,
+        defaultValue: useDefaultValue(defaultValue),
+      },
+      {
+        setDataWithLabelAndValue: (params: reloadSelectDataType) => {
+          setData(
+            initData(
+              params.dataSource,
+              params.labelKey,
+              params.valueKey,
+              params.childrenKey,
+            ),
+          );
+        },
+        valueInfo() {
+          return findObjectsByValue(data, this.value);
+        },
+      },
+    );
+    const { getLocale } = getEngineApis?.() || {};
+    const [data, setData] = useState<any[]>([]);
+
+    // 初始化数据源
+    const initData = (
+      arr: any[],
+      labelKey1 = 'label',
+      valueKey1 = 'value',
+      childrenKey1 = 'children',
+    ) => {
+      // 存在labelKey1 || valueKey1 || childrenKey1 为空字符串情况
+      const labelKey = labelKey1 || 'label';
+      const valueKey = valueKey1 || 'value';
+      const childrenKey = childrenKey1 || 'children';
+      const mArr: any[] = [];
+      arr.forEach((row: any) => {
+        if (Array.isArray(row)) {
+          row.forEach((val) => {
+            val.label = val[labelKey];
+            val.value = val[valueKey];
+          });
+          mArr.push(row);
+        } else if (row instanceof Object) {
+          const children = row[childrenKey];
+          const pushItem = { ...row };
+          if (row[labelKey] || row.title) {
+            pushItem.label = row[labelKey] || row.title;
+            pushItem.value = row[valueKey];
+          }
+          if (children && children.length) {
+            pushItem.children = initData(
+              children,
+              labelKey,
+              valueKey,
+              childrenKey,
+            );
+          }
+          mArr.push(pushItem);
+        }
+      });
+      return mArr;
+    };
+
+    useEffect(() => {
+      setData(initData(props.data));
+    }, [JSON.stringify(props.data)]);
+
+    return (
+      <FormItem>
+        <DFormWrapper visible={visible} getEngineApis={props.getEngineApis}>
+          <DformSelect
+            {...restProps}
+            ellipsis={ellipsis}
+            defaultValue={val}
+            rules={getRules()}
+            data={data || []}
+            required={required}
+            title={title}
+            disabled={disabled}
+            onChange={(v: any) => onInputChange(v, true)}
+            readonly={readOnly}
+            getLocale={(
+              t: string,
+              tempValue: Record<string, any> | undefined,
+            ) => {
+              return getLocale(`DformSelect.${t}`, '', tempValue);
+            }}
+          />
+        </DFormWrapper>
+      </FormItem>
+    );
+  },
+);
+
+MyDformSelect.displayName = 'dformSelect';
+
+export default withTransformProps(MyDformSelect, transformProps);

package/lib/h5public/src/components/factory/src/DformSelect/transformProps.tsx

@@ -0,0 +1,20 @@
+interface Props {
+  basicStatus: number;
+  fieldName: string;
+  name: string;
+  options: any[];
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { basicStatus, fieldName, name, value, options, ...restProps } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    fieldProps: fieldName,
+    title: name,
+    data: options,
+    status: `${basicStatus}`,
+    defaultValue: value,
+  };
+  return newProps;
+}

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

@@ -0,0 +1,75 @@
+import { DformSwitch } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { DFormWrapper, FormItem } from '../BasicComponents';
+import Icon from '../Icon';
+import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
+import { withTransformProps } from '../utils/withTransformProps';
+import transformProps from './transformProps';
+
+export interface MyDformSwitchProps extends UseFormItemProps {
+  style?: any;
+  openIcon: any;
+  closeIcon: any;
+}
+const MyDformSwitch = LingxiForwardRef<any, MyDformSwitchProps>(
+  (props, ref) => {
+    const {
+      defaultValue,
+      onChange,
+      openIcon,
+      closeIcon,
+      style = {},
+      getEngineApis,
+      ...restProps
+    } = props;
+    const {
+      disabled,
+      val,
+      getRules,
+      onInputChange,
+      required,
+      visible,
+      readOnly,
+    } = useFormItem(ref, props);
+
+    const otherProps = {
+      ...restProps,
+      style,
+    };
+
+    return (
+      <FormItem>
+        <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+          <DformSwitch
+            {...otherProps}
+            required={required}
+            defaultValue={val}
+            rules={getRules()}
+            disabled={disabled}
+            // @ts-ignore
+            openIcon={
+              <Icon
+                icon={openIcon}
+                style={{ fontSize: '12px', width: '12px', height: '12px' }}
+                getEngineApis={getEngineApis}
+              />
+            }
+            // @ts-ignore
+            closeIcon={
+              <Icon
+                icon={closeIcon}
+                style={{ fontSize: '12px', width: '12px', height: '12px' }}
+                getEngineApis={getEngineApis}
+              />
+            }
+            onChange={(v: boolean) => onInputChange(v)}
+            readonly={readOnly}
+          />
+        </DFormWrapper>
+      </FormItem>
+    );
+  },
+);
+
+MyDformSwitch.displayName = 'dformSwitch';
+export default withTransformProps(MyDformSwitch, transformProps);

package/lib/h5public/src/components/factory/src/DformSwitch/transformProps.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  basicStatus: number;
+  fieldName: string;
+  name: string;
+  defaultChecked: any;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { basicStatus, fieldName, name, defaultChecked, ...restProps } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    fieldProps: fieldName,
+    title: name,
+    defaultValue: defaultChecked,
+    status: `${basicStatus}`,
+  };
+  return newProps;
+}

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

@@ -0,0 +1,67 @@
+import { DformTextArea } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { DFormWrapper, FormItem } from '../BasicComponents';
+import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
+import { withTransformProps } from '../utils/withTransformProps';
+import transformProps from './transformProps';
+
+export interface MyDformTextAreaProps extends UseFormItemProps {
+  title: string;
+  maxLength: number;
+}
+
+const MyDformTextArea = LingxiForwardRef<any, MyDformTextAreaProps>(
+  (props, ref) => {
+    const { defaultValue, maxLength, onChange, getEngineApis, ...restProps } =
+      props;
+    const changeVal = (v: any) => {
+      if (typeof v === 'string') {
+        return v;
+      }
+      if (typeof v === 'number') {
+        return `${v}`;
+      }
+      return '';
+    };
+
+    const {
+      visible,
+      disabled,
+      val,
+      getRules,
+      onInputChange,
+      required,
+      readOnly,
+    } = useFormItem(ref, { ...props, defaultValue: changeVal(defaultValue) });
+
+    const { getLocale } = getEngineApis?.() || {};
+    return (
+      <FormItem>
+        <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+          <DformTextArea
+            {...restProps}
+            defaultValue={val}
+            value={val}
+            required={required}
+            rules={getRules()}
+            disabled={disabled}
+            onChange={(v: any) => onInputChange(v)}
+            readonly={readOnly}
+            maxLength={maxLength}
+            getLocale={(
+              t: string,
+              tempValue: Record<string, any> | undefined,
+            ) => {
+              return getLocale(`DformTextArea.${t}`, '', tempValue);
+            }}
+            validateTrigger="inputOnBlur"
+          />
+        </DFormWrapper>
+      </FormItem>
+    );
+  },
+);
+
+MyDformTextArea.displayName = 'dformTextArea';
+
+export default withTransformProps(MyDformTextArea, transformProps);

package/lib/h5public/src/components/factory/src/DformTextArea/transformProps.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  basicStatus: number;
+  fieldName: string;
+  name: string;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { basicStatus, fieldName, value, name, ...restProps } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    fieldProps: fieldName,
+    title: name,
+    positionType: 'vertical',
+    status: `${basicStatus}`,
+    defaultValue: value,
+  };
+  return newProps;
+}

package/lib/h5public/src/components/factory/src/Divider/LxDashed/index.module.less

@@ -0,0 +1,10 @@
+.dashedDivider {
+  display: flex;
+  align-items: center;
+  height: auto;
+
+  .dividerText {
+    padding: 0 8px;
+    white-space: nowrap;
+  }
+}

package/lib/h5public/src/components/factory/src/Divider/LxDashed/index.tsx

@@ -0,0 +1,92 @@
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import styles from './index.module.less';
+
+interface MyDashedProps {
+  showTitle?: boolean;
+  dividerText?: string;
+  titleStyle?: React.CSSProperties;
+  dashedWidth?: number;
+  dashedMargin?: number;
+  customStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  orientation?: string;
+  className?: string;
+}
+
+const LxDashed: React.FC<MyDashedProps> = (props) => {
+  const {
+    showTitle,
+    dividerText,
+    dashedMargin = 4,
+    dashedWidth = 4,
+    customStyle,
+    style,
+    titleStyle,
+    orientation = 'center',
+    className,
+    ...restProps
+  } = props;
+  const backgroundStyle: React.CSSProperties = useMemo(() => {
+    const bWidth = dashedWidth + dashedMargin;
+    const color =
+      style?.borderColor || customStyle?.borderColor || 'rgba(0, 0, 0, 0.06)'; // customStyle 旧数据
+    const widthPercent = `${((dashedWidth / bWidth) as any).toFixed(6) * 100}%`;
+    const height = style?.height || '1px';
+    const curStyle = {
+      height,
+      backgroundImage: `linear-gradient(90deg, ${color} 0%, ${color} ${widthPercent}, #fff ${widthPercent}, #fff 100%)`,
+      backgroundSize: `${bWidth}px ${height}`,
+      backgroundRepeat: 'repeat-x',
+    };
+    return curStyle;
+  }, [
+    dashedMargin,
+    dashedWidth,
+    customStyle?.borderColor,
+    style?.borderColor,
+    style?.height,
+  ]);
+  if (showTitle && dividerText) {
+    // 显示标题
+    let leftWidth = '50%';
+    let rightWidth = '50%';
+    switch (orientation) {
+      case 'left':
+        leftWidth = '5%';
+        rightWidth = '95%';
+        break;
+      case 'center':
+        leftWidth = '50%';
+        rightWidth = '50%';
+        break;
+      case 'right':
+        leftWidth = '95%';
+        rightWidth = '5%';
+        break;
+      default:
+        break;
+    }
+    return (
+      <div
+        style={{ width: style?.width || 'auto', ...style }}
+        {...restProps}
+        className={classnames(styles.dashedDivider, className)}
+      >
+        <div style={{ ...backgroundStyle, width: leftWidth }} />
+        <div className={styles.dividerText} style={titleStyle}>
+          {dividerText}
+        </div>
+        <div style={{ ...backgroundStyle, width: rightWidth }} />
+      </div>
+    );
+  }
+  return (
+    <div
+      {...restProps}
+      style={{ ...backgroundStyle, ...style }}
+      className={className}
+    />
+  );
+};
+export default LxDashed;

package/lib/h5public/src/components/factory/src/Divider/LxSolid/index.module.less

@@ -0,0 +1,10 @@
+.solidDivider {
+  display: flex;
+  align-items: center;
+  height: auto;
+
+  .dividerText {
+    padding: 0 8px;
+    white-space: nowrap;
+  }
+}

package/lib/h5public/src/components/factory/src/Divider/LxSolid/index.tsx

@@ -0,0 +1,90 @@
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import styles from './index.module.less';
+
+interface LxSolidProps {
+  type?: string;
+  dividerText?: string;
+  showTitle?: boolean;
+  style?: React.CSSProperties;
+  customStyle?: React.CSSProperties; // 兼容旧数据
+  orientation?: string;
+  titleStyle?: React.CSSProperties;
+  className?: string;
+}
+const LxSolid: React.FC<LxSolidProps> = (props) => {
+  const {
+    type,
+    dividerText,
+    showTitle,
+    style,
+    customStyle,
+    orientation,
+    titleStyle,
+    className,
+    ...restProps
+  } = props;
+  const borderColor = useMemo(() => {
+    if (style?.borderColor || customStyle?.borderColor) {
+      return style?.borderColor || customStyle?.borderColor;
+    }
+    return 'rgba(0, 0, 0, 0.06)';
+  }, [style?.borderColor, customStyle?.borderColor]);
+  if (dividerText && showTitle && type === 'horizontal') {
+    // 有文字的情况
+    let leftWidth = '50%';
+    let rightWidth = '50%';
+    switch (
+      orientation // 文字方向
+    ) {
+      case 'left':
+        leftWidth = '5%';
+        rightWidth = '95%';
+        break;
+      case 'center':
+        leftWidth = '50%';
+        rightWidth = '50%';
+        break;
+      case 'right':
+        leftWidth = '95%';
+        rightWidth = '5%';
+        break;
+      default:
+        break;
+    }
+    return (
+      <div
+        {...restProps}
+        style={{ ...style, ...customStyle }}
+        className={classnames(styles.solidDivider, className)}
+      >
+        <div
+          style={{
+            width: leftWidth,
+            backgroundColor: borderColor,
+            height: style?.height,
+          }}
+        />
+        <div className={styles.dividerText} style={titleStyle}>
+          {dividerText}
+        </div>
+        <div
+          style={{
+            width: rightWidth,
+            backgroundColor: borderColor,
+            height: style?.height,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{ backgroundColor: borderColor, ...style }}
+      {...restProps}
+      className={className}
+    />
+  );
+};
+export default LxSolid;

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

@@ -0,0 +1,91 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React from 'react';
+import LxDashed from './LxDashed';
+import LxSolid from './LxSolid';
+
+export interface MyDividerProps {
+  style?: React.CSSProperties;
+  dividerText?: string;
+  showTitle?: boolean;
+  type?: 'horizontal' | 'vertical' | undefined;
+  titleColor?: string;
+  titleFontSize?: string;
+  titleLineHeight?: string;
+  titleFontWeight?: string;
+  dashed?: boolean;
+  dashedWidth?: number;
+  dashedMargin?: number;
+  width?: number;
+  height?: number;
+  status?: string;
+  visible?: boolean;
+}
+
+const MyDivider = LingxiForwardRef<any, MyDividerProps>((props, ref) => {
+  const {
+    style,
+    dividerText,
+    showTitle = false,
+    type,
+    titleColor,
+    titleFontSize,
+    titleLineHeight,
+    titleFontWeight,
+    dashed,
+    dashedWidth = 4,
+    dashedMargin = 4,
+    visible,
+    ...restProps
+  } = props;
+
+  const dividerStyle = () => {
+    let s = { ...style };
+    if (type === 'vertical') {
+      // 设置默认值
+      s = { width: '1px', height: '12px', ...s }; // 垂直
+    } else {
+      s = { width: '100%', height: '1px', ...s }; // 水平
+    }
+    return s;
+  };
+  const titleStyle = () => {
+    return {
+      color: titleColor,
+      fontSize: titleFontSize,
+      lineHeight: titleLineHeight,
+      fontWeight: titleFontWeight,
+    };
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  if (type === 'horizontal' && dashed) {
+    return (
+      <LxDashed
+        showTitle={showTitle}
+        dividerText={dividerText}
+        titleStyle={titleStyle()}
+        dashedWidth={dashedWidth}
+        dashedMargin={dashedMargin}
+        style={dividerStyle()}
+        {...restProps}
+      />
+    );
+  }
+  return (
+    <LxSolid
+      showTitle={showTitle}
+      dividerText={dividerText}
+      style={dividerStyle()}
+      type={type}
+      titleStyle={titleStyle()}
+      {...restProps}
+    />
+  );
+});
+
+MyDivider.displayName = 'MyDivider';
+
+export default MyDivider;