1
import * as React from 'react';
2 3
import { createHostComponent } from '@remax/shared';
3
import { BaseProps, GenericEvent } from '../../types/component';
4

5
export interface ButtonProps extends BaseProps {
6
  /**
7
   * 1.0.0
8
   * default	默认大小
9
   * mini	小尺寸
10
   */
11
  size?: 'default' | 'mini';
12
  /**
13
   * 1.0.0
14
   * primary	绿色
15
   * default	白色
16
   * warn	红色
17
   */
18
  type?: 'primary' | 'default' | 'warn';
19

20
  /**
21
   * 1.0.0
22
   * 按钮是否镂空,背景色透明
23
   */
24
  plain?: boolean;
25
  /**
26
   * 1.0.0
27
   * 是否禁用
28
   */
29
  disabled?: boolean;
30
  /**
31
   * 1.0.0
32
   * 名称前是否带 loading 图标
33
   */
34
  loading?: boolean;
35
  /**
36
   * 1.0.0
37
   * submit	提交表单
38
   * reset	重置表单
39
   */
40
  formType?: 'submit' | 'reset';
41
  /**
42
   * - 微信小程序 & QQ 小程序
43
   * contact	打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息	1.1.0
44
   * share	触发用户转发,使用前建议先阅读使用指引	1.2.0
45
   * getPhoneNumber	获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息	1.2.0
46
   * getUserInfo	获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息	1.3.0
47
   * launchApp	打开 App,可以通过 app-parameter 属性设定向 App 传的参数	1.9.5
48
   * openSetting	打开授权设置页	2.0.7
49
   * feedback	打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	2.1.0
50
   *
51
   * - QQ 小程序
52
   * openGroupProfile	呼起群资料卡页面,可以通过 group-id 属性设定需要打开的群资料卡的群号,同时 app.json 中必须配置 groupIdList(数量不超过 10 个),表明可以打开群资料卡的群号	1.4.7
53
   * addFriend	添加好友,对方需要通过该小程序进行授权,允许被加好友后才能调用成功	1.0.0
54
   * addColorSign	添加彩签,点击后添加状态有用户提示,无回调	1.10.0
55
   * openPublicProfile	打开公众号资料卡,可以通过 public-id 属性设定需要打开的公众号资料卡的号码,同时 app.json 中必须配置 publicIdList(目前只能配置 1 个),表明可以打开的公众号资料卡的号码	1.12.0
56
   * addGroupApp	添加群应用(只有管理员或群主有权操作,建议先调用 qq.getGroupInfo 获取当前用户是否为管理员,如果是管理员才显示该按钮),添加后给 button 绑定 bindaddgroupapp 事件接收回调数据	1.16.0
57
   * shareMessageToFriend	在自定义开放数据域组件中,向指定好友发起分享	1.17.0
58
   * addToFavorites	收藏当前页面,点击按钮后会触发 Page.onAddToFavorites 方法	1.19.0
59
   */
60
  openType?:
61
    | 'contact'
62
    | 'share'
63
    | 'getPhoneNumber'
64
    | 'getUserInfo'
65
    | 'launchApp'
66
    | 'openSetting'
67
    | 'feedback'
68
    | 'openGroupProfile'
69
    | 'addFriend'
70
    | 'addColorSign'
71
    | 'openPublicProfile'
72
    | 'addGroupApp'
73
    | 'shareMessageToFriend'
74
    | 'addToFavorites';
75
  /**
76
   * 1.0.0
77
   * 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果
78
   */
79
  hoverClassName?: string;
80
  /**
81
   * 1.5.0
82
   * 指定是否阻止本节点的祖先节点出现点击态
83
   */
84
  hoverStopPropagation?: boolean;
85
  /**
86
   * 1.0.0
87
   * 按住后多久出现点击态,单位毫秒
88
   */
89
  hoverStartTime?: number;
90
  /**
91
   * 1.0.0
92
   * 手指松开后点击态保留时间,单位毫秒
93
   */
94
  hoverStayTime?: number;
95
  /**
96
   * 1.3.0
97
   * en	英文
98
   * zh_CN	简体中文
99
   * zh_TW	繁体中文
100
   */
101
  lang?: 'en' | 'zh_CN' | 'zh_TW';
102
  /**
103
   * 1.4.0
104
   * 会话来源,open-type="contact"时有效
105
   */
106
  sessionFrom?: string;
107
  /**
108
   * 1.5.0
109
   * 会话内消息卡片标题,open-type="contact"时有效
110
   */
111
  sendMessageTitle?: string;
112
  /**
113
   * 1.5.0
114
   * 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效
115
   */
116
  sendMessagePath?: string;
117
  /**
118
   * 1.5.0
119
   * 会话内消息卡片图片,open-type="contact"时有效
120
   */
121
  sendMessageImg?: string;
122
  /**
123
   * 1.9.5
124
   * 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效
125
   */
126
  appParameter?: string;
127
  /**
128
   * QQ 小程序 1.0.0
129
   * 打开 APP 时,应用的包名(Android)
130
   */
131
  appPackageName?: string;
132
  /**
133
   * QQ 小程序 1.0.0
134
   * 打开 APP 时,应用的 Bundle ID(iOS)
135
   */
136
  appBundleID?: string;
137
  /**
138
   * QQ 小程序 1.0.0
139
   * 打开 APP 时,应用在 QQ 互联中的 AppID
140
   */
141
  appConnectID?: string;
142
  /**
143
   * QQ 小程序 1.0.0
144
   * 添加好友时,对方的 openid
145
   */
146
  openId?: string;
147
  /**
148
   * QQ 小程序 1.0.0
149
   * 打开群资料卡时,传递的群号
150
   */
151
  groupId?: string;
152
  /**
153
   * QQ 小程序 1.12.0
154
   * 打开公众号资料卡时,传递的号码
155
   */
156
  publicId?: string;
157
  /**
158
   * QQ 小程序 1.4.4
159
   * 分享类型集合,标志位形式
160
   */
161
  shareType?: number;
162
  /**
163
   * QQ 小程序 1.15.0
164
   * 分享类型集合,数组形式
165
   */
166
  shareMode?: Array<'qq' | 'qzone' | 'quickToDialog' | 'wechatFriends' | 'wechatMoment' | 'recentContacts'>;
167
  /**
168
   * QQ 小程序 1.17.0
169
   * 发送对象的 FriendInfo
170
   */
171
  shareMessageFriendInfo?: any;
172
  /**
173
   * QQ 小程序 1.17.0
174
   * 转发标题,不传则默认使用当前小程序的昵称。
175
   */
176
  shareMessageTitle?: string;
177
  /**
178
   * QQ 小程序 1.17.0
179
   * 转发显示图片的链接,可以是网络图片路径(仅 QQ CDN 域名路径)或本地图片文件路径或相对代码包根目录的图片文件路径。显示图片长宽比是 5:4
180
   */
181
  shareMessageImg?: string;
182
  /**
183
   * 1.5.0
184
   * 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,
185
   * 用户点击后可以快速发送小程序消息,open-type="contact"时有效
186
   */
187
  showMessageCard?: boolean;
188
  /**
189
   * 1.3.0
190
   * 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,
191
   * open-type="getUserInfo"时有效
192
   */
193
  onGetUserInfo?: (event: GenericEvent) => any;
194
  /**
195
   * 1.5.0
196
   * 客服消息回调,open-type="contact"时有效
197
   */
198
  onContact?: (event: GenericEvent) => any;
199
  /**
200
   * 1.2.0
201
   * 获取用户手机号回调,open-type=getPhoneNumber时有效
202
   */
203
  onGetPhoneNumber?: (event: GenericEvent) => any;
204
  /**
205
   * 1.9.5
206
   * 当使用开放能力时,发生错误的回调,open-type=launchApp时有效
207
   */
208
  onError?: (event: GenericEvent) => any;
209
  /**
210
   * 2.0.7
211
   * 在打开授权设置页后回调,open-type=openSetting时有效
212
   */
213
  onOpenSetting?: (event: GenericEvent) => any;
214
  /**
215
   * 2.4.4
216
   * 打开 APP 成功的回调,open-type=launchApp时有效
217
   */
218
  onLaunchApp?: (event: GenericEvent) => any;
219
  /**
220
   * QQ 小程序 1.0.0
221
   * 添加好友的回调
222
   */
223
  onAddFriend?: (event: GenericEvent) => any;
224
  /**
225
   * QQ 小程序 1.16.0
226
   * 添加群应用的回调
227
   */
228
  onAddGroupApp?: (event: GenericEvent) => any;
229
}
230

231
/**
232
 * https://developers.weixin.qq.com/miniprogram/dev/component/button.html
233
 * https://q.qq.com/wiki/develop/miniprogram/component/form/button.html
234
 */
235 3
export const Button: React.ComponentType<ButtonProps> = createHostComponent<ButtonProps>('button');
236

237 3
Button.defaultProps = {
238
  hoverClassName: 'button-hover',
239
  hoverStartTime: 20,
240
  hoverStayTime: 70,
241
};

Read our documentation on viewing source code .

Loading