React native sample app

packages/sitecore-jss-react-native/src/components/Date.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from 'react-native'
+import HtmlView from 'react-native-htmlview';
+
+export interface DateFieldProps {
+	/** The date field data. */
+	field: {
+		value?: string;
+		editable?: string;
+	};
+  /**
+   * Can be used to explicitly disable inline editing.
+   * If true and `field.editable` has a value, then `field.editable` will be processed and rendered as component output. If false, `field.editable` value will be ignored and not rendered.
+   * @default true
+   */
+	editable?: boolean;
+	render?: (date: Date | null) => React.ComponentType<any>;
+	[htmlAttributes: string]: any;
+}
+
+export const DateField: React.SFC<DateFieldProps> = ({ field, editable, render, ...otherProps }) => {
+	if (!field || (!field.editable && !field.value)) {
+		return null;
+	}
+
+	let children: any;
+
+	if (render) {
+		children = render(field.value ? new Date(field.value) : null);
+	} else {
+		children = field.value
+	}
+
+	if (field.editable && editable) {
+		return <HtmlView value={children} {...otherProps} />;
+	} else {
+		return render 
+			? children
+			: <Text>{children}</Text>;
+	}
+};
+
+DateField.propTypes = {
+	field: PropTypes.shape({
+		value: PropTypes.any,
+		editable: PropTypes.string,
+	}).isRequired,
+	editable: PropTypes.bool,
+	render: PropTypes.func,
+};
+
+DateField.defaultProps = {
+	editable: true,
+};
+
+DateField.displayName = 'Date';

packages/sitecore-jss-react-native/src/components/Link.tsx

@@ -0,0 +1,107 @@
+import React, { ReactElement } from 'react'
+import PropTypes from 'prop-types'
+import HtmlView from 'react-native-htmlview'
+import { Text, View, Linking, TouchableWithoutFeedback } from 'react-native';
+
+export interface LinkFieldValue {
+	href?: string;
+	[attributeName: string]: any;
+}
+
+export interface LinkField {
+	value: LinkFieldValue;
+	editableFirstPart?: string;
+	editableLastPart?: string;
+}
+
+export type LinkProps = {
+	/** The link field data. */
+	field: LinkField | LinkFieldValue;
+  /**
+   * Can be used to explicitly disable inline editing.
+   * If true and `field.editable` has a value, then `field.editable` will be processed and rendered as component output. If false, `field.editable` value will be ignored and not rendered.
+   * @default true
+   */
+	editable?: boolean;
+
+  /**
+   * Displays a link text ('description' in Sitecore) even when children exist
+   * NOTE: when in Sitecore Experience Editor, this setting is ignored due to technical limitations, and the description is always rendered.
+   */
+	showLinkTextWithChildrenPresent?: boolean;
+
+	style?: object,
+	textStyle?: object
+};
+
+export const Link: React.FunctionComponent<LinkProps> = ({ field, editable, children, showLinkTextWithChildrenPresent, style, textStyle, ...otherProps }) => {
+	const dynamicField: any = field;
+
+	if (!field || (!dynamicField.editableFirstPart && !dynamicField.value && !dynamicField.href)) {
+		return null;
+	}
+
+	const resultTags: ReactElement<any>[] = [];
+
+	// EXPERIENCE EDITOR RENDERING
+	if (editable && dynamicField.editableFirstPart) {
+		const markup: string = dynamicField.editableFirstPart + dynamicField.editableLastPart;
+
+		// in an ideal world, we'd pre-render React children here and inject them between editableFirstPart and editableLastPart.
+		// However, we cannot combine arbitrary unparsed HTML (innerHTML) based components with actual vDOM components (the children)
+		// because the innerHTML is not parsed - it'd make a discontinuous vDOM. So, we'll go for the next best compromise of rendering the link field and children separately
+		// as siblings. Should be "good enough" for most cases - and write your own helper if it isn't. Or bring xEditor out of 2006.
+
+		resultTags.push(<HtmlView value={markup} />);
+
+		// don't render normal link tag when editing, if no children exist
+		// this preserves normal-ish behavior if not using a link body (no hacks required)
+		if (!children) {
+			return resultTags[0];
+		}
+	}
+
+	// handle link directly on field for forgetful devs
+	const link = dynamicField.href ? field : dynamicField.value;
+	if (!link) {
+		return null;
+	}
+
+	const linkText = showLinkTextWithChildrenPresent || !children 
+		? (link.text || link.href) 
+		: null;
+
+	resultTags.push(
+		<TouchableWithoutFeedback
+			onPress={() => Linking.openURL(link.href)}
+			key='link'
+			{...otherProps}>
+			<View style={style}>
+				{linkText && <Text style={textStyle}>{linkText}</Text>}
+				{children}
+			</View>
+		</TouchableWithoutFeedback>
+	)
+
+	return <View>{resultTags}</View>;
+}
+
+Link.propTypes = {
+	field: PropTypes.oneOfType([
+		PropTypes.shape({
+			href: PropTypes.string,
+		}),
+		PropTypes.shape({
+			value: PropTypes.object,
+			editableFirstPart: PropTypes.string,
+			editableLastPart: PropTypes.string,
+		}),
+	]).isRequired,
+	editable: PropTypes.bool,
+};
+
+Link.defaultProps = {
+	editable: true,
+};
+
+Link.displayName = 'Link';

packages/sitecore-jss-react-native/src/components/Text.tsx

@@ -23,7 +23,7 @@ export const Text: React.SFC<TextProps> = ({ field, ...otherProps }) => {
 
 Text.propTypes = {
   field: PropTypes.shape({
-    value: PropTypes.string,
+    value: PropTypes.any,
     editable: PropTypes.string,
   }),
 };

packages/sitecore-jss-react-native/src/index.ts

@@ -21,6 +21,8 @@ export { SitecoreContext } from './components/SitecoreContext';
 export { Image } from './components/Image';
 export { RichText } from './components/RichText';
 export { Text } from './components/Text';
+export { DateField } from './components/Date';
+export { Link } from './components/Link';
 export {
   convertPropDataToLayoutServiceFormat,
   convertRouteToLayoutServiceFormat,

samples/react-native/assets/images.connected.js

@@ -2,6 +2,9 @@
 
 const images = {
   '/assets/img/banner.jpg': require('./img/banner.jpg'),
+  '/data/media/img/sc_logo.svg': require('../data/media/img/sc_logo.svg'),
+  '/data/media/img/sc_logo.png': require('../data/media/img/sc_logo.png'),
+  '/data/media/img/jss_logo.png': require('../data/media/img/jss_logo.png'),
 };
 
 export { images };

samples/react-native/assets/images.disconnected.js

@@ -2,7 +2,9 @@
 
 const images = {
   '/assets/img/banner.jpg': require('./img/banner.jpg'),
-  '/data/media/img/sc_logo.svg': require('../data/media/img/sc_logo.svg'),
+	'/data/media/img/sc_logo.svg': require('../data/media/img/sc_logo.svg'),
+	'/data/media/img/sc_logo.png': require('../data/media/img/sc_logo.png'),
+	'/data/media/img/jss_logo.png': require('../data/media/img/jss_logo.png'),
 };
 
 export { images };

samples/react-native/data/content/Styleguide/ItemLinkField/Item1/en.json

@@ -0,0 +1,10 @@
+{
+	"id": "styleguide-item-link-field-shared-1",
+	"displayName": "Styleguide Item Link Item 1 (Shared)",
+	"template": "Styleguide-ItemLink-Item-Template",
+	"fields": {
+		"textField": {
+			"value": "ItemLink Demo (Shared) Item 1 Text Field"
+		}
+	}
+}

samples/react-native/data/routes/da-DK.json

@@ -0,0 +1,8 @@
+{
+  "name": "home",
+  "displayName": "Home",
+  "placeholders": {
+    "jss-main": [
+    ]
+  }
+}

samples/react-native/data/routes/en.json

@@ -1,26 +1,28 @@
 {
-  "name": "home",
-  "displayName": "Home",
-  "placeholders": {
-    "jss-main": [
-      {
-        "componentName": "Welcome",
-        "fields": {
-          "title": {
-            "value": "Sitecore Experience Platform + JSS + React Native + disconnected!!"
-          },
-          "text": {
-            "value":
-              "<p>From a single connected platform that also integrates with other customer-facing platforms, to a single view of the customer in a big data marketing repository, to completely eliminating much of the complexity that has previously held marketers back, the latest version of Sitecore makes customer experience highly achievable. Learn how the latest version of Sitecore gives marketers the complete data, integrated tools, and automation capabilities to engage customers throughout an iterative lifecycle – the technology foundation absolutely necessary to win customers for life.</p><p>For further information, please go to the <a href=\"https://doc.sitecore.net/\" target=\"_blank\" title=\"Sitecore Documentation site\">Sitecore Documentation site</a></p>"
-          },
-          "logoImage": {
-            "value": {
-              "src": "/data/media/img/sc_logo.svg",
-              "alt": "Logo"
-            }
-          }
-        }
-      }
-    ]
-  }
-}
+	"name": "home",
+	"displayName": "Home",
+	"placeholders": {
+		"jss-main": [
+			{
+				"componentName": "Home",
+				"fields": {
+					"title": {
+						"value": "Sitecore Experience Platform + JSS + React Native + disconnected!!"
+					},
+					"styleguideLink": {
+						"value": "Styleguide"
+					},
+					"text": {
+						"value": "<p>From a single connected platform that also integrates with other customer-facing platforms, to a single view of the customer in a big data marketing repository, to completely eliminating much of the complexity that has previously held marketers back, the latest version of Sitecore makes customer experience highly achievable. Learn how the latest version of Sitecore gives marketers the complete data, integrated tools, and automation capabilities to engage customers throughout an iterative lifecycle – the technology foundation absolutely necessary to win customers for life.</p><p>For further information, please go to the <a href=\"https://doc.sitecore.net/\" target=\"_blank\" title=\"Sitecore Documentation site\">Sitecore Documentation site</a></p>"
+					},
+					"logoImage": {
+						"value": {
+							"src": "/data/media/img/sc_logo.svg",
+							"alt": "Logo"
+						}
+					}
+				}
+			}
+		]
+	}
+}

samples/react-native/data/routes/styleguide/da-DK.json

@@ -0,0 +1,31 @@
+{
+  "name": "styleguide",
+  "displayName": "Styleguide",
+  "placeholders": {
+    "jss-main": [
+      {
+				"componentName": "Styleguide-FieldUsage-Text",
+				"fields": {
+					"heading": {
+						"value": "Enkeltlinjetekst"
+					},
+					"sample": {
+						"value": "Dette er et eksempel på tekstfelt."
+					},
+					"sample2": {
+						"value": "Dette er et andet eksempel på tekstfelt ved hjælp af gengivelsesindstillinger. Kan ikke redigere, fordi redigerbar = falsk."
+					}
+				}
+			},
+      {
+        "componentName": "Styleguide-Multilingual",
+        "fields": {
+          "heading": {
+            "value": "Oversættelsesmønstre da-DK"
+          },
+          "sample": "Denne tekst kan oversættes til da-DK.yml"
+        }
+      }
+    ]
+  }
+}