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

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
import { useState, useEffect } from 'react';
import { createSiteSource, } from '@mikezimm/fps-core-v7/lib/components/molecules/source-props/createSources/Sites/createSiteSource';
import { getSiteAPI, } from '@mikezimm/fps-core-v7/lib/restAPIs/sites/sites/getSiteAPI';
import { TextField } from '@fluentui/react/lib/TextField';
require('@mikezimm/fps-styles/dist/WebInputBox.css');
// import { makeBubbleElementFromBubbles } from '@mikezimm/fps-library-v2/lib/components/atoms/TeachBubble/component';
// import { getTeachBubbles } from '@mikezimm/fps-library-v2/lib/components/atoms/TeachBubble/getTeacher';
// import { AllTeachBubbles } from '../Teaching/bubbles';
export const WebUrlIsValidMessage = `Site is valid`;
const WebUrlHook = (props) => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { showInput, textInput, updateInputCallback, callBackOnError } = props; //appLinks, news , debugMode, mainPivotKey, wpID,
    // const [ currentUrl, setCurrentUrl ] = useState<string>( textInput );
    const [webURLStatus, setWebURLStatus] = useState('Untested');
    const [validUrl, setValidUrl] = useState('');
    // const [ lastBubble, setLastBubble ] = useState<number>( 0 );
    // useEffect(() => {
    //   setExpandedState( easyPagesExpanded )
    // }, [ debugMode ] );
    // const closeTour = ( ): void => {
    //   const saveBubble = teachBubble + 0;
    //   setLastBubble( saveBubble );
    //   setTeachBubble( null );
    // }
    const delayOnWebUrlChange = (input) => {
        const NewValue = typeof input === 'string' ? input : input && input.target && input.target.value ? input.target.value : '';
        setTimeout(async () => {
            if (validUrl !== NewValue) {
                const newSource = createSiteSource(NewValue, props.fpsSpService, 'full');
                const siteInfo = await getSiteAPI(newSource, 'site', true, true);
                if (siteInfo.status === 'Success') {
                    setValidUrl(NewValue);
                    updateInputCallback(NewValue, siteInfo);
                    setWebURLStatus(WebUrlIsValidMessage);
                }
                else {
                    setValidUrl('');
                    if (callBackOnError === true)
                        updateInputCallback(NewValue, siteInfo);
                    // for:  https://github.com/mikezimm/Compliance/issues/44
                    setWebURLStatus(siteInfo.errorInfo ? siteInfo.errorInfo.friendly : siteInfo.status);
                }
            }
        }, 1000);
        // }
    };
    useEffect(() => {
        delayOnWebUrlChange(textInput);
    }, []); // Only trigger on first load
    // const MainContent: JSX.Element = <div style={{ cursor: 'default' }}>
    //   <ul>
    //     <li>These are NOT google maps {`:)`}</li>
    //     <li style={{ padding: '10px 0px', fontSize: 'x-large', color: 'red', fontWeight: 600 }}>Terri to provide further description here</li>
    //   </ul>
    // </div>
    // const InfoElement: JSX.Element = <Accordion
    //   title = { 'More information about this tab'}
    //   defaultIcon = 'Help'
    //   showAccordion = { true }
    //   content = { MainContent }
    //   contentStyles = { { height: '100px' } }
    // />;
    const InputLabel = props.inputLabel ? props.inputLabel : `WebURL`;
    const WebUrlElement = showInput !== true ? null :
        React.createElement("div", { style: { display: 'inline-table', paddingBottom: '20px', paddingTop: '20px', width: '100%', background: 'lightgray' } },
            React.createElement("span", { style: { paddingLeft: '20px', paddingRight: '20px', fontSize: 'larger', fontWeight: 600, whiteSpace: 'nowrap', cursor: 'default' } }, InputLabel),
            React.createElement(TextField, { className: `web-input`, styles: { fieldGroup: [{ width: '75%', maxWidth: '700px' }, { borderColor: 'lightgray', },] }, defaultValue: textInput, label: null, autoComplete: 'off', 
                // onChange={ this._onWebUrlChange.bind(this) }
                onChange: delayOnWebUrlChange.bind(this), onGetErrorMessage: (value) => { return ""; }, validateOnFocusIn: true, validateOnFocusOut: true, multiline: false, autoAdjustHeight: true }),
            React.createElement("span", { style: { color: webURLStatus === WebUrlIsValidMessage ? 'green' : 'red', whiteSpace: 'nowrap', marginRight: '40px', fontSize: 'larger', fontWeight: 'bolder', cursor: 'default' } }, webURLStatus));
    return (WebUrlElement);
};
export default WebUrlHook;
//# sourceMappingURL=component.js.map