import { ComponentType } from 'react' import { StandardProps, CommonEventFunction } from './common' import { StyleProp, ViewStyle } from 'react-native' interface ButtonProps extends StandardProps { /** 按钮的大小 * @supported weapp, h5, rn, alipay, tt * @default default */ size?: keyof ButtonProps.Size /** 按钮的样式类型 * @supported weapp, h5, rn, alipay, tt * @default default */ type?: keyof ButtonProps.Type /** 按钮是否镂空,背景色透明 * @supported weapp, h5, rn, alipay * @default false */ plain?: boolean /** 是否禁用 * @supported weapp, h5, rn, alipay, tt * @default false */ disabled?: boolean /** 名称前是否带 loading 图标 * @supported weapp, h5, rn, alipay, tt * @default false */ loading?: boolean /** 用于 `
` 组件,点击分别会触发 `` 组件的 submit/reset 事件 * @supported weapp, alipay, tt */ formType?: keyof ButtonProps.FormType /** 微信开放能力 * @supported weapp, alipay, qq, tt */ openType?: ButtonProps.OpenType /** 指定按下去的样式类。当 `hover-class="none"` 时,没有点击态效果 * @default button-hover * @supported weapp, alipay, h5, tt * @rn 支持 hoverStyle 属性,但框架未支持 hoverClass */ hoverClass?: string /** 由于 RN 不支持 Class,故 RN 端的 Button 组件实现了 `hoverStyle`属性,写法和 style 类似,只不过 `hoverStyle` 的样式是指定按下去的样式。 * @default none * @supported rn */ hoverStyle?: StyleProp /** 指定是否阻止本节点的祖先节点出现点击态 * @default false * @supported weapp, alipay, tt */ hoverStopPropagation?: boolean /** 按住后多久出现点击态,单位毫秒 * @default 20 * @supported weapp, alipay, h5, rn, tt */ hoverStartTime?: number /** 手指松开后点击态保留时间,单位毫秒 * @default 70 * @supported weapp, alipay, h5, rn, tt */ hoverStayTime?: number /** 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 * * 生效时机: `open-type="getUserInfo"` * @supported weapp */ lang?: keyof ButtonProps.Lang /** 会话来源 * * 生效时机:`open-type="contact"` * @supported weapp */ sessionFrom?: string /** 会话内消息卡片标题 * * 生效时机:`open-type="contact"` * @default 当前标题 * @supported weapp */ sendMessageTitle?: string /** 会话内消息卡片点击跳转小程序路径 * * 生效时机:`open-type="contact"` * @default 当前标题 * @supported weapp */ sendMessagePath?: string /** 会话内消息卡片图片 * * 生效时机:`open-type="contact"` * @default 截图 * @supported weapp */ sendMessageImg?: string /** 打开 APP 时,向 APP 传递的参数 * * 生效时机:`open-type="launchApp"` * @supported weapp, qq */ appParameter?: string /** 微信小程序子商户能力中,添加 business-id 字段指向子商户 * * 生效时机:`open-type="contact"` * @supported weapp */ businessId?: string /** 支付宝小程序 scope * * 生效时机:`open-type="getAuthorize"` * @supported weapp */ scope?: 'userInfo' | 'phoneNumber' /** 显示会话内消息卡片 * * 生效时机:`open-type="contact"` * @default false */ showMessageCard?: boolean /** 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与 Taro.getUserInfo 返回的一致 * * 生效时机: `open-type="getUserInfo"` * @supported weapp */ onGetUserInfo?: CommonEventFunction /** 支付宝获取会员基础信息授权回调 * * 生效时机:`open-type="getAuthorize"` * @supported alipay */ onGetAuthorize?: CommonEventFunction /** 客服消息回调 * * 生效时机:`open-type="contact"` * @supported weapp */ onContact?: CommonEventFunction /** 获取用户手机号回调 * * 生效时机:`open-type="getphonenumber"` * @supported weapp, tt */ onGetPhoneNumber?: CommonEventFunction /** 获取用户实名 * * 生效时机:`open-type="getRealnameAuthInfo"` * @deprecated * @supported weapp */ onGetRealNameAuthInfo?: CommonEventFunction /** 当使用开放能力时,发生错误的回调 * * 生效时机:`open-type="launchApp"` * @supported weapp */ onError?: CommonEventFunction /** 在打开授权设置页后回调 * * 生效时机:`open-type="openSetting"` * @supported weapp */ onOpenSetting?: CommonEventFunction /** 打开 APP 成功的回调 * * 生效时机:`open-type="launchApp"` * @supported weapp */ onLaunchApp?: CommonEventFunction /** 获取用户头像回调 * * 生效时机:`open-type="chooseAvatar"` * @supported weapp */ onChooseAvatar?: CommonEventFunction } declare namespace ButtonProps { /** size 的合法值 */ interface Size { /** 默认大小 */ default /** 小尺寸 */ mini } /** type 的合法值 */ interface Type { /** 绿色 */ primary /** 白色 */ default /** 红色 */ warn } /** form-type 的合法值 */ interface FormType { /** 提交表单 */ submit /** 重置表单 */ reset } /** open-type 的合法值 */ type OpenType = keyof openTypeKeys["weapp"] | keyof openTypeKeys["alipay"] | keyof openTypeKeys["qq"] /** open-type 的合法值 */ interface openTypeKeys { weapp: { /** 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从回调中获得具体信息 * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html */ contact /** 触发用户转发,使用前建议先阅读使用指引 * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95 */ share /** 获取用户手机号,可以从回调中获取到用户信息 * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html */ getPhoneNumber /** 获取用户信息,可以从回调中获取到用户信息 */ getUserInfo /** 用户实名信息授权 * @deprecated */ getRealNameAuthInfo /** 打开APP,可以通过 app-parameter 属性设定向APP传的参数 * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html */ launchApp /** 打开授权设置页 */ openSetting /** 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 */ feedback /** 获取用户头像,可以从回调中获得具体信息 */ chooseAvatar } /** 支付宝小程序专属的 open-type 合法值 * @see https://opendocs.alipay.com/mini/component/button */ alipay: { /** 触发 自定义分享 */ share /** 支持小程序授权 */ getAuthorize /** 分享到通讯录好友 */ contactShare /** 关注生活号 */ lifestyle } /** QQ 小程序专属的 open-type 合法值 * @see https://q.qq.com/wiki/develop/miniprogram/component/form/button.html */ qq: { /** 触发用户转发,使用前建议先阅读使用指引 * @see https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_share.html#%E8%BD%AC%E5%8F%91-2 */ share /** 获取用户信息,可以从 onGetUserInfo 回调中获取到用户信息 */ getUserInfo /** 打开APP,可以通过 app-parameter 属性设定向APP传的参数 * @see https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_app.html */ launchApp /** 打开授权设置页 */ openSetting /** 呼起吐个槽反馈页面,开发者可以到官网查看反馈 */ feedback /** 呼起群资料卡页面,可以通过 group-id 属性设定需要打开的群资料卡的群号,同时 app.json 中必须配置 groupIdList(数量不超过 10 个),表明可以打开群资料卡的群号 */ openGroupProfile /** 添加好友,对方需要通过该小程序进行授权,允许被加好友后才能调用成功[用户授权](https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_userinfo.html#%E6%8E%88%E6%9D%83) */ addFriend /** 添加彩签,点击后添加状态有用户提示,无回调 */ addColorSign /** 打开公众号资料卡,可以通过 public-id 属性设定需要打开的公众号资料卡的号码,同时 app.json 中必须配置 publicIdList(目前只能配置 1 个),表明可以打开的公众号资料卡的号码 */ openPublicProfile /** 添加群应用(只有管理员或群主有权操作,建议先调用 qq.getGroupInfo 获取当前用户是否为管理员,如果是管理员才显示该按钮),添加后给button绑定 onAddGroupApp 事件接收回调数据。 */ addGroupApp /** 在自定义开放数据域组件中,向指定好友发起分享据 */ shareMessageToFriend } } /** lang 的合法值 */ interface Lang { /** 英文 */ en /** 简体中文 */ zh_CN /** 繁体中文 */ zh_TW } interface onGetUserInfoEventDetail { userInfo: { /** 昵称 */ nickName: string /** 头像 */ avatarUrl: string /** 性别 */ gender: keyof Gender /** 省份,如:`Yunnan` */ province: string /** 城市,如:`Dalian` */ city: string /** 国家,如:`China` */ country: string } /** 不包括敏感信息的原始数据 `JSON` 字符串,用于计算签名 */ rawData: string /** 使用 `sha1(rawData + sessionkey)` 得到字符串,用于校验用户信息 */ signature: string /** 包括敏感数据在内的完整用户信息的加密数据 */ encryptedData: string /** 加密算法的初始向量 */ iv: string /* 用户信息的调用状态 */ errMsg: string /** 敏感数据对应的云 ID,开通[云开发](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)的小程序才会返回,可通过云调用直接获取开放数据,详细见[云调用直接获取开放数据](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#method-cloud) */ cloudID?: string } /** 性别的合法值 */ interface Gender { /** 未知 */ 0 /** 男 */ 1 /** 女 */ 2 } interface onContactEventDetail { /* 小程序消息的调用状态 */ errMsg: string /** 小程序消息指定的路径 */ path: string /** 小程序消息指定的查询参数 */ query: Record } interface onGetPhoneNumberEventDetail { /* 获取用户手机号的调用状态 */ errMsg: string /** 包括敏感数据在内的完整用户信息的加密数据 */ encryptedData: string /** 加密算法的初始向量 */ iv: string /** 动态令牌。可通过动态令牌换取用户手机号。 * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95 */ code?: string } interface onOpenSettingEventDetail { /* 打开授权设置页的调用状态 */ errMsg: string /* 用户授权结果 */ authSetting: Record } } /** 按钮 * @classification forms * @supported weapp, h5, rn, tt * @example_react * ```tsx * export default class PageButton extends Component { * state = { * btn: [ * { * text: '页面主操作 Normal', * size: 'default', * type: 'primary' * }, * { * text: '页面主操作 Loading', * size: 'default', * type: 'primary', * loading: true, * }, * { * text: '页面主操作 Disabled', * size: 'default', * type: 'primary', * disabled: true, * }, * { * text: '页面次要操作 Normal', * size: 'default', * type: 'default' * }, * { * text: '页面次要操作 Disabled', * size: 'default', * type: 'default', * disabled: true, * }, * { * text: '警告类操作 Normal', * size: 'default', * type: 'warn' * }, * { * text: '警告类操作 Disabled', * size: 'default', * type: 'warn', * disabled: true, * } * ] * } * render () { * return ( * * {this.state.btn.map(item => { * return ( * * ) * })} * * * * * * * * * ) * } * } * ``` * @example_vue * ```html * * * * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/component/button.html */ declare const Button: ComponentType export { Button, ButtonProps }