NervJS · ZEJIA-LIU · Jan 24, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 24, 2024
diff --git a/packages/taro-components-react/src/components/button/index.md b/packages/taro-components-react/src/components/button/index.md
@@ -0,0 +1,20 @@
+button
+
+## API
+
+|     | 属性                   | 类型    | 默认值       | 说明                                                                                        |
+| --- | ---------------------- | ------- | ------------ | ------------------------------------------------------------------------------------------- |
+| √   | type                   | String  | default      | 按钮的样式类型                                                                              |
+| √   | size                   | String  | default      | 按钮的大小 px                                                                               |
+| √   | plain                  | Boolean | false        | 按钮是否镂空，背景色透明                                                                    |
+| √   | disabled               | Boolean | false        | 是否禁用                                                                                    |
+| √   | loading                | Boolean | false        | 名称前是否带 loading 图标                                                                   |
+|     | form-type              | String  |              | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件                                |
+|     | open-type              | String  |              | 微信开放能力                                                                                |
+|     | app-parameter          | String  |              | 打开 APP 时，向 APP 传递的参数                                                              |
+| √   | hover-class            | String  | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果                            |
+|     | hover-stop-propagation | Boolean | false        | 指定是否阻止本节点的祖先节点出现点击态                                                      |
+| √   | hover-start-time       | Number  | 20           | 按住后多久出现点击态，单位毫秒                                                              |
+| √   | hover-stay-time        | Number  | 70           | 手指松开后点击态保留时间，单位毫秒                                                          |
+|     | bindgetuserinfo        | Handler |              | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo |
+|     | lang                   | String  | en           | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。                           |
diff --git a/packages/taro-components-react/src/components/button/index.tsx b/packages/taro-components-react/src/components/button/index.tsx
@@ -0,0 +1,119 @@
+import './style/index.scss'
+
+import classNames from 'classnames'
+import React from 'react'
+
+import { omit } from '../../utils'
+
+interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>  {
+  size?: string
+  plain?: boolean
+  hoverClass?: string
+  hoverStartTime?: number
+  hoverStayTime?: number
+  disabled?: boolean
+  loading?: boolean
+  type?: string
+  className?: string
+}
+
+interface IState {
+  hover:boolean
+  touch: boolean
+}
+
+class Button extends  React.Component<IProps, IState> {
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      hover: false,
+      touch: false
+    }
+  }
+
+  startTimer
+  endTimer
+
+  componentWillUnmount () {
+    this.startTimer && clearTimeout(this.startTimer)
+    this.endTimer && clearTimeout(this.endTimer)
+  }
+
+  render () {
+    const {
+      plain = false,
+      children,
+      disabled = false,
+      className,
+      style,
+      onClick,
+      onTouchStart,
+      onTouchEnd,
+      hoverClass = 'button-hover',
+      hoverStartTime = 20,
+      hoverStayTime = 70,
+      loading = false,
+
+      type,
+    } = this.props
+    const cls = classNames(
+      className,
+      'taro-button-core',
+      {
+        [`${hoverClass}`]: this.state.hover && !disabled
+      }
+    )
+
+    const _onTouchStart = e => {
+      this.setState(() => ({
+        touch: true
+      }))
+      if (hoverClass && hoverClass !== 'none' && !disabled) {
+        this.startTimer = setTimeout(() => {
+          if (this.state.touch) {
+            this.setState(() => ({
+              hover: true
+            }))
+          }
+        }, hoverStartTime)
+      }
+      onTouchStart && onTouchStart(e)
+    }
+    const _onTouchEnd = e => {
+      this.setState(() => ({
+        touch: false
+      }))
+      if (hoverClass && hoverClass !== 'none' && !disabled) {
+        this.endTimer = setTimeout(() => {
+          if (!this.state.touch) {
+            this.setState(() => ({
+              hover: false
+            }))
+          }
+        }, hoverStayTime)
+      }
+      onTouchEnd && onTouchEnd(e)
+    }
+
+    return (
+      <button
+        {...omit(this.props, ['hoverClass', 'onTouchStart', 'onTouchEnd', 'type', 'loading'])}
+        type={type}
+        className={cls}
+        style={style}
+        onClick={onClick}
+        disabled={disabled}
+        onTouchStart={_onTouchStart}
+        onTouchEnd={_onTouchEnd}
+        loading={loading.toString()}
+        plain={plain.toString()}
+      >
+        {loading && <i className='weui-loading' />}
+        {children}
+      </button>
+    )
+  }
+}
+
+export default Button
diff --git a/packages/taro-components-react/src/components/button/style/index.scss b/packages/taro-components-react/src/components/button/style/index.scss
@@ -0,0 +1,251 @@
+
+@import 'variable';
+@import 'weui-btn_loading.scss';
+$weuiBtnHeight: 46px;
+$weuiBtnFontSize: 18px;
+$weuiBtnFontColor: #fff;
+$weuiBtnActiveFontColor: rgb(255 255 255 / 60%);
+$weuiBtnDisabledFontColor: rgb(255 255 255 / 60%);
+$weuiBtnBorderRadius: 5px;
+$weuiBtnDefaultGap: 15px;
+
+// Button Mini
+$weuiBtnMiniFontSize: 13px;
+$weuiBtnMiniHeight: 2.3;
+
+// Button Default
+$weuiBtnDefaultFontColor: #000;
+$weuiBtnDefaultActiveFontColor: rgb(0 0 0 / 60%);
+$weuiBtnDefaultDisabledFontColor: rgb(0 0 0 / 30%);
+$weuiBtnDefaultBg: #f8f8f8;
+$weuiBtnDefaultActiveBg: #dedede;
+$weuiBtnDefaultDisabledBg: #f7f7f7;
+
+// Button Primary
+$weuiBtnPrimaryBg: #1aad19;
+$weuiBtnPrimaryActiveBg: #179b16;
+$weuiBtnPrimaryDisabledBg: #9ed99d;
+
+// Button Warn
+$weuiBtnWarnBg: #e64340;
+$weuiBtnWarnActiveBg: #ce3c39;
+$weuiBtnWarnDisabledBg: #ec8b89;
+
+// Button Plain Primary
+$weuiBtnPlainPrimaryColor: rgb(26 173 25 / 100%);
+$weuiBtnPlainPrimaryBorderColor: rgb(26 173 25 / 100%);
+$weuiBtnPlainPrimaryActiveColor: rgb(26 173 25 / 60%);
+$weuiBtnPlainPrimaryActiveBorderColor: rgb(26 173 25 / 60%);
+
+// Button Plain Default
+$weuiBtnPlainDefaultColor: rgb(53 53 53 / 100%);
+$weuiBtnPlainDefaultBorderColor: rgb(53 53 53 / 100%);
+$weuiBtnPlainDefaultActiveColor: rgb(53 53 53 / 60%);
+$weuiBtnPlainDefaultActiveBorderColor: rgb(53 53 53 / 60%);
+
+// Button Plain Warn
+$weuiBtnPlainWarnColor: #e64340;
+$weuiBtnPlainWarnBorderColor: #e64340;
+$weuiBtnPlainWarnActiveColor: rgba(230 67 64 / 60%);
+$weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%);
+
+.taro-button-core {
+  display: block;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 14px;
+  padding-right: 14px;
+  border-width: 0;
+  border-radius: $weuiBtnBorderRadius;
+  width: 100%;
+  appearance: none;
+  outline: 0;
+  background-color: $weuiBtnDefaultBg;
+  line-height: 2.55555556;
+  text-decoration: none;
+  text-align: center;
+  font-size: $weuiBtnFontSize;
+  color: $weuiBtnDefaultFontColor;
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:not([disabled]):active {
+    background-color: $weuiBtnDefaultActiveBg;
+    color: $weuiBtnDefaultActiveFontColor;
+  }
+
+  &::after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    border: 1px solid rgb(0 0 0 / 20%);
+    border-radius: $weuiBtnBorderRadius * 2;
+    width: 200%;
+    height: 200%;
+    content: ' ';
+    transform: scale(0.5);
+    transform-origin: 0 0;
+  }
+
+  & + & {
+    margin-top: $weuiBtnDefaultGap;
+  }
+
+  &[type="default"] {
+    background-color: $weuiBtnDefaultBg;
+    color: $weuiBtnDefaultFontColor;
+
+    &:not([disabled]):visited {
+      color: $weuiBtnDefaultFontColor;
+    }
+
+    &:not([disabled]):active {
+      background-color: $weuiBtnDefaultActiveBg;
+      color: $weuiBtnDefaultActiveFontColor;
+    }
+  }
+
+  &[size="mini"] {
+    display: inline-block;
+    padding: 0 1.32em;
+    width: auto;
+    line-height: $weuiBtnMiniHeight;
+    font-size: $weuiBtnMiniFontSize;
+  }
+
+  &[plain],
+  &[plain][type="default"],
+  &[plain][type="primary"] {
+    border-width: 1px;
+    background-color: transparent;
+  }
+
+  &[disabled] {
+    color: $weuiBtnDisabledFontColor;
+
+    &[type="default"] {
+      background-color: $weuiBtnDefaultDisabledBg;
+      color: $weuiBtnDefaultDisabledFontColor;
+    }
+
+    &[type="primary"] {
+      background-color: $weuiBtnPrimaryDisabledBg;
+    }
+
+    &[type="warn"] {
+      background-color: $weuiBtnWarnDisabledBg;
+    }
+  }
+
+  &[loading] {
+    .weui-loading {
+      margin: -0.2em 0.34em 0 0;
+    }
+
+    &[type="primary"],
+    &[type="warn"] {
+      color: $weuiBtnActiveFontColor;
+    }
+
+    &[type="primary"] {
+      background-color: $weuiBtnPrimaryActiveBg;
+    }
+
+    &[type="warn"] {
+      background-color: $weuiBtnWarnActiveBg;
+    }
+  }
+
+  &[plain][type="primary"] {
+    border: 1px solid $weuiBtnPlainPrimaryBorderColor;
+    color: $weuiBtnPlainPrimaryColor;
+
+    &:not([disabled]):active {
+      border-color: $weuiBtnPlainPrimaryActiveBorderColor;
+      background-color: transparent;
+      color: $weuiBtnPlainPrimaryActiveColor;
+    }
+
+    &::after {
+      border-width: 0;
+    }
+  }
+
+  &[plain][type="warn"] {
+    border: 1px solid $weuiBtnPlainWarnBorderColor;
+    color: $weuiBtnPlainWarnColor;
+
+    &:not([disabled]):active {
+      border-color: $weuiBtnPlainWarnActiveBorderColor;
+      background-color: transparent;
+      color: $weuiBtnPlainWarnActiveColor;
+    }
+
+    &::after {
+      border-width: 0;
+    }
+  }
+
+  &[plain],
+  &[plain][type="default"] {
+    border: 1px solid $weuiBtnPlainDefaultBorderColor;
+    color: $weuiBtnPlainDefaultColor;
+
+    &:not([disabled]):active {
+      border-color: $weuiBtnPlainDefaultActiveBorderColor;
+      background-color: transparent;
+      color: $weuiBtnPlainDefaultActiveColor;
+    }
+
+    &::after {
+      border-width: 0;
+    }
+  }
+
+  &[type="primary"] {
+    background-color: $weuiBtnPrimaryBg;
+    color: #fff;
+
+    &:not([disabled]):visited {
+      color: $weuiBtnFontColor;
+    }
+
+    &:not([disabled]):active {
+      background-color: $weuiBtnPrimaryActiveBg;
+      color: $weuiBtnActiveFontColor;
+    }
+  }
+
+  &[type="warn"] {
+    background-color: $weuiBtnWarnBg;
+    color: #fff;
+
+    &:not([disabled]):visited {
+      color: $weuiBtnFontColor;
+    }
+
+    &:not([disabled]):active {
+      background-color: $weuiBtnWarnActiveBg;
+      color: $weuiBtnActiveFontColor;
+    }
+  }
+
+  &[plain][disabled] {
+    border: 1px solid rgb(0 0 0 / 20%);
+    background-color: #f7f7f7;
+    color: rgb(0 0 0 / 30%);
+  }
+
+  &[plain][disabled][type="primary"] {
+    border: 1px solid rgb(0 0 0 / 20%);
+    background-color: #f7f7f7;
+    color: rgb(0 0 0 / 30%);
+  }
+}