@gm-mobile/c-react 3.9.3-beta.0 → 3.9.3-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/c-react",
-  "version": "3.9.3-beta.0",
+  "version": "3.9.3-beta.12",
   "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.0",
-    "@gm-mobile/c-tool": "^3.9.3-beta.0",
-    "@gm-mobile/locales": "^3.9.3-beta.0"
+    "@gm-mobile/c-font": "^3.9.3-beta.12",
+    "@gm-mobile/c-tool": "^3.9.3-beta.12",
+    "@gm-mobile/locales": "^3.9.3-beta.12"
   },
   "peerDependencies": {
     "@tarojs/components": "3.0.18",
@@ -33,5 +33,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "007be6106ba75dbc286cd3d0a24105d49a707bb4"
+  "gitHead": "56e1593b2b488c637ea9dbcf4e1ac1a5f06b832e"
 }

package/src/component/button/button.tsx

@@ -5,13 +5,14 @@ import { Loading } from '../loading'
 import BaseButton from './base'
 import { is } from '@gm-mobile/c-tool'
 import type { ButtonProps } from './types'
+import { Flex } from '../flex'
 
 export const Button: FC<ButtonProps> = ({
   type = 'default',
   plain,
   mini,
   block,
-  noRound,
+  round,
   disabled,
   onClick = _.noop,
   loading,
@@ -59,7 +60,7 @@ export const Button: FC<ButtonProps> = ({
         {
           'm-btn-block': block,
           'm-btn-mini': mini,
-          'm-btn-no-round': noRound,
+          'm-btn-round': round,
           'm-btn-plain': type !== 'link' && plain,
         },
         className
@@ -72,7 +73,9 @@ export const Button: FC<ButtonProps> = ({
       onClick={handleClick}
     >
       {loadFlag && <Loading className='m-btn-loading' />}
-      {children}
+      <Flex alignCenter justifyCenter style={{ display: 'inline-flex' }}>
+        {children}
+      </Flex>
     </BaseButton>
   )
 }

package/src/component/button/stories.tsx

@@ -64,16 +64,15 @@ export const normal: FC<ButtonProps> = (args) => (
     </View>
     block
     <View>
-      <Button {...args} block type='primary'>
+      <Button {...args} block type='primary' round>
         主色
       </Button>
       <Button {...args} block mini plain>
         主色
       </Button>
     </View>
-    noRound
     <View>
-      <Button {...args} noRound type='primary'>
+      <Button {...args} type='primary'>
         主色
       </Button>
     </View>

package/src/component/button/style.less

@@ -2,7 +2,6 @@
   height: var(--m-size-form-height);
   line-height: var(--m-size-form-height);
   border-width: 0;
-  border-radius: var(--m-size-form-height);
   display: inline-block;
   text-align: center;
   vertical-align: middle;
@@ -12,7 +11,7 @@
   font-size: var(--m-size-text-16);
   user-select: none;
   outline: none;
-
+  border-radius: var(--m-btn-border-radius);
   &.m-btn-default {
     .mBtnVariants(var(--m-btn-color-bg-default), var(--m-btn-color-bg-default-active));
 
@@ -50,7 +49,6 @@
 
   &.m-btn-link {
     background: transparent;
-    border-radius: 0;
     color: var(--m-color-link);
     padding: 0 15px;
     min-width: 0;
@@ -77,11 +75,11 @@
     width: 100%;
   }
 
-  &.m-btn-no-round {
-    border-radius: 0;
+  &.m-btn-round {
+    border-radius: var(--m-size-form-height);
 
     &::after {
-      border-radius: 0;
+      border-radius: var(--m-size-form-height);
     }
   }
 
@@ -130,7 +128,7 @@
     top: 0;
     left: 0;
     border: 1px solid @borderColor;
-    border-radius: @height;
+    border-radius: calc(var(--m-btn-border-radius) * 2);
     transform: scale(0.5);
     transform-origin: 0 0;
     box-sizing: border-box;

package/src/component/button/types.ts

@@ -14,7 +14,7 @@ interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
   plain?: boolean
   mini?: boolean
   block?: boolean
-  noRound?: boolean
+  round?: boolean
   loading?: boolean
   /** 仅web 用。原生的 type */
   htmlType?: ButtonHTMLType

package/src/component/calendar/index.ts

@@ -5,5 +5,6 @@ export { default as MultipleCalendar } from './multiple_calendar'
 export type {
   BaseCalendarProps,
   RangeCalendarProps,
+  CalendarProps,
   MultipleCalendarProps,
 } from './types'

package/src/component/cell/cell.tsx

@@ -19,35 +19,37 @@ export const Cell: FC<CellProps> = ({
   ...rest
 }) => {
   return (
-    <Flex
-      {...rest}
-      alignCenter
-      className={classNames(
-        'm-cell',
-        {
-          'm-cell-access': access,
-          'm-cell-with-icon': icon,
-          'm-cell-no-active': noActive,
-        },
-        className
-      )}
-      onClick={onClick}
-    >
-      {icon && <View className='m-cell-icon'>{icon}</View>}
-      {left && <View className='m-cell-left'>{left}</View>}
-      <View className='m-cell-body'>{children}</View>
-      <Flex alignCenter>
-        {right &&
-          (_.isString(right) ? (
-            <View className='m-cell-right'>{right}</View>
-          ) : (
-            right
-          ))}
-        {access && (
-          <Text className='m-font m-font-angle-right m-cell-access-icon' />
+    <>
+      <Flex
+        {...rest}
+        alignCenter
+        className={classNames(
+          'm-cell',
+          {
+            'm-cell-access': access,
+            'm-cell-with-icon': icon,
+            'm-cell-no-active': noActive,
+          },
+          className
         )}
+        onClick={onClick}
+      >
+        {icon && <View className='m-cell-icon'>{icon}</View>}
+        {left && <View className='m-cell-left'>{left}</View>}
+        <View className='m-cell-body'>{children}</View>
+        <Flex alignCenter>
+          {right &&
+            (_.isString(right) ? (
+              <View className='m-cell-right'>{right}</View>
+            ) : (
+              right
+            ))}
+          {access && (
+            <Text className='m-font m-font-angle-right m-cell-access-icon' />
+          )}
+        </Flex>
       </Flex>
-    </Flex>
+    </>
   )
 }
 

package/src/component/cell/style.less

@@ -30,7 +30,6 @@
       background: var(--m-color-bg-white);
     }
   }
-  .mCellBorderBottomAfter(15px, 0);
 
   &.m-cell-access {
     cursor: pointer;
@@ -41,10 +40,6 @@
     }
   }
 
-  &.m-cell-with-icon {
-    .mCellBorderBottomAfter(50px, 0);
-  }
-
   .m-cell-icon {
     width: 35px;
   }
@@ -105,4 +100,12 @@
   .m-cell:not(.m-cell-form):last-child::after {
     display: none;
   }
+  
+  .m-cell {
+    .mCellBorderBottomAfter(15px, 0);
+
+    &.m-cell-with-icon {
+      .mCellBorderBottomAfter(50px, 0);
+    }
+  }
 }

package/src/component/dialog/dialog.tsx

@@ -44,6 +44,11 @@ const ErrorInput: FC<ErrorInputProps> = ({
 
 const DialogStatics: DialogStaticsTypes<string | RenderOptions> = {
   render(options, type) {
+    const autoHide = !(
+      typeof options === 'object' &&
+      options.onConfirm &&
+      typeof options.children === 'object'
+    )
     if (typeof options === 'string') {
       options = {
         children: options as string,
@@ -92,7 +97,7 @@ const DialogStatics: DialogStaticsTypes<string | RenderOptions> = {
         }
 
         Promise.resolve(result).then(() => {
-          DialogStatics.hide()
+          if (autoHide) DialogStatics.hide()
 
           return setTimeout(() => {
             resolve(type === 'prompt' ? inputValue : undefined)

package/src/component/dialog/types.ts

@@ -23,22 +23,23 @@ interface DialogBaseProps {
   promptGetError?: (value: string) => string | void
   hideBottom?: boolean
 }
-interface RenderOptions extends PromptOptions {
-  children?: string | React.ReactNode
-  confirmText?: React.ReactNode
-  onCancel?: () => void
-  otherText?: string
-  onOther?: () => void
-  hideBottom?: boolean
-}
 
 interface PromptOptions {
+  title?: string
   promptGetError?: (value: string) => string | void
   promptText?: string
   promptInputProps?: ErrorInputProps
   onConfirm?: (value: string) => void | boolean
 }
 
+interface RenderOptions extends PromptOptions {
+  children?: string | React.ReactNode
+  confirmText?: React.ReactNode
+  onCancel?: () => void
+  otherText?: string
+  onOther?: () => void
+  hideBottom?: boolean
+}
 interface DialogStaticsTypes<T> {
   render: (options: T, type?: string) => Promise<void | string>
   alert: (options: string | RenderOptions) => Promise<void | string>

package/src/component/digital_keyboard/Base.tsx

@@ -2,7 +2,7 @@ import React, { FC, HTMLAttributes } from 'react'
 // import { Flex, Popup, View } from '@gm-mobile/mp'
 import _ from 'lodash'
 import classNames from 'classnames'
-import Btn from './Btn'
+import DKBtn from './Btn'
 import './base.less'
 import './font/iconfont.css'
 import { View } from '../view'
@@ -11,11 +11,11 @@ import { Flex } from '../flex'
 
 /** 数字按钮 */
 export const defaultDigitalKeys = [
-  ...['7', '8', '9'].map((v, _) => new Btn({ label: v })),
-  ...['4', '5', '6'].map((v, _) => new Btn({ label: v })),
-  ...['1', '2', '3'].map((v, _) => new Btn({ label: v })),
-  new Btn({ label: '0' }),
-  new Btn({
+  ...['7', '8', '9'].map((v, _) => new DKBtn({ label: v })),
+  ...['4', '5', '6'].map((v, _) => new DKBtn({ label: v })),
+  ...['1', '2', '3'].map((v, _) => new DKBtn({ label: v })),
+  new DKBtn({ label: '0' }),
+  new DKBtn({
     label: '.',
     fn: (value = '') => {
       if (value === '') {
@@ -28,7 +28,7 @@ export const defaultDigitalKeys = [
       }
     },
   }),
-  new Btn({
+  new DKBtn({
     className: 'iconfont icon-backspace',
     fn: (value) => {
       if (value.length === 0) return value
@@ -39,9 +39,9 @@ export const defaultDigitalKeys = [
 
 /** 右侧功能按钮  */
 export const defaultActionKeys = [
-  new Btn({ label: '取消', fn: (_) => '' }),
-  new Btn({ label: '完成', className: 'm-bg-primary' }),
-  new Btn({
+  new DKBtn({ label: '取消', fn: (_) => '' }),
+  new DKBtn({ label: '完成', className: 'm-bg-primary' }),
+  new DKBtn({
     label: '大按钮',
     flex: 2,
     className: 'm-bg-primary',
@@ -57,9 +57,9 @@ export interface KeyboardProps
   /** 输入框当前值 */
   value: string
   /** 虚拟键盘的点击事件 */
-  onInput?: (value: string | undefined, key: Btn) => void
+  onInput?: (value: string | undefined, key: DKBtn) => void
   /** 虚拟键盘的功能键(actionKeys)点击事件 */
-  onAction?: (key: Btn) => void
+  onAction?: (key: DKBtn) => void
   /** 自定义功能键盘 */
   actionKeys?: typeof defaultActionKeys
   /** 自定义数字键盘 */
@@ -81,7 +81,7 @@ export const Keyboard: FC<KeyboardProps> = ({
   int,
   ...rest
 }) => {
-  const handleInput = (btn: Btn) => {
+  const handleInput = (btn: DKBtn) => {
     if (!btn.fn) {
       onInput && onInput(undefined, btn)
       return

package/src/component/digital_keyboard/Btn.ts

@@ -1,4 +1,4 @@
-export class Btn {
+export class DKBtn {
   /** 按钮文本 */
   label?: string
   /** 按钮占位，默认1个位置 */
@@ -8,7 +8,7 @@ export class Btn {
   /** 按钮功能,传入value为输入框当前值，返回一个按钮功能处理后的值 */
   fn?: (value: string) => string
   type?: 'digit' | 'action'
-  constructor({ label = '', flex = 0, className = '', fn }: Btn) {
+  constructor({ label = '', flex = 0, className = '', fn }: DKBtn) {
     this.type = /([0-9.])/.test(label) ? 'digit' : 'action'
     if (!fn && this.type === 'digit') {
       fn = (value = '') => value + label
@@ -17,4 +17,4 @@ export class Btn {
   }
 }
 
-export default Btn
+export default DKBtn

package/src/component/digital_keyboard/index.tsx

@@ -1,10 +1,10 @@
-import React, { ReactNode, useEffect, useState } from 'react'
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
 import { makeObservable } from 'mobx'
 import { Keyboard, KeyboardProps } from './Base'
 import { observer } from 'mobx-react'
 import { clamp } from 'lodash'
 import { View } from '../view'
-import Btn from './Btn'
+import { DKBtn } from './Btn'
 import { Popup } from '../popup'
 
 /** 是否小程序端 */
@@ -30,6 +30,7 @@ export type DigitalKeyboardProps = Omit<KeyboardProps, 'value' | 'int'> & {
   min?: number
   /** 最大值 */
   max?: number
+  withUseRef?: boolean
 }
 
 export class DigitalKeyboard {
@@ -45,11 +46,12 @@ export class DigitalKeyboard {
     min,
     max,
     style,
+    withUseRef = true,
     ...rest
   }: DigitalKeyboardProps) {
     this.form = form
     this.active = active || Object.keys(form)[0]
-    const Children = observer(() => {
+    const Node = observer(() => {
       const sys = mp && wx.getSystemInfoSync()
       const safeMargin =
         withSafeArea && mp ? sys.screenHeight - sys.safeArea.bottom : 5
@@ -125,7 +127,7 @@ export class DigitalKeyboard {
         </View>
       )
     })
-    this.children = <Children />
+    this.node = <Node />
     makeObservable(this, {
       form: true,
       active: true,
@@ -135,6 +137,8 @@ export class DigitalKeyboard {
       int: true,
       setInt: true,
     })
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return withUseRef ? useRef(this).current : this
   }
 
   active: string
@@ -144,7 +148,7 @@ export class DigitalKeyboard {
   }
 
   /** 键盘组件 */
-  readonly children: ReactNode
+  readonly node: ReactNode
   /** 整数型键盘 */
   int = false
   /** 设置为整数型键盘 */
@@ -156,8 +160,8 @@ export class DigitalKeyboard {
   /** 自定义功能按钮 */
   get actionKeys() {
     return [
-      new Btn({ label: '清零', fn: (_) => '' }),
-      new Btn({
+      new DKBtn({ label: '清零', fn: (_) => '' }),
+      new DKBtn({
         label: '下一个',
         className: 'm-bg-primary m-text-white',
         fn: (value) => {
@@ -165,7 +169,7 @@ export class DigitalKeyboard {
           return this.form[this.active]
         },
       }),
-      new Btn({
+      new DKBtn({
         label: '确认',
         flex: 2,
         className: 'm-bg-primary m-text-white',
@@ -211,7 +215,7 @@ export class DigitalKeyboard {
       disabledHeader: true,
       disabledAnimate: false,
       bottom: true,
-      children: this.children,
+      children: this.node,
     })
     mp && wx.hideKeyboard()
   }
@@ -222,4 +226,4 @@ export class DigitalKeyboard {
 }
 export default DigitalKeyboard
 
-export { Btn } from './Btn'
+export { DKBtn } from './Btn'

package/src/component/digital_keyboard/stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react'
 import { TextField } from '../text_field'
 import { DigitalKeyboard, DigitalKeyboardProps } from '.'
 import { Text } from '../text'
-import { Btn } from './Btn'
+import { DKBtn } from './Btn'
 import { View } from '../view'
 import { Toast } from '../toast'
 import { Page } from '../page'
@@ -19,19 +19,17 @@ const Template: Story<DigitalKeyboardProps> = (args) => {
     apple: '1.00',
     peach: '0.50',
   }
-  const { current: keyboard } = useRef(
-    new DigitalKeyboard({
-      ...args,
-      form: form,
-      active: '',
-      async onAction(btn) {
-        if (btn.label === '确认') {
-          console.log('result:', 'apple', keyboard.get('apple'))
-          keyboard.hide()
-        }
-      },
-    })
-  )
+  const keyboard = new DigitalKeyboard({
+    ...args,
+    form: form,
+    active: '',
+    async onAction(btn) {
+      if (btn.label === '确认') {
+        console.log('result:', 'apple', keyboard.get('apple'))
+        keyboard.hide()
+      }
+    },
+  })
 
   return (
     <View style={{ height: '300px' }}>
@@ -60,7 +58,7 @@ const Template: Story<DigitalKeyboardProps> = (args) => {
 export const Usage = Template.bind({})
 Usage.argTypes = {
   form: {
-    description: '`Object` 表单的字段键值对',
+    description: '`Object` 表单的字段键值对，可以通过.set增改，通过.get读取',
     type: {
       required: true,
     },
@@ -122,13 +120,13 @@ Usage.argTypes = {
   },
   onInput: {
     description:
-      '`(value: string | undefined, key: Btn) => void` 虚拟键盘的点击事件',
+      '`(value: string | undefined, key: DKBtn) => void` 虚拟键盘的点击事件',
     control: false,
     type: {},
   },
   onAction: {
     description:
-      '`(value: string | undefined, key: Btn) => void` 虚拟键盘的功能键(actionKeys)点击事件',
+      '`(value: string | undefined, key: DKBtn) => void` 虚拟键盘的功能键(actionKeys)点击事件',
     control: false,
     type: {},
   },
@@ -154,7 +152,7 @@ Usage.argTypes = {
       name: 'function',
     },
   },
-  '.children': {
+  '.node': {
     description: '`ReactComponent` 键盘组件节点',
     type: {
       name: 'function',
@@ -210,12 +208,10 @@ export const CustomLayout = () => {
     apple: '1.00',
     peach: '0.50',
   }
-  const { current: keyboard } = useRef(
-    new DigitalKeyboard({
-      form: form,
-      active: '',
-    })
-  )
+  const keyboard = new DigitalKeyboard({
+    form: form,
+    active: '',
+  })
 
   return (
     <Page style={{ width: '100%' }}>
@@ -228,7 +224,7 @@ export const CustomLayout = () => {
         头部
       </Flex>
       <View>显示在指定位置</View>
-      <View>{keyboard.children}</View>
+      <View>{keyboard.node}</View>
       <Flex
         height='100px'
         className='m-bg-accent m-margin-tb-10'
@@ -246,7 +242,7 @@ export const CustomActions = () => {
   class Keyboard extends DigitalKeyboard {
     get actionKeys() {
       return [
-        new Btn({
+        new DKBtn({
           className: 'm-bg-accent m-text-white',
           label: '自定义',
           fn: (value) => {
@@ -254,7 +250,7 @@ export const CustomActions = () => {
             return '一键输入自定义内容'
           },
         }),
-        new Btn({
+        new DKBtn({
           label: '确认',
           flex: 3,
           className: 'm-bg-primary m-text-white',
@@ -267,20 +263,18 @@ export const CustomActions = () => {
     }
   }
 
-  const { current: keyboard } = useRef(
-    new Keyboard({
-      rewriteMode: true,
-      fractionDigits: 2,
-      min: 0,
-      max: 9999.99,
-      // 也可以通过这里自定义keys
-      // digitalKeys: [],
-      // actionKeys: [],
-      form: {
-        input: '',
-      },
-    })
-  )
+  const keyboard = new Keyboard({
+    rewriteMode: true,
+    fractionDigits: 2,
+    min: 0,
+    max: 9999.99,
+    // 也可以通过这里自定义keys
+    // digitalKeys: [],
+    // actionKeys: [],
+    form: {
+      input: '',
+    },
+  })
   return (
     <View style={{ height: '300px' }}>
       <TextField

package/src/component/draggable/draggable.tsx

@@ -197,6 +197,7 @@ export const Draggable: FC<DraggableProps> = ({
     justifyContent: 'center',
     cursor: 'pointer',
     userSelect: 'none',
+    zIndex: 2,
   }
   const options: any = mp
     ? {

package/src/component/error/error.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { View } from '../view'
+import { ErrorProps } from './types'
+import { Text } from '../text'
+
+export const Error: FC<ErrorProps> = ({ className, topLine, children }) => {
+  return children ? (
+    <View
+      className={classNames('error', className, {
+        'm-border-1px-top-before': topLine,
+        'has-error': !!children,
+      })}
+    >
+      <View className='error-message'>{children}</View>
+    </View>
+  ) : (
+    <></>
+  )
+}
+
+export default Error

package/src/component/error/index.ts

@@ -0,0 +1 @@
+export { default as Error } from './error'

package/src/component/error/style.less

@@ -0,0 +1,42 @@
+.error {
+  @red: fade(red, 50);
+  color: @red;
+  font-size: 10px;
+  width: 100%;
+  padding: 5px 0;
+  &.m-border-1px-top-before::before {
+    border-color: @red;
+  }
+  .error-message {
+    display: inline-block;
+    animation-name: headShake;
+    animation-timing-function: ease;
+    animation-duration: 0.75s;
+  }
+}
+
+@keyframes headShake {
+  0% {
+    transform: translateX(0);
+  }
+
+  6.5% {
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+}

package/src/component/error/types.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react'
+
+export interface ErrorProps extends HTMLAttributes<HTMLDivElement> {
+  topLine?: boolean
+}

package/src/component/layout_root/layout_root.tsx

@@ -24,7 +24,6 @@ const LayoutRoot: FC & LayoutRootStatic = () => {
         [type]: component,
       }))
     }
-
     return () => {
       delete cbMap[path]
     }

package/src/component/popup/popup.tsx

@@ -38,6 +38,8 @@ const PopupBase: FC<PopupProps> = ({
   /** 动画有卡顿现象，先禁用 */
   disabledAnimate = true,
   children,
+  hasCustomTab = true,
+  disableBottomSafeArea,
   ...rest
 }) => {
   devWarnForHook(() => {
@@ -57,6 +59,7 @@ const PopupBase: FC<PopupProps> = ({
       'm-animated-slide-in-left': left,
       'm-animated-slide-in-right': right,
       'm-animated-slide-in-bottom': bottom,
+      'm-bottom-safe-area': !disableBottomSafeArea,
     },
     className
   )
@@ -90,7 +93,7 @@ const PopupBase: FC<PopupProps> = ({
           </Flex>
         )}
         <View className='m-popup-content'>{children}</View>
-        <CustomTabbar />
+        {hasCustomTab && <CustomTabbar />}
       </View>
     </View>
   )

package/src/component/popup/popup_v1.tsx

@@ -51,6 +51,7 @@ const PopupBase: FC<PopupV1Props> = ({
   titleClassName,
   titleCenter,
   clickMaskClose = true,
+  disableBottomSafeArea,
   ...rest
 }) => {
   devWarnForHook(() => {
@@ -128,7 +129,7 @@ const PopupBase: FC<PopupV1Props> = ({
           </Flex>
         )}
         <View className='m-popup-content'>{children}</View>
-        <CustomTabbar />
+        {!disableBottomSafeArea && <CustomTabbar />}
       </View>
     </View>
   )

package/src/component/popup/style.less

@@ -65,7 +65,7 @@
 
 @supports (bottom: constant(safe-area-inset-bottom)) or
   (bottom: env(safe-area-inset-bottom)) {
-  .m-popup {
+  .m-popup.m-bottom-safe-area {
     padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
     padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
   }

package/src/component/popup/types.ts

@@ -19,6 +19,10 @@ interface PopupProps extends HTMLAttributes<HTMLDivElement> {
   disabledAnimate?: boolean
   /** 内部用 */
   isPickPopup?: boolean
+  /** 禁用下方安全边距，默认为false */
+  disableBottomSafeArea?: boolean
+  /** 预留底部自定义导航高度,默认为true */
+  hasCustomTab?: boolean
 }
 
 interface PopupStaticsTypes {

package/src/component/text_field/TextField.tsx

@@ -159,7 +159,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
       disabled,
       highlight,
       cursorSpacing = 30,
-      maxLength,
+      maxLength = -1,
       confirmType,
       adjustPosition,
       block,
@@ -170,6 +170,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
       onClick,
       onConfirm,
       fractionDigits,
+      alwaysEmbed = true,
       ...rest
       // 注意，不用传给input或area的props要在此列出来，不然rest会带过去
     } = this.props
@@ -180,7 +181,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
     const common = {
       disabled: disabled,
       onInput: this.onInput.bind(this),
-      onChange: this.onInput.bind(this),
+      // onChange: this.onInput.bind(this),
       onClick: this.onClick.bind(this),
       onBlur: () => {
         onBlur && onBlur()
@@ -207,6 +208,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
         focus,
         password,
         placeholderClass: 'text-field-placeholder',
+        alwaysEmbed: alwaysEmbed,
         onConfirm,
       })
     } else {
@@ -300,7 +302,9 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
             </Flex>
           )}
           <View
-            className={classNames('text-field-error-message', errClassName)}
+            className={classNames('text-field-error-message', errClassName, {
+              'has-error': err,
+            })}
           >
             {err}
           </View>

package/src/component/text_field/stories.tsx

@@ -68,7 +68,6 @@ WithButton.args = {
   right: (
     <Button
       mini
-      noRound
       onClick={() => new Promise((resolve) => setTimeout(resolve, 3000))}
     >
       获取验证码

package/src/component/text_field/types.ts

@@ -7,7 +7,7 @@ interface TextFieldProps
     'style' | 'onBlur' | 'onFocus' | 'onClick' | 'onChange' | 'type'
   > {
   value: string
-  /** 输入事件, e在web中为ChangeEvent，在小程序中为onInputEventDetail */
+  /** 输入事件, e在web中为ChangeEvent(value为e.target.value)，在小程序中为onInputEventDetail(value为e.detail.value) */
   onChange?: (e: any) => void
   /** 输入框类型, web端和小程序端取值有差异 */
   type?: InputProps['type']

package/src/index.less

@@ -4,27 +4,10 @@
 
 // variable
 @import './less/variable';
-@import './less/variable_page';
 // theme
 @import './theme/dark';
 @import './theme/taobao';
 @import './theme/jd';
-// 公共
-@import './less/mixin';
-@import './less/base';
-@import './less/distance';
-@import './less/bg';
-@import './less/display';
-@import './less/position';
-@import './less/overflow';
-@import './less/text';
-@import './less/border';
-@import './less/animation';
-@import './less/shadow';
-@import './less/btn';
-@import './less/ellipsis';
-@import './less/lineheight';
-@import './less/opacity';
 
 // 具体业务
 @import './component/button/style';
@@ -54,4 +37,22 @@
 @import './component/picker/style.less';
 @import './component/nav/style.less';
 @import './component/date_selector/style.less';
-@import './component//text_field/style.less';
+@import './component/text_field/style.less';
+@import './component/error/style.less';
+
+// 公共
+@import './less/mixin';
+@import './less/base';
+@import './less/button';
+@import './less/distance';
+@import './less/bg';
+@import './less/display';
+@import './less/position';
+@import './less/overflow';
+@import './less/text';
+@import './less/border';
+@import './less/animation';
+@import './less/shadow';
+@import './less/ellipsis';
+@import './less/lineheight';
+@import './less/opacity';

package/src/index.ts

@@ -42,3 +42,4 @@ export * from './component/text_field'
 export * from './component/digital_keyboard'
 export * from './component/draggable'
 export * from './component/form'
+export * from './component/error'

package/src/less/animation.less

@@ -1,6 +1,7 @@
 .m-animated {
-  animation-duration: 0.2s;
-  animation-fill-mode: none;
+  // animation-duration: 0.2s;
+  // animation-fill-mode: none;
+  transition: all 0.2s;
 }
 
 .m-animated-fade-in {
@@ -153,10 +154,14 @@
 
 @keyframes slide-in-bottom {
   from {
-    transform: translate3d(0, 100%, 0);
+    // transform: translate3d(0, 100%, 0);
+    max-height: 0%;
+    overflow: hidden;
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    // transform: translate3d(0, 0, 0);
+    max-height: 100%;
+    overflow: hidden;
   }
 }

package/src/less/bg.less

@@ -26,6 +26,10 @@
   background: var(--m-color-bg-accent-light) !important;
 }
 
+.m-bg-transparent {
+  background: transparent !important;
+}
+
 .m-bg-white-active-with {
   .mBgWhiteActiveWith();
 }
@@ -61,4 +65,7 @@ each(@colors,.(@color,@colorKey,@index){
     .generate-colors(@opacity+1);
   }
   .generate-colors(0);
+  .m-bg-@{colorKey}{
+    background-color: @color!important;
+  }
 });

package/src/less/border.less

@@ -2,6 +2,17 @@
   border: 1px solid var(--m-color-border) !important;
 }
 
+// @directions: top, right, bottom, left;
+// .for-each(@direction in @directions) {
+//   .generate-border(@size) when (@size<=10) {
+//     .m-border-@{direction}-@{size} {
+//       border-@{direction}: @size solid var(--m-color-border) !important;
+//     }
+//     .generate-border(@size+1);
+//   }
+//   .generate-border(0);
+// }
+
 .m-border-top {
   border-top: 1px solid var(--m-color-border) !important;
 }
@@ -87,13 +98,13 @@
 }
 
 .m-border-radius-circle {
-  border-radius: 50%;
+  border-radius: 50%!important;
 }
 
 .m-border-radius-chip {
-  border-radius: 100px;
+  border-radius: 100px!important;
 }
 
 .m-border-radius-5 {
-  border-radius: 5px;
+  border-radius: 5px!important;
 }

package/src/less/{btn.less → button.less}

@@ -46,7 +46,7 @@
   padding: 0 10px;
   border-radius: 3px;
   box-sizing: border-box;
-  line-height: 1;
+  line-height: 2;
   min-height: @button-normal;
   cursor: pointer;
   user-select: none;
@@ -68,6 +68,7 @@
 }
 .m-button {
   .m-button-text();
+  line-height: 1;
   background-color: @button-with-white-text[default];
 }
 
@@ -112,6 +113,7 @@ each(@button-with-black-text,.(@value,@key,@index){
 
 .m-button-icon {
   .m-button-text();
+  line-height: 1;
   min-width: @button-normal;
   padding: 10px;
   border-radius: 50%;

package/src/less/distance.less

@@ -23,6 +23,8 @@
   10: 10px;
   15: 15px;
   20: 20px;
+  25: 25px;
+  30: 30px;
 };
 
 each(@size, {

package/src/less/text.less

@@ -1,27 +1,3 @@
-.m-text-20 {
-  font-size: var(--m-size-text-20) !important;
-}
-
-.m-text-18 {
-  font-size: var(--m-size-text-18) !important;
-}
-
-.m-text-16 {
-  font-size: var(--m-size-text-16) !important;
-}
-
-.m-text-14 {
-  font-size: var(--m-size-text-14) !important;
-}
-
-.m-text-12 {
-  font-size: var(--m-size-text-12) !important;
-}
-
-.m-text-10 {
-  font-size: var(--m-size-text-10) !important;
-}
-
 .m-text-center {
   text-align: center !important;
 }
@@ -123,4 +99,20 @@ each(@colors,.(@color,@colorKey,@index){
     .generate-colors(@opacity+1);
   }
   .generate-colors(0);
+  .m-text-@{colorKey}{
+    color: @color!important;
+  }
 });
+
+// 生成size, .m-text-{8-32}, --m-size-text-{8-32}
+.generate-size(@size) when (@size<=32) {
+  :root,
+  page {
+    --m-size-text-@{size}: ~'@{size}px';
+  }
+  .m-text-@{size} {
+    font-size: e(%('var(--m-size-text-%s)!important', @size));
+  }
+  .generate-size(@size + 2);
+}
+.generate-size(8);

package/src/less/variable.less

@@ -7,7 +7,8 @@
 // stylelint-disable
 
 // 颜色，会通过主题更改
-:root {
+:root,
+page {
   // color
   --m-color-default: #353535; // 主内容
   --m-color-desc: #888; // 次要内容
@@ -32,13 +33,20 @@
   --m-btn-color-default-active: darken(#888, 10%);
   --m-btn-color-bg-default: #f6f6f6;
   --m-btn-color-bg-default-active: #ececec;
+  --m-btn-border-radius: 8px;
 
   // calendar
   --m-calendar-bg-active: fadeout(rgba(30, 172, 82, 1), 80%);
+
+  // 输入框大小
+  --m-textfield-height-mini: 32px;
+  --m-textfield-height-normal: 48px;
+  --m-textfield-height-large: 64px;
 }
 
 // 不变的颜色
-:root {
+:root,
+page {
   // color
   --m-color-placeholder: #b2b2b2;
   --m-color-accent: #ff6500;
@@ -81,15 +89,8 @@
 }
 
 // 非颜色
-:root {
-  // 字体尺寸
-  --m-size-text-10: 10px;
-  --m-size-text-12: 12px;
-  --m-size-text-14: 14px;
-  --m-size-text-16: 16px;
-  --m-size-text-18: 18px;
-  --m-size-text-20: 20px;
-
+:root,
+page {
   // line-height
   --m-size-line-height: 1.6;
 

package/src/less/variable_page.less

@@ -1,129 +0,0 @@
-/*
-规则
---color 颜色相关
---size 尺寸相关
---btn 具体业务
-*/
-// stylelint-disable
-
-// 颜色，会通过主题更改
-page {
-  // color
-  --m-color-default: #353535; // 主内容
-  --m-color-desc: #888; // 次要内容
-  --m-color-primary: rgba(30, 172, 82, 1);
-  --m-color-white: white;
-  --m-color-black: black;
-
-  // bg
-  --m-color-bg-white: white;
-  --m-color-bg-back: #f6f6f6; // 背景色
-  --m-color-bg-light: #fbfbfb; // 亮点的背景色
-  --m-color-bg-primary: rgba(30, 172, 82, 1);
-  --m-color-bg-secondary: fadeout(rgba(30, 172, 82, 1), 80%);
-
-  // active
-  --m-color-bg-white-active: #ececec;
-  --m-color-bg-back-active: #ececec;
-  --m-color-bg-primary-active: darken(rgba(30, 172, 82, 1), 10%);
-
-  // btn
-  --m-btn-color-default: #888;
-  --m-btn-color-default-active: darken(#888, 10%);
-  --m-btn-color-bg-default: #f6f6f6;
-  --m-btn-color-bg-default-active: #ececec;
-
-  // calendar
-  --m-calendar-bg-active: fadeout(rgba(30, 172, 82, 1), 80%);
-
-  // shadow
-  --m-shadow: #ecf0f5;
-}
-
-// 不变的颜色
-page {
-  // color
-  --m-color-placeholder: #b2b2b2;
-  --m-color-accent: #ff6500;
-  --m-color-success: #1eac52;
-  --m-color-danger: #fa5151;
-  --m-color-link: #576b95;
-  --m-color-red: red;
-  --m-color-true-white: white; // 一定是白色
-  --m-color-true-black: black; // 一定是黑色
-
-  // bg
-  --m-color-bg-accent: #ff6500;
-  --m-color-bg-accent-light: tint(#ff6500, 80%);
-  --m-color-bg-danger: #fa5151;
-  --m-color-bg-red: red;
-  --m-color-bg-black: black;
-
-  // active
-  --m-color-bg-danger-active: darken(#fa5151, 10%);
-
-  // border
-  --m-color-border: rgba(0, 0, 0, 0.1);
-  // 深色 border
-  --m-color-border-dark: rgba(0, 0, 0, 0.3);
-
-  // mask 背景色
-  --m-color-bg-mask: rgba(0, 0, 0, 0.6);
-
-  // toast
-  --m-color-bg-toast: #606060;
-
-  // coupon
-  --m-color-coupon-disabled: #b2b2b2;
-  --m-color-bg-coupon-disabled: #b2b2b2;
-  --m-color-coupon-bg-vip: #24282c;
-  --m-color-coupon-vip: #d7b08a;
-
-  // 阴影色
-  --m-color-box-shadow: rgba(0, 0, 0, 0.4);
-
-  // 按钮大小
-  --m-button-height-small: 34px;
-  --m-button-height-normal: 44px;
-  --m-button-height-large: 54px;
-
-  // 输入框大小
-  --m-textfield-height-mini: 32px;
-  --m-textfield-height-normal: 48px;
-  --m-textfield-height-large: 64px;
-}
-
-// 非颜色
-page {
-  // 字体尺寸
-  --m-size-text-10: 10px;
-  --m-size-text-12: 12px;
-  --m-size-text-14: 14px;
-  --m-size-text-16: 16px;
-  --m-size-text-18: 18px;
-  --m-size-text-20: 20px;
-
-  // line-height
-  --m-size-line-height: 1.6;
-
-  // height
-  --m-size-tabbar-height: 49px;
-  --m-size-header-height: 48px;
-  --m-size-form-height: 40px;
-  --m-size-form-height-sm: 30px;
-  --m-size-cell-height: 52px;
-  --m-size-cell-height-mini: 32px;
-
-  // zIndex
-  --m-z-index-header: 20;
-  --m-z-index-tabbar: 20;
-  --m-z-index-innerLayer: 900;
-  --m-z-index-mask: 1000;
-  --m-z-index-popup: 2000;
-  --m-z-index-trigger: 2000;
-  --m-z-index-previewImage: 4000;
-  --m-z-index-dialog: 5000;
-  --m-z-index-picker: 6000;
-  --m-z-index-toast: 7000;
-  --m-z-index-nprogress: 9999;
-}