fe-fabric-react 0.0.1-security → 2.864.3

package/lib/core/components/FeInputField.js

@@ -0,0 +1,500 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../utils");
+
+var _feFilter = _interopRequireDefault(require("../utils/fe-filter"));
+
+var _FeIcon = _interopRequireDefault(require("./FeIcon"));
+
+var _FeListItemGroup = _interopRequireDefault(require("./FeListItemGroup"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+
+          if (desc.get || desc.set) {
+            Object.defineProperty(newObj, key, desc);
+          } else {
+            newObj[key] = obj[key];
+          }
+        }
+      }
+    }
+
+    newObj.default = obj;
+    return newObj;
+  }
+}
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+var FeInputField =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(FeInputField, _Component);
+
+  function FeInputField(props) {
+    var _this;
+
+    _classCallCheck(this, FeInputField);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FeInputField).call(this, props));
+    _this.state = {
+      inputValue: null,
+      icon: null,
+      messageType: null,
+      message: null,
+      isListOpen: false
+    };
+    _this.onChangeHandler = _this.onChangeHandler.bind(_assertThisInitialized(_this));
+    _this.onItemClickHandler = _this.onItemClickHandler.bind(_assertThisInitialized(_this));
+    _this.checkDocumentKeyDown = _this.checkDocumentKeyDown.bind(_assertThisInitialized(_this));
+    _this.handleOutsideClick = _this.handleOutsideClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(FeInputField, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.isTypeahead) {
+        document.addEventListener('keydown', this.checkDocumentKeyDown, false);
+        document.addEventListener('click', this.handleOutsideClick, false);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.props.isTypeahead) {
+        document.removeEventListener('keydown', this.checkDocumentKeyDown);
+        document.removeEventListener('click', this.handleOutsideClick);
+      }
+    }
+  }, {
+    key: "handleOutsideClick",
+    value: function handleOutsideClick(event) {
+      if (this.state.isListOpen && !this.node.contains(event.target)) {
+        this.setState({
+          isListOpen: false
+        });
+      }
+    }
+  }, {
+    key: "checkDocumentKeyDown",
+    value: function checkDocumentKeyDown(event) {
+      if (!this.listContainer || !this.state.isListOpen) {
+        return null;
+      }
+
+      if (event.keyCode === 27) {
+        //Escape
+        this.setState({
+          isListOpen: false
+        });
+        this.restoreFocus();
+      } else if (event.keyCode === 9) {
+        //Tab
+        this.setState({
+          isListOpen: false
+        });
+      } else if (event.keyCode === 40 || event.keyCode === 38) {
+        //ArrowDown || ArrowUp
+        (0, _utils.trapFocus)(event, this.listContainer, true);
+      }
+    }
+  }, {
+    key: "onChangeHandler",
+    value: function onChangeHandler(event) {
+      var inputValue = event.currentTarget.value;
+
+      if (inputValue && this.props.isTypeahead) {
+        this.setState({
+          inputValue: inputValue,
+          isListOpen: true
+        });
+      } else {
+        if (inputValue && this.props.validate) {
+          var _this$props$validate = this.props.validate(inputValue),
+              messageType = _this$props$validate.messageType,
+              message = _this$props$validate.message;
+
+          var icon;
+
+          if (messageType === 'error') {
+            icon = this.props.iconError;
+          } else if (messageType === 'warning') {
+            icon = this.props.iconWarning;
+          } else if (messageType === 'success') {
+            icon = this.props.iconSuccess;
+          } else {
+            messageType = null;
+            message = null;
+            icon = null;
+          }
+
+          this.setState({
+            inputValue: inputValue,
+            messageType: messageType,
+            message: message,
+            icon: icon
+          });
+        } else if (inputValue) {
+          this.setState({
+            inputValue: inputValue
+          });
+        } else {
+          this.setState({
+            messageType: null,
+            message: null,
+            icon: null,
+            inputValue: null,
+            isListOpen: false
+          });
+        }
+      }
+
+      if (this.props.onChange) {
+        this.props.onChange(event);
+      }
+    }
+  }, {
+    key: "onItemClickHandler",
+    value: function onItemClickHandler(event) {
+      var filteredList = this.filterList(this.state.inputValue, this.props.list);
+      var inputValue = filteredList[event.itemIndex]['label'];
+      this.inputNode.value = inputValue;
+      this.restoreFocus();
+      this.setState({
+        inputValue: inputValue,
+        isListOpen: false
+      });
+    }
+  }, {
+    key: "restoreFocus",
+    value: function restoreFocus() {
+      var _this2 = this;
+
+      setTimeout(function () {
+        _this2.inputNode && _this2.inputNode.focus();
+      }, 100);
+    }
+  }, {
+    key: "filterList",
+    value: function filterList(subStr, list) {
+      var config = {
+        queryAt: 'label',
+        isMultiLevel: true,
+        multiLevelKey: 'list'
+      };
+
+      var filteredList = _feFilter.default.filter(subStr, list, config);
+
+      if (filteredList.length === 0) {
+        filteredList = [{
+          label: 'No results found',
+          disabled: true
+        }];
+      }
+
+      return filteredList;
+    }
+  }, {
+    key: "getLabel",
+    value: function getLabel() {
+      return _react.default.createElement("label", {
+        htmlFor: this.props.id,
+        className: "fe-input-label caption"
+      }, this.props.label);
+    }
+  }, {
+    key: "getInput",
+    value: function getInput(filteredList) {
+      var _this3 = this;
+
+      var inputProps = Object.assign({}, this.props);
+      delete inputProps.label;
+      delete inputProps.hint;
+      delete inputProps.isInline;
+      delete inputProps.validate;
+      delete inputProps.onIconClick;
+      delete inputProps.isTypeahead;
+      delete inputProps.list;
+      delete inputProps.listStyle;
+      delete inputProps.icon;
+      delete inputProps.iconError;
+      delete inputProps.iconWarning;
+      delete inputProps.iconSuccess;
+      delete inputProps.className;
+      return _react.default.createElement("input", _extends({
+        type: "text"
+      }, inputProps, {
+        onChange: this.onChangeHandler,
+        className: "fe-input",
+        ref: function ref(node) {
+          return _this3.inputNode = node;
+        }
+      }));
+    }
+  }, {
+    key: "getMessage",
+    value: function getMessage() {
+      var message = this.state.message || this.props.hint;
+
+      if (!message) {
+        return null;
+      }
+
+      return _react.default.createElement("span", {
+        className: "fe-input-hint-text"
+      }, message);
+    }
+  }, {
+    key: "getList",
+    value: function getList(list) {
+      return _react.default.createElement(_FeListItemGroup.default, {
+        feStyle: "dropdown",
+        isSectioned: this.props.listStyle === 'sectioned',
+        textHighlight: this.state.inputValue,
+        list: list,
+        onItemClick: this.onItemClickHandler
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      /** Minimum condition required to render*/
+
+      /** Rendering of component */
+
+
+      var wrapperClass = (0, _classnames.default)({
+        'fe-form__input-wrapper--has-success': this.state.messageType === 'success',
+        'fe-form__input-wrapper--has-warning': this.state.messageType === 'warning',
+        'fe-form__input-wrapper--has-error': this.state.messageType === 'error'
+      }, this.props.className);
+      var filteredList = null;
+
+      if (this.props.isTypeahead && this.state.inputValue && this.state.isListOpen) {
+        filteredList = this.filterList(this.state.inputValue, this.props.list);
+      }
+
+      var label = this.props.label && this.getLabel();
+      var input = this.getInput(filteredList);
+      var message = this.getMessage();
+      var list = filteredList && this.getList(filteredList);
+      var icon = this.state.icon || this.props.icon;
+
+      if (this.props.isTypeahead) {
+        icon = filteredList ? 'chevron-up' : 'chevron-down';
+      }
+
+      return _react.default.createElement("div", {
+        className: wrapperClass,
+        ref: function ref(node) {
+          return _this4.node = node;
+        }
+      }, label, _react.default.createElement("div", {
+        className: "fe-form__input-wrapper--has-icon"
+      }, input, icon ? _react.default.createElement("span", {
+        className: "fe-input-icon",
+        onClick: this.props.onIconClick
+      }, _react.default.createElement(_FeIcon.default, {
+        family: "light",
+        icon: icon
+      })) : null, list && this.props.isTypeahead ? _react.default.createElement("div", {
+        className: "fe-dropdown__list-container fe-dropdown__list--open-bottom-left",
+        ref: function ref(node) {
+          return _this4.listContainer = node;
+        }
+      }, list) : null), message);
+    }
+  }]);
+
+  return FeInputField;
+}(_react.Component);
+
+FeInputField.defaultProps = {
+  id: null,
+  label: null,
+  placeholder: '',
+  hint: null,
+  list: null,
+  listStyle: 'multilevel',
+  icon: null,
+  iconError: 'fas fa-exclamation-circle',
+  iconWarning: 'fas fa-exclamation-circle',
+  iconSuccess: 'fas fa-check-circle',
+  isTypeahead: false,
+  validate: null,
+  onIconClick: null,
+  disabled: false
+};
+FeInputField.propTypes = {
+  /** Provide id for input field*/
+  id: _propTypes.default.string.isRequired,
+
+  /** Provide label for input field*/
+  label: _propTypes.default.string,
+
+  /** Provide placeholder text for input field*/
+  placeholder: _propTypes.default.string,
+
+  /** Provide hint text*/
+  hint: _propTypes.default.string,
+
+  /** Provide suggestion list[{`FeListItem` props}]*/
+  list: _propTypes.default.array,
+
+  /** Provide list style like 'sectioned' or 'multilevel'*/
+  listStyle: _propTypes.default.oneOf(['sectioned', 'multilevel']),
+
+  /** Provide icon class*/
+  icon: _propTypes.default.string,
+
+  /** Provide icon class for error*/
+  iconError: _propTypes.default.string,
+
+  /** Provide icon class for warning*/
+  iconWarning: _propTypes.default.string,
+
+  /** Provide icon class for success*/
+  iconSuccess: _propTypes.default.string,
+
+  /** set true/false to make typeahead input field*/
+  isTypeahead: _propTypes.default.bool,
+
+  /** Provide handler to validate input*/
+  validate: _propTypes.default.func,
+
+  /** Provide handler on icon clicked*/
+  onIconClick: _propTypes.default.func,
+
+  /** Set true/false to change button disabled state*/
+  disabled: _propTypes.default.bool
+};
+FeInputField.displayName = 'FeInputField';
+var _default = FeInputField;
+exports.default = _default;

package/lib/core/components/FeLabel.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _customPropTypes = require("../../customPropTypes");
+
+var _FeIcon = _interopRequireDefault(require("./FeIcon"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var FeLabel = function FeLabel(_ref) {
+  var children = _ref.children,
+      icon = _ref.icon,
+      isTransparent = _ref.isTransparent,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      options = _objectWithoutProperties(_ref, ["children", "icon", "isTransparent", "onClick", "className"]);
+
+  var classes = (0, _classnames.default)('fe-label', {
+    'fe-label--icon': icon,
+    'fe-label--background': !isTransparent,
+    'fe-btn': onClick
+  }, className);
+
+  var labelProps = _objectSpread({}, options, {
+    className: classes,
+    onClick: onClick,
+    role: onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined
+  });
+
+  return _react.default.createElement("div", labelProps, icon && _react.default.createElement(_FeIcon.default, {
+    icon: icon.name,
+    family: icon.family,
+    className: "fe-label__icon fe-icon--left"
+  }), children);
+};
+
+FeLabel.defaultProps = {
+  isTransparent: false
+};
+FeLabel.propTypes = {
+  /** The contents for the label (required) */
+  children: _propTypes.default.node.isRequired,
+
+  /** Provide the icon name and family in shape of { name: 'name', family: 'solid' }*/
+  icon: _customPropTypes.iconPropType,
+
+  /** Set true/false to make transparent background*/
+  isTransparent: _propTypes.default.bool,
+
+  /** click event handler */
+  onClick: _propTypes.default.func,
+
+  /** Optional additional CSS classes */
+  className: _propTypes.default.string
+};
+var _default = FeLabel;
+exports.default = _default;