@cloudbase/weda-ui 0.2.10 → 0.2.14

package/src/web/components/index.js

@@ -1,4 +1,36 @@
 import '../wedatheme/style-package/index.css';
+import loadable from '@loadable/component';
+import { fallback } from '../utils/loading-fallback';
+
+// export const Button = loadable(() => import('./button'), {fallback});
+// export const Text = loadable(() => import('./text'), {fallback});
+// export const Container = loadable(() => import('./container'), {fallback});
+// export const Image = loadable(() => import('./image'), {fallback});
+// export const Slot = loadable(() => import('./slot'), {fallback});
+// export const ScrollView = loadable(() => import('./scrollView'), {fallback});
+// export const Swiper = loadable(() => import('./swiper'), {fallback});
+// export const Modal = loadable(() => import('./modal'), {fallback});
+// export const RichText = loadable(() => import('./richText'), {fallback});
+// export const RichTextView = loadable(() => import('./richTextView'), {fallback});
+// export const Link = loadable(() => import('./link'), {fallback});
+// export const Drawer = loadable(() => import('./drawer'), {fallback});
+// export const UploaderView = loadable(() => import('./uploaderView'), {fallback});
+// // picker
+// export const Picker = loadable(() => import('./picker/picker'), {fallback});
+// export const DatePicker = loadable(() => import('./picker/datePicker'), {fallback});
+// export const TimePicker = loadable(() => import('./picker/timePicker'), {fallback});
+// // form
+// export const Form = loadable(() => import('./form/form'), {fallback});
+// export const Input = loadable(() => import('./form/input'), {fallback});
+// export const Textarea = loadable(() => import('./form/textarea'), {fallback});
+// export const Checkbox = loadable(() => import('./form/checkbox'), {fallback});
+// export const Radio = loadable(() => import('./form/radio'), {fallback});
+// export const Switch = loadable(() => import('./form/switch'), {fallback});
+// export const Select = loadable(() => import('./form/select'), {fallback});
+// export const Uploader = loadable(() => import('./form/uploader'), {fallback});
+// export const Tips = loadable(() => import('./form/tips'), {fallback});
+// export const EnumSelect = loadable(() => import('./form/enumSelect'), {fallback});
+// export const Tabs = loadable(() => import('./tabs'), {fallback});
 
 export { default as Button } from './button';
 export { default as Text } from './text';
@@ -13,7 +45,8 @@ export { default as RichTextView } from './richTextView';
 export { default as Link } from './link';
 export { default as Drawer } from './drawer';
 export { default as UploaderView } from './uploaderView';
-// picker
+export { default as UploaderFileView } from './uploaderFileView';
+
 export { default as Picker } from './picker/picker';
 export { default as DatePicker } from './picker/datePicker';
 export { default as TimePicker } from './picker/timePicker';
@@ -26,9 +59,11 @@ export { default as Radio } from './form/radio';
 export { default as Switch } from './form/switch';
 export { default as Select } from './form/select';
 export { default as Uploader } from './form/uploader';
+export { default as UploaderFile } from './form/uploaderFile';
 export { default as Tips } from './form/tips';
 export { default as Tabs } from './tabs';
 export { default as EnumSelect } from './form/enumSelect';
+
 // open
 // import Auth from './auth';
 

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

@@ -1,7 +1,23 @@
 import * as React from 'react';
+import { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 import './index.css';
-import * as PropTypes from 'prop-types';
+
+export interface PropsType extends CommonPropsType {
+  /**
+   * 内容
+   */
+   content?: string;
+   /**
+    * 链接地址
+    */
+   url?: string;
+   /**
+    * 参数
+    */
+   params?: {key: string, value: string}[];
+   contentSlot?: React.ReactNode;
+}
 
 // 所有绝对地址直接交由浏览器，新开窗口交由浏览器
 // 当前窗口相对地址交给平台
@@ -13,7 +29,7 @@ export default function Link({
   className,
   contentSlot,
   params = [], // TODO 格式定义
-}) {
+}: PropsType) {
   url = url.trim();
   const cls = classNames({
     'weda-link': true,
@@ -97,37 +113,4 @@ export default function Link({
       {content}
     </a>
   );
-}
-
-Link.propTypes = {
-  // 系统属性
-  /**
-   * 类名
-   */
-  className: PropTypes.string,
-  /**
-   * 事件
-   */
-  events: PropTypes.objectOf(PropTypes.func),
-  /**
-   * 内联样式
-   */
-  style: PropTypes.object,
-  // 组件属性
-  /**
-   * 内容
-   */
-  content: PropTypes.string,
-  /**
-   * 链接地址
-   */
-  url: PropTypes.string,
-  /**
-   * 参数
-   */
-  params: PropTypes.array,
-
-  contentSlot: PropTypes.any,
-};
-
-Link.defaultProps = {};
+}

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

@@ -1,8 +1,19 @@
 import * as React from 'react';
-import { Modal, Button } from 'tea-component';
+import { Modal, Button, ModalProps, ConfigProvider } from 'tea-component';
+import { unknownFunction } from '../../types';
 import classNames from '../../utils/classnames';
 
-export default function WeDaModal(_props) {
+export interface PropTypes extends ModalProps {
+  content: string,
+  customButton: React.ReactNode,
+  customContent: React.ReactNode,
+  isDefaultButton: boolean,
+  emit?: unknownFunction,
+  events: Record<string, unknownFunction>,
+
+}
+
+export default function WeDaModal(_props: PropTypes) {
   const {
     className,
     content,
@@ -16,6 +27,7 @@ export default function WeDaModal(_props) {
   } = _props;
 
   return (
+  <ConfigProvider classPrefix="wedatea2td">
     <Modal
       className={classNames('weda-ui', 'lcap-modal', 'container', className)}
       visible={visible}
@@ -23,23 +35,24 @@ export default function WeDaModal(_props) {
         emit('close', {});
       }}
       {...props}
-    >
+      >
       <Modal.Body>{content ? content : customContent}</Modal.Body>
       <Modal.Footer>
         {isDefaultButton ? (
           <Button
-            type="primary"
-            onClick={() => {
-              emit('confirm', {});
-              // events.confirm();
-            }}
+          type="primary"
+          onClick={() => {
+            emit('confirm', {});
+            // events.confirm();
+          }}
           >
             确定
           </Button>
         ) : (
           customButton
-        )}
+          )}
       </Modal.Footer>
     </Modal>
+  </ConfigProvider>
   );
 }

package/src/web/components/picker/{datePicker.jsx → datePicker.tsx}

@@ -1,10 +1,18 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import weui from '../../utils/weui';
 
 import classNames from '../../utils/classnames';
+import { CommonPropsType } from '../../types';
 
-export default function DatePicker(props) {
+export interface PropsType extends CommonPropsType {
+  start: string;
+  end: string;
+  defaultValue: string;
+  title: string;
+  children?: React.ReactNode|undefined
+}
+
+export default function DatePicker(props: PropsType) {
   const { start, end, defaultValue, title, children, className } = props;
   const click = function () {
     let fixedDefaultValue = undefined;
@@ -37,13 +45,4 @@ export default function DatePicker(props) {
       {children}
     </div>
   );
-}
-
-DatePicker.propTypes = {
-  start: PropTypes.string,
-  end: PropTypes.string,
-  defaultValue: PropTypes.string,
-  title: PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string,
-};
+}

package/src/web/components/picker/{picker.jsx → picker.tsx}

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import weui from '../../utils/weui';
-
 import classNames from '../../utils/classnames';
+import { CommonPropsType } from '../../types';
+
+export interface PropsType extends CommonPropsType {
+  title?: string
+}
 
-export default function Picker(props) {
+export default function Picker(props: PropsType) {
   const { title, children, className } = props;
   const click = function () {
     weui.picker(
@@ -53,10 +56,4 @@ export default function Picker(props) {
       {children}
     </div>
   );
-}
-
-Picker.propTypes = {
-  title: PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string,
-};
+}

package/src/web/components/picker/{timePicker.jsx → timePicker.tsx}

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import weui from '../../utils/weui';
 
 import classNames from '../../utils/classnames';
+import { CommonPropsType } from '../../types';
 
-export default function TimePicker(props) {
-  const { title, defaultValue, children, className } = props;
+export interface PropsType extends CommonPropsType {
+  defaultValue?: string;
+  title?: string;
+}
+export default function TimePicker(props: PropsType) {
+  const { title = '时间', defaultValue = '', children, className } = props;
 
   const click = function () {
     const hour = [];
@@ -49,16 +53,4 @@ export default function TimePicker(props) {
       {children}
     </div>
   );
-}
-
-TimePicker.propTypes = {
-  title: PropTypes.string,
-  defaultValue: PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string,
-};
-
-TimePicker.defaultProps = {
-  title: '时间',
-  defaultValue: '',
-};
+}

package/src/web/components/richText/index.jsx

@@ -1,10 +1,11 @@
+// @ts-ignore
 import React, { useEffect, useState } from 'react';
 import BraftEditor from 'braft-editor';
-import { useSetState } from 'react-use';
+import { useSetState } from '../../utils/useSetState';
 import * as PropsTypes from 'prop-types';
 import { ContentUtils } from 'braft-utils';
 import classNames from '../../utils/classnames';
-import FormCell from '../form/formcell';
+
 import { getCloudInstance, getTempFileURL } from '../../utils/tcb';
 import {
   message,
@@ -149,6 +150,7 @@ export default function RichText({
               }
             }}
             excludeControls={['media', 'fullscreen']}
+            /** @ts-ignore */
             extendControls={extendControls}
             handleKeyCommand={(command, editState) => {
               const newState = ContentUtils.handleKeyCommand(
@@ -194,6 +196,7 @@ export const CustomUploader = (props) => {
   const getBase64 = (file) => {
     const reader = new FileReader();
     reader.onloadend = () => {
+      // @ts-ignore
       setState({ previewImg: reader.result });
     };
     reader.readAsDataURL(file);

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import classNames from '../../utils/classnames';
+import { getTempFileURL } from '../../utils/tcb';
+import './index.css';
+import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
+import { CommonPropsType } from '../../types';
+
+export interface PropsType extends CommonPropsType {
+    value: string
+}
+
+export default function RichTextView({
+  value = '',
+  className,
+  style,
+  id
+}: PropsType) {
+  let parseValue = value;
+  try {
+    parseValue = JSON.parse(value);
+  } catch (e) {}
+  const cls = classNames({
+    'weda-ui': true,
+    'weda-RichTextView': true,
+    [className]: className,
+  });
+  const [displayValue, setDisplayValue] = useState('');
+  const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
+  const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
+
+  let tempValue = parseValue
+    .toString()
+    .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
+
+  const getSrc = async (img) => {
+    const url = img.replace(regex, '$1');
+    if (img.includes('cloud://')) {
+      const newURL = await getTempFileURL(url);
+      if (newURL) {
+        tempValue = tempValue.replace(new RegExp(url, 'g'), newURL);
+        setDisplayValue(tempValue);
+      }
+    }
+  };
+
+  useEffect(() => {
+    setDisplayValue(tempValue);
+    try {
+      const imgs = parseValue.match(regex);
+      if (imgs && imgs.length > 0) {
+        imgs.forEach((img) => {
+          getSrc(img);
+        });
+      }
+    } catch (e) {}
+  }, [value]);
+
+  return (
+    displayValue && (
+      <div className={cls} style={style}
+        id={id}
+      >
+        <div dangerouslySetInnerHTML={{ __html: displayValue }}></div>
+      </div>
+    )
+  );
+}

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

@@ -1,12 +1,22 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
+import { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 
+export interface PropsType extends CommonPropsType {
+  scrollX?: boolean;
+  scrollY?: boolean;
+  scrollTop?: number;
+  scrollLeft?: number;
+  scrollIntoView?: string;
+  upperThreshold?: number;
+  lowerThreshold?: number;
+  domRef?: any;
+}
+
 export default function ScrollView({
   id,
-  scrollY,
-  scrollX,
+  scrollX = false,
+  scrollY = true,
   style,
   scrollTop,
   scrollLeft,
@@ -23,7 +33,7 @@ export default function ScrollView({
   const [scrollLeftPos, setScrollLeftPos] = React.useState(0);
   const [scrollTopPos, setScrollTopPos] = React.useState(0);
 
-  const scrollViewRef = domRef || React.useRef(null);
+  const scrollViewRef = domRef || React.useRef<HTMLElement>(null);
 
   const handleOnScroll = function (e) {
     const detail = {
@@ -35,7 +45,6 @@ export default function ScrollView({
     const deltaY = scrollY ? e.target.scrollTop - scrollTopPos : 0;
     const deltaX = scrollX ? e.target.scrollLeft - scrollLeftPos : 0;
     let delta;
-    // console.log(">>>>", deltaY, deltaX,e.target.scrollLeft,e.target.scrollTop)
     // 横向滚动
     if (Math.abs(deltaX) > Math.abs(deltaY)) {
       delta = deltaX;
@@ -101,8 +110,8 @@ export default function ScrollView({
   React.useEffect(() => {
     if (scrollIntoView) {
       const children = scrollViewRef.current.children;
-      const item = Array.from(children).find(
-        (item) => item && item.id === scrollIntoView
+      const item: any = Array.from(children).find(
+        (item: any) => item && item.id === scrollIntoView
       );
       scrollY && (scrollViewRef.current.scrollTop = item.offsetTop);
       scrollX && (scrollViewRef.current.scrollLeft = item.offsetLeft);
@@ -136,28 +145,4 @@ export default function ScrollView({
       {children}
     </div>
   );
-}
-
-ScrollView.propTypes = {
-  scrollX: PropTypes.bool,
-  scrollY: PropTypes.bool,
-  scrollTop: PropTypes.number,
-  scrollLeft: PropTypes.number,
-  scrollIntoView: PropTypes.string,
-  upperThreshold: PropTypes.number,
-  lowerThreshold: PropTypes.number,
-  domRef: PropTypes.any,
-  children: PropTypes.any,
-  id: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-};
-
-ScrollView.defaultProps = {
-  scrollX: false,
-  scrollY: true,
-  upperThreshold: 50,
-  lowerThreshold: 50,
-  events: {},
-};
+}

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 
-export default function Slot({ compositeParent, name, className }) {
+export interface PropsType {
+  className?: string,
+  name: string,
+  compositeParent: any
+
+}
+export default function Slot({ compositeParent, name, className }: PropsType) {
   if (!compositeParent) {
     console.warn('Slot组件只能用于实现复合组件');
     // 兼容编辑器点击，可选中 Slot 组件
@@ -12,10 +17,4 @@ export default function Slot({ compositeParent, name, className }) {
     );
   }
   return compositeParent.props.data[name] || null;
-}
-
-Slot.propTypes = {
-  className: PropTypes.string,
-  name: PropTypes.string,
-  compositeParent: PropTypes.any,
-};
+}

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

@@ -35,7 +35,7 @@
   height: 100%;
 }
 
-.g-swiper-item > * {
+.g-swiper-item > div > * {
   width: 100%;
   height: auto;
   max-width: 100%;