refactor(DataItem): update DataItem to extend Base, extract Styles (…

…#624) * refactor(DataItem): update DataItem to extend Base, add properties to static properties array * docs(DataItem): update docs to match latest API * feat(DataItem): extract styles to styles.js * fix(DataItem): patch in content in setter instead of update method * feat(DataItem): add updateContent method * fix(DataItem): revert setContent changes to unbreak other DataItem-based components * feat(DataItem): update focus ring and background update methods Co-authored-by: eraute200 <emily_rautenberg@comcast.com>
rdkcentral · Sep 1, 2021 · b7a3455 · b7a3455
1 parent f1a15d0
commit b7a3455
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 95 deletions.
diff --git a/patterns/DataItem/DataItem.mdx b/patterns/DataItem/DataItem.mdx
@@ -22,7 +22,7 @@ class Example extends lng.Component {
         type: DataItem,
           h,
           w,
-          contents: { ... }
+          content: { ... }
       }
     };
   }
@@ -42,10 +42,11 @@ name|type|required|default|description
 h|number|true|-|height of background and all contents inside
 w|number|true|-|width of background and all contents inside
 margin|number\|object|false|0|spacing between background edges and content start
-contents|object|true|-|contents inside of data item that can be composed of elements and component
+content|object|true|-|contents inside of data item that can be composed of elements and component
+backgroundImage|string|false|-|sets the source path of the backgroundImage (can be any image type)
 
 ### Styles
 
 Styled components can be adjusted by composing using [withStyles](?path=/docs/mixins-withstyles--basic). Below is the default `styles` object
 
-<Theme theme={DataItem.styles} />
+<Theme theme={DataItem.styles} />
diff --git a/patterns/DataItem/DataItem.styles.js b/patterns/DataItem/DataItem.styles.js
@@ -0,0 +1,27 @@
+import { FocusRing } from '../../elements';
+
+export default theme => ({
+  background: {
+    color: theme.palette.background.ghost
+  },
+  radius: theme.border.radius.medium,
+  focusringType: FocusRing,
+  focusring: function ({ w, h, radius, color }) {
+    return {
+      w,
+      h,
+      radius: radius + 2,
+      color,
+      size: theme.spacing(0.5),
+      zIndex: 1
+    };
+  },
+  unfocused: {
+    scale: () => 1,
+    focusring: { alpha: 0 }
+  },
+  focused: {
+    scale: theme.getFocusScale,
+    focusring: { alpha: 1 }
+  }
+});
diff --git a/patterns/DataItem/index.js b/patterns/DataItem/index.js
@@ -1,33 +1,9 @@
 import lng from '@lightningjs/core';
-import FocusRing from '../../elements/FocusRing';
+import { Base } from '../../elements';
+import styles from './DataItem.styles';
 import withStyles from '../../mixins/withStyles';
 
-export const styles = theme => ({
-  background: {
-    color: theme.palette.background.ghost
-  },
-  radius: theme.border.radius.medium,
-  focusring: function ({ w, h, radius }) {
-    return {
-      type: FocusRing,
-      w,
-      h,
-      radius: radius + 2,
-      size: theme.spacing(0.5),
-      zIndex: 1
-    };
-  },
-  unfocused: {
-    scale: () => 1,
-    focusring: { alpha: 0 }
-  },
-  focused: {
-    scale: theme.getFocusScale,
-    focusring: { alpha: 1 }
-  }
-});
-
-class DataItem extends lng.Component {
+class DataItem extends Base {
   static _template() {
     return {
       Background: {
@@ -45,75 +21,86 @@ class DataItem extends lng.Component {
     };
   }
 
+  static get properties() {
+    return ['backgroundImage', 'margin'];
+  }
+
+  static get tags() {
+    return ['FocusRing', 'Content', 'Background'];
+  }
+
   _construct() {
-    this._whenEnabled = new Promise(
-      resolve => (this._enable = resolve),
-      console.error
-    );
+    super._construct();
     this._radius = this.styles.radius;
   }
 
   _init() {
-    this._Background.w = this.w;
-    this._Background.h = this.h;
     this._Content.w = this.w;
     this._Content.h = this.h;
     this._update();
   }
 
-  set backgroundImage(backgroundImage) {
-    this._backgroundImage = backgroundImage;
-    this._update();
-  }
-
-  set margin(margin) {
-    if (typeof margin === 'object') {
-      this._marginX = margin.x;
-      this._marginY = margin.y;
-    } else {
-      this._marginX = margin;
-      this._marginY = margin;
-    }
-    this._update();
-  }
-
-  set content(content) {
-    this._Content.patch(content, true);
-    this._update();
-  }
-
   _update() {
+    this._Background.w = this.w;
+    this._Background.h = this.h;
     this._whenEnabled.then(() => {
+      // this._updateContent();
       this._updateFocusRing();
       this._updateScale();
       this._updateMargins();
       this._updateBackgroundImg();
     });
   }
 
+  // TODO: After other components using DataItem are refactored,
+  // add content to the properties array, remove the getter and setter
+  // and uncomment the _updateContent method below and in _update
+  set content(content) {
+    if (this._content != content) {
+      this._content = content;
+      this._Content.patch(this._content, true);
+      this._update();
+    }
+  }
+
+  get content() {
+    return this.content;
+  }
+
+  // _updateContent() {
+  //   if (this.content) {
+  //     this._Content.patch(this.content, true);
+  //   }
+  // }
   _updateFocusRing() {
-    if (!this._focusRing) {
-      this._focusRing = this.styles.focusring({
-        w: this.w,
-        h: this.h,
-        radius: this._radius + 2
+    if (this.hasFocus() || this._FocusRing) {
+      if (!this._FocusRing) {
+        this.patch({ FocusRing: { type: this.styles.focusringType } });
+      }
+
+      this._FocusRing.patch({
+        ...this.styles.focusring({
+          w: this.w,
+          h: this.h,
+          radius: this._radius,
+          color: this.focusRingColor
+        })
       });
-    }
-    let FocusRingComponent = this._focusRing;
-    const style = this.hasFocus()
-      ? this.styles.focused.focusring
-      : this.styles.unfocused.focusring;
-    if (this._smooth) {
-      FocusRingComponent.smooth = style;
-    } else {
-      FocusRingComponent = { ...FocusRingComponent, ...style };
-    }
-    this.patch({ FocusRing: FocusRingComponent });
 
-    if (this.hasFocus()) {
-      this._FocusRing.startAnimation();
-    } else {
-      this._FocusRing.stopAnimation();
+      const style = this.hasFocus()
+        ? this.styles.focused.focusring
+        : this.styles.unfocused.focusring;
+      if (this._smooth) {
+        this._FocusRing.smooth = style;
+      } else {
+        this._FocusRing.patch(style);
+      }
+
+      if (this.hasFocus()) {
+        this._FocusRing.startAnimation();
+      } else {
+        this._FocusRing.stopAnimation();
+      }
     }
   }
 
@@ -142,24 +129,15 @@ class DataItem extends lng.Component {
     }
   }
 
-  _focus() {
-    if (this._smooth === undefined) this._smooth = true;
-    this._update();
-  }
-
-  _unfocus() {
-    this._update();
-  }
-
-  get _FocusRing() {
-    return this.tag('FocusRing');
-  }
-
-  get _Content() {
-    return this.tag('Content');
-  }
-  get _Background() {
-    return this.tag('Background');
+  _setMargin(margin) {
+    if (typeof margin === 'object') {
+      this._marginX = margin.x;
+      this._marginY = margin.y;
+    } else {
+      this._marginX = margin;
+      this._marginY = margin;
+    }
+    return margin;
   }
 }