@movable/studio-framework 3.16.0 → 3.16.1-canary.18

package/dist/index.es.js

@@ -146,13 +146,36 @@ class StyledElement extends React.Component {
     this.updateStyleElement();
   }
 
+  componentDidUpdate() {
+    this.updateStyleElement();
+  }
+
   render() {
     const {
       tag,
-      children
+      children,
+      resolveProperty
     } = this.props;
     const style = styleFromAttributes(tag);
     const className = classNameFromAttributes(tag);
+    const href = resolveProperty && tag.dynamicHref ? resolveProperty(tag.dynamicHref) : null;
+
+    if (href) {
+      const analyticsId = tag.dynamicHref?.analyticsId;
+      return /*#__PURE__*/React.createElement("a", {
+        className: className,
+        style: {
+          textDecoration: 'none',
+          color: 'inherit',
+          ...style
+        },
+        href: href,
+        target: "_parent",
+        "data-mi-analytics-id": analyticsId || undefined,
+        ref: this.setStyleElementRef
+      }, children);
+    }
+
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: style,
@@ -480,6 +503,29 @@ class TagComponent extends React.Component {
 
 }
 
+function makeResolveProperty(propertyResolver) {
+  return function resolveProperty(prop) {
+    if (!prop) return null;
+
+    if (prop.propertyValue) {
+      return prop.propertyValue;
+    }
+
+    const {
+      propertyPath,
+      context,
+      propertyGroupKey = false
+    } = prop;
+    const [result] = propertyResolver.getPropertyStateTuple(propertyGroupKey, propertyPath, context);
+
+    if (result !== null && typeof result !== 'undefined' && result !== '') {
+      return result;
+    }
+
+    return prop.propertyFallback || null;
+  };
+}
+
 class Tags extends React.Component {
   render() {
     const {
@@ -489,6 +535,7 @@ class Tags extends React.Component {
       tags,
       canvas
     } = this.props;
+    const resolveProperty = makeResolveProperty(propertyResolver);
     return tags.map((tag, index) => {
       const {
         subtags
@@ -496,7 +543,8 @@ class Tags extends React.Component {
       return /*#__PURE__*/React.createElement(StyledElement, {
         key: index,
         tag: tag,
-        registryResolver: registryResolver
+        registryResolver: registryResolver,
+        resolveProperty: resolveProperty
       }, subtags ? /*#__PURE__*/React.createElement(Tags, {
         tags: subtags,
         canvas: canvas,
@@ -1900,11 +1948,54 @@ const getYPosition = justifyContent => {
 const RichTextSpan = ({
   attributes,
   insert,
-  fitToOneLine
+  fitToOneLine,
+  getPropertyWithFallback
 }) => {
   const whiteSpace = fitToOneLine ? 'nowrap' : 'pre-wrap';
+
+  if (attributes && attributes.dynamicLink) {
+    try {
+      const dynamicLinkData = typeof attributes.dynamicLink === 'string' ? JSON.parse(attributes.dynamicLink) : attributes.dynamicLink;
+      let href = null;
+
+      if (dynamicLinkData.propertyValue) {
+        href = dynamicLinkData.propertyValue;
+      } else if (getPropertyWithFallback) {
+        href = getPropertyWithFallback(dynamicLinkData);
+      } else if (dynamicLinkData.propertyFallback) {
+        href = dynamicLinkData.propertyFallback;
+      }
+
+      if (href) {
+        const {
+          dynamicLink,
+          ...cleanAttributes
+        } = attributes;
+        const styles = {
+          color: 'inherit',
+          textDecoration: 'inherit',
+          ...normalizeRichTextStyles(cleanAttributes),
+          whiteSpace
+        };
+        const analyticsId = dynamicLinkData.analyticsId;
+        return /*#__PURE__*/React.createElement("a", {
+          href: href,
+          target: "_parent",
+          style: styles,
+          "data-mi-analytics-id": analyticsId || undefined
+        }, insert);
+      }
+    } catch (e) {// Parse error — fall through to render as span
+    }
+  }
+
+  const attrs = attributes || {};
+  const {
+    dynamicLink: _dl,
+    ...cleanAttrs
+  } = attrs;
   return /*#__PURE__*/React.createElement("span", {
-    style: { ...normalizeRichTextStyles(attributes),
+    style: { ...normalizeRichTextStyles(cleanAttrs),
       whiteSpace
     }
   }, insert);
@@ -1916,12 +2007,13 @@ const isNewLine = ({
 
 const haveSpans = spans => spans.length;
 
-const mapSpans = (spans, fitToOneLine) => spans.map((span, n) => isNewLine(span) ? /*#__PURE__*/React.createElement("br", {
+const mapSpans = (spans, fitToOneLine, getPropertyWithFallback) => spans.map((span, n) => isNewLine(span) ? /*#__PURE__*/React.createElement("br", {
   key: n
 }) : /*#__PURE__*/React.createElement(RichTextSpan, _extends({
   key: n
 }, span, {
-  fitToOneLine: fitToOneLine
+  fitToOneLine: fitToOneLine,
+  getPropertyWithFallback: getPropertyWithFallback
 })));
 
 class RichTextElement extends StudioTool {
@@ -2016,6 +2108,9 @@ class RichTextElement extends StudioTool {
     const {
       fitToOneLine = false
     } = this.props.tag;
+    const {
+      getPropertyWithFallback
+    } = this.props;
     this.lastRichText = richTextStructure;
     const style = {
       fontSize: baseFontSize
@@ -2031,7 +2126,7 @@ class RichTextElement extends StudioTool {
       style: { ...attributes
       },
       key: i
-    }, haveSpans(spans) ? mapSpans(spans, fitToOneLine) : /*#__PURE__*/React.createElement("br", null))));
+    }, haveSpans(spans) ? mapSpans(spans, fitToOneLine, getPropertyWithFallback) : /*#__PURE__*/React.createElement("br", null))));
   }
 
 }

package/dist/index.js

@@ -156,13 +156,36 @@ class StyledElement extends React__default['default'].Component {
     this.updateStyleElement();
   }
 
+  componentDidUpdate() {
+    this.updateStyleElement();
+  }
+
   render() {
     const {
       tag,
-      children
+      children,
+      resolveProperty
     } = this.props;
     const style = styleFromAttributes(tag);
     const className = classNameFromAttributes(tag);
+    const href = resolveProperty && tag.dynamicHref ? resolveProperty(tag.dynamicHref) : null;
+
+    if (href) {
+      const analyticsId = tag.dynamicHref?.analyticsId;
+      return /*#__PURE__*/React__default['default'].createElement("a", {
+        className: className,
+        style: {
+          textDecoration: 'none',
+          color: 'inherit',
+          ...style
+        },
+        href: href,
+        target: "_parent",
+        "data-mi-analytics-id": analyticsId || undefined,
+        ref: this.setStyleElementRef
+      }, children);
+    }
+
     return /*#__PURE__*/React__default['default'].createElement("div", {
       className: className,
       style: style,
@@ -490,6 +513,29 @@ class TagComponent extends React__default['default'].Component {
 
 }
 
+function makeResolveProperty(propertyResolver) {
+  return function resolveProperty(prop) {
+    if (!prop) return null;
+
+    if (prop.propertyValue) {
+      return prop.propertyValue;
+    }
+
+    const {
+      propertyPath,
+      context,
+      propertyGroupKey = false
+    } = prop;
+    const [result] = propertyResolver.getPropertyStateTuple(propertyGroupKey, propertyPath, context);
+
+    if (result !== null && typeof result !== 'undefined' && result !== '') {
+      return result;
+    }
+
+    return prop.propertyFallback || null;
+  };
+}
+
 class Tags extends React__default['default'].Component {
   render() {
     const {
@@ -499,6 +545,7 @@ class Tags extends React__default['default'].Component {
       tags,
       canvas
     } = this.props;
+    const resolveProperty = makeResolveProperty(propertyResolver);
     return tags.map((tag, index) => {
       const {
         subtags
@@ -506,7 +553,8 @@ class Tags extends React__default['default'].Component {
       return /*#__PURE__*/React__default['default'].createElement(StyledElement, {
         key: index,
         tag: tag,
-        registryResolver: registryResolver
+        registryResolver: registryResolver,
+        resolveProperty: resolveProperty
       }, subtags ? /*#__PURE__*/React__default['default'].createElement(Tags, {
         tags: subtags,
         canvas: canvas,
@@ -1910,11 +1958,54 @@ const getYPosition = justifyContent => {
 const RichTextSpan = ({
   attributes,
   insert,
-  fitToOneLine
+  fitToOneLine,
+  getPropertyWithFallback
 }) => {
   const whiteSpace = fitToOneLine ? 'nowrap' : 'pre-wrap';
+
+  if (attributes && attributes.dynamicLink) {
+    try {
+      const dynamicLinkData = typeof attributes.dynamicLink === 'string' ? JSON.parse(attributes.dynamicLink) : attributes.dynamicLink;
+      let href = null;
+
+      if (dynamicLinkData.propertyValue) {
+        href = dynamicLinkData.propertyValue;
+      } else if (getPropertyWithFallback) {
+        href = getPropertyWithFallback(dynamicLinkData);
+      } else if (dynamicLinkData.propertyFallback) {
+        href = dynamicLinkData.propertyFallback;
+      }
+
+      if (href) {
+        const {
+          dynamicLink,
+          ...cleanAttributes
+        } = attributes;
+        const styles = {
+          color: 'inherit',
+          textDecoration: 'inherit',
+          ...normalizeRichTextStyles(cleanAttributes),
+          whiteSpace
+        };
+        const analyticsId = dynamicLinkData.analyticsId;
+        return /*#__PURE__*/React__default['default'].createElement("a", {
+          href: href,
+          target: "_parent",
+          style: styles,
+          "data-mi-analytics-id": analyticsId || undefined
+        }, insert);
+      }
+    } catch (e) {// Parse error — fall through to render as span
+    }
+  }
+
+  const attrs = attributes || {};
+  const {
+    dynamicLink: _dl,
+    ...cleanAttrs
+  } = attrs;
   return /*#__PURE__*/React__default['default'].createElement("span", {
-    style: { ...normalizeRichTextStyles(attributes),
+    style: { ...normalizeRichTextStyles(cleanAttrs),
       whiteSpace
     }
   }, insert);
@@ -1926,12 +2017,13 @@ const isNewLine = ({
 
 const haveSpans = spans => spans.length;
 
-const mapSpans = (spans, fitToOneLine) => spans.map((span, n) => isNewLine(span) ? /*#__PURE__*/React__default['default'].createElement("br", {
+const mapSpans = (spans, fitToOneLine, getPropertyWithFallback) => spans.map((span, n) => isNewLine(span) ? /*#__PURE__*/React__default['default'].createElement("br", {
   key: n
 }) : /*#__PURE__*/React__default['default'].createElement(RichTextSpan, _extends({
   key: n
 }, span, {
-  fitToOneLine: fitToOneLine
+  fitToOneLine: fitToOneLine,
+  getPropertyWithFallback: getPropertyWithFallback
 })));
 
 class RichTextElement extends StudioTool {
@@ -2026,6 +2118,9 @@ class RichTextElement extends StudioTool {
     const {
       fitToOneLine = false
     } = this.props.tag;
+    const {
+      getPropertyWithFallback
+    } = this.props;
     this.lastRichText = richTextStructure;
     const style = {
       fontSize: baseFontSize
@@ -2041,7 +2136,7 @@ class RichTextElement extends StudioTool {
       style: { ...attributes
       },
       key: i
-    }, haveSpans(spans) ? mapSpans(spans, fitToOneLine) : /*#__PURE__*/React__default['default'].createElement("br", null))));
+    }, haveSpans(spans) ? mapSpans(spans, fitToOneLine, getPropertyWithFallback) : /*#__PURE__*/React__default['default'].createElement("br", null))));
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movable/studio-framework",
-  "version": "3.16.0",
+  "version": "3.16.1-canary.18+0e7ee126",
   "description": "A Component library for reactive Studio apps.",
   "author": "Movable Ink",
   "repository": "movableink/studio-framework",
@@ -31,8 +31,8 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.13.0",
     "@movable/eslint-config-react": "^1.0.1",
-    "@movable/framework-types": "^3.16.0",
-    "@movable/studio-framework-test-helpers": "^3.16.0",
+    "@movable/framework-types": "^3.16.1-canary.18+0e7ee126",
+    "@movable/studio-framework-test-helpers": "^3.16.1-canary.18+0e7ee126",
     "@types/qunit": "^2.11.1",
     "@types/qunit-dom": "^0.7.0",
     "@types/react": "^17.0.6",
@@ -66,5 +66,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "26c6ba756981e2b44d0703141daab6eda214a75d"
+  "gitHead": "0e7ee12614124ce01498aa9dafb8cb2b240b719b"
 }