@deephaven/components 0.17.1-beta.1 → 0.17.1-beta.4
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/dist/Button.d.ts +1 -1
- package/dist/DateInput.d.ts +12 -0
- package/dist/DateInput.d.ts.map +1 -0
- package/dist/DateInput.js +54 -0
- package/dist/DateInput.js.map +1 -0
- package/dist/DateInputUtils.d.ts +4 -0
- package/dist/DateInputUtils.d.ts.map +1 -0
- package/dist/DateInputUtils.js +40 -0
- package/dist/DateInputUtils.js.map +1 -0
- package/dist/DateTimeInput.d.ts +13 -0
- package/dist/DateTimeInput.d.ts.map +1 -0
- package/dist/DateTimeInput.js +69 -0
- package/dist/DateTimeInput.js.map +1 -0
- package/dist/MaskedInput.d.ts +17 -0
- package/dist/MaskedInput.d.ts.map +1 -1
- package/dist/MaskedInput.js +71 -13
- package/dist/MaskedInput.js.map +1 -1
- package/dist/SearchInput.d.ts +2 -0
- package/dist/SearchInput.d.ts.map +1 -1
- package/dist/SearchInput.js +4 -0
- package/dist/SearchInput.js.map +1 -1
- package/dist/SelectValueList.d.ts +5 -0
- package/dist/SelectValueList.d.ts.map +1 -1
- package/dist/SelectValueList.js +43 -9
- package/dist/SelectValueList.js.map +1 -1
- package/dist/index.d.ts +2 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -4
- package/dist/index.js.map +1 -1
- package/package.json +8 -9
package/dist/Button.d.ts
CHANGED
|
@@ -24,6 +24,6 @@ declare type IconOnlyButton = BaseButtonProps & {
|
|
|
24
24
|
icon: IconDefinition | JSX.Element;
|
|
25
25
|
children?: undefined;
|
|
26
26
|
};
|
|
27
|
-
declare const Button: React.ForwardRefExoticComponent<(Pick<ButtonWithChildren, "className" | "
|
|
27
|
+
declare const Button: React.ForwardRefExoticComponent<(Pick<ButtonWithChildren, "className" | "placeholder" | "value" | "onChange" | "onSelect" | "onFocus" | "onBlur" | "data-testid" | "key" | "form" | "slot" | "style" | "title" | "color" | "hidden" | "type" | "onKeyDown" | "onSelectCapture" | "dir" | "defaultChecked" | "defaultValue" | "disabled" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "children" | "tooltip" | "onClick" | "tabIndex" | "role" | "spellCheck" | "id" | "onMouseDown" | "onPaste" | "autoFocus" | "formEncType" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "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" | "kind" | "icon" | "variant" | "active"> | Pick<IconOnlyButton, "className" | "placeholder" | "value" | "onChange" | "onSelect" | "onFocus" | "onBlur" | "data-testid" | "key" | "form" | "slot" | "style" | "title" | "color" | "hidden" | "type" | "onKeyDown" | "onSelectCapture" | "dir" | "defaultChecked" | "defaultValue" | "disabled" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "children" | "tooltip" | "onClick" | "tabIndex" | "role" | "spellCheck" | "id" | "onMouseDown" | "onPaste" | "autoFocus" | "formEncType" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "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" | "kind" | "icon" | "variant" | "active">) & React.RefAttributes<HTMLButtonElement>>;
|
|
28
28
|
export default Button;
|
|
29
29
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type DateInputProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
onChange?(date?: string): void;
|
|
5
|
+
defaultValue?: string;
|
|
6
|
+
onFocus?(): void;
|
|
7
|
+
onBlur?(): void;
|
|
8
|
+
'data-testid'?: string;
|
|
9
|
+
};
|
|
10
|
+
declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
11
|
+
export default DateInput;
|
|
12
|
+
//# sourceMappingURL=DateInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../src/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,aAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,SAAS,yFA0Cd,CAAC;AAaF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { useCallback, useState } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import Log from '@deephaven/log';
|
|
4
|
+
import MaskedInput from "./MaskedInput.js";
|
|
5
|
+
import { getNextSegmentValue } from "./DateInputUtils.js";
|
|
6
|
+
var log = Log.module('DateInput');
|
|
7
|
+
var DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';
|
|
8
|
+
var EXAMPLES = ['2000-01-01', '2022-12-31'];
|
|
9
|
+
var DATE_FORMAT = 'YYYY-MM-DD';
|
|
10
|
+
var DateInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
11
|
+
var {
|
|
12
|
+
className = '',
|
|
13
|
+
onChange = () => undefined,
|
|
14
|
+
defaultValue = '',
|
|
15
|
+
onFocus = () => undefined,
|
|
16
|
+
onBlur = () => undefined,
|
|
17
|
+
'data-testid': dataTestId
|
|
18
|
+
} = props;
|
|
19
|
+
var [value, setValue] = useState(defaultValue);
|
|
20
|
+
var [selection, setSelection] = useState();
|
|
21
|
+
var handleChange = useCallback(newValue => {
|
|
22
|
+
log.debug('handleChange', newValue);
|
|
23
|
+
setValue(newValue);
|
|
24
|
+
onChange(newValue);
|
|
25
|
+
}, [onChange]);
|
|
26
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
className: "d-flex flex-row align-items-center"
|
|
28
|
+
}, /*#__PURE__*/React.createElement(MaskedInput, {
|
|
29
|
+
ref: ref,
|
|
30
|
+
className: classNames(className),
|
|
31
|
+
example: EXAMPLES,
|
|
32
|
+
getNextSegmentValue: getNextSegmentValue,
|
|
33
|
+
onChange: handleChange,
|
|
34
|
+
onSelect: setSelection,
|
|
35
|
+
pattern: DATE_PATTERN,
|
|
36
|
+
placeholder: DATE_FORMAT,
|
|
37
|
+
selection: selection,
|
|
38
|
+
value: value,
|
|
39
|
+
onFocus: onFocus,
|
|
40
|
+
onBlur: onBlur,
|
|
41
|
+
"data-testid": dataTestId
|
|
42
|
+
}));
|
|
43
|
+
});
|
|
44
|
+
DateInput.displayName = 'DateInput';
|
|
45
|
+
DateInput.defaultProps = {
|
|
46
|
+
className: '',
|
|
47
|
+
onChange: () => false,
|
|
48
|
+
defaultValue: '',
|
|
49
|
+
onFocus: () => false,
|
|
50
|
+
onBlur: () => false,
|
|
51
|
+
'data-testid': undefined
|
|
52
|
+
};
|
|
53
|
+
export default DateInput;
|
|
54
|
+
//# sourceMappingURL=DateInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateInput.js","names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","log","module","DATE_PATTERN","EXAMPLES","DATE_FORMAT","DateInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","dataTestId","value","setValue","selection","setSelection","handleChange","newValue","debug","displayName","defaultProps"],"sources":["../src/DateInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { getNextSegmentValue } from './DateInputUtils';\n\nconst log = Log.module('DateInput');\n\nconst DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';\nconst EXAMPLES = ['2000-01-01', '2022-12-31'];\nconst DATE_FORMAT = 'YYYY-MM-DD';\n\ntype DateInputProps = {\n className?: string;\n onChange?(date?: string): void;\n defaultValue?: string;\n onFocus?(): void;\n onBlur?(): void;\n 'data-testid'?: string;\n};\n\nconst DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n (props: DateInputProps, ref) => {\n const {\n className = '',\n onChange = () => undefined,\n defaultValue = '',\n onFocus = () => undefined,\n onBlur = () => undefined,\n 'data-testid': dataTestId,\n } = props;\n const [value, setValue] = useState(defaultValue);\n const [selection, setSelection] = useState<SelectionSegment>();\n\n const handleChange = useCallback(\n (newValue: string): void => {\n log.debug('handleChange', newValue);\n setValue(newValue);\n onChange(newValue);\n },\n [onChange]\n );\n\n return (\n <div className=\"d-flex flex-row align-items-center\">\n <MaskedInput\n ref={ref}\n className={classNames(className)}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n onChange={handleChange}\n onSelect={setSelection}\n pattern={DATE_PATTERN}\n placeholder={DATE_FORMAT}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n </div>\n );\n }\n);\n\nDateInput.displayName = 'DateInput';\n\nDateInput.defaultProps = {\n className: '',\n onChange: () => false,\n defaultValue: '',\n onFocus: () => false,\n onBlur: () => false,\n 'data-testid': undefined,\n};\n\nexport default DateInput;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,QAA7B,QAA6C,OAA7C;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;OACOC,W;SACEC,mB;AAET,IAAMC,GAAG,GAAGH,GAAG,CAACI,MAAJ,CAAW,WAAX,CAAZ;AAEA,IAAMC,YAAY,GAAG,yDAArB;AACA,IAAMC,QAAQ,GAAG,CAAC,YAAD,EAAe,YAAf,CAAjB;AACA,IAAMC,WAAW,GAAG,YAApB;AAWA,IAAMC,SAAS,gBAAGZ,KAAK,CAACa,UAAN,CAChB,CAACC,KAAD,EAAwBC,GAAxB,KAAgC;EAC9B,IAAM;IACJC,SAAS,GAAG,EADR;IAEJC,QAAQ,GAAG,MAAMC,SAFb;IAGJC,YAAY,GAAG,EAHX;IAIJC,OAAO,GAAG,MAAMF,SAJZ;IAKJG,MAAM,GAAG,MAAMH,SALX;IAMJ,eAAeI;EANX,IAOFR,KAPJ;EAQA,IAAM,CAACS,KAAD,EAAQC,QAAR,IAAoBtB,QAAQ,CAACiB,YAAD,CAAlC;EACA,IAAM,CAACM,SAAD,EAAYC,YAAZ,IAA4BxB,QAAQ,EAA1C;EAEA,IAAMyB,YAAY,GAAG1B,WAAW,CAC7B2B,QAAD,IAA4B;IAC1BrB,GAAG,CAACsB,KAAJ,CAAU,cAAV,EAA0BD,QAA1B;IACAJ,QAAQ,CAACI,QAAD,CAAR;IACAX,QAAQ,CAACW,QAAD,CAAR;EACD,CAL6B,EAM9B,CAACX,QAAD,CAN8B,CAAhC;EASA,oBACE;IAAK,SAAS,EAAC;EAAf,gBACE,oBAAC,WAAD;IACE,GAAG,EAAEF,GADP;IAEE,SAAS,EAAEZ,UAAU,CAACa,SAAD,CAFvB;IAGE,OAAO,EAAEN,QAHX;IAIE,mBAAmB,EAAEJ,mBAJvB;IAKE,QAAQ,EAAEqB,YALZ;IAME,QAAQ,EAAED,YANZ;IAOE,OAAO,EAAEjB,YAPX;IAQE,WAAW,EAAEE,WARf;IASE,SAAS,EAAEc,SATb;IAUE,KAAK,EAAEF,KAVT;IAWE,OAAO,EAAEH,OAXX;IAYE,MAAM,EAAEC,MAZV;IAaE,eAAaC;EAbf,EADF,CADF;AAmBD,CAzCe,CAAlB;AA4CAV,SAAS,CAACkB,WAAV,GAAwB,WAAxB;AAEAlB,SAAS,CAACmB,YAAV,GAAyB;EACvBf,SAAS,EAAE,EADY;EAEvBC,QAAQ,EAAE,MAAM,KAFO;EAGvBE,YAAY,EAAE,EAHS;EAIvBC,OAAO,EAAE,MAAM,KAJQ;EAKvBC,MAAM,EAAE,MAAM,KALS;EAMvB,eAAeH;AANQ,CAAzB;AASA,eAAeN,SAAf"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { SelectionSegment } from './MaskedInput';
|
|
2
|
+
export declare function getNextNumberSegmentValue(delta: number, segmentValue: string, lowerBound: number, upperBound: number, length: number): string;
|
|
3
|
+
export declare function getNextSegmentValue(range: SelectionSegment, delta: number, segmentValue: string): string;
|
|
4
|
+
//# sourceMappingURL=DateInputUtils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateInputUtils.d.ts","sourceRoot":"","sources":["../src/DateInputUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,GACb,MAAM,CAQR;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,gBAAgB,EACvB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,GACnB,MAAM,CAyBR"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export function getNextNumberSegmentValue(delta, segmentValue, lowerBound, upperBound, length) {
|
|
2
|
+
var modValue = upperBound - lowerBound + 1;
|
|
3
|
+
var newSegmentValue = ((parseInt(segmentValue, 10) - delta - lowerBound) % modValue + modValue) % modValue + lowerBound;
|
|
4
|
+
return "".concat(newSegmentValue).padStart(length, '0');
|
|
5
|
+
}
|
|
6
|
+
export function getNextSegmentValue(range, delta, segmentValue) {
|
|
7
|
+
var {
|
|
8
|
+
selectionStart
|
|
9
|
+
} = range;
|
|
10
|
+
|
|
11
|
+
if (selectionStart === 0) {
|
|
12
|
+
return getNextNumberSegmentValue(delta, segmentValue, 1900, 2099, 4);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
if (selectionStart === 5) {
|
|
16
|
+
return getNextNumberSegmentValue(delta, segmentValue, 1, 12, 2);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if (selectionStart === 8) {
|
|
20
|
+
return getNextNumberSegmentValue(delta, segmentValue, 1, 31, 2);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
if (selectionStart === 11) {
|
|
24
|
+
// Hours input
|
|
25
|
+
return getNextNumberSegmentValue(delta, segmentValue, 0, 23, 2);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
if (selectionStart === 17 || selectionStart === 14) {
|
|
29
|
+
// Minutes/seconds input
|
|
30
|
+
return getNextNumberSegmentValue(delta, segmentValue, 0, 59, 2);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (selectionStart === 20 || selectionStart === 24 || selectionStart === 28) {
|
|
34
|
+
// Milli, micro, and nanosecond input
|
|
35
|
+
return getNextNumberSegmentValue(delta, segmentValue, 0, 999, 3);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return segmentValue;
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=DateInputUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateInputUtils.js","names":["getNextNumberSegmentValue","delta","segmentValue","lowerBound","upperBound","length","modValue","newSegmentValue","parseInt","padStart","getNextSegmentValue","range","selectionStart"],"sources":["../src/DateInputUtils.ts"],"sourcesContent":["import { SelectionSegment } from './MaskedInput';\n\nexport function getNextNumberSegmentValue(\n delta: number,\n segmentValue: string,\n lowerBound: number,\n upperBound: number,\n length: number\n): string {\n const modValue = upperBound - lowerBound + 1;\n const newSegmentValue =\n ((((parseInt(segmentValue, 10) - delta - lowerBound) % modValue) +\n modValue) %\n modValue) +\n lowerBound;\n return `${newSegmentValue}`.padStart(length, '0');\n}\n\nexport function getNextSegmentValue(\n range: SelectionSegment,\n delta: number,\n segmentValue: string\n): string {\n const { selectionStart } = range;\n if (selectionStart === 0) {\n return getNextNumberSegmentValue(delta, segmentValue, 1900, 2099, 4);\n }\n if (selectionStart === 5) {\n return getNextNumberSegmentValue(delta, segmentValue, 1, 12, 2);\n }\n if (selectionStart === 8) {\n return getNextNumberSegmentValue(delta, segmentValue, 1, 31, 2);\n }\n if (selectionStart === 11) {\n // Hours input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 23, 2);\n }\n if (selectionStart === 17 || selectionStart === 14) {\n // Minutes/seconds input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 59, 2);\n }\n if (selectionStart === 20 || selectionStart === 24 || selectionStart === 28) {\n // Milli, micro, and nanosecond input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 999, 3);\n }\n\n return segmentValue;\n}\n"],"mappings":"AAEA,OAAO,SAASA,yBAAT,CACLC,KADK,EAELC,YAFK,EAGLC,UAHK,EAILC,UAJK,EAKLC,MALK,EAMG;EACR,IAAMC,QAAQ,GAAGF,UAAU,GAAGD,UAAb,GAA0B,CAA3C;EACA,IAAMI,eAAe,GAClB,CAAE,CAACC,QAAQ,CAACN,YAAD,EAAe,EAAf,CAAR,GAA6BD,KAA7B,GAAqCE,UAAtC,IAAoDG,QAArD,GACAA,QADD,IAECA,QAFF,GAGAH,UAJF;EAKA,OAAO,UAAGI,eAAH,EAAqBE,QAArB,CAA8BJ,MAA9B,EAAsC,GAAtC,CAAP;AACD;AAED,OAAO,SAASK,mBAAT,CACLC,KADK,EAELV,KAFK,EAGLC,YAHK,EAIG;EACR,IAAM;IAAEU;EAAF,IAAqBD,KAA3B;;EACA,IAAIC,cAAc,KAAK,CAAvB,EAA0B;IACxB,OAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,IAAtB,EAA4B,IAA5B,EAAkC,CAAlC,CAAhC;EACD;;EACD,IAAIU,cAAc,KAAK,CAAvB,EAA0B;IACxB,OAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,EAAzB,EAA6B,CAA7B,CAAhC;EACD;;EACD,IAAIU,cAAc,KAAK,CAAvB,EAA0B;IACxB,OAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,EAAzB,EAA6B,CAA7B,CAAhC;EACD;;EACD,IAAIU,cAAc,KAAK,EAAvB,EAA2B;IACzB;IACA,OAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,EAAzB,EAA6B,CAA7B,CAAhC;EACD;;EACD,IAAIU,cAAc,KAAK,EAAnB,IAAyBA,cAAc,KAAK,EAAhD,EAAoD;IAClD;IACA,OAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,EAAzB,EAA6B,CAA7B,CAAhC;EACD;;EACD,IAAIU,cAAc,KAAK,EAAnB,IAAyBA,cAAc,KAAK,EAA5C,IAAkDA,cAAc,KAAK,EAAzE,EAA6E;IAC3E;IACA,OAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,GAAzB,EAA8B,CAA9B,CAAhC;EACD;;EAED,OAAOA,YAAP;AACD"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type DateTimeInputProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
onChange?(value?: string): void;
|
|
5
|
+
defaultValue?: string;
|
|
6
|
+
onFocus?(): void;
|
|
7
|
+
onBlur?(): void;
|
|
8
|
+
'data-testid'?: string;
|
|
9
|
+
};
|
|
10
|
+
export declare function addSeparators(value: string): string;
|
|
11
|
+
declare const DateTimeInput: React.ForwardRefExoticComponent<DateTimeInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
12
|
+
export default DateTimeInput;
|
|
13
|
+
//# sourceMappingURL=DateTimeInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../src/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAkBrD,aAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKnD;AAMD,QAAA,MAAM,aAAa,6FA4ClB,CAAC;AAaF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React, { useCallback, useState } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import Log from '@deephaven/log';
|
|
4
|
+
import MaskedInput from "./MaskedInput.js";
|
|
5
|
+
import { getNextSegmentValue } from "./DateInputUtils.js";
|
|
6
|
+
var log = Log.module('DateTimeInput'); // This could be more restrictive and restrict days to the number of days in the month...
|
|
7
|
+
// But then gotta take leap year into account and everything.
|
|
8
|
+
|
|
9
|
+
var DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])'; // Put zero width spaces in the nanosecond part of the date to allow jumping between segments
|
|
10
|
+
|
|
11
|
+
var TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\\.[0-9]{3}\u200B[0-9]{3}\u200B[0-9]{3}';
|
|
12
|
+
var FULL_DATE_PATTERN = "".concat(DATE_PATTERN, " ").concat(TIME_PATTERN);
|
|
13
|
+
var DEFAULT_VALUE_STRING = '2022-01-01 00:00:00.000000000';
|
|
14
|
+
var FULL_DATE_FORMAT = 'YYYY-MM-DD HH:MM:SS.SSSSSSSSS';
|
|
15
|
+
export function addSeparators(value) {
|
|
16
|
+
var dateTimeMillis = value.substring(0, 23);
|
|
17
|
+
var micros = value.substring(23, 26);
|
|
18
|
+
var nanos = value.substring(26);
|
|
19
|
+
return [dateTimeMillis, micros, nanos].filter(v => v !== '').join('\u200B');
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
var removeSeparators = value => value.replace(/\u200B/g, '');
|
|
23
|
+
|
|
24
|
+
var EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];
|
|
25
|
+
var DateTimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
26
|
+
var {
|
|
27
|
+
className = '',
|
|
28
|
+
onChange = () => undefined,
|
|
29
|
+
defaultValue = '',
|
|
30
|
+
onFocus = () => undefined,
|
|
31
|
+
onBlur = () => undefined,
|
|
32
|
+
'data-testid': dataTestId
|
|
33
|
+
} = props;
|
|
34
|
+
var [value, setValue] = useState(defaultValue.length > 0 ? addSeparators(defaultValue) : '');
|
|
35
|
+
var [selection, setSelection] = useState();
|
|
36
|
+
var handleChange = useCallback(newValue => {
|
|
37
|
+
log.debug('handleChange', newValue);
|
|
38
|
+
setValue(newValue);
|
|
39
|
+
onChange(removeSeparators(newValue));
|
|
40
|
+
}, [onChange]);
|
|
41
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
className: "d-flex flex-row align-items-center"
|
|
43
|
+
}, /*#__PURE__*/React.createElement(MaskedInput, {
|
|
44
|
+
ref: ref,
|
|
45
|
+
className: classNames(className),
|
|
46
|
+
example: EXAMPLES,
|
|
47
|
+
getNextSegmentValue: getNextSegmentValue,
|
|
48
|
+
onChange: handleChange,
|
|
49
|
+
onSelect: setSelection,
|
|
50
|
+
pattern: FULL_DATE_PATTERN,
|
|
51
|
+
placeholder: FULL_DATE_FORMAT,
|
|
52
|
+
selection: selection,
|
|
53
|
+
value: value,
|
|
54
|
+
onFocus: onFocus,
|
|
55
|
+
onBlur: onBlur,
|
|
56
|
+
"data-testid": dataTestId
|
|
57
|
+
}));
|
|
58
|
+
});
|
|
59
|
+
DateTimeInput.displayName = 'DateTimeInput';
|
|
60
|
+
DateTimeInput.defaultProps = {
|
|
61
|
+
className: '',
|
|
62
|
+
onChange: () => undefined,
|
|
63
|
+
defaultValue: '',
|
|
64
|
+
onFocus: () => undefined,
|
|
65
|
+
onBlur: () => undefined,
|
|
66
|
+
'data-testid': undefined
|
|
67
|
+
};
|
|
68
|
+
export default DateTimeInput;
|
|
69
|
+
//# sourceMappingURL=DateTimeInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateTimeInput.js","names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","log","module","DATE_PATTERN","TIME_PATTERN","FULL_DATE_PATTERN","DEFAULT_VALUE_STRING","FULL_DATE_FORMAT","addSeparators","value","dateTimeMillis","substring","micros","nanos","filter","v","join","removeSeparators","replace","EXAMPLES","DateTimeInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","dataTestId","setValue","length","selection","setSelection","handleChange","newValue","debug","displayName","defaultProps"],"sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { getNextSegmentValue } from './DateInputUtils';\n\nconst log = Log.module('DateTimeInput');\n\n// This could be more restrictive and restrict days to the number of days in the month...\n// But then gotta take leap year into account and everything.\nconst DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';\n// Put zero width spaces in the nanosecond part of the date to allow jumping between segments\nconst TIME_PATTERN =\n '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\\\\.[0-9]{3}\\u200B[0-9]{3}\\u200B[0-9]{3}';\nconst FULL_DATE_PATTERN = `${DATE_PATTERN} ${TIME_PATTERN}`;\nconst DEFAULT_VALUE_STRING = '2022-01-01 00:00:00.000000000';\nconst FULL_DATE_FORMAT = 'YYYY-MM-DD HH:MM:SS.SSSSSSSSS';\n\ntype DateTimeInputProps = {\n className?: string;\n onChange?(value?: string): void;\n defaultValue?: string;\n onFocus?(): void;\n onBlur?(): void;\n 'data-testid'?: string;\n};\n\nexport function addSeparators(value: string): string {\n const dateTimeMillis = value.substring(0, 23);\n const micros = value.substring(23, 26);\n const nanos = value.substring(26);\n return [dateTimeMillis, micros, nanos].filter(v => v !== '').join('\\u200B');\n}\n\nconst removeSeparators = (value: string) => value.replace(/\\u200B/g, '');\n\nconst EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];\n\nconst DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(\n (props: DateTimeInputProps, ref) => {\n const {\n className = '',\n onChange = () => undefined,\n defaultValue = '',\n onFocus = () => undefined,\n onBlur = () => undefined,\n 'data-testid': dataTestId,\n } = props;\n const [value, setValue] = useState(\n defaultValue.length > 0 ? addSeparators(defaultValue) : ''\n );\n const [selection, setSelection] = useState<SelectionSegment>();\n\n const handleChange = useCallback(\n (newValue: string): void => {\n log.debug('handleChange', newValue);\n setValue(newValue);\n onChange(removeSeparators(newValue));\n },\n [onChange]\n );\n\n return (\n <div className=\"d-flex flex-row align-items-center\">\n <MaskedInput\n ref={ref}\n className={classNames(className)}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n onChange={handleChange}\n onSelect={setSelection}\n pattern={FULL_DATE_PATTERN}\n placeholder={FULL_DATE_FORMAT}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n </div>\n );\n }\n);\n\nDateTimeInput.displayName = 'DateTimeInput';\n\nDateTimeInput.defaultProps = {\n className: '',\n onChange: () => undefined,\n defaultValue: '',\n onFocus: () => undefined,\n onBlur: () => undefined,\n 'data-testid': undefined,\n};\n\nexport default DateTimeInput;\n"],"mappings":"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"}
|
package/dist/MaskedInput.d.ts
CHANGED
|
@@ -6,6 +6,21 @@ declare const SELECTION_DIRECTION: {
|
|
|
6
6
|
readonly NONE: "none";
|
|
7
7
|
};
|
|
8
8
|
export declare function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(value: string, replaceIndex: number, newChar: string): string;
|
|
9
|
+
/**
|
|
10
|
+
* Fill the string on the right side with the example value to the given length
|
|
11
|
+
* @param checkValue Initial string to pad
|
|
12
|
+
* @param exampleValue Example value
|
|
13
|
+
* @param length Target length
|
|
14
|
+
* @returns String padded with the given example value
|
|
15
|
+
*/
|
|
16
|
+
export declare function fillToLength(checkValue: string, exampleValue: string, length: number): string;
|
|
17
|
+
/**
|
|
18
|
+
* Trim all characters matching the empty mask on the right side of the given value
|
|
19
|
+
* @param value String to trim
|
|
20
|
+
* @param emptyMask Empty mask
|
|
21
|
+
* @returns Trimmed string
|
|
22
|
+
*/
|
|
23
|
+
export declare function trimTrailingMask(value: string, emptyMask: string): string;
|
|
9
24
|
export declare type SelectionSegment = {
|
|
10
25
|
selectionStart: number;
|
|
11
26
|
selectionEnd: number;
|
|
@@ -16,6 +31,8 @@ declare type MaskedInputProps = {
|
|
|
16
31
|
className?: string;
|
|
17
32
|
/** The regex pattern this masked input must match */
|
|
18
33
|
pattern: string;
|
|
34
|
+
/** Input placeholder */
|
|
35
|
+
placeholder?: string;
|
|
19
36
|
/** The current value to display */
|
|
20
37
|
value: string;
|
|
21
38
|
/** One or more examples of valid values. Used when deciding if next keystroke is valid (as rest of the current value may be incomplete) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaskedInput.d.ts","sourceRoot":"","sources":["../src/MaskedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAI/D,OAAO,oBAAoB,CAAC;AAI5B,QAAA,MAAM,mBAAmB;;;;CAIf,CAAC;AAQX,wBAAgB,wCAAwC,CACtD,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,GACd,MAAM,CAMR;AAED,oBAAY,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;CACnF,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2IAA2I;IAC3I,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,iDAAiD;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6EAA6E;IAC7E,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,oCAAoC;IACpC,QAAQ,CAAC,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC3C,qDAAqD;IACrD,mBAAmB,CAAC,CAClB,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC;IACV,6BAA6B,CAAC,CAC5B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,GACnB,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAEjC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AAIH,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"MaskedInput.d.ts","sourceRoot":"","sources":["../src/MaskedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAI/D,OAAO,oBAAoB,CAAC;AAI5B,QAAA,MAAM,mBAAmB;;;;CAIf,CAAC;AAQX,wBAAgB,wCAAwC,CACtD,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,GACd,MAAM,CAMR;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE,MAAM,GACb,MAAM,CAIR;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAUzE;AAED,oBAAY,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;CACnF,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2IAA2I;IAC3I,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,iDAAiD;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6EAA6E;IAC7E,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,oCAAoC;IACpC,QAAQ,CAAC,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC3C,qDAAqD;IACrD,mBAAmB,CAAC,CAClB,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC;IACV,6BAA6B,CAAC,CAC5B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,GACnB,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAEjC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AAIH,QAAA,MAAM,WAAW,2FAwdhB,CAAC;AAuBF,eAAe,WAAW,CAAC"}
|
package/dist/MaskedInput.js
CHANGED
|
@@ -24,6 +24,39 @@ var FIXED_WIDTH_SPACE = '\u2007';
|
|
|
24
24
|
export function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(value, replaceIndex, newChar) {
|
|
25
25
|
return value.substring(0, replaceIndex) + newChar + value.substring(replaceIndex + 1);
|
|
26
26
|
}
|
|
27
|
+
/**
|
|
28
|
+
* Fill the string on the right side with the example value to the given length
|
|
29
|
+
* @param checkValue Initial string to pad
|
|
30
|
+
* @param exampleValue Example value
|
|
31
|
+
* @param length Target length
|
|
32
|
+
* @returns String padded with the given example value
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
export function fillToLength(checkValue, exampleValue, length) {
|
|
36
|
+
return checkValue.length < length ? "".concat(checkValue).concat(exampleValue.substring(checkValue.length, length)) : checkValue;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Trim all characters matching the empty mask on the right side of the given value
|
|
40
|
+
* @param value String to trim
|
|
41
|
+
* @param emptyMask Empty mask
|
|
42
|
+
* @returns Trimmed string
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
export function trimTrailingMask(value, emptyMask) {
|
|
46
|
+
var {
|
|
47
|
+
length
|
|
48
|
+
} = value;
|
|
49
|
+
|
|
50
|
+
for (var i = value.length - 1; i >= 0; i -= 1) {
|
|
51
|
+
if (emptyMask[i] === value[i]) {
|
|
52
|
+
length = i;
|
|
53
|
+
} else {
|
|
54
|
+
break;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
return value.substring(0, length);
|
|
59
|
+
}
|
|
27
60
|
|
|
28
61
|
/**
|
|
29
62
|
* A masked input for entering data from a template.
|
|
@@ -41,6 +74,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
41
74
|
onChange = () => false,
|
|
42
75
|
onSelect = () => false,
|
|
43
76
|
pattern,
|
|
77
|
+
placeholder,
|
|
44
78
|
selection,
|
|
45
79
|
value,
|
|
46
80
|
onFocus = () => false,
|
|
@@ -49,6 +83,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
49
83
|
} = props;
|
|
50
84
|
var input = useForwardedRef(ref);
|
|
51
85
|
var examples = useMemo(() => Array.isArray(example) ? example : [example], [example]);
|
|
86
|
+
var emptyMask = useMemo(() => examples[0].replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE), [examples]);
|
|
52
87
|
useEffect(function setSelectedSegment() {
|
|
53
88
|
if (selection != null) {
|
|
54
89
|
var _input$current;
|
|
@@ -129,7 +164,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
129
164
|
|
|
130
165
|
function isValid(checkValue) {
|
|
131
166
|
var cursorPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : checkValue.length;
|
|
132
|
-
var patternRegex = new RegExp(pattern);
|
|
167
|
+
var patternRegex = new RegExp("^".concat(pattern, "$"));
|
|
133
168
|
|
|
134
169
|
if (patternRegex.test(checkValue)) {
|
|
135
170
|
return true;
|
|
@@ -303,13 +338,31 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
303
338
|
|
|
304
339
|
if (key === 'Delete' || key === 'Backspace') {
|
|
305
340
|
event.preventDefault();
|
|
306
|
-
event.stopPropagation();
|
|
341
|
+
event.stopPropagation(); // Deleting at the end of the value
|
|
342
|
+
|
|
343
|
+
if (selectionEnd >= trimTrailingMask(value, emptyMask).length) {
|
|
344
|
+
var newValue = value.substring(0, // Delete whole selection or just the char before the cursor
|
|
345
|
+
selectionStart === selectionEnd ? selectionStart - 1 : selectionStart);
|
|
346
|
+
var trimmedValue = trimTrailingMask(newValue, emptyMask);
|
|
347
|
+
|
|
348
|
+
if (trimmedValue !== value) {
|
|
349
|
+
onChange(trimmedValue);
|
|
350
|
+
onSelect({
|
|
351
|
+
selectionStart: trimmedValue.length,
|
|
352
|
+
selectionEnd: trimmedValue.length,
|
|
353
|
+
selectionDirection: SELECTION_DIRECTION.NONE
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
return;
|
|
358
|
+
}
|
|
307
359
|
|
|
308
360
|
if (selectionStart !== selectionEnd) {
|
|
309
361
|
// Replace all non-masked characters with blanks, set selection to start
|
|
310
|
-
var
|
|
311
|
-
|
|
312
|
-
|
|
362
|
+
var _newValue = value.substring(0, selectionStart) + value.substring(selectionStart, selectionEnd).replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) + value.substring(selectionEnd);
|
|
363
|
+
|
|
364
|
+
log.debug('Range ', selectionStart, selectionEnd, 'deleted, setting value', _newValue);
|
|
365
|
+
onChange(_newValue);
|
|
313
366
|
onSelect({
|
|
314
367
|
selectionStart,
|
|
315
368
|
selectionEnd: selectionStart,
|
|
@@ -318,10 +371,10 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
318
371
|
} else if (selectionStart > 0) {
|
|
319
372
|
for (var i = selectionStart - 1; i >= 0; i -= 1) {
|
|
320
373
|
// Only replace non placeholder text
|
|
321
|
-
var
|
|
374
|
+
var _newValue2 = value.substring(0, i) + value.substring(i, selectionStart).replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) + value.substring(selectionStart);
|
|
322
375
|
|
|
323
|
-
if (
|
|
324
|
-
onChange(
|
|
376
|
+
if (_newValue2 !== value) {
|
|
377
|
+
onChange(_newValue2);
|
|
325
378
|
onSelect({
|
|
326
379
|
selectionStart: i,
|
|
327
380
|
selectionEnd: i,
|
|
@@ -347,12 +400,15 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
347
400
|
for (var _i2 = 0; _i2 < newChars.length; _i2 += 1) {
|
|
348
401
|
var newChar = newChars[_i2]; // If they're typing an alphanumeric character, be smart and allow it to jump ahead
|
|
349
402
|
|
|
350
|
-
var maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar) ?
|
|
403
|
+
var maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar) ? examples[0].length - 1 : selectionStart;
|
|
351
404
|
|
|
352
405
|
for (var _replaceIndex = selectionStart; _replaceIndex <= maxReplaceIndex; _replaceIndex += 1) {
|
|
353
|
-
|
|
406
|
+
// Fill with the example chars if necessary
|
|
407
|
+
var filledValue = fillToLength(value, examples[0], _replaceIndex + 1);
|
|
408
|
+
|
|
409
|
+
var _newValue3 = getPreferredReplacementString(filledValue, _replaceIndex, newChar, selectionStart, selectionEnd);
|
|
354
410
|
|
|
355
|
-
if (isValid(
|
|
411
|
+
if (isValid(_newValue3, _replaceIndex + 1)) {
|
|
356
412
|
var currentSegment = getSegment(_replaceIndex);
|
|
357
413
|
var newSelectionStart = _replaceIndex + 1;
|
|
358
414
|
var newSelection = {
|
|
@@ -369,8 +425,8 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
369
425
|
}
|
|
370
426
|
}
|
|
371
427
|
|
|
372
|
-
log.debug('handleKeyDown', key, '=>',
|
|
373
|
-
onChange(
|
|
428
|
+
log.debug('handleKeyDown', key, '=>', _newValue3, newSelection);
|
|
429
|
+
onChange(_newValue3);
|
|
374
430
|
onSelect(newSelection);
|
|
375
431
|
return;
|
|
376
432
|
}
|
|
@@ -384,6 +440,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
384
440
|
className: classNames('form-control masked-input', className),
|
|
385
441
|
type: "text",
|
|
386
442
|
pattern: pattern,
|
|
443
|
+
placeholder: placeholder,
|
|
387
444
|
value: value,
|
|
388
445
|
onChange: () => undefined,
|
|
389
446
|
onKeyDown: handleKeyDown,
|
|
@@ -396,6 +453,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
396
453
|
});
|
|
397
454
|
MaskedInput.defaultProps = {
|
|
398
455
|
className: '',
|
|
456
|
+
placeholder: undefined,
|
|
399
457
|
|
|
400
458
|
onChange() {// no-op
|
|
401
459
|
},
|
package/dist/MaskedInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaskedInput.js","names":["React","useMemo","useEffect","useCallback","classNames","Log","useForwardedRef","log","module","SELECTION_DIRECTION","FORWARD","BACKWARD","NONE","FIXED_WIDTH_SPACE","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","value","replaceIndex","newChar","substring","MaskedInput","forwardRef","props","ref","className","example","getNextSegmentValue","range","delta","segmentValue","getPreferredReplacementString","onChange","onSelect","pattern","selection","onFocus","onBlur","dataTestId","input","examples","Array","isArray","setSelectedSegment","debug","selectionStart","selectionEnd","selectionDirection","current","setSelectionRange","getSegment","cursorPosition","testValue","length","i","test","charAt","fillValue","checkValue","exampleValue","filledValue","concat","isValid","patternRegex","RegExp","nextSegment","position","currentSegment","nextPosition","previousSegment","previousPosition","nextSegmentValue","segment","newSegmentValue","newValue","handleSelect","event","target","error","debug2","nativeEvent","type","newSelection","handleSelectCapture","preventDefault","stopPropagation","handleArrowKey","key","handleKeyDown","startsWith","replace","altKey","metaKey","ctrlKey","newChars","from","Set","toUpperCase","toLowerCase","maxReplaceIndex","newSelectionStart","nextSegmentSelection","undefined","defaultProps"],"sources":["../src/MaskedInput.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useCallback } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport { useForwardedRef } from '@deephaven/react-hooks';\nimport './MaskedInput.scss';\n\nconst log = Log.module('MaskedInput');\n\nconst SELECTION_DIRECTION = {\n FORWARD: 'forward',\n BACKWARD: 'backward',\n NONE: 'none',\n} as const;\n\n/**\n * Special space character that's the same size as tabular numbers\n * https://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nconst FIXED_WIDTH_SPACE = '\\u2007';\n\nexport function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n value: string,\n replaceIndex: number,\n newChar: string\n): string {\n return (\n value.substring(0, replaceIndex) +\n newChar +\n value.substring(replaceIndex + 1)\n );\n}\n\nexport type SelectionSegment = {\n selectionStart: number;\n selectionEnd: number;\n selectionDirection?: typeof SELECTION_DIRECTION[keyof typeof SELECTION_DIRECTION];\n};\n\ntype MaskedInputProps = {\n /** An extra class name to add to the component */\n className?: string;\n /** The regex pattern this masked input must match */\n pattern: string;\n /** The current value to display */\n value: string;\n /** One or more examples of valid values. Used when deciding if next keystroke is valid (as rest of the current value may be incomplete) */\n example: string | string[];\n /** The current selection to use for the input */\n selection?: SelectionSegment;\n /** Called when the value changes. Note the value may still be incomplete. */\n onChange?(value: string): void;\n /** Called when selection changes */\n onSelect?(segment: SelectionSegment): void;\n /** Retrieve the next value for a provided segment */\n getNextSegmentValue?(\n segment: SelectionSegment,\n delta: number,\n segmentValue: string,\n value: string\n ): string;\n getPreferredReplacementString?(\n value: string,\n replaceIndex: number,\n replaceChar: string,\n selectionStart: number,\n selectionEnd: number\n ): string;\n onFocus?: React.FocusEventHandler;\n onBlur?: React.FocusEventHandler;\n\n 'data-testid'?: string;\n};\n\n/**\n * A masked input for entering data from a template.\n * Won't work by itself, must use within another component and handle updating the value/selection.\n */\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(\n (props: MaskedInputProps, ref) => {\n const {\n className,\n example,\n getNextSegmentValue = (range, delta, segmentValue) => segmentValue,\n getPreferredReplacementString = DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n onChange = () => false,\n onSelect = () => false,\n pattern,\n selection,\n value,\n onFocus = () => false,\n onBlur = () => false,\n 'data-testid': dataTestId,\n } = props;\n const input = useForwardedRef(ref);\n const examples = useMemo(\n () => (Array.isArray(example) ? example : [example]),\n [example]\n );\n\n useEffect(\n function setSelectedSegment() {\n if (selection != null) {\n log.debug('setting selection...', selection);\n const {\n selectionStart,\n selectionEnd,\n selectionDirection,\n } = selection;\n input.current?.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n log.debug('selection set!');\n }\n },\n [selection, input]\n );\n\n /**\n * Returns the selection range for the segment at the given cursor position\n * @param cursorPosition The current position of the cursor\n */\n const getSegment = useCallback(\n (cursorPosition: number) => {\n let selectionStart = cursorPosition;\n let selectionEnd = cursorPosition;\n const testValue = examples.length > 0 ? examples[0] : value;\n\n for (let i = selectionStart - 1; i >= 0; i -= 1) {\n if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n break;\n }\n\n selectionStart = i;\n }\n\n for (let i = selectionEnd; i < testValue.length; i += 1) {\n if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n break;\n }\n\n selectionEnd = i + 1;\n }\n\n const selectionDirection =\n selectionStart === selectionEnd\n ? SELECTION_DIRECTION.NONE\n : SELECTION_DIRECTION.BACKWARD;\n\n return {\n selectionStart,\n selectionEnd,\n selectionDirection,\n };\n },\n [examples, value]\n );\n\n /**\n * Replaces all blank spaces and everything after the current cursor position with the example value\n * @param checkValue The value to check/fill in\n * @param exampleValue The example to fill in the value from\n * @param cursorPosition The cursor position\n * @returns The filled in value\n */\n function fillValue(\n checkValue: string,\n exampleValue: string,\n cursorPosition = checkValue.length\n ): string {\n let filledValue = '';\n for (let i = 0; i < cursorPosition; i += 1) {\n if (checkValue.charAt(i) !== FIXED_WIDTH_SPACE) {\n filledValue = filledValue.concat(checkValue[i]);\n } else {\n filledValue = filledValue.concat(exampleValue[i]);\n }\n }\n filledValue = filledValue.concat(exampleValue.substring(cursorPosition));\n\n return filledValue;\n }\n\n /**\n * Checks if a given `value` is valid up until the `cursorPosition`.\n * Uses the examples to build the rest of the string\n * @param checkValue The value to check validity of\n * @param cursorPosition The position of the cursor to check up to\n */\n function isValid(\n checkValue: string,\n cursorPosition = checkValue.length\n ): boolean {\n const patternRegex = new RegExp(pattern);\n if (patternRegex.test(checkValue)) {\n return true;\n }\n\n for (let i = 0; i < examples.length; i += 1) {\n const filledValue = fillValue(checkValue, examples[i], cursorPosition);\n if (patternRegex.test(filledValue)) {\n return true;\n }\n }\n return false;\n }\n\n /**\n * Returns the next segment after the given position\n * @param position The cursor position to start at\n * @returns The new selection range\n */\n function nextSegment(position: number): SelectionSegment {\n const currentSegment = getSegment(position);\n const nextPosition = currentSegment.selectionEnd + 1;\n if (nextPosition >= value.length) {\n return currentSegment;\n }\n\n return getSegment(nextPosition);\n }\n\n /**\n * Returns the previous segment before the given position\n * @param position The cursor position to start at\n * @returns The new selection range\n */\n function previousSegment(position: number): SelectionSegment {\n const currentSegment = getSegment(position);\n const previousPosition = currentSegment.selectionStart - 1;\n if (previousPosition <= 0) {\n return currentSegment;\n }\n\n return getSegment(previousPosition);\n }\n\n function nextSegmentValue(position: number, delta: number): void {\n const segment = getSegment(position);\n const segmentValue = value.substring(\n segment.selectionStart,\n segment.selectionEnd\n );\n const newSegmentValue = getNextSegmentValue(\n segment,\n delta,\n segmentValue,\n value\n );\n const newValue =\n value.substring(0, segment.selectionStart) +\n newSegmentValue +\n value.substring(segment.selectionEnd);\n if (isValid(newValue, segment.selectionEnd)) {\n onChange(newValue);\n onSelect(segment);\n }\n }\n\n const handleSelect = useCallback(\n (event: React.UIEvent<HTMLInputElement>) => {\n const {\n selectionStart = 0,\n selectionEnd = 0,\n selectionDirection = 'none',\n } = event.target as HTMLInputElement;\n\n if (\n selectionStart === null ||\n selectionEnd === null ||\n selectionDirection === null\n ) {\n log.error(\n 'Selection attempted on non-text input element',\n event.target\n );\n return;\n }\n\n log.debug2(\n 'handleSelect',\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n if (\n selection != null &&\n selectionStart === selection.selectionStart &&\n selectionEnd === selection.selectionEnd\n ) {\n return;\n }\n if (\n selection != null &&\n selectionStart === value.length &&\n selectionEnd === value.length &&\n event.nativeEvent.type !== 'mouseup'\n ) {\n // React triggers onSelect event with the cursor at the end of the input content\n // when the component is rendered at a different location in the DOM,\n // i.e. when start/end times switch places in the TimeSlider.\n // Ignore this event and reset the selection to its previous state.\n onSelect({ ...selection });\n return;\n }\n if (selectionStart === selectionEnd) {\n const newSelection = getSegment(selectionStart);\n log.debug(\n 'Selection segment from ',\n selectionStart,\n selectionEnd,\n '=>',\n newSelection\n );\n onSelect(newSelection);\n } else {\n onSelect({ selectionStart, selectionEnd, selectionDirection });\n }\n },\n [getSegment, onSelect, selection, value]\n );\n\n const handleSelectCapture = useCallback(\n (event: React.UIEvent<HTMLInputElement>) => {\n if (!input.current) {\n return;\n }\n log.debug('handleSelectCapture', event);\n const selectionStart = input.current.selectionStart || 0;\n if (\n selectionStart === value.length &&\n selection != null &&\n selectionStart !== selection.selectionStart\n ) {\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [input, selection, value]\n );\n\n function handleArrowKey(event: React.KeyboardEvent<HTMLInputElement>) {\n event.preventDefault();\n event.stopPropagation();\n\n if (!input.current) {\n return;\n }\n\n const { key } = event;\n const { selectionStart = 0, selectionEnd = 0 } = input.current;\n if (selectionStart === null || selectionEnd === null) {\n log.error(\n 'Selection arrow nvaigation attempted on non-text input element',\n event.target\n );\n return;\n }\n\n if (key === 'ArrowLeft') {\n onSelect(previousSegment(selectionStart));\n } else if (key === 'ArrowRight') {\n onSelect(nextSegment(selectionEnd));\n } else if (key === 'ArrowUp') {\n nextSegmentValue(selectionStart, -1);\n } else if (key === 'ArrowDown') {\n nextSegmentValue(selectionStart, 1);\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n if (!input.current) {\n return;\n }\n log.debug('handleKeyDown', event);\n const { key } = event;\n const { selectionStart = 0, selectionEnd = 0 } = input.current;\n if (selectionStart === null || selectionEnd === null) {\n log.error(\n 'Selection key event on non-text input element',\n event.target\n );\n return;\n }\n\n if (key.startsWith('Arrow')) {\n handleArrowKey(event);\n return;\n }\n\n if (key === 'Delete' || key === 'Backspace') {\n event.preventDefault();\n event.stopPropagation();\n\n if (selectionStart !== selectionEnd) {\n // Replace all non-masked characters with blanks, set selection to start\n const newValue =\n value.substring(0, selectionStart) +\n value\n .substring(selectionStart, selectionEnd)\n .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n value.substring(selectionEnd);\n log.debug(\n 'Range ',\n selectionStart,\n selectionEnd,\n 'deleted, setting value',\n newValue\n );\n\n onChange(newValue);\n onSelect({\n selectionStart,\n selectionEnd: selectionStart,\n selectionDirection: SELECTION_DIRECTION.NONE,\n });\n } else if (selectionStart > 0) {\n for (let i = selectionStart - 1; i >= 0; i -= 1) {\n // Only replace non placeholder text\n const newValue =\n value.substring(0, i) +\n value\n .substring(i, selectionStart)\n .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n value.substring(selectionStart);\n\n if (newValue !== value) {\n onChange(newValue);\n onSelect({\n selectionStart: i,\n selectionEnd: i,\n selectionDirection: SELECTION_DIRECTION.NONE,\n });\n return;\n }\n }\n }\n\n return;\n }\n\n if (event.altKey || event.metaKey || event.ctrlKey || key.length > 1) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n // Get the different permutations of the character they entered, remove duplicates\n const newChars = Array.from(\n new Set([key, key.toUpperCase(), key.toLowerCase()])\n );\n for (let i = 0; i < newChars.length; i += 1) {\n const newChar = newChars[i];\n\n // If they're typing an alphanumeric character, be smart and allow it to jump ahead\n const maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar)\n ? value.length - 1\n : selectionStart;\n for (\n let replaceIndex = selectionStart;\n replaceIndex <= maxReplaceIndex;\n replaceIndex += 1\n ) {\n const newValue = getPreferredReplacementString(\n value,\n replaceIndex,\n newChar,\n selectionStart,\n selectionEnd\n );\n if (isValid(newValue, replaceIndex + 1)) {\n const currentSegment = getSegment(replaceIndex);\n const newSelectionStart = replaceIndex + 1;\n let newSelection: SelectionSegment = {\n selectionStart: newSelectionStart,\n selectionEnd: newSelectionStart,\n selectionDirection: SELECTION_DIRECTION.NONE,\n };\n if (newSelectionStart >= currentSegment.selectionEnd) {\n const nextSegmentSelection = nextSegment(replaceIndex);\n if (\n nextSegmentSelection.selectionStart !==\n currentSegment.selectionStart\n ) {\n newSelection = nextSegmentSelection;\n }\n }\n log.debug('handleKeyDown', key, '=>', newValue, newSelection);\n onChange(newValue);\n onSelect(newSelection);\n return;\n }\n }\n }\n }\n\n // Need to use \"text\" type so we can apply a pattern and make selection properly\n return (\n <input\n ref={input}\n className={classNames('form-control masked-input', className)}\n type=\"text\"\n pattern={pattern}\n value={value}\n onChange={() => undefined}\n onKeyDown={handleKeyDown}\n onSelect={handleSelect}\n onSelectCapture={handleSelectCapture}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n );\n }\n);\n\nMaskedInput.defaultProps = {\n className: '',\n onChange(): void {\n // no-op\n },\n onSelect(): void {\n // no-op\n },\n getNextSegmentValue: (range, delta, segmentValue) => segmentValue,\n getPreferredReplacementString: DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n selection: undefined,\n onFocus(): void {\n // no-op\n },\n onBlur(): void {\n // no-op\n },\n 'data-testid': undefined,\n};\n\nexport default MaskedInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MaskedInput.js","names":["React","useMemo","useEffect","useCallback","classNames","Log","useForwardedRef","log","module","SELECTION_DIRECTION","FORWARD","BACKWARD","NONE","FIXED_WIDTH_SPACE","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","value","replaceIndex","newChar","substring","fillToLength","checkValue","exampleValue","length","trimTrailingMask","emptyMask","i","MaskedInput","forwardRef","props","ref","className","example","getNextSegmentValue","range","delta","segmentValue","getPreferredReplacementString","onChange","onSelect","pattern","placeholder","selection","onFocus","onBlur","dataTestId","input","examples","Array","isArray","replace","setSelectedSegment","debug","selectionStart","selectionEnd","selectionDirection","current","setSelectionRange","getSegment","cursorPosition","testValue","test","charAt","fillValue","filledValue","concat","isValid","patternRegex","RegExp","nextSegment","position","currentSegment","nextPosition","previousSegment","previousPosition","nextSegmentValue","segment","newSegmentValue","newValue","handleSelect","event","target","error","debug2","nativeEvent","type","newSelection","handleSelectCapture","preventDefault","stopPropagation","handleArrowKey","key","handleKeyDown","startsWith","trimmedValue","altKey","metaKey","ctrlKey","newChars","from","Set","toUpperCase","toLowerCase","maxReplaceIndex","newSelectionStart","nextSegmentSelection","undefined","defaultProps"],"sources":["../src/MaskedInput.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useCallback } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport { useForwardedRef } from '@deephaven/react-hooks';\nimport './MaskedInput.scss';\n\nconst log = Log.module('MaskedInput');\n\nconst SELECTION_DIRECTION = {\n FORWARD: 'forward',\n BACKWARD: 'backward',\n NONE: 'none',\n} as const;\n\n/**\n * Special space character that's the same size as tabular numbers\n * https://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nconst FIXED_WIDTH_SPACE = '\\u2007';\n\nexport function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n value: string,\n replaceIndex: number,\n newChar: string\n): string {\n return (\n value.substring(0, replaceIndex) +\n newChar +\n value.substring(replaceIndex + 1)\n );\n}\n\n/**\n * Fill the string on the right side with the example value to the given length\n * @param checkValue Initial string to pad\n * @param exampleValue Example value\n * @param length Target length\n * @returns String padded with the given example value\n */\nexport function fillToLength(\n checkValue: string,\n exampleValue: string,\n length: number\n): string {\n return checkValue.length < length\n ? `${checkValue}${exampleValue.substring(checkValue.length, length)}`\n : checkValue;\n}\n\n/**\n * Trim all characters matching the empty mask on the right side of the given value\n * @param value String to trim\n * @param emptyMask Empty mask\n * @returns Trimmed string\n */\nexport function trimTrailingMask(value: string, emptyMask: string): string {\n let { length } = value;\n for (let i = value.length - 1; i >= 0; i -= 1) {\n if (emptyMask[i] === value[i]) {\n length = i;\n } else {\n break;\n }\n }\n return value.substring(0, length);\n}\n\nexport type SelectionSegment = {\n selectionStart: number;\n selectionEnd: number;\n selectionDirection?: typeof SELECTION_DIRECTION[keyof typeof SELECTION_DIRECTION];\n};\n\ntype MaskedInputProps = {\n /** An extra class name to add to the component */\n className?: string;\n /** The regex pattern this masked input must match */\n pattern: string;\n /** Input placeholder */\n placeholder?: string;\n /** The current value to display */\n value: string;\n /** One or more examples of valid values. Used when deciding if next keystroke is valid (as rest of the current value may be incomplete) */\n example: string | string[];\n /** The current selection to use for the input */\n selection?: SelectionSegment;\n /** Called when the value changes. Note the value may still be incomplete. */\n onChange?(value: string): void;\n /** Called when selection changes */\n onSelect?(segment: SelectionSegment): void;\n /** Retrieve the next value for a provided segment */\n getNextSegmentValue?(\n segment: SelectionSegment,\n delta: number,\n segmentValue: string,\n value: string\n ): string;\n getPreferredReplacementString?(\n value: string,\n replaceIndex: number,\n replaceChar: string,\n selectionStart: number,\n selectionEnd: number\n ): string;\n onFocus?: React.FocusEventHandler;\n onBlur?: React.FocusEventHandler;\n\n 'data-testid'?: string;\n};\n\n/**\n * A masked input for entering data from a template.\n * Won't work by itself, must use within another component and handle updating the value/selection.\n */\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(\n (props: MaskedInputProps, ref) => {\n const {\n className,\n example,\n getNextSegmentValue = (range, delta, segmentValue) => segmentValue,\n getPreferredReplacementString = DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n onChange = () => false,\n onSelect = () => false,\n pattern,\n placeholder,\n selection,\n value,\n onFocus = () => false,\n onBlur = () => false,\n 'data-testid': dataTestId,\n } = props;\n const input = useForwardedRef(ref);\n const examples = useMemo(\n () => (Array.isArray(example) ? example : [example]),\n [example]\n );\n const emptyMask = useMemo(\n () => examples[0].replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE),\n [examples]\n );\n\n useEffect(\n function setSelectedSegment() {\n if (selection != null) {\n log.debug('setting selection...', selection);\n const {\n selectionStart,\n selectionEnd,\n selectionDirection,\n } = selection;\n input.current?.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n log.debug('selection set!');\n }\n },\n [selection, input]\n );\n\n /**\n * Returns the selection range for the segment at the given cursor position\n * @param cursorPosition The current position of the cursor\n */\n const getSegment = useCallback(\n (cursorPosition: number) => {\n let selectionStart = cursorPosition;\n let selectionEnd = cursorPosition;\n const testValue = examples.length > 0 ? examples[0] : value;\n\n for (let i = selectionStart - 1; i >= 0; i -= 1) {\n if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n break;\n }\n\n selectionStart = i;\n }\n\n for (let i = selectionEnd; i < testValue.length; i += 1) {\n if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n break;\n }\n\n selectionEnd = i + 1;\n }\n\n const selectionDirection =\n selectionStart === selectionEnd\n ? SELECTION_DIRECTION.NONE\n : SELECTION_DIRECTION.BACKWARD;\n\n return {\n selectionStart,\n selectionEnd,\n selectionDirection,\n };\n },\n [examples, value]\n );\n\n /**\n * Replaces all blank spaces and everything after the current cursor position with the example value\n * @param checkValue The value to check/fill in\n * @param exampleValue The example to fill in the value from\n * @param cursorPosition The cursor position\n * @returns The filled in value\n */\n function fillValue(\n checkValue: string,\n exampleValue: string,\n cursorPosition = checkValue.length\n ): string {\n let filledValue = '';\n for (let i = 0; i < cursorPosition; i += 1) {\n if (checkValue.charAt(i) !== FIXED_WIDTH_SPACE) {\n filledValue = filledValue.concat(checkValue[i]);\n } else {\n filledValue = filledValue.concat(exampleValue[i]);\n }\n }\n filledValue = filledValue.concat(exampleValue.substring(cursorPosition));\n\n return filledValue;\n }\n\n /**\n * Checks if a given `value` is valid up until the `cursorPosition`.\n * Uses the examples to build the rest of the string\n * @param checkValue The value to check validity of\n * @param cursorPosition The position of the cursor to check up to\n */\n function isValid(\n checkValue: string,\n cursorPosition = checkValue.length\n ): boolean {\n const patternRegex = new RegExp(`^${pattern}$`);\n if (patternRegex.test(checkValue)) {\n return true;\n }\n\n for (let i = 0; i < examples.length; i += 1) {\n const filledValue = fillValue(checkValue, examples[i], cursorPosition);\n if (patternRegex.test(filledValue)) {\n return true;\n }\n }\n return false;\n }\n\n /**\n * Returns the next segment after the given position\n * @param position The cursor position to start at\n * @returns The new selection range\n */\n function nextSegment(position: number): SelectionSegment {\n const currentSegment = getSegment(position);\n const nextPosition = currentSegment.selectionEnd + 1;\n if (nextPosition >= value.length) {\n return currentSegment;\n }\n\n return getSegment(nextPosition);\n }\n\n /**\n * Returns the previous segment before the given position\n * @param position The cursor position to start at\n * @returns The new selection range\n */\n function previousSegment(position: number): SelectionSegment {\n const currentSegment = getSegment(position);\n const previousPosition = currentSegment.selectionStart - 1;\n if (previousPosition <= 0) {\n return currentSegment;\n }\n\n return getSegment(previousPosition);\n }\n\n function nextSegmentValue(position: number, delta: number): void {\n const segment = getSegment(position);\n const segmentValue = value.substring(\n segment.selectionStart,\n segment.selectionEnd\n );\n const newSegmentValue = getNextSegmentValue(\n segment,\n delta,\n segmentValue,\n value\n );\n const newValue =\n value.substring(0, segment.selectionStart) +\n newSegmentValue +\n value.substring(segment.selectionEnd);\n if (isValid(newValue, segment.selectionEnd)) {\n onChange(newValue);\n onSelect(segment);\n }\n }\n\n const handleSelect = useCallback(\n (event: React.UIEvent<HTMLInputElement>) => {\n const {\n selectionStart = 0,\n selectionEnd = 0,\n selectionDirection = 'none',\n } = event.target as HTMLInputElement;\n\n if (\n selectionStart === null ||\n selectionEnd === null ||\n selectionDirection === null\n ) {\n log.error(\n 'Selection attempted on non-text input element',\n event.target\n );\n return;\n }\n\n log.debug2(\n 'handleSelect',\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n if (\n selection != null &&\n selectionStart === selection.selectionStart &&\n selectionEnd === selection.selectionEnd\n ) {\n return;\n }\n if (\n selection != null &&\n selectionStart === value.length &&\n selectionEnd === value.length &&\n event.nativeEvent.type !== 'mouseup'\n ) {\n // React triggers onSelect event with the cursor at the end of the input content\n // when the component is rendered at a different location in the DOM,\n // i.e. when start/end times switch places in the TimeSlider.\n // Ignore this event and reset the selection to its previous state.\n onSelect({ ...selection });\n return;\n }\n if (selectionStart === selectionEnd) {\n const newSelection = getSegment(selectionStart);\n log.debug(\n 'Selection segment from ',\n selectionStart,\n selectionEnd,\n '=>',\n newSelection\n );\n onSelect(newSelection);\n } else {\n onSelect({ selectionStart, selectionEnd, selectionDirection });\n }\n },\n [getSegment, onSelect, selection, value]\n );\n\n const handleSelectCapture = useCallback(\n (event: React.UIEvent<HTMLInputElement>) => {\n if (!input.current) {\n return;\n }\n log.debug('handleSelectCapture', event);\n const selectionStart = input.current.selectionStart || 0;\n if (\n selectionStart === value.length &&\n selection != null &&\n selectionStart !== selection.selectionStart\n ) {\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [input, selection, value]\n );\n\n function handleArrowKey(event: React.KeyboardEvent<HTMLInputElement>) {\n event.preventDefault();\n event.stopPropagation();\n\n if (!input.current) {\n return;\n }\n\n const { key } = event;\n const { selectionStart = 0, selectionEnd = 0 } = input.current;\n if (selectionStart === null || selectionEnd === null) {\n log.error(\n 'Selection arrow nvaigation attempted on non-text input element',\n event.target\n );\n return;\n }\n\n if (key === 'ArrowLeft') {\n onSelect(previousSegment(selectionStart));\n } else if (key === 'ArrowRight') {\n onSelect(nextSegment(selectionEnd));\n } else if (key === 'ArrowUp') {\n nextSegmentValue(selectionStart, -1);\n } else if (key === 'ArrowDown') {\n nextSegmentValue(selectionStart, 1);\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n if (!input.current) {\n return;\n }\n log.debug('handleKeyDown', event);\n const { key } = event;\n const { selectionStart = 0, selectionEnd = 0 } = input.current;\n if (selectionStart === null || selectionEnd === null) {\n log.error(\n 'Selection key event on non-text input element',\n event.target\n );\n return;\n }\n\n if (key.startsWith('Arrow')) {\n handleArrowKey(event);\n return;\n }\n\n if (key === 'Delete' || key === 'Backspace') {\n event.preventDefault();\n event.stopPropagation();\n\n // Deleting at the end of the value\n if (selectionEnd >= trimTrailingMask(value, emptyMask).length) {\n const newValue = value.substring(\n 0,\n // Delete whole selection or just the char before the cursor\n selectionStart === selectionEnd\n ? selectionStart - 1\n : selectionStart\n );\n const trimmedValue = trimTrailingMask(newValue, emptyMask);\n if (trimmedValue !== value) {\n onChange(trimmedValue);\n onSelect({\n selectionStart: trimmedValue.length,\n selectionEnd: trimmedValue.length,\n selectionDirection: SELECTION_DIRECTION.NONE,\n });\n }\n return;\n }\n\n if (selectionStart !== selectionEnd) {\n // Replace all non-masked characters with blanks, set selection to start\n const newValue =\n value.substring(0, selectionStart) +\n value\n .substring(selectionStart, selectionEnd)\n .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n value.substring(selectionEnd);\n log.debug(\n 'Range ',\n selectionStart,\n selectionEnd,\n 'deleted, setting value',\n newValue\n );\n\n onChange(newValue);\n onSelect({\n selectionStart,\n selectionEnd: selectionStart,\n selectionDirection: SELECTION_DIRECTION.NONE,\n });\n } else if (selectionStart > 0) {\n for (let i = selectionStart - 1; i >= 0; i -= 1) {\n // Only replace non placeholder text\n const newValue =\n value.substring(0, i) +\n value\n .substring(i, selectionStart)\n .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n value.substring(selectionStart);\n\n if (newValue !== value) {\n onChange(newValue);\n onSelect({\n selectionStart: i,\n selectionEnd: i,\n selectionDirection: SELECTION_DIRECTION.NONE,\n });\n return;\n }\n }\n }\n\n return;\n }\n\n if (event.altKey || event.metaKey || event.ctrlKey || key.length > 1) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n // Get the different permutations of the character they entered, remove duplicates\n const newChars = Array.from(\n new Set([key, key.toUpperCase(), key.toLowerCase()])\n );\n for (let i = 0; i < newChars.length; i += 1) {\n const newChar = newChars[i];\n\n // If they're typing an alphanumeric character, be smart and allow it to jump ahead\n const maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar)\n ? examples[0].length - 1\n : selectionStart;\n for (\n let replaceIndex = selectionStart;\n replaceIndex <= maxReplaceIndex;\n replaceIndex += 1\n ) {\n // Fill with the example chars if necessary\n const filledValue = fillToLength(\n value,\n examples[0],\n replaceIndex + 1\n );\n const newValue = getPreferredReplacementString(\n filledValue,\n replaceIndex,\n newChar,\n selectionStart,\n selectionEnd\n );\n if (isValid(newValue, replaceIndex + 1)) {\n const currentSegment = getSegment(replaceIndex);\n const newSelectionStart = replaceIndex + 1;\n let newSelection: SelectionSegment = {\n selectionStart: newSelectionStart,\n selectionEnd: newSelectionStart,\n selectionDirection: SELECTION_DIRECTION.NONE,\n };\n if (newSelectionStart >= currentSegment.selectionEnd) {\n const nextSegmentSelection = nextSegment(replaceIndex);\n if (\n nextSegmentSelection.selectionStart !==\n currentSegment.selectionStart\n ) {\n newSelection = nextSegmentSelection;\n }\n }\n log.debug('handleKeyDown', key, '=>', newValue, newSelection);\n onChange(newValue);\n onSelect(newSelection);\n return;\n }\n }\n }\n }\n\n // Need to use \"text\" type so we can apply a pattern and make selection properly\n return (\n <input\n ref={input}\n className={classNames('form-control masked-input', className)}\n type=\"text\"\n pattern={pattern}\n placeholder={placeholder}\n value={value}\n onChange={() => undefined}\n onKeyDown={handleKeyDown}\n onSelect={handleSelect}\n onSelectCapture={handleSelectCapture}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n );\n }\n);\n\nMaskedInput.defaultProps = {\n className: '',\n placeholder: undefined,\n onChange(): void {\n // no-op\n },\n onSelect(): void {\n // no-op\n },\n getNextSegmentValue: (range, delta, segmentValue) => segmentValue,\n getPreferredReplacementString: DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n selection: undefined,\n onFocus(): void {\n // no-op\n },\n onBlur(): void {\n // no-op\n },\n 'data-testid': undefined,\n};\n\nexport default MaskedInput;\n"],"mappings":"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"}
|
package/dist/SearchInput.d.ts
CHANGED
|
@@ -3,9 +3,11 @@ import './SearchInput.scss';
|
|
|
3
3
|
interface SearchInputProps {
|
|
4
4
|
value: string;
|
|
5
5
|
placeholder: string;
|
|
6
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
6
7
|
onChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
7
8
|
onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
|
|
8
9
|
className: string;
|
|
10
|
+
disabled?: boolean;
|
|
9
11
|
matchCount: number;
|
|
10
12
|
id: string;
|
|
11
13
|
'data-testid'?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../src/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,oBAAoB,CAAC;AAE5B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,cAAM,WAAY,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY;;;;qBAIJ,IAAI;;;MAKjB;gBAEU,KAAK,EAAE,gBAAgB;IAKnC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE9C,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,GAAG,CAAC,OAAO;
|
|
1
|
+
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../src/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,oBAAoB,CAAC;AAE5B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,cAAM,WAAY,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY;;;;qBAIJ,IAAI;;;MAKjB;gBAEU,KAAK,EAAE,gBAAgB;IAKnC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE9C,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,GAAG,CAAC,OAAO;CAqCtB;AAED,eAAe,WAAW,CAAC"}
|
package/dist/SearchInput.js
CHANGED
|
@@ -25,8 +25,10 @@ class SearchInput extends PureComponent {
|
|
|
25
25
|
var {
|
|
26
26
|
value,
|
|
27
27
|
placeholder,
|
|
28
|
+
onBlur,
|
|
28
29
|
onChange,
|
|
29
30
|
className,
|
|
31
|
+
disabled,
|
|
30
32
|
matchCount,
|
|
31
33
|
id,
|
|
32
34
|
onKeyDown,
|
|
@@ -37,9 +39,11 @@ class SearchInput extends PureComponent {
|
|
|
37
39
|
}, /*#__PURE__*/React.createElement("input", {
|
|
38
40
|
type: "search",
|
|
39
41
|
value: value,
|
|
42
|
+
onBlur: onBlur,
|
|
40
43
|
onChange: onChange,
|
|
41
44
|
onKeyDown: onKeyDown,
|
|
42
45
|
className: "form-control",
|
|
46
|
+
disabled: disabled,
|
|
43
47
|
placeholder: placeholder,
|
|
44
48
|
ref: this.inputField,
|
|
45
49
|
id: id,
|
package/dist/SearchInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","constructor","props","inputField","createRef","focus","current","render","value","placeholder","onChange","className","matchCount","id","onKeyDown","dataTestId","undefined"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n value: string;\n placeholder: string;\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n className: string;\n matchCount: number;\n id: string;\n 'data-testid'?: string;\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n static defaultProps = {\n placeholder: 'Search',\n className: '',\n matchCount: null,\n onKeyDown(): void {\n // no-op\n },\n id: '',\n 'data-testid': undefined,\n };\n\n constructor(props: SearchInputProps) {\n super(props);\n this.inputField = React.createRef();\n }\n\n inputField: React.RefObject<HTMLInputElement>;\n\n focus(): void {\n this.inputField.current?.focus();\n }\n\n render(): JSX.Element {\n const {\n value,\n placeholder,\n onChange,\n className,\n matchCount,\n id,\n onKeyDown,\n 'data-testid': dataTestId,\n } = this.props;\n return (\n <div className={classNames('search-group', className)}>\n <input\n type=\"search\"\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n className=\"form-control\"\n placeholder={placeholder}\n ref={this.inputField}\n id={id}\n data-testid={dataTestId}\n />\n {matchCount != null && (\n <span className=\"search-match\">{matchCount}</span>\n )}\n <span className=\"search-icon\">\n <FontAwesomeIcon icon={vsSearch} />\n </span>\n </div>\n );\n }\n}\n\nexport default SearchInput;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,QAAqC,OAArC;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;
|
|
1
|
+
{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","constructor","props","inputField","createRef","focus","current","render","value","placeholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","undefined"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n value: string;\n placeholder: string;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n className: string;\n disabled?: boolean;\n matchCount: number;\n id: string;\n 'data-testid'?: string;\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n static defaultProps = {\n placeholder: 'Search',\n className: '',\n matchCount: null,\n onKeyDown(): void {\n // no-op\n },\n id: '',\n 'data-testid': undefined,\n };\n\n constructor(props: SearchInputProps) {\n super(props);\n this.inputField = React.createRef();\n }\n\n inputField: React.RefObject<HTMLInputElement>;\n\n focus(): void {\n this.inputField.current?.focus();\n }\n\n render(): JSX.Element {\n const {\n value,\n placeholder,\n onBlur,\n onChange,\n className,\n disabled,\n matchCount,\n id,\n onKeyDown,\n 'data-testid': dataTestId,\n } = this.props;\n return (\n <div className={classNames('search-group', className)}>\n <input\n type=\"search\"\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onKeyDown={onKeyDown}\n className=\"form-control\"\n disabled={disabled}\n placeholder={placeholder}\n ref={this.inputField}\n id={id}\n data-testid={dataTestId}\n />\n {matchCount != null && (\n <span className=\"search-match\">{matchCount}</span>\n )}\n <span className=\"search-icon\">\n <FontAwesomeIcon icon={vsSearch} />\n </span>\n </div>\n );\n }\n}\n\nexport default SearchInput;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,QAAqC,OAArC;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAgBA,MAAMC,WAAN,SAA0BJ,aAA1B,CAA0D;EAYxDK,WAAW,CAACC,KAAD,EAA0B;IACnC,MAAMA,KAAN;;IADmC;;IAEnC,KAAKC,UAAL,gBAAkBR,KAAK,CAACS,SAAN,EAAlB;EACD;;EAIDC,KAAK,GAAS;IAAA;;IACZ,8BAAKF,UAAL,CAAgBG,OAAhB,gFAAyBD,KAAzB;EACD;;EAEDE,MAAM,GAAgB;IACpB,IAAM;MACJC,KADI;MAEJC,WAFI;MAGJC,MAHI;MAIJC,QAJI;MAKJC,SALI;MAMJC,QANI;MAOJC,UAPI;MAQJC,EARI;MASJC,SATI;MAUJ,eAAeC;IAVX,IAWF,KAAKf,KAXT;IAYA,oBACE;MAAK,SAAS,EAAEH,UAAU,CAAC,cAAD,EAAiBa,SAAjB;IAA1B,gBACE;MACE,IAAI,EAAC,QADP;MAEE,KAAK,EAAEJ,KAFT;MAGE,MAAM,EAAEE,MAHV;MAIE,QAAQ,EAAEC,QAJZ;MAKE,SAAS,EAAEK,SALb;MAME,SAAS,EAAC,cANZ;MAOE,QAAQ,EAAEH,QAPZ;MAQE,WAAW,EAAEJ,WARf;MASE,GAAG,EAAE,KAAKN,UATZ;MAUE,EAAE,EAAEY,EAVN;MAWE,eAAaE;IAXf,EADF,EAcGH,UAAU,IAAI,IAAd,iBACC;MAAM,SAAS,EAAC;IAAhB,GAAgCA,UAAhC,CAfJ,eAiBE;MAAM,SAAS,EAAC;IAAhB,gBACE,oBAAC,eAAD;MAAiB,IAAI,EAAEhB;IAAvB,EADF,CAjBF,CADF;EAuBD;;AA3DuD;;gBAApDE,W,kBACkB;EACpBS,WAAW,EAAE,QADO;EAEpBG,SAAS,EAAE,EAFS;EAGpBE,UAAU,EAAE,IAHQ;;EAIpBE,SAAS,GAAS,CAChB;EACD,CANmB;;EAOpBD,EAAE,EAAE,EAPgB;EAQpB,eAAeG;AARK,C;;AA6DxB,eAAelB,WAAf"}
|
|
@@ -14,6 +14,7 @@ declare type SelectValueListProps<T> = {
|
|
|
14
14
|
rowHeight: number;
|
|
15
15
|
offset: number;
|
|
16
16
|
items: SelectItem<T>[];
|
|
17
|
+
onBlur?: React.FocusEventHandler<Element>;
|
|
17
18
|
onSelect(itemIndex: number, value: T | null): void;
|
|
18
19
|
onViewportChange(topRow: number, bottomRow: number): void;
|
|
19
20
|
'data-testid'?: string;
|
|
@@ -26,6 +27,7 @@ declare class SelectValueList<T> extends PureComponent<SelectValueListProps<T>>
|
|
|
26
27
|
static defaultProps: {
|
|
27
28
|
disabled: boolean;
|
|
28
29
|
rowHeight: number;
|
|
30
|
+
onBlur: () => void;
|
|
29
31
|
'data-testid': undefined;
|
|
30
32
|
};
|
|
31
33
|
constructor(props: SelectValueListProps<T>);
|
|
@@ -36,9 +38,12 @@ declare class SelectValueList<T> extends PureComponent<SelectValueListProps<T>>
|
|
|
36
38
|
bottomRow: number | null;
|
|
37
39
|
getCachedItem: ((itemIndex: number, key: number, value: T, displayValue: string | undefined, rowHeight: number, isSelected: boolean, disabled: boolean) => JSX.Element) & memoize.Memoized<(itemIndex: number, key: number, value: T, displayValue: string | undefined, rowHeight: number, isSelected: boolean, disabled: boolean) => JSX.Element>;
|
|
38
40
|
getCachedItems: ((items: SelectItem<T>[], rowHeight: number, offset: number, disabled: boolean) => React.ReactNode) & memoize.Memoized<(items: SelectItem<T>[], rowHeight: number, offset: number, disabled: boolean) => React.ReactNode>;
|
|
41
|
+
handleBlur(e: React.FocusEvent): void;
|
|
39
42
|
handleScroll(): void;
|
|
40
43
|
handleSelect(itemIndex: number): void;
|
|
41
44
|
sendViewportUpdate(): void;
|
|
45
|
+
getElement(itemIndex: number): Element | null;
|
|
46
|
+
scrollIntoView(index: number): void;
|
|
42
47
|
render(): JSX.Element;
|
|
43
48
|
}
|
|
44
49
|
export default SelectValueList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectValueList.d.ts","sourceRoot":"","sources":["../src/SelectValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,OAAO,MAAM,UAAU,CAAC;AAG/B,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,CAAC;IACT,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACnD,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,cAAM,eAAe,CAAC,CAAC,CAAE,SAAQ,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,YAAY
|
|
1
|
+
{"version":3,"file":"SelectValueList.d.ts","sourceRoot":"","sources":["../src/SelectValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,OAAO,MAAM,UAAU,CAAC;AAG/B,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,CAAC;IACT,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACnD,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,cAAM,eAAe,CAAC,CAAC,CAAE,SAAQ,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,YAAY;;;sBAGL,IAAI;;MAEhB;gBAEU,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAY1C,iBAAiB,IAAI,IAAI;IAIzB,kBAAkB,IAAI,IAAI;IAI1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAEtC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,aAAa,eAEE,MAAM,OACZ,MAAM,SACJ,CAAC,gBACM,MAAM,GAAG,SAAS,aACrB,MAAM,cACL,OAAO,YACT,OAAO,KAChB,WAAW,iCAPD,MAAM,OACZ,MAAM,SACJ,CAAC,gBACM,MAAM,GAAG,SAAS,aACrB,MAAM,cACL,OAAO,YACT,OAAO,KAChB,WAAW,EAoBd;IAEF,cAAc,WAEH,WAAW,CAAC,CAAC,EAAE,aACX,MAAM,UACT,MAAM,YACJ,OAAO,KAChB,MAAM,SAAS,6BAJT,WAAW,CAAC,CAAC,EAAE,aACX,MAAM,UACT,MAAM,YACJ,OAAO,KAChB,MAAM,SAAS,EAqBlB;IAEF,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI;IAarC,YAAY,IAAI,IAAI;IAIpB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAYrC,kBAAkB,IAAI,IAAI;IAmB1B,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAQ7C,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKnC,MAAM,IAAI,GAAG,CAAC,OAAO;CAiDtB;AAED,eAAe,eAAe,CAAC"}
|
package/dist/SelectValueList.js
CHANGED
|
@@ -25,15 +25,20 @@ class SelectValueList extends PureComponent {
|
|
|
25
25
|
height: rowHeight
|
|
26
26
|
};
|
|
27
27
|
var text = displayValue != null ? displayValue : value;
|
|
28
|
-
return
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
return (
|
|
29
|
+
/*#__PURE__*/
|
|
30
|
+
// Tab index is needed so the item could be a related target in the blur event details
|
|
31
|
+
React.createElement("li", {
|
|
32
|
+
className: "value-list-item",
|
|
33
|
+
style: style,
|
|
34
|
+
key: key,
|
|
35
|
+
tabIndex: -1
|
|
36
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
37
|
+
checked: isSelected,
|
|
38
|
+
disabled: disabled,
|
|
39
|
+
onChange: () => this.handleSelect(itemIndex)
|
|
40
|
+
}, text))
|
|
41
|
+
);
|
|
37
42
|
}, {
|
|
38
43
|
max: 1000
|
|
39
44
|
}));
|
|
@@ -61,6 +66,7 @@ class SelectValueList extends PureComponent {
|
|
|
61
66
|
max: 1
|
|
62
67
|
}));
|
|
63
68
|
|
|
69
|
+
this.handleBlur = this.handleBlur.bind(this);
|
|
64
70
|
this.handleScroll = this.handleScroll.bind(this);
|
|
65
71
|
this.handleSelect = this.handleSelect.bind(this);
|
|
66
72
|
this.list = /*#__PURE__*/React.createRef();
|
|
@@ -76,6 +82,16 @@ class SelectValueList extends PureComponent {
|
|
|
76
82
|
this.sendViewportUpdate();
|
|
77
83
|
}
|
|
78
84
|
|
|
85
|
+
handleBlur(e) {
|
|
86
|
+
if (!e.relatedTarget || this.list.current && e.relatedTarget instanceof HTMLElement && !this.list.current.contains(e.relatedTarget)) {
|
|
87
|
+
// Next focused element is outside of the list
|
|
88
|
+
var {
|
|
89
|
+
onBlur
|
|
90
|
+
} = this.props;
|
|
91
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
79
95
|
handleScroll() {
|
|
80
96
|
this.sendViewportUpdate();
|
|
81
97
|
}
|
|
@@ -120,6 +136,22 @@ class SelectValueList extends PureComponent {
|
|
|
120
136
|
}
|
|
121
137
|
}
|
|
122
138
|
|
|
139
|
+
getElement(itemIndex) {
|
|
140
|
+
if (this.list.current == null) {
|
|
141
|
+
return null;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
var elements = this.list.current.querySelectorAll('.value-list-item');
|
|
145
|
+
return elements[itemIndex];
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
scrollIntoView(index) {
|
|
149
|
+
var element = this.getElement(index);
|
|
150
|
+
element === null || element === void 0 ? void 0 : element.scrollIntoView({
|
|
151
|
+
block: 'center'
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
|
|
123
155
|
render() {
|
|
124
156
|
var {
|
|
125
157
|
className,
|
|
@@ -136,6 +168,7 @@ class SelectValueList extends PureComponent {
|
|
|
136
168
|
className: classNames('select-value-list-scroll-pane h-100 w-100', {
|
|
137
169
|
'is-invalid': isInvalid
|
|
138
170
|
}, className),
|
|
171
|
+
onBlur: this.handleBlur,
|
|
139
172
|
onScroll: this.handleScroll,
|
|
140
173
|
ref: this.list,
|
|
141
174
|
"data-testid": dataTestId
|
|
@@ -160,6 +193,7 @@ class SelectValueList extends PureComponent {
|
|
|
160
193
|
_defineProperty(SelectValueList, "defaultProps", {
|
|
161
194
|
disabled: false,
|
|
162
195
|
rowHeight: 21,
|
|
196
|
+
onBlur: () => undefined,
|
|
163
197
|
'data-testid': undefined
|
|
164
198
|
});
|
|
165
199
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectValueList.js","names":["React","PureComponent","classNames","memoize","Checkbox","SelectValueList","constructor","props","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleScroll","bind","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","onSelect","visibleItemIndex","current","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","render","className","isInvalid","itemCount","dataTestId","getCachedItems","position","left","undefined"],"sources":["../src/SelectValueList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\nexport interface SelectItem<T> {\n value: T;\n displayValue?: string;\n isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n className?: string;\n disabled: boolean;\n isInvalid?: boolean;\n // Total item count\n itemCount: number;\n rowHeight: number;\n\n // Offset of the top item in the items array\n offset: number;\n items: SelectItem<T>[];\n\n onSelect(itemIndex: number, value: T | null): void;\n onViewportChange(topRow: number, bottomRow: number): void;\n\n 'data-testid'?: string;\n};\n\n/**\n * Select values from a long scrollable list.\n * Swaps items in and out for infinite scrolling\n */\nclass SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {\n static defaultProps = {\n disabled: false,\n rowHeight: 21,\n 'data-testid': undefined,\n };\n\n constructor(props: SelectValueListProps<T>) {\n super(props);\n\n this.handleScroll = this.handleScroll.bind(this);\n this.handleSelect = this.handleSelect.bind(this);\n\n this.list = React.createRef();\n this.topRow = null;\n this.bottomRow = null;\n }\n\n componentDidMount(): void {\n this.sendViewportUpdate();\n }\n\n componentDidUpdate(): void {\n this.sendViewportUpdate();\n }\n\n list: React.RefObject<HTMLDivElement>;\n\n topRow: number | null;\n\n bottomRow: number | null;\n\n getCachedItem = memoize(\n (\n itemIndex: number,\n key: number,\n value: T,\n displayValue: string | undefined,\n rowHeight: number,\n isSelected: boolean,\n disabled: boolean\n ): JSX.Element => {\n const style = {\n height: rowHeight,\n };\n const text = displayValue != null ? displayValue : value;\n\n return (\n <li className=\"value-list-item\" style={style} key={key}>\n <Checkbox\n checked={isSelected}\n disabled={disabled}\n onChange={() => this.handleSelect(itemIndex)}\n >\n {text}\n </Checkbox>\n </li>\n );\n },\n { max: 1000 }\n );\n\n getCachedItems = memoize(\n (\n items: SelectItem<T>[],\n rowHeight: number,\n offset: number,\n disabled: boolean\n ): React.ReactNode => {\n const itemElements: JSX.Element[] = [];\n for (let i = 0; i < items.length; i += 1) {\n const item = items[i];\n const { value, displayValue, isSelected } = item;\n const itemIndex = offset + i;\n const key = itemIndex;\n const element = this.getCachedItem(\n itemIndex,\n key,\n value,\n displayValue,\n rowHeight,\n isSelected,\n disabled\n );\n itemElements.push(element);\n }\n return itemElements;\n },\n { max: 1 }\n );\n\n handleScroll(): void {\n this.sendViewportUpdate();\n }\n\n handleSelect(itemIndex: number): void {\n const { items, offset, onSelect } = this.props;\n const visibleItemIndex = itemIndex - offset;\n if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {\n const item = items[visibleItemIndex];\n const { value } = item;\n onSelect(itemIndex, value);\n } else {\n onSelect(itemIndex, null);\n }\n }\n\n sendViewportUpdate(): void {\n if (!this.list.current || this.list.current.clientHeight === 0) {\n return;\n }\n\n const { onViewportChange, rowHeight } = this.props;\n const top = this.list.current.scrollTop;\n const bottom = top + this.list.current.clientHeight;\n\n const topRow = Math.floor(top / rowHeight);\n const bottomRow = Math.ceil(bottom / rowHeight);\n\n if (this.topRow !== topRow || this.bottomRow !== bottomRow) {\n this.topRow = topRow;\n this.bottomRow = bottomRow;\n onViewportChange(topRow, bottomRow);\n }\n }\n\n render(): JSX.Element {\n const {\n className,\n disabled,\n isInvalid,\n items,\n itemCount,\n offset,\n rowHeight,\n 'data-testid': dataTestId,\n } = this.props;\n const itemElements = this.getCachedItems(\n items,\n rowHeight,\n offset,\n disabled\n );\n\n return (\n <div\n className={classNames(\n 'select-value-list-scroll-pane h-100 w-100',\n { 'is-invalid': isInvalid },\n className\n )}\n onScroll={this.handleScroll}\n ref={this.list}\n data-testid={dataTestId}\n >\n <div\n className=\"select-value-list\"\n style={{ height: itemCount * rowHeight }}\n >\n <ol\n className=\"select-value-list-content\"\n style={{\n position: 'absolute',\n height: items.length * rowHeight,\n top: offset * rowHeight,\n left: 0,\n }}\n >\n {itemElements}\n </ol>\n </div>\n </div>\n );\n }\n}\n\nexport default SelectValueList;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectValueList.js","names":["React","PureComponent","classNames","memoize","Checkbox","SelectValueList","constructor","props","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleBlur","bind","handleScroll","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","e","relatedTarget","current","HTMLElement","contains","onBlur","onSelect","visibleItemIndex","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","getElement","elements","querySelectorAll","scrollIntoView","index","block","render","className","isInvalid","itemCount","dataTestId","getCachedItems","position","left","undefined"],"sources":["../src/SelectValueList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\nexport interface SelectItem<T> {\n value: T;\n displayValue?: string;\n isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n className?: string;\n disabled: boolean;\n isInvalid?: boolean;\n // Total item count\n itemCount: number;\n rowHeight: number;\n\n // Offset of the top item in the items array\n offset: number;\n items: SelectItem<T>[];\n\n onBlur?: React.FocusEventHandler<Element>;\n onSelect(itemIndex: number, value: T | null): void;\n onViewportChange(topRow: number, bottomRow: number): void;\n\n 'data-testid'?: string;\n};\n\n/**\n * Select values from a long scrollable list.\n * Swaps items in and out for infinite scrolling\n */\nclass SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {\n static defaultProps = {\n disabled: false,\n rowHeight: 21,\n onBlur: (): void => undefined,\n 'data-testid': undefined,\n };\n\n constructor(props: SelectValueListProps<T>) {\n super(props);\n\n this.handleBlur = this.handleBlur.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n this.handleSelect = this.handleSelect.bind(this);\n\n this.list = React.createRef();\n this.topRow = null;\n this.bottomRow = null;\n }\n\n componentDidMount(): void {\n this.sendViewportUpdate();\n }\n\n componentDidUpdate(): void {\n this.sendViewportUpdate();\n }\n\n list: React.RefObject<HTMLDivElement>;\n\n topRow: number | null;\n\n bottomRow: number | null;\n\n getCachedItem = memoize(\n (\n itemIndex: number,\n key: number,\n value: T,\n displayValue: string | undefined,\n rowHeight: number,\n isSelected: boolean,\n disabled: boolean\n ): JSX.Element => {\n const style = {\n height: rowHeight,\n };\n const text = displayValue != null ? displayValue : value;\n\n return (\n // Tab index is needed so the item could be a related target in the blur event details\n <li className=\"value-list-item\" style={style} key={key} tabIndex={-1}>\n <Checkbox\n checked={isSelected}\n disabled={disabled}\n onChange={() => this.handleSelect(itemIndex)}\n >\n {text}\n </Checkbox>\n </li>\n );\n },\n { max: 1000 }\n );\n\n getCachedItems = memoize(\n (\n items: SelectItem<T>[],\n rowHeight: number,\n offset: number,\n disabled: boolean\n ): React.ReactNode => {\n const itemElements: JSX.Element[] = [];\n for (let i = 0; i < items.length; i += 1) {\n const item = items[i];\n const { value, displayValue, isSelected } = item;\n const itemIndex = offset + i;\n const key = itemIndex;\n const element = this.getCachedItem(\n itemIndex,\n key,\n value,\n displayValue,\n rowHeight,\n isSelected,\n disabled\n );\n itemElements.push(element);\n }\n return itemElements;\n },\n { max: 1 }\n );\n\n handleBlur(e: React.FocusEvent): void {\n if (\n !e.relatedTarget ||\n (this.list.current &&\n e.relatedTarget instanceof HTMLElement &&\n !this.list.current.contains(e.relatedTarget))\n ) {\n // Next focused element is outside of the list\n const { onBlur } = this.props;\n onBlur?.(e);\n }\n }\n\n handleScroll(): void {\n this.sendViewportUpdate();\n }\n\n handleSelect(itemIndex: number): void {\n const { items, offset, onSelect } = this.props;\n const visibleItemIndex = itemIndex - offset;\n if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {\n const item = items[visibleItemIndex];\n const { value } = item;\n onSelect(itemIndex, value);\n } else {\n onSelect(itemIndex, null);\n }\n }\n\n sendViewportUpdate(): void {\n if (!this.list.current || this.list.current.clientHeight === 0) {\n return;\n }\n\n const { onViewportChange, rowHeight } = this.props;\n const top = this.list.current.scrollTop;\n const bottom = top + this.list.current.clientHeight;\n\n const topRow = Math.floor(top / rowHeight);\n const bottomRow = Math.ceil(bottom / rowHeight);\n\n if (this.topRow !== topRow || this.bottomRow !== bottomRow) {\n this.topRow = topRow;\n this.bottomRow = bottomRow;\n onViewportChange(topRow, bottomRow);\n }\n }\n\n getElement(itemIndex: number): Element | null {\n if (this.list.current == null) {\n return null;\n }\n const elements = this.list.current.querySelectorAll('.value-list-item');\n return elements[itemIndex];\n }\n\n scrollIntoView(index: number): void {\n const element = this.getElement(index);\n element?.scrollIntoView({ block: 'center' });\n }\n\n render(): JSX.Element {\n const {\n className,\n disabled,\n isInvalid,\n items,\n itemCount,\n offset,\n rowHeight,\n 'data-testid': dataTestId,\n } = this.props;\n const itemElements = this.getCachedItems(\n items,\n rowHeight,\n offset,\n disabled\n );\n\n return (\n <div\n className={classNames(\n 'select-value-list-scroll-pane h-100 w-100',\n { 'is-invalid': isInvalid },\n className\n )}\n onBlur={this.handleBlur}\n onScroll={this.handleScroll}\n ref={this.list}\n data-testid={dataTestId}\n >\n <div\n className=\"select-value-list\"\n style={{ height: itemCount * rowHeight }}\n >\n <ol\n className=\"select-value-list-content\"\n style={{\n position: 'absolute',\n height: items.length * rowHeight,\n top: offset * rowHeight,\n left: 0,\n }}\n >\n {itemElements}\n </ol>\n </div>\n </div>\n );\n }\n}\n\nexport default SelectValueList;\n"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
/** Shim for using jquery in frameworks included by react (such as bootstrap) */
|
|
2
|
-
import $ from 'jquery';
|
|
3
|
-
declare global {
|
|
4
|
-
interface Window {
|
|
5
|
-
$: typeof $;
|
|
6
|
-
jQuery: typeof $;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
1
|
export type { Range } from '@deephaven/utils';
|
|
10
2
|
export { default as AutoCompleteInput } from './AutoCompleteInput';
|
|
11
3
|
export { default as AutoResizeTextarea } from './AutoResizeTextarea';
|
|
@@ -19,6 +11,8 @@ export { default as Collapse } from './Collapse';
|
|
|
19
11
|
export { default as Checkbox } from './Checkbox';
|
|
20
12
|
export { default as ComboBox } from './ComboBox';
|
|
21
13
|
export { default as CustomTimeSelect } from './CustomTimeSelect';
|
|
14
|
+
export { default as DateTimeInput } from './DateTimeInput';
|
|
15
|
+
export { default as DateInput } from './DateInput';
|
|
22
16
|
export { default as DebouncedSearchInput } from './DebouncedSearchInput';
|
|
23
17
|
export { default as DeephavenSpinner } from './DeephavenSpinner';
|
|
24
18
|
export { default as DraggableItemList } from './DraggableItemList';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
/** Shim for using jquery in frameworks included by react (such as bootstrap) */
|
|
2
|
-
import $ from 'jquery';
|
|
3
|
-
window.$ = $;
|
|
4
|
-
window.jQuery = $;
|
|
5
1
|
export { default as AutoCompleteInput } from "./AutoCompleteInput.js";
|
|
6
2
|
export { default as AutoResizeTextarea } from "./AutoResizeTextarea.js";
|
|
7
3
|
export { default as BasicModal } from "./BasicModal.js";
|
|
@@ -14,6 +10,8 @@ export { default as Collapse } from "./Collapse.js";
|
|
|
14
10
|
export { default as Checkbox } from "./Checkbox.js";
|
|
15
11
|
export { default as ComboBox } from "./ComboBox.js";
|
|
16
12
|
export { default as CustomTimeSelect } from "./CustomTimeSelect.js";
|
|
13
|
+
export { default as DateTimeInput } from "./DateTimeInput.js";
|
|
14
|
+
export { default as DateInput } from "./DateInput.js";
|
|
17
15
|
export { default as DebouncedSearchInput } from "./DebouncedSearchInput.js";
|
|
18
16
|
export { default as DeephavenSpinner } from "./DeephavenSpinner.js";
|
|
19
17
|
export { default as DraggableItemList } from "./DraggableItemList.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","AutoCompleteInput","AutoResizeTextarea","BasicModal","Button","ButtonGroup","ButtonOld","CardFlip","Collapse","Checkbox","ComboBox","CustomTimeSelect","DateTimeInput","DateInput","DebouncedSearchInput","DeephavenSpinner","DraggableItemList","DragUtils","EditableItemList","HierarchicalCheckboxMenu","ItemListItem","LoadingOverlay","LoadingSpinner","DropdownMenu","MaskedInput","Option","RadioGroup","RadioItem","Select","SearchInput","SelectValueList","SocketedButton","ThemeExport","TimeInput","TimeSlider","ToastNotification","UISwitch","ValidateLabelInput"],"sources":["../src/index.ts"],"sourcesContent":["export type { Range } from '@deephaven/utils';\nexport { default as AutoCompleteInput } from './AutoCompleteInput';\nexport { default as AutoResizeTextarea } from './AutoResizeTextarea';\nexport { default as BasicModal } from './BasicModal';\nexport { default as Button } from './Button';\nexport { default as ButtonGroup } from './ButtonGroup';\nexport { default as ButtonOld } from './ButtonOld';\nexport { default as CardFlip } from './CardFlip';\nexport * from './context-actions';\nexport { default as Collapse } from './Collapse';\nexport { default as Checkbox } from './Checkbox';\nexport { default as ComboBox } from './ComboBox';\nexport { default as CustomTimeSelect } from './CustomTimeSelect';\nexport { default as DateTimeInput } from './DateTimeInput';\nexport { default as DateInput } from './DateInput';\nexport { default as DebouncedSearchInput } from './DebouncedSearchInput';\nexport { default as DeephavenSpinner } from './DeephavenSpinner';\nexport { default as DraggableItemList } from './DraggableItemList';\nexport * from './DraggableItemList';\nexport { default as DragUtils } from './DragUtils';\nexport { default as EditableItemList } from './EditableItemList';\nexport { default as HierarchicalCheckboxMenu } from './HierarchicalCheckboxMenu';\nexport * from './HierarchicalCheckboxMenu';\nexport * from './ItemList';\nexport { default as ItemListItem } from './ItemListItem';\nexport { default as LoadingOverlay } from './LoadingOverlay';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as DropdownMenu } from './menu-actions';\nexport * from './menu-actions';\nexport { default as MaskedInput } from './MaskedInput';\nexport * from './MaskedInput';\nexport * from './navigation';\nexport { default as Option } from './Option';\nexport * from './popper';\nexport * from './modal';\nexport { default as RadioGroup } from './RadioGroup';\nexport { default as RadioItem } from './RadioItem';\nexport { default as Select } from './Select';\nexport { default as SearchInput } from './SearchInput';\nexport { default as SelectValueList } from './SelectValueList';\nexport * from './SelectValueList';\nexport * from './shortcuts';\nexport { default as SocketedButton } from './SocketedButton';\nexport { default as ThemeExport } from './ThemeExport';\nexport { default as TimeInput } from './TimeInput';\nexport { default as TimeSlider } from './TimeSlider';\nexport { default as ToastNotification } from './ToastNotification';\nexport { default as UISwitch } from './UISwitch';\nexport { default as ValidateLabelInput } from './ValidateLabelInput';\n"],"mappings":"SACSA,OAAO,IAAIC,iB;SACXD,OAAO,IAAIE,kB;SACXF,OAAO,IAAIG,U;SACXH,OAAO,IAAII,M;SACXJ,OAAO,IAAIK,W;SACXL,OAAO,IAAIM,S;SACXN,OAAO,IAAIO,Q;;SAEXP,OAAO,IAAIQ,Q;SACXR,OAAO,IAAIS,Q;SACXT,OAAO,IAAIU,Q;SACXV,OAAO,IAAIW,gB;SACXX,OAAO,IAAIY,a;SACXZ,OAAO,IAAIa,S;SACXb,OAAO,IAAIc,oB;SACXd,OAAO,IAAIe,gB;SACXf,OAAO,IAAIgB,iB;;SAEXhB,OAAO,IAAIiB,S;SACXjB,OAAO,IAAIkB,gB;SACXlB,OAAO,IAAImB,wB;;;SAGXnB,OAAO,IAAIoB,Y;SACXpB,OAAO,IAAIqB,c;SACXrB,OAAO,IAAIsB,c;SACXtB,OAAO,IAAIuB,Y;;SAEXvB,OAAO,IAAIwB,W;;;SAGXxB,OAAO,IAAIyB,M;;;SAGXzB,OAAO,IAAI0B,U;SACX1B,OAAO,IAAI2B,S;SACX3B,OAAO,IAAI4B,M;SACX5B,OAAO,IAAI6B,W;SACX7B,OAAO,IAAI8B,e;;;SAGX9B,OAAO,IAAI+B,c;SACX/B,OAAO,IAAIgC,W;SACXhC,OAAO,IAAIiC,S;SACXjC,OAAO,IAAIkC,U;SACXlC,OAAO,IAAImC,iB;SACXnC,OAAO,IAAIoC,Q;SACXpC,OAAO,IAAIqC,kB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deephaven/components",
|
|
3
|
-
"version": "0.17.1-beta.
|
|
3
|
+
"version": "0.17.1-beta.4+1995291",
|
|
4
4
|
"description": "Deephaven React component library",
|
|
5
5
|
"author": "Deephaven Data Labs LLC",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,16 +31,15 @@
|
|
|
31
31
|
"start": "cross-env NODE_ENV=development npm run watch"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@deephaven/icons": "^0.17.1-beta.
|
|
35
|
-
"@deephaven/log": "^0.17.1-beta.
|
|
36
|
-
"@deephaven/react-hooks": "^0.17.1-beta.
|
|
37
|
-
"@deephaven/utils": "^0.17.1-beta.
|
|
34
|
+
"@deephaven/icons": "^0.17.1-beta.4+1995291",
|
|
35
|
+
"@deephaven/log": "^0.17.1-beta.4+1995291",
|
|
36
|
+
"@deephaven/react-hooks": "^0.17.1-beta.4+1995291",
|
|
37
|
+
"@deephaven/utils": "^0.17.1-beta.4+1995291",
|
|
38
38
|
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
|
39
39
|
"@fortawesome/react-fontawesome": "^0.1.18",
|
|
40
40
|
"bootstrap": "4.6.1",
|
|
41
41
|
"classnames": "^2.3.1",
|
|
42
42
|
"event-target-shim": "^6.0.2",
|
|
43
|
-
"jquery": "^3.6.0",
|
|
44
43
|
"lodash.clamp": "^4.0.3",
|
|
45
44
|
"lodash.debounce": "^4.0.8",
|
|
46
45
|
"lodash.flatten": "^4.4.0",
|
|
@@ -58,8 +57,8 @@
|
|
|
58
57
|
"react-dom": "^17.x"
|
|
59
58
|
},
|
|
60
59
|
"devDependencies": {
|
|
61
|
-
"@deephaven/mocks": "^0.17.1-beta.
|
|
62
|
-
"@deephaven/tsconfig": "^0.17.1-beta.
|
|
60
|
+
"@deephaven/mocks": "^0.17.1-beta.4+1995291",
|
|
61
|
+
"@deephaven/tsconfig": "^0.17.1-beta.4+1995291"
|
|
63
62
|
},
|
|
64
63
|
"files": [
|
|
65
64
|
"dist",
|
|
@@ -71,5 +70,5 @@
|
|
|
71
70
|
"publishConfig": {
|
|
72
71
|
"access": "public"
|
|
73
72
|
},
|
|
74
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "1995291c1352e7571fa62963606a1108a6e8b3ea"
|
|
75
74
|
}
|