@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
103 lines • 4.62 kB
JavaScript
/**
* Credit where credit is due...
* I created this component with the VERY helpful Bing Chat and some iterations.
* Great Help and shout out to Bing Chat!
*/
import { Icon } from '@fluentui/react/lib/Icon';
import * as React from 'react';
import { useState } from 'react';
import { isXML } from './isXML';
import { formatXml } from './formatXml';
import { formatJSONString } from './formatJSONString';
import { isValidJSON } from './isValidJSON';
import { CurrentOrigin } from '@mikezimm/fps-core-v7/lib/components/molecules/source-props/WindowLocationConstants';
const lineFeedRegex = /\n/g;
export function countLineFeeds(str) {
const lineFeedCount = (str.match(lineFeedRegex) || []).length;
return lineFeedCount;
}
export function formatStringLike(str, format) {
let result = str;
if (format === 'json') {
result = formatJSONString(str.replace(lineFeedRegex, ''));
}
else if (format === 'html' || format === 'xml') {
result = formatXml(str.replace(lineFeedRegex, ''));
}
return result;
}
function determineBGColor(text, format) {
let bgColor = 'transparent';
if (typeof text !== 'string')
return 'red';
if (text === null || text === undefined)
bgColor = 'transparent';
if (format === 'json') {
if (isValidJSON(text) === false) {
bgColor = 'yellow';
}
}
else if (format === 'html' || format === 'xml') {
if (isXML(text) === false) {
bgColor = 'yellow';
}
}
else if (format === 'spo' || format === 'spo-page') {
const textLC = text.toLocaleLowerCase();
if (textLC.indexOf('/sites/') !== 0 && textLC.indexOf(CurrentOrigin) !== 0)
bgColor = 'yellow';
if (format === 'spo-page' && bgColor === 'transparent' && textLC.indexOf('.aspx') < 0)
bgColor = 'yellow';
}
return bgColor;
}
function getCodeIconName(format) {
let iconName = '';
if (format === 'json') {
iconName = 'Code';
}
else if (format === 'xml') {
iconName = 'Embed';
}
else if (format === 'html') {
iconName = 'FileCode';
}
return iconName;
}
/**
* Your typical text input but with some common validations like JSON, XML, HTML, SPO (urls)
* @param props
* @returns
*/
const FPSTextInput = (props) => {
const { title, description, placeholder, onTextChange, defaultValue, validationType, multiLine } = props;
const [text, setText] = useState(typeof defaultValue === 'string' ? formatStringLike(defaultValue, validationType) : ''); // Use the defaultValue prop as the initial state
const handleTextChange = (event) => {
const newValue = event.target.value;
setText(newValue);
if (onTextChange) {
onTextChange(newValue);
}
};
// const background = validationType === 'json' && isValidJSON( text ) === false ? 'yellow' : 'transparent' ;
const background = determineBGColor(text, validationType);
const height = multiLine === true ? `${countLineFeeds(text) + 7}em` : '2em';
const titleStyles = { fontSize: 'larger', fontWeight: '600', ...props.titleStyles };
const descStyles = { fontSize: 'smaller', };
const iconName = getCodeIconName(validationType);
const ReFormatIcon = !iconName ? undefined :
React.createElement("span", { style: { fontSize: 'larger', fontWeight: 600, padding: '5px', marginLeft: '3em', cursor: 'pointer' }, onClick: () => setText(formatStringLike(text, validationType)), title: `Reformat string as ${validationType}` },
React.createElement(Icon, { iconName: iconName }));
return (React.createElement("div", { style: { width: '100%', ...props.reactCSS }, className: props.className },
title && React.createElement("div", { style: titleStyles },
title,
" ",
ReFormatIcon,
" "),
multiLine === true ?
React.createElement("textarea", { style: { width: '100%', height: height, background: background, transition: 'all 0.4s ease' }, value: text, onChange: handleTextChange, placeholder: placeholder }) :
React.createElement("input", { type: 'text', style: { width: '100%', height: height, background: background, transition: 'all 0.4s ease' }, value: text, onChange: handleTextChange, placeholder: placeholder }),
description && React.createElement("div", { style: descStyles }, description)));
};
export default FPSTextInput;
//# sourceMappingURL=FPSTextInput.js.map