@amityco/react-native-social-uikit 4.0.0-03e2bf8.0

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

@@ -0,0 +1,242 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Image, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { useStyles } from './styles';
+import useAuth from '../../hooks/useAuth';
+import { getPostById } from '../../providers/Social/feed-sdk';
+import ImageView from '../../components/react-native-image-viewing/dist';
+import { useUIKitSelector } from '../../redux/store';
+import { playBtn } from '../../svg/svg-xml-list';
+import PollSection from '../PollSection/PollSection';
+import LivestreamContent from '../../v4/component/LivestreamContent';
+const MediaSection = ({
+  childrenPosts
+}) => {
+  const {
+    apiRegion
+  } = useAuth();
+  const [imagePosts, setImagePosts] = useState([]);
+  const [videoPosts, setVideoPosts] = useState([]);
+  const [pollIds, setPollIds] = useState([]);
+  const [livestreamId, setLivestreamId] = useState([]);
+  const [imagePostsFullSize, setImagePostsFullSize] = useState([]);
+  const [videoPostsFullSize, setVideoPostsFullSize] = useState([]);
+  const [visibleFullImage, setIsVisibleFullImage] = useState(false);
+  const [imageIndex, setImageIndex] = useState(0);
+  const styles = useStyles();
+  let imageStyle = styles.imageLargePost;
+  let colStyle = styles.col2;
+  const {
+    currentPostdetail
+  } = useUIKitSelector(state => state.postDetail);
+  const {
+    postList: postListGlobal
+  } = useUIKitSelector(state => state.globalFeed);
+  const {
+    postList
+  } = useUIKitSelector(state => state.feed);
+  useEffect(() => {
+    setImagePostsFullSize([]);
+    setVideoPostsFullSize([]);
+    if (imagePosts.length > 0) {
+      const updatedUrls = imagePosts.map(url => {
+        return {
+          uri: url.replace('size=medium', 'size=large')
+        };
+      });
+      setImagePostsFullSize(updatedUrls);
+    }
+    if (videoPosts.length > 0) {
+      const updatedUrls = videoPosts.map(item => {
+        return {
+          uri: `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 ? void 0 : item.thumbnailFileId}/download?size=large`
+        };
+      });
+      setVideoPostsFullSize(updatedUrls);
+    }
+  }, [imagePosts, videoPosts, apiRegion]);
+  const getPostInfo = useCallback(async () => {
+    try {
+      const response = await Promise.all(childrenPosts.map(async id => {
+        const {
+          data: post
+        } = await getPostById(id);
+        return {
+          dataType: post === null || post === void 0 ? void 0 : post.dataType,
+          data: post === null || post === void 0 ? void 0 : post.data
+        };
+      }));
+      response.forEach(item => {
+        var _item$data, _item$data2;
+        if ((item === null || item === void 0 ? void 0 : item.dataType) === 'image' && item !== null && item !== void 0 && (_item$data = item.data) !== null && _item$data !== void 0 && _item$data.fileId) {
+          const url = `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 ? void 0 : item.data.fileId}/download?size=medium`;
+          setImagePosts(prev => {
+            return !prev.includes(url) ? [...prev, url] : [...prev];
+          });
+        } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'video' && item !== null && item !== void 0 && (_item$data2 = item.data) !== null && _item$data2 !== void 0 && _item$data2.videoFileId.original) {
+          setVideoPosts(prev => {
+            const isExisted = prev.some(video => video.videoFileId.original === item.data.videoFileId.original);
+            return !isExisted ? [...prev, item.data] : [...prev];
+          });
+        } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'poll') {
+          setPollIds(prev => {
+            return !prev.includes(item.data) ? [...prev, item.data] : [...prev];
+          });
+        } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'liveStream') {
+          setLivestreamId(prev => {
+            return !prev.includes(item.data) ? [...prev, item.data.streamId] : [...prev];
+          });
+        }
+      });
+    } catch (error) {
+      console.log('error: ', error);
+    }
+  }, [apiRegion, childrenPosts]);
+  useEffect(() => {
+    setVideoPosts([]);
+    setImagePosts([]);
+    getPostInfo();
+  }, [childrenPosts, currentPostdetail, postList, postListGlobal, getPostInfo]);
+  function onClickImage(index) {
+    setIsVisibleFullImage(true);
+    setImageIndex(index);
+  }
+  function renderMediaPosts() {
+    const thumbnailFileIds = videoPosts.length > 0 ? videoPosts.map(item => {
+      return `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 ? void 0 : item.thumbnailFileId}/download?size=medium`;
+    }) : [];
+    const mediaPosts = [...imagePosts].length > 0 ? [...imagePosts] : [...thumbnailFileIds];
+    const imageElement = mediaPosts.map((item, index) => {
+      if (mediaPosts.length === 1) {
+        imageStyle = styles.imageLargePost;
+        colStyle = styles.col6;
+      } else if (mediaPosts.length === 2) {
+        colStyle = styles.col3;
+        if (index === 0) {
+          imageStyle = [styles.imageLargePost, styles.imageMarginRight];
+        } else {
+          imageStyle = [styles.imageLargePost, styles.imageMarginLeft];
+        }
+      } else if (mediaPosts.length === 3) {
+        switch (index) {
+          case 0:
+            colStyle = styles.col6;
+            imageStyle = [styles.imageMediumPost, styles.imageMarginBottom];
+            break;
+          case 1:
+            colStyle = styles.col3;
+            imageStyle = [styles.imageMediumPost, styles.imageMarginTop, styles.imageMarginRight];
+            break;
+          case 2:
+            colStyle = styles.col3;
+            imageStyle = [styles.imageMediumPost, styles.imageMarginTop, styles.imageMarginLeft];
+            break;
+          default:
+            break;
+        }
+      } else {
+        switch (index) {
+          case 0:
+            colStyle = styles.col6;
+            imageStyle = [styles.imageMediumLargePost, styles.imageMarginBottom];
+            break;
+          case 1:
+            colStyle = styles.col2;
+            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginRight];
+            break;
+          case 2:
+            colStyle = styles.col2;
+            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginLeft, styles.imageMarginRight];
+            break;
+          case 3:
+            colStyle = styles.col2;
+            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginLeft];
+            break;
+          default:
+            break;
+        }
+      }
+      return /*#__PURE__*/React.createElement(View, {
+        style: colStyle,
+        key: item
+      }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+        onPress: () => onClickImage(index)
+      }, /*#__PURE__*/React.createElement(View, null, videoPosts.length > 0 && renderPlayButton(), /*#__PURE__*/React.createElement(Image, {
+        style: imageStyle,
+        source: {
+          uri: item
+        }
+      }), index === 3 && imagePosts.length > 4 && /*#__PURE__*/React.createElement(View, {
+        style: styles.overlay
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.overlayText
+      }, `+ ${imagePosts.length - 3}`)))));
+    });
+    if (imageElement.length < 3) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.imagesWrap
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.row
+      }, imageElement));
+    } else if (imageElement.length === 3) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [styles.imagesWrap]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.row
+      }, imageElement.slice(0, 1)), /*#__PURE__*/React.createElement(View, {
+        style: styles.row
+      }, imageElement.slice(1, 3)));
+    } else {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.imagesWrap
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.row
+      }, imageElement.slice(0, 1)), /*#__PURE__*/React.createElement(View, {
+        style: styles.row
+      }, imageElement.slice(1, 4)));
+    }
+  }
+  function renderPlayButton() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.playButton
+    }, /*#__PURE__*/React.createElement(SvgXml, {
+      xml: playBtn,
+      width: "50",
+      height: "50"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(View, null, pollIds.length > 0 ? /*#__PURE__*/React.createElement(PollSection, {
+    pollId: pollIds[0].pollId
+  }) : livestreamId.length > 0 ? /*#__PURE__*/React.createElement(LivestreamContent, {
+    streamId: livestreamId[0],
+    post: null,
+    onPressPost: () => {}
+  }) : renderMediaPosts(), /*#__PURE__*/React.createElement(ImageView, {
+    images: imagePostsFullSize.length > 0 ? imagePostsFullSize : videoPostsFullSize,
+    imageIndex: imageIndex,
+    visible: visibleFullImage,
+    onRequestClose: () => setIsVisibleFullImage(false),
+    isVideoButton: videoPosts.length > 0 ? true : false,
+    videoPosts: videoPosts,
+    HeaderComponent: ({
+      imageIndex: imgIndex
+    }) => /*#__PURE__*/React.createElement(View, {
+      style: styles.headerContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.flexWidth
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.closebtnIcon,
+      onPress: () => setIsVisibleFullImage(false)
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.closeBtn
+    }, "X"))), /*#__PURE__*/React.createElement(View, {
+      style: styles.flexWidth
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.header
+    }, imgIndex + 1, "/", imagePostsFullSize.length || videoPostsFullSize.length)), /*#__PURE__*/React.createElement(View, {
+      style: styles.flexWidth
+    }))
+  }));
+};
+export default /*#__PURE__*/React.memo(MediaSection);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useState","Image","Text","TouchableOpacity","TouchableWithoutFeedback","View","SvgXml","useStyles","useAuth","getPostById","ImageView","useUIKitSelector","playBtn","PollSection","LivestreamContent","MediaSection","childrenPosts","apiRegion","imagePosts","setImagePosts","videoPosts","setVideoPosts","pollIds","setPollIds","livestreamId","setLivestreamId","imagePostsFullSize","setImagePostsFullSize","videoPostsFullSize","setVideoPostsFullSize","visibleFullImage","setIsVisibleFullImage","imageIndex","setImageIndex","styles","imageStyle","imageLargePost","colStyle","col2","currentPostdetail","state","postDetail","postList","postListGlobal","globalFeed","feed","length","updatedUrls","map","url","uri","replace","item","thumbnailFileId","getPostInfo","response","Promise","all","id","data","post","dataType","forEach","_item$data","_item$data2","fileId","prev","includes","videoFileId","original","isExisted","some","video","streamId","error","console","log","onClickImage","index","renderMediaPosts","thumbnailFileIds","mediaPosts","imageElement","col6","col3","imageMarginRight","imageMarginLeft","imageMediumPost","imageMarginBottom","imageMarginTop","imageMediumLargePost","imageSmallPost","createElement","style","key","onPress","renderPlayButton","source","overlay","overlayText","imagesWrap","row","slice","playButton","xml","width","height","pollId","onPressPost","images","visible","onRequestClose","isVideoButton","HeaderComponent","imgIndex","headerContainer","flexWidth","closebtnIcon","closeBtn","header","memo"],"sourceRoot":"../../../../src","sources":["components/MediaSection/index.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SACEC,KAAK,EACLC,IAAI,EACJC,gBAAgB,EAChBC,wBAAwB,EACxBC,IAAI,QACC,cAAc;AACrB,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,SAAS,QAAQ,UAAU;AACpC,OAAOC,OAAO,MAAM,qBAAqB;AAEzC,SAASC,WAAW,QAAQ,iCAAiC;AAC7D,OAAOC,SAAS,MAAM,kDAAkD;AACxE,SAAoBC,gBAAgB,QAAQ,mBAAmB;AAC/D,SAASC,OAAO,QAAQ,wBAAwB;AAChD,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,iBAAiB,MAAM,sCAAsC;AAKpE,MAAMC,YAAqC,GAAGA,CAAC;EAAEC;AAAc,CAAC,KAAK;EACnE,MAAM;IAAEC;EAAU,CAAC,GAAGT,OAAO,CAAC,CAAC;EAC/B,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAAW,EAAE,CAAC;EAC1D,MAAM,CAACoB,UAAU,EAAEC,aAAa,CAAC,GAAGrB,QAAQ,CAAe,EAAE,CAAC;EAC9D,MAAM,CAACsB,OAAO,EAAEC,UAAU,CAAC,GAAGvB,QAAQ,CAAuB,EAAE,CAAC;EAChE,MAAM,CAACwB,YAAY,EAAEC,eAAe,CAAC,GAAGzB,QAAQ,CAC9C,EACF,CAAC;EAED,MAAM,CAAC0B,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG3B,QAAQ,CAAa,EAAE,CAAC;EAC5E,MAAM,CAAC4B,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG7B,QAAQ,CAAa,EAAE,CAAC;EAC5E,MAAM,CAAC8B,gBAAgB,EAAEC,qBAAqB,CAAC,GAAG/B,QAAQ,CAAU,KAAK,CAAC;EAC1E,MAAM,CAACgC,UAAU,EAAEC,aAAa,CAAC,GAAGjC,QAAQ,CAAS,CAAC,CAAC;EAEvD,MAAMkC,MAAM,GAAG3B,SAAS,CAAC,CAAC;EAC1B,IAAI4B,UAAe,GAAGD,MAAM,CAACE,cAAc;EAC3C,IAAIC,QAAa,GAAGH,MAAM,CAACI,IAAI;EAC/B,MAAM;IAAEC;EAAkB,CAAC,GAAG5B,gBAAgB,CAC3C6B,KAAgB,IAAKA,KAAK,CAACC,UAC9B,CAAC;EACD,MAAM;IAAEC,QAAQ,EAAEC;EAAe,CAAC,GAAGhC,gBAAgB,CAClD6B,KAAgB,IAAKA,KAAK,CAACI,UAC9B,CAAC;EACD,MAAM;IAAEF;EAAS,CAAC,GAAG/B,gBAAgB,CAAE6B,KAAgB,IAAKA,KAAK,CAACK,IAAI,CAAC;EAEvE9C,SAAS,CAAC,MAAM;IACd4B,qBAAqB,CAAC,EAAE,CAAC;IACzBE,qBAAqB,CAAC,EAAE,CAAC;IACzB,IAAIX,UAAU,CAAC4B,MAAM,GAAG,CAAC,EAAE;MACzB,MAAMC,WAAuB,GAAG7B,UAAU,CAAC8B,GAAG,CAAEC,GAAW,IAAK;QAC9D,OAAO;UACLC,GAAG,EAAED,GAAG,CAACE,OAAO,CAAC,aAAa,EAAE,YAAY;QAC9C,CAAC;MACH,CAAC,CAAC;MACFxB,qBAAqB,CAACoB,WAAW,CAAC;IACpC;IACA,IAAI3B,UAAU,CAAC0B,MAAM,GAAG,CAAC,EAAE;MACzB,MAAMC,WAAuB,GAAG3B,UAAU,CAAC4B,GAAG,CAAEI,IAAgB,IAAK;QACnE,OAAO;UACLF,GAAG,EAAE,eAAejC,SAAS,0BAA0BmC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEC,eAAe;QAC9E,CAAC;MACH,CAAC,CAAC;MACFxB,qBAAqB,CAACkB,WAAW,CAAC;IACpC;EACF,CAAC,EAAE,CAAC7B,UAAU,EAAEE,UAAU,EAAEH,SAAS,CAAC,CAAC;EAEvC,MAAMqC,WAAW,GAAGxD,WAAW,CAAC,YAAY;IAC1C,IAAI;MACF,MAAMyD,QAAQ,GAAG,MAAMC,OAAO,CAACC,GAAG,CAChCzC,aAAa,CAACgC,GAAG,CAAC,MAAOU,EAAE,IAAK;QAC9B,MAAM;UAAEC,IAAI,EAAEC;QAAK,CAAC,GAAG,MAAMnD,WAAW,CAACiD,EAAE,CAAC;QAC5C,OAAO;UAAEG,QAAQ,EAAED,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEC,QAAQ;UAAEF,IAAI,EAAEC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAED;QAAK,CAAC;MACvD,CAAC,CACH,CAAC;MACDJ,QAAQ,CAACO,OAAO,CAAEV,IAAI,IAAK;QAAA,IAAAW,UAAA,EAAAC,WAAA;QACzB,IAAI,CAAAZ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAES,QAAQ,MAAK,OAAO,IAAIT,IAAI,aAAJA,IAAI,gBAAAW,UAAA,GAAJX,IAAI,CAAEO,IAAI,cAAAI,UAAA,eAAVA,UAAA,CAAYE,MAAM,EAAE;UACpD,MAAMhB,GAAW,GAAG,eAAehC,SAAS,0BAA0BmC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEO,IAAI,CAACM,MAAM,uBAAuB;UAC9G9C,aAAa,CAAE+C,IAAI,IAAK;YACtB,OAAO,CAACA,IAAI,CAACC,QAAQ,CAAClB,GAAG,CAAC,GAAG,CAAC,GAAGiB,IAAI,EAAEjB,GAAG,CAAC,GAAG,CAAC,GAAGiB,IAAI,CAAC;UACzD,CAAC,CAAC;QACJ,CAAC,MAAM,IACL,CAAAd,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAES,QAAQ,MAAK,OAAO,IAC1BT,IAAI,aAAJA,IAAI,gBAAAY,WAAA,GAAJZ,IAAI,CAAEO,IAAI,cAAAK,WAAA,eAAVA,WAAA,CAAYI,WAAW,CAACC,QAAQ,EAChC;UACAhD,aAAa,CAAE6C,IAAI,IAAK;YACtB,MAAMI,SAAS,GAAGJ,IAAI,CAACK,IAAI,CACxBC,KAAK,IACJA,KAAK,CAACJ,WAAW,CAACC,QAAQ,KAAKjB,IAAI,CAACO,IAAI,CAACS,WAAW,CAACC,QACzD,CAAC;YACD,OAAO,CAACC,SAAS,GAAG,CAAC,GAAGJ,IAAI,EAAEd,IAAI,CAACO,IAAI,CAAC,GAAG,CAAC,GAAGO,IAAI,CAAC;UACtD,CAAC,CAAC;QACJ,CAAC,MAAM,IAAI,CAAAd,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAES,QAAQ,MAAK,MAAM,EAAE;UACpCtC,UAAU,CAAE2C,IAAI,IAAK;YACnB,OAAO,CAACA,IAAI,CAACC,QAAQ,CAACf,IAAI,CAACO,IAAI,CAAC,GAAG,CAAC,GAAGO,IAAI,EAAEd,IAAI,CAACO,IAAI,CAAC,GAAG,CAAC,GAAGO,IAAI,CAAC;UACrE,CAAC,CAAC;QACJ,CAAC,MAAM,IAAI,CAAAd,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAES,QAAQ,MAAK,YAAY,EAAE;UAC1CpC,eAAe,CAAEyC,IAAI,IAAK;YACxB,OAAO,CAACA,IAAI,CAACC,QAAQ,CAACf,IAAI,CAACO,IAAI,CAAC,GAC5B,CAAC,GAAGO,IAAI,EAAEd,IAAI,CAACO,IAAI,CAACc,QAAQ,CAAC,GAC7B,CAAC,GAAGP,IAAI,CAAC;UACf,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;IACJ,CAAC,CAAC,OAAOQ,KAAK,EAAE;MACdC,OAAO,CAACC,GAAG,CAAC,SAAS,EAAEF,KAAK,CAAC;IAC/B;EACF,CAAC,EAAE,CAACzD,SAAS,EAAED,aAAa,CAAC,CAAC;EAE9BjB,SAAS,CAAC,MAAM;IACdsB,aAAa,CAAC,EAAE,CAAC;IACjBF,aAAa,CAAC,EAAE,CAAC;IACjBmC,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,CAACtC,aAAa,EAAEuB,iBAAiB,EAAEG,QAAQ,EAAEC,cAAc,EAAEW,WAAW,CAAC,CAAC;EAE7E,SAASuB,YAAYA,CAACC,KAAa,EAAQ;IACzC/C,qBAAqB,CAAC,IAAI,CAAC;IAC3BE,aAAa,CAAC6C,KAAK,CAAC;EACtB;EAEA,SAASC,gBAAgBA,CAAA,EAAG;IAC1B,MAAMC,gBAA0B,GAC9B5D,UAAU,CAAC0B,MAAM,GAAG,CAAC,GACjB1B,UAAU,CAAC4B,GAAG,CAAEI,IAAI,IAAK;MACvB,OAAO,eAAenC,SAAS,0BAA0BmC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEC,eAAe,uBAAuB;IACvG,CAAC,CAAC,GACF,EAAE;IACR,MAAM4B,UAAU,GACd,CAAC,GAAG/D,UAAU,CAAC,CAAC4B,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG5B,UAAU,CAAC,GAAG,CAAC,GAAG8D,gBAAgB,CAAC;IACtE,MAAME,YAAY,GAAGD,UAAU,CAACjC,GAAG,CAAC,CAACI,IAAY,EAAE0B,KAAa,KAAK;MACnE,IAAIG,UAAU,CAACnC,MAAM,KAAK,CAAC,EAAE;QAC3BX,UAAU,GAAGD,MAAM,CAACE,cAAc;QAClCC,QAAQ,GAAGH,MAAM,CAACiD,IAAI;MACxB,CAAC,MAAM,IAAIF,UAAU,CAACnC,MAAM,KAAK,CAAC,EAAE;QAClCT,QAAQ,GAAGH,MAAM,CAACkD,IAAI;QACtB,IAAIN,KAAK,KAAK,CAAC,EAAE;UACf3C,UAAU,GAAG,CAACD,MAAM,CAACE,cAAc,EAAEF,MAAM,CAACmD,gBAAgB,CAAC;QAC/D,CAAC,MAAM;UACLlD,UAAU,GAAG,CAACD,MAAM,CAACE,cAAc,EAAEF,MAAM,CAACoD,eAAe,CAAC;QAC9D;MACF,CAAC,MAAM,IAAIL,UAAU,CAACnC,MAAM,KAAK,CAAC,EAAE;QAClC,QAAQgC,KAAK;UACX,KAAK,CAAC;YACJzC,QAAQ,GAAGH,MAAM,CAACiD,IAAI;YACtBhD,UAAU,GAAG,CAACD,MAAM,CAACqD,eAAe,EAAErD,MAAM,CAACsD,iBAAiB,CAAC;YAC/D;UACF,KAAK,CAAC;YACJnD,QAAQ,GAAGH,MAAM,CAACkD,IAAI;YACtBjD,UAAU,GAAG,CACXD,MAAM,CAACqD,eAAe,EACtBrD,MAAM,CAACuD,cAAc,EACrBvD,MAAM,CAACmD,gBAAgB,CACxB;YACD;UACF,KAAK,CAAC;YACJhD,QAAQ,GAAGH,MAAM,CAACkD,IAAI;YACtBjD,UAAU,GAAG,CACXD,MAAM,CAACqD,eAAe,EACtBrD,MAAM,CAACuD,cAAc,EACrBvD,MAAM,CAACoD,eAAe,CACvB;YACD;UAEF;YACE;QACJ;MACF,CAAC,MAAM;QACL,QAAQR,KAAK;UACX,KAAK,CAAC;YACJzC,QAAQ,GAAGH,MAAM,CAACiD,IAAI;YACtBhD,UAAU,GAAG,CACXD,MAAM,CAACwD,oBAAoB,EAC3BxD,MAAM,CAACsD,iBAAiB,CACzB;YACD;UACF,KAAK,CAAC;YACJnD,QAAQ,GAAGH,MAAM,CAACI,IAAI;YACtBH,UAAU,GAAG,CACXD,MAAM,CAACyD,cAAc,EACrBzD,MAAM,CAACuD,cAAc,EACrBvD,MAAM,CAACmD,gBAAgB,CACxB;YACD;UACF,KAAK,CAAC;YACJhD,QAAQ,GAAGH,MAAM,CAACI,IAAI;YACtBH,UAAU,GAAG,CACXD,MAAM,CAACyD,cAAc,EACrBzD,MAAM,CAACuD,cAAc,EACrBvD,MAAM,CAACoD,eAAe,EACtBpD,MAAM,CAACmD,gBAAgB,CACxB;YACD;UACF,KAAK,CAAC;YACJhD,QAAQ,GAAGH,MAAM,CAACI,IAAI;YACtBH,UAAU,GAAG,CACXD,MAAM,CAACyD,cAAc,EACrBzD,MAAM,CAACuD,cAAc,EACrBvD,MAAM,CAACoD,eAAe,CACvB;YACD;UACF;YACE;QACJ;MACF;MAEA,oBACEzF,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAExD,QAAS;QAACyD,GAAG,EAAE1C;MAAK,gBAC/BvD,KAAA,CAAA+F,aAAA,CAACxF,wBAAwB;QAAC2F,OAAO,EAAEA,CAAA,KAAMlB,YAAY,CAACC,KAAK;MAAE,gBAC3DjF,KAAA,CAAA+F,aAAA,CAACvF,IAAI,QACFe,UAAU,CAAC0B,MAAM,GAAG,CAAC,IAAIkD,gBAAgB,CAAC,CAAC,eAC5CnG,KAAA,CAAA+F,aAAA,CAAC3F,KAAK;QACJ4F,KAAK,EAAE1D,UAAW;QAClB8D,MAAM,EAAE;UACN/C,GAAG,EAAEE;QACP;MAAE,CACH,CAAC,EACD0B,KAAK,KAAK,CAAC,IAAI5D,UAAU,CAAC4B,MAAM,GAAG,CAAC,iBACnCjD,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE3D,MAAM,CAACgE;MAAQ,gBAC1BrG,KAAA,CAAA+F,aAAA,CAAC1F,IAAI;QAAC2F,KAAK,EAAE3D,MAAM,CAACiE;MAAY,GAAE,KAChCjF,UAAU,CAAC4B,MAAM,GAAG,CAAC,EACd,CACL,CAEJ,CACkB,CACtB,CAAC;IAEX,CAAC,CAAC;IACF,IAAIoC,YAAY,CAACpC,MAAM,GAAG,CAAC,EAAE;MAC3B,oBACEjD,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE3D,MAAM,CAACkE;MAAW,gBAC7BvG,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE3D,MAAM,CAACmE;MAAI,GAAEnB,YAAmB,CACzC,CAAC;IAEX,CAAC,MAAM,IAAIA,YAAY,CAACpC,MAAM,KAAK,CAAC,EAAE;MACpC,oBACEjD,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE,CAAC3D,MAAM,CAACkE,UAAU;MAAE,gBAC/BvG,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE3D,MAAM,CAACmE;MAAI,GAAEnB,YAAY,CAACoB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAQ,CAAC,eAC1DzG,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE3D,MAAM,CAACmE;MAAI,GAAEnB,YAAY,CAACoB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAQ,CACrD,CAAC;IAEX,CAAC,MAAM;MACL,oBACEzG,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE3D,MAAM,CAACkE;MAAW,gBAC7BvG,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE3D,MAAM,CAACmE;MAAI,GAAEnB,YAAY,CAACoB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAQ,CAAC,eAC1DzG,KAAA,CAAA+F,aAAA,CAACvF,IAAI;QAACwF,KAAK,EAAE3D,MAAM,CAACmE;MAAI,GAAEnB,YAAY,CAACoB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAQ,CACrD,CAAC;IAEX;EACF;EAEA,SAASN,gBAAgBA,CAAA,EAAG;IAC1B,oBACEnG,KAAA,CAAA+F,aAAA,CAACvF,IAAI;MAACwF,KAAK,EAAE3D,MAAM,CAACqE;IAAW,gBAC7B1G,KAAA,CAAA+F,aAAA,CAACtF,MAAM;MAACkG,GAAG,EAAE5F,OAAQ;MAAC6F,KAAK,EAAC,IAAI;MAACC,MAAM,EAAC;IAAI,CAAE,CAC1C,CAAC;EAEX;EAEA,oBACE7G,KAAA,CAAA+F,aAAA,CAACvF,IAAI,QACFiB,OAAO,CAACwB,MAAM,GAAG,CAAC,gBACjBjD,KAAA,CAAA+F,aAAA,CAAC/E,WAAW;IAAC8F,MAAM,EAAErF,OAAO,CAAC,CAAC,CAAC,CAACqF;EAAO,CAAE,CAAC,GACxCnF,YAAY,CAACsB,MAAM,GAAG,CAAC,gBACzBjD,KAAA,CAAA+F,aAAA,CAAC9E,iBAAiB;IAChB2D,QAAQ,EAAEjD,YAAY,CAAC,CAAC,CAAE;IAC1BoC,IAAI,EAAE,IAAK;IACXgD,WAAW,EAAEA,CAAA,KAAM,CAAC;EAAE,CACvB,CAAC,GAEF7B,gBAAgB,CAAC,CAClB,eAEDlF,KAAA,CAAA+F,aAAA,CAAClF,SAAS;IACRmG,MAAM,EACJnF,kBAAkB,CAACoB,MAAM,GAAG,CAAC,GACzBpB,kBAAkB,GAClBE,kBACL;IACDI,UAAU,EAAEA,UAAW;IACvB8E,OAAO,EAAEhF,gBAAiB;IAC1BiF,cAAc,EAAEA,CAAA,KAAMhF,qBAAqB,CAAC,KAAK,CAAE;IACnDiF,aAAa,EAAE5F,UAAU,CAAC0B,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,KAAM;IACpD1B,UAAU,EAAEA,UAAW;IACvB6F,eAAe,EAAEA,CAAC;MAAEjF,UAAU,EAAEkF;IAAS,CAAC,kBACxCrH,KAAA,CAAA+F,aAAA,CAACvF,IAAI;MAACwF,KAAK,EAAE3D,MAAM,CAACiF;IAAgB,gBAClCtH,KAAA,CAAA+F,aAAA,CAACvF,IAAI;MAACwF,KAAK,EAAE3D,MAAM,CAACkF;IAAU,gBAC5BvH,KAAA,CAAA+F,aAAA,CAACzF,gBAAgB;MACf0F,KAAK,EAAE3D,MAAM,CAACmF,YAAa;MAC3BtB,OAAO,EAAEA,CAAA,KAAMhE,qBAAqB,CAAC,KAAK;IAAE,gBAE5ClC,KAAA,CAAA+F,aAAA,CAAC1F,IAAI;MAAC2F,KAAK,EAAE3D,MAAM,CAACoF;IAAS,GAAC,GAAO,CACrB,CACd,CAAC,eACPzH,KAAA,CAAA+F,aAAA,CAACvF,IAAI;MAACwF,KAAK,EAAE3D,MAAM,CAACkF;IAAU,gBAC5BvH,KAAA,CAAA+F,aAAA,CAAC1F,IAAI;MAAC2F,KAAK,EAAE3D,MAAM,CAACqF;IAAO,GACxBL,QAAQ,GAAG,CAAC,EAAC,GACd,EAACxF,kBAAkB,CAACoB,MAAM,IAAIlB,kBAAkB,CAACkB,MAC7C,CACF,CAAC,eACPjD,KAAA,CAAA+F,aAAA,CAACvF,IAAI;MAACwF,KAAK,EAAE3D,MAAM,CAACkF;IAAU,CAAE,CAC5B;EACN,CACH,CACG,CAAC;AAEX,CAAC;AAED,4BAAevH,KAAK,CAAC2H,IAAI,CAACzG,YAAY,CAAC","ignoreList":[]}

package/lib/module/components/MediaSection/styles.js

@@ -0,0 +1,123 @@
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+export const useStyles = () => {
+  const {
+    top
+  } = useSafeAreaInsets();
+  const {
+    width
+  } = useWindowDimensions();
+  const styles = StyleSheet.create({
+    headerContainer: {
+      width,
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: top + 14,
+      paddingHorizontal: 12
+    },
+    closebtnIcon: {
+      backgroundColor: '#ffffff8f',
+      borderRadius: 24,
+      width: 24,
+      height: 24,
+      textAlign: 'center',
+      justifyContent: 'center',
+      alignItems: 'center',
+      textAlignVertical: 'center',
+      overflow: 'hidden'
+    },
+    closeBtn: {
+      fontSize: 18,
+      color: 'black',
+      fontWeight: 'bold'
+    },
+    header: {
+      textAlign: 'center',
+      fontSize: 14,
+      color: 'white',
+      fontWeight: 'bold'
+    },
+    flexWidth: {
+      flex: 1
+    },
+    imageLargePost: {
+      height: 350,
+      borderRadius: 6,
+      resizeMode: 'cover'
+    },
+    imageMediumLargePost: {
+      height: 235,
+      borderRadius: 6
+    },
+    imageMediumPost: {
+      height: 182,
+      borderRadius: 6
+    },
+    imageSmallPost: {
+      height: 120,
+      borderRadius: 6
+    },
+    imageMarginRight: {
+      marginRight: 2
+    },
+    imageMarginLeft: {
+      marginLeft: 2
+    },
+    imageMarginTop: {
+      marginTop: 2
+    },
+    imageMarginBottom: {
+      marginBottom: 2
+    },
+    imagesWrap: {
+      display: 'flex',
+      flex: 6,
+      marginTop: 12,
+      marginBottom: 4,
+      width: '100%'
+    },
+    row: {
+      flexDirection: 'row'
+    },
+    col2: {
+      flex: 2
+    },
+    col3: {
+      flex: 3
+    },
+    col6: {
+      flex: 6
+    },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'rgba(0, 0, 0, 0.4)',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 6,
+      marginTop: 2,
+      marginLeft: 2
+    },
+    overlayText: {
+      color: 'white',
+      fontSize: 20,
+      fontWeight: 'bold'
+    },
+    playButton: {
+      width: 100,
+      height: 100,
+      borderRadius: 50,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: [{
+        translateX: -25
+      }, {
+        translateY: -25
+      }],
+      zIndex: 1
+    }
+  });
+  return styles;
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/components/MediaSection/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useWindowDimensions","useSafeAreaInsets","useStyles","top","width","styles","create","headerContainer","alignItems","flexDirection","justifyContent","marginTop","paddingHorizontal","closebtnIcon","backgroundColor","borderRadius","height","textAlign","textAlignVertical","overflow","closeBtn","fontSize","color","fontWeight","header","flexWidth","flex","imageLargePost","resizeMode","imageMediumLargePost","imageMediumPost","imageSmallPost","imageMarginRight","marginRight","imageMarginLeft","marginLeft","imageMarginTop","imageMarginBottom","marginBottom","imagesWrap","display","row","col2","col3","col6","overlay","absoluteFillObject","overlayText","playButton","position","left","transform","translateX","translateY","zIndex"],"sourceRoot":"../../../../src","sources":["components/MediaSection/styles.ts"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,79 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from 'react';
+import { View, FlatList } from 'react-native';
+import { useStyles } from './styles';
+import { UserRepository } from '@amityco/ts-sdk-react-native';
+import SearchItem from '../SearchItem';
+export default function MentionPopup({
+  userName,
+  onSelectMention
+}) {
+  const styles = useStyles();
+  const [usersObject, setUsersObject] = useState();
+  const [searchList, setSearchList] = useState([]);
+  const {
+    data: userArr = [],
+    onNextPage
+  } = usersObject ?? {};
+  useEffect(() => {
+    searchAccounts(userName);
+  }, [userName]);
+  const searchAccounts = (text = '') => {
+    let searchProps = {};
+    if (text.length > 2) {
+      searchProps = {
+        displayName: userName,
+        limit: 10,
+        sortBy: 'displayName'
+      };
+    } else {
+      searchProps = {
+        limit: 10,
+        sortBy: 'displayName'
+      };
+    }
+    const unsubscribe = UserRepository.getUsers(searchProps, data => {
+      setUsersObject(data);
+    });
+    unsubscribe();
+  };
+  const handleLoadMore = () => {
+    onNextPage && onNextPage();
+  };
+  useEffect(() => {
+    if (userArr && userArr.length) {
+      const searchUsers = userArr.map(item => {
+        return {
+          targetId: item === null || item === void 0 ? void 0 : item.userId,
+          targetType: 'user',
+          avatarFileId: (item === null || item === void 0 ? void 0 : item.avatarFileId) ?? '',
+          displayName: item === null || item === void 0 ? void 0 : item.displayName
+        };
+      });
+      setSearchList(searchUsers);
+    }
+  }, [userArr]);
+  const onSelectUser = target => {
+    onSelectMention && onSelectMention(target);
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.mentionContainer
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: searchList,
+    renderItem: ({
+      item,
+      index
+    }) => {
+      return /*#__PURE__*/React.createElement(SearchItem, {
+        key: index,
+        target: item,
+        userProfileNavigateEnabled: false,
+        onPress: onSelectUser
+      });
+    },
+    keyExtractor: item => item.targetId,
+    onEndReached: handleLoadMore,
+    onEndReachedThreshold: 0.7
+  }));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","View","FlatList","useStyles","UserRepository","SearchItem","MentionPopup","userName","onSelectMention","styles","usersObject","setUsersObject","searchList","setSearchList","data","userArr","onNextPage","searchAccounts","text","searchProps","length","displayName","limit","sortBy","unsubscribe","getUsers","handleLoadMore","searchUsers","map","item","targetId","userId","targetType","avatarFileId","onSelectUser","target","createElement","style","mentionContainer","renderItem","index","key","userProfileNavigateEnabled","onPress","keyExtractor","onEndReached","onEndReachedThreshold"],"sourceRoot":"../../../../src","sources":["components/MentionPopup/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/MentionPopup/styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+export const useStyles = () => {
+  const theme = useTheme();
+  const styles = StyleSheet.create({
+    mentionContainer: {
+      borderTopColor: theme.colors.baseShade4,
+      borderTopWidth: 1,
+      paddingHorizontal: 0,
+      maxHeight: 240
+    }
+  });
+  return styles;
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/components/MentionPopup/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useTheme","useStyles","theme","styles","create","mentionContainer","borderTopColor","colors","baseShade4","borderTopWidth","paddingHorizontal","maxHeight"],"sourceRoot":"../../../../src","sources":["components/MentionPopup/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,oBAAoB;AAG7C,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGF,QAAQ,CAAC,CAAe;EAEtC,MAAMG,MAAM,GAAGJ,UAAU,CAACK,MAAM,CAAC;IAC/BC,gBAAgB,EAAE;MAChBC,cAAc,EAAEJ,KAAK,CAACK,MAAM,CAACC,UAAU;MACvCC,cAAc,EAAE,CAAC;MACjBC,iBAAiB,EAAE,CAAC;MACpBC,SAAS,EAAE;IACb;EACF,CAAC,CAAC;EAEF,OAAOR,MAAM;AACf,CAAC","ignoreList":[]}

package/lib/module/components/MyCommunity/Components/CommunityList.js

@@ -0,0 +1,64 @@
+import { Image, Text, TouchableOpacity, View } from 'react-native';
+import React from 'react';
+import { SvgXml } from 'react-native-svg';
+import { communityIcon, officialIcon, privateIcon } from '../../../svg/svg-xml-list';
+import { useStyle } from '../styles';
+import useFile from '../../../hooks/useFile';
+import { useTheme } from 'react-native-paper';
+import { PrivacyState } from '../../../enum/privacyState';
+const CommunityList = ({
+  item,
+  onClickItem
+}) => {
+  const MAX_LENGTH = 6;
+  const theme = useTheme();
+  const styles = useStyle();
+  const avatarUrl = useFile({
+    fileId: item.avatarFileId
+  });
+  const getDisplayName = ({
+    text,
+    type
+  }) => {
+    if (text) {
+      const reduceLetter = type === PrivacyState.private ? 3 : 0;
+      if (text.length > MAX_LENGTH - reduceLetter) {
+        return text.substring(0, MAX_LENGTH) + '...';
+      }
+      return text;
+    }
+    return 'Display name';
+  };
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => onClickItem(item.communityId, item.displayName),
+    key: item.communityId,
+    style: styles.itemContainer
+  }, item.avatarFileId && avatarUrl ? /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: avatarUrl
+    },
+    style: styles.avatar
+  }) : /*#__PURE__*/React.createElement(SvgXml, {
+    style: styles.avatar,
+    width: 40,
+    height: 40,
+    xml: communityIcon
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.textRow
+  }, !item.isPublic && /*#__PURE__*/React.createElement(SvgXml, {
+    width: 17,
+    height: 17,
+    xml: privateIcon(theme.colors.base)
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.itemText
+  }, getDisplayName({
+    text: item.displayName,
+    type: !item.isPublic ? PrivacyState.private : PrivacyState.public
+  })), item.isOfficial && /*#__PURE__*/React.createElement(SvgXml, {
+    width: 20,
+    height: 20,
+    xml: officialIcon(theme.colors.primary)
+  })));
+};
+export default CommunityList;
+//# sourceMappingURL=CommunityList.js.map

package/lib/module/components/MyCommunity/Components/CommunityList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","Text","TouchableOpacity","View","React","SvgXml","communityIcon","officialIcon","privateIcon","useStyle","useFile","useTheme","PrivacyState","CommunityList","item","onClickItem","MAX_LENGTH","theme","styles","avatarUrl","fileId","avatarFileId","getDisplayName","text","type","reduceLetter","private","length","substring","createElement","onPress","communityId","displayName","key","style","itemContainer","source","uri","avatar","width","height","xml","textRow","isPublic","colors","base","itemText","public","isOfficial","primary"],"sourceRoot":"../../../../../src","sources":["components/MyCommunity/Components/CommunityList.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,81 @@
+import React, { useCallback, useState } from 'react';
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { useStyle } from './styles';
+import { CommunityRepository } from '@amityco/ts-sdk-react-native';
+import { arrowOutlined } from '../../svg/svg-xml-list';
+import { SvgXml } from 'react-native-svg';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import { useTheme } from 'react-native-paper';
+import CommunityList from './Components/CommunityList';
+export default function MyCommunity() {
+  const theme = useTheme();
+  const styles = useStyle();
+  const [communityItems, setCommunityItems] = useState([]);
+  const navigation = useNavigation();
+  const queryCommunities = () => {
+    const unsubscribe = CommunityRepository.getCommunities({
+      membership: 'member',
+      limit: 8
+    }, ({
+      data
+    }) => {
+      const formattedData = data.map(item => {
+        return {
+          communityId: item.communityId,
+          avatarFileId: item.avatarFileId,
+          displayName: item.displayName,
+          isPublic: item.isPublic,
+          isOfficial: item.isOfficial
+        };
+      });
+      setCommunityItems(formattedData);
+    });
+    unsubscribe();
+  };
+  useFocusEffect(useCallback(() => {
+    queryCommunities();
+  }, []));
+  const onClickItem = (communityId, displayName) => {
+    navigation.navigate('CommunityProfilePage', {
+      communityId: communityId,
+      communityName: displayName
+    });
+  };
+  const onClickSeeAll = () => {
+    navigation.navigate('AllMyCommunity');
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.titleContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.title
+  }, "My Community"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onClickSeeAll
+  }, /*#__PURE__*/React.createElement(SvgXml, {
+    style: styles.arrowIcon,
+    width: 17,
+    height: 17,
+    xml: arrowOutlined(theme.colors.base)
+  }))), /*#__PURE__*/React.createElement(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    contentContainerStyle: styles.scrollView
+  }, communityItems.map(item => /*#__PURE__*/React.createElement(CommunityList, {
+    key: item.communityId,
+    item: item,
+    onClickItem: onClickItem
+  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onClickSeeAll,
+    style: styles.seeAllBtn
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.seeAllIcon
+  }, /*#__PURE__*/React.createElement(SvgXml, {
+    width: 15,
+    height: 15,
+    xml: arrowOutlined(theme.colors.base)
+  })), /*#__PURE__*/React.createElement(Text, {
+    style: styles.seeAllText
+  }, "See all"))));
+}
+//# sourceMappingURL=index.js.map