@fountain-ui/lab 2.0.0-beta.9 → 3.0.0-alpha.2

package/src/Carousel/CarouselWeb.tsx

@@ -1,222 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import Slick, { Settings } from 'react-slick';
-import styled from '@emotion/styled';
-import { ChevronLeft, ChevronRight } from '@fountain-ui/icons';
-import { mapIndexed } from '@fountain-ui/utils';
-import type CarouselProps from './CarouselProps';
-import {
-    defaultActiveSlideScale,
-    defaultAutoplay,
-    defaultAutoplayInterval,
-    defaultInactiveSlideOpacity,
-    defaultInactiveSlideScale,
-    defaultInfinite,
-} from './utils';
-
-const baseSettings: Settings = {
-    dots: false,
-    draggable: true,
-    lazyLoad: typeof window === 'undefined' ? undefined : 'ondemand',
-    pauseOnFocus: true,
-    pauseOnHover: true,
-    rows: 1,
-    swipe: true,
-    slidesPerRow: 1,
-    vertical: false,
-};
-
-const noop = () => void 0;
-
-const StyledContainer: any = styled.div((props: any) => ({
-    ['& .slick-slider']: {
-        display: 'block',
-        position: 'relative',
-        userSelect: 'none',
-    },
-    ['& .slick-list']: {
-        display: 'block',
-        position: 'relative',
-        overflow: 'hidden',
-        margin: 0,
-        padding: 0,
-        ['&:focus']: {
-            outline: 'none',
-        },
-        ['&.dragging']: {
-            cursor: 'pointer',
-        },
-    },
-    ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {
-        transform: 'translate3d(0, 0, 0)',
-    },
-    ['& .slick-track']: {
-        display: 'block',
-        position: 'relative',
-        top: 0,
-        left: 0,
-        ['&:before, &:after']: {
-            display: 'table',
-            content: '\'\'',
-        },
-        ['&:after']: {
-            clear: 'both',
-        },
-        ...props.trackStyle,
-    },
-    ['& .slick-slide']: {
-        display: 'none',
-        float: 'left',
-        height: '100%',
-        minHeight: 1,
-        ['& > div']: {
-            justifyContent: 'center',
-            display: 'flex',
-            transform: `scale(${props.inactiveSlideScale})`,
-            transition: 'transform .5s',
-            opacity: props.inactiveSlideOpacity,
-        },
-    },
-    ['& .slick-current > div']: {
-        transform: `scale(${props.activeSlideScale})`,
-        opacity: 1,
-    },
-    ['& .slick-initialized .slick-slide']: {
-        display: 'block',
-    },
-    ...props.arrowsStyle,
-}));
-
-interface ArrowContainerProps {
-    children: React.ReactElement;
-    visible: boolean;
-    currentSlide?: any;
-    slideCount?: any;
-}
-
-const ArrowContainer = (props: ArrowContainerProps) => {
-    const {
-        children,
-        currentSlide,
-        slideCount,
-        visible,
-        ...otherProps
-    } = props;
-
-    return visible ? (
-        // If root component is not a div, there's no arrow class.
-        <div {...otherProps} style={{ cursor: 'pointer' }}>
-            <View
-                style={{
-                    height: '100%',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: 'white',
-                    borderRadius: 16,
-                }}
-            >
-                {children}
-            </View>
-        </div>
-    ) : null;
-};
-
-export default React.forwardRef((props: CarouselProps, ref) => {
-    const {
-        activeSlideScale = defaultActiveSlideScale,
-        autoplay = defaultAutoplay,
-        autoplayInterval = defaultAutoplayInterval,
-        centerMode = false,
-        centerSlidePadding = 0,
-        data,
-        inactiveSlideOpacity = defaultInactiveSlideOpacity,
-        inactiveSlideScale = defaultInactiveSlideScale,
-        index,
-        infinite = defaultInfinite,
-        onChange,
-        renderItem,
-        slidesToScroll = 1,
-        slidesToShow = 1,
-        arrows = false,
-        arrowsStyle = {},
-        trackStyle = {},
-    } = props;
-
-    const slickRef = React.useRef<Slick | null>(null);
-    const [visibleArrow, setVisibleArrow] = React.useState(false);
-
-    React.useEffect(() => {
-        if (slickRef.current) {
-            slickRef.current.slickGoTo(index, false);
-        }
-    }, [index]);
-
-    const fixOnClickNotWorkingAfterMobileSwipe = () => {
-        // @ts-ignore
-        if (slickRef.current && slickRef.current.innerSlider) {
-            // @ts-ignore
-            slickRef.current.innerSlider.clickHandler = noop;
-        }
-    };
-
-    const handleAfterChange = (newIndex: number) => {
-        fixOnClickNotWorkingAfterMobileSwipe();
-
-        if (onChange) {
-            onChange(newIndex);
-        }
-    };
-
-    const handleBeforeChange = () => {
-        fixOnClickNotWorkingAfterMobileSwipe();
-    };
-
-    const onPointerOver = () => setVisibleArrow(true);
-    const onPointerLeave = () => setVisibleArrow(false);
-
-    React.useEffect(() => {
-        if (ref) {
-            //@ts-ignore
-            ref.current = slickRef.current;
-        }
-    }, []);
-
-    return (
-        <StyledContainer
-            activeSlideScale={activeSlideScale}
-            inactiveSlideOpacity={inactiveSlideOpacity}
-            inactiveSlideScale={inactiveSlideScale}
-            arrowsStyle={arrowsStyle}
-            trackStyle={trackStyle}
-            onPointerOver={onPointerOver}
-            onPointerLeave={onPointerLeave}
-        >
-            <Slick
-                {...baseSettings}
-                afterChange={handleAfterChange}
-                autoplay={autoplay}
-                autoplaySpeed={autoplayInterval}
-                beforeChange={handleBeforeChange}
-                centerMode={centerMode}
-                centerPadding={`${centerSlidePadding}px`}
-                infinite={infinite}
-                initialSlide={index}
-                ref={slickRef}
-                slidesToScroll={slidesToScroll}
-                slidesToShow={slidesToShow}
-                arrows={arrows}
-                prevArrow={<ArrowContainer visible={visibleArrow} children={<ChevronLeft fill={'#767676'}/>}/>}
-                nextArrow={<ArrowContainer visible={visibleArrow} children={<ChevronRight fill={'#767676'}/>}/>}
-            >
-                {mapIndexed((item, index) => {
-                    const child = renderItem({ item, index });
-
-                    if (child) {
-                        return React.cloneElement(child, { key: index });
-                    }
-                    return child;
-                }, data)}
-            </Slick>
-        </StyledContainer>
-    );
-});

package/src/Carousel/index.native.ts

@@ -1 +0,0 @@
-export { default } from './CarouselNative';

package/src/Carousel/utils.ts

@@ -1,11 +0,0 @@
-export const defaultAutoplay = false;
-
-export const defaultAutoplayInterval = 3000;
-
-export const defaultInactiveSlideOpacity = 1;
-
-export const defaultInactiveSlideScale = 0.9;
-
-export const defaultActiveSlideScale = 1;
-
-export const defaultInfinite = false;

package/src/ComicViewer/ComicViewerItemProps.ts

@@ -1,15 +0,0 @@
-import { ComicViewerItemData, ErrorInfo } from './ComicViewerProps';
-
-type ComicViewerItemProps<T> = ComicViewerItemData<T> & {
-    /**
-     * FlatListItem is viewable in screen.
-     */
-    isViewable: boolean;
-
-    /**
-     * Error handler
-     */
-    onError?: (errorInfo: ErrorInfo) => void;
-}
-
-export default ComicViewerItemProps;

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { PageProps } from './ViewPagerProps';
-
-const Page = function Page(props: PageProps) {
-    const { isVisible, ...otherProps } = props;
-
-    return (
-        <View
-            collapsable={false}
-            {...otherProps}
-        />
-    );
-};
-
-export default React.memo(Page, (prevProps, nextProps) => {
-    if (prevProps.children === null && nextProps.children === null) {
-        return true;
-    }
-
-    // isVisible is an important condition for determining memos on the web.
-    // Reference ViewPagerWeb's return.
-    if (prevProps.isVisible !== nextProps.isVisible) {
-        return false;
-    }
-
-    if (nextProps.isVisible || nextProps.isNeighbor) {
-        return false;
-    }
-
-    if (prevProps.rerenderKey !== nextProps.rerenderKey) {
-        return false;
-    }
-
-    return prevProps.children !== null && nextProps.children !== null;
-});

package/src/ViewPager/ViewPagerNative.tsx

@@ -1,73 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import type { PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
-import RNPagerView from 'react-native-pager-view';
-import type ViewPagerProps from './ViewPagerProps';
-import {
-    defaultEnableNeighborPageRerender,
-    defaultEnableVisibleHint,
-    defaultLoading,
-    defaultPageComponent,
-    usePageRenderer,
-} from './utils';
-
-export default function ViewPager(props: ViewPagerProps) {
-    const {
-        children,
-        enableVisibleHint = defaultEnableVisibleHint,
-        index,
-        keyboardDismissMode = 'on-drag',
-        loading = defaultLoading,
-        onChange,
-        pageComponent = defaultPageComponent,
-        enableNeighborPageRerender = defaultEnableNeighborPageRerender,
-        pageForceRerenderKey,
-        scrollEnabled = true,
-        style,
-    } = props;
-
-    const indexRef = useRef<number>(index);
-    const pagerRef = useRef<RNPagerView | null>(null);
-
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-        enableNeighborPageRerender,
-    });
-
-    const handlePageSelected = useCallback((e: PagerViewOnPageSelectedEvent) => {
-        indexRef.current = e.nativeEvent.position;
-
-        if (onChange) {
-            onChange(indexRef.current);
-        }
-    }, [onChange]);
-
-    useEffect(() => {
-        const handleNumber = index !== indexRef.current
-            ? requestAnimationFrame(() => pagerRef.current?.setPage(index))
-            : undefined;
-
-        return () => {
-            if (handleNumber) {
-                cancelAnimationFrame(handleNumber);
-            }
-        };
-    }, [index]);
-
-    return (
-        <RNPagerView
-            initialPage={index}
-            keyboardDismissMode={keyboardDismissMode}
-            onPageSelected={handlePageSelected}
-            pageMargin={8}
-            ref={pagerRef}
-            scrollEnabled={scrollEnabled}
-            style={style}
-        >
-            {renderer(children)}
-        </RNPagerView>
-    );
-};

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import type ViewPagerProps from './ViewPagerProps';
-import {
-    defaultEnableNeighborPageRerender,
-    defaultEnableVisibleHint,
-    defaultLoading,
-    defaultPageComponent,
-    usePageRenderer,
-} from './utils';
-
-const styles = StyleSheet.create({
-    root: {
-        // @ts-ignore
-        overflow: 'auto',
-        position: 'relative',
-    },
-    none: { display: 'none' },
-});
-
-export default function ViewPager(props: ViewPagerProps) {
-    const {
-        children,
-        enableVisibleHint = defaultEnableVisibleHint,
-        enableNeighborPageRerender = defaultEnableNeighborPageRerender,
-        index,
-        loading = defaultLoading,
-        pageComponent = defaultPageComponent,
-        pageForceRerenderKey,
-        style,
-    } = props;
-
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        enableNeighborPageRerender,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-    });
-
-    return (
-        <View style={[styles.root, style]}>
-            {React.Children.map(renderer(children), (child, i) =>
-                React.cloneElement(child as React.ReactElement, {
-                    isVisible: i === index,
-                    style: i !== index ? styles.none : StyleSheet.absoluteFill,
-                }),
-            )}
-        </View>
-    );
-};

package/src/ViewPager/index.native.ts

@@ -1 +0,0 @@
-export { default } from './ViewPagerNative';