Merge branch 'next' into feat/babel

NervJS · Apr 11, 2022 · e23ca7e · e23ca7e
2 parents 4b4e794 + 523d846
commit e23ca7e
Show file tree

Hide file tree

Showing 20 changed files with 338 additions and 102 deletions.
diff --git a/packages/shared/src/template.ts b/packages/shared/src/template.ts
@@ -227,6 +227,8 @@ export class BaseTemplate {
         return str + `bind${value}="eh" `
       } else if (attr === 'class') {
         return str + `class="{{i.${Shortcuts.Class}}}" `
+      } else if (attr === 'style') {
+        return str + `style="{{i.${Shortcuts.Style}}}" `
       }
 
       return str + `${attr}="{{i.${toCamelCase(attr)}}}" `

diff --git a/packages/taro-components-rn/src/components/Input/PropsType.tsx b/packages/taro-components-rn/src/components/Input/PropsType.tsx
@@ -34,6 +34,8 @@ export interface InputProps extends FormItemProps{
   cursor?: number;
   selectionStart: number;
   selectionEnd: number;
+  placeholderStyle?: string;
+  placeholderTextColor?: string;
   onInput?: (evt: Event) => void;
   onChange?: (evt: Event) => void;
   onFocus?: (evt: Event) => void;

diff --git a/packages/taro-components-rn/src/components/Input/index.tsx b/packages/taro-components-rn/src/components/Input/index.tsx
@@ -33,7 +33,7 @@ import {
   TextInputContentSizeChangeEventData,
   KeyboardTypeOptions
 } from 'react-native'
-import { noop, omit } from '../../utils'
+import { noop, omit, parseStyles } from '../../utils'
 import { InputProps, InputState } from './PropsType'
 
 const keyboardTypeMap: { [key: string]: string } = {
@@ -193,8 +193,8 @@ class _Input extends React.Component<InputProps, InputState> {
       _autoHeight,
       autoFocus,
       focus,
+      placeholderStyle,
     } = this.props
-
     const keyboardType: KeyboardTypeOptions = keyboardTypeMap[type] as KeyboardTypeOptions
 
     const selection = (() => {
@@ -210,30 +210,36 @@ class _Input extends React.Component<InputProps, InputState> {
     // fix: https://reactnative.dev/docs/textinput#multiline
     const textAlignVertical = _multiline ? 'top' : 'auto'
 
+    const placeholderTextColor = this.props.placeholderTextColor || parseStyles(placeholderStyle)?.color
+
+    const props = omit(this.props, [
+      'style',
+      'value',
+      'type',
+      'password',
+      'placeholder',
+      'disabled',
+      'maxlength',
+      'confirmType',
+      'confirmHold',
+      'cursor',
+      'selectionStart',
+      'selectionEnd',
+      'onInput',
+      'onFocus',
+      'onBlur',
+      'onKeyDown',
+      'onConfirm',
+      '_multiline',
+      '_autoHeight',
+      '_onLineChange',
+      'placeholderStyle',
+      'placeholderTextColor',
+    ])
+
     return (
       <TextInput
-        {...omit(this.props, [
-          'style',
-          'value',
-          'type',
-          'password',
-          'placeholder',
-          'disabled',
-          'maxlength',
-          'confirmType',
-          'confirmHold',
-          'cursor',
-          'selectionStart',
-          'selectionEnd',
-          'onInput',
-          'onFocus',
-          'onBlur',
-          'onKeyDown',
-          'onConfirm',
-          '_multiline',
-          '_autoHeight',
-          '_onLineChange'
-        ])}
+        {...props}
         defaultValue={value}
         keyboardType={keyboardType}
         secureTextEntry={!!password}
@@ -255,9 +261,14 @@ class _Input extends React.Component<InputProps, InputState> {
         textAlignVertical={textAlignVertical}
         onContentSizeChange={this.onContentSizeChange}
         underlineColorAndroid="rgba(0,0,0,0)"
-        style={[{
-          padding: 0,
-        }, style, _multiline && _autoHeight && { height: Math.max(35, this.state.height) }]}
+        placeholderTextColor={placeholderTextColor}
+        style={[
+          {
+            padding: 0
+          },
+          style,
+          _multiline && _autoHeight && { height: Math.max(35, this.state.height) }
+        ]}
       />
     )
   }

diff --git a/packages/taro-components/types/Button.d.ts b/packages/taro-components/types/Button.d.ts
@@ -168,19 +168,13 @@ interface ButtonProps extends StandardProps {
    */
   onGetPhoneNumber?: CommonEventFunction<ButtonProps.onGetPhoneNumberEventDetail>
 
-  /** 获取头像信息
-   *
-   * 生效时机：`open-type="chooseavatar"`
-   * @supported weapp
-   */
-  onChooseAvatar?: CommonEventFunction<ButtonProps.onChooseAvatarEventDetail>
-
   /** 获取用户实名
    *
    * 生效时机：`open-type="getRealnameAuthInfo"`
+   * @deprecated
    * @supported weapp
    */
-  onGetRealnameAuthInfo?: CommonEventFunction
+  onGetRealNameAuthInfo?: CommonEventFunction
 
   /** 当使用开放能力时，发生错误的回调
    *
@@ -201,7 +195,14 @@ interface ButtonProps extends StandardProps {
    * 生效时机：`open-type="launchApp"`
    * @supported weapp
    */
-  onLaunchapp?: CommonEventFunction
+  onLaunchApp?: CommonEventFunction
+
+  /** 获取用户头像回调
+   *
+   * 生效时机：`open-type="chooseAvatar"`
+   * @supported weapp
+   */
+  onChooseAvatar?: CommonEventFunction
 }
 
 declare namespace ButtonProps {
@@ -233,34 +234,34 @@ declare namespace ButtonProps {
   /** open-type 的合法值 */
   interface openTypeKeys {
     weapp: {
-      /** 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
+      /** 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从回调中获得具体信息
        * @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
-      /** 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息
+      /** 获取用户手机号，可以从回调中获取到用户信息
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
        */
       getPhoneNumber
-      /** 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息
-       * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
-       */
-      chooseAvatar
-      /** 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 */
+      /** 获取用户信息，可以从回调中获取到用户信息 */
       getUserInfo
-      /** 用户实名信息授权，已经弃用 */
-      getRealnameAuthInfo
-      /** 打开APP，可以通过app-parameter属性设定向APP传的参数
+      /** 用户实名信息授权
+       * @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
@@ -372,13 +373,10 @@ declare namespace ButtonProps {
     encryptedData: string
     /** 加密算法的初始向量 */
     iv: string
-    /** 动态令牌。可通过动态令牌换取用户手机号。使用方法详情 [phonenumber.getPhoneNumber](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/phonenumber/phonenumber.getPhoneNumber.html) 接口 */
-    code:string
-  }
-
-  interface onChooseAvatarEventDetail {
-    /* 获取用户头像的临时链接 */
-    avatarUrl: 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 {

diff --git a/packages/taro-components/types/Input.d.ts b/packages/taro-components/types/Input.d.ts
@@ -35,6 +35,10 @@ interface InputProps extends StandardProps, FormItemProps {
    */
   placeholderClass?: string
 
+  /** 指定 placeholder 文字的颜色
+   * @supported rn
+   */
+  placeholderTextColor?: string
   /** 是否禁用
    * @supported weapp, h5, rn
    */
@@ -233,25 +237,24 @@ declare namespace InputProps {
  * @example_react
  * ```tsx
  * class App extends Component {
- *
  *   render () {
  *     return (
- *         <View className='example-body'>
- *           <Text>可以自动聚焦的 input</Text>
- *             <Input type='text' placeholder='将会获取焦点' focus/>
- *             <Text>控制最大输入长度的 input</Text>
- *             <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
- *             <Text>数字输入的 input</Text>
- *             <Input type='number' placeholder='这是一个数字输入框'/>
- *             <Text>密码输入的 input</Text>
- *             <Input type='password' password placeholder='这是一个密码输入框'/>
- *             <Text>带小数点的 input</Text>
- *             <Input type='digit' placeholder='带小数点的数字键盘'/>
- *             <Text>身份证输入的 input</Text>
- *             <Input type='idcard' placeholder='身份证输入键盘'/>
- *             <Text>控制占位符颜色的 input</Text>
- *             <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
- *         </View>
+ *       <View className='example-body'>
+ *         <Text>可以自动聚焦的 input</Text>
+ *           <Input type='text' placeholder='将会获取焦点' focus/>
+ *           <Text>控制最大输入长度的 input</Text>
+ *           <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
+ *           <Text>数字输入的 input</Text>
+ *           <Input type='number' placeholder='这是一个数字输入框'/>
+ *           <Text>密码输入的 input</Text>
+ *           <Input type='password' password placeholder='这是一个密码输入框'/>
+ *           <Text>带小数点的 input</Text>
+ *           <Input type='digit' placeholder='带小数点的数字键盘'/>
+ *           <Text>身份证输入的 input</Text>
+ *           <Input type='idcard' placeholder='身份证输入键盘'/>
+ *           <Text>控制占位符颜色的 input</Text>
+ *           <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
+ *       </View>
  *     )
  *   }
  * }

diff --git a/packages/taro-components/types/KeyboardAccessory.d.ts b/packages/taro-components/types/KeyboardAccessory.d.ts
@@ -4,21 +4,33 @@ import { StandardProps } from './common'
 /** @ignore */
 type KeyboardAccessoryProps = StandardProps
 
-/** 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
+/** 设置 Input / Textarea 聚焦时键盘上方 CoverView / CoverImage 工具栏视图。需要配置 Taro 插件 `@tarojs/plugin-platform-weapp` 的 `enablekeyboardAccessory` 参数为 `true` 后才能使用，请参考：[#9548](https://github.com/NervJS/taro/issues/9548#issuecomment-891682216)。
  *
  * @classification forms
  * @supported weapp
  * @example
+ * ```js
+ * // config/index.js
+ * {
+ *   // ...
+ *   plugins: [
+ *     ['@tarojs/plugin-platform-weapp', {
+ *       enablekeyboardAccessory: true
+ *     }]
+ *   ]
+ * }
+ * ```
+ *
  * ```tsx
  * class App extends Component {
  *   render () {
  *     return (
- *         <Textarea holdKeyboard="{{true}}">
- *           <KeyboardAccessory className="container" style={{ height: 50 }} >
- *             <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
- *             <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
- *           </KeyboardAccessory>
- *         </Textarea>
+ *       <Textarea holdKeyboard="{{true}}">
+ *         <KeyboardAccessory className="container" style={{ height: 50 }} >
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
+ *         </KeyboardAccessory>
+ *       </Textarea>
  *     )
  *   }
  * }

diff --git a/packages/taro-components/types/Picker.d.ts b/packages/taro-components/types/Picker.d.ts
@@ -350,7 +350,7 @@ declare namespace PickerRegionProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  *   export default {
  *     data() {
@@ -365,11 +365,11 @@ declare namespace PickerRegionProps {
  *       onChange: function(e) {
  *         this.selectorChecked = this.selector[e.detail.value]
  *       },
- * 
+ *
  *       onTimeChange: function(e) {
  *         this.timeSel = e.detail.value
  *       },
- * 
+ *
  *       onDateChange: function(e) {
  *         this.dateSel = e.detail.value
  *       }