rmwc/Chip/index.js

A thin React wrapper for Material Design (Web) Components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SimpleChip = exports.ChipSet = exports.ChipSetRoot = exports.ChipIcon = exports.ChipIconRoot = exports.ChipText = exports.ChipCheckmark = exports.Chip = exports.ChipRoot = undefined;

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

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 _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _Icon = require('../Icon');

var _Base = require('../Base');

var _withFoundation3 = require('../Base/withFoundation');

var _mdc = require('@material/chips/dist/mdc.chips');

var _mdc2 = require('@material/ripple/dist/mdc.ripple');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

/** A chip component. */
var ChipRoot = exports.ChipRoot = (0, _Base.simpleTag)({
  displayName: 'ChipRoot',
  classNames: function classNames(props) {
    return ['mdc-chip', {
      'mdc-chip--selected': props.selected
    }];
  },
  consumeProps: ['selected']
});

var Chip = exports.Chip = function (_withFoundation) {
  _inherits(Chip, _withFoundation);

  function Chip() {
    _classCallCheck(this, Chip);

    return _possibleConstructorReturn(this, (Chip.__proto__ || Object.getPrototypeOf(Chip)).apply(this, arguments));
  }

  _createClass(Chip, [{
    key: 'initialize',
    value: function initialize() {
      this.leadingIcon_ = this.root_ && this.root_.querySelector('.mdc-chip__icon--leading');
      this.ripple_ = new _mdc2.MDCRipple(this.root_);
      _get(Chip.prototype.__proto__ || Object.getPrototypeOf(Chip.prototype), 'initialize', this).call(this);
    }
    //$FlowFixMe

  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          onInteraction = _props.onInteraction,
          onTrailingIconInteraction = _props.onTrailingIconInteraction,
          apiRef = _props.apiRef,
          rest = _objectWithoutProperties(_props, ['onInteraction', 'onTrailingIconInteraction', 'apiRef']);

      var root_ = this.foundationRefs.root_;

      return React.createElement(ChipRoot, Object.assign({ tabIndex: 0 }, rest, { elementRef: root_ }));
    }
  }]);

  return Chip;
}((0, _withFoundation3.withFoundation)({
  constructor: _mdc.MDCChip,
  adapter: {}
}));

/** A checkmark for chip selection and filtering. */


Object.defineProperty(Chip, 'displayName', {
  enumerable: true,
  writable: true,
  value: 'Chip'
});
var ChipCheckmark = exports.ChipCheckmark = function ChipCheckmark() {
  return React.createElement(
    'div',
    { className: 'mdc-chip__checkmark' },
    React.createElement(
      'svg',
      { className: 'mdc-chip__checkmark-svg', viewBox: '-2 -3 30 30' },
      React.createElement('path', {
        className: 'mdc-chip__checkmark-path',
        fill: 'none',
        stroke: 'black',
        d: 'M1.73,12.91 8.1,19.28 22.79,4.59'
      })
    )
  );
};

/** Text for a chip. */
var ChipText = exports.ChipText = (0, _Base.simpleTag)({
  displayName: 'ChipText',
  classNames: 'mdc-chip__text'
});

/** Icons inside of a chip. This is an instance of the Icon component. To make the icons interactive, add props tabIndex="0" and role="button". */
var ChipIconRoot = exports.ChipIconRoot = (0, _Base.simpleTag)({
  displayName: 'ChipIconRoot',
  tag: _Icon.Icon,
  defaultProps: {},
  classNames: function classNames(props) {
    return ['mdc-chip__icon', {
      'mdc-chip__icon--leading': props.leading,
      'mdc-chip__icon--trailing': props.trailing
    }];
  },
  consumeProps: ['trailing', 'leading']
});

var ChipIcon = exports.ChipIcon = function ChipIcon(props) {
  var hasInteractionHandler = Object.keys(props).some(function (p) {
    return p.startsWith('on');
  });
  var trailingProps = props.trailing || hasInteractionHandler ? { role: 'button', tabIndex: 0 } : {};

  return React.createElement(ChipIconRoot, Object.assign({}, trailingProps, props));
};

ChipIcon.displayName = 'ChipIcon';

var ChipSetRoot = exports.ChipSetRoot = (0, _Base.simpleTag)({
  displayName: 'ChipSetRoot',
  classNames: function classNames(props) {
    return ['mdc-chip-set', {
      'mdc-chip-set--choice': props.choice,
      'mdc-chip-set--filter': props.filter
    }];
  },
  consumeProps: ['filter', 'choice']
});

/** A container for multiple Chip components. */

var ChipSet = exports.ChipSet = function (_withFoundation2) {
  _inherits(ChipSet, _withFoundation2);

  function ChipSet() {
    _classCallCheck(this, ChipSet);

    return _possibleConstructorReturn(this, (ChipSet.__proto__ || Object.getPrototypeOf(ChipSet)).apply(this, arguments));
  }

  _createClass(ChipSet, [{
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          apiRef = _props2.apiRef,
          rest = _objectWithoutProperties(_props2, ['apiRef']);

      var root_ = this.foundationRefs.root_;

      return React.createElement(ChipSetRoot, Object.assign({}, rest, { elementRef: root_ }));
    }
  }]);

  return ChipSet;
}((0, _withFoundation3.withFoundation)({
  constructor: _mdc.MDCChipSet,
  adapter: {}
}));

// handle leading and trailing icons
var renderChipIcon = function renderChipIcon(iconNode, props) {
  if (iconNode && typeof iconNode === 'string' || (typeof iconNode === 'undefined' ? 'undefined' : _typeof(iconNode)) === 'object' && iconNode.type !== ChipIcon) {
    return React.createElement(ChipIcon, Object.assign({ use: iconNode }, props));
  }

  return iconNode;
};

/** A non-standard abbreviated way for rendering chips. */
var SimpleChip = function SimpleChip(_ref) {
  var text = _ref.text,
      leadingIcon = _ref.leadingIcon,
      trailingIcon = _ref.trailingIcon,
      checkmark = _ref.checkmark,
      children = _ref.children,
      rest = _objectWithoutProperties(_ref, ['text', 'leadingIcon', 'trailingIcon', 'checkmark', 'children']);

  return React.createElement(
    Chip,
    rest,
    !!leadingIcon && renderChipIcon(leadingIcon, { leading: true }),
    !!checkmark && React.createElement(ChipCheckmark, null),
    React.createElement(
      ChipText,
      null,
      text,
      children
    ),
    !!trailingIcon && renderChipIcon(trailingIcon, { trailing: true })
  );
};

exports.SimpleChip = SimpleChip;
SimpleChip.displayName = 'SimpleChip';