@cloudbase/weda-ui 0.2.16 → 1.0.24

package/src/web/components/chart/line/index.tsx

@@ -0,0 +1,136 @@
+import React, { useRef } from 'react';
+import { CommonPropsType } from '../../../types';
+import { DataSource, Xfield, Yfield } from '../common/core/type';
+import EChartLine from '../common/core/eChartLine';
+import classNames from '../../../utils/classnames';
+import { useWedaChart } from '../common/useChart';
+interface PropsType extends CommonPropsType {
+  chartType?: string;
+  isTitle?: boolean;
+  title?: string;
+  titleLocation?: string;
+  dataSource?: DataSource;
+  filterData?: string;
+  xField?: Xfield;
+  groupKey?: Xfield;
+  groupKeyTimeSpan?: string;
+  xStatistics?: string;
+  xIsCountEmpty?: boolean;
+  yField?: Yfield;
+  isLegend?: boolean;
+  legend?: string;
+  legend2?: string;
+  isXaxisName?: boolean;
+  xAxisName?: string;
+  isXaxisAxisLabelShow?: boolean;
+  isXaxisAxisTickShow?: boolean;
+  isXaxisAxisLabelRotate?: boolean;
+  isYAxisSplitlineLinestyleWidth?: boolean;
+  yAxisSplitlineLinestyleType?: string;
+  yAxisMax?: number;
+  yAxisMin?: number;
+  isYAxisName?: boolean;
+  yAxisName?: string;
+  isSeriesShowSymbol?: boolean;
+  isYAxisShow?: boolean;
+  isUnit?: boolean;
+  unit?: string;
+  decimalDigits?: number;
+  suffix?: string;
+}
+export default function Line(opts: PropsType) {
+  const {
+    id,
+    style,
+    events,
+    className,
+    children,
+    chartType,
+    isTitle,
+    title,
+    titleLocation,
+    dataSource,
+    filterData,
+    xField,
+    xStatistics,
+    xIsCountEmpty,
+    yField,
+    groupKey,
+    groupKeyTimeSpan,
+    isLegend,
+    legend,
+    legend2,
+    isXaxisName,
+    xAxisName,
+    isXaxisAxisLabelShow,
+    isXaxisAxisTickShow,
+    isXaxisAxisLabelRotate,
+    isYAxisSplitlineLinestyleWidth,
+    yAxisSplitlineLinestyleType,
+    yAxisMax,
+    yAxisMin,
+    isYAxisName,
+    yAxisName,
+    isSeriesShowSymbol,
+    isYAxisShow,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix,
+  } = opts;
+  const domRef = useRef<HTMLDivElement>();
+  useWedaChart(domRef, EChartLine, {
+    chartType,
+    isTitle,
+    title,
+    titleLocation,
+    dataSource,
+    filterData,
+    xField,
+    xStatistics,
+    xIsCountEmpty,
+    yField,
+    groupKey,
+    groupKeyTimeSpan,
+    isLegend,
+    legend,
+    legend2,
+    isXaxisName,
+    xAxisName,
+    isXaxisAxisLabelShow,
+    isXaxisAxisTickShow,
+    isXaxisAxisLabelRotate,
+    isYAxisSplitlineLinestyleWidth,
+    yAxisSplitlineLinestyleType,
+    yAxisMax,
+    yAxisMin,
+    isYAxisName,
+    yAxisName,
+    isSeriesShowSymbol,
+    isYAxisShow,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix,
+  });
+
+  const inlineStyle = {
+    height: '380px',
+    width: '100%',
+    backgroundColor: '#ffffff',
+    ...style,
+  };
+  return (
+    <div
+      id={id}
+      ref={domRef}
+      data-testid="line"
+      style={inlineStyle}
+      className={classNames({
+        'echart-wrapper-canvas': true,
+        'echart-dark-body': true,
+        [className]: className,
+      })}
+    />
+  );
+}

package/src/web/components/chart/pie/index.tsx

@@ -0,0 +1,99 @@
+import React, { useRef } from 'react';
+import { CommonPropsType } from '../../../types';
+import { DataSource, Xfield, Yfield } from '../common/core/type';
+import EchartPie from '../common/core/eChartPie';
+import { useWedaChart } from '../common/useChart';
+import classNames from '../../../utils/classnames';
+
+interface PropsType extends CommonPropsType {
+  chartType?: string;
+  isTitle?: boolean;
+  title?: string;
+  titleLocation?: string;
+  dataSource?: DataSource;
+  filterData?: string;
+  setColor?: Array<string>;
+  xField?: Xfield;
+  xStatistics?: string;
+  xIsCountEmpty?: boolean;
+  yField?: Yfield;
+  isLegend?: boolean;
+  legend?: string;
+  legend2?: string;
+  isSeriesShowSymbol?: boolean;
+  isPercent?: boolean;
+  isUnit?: boolean;
+  unit?: string;
+  decimalDigits?: number;
+  suffix?: string;
+}
+export default function Line({
+  id,
+  style,
+  events,
+  className,
+  children,
+  chartType,
+  isTitle,
+  title,
+  titleLocation,
+  dataSource,
+  filterData,
+  setColor,
+  xField,
+  xStatistics,
+  xIsCountEmpty,
+  yField,
+  isLegend,
+  legend,
+  legend2,
+  isSeriesShowSymbol,
+  isPercent,
+  isUnit,
+  unit,
+  decimalDigits,
+  suffix,
+}: PropsType) {
+  const domRef = useRef<HTMLDivElement>();
+  useWedaChart(domRef, EchartPie, {
+    chartType,
+    isTitle,
+    title,
+    titleLocation,
+    dataSource,
+    filterData,
+    setColor,
+    xField,
+    xStatistics,
+    xIsCountEmpty,
+    yField,
+    isLegend,
+    legend,
+    legend2,
+    isSeriesShowSymbol,
+    isPercent,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix,
+  });
+  const inlineStyle = {
+    height: '380px',
+    width: '100%',
+    backgroundColor: '#ffffff',
+    ...style,
+  };
+  return (
+    <div
+      id={id}
+      data-testid="pie"
+      ref={domRef}
+      style={inlineStyle}
+      className={classNames({
+        'echart-wrapper-canvas': true,
+        'echart-dark-body': true,
+        [className]: className,
+      })}
+    />
+  );
+}

package/src/web/components/chart/statisticsCard/index.tsx

@@ -127,20 +127,41 @@ export function customToFixed(num, digit = 0) {
   return integer;
 }
 
+/**
+ * 添加千位分隔符
+ * @param fixedString
+ * @param digit
+ */
+export function addDelimiter(fixedString, digit) {
+  let len = fixedString.length;
+  let result = '';
+  const decimalPoint = digit > 0 ? digit + 1 : 0;
+  for (let i = len - 1; i >= 0; i--) {
+    let stepFromTail = len - 1 - i;
+    let char = fixedString.charAt(i);
+
+    if (stepFromTail <= decimalPoint) {
+      // 小数部分不处理
+      result = char + result;
+    } else {
+      if ((stepFromTail - decimalPoint) % 3 === 0) {
+        if (char !== '-') {
+          result = ',' + result;
+        }
+      }
+      result = char + result;
+    }
+  }
+  return result;
+}
+
 /**
  * 格式化：添加千分符，四舍五入
  * @param val
  * @param digits
  */
 const formatNumber = (val, digits = 0) => {
-  return isNaN(val)
-    ? val
-    : Intl
-    ? Intl.NumberFormat('en-US', {
-        maximumFractionDigits: 10,
-        minimumFractionDigits: digits,
-      }).format(+customToFixed(val, digits))
-    : val;
+  return isNaN(val) ? val : addDelimiter(customToFixed(val, digits), digits);
 };
 
 export default function StatisticsCard({

package/src/web/components/form/checkbox/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
 
 import classNames from '../../../utils/classnames';
@@ -8,6 +8,8 @@ import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
 import { CommonFormPropsType } from '../types';
+import { callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
 
 export default function Checkbox({
   // 系统属性
@@ -19,6 +21,8 @@ export default function Checkbox({
   name = 'formCheckbox',
   label = '标题',
   labelVisible = true,
+  format = '',
+  enumName = '',
   range = [],
   layout = 'horizontal',
   disabled = false,
@@ -40,21 +44,53 @@ export default function Checkbox({
     'weui-cell_disabled': isH5 && disabled,
   });
 
+  const [option, setOption] = useState(range);
   const [checkedItems, setCheckedItems] = React.useState(
-    platform === 'h5' ? fromEntries(range.map(({ value, checked }) => [value, !!checked]))
-    : range.filter(({checked}) => checked).map(({value}) => value)
+    platform === 'h5' ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
+      : option.filter(({ checked }) => checked).map(({ value }) => value)
   );
   // 两次range不同时, 需要刷新checkedItems
   const prevRangeRef = React.useRef<object[]>();
   React.useEffect(() => {
-    if (!isObjectEqual(prevRangeRef.current, range)) {
-      prevRangeRef.current = range;
+    if (!isObjectEqual(prevRangeRef.current, option)) {
+      prevRangeRef.current = option;
       setCheckedItems(
-        fromEntries(range.map(({ value, checked }) => [value, !!checked]))
+        fromEntries(option.map(({ value, checked }) => [value, !!checked]))
       );
     }
   });
 
+  useEffect(() => {
+    // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+    if (format === 'x-enum' && enumName) {
+      fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (format !== 'x-enum') {
+      setOption(range)
+    }
+  }, [range]);
+
+  const fetchData = async (param:
+    { OptNameList?: object, PageIndex?: number, PageSize?: number }
+  ) => {
+    let data = await callWedaApi({
+      action: 'DescribeGeneralOptionsDetailList',
+      data: param,
+    });
+    const config = destr(data?.Items?.[0]?.Config) ?? [];
+    const enumOption = config.map(item => {
+      return {
+        label: item.value,
+        value: item.key,
+        checked: false
+      };
+    });
+    setOption(enumOption);
+  };
+
   /**
    * 在ios h5端, label和input的绑定不生效
    * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
@@ -82,8 +118,8 @@ export default function Checkbox({
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
   const hashcode = React.useMemo(() => getLocalCounter(), []);
   let checkboxElement;
-  if(platform === 'h5') {
-    checkboxElement = range.map(({ label, value }, index) => {
+  if (platform === 'h5') {
+    checkboxElement = option.map(({ label, value }, index) => {
       const _id = `checkbox-${hashcode}-${index}`;
       const _name = `checkbox-${hashcode}-${name}`;
       return (
@@ -120,17 +156,17 @@ export default function Checkbox({
             .map(([value]) => value)
           }
           onChange={value => {
-            const newMap = range
-            .map((opt) => opt.value)
-            .reduce((acc, cur) => {
-              const idx = value.indexOf(cur);
-              if(idx < 0) {
-                acc[cur] = false;
-              } else {
-                acc[cur] = true;
-              }
-              return acc;
-            }, {});
+            const newMap = option
+              .map((opt) => opt.value)
+              .reduce((acc, cur) => {
+                const idx = value.indexOf(cur);
+                if (idx < 0) {
+                  acc[cur] = false;
+                } else {
+                  acc[cur] = true;
+                }
+                return acc;
+              }, {});
             setCheckedItems(newMap);
             events.change(
               {
@@ -141,7 +177,7 @@ export default function Checkbox({
             );
           }}
         >
-          {range.map(({value, label}, index) => {
+          {option.map(({ value, label }, index) => {
             const _id = `checkbox-${hashcode}-${index}`;
             return (
               <TeaCheckbox key={_id} name={value} id={_id}>
@@ -149,7 +185,7 @@ export default function Checkbox({
               </TeaCheckbox>
             );
           })}
-    </TeaCheckbox.Group>
+        </TeaCheckbox.Group>
       </ConfigProvider>
     );
   }
@@ -167,5 +203,7 @@ export default function Checkbox({
 }
 
 export interface PropsType extends CommonFormPropsType {
-  range?: {label: string, value: any; [key: string]: any}[];
-}
+  range?: { label: string, value: any;[key: string]: any }[];
+  format?: string;
+  enumName?: string;
+}

package/src/web/components/form/formcell/index.tsx

@@ -14,13 +14,13 @@ export default function FormCell({
   children,
   multiCell,
   requiredFlag,
-  size
+  size,
 }: PropsType) {
   const platform = usePlatform();
   const isFlex = layout !== 'vertical';
 
-  if(platform === 'pc') {
-    return (  
+  if (platform === 'pc') {
+    return (
       <ConfigProvider classPrefix="wedatea2td">
         <TeaForm.Item
           style={style}
@@ -31,9 +31,14 @@ export default function FormCell({
             'weda-formcells__pc': !!label,
             'weda-formcells__full-width': size === 'full',
             [layout]: layout,
-            [className]: [className]
+            [className]: [className],
           })}
-          label={label}
+          label={
+            <>
+              {requiredFlag && <span className="weda-formcells__flag">*</span>}
+              {label}
+            </>
+          }
         >
           {children}
         </TeaForm.Item>

package/src/web/components/form/location/components/LocationH5/location.h5.jsx

@@ -77,7 +77,7 @@ export default function LocationH5(props) {
         value: {
           address: poiname,
           geopoint: {
-            coordinates: [lat, lng],
+            coordinates: [lng, lat],
             type: 'Point',
           },
         },
@@ -176,7 +176,7 @@ export default function LocationH5(props) {
                   value: {
                     address: city + addr,
                     geopoint: {
-                      coordinates: [lat, lng],
+                      coordinates: [lng, lat],
                       type: 'Point',
                     },
                   },
@@ -283,7 +283,7 @@ export default function LocationH5(props) {
       value: {
         address: poiname,
         geopoint: {
-          coordinates: [latlng.lat, latlng.lng],
+          coordinates: [latlng.lng, latlng.lat],
           type: 'Point',
         },
       },

package/src/web/components/form/location/components/LocationPC/location.PC.jsx

@@ -58,7 +58,7 @@ export default function LocationPC(props) {
     let res = {
       address: poiname,
       geopoint: {
-        coordinates: [latitude, longitude],
+        coordinates: [longitude, latitude],
         type: 'Point',
       },
     };
@@ -124,7 +124,7 @@ export default function LocationPC(props) {
         value: {
           address: poiname,
           geopoint: {
-            coordinates: [latlng.lat, latlng.lng],
+            coordinates: [latlng.lng, latlng.lat],
             type: 'Point',
           },
         },