ipanel-rnapp-ajb-base 1.0.13 → 1.0.15

package/app/components/common/PickerV2Base/locale-provider/index.zh-CN.md

@@ -0,0 +1,38 @@
+---
+category: Components
+title: Provider
+subtitle: 国际化和皮肤配置
+type: Other
+---
+
+为组件内建文案提供统一的国际化支持。
+
+## 使用
+
+Provider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
+
+
+```jsx
+import enUS from '@ant-design/react-native/lib/locale-provider/en_US';
+
+...
+
+return <Provider locale={enUS}><App /></Provider>;
+```
+
+我们暂时只提供英语，中文两种语言支持（`默认语言是中文`），所有语言包可以在 [这里](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/locale-provider/) 找到。
+
+### 增加语言包
+
+如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/locale-provider/en_US.tsx) 的基础上创建一个新的语言包，并给我们 Pull Request。
+
+### 其他国际化需求
+
+本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 [react-intl](https://github.com/yahoo/react-intl)，可参考示例：[Intl demo 1](http://github.com/ant-design/intl-example) 和 [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US)。
+
+## API
+
+| 参数   | 说明                                                                                                                                                                     | 类型   | 默认值 |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | ------ |
+| locale | 语言包配置，语言包可到 `@ant-design/react-native/lib/locale-provider/` 目录下寻找                                                                                        | object | -      |
+| theme  | 主题样式配置，可根据需要覆盖部分或者全部变量，具体变量请查看 [theme](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/style/themes/default.tsx) | object | -      |

package/app/components/common/PickerV2Base/locale-provider/ko_KR.tsx

@@ -0,0 +1,22 @@
+import DatePickerView from '../date-picker-view/locale/ko_KR'
+import DatePicker from '../date-picker/locale/ko_KR'
+import Form from '../form/locale/ko_KR'
+import InputItem from '../input-item/locale/ko_KR'
+import ListView from '../list-view/locale/ko_KR'
+import Modal from '../modal/locale/ko_KR'
+import Pagination from '../pagination/locale/ko_KR'
+import Picker from '../picker/locale/ko_KR'
+import SearchBar from '../search-bar/locale/ko_KR'
+
+export default {
+  locale: 'ko_KR',
+  DatePicker,
+  DatePickerView,
+  InputItem,
+  Modal,
+  Pagination,
+  Picker,
+  SearchBar,
+  ListView,
+  Form,
+}

package/app/components/common/PickerV2Base/locale-provider/pt_BR.tsx

@@ -0,0 +1,22 @@
+import DatePickerView from '../date-picker-view/locale/pt_BR'
+import DatePicker from '../date-picker/locale/pt_BR'
+import Form from '../form/locale/pt_BR'
+import InputItem from '../input-item/locale/pt_BR'
+import ListView from '../list-view/locale/pt_BR'
+import Modal from '../modal/locale/pt_BR'
+import Pagination from '../pagination/locale/pt_BR'
+import Picker from '../picker/locale/pt_BR'
+import SearchBar from '../search-bar/locale/pt_BR'
+
+export default {
+  locale: 'pt_BR',
+  DatePicker,
+  DatePickerView,
+  InputItem,
+  Modal,
+  Pagination,
+  Picker,
+  SearchBar,
+  ListView,
+  Form,
+}

package/app/components/common/PickerV2Base/locale-provider/ru_RU.tsx

@@ -0,0 +1,22 @@
+import DatePickerView from '../date-picker-view/locale/ru_RU'
+import DatePicker from '../date-picker/locale/ru_RU'
+import Form from '../form/locale/ru_RU'
+import InputItem from '../input-item/locale/ru_RU'
+import ListView from '../list-view/locale/ru_RU'
+import Modal from '../modal/locale/ru_RU'
+import Pagination from '../pagination/locale/ru_RU'
+import Picker from '../picker/locale/ru_RU'
+import SearchBar from '../search-bar/locale/ru_RU'
+
+export default {
+  locale: 'ru',
+  DatePicker,
+  DatePickerView,
+  InputItem,
+  Modal,
+  Pagination,
+  Picker,
+  SearchBar,
+  ListView,
+  Form,
+}

package/app/components/common/PickerV2Base/locale-provider/sv_SE.tsx

@@ -0,0 +1,22 @@
+import DatePickerView from '../date-picker-view/locale/sv_SE'
+import DatePicker from '../date-picker/locale/sv_SE'
+import Form from '../form/locale/sv_SE'
+import InputItem from '../input-item/locale/sv_SE'
+import ListView from '../list-view/locale/sv_SE'
+import Modal from '../modal/locale/sv_SE'
+import Pagination from '../pagination/locale/sv_SE'
+import Picker from '../picker/locale/sv_SE'
+import SearchBar from '../search-bar/locale/sv_SE'
+
+export default {
+  locale: 'sv',
+  DatePicker,
+  DatePickerView,
+  InputItem,
+  Modal,
+  Pagination,
+  Picker,
+  SearchBar,
+  ListView,
+  Form,
+}

package/app/components/common/PickerV2Base/locale-provider/useLocale.tsx

@@ -0,0 +1,36 @@
+import type { Locale } from '.'
+
+import * as React from 'react'
+import { LocaleContext } from './index'
+import defaultLocaleData from './zh_CN'
+
+export type LocaleComponentName = Exclude<keyof Locale, 'locale'>
+
+const useLocale = <C extends LocaleComponentName = LocaleComponentName>(
+  componentName: C,
+  defaultLocale?: Locale[C] | (() => Locale[C]),
+): readonly [NonNullable<Locale[C]>, string] => {
+  const fullLocale = React.useContext(LocaleContext)
+  // @ts-ignore
+  const getLocale = React.useMemo<NonNullable<Locale[C]>>(() => {
+    const locale = defaultLocale || defaultLocaleData[componentName]
+    const localeFromContext = fullLocale?.antLocale?.[componentName] ?? {}
+    return {
+      ...(typeof locale === 'function' ? locale() : locale),
+      ...(localeFromContext || {}),
+    }
+  }, [componentName, defaultLocale, fullLocale])
+
+  const getLocaleCode = React.useMemo<string>(() => {
+    const localeCode = fullLocale?.antLocale?.locale
+    // Had use LocaleProvide but didn't set locale
+    if (fullLocale?.antLocale.exist && !localeCode) {
+      return defaultLocaleData.locale
+    }
+    return localeCode!
+  }, [fullLocale])
+
+  return [getLocale, getLocaleCode] as const
+}
+
+export default useLocale

package/app/components/common/PickerV2Base/locale-provider/zh_CN.tsx

@@ -0,0 +1,22 @@
+import DatePickerView from '../date-picker-view/locale/zh_CN'
+import DatePicker from '../date-picker/locale/zh_CN'
+import Form from '../form/locale/zh_CN'
+import InputItem from '../input-item/locale/zh_CN'
+import ListView from '../list-view/locale/zh_CN'
+import Modal from '../modal/locale/zh_CN'
+import Pagination from '../pagination/locale/zh_CN'
+import Picker from '../picker/locale/zh_CN'
+import SearchBar from '../search-bar/locale/zh_CN'
+
+export default {
+  locale: 'zh_CN',
+  DatePicker,
+  DatePickerView,
+  InputItem,
+  Modal,
+  Pagination,
+  Picker,
+  SearchBar,
+  ListView,
+  Form,
+}

package/app/components/common/PickerV2Base/picker/Picker.tsx

@@ -0,0 +1,216 @@
+import useMergedState from 'rc-util/lib/hooks/useMergedState'
+import React, {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
+import { Omit } from 'utility-types'
+
+import { Keyboard } from 'react-native'
+import { getComponentLocale } from '../_util/getLocale'
+import DisabledContext from '../config-provider/DisabledContext'
+import { LocaleContext } from '../locale-provider'
+import { PickerColumn, PickerValue } from '../picker-view/PropsType'
+import RMCPickerView from '../picker-view/picker-view'
+import { useTheme } from '../style'
+import PopupPicker from './Popup'
+import { PickerPropsType } from './PropsType'
+import PickerStyles from './style'
+
+export type PickerActions = {
+  open: () => void
+  close: () => void
+  toggle: () => void
+  value?: PickerValue[]
+}
+export type PickerRef = PickerActions
+
+export interface RMCPickerProps
+  extends Omit<PickerPropsType, 'value' | 'data' | 'cols' | 'cascade'> {
+  value?: PickerValue[]
+  innerValue: PickerValue[]
+  columns: PickerColumn[]
+  handleSelect: (value: PickerValue, index: number) => void
+}
+
+const RMCPicker = forwardRef<PickerRef, RMCPickerProps>((props, ref) => {
+  const contextDisabled = useContext(DisabledContext)
+  const {
+    onVisibleChange,
+    visible,
+    children,
+    okText,
+    dismissText,
+    okButtonProps,
+    dismissButtonProps,
+    onChange,
+    onOk,
+    onDismiss,
+    onClose,
+    title,
+    extra,
+    disabled = contextDisabled,
+    format,
+    value,
+    innerValue,
+    columns,
+    handleSelect,
+    ...restProps
+  } = props
+
+  const [innerVisible, setInnerVisible2] = useMergedState<boolean>(false, {
+    value: visible,
+    onChange: (v) => onVisibleChange?.(v),
+  })
+
+  const setInnerVisible = useCallback(
+    (bool) => {
+      !disabled && setInnerVisible2(bool)
+    },
+    [disabled, setInnerVisible2],
+  )
+
+  useEffect(() => {
+    Keyboard.dismiss()
+  }, [innerVisible])
+
+  // ================== Actions Ref ==================
+  const actions = useMemo(
+    () => ({
+      toggle: () => {
+        setInnerVisible(!innerVisible)
+      },
+      open: () => {
+        setInnerVisible(true)
+      },
+      close: () => {
+        setInnerVisible(false)
+        onClose?.()
+      },
+      value: innerValue,
+    }),
+    [innerValue, innerVisible, onClose, setInnerVisible],
+  )
+  useImperativeHandle(ref, () => actions)
+
+  const handleOk = useCallback(() => {
+    const extend = columns.map(
+      (column, index) =>
+        column.find((item) => item.value === innerValue?.[index]) ?? column[0],
+    )
+    const nextValue = extend.map((item) => item.value)
+    onOk?.(nextValue, { items: extend, columns })
+    onChange?.(nextValue, { items: extend, columns })
+    actions.close()
+  }, [actions, columns, onChange, onOk, innerValue])
+
+  const handleDismiss = useCallback(() => {
+    onDismiss?.()
+    actions.close()
+  }, [actions, onDismiss])
+
+  const _locale = getComponentLocale(
+    props,
+    useContext(LocaleContext),
+    'Picker',
+    () => require('./locale/zh_CN'),
+  )
+
+  // ================== Extra Render ==================
+  const [innerExtra, setInnerExtra] = useState(extra || _locale.extra)
+  useEffect(() => {
+    if (!children || innerVisible) {
+      return
+    }
+    if (!value?.length) {
+      return setInnerExtra(extra || _locale.extra)
+    }
+
+    setInnerExtra(
+      format?.(
+        columns.reduce((cur: any[], next, index) => {
+          const labelValue = next.find((item) => item.value === value[index])
+          if (labelValue?.label) {
+            cur.push(labelValue.label)
+          }
+          return cur
+        }, []),
+      ),
+    )
+  }, [value, columns, innerVisible, format, children, extra, _locale.extra])
+
+  const renderChildren = () => {
+    if (!children) {
+      return null
+    }
+    // children as function
+    if (typeof children === 'function') {
+      return children({
+        value,
+        extra: innerExtra || extra || _locale.extra,
+        disabled,
+        toggle: actions.toggle,
+      })
+    }
+    const child = children as React.ReactElement
+    const newChildProps = {
+      value,
+      extra: innerExtra || extra || _locale.extra,
+      disabled,
+    } as any
+    if (!disabled) {
+      newChildProps[props.triggerType!] = (e: any) => {
+        if (child.props[props.triggerType!]) {
+          child.props[props.triggerType!](e)
+        }
+        actions.toggle()
+      }
+    }
+    return React.cloneElement(child as any, newChildProps)
+  }
+
+  const styles = useTheme({
+    styles: props.styles,
+    themeStyles: PickerStyles,
+  })
+
+  return (
+    <>
+      <PopupPicker
+        styles={styles}
+        visible={innerVisible}
+        title={title}
+        okText={okText || _locale.okText}
+        onOk={handleOk}
+        dismissText={dismissText || _locale.dismissText}
+        onDismiss={handleDismiss}
+        onClose={actions.close}
+        okButtonProps={okButtonProps}
+        dismissButtonProps={dismissButtonProps}>
+        {/* TODO: 组件卸载是在visible更新fasle之后,需要前置 */}
+        {/* 否则会无效执行onPickerChange */}
+        {innerVisible && (
+          <RMCPickerView
+            {...restProps}
+            value={innerValue}
+            columns={columns}
+            handleSelect={handleSelect}
+          />
+        )}
+      </PopupPicker>
+      {renderChildren()}
+    </>
+  )
+})
+
+RMCPicker.displayName = 'Picker'
+RMCPicker.defaultProps = {
+  triggerType: 'onPress',
+  format: (labels: string[]) => labels.join(','),
+}
+
+export default RMCPicker

package/app/components/common/PickerV2Base/picker/Popup.tsx

@@ -0,0 +1,77 @@
+import React, { memo } from 'react'
+import { Text, TouchableHighlight, View,Modal,TouchableOpacity } from 'react-native'
+// import Modal from '../modal/ModalView'
+import { PopupPickerProps } from './PopupPickerTypes'
+
+const PopupPicker = memo((props: PopupPickerProps) => {
+  const {
+    styles,
+    title,
+    okText = 'Ok',
+    dismissText = 'Dismiss',
+    visible,
+    onDismiss,
+    onOk,
+    onClose,
+    children,
+  } = props
+
+  const titleEl =
+    typeof title === 'string' ? (
+      <Text style={[styles.title]}>{title}</Text>
+    ) : (
+      title
+    )
+  const okEl =
+    typeof okText === 'string' ? (
+      <View  style={styles.okView}>
+      <Text style={[styles.actionText, styles.okText]}>{okText}</Text>
+      </View>
+    ) : (
+      okText
+    )
+  const dismissEl =
+    typeof dismissText === 'string' ? (
+      <View style={styles.dismissView}>
+      <Text style={[styles.actionText, styles.dismissText]}>{dismissText}</Text>
+      </View>
+    ) : (
+      dismissText
+    )
+
+  return (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={visible}
+      onRequestClose={onClose}>
+        <TouchableOpacity 
+        style={[{position:'absolute',top:0,left:0,right:0,bottom:0,zIndex:999},styles.maskColor]}
+        onPress={onClose}
+        ></TouchableOpacity>
+        <View style={{position:'absolute',left:0,right:0,bottom:0,zIndex:1000}}>
+        {children}
+      <View style={[styles.header]}>
+        <TouchableHighlight
+          onPress={onDismiss}
+          style={[styles.headerItem]}
+          activeOpacity={1}
+          underlayColor="#ddd"
+          {...props.dismissButtonProps}>
+          {dismissEl}
+        </TouchableHighlight>
+        <View style={[styles.headerItem]}>{titleEl}</View>
+        <TouchableHighlight
+          onPress={onOk}
+          style={[styles.headerItem]}
+          activeOpacity={1}
+          underlayColor="#ddd"
+          {...props.okButtonProps}>
+          {okEl}
+        </TouchableHighlight>
+      </View>
+        </View>
+    </Modal>
+  )
+})
+export default PopupPicker

package/app/components/common/PickerV2Base/picker/PopupPickerTypes.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+import { TouchableHighlightProps } from 'react-native'
+
+export type PopupPickerProps = {
+  onOk?: () => void
+  onDismiss?: () => void
+  onClose?: () => void
+  title?: ReactNode
+  visible?: boolean
+  okText?: ReactNode
+  dismissText?: ReactNode
+  okButtonProps?: TouchableHighlightProps
+  dismissButtonProps?: TouchableHighlightProps
+  children?: ReactNode
+  styles: any
+}

package/app/components/common/PickerV2Base/picker/PropsType.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import { Omit } from 'utility-types'
+import {
+  PickerValue,
+  PickerValueExtend,
+  PickerViewPropsType,
+} from '../picker-view/PropsType'
+import { PickerViewStyle } from '../picker-view/style'
+import { WithThemeStyles } from '../style'
+import { PopupPickerProps } from './PopupPickerTypes'
+import { PickerStyle } from './style'
+
+export interface PickerPropsType
+  extends PickerViewPropsType,
+    WithThemeStyles<PickerViewStyle & PickerStyle>,
+    Omit<PopupPickerProps, 'onOk' | 'styles'> {
+  onOk?: (value: PickerValue[], extend: PickerValueExtend) => void
+  onPickerChange?: (value: PickerValue[], index: number) => void
+  onVisibleChange?: (visible: boolean) => void
+  format?: (labels: string[]) => string
+  extra?: string
+  triggerType?: string
+  disabled?: boolean
+  children?: ReactNode
+  locale?: { okText?: string; dismissText?: string; extra?: string }
+}

package/app/components/common/PickerV2Base/picker/index.en-US.md

@@ -0,0 +1,98 @@
+---
+category: Components
+type: Data Entry
+title: Picker
+---
+
+Choose from a set of data, e.g. Country choice.
+
+### Rules
+- Try to use Picker to help users complete the input, to avoid the user through the keyboard directly input.
+- DatePicker is Picker's specific pattern.
+
+## API
+
+### Props
+
+```ts
+type PickerColumnItem = {
+  label: string | ReactNode
+  value: string | number
+  key?: string | number
+  children?: PickerColumnItem[]
+}
+
+type PickerColumn = PickerColumnItem[]
+
+type PickerValue = string | number
+
+type PickerValueExtend = {
+  columns: PickerColumn[]
+  items: (PickerColumnItem | undefined)[]
+}
+```
+
+Properties | Descrition | Type | Default | Version
+-----------|------------|------|--------|--------
+| data     | data source     | `PickerColumn` / `PickerColumn[]` | -   |  |
+| value    | Selected options  | `PickerValue[]`  | -   |  |
+| defaultValue  | Default selected options  | `PickerValue[]`  | -   |  |
+| cascade  | whether cascade <br/>child cascade get from `data[].children`   | Boolean | `true` |  |
+| cols     | col numbers    | Number | `3` |  |
+| onChange | selected callback function, can use [rc-form](https://github.com/react-component/form) | `(value: PickerValue[], extend: PickerValueExtend) => void`      | -   |  |
+| onPickerChange | trigger on each column of selected data is changed   | `(value: PickerValue[], index: number) => void` | - |  |
+| onVisibleChange  | visible state change callback    | `(visible: bool): void` |  -   |  |
+| renderLabel | 	The function to custom rendering the label shown on a column  |   `(item: PickerColumnItem, index: number) => ReactNode`   | `(item) => item.label`  |  |
+| locale | international, can override the configuration of the global [LocaleProvider](/components/locale-provider) | Object: Object: {okText, dismissText, extra} | - |  |
+| title  | title | ReactNode | - |  |
+| okText | ok text | String |  `确定`  |  |
+| dismissText  | dismiss text | String |  `取消`  |  |
+| onOk   | handler called when click ok  | `(value: PickerValue[], extend: PickerValueExtend) => void`  |  - |  |
+| onDismiss  | handler called when click cancel | (): void  |  -  |  |
+| okButtonProps  | The ok button props | [TouchableHighlightProps](https://reactnative.dev/docs/touchablehighlight)  |  `{ activeOpacity:1, underlayColor:'#ddd' }`  | `5.1.3` |
+| dismissButtonProps  | The dismiss button props | [TouchableHighlightProps](https://reactnative.dev/docs/touchablehighlight)  |  `{ activeOpacity:1, underlayColor:'#ddd' }`  | `5.1.3` |
+| visible  | Whether to show or hide the Picker  | Boolean | -  |  |
+| loading  | Should the Picker displays as loading state	  | Boolean | -  |  |
+| loadingContent  | The loading content displayed in loading state	  | ReactNode | -  |  |
+| indicatorStyle  | style of default Indicator  | Object | -  |  |
+
+### Custom Style
+
+Properties | Descrition | Type | Default
+-----------|------------|------|--------
+| style    | style   | `StyleProp<ViewStyle>` | -   |
+| styles   | inner component styles  | same as [PickerViewStyle](/components//picker-view/#pickerviewstyle-interface) | -   |
+| itemStyle| style to apply to each of the item labels   | `StyleProp<TextStyle>` | -   |
+| itemHeight | Height of option item, calculated by `numberOfLines` when without value; `itemStyle` was not allowed to set `{height}`  |   Number   | -  |
+| numberOfLines | Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number  |   Number   | `1`  |
+
+#### Mask View
+
+Support custom mask style, such as using the gradient component `<LinearGradient />`. Default is white translucency.
+
+Properties | Descrition | Type | Default
+-----------|------------|------|--------
+| renderMaskTop | The function to custom rendering the mask top half view | `()=> ReactNode` | `<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />` |
+| renderMaskBottom | The function to custom rendering the mask bottom half view | `()=> ReactNode` | `<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />` |
+
+
+### Custom Children
+Picker's children is best to [List.Item](/components/list/#List.Item), if not, need to be a custom component (the `onPress`/`extra` props need to be handled in the component):
+
+Properties | Descrition | Type | Default | Version |
+-----------|------------|------|--------|--------
+| children| usually `List.Item` | `ReactNode`/`({extra, value, toggle})=>ReactNode` | -  | `5.2.0` add function as Children |
+| extra   | Picker's children `extra` prop, display when no `value` | String |  `please select`  |  |
+| format  | a function that formats the selected value	  | (labels: string[]): any | `(labels) => { return labels.join(','); } ` |  |
+| triggerType  | Press event name | String | `onPress` |  |
+| disabled  | set disabled	 | Boolean | `false` |  |
+
+### PickerActions
+Properties | Descrition | Type
+-----------|------------|-----
+| close    | Close Picker | `() => void` |
+| open     | Open Picker  | `() => void` |
+| toggle   | Toggle the visible state of Picker | `() => void` |
+
+### Ref
+Same as PickerActions