From aabffa70af031f12fad75d55283eeebd1a418a5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= <56156254+ulasturann@users.noreply.github.com> Date: Tue, 13 Sep 2022 15:49:10 +0300 Subject: [PATCH] Fix #3244 Autocomplete: add emptyMessage property. (#3287) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add new attributes to the autocomplete component. * Replace the condition operator with more readable and effective. * Update AutoComplete.js * Update AutoCompletePanel.js Co-authored-by: Ulaş Turan Co-authored-by: Melloware --- components/doc/autocomplete/index.js | 12 +++ components/lib/autocomplete/AutoComplete.js | 93 ++++++++++--------- .../lib/autocomplete/AutoCompletePanel.js | 11 ++- components/lib/autocomplete/autocomplete.d.ts | 81 ++++++++-------- 4 files changed, 109 insertions(+), 88 deletions(-) diff --git a/components/doc/autocomplete/index.js b/components/doc/autocomplete/index.js index a1433e7949..daaff92489 100644 --- a/components/doc/autocomplete/index.js +++ b/components/doc/autocomplete/index.js @@ -856,6 +856,18 @@ itemTemplate(item) { false Specifies if multiple values can be selected. + + showEmptyMessage + boolean + false + Whether to show the empty message or not. + + + emptyMessage + string + No results found. + Text to display when there is no data. Defaults to global value in i18n translation configuration. + minLength number diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index 516e292a06..25747cd5ba 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -445,7 +445,7 @@ export const AutoComplete = React.memo( useUpdateEffect(() => { if (searchingState) { - ObjectUtils.isNotEmpty(props.suggestions) ? show() : hide(); + ObjectUtils.isNotEmpty(props.suggestions) || props.showEmptyMessage ? show() : hide(); setSearchingState(false); } }, [props.suggestions]); @@ -658,63 +658,64 @@ AutoComplete.defaultProps = { __TYPE: 'AutoComplete', id: null, inputRef: null, - 'aria-label': null, - 'aria-labelledby': null, - appendTo: null, - autoFocus: false, + value: null, + name: null, + type: 'text', + suggestions: null, + field: null, + optionGroupLabel: null, + optionGroupChildren: null, + optionGroupTemplate: null, + forceSelection: false, autoHighlight: false, - className: null, - completeMethod: null, - delay: 300, - disabled: false, + virtualScrollerOptions: null, + scrollHeight: '200px', dropdown: false, - dropdownAutoFocus: true, - dropdownIcon: 'pi pi-chevron-down', dropdownMode: 'blank', - dropdownAriaLabel: null, - field: null, - forceSelection: false, - inputClassName: null, + dropdownAutoFocus: true, + multiple: false, + minLength: 1, + delay: 300, + style: null, + className: null, inputId: null, inputStyle: null, - itemTemplate: null, - maxLength: null, - minLength: 1, - multiple: false, - name: null, - onBlur: null, - onChange: null, - onClear: null, - onClick: null, - onContextMenu: null, - onDblClick: null, - onDropdownClick: null, - onFocus: null, - onHide: null, - onKeyPress: null, - onKeyUp: null, - onMouseDown: null, - onSelect: null, - onShow: null, - onUnselect: null, - optionGroupChildren: null, - optionGroupLabel: null, - optionGroupTemplate: null, + inputClassName: null, panelClassName: null, panelStyle: null, placeholder: null, readOnly: false, - removeIcon: 'pi pi-times-circle', - scrollHeight: '200px', - selectedItemTemplate: null, + disabled: false, + maxLength: null, size: null, - style: null, - suggestions: null, + appendTo: null, + showEmptyMessage: false, + emptyMessage: null, tabIndex: null, + autoFocus: false, tooltip: null, tooltipOptions: null, + completeMethod: null, + itemTemplate: null, + selectedItemTemplate: null, transitionOptions: null, - type: 'text', - value: null, - virtualScrollerOptions: null + dropdownIcon: 'pi pi-chevron-down', + removeIcon: 'pi pi-times-circle', + 'aria-label': null, + 'aria-labelledby': null, + onChange: null, + onFocus: null, + onBlur: null, + onSelect: null, + onUnselect: null, + onDropdownClick: null, + onClick: null, + onDblClick: null, + onMouseDown: null, + onKeyUp: null, + onKeyPress: null, + onContextMenu: null, + onClear: null, + onShow: null, + onHide: null }; diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js index 01d8432b59..7b7bcdf537 100644 --- a/components/lib/autocomplete/AutoCompletePanel.js +++ b/components/lib/autocomplete/AutoCompletePanel.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import { localeOption } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; @@ -46,7 +47,6 @@ export const AutoCompletePanel = React.memo( ); } else { const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion; - return (
  • props.onItemClick(e, suggestion)}> {content} @@ -61,6 +61,14 @@ export const AutoCompletePanel = React.memo( }; const createContent = () => { + if (props.showEmptyMessage && ObjectUtils.isEmpty(props.suggestions)) { + const emptyMessage = props.emptyMessage || localeOptions('emptyMessage'); + return ( +
      +
    • {emptyMessage}
      • +
    + ); + } if (props.virtualScrollerOptions) { const virtualScrollerProps = { ...props.virtualScrollerOptions, @@ -84,7 +92,6 @@ export const AutoCompletePanel = React.memo( return ; } else { const items = createItems(); - return (
      {items} diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts index b00a6c357e..c8dd9ca198 100755 --- a/components/lib/autocomplete/autocomplete.d.ts +++ b/components/lib/autocomplete/autocomplete.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; -import { CSSTransitionProps } from '../csstransition'; import TooltipOptions from '../tooltip/tooltipoptions'; +import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller'; +import { CSSTransitionProps } from '../csstransition'; import { IconType } from '../utils'; -import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller'; type AutoCompleteOptionGroupTemplateType = React.ReactNode | ((suggestion: any, index: number) => React.ReactNode); @@ -47,64 +47,65 @@ interface AutoCompleteCompleteMethodParams { export interface AutoCompleteProps extends Omit, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref'> { id?: string; + inputRef?: React.Ref; value?: any; - appendTo?: AutoCompleteAppendToType; - autoFocus?: boolean; + name?: string; + type?: string; + suggestions?: any[]; + field?: string; + optionGroupLabel?: string; + optionGroupChildren?: string; + optionGroupTemplate?: AutoCompleteOptionGroupTemplateType; + forceSelection?: boolean; autoHighlight?: boolean; - className?: string; - delay?: number; - disabled?: boolean; + virtualScrollerOptions?: VirtualScrollerProps; + scrollHeight?: string; dropdown?: boolean; - dropdownAutoFocus?: boolean; - dropdownIcon?: IconType; dropdownMode?: string; - dropdownAriaLabel?: string; - field?: string; - forceSelection?: boolean; - inputClassName?: string; + dropdownAutoFocus?: boolean; + multiple?: boolean; + minLength?: number; + delay?: number; + style?: object; + className?: string; inputId?: string; - inputRef?: React.Ref; inputStyle?: object; - itemTemplate?: AutoCompleteItemTemplateType; - maxLength?: number; - minLength?: number; - multiple?: boolean; - name?: string; - optionGroupChildren?: string; - optionGroupLabel?: string; - optionGroupTemplate?: AutoCompleteOptionGroupTemplateType; + inputClassName?: string; panelClassName?: string; panelStyle?: object; placeholder?: string; readOnly?: boolean; - removeIcon?: IconType; - scrollHeight?: string; - selectedItemTemplate?: AutoCompleteSelectedItemTemplateType; + disabled?: boolean; + showEmptyMessage?: boolean; + emptyMessage?: string; + maxLength?: number; size?: number; - style?: object; - suggestions?: any[]; + appendTo?: AutoCompleteAppendToType; tabIndex?: number; + autoFocus?: boolean; tooltip?: string; tooltipOptions?: TooltipOptions; - transitionOptions?: CSSTransitionProps; - type?: string; - virtualScrollerOptions?: VirtualScrollerProps; completeMethod?(e: AutoCompleteCompleteMethodParams): void; - onBlur?(event: React.FocusEvent): void; + itemTemplate?: AutoCompleteItemTemplateType; + selectedItemTemplate?: AutoCompleteSelectedItemTemplateType; + transitionOptions?: CSSTransitionProps; + dropdownIcon?: IconType; + removeIcon?: IconType; onChange?(e: AutoCompleteChangeParams): void; - onClear?(event: React.SyntheticEvent): void; + onFocus?(event: React.FocusEvent): void; + onBlur?(event: React.FocusEvent): void; + onSelect?(e: AutoCompleteSelectParams): void; + onUnselect?(e: AutoCompleteUnselectParams): void; + onDropdownClick?(e: AutoCompleteDropdownClickParams): void; onClick?(event: React.MouseEvent): void; - onContextMenu?(event: React.MouseEvent): void; onDblClick?(event: React.MouseEvent): void; - onDropdownClick?(e: AutoCompleteDropdownClickParams): void; - onFocus?(event: React.FocusEvent): void; - onHide?(): void; - onKeyPress?(event: React.KeyboardEvent): void; - onKeyUp?(event: React.KeyboardEvent): void; onMouseDown?(event: React.MouseEvent): void; - onSelect?(e: AutoCompleteSelectParams): void; + onKeyUp?(event: React.KeyboardEvent): void; + onKeyPress?(event: React.KeyboardEvent): void; + onContextMenu?(event: React.MouseEvent): void; + onClear?(event: React.SyntheticEvent): void; onShow?(): void; - onUnselect?(e: AutoCompleteUnselectParams): void; + onHide?(): void; children?: React.ReactNode; }