@cloudbase/weda-ui 0.2.8 → 0.2.12

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 };

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/MultipleSelect.jsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { SelectMultiple } from 'tea-component';
+
+import SelectContainer from './SelectContainer';
+
+import { normalProps } from './props/defaultProps';
+import { propTypes } from './props/propsTypes';
+
+const MultipleSelect = ({
+  // 系统属性
+  id,
+  style,
+  className,
+  events,
+  // weda 组件属性
+  label,
+  labelVisible,
+  layout,
+  requiredFlag,
+  decorator,
+  // tea组件属性
+  value,
+  placeholder,
+  disabled,
+  onChange,
+  clearable,
+  appearance,
+  allOption,
+  matchButtonWidth,
+  virtual,
+  searchable,
+  size,
+  options,
+  // 业务属性
+  isModelApp,
+}) => {
+  const onSelectChange = (values) => {
+    // @ts-ignore
+    events.change && events.change({ value: values });
+    if (onChange) {
+      onChange(values);
+    }
+  };
+
+  const multipleSelectProps = {
+    placeholder,
+    disabled,
+    clearable,
+    appearance,
+    key: id,
+    options,
+    onChange: onSelectChange,
+    matchButtonWidth,
+    searchable,
+    size,
+    defaultValue: value || [],
+    allOption,
+    staging: false,
+    virtual,
+  };
+
+  if (isModelApp) {
+    return <SelectMultiple {...multipleSelectProps} />;
+  }
+  return (
+    <SelectContainer
+      style={style}
+      className={className}
+      label={label}
+      labelVisible={labelVisible}
+      layout={layout}
+      // @ts-ignore
+      multiCell={false}
+      requiredFlag={requiredFlag}
+      decorator={decorator}
+      id={id}
+    >
+      <SelectMultiple {...multipleSelectProps} />
+    </SelectContainer>
+  );
+};
+MultipleSelect.propTypes = {
+  ...propTypes,
+};
+MultipleSelect.defaultProps = {
+  ...normalProps,
+};
+
+export default MultipleSelect;

package/src/web/components/form/enumSelect/NormalSelect.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { Select } from 'tea-component';
+
+import SelectContainer from './SelectContainer';
+
+import { multipleProps } from './props/defaultProps';
+import { propTypes } from './props/propsTypes';
+import { useSyncValue } from '../../../utils/useSyncValue';
+
+const { useState, useEffect } = React;
+
+
+
+const NormalSelect = ({
+  // 系统属性
+  id,
+  style,
+  className,
+  events,
+  // weda 组件属性
+  label,
+  labelVisible,
+  layout,
+  requiredFlag,
+  decorator,
+  // tea组件属性
+  value,
+  placeholder,
+  disabled,
+  onChange,
+  clearable,
+  appearance,
+  matchButtonWidth,
+  virtual,
+  searchable,
+  size,
+  options,
+  // 业务属性
+  isModelApp,
+}) => {
+  const [selectedValue, setSelectedValue] = useSyncValue(value);
+
+  const onSelectChange = (value) => {
+    // @ts-ignore
+    setSelectedValue(value);
+    events.change && events.change({ value });
+    if (onChange) {
+      onChange(value || '');
+    }
+  };
+
+  const singleSelectProps = {
+    placeholder,
+    disabled,
+    clearable,
+    appearance,
+    key: id,
+    options,
+    onChange: onSelectChange,
+    value: selectedValue,
+    matchButtonWidth,
+    virtual,
+    searchable,
+    size,
+  };
+
+  if (isModelApp) {
+    return <Select {...singleSelectProps} />;
+  }
+  return (
+    <SelectContainer
+      style={style}
+      className={className}
+      label={label}
+      labelVisible={labelVisible}
+      layout={layout}
+      // @ts-ignore
+      multiCell={false}
+      requiredFlag={requiredFlag}
+      decorator={decorator}
+      id={id}
+    >
+      <Select {...singleSelectProps} />
+    </SelectContainer>
+  );
+};
+NormalSelect.propTypes = {
+  ...propTypes,
+};
+NormalSelect.defaultProps = {
+  ...multipleProps,
+};
+
+export default NormalSelect;

package/src/web/components/form/enumSelect/SelectContainer.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import { selectContainerPropsTypes } from './props/propsTypes';
+import { renderDecorator } from '../renderDecorator';
+
+const SelectContainer = ({
+  style,
+  className,
+  // weda 组件属性
+  id,
+  label,
+  labelVisible,
+  layout,
+  requiredFlag,
+  decorator,
+  children,
+}) => {
+  const cls = classNames({
+    'weda-ui': true,
+    [className]: className,
+  });
+  const subCls = classNames({
+    'weui-cell': true,
+    'weui-cell_active': true,
+    'weui-cell_form': true,
+    'weui-cell_disabled': true,
+  });
+  const SelectComponent = <div className={subCls}>{children}</div>;
+  return renderDecorator(
+    SelectComponent,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+  });
+};
+SelectContainer.propTypes = selectContainerPropsTypes;
+export default SelectContainer;