@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/Input/BasicTextArea/index.tsx

@@ -0,0 +1,126 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { getRules, ruesEcute } from '../../utils';
+import './index.less';
+
+interface BasicTextAreaProps
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+      HTMLTextAreaElement
+    >,
+    'onChange'
+  > {
+  onChange?: (val: any) => void;
+  onBlur?: (val?: any) => void;
+  onKeyDown?: (val?: any) => void;
+  visible?: boolean;
+  rules?: any; // 如果在表单行容器中，会传入
+  regexp?: any[];
+}
+
+const prefixCls = 'lcdp-textarea';
+const BasicTextArea = React.forwardRef<any, BasicTextAreaProps>(
+  (props, ref) => {
+    const {
+      value,
+      onChange,
+      style,
+      disabled,
+      rules,
+      onKeyDown,
+      onBlur,
+      maxLength,
+      regexp,
+      title,
+      readOnly,
+      required,
+      visible,
+      placeholder,
+    } = props;
+    const [errMessage, setErrMessage] = useState('');
+    const curRef = useRef(null);
+    const getAppRules = useCallback(() => {
+      const finalRules = getRules({
+        required,
+        message: placeholder,
+        regexp,
+      });
+      if (Array.isArray(rules)) {
+        finalRules.push(...rules);
+      }
+      return finalRules as any;
+    }, [regexp, required, title, rules]);
+    const useErrorMessage = () => {
+      if (readOnly || disabled) return;
+      const errMessage = ruesEcute(getAppRules(), value);
+      setErrMessage(errMessage);
+    };
+    React.useImperativeHandle(ref, () => ({
+      clearValue() {
+        onChange && onChange('');
+      },
+      focus() {
+        if (curRef) {
+          (curRef as any)?.current.focus();
+        }
+      },
+      blur() {
+        if (curRef) {
+          (curRef as any)?.current.blur();
+        }
+      },
+    }));
+
+    if (!visible) {
+      return <></>;
+    }
+    return (
+      <>
+        <textarea
+          readOnly={readOnly}
+          placeholder={placeholder}
+          maxLength={maxLength}
+          autoComplete="off"
+          style={style}
+          disabled={disabled}
+          // 回车事件
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              if (onKeyDown) {
+                onKeyDown(e.currentTarget.value);
+              }
+              const inputDOM: HTMLInputElement = curRef.current!;
+              if (inputDOM) {
+                inputDOM.blur();
+              }
+              useErrorMessage();
+            }
+          }}
+          onBlur={(e) => {
+            const v = e.currentTarget.value;
+            if (onBlur) {
+              onBlur(v);
+            }
+            useErrorMessage();
+          }}
+          onChange={(e) => {
+            const v = e.currentTarget.value;
+            if (onChange) {
+              onChange(v);
+            }
+          }}
+          className={prefixCls}
+          value={readOnly && !value ? '--' : value || ''}
+          ref={curRef}
+        />
+        {errMessage && (
+          <div style={style} className={`${prefixCls}-error-text`}>
+            {errMessage}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+export default BasicTextArea;

package/lib/h5public/src/components/factory/src/Input/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { AppForwardRef } from '../BasicComponents';
+import DformCustom from '../DformCustom';
+import BasicInput from './BasicInput';
+import BasicTextArea from './BasicTextArea';
+
+export interface MyInputProps {
+  textarea?: boolean; // 是否为多行输入
+  style?: React.CSSProperties & {
+    borderBottomType: 'none' | 'solid' | 'dashed';
+    borderBottomColor: string;
+  };
+}
+
+const { Item } = DformCustom;
+
+const Input = AppForwardRef<MyInputProps>((props, ref) => {
+  const { textarea = false, ...restProps } = props;
+
+  const Ele = textarea ? (
+    <BasicTextArea {...restProps} ref={ref} />
+  ) : (
+    // @ts-ignore
+    <BasicInput {...restProps} ref={ref} />
+  );
+
+  return <Item showError>{Ele}</Item>;
+});
+
+Input.displayName = 'Input';
+
+export default Input;

package/lib/h5public/src/components/factory/src/JSBridgeView/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AppForwardRef } from '../BasicComponents';
+
+export type MyJSBridgeViewProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+>;
+
+const JSBridgeView = AppForwardRef((props, ref) => {
+  return <div ref={ref} {...props} />;
+});
+
+JSBridgeView.displayName = 'JSBridgeView';
+export default JSBridgeView;

package/lib/h5public/src/components/factory/src/LXBarChart/index.tsx

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

package/lib/h5public/src/components/factory/src/LXBarChart/loader.tsx

@@ -0,0 +1,3 @@
+import LoadableChartLine from '../LXLineChart/loader';
+
+export default LoadableChartLine;

package/lib/h5public/src/components/factory/src/LXLineChart/ChartLine.tsx

@@ -0,0 +1,46 @@
+import { LXChart } from '@lingxiteam/charts-common';
+import { LingXiFC } from '@lingxiteam/types';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+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 { sandBoxSafeRun, getLocale } = 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;

package/lib/h5public/src/components/factory/src/LXLineChart/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/h5public/src/components/factory/src/LXLineChart/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/h5public/src/components/factory/src/LXLineChart/loader.tsx

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

package/lib/h5public/src/components/factory/src/LXPieChart/LXPieChart.tsx

@@ -0,0 +1,23 @@
+import { LXChart } from '@lingxiteam/charts-common';
+import { LingXiFC } from '@lingxiteam/types';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+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
+      chartType="Pie"
+    />
+  );
+};
+
+export default LXPieChart;

package/lib/h5public/src/components/factory/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
+}

package/lib/h5public/src/components/factory/src/LXPieChart/index.less

@@ -0,0 +1,6 @@
+
+@prefixCls: lXPieChart;
+
+.@{prefixCls} {
+
+}

package/lib/h5public/src/components/factory/src/LXPieChart/index.tsx

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

package/lib/h5public/src/components/factory/src/LXPieChart/loader.tsx

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

package/lib/h5public/src/components/factory/src/LXRadarChart/LXRadarChat.tsx

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

package/lib/h5public/src/components/factory/src/LXRadarChart/PropsType.ts

@@ -0,0 +1,9 @@
+/* eslint-disable semi */
+/* eslint-disable no-extra-semi */
+import { RadarChartPorps } from '@lingxiteam/charts-common';
+
+export default interface LXRadarChartPorps extends RadarChartPorps {
+  visible?: boolean;
+  className?: string;
+  style?: React.CSSProperties; // 样式
+}

package/lib/h5public/src/components/factory/src/LXRadarChart/index.less

@@ -0,0 +1,7 @@
+
+@prefixCls: lXRadarChart;
+
+.@{prefixCls} {
+  width: 100%;
+  height: 500px;
+}

package/lib/h5public/src/components/factory/src/LXRadarChart/index.tsx

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

package/lib/h5public/src/components/factory/src/LXRadarChart/loader.tsx

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

package/lib/h5public/src/components/factory/src/Layout/Col/index.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import React, { FC } from 'react';
+
+interface ColItemProps {
+  /**
+   * 索引行号
+   */
+  index?: number;
+
+  style?: React.CSSProperties;
+  className?: string;
+  gutter?: string;
+}
+
+const prefixCls = 'lcdp-col-item';
+const ColItem: FC<ColItemProps> = (props) => {
+  const { style, className, gutter = 0, index } = props;
+  return (
+    <div
+      style={{ marginLeft: index === 0 ? 0 : gutter, ...style }}
+      className={classNames(prefixCls, className)}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+ColItem.defaultProps = {
+  index: 0,
+};
+
+export default ColItem;

package/lib/h5public/src/components/factory/src/Layout/Row/index.less

@@ -0,0 +1,6 @@
+@prefixCls: lcdp-row;
+
+.@{prefixCls} {
+  display: flex;
+  flex-direction: row;
+}

package/lib/h5public/src/components/factory/src/Layout/Row/index.tsx

@@ -0,0 +1,83 @@
+import classNames from 'classnames';
+import React, { FC, useMemo } from 'react';
+import Col from '../Col';
+import { PRIVATE_SYMBOL, regroupNum } from '../utils';
+import './index.less';
+
+interface RowProps {
+  /**
+   * 索引行号
+   */
+  index?: number;
+
+  /**
+   * 样式
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * 类名
+   */
+  className?: string;
+
+  /**
+   * 间隙，0 为row的间隔   1为col的间隔
+   */
+  gutter?: [x: string, y: string];
+
+  /**
+   * 每行的数据
+   */
+  cols: { span: number; [key: string]: any }[];
+
+  /**
+   * 渲染列内容
+   * @param item
+   * @returns
+   */
+  render: (item: { span: number; [key: string]: any }) => React.ReactNode;
+
+  /**
+   * 基数， 全行等分数量
+   */
+  base: number;
+}
+
+const prefixCls = 'lcdp-row';
+const Row: FC<RowProps> = (props) => {
+  const { style, className, gutter, cols, render, base, index = 0 } = props;
+
+  // 数据重组
+  const calculateCols = useMemo(() => regroupNum(base, cols), [cols, base]);
+
+  return (
+    <div
+      style={{
+        marginTop: index === 0 ? 0 : `${gutter?.[0] || '0px'}`,
+        ...style,
+      }}
+      className={classNames(prefixCls, className)}
+    >
+      {calculateCols.map((col, index) => {
+        const { span } = col;
+        return (
+          <Col
+            key={`${index}`}
+            index={index}
+            gutter={gutter?.[1]}
+            style={{ flex: span }}
+          >
+            {!col[PRIVATE_SYMBOL] && render(col)}
+          </Col>
+        );
+      })}
+    </div>
+  );
+};
+
+Row.defaultProps = {
+  style: {},
+  gutter: ['0px', '1px'],
+  index: 0,
+};
+export default Row;