@momo-kits/template 0.80.8-beta.15

package/HeaderBanner/index.tsx

@@ -0,0 +1,74 @@
+import React, {FC} from 'react';
+import {Animated} from 'react-native';
+import Carousel from '@momo-kits/carousel';
+import {Image, Pagination, Spacing} from '@momo-kits/foundation';
+import {HeaderBannerProps} from './types';
+
+const HeaderBanner: FC<HeaderBannerProps> = ({
+  animatedValue = new Animated.Value(0),
+  paginationBottom = 56,
+  data = [],
+  activeIndex = 0,
+  paginationProps,
+  carouselProps,
+  onSnapToItem,
+}) => {
+  const scale = animatedValue.interpolate({
+    inputRange: [-300, 0, 300],
+    outputRange: [2, 1, 1],
+    extrapolate: 'clamp',
+  });
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 150, 300],
+    outputRange: [1, 0.5, 0],
+    extrapolate: 'clamp',
+  });
+  const translateY = animatedValue.interpolate({
+    inputRange: [-300, 0],
+    outputRange: [-160, -2],
+    extrapolate: 'clamp',
+  });
+
+  const renderItem = (info: {item: any; index: number}) => {
+    const {item, index} = info;
+    return (
+      <Image
+        key={`Header banner ${item}_${index}`}
+        source={{
+          uri: item,
+        }}
+      />
+    );
+  };
+
+  return (
+    <Animated.View
+      style={{
+        aspectRatio: 1.75,
+        opacity: opacity,
+        transform: [{scale}, {translateY}],
+      }}>
+      <Carousel
+        {...carouselProps}
+        autoplay
+        full={true}
+        data={data}
+        onSnapToItem={onSnapToItem}
+        renderItem={renderItem}
+      />
+      <Pagination
+        {...paginationProps}
+        style={{
+          position: 'absolute',
+          bottom: paginationBottom + Spacing.XL,
+          alignSelf: 'center',
+        }}
+        activeIndex={activeIndex}
+        dataLength={data.length}
+        type={'black_white'}
+      />
+    </Animated.View>
+  );
+};
+
+export default HeaderBanner;

package/HeaderBanner/types.ts

@@ -0,0 +1,14 @@
+import {PaginationProps} from '@momo-kits/foundation';
+import {CarouselProps} from '@momo-kits/carousel';
+import {Animated} from 'react-native';
+import AnimatedValue = Animated.AnimatedValue;
+
+export type HeaderBannerProps = {
+  animatedValue: AnimatedValue;
+  data: string[];
+  onSnapToItem: (index: number) => void;
+  activeIndex: number;
+  paginationProps?: PaginationProps;
+  carouselProps?: CarouselProps;
+  paginationBottom?: 8 | 24 | 56;
+};

package/index.tsx

@@ -0,0 +1,3 @@
+import HeaderBanner from './HeaderBanner';
+
+export {HeaderBanner};

package/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/template",
+    "version": "0.80.8-beta.15",
+    "private": false,
+    "main": "index.tsx",
+    "dependencies": {},
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "@momo-kits/carousel": "0.80.8-beta.12",
+        "prop-types": "^15.7.2",
+        "react": "16.9.0",
+        "react-native": ">=0.55"
+    },
+    "devDependencies": {},
+    "license": "MoMo"
+}

package/publish.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+rm -rf dist
+mkdir dist
+
+cp . ./dist
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+echo VERSION: $VERSION
+
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
+
+# #babel component to dist
+#babel ./dist -d dist --copy-files
+
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
+cd dist
+npm publish --tag beta --access=public
+cd ..
+rm -rf dist
+
+##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/bank new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/avatar`"}'