@lingxiteam/ebe-utils 0.5.1 → 0.5.3

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

@@ -0,0 +1,453 @@
+// @ts-ignore
+import { EngineApisType, LingxiForwardRef } from '@lingxiteam/types';
+import type { ValidationRule } from 'antd/es/form';
+import React, { useEffect, useMemo, useState } from 'react';
+import CommIcon from '../Icon';
+import { handleIsValidIconCfg } from '../Icon/hooks';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+} from '../utils';
+import { useLocale } from '../utils/hooks/useLocale';
+import BaseModalSelect from './BaseModalSelect';
+
+export interface MyModalSelectProps {
+  value?: any;
+  visible?: any;
+  onChange?: any;
+  onValueRelease?: any;
+  getCompPropMapState?: any;
+  compId?: any;
+  getFieldDecorator?: any;
+  form?: any;
+  name?: any;
+  fieldName?: any;
+  required?: any;
+  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;
+  postfixStyle?: any;
+  compType?: 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;
+  allowClear?: any;
+  clearIcon?: any;
+  modalInfo?: any;
+  appId?: any;
+  pageId?: any;
+  onClick?: any;
+  postfixIcon?: any;
+  postfixIconPosition?: any;
+  size?: any;
+  InputNumber?: any;
+  mode?: any;
+  isFormChild?: boolean | undefined;
+  readOnly: boolean;
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+  engineApis?: EngineApisType;
+  getEngineApis?: () => EngineApisType;
+}
+export interface WrapperModalSelectProps {
+  children: React.ReactElement;
+}
+const MODALSELECT_WRAPPER_CLASSNAME = 'ued-input-wrap modalSelect';
+const WrapperModalSelect: React.FC<WrapperModalSelectProps> = ({ children }) =>
+  React.cloneElement(children, {
+    className: `${MODALSELECT_WRAPPER_CLASSNAME} ${
+      children.props.className || ''
+    }`,
+  });
+
+const ModalSelect = LingxiForwardRef<any, MyModalSelectProps>((props, ref) => {
+  const {
+    value: originValue,
+    // visible = true,
+    onChange,
+    onValueRelease,
+    getCompPropMapState,
+    compId,
+    name,
+    fieldName: rawFieldName,
+    regexp,
+    message,
+    label,
+    labelCol,
+    wrapperCol,
+    selfSpan,
+    hidden,
+    colSpan,
+    onIconClick,
+    defaultValue,
+    validateStatus,
+    help,
+    postfix,
+    compType,
+    onSelectedRowsRelease,
+    onSelectedRowKeysRelease,
+    onSelectedKeysRelease,
+    onEditingKeyRelease,
+    onInlineEditRelease,
+    onInlineSaveRelease,
+    onSelectedDataRelease,
+    postfixIconPosition,
+    postfixStyle,
+    postfixIcon,
+    pageState,
+    pagePublicState,
+    className,
+    showWrapperContainer,
+    wrapperContainer: WrapperContainer,
+    titleTip,
+    tipIcon,
+    tipLocation,
+    tipContent,
+    tipPlacement,
+    minLength,
+    maxLength,
+    modalInfo,
+    clearIcon,
+    mode,
+    isFormChild,
+    tipSize,
+    tipWidth,
+    tipHeight,
+    engineApis: receivedEngineApis,
+    getEngineApis,
+    ...restProps
+  } = props;
+
+  const engineApis = receivedEngineApis || getEngineApis?.() || {};
+  const { openModal } = engineApis;
+
+  const { getLocale } = useLocale(engineApis);
+
+  const [options, setOptions] = useState([]);
+  const [postfixStyleClsName, setPostfixStyleClsName] = useState<string>('');
+
+  // 判断字符串能否json解析
+  const isJsonString = (val: any) => {
+    try {
+      const obj = JSON.parse(val);
+      if (obj && typeof obj === 'object') {
+        return true;
+      }
+      return false;
+    } catch (e) {
+      // message.error('返回的格式不能进行解析');
+      return false;
+    }
+  };
+
+  const getValueOptions = (datas: any) => {
+    const { conField, valField } = modalInfo || {};
+    let valArray: any = [];
+    const optionParams: any = [];
+    let flag = true;
+    const valueObj: any =
+      typeof datas === 'string' && isJsonString(datas)
+        ? JSON.parse(datas)
+        : datas;
+    if (valueObj instanceof Array) {
+      valueObj.forEach((va: any) => {
+        if (va[valField] || va.value) {
+          const obj = {
+            label: va[conField] || va.label,
+            value: va[valField] || va.value,
+          };
+          valArray.push(obj.value);
+          optionParams.push(obj);
+        } else if (va) {
+          flag = false;
+          valArray.push(va);
+        }
+      });
+      // 如果模式是单选的话，做一下选中值的筛选
+      if (Array.isArray(valArray) && valArray.length && mode === 'normal') {
+        valArray = valArray[0];
+      }
+    } else if (
+      valueObj instanceof Object &&
+      (valueObj[valField] || valueObj.value)
+    ) {
+      const obj = {
+        label: valueObj[conField] || valueObj.label,
+        value: valueObj[valField] || valueObj.value,
+      };
+      valArray = obj.value;
+      optionParams.push(obj);
+    } else if (['string', 'number'].includes(typeof valueObj)) {
+      flag = false;
+      valArray = valueObj;
+    }
+    if (flag) {
+      setOptions(optionParams);
+    }
+    return { valArray, optionParams };
+  };
+
+  const handleFormValue = (val: any) => {
+    // value 可能为数组，对象，字符串: 字符串解析
+    if (val !== undefined) {
+      const { valArray } = getValueOptions(val);
+      return valArray;
+    }
+    return undefined;
+  };
+
+  const value = useMemo(() => {
+    return handleFormValue(originValue);
+  }, [JSON.stringify(originValue)]);
+
+  const {
+    formFieldsRef,
+    disabled,
+    readOnly,
+    required,
+    finalRules: temRules,
+  } = useCommonImperativeHandle(ref, props, {
+    clearValue: [],
+    get value() {
+      return value;
+    },
+  });
+
+  // 设置前后缀样式
+  useEffect(() => {
+    switch (postfixStyle) {
+      case '2':
+        setPostfixStyleClsName('postfixGreyStyle');
+        break;
+      case '3':
+        setPostfixStyleClsName('postfixBlueStyle');
+        break;
+      case '4':
+        setPostfixStyleClsName('postfixNoBorderStyle');
+        break;
+      case '1':
+      default:
+        setPostfixStyleClsName('postfixWhiteStyle');
+        break;
+    }
+    if (!postfixIcon?.theme && !postfixIcon?.type && !postfix) {
+      setPostfixStyleClsName('');
+    }
+  }, [postfixStyle]);
+
+  const getAddonAfterBtn = () => {
+    const { disabled } = restProps;
+    let after = null;
+
+    if (handleIsValidIconCfg(postfixIcon)) {
+      after = (
+        <CommIcon
+          className={disabled ? 'disabled' : ''}
+          icon={postfixIcon}
+          getEngineApis={getEngineApis}
+          onClick={disabled || postfix ? null : onIconClick || undefined}
+          $$componentItem={props?.$$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 ClearIcon = () => {
+    let clear = null;
+    // 选择了图标
+    if (value && props?.allowClear && handleIsValidIconCfg(clearIcon)) {
+      clear = (
+        <span onClick={() => handleChangeVal([])}>
+          <CommIcon
+            icon={clearIcon}
+            className="anticon anticon-close-circle pcfactory-input-clear-icon-has-suffix pcfactory-input-clear-icon"
+            $$componentItem={props?.$$componentItem}
+            getEngineApis={getEngineApis}
+          />
+        </span>
+      );
+    }
+    return clear;
+  };
+
+  // 非负整数
+  const numReg = /^\d*$/;
+  // 验证字符串是否是非负整数
+  const checkNumber = (str: any) => {
+    return numReg.test(str);
+  };
+
+  const handleChangeVal = (e: any) => {
+    if (onChange) {
+      onChange(e, options);
+    }
+  };
+
+  // 弹框回调
+  const handleModalOk = (res: any) => {
+    const { valArray, optionParams } = getValueOptions(res);
+    const modeOpts =
+      mode === 'multiple'
+        ? optionParams
+        : optionParams.filter((v: any) => v?.value === valArray);
+    if (onChange) {
+      onChange(valArray, modeOpts);
+    }
+  };
+  // 触发弹框弹出
+  const handleClickVisible = () => {
+    if (openModal && modalInfo?.pageId) {
+      const respObj: any = {};
+      modalInfo?.responseObj?.forEach((da: any) => {
+        if (da.value) {
+          respObj[da.code] = da.value;
+        }
+      });
+      openModal({
+        pageId: modalInfo.pageId,
+        params: respObj,
+        modalPath: modalInfo?.modalname,
+        onOk: (res: any) => handleModalOk(res),
+      });
+    }
+  };
+  const lastValue: any = useMemo(() => {
+    if (options?.length) {
+      return options[options?.length - 1] && options[options?.length - 1];
+    }
+    return {};
+  }, [options]);
+
+  const finalRules = useMemo(() => {
+    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, minLength, name, regexp, maxLength, temRules]);
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      ref={formFieldsRef}
+      wrapperClassName={MODALSELECT_WRAPPER_CLASSNAME}
+      rules={finalRules}
+      value={value}
+      handleFormValue={handleFormValue}
+    >
+      <BaseModalSelect
+        className={className}
+        postfixStyleClsName={postfixStyleClsName}
+        restProps={restProps}
+        mode={mode}
+        ClearIcon={ClearIcon}
+        options={options}
+        handleChangeVal={handleChangeVal}
+        handleClickVisible={handleClickVisible}
+        lastValue={lastValue}
+        onIconClick={onIconClick}
+        getAddonAfterBtn={getAddonAfterBtn}
+        propsOnChange={onChange}
+        disabled={disabled}
+        readOnly={readOnly}
+        allowClear={props.allowClear}
+        InputNumber={props.InputNumber}
+      />
+    </FormFields>
+  );
+});
+
+export default ModalSelect;
+export { MODALSELECT_WRAPPER_CLASSNAME, WrapperModalSelect };

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

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

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

@@ -0,0 +1,104 @@
+import { Pagination } from 'antd';
+import React, { useMemo, useState } from 'react';
+
+export interface MyPaginationProps {
+  size: any;
+  style?: any;
+  className?: any;
+  visible: boolean;
+  disabled: boolean;
+  simple: boolean;
+  pageSize: number;
+  total?: number;
+  current?: number;
+  pagination?: any;
+  showQuickJumper?: boolean;
+  showSizeChanger?: boolean;
+  pageSizeOptions?: string;
+  onPageChange?: (page: React.SetStateAction<number>, size: number) => void;
+  getEngineApis?: any;
+}
+
+// const prefixCls = 'pagination';
+
+const MyPagination: React.FC<MyPaginationProps> = (props) => {
+  const {
+    visible,
+    size,
+    disabled,
+    simple,
+    style,
+    className,
+    current,
+    pageSize,
+    total,
+    showQuickJumper,
+    showSizeChanger,
+    pageSizeOptions,
+    onPageChange,
+    getEngineApis,
+  } = props;
+
+  const [currentPage, setCurrentPage] = useState(current || 1);
+  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+
+  const hasPageChangeEvent = typeof onPageChange === 'function'; // 是否配置页码改变回调事件（是：后端分页，否：前端分页）
+  const realCurrent = (hasPageChangeEvent ? current : currentPage) || 1;
+  const realPageSize = (hasPageChangeEvent ? pageSize : currentPageSize) || 10;
+
+  // 解析分页选择器配置
+  const parsedPageSizeOptions = useMemo(() => {
+    if (pageSizeOptions) {
+      try {
+        const arr = JSON.parse(pageSizeOptions);
+        if (Array.isArray(arr)) {
+          return arr.map((s) => String(s));
+        }
+        return undefined;
+      } catch (e) {
+        console.error('条数可选值 pageSizeOptions 必须配置为数字数组字符串'); // eslint-disable-line no-console
+      }
+    }
+    return undefined;
+  }, [pageSizeOptions]);
+
+  const paginationProps: any = {
+    size,
+    disabled,
+    simple,
+    current: +realCurrent,
+    pageSize: realPageSize,
+    total: Number(total) || 0,
+    showQuickJumper,
+    showSizeChanger,
+    pageSizeOptions: parsedPageSizeOptions,
+    showTotal: (tol: any) =>
+      getEngineApis?.()?.getLocale?.('Pagination.showTotal', undefined, {
+        tol,
+      }),
+    onShowSizeChange: (newCurrent: number, newPageSize: number) => {
+      if (hasPageChangeEvent) {
+        onPageChange(newCurrent, newPageSize);
+        return;
+      }
+      setCurrentPage(newCurrent);
+      setCurrentPageSize(newPageSize);
+    },
+    onChange: (
+      newCurrent: React.SetStateAction<number>,
+      newPageSize: number,
+    ) => {
+      if (hasPageChangeEvent) {
+        onPageChange(newCurrent, newPageSize);
+        return;
+      }
+      setCurrentPage(newCurrent);
+    },
+  };
+
+  return visible ? (
+    <Pagination {...paginationProps} style={style} className={className} />
+  ) : null;
+};
+
+export default MyPagination;

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

@@ -0,0 +1,88 @@
+import { Input } from 'antd';
+import React from 'react';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+} from '../utils';
+import { renderPassword } from '../utils/renderReadOnly';
+
+export interface PassWordProps {
+  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;
+  style?: React.CSSProperties;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  colon?: boolean;
+  isFormChild?: boolean | undefined;
+  readOnly: boolean;
+  rules?: any[];
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+}
+export interface WrapperInputPasswordProps {
+  children: React.ReactElement;
+}
+
+const INPUTPASSWORD_WRAPPER_CLASSNAME = 'ued-inputPassword-wrap';
+const WrapperInputPassword: React.FC<WrapperInputPasswordProps> = ({
+  children,
+}) =>
+  React.cloneElement(children, {
+    className: `${INPUTPASSWORD_WRAPPER_CLASSNAME} ${
+      children.props.className || ''
+    }`,
+  });
+
+const { Password: AntdPassword } = Input;
+
+const Password: React.FC<PassWordProps> = React.forwardRef((props, ref) => {
+  const { required, finalRules, disabled, formFieldsRef, readOnly } =
+    useCommonImperativeHandle(ref, props);
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      render={renderPassword}
+      wrapperClassName={INPUTPASSWORD_WRAPPER_CLASSNAME}
+      required={required}
+      rules={finalRules}
+      disabled={disabled}
+      readOnly={readOnly}
+      ref={formFieldsRef}
+    >
+      <AntdPassword
+        {...props}
+        onChange={(e: any) => {
+          if (props.onChange) {
+            props.onChange(e);
+          }
+        }}
+      />
+    </FormFields>
+  );
+});
+
+export default Password;
+export { INPUTPASSWORD_WRAPPER_CLASSNAME, WrapperInputPassword };