@mikezimm/fps-library-v2/lib/components/molecules/FadeCarousel/component.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { useState } from 'react';
import { Icon } from '@fluentui/react/lib/Icon';
import DotsHook from './SelectDots/component';
import { getWhoDunItElements } from '../../atoms/WhoDunItRow/getWhoDunIt';
import { CurrentOrigin } from '@mikezimm/fps-core-v7/lib/components/molecules/source-props/WindowLocationConstants';
require('@mikezimm/fps-styles/dist/fadeCarouselStyles.css');
require('@mikezimm/fps-styles/dist/fadeCarouselArrows.css');
// getNextIndex copied to fps-library-v2 here:  src\logic\Arrays\searching\getNextIndex.ts
export function getNextIndex(length, current, back = false) {
    if (back === false) {
        return current === length - 1 ? 0 : current + 1;
    }
    else {
        return current === 0 ? length - 1 : current - 1;
    }
}
const FadeCarousel = (props) => {
    const { items, titleField, descriptionField, hrefField, imageUrlField, constainerStyles, constainerClass, noImage, firstXItems, showCreated, showModified, showPublished } = props.carouselProps;
    const [currentSlide, setCurrentSlide] = useState(0);
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [showItems, setShowItems] = useState(firstXItems && firstXItems > 0 ? items.slice(0, firstXItems) : items);
    const titleProp = titleField ? titleField : 'Title';
    const slides = showItems.map((item, index) => {
        const inOrOut = index === currentSlide ? 'fpsFadeIn' : 'fpsFadeOut';
        const imageLink = imageUrlField ? item[imageUrlField] : item.BannerImageUrl ? item.BannerImageUrl.Url.replace('tenant', 'mcclickster') : '';
        const openLink = `${CurrentOrigin}${item[hrefField ? hrefField : 'FileRef']}`;
        const WhoDates = getWhoDunItElements({ item: item, showCreated: showCreated, showModified: showModified, showPublished: showPublished });
        // const modifiedString: string = showModified === true ? `Modified${ item.modifiedLoc } - ${ item['Editor/Title'] }` : '';
        // const WhoDates = <div className={ 'whoDateStamps' }>
        //   { showCreated !== true || item.FirstPublishedDate ? null :
        //     <div className={ 'dateStamps' } title = { modifiedString } >
        //       <div>Created</div> <div>{ item.createdLoc }</div> <div>{ item['Author/Title'] }</div>
        //     </div>
        //   }
        //   { showPublished !== true ? null :
        //     <div className={ 'dateStamps' } title = { modifiedString } >
        //       {/* <div>Published</div> <div>{ item.FirstPublishedDate.toLocalTime() }</div> <div>{ item['Author/Title'] }</div> */}
        //       <div>Published</div> <div>{ item.FirstPublishedDate ? item.FirstPublishedDate : 'NOT YET PUBLISHED' }</div> <div>{  }</div>
        //     </div>
        //   }
        //   {/* { showModified !== true ? null :
        //     <div className={ 'dateStamps' }>
        //       <div>Modified</div> <div>{ item.modifiedLoc }</div> <div>{ item['Editor/Title'] }</div>
        //     </div>
        //   } */}
        // </div>;
        return (React.createElement("div", { key: index, onClick: () => window.open(openLink, '_blank'), className: `fpsFadeElement ${inOrOut}` },
            !imageLink || noImage === true ? null : React.createElement("img", { src: imageLink.replace('tenant', 'mcclickster') }),
            React.createElement("h3", null, item[titleProp]),
            React.createElement("p", null, item[descriptionField ? descriptionField : 'Description']),
            WhoDates));
    });
    const slider = React.createElement("div", { className: `fpsFadeContainer ${constainerClass}`, style: constainerStyles },
        React.createElement("div", { className: 'fpsFadeArrow fpsFadeArrowL', onClick: () => setCurrentSlide(getNextIndex(showItems.length, currentSlide, true)) },
            React.createElement(Icon, { iconName: "ChevronLeft" })),
        slides,
        React.createElement("div", { className: 'fpsFadeArrow fpsFadeArrowR', onClick: () => setCurrentSlide(getNextIndex(showItems.length, currentSlide)) },
            React.createElement(Icon, { iconName: "ChevronRight" })),
        React.createElement(DotsHook, { items: showItems, current: currentSlide, selectCallback: setCurrentSlide, dotsWPProps: { ...{
                    maxDots: firstXItems ? firstXItems : 7,
                    titleProp: titleProp,
                    // selectedLabel = { `This is a new {count} label from {current} based on {Title}` }
                    // containerStyle = {{ fontSize: '48px', color: 'darkred', padding: '10px', }}
                    // iconStyle = {{ fontSize: '18px', color: 'darkgreen', padding: '3px', }}
                    // labelStyle = {{ fontSize: '22px', color: 'purple', padding: '5px',  }}
                }, ...props.dotProps } }));
    return (slider);
};
export default FadeCarousel;
//# sourceMappingURL=component.js.map