@lingxiteam/ebe-utils 0.5.0 → 0.5.2

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

@@ -0,0 +1,425 @@
+import { Input as AntdInput } from 'antd';
+// @ts-ignore
+import { LingxiForwardRef } from '@lingxiteam/types';
+import type { ValidationRule } from 'antd/es/form';
+import classnames from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
+import CommIcon from '../Icon';
+import { handleIsValidIconCfg } from '../Icon/hooks';
+import type { IconCfg } from '../Icon/PropsType';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+  useDataMask,
+} from '../utils';
+import { checkNumber } from '../utils/common';
+import { useLocale } from '../utils/hooks/useLocale';
+import renderReadOnly from '../utils/renderReadOnly';
+
+export interface MyInputProps {
+  value?: any;
+  icon?: IconCfg;
+  prefixIcon?: any; // 图标
+  visible?: any;
+  onChange?: any;
+  onValueRelease?: any;
+  getCompPropMapState?: any;
+  compId?: any;
+  name?: any;
+  fieldName?: any;
+  required?: any;
+  readOnly?: boolean;
+  regexp?: any;
+  message?: any;
+  label?: any;
+  labelCol?: any;
+  wrapperCol?: any;
+  selfSpan?: any;
+  hidden?: any;
+  colSpan?: any;
+  onIconClick?: any;
+  defaultValue?: any;
+  validateStatus?: any;
+  help?: any;
+  postfix?: any;
+  compType?: any;
+  prefixStyle?: any;
+  prefixWord?: any;
+  prefixIconPosition?: any;
+  postfixIconPosition?: any;
+  postfixStyle?: any;
+  onSelectedRowsRelease?: any;
+  onSelectedRowKeysRelease?: any;
+  onSelectedKeysRelease?: any;
+  onEditingKeyRelease?: any;
+  onInlineEditRelease?: any;
+  onInlineSaveRelease?: any;
+  onSelectedDataRelease?: any;
+  pageState?: any;
+  pagePublicState?: any;
+  className?: any;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  minLength?: any;
+  maxLength?: any;
+  rules?: any[];
+  colon?: boolean;
+  isFormChild?: boolean | undefined;
+  dataMask?: string | Function;
+  dataMaskUtil?: any; // 工具类
+  type?: string;
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+  getEngineApis?: any;
+  trigger?: string;
+}
+export interface WrapperInputProps {
+  children: React.ReactElement;
+}
+
+const INPUT_WRAPPER_CLASSNAME = 'ued-input-wrap';
+
+const WrapperInput: React.FC<WrapperInputProps> = ({ children }) =>
+  React.cloneElement(children, {
+    className: `${INPUT_WRAPPER_CLASSNAME}`,
+  });
+const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
+  const {
+    value,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    visible = true,
+    onChange,
+    onValueRelease,
+    getCompPropMapState,
+    compId,
+    name,
+    fieldName,
+    regexp,
+    message,
+    label,
+    labelCol,
+    wrapperCol,
+    selfSpan,
+    hidden,
+    colSpan,
+    onIconClick,
+    defaultValue,
+    validateStatus,
+    help,
+    postfix,
+    compType,
+    prefixStyle,
+    prefixWord,
+    prefixIconPosition,
+    postfixIconPosition,
+    postfixStyle,
+    onSelectedRowsRelease,
+    onSelectedRowKeysRelease,
+    onSelectedKeysRelease,
+    onEditingKeyRelease,
+    onInlineEditRelease,
+    onInlineSaveRelease,
+    onSelectedDataRelease,
+    pageState,
+    pagePublicState,
+    className,
+    showWrapperContainer,
+    wrapperContainer: WrapperContainer,
+    titleTip,
+    tipIcon,
+    tipLocation,
+    tipContent,
+    tipPlacement,
+    minLength,
+    maxLength,
+    isFormChild,
+    icon = {},
+    prefixIcon = {},
+    dataMask,
+    dataMaskUtil,
+    tipSize,
+    tipWidth,
+    tipHeight,
+    getEngineApis,
+    $$componentItem,
+    trigger,
+    ...restProps
+  } = props;
+
+  const {
+    disabled,
+    required,
+    formFieldsRef,
+    readOnly,
+    finalRules: temRules,
+  } = useCommonImperativeHandle(ref, props);
+
+  const { getLocale, lang } = useLocale(getEngineApis?.());
+  // Input控件值需要经过水印处理
+  const { disableMastStatus, maskData } = useDataMask({
+    getEngineApis,
+    defaultValue,
+    value,
+    dataMask,
+  });
+
+  const { type, theme } = icon || {};
+  const {
+    prefixIconIconFileInfo,
+    prefixIconIsIconFont,
+    prefixIconType,
+    prefixIconTheme,
+    prefixIconFontAddress,
+    prefixIconiconFile,
+  } = prefixIcon;
+
+  const ignoreReadOnlyFlag = useMemo(() => {
+    // 只读模式并且 控件存在图标配置和事件
+    if (!readOnly) {
+      return false;
+    }
+    // 旧数据 type 为后缀图标
+    if (
+      (props.icon?.type || props?.type || props?.postfix) &&
+      typeof props.onIconClick === 'function'
+    ) {
+      return true;
+    }
+    return false;
+  }, [readOnly]);
+
+  const [prefixStyleClsName, setPrefixStyleClsName] = useState<string>('');
+  const [postfixStyleClsName, setPostfixStyleClsName] = useState<string>('');
+
+  // 设置前后缀样式
+  useEffect(() => {
+    switch (prefixStyle) {
+      case '2':
+        setPrefixStyleClsName('greyStyle');
+        break;
+      case '3':
+        setPrefixStyleClsName('blueStyle');
+        break;
+      case '1':
+      default:
+        setPrefixStyleClsName('whiteStyle');
+        break;
+    }
+    switch (postfixStyle) {
+      case '2':
+        setPostfixStyleClsName('postfixGreyStyle');
+        break;
+      case '3':
+        setPostfixStyleClsName('postfixBlueStyle');
+        break;
+      case '4':
+        setPostfixStyleClsName('postfixNoBorderStyle');
+        break;
+      case '1':
+      default:
+        setPostfixStyleClsName('postfixWhiteStyle');
+        break;
+    }
+    if (!theme && !type && !postfix) {
+      setPostfixStyleClsName('');
+    }
+  }, [prefixStyle, postfixStyle]);
+
+  const getAddonBeforeBtn = () => {
+    let before = null;
+
+    const resolvedPrefixIcon = {
+      type: prefixIconType,
+      theme: prefixIconTheme,
+      isIconFont: prefixIconIsIconFont,
+      fontAddress: prefixIconFontAddress,
+      iconFile: prefixIconiconFile,
+      iconFileInfo: prefixIconIconFileInfo,
+    };
+    if (handleIsValidIconCfg(resolvedPrefixIcon)) {
+      before = (
+        <CommIcon
+          className={disabled ? 'disabled' : ''}
+          icon={resolvedPrefixIcon}
+          getEngineApis={getEngineApis}
+          $$componentItem={$$componentItem}
+        />
+      );
+    }
+
+    if (prefixWord) {
+      switch (prefixIconPosition) {
+        case 'after':
+          before = (
+            <span className="postfix">
+              {prefixWord}
+              {before}
+            </span>
+          );
+          break;
+        case 'before':
+        default:
+          before = (
+            <span className="postfix">
+              {before}
+              {prefixWord}
+            </span>
+          );
+          break;
+      }
+    }
+    return before;
+  };
+
+  const getAddonAfterBtn = () => {
+    let after = null;
+
+    if (handleIsValidIconCfg(icon)) {
+      after = (
+        <CommIcon
+          icon={icon}
+          className={disabled ? 'disabled' : ''}
+          getEngineApis={getEngineApis}
+          onClick={disabled || postfix ? null : onIconClick || undefined}
+          $$componentItem={$$componentItem}
+        />
+      );
+    }
+
+    if (postfix) {
+      switch (postfixIconPosition) {
+        case 'after':
+          after = (
+            <span
+              className="postfix"
+              onClick={disabled ? null : onIconClick || undefined}
+            >
+              {postfix}
+              {after}
+            </span>
+          );
+          break;
+        case 'before':
+        default:
+          after = (
+            <span
+              className="postfix"
+              onClick={disabled ? null : onIconClick || undefined}
+            >
+              {after}
+              {postfix}
+            </span>
+          );
+          break;
+      }
+    }
+    return after;
+  };
+
+  const finalRules = useMemo(() => {
+    if (dataMask === 'service') {
+      return [];
+    }
+    const rules: ValidationRule[] = [];
+    let lengthRule;
+    if (minLength === 0 && maxLength === 0) {
+      lengthRule = undefined;
+    } else if (
+      checkNumber(minLength) &&
+      checkNumber(maxLength) &&
+      minLength < maxLength
+    ) {
+      lengthRule = {
+        pattern: new RegExp(`^.{${minLength},${maxLength}}$`),
+        message: getLocale?.('Input.lenRule', { minLength, maxLength }),
+      };
+    } else if (checkNumber(maxLength) && maxLength > 0) {
+      lengthRule = {
+        pattern: new RegExp(`^.{0,${maxLength}}$`),
+        message: getLocale?.('Input.maxRule', { maxLength }),
+      };
+    } else if (checkNumber(minLength)) {
+      lengthRule = {
+        pattern: new RegExp(`^.{${minLength},}$`),
+        message: getLocale?.('Input.minRule', { minLength }),
+      };
+    }
+    if (lengthRule) {
+      rules.push(lengthRule);
+    }
+
+    if (Array.isArray(temRules || [])) {
+      rules.push(...(temRules || []));
+    }
+    return rules;
+  }, [required, lang, temRules]);
+  const showCount = useMemo(
+    () => maxLength && checkNumber(maxLength),
+    [maxLength],
+  );
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      rules={finalRules}
+      handleFormValue={(val) => {
+        return Number.isNaN(val) ? '' : val;
+      }}
+      trigger={trigger}
+      ignoreReadOnlyFlag={ignoreReadOnlyFlag}
+      render={() => {
+        const val = maskData.isMask ? maskData.maskValue : value;
+        return renderReadOnly(val || '--');
+      }}
+      defaultValue={defaultValue}
+      value={value}
+      onValueChange={() => {
+        // 用户主动输入设置脱敏失效
+        disableMastStatus();
+      }}
+      wrapperClassName={INPUT_WRAPPER_CLASSNAME}
+      disabled={disabled}
+      required={required}
+      readOnly={readOnly}
+      ref={formFieldsRef}
+      validateTrigger="onBlur"
+      maskData={maskData}
+    >
+      <AntdInput
+        {...restProps}
+        maxLength={maxLength === 0 ? undefined : maxLength}
+        showCount={showCount}
+        defaultValue={defaultValue}
+        value={value}
+        onChange={(e) => {
+          if (onChange) {
+            onChange(e);
+          }
+        }}
+        className={classnames(
+          prefixStyleClsName,
+          postfixStyleClsName,
+          className,
+        )}
+        addonBefore={getAddonBeforeBtn()}
+        addonAfter={getAddonAfterBtn()}
+      />
+    </FormFields>
+  );
+});
+
+Input.defaultProps = {
+  trigger: 'onChange',
+};
+
+export default Input;
+export { WrapperInput, INPUT_WRAPPER_CLASSNAME };

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

@@ -0,0 +1,263 @@
+import { InputNumber as AntdInputNumber, Tooltip } from 'antd';
+// @ts-ignore
+// import type { ValidationRule } from 'antd/es/form';
+import React, { useMemo, useState } from 'react';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+} from '../utils';
+import { useLocale } from '../utils/hooks/useLocale';
+
+export interface InputNumberProps {
+  value?: any;
+  visible?: any;
+  onChange?: any;
+  onValueRelease?: any;
+  defaultValue?: any;
+  getCompPropMapState?: any;
+  compId?: any;
+  name?: any;
+  fieldName?: any;
+  required?: any;
+  hidden?: any;
+  regexp?: any;
+  message?: any;
+  label?: any;
+  labelCol?: any;
+  wrapperCol?: any;
+  selfSpan?: any;
+  colSpan?: any;
+  validateStatus?: any;
+  help?: any;
+  style?: React.CSSProperties;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  formatting?: any;
+  formatterFunc?: any;
+  parserFunc?: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  rules?: any[];
+  isFormChild?: boolean | undefined;
+  readOnly: boolean;
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+  getEngineApis?: any;
+  trigger?: string;
+  [key: string]: any;
+}
+export interface WrapperInputNumberProps {
+  children: React.ReactElement;
+}
+const INPUTNUMBER_WRAPPER_CLASSNAME = 'ued-inputNumber-wrap';
+const WrapperInputNumber: React.FC<WrapperInputNumberProps> = ({ children }) =>
+  React.cloneElement(children, {
+    className: `${INPUTNUMBER_WRAPPER_CLASSNAME} ${
+      children.props.className || ''
+    }`,
+  });
+const TOOLTIP_CLASSNAME = 'ued-inputNumber-tooltip-wrap';
+const TOOLTIP_CLASSNAME_NO_FORM = `${TOOLTIP_CLASSNAME} no-form`;
+
+const InputNumber = React.forwardRef<any, InputNumberProps>((props, ref) => {
+  const {
+    value,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    visible = true,
+    onChange,
+    onValueRelease,
+    defaultValue,
+    getCompPropMapState,
+    compId,
+    name,
+    fieldName: rawFieldName,
+    hidden,
+    regexp,
+    message,
+    label,
+    labelCol,
+    wrapperCol,
+    selfSpan,
+    colSpan,
+    validateStatus,
+    help,
+    showWrapperContainer,
+    wrapperContainer: WrapperContainer,
+    formatting,
+    formatterFunc,
+    parserFunc,
+    titleTip,
+    tipIcon,
+    tipLocation,
+    tipContent,
+    tipPlacement,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    rules: externalRules = [],
+    isFormChild,
+    tipSize,
+    tipWidth,
+    tipHeight,
+    getEngineApis,
+    trigger,
+    ...restProps
+  } = props;
+
+  const engineApis = getEngineApis?.() || {};
+  const { sandBoxSafeRun } = engineApis;
+
+  const { getLocale } = useLocale(engineApis);
+  const { disabled, required, formFieldsRef, finalRules, readOnly } =
+    useCommonImperativeHandle(ref, props);
+
+  const [digitText, setDigitText] = useState('');
+
+  const digits = [
+    '',
+    '',
+    '',
+    getLocale?.('hundred'),
+    getLocale?.('k'),
+    getLocale?.('w'),
+    getLocale?.('10w'),
+    getLocale?.('100w'),
+    getLocale?.('1000w'),
+    getLocale?.('100m'),
+    getLocale?.('b'),
+    getLocale?.('10b'),
+    getLocale?.('100b'),
+    getLocale?.('t'),
+    getLocale?.('10t'),
+    '',
+  ];
+
+  const formatter = (va: any) => {
+    let val = va;
+    try {
+      if (va.length > 14) {
+        val = va.substring(0, 14);
+      }
+      if (val.indexOf('.') > -1 && !Number.isNaN(+val)) {
+        setDigitText(digits[val.indexOf('.')]);
+      } else if (!Number.isNaN(+val)) {
+        setDigitText(digits[val.length]);
+      }
+
+      if (formatting === 'percent') {
+        if (val.length > 10) {
+          val = val.substring(0, 10);
+        }
+        const p = val.length - val.indexOf('.');
+        // eslint-disable-next-line no-mixed-operators
+        return `${(parseInt(`${val * 10 ** p}`, 10) * 100) / 10 ** p}%`;
+      }
+      if (formatting === 'word') {
+        return val;
+      }
+      const withComma = (str: string) =>
+        str
+          .split('')
+          .reverse()
+          .join('')
+          .replace(/(\d{1,3})/g, ',$1')
+          .split('')
+          .reverse()
+          .join('')
+          .replace(/,$/, '');
+      // 只有小数点前的部分需要千位分隔符
+      if (formatting === 'comma' && val.indexOf('.') > -1) {
+        return (
+          withComma(val.substring(0, val.indexOf('.'))) +
+          val.substring(val.indexOf('.'))
+        );
+      }
+      if (formatting === 'comma') {
+        return withComma(`${val}`);
+      }
+      if (formatting === 'custom' && formatterFunc && parserFunc) {
+        // eslint-disable-next-line no-eval
+        return sandBoxSafeRun(formatterFunc);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    return val;
+  };
+
+  const parser = (val: any) => {
+    try {
+      if (formatting === 'percent') {
+        return parseFloat((val.replace('%', '') / 100).toFixed(10));
+      }
+      if (formatting === 'word') {
+        return val;
+      }
+      if (formatting === 'comma') {
+        return val.replace(/(,*)/g, '');
+      }
+      if (formatting === 'custom' && formatterFunc && parserFunc) {
+        // eslint-disable-next-line no-eval
+        return sandBoxSafeRun(parserFunc);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    return val;
+  };
+
+  const inputNumberProps = useMemo(() => {
+    const targetProps = { ...restProps };
+    if (formatting && formatting !== '') {
+      targetProps.formatter = formatter;
+      targetProps.parser = parser;
+      delete targetProps.precision;
+    }
+    return targetProps;
+  }, [formatting, restProps]);
+
+  return (
+    <>
+      {formatting === 'word' && digitText ? (
+        <Tooltip
+          overlayClassName={TOOLTIP_CLASSNAME_NO_FORM}
+          placement="topLeft"
+          title={digitText}
+          visible
+        />
+      ) : null}
+      <FormFields
+        {...getFieldsProps(props)}
+        rules={finalRules}
+        wrapperClassName={INPUTNUMBER_WRAPPER_CLASSNAME}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        ref={formFieldsRef}
+        validateTrigger="onBlur"
+        trigger={trigger}
+      >
+        <AntdInputNumber
+          {...inputNumberProps}
+          defaultValue={defaultValue}
+          value={value}
+          onChange={(e: any) => {
+            if (onChange) {
+              onChange(e);
+            }
+          }}
+        />
+      </FormFields>
+    </>
+  );
+});
+
+InputNumber.defaultProps = {
+  trigger: 'onChange',
+};
+
+export default InputNumber;
+export { WrapperInputNumber, INPUTNUMBER_WRAPPER_CLASSNAME };

package/lib/public/src/components/pcfactory/src/LXPieChart/LXPieChart.tsx

@@ -0,0 +1,23 @@
+import { LXChart } from '@lingxiteam/charts-common';
+import { LingXiFC } from '@lingxiteam/types';
+import { useHiddenStyle } from '../utils';
+import './index.less';
+import LXPieChartPorps from './PropsType';
+
+const LXPieChart: LingXiFC<LXPieChartPorps> = (props, ref) => {
+  const { style, visible = true, className } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+
+  return (
+    <LXChart
+      style={finalStyle}
+      className={className}
+      configProps={props}
+      isEditMode={false}
+      isMobile={false}
+      chartType="Pie"
+    />
+  );
+};
+
+export default LXPieChart;

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

@@ -0,0 +1,11 @@
+/* eslint-disable semi */
+import { PieChartPorps } from '@lingxiteam/charts-common';
+import type { EngineApisType } from '@lingxiteam/types';
+
+export default interface LXPieChartPorps extends PieChartPorps {
+  visible?: boolean;
+  className?: string;
+  style?: React.CSSProperties; // 样式
+  getEngineApis?: () => EngineApisType;
+  // eslint-disable-next-line no-extra-semi
+}