@elliemae/ds-data-table 3.12.0 → 3.13.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/exported-related/RowRenderer/useRowStyle.js +1 -0
- package/dist/cjs/exported-related/RowRenderer/useRowStyle.js.map +2 -2
- package/dist/cjs/exported-related/Toolbar/Toolbar.js +1 -2
- package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/cjs/parts/Row.js.map +2 -2
- package/dist/esm/exported-related/RowRenderer/useRowStyle.js +1 -0
- package/dist/esm/exported-related/RowRenderer/useRowStyle.js.map +2 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js +1 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/esm/parts/Row.js.map +2 -2
- package/package.json +18 -18
|
@@ -51,6 +51,7 @@ const useRowStyle = (row) => {
|
|
|
51
51
|
}, [row, flattenedData]);
|
|
52
52
|
const rowStyle = (0, import_react.useMemo)(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);
|
|
53
53
|
const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
|
|
54
|
+
console.log(draggableProps, "draggableProps");
|
|
54
55
|
const isDropValid = draggableProps && draggableProps.isDropValid;
|
|
55
56
|
return {
|
|
56
57
|
rowStyle,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/RowRenderer/useRowStyle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n row: InternalTypescriptRow,\n): {\n rowStyle: Record<string, unknown>;\n shouldAppendDottedBorder: boolean;\n dropIndicatorPosition: false | DropIndicatorPosition;\n isDropValid: boolean;\n} => {\n const { flattenedData } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n // ---------------------------------------------------------------------------\n // Border calculation\n // ---------------------------------------------------------------------------\n const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n if (row.original.dimsumHeaderValue) {\n return ['none', 'none', false];\n }\n if (row.isExpanded && row.original.subRows && row.depth === 0) {\n return ['1px solid #EBEDF0', 'none', true];\n }\n\n if (row.depth >= 1) {\n if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n return ['none', '2px solid #EBEDF0', false];\n }\n return ['none', 'none', true];\n }\n\n return ['none', '1px solid #EBEDF0', false];\n }, [row, flattenedData]);\n\n const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AACpC,8BAA6B;AAC7B,iCAAoC;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,QAAI,yBAAW,wBAAAA,OAAgB;AAErD,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,QAA+B,sBAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,eAAW,sBAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;
|
|
4
|
+
"sourcesContent": ["import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n row: InternalTypescriptRow,\n): {\n rowStyle: Record<string, unknown>;\n shouldAppendDottedBorder: boolean;\n dropIndicatorPosition: false | DropIndicatorPosition;\n isDropValid: boolean;\n} => {\n const { flattenedData } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n // ---------------------------------------------------------------------------\n // Border calculation\n // ---------------------------------------------------------------------------\n const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n if (row.original.dimsumHeaderValue) {\n return ['none', 'none', false];\n }\n if (row.isExpanded && row.original.subRows && row.depth === 0) {\n return ['1px solid #EBEDF0', 'none', true];\n }\n\n if (row.depth >= 1) {\n if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n return ['none', '2px solid #EBEDF0', false];\n }\n return ['none', 'none', true];\n }\n\n return ['none', '1px solid #EBEDF0', false];\n }, [row, flattenedData]);\n\n const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n console.log(draggableProps, 'draggableProps');\n const isDropValid = draggableProps && draggableProps.isDropValid;\n\n return {\n rowStyle,\n shouldAppendDottedBorder,\n dropIndicatorPosition,\n isDropValid,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AACpC,8BAA6B;AAC7B,iCAAoC;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,QAAI,yBAAW,wBAAAA,OAAgB;AAErD,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,QAA+B,sBAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,eAAW,sBAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AACrF,UAAQ,IAAI,gBAAgB,gBAAgB;AAC5C,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["DataTableContext"]
|
|
7
7
|
}
|
|
@@ -93,7 +93,6 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
|
|
|
93
93
|
const toolbarTriggerRef = (0, import_react.useRef)(null);
|
|
94
94
|
const handleOnClickOutside = (0, import_react.useCallback)(() => setShow(false), []);
|
|
95
95
|
const handleOnClick = (0, import_react.useCallback)(() => setShow((prev) => !prev), []);
|
|
96
|
-
const stopPropagation = (0, import_react.useCallback)((e) => e.stopPropagation(), []);
|
|
97
96
|
(0, import_ds_utilities.useOnClickOutside)(toolbarRef, handleOnClickOutside);
|
|
98
97
|
const onToolbarKeyDown = (0, import_react.useCallback)((e) => {
|
|
99
98
|
if (e.code === "Escape") {
|
|
@@ -109,7 +108,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
|
|
|
109
108
|
}
|
|
110
109
|
});
|
|
111
110
|
}, []);
|
|
112
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarPosition, { onBlur: handleOnBlurToolBar, ref: toolbarRef, tabIndex: -1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToolbarWrapper, { onKeyDown: onToolbarKeyDown,
|
|
111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarPosition, { onBlur: handleOnBlurToolBar, ref: toolbarRef, tabIndex: -1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToolbarWrapper, { onKeyDown: onToolbarKeyDown, isOpen: show, children: [
|
|
113
112
|
show && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarBtns, { children }),
|
|
114
113
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
115
114
|
StyledButton,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/Toolbar/Toolbar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst boxShadow = css`\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\nconst ToolbarWrapper = styled.div<{ isOpen: boolean }>`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n outline: none;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: TypescriptCell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLButtonElement>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst boxShadow = css`\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\nconst ToolbarWrapper = styled.div<{ isOpen: boolean }>`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n outline: none;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: TypescriptCell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLButtonElement>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoGjB;AApGN,mBAAqD;AACrD,uBAA4B;AAC5B,uBAA2B;AAC3B,sBAAgC;AAChC,0BAA6C;AAC7C,uBAA4B;AAG5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1B,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,mBAAe,yBAAO,2BAAU;AAAA;AAAA;AAItC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCxB,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA0B,IAAI;AACjD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,KAAK,YAAY,UAAU,IACvE,uDAAC,kBAAe,WAAW,kBAAkB,QAAQ,MAClD;AAAA,YAAQ,4CAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,cAAU,+BAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Row.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n// - the virtual list ref (for react-virtual requirement)\n// - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n const refsToSet = [];\n if (measureRef) refsToSet.push(measureRef);\n if (draggableRef) refsToSet.push(draggableRef);\n setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCjB;AAvCN,mBAAkC;AAClC,uBAAuB;AACvB,8BAA6B;AAC7B,qBAAgC;AAChC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,sCAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,gBAAY,yBAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n// - the virtual list ref (for react-virtual requirement)\n// - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n const refsToSet = [];\n if (measureRef) refsToSet.push(measureRef);\n if (draggableRef) refsToSet.push(draggableRef);\n setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { disabledRows },\n focusedRowId,\n drilldownRowId,\n } = ctx;\n\n const { draggableProps } = useContext(SortableItemContext);\n const draggableRef = draggableProps && draggableProps.setNodeRef;\n return (\n <StyledRow\n isDisabled={disabledRows[row.uid]}\n style={!isDragOverlay ? itemWrapperStyle : {}}\n ref={(ref) => setItemRefs(measureRef, draggableRef, ref)}\n >\n <RowVariantMapItem\n row={row}\n itemIndex={row.realIndex}\n isDragOverlay={isDragOverlay}\n ctx={ctx}\n focusedRowId={focusedRowId}\n drilldownRowId={drilldownRowId}\n />\n </StyledRow>\n );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\nexport default RowWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCjB;AAvCN,mBAAkC;AAClC,uBAAuB;AACvB,8BAA6B;AAC7B,qBAAgC;AAChC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,sCAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,gBAAY,yBAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,UAAM,yBAAW,wBAAAA,OAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,CAAC,QAAQ,YAAY,YAAY,cAAc,GAAG;AAAA,MAEvD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,qBAAiB,4DAA0B,GAAG;AAEpD,IAAO,cAAQ;",
|
|
6
6
|
"names": ["DataTableContext"]
|
|
7
7
|
}
|
|
@@ -22,6 +22,7 @@ const useRowStyle = (row) => {
|
|
|
22
22
|
}, [row, flattenedData]);
|
|
23
23
|
const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);
|
|
24
24
|
const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
|
|
25
|
+
console.log(draggableProps, "draggableProps");
|
|
25
26
|
const isDropValid = draggableProps && draggableProps.isDropValid;
|
|
26
27
|
return {
|
|
27
28
|
rowStyle,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowStyle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n row: InternalTypescriptRow,\n): {\n rowStyle: Record<string, unknown>;\n shouldAppendDottedBorder: boolean;\n dropIndicatorPosition: false | DropIndicatorPosition;\n isDropValid: boolean;\n} => {\n const { flattenedData } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n // ---------------------------------------------------------------------------\n // Border calculation\n // ---------------------------------------------------------------------------\n const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n if (row.original.dimsumHeaderValue) {\n return ['none', 'none', false];\n }\n if (row.isExpanded && row.original.subRows && row.depth === 0) {\n return ['1px solid #EBEDF0', 'none', true];\n }\n\n if (row.depth >= 1) {\n if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n return ['none', '2px solid #EBEDF0', false];\n }\n return ['none', 'none', true];\n }\n\n return ['none', '1px solid #EBEDF0', false];\n }, [row, flattenedData]);\n\n const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,eAAe;AACpC,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,IAAI,WAAW,gBAAgB;AAErD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,IAA+B,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,WAAW,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n row: InternalTypescriptRow,\n): {\n rowStyle: Record<string, unknown>;\n shouldAppendDottedBorder: boolean;\n dropIndicatorPosition: false | DropIndicatorPosition;\n isDropValid: boolean;\n} => {\n const { flattenedData } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n // ---------------------------------------------------------------------------\n // Border calculation\n // ---------------------------------------------------------------------------\n const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n if (row.original.dimsumHeaderValue) {\n return ['none', 'none', false];\n }\n if (row.isExpanded && row.original.subRows && row.depth === 0) {\n return ['1px solid #EBEDF0', 'none', true];\n }\n\n if (row.depth >= 1) {\n if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n return ['none', '2px solid #EBEDF0', false];\n }\n return ['none', 'none', true];\n }\n\n return ['none', '1px solid #EBEDF0', false];\n }, [row, flattenedData]);\n\n const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n console.log(draggableProps, 'draggableProps');\n const isDropValid = draggableProps && draggableProps.isDropValid;\n\n return {\n rowStyle,\n shouldAppendDottedBorder,\n dropIndicatorPosition,\n isDropValid,\n };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,eAAe;AACpC,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,IAAI,WAAW,gBAAgB;AAErD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,IAA+B,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,WAAW,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AACrF,UAAQ,IAAI,gBAAgB,gBAAgB;AAC5C,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -64,7 +64,6 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
|
|
|
64
64
|
const toolbarTriggerRef = useRef(null);
|
|
65
65
|
const handleOnClickOutside = useCallback(() => setShow(false), []);
|
|
66
66
|
const handleOnClick = useCallback(() => setShow((prev) => !prev), []);
|
|
67
|
-
const stopPropagation = useCallback((e) => e.stopPropagation(), []);
|
|
68
67
|
useOnClickOutside(toolbarRef, handleOnClickOutside);
|
|
69
68
|
const onToolbarKeyDown = useCallback((e) => {
|
|
70
69
|
if (e.code === "Escape") {
|
|
@@ -80,7 +79,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
|
|
|
80
79
|
}
|
|
81
80
|
});
|
|
82
81
|
}, []);
|
|
83
|
-
return /* @__PURE__ */ jsx(ToolbarPosition, { onBlur: handleOnBlurToolBar, ref: toolbarRef, tabIndex: -1, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { onKeyDown: onToolbarKeyDown,
|
|
82
|
+
return /* @__PURE__ */ jsx(ToolbarPosition, { onBlur: handleOnBlurToolBar, ref: toolbarRef, tabIndex: -1, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { onKeyDown: onToolbarKeyDown, isOpen: show, children: [
|
|
84
83
|
show && /* @__PURE__ */ jsx(ToolbarBtns, { children }),
|
|
85
84
|
/* @__PURE__ */ jsx(
|
|
86
85
|
StyledButton,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst boxShadow = css`\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\nconst ToolbarWrapper = styled.div<{ isOpen: boolean }>`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n outline: none;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: TypescriptCell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLButtonElement>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst boxShadow = css`\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\nconst ToolbarWrapper = styled.div<{ isOpen: boolean }>`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n outline: none;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: TypescriptCell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLButtonElement>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoGjB,SACW,KADX;AApGN,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,QAAQ,WAAW;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,mBAAmB;AAG5B,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1B,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,eAAe,OAAO,UAAU;AAAA;AAAA;AAItC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCxB,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,mBAAgB,QAAQ,qBAAqB,KAAK,YAAY,UAAU,IACvE,+BAAC,kBAAe,WAAW,kBAAkB,QAAQ,MAClD;AAAA,YAAQ,oBAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Row.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n// - the virtual list ref (for react-virtual requirement)\n// - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n const refsToSet = [];\n if (measureRef) refsToSet.push(measureRef);\n if (draggableRef) refsToSet.push(draggableRef);\n setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuCjB;AAvCN,SAAgB,kBAAkB;AAClC,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,kBAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,YAAY,OAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n// - the virtual list ref (for react-virtual requirement)\n// - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n const refsToSet = [];\n if (measureRef) refsToSet.push(measureRef);\n if (draggableRef) refsToSet.push(draggableRef);\n setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { disabledRows },\n focusedRowId,\n drilldownRowId,\n } = ctx;\n\n const { draggableProps } = useContext(SortableItemContext);\n const draggableRef = draggableProps && draggableProps.setNodeRef;\n return (\n <StyledRow\n isDisabled={disabledRows[row.uid]}\n style={!isDragOverlay ? itemWrapperStyle : {}}\n ref={(ref) => setItemRefs(measureRef, draggableRef, ref)}\n >\n <RowVariantMapItem\n row={row}\n itemIndex={row.realIndex}\n isDragOverlay={isDragOverlay}\n ctx={ctx}\n focusedRowId={focusedRowId}\n drilldownRowId={drilldownRowId}\n />\n </StyledRow>\n );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\nexport default RowWithContext;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuCjB;AAvCN,SAAgB,kBAAkB;AAClC,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,kBAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,YAAY,OAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,CAAC,QAAQ,YAAY,YAAY,cAAc,GAAG;AAAA,MAEvD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,iBAAiB,0BAA0B,GAAG;AAEpD,IAAO,cAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.13.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -573,23 +573,23 @@
|
|
|
573
573
|
"dependencies": {
|
|
574
574
|
"react-virtual": "~2.10.4",
|
|
575
575
|
"uid": "~2.0.0",
|
|
576
|
-
"@elliemae/ds-button": "3.
|
|
577
|
-
"@elliemae/ds-circular-progress-indicator": "3.
|
|
578
|
-
"@elliemae/ds-controlled-form": "3.
|
|
579
|
-
"@elliemae/ds-drag-and-drop": "3.
|
|
580
|
-
"@elliemae/ds-dropdownmenu": "3.
|
|
581
|
-
"@elliemae/ds-form": "3.
|
|
582
|
-
"@elliemae/ds-form-layout-blocks": "3.
|
|
583
|
-
"@elliemae/ds-grid": "3.
|
|
584
|
-
"@elliemae/ds-
|
|
585
|
-
"@elliemae/ds-
|
|
586
|
-
"@elliemae/ds-
|
|
587
|
-
"@elliemae/ds-
|
|
588
|
-
"@elliemae/ds-
|
|
589
|
-
"@elliemae/ds-
|
|
590
|
-
"@elliemae/ds-
|
|
591
|
-
"@elliemae/ds-
|
|
592
|
-
"@elliemae/ds-
|
|
576
|
+
"@elliemae/ds-button": "3.13.0-next.1",
|
|
577
|
+
"@elliemae/ds-circular-progress-indicator": "3.13.0-next.1",
|
|
578
|
+
"@elliemae/ds-controlled-form": "3.13.0-next.1",
|
|
579
|
+
"@elliemae/ds-drag-and-drop": "3.13.0-next.1",
|
|
580
|
+
"@elliemae/ds-dropdownmenu": "3.13.0-next.1",
|
|
581
|
+
"@elliemae/ds-form": "3.13.0-next.1",
|
|
582
|
+
"@elliemae/ds-form-layout-blocks": "3.13.0-next.1",
|
|
583
|
+
"@elliemae/ds-grid": "3.13.0-next.1",
|
|
584
|
+
"@elliemae/ds-pagination": "3.13.0-next.1",
|
|
585
|
+
"@elliemae/ds-pills": "3.13.0-next.1",
|
|
586
|
+
"@elliemae/ds-popperjs": "3.13.0-next.1",
|
|
587
|
+
"@elliemae/ds-skeleton": "3.13.0-next.1",
|
|
588
|
+
"@elliemae/ds-system": "3.13.0-next.1",
|
|
589
|
+
"@elliemae/ds-toolbar": "3.13.0-next.1",
|
|
590
|
+
"@elliemae/ds-truncated-tooltip-text": "3.13.0-next.1",
|
|
591
|
+
"@elliemae/ds-utilities": "3.13.0-next.1",
|
|
592
|
+
"@elliemae/ds-icons": "3.13.0-next.1"
|
|
593
593
|
},
|
|
594
594
|
"devDependencies": {
|
|
595
595
|
"@testing-library/react": "~12.1.3",
|