@rio-cloud/rio-uikit 0.15.0-beta-46 → 0.15.0

package/lib/components/button/ToggleButton.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,112 +9,17 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _excluded = ["active", "className", "bsStyle", "children"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _Button = _interopRequireDefault(require("./Button"));
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var ToggleButton = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ToggleButton, _Component);
-
-  var _super = _createSuper(ToggleButton);
-
-  function ToggleButton(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ToggleButton);
-    _this = _super.call(this, props);
-    _this.state = {
-      toggled: props.active
-    };
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  } // eslint-disable-next-line camelcase
-
-
-  (0, _createClass2.default)(ToggleButton, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.setState({
-        toggled: nextProps.active
-      });
-    }
-  }, {
-    key: "handleClick",
-    value: function handleClick() {
-      var isToggled = !this.state.toggled;
-      this.setState({
-        toggled: isToggled
-      });
-      this.props.onClick(isToggled);
-
-      if (this.toggleRef) {
-        this.toggleRef.blur();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      // eslint-disable-next-line no-unused-vars
-      var _this$props = this.props,
-          active = _this$props.active,
-          className = _this$props.className,
-          bsStyle = _this$props.bsStyle,
-          children = _this$props.children,
-          remainingProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var toggled = this.state.toggled;
-      var buttonClassNames = (0, _classnames.default)('ToggleButton', 'btn', "btn-".concat(bsStyle), toggled && 'active', className);
-      return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
-        ref: function ref(node) {
-          return _this2.toggleRef = node;
-        },
-        type: 'button'
-      }, remainingProps, {
-        className: buttonClassNames,
-        onClick: this.handleClick
-      }), children);
-    }
-  }]);
-  return ToggleButton;
-}(_react.Component);
-
-exports.default = ToggleButton;
-ToggleButton.defaultProps = {
-  active: false,
-  onClick: function onClick() {},
-  className: '',
-  bsStyle: 'default'
+var ToggleButton = function ToggleButton(props) {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, props, {
+    asToggle: true
+  }));
 };
-ToggleButton.propTypes = {
-  active: _propTypes.default.bool,
-  bsStyle: _propTypes.default.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success']),
-  className: _propTypes.default.string,
-  onClick: _propTypes.default.func.isRequired
-};
+
+ToggleButton.defaultProps = _Button.default.defaultProps;
+ToggleButton.propTypes = _Button.default.propTypes;
+var _default = ToggleButton;
+exports.default = _default;

package/lib/components/charts/BarChart.js

@@ -22,9 +22,9 @@ var _chartHelper = require("./chartHelper");
 var _excluded = ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"],
     _excluded2 = ["dataUnit", "color"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var BarChart = function BarChart(props) {
   var width = props.width,
@@ -110,7 +110,8 @@ BarChart.defaultProps = {
   showYAxis: true,
   useDataColors: false,
   brush: false,
-  tooltip: true
+  tooltip: true,
+  legend: false
 };
 var _default = BarChart;
 exports.default = _default;

package/lib/components/charts/ChartNeedle.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var ChartNeedle = function ChartNeedle(props) {
   var width = props.width,

package/lib/components/charts/PieChart.js

@@ -21,7 +21,7 @@ var _chartHelper = require("./chartHelper");
 
 var _Legend = _interopRequireDefault(require("./Legend"));
 
-var _excluded = ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions"];
+var _excluded = ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions"];
 var RADIAN = Math.PI / 180;
 
 var PieChart = function PieChart(props) {
@@ -35,6 +35,7 @@ var PieChart = function PieChart(props) {
       nameKey = props.nameKey,
       color = props.color,
       filled = props.filled,
+      labels = props.labels,
       innerLabels = props.innerLabels,
       paddingAngle = props.paddingAngle,
       legend = props.legend,
@@ -63,6 +64,11 @@ var PieChart = function PieChart(props) {
     }, "".concat(value, " ").concat(dataUnit));
   };
 
+  var renderLabels = function renderLabels(entry) {
+    return "".concat((0, _isFunction.default)(dataKey) ? dataKey(entry) : entry[dataKey], " ").concat(dataUnit);
+  };
+
+  var pieLabel = labels && (innerLabels ? renderInnerLabel : renderLabels);
   return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
     width: width,
     height: height
@@ -77,20 +83,18 @@ var PieChart = function PieChart(props) {
     isAnimationActive: true,
     nameKey: nameKey,
     dataKey: dataKey,
-    label: innerLabels ? renderInnerLabel : function (entry) {
-      return "".concat(dataKey(entry), " ").concat(dataUnit);
-    } // cx={Math.max(outerRadius, width / 3)}
+    label: pieLabel // cx={Math.max(outerRadius, width / 3)}
     // cy={height / 2}
     ,
     innerRadius: filled ? 0 : innerRadius,
     outerRadius: outerRadius,
-    paddingAngle: paddingAngle,
+    paddingAngle: filled ? 0 : paddingAngle,
     labelLine: !innerLabels
   }, pieOptions), data.map(function (entry, index) {
     var cellColor = (0, _chartHelper.getColor)(entry.color) || (0, _chartHelper.getFromDefaultColors)(index);
     return /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
       key: "cell-".concat(index),
-      fill: (0, _isFunction.default)(color) ? color(entry, index) : cellColor
+      fill: (0, _isFunction.default)(color) ? (0, _chartHelper.getColor)(color(entry, index)) : cellColor
     });
   })), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     formatter: function formatter(value) {
@@ -110,6 +114,7 @@ PieChart.defaultProps = {
   nameKey: 'name',
   // color,
   filled: false,
+  labels: true,
   innerLabels: false,
   paddingAngle: 3,
   // pieOptions,

package/lib/components/charts/RadialBarChart.js

@@ -22,7 +22,7 @@ var _Legend = _interopRequireDefault(require("./Legend"));
 var _chartHelper = require("./chartHelper");
 
 var _excluded = ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "clockWise", "legend", "textOptions", "radialBarOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"],
-    _excluded2 = ["text", "size", "color"];
+    _excluded2 = ["text", "size", "weight", "color"];
 
 var RadialBarChart = function RadialBarChart(props) {
   var width = props.width,
@@ -48,12 +48,15 @@ var RadialBarChart = function RadialBarChart(props) {
       text = _ref.text,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? '500%' : _ref$size,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'gray-darkest' : _ref$color,
       remainingTextOptions = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
 
   var textStyle = {
     fontSize: size,
+    fontWeight: weight,
     fill: color && (0, _chartHelper.getColor)(color)
   };
   return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {

package/lib/components/charts/chartHelper.js

@@ -5,15 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mapGridOptions = exports.CURSOR_BACKGROUND_COLOR = exports.getColor = exports.getFromDefaultColors = exports.defaultChartColors = void 0;
+exports.mapGridOptions = exports.getFromDefaultColors = exports.getColor = exports.defaultChartColors = exports.CURSOR_BACKGROUND_COLOR = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _colors = _interopRequireDefault(require("../../style/css/shared/colors.json"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];
 var defaultChartColors = Object.keys(_colors.default).reverse().filter(function (key) {

package/lib/components/checkbox/Checkbox.js

@@ -9,202 +9,155 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Checkbox = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Checkbox, _Component);
-
-  var _super = _createSuper(Checkbox);
-
-  function Checkbox(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Checkbox);
-    _this = _super.call(this, props);
-    _this.handleToggleKeyDown = _this.handleToggleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  }
-
-  (0, _createClass2.default)(Checkbox, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.update(this.props.indeterminate);
-    } // eslint-disable-next-line camelcase
-
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this2 = this;
-
-      if (nextProps !== this.props) {
-        this.setState(function () {
-          return {
-            checked: _this2.props.checked
-          };
-        });
-      }
+var CheckboxIcon = function CheckboxIcon(props) {
+  var icon = props.icon,
+      iconSize = props.iconSize,
+      iconLabelPosition = props.iconLabelPosition,
+      text = props.text;
+  var iconStyles = {
+    width: "".concat(iconSize, "px"),
+    height: "".concat(iconSize, "px"),
+    fontSize: "".concat(iconSize, "px"),
+    lineHeight: "".concat(iconSize, "px")
+  };
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "checkbox-icon label-".concat(iconLabelPosition)
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph ".concat(icon),
+    style: iconStyles
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: 'checkbox-label'
+  }, text));
+};
 
-      this.update(nextProps.indeterminate);
-    }
-  }, {
-    key: "update",
-    value: function update(indeterminate) {
-      this.getInput().indeterminate = indeterminate;
-    }
-  }, {
-    key: "getInput",
-    value: function getInput() {
-      return _reactDom.default.findDOMNode(this).children[0];
+var Checkbox = function Checkbox(props) {
+  var checked = props.checked,
+      children = props.children,
+      className = props.className,
+      custom = props.custom,
+      defaultChecked = props.defaultChecked,
+      disabled = props.disabled,
+      error = props.error,
+      icon = props.icon,
+      iconLabelPosition = props.iconLabelPosition,
+      iconSize = props.iconSize,
+      _props$id = props.id,
+      id = _props$id === void 0 ? name : _props$id,
+      indeterminate = props.indeterminate,
+      inline = props.inline,
+      inputRef = props.inputRef,
+      label = props.label,
+      name = props.name,
+      onChange = props.onChange,
+      onClick = props.onClick,
+      required = props.required,
+      right = props.right,
+      size = props.size,
+      tabIndex = props.tabIndex,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var labelRef = (0, _react.useRef)();
+
+  var getInput = function getInput() {
+    return labelRef.current.firstChild;
+  };
+
+  (0, _react.useEffect)(function () {
+    var input = getInput();
+    input.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  var handleToggleKeyDown = function handleToggleKeyDown(event) {
+    switch (event.keyCode) {
+      case 32:
+        // toggle on space
+        toggle(event);
+        break;
+
+      case 13:
+        // open on enter
+        toggle(event);
+        break;
+
+      default:
+        break;
     }
-  }, {
-    key: "handleToggleKeyDown",
-    value: function handleToggleKeyDown(event) {
-      switch (event.keyCode) {
-        case 32:
-          // toggle on space
-          this.toggle(event);
-          break;
-
-        case 13:
-          // open on enter
-          this.toggle(event);
-          break;
-
-        default:
-          break;
-      }
-    }
-  }, {
-    key: "toggle",
-    value: function toggle(event) {
-      event.preventDefault();
-
-      if (this.props.disabled) {
-        return;
-      }
+  };
 
-      var input = this.getInput();
+  var toggle = function toggle(event) {
+    event.preventDefault();
 
-      if (input.indeterminate) {
-        input.indeterminate = false;
-      }
+    if (disabled) {
+      return;
+    }
 
-      input.checked = !input.checked; // For testing capabilities
+    var input = getInput();
 
-      this.checked = input.checked;
-      this.props.onClick(event);
-      this.props.onChange(event);
+    if (input.indeterminate) {
+      input.indeterminate = false;
     }
-  }, {
-    key: "renderCheckboxText",
-    value: function renderCheckboxText(text) {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: 'checkbox-text'
-      }, /*#__PURE__*/_react.default.createElement("span", null, text));
-    }
-  }, {
-    key: "renderCheckboxIcon",
-    value: function renderCheckboxIcon(icon, iconSize, iconLabelPosition, text) {
-      var iconStyles = {
-        width: "".concat(iconSize, "px"),
-        height: "".concat(iconSize, "px"),
-        fontSize: "".concat(iconSize, "px"),
-        lineHeight: "".concat(iconSize, "px")
-      };
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: "checkbox-icon label-".concat(iconLabelPosition)
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "rioglyph ".concat(icon),
-        style: iconStyles
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        className: 'checkbox-label'
-      }, text));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          disabled = _this$props.disabled,
-          inline = _this$props.inline,
-          right = _this$props.right,
-          label = _this$props.label,
-          children = _this$props.children,
-          error = _this$props.error,
-          size = _this$props.size,
-          inputRef = _this$props.inputRef,
-          className = _this$props.className,
-          required = _this$props.required,
-          indeterminate = _this$props.indeterminate,
-          tabIndex = _this$props.tabIndex,
-          onChange = _this$props.onChange,
-          onClick = _this$props.onClick,
-          checked = _this$props.checked,
-          defaultChecked = _this$props.defaultChecked,
-          name = _this$props.name,
-          icon = _this$props.icon,
-          iconSize = _this$props.iconSize,
-          iconLabelPosition = _this$props.iconLabelPosition,
-          _this$props$id = _this$props.id,
-          id = _this$props$id === void 0 ? name : _this$props$id;
-      var text = label || children;
-      var labelClassnames = (0, _classnames.default)('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
-      var inputClassnames = (0, _classnames.default)(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
-      return /*#__PURE__*/_react.default.createElement("label", {
-        className: labelClassnames,
-        tabIndex: tabIndex,
-        htmlFor: id,
-        onKeyDown: this.handleToggleKeyDown
-      }, /*#__PURE__*/_react.default.createElement("input", {
-        id: id,
-        name: name,
-        type: 'checkbox',
-        checked: checked,
-        required: required,
-        defaultChecked: defaultChecked,
-        disabled: disabled,
-        className: inputClassnames,
-        onClick: onClick,
-        onChange: onChange,
-        ref: inputRef
-      }), icon ? this.renderCheckboxIcon(icon, iconSize, iconLabelPosition, text) : this.renderCheckboxText(text));
-    }
-  }]);
-  return Checkbox;
-}(_react.Component);
 
-exports.default = Checkbox;
+    input.checked = !input.checked;
+    onClick(event);
+    onChange(event);
+  };
+
+  var text = label || children;
+  var labelClassnames = (0, _classnames.default)('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
+  var inputClassnames = (0, _classnames.default)(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
+  var renderCustomIcon = !!icon;
+  var renderCustomContent = custom && children;
+  var renderDefault = !icon && !custom;
+  return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({}, remainingProps, {
+    className: labelClassnames,
+    tabIndex: tabIndex,
+    htmlFor: id,
+    onKeyDown: handleToggleKeyDown,
+    ref: labelRef
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    id: id,
+    name: name,
+    type: 'checkbox',
+    checked: checked,
+    required: required,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    className: inputClassnames,
+    onClick: onClick,
+    onChange: onChange,
+    ref: inputRef
+  }), renderCustomIcon && /*#__PURE__*/_react.default.createElement(CheckboxIcon, {
+    icon: icon,
+    iconSize: iconSize,
+    iconLabelPosition: iconLabelPosition,
+    text: text
+  }), renderDefault && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'checkbox-text'
+  }, /*#__PURE__*/_react.default.createElement("span", null, text)), renderCustomContent && children);
+};
+
 Checkbox.ICON_LABEL_VERTICAL = 'vertical';
 Checkbox.ICON_LABEL_HORIZONTAL = 'horizontal';
 Checkbox.defaultProps = {
   inline: false,
   error: false,
   disabled: false,
+  custom: false,
   indeterminate: false,
   required: false,
   tabIndex: 0,
@@ -226,6 +179,7 @@ Checkbox.propTypes = {
   checked: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
   defaultChecked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  custom: _propTypes.default.bool,
   required: _propTypes.default.bool,
   indeterminate: _propTypes.default.bool,
   className: _propTypes.default.string,
@@ -235,4 +189,6 @@ Checkbox.propTypes = {
   size: _propTypes.default.string,
   inputRef: _propTypes.default.func,
   tabIndex: _propTypes.default.number
-};
+};
+var _default = Checkbox;
+exports.default = _default;

package/lib/components/checkbox/Checkbox.less

@@ -48,7 +48,8 @@
       pointer-events: none;
     };
 
-    + .checkbox-text {
+    + .checkbox-text,
+    + .checkbox-text-wrapper > .checkbox-text {
       align-items: flex-start;
       cursor: pointer;
       display: flex;
@@ -130,7 +131,8 @@
 
     // Define style for 'checked' state
     &:checked {
-      + .checkbox-text {
+      + .checkbox-text,
+      + .checkbox-text-wrapper > .checkbox-text {
         &:before {
           .rioglyph();
           content: @rioglyph-ok;