@mpxjs/webpack-plugin 2.10.3 → 2.10.4

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

@@ -1,111 +1,239 @@
-import { View, TouchableWithoutFeedback } from 'react-native'
-import { Picker, PickerColumnItem } from '@ant-design/react-native'
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import MpxPickerView from '../mpx-picker-view'
+import MpxPickerViewColumn from '../mpx-picker-view-column'
+import { RegionProps } from './type'
 import { regionData } from './regionData'
-import React, { forwardRef, useState, useRef } from 'react'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { RegionProps, RegionObj, LayoutType } from './type'
-
-function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth = 2): PickerColumnItem[] {
-  const l = depth
-  // 'PickerData[]' is not assignable to type 'PickerColumn | PickerColumn[]'.
-  // const obj: PickerColumnItem[] = []
-  const obj: PickerColumnItem[] = []
-  if (customItem) {
-    const objClone: PickerColumnItem = {
-      value: customItem,
-      label: customItem,
-      children: []
+import { HandlerRef } from '../useNodesRef'
+import { extendObject, useUpdateEffect } from '../utils'
+
+type FormatObj = {
+  indexArr: number[]
+  rangeArr: string[][]
+  nameArr?: string[]
+}
+
+const styles = StyleSheet.create({
+  pickerContainer: {
+    height: 240,
+    paddingHorizontal: 10,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10
+  },
+  pickerIndicator: {
+    height: 45
+  },
+  pickerItem: {
+    fontSize: 16,
+    lineHeight: 45,
+    textAlign: 'center'
+  }
+})
+
+const rangeProvince = regionData.map(item => item.value)
+
+const findIndex = (arr: string[], val: string) => {
+  const res = arr.findIndex(item => item === val)
+  return res === -1 ? 0 : res
+}
+
+const getColumnLength = (level: RegionProps['level']) => {
+  if (level === 'province') {
+    return 1
+  } else if (level === 'city') {
+    return 2
+  } else {
+    return 3
+  }
+}
+
+const valueStr2Obj = (
+  value: string[] = [],
+  limit: number,
+  customItem = ''
+): FormatObj => {
+  const offsetIndex = customItem ? 1 : 0
+  let indexProvince = 0
+  if (customItem && value[0] === customItem) {
+    indexProvince = 0
+  } else {
+    indexProvince = findIndex(rangeProvince, value[0]) + offsetIndex
+  }
+  const ans: FormatObj = {
+    indexArr: [indexProvince],
+    rangeArr: [customItem ? [customItem, ...rangeProvince] : rangeProvince]
+  }
+  for (
+    let i = 1,
+      lastIndex = indexProvince,
+      lastData = regionData,
+      lastRange = rangeProvince;
+    i < limit;
+    i++
+  ) {
+    if (customItem) {
+      if (lastIndex === 0) {
+        if (i === 1) {
+          ans.indexArr.push(0, 0)
+          ans.rangeArr.push([customItem], [customItem])
+        } else {
+          ans.indexArr.push(0)
+          ans.rangeArr.push([customItem])
+        }
+        return ans
+      }
     }
-    const panding = { ...objClone }
-    let loop = panding
-    while (depth-- > 0) {
-      loop.children = [{ ...objClone }]
-      loop = loop.children[0] as PickerColumnItem
+    lastData = lastData[lastIndex - offsetIndex].children!
+    lastRange = lastData.map((item) => item.value)
+    lastIndex = findIndex(lastRange, value[i]) + offsetIndex
+    if (customItem && customItem === value[i]) {
+      lastIndex = 0
     }
-    obj.push(panding as PickerColumnItem)
+    ans.indexArr.push(Math.max(0, lastIndex))
+    ans.rangeArr.push(customItem ? [customItem, ...lastRange] : lastRange)
   }
-  for (let i = 0; i < clObj.length; i++) {
-    const region: PickerColumnItem = {
-      value: clObj[i].value,
-      label: clObj[i].value
+  return ans
+}
+
+const valueChanged2Obj = (currentObj: FormatObj, value: number[], limit = 3, customItem = '') => {
+  const offsetIndex = customItem ? 1 : 0
+  const newValue = new Array(limit).fill(0)
+  const currentValue = currentObj.indexArr
+  for (let i = 0; i < limit; i++) {
+    if (i === limit - 1) {
+      return {
+        indexArr: value,
+        rangeArr: currentObj.rangeArr
+      }
     }
-    if (clObj[i].children) {
-      region.children = formateRegionData(clObj[i].children, customItem, l - 1)
+    newValue[i] = value[i]
+    if (currentValue[i] !== value[i]) {
+      break
     }
-    obj.push(region)
   }
-  return obj
-}
 
-const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((props: RegionProps, ref): React.JSX.Element => {
-  const { children, value, bindchange, bindcancel, disabled, style } = props
-  const formatRegionData = formateRegionData(regionData, props['custom-item'])
+  const ans: FormatObj = {
+    indexArr: [newValue[0]],
+    rangeArr: [currentObj.rangeArr[0]]
+  }
+  let data = regionData
+  for (let i = 1; i < limit; i++) {
+    if (customItem) {
+      if (newValue[i - 1] === 0) {
+        if (i === 1) {
+          ans.indexArr.push(0, 0)
+          ans.rangeArr.push([customItem], [customItem])
+        } else {
+          ans.indexArr.push(0)
+          ans.rangeArr.push([customItem])
+        }
+        return ans
+      }
+    }
+    data = data[newValue[i - 1] - offsetIndex].children!
+    const range = data.map(item => item.value)
+    ans.indexArr.push(newValue[i])
+    ans.rangeArr.push(customItem ? [customItem, ...range] : range)
+  }
+  return ans
+}
 
-  const [regionvalue, setRegionValue] = useState(value)
-  // 存储layout布局信息
-  const layoutRef = useRef({})
-  const viewRef = useRef<View>(null)
-  const nodeRef = useRef(null)
-  useNodesRef<View, RegionProps>(props, ref, nodeRef, {
-    style
+const valueNum2String = (value: number[], customItem = '') => {
+  let data = regionData
+  return value.map(index => {
+    if (customItem) {
+      if (index === 0) {
+        return customItem
+      } else {
+        index -= 1
+      }
+    }
+    const item = data[index]
+    data = item.children!
+    return item.value
   })
+}
 
-  const onChange = (value: string[]): void => {
-    // 通过 value 查找 code
-    let tmp: RegionObj[] = regionData
-    const postcode: (string | undefined)[] = []
-    const code = value.map((item) => {
-      for (let i = 0; i < tmp.length; i++) {
-        if (tmp[i].value === item) {
-          const code = tmp[i].code
-          postcode.push(tmp[i].postcode)
-          tmp = tmp[i].children || []
-          return code
-        }
-      }
-      return item
-    }).filter(code => !!code)
-    const detail: Record<string, any> = { value, code }
-    if (postcode[2]) detail.postcode = postcode[2]
-    setRegionValue(value)
-    bindchange && bindchange({
-      detail
-    })
+const hasDiff = (currentValue: number[], value: number[], limit = 3) => {
+  for (let i = 0; i < limit; i++) {
+    if (currentValue[i] !== value[i]) {
+      return true
+    }
   }
+  return false
+}
+
+const PickerRegion = forwardRef<
+  HandlerRef<View, RegionProps>,
+  RegionProps
+>((props: RegionProps, ref): React.JSX.Element => {
+  const { value = [], level = 'region', 'custom-item': customItem = '', bindchange } = props
+  const nodeRef = useRef(null)
+  const columnLength = useMemo(() => getColumnLength(level), [level])
+  const [formatObj, setFormatObj] = useState<FormatObj>(valueStr2Obj(value, columnLength, customItem))
+
+  const updateValue = useCallback((value: string[] = []) => {
+    const calibratedValue = valueStr2Obj(value, columnLength, customItem)
+    setFormatObj(calibratedValue)
+  }, [columnLength, customItem])
 
-  const onElementLayout = (layout: LayoutType) => {
-    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)
+  const _props = useRef(props)
+  _props.current = props
+  useImperativeHandle(ref, () => ({
+    updateValue,
+    getNodeInstance: () => ({
+      props: _props,
+      nodeRef,
+      instance: {
+        style: {}
+      }
     })
-  }
+  }))
 
-  const onDismiss = (): void => {
-    bindcancel && bindcancel()
-  }
+  useUpdateEffect(() => {
+    const calibratedValue = valueStr2Obj(value, columnLength, customItem)
+    if (hasDiff(formatObj.indexArr, calibratedValue.indexArr, columnLength)) {
+      setFormatObj(calibratedValue)
+    }
+  }, [value, columnLength, customItem])
 
-  const regionProps = {
-    ref: nodeRef,
-    data: formatRegionData,
-    value: regionvalue,
-    onChange,
-    disabled,
-    onDismiss
-  }
+  const onChange = useCallback((e: { detail: { value: number[] } }) => {
+    const { value } = e.detail
+    const currentValue = formatObj.indexArr
+    const newObj = valueChanged2Obj(formatObj, value, columnLength, customItem)
+    if (hasDiff(currentValue, value, columnLength)) {
+      setFormatObj(newObj)
+    }
+    bindchange?.({ detail: { value: valueNum2String(newObj.indexArr, customItem) } })
+  }, [formatObj, columnLength, customItem, bindchange])
 
-  const touchProps = {
-    onLayout: onElementLayout,
-    ref: viewRef
+  const renderColumn = () => {
+    return formatObj.rangeArr?.map((item, index) => (
+        // @ts-expect-error ignore
+        <MpxPickerViewColumn key={index}>
+          {item.map((item, index) => {
+            const len = item.length
+            const style = extendObject({}, styles.pickerItem, {
+              fontSize: len > 5 ? 21 - len : 16
+            })
+            return <Text key={index} style={style}>
+              {item}
+            </Text>
+          })}
+        </MpxPickerViewColumn>
+    ))
   }
 
   return (
-    <Picker {...regionProps}>
-      <TouchableWithoutFeedback>
-        <View {...touchProps}>{children}</View>
-      </TouchableWithoutFeedback>
-    </Picker>
-  )
+    <MpxPickerView
+      style={styles.pickerContainer}
+      indicator-style={styles.pickerIndicator}
+      value={formatObj.indexArr}
+      bindchange={onChange}
+    >
+      {renderColumn()}
+    </MpxPickerView>)
 })
 
-_RegionPicker.displayName = 'mpx-picker-region'
-export default _RegionPicker
+PickerRegion.displayName = 'MpxPickerRegion'
+export default PickerRegion

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

@@ -1,95 +1,90 @@
-/**
- * 普通选择器，range可以是Array<Obj> 也可以是Array
- */
-import { View, TouchableWithoutFeedback } from 'react-native'
-import React, { forwardRef, useState, useRef, useEffect } from 'react'
-import { Picker, PickerColumn, PickerValue } from '@ant-design/react-native'
-import { SelectorProps, Obj, LayoutType } from './type'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { SelectorProps, Obj, RangeItem } from './type'
+import MpxPickerView from '../mpx-picker-view'
+import MpxPickerViewColumn from '../mpx-picker-view-column'
+import { HandlerRef } from '../useNodesRef'
+import { useUpdateEffect } from '../utils'
 
-type RangeItemType = Obj | number | string
+const styles = StyleSheet.create({
+  pickerContainer: {
+    height: 240,
+    paddingHorizontal: 10,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10
+  },
+  pickerIndicator: {
+    height: 45
+  },
+  pickerItem: {
+    fontSize: 18,
+    lineHeight: 45,
+    textAlign: 'center'
+  }
+})
 
-const formatRangeFun = (range: Array<RangeItemType>, rangeKey = ''): any => {
-  let newRange: Object[] = []
-  newRange = (range || []).map((item: RangeItemType, index) => {
-    if (typeof item === 'object') {
-      return { value: index, label: item[rangeKey as string] }
-    } else {
-      return { value: index, label: item }
-    }
-  })
-  return newRange as PickerColumn
+const formatRangeFun = (range: RangeItem[], rangeKey = '') =>
+  rangeKey ? range.map((item: Obj) => item[rangeKey]) : range
+
+const formatValueFn = (value: number | number[] = 0) => {
+  const _value = Array.isArray(value) ? value[0] : value
+  return +_value
 }
 
-const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProps>((props: SelectorProps, ref): React.JSX.Element => {
-  const { range, children, value, disabled, bindchange, bindcancel, style } = props
-  // 格式化数据为Array<*>
-  const formatRange: PickerColumn = formatRangeFun(range, props['range-key'])
-  // 选中的索引值
-  const [selected, setSelected] = useState<PickerValue>(value || 0)
-  // range数据源
-  const [data, setData] = useState(formatRange || [])
-  // 存储layout布局信息
-  const layoutRef = useRef({})
-  const viewRef = useRef<View>(null)
+const PickerSelector = forwardRef<
+  HandlerRef<View, SelectorProps>,
+  SelectorProps
+>((props: SelectorProps, ref): React.JSX.Element => {
+  const { value, range = [], bindchange } = props
+  const [formatValue, setFormatValue] = useState<number>(formatValueFn(value))
+  const formatRange: Array<any> = formatRangeFun(range, props['range-key'])
   const nodeRef = useRef(null)
-  useNodesRef<View, SelectorProps>(props, ref, nodeRef, {
-    style
-  })
 
-  useEffect(() => {
-    if (range) {
-      const newFormatRange = formatRangeFun(range, props['range-key'])
-      setData(newFormatRange)
-    }
-    setSelected(() => {
-      return value
-    })
-  }, [range, value])
-  const defaultValue = [value]
+  const updateValue = (value = 0) => {
+    const newValue = formatValueFn(value)
+    setFormatValue(newValue)
+  }
 
-  const onChange = (value: PickerValue[]) => {
-    bindchange && bindchange({
-      detail: {
-        value: value && value[0]
+  useUpdateEffect(() => {
+    updateValue(value)
+  }, [value])
+
+  const _props = useRef(props)
+  _props.current = props
+  useImperativeHandle(ref, () => ({
+    updateValue,
+    getNodeInstance: () => ({
+      props: _props,
+      nodeRef,
+      instance: {
+        style: {}
       }
     })
-  }
+  }))
 
-  const onElementLayout = (layout: LayoutType) => {
-    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)
-    })
+  const onChange = (e: { detail: { value: number[] } }) => {
+    const { value } = e.detail
+    if (formatValue !== value[0]) {
+      setFormatValue(value[0])
+    }
+    bindchange?.({ detail: { value: value[0] + '' } })
   }
 
-  const antPickerProps = {
-    ref: nodeRef,
-    data,
-    value: [selected],
-    cols: 1,
-    defaultValue,
-    itemHeight: 40,
-    onChange,
-    onDismiss: bindcancel && bindcancel
-  } as any
-
-  const touchProps = {
-    onLayout: onElementLayout,
-    ref: viewRef
-  }
   return (
-    <Picker
-      {...antPickerProps}>
-        <TouchableWithoutFeedback>
-          <View {...touchProps}>
-            {children}
-          </View>
-        </TouchableWithoutFeedback>
-    </Picker>
-  )
+    <MpxPickerView
+      style={styles.pickerContainer}
+      indicator-style={styles.pickerIndicator}
+      value={[formatValue]}
+      bindchange={onChange}
+    >
+      {/* @ts-expect-error ignore */}
+      <MpxPickerViewColumn>
+        {formatRange.map((item, index) => (
+          <Text key={index} style={styles.pickerItem}>{item}</Text>
+        ))}
+      </MpxPickerViewColumn>
+    </MpxPickerView>)
 })
 
-_SelectorPicker.displayName = 'mpx-picker-selector'
-
-export default _SelectorPicker
+PickerSelector.displayName = 'MpxPickerSelector'
+export default PickerSelector