@elliemae/ds-search-field 2.3.0-alpha.9 → 2.3.0-next.3

package/esm/DSSearchField.js

@@ -0,0 +1,159 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { TabTypes } from '@elliemae/ds-tabs';
+import DSSearchFieldImpl from './impl/DSSeachFieldImpl.js';
+export { default as DSModalSearchField } from './impl/components/ModalSearchField/ModalSearchField.js';
+
+const DSSearchField = _ref => {
+  let {
+    containerProps = {},
+    onChange = () => null,
+    searchOptionLabel = 'Advanced Search',
+    placeholder = 'Select field',
+    modalSize = 'x-large',
+    modalTitle = 'Search Field ID',
+    tabsAnimated = true,
+    tabsEnableMouseEvents = true,
+    tabType = TabTypes.NORMAL,
+    tabData = [],
+    searchGrid = false,
+    searchFilters = true,
+    confirmLabel = 'Apply',
+    rejectLabel = 'Cancel',
+    modalType = 'confirm',
+    onConfirmField = () => null,
+    onRejectField = () => null,
+    onTabChange = () => null,
+    appElement = '#root',
+    value = null,
+    additionalInfo = null,
+    displayProperty = 'name',
+    dropdownOptions = [],
+    customDataGridOptions = {},
+    customDropdownOptions = {},
+    useLookupIndicator = true,
+    searchable = false
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSSearchFieldImpl, {
+    additionalInfo: additionalInfo,
+    appElement: appElement,
+    searchable: searchable,
+    confirmLabel: confirmLabel,
+    containerProps: containerProps,
+    customDataGridOptions: customDataGridOptions,
+    customDropdownOptions: customDropdownOptions,
+    displayProperty: displayProperty,
+    dropdownOptions: dropdownOptions,
+    modalSize: modalSize,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onChange: onChange,
+    onConfirmField: onConfirmField,
+    onRejectField: onRejectField,
+    onTabChange: onTabChange,
+    placeholder: placeholder,
+    rejectLabel: rejectLabel,
+    searchFilters: searchFilters,
+    searchGrid: searchGrid,
+    searchOptionLabel: searchOptionLabel,
+    tabData: tabData,
+    tabsAnimated: tabsAnimated,
+    tabsEnableMouseEvents: tabsEnableMouseEvents,
+    tabType: tabType,
+    useLookupIndicator: useLookupIndicator,
+    value: value
+  });
+};
+
+const props = {
+  /*
+    Enable the user to search on combobox
+  */
+  searchable: PropTypes.bool.description('Enable the user to search on combobox'),
+
+  /** inject props to wrapper */
+  containerProps: PropTypes.object.description('inject props to wrapper'),
+
+  /** change handler */
+  onChange: PropTypes.func.description('change handler'),
+
+  /** search option label */
+  searchOptionLabel: PropTypes.string.description('search option label'),
+
+  /** placeholder for search input */
+  placeholder: PropTypes.string.description('placeholder for search input'),
+
+  /** search modal size */
+  modalSize: PropTypes.oneOf(['x-large', 'large', 'medium']).description('search modal size'),
+
+  /** search modal title */
+  modalTitle: PropTypes.string.description('search modal title'),
+
+  /** animate modal tabs */
+  tabsAnimated: PropTypes.bool.description('animate modal tabs'),
+
+  /** enable mouse event on tabs */
+  tabsEnableMouseEvents: PropTypes.bool.description('enable mouse event on tabs'),
+
+  /** tab types on modal */
+  tabType: PropTypes.oneOf([TabTypes.NORMAL, TabTypes.SUBTABS]).description('tab types on modal'),
+
+  /** data for modal tabs */
+  tabData: PropTypes.array.description('data for modal tabs'),
+
+  /** use search grid */
+  searchGrid: PropTypes.bool.description('use search grid'),
+
+  /** add search filters */
+  searchFilters: PropTypes.bool.description('add search filters'),
+
+  /** confirm modal label */
+  confirmLabel: PropTypes.string.description('confirm modal label'),
+
+  /** reject modal label */
+  rejectLabel: PropTypes.string.description('reject modal label'),
+
+  /** modal type */
+  modalType: PropTypes.oneOf(['alert', 'confirm']).description('modal type'),
+
+  /** on confirm handler */
+  onConfirmField: PropTypes.func.description('on confirm handler'),
+
+  /** on cancel handler */
+  onRejectField: PropTypes.func.description('on cancel handler'),
+
+  /** tab change handler */
+  onTabChange: PropTypes.func.description('tab change handler'),
+
+  /** app element */
+  appElement: PropTypes.string.description('app element'),
+
+  /** value for search */
+  value: PropTypes.string.description('value for search'),
+
+  /** additional info */
+  additionalInfo: PropTypes.object.description('additional info'),
+
+  /** display property */
+  displayProperty: PropTypes.string.description('display property'),
+
+  /** options for dropdown */
+  dropdownOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })).description('options for dropdown'),
+
+  /** pass down props for datagrid in modal */
+  customDataGridOptions: PropTypes.object.description('pass down props for datagrid in modal'),
+
+  /** custom props for dropdown */
+  customDropdownOptions: PropTypes.object.description('custom props for dropdown'),
+
+  /** enable lookup */
+  useLookupIndicator: PropTypes.bool.description('enable lookup')
+};
+const DSSearchFieldWithSchema = describe(DSSearchField);
+DSSearchFieldWithSchema.propTypes = props;
+
+export { DSSearchFieldWithSchema, DSSearchField as default };

package/esm/impl/DSSeachFieldImpl.js

@@ -0,0 +1,234 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { Component } from 'react';
+import { components } from 'react-select';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSComboBox2 } from '@elliemae/ds-form';
+import ModalSearchField from './components/ModalSearchField/ModalSearchField.js';
+export { default as DSModalSearchField } from './components/ModalSearchField/ModalSearchField.js';
+import AdvanceSearchOption from './components/AdvanceSearchOption/AdvanceSearchOption.js';
+import LookupIndicator from './components/LookupIndicator/LookupIndicator.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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(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 advanceOption = {
+  className: 'advanced-search-option',
+  label: 'Advanced search',
+  value: 'search-field-advance-option',
+  isAdvance: true
+};
+const {
+  cssClassName,
+  classNameElement,
+  classNameModifier,
+  classNameBlock
+} = convertPropToCssClassName('query-builder-addon-search-field');
+
+class DSSearchFieldImpl extends Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = () => {
+      const {
+        selected: id,
+        additionalInfo: [row]
+      } = this.state;
+      const {
+        onChange
+      } = this.props;
+      onChange(id, row);
+    };
+
+    this.onChangeDropdown = value => {
+      const {
+        dropdownOptions
+      } = this.props;
+      const selected = dropdownOptions.find(op => op.value === value);
+      const {
+        onChange,
+        displayProperty
+      } = this.props;
+      if (selected) onChange(value, {
+        [displayProperty]: selected.label
+      });
+    };
+
+    this.onKeyDown = event => {
+      setTimeout(() => {
+        const {
+          keycode
+        } = event;
+        const {
+          value
+        } = this.props;
+        if (value && keycode === 13) this.handleCloseModal();
+      }, 0);
+    };
+
+    this.handleSelect = (selectedRow, rows) => {
+      let selected = selectedRow; // fix new datagrid callback format
+
+      if (!selected) return;
+      if (selected.id) selected = selected.id;else if (selected[0] && selected[0].id) selected = selected[0].id;
+      const additionalInfo = rows.filter(row => selected === row.id);
+      this.setState({
+        selected,
+        additionalInfo
+      });
+    };
+
+    this.handleConfirm = () => {
+      const {
+        onConfirmField
+      } = this.props;
+      this.onChange();
+      this.handleCloseModal();
+      onConfirmField();
+    };
+
+    this.handleReject = () => {
+      const {
+        onRejectField
+      } = this.props;
+      this.handleCloseModal();
+      onRejectField();
+    };
+
+    this.handleOpenModal = () => {
+      this.setState({
+        openModal: true
+      });
+    };
+
+    this.handleCloseModal = () => this.setState({
+      openModal: false,
+      selected: [],
+      additionalInfo: []
+    });
+
+    advanceOption.label = props.searchOptionLabel;
+    this.state = {
+      openModal: false,
+      selected: null,
+      additionalInfo: []
+    };
+  }
+
+  render() {
+    const {
+      placeholder,
+      modalTitle,
+      modalSize,
+      tabsAnimated,
+      tabsEnableMouseEvents,
+      tabType,
+      tabData,
+      searchFilters,
+      searchGrid,
+      confirmLabel,
+      rejectLabel,
+      modalType,
+      appElement,
+      value,
+      additionalInfo,
+      displayProperty,
+      dropdownOptions,
+      searchOptionLabel,
+      customDataGridOptions,
+      customDropdownOptions,
+      useLookupIndicator,
+      onTabChange,
+      containerProps,
+      searchable
+    } = this.props;
+    const {
+      openModal
+    } = this.state;
+    let options = [...dropdownOptions, advanceOption];
+    let displayValue = !value ? placeholder : value;
+    if (additionalInfo && additionalInfo[displayProperty]) displayValue = additionalInfo[displayProperty];
+    const defaultoption = {
+      value,
+      label: displayValue
+    };
+    const customComponents = {
+      Option: props => {
+        // return <AdvanceSearchOption onAdvanceSearchClick={this.handleOpenModal} />
+        props.innerProps.className = 'em-ds-combobox__option';
+
+        if (props.data.isAdvance) {
+          props.innerProps.onClick = this.handleOpenModal;
+          props.innerProps.className = "".concat(props.innerProps.className, " ").concat(advanceOption.className);
+        }
+
+        return /*#__PURE__*/jsx(components.Option, _objectSpread({}, props));
+      },
+      IndicatorSeparator: () => null,
+      NoOptionsMessage: props => /*#__PURE__*/jsx(AdvanceSearchOption, _objectSpread({
+        advanceSearchLabel: searchOptionLabel,
+        onAdvanceSearchClick: this.handleOpenModal
+      }, props))
+    };
+
+    if (useLookupIndicator) {
+      customComponents.DropdownIndicator = () => null;
+    }
+
+    if (!options.find(o => o.value === defaultoption.value)) {
+      options = [defaultoption, ...options];
+    }
+
+    return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "".concat(cssClassName),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "".concat(classNameBlock('container-selector'))
+      }, void 0, /*#__PURE__*/jsx(DSComboBox2, _objectSpread({
+        className: "".concat(classNameElement('dropdown-field-selector')),
+        components: customComponents,
+        onChange: this.onChangeDropdown,
+        onKeyDown: this.onKeyDown,
+        options: options,
+        value: value,
+        searchable: searchable
+      }, customDropdownOptions)), useLookupIndicator && /*#__PURE__*/_jsx(LookupIndicator, {
+        buttonType: "text",
+        className: "".concat(classNameElement('btn-selector'), " ").concat(!value ? classNameModifier('btn-placeholder', 'btn-selector') : ''),
+        onAdvanceSearchClick: this.handleOpenModal
+      })), /*#__PURE__*/_jsx(ModalSearchField, {
+        appElement: appElement,
+        confirmLabel: confirmLabel,
+        customDataGridOptions: customDataGridOptions,
+        handleSelect: this.handleSelect,
+        isOpen: openModal,
+        modalSize: modalSize,
+        modalTitle: modalTitle,
+        modalType: modalType,
+        onClose: this.handleCloseModal,
+        onConfirmField: this.handleConfirm,
+        onRejectField: this.handleReject,
+        onTabChange: onTabChange,
+        placeholder: placeholder,
+        rejectLabel: rejectLabel,
+        searchFilters: searchFilters,
+        searchGrid: searchGrid,
+        tabData: tabData,
+        tabsAnimated: tabsAnimated,
+        tabsEnableMouseEvents: tabsEnableMouseEvents,
+        tabType: tabType
+      })]
+    }));
+  }
+
+}
+
+export { DSSearchFieldImpl as default };

package/esm/impl/components/AdvanceSearchOption/AdvanceSearchOption.js

@@ -0,0 +1,19 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import DSButton from '@elliemae/ds-button';
+
+const AdvanceSearchOption = _ref => {
+  let {
+    advanceSearchLabel = 'Advanced Search',
+    onAdvanceSearchClick = () => null
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSButton, {
+    className: "advance-search-option-btn",
+    labelText: advanceSearchLabel,
+    onClick: onAdvanceSearchClick,
+    tabIndex: -1,
+    type: "button"
+  });
+};
+
+export { AdvanceSearchOption as default };

package/esm/impl/components/LookupIndicator/LookupIndicator.js

@@ -0,0 +1,27 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { Search } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+
+var _Search;
+
+const LookupIndicator = _ref => {
+  let {
+    onAdvanceSearchClick = () => null,
+    className = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSButton, {
+    "data-testid": "ds-searchfield-search-btn",
+    buttonType: "secondary",
+    className: className,
+    icon: _Search || (_Search = /*#__PURE__*/_jsx(Search, {})),
+    iconSize: "s",
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      onAdvanceSearchClick();
+    }
+  });
+};
+
+export { LookupIndicator as default };

package/esm/impl/components/ModalSearchField/DataGridSearch.js

@@ -0,0 +1,108 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { Component } from 'react';
+import DSToolbar, { ToolbarGroup } from '@elliemae/ds-toolbar';
+import { DSSearchBox } from '@elliemae/ds-form';
+import { DSDataGrid } from '@elliemae/ds-datagrids';
+import { uid } from 'uid';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const _excluded = ["onFiltersChange"];
+
+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(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; }
+class DataGridSearch extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      filters: props.filters || []
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleFiltersChange = this.handleFiltersChange.bind(this);
+  }
+
+  handleSearch() {
+    const {
+      customDataGridOptions
+    } = this.props;
+    const {
+      property,
+      value
+    } = arguments.length <= 0 ? undefined : arguments[0];
+    const {
+      filters
+    } = this.state;
+    this.setState({
+      filters: [...filters, {
+        group: property,
+        label: 'All',
+        value,
+        id: uid(16)
+      }]
+    });
+    if (customDataGridOptions.onFiltersChange) customDataGridOptions.onFiltersChange(...arguments);
+  }
+
+  handleFiltersChange(nextFilters) {
+    const {
+      customDataGridOptions
+    } = this.props;
+    this.setState({
+      filters: nextFilters
+    });
+    if (customDataGridOptions.onFiltersChange) customDataGridOptions.onFiltersChange(nextFilters);
+  }
+
+  render() {
+    const {
+      id,
+      rows,
+      columns,
+      boundFetchRows,
+      searchFilters,
+      searchGrid = true,
+      customDataGridOptions,
+      handleSelect
+    } = this.props;
+
+    const restCustomDataGridOptions = _objectWithoutProperties(customDataGridOptions, _excluded);
+
+    const {
+      filters
+    } = this.state;
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(DSToolbar, {
+        withDepth: false
+      }, void 0, /*#__PURE__*/_jsx(ToolbarGroup, {}, void 0, /*#__PURE__*/_jsx(DSSearchBox, {
+        cleanOnSearch: true,
+        onSearch: this.handleSearch,
+        placeholder: "Search all"
+      }))), /*#__PURE__*/_jsx("div", {
+        className: "datagrid-tab-content"
+      }, void 0, /*#__PURE__*/jsx(DSDataGrid, _objectSpread({
+        columns: columns,
+        filters: filters,
+        fluidHeight: true,
+        getData: boundFetchRows,
+        id: id,
+        onFiltersChange: this.handleFiltersChange,
+        onSelectRow: rowId => handleSelect(rowId, rows),
+        rows: rows,
+        searchFilters: searchFilters,
+        searchGrid: searchGrid,
+        selectable: true
+      }, restCustomDataGridOptions)))]
+    });
+  }
+
+}
+
+export { DataGridSearch as default };

package/esm/impl/components/ModalSearchField/ModalSearchField.js

@@ -0,0 +1,76 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'react';
+import DSModal from '@elliemae/ds-modal';
+import { TabTypes, DSTabs, DSTab } from '@elliemae/ds-tabs';
+import DataGridSearch from './DataGridSearch.js';
+
+const ModalSearchField = _ref => {
+  let {
+    isOpen = false,
+    onClose = () => null,
+    modalTitle = 'Search Field ID',
+    modalSize = 'x-large',
+    tabsAnimated = true,
+    tabsEnableMouseEvents = true,
+    tabType = TabTypes.NORMAL,
+    tabData = [],
+    searchFilters = true,
+    searchGrid = false,
+    confirmLabel = 'Apply',
+    rejectLabel = 'Cancel',
+    modalType = 'confirm',
+    onConfirmField = () => null,
+    onRejectField = () => null,
+    handleSelect = () => null,
+    onTabChange = () => null,
+    appElement = null,
+    customDataGridOptions = {}
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSModal, {
+    dataTestId: "ds-searchfield-modal",
+    appElement: appElement,
+    centered: false,
+    className: "modal-search-field",
+    confirmLabel: confirmLabel,
+    isOpen: isOpen,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onClose: onClose,
+    onConfirm: onConfirmField,
+    onReject: onRejectField,
+    rejectLabel: rejectLabel,
+    size: modalSize
+  }, void 0, tabData.length > 0 && /*#__PURE__*/_jsx(DSTabs, {
+    animated: tabsAnimated,
+    enableMouseEvents: tabsEnableMouseEvents,
+    onlyRenderActiveTab: true,
+    onTabChange: onTabChange,
+    type: tabType
+  }, void 0, tabData.map(_ref2 => {
+    let {
+      tabId,
+      tabTitle,
+      columns,
+      rows,
+      boundFetchRows
+    } = _ref2;
+    return /*#__PURE__*/_jsx(DSTab, {
+      className: "tab-content",
+      tabId: tabId,
+      title: tabTitle
+    }, tabId, /*#__PURE__*/_jsx(DataGridSearch, {
+      boundFetchRows: boundFetchRows,
+      columns: columns,
+      customDataGridOptions: customDataGridOptions,
+      handleSelect: handleSelect,
+      id: "datagrid_search_field_".concat(tabId),
+      rows: rows,
+      searchFilters: searchFilters,
+      searchGrid: searchGrid
+    }));
+  })));
+};
+
+export { ModalSearchField as default };

package/esm/index.js

@@ -0,0 +1,2 @@
+export { DSSearchFieldWithSchema, default } from './DSSearchField.js';
+export { default as DSModalSearchField } from './impl/components/ModalSearchField/ModalSearchField.js';