@cloudbase/weda-ui 0.2.10 → 0.2.14

package/src/mp/components/form/uploaderFile/index.wxml

@@ -0,0 +1,46 @@
+<view class="weda-uploader-files {{extClass}}">
+    <view class="weda-uploader-files__hd">
+        <view class="weda-uploader-files__title" wx:if="{{labelVisible}}">{{label}}</view>
+        <view>
+            <button class="weui-btn weda-uploader-files__btn" bindtap="uploadFile">上传文件</button>
+            <view wx:if="{{maxCount!=1}}" class="weda-uploader-files__tips">支持批量上传</view>
+            <view wx:else><slot name="tips"></slot></view>
+        </view>
+    </view>
+    <view class="weda-uploader-files__bd">
+        <view class="weda-uploader-files__files" wx-if="{{files.length > 0}}">
+            <block wx:for="{{files}}" wx:key="index">
+                <view class="weda-uploader-files__item">
+                    <view class="weda-uploader-files__item-left">
+                        <view class="weda-uploader-files__file-detail">
+                            <text class="weda-uploader-files__file-name">{{item.name}}</text>
+                            <view wx:if="{{item.status === 'success' || item.status === 'fail'}}" class="weda-uploader-files__file-status">
+                                <mp-icon wx:if="{{item.status === 'success' }}" icon="done2" size="{{16}}" color="#00A870" type="field"></mp-icon>
+                                <mp-icon wx:if="{{item.status === 'fail' }}" icon="close2" size="{{16}}" color="#E34D59" type="field"></mp-icon>
+                                <text class="weda-uploader-files__file-status--msg">{{item.status === 'success' ? '上传成功' : '上传失败'}}</text>
+                            </view>
+                        </view>
+                        <view class="weda-uploader-files__progress weui-progress" wx-if="{{item.status === 'pending' || item.status === 'uploading'}}">
+                            <view class="weui-progress__bar">
+                                <progress percent="{{item.percent}}" stroke-width="3" activeColor="#0052D9" backgroundColor="#E7E7E7" stroke-width="3"/>
+                            </view>
+                        </view>
+                        <view class="weda-uploader-files__file-foot">
+                            <div>
+                              <text wx-if="{{item.status === 'uploading' || item.status === 'pending'}}">{{item.status === 'uploading' ? item.uploaded : '0K' }}/</text>
+                              <text>{{item.size}}</text>
+                            </div>
+                            <div wx-if="{{item.status === 'uploading' || item.status === 'pending'}}">{{item.status === 'pending' ? '等待上传' : '上传中'}}</div>
+
+                        </view>
+                    </view>
+                    <view class="weda-uploader-files__btn-group">
+                        <image wx-if="{{item.status === 'success'&&downloadVisible}}" data-item="{{item}}"  bindtap="downloadFile" class="weda-uploader-files__icon" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4cba5da1-cde4-40c6-a075-86eff22858a4.svg"></image>
+                        <image wx-if="{{item.status === 'fail'}}" data-item="{{item}}"  bindtap="reload" class="weda-uploader-files__icon" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/af5486eb-65e0-4536-8e51-6c68a17b71ac.svg"></image>
+                        <image class="weda-uploader-files__icon" data-item="{{item}}" bindtap="onDelete" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/2372f6a8-2f6a-4f30-92bf-73c62a5c0ae7.svg"></image>
+                    </view>
+                </view>
+            </block>
+        </view>
+    </view>
+</view>

package/src/mp/components/form/uploaderFile/index.wxss

@@ -0,0 +1,105 @@
+@import '../../../style/weda-ui.wxss';
+.weda-uploader-files {
+  width: 100%;
+  background-color: #f6f6f6;
+}
+.weda-uploader-files__hd {
+  width: 100%;
+  padding: 24px 20px 8px 20px;
+  display: flex;
+  background-color: #ffffff;
+}
+
+.weda-uploader-files__btn::after {
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  transform: none;
+}
+.weda-uploader-files__title {
+  font-size: 14px;
+  line-height: 20px;
+  color: #000;
+  margin-right: 20px;
+  padding-top: 6px;
+}
+.weda-uploader-files__btn {
+  margin: 0;
+  width: 88px;
+  height: 32px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 22px;
+  color: #000;
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  font-weight: normal;
+  background-color: transparent;
+}
+.weda-uploader-files__tips {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.4);
+}
+.weda-uploader-files__item {
+  width: 100%;
+  margin-top: 8px;
+  padding: 16px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.weda-uploader-files__item-left {
+  flex: 1;
+  margin-right: 16px;
+}
+.weda-uploader-files__file-detail {
+  display: flex;
+  align-items: center;
+}
+.weda-uploader-files__file-name {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.9);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+.weda-uploader-files__file-status {
+  margin-left: 24px;
+  width: 28%;
+}
+.weda-uploader-files__file-status--msg {
+  margin-left: 4px;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.9);
+}
+.weda-uploader-files__file-foot {
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-top: 8px;
+  display: flex;
+  justify-content: space-between;
+}
+.weda-uploader-files__btn-group {
+  display: flex;
+}
+.weda-uploader-files__icon {
+  width: 24px;
+  height: 24px;
+}
+.weda-uploader-files__icon + .weda-uploader-files__icon {
+  margin-left: 16px;
+}
+.weda-uploader-files__progress {
+  margin-top: 4px;
+}

package/src/mp/components/text/index.js

@@ -7,6 +7,10 @@ Component({
       type: String,
       value: '',
     },
+    level: {
+      type: String,
+      value: '0',
+    },
     maxLines: {
       type: Number,
       value: 2,
@@ -23,10 +27,39 @@ Component({
       type: String,
       value: '',
     },
+    textAlign: {
+      type: String,
+      value: '',
+    },
+    textColor: {
+      type: String,
+      value: '',
+    },
     style: {
       type: String,
       value: '',
     },
   },
   methods: {},
+  observers: {
+    level: function (level) {
+      const levelName = `level_${level}`;
+      if (level !== '0') {
+        this.setData({ levelName });
+      }
+    },
+    'textAlign,textColor': function (textAlign, textColor) {
+      let style = this.properties.style;
+      // 添加文本颜色属性
+      if (textColor !== '') {
+        style = `${style};color:${textColor}`;
+      }
+
+      // 添加对齐属性
+      if (textAlign !== '') {
+        style = `${style};text-align: ${textAlign}`;
+      }
+      this.setData({ style });
+    },
+  },
 });

package/src/mp/components/text/index.wxml

@@ -1,5 +1,5 @@
 <text 
-  class="weda-text weda-ui {{className}}" 
+  class="weda-text weda-ui {{className}} {{levelName}}" 
   id="{{id}}"
   user-select="{{userSelect}}"
   style="-webkit-line-clamp:{{maxLines}}; white-space: {{ space ? 'pre-warp' : 'pre-line'}}; {{style}}"

package/src/mp/components/text/index.wxss

@@ -6,3 +6,21 @@
   /* -webkit-line-clamp: 1; */
   /* white-space: pre-line; */
 }
+.weda-text.level_1 {
+  font-size: 64rpx !important;
+}
+.weda-text.level_2 {
+  font-size: 56rpx !important;
+}
+.weda-text.level_3 {
+  font-size: 48rpx !important;
+}
+.weda-text.level_4 {
+  font-size: 40rpx !important;
+}
+.weda-text.level_5 {
+  font-size: 32rpx !important;
+}
+.weda-text.level_6 {
+  font-size: 24rpx !important;
+}

package/src/mp/index.json

@@ -12,6 +12,7 @@
     "Textarea": "components/form/textarea/index",
     "Select": "components/form/select/index",
     "Uploader": "components/form/uploader/index",
+    "UploaderFile": "components/form/uploaderFile/index",
     "Container": "components/container/index",
     "Slot": {
       "type": "native",

package/src/mp/utils/platform.js

@@ -0,0 +1,20 @@
+/**
+ * 文件字节转换
+ */
+export const transSize = (size) => {
+  const b = parseInt(size) || 0;
+  const getBig = (d) => Math.ceil(d / 1024) || 0;
+  if (b < 1024) {
+    return `${size}B`;
+  }
+  const k = getBig(size);
+  if (k < 1024) {
+    return `${k}K`;
+  }
+  const m = getBig(k);
+  if (m < 1024) {
+    return `${m}M`;
+  }
+  const g = getBig(m);
+  return `${g}G`;
+};

package/src/mp/utils/tcb.js

@@ -1,3 +1,14 @@
 export async function getCloudInstance() {
   return await getApp().app.cloud.getCloudInstance();
 }
+
+/**
+ * 获取单个临时链接
+ * 单个cos文件，返回字符串
+ * 多个cos文件，返回 {fileID: src} 这样的对象
+ */
+export async function getTempFileURL(data) {
+  if (getApp().app.cloud.getTempFileURL) {
+    return await getApp().app.cloud.getTempFileURL(data);
+  }
+}

package/src/web/actions/showModal/{index.jsx → index.tsx}

@@ -1,6 +1,56 @@
+import * as ReactDOM from 'react-dom';
 import * as React from 'react';
-import { Modal, Button, Text } from 'tea-component';
-import 'tea-component/es/tea.css';
+import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import { Modal, Button, Text, ModalProps, ConfigProvider } from 'tea-component';
+import type { ModalShowHandle, ModalShowOptions } from 'tea-component/lib/modal/ModalShow';
+
+
+interface ModalShowInstance {
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ModalShow = forwardRef(function ModalShow(
+  props: ModalProps,
+  ref: React.Ref<ModalShowInstance>
+) {
+  const [visible, setVisible] = useState(false);
+
+  // 渲染之后，马上显示
+  useEffect(() => {
+    setVisible(true);
+  }, []);
+
+  // 实例 ref 到外部
+  useImperativeHandle(ref, () => ({ setVisible }));
+
+  return <Modal {...props} visible={visible} />;
+});
+
+
+function show(options: ModalShowOptions): ModalShowHandle {
+  const el = document.createElement("div");
+
+  const instanceRef = React.createRef<ModalShowInstance>();
+
+  ReactDOM.render(
+    <ConfigProvider classPrefix="wedatea2td">
+      <ModalShow
+        {...options}
+        ref={instanceRef}
+        onExited={() => ReactDOM.unmountComponentAtNode(el)}
+      />
+    </ConfigProvider>,
+    el
+  );
+
+  return {
+    destroy: () => {
+      if (instanceRef.current) {
+        instanceRef.current.setVisible(false);
+      }
+    },
+  };
+}
 
 export default async function showModal({ data }) {
   const {
@@ -19,7 +69,7 @@ export default async function showModal({ data }) {
   return new Promise((resolve) => {
     const base = { cancel: false, confirm: false, content: null };
 
-    const modal = Modal.show({
+    const modal = show({
       caption: title,
       children: (
         <>

package/src/web/components/auth/index.js

@@ -17,7 +17,7 @@ export default function Auth({ className }) {
     [className]: className,
   });
 
-  const [authState, setAuthState] = React.useState(AUTHSTATE.SignIn);
+  const [authState, setAuthState] = React.useState(AUTHSTATE.SIGNIN);
   const [user, setUser] = React.useState({});
   const [tcb, setTcb] = React.useState(undefined);
 
@@ -42,7 +42,7 @@ export default function Auth({ className }) {
   // console.log('<<<<<<<wedaaaa', tcb);
 
   return tcb ? (
-    authState === AUTHSTATE.SignedIn && user ? (
+    authState === AUTHSTATE.SIGNEDIN && user ? (
       <div className={cls}>
         <header className="tcb-header">
           {/* Hello, {user.uid} */}

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

@@ -9,3 +9,12 @@
 .weda-button.weda-button-mini {
   font-size: smaller;
 }
+.weda-button.weda-button-large {
+  font-size: large;
+  display: block;
+  padding-left: 14px;
+  padding-right: 14px;
+  text-align: center;
+  width: 100%;
+}
+

package/src/web/components/button/{index.jsx → index.tsx}

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { Button as TeaButton, ConfigProvider } from 'tea-component';
+import { Button as TeaButton, ButtonProps, ConfigProvider } from 'tea-component';
 import classNames from '../../utils/classnames';
+import { usePlatform } from '../../utils/platform';
+import { CommonPropsType, unknownFunction } from '../../types';
 
 import './index.css';
 
-import { usePlatform } from '../../utils/platform';
-
 // 不用 react-weui 而直接用底层实现的原因是 react-weui 不能支持表单类型
-export default function Button({
+const Button = ({
   text = '按钮',
   size = 'default',
   type = 'primary',
@@ -16,16 +15,17 @@ export default function Button({
   formType,
   loading = false,
   disabled = false,
-  events = {},
+  events = ({} as Record<string, unknownFunction>),
   className,
   style,
   id,
-}) {
-  const platform = usePlatform();
-  const isH5 = platform === 'h5';
+}: PropsType) => {
+  const platform: string = usePlatform();
+  const isH5: boolean = platform === 'h5';
   const cls = classNames({
     'weda-ui': true,
     'weda-button': true,
+    'weda-button-large': size === 'large',
     'weda-button-mini': size === 'mini',
     'weui-btn': isH5,
     'weui-btn_mini': isH5 && size === 'mini',
@@ -57,8 +57,6 @@ export default function Button({
   );
 }
 
-let teaType = type;
-if(teaType === 'warn') teaType = 'error';
 return (
   <ConfigProvider classPrefix="wedatea2td">
     <TeaButton
@@ -66,7 +64,7 @@ return (
       onClick={onClick}
       disabled={disabled}
       htmlType={formType}
-      type={teaType}
+      type={toTeaButtonType(type)}
       style={style}
       className={cls}
       id={id}
@@ -77,52 +75,40 @@ return (
 );
 }
 
-Button.propTypes = {
+function toTeaButtonType(type: PropsType['type'] ): ButtonProps['type'] {
+  if(type === 'primary') return type;
+  if(type === 'warn') return 'error';
+  if(type === 'default') return 'primary';
+  return 'primary';
+}
+
+export interface PropsType extends CommonPropsType {
   /**
    * 内容
    */
-  text: PropTypes.string,
-
+  text?: string;
   /**
    * 样式类型
    */
-  type: PropTypes.oneOf(['primary', 'warn', 'default']),
-
+  type?: "primary" | "warn" | "default";
   /**
    * 大小
    */
-  size: PropTypes.oneOf(['default', 'mini']),
-
+  size?: "default" | "mini" | "large";
   /**
    * 是否禁用
    */
-  disabled: PropTypes.bool,
-
+  disabled?: boolean;
   /**
    * 加载中
    */
-  loading: PropTypes.bool,
-
-  /**
-   * 组件事件
-   */
-  events: PropTypes.objectOf(PropTypes.func),
+  loading?: boolean;
 
   /**
    * 用于 form 类型
    */
-  formType: PropTypes.oneOf(['button', 'submit', 'reset']),
-
-  className: PropTypes.string,
-  contentSlot: PropTypes.string,
-  style: PropTypes.object,
-  id: PropTypes.string,
-};
+  formType?: "button" | "submit" | "reset";
+  contentSlot?: string;
+}
 
-/**
- * 默认属性
- */
-Button.defaultProps = {
-  type: 'primary',
-  size: 'default',
-};
+export default Button;

package/src/web/components/container/{index.jsx → index.tsx}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 
 export default function Container({
@@ -9,7 +9,7 @@ export default function Container({
   className,
   style,
   id
-}) {
+}: PropsType) {
   return (
     <div
       role="container"
@@ -29,11 +29,7 @@ export default function Container({
   );
 }
 
-Container.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.any,
-  title: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-  id: PropTypes.string,
-  style: PropTypes.object
-};
+export interface PropsType extends CommonPropsType {
+  title?: string;
+
+}

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { ConfigProvider, Drawer, DrawerProps } from 'tea-component';
+import { CommonPropsType } from '../../types';
+
+const TeaDrawer = ({
+  size,
+  title,
+  style,
+  events,
+  visible,
+  subtitle,
+  showMask,
+  className,
+  placement,
+  extraSlot,
+  footerSlot,
+  childrenSlot,
+  disableCloseIcon,
+  outerClickClosable,
+}: PropsType) => {
+  const eventsList = {
+    onClose: () => events?.onClose && events.onClose({}),
+    onExited: () => events?.onExited && events.onExited({}),
+  };
+  return (
+    <ConfigProvider classPrefix="wedatea2td">
+      <Drawer
+        size={size}
+        title={title}
+        style={style}
+        visible={visible}
+        extra={extraSlot}
+        footer={footerSlot}
+        subtitle={subtitle}
+        showMask={showMask}
+        className={className}
+        placement={placement}
+        disableCloseIcon={disableCloseIcon}
+        outerClickClosable={outerClickClosable}
+        {...eventsList}
+        >
+        {childrenSlot}
+      </Drawer>
+    </ConfigProvider>
+  );
+};
+
+export interface PropsType extends CommonPropsType, Pick<DrawerProps, 'size'|'title'|'showMask'|'placement'|'disableCloseIcon'|'outerClickClosable'|'subtitle'> {
+  visible: boolean;
+  title?: string;
+  extraSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  childrenSlot?: React.ReactNode;  
+}
+
+export default TeaDrawer;
+export { TeaDrawer };