tuya-panel-kit/lib/components/dialog/list.js

a functional component library for developing tuya device panels!

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

var _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; };

var _jsxFileName = 'src/components/dialog/list.js';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactNative = require('react-native');

var _utils = require('../../utils');

var _list = require('../TYLists/list');

var _list2 = _interopRequireDefault(_list);

var _TYText = require('../TYText');

var _TYText2 = _interopRequireDefault(_TYText);

var _styled = require('./styled');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var getTheme = _utils.ThemeUtils.getTheme,
    ThemeConsumer = _utils.ThemeUtils.ThemeConsumer;
var cx = _utils.RatioUtils.convertX;


var ITEM_HEIGHT = 56;

var List = function (_Component) {
  _inherits(List, _Component);

  function List() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, List);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = List.__proto__ || Object.getPrototypeOf(List)).call.apply(_ref, [this].concat(args))), _this), _this.renderItem = function (_ref2) {
      var item = _ref2.item;

      var _item$styles = item.styles,
          styles = _item$styles === undefined ? {} : _item$styles,
          props = _objectWithoutProperties(item, ['styles']);

      return _react2.default.createElement(
        ThemeConsumer,
        {
          __source: {
            fileName: _jsxFileName,
            lineNumber: 72
          }
        },
        function (globalTheme) {
          var ListItemProps = { theme: { dialog: _extends({}, globalTheme.dialog) } };
          var itemBackGround = getTheme(ListItemProps, 'dialog.bg');
          var itemFontColor = getTheme(ListItemProps, 'dialog.titleFontColor');
          var itemFontSize = getTheme(ListItemProps, 'dialog.titleFontSize');
          return _react2.default.createElement(_list2.default.Item, _extends({
            styles: _extends({}, styles, {
              container: [{
                height: ITEM_HEIGHT,
                backgroundColor: itemBackGround,
                justifyContent: 'center'
              }, styles.container],
              contentCenter: [{ alignItems: 'center' }, styles.contentCenter],
              title: [{
                fontWeight: '500',
                fontSize: itemFontSize,
                color: itemFontColor
              }, styles.title]
            })
          }, props, {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 79
            }
          }));
        }
      );
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(List, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          maxItemNum = _props.maxItemNum,
          dataSource = _props.dataSource,
          style = _props.style,
          contentStyle = _props.contentStyle,
          listStyle = _props.listStyle,
          titleNumberOfLines = _props.titleNumberOfLines,
          title = _props.title,
          titleStyle = _props.titleStyle,
          subTitle = _props.subTitle,
          subTitleStyle = _props.subTitleStyle,
          TYFlatListProps = _objectWithoutProperties(_props, ['maxItemNum', 'dataSource', 'style', 'contentStyle', 'listStyle', 'titleNumberOfLines', 'title', 'titleStyle', 'subTitle', 'subTitleStyle']);

      return _react2.default.createElement(
        _styled.StyledContainer,
        { style: style, __source: {
            fileName: _jsxFileName,
            lineNumber: 123
          }
        },
        _react2.default.createElement(
          _styled.StyledContent,
          {
            style: [{ paddingLeft: 0, paddingRight: 0, paddingBottom: 0 }, contentStyle],
            __source: {
              fileName: _jsxFileName,
              lineNumber: 124
            }
          },
          _react2.default.createElement(
            _styled.StyledTitle,
            {
              style: [{ paddingVertical: subTitle ? 0 : 12 }, titleStyle],
              numberOfLines: titleNumberOfLines,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 127
              }
            },
            title
          ),
          !!subTitle && _react2.default.createElement(
            _styled.StyledSubTitle,
            { style: [{ marginTop: 7 }, subTitleStyle], __source: {
                fileName: _jsxFileName,
                lineNumber: 134
              }
            },
            subTitle
          ),
          _react2.default.createElement(_styled.StyledList, _extends({
            style: [listStyle, { maxHeight: maxItemNum * ITEM_HEIGHT + cx(16) }],
            scrollEnabled: dataSource.length > maxItemNum,
            keyExtractor: function keyExtractor(item, idx) {
              return item.key || idx;
            },
            data: dataSource,
            renderItem: this.renderItem
          }, TYFlatListProps, {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 136
            }
          }))
        )
      );
    }
  }]);

  return List;
}(_react.Component);

List.propTypes = {
  maxItemNum: _propTypes2.default.number,

  dataSource: _propTypes2.default.array.isRequired,

  style: _reactNative.ViewPropTypes.style,

  contentStyle: _reactNative.ViewPropTypes.style,

  listStyle: _reactNative.ViewPropTypes.style,

  titleNumberOfLines: _propTypes2.default.number,

  title: _propTypes2.default.string.isRequired,

  titleStyle: _TYText2.default.propTypes.style,

  subTitle: _propTypes2.default.string,

  subTitleStyle: _TYText2.default.propTypes.style
};
List.defaultProps = {
  maxItemNum: 5,
  style: null,
  contentStyle: null,
  listStyle: null,
  titleStyle: null,
  titleNumberOfLines: 2,
  subTitle: '',
  subTitleStyle: null
};
exports.default = List;