@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
43 lines (42 loc) • 2.5 kB
JavaScript
/**
* CodeAnalizerComment: Updated 1 imports on 2024-09-21 23:07:24
* Update:: import { getSpreadIndexes } to '@mikezimm/fps-core-v7/lib/logic/Arrays/thinOutArray;'
*/
import * as React from 'react';
import { useState, useEffect } from 'react';
import { Icon } from '@fluentui/react/lib/Icon';
import { getSpreadIndexes, } from '@mikezimm/fps-core-v7/lib/logic/Arrays/thinOutArray';
require('@mikezimm/fps-styles/dist/selectDots.css');
const defaultMessage = `Currently showing item: {current} of {count}`;
const DotsHook = (props) => {
const { items, current, selectCallback, } = props;
const { maxDots, titleProp, selectedLabel, containerStyle, labelStyle, iconStyle, constainerClass } = props.dotsWPProps;
const [dotsToShow, setDotsToShow] = useState([]);
// useEffect NOTES: Start with anonomous function
useEffect(() => {
// useEffect NOTES: Be sure to wrap this in an anonomous function or it will keep rendering over and over
(() => {
const showDots = getSpreadIndexes(items.length, maxDots);
console.log('showDots: ', showDots);
setDotsToShow(showDots);
// useEffect NOTES: Be sure to add () at the end of the function to call it correctly
})();
// useEffect NOTES: init has , []) at the end
}, []);
const dots = [];
items.map((item, index) => {
const selectDot = index === current ? 'fpsSelectDot' : 'fpsUnSelectDot';
if (dotsToShow.indexOf(index) > -1)
dots.push(React.createElement(Icon, { title: `#${index + 1} of ${items.length} ${titleProp ? ` - ${item[titleProp]}` : ''}`, onClick: () => selectCallback(index), className: `fpsFadeDots ${selectDot}`, iconName: 'CircleShapeSolid', style: iconStyle }));
});
const baseLabel = selectedLabel ? selectedLabel : selectedLabel !== '' ? defaultMessage : '';
const dotLabel = baseLabel.replace(`{Title}`, items[current] ? items[current][titleProp] : '')
.replace(`{current}`, (current + 1).toFixed())
.replace(`{count}`, (items.length).toFixed());
const dotsElement = React.createElement("div", { className: `fpsDotsContainer ${constainerClass}`, style: containerStyle },
React.createElement("div", { className: 'fadeInDots' }, dots),
React.createElement("div", { className: 'dotLabel', style: labelStyle }, dotLabel));
return (dotsElement);
};
export default DotsHook;
//# sourceMappingURL=component.js.map