@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/pcpublic/src/components/pcfactory/src/Swiper/index.tsx

@@ -0,0 +1,184 @@
+import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Carousel } from 'antd';
+import classnames from 'classnames';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+
+export interface MySwiperProps {
+  /** 数据源 */
+  data?: any[];
+  itemType?: string;
+  itemValue?: string;
+  itemLink?: string;
+
+  /** 录播时间 */
+  autoplay?: boolean;
+
+  /** 方向 */
+  dotPosition?: 'top' | 'bottom' | 'left' | 'right';
+
+  /** 是否显示面板指示点 */
+  dots?: boolean;
+
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  beforeChange?: (from: number, to: number) => void;
+  afterChange?: (current: number) => void;
+  visible?: any;
+  current?: number;
+  doNext?: any;
+  doPrev?: any;
+  className?: string;
+  slidesToShow?: number;
+  slidesToScroll?: number;
+  arrows?: boolean;
+  arrowsDisplay?: any;
+}
+const Swiper = LingxiForwardRef<any, MySwiperProps>((props, ref) => {
+  const {
+    visible = true,
+    current,
+    doNext,
+    doPrev,
+    data = [],
+    itemType = 'type',
+    itemValue = 'value',
+    itemLink = 'link',
+    style,
+    className,
+    slidesToShow = 1,
+    slidesToScroll = 1,
+    dotPosition,
+    arrows,
+    arrowsDisplay,
+    getEngineApis,
+    ...restProps
+  } = props;
+  const { historyPush } = getEngineApis();
+  // @ts-ignore
+  const { subclassName, width, height, ...restStyle } = style;
+  const iscross = dotPosition === 'top' || dotPosition === 'bottom'; // 横向的
+  // 自适应高度
+  useEffect(() => {
+    const c = document.getElementsByClassName('ued-swiper-wrap')[0];
+    const cHeight = c?.clientHeight;
+    if (cHeight) {
+      (
+        document.getElementsByClassName('slick-slider')[0] as any
+      ).style.height = `${cHeight}px`;
+    }
+  }, []);
+
+  const carouselRef = useRef<any>();
+
+  useImperativeHandle(ref, () => ({
+    prev() {
+      carouselRef?.current?.prev();
+    },
+    next() {
+      carouselRef?.current?.next();
+    },
+    goTo(current: number) {
+      if (current) {
+        if (current - 1 < 0) {
+          return;
+        }
+        // 从1开始
+        carouselRef?.current?.goTo(current - 1);
+      }
+    },
+  }));
+
+  const renderItem = (item: any) => {
+    const value = item[itemValue];
+    const link = item[itemLink];
+
+    const divStyle = {
+      background: `url('${value}') center no-repeat`,
+      backgroundSize: 'cover',
+      height,
+    };
+    return (
+      <div
+        style={divStyle}
+        onClick={() => {
+          switch (itemType) {
+            case 'link':
+              window.open(link, '_blank');
+              break;
+            case 'route': // 跳转路由
+              historyPush?.(link);
+              break;
+            case 'img': // TODO
+            case 'video': // TODO
+            default:
+              break;
+          }
+        }}
+      />
+    );
+  };
+
+  const smallerThan200 = () => {
+    return height && height.indexOf('px') > -1 && +height.split('px')[0] <= 200;
+  };
+
+  return visible ? (
+    <div
+      className={classnames('ued-swiper-wrap', className)}
+      style={{ ...restStyle, width, height }}
+    >
+      {arrows && (
+        <div
+          className={classnames(
+            'ued-swiper-icon',
+            iscross ? 'left' : 'up',
+            arrowsDisplay,
+            smallerThan200() ? 'small' : '',
+          )}
+          onClick={() => {
+            if (carouselRef.current) {
+              carouselRef?.current?.prev();
+            }
+          }}
+        >
+          <LegacyIcon type={iscross ? 'left' : 'up'} />
+        </div>
+      )}
+      <Carousel
+        ref={carouselRef}
+        {...restProps}
+        slidesToShow={Number(slidesToShow)}
+        slidesToScroll={Number(slidesToScroll)}
+        dotPosition={dotPosition}
+      >
+        {Array.isArray(data)
+          ? data.map((item, index) => (
+              <div key={index} className={subclassName}>
+                {renderItem(item)}
+              </div>
+            ))
+          : null}
+      </Carousel>
+      {arrows && (
+        <div
+          className={classnames(
+            'ued-swiper-icon',
+            iscross ? 'right' : 'down',
+            arrowsDisplay,
+            smallerThan200() ? 'small' : '',
+          )}
+          onClick={() => {
+            if (carouselRef.current) {
+              carouselRef?.current?.next();
+            }
+          }}
+        >
+          <LegacyIcon type={iscross ? 'right' : 'down'} />
+        </div>
+      )}
+    </div>
+  ) : null;
+});
+
+export default Swiper;

package/lib/pcpublic/src/components/pcfactory/src/Switch/index.tsx

@@ -0,0 +1,219 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Switch as AntdSwitch } from 'antd';
+import { useCallback, useMemo, useState } from 'react';
+import CommIcon from '../Icon';
+import { handleIsValidIconCfg } from '../Icon/hooks';
+import { FormFields, useCommonImperativeHandle, useForm } from '../utils';
+import { getFieldsProps } from '../utils/formUtils/FormFields';
+
+export interface SwitchProps {
+  value?: any;
+  visible?: any;
+  onChange?: any;
+  onValueRelease?: any;
+  defaultChecked?: boolean;
+  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?: any;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  colon?: boolean;
+  switchStyle?: string;
+  checkedChildren?: string;
+  unCheckedChildren?: string;
+  checkedChildrenIcon?: any;
+  unCheckedChildrenIcon?: any;
+  size?: any;
+  isFormChild?: boolean | undefined;
+  rules?: any[];
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+  getEngineApis?: any;
+}
+
+const Switch = LingxiForwardRef<any, SwitchProps>((props, ref) => {
+  const {
+    value,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    visible = true,
+    onChange,
+    unCheckedChildrenIcon,
+    checkedChildrenIcon,
+    onValueRelease,
+    defaultChecked,
+    getCompPropMapState,
+    compId,
+    name,
+    fieldName: rawFieldName,
+    hidden,
+    switchStyle = '',
+    regexp,
+    message,
+    label,
+    labelCol,
+    wrapperCol,
+    selfSpan,
+    colSpan,
+    showWrapperContainer,
+    wrapperContainer: WrapperContainer,
+    titleTip,
+    tipIcon,
+    tipLocation,
+    tipContent,
+    tipPlacement,
+    isFormChild,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    rules: externalRules = [],
+    tipSize,
+    tipWidth,
+    tipHeight,
+    getEngineApis,
+    ...restProps
+  } = props;
+
+  const customStyle = restProps.style || {};
+  const { margin, display, visibility, ...restCusStyles } = customStyle;
+
+  const [loading, setLoading] = useState(false);
+
+  const { inForm } = useForm();
+  const { disabled, required, formFieldsRef, finalRules } =
+    useCommonImperativeHandle(ref, props, {
+      setLoading: (_loading: boolean) => {
+        setLoading(_loading);
+      },
+    });
+
+  // 渲染开关开启/关闭文案或图标
+  const renderSwitchStyle = useCallback(
+    (type: string) => {
+      if (switchStyle) {
+        let Comp = null;
+        if (switchStyle === 'font') {
+          Comp = (props as any)[type];
+        } else if (switchStyle === 'icon') {
+          const iconInfo = (props as any)[`${type}Icon`];
+          if (handleIsValidIconCfg(iconInfo)) {
+            Comp = (
+              <CommIcon
+                icon={iconInfo}
+                getEngineApis={getEngineApis}
+                $$componentItem={props?.$$componentItem}
+                className=""
+              />
+            );
+          }
+        }
+        if (Comp) {
+          return props.size === 'small' ? (
+            <div
+              className="ued-switch-children"
+              ref={(r) => {
+                if (r) {
+                  // 小号时把内容缩小80%
+                  const clientInfo = r.getBoundingClientRect();
+                  const { width = 0 } = clientInfo || {};
+                  const margin = `-${width / 4}px`;
+                  if (value) {
+                    r.style.marginLeft = margin;
+                    r.style.marginRight = '0';
+                  } else {
+                    r.style.marginLeft = '0';
+                    r.style.marginRight = margin;
+                  }
+                }
+              }}
+            >
+              {Comp}
+            </div>
+          ) : (
+            Comp
+          );
+        }
+        return undefined;
+      }
+      return undefined;
+    },
+    [
+      switchStyle,
+      props.checkedChildren,
+      props.unCheckedChildren,
+      props.size,
+      unCheckedChildrenIcon,
+      checkedChildrenIcon,
+      value,
+    ],
+  );
+
+  const checkedChildrenComp = useMemo(
+    () => renderSwitchStyle('checkedChildren'),
+    [renderSwitchStyle],
+  );
+  const unCheckedChildrenComp = useMemo(
+    () => renderSwitchStyle('unCheckedChildren'),
+    [renderSwitchStyle],
+  );
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      disabled={disabled}
+      required={required}
+      ref={formFieldsRef}
+      defaultValue={props.defaultChecked}
+      rules={finalRules}
+      handleFormValue={(val) => {
+        if (val !== undefined) {
+          if (typeof val === 'string') {
+            if (val === 'true') {
+              return true;
+            }
+            return true;
+          }
+        }
+        return val;
+      }}
+    >
+      <AntdSwitch
+        {...restProps}
+        loading={loading}
+        checkedChildren={checkedChildrenComp}
+        unCheckedChildren={unCheckedChildrenComp}
+        defaultChecked={!!defaultChecked}
+        style={inForm ? restCusStyles : props.style}
+        // eslint-disable-next-line no-nested-ternary
+        checked={
+          typeof value === 'string'
+            ? value.toLowerCase() === 'false'
+              ? false
+              : !!value
+            : !!value
+        }
+        onChange={(e: any) => {
+          if (onChange) {
+            onChange(e);
+          }
+        }}
+      />
+    </FormFields>
+  );
+});
+
+export default Switch;

package/lib/pcpublic/src/components/pcfactory/src/TabPane/index.tsx

@@ -0,0 +1,145 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Badge } from 'antd';
+import React, { useCallback, useImperativeHandle } from 'react';
+import { useListenProps } from '../utils';
+import { useDeepCompareEffect } from '../utils/ahooks';
+import CustomModule from '../utils/CustomModule';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import { useLocale } from '../utils/hooks/useLocale';
+
+export interface MyTabPaneProps {
+  value: string;
+  visible: boolean;
+  style: React.CSSProperties;
+  [key: string]: any;
+}
+
+const MyTabPane = LingxiForwardRef<any, MyTabPaneProps>((props, ref) => {
+  const {
+    value,
+    children,
+    style,
+    getEngineApis,
+    $$componentItem,
+    uploadChannelProps,
+    visited, // 当前组件在Tabs下，是否已经被渲染过
+    currentIndex,
+    ...restProps
+  } = props;
+
+  const [badge, setBadge] = useListenProps(props.badge);
+  const [title, setTitle] = useListenProps(props.tab);
+
+  /**
+   * visible 表示用户是否设置了隐藏
+   */
+  const [visible, setVisible] = useListenProps(
+    typeof props.visible === 'undefined' ? true : props.visible,
+  );
+
+  const { sandBoxSafeRun, sandBoxLoadModule } = getEngineApis();
+  const { getLocale } = useLocale(getEngineApis());
+
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun, getLocale);
+
+  const getTab = useCallback(() => {
+    if (currentIndex !== -1) {
+      const { badgeRendering } = props;
+      let _tab = title;
+      if (badge !== '' && badge !== null && badge !== undefined) {
+        // 自定义渲染函数
+        if (typeof badgeRendering === 'object' && badgeRendering.jsx) {
+          // FIXME: funcExpExecute给属性传递的item应该是一个错误的数据，给自定义渲染组件传递没有转化的dsl没有任何意义。
+          const item = {
+            badge,
+            tab: props.tab,
+          };
+          _tab = (
+            <div style={{ position: 'relative', display: 'flex' }}>
+              {title}
+              <CustomModule
+                sandBoxLoadModule={sandBoxLoadModule}
+                errorInfo={{ id: $$componentItem.id }}
+                code={badgeRendering.targetVal}
+                compProps={{ text: badge, item, index: currentIndex }}
+              />
+            </div>
+          );
+        } else if (badgeRendering) {
+          _tab = (
+            <div
+              style={{ position: 'relative', display: 'flex' }}
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{
+                __html: `${title}${funcExpExecute(badgeRendering, [
+                  {
+                    key: 'text',
+                    value: badge,
+                  },
+                  {
+                    key: 'row',
+                    value: props,
+                  },
+                  {
+                    key: 'index',
+                    value: currentIndex,
+                  },
+                ])}`,
+              }}
+            />
+          );
+        } else {
+          _tab = (
+            <div style={{ position: 'relative' }}>
+              {title}
+              <Badge
+                count={badge}
+                overflowCount={999}
+                style={{ position: 'absolute', top: '-20px', right: '-20px' }}
+              />
+            </div>
+          );
+        }
+      }
+      return _tab;
+    }
+    return undefined;
+  }, [currentIndex, props, badge]);
+
+  useDeepCompareEffect(() => {
+    if (uploadChannelProps) {
+      uploadChannelProps({
+        ...restProps,
+        tab: getTab(),
+        'data-extends': {
+          setBadge,
+          setTitle,
+          setVisible,
+        },
+        visible,
+      });
+    }
+  }, [getTab, visible, restProps, currentIndex, badge]);
+
+  useImperativeHandle(ref, () => ({
+    // 设置角标
+    setBadge(data: any) {
+      setBadge(data);
+    },
+  }));
+
+  /**
+   * Tabs下的组件还没渲染完成时，子组件应该禁止渲染，手动实现按需加载问题
+   */
+  if (!visited || !visible) {
+    return null;
+  }
+
+  return (
+    <div style={style} className="ued-tabs-tabpane-content">
+      {children}
+    </div>
+  );
+});
+
+export default MyTabPane;