@lingxiteam/ebe-utils 0.5.1 → 0.5.3

package/lib/public/src/components/pcfactory/src/Text/index.tsx

@@ -0,0 +1,191 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useMemo } from 'react';
+import useDoubleClick from '../utils/hooks/useDoubleClick';
+
+export interface MyTextProps {
+  name?: string;
+  visible?: boolean;
+  textType?: string;
+  style?: React.CSSProperties;
+  content: string;
+  textReg?: any;
+  version?: string;
+  showHtml?: boolean;
+  compType?: string;
+  onSelectedRowsRelease?: (e: any) => void;
+  onSelectedRowKeysRelease?: (e: any[]) => void;
+  onSelectedKeysRelease?: (e: any[]) => void;
+  onEditingKeyRelease?: (e: any) => void;
+  onInlineEditRelease?: (e: any) => void;
+  onInlineSaveRelease?: (e: any) => void;
+  onSelectedDataRelease?: (e: any[]) => void;
+  pageState?: any;
+  pagePublicState?: any;
+  onDoubleClick?: React.MouseEventHandler<any>;
+  onClick?: React.MouseEventHandler<any>;
+}
+
+const Text = LingxiForwardRef<any, MyTextProps>((props, ref) => {
+  const {
+    name,
+    visible = true,
+    textType,
+    style,
+    textReg,
+    version,
+    showHtml,
+    compType,
+    onSelectedRowsRelease,
+    onSelectedRowKeysRelease,
+    onSelectedKeysRelease,
+    onEditingKeyRelease,
+    onInlineEditRelease,
+    onInlineSaveRelease,
+    onSelectedDataRelease,
+    pageState,
+    pagePublicState,
+    content,
+    onDoubleClick,
+    onClick,
+    ...restProps
+  } = props;
+
+  const events = useDoubleClick({
+    clickName: 'onClick',
+    doubleClickName: 'onDoubleClick',
+    events: {
+      onClick,
+      onDoubleClick,
+    },
+  });
+
+  /**
+   * attrNbrInfo 静态数据的值，预处理的上报随后返回
+   */
+
+  const { customs, attrNbrInfo } = textReg || {};
+  const getRegStr = (str: string) =>
+    /^\/.+\/.*/g.test(str) ? str.replace(/^\//, '').replace(/\/$/g, '') : str;
+
+  const getRegMap = (
+    array: string[],
+    originKey: any,
+    targetKey: any,
+  ): [Record<string, any>, string[]] => {
+    const regExpMap: any = {};
+    const regExpSort = [...array].sort(
+      (a: any, b: any) =>
+        String(b[originKey]).length - String(a[originKey]).length,
+    );
+    regExpSort.forEach((c) => {
+      regExpMap[getRegStr(c[originKey])] = c[targetKey];
+    });
+    return [regExpMap, regExpSort.map((c) => c[originKey])];
+  };
+
+  const getRegMapItem = (map: any, item: string) => {
+    const key = Object.keys(map).find((c) => new RegExp(c).test(item)) || '';
+    return map[key];
+  };
+
+  const getFinalStr = (
+    array: string[],
+    originKey: string,
+    targetKey: string,
+  ) => {
+    const [customRegMap, customRegSort] = getRegMap(
+      array,
+      originKey,
+      targetKey,
+    );
+    const reStr = `(${customRegSort.join('|')})`;
+    const newReg = new RegExp(reStr, 'g');
+    const pcontent = typeof content === 'string' ? content : '';
+    return pcontent.replace(
+      newReg,
+      (it) => customRegMap[it] || getRegMapItem(customRegMap, it),
+    );
+  };
+  const Ele: any = useMemo(() => {
+    const _tag = textType?.toLowerCase();
+    if (!_tag) {
+      console.warn('文本控件：文本类型不能为空，将使用div进行展示');
+      return 'div';
+    }
+    const htmlTextTag = [
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'a',
+      'p',
+      'q',
+      'strong',
+      'em',
+      'mark',
+      'time',
+      'meter',
+      'ruby',
+      'rt',
+      'rp',
+      'div',
+      'span',
+    ];
+    if (!htmlTextTag.includes(_tag)) {
+      console.warn(
+        `文本控件：文本类型(${_tag})为非文本标签，将使用div进行展示`,
+      );
+      return 'div';
+    }
+    return _tag;
+  }, [textType]);
+  const showContent = useMemo(() => {
+    if (textReg) {
+      if (Array.isArray(attrNbrInfo) && attrNbrInfo.length) {
+        return attrNbrInfo?.length
+          ? getFinalStr(attrNbrInfo, 'value', 'label')
+          : content;
+      }
+      if (Array.isArray(customs) && customs.length) {
+        return getFinalStr(customs, 'text', 'translation');
+      }
+    }
+    return content;
+  }, [content, attrNbrInfo]);
+
+  // eslint-disable-next-line no-nested-ternary
+  return visible ? (
+    showHtml ? (
+      <Ele
+        style={{
+          wordBreak: 'break-word',
+          minHeight: '20px',
+          whiteSpace: 'pre-wrap',
+          ...style,
+        }}
+        dangerouslySetInnerHTML={{ __html: showContent }}
+        data-compid={(props as any)?.['data-compid']}
+        {...restProps}
+        {...events}
+      />
+    ) : (
+      <Ele
+        style={{
+          wordBreak: 'break-word',
+          minHeight: '20px',
+          whiteSpace: 'pre-wrap',
+          ...style,
+        }}
+        data-compid={(props as any)?.['data-compid']}
+        {...restProps}
+        {...events}
+      >
+        {showContent}
+      </Ele>
+    )
+  ) : null;
+});
+
+export default Text;

package/lib/public/src/components/pcfactory/src/TextArea/ForIETextArea.tsx

@@ -0,0 +1,96 @@
+import { debounce } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { antPrefix } from '../variables';
+
+const isIE = !!((window as any).ActiveXObject || 'ActiveXObject' in window);
+
+const ForIETextArea = (props: any) => {
+  // 由于不是很明白的原因，TextArea在经过React cloneELement劫持事件后，会导致在IE浏览器下的特定中文输入法异常
+  // 异常形式是，只要在JSX层面上传onChange/onInput事件进去，IE那边就会导致输入法输入乱飞
+  // 改用原生的事件代替
+  const { value, className, onChange, onInput, allowClear, ...restProps } =
+    props;
+  const tRef = React.useRef<any>();
+  const subRef = React.useRef<any>({ now_value: '' });
+  const [compValue, setCompValue] = useState<any>();
+
+  const dSet = React.useCallback(
+    debounce((_value) => {
+      setCompValue(_value);
+    }, 100),
+    [],
+  );
+
+  useEffect(() => {
+    if (value !== undefined) {
+      if (!subRef.current.imeFlag) {
+        dSet(value);
+      }
+    }
+  }, [value]);
+
+  useEffect(() => {
+    // TODO 还原Antd的“清理按钮”
+    if (allowClear) {
+      // x
+    }
+  }, [compValue]);
+
+  useEffect(() => {
+    if (!tRef.current) {
+      return undefined;
+    }
+    const tdom = tRef.current;
+    const inputF = (e: any) => {
+      // IE下，当textarea有placeholder时，在页面加载完毕后会莫名其妙地主动触发一次input，用这种方法过滤这个“第一次”事件
+      if (isIE && restProps.placeholder && !subRef.current.firstTime) {
+        subRef.current.firstTime = true;
+        return;
+      }
+      setCompValue(e.target.value);
+      subRef.current.last_value = e.target.value;
+      if (!subRef.current.imeFlag) {
+        subRef.current.last_value = '';
+        if (onChange) {
+          onChange(e);
+        }
+      }
+      if (onInput) {
+        onInput(e);
+      }
+    };
+    tdom.addEventListener('input', inputF);
+    tdom.addEventListener('compositionstart', () => {
+      subRef.current.imeFlag = true;
+    });
+    tdom.addEventListener('compositionend', () => {
+      if (subRef.current.imeFlag && subRef.current.last_value) {
+        if (onChange) {
+          onChange({
+            target: { value: subRef.current.last_value },
+          });
+        }
+      }
+      subRef.current.last_value = '';
+      subRef.current.imeFlag = false;
+    });
+
+    return () => {
+      if (tRef?.current) {
+        tdom.removeEventListener('input', inputF);
+      }
+    };
+  }, []);
+  // eslint-disable-next-line react/no-unknown-property
+  return (
+    <textarea
+      resize="vertical"
+      className={`${antPrefix}-input ${className}`}
+      value={compValue}
+      ref={tRef}
+      {...restProps}
+    />
+  );
+};
+
+export default ForIETextArea;

package/lib/public/src/components/pcfactory/src/TextArea/index.tsx

@@ -0,0 +1,255 @@
+import { Input } from 'antd';
+import React, { useEffect, useState } from 'react';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+} from '../utils';
+import { useUpdateEffect } from '../utils/ahooks';
+import { checkNumber } from '../utils/common';
+import ForIETextArea from './ForIETextArea';
+
+export interface TextAreaProps {
+  value?: any;
+  visible?: any;
+  onChange?: any;
+  onValueRelease?: any;
+  defaultValue?: any;
+  getCompPropMapState?: any;
+  compId?: any;
+  getFieldDecorator?: any;
+  form?: any;
+  name?: any;
+  fieldName?: any;
+  required?: any;
+  hidden?: any;
+  regexp?: any;
+  message?: any;
+  label?: any;
+  labelCol?: any;
+  wrapperCol?: any;
+  selfSpan?: any;
+  colSpan?: any;
+  compType?: any;
+  onSelectedRowsRelease?: any;
+  onSelectedRowKeysRelease?: any;
+  onSelectedKeysRelease?: any;
+  onEditingKeyRelease?: any;
+  onInlineEditRelease?: any;
+  onInlineSaveRelease?: any;
+  onSelectedDataRelease?: any;
+  pageState?: any;
+  pagePublicState?: any;
+  maxLength?: any;
+  minLength?: any;
+  style?: React.CSSProperties;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  rules?: any[];
+  colon?: boolean;
+  isFormChild?: boolean | undefined;
+  readOnly?: boolean;
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+}
+
+export interface WrapperTextAreaProps {
+  children: React.ReactElement;
+}
+
+interface BaseTextAreaPropsType {
+  maxLength: number;
+  [key: string]: any;
+}
+
+const TEXTAREA_WRAPPER_CLASSNAME = 'ued-textarea-wrap';
+const WrapperTextArea: React.FC<WrapperTextAreaProps> = ({ children }) =>
+  React.cloneElement(children, {
+    className: `${TEXTAREA_WRAPPER_CLASSNAME} ${
+      children.props.className || ''
+    }`,
+  });
+
+const { TextArea: AntdTextArea } = Input;
+
+const BaseTextArea = (props: BaseTextAreaPropsType) => {
+  const { maxLength, ...restProps } = props;
+
+  // @ts-ignore
+  const WrapText =
+    window.ActiveXObject || 'ActiveXObject' in window
+      ? ForIETextArea
+      : AntdTextArea;
+  const [num, setNum] = useState(0);
+
+  const handleOnInput = (e: React.FormEvent) => {
+    const target = e.target as HTMLTextAreaElement;
+    setNum(Math.min(target.value.length, maxLength));
+  };
+
+  // 只读状态时，不展示该样式，且输入文字刚好到文字展示的位置，要求不可遮挡其位置
+  const renderNumLimit = () =>
+    maxLength ? (
+      <span
+        className="ued-textarea-limit"
+        style={{
+          position: 'absolute',
+          right: '15px',
+          bottom: '1px', // UI 要求样式保持和配置一致
+          color: 'rgba(28, 36, 46, .45)',
+          fontSize: '12px',
+          zIndex: '99',
+          height: '18px',
+          lineHeight: '18px',
+          width: 'calc(100% - 16px)',
+          textAlign: 'right',
+        }}
+      >
+        {num > maxLength ? (
+          <>
+            <span style={{ color: '#FF7474' }}>{num}</span> / {maxLength}
+          </>
+        ) : (
+          `${num} / ${maxLength}`
+        )}
+      </span>
+    ) : null;
+
+  useEffect(() => {
+    if (props.defaultValue || props.value) {
+      setNum(
+        Math.min(
+          props?.value?.length || props?.defaultValue?.length || 0,
+          maxLength,
+        ),
+      );
+    }
+  }, []);
+  useUpdateEffect(() => {
+    if (props.value !== undefined) {
+      setNum(Math.min(props?.value?.length || 0, maxLength));
+    }
+  }, [props.value]);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <WrapText {...restProps} onInput={handleOnInput} maxLength={maxLength} />
+      {renderNumLimit()}
+    </div>
+  );
+};
+
+const TextArea = React.forwardRef<any, TextAreaProps>((props, ref) => {
+  const {
+    value,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    visible = true,
+    onValueRelease,
+    defaultValue,
+    getCompPropMapState,
+    compId,
+    name,
+    fieldName: rawFieldName,
+    hidden,
+    regexp,
+    message,
+    label,
+    labelCol,
+    wrapperCol,
+    selfSpan,
+    colSpan,
+    compType,
+    onSelectedRowsRelease,
+    onSelectedRowKeysRelease,
+    onSelectedKeysRelease,
+    onEditingKeyRelease,
+    onInlineEditRelease,
+    onInlineSaveRelease,
+    onSelectedDataRelease,
+    pageState,
+    pagePublicState,
+    showWrapperContainer,
+    wrapperContainer: WrapperContainer,
+    titleTip,
+    tipIcon,
+    tipLocation,
+    tipContent,
+    tipPlacement,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    rules: externalRules = [],
+    isFormChild,
+    tipSize,
+    tipWidth,
+    tipHeight,
+    maxLength,
+    minLength,
+    ...restProps
+  } = props;
+
+  const {
+    disabled,
+    required,
+    formFieldsRef,
+    readOnly,
+    finalRules,
+    setExtendRules,
+  } = useCommonImperativeHandle(ref, props);
+
+  useEffect(() => {
+    let lengthRule;
+    if (minLength === 0 && maxLength === 0) {
+      lengthRule = undefined;
+    } else if (
+      checkNumber(minLength) &&
+      checkNumber(maxLength) &&
+      minLength < maxLength
+    ) {
+      lengthRule = {
+        pattern: new RegExp(`^[\\s\\S]{${minLength},${maxLength}}$`),
+        message: `内容长度须大于等于${minLength}且小于等于${maxLength}`,
+      };
+    } else if (checkNumber(maxLength) && maxLength > 0) {
+      lengthRule = {
+        pattern: new RegExp(`^[\\s\\S]{0,${maxLength}}$`),
+        message: `内容长度须小于等于${maxLength}`,
+      };
+    } else if (checkNumber(minLength)) {
+      lengthRule = {
+        pattern: new RegExp(`^[\\s\\S]{${minLength},}$`),
+        message: `内容长度须大于等于${minLength}`,
+      };
+    }
+    if (lengthRule) {
+      setExtendRules([lengthRule], false);
+    }
+  }, [minLength, maxLength]);
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      trigger="onChange"
+      wrapperClassName={TEXTAREA_WRAPPER_CLASSNAME}
+      disabled={disabled}
+      required={required}
+      readOnly={readOnly}
+      ref={formFieldsRef}
+      rules={finalRules}
+      validateTrigger="onBlur"
+    >
+      <BaseTextArea
+        maxLength={maxLength}
+        defaultValue={defaultValue}
+        {...restProps}
+      />
+    </FormFields>
+  );
+});
+
+export default TextArea;
+export { WrapperTextArea, TEXTAREA_WRAPPER_CLASSNAME };

package/lib/public/src/components/pcfactory/src/TimePicker/index.tsx

@@ -0,0 +1,3 @@
+import TimePicker from '../DatePicker';
+
+export default TimePicker;

package/lib/public/src/components/pcfactory/src/TlrView/index.tsx

@@ -0,0 +1,3 @@
+import View from '../View';
+
+export default View;

package/lib/public/src/components/pcfactory/src/TooltipView/PropsType.ts

@@ -0,0 +1,22 @@
+import type { EngineApisType } from '@lingxiteam/types';
+
+export interface TooltiProps extends React.HTMLProps<HTMLDivElement> {
+  wrapperClassName?: string;
+  iconClassName?: string;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  label?: any;
+  tipSize?: string;
+  tipWidth?: string;
+  tipHeight?: string;
+  engineApis?: EngineApisType;
+  getEngineApis?: any;
+  $$componentItem?: any;
+}
+
+export interface UseTooltipProps extends TooltiProps {
+  mode?: 'editor' | 'engine';
+}

package/lib/public/src/components/pcfactory/src/TooltipView/TooltipViewED/index.tsx

@@ -0,0 +1,10 @@
+import { useToolTipView } from '../hooks';
+import { TooltiProps } from '../PropsType';
+
+const TooltipViewED: React.FC<TooltiProps> = (props) => {
+  const ToolTipViewComp = useToolTipView(props);
+
+  return ToolTipViewComp;
+};
+
+export default TooltipViewED;

package/lib/public/src/components/pcfactory/src/TooltipView/hooks/index.tsx

@@ -0,0 +1,90 @@
+import { Tooltip } from 'antd';
+import CommIconEG from '../../Icon';
+import CommIconED from '../../Icon/IconED';
+import type { UseTooltipProps } from '../PropsType';
+
+const toolTipViewCls = 'ued-tooltip-view';
+const toolTipViewIconCls = `${toolTipViewCls}-icon`;
+
+const useToolTipView = (props: UseTooltipProps) => {
+  const {
+    wrapperClassName,
+    iconClassName,
+    titleTip,
+    tipIcon,
+    tipLocation,
+    label = null,
+    tipContent,
+    tipPlacement = 'top',
+    mode = 'editor',
+    tipSize = 'default',
+    tipWidth = '240',
+    tipHeight = 'auto',
+    engineApis,
+  } = props;
+  const CommIcon = mode === 'editor' ? CommIconED : CommIconEG;
+  const renderLabel = () => {
+    if (titleTip === 'text' && tipIcon) {
+      return (
+        <span className={wrapperClassName}>
+          {tipLocation === 'before' ? (
+            <>
+              <Tooltip
+                title={tipContent}
+                mouseLeaveDelay={0.1}
+                overlayClassName={toolTipViewCls}
+                placement={tipPlacement}
+                overlayInnerStyle={
+                  tipSize === 'custom'
+                    ? { maxWidth: tipWidth, maxHeight: tipHeight }
+                    : {}
+                }
+              >
+                <CommIcon
+                  style={mode !== 'editor' ? { marginRight: '2px' } : {}}
+                  icon={tipIcon}
+                  className={`${toolTipViewIconCls} ${iconClassName}`}
+                  engineApis={engineApis}
+                  getEngineApis={props.getEngineApis}
+                  getEdEngineApi={() => (engineApis || {}) as any}
+                  $$componentItem={props.$$componentItem}
+                />
+              </Tooltip>
+              {label}
+            </>
+          ) : (
+            <>
+              {label}
+              <Tooltip
+                title={tipContent}
+                mouseLeaveDelay={0.1}
+                overlayClassName={toolTipViewCls}
+                placement={tipPlacement}
+                overlayInnerStyle={
+                  tipSize === 'custom'
+                    ? { maxWidth: tipWidth, maxHeight: tipHeight }
+                    : {}
+                }
+              >
+                <CommIcon
+                  style={mode !== 'editor' ? { marginLeft: '2px' } : {}}
+                  icon={tipIcon}
+                  className={`${toolTipViewIconCls} ${iconClassName}`}
+                  engineApis={engineApis}
+                  getEngineApis={props.getEngineApis}
+                  $$componentItem={props.$$componentItem}
+                  getEdEngineApi={() => (engineApis || {}) as any}
+                />
+              </Tooltip>
+            </>
+          )}
+        </span>
+      );
+    }
+    return label;
+  };
+
+  return renderLabel();
+};
+
+export { useToolTipView };

package/lib/public/src/components/pcfactory/src/TooltipView/index.tsx

@@ -0,0 +1,13 @@
+import { useToolTipView } from './hooks';
+import { TooltiProps } from './PropsType';
+
+const TooltipView: React.FC<TooltiProps> = (props) => {
+  const ToolTipViewComp = useToolTipView({
+    ...props,
+    mode: 'engine',
+  });
+
+  return ToolTipViewComp;
+};
+
+export default TooltipView;