@fto-consult/expo-ui 1.0.4

package/src/components/Surface/Elevations.js

@@ -0,0 +1,218 @@
+/***@see : https://github.com/Naeemur/react-native-elevation */
+import { Platform } from "react-native"
+
+ const webDepth = {
+     umbra: [
+         "0px 0px 0px 0px",
+         "0px 2px 1px -1px",
+         "0px 3px 1px -2px",
+         "0px 3px 3px -2px",
+         "0px 2px 4px -1px",
+         "0px 3px 5px -1px",
+         "0px 3px 5px -1px",
+         "0px 4px 5px -2px",
+         "0px 5px 5px -3px",
+         "0px 5px 6px -3px",
+         "0px 6px 6px -3px",
+         "0px 6px 7px -4px",
+         "0px 7px 8px -4px",
+         "0px 7px 8px -4px",
+         "0px 7px 9px -4px",
+         "0px 8px 9px -5px",
+         "0px 8px 10px -5px",
+         "0px 8px 11px -5px",
+         "0px 9px 11px -5px",
+         "0px 9px 12px -6px",
+         "0px 10px 13px -6px",
+         "0px 10px 13px -6px",
+         "0px 10px 14px -6px",
+         "0px 11px 14px -7px",
+         "0px 11px 15px -7px"
+     ],
+     penumbra: [
+         "0px 0px 0px 0px",
+         "0px 1px 1px 0px",
+         "0px 2px 2px 0px",
+         "0px 3px 4px 0px",
+         "0px 4px 5px 0px",
+         "0px 5px 8px 0px",
+         "0px 6px 10px 0px",
+         "0px 7px 10px 1px",
+         "0px 8px 10px 1px",
+         "0px 9px 12px 1px",
+         "0px 10px 14px 1px",
+         "0px 11px 15px 1px",
+         "0px 12px 17px 2px",
+         "0px 13px 19px 2px",
+         "0px 14px 21px 2px",
+         "0px 15px 22px 2px",
+         "0px 16px 24px 2px",
+         "0px 17px 26px 2px",
+         "0px 18px 28px 2px",
+         "0px 19px 29px 2px",
+         "0px 20px 31px 3px",
+         "0px 21px 33px 3px",
+         "0px 22px 35px 3px",
+         "0px 23px 36px 3px",
+         "0px 24px 38px 3px"
+     ],
+     ambient: [
+         "0px 0px 0px 0px",
+         "0px 1px 3px 0px",
+         "0px 1px 5px 0px",
+         "0px 1px 8px 0px",
+         "0px 1px 10px 0px",
+         "0px 1px 14px 0px",
+         "0px 1px 18px 0px",
+         "0px 2px 16px 1px",
+         "0px 3px 14px 2px",
+         "0px 3px 16px 2px",
+         "0px 4px 18px 3px",
+         "0px 4px 20px 3px",
+         "0px 5px 22px 4px",
+         "0px 5px 24px 4px",
+         "0px 5px 26px 4px",
+         "0px 6px 28px 5px",
+         "0px 6px 30px 5px",
+         "0px 6px 32px 5px",
+         "0px 7px 34px 6px",
+         "0px 7px 36px 6px",
+         "0px 8px 38px 7px",
+         "0px 8px 40px 7px",
+         "0px 8px 42px 7px",
+         "0px 9px 44px 8px",
+         "0px 9px 46px 8px"
+     ]
+ }
+ 
+ const webColor = {
+     umbra: "rgba(0,0,0,0.2)",
+     penumbra: "rgba(0,0,0,0.14)",
+     ambient: "rgba(0,0,0,0.12)"
+ }
+ 
+ const derive = (i, a, b, a2, b2) => {
+     return ((i - a) * (b2 - a2)) / (b - a) + a2
+ }
+ 
+ const parseShadow = (raw) => {
+     const values = raw.split(" ").map(val => +val.replace("px", ""))
+     return {
+         x: values[0],
+         y: values[1],
+         blur: values[2],
+         spread: values[3]
+     }
+ }
+ 
+ const maxElevation = 24
+ 
+ const generateElevationStyle = (depth=0) => {
+     let style = {}
+     if (Platform.OS === "android") {
+         style = {
+             elevation: depth
+         }
+     } else if (Platform.OS === "ios") {
+         const s = parseShadow(webDepth.penumbra[depth])
+         const y = s.y === 1 ? 1 : Math.floor(s.y * 0.5)
+         style = {
+             shadowColor: "#000",
+             shadowOffset: {
+                 width: 0,
+                 height: y
+             },
+             shadowOpacity: depth <= 0 ? 0 : Number(derive(depth - 1, 1, 24, 0.2, 0.6).toFixed(2)),
+             shadowRadius: Number(derive(s.blur, 1, 38, 1, 16).toFixed(2))
+         }
+     } else if (Platform.OS === "web") {
+         style = {
+             elevation: depth,
+             zIndex: depth,
+             boxShadow: `
+                 ${webDepth.umbra[depth]} ${webColor.umbra},
+                 ${webDepth.penumbra[depth]} ${webColor.penumbra},
+                 ${webDepth.ambient[Math.max(0,depth-1)]} ${webColor.ambient}
+             `
+         }
+     }
+     return style
+ }
+ 
+ const elevations = new Array(maxElevation+1)
+     .fill(undefined)
+     .map((x, index) => generateElevationStyle(index))
+ 
+ elevations.interpolate = (anim, {inputRange,outputRange,...opts}) => {
+     let style = {}
+     // let style = {
+     // 	backgroundColor:'#f00',
+     // 	opacity:"var(--elev)",
+     // 	"--elev":anim.interpolate({inputRange,outputRange:outputRange.map(v=>(v/24)+''),...opts}),
+     // }
+     // return {elevation:anim.interpolate({inputRange,outputRange,...opts})}
+     // return {elevation:24}
+     if (Platform.OS === "android") {
+         style = {
+             elevation: anim.interpolate({inputRange,outputRange,...opts})
+         }
+     } else if (Platform.OS === "ios") {
+         const output = { height:[], shadowOpacity:[], shadowRadius:[] }
+         outputRange.forEach(depth => {
+             const s = parseShadow(webDepth.penumbra[depth])
+             const y = s.y === 1 ? 1 : Math.floor(s.y * 0.5)
+             output.height.push(y)
+             output.shadowOpacity.push(depth <= 0 ? 0 : Number(derive(depth - 1, 1, 24, 0.2, 0.6).toFixed(2)))
+             output.shadowRadius.push(Number(derive(s.blur, 1, 38, 1, 16).toFixed(2)))
+         })
+         style = {
+             shadowColor: "#000",
+             shadowOffset: {
+                 width: 0,
+                 height: anim.interpolate({inputRange,outputRange:output.height,...opts})
+             },
+             shadowOpacity: anim.interpolate({inputRange,outputRange:output.shadowOpacity,...opts}),
+             shadowRadius: anim.interpolate({inputRange,outputRange:output.shadowRadius,...opts})
+         }
+     } else if (Platform.OS === "web") {
+         const output = { elevation:[], zi:[], u1:[], u2:[], u3:[], p1:[], p2:[], p3:[], a1:[], a2:[], a3:[] }
+         outputRange.forEach(depth => {
+             output.elevation.push(depth)
+             output.zi.push(depth+'')
+             let u = webDepth.umbra[depth].split(' ')
+             let p = webDepth.penumbra[depth].split(' ')
+             let a = webDepth.ambient[Math.max(0,depth-1)].split(' ')
+             output.u1.push(u[1])
+             output.u2.push(u[2])
+             output.u3.push(u[3])
+             output.p1.push(p[1])
+             output.p2.push(p[2])
+             output.p3.push(p[3])
+             output.a1.push(a[1])
+             output.a2.push(a[2])
+             output.a3.push(a[3])
+         })
+         style = {
+             elevation: anim.interpolate({inputRange,outputRange:output.elevation,...opts}),
+             zIndex: anim.interpolate({inputRange,outputRange:output.zi,...opts}),
+             "--u1": anim.interpolate({inputRange,outputRange:output.u1,...opts}),
+             "--u2": anim.interpolate({inputRange,outputRange:output.u2,...opts}),
+             "--u3": anim.interpolate({inputRange,outputRange:output.u3,...opts}),
+             "--p1": anim.interpolate({inputRange,outputRange:output.p1,...opts}),
+             "--p2": anim.interpolate({inputRange,outputRange:output.p2,...opts}),
+             "--p3": anim.interpolate({inputRange,outputRange:output.p3,...opts}),
+             "--a1": anim.interpolate({inputRange,outputRange:output.a1,...opts}),
+             "--a2": anim.interpolate({inputRange,outputRange:output.a2,...opts}),
+             "--a3": anim.interpolate({inputRange,outputRange:output.a3,...opts}),
+             // "--zi": anim.interpolate({inputRange,outputRange:output.zi,...opts}),
+             // zIndex: `calc(var(--zi))`,
+             boxShadow: `
+                 0px var(--u1) var(--u2) var(--u3) ${webColor.umbra},
+                 0px var(--p1) var(--p2) var(--p3) ${webColor.penumbra},
+                 0px var(--a1) var(--a2) var(--a3) ${webColor.ambient}
+             `
+         }
+     }
+     return style
+ }
+ export default elevations;

package/src/components/Surface/index.js

@@ -0,0 +1,22 @@
+import Elevations from './Elevations'
+import React from "$react";
+import theme from "$theme";
+import View from "$ecomponents/View";
+import PropTypes from "prop-types";
+
+const SurfaceComponent = React.forwardRef((props,ref)=>{
+    const {style,elevation,...rest} = props;
+    return <View testID={'RN_SurfaceComponent'} {...rest} ref={ref} style={[{backgroundColor:theme.colors.surface},style,elevation && typeof elevation =='number' && Elevations[elevation] ? Elevations[elevation]: null]}/>
+}); 
+
+SurfaceComponent.displayName = "SurfaceComponent";
+
+export default theme.withStyles(SurfaceComponent,{
+    mode : 'contained',
+})
+
+SurfaceComponent.propTypes = {
+    elevation : PropTypes.number, //number beetween 0 to 24.
+}
+
+export {Elevations,Elevations as elevations};

package/src/components/Swipeable/Swipe.js

@@ -0,0 +1,225 @@
+import React from '$react';
+import {
+  PanResponder,
+  Animated,
+  Dimensions,
+  Button,
+  View,
+  StyleSheet,
+} from 'react-native';
+import PropTypes from "prop-types";
+import {StyleProp} from "$theme";
+import {defaultStr,defaultObj} from "$utils";
+
+/** We offer a special kind of ListItem which is swipeable from both ends and allows users select an event. */
+export const SwipeableComponent = React.forwardRef(({
+  children,
+  leftProps,
+  rightProps,
+  left,
+  right,
+  onSwipeBegin,
+  onSwipeEnd,
+  animation = { type: 'spring', duration: 200 },
+  testID,
+  contentProps,
+  containerProps,
+  leftWidth,
+  rightWidth,
+  ...rest
+},ref) => {
+  testID = defaultStr(testID,"RN_SwipeableComponent");
+  containerProps = defaultObj(contentProps);
+  contentProps = defaultObj(contentProps);
+  leftProps = defaultObj(leftProps);
+  rightProps = defaultObj(rightProps);
+
+  const screenWidth = Dimensions.get("window").width;
+  const rightStyle = Object.assign({},StyleSheet.flatten(rightProps.style));
+  rightStyle.width = rightWidth || rightStyle.width || screenWidth/3;
+  const leftStyle = Object.assign({},leftProps.style);
+  leftStyle.width = leftWidth || leftStyle.width || screenWidth/3;
+  const translateX = React.useRef(new Animated.Value(0));
+  const panX = React.useRef(0);
+
+  const slideAnimation = React.useCallback(
+    (toValue) => {
+      panX.current = toValue;
+      Animated[animation.type || 'spring'](translateX.current, {
+        toValue,
+        useNativeDriver: true,
+        duration: animation.duration || 200,
+      }).start();
+    },
+    [animation.duration, animation.type]
+  );
+
+  const resetCallBack = React.useCallback(() => {
+    slideAnimation(0);
+  }, [slideAnimation]);
+
+  const onMove = React.useCallback(
+    (_, { dx }) => {
+      translateX.current.setValue(panX.current + dx);
+    },
+    []
+  );
+
+  const onRelease = React.useCallback(
+    (_, { dx }) => {
+      if (Math.abs(panX.current + dx) >= ScreenWidth / 3) {
+        slideAnimation(panX.current + dx > 0 ? leftStyle.width : -rightStyle.width);
+      } else {
+        slideAnimation(0);
+      }
+    },
+    [leftStyle.width, rightStyle.width, slideAnimation]
+  );
+
+  const shouldSlide = React.useCallback(
+    (_, { dx, dy, vx, vy }) => {
+      if (dx > 0 && !left && !panX.current) {
+        return false;
+      }
+      if (dx < 0 && !right && !panX.current) {
+        return false;
+      }
+      return (
+        Math.abs(dx) > Math.abs(dy) * 2 && Math.abs(vx) > Math.abs(vy) * 2.5
+      );
+    },
+    [left, right]
+  );
+
+  const _panResponder = React.useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: shouldSlide,
+        onPanResponderGrant: (_event, { vx }) => {
+          onSwipeBegin?.(vx > 0 ? 'left' : 'right');
+        },
+        onPanResponderMove: onMove,
+        onPanResponderRelease: onRelease,
+        onPanResponderReject: onRelease,
+        onPanResponderTerminate: onRelease,
+        onPanResponderEnd: () => {
+          onSwipeEnd?.();
+        },
+      }),
+    [onMove, onRelease, onSwipeBegin, onSwipeEnd, shouldSlide]
+  );
+  
+  return (
+    <View
+      testID = {testID+"_Container"}
+      {...containerProps}
+      style={[{justifyContent: 'center' },containerProps.style]}
+    >
+      <View testID={testID+"_Actions"} style={styles.actions}>
+        <View
+         testID = {testID+"_Left"}
+          {...leftProps}
+          style={[
+            {
+              zIndex: 1,
+            },
+            leftStyle,
+          ]}
+        >
+          {typeof left === 'function'
+            ? left(resetCallBack)
+            : left}
+        </View>
+        <View style={{ flex: 0 }} />
+        <View
+          testID = {testID+"_Right"}
+          {...rightProps}
+          style={[
+            {
+              zIndex: 1,
+            },
+            rightStyle,
+          ]}
+        >
+          {typeof right === 'function'
+            ? right(resetCallBack)
+            : right}
+        </View>
+      </View>
+      <Animated.View
+        ref = {ref}
+        testID={testID}
+        {...rest}
+        style={[{
+            transform: [
+              {
+                translateX: translateX.current,
+              },
+            ],
+          },rest.style]}
+        {..._panResponder.panHandlers}
+      >
+        {children}
+      </Animated.View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+    actions: {
+      bottom: 0,
+      left: 0,
+      overflow: 'hidden',
+      position: 'absolute',
+      right: 0,
+      top: 0,
+  
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+  });
+
+SwipeableComponent.displayName = 'SwipeableComponent';
+
+SwipeableComponent.propTypes = {
+     /**
+   * Left Content.
+   * @type ReactNode or resetCallback => ReactNode
+   */
+  left: PropTypes.oneOfType([PropTypes.func,PropTypes.node]),// | ((reset: () => void) => React.ReactNode);
+
+  /**
+   *  Right Content.
+   * @type ReactNode or resetCallback => ReactNode
+   */
+  right: PropTypes.oneOfType([PropTypes.func,PropTypes.node]),//?: React.ReactNode | ((reset: () => void) => React.ReactNode);
+
+  /** Style of left container.*/
+  leftProps : PropTypes.object,
+
+  /** Style of right container.*/
+  rightProps : PropTypes.object,
+  
+   /** Width to swipe left. */
+  leftWidth : PropTypes.number,
+  /** Width to swipe right. */
+  rightWidth : PropTypes.number,
+
+  /** Handler for swipe in either direction */
+  onSwipeBegin : PropTypes.func,///?: (direction: 'left' | 'right') => unknown;
+
+  /** Handler for swipe end. */
+  onSwipeEnd : PropTypes.func,//?: () => unknown;
+
+  /** Decide whether to show animation.
+   * @default Object with duration 350ms and type timing
+   * @type Animated.TimingAnimationConfig
+   */
+  animation : PropTypes.shape({
+    type : PropTypes.oneOf(['timing', 'spring']),
+    duration: PropTypes.number,
+  }),
+}
+
+export default SwipeableComponent;

package/src/components/Swipeable/SwipeableGesture.js

@@ -0,0 +1,77 @@
+import React  from '$react';
+import {
+  View,
+  Animated,
+  PanResponder
+} from 'react-native';
+import {defaultStr} from "$utils";
+import {isNativeMobile} from "$cplatform";
+
+const useNativeDriver = isNativeMobile();
+
+
+const SwipeableGestureComponent = React.forwardRef((props,ref)=>{
+    const {disabled,onSwipe,style,animate:customAnimate,direction:directionProps,onSwipeLeft,children,onSwipeUp,onSwipeDown,onSwipeRight,...rest} = props;
+    const animate = typeof customAnimate =='boolean'? customAnimate : true;
+    const customDirection = defaultStr(directionProps).toLowerCase();
+    const [state,setState] = React.useState({
+      pan: new Animated.ValueXY(),
+    });
+    const context = {
+      reset : ()=>pan.setValue({ x: 0, y: 0 }),
+    }
+    const {pan} = state;
+    const panStyle = animate ? {
+        transform: pan.getTranslateTransform()
+    } : null;
+    const panResponder = React.useRef(PanResponder.create({
+        onStartShouldSetPanResponder: (evt, gestureState) =>true,// typeof disabled =='boolean'? disabled : true,
+        onPanResponderMove: (e, gestureState) => {
+            if (gestureState.dy > 0) {
+                Animated.event([null, { dy: pan.y }], { useNativeDriver})(e, gestureState);
+            }
+        },
+        onPanResponderRelease: (evt, gestureState) => {
+          const x = gestureState.dx, y = gestureState.dy;
+          let direction = undefined;
+          if (Math.abs(x) > Math.abs(y)) {
+            if (x >= 0) {
+              direction = "right";
+              if(onSwipeRight){
+                 onSwipeRight();
+              }
+            }
+            else {
+              direction = "left";
+              if(onSwipeLeft){
+                 onSwipeLeft();
+              }
+            }
+          }
+          else {
+            if (y >= 0) {
+              direction = "down";
+              if(onSwipeDown){
+                onSwipeDown();
+              }
+            }
+            else {
+                direction = "up"
+              if(onSwipeUp){
+                onSwipeUp();
+              }
+            }
+          }
+          if(onSwipe){
+                onSwipe({direction})
+            }
+        }
+    })).current;
+    return <Animated.View ref={ref} {...rest} style={[style,panStyle]} {...panResponder.panHandlers}>
+    {children}
+  </Animated.View>
+});
+
+SwipeableGestureComponent.displayName = "SwipeableGestureComponent";
+
+export default SwipeableGestureComponent;

package/src/components/Swipeable/index.js

@@ -0,0 +1,5 @@
+import SwipeGesture from "./SwipeableGesture";
+import Swipe from "./Swipe";
+export {SwipeGesture}
+
+export default Swipe;