@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/FileUploader/FileUploader.js

@@ -0,0 +1,313 @@
+/**
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var FeatureFlags = require('@carbon/feature-flags');
+var React = require('react');
+var Filename = require('./Filename.js');
+var FileUploaderButton = require('./FileUploaderButton.js');
+var types = require('../../prop-types/types.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["iconDescription", "buttonLabel", "buttonKind", "disabled", "filenameStatus", "labelDescription", "labelTitle", "className", "multiple", "accept", "name", "size", "onDelete"];
+
+var FileUploader = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(FileUploader, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(FileUploader);
+
+  function FileUploader() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, FileUploader);
+
+    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", {
+      filenames: []
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "nodes", []);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleChange", function (evt) {
+      evt.stopPropagation();
+      var filenames = Array.prototype.map.call(evt.target.files, function (file) {
+        return file.name;
+      });
+
+      _this.setState({
+        filenames: _this.props.multiple ? _this.state.filenames.concat(filenames) : filenames
+      });
+
+      if (_this.props.onChange) {
+        _this.props.onChange(evt);
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleClick", function (evt, _ref) {
+      var index = _ref.index,
+          filenameStatus = _ref.filenameStatus;
+
+      if (filenameStatus === 'edit') {
+        evt.stopPropagation();
+
+        var filteredArray = _this.state.filenames.filter(function (filename) {
+          return filename !== _this.nodes[index].innerText.trim();
+        });
+
+        _this.setState({
+          filenames: filteredArray
+        });
+
+        if (_this.props.onDelete) {
+          _this.props.onDelete(evt);
+        }
+
+        _this.props.onClick(evt);
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "clearFiles", function () {
+      // A clearFiles function that resets filenames and can be referenced using a ref by the parent.
+      _this.setState({
+        filenames: []
+      });
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(FileUploader, [{
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _classNames3,
+          _this2 = this;
+
+      var _this$props = this.props,
+          iconDescription = _this$props.iconDescription,
+          buttonLabel = _this$props.buttonLabel,
+          buttonKind = _this$props.buttonKind,
+          disabled = _this$props.disabled,
+          filenameStatus = _this$props.filenameStatus,
+          labelDescription = _this$props.labelDescription,
+          labelTitle = _this$props.labelTitle,
+          className = _this$props.className,
+          multiple = _this$props.multiple,
+          accept = _this$props.accept,
+          name = _this$props.name,
+          _this$props$size = _this$props.size,
+          size = _this$props$size === void 0 ? 'md' : _this$props$size;
+          _this$props.onDelete;
+          var other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      var prefix = this.context;
+      var classes = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--form-item"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
+
+      var getHelperLabelClasses = function getHelperLabelClasses(baseClass) {
+        return cx__default["default"](baseClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label-description--disabled"), disabled));
+      };
+
+      var selectedFileClasses = cx__default["default"]("".concat(prefix, "--file__selected-file"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--file__selected-file--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--file__selected-file--sm"), size === 'small' || size === 'sm'), _classNames3));
+      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+        className: classes
+      }, other), FeatureFlags__namespace.enabled('enable-v11-release') && !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement("p", {
+        className: getHelperLabelClasses("".concat(prefix, "--file--label"))
+      }, labelTitle), /*#__PURE__*/React__default["default"].createElement("p", {
+        className: getHelperLabelClasses("".concat(prefix, "--label-description"))
+      }, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
+        disabled: disabled,
+        labelText: buttonLabel,
+        multiple: multiple,
+        buttonKind: buttonKind,
+        onChange: this.handleChange,
+        disableLabelChanges: true,
+        accept: accept,
+        name: name,
+        size: size
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "".concat(prefix, "--file-container")
+      }, this.state.filenames.length === 0 ? null : this.state.filenames.map(function (name, index) {
+        return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
+          key: index,
+          className: selectedFileClasses,
+          ref: function ref(node) {
+            return _this2.nodes[index] = node;
+          } // eslint-disable-line
+
+        }, other), /*#__PURE__*/React__default["default"].createElement("p", {
+          className: "".concat(prefix, "--file-filename")
+        }, name), /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "".concat(prefix, "--file__state-container")
+        }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
+          iconDescription: iconDescription,
+          status: filenameStatus,
+          onKeyDown: function onKeyDown(evt) {
+            if (match.matches(evt, [keys.Enter, keys.Space])) {
+              _this2.handleClick(evt, {
+                index: index,
+                filenameStatus: filenameStatus
+              });
+            }
+          },
+          onClick: function onClick(evt) {
+            return _this2.handleClick(evt, {
+              index: index,
+              filenameStatus: filenameStatus
+            });
+          }
+        })));
+      })));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref2, state) {
+      var filenameStatus = _ref2.filenameStatus;
+      var prevFilenameStatus = state.prevFilenameStatus;
+      return prevFilenameStatus === filenameStatus ? null : {
+        filenameStatus: filenameStatus,
+        prevFilenameStatus: filenameStatus
+      };
+    }
+  }]);
+
+  return FileUploader;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+
+  /**
+   * Specify the type of the <FileUploaderButton>
+   */
+  buttonKind: PropTypes__default["default"].oneOf(types.ButtonKinds),
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * the <FileUploaderButton>
+   */
+  buttonLabel: PropTypes__default["default"].string,
+
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the status of the File Upload
+   */
+  filenameStatus: PropTypes__default["default"].oneOf(['edit', 'complete', 'uploading']).isRequired,
+
+  /**
+   * Provide a description for the complete/close icon that can be read by screen readers
+   */
+  iconDescription: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].string.isRequired : PropTypes__default["default"].string,
+
+  /**
+   * Specify the description text of this <FileUploader>
+   */
+  labelDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify the title text of this <FileUploader>
+   */
+  labelTitle: PropTypes__default["default"].string,
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a name for the underlying `<input>` node
+   */
+  name: PropTypes__default["default"].string,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the input is
+   * changed
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional `onClick` hook that is called each time the
+   * FileUploader is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional `onDelete` hook that is called when an uploaded item
+   * is removed
+   */
+  onDelete: PropTypes__default["default"].func,
+
+  /**
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes.
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['default', 'field', 'small', 'sm', 'md', 'lg'])
+});
+
+_rollupPluginBabelHelpers.defineProperty(FileUploader, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(FileUploader, "defaultProps", {
+  disabled: false,
+  iconDescription: FeatureFlags__namespace.enabled('enable-v11-release') ? undefined : 'Provide icon description',
+  filenameStatus: 'uploading',
+  buttonLabel: '',
+  buttonKind: 'primary',
+  multiple: false,
+  onClick: function onClick() {},
+  accept: []
+});
+
+exports["default"] = FileUploader;

package/lib/components/FileUploader/FileUploaderButton.js

@@ -0,0 +1,227 @@
+/**
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var types = require('../../prop-types/types.js');
+var uniqueId = require('../../tools/uniqueId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FeatureFlags = require('@carbon/feature-flags');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "role", "name", "size", "tabIndex"];
+
+function noop() {}
+
+function FileUploaderButton(_ref) {
+  var _cx;
+
+  var accept = _ref.accept,
+      _ref$buttonKind = _ref.buttonKind,
+      buttonKind = _ref$buttonKind === void 0 ? 'primary' : _ref$buttonKind,
+      className = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$disableLabelChan = _ref.disableLabelChanges,
+      disableLabelChanges = _ref$disableLabelChan === void 0 ? false : _ref$disableLabelChan,
+      id = _ref.id,
+      _ref$labelText = _ref.labelText,
+      ownerLabelText = _ref$labelText === void 0 ? 'Add file' : _ref$labelText,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'button' : _ref$role,
+      name = _ref.name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useState = React.useState(ownerLabelText),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      labelText = _useState2[0],
+      setLabelText = _useState2[1];
+
+  var _useState3 = React.useState(ownerLabelText),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevOwnerLabelText = _useState4[0],
+      setPrevOwnerLabelText = _useState4[1];
+
+  var _useRef = React.useRef(id || uniqueId["default"]()),
+      inputId = _useRef.current;
+
+  var inputNode = React.useRef(null);
+  var classes = cx__default["default"]("".concat(prefix, "--btn"), className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--").concat(buttonKind), buttonKind), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--sm"), size === 'small' || size === 'sm'), _cx)); // Adjust label text state based on changes to the labelText prop
+
+  if (ownerLabelText !== prevOwnerLabelText) {
+    setLabelText(ownerLabelText);
+    setPrevOwnerLabelText(ownerLabelText);
+  }
+
+  function onClick(event) {
+    event.target.value = null;
+  }
+
+  function onKeyDown(event) {
+    if (match.matches(event, [keys.Enter, keys.Space])) {
+      inputNode.current.click();
+    }
+  }
+
+  function handleOnChange(event) {
+    var files = event.target.files;
+    var length = event.target.files.length;
+
+    if (files && !disableLabelChanges) {
+      if (length > 1) {
+        setLabelText("".concat(length, " files"));
+      } else if (length === 1) {
+        setLabelText(files[0].name);
+      }
+    }
+
+    onChange(event);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+    tabIndex: disabled ? -1 : tabIndex || 0,
+    className: classes,
+    onKeyDown: onKeyDown,
+    htmlFor: inputId
+  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
+    role: role,
+    "aria-disabled": disabled
+  }, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
+    className: "".concat(prefix, "--visually-hidden"),
+    ref: inputNode,
+    id: inputId,
+    disabled: disabled,
+    type: "file",
+    tabIndex: "-1",
+    multiple: multiple,
+    accept: accept,
+    name: name,
+    onChange: handleOnChange,
+    onClick: onClick
+  }));
+}
+
+FileUploaderButton.propTypes = {
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+
+  /**
+   * Specify the type of underlying button
+   */
+  buttonKind: PropTypes__default["default"].oneOf(types.ButtonKinds),
+
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether you want to disable any updates to the FileUploaderButton
+   * label
+   */
+  disableLabelChanges: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a unique id for the underlying <input> node
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * this control
+   */
+  labelText: PropTypes__default["default"].node,
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a name for the underlying <input> node
+   */
+  name: PropTypes__default["default"].string,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the <input>
+   * value changes
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional `onClick` hook that is called each time the button is
+   * clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide an accessibility role for the <FileUploaderButton>
+   */
+  role: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes.
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
+
+  /**
+   * Provide a custom tabIndex value for the <FileUploaderButton>
+   */
+  tabIndex: PropTypes__default["default"].number
+};
+
+exports["default"] = FileUploaderButton;