Merge branch 'dev' into feat_component_search_bar

* dev:
  fix: #84 style 为null 处理
  fix(button): type - sendMessageTitle (#86)
  fix(action-sheet): 完善 UI 问题 #78
  fix(action-sheet): 修复 ActionSheetFooter 样式问题 closed #78
  fix(input): fix #85 types 错误
  docs: 对原生组件在Modal中的异常行为作出了说明 (#80)
  fix(input): onClick type optional
  fix(input): types

@types/button.d.ts

@@ -25,7 +25,7 @@ export interface AtButtonProps extends AtComponent{
   openType?: 'contact' | 'share' | 'getUserInfo' | 'getPhoneNumber' | 'launchApp' | 'openSetting' | 'feedback' | 'getRealnameAuthInfo'
   lang?: string
   sessionFrom?: string
-  sendMessageTitle: string,
+  sendMessageTitle?: string,
   sendMessagePath?: string,
   sendMessageImg?: string,
   showMessageCard?: boolean,

@types/input.d.ts

@@ -1,14 +1,12 @@
 import { MouseEvent, ComponentClass } from 'react'
 import { BaseEventFunction, BaseEvent } from '@tarojs/components/types/common'
 
-declare type InputValue = string | number
+declare type InputProp = string | number
 declare type InputFunction = (value: string | number, event: BaseEvent) => void
 
 import AtComponent from './base'
 
 export interface AtInputProps extends AtComponent{
-  style?: string
-
   name: string
 
   title?: string
@@ -23,9 +21,9 @@ export interface AtInputProps extends AtComponent{
 
   disabled?: boolean
 
-  maxlength?: number
+  maxlength?: InputProp
 
-  value?: InputValue
+  value?: InputProp
 
   placeholder?: string
 
@@ -37,7 +35,15 @@ export interface AtInputProps extends AtComponent{
 
   confirmType?: string
 
-  cursorSpacing?: number
+  cursor?: InputProp
+
+  selectionStart?: InputProp
+
+  selectionEnd?: InputProp
+
+  cursorSpacing?: InputProp
+
+  adjustPosition?: boolean
 
   backgroundColor?: string
 
@@ -51,6 +57,8 @@ export interface AtInputProps extends AtComponent{
 
   onConfirm?: InputFunction
 
+  onClick?: InputFunction
+
   onErrorClick?: BaseEventFunction
 }
 

docs/markdown/modal.md

@@ -16,6 +16,8 @@ import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
 
 :::
 
+> 由于微信小程序的限制，在 `Modal` 组件中使用一些客户端创建的原生组件（如：`textarea`、`input`等）时，即使 `Modal` 组件处于隐藏状态，原生组件依然会在页面上显示，具体参见微信小程序文档：[原生组件](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)。
+
 ## 一般用法
 
 :::demo

src/common/component.js

@@ -1,15 +1,17 @@
 import Taro, { Component } from '@tarojs/taro'
 
 const objectToString = style => {
-  if (typeof style === 'object') {
+  if (style && typeof style === 'object') {
     let styleStr = ''
     Object.keys(style).forEach(key => {
       const lowerCaseKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
       styleStr += `${lowerCaseKey}:${style[key]};`
     })
     return styleStr
+  } else if (style && typeof style === 'string') {
+    return style
   }
-  return style
+  return ''
 }
 
 export default class AtComponent extends Component {

src/components/action-sheet/footer/index.js

@@ -10,38 +10,15 @@ import AtComponent from '../../../common/component'
 import './index.scss'
 
 export default class AtActionSheetFooter extends AtComponent {
-  constructor () {
-    super(...arguments)
-    this.state = {
-      isIPhoneX: false
-    }
-  }
-
   handleClick = (...args) => {
     if (_isFunction(this.props.onClick)) {
       this.props.onClick(...args)
     }
   }
 
-  componentDidMount () {
-    const curEnv = Taro.getEnv()
-
-    if (
-      curEnv === Taro.ENV_TYPE.WEAPP &&
-      Taro.getSystemInfoSync().model.indexOf('iPhone X') >= 0
-    ) {
-      this.setState({ isIPhoneX: true })
-    }
-  }
-
   render () {
-    const { isIPhoneX } = this.state
-
     const rootClass = classNames(
       'at-action-sheet-footer',
-      {
-        'at-action-sheet-footer--ipx': isIPhoneX
-      },
       this.props.className
     )
 

src/components/action-sheet/footer/index.scss

@@ -4,8 +4,6 @@
 .at-action-sheet-footer {
   font-size: $font-size-xl;
   padding: $spacing-v-lg $spacing-h-lg;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
   border-top: 12px solid rgba($color: $color-border-base, $alpha: 0.3);
   @include active();
 

src/components/action-sheet/index.js

@@ -19,6 +19,7 @@ export default class AtActionSheet extends AtComponent {
     const { isOpened } = props
 
     this.state = {
+      isIPhoneX: false,
       _isOpened: isOpened
     }
   }
@@ -34,6 +35,17 @@ export default class AtActionSheet extends AtComponent {
     }
   }
 
+  componentDidMount () {
+    const curEnv = Taro.getEnv()
+
+    if (
+      curEnv === Taro.ENV_TYPE.WEAPP &&
+      Taro.getSystemInfoSync().model.indexOf('iPhone X') >= 0
+    ) {
+      this.setState({ isIPhoneX: true })
+    }
+  }
+
   handleClose = () => {
     if (_isFunction(this.props.onClose)) {
       this.props.onClose()
@@ -62,12 +74,13 @@ export default class AtActionSheet extends AtComponent {
 
   render () {
     const { title, cancelText, className } = this.props
-    const { _isOpened } = this.state
+    const { _isOpened, isIPhoneX } = this.state
 
     const rootClass = classNames(
       'at-action-sheet',
       {
-        'at-action-sheet--active': _isOpened
+        'at-action-sheet--active': _isOpened,
+        'at-action-sheet--ipx': isIPhoneX
       },
       className
     )

src/components/action-sheet/index.scss

@@ -23,13 +23,18 @@ $action-sheet-timer: 300ms;
   &__container {
     bottom: 0;
     width: 100%;
-    max-height: 50%;
     text-align: center;
     position: absolute;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
     background-color: $color-white;
     transform: translate3d(0, 100%, 0);
     transition: transform $action-sheet-timer $timing-func;
   }
+
+  &--ipx &__container {
+    padding-bottom: 68px;
+  }
 }
 
 .at-action-sheet--active {

src/components/input/index.js

@@ -54,18 +54,33 @@ export default class AtInput extends AtComponent {
       PropTypes.string,
       PropTypes.number
     ]),
-    name: '',
+    name: PropTypes.string,
     placeholder: PropTypes.string,
     placeholderStyle: PropTypes.string,
     placeholderClass: PropTypes.string,
     title: PropTypes.string,
     confirmType: PropTypes.string,
-    cursor: PropTypes.number,
-    selectionStart: PropTypes.number,
-    selectionEnd: PropTypes.number,
+    cursor: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+    selectionStart: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+    selectionEnd: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
     adjustPosition: PropTypes.bool,
-    cursorSpacing: PropTypes.number,
-    maxlength: PropTypes.number,
+    cursorSpacing: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+    maxlength: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
     type: PropTypes.string,
     disabled: PropTypes.bool,
     border: PropTypes.bool,