@vuu-ui/vuu-table-extras 0.9.0 → 0.9.2

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":"BackgroundCell.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataAndColumnUnchanged,\n DOWN1,\n DOWN2,\n isTypeDescriptor,\n metadataKeys,\n registerComponent,\n UP1,\n UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport { DataValueType } from \"@vuu-ui/vuu-data-types\";\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst { KEY } = metadataKeys;\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n ArrowOnly: \"arrow\",\n BackgroundOnly: \"bg-only\",\n ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: DataValueType) => {\n if (isTypeDescriptor(colType) && colType.renderer) {\n if (\"flashStyle\" in colType.renderer) {\n return colType.renderer[\"flashStyle\"];\n }\n }\n return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n column,\n columnMap,\n row,\n}: TableCellProps) {\n //TODO what about click handling\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-background-cell\",\n css: backgroundCellCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"vuu-background-keyframes\",\n css: backgroundKeyFramesCss,\n window: targetWindow,\n });\n\n const { name, type, valueFormatter } = column;\n const dataIdx = columnMap[name];\n const value = row[dataIdx];\n const flashStyle = getFlashStyle(type);\n const direction = useDirection(row[KEY], value, column);\n const arrow =\n flashStyle === FlashStyle.ArrowOnly ||\n flashStyle === FlashStyle.ArrowBackground\n ? direction === UP1 || direction === UP2\n ? CHAR_ARROW_UP\n : direction === DOWN1 || direction === DOWN2\n ? CHAR_ARROW_DOWN\n : null\n : null;\n\n const dirClass = direction ? ` ` + direction : \"\";\n\n const className = cx(classBase, dirClass, {\n [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n });\n\n return (\n <div className={className} tabIndex={-1}>\n <div className={`${classBase}-arrow`}>{arrow}</div>\n {valueFormatter(row[dataIdx])}\n </div>\n );\n}, dataAndColumnUnchanged);\n\nregisterComponent(\n \"vuu.price-move-background\",\n BackgroundCell,\n \"cell-renderer\",\n {\n description: \"Change background color of cell when value changes\",\n configEditor: \"BackgroundCellConfigurationEditor\",\n label: \"Background Flash\",\n serverDataType: [\"long\", \"int\", \"double\"],\n },\n);\n"],"names":["metadataKeys","isTypeDescriptor","memo","BackgroundCell","useWindow","useComponentCssInjection","backgroundCellCss","backgroundKeyFramesCss","useDirection","UP1","UP2","DOWN1","DOWN2","jsxs","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"BackgroundCell.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataAndColumnUnchanged,\n DOWN1,\n DOWN2,\n isTypeDescriptor,\n metadataKeys,\n registerComponent,\n UP1,\n UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport { DataValueType } from \"@vuu-ui/vuu-data-types\";\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst { KEY } = metadataKeys;\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n ArrowOnly: \"arrow\",\n BackgroundOnly: \"bg-only\",\n ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: DataValueType) => {\n if (isTypeDescriptor(colType) && colType.renderer) {\n if (\"flashStyle\" in colType.renderer) {\n return colType.renderer[\"flashStyle\"];\n }\n }\n return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n column,\n columnMap,\n row,\n}: TableCellRendererProps) {\n //TODO what about click handling\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-background-cell\",\n css: backgroundCellCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"vuu-background-keyframes\",\n css: backgroundKeyFramesCss,\n window: targetWindow,\n });\n\n const { name, type, valueFormatter } = column;\n const dataIdx = columnMap[name];\n const value = row[dataIdx];\n const flashStyle = getFlashStyle(type);\n const direction = useDirection(row[KEY], value, column);\n const arrow =\n flashStyle === FlashStyle.ArrowOnly ||\n flashStyle === FlashStyle.ArrowBackground\n ? direction === UP1 || direction === UP2\n ? CHAR_ARROW_UP\n : direction === DOWN1 || direction === DOWN2\n ? CHAR_ARROW_DOWN\n : null\n : null;\n\n const dirClass = direction ? ` ` + direction : \"\";\n\n const className = cx(classBase, dirClass, {\n [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n });\n\n return (\n <div className={className} tabIndex={-1}>\n <div className={`${classBase}-arrow`}>{arrow}</div>\n {valueFormatter(row[dataIdx])}\n </div>\n );\n}, dataAndColumnUnchanged);\n\nregisterComponent(\n \"vuu.price-move-background\",\n BackgroundCell,\n \"cell-renderer\",\n {\n description: \"Change background color of cell when value changes\",\n configEditor: \"BackgroundCellConfigurationEditor\",\n label: \"Background Flash\",\n serverDataType: [\"long\", \"int\", \"double\"],\n },\n);\n"],"names":["metadataKeys","isTypeDescriptor","memo","BackgroundCell","useWindow","useComponentCssInjection","backgroundCellCss","backgroundKeyFramesCss","useDirection","UP1","UP2","DOWN1","DOWN2","jsxs","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - 20px);\n --vuu-icon-size: 22px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 4px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 6px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n }\n}\n";
3
+ var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - 20px);\n --vuu-icon-size: 8px;\n --vuu-icon-top: -2px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 2px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 2px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n &.saltDropdown:focus {\n outline: none;\n }\n }\n\n .vuuTableDropdownCell:focus {\n border: solid 2px var(--salt-focused-outlineColor);\n }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n} */\n";
4
4
 
5
5
  module.exports = dropdownCellCss;
6
6
  //# sourceMappingURL=DropdownCell.css.js.map
@@ -2,7 +2,6 @@
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var vuuDataReact = require('@vuu-ui/vuu-data-react');
5
- var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
6
5
  var vuuUtils = require('@vuu-ui/vuu-utils');
7
6
  var core = require('@salt-ds/core');
8
7
  var styles = require('@salt-ds/styles');
@@ -14,7 +13,7 @@ const classBase = "vuuTableDropdownCell";
14
13
  const DropdownCell = react.memo(function DropdownCell2({
15
14
  column,
16
15
  columnMap,
17
- onCommit = vuuUiControls.WarnCommit,
16
+ onEdit,
18
17
  row
19
18
  }) {
20
19
  const targetWindow = window.useWindow();
@@ -38,16 +37,22 @@ const DropdownCell = react.memo(function DropdownCell2({
38
37
  }
39
38
  }, []);
40
39
  const handleSelectionChange = react.useCallback(
41
- (evt, [selectedOption2]) => {
40
+ async (evt, [selectedOption2]) => {
42
41
  if (selectedOption2) {
43
- onCommit(selectedOption2.value).then((response) => {
44
- if (response === true && evt) {
45
- vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
46
- }
47
- });
42
+ const response = await onEdit?.(
43
+ {
44
+ editType: "commit",
45
+ previousValue: valueRef.current?.value,
46
+ value: selectedOption2.value
47
+ },
48
+ "commit"
49
+ );
50
+ if (response === true) {
51
+ vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
52
+ }
48
53
  }
49
54
  },
50
- [onCommit]
55
+ [onEdit]
51
56
  );
52
57
  const handleClick = react.useCallback(() => {
53
58
  if (!open) {
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownCell.js","sources":["../../../src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onCommit = WarnCommit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>();\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n (evt, [selectedOption]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n onCommit(selectedOption.value as VuuColumnDataType).then((response) => {\n if (response === true && evt) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n });\n }\n },\n [onCommit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","WarnCommit","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"DropdownCell.js","sources":["../../../src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>();\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (response === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"BackgroundCell.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataAndColumnUnchanged,\n DOWN1,\n DOWN2,\n isTypeDescriptor,\n metadataKeys,\n registerComponent,\n UP1,\n UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport { DataValueType } from \"@vuu-ui/vuu-data-types\";\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst { KEY } = metadataKeys;\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n ArrowOnly: \"arrow\",\n BackgroundOnly: \"bg-only\",\n ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: DataValueType) => {\n if (isTypeDescriptor(colType) && colType.renderer) {\n if (\"flashStyle\" in colType.renderer) {\n return colType.renderer[\"flashStyle\"];\n }\n }\n return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n column,\n columnMap,\n row,\n}: TableCellProps) {\n //TODO what about click handling\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-background-cell\",\n css: backgroundCellCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"vuu-background-keyframes\",\n css: backgroundKeyFramesCss,\n window: targetWindow,\n });\n\n const { name, type, valueFormatter } = column;\n const dataIdx = columnMap[name];\n const value = row[dataIdx];\n const flashStyle = getFlashStyle(type);\n const direction = useDirection(row[KEY], value, column);\n const arrow =\n flashStyle === FlashStyle.ArrowOnly ||\n flashStyle === FlashStyle.ArrowBackground\n ? direction === UP1 || direction === UP2\n ? CHAR_ARROW_UP\n : direction === DOWN1 || direction === DOWN2\n ? CHAR_ARROW_DOWN\n : null\n : null;\n\n const dirClass = direction ? ` ` + direction : \"\";\n\n const className = cx(classBase, dirClass, {\n [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n });\n\n return (\n <div className={className} tabIndex={-1}>\n <div className={`${classBase}-arrow`}>{arrow}</div>\n {valueFormatter(row[dataIdx])}\n </div>\n );\n}, dataAndColumnUnchanged);\n\nregisterComponent(\n \"vuu.price-move-background\",\n BackgroundCell,\n \"cell-renderer\",\n {\n description: \"Change background color of cell when value changes\",\n configEditor: \"BackgroundCellConfigurationEditor\",\n label: \"Background Flash\",\n serverDataType: [\"long\", \"int\", \"double\"],\n },\n);\n"],"names":["BackgroundCell"],"mappings":"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"}
1
+ {"version":3,"file":"BackgroundCell.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataAndColumnUnchanged,\n DOWN1,\n DOWN2,\n isTypeDescriptor,\n metadataKeys,\n registerComponent,\n UP1,\n UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport { DataValueType } from \"@vuu-ui/vuu-data-types\";\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst { KEY } = metadataKeys;\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n ArrowOnly: \"arrow\",\n BackgroundOnly: \"bg-only\",\n ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: DataValueType) => {\n if (isTypeDescriptor(colType) && colType.renderer) {\n if (\"flashStyle\" in colType.renderer) {\n return colType.renderer[\"flashStyle\"];\n }\n }\n return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n column,\n columnMap,\n row,\n}: TableCellRendererProps) {\n //TODO what about click handling\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-background-cell\",\n css: backgroundCellCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"vuu-background-keyframes\",\n css: backgroundKeyFramesCss,\n window: targetWindow,\n });\n\n const { name, type, valueFormatter } = column;\n const dataIdx = columnMap[name];\n const value = row[dataIdx];\n const flashStyle = getFlashStyle(type);\n const direction = useDirection(row[KEY], value, column);\n const arrow =\n flashStyle === FlashStyle.ArrowOnly ||\n flashStyle === FlashStyle.ArrowBackground\n ? direction === UP1 || direction === UP2\n ? CHAR_ARROW_UP\n : direction === DOWN1 || direction === DOWN2\n ? CHAR_ARROW_DOWN\n : null\n : null;\n\n const dirClass = direction ? ` ` + direction : \"\";\n\n const className = cx(classBase, dirClass, {\n [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n });\n\n return (\n <div className={className} tabIndex={-1}>\n <div className={`${classBase}-arrow`}>{arrow}</div>\n {valueFormatter(row[dataIdx])}\n </div>\n );\n}, dataAndColumnUnchanged);\n\nregisterComponent(\n \"vuu.price-move-background\",\n BackgroundCell,\n \"cell-renderer\",\n {\n description: \"Change background color of cell when value changes\",\n configEditor: \"BackgroundCellConfigurationEditor\",\n label: \"Background Flash\",\n serverDataType: [\"long\", \"int\", \"double\"],\n },\n);\n"],"names":["BackgroundCell"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - 20px);\n --vuu-icon-size: 22px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 4px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 6px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n }\n}\n";
1
+ var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - 20px);\n --vuu-icon-size: 8px;\n --vuu-icon-top: -2px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 2px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 2px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n &.saltDropdown:focus {\n outline: none;\n }\n }\n\n .vuuTableDropdownCell:focus {\n border: solid 2px var(--salt-focused-outlineColor);\n }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n} */\n";
2
2
 
3
3
  export { dropdownCellCss as default };
4
4
  //# sourceMappingURL=DropdownCell.css.js.map
@@ -1,6 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { useLookupValues } from '@vuu-ui/vuu-data-react';
3
- import { WarnCommit } from '@vuu-ui/vuu-ui-controls';
4
3
  import { getSelectedOption, dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
5
4
  import { Dropdown, Option } from '@salt-ds/core';
6
5
  import { useComponentCssInjection } from '@salt-ds/styles';
@@ -12,7 +11,7 @@ const classBase = "vuuTableDropdownCell";
12
11
  const DropdownCell = memo(function DropdownCell2({
13
12
  column,
14
13
  columnMap,
15
- onCommit = WarnCommit,
14
+ onEdit,
16
15
  row
17
16
  }) {
18
17
  const targetWindow = useWindow();
@@ -36,16 +35,22 @@ const DropdownCell = memo(function DropdownCell2({
36
35
  }
37
36
  }, []);
38
37
  const handleSelectionChange = useCallback(
39
- (evt, [selectedOption2]) => {
38
+ async (evt, [selectedOption2]) => {
40
39
  if (selectedOption2) {
41
- onCommit(selectedOption2.value).then((response) => {
42
- if (response === true && evt) {
43
- dispatchCustomEvent(evt.target, "vuu-commit");
44
- }
45
- });
40
+ const response = await onEdit?.(
41
+ {
42
+ editType: "commit",
43
+ previousValue: valueRef.current?.value,
44
+ value: selectedOption2.value
45
+ },
46
+ "commit"
47
+ );
48
+ if (response === true) {
49
+ dispatchCustomEvent(evt.target, "vuu-commit");
50
+ }
46
51
  }
47
52
  },
48
- [onCommit]
53
+ [onEdit]
49
54
  );
50
55
  const handleClick = useCallback(() => {
51
56
  if (!open) {
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownCell.js","sources":["../../../src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onCommit = WarnCommit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>();\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n (evt, [selectedOption]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n onCommit(selectedOption.value as VuuColumnDataType).then((response) => {\n if (response === true && evt) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n });\n }\n },\n [onCommit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":"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"}
1
+ {"version":3,"file":"DropdownCell.js","sources":["../../../src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>();\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (response === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":"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"}
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
- "version": "0.9.0",
2
+ "version": "0.9.2",
3
3
  "author": "heswell",
4
4
  "license": "Apache-2.0",
5
5
  "devDependencies": {
6
- "@vuu-ui/vuu-filter-types": "0.9.0",
7
- "@vuu-ui/vuu-protocol-types": "0.9.0"
6
+ "@vuu-ui/vuu-filter-types": "0.9.2",
7
+ "@vuu-ui/vuu-protocol-types": "0.9.2"
8
8
  },
9
9
  "dependencies": {
10
- "@vuu-ui/vuu-codemirror": "0.9.0",
11
- "@vuu-ui/vuu-data-react": "0.9.0",
12
- "@vuu-ui/vuu-data-types": "0.9.0",
13
- "@vuu-ui/vuu-table-types": "0.9.0",
14
- "@vuu-ui/vuu-layout": "0.9.0",
15
- "@vuu-ui/vuu-popups": "0.9.0",
16
- "@vuu-ui/vuu-table": "0.9.0",
17
- "@vuu-ui/vuu-utils": "0.9.0",
18
- "@vuu-ui/vuu-ui-controls": "0.9.0",
10
+ "@vuu-ui/vuu-codemirror": "0.9.2",
11
+ "@vuu-ui/vuu-data-react": "0.9.2",
12
+ "@vuu-ui/vuu-data-types": "0.9.2",
13
+ "@vuu-ui/vuu-table-types": "0.9.2",
14
+ "@vuu-ui/vuu-layout": "0.9.2",
15
+ "@vuu-ui/vuu-popups": "0.9.2",
16
+ "@vuu-ui/vuu-table": "0.9.2",
17
+ "@vuu-ui/vuu-utils": "0.9.2",
18
+ "@vuu-ui/vuu-ui-controls": "0.9.2",
19
19
  "@lezer/lr": "1.3.4",
20
20
  "@salt-ds/core": "1.34.0",
21
21
  "@salt-ds/styles": "0.2.1",
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
- import { TableCellProps } from "@vuu-ui/vuu-table-types";
3
- export declare const BackgroundCell: import("react").NamedExoticComponent<TableCellProps>;
2
+ import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
3
+ export declare const BackgroundCell: import("react").NamedExoticComponent<TableCellRendererProps>;