@mackin.com/styleguide 9.0.0 → 9.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +45 -5
- package/index.js +134 -5
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -150,12 +150,11 @@ interface ConfirmModalProps {
|
|
|
150
150
|
}
|
|
151
151
|
declare const ConfirmModal: (props: ConfirmModalProps) => JSX.Element;
|
|
152
152
|
|
|
153
|
-
interface CopyButtonProps {
|
|
153
|
+
interface CopyButtonProps extends Omit<ButtonProps, 'variant' | 'children'> {
|
|
154
154
|
/** HTML selector of the target input to copy from. */
|
|
155
155
|
selector: string;
|
|
156
|
-
title?: string;
|
|
157
156
|
}
|
|
158
|
-
declare const CopyButton:
|
|
157
|
+
declare const CopyButton: React.ForwardRefExoticComponent<Pick<CopyButtonProps, "round" | "rightIcon" | "leftIcon" | "iconBlock" | "small" | "readOnly" | "waiting" | "enforceMinWidth" | "controlAlign" | "key" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "selector"> & React.RefAttributes<HTMLButtonElement>>;
|
|
159
158
|
|
|
160
159
|
declare const Divider: (p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>) => JSX.Element;
|
|
161
160
|
|
|
@@ -999,7 +998,10 @@ interface ToggleButtonGroupProps {
|
|
|
999
998
|
}
|
|
1000
999
|
declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
|
|
1001
1000
|
|
|
1002
|
-
|
|
1001
|
+
interface TogglePasswordInputProps extends Omit<TextInputProps, 'type' | 'rightControl'> {
|
|
1002
|
+
onVisibilityChanged?: (visible: boolean) => void;
|
|
1003
|
+
}
|
|
1004
|
+
declare const TogglePasswordInput: React.ForwardRefExoticComponent<Pick<TogglePasswordInputProps, "value" | "round" | "wrapperClassName" | "showErrorDisplay" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "trim" | "emptyString" | "onValueChange" | "customError" | "patternErrorMessage" | "onVisibilityChanged"> & React.RefAttributes<HTMLInputElement>>;
|
|
1003
1005
|
|
|
1004
1006
|
declare const WaitingIndicator: (p: {
|
|
1005
1007
|
show: boolean;
|
|
@@ -1088,4 +1090,42 @@ declare const TabContainer: (p: TabContainerProps) => JSX.Element;
|
|
|
1088
1090
|
/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
|
|
1089
1091
|
declare const modalScrollFixClassName = "modal-scroll-fix";
|
|
1090
1092
|
|
|
1091
|
-
|
|
1093
|
+
interface AutoCompleteConfig {
|
|
1094
|
+
/** Number of characters entered before getOptions is called. Defaults to 3. */
|
|
1095
|
+
minChars?: number;
|
|
1096
|
+
/** Number of ms to debounce prior to calling getOptions on change. Defaults to no debounce. */
|
|
1097
|
+
debounceMs?: number;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
declare class AutocompleteController {
|
|
1101
|
+
constructor(getOptions: (value: string | undefined) => Promise<string[]>, config?: AutoCompleteConfig);
|
|
1102
|
+
get value(): string | undefined;
|
|
1103
|
+
get options(): string[];
|
|
1104
|
+
onChange(newValue: string | undefined): Promise<void>;
|
|
1105
|
+
onPick(newValue: string | undefined): void;
|
|
1106
|
+
private readonly getOptions;
|
|
1107
|
+
private readonly _minChars;
|
|
1108
|
+
private _value;
|
|
1109
|
+
private _options;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
/** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
|
|
1113
|
+
declare class AutocompleteEntityController<T extends string | number> {
|
|
1114
|
+
constructor(getOptions: (value: string | undefined) => Promise<Entity<T>[]>, config?: AutoCompleteConfig);
|
|
1115
|
+
get entity(): Entity<T> | undefined;
|
|
1116
|
+
get entities(): Entity<T>[];
|
|
1117
|
+
get value(): string | undefined;
|
|
1118
|
+
get options(): string[];
|
|
1119
|
+
onChange(newValue: string | undefined): Promise<void>;
|
|
1120
|
+
onPick(newValue: string | undefined): void;
|
|
1121
|
+
private _ctrl;
|
|
1122
|
+
private _pickedEntity;
|
|
1123
|
+
private _options;
|
|
1124
|
+
private trySyncCtrlOptions;
|
|
1125
|
+
}
|
|
1126
|
+
interface Entity<T extends string | number> {
|
|
1127
|
+
id: T;
|
|
1128
|
+
name: string;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteController, AutocompleteEntityController, AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, SliderProps, SliderValue, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
|
package/index.js
CHANGED
|
@@ -1741,11 +1741,15 @@ const ConfirmModal = (props) => {
|
|
|
1741
1741
|
React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, props.cancelText || 'Cancel')))));
|
|
1742
1742
|
};
|
|
1743
1743
|
|
|
1744
|
-
const CopyButton = (props) => {
|
|
1744
|
+
const CopyButton = React__namespace.forwardRef((props, ref) => {
|
|
1745
|
+
const buttonProps = __rest(props, ["selector"]);
|
|
1745
1746
|
const [copied, setCopied] = React__namespace.useState(false);
|
|
1746
|
-
return (React__namespace.createElement(Button, { title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur:
|
|
1747
|
+
return (React__namespace.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: e => {
|
|
1748
|
+
var _a;
|
|
1747
1749
|
setCopied(false);
|
|
1750
|
+
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
1748
1751
|
}, onClick: e => {
|
|
1752
|
+
var _a;
|
|
1749
1753
|
const button = e.currentTarget;
|
|
1750
1754
|
let copySuccess = false;
|
|
1751
1755
|
try {
|
|
@@ -1759,9 +1763,10 @@ const CopyButton = (props) => {
|
|
|
1759
1763
|
// You done wrong.
|
|
1760
1764
|
}
|
|
1761
1765
|
setCopied(copySuccess);
|
|
1762
|
-
|
|
1766
|
+
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
1767
|
+
} }),
|
|
1763
1768
|
React__namespace.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
|
|
1764
|
-
};
|
|
1769
|
+
});
|
|
1765
1770
|
|
|
1766
1771
|
const Divider = (p) => {
|
|
1767
1772
|
const theme = useThemeSafely();
|
|
@@ -4167,8 +4172,12 @@ const ToggleButtonGroup = (props) => {
|
|
|
4167
4172
|
};
|
|
4168
4173
|
|
|
4169
4174
|
const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
|
|
4175
|
+
const { onVisibilityChanged } = props, inputProps = __rest(props, ["onVisibilityChanged"]);
|
|
4170
4176
|
const [show, setShow] = React__namespace.useState(false);
|
|
4171
|
-
|
|
4177
|
+
useIgnoreMount(() => {
|
|
4178
|
+
onVisibilityChanged === null || onVisibilityChanged === void 0 ? void 0 : onVisibilityChanged(show);
|
|
4179
|
+
}, [show]);
|
|
4180
|
+
return (React__namespace.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
|
|
4172
4181
|
// small button is required here due to the icon pushing outside the boundries of the
|
|
4173
4182
|
// parent textbox. increasing the font size here to fill the small button.
|
|
4174
4183
|
fontSize: '1rem'
|
|
@@ -4646,8 +4655,128 @@ const TabContainer = (p) => {
|
|
|
4646
4655
|
}), p.contentClassName) }, p.tabs[tabIndex].getContent())));
|
|
4647
4656
|
};
|
|
4648
4657
|
|
|
4658
|
+
const defaultMinChars = 3;
|
|
4659
|
+
class AutocompleteController {
|
|
4660
|
+
constructor(getOptions, config) {
|
|
4661
|
+
var _a;
|
|
4662
|
+
this._value = undefined;
|
|
4663
|
+
this._options = [];
|
|
4664
|
+
this._minChars = (_a = config === null || config === void 0 ? void 0 : config.minChars) !== null && _a !== void 0 ? _a : defaultMinChars;
|
|
4665
|
+
if (config === null || config === void 0 ? void 0 : config.debounceMs) {
|
|
4666
|
+
this.getOptions = createDebouncedPromise(getOptions, config === null || config === void 0 ? void 0 : config.debounceMs);
|
|
4667
|
+
}
|
|
4668
|
+
else {
|
|
4669
|
+
this.getOptions = getOptions;
|
|
4670
|
+
}
|
|
4671
|
+
}
|
|
4672
|
+
get value() {
|
|
4673
|
+
return this._value;
|
|
4674
|
+
}
|
|
4675
|
+
get options() {
|
|
4676
|
+
return this._options;
|
|
4677
|
+
}
|
|
4678
|
+
async onChange(newValue) {
|
|
4679
|
+
// don't make getOptions calls if the value hasn't changed.
|
|
4680
|
+
if (newValue === this.value) {
|
|
4681
|
+
return;
|
|
4682
|
+
}
|
|
4683
|
+
// nullish should not make the getOptions call and instead clear everything.
|
|
4684
|
+
if (!newValue) {
|
|
4685
|
+
this._value = newValue;
|
|
4686
|
+
this._options = [];
|
|
4687
|
+
return;
|
|
4688
|
+
}
|
|
4689
|
+
// sub min chars should clear everything and not attempt the getOptions call.
|
|
4690
|
+
if (newValue.length < this._minChars) {
|
|
4691
|
+
this._value = newValue;
|
|
4692
|
+
this._options = [];
|
|
4693
|
+
return;
|
|
4694
|
+
}
|
|
4695
|
+
try {
|
|
4696
|
+
this._value = newValue;
|
|
4697
|
+
this._options = (await this.getOptions(newValue));
|
|
4698
|
+
}
|
|
4699
|
+
catch (err) {
|
|
4700
|
+
// this method will throw errors on debounce rejections. that is to be expected.
|
|
4701
|
+
// for actual getOptions exceptions, the owner of that function will need to handle errors.
|
|
4702
|
+
}
|
|
4703
|
+
}
|
|
4704
|
+
onPick(newValue) {
|
|
4705
|
+
this._value = newValue;
|
|
4706
|
+
this._options = [];
|
|
4707
|
+
}
|
|
4708
|
+
}
|
|
4709
|
+
const createDebouncedPromise = (originalFunction, trailingTimeoutMs) => {
|
|
4710
|
+
let timer;
|
|
4711
|
+
let onCancel;
|
|
4712
|
+
return (value) => {
|
|
4713
|
+
if (timer) {
|
|
4714
|
+
clearTimeout(timer);
|
|
4715
|
+
}
|
|
4716
|
+
if (onCancel) {
|
|
4717
|
+
onCancel('Promise cancelled due to in-progress debounce call.');
|
|
4718
|
+
onCancel = undefined;
|
|
4719
|
+
}
|
|
4720
|
+
return new Promise((res, rej) => {
|
|
4721
|
+
onCancel = rej;
|
|
4722
|
+
timer = setTimeout(() => {
|
|
4723
|
+
originalFunction(value)
|
|
4724
|
+
.then(values => {
|
|
4725
|
+
res(values);
|
|
4726
|
+
})
|
|
4727
|
+
.catch(err => {
|
|
4728
|
+
rej(err);
|
|
4729
|
+
})
|
|
4730
|
+
.finally(() => {
|
|
4731
|
+
clearTimeout(timer);
|
|
4732
|
+
});
|
|
4733
|
+
}, trailingTimeoutMs);
|
|
4734
|
+
});
|
|
4735
|
+
};
|
|
4736
|
+
};
|
|
4737
|
+
|
|
4738
|
+
/** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
|
|
4739
|
+
class AutocompleteEntityController {
|
|
4740
|
+
constructor(getOptions, config) {
|
|
4741
|
+
this._options = [];
|
|
4742
|
+
const getStringOptions = async (value) => {
|
|
4743
|
+
this._options = await getOptions(value);
|
|
4744
|
+
return this._options.map(o => o.name);
|
|
4745
|
+
};
|
|
4746
|
+
this._ctrl = new AutocompleteController(getStringOptions, config);
|
|
4747
|
+
}
|
|
4748
|
+
get entity() {
|
|
4749
|
+
return this._pickedEntity;
|
|
4750
|
+
}
|
|
4751
|
+
get entities() {
|
|
4752
|
+
return this._options;
|
|
4753
|
+
}
|
|
4754
|
+
get value() {
|
|
4755
|
+
return this._ctrl.value;
|
|
4756
|
+
}
|
|
4757
|
+
get options() {
|
|
4758
|
+
return this._options.map(o => o.name);
|
|
4759
|
+
}
|
|
4760
|
+
async onChange(newValue) {
|
|
4761
|
+
await this._ctrl.onChange(newValue);
|
|
4762
|
+
this.trySyncCtrlOptions();
|
|
4763
|
+
}
|
|
4764
|
+
onPick(newValue) {
|
|
4765
|
+
this._ctrl.onPick(newValue);
|
|
4766
|
+
this._pickedEntity = this._options.find(o => o.name === this._ctrl.value);
|
|
4767
|
+
this.trySyncCtrlOptions();
|
|
4768
|
+
}
|
|
4769
|
+
trySyncCtrlOptions() {
|
|
4770
|
+
if (!this._ctrl.options.length) {
|
|
4771
|
+
this._options = [];
|
|
4772
|
+
}
|
|
4773
|
+
}
|
|
4774
|
+
}
|
|
4775
|
+
|
|
4649
4776
|
exports.Accordian = Accordian;
|
|
4650
4777
|
exports.Autocomplete = Autocomplete;
|
|
4778
|
+
exports.AutocompleteController = AutocompleteController;
|
|
4779
|
+
exports.AutocompleteEntityController = AutocompleteEntityController;
|
|
4651
4780
|
exports.Backdrop = Backdrop$1;
|
|
4652
4781
|
exports.Backdrop2 = Backdrop;
|
|
4653
4782
|
exports.BoundMemoryPager = BoundMemoryPager;
|