@mpxjs/webpack-plugin 2.10.3-beta.4 → 2.10.4

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

@@ -1,16 +1,17 @@
-import { View } from 'react-native'
-import { PickerValue } from '@ant-design/react-native'
-import React, { forwardRef, useRef, useContext, useState } from 'react'
+import React, { forwardRef, useRef, useContext, useEffect } from 'react'
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import { warn } from '@mpxjs/utils'
+import PickerSelector from './selector'
+import PickerMultiSelector from './multiSelector'
+import PickerTime from './time'
+import PickerDate from './date'
+import PickerRegion from './region'
+import { FormContext, FormFieldValue, RouteContext } from '../context'
+import useNodesRef, { HandlerRef } from '../useNodesRef'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import Selector from './selector'
-import TimeSelector from './time'
-import DateSelector from './date'
-import MultiSelector from './multiSelector'
-import RegionSelector from './region'
-import { PickerProps, EventType, ValueType } from './type'
-import { FormContext, FormFieldValue } from '../context'
+import { extendObject } from '../utils'
+import { createPopupManager } from '../mpx-popup'
+import { EventType, LanguageCode, PickerMode, PickerProps } from './type'
 
 /**
  * ✔ mode
@@ -27,131 +28,251 @@ import { FormContext, FormFieldValue } from '../context'
  * ✔ custom-item
  * ✔ level 选择器层级 province，city，region，<sub-district不支持>
  * ✔ level
- * ✘ header-text
- * ✘ bindcolumnchange
+ * ✔ header-text
+ * ✔ bindcolumnchange
  */
 
-const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: PickerProps, ref): React.JSX.Element => {
-  const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange, style } = props
-  const innerLayout = useRef({})
-  const nodeRef = useRef(null)
-  useNodesRef<View, PickerProps>(props, ref, nodeRef, {
-    style
-  })
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef
-  }, [], { layoutRef: innerLayout })
-
-  const [pickerValue, setPickerValue] = useState(value as ValueType)
-  const defaultValues = {
-    selector: 0,
-    multiSelector: [0],
-    time: props.start,
-    date: props.start,
-    region: undefined
+const styles = StyleSheet.create({
+  header: {
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#eeeeee'
+  },
+  headerText: {
+    color: '#333333',
+    fontSize: 18,
+    textAlign: 'center'
+  },
+  footer: {
+    gap: 20,
+    height: 50,
+    marginBottom: 20,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
+  footerItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 40,
+    width: 110,
+    borderRadius: 5
+  },
+  cancelButton: {
+    backgroundColor: '#eeeeee'
+  },
+  confirmButton: {
+    backgroundColor: '#1AAD19'
+  },
+  cancelText: {
+    color: 'green',
+    fontSize: 18,
+    textAlign: 'center'
+  },
+  confirmText: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    textAlign: 'center'
   }
+})
 
-  const formContext = useContext(FormContext)
-
-  let formValuesMap: Map<string, FormFieldValue> | undefined
+const pickerModalMap: Record<PickerMode, React.ComponentType<PickerProps>> = {
+  [PickerMode.SELECTOR]: PickerSelector,
+  [PickerMode.MULTI_SELECTOR]: PickerMultiSelector,
+  [PickerMode.TIME]: PickerTime,
+  [PickerMode.DATE]: PickerDate,
+  [PickerMode.REGION]: PickerRegion
+}
 
-  // 判断 context 是否存在，存在的话读取 context 中存的 formValuesMap
-  if (formContext) {
-    formValuesMap = formContext.formValuesMap
+const getDefaultValue = (mode: PickerMode) => {
+  switch (mode) {
+    case PickerMode.SELECTOR:
+    case PickerMode.MULTI_SELECTOR:
+    case PickerMode.REGION:
+      return []
+    case PickerMode.TIME:
+    case PickerMode.DATE:
+    default:
+      return ''
   }
+}
 
-  const resetValue = () => {
-    type curMode = keyof typeof defaultValues
-    const defalutValue = (defaultValues[mode as curMode] !== undefined ? defaultValues[mode as curMode] : value) as ValueType
-    setPickerValue(defalutValue)
+const buttonTextMap: Record<LanguageCode, { cancel: string; confirm: string }> = {
+  'zh-CN': {
+    cancel: '取消',
+    confirm: '确定'
+  },
+  'en-US': {
+    cancel: 'Cancel',
+    confirm: 'Confirm'
   }
+}
 
-  const getValue = () => {
-    return pickerValue
-  }
-  if (formValuesMap) {
-    if (!props.name) {
-      warn('If a form component is used, the name attribute is required.')
-    } else {
-      formValuesMap.set(props.name, { getValue, resetValue })
+const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
+  (props: PickerProps, ref): React.JSX.Element => {
+    const {
+      mode,
+      value,
+      range = null,
+      children,
+      disabled,
+      bindcancel,
+      bindchange,
+      'header-text': headerText = ''
+    } = props
+
+    const { pageId } = useContext(RouteContext) || {}
+    const buttonText = buttonTextMap[(global.__mpx?.i18n?.locale as LanguageCode) || 'zh-CN']
+    const pickerValue = useRef(value)
+    pickerValue.current = Array.isArray(value) ? value.slice() : value
+    const innerLayout = useRef({})
+    const nodeRef = useRef(null)
+    const pickerRef = useRef<any>(null)
+    const { open, show, hide, remove } = useRef(createPopupManager()).current
+
+    useNodesRef<View, PickerProps>(props, ref, nodeRef)
+    const innerProps = useInnerProps(
+      props,
+      {
+        ref: nodeRef
+      },
+      [],
+      { layoutRef: innerLayout }
+    )
+    const getInnerLayout = (layout: React.MutableRefObject<{}>) => {
+      innerLayout.current = layout.current
     }
-  }
 
-  const getInnerLayout = (layout: React.MutableRefObject<{}>) => {
-    innerLayout.current = layout.current
-  }
+    useEffect(() => {
+      if (range && pickerRef.current && mode === PickerMode.MULTI_SELECTOR) {
+        pickerRef.current.updateRange?.(range)
+      }
+    }, [JSON.stringify(range)])
 
-  const onChange = (event: EventType) => {
-    const eventData = getCustomEvent('change', {}, { detail: event.detail, layoutRef: innerLayout })
-    bindchange && bindchange(eventData)
-    setPickerValue(event.detail.value as ValueType)
-  }
+    /** --- form 表单组件内部方法 --- */
+    const getValue = () => {
+      return pickerValue.current
+    }
+    const resetValue = () => {
+      const defalutValue = getDefaultValue(mode) // 默认值
+      pickerRef.current.updateValue?.(defalutValue)
+    }
+    const formContext = useContext(FormContext)
+    let formValuesMap: Map<string, FormFieldValue> | undefined
+    if (formContext) {
+      formValuesMap = formContext.formValuesMap
+    }
+    if (formValuesMap) {
+      if (!props.name) {
+        warn('If a form component is used, the name attribute is required.')
+      } else {
+        formValuesMap.set(props.name, { getValue, resetValue })
+      }
+    }
+    useEffect(() => {
+      return () => {
+        if (formValuesMap && props.name) {
+          formValuesMap.delete(props.name)
+        }
+      }
+    }, [])
+    /** --- form 表单组件内部方法 --- */
 
-  const columnChange = (value: PickerValue[], index: number) => {
-    // type: "columnchange", detail: {column: 1, value: 2}
-    const eventData = getCustomEvent('columnchange', {}, { detail: { column: index, value }, layoutRef: innerLayout })
-    bindcolumnchange && bindcolumnchange(eventData)
-  }
-  const commonProps = {
-    ...innerProps,
-    mode,
-    children,
-    bindchange: onChange,
-    bindcolumnchange: columnChange,
-    bindcancel,
-    getInnerLayout
-  }
+    const onChange = (e: EventType) => {
+      const { value } = e.detail
+      pickerValue.current = value
+    }
 
-  const selectorProps = {
-    ...commonProps,
-    value: pickerValue as PickerValue,
-    range: props.range,
-    'range-key': props['range-key']
-  }
+    const onColumnChange = (columnIndex: number, value: number) => {
+      if (mode !== PickerMode.MULTI_SELECTOR) {
+        return
+      }
+      const eventData = getCustomEvent(
+        'columnchange',
+        {},
+        { detail: { column: columnIndex, value }, layoutRef: innerLayout }
+      )
+      props.bindcolumnchange?.(eventData)
+    }
 
-  const multiProps = {
-    ...commonProps,
-    value: pickerValue as Array<number>,
-    range: props.range,
-    'range-key': props['range-key']
-  }
+    const onCancel = () => {
+      bindcancel?.()
+      hide()
+    }
 
-  const timeProps = {
-    ...commonProps,
-    value: pickerValue as string,
-    start: props.start,
-    end: props.end
-  }
+    const onConfirm = () => {
+      const eventData = getCustomEvent(
+        'change',
+        {},
+        { detail: { value: pickerValue.current }, layoutRef: innerLayout }
+      )
+      bindchange?.(eventData)
+      hide()
+    }
 
-  const dateProps = {
-    ...commonProps,
-    value: pickerValue as string,
-    start: props.start,
-    end: props.end,
-    fileds: props.fields || 'day'
-  }
+    const specificProps = extendObject(innerProps, {
+      mode,
+      children,
+      bindchange: onChange,
+      bindcolumnchange: onColumnChange,
+      getInnerLayout,
+      getRange: () => range
+    })
 
-  const regionProps = {
-    ...commonProps,
-    value: pickerValue as Array<string>,
-    level: props.level || 'sub-district'
-  }
+    const renderPickerContent = () => {
+      if (disabled) {
+        return null
+      }
+      const _mode = mode ?? PickerMode.SELECTOR
+      if (!(_mode in pickerModalMap)) {
+        return warn(`[Mpx runtime warn]: Unsupported <picker> mode: ${mode}`)
+      }
+      const _value: any = value
+      const PickerModal = pickerModalMap[_mode]
+      const renderPickerModal = (
+        <>
+          {headerText && (
+            <View style={[styles.header]}>
+              <Text style={[styles.headerText]}>{headerText}</Text>
+            </View>
+          )}
+          <PickerModal {...specificProps} value={_value} ref={pickerRef}></PickerModal>
+          <View style={[styles.footer]}>
+            <View
+              onTouchEnd={onCancel}
+              style={[styles.footerItem, styles.cancelButton]}
+            >
+              <Text style={[styles.cancelText]}>{buttonText.cancel}</Text>
+            </View>
+            <View
+              onTouchEnd={onConfirm}
+              style={[styles.footerItem, styles.confirmButton]}
+            >
+              <Text style={[styles.confirmText]}>{buttonText.confirm}</Text>
+            </View>
+          </View>
+        </>
+      )
+      const contentHeight = headerText ? 350 : 310
+      open(renderPickerModal, pageId, { contentHeight })
+    }
 
-  if (mode === 'selector') {
-    return <Selector {...selectorProps}></Selector>
-  } else if (mode === 'multiSelector') {
-    return <MultiSelector {...multiProps}></MultiSelector>
-  } else if (mode === 'time') {
-    return <TimeSelector {...timeProps}></TimeSelector>
-  } else if (mode === 'date') {
-    return <DateSelector {...dateProps}></DateSelector>
-  } else if (mode === 'region') {
-    return <RegionSelector {...regionProps}></RegionSelector>
-  } else {
-    return <View>只支持selector, multiSelector, time, date, region 这些类型</View>
-  }
-})
+    useEffect(() => {
+      renderPickerContent()
+      return () => {
+        remove()
+      }
+    }, [])
 
-_Picker.displayName = 'mpx-picker'
+    return (
+      <TouchableWithoutFeedback onPress={show}>
+        {children}
+      </TouchableWithoutFeedback>
+    )
+  }
+)
 
-export default _Picker
+Picker.displayName = 'MpxPicker'
+export default Picker

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

@@ -1,160 +1,117 @@
-import { View, TouchableWithoutFeedback } from 'react-native'
-import { Picker, PickerValue } from '@ant-design/react-native'
-import React, { forwardRef, useState, useRef, useEffect } from 'react'
-import { MultiSelectorProps, LayoutType } from './type'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { MultiSelectorProps, Obj, RangeItem } from './type'
+import MpxPickerView from '../mpx-picker-view'
+import MpxPickerViewColumn from '../mpx-picker-view-column'
+import { HandlerRef } from '../useNodesRef' // 引入辅助函数
 
-function convertToObj (item?: any, rangeKey = ''): any {
-  if (typeof item === 'object') {
-    return { value: item[rangeKey], label: item[rangeKey] }
-  } else {
-    return { value: item, label: item }
+const styles = StyleSheet.create({
+  pickerContainer: {
+    height: 240,
+    paddingHorizontal: 10,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10
+  },
+  pickerIndicator: {
+    height: 45
+  },
+  pickerItem: {
+    fontSize: 18,
+    lineHeight: 45,
+    textAlign: 'center'
   }
-}
+})
 
-// eslint-disable-next-line default-param-last
-function formatRangeFun (range: any[][] = [], rangeKey?: string): any[] {
-  const result = (range[0] || []).map(item => {
-    return convertToObj(item, rangeKey)
-  })
-  let tmp = result
-  for (let i = 1; i < range.length; i++) {
-    const child = Array.isArray(range[i]) ? range[i] : []
-    const nextColData = child.map(item => {
-      return convertToObj(item, rangeKey)
-    })
-    tmp.forEach(item => {
-      item.children = nextColData
-    })
-    tmp = nextColData
-  }
-  return result
-}
+const formatRangeFun = (range: RangeItem[], rangeKey = '') =>
+  rangeKey ? range.map((item: Obj) => item[rangeKey]) : range
 
-function getIndexByValues (range: any[] = [], value: any[] = []): number[] {
-  let tmp = range
-  return value.map(v => {
-    for (let i = 0; i < tmp.length; i++) {
-      if (tmp[i].value === v) {
-        tmp = tmp[i].children || []
-        return i
-      }
-    }
-    return 0
-  })
+const formatValueFn = (value: number | number[]) => {
+  return Array.isArray(value) ? value : [value]
 }
-// [1,1,2] 寻找出[]
-function getInnerValueByIndex (range: any[] = [], value: any[] = []): string[] {
-  let tmp = range
-  return value.map(v => {
-    const current = tmp[v].value
-    tmp = tmp[v].children
-    return current
-  })
-}
-// column = 1 value = ['无脊柱动物', '扁性动物', '吸血虫'] 根据column 和value 获取到当前列变动选择的值所在当前列的索引
-function getColumnIndexByValue (range: any[] = [], column: number, value: any[] = []): number {
-  let curRange = range
-  let changeIndex = 0
-  let tmpRange: any[] = []
-  value.map((item, index) => {
-    if (column === index) {
-      curRange.map((ritem, rindex) => {
-        if (ritem.value === item) {
-          changeIndex = rindex
-        }
-        return ritem
-      })
-    } else {
-      curRange.map((citem, cindex) => {
-        if (citem.value === item) {
-          tmpRange = citem.children
-        }
-        return citem
-      })
-      curRange = tmpRange
-    }
-    return item
-  })
-  return changeIndex
+
+const hasDiff = (a: number[], b: number[]) => {
+  return a.length !== b.length || a.some((item, index) => item !== b[index])
 }
 
-const _MultiSelectorPicker = forwardRef<HandlerRef<View, MultiSelectorProps>, MultiSelectorProps>((props: MultiSelectorProps, ref): React.JSX.Element => {
-  const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange, style } = props
-  const formatRange = formatRangeFun(range, props['range-key'])
-  const initValue = getInnerValueByIndex(formatRange, value)
-  // 选中的索引值
-  const [selected, setSelected] = useState(initValue)
-  // range数据源
-  const [data, setData] = useState(formatRange || [])
-  // 存储layout布局信息
-  const layoutRef = useRef({})
-  const viewRef = useRef<View>(null)
-  const nodeRef = useRef<View>(null)
-  useNodesRef<View, MultiSelectorProps>(props, ref, nodeRef, {
-    style
-  })
+const PickerMultiSelector = forwardRef<
+  HandlerRef<View, MultiSelectorProps>,
+  MultiSelectorProps
+>((props: MultiSelectorProps, ref): React.JSX.Element => {
+  const { value = [], range = [], bindchange, bindcolumnchange } = props
+  const _value = formatValueFn(value)
+  const [formatValue, setFormatValue] = useState<number[]>(_value)
+  const [formatRange, setFormatRange] = useState(formatRangeFun(range, props['range-key']))
+  const nodeRef = useRef(null)
 
-  useEffect(() => {
-    if (range) {
-      const newFormatRange = formatRangeFun(range, props['range-key'])
-      setData(newFormatRange)
+  const updateValue = useCallback((value: number[] = []) => {
+    let newValue = formatValueFn(value)
+    if (newValue.length === 0) {
+      newValue = formatValue.map(() => 0)
+    }
+    checkColumnChange(newValue, formatValue)
+    if (hasDiff(newValue, formatValue)) {
+      setFormatValue(newValue)
     }
-    const newValue = getInnerValueByIndex(formatRange, value)
-    value && setSelected(newValue)
-  }, [range, value])
+  }, [formatValue])
 
-  const onChange = (value: PickerValue[]) => {
-    // e.detail.value 都是索引multi
-    const strIndex = getIndexByValues(data, value)
-    bindchange && bindchange({
-      detail: {
-        value: strIndex
+  const updateRange = (newRange: RangeItem[]) => {
+    const range = formatRangeFun(newRange.slice(), props['range-key'])
+    setFormatRange(range)
+  }
+
+  const _props = useRef(props)
+  _props.current = props
+  useImperativeHandle(ref, () => ({
+    updateValue,
+    updateRange,
+    getNodeInstance: () => ({
+      props: _props,
+      nodeRef,
+      instance: {
+        style: {}
       }
     })
-  }
+  }))
 
-  const onPickerChange = (value: PickerValue[], column: number) => {
-    // onPickerChange--- ["无脊柱动物", "节肢动物", "吸血虫"] 1  拿着column
-    const changeIndex = getColumnIndexByValue(data, column, value)
-    bindcolumnchange && bindcolumnchange(changeIndex, column)
+  const onChange = (e: { detail: { value: number[] } }) => {
+    const { value } = e.detail
+    checkColumnChange(value, formatValue)
+    bindchange?.({ detail: { value: value } })
+    if (hasDiff(value, formatValue)) {
+      setFormatValue(value.slice())
+    }
   }
 
-  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)
-    })
+  const checkColumnChange = (value: number[], formatValue: number[]) => {
+    const index = value.findIndex((v, i) => v !== formatValue[i])
+    if (index !== -1) {
+      bindcolumnchange?.(index, value[index])
+    }
   }
 
-  const antPickerProps = {
-    ref: nodeRef,
-    data,
-    value: selected,
-    cols: range.length,
-    defaultValue: initValue,
-    disabled,
-    itemHeight: 40,
-    onChange,
-    onDismiss: bindcancel && bindcancel,
-    onPickerChange: onPickerChange
-  } as any
-
-  const touchProps = {
-    onLayout: onElementLayout,
-    ref: viewRef
+  const renderColumn = (columnData: any[], index: number) => {
+    return (
+      // @ts-expect-error ignore
+      <MpxPickerViewColumn key={index}>
+        {columnData.map((item, index) => (
+          <Text key={index} style={styles.pickerItem}>{item}</Text>
+        ))}
+      </MpxPickerViewColumn>
+    )
   }
 
-  return (<Picker {...antPickerProps}>
-      <TouchableWithoutFeedback>
-        <View {...touchProps}>
-          {children}
-        </View>
-      </TouchableWithoutFeedback>
-    </Picker>
-  )
+  return (
+    <MpxPickerView
+      style={styles.pickerContainer}
+      indicator-style={styles.pickerIndicator}
+      value={formatValue}
+      bindchange={onChange}
+    >
+      {formatRange.map((item, index) => (
+        renderColumn(item, index)
+      ))}
+    </MpxPickerView>)
 })
 
-_MultiSelectorPicker.displayName = 'mpx-picker-multiselector'
-
-export default _MultiSelectorPicker
+PickerMultiSelector.displayName = 'MpxPickerMultiSelector'
+export default PickerMultiSelector