zrmc/components/linearProgress.js

ZRMC is an ES7 React wrapper for Material Components Web.

"use strict";

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

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require("../");

var _2 = _interopRequireDefault(_);

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

/**
 * mdc-linear-progress
 *
 * See:
 * https://material.io/develop/web/components/linear-progress/
 *
 */

var MDC_LINEARPROGRESS = "mdc-linear-progress"; /**
                                                 * Copyright (c) 2015-present, CWB SAS
                                                 *
                                                 * This source code is licensed under the MIT license found in the
                                                 * LICENSE file in the root directory of this source tree.
                                                 */


var LinearProgress = function LinearProgress(_ref) {
  var indeterminate = _ref.indeterminate,
      reversed = _ref.reversed,
      closed = _ref.closed,
      progress = _ref.progress,
      buffer = _ref.buffer,
      props = (0, _objectWithoutProperties3.default)(_ref, ["indeterminate", "reversed", "closed", "progress", "buffer"]);

  var classes = MDC_LINEARPROGRESS;
  var progressStyle = {};
  var bufferStyle = {};
  if (indeterminate) {
    classes += " mdc-linear-progress--indeterminate";
  } else {
    var p = void 0;
    if (progress < 0) {
      p = 0;
    } else if (progress > 1) {
      p = 1;
    } else {
      p = progress;
    }
    var b = void 0;
    if (buffer < 0) {
      b = 0;
    } else if (buffer > 1) {
      b = 1;
    } else {
      b = buffer;
    }
    progressStyle.transform = "scaleX(" + p + ")";
    bufferStyle.transform = "scaleX(" + b + ")";
  }
  if (reversed) {
    classes += " mdc-linear-progress--reversed";
  }
  if (closed) {
    classes += " mdc-linear-progress--closed";
  }
  var element = _react2.default.createElement(
    "div",
    { role: "progressbar", className: classes },
    _react2.default.createElement("div", { className: "mdc-linear-progress__buffering-dots" }),
    _react2.default.createElement("div", { className: "mdc-linear-progress__buffer", style: bufferStyle }),
    _react2.default.createElement(
      "div",
      {
        className: "mdc-linear-progress__bar mdc-linear-progress__primary-bar",
        style: progressStyle
      },
      _react2.default.createElement("span", { className: "mdc-linear-progress__bar-inner" })
    ),
    _react2.default.createElement(
      "div",
      { className: "mdc-linear-progress__bar mdc-linear-progress__secondary-bar" },
      _react2.default.createElement("span", { className: "mdc-linear-progress__bar-inner" })
    )
  );
  return _2.default.render(element, props);
};

LinearProgress.defaultProps = {
  mdcElement: MDC_LINEARPROGRESS,
  indeterminate: false,
  reversed: false,
  closed: false,
  progress: 0,
  buffer: 0
};

LinearProgress.propTypes = {
  mdcElement: _propTypes2.default.string,
  indeterminate: _propTypes2.default.bool,
  closed: _propTypes2.default.bool,
  reversed: _propTypes2.default.bool,
  progress: _propTypes2.default.number,
  buffer: _propTypes2.default.number
};

exports.default = LinearProgress;