@ray-js/components 0.6.14 → 0.6.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/lib/Progress/Progress.d.ts +4 -0
  2. package/lib/Progress/Progress.js +13 -0
  3. package/lib/Progress/Progress.thing.d.ts +4 -0
  4. package/lib/Progress/Progress.thing.js +17 -0
  5. package/lib/Progress/Progress.wechat.d.ts +4 -0
  6. package/lib/Progress/Progress.wechat.js +17 -0
  7. package/lib/Progress/index.d.ts +3 -0
  8. package/lib/Progress/index.js +2 -0
  9. package/lib/index.d.ts +1 -1
  10. package/lib/index.js +2 -2
  11. package/package.json +4 -4
  12. package/lib/Button/index.md +0 -41
  13. package/lib/Camera/index.md +0 -48
  14. package/lib/Checkbox/index.md +0 -34
  15. package/lib/CheckboxGroup/index.md +0 -37
  16. package/lib/CoverView/index.md +0 -26
  17. package/lib/DatePicker/index.md +0 -38
  18. package/lib/Form/index.md +0 -30
  19. package/lib/Icon/index.md +0 -33
  20. package/lib/Image/index.md +0 -50
  21. package/lib/Input/index.md +0 -43
  22. package/lib/IpcPlayer/index.md +0 -82
  23. package/lib/Label/index.md +0 -31
  24. package/lib/LinearGradient/index.md +0 -34
  25. package/lib/Map/index.md +0 -126
  26. package/lib/Modal/index.md +0 -33
  27. package/lib/Motion/Fade/index.d.ts +0 -4
  28. package/lib/Motion/Fade/index.js +0 -28
  29. package/lib/Motion/Fade/index.thing.d.ts +0 -4
  30. package/lib/Motion/Fade/index.thing.js +0 -78
  31. package/lib/Motion/Fade/index.wechat.d.ts +0 -4
  32. package/lib/Motion/Fade/index.wechat.js +0 -78
  33. package/lib/Motion/PullUp/index.d.ts +0 -4
  34. package/lib/Motion/PullUp/index.js +0 -28
  35. package/lib/Motion/PullUp/index.thing.d.ts +0 -4
  36. package/lib/Motion/PullUp/index.thing.js +0 -82
  37. package/lib/Motion/PullUp/index.wechat.d.ts +0 -4
  38. package/lib/Motion/PullUp/index.wechat.js +0 -82
  39. package/lib/Motion/PushDown/index.d.ts +0 -4
  40. package/lib/Motion/PushDown/index.js +0 -28
  41. package/lib/Motion/PushDown/index.thing.d.ts +0 -4
  42. package/lib/Motion/PushDown/index.thing.js +0 -82
  43. package/lib/Motion/PushDown/index.wechat.d.ts +0 -4
  44. package/lib/Motion/PushDown/index.wechat.js +0 -82
  45. package/lib/Motion/ScaleFadeIn/index.d.ts +0 -4
  46. package/lib/Motion/ScaleFadeIn/index.js +0 -28
  47. package/lib/Motion/ScaleFadeIn/index.thing.d.ts +0 -4
  48. package/lib/Motion/ScaleFadeIn/index.thing.js +0 -83
  49. package/lib/Motion/ScaleFadeIn/index.wechat.d.ts +0 -4
  50. package/lib/Motion/ScaleFadeIn/index.wechat.js +0 -83
  51. package/lib/Motion/ScalePullDown/index.d.ts +0 -4
  52. package/lib/Motion/ScalePullDown/index.js +0 -28
  53. package/lib/Motion/ScalePullDown/index.thing.d.ts +0 -4
  54. package/lib/Motion/ScalePullDown/index.thing.js +0 -103
  55. package/lib/Motion/ScalePullDown/index.wechat.d.ts +0 -4
  56. package/lib/Motion/ScalePullDown/index.wechat.js +0 -103
  57. package/lib/Motion/index.d.ts +0 -14
  58. package/lib/Motion/index.js +0 -14
  59. package/lib/Motion/index.md +0 -69
  60. package/lib/Motion/props.d.ts +0 -97
  61. package/lib/Motion/props.js +0 -62
  62. package/lib/MovableArea/index.md +0 -23
  63. package/lib/MovableView/index.md +0 -61
  64. package/lib/NativeVideo/index.md +0 -74
  65. package/lib/PageContainer/index.md +0 -42
  66. package/lib/Picker/index.md +0 -37
  67. package/lib/PickerView/index.md +0 -33
  68. package/lib/PickerViewColumn/index.md +0 -23
  69. package/lib/RadialGradient/index.md +0 -34
  70. package/lib/Radio/index.md +0 -30
  71. package/lib/RadioGroup/index.md +0 -41
  72. package/lib/RichText/index.md +0 -117
  73. package/lib/ScrollView/index.md +0 -37
  74. package/lib/Slider/index.md +0 -63
  75. package/lib/Swiper/index.md +0 -44
  76. package/lib/SwiperItem/index.md +0 -23
  77. package/lib/Switch/index.md +0 -31
  78. package/lib/Text/index.md +0 -29
  79. package/lib/Textarea/index.md +0 -46
  80. package/lib/TimePicker/index.md +0 -37
  81. package/lib/View/index.md +0 -33
  82. package/lib/WebView/index.md +0 -33
@@ -1,34 +0,0 @@
1
- ---
2
- nav:
3
- title: 组件
4
- path: /components
5
- group:
6
- title: 视图容器
7
- hide: true
8
- ---
9
-
10
- # LinearGradient
11
-
12
- LinearGradient 主要是给子节点提供一个线性渐变的效果。
13
-
14
- ## 导入
15
-
16
- ```js
17
- import { LinearGradient } from '@ray-js/components'
18
- ```
19
-
20
- ## 示例代码
21
-
22
- <code src="./demos/demo0.tsx" title="线性渐变" background="#f2f4f6" height="500px" />
23
-
24
- ## Props
25
-
26
- | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
27
- | ------ | ---------------------- | ------ | ----------------- | -------------- |
28
- | width | number | 300 | 宽度 | RN、涂鸦、微信 |
29
- | height | number | 300 | 高度 | RN、涂鸦、微信 |
30
- | x1 | string | 0% | 起始点的 x 轴坐标 | RN、涂鸦、微信 |
31
- | x2 | string | 0% | 终点的 x 轴坐标 | RN、涂鸦、微信 |
32
- | y1 | string | 0% | 起始点的 y 轴坐标 | RN、涂鸦、微信 |
33
- | y2 | string | 0% | 终点的 y 轴坐标 | RN、涂鸦、微信 |
34
- | stops | Record<string, string> | | 渐变梯度停点 | RN、涂鸦、微信 |
package/lib/Map/index.md DELETED
@@ -1,126 +0,0 @@
1
- ---
2
- nav:
3
- title: 组件
4
- path: /components
5
- group:
6
- title: 视图容器
7
- hide: true
8
- ---
9
-
10
- ## map
11
-
12
- > 基础库 2.0.12 开始支持, 低版本需做兼容处理。依赖 **MapKit** 插件, 插件版本 >= 2.2.2。
13
-
14
- ## 导入
15
-
16
- ```js
17
- import { Map } from '@ray-js/components'
18
- ```
19
-
20
- 地图。相关 API:[ty.createMapContext](https://developer.tuya.com/cn/miniapp/api/media/map/create-map-context)。这是基于异层渲染的原生组件, 请注意 [原生组件使用限制](https://developer.tuya.com/cn/miniapp/component/native-component/native-component)。
21
-
22
- ### 属性说明
23
-
24
- | 属性名 | 类型 | 默认值 | 必填 | 说明 |
25
- | --- | --- | --- | --- | --- |
26
- | longitude | number | | 是 | 中心经度 |
27
- | latitude | number | | 是 | 中心纬度 |
28
- | scale | number | 16 | 否 | 缩放级别,取值范围为 4-19 |
29
- | min-scale | number | 4 | 否 | 最小缩放级别 |
30
- | max-scale | number | 19 | 否 | 最大缩放级别 |
31
- | markers | `Array<marker>` | | 否 | 标记点 |
32
- | polyline | `Array.<polyline>` | | 否 | 路线 |
33
- | circles | `Array.<circle>` | | 否 | 圆 |
34
- | polygons | `Array.<polygon>` | | 否 | 多边形 |
35
- | border-width | number | 0 | 否 | 边框的宽度, 单位 px |
36
- | border-style | string | solid | 否 | 边框的样式, 可选值: solid 和 dashed |
37
- | border-color | string | #ffffff | 否 | 边框的颜色, 必须为十六进制格式 |
38
- | border-radius | number | 0 | 否 | 边框的圆角, 单位 px |
39
- | border-radius-top-left | number | | 否 | 边框的左上角圆角大小, 单位 px |
40
- | border-radius-top-right | number | | 否 | 边框的右上角圆角大小, 单位 px |
41
- | border-radius-bottom-left | number | | 否 | 边框的左下角圆角大小, 单位 px |
42
- | border-radius-bottom-right | number | | 否 | 边框的右下角圆角大小, 单位 px |
43
- | background-color | string | #ffffff | 否 | 背景颜色, 必须为十六进制格式 |
44
- | onMarkertap | eventhandle | | 否 | 点击标记点时触发,e.detail = {markerId} |
45
- | onCallouttap | eventhandle | | 否 | 点击标记点对应的气泡时触发 e.detail = {markerId} |
46
- | onRegionchange | eventhandle | | 否 | 视野发生变化时触发 |
47
- | onInitdone | eventhandle | | 否 | 初始化完成时触发 |
48
-
49
- ### regionchange 返回值
50
-
51
- 视野改变时,regionchange 会触发两次,返回的 type 值分别为 begin 和 end。
52
-
53
- ### marker
54
-
55
- 标记点用于在地图上显示标记的位置。
56
-
57
- | 属性名 | 说明 | 类型 | 必填 | 备注 |
58
- | --- | --- | --- | --- | --- |
59
- | id | 标记点 ID | number | 是 | marker 点击事件回调会返回此 id。 |
60
- | longitude | 经度 | number | 是 | 浮点数,范围 -180 ~ 180 |
61
- | latitude | 纬度 | number | 是 | 浮点数,范围 -90 ~ 90 |
62
- | title | 标注点名 | string | 否 | 点击时显示,callout 存在时将被忽略 |
63
- | styleId | 气泡样式类型 ID | string | 否 | 由原生实现的 marker 样式类型 id |
64
- | callout | 标记点上方的气泡窗口数据源 | object | 否 | 支持的属性见下表,可识别换行符。存在 styleId 时,根据所选样式类型传入属性 |
65
- | iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径,支持网络路径、代码包路径 |
66
- | rotate | 旋转角度 | number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 |
67
- | width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 |
68
- | height | 标注图标高度 | number/string | 否 | 默认为图片实际高度 |
69
-
70
- ### marker 上的气泡 callout
71
-
72
- | 属性名 | 说明 | 类型 |
73
- | ------------ | ----------------------------------------- | ------ |
74
- | content | 文本 | string |
75
- | color | 文本颜色 | string |
76
- | fontSize | 文字大小 | number |
77
- | borderRadius | 边框圆角 | number |
78
- | borderWidth | 边框宽度 | number |
79
- | borderColor | 边框颜色 | string |
80
- | bgColor | 背景色 | string |
81
- | padding | 文本边缘留白 | number |
82
- | textAlign | 文本对齐方式。有效值: left, right, center | string |
83
- | anchorX | 横向偏移量,向右为正数 | number |
84
- | anchorY | 纵向偏移量,向下为正数 | number |
85
-
86
- ### polyline
87
-
88
- 指定一系列坐标点,从数组第一项连线至最后一项。
89
-
90
- | 属性名 | 说明 | 类型 | 必填 | 备注 |
91
- | ---------- | ---------- | ------- | ---- | ----------------------------- |
92
- | points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] |
93
- | color | 线的颜色 | string | 否 | 十六进制 |
94
- | width | 线的宽度 | number | 否 | |
95
- | dottedLine | 是否虚线 | boolean | 否 | 默认 false |
96
-
97
- ### circle
98
-
99
- 在地图上显示圆
100
-
101
- | 属性名 | 说明 | 类型 | 必填 | 备注 |
102
- | ----------- | ---------- | ------ | ---- | ----------------------- |
103
- | latitude | 纬度 | number | 是 | 浮点数,范围 -90 ~ 90 |
104
- | longitude | 经度 | number | 是 | 浮点数,范围 -180 ~ 180 |
105
- | color | 描边的颜色 | string | 否 | 十六进制 |
106
- | fillColor | 填充颜色 | string | 否 | 十六进制 |
107
- | radius | 半径 | number | 是 | |
108
- | strokeWidth | 描边的宽度 | number | 否 | |
109
-
110
- ### polygon
111
-
112
- 指定一系列坐标点,根据 points 坐标数据生成闭合多边形
113
-
114
- | 属性名 | 说明 | 类型 | 必填 | 备注 |
115
- | ----------- | ---------- | ------ | ---- | ----------------------------- |
116
- | points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] |
117
- | strokeWidth | 描边的宽度 | number | 否 | |
118
- | strokeColor | 描边的颜色 | string | 否 | 十六进制 |
119
- | fillColor | 填充颜色 | string | 否 | 十六进制 |
120
-
121
- ### Bug & Tip
122
-
123
- 1. tip:地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
124
- 2. tip:开发者工具上是通过 WebView 模拟的与真机存在差异,请以真机效果为主。
125
- 3. tip:相关原理请参考 [基于异层渲染的原生组件](https://developer.tuya.com/cn/miniapp/component/native-component/native-component)。
126
- 4. tip:请注意 [原生组件使用限制](https://developer.tuya.com/cn/miniapp/component/native-component/native-component)。
@@ -1,33 +0,0 @@
1
- ---
2
- nav:
3
- title: 组件
4
- path: /components
5
- group:
6
- title: 视图容器
7
- hide: true
8
- ---
9
-
10
- # Modal
11
-
12
- 遮罩弹框
13
-
14
- ## 导入
15
-
16
- ```js
17
- import { Modal } from '@ray-js/components'
18
- ```
19
-
20
- ## 示例代码
21
-
22
- <code src="./demos/bottom.tsx" title="基本使用" background="#f2f4f6"/>
23
-
24
- ## Props
25
-
26
- | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
27
- | --- | --- | --- | --- | --- |
28
- | show | boolean | false | 是否显示弹框 | RN、涂鸦、微信 |
29
- | overlay | boolean | true | 是否显示遮罩 | RN、涂鸦、微信 |
30
- | position | 'top' or 'center' or 'bottom' | 'center' | 弹出层弹出位置 | RN、涂鸦、微信 |
31
- | overlayStyle | React.CSSProperties | | 自定义遮罩层样式 | RN、涂鸦、微信 |
32
- | customStyle | React.CSSProperties | | 自定义弹出层样式 | RN、涂鸦、微信 |
33
- | onClickOverlay | (event: { type: 'clickoverlay' }) => void | | 点击蒙层触发事件 | RN、涂鸦、微信 |
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- export default class Fade extends React.Component {
3
- render(): JSX.Element;
4
- }
@@ -1,28 +0,0 @@
1
- import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/esm/createClass";
3
- import _inherits from "@babel/runtime/helpers/esm/inherits";
4
- import _createSuper from "@babel/runtime/helpers/esm/createSuper";
5
- import React from 'react';
6
-
7
- var Fade = /*#__PURE__*/function (_React$Component) {
8
- _inherits(Fade, _React$Component);
9
-
10
- var _super = _createSuper(Fade);
11
-
12
- function Fade() {
13
- _classCallCheck(this, Fade);
14
-
15
- return _super.apply(this, arguments);
16
- }
17
-
18
- _createClass(Fade, [{
19
- key: "render",
20
- value: function render() {
21
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
22
- }
23
- }]);
24
-
25
- return Fade;
26
- }(React.Component);
27
-
28
- export { Fade as default };
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { MotionFadeProps } from '../props';
3
- declare const Fade: React.FC<MotionFadeProps>;
4
- export default Fade;
@@ -1,78 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- import * as React from 'react';
3
- import { inlineStyle } from '@ray-js/framework-shared';
4
- import { View } from '@ray-js/components';
5
- import { defaultMotionFadeProps } from '../props';
6
-
7
- var Fade = function (props) {
8
- var isPreShow = React.useRef(false);
9
- var id = props.id,
10
- style = props.style,
11
- className = props.className,
12
- children = props.children,
13
- show = props.show,
14
- onShow = props.onShow,
15
- onHide = props.onHide,
16
- showDuration = props.showDuration,
17
- hideDuration = props.hideDuration,
18
- fadeOpacity = props.fadeOpacity,
19
- delay = props.delay;
20
-
21
- var _React$useState = React.useState(undefined),
22
- _React$useState2 = _slicedToArray(_React$useState, 2),
23
- anim = _React$useState2[0],
24
- setAnim = _React$useState2[1];
25
-
26
- var _React$useState3 = React.useState(false),
27
- _React$useState4 = _slicedToArray(_React$useState3, 2),
28
- isAddNode = _React$useState4[0],
29
- setIsAddNode = _React$useState4[1]; // 是否将节点渲染到页面上
30
-
31
-
32
- var animationRef = React.useRef(null);
33
- var isFirstRenderRef = React.useRef(true);
34
- React.useEffect(function () {
35
- animationRef.current = ty.createAnimation({
36
- duration: 0,
37
- timingFunction: 'ease'
38
- });
39
- }, []);
40
- React.useEffect(function () {
41
- if (show) {
42
- isPreShow.current = true;
43
- setIsAddNode(true);
44
- } else if (isPreShow.current) {
45
- isPreShow.current = false;
46
- setTimeout(function () {
47
- setIsAddNode(false);
48
- }, delay + hideDuration);
49
- }
50
-
51
- if (isFirstRenderRef.current) {
52
- isFirstRenderRef.current = false;
53
- animationRef.current.opacity(show ? fadeOpacity : 0).step({
54
- duration: 0
55
- });
56
- } else {
57
- animationRef.current.opacity(show ? fadeOpacity : 0).step({
58
- duration: show ? showDuration : hideDuration,
59
- delay: delay
60
- });
61
- }
62
-
63
- var temp = animationRef.current.export();
64
- setTimeout(function () {
65
- setAnim(temp);
66
- }, 20);
67
- show && typeof onShow === 'function' && onShow();
68
- !show && typeof onHide === 'function' && onHide();
69
- }, [show]);
70
- return isAddNode && /*#__PURE__*/React.createElement(View, {
71
- animation: anim,
72
- style: inlineStyle(style),
73
- className: className
74
- }, children);
75
- };
76
-
77
- Fade.defaultProps = defaultMotionFadeProps;
78
- export default Fade;
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { MotionFadeProps } from '../props';
3
- declare const Fade: React.FC<MotionFadeProps>;
4
- export default Fade;
@@ -1,78 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- import * as React from 'react';
3
- import { inlineStyle } from '@ray-js/framework-shared';
4
- import { View } from '@ray-js/components';
5
- import { defaultMotionFadeProps } from '../props';
6
-
7
- var Fade = function (props) {
8
- var isPreShow = React.useRef(false);
9
- var id = props.id,
10
- style = props.style,
11
- className = props.className,
12
- children = props.children,
13
- show = props.show,
14
- onShow = props.onShow,
15
- onHide = props.onHide,
16
- showDuration = props.showDuration,
17
- hideDuration = props.hideDuration,
18
- fadeOpacity = props.fadeOpacity,
19
- delay = props.delay;
20
-
21
- var _React$useState = React.useState(undefined),
22
- _React$useState2 = _slicedToArray(_React$useState, 2),
23
- anim = _React$useState2[0],
24
- setAnim = _React$useState2[1];
25
-
26
- var _React$useState3 = React.useState(false),
27
- _React$useState4 = _slicedToArray(_React$useState3, 2),
28
- isAddNode = _React$useState4[0],
29
- setIsAddNode = _React$useState4[1]; // 是否将节点渲染到页面上
30
-
31
-
32
- var animationRef = React.useRef(null);
33
- var isFirstRenderRef = React.useRef(true);
34
- React.useEffect(function () {
35
- animationRef.current = wx.createAnimation({
36
- duration: 0,
37
- timingFunction: 'ease'
38
- });
39
- }, []);
40
- React.useEffect(function () {
41
- if (show) {
42
- isPreShow.current = true;
43
- setIsAddNode(true);
44
- } else if (isPreShow.current) {
45
- isPreShow.current = false;
46
- setTimeout(function () {
47
- setIsAddNode(false);
48
- }, delay + hideDuration);
49
- }
50
-
51
- if (isFirstRenderRef.current) {
52
- isFirstRenderRef.current = false;
53
- animationRef.current.opacity(show ? fadeOpacity : 0).step({
54
- duration: 0
55
- });
56
- } else {
57
- animationRef.current.opacity(show ? fadeOpacity : 0).step({
58
- duration: show ? showDuration : hideDuration,
59
- delay: delay
60
- });
61
- }
62
-
63
- var temp = animationRef.current.export();
64
- setTimeout(function () {
65
- setAnim(temp);
66
- }, 20);
67
- show && typeof onShow === 'function' && onShow();
68
- !show && typeof onHide === 'function' && onHide();
69
- }, [show]);
70
- return isAddNode && /*#__PURE__*/React.createElement(View, {
71
- animation: anim,
72
- style: inlineStyle(style),
73
- className: className
74
- }, children);
75
- };
76
-
77
- Fade.defaultProps = defaultMotionFadeProps;
78
- export default Fade;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- export default class Fade extends React.Component {
3
- render(): JSX.Element;
4
- }
@@ -1,28 +0,0 @@
1
- import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/esm/createClass";
3
- import _inherits from "@babel/runtime/helpers/esm/inherits";
4
- import _createSuper from "@babel/runtime/helpers/esm/createSuper";
5
- import React from 'react';
6
-
7
- var Fade = /*#__PURE__*/function (_React$Component) {
8
- _inherits(Fade, _React$Component);
9
-
10
- var _super = _createSuper(Fade);
11
-
12
- function Fade() {
13
- _classCallCheck(this, Fade);
14
-
15
- return _super.apply(this, arguments);
16
- }
17
-
18
- _createClass(Fade, [{
19
- key: "render",
20
- value: function render() {
21
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
22
- }
23
- }]);
24
-
25
- return Fade;
26
- }(React.Component);
27
-
28
- export { Fade as default };
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { MotionPullUpProps } from '../props';
3
- declare const PullUp: React.FC<MotionPullUpProps>;
4
- export default PullUp;
@@ -1,82 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
4
- var _excluded = ["style", "className", "children", "show", "onShow", "onHide", "showDuration", "hideDuration", "dropHeight", "delay"];
5
- import * as React from 'react';
6
- import { inlineStyle } from '@ray-js/framework-shared';
7
- import { View } from '@ray-js/components';
8
- import { defaultMotionPullUpProps } from '../props';
9
-
10
- var PullUp = function (props) {
11
- var isPreShow = React.useRef(false);
12
-
13
- var style = props.style,
14
- className = props.className,
15
- children = props.children,
16
- show = props.show,
17
- onShow = props.onShow,
18
- onHide = props.onHide,
19
- showDuration = props.showDuration,
20
- hideDuration = props.hideDuration,
21
- dropHeight = props.dropHeight,
22
- delay = props.delay,
23
- restProps = _objectWithoutProperties(props, _excluded);
24
-
25
- var _React$useState = React.useState(undefined),
26
- _React$useState2 = _slicedToArray(_React$useState, 2),
27
- anim = _React$useState2[0],
28
- setAnim = _React$useState2[1];
29
-
30
- var _React$useState3 = React.useState(false),
31
- _React$useState4 = _slicedToArray(_React$useState3, 2),
32
- isAddNode = _React$useState4[0],
33
- setIsAddNode = _React$useState4[1]; // 是否将节点渲染到页面上
34
-
35
-
36
- var animationRef = React.useRef(null);
37
- var isFirstRenderRef = React.useRef(true);
38
- React.useEffect(function () {
39
- animationRef.current = ty.createAnimation({
40
- duration: 0,
41
- timingFunction: 'ease'
42
- });
43
- }, []);
44
- React.useEffect(function () {
45
- if (show) {
46
- isPreShow.current = true;
47
- setIsAddNode(true);
48
- } else if (isPreShow.current) {
49
- isPreShow.current = false;
50
- setTimeout(function () {
51
- setIsAddNode(false);
52
- }, delay + hideDuration);
53
- }
54
-
55
- if (isFirstRenderRef.current) {
56
- isFirstRenderRef.current = false;
57
- animationRef.current.translateY(show ? 0 : dropHeight).step({
58
- duration: 0
59
- });
60
- } else {
61
- animationRef.current.translateY(show ? 0 : dropHeight).step({
62
- duration: show ? showDuration : hideDuration,
63
- delay: delay
64
- });
65
- }
66
-
67
- var temp = animationRef.current.export();
68
- setTimeout(function () {
69
- setAnim(temp);
70
- }, 20);
71
- show && typeof onShow === 'function' && onShow();
72
- !show && typeof onHide === 'function' && onHide();
73
- }, [show]);
74
- return isAddNode && /*#__PURE__*/React.createElement(View, _extends({
75
- animation: anim,
76
- style: inlineStyle(style),
77
- className: className
78
- }, restProps), children);
79
- };
80
-
81
- PullUp.defaultProps = defaultMotionPullUpProps;
82
- export default PullUp;
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { MotionPullUpProps } from '../props';
3
- declare const PullUp: React.FC<MotionPullUpProps>;
4
- export default PullUp;
@@ -1,82 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
4
- var _excluded = ["style", "className", "children", "show", "onShow", "onHide", "showDuration", "hideDuration", "dropHeight", "delay"];
5
- import * as React from 'react';
6
- import { inlineStyle } from '@ray-js/framework-shared';
7
- import { View } from '@ray-js/components';
8
- import { defaultMotionPullUpProps } from '../props';
9
-
10
- var PullUp = function (props) {
11
- var isPreShow = React.useRef(false);
12
-
13
- var style = props.style,
14
- className = props.className,
15
- children = props.children,
16
- show = props.show,
17
- onShow = props.onShow,
18
- onHide = props.onHide,
19
- showDuration = props.showDuration,
20
- hideDuration = props.hideDuration,
21
- dropHeight = props.dropHeight,
22
- delay = props.delay,
23
- restProps = _objectWithoutProperties(props, _excluded);
24
-
25
- var _React$useState = React.useState(undefined),
26
- _React$useState2 = _slicedToArray(_React$useState, 2),
27
- anim = _React$useState2[0],
28
- setAnim = _React$useState2[1];
29
-
30
- var _React$useState3 = React.useState(false),
31
- _React$useState4 = _slicedToArray(_React$useState3, 2),
32
- isAddNode = _React$useState4[0],
33
- setIsAddNode = _React$useState4[1]; // 是否将节点渲染到页面上
34
-
35
-
36
- var animationRef = React.useRef(null);
37
- var isFirstRenderRef = React.useRef(true);
38
- React.useEffect(function () {
39
- animationRef.current = wx.createAnimation({
40
- duration: 0,
41
- timingFunction: 'ease'
42
- });
43
- }, []);
44
- React.useEffect(function () {
45
- if (show) {
46
- isPreShow.current = true;
47
- setIsAddNode(true);
48
- } else if (isPreShow.current) {
49
- isPreShow.current = false;
50
- setTimeout(function () {
51
- setIsAddNode(false);
52
- }, delay + hideDuration);
53
- }
54
-
55
- if (isFirstRenderRef.current) {
56
- isFirstRenderRef.current = false;
57
- animationRef.current.translateY(show ? 0 : dropHeight).step({
58
- duration: 0
59
- });
60
- } else {
61
- animationRef.current.translateY(show ? 0 : dropHeight).step({
62
- duration: show ? showDuration : hideDuration,
63
- delay: delay
64
- });
65
- }
66
-
67
- var temp = animationRef.current.export();
68
- setTimeout(function () {
69
- setAnim(temp);
70
- }, 20);
71
- show && typeof onShow === 'function' && onShow();
72
- !show && typeof onHide === 'function' && onHide();
73
- }, [show]);
74
- return isAddNode && /*#__PURE__*/React.createElement(View, _extends({
75
- animation: anim,
76
- style: inlineStyle(style),
77
- className: className
78
- }, restProps), children);
79
- };
80
-
81
- PullUp.defaultProps = defaultMotionPullUpProps;
82
- export default PullUp;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- export default class Fade extends React.Component {
3
- render(): JSX.Element;
4
- }
@@ -1,28 +0,0 @@
1
- import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/esm/createClass";
3
- import _inherits from "@babel/runtime/helpers/esm/inherits";
4
- import _createSuper from "@babel/runtime/helpers/esm/createSuper";
5
- import React from 'react';
6
-
7
- var Fade = /*#__PURE__*/function (_React$Component) {
8
- _inherits(Fade, _React$Component);
9
-
10
- var _super = _createSuper(Fade);
11
-
12
- function Fade() {
13
- _classCallCheck(this, Fade);
14
-
15
- return _super.apply(this, arguments);
16
- }
17
-
18
- _createClass(Fade, [{
19
- key: "render",
20
- value: function render() {
21
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
22
- }
23
- }]);
24
-
25
- return Fade;
26
- }(React.Component);
27
-
28
- export { Fade as default };
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { MotionPushDownProps } from '../props';
3
- declare const PushDown: React.FC<MotionPushDownProps>;
4
- export default PushDown;