@cloudbase/weda-ui 0.2.17 → 2.0.8

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

@@ -76,9 +76,6 @@
   display: flex;
   justify-content: space-between;
 }
-.weui-uploader.horizontal .weui-uploader__bd {
-  padding-left: 2.28571rem;
-}
 
 /* ----上传文件----  pc */
 .weda-upload-file-pc .weda-upload-file-pc__file-item {
@@ -230,7 +227,8 @@
 
 .weda-upload-file-mobile .weda-upload-file-mobile__hd {
   width: 100%;
-  padding: 24px 20px 8px 20px;
+  padding: 16px;
+  padding-left: 0;
   display: flex;
   background-color: #fff;
 }

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.css

@@ -36,8 +36,8 @@
 }
 
 .weda-image.weda-image-error {
-  position: relative;
-  display: inline-block;
+  position: relative !important;
+  display: inline-block !important;
 }
 
 .weda-image:not([src]):before,
@@ -49,4 +49,4 @@
     top: 0;
     width: 100%;
     height: 100%;
-}
+}

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

@@ -23,12 +23,12 @@ export default function Image({
   events = {},
   style = {},
   // 组件属性
-  src = defaultSrc,
-  alt = '[图片]',
-  mode = 'scaleToFill',
-  lazyLoad = false,
-  imgPreview = false,
-  maskClosable = true,
+  src,
+  alt,
+  mode,
+  lazyLoad,
+  imgPreview,
+  maskClosable,
   fit,
 }: PropsType) {
   const [isError, setIsError] = useState(false);
@@ -102,4 +102,3 @@ 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,13 @@ 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';
+
+export { default as Lottery } from './lottery';
 // open
 // import Auth from './auth';
 

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

@@ -17,18 +17,20 @@ export interface PropsType extends CommonPropsType {
     */
    params?: {key: string, value: string}[];
    contentSlot?: React.ReactNode;
+   isOpenInNewWindow: boolean;
 }
 
 // 所有绝对地址直接交由浏览器，新开窗口交由浏览器
 // 当前窗口相对地址交给平台
 export default function Link({
-  content = '这是一个链接',
+  content,
   url = '',
   events = {},
   style,
   className,
   contentSlot,
-  params = [], // TODO 格式定义
+  params = [], // TODO 格式定义,
+  isOpenInNewWindow,
 }: 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

@@ -11,24 +11,11 @@ import { isInIde } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import isequal from 'lodash.isequal';
 import './index.css';
+import { REL_DICT } from '../../utils/constant';
+import { isNil } from '../../utils/lodash';
 
-const REL_DICT = {
-  equal: 'eq', // 等于
-  unequal: 'neq', // 不等于
-  include: 'search', // 包含
-  exclude: '_exclude', // 不包含
-  begin_with: '_begin_with', // 开头是
-  greater: 'gt', // 大于
-  greater_or_equal: 'gte', // 大于等于
-  bigger_or_equal: 'gte', //大于等于
-  less: 'lt', // 小于
-  less_or_equal: 'lte', // 小于等于
-  in: 'in', // 多选值
-  not_in: 'nin', // 不在多选值
-};
 const ORDERTYPE = ['asc', 'desc'];
 const BLOCK_NAME = 'weda-list-view';
-const isNull = (val) => [undefined, null].includes(val);
 const getIdeMockData = (length = 3) => Array.from({ length }).map((d) => ({}));
 const getWhereList = (where) => {
   let result = [];
@@ -45,7 +32,7 @@ const getWhereList = (where) => {
             rel = 'regex';
             val = `^((?!${val}).)*$`;
           }
-          if (item2?.logic !== 'or' && item2?.key && rel && !isNull(val)) {
+          if (item2?.logic !== 'or' && item2?.key && rel && !isNil(val)) {
             result.push({ key: item2.key, rel, val });
           }
         });
@@ -63,9 +50,9 @@ export default function ListView(props: IListView) {
     orderBy,
     orderType,
     where,
-    template = 'simpleList',
+    template,
     pageSize = 5,
-    pagination = 'loadMoreButton',
+    pagination,
     events,
     className,
     children,
@@ -185,7 +172,7 @@ export default function ListView(props: IListView) {
     const { orderBy, orderType, pageNo, pageSize, where } = params || {};
     const tcbParams = {};
     // tcb分页参数
-    if (!isNull(pageNo) && !isNull(pageSize)) {
+    if (!isNil(pageNo) && !isNil(pageSize)) {
       tcbParams['pageNo'] = pageNo;
       tcbParams['pageSize'] = pageSize;
     }
@@ -344,7 +331,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()}

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

@@ -0,0 +1,327 @@
+/* pc style start */
+.weda-lottery {
+  width: 326px;
+  height: 326px;
+  position: relative;
+}
+.weda-lottery .weda-lottery__wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #FF465C;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+}
+
+.weda-lottery .weda-lottery__dot-top {
+  position: absolute;
+  top: 4px;
+  left: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-bottom {
+  position: absolute;
+  bottom: 4px;
+  left: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-left {
+  position: absolute;
+  left: 4px;
+  top: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-right {
+  position: absolute;
+  right: 4px;
+  top: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot {
+  display: flex;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal {
+  flex-direction: row;
+}
+
+.weda-lottery .weda-lottery__dot-vertical {
+  flex-direction: column;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item,
+.weda-lottery .weda-lottery__dot-single {
+  width: 9px;
+  height: 9px;
+  box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  background: #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(odd) {
+  background: #FFEE52;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(even) {
+  background: #FFFFFF
+}
+
+.weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item {
+  margin-right: 43px;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item:last-child {
+  margin-right: 0 !important;
+}
+
+.weda-lottery .weda-lottery__dot-vertical .weda-lottery__dot-item {
+  margin-bottom: 43px;
+}
+
+.weda-lottery .weda-lottery__dot-vertical .weda-lottery__dot-item:last-child {
+  margin-bottom: 0 !important;
+}
+
+.weda-lottery .weda-lottery__dot-left-top {
+  position: absolute;
+  top: 9px;
+  left: 6px;
+}
+
+.weda-lottery .weda-lottery__dot-right-top {
+  position: absolute;
+  top: 9px;
+  right: 6px;
+}
+
+.weda-lottery .weda-lottery__dot-left-bottom {
+  position: absolute;
+  left: 6px;
+  bottom: 9px;
+}
+
+.weda-lottery .weda-lottery__dot-right-bottom {
+  position: absolute;
+  right: 6px;
+  bottom: 9px;
+}
+
+.weda-lottery .weda-lottery__inner {
+  padding: 18px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__inner-wrap {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #DD0D00 0%, #D80027 100%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  height: 100%;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item {
+  position: absolute;
+  width: calc((100% - 32px)/ 3);
+  height: calc((100% - 32px)/ 3);
+  font-size: 0;
+  text-align: center;
+  background: #FFF8EE;
+  box-shadow: inset 0px -2px 0px #FFDDBD;
+  border-radius: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived {
+  background: #FFF8EE;
+  box-shadow: 0px 0px 6px #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected {
+  background: #FF6666;
+  box-shadow: inset 0px -2px 0px #FFA4A4;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:first-child {
+  top: 8px;
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(2) {
+  top: 8px;
+  left: calc((100% - 32px)/ 3 + 16px);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(3) {
+  top: 8px;
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(4) {
+  top: calc((100% - 32px)/ 3 + 16px);
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(5) {
+  bottom: 8px;
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(6) {
+  bottom: 8px;
+  left: calc((100% - 32px)/ 3 + 16px);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(7) {
+  bottom: 8px;
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(8) {
+  bottom: calc((100% - 32px)/ 3 + 16px);
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived .weda-lottery__turntable-cell {
+  border-color: #FFE05F;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-image {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-icon {
+  display: block;
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-desc {
+  margin-top: 6px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 17px;
+  text-align: center;
+  color: #BA0000;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected .weda-lottery__turntable-cell-desc {
+  color: #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__turntable-btn {
+  z-index: 2;
+  position: absolute;
+  width: calc((100% - 32px)/ 3);
+  height: calc((100% - 32px)/ 3);
+  top: calc((100% - 32px)/ 3 + 16px);
+  left: calc((100% - 32px)/ 3 + 16px);
+  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
+  box-shadow: inset 0px -2px 0px #FF7A00;
+  border-radius: 50%;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived {
+  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
+  box-shadow: inset 0px 2px 0px #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__btn-inner {
+  padding: 9px;
+  width: 100%;
+  height: 100%;
+}
+
+.weda-lottery .weda-lottery__btn {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn {
+  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
+}
+
+.weda-lottery .weda-lottery__btn-image {
+  padding: 11px 15px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  text-decoration: none
+}
+
+.weda-lottery .weda-lottery__btn-image  .weda-lottery__btn-text {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  text-align: center;
+  color: #FFFFFF;
+  text-shadow: 0px 0.5px 0px #E42B27;
+  max-height: 100%;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  width: 100%;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn-image {
+  opacity: 0.6;
+}
+/* pc style end */
+
+/* mobile style start */
+.weda-lottery-mobile {
+  width: 100%;
+}
+
+.weda-lottery-mobile .weda-lottery__wrap,
+.weda-lottery-mobile .weda-lottery__content {
+  width: 100%;
+}
+/* mobile style end */