@cloudbase/weda-ui 0.2.11 → 0.2.15

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/configs/components/button.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
-    <title>Button按钮组件。</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Button按钮组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="按钮/正常态" transform="translate(5.000000, 35.000000)">
-            <g id="2">
-                <g>
-                    <rect id="矩形" fill="#1D7FFD" x="0" y="0" width="90" height="30" rx="1.5"></rect>
-                    <text id="按钮" font-family="PingFangSC-Medium, PingFang SC" font-size="15" font-weight="400" fill="#FFFFFF">
-                        <tspan x="30" y="20">按钮</tspan>
-                    </text>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

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

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Drawer } from 'tea-component';
-
-const TeaDrawer = ({
-  size,
-  title,
-  style,
-  events,
-  visible,
-  subtitle,
-  showMask,
-  className,
-  placement,
-  extraSlot,
-  footerSlot,
-  childrenSlot,
-  disableCloseIcon,
-  outerClickClosable,
-}) => {
-  const eventsList = {
-    onClose: () => events?.onClose && events.onClose({}),
-    onExited: () => events?.onExited && events.onExited({}),
-  };
-  return (
-    <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>
-  );
-};
-
-TeaDrawer.propTypes = {
-  style: PropTypes.object,
-  visible: PropTypes.bool,
-  title: PropTypes.string,
-  showMask: PropTypes.bool,
-  extraSlot: PropTypes.node,
-  subtitle: PropTypes.string,
-  footerSlot: PropTypes.node,
-  className: PropTypes.string,
-  childrenSlot: PropTypes.node,
-  disableCloseIcon: PropTypes.bool,
-  size: PropTypes.oneOf(['m', 'l']),
-  outerClickClosable: PropTypes.bool,
-  events: PropTypes.objectOf(PropTypes.func),
-  placement: PropTypes.oneOf(['right', 'left']),
-};
-
-export default TeaDrawer;
-export { TeaDrawer };

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

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
-import classNames from '../../../utils/classnames';
-import './index.css';
-import {ConfigProvider, Form as TeaForm} from 'tea-component';
-import { usePlatform } from '../../../utils/platform';
-
-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">
-        <TeaForm className={cls} style={style} id={id}>
-          {contentSlot}
-      </TeaForm>
-    </ConfigProvider>
-    );
-  }
-  return (
-    <div className={cls} style={style} id={id}>
-      {/* <div className="weui-form__text-area">
-        {title ? <h2 className="weui-form__title">{title}</h2> : null}
-        {description ? (
-          <div className="weui-form__desc">{description}</div>
-        ) : null}
-      </div> */}
-      {/* <div className="weui-form__control-area"> */}
-      <div className="weui-cells__group weui-cells__group_form">
-        {contentSlot}
-      </div>
-      {/* </div> */}
-      {/* <div className="weui-form__tips-area">
-        <p className="weui-form__tips">{tips}</p>
-      </div> */}
-      {/* <div className="weui-form__opr-area">{buttonSlot}</div> */}
-    </div>
-  );
-}
-
-Form.propTypes = {
-  // 系统属性
-  className: PropTypes.string,
-  events: PropTypes.object,
-  // 组件属性
-  // title: PropTypes.string,
-  // description: PropTypes.string,
-  // tips: PropTypes.string,
-  contentSlot: PropTypes.any,
-  id: PropTypes.string,
-  style: PropTypes.object,
-  // buttonSlot: PropTypes.any,
-};
-
-Form.defaultProps = {
-  // title: '表单标题',
-  // description:
-  //   '展示表单页面的信息结构样式, 分别由头部区域、控件区域和操作区域组成。',
-};

package/src/web/components/image/image.jsx

@@ -1,187 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { ConfigProvider, ImagePreview } from 'tea-component';
-import { usePlatform } from '../../utils/platform';
-import { useGesture } from '@use-gesture/react';
-
-ImageInner.propTypes = {
-  objectFit: PropTypes.string,
-  className: PropTypes.string,
-  events: PropTypes.object,
-  style: PropTypes.object,
-  src: PropTypes.string,
-  alt: PropTypes.string,
-  lazyLoad: PropTypes.bool,
-  isError: PropTypes.bool,
-  setIsError: PropTypes.func,
-  maskClosable: PropTypes.bool,
-  imgPreview: PropTypes.bool
-};
-
-const failImgBase64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=';
-
-export function ImageInner({
-  objectFit,
-  style,
-  className,
-  alt,
-  src,
-  isError,
-  setIsError,
-  events,
-  lazyLoad,
-  maskClosable,
-  imgPreview
-}) {
-  const platform = usePlatform();
-  const [imgShow, setImgShow] = React.useState(false);
-  const onMaskClick = () => {
-    if(maskClosable) {
-      setImgShow(false);
-    }
-  };
-
-  const [showHeight, setShowHeight] = React.useState(0);
-  const realWidth = React.useRef(0);
-  const realHeight = React.useRef(0);
-  const [offsetHeight, setOffsetHeight] = React.useState(0);
-  const [translateX, setTranslateX]= React.useState(0);
-  const [translateY, setTranslateY]= React.useState(0);
-  const [previewScale, setPreviewScale] = React.useState(1);
-  React.useEffect(() => {
-    // 防止触发浏览器的放大缩小
-    const handler = e => e.preventDefault();
-    document.addEventListener('gesturestart', handler);
-    document.addEventListener('gesturechange', handler);
-    return () => {
-      document.removeEventListener('gesturestart', handler);
-      document.removeEventListener('gesturechange', handler);
-    };
-  }, []);
-
-  const bind = useGesture({
-    onClick: ({event}) => {
-      // 防止冒泡出发关闭预览
-      event.stopPropagation();
-    },
-    onPinch: ({offset}) => {
-      const [s] = offset;
-      setPreviewScale(s);
-    },
-    onDrag: ({offset, event}) => {
-      event.stopPropagation();
-      const [x, y] = offset;
-      setTranslateX(x);
-      setTranslateY(y);
-      
-    },
-  }, {
-    drag: {
-      delay: true,
-      preventDefault: true,
-    },
-    pinch: {
-      scaleBounds: {min: 0.6, max: 5},
-      pointer: {
-        touch: true
-      }
-    }
-  });
-
-  if(platform === 'h5' || !imgPreview || isError) {
-    return (
-      <>
-        <img
-          style={{
-            objectFit,
-            ...style,
-          }}
-          className={className}
-          alt={alt}
-          src={src}
-          onLoad={(e) => {
-            /* @type {HTMLImageElement} */
-            const img = e.target;
-            const {naturalHeight, naturalWidth} = img;
-            realHeight.current = naturalHeight;
-            realWidth.current = naturalWidth;
-            setIsError(false);
-            events.load && events.load({}, { originEvent: e });
-          }}
-          onError={(e) => {
-            setIsError(true);
-            events.error && events.error({}, { originEvent: e });
-          }}
-          onClick={
-            () => {
-              if(imgPreview && !isError) {
-                setTranslateX(0);
-                setTranslateY(0);
-                setPreviewScale(1);
-                const windowHeight = window.innerHeight;
-                const windowWidth = window.innerWidth;
-                const ratio = (realWidth.current / realHeight.current);
-                const height = windowWidth / ratio;
-                setOffsetHeight(windowHeight / 2 - (height / 2));
-                setShowHeight(height);
-                setImgShow(true);
-              }
-            }
-          }
-          loading={lazyLoad ? 'lazy' : undefined}
-        />
-        {imgShow &&
-          <div className="weda-img-mask" onClick={onMaskClick} >
-            <div onClick={() => setImgShow(false)} className="weda-img-modal-close-btn">
-              <i className="weui-icon-clear" style={{color: 'white'}}></i>
-            </div>
-            
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <div {...bind()} className="weda-img-preview" style={{
-              touchAction: 'none',
-              backgroundImage: `url(${src})`,
-              width: '100%',
-              height: showHeight,
-              marginTop: offsetHeight,
-              transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`
-            }}></div>
-          </div>
-        }
-      </>
-    );
-  } else {
-    return (
-      <ConfigProvider classPrefix="wedatea2td">
-      <ImagePreview
-        previewSrc={src}
-        lazyLoad
-        maskClosable={maskClosable}
-        className={className}
-        style={{...style,
-        objectFit}}
-      >
-        {open => <img
-          style={{
-            objectFit,
-            cursor: 'zoom-in',
-            ...style,
-          }}
-          className={className}
-          alt={alt}
-          src={src}
-          onLoad={(e) => {
-            setIsError(false);
-            events.load && events.load({}, { originEvent: e });
-          }}
-          onError={(e) => {
-            setIsError(true);
-            events.error && events.error({}, { originEvent: e });
-          }}
-          loading={lazyLoad ? 'lazy' : undefined}
-          onClick={open}
-        />}
-      </ImagePreview>
-      </ConfigProvider>
-    );
-  }
-}