@carbon/react 0.17.0 → 1.0.1

package/lib/components/TileGroup/TileGroup.js

@@ -0,0 +1,173 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var RadioTile = require('../RadioTile/RadioTile.js');
+var warning = require('../../internal/warning.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["value"];
+
+var TileGroup = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(TileGroup, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(TileGroup);
+
+  function TileGroup() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, TileGroup);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
+      selected: _this.props.valueSelected || _this.props.defaultSelected || null,
+      prevValueSelected: _this.props.valueSelected
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getRadioTiles", function () {
+      var childrenArray = React__default["default"].Children.toArray(_this.props.children);
+      var children = childrenArray.map(function (tileRadio) {
+        var _tileRadio$props = tileRadio.props,
+            value = _tileRadio$props.value,
+            other = _rollupPluginBabelHelpers.objectWithoutProperties(_tileRadio$props, _excluded);
+        /* istanbul ignore if */
+
+
+        if (typeof tileRadio.props.checked !== 'undefined') {
+          process.env.NODE_ENV !== "production" ? warning.warning(false, "Instead of using the checked property on the RadioTile, set\n            the defaultSelected property or valueSelected property on the TileGroup.") : void 0;
+        }
+
+        return /*#__PURE__*/React__default["default"].createElement(RadioTile["default"], _rollupPluginBabelHelpers["extends"]({}, other, {
+          name: _this.props.name,
+          key: value,
+          value: value,
+          onChange: _this.handleChange,
+          checked: value === _this.state.selected
+        }));
+      });
+      return children;
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleChange", function (newSelection, value, evt) {
+      if (newSelection !== _this.state.selected) {
+        _this.setState({
+          selected: newSelection
+        });
+
+        _this.props.onChange(newSelection, _this.props.name, evt);
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "renderLegend", function (legend) {
+      if (legend) {
+        return /*#__PURE__*/React__default["default"].createElement("legend", {
+          className: "".concat(_this.prefix, "--label")
+        }, legend);
+      }
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(TileGroup, [{
+    key: "render",
+    value: function render() {
+      var prefix = this.context;
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          _this$props$className = _this$props.className,
+          className = _this$props$className === void 0 ? "".concat(prefix, "--tile-group") : _this$props$className,
+          legend = _this$props.legend;
+      return /*#__PURE__*/React__default["default"].createElement("fieldset", {
+        className: className,
+        disabled: disabled
+      }, this.renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, this.getRadioTiles()));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref, state) {
+      var valueSelected = _ref.valueSelected,
+          defaultSelected = _ref.defaultSelected;
+      var prevValueSelected = state.prevValueSelected;
+      return prevValueSelected === valueSelected ? null : {
+        selected: valueSelected || defaultSelected || null,
+        prevValueSelected: valueSelected
+      };
+    }
+  }]);
+
+  return TileGroup;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(TileGroup, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(TileGroup, "propTypes", {
+  /**
+   * Provide a collection of <RadioTile> components to render in the group
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the the value of <RadioTile> to be selected by default
+   */
+  defaultSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the group is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an optional legend for this group
+   */
+  legend: PropTypes__default["default"].string,
+
+  /**
+   * Specify the name of the underlying `<input>` nodes
+   */
+  name: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide an optional `onChange` hook that is called whenever the value of
+   * the group changes
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Specify the value that is currently selected in the group
+   */
+  valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+});
+
+_rollupPluginBabelHelpers.defineProperty(TileGroup, "defaultProps", {
+  onChange:
+  /* istanbul ignore next */
+  function onChange() {}
+});
+
+exports["default"] = TileGroup;

package/lib/components/TileGroup/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createClassWrapper = require('../../internal/createClassWrapper.js');
+var TileGroup = require('./TileGroup.js');
+
+var index = createClassWrapper.createClassWrapper(TileGroup["default"]);
+
+exports["default"] = index;

package/lib/components/TimePicker/TimePicker.js

@@ -0,0 +1,266 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var index = require('../FeatureFlags/index.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["children", "className", "id", "labelText", "type", "pattern", "onChange", "onClick", "onBlur", "placeholder", "maxLength", "invalidText", "invalid", "hideLabel", "light", "size"];
+
+var TimePicker = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers.inherits(TimePicker, _Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(TimePicker);
+
+  function TimePicker() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, TimePicker);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {});
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(TimePicker, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          id = _this$props.id,
+          labelText = _this$props.labelText,
+          type = _this$props.type,
+          pattern = _this$props.pattern,
+          _onChange = _this$props.onChange,
+          _onClick = _this$props.onClick,
+          _onBlur = _this$props.onBlur,
+          placeholder = _this$props.placeholder,
+          maxLength = _this$props.maxLength,
+          invalidText = _this$props.invalidText,
+          invalid = _this$props.invalid,
+          hideLabel = _this$props.hideLabel,
+          light = _this$props.light,
+          size = _this$props.size,
+          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      var scope = this.context;
+      var enabled;
+
+      if (scope.enabled) {
+        enabled = scope.enabled('enable-v11-release');
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
+        var _classNames2, _classNames3;
+
+        var timePickerInputProps = {
+          className: cx__default["default"]("".concat(prefix, "--time-picker__input-field"), "".concat(prefix, "--text-input"), [enabled ? null : className], _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input--light"), light)),
+          onChange: function onChange(evt) {
+            if (!other.disabled) {
+              _this2.setState({
+                value: evt.target.value
+              });
+
+              _onChange(evt);
+            }
+          },
+          onClick: function onClick(evt) {
+            if (!other.disabled) {
+              _this2.setState({
+                value: evt.target.value
+              });
+
+              _onClick(evt);
+            }
+          },
+          onBlur: function onBlur(evt) {
+            if (!other.disabled) {
+              _this2.setState({
+                value: evt.target.value
+              });
+
+              _onBlur(evt);
+            }
+          },
+          pattern: pattern,
+          placeholder: placeholder,
+          maxLength: maxLength,
+          id: id,
+          type: type,
+          value: _this2.state.value
+        };
+        var timePickerClasses = cx__default["default"]((_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--time-picker"), true), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--time-picker--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--time-picker--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--time-picker--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_classNames2, className, className), _classNames2));
+        var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), other.disabled), _classNames3));
+        var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+          htmlFor: id,
+          className: labelClasses
+        }, labelText) : null;
+        var error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "".concat(prefix, "--form-requirement")
+        }, invalidText) : null;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
+        }, label, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: timePickerClasses
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "".concat(prefix, "--time-picker__input")
+        }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, timePickerInputProps, {
+          "data-invalid": invalid ? invalid : undefined
+        }))), children), error);
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref, state) {
+      var value = _ref.value;
+      var prevValue = state.prevValue;
+      return prevValue === value ? null : {
+        value: value,
+        prevValue: value
+      };
+    }
+  }]);
+
+  return TimePicker;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(TimePicker, "propTypes", {
+  /**
+   * Pass in the children that will be rendered next to the form control
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node,
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the maximum length of the time string in `<input>`
+   */
+  maxLength: PropTypes__default["default"].number,
+
+  /**
+   * Optionally provide an `onBlur` handler that is called whenever the
+   * `<input>` loses focus
+   */
+  onBlur: PropTypes__default["default"].func,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify the regular expression working as the pattern of the time string in `<input>`
+   */
+  pattern: PropTypes__default["default"].string,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the Time Picker.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: PropTypes__default["default"].string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes__default["default"].string
+});
+
+_rollupPluginBabelHelpers.defineProperty(TimePicker, "defaultProps", {
+  type: 'text',
+  pattern: '(1[012]|[1-9]):[0-5][0-9](\\s)?',
+  placeholder: 'hh:mm',
+  maxLength: 5,
+  invalidText: 'Invalid time format.',
+  invalid: false,
+  disabled: false,
+  onChange: function onChange() {},
+  onClick: function onClick() {},
+  onBlur: function onBlur() {},
+  light: false
+});
+
+_rollupPluginBabelHelpers.defineProperty(TimePicker, "contextType", index.FeatureFlagContext);
+
+exports["default"] = TimePicker;

package/lib/components/TimePicker/index.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FeatureFlags = require('@carbon/feature-flags');
+var TimePicker$2 = require('./next/TimePicker.js');
+var TimePicker$3 = require('./TimePicker.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var TimePicker = FeatureFlags__namespace.enabled('enable-v11-release') ? TimePicker$2["default"] : TimePicker$3["default"];
+var TimePicker$1 = TimePicker;
+
+exports["default"] = TimePicker$1;