@gm-mobile/c-react 3.9.3-beta.3 → 3.9.3-beta.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/c-react",
-  "version": "3.9.3-beta.3",
+  "version": "3.9.3-beta.33",
   "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.3",
-    "@gm-mobile/c-tool": "^3.9.3-beta.3",
-    "@gm-mobile/locales": "^3.9.3-beta.3"
+    "@gm-mobile/c-font": "^3.9.3-beta.33",
+    "@gm-mobile/c-tool": "^3.9.3-beta.33",
+    "@gm-mobile/locales": "^3.9.3-beta.33"
   },
   "peerDependencies": {
     "@tarojs/components": "3.0.18",
@@ -33,5 +33,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "9f44aa37c49971d60bc29358ce64aaf0c0d15ed8"
+  "gitHead": "038d343fd258aaa0c64146a958e6ed17baf3212d"
 }

package/src/component/button/button.tsx

@@ -73,7 +73,9 @@ export const Button: FC<ButtonProps> = ({
       onClick={handleClick}
     >
       {loadFlag && <Loading className='m-btn-loading' />}
-      <Flex alignCenter>{children}</Flex>
+      <Flex alignCenter justifyCenter style={{ display: 'inline-flex' }}>
+        {children}
+      </Flex>
     </BaseButton>
   )
 }

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/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/dialog/common/base.less

@@ -0,0 +1,3 @@
+.m-customer-dialog-header{
+  background-color: var(--m-color-bg-back);
+}

package/src/component/dialog/common/base.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 import { Flex, Popup, View, Button } from '../../..'
 import { noop } from 'lodash'
+import './base.less'
 
 interface Option<T> {
   title: ReactNode
@@ -54,7 +55,11 @@ export function showDialog<T>({
     const Template = () => {
       return (
         <Flex column className='m-border-radius m-overflow-hidden m-bg-white'>
-          <Flex justifyBetween alignCenter className='m-padding-10 m-bg-back'>
+          <Flex
+            justifyBetween
+            alignCenter
+            className='m-customer-dialog-header m-padding-10'
+          >
             <Flex flex>{left}</Flex>
             <Flex
               flex
@@ -68,7 +73,6 @@ export function showDialog<T>({
                 <Button
                   mini
                   plain
-                  noRound
                   type='link'
                   className='m-text-desc m-margin-lr-0'
                   onClick={cancel}
@@ -81,7 +85,7 @@ export function showDialog<T>({
           {children}
           {bottom || (
             <Flex className='m-padding-lr-10'>
-              <Button block noRound type='primary' onClick={() => ok()}>
+              <Button block type='primary' onClick={() => ok()}>
                 {okText}
               </Button>
             </Flex>
@@ -94,7 +98,7 @@ export function showDialog<T>({
       disabledHeader: true,
       [direction]: true,
       disabledAnimate: false,
-      onHide: Popup.hide,
+      onHide: cancel,
       children: <Template />,
     })
   })

package/src/component/dialog/common/choose.tsx

@@ -24,6 +24,7 @@ export interface ChooseProps {
   /** 搜索功能 */
   // search?: boolean
   maxHeight?: string
+  onCancel?: () => void
 }
 
 /** 底部弹出的选择界面 */
@@ -34,6 +35,7 @@ export default function ({
   multiSelect = false,
   defaultSelected = [],
   maxHeight = '50vh',
+  onCancel,
 }: ChooseProps) {
   if (multiSelect) needConfirm = true
   const selected = [...defaultSelected] as Item[]
@@ -93,6 +95,7 @@ export default function ({
     title,
     children: <Children />,
     onOk: () => selected,
+    onCancel: onCancel,
     bottom: needConfirm ? undefined : <View />,
   })
   return promise

package/src/component/dialog/dialog.tsx

@@ -12,6 +12,7 @@ import {
   DialogStaticsTypes,
   RenderOptions,
 } from './types'
+import classNames from 'classnames'
 
 const ErrorInput: FC<ErrorInputProps> = ({
   getError,
@@ -44,6 +45,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 +98,7 @@ const DialogStatics: DialogStaticsTypes<string | RenderOptions> = {
         }
 
         Promise.resolve(result).then(() => {
-          DialogStatics.hide()
+          if (autoHide) DialogStatics.hide()
 
           return setTimeout(() => {
             resolve(type === 'prompt' ? inputValue : undefined)
@@ -165,9 +171,11 @@ const DialogBase: FC<DialogBaseProps> = ({
   onOther,
   hideBottom,
   children,
+  className,
+  ...rest
 }) => {
   return (
-    <View className='m-dialog-container'>
+    <View className={classNames('m-dialog-container', className)} {...rest}>
       <Mask
         onClick={() => {
           /**

package/src/component/dialog/style.less

@@ -5,7 +5,7 @@
   }
 
   .m-dialog {
-    position: fixed;
+    position: absolute;
     width: 320px;
     top: 50%;
     left: 15px;

package/src/component/dialog/types.ts

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react'
+import React, { HTMLAttributes, InputHTMLAttributes } from 'react'
 import { InputProps as TaroInputProps } from '@tarojs/components/types/Input'
 import { CommonEventFunction } from '@tarojs/components'
 
@@ -7,7 +7,7 @@ interface ErrorInputProps extends InputProps {
   defaultValue?: string
 }
 
-interface DialogBaseProps {
+interface DialogBaseProps extends HTMLAttributes<HTMLDivElement> {
   onConfirm?: (value?: string) => Promise<void>
   title?: string
   confirmText?: string
@@ -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, HTMLAttributes<HTMLDivElement> {
+  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,10 @@ 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({
+  ...['1', '2', '3'].map((v, _) => new DKBtn({ label: v })),
+  ...['4', '5', '6'].map((v, _) => new DKBtn({ label: v })),
+  ...['7', '8', '9'].map((v, _) => new DKBtn({ label: v })),
+  new DKBtn({
     label: '.',
     fn: (value = '') => {
       if (value === '') {
@@ -28,20 +27,15 @@ export const defaultDigitalKeys = [
       }
     },
   }),
-  new Btn({
-    className: 'iconfont icon-backspace',
-    fn: (value) => {
-      if (value.length === 0) return value
-      return value.slice(0, value.length - 1)
-    },
-  }),
+  new DKBtn({ label: '0' }),
+  new DKBtn({ label: '清零', className: 'btn-clear', fn: (_) => '' }),
 ]
 
 /** 右侧功能按钮  */
 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 +51,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 +75,7 @@ export const Keyboard: FC<KeyboardProps> = ({
   int,
   ...rest
 }) => {
-  const handleInput = (btn: Btn) => {
+  const handleInput = (btn: DKBtn) => {
     if (!btn.fn) {
       onInput && onInput(undefined, btn)
       return
@@ -121,7 +115,7 @@ export const Keyboard: FC<KeyboardProps> = ({
               >
                 <View
                   className={classNames(
-                    'keyboard-button digital m-text-20',
+                    'keyboard-button digital m-text-22',
                     btn.className
                   )}
                   onClick={() => handleInput(btn)}
@@ -150,7 +144,20 @@ export const Keyboard: FC<KeyboardProps> = ({
                   )}
                   onClick={() => handleInput(btn)}
                 >
-                  {btn.label}
+                  {btn.label ? (
+                    btn.label
+                  ) : (
+                    <Flex alignCenter justifyCenter className='bt-delete'>
+                      <View className='triangle' />
+                      <Flex
+                        alignCenter
+                        justifyCenter
+                        className='m-text-14 m-text-white square'
+                      >
+                        x
+                      </Flex>
+                    </Flex>
+                  )}
                 </View>
               </Flex>
             )

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/base.less

@@ -1,5 +1,5 @@
 .keyboard {
-  @background: darken(white, 3);
+  @background: darken(white, 8);
   @btn: white;
   @text: black;
   background-color: @background;
@@ -13,17 +13,18 @@
     top: 0;
   }
   .keyboard-item {
-    padding: 3px;
-    height: 60px;
+    padding: 3.5px;
+    height: 44px;
     .keyboard-button {
       display: flex;
+      font-family: DINPro-Medium, DINPro;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
       color: @text;
-      // font-weight: bold;
-      border-radius: 5px;
+      font-weight: bold;
+      border-radius: 4px;
       background-color: @btn;
       overflow: hidden;
       cursor: pointer;
@@ -45,5 +46,35 @@
         }
       }
     }
+
+    .btn-ok {
+      background-color: #06C160;
+    }
+
+    .btn-clear {
+      font-size: 15px !important;
+      font-weight: 500;
+    }
+
+    .bt-delete {
+      padding-right: 10px;
+      .square {
+        width: 18px;
+        height: 18px;
+        background: #000000;
+        border-bottom-right-radius: 2px;
+        border-top-right-radius: 2px;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+
+      .triangle {
+        width: 0;
+        height: 0;
+        border: 9px solid;
+        border-color: transparent #000000 transparent transparent;
+        margin-right: -2px;
+      }
+    }
   }
 }

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
@@ -100,7 +102,12 @@ export class DigitalKeyboard {
 
               if (btn.type === 'digit' && value && !value.endsWith('.')) {
                 const num = parseFloat(value)
-                if (!isNaN(num as number)) {
+                if (value.endsWith('.0')) {
+                  // 处理特殊情况
+                  if (fractionDigits === 0) {
+                    value = value.replace(/\.0$/, '')
+                  }
+                } else if (!isNaN(num as number)) {
                   value = clamp(
                     num,
                     min === undefined ? num : min,
@@ -125,7 +132,7 @@ export class DigitalKeyboard {
         </View>
       )
     })
-    this.children = <Children />
+    this.node = <Node />
     makeObservable(this, {
       form: true,
       active: true,
@@ -135,6 +142,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 +153,7 @@ export class DigitalKeyboard {
   }
 
   /** 键盘组件 */
-  readonly children: ReactNode
+  readonly node: ReactNode
   /** 整数型键盘 */
   int = false
   /** 设置为整数型键盘 */
@@ -156,19 +165,26 @@ export class DigitalKeyboard {
   /** 自定义功能按钮 */
   get actionKeys() {
     return [
-      new Btn({ label: '清零', fn: (_) => '' }),
-      new Btn({
+      new DKBtn({
+        label: '',
+        // className: 'iconfont icon-backspace m-text-26',
+        fn: (value) => {
+          if (value.length === 0) return value
+          return value.slice(0, value.length - 1)
+        },
+      }),
+      new DKBtn({
         label: '下一个',
-        className: 'm-bg-primary m-text-white',
+        className: 'm-text-black btn-clear',
         fn: (value) => {
           this.next()
           return this.form[this.active]
         },
       }),
-      new Btn({
-        label: '确认',
+      new DKBtn({
+        label: '确定',
         flex: 2,
-        className: 'm-bg-primary m-text-white',
+        className: 'btn-ok m-text-white',
         fn: (value) => {
           return this.form[this.active]
         },
@@ -211,7 +227,7 @@ export class DigitalKeyboard {
       disabledHeader: true,
       disabledAnimate: false,
       bottom: true,
-      children: this.children,
+      children: this.node,
     })
     mp && wx.hideKeyboard()
   }
@@ -222,4 +238,4 @@ export class DigitalKeyboard {
 }
 export default DigitalKeyboard
 
-export { Btn } from './Btn'
+export { DKBtn } from './Btn'