@mpxjs/webpack-plugin 2.10.3 → 2.10.4

package/lib/runtime/components/react/mpx-picker/time.tsx

@@ -1,268 +1,151 @@
-import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native'
-import Portal from '../mpx-portal/index'
-import { PickerView } from '@ant-design/react-native'
-import React, { forwardRef, useState, useRef, useEffect } from 'react'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { warn } from '@mpxjs/utils'
 import { TimeProps } from './type'
-
-// 可见应用窗口的大小。
-// const { height: dHeight, width: dWidth } = Dimensions.get('window');
-//  modal属性: {"height": 298.33331298828125, "offsetLeft": 0, "offsetTop": 513.6666870117188, "width": 375, "x": 0, "y": 513.6666870117188}
-// const { height: sHeight, width: sWidth } = Dimensions.get('screen');
-// 设备屏幕的大小。 screen
-const styles: { [key: string]: Object } = {
-  showModal: {
-    backgroundColor: 'black',
-    opacity: 0.5,
-    width: '100%',
-    height: '100%'
-  },
-  hideModal: {
-    opacity: 1,
-    height: 0
-  },
-  modal: {
-    backgroundColor: 'black',
-    opacity: 0.5
-  },
-  centeredView: {
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-    overflow: 'scroll'
-  },
-  btnLine: {
-    width: '100%',
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    borderColor: 20,
-    borderBottomWidth: 1,
-    backgroundColor: 'white',
-    paddingLeft: 40,
-    paddingRight: 40
+import MpxPickerView from '../mpx-picker-view'
+import MpxPickerViewColumn from '../mpx-picker-view-column'
+import { HandlerRef } from '../useNodesRef'
+import { useUpdateEffect } from '../utils'
+
+const styles = StyleSheet.create({
+  pickerContainer: {
+    width: 120,
+    height: 240,
+    alignSelf: 'center',
+    paddingHorizontal: 10,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10
   },
-  cancel: {
-    height: 50,
-    display: 'flex',
-    justifyContent: 'center'
+  pickerIndicator: {
+    height: 45
   },
-  ok: {
-    height: 50,
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  btntext: {
-    color: '#0ae',
-    fontSize: 18
+  pickerItem: {
+    fontSize: 20,
+    lineHeight: 45,
+    textAlign: 'center'
   }
-}
+})
 
-function formatStrToInt (timestr: string) {
-  const [start, end] = timestr.split(':')
-  return [parseInt(start), parseInt(end)]
-}
-// [9, 59] to 09:59
-function formatStr (arr: any[]) {
-  let [hour, minute] = arr
-  if (hour < 10) {
-    hour = '0' + hour
-  }
-  if (minute < 10) {
-    minute = '0' + minute
-  }
-  return hour + ':' + minute
-}
+type Hour = number
+type Minute = number
+type TimeArray = [Hour, Minute]
 
-function generateMinute () {
-  const arrMinute: any[] = []
-  for (let i = 0; i <= 59; i++) {
-    const obj = {
-      label: toSingleStr(i),
-      value: i,
-      children: []
-    }
-    arrMinute.push(obj)
+const time2Array = (time: string, defaultValue: TimeArray = [0, 0]): TimeArray => {
+  if (typeof time !== 'string') {
+    warn('[mpx runtime warn]: mpx-picker prop time must be a string')
+    return defaultValue
   }
-  return arrMinute
+  let [hour = 0, minute = 0] = time.split(':').map(Number)
+  hour = Math.min(Math.max(hour, 0), 23)
+  minute = Math.min(Math.max(minute, 0), 59)
+  return [hour, minute]
 }
-function generateColumns (): any[] {
-  const pickData: any[] = []
-  for (let i = 0; i <= 23; i++) {
-    const obj = {
-      label: toSingleStr(i),
-      value: i,
-      children: generateMinute()
-    }
-    pickData.push(obj)
-  }
 
-  return pickData
+const time2String = (time: TimeArray): string => {
+  return time.map(i => i.toString().padStart(2, '0')).join(':')
 }
 
-function toSingleStr (str: number) {
-  return str < 10 ? '0' + str : str
+const time2Minutes = (time: TimeArray): number => {
+  return time[0] * 60 + time[1]
 }
 
-function toStr (time: string): string {
-  const [hour, minute]: any = formatStrToInt(time)
-  const newHour = toSingleStr(hour)
-  const newMinute = toSingleStr(minute)
-  return '' + newHour + newMinute
+const calibrateTime = (
+  time: string | TimeArray,
+  start: string | TimeArray = [0, 0],
+  end: string | TimeArray = [23, 59]
+): TimeArray => {
+  time = typeof time === 'string' ? time2Array(time) : time
+  start = typeof start === 'string' ? time2Array(start) : start
+  end = typeof end === 'string' ? time2Array(end) : end
+  const current = time2Minutes(time)
+  if (current < time2Minutes(start)) {
+    return start
+  } else if (current > time2Minutes(end)) {
+    return end
+  } else {
+    return time
+  }
 }
 
-function checkSelectedIsValid (strStart: string, strEnd: string, selected: number[]): boolean {
-  const strSel = '' + toSingleStr(selected[0]) + toSingleStr(selected[1])
-  if (strSel < strStart || strSel > strEnd) return false
-  return true
-}
-/**
- * [{label:'', value: '', key: '', children: []}]
-  label: string | ReactNode
-  value: string | number
-  key?: string | number
-  children?: PickerColumnItem[]
-*/
-// start="02:10" end = 23:01
+const hoursRange = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'))
+const minutesRange = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'))
 
-const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: TimeProps, ref): React.JSX.Element => {
-  const { children, start, end, value, bindchange, bindcancel, style } = props
-  const defaultProps = {
-    start: '00:10',
-    end: '23:59'
-  }
-  const defaultValue = formatStrToInt(value)
-  const [timevalue, setTimeValue] = useState(defaultValue)
-  // 存储layout布局信息
-  const layoutRef = useRef({})
-  const viewRef = useRef<View>(null)
-  const nodeRef = useRef<View>(null)
-  useNodesRef<View, TimeProps>(props, ref, nodeRef, { style })
-  // 存储modal的布局信息
-  const modalLayoutRef = useRef({})
-  const modalRef = useRef<View>(null)
-  const [visible, setVisible] = useState(false)
-  const columnData = generateColumns()
-  const [data, setData] = useState(columnData)
-  const [offsetTop, setOffsetTop] = useState(0)
-  const strStart = toStr(start)
-  const strEnd = toStr(end)
+const PickerTime = forwardRef<
+  HandlerRef<View, TimeProps>,
+  TimeProps
+>((props: TimeProps, ref): React.JSX.Element => {
+  const { value = '00:00', start = '00:00', end = '23:59', bindchange } = props
 
-  useEffect(() => {
-    const newColumnData = generateColumns()
-    setData(newColumnData)
-  }, [start, end])
+  const nodeRef = useRef(null)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const startArray = time2Array(start)
+  const endArray = time2Array(end, [23, 59])
+  const [formatValue, setFormatValue] = useState<TimeArray>(calibrateTime(value, startArray, endArray))
 
-  useEffect(() => {
-    if (value) {
-      const nValue = formatStrToInt(value)
-      nValue && setTimeValue(nValue)
-    }
-  }, [value])
-
-  // console.log('---------------visible---', visible, JSON.stringify(columnData))
-  const handleModalStatus = (status: boolean) => {
-    setVisible(status)
+  const updateValue = (value = '00:00') => {
+    const calibratedValue = calibrateTime(value, startArray, endArray)
+    setFormatValue(calibratedValue)
   }
-  const handleConfirm = () => {
-    handleModalStatus(false)
-    bindchange && bindchange({
-      detail: {
-        value: formatStr(timevalue)
+
+  const _props = useRef(props)
+  _props.current = props
+  useImperativeHandle(ref, () => ({
+    updateValue,
+    getNodeInstance: () => ({
+      props: _props,
+      nodeRef,
+      instance: {
+        style: {}
       }
     })
-  }
+  }))
 
-  const handleCancel = () => {
-    handleModalStatus(false)
-    bindcancel && bindcancel()
-  }
-
-  const handleChildClick = () => {
-    handleModalStatus(true)
-  }
-
-  const handlePickChange = (date: number[]): void => {
-    // 不是有效的值
-    if (!checkSelectedIsValid(strStart, strEnd, date)) {
-      setTimeValue(timevalue)
-    } else {
-      // [9, 13]
-      setTimeValue(date)
+  useEffect(() => {
+    return () => {
+      timerRef.current && clearTimeout(timerRef.current)
     }
-  }
+  }, [])
 
-  const onElementLayout = () => {
-    viewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      props.getInnerLayout && props.getInnerLayout(layoutRef)
-    })
-  }
+  useUpdateEffect(() => {
+    const calibratedValue = calibrateTime(value, startArray, endArray)
+    setFormatValue(calibratedValue)
+  }, [value])
 
-  const onModalLayout = () => {
-    modalRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      modalLayoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      setOffsetTop(offsetTop)
-    })
-  }
+  const onChange = (e: { detail: { value: TimeArray } }) => {
+    const { value } = e.detail
+    const calibratedValue = calibrateTime(value, startArray, endArray)
+    bindchange?.({ detail: { value: time2String(calibratedValue) } })
 
-  const renderModalChildren = () => {
-    const pickerProps = {
-      ref: nodeRef,
-      data,
-      value: timevalue,
-      defaultValue: timevalue,
-      cols: 2,
-      onChange: handlePickChange
+    if (value[0] !== formatValue[0] || value[1] !== formatValue[1]) {
+      setFormatValue(value)
     }
-    return (
-      <View style={styles.centeredView} ref={modalRef} onLayout={onModalLayout}>
-        <View style={styles.btnLine}>
-          <View style={styles.cancel}>
-            <TouchableWithoutFeedback onPress={handleCancel}>
-              <Text style={styles.btntext}>取消</Text>
-            </TouchableWithoutFeedback>
-          </View>
-          <View style={styles.ok}>
-            <TouchableWithoutFeedback onPress={handleConfirm}>
-              <Text style={styles.btntext}>确定</Text>
-            </TouchableWithoutFeedback>
-          </View>
-        </View>
-        <PickerView {...pickerProps}></PickerView>
-      </View>
-    )
-  }
-
-  const renderChildren = () => {
-    const touchProps = {
-      onLayout: onElementLayout,
-      ref: viewRef
+    if (value[0] !== calibratedValue[0] || value[1] !== calibratedValue[1]) {
+      timerRef.current && clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => setFormatValue(calibratedValue))
     }
-    return <View>
-      <TouchableWithoutFeedback onPress={handleChildClick}>
-        <View {...touchProps}>{children}</View>
-      </TouchableWithoutFeedback>
-    </View>
   }
 
-  // Animated.View
-  return (<>
-    <Portal>
-      <View style={visible ? styles.showModal : styles.hideModal}>
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={visible}
-      >
-        {renderModalChildren()}
-      </Modal>
-    </View>
-    </Portal>
-    {renderChildren()}
-  </>)
+  return (
+    <MpxPickerView
+      style={styles.pickerContainer}
+      indicator-style={styles.pickerIndicator}
+      value={formatValue}
+      bindchange={onChange}
+    >
+      {/* @ts-expect-error ignore */}
+      <MpxPickerViewColumn key='hour'>
+        {hoursRange.map((item, index) => (
+          <Text key={index} style={styles.pickerItem}>{item}</Text>
+        ))}
+      </MpxPickerViewColumn>
+      {/* @ts-expect-error ignore */}
+      <MpxPickerViewColumn key='minute'>
+        {minutesRange.map((item, index) => (
+          <Text key={index} style={styles.pickerItem}>{item}</Text>
+        ))}
+      </MpxPickerViewColumn>
+    </MpxPickerView>)
 })
 
-_TimePicker.displayName = 'mpx-picker-time'
-
-export default _TimePicker
+PickerTime.displayName = 'MpxPickerTime'
+export default PickerTime

package/lib/runtime/components/react/mpx-picker/type.ts

@@ -1,112 +1,126 @@
-import { ReactNode } from 'react'
-import { PickerValue } from '@ant-design/react-native'
+import React from 'react'
 
+export const enum PickerMode {
+  SELECTOR = 'selector',
+  MULTI_SELECTOR = 'multiSelector',
+  TIME = 'time',
+  DATE = 'date',
+  REGION = 'region',
+}
+
+export type PickerValue = number
 export type Obj = Record<string, any>
-export type SelectorProps = {
-  mode: string
-  // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: PickerValue
+export type RangeItem = Obj | number | string
+export type TimeValue = `${number}-${number}-${number}` | ''
+
+/** 通用属性 */
+export interface BasePickerProps {
+  /** --- 小程序属性 --- */
+  /** 选择器类型, 默认值 selector */
+  mode?: PickerMode
+  /** 是否禁用, 默认值 false */
   disabled?: boolean
-  children: ReactNode
+  /** 点击取消按钮时触发 */
   bindcancel?: Function
-  bindchange: Function
-  // mode 为 selector 或 multiSelector 时，range 有效
-  range: Array<number|string|Obj>
-  // 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器《显示内容》 对象中的属性
-  'range-key': string
-  getInnerLayout: Function
+  /** 头部标题 */
+  'header-text'?: string
+  /** --- 内部组件属性 --- */
+  /** 作为表单组件时的名称 */
+  name?: string
   style?: Record<string, any>
-  // bindcolumnchange?: Function
+  children?: React.ReactNode
+  range?: RangeItem[]
+  ref?: any
 }
 
-export type MultiSelectorProps = {
-  mode: string
-  // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: Array<number>
-  disabled?: boolean
-  children: ReactNode
-  bindcancel?: Function
-  bindchange: Function
+export interface SelectorProps extends BasePickerProps {
+  mode: PickerMode.SELECTOR
+  /**  默认值 0 */
+  value?: number
+  /** 默认值 [] */
+  range?: RangeItem[]
+  'range-key'?: string
+  /** 点击确认按钮后触发 change 事件, event.detail = {value} */
+  bindchange?: Function
+}
+
+export interface MultiSelectorProps extends BasePickerProps {
+  mode: PickerMode.MULTI_SELECTOR
+  /** 默认值 [] */
+  value?: number[]
+  range?: RangeItem[]
+  'range-key'?: string
+  bindchange?: Function
   bindcolumnchange?: Function
-  // mode 为 selector 或 multiSelector 时，range 有效
-  range: Array<Array<any>>
-  // 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器《显示内容》 对象中的属性
-  'range-key': string
-  getInnerLayout: Function
-  style?: Record<string, any>
 }
 
-export type TimeProps = {
-  mode: string
-  // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: string
-  disabled?: boolean
-  children: ReactNode
-  bindcancel?: Function
-  bindchange: Function
-  start: string
-  end: string
-  getInnerLayout: Function
-  style?: Record<string, any>
+export interface TimeProps extends BasePickerProps {
+  mode: PickerMode.TIME
+  /** 表示选中的时间，格式为"hh:mm" */
+  value?: string
+  start?: string
+  end?: string
+  bindchange?: Function
 }
 
-export type DateProps = {
-  mode: string
-  // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: string
+export interface DateProps extends BasePickerProps {
+  mode: PickerMode.DATE
+  /** 默认值 '' */
+  value?: TimeValue
+  start?: TimeValue
+  end?: TimeValue
+  /** 有效值 year,month,day，表示选择器的粒度 */
   fields?: 'day' | 'month' | 'year'
-  disabled?: boolean
-  children: ReactNode
-  bindcancel?: Function
-  bindchange: Function
-  start: string
-  end: string
-  getInnerLayout: Function
-  style?: Record<string, any>
+  bindchange?: Function
 }
 
-export type RegionProps = {
-  mode: string
-  // 表示选择了 range 中的第几个（下标从 0 开始）
-  value: Array<string>
-  level: 'province' | 'city' | 'region' | 'sub-district'
+export interface RegionProps extends BasePickerProps {
+  mode: PickerMode.REGION
+  /** 表示选中的省市区，默认选中每一列的第一个值, 默认值 [] */
+  value?: string[]
+  /** 默认值 region */
+  level?: 'province' | 'city' | 'region' | 'sub-district'
+  /** 可为每一列的顶部添加一个自定义的项 */
   'custom-item'?: string
-  disabled?: boolean
-  children: ReactNode
-  bindcancel?: Function
-  bindchange: Function
-  getInnerLayout: Function
-  style?: Record<string, any>
+  /** value 改变时触发 change 事件, event.detail = {value, code, postcode},
+   * 其中字段 code 是统计用区划代码, postcode 是邮政编码 */
+  bindchange?: Function
 }
 
-export type RegionObj = {
+export interface RegionObj {
   value: string
   code: string
   postcode?: string
   children?: RegionObj[]
 }
 
-export type PickerData = {
+export interface PickerData {
   value: string
   label: string
-  children?: Array<Object>
+  children?: Object[]
 }
 
-export type EventType = {
+export interface EventType {
   detail: {
     value: PickerValue[]
   }
 }
 
-export type LayoutType = {
+export interface LayoutType {
   nativeEvent: {
     layout: Obj
   }
 }
 
-type FormType = {
+export interface FormType {
   name: string
 }
 
-export type PickerProps = SelectorProps & MultiSelectorProps & TimeProps & DateProps & RegionProps & FormType
-export type ValueType = string | number | Array<number> | Array<string>
+export type PickerProps =
+  | SelectorProps
+  | MultiSelectorProps
+  | TimeProps
+  | DateProps
+  | RegionProps
+
+export type LanguageCode = 'zh-CN' | 'en-US'

package/lib/runtime/components/react/{mpx-picker-view.tsx → mpx-picker-view/index.tsx}

@@ -1,7 +1,7 @@
 import { View } from 'react-native'
 import React, { forwardRef, useRef } from 'react'
-import useInnerProps, { getCustomEvent } from './getInnerListeners'
-import useNodesRef, { HandlerRef } from './useNodesRef'
+import useInnerProps, { getCustomEvent } from '../getInnerListeners'
+import useNodesRef, { HandlerRef } from '../useNodesRef'
 import {
   useLayout,
   splitProps,
@@ -9,9 +9,9 @@ import {
   wrapChildren,
   useTransformStyle,
   extendObject
-} from './utils'
+} from '../utils'
 import { PickerViewStyleContext } from './pickerVIewContext'
-import type { AnyFunc } from './types/common'
+import type { AnyFunc } from '../types/common'
 /**
  * ✔ value
  * ✔ bindchange
@@ -29,14 +29,14 @@ interface PickerViewProps {
   children: React.ReactNode
   value?: Array<number>
   bindchange?: AnyFunc
-  style: {
+  style?: {
     [key: string]: any
   }
   'indicator-style'?: Record<string, any>,
   'mask-style'?: Record<string, any>,
-  'enable-var': boolean
+  'enable-var'?: boolean
   'external-var-context'?: Record<string, any>,
-  'enable-offset': boolean
+  'enable-offset'?: boolean
 }
 
 interface PickerLayout {