@douyinfe/semi-foundation 2.9.1 → 2.10.0-beta.0

package/carousel/carousel.scss

@@ -0,0 +1,425 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-carousel;
+
+.#{$module} {
+    position: relative;
+    overflow: hidden;
+
+    &-content {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+
+        &-item {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+
+            &-current {
+                z-index: 1;
+            }
+
+        }
+
+        &-fade {
+            
+            > * {
+                opacity: 0;
+            }
+    
+            .#{$module}-content-item-current {
+                opacity: 1;
+            }
+        }
+
+        &-slide {
+            &>*:not(.#{$module}-content-item-current) {
+                visibility: hidden;
+            }
+
+            .#{$module}-content-item-slide-out {
+                display: block;
+                animation: #{$module}-content-item-keyframe-slide-out;
+            }
+        
+            .#{$module}-content-item-slide-in {
+                display: block;
+                animation: #{$module}-content-item-keyframe-slide-in;
+            }
+          
+        }
+
+        &-reverse {
+            .#{$module}-content-item-slide-out {
+                animation: #{$module}-content-item-keyframe-slide-out-reverse ;
+            }
+    
+            .#{$module}-content-item-slide-in {
+                animation: #{$module}-content-item-keyframe-slide-in-reverse ;
+            }
+        }
+    }
+
+    &-indicator {
+        display: flex;
+        align-items: flex-end;
+        z-index: 2;
+
+        &-left {
+            position: absolute;
+            left: $spacing-carousel_indicator-padding;
+            bottom: $spacing-carousel_indicator-padding;
+        }
+
+        &-center {
+            position: absolute;
+            left: 50%;
+            bottom: $spacing-carousel_indicator-padding;
+            transform: translate(-50%);
+        }
+
+        &-right {
+            position: absolute;
+            right: $spacing-carousel_indicator-padding;
+            bottom: $spacing-carousel_indicator-padding;
+        }
+
+    
+        &-dot {
+            .#{$module}-indicator-item {
+                border-radius: $radius-carousel_indicator_dot;
+                cursor: pointer;
+
+                &:not(:last-child) {
+                    margin-right: $spacing-carousel_indicator_dot-marginX;
+                }
+
+                &-small {
+                    width: $width-carousel_indicator_dot_small;
+                    height: $width-carousel_indicator_dot_small;
+                   
+                }
+
+                &-medium {
+                    width: $width-carousel_indicator_dot_medium;
+                    height: $width-carousel_indicator_dot_medium;
+                }
+
+                &-primary {
+                    background-color: $color-carousel_indicator_theme_primary-bg-default;
+
+                    &.#{$module}-indicator-item-active {
+                        background: $color-carousel_indicator_theme_primary-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_primary-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_primary-bg-active;
+                    }
+                }
+
+                &-light {
+
+                    background-color: $color-carousel_indicator_theme_light-bg-default;
+
+                    &.#{$module}-indicator-item-active {
+                        background: $color-carousel_indicator_theme_light-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_light-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_light-bg-active;
+                    }
+                }
+
+                &-dark {
+                    background-color: $color-carousel_indicator_theme_dark-bg-default;
+
+                    &.#{$module}-indicator-item-active {
+                        background-color: $color-carousel_indicator_theme_dark-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_dark-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_dark-bg-active;
+                    }
+                }
+            }
+
+        }
+
+        &-line {
+            width: $width-carousel_indicator_line;
+
+            .#{$module}-indicator-item {
+                flex: 1; 
+                cursor: pointer;
+
+                &:not(:last-child) {
+                    margin-right: $spacing-carousel_indicator_line-marginX;
+                }
+
+                &-small {
+                    height: $height-carousel_indicator_line_small;
+                   
+                }
+
+                &-medium {
+                    height: $height-carousel_indicator_line_medium;
+                }
+
+                &-primary {
+                    background-color: $color-carousel_indicator_theme_primary-bg-default;
+
+                    &.#{$module}-indicator-item-active {
+                        background: $color-carousel_indicator_theme_primary-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_primary-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_primary-bg-active;
+                    }
+                }
+
+                &-light {
+
+                    background-color: $color-carousel_indicator_theme_light-bg-default;
+
+                    &.#{$module}-indicator-item-active {
+                        background: $color-carousel_indicator_theme_light-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_light-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_light-bg-active;
+                    }
+                }
+
+                &-dark {
+
+                    background-color: $color-carousel_indicator_theme_dark-bg-default;
+
+                    &.#{$module}-indicator-item-active {
+                        background: $color-carousel_indicator_theme_dark-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_dark-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_dark-bg-active;
+                    }
+                }
+        
+            }
+
+        }
+
+        &-columnar {
+            .#{$module}-indicator-item {
+                cursor: pointer;
+                
+                &:not(:last-child) {
+                    margin-right: $spacing-carousel_indicator_columnar-marginX;
+                }
+
+                &-small {
+                    width: $width-carousel_indicator_columnar_small;
+                    height: $height-carousel_indicator_columnar_small_default;
+
+                    &.#{$module}-indicator-item-active {
+                        height: $height-carousel_indicator_columnar_small_active;
+                    }
+                }
+
+                &-medium {
+                    width: $width-carousel_indicator_columnar_medium;
+                    height: $height-carousel_indicator_columnar_medium_default;
+
+                    &.#{$module}-indicator-item-active {
+                        height: $height-carousel_indicator_columnar_medium_active;
+                    }
+                }
+
+
+                &-primary {
+                    background-color: $color-carousel_indicator_theme_primary-bg-default;
+
+
+                    &.#{$module}-indicator-item-active {
+                        background: $color-carousel_indicator_theme_primary-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_primary-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_primary-bg-active;
+                    }
+                }
+
+                &-light {
+                    background-color: $color-carousel_indicator_theme_light-bg-default;
+
+                    &.#{$module}-indicator-item-active {
+                        background: $color-carousel_indicator_theme_light-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_light-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_light-bg-active;
+                    }
+                }
+
+                &-dark {
+                    background-color: $color-carousel_indicator_theme_dark-bg-default;
+                    
+                    &.#{$module}-indicator-item-active {
+                        background: $color-carousel_indicator_theme_dark-bg-active;
+                    }
+
+                    &:hover {
+                        background-color: $color-carousel_indicator_theme_dark-bg-hover;
+                    }
+
+                    &:active {
+                        background: $color-carousel_indicator_theme_dark-bg-active;
+                    }
+                }
+        
+            }
+
+        }
+    }
+
+    &-arrow {
+        display: flex;
+        font-size: $width-carousel_arrow;
+        cursor: pointer;
+
+        &-prev {
+            position: absolute;
+            top: 50%;
+            left: $spacing-carousel_arrow-left;
+            transform: translateY(-50%);
+            z-index: 2;
+        }
+
+        &-next {
+            position: absolute;
+            top: 50%;
+            right: $spacing-carousel_arrow-right;
+            transform: translateY(-50%);
+            z-index: 2;
+        }
+
+        &-light {
+            color: $color-carousel_arrow_theme_light-bg-default;
+
+            &:hover {
+                color: $color-carousel_arrow_theme_light-bg-hover;
+            }
+        }
+
+
+        &-primary {
+            color: $color-carousel_arrow_theme_primary-bg-default;
+
+            &:hover {
+                color: $color-carousel_arrow_theme_primary-bg-hover;
+            }
+        }
+
+        &-dark {
+            color: $color-carousel_arrow_theme_dark-bg-default;
+
+            &:hover {
+                color: $color-carousel_arrow_theme_dark-bg-hover;
+            }
+        }
+
+    }
+
+    &-arrow-hover div {
+        z-index: 2;
+        opacity: 0;
+        transition: all .3s;
+    }
+    
+    &:hover {
+        .#{$module}-arrow-hover div {
+            opacity: 1;
+        }
+    }
+}
+
+@keyframes #{$module}-content-item-keyframe-slide-in {
+
+    from {
+        transform: translateX(-100%);
+    }
+    
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes #{$module}-content-item-keyframe-slide-out {
+
+    from {
+        transform: translateX(0);
+    }
+    
+    to {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes #{$module}-content-item-keyframe-slide-in-reverse {
+
+    from {
+        transform: translateX(100%);
+    }
+  
+    to {
+        transform: translateX(0);
+    }
+}
+  
+@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
+
+    from {
+        transform: translateX(0);
+    }
+  
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+@import "./rtl.scss";

package/carousel/constants.ts

@@ -0,0 +1,32 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+
+const cssClasses = {
+    CAROUSEL: `${BASE_CLASS_PREFIX}-carousel`,
+    CAROUSEL_INDICATOR: `${BASE_CLASS_PREFIX}-carousel-indicator`,
+    CAROUSEL_INDICATOR_LINE: `${BASE_CLASS_PREFIX}-carousel-indicator-line`,
+    CAROUSEL_INDICATOR_DOT: `${BASE_CLASS_PREFIX}-carousel-indicator-dot`,
+    CAROUSEL_INDICATOR_COLUMNAR: `${BASE_CLASS_PREFIX}-carousel-indicator-columnar`,
+    CAROUSEL_INDICATOR_INACTIVE: `${BASE_CLASS_PREFIX}-carousel-indicator-inactive`,
+    CAROUSEL_INDICATOR_ACTIVE: `${BASE_CLASS_PREFIX}-carousel-indicator-active`,
+    CAROUSEL_CONTENT: `${BASE_CLASS_PREFIX}-carousel-content`,
+    CAROUSEL_ARROW: `${BASE_CLASS_PREFIX}-carousel-arrow`,
+};
+
+const numbers = {
+    DEFAULT_ACTIVE_INDEX: 0,
+    DEFAULT_INTERVAL: 2000,
+    DEFAULT_SPEED: 300,
+};
+
+const strings = {
+    ANIMATION_MAP: ['slide', 'fade'],
+    DIRECTION: ['left', 'right'],
+    TYPE_MAP: ['columnar', 'line', 'dot'],
+    THEME_MAP: ['dark', 'primary', 'light'],
+    POSITION_MAP: ['left', 'center', 'right'],
+    ARROW_MAP: ['always', 'hover'],
+    SIZE: ['small', 'medium'],
+    TRIGGER: ['click', 'hover'],
+} as const;
+
+export { cssClasses, numbers, strings };

package/carousel/foundation.ts

@@ -0,0 +1,166 @@
+import { isObject, get } from 'lodash';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { numbers } from './constants';
+import { throttle } from 'lodash';
+
+export interface CarouselAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyChange: (activeIndex: number, preIndex: number) => void;
+    setNewActiveIndex: (activeIndex: number) => void;
+    setPreActiveIndex: (activeIndex: number) => void;
+    setIsReverse: (isReverse: boolean) => void;   
+    setIsInit: (isInit: boolean) => void;   
+}
+
+class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CarouselAdapter<P, S>, P, S> {
+    throttleChange: any;
+
+    constructor(adapter: CarouselAdapter<P, S>) {
+        super({ ...adapter });
+        this.throttleChange = throttle(this.onIndicatorChange, this.getSwitchingTime()); 
+    }
+
+    _interval = null;
+
+    play(interval: number): void {
+        if (this._interval) {
+            clearInterval(this._interval);
+        }
+        this._interval = setInterval(() => {
+            this.next();
+        }, interval);
+    }
+
+    stop(): void {
+        if (this._interval){
+            clearInterval(this._interval);
+        }
+    }
+
+    goTo(activeIndex: number): void {
+        const { activeIndex: stateActiveIndex } = this.getStates();
+        const targetIndex = this.getValidIndex(activeIndex);
+        this._adapter.setIsReverse(stateActiveIndex > targetIndex);
+        if (this.getIsControledComponent()) {
+            this._notifyChange(targetIndex);
+        } else {
+            this._notifyChange(targetIndex);
+            this.handleNewActiveIndex(targetIndex);
+        }
+    }
+
+    next(): void {
+        const { activeIndex: stateActiveIndex } = this.getStates();
+        const targetIndex = this.getValidIndex(stateActiveIndex + 1);
+        this._adapter.setIsReverse(false);
+        if (this.getIsControledComponent()) {
+            this._notifyChange(targetIndex);
+        } else {
+            this._notifyChange(targetIndex);
+            this.handleNewActiveIndex(targetIndex);
+        }
+    }
+
+    prev(): void {
+        const { activeIndex: stateActiveIndex } = this.getStates();
+        const targetIndex = this.getValidIndex(stateActiveIndex - 1);
+        this._adapter.setIsReverse(true);
+        if (this.getIsControledComponent()) {
+            this._notifyChange(targetIndex);
+        } else {
+            this._notifyChange(targetIndex);
+            this.handleNewActiveIndex(targetIndex);
+        }
+    }
+
+    destroy(): void {
+        this._unregisterInterval();
+    }
+
+    _unregisterInterval() {
+        if (this._interval) {
+            clearInterval(this._interval);
+            this._interval = null;
+        }
+    }
+
+
+    _notifyChange(activeIndex: number): void {
+        const { activeIndex: stateActiveIndex, isInit } = this.getStates();
+        if (isInit){
+            this._adapter.setIsInit(false);
+        }
+        if (stateActiveIndex !== activeIndex) {
+            this._adapter.setPreActiveIndex(stateActiveIndex);
+            this._adapter.notifyChange(activeIndex, stateActiveIndex);
+        }
+    }
+
+    getValidIndex(index: number): number {
+        const { children } = this.getStates();
+        return (index + children.length) % children.length;
+    }
+
+    getSwitchingTime(): number {
+        const { autoPlay, speed } = this.getProps(); 
+        const autoPlayType = typeof autoPlay;
+        if (autoPlayType === 'boolean' && autoPlay){
+            return numbers.DEFAULT_INTERVAL + speed;
+        }
+        if (isObject(autoPlay)){
+            return get(autoPlay, 'interval', numbers.DEFAULT_INTERVAL) + speed;
+        }
+        return speed;
+    }
+
+    getIsControledComponent(): boolean {
+        return this._isInProps('activeIndex');
+    }
+
+    handleAutoPlay(): void { 
+        const { autoPlay } = this.getProps(); 
+        const autoPlayType = typeof autoPlay;
+        if ((autoPlayType === 'boolean' && autoPlay) || isObject(autoPlay)){
+            this.play(this.getSwitchingTime());
+        }
+    }
+
+    handleKeyDown(event: any): void{
+        if (event.key === 'ArrowLeft') {
+            this.prev();
+        }
+        if (event.key === 'ArrowRight') {
+            this.next();
+        }
+    }
+
+    onIndicatorChange(activeIndex: number): void {
+        const { activeIndex: stateActiveIndex } = this.getStates();
+        this._adapter.setIsReverse(stateActiveIndex > activeIndex);
+        this._notifyChange(activeIndex);
+        if (!this.getIsControledComponent()) {
+            this.handleNewActiveIndex(activeIndex);
+        }
+    }
+
+
+    handleNewActiveIndex(activeIndex: number): void {
+        const { activeIndex: stateActiveIndex } = this.getStates();
+        if (stateActiveIndex !== activeIndex) {
+            this._adapter.setNewActiveIndex(activeIndex);
+        }
+    }
+
+    getDefaultActiveIndex(): number {
+        let activeIndex;
+        const props = this.getProps();
+        if ('activeIndex' in props) {
+            activeIndex = props.activeIndex;
+        } else if ('defaultActiveIndex' in props) {
+            activeIndex = props.defaultActiveIndex;
+        }
+        return activeIndex;
+    }
+
+}
+
+export default CarouselFoundation;

package/carousel/rtl.scss

@@ -0,0 +1,47 @@
+$module: #{$prefix}-carousel;
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+        
+        &-indicator {
+            display: flex;
+
+            &-dot {
+                .#{$module}-indicator-item {
+                    &:not(:last-child) {
+                        margin-right: 0;
+                        margin-left: $spacing-carousel_indicator_dot-marginX;
+                    }
+                }
+            }
+
+            &-columnar {
+                .#{$module}-indicator-item {
+                    &:not(:last-child) {
+                        margin-right: 0;
+                        margin-left: $spacing-carousel_indicator_columnar-marginX;
+                    }
+                }
+            }
+        }
+
+        &-arrow {
+            flex-direction: row-reverse;
+
+            &-prev {
+                left: auto;
+                right: $spacing-carousel_arrow-right;
+                transform: scaleX(-1) translateY(-50%);
+                z-index: 2;
+            }
+            
+            &-next {
+                left: $spacing-carousel_arrow-left;
+                transform: scaleX(-1) translateY(-50%);
+                right: auto;
+                z-index: 2;
+            }
+        }
+    }
+}