@cloudbase/weda-ui 0.2.17 → 2.0.8

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/textarea/index.css

@@ -1,3 +1,7 @@
 .weda-textarea textarea {
   height: 8.6rem;
 }
+
+.weda-ui .weda-textarea .weui-cell_form {
+  padding: 16px;
+}

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

@@ -45,7 +45,7 @@ export default function Textarea({
   // 两次默认值不同时, 需要刷新value
   const [value, setValue] = useSyncValue(defaultValue);
   const counter = React.useMemo(() => (value?.length || 0), [value]);
-  
+
   const onChange = function (e) {
     const text = typeof e === 'string' ? e : e.target.value;
     setValue(text);
@@ -111,4 +111,4 @@ export interface PropsType extends CommonFormPropsType {
   focus?: boolean;
   counterVisible?: boolean;
   size?: 's' | 'm' | 'l' | 'full';
-}
+}

package/src/web/components/form/tips/index.css

@@ -0,0 +1,4 @@
+.weda-form .weui-cells__tips_warn {
+  color: #fa5151;
+  color: var(--weui-RED);
+}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import classNames from '../../../utils/classnames';
 import { CommonPropsType } from '../../../types';
+import './index.css';
 
 export default function Tips({
   // 系统属性
@@ -10,7 +11,7 @@ export default function Tips({
   tips = '表单提示',
   type = 'normal',
   id,
-  style
+  style,
 }: PropsType) {
   const cls = classNames({
     'weda-ui': true,
@@ -21,7 +22,7 @@ export default function Tips({
   });
 
   return (
-    <div className={cls} id={id} style={style} >
+    <div className={cls} id={id} style={style}>
       {tips}
     </div>
   );
@@ -30,4 +31,4 @@ export default function Tips({
 export interface PropsType extends CommonPropsType {
   tips?: string;
   type?: 'warn' | 'normal';
-}
+}

package/src/web/components/form/uploader/index.css

@@ -79,6 +79,30 @@
   display: flex;
   justify-content: space-between;
 }
-.weui-uploader.horizontal .weui-uploader__bd {
-  padding-left: 2.28571rem;
+
+.weui-uploader.horizontal .weda-formcells__label {
+  width: 130px;
+}
+
+.weda-ui .weui-uploader__hd {
+  display: block;
+}
+
+.weui-uploader__label {
+  display: flex;
+  flex: 1;
+}
+.weui-uploader.vertical .weui-uploader__title {
+  flex: unset;
+}
+
+.weda-ui .weui-uploader.horizontal .weui-uploader__bd {
+  padding: 16px 0;
+}
+.weda-ui .weui-uploader.vertical .weui-uploader__bd {
+  padding: 16px;
+}
+
+.weui-uploader__hd.vertical {
+  padding-bottom: 0;
 }

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,68 +121,64 @@ 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">
-        <div className="weui-cell__bd">
-          <div className={classNames('weui-uploader', layout)}>
-            <div className={classNames('weui-uploader__hd', layout)}>
-              {requiredFlag && (
-                <label className="weda-formcells__flag">*</label>
-              )}
-              <p className="weui-uploader__title">{title}</p>
-              <div className="weui-uploader__info">
-                <span id="uploadCount">{fileIdList.length}</span>
-                {`/${finalMaxImgCount}`}
-              </div>
-            </div>
-            <div className="weui-uploader__bd">
-              <ul className="weui-uploader__files" id="uploaderFiles">
-                {(fileIdList ?? []).map((f) => (
-                  <SingleImage key={f} src={f} deleteBySrc={deleteFile} />
-                ))}
-                {uploading && (
-                  <li className="weui-uploader__file weui-uploader__file_status">
-                    <div className="weui-uploader__file-content">
-                      {progress}%
-                    </div>
-                  </li>
-                )}
-              </ul>
-              {(fileIdList.length < maxUploadCount ||
-                (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
-                <div className="weui-uploader__input-box">
-                  <input
-                    id="uploaderInput"
-                    className="weui-uploader__input"
-                    type="file"
-                    accept={accepts.join(',')}
-                    multiple
-                    onChange={(e) => {
-                      const files = [...e.target.files];
-                      if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
-                        weui.alert('请上传不超过10M的图片');
-                        return false;
-                      }
+      <div className={classNames('weui-uploader', layout)}>
+        <div className={classNames('weui-uploader__hd', layout)}>
+          <UploaderLabel layout={layout} title={title} currentCount={fileIdList.length} maxCount={finalMaxImgCount} requiredFlag={requiredFlag} />
+        </div>
 
-                      if (files.length > finalMaxImgCount) {
-                        // 防止一下子选择过多文件
-                        weui.alert(
-                          `最多只能上传${finalMaxImgCount}张图片，请重新选择`
-                        );
-                        return false;
-                      }
-                      if (fileIdList.length + files.length > finalMaxImgCount) {
-                        weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
-                        return false;
-                      }
-                      files.forEach((f) => uploadToTcb(f));
-                    }}
-                  />
+        <div className="weui-uploader__bd">
+          <ul className="weui-uploader__files" id="uploaderFiles">
+            {(fileIdList ?? []).map((f) => (
+              <SingleImage key={f} src={f} deleteBySrc={deleteFile} />
+            ))}
+            {uploading && (
+              <li className="weui-uploader__file weui-uploader__file_status">
+                <div className="weui-uploader__file-content">
+                  {progress}%
                 </div>
-              )}
+              </li>
+            )}
+          </ul>
+          {showAdd && (
+            <div className="weui-uploader__input-box">
+              <input
+                id="uploaderInput"
+                className="weui-uploader__input"
+                type="file"
+                accept={accepts.join(',')}
+                multiple
+                onChange={(e) => {
+                  const files = [...e.target.files];
+                  if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
+                    weui.alert('请上传不超过10M的图片');
+                    return false;
+                  }
+
+                  if (files.length > finalMaxImgCount) {
+                    // 防止一下子选择过多文件
+                    weui.alert(
+                      `最多只能上传${finalMaxImgCount}张图片，请重新选择`
+                    );
+                    return false;
+                  }
+                  if (fileIdList.length + files.length > finalMaxImgCount) {
+                    weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
+                    return false;
+                  }
+                  files.forEach((f) => uploadToTcb(f));
+                }}
+              />
             </div>
-          </div>
+          )}
         </div>
       </div>
     </div>
@@ -253,3 +250,38 @@ export interface H5UploaderProps extends CommonFormPropsType {
   single?: boolean; // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组;
   onChange?: (v: any) => void;
 }
+
+const UploaderLabel = ({layout, title, currentCount, maxCount, requiredFlag}) => {
+  if(layout === 'horizontal') {
+    return (
+      <React.Fragment>
+        <div className='weda-formcells__label weui-cell'>
+          <div>
+            <p className="weui-uploader__title">{title}</p>
+            <div className="weui-uploader__info">
+              <span id="uploadCount">{currentCount}</span>
+              {`/${maxCount}`}
+            </div>
+          </div>
+          {requiredFlag && (
+              <label className="weda-formcells__flag">*</label>
+          )}
+        </div>
+      </React.Fragment>
+    )
+  }
+  return (
+    <div className='weda-formcells__label weui-cell'>
+      <div className='weui-uploader__label'>
+        <p className="weui-uploader__title">{title}</p>
+        {requiredFlag && (
+                <label className="weda-formcells__flag">*</label>
+        )}
+      </div>
+      <div className="weui-uploader__info">
+        <span id="uploadCount">{currentCount}</span>
+        {`/${maxCount}`}
+      </div>
+    </div>
+  )
+}