hy-general-list.tsx

export interface ListItemValue {
  description: string;
  id: string;
  imageAlt: string;
  imageUrl: string;
  label: string;
  subLabel: string;
  date: string;
  tag: string;
  title: string;
  type: string;
  url: string;
  target: boolean;
}

import {Component, Element, h, Prop, State, Watch, Host} from '@stencil/core';
import {GeneralListTypes} from '../../utils/utils';

@Component({
  tag: 'hy-general-list',
  styleUrl: 'hy-general-list.scss',
  shadow: true,
})
export class HyGeneralList {
  @Prop() type: GeneralListTypes = GeneralListTypes.list;
  @Prop() blank: boolean = true;
  @Prop() dataItems: ListItemValue[] | string;
  @Prop() truncateDescription: boolean = true;
  @Prop() truncateLimit: number = 140;
  private _dataItems: ListItemValue[];
  @Element() el: HTMLElement;
  @State() hasSidebar: boolean = false;

  @Watch('dataItems')
  arrayDataWatcher(newValue: ListItemValue[] | string) {
    if (typeof newValue === 'string') {
      this._dataItems = JSON.parse(newValue);
    } else {
      this._dataItems = newValue;
    }
  }

  componentWillLoad() {
    this.arrayDataWatcher(this.dataItems);

    const hyMainDiv = this.el.closest('.hy-main');
    if (hyMainDiv) {
      if (hyMainDiv.classList.contains('with-sidebar')) {
        this.hasSidebar = true;
      }
    }
  }

  render() {
    const classAttributes = [
      'hy-general-list',
      this.hasSidebar ? 'hy-general-list--with-sidebar' : '',
      `hy-general-list--style-${this.type}`,
    ].join(' ');

    let listData = this._dataItems;
    if (typeof this._dataItems === 'object') {
      listData = Object.values(this._dataItems);
    }

    function truncate(str, n) {
      return str.length > n ? str.substr(0, n - 1) + '...' : str;
    }

    return (
      <Host>
        <ul class={classAttributes}>
          {listData &&
            listData.map((item) => (
              <li>
                <hy-general-list-item
                  has-sidebar={this.hasSidebar}
                  target={this.blank}
                  data-location={item.url}
                  description={
                    this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description
                  }
                  id={item.id}
                  imageAlt={item.imageAlt}
                  imageUrl={item.imageUrl}
                  item-title={item.title}
                  label={item.label}
                  sub-label={item.subLabel}
                  tag={item.tag}
                  date={item.date}
                  type={item.type}
                  url={item.url}
                  list-style={this.type}
                ></hy-general-list-item>
              </li>
            ))}
        </ul>
        <hy-box mb="1.75, 1.75, 2, 2.5" />
      </Host>
    );
  }
}