You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

196 rivejä
5.1 KiB

  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  8. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  9. var _typeof2 = require('babel-runtime/helpers/typeof');
  10. var _typeof3 = _interopRequireDefault(_typeof2);
  11. var _simpleAssign = require('simple-assign');
  12. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  13. var _react = require('react');
  14. var _react2 = _interopRequireDefault(_react);
  15. var _propTypes = require('prop-types');
  16. var _propTypes2 = _interopRequireDefault(_propTypes);
  17. var _checkCircle = require('../svg-icons/action/check-circle');
  18. var _checkCircle2 = _interopRequireDefault(_checkCircle);
  19. var _SvgIcon = require('../SvgIcon');
  20. var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
  21. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  22. var getStyles = function getStyles(_ref, _ref2) {
  23. var active = _ref.active,
  24. completed = _ref.completed,
  25. disabled = _ref.disabled;
  26. var muiTheme = _ref2.muiTheme,
  27. stepper = _ref2.stepper;
  28. var _muiTheme$stepper = muiTheme.stepper,
  29. textColor = _muiTheme$stepper.textColor,
  30. disabledTextColor = _muiTheme$stepper.disabledTextColor,
  31. iconColor = _muiTheme$stepper.iconColor,
  32. inactiveIconColor = _muiTheme$stepper.inactiveIconColor;
  33. var baseTheme = muiTheme.baseTheme;
  34. var orientation = stepper.orientation;
  35. var styles = {
  36. root: {
  37. height: orientation === 'horizontal' ? 72 : 64,
  38. color: textColor,
  39. display: 'flex',
  40. alignItems: 'center',
  41. fontFamily: baseTheme.fontFamily,
  42. fontSize: 14,
  43. paddingLeft: 14,
  44. paddingRight: 14
  45. },
  46. icon: {
  47. color: iconColor,
  48. display: 'block',
  49. fontSize: 24,
  50. width: 24,
  51. height: 24
  52. },
  53. iconContainer: {
  54. paddingRight: 8
  55. }
  56. };
  57. if (active) {
  58. styles.root.fontWeight = 500;
  59. }
  60. if (!completed && !active) {
  61. styles.icon.color = inactiveIconColor;
  62. }
  63. if (disabled) {
  64. styles.icon.color = inactiveIconColor;
  65. styles.root.color = disabledTextColor;
  66. styles.root.cursor = 'default';
  67. }
  68. return styles;
  69. };
  70. var renderIcon = function renderIcon(completed, icon, styles) {
  71. var iconType = typeof icon === 'undefined' ? 'undefined' : (0, _typeof3.default)(icon);
  72. if (iconType === 'number' || iconType === 'string') {
  73. if (completed) {
  74. return _react2.default.createElement(_checkCircle2.default, {
  75. color: styles.icon.color,
  76. style: styles.icon
  77. });
  78. }
  79. return _react2.default.createElement(
  80. _SvgIcon2.default,
  81. { color: styles.icon.color, style: styles.icon },
  82. _react2.default.createElement('circle', { cx: '12', cy: '12', r: '10' }),
  83. _react2.default.createElement(
  84. 'text',
  85. {
  86. x: '12',
  87. y: '16',
  88. textAnchor: 'middle',
  89. fontSize: '12',
  90. fill: '#fff'
  91. },
  92. icon
  93. )
  94. );
  95. }
  96. return icon;
  97. };
  98. var StepLabel = function StepLabel(props, context) {
  99. var active = props.active,
  100. children = props.children,
  101. completed = props.completed,
  102. userIcon = props.icon,
  103. iconContainerStyle = props.iconContainerStyle,
  104. last = props.last,
  105. style = props.style,
  106. other = (0, _objectWithoutProperties3.default)(props, ['active', 'children', 'completed', 'icon', 'iconContainerStyle', 'last', 'style']);
  107. var prepareStyles = context.muiTheme.prepareStyles;
  108. var styles = getStyles(props, context);
  109. var icon = renderIcon(completed, userIcon, styles);
  110. return _react2.default.createElement(
  111. 'span',
  112. (0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other),
  113. icon && _react2.default.createElement(
  114. 'span',
  115. { style: prepareStyles((0, _simpleAssign2.default)(styles.iconContainer, iconContainerStyle)) },
  116. icon
  117. ),
  118. children
  119. );
  120. };
  121. StepLabel.muiName = 'StepLabel';
  122. StepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
  123. /**
  124. * Sets active styling. Overrides disabled coloring.
  125. */
  126. active: _propTypes2.default.bool,
  127. /**
  128. * The label text node
  129. */
  130. children: _propTypes2.default.node,
  131. /**
  132. * Sets completed styling. Overrides disabled coloring.
  133. */
  134. completed: _propTypes2.default.bool,
  135. /**
  136. * Sets disabled styling.
  137. */
  138. disabled: _propTypes2.default.bool,
  139. /**
  140. * The icon displayed by the step label.
  141. */
  142. icon: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string, _propTypes2.default.number]),
  143. /**
  144. * Override the inline-styles of the icon container element.
  145. */
  146. iconContainerStyle: _propTypes2.default.object,
  147. /**
  148. * @ignore
  149. */
  150. last: _propTypes2.default.bool,
  151. /**
  152. * Override the inline-style of the root element.
  153. */
  154. style: _propTypes2.default.object
  155. } : {};
  156. StepLabel.contextTypes = {
  157. muiTheme: _propTypes2.default.object.isRequired,
  158. stepper: _propTypes2.default.object
  159. };
  160. exports.default = StepLabel;