@cloudbase/weda-ui 0.2.11 → 0.2.15

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}
@@ -75,54 +73,42 @@ return (
     </TeaButton>
   </ConfigProvider>
 );
+};
+
+function toTeaButtonType(type: PropsType['type'] ): ButtonProps['type'] {
+  if(type === 'primary') return type;
+  if(type === 'warn') return 'error';
+  if(type === 'default') return 'primary';
+  return 'primary';
 }
 
-Button.propTypes = {
+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 };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
 
 import classNames from '../../../utils/classnames';
@@ -8,23 +7,24 @@ import isObjectEqual from '../../../utils/isObjectEqual';
 import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
+import { CommonFormPropsType } from '../types';
 
 export default function Checkbox({
   // 系统属性
   id,
   className,
   style,
-  events,
+  events = {},
   // 组件属性
-  name,
-  label,
+  name = 'formCheckbox',
+  label = '标题',
   labelVisible = true,
-  range,
-  layout,
-  disabled,
-  requiredFlag,
+  range = [],
+  layout = 'horizontal',
+  disabled = false,
+  requiredFlag = false,
   decorator
-}) {
+}: PropsType) {
   const cls = classNames({
     'weda-ui': true,
     'weda-checkbox': true,
@@ -45,7 +45,7 @@ export default function Checkbox({
     : range.filter(({checked}) => checked).map(({value}) => value)
   );
   // 两次range不同时, 需要刷新checkedItems
-  const prevRangeRef = React.useRef();
+  const prevRangeRef = React.useRef<object[]>();
   React.useEffect(() => {
     if (!isObjectEqual(prevRangeRef.current, range)) {
       prevRangeRef.current = range;
@@ -64,15 +64,17 @@ export default function Checkbox({
       e.stopPropagation();
       const checked = !checkedItems[value];
       const newMap = Object.assign({}, checkedItems, { [value]: checked });
-      setCheckedItems(newMap);
-      events.change(
-        {
-          value: Object.entries(newMap)
-            .filter(([, checked]) => checked)
-            .map(([value]) => value),
-        },
-        { originEvent: e }
-      );
+      if (!disabled) {
+        setCheckedItems(newMap);
+        events.change(
+          {
+            value: Object.entries(newMap)
+              .filter(([, checked]) => checked)
+              .map(([value]) => value),
+          },
+          { originEvent: e }
+        );
+      }
     };
     return onChange;
   };
@@ -164,32 +166,6 @@ export default function Checkbox({
   );
 }
 
-Checkbox.propTypes = {
-  // 系统属性
-  id: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-  // 组件属性
-  name: PropTypes.string,
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  range: PropTypes.array,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  disabled: PropTypes.bool,
-  requiredFlag: PropTypes.bool,
-  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node])
-};
-
-Checkbox.defaultProps = {
-  // 系统属性
-  events: {},
-  // 组件属性
-  name: 'formCheckbox',
-  label: '标题',
-  labelVisible: true,
-  range: [],
-  layout: 'horizontal',
-  disabled: false,
-  requiredFlag: false,
-};
+export interface PropsType extends CommonFormPropsType {
+  range?: {label: string, value: any; [key: string]: any}[];
+}

package/src/web/components/form/enumSelect/{NormalSelect.jsx → NormalSelect.tsx}

@@ -5,18 +5,11 @@ import SelectContainer from './SelectContainer';
 
 import { multipleProps } from './props/defaultProps';
 import { propTypes } from './props/propsTypes';
+import { useSyncValue } from '../../../utils/useSyncValue';
 
 const { useState, useEffect } = React;
 
-const useValue = (value) => {
-  const [selectedValue, setSelectedValue] = useState('');
 
-  useEffect(() => {
-    setSelectedValue(value);
-  }, [value]);
-
-  return [selectedValue, setSelectedValue];
-};
 
 const NormalSelect = ({
   // 系统属性
@@ -45,7 +38,7 @@ const NormalSelect = ({
   // 业务属性
   isModelApp,
 }) => {
-  const [selectedValue, setSelectedValue] = useValue(value);
+  const [selectedValue, setSelectedValue] = useSyncValue(value);
 
   const onSelectChange = (value) => {
     // @ts-ignore

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import './index.css';
+import {ConfigProvider, Form as TeaForm} from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import { CommonFormPropsType } from '../types';
+
+export default function Form({
+  // 系统属性
+  className,
+  // 组件属性
+  // title,
+  // description,
+  // tips,
+  contentSlot,
+  // buttonSlot,
+  style,
+  id,
+}) {
+  const platform = usePlatform();
+  const cls = classNames({
+    'weda-ui': true,
+    'weda-form': true,
+    'weui-form': platform === 'h5',
+    [className]: className,
+  });
+  if(platform === 'pc') {
+    return (
+      <ConfigProvider classPrefix="wedatea2td">
+        {/** @ts-expect-error tea form id */}
+        <TeaForm className={cls} style={style} id={id}>
+          {contentSlot}
+      </TeaForm>
+    </ConfigProvider>
+    );
+  }
+  return (
+    <div className={cls} style={style} id={id}>
+      <div className="weui-cells__group weui-cells__group_form">
+        {contentSlot}
+      </div>
+    </div>
+  );
+}
+
+export interface PropsType extends CommonFormPropsType {
+  contentSlot?: any;
+}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 
 import classNames from '../../../utils/classnames';
 import './index.css';
 import { usePlatform } from '../../../utils/platform';
 import { ConfigProvider, Form as TeaForm } from 'tea-component';
+import { CommonFormPropsType } from '../types';
 
 export default function FormCell({
   className,
@@ -15,7 +15,7 @@ export default function FormCell({
   multiCell,
   requiredFlag,
   size
-}) {
+}: PropsType) {
   const platform = usePlatform();
   const isFlex = layout !== 'vertical';
 
@@ -78,14 +78,7 @@ export default function FormCell({
   );
 }
 
-FormCell.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  layout: PropTypes.string,
-  children: PropTypes.any,
-  multiCell: PropTypes.bool,
-  requiredFlag: PropTypes.bool,
-  size: PropTypes.string
-};
+export interface PropsType extends CommonFormPropsType {
+  multiCell?: boolean;
+  size?: string;
+}

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

@@ -0,0 +1,41 @@
+/*  ios safari 特别是小屏幕 iphone SE 之流
+    weui自带cell的padding会把input压到很小，
+    容易点不到，需要特殊处理
+    START
+ */
+
+/*
+把weui-cell 的padding还回到input
+*/
+.weda-ui.weda-input input.weui-input {
+    padding: 28px 16px;
+}
+
+.weda-ui.weda-input .weui-cell.weda-formcells__label {
+    padding: 16px;
+}
+.weda-ui.weda-input .weda-formcells__label.weui-cell label {
+    padding: 0;
+}
+.weda-ui.weda-input .weui-cell {
+    padding: 0;
+}
+
+.weda-ui.weda-input .weui-btn_input-clear {
+    padding-right: 16px;
+}
+
+/**
+ * END
+ */
+
+/*
+    背景颜色设置问题
+    START
+*/
+.weda-ui .wedatea2td-input {
+    background: inherit;
+}
+/**
+ * END
+ */