@vuu-ui/vuu-table-extras 0.13.95-alpha.2 → 0.13.95-alpha.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/cjs/cell-renderers/dropdown-cell/DropdownCell.js +1 -1
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -1
- package/cjs/freeze-control/useFreezeControl.js +1 -1
- package/cjs/freeze-control/useFreezeControl.js.map +1 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js +2 -2
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -1
- package/esm/freeze-control/useFreezeControl.js +1 -1
- package/esm/freeze-control/useFreezeControl.js.map +1 -1
- package/package.json +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/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
|
|
1
|
+
{"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/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>(undefined);\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":";;;;;;;;;;;AAyBA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,YAAA,GAAeA,UAAK,CAAA,SAASC,aAAa,CAAA;AAAA,EACrD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA;AAC7B,EAAA,MAAM,EAAE,MAAA,EAAW,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA;AACpD,EAAM,MAAA,QAAA,GAAWC,aAAmB,KAAS,CAAA,CAAA;AAE7C,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAS,QAAA,CAAA,OAAA,GAAUC,0BAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA;AAAA,GACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA;AAEtB,EAAM,MAAA,gBAAA,GAAmBC,iBAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAoB,iBAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AACxC,IAAA,IAAI,WAAW,KAAO,EAAA;AACpB,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA;AACf,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,qBAAwB,GAAAA,iBAAA;AAAA,IAC5B,OAAO,GAAA,EAAqB,CAACC,eAAc,CAAoB,KAAA;AAC7D,MAAA,IAAIA,eAAgB,EAAA;AAKlB,QAAA,MAAM,WAAW,MAAM,MAAA;AAAA,UACrB;AAAA,YACE,QAAU,EAAA,QAAA;AAAA,YACV,aAAA,EAAe,SAAS,OAAS,EAAA,KAAA;AAAA,YACjC,OAAOA,eAAe,CAAA;AAAA,WACxB;AAAA,UACA;AAAA,SACF;AACA,QAAA,IAAI,aAAa,IAAM,EAAA;AACrB,UAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAC7D;AACF,KACF;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAM,MAAA,WAAA,GAAcF,kBAAkD,MAAM;AAC1E,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,GACF,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAC,IAAM,EAAA;AAC9B,QAAA,CAAA,CAAE,cAAe,EAAA;AACjB,QAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,QAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAM,MAAA,EAAE,OAAS,EAAA,cAAA,EAAmB,GAAA,QAAA;AACpC,EACE,uBAAAG,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACX,WAAU,EAAA,eAAA;AAAA,MACV,OAAS,EAAA,WAAA;AAAA,MACT,gBAAkB,EAAA,aAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,iBAAmB,EAAA,qBAAA;AAAA,MACnB,IAAA;AAAA,MACA,QAAU,EAAA,cAAA,GAAiB,CAAC,cAAc,IAAI,EAAC;AAAA,MAC/C,OAAO,cAAgB,EAAA,KAAA;AAAA,MAEtB,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,CACvB,qBAAAD,cAAA,CAACE,WAAe,EAAA,EAAA,KAAA,EAAO,UACpB,EAAA,QAAA,EAAA,UAAA,CAAW,KADD,EAAA,EAAA,CAEb,CACD;AAAA;AAAA,GACH;AAEJ,CAAA,EAAGC,kCAAyB;AAE5BC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/useFreezeControl.ts"],"sourcesContent":["import {\n DataSource,\n DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { messageHasSize, useData } from \"@vuu-ui/vuu-utils\";\nimport { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\n\nexport interface FreezeProps {\n dataSource: DataSource;\n}\n\ntype FreezeState = {\n isFrozen: boolean;\n newRecordCount: number;\n};\n\nconst FreezeState = (\n dataSource: DataSource,\n newRecordCount: number,\n): FreezeState => ({\n isFrozen: dataSource.isFrozen ?? false,\n newRecordCount,\n});\n\nexport const useFreezeControl = ({ dataSource }: FreezeProps) => {\n const { VuuDataSource } = useData();\n const table = useMemo<VuuTable>(() => {\n if (dataSource.table === undefined) {\n throw Error(`[useFreezeControls] dataSource must have VuuTable`);\n }\n return dataSource.table;\n }, [dataSource]);\n const [freezeState, setFreezeState] = useState<FreezeState>(\n FreezeState(dataSource, 0),\n );\n\n const [startTrackingNewRows, stopTrackingNewRows] = useMemo(() => {\n let ds: DataSource | undefined = undefined;\n\n const dataCallback: DataSourceSubscribeCallback = (message) => {\n if (messageHasSize(message)) {\n setFreezeState((prev) => ({\n ...prev,\n newRecordCount: message.size,\n }));\n }\n };\n\n const start = (ts: number) => {\n ds = new VuuDataSource({ table });\n ds.subscribe(\n {\n filterSpec: {\n filter: `vuuCreatedTimestamp > ${ts}`,\n },\n },\n dataCallback,\n );\n };\n\n const stop = () => {\n ds?.unsubscribe();\n };\n\n return [start, stop];\n }, [VuuDataSource, table]);\n\n const handleToggleChange = useCallback(\n (evt: SyntheticEvent<HTMLButtonElement>) => {\n const value = (evt.target as HTMLButtonElement).value;\n if (value === \"frozen\") {\n dataSource.freeze?.();\n startTrackingNewRows(dataSource.freezeTimestamp as number);\n } else {\n dataSource.unfreeze?.();\n stopTrackingNewRows();\n }\n setFreezeState(FreezeState(dataSource, 0));\n },\n [dataSource, startTrackingNewRows, stopTrackingNewRows],\n );\n\n return {\n ...freezeState,\n onToggleChange: handleToggleChange,\n };\n};\n"],"names":["useData","useMemo","useState","messageHasSize","useCallback"],"mappings":";;;;;AAiBA,MAAM,WAAA,GAAc,CAClB,UAAA,EACA,cACiB,MAAA;AAAA,EACjB,QAAA,EAAU,WAAW,QAAY,IAAA,KAAA;AAAA,EACjC;AACF,CAAA,CAAA;AAEO,MAAM,gBAAmB,GAAA,CAAC,EAAE,UAAA,EAA8B,KAAA;AAC/D,EAAM,MAAA,EAAE,aAAc,EAAA,GAAIA,gBAAQ,EAAA;AAClC,EAAM,MAAA,KAAA,GAAQC,cAAkB,MAAM;AACpC,IAAI,IAAA,UAAA,CAAW,UAAU,KAAW,CAAA,EAAA;AAClC,MAAA,MAAM,MAAM,CAAmD,iDAAA,CAAA,CAAA;AAAA;AAEjE,IAAA,OAAO,UAAW,CAAA,KAAA;AAAA,GACpB,EAAG,CAAC,UAAU,CAAC,CAAA;AACf,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAC,cAAA;AAAA,IACpC,WAAA,CAAY,YAAY,CAAC;AAAA,GAC3B;AAEA,EAAA,MAAM,CAAC,oBAAA,EAAsB,mBAAmB,CAAA,GAAID,cAAQ,MAAM;AAChE,IAAA,IAAI,EAA6B,GAAA,KAAA,CAAA;AAEjC,IAAM,MAAA,YAAA,GAA4C,CAAC,OAAY,KAAA;AAC7D,MAAI,IAAAE,uBAAA,CAAe,OAAO,CAAG,EAAA;AAC3B,QAAA,cAAA,CAAe,CAAC,IAAU,MAAA;AAAA,UACxB,GAAG,IAAA;AAAA,UACH,gBAAgB,OAAQ,CAAA;AAAA,SACxB,CAAA,CAAA;AAAA;AACJ,KACF;AAEA,IAAM,MAAA,KAAA,GAAQ,CAAC,EAAe,KAAA;AAC5B,
|
|
1
|
+
{"version":3,"file":"useFreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/useFreezeControl.ts"],"sourcesContent":["import {\n DataSource,\n DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { messageHasSize, useData } from \"@vuu-ui/vuu-utils\";\nimport { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\n\nexport interface FreezeProps {\n dataSource: DataSource;\n}\n\ntype FreezeState = {\n isFrozen: boolean;\n newRecordCount: number;\n};\n\nconst FreezeState = (\n dataSource: DataSource,\n newRecordCount: number,\n): FreezeState => ({\n isFrozen: dataSource.isFrozen ?? false,\n newRecordCount,\n});\n\nexport const useFreezeControl = ({ dataSource }: FreezeProps) => {\n const { VuuDataSource } = useData();\n const table = useMemo<VuuTable>(() => {\n if (dataSource.table === undefined) {\n throw Error(`[useFreezeControls] dataSource must have VuuTable`);\n }\n return dataSource.table;\n }, [dataSource]);\n const [freezeState, setFreezeState] = useState<FreezeState>(\n FreezeState(dataSource, 0),\n );\n\n const [startTrackingNewRows, stopTrackingNewRows] = useMemo(() => {\n let ds: DataSource | undefined = undefined;\n\n const dataCallback: DataSourceSubscribeCallback = (message) => {\n if (messageHasSize(message)) {\n setFreezeState((prev) => ({\n ...prev,\n newRecordCount: message.size,\n }));\n }\n };\n\n const start = (ts: number) => {\n ds = new VuuDataSource({ columns: [\"vuuCreatedTimestamp\"], table });\n ds.subscribe(\n {\n filterSpec: {\n filter: `vuuCreatedTimestamp > ${ts}`,\n },\n },\n dataCallback,\n );\n };\n\n const stop = () => {\n ds?.unsubscribe();\n };\n\n return [start, stop];\n }, [VuuDataSource, table]);\n\n const handleToggleChange = useCallback(\n (evt: SyntheticEvent<HTMLButtonElement>) => {\n const value = (evt.target as HTMLButtonElement).value;\n if (value === \"frozen\") {\n dataSource.freeze?.();\n startTrackingNewRows(dataSource.freezeTimestamp as number);\n } else {\n dataSource.unfreeze?.();\n stopTrackingNewRows();\n }\n setFreezeState(FreezeState(dataSource, 0));\n },\n [dataSource, startTrackingNewRows, stopTrackingNewRows],\n );\n\n return {\n ...freezeState,\n onToggleChange: handleToggleChange,\n };\n};\n"],"names":["useData","useMemo","useState","messageHasSize","useCallback"],"mappings":";;;;;AAiBA,MAAM,WAAA,GAAc,CAClB,UAAA,EACA,cACiB,MAAA;AAAA,EACjB,QAAA,EAAU,WAAW,QAAY,IAAA,KAAA;AAAA,EACjC;AACF,CAAA,CAAA;AAEO,MAAM,gBAAmB,GAAA,CAAC,EAAE,UAAA,EAA8B,KAAA;AAC/D,EAAM,MAAA,EAAE,aAAc,EAAA,GAAIA,gBAAQ,EAAA;AAClC,EAAM,MAAA,KAAA,GAAQC,cAAkB,MAAM;AACpC,IAAI,IAAA,UAAA,CAAW,UAAU,KAAW,CAAA,EAAA;AAClC,MAAA,MAAM,MAAM,CAAmD,iDAAA,CAAA,CAAA;AAAA;AAEjE,IAAA,OAAO,UAAW,CAAA,KAAA;AAAA,GACpB,EAAG,CAAC,UAAU,CAAC,CAAA;AACf,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAC,cAAA;AAAA,IACpC,WAAA,CAAY,YAAY,CAAC;AAAA,GAC3B;AAEA,EAAA,MAAM,CAAC,oBAAA,EAAsB,mBAAmB,CAAA,GAAID,cAAQ,MAAM;AAChE,IAAA,IAAI,EAA6B,GAAA,KAAA,CAAA;AAEjC,IAAM,MAAA,YAAA,GAA4C,CAAC,OAAY,KAAA;AAC7D,MAAI,IAAAE,uBAAA,CAAe,OAAO,CAAG,EAAA;AAC3B,QAAA,cAAA,CAAe,CAAC,IAAU,MAAA;AAAA,UACxB,GAAG,IAAA;AAAA,UACH,gBAAgB,OAAQ,CAAA;AAAA,SACxB,CAAA,CAAA;AAAA;AACJ,KACF;AAEA,IAAM,MAAA,KAAA,GAAQ,CAAC,EAAe,KAAA;AAC5B,MAAK,EAAA,GAAA,IAAI,cAAc,EAAE,OAAA,EAAS,CAAC,qBAAqB,CAAA,EAAG,OAAO,CAAA;AAClE,MAAG,EAAA,CAAA,SAAA;AAAA,QACD;AAAA,UACE,UAAY,EAAA;AAAA,YACV,MAAA,EAAQ,yBAAyB,EAAE,CAAA;AAAA;AACrC,SACF;AAAA,QACA;AAAA,OACF;AAAA,KACF;AAEA,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,EAAA,EAAI,WAAY,EAAA;AAAA,KAClB;AAEA,IAAO,OAAA,CAAC,OAAO,IAAI,CAAA;AAAA,GAClB,EAAA,CAAC,aAAe,EAAA,KAAK,CAAC,CAAA;AAEzB,EAAA,MAAM,kBAAqB,GAAAC,iBAAA;AAAA,IACzB,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,KAAA,GAAS,IAAI,MAA6B,CAAA,KAAA;AAChD,MAAA,IAAI,UAAU,QAAU,EAAA;AACtB,QAAA,UAAA,CAAW,MAAS,IAAA;AACpB,QAAA,oBAAA,CAAqB,WAAW,eAAyB,CAAA;AAAA,OACpD,MAAA;AACL,QAAA,UAAA,CAAW,QAAW,IAAA;AACtB,QAAoB,mBAAA,EAAA;AAAA;AAEtB,MAAe,cAAA,CAAA,WAAA,CAAY,UAAY,EAAA,CAAC,CAAC,CAAA;AAAA,KAC3C;AAAA,IACA,CAAC,UAAY,EAAA,oBAAA,EAAsB,mBAAmB;AAAA,GACxD;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,WAAA;AAAA,IACH,cAAgB,EAAA;AAAA,GAClB;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useLookupValues } from '@vuu-ui/vuu-data-react';
|
|
3
|
-
import { getSelectedOption,
|
|
3
|
+
import { getSelectedOption, dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
|
|
4
4
|
import { Dropdown, Option } from '@salt-ds/core';
|
|
5
5
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
6
|
import { useWindow } from '@salt-ds/window';
|
|
@@ -45,7 +45,7 @@ const DropdownCell = memo(function DropdownCell2({
|
|
|
45
45
|
},
|
|
46
46
|
"commit"
|
|
47
47
|
);
|
|
48
|
-
if (
|
|
48
|
+
if (response === true) {
|
|
49
49
|
dispatchCustomEvent(evt.target, "vuu-commit");
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/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
|
|
1
|
+
{"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/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>(undefined);\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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/useFreezeControl.ts"],"sourcesContent":["import {\n DataSource,\n DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { messageHasSize, useData } from \"@vuu-ui/vuu-utils\";\nimport { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\n\nexport interface FreezeProps {\n dataSource: DataSource;\n}\n\ntype FreezeState = {\n isFrozen: boolean;\n newRecordCount: number;\n};\n\nconst FreezeState = (\n dataSource: DataSource,\n newRecordCount: number,\n): FreezeState => ({\n isFrozen: dataSource.isFrozen ?? false,\n newRecordCount,\n});\n\nexport const useFreezeControl = ({ dataSource }: FreezeProps) => {\n const { VuuDataSource } = useData();\n const table = useMemo<VuuTable>(() => {\n if (dataSource.table === undefined) {\n throw Error(`[useFreezeControls] dataSource must have VuuTable`);\n }\n return dataSource.table;\n }, [dataSource]);\n const [freezeState, setFreezeState] = useState<FreezeState>(\n FreezeState(dataSource, 0),\n );\n\n const [startTrackingNewRows, stopTrackingNewRows] = useMemo(() => {\n let ds: DataSource | undefined = undefined;\n\n const dataCallback: DataSourceSubscribeCallback = (message) => {\n if (messageHasSize(message)) {\n setFreezeState((prev) => ({\n ...prev,\n newRecordCount: message.size,\n }));\n }\n };\n\n const start = (ts: number) => {\n ds = new VuuDataSource({ table });\n ds.subscribe(\n {\n filterSpec: {\n filter: `vuuCreatedTimestamp > ${ts}`,\n },\n },\n dataCallback,\n );\n };\n\n const stop = () => {\n ds?.unsubscribe();\n };\n\n return [start, stop];\n }, [VuuDataSource, table]);\n\n const handleToggleChange = useCallback(\n (evt: SyntheticEvent<HTMLButtonElement>) => {\n const value = (evt.target as HTMLButtonElement).value;\n if (value === \"frozen\") {\n dataSource.freeze?.();\n startTrackingNewRows(dataSource.freezeTimestamp as number);\n } else {\n dataSource.unfreeze?.();\n stopTrackingNewRows();\n }\n setFreezeState(FreezeState(dataSource, 0));\n },\n [dataSource, startTrackingNewRows, stopTrackingNewRows],\n );\n\n return {\n ...freezeState,\n onToggleChange: handleToggleChange,\n };\n};\n"],"names":[],"mappings":";;;AAiBA,MAAM,WAAA,GAAc,CAClB,UAAA,EACA,cACiB,MAAA;AAAA,EACjB,QAAA,EAAU,WAAW,QAAY,IAAA,KAAA;AAAA,EACjC;AACF,CAAA,CAAA;AAEO,MAAM,gBAAmB,GAAA,CAAC,EAAE,UAAA,EAA8B,KAAA;AAC/D,EAAM,MAAA,EAAE,aAAc,EAAA,GAAI,OAAQ,EAAA;AAClC,EAAM,MAAA,KAAA,GAAQ,QAAkB,MAAM;AACpC,IAAI,IAAA,UAAA,CAAW,UAAU,KAAW,CAAA,EAAA;AAClC,MAAA,MAAM,MAAM,CAAmD,iDAAA,CAAA,CAAA;AAAA;AAEjE,IAAA,OAAO,UAAW,CAAA,KAAA;AAAA,GACpB,EAAG,CAAC,UAAU,CAAC,CAAA;AACf,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA;AAAA,IACpC,WAAA,CAAY,YAAY,CAAC;AAAA,GAC3B;AAEA,EAAA,MAAM,CAAC,oBAAA,EAAsB,mBAAmB,CAAA,GAAI,QAAQ,MAAM;AAChE,IAAA,IAAI,EAA6B,GAAA,KAAA,CAAA;AAEjC,IAAM,MAAA,YAAA,GAA4C,CAAC,OAAY,KAAA;AAC7D,MAAI,IAAA,cAAA,CAAe,OAAO,CAAG,EAAA;AAC3B,QAAA,cAAA,CAAe,CAAC,IAAU,MAAA;AAAA,UACxB,GAAG,IAAA;AAAA,UACH,gBAAgB,OAAQ,CAAA;AAAA,SACxB,CAAA,CAAA;AAAA;AACJ,KACF;AAEA,IAAM,MAAA,KAAA,GAAQ,CAAC,EAAe,KAAA;AAC5B,
|
|
1
|
+
{"version":3,"file":"useFreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/useFreezeControl.ts"],"sourcesContent":["import {\n DataSource,\n DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { messageHasSize, useData } from \"@vuu-ui/vuu-utils\";\nimport { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\n\nexport interface FreezeProps {\n dataSource: DataSource;\n}\n\ntype FreezeState = {\n isFrozen: boolean;\n newRecordCount: number;\n};\n\nconst FreezeState = (\n dataSource: DataSource,\n newRecordCount: number,\n): FreezeState => ({\n isFrozen: dataSource.isFrozen ?? false,\n newRecordCount,\n});\n\nexport const useFreezeControl = ({ dataSource }: FreezeProps) => {\n const { VuuDataSource } = useData();\n const table = useMemo<VuuTable>(() => {\n if (dataSource.table === undefined) {\n throw Error(`[useFreezeControls] dataSource must have VuuTable`);\n }\n return dataSource.table;\n }, [dataSource]);\n const [freezeState, setFreezeState] = useState<FreezeState>(\n FreezeState(dataSource, 0),\n );\n\n const [startTrackingNewRows, stopTrackingNewRows] = useMemo(() => {\n let ds: DataSource | undefined = undefined;\n\n const dataCallback: DataSourceSubscribeCallback = (message) => {\n if (messageHasSize(message)) {\n setFreezeState((prev) => ({\n ...prev,\n newRecordCount: message.size,\n }));\n }\n };\n\n const start = (ts: number) => {\n ds = new VuuDataSource({ columns: [\"vuuCreatedTimestamp\"], table });\n ds.subscribe(\n {\n filterSpec: {\n filter: `vuuCreatedTimestamp > ${ts}`,\n },\n },\n dataCallback,\n );\n };\n\n const stop = () => {\n ds?.unsubscribe();\n };\n\n return [start, stop];\n }, [VuuDataSource, table]);\n\n const handleToggleChange = useCallback(\n (evt: SyntheticEvent<HTMLButtonElement>) => {\n const value = (evt.target as HTMLButtonElement).value;\n if (value === \"frozen\") {\n dataSource.freeze?.();\n startTrackingNewRows(dataSource.freezeTimestamp as number);\n } else {\n dataSource.unfreeze?.();\n stopTrackingNewRows();\n }\n setFreezeState(FreezeState(dataSource, 0));\n },\n [dataSource, startTrackingNewRows, stopTrackingNewRows],\n );\n\n return {\n ...freezeState,\n onToggleChange: handleToggleChange,\n };\n};\n"],"names":[],"mappings":";;;AAiBA,MAAM,WAAA,GAAc,CAClB,UAAA,EACA,cACiB,MAAA;AAAA,EACjB,QAAA,EAAU,WAAW,QAAY,IAAA,KAAA;AAAA,EACjC;AACF,CAAA,CAAA;AAEO,MAAM,gBAAmB,GAAA,CAAC,EAAE,UAAA,EAA8B,KAAA;AAC/D,EAAM,MAAA,EAAE,aAAc,EAAA,GAAI,OAAQ,EAAA;AAClC,EAAM,MAAA,KAAA,GAAQ,QAAkB,MAAM;AACpC,IAAI,IAAA,UAAA,CAAW,UAAU,KAAW,CAAA,EAAA;AAClC,MAAA,MAAM,MAAM,CAAmD,iDAAA,CAAA,CAAA;AAAA;AAEjE,IAAA,OAAO,UAAW,CAAA,KAAA;AAAA,GACpB,EAAG,CAAC,UAAU,CAAC,CAAA;AACf,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA;AAAA,IACpC,WAAA,CAAY,YAAY,CAAC;AAAA,GAC3B;AAEA,EAAA,MAAM,CAAC,oBAAA,EAAsB,mBAAmB,CAAA,GAAI,QAAQ,MAAM;AAChE,IAAA,IAAI,EAA6B,GAAA,KAAA,CAAA;AAEjC,IAAM,MAAA,YAAA,GAA4C,CAAC,OAAY,KAAA;AAC7D,MAAI,IAAA,cAAA,CAAe,OAAO,CAAG,EAAA;AAC3B,QAAA,cAAA,CAAe,CAAC,IAAU,MAAA;AAAA,UACxB,GAAG,IAAA;AAAA,UACH,gBAAgB,OAAQ,CAAA;AAAA,SACxB,CAAA,CAAA;AAAA;AACJ,KACF;AAEA,IAAM,MAAA,KAAA,GAAQ,CAAC,EAAe,KAAA;AAC5B,MAAK,EAAA,GAAA,IAAI,cAAc,EAAE,OAAA,EAAS,CAAC,qBAAqB,CAAA,EAAG,OAAO,CAAA;AAClE,MAAG,EAAA,CAAA,SAAA;AAAA,QACD;AAAA,UACE,UAAY,EAAA;AAAA,YACV,MAAA,EAAQ,yBAAyB,EAAE,CAAA;AAAA;AACrC,SACF;AAAA,QACA;AAAA,OACF;AAAA,KACF;AAEA,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,EAAA,EAAI,WAAY,EAAA;AAAA,KAClB;AAEA,IAAO,OAAA,CAAC,OAAO,IAAI,CAAA;AAAA,GAClB,EAAA,CAAC,aAAe,EAAA,KAAK,CAAC,CAAA;AAEzB,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,KAAA,GAAS,IAAI,MAA6B,CAAA,KAAA;AAChD,MAAA,IAAI,UAAU,QAAU,EAAA;AACtB,QAAA,UAAA,CAAW,MAAS,IAAA;AACpB,QAAA,oBAAA,CAAqB,WAAW,eAAyB,CAAA;AAAA,OACpD,MAAA;AACL,QAAA,UAAA,CAAW,QAAW,IAAA;AACtB,QAAoB,mBAAA,EAAA;AAAA;AAEtB,MAAe,cAAA,CAAA,WAAA,CAAY,UAAY,EAAA,CAAC,CAAC,CAAA;AAAA,KAC3C;AAAA,IACA,CAAC,UAAY,EAAA,oBAAA,EAAsB,mBAAmB;AAAA,GACxD;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,WAAA;AAAA,IACH,cAAgB,EAAA;AAAA,GAClB;AACF;;;;"}
|
package/package.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.95-alpha.
|
|
2
|
+
"version": "0.13.95-alpha.4",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-filter-types": "0.13.95-alpha.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "0.13.95-alpha.
|
|
6
|
+
"@vuu-ui/vuu-filter-types": "0.13.95-alpha.4",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "0.13.95-alpha.4"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@vuu-ui/vuu-codemirror": "0.13.95-alpha.
|
|
11
|
-
"@vuu-ui/vuu-data-react": "0.13.95-alpha.
|
|
12
|
-
"@vuu-ui/vuu-data-types": "0.13.95-alpha.
|
|
13
|
-
"@vuu-ui/vuu-table-types": "0.13.95-alpha.
|
|
14
|
-
"@vuu-ui/vuu-popups": "0.13.95-alpha.
|
|
15
|
-
"@vuu-ui/vuu-table": "0.13.95-alpha.
|
|
16
|
-
"@vuu-ui/vuu-utils": "0.13.95-alpha.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "0.13.95-alpha.
|
|
10
|
+
"@vuu-ui/vuu-codemirror": "0.13.95-alpha.4",
|
|
11
|
+
"@vuu-ui/vuu-data-react": "0.13.95-alpha.4",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "0.13.95-alpha.4",
|
|
13
|
+
"@vuu-ui/vuu-table-types": "0.13.95-alpha.4",
|
|
14
|
+
"@vuu-ui/vuu-popups": "0.13.95-alpha.4",
|
|
15
|
+
"@vuu-ui/vuu-table": "0.13.95-alpha.4",
|
|
16
|
+
"@vuu-ui/vuu-utils": "0.13.95-alpha.4",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "0.13.95-alpha.4",
|
|
18
18
|
"@lezer/lr": "1.4.2",
|
|
19
|
-
"@salt-ds/core": "1.
|
|
19
|
+
"@salt-ds/core": "1.48.0",
|
|
20
20
|
"@salt-ds/styles": "0.2.1",
|
|
21
21
|
"@salt-ds/window": "0.1.1"
|
|
22
22
|
},
|