preact-material-components/GridList/index.js

preact wrapper for "Material Components for the web"

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _preact = require("preact");

var _MaterialComponent = _interopRequireDefault(require("../MaterialComponent"));

var _Icon = _interopRequireDefault(require("../Icon"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const notEmptyString = val => val !== '';
/**
 * @prop tile-gutter-1 {boolean} - use 1px gutter (default is 4px)
 * @prop header-caption {boolean} - position <GridList.SecondaryTile> at top
 * @prop twoline-caption {boolean} - add spacing to <GridList.SecondaryTile> for <GridList.SupportTextTile>
 * @prop with-icon-align {"start"|"end"} - position <GridList.IconTile> at beginning or end of <GridList.SecondaryTile>
 * @prop tile-aspect {"1x1"|"16x9"|"2x3"|"3x2"|"4x3"|"3x4"} - aspect ratio for <GridList.PrimaryTile>
 */


class GridList extends _MaterialComponent.default {
  get validationValuesByKey() {
    return {
      'with-icon-align': ['start', 'end'],
      'tile-aspect': ['1x1', '16x9', '2x3', '3x2', '4x3', '3x4']
    };
  }

  isValidValue(validationValues, testValue) {
    return validationValues && validationValues.findIndex(val => val === testValue) >= 0;
  }

  constructor() {
    super();
    this.componentName = 'grid-list';
    this._mdcProps = ['header-caption', 'twoline-caption', 'tile-gutter-1'];
  }

  mapClassName(propKey, props) {
    const propValue = props[propKey];
    const validationValues = this.validationValuesByKey[propKey];
    return this.isValidValue(validationValues, propValue) ? `mdc-${this.componentName}--${propKey}-${propValue}` : '';
  }

  materialDom(props) {
    const className = Object.keys(this.validationValuesByKey).map(key => {
      return this.mapClassName(key, props);
    }).filter(notEmptyString).join(' ');
    return (0, _preact.h)("div", _extends({}, props, {
      className: className
    }), props.children);
  }

}

class GridListTiles extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'grid-list__tiles';
  }

  materialDom(props) {
    return (0, _preact.h)("ul", props, props.children);
  }

}

class GridListTile extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'grid-tile';
  }

  materialDom(props) {
    return (0, _preact.h)("li", props, props.children);
  }

}

class GridListPrimaryTile extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'grid-tile__primary';
  }

  materialDom(props) {
    return (0, _preact.h)("div", props, props.children);
  }

}

class GridListPrimaryContentTile extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'grid-tile__primary-content';
  }

  materialDom(props) {
    return (0, _preact.h)("img", props);
  }

}

class GridListSecondaryTile extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'grid-tile__secondary';
  }

  materialDom(props) {
    return (0, _preact.h)("span", props, props.children);
  }

}

class GridListTitleTile extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'grid-tile__title';
  }

  materialDom(props) {
    return (0, _preact.h)("span", props, props.children);
  }

}

class GridListSupportTextTile extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'grid-tile__support-text';
  }

  materialDom(props) {
    return (0, _preact.h)("span", props, props.children);
  }

}

class GridListIconTile extends _Icon.default {
  constructor() {
    super();
    this.componentName = 'grid-tile__icon';
  }

}

GridList.Tiles = GridListTiles;
GridList.Tile = GridListTile;
GridList.PrimaryTile = GridListPrimaryTile;
GridList.PrimaryContentTile = GridListPrimaryContentTile;
GridList.SecondaryTile = GridListSecondaryTile;
GridList.TitleTile = GridListTitleTile;
GridList.SupportTextTile = GridListSupportTextTile;
GridList.IconTile = GridListIconTile;
var _default = GridList;
exports.default = _default;