@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
92 lines (90 loc) • 6.48 kB
JavaScript
/**
* CodeAnalizerComment: Updated 1 imports on 2024-09-22 14:49:52
* Update:: import { getFPSEasyIconSummary } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/functions/windowEasyIcons;'
*/
/**
* CodeAnalizerComment: Updated 3 imports on 2024-09-21 23:07:24
* Update:: import { IEasyIcons } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/interfaces/eiTypes;'
* Update:: import { IFPSEasyIcons } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/interfaces/IFPSEasyIcons;'
* Update:: import { getFPSEasyIconSummary } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/functions/windowEasyIcons;'
*/
import React, { useState } from 'react';
import { PivotItem, } from '@fluentui/react/lib/Pivot';
import { getEasyIconElement } from './eiHelpIcons';
import { getFPSEasyIconSummary } from '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/functions/windowEasyIcons';
import Accordion from '../../../../components/molecules/Accordion/Accordion';
require('@mikezimm/fps-styles/dist/easyicons.css');
export const AccordionTitleClass = `fps-pad-top-left-rad-10`;
export const AccordionTitleCollapsedClass = `fps-faint-yellow fps-hover-light-green`;
export const AccordionTitleExpandClass = `fps-faint-green fps-hover-light-yellow`;
/**
* CURRENTLY NOT IN USE... USE getEasyIconsHelp
* Converted getEasyIconsHelp to EasyIconsHelpHook so it could show what EasyIcons were used
* https://github.com/mikezimm/pivottiles7/issues/384
*
* @param props
* @returns
*/
const EasyIconsHelpHook = (props) => {
const { headerText = undefined } = props;
// Define a state with an arbitrary initial value
const [count, setCount] = useState(0);
// Function to update the state
const forceRerender = () => {
setCount(count + 1);
};
// https://github.com/mikezimm/pivottiles7/issues/384
const FPSEasyIcons = getFPSEasyIconSummary();
const EasyIconSummary = { Groups: {} };
FPSEasyIcons.Groups.map(group => {
EasyIconSummary.Groups[`${group.Folder}`] = group;
});
const HowToChangeElement = React.createElement("div", { style: { paddingTop: '.8em' } },
React.createElement("ul", { style: { margin: '0px' } },
React.createElement("li", null,
"Manually add the Thumbnail Icon to the item - where applicable",
React.createElement("ul", null,
React.createElement("li", null, "Normal Site Pages: Edit Page, click Page Details Gear, set Thumbnail"),
React.createElement("li", null, "News Links: Go to Site Pages, Edit the News Link, set Thumbnail"),
React.createElement("li", null, "Sites and Subsites: Site Gear, Change the Look, Header, Set Logo and Thumbnail"),
React.createElement("li", null, "Files: SharePoint auto-generates Thumbnails based on the content in the file"),
React.createElement("li", null, "Lists, Libraries: Not possible to set a Thumbnail at all"))),
React.createElement("li", null,
"Tell the web part what Icons to focus on",
React.createElement("ol", null,
React.createElement("li", null, "Edit Page"),
React.createElement("li", null, "Edit Web Part"),
React.createElement("li", null, "Expand EasyPages and EasyIcons section"),
React.createElement("li", null, "Remove or Change order of Easy Icon keys"),
React.createElement("li", null, "Update Item Properties to target/search"),
React.createElement("li", null, "Type in EasyIcons to Ignore: Folder/IconName")))));
const GeneralContentStyles = { height: 'auto', paddingLeft: '1em', paddingTop: '.8em', paddingBottom: '1.5em' };
const IconContentStyles = { ...GeneralContentStyles, ...{ paddingBottom: '7em' } };
const HowToChangeAccordion = React.createElement(Accordion
// title={ LimitedTitle }
, {
// title={ LimitedTitle }
title: `What if I do not like the Icons that I see?`, titleClass: AccordionTitleClass, titleCollapseClass: AccordionTitleCollapsedClass, titleExpandClass: AccordionTitleExpandClass, showAccordion: false, animation: 'TopDown', componentStyles: { paddingTop: '1.2em' }, contentStylesVis: GeneralContentStyles, content: HowToChangeElement, defaultIcon: 'Info' });
const UsedEasyIconsEle = FPSEasyIcons.Groups.length > 0 ? getEasyIconElement(EasyIconSummary, 'Base') : React.createElement("div", null, "NONE");
const CurrentEasyIconsAccordion = React.createElement(Accordion
// title={ LimitedTitle }
, {
// title={ LimitedTitle }
title: `What Icons were used on this page? Click to see!`, titleClass: AccordionTitleClass, titleCollapseClass: AccordionTitleCollapsedClass, titleExpandClass: AccordionTitleExpandClass, showAccordion: false, animation: 'TopDown', componentStyles: { paddingTop: '1.2em' }, contentStylesVis: IconContentStyles, content: UsedEasyIconsEle, defaultIcon: 'ImageSearch' });
const AllEasyIconsAccordion = React.createElement(Accordion
// title={ LimitedTitle }
, {
// title={ LimitedTitle }
title: `What Icons are available? LOTS!`, titleClass: AccordionTitleClass, titleCollapseClass: AccordionTitleCollapsedClass, titleExpandClass: AccordionTitleExpandClass, showAccordion: true, animation: 'TopDown', componentStyles: { paddingTop: '1.2em' }, contentStylesVis: IconContentStyles, content: getEasyIconElement(props.EasyIcons, 'Base'), defaultIcon: 'PhotoCollection' });
const EasyIconsHelp = React.createElement("div", { className: 'fps-pph-content', style: { paddingBottom: '100px' } },
React.createElement("div", { className: 'fps-pph-topic' }, "Easy Icons"),
React.createElement("div", null, "Easy Icons feature will magically find Thumbnails and Images for content that does not have any!"),
React.createElement("div", null, "What do you have to do to get started? NOTHING!"),
HowToChangeAccordion,
CurrentEasyIconsAccordion,
AllEasyIconsAccordion);
const EasyIconsHelpPivot = React.createElement(PivotItem, { headerText: headerText, itemIcon: 'ImageSearch' }, EasyIconsHelp);
return (EasyIconsHelpPivot);
};
export default EasyIconsHelpHook;
//# sourceMappingURL=eiHelpFC.js.map