react-jsbox-tab/dist/react-jsbox-tab.js

Tab component of react-jsbox, layout inspired by Ryan's Mtime Movie.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function createCommonjsModule(fn, module) {
	return module = { exports: {} }, fn(module, module.exports), module.exports;
}

var _extends_1 = createCommonjsModule(function (module) {
function _extends() {
  module.exports = _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);
}
module.exports = _extends;
});

const defaultTabTemplate = {
  views: [{
    type: 'image',
    props: {
      id: 'item_icon',
      bgcolor: $color('clear')
    },
    layout(make, view) {
      make.centerX.equalTo(view.super);
      make.width.height.equalTo(25);
      make.top.inset(5);
    }
  }, {
    type: 'label',
    props: {
      id: 'item_name',
      font: $font(10),
      textColor: $color('lightGray')
    },
    layout(make, view) {
      const preView = view.prev;
      make.centerX.equalTo(preView);
      make.top.equalTo(preView.bottom).offset(3);
    }
  }]
};

function Tab({
  tabItems,
  tabTemplate = defaultTabTemplate,
  selectedIndex,
  onSelectedIndexChange = () => {},
  ...rest
}) {
  const tabData = tabItems.map(({
    name,
    icon
  }, index) => {
    const tintColor = $color(selectedIndex === index ? 'tint' : 'lightGray');
    return {
      item_icon: {
        icon: $icon(icon, $color('clear'), $size(72, 72)),
        tintColor
      },
      item_name: {
        text: name,
        textColor: tintColor
      }
    };
  });
  return React__default['default'].createElement("matrix", _extends_1({
    id: "tab",
    itemHeight: 40,
    columns: tabItems.length,
    spacing: 0,
    scrollEnabled: false,
    selectable: true,
    template: tabTemplate,
    data: tabData,
    events: {
      didSelect(_, {
        row
      }) {
        onSelectedIndexChange(row);
      }
    }
  }, rest));
}

exports.Tab = Tab;