@elliemae/ds-form 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/SearchBox/withSearchable.js

@@ -0,0 +1,151 @@
+'use strict';
+
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["containerProps"];
+
+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 withSearchable = WrappedComponent => {
+  class Searchable extends React.Component {
+    constructor(props) {
+      super(props);
+      this.debouncedSearch = dsUtilities.debounce(this.handleSearch, 200);
+      this.state = {
+        value: props.value
+      };
+      this.handleSearch = this.handleSearch.bind(this);
+      this.handleKeyUp = this.handleKeyUp.bind(this);
+      this.handleChange = this.handleChange.bind(this);
+      this.buttonRef = /*#__PURE__*/React__default["default"].createRef();
+      this.handleChange = this.handleChange.bind(this);
+      this.handleKeyUp = this.handleKeyUp.bind(this);
+      this.handleSearch = this.handleSearch.bind(this);
+    }
+
+    static getDerivedStateFromProps(nextProps, _ref) {
+      let {
+        prevPropValue
+      } = _ref;
+
+      if (nextProps.value !== prevPropValue) {
+        return {
+          value: nextProps.value,
+          prevPropValue: nextProps.value
+        };
+      }
+
+      return null;
+    }
+
+    handleKeyUp(e) {
+      const {
+        onKeyUp,
+        searchOnEnter
+      } = this.props;
+      const {
+        key
+      } = e;
+
+      if (searchOnEnter && key === 'Enter') {
+        this.handleSearch();
+      }
+
+      onKeyUp(e);
+    }
+
+    handleSearch() {
+      const {
+        onSearch,
+        property,
+        clearOnSearch,
+        searchOnEnter
+      } = this.props;
+      const {
+        value
+      } = this.state;
+      if (clearOnSearch) this.setState({
+        value: ''
+      });
+      if (searchOnEnter && !value) return;
+      onSearch({
+        query: {
+          [property]: value
+        },
+        property,
+        value
+      });
+    }
+
+    handleChange(_ref2) {
+      let {
+        target
+      } = _ref2;
+      const {
+        value
+      } = target;
+      const {
+        searchOnEnter,
+        onChange
+      } = this.props;
+      onChange(value);
+      this.setState({
+        value
+      }, () => {
+        if (!searchOnEnter) this.debouncedSearch();
+      });
+    }
+
+    render() {
+      const {
+        value
+      } = this.state;
+
+      const _this$props = this.props,
+            {
+        containerProps
+      } = _this$props,
+            rest = _objectWithoutProperties__default["default"](_this$props, _excluded);
+
+      return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, _objectSpread(_objectSpread({}, rest), {}, {
+        buttonRef: this.buttonRef,
+        containerProps: containerProps,
+        onChange: this.handleChange,
+        onKeyUp: this.handleKeyUp,
+        onSearch: this.handleSearch,
+        value: value
+      }));
+    }
+
+  }
+
+  Searchable.defaultProps = {
+    onChange: () => null,
+    onSearch: () => null,
+    onKeyUp: () => null,
+    property: 'all',
+    searchOnEnter: true,
+    clearOnSearch: false,
+    containerProps: {}
+  };
+  return Searchable;
+};
+
+module.exports = withSearchable;

package/cjs/TextBox/DSTextBox.js

@@ -0,0 +1,180 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var reactDesc = require('react-desc');
+var DSInput = require('../Input/DSInput.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);
+
+const _excluded = ["containerProps", "autoFocus", "disabled", "maxLength", "minLength", "fluidWidth", "placeholder", "value", "hasError", "readOnly", "innerRef", "type", "min", "max", "clearable", "leftComponent", "rightComponent", "required", "variant", "disableTooltip", "id"];
+
+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 DSTextBox = _ref => {
+  let {
+    containerProps = {},
+    autoFocus = false,
+    disabled = false,
+    maxLength = 255,
+    minLength = 0,
+    fluidWidth = false,
+    placeholder,
+    value = '',
+    hasError = false,
+    readOnly = false,
+    innerRef = null,
+    type = 'text',
+    min = undefined,
+    max = undefined,
+    clearable = false,
+    leftComponent = null,
+    rightComponent = null,
+    required = false,
+    variant,
+    disableTooltip,
+    id
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(DSInput["default"], _objectSpread(_objectSpread({}, otherProps), {}, {
+    "aria-label": !id ? otherProps['aria-label'] || 'Text Box' : undefined,
+    "aria-describedby": otherProps['aria-describedby'] || "".concat(id, "_feedback_message"),
+    autoFocus: autoFocus,
+    clearable: clearable,
+    containerProps: containerProps,
+    disabled: disabled,
+    fluidWidth: fluidWidth,
+    hasError: hasError,
+    innerRef: innerRef,
+    leftComponent: leftComponent,
+    max: max,
+    maxLength: maxLength,
+    min: min,
+    minLength: minLength,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    required: required,
+    rightComponent: rightComponent,
+    role: "textbox",
+    type: type,
+    value: value,
+    variant: variant,
+    disableTooltip: disableTooltip,
+    id: id
+  }));
+};
+
+const props = {
+  /** inject props at textbox wrapper */
+  containerProps: reactDesc.PropTypes.shape({}).description('inject props at textbox wrapper'),
+
+  /**
+   * Whether the text box uses auto focus or not
+   */
+  autoFocus: reactDesc.PropTypes.bool.description('Whether the text box uses auto focus or not'),
+
+  /**
+   * Whether the text box is disabled or not
+   */
+  disabled: reactDesc.PropTypes.bool.description('Whether the text box is disabled or not'),
+
+  /**
+   * Max length for the text box
+   */
+  maxLength: reactDesc.PropTypes.number.description('Max length for the text box'),
+
+  /**
+   * Min length for the text box
+   */
+  minLength: reactDesc.PropTypes.number.description('Min length for the text box'),
+
+  /**
+   * Make the content of the text box fit the container or not
+   */
+  fluidWidth: reactDesc.PropTypes.bool.description('Make the content of the text box fit the container or not'),
+
+  /**
+   * Placeholder for the text box
+   */
+  placeholder: reactDesc.PropTypes.string.description('Placeholder for the text box'),
+
+  /**
+   * Default value once the component is initialized
+   */
+  value: reactDesc.PropTypes.string.description('Default value once the component is initialized'),
+
+  /**
+   * Whether the text box has error or not
+   */
+  hasError: reactDesc.PropTypes.bool.description('Whether the text box has error or not'),
+
+  /**
+   * Whether the text box is read only or not
+   */
+  readOnly: reactDesc.PropTypes.bool.description('Whether the text box is read only or not'),
+
+  /** html min prop for input */
+  min: reactDesc.PropTypes.number.description('html min prop for input'),
+
+  /** html max prop for input */
+  max: reactDesc.PropTypes.number.description('html max prop for input'),
+
+  /**
+   * Whether the text box is clearable or not
+   */
+  clearable: reactDesc.PropTypes.bool.description('Whether the text box is clearable or not'),
+
+  /**
+   * Component to be added at the left side of the text box
+   */
+  leftComponent: reactDesc.PropTypes.element.description('Component to be added at the left side of the text box'),
+
+  /**
+   * Component to be added at the right side of the text box
+   */
+  rightComponent: reactDesc.PropTypes.element.description('Component to be added at the right side of the text box'),
+
+  /**
+   * Whether the text box is required or not
+   */
+  required: reactDesc.PropTypes.bool.description('Whether the text box is required or not'),
+
+  /**
+   * [
+   *  'variant-default',
+   *  'variant-focus',
+   *  'variant-active',
+   *  'variant-disabled',
+   * ]
+   */
+  variant: reactDesc.PropTypes.string.description("variant-default','variant-focus','variant-active','variant-disabled'"),
+
+  /** html input type */
+  type: reactDesc.PropTypes.string.description('html input type'),
+
+  /** Internal ref */
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.object]).description('internal ref'),
+
+  /** disableTooltip */
+  disableTooltip: reactDesc.PropTypes.bool.description('Whether to show a tooltip or not when text does not fit').defaultValue(true)
+};
+const DSTextBoxWithSchema = reactDesc.describe(DSTextBox);
+DSTextBoxWithSchema.propTypes = props;
+
+exports.DSTextBoxWithSchema = DSTextBoxWithSchema;
+exports["default"] = DSTextBox;

package/cjs/TextBox/index.js

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

package/cjs/TimeInput/DSTimeInput.js

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var reactDesc = require('react-desc');
+var DSInput = require('../Input/DSInput.js');
+var TimeInputImpl = require('./TimeInputImpl.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["onChange"];
+
+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 DSTimeInput = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    className = '',
+    style = {},
+    onChange = () => null,
+    format,
+    value = '',
+    clearable = false,
+    disabled = false,
+    ariaLabel = 'Time input'
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSInput["default"], {
+    className: className,
+    clearable: clearable,
+    containerProps: containerProps,
+    customInputType: _ref2 => {
+      let {
+        onChange: inputOnChange
+      } = _ref2,
+          restInputProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
+
+      return /*#__PURE__*/jsxRuntime.jsx(TimeInputImpl, _objectSpread(_objectSpread({
+        "aria-label": ariaLabel,
+        disabled: disabled,
+        format: format,
+        onChange: time => inputOnChange(time)
+      }, restInputProps), {}, {
+        style: style
+      }));
+    },
+    disabled: disabled,
+    innerRef: innerRef,
+    isShowElipsisActive: false,
+    onChange: onChange,
+    onClear: () => onChange(null),
+    value: value
+  });
+};
+
+DSTimeInput.defaultProps = {
+  format: 'hh:mm:ss',
+  disabled: false,
+  clearable: true
+};
+const props = {
+  /** Injected props to wrapper element of component */
+  containerProps: reactDesc.PropTypes.object.description('Injected props to wrapper element of component'),
+
+  /**
+   * Allows a function that is triggered once the time input changes
+   */
+  onChange: reactDesc.PropTypes.func.description('Allows a function that is triggered once the time input changes'),
+
+  /** a11y aria label */
+  'aria-label': reactDesc.PropTypes.string.description('a11y aria label'),
+
+  /** style object for time input wrapper */
+  style: reactDesc.PropTypes.object.description('style object for time input wrapper'),
+
+  /** inner ref for time inpot wrapper */
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
+    current: reactDesc.PropTypes.any
+  })]).description('inner ref for time input wrapper'),
+
+  /** class for time input */
+  className: reactDesc.PropTypes.string.description('class for time input'),
+
+  /**
+   * Valid time format
+   */
+  format: reactDesc.PropTypes.string.description('Valid time format'),
+
+  /**
+   * Default value once the component is initialized
+   */
+  value: reactDesc.PropTypes.string.description('Default value once the component is initialized'),
+
+  /**
+   * Whether the time input is clearable or not
+   */
+  clearable: reactDesc.PropTypes.bool.description('Whether the time input is clearable or not'),
+
+  /**
+   * Whether the time input is disabled or not
+   */
+  disabled: reactDesc.PropTypes.bool.description('Whether the time input is disabled or not'),
+
+  /**
+   * Aria label
+   */
+  ariaLabel: reactDesc.PropTypes.string.description('Aria label')
+};
+const DSTimeInputWithSchema = reactDesc.describe(DSTimeInput);
+DSTimeInputWithSchema.propTypes = props;
+
+exports.TimeInputImpl = TimeInputImpl;
+exports.DSTimeInputWithSchema = DSTimeInputWithSchema;
+exports["default"] = DSTimeInput;

package/cjs/TimeInput/TimeInputImpl.js

@@ -0,0 +1,68 @@
+'use strict';
+
+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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var memoize = require('memoize-one');
+var dsClassnames = require('@elliemae/ds-classnames');
+var TimeInputs = require('./TimeInputs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
+
+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-time';
+const InputTimeContainer = dsClassnames.aggregatedClasses('div')(blockName);
+
+const TimeInputImpl = _ref => {
+  let {
+    format,
+    innerRef,
+    onChange,
+    className,
+    value,
+    disabled,
+    clearable,
+    'arial-label': ariaLabel
+  } = _ref;
+  const getVisibleTimeInputs = memoize__default["default"](formatValue => dsUtilities.getVisibleTimeByFormat(formatValue));
+  let inputsContainer = React.useRef();
+
+  const handleFocus = e => {
+    if (!e.target.type) {
+      inputsContainer.querySelector('input').focus();
+    }
+  };
+
+  const visibleInputs = React.useMemo(() => getVisibleTimeInputs(format));
+  return /*#__PURE__*/_jsx__default["default"](InputTimeContainer, {
+    className: className,
+    disabled: disabled,
+    innerRef: innerRef,
+    onClick: handleFocus
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(TimeInputs, _objectSpread({
+    "aria-label": ariaLabel,
+    clearable: clearable,
+    disabled: disabled,
+    format: format,
+    innerRef: node => {
+      inputsContainer = node;
+    },
+    onChange: onChange,
+    time: value
+  }, visibleInputs)));
+};
+
+module.exports = TimeInputImpl;