@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
106 lines (105 loc) • 5.54 kB
JavaScript
/**
* CodeAnalizerComment: Updated 1 imports on 2024-09-21 23:07:24
* Update:: import { makeid } to '@mikezimm/fps-core-v7/lib/logic/Strings/guids;'
*/
/**
* Imported from HubCon 2024-07-29 as is with following updates
*/
import * as React from 'react';
import Accordion from '../Accordion/Accordion';
import { GeneralRegexInfo, HighlightRegArrays, RegexSiteInfo } from './Highlights/HighlightRegArrays';
import { makeid } from '@mikezimm/fps-core-v7/lib/logic/Strings/guids'; //./../../logic/Strings/guids';
require('@mikezimm/fps-styles/dist/HighlightCategories.css');
// export default class FpsCore1152Banner extends React.Component<ICategoriesProps, IFpsCore1152BannerState> {
/**
* 2024-07-29: Migrated from HubCon Categories component into separate reusable component
* Changes from original:
* 1. Moved HubConnections.module.scss into HighlightCategories.css in fps-styles and require it in this component.
* 2. Moved HubCon specific help content into CategoriesHeadingHubCon
* 3. Accept HeadingHelp element in it's place.
*
* So for HubCon part, create the HeadingHelp element using categoriesHeadingHubCon and pass it in in the HeadingHelp prop.
*
*/
export default class Categories extends React.Component {
/***
* .o88b. .d88b. d8b db .d8888. d888888b d8888b. db db .o88b. d888888b .d88b. d8888b.
* d8P Y8 .8P Y8. 888o 88 88' YP `~~88~~' 88 `8D 88 88 d8P Y8 `~~88~~' .8P Y8. 88 `8D
* 8P 88 88 88V8o 88 `8bo. 88 88oobY' 88 88 8P 88 88 88 88oobY'
* 8b 88 88 88 V8o88 `Y8b. 88 88`8b 88 88 8b 88 88 88 88`8b
* Y8b d8 `8b d8' 88 V888 db 8D 88 88 `88. 88b d88 Y8b d8 88 `8b d8' 88 `88.
* `Y88P' `Y88P' VP V8P `8888Y' YP 88 YD ~Y8888P' `Y88P' YP `Y88P' 88 YD
*
*
*/
constructor(props) {
super(props);
const { text1, text2 } = this.props;
this.state = {
text1: text1 ? text1.value : '',
text2: text2 ? text2.value : '',
testString: '',
searchText: '',
topSearch: [],
topIdx: null,
topMeta: '',
topSearchLabels: [],
showAccordion: true,
};
}
async componentDidMount() {
//
}
/***
* d8888b. d888888b d8888b. db db d8888b. d8888b. .d8b. d888888b d88888b
* 88 `8D `88' 88 `8D 88 88 88 `8D 88 `8D d8' `8b `~~88~~' 88'
* 88 88 88 88 88 88 88 88oodD' 88 88 88ooo88 88 88ooooo
* 88 88 88 88 88 88 88 88~~~ 88 88 88~~~88 88 88~~~~~
* 88 .8D .88. 88 .8D 88b d88 88 88 .8D 88 88 88 88.
* Y8888D' Y888888P Y8888D' ~Y8888P' 88 Y8888D' YP YP YP Y88888P
*
*
*/
componentDidUpdate(prevProps, prevState) {
//
let refresh = false;
if (prevProps.expandedState !== this.props.expandedState) {
refresh = true;
const { text1, text2 } = this.props;
this.setState({
showAccordion: true,
text1: text1 ? text1.value : '',
text2: text2 ? text2.value : '',
});
}
}
render() {
var _a, _b, _c, _d;
const { CustomSearch, } = this.props;
const { text1, text2, } = this.state;
const testString = `${text1} --- ${text2}`;
const showHelp = !this.state.text1 && !this.state.text2 ? true : false;
console.log('CustomCategories ~ render');
if (this.props.expandedState !== true)
return (React.createElement("div", null));
const headingElement = showHelp === true ?
React.createElement("div", { style: {} },
this.props.HeadingHelp,
GeneralRegexInfo(RegexSiteInfo, 'secHeading')) :
React.createElement("div", { style: { margin: '0px 1.5em' } },
React.createElement("div", { style: { marginBottom: '10px' } }, (_a = this.props.text1) === null || _a === void 0 ? void 0 :
_a.label,
" : ",
React.createElement("b", null, (_b = this.props.text1) === null || _b === void 0 ? void 0 : _b.value)),
React.createElement("div", { style: { marginBottom: '20px' } }, (_c = this.props.text2) === null || _c === void 0 ? void 0 :
_c.label,
" : ",
React.createElement("b", null, (_d = this.props.text2) === null || _d === void 0 ? void 0 : _d.value)));
const CategoryAccordion = React.createElement(Accordion, { componentStyles: {}, title: showHelp === true ? `What is this page for?` : `Testing this string:`, defaultIcon: 'Help', showAccordion: true, content: headingElement, refreshId: makeid(5), contentStylesVis: { height: 'auto', margin: '0px 1.5em' } });
const CustomSearchElement = HighlightRegArrays(CustomSearch, testString, showHelp);
return (React.createElement("section", { className: ['allCategories',].join(' '), style: { paddingTop: '1.5em', paddingLeft: '20px !important', paddingRight: '20px !important' } },
CategoryAccordion,
CustomSearchElement));
}
}
//# sourceMappingURL=Categories.js.map