@sendbird/uikit-react-native-foundation 1.1.1 → 2.0.0-rc.0

package/lib/module/ui/Placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","conditionChaining","createStyleSheet","useUIKitTheme","Button","Icon","LoadingSpinner","Text","Placeholder","icon","loading","message","errorRetryLabel","onPressRetry","colors","styles","containerLoading","containerError","container","ui","placeholder","default","none","highlight","content","Boolean","width","height","alignItems","justifyContent"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport LoadingSpinner from '../LoadingSpinner';\nimport Text from '../Text';\n\ntype Props = {\n  loading?: boolean;\n\n  icon: keyof typeof Icon.Assets;\n  message?: string;\n  errorRetryLabel?: string;\n  onPressRetry?: () => void;\n};\n\nconst Placeholder = ({ icon, loading = false, message = '', errorRetryLabel, onPressRetry }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container\n  return (\n    <View\n      style={conditionChaining(\n        [loading, errorRetryLabel],\n        [styles.containerLoading, styles.containerError, styles.container],\n      )}\n    >\n      {conditionChaining(\n        [loading],\n        [\n          <LoadingSpinner size={64} color={colors.ui.placeholder.default.none.highlight} />,\n          <Icon icon={icon} size={64} color={colors.ui.placeholder.default.none.content} />,\n        ],\n      )}\n      {Boolean(message) && !loading && (\n        <Text body3 color={colors.ui.placeholder.default.none.content}>\n          {message}\n        </Text>\n      )}\n      {Boolean(errorRetryLabel) && !loading && (\n        <Button\n          variant={'text'}\n          onPress={onPressRetry}\n          contentColor={colors.ui.placeholder.default.none.highlight}\n          icon={'refresh'}\n        >\n          {errorRetryLabel}\n        </Button>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerError: {\n    width: 200,\n    height: 148,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerLoading: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default Placeholder;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,iBAAT,QAAkC,uBAAlC;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AAWA,MAAMC,WAAW,GAAG,QAAmF;EAAA,IAAlF;IAAEC,IAAF;IAAQC,OAAO,GAAG,KAAlB;IAAyBC,OAAO,GAAG,EAAnC;IAAuCC,eAAvC;IAAwDC;EAAxD,CAAkF;EACrG,MAAM;IAAEC;EAAF,IAAaX,aAAa,EAAhC,CADqG,CAGrG;;EACA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAEF,iBAAiB,CACtB,CAACS,OAAD,EAAUE,eAAV,CADsB,EAEtB,CAACG,MAAM,CAACC,gBAAR,EAA0BD,MAAM,CAACE,cAAjC,EAAiDF,MAAM,CAACG,SAAxD,CAFsB;EAD1B,GAMGjB,iBAAiB,CAChB,CAACS,OAAD,CADgB,EAEhB,cACE,oBAAC,cAAD;IAAgB,IAAI,EAAE,EAAtB;IAA0B,KAAK,EAAEI,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCC;EAApE,EADF,eAEE,oBAAC,IAAD;IAAM,IAAI,EAAEd,IAAZ;IAAkB,IAAI,EAAE,EAAxB;IAA4B,KAAK,EAAEK,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCE;EAAtE,EAFF,CAFgB,CANpB,EAaGC,OAAO,CAACd,OAAD,CAAP,IAAoB,CAACD,OAArB,iBACC,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEI,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCE;EAAtD,GACGb,OADH,CAdJ,EAkBGc,OAAO,CAACb,eAAD,CAAP,IAA4B,CAACF,OAA7B,iBACC,oBAAC,MAAD;IACE,OAAO,EAAE,MADX;IAEE,OAAO,EAAEG,YAFX;IAGE,YAAY,EAAEC,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCC,SAHnD;IAIE,IAAI,EAAE;EAJR,GAMGX,eANH,CAnBJ,CADF;AA+BD,CAnCD;;AAqCA,MAAMG,MAAM,GAAGb,gBAAgB,CAAC;EAC9BgB,SAAS,EAAE;IACTQ,KAAK,EAAE,GADE;IAETC,MAAM,EAAE,GAFC;IAGTC,UAAU,EAAE,QAHH;IAITC,cAAc,EAAE;EAJP,CADmB;EAO9BZ,cAAc,EAAE;IACdS,KAAK,EAAE,GADO;IAEdC,MAAM,EAAE,GAFM;IAGdC,UAAU,EAAE,QAHE;IAIdC,cAAc,EAAE;EAJF,CAPc;EAa9Bb,gBAAgB,EAAE;IAChBU,KAAK,EAAE,GADS;IAEhBC,MAAM,EAAE,GAFQ;IAGhBC,UAAU,EAAE,QAHI;IAIhBC,cAAc,EAAE;EAJA;AAbY,CAAD,CAA/B;AAqBA,eAAerB,WAAf"}
+{"version":3,"names":["React","View","conditionChaining","Icon","Text","createStyleSheet","useUIKitTheme","Button","LoadingSpinner","Placeholder","icon","loading","message","errorRetryLabel","onPressRetry","colors","styles","containerLoading","containerError","container","ui","placeholder","default","none","highlight","content","Boolean","width","height","alignItems","justifyContent"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport LoadingSpinner from '../LoadingSpinner';\n\ntype Props = {\n  loading?: boolean;\n\n  icon: keyof typeof Icon.Assets;\n  message?: string;\n  errorRetryLabel?: string;\n  onPressRetry?: () => void;\n};\n\nconst Placeholder = ({ icon, loading = false, message = '', errorRetryLabel, onPressRetry }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container\n  return (\n    <View\n      style={conditionChaining(\n        [loading, errorRetryLabel],\n        [styles.containerLoading, styles.containerError, styles.container],\n      )}\n    >\n      {conditionChaining(\n        [loading],\n        [\n          <LoadingSpinner size={64} color={colors.ui.placeholder.default.none.highlight} />,\n          <Icon icon={icon} size={64} color={colors.ui.placeholder.default.none.content} />,\n        ],\n      )}\n      {Boolean(message) && !loading && (\n        <Text body3 color={colors.ui.placeholder.default.none.content}>\n          {message}\n        </Text>\n      )}\n      {Boolean(errorRetryLabel) && !loading && (\n        <Button\n          variant={'text'}\n          onPress={onPressRetry}\n          contentColor={colors.ui.placeholder.default.none.highlight}\n          icon={'refresh'}\n        >\n          {errorRetryLabel}\n        </Button>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerError: {\n    width: 200,\n    height: 148,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerLoading: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default Placeholder;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,iBAAT,QAAkC,uBAAlC;AAEA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,cAAP,MAA2B,mBAA3B;;AAWA,MAAMC,WAAW,GAAG,QAAmF;EAAA,IAAlF;IAAEC,IAAF;IAAQC,OAAO,GAAG,KAAlB;IAAyBC,OAAO,GAAG,EAAnC;IAAuCC,eAAvC;IAAwDC;EAAxD,CAAkF;EACrG,MAAM;IAAEC;EAAF,IAAaT,aAAa,EAAhC,CADqG,CAGrG;;EACA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAEJ,iBAAiB,CACtB,CAACS,OAAD,EAAUE,eAAV,CADsB,EAEtB,CAACG,MAAM,CAACC,gBAAR,EAA0BD,MAAM,CAACE,cAAjC,EAAiDF,MAAM,CAACG,SAAxD,CAFsB;EAD1B,GAMGjB,iBAAiB,CAChB,CAACS,OAAD,CADgB,EAEhB,cACE,oBAAC,cAAD;IAAgB,IAAI,EAAE,EAAtB;IAA0B,KAAK,EAAEI,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCC;EAApE,EADF,eAEE,oBAAC,IAAD;IAAM,IAAI,EAAEd,IAAZ;IAAkB,IAAI,EAAE,EAAxB;IAA4B,KAAK,EAAEK,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCE;EAAtE,EAFF,CAFgB,CANpB,EAaGC,OAAO,CAACd,OAAD,CAAP,IAAoB,CAACD,OAArB,iBACC,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEI,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCE;EAAtD,GACGb,OADH,CAdJ,EAkBGc,OAAO,CAACb,eAAD,CAAP,IAA4B,CAACF,OAA7B,iBACC,oBAAC,MAAD;IACE,OAAO,EAAE,MADX;IAEE,OAAO,EAAEG,YAFX;IAGE,YAAY,EAAEC,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCC,SAHnD;IAIE,IAAI,EAAE;EAJR,GAMGX,eANH,CAnBJ,CADF;AA+BD,CAnCD;;AAqCA,MAAMG,MAAM,GAAGX,gBAAgB,CAAC;EAC9Bc,SAAS,EAAE;IACTQ,KAAK,EAAE,GADE;IAETC,MAAM,EAAE,GAFC;IAGTC,UAAU,EAAE,QAHH;IAITC,cAAc,EAAE;EAJP,CADmB;EAO9BZ,cAAc,EAAE;IACdS,KAAK,EAAE,GADO;IAEdC,MAAM,EAAE,GAFM;IAGdC,UAAU,EAAE,QAHE;IAIdC,cAAc,EAAE;EAJF,CAPc;EAa9Bb,gBAAgB,EAAE;IAChBU,KAAK,EAAE,GADS;IAEhBC,MAAM,EAAE,GAFQ;IAGhBC,UAAU,EAAE,QAHI;IAIhBC,cAAc,EAAE;EAJA;AAbY,CAAD,CAA/B;AAqBA,eAAerB,WAAf"}

package/lib/module/ui/Prompt/index.js

@@ -1,14 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Keyboard, Platform, View, useWindowDimensions } from 'react-native';
 import { NOOP } from '@sendbird/uikit-utils';
+import Modal from '../../components/Modal';
+import Text from '../../components/Text';
+import TextInput from '../../components/TextInput';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
 import DialogBox from '../Dialog/DialogBox';
-import Modal from '../Modal';
-import Text from '../Text';
-import TextInput from '../TextInput';
 
 const Prompt = _ref => {
   let {

package/lib/module/ui/Prompt/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Keyboard","Platform","View","useWindowDimensions","NOOP","createStyleSheet","useHeaderStyle","useUIKitTheme","Button","DialogBox","Modal","Text","TextInput","Prompt","onDismiss","visible","onHide","autoFocus","title","defaultValue","placeholder","onSubmit","onCancel","submitLabel","cancelLabel","statusBarTranslucent","colors","inputRef","width","height","buttons","text","onPress","setText","setTimeout","OS","current","blur","focus","alignItems","justifyContent","styles","container","Boolean","titleContainer","ui","dialog","default","none","flex","inputContainer","paddingHorizontal","paddingVertical","buttonContainer","map","index","button","highlight","dismiss","paddingTop","marginBottom","flexDirection","padding","marginLeft"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\nimport Modal from '../Modal';\nimport Text from '../Text';\nimport TextInput from '../TextInput';\n\nexport type PromptItem = {\n  title: string;\n  placeholder?: string;\n  defaultValue?: string;\n  onSubmit?: (text: string) => void;\n  submitLabel?: string;\n  onCancel?: () => void;\n  cancelLabel?: string;\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onDismiss?: () => void;\n  autoFocus?: boolean;\n} & PromptItem;\nconst Prompt = ({\n  onDismiss,\n  visible,\n  onHide,\n  autoFocus = true,\n  title,\n  defaultValue = '',\n  placeholder = 'Enter',\n  onSubmit = NOOP,\n  onCancel = NOOP,\n  submitLabel = 'Submit',\n  cancelLabel = 'Cancel',\n}: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const inputRef = useRef<RNTextInput>(null);\n  const { width, height } = useWindowDimensions();\n\n  const buttons = [\n    { text: cancelLabel, onPress: onCancel },\n    { text: submitLabel, onPress: () => onSubmit(text) },\n  ];\n\n  const [text, setText] = useState(defaultValue);\n\n  // FIXME: autoFocus trick with modal\n  // Android\n  // - InputProps.autoFocus is not trigger keyboard appearing.\n  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.\n  // iOS\n  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.\n  useEffect(() => {\n    if (autoFocus && visible) {\n      setTimeout(() => {\n        if (Platform.OS === 'android') inputRef.current?.blur();\n        inputRef.current?.focus();\n      }, 250);\n    }\n  }, [autoFocus, visible, `${width}-${height}`]);\n\n  return (\n    <Modal\n      enableKeyboardAvoid\n      disableBackgroundClose\n      onClose={onHide}\n      onDismiss={() => {\n        setText('');\n        onDismiss?.();\n      }}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n    >\n      <DialogBox style={styles.container}>\n        {Boolean(title) && (\n          <View style={styles.titleContainer}>\n            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>\n              {title}\n            </Text>\n          </View>\n        )}\n\n        <View style={styles.inputContainer}>\n          <TextInput\n            autoFocus={autoFocus && Platform.OS === 'android'}\n            ref={inputRef}\n            placeholder={placeholder}\n            variant={'underline'}\n            value={text}\n            onChangeText={setText}\n            style={{ paddingHorizontal: 0, paddingVertical: 10 }}\n          />\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {buttons.map(({ text, onPress }, index) => {\n            return (\n              <Button\n                key={text + index}\n                variant={'text'}\n                style={styles.button}\n                contentColor={colors.ui.dialog.default.none.highlight}\n                onPress={() => {\n                  Keyboard.dismiss();\n                  try {\n                    onPress?.();\n                  } finally {\n                    onHide();\n                  }\n                }}\n              >\n                {text}\n              </Button>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 8,\n  },\n  titleContainer: {\n    marginBottom: 12,\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainer: {\n    paddingHorizontal: 24,\n    marginBottom: 12,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    padding: 12,\n  },\n  button: {\n    marginLeft: 8,\n  },\n});\n\nexport default Prompt;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAASC,QAAT,EAAmBC,QAAnB,EAAuDC,IAAvD,EAA6DC,mBAA7D,QAAwF,cAAxF;AAEA,SAASC,IAAT,QAAqB,uBAArB;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,SAAP,MAAsB,qBAAtB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,SAAP,MAAsB,cAAtB;;AAkBA,MAAMC,MAAM,GAAG,QAYF;EAAA,IAZG;IACdC,SADc;IAEdC,OAFc;IAGdC,MAHc;IAIdC,SAAS,GAAG,IAJE;IAKdC,KALc;IAMdC,YAAY,GAAG,EAND;IAOdC,WAAW,GAAG,OAPA;IAQdC,QAAQ,GAAGjB,IARG;IASdkB,QAAQ,GAAGlB,IATG;IAUdmB,WAAW,GAAG,QAVA;IAWdC,WAAW,GAAG;EAXA,CAYH;EACX,MAAM;IAAEC;EAAF,IAA2BnB,cAAc,EAA/C;EACA,MAAM;IAAEoB;EAAF,IAAanB,aAAa,EAAhC;EACA,MAAMoB,QAAQ,GAAG7B,MAAM,CAAc,IAAd,CAAvB;EACA,MAAM;IAAE8B,KAAF;IAASC;EAAT,IAAoB1B,mBAAmB,EAA7C;EAEA,MAAM2B,OAAO,GAAG,CACd;IAAEC,IAAI,EAAEP,WAAR;IAAqBQ,OAAO,EAAEV;EAA9B,CADc,EAEd;IAAES,IAAI,EAAER,WAAR;IAAqBS,OAAO,EAAE,MAAMX,QAAQ,CAACU,IAAD;EAA5C,CAFc,CAAhB;EAKA,MAAM,CAACA,IAAD,EAAOE,OAAP,IAAkBlC,QAAQ,CAACoB,YAAD,CAAhC,CAXW,CAaX;EACA;EACA;EACA;EACA;EACA;;EACAtB,SAAS,CAAC,MAAM;IACd,IAAIoB,SAAS,IAAIF,OAAjB,EAA0B;MACxBmB,UAAU,CAAC,MAAM;QAAA;;QACf,IAAIjC,QAAQ,CAACkC,EAAT,KAAgB,SAApB,EAA+B,qBAAAR,QAAQ,CAACS,OAAT,wEAAkBC,IAAlB;QAC/B,sBAAAV,QAAQ,CAACS,OAAT,0EAAkBE,KAAlB;MACD,CAHS,EAGP,GAHO,CAAV;IAID;EACF,CAPQ,EAON,CAACrB,SAAD,EAAYF,OAAZ,EAAsB,GAAEa,KAAM,IAAGC,MAAO,EAAxC,CAPM,CAAT;EASA,oBACE,oBAAC,KAAD;IACE,mBAAmB,MADrB;IAEE,sBAAsB,MAFxB;IAGE,OAAO,EAAEb,MAHX;IAIE,SAAS,EAAE,MAAM;MACfiB,OAAO,CAAC,EAAD,CAAP;MACAnB,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS;IACV,CAPH;IAQE,oBAAoB,EAAEW,oBARxB;IASE,OAAO,EAAEV,OATX;IAUE,eAAe,EAAE;MAAEwB,UAAU,EAAE,QAAd;MAAwBC,cAAc,EAAE;IAAxC;EAVnB,gBAYE,oBAAC,SAAD;IAAW,KAAK,EAAEC,MAAM,CAACC;EAAzB,GACGC,OAAO,CAACzB,KAAD,CAAP,iBACC,oBAAC,IAAD;IAAM,KAAK,EAAEuB,MAAM,CAACG;EAApB,gBACE,oBAAC,IAAD;IAAM,EAAE,MAAR;IAAS,KAAK,EAAElB,MAAM,CAACmB,EAAP,CAAUC,MAAV,CAAiBC,OAAjB,CAAyBC,IAAzB,CAA8BjB,IAA9C;IAAoD,aAAa,EAAE,CAAnE;IAAsE,KAAK,EAAE;MAAEkB,IAAI,EAAE;IAAR;EAA7E,GACG/B,KADH,CADF,CAFJ,eASE,oBAAC,IAAD;IAAM,KAAK,EAAEuB,MAAM,CAACS;EAApB,gBACE,oBAAC,SAAD;IACE,SAAS,EAAEjC,SAAS,IAAIhB,QAAQ,CAACkC,EAAT,KAAgB,SAD1C;IAEE,GAAG,EAAER,QAFP;IAGE,WAAW,EAAEP,WAHf;IAIE,OAAO,EAAE,WAJX;IAKE,KAAK,EAAEW,IALT;IAME,YAAY,EAAEE,OANhB;IAOE,KAAK,EAAE;MAAEkB,iBAAiB,EAAE,CAArB;MAAwBC,eAAe,EAAE;IAAzC;EAPT,EADF,CATF,eAqBE,oBAAC,IAAD;IAAM,KAAK,EAAEX,MAAM,CAACY;EAApB,GACGvB,OAAO,CAACwB,GAAR,CAAY,QAAoBC,KAApB,KAA8B;IAAA,IAA7B;MAAExB,IAAF;MAAQC;IAAR,CAA6B;IACzC,oBACE,oBAAC,MAAD;MACE,GAAG,EAAED,IAAI,GAAGwB,KADd;MAEE,OAAO,EAAE,MAFX;MAGE,KAAK,EAAEd,MAAM,CAACe,MAHhB;MAIE,YAAY,EAAE9B,MAAM,CAACmB,EAAP,CAAUC,MAAV,CAAiBC,OAAjB,CAAyBC,IAAzB,CAA8BS,SAJ9C;MAKE,OAAO,EAAE,MAAM;QACbzD,QAAQ,CAAC0D,OAAT;;QACA,IAAI;UACF1B,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;QACR,CAFD,SAEU;UACRhB,MAAM;QACP;MACF;IAZH,GAcGe,IAdH,CADF;EAkBD,CAnBA,CADH,CArBF,CAZF,CADF;AA2DD,CAnGD;;AAqGA,MAAMU,MAAM,GAAGpC,gBAAgB,CAAC;EAC9BqC,SAAS,EAAE;IACTiB,UAAU,EAAE;EADH,CADmB;EAI9Bf,cAAc,EAAE;IACdgB,YAAY,EAAE,EADA;IAEdR,eAAe,EAAE,EAFH;IAGdD,iBAAiB,EAAE,EAHL;IAIdU,aAAa,EAAE,KAJD;IAKdtB,UAAU,EAAE;EALE,CAJc;EAW9BW,cAAc,EAAE;IACdC,iBAAiB,EAAE,EADL;IAEdS,YAAY,EAAE;EAFA,CAXc;EAe9BP,eAAe,EAAE;IACfQ,aAAa,EAAE,KADA;IAEftB,UAAU,EAAE,QAFG;IAGfC,cAAc,EAAE,UAHD;IAIfsB,OAAO,EAAE;EAJM,CAfa;EAqB9BN,MAAM,EAAE;IACNO,UAAU,EAAE;EADN;AArBsB,CAAD,CAA/B;AA0BA,eAAelD,MAAf"}
+{"version":3,"names":["React","useEffect","useRef","useState","Keyboard","Platform","View","useWindowDimensions","NOOP","Modal","Text","TextInput","createStyleSheet","useHeaderStyle","useUIKitTheme","Button","DialogBox","Prompt","onDismiss","visible","onHide","autoFocus","title","defaultValue","placeholder","onSubmit","onCancel","submitLabel","cancelLabel","statusBarTranslucent","colors","inputRef","width","height","buttons","text","onPress","setText","setTimeout","OS","current","blur","focus","alignItems","justifyContent","styles","container","Boolean","titleContainer","ui","dialog","default","none","flex","inputContainer","paddingHorizontal","paddingVertical","buttonContainer","map","index","button","highlight","dismiss","paddingTop","marginBottom","flexDirection","padding","marginLeft"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport TextInput from '../../components/TextInput';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\n\nexport type PromptItem = {\n  title: string;\n  placeholder?: string;\n  defaultValue?: string;\n  onSubmit?: (text: string) => void;\n  submitLabel?: string;\n  onCancel?: () => void;\n  cancelLabel?: string;\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onDismiss?: () => void;\n  autoFocus?: boolean;\n} & PromptItem;\nconst Prompt = ({\n  onDismiss,\n  visible,\n  onHide,\n  autoFocus = true,\n  title,\n  defaultValue = '',\n  placeholder = 'Enter',\n  onSubmit = NOOP,\n  onCancel = NOOP,\n  submitLabel = 'Submit',\n  cancelLabel = 'Cancel',\n}: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const inputRef = useRef<RNTextInput>(null);\n  const { width, height } = useWindowDimensions();\n\n  const buttons = [\n    { text: cancelLabel, onPress: onCancel },\n    { text: submitLabel, onPress: () => onSubmit(text) },\n  ];\n\n  const [text, setText] = useState(defaultValue);\n\n  // FIXME: autoFocus trick with modal\n  // Android\n  // - InputProps.autoFocus is not trigger keyboard appearing.\n  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.\n  // iOS\n  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.\n  useEffect(() => {\n    if (autoFocus && visible) {\n      setTimeout(() => {\n        if (Platform.OS === 'android') inputRef.current?.blur();\n        inputRef.current?.focus();\n      }, 250);\n    }\n  }, [autoFocus, visible, `${width}-${height}`]);\n\n  return (\n    <Modal\n      enableKeyboardAvoid\n      disableBackgroundClose\n      onClose={onHide}\n      onDismiss={() => {\n        setText('');\n        onDismiss?.();\n      }}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n    >\n      <DialogBox style={styles.container}>\n        {Boolean(title) && (\n          <View style={styles.titleContainer}>\n            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>\n              {title}\n            </Text>\n          </View>\n        )}\n\n        <View style={styles.inputContainer}>\n          <TextInput\n            autoFocus={autoFocus && Platform.OS === 'android'}\n            ref={inputRef}\n            placeholder={placeholder}\n            variant={'underline'}\n            value={text}\n            onChangeText={setText}\n            style={{ paddingHorizontal: 0, paddingVertical: 10 }}\n          />\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {buttons.map(({ text, onPress }, index) => {\n            return (\n              <Button\n                key={text + index}\n                variant={'text'}\n                style={styles.button}\n                contentColor={colors.ui.dialog.default.none.highlight}\n                onPress={() => {\n                  Keyboard.dismiss();\n                  try {\n                    onPress?.();\n                  } finally {\n                    onHide();\n                  }\n                }}\n              >\n                {text}\n              </Button>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 8,\n  },\n  titleContainer: {\n    marginBottom: 12,\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainer: {\n    paddingHorizontal: 24,\n    marginBottom: 12,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    padding: 12,\n  },\n  button: {\n    marginLeft: 8,\n  },\n});\n\nexport default Prompt;\n"],"mappings":"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"}

package/lib/module/ui/Toast/index.js

@@ -1,10 +1,10 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
-import Text from '../Text';
 const ToastContext = /*#__PURE__*/createContext(null);
 
 const useOpacity = () => {

package/lib/module/ui/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useCallback","useContext","useEffect","useMemo","useRef","useState","Animated","useSafeAreaInsets","createStyleSheet","useUIKitTheme","Icon","Text","ToastContext","useOpacity","opacity","Value","current","transition","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","visible","type","children","top","bottom","colors","select","palette","color","dark","error300","light","error200","secondary300","secondary200","backgroundColor","styles","toast","icon","onBackgroundReverse01","text","VISIBLE_MS","ToastProvider","dismissTimeout","state","setState","hideTimeout","setTimeout","prev","clearTimeout","toastPosition","useToast","context","Error","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginRight","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = useCallback(\n    (value: number) => Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start(),\n    [],\n  );\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n        {state.text}\n      </Toast>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginRight: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,aAAhB,EAA+BC,WAA/B,EAA4CC,UAA5C,EAAwDC,SAAxD,EAAmEC,OAAnE,EAA4EC,MAA5E,EAAoFC,QAApF,QAAoG,OAApG;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,IAAP,MAAiB,SAAjB;AAKA,MAAMC,YAAY,gBAAGb,aAAa,CAAiB,IAAjB,CAAlC;;AAUA,MAAMc,UAAU,GAAG,MAAM;EACvB,MAAMC,OAAO,GAAGV,MAAM,CAAC,IAAIE,QAAQ,CAACS,KAAb,CAAmB,CAAnB,CAAD,CAAN,CAA8BC,OAA9C;EACA,MAAMC,UAAU,GAAGjB,WAAW,CAC3BkB,KAAD,IAAmBZ,QAAQ,CAACa,MAAT,CAAgBL,OAAhB,EAAyB;IAAEM,OAAO,EAAEF,KAAX;IAAkBG,QAAQ,EAAE,GAA5B;IAAiCC,eAAe,EAAE;EAAlD,CAAzB,EAAmFC,KAAnF,EADS,EAE5B,EAF4B,CAA9B;EAIA,OAAO;IACLT,OADK;IAELU,IAAI,EAAE,MAAMP,UAAU,CAAC,CAAD,CAFjB;IAGLQ,IAAI,EAAE,MAAMR,UAAU,CAAC,CAAD;EAHjB,CAAP;AAKD,CAXD;;AAaA,MAAMS,KAAK,GAAG,QAAqD;EAAA,IAApD;IAAEC,OAAF;IAAWC,IAAX;IAAiBC,QAAjB;IAA2BC,GAA3B;IAAgCC;EAAhC,CAAoD;EACjE,MAAM;IAAEC,MAAF;IAAUC,MAAV;IAAkBC;EAAlB,IAA8BzB,aAAa,EAAjD;EACA,MAAM;IAAEK,OAAF;IAAWU,IAAX;IAAiBC;EAAjB,IAA0BZ,UAAU,EAA1C;EAEA,MAAMsB,KAAK,GAAGhC,OAAO,CAAC,MAAM;IAC1B,IAAIyB,IAAI,KAAK,OAAb,EAAsB;MACpB,OAAOK,MAAM,CAAC;QAAEG,IAAI,EAAEF,OAAO,CAACG,QAAhB;QAA0BC,KAAK,EAAEJ,OAAO,CAACK;MAAzC,CAAD,CAAb;IACD;;IACD,IAAIX,IAAI,KAAK,SAAb,EAAwB;MACtB,OAAOK,MAAM,CAAC;QAAEG,IAAI,EAAEF,OAAO,CAACM,YAAhB;QAA8BF,KAAK,EAAEJ,OAAO,CAACO;MAA7C,CAAD,CAAb;IACD;;IACD,OAAO,aAAP;EACD,CARoB,EAQlB,CAACb,IAAD,EAAOK,MAAP,CARkB,CAArB;EAUA,MAAMS,eAAe,GAAGvC,OAAO,CAAC,MAAM;IACpC,OAAO8B,MAAM,CAAC;MAAEK,KAAK,EAAE,kBAAT;MAA6BF,IAAI,EAAE;IAAnC,CAAD,CAAb;EACD,CAF8B,EAE5B,CAACH,MAAD,CAF4B,CAA/B;EAIA/B,SAAS,CAAC,MAAM;IACdyB,OAAO,GAAGH,IAAI,EAAP,GAAYC,IAAI,EAAvB;EACD,CAFQ,EAEN,CAACE,OAAD,CAFM,CAAT;EAIA,oBACE,oBAAC,QAAD,CAAU,IAAV;IAAe,aAAa,EAAE,MAA9B;IAAsC,KAAK,EAAE,CAACgB,MAAM,CAACC,KAAR,EAAe;MAAE9B,OAAF;MAAWgB,GAAX;MAAgBC,MAAhB;MAAwBW;IAAxB,CAAf;EAA7C,GACGd,IAAI,KAAK,QAAT,iBACC,oBAAC,IAAD;IAAM,IAAI,EAAEA,IAAI,KAAK,SAAT,GAAqB,MAArB,GAA8B,OAA1C;IAAmD,KAAK,EAAEO,KAA1D;IAAiE,cAAc,EAAEQ,MAAM,CAACE;EAAxF,EAFJ,eAIE,oBAAC,IAAD;IAAM,KAAK,EAAEb,MAAM,CAACc,qBAApB;IAA2C,KAAK,MAAhD;IAAiD,aAAa,EAAE,CAAhE;IAAmE,KAAK,EAAEH,MAAM,CAACI;EAAjF,GACGlB,QADH,CAJF,CADF;AAUD,CAhCD;;AAkCA,MAAMmB,UAAU,GAAG,IAAnB;AACA,OAAO,MAAMC,aAAa,GAAG,SAG+B;EAAA,IAH9B;IAC5BpB,QAD4B;IAE5BqB,cAAc,GAAGF;EAFW,CAG8B;EAC1D,MAAM,CAACG,KAAD,EAAQC,QAAR,IAAoB/C,QAAQ,CAAC;IAAEsB,OAAO,EAAE,KAAX;IAAkBC,IAAI,EAAE,OAAxB;IAA8CmB,IAAI,EAAE;EAApD,CAAD,CAAlC;EACA,MAAM;IAAEhB;EAAF,IAAaxB,iBAAiB,EAApC;EAEAL,SAAS,CAAC,MAAM;IACd,IAAI,CAACiD,KAAK,CAACxB,OAAX,EAAoB;IAEpB,MAAM0B,WAAW,GAAGC,UAAU,CAAC,MAAM;MACnCF,QAAQ,CAAEG,IAAD,KAAW,EAAE,GAAGA,IAAL;QAAW5B,OAAO,EAAE;MAApB,CAAX,CAAD,CAAR;IACD,CAF6B,EAE3BuB,cAF2B,CAA9B;IAGA,OAAO,MAAMM,YAAY,CAACH,WAAD,CAAzB;EACD,CAPQ,CAAT;EASA,oBACE,oBAAC,YAAD,CAAc,QAAd;IAAuB,KAAK,EAAE;MAAE7B,IAAI,EAAE,UAACuB,IAAD;QAAA,IAAOnB,IAAP,uEAAc,QAAd;QAAA,OAA2BmB,IAAI,IAAIK,QAAQ,CAAC;UAAEL,IAAF;UAAQnB,IAAR;UAAcD,OAAO,EAAE;QAAvB,CAAD,CAA3C;MAAA;IAAR;EAA9B,GACGE,QADH,eAEE,oBAAC,KAAD;IAAO,IAAI,EAAEsB,KAAK,CAACvB,IAAnB;IAAyB,OAAO,EAAEuB,KAAK,CAACxB,OAAxC;IAAiD,MAAM,EAAEI,MAAM,GAAGY,MAAM,CAACc,aAAP,CAAqB1B;EAAvF,GACGoB,KAAK,CAACJ,IADT,CAFF,CADF;AAQD,CAxBM;AA0BP,OAAO,MAAMW,QAAQ,GAAG,MAAM;EAC5B,MAAMC,OAAO,GAAG1D,UAAU,CAACW,YAAD,CAA1B;EACA,IAAI,CAAC+C,OAAL,EAAc,MAAM,IAAIC,KAAJ,CAAU,gEAAV,CAAN;EACd,OAAOD,OAAP;AACD,CAJM;AAMP,MAAMhB,MAAM,GAAGnC,gBAAgB,CAAC;EAC9BoC,KAAK,EAAE;IACLiB,QAAQ,EAAE,UADL;IAELC,MAAM,EAAE,EAFH;IAGLC,iBAAiB,EAAE,EAHd;IAILC,cAAc,EAAE,QAJX;IAKLC,UAAU,EAAE,QALP;IAMLC,SAAS,EAAE,QANN;IAOLC,YAAY,EAAE,EAPT;IAQLC,aAAa,EAAE;EARV,CADuB;EAW9BvB,IAAI,EAAE;IACJwB,WAAW,EAAE;EADT,CAXwB;EAc9BtB,IAAI,EAAE;IACJuB,QAAQ,EAAE,GADN;IAEJP,iBAAiB,EAAE;EAFf,CAdwB;EAkB9BN,aAAa,EAAE;IACb1B,MAAM,EAAE;EADK;AAlBe,CAAD,CAA/B;AAuBA,eAAeL,KAAf"}
+{"version":3,"names":["React","createContext","useCallback","useContext","useEffect","useMemo","useRef","useState","Animated","useSafeAreaInsets","Icon","Text","createStyleSheet","useUIKitTheme","ToastContext","useOpacity","opacity","Value","current","transition","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","visible","type","children","top","bottom","colors","select","palette","color","dark","error300","light","error200","secondary300","secondary200","backgroundColor","styles","toast","icon","onBackgroundReverse01","text","VISIBLE_MS","ToastProvider","dismissTimeout","state","setState","hideTimeout","setTimeout","prev","clearTimeout","toastPosition","useToast","context","Error","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginRight","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = useCallback(\n    (value: number) => Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start(),\n    [],\n  );\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n        {state.text}\n      </Toast>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginRight: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"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"}

package/lib/typescript/src/index.d.ts

@@ -1,7 +1,14 @@
 /** Assets **/
 export { default as IconAssets } from './assets/icon';
 /** Component **/
+export { default as Divider } from './components/Divider';
+export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
+export { default as Modal } from './components/Modal';
+export { default as Switch } from './components/Switch';
+export { default as Text } from './components/Text';
+export { default as TextInput } from './components/TextInput';
+export { default as URLParsedText } from './components/URLParsedText';
 /** UI **/
 export { default as ActionMenu, ActionMenuItem } from './ui/ActionMenu';
 export { default as Alert } from './ui/Alert';
@@ -11,20 +18,13 @@ export { default as BottomSheet, BottomSheetItem } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
-export { default as Divider } from './ui/Divider';
 export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
-export { default as Icon } from './ui/Icon';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
-export { default as Modal } from './ui/Modal';
 export { default as Placeholder } from './ui/Placeholder';
 export { default as Prompt } from './ui/Prompt';
-export { default as Switch } from './ui/Switch';
-export { default as Text } from './ui/Text';
-export { default as TextInput } from './ui/TextInput';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
-export { default as URLParsedText } from './ui/URLParsedText';
 /** Styles **/
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';
 export { default as createScaleFactor } from './styles/createScaleFactor';

package/lib/typescript/src/ui/Avatar/AvatarIcon.d.ts

@@ -1,5 +1,5 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = {
     icon: keyof typeof Icon.Assets;
     size?: number;

package/lib/typescript/src/ui/BottomSheet/index.d.ts

@@ -1,4 +1,4 @@
-import type Icon from '../Icon';
+import type Icon from '../../components/Icon';
 export declare type BottomSheetItem = {
     sheetItems: {
         icon?: keyof typeof Icon.Assets;

package/lib/typescript/src/ui/Button/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
     icon?: keyof typeof Icon.Assets;

package/lib/typescript/src/ui/Dialog/DialogSheet.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
 }>;

package/lib/typescript/src/ui/GroupChannelPreview/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = {
     customCover?: React.ReactElement;
     coverUrl: string;

package/lib/typescript/src/ui/Header/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacityProps } from 'react-native';
+import { TextProps } from '../../components/Text';
 import type { BaseHeaderProps } from '../../index';
-import { TextProps } from '../Text';
 declare type HeaderElement = string | React.ReactElement | null;
 declare type HeaderProps = BaseHeaderProps<{
     title?: HeaderElement;

package/lib/typescript/src/ui/MenuBar/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 export declare type MenuBarProps = {
     variant?: 'default' | 'contained';
     onPress: () => void;

package/lib/typescript/src/ui/Placeholder/index.d.ts

@@ -1,4 +1,4 @@
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = {
     loading?: boolean;
     icon: keyof typeof Icon.Assets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "1.1.1",
+  "version": "2.0.0-rc.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -38,13 +38,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "1.1.1"
+    "@sendbird/uikit-utils": "2.0.0-rc.0"
   },
   "devDependencies": {
     "@types/react": "*",
     "@types/react-native": "*",
     "react": "17.0.2",
-    "react-native": "0.66.4",
+    "react-native": "0.67.4",
     "react-native-builder-bob": "^0.18.0",
     "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2",
@@ -80,5 +80,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "7b0384ecf1025f70e8a19f0490231273893f3f56"
+  "gitHead": "394d5e3e259086c2226a24406462f119d4af9860"
 }

package/src/index.ts

@@ -1,7 +1,15 @@
 /** Assets **/
 export { default as IconAssets } from './assets/icon';
+
 /** Component **/
+export { default as Divider } from './components/Divider';
+export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
+export { default as Modal } from './components/Modal';
+export { default as Switch } from './components/Switch';
+export { default as Text } from './components/Text';
+export { default as TextInput } from './components/TextInput';
+export { default as URLParsedText } from './components/URLParsedText';
 
 /** UI **/
 export { default as ActionMenu, ActionMenuItem } from './ui/ActionMenu';
@@ -12,20 +20,13 @@ export { default as BottomSheet, BottomSheetItem } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
-export { default as Divider } from './ui/Divider';
 export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
-export { default as Icon } from './ui/Icon';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
-export { default as Modal } from './ui/Modal';
 export { default as Placeholder } from './ui/Placeholder';
 export { default as Prompt } from './ui/Prompt';
-export { default as Switch } from './ui/Switch';
-export { default as Text } from './ui/Text';
-export { default as TextInput } from './ui/TextInput';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
-export { default as URLParsedText } from './ui/URLParsedText';
 
 /** Styles **/
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';

package/src/ui/ActionMenu/index.tsx

@@ -3,13 +3,13 @@ import { TouchableOpacity, View } from 'react-native';
 
 import { Logger } from '@sendbird/uikit-utils';
 
+import Modal from '../../components/Modal';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import DialogBox from '../Dialog/DialogBox';
 import LoadingSpinner from '../LoadingSpinner';
-import Modal from '../Modal';
-import Text from '../Text';
 
 export type ActionMenuItem = {
   title?: string;

package/src/ui/Alert/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { AlertButton, View } from 'react-native';
 
+import Modal from '../../components/Modal';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
 import DialogBox from '../Dialog/DialogBox';
-import Modal from '../Modal';
-import Text from '../Text';
 
 export type AlertItem = {
   title?: string;

package/src/ui/Avatar/AvatarIcon.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
+import Icon from '../../components/Icon';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
 
 type Props = {
   icon: keyof typeof Icon.Assets;

package/src/ui/Avatar/index.tsx

@@ -3,10 +3,10 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Icon from '../../components/Icon';
 import Image from '../../components/Image';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
 

package/src/ui/Badge/index.tsx

@@ -3,9 +3,9 @@ import { Platform, StyleProp, View, ViewStyle } from 'react-native';
 
 import { truncatedBadgeCount } from '@sendbird/uikit-utils';
 
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Text from '../Text';
 
 type Props = {
   count: number;

package/src/ui/BottomSheet/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { TouchableOpacity, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import type Icon from '../../components/Icon';
+import Modal from '../../components/Modal';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import DialogSheet from '../Dialog/DialogSheet';
-import type Icon from '../Icon';
-import Modal from '../Modal';
 
 export type BottomSheetItem = {
   sheetItems: {

package/src/ui/Button/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Pressable, StyleProp, ViewStyle } from 'react-native';
 
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
-import Text from '../Text';
 
 type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;

package/src/ui/ChannelFrozenBanner/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Text from '../Text';
 
 type Props = {
   style?: StyleProp<ViewStyle>;

package/src/ui/Dialog/DialogSheet.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
-import Text from '../Text';
 
 type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
@@ -64,6 +64,7 @@ const styles = createStyleSheet({
     marginLeft: 16,
   },
   sheetItemText: {
+    flex: 1,
     marginHorizontal: 24,
   },
 });

package/src/ui/GroupChannelPreview/index.tsx

@@ -3,12 +3,12 @@ import { View } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Icon from '../../components/Icon';
 import Image from '../../components/Image';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Badge from '../Badge';
-import Icon from '../Icon';
-import Text from '../Text';
 
 type Props = {
   customCover?: React.ReactElement;
@@ -107,8 +107,8 @@ const GroupChannelPreview = ({
           </View>
           <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
         </View>
+        <Separator color={color.default.none.separator} />
       </View>
-      <Separator color={color.default.none.separator} />
     </View>
   );
 };
@@ -121,11 +121,11 @@ const styles = createStyleSheet({
     height: 76,
     width: '100%',
     flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingTop: 10,
     alignItems: 'center',
+    justifyContent: 'center',
   },
   coverContainer: {
+    marginLeft: 16,
     marginRight: 16,
   },
   channelCover: {
@@ -135,6 +135,8 @@ const styles = createStyleSheet({
   },
   rightSection: {
     flex: 1,
+    paddingTop: 10,
+    paddingRight: 16,
   },
   rightTopSection: {
     flexDirection: 'row',
@@ -198,10 +200,10 @@ const styles = createStyleSheet({
   },
   separator: {
     position: 'absolute',
-    right: 0,
+    left: 0,
+    right: -16,
     bottom: 0,
     height: 1,
-    width: '84.5%',
   },
 });
 

package/src/ui/Header/index.tsx

@@ -4,11 +4,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Text, { TextProps } from '../../components/Text';
 import type { BaseHeaderProps } from '../../index';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Text, { TextProps } from '../Text';
 
 type HeaderElement = string | React.ReactElement | null;
 type HeaderProps = BaseHeaderProps<

package/src/ui/LoadingSpinner/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, StyleProp, ViewStyle } from 'react-native';
 
+import Icon from '../../components/Icon';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
 
 type Props = {
   size?: number;

package/src/ui/MenuBar/index.tsx

@@ -3,11 +3,11 @@ import { Pressable, View } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Divider from '../../components/Divider';
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Divider from '../Divider';
-import Icon from '../Icon';
-import Text from '../Text';
 
 export type MenuBarProps = {
   variant?: 'default' | 'contained';

package/src/ui/Placeholder/index.tsx

@@ -3,12 +3,12 @@ import { View } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
-import Icon from '../Icon';
 import LoadingSpinner from '../LoadingSpinner';
-import Text from '../Text';
 
 type Props = {
   loading?: boolean;