@ray-js/components 0.3.29 → 0.3.30

package/lib/RichText/index.md

@@ -0,0 +1,117 @@
+---
+nav:
+  title: 组件
+  path: /components
+group:
+  title: 基础组件
+---
+
+# RichText
+
+富文本。
+
+## 导入
+
+```js
+import { RichText } from '@ray-js/components'
+```
+
+## 示例代码
+
+<code src="./demos/basic.tsx" title="基本使用" background="#f2f4f6" height="500px" />
+
+## 属性说明
+
+| 属性名 | 类型         | 默认值 | 必填 | 说明                 | 支持平台 |
+| ------ | ------------ | ------ | ---- | -------------------- | -------- |
+| nodes  | array/string | []     | 否   | 节点列表/HTML String | Web      |
+
+### nodes
+
+现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点 \*元素节点：type = node\*\*
+
+| 属性     | 说明       | 类型   | 必填 | 备注                                     |
+| -------- | ---------- | ------ | ---- | ---------------------------------------- |
+| name     | 标签名     | string | 是   | 支持部分受信任的 HTML 节点               |
+| attrs    | 属性       | object | 否   | 支持部分受信任的属性，遵循 Pascal 命名法 |
+| children | 子节点列表 | array  | 否   | 结构和 nodes 一致                        |
+
+_文本节点：type = text_
+
+| 属性 | 说明 | 类型   | 必填 | 备注          |
+| ---- | ---- | ------ | ---- | ------------- |
+| text | 文本 | string | 是   | 支持 entities |
+
+### 受信任的 HTML 节点及属性
+
+全局支持 class 和 style 属性，**不支持 id 属性**。
+
+| 节点       | 属性                            |
+| :--------- | ------------------------------- |
+| a          |                                 |
+| abbr       |                                 |
+| address    |                                 |
+| article    |                                 |
+| aside      |                                 |
+| b          |                                 |
+| bdi        |                                 |
+| bdo        | dir                             |
+| big        |                                 |
+| blockquote |                                 |
+| br         |                                 |
+| caption    |                                 |
+| center     |                                 |
+| cite       |                                 |
+| code       |                                 |
+| col        | span，width                     |
+| colgroup   | span，width                     |
+| dd         |                                 |
+| del        |                                 |
+| div        |                                 |
+| dl         |                                 |
+| dt         |                                 |
+| em         |                                 |
+| fieldset   |                                 |
+| font       |                                 |
+| footer     |                                 |
+| h1         |                                 |
+| h2         |                                 |
+| h3         |                                 |
+| h4         |                                 |
+| h5         |                                 |
+| h6         |                                 |
+| header     |                                 |
+| hr         |                                 |
+| i          |                                 |
+| img        | alt，src，height，width         |
+| ins        |                                 |
+| label      |                                 |
+| legend     |                                 |
+| li         |                                 |
+| mark       |                                 |
+| nav        |                                 |
+| ol         | start，type                     |
+| p          |                                 |
+| pre        |                                 |
+| q          |                                 |
+| rt         |                                 |
+| ruby       |                                 |
+| s          |                                 |
+| section    |                                 |
+| small      |                                 |
+| span       |                                 |
+| strong     |                                 |
+| sub        |                                 |
+| sup        |                                 |
+| table      | width                           |
+| tbody      |                                 |
+| td         | colspan，height，rowspan，width |
+| tfoot      |                                 |
+| th         | colspan，height，rowspan，width |
+| thead      |                                 |
+| tr         | colspan，height，rowspan，width |
+| tt         |                                 |
+| u          |                                 |
+| ul         |                                 |
+| iframe     |                                 |
+| pre        |                                 |

package/lib/RichText/index.tuya.js

@@ -0,0 +1,3 @@
+import RichText from './RichText';
+export * from './props';
+export default RichText;

package/lib/RichText/index.web.js

@@ -0,0 +1,3 @@
+import RichText from './RichText';
+export * from './props';
+export default RichText;

package/lib/RichText/index.wechat.js

@@ -0,0 +1,3 @@
+import RichText from './RichText';
+export * from './props';
+export default RichText;

package/lib/RichText/props.d.ts

@@ -0,0 +1,29 @@
+export interface RichTextNode {
+    /**
+     * @description.en tagName
+     * @description.zh 标签名
+     * @default null
+     */
+    name?: string;
+    /**
+     * @description.en attribute
+     * @description.zh 属性
+     * @default null
+     */
+    attrs?: Record<string, any>;
+    /**
+     * @description.en Child node list
+     * @description.zh 子节点列表
+     * @default null
+     */
+    children?: RichTextNode[];
+    [k: string]: any;
+}
+export interface RichTextProps {
+    /**
+     * @description.en Node list /HTML String
+     * @description.zh 节点列表/HTML String
+     * @default null
+     */
+    nodes: string | RichTextNode[];
+}

package/lib/RichText/props.js

@@ -0,0 +1 @@
+export {};

package/lib/RichText/props.tuya.js

@@ -0,0 +1 @@
+export {};

package/lib/RichText/props.web.js

@@ -0,0 +1 @@
+export {};

package/lib/RichText/props.wechat.js

@@ -0,0 +1 @@
+export {};

package/lib/ScrollView/ScrollView.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ScrollViewProps } from './props';
 declare const ScrollView: React.FC<ScrollViewProps>;
 export default ScrollView;

package/lib/ScrollView/ScrollView.js

@@ -1,168 +1,53 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["scrollX", "scrollY", "scrollLeft", "scrollTop", "scrollIntoView", "scrollWithAnimation", "className", "style", "upperThreshold", "lowerThreshold", "onScroll", "onScrollToUpper", "onScrollToLower", "showScrollbar"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { tween } from 'shifty';
-import View from '../View';
+var _excluded = ["onScroll", "onScrollToUpper", "onScrollToLower"];
+import React from 'react';
+import { useEventListener } from 'ahooks';
 import { defaultScrollViewProps } from './props';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var ScrollView = function (props) {
-  // TODO 支持 scrollIntoView
-  var scrollX = props.scrollX,
-      scrollY = props.scrollY,
-      scrollLeft = props.scrollLeft,
-      scrollTop = props.scrollTop,
-      scrollIntoView = props.scrollIntoView,
-      scrollWithAnimation = props.scrollWithAnimation,
-      className = props.className,
-      style = props.style,
-      _props$upperThreshold = props.upperThreshold,
-      upperThreshold = _props$upperThreshold === void 0 ? 50 : _props$upperThreshold,
-      _props$lowerThreshold = props.lowerThreshold,
-      lowerThreshold = _props$lowerThreshold === void 0 ? 50 : _props$lowerThreshold,
-      onScroll = props.onScroll,
+  var onScroll = props.onScroll,
       onScrollToUpper = props.onScrollToUpper,
       onScrollToLower = props.onScrollToLower,
-      showScrollbar = props.showScrollbar,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var internalStyle = {};
-
-  if (scrollX) {
-    internalStyle.overflowX = 'auto';
-    internalStyle.overflowY = 'hidden';
-  }
-
-  if (scrollY) {
-    internalStyle.overflowY = 'auto';
-    internalStyle.overflowX = 'hidden';
-  }
-
-  var rootDom = React.useRef();
-  var scrollLeftRecord = React.useRef(0);
-  var scrollTopRecord = React.useRef(0);
-  var beforeScrollDistance = 0;
-  var direction = 'down';
-  React.useEffect(function () {
-    scrollX && doScrollLeft(scrollLeft);
-  }, [scrollLeft]);
-  React.useEffect(function () {
-    scrollY && doScrollTop(scrollTop);
-  }, [scrollTop]);
-
-  function doScrollLeft() {
-    var scrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-    if (rootDom && rootDom.current && scrollLeft !== scrollLeftRecord.current) {
-      if (scrollWithAnimation && scrollLeftRecord.current) {
-        tween({
-          from: {
-            l: scrollLeftRecord.current
-          },
-          to: {
-            l: scrollLeft
-          },
-          duration: 100,
-          step: function step(_ref) {
-            var l = _ref.l;
-            rootDom.current.scrollLeft = l;
-          }
-        }).then(function () {
-          rootDom.current.scrollLeft = scrollLeft;
-          scrollLeftRecord.current = scrollLeft;
-        });
-      } else {
-        scrollLeftRecord.current = scrollLeft;
-        rootDom.current.scrollLeft = scrollLeft;
-      }
-    }
-  }
-
-  function doScrollTop() {
-    var scrollTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-    if (rootDom && rootDom.current && scrollTop !== scrollTopRecord.current) {
-      if (scrollWithAnimation && scrollTopRecord.current) {
-        tween({
-          from: {
-            l: scrollTopRecord.current
-          },
-          to: {
-            l: scrollTop
-          },
-          duration: 100,
-          step: function step(_ref2) {
-            var l = _ref2.l;
-            rootDom.current.scrollTop = l;
-          }
-        }).then(function () {
-          rootDom.current.scrollTop = scrollTop;
-          scrollTopRecord.current = scrollTop;
-        });
-      } else {
-        scrollTopRecord.current = scrollTop;
-        rootDom.current.scrollTop = scrollTop;
-      }
-    }
-  }
-
-  return /*#__PURE__*/React.createElement(View, _extends({
-    ref: function ref(dom) {
-      if (dom) {
-        rootDom.current = dom;
-      }
-    },
-    className: clsx('ray-scroll-view', styles.scrollView, className),
-    onScroll: function handleOnScroll(e) {
-      // TODO: 增加 event.detail
-
-      /**
-       * deltaX: 0
-       * deltaY: -13
-       * scrollHeight: 1320
-       * scrollLeft: 0
-       * scrollTop: 126
-       * scrollWidth: 387
-       */
-      if (rootDom && rootDom.current) {
-        e.detail = rootDom.current;
-        var _rootDom$current = rootDom.current,
-            offsetHeight = _rootDom$current.offsetHeight,
-            _scrollTop = _rootDom$current.scrollTop,
-            scrollHeight = _rootDom$current.scrollHeight,
-            _scrollLeft = _rootDom$current.scrollLeft,
-            offsetWidth = _rootDom$current.offsetWidth,
-            scrollWidth = _rootDom$current.scrollWidth; // 记录手动滑的位置
-
-        scrollLeftRecord.current = rootDom.current.scrollLeft;
-        scrollTopRecord.current = rootDom.current.scrollTop;
-
-        if (scrollY && beforeScrollDistance !== _scrollTop) {
-          direction = beforeScrollDistance - _scrollTop > 0 ? 'up' : 'down';
-          beforeScrollDistance = _scrollTop;
-        }
-
-        if (scrollX && beforeScrollDistance !== _scrollLeft) {
-          direction = beforeScrollDistance - _scrollLeft > 0 ? 'left' : 'right';
-          beforeScrollDistance = _scrollLeft;
-        }
-
-        if (scrollY && direction === 'down' && offsetHeight + _scrollTop + lowerThreshold >= scrollHeight || scrollX && direction === 'right' && offsetWidth + _scrollLeft + lowerThreshold >= scrollWidth) {
-          onScrollToLower && onScrollToLower();
-        }
-
-        if (scrollY && direction === 'up' && _scrollTop <= upperThreshold || scrollX && direction === 'left' && _scrollLeft <= upperThreshold) {
-          onScrollToUpper && onScrollToUpper();
-        }
-      }
-
-      onScroll && onScroll(e);
-    },
-    style: _objectSpread(_objectSpread({}, internalStyle), style)
-  }, restProps), props.children);
+  var currentNode = React.useRef(null);
+  useEventListener('scroll', function (e) {
+    onScroll === null || onScroll === void 0 ? void 0 : onScroll(_objectSpread(_objectSpread({
+      type: 'scroll'
+    }, e.detail), {}, {
+      origin: e
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('scrolltoupper', function (e) {
+    onScrollToUpper === null || onScrollToUpper === void 0 ? void 0 : onScrollToUpper(_objectSpread(_objectSpread({
+      type: 'scrolltoupper'
+    }, e.detail), {}, {
+      origin: e
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('scrolltolower', function (e) {
+    onScrollToLower === null || onScrollToLower === void 0 ? void 0 : onScrollToLower(_objectSpread(_objectSpread({
+      type: 'scrolltolower'
+    }, e.detail), {}, {
+      origin: e
+    }));
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-scroll-view", _extends({}, handleProps(restProps), {
+      ref: currentNode
+    }), props.children)
+  );
 };
 
 ScrollView.defaultProps = defaultScrollViewProps;

package/lib/ScrollView/ScrollView.web.js

@@ -1,168 +1,53 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["scrollX", "scrollY", "scrollLeft", "scrollTop", "scrollIntoView", "scrollWithAnimation", "className", "style", "upperThreshold", "lowerThreshold", "onScroll", "onScrollToUpper", "onScrollToLower", "showScrollbar"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { tween } from 'shifty';
-import View from '../View';
+var _excluded = ["onScroll", "onScrollToUpper", "onScrollToLower"];
+import React from 'react';
+import { useEventListener } from 'ahooks';
 import { defaultScrollViewProps } from './props';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var ScrollView = function (props) {
-  // TODO 支持 scrollIntoView
-  var scrollX = props.scrollX,
-      scrollY = props.scrollY,
-      scrollLeft = props.scrollLeft,
-      scrollTop = props.scrollTop,
-      scrollIntoView = props.scrollIntoView,
-      scrollWithAnimation = props.scrollWithAnimation,
-      className = props.className,
-      style = props.style,
-      _props$upperThreshold = props.upperThreshold,
-      upperThreshold = _props$upperThreshold === void 0 ? 50 : _props$upperThreshold,
-      _props$lowerThreshold = props.lowerThreshold,
-      lowerThreshold = _props$lowerThreshold === void 0 ? 50 : _props$lowerThreshold,
-      onScroll = props.onScroll,
+  var onScroll = props.onScroll,
       onScrollToUpper = props.onScrollToUpper,
       onScrollToLower = props.onScrollToLower,
-      showScrollbar = props.showScrollbar,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var internalStyle = {};
-
-  if (scrollX) {
-    internalStyle.overflowX = 'auto';
-    internalStyle.overflowY = 'hidden';
-  }
-
-  if (scrollY) {
-    internalStyle.overflowY = 'auto';
-    internalStyle.overflowX = 'hidden';
-  }
-
-  var rootDom = React.useRef();
-  var scrollLeftRecord = React.useRef(0);
-  var scrollTopRecord = React.useRef(0);
-  var beforeScrollDistance = 0;
-  var direction = 'down';
-  React.useEffect(function () {
-    scrollX && doScrollLeft(scrollLeft);
-  }, [scrollLeft]);
-  React.useEffect(function () {
-    scrollY && doScrollTop(scrollTop);
-  }, [scrollTop]);
-
-  function doScrollLeft() {
-    var scrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-    if (rootDom && rootDom.current && scrollLeft !== scrollLeftRecord.current) {
-      if (scrollWithAnimation && scrollLeftRecord.current) {
-        tween({
-          from: {
-            l: scrollLeftRecord.current
-          },
-          to: {
-            l: scrollLeft
-          },
-          duration: 100,
-          step: function step(_ref) {
-            var l = _ref.l;
-            rootDom.current.scrollLeft = l;
-          }
-        }).then(function () {
-          rootDom.current.scrollLeft = scrollLeft;
-          scrollLeftRecord.current = scrollLeft;
-        });
-      } else {
-        scrollLeftRecord.current = scrollLeft;
-        rootDom.current.scrollLeft = scrollLeft;
-      }
-    }
-  }
-
-  function doScrollTop() {
-    var scrollTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-    if (rootDom && rootDom.current && scrollTop !== scrollTopRecord.current) {
-      if (scrollWithAnimation && scrollTopRecord.current) {
-        tween({
-          from: {
-            l: scrollTopRecord.current
-          },
-          to: {
-            l: scrollTop
-          },
-          duration: 100,
-          step: function step(_ref2) {
-            var l = _ref2.l;
-            rootDom.current.scrollTop = l;
-          }
-        }).then(function () {
-          rootDom.current.scrollTop = scrollTop;
-          scrollTopRecord.current = scrollTop;
-        });
-      } else {
-        scrollTopRecord.current = scrollTop;
-        rootDom.current.scrollTop = scrollTop;
-      }
-    }
-  }
-
-  return /*#__PURE__*/React.createElement(View, _extends({
-    ref: function ref(dom) {
-      if (dom) {
-        rootDom.current = dom;
-      }
-    },
-    className: clsx('ray-scroll-view', styles.scrollView, className),
-    onScroll: function handleOnScroll(e) {
-      // TODO: 增加 event.detail
-
-      /**
-       * deltaX: 0
-       * deltaY: -13
-       * scrollHeight: 1320
-       * scrollLeft: 0
-       * scrollTop: 126
-       * scrollWidth: 387
-       */
-      if (rootDom && rootDom.current) {
-        e.detail = rootDom.current;
-        var _rootDom$current = rootDom.current,
-            offsetHeight = _rootDom$current.offsetHeight,
-            _scrollTop = _rootDom$current.scrollTop,
-            scrollHeight = _rootDom$current.scrollHeight,
-            _scrollLeft = _rootDom$current.scrollLeft,
-            offsetWidth = _rootDom$current.offsetWidth,
-            scrollWidth = _rootDom$current.scrollWidth; // 记录手动滑的位置
-
-        scrollLeftRecord.current = rootDom.current.scrollLeft;
-        scrollTopRecord.current = rootDom.current.scrollTop;
-
-        if (scrollY && beforeScrollDistance !== _scrollTop) {
-          direction = beforeScrollDistance - _scrollTop > 0 ? 'up' : 'down';
-          beforeScrollDistance = _scrollTop;
-        }
-
-        if (scrollX && beforeScrollDistance !== _scrollLeft) {
-          direction = beforeScrollDistance - _scrollLeft > 0 ? 'left' : 'right';
-          beforeScrollDistance = _scrollLeft;
-        }
-
-        if (scrollY && direction === 'down' && offsetHeight + _scrollTop + lowerThreshold >= scrollHeight || scrollX && direction === 'right' && offsetWidth + _scrollLeft + lowerThreshold >= scrollWidth) {
-          onScrollToLower && onScrollToLower();
-        }
-
-        if (scrollY && direction === 'up' && _scrollTop <= upperThreshold || scrollX && direction === 'left' && _scrollLeft <= upperThreshold) {
-          onScrollToUpper && onScrollToUpper();
-        }
-      }
-
-      onScroll && onScroll(e);
-    },
-    style: _objectSpread(_objectSpread({}, internalStyle), style)
-  }, restProps), props.children);
+  var currentNode = React.useRef(null);
+  useEventListener('scroll', function (e) {
+    onScroll === null || onScroll === void 0 ? void 0 : onScroll(_objectSpread(_objectSpread({
+      type: 'scroll'
+    }, e.detail), {}, {
+      origin: e
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('scrolltoupper', function (e) {
+    onScrollToUpper === null || onScrollToUpper === void 0 ? void 0 : onScrollToUpper(_objectSpread(_objectSpread({
+      type: 'scrolltoupper'
+    }, e.detail), {}, {
+      origin: e
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('scrolltolower', function (e) {
+    onScrollToLower === null || onScrollToLower === void 0 ? void 0 : onScrollToLower(_objectSpread(_objectSpread({
+      type: 'scrolltolower'
+    }, e.detail), {}, {
+      origin: e
+    }));
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-scroll-view", _extends({}, handleProps(restProps), {
+      ref: currentNode
+    }), props.children)
+  );
 };
 
 ScrollView.defaultProps = defaultScrollViewProps;

package/lib/ScrollView/index.md

@@ -18,20 +18,20 @@ group:
 ## 导入
 
 ```js
-import { ScrollView } from '@ray-js/components';
+import { ScrollView } from '@ray-js/components'
 ```
 
 ## Props
 
 | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- |
-| scrollX | boolean | false | 允许横向滚动 | 涂鸦、微信、RN |
-| scrollY | boolean | false | 允许纵向滚动 | 涂鸦、微信、RN |
-| scrollTop | number |  | 设置竖向滚动条位置 | 涂鸦、微信、RN |
-| scrollLeft | number |  | 设置横向滚动条位置 | 涂鸦、微信、RN |
-| scrollWithAnimation | boolean |  | 在设置滚动条位置时使用动画过渡 | 涂鸦、微信、RN |
-| upperThreshold | number | 50 | 距顶部/左边多远时，触发 onScrollToUpper 事件 | 涂鸦、微信、RN |
-| lowerThreshold | number | 50 | 距底部/右边多远时，触发 onScrollToLower 事件 | 涂鸦、微信、RN |
-| onScrollToUpper | func(event: { type: 'scrolltoupper'; direction: 'top' or'left'; origin: any }) |  | 滚动到顶部/左边时触发 | 涂鸦、微信、RN |
-| onScrollToLower | func(event: { type: 'scrolltolower'; direction: 'bottom' or 'right'; origin: any }) |  | 滚动到底部/右边时触发 | 涂鸦、微信、RN |
-| onScroll | func(vent: { type: 'scroll'; scrollLeft: number; scrollTop: number; scrollHeight: number; scrollWidth: number; deltaX: number; deltaY: number; origin: any }) |  | 滚动时触发 | 涂鸦、微信、RN |
+| scrollX | boolean | false | 允许横向滚动 | 涂鸦、微信、RN、Web |
+| scrollY | boolean | false | 允许纵向滚动 | 涂鸦、微信、RN、Web |
+| scrollTop | number |  | 设置竖向滚动条位置 | 涂鸦、微信、RN、Web |
+| scrollLeft | number |  | 设置横向滚动条位置 | 涂鸦、微信、RN、Web |
+| scrollWithAnimation | boolean |  | 在设置滚动条位置时使用动画过渡 | 涂鸦、微信、RN、Web |
+| upperThreshold | number | 50 | 距顶部/左边多远时，触发 onScrollToUpper 事件 | 涂鸦、微信、RN、Web |
+| lowerThreshold | number | 50 | 距底部/右边多远时，触发 onScrollToLower 事件 | 涂鸦、微信、RN、Web |
+| onScrollToUpper | func(event: { type: 'scrolltoupper'; direction: 'top' or'left'; origin: any }) |  | 滚动到顶部/左边时触发 | 涂鸦、微信、RN、Web |
+| onScrollToLower | func(event: { type: 'scrolltolower'; direction: 'bottom' or 'right'; origin: any }) |  | 滚动到底部/右边时触发 | 涂鸦、微信、RN、Web |
+| onScroll | func(vent: { type: 'scroll'; scrollLeft: number; scrollTop: number; scrollHeight: number; scrollWidth: number; deltaX: number; deltaY: number; origin: any }) |  | 滚动时触发 | 涂鸦、微信、RN、Web |