@sendbird/uikit-react-native-foundation 1.0.1 → 1.0.2

package/lib/commonjs/ui/Modal/index.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+/**
+ * Modal Open: Triggered by Modal.props.visible state changed to true
+ * - visible true -> modalVisible true -> animation start
+ *
+ * Modal Close: Triggered by Modal.props.onClose() call
+ * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false
+ * */
+const Modal = _ref => {
+  let {
+    children,
+    onClose,
+    backgroundStyle,
+    onDismiss,
+    type = 'fade',
+    visible = false,
+    disableBackgroundClose = false,
+    enableKeyboardAvoid = false,
+    statusBarTranslucent,
+    ...props
+  } = _ref;
+  const {
+    palette
+  } = (0, _useUIKitTheme.default)();
+  const {
+    content,
+    backdrop,
+    showTransition,
+    hideTransition
+  } = useModalAnimation(type);
+  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);
+  const {
+    topInset
+  } = (0, _useHeaderStyle.default)();
+  const [modalVisible, setModalVisible] = (0, _react.useState)(false);
+
+  const showAction = () => setModalVisible(true);
+
+  const hideAction = () => hideTransition(() => setModalVisible(false));
+
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  (0, _react.useEffect)(() => {
+    if (visible) showAction();else hideAction();
+  }, [visible]);
+  useOnDismiss(modalVisible, onDismiss);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, _extends({
+    transparent: true,
+    hardwareAccelerated: true,
+    visible: modalVisible,
+    onRequestClose: onClose,
+    onShow: () => showTransition(),
+    onDismiss: onDismiss,
+    supportedOrientations: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'],
+    animationType: 'none'
+  }, props), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
+    onPress: disableBackgroundClose ? undefined : onClose
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, {
+      opacity: backdrop.opacity,
+      backgroundColor: palette.onBackgroundLight03
+    }]
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView // NOTE: This is trick for Android.
+  //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.
+  , {
+    key: `${width}-${height}`,
+    enabled: enableKeyboardAvoid,
+    style: styles.background,
+    behavior: _reactNative.Platform.select({
+      ios: 'padding',
+      default: 'height'
+    }),
+    pointerEvents: 'box-none',
+    keyboardVerticalOffset: enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
+    style: [styles.background, backgroundStyle, {
+      opacity: content.opacity,
+      transform: [{
+        translateY: content.translateY
+      }]
+    }],
+    pointerEvents: 'box-none'
+  }, panResponder.panHandlers), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable // NOTE: https://github.com/facebook/react-native/issues/14295
+  //  Due to 'Pressable', the width of the children must be explicitly specified as a number.
+  , null, children))));
+};
+
+const isHideGesture = (distanceY, velocityY) => {
+  return distanceY > 125 || distanceY > 0 && velocityY > 0.1;
+};
+
+const useModalPanResponder = (type, translateY, show, hide) => {
+  if (type === 'fade') return {
+    panHandlers: {}
+  };
+  return _react.default.useRef(_reactNative.PanResponder.create({
+    onMoveShouldSetPanResponderCapture: (_, _ref2) => {
+      let {
+        dy
+      } = _ref2;
+      return dy > 8;
+    },
+    // @ts-ignore
+    onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),
+    onPanResponderMove: (_, _ref3) => {
+      let {
+        dy
+      } = _ref3;
+      return dy >= 0 && translateY.setValue(dy);
+    },
+    // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),
+    onPanResponderRelease: (_, _ref4) => {
+      let {
+        dy,
+        vy
+      } = _ref4;
+      if (isHideGesture(dy, vy)) hide();else show();
+    }
+  })).current;
+};
+
+const useModalAnimation = type => {
+  const initialY = type === 'slide' ? _reactNative.Dimensions.get('window').height : 0;
+  const baseAnimBackground = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const baseAnimContent = (0, _react.useRef)(new _reactNative.Animated.Value(initialY)).current;
+  const content = {
+    opacity: baseAnimBackground.interpolate({
+      inputRange: [0, 1],
+      outputRange: [type === 'slide' ? 1 : 0, 1]
+    }),
+    translateY: baseAnimContent
+  };
+  const backdrop = {
+    opacity: baseAnimBackground.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1]
+    })
+  };
+
+  const createTransition = toValue => {
+    const config = {
+      duration: 250,
+      useNativeDriver: false
+    };
+    return _reactNative.Animated.parallel([_reactNative.Animated.timing(baseAnimBackground, {
+      toValue,
+      ...config
+    }), _reactNative.Animated.timing(baseAnimContent, {
+      toValue: toValue === 0 ? initialY : 0,
+      ...config
+    })]).start;
+  };
+
+  return {
+    content,
+    backdrop,
+    showTransition: createTransition(1),
+    hideTransition: createTransition(0)
+  };
+}; // NOTE: onDismiss is supports iOS only
+
+
+const useOnDismiss = (visible, onDismiss) => {
+  const prevVisible = usePrevProp(visible);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS === 'ios') return;
+    if (prevVisible && !visible) onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+  }, [prevVisible, visible]);
+};
+
+const usePrevProp = prop => {
+  const prev = (0, _react.useRef)(prop);
+  const curr = (0, _react.useRef)(prop);
+  (0, _react.useEffect)(() => {
+    prev.current = curr.current;
+    curr.current = prop;
+  });
+  return prev.current;
+};
+
+const styles = (0, _createStyleSheet.default)({
+  background: {
+    flex: 1
+  }
+});
+var _default = Modal;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/ui/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Modal","children","onClose","backgroundStyle","onDismiss","type","visible","disableBackgroundClose","enableKeyboardAvoid","statusBarTranslucent","props","palette","useUIKitTheme","content","backdrop","showTransition","hideTransition","useModalAnimation","panResponder","useModalPanResponder","translateY","topInset","useHeaderStyle","modalVisible","setModalVisible","useState","showAction","hideAction","width","height","useWindowDimensions","useEffect","useOnDismiss","undefined","StyleSheet","absoluteFill","opacity","backgroundColor","onBackgroundLight03","styles","background","Platform","select","ios","default","transform","panHandlers","isHideGesture","distanceY","velocityY","show","hide","React","useRef","PanResponder","create","onMoveShouldSetPanResponderCapture","_","dy","onPanResponderGrant","setOffset","__getValue","onPanResponderMove","setValue","onPanResponderRelease","vy","current","initialY","Dimensions","get","baseAnimBackground","Animated","Value","baseAnimContent","interpolate","inputRange","outputRange","createTransition","toValue","config","duration","useNativeDriver","parallel","timing","start","prevVisible","usePrevProp","OS","prop","prev","curr","createStyleSheet","flex"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  Dimensions,\n  KeyboardAvoidingView,\n  ModalProps,\n  PanResponder,\n  Platform,\n  Pressable,\n  Modal as RNModal,\n  StyleProp,\n  StyleSheet,\n  TouchableWithoutFeedback,\n  ViewStyle,\n  useWindowDimensions,\n} from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  type?: 'slide' | 'fade';\n  onClose: () => void;\n  backgroundStyle?: StyleProp<ViewStyle>;\n  disableBackgroundClose?: boolean;\n  enableKeyboardAvoid?: boolean;\n} & Omit<ModalProps, 'animationType' | 'onRequestClose'>;\n\n/**\n * Modal Open: Triggered by Modal.props.visible state changed to true\n * - visible true -> modalVisible true -> animation start\n *\n * Modal Close: Triggered by Modal.props.onClose() call\n * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false\n * */\nconst Modal = ({\n  children,\n  onClose,\n  backgroundStyle,\n  onDismiss,\n  type = 'fade',\n  visible = false,\n  disableBackgroundClose = false,\n  enableKeyboardAvoid = false,\n  statusBarTranslucent,\n  ...props\n}: Props) => {\n  const { palette } = useUIKitTheme();\n  const { content, backdrop, showTransition, hideTransition } = useModalAnimation(type);\n  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);\n  const { topInset } = useHeaderStyle();\n\n  const [modalVisible, setModalVisible] = useState(false);\n  const showAction = () => setModalVisible(true);\n  const hideAction = () => hideTransition(() => setModalVisible(false));\n\n  const { width, height } = useWindowDimensions();\n\n  useEffect(() => {\n    if (visible) showAction();\n    else hideAction();\n  }, [visible]);\n\n  useOnDismiss(modalVisible, onDismiss);\n\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      visible={modalVisible}\n      onRequestClose={onClose}\n      onShow={() => showTransition()}\n      onDismiss={onDismiss}\n      supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}\n      animationType={'none'}\n      {...props}\n    >\n      <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>\n        <Animated.View\n          style={[StyleSheet.absoluteFill, { opacity: backdrop.opacity, backgroundColor: palette.onBackgroundLight03 }]}\n        />\n      </TouchableWithoutFeedback>\n      <KeyboardAvoidingView\n        // NOTE: This is trick for Android.\n        //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.\n        key={`${width}-${height}`}\n        enabled={enableKeyboardAvoid}\n        style={styles.background}\n        behavior={Platform.select({ ios: 'padding', default: 'height' })}\n        pointerEvents={'box-none'}\n        keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}\n      >\n        <Animated.View\n          style={[\n            styles.background,\n            backgroundStyle,\n            { opacity: content.opacity, transform: [{ translateY: content.translateY }] },\n          ]}\n          pointerEvents={'box-none'}\n          {...panResponder.panHandlers}\n        >\n          <Pressable\n          // NOTE: https://github.com/facebook/react-native/issues/14295\n          //  Due to 'Pressable', the width of the children must be explicitly specified as a number.\n          >\n            {children}\n          </Pressable>\n        </Animated.View>\n      </KeyboardAvoidingView>\n    </RNModal>\n  );\n};\n\nconst isHideGesture = (distanceY: number, velocityY: number) => {\n  return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);\n};\nconst useModalPanResponder = (\n  type: 'slide' | 'fade',\n  translateY: Animated.Value,\n  show: () => void,\n  hide: () => void,\n) => {\n  if (type === 'fade') return { panHandlers: {} };\n  return React.useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,\n      // @ts-ignore\n      onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),\n      onPanResponderMove: (_, { dy }) => dy >= 0 && translateY.setValue(dy), // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),\n      onPanResponderRelease: (_, { dy, vy }) => {\n        if (isHideGesture(dy, vy)) hide();\n        else show();\n      },\n    }),\n  ).current;\n};\n\nconst useModalAnimation = (type: 'slide' | 'fade') => {\n  const initialY = type === 'slide' ? Dimensions.get('window').height : 0;\n  const baseAnimBackground = useRef(new Animated.Value(0)).current;\n  const baseAnimContent = useRef(new Animated.Value(initialY)).current;\n\n  const content = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [type === 'slide' ? 1 : 0, 1],\n    }),\n    translateY: baseAnimContent,\n  };\n  const backdrop = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [0, 1],\n    }),\n  };\n  const createTransition = (toValue: 0 | 1) => {\n    const config = { duration: 250, useNativeDriver: false };\n    return Animated.parallel([\n      Animated.timing(baseAnimBackground, { toValue, ...config }),\n      Animated.timing(baseAnimContent, { toValue: toValue === 0 ? initialY : 0, ...config }),\n    ]).start;\n  };\n  return {\n    content,\n    backdrop,\n    showTransition: createTransition(1),\n    hideTransition: createTransition(0),\n  };\n};\n\n// NOTE: onDismiss is supports iOS only\nconst useOnDismiss = (visible: boolean, onDismiss?: () => void) => {\n  const prevVisible = usePrevProp(visible);\n  useEffect(() => {\n    if (Platform.OS === 'ios') return;\n    if (prevVisible && !visible) onDismiss?.();\n  }, [prevVisible, visible]);\n};\n\nconst usePrevProp = <T,>(prop: T) => {\n  const prev = useRef(prop);\n  const curr = useRef(prop);\n  useEffect(() => {\n    prev.current = curr.current;\n    curr.current = prop;\n  });\n  return prev.current;\n};\n\nconst styles = createStyleSheet({\n  background: { flex: 1 },\n});\n\nexport default Modal;\n"],"mappings":"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"}

package/lib/commonjs/ui/Placeholder/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _LoadingSpinner = _interopRequireDefault(require("../LoadingSpinner"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Placeholder = _ref => {
+  let {
+    icon,
+    loading = false,
+    message = '',
+    errorRetryLabel,
+    onPressRetry
+  } = _ref;
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)(); // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: (0, _uikitUtils.conditionChaining)([loading, errorRetryLabel], [styles.containerLoading, styles.containerError, styles.container])
+  }, (0, _uikitUtils.conditionChaining)([loading], [/*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, {
+    size: 64,
+    color: colors.ui.placeholder.default.none.highlight
+  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: icon,
+    size: 64,
+    color: colors.ui.placeholder.default.none.content
+  })]), Boolean(message) && !loading && /*#__PURE__*/_react.default.createElement(_Text.default, {
+    body3: true,
+    color: colors.ui.placeholder.default.none.content
+  }, message), Boolean(errorRetryLabel) && !loading && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'text',
+    onPress: onPressRetry,
+    contentColor: colors.ui.placeholder.default.none.highlight,
+    icon: 'refresh'
+  }, errorRetryLabel));
+};
+
+const styles = (0, _createStyleSheet.default)({
+  container: {
+    width: 200,
+    height: 100,
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  containerError: {
+    width: 200,
+    height: 148,
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  containerLoading: {
+    width: 200,
+    height: 100,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = Placeholder;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Placeholder","icon","loading","message","errorRetryLabel","onPressRetry","colors","useUIKitTheme","conditionChaining","styles","containerLoading","containerError","container","ui","placeholder","default","none","highlight","content","Boolean","createStyleSheet","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;;AACA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAWA,MAAMA,WAAW,GAAG,QAAmF;EAAA,IAAlF;IAAEC,IAAF;IAAQC,OAAO,GAAG,KAAlB;IAAyBC,OAAO,GAAG,EAAnC;IAAuCC,eAAvC;IAAwDC;EAAxD,CAAkF;EACrG,MAAM;IAAEC;EAAF,IAAa,IAAAC,sBAAA,GAAnB,CADqG,CAGrG;;EACA,oBACE,6BAAC,iBAAD;IACE,KAAK,EAAE,IAAAC,6BAAA,EACL,CAACN,OAAD,EAAUE,eAAV,CADK,EAEL,CAACK,MAAM,CAACC,gBAAR,EAA0BD,MAAM,CAACE,cAAjC,EAAiDF,MAAM,CAACG,SAAxD,CAFK;EADT,GAMG,IAAAJ,6BAAA,EACC,CAACN,OAAD,CADD,EAEC,cACE,6BAAC,uBAAD;IAAgB,IAAI,EAAE,EAAtB;IAA0B,KAAK,EAAEI,MAAM,CAACO,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCC;EAApE,EADF,eAEE,6BAAC,aAAD;IAAM,IAAI,EAAEhB,IAAZ;IAAkB,IAAI,EAAE,EAAxB;IAA4B,KAAK,EAAEK,MAAM,CAACO,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCE;EAAtE,EAFF,CAFD,CANH,EAaGC,OAAO,CAAChB,OAAD,CAAP,IAAoB,CAACD,OAArB,iBACC,6BAAC,aAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEI,MAAM,CAACO,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCE;EAAtD,GACGf,OADH,CAdJ,EAkBGgB,OAAO,CAACf,eAAD,CAAP,IAA4B,CAACF,OAA7B,iBACC,6BAAC,eAAD;IACE,OAAO,EAAE,MADX;IAEE,OAAO,EAAEG,YAFX;IAGE,YAAY,EAAEC,MAAM,CAACO,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCC,SAHnD;IAIE,IAAI,EAAE;EAJR,GAMGb,eANH,CAnBJ,CADF;AA+BD,CAnCD;;AAqCA,MAAMK,MAAM,GAAG,IAAAW,yBAAA,EAAiB;EAC9BR,SAAS,EAAE;IACTS,KAAK,EAAE,GADE;IAETC,MAAM,EAAE,GAFC;IAGTC,UAAU,EAAE,QAHH;IAITC,cAAc,EAAE;EAJP,CADmB;EAO9Bb,cAAc,EAAE;IACdU,KAAK,EAAE,GADO;IAEdC,MAAM,EAAE,GAFM;IAGdC,UAAU,EAAE,QAHE;IAIdC,cAAc,EAAE;EAJF,CAPc;EAa9Bd,gBAAgB,EAAE;IAChBW,KAAK,EAAE,GADS;IAEhBC,MAAM,EAAE,GAFQ;IAGhBC,UAAU,EAAE,QAHI;IAIhBC,cAAc,EAAE;EAJA;AAbY,CAAjB,CAAf;eAqBexB,W"}

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

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _DialogBox = _interopRequireDefault(require("../Dialog/DialogBox"));
+
+var _Modal = _interopRequireDefault(require("../Modal"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _TextInput = _interopRequireDefault(require("../TextInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Prompt = _ref => {
+  let {
+    onDismiss,
+    visible,
+    onHide,
+    autoFocus = true,
+    title,
+    defaultValue = '',
+    placeholder = 'Enter',
+    onSubmit = _uikitUtils.NOOP,
+    onCancel = _uikitUtils.NOOP,
+    submitLabel = 'Submit',
+    cancelLabel = 'Cancel'
+  } = _ref;
+  const {
+    statusBarTranslucent
+  } = (0, _useHeaderStyle.default)();
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)();
+  const inputRef = (0, _react.useRef)(null);
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const buttons = [{
+    text: cancelLabel,
+    onPress: onCancel
+  }, {
+    text: submitLabel,
+    onPress: () => onSubmit(text)
+  }];
+  const [text, setText] = (0, _react.useState)(defaultValue); // FIXME: autoFocus trick with modal
+  // Android
+  // - InputProps.autoFocus is not trigger keyboard appearing.
+  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.
+  // iOS
+  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.
+
+  (0, _react.useEffect)(() => {
+    if (autoFocus && visible) {
+      setTimeout(() => {
+        var _inputRef$current, _inputRef$current2;
+
+        if (_reactNative.Platform.OS === 'android') (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+      }, 250);
+    }
+  }, [autoFocus, visible, `${width}-${height}`]);
+  return /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    enableKeyboardAvoid: true,
+    disableBackgroundClose: true,
+    onClose: onHide,
+    onDismiss: () => {
+      setText('');
+      onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    },
+    statusBarTranslucent: statusBarTranslucent,
+    visible: visible,
+    backgroundStyle: {
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DialogBox.default, {
+    style: styles.container
+  }, Boolean(title) && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.titleContainer
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    h1: true,
+    color: colors.ui.dialog.default.none.text,
+    numberOfLines: 1,
+    style: {
+      flex: 1
+    }
+  }, title)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.inputContainer
+  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    autoFocus: autoFocus && _reactNative.Platform.OS === 'android',
+    ref: inputRef,
+    placeholder: placeholder,
+    variant: 'underline',
+    value: text,
+    onChangeText: setText,
+    style: {
+      paddingHorizontal: 0,
+      paddingVertical: 10
+    }
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.buttonContainer
+  }, buttons.map((_ref2, index) => {
+    let {
+      text,
+      onPress
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+      key: text + index,
+      variant: 'text',
+      style: styles.button,
+      contentColor: colors.ui.dialog.default.none.highlight,
+      onPress: () => {
+        _reactNative.Keyboard.dismiss();
+
+        try {
+          onPress === null || onPress === void 0 ? void 0 : onPress();
+        } finally {
+          onHide();
+        }
+      }
+    }, text);
+  }))));
+};
+
+const styles = (0, _createStyleSheet.default)({
+  container: {
+    paddingTop: 8
+  },
+  titleContainer: {
+    marginBottom: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  inputContainer: {
+    paddingHorizontal: 24,
+    marginBottom: 12
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: 12
+  },
+  button: {
+    marginLeft: 8
+  }
+});
+var _default = Prompt;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Prompt","onDismiss","visible","onHide","autoFocus","title","defaultValue","placeholder","onSubmit","NOOP","onCancel","submitLabel","cancelLabel","statusBarTranslucent","useHeaderStyle","colors","useUIKitTheme","inputRef","useRef","width","height","useWindowDimensions","buttons","text","onPress","setText","useState","useEffect","setTimeout","Platform","OS","current","blur","focus","alignItems","justifyContent","styles","container","Boolean","titleContainer","ui","dialog","default","none","flex","inputContainer","paddingHorizontal","paddingVertical","buttonContainer","map","index","button","highlight","Keyboard","dismiss","createStyleSheet","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":"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"}

package/lib/commonjs/ui/Switch/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Switch = _ref => {
+  let {
+    value,
+    onChangeValue,
+    inactiveThumbColor,
+    inactiveTrackColor,
+    trackColor,
+    thumbColor
+  } = _ref;
+  const {
+    select,
+    palette,
+    colors
+  } = (0, _useUIKitTheme.default)();
+  const position = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    const animation = _reactNative.Animated.timing(position, {
+      toValue: value ? styles.thumbOn.left : styles.thumbOff.left,
+      duration: 150,
+      useNativeDriver: false
+    });
+
+    animation.start();
+    return () => animation.stop();
+  }, [value]);
+
+  const createInterpolate = (offValue, onValue) => {
+    return position.interpolate({
+      inputRange: [styles.thumbOff.left, styles.thumbOn.left],
+      outputRange: [offValue, onValue],
+      extrapolate: 'clamp'
+    });
+  };
+
+  const _trackColor = createInterpolate(inactiveTrackColor ?? colors.onBackground04, trackColor ?? palette.primary200);
+
+  const _thumbColor = createInterpolate(inactiveThumbColor ?? palette.background300, thumbColor ?? select({
+    light: palette.primary400,
+    dark: palette.primary300
+  }));
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: () => onChangeValue(!value),
+    style: [styles.container]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styles.track, {
+      backgroundColor: _trackColor
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styles.thumb, {
+      backgroundColor: _thumbColor,
+      transform: [{
+        translateX: position
+      }]
+    }]
+  }));
+};
+
+const OFFSET = {
+  W: 20,
+  H: 16
+};
+const styles = (0, _createStyleSheet.default)({
+  container: {
+    width: OFFSET.W + OFFSET.H,
+    height: OFFSET.H,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  track: {
+    width: '100%',
+    height: '100%',
+    borderRadius: OFFSET.H / 2,
+    position: 'absolute'
+  },
+  thumb: {
+    width: OFFSET.W,
+    height: OFFSET.W,
+    borderRadius: OFFSET.W / 2,
+    ..._reactNative.Platform.select({
+      android: {
+        elevation: 2
+      },
+      ios: {
+        shadowColor: 'black',
+        shadowRadius: 1,
+        shadowOffset: {
+          width: 0,
+          height: 2
+        },
+        shadowOpacity: 0.4
+      }
+    })
+  },
+  thumbOn: {
+    left: OFFSET.H / 2
+  },
+  thumbOff: {
+    left: -OFFSET.H / 2
+  }
+});
+var _default = Switch;
+exports.default = _default;
+//# sourceMappingURL=index.js.map