#520166 fixed comments (repair after wrong rebase)

Sitecore · Mar 29, 2022 · 17d4600 · 17d4600
1 parent 0802431
commit 17d4600
Show file tree

Hide file tree

Showing 12 changed files with 202 additions and 317 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Navigation.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Navigation.tsx
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx
@@ -6,28 +6,29 @@ import {
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 
-interface Fields {
-}
+const BACKGROUND_REG_EXP = new RegExp(
+  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi
+);
 
 interface ComponentProps {
   rendering: ComponentRendering & { params: ComponentParams };
   params: ComponentParams;
-  fields: Fields;
 }
 
 const Container = (props: ComponentProps): JSX.Element => {
-  var styles = `${props.params.GridParameters} ${props.params.Styles}`.replace(/\|/g, ' ');
-  var phKey = `container-${props.params.DynamicPlaceholderId}`;
-  var backgroundStyle:  { [key: string]: string; } ;
-  var backgroundImage = props.params.BackgroundImage as string;
+  const { sitecoreContext } = useSitecoreContext();
+  const styles = `${props.params.GridParameters} ${props.params.Styles}`;
+  const phKey = `container-${props.params.DynamicPlaceholderId}`;
+  const backgroundImage = props.params.BackgroundImage as string;
+  let backgroundStyle: { [key: string]: string };
+
   if (backgroundImage) {
-    var prefix = `${useSitecoreContext().sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`
-    backgroundStyle = { backgroundImage: `url('${prefix}${backgroundImage?.match(/[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi)?.pop()?.replace(/\-/g,'')}')` };
-  }
-  if (props.rendering.placeholders && props.rendering.placeholders["container-{*}"]) {
-    props.rendering.placeholders[phKey] = props.rendering.placeholders["container-{*}"];
-    delete props.rendering.placeholders["container-{*}"];
+    const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`;
+    backgroundStyle = {
+      backgroundImage: `url('${prefix}${backgroundImage?.match(BACKGROUND_REG_EXP)?.pop()}')`,
+    };
   }
+
   return (
     <div className={`component container ${styles}`}>
       <div className="component-content" style={backgroundStyle}>
@@ -36,7 +37,7 @@ const Container = (props: ComponentProps): JSX.Element => {
         </div>
       </div>
     </div>
-  )
+  );
 };
 
 export default Container;
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
@@ -5,7 +5,7 @@ import {
   ImageField,
   Field,
   LinkField,
-  Text
+  Text,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface Fields {
@@ -19,46 +19,46 @@ type ImageProps = {
   fields: Fields;
 };
 
+const ImageDefault = (props: ImageProps): JSX.Element => (
+  <div className={`component image ${props.params.styles}`}>
+    <div className="component-content">
+      <span className="is-empty-hint">Image</span>
+    </div>
+  </div>
+);
+
 export const Default = (props: ImageProps): JSX.Element => {
   if (props.fields) {
     return (
-      <div className={`component image ${props.params.styles?.replace(/\|/g, ' ')}`}>
+      <div className={`component image ${props.params.styles}`}>
         <div className="component-content">
           <JssImage field={props.fields.Image} />
           <Text className="image-caption field-imagecaption" field={props.fields.ImageCaption} />
         </div>
       </div>
     );
-  } else {
-    return (
-      <div className={`component image ${props.params.styles?.replace(/\|/g, ' ')}`}>
-        <div className="component-content"> 
-          <span className="is-empty-hint">Image</span>
-        </div>
-      </div>
-    )
-  }  
+  }
+
+  return <ImageDefault {...props} />;
 };
 
 export const Link = (props: ImageProps): JSX.Element => {
   if (props.fields) {
-    return (  
-      <div className={`component image ${props.params.styles?.replace(/\|/g, ' ')}`}>
+    return (
+      <div className={`component image ${props.params.styles}`}>
         <div className="component-content">
           <JssLink field={props.fields.Link}>
             <JssImage field={props.fields.Image} />
-            <Text tag="span" className="image-caption field-imagecaption" field={props.fields.ImageCaption} />
+            <Text
+              tag="span"
+              className="image-caption field-imagecaption"
+              field={props.fields.ImageCaption}
+            />
           </JssLink>
         </div>
       </div>
     );
-  } else {
-    return (
-      <div className={`component image ${props.params.styles?.replace(/\|/g, ' ')}`}>
-        <div className="component-content"> 
-          <span className="is-empty-hint">Image</span>
-        </div>
-      </div>
-    )
   }
-};
+
+  return <ImageDefault {...props} />;
+};
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx
@@ -1,22 +1,20 @@
 import React from 'react';
-import {
-  Link as JssLink,
-  Text,
-  LinkField,
-} from '@sitecore-jss/sitecore-jss-nextjs';
+import { Link as JssLink, Text, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
 import { TextField } from '@sitecore-jss/sitecore-jss-react';
 
+type ResultsFieldLink = {
+  field: {
+    link: LinkField;
+  };
+};
+
 interface Fields {
-  data: Object & {
-    datasource: Object & {
-      children: Object & {
-        results: Array<any> & {
-          field: Object & {
-            link: LinkField;
-          };
-        };
+  data: {
+    datasource: {
+      children: {
+        results: ResultsFieldLink[];
       };
-      field: Object & {
+      field: {
         title: TextField;
       };
     };
@@ -28,9 +26,16 @@ type LinkListProps = {
   fields: Fields;
 };
 
-const LinkListItem = (props: any) => {
+type LinkListItemProps = {
+  key: string;
+  index: number;
+  total: number;
+  field: ResultsFieldLink;
+};
+
+const LinkListItem = (props: LinkListItemProps) => {
   let className = `item${props.index}`;
-  (props.index + 1) % 2 == 0 ? (className += ' odd') : (className += ' even');
+  className += (props.index + 1) % 2 == 0 ? ' odd' : ' even';
   if (props.index == 0) {
     className += ' first';
   }
@@ -47,37 +52,35 @@ const LinkListItem = (props: any) => {
 };
 
 export const Default = (props: LinkListProps): JSX.Element => {
-  let datasource = props.fields?.data?.datasource;
+  const datasource = props.fields?.data?.datasource;
+
   if (datasource) {
-    let list = [];
-    for (let i = 0; i < datasource.children.results.length; i++) {
-      let element = datasource.children.results[i].field.link;
-      if (element) {
-        list.push(
-          <LinkListItem
-            index={i}
-            key={i}
-            total={datasource.children.results.length}
-            field={element}
-          />
-        );
-      }
-    }
+    const list = datasource.children.results
+      .filter((element: ResultsFieldLink) => element?.field?.link)
+      .map((element: ResultsFieldLink, key: number) => (
+        <LinkListItem
+          index={key}
+          key={`${key}${element.field.link}`}
+          total={datasource.children.results.length}
+          field={element}
+        />
+      ));
+
     return (
-      <div className={`component link-list ${props.params.styles?.replace(/\|/g, ' ')}`}>
+      <div className={`component link-list ${props.params.styles}`}>
         <div className="component-content">
           <Text tag="h3" field={datasource?.field?.title} />
           <ul>{list}</ul>
         </div>
       </div>
     );
-  } else {
-    return (
-      <div className={`component link-list ${props.params.styles?.replace(/\|/g, ' ')}`}>
-        <div className="component-content">
-          <h3>Link List</h3>
-        </div>
-      </div>
-    );
   }
+
+  return (
+    <div className={`component link-list ${props.params.styles}`}>
+      <div className="component-content">
+        <h3>Link List</h3>
+      </div>
+    </div>
+  );
 };