@ray-js/components 1.7.70 → 1.7.71
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.
- package/lib/Textarea/Textarea.thing.js +17 -4
- package/lib/Textarea/props.d.ts +173 -66
- package/lib/Textarea/props.js +119 -1
- package/package.json +5 -5
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
const _excluded = ["id", "className", "style", "value", "placeholderStyle", "placeholder", "onInput", "onFocus", "onLinechange", "onBlur", "maxLength", "disabled", "name", "autoHeight"];
|
|
4
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
|
4
5
|
import * as React from 'react';
|
|
5
6
|
import clsx from 'clsx';
|
|
6
7
|
import { inlineStyle } from '@ray-js/framework-shared';
|
|
7
8
|
import { Textarea as RemaxTextarea } from '@ray-js/adapter';
|
|
9
|
+
import { nextFrame } from '../core';
|
|
8
10
|
import styles from './index.module.less';
|
|
9
11
|
const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
12
|
const {
|
|
@@ -24,6 +26,17 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
24
26
|
autoHeight
|
|
25
27
|
} = props,
|
|
26
28
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
29
|
+
const [internalValue, setInternalValue] = React.useState(value);
|
|
30
|
+
const bufferValue = React.useRef(value);
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
if (value !== bufferValue.current) {
|
|
33
|
+
setInternalValue(bufferValue.current);
|
|
34
|
+
nextFrame(1).then(() => {
|
|
35
|
+
bufferValue.current = value;
|
|
36
|
+
setInternalValue(value);
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}, [value]);
|
|
27
40
|
return /*#__PURE__*/React.createElement(RemaxTextarea, _extends({
|
|
28
41
|
name: name
|
|
29
42
|
// @ts-ignore
|
|
@@ -43,13 +56,13 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
43
56
|
const {
|
|
44
57
|
value
|
|
45
58
|
} = e.detail;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
59
|
+
bufferValue.current = value;
|
|
60
|
+
e.value = value;
|
|
61
|
+
onInput === null || onInput === void 0 || onInput(e);
|
|
49
62
|
},
|
|
50
63
|
placeholder: placeholder,
|
|
51
64
|
placeholderStyle: inlineStyle(placeholderStyle),
|
|
52
|
-
value:
|
|
65
|
+
value: internalValue
|
|
53
66
|
}, restProps));
|
|
54
67
|
});
|
|
55
68
|
export default Input;
|
package/lib/Textarea/props.d.ts
CHANGED
|
@@ -1,80 +1,187 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { BaseProps, FormEvent } from '../types';
|
|
3
|
-
import {
|
|
3
|
+
import { BaseEvent } from '@ray-js/adapter';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated 请使用 `TextareaInputEvent` 替代
|
|
6
|
+
*/
|
|
4
7
|
export type TextareaEvent = FormEvent<{
|
|
5
8
|
value: string;
|
|
6
9
|
}>;
|
|
10
|
+
/** textarea 输入事件数据 */
|
|
11
|
+
export interface TextareaInputDetail {
|
|
12
|
+
/** textarea 内容 */
|
|
13
|
+
value: string;
|
|
14
|
+
/** 光标位置 */
|
|
15
|
+
cursor: number;
|
|
16
|
+
/** 键值 */
|
|
17
|
+
keyCode: number;
|
|
18
|
+
}
|
|
19
|
+
/** textarea 通用文本事件数据 */
|
|
20
|
+
export interface TextareaValueDetail {
|
|
21
|
+
/** 输入框内容 */
|
|
22
|
+
value: string;
|
|
23
|
+
}
|
|
24
|
+
/** textarea 聚焦事件数据 */
|
|
25
|
+
export interface TextareaFocusDetail {
|
|
26
|
+
/** 输入框内容 */
|
|
27
|
+
value: string;
|
|
28
|
+
}
|
|
29
|
+
/** textarea 行数变化事件数据 */
|
|
30
|
+
export interface TextareaLineChangeDetail {
|
|
31
|
+
/** 输入框高度 */
|
|
32
|
+
height: number;
|
|
33
|
+
/** 行数 */
|
|
34
|
+
lineCount: number;
|
|
35
|
+
/** 输入框高度，单位 rpx */
|
|
36
|
+
heightRpx?: number;
|
|
37
|
+
/** 行高 */
|
|
38
|
+
lineHeight?: number;
|
|
39
|
+
}
|
|
40
|
+
/** textarea 输入事件对象 */
|
|
41
|
+
export interface TextareaInputEvent extends BaseEvent {
|
|
42
|
+
/** 事件类型 */
|
|
43
|
+
type: 'input';
|
|
44
|
+
/** 事件数据 */
|
|
45
|
+
detail: TextareaInputDetail;
|
|
46
|
+
/** textarea 当前值 */
|
|
47
|
+
value: string;
|
|
48
|
+
}
|
|
49
|
+
/** textarea 聚焦事件对象 */
|
|
50
|
+
export interface TextareaFocusEvent extends BaseEvent {
|
|
51
|
+
/** 事件类型 */
|
|
52
|
+
type: 'focus';
|
|
53
|
+
/** 事件数据 */
|
|
54
|
+
detail: TextareaFocusDetail;
|
|
55
|
+
}
|
|
56
|
+
/** textarea 失焦事件对象 */
|
|
57
|
+
export interface TextareaBlurEvent extends BaseEvent {
|
|
58
|
+
/** 事件类型 */
|
|
59
|
+
type: 'blur';
|
|
60
|
+
/** 事件数据 */
|
|
61
|
+
detail: TextareaValueDetail;
|
|
62
|
+
}
|
|
63
|
+
/** textarea 行数变化事件对象 */
|
|
64
|
+
export interface TextareaLineChangeEvent extends BaseEvent {
|
|
65
|
+
/** 事件类型 */
|
|
66
|
+
type: 'linechange';
|
|
67
|
+
/** 事件数据 */
|
|
68
|
+
detail: TextareaLineChangeDetail;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* 文本域，用于多行文本输入与编辑。
|
|
72
|
+
*
|
|
73
|
+
* @public
|
|
74
|
+
* @alias Textarea
|
|
75
|
+
* @since @ray-js/ray 0.5.10
|
|
76
|
+
* @example 基础用法
|
|
77
|
+
* ```tsx | sandbox previewTitle="基础用法"
|
|
78
|
+
* import React from 'react';
|
|
79
|
+
* import { Textarea, View } from '@ray-js/ray';
|
|
80
|
+
*
|
|
81
|
+
* export default function () {
|
|
82
|
+
* return (
|
|
83
|
+
* <View style={{ padding: '20px' }}>
|
|
84
|
+
* <Textarea placeholder="请输入内容..." />
|
|
85
|
+
* </View>
|
|
86
|
+
* );
|
|
87
|
+
* }
|
|
88
|
+
* ```
|
|
89
|
+
*
|
|
90
|
+
* @example 多行输入
|
|
91
|
+
* ```tsx | sandbox previewTitle="多行输入"
|
|
92
|
+
* import React, { useState } from 'react';
|
|
93
|
+
* import { Textarea, Button, View, Text } from '@ray-js/ray';
|
|
94
|
+
*
|
|
95
|
+
* export default function () {
|
|
96
|
+
* const [value, setValue] = useState('');
|
|
97
|
+
*
|
|
98
|
+
* return (
|
|
99
|
+
* <View style={{ padding: '20px' }}>
|
|
100
|
+
* <View style={{ marginBottom: '16px' }}>
|
|
101
|
+
* <Textarea
|
|
102
|
+
* value={value}
|
|
103
|
+
* placeholder="请输入..."
|
|
104
|
+
* maxLength={200}
|
|
105
|
+
* onInput={(e) => setValue(e.value)}
|
|
106
|
+
* style={{ marginTop: '8px', minHeight: '80px' }}
|
|
107
|
+
* />
|
|
108
|
+
* <Text style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
|
|
109
|
+
* 已输入 {value.length} / 200 字符
|
|
110
|
+
* </Text>
|
|
111
|
+
* </View>
|
|
112
|
+
* <View style={{ marginBottom: '16px' }}>
|
|
113
|
+
* <Text>自动增高:</Text>
|
|
114
|
+
* <Textarea
|
|
115
|
+
* autoHeight
|
|
116
|
+
* placeholder="输入内容会自动增高..."
|
|
117
|
+
* style={{ marginTop: '8px', minHeight: '40px' }}
|
|
118
|
+
* />
|
|
119
|
+
* </View>
|
|
120
|
+
* </View>
|
|
121
|
+
* );
|
|
122
|
+
* }
|
|
123
|
+
* ```
|
|
124
|
+
* @example 禁用与事件
|
|
125
|
+
* ```tsx | sandbox previewTitle="禁用与事件"
|
|
126
|
+
* import React from 'react';
|
|
127
|
+
* import { Textarea, View, Text } from '@ray-js/ray';
|
|
128
|
+
*
|
|
129
|
+
* export default function () {
|
|
130
|
+
* return (
|
|
131
|
+
* <View style={{ padding: '20px' }}>
|
|
132
|
+
* <View style={{ marginBottom: '16px' }}>
|
|
133
|
+
* <Text>禁用状态:</Text>
|
|
134
|
+
* <Textarea
|
|
135
|
+
* disabled
|
|
136
|
+
* value="不可编辑的内容"
|
|
137
|
+
* placeholderStyle={{ color: '#ccc' }}
|
|
138
|
+
* style={{ marginTop: '8px' }}
|
|
139
|
+
* />
|
|
140
|
+
* </View>
|
|
141
|
+
* <View style={{ marginBottom: '16px' }}>
|
|
142
|
+
* <Text>事件监听:</Text>
|
|
143
|
+
* <Textarea
|
|
144
|
+
* name="feedback"
|
|
145
|
+
* placeholder="输入反馈内容..."
|
|
146
|
+
* onFocus={(e) => console.log('聚焦:', e.detail.value)}
|
|
147
|
+
* onBlur={(e) => console.log('失焦:', e.detail.value)}
|
|
148
|
+
* onLinechange={(e) => console.log('行数变化:', e.detail.lineCount)}
|
|
149
|
+
* style={{ marginTop: '8px', minHeight: '80px' }}
|
|
150
|
+
* />
|
|
151
|
+
* </View>
|
|
152
|
+
* </View>
|
|
153
|
+
* );
|
|
154
|
+
* }
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
7
157
|
export interface TextareaProps extends BaseProps {
|
|
8
|
-
/**
|
|
9
|
-
* @description.en id
|
|
10
|
-
* @description.zh 组件的 id
|
|
11
|
-
* @default null
|
|
12
|
-
*/
|
|
158
|
+
/** 表单名称 */
|
|
13
159
|
name?: string;
|
|
14
|
-
/**
|
|
15
|
-
* @description.en content
|
|
16
|
-
* @description.zh 输入框的内容
|
|
17
|
-
* @default null
|
|
18
|
-
*/
|
|
160
|
+
/** 输入框的内容 */
|
|
19
161
|
value?: string;
|
|
20
|
-
/**
|
|
21
|
-
* @description.en Placeholder when the input box is empty
|
|
22
|
-
* @description.zh 输入框为空时占位符
|
|
23
|
-
* @default null
|
|
24
|
-
*/
|
|
162
|
+
/** 输入框为空时占位符 */
|
|
25
163
|
placeholder?: string;
|
|
26
|
-
/**
|
|
27
|
-
* @description.en Specify placeholder styles that currently only support Color,font Size, and font Weight
|
|
28
|
-
* @description.zh 指定 placeholder 的样式，目前仅支持 color,fontSize 和 fontWeight
|
|
29
|
-
* @default null
|
|
30
|
-
*/
|
|
164
|
+
/** 指定 placeholder 的样式，目前仅支持 color、fontSize 和 fontWeight（对象或 CSS 声明字符串） */
|
|
31
165
|
placeholderStyle?: React.CSSProperties;
|
|
32
|
-
/**
|
|
33
|
-
* @description.en If the Account is Disabled
|
|
34
|
-
* @description.zh 是否禁用
|
|
35
|
-
* @default null
|
|
36
|
-
*/
|
|
166
|
+
/** 是否禁用 */
|
|
37
167
|
disabled?: boolean;
|
|
38
|
-
/**
|
|
39
|
-
* @description.en Maximum length. If the value is set to -1, the maximum length is not limited
|
|
40
|
-
* @description.zh 最大输入长度，设置为 -1 的时候不限制最大长度
|
|
41
|
-
* @default null
|
|
42
|
-
*/
|
|
168
|
+
/** 最大输入长度，设置为 -1 的时候不限制最大长度 */
|
|
43
169
|
maxLength?: number;
|
|
44
|
-
/**
|
|
45
|
-
* @description.en Automatic increase or not
|
|
46
|
-
* @description.zh 是否自动增高
|
|
47
|
-
* @default null
|
|
48
|
-
*/
|
|
170
|
+
/** 是否自动增高，设置 autoHeight 时，style.height 不生效 */
|
|
49
171
|
autoHeight?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
|
|
58
|
-
* @description.zh 输入框聚焦时触发
|
|
59
|
-
* @default null
|
|
60
|
-
*/
|
|
61
|
-
onFocus?: (event: GenericEvent<{
|
|
62
|
-
value: any;
|
|
63
|
-
}>) => void;
|
|
64
|
-
/**
|
|
65
|
-
* @description.en Triggered when the input box loses focus
|
|
66
|
-
* @description.zh 输入框失去焦点时触发
|
|
67
|
-
* @default null
|
|
68
|
-
*/
|
|
69
|
-
onBlur?: (event: GenericEvent<{
|
|
70
|
-
value: any;
|
|
71
|
-
}>) => void;
|
|
72
|
-
/**
|
|
73
|
-
* @description.en Called when the number of lines in the input box changes, event.detail = {height: 0, lineCount: 0}
|
|
74
|
-
* @description.zh 输入框行数变化时调用，event.detail = {height: 0, lineCount: 0}
|
|
75
|
-
* @default null
|
|
76
|
-
*/
|
|
77
|
-
onLinechange?: (event: GenericEvent<{
|
|
78
|
-
value: any;
|
|
79
|
-
}>) => void;
|
|
172
|
+
/** 当键盘输入时触发 */
|
|
173
|
+
onInput?: (event: TextareaInputEvent) => void;
|
|
174
|
+
/** 输入框聚焦时触发 */
|
|
175
|
+
onFocus?: (event: TextareaFocusEvent) => void;
|
|
176
|
+
/** 输入框失去焦点时触发 */
|
|
177
|
+
onBlur?: (event: TextareaBlurEvent) => void;
|
|
178
|
+
/** 输入框行数变化时触发，detail 含 height、lineCount 等 */
|
|
179
|
+
onLinechange?: (event: TextareaLineChangeEvent) => void;
|
|
80
180
|
}
|
|
181
|
+
/**
|
|
182
|
+
* Textarea 组件默认值
|
|
183
|
+
*
|
|
184
|
+
* @belong Textarea
|
|
185
|
+
* @defaults
|
|
186
|
+
*/
|
|
187
|
+
export declare const textareaDefaultProps: Partial<TextareaProps>;
|
package/lib/Textarea/props.js
CHANGED
|
@@ -1 +1,119 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated 请使用 `TextareaInputEvent` 替代
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/** textarea 输入事件数据 */
|
|
6
|
+
|
|
7
|
+
/** textarea 通用文本事件数据 */
|
|
8
|
+
|
|
9
|
+
/** textarea 聚焦事件数据 */
|
|
10
|
+
|
|
11
|
+
/** textarea 行数变化事件数据 */
|
|
12
|
+
|
|
13
|
+
/** textarea 输入事件对象 */
|
|
14
|
+
|
|
15
|
+
/** textarea 聚焦事件对象 */
|
|
16
|
+
|
|
17
|
+
/** textarea 失焦事件对象 */
|
|
18
|
+
|
|
19
|
+
/** textarea 行数变化事件对象 */
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* 文本域，用于多行文本输入与编辑。
|
|
23
|
+
*
|
|
24
|
+
* @public
|
|
25
|
+
* @alias Textarea
|
|
26
|
+
* @since @ray-js/ray 0.5.10
|
|
27
|
+
* @example 基础用法
|
|
28
|
+
* ```tsx | sandbox previewTitle="基础用法"
|
|
29
|
+
* import React from 'react';
|
|
30
|
+
* import { Textarea, View } from '@ray-js/ray';
|
|
31
|
+
*
|
|
32
|
+
* export default function () {
|
|
33
|
+
* return (
|
|
34
|
+
* <View style={{ padding: '20px' }}>
|
|
35
|
+
* <Textarea placeholder="请输入内容..." />
|
|
36
|
+
* </View>
|
|
37
|
+
* );
|
|
38
|
+
* }
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @example 多行输入
|
|
42
|
+
* ```tsx | sandbox previewTitle="多行输入"
|
|
43
|
+
* import React, { useState } from 'react';
|
|
44
|
+
* import { Textarea, Button, View, Text } from '@ray-js/ray';
|
|
45
|
+
*
|
|
46
|
+
* export default function () {
|
|
47
|
+
* const [value, setValue] = useState('');
|
|
48
|
+
*
|
|
49
|
+
* return (
|
|
50
|
+
* <View style={{ padding: '20px' }}>
|
|
51
|
+
* <View style={{ marginBottom: '16px' }}>
|
|
52
|
+
* <Textarea
|
|
53
|
+
* value={value}
|
|
54
|
+
* placeholder="请输入..."
|
|
55
|
+
* maxLength={200}
|
|
56
|
+
* onInput={(e) => setValue(e.value)}
|
|
57
|
+
* style={{ marginTop: '8px', minHeight: '80px' }}
|
|
58
|
+
* />
|
|
59
|
+
* <Text style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
|
|
60
|
+
* 已输入 {value.length} / 200 字符
|
|
61
|
+
* </Text>
|
|
62
|
+
* </View>
|
|
63
|
+
* <View style={{ marginBottom: '16px' }}>
|
|
64
|
+
* <Text>自动增高:</Text>
|
|
65
|
+
* <Textarea
|
|
66
|
+
* autoHeight
|
|
67
|
+
* placeholder="输入内容会自动增高..."
|
|
68
|
+
* style={{ marginTop: '8px', minHeight: '40px' }}
|
|
69
|
+
* />
|
|
70
|
+
* </View>
|
|
71
|
+
* </View>
|
|
72
|
+
* );
|
|
73
|
+
* }
|
|
74
|
+
* ```
|
|
75
|
+
* @example 禁用与事件
|
|
76
|
+
* ```tsx | sandbox previewTitle="禁用与事件"
|
|
77
|
+
* import React from 'react';
|
|
78
|
+
* import { Textarea, View, Text } from '@ray-js/ray';
|
|
79
|
+
*
|
|
80
|
+
* export default function () {
|
|
81
|
+
* return (
|
|
82
|
+
* <View style={{ padding: '20px' }}>
|
|
83
|
+
* <View style={{ marginBottom: '16px' }}>
|
|
84
|
+
* <Text>禁用状态:</Text>
|
|
85
|
+
* <Textarea
|
|
86
|
+
* disabled
|
|
87
|
+
* value="不可编辑的内容"
|
|
88
|
+
* placeholderStyle={{ color: '#ccc' }}
|
|
89
|
+
* style={{ marginTop: '8px' }}
|
|
90
|
+
* />
|
|
91
|
+
* </View>
|
|
92
|
+
* <View style={{ marginBottom: '16px' }}>
|
|
93
|
+
* <Text>事件监听:</Text>
|
|
94
|
+
* <Textarea
|
|
95
|
+
* name="feedback"
|
|
96
|
+
* placeholder="输入反馈内容..."
|
|
97
|
+
* onFocus={(e) => console.log('聚焦:', e.detail.value)}
|
|
98
|
+
* onBlur={(e) => console.log('失焦:', e.detail.value)}
|
|
99
|
+
* onLinechange={(e) => console.log('行数变化:', e.detail.lineCount)}
|
|
100
|
+
* style={{ marginTop: '8px', minHeight: '80px' }}
|
|
101
|
+
* />
|
|
102
|
+
* </View>
|
|
103
|
+
* </View>
|
|
104
|
+
* );
|
|
105
|
+
* }
|
|
106
|
+
* ```
|
|
107
|
+
*/
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Textarea 组件默认值
|
|
111
|
+
*
|
|
112
|
+
* @belong Textarea
|
|
113
|
+
* @defaults
|
|
114
|
+
*/
|
|
115
|
+
export const textareaDefaultProps = {
|
|
116
|
+
maxLength: 140,
|
|
117
|
+
autoHeight: false,
|
|
118
|
+
disabled: false
|
|
119
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ray-js/components",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.71",
|
|
4
4
|
"description": "Ray basic components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ray"
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@ray-core/macro": "^0.4.9",
|
|
31
31
|
"@ray-core/wechat": "^0.4.9",
|
|
32
|
-
"@ray-js/adapter": "1.7.
|
|
33
|
-
"@ray-js/framework-shared": "1.7.
|
|
32
|
+
"@ray-js/adapter": "1.7.71",
|
|
33
|
+
"@ray-js/framework-shared": "1.7.71",
|
|
34
34
|
"ahooks": "^3.8.5",
|
|
35
35
|
"clsx": "^1.2.1",
|
|
36
36
|
"core-js": "^3.43.0",
|
|
@@ -40,11 +40,11 @@
|
|
|
40
40
|
"style-to-object": "^0.3.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@ray-js/cli": "1.7.
|
|
43
|
+
"@ray-js/cli": "1.7.71"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "52614d4beba5537188fd44f1b71adb319e7d0322"
|
|
50
50
|
}
|