@cloudbase/weda-ui 0.2.17 → 1.0.21

package/src/web/components/form/select/region/index.ts

@@ -1,40 +1,131 @@
-// 暂时把地区信息打包在本地, 后续移到COS桶内
-import {provinces} from './provinces';
-import {cities} from './cities';
-import {regions} from './regions';
 import weui from '../../../../utils/weui';
+import { callWedaApi } from '../../../../utils/tcb';
 
 let tree;
 
-export function getRegionTree() {
-  if (!tree) {
-    tree = provinces.map((province) => {
-      return {
-        label: province.name,
-        value: province.name,
-        children: cities
-          .filter((city) => city.parent_code === province.code)
-          .map((city) => {
-            return {
-              label: city.name,
-              value: city.name,
-              children: regions
-                .filter((region) => region.parent_code === city.code)
-                .map((region) => {
-                  return {
-                    label: region.name,
-                    value: region.name,
-                  };
-                }),
-            };
-          }),
-      };
+export async function getRegionTree(regionData,regionType,regionMode) {
+  tree = [];
+  tree = formatTreeData(regionData,regionType,regionMode);
+  return tree;
+}
+
+export  function regionPicker(options,regionTree:any[]) {
+  const weRegionTree =regionTree.length==0?[{label:'地区数据加载中，请关闭弹窗后重试',value:null,children:null}]:regionTree;
+  weui.picker(weRegionTree, options);
+}
+/**
+ * 获取运行态地区数据
+ */
+ export async function getAreaCode() {
+  try {
+    const res = await callWedaApi({
+      action: 'QueryRuntimeAreaCode',
+      data: {Mask: "11100"},
     });
+    return res?.AreaCodeList;
+  } catch (error) {
+    console.error('错误', error);
+    return {};
   }
-
-  return tree;
 }
+/**
+ * 构建树形结构
+ */
+ function formatTreeData(arr,regionType,regionMode) {
+  let provicesData = [];
+    arr.forEach(item=>{
+    //省数据集合
+    if(item?.Type==1&&item?.Deprecated==false){
+      provicesData.push({
+        label: item.Value,
+        value: item.Value,
+        code:item.Code,
+        type:item.Type,
+        centralCity:item.CentralCity,
+        children: regionType!= 'levelOne'||regionMode=='region'?[{
+          label: item.Value,
+          value: item.Value,
+          code:item.Code,
+          type:item.Type,
+          children: regionType!= 'levelTwo'||regionMode=='region'?[{
+            label: item.Value,
+            value: item.Value,
+            code:item.Code,
+            type:item.Type,
+            centralCity:item.CentralCity,
+          }]:null
+        }]:null
+      });
+    }
+  });
+  if(regionType!= 'levelOne'||regionMode=='region'){
+    arr.forEach(item=>{
+      //市数据集合
+      if(item?.Type==2&&item?.Deprecated==false){
+        provicesData.map(provice=>{
+          if(provice.code.substr(0, 2) == item.Code.substr(0,2)){
+            if(provice['children'][0].type==1){
+              provice['children']=[];
+            }
+              provice['children'].push({
+                label: item.Value,
+                value: item.Value,
+                code:item.Code,
+                type:item.Type,
+                centralCity:item.CentralCity,
+                children: regionType!= 'levelTwo'||regionMode=='region'?[{
+                  label: item.Value,
+                  value: item.Value,
+                  code:item.Code,
+                  type:item.Type,
+                  centralCity:item.CentralCity,
+                }]:null
+              });
 
-export function regionPicker(options) {
-  weui.picker(getRegionTree(), options);
+      }
+        });
+      }
+    });
+    if(regionType != 'levelTwo'||regionMode=='region'){
+      arr.forEach(item=>{
+        //区数据集合
+        if(item?.Type==3&&item?.Deprecated==false){
+          provicesData.map(provice=>{
+            if(provice.centralCity){
+              provice.children.map(city=>{
+                if(city.code.substr(0, 2) == item.Code.substr(0,2)){
+                  if(city['children'][0].type==1){
+                    city['children']=[];
+                  }
+                    city['children'].push({
+                      label: item.Value,
+                      value: item.Value,
+                      code:item.Code,
+                      //type:item.Type
+                    });
+
+              }});
+            }else{
+              provice.children.map(city=>{
+                if(city.code.substr(0, 4) == item.Code.substr(0,4)){
+                  if(city['children'][0].type==2){
+                    city['children']=[];
+                  }
+                    city['children'].push({
+                      label: item.Value,
+                      value: item.Value,
+                      code:item.Code,
+                      //type:item.Type
+                    });
+
+              }});
+            }
+
+          });
+        }
+      });
+    }
+
+  }
+  return provicesData;
 }

package/src/web/components/form/select/time.jsx

@@ -54,3 +54,92 @@ export function timePicker(options) {
     defaultValue,
   });
 }
+
+/**
+ * 年选择器
+ */
+export function yearPicker(options) {
+  const { startDate, endDate, defaultDate } = options;
+  if (startDate > endDate) {
+    throw 'startDate is bigger then endDate';
+  }
+  // 当前年
+  const currentYear = new Date().getFullYear();
+  // 默认传入年
+  const defaultYear = defaultDate
+    ? new Date(defaultDate).getFullYear()
+    : currentYear;
+  // 最小年份
+  const minYear = startDate
+    ? new Date(startDate).getFullYear()
+    : currentYear - 100;
+  // 最大年份
+  const maxYear = endDate ? new Date(endDate).getFullYear() : currentYear + 100;
+  const years = Array.from({ length: maxYear - minYear + 1 }).map(
+    (item, index) => ({
+      label: `${minYear + index}年`,
+      value: minYear + index,
+    })
+  );
+  weui.picker(years, {
+    ...options,
+    defaultValue: [defaultYear],
+  });
+}
+
+/**
+ * 年月选择器
+ */
+export function monthPicker(options) {
+  const { startDate, endDate, defaultDate } = options;
+  if (startDate > endDate) {
+    throw 'startDate is bigger then endDate';
+  }
+  const _getYear = (d) => d.getFullYear();
+  const _getMonth = (d) => d.getMonth() + 1;
+  // 当前年月
+  const now = new Date();
+  const [currentYear, currentMonth] = [_getYear(now), _getMonth(now)];
+  // 默认传入年月
+  const def = defaultDate ? new Date(defaultDate) : now;
+  const [defaultYear, defaultMonth] = [_getYear(def), _getMonth(def)];
+  // 最小年月
+  const min = startDate && new Date(startDate);
+  const [minYear, minMonth] = [
+    min ? _getYear(min) : currentYear - 100,
+    min ? _getMonth(min) : 1,
+  ];
+  // 最大年月
+  const max = endDate && new Date(endDate);
+  const [maxYear, maxMonth] = [
+    max ? _getYear(max) : currentYear + 100,
+    max ? _getMonth(max) : 12,
+  ];
+  // 年份月份
+  const years = Array.from({ length: maxYear - minYear + 1 }).map((item, i) => {
+    const year = i + minYear;
+    let months = [];
+    let [minMonthWithYear, maxMonthWithYear] = [1, 12];
+    if (year === minYear) {
+      minMonthWithYear = Math.max(minMonth, 1);
+    }
+    if (year === maxYear) {
+      maxMonthWithYear = Math.min(maxMonth, 12);
+    }
+    months = Array.from({
+      length: maxMonthWithYear - minMonthWithYear + 1,
+    }).map((item, i) => ({
+      label: `${i + minMonthWithYear}月`,
+      value: i + minMonthWithYear,
+    }));
+    return {
+      label: `${i + minYear}年`,
+      value: i + minYear,
+      children: months,
+    };
+  });
+  weui.picker(years, {
+    ...options,
+    defaultValue: [defaultYear, defaultMonth],
+  });
+}

package/src/web/components/form/select/year.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import {
+  Popover,
+  ConfigProvider,
+  useConfig,
+  Input,
+  Icon,
+  Button,
+} from 'tea-component';
+import classNames from '../../../utils/classnames';
+import { moment } from './index';
+import './index.css';
+
+/**
+ * pc 版简易年份选择器
+ * 传参与 DatePicker 保持一致
+ */
+export default function YearPicker(props) {
+  const {
+    range = [],
+    disabled,
+    value,
+    onChange,
+    className,
+    placeholder,
+    ...rest
+  } = props;
+  const { classPrefix } = useConfig();
+  const inputRef = React.useRef(null);
+  const [show, setShow] = React.useState(false);
+  const [page, setPage] = React.useState(0);
+  const [inputValue, setInputValue] = React.useState(transValueToYear(value));
+  const { pageYears, pageStart, pageEnd } = getYears(inputValue, page);
+  const [min, max] = [
+    transValueToYear(range?.[0]),
+    transValueToYear(range?.[1]),
+  ];
+
+  React.useEffect(() => {
+    setInputValue(transValueToYear(value));
+  }, [value]);
+
+  return (
+    <ConfigProvider classPrefix="wedatea2td">
+      <Popover
+        trigger="click"
+        visible={show}
+        onVisibleChange={(v) => !v && setShow(v)}
+        overlay={
+          <div
+            className={classNames(
+              `${classPrefix}-dropdown-box`,
+              'year-picker__overlay'
+            )}
+          >
+            <div
+              className={classNames(
+                `${classPrefix}-calendar__caption`,
+                'year-picker__header'
+              )}
+            >
+              <div className="year-picker__header-title">
+                {pageStart}-{pageEnd}
+              </div>
+              <div className="year-picker__header-actions">
+                <Button
+                  type="link"
+                  icon="arrowleft"
+                  title="上二十年"
+                  onClick={() => setPage((d) => d - 1)}
+                />
+                <Button
+                  type="link"
+                  icon="cur-active"
+                  title="当前二十年"
+                  onClick={() => setPage(0)}
+                />
+                <Button
+                  type="link"
+                  icon="arrowright"
+                  title="下二十年"
+                  onClick={() => setPage((d) => d + 1)}
+                />
+              </div>
+            </div>
+            <div
+              className={classNames(
+                `${classPrefix}-calendar__type--year`,
+                'year-picker__body'
+              )}
+            >
+              {pageYears.map((list) => (
+                <div
+                  key={list.join()}
+                  className={classNames(`${classPrefix}-calendar__row`)}
+                >
+                  {list.map((item) => {
+                    const isSelected = item === inputValue;
+                    const isDisabled =
+                      (min && Number(item) < Number(min)) ||
+                      (max && Number(item) > Number(max));
+                    return (
+                      <div
+                        key={item}
+                        className={classNames(
+                          `${classPrefix}-calendar__cell`,
+                          'year-picker__cell',
+                          {
+                            'is-selected': isSelected,
+                            'is-disabled': isDisabled,
+                          }
+                        )}
+                        onClick={() => {
+                          if (isDisabled) return;
+                          setShow(false);
+                          setInputValue(item);
+                          onChange?.(moment(item));
+                        }}
+                      >
+                        <span>{item}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          </div>
+        }
+      >
+        <div
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...rest}
+          onClick={() => !disabled && setShow(true)}
+          className={classNames(`${classPrefix}-datepicker`, className)}
+        >
+          <div className={classNames(`${classPrefix}-datepicker__input`)}>
+            <Input
+              ref={inputRef}
+              disabled={disabled}
+              placeholder={placeholder}
+              value={inputValue}
+              onFocus={() => inputRef.current.blur()}
+            />
+            <Icon type="dismiss" />
+          </div>
+        </div>
+      </Popover>
+    </ConfigProvider>
+  );
+}
+
+/**
+ * 获取当前20年，page 表示分页，1表示下一页，-1表示上一页
+ * @returns [][]
+ */
+const getYears = (currentYear, page = 0, range = []) => {
+  currentYear = currentYear || new Date().getFullYear();
+  const startYear = (Math.floor(parseInt(currentYear) / 20) + page) * 20;
+  const pageYears = Array.from({ length: 5 }).map((item, i1) =>
+    Array.from({ length: 4 }).map((item, i2) => i1 * 4 + i2 + startYear + '')
+  );
+  return { pageYears, pageStart: startYear, pageEnd: startYear + 20 - 1 };
+};
+
+/**
+ * 输入 moment 值转 string 年份
+ */
+const transValueToYear = (val) => {
+  return moment.isMoment(val) ? val.format('YYYY') : '';
+};

package/src/web/components/form/uploader/uploader.h5.tsx

@@ -106,6 +106,7 @@ export function ImageUploaderH5({
         fileID && setInputValue((list) => [...list, fileID]);
         fileID && events.success && events.success({ value: fileID, file });
       } catch (err) {
+        weui.alert(`${err}` || '上传失败');
         events.error && events.error(err);
       } finally {
         setUploading(false);
@@ -120,6 +121,13 @@ export function ImageUploaderH5({
       : Array.from(new Set(acceptTypes));
   }, [acceptTypes]);
 
+  const showAdd = React.useMemo(() => {
+    if(single) {
+      // single 模式时，仅当数组为空时显示
+      return fileIdList.length < 1;
+    }
+    return fileIdList.length < maxUploadCount;
+  }, [fileIdList, single, maxUploadCount]);
   return (
     <div className={cls} id={id} style={style}>
       <div className="weui-cell">
@@ -148,8 +156,7 @@ export function ImageUploaderH5({
                   </li>
                 )}
               </ul>
-              {(fileIdList.length < maxUploadCount ||
-                (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+              {showAdd && (
                 <div className="weui-uploader__input-box">
                   <input
                     id="uploaderInput"

package/src/web/components/form/uploader/uploader.pc.tsx

@@ -80,7 +80,6 @@ export function UploaderPCInner(props) {
   // 文件列表
   const [fileIDList, setfileIDList] = React.useState([]);
   const fileRef = React.useRef(fileIDList);
-
   React.useEffect(() => {
     let initialValue = []
       .concat(defaultValue)
@@ -89,7 +88,7 @@ export function UploaderPCInner(props) {
       initialValue = initialValue[0] ? [initialValue[0]] : [];
     }
     setfileIDList(initialValue);
-  }, []);
+  }, [defaultValue]);
 
   // 值变化事件
   React.useEffect(() => {
@@ -141,8 +140,9 @@ export function UploaderPCInner(props) {
         });
         fileID && setfileIDList((list) => [...list, fileID]);
         fileID && events.success && events.success({ value: fileID, file });
-      } catch (e) {
-        events.error && events.error({ value: e, file });
+      } catch (err) {
+        message.error({ content: `${err}` || '上传失败' });
+        events.error && events.error(err);
       } finally {
         setUploading(false);
         setProgress(0);

package/src/web/components/form/uploaderFile/uploadFile.h5.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import weui from '../../../utils/weui';
 import { CommonFormPropsType } from '../types';
-
+import isObjectEqual from '../../../utils/isObjectEqual';
 import {
   Upload,
   ConfigProvider,
@@ -26,7 +26,6 @@ import {
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
-
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-mobile';
 // 默认图片类型
@@ -75,11 +74,18 @@ export function UploadFileH5({
   onChange = null,
   isEdit = true,
 }: IUploadFileH5) {
-  const [fileIDList, setfileIDList] = React.useState(
-    filterStrList([].concat(defaultValue, value))
-  ); // 上传成功文件ID列表，fileID[]
+  const [fileIDList, setfileIDList] = React.useState(filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
   const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
   const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
+    // 两次默认值不同, 需要刷新
+    const prevDefaultRef = React.useRef<any>([]);
+    React.useMemo(()=>{
+    //有有效默认值时不刷新，解决初次渲染默认值不显示问题
+   if(defaultValue&&!isObjectEqual(prevDefaultRef.current,defaultValue)&&(JSON.stringify(prevDefaultRef.current)=='[]'||!prevDefaultRef.current)){
+   prevDefaultRef.current =defaultValue;
+      setfileIDList(filterStrList([].concat(defaultValue)));
+    }
+    },[defaultValue]);
   React.useEffect(() => {
     // 外部 onChange 事件
     const pureFileIDList = fileIDList.filter(
@@ -115,9 +121,9 @@ export function UploadFileH5({
     // 上传时新增事件
     if (type === 'add') {
       fileID && setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
-      fileID && setfileIDList((list) => [...list, fileID]);
+      fileID && setfileIDList([...fileIDList, fileID]);
     } else {
-      fileID && setfileIDList((list) => list.filter((f) => f !== fileID));
+      fileID && setfileIDList(fileIDList.filter((f) => f !== fileID));
     }
     uuid && setFileList((list) => list.filter((item) => uuid !== item?._uuid));
   };

package/src/web/components/form/uploaderFile/uploadFile.pc.tsx

@@ -22,6 +22,7 @@ import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
 import { CommonFormPropsType } from '../types';
+import isObjectEqual from '../../../utils/isObjectEqual';
 
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-pc';
@@ -67,12 +68,20 @@ export function UploadFilePc({
   onChange = null,
   isEdit = true,
 }: IUploaderFilePc) {
-  const [fileIDList, setfileIDList] = React.useState(
-    filterStrList([].concat(defaultValue, value))
-  ); // 上传成功文件ID列表，fileID[]
+
+
+  const [fileIDList, setfileIDList] = React.useState(filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
   const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
   const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
-
+    // 两次默认值不同, 需要刷新
+  const prevDefaultRef = React.useRef<any>([]);
+  React.useMemo(()=>{
+    //有有效默认值时不刷新，解决初次渲染默认值不显示问题
+   if(defaultValue&&!isObjectEqual(prevDefaultRef.current,defaultValue)&&(JSON.stringify(prevDefaultRef.current)=='[]'||!prevDefaultRef.current)){
+      prevDefaultRef.current =defaultValue;
+      setfileIDList(filterStrList([].concat(defaultValue)));
+    }
+    },[defaultValue]);
   React.useEffect(() => {
     // 外部 onChange 事件
     const pureFileIDList = fileIDList.filter(
@@ -89,7 +98,6 @@ export function UploadFilePc({
       events?.success?.({ value: pureFileIDList });
     }
   }, [fileIDList]);
-
   // 外层组件类
   const cls = classNames({
     'weda-ui': true,

package/src/web/components/image/image.tsx

@@ -184,4 +184,4 @@ export function ImageInner({
       </ConfigProvider>
     );
   }
-}
+}

package/src/web/components/image/index.tsx

@@ -102,4 +102,4 @@ function getObjectFitByWxImageMode(mode: TMode): React.CSSProperties['objectFit'
   const item = array.find((item) => item.mode === mode);
   return item?.h5;
 }
-
+ 

package/src/web/components/index.js

@@ -72,6 +72,7 @@ export { default as NavLayout } from './navLayout';
 
 // Data Contaier
 export { default as ListView } from './listView';
+export { default as NavigationBar } from './navigationBar';
 export { default as Line } from './chart/line';
 export { default as Bar } from './chart/bar';
 export { default as Pie } from './chart/pie';
@@ -79,6 +80,12 @@ export { default as DataView } from './dataView';
 
 export { default as StatisticsCard } from './chart/statisticsCard';
 export { default as GraphicCard } from './graphicCard';
+
+export { default as UserInfo } from './userInfo';
+export { default as Phone } from './phone';
+export { default as PhoneCode } from './phoneCode';
+export { default as Share } from './share';
+
 // open
 // import Auth from './auth';
 

package/src/web/components/link/index.tsx

@@ -17,6 +17,7 @@ export interface PropsType extends CommonPropsType {
     */
    params?: {key: string, value: string}[];
    contentSlot?: React.ReactNode;
+   isOpenInNewWindow: boolean;
 }
 
 // 所有绝对地址直接交由浏览器，新开窗口交由浏览器
@@ -28,7 +29,8 @@ export default function Link({
   style,
   className,
   contentSlot,
-  params = [], // TODO 格式定义
+  params = [], // TODO 格式定义,
+  isOpenInNewWindow = false,
 }: PropsType) {
   url = url.trim();
   const cls = classNames({
@@ -91,6 +93,7 @@ export default function Link({
     <a
       style={{ ...style }}
       className={cls}
+      target={isOpenInNewWindow ? '_blank' : '_self'}
       href={href}
       onClick={(e) => {
         events.tap && events.tap({}, { originEvent: e });
@@ -107,10 +110,10 @@ export default function Link({
           }
         }
       }}
-      rel="noreferrer"
+      rel='noopener noreferrer'
     >
       {contentSlot && <div className="weda-link-slot">{contentSlot}</div>}
       {content}
     </a>
   );
-}
+}

package/src/web/components/listView/index.css

@@ -60,6 +60,10 @@
 .weda-list-view__containor .weda-list-view__more {
   background-color: #fff;
 }
+.weda-list-view__containor
+  .weda-list-view__more.weda-list-view__more-bottomLoad {
+  background-color: transparent;
+}
 .weda-list-view__containor
   .weda-list-view__more
   .weda-list-view__more-pagination {

package/src/web/components/listView/index.tsx

@@ -344,7 +344,12 @@ export default function ListView(props: IListView) {
           {children}
         </div>
       )}
-      <div className={classNames(`${BLOCK_NAME}__more`)}>
+      <div
+        className={classNames(
+          `${BLOCK_NAME}__more`,
+          `${BLOCK_NAME}__more-${pagination}`
+        )}
+      >
         {pagination === 'bottomLoad' && renderBottomLoad()}
         {pagination === 'loadMoreButton' && renderLoadMore()}
         {pagination === 'pagination' && renderPagination()}