@cloudbase/weda-ui 0.2.11 → 0.2.12

package/src/web/components/tabs/{tabs.h5.jsx → tabs.h5.tsx}

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import * as PropTypes from 'prop-types';
 
 import './index.css';
 import classNames from '../../utils/classnames';
 import { useSyncValue } from '../../utils/useSyncValue';
+import {PropsType} from './index';
 
 export default function TabsH5({
   tabs,
@@ -12,7 +12,7 @@ export default function TabsH5({
   className,
   style,
   ...restProps
-}) {
+}: PropsType) {
   const [currentIndex, setCurrentIndex] = useSyncValue(selectedIndex);
   const stickyStyle = useMemo(() => {
     const length = tabs.length;
@@ -23,7 +23,7 @@ export default function TabsH5({
   }, [tabs, currentIndex]);
   
   return (
-    <div className={classNames("weda-tabs weda-ui", {
+    <div data-testid="tabs" className={classNames("weda-tabs weda-ui", {
       [className]: className
     })} style={style}>
       <div className="weda-tabs__nav">
@@ -63,33 +63,4 @@ export default function TabsH5({
       </div>
     </div>
   );
-}
-
-
-TabsH5.propTypes = {
-  tabs: PropTypes.array,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  selectedIndex: PropTypes.number,
-  events: PropTypes.objectOf(PropTypes.func),
-  panel1: PropTypes.node,
-  panel2: PropTypes.node,
-  panel3: PropTypes.node,
-  panel4: PropTypes.node,
-  panel5: PropTypes.node,
-  panel6: PropTypes.node,
-  panel7: PropTypes.node,
-  panel8: PropTypes.node,
-  panel9: PropTypes.node,
-  panel10: PropTypes.node,
-  panel11: PropTypes.node,
-  panel12: PropTypes.node,
-  panel13: PropTypes.node,
-  panel14: PropTypes.node,
-  panel15: PropTypes.node,
-  panel16: PropTypes.node,
-  panel17: PropTypes.node,
-  panel18: PropTypes.node,
-  panel19: PropTypes.node,
-  panel20: PropTypes.node,
-};
+}

package/src/web/components/tabs/{tabs.pc.jsx → tabs.pc.tsx}

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
 import classNames from '../../utils/classnames';
 import { useSyncValue } from '../../utils/useSyncValue';
+import { PropsType } from './index';
 
 
 export default function TabsPc({
@@ -12,28 +12,23 @@ export default function TabsPc({
   className,
   style,
   ...restProps
-}) {
+}: PropsType) {
 
   const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
   const _tabs = Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
     return {
-      id: index,
+      id: index.toString(),
       label: item.title
     };
   });
 
-
-
-  // React.useEffect(() => {
-  //   console.log('render');
-  // });
   const onActive = (e) => {
     setActiveIndex(e.id);
     events && events.change(e);
   };
   return (
     <ConfigProvider classPrefix="wedatea2td">
-    <TeaTabs  style={style} tabs={_tabs} activeId={activeIndex} onActive={onActive} className={classNames(
+    <TeaTabs  style={style} tabs={_tabs} activeId={String(activeIndex)} onActive={onActive} className={classNames(
       "weda-tabs_pc",
       {
         [className]: className
@@ -44,7 +39,6 @@ export default function TabsPc({
           <TabPanel
           key={item.id}
           id={item.id}
-          label={item.label}
           >
             {restProps[`panel${index + 1}`]}
           </TabPanel>
@@ -53,32 +47,4 @@ export default function TabsPc({
     </TeaTabs>
   </ConfigProvider>
   );
-}
-
-TabsPc.propTypes = {
-  tabs: PropTypes.array,
-  className: PropTypes.string,
-  selectedIndex: PropTypes.number,
-  style: PropTypes.object,
-  events: PropTypes.objectOf(PropTypes.func),
-  panel1: PropTypes.node,
-  panel2: PropTypes.node,
-  panel3: PropTypes.node,
-  panel4: PropTypes.node,
-  panel5: PropTypes.node,
-  panel6: PropTypes.node,
-  panel7: PropTypes.node,
-  panel8: PropTypes.node,
-  panel9: PropTypes.node,
-  panel10: PropTypes.node,
-  panel11: PropTypes.node,
-  panel12: PropTypes.node,
-  panel13: PropTypes.node,
-  panel14: PropTypes.node,
-  panel15: PropTypes.node,
-  panel16: PropTypes.node,
-  panel17: PropTypes.node,
-  panel18: PropTypes.node,
-  panel19: PropTypes.node,
-  panel20: PropTypes.node,
-};
+}

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

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

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { CommonPropsType, unknownFunction } from '../../types';
+import './index.css';
+
+export interface PropsType extends CommonPropsType {
+  text: string,
+  level: string,
+  maxLines: number,
+  space: boolean,
+  userSelect: boolean,
+  textAlign: string,
+  textColor: string,
+  contenteditable: HTMLParagraphElement['contentEditable'],
+  onInput: unknownFunction,
+  onBlur: unknownFunction
+
+}
+export default function Text({
+  text = '文本内容',
+  maxLines = 2,
+  space = false,
+  userSelect = true,
+  textAlign = '',
+  textColor = '',
+  style = {},
+  className,
+  events,
+  id,
+  level = '0',
+  contenteditable,
+  onInput,
+  onBlur
+}: PropsType) {
+  const textStyle: React.CSSProperties = {
+    WebkitLineClamp: maxLines,
+    whiteSpace: space ? 'pre-wrap' : 'pre-line',
+  };
+
+  if (!userSelect) {
+    textStyle.userSelect = 'none';
+  }
+  const levelName = level === '0' ? '' : `level_${level}`;
+
+  // 添加文本颜色属性
+  let style2 = {};
+  if (textColor !== "") {
+    style2 = {color: textColor};
+  }
+
+  // 添加对齐属性
+  if (textAlign !== "") {
+    style2 = {...style2, textAlign};
+  }
+  return (
+    <p
+      //@ts-expect-error contentEditable type def sucks
+      contentEditable={contenteditable}
+      onInput={onInput}
+      onBlur={onBlur}
+      style={{  ...style, ...textStyle, ...style2 }}
+      className={classNames('weda-text', 'weda-ui', className, levelName)}
+      id={id}
+      onClick={(e) => events.tap({}, { originEvent: e })}
+    >
+      {text}
+    </p>
+  );
+}

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

@@ -0,0 +1,11 @@
+a.weda-file-view-pc__single{
+    display: inline-block;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+a.weda-file-view-pc__single:hover{
+    text-decoration: underline;
+}

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { UploadFilePc } from '../form/uploaderFile/uploadFile.pc';
+import {
+  filterStrList,
+  isCloudFileID,
+  downloadFile,
+} from '../../utils/platform';
+import { getTempFileURL } from '../../utils/tcb';
+import './index.css';
+
+const CLASS_PREFIX = 'weda-file-view-pc';
+
+/**
+ * 上传文件回显
+ * single 表示单个文件回显
+ */
+export default function UploaderFileView({
+  value,
+  className,
+  single = true,
+  ...rest
+}) {
+  const fileIDList = filterStrList(value);
+  if(single){
+    return <FileView fileID={fileIDList[0]}/>
+  }else{
+    return (
+      <UploadFilePc
+        className={`${CLASS_PREFIX} ${className}`}
+        decorator={null}
+        {...rest}
+        value={fileIDList}
+        isEdit={false}
+      />
+    )
+  }
+}
+
+/**
+ * 单个文件回显
+ */
+const FileView = ({ fileID }) => {
+  const [src, setSrc] = React.useState('');
+
+  React.useEffect(() => {
+    const fetchFileId = async (id) => {
+      if (isCloudFileID(id)) {
+        try {
+          const fileSrc = await getTempFileURL(id);
+          setSrc(fileSrc);
+        } catch (e) {}
+      } else {
+        setSrc(id);
+      }
+    };
+    fetchFileId(fileID);
+  }, [fileID]);
+
+  const title = React.useMemo(() => {
+    if (isCloudFileID(fileID)) {
+      const uuidReg = /file-[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}-/;
+      const lastIndex = `${fileID}`.lastIndexOf('/');
+      const name = `${fileID}`.slice(lastIndex + 1);
+      const title = name.replace(uuidReg, '');
+      return title;
+    } else {
+      return fileID;
+    }
+  }, [fileID]);
+  return (
+      <a title={title} onClick={() => downloadFile(src)} className={`${CLASS_PREFIX}__single`}>
+      {title}
+      </a>
+  )
+};

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

@@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types';
 import { TcbImage } from '../form/uploader/uploader.pc';
 import classNames from '../../utils/classnames';
 import './index.css';
+import { CommonPropsType } from '../../types';
 
 const CLASS_PREFIX = 'g-uploader-view';
 
@@ -20,8 +21,8 @@ export default function UploaderView({
   isEmptyPlace = true,
   className,
   id,
-  style
-}) {
+  style,
+}: PropsType) {
   const cls = classNames({
     [CLASS_PREFIX]: true,
     [className]: className,
@@ -80,16 +81,12 @@ export default function UploaderView({
   );
 }
 
-UploaderView.propTypes = {
-  srcList: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 图片 src 列表
-  alt: PropTypes.string, // 替代文字
-  isZoom: PropTypes.bool, // 能否点击放大
-  gutter: PropTypes.number, // 图片间距
-  height: PropTypes.number, // 图片最大高度
-  width: PropTypes.number, // 图片最大宽度
-  isEmptyPlace: PropTypes.bool, // 是否展示空值
-  events: PropTypes.objectOf(PropTypes.func), // 组件事件
-  className: PropTypes.string, // 类，修改测试story,测试2
-  id: PropTypes.string,
-  style: PropTypes.object
-};
+export interface PropsType extends CommonPropsType {
+  srcList?: string[] | string;
+  alt?: string; // 替代文字
+  isZoom?: boolean; // 能否点击放大
+  gutter?: number; // 图片间距
+  height?: number; // 图片最大高度
+  width?: number; // 图片最大宽度
+  isEmptyPlace?: boolean; // 是否显示空值
+}

package/src/web/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="resize-observer-browser" />
+
+import * as React from "react";
+export type unknownFunction = (...args: unknown[]) => unknown
+export interface CommonPropsType {
+    style?: React.CSSProperties,
+    id?: string,
+    events?: Record<string, unknownFunction>;
+    className?: string,
+    children?: React.ReactNode | undefined
+}
+
+
+declare global {
+    var app: any
+    interface Window { 
+        app: any;
+    }
+
+}

package/src/web/utils/constant.js

@@ -3,3 +3,5 @@ export const TitleType = {
   TOP: 'top',
   NONE: 'none',
 };
+
+export const LOAD_ERR_IMG_BASE64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=';

package/src/web/utils/loading-fallback.tsx

@@ -0,0 +1,2 @@
+import * as React from "react";
+export const fallback =  <div>组件加载中...</div>;

package/src/web/utils/platform.js

@@ -1,5 +1,5 @@
 // 平台类方法，如 BOM、DOM、区分 h5 和 pc 端
-import { useMedia } from 'react-use';
+import { useMediaQuery } from '@react-hookz/web';
 /**
  * 当前环境是否为 H5 端
  */
@@ -19,14 +19,85 @@ export const isH5Platform = () => {
 };
 
 /**
- * 判断当前是否是 cloud 开头的图片协议
+ * 判断当前是否是 cloud 开头的文件协议
  */
 export const isCloudFileID = (url) => {
   return /^cloud:\/\/.*/.test(url);
 };
 
+/**
+ * 判断当前是否是 http/https 开头的文件协议
+ */
+export const isHttpFileID = (url) => {
+  return /^http(s?):\/\/.*/.test(url);
+};
+
 export function usePlatform() {
-  const smallScreen = useMedia('(max-width: 1024px)', isH5Platform());
-  const touchDevice = useMedia('(pointer:coarse)', smallScreen);
-  return (touchDevice || smallScreen) ? 'h5' : 'pc';
-}
+  const smallScreen = useMediaQuery('(max-width: 1024px)') ?? isH5Platform();
+  const touchDevice = useMediaQuery('(pointer:coarse)') ?? smallScreen;
+  return touchDevice || smallScreen ? 'h5' : 'pc';
+}
+
+/**
+ * 过滤非字符串，返回字符串数组
+ * 用于兼容单个组件和组件数组
+ */
+export const filterStrList = (value) => {
+  return [].concat(value).filter((d) => typeof d === 'string' && d !== '');
+};
+
+/**
+ * 文件字节转换
+ */
+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`;
+};
+
+/**
+ * 链接转换为下载
+ */
+export const downloadFile = (url) => {
+  if (!url) {
+    return;
+  }
+  const urlObj = new URL(url);
+  urlObj.searchParams.append('response-content-disposition', 'attawchment');
+  const urls = urlObj.toString();
+  window.open(urls);
+  setTimeout(() => {
+    window.URL.revokeObjectURL(urls);
+  }, 0);
+};
+
+/**
+ * 文件名截取，保留后缀类型
+ */
+export const cutFileTitle = (str = '', count = 10) => {
+  let [title, type] = [str, ''];
+  const dotIndex = `${str}`.lastIndexOf('.');
+  if (dotIndex > -1) {
+    type = str.slice(dotIndex + 1);
+    title = str.slice(0, dotIndex);
+  }
+  if (title.length > count) {
+    title = `${title.slice(0, 7)}...${title.slice(-3)}`;
+  }
+  if (type) {
+    title = `${title}.${type}`;
+  }
+  return title;
+};

package/src/web/utils/useSetState.ts

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+export const useSetState = <T extends object>(
+  initialState: T = {} as T
+): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void] => {
+  const [state, set] = useState<T>(initialState);
+  const setState = useCallback((patch) => {
+    set((prevState) =>
+      Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch)
+    );
+  }, []);
+
+  return [state, setState];
+};

package/src/web/utils/useSyncValue.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { usePrevious } from '@react-hookz/web';
+
+type TComparotor<T = any> = (a: T, b: T) => boolean;
+export function useSyncValue<T>(
+  defaultValue: T,
+  comparotor: TComparotor = Object.is
+): [T, (value: T) => void] {
+  const [stateValue, setStateValue] = useState(defaultValue);
+  const prevValue = usePrevious(defaultValue);
+  useEffect(() => {
+    if (!comparotor(prevValue, defaultValue)) {
+      setStateValue(defaultValue);
+    }
+  }, [defaultValue]);
+  return [stateValue, setStateValue];
+}

package/src/web/wedatheme/.git

@@ -0,0 +1 @@
+gitdir: ../../../.git/modules/src/web/wedatheme

package/src/web/wedatheme/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.history
+src/.DS_Store
+*.DS_Store

package/src/web/wedatheme/.npmrc

@@ -0,0 +1 @@
+registry=https://mirrors.tencent.com/npm/