@ouroboros/mouth-mui 1.3.2 → 2.1.1

package/src/components/pages/Templates/Template/Content/Preview/Email.tsx

@@ -17,12 +17,11 @@ import Typography from '@mui/material/Typography';
 
 // UI Shared components
 //import FreeText from 'ui-shared/components/elements/FreeText';
-//<FreeText content={props.value.text} />
+//<FreeText content={value.text} />
 
 // Types
 import { contentStruct } from '../..';
 export type EmailProps = {
-	mobile: boolean,
 	value: contentStruct
 }
 
@@ -36,7 +35,7 @@ export type EmailProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Email(props: EmailProps) {
+export default function Email({ value }: EmailProps) {
 
 	// Render
 	return (
@@ -45,22 +44,22 @@ export default function Email(props: EmailProps) {
 				<Typography><strong>Subject</strong></Typography>
 			</Grid>
 			<Grid item xs={12} md={8} lg={10} xl={11}>
-				{props.value.subject}
+				{value.subject}
 			</Grid>
 			<Grid item xs={12} md={4} lg={2} xl={1}>
 				<Typography><strong>Text</strong></Typography>
 			</Grid>
 			<Grid item xs={12} md={8} lg={10} xl={11}>
-				{props.value.text &&
-					<Typography style={{whiteSpace: 'pre-wrap'}}>{props.value.text}</Typography>
+				{value.text &&
+					<Typography style={{whiteSpace: 'pre-wrap'}}>{value.text}</Typography>
 				}
 			</Grid>
 			<Grid item xs={12} md={4} lg={2} xl={1}>
 				<Typography><strong>HTML</strong></Typography>
 			</Grid>
 			<Grid item xs={12} md={8} lg={10} xl={11}>
-				{props.value.html &&
-					<div dangerouslySetInnerHTML={{__html: props.value.html}} />
+				{value.html &&
+					<div dangerouslySetInnerHTML={{__html: value.html}} />
 				}
 			</Grid>
 		</Grid>
@@ -69,7 +68,6 @@ export default function Email(props: EmailProps) {
 
 // Valid props
 Email.propTypes = {
-	mobile: PropTypes.bool.isRequired,
 	value: PropTypes.shape({
 		subject: PropTypes.string,
 		text: PropTypes.string,

package/src/components/pages/Templates/Template/Content/Preview/SMS.tsx

@@ -15,13 +15,8 @@ import React from 'react';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 
-// UI Shared components
-//import FreeText from 'ui-shared/components/elements/FreeText';
-//<FreeText content={props.value} />
-
 // Type
 export type SMSProps = {
-	mobile: boolean
 	value: string
 }
 
@@ -35,7 +30,7 @@ export type SMSProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function SMS(props: SMSProps) {
+export default function SMS({ value }: SMSProps) {
 
 	// Render
 	return (
@@ -44,8 +39,8 @@ export default function SMS(props: SMSProps) {
 				<Typography><strong>Content</strong></Typography>
 			</Grid>
 			<Grid item xs={12} md={8} lg={10} xl={11}>
-				{props.value &&
-					<Typography style={{whiteSpace: 'pre-wrap'}}>{props.value}</Typography>
+				{value &&
+					<Typography style={{whiteSpace: 'pre-wrap'}}>{value}</Typography>
 				}
 			</Grid>
 		</Grid>
@@ -54,6 +49,5 @@ export default function SMS(props: SMSProps) {
 
 // Valid props
 SMS.propTypes = {
-	mobile: PropTypes.bool.isRequired,
 	value: PropTypes.string.isRequired
 }

package/src/components/pages/Templates/Template/Content/Preview/index.tsx

@@ -29,7 +29,6 @@ import SMS from './SMS';
 import { contentStruct } from '../..';
 import { responseErrorStruct } from '@ouroboros/body';
 export type PreviewProps = {
-	mobile: boolean,
 	onClose: () => void,
 	onError: (error: responseErrorStruct) => void,
 	value: contentStruct
@@ -45,13 +44,10 @@ export type PreviewProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Preview(props: PreviewProps) {
-
-	// Props
-	const { mobile, onClose, onError, value } = props;
+export default function Preview({ onClose, onError, value }: PreviewProps) {
 
 	// State
-	const [preview, previewSet] = useState<contentStruct | string | false>(false);
+	const [ preview, previewSet ] = useState<contentStruct | string | false>(false);
 
 	// Value effect
 	useEffect(() => {
@@ -78,14 +74,12 @@ export default function Preview(props: PreviewProps) {
 					value.type === 'email' &&
 						<Email
 							key={value.template + '_' + value.locale + '_email'}
-							mobile={mobile}
 							value={preview as contentStruct}
 						/>
 				) || (
 					value.type === 'sms' &&
 						<SMS
 							key={value.template + '_' + value.locale + '_sms'}
-							mobile={mobile}
 							value={preview as string}
 						/>
 				)}
@@ -96,7 +90,6 @@ export default function Preview(props: PreviewProps) {
 
 // Valid props
 Preview.propTypes = {
-	mobile: PropTypes.bool.isRequired,
 	onClose: PropTypes.func.isRequired,
 	onError: PropTypes.func.isRequired,
 	value: PropTypes.shape({

package/src/components/pages/Templates/Template/Content/Update/Email.tsx

@@ -10,7 +10,6 @@
 // Ouroboros modules
 import { Node } from '@ouroboros/define';
 import { DefineNode } from '@ouroboros/define-mui';
-import TemplateEmail from '@ouroboros/mouth/definitions/template_email.json';
 
 // NPM modules
 import PropTypes from 'prop-types';
@@ -19,10 +18,8 @@ import React from 'react';
 // Material UI
 import Grid from '@mui/material/Grid';
 
-// Record Nodes
-const oSubjectNode = new Node(TemplateEmail.subject);
-const oTextNode = new Node(TemplateEmail.text);
-const oHtmlNode = new Node(TemplateEmail.html);
+// Import the shared types
+import { EmailTree } from '../../../../../../shared';
 
 // Types
 import { contentStruct } from '../../';
@@ -42,42 +39,42 @@ export type EmailProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Email(props: EmailProps) {
+export default function Email({ errors, onChanged, value }: EmailProps) {
 
 	// Render
 	return (
 		<Grid container className="content_update_email" spacing={1}>
 			<Grid item xs={12} className="field">
 				<DefineNode
-					error={props.errors.subject || false}
+					error={errors.subject || false}
 					label="placeholder"
 					name="subject"
-					node={oSubjectNode}
-					onChange={val => props.onChanged('subject', val)}
+					node={EmailTree.get('subject') as Node}
+					onChange={val => onChanged('subject', val)}
 					type="update"
-					value={props.value.subject}
+					value={value.subject}
 				/>
 			</Grid>
 			<Grid item xs={12} lg={6} className="field">
 				<DefineNode
-					error={props.errors.text || false}
+					error={errors.text || false}
 					label="placeholder"
 					name="text"
-					node={oTextNode}
-					onChange={val => props.onChanged('text', val)}
+					node={EmailTree.get('text') as Node}
+					onChange={val => onChanged('text', val)}
 					type="update"
-					value={props.value.text}
+					value={value.text}
 				/>
 			</Grid>
 			<Grid item xs={12} lg={6} className="field">
 				<DefineNode
-					error={props.errors.html || false}
+					error={errors.html || false}
 					label="placeholder"
 					name="html"
-					node={oHtmlNode}
-					onChange={val => props.onChanged('html', val)}
+					node={EmailTree.get('html') as Node}
+					onChange={val => onChanged('html', val)}
 					type="update"
-					value={props.value.html}
+					value={value.html}
 				/>
 			</Grid>
 		</Grid>

package/src/components/pages/Templates/Template/Content/Update/SMS.tsx

@@ -8,9 +8,7 @@
  */
 
 // Ouroboros modules
-import { Node } from '@ouroboros/define';
 import { DefineNode } from '@ouroboros/define-mui';
-import TemplateSMS from '@ouroboros/mouth/definitions/template_sms.json';
 
 // NPM modules
 import PropTypes from 'prop-types';
@@ -19,8 +17,8 @@ import React from 'react';
 // Material UI
 import Box from '@mui/material/Box';
 
-// Record Nodes
-const oContentNode = new Node(TemplateSMS.content);
+// Import the shared types
+import { SmsTree } from '../../../../../../shared';
 
 // Types
 import { contentStruct } from '../../';
@@ -40,19 +38,19 @@ export type SMSProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function SMS(props: SMSProps) {
+export default function SMS({ errors, onChanged, value }: SMSProps) {
 
 	// Render
 	return (
 		<Box className="content_update_sms field">
 			<DefineNode
-				error={props.errors.content || false}
+				error={errors.content || false}
 				label="placeholder"
 				name="content"
-				node={oContentNode}
-				onChange={val => props.onChanged('content', val)}
+				node={SmsTree.get('content') as any}
+				onChange={val => onChanged('content', val)}
 				type="update"
-				value={props.value.content}
+				value={value.content}
 			/>
 		</Box>
 	);

package/src/components/pages/Templates/Template/Content/Update/index.tsx

@@ -8,7 +8,6 @@
  */
 
 // Ouroboros modules
-import clone from '@ouroboros/clone';
 import { errorTree } from '@ouroboros/define-mui';
 import mouth, { errors } from '@ouroboros/mouth';
 import { owithout } from '@ouroboros/tools';
@@ -31,7 +30,6 @@ import { responseErrorStruct } from '@ouroboros/body';
 import { contentStruct } from '../..';
 export type updateStruct = Omit<contentStruct, 'type'>;
 export type UpdateProps = {
-	mobile: boolean,
 	onError: (error: responseErrorStruct) => void,
 	onUpdated: (content: contentStruct) => void,
 	value: contentStruct
@@ -47,19 +45,19 @@ export type UpdateProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Update(props: UpdateProps) {
+export default function Update({ onError, onUpdated, value }: UpdateProps) {
 
 	// State
-	const [fieldErrors, fieldErrorsSet] = useState<Record<string, string>>({});
-	const [preview, previewSet] = useState<contentStruct | boolean>(false);
-	const [record, recordSet] = useState<updateStruct>(owithout(props.value, 'type') as updateStruct);
+	const [ fieldErrors, fieldErrorsSet ] = useState<Record<string, string>>({});
+	const [ preview, previewSet ] = useState<contentStruct | boolean>(false);
+	const [ record, recordSet ] = useState<updateStruct>(owithout(value, 'type') as updateStruct);
 
 	// Called to create the new content record
 	function update() {
 
 		// Send the record data to the server
-		mouth.update(`template/${props.value.type}`, record).then(() => {
-			props.onUpdated({type: props.value.type, ...record});
+		mouth.update(`template/${value.type}`, record).then(() => {
+			onUpdated({type: value.type, ...record});
 		}, (error: responseErrorStruct) => {
 			if(error.code === errors.body.DATA_FIELDS) {
 				fieldErrorsSet(errorTree(error.msg));
@@ -81,68 +79,61 @@ export default function Update(props: UpdateProps) {
 				}
 
 				// Show the errors
-				if(props.onError) {
-					props.onError({ code: 0, msg: lLines.join('\n') });
+				if(onError) {
+					onError({ code: 0, msg: lLines.join('\n') });
 				}
 			} else {
-				props.onError(error);
+				onError(error);
 			}
 		});
 	}
 
 	// Called when any fields in the record are changed
-	function recordChanged(field: string, value: any) {
+	function recordChanged(field: string, val: any) {
 
 		// Clear error
 		if(field in fieldErrors) {
 			delete fieldErrors.field;
 		}
 
-		// Clone the record
-		const oRecord = clone(record);
-
-		// Update the field
-		oRecord[field] = value;
-
-		// Store the new record
-		recordSet(oRecord);
+		// Set the new record
+		recordSet(o => { return { ...o, [field]: val } });
 	}
 
 	// Render
 	return (
 		<Box className="content_update">
-			{(props.value.type === 'email' &&
+			{(value.type === 'email' &&
 				<Email
 					errors={fieldErrors}
-					key={props.value._id}
+					key={value._id}
 					onChanged={recordChanged}
 					value={record}
 				/>
-			) || (props.value.type === 'sms' &&
+			) || (value.type === 'sms' &&
 				<SMS
 					errors={fieldErrors}
-					key={props.value._id}
+					key={value._id}
 					onChanged={recordChanged}
 					value={record}
 				/>
 			)}
 			<Box className="actions">
-				<Button color="secondary" onClick={() => recordSet(owithout(props.value, 'type') as updateStruct)} variant="contained">Cancel</Button>
+				<Button color="secondary" onClick={() => recordSet(owithout(value, 'type') as updateStruct)} variant="contained">Cancel</Button>
 				<Button color="info" onClick={() => previewSet(true)} variant="contained">Preview</Button>
 				<Button color="primary" onClick={update} variant="contained">Save Content</Button>
 				{preview &&
 					<Preview
-						mobile={props.mobile}
 						onClose={() => previewSet(false)}
 						onError={(error: responseErrorStruct) => {
 							if(error.code === errors.body.DATA_FIELDS) {
 								fieldErrorsSet(errorTree(error.msg));
 							} else {
-								props.onError(error);
+								onError(error);
 							}
 							previewSet(false);
 						}}
-						value={{...record, type: props.value.type}}
+						value={{ ...record, type: value.type }}
 					/>
 				}
 			</Box>
@@ -152,7 +143,6 @@ export default function Update(props: UpdateProps) {
 
 // Valid props
 Update.propTypes = {
-	mobile: PropTypes.bool.isRequired,
 	onError: PropTypes.func.isRequired,
 	onUpdated: PropTypes.func.isRequired,
 	value: PropTypes.shape({

package/src/components/pages/Templates/Template/Content/View/Email.tsx

@@ -18,7 +18,6 @@ import Typography from '@mui/material/Typography';
 // Types
 import { contentStruct } from '../../';
 export type EmailProps = {
-	mobile: boolean,
 	value: contentStruct
 }
 
@@ -32,7 +31,7 @@ export type EmailProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Email(props: EmailProps) {
+export default function Email({ value }: EmailProps) {
 
 	// Render
 	return (
@@ -41,22 +40,22 @@ export default function Email(props: EmailProps) {
 				<Typography><strong>Subject</strong></Typography>
 			</Grid>
 			<Grid item xs={12} md={8} lg={10} xl={11}>
-				{props.value.subject}
+				{value.subject}
 			</Grid>
 			<Grid item xs={12} md={4} lg={2} xl={1}>
 				<Typography><strong>Text</strong></Typography>
 			</Grid>
 			<Grid item xs={12} md={8} lg={10} xl={11}>
-				{props.value.text &&
-					<Typography style={{whiteSpace: 'pre-wrap'}}>{props.value.text}</Typography>
+				{value.text &&
+					<Typography style={{whiteSpace: 'pre-wrap'}}>{value.text}</Typography>
 				}
 			</Grid>
 			<Grid item xs={12} md={4} lg={2} xl={1}>
 				<Typography><strong>HTML</strong></Typography>
 			</Grid>
 			<Grid item xs={12} md={8} lg={10} xl={11}>
-				{props.value.html &&
-					<Typography style={{whiteSpace: 'pre-wrap'}}>{props.value.html}</Typography>
+				{value.html &&
+					<Typography style={{whiteSpace: 'pre-wrap'}}>{value.html}</Typography>
 				}
 			</Grid>
 		</Grid>
@@ -65,7 +64,6 @@ export default function Email(props: EmailProps) {
 
 // Valid props
 Email.propTypes = {
-	mobile: PropTypes.bool.isRequired,
 	value: PropTypes.exact({
 		_id: PropTypes.string.isRequired,
 		_created: PropTypes.number,

package/src/components/pages/Templates/Template/Content/View/SMS.tsx

@@ -18,7 +18,6 @@ import Typography from '@mui/material/Typography';
 // Types
 import { contentStruct } from '../../';
 export type SMSProps = {
-	mobile: boolean,
 	value: contentStruct
 }
 
@@ -32,7 +31,7 @@ export type SMSProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function SMS(props: SMSProps) {
+export default function SMS({ value }: SMSProps) {
 
 	// Render
 	return (
@@ -41,8 +40,8 @@ export default function SMS(props: SMSProps) {
 				<Typography><strong>Content</strong></Typography>
 			</Grid>
 			<Grid item xs={12} md={8} lg={10} xl={11}>
-				{props.value.content &&
-					<Typography style={{whiteSpace: 'pre-wrap'}}>{props.value.content}</Typography>
+				{value.content &&
+					<Typography style={{whiteSpace: 'pre-wrap'}}>{value.content}</Typography>
 				}
 			</Grid>
 		</Grid>
@@ -51,7 +50,6 @@ export default function SMS(props: SMSProps) {
 
 // Valid props
 SMS.propTypes = {
-	mobile: PropTypes.bool.isRequired,
 	value: PropTypes.exact({
 		_id: PropTypes.string.isRequired,
 		_created: PropTypes.number,

package/src/components/pages/Templates/Template/Content/View/index.tsx

@@ -24,7 +24,6 @@ import SMS from './SMS';
 import { responseErrorStruct } from '@ouroboros/body';
 import { contentStruct } from '../..';
 export type ViewProps = {
-	mobile: boolean,
 	onError: (error: responseErrorStruct) => void,
 	value: contentStruct
 }
@@ -39,27 +38,26 @@ export type ViewProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function View(props: ViewProps) {
+export default function View({ onError, value }: ViewProps) {
 
 	// State
-	const [preview, previewSet] = useState(false);
+	const [ preview, previewSet ] = useState(false);
 
 	// Render
 	return (
 		<Box className="content_view">
-			{(props.value.type === 'email' &&
-				<Email {...props} key={props.value._id} />
-			) || (props.value.type === 'sms' &&
-				<SMS {...props} key={props.value._id} />
+			{(value.type === 'email' &&
+				<Email key={value._id} value={value} />
+			) || (value.type === 'sms' &&
+				<SMS key={value._id} value={value} />
 			)}
 			<Box className="actions">
 				<Button color="info" onClick={() => previewSet(true)} variant="contained">Preview</Button>
 				{preview &&
 					<Preview
-						mobile={props.mobile}
 						onClose={() => previewSet(false)}
-						onError={props.onError}
-						value={props.value}
+						onError={onError}
+						value={value}
 					/>
 				}
 			</Box>
@@ -69,10 +67,9 @@ export default function View(props: ViewProps) {
 
 // Valid props
 View.propTypes = {
-	mobile: PropTypes.bool.isRequired,
 	onError: PropTypes.func.isRequired,
 	value: PropTypes.shape({
 		_id: PropTypes.string.isRequired,
-		type: PropTypes.oneOf(['email', 'sms']).isRequired
+		type: PropTypes.oneOf([ 'email', 'sms' ]).isRequired
 	})
 }

package/src/components/pages/Templates/Template/Variables.tsx

@@ -8,7 +8,6 @@
  */
 
 // Ouroboros modules
-import clone from '@ouroboros/clone';
 import { Node } from '@ouroboros/define';
 import { DefineNode } from '@ouroboros/define-mui';
 import { omap } from '@ouroboros/tools';
@@ -46,7 +45,7 @@ export type VariablesProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Variables(props: VariablesProps) {
+export default function Variables({ onChange, value }: VariablesProps) {
 
 	// Refs
 	const refName = useRef<DefineNode>(null);
@@ -56,7 +55,7 @@ export default function Variables(props: VariablesProps) {
 	function add() {
 
 		// Clone the current value
-		const oValue: Record<string, string> = clone(props.value);
+		const oValue: Record<string, string> = { ...value };
 
 		// If we have references to the inputs
 		if(refName.current && refValue.current) {
@@ -70,14 +69,14 @@ export default function Variables(props: VariablesProps) {
 		}
 
 		// Let the parent know
-		props.onChange(oValue);
+		onChange(oValue);
 	}
 
 	// Called when an existing variables needs to be removed
 	function remove(name: string) {
 
 		// Clone the current value
-		const oValue = clone(props.value);
+		const oValue = { ...value };
 
 		// Delete the given key if it exists
 		if(name in oValue) {
@@ -85,14 +84,14 @@ export default function Variables(props: VariablesProps) {
 		}
 
 		// Let the parent know
-		props.onChange(oValue);
+		onChange(oValue);
 	}
 
 	// Render
 	return (
 		<Box>
 			<Grid container spacing={1}>
-				{omap(props.value, (v,k) =>
+				{omap(value, (v,k) =>
 					<React.Fragment key={k}>
 						<Grid item xs={5}>{k}</Grid>
 						<Grid item xs={5}>{v}</Grid>