@momo-kits/carousel 0.79.6 → 0.80.1-beta.2

package/index.js

@@ -1,5 +0,0 @@
-import Carousel from './CarouselV2';
-import Pagination from './pagination/Pagination';
-import NumberPagination from './pagination/NumberPagination';
-
-export {Carousel, Pagination, NumberPagination};

package/pagination/NumberPagination.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Colors, Radius, Spacing, Text } from '@momo-kits/core-v2';
-import { View, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
-
-const NumberPagination = (props) => {
-    const { dataLength, activeIndex, style } = props;
-
-    return (
-        <View style={style}>
-            <View style={styles.container}>
-                <Text.Label1 style={styles.number}>{`${
-                    activeIndex + 1
-                }/${dataLength}`}</Text.Label1>
-            </View>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        backgroundColor: Colors.black_08,
-        alignSelf: 'baseline',
-        paddingHorizontal: Spacing.S,
-        borderRadius: Radius.M,
-    },
-    number: {
-        color: Colors.black_01,
-    },
-});
-
-NumberPagination.defaultProps = {
-    dataLength: 0,
-    activeIndex: 0,
-};
-
-NumberPagination.propsType = {
-    dataLength: PropTypes.number,
-    activeIndex: PropTypes.number,
-    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-};
-
-export default NumberPagination;

package/pagination/Pagination.js

@@ -1,188 +0,0 @@
-import React, { PureComponent } from 'react';
-import { I18nManager, Platform, View } from 'react-native';
-import PropTypes from 'prop-types';
-import PaginationDot from './PaginationDot';
-import styles from './styles';
-import { Colors, Radius, Spacing } from '@momo-kits/core-v2';
-
-const IS_IOS = Platform.OS === 'ios';
-const IS_RTL = I18nManager.isRTL;
-
-export default class Pagination extends PureComponent {
-    constructor(props) {
-        super(props);
-
-        // Warnings
-        if (
-            (props.dotColor && !props.inactiveDotColor) ||
-            (!props.dotColor && props.inactiveDotColor)
-        ) {
-            console.warn(
-                'react-native-snap-carousel | Pagination: ' +
-                    'You need to specify both `dotColor` and `inactiveDotColor`',
-            );
-        }
-        if (
-            (props.dotElement && !props.inactiveDotElement) ||
-            (!props.dotElement && props.inactiveDotElement)
-        ) {
-            console.warn(
-                'react-native-snap-carousel | Pagination: ' +
-                    'You need to specify both `dotElement` and `inactiveDotElement`',
-            );
-        }
-        if (props.tappableDots && !props.carouselRef) {
-            console.warn(
-                'react-native-snap-carousel | Pagination: ' +
-                    'You must specify prop `carouselRef` when setting `tappableDots` to `true`',
-            );
-        }
-    }
-
-    get _activeDotIndex() {
-        const { activeDotIndex, dotsLength } = this.props;
-        return this._needsRTLAdaptations()
-            ? dotsLength - activeDotIndex - 1
-            : activeDotIndex;
-    }
-
-    get dots() {
-        const {
-            activeOpacity,
-            carouselRef,
-            dotsLength,
-            dotColor,
-            dotContainerStyle,
-            dotElement,
-            dotStyle,
-            inactiveDotColor,
-            inactiveDotElement,
-            inactiveDotOpacity,
-            inactiveDotScale,
-            inactiveDotStyle,
-            renderDots,
-            tappableDots,
-            type,
-        } = this.props;
-
-        if (renderDots) {
-            return renderDots(this._activeDotIndex, dotsLength, this);
-        }
-
-        const DefaultDot = (
-            <PaginationDot
-                carouselRef={carouselRef}
-                tappable={tappableDots && typeof carouselRef !== 'undefined'}
-                activeOpacity={activeOpacity}
-                color={dotColor}
-                containerStyle={dotContainerStyle}
-                style={dotStyle}
-                inactiveColor={inactiveDotColor}
-                inactiveOpacity={inactiveDotOpacity}
-                inactiveScale={inactiveDotScale}
-                inactiveStyle={inactiveDotStyle}
-                type={type}
-            />
-        );
-
-        const dots = [];
-
-        for (let i = 0; i < dotsLength; i += 1) {
-            const isActive = i === this._activeDotIndex;
-            dots.push(
-                React.cloneElement(
-                    (isActive ? dotElement : inactiveDotElement) || DefaultDot,
-                    {
-                        key: `pagination-dot-${i}`,
-                        active: i === this._activeDotIndex,
-                        index: i,
-                    },
-                ),
-            );
-        }
-
-        return dots;
-    }
-
-    _needsRTLAdaptations() {
-        const { vertical } = this.props;
-        return IS_RTL && !IS_IOS && !vertical;
-    }
-
-    render() {
-        const {
-            dotsLength,
-            containerStyle,
-            vertical,
-            accessibilityLabel,
-            type,
-        } = this.props;
-
-        if (!dotsLength || dotsLength < 2) {
-            return false;
-        }
-
-        const style = [
-            styles.sliderPagination,
-            {
-                flexDirection: vertical
-                    ? 'column'
-                    : this._needsRTLAdaptations()
-                    ? 'row-reverse'
-                    : 'row',
-            },
-            containerStyle || {},
-        ];
-
-        return (
-            <View
-                pointerEvents="box-none"
-                style={style}
-                accessible={!!accessibilityLabel}
-                accessibilityLabel={accessibilityLabel}>
-                <View
-                    style={[
-                        {
-                            flexDirection: 'row',
-                            padding: Spacing.XS,
-                            borderRadius: Radius.S,
-                        },
-                        type === 'light'
-                            ? {}
-                            : { backgroundColor: Colors.opacity_02_white_20 },
-                    ]}>
-                    {this.dots}
-                </View>
-            </View>
-        );
-    }
-}
-Pagination.propTypes = {
-    activeDotIndex: PropTypes.number.isRequired,
-    dotsLength: PropTypes.number.isRequired,
-    activeOpacity: PropTypes.number,
-    carouselRef: PropTypes.object,
-    dotColor: PropTypes.string,
-    dotElement: PropTypes.element,
-    dotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    inactiveDotColor: PropTypes.string,
-    inactiveDotElement: PropTypes.element,
-    inactiveDotOpacity: PropTypes.number,
-    inactiveDotScale: PropTypes.number,
-    inactiveDotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    renderDots: PropTypes.func,
-    tappableDots: PropTypes.bool,
-    vertical: PropTypes.bool,
-    accessibilityLabel: PropTypes.string,
-    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    type: PropTypes.oneOf(['light', 'dark']),
-};
-
-Pagination.defaultProps = {
-    inactiveDotOpacity: 0.5,
-    inactiveDotScale: 0.5,
-    tappableDots: false,
-    vertical: false,
-    type: 'light',
-};

package/pagination/PaginationDot.js

@@ -1,151 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Animated, Easing, TouchableOpacity } from 'react-native';
-import PropTypes from 'prop-types';
-import styles from './styles';
-import { Colors } from '@momo-kits/core-v2';
-
-export default class PaginationDot extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {
-            animColor: new Animated.Value(0),
-            animOpacity: new Animated.Value(0),
-            animTransform: new Animated.Value(0),
-        };
-    }
-
-    get _shouldAnimateColor() {
-        const { color, inactiveColor } = this.props;
-        return color && inactiveColor;
-    }
-
-    componentDidMount() {
-        const { active } = this.props;
-        if (active) {
-            this._animate(1);
-        }
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        const { active } = this.props;
-        if (nextProps.active !== active) {
-            this._animate(nextProps.active ? 1 : 0);
-        }
-    }
-
-    _animate(toValue = 0) {
-        const { animColor, animOpacity, animTransform } = this.state;
-
-        const commonProperties = {
-            toValue,
-            duration: 250,
-            isInteraction: false,
-            useNativeDriver: false,
-        };
-
-        const animations = [
-            Animated.timing(animOpacity, {
-                easing: Easing.linear,
-                ...commonProperties,
-            }),
-            Animated.spring(animTransform, {
-                // friction: 4,
-                tension: 50,
-                ...commonProperties,
-            }),
-        ];
-
-        if (this._shouldAnimateColor) {
-            animations.push(
-                Animated.timing(animColor, {
-                    easing: Easing.linear,
-                    ...commonProperties,
-                }),
-            );
-        }
-
-        Animated.parallel(animations).start();
-    }
-
-    render() {
-        const { animColor, animOpacity, animTransform } = this.state;
-        const {
-            active,
-            activeOpacity,
-            carouselRef,
-            color,
-            containerStyle,
-            inactiveColor,
-            inactiveStyle,
-            inactiveOpacity,
-            index,
-            style,
-            tappable,
-            type,
-        } = this.props;
-
-        const animatedStyle = {
-            opacity: animOpacity.interpolate({
-                inputRange: [0, 1],
-                outputRange: [inactiveOpacity, 1],
-            }),
-            width: animTransform.interpolate({
-                inputRange: [0, 1],
-                outputRange: [4, 12],
-            }),
-        };
-        const animatedColor = this._shouldAnimateColor
-            ? {
-                  backgroundColor: animColor.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [inactiveColor, color],
-                  }),
-              }
-            : {};
-
-        const dotContainerStyle = [
-            styles.sliderPaginationDotContainer,
-            containerStyle || {},
-        ];
-
-        const dotStyle = [
-            styles.sliderPaginationDot,
-            style || {},
-            (!active && inactiveStyle) || {},
-            !active && { backgroundColor: Colors.black_10 },
-            animatedStyle,
-            type === 'light'
-                ? animatedColor
-                : { backgroundColor: Colors.black_01 },
-        ];
-
-        const onPress = tappable
-            ? () =>
-                  carouselRef &&
-                  carouselRef._snapToItem(carouselRef._getPositionIndex(index))
-            : undefined;
-
-        return (
-            <TouchableOpacity
-                accessible={false}
-                style={dotContainerStyle}
-                activeOpacity={tappable ? activeOpacity : 1}
-                onPress={onPress}>
-                <Animated.View style={dotStyle} />
-            </TouchableOpacity>
-        );
-    }
-}
-PaginationDot.propTypes = {
-    inactiveOpacity: PropTypes.number.isRequired,
-    active: PropTypes.bool,
-    activeOpacity: PropTypes.number,
-    carouselRef: PropTypes.object,
-    color: PropTypes.string,
-    inactiveColor: PropTypes.string,
-    index: PropTypes.number,
-    tappable: PropTypes.bool,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    inactiveStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-};

package/pagination/styles.js

@@ -1,24 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Colors, Spacing } from '@momo-kits/core-v2';
-
-const DEFAULT_DOT_SIZE = 4;
-const DEFAULT_DOT_COLOR = Colors.pink_03;
-
-export default StyleSheet.create({
-    sliderPagination: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 20,
-    },
-    sliderPaginationDotContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginHorizontal: Spacing.XS,
-    },
-    sliderPaginationDot: {
-        width: DEFAULT_DOT_SIZE,
-        height: DEFAULT_DOT_SIZE,
-        borderRadius: DEFAULT_DOT_SIZE / 2,
-        backgroundColor: DEFAULT_DOT_COLOR,
-    },
-});

package/styles.js

@@ -1,189 +0,0 @@
-
-import {
-    StyleSheet, Dimensions, Platform
-} from 'react-native';
-
-const IS_IOS = Platform.OS === 'ios';
-const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
-
-function wp(percentage) {
-    const value = (percentage * viewportWidth) / 100;
-    return Math.round(value);
-}
-
-const slideHeight = viewportHeight * 0.36;
-const slideWidth = wp(75);
-const itemHorizontalMargin = wp(2);
-
-export const sliderWidth = viewportWidth;
-export const itemWidth = slideWidth + itemHorizontalMargin * 2;
-
-const entryBorderRadius = 8;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-    contentView: {
-        paddingTop: 20,
-        backgroundColor: '#1a191c'
-    },
-    divide: {
-        width: viewportWidth,
-        height: 30
-    },
-    txtHeading: {
-        marginVertical: 15,
-        marginLeft: 10,
-        fontSize: 15,
-        color: '#000'
-    },
-    dotsArea: {
-        paddingVertical: 5,
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: 0
-    },
-    dotContainer: {
-        borderWidth: 1,
-        borderColor: '#DADADA',
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        marginHorizontal: 5
-    },
-    safeArea: {
-        flex: 1,
-        backgroundColor: '#000'
-    },
-    gradient: {
-        ...StyleSheet.absoluteFillObject
-    },
-    scrollview: {
-        flex: 1
-    },
-    exampleContainer: {
-        paddingVertical: 30
-    },
-    exampleContainerDark: {
-        backgroundColor: '#F3F3F3'
-    },
-    exampleContainerLight: {
-        backgroundColor: 'transparent'
-    },
-    title: {
-        paddingHorizontal: 30,
-        backgroundColor: 'transparent',
-        color: '#000',
-        fontSize: 20,
-        fontWeight: 'bold',
-        textAlign: 'center'
-    },
-    titleDark: {
-        color: '#000'
-    },
-    subtitle: {
-        marginTop: 5,
-        paddingHorizontal: 30,
-        backgroundColor: 'transparent',
-        color: '#000',
-        fontSize: 13,
-        fontStyle: 'italic',
-        textAlign: 'center'
-    },
-    slider: {
-        marginTop: 15,
-        overflow: 'visible' // for custom animations
-    },
-    sliderContentContainer: {
-        paddingVertical: 10 // for custom animation
-    },
-    paginationContainer: {
-        paddingVertical: 8
-    },
-    paginationDot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        marginHorizontal: 8
-    },
-    slideInnerContainer: {
-        width: itemWidth,
-        height: slideHeight,
-        paddingHorizontal: itemHorizontalMargin,
-        paddingBottom: 18 // needed for shadow
-    },
-    shadow: {
-        position: 'absolute',
-        top: 0,
-        left: itemHorizontalMargin,
-        right: itemHorizontalMargin,
-        bottom: 18,
-        shadowColor: '#000',
-        shadowOpacity: 0.25,
-        shadowOffset: { width: 0, height: 10 },
-        shadowRadius: 10,
-        borderRadius: entryBorderRadius
-    },
-    imageContainer: {
-        flex: 1,
-        marginBottom: IS_IOS ? 0 : -1, // Prevent a random Android rendering issue
-        backgroundColor: 'white',
-        borderTopLeftRadius: entryBorderRadius,
-        borderTopRightRadius: entryBorderRadius
-    },
-    imageContainerEven: {
-        backgroundColor: '#000'
-    },
-    image: {
-        ...StyleSheet.absoluteFillObject,
-        resizeMode: 'cover',
-        borderRadius: IS_IOS ? entryBorderRadius : 0,
-        borderTopLeftRadius: entryBorderRadius,
-        borderTopRightRadius: entryBorderRadius
-    },
-    // image's border radius is buggy on iOS; let's hack it!
-    radiusMask: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: entryBorderRadius,
-        backgroundColor: 'white'
-    },
-    radiusMaskEven: {
-        backgroundColor: '#000'
-    },
-    textContainer: {
-        justifyContent: 'center',
-        paddingTop: 20 - entryBorderRadius,
-        paddingBottom: 20,
-        paddingHorizontal: 16,
-        backgroundColor: 'white',
-        borderBottomLeftRadius: entryBorderRadius,
-        borderBottomRightRadius: entryBorderRadius
-    },
-    textContainerEven: {
-        backgroundColor: '#000'
-    },
-    titleItem: {
-        color: '#000',
-        fontSize: 13,
-        fontWeight: 'bold',
-        letterSpacing: 0.5
-    },
-    titleEven: {
-        color: 'white'
-    },
-    subtitleItem: {
-        marginTop: 6,
-        color: 'black',
-        fontSize: 12,
-        fontStyle: 'italic'
-    },
-    subtitleEven: {
-        color: 'rgba(255, 255, 255, 0.7)'
-    }
-});
-export default styles;