69 | 
70 |
72 |
70 | Legend 1
71 |
73 | 
74 |
76 |
74 | Legend 2
75 |
77 | 
78 |
80 |
78 | Legend 3
79 |
16 | 
17 |
19 | ))
20 | }
21 | Legend
18 |
39 |
40 |
41 | );
42 |
43 |
7 | 
8 |
10 |
8 | Legend 1
9 |
11 | 
12 |
14 |
12 | Legend 2
13 |
15 | 
16 |
18 |
16 | Legend 3
17 |
19 | 
20 |
22 |
20 | Legend 4
21 |
23 | 
24 |
26 |
24 | Legend 5
25 |
27 | 
28 |
30 |
28 | Legend 6
29 |
31 | 
32 |
34 |
32 | Legend 7
33 |
35 | 
36 |
38 |
36 | Legend 8
37 |
39 | 
40 |
42 |
40 | Legend 9
41 |
43 | 
44 |
46 |
44 | Legend 10
45 |
47 | 
48 |
50 |
48 | Legend 11
49 |
51 | 
52 |
54 |
52 | Legend 12
53 |
55 | 
56 |
58 |
56 | Legend 13
57 |
59 | 
60 |
62 |
60 | Legend 14
61 |
8 |
10 | );
11 |
12 | render(,
52 | ,
53 | ,
54 | 
,
55 | 
,
56 | 
,
57 | 
,
58 | ];
59 |
60 | const renderDefaultComponent = ({ children = baseChildren, ...props }: Partialitem
)).toMatchSnapshot();
136 | });
137 |
138 | it('renderThumbs should return a list of images extracted from the children', () => {
139 | expect(
140 | componentInstance.props.renderThumbs!([
141 |
143 | Legend 1
144 |
147 | Legend 2
148 |
151 | Legend 3
152 |
155 | Legend 4
156 |
159 | Legend 5
160 |
163 | Legend 6
164 |
167 | Legend 7
168 |],
215 | });
216 |
217 | expect(componentInstance.bindEvents).toHaveBeenCalledTimes(1);
218 | });
219 | });
220 |
221 | describe('componentDidUpdate', () => {
222 | it('should unbind the events', () => {
223 | componentInstance.setState({ swiping: false });
224 | componentInstance.componentDidUpdate({}, { swiping: true });
225 | expect(stopSwipingHandler).toHaveBeenCalledTimes(1);
226 | });
227 | });
228 |
229 | describe('componentWillUnmount', () => {
230 | beforeEach(() => {
231 | componentInstance.unbindEvents = jest.fn();
232 | componentInstance.componentWillUnmount();
233 | });
234 | it('should unbind the events', () => {
235 | expect(componentInstance.unbindEvents).toHaveBeenCalledTimes(1);
236 | });
237 | });
238 |
239 | describe('bindEvents', () => {
240 | describe('when useKeyboardArrows is false', () => {
241 | beforeEach(() => {
242 | window.addEventListener = jest.fn();
243 | document.addEventListener = jest.fn();
244 | componentInstance.bindEvents();
245 | });
246 |
247 | it('should bind resize to updateSizes', () => {
248 | expect(window.addEventListener).toHaveBeenCalledWith('resize', componentInstance.updateSizes);
249 | });
250 |
251 | it('should bind DOMContentLoaded to updateSizes', () => {
252 | expect(window.addEventListener).toHaveBeenCalledWith('DOMContentLoaded', componentInstance.updateSizes);
253 | });
254 |
255 | it('should not bind keydown to navigateWithKeyboard', () => {
256 | expect(document.addEventListener).not.toHaveBeenCalledWith(
257 | 'keydown',
258 | componentInstance.navigateWithKeyboard
259 | );
260 | });
261 | });
262 |
263 | describe('when useKeyboardArrows is true', () => {
264 | beforeEach(() => {
265 | renderDefaultComponent({
266 | useKeyboardArrows: true,
267 | });
268 |
269 | window.addEventListener = jest.fn();
270 | document.addEventListener = jest.fn();
271 | componentInstance.bindEvents();
272 | });
273 |
274 | it('should bind resize to updateSizes', () => {
275 | expect(window.addEventListener).toHaveBeenCalledWith('resize', componentInstance.updateSizes);
276 | });
277 |
278 | it('should bind DOMContentLoaded to updateSizes', () => {
279 | expect(window.addEventListener).toHaveBeenCalledWith('DOMContentLoaded', componentInstance.updateSizes);
280 | });
281 |
282 | it('should bind keydown to navigateWithKeyboard', () => {
283 | expect(document.addEventListener).toHaveBeenCalledWith(
284 | 'keydown',
285 | componentInstance.navigateWithKeyboard
286 | );
287 | });
288 | });
289 | });
290 |
291 | describe('unbindEvents', () => {
292 | describe('when useKeyboardArrows is false', () => {
293 | beforeEach(() => {
294 | window.removeEventListener = jest.fn();
295 | document.removeEventListener = jest.fn();
296 | componentInstance.unbindEvents();
297 | });
298 |
299 | it('should unbind resize to updateSizes', () => {
300 | expect(window.removeEventListener).toHaveBeenCalledWith('resize', componentInstance.updateSizes);
301 | });
302 |
303 | it('should unbind DOMContentLoaded to updateSizes', () => {
304 | expect(window.removeEventListener).toHaveBeenCalledWith(
305 | 'DOMContentLoaded',
306 | componentInstance.updateSizes
307 | );
308 | });
309 |
310 | it('should not unbind keydown to navigateWithKeyboard', () => {
311 | expect(document.removeEventListener).not.toHaveBeenCalledWith(
312 | 'keydown',
313 | componentInstance.navigateWithKeyboard
314 | );
315 | });
316 |
317 | it('should not set a tabIndex on the carousel-root', () => {
318 | expect(component.find('.carousel-root[tabIndex=0]').length).toBe(0);
319 | });
320 | });
321 |
322 | describe('when useKeyboardArrows is true', () => {
323 | beforeEach(() => {
324 | renderDefaultComponent({
325 | useKeyboardArrows: true,
326 | });
327 |
328 | window.removeEventListener = jest.fn();
329 | document.removeEventListener = jest.fn();
330 | componentInstance.unbindEvents();
331 | });
332 |
333 | it('should unbind resize to updateSizes', () => {
334 | expect(window.removeEventListener).toHaveBeenCalledWith('resize', componentInstance.updateSizes);
335 | });
336 |
337 | it('should unbind DOMContentLoaded to updateSizes', () => {
338 | expect(window.removeEventListener).toHaveBeenCalledWith(
339 | 'DOMContentLoaded',
340 | componentInstance.updateSizes
341 | );
342 | });
343 |
344 | it('should unbind keydown to navigateWithKeyboard', () => {
345 | expect(document.removeEventListener).toHaveBeenCalledWith(
346 | 'keydown',
347 | componentInstance.navigateWithKeyboard
348 | );
349 | });
350 |
351 | it('should set a tabIndex on the carousel-root', () => {
352 | expect(component.find('.carousel-root[tabIndex=0]').length).toBe(1);
353 | });
354 | });
355 | });
356 |
357 | describe('getInitialImage', () => {
358 | it('Returns the first image within the declared selected item', () => {
359 | renderDefaultComponent({
360 | selectedItem: 2,
361 | });
362 |
363 | const initialImage = componentInstance.getInitialImage();
364 | const expectedMatchingImageComponent = baseChildren[2];
365 |
366 | expect(initialImage.src.endsWith(expectedMatchingImageComponent.props.src)).toEqual(true);
367 | });
368 | });
369 |
370 | describe('navigateWithKeyboard', () => {
371 | const setActiveElement = (element: HTMLElement) => {
372 | (document.activeElement as any) = element;
373 | };
374 |
375 | beforeEach(() => {
376 | // jsdom has issues with activeElement so we are hacking it for this specific scenario
377 | Object.defineProperty(document, 'activeElement', {
378 | writable: true,
379 | });
380 | });
381 |
382 | describe('Axis === horizontal', () => {
383 | beforeEach(() => {
384 | renderDefaultComponent({
385 | axis: 'horizontal',
386 | useKeyboardArrows: true,
387 | });
388 |
389 | componentInstance.increment = jest.fn();
390 | componentInstance.decrement = jest.fn();
391 | });
392 |
393 | it('should not navigate if the focus is outside of the carousel', () => {
394 | componentInstance.navigateWithKeyboard({ keyCode: 39 });
395 | componentInstance.navigateWithKeyboard({ keyCode: 37 });
396 |
397 | expect(componentInstance.increment).not.toHaveBeenCalled();
398 | expect(componentInstance.decrement).not.toHaveBeenCalled();
399 | });
400 |
401 | it('should call only increment on ArrowRight (39)', () => {
402 | setActiveElement(componentInstance.carouselWrapperRef);
403 |
404 | componentInstance.navigateWithKeyboard({ keyCode: 39 });
405 |
406 | expect(componentInstance.increment).toHaveBeenCalledTimes(1);
407 | expect(componentInstance.decrement).not.toHaveBeenCalled();
408 | });
409 |
410 | it('should call only decrement on ArrowLeft (37)', () => {
411 | setActiveElement(componentInstance.carouselWrapperRef);
412 |
413 | componentInstance.navigateWithKeyboard({ keyCode: 37 });
414 |
415 | expect(componentInstance.decrement).toHaveBeenCalledTimes(1);
416 | expect(componentInstance.increment).not.toHaveBeenCalled();
417 | });
418 |
419 | it('should not call increment on ArrowDown (40)', () => {
420 | setActiveElement(componentInstance.carouselWrapperRef);
421 |
422 | componentInstance.navigateWithKeyboard({ keyCode: 40 });
423 |
424 | expect(componentInstance.increment).not.toHaveBeenCalled();
425 | expect(componentInstance.decrement).not.toHaveBeenCalled();
426 | });
427 |
428 | it('should not call decrement on ArrowUp (38)', () => {
429 | setActiveElement(componentInstance.carouselWrapperRef);
430 |
431 | componentInstance.navigateWithKeyboard({ keyCode: 38 });
432 |
433 | expect(componentInstance.decrement).not.toHaveBeenCalled();
434 | expect(componentInstance.increment).not.toHaveBeenCalled();
435 | });
436 | });
437 |
438 | describe('Axis === vertical', () => {
439 | beforeEach(() => {
440 | renderDefaultComponent({
441 | axis: 'vertical',
442 | useKeyboardArrows: true,
443 | });
444 |
445 | componentInstance.increment = jest.fn();
446 | componentInstance.decrement = jest.fn();
447 | });
448 |
449 | it('should not navigate if the focus is outside of the carousel', () => {
450 | componentInstance.navigateWithKeyboard({ keyCode: 40 });
451 | componentInstance.navigateWithKeyboard({ keyCode: 38 });
452 |
453 | expect(componentInstance.increment).not.toHaveBeenCalled();
454 | expect(componentInstance.decrement).not.toHaveBeenCalled();
455 | });
456 |
457 | it('should call only increment on ArrowDown (40)', () => {
458 | setActiveElement(componentInstance.carouselWrapperRef);
459 | componentInstance.navigateWithKeyboard({ keyCode: 40 });
460 |
461 | expect(componentInstance.increment).toHaveBeenCalledTimes(1);
462 | expect(componentInstance.decrement).not.toHaveBeenCalled();
463 | });
464 |
465 | it('should call only decrement on ArrowUp (38)', () => {
466 | setActiveElement(componentInstance.carouselWrapperRef);
467 | componentInstance.navigateWithKeyboard({ keyCode: 38 });
468 |
469 | expect(componentInstance.decrement).toHaveBeenCalledTimes(1);
470 | expect(componentInstance.increment).not.toHaveBeenCalled();
471 | });
472 |
473 | it('should not call increment on ArrowRight (39)', () => {
474 | setActiveElement(componentInstance.carouselWrapperRef);
475 | componentInstance.navigateWithKeyboard({ keyCode: 39 });
476 |
477 | expect(componentInstance.increment).not.toHaveBeenCalled();
478 | expect(componentInstance.decrement).not.toHaveBeenCalled();
479 | });
480 |
481 | it('should not call decrement on ArrowLeft (37)', () => {
482 | setActiveElement(componentInstance.carouselWrapperRef);
483 | componentInstance.navigateWithKeyboard({ keyCode: 37 });
484 |
485 | expect(componentInstance.decrement).not.toHaveBeenCalled();
486 | expect(componentInstance.increment).not.toHaveBeenCalled();
487 | });
488 | });
489 | });
490 |
491 | describe('changeItem', () => {
492 | beforeEach(() => {
493 | componentInstance.selectItem = jest.fn();
494 | componentInstance.getFirstItem = jest.fn().mockReturnValue(2);
495 | componentInstance.changeItem(1)();
496 | });
497 |
498 | it('should call selectItem sending selectedItem as 1', () => {
499 | expect(componentInstance.selectItem.mock.calls[0][0]).toEqual({
500 | selectedItem: 1,
501 | });
502 | });
503 | });
504 |
505 | describe('selectItem', () => {
506 | beforeEach(() => {
507 | componentInstance.setState = jest.fn();
508 | componentInstance.handleOnChange = jest.fn();
509 | componentInstance.selectItem({
510 | selectedItem: 1,
511 | ramdomNumber: 2,
512 | });
513 | });
514 |
515 | it('should call setState sending the argument received, with previousItem', () => {
516 | expect(componentInstance.setState.mock.calls[0][0]).toEqual({
517 | previousItem: 0,
518 | selectedItem: 1,
519 | ramdomNumber: 2,
520 | });
521 | });
522 |
523 | it('should call handleOnChange sending only selectedItem', () => {
524 | expect(componentInstance.handleOnChange.mock.calls[0][0]).toBe(1);
525 | });
526 | });
527 |
528 | it('should add a thumb-wrapper container', () => {
529 | expect(component.find('.thumbs-wrapper').length).toBe(1);
530 | });
531 |
532 | it('should insert aria-label if provided', () => {
533 | const ariaLabel = 'Carousel title';
534 | renderDefaultComponent({ ariaLabel });
535 | expect(component.find(`[aria-label="${ariaLabel}"]`)).toBeTruthy();
536 | });
537 |
538 | describe('Moving', () => {
539 | beforeEach(() => {
540 | componentInstance.showArrows = true;
541 | componentInstance.lastPosition = 3;
542 | componentInstance.visibleItems = 3;
543 | });
544 |
545 | it('should set the selectedItem from the props', () => {
546 | renderDefaultComponent({ selectedItem: 3 });
547 | expect(componentInstance.state.selectedItem).toBe(3);
548 | });
549 |
550 | it('should update the position of the Carousel if selectedItem is changed', () => {
551 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[2]).simulate('click');
552 | expect(componentInstance.state.selectedItem).toBe(2);
553 |
554 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[3]).simulate('click');
555 | expect(componentInstance.state.selectedItem).toBe(3);
556 | });
557 | });
558 |
559 | describe('Selecting', () => {
560 | it('should set the index as selectedItem when clicked', () => {
561 | expect(componentInstance.state.selectedItem).toBe(0);
562 |
563 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[1]).simulate('click');
564 | expect(componentInstance.state.selectedItem).toBe(1);
565 |
566 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[3]).simulate('click');
567 | expect(componentInstance.state.selectedItem).toBe(3);
568 | });
569 |
570 | it('should call a given onSelectItem function when an item is clicked', () => {
571 | var mockedFunction = jest.fn();
572 |
573 | renderDefaultComponent({ onClickItem: mockedFunction });
574 |
575 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[1]).simulate('click');
576 | expect(mockedFunction).toBeCalled();
577 |
578 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[0]).simulate('click');
579 | expect(componentInstance.state.selectedItem).toBe(0);
580 | });
581 |
582 | it('should call onSelectItem function when exactly 1 child is present', () => {
583 | var mockedFunction = jest.fn();
584 |
585 | renderDefaultComponent({
586 | children: [],
587 | onClickItem: mockedFunction,
588 | });
589 | expect(componentInstance.state.selectedItem).toBe(0);
590 |
591 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[0]).simulate('click');
592 | expect(componentInstance.state.selectedItem).toBe(0);
593 | expect(mockedFunction).toBeCalled();
594 | });
595 | });
596 |
597 | const findDOMNodeByClass = (instance: any, classNames: string) =>
598 | (ReactDOM.findDOMNode(instance)! as HTMLElement).querySelectorAll(classNames);
599 |
600 | describe('Navigating', () => {
601 | beforeEach(() => {
602 | componentInstance.showArrows = true;
603 | });
604 |
605 | it('should disable the left arrow if we are showing the first item', () => {
606 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[0]).simulate('click');
607 | expect(
608 | findDOMNodeByClass(componentInstance, '.carousel-slider .control-prev.control-disabled')
609 | ).toHaveLength(1);
610 | });
611 |
612 | it('should enable the left arrow if we are showing other than the first item', () => {
613 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[1]).simulate('click');
614 | expect(
615 | findDOMNodeByClass(componentInstance, '.carousel-slider .control-prev.control-disabled')
616 | ).toHaveLength(0);
617 | });
618 |
619 | it('should disable the right arrow if we reach the lastPosition', () => {
620 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[1]).simulate('click');
621 | expect(
622 | findDOMNodeByClass(componentInstance, '.carousel-slider .control-next.control-disabled')
623 | ).toHaveLength(0);
624 |
625 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[6]).simulate('click');
626 | expect(
627 | findDOMNodeByClass(componentInstance, '.carousel-slider .control-next.control-disabled')
628 | ).toHaveLength(1);
629 | });
630 | });
631 |
632 | describe('Infinite Loop', () => {
633 | beforeEach(() => {
634 | renderDefaultComponent({
635 | infiniteLoop: true,
636 | });
637 | });
638 |
639 | it('should enable the prev arrow if we are showing the first item', () => {
640 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[0]).simulate('click');
641 | expect(
642 | findDOMNodeByClass(componentInstance, '.carousel-slider .control-prev.control-disabled')
643 | ).toHaveLength(0);
644 | });
645 |
646 | it('should enable the right arrow if we reach the lastPosition', () => {
647 | findDOMNodeWithinWrapper(component, componentInstance.itemsRef[6]).simulate('click');
648 | expect(
649 | findDOMNodeByClass(componentInstance, '.carousel-slider .control-next.control-disabled')
650 | ).toHaveLength(0);
651 | });
652 |
653 | it('should move to the first one if increment was called in the last', () => {
654 | componentInstance.setState({
655 | selectedItem: lastItemIndex,
656 | });
657 |
658 | expect(componentInstance.state.selectedItem).toBe(lastItemIndex);
659 |
660 | componentInstance.increment();
661 |
662 | expect(componentInstance.state.selectedItem).toBe(0);
663 | });
664 |
665 | it('should move to the last one if decrement was called in the first', () => {
666 | expect(componentInstance.state.selectedItem).toBe(0);
667 |
668 | componentInstance.decrement();
669 |
670 | expect(componentInstance.state.selectedItem).toBe(lastItemIndex);
671 | });
672 |
673 | it('should render the clone slides', () => {
674 | expect(
675 | component
676 | .find('.slide')
677 | .at(0)
678 | .key()
679 | ).toContain('itemKey6clone');
680 | expect(
681 | component
682 | .find('.slide')
683 | .at(8)
684 | .key()
685 | ).toContain('itemKey0clone');
686 | });
687 |
688 | it('should work with minimal children', () => {
689 | renderDefaultComponent({
690 | children: [, ],
691 | infiniteLoop: true,
692 | });
693 | componentInstance.decrement();
694 | expect(componentInstance.state.selectedItem).toBe(lastItemIndex);
695 |
696 | renderDefaultComponent({
697 | children: [],
698 | infiniteLoop: true,
699 | });
700 | componentInstance.decrement();
701 | expect(componentInstance.state.selectedItem).toBe(lastItemIndex);
702 | });
703 |
704 | it('should not render any Swipe component with one child', () => {
705 | renderDefaultComponent({
706 | children: [],
707 | infiniteLoop: true,
708 | });
709 |
710 | expect(component.find(Swipe).length).toBe(0);
711 | });
712 | });
713 |
714 | describe('Auto Play', () => {
715 | beforeEach(() => {
716 | jest.useFakeTimers();
717 | window.addEventListener = jest.fn();
718 |
719 | renderDefaultComponent({
720 | autoPlay: true,
721 | });
722 | });
723 |
724 | afterEach(() => {
725 | jest.useRealTimers();
726 | });
727 |
728 | it('should disable when only 1 child is present', () => {
729 | renderDefaultComponent({
730 | children: [],
731 | autoPlay: true,
732 | });
733 |
734 | expect(componentInstance.state.selectedItem).toBe(0);
735 |
736 | jest.runOnlyPendingTimers();
737 |
738 | expect(componentInstance.state.selectedItem).toBe(0);
739 | });
740 |
741 | it('should change items automatically', () => {
742 | expect(componentInstance.state.selectedItem).toBe(0);
743 |
744 | jest.runOnlyPendingTimers();
745 |
746 | expect(componentInstance.state.selectedItem).toBe(1);
747 |
748 | jest.runOnlyPendingTimers();
749 |
750 | expect(componentInstance.state.selectedItem).toBe(2);
751 | });
752 |
753 | it('should not move automatically if hovering', () => {
754 | componentInstance.stopOnHover();
755 |
756 | expect(componentInstance.state.selectedItem).toBe(0);
757 |
758 | jest.runOnlyPendingTimers();
759 |
760 | expect(componentInstance.state.selectedItem).toBe(0);
761 |
762 | componentInstance.autoPlay();
763 |
764 | jest.runOnlyPendingTimers();
765 |
766 | expect(componentInstance.state.selectedItem).toBe(1);
767 | });
768 |
769 | it('should restart auto-play after disabling it via props', () => {
770 | expect(componentInstance.state.selectedItem).toBe(0);
771 |
772 | jest.runOnlyPendingTimers();
773 |
774 | expect(componentInstance.state.selectedItem).toBe(1);
775 |
776 | component.setProps({
777 | autoPlay: false,
778 | });
779 |
780 | jest.runOnlyPendingTimers();
781 |
782 | expect(componentInstance.state.selectedItem).toBe(1);
783 |
784 | component.setProps({
785 | autoPlay: true,
786 | });
787 |
788 | jest.runOnlyPendingTimers();
789 |
790 | expect(componentInstance.state.selectedItem).toBe(2);
791 | });
792 |
793 | it('should reset when changing the slide through indicator', () => {
794 | renderDefaultComponent({ interval: 3000, autoPlay: true });
795 | jest.advanceTimersByTime(2000);
796 |
797 | expect(componentInstance.state.selectedItem).toBe(0);
798 |
799 | const changeToSecondItem = componentInstance.changeItem(1);
800 | // it only runs with an event
801 | changeToSecondItem(new MouseEvent('click'));
802 |
803 | jest.advanceTimersByTime(1000);
804 |
805 | expect(componentInstance.state.selectedItem).toBe(1);
806 | });
807 | });
808 |
809 | describe('Infinite Loop and Auto Play', () => {
810 | beforeEach(() => {
811 | jest.useFakeTimers();
812 | window.addEventListener = jest.fn();
813 |
814 | renderDefaultComponent({
815 | children: [
816 | ,
817 | ,
818 | ,
819 | ],
820 | infiniteLoop: true,
821 | autoPlay: true,
822 | });
823 | });
824 |
825 | afterEach(() => {
826 | jest.useRealTimers();
827 | });
828 |
829 | it('should automatically loop infinitely', () => {
830 | expect(componentInstance.state.selectedItem).toBe(0);
831 |
832 | jest.runOnlyPendingTimers();
833 |
834 | expect(componentInstance.state.selectedItem).toBe(1);
835 |
836 | jest.runOnlyPendingTimers();
837 |
838 | expect(componentInstance.state.selectedItem).toBe(2);
839 |
840 | jest.runOnlyPendingTimers();
841 |
842 | expect(componentInstance.state.selectedItem).toBe(0);
843 |
844 | jest.runOnlyPendingTimers();
845 |
846 | expect(componentInstance.state.selectedItem).toBe(1);
847 |
848 | jest.runOnlyPendingTimers();
849 |
850 | expect(componentInstance.state.selectedItem).toBe(2);
851 | });
852 | });
853 |
854 | describe('Mouse enter/leave', () => {
855 | describe('onMouseEnter', () => {
856 | it('should set isMouseEntered to true', () => {
857 | componentInstance.stopOnHover();
858 | expect(componentInstance.state.isMouseEntered).toBe(true);
859 | });
860 |
861 | it('should stop auto play when hovering', () => {
862 | componentInstance.clearAutoPlay = jest.fn();
863 | componentInstance.stopOnHover();
864 | expect(componentInstance.clearAutoPlay).toHaveBeenCalledTimes(1);
865 | });
866 | });
867 |
868 | describe('onMouseLeave', () => {
869 | it('should set isMouseEntered to false', () => {
870 | componentInstance.startOnLeave();
871 | expect(componentInstance.state.isMouseEntered).toBe(false);
872 | });
873 |
874 | it('should start auto play again after hovering', () => {
875 | componentInstance.autoPlay = jest.fn();
876 | componentInstance.startOnLeave();
877 | expect(componentInstance.autoPlay).toHaveBeenCalledTimes(1);
878 | });
879 | });
880 | });
881 |
882 | describe('Focus', () => {
883 | describe('calling forceFocus', () => {
884 | it('should call carousel wrapper focus', () => {
885 | componentInstance.carouselWrapperRef.focus = jest.fn();
886 | componentInstance.forceFocus();
887 | expect(componentInstance.carouselWrapperRef.focus).toHaveBeenCalledTimes(1);
888 | });
889 | });
890 |
891 | describe('AutoFocus === true', () => {
892 | it('should call forceFocus on componentDidMount', () => {
893 | const forceFocusSpy = jest.spyOn(Carousel.prototype, 'forceFocus');
894 | renderDefaultComponent({ autoFocus: true });
895 | expect(forceFocusSpy).toHaveBeenCalledTimes(1);
896 | forceFocusSpy.mockReset();
897 | forceFocusSpy.mockRestore();
898 | });
899 |
900 | it('should call forceFocus conditionally on componentDidUpdate', () => {
901 | componentInstance.forceFocus = jest.fn();
902 |
903 | component.setProps({ autoFocus: false });
904 | expect(componentInstance.forceFocus).toHaveBeenCalledTimes(0);
905 |
906 | component.setProps({ autoFocus: true });
907 | expect(componentInstance.forceFocus).toHaveBeenCalledTimes(1);
908 | });
909 | });
910 | });
911 |
912 | describe('Swiping', () => {
913 | describe('onSwipeStart', () => {
914 | it('should set swiping to true', () => {
915 | componentInstance.onSwipeStart();
916 | expect(componentInstance.state.swiping).toBe(true);
917 | });
918 |
919 | it('should call onSwipeStart callback', () => {
920 | var onSwipeStartFunction = jest.fn();
921 | renderDefaultComponent({ onSwipeStart: onSwipeStartFunction });
922 |
923 | componentInstance.onSwipeStart();
924 | expect(onSwipeStartFunction).toBeCalled();
925 | });
926 | });
927 |
928 | describe('onSwipeMove', () => {
929 | beforeEach(() => {
930 | renderDefaultComponent({ preventMovementUntilSwipeScrollTolerance: true });
931 | });
932 |
933 | it('should return true to stop scrolling if there was movement in the same direction as the carousel axis', () => {
934 | expect(
935 | componentInstance.onSwipeMove({
936 | x: 10,
937 | y: 0,
938 | })
939 | ).toBe(true);
940 | });
941 |
942 | it('should return false to allow scrolling if there was no movement in the same direction as the carousel axis', () => {
943 | expect(
944 | componentInstance.onSwipeMove({
945 | x: 0,
946 | y: 10,
947 | })
948 | ).toBe(false);
949 | });
950 |
951 | it('should call the swipeAnimationHandler when onSwipeMove is fired', () => {
952 | componentInstance.onSwipeMove({
953 | x: 10,
954 | y: 0,
955 | });
956 |
957 | expect(swipeAnimationHandler).toHaveBeenCalled();
958 | });
959 |
960 | it('should call onSwipeMove callback', () => {
961 | var onSwipeMoveFunction = jest.fn();
962 | renderDefaultComponent({ onSwipeMove: onSwipeMoveFunction });
963 |
964 | componentInstance.onSwipeMove({ x: 0, y: 10 });
965 | expect(onSwipeMoveFunction).toHaveBeenCalled();
966 | });
967 | });
968 |
969 | describe('onSwipeEnd', () => {
970 | it('should set swiping to false', () => {
971 | componentInstance.onSwipeEnd();
972 | expect(componentInstance.state.swiping).toBe(false);
973 | });
974 |
975 | it('should stop autoplay', () => {
976 | componentInstance.clearAutoPlay = jest.fn();
977 | componentInstance.onSwipeEnd();
978 | expect(componentInstance.clearAutoPlay).toHaveBeenCalledTimes(1);
979 | });
980 |
981 | it('should not start autoplay again', () => {
982 | componentInstance.autoPlay = jest.fn();
983 | componentInstance.onSwipeEnd();
984 | expect(componentInstance.autoPlay).toHaveBeenCalledTimes(0);
985 | });
986 |
987 | it('should start autoplay again when autoplay is true', () => {
988 | renderDefaultComponent({ autoPlay: true });
989 | componentInstance.autoPlay = jest.fn();
990 | componentInstance.onSwipeEnd();
991 | expect(componentInstance.autoPlay).toHaveBeenCalledTimes(1);
992 | });
993 | it('should call onSwipeEnd callback', () => {
994 | var onSwipeEndFunction = jest.fn();
995 | renderDefaultComponent({ onSwipeEnd: onSwipeEndFunction });
996 |
997 | componentInstance.onSwipeEnd();
998 | expect(onSwipeEndFunction).toBeCalled();
999 | });
1000 | });
1001 |
1002 | describe("verticalSwipe === 'standard'", () => {
1003 | it('should pass the correct props to
11 |
12 | -
655 | {Children.map(children, (_, index) => {
656 | return (
657 | renderIndicator &&
658 | renderIndicator(this.changeItem(index), index === this.state.selectedItem, index, labels.item)
659 | );
660 | })}
661 |
672 | {this.props.statusFormatter(this.state.selectedItem + 1, Children.count(this.props.children))} 673 |
674 | ); 675 | } 676 | 677 | renderThumbs() { 678 | if (!this.props.showThumbs || !this.props.children || Children.count(this.props.children) === 0) { 679 | return null; 680 | } 681 | 682 | return ( 683 |
755 |
787 | );
788 | }
789 | }
790 |
--------------------------------------------------------------------------------
/src/components/Carousel/types.ts:
--------------------------------------------------------------------------------
1 | export interface AnimationHandlerResponse {
2 | itemListStyle?: React.CSSProperties;
3 | slideStyle?: React.CSSProperties;
4 | selectedStyle?: React.CSSProperties;
5 | prevStyle?: React.CSSProperties;
6 | }
7 |
8 | export type AnimationHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
9 |
10 | export type SwipeAnimationHandler = (
11 | delta: {
12 | x: number;
13 | y: number;
14 | },
15 | props: CarouselProps,
16 | state: CarouselState,
17 | setState: Function
18 | ) => AnimationHandlerResponse;
19 |
20 | export type StopSwipingHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
21 |
22 | export interface CarouselProps {
23 | ariaLabel?: string | undefined;
24 | axis: 'horizontal' | 'vertical';
25 | autoFocus?: boolean;
26 | autoPlay?: boolean;
27 | centerMode?: boolean;
28 | centerSlidePercentage: number;
29 | children?: React.ReactChild[];
30 | className?: string;
31 | dynamicHeight?: boolean;
32 | emulateTouch?: boolean;
33 | infiniteLoop?: boolean;
34 | interval: number;
35 | labels: {
36 | leftArrow: string;
37 | rightArrow: string;
38 | item: string;
39 | };
40 | onClickItem: (index: number, item: React.ReactNode) => void;
41 | onClickThumb: (index: number, item: React.ReactNode) => void;
42 | onChange: (index: number, item: React.ReactNode) => void;
43 | onSwipeStart: (event: React.TouchEvent) => void;
44 | onSwipeEnd: (event: React.TouchEvent) => void;
45 | onSwipeMove: (event: React.TouchEvent) => boolean;
46 | preventMovementUntilSwipeScrollTolerance: boolean;
47 | renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
48 | renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;
49 | renderIndicator: (
50 | clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,
51 | isSelected: boolean,
52 | index: number,
53 | label: string
54 | ) => React.ReactNode;
55 | renderItem: (item: React.ReactNode, options?: { isSelected: boolean; isPrevious: boolean }) => React.ReactNode;
56 | renderThumbs: (children: React.ReactChild[]) => React.ReactChild[];
57 | selectedItem: number;
58 | showArrows: boolean;
59 | showStatus: boolean;
60 | showIndicators: boolean;
61 | showThumbs: boolean;
62 | statusFormatter: (currentItem: number, total: number) => string;
63 | stopOnHover: boolean;
64 | swipeable: boolean;
65 | swipeScrollTolerance: number;
66 | thumbWidth?: number;
67 | transitionTime: number;
68 | useKeyboardArrows?: boolean;
69 | verticalSwipe: 'natural' | 'standard';
70 | width: number | string;
71 | animationHandler: 'slide' | 'fade' | AnimationHandler;
72 | swipeAnimationHandler: SwipeAnimationHandler;
73 | stopSwipingHandler: StopSwipingHandler;
74 | }
75 |
76 | export interface CarouselState {
77 | autoPlay?: boolean;
78 | cancelClick: boolean;
79 | hasMount: boolean;
80 | initialized: boolean;
81 | isMouseEntered: boolean;
82 | itemSize: number;
83 | previousItem: number;
84 | selectedItem: number;
85 | swiping?: boolean;
86 | swipeMovementStarted: boolean;
87 | itemListStyle?: React.CSSProperties;
88 | slideStyle?: React.CSSProperties;
89 | selectedStyle?: React.CSSProperties;
90 | prevStyle?: React.CSSProperties;
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/Carousel/utils.ts:
--------------------------------------------------------------------------------
1 | import { Children } from 'react';
2 | import { CarouselProps } from './types';
3 | import CSSTranslate from '../../CSSTranslate';
4 |
5 | export const noop = () => {};
6 |
7 | export const defaultStatusFormatter = (current: number, total: number) => `${current} of ${total}`;
8 |
9 | export const isKeyboardEvent = (e?: React.MouseEvent | React.KeyboardEvent): e is React.KeyboardEvent =>
10 | e ? e.hasOwnProperty('key') : false;
11 |
12 | /**
13 | * Gets the list 'position' relative to a current index
14 | * @param index
15 | */
16 | export const getPosition = (index: number, props: CarouselProps): number => {
17 | if (props.infiniteLoop) {
18 | // index has to be added by 1 because of the first cloned slide
19 | ++index;
20 | }
21 |
22 | if (index === 0) {
23 | return 0;
24 | }
25 |
26 | const childrenLength = Children.count(props.children);
27 | if (props.centerMode && props.axis === 'horizontal') {
28 | let currentPosition = -index * props.centerSlidePercentage;
29 | const lastPosition = childrenLength - 1;
30 |
31 | if (index && (index !== lastPosition || props.infiniteLoop)) {
32 | currentPosition += (100 - props.centerSlidePercentage) / 2;
33 | } else if (index === lastPosition) {
34 | currentPosition += 100 - props.centerSlidePercentage;
35 | }
36 |
37 | return currentPosition;
38 | }
39 |
40 | return -index * 100;
41 | };
42 |
43 | /**
44 | * Sets the 'position' transform for sliding animations
45 | * @param position
46 | * @param forceReflow
47 | */
48 | export const setPosition = (position: number, axis: 'horizontal' | 'vertical'): React.CSSProperties => {
49 | const style = {};
50 | ['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach((prop) => {
51 | // @ts-ignore
52 | style[prop] = CSSTranslate(position, '%', axis);
53 | });
54 |
55 | return style;
56 | };
57 |
--------------------------------------------------------------------------------
/src/components/Thumbs.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, Children } from 'react';
2 | import klass from '../cssClasses';
3 | import { outerWidth } from '../dimensions';
4 | import CSSTranslate from '../CSSTranslate';
5 | // @ts-ignore
6 | import Swipe from 'react-easy-swipe';
7 | import getWindow from '../shims/window';
8 |
9 | const isKeyboardEvent = (e: React.MouseEvent | React.KeyboardEvent): e is React.KeyboardEvent =>
10 | e.hasOwnProperty('key');
11 |
12 | export interface Props {
13 | axis: 'horizontal' | 'vertical';
14 | children: React.ReactChild[];
15 | labels: {
16 | leftArrow: string;
17 | rightArrow: string;
18 | item: string;
19 | };
20 | onSelectItem: (index: number, item: React.ReactNode) => void;
21 | selectedItem: number;
22 | thumbWidth: number;
23 | transitionTime: number;
24 | emulateTouch?: boolean;
25 | }
26 |
27 | interface State {
28 | selectedItem: number;
29 | firstItem: number;
30 | itemSize?: number;
31 | visibleItems: number;
32 | lastPosition: number;
33 | showArrows: boolean;
34 | swiping: boolean;
35 | }
36 |
37 | export default class Thumbs extends Component
756 | {this.renderControls()}
757 | {this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow)}
758 |
785 | {this.renderThumbs()}
786 |
759 | {isSwipeable ? (
760 |
766 | {this.props.infiniteLoop && lastClone}
767 | {this.renderItems()}
768 | {this.props.infiniteLoop && firstClone}
769 |
770 | ) : (
771 |
782 | {this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow)}
783 | {this.renderStatus()}
784 | - this.setListRef(node)}
774 | style={this.state.itemListStyle || {}}
775 | >
776 | {this.props.infiniteLoop && lastClone}
777 | {this.renderItems()}
778 | {this.props.infiniteLoop && firstClone}
779 |
301 |
340 | );
341 | }
342 | }
343 |
--------------------------------------------------------------------------------
/src/components/_carousel.scss:
--------------------------------------------------------------------------------
1 | %arrows {
2 | @include transition(all, 0.25s, ease-in);
3 | @include opacity(0.4);
4 | position: absolute;
5 | z-index: 2;
6 | top: 20px;
7 | background: none;
8 | border: 0;
9 | font-size: 32px;
10 | cursor: pointer;
11 |
12 | &:focus,
13 | &:hover {
14 | @include opacity(1);
15 | }
16 |
17 | &.control-arrow {
18 | &:before {
19 | margin: 0 5px;
20 | display: inline-block;
21 | border-top: 8px solid transparent;
22 | border-bottom: 8px solid transparent;
23 | content: '';
24 | }
25 | }
26 |
27 | &.control-disabled {
28 | @include opacity(0);
29 | cursor: inherit;
30 | display: none;
31 | }
32 |
33 | &.control-prev {
34 | left: 0;
35 | &:before {
36 | border-right: 8px solid #fff;
37 | }
38 | }
39 |
40 | &.control-next {
41 | right: 0;
42 | &:before {
43 | border-left: 8px solid #fff;
44 | }
45 | }
46 | }
47 |
48 | .carousel-root {
49 | outline: none;
50 | }
51 |
52 | .carousel {
53 | position: relative;
54 | width: 100%;
55 |
56 | // only applying box sizing inside the plugin so it won't break any style
57 | * {
58 | -webkit-box-sizing: border-box;
59 | -moz-box-sizing: border-box;
60 | box-sizing: border-box;
61 | }
62 |
63 | img {
64 | width: 100%;
65 | display: inline-block;
66 | pointer-events: none;
67 | }
68 |
69 | .carousel {
70 | position: relative;
71 | }
72 |
73 | .control-arrow {
74 | @extend %arrows;
75 | outline: 0;
76 | border: 0;
77 | background: none;
78 | top: 50%;
79 | margin-top: -13px;
80 | font-size: 18px;
81 | }
82 |
83 | .thumbs-wrapper {
84 | margin: 20px;
85 | overflow: hidden;
86 | }
87 |
88 | .thumbs {
89 | @include transition(all, 0.15s, ease-in);
90 | // activate hardware accelerated animations using translate property
91 | @include enhanceAnimations();
92 | position: relative;
93 | list-style: none;
94 | white-space: nowrap;
95 | }
96 |
97 | .thumb {
98 | @include transition(border, 0.15s, ease-in);
99 | display: inline-block;
100 | margin-right: 6px;
101 | white-space: nowrap;
102 | overflow: hidden;
103 | border: 3px solid #fff;
104 | padding: 2px;
105 |
106 | &:focus {
107 | border: 3px solid #ccc;
108 | outline: none;
109 | }
110 |
111 | &.selected,
112 | &:hover {
113 | border: 3px solid $color-primary;
114 | }
115 |
116 | img {
117 | vertical-align: top;
118 | }
119 | }
120 |
121 | &.carousel-slider {
122 | position: relative;
123 | margin: 0;
124 | overflow: hidden;
125 |
126 | // adjusting the arrows for the slider
127 | .control-arrow {
128 | @extend %arrows;
129 | top: 0;
130 | color: #fff;
131 | font-size: 26px;
132 | bottom: 0;
133 | margin-top: 0;
134 | padding: 5px;
135 |
136 | &:hover {
137 | background: rgba(#000, 0.2);
138 | }
139 | }
140 | }
141 |
142 | .slider-wrapper {
143 | overflow: hidden;
144 | margin: auto;
145 | width: 100%;
146 | @include transition(height, 0.15s, ease-in);
147 |
148 | &.axis-horizontal {
149 | .slider {
150 | -ms-box-orient: horizontal;
151 | display: -webkit-box;
152 | display: -moz-box;
153 | display: -ms-flexbox;
154 | display: -moz-flex;
155 | display: -webkit-flex;
156 | display: flex;
157 |
158 | .slide {
159 | flex-direction: column;
160 | flex-flow: column;
161 | }
162 | }
163 | }
164 |
165 | &.axis-vertical {
166 | -ms-box-orient: horizontal;
167 | display: -webkit-box;
168 | display: -moz-box;
169 | display: -ms-flexbox;
170 | display: -moz-flex;
171 | display: -webkit-flex;
172 | display: flex;
173 |
174 | .slider {
175 | -webkit-flex-direction: column;
176 | flex-direction: column;
177 | }
178 | }
179 | }
180 |
181 | .slider {
182 | margin: 0;
183 | padding: 0;
184 | position: relative;
185 | list-style: none;
186 | width: 100%;
187 |
188 | &.animated {
189 | @include transition(all, 0.35s, ease-in-out);
190 | // activate hardware accelerated animations using translate property
191 | // @include enhanceAnimations();
192 | }
193 | }
194 |
195 | .slide {
196 | min-width: 100%;
197 | margin: 0;
198 | position: relative;
199 | text-align: center;
200 | // padding-bottom: 32px;
201 |
202 | img {
203 | width: 100%;
204 | vertical-align: top;
205 | border: 0;
206 | }
207 |
208 | iframe {
209 | display: inline-block;
210 | width: calc(100% - 80px);
211 | margin: 0 40px 40px;
212 | border: 0;
213 | }
214 |
215 | .legend {
216 | @include transition(all, 0.5s, ease-in-out);
217 | position: absolute;
218 | bottom: 40px;
219 | left: 50%;
220 | margin-left: -45%;
221 | width: 90%;
222 | border-radius: 10px;
223 | background: #000;
224 | color: #fff;
225 | padding: 10px;
226 | font-size: 12px;
227 | text-align: center;
228 | opacity: 0.25;
229 | @include transition(opacity, 0.35s, ease-in-out);
230 | }
231 | }
232 |
233 | .control-dots {
234 | position: absolute;
235 | bottom: 0;
236 | margin: 10px 0;
237 | padding: 0;
238 | text-align: center;
239 | width: 100%;
240 | z-index: 1;
241 |
242 | @include desktop {
243 | bottom: 0;
244 | }
245 |
246 | .dot {
247 | @include transition(opacity, 0.25s, ease-in);
248 | @include opacity(0.3);
249 | box-shadow: 1px 1px 2px rgba(#000, 0.9);
250 | background: #fff;
251 | border-radius: 50%;
252 | width: 8px;
253 | height: 8px;
254 | cursor: pointer;
255 | display: inline-block;
256 | margin: 0 8px;
257 |
258 | &.selected,
259 | &:hover {
260 | @include opacity(1);
261 | }
262 | }
263 | }
264 |
265 | .carousel-status {
266 | position: absolute;
267 | top: 0;
268 | right: 0;
269 | padding: 5px;
270 | font-size: 10px;
271 | text-shadow: 1px 1px 1px rgba(#000, 0.9);
272 | color: #fff;
273 | }
274 |
275 | &:hover {
276 | .slide .legend {
277 | opacity: 1;
278 | }
279 | }
280 | }
281 |
--------------------------------------------------------------------------------
/src/cssClasses.ts:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 |
3 | export default {
4 | ROOT: (customClassName?: string) =>
5 | classNames({
6 | 'carousel-root': true,
7 | [customClassName || '']: !!customClassName,
8 | }),
9 |
10 | CAROUSEL: (isSlider?: boolean) =>
11 | classNames({
12 | carousel: true,
13 | 'carousel-slider': isSlider,
14 | }),
15 |
16 | WRAPPER: (isSlider: boolean, axis?: 'horizontal' | 'vertical') =>
17 | classNames({
18 | 'thumbs-wrapper': !isSlider,
19 | 'slider-wrapper': isSlider,
20 | 'axis-horizontal': axis === 'horizontal',
21 | 'axis-vertical': axis !== 'horizontal',
22 | }),
23 |
24 | SLIDER: (isSlider: boolean, isSwiping?: boolean) =>
25 | classNames({
26 | thumbs: !isSlider,
27 | slider: isSlider,
28 | animated: !isSwiping,
29 | }),
30 |
31 | ITEM: (isSlider: boolean, selected: boolean, previous?: boolean) =>
32 | classNames({
33 | thumb: !isSlider,
34 | slide: isSlider,
35 | selected: selected,
36 | previous: previous,
37 | }),
38 |
39 | ARROW_PREV: (disabled?: boolean) =>
40 | classNames({
41 | 'control-arrow control-prev': true,
42 | 'control-disabled': disabled,
43 | }),
44 |
45 | ARROW_NEXT: (disabled?: boolean) =>
46 | classNames({
47 | 'control-arrow control-next': true,
48 | 'control-disabled': disabled,
49 | }),
50 |
51 | DOT: (selected?: boolean) =>
52 | classNames({
53 | dot: true,
54 | selected: selected,
55 | }),
56 | };
57 |
--------------------------------------------------------------------------------
/src/dimensions.ts:
--------------------------------------------------------------------------------
1 | export const outerWidth = (el: HTMLElement) => {
2 | let width = el.offsetWidth;
3 | const style = getComputedStyle(el);
4 |
5 | width += parseInt(style.marginLeft) + parseInt(style.marginRight);
6 | return width;
7 | };
8 |
--------------------------------------------------------------------------------
/src/examples/presentation/presentation.scss:
--------------------------------------------------------------------------------
1 | $default-width: 100vw;
2 | $default-height: 100vh;
3 | $default-padding: 75px;
4 |
5 | $text-color: #f5f5f5;
6 | $emphasis-color: #ccc;
7 | $link-color: #D6D600;
8 |
9 | $slide-primary-color: #000099;
10 | $slide-secondary-color: #4D0099;
11 | $slide-content-color: #004D99;
12 |
13 |
14 | .presentation-mode {
15 | .my-slide {
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | text-align: center;
20 | height: $default-height;
21 | padding: $default-padding;
22 | line-height: 1.5;
23 | font-size: 1.5em;
24 | color: $text-color;
25 |
26 | h1, h2, h3, h4, h5, h6, p, ul, ol {
27 | border: 0;
28 | margin: 10px auto;
29 | padding: 0;
30 | display: inline-block;
31 | width: 100%;
32 | }
33 |
34 | &.complex {
35 | text-align: left;
36 | flex-direction: column;
37 | justify-content: flex-start;
38 |
39 | h1, h2, h3, h4, h5, h6, p, ul, ol {
40 | margin-bottom: 30px;
41 | }
42 | }
43 |
44 | ul, ol {
45 | margin: 10px;
46 | padding-left: 75px;
47 | }
48 |
49 | ol li {
50 | list-style: decimal !important;
51 | }
52 |
53 | ul li {
54 | list-style: disc;
55 | }
56 |
57 | p {
58 | font-size: 1.2em;
59 | }
60 |
61 | strong, em {
62 | color: $emphasis-color;
63 | }
64 |
65 | a {
66 | color: $link-color;
67 | border-bottom: 3px dotted $link-color;
68 | text-decoration: none;
69 | }
70 |
71 | iframe, img {
72 | width: $default-width;
73 | height: $default-height;
74 | margin: - $default-padding;
75 | }
76 |
77 | ul, ol, li {
78 | text-align: left;
79 | }
80 |
81 | blockquote {
82 | position: relative;
83 | color: $text-color;
84 | text-align: left;
85 | border-left: 10px solid $emphasis-color;
86 | margin: 1.5em 10px;
87 | padding: 0.5em 10px;
88 | padding-left: 50px;
89 | quotes: "\201C""\201D""\2018""\2019";
90 | }
91 |
92 | blockquote:before {
93 | color: #ccc;
94 | content: open-quote;
95 | position: absolute;
96 | left: 10px;
97 | top: 30px;
98 | font-size: 4em;
99 | line-height: 0.1em;
100 | margin-right: 0.25em;
101 | vertical-align: -0.4em;
102 | }
103 |
104 | blockquote p {
105 | display: inline;
106 | }
107 |
108 | &.primary {
109 | background-color: $slide-primary-color;
110 | }
111 |
112 | &.secondary {
113 | background-color: $slide-secondary-color;
114 | }
115 |
116 | &.content {
117 | background-color: $slide-content-color;
118 | }
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
22 |
23 |
24 |
25 |
302 |
339 | 
32 |
33 | 
38 |
39 | 
42 |
43 |
64 |
65 |
70 |
71 |
72 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Carousel } from './components/Carousel';
2 | export { CarouselProps } from './components/Carousel/types';
3 | export { default as Thumbs } from './components/Thumbs';
4 |
--------------------------------------------------------------------------------
/src/main.scss:
--------------------------------------------------------------------------------
1 | // // basic imports
2 | @import "styles/variables";
3 | @import "styles/mixins/breakpoints";
4 | @import "styles/mixins/animation";
5 | @import "styles/mixins/utils";
6 |
7 | // // resets, body, etc
8 | * {
9 | margin: 0;
10 | padding: 0;
11 | list-style: none;
12 | -webkit-box-sizing: border-box;
13 | -moz-box-sizing: border-box;
14 | box-sizing: border-box;
15 | }
16 |
17 | body {
18 | font-family: $default-font-family;
19 | font-size: $default-font-size;
20 | font-weight: 400;
21 | color: $color-primary;
22 | }
23 |
24 | h1, h2, h3, h4 {
25 | font-weight: 700;
26 | margin: 20px 0;
27 | }
28 |
29 | h1 {
30 | font-weight: 700;
31 | font-size: 2.5em;
32 | }
33 |
34 | h2 {
35 | border-top: 1px solid $color-secondary;
36 | padding-top: 40px;
37 | margin-top: 40px;
38 | font-size: 2em;
39 | }
40 |
41 | h3 {
42 | font-size: 1.4em;
43 | }
44 |
45 | h4 {
46 | font-size: 1.1em;
47 | margin-bottom: 10px;
48 | }
49 |
50 | code {
51 | border-radius: 20px;
52 | background: $color-background;
53 | padding: 20px;
54 | text-indent: 0;
55 | color: $color-primary;
56 | display: block;
57 | // width: 90%;
58 | margin: auto;
59 | overflow: scroll;
60 | width: 100%;
61 | }
62 |
63 | .wrapper {
64 | padding: 30px;
65 |
66 | .demo-gallery, .demo-slider, .demo-carousel {
67 | margin: 30px -30px;
68 | }
69 |
70 | .demo {
71 | display: block;
72 | margin: 30px 0;
73 | padding-bottom: 30px;
74 | border-bottom: 1px solid $color-primary;
75 |
76 | &:last-child {
77 | border-bottom: 0;
78 | }
79 |
80 | }
81 | }
82 |
83 | .list-items, .summary {
84 | margin-left: 50px;
85 |
86 | li {
87 | line-height: 2;
88 | list-style-type: circle;
89 |
90 | ul {
91 | margin-left: 30px;
92 | }
93 | }
94 | }
95 |
96 | %demo-box {
97 | margin: 50px auto;
98 | }
99 |
100 | .demo-gallery {
101 | @extend %demo-box;
102 |
103 | .thumb {
104 | width: 200px;
105 | }
106 | }
107 |
108 | .demo-slider {
109 | @extend %demo-box;
110 | }
111 |
112 | .demo-carousel {
113 | @extend %demo-box;
114 | width: 100%;
115 | margin: 30px auto!important;
116 | .thumb {
117 | width: 120px;
118 | }
119 | }
120 |
121 | .example {
122 | margin: 20px 0;
123 | }
124 |
125 | .parent {
126 | background: #333;
127 | }
128 |
129 | .page-carousel {
130 | padding: 40px;
131 | border: 1px solid #fff;
132 | width: 80%;
133 | margin: 40px auto;
134 | }
135 |
136 | h5 {
137 | margin-bottom: 10px;
138 | }
139 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import(/* webpackChunkName: "carousel-component" */ './components/Carousel').then(({ default: Carousel }) => {
5 | const DemoCarousel = () => (
6 | React Responsive Carousel
34 | 35 |
38 |
39 |
42 |
43 | Storybook
44 |45 | Check it out these cool demos created using 46 | storybook. The source code for each example is available 47 | here. 48 |
49 | 50 |Summary
51 |-
52 |
- Installing 53 |
- Demo 54 |
- Contributing 55 |
Installing
58 |
59 | npm install react-responsive-carousel --save
60 |
61 |
62 | Demo
63 |Contributing
73 |Please, feel free to contributing. You may file an issue or submit a pull request!
74 |
16 |
17 |
19 |
17 | Legend 1
18 |
20 |
21 |
23 |
21 | Legend 2
22 |
24 |
25 |
27 |
25 | Legend 3
26 |
28 |
29 |
31 |
29 | Legend 4
30 |
32 |
33 |
35 |
33 | Legend 5
34 |
36 |
37 |
39 |
37 | Legend 6
38 |
14 | 
15 |
17 | );
18 |
19 | const baseChildren =
15 | Legend {index}
16 |{[1, 2, 3, 4, 5].map(createCarouselItemImage)}
;
20 |
21 | const tooglesGroupId = 'Toggles';
22 | const valuesGroupId = 'Values';
23 | const mainGroupId = 'Main';
24 |
25 | const getConfigurableProps = () => ({
26 | showArrows: boolean('showArrows', true, tooglesGroupId),
27 | showStatus: boolean('showStatus', true, tooglesGroupId),
28 | showIndicators: boolean('showIndicators', true, tooglesGroupId),
29 | infiniteLoop: boolean('infiniteLoop', true, tooglesGroupId),
30 | showThumbs: boolean('showThumbs', true, tooglesGroupId),
31 | useKeyboardArrows: boolean('useKeyboardArrows', true, tooglesGroupId),
32 | autoPlay: boolean('autoPlay', true, tooglesGroupId),
33 | stopOnHover: boolean('stopOnHover', true, tooglesGroupId),
34 | swipeable: boolean('swipeable', true, tooglesGroupId),
35 | dynamicHeight: boolean('dynamicHeight', true, tooglesGroupId),
36 | emulateTouch: boolean('emulateTouch', true, tooglesGroupId),
37 | autoFocus: boolean('autoFocus', false, tooglesGroupId),
38 | thumbWidth: number('thumbWidth', 100, {}, valuesGroupId),
39 | selectedItem: number('selectedItem', 0, {}, valuesGroupId),
40 | interval: number('interval', 2000, {}, valuesGroupId),
41 | transitionTime: number('transitionTime', 500, {}, valuesGroupId),
42 | swipeScrollTolerance: number('swipeScrollTolerance', 5, {}, valuesGroupId),
43 | ariaLabel: text('ariaLabel', undefined),
44 | });
45 |
46 | export default {
47 | title: '01 - Basic',
48 | decorators: [withKnobs],
49 | component: Carousel,
50 | };
51 |
52 | export const base = () =>
147 | Text 01
148 |
149 |
150 | Text 02
151 |
152 |
158 | 
159 |
160 |
161 | 
162 |
163 |
164 | 
165 |
166 |
167 | 
168 |
169 |
170 | 
171 |
172 |
173 | 
174 |
175 |
12 |
13 |
15 | );
16 |
17 | const baseChildren =
13 | Legend {index}
14 |{[1, 2, 3, 4, 5].map(createCarouselItemImage)}
;
18 |
19 | export default {
20 | title: '02 - Advanced',
21 | component: Carousel,
22 | };
23 |
24 | export const lazyLoaded = () => {
25 | class LazyLoadedCarousel extends Component<{}, { slides: Props['children'] }> {
26 | constructor(props) {
27 | super(props);
28 |
29 | this.state = {
30 | slides: null,
31 | };
32 |
33 | this.loadSlides = this.loadSlides.bind(this);
34 | }
35 |
36 | loadSlides() {
37 | this.setState({
38 | slides: baseChildren.props.children,
39 | });
40 | }
41 |
42 | render() {
43 | return (
44 |
45 | {this.state.slides}
50 |
51 | );
52 | }
53 | }
54 |
55 | return Click the button to asynchronously load the slides
46 | 49 |
129 |
157 | {baseChildren.props.children}
158 |
159 |
160 | );
161 | }
162 | }
163 |
164 | return
130 |
151 |
131 | Use the buttons below to change the selected item in the carousel
132 |
133 |
134 |
135 | Note that the external controls might not respect the carousel boundaries but the
136 | carousel won't go past it.
137 |
138 |
139 |
External slide value: {this.state.currentSlide}
141 | 144 | 147 | 150 |
170 |
172 | Presentation mode
171 |
173 |
175 | It's just a couple of new styles...
174 |
176 |
178 | ...and the carousel can be used to present something!
177 |
179 | 
180 |
181 |
180 |
182 |
186 | 183 | See the source code... 184 |
185 |
187 |
201 | It supports:
188 |-
189 |
- Headers (h1 - h6) 190 |
- Paragraphs (p) 191 |
- Images and videos (Youtube, Vimeo) 192 |
-
193 | Lists
194 |
-
195 |
- Ordered lists (ol) 196 |
- Bullet points (ul) 197 |
199 |
202 |
209 | Pre baked slides:
203 |-
204 |
- Primary - for titles 205 |
- Secondary - for subtitles 206 |
- Content 207 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
218 | Lorem Ipsum
217 |
219 |
221 | What is Lorem Ipsum?
220 |
222 |
228 | 223 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 224 | industry's standard dummy text ever since the 1500s, when an unknown printer took a 225 | galley of type and scrambled it to make a type specimen book.{' '} 226 |
227 |
229 |
234 | 230 | It has survived not only five centuries, but also the leap into electronic typesetting, 231 | remaining essentially unchanged.{' '} 232 |233 |
235 |
241 | 236 | It was popularised in the 1960s with the release of Letraset sheets containing Lorem 237 | Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including 238 | versions of Lorem Ipsum. 239 |
240 |
242 |
244 | Where does it come from?
243 |
245 |
247 | Contrary to popular belief, Lorem Ipsum is not simply random text.
246 |
248 |
253 | 249 | It has roots in a piece of classical Latin literature from 45 BC, making it over{' '} 250 | 2000 years old. 251 |
252 |
254 |
256 |