@elliemae/ds-form 2.3.0-alpha.9 → 2.3.0-next.0

package/cjs/Input/InputImpl.js

@@ -0,0 +1,418 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var lodash = require('lodash');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var DSTooltip = require('@elliemae/ds-tooltip');
+var InputAddonWrapper = require('./InputAddonWrapper.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
+
+const _excluded = ["role", "id", "isShowElipsisActive", "autoFocus", "className", "name", "innerRef", "maxLength", "minLength", "placeholder", "leftComponent", "rightComponent", "disableTooltip", "readOnly", "disabled", "value", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "onPaste", "required", "type", "customInputType", "min", "max", "clearable", "onMouseLeave", "onMouseOut", "style", "containerProps", "tabIndex", "hasError"];
+
+var _CloseCircle;
+
+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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["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; }
+const blockName = 'input';
+const Input = dsClassnames.aggregatedClasses('input')(blockName, null, _ref2 => {
+  let {
+    clearable,
+    value
+  } = _ref2;
+  return {
+    clearable,
+    value
+  };
+});
+const WrapperForTooltipInput = dsClassnames.aggregatedClasses('div')(blockName, 'tooltip-ref');
+const InputCustomWrapper = dsClassnames.aggregatedClasses('div')(blockName, null, _ref3 => {
+  let {
+    clearable,
+    value
+  } = _ref3;
+  return {
+    clearable,
+    value
+  };
+});
+const ClearableButton = dsClassnames.aggregatedClasses(DSButton__default["default"])(blockName, 'clearable');
+
+const getValidComponents = component => component;
+
+const noop = () => null;
+
+class InputImpl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.ref = void 0;
+    this.refTooltip = void 0;
+
+    this.handleOnChange = e => {
+      const {
+        onChange,
+        max
+      } = this.props;
+      const {
+        value
+      } = e.target;
+      if (max && value > max) return;
+      if (onChange) onChange(e);
+
+      if (this.ref.current) {
+        this.setState({
+          isEllipsisOn: this.ref.current.offsetWidth < this.ref.current.scrollWidth
+        });
+      }
+    };
+
+    this.handleBlur = e => {
+      const {
+        onBlur,
+        onChange,
+        min
+      } = this.props;
+      const {
+        value
+      } = e.target;
+
+      if (min && value < min && value !== '') {
+        onChange({
+          target: {
+            value: min.toString()
+          }
+        });
+      }
+
+      onBlur(e);
+      this.setState({
+        active: false
+      });
+    };
+
+    this.handleFocus = e => {
+      const {
+        onFocus
+      } = this.props;
+      onFocus(e);
+      this.setState({
+        active: true
+      });
+    };
+
+    this.handleMouseEnter = () => {
+      if (!this.state.showTooltip) {
+        this.setState({
+          showTooltip: true
+        });
+      }
+    };
+
+    this.handleMouseLeave = () => {
+      if (this.state.showTooltip) {
+        this.setState({
+          showTooltip: false
+        });
+      }
+    };
+
+    this.setWidth = () => {
+      const client = this.refTooltip.current.getBoundingClientRect();
+      this.setState({
+        width: client.width
+      });
+    };
+
+    this.state = {
+      width: -1,
+      isEllipsisOn: false,
+      active: false,
+      showTooltip: false
+    };
+    this.ref = /*#__PURE__*/React__default["default"].createRef();
+    this.refTooltip = /*#__PURE__*/React__default["default"].createRef();
+    this.handleClear = this.handleClear.bind(this);
+  }
+
+  componentDidMount() {
+    this.setWidth();
+    window.addEventListener('resize', this.setWidth);
+    this.setState({
+      isEllipsisOn: this.ref.current ? this.ref.current.offsetWidth < this.ref.current.scrollWidth : false
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setWidth);
+  }
+
+  handleClear() {
+    const {
+      onClear,
+      onChange,
+      clearable
+    } = this.props;
+
+    if (clearable && onClear) {
+      onClear();
+    } else {
+      onChange({
+        target: {
+          value: ''
+        }
+      });
+    }
+
+    if ((this.ref || {}).current) this.ref.current.focus();
+  }
+
+  renderClearableComponent() {
+    const {
+      clearable,
+      value,
+      disabled
+    } = this.props;
+    if (disabled) return null;
+    return clearable && value ? /*#__PURE__*/_jsx__default["default"](ClearableButton, {
+      buttonType: "text",
+      "data-testid": "ds-input_clearable-btn",
+      disabled: disabled,
+      icon: _CloseCircle || (_CloseCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseCircle, {})),
+      onClick: this.handleClear
+    }) : null;
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      role,
+      id,
+      isShowElipsisActive,
+      autoFocus,
+      className,
+      name,
+      innerRef,
+      maxLength,
+      minLength,
+      placeholder,
+      leftComponent,
+      rightComponent,
+      disableTooltip,
+      readOnly,
+      disabled,
+      value,
+      onClick,
+      onChange,
+      onKeyDown,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      onPaste,
+      required,
+      type,
+      customInputType,
+      min,
+      max,
+      clearable,
+      onMouseLeave,
+      onMouseOut,
+      style,
+      containerProps,
+      tabIndex,
+      hasError
+    } = _this$props,
+          rest = _objectWithoutProperties__default["default"](_this$props, _excluded);
+
+    const {
+      width,
+      active,
+      showTooltip,
+      isEllipsisOn
+    } = this.state;
+    const rightComponents = [this.renderClearableComponent(), rightComponent].filter(getValidComponents);
+    const leftComponents = [leftComponent].filter(getValidComponents);
+
+    const inputProps = _objectSpread({
+      'aria-label': rest['aria-label'],
+      'aria-invalid': rest['aria-invalid'],
+      'aria-placeholder': placeholder,
+      'aria-required': required,
+      'aria-multiline': false,
+      'aria-autocomplete': 'none',
+      'data-testid': rest['data-testid'],
+      'aria-describedby': rest['aria-describedby'],
+      role,
+      id,
+      innerRef: _ref => {
+        this.ref = {
+          current: _ref
+        };
+
+        if (innerRef) {
+          if (typeof innerRef === 'function') innerRef(_ref);else innerRef.current = _ref;
+        }
+      },
+      className,
+      autoFocus,
+      disabled: disabled || readOnly,
+      maxLength,
+      minLength,
+      name,
+      onBlur,
+      onChange,
+      onClick,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      onPaste,
+      onMouseLeave,
+      disableTooltip,
+      onMouseOut,
+      placeholder,
+      required,
+      type,
+      value,
+      min,
+      max,
+      style,
+      tabIndex
+    }, containerProps);
+
+    let InputComponent = /*#__PURE__*/jsxRuntime.jsx(WrapperForTooltipInput, {
+      ref: this.refTooltip,
+      style: {
+        width: '100%'
+      },
+      children: !customInputType ? /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread(_objectSpread({}, lodash.omit(inputProps, ['disableTooltip'])), {}, {
+        autoComplete: "off",
+        clearable: "".concat(clearable),
+        onChange: this.handleOnChange,
+        onBlur: this.handleBlur,
+        onFocus: this.handleFocus // using mouseOver instead of mouseEnter (doesn't trigger on disabled inputs)
+        // https://github.com/facebook/react/issues/4251
+        ,
+        onMouseOver: this.handleMouseEnter // using mouseOut instead of mouseLeave (doesn't trigger on disabled inputs)
+        // https://github.com/facebook/react/issues/4251
+        ,
+        onMouseOut: this.handleMouseLeave,
+        value: value
+      })) : /*#__PURE__*/jsxRuntime.jsx(InputCustomWrapper, _objectSpread(_objectSpread({
+        className: className
+      }, containerProps), {}, {
+        clearable: clearable,
+        value: value,
+        children: customInputType(_objectSpread({}, inputProps))
+      }))
+    });
+
+    if (isShowElipsisActive) {
+      InputComponent = /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
+        isOpen: !disableTooltip && isEllipsisOn && !active && showTooltip && width,
+        title: String(value),
+        zIndex: 11,
+        triggerComponent: /*#__PURE__*/_jsx__default["default"](WrapperForTooltipInput, {
+          style: {
+            width: '100%'
+          }
+        }, void 0, InputComponent)
+      });
+    }
+
+    const renderInput = rightComponents.length || leftComponents.length || clearable ? /*#__PURE__*/jsxRuntime.jsx(InputAddonWrapper, _objectSpread(_objectSpread({
+      className: className,
+      leftComponents: leftComponents,
+      rightComponents: rightComponents,
+      hasError: hasError
+    }, containerProps), {}, {
+      children: InputComponent
+    })) : InputComponent;
+    return renderInput;
+  }
+
+}
+
+InputImpl.defaultProps = {
+  onBlur: noop,
+  onFocus: noop
+};
+({
+  className: PropTypes__default["default"].string,
+  customInputType: PropTypes__default["default"].func,
+  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  isShowElipsisActive: PropTypes__default["default"].bool,
+  max: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  min: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  name: PropTypes__default["default"].string,
+  onBlur: PropTypes__default["default"].func,
+  onChange: PropTypes__default["default"].func,
+  onClick: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onKeyDown: PropTypes__default["default"].func,
+  onKeyUp: PropTypes__default["default"].func,
+  onMouseLeave: PropTypes__default["default"].func,
+  onMouseOut: PropTypes__default["default"].func,
+  onPaste: PropTypes__default["default"].func,
+  onClear: PropTypes__default["default"].func,
+  placeholder: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
+  role: PropTypes__default["default"].string,
+  innerRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any
+  })]),
+  maxLength: PropTypes__default["default"].number,
+  minLength: PropTypes__default["default"].number,
+  leftComponent: PropTypes__default["default"].element,
+  rightComponent: PropTypes__default["default"].element,
+  hasError: PropTypes__default["default"].bool,
+  disableTooltip: PropTypes__default["default"].bool,
+  readOnly: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  autoFocus: PropTypes__default["default"].bool,
+  type: PropTypes__default["default"].string,
+  clearable: PropTypes__default["default"].bool,
+  containerProps: PropTypes__default["default"].object,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes__default["default"].object,
+  tabIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  // eslint-disable-next-line jsdoc/require-returns
+
+  /**
+   * Should be of type string if using ellipsis tooltip [isShowElipsisActive] prop
+   *
+   * @param props
+   * @param propName
+   * @param componentName
+   */
+  // eslint-disable-next-line consistent-return
+  value(props, propName, componentName) {
+    // eslint-disable-line consistent-return
+    if (!!props.isShowElipsisActive && typeof props[propName] !== 'string') {
+      return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof props[propName], "` supplied to") + " `".concat(componentName, "`. Prop `value` should be of type `string` if prop `isShowElipsisActive` is set to `true`.") + ' Either set `isShowElipsisActive` to `false`, or properly format your `value` prop to `string`.');
+    }
+  }
+
+});
+
+module.exports = InputImpl;

package/cjs/Input/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSInput = require('./DSInput.js');
+var InputAddonWrapper = require('./InputAddonWrapper.js');
+
+
+
+exports["default"] = DSInput["default"];
+exports.InputAddonWrapper = InputAddonWrapper;

package/cjs/InputGroup/AddonWrapper.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["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; }
+const blockName = 'input-addon-group';
+const Container = dsClassnames.aggregatedClasses('div')(blockName);
+const InputAddon = dsClassnames.aggregatedClasses('span')(blockName, 'addon');
+class AddonWrapper extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {};
+  }
+
+  render() {
+    const {
+      leftAddon,
+      rightAddon,
+      children: inputComponent,
+      className,
+      containerProps
+    } = this.props;
+    const childType = inputComponent && inputComponent.type && inputComponent.type.name ? inputComponent.type.name.toLowerCase() : 'default';
+    return /*#__PURE__*/jsxRuntime.jsxs(Container, _objectSpread(_objectSpread({
+      className: "".concat(className, " ").concat(blockName, "--").concat(childType)
+    }, containerProps), {}, {
+      children: [leftAddon && /*#__PURE__*/_jsx__default["default"](InputAddon, {}, void 0, leftAddon), inputComponent, rightAddon && /*#__PURE__*/_jsx__default["default"](InputAddon, {}, void 0, rightAddon)]
+    }));
+  }
+
+}
+AddonWrapper.defaultProps = {};
+
+module.exports = AddonWrapper;

package/cjs/InputGroup/DSInputGroup.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+var reactDesc = require('react-desc');
+var AddonWrapper = require('./AddonWrapper.js');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const DSInputGroup = _ref => {
+  let {
+    containerProps,
+    innerRef,
+    className,
+    style,
+    leftAddon,
+    rightAddon,
+    children: InputComponents // as InputComponents,
+
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(AddonWrapper, {
+    ref: innerRef,
+    className: className,
+    containerProps: containerProps,
+    leftAddon: leftAddon,
+    rightAddon: rightAddon,
+    style: style,
+    children: InputComponents
+  });
+};
+
+DSInputGroup.defaultProps = defaultProps.defaultProps;
+const DSInputGroupWithSchema = reactDesc.describe(DSInputGroup);
+DSInputGroupWithSchema.propTypes = props.props;
+
+exports.DSInputGroupWithSchema = DSInputGroupWithSchema;
+exports["default"] = DSInputGroup;

package/cjs/InputGroup/defaultProps.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const defaultProps = {
+  containerProps: {},
+  innerRef: null,
+  className: '',
+  style: {},
+  leftAddon: null,
+  rightAddon: null
+};
+
+exports.defaultProps = defaultProps;

package/cjs/InputGroup/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSInputGroup = require('./DSInputGroup.js');
+
+
+
+exports.DSInputGroupWithSchema = DSInputGroup.DSInputGroupWithSchema;
+exports["default"] = DSInputGroup["default"];

package/cjs/InputGroup/props.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const props = {
+  /** props injected to wrapper of page header */
+  containerProps: reactDesc.PropTypes.shape({}).description('props injected to wrapper of page header'),
+
+  /** inner ref for input group wrapper */
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
+    current: reactDesc.PropTypes.any
+  })]).description('inner ref for input group wrapper'),
+
+  /** class for input group wrapper */
+  className: reactDesc.PropTypes.string.description('class for input group wrapper'),
+
+  /**
+   * Set style for the input group
+   */
+  style: reactDesc.PropTypes.object.description('Set style for the input group'),
+
+  /**
+   * Component to be added at the left side of the input
+   */
+  leftAddon: reactDesc.PropTypes.element.description('Component to be added at the left side of the input'),
+
+  /**
+   * Component to be added at the right side of the input
+   */
+  rightAddon: reactDesc.PropTypes.element.description('Component to be added at the right side of the input'),
+
+  /**
+   * Input components to show
+   */
+  children: reactDesc.PropTypes.element.description('Input components to show')
+};
+
+exports.props = props;