@deephaven/components 0.20.0 → 0.20.1-beta.12
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableItemList.d.ts","sourceRoot":"","sources":["../src/EditableItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,GAAG,IAAI,CAAC;CAC3C;AAGD,QAAA,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"EditableItemList.d.ts","sourceRoot":"","sources":["../src/EditableItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,GAAG,IAAI,CAAC;CAC3C;AAGD,QAAA,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,MAAM,YA+H9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
package/dist/EditableItemList.js
CHANGED
|
@@ -29,6 +29,10 @@ var EditableItemList = props => {
|
|
|
29
29
|
setSelectedIndex(newIndex === -1 ? undefined : newIndex);
|
|
30
30
|
}, [items, selectedIndex, onDelete]);
|
|
31
31
|
var handleAdd = useCallback(() => {
|
|
32
|
+
if (value === '') {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
|
|
32
36
|
var validationError = validate(value);
|
|
33
37
|
|
|
34
38
|
if (validationError == null) {
|
|
@@ -43,7 +47,7 @@ var EditableItemList = props => {
|
|
|
43
47
|
value: inputValue
|
|
44
48
|
} = event.target;
|
|
45
49
|
setValue(inputValue);
|
|
46
|
-
setInputError(validate(inputValue));
|
|
50
|
+
setInputError(inputValue === '' ? null : validate(inputValue));
|
|
47
51
|
}, [validate]);
|
|
48
52
|
var handleInputFocus = useCallback(() => {
|
|
49
53
|
setSelectedIndex(undefined);
|
|
@@ -91,15 +95,17 @@ var EditableItemList = props => {
|
|
|
91
95
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
92
96
|
kind: "ghost",
|
|
93
97
|
onClick: handleAdd,
|
|
94
|
-
disabled: inputError != null || value
|
|
98
|
+
disabled: inputError != null || value === '',
|
|
95
99
|
icon: vsAdd,
|
|
96
|
-
tooltip: "Add new item"
|
|
100
|
+
tooltip: "Add new item",
|
|
101
|
+
"data-testid": "add-item-button"
|
|
97
102
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
98
103
|
kind: "ghost",
|
|
99
104
|
onClick: handleDelete,
|
|
100
105
|
disabled: selectedIndex === undefined,
|
|
101
106
|
icon: vsTrash,
|
|
102
|
-
tooltip: "Delete selected item"
|
|
107
|
+
tooltip: "Delete selected item",
|
|
108
|
+
"data-testid": "delete-item-button"
|
|
103
109
|
}))));
|
|
104
110
|
};
|
|
105
111
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableItemList.js","names":["React","useCallback","useMemo","useState","classNames","clamp","vsAdd","vsTrash","Button","ItemList","EditableItemList","props","isInvalid","items","onAdd","undefined","onDelete","validate","inputError","setInputError","selectedIndex","setSelectedIndex","value","setValue","handleSelect","index","handleDelete","newIndex","length","handleAdd","validationError","handleInputChange","event","inputValue","target","handleInputFocus","handleInputKeyDown","key","selectedRanges","containerHeight","DEFAULT_ROW_HEIGHT","height","map","item","isSelected"],"sources":["../src/EditableItemList.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n KeyboardEvent,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport clamp from 'lodash.clamp';\nimport { vsAdd, vsTrash } from '@deephaven/icons';\nimport { Range } from '@deephaven/utils';\nimport { Button, ItemList } from '.';\n\ninterface EditableItemListProps {\n isInvalid?: boolean;\n items: string[];\n onDelete: (item: string) => void;\n onAdd: (item: string) => void;\n validate?: (item: string) => Error | null;\n}\n\n// Display a list of items with an input for adding new items, and Add/Delete buttons\nconst EditableItemList = (props: EditableItemListProps): React.ReactElement => {\n const {\n isInvalid = false,\n items,\n onAdd = () => undefined,\n onDelete = () => undefined,\n validate = () => null,\n } = props;\n const [inputError, setInputError] = useState<Error | null>(null);\n const [selectedIndex, setSelectedIndex] = useState<number | undefined>();\n const [value, setValue] = useState('');\n\n const handleSelect = useCallback(index => {\n setSelectedIndex(index);\n }, []);\n\n const handleDelete = useCallback(() => {\n const newIndex =\n selectedIndex === items.length - 1 ? items.length - 2 : selectedIndex;\n if (\n selectedIndex !== undefined &&\n selectedIndex >= 0 &&\n selectedIndex < items.length\n ) {\n onDelete(items[selectedIndex]);\n }\n setSelectedIndex(newIndex === -1 ? undefined : newIndex);\n }, [items, selectedIndex, onDelete]);\n\n const handleAdd = useCallback(() => {\n const validationError = validate(value);\n if (validationError == null) {\n onAdd(value);\n setValue('');\n } else {\n setInputError(validationError);\n }\n }, [value, onAdd, validate]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value: inputValue } = event.target;\n setValue(inputValue);\n setInputError(validate(inputValue));\n },\n [validate]\n );\n\n const handleInputFocus = useCallback(() => {\n setSelectedIndex(undefined);\n }, []);\n\n const handleInputKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleAdd();\n }\n },\n [handleAdd]\n );\n\n const selectedRanges = useMemo(\n (): Range[] =>\n selectedIndex === undefined ? [] : [[selectedIndex, selectedIndex]],\n [selectedIndex]\n );\n const containerHeight = useMemo(\n (): number => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT,\n [items.length]\n );\n\n return (\n <div\n className={classNames('editable-item-list-container', {\n 'is-invalid': isInvalid,\n })}\n >\n <div style={{ height: containerHeight }}>\n <ItemList\n itemCount={items.length}\n items={items.map((item, index) => ({\n value: item,\n isSelected: index === selectedIndex,\n }))}\n offset={0}\n onSelect={handleSelect}\n selectedRanges={selectedRanges}\n />\n </div>\n <div className=\"d-flex flex-row pt-2\">\n <div className=\"d-flex flex-grow-1\">\n <input\n className={classNames('form-control', {\n 'is-invalid': inputError != null,\n })}\n placeholder=\"Enter value\"\n type=\"text\"\n value={value}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onKeyDown={handleInputKeyDown}\n />\n </div>\n <div className=\"d-flex align-items-start mt-1 ml-2\">\n <Button\n kind=\"ghost\"\n onClick={handleAdd}\n disabled={inputError != null || value
|
|
1
|
+
{"version":3,"file":"EditableItemList.js","names":["React","useCallback","useMemo","useState","classNames","clamp","vsAdd","vsTrash","Button","ItemList","EditableItemList","props","isInvalid","items","onAdd","undefined","onDelete","validate","inputError","setInputError","selectedIndex","setSelectedIndex","value","setValue","handleSelect","index","handleDelete","newIndex","length","handleAdd","validationError","handleInputChange","event","inputValue","target","handleInputFocus","handleInputKeyDown","key","selectedRanges","containerHeight","DEFAULT_ROW_HEIGHT","height","map","item","isSelected"],"sources":["../src/EditableItemList.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n KeyboardEvent,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport clamp from 'lodash.clamp';\nimport { vsAdd, vsTrash } from '@deephaven/icons';\nimport { Range } from '@deephaven/utils';\nimport { Button, ItemList } from '.';\n\ninterface EditableItemListProps {\n isInvalid?: boolean;\n items: string[];\n onDelete: (item: string) => void;\n onAdd: (item: string) => void;\n validate?: (item: string) => Error | null;\n}\n\n// Display a list of items with an input for adding new items, and Add/Delete buttons\nconst EditableItemList = (props: EditableItemListProps): React.ReactElement => {\n const {\n isInvalid = false,\n items,\n onAdd = () => undefined,\n onDelete = () => undefined,\n validate = () => null,\n } = props;\n const [inputError, setInputError] = useState<Error | null>(null);\n const [selectedIndex, setSelectedIndex] = useState<number | undefined>();\n const [value, setValue] = useState('');\n\n const handleSelect = useCallback(index => {\n setSelectedIndex(index);\n }, []);\n\n const handleDelete = useCallback(() => {\n const newIndex =\n selectedIndex === items.length - 1 ? items.length - 2 : selectedIndex;\n if (\n selectedIndex !== undefined &&\n selectedIndex >= 0 &&\n selectedIndex < items.length\n ) {\n onDelete(items[selectedIndex]);\n }\n setSelectedIndex(newIndex === -1 ? undefined : newIndex);\n }, [items, selectedIndex, onDelete]);\n\n const handleAdd = useCallback(() => {\n if (value === '') {\n return;\n }\n const validationError = validate(value);\n if (validationError == null) {\n onAdd(value);\n setValue('');\n } else {\n setInputError(validationError);\n }\n }, [value, onAdd, validate]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value: inputValue } = event.target;\n setValue(inputValue);\n setInputError(inputValue === '' ? null : validate(inputValue));\n },\n [validate]\n );\n\n const handleInputFocus = useCallback(() => {\n setSelectedIndex(undefined);\n }, []);\n\n const handleInputKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleAdd();\n }\n },\n [handleAdd]\n );\n\n const selectedRanges = useMemo(\n (): Range[] =>\n selectedIndex === undefined ? [] : [[selectedIndex, selectedIndex]],\n [selectedIndex]\n );\n const containerHeight = useMemo(\n (): number => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT,\n [items.length]\n );\n\n return (\n <div\n className={classNames('editable-item-list-container', {\n 'is-invalid': isInvalid,\n })}\n >\n <div style={{ height: containerHeight }}>\n <ItemList\n itemCount={items.length}\n items={items.map((item, index) => ({\n value: item,\n isSelected: index === selectedIndex,\n }))}\n offset={0}\n onSelect={handleSelect}\n selectedRanges={selectedRanges}\n />\n </div>\n <div className=\"d-flex flex-row pt-2\">\n <div className=\"d-flex flex-grow-1\">\n <input\n className={classNames('form-control', {\n 'is-invalid': inputError != null,\n })}\n placeholder=\"Enter value\"\n type=\"text\"\n value={value}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onKeyDown={handleInputKeyDown}\n />\n </div>\n <div className=\"d-flex align-items-start mt-1 ml-2\">\n <Button\n kind=\"ghost\"\n onClick={handleAdd}\n disabled={inputError != null || value === ''}\n icon={vsAdd}\n tooltip=\"Add new item\"\n data-testid=\"add-item-button\"\n />\n <Button\n kind=\"ghost\"\n onClick={handleDelete}\n disabled={selectedIndex === undefined}\n icon={vsTrash}\n tooltip=\"Delete selected item\"\n data-testid=\"delete-item-button\"\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default EditableItemList;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deephaven/components",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.1-beta.12+c57bd32",
|
|
4
4
|
"description": "Deephaven React component library",
|
|
5
5
|
"author": "Deephaven Data Labs LLC",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"start": "cross-env NODE_ENV=development npm run watch"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@deephaven/icons": "^0.20.
|
|
35
|
-
"@deephaven/log": "^0.20.
|
|
36
|
-
"@deephaven/react-hooks": "^0.20.
|
|
37
|
-
"@deephaven/utils": "^0.20.
|
|
34
|
+
"@deephaven/icons": "^0.20.1-beta.12+c57bd32",
|
|
35
|
+
"@deephaven/log": "^0.20.1-beta.12+c57bd32",
|
|
36
|
+
"@deephaven/react-hooks": "^0.20.1-beta.12+c57bd32",
|
|
37
|
+
"@deephaven/utils": "^0.20.1-beta.12+c57bd32",
|
|
38
38
|
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
|
39
39
|
"@fortawesome/react-fontawesome": "^0.1.18",
|
|
40
40
|
"bootstrap": "4.6.2",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"react-dom": "^17.x"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@deephaven/mocks": "^0.20.
|
|
61
|
-
"@deephaven/tsconfig": "^0.20.
|
|
60
|
+
"@deephaven/mocks": "^0.20.1-beta.12+c57bd32",
|
|
61
|
+
"@deephaven/tsconfig": "^0.20.1-beta.12+c57bd32"
|
|
62
62
|
},
|
|
63
63
|
"files": [
|
|
64
64
|
"dist",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "c57bd32ae2c2c122287998071e4b2e208d112ab3"
|
|
74
74
|
}
|