@lingxiteam/ebe-utils 0.5.1 → 0.5.3

package/lib/public/src/components/pcfactory/src/Card/useExtendBtn.tsx

@@ -0,0 +1,195 @@
+import { Icon } from '@lingxiteam/icons';
+import { Button, Popover, Tooltip } from 'antd';
+import { ButtonType } from 'antd/lib/button';
+import { SizeType } from 'antd/lib/config-provider/SizeContext';
+import CommIcon from '../Icon';
+import type { IconCfg } from '../Icon/PropsType';
+import { useLocale } from '../utils/hooks/useLocale';
+
+interface ExtendProps {
+  extend?: Array<{
+    icon: IconCfg;
+    iconPos: 'left' | 'right';
+    id: string;
+    btnType?: ButtonType;
+    btnSize?: SizeType;
+    isIcon?: boolean;
+    rule?: string;
+    visible?: boolean;
+    checked?: boolean;
+    value?: string;
+    disabled?: boolean;
+  }>;
+  getEngineApis: any;
+  extendNum?: number;
+  $$componentItem?: any;
+  prefixCls?: string;
+  [key: string | number]: unknown;
+}
+const useExtendBtn = (props: ExtendProps) => {
+  const { extend, extendNum = 3, getEngineApis, prefixCls = '' } = props;
+  const engineApis = getEngineApis?.() || {};
+  const { getLocale } = useLocale(engineApis);
+  const { sandBoxSafeRun } = engineApis;
+
+  const renderBtn = (btnList: any, isPopover = false, clicks: any) => {
+    if (Array.isArray(btnList)) {
+      return btnList.map((c, i) => {
+        const {
+          icon,
+          iconPos,
+          id,
+          btnType,
+          btnSize,
+          isIcon,
+          rule,
+          visible: buttonVisible = true,
+          disabled,
+        } = c;
+        const handleOnClick = (e: any) => {
+          if (clicks[i] && typeof clicks[i] === 'function') {
+            clicks[i](e);
+          }
+        };
+        const BtnIcon = icon ? (
+          <Button
+            className={`${prefixCls}-extend-iconBtn`}
+            type="link"
+            disabled={disabled}
+            key={isIcon && id}
+            onClick={isIcon && handleOnClick}
+          >
+            {/** @ts-ignore */}
+            <CommIcon
+              icon={icon}
+              engineApis={engineApis}
+              getEngineApis={getEngineApis}
+            />
+          </Button>
+        ) : undefined;
+        const TooltipBtn = <Tooltip title={c.title}>{BtnIcon}</Tooltip>;
+        try {
+          if (sandBoxSafeRun(rule)) return null;
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        }
+        return (
+          // eslint-disable-next-line no-nested-ternary
+          buttonVisible ? (
+            // eslint-disable-next-line no-nested-ternary
+            isIcon ? (
+              isPopover ? (
+                <a>{TooltipBtn}</a>
+              ) : (
+                TooltipBtn
+              )
+            ) : isPopover ? (
+              <div>
+                <Button
+                  disabled={disabled}
+                  key={id}
+                  type="link"
+                  size={btnSize}
+                  onClick={handleOnClick}
+                >
+                  {iconPos && iconPos === 'left' && icon && (
+                    <CommIcon
+                      icon={icon}
+                      engineApis={engineApis}
+                      getEngineApis={getEngineApis}
+                      $$componentItem={props.$$componentItem}
+                      className=""
+                    />
+                  )}
+                  {c.title}
+                  {iconPos && iconPos === 'right' && icon && (
+                    <CommIcon
+                      icon={icon}
+                      engineApis={engineApis}
+                      getEngineApis={getEngineApis}
+                      $$componentItem={props.$$componentItem}
+                      className=""
+                    />
+                  )}
+                </Button>
+              </div>
+            ) : (
+              <Button
+                disabled={disabled}
+                key={id}
+                className={`${prefixCls}-extend-btn`}
+                type={btnType}
+                size={btnSize}
+                onClick={handleOnClick}
+              >
+                {iconPos && iconPos === 'left' && icon && (
+                  <CommIcon
+                    icon={icon}
+                    engineApis={engineApis}
+                    getEngineApis={getEngineApis}
+                    $$componentItem={props.$$componentItem}
+                    className=""
+                  />
+                )}
+                {c.title}
+                {iconPos && iconPos === 'right' && icon && (
+                  <CommIcon
+                    icon={icon}
+                    engineApis={engineApis}
+                    getEngineApis={getEngineApis}
+                    $$componentItem={props.$$componentItem}
+                    className=""
+                  />
+                )}
+              </Button>
+            )
+          ) : null
+        );
+      });
+    }
+    return undefined;
+  };
+  const renderExtendBtn = () => {
+    if (Array.isArray(extend) && extend.length) {
+      const showBtnList: any = []; // 需要过滤掉不展示的按钮
+      const showBtnClick: any = [];
+      extend.forEach((item, index) => {
+        if (item.visible !== false && item?.checked !== false) {
+          showBtnList.push(item);
+          const clickText = item?.value || `onClickBtn${index + 1}`;
+          showBtnClick.push((props as any)[clickText]);
+        }
+      });
+      const btnList = [...showBtnList];
+      const clicks = [...showBtnClick];
+      const preBtn = btnList.splice(0, extendNum);
+      const preClicks = clicks.splice(0, extendNum);
+      const content = (
+        <div className={`${prefixCls}-extend-btn-pop`}>
+          {renderBtn(btnList, true, clicks)}
+        </div>
+      );
+      return (
+        <>
+          {renderBtn(preBtn, false, preClicks)}
+          {showBtnList.length > extendNum && (
+            <Popover content={content} trigger="click">
+              <Button type="link" key="more">
+                {getLocale?.('more')}
+                <Icon type="down" />
+              </Button>
+            </Popover>
+          )}
+        </>
+      );
+    }
+    return null;
+  };
+
+  return {
+    renderExtendBtn,
+  };
+};
+
+export default useExtendBtn;

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

@@ -0,0 +1,398 @@
+import { Cascader, Tooltip } from 'antd';
+import classNames from 'classnames';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+  useListenProps,
+} from '../utils';
+import { renderCommonList } from '../utils/renderReadOnly';
+
+const CASCADER_WRAPPER_CLASSNAME = 'ued-cascader-wrap';
+const WrapperCascader = ({ children }: { children: JSX.Element }) =>
+  React.cloneElement(children, {
+    className: `${CASCADER_WRAPPER_CLASSNAME} ${
+      children.props.className || ''
+    }`,
+  });
+
+export interface MyCascaderProps {
+  value?: any;
+  defaultValue?: any;
+  visible?: boolean;
+  onChange?: (value: any, options: 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;
+  label?: any;
+  labelCol?: any;
+  wrapperCol?: any;
+  text?: any;
+  selfSpan?: number;
+  colSpan?: number;
+  style?: React.CSSProperties;
+  dataSource?: any[] | undefined;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  colon?: boolean;
+  popoverStyle: 'default' | 'auto'; //  default下拉宽度跟输入款一致   auto 根据内容自适应
+  showSearch: boolean;
+  allowClear: boolean;
+  multiple: '1' | '2'; // 1单选  2 多选
+  onSearch?: (
+    searchVal: string,
+    selectedOptionIds: any,
+    selectedOptions: any,
+  ) => void;
+  onClickOption?: (
+    openKey: string,
+    childrenKeys: any,
+    selectedOptionIds: any,
+    selectedOptions: any,
+  ) => void;
+  onClickStaticOption?: (zattrNbrValueMap: any) => Promise<any[]>;
+  childOptions: {
+    key: string;
+    options: any[];
+  };
+  className: string;
+  isFormChild?: boolean | undefined;
+  readOnly: boolean;
+  rules?: any[];
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+}
+
+const prefixCls = 'cascader';
+
+/**
+ * @description: 根据长度截断字符串，用省略号补充
+ */
+const sliceWordsByWidth = (text = '', width: number) => {
+  let wid = width;
+  if (typeof text === 'string' && typeof wid === 'number' && wid - 20 > 0) {
+    wid -= 10;
+    const [wordsArr, textLength] = [[...text], text.length];
+    const sliceWordsArr = [];
+    while (wordsArr.length) {
+      const w: string = wordsArr.shift() || '';
+      if (/[\u4e00-\u9fa5]/.test(w) && wid - 11 > 0) {
+        if (wid - 11 > 0) {
+          sliceWordsArr.push(w);
+          wid -= 11;
+        } else {
+          break;
+        }
+      }
+      if (!/[\u4e00-\u9fa5]/.test(w) && wid - 6 > 0) {
+        if (wid - 11 > 0) {
+          sliceWordsArr.push(w);
+          wid -= 6;
+        } else {
+          break;
+        }
+      }
+    }
+    const finalText =
+      sliceWordsArr.length === textLength
+        ? sliceWordsArr.join('')
+        : [...sliceWordsArr, '.', '.', '.'].join('');
+    return finalText;
+  }
+  return text;
+};
+
+const MyCascader: React.FC<MyCascaderProps> = forwardRef((props, ref) => {
+  const {
+    value,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    visible = true,
+    onChange,
+    onValueRelease,
+    getCompPropMapState,
+    compId,
+    name,
+    fieldName: rawFieldName,
+    regexp,
+    message,
+    label,
+    labelCol,
+    wrapperCol,
+    selfSpan,
+    colSpan,
+    hidden,
+    showWrapperContainer,
+    wrapperContainer: WrapperContainer,
+    titleTip,
+    tipIcon,
+    tipLocation,
+    tipContent,
+    tipPlacement,
+    multiple: _multiple,
+    dataSource,
+    popoverStyle,
+    showSearch,
+    className,
+    defaultValue,
+    isFormChild,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    rules: externalRules = [],
+    tipSize,
+    tipWidth,
+    tipHeight,
+    ...restProps
+  } = props;
+
+  const customStyle = restProps.style || {};
+  const dropdownClassName = `dropdownClassName_${compId}`;
+  const cascaderClassName = `cascader_cls_${compId}`;
+  const [showDropDown, setShowDropDown] = useState<boolean>(false);
+  const setStyleRef = useRef<boolean>(false);
+  const {
+    margin: customMargin,
+    display: customDisplay,
+    visibility: customVisibility,
+    ...restCusStyles
+  } = customStyle;
+
+  const [childOptions, setChildOptions] = useListenProps<{
+    key: string;
+    options: any[];
+  }>(props.childOptions);
+
+  // 是否多选
+  const multiple = useMemo(() => {
+    return _multiple === '2';
+  }, [_multiple]);
+
+  // 搜索关键词
+  const [searchVal, setSearchVal] = useState<string>('');
+
+  const [compData, setCompData] = useState<any[]>();
+
+  const [sourceOptions, setSourceOptions] = useState<any[]>(dataSource || []);
+  const [init, setInit] = useState(false);
+
+  // 输入结果下拉框跟输入框同长度
+  const matchInputWidth = useMemo(() => {
+    return popoverStyle !== 'auto';
+  }, [popoverStyle]);
+
+  useEffect(() => {
+    if (init) {
+      if (Array.isArray(dataSource)) {
+        setSourceOptions(dataSource);
+      }
+    }
+    setInit(true);
+  }, [dataSource]);
+
+  useEffect(() => {
+    if (childOptions?.key && sourceOptions?.length > 0) {
+      const newOptions = [...sourceOptions];
+      const replaceChildren = (list: any[]) => {
+        list.forEach((item) => {
+          if (item.value === childOptions.key) {
+            item.children = childOptions?.options || [];
+          } else if (item?.children?.length > 0) {
+            replaceChildren(item.children);
+          }
+        });
+      };
+      replaceChildren(newOptions);
+      setSourceOptions(newOptions);
+    }
+  }, [childOptions]);
+
+  const options = useMemo(() => {
+    const changeLabel: (list: any[]) => any = (list: any[]) =>
+      list?.map?.((item) => {
+        const _item: any = { ...item };
+        const { title: _title, children: _children } = _item;
+
+        let __label: JSX.Element | string = sliceWordsByWidth(_title, 320);
+        if (__label !== _title) {
+          __label = (
+            <Tooltip title={_title} mouseLeaveDelay={0}>
+              {__label}
+            </Tooltip>
+          );
+        }
+
+        let { isLeaf } = _item;
+        if (isLeaf === undefined) {
+          // children为非数组时且配置了展开事件时，视为需要异步加载
+          isLeaf =
+            !Array.isArray(_children) && props.onClickOption
+              ? false
+              : _item.isLeaf;
+        }
+
+        return {
+          ..._item,
+          label: __label,
+          children:
+            _children && _children.length ? changeLabel(_children) : _children,
+          isLeaf,
+        };
+      }) || [];
+
+    return changeLabel(sourceOptions) || [];
+  }, [sourceOptions]);
+
+  const renderDisplay = (_label: any[]) => {
+    const target = _label.map((l) =>
+      l instanceof Object ? l.props?.title : l,
+    );
+    return target.join(' / ');
+  };
+
+  useEffect(() => {
+    if (matchInputWidth) {
+      const node = document.querySelector(
+        `.${dropdownClassName}`,
+      ) as HTMLElement;
+      const clsNode = document.querySelector(
+        `.${cascaderClassName}`,
+      ) as HTMLElement;
+      if (showDropDown && searchVal?.length > 0) {
+        if (!setStyleRef.current && node && clsNode) {
+          node.style.setProperty('width', `${clsNode.clientWidth}px`);
+          node.style.setProperty('overflow', 'auto', 'important');
+          setStyleRef.current = true;
+        }
+      } else if (node && clsNode) {
+        node.style.removeProperty('width');
+        node.style.removeProperty('overflow');
+        setStyleRef.current = false;
+      }
+    }
+  }, [searchVal, showDropDown, matchInputWidth]);
+
+  const { formFieldsRef, required, readOnly, disabled, finalRules } =
+    useCommonImperativeHandle(ref, props, {
+      selectAll: () => {
+        // 多选模式下才能全选
+        if (multiple) {
+          const tmp: any = [];
+          const tmpData: any = [];
+          options?.forEach((item: any) => {
+            tmp.push([item.value]);
+            tmpData.push([item]);
+          });
+          setCompData(tmpData);
+          if (onChange) {
+            onChange(tmp, tmpData);
+          }
+        }
+      },
+      clearValue: [],
+      // 加载数据
+      setOptions(options: any) {
+        if (Array.isArray(options)) {
+          setSourceOptions(options);
+        }
+      },
+      // 加载子节点数据
+      setChildOptions(data: { key: string; options: any[] }) {
+        setChildOptions(data);
+      },
+    });
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      required={required}
+      readOnly={readOnly}
+      disabled={disabled}
+      ref={formFieldsRef}
+      wrapperClassName={CASCADER_WRAPPER_CLASSNAME}
+      render={(val) => renderCommonList(val, options)}
+      rules={finalRules}
+      clearValue={null}
+    >
+      <Cascader
+        dropdownClassName={classNames(
+          dropdownClassName,
+          `${prefixCls}-dropdown`,
+        )}
+        onDropdownVisibleChange={(visible) => {
+          setShowDropDown(visible);
+          if (!visible) {
+            // 关闭浮层重置搜索条件
+            setSearchVal('');
+          }
+        }}
+        {...(restProps as any)}
+        value={value}
+        options={options}
+        style={restCusStyles}
+        multiple={multiple}
+        displayRender={renderDisplay}
+        showSearch={
+          showSearch
+            ? {
+                matchInputWidth: popoverStyle !== 'auto',
+              }
+            : false
+        }
+        onSearch={(words) => {
+          setSearchVal(words);
+          if (showSearch && props.onSearch) {
+            props.onSearch(words, value, compData);
+          }
+        }}
+        loadData={async (selectOptions: any[]) => {
+          if (selectOptions?.length > 0 && props.onClickOption) {
+            const currentRow = selectOptions[selectOptions.length - 1];
+            const childrenKeys =
+              currentRow?.children?.map?.((item: any) => item.value) || [];
+            props.onClickOption(
+              currentRow.value,
+              childrenKeys,
+              value,
+              compData,
+            );
+          }
+          if (selectOptions?.length > 0 && props.onClickStaticOption) {
+            const currentRow = selectOptions[selectOptions.length - 1];
+            const { zattrNbrValueMap } = currentRow;
+            if (zattrNbrValueMap) {
+              const children = await props.onClickStaticOption(
+                zattrNbrValueMap,
+              );
+              currentRow.children = children;
+              delete currentRow.zattrNbrValueMap;
+              setSourceOptions(options);
+            }
+          }
+        }}
+        className={classNames(className, cascaderClassName)}
+        onChange={(keys: any, selctOptions: any) => {
+          // 选中数据时清除搜索词
+          setSearchVal('');
+          setCompData(selctOptions);
+          if (onChange) {
+            onChange(keys, selctOptions);
+          }
+        }}
+      />
+    </FormFields>
+  );
+});
+
+export default MyCascader;
+export { CASCADER_WRAPPER_CLASSNAME, WrapperCascader };

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

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

package/lib/public/src/components/pcfactory/src/ChartBar/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-ChartBar' */ '../ChartLine/loader'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default LoadableChartLine;

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

@@ -0,0 +1,48 @@
+import { LXChart } from '@lingxiteam/charts-common';
+import { LingXiFC } from '@lingxiteam/types';
+import { useHiddenStyle } from '../utils';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import { useLocale } from '../utils/hooks/useLocale';
+import ChartLineProps from './PropsType';
+
+const ChartLine: LingXiFC<ChartLineProps> = (props, ref) => {
+  const {
+    style,
+    className,
+    getEngineApis,
+    exampleData,
+    dataSource,
+    dataSourceTop,
+    visible = true,
+    $$componentItem,
+    ...restProps
+  } = props;
+
+  const finalStyle = useHiddenStyle(visible, style);
+  const engineApis = getEngineApis?.();
+  const { getLocale } = useLocale(engineApis);
+  const { sandBoxSafeRun } = engineApis || {};
+
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun as any, getLocale);
+
+  const configProps = {
+    ...restProps,
+    funcExpExecute,
+    dataSource: dataSource || exampleData?.xAxisData || [],
+    dataSourceTop: dataSourceTop || exampleData?.xAxisDataTop || [],
+  };
+
+  return (
+    <LXChart
+      style={finalStyle}
+      className={className}
+      configProps={configProps}
+      isEditMode={false}
+      isMobile={false}
+      chartType="Line"
+      funcExpExecute={funcExpExecute}
+    />
+  );
+};
+
+export default ChartLine;