@gm-mobile/c-react 3.9.3-beta.27 → 3.9.3-beta.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/c-react",
-  "version": "3.9.3-beta.27",
+  "version": "3.9.3-beta.30",
   "description": "> TODO: description",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-mobile#readme",
@@ -21,9 +21,9 @@
     "url": "https://github.com/gmfe/gm-mobile/issues"
   },
   "dependencies": {
-    "@gm-mobile/c-font": "^3.9.3-beta.27",
-    "@gm-mobile/c-tool": "^3.9.3-beta.27",
-    "@gm-mobile/locales": "^3.9.3-beta.27"
+    "@gm-mobile/c-font": "^3.9.3-beta.30",
+    "@gm-mobile/c-tool": "^3.9.3-beta.30",
+    "@gm-mobile/locales": "^3.9.3-beta.30"
   },
   "peerDependencies": {
     "@tarojs/components": "3.0.18",
@@ -33,5 +33,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "08675f24d4de60a633bbae39ae57abdfe89e9d4e"
+  "gitHead": "31da7b0c46139802e33a24a4cd6d016de3996fe6"
 }

package/src/component/custom_tabbar/custom_tabbar.weapp.tsx

@@ -24,7 +24,12 @@ const CustomTabbar = () => {
     return null
   }
 
-  return <View style={{ height: `${height}px` }} />
+  return (
+    <View
+      className='custom-tabbar-placeholder'
+      style={{ height: `${height}px` }}
+    />
+  )
 }
 
 CustomTabbar.getCustomTabbarHeight = getCustomTabbarHeight

package/src/component/layout_root/layout_root.tsx

@@ -1,4 +1,10 @@
-import React, { FC, useState, ReactNode, useEffect } from 'react'
+import React, {
+  FC,
+  useState,
+  ReactNode,
+  useEffect,
+  HTMLAttributes,
+} from 'react'
 import _ from 'lodash'
 import { is } from '@gm-mobile/c-tool'
 
@@ -13,7 +19,10 @@ import {
 
 const cbMap: CBMapType = {}
 
-const LayoutRoot: FC & LayoutRootStatic = () => {
+const LayoutRoot: FC<HTMLAttributes<HTMLDivElement>> & LayoutRootStatic = ({
+  style,
+  ...rest
+}) => {
   const [state, setState] = useState<LayoutRootState>({})
   const path: string = getPath()
 
@@ -31,7 +40,15 @@ const LayoutRoot: FC & LayoutRootStatic = () => {
 
   // 有层级关系
   return (
-    <View>
+    <View
+      style={{
+        ...style,
+        display: Object.keys(state).find((k) => !!state[k as 'popup'])
+          ? 'block'
+          : 'none',
+      }}
+      {...rest}
+    >
       {state.innerLayer}
       {state.popup}
       {state.picker}

package/src/component/layout_root/layout_root_v1.tsx

@@ -1,4 +1,10 @@
-import React, { FC, useState, ReactNode, useEffect } from 'react'
+import React, {
+  FC,
+  useState,
+  ReactNode,
+  useEffect,
+  HTMLAttributes,
+} from 'react'
 import _ from 'lodash'
 import { is } from '@gm-mobile/c-tool'
 
@@ -16,7 +22,10 @@ const cbMap: CBMapV1Type = {}
 /**
  * @description: 目前仅用于Popup的多层弹窗
  */
-const LayoutRootV1: FC & LayoutV1RootStatic = () => {
+const LayoutRootV1: FC<HTMLAttributes<HTMLDivElement>> & LayoutV1RootStatic = ({
+  style,
+  ...rest
+}) => {
   const path = getPath()
   const [state, setState] = useState<LayoutRootState>({})
 
@@ -52,7 +61,13 @@ const LayoutRootV1: FC & LayoutV1RootStatic = () => {
 
   // 有层级关系
   return (
-    <View>
+    <View
+      style={{
+        ...style,
+        display: state.popup && state.popup.length > 0 ? 'block' : 'none',
+      }}
+      {...rest}
+    >
       {/* {state.innerLayer} */}
       {state.popup}
       {/* {state.modal}

package/src/component/text_field/TextField.tsx

@@ -17,6 +17,8 @@ const ios = mp && wx.getSystemInfoSync().platform === 'ios'
 interface TextFieldState {
   /** 是否输入状态 */
   active: boolean
+  /** 是否需要清空 */
+  needClear: boolean
 }
 
 const store = observable({ active: '' })
@@ -43,6 +45,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
 
   state = {
     active: false,
+    needClear: false,
   }
 
   id = uniqueId('textField-')
@@ -82,12 +85,17 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
       })
     }
     this.props.onClick && this.props.onClick(e)
+    this.setState({ ...this.state, needClear: !!this.props.rewriteMode })
   }
 
   onInput(e: any) {
     if (this.props.disabled) return
     if (!mp) e.persist()
     let value = mp ? e.detail.value : e.target.value
+    if (this.state.needClear) {
+      value = value.slice(-1)
+      this.setState({ ...this.state, needClear: false })
+    }
     const { min, max } = this.props
     if (
       value &&
@@ -321,3 +329,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
 }
 
 export default TextField
+
+export function AutoPreview_TextField() {
+  return <TextField value='test' onChange={() => {}} />
+}

package/src/component/text_field/types.ts

@@ -63,6 +63,8 @@ interface TextFieldProps
   errClassName?: string
   /** 键盘和输入框距离，小程序特有 */
   cursorSpacing?: number
+  /** 重新获得焦点后，输入前清空现有内容 */
+  rewriteMode?: boolean
   onBlur?: () => void
   onFocus?: () => void
   /**  e在web中和小程序中不一样 */