ipanel-rnapp-ajb-base 1.0.14 → 1.0.16

package/app/App.js

@@ -19,6 +19,7 @@ import DeviceInfo from 'react-native-device-info';
 import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
 import VersionUpdateConfirm from './components/VersionUpdateConfirm';
 // import NetInfo from '@react-native-community/netinfo';
+import { Provider } from '@ant-design/react-native';
 
 // 重要：base.js需放在一切自定义代码之前初始化
 import './base.js';
@@ -34,6 +35,7 @@ import Loading from './components/common/Loading';
 import Toast from './components/common/Toast';
 import Dialog from './components/common/Dialog';
 import Notify from './components/common/Notify';
+import SheetManage from './components/common/SheetManage';
 import storage from './storage';
 
 import {navigationRef} from './utils/RootNavigation';
@@ -396,6 +398,7 @@ const App = () => {
   const renderContent = () => {
     return (
       <>
+      <Provider>
         <SheetProvider>
           <NavigationContainer
             ref={navigationRef}
@@ -437,6 +440,7 @@ const App = () => {
         <Toast onRef={ref => (global.toast = ref)} />
         <Notify onRef={ref => (global.notify = ref)} />
         <Dialog onRef={ref => (global.dialog = ref)} />
+          <SheetManage onRef={ref => (global.sheetManager = ref)} />
         {versionUpdateConfirmVisible && (
           <VersionUpdateConfirm
             onVisibleChange={setVersionUpdateConfirmVisible}
@@ -449,6 +453,7 @@ const App = () => {
             <View style={styles.touchableContainer} />
           </TouchableWithoutFeedback>
         )}
+        </Provider>
       </>
     );
   };

package/app/components/common/PickerV1/index.js

@@ -0,0 +1,93 @@
+import React,{useState} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {Picker} from '@ant-design/react-native';
+import px from '../../../utils/scaleSize';
+const pickerStyles = {
+okText: {color: '#E86003',borderLeftColor:'#F0F0F0',borderLeftWidth:1,width:px(500)}, 
+dismissText: {color: '#666',width:px(500),},
+container:{borderTopLeftRadius:px(20),borderTopRightRadius:px(20)},
+wrappper:{borderTopLeftRadius:px(20),borderTopRightRadius:px(20)},
+headerItem:{flex:0},
+header:{
+  borderBottomWidth:px(0),
+  borderTopWidth:1,
+  borderTopColor:'#F0F0F0'
+},
+maskMiddle:{borderColor:'transparent'},
+}
+const pickerStyle = {height:px(700)}
+
+const PickerV1 = ({
+  renderMaskTop=()=>{return <View></View>},
+  renderMaskBottom=()=>{return <View></View>},
+  styles={},
+  style={},
+  itemHeight=px(140),
+  visible=false,
+  pickerData = [],
+  dealPickerCommit=()=>{},
+  dealPickerCancel = () => {},
+  renderItem,
+  defaultValue = [],
+  pickedIndex=0,
+  changePickedIndex=()=>{}
+}) => {
+const handlePickerChange=(item)=>{
+  // console.log(item)
+    const index = pickerData.findIndex(item_=>{
+       return item[0] === item_.value
+    })
+    // console.log(index)
+    changePickedIndex(index)
+}
+const handlePikerCommit = (item) => {
+  dealPickerCommit(item)
+} 
+const handlePickerCancel = () => {
+  dealPickerCancel()
+}
+const renderLabel = (item, index) => {
+  return (
+    <Text
+      key={index}
+      style={[styless.pickerItemCom,
+          index===pickedIndex?styless.pickedPicker:
+          {fontSize: px(50),color:Math.abs(index-pickedIndex)===1?'#999':'#eee'},
+      ]}
+      >
+      {item.value}
+    </Text>
+  );
+};
+return (
+  <View>
+    <Picker
+      data={pickerData}
+      visible={visible}
+      renderMaskTop={renderMaskTop}
+      renderMaskBottom={renderMaskBottom}
+      styles={{...pickerStyles,...styles}}
+      renderLabel={renderItem||renderLabel}
+      style={{...pickerStyle,...style}}
+      itemHeight={itemHeight}
+      defaultValue = {defaultValue}
+      onPickerChange={handlePickerChange}
+      onOk={handlePikerCommit}
+      onDismiss={handlePickerCancel}
+      onClose={handlePickerCancel}
+      >
+      </Picker>
+  </View>
+);
+};
+const styless = StyleSheet.create({
+pickerItemCom:{ 
+  textAlign:'center',
+},
+pickedPicker:{
+  color: '#333', 
+  fontSize:px(72),
+  fontWeight:'bold'
+},
+});
+export default PickerV1;

package/app/components/common/PickerV2/index.js

@@ -0,0 +1,137 @@
+import React,{useEffect, useState} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import Picker from '../PickerV2Base/picker';
+import px from '../../../utils/scaleSize';
+import {
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+const pickerStyles = {
+okView:{borderLeftColor:'#F0F0F0',borderLeftWidth:1},
+okText: {color: '#E86003',width:px(500)}, 
+dismissText: {color: '#666',width:px(500),},
+container:{borderTopLeftRadius:px(20),borderTopRightRadius:px(20)},
+wrappper:{borderTopLeftRadius:px(20),borderTopRightRadius:px(20)},
+headerItem:{flex:0},
+header:{
+  borderBottomWidth:px(0),
+  borderTopWidth:1,
+  borderTopColor:'#F0F0F0',
+  backgroundColor: '#fff' 
+},
+maskMiddle:{borderColor:'transparent'},
+ titleBox:{
+  width:'100%',
+  height:px(205),
+  backgroundColor:'#fff',
+  top:px(15)
+ },
+ titleContent:{
+  width:'100%',height:px(190),borderBottomColor:'#f0f0f0',borderBottomWidth:1,
+  borderTopRightRadius:px(20),borderTopLeftRadius:px(20)
+ },
+ titleText:{
+  fontSize:px(48),color:'#333',textAlign:'center',lineHeight:px(190)
+ }
+}
+const pickerStyle = {height:px(700)}
+
+
+const PickerV2 = ({
+    renderMaskTop=()=>{return <View></View>},
+    renderMaskBottom=()=>{return <View></View>},
+    styles={},
+    style={},
+    itemHeight=px(140),
+    visible=false,
+    pickerData = [],
+    dealPickerCommit=()=>{},
+    dealPickerCancel = () => {},
+    renderItem,
+    defaultValue = [],
+    pickedIndex=0,
+    changePickedIndex=()=>{},
+    animatedStartValue,
+    animationEffects = {},
+    title
+}) => {
+
+  // console.log(title)
+  const customSpringStyles = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: withSpring(animatedStartValue, {...{
+            damping: 20,
+            stiffness: 100,
+            mass:0.5
+          },...animationEffects}),
+        },
+      ],
+    };
+  });
+
+  // console.log(defaultValue)
+  const handlePickerChange=(item)=>{
+    // console.log(item)
+      const index = pickerData.findIndex(item_=>{
+         return item[0] === item_.value
+      })
+      // console.log(index)
+      changePickedIndex(index)
+  }
+  const handlePikerCommit = (item) => {
+    // console.log(item)
+    dealPickerCommit(item)
+  } 
+  const handlePickerCancel = () => {
+    dealPickerCancel()
+  }
+  const renderLabel = (item, index) => {
+    // console.log(item)
+    return (
+      <Text
+        key={index}
+        style={[styless.pickerItemCom,
+            index===pickedIndex?styless.pickedPicker:
+            {fontSize: px(50),color:Math.abs(index-pickedIndex)===1?'#999':'#eee'},
+        ]}
+        >
+        {item.label}
+      </Text>
+    );
+  };
+  return (
+    <View>
+      <Picker
+        data={pickerData}
+        visible={visible}
+        title={title}
+        renderMaskTop={renderMaskTop}
+        renderMaskBottom={renderMaskBottom}
+        styles={{...pickerStyles,...styles}}
+        renderLabel={renderItem||renderLabel}
+        style={{...pickerStyle,...style}}
+        itemHeight={itemHeight}
+        defaultValue = {defaultValue}
+        onPickerChange={handlePickerChange}
+        onOk={handlePikerCommit}
+        onDismiss={handlePickerCancel}
+        onClose={handlePickerCancel}
+        customSpringStyles={typeof animatedStartValue !== 'undefined'?customSpringStyles:{}}
+        >
+        </Picker>
+    </View>
+  );
+};
+const styless = StyleSheet.create({
+  pickerItemCom:{ 
+    textAlign:'center',
+  },
+  pickedPicker:{
+    color: '#333', 
+    fontSize:px(72),
+    fontWeight:'bold'
+  },
+});
+export default PickerV2;

package/app/components/common/PickerV2Base/_util/devWarning.tsx

@@ -0,0 +1,5 @@
+export default (valid: boolean, component: string, message: string): void => {
+  if (__DEV__ && !valid) {
+    console.warn(`Warning: [antd_mobile_rn: ${component}] ${message}`)
+  }
+}

package/app/components/common/PickerV2Base/_util/getLocale.tsx

@@ -0,0 +1,42 @@
+export function getComponentLocale(
+  props: any,
+  context: any,
+  componentName: string,
+  getDefaultLocale: () => any,
+) {
+  let locale: any = {}
+  if (context && context.antLocale && context.antLocale[componentName]) {
+    locale = context.antLocale[componentName]
+  } else {
+    const defaultLocale = getDefaultLocale()
+    // TODO: make default lang of antd be English
+    // https://github.com/ant-design/ant-design/issues/6334
+    locale = defaultLocale.default || defaultLocale
+  }
+
+  let result = {
+    ...locale,
+  }
+  if (props.locale) {
+    result = {
+      ...result,
+      ...props.locale,
+    }
+    if (props.locale.lang) {
+      result.lang = {
+        ...locale.lang,
+        ...props.locale.lang,
+      }
+    }
+  }
+  return result
+}
+
+export function getLocaleCode(context: any) {
+  const localeCode = context.antLocale && context.antLocale.locale
+  // Had use LocaleProvide but didn't set locale
+  if (context.antLocale && context.antLocale.exist && !localeCode) {
+    return 'zh-cn'
+  }
+  return localeCode
+}

package/app/components/common/PickerV2Base/_util/hooks/useAnimations.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Animated, EasingFunction } from 'react-native'
+
+type animateType = (_TimingAnimationConfig: {
+  toValue?:
+    | number
+    | Animated.AnimatedValue
+    | { x: number; y: number }
+    | Animated.AnimatedValueXY
+    | Animated.AnimatedInterpolation
+  easing?: EasingFunction
+  duration?: number
+  delay?: number
+  useNativeDriver?: boolean
+}) => void
+
+interface ConfigureInterface {
+  initialValue: number
+  animate: animateType
+}
+
+// Animated.Value hook
+export function useAnimate(configure: ConfigureInterface) {
+  const useAnimatedValue = (initialValue: number) => {
+    const ref = React.useRef(new Animated.Value(initialValue))
+    return ref.current
+  }
+
+  const animatedValue = useAnimatedValue(configure.initialValue)
+
+  return [animatedValue]
+}
+
+// Animated.timing hook
+export function useAnimatedTiming(): [Animated.Value, animateType] {
+  const animatedRef = React.useRef<Animated.CompositeAnimation | void>()
+
+  const animatedFunc = React.useCallback(
+    ({ toValue = 1, duration = 200, easing, useNativeDriver = false }) => {
+      animatedRef.current?.stop()
+      animatedRef.current = Animated.timing(animatedValue, {
+        toValue,
+        duration,
+        easing,
+        useNativeDriver,
+      }).start()
+    },
+    // @ts-ignore
+    [animatedValue],
+  )
+  var [animatedValue] = useAnimate({
+    initialValue: 0,
+    animate: animatedFunc,
+  })
+
+  return [animatedValue, animatedFunc]
+}

package/app/components/common/PickerV2Base/_util/hooks/useClickAway.ts

@@ -0,0 +1,30 @@
+import { useEffect, useMemo, useRef } from 'react'
+import {
+  DeviceEventEmitter,
+  EmitterSubscription,
+  GestureResponderEvent,
+  NativeEventEmitter,
+} from 'react-native'
+
+export const USE_CLICK_AWAY_EVENT_NAME = 'ANT_DESIGN_MOBILE_RN_USE_CLICK_AWAY'
+
+export default function useClickAway(
+  onClickAway: (event: GestureResponderEvent) => void,
+) {
+  const TopViewEventEmitter = useMemo(
+    () => DeviceEventEmitter || new NativeEventEmitter(),
+    [],
+  )
+
+  const onClickAwayRef = useRef<EmitterSubscription>()
+
+  useEffect(() => {
+    onClickAwayRef.current = TopViewEventEmitter.addListener(
+      USE_CLICK_AWAY_EVENT_NAME,
+      onClickAway,
+    )
+    return () => {
+      onClickAwayRef.current?.remove?.()
+    }
+  }, [TopViewEventEmitter, onClickAway])
+}

package/app/components/common/PickerV2Base/_util/isPromise.ts

@@ -0,0 +1,5 @@
+export function isPromise(obj: unknown): obj is Promise<unknown> {
+  return (
+    !!obj && typeof obj === 'object' && typeof (obj as any).then === 'function'
+  )
+}

package/app/components/common/PickerV2Base/_util/reactNode.ts

@@ -0,0 +1,27 @@
+import React from 'react'
+
+type AnyObject = Record<PropertyKey, any>
+
+export function isFragment(child: any): boolean {
+  return child && React.isValidElement(child) && child.type === React.Fragment
+}
+
+type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void)
+
+export const replaceElement = <P>(
+  element: React.ReactNode,
+  replacement: React.ReactNode,
+  props?: RenderProps,
+) => {
+  if (!React.isValidElement<P>(element)) {
+    return replacement
+  }
+  return React.cloneElement<P>(
+    element,
+    typeof props === 'function' ? props(element.props || {}) : props,
+  )
+}
+
+export function cloneElement<P>(element: React.ReactNode, props?: RenderProps) {
+  return replaceElement<P>(element, element, props) as React.ReactElement
+}

package/app/components/common/PickerV2Base/_util/version.json

@@ -0,0 +1 @@
+{}

package/app/components/common/PickerV2Base/_util/with-default-props.tsx

@@ -0,0 +1,15 @@
+const assignWith = require('lodash.assignwith')
+
+export function mergeProps<A, B>(a: A, b: B): B & A
+export function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A
+export function mergeProps(...items: any[]) {
+  function customizer(objValue: any, srcValue: any) {
+    return srcValue === undefined ? objValue : srcValue
+  }
+
+  let ret = { ...items[0] }
+  for (let i = 1; i < items.length; i++) {
+    ret = assignWith(ret, items[i], customizer)
+  }
+  return ret
+}

package/app/components/common/PickerV2Base/config-provider/DisabledContext.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export type DisabledType = boolean | undefined
+
+const DisabledContext = React.createContext<DisabledType>(false)
+
+export interface DisabledContextProps {
+  disabled?: DisabledType
+  children?: React.ReactNode
+}
+
+export const DisabledContextProvider: React.FC<DisabledContextProps> = ({
+  children,
+  disabled,
+}) => {
+  const originDisabled = React.useContext(DisabledContext)
+  return (
+    <DisabledContext.Provider value={disabled ?? originDisabled}>
+      {children}
+    </DisabledContext.Provider>
+  )
+}
+
+export default DisabledContext

package/app/components/common/PickerV2Base/config-provider/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface ConfigConsumerProps {}
+
+export const ConfigContext = React.createContext<ConfigConsumerProps>({})
+
+export const { Consumer: ConfigConsumer } = ConfigContext

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+---
+category: Components
+title: Provider
+type: Other
+---
+
+`Provider` provides a uniform localization support for built-in text of components.
+
+## Usage
+
+`Provider` takes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
+
+
+```jsx
+import enUS from '@ant-design/react-native/lib/locale-provider/en_US';
+
+...
+
+return <Provider locale={enUS}><App /></Provider>;
+```
+
+We support English and Chinese temporarily, all locale packages can be found in [here](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/locale-provider/).
+
+### Add a new language
+
+If you can't find your language, you are welcome to create a locale package based on [en_US]((https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/locale-provider/en_US.tsx)) and send us a pull request.
+
+### Other localization needs
+
+This component aims for localization of the built-in text, if you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
+
+## API
+
+| Property | Description                                                                                                                     | Type   | Default |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------ | ------- |
+| locale   | anguage package setting, you can find the packages in this path: `@ant-design/react-native/lib/locale-provider/`                | object | -       |
+| theme    | Theme customization [theme](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/style/themes/default.tsx) | object | -       |