@lingxiteam/ebe-utils 0.5.1 → 0.5.2

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

@@ -0,0 +1,88 @@
+/* eslint-disable semi */
+export default interface ChartLineProps {
+  visible?: boolean;
+  exampleData?: any; // 示例数据
+  style?: React.CSSProperties;
+  className?: string;
+  chartType: string; // 图表类型
+  title?: string; // 标题
+  subTitle?: string; // 副标题
+  titlePosition?: 'left' | 'center' | 'right'; // 标题位置
+  xAxisTitle?: string; // 横轴标题
+  xAxisData?: any[]; // 横轴内容
+  dataSource?: any[]; // 横轴数据源
+  legendField?: string; // 横轴图例字段
+  xAxisTitleTop?: string; // 顶部横轴-标题
+  xAxisDataTop?: any[];
+  dataSourceTop?: any[];
+  legendFieldTop?: string;
+  yAxisTitle?: string; // 纵轴标题
+  yAxisInterval?: number; // 纵轴间隔
+  yAxisMin?: number; // 刻度起始值
+  yAxisMax?: number; // 刻度终点值
+  yAxisFormatter?: string; // 刻度后缀
+  yAxisIndexMap?: any; // 纵轴映射
+  yAxisTitleRight?: string; // 右侧纵轴-标题
+  yAxisIntervalRight?: number;
+  yAxisMinRight?: number;
+  yAxisMaxRight?: number;
+  yAxisFormatterRight?: string;
+  color: any[]; // 颜色
+  layout:
+    | 'top'
+    | 'left'
+    | 'leftTop'
+    | 'rightTop'
+    | 'bottom'
+    | 'right'
+    | 'rightBottom'
+    | 'leftBottom'
+    | 'horizontal'; // 图标布局
+  smooth?: boolean; // 平滑曲线
+  lineType: 'solid' | 'dashed' | 'dotted'; // 线类型
+  stacked?: any; // 堆叠
+  area?: 'area' | 'none'; // 面积填充
+  lineBarMap?: any; // 线柱映射
+  legend?: any; // 图例支持扩展
+  showLegend?: boolean; // 图例显隐
+  legendOrient?: 'horizontal' | 'vertical'; // 图例布局
+  tooltip?: any; // 提示框支持扩展
+  showTooltip?: boolean; // 提示框显隐
+  tooltipFormatter?: string; // 提示内容值后缀
+  label?: any; // 标签支持扩展
+  showLable?: boolean; // 数字标签显隐
+  symbol:
+    | 'circle'
+    | 'rect'
+    | 'roundRect'
+    | 'triangle'
+    | 'diamond'
+    | 'pin'
+    | 'arrow'
+    | 'none'; // 标记图形 - 只有折线图存在symbol
+  symbolSize: number; // 标记大小
+  markPoint?: any; // 标签支持扩展
+  showMarkPoint?: boolean; // 标注显隐
+  markPointSymbol?:
+    | 'circle'
+    | 'rect'
+    | 'roundRect'
+    | 'triangle'
+    | 'diamond'
+    | 'pin'
+    | 'arrow'
+    | 'none'; // 标注图形
+  markPointType: 'min' | 'max' | 'average'; // 标注纬度
+  markLine?: any; // 标线支持扩展
+  showMarkLine?: boolean; // 标线显隐
+  markLineType: 'min' | 'max' | 'average'; // 标线纬度
+  emphasis?: any; // 高亮效果支持扩展
+  showEmphasis?: boolean; // 开启高亮效果显隐
+  axisExchange?: boolean; // 横纵轴调换
+  backgroundStyleColor?: string; // 柱条背景色
+  barMaxWidth?: string; // 最大柱宽
+  barGap?: number; // 组内间距
+  getEngineApis?: any; // 运行态api
+  funcExpExecute?: any;
+  // eslint-disable-next-line no-extra-semi
+}

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

@@ -0,0 +1,15 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useImperativeHandle } from 'react';
+import CharBarLoader from './loader';
+import ChartLineProps from './PropsType';
+
+const ChartLine = LingxiForwardRef<unknown, ChartLineProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({
+    // 这里暴漏部分指令方法
+    // 由于组件采用懒加载延迟执行组件，导致组件在未加载完成的时候已经执行了页面加载完成的生命周期，所以未来的指令方法不应放入懒加载中，避免页面加载完成时机无法调用指令。
+  }));
+
+  return <CharBarLoader {...props} />;
+});
+
+export default ChartLine;

package/lib/public/src/components/pcfactory/src/ChartLine/loader.tsx

@@ -0,0 +1,12 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const LoadableChartLine = Loadable({
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: 'pcfactory-ChartLine' */ './ChartLine'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default LoadableChartLine;

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

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+import React, { FC } from 'react';
+
+import { Checkbox, CheckboxProps } from 'antd';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+} from '../utils';
+
+const CHECKBOX_WRAPPER_CLASSNAME = 'ued-checkbox-wrap';
+const WrapperCheckbox = ({ children }: { children: JSX.Element }) =>
+  React.cloneElement(children, {
+    className: `${CHECKBOX_WRAPPER_CLASSNAME} ${
+      children.props.className || ''
+    }`,
+  });
+
+export interface MyCheckboxProps {
+  value?: any;
+  visible?: boolean;
+  onChange?: (value: any) => void;
+  onValueRelease?: (value: any) => void;
+  getCompPropMapState?: (id: string, type: string) => any;
+  compId?: string;
+  name?: string;
+  fieldName: string;
+  required?: any;
+  hidden?: boolean;
+  regexp?: any;
+  message?: any;
+  defaultChecked?: any;
+  label?: any;
+  labelCol?: any;
+  wrapperCol?: any;
+  text?: any;
+  selfSpan?: number;
+  colSpan?: number;
+  style?: React.CSSProperties;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  colon?: boolean;
+  isFormChild?: boolean | undefined;
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+}
+
+export interface CheckboxItemProps extends CheckboxProps {
+  value: CheckboxProps['checked'];
+}
+
+// 组件识别checked， 导致form.setFieldValue不生效 拆出来让组件识别value
+const CheckboxItem: FC<CheckboxItemProps> = (props) => {
+  return <Checkbox {...props} checked={props.value} />;
+};
+
+const MyCheckbox = React.forwardRef<any, MyCheckboxProps>((props, ref) => {
+  const {
+    value,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    visible = true,
+    onChange,
+    onValueRelease,
+    getCompPropMapState,
+    compId,
+    name,
+    fieldName,
+    hidden,
+    regexp,
+    message,
+    label,
+    labelCol,
+    wrapperCol,
+    text,
+    selfSpan,
+    colSpan,
+    defaultChecked,
+    showWrapperContainer,
+    wrapperContainer: WrapperContainer,
+    titleTip,
+    tipIcon,
+    tipLocation,
+    tipContent,
+    tipPlacement,
+    isFormChild,
+    tipSize,
+    tipWidth,
+    tipHeight,
+    ...restProps
+  } = props;
+
+  const customStyle = restProps.style || {};
+  const {
+    margin: customMargin,
+    display: customDisplay,
+    visibility: customVisibility,
+    ...restCusStyles
+  } = customStyle;
+
+  const { formFieldsRef, readOnly, required, disabled, finalRules } =
+    useCommonImperativeHandle(ref, props);
+
+  const rProps = { ...restProps, style: restCusStyles };
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      defaultValue={defaultChecked}
+      wrapperClassName={CHECKBOX_WRAPPER_CLASSNAME}
+      readOnly={readOnly}
+      required={required}
+      disabled={disabled}
+      ref={formFieldsRef}
+      rules={finalRules}
+      handleFormValue={(value) => {
+        if (value === 'false') {
+          return false;
+        }
+        return value;
+      }}
+    >
+      <CheckboxItem
+        {...rProps}
+        value={value === 'false' ? false : value}
+        onChange={(e) => {
+          if (onChange) {
+            onChange(e.target.checked);
+          }
+        }}
+      >
+        {text}
+      </CheckboxItem>
+    </FormFields>
+  );
+});
+
+export default MyCheckbox;
+export { CHECKBOX_WRAPPER_CLASSNAME, WrapperCheckbox };

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

@@ -0,0 +1,319 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Checkbox } from 'antd';
+import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { FormFields, getFieldsProps } from '../utils';
+import useCommonImperative from '../utils/hooks/useCommonImperativeHandle';
+import { useLocale } from '../utils/hooks/useLocale';
+import { renderCommonList } from '../utils/renderReadOnly';
+
+export interface MyCheckboxGroupProps {
+  value?: any;
+  visible?: boolean;
+  onChange?: (value: any) => void;
+  onValueRelease?: (value: any) => void;
+  getCompPropMapState?: (id: string, type: string) => any;
+  compId?: string;
+  name?: string;
+  fieldName: string;
+  required?: any;
+  hidden?: boolean;
+  regexp?: any;
+  message?: any;
+  defaultValue?: any;
+  label?: any;
+  labelCol?: any;
+  wrapperCol?: any;
+  text?: any;
+  selfSpan?: number;
+  colSpan?: number;
+  rangeLimit?: any;
+  dataSource?: any;
+  valueKey?: string;
+  labelKey?: string;
+  attr?: any;
+  style?: React.CSSProperties;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  rules?: any[];
+  colon?: boolean;
+  max?: number;
+  min?: number;
+  checkedAll?: boolean;
+  checkAllText?: any;
+  classNameCheck?: any;
+  className?: any;
+  disabled?: boolean;
+  isFormChild?: boolean | undefined;
+  readOnly: boolean;
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+}
+
+/**
+ * 处理数据
+ * @param dataSource 数据源
+ * @param valueKey
+ * @param labelKey
+ * @returns
+ */
+export const handleDataSource = (
+  dataSource: any[],
+  valueKey?: string,
+  labelKey?: string,
+) => {
+  const valueKeys: any = [];
+  const newDataSoure: any[] = [];
+  if (Array.isArray(dataSource)) {
+    dataSource.forEach((v: any) => {
+      const label = v?.[labelKey || 'label'];
+      const value = v?.[valueKey || 'value'] || v?.key;
+      if (value) {
+        valueKeys.push(value);
+        newDataSoure.push({
+          ...v,
+          label,
+          value,
+        });
+      }
+    });
+  }
+  return newDataSoure;
+};
+// const prefixCls = 'checkboxGroup';
+
+const CheckboxGroup = LingxiForwardRef<any, MyCheckboxGroupProps>(
+  (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,
+      text,
+      selfSpan,
+      colSpan,
+      rangeLimit,
+      labelKey = 'label',
+      valueKey = 'value',
+      showWrapperContainer,
+      wrapperContainer: WrapperContainer,
+      titleTip,
+      tipIcon,
+      tipLocation,
+      tipContent,
+      tipPlacement,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      rules: externalRules = [],
+      max,
+      min,
+      checkedAll,
+      checkAllText,
+      classNameCheck,
+      className,
+      isFormChild,
+      tipSize,
+      tipWidth,
+      tipHeight,
+      getEngineApis,
+      dataSource: newDataSoure,
+      ...restProps
+    } = props;
+
+    const engineApis = getEngineApis();
+    const customStyle = restProps.style || {};
+    const [dataSource, setDataSource] = useState<any[]>([]);
+    const [lKey, setLKey] = useState(labelKey);
+    const [vKey, setVKey] = useState(valueKey);
+
+    const {
+      margin: customMargin,
+      display: customDisplay,
+      visibility: customVisibility,
+      ...restCusStyles
+    } = customStyle;
+
+    const {
+      formFieldsRef,
+      required,
+      disabled,
+      readOnly,
+      finalRules,
+      setExtendRules,
+    } = useCommonImperative(ref, props, {
+      clearValue: [],
+      setDataWithLabelAndValue: (data: {
+        dataSource: any[];
+        labelKey: string;
+        valueKey: string;
+      }) => {
+        setLKey(data.labelKey);
+        setVKey(data.valueKey);
+        const newData = handleDataSource(
+          data.dataSource,
+          data.valueKey,
+          data.labelKey,
+        );
+        setDataSource(newData);
+      },
+      clearOptions: () => {
+        setDataSource([]);
+      },
+    });
+    const { getLocale, lang } = useLocale(engineApis);
+
+    const dfValue =
+      defaultValue && typeof defaultValue === 'string'
+        ? defaultValue.split(',')
+        : undefined;
+    // 处理列表数据
+    useEffect(() => {
+      let newData = Array.isArray(newDataSoure)
+        ? handleDataSource(newDataSoure, vKey, lKey)
+        : [];
+      if (rangeLimit && rangeLimit.length > 0) {
+        // 根据联动规则过滤出可选范围
+        newData = newData.map((c: any) => ({
+          ...c,
+          disabled: !rangeLimit.includes(+c.value),
+        }));
+      }
+      setDataSource(newData);
+    }, [JSON.stringify(newDataSoure), rangeLimit]);
+
+    const getRules = () => {
+      if (!min && !max) {
+        return [];
+      }
+      const minMsg: any = [];
+      const maxMsg: any = [];
+      if (min) {
+        minMsg.push({
+          type: 'array',
+          min,
+          message: getLocale?.('CheckboxGroup.minRule', { min }),
+        });
+      }
+      if (max) {
+        maxMsg.push({
+          type: 'array',
+          max,
+          message: getLocale?.('CheckboxGroup.maxRule', { max }),
+        });
+      }
+      return [...minMsg, ...maxMsg];
+    };
+
+    useLayoutEffect(() => {
+      const extendRules = getRules();
+      setExtendRules(extendRules, false);
+    }, [min, max, lang]);
+
+    // indeterminate: 已选但未全选，checkAll：全选/全不选，isAllDisabled：是否选项全部禁用
+    const [indeterminate, checkAll, isAllDisabled] = useMemo(() => {
+      const curValue = dataSource
+        ?.filter((c) => (value || [])?.includes(c?.value))
+        ?.map((v) => v?.value);
+      const valLen = curValue?.length || 0;
+      const dataLen = dataSource?.length || 0;
+      const disableLen = dataSource?.filter((o) => o?.disabled)?.length;
+      return [
+        !!valLen && valLen < dataLen,
+        !!dataLen && dataLen === valLen,
+        !!dataLen && disableLen === dataLen,
+      ];
+    }, [value, checkedAll, dataSource]);
+
+    const onCheckAllChange = (e: any) => {
+      const { checked } = e.target;
+      let newVal: any = [];
+      if (checked) {
+        newVal = dataSource?.map((v: any) => v.value);
+      }
+      if (onChange) {
+        onChange(newVal);
+      }
+    };
+
+    const renderItem = () => {
+      const rProps = {
+        ...restProps,
+        style: restCusStyles,
+        defaultValue: dfValue,
+        disabled,
+      };
+      return checkedAll && dataSource?.length > 0 ? (
+        <>
+          <Checkbox
+            className={classNameCheck}
+            indeterminate={indeterminate}
+            disabled={rProps?.disabled || isAllDisabled}
+            checked={checkAll}
+            onChange={(e) => onCheckAllChange(e)}
+          >
+            {checkAllText || getLocale?.('all')}
+          </Checkbox>
+          <Checkbox.Group
+            {...rProps}
+            value={value}
+            options={dataSource}
+            className={`ued-checkboxgroup-wrap ${className}`}
+            onChange={(e) => {
+              if (onChange) {
+                onChange(e);
+              }
+            }}
+          />
+        </>
+      ) : (
+        <Checkbox.Group
+          {...rProps}
+          className={`ued-checkboxgroup-wrap ${className}`}
+          value={value}
+          options={dataSource}
+          onChange={(e: any) => {
+            if (onChange) {
+              onChange(e);
+            }
+          }}
+        />
+      );
+    };
+
+    return (
+      <FormFields
+        {...getFieldsProps(props)}
+        handleFormValue={(value) => {
+          return value && typeof value === 'string' ? value.split(',') : value;
+        }}
+        readOnly={readOnly}
+        disabled={disabled}
+        required={required}
+        render={(val) => renderCommonList(val, dataSource)}
+        rules={finalRules}
+        defaultValue={dfValue}
+        ref={formFieldsRef}
+      >
+        {renderItem()}
+      </FormFields>
+    );
+  },
+);
+
+export default CheckboxGroup;