Bear 遷移到 Acrool

從 Bear 到 Acrool 中，發生了一些變化。

更改 JS Import

import BearReactCarousel from 'bear-react-carousel';
// 改為
import AcroolReactCarousel from '@acrool/react-carousel';

更改 CSS Import

import 'bear-react-carousel/dist/index.css';
// 改為
import '@acrool/react-carousel/dist/index.css';

搜尋並取代字串

bear
// 改為
acrool

移除 elClassName

移除 elClassName 替換回純 className (因為同步名稱增加維護困難) 這是舊的比對表

export default {
    root: 'acrool-react-carousel__root',
    content: 'acrool-react-carousel__content',
    container: 'acrool-react-carousel__container',
    containerInit: 'acrool-react-carousel__container-init',
    slideItem: 'acrool-react-carousel__slide-item',
    slideItemImage: 'acrool-react-carousel__slide-item__image',
    slideItemCard: 'acrool-react-carousel__slide-item__card',
    navGroup: 'acrool-react-carousel__nav-group',
    navPrevButton: 'acrool-react-carousel__nav-prev-button',
    navNextButton: 'acrool-react-carousel__nav-next-button',
    navIcon: 'acrool-react-carousel__nav-icon',
    paginationGroup: 'acrool-react-carousel__pagination-group',
    paginationButton: 'acrool-react-carousel__pagination-button',
    paginationContent: 'acrool-react-carousel__pagination-content',

    testNumber: 'acrool-react-carousel__test-number',
    testWindowSize: 'acrool-react-carousel__window-size',
    cloneIconGroup: 'acrool-react-carousel__clone-icon-group',
    cloneIcon: 'acrool-react-carousel__clone-icon',
};

比如舊的地方使用到

const ReactCarousel = styled(AcroolReactCarousel)`
    .${navGroup}{
        height: 66px;   
    }    
`;

修改為

const ReactCarousel = styled(AcroolReactCarousel)`
    .acrool-react-carousel__nav-group{
        height: 66px;   
    }    
`;