From b7a345519780783a696c8990e76a11ae9ebb6e44 Mon Sep 17 00:00:00 2001 From: Anthony Gallo Date: Wed, 1 Sep 2021 16:07:46 -0400 Subject: [PATCH] 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 --- patterns/DataItem/DataItem.mdx | 7 +- patterns/DataItem/DataItem.styles.js | 27 +++++ patterns/DataItem/index.js | 162 ++++++++++++--------------- 3 files changed, 101 insertions(+), 95 deletions(-) create mode 100644 patterns/DataItem/DataItem.styles.js diff --git a/patterns/DataItem/DataItem.mdx b/patterns/DataItem/DataItem.mdx index 607ef96b4d..0820100a66 100644 --- 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 - \ No newline at end of file + diff --git a/patterns/DataItem/DataItem.styles.js b/patterns/DataItem/DataItem.styles.js new file mode 100644 index 0000000000..54098337ab --- /dev/null +++ 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 index d1ce947c28..949171edc2 100644 --- 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,45 +21,30 @@ 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(); @@ -91,29 +52,55 @@ class DataItem extends lng.Component { }); } + // 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; } }