@sendbird/uikit-react-native-foundation 3.7.6 → 3.8.0

package/lib/module/components/PressBox/index.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import * as React from 'react';
 import { useState } from 'react';
 import { Pressable, TouchableOpacity } from 'react-native';
@@ -8,22 +8,20 @@ const PressBox = props => {
   if (props.activeOpacity && props.activeOpacity < 1) return /*#__PURE__*/React.createElement(PressBoxWithTouchableOpacity, props);
   return /*#__PURE__*/React.createElement(PressBoxWithPressable, props);
 };
-const PressBoxWithPressable = _ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
+const PressBoxWithPressable = ({
+  children,
+  ...props
+}) => {
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     disabled: !props.onPress && !props.onLongPress,
     delayLongPress: DEFAULT_LONG_PRESS_DELAY
   }, props), state => isFunction(children) ? children(state) : children);
 };
-const PressBoxWithTouchableOpacity = _ref2 => {
-  let {
-    children,
-    style,
-    ...props
-  } = _ref2;
+const PressBoxWithTouchableOpacity = ({
+  children,
+  style,
+  ...props
+}) => {
   const [pressed, setPressed] = useState(false);
   const state = {
     pressed

package/lib/module/components/PressBox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Pressable","TouchableOpacity","isFunction","DEFAULT_LONG_PRESS_DELAY","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","_ref","children","_extends","disabled","onPress","onLongPress","delayLongPress","state","_ref2","style","pressed","setPressed","onPressIn","onPressOut"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n  pressed: boolean;\n};\n\ntype Props = {\n  disabled?: boolean;\n  onPress?: (event: GestureResponderEvent) => void;\n  onLongPress?: (event: GestureResponderEvent) => void;\n  delayLongPress?: number;\n  activeOpacity?: number;\n  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n  hitSlop?: ViewProps['hitSlop'];\n  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n  return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, ...props }: Props) => {\n  return (\n    <Pressable disabled={!props.onPress && !props.onLongPress} delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props}>\n      {(state) => (isFunction(children) ? children(state) : children)}\n    </Pressable>\n  );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <TouchableOpacity\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      style={isFunction(style) ? style(state) : style}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </TouchableOpacity>\n  );\n};\n\nexport default PressBox;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAEhC,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,cAAc;AAE1D,SAASC,UAAU,QAAQ,uBAAuB;AAiBlD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAE3C,MAAMC,QAAQ,GAAIC,KAAY,IAAK;EACjC,IAAIA,KAAK,CAACC,aAAa,IAAID,KAAK,CAACC,aAAa,GAAG,CAAC,EAAE,oBAAOR,KAAA,CAAAS,aAAA,CAACC,4BAA4B,EAAKH,KAAK,CAAI;EACtG,oBAAOP,KAAA,CAAAS,aAAA,CAACE,qBAAqB,EAAKJ,KAAK,CAAI;AAC7C,CAAC;AAED,MAAMI,qBAAqB,GAAGC,IAAA,IAAmC;EAAA,IAAlC;IAAEC,QAAQ;IAAE,GAAGN;EAAa,CAAC,GAAAK,IAAA;EAC1D,oBACEZ,KAAA,CAAAS,aAAA,CAACP,SAAS,EAAAY,QAAA;IAACC,QAAQ,EAAE,CAACR,KAAK,CAACS,OAAO,IAAI,CAACT,KAAK,CAACU,WAAY;IAACC,cAAc,EAAEb;EAAyB,GAAKE,KAAK,GAC1GY,KAAK,IAAMf,UAAU,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAAS,CACrD;AAEhB,CAAC;AAED,MAAMH,4BAA4B,GAAGU,KAAA,IAA0C;EAAA,IAAzC;IAAEP,QAAQ;IAAEQ,KAAK;IAAE,GAAGd;EAAa,CAAC,GAAAa,KAAA;EACxE,MAAM,CAACE,OAAO,EAAEC,UAAU,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMkB,KAA0B,GAAG;IAAEG;EAAQ,CAAC;EAC9C,oBACEtB,KAAA,CAAAS,aAAA,CAACN,gBAAgB,EAAAW,QAAA;IACfC,QAAQ,EAAE,CAACR,KAAK,CAACS,OAAO,IAAI,CAACT,KAAK,CAACU,WAAY;IAC/CC,cAAc,EAAEb,wBAAyB;IACzCgB,KAAK,EAAEjB,UAAU,CAACiB,KAAK,CAAC,GAAGA,KAAK,CAACF,KAAK,CAAC,GAAGE,KAAM;IAChDG,SAAS,EAAEA,CAAA,KAAMD,UAAU,CAAC,IAAI,CAAE;IAClCE,UAAU,EAAEA,CAAA,KAAMF,UAAU,CAAC,KAAK;EAAE,GAChChB,KAAK,GAERH,UAAU,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAAQ,CACjC;AAEvB,CAAC;AAED,eAAeP,QAAQ"}
+{"version":3,"names":["React","useState","Pressable","TouchableOpacity","isFunction","DEFAULT_LONG_PRESS_DELAY","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","_extends","disabled","onPress","onLongPress","delayLongPress","state","style","pressed","setPressed","onPressIn","onPressOut"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n  pressed: boolean;\n};\n\ntype Props = {\n  disabled?: boolean;\n  onPress?: (event: GestureResponderEvent) => void;\n  onLongPress?: (event: GestureResponderEvent) => void;\n  delayLongPress?: number;\n  activeOpacity?: number;\n  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n  hitSlop?: ViewProps['hitSlop'];\n  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n  return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, ...props }: Props) => {\n  return (\n    <Pressable disabled={!props.onPress && !props.onLongPress} delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props}>\n      {(state) => (isFunction(children) ? children(state) : children)}\n    </Pressable>\n  );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <TouchableOpacity\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      style={isFunction(style) ? style(state) : style}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </TouchableOpacity>\n  );\n};\n\nexport default PressBox;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAEhC,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,cAAc;AAE1D,SAASC,UAAU,QAAQ,uBAAuB;AAiBlD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAE3C,MAAMC,QAAQ,GAAIC,KAAY,IAAK;EACjC,IAAIA,KAAK,CAACC,aAAa,IAAID,KAAK,CAACC,aAAa,GAAG,CAAC,EAAE,oBAAOR,KAAA,CAAAS,aAAA,CAACC,4BAA4B,EAAKH,KAAQ,CAAC;EACtG,oBAAOP,KAAA,CAAAS,aAAA,CAACE,qBAAqB,EAAKJ,KAAQ,CAAC;AAC7C,CAAC;AAED,MAAMI,qBAAqB,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGL;AAAa,CAAC,KAAK;EAC/D,oBACEP,KAAA,CAAAS,aAAA,CAACP,SAAS,EAAAW,QAAA;IAACC,QAAQ,EAAE,CAACP,KAAK,CAACQ,OAAO,IAAI,CAACR,KAAK,CAACS,WAAY;IAACC,cAAc,EAAEZ;EAAyB,GAAKE,KAAK,GAC1GW,KAAK,IAAMd,UAAU,CAACQ,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAC7C,CAAC;AAEhB,CAAC;AAED,MAAMF,4BAA4B,GAAGA,CAAC;EAAEE,QAAQ;EAAEO,KAAK;EAAE,GAAGZ;AAAa,CAAC,KAAK;EAC7E,MAAM,CAACa,OAAO,EAAEC,UAAU,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMiB,KAA0B,GAAG;IAAEE;EAAQ,CAAC;EAC9C,oBACEpB,KAAA,CAAAS,aAAA,CAACN,gBAAgB,EAAAU,QAAA;IACfC,QAAQ,EAAE,CAACP,KAAK,CAACQ,OAAO,IAAI,CAACR,KAAK,CAACS,WAAY;IAC/CC,cAAc,EAAEZ,wBAAyB;IACzCc,KAAK,EAAEf,UAAU,CAACe,KAAK,CAAC,GAAGA,KAAK,CAACD,KAAK,CAAC,GAAGC,KAAM;IAChDG,SAAS,EAAEA,CAAA,KAAMD,UAAU,CAAC,IAAI,CAAE;IAClCE,UAAU,EAAEA,CAAA,KAAMF,UAAU,CAAC,KAAK;EAAE,GAChCd,KAAK,GAERH,UAAU,CAACQ,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAC1B,CAAC;AAEvB,CAAC;AAED,eAAeN,QAAQ","ignoreList":[]}

package/lib/module/components/ProgressBar/index.js

@@ -1,17 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, StyleSheet } from 'react-native';
+import { Animated, Easing, I18nManager, StyleSheet } from 'react-native';
 import { NOOP } from '@sendbird/uikit-utils';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Box from '../Box';
-const ProgressBar = _ref => {
-  let {
-    current = 100,
-    total = 100,
-    trackColor,
-    barColor,
-    overlay,
-    style
-  } = _ref;
+const ProgressBar = ({
+  current = 100,
+  total = 100,
+  trackColor,
+  barColor,
+  overlay,
+  style
+}) => {
   const {
     colors
   } = useUIKitTheme();
@@ -35,6 +34,16 @@ const ProgressBar = _ref => {
     }
     return NOOP;
   }, [percent]);
+  const progressBarPosition = (() => {
+    if (I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL) {
+      return {
+        right: 0
+      };
+    }
+    return {
+      left: 0
+    };
+  })();
   return /*#__PURE__*/React.createElement(Box, {
     height: 36,
     flexDirection: 'row',
@@ -43,7 +52,7 @@ const ProgressBar = _ref => {
     overflow: 'hidden',
     style: style
   }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: {
+    style: [progressBarPosition, {
       position: 'absolute',
       width: progress.interpolate({
         inputRange: [0, 1],
@@ -53,7 +62,7 @@ const ProgressBar = _ref => {
       height: '100%',
       opacity: 0.38,
       backgroundColor: uiColors.bar
-    }
+    }]
   }), /*#__PURE__*/React.createElement(Box, {
     style: StyleSheet.absoluteFill
   }, overlay));

package/lib/module/components/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","Animated","Easing","StyleSheet","NOOP","useUIKitTheme","Box","ProgressBar","_ref","current","total","trackColor","barColor","overlay","style","colors","uiColors","track","primary","bar","onBackground01","progress","Value","percent","stopped","Number","isNaN","animation","timing","toValue","duration","useNativeDriver","easing","linear","start","stop","createElement","height","flexDirection","backgroundColor","alignItems","overflow","View","position","width","interpolate","inputRange","outputRange","extrapolate","opacity","absoluteFill"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleSheet, ViewStyle } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\n\ntype Props = {\n  current: number;\n  total: number;\n  trackColor?: string;\n  barColor?: string;\n  overlay?: ReactNode | undefined;\n  style?: ViewStyle;\n};\nconst ProgressBar = ({ current = 100, total = 100, trackColor, barColor, overlay, style }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  const uiColors = {\n    track: trackColor ?? colors.primary,\n    bar: barColor ?? colors.onBackground01,\n  };\n\n  const progress = useRef(new Animated.Value(0)).current;\n  const percent = current / total;\n  const stopped = percent === 0;\n\n  useEffect(() => {\n    if (!Number.isNaN(percent)) {\n      const animation = Animated.timing(progress, {\n        toValue: stopped ? 0 : percent,\n        duration: stopped ? 0 : 100,\n        useNativeDriver: false,\n        easing: Easing.linear,\n      });\n\n      animation.start();\n      return () => animation.stop();\n    }\n\n    return NOOP;\n  }, [percent]);\n\n  return (\n    <Box\n      height={36}\n      flexDirection={'row'}\n      backgroundColor={uiColors.track}\n      alignItems={'center'}\n      overflow={'hidden'}\n      style={style}\n    >\n      <Animated.View\n        style={{\n          position: 'absolute',\n          width: progress.interpolate({\n            inputRange: [0, 1],\n            outputRange: ['0%', '100%'],\n            extrapolate: 'clamp',\n          }),\n          height: '100%',\n          opacity: 0.38,\n          backgroundColor: uiColors.bar,\n        }}\n      />\n      <Box style={StyleSheet.absoluteFill}>{overlay}</Box>\n    </Box>\n  );\n};\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAeC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC3D,SAASC,QAAQ,EAAEC,MAAM,EAAEC,UAAU,QAAmB,cAAc;AAEtE,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,GAAG,MAAM,QAAQ;AAUxB,MAAMC,WAAW,GAAGC,IAAA,IAAiF;EAAA,IAAhF;IAAEC,OAAO,GAAG,GAAG;IAAEC,KAAK,GAAG,GAAG;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAN,IAAA;EAC9F,MAAM;IAAEO;EAAO,CAAC,GAAGV,aAAa,EAAE;EAElC,MAAMW,QAAQ,GAAG;IACfC,KAAK,EAAEN,UAAU,IAAII,MAAM,CAACG,OAAO;IACnCC,GAAG,EAAEP,QAAQ,IAAIG,MAAM,CAACK;EAC1B,CAAC;EAED,MAAMC,QAAQ,GAAGrB,MAAM,CAAC,IAAIC,QAAQ,CAACqB,KAAK,CAAC,CAAC,CAAC,CAAC,CAACb,OAAO;EACtD,MAAMc,OAAO,GAAGd,OAAO,GAAGC,KAAK;EAC/B,MAAMc,OAAO,GAAGD,OAAO,KAAK,CAAC;EAE7BxB,SAAS,CAAC,MAAM;IACd,IAAI,CAAC0B,MAAM,CAACC,KAAK,CAACH,OAAO,CAAC,EAAE;MAC1B,MAAMI,SAAS,GAAG1B,QAAQ,CAAC2B,MAAM,CAACP,QAAQ,EAAE;QAC1CQ,OAAO,EAAEL,OAAO,GAAG,CAAC,GAAGD,OAAO;QAC9BO,QAAQ,EAAEN,OAAO,GAAG,CAAC,GAAG,GAAG;QAC3BO,eAAe,EAAE,KAAK;QACtBC,MAAM,EAAE9B,MAAM,CAAC+B;MACjB,CAAC,CAAC;MAEFN,SAAS,CAACO,KAAK,EAAE;MACjB,OAAO,MAAMP,SAAS,CAACQ,IAAI,EAAE;IAC/B;IAEA,OAAO/B,IAAI;EACb,CAAC,EAAE,CAACmB,OAAO,CAAC,CAAC;EAEb,oBACEzB,KAAA,CAAAsC,aAAA,CAAC9B,GAAG;IACF+B,MAAM,EAAE,EAAG;IACXC,aAAa,EAAE,KAAM;IACrBC,eAAe,EAAEvB,QAAQ,CAACC,KAAM;IAChCuB,UAAU,EAAE,QAAS;IACrBC,QAAQ,EAAE,QAAS;IACnB3B,KAAK,EAAEA;EAAM,gBAEbhB,KAAA,CAAAsC,aAAA,CAACnC,QAAQ,CAACyC,IAAI;IACZ5B,KAAK,EAAE;MACL6B,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAEvB,QAAQ,CAACwB,WAAW,CAAC;QAC1BC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClBC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC;QAC3BC,WAAW,EAAE;MACf,CAAC,CAAC;MACFX,MAAM,EAAE,MAAM;MACdY,OAAO,EAAE,IAAI;MACbV,eAAe,EAAEvB,QAAQ,CAACG;IAC5B;EAAE,EACF,eACFrB,KAAA,CAAAsC,aAAA,CAAC9B,GAAG;IAACQ,KAAK,EAAEX,UAAU,CAAC+C;EAAa,GAAErC,OAAO,CAAO,CAChD;AAEV,CAAC;AAED,eAAeN,WAAW"}
+{"version":3,"names":["React","useEffect","useRef","Animated","Easing","I18nManager","StyleSheet","NOOP","useUIKitTheme","Box","ProgressBar","current","total","trackColor","barColor","overlay","style","colors","uiColors","track","primary","bar","onBackground01","progress","Value","percent","stopped","Number","isNaN","animation","timing","toValue","duration","useNativeDriver","easing","linear","start","stop","progressBarPosition","isRTL","doLeftAndRightSwapInRTL","right","left","createElement","height","flexDirection","backgroundColor","alignItems","overflow","View","position","width","interpolate","inputRange","outputRange","extrapolate","opacity","absoluteFill"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef } from 'react';\nimport { Animated, Easing, I18nManager, StyleSheet, ViewStyle } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\n\ntype Props = {\n  current: number;\n  total: number;\n  trackColor?: string;\n  barColor?: string;\n  overlay?: ReactNode | undefined;\n  style?: ViewStyle;\n};\nconst ProgressBar = ({ current = 100, total = 100, trackColor, barColor, overlay, style }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  const uiColors = {\n    track: trackColor ?? colors.primary,\n    bar: barColor ?? colors.onBackground01,\n  };\n\n  const progress = useRef(new Animated.Value(0)).current;\n  const percent = current / total;\n  const stopped = percent === 0;\n\n  useEffect(() => {\n    if (!Number.isNaN(percent)) {\n      const animation = Animated.timing(progress, {\n        toValue: stopped ? 0 : percent,\n        duration: stopped ? 0 : 100,\n        useNativeDriver: false,\n        easing: Easing.linear,\n      });\n\n      animation.start();\n      return () => animation.stop();\n    }\n\n    return NOOP;\n  }, [percent]);\n\n  const progressBarPosition = (() => {\n    if (I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL) {\n      return { right: 0 };\n    }\n\n    return { left: 0 };\n  })();\n\n  return (\n    <Box\n      height={36}\n      flexDirection={'row'}\n      backgroundColor={uiColors.track}\n      alignItems={'center'}\n      overflow={'hidden'}\n      style={style}\n    >\n      <Animated.View\n        style={[\n          progressBarPosition,\n          {\n            position: 'absolute',\n            width: progress.interpolate({\n              inputRange: [0, 1],\n              outputRange: ['0%', '100%'],\n              extrapolate: 'clamp',\n            }),\n            height: '100%',\n            opacity: 0.38,\n            backgroundColor: uiColors.bar,\n          },\n        ]}\n      />\n      <Box style={StyleSheet.absoluteFill}>{overlay}</Box>\n    </Box>\n  );\n};\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAeC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC3D,SAASC,QAAQ,EAAEC,MAAM,EAAEC,WAAW,EAAEC,UAAU,QAAmB,cAAc;AAEnF,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,GAAG,MAAM,QAAQ;AAUxB,MAAMC,WAAW,GAAGA,CAAC;EAAEC,OAAO,GAAG,GAAG;EAAEC,KAAK,GAAG,GAAG;EAAEC,UAAU;EAAEC,QAAQ;EAAEC,OAAO;EAAEC;AAAa,CAAC,KAAK;EACnG,MAAM;IAAEC;EAAO,CAAC,GAAGT,aAAa,CAAC,CAAC;EAElC,MAAMU,QAAQ,GAAG;IACfC,KAAK,EAAEN,UAAU,IAAII,MAAM,CAACG,OAAO;IACnCC,GAAG,EAAEP,QAAQ,IAAIG,MAAM,CAACK;EAC1B,CAAC;EAED,MAAMC,QAAQ,GAAGrB,MAAM,CAAC,IAAIC,QAAQ,CAACqB,KAAK,CAAC,CAAC,CAAC,CAAC,CAACb,OAAO;EACtD,MAAMc,OAAO,GAAGd,OAAO,GAAGC,KAAK;EAC/B,MAAMc,OAAO,GAAGD,OAAO,KAAK,CAAC;EAE7BxB,SAAS,CAAC,MAAM;IACd,IAAI,CAAC0B,MAAM,CAACC,KAAK,CAACH,OAAO,CAAC,EAAE;MAC1B,MAAMI,SAAS,GAAG1B,QAAQ,CAAC2B,MAAM,CAACP,QAAQ,EAAE;QAC1CQ,OAAO,EAAEL,OAAO,GAAG,CAAC,GAAGD,OAAO;QAC9BO,QAAQ,EAAEN,OAAO,GAAG,CAAC,GAAG,GAAG;QAC3BO,eAAe,EAAE,KAAK;QACtBC,MAAM,EAAE9B,MAAM,CAAC+B;MACjB,CAAC,CAAC;MAEFN,SAAS,CAACO,KAAK,CAAC,CAAC;MACjB,OAAO,MAAMP,SAAS,CAACQ,IAAI,CAAC,CAAC;IAC/B;IAEA,OAAO9B,IAAI;EACb,CAAC,EAAE,CAACkB,OAAO,CAAC,CAAC;EAEb,MAAMa,mBAAmB,GAAG,CAAC,MAAM;IACjC,IAAIjC,WAAW,CAACkC,KAAK,IAAIlC,WAAW,CAACmC,uBAAuB,EAAE;MAC5D,OAAO;QAAEC,KAAK,EAAE;MAAE,CAAC;IACrB;IAEA,OAAO;MAAEC,IAAI,EAAE;IAAE,CAAC;EACpB,CAAC,EAAE,CAAC;EAEJ,oBACE1C,KAAA,CAAA2C,aAAA,CAAClC,GAAG;IACFmC,MAAM,EAAE,EAAG;IACXC,aAAa,EAAE,KAAM;IACrBC,eAAe,EAAE5B,QAAQ,CAACC,KAAM;IAChC4B,UAAU,EAAE,QAAS;IACrBC,QAAQ,EAAE,QAAS;IACnBhC,KAAK,EAAEA;EAAM,gBAEbhB,KAAA,CAAA2C,aAAA,CAACxC,QAAQ,CAAC8C,IAAI;IACZjC,KAAK,EAAE,CACLsB,mBAAmB,EACnB;MACEY,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE5B,QAAQ,CAAC6B,WAAW,CAAC;QAC1BC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClBC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC;QAC3BC,WAAW,EAAE;MACf,CAAC,CAAC;MACFX,MAAM,EAAE,MAAM;MACdY,OAAO,EAAE,IAAI;MACbV,eAAe,EAAE5B,QAAQ,CAACG;IAC5B,CAAC;EACD,CACH,CAAC,eACFrB,KAAA,CAAA2C,aAAA,CAAClC,GAAG;IAACO,KAAK,EAAEV,UAAU,CAACmD;EAAa,GAAE1C,OAAa,CAChD,CAAC;AAEV,CAAC;AAED,eAAeL,WAAW","ignoreList":[]}

package/lib/module/components/RegexText/index.js

@@ -1,19 +1,17 @@
 import React from 'react';
 import { replaceWithRegex } from '@sendbird/uikit-utils';
 import Text from '../Text';
-const RegexText = _ref => {
-  let {
-    children,
-    patterns,
-    ...props
-  } = _ref;
+const RegexText = ({
+  children,
+  patterns,
+  ...props
+}) => {
   if (patterns.length === 0 || typeof children !== 'string') return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   const matchedTexts = [children];
-  patterns.forEach((_ref2, patterIndex) => {
-    let {
-      regex,
-      replacer
-    } = _ref2;
+  patterns.forEach(({
+    regex,
+    replacer
+  }, patterIndex) => {
     const matchedTextsTemp = matchedTexts.concat();
     let offset = 0;
     matchedTextsTemp.forEach((text, index) => {

package/lib/module/components/RegexText/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","replaceWithRegex","Text","RegexText","_ref","children","patterns","props","length","createElement","Fragment","matchedTexts","forEach","_ref2","patterIndex","regex","replacer","matchedTextsTemp","concat","offset","text","index","params","parentProps","keyPrefix","String","splice"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { replaceWithRegex } from '@sendbird/uikit-utils';\n\nimport Text, { TextProps } from '../Text';\n\nexport interface RegexTextPattern {\n  regex: RegExp;\n  replacer(params: {\n    match: string;\n    groups: string[];\n    index: number;\n    keyPrefix: string;\n    parentProps?: TextProps;\n  }): string | ReactNode;\n}\n\ntype Props = { patterns: RegexTextPattern[] } & TextProps;\n\nconst RegexText = ({ children, patterns, ...props }: Props) => {\n  if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;\n\n  const matchedTexts: Array<string | ReactNode> = [children];\n\n  patterns.forEach(({ regex, replacer }, patterIndex) => {\n    const matchedTextsTemp = matchedTexts.concat();\n    let offset = 0;\n    matchedTextsTemp.forEach((text, index) => {\n      if (typeof text === 'string' && text) {\n        const children = replaceWithRegex(\n          text,\n          regex,\n          (params) => replacer({ ...params, parentProps: props, keyPrefix: index + params.keyPrefix }),\n          String(patterIndex),\n        );\n\n        if (children.length > 1) {\n          matchedTexts.splice(index + offset, 1, ...children);\n          offset += children.length - 1;\n        }\n      }\n    });\n  });\n\n  return <Text {...props}>{matchedTexts}</Text>;\n};\n\nexport default RegexText;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,IAAI,MAAqB,SAAS;AAezC,MAAMC,SAAS,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;EAAa,CAAC,GAAAH,IAAA;EACxD,IAAIE,QAAQ,CAACE,MAAM,KAAK,CAAC,IAAI,OAAOH,QAAQ,KAAK,QAAQ,EAAE,oBAAOL,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QAAGL,QAAQ,CAAI;EAEjF,MAAMM,YAAuC,GAAG,CAACN,QAAQ,CAAC;EAE1DC,QAAQ,CAACM,OAAO,CAAC,CAAAC,KAAA,EAAsBC,WAAW,KAAK;IAAA,IAArC;MAAEC,KAAK;MAAEC;IAAS,CAAC,GAAAH,KAAA;IACnC,MAAMI,gBAAgB,GAAGN,YAAY,CAACO,MAAM,EAAE;IAC9C,IAAIC,MAAM,GAAG,CAAC;IACdF,gBAAgB,CAACL,OAAO,CAAC,CAACQ,IAAI,EAAEC,KAAK,KAAK;MACxC,IAAI,OAAOD,IAAI,KAAK,QAAQ,IAAIA,IAAI,EAAE;QACpC,MAAMf,QAAQ,GAAGJ,gBAAgB,CAC/BmB,IAAI,EACJL,KAAK,EACJO,MAAM,IAAKN,QAAQ,CAAC;UAAE,GAAGM,MAAM;UAAEC,WAAW,EAAEhB,KAAK;UAAEiB,SAAS,EAAEH,KAAK,GAAGC,MAAM,CAACE;QAAU,CAAC,CAAC,EAC5FC,MAAM,CAACX,WAAW,CAAC,CACpB;QAED,IAAIT,QAAQ,CAACG,MAAM,GAAG,CAAC,EAAE;UACvBG,YAAY,CAACe,MAAM,CAACL,KAAK,GAAGF,MAAM,EAAE,CAAC,EAAE,GAAGd,QAAQ,CAAC;UACnDc,MAAM,IAAId,QAAQ,CAACG,MAAM,GAAG,CAAC;QAC/B;MACF;IACF,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,oBAAOR,KAAA,CAAAS,aAAA,CAACP,IAAI,EAAKK,KAAK,EAAGI,YAAY,CAAQ;AAC/C,CAAC;AAED,eAAeR,SAAS"}
+{"version":3,"names":["React","replaceWithRegex","Text","RegexText","children","patterns","props","length","createElement","Fragment","matchedTexts","forEach","regex","replacer","patterIndex","matchedTextsTemp","concat","offset","text","index","params","parentProps","keyPrefix","String","splice"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { replaceWithRegex } from '@sendbird/uikit-utils';\n\nimport Text, { TextProps } from '../Text';\n\nexport interface RegexTextPattern {\n  regex: RegExp;\n  replacer(params: {\n    match: string;\n    groups: string[];\n    index: number;\n    keyPrefix: string;\n    parentProps?: TextProps;\n  }): string | ReactNode;\n}\n\ntype Props = { patterns: RegexTextPattern[] } & TextProps;\n\nconst RegexText = ({ children, patterns, ...props }: Props) => {\n  if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;\n\n  const matchedTexts: Array<string | ReactNode> = [children];\n\n  patterns.forEach(({ regex, replacer }, patterIndex) => {\n    const matchedTextsTemp = matchedTexts.concat();\n    let offset = 0;\n    matchedTextsTemp.forEach((text, index) => {\n      if (typeof text === 'string' && text) {\n        const children = replaceWithRegex(\n          text,\n          regex,\n          (params) => replacer({ ...params, parentProps: props, keyPrefix: index + params.keyPrefix }),\n          String(patterIndex),\n        );\n\n        if (children.length > 1) {\n          matchedTexts.splice(index + offset, 1, ...children);\n          offset += children.length - 1;\n        }\n      }\n    });\n  });\n\n  return <Text {...props}>{matchedTexts}</Text>;\n};\n\nexport default RegexText;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,IAAI,MAAqB,SAAS;AAezC,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAa,CAAC,KAAK;EAC7D,IAAID,QAAQ,CAACE,MAAM,KAAK,CAAC,IAAI,OAAOH,QAAQ,KAAK,QAAQ,EAAE,oBAAOJ,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,QAAGL,QAAW,CAAC;EAEjF,MAAMM,YAAuC,GAAG,CAACN,QAAQ,CAAC;EAE1DC,QAAQ,CAACM,OAAO,CAAC,CAAC;IAAEC,KAAK;IAAEC;EAAS,CAAC,EAAEC,WAAW,KAAK;IACrD,MAAMC,gBAAgB,GAAGL,YAAY,CAACM,MAAM,CAAC,CAAC;IAC9C,IAAIC,MAAM,GAAG,CAAC;IACdF,gBAAgB,CAACJ,OAAO,CAAC,CAACO,IAAI,EAAEC,KAAK,KAAK;MACxC,IAAI,OAAOD,IAAI,KAAK,QAAQ,IAAIA,IAAI,EAAE;QACpC,MAAMd,QAAQ,GAAGH,gBAAgB,CAC/BiB,IAAI,EACJN,KAAK,EACJQ,MAAM,IAAKP,QAAQ,CAAC;UAAE,GAAGO,MAAM;UAAEC,WAAW,EAAEf,KAAK;UAAEgB,SAAS,EAAEH,KAAK,GAAGC,MAAM,CAACE;QAAU,CAAC,CAAC,EAC5FC,MAAM,CAACT,WAAW,CACpB,CAAC;QAED,IAAIV,QAAQ,CAACG,MAAM,GAAG,CAAC,EAAE;UACvBG,YAAY,CAACc,MAAM,CAACL,KAAK,GAAGF,MAAM,EAAE,CAAC,EAAE,GAAGb,QAAQ,CAAC;UACnDa,MAAM,IAAIb,QAAQ,CAACG,MAAM,GAAG,CAAC;QAC/B;MACF;IACF,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,oBAAOP,KAAA,CAAAQ,aAAA,CAACN,IAAI,EAAKI,KAAK,EAAGI,YAAmB,CAAC;AAC/C,CAAC;AAED,eAAeP,SAAS","ignoreList":[]}

package/lib/module/components/Switch/index.js

@@ -1,25 +1,26 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Platform, Pressable } from 'react-native';
+import { Animated, I18nManager, Platform, Pressable } from 'react-native';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-const Switch = _ref => {
-  let {
-    value,
-    onChangeValue,
-    inactiveThumbColor,
-    inactiveTrackColor,
-    trackColor,
-    thumbColor
-  } = _ref;
+const Switch = ({
+  value,
+  onChangeValue,
+  inactiveThumbColor,
+  inactiveTrackColor,
+  trackColor,
+  thumbColor
+}) => {
   const {
     select,
     palette,
     colors
   } = useUIKitTheme();
   const position = useRef(new Animated.Value(0)).current;
+  const start = I18nManager.isRTL ? styles.thumbOn.start : styles.thumbOff.start;
+  const end = I18nManager.isRTL ? styles.thumbOff.start : styles.thumbOn.start;
   useEffect(() => {
     const animation = Animated.timing(position, {
-      toValue: value ? styles.thumbOn.left : styles.thumbOff.left,
+      toValue: value ? end : start,
       duration: 150,
       useNativeDriver: false
     });
@@ -28,8 +29,8 @@ const Switch = _ref => {
   }, [value]);
   const createInterpolate = (offValue, onValue) => {
     return position.interpolate({
-      inputRange: [styles.thumbOff.left, styles.thumbOn.left],
-      outputRange: [offValue, onValue],
+      inputRange: [styles.thumbOff.start, styles.thumbOn.start],
+      outputRange: I18nManager.isRTL ? [onValue, offValue] : [offValue, onValue],
       extrapolate: 'clamp'
     });
   };
@@ -91,10 +92,10 @@ const styles = createStyleSheet({
     })
   },
   thumbOn: {
-    left: OFFSET.H / 2
+    start: OFFSET.H / 2
   },
   thumbOff: {
-    left: -OFFSET.H / 2
+    start: -OFFSET.H / 2
   }
 });
 export default Switch;

package/lib/module/components/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","Animated","Platform","Pressable","createStyleSheet","useUIKitTheme","Switch","_ref","value","onChangeValue","inactiveThumbColor","inactiveTrackColor","trackColor","thumbColor","select","palette","colors","position","Value","current","animation","timing","toValue","styles","thumbOn","left","thumbOff","duration","useNativeDriver","start","stop","createInterpolate","offValue","onValue","interpolate","inputRange","outputRange","extrapolate","_trackColor","onBackground04","primary200","_thumbColor","background300","light","primary400","dark","primary300","createElement","onPress","style","container","View","track","backgroundColor","thumb","transform","translateX","OFFSET","W","H","width","height","alignItems","justifyContent","borderRadius","android","elevation","ios","shadowColor","shadowRadius","shadowOffset","shadowOpacity"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Platform, Pressable } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype SwitchProps = React.PropsWithChildren<{\n  trackColor?: string;\n  thumbColor?: string;\n  inactiveThumbColor?: string;\n  inactiveTrackColor?: string;\n\n  value: boolean;\n  onChangeValue: (val: boolean) => void;\n}>;\nconst Switch = ({\n  value,\n  onChangeValue,\n  inactiveThumbColor,\n  inactiveTrackColor,\n  trackColor,\n  thumbColor,\n}: SwitchProps) => {\n  const { select, palette, colors } = useUIKitTheme();\n  const position = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    const animation = Animated.timing(position, {\n      toValue: value ? styles.thumbOn.left : styles.thumbOff.left,\n      duration: 150,\n      useNativeDriver: false,\n    });\n    animation.start();\n    return () => animation.stop();\n  }, [value]);\n\n  const createInterpolate = <T extends string>(offValue: T, onValue: T) => {\n    return position.interpolate({\n      inputRange: [styles.thumbOff.left, styles.thumbOn.left],\n      outputRange: [offValue, onValue],\n      extrapolate: 'clamp',\n    });\n  };\n  const _trackColor = createInterpolate(inactiveTrackColor ?? colors.onBackground04, trackColor ?? palette.primary200);\n  const _thumbColor = createInterpolate(\n    inactiveThumbColor ?? palette.background300,\n    thumbColor ?? select({ light: palette.primary400, dark: palette.primary300 }),\n  );\n\n  return (\n    <Pressable onPress={() => onChangeValue(!value)} style={[styles.container]}>\n      <Animated.View style={[styles.track, { backgroundColor: _trackColor }]} />\n      <Animated.View style={[styles.thumb, { backgroundColor: _thumbColor, transform: [{ translateX: position }] }]} />\n    </Pressable>\n  );\n};\n\nconst OFFSET = { W: 20, H: 16 };\nconst styles = createStyleSheet({\n  container: {\n    width: OFFSET.W + OFFSET.H,\n    height: OFFSET.H,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    width: '100%',\n    height: '100%',\n    borderRadius: OFFSET.H / 2,\n    position: 'absolute',\n  },\n  thumb: {\n    width: OFFSET.W,\n    height: OFFSET.W,\n    borderRadius: OFFSET.W / 2,\n    ...Platform.select({\n      android: {\n        elevation: 2,\n      },\n      ios: {\n        shadowColor: 'black',\n        shadowRadius: 1,\n        shadowOffset: { width: 0, height: 2 },\n        shadowOpacity: 0.4,\n      },\n    }),\n  },\n  thumbOn: {\n    left: OFFSET.H / 2,\n  },\n  thumbOff: {\n    left: -OFFSET.H / 2,\n  },\n});\n\nexport default Switch;\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","Animated","I18nManager","Platform","Pressable","createStyleSheet","useUIKitTheme","Switch","value","onChangeValue","inactiveThumbColor","inactiveTrackColor","trackColor","thumbColor","select","palette","colors","position","Value","current","start","isRTL","styles","thumbOn","thumbOff","end","animation","timing","toValue","duration","useNativeDriver","stop","createInterpolate","offValue","onValue","interpolate","inputRange","outputRange","extrapolate","_trackColor","onBackground04","primary200","_thumbColor","background300","light","primary400","dark","primary300","createElement","onPress","style","container","View","track","backgroundColor","thumb","transform","translateX","OFFSET","W","H","width","height","alignItems","justifyContent","borderRadius","android","elevation","ios","shadowColor","shadowRadius","shadowOffset","shadowOpacity"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, I18nManager, Platform, Pressable } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype SwitchProps = React.PropsWithChildren<{\n  trackColor?: string;\n  thumbColor?: string;\n  inactiveThumbColor?: string;\n  inactiveTrackColor?: string;\n\n  value: boolean;\n  onChangeValue: (val: boolean) => void;\n}>;\nconst Switch = ({\n  value,\n  onChangeValue,\n  inactiveThumbColor,\n  inactiveTrackColor,\n  trackColor,\n  thumbColor,\n}: SwitchProps) => {\n  const { select, palette, colors } = useUIKitTheme();\n  const position = useRef(new Animated.Value(0)).current;\n\n  const start = I18nManager.isRTL ? styles.thumbOn.start : styles.thumbOff.start;\n  const end = I18nManager.isRTL ? styles.thumbOff.start : styles.thumbOn.start;\n\n  useEffect(() => {\n    const animation = Animated.timing(position, {\n      toValue: value ? end : start,\n      duration: 150,\n      useNativeDriver: false,\n    });\n    animation.start();\n    return () => animation.stop();\n  }, [value]);\n\n  const createInterpolate = <T extends string>(offValue: T, onValue: T) => {\n    return position.interpolate({\n      inputRange: [styles.thumbOff.start, styles.thumbOn.start],\n      outputRange: I18nManager.isRTL ? [onValue, offValue] : [offValue, onValue],\n      extrapolate: 'clamp',\n    });\n  };\n\n  const _trackColor = createInterpolate(inactiveTrackColor ?? colors.onBackground04, trackColor ?? palette.primary200);\n  const _thumbColor = createInterpolate(\n    inactiveThumbColor ?? palette.background300,\n    thumbColor ?? select({ light: palette.primary400, dark: palette.primary300 }),\n  );\n\n  return (\n    <Pressable onPress={() => onChangeValue(!value)} style={[styles.container]}>\n      <Animated.View style={[styles.track, { backgroundColor: _trackColor }]} />\n      <Animated.View style={[styles.thumb, { backgroundColor: _thumbColor, transform: [{ translateX: position }] }]} />\n    </Pressable>\n  );\n};\n\nconst OFFSET = { W: 20, H: 16 };\nconst styles = createStyleSheet({\n  container: {\n    width: OFFSET.W + OFFSET.H,\n    height: OFFSET.H,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    width: '100%',\n    height: '100%',\n    borderRadius: OFFSET.H / 2,\n    position: 'absolute',\n  },\n  thumb: {\n    width: OFFSET.W,\n    height: OFFSET.W,\n    borderRadius: OFFSET.W / 2,\n    ...Platform.select({\n      android: {\n        elevation: 2,\n      },\n      ios: {\n        shadowColor: 'black',\n        shadowRadius: 1,\n        shadowOffset: { width: 0, height: 2 },\n        shadowOpacity: 0.4,\n      },\n    }),\n  },\n  thumbOn: {\n    start: OFFSET.H / 2,\n  },\n  thumbOff: {\n    start: -OFFSET.H / 2,\n  },\n});\n\nexport default Switch;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Text/index.js

@@ -1,39 +1,57 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { Text as RNText } from 'react-native';
+import { I18nManager, Text as RNText, StyleSheet } from 'react-native';
+import { isStartsWithRTL } from '@sendbird/uikit-utils';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-const Text = _ref => {
-  let {
-    children,
-    color,
-    style,
-    ...props
-  } = _ref;
+const Text = ({
+  children,
+  color,
+  style,
+  supportRTLAlign = true,
+  originalText,
+  ...props
+}) => {
   const {
     colors
   } = useUIKitTheme();
   const typoStyle = useTypographyFilter(props);
+  const textStyle = StyleSheet.flatten([{
+    color: typeof color === 'string' ? color : (color === null || color === void 0 ? void 0 : color(colors)) ?? colors.text
+  }, typoStyle, style]);
+  const textAlign = (() => {
+    if (textStyle.textAlign && textStyle.textAlign !== 'left' && textStyle.textAlign !== 'right') {
+      return textStyle.textAlign;
+    }
+    if (I18nManager.isRTL && supportRTLAlign) {
+      if (originalText && isStartsWithRTL(originalText) || typeof children === 'string' && isStartsWithRTL(children)) {
+        return I18nManager.doLeftAndRightSwapInRTL ? 'left' : 'right';
+      } else {
+        return I18nManager.doLeftAndRightSwapInRTL ? 'right' : 'left';
+      }
+    }
+    if (textStyle.textAlign) return textStyle.textAlign;
+    return undefined;
+  })();
   return /*#__PURE__*/React.createElement(RNText, _extends({
-    style: [{
-      color: typeof color === 'string' ? color : (color === null || color === void 0 ? void 0 : color(colors)) ?? colors.text
-    }, typoStyle, style]
+    style: [textStyle, {
+      textAlign
+    }]
   }, props), children);
 };
-const useTypographyFilter = _ref2 => {
-  let {
-    h1,
-    h2,
-    subtitle1,
-    subtitle2,
-    body1,
-    body2,
-    body3,
-    button,
-    caption1,
-    caption2,
-    caption3,
-    caption4
-  } = _ref2;
+const useTypographyFilter = ({
+  h1,
+  h2,
+  subtitle1,
+  subtitle2,
+  body1,
+  body2,
+  body3,
+  button,
+  caption1,
+  caption2,
+  caption3,
+  caption4
+}) => {
   const {
     typography
   } = useUIKitTheme();

package/lib/module/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","RNText","useUIKitTheme","_ref","children","color","style","props","colors","typoStyle","useTypographyFilter","createElement","_extends","text","_ref2","h1","h2","subtitle1","subtitle2","body1","body2","body3","button","caption1","caption2","caption3","caption4","typography"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Text as RNText, TextProps as RNTextProps } from 'react-native';\n\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { TypoName, UIKitTheme } from '../../types';\n\ntype TypographyProps = Partial<Record<TypoName, boolean>>;\nexport type TextProps = RNTextProps & TypographyProps & { color?: ((colors: UIKitTheme['colors']) => string) | string };\nconst Text = ({ children, color, style, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  const typoStyle = useTypographyFilter(props);\n  return (\n    <RNText\n      style={[{ color: typeof color === 'string' ? color : color?.(colors) ?? colors.text }, typoStyle, style]}\n      {...props}\n    >\n      {children}\n    </RNText>\n  );\n};\n\nconst useTypographyFilter = ({\n  h1,\n  h2,\n  subtitle1,\n  subtitle2,\n  body1,\n  body2,\n  body3,\n  button,\n  caption1,\n  caption2,\n  caption3,\n  caption4,\n}: TypographyProps) => {\n  const { typography } = useUIKitTheme();\n  if (h1) return typography.h1;\n  if (h2) return typography.h2;\n  if (subtitle1) return typography.subtitle1;\n  if (subtitle2) return typography.subtitle2;\n  if (body1) return typography.body1;\n  if (body2) return typography.body2;\n  if (body3) return typography.body3;\n  if (button) return typography.button;\n  if (caption1) return typography.caption1;\n  if (caption2) return typography.caption2;\n  if (caption3) return typography.caption3;\n  if (caption4) return typography.caption4;\n  return {};\n};\n\nexport default Text;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,IAAIC,MAAM,QAAkC,cAAc;AAEvE,OAAOC,aAAa,MAAM,2BAA2B;AAKrD,MAAMF,IAAI,GAAGG,IAAA,IAAqD;EAAA,IAApD;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAE,GAAGC;EAAiB,CAAC,GAAAJ,IAAA;EAC3D,MAAM;IAAEK;EAAO,CAAC,GAAGN,aAAa,EAAE;EAClC,MAAMO,SAAS,GAAGC,mBAAmB,CAACH,KAAK,CAAC;EAC5C,oBACER,KAAA,CAAAY,aAAA,CAACV,MAAM,EAAAW,QAAA;IACLN,KAAK,EAAE,CAAC;MAAED,KAAK,EAAE,OAAOA,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAGG,MAAM,CAAC,KAAIA,MAAM,CAACK;IAAK,CAAC,EAAEJ,SAAS,EAAEH,KAAK;EAAE,GACrGC,KAAK,GAERH,QAAQ,CACF;AAEb,CAAC;AAED,MAAMM,mBAAmB,GAAGI,KAAA,IAaL;EAAA,IAbM;IAC3BC,EAAE;IACFC,EAAE;IACFC,SAAS;IACTC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC;EACe,CAAC,GAAAZ,KAAA;EAChB,MAAM;IAAEa;EAAW,CAAC,GAAGzB,aAAa,EAAE;EACtC,IAAIa,EAAE,EAAE,OAAOY,UAAU,CAACZ,EAAE;EAC5B,IAAIC,EAAE,EAAE,OAAOW,UAAU,CAACX,EAAE;EAC5B,IAAIC,SAAS,EAAE,OAAOU,UAAU,CAACV,SAAS;EAC1C,IAAIC,SAAS,EAAE,OAAOS,UAAU,CAACT,SAAS;EAC1C,IAAIC,KAAK,EAAE,OAAOQ,UAAU,CAACR,KAAK;EAClC,IAAIC,KAAK,EAAE,OAAOO,UAAU,CAACP,KAAK;EAClC,IAAIC,KAAK,EAAE,OAAOM,UAAU,CAACN,KAAK;EAClC,IAAIC,MAAM,EAAE,OAAOK,UAAU,CAACL,MAAM;EACpC,IAAIC,QAAQ,EAAE,OAAOI,UAAU,CAACJ,QAAQ;EACxC,IAAIC,QAAQ,EAAE,OAAOG,UAAU,CAACH,QAAQ;EACxC,IAAIC,QAAQ,EAAE,OAAOE,UAAU,CAACF,QAAQ;EACxC,IAAIC,QAAQ,EAAE,OAAOC,UAAU,CAACD,QAAQ;EACxC,OAAO,CAAC,CAAC;AACX,CAAC;AAED,eAAe1B,IAAI"}
+{"version":3,"names":["React","I18nManager","Text","RNText","StyleSheet","isStartsWithRTL","useUIKitTheme","children","color","style","supportRTLAlign","originalText","props","colors","typoStyle","useTypographyFilter","textStyle","flatten","text","textAlign","isRTL","doLeftAndRightSwapInRTL","undefined","createElement","_extends","h1","h2","subtitle1","subtitle2","body1","body2","body3","button","caption1","caption2","caption3","caption4","typography"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { I18nManager, Text as RNText, TextProps as RNTextProps, StyleSheet, TextStyle } from 'react-native';\n\nimport { isStartsWithRTL } from '@sendbird/uikit-utils';\n\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { TypoName, UIKitTheme } from '../../types';\n\nexport interface RTLTextAlignSupportProps {\n  /**\n   * If `I18nManager.isRTL` is `true` and this value is enabled, the text will be aligned according to RTL if it starts in an RTL language.\n   * In the case of the `Text` component, the alignment value is calculated based on `I18nManager.doLeftAndRightSwapInRTL`.\n   * For the `TextInput` component, the alignment value is calculated as a physical alignment, unaffected by `I18nManager.doLeftAndRightSwapInRTL`.\n   */\n  supportRTLAlign?: boolean;\n  /**\n   * If you want to enable `supportRTLAlign` but are using nested `Text` components that are not simple text under the `Text` component, pass the original text here.\n   */\n  originalText?: string;\n}\n\ntype TypographyProps = Partial<Record<TypoName, boolean>>;\nexport type TextProps = RNTextProps &\n  TypographyProps & { color?: ((colors: UIKitTheme['colors']) => string) | string } & RTLTextAlignSupportProps;\n\nconst Text = ({ children, color, style, supportRTLAlign = true, originalText, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  const typoStyle = useTypographyFilter(props);\n\n  const textStyle = StyleSheet.flatten([\n    { color: typeof color === 'string' ? color : color?.(colors) ?? colors.text },\n    typoStyle,\n    style,\n  ]) as TextStyle;\n\n  const textAlign = (() => {\n    if (textStyle.textAlign && textStyle.textAlign !== 'left' && textStyle.textAlign !== 'right') {\n      return textStyle.textAlign;\n    }\n\n    if (I18nManager.isRTL && supportRTLAlign) {\n      if (\n        (originalText && isStartsWithRTL(originalText)) ||\n        (typeof children === 'string' && isStartsWithRTL(children))\n      ) {\n        return I18nManager.doLeftAndRightSwapInRTL ? 'left' : 'right';\n      } else {\n        return I18nManager.doLeftAndRightSwapInRTL ? 'right' : 'left';\n      }\n    }\n\n    if (textStyle.textAlign) return textStyle.textAlign;\n    return undefined;\n  })();\n\n  return (\n    <RNText style={[textStyle, { textAlign }]} {...props}>\n      {children}\n    </RNText>\n  );\n};\n\nconst useTypographyFilter = ({\n  h1,\n  h2,\n  subtitle1,\n  subtitle2,\n  body1,\n  body2,\n  body3,\n  button,\n  caption1,\n  caption2,\n  caption3,\n  caption4,\n}: TypographyProps) => {\n  const { typography } = useUIKitTheme();\n  if (h1) return typography.h1;\n  if (h2) return typography.h2;\n  if (subtitle1) return typography.subtitle1;\n  if (subtitle2) return typography.subtitle2;\n  if (body1) return typography.body1;\n  if (body2) return typography.body2;\n  if (body3) return typography.body3;\n  if (button) return typography.button;\n  if (caption1) return typography.caption1;\n  if (caption2) return typography.caption2;\n  if (caption3) return typography.caption3;\n  if (caption4) return typography.caption4;\n  return {};\n};\n\nexport default Text;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/TextInput/index.js

@@ -1,16 +1,18 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { TextInput as RNTextInput } from 'react-native';
+import { I18nManager, TextInput as RNTextInput, StyleSheet } from 'react-native';
+import { isStartsWithRTL } from '@sendbird/uikit-utils';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
-  let {
-    children,
-    style,
-    variant = 'default',
-    editable = true,
-    ...props
-  } = _ref;
+const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
+  children,
+  style,
+  variant = 'default',
+  editable = true,
+  originalText,
+  supportRTLAlign = true,
+  ...props
+}, ref) {
   const {
     typography,
     colors
@@ -25,15 +27,34 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
     ...typography.body3,
     lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined
   };
+  const textStyle = StyleSheet.flatten([fontStyle, styles.input, {
+    color: inputStyle.text,
+    backgroundColor: inputStyle.background
+  }, underlineStyle, style]);
+  const textAlign = (() => {
+    if (textStyle.textAlign && textStyle.textAlign !== 'left' && textStyle.textAlign !== 'right') {
+      return textStyle.textAlign;
+    }
+    if (I18nManager.isRTL && supportRTLAlign) {
+      const text = originalText || props.value || props.placeholder;
+      // Note: TextInput is not affected by doLeftAndRightSwapInRTL
+      if (text && isStartsWithRTL(text)) {
+        return 'right';
+      } else {
+        return 'left';
+      }
+    }
+    if (textStyle.textAlign) return textStyle.textAlign;
+    return undefined;
+  })();
   return /*#__PURE__*/React.createElement(RNTextInput, _extends({
     ref: ref,
     editable: editable,
     selectionColor: inputStyle.highlight,
     placeholderTextColor: inputStyle.placeholder,
-    style: [fontStyle, styles.input, {
-      color: inputStyle.text,
-      backgroundColor: inputStyle.background
-    }, underlineStyle, style]
+    style: [textStyle, {
+      textAlign
+    }]
   }, props), children);
 });
 const styles = createStyleSheet({
@@ -41,8 +62,8 @@ const styles = createStyleSheet({
     includeFontPadding: false,
     paddingTop: 8,
     paddingBottom: 8,
-    paddingLeft: 16,
-    paddingRight: 16
+    paddingStart: 16,
+    paddingEnd: 16
   }
 });
 export default TextInput;

package/lib/module/components/TextInput/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TextInput","RNTextInput","createStyleSheet","useUIKitTheme","forwardRef","_ref","ref","children","style","variant","editable","props","typography","colors","variantStyle","inputStyle","active","disabled","underlineStyle","borderBottomWidth","borderBottomColor","highlight","fontStyle","body3","lineHeight","fontSize","undefined","createElement","_extends","selectionColor","placeholderTextColor","placeholder","styles","input","color","text","backgroundColor","background","includeFontPadding","paddingTop","paddingBottom","paddingLeft","paddingRight"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TextInput as RNTextInput, TextInputProps } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { UIKitTheme } from '../../types';\n\ntype Props = { variant?: keyof UIKitTheme['colors']['ui']['input'] } & TextInputProps;\nconst TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(\n  { children, style, variant = 'default', editable = true, ...props },\n  ref,\n) {\n  const { typography, colors } = useUIKitTheme();\n\n  const variantStyle = colors['ui']['input'][variant];\n  const inputStyle = editable ? variantStyle.active : variantStyle.disabled;\n  const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };\n  const fontStyle = {\n    ...typography.body3,\n    lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined,\n  };\n\n  return (\n    <RNTextInput\n      ref={ref}\n      editable={editable}\n      selectionColor={inputStyle.highlight}\n      placeholderTextColor={inputStyle.placeholder}\n      style={[\n        fontStyle,\n        styles.input,\n        { color: inputStyle.text, backgroundColor: inputStyle.background },\n        underlineStyle,\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </RNTextInput>\n  );\n});\n\nconst styles = createStyleSheet({\n  input: {\n    includeFontPadding: false,\n    paddingTop: 8,\n    paddingBottom: 8,\n    paddingLeft: 16,\n    paddingRight: 16,\n  },\n});\n\nexport default TextInput;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,IAAIC,WAAW,QAAwB,cAAc;AAEvE,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAIrD,MAAMH,SAAS,gBAAGD,KAAK,CAACK,UAAU,CAAqB,SAASJ,SAASA,CAAAK,IAAA,EAEvEC,GAAG,EACH;EAAA,IAFA;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO,GAAG,SAAS;IAAEC,QAAQ,GAAG,IAAI;IAAE,GAAGC;EAAM,CAAC,GAAAN,IAAA;EAGnE,MAAM;IAAEO,UAAU;IAAEC;EAAO,CAAC,GAAGV,aAAa,EAAE;EAE9C,MAAMW,YAAY,GAAGD,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAACJ,OAAO,CAAC;EACnD,MAAMM,UAAU,GAAGL,QAAQ,GAAGI,YAAY,CAACE,MAAM,GAAGF,YAAY,CAACG,QAAQ;EACzE,MAAMC,cAAc,GAAGT,OAAO,KAAK,WAAW,IAAI;IAAEU,iBAAiB,EAAE,CAAC;IAAEC,iBAAiB,EAAEL,UAAU,CAACM;EAAU,CAAC;EACnH,MAAMC,SAAS,GAAG;IAChB,GAAGV,UAAU,CAACW,KAAK;IACnBC,UAAU,EAAEZ,UAAU,CAACW,KAAK,CAACE,QAAQ,GAAGb,UAAU,CAACW,KAAK,CAACE,QAAQ,GAAG,GAAG,GAAGC;EAC5E,CAAC;EAED,oBACE3B,KAAA,CAAA4B,aAAA,CAAC1B,WAAW,EAAA2B,QAAA;IACVtB,GAAG,EAAEA,GAAI;IACTI,QAAQ,EAAEA,QAAS;IACnBmB,cAAc,EAAEd,UAAU,CAACM,SAAU;IACrCS,oBAAoB,EAAEf,UAAU,CAACgB,WAAY;IAC7CvB,KAAK,EAAE,CACLc,SAAS,EACTU,MAAM,CAACC,KAAK,EACZ;MAAEC,KAAK,EAAEnB,UAAU,CAACoB,IAAI;MAAEC,eAAe,EAAErB,UAAU,CAACsB;IAAW,CAAC,EAClEnB,cAAc,EACdV,KAAK;EACL,GACEG,KAAK,GAERJ,QAAQ,CACG;AAElB,CAAC,CAAC;AAEF,MAAMyB,MAAM,GAAG9B,gBAAgB,CAAC;EAC9B+B,KAAK,EAAE;IACLK,kBAAkB,EAAE,KAAK;IACzBC,UAAU,EAAE,CAAC;IACbC,aAAa,EAAE,CAAC;IAChBC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAe1C,SAAS"}
+{"version":3,"names":["React","I18nManager","TextInput","RNTextInput","StyleSheet","isStartsWithRTL","createStyleSheet","useUIKitTheme","forwardRef","children","style","variant","editable","originalText","supportRTLAlign","props","ref","typography","colors","variantStyle","inputStyle","active","disabled","underlineStyle","borderBottomWidth","borderBottomColor","highlight","fontStyle","body3","lineHeight","fontSize","undefined","textStyle","flatten","styles","input","color","text","backgroundColor","background","textAlign","isRTL","value","placeholder","createElement","_extends","selectionColor","placeholderTextColor","includeFontPadding","paddingTop","paddingBottom","paddingStart","paddingEnd"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { I18nManager, TextInput as RNTextInput, StyleSheet, TextInputProps, TextStyle } from 'react-native';\n\nimport { isStartsWithRTL } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { UIKitTheme } from '../../types';\nimport { RTLTextAlignSupportProps } from '../Text';\n\ntype Props = {\n  variant?: keyof UIKitTheme['colors']['ui']['input'];\n} & TextInputProps &\n  RTLTextAlignSupportProps;\nconst TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(\n  { children, style, variant = 'default', editable = true, originalText, supportRTLAlign = true, ...props },\n  ref,\n) {\n  const { typography, colors } = useUIKitTheme();\n\n  const variantStyle = colors['ui']['input'][variant];\n  const inputStyle = editable ? variantStyle.active : variantStyle.disabled;\n  const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };\n  const fontStyle = {\n    ...typography.body3,\n    lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined,\n  };\n\n  const textStyle = StyleSheet.flatten([\n    fontStyle,\n    styles.input,\n    { color: inputStyle.text, backgroundColor: inputStyle.background },\n    underlineStyle,\n    style,\n  ]) as TextStyle;\n\n  const textAlign = (() => {\n    if (textStyle.textAlign && textStyle.textAlign !== 'left' && textStyle.textAlign !== 'right') {\n      return textStyle.textAlign;\n    }\n\n    if (I18nManager.isRTL && supportRTLAlign) {\n      const text = originalText || props.value || props.placeholder;\n      // Note: TextInput is not affected by doLeftAndRightSwapInRTL\n      if (text && isStartsWithRTL(text)) {\n        return 'right';\n      } else {\n        return 'left';\n      }\n    }\n\n    if (textStyle.textAlign) return textStyle.textAlign;\n    return undefined;\n  })();\n\n  return (\n    <RNTextInput\n      ref={ref}\n      editable={editable}\n      selectionColor={inputStyle.highlight}\n      placeholderTextColor={inputStyle.placeholder}\n      style={[textStyle, { textAlign }]}\n      {...props}\n    >\n      {children}\n    </RNTextInput>\n  );\n});\n\nconst styles = createStyleSheet({\n  input: {\n    includeFontPadding: false,\n    paddingTop: 8,\n    paddingBottom: 8,\n    paddingStart: 16,\n    paddingEnd: 16,\n  },\n});\n\nexport default TextInput;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,EAAEC,SAAS,IAAIC,WAAW,EAAEC,UAAU,QAAmC,cAAc;AAE3G,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAQrD,MAAML,SAAS,gBAAGF,KAAK,CAACQ,UAAU,CAAqB,SAASN,SAASA,CACvE;EAAEO,QAAQ;EAAEC,KAAK;EAAEC,OAAO,GAAG,SAAS;EAAEC,QAAQ,GAAG,IAAI;EAAEC,YAAY;EAAEC,eAAe,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACzGC,GAAG,EACH;EACA,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAGX,aAAa,CAAC,CAAC;EAE9C,MAAMY,YAAY,GAAGD,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAACP,OAAO,CAAC;EACnD,MAAMS,UAAU,GAAGR,QAAQ,GAAGO,YAAY,CAACE,MAAM,GAAGF,YAAY,CAACG,QAAQ;EACzE,MAAMC,cAAc,GAAGZ,OAAO,KAAK,WAAW,IAAI;IAAEa,iBAAiB,EAAE,CAAC;IAAEC,iBAAiB,EAAEL,UAAU,CAACM;EAAU,CAAC;EACnH,MAAMC,SAAS,GAAG;IAChB,GAAGV,UAAU,CAACW,KAAK;IACnBC,UAAU,EAAEZ,UAAU,CAACW,KAAK,CAACE,QAAQ,GAAGb,UAAU,CAACW,KAAK,CAACE,QAAQ,GAAG,GAAG,GAAGC;EAC5E,CAAC;EAED,MAAMC,SAAS,GAAG5B,UAAU,CAAC6B,OAAO,CAAC,CACnCN,SAAS,EACTO,MAAM,CAACC,KAAK,EACZ;IAAEC,KAAK,EAAEhB,UAAU,CAACiB,IAAI;IAAEC,eAAe,EAAElB,UAAU,CAACmB;EAAW,CAAC,EAClEhB,cAAc,EACdb,KAAK,CACN,CAAc;EAEf,MAAM8B,SAAS,GAAG,CAAC,MAAM;IACvB,IAAIR,SAAS,CAACQ,SAAS,IAAIR,SAAS,CAACQ,SAAS,KAAK,MAAM,IAAIR,SAAS,CAACQ,SAAS,KAAK,OAAO,EAAE;MAC5F,OAAOR,SAAS,CAACQ,SAAS;IAC5B;IAEA,IAAIvC,WAAW,CAACwC,KAAK,IAAI3B,eAAe,EAAE;MACxC,MAAMuB,IAAI,GAAGxB,YAAY,IAAIE,KAAK,CAAC2B,KAAK,IAAI3B,KAAK,CAAC4B,WAAW;MAC7D;MACA,IAAIN,IAAI,IAAIhC,eAAe,CAACgC,IAAI,CAAC,EAAE;QACjC,OAAO,OAAO;MAChB,CAAC,MAAM;QACL,OAAO,MAAM;MACf;IACF;IAEA,IAAIL,SAAS,CAACQ,SAAS,EAAE,OAAOR,SAAS,CAACQ,SAAS;IACnD,OAAOT,SAAS;EAClB,CAAC,EAAE,CAAC;EAEJ,oBACE/B,KAAA,CAAA4C,aAAA,CAACzC,WAAW,EAAA0C,QAAA;IACV7B,GAAG,EAAEA,GAAI;IACTJ,QAAQ,EAAEA,QAAS;IACnBkC,cAAc,EAAE1B,UAAU,CAACM,SAAU;IACrCqB,oBAAoB,EAAE3B,UAAU,CAACuB,WAAY;IAC7CjC,KAAK,EAAE,CAACsB,SAAS,EAAE;MAAEQ;IAAU,CAAC;EAAE,GAC9BzB,KAAK,GAERN,QACU,CAAC;AAElB,CAAC,CAAC;AAEF,MAAMyB,MAAM,GAAG5B,gBAAgB,CAAC;EAC9B6B,KAAK,EAAE;IACLa,kBAAkB,EAAE,KAAK;IACzBC,UAAU,EAAE,CAAC;IACbC,aAAa,EAAE,CAAC;IAChBC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAelD,SAAS","ignoreList":[]}

package/lib/module/components/VideoThumbnail/index.js

@@ -6,14 +6,13 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import Box from '../Box';
 import Icon from '../Icon';
 import ImageWithPlaceholder from '../ImageWithPlaceholder';
-export const VideoThumbnail = _ref => {
-  let {
-    fetchThumbnailFromVideoSource,
-    style,
-    source,
-    videoSource,
-    iconSize = 28
-  } = _ref;
+export const VideoThumbnail = ({
+  fetchThumbnailFromVideoSource,
+  style,
+  source,
+  videoSource,
+  iconSize = 28
+}) => {
   const {
     palette,
     select
@@ -53,8 +52,7 @@ export const VideoThumbnail = _ref => {
     }]
   })));
 };
-const useRetry = function (fetch) {
-  let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+const useRetry = (fetch, retryCount = 5) => {
   const [state, setState] = useState({
     thumbnail: null,
     loading: true

package/lib/module/components/VideoThumbnail/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","StyleSheet","isImage","createStyleSheet","useUIKitTheme","Box","Icon","ImageWithPlaceholder","VideoThumbnail","_ref","fetchThumbnailFromVideoSource","style","source","videoSource","iconSize","palette","select","thumbnail","loading","useRetry","path","createElement","absoluteFill","backgroundColor","dark","background400","light","background100","uri","alignItems","justifyContent","icon","size","color","onBackgroundLight02","containerStyle","styles","playIcon","onBackgroundDark01","fetch","retryCount","arguments","length","undefined","state","setState","retryCountRef","fetchThumbnail","current","_timeout","_cancelled","tryFetchThumbnail","timeout","retry","finish","setTimeout","then","result","catch","clearTimeout","padding","borderRadius"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { isImage } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport ImageWithPlaceholder from '../ImageWithPlaceholder';\n\ntype Props = {\n  source: string;\n  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n\n  style?: StyleProp<ViewStyle>;\n  iconSize?: number;\n  /** @deprecated please use `source` prop **/\n  videoSource?: string;\n};\n\nexport const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize = 28 }: Props) => {\n  const { palette, select } = useUIKitTheme();\n  const { thumbnail, loading } = useRetry(async () => {\n    if (isImage(source ?? videoSource)) return { path: source ?? videoSource };\n    return fetchThumbnailFromVideoSource(source ?? videoSource);\n  });\n\n  return (\n    <Box style={style}>\n      {loading ? (\n        <Box\n          style={StyleSheet.absoluteFill}\n          backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n        />\n      ) : (\n        <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />\n      )}\n\n      {(loading || thumbnail !== null) && iconSize > 0 && (\n        <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>\n          <Icon\n            icon={'play'}\n            size={iconSize}\n            color={palette.onBackgroundLight02}\n            containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}\n          />\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {\n  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n  const retryCountRef = useRef(0);\n  const fetchThumbnail = useRef(fetch);\n  fetchThumbnail.current = fetch;\n\n  useEffect(() => {\n    let _timeout: NodeJS.Timeout;\n    let _cancelled = false;\n\n    if (!state.thumbnail) {\n      const tryFetchThumbnail = (timeout: number) => {\n        const retry = () => {\n          retryCountRef.current++;\n          tryFetchThumbnail(timeout + 5000);\n        };\n\n        const finish = (path: string | null) => {\n          if (!_cancelled) setState({ loading: false, thumbnail: path });\n        };\n\n        if (retryCountRef.current < retryCount) {\n          _timeout = setTimeout(() => {\n            fetchThumbnail\n              .current()\n              .then((result) => {\n                if (result === null) retry();\n                else finish(result.path);\n              })\n              .catch(() => retry());\n          }, timeout);\n        } else {\n          finish(null);\n        }\n      };\n\n      tryFetchThumbnail(0);\n    }\n\n    return () => {\n      _cancelled = true;\n      clearTimeout(_timeout);\n    };\n  }, [state.thumbnail]);\n\n  return state;\n};\n\nconst styles = createStyleSheet({\n  playIcon: {\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","useState","StyleSheet","isImage","createStyleSheet","useUIKitTheme","Box","Icon","ImageWithPlaceholder","VideoThumbnail","fetchThumbnailFromVideoSource","style","source","videoSource","iconSize","palette","select","thumbnail","loading","useRetry","path","createElement","absoluteFill","backgroundColor","dark","background400","light","background100","uri","alignItems","justifyContent","icon","size","color","onBackgroundLight02","containerStyle","styles","playIcon","onBackgroundDark01","fetch","retryCount","state","setState","retryCountRef","fetchThumbnail","current","_timeout","_cancelled","tryFetchThumbnail","timeout","retry","finish","setTimeout","then","result","catch","clearTimeout","padding","borderRadius"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { isImage } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport ImageWithPlaceholder from '../ImageWithPlaceholder';\n\ntype Props = {\n  source: string;\n  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n\n  style?: StyleProp<ViewStyle>;\n  iconSize?: number;\n  /** @deprecated please use `source` prop **/\n  videoSource?: string;\n};\n\nexport const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize = 28 }: Props) => {\n  const { palette, select } = useUIKitTheme();\n  const { thumbnail, loading } = useRetry(async () => {\n    if (isImage(source ?? videoSource)) return { path: source ?? videoSource };\n    return fetchThumbnailFromVideoSource(source ?? videoSource);\n  });\n\n  return (\n    <Box style={style}>\n      {loading ? (\n        <Box\n          style={StyleSheet.absoluteFill}\n          backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n        />\n      ) : (\n        <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />\n      )}\n\n      {(loading || thumbnail !== null) && iconSize > 0 && (\n        <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>\n          <Icon\n            icon={'play'}\n            size={iconSize}\n            color={palette.onBackgroundLight02}\n            containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}\n          />\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {\n  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n  const retryCountRef = useRef(0);\n  const fetchThumbnail = useRef(fetch);\n  fetchThumbnail.current = fetch;\n\n  useEffect(() => {\n    let _timeout: NodeJS.Timeout;\n    let _cancelled = false;\n\n    if (!state.thumbnail) {\n      const tryFetchThumbnail = (timeout: number) => {\n        const retry = () => {\n          retryCountRef.current++;\n          tryFetchThumbnail(timeout + 5000);\n        };\n\n        const finish = (path: string | null) => {\n          if (!_cancelled) setState({ loading: false, thumbnail: path });\n        };\n\n        if (retryCountRef.current < retryCount) {\n          _timeout = setTimeout(() => {\n            fetchThumbnail\n              .current()\n              .then((result) => {\n                if (result === null) retry();\n                else finish(result.path);\n              })\n              .catch(() => retry());\n          }, timeout);\n        } else {\n          finish(null);\n        }\n      };\n\n      tryFetchThumbnail(0);\n    }\n\n    return () => {\n      _cancelled = true;\n      clearTimeout(_timeout);\n    };\n  }, [state.thumbnail]);\n\n  return state;\n};\n\nconst styles = createStyleSheet({\n  playIcon: {\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAAoBC,UAAU,QAAmB,cAAc;AAE/D,SAASC,OAAO,QAAQ,uBAAuB;AAE/C,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,GAAG,MAAM,QAAQ;AACxB,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,oBAAoB,MAAM,yBAAyB;AAY1D,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAAEC,6BAA6B;EAAEC,KAAK;EAAEC,MAAM;EAAEC,WAAW;EAAEC,QAAQ,GAAG;AAAU,CAAC,KAAK;EACrH,MAAM;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAGX,aAAa,CAAC,CAAC;EAC3C,MAAM;IAAEY,SAAS;IAAEC;EAAQ,CAAC,GAAGC,QAAQ,CAAC,YAAY;IAClD,IAAIhB,OAAO,CAACS,MAAM,IAAIC,WAAW,CAAC,EAAE,OAAO;MAAEO,IAAI,EAAER,MAAM,IAAIC;IAAY,CAAC;IAC1E,OAAOH,6BAA6B,CAACE,MAAM,IAAIC,WAAW,CAAC;EAC7D,CAAC,CAAC;EAEF,oBACEf,KAAA,CAAAuB,aAAA,CAACf,GAAG;IAACK,KAAK,EAAEA;EAAM,GACfO,OAAO,gBACNpB,KAAA,CAAAuB,aAAA,CAACf,GAAG;IACFK,KAAK,EAAET,UAAU,CAACoB,YAAa;IAC/BC,eAAe,EAAEP,MAAM,CAAC;MAAEQ,IAAI,EAAET,OAAO,CAACU,aAAa;MAAEC,KAAK,EAAEX,OAAO,CAACY;IAAc,CAAC;EAAE,CACxF,CAAC,gBAEF7B,KAAA,CAAAuB,aAAA,CAACb,oBAAoB;IAACI,MAAM,EAAE;MAAEgB,GAAG,EAAEX,SAAS,IAAI;IAAgB,CAAE;IAACN,KAAK,EAAET,UAAU,CAACoB;EAAa,CAAE,CACvG,EAEA,CAACJ,OAAO,IAAID,SAAS,KAAK,IAAI,KAAKH,QAAQ,GAAG,CAAC,iBAC9ChB,KAAA,CAAAuB,aAAA,CAACf,GAAG;IAACK,KAAK,EAAET,UAAU,CAACoB,YAAa;IAACO,UAAU,EAAE,QAAS;IAACC,cAAc,EAAE;EAAS,gBAClFhC,KAAA,CAAAuB,aAAA,CAACd,IAAI;IACHwB,IAAI,EAAE,MAAO;IACbC,IAAI,EAAElB,QAAS;IACfmB,KAAK,EAAElB,OAAO,CAACmB,mBAAoB;IACnCC,cAAc,EAAE,CAACC,MAAM,CAACC,QAAQ,EAAE;MAAEd,eAAe,EAAER,OAAO,CAACuB;IAAmB,CAAC;EAAE,CACpF,CACE,CAEJ,CAAC;AAEV,CAAC;AAED,MAAMnB,QAAQ,GAAGA,CAACoB,KAA6C,EAAEC,UAAU,GAAG,CAAC,KAAK;EAClF,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGzC,QAAQ,CAAC;IAAEgB,SAAS,EAAE,IAAqB;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC;EACvF,MAAMyB,aAAa,GAAG3C,MAAM,CAAC,CAAC,CAAC;EAC/B,MAAM4C,cAAc,GAAG5C,MAAM,CAACuC,KAAK,CAAC;EACpCK,cAAc,CAACC,OAAO,GAAGN,KAAK;EAE9BxC,SAAS,CAAC,MAAM;IACd,IAAI+C,QAAwB;IAC5B,IAAIC,UAAU,GAAG,KAAK;IAEtB,IAAI,CAACN,KAAK,CAACxB,SAAS,EAAE;MACpB,MAAM+B,iBAAiB,GAAIC,OAAe,IAAK;QAC7C,MAAMC,KAAK,GAAGA,CAAA,KAAM;UAClBP,aAAa,CAACE,OAAO,EAAE;UACvBG,iBAAiB,CAACC,OAAO,GAAG,IAAI,CAAC;QACnC,CAAC;QAED,MAAME,MAAM,GAAI/B,IAAmB,IAAK;UACtC,IAAI,CAAC2B,UAAU,EAAEL,QAAQ,CAAC;YAAExB,OAAO,EAAE,KAAK;YAAED,SAAS,EAAEG;UAAK,CAAC,CAAC;QAChE,CAAC;QAED,IAAIuB,aAAa,CAACE,OAAO,GAAGL,UAAU,EAAE;UACtCM,QAAQ,GAAGM,UAAU,CAAC,MAAM;YAC1BR,cAAc,CACXC,OAAO,CAAC,CAAC,CACTQ,IAAI,CAAEC,MAAM,IAAK;cAChB,IAAIA,MAAM,KAAK,IAAI,EAAEJ,KAAK,CAAC,CAAC,CAAC,KACxBC,MAAM,CAACG,MAAM,CAAClC,IAAI,CAAC;YAC1B,CAAC,CAAC,CACDmC,KAAK,CAAC,MAAML,KAAK,CAAC,CAAC,CAAC;UACzB,CAAC,EAAED,OAAO,CAAC;QACb,CAAC,MAAM;UACLE,MAAM,CAAC,IAAI,CAAC;QACd;MACF,CAAC;MAEDH,iBAAiB,CAAC,CAAC,CAAC;IACtB;IAEA,OAAO,MAAM;MACXD,UAAU,GAAG,IAAI;MACjBS,YAAY,CAACV,QAAQ,CAAC;IACxB,CAAC;EACH,CAAC,EAAE,CAACL,KAAK,CAACxB,SAAS,CAAC,CAAC;EAErB,OAAOwB,KAAK;AACd,CAAC;AAED,MAAML,MAAM,GAAGhC,gBAAgB,CAAC;EAC9BiC,QAAQ,EAAE;IACRoB,OAAO,EAAE,EAAE;IACXC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC","ignoreList":[]}