@cloudbase/weda-ui 0.2.17 → 1.0.21

package/src/web/components/tabs/tabs.pc.tsx

@@ -1,30 +1,43 @@
+import { useCustomCompareEffect, useMountEffect, useSyncedRef } from '@react-hookz/web';
 import * as React from 'react';
 import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
 import classNames from '../../utils/classnames';
+import isObjectEqual from '../../utils/isObjectEqual';
 import { useSyncValue } from '../../utils/useSyncValue';
 import { PropsType } from './index';
 
 
 export default function TabsPc({
-  tabs,
+  tabs = [],
   selectedIndex,
   events,
   className,
   style,
+  isMultipleSlot = true,
   ...restProps
 }: PropsType) {
 
   const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
-  const _tabs = Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
-    return {
-      id: index.toString(),
-      label: item.title
-    };
-  });
+  const _tabs = React.useMemo(() => {
+    return Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
+      return {
+        id: index.toString(),
+        label: item.title,
+        value: item.value
+      };
+    });
+  }, [tabs]);
 
+  const eventsRef = useSyncedRef(events);
+  useCustomCompareEffect(() => {
+    eventsRef.current && eventsRef.current.change({
+      id: _tabs[activeIndex]?.id,
+      label: _tabs[activeIndex]?.label,
+      value: _tabs[activeIndex]?.value,
+    });
+  }, [activeIndex, _tabs], isObjectEqual);
   const onActive = (e) => {
     setActiveIndex(e.id);
-    events && events.change(e);
   };
   return (
     <ConfigProvider classPrefix="wedatea2td">
@@ -40,11 +53,11 @@ export default function TabsPc({
           key={item.id}
           id={item.id}
           >
-            {restProps[`panel${index + 1}`]}
+            {isMultipleSlot ? restProps[`panel${index + 1}`] : restProps['panel1']}
           </TabPanel>
         )
         )}
     </TeaTabs>
   </ConfigProvider>
   );
-}
+}

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

@@ -21,8 +21,6 @@ export default function Text({
   maxLines = 2,
   space = false,
   userSelect = true,
-  textAlign = '',
-  textColor = '',
   style = {},
   className,
   events,
@@ -42,23 +40,17 @@ export default function Text({
   }
   const levelName = level === '0' ? '' : `level_${level}`;
 
-  // 添加文本颜色属性
-  let style2 = {};
-  if (textColor !== "") {
-    style2 = {color: textColor};
-  }
-
-  // 添加对齐属性
-  if (textAlign !== "") {
-    style2 = {...style2, textAlign};
-  }
+  const inlineStyle = React.useMemo(
+    () => ({ ...textStyle, ...style }),
+    [textStyle, style]
+  );
   return (
     <p
       //@ts-expect-error contentEditable type def sucks
       contentEditable={contenteditable}
       onInput={onInput}
       onBlur={onBlur}
-      style={{  ...style, ...textStyle, ...style2 }}
+      style={inlineStyle}
       className={classNames('weda-text', 'weda-ui', className, levelName)}
       id={id}
       onClick={(e) => events.tap({}, { originEvent: e })}
@@ -66,4 +58,4 @@ export default function Text({
       {text}
     </p>
   );
-}
+}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Button from '../../components/button';
+import { CommonPropsType } from '../../types';
+
+const UserInfo = (props: PropsType) => <Button {...props} />;
+
+export interface PropsType extends CommonPropsType {
+  /**
+   * 按钮标题
+   */
+  text?: string;
+  /**
+   * 按钮风格
+   */
+  type?: 'primary' | 'warn' | 'wechat' | 'default';
+  /**
+   * 按钮大小
+   */
+  size?: 'default' | 'mini' | 'large';
+  /**
+   * 信息用途
+   */
+  usage?: string;
+  /**
+   * 语言
+   */
+  language?: string;
+}
+
+export default UserInfo;

package/src/web/utils/platform.js

@@ -132,3 +132,12 @@ export const transFileCloudidToName = (fileID) => {
   const title = name.replace(uuidReg, '');
   return title;
 };
+
+/**
+ * 判断是否是url
+ */
+const reg =
+  // eslint-disable-next-line no-useless-escape
+  /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+
+export const isUrl = (path) => reg.test(path);

package/src/web/utils/tcb.js

@@ -1,3 +1,4 @@
+import { isInIde } from './platform';
 /**
  * 云存储/云函数相关
  */
@@ -54,6 +55,31 @@ export async function callDataSource(param) {
   }
 }
 
+/**
+ * 云API：获取用户自定义导航内容
+ *  param
+ *  WeAppId: string,
+ *  EnvId: string,
+ *  PublishType?: string,
+ */
+export async function getAppCustomNav() {
+  try {
+    const PublishType = isInIde() ? 'preview' : '';
+    const WeAppId = window?.app?.id;
+    const res = await callWedaApi({
+      action: 'DescribeAppCustomNav',
+      serviceType: 'lowcode',
+      data: {
+        WeAppId,
+        PublishType,
+      },
+    });
+    return res;
+  } catch (error) {
+    console.error('错误', error);
+    return {};
+  }
+}
 
 export function callWedaApi(...args) {
   return window.app.cloud.callWedaApi(...args);

package/src/web/weda-ui.css

@@ -6,6 +6,8 @@ body .weda-ui {
   --weui-BRAND: #006eff;
   --weui-TAG-TEXT-BLUE: #0067eb;
   --weui-BTN-DEFAULT-COLOR: #576b95;
+  --weui-WECHAT: #07c160;
+  --weui-TAG-TEXT-GREEN: #06ae56;
   --weui-BG-2: rgba(255, 255, 255, 0);
 }
 

package/src/mp/components/internals/listView/arrow-right-line.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.1719 12.0002L8.22192 7.05023L9.63592 5.63623L15.9999 12.0002L9.63592 18.3642L8.22192 16.9502L13.1719 12.0002Z" fill="#09121F"/>
-</svg>

package/src/mp/components/internals/listView/index.js

@@ -1,286 +0,0 @@
-const isNull = (val) => [undefined, null].includes(val);
-const REL_DICT = {
-  equal: 'eq', // 等于
-  unequal: 'neq', // 不等于
-  include: 'search', // 包含
-  exclude: '_exclude', // 不包含
-  begin_with: '_begin_with', // 开头是
-  greater: 'gt', // 大于
-  greater_or_equal: 'gte', // 大于等于
-  less: 'lt', // 小于
-  less_or_equal: 'lte', // 小于等于
-  in: 'in', // 多选值
-  not_in: 'nin', // 不在多选值
-};
-const ORDERTYPE = ['asc', 'desc'];
-const getWhereList = (where) => {
-  let result = [];
-  Array.isArray(where) &&
-    where.forEach((item1) => {
-      if (item1?.groupLogic !== 'or' && Array.isArray(item1?.logicData)) {
-        item1?.logicData.forEach((item2) => {
-          let [rel, val] = [REL_DICT[item2?.rel], item2?.value];
-          if ('_begin_with' === rel) {
-            rel = 'regex';
-            val = `^${val}`;
-          }
-          if ('_exclude' === rel) {
-            rel = 'regex';
-            val = `^((?!${val}).)*$`;
-          }
-          if (item2?.logic !== 'or' && item2?.key && rel && !isNull(val)) {
-            result.push({ key: item2.key, rel, val });
-          }
-        });
-      }
-    });
-  return result;
-};
-const DEFAULT_DATA = {
-  pageNo: 1,
-  loading: false,
-  total: 0,
-  records: [],
-  pageStr: '0/0',
-  isVisiableSign: false,
-  isFirstScreen: true,
-};
-
-Component({
-  options: {
-    virtualHost: true,
-  },
-  properties: {
-    className: {
-      type: String,
-      value: '',
-    },
-    style: {
-      type: String,
-      value: '',
-    },
-    datasource: {
-      type: Object,
-      value: {},
-    },
-    orderBy: {
-      type: String,
-    },
-    orderType: {
-      type: String,
-    },
-    where: {
-      type: Array,
-      value: [],
-    },
-    pageSize: {
-      type: Number,
-      value: 5,
-    },
-    template: {
-      type: String,
-      value: 'simpleList',
-    },
-    pagination: {
-      type: String,
-      value: 'loadMoreButton',
-    },
-    beforeDataChange: {
-      type: Function,
-      value: (v) => v,
-    },
-  },
-  data: { ...DEFAULT_DATA },
-  methods: {
-    /**
-     * 列表容器拉取数据，放在 setData 的回调函数中执行
-     */
-    _fetchData: async function () {
-      const { app } = getApp();
-      const callDataSource = app?.cloud?.callDataSource;
-      const { pageNo, loading } = this.data;
-      const { datasource, orderBy, orderType, where, pageSize } =
-        this.properties;
-      if (loading) return;
-      if (!callDataSource) {
-        console.warn(`当前环境缺少方法 app.cloud.callDataSource`);
-        return;
-      }
-      this.setData({ loading: true });
-      const { name: dataSourceName, extra } = datasource || {};
-      const methodName =
-        typeof extra?.methodName === 'string'
-          ? extra?.methodName
-          : 'wedaGetRecords';
-      const tcbParams = {};
-
-      // tcb分页参数
-      if (!isNull(pageNo) && !isNull(pageSize)) {
-        tcbParams['pageNo'] = pageNo;
-        tcbParams['pageSize'] = pageSize;
-      }
-      // tcb排序参数
-      if (orderBy && ORDERTYPE.includes(orderType)) {
-        tcbParams['orderBy'] = orderBy;
-        tcbParams['orderType'] = orderType;
-      }
-      // tcb过滤参数
-      const whereEffected = [].concat(getWhereList(where));
-      whereEffected.length > 0 && (tcbParams['where'] = whereEffected);
-      // tcb结果和事件
-      const data = await callDataSource({
-        dataSourceName,
-        methodName,
-        params: tcbParams,
-      });
-      let records = data?.records || [];
-      let total = data?.total || 0;
-      if (
-        ['loadMoreButton', 'bottomLoad'].includes(this.properties.pagination)
-      ) {
-        records = [...this.data.records, ...records]; // TODO 可能存在单次 setData 数据量过大引起小程序性能问题
-      }
-      this.setData(
-        {
-          total,
-          records,
-          loading: false,
-          pageStr: `${total > 0 ? pageNo : 0}/${
-            Math.ceil(total / pageSize) || 0
-          }`,
-        },
-        () => {
-          this._handleEvents(data);
-          setTimeout(() => this._firstScreenLoadMore(), 150);
-        }
-      );
-    },
-    /**
-     * 下一页
-     */
-    handleNext: function () {
-      if (
-        this.data.loading ||
-        !(this.properties.pageSize * this.data.pageNo < this.data.total)
-      ) {
-        return;
-      }
-      this.setData({ pageNo: this.data.pageNo + 1 }, () => this._fetchData());
-    },
-    /**
-     * 上一页
-     */
-    handlePre: function () {
-      if (this.data.loading || !(this.properties.pageNo > 1)) {
-        return;
-      }
-      this.setData({ pageNo: this.data.pageNo - 1 }, () => this._fetchData());
-    },
-    /**
-     * 向外部传递事件
-     */
-    _handleEvents: function (data) {
-      const records = this.data.records || [];
-      const total = this.data.total || records?.length || 0;
-      const beforeDataChange = this.properties.beforeDataChange || ((v) => v);
-      this.triggerEvent('onDataChange', {
-        data: beforeDataChange(records),
-      });
-      if (JSON.stringify(data) === '{}') {
-        this.triggerEvent('queryFail', {
-          datasource: this.properties.datasource,
-          data: null,
-        });
-      } else {
-        if (total === 0) {
-          this.triggerEvent('queryEmpty', {
-            datasource: this.properties.datasource,
-            data: beforeDataChange([]),
-          });
-        }
-        this.triggerEvent('querySuccess', {
-          datasource: this.properties.datasource,
-          data: beforeDataChange(records),
-        });
-      }
-    },
-    /**
-     * 首屏持续触底加载特殊处理
-     */
-    _firstScreenLoadMore: function () {
-      if (this.properties.pagination === 'bottomLoad') {
-        if (this.data.isFirstScreen) {
-          this.setData({ isFirstScreen: false });
-          this.contentObserver?.disconnect();
-          this._observerContent();
-        }
-      }
-    },
-    /**
-     * 开始监听slot
-     */
-    _observerContent: function () {
-      this.contentObserver = this.createIntersectionObserver();
-      this.contentObserver
-        .relativeToViewport()
-        .observe('#weda-list-view_content', (res) => {
-          this.setData({
-            isFirstScreen:
-              res?.boundingClientRect?.bottom <= res?.relativeRect?.bottom,
-          });
-        });
-    },
-    /**
-     * 开始监听sign
-     */
-    _observerSign: function () {
-      this.signObserver = this.createIntersectionObserver();
-      this.signObserver
-        .relativeTo('.weda-list-view__containor', { bottom: 10 })
-        .observe('#weda-list-view_sign', (res) => {
-          this.setData({ isVisiableSign: res?.intersectionRatio > 0 });
-        });
-    },
-  },
-  observers: {
-    'datasource,orderBy,orderType,where,pageSize,pagination': function (
-      dDatasource,
-      dOrderBy,
-      dOrderType,
-      dWhere,
-      dPageSize,
-      dPagination
-    ) {
-      if (
-        dDatasource !== this.properties.datasource ||
-        dOrderBy !== this.properties.orderBy ||
-        dOrderType !== this.properties.orderType ||
-        dWhere !== this.properties.where ||
-        dPageSize !== this.properties.pageSize ||
-        dPagination !== this.properties.pagination
-      ) {
-        this.setData({ ...DEFAULT_DATA }, () => this._fetchData());
-      }
-    },
-    isVisiableSign: function (dIsVisiableSign) {
-      if (dIsVisiableSign && this.properties.pagination === 'bottomLoad') {
-        this.handleNext();
-      }
-    },
-    isFirstScreen: function (dIsFirstScreen) {
-      if (dIsFirstScreen && this.properties.pagination === 'bottomLoad') {
-        this.handleNext();
-      }
-    },
-  },
-  lifetimes: {
-    attached: function () {
-      this._fetchData();
-      this._observerSign();
-    },
-    detached: function () {
-      this.contentObserver?.disconnect();
-      this.signObserver?.disconnect();
-    },
-  },
-});

package/src/mp/components/internals/listView/index.wxml

@@ -1,40 +0,0 @@
-<scroll-view scroll-y scroll-with-animation lower-threshold="5" style="height:97vh;{{style}}"
-  class="weda-list-view__containor weda-ui {{className}}">
-  <!-- 列表插槽 -->
-  <view class="{{template === 'cardList' ? 'weda-list-view-card' : ''}}" id="weda-list-view_content">
-    <slot></slot>
-  </view>
-
-  <view class="weda-list-view__more">
-    <!-- 加载更多 -->
-    <block wx:if="{{pagination==='loadMoreButton' && pageSize * pageNo < total}}">
-      <view class="weda-list-view__more-text" bindtap="handleNext">加载更多</view>
-    </block>
-    <!-- 触底刷新 -->
-    <block wx:elif="{{pagination==='bottomLoad'}}">
-      <view class="weda-list-view__bottom-load" id="weda-list-view_sign">
-        <view class="weda-list-view__more-symbol" wx:if="{{loading}}">
-          <view class="weda-list-view__symbol-item"></view>
-          <view class="weda-list-view__symbol-item"></view>
-          <view class="weda-list-view__symbol-item"></view>
-        </view>
-      </view>
-    </block>
-    <!-- 分页器 -->
-    <block wx:elif="{{pagination==='pagination'}}">
-      <view class="weda-list-view__more-pagination">
-        <view class="weda-list-view__pagination-pre {{pageNo > 1 ? 'active': ''}}" bindtap="handlePre">
-          <image class="weda-list-view__pagination-icon" src='arrow-right-line.svg' />
-          上一页
-        </view>
-        <view class="weda-list-view__pagination-text">{{pageStr}}</view>
-        <view class="weda-list-view__pagination-next {{pageSize * pageNo < total ? 'active' : ''}}"
-          bindtap="handleNext">
-          <image class="weda-list-view__pagination-icon" src='arrow-right-line.svg' />
-          下一页
-        </view>
-      </view>
-    </block>
-    <block wx:else></block>
-  </view>
-</scroll-view>

package/src/mp/components/internals/listView/index.wxss

@@ -1,150 +0,0 @@
-/* weda_list_view */
-
-.weda-list-view__containor {
-  background: #fff;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-}
-
-/* 卡片列表 */
-.weda-list-view-card {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: 6rpx;
-}
-
-/* 加载更多 */
-.weda-list-view__containor .weda-list-view__more {
-  width: 100%;
-}
-
-.weda-list-view__containor .weda-list-view__more .weda-list-view__more-text {
-  padding-top: 20rpx;
-  padding-bottom: 28rpx;
-  font-size: 24rpx;
-  line-height: 44rpx;
-  color: rgba(0, 0, 0, 0.4);
-  text-align: center;
-  box-sizing: border-box;
-}
-
-/* 加载更多 ... */
-.weda-list-view__containor .weda-list-view__more {
-  background: #fff;
-}
-
-.weda-list-view__bottom-load {
-  padding-top: 1px;
-}
-
-.weda-list-view__containor .weda-list-view__more .weda-list-view__more-symbol {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 40rpx;
-  padding-bottom: 36rpx;
-  box-sizing: border-box;
-}
-
-.weda-list-view__containor .weda-list-view__more .weda-list-view__symbol-item {
-  width: 16rpx;
-  height: 16rpx;
-  background: #c4c4c4;
-  margin-left: 12rpx;
-  border-radius: 50%;
-}
-
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__symbol-item:first-child {
-  width: 12rpx;
-  height: 12rpx;
-  margin-left: 0;
-}
-
-/* 加载更多 分页 */
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__more-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  padding: 20rpx 36rpx 24rpx 32rpx;
-  box-sizing: border-box;
-}
-
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-pre,
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-next {
-  font-size: 24rpx;
-  line-height: 48rpx;
-  color: rgba(0, 0, 0, 0.4);
-  padding: 0 48rpx;
-}
-
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-pre.active,
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-next.active {
-  color: rgba(0, 0, 0, 0.9);
-}
-
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-pre
-  .weda-list-view__pagination-icon,
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-next
-  .weda-list-view__pagination-icon {
-  position: absolute;
-  width: 48rpx;
-  height: 48rpx;
-  top: 20rpx;
-  opacity: 0.2;
-}
-
-.weda-list-view__containor
-  .weda-list-view__more
-  .active.weda-list-view__pagination-pre
-  .weda-list-view__pagination-icon,
-.weda-list-view__containor
-  .weda-list-view__more
-  .active.weda-list-view__pagination-next
-  .weda-list-view__pagination-icon {
-  opacity: 1;
-}
-
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-pre
-  .weda-list-view__pagination-icon {
-  left: 32rpx;
-  transform: rotate(180deg);
-}
-
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-next
-  .weda-list-view__pagination-icon {
-  right: 36rpx;
-}
-
-.weda-list-view__containor
-  .weda-list-view__more
-  .weda-list-view__pagination-text {
-  font-size: 24rpx;
-  line-height: 44rpx;
-  color: rgba(0, 0, 0, 0.4);
-}
-
-.split {
-  height: 40rpx;
-}

package/src/mp/components/internals/listView/more-line.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z" fill="#09121F"/>
-</svg>