@lax-wp/design-system 0.13.65 → 0.13.66
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/components/data-display/infinite-table/body/cell/RowActionCell.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/body/cell/RowActionCell.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/cell/RowActionCell.es.js +9 -9
- package/dist/components/data-display/infinite-table/body/cell/RowActionCell.es.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/cell/RowOptionsCell.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/body/cell/RowOptionsCell.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/cell/RowOptionsCell.es.js +1 -1
- package/dist/components/data-display/infinite-table/body/cell/RowOptionsCell.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),q=require("../../../../tooltip/Tooltip.cjs.js"),S=require("../../../../../providers/design-system-provider/hooks.cjs.js"),j=require("../../../../../_virtual/index.cjs.js"),x=require("react"),T=({disableOptionsForRowIndex:C,tableActions:g,index:l,is_read:f,showNewItem:k,is_modified:p,is_row_modified:i,is_deleted:c,currentData:e,is_added:o,rowData:d,id:s,rowHovering:t,isDisabled:n,bgColor:b,is_incomplete:m,isInlineEditing:r,rowHasPendingEdits:a})=>{const R=S.useTableConfig()?.t?.("Save or cancel pending changes first")??"Save or cancel pending changes first",h=x.useMemo(()=>r?"bg-primary-50 dark:bg-primary-900":b||(c||e?.is_deleted?"bg-error-100 dark:bg-error-975":m||p||i||e?.is_row_modified?"bg-warning-50 dark:bg-black-500":o||e?.is_added?"bg-success-50 dark:bg-success-900":!f&&k&&!n?"bg-primary-50 dark:bg-black-700":"bg-white dark:bg-black-800"),[m,f,k,p,i,c,e,o,b,r,n]),y=C===l||n||a;return u.jsxs("td",{"aria-disabled":y,className:j("px-2.5 relative h-row",h,y&&"cursor-not-allowed opacity-50"),children:[g(d,l),u.jsx(q,{title:a?R:"",children:u.jsx("div",{className:j("absolute top-0 left-0 flex items-center justify-center w-full z-20",{[h]:t!==s||r},{"bg-warning-100 dark:bg-warning-900":t===s&&!r&&!(c||e?.is_deleted)&&!(o||e?.is_added)},{"bg-error-200 dark:bg-error-900":t===s&&!r&&(c||e?.is_deleted)},{"bg-success-100 dark:bg-success-800":t===s&&!r&&(o||e?.is_added)},a&&"pointer-events-none"),children:g(d,l)})})]})},v=x.memo(T);exports.RowActionCell=v;
|
|
2
2
|
//# sourceMappingURL=RowActionCell.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowActionCell.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/RowActionCell.tsx"],"sourcesContent":["import Tooltip from '../../../../tooltip/Tooltip';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport cn from 'classnames';\nimport React, { useMemo } from 'react';\n\ntype TProps = {\n disableOptionsForRowIndex: number | null;\n tableActions: (rowData: Record<string, unknown>, index: number) => JSX.Element;\n index: number;\n is_read: boolean;\n showNewItem: boolean;\n is_modified: boolean;\n is_row_modified: boolean;\n is_deleted: boolean;\n currentData: Record<string, unknown>;\n is_added: boolean;\n rowData: Record<string, unknown>;\n id: string | number;\n rowHovering: string | number | null;\n isDisabled?: boolean;\n bgColor?: string;\n is_incomplete: boolean;\n isInlineEditing?: boolean;\n rowHasPendingEdits?: boolean;\n};\n\nconst RowActionCellInner: React.FC<TProps> = ({\n disableOptionsForRowIndex,\n tableActions,\n index,\n is_read,\n showNewItem,\n is_modified,\n is_row_modified,\n is_deleted,\n currentData,\n is_added,\n rowData,\n id,\n rowHovering,\n isDisabled,\n bgColor,\n is_incomplete,\n isInlineEditing,\n rowHasPendingEdits,\n}) => {\n const tableConfig = useTableConfig();\n const pendingEditsTooltip = tableConfig?.t?.('Save or cancel pending changes first') ?? 'Save or cancel pending changes first';\n\n const backgroundColorClass = useMemo(() => {\n if (isInlineEditing) return 'bg-primary-50 dark:bg-primary-900';\n if (bgColor) return bgColor;\n if (is_deleted || currentData?.is_deleted) return 'bg-error-100 dark:bg-error-975';\n if (is_incomplete || is_modified || is_row_modified || currentData?.is_row_modified) return 'bg-warning-50 dark:bg-
|
|
1
|
+
{"version":3,"file":"RowActionCell.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/RowActionCell.tsx"],"sourcesContent":["import Tooltip from '../../../../tooltip/Tooltip';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport cn from 'classnames';\nimport React, { useMemo } from 'react';\n\ntype TProps = {\n disableOptionsForRowIndex: number | null;\n tableActions: (rowData: Record<string, unknown>, index: number) => JSX.Element;\n index: number;\n is_read: boolean;\n showNewItem: boolean;\n is_modified: boolean;\n is_row_modified: boolean;\n is_deleted: boolean;\n currentData: Record<string, unknown>;\n is_added: boolean;\n rowData: Record<string, unknown>;\n id: string | number;\n rowHovering: string | number | null;\n isDisabled?: boolean;\n bgColor?: string;\n is_incomplete: boolean;\n isInlineEditing?: boolean;\n rowHasPendingEdits?: boolean;\n};\n\nconst RowActionCellInner: React.FC<TProps> = ({\n disableOptionsForRowIndex,\n tableActions,\n index,\n is_read,\n showNewItem,\n is_modified,\n is_row_modified,\n is_deleted,\n currentData,\n is_added,\n rowData,\n id,\n rowHovering,\n isDisabled,\n bgColor,\n is_incomplete,\n isInlineEditing,\n rowHasPendingEdits,\n}) => {\n const tableConfig = useTableConfig();\n const pendingEditsTooltip = tableConfig?.t?.('Save or cancel pending changes first') ?? 'Save or cancel pending changes first';\n\n const backgroundColorClass = useMemo(() => {\n if (isInlineEditing) return 'bg-primary-50 dark:bg-primary-900';\n if (bgColor) return bgColor;\n if (is_deleted || currentData?.is_deleted) return 'bg-error-100 dark:bg-error-975';\n if (is_incomplete || is_modified || is_row_modified || currentData?.is_row_modified) return 'bg-warning-50 dark:bg-black-500';\n if (is_added || currentData?.is_added) return 'bg-success-50 dark:bg-success-900';\n if (!is_read && showNewItem && !isDisabled) return 'bg-primary-50 dark:bg-black-700';\n return 'bg-white dark:bg-black-800';\n }, [is_incomplete, is_read, showNewItem, is_modified, is_row_modified, is_deleted, currentData, is_added, bgColor, isInlineEditing, isDisabled]);\n\n const isRowDisabled = disableOptionsForRowIndex === index || isDisabled || rowHasPendingEdits;\n\n return (\n <td aria-disabled={isRowDisabled} className={cn('px-2.5 relative h-row', backgroundColorClass, isRowDisabled && 'cursor-not-allowed opacity-50')}>\n {tableActions(rowData, index)}\n <Tooltip title={rowHasPendingEdits ? pendingEditsTooltip : ''}>\n <div\n className={cn(\n 'absolute top-0 left-0 flex items-center justify-center w-full z-20',\n { [backgroundColorClass]: rowHovering !== id || isInlineEditing },\n { 'bg-warning-100 dark:bg-warning-900': rowHovering === id && !isInlineEditing && !(is_deleted || currentData?.is_deleted) && !(is_added || currentData?.is_added) },\n { 'bg-error-200 dark:bg-error-900': rowHovering === id && !isInlineEditing && (is_deleted || currentData?.is_deleted) },\n { 'bg-success-100 dark:bg-success-800': rowHovering === id && !isInlineEditing && (is_added || currentData?.is_added) },\n rowHasPendingEdits && 'pointer-events-none',\n )}\n >\n {tableActions(rowData, index)}\n </div>\n </Tooltip>\n </td>\n );\n};\n\nexport const RowActionCell = React.memo(RowActionCellInner);\n"],"names":["RowActionCellInner","disableOptionsForRowIndex","tableActions","index","is_read","showNewItem","is_modified","is_row_modified","is_deleted","currentData","is_added","rowData","id","rowHovering","isDisabled","bgColor","is_incomplete","isInlineEditing","rowHasPendingEdits","pendingEditsTooltip","useTableConfig","backgroundColorClass","useMemo","isRowDisabled","jsxs","cn","jsx","Tooltip","RowActionCell","React"],"mappings":"oTA0BMA,EAAuC,CAAC,CAC5C,0BAAAC,EACA,aAAAC,EAAA,MACAC,EACA,QAAAC,EACA,YAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,YAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAAC,EACA,YAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,mBAAAC,CACF,IAAM,CAEJ,MAAMC,EADcC,EAAAA,eAAA,GACqB,IAAI,sCAAsC,GAAK,uCAElFC,EAAuBC,EAAAA,QAAQ,IAC/BL,EAAwB,oCACxBF,IACAP,GAAcC,GAAa,WAAmB,iCAC9CO,GAAiBV,GAAeC,GAAmBE,GAAa,gBAAwB,kCACxFC,GAAYD,GAAa,SAAiB,oCAC1C,CAACL,GAAWC,GAAe,CAACS,EAAmB,kCAC5C,8BACN,CAACE,EAAeZ,EAASC,EAAaC,EAAaC,EAAiBC,EAAYC,EAAaC,EAAUK,EAASE,EAAiBH,CAAU,CAAC,EAEzIS,EAAgBtB,IAA8BE,GAASW,GAAcI,EAE3E,OACEM,EAAAA,KAAC,KAAA,CAAG,gBAAeD,EAAe,UAAWE,EAAG,wBAAyBJ,EAAsBE,GAAiB,+BAA+B,EAC5I,SAAA,CAAArB,EAAaS,EAASR,CAAK,EAC5BuB,EAAAA,IAACC,EAAA,CAAQ,MAAOT,EAAqBC,EAAsB,GACzD,SAAAO,EAAAA,IAAC,MAAA,CACC,UAAWD,EACT,qEACA,CAAE,CAACJ,CAAoB,EAAGR,IAAgBD,GAAMK,CAAA,EAChD,CAAE,qCAAsCJ,IAAgBD,GAAM,CAACK,GAAmB,EAAET,GAAcC,GAAa,aAAe,EAAEC,GAAYD,GAAa,SAAA,EACzJ,CAAE,iCAAkCI,IAAgBD,GAAM,CAACK,IAAoBT,GAAcC,GAAa,WAAA,EAC1G,CAAE,qCAAsCI,IAAgBD,GAAM,CAACK,IAAoBP,GAAYD,GAAa,SAAA,EAC5GS,GAAsB,qBAAA,EAGvB,SAAAhB,EAAaS,EAASR,CAAK,CAAA,CAAA,CAC9B,CACF,CAAA,EACF,CAEJ,EAEayB,EAAgBC,EAAM,KAAK7B,CAAkB"}
|
|
@@ -6,10 +6,10 @@ import w, { useMemo as S } from "react";
|
|
|
6
6
|
const z = ({
|
|
7
7
|
disableOptionsForRowIndex: j,
|
|
8
8
|
tableActions: g,
|
|
9
|
-
index:
|
|
10
|
-
is_read:
|
|
11
|
-
showNewItem:
|
|
12
|
-
is_modified:
|
|
9
|
+
index: l,
|
|
10
|
+
is_read: p,
|
|
11
|
+
showNewItem: m,
|
|
12
|
+
is_modified: n,
|
|
13
13
|
is_row_modified: k,
|
|
14
14
|
is_deleted: o,
|
|
15
15
|
currentData: r,
|
|
@@ -17,15 +17,15 @@ const z = ({
|
|
|
17
17
|
rowData: u,
|
|
18
18
|
id: s,
|
|
19
19
|
rowHovering: b,
|
|
20
|
-
isDisabled:
|
|
21
|
-
bgColor:
|
|
20
|
+
isDisabled: t,
|
|
21
|
+
bgColor: a,
|
|
22
22
|
is_incomplete: h,
|
|
23
23
|
isInlineEditing: e,
|
|
24
24
|
rowHasPendingEdits: f
|
|
25
25
|
}) => {
|
|
26
|
-
const x = v()?.t?.("Save or cancel pending changes first") ?? "Save or cancel pending changes first", y = S(() => e ? "bg-primary-50 dark:bg-primary-900" :
|
|
26
|
+
const x = v()?.t?.("Save or cancel pending changes first") ?? "Save or cancel pending changes first", y = S(() => e ? "bg-primary-50 dark:bg-primary-900" : a || (o || r?.is_deleted ? "bg-error-100 dark:bg-error-975" : h || n || k || r?.is_row_modified ? "bg-warning-50 dark:bg-black-500" : c || r?.is_added ? "bg-success-50 dark:bg-success-900" : !p && m && !t ? "bg-primary-50 dark:bg-black-700" : "bg-white dark:bg-black-800"), [h, p, m, n, k, o, r, c, a, e, t]), C = j === l || t || f;
|
|
27
27
|
return /* @__PURE__ */ T("td", { "aria-disabled": C, className: R("px-2.5 relative h-row", y, C && "cursor-not-allowed opacity-50"), children: [
|
|
28
|
-
g(u,
|
|
28
|
+
g(u, l),
|
|
29
29
|
/* @__PURE__ */ d(i, { title: f ? x : "", children: /* @__PURE__ */ d(
|
|
30
30
|
"div",
|
|
31
31
|
{
|
|
@@ -37,7 +37,7 @@ const z = ({
|
|
|
37
37
|
{ "bg-success-100 dark:bg-success-800": b === s && !e && (c || r?.is_added) },
|
|
38
38
|
f && "pointer-events-none"
|
|
39
39
|
),
|
|
40
|
-
children: g(u,
|
|
40
|
+
children: g(u, l)
|
|
41
41
|
}
|
|
42
42
|
) })
|
|
43
43
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowActionCell.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/RowActionCell.tsx"],"sourcesContent":["import Tooltip from '../../../../tooltip/Tooltip';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport cn from 'classnames';\nimport React, { useMemo } from 'react';\n\ntype TProps = {\n disableOptionsForRowIndex: number | null;\n tableActions: (rowData: Record<string, unknown>, index: number) => JSX.Element;\n index: number;\n is_read: boolean;\n showNewItem: boolean;\n is_modified: boolean;\n is_row_modified: boolean;\n is_deleted: boolean;\n currentData: Record<string, unknown>;\n is_added: boolean;\n rowData: Record<string, unknown>;\n id: string | number;\n rowHovering: string | number | null;\n isDisabled?: boolean;\n bgColor?: string;\n is_incomplete: boolean;\n isInlineEditing?: boolean;\n rowHasPendingEdits?: boolean;\n};\n\nconst RowActionCellInner: React.FC<TProps> = ({\n disableOptionsForRowIndex,\n tableActions,\n index,\n is_read,\n showNewItem,\n is_modified,\n is_row_modified,\n is_deleted,\n currentData,\n is_added,\n rowData,\n id,\n rowHovering,\n isDisabled,\n bgColor,\n is_incomplete,\n isInlineEditing,\n rowHasPendingEdits,\n}) => {\n const tableConfig = useTableConfig();\n const pendingEditsTooltip = tableConfig?.t?.('Save or cancel pending changes first') ?? 'Save or cancel pending changes first';\n\n const backgroundColorClass = useMemo(() => {\n if (isInlineEditing) return 'bg-primary-50 dark:bg-primary-900';\n if (bgColor) return bgColor;\n if (is_deleted || currentData?.is_deleted) return 'bg-error-100 dark:bg-error-975';\n if (is_incomplete || is_modified || is_row_modified || currentData?.is_row_modified) return 'bg-warning-50 dark:bg-
|
|
1
|
+
{"version":3,"file":"RowActionCell.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/RowActionCell.tsx"],"sourcesContent":["import Tooltip from '../../../../tooltip/Tooltip';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport cn from 'classnames';\nimport React, { useMemo } from 'react';\n\ntype TProps = {\n disableOptionsForRowIndex: number | null;\n tableActions: (rowData: Record<string, unknown>, index: number) => JSX.Element;\n index: number;\n is_read: boolean;\n showNewItem: boolean;\n is_modified: boolean;\n is_row_modified: boolean;\n is_deleted: boolean;\n currentData: Record<string, unknown>;\n is_added: boolean;\n rowData: Record<string, unknown>;\n id: string | number;\n rowHovering: string | number | null;\n isDisabled?: boolean;\n bgColor?: string;\n is_incomplete: boolean;\n isInlineEditing?: boolean;\n rowHasPendingEdits?: boolean;\n};\n\nconst RowActionCellInner: React.FC<TProps> = ({\n disableOptionsForRowIndex,\n tableActions,\n index,\n is_read,\n showNewItem,\n is_modified,\n is_row_modified,\n is_deleted,\n currentData,\n is_added,\n rowData,\n id,\n rowHovering,\n isDisabled,\n bgColor,\n is_incomplete,\n isInlineEditing,\n rowHasPendingEdits,\n}) => {\n const tableConfig = useTableConfig();\n const pendingEditsTooltip = tableConfig?.t?.('Save or cancel pending changes first') ?? 'Save or cancel pending changes first';\n\n const backgroundColorClass = useMemo(() => {\n if (isInlineEditing) return 'bg-primary-50 dark:bg-primary-900';\n if (bgColor) return bgColor;\n if (is_deleted || currentData?.is_deleted) return 'bg-error-100 dark:bg-error-975';\n if (is_incomplete || is_modified || is_row_modified || currentData?.is_row_modified) return 'bg-warning-50 dark:bg-black-500';\n if (is_added || currentData?.is_added) return 'bg-success-50 dark:bg-success-900';\n if (!is_read && showNewItem && !isDisabled) return 'bg-primary-50 dark:bg-black-700';\n return 'bg-white dark:bg-black-800';\n }, [is_incomplete, is_read, showNewItem, is_modified, is_row_modified, is_deleted, currentData, is_added, bgColor, isInlineEditing, isDisabled]);\n\n const isRowDisabled = disableOptionsForRowIndex === index || isDisabled || rowHasPendingEdits;\n\n return (\n <td aria-disabled={isRowDisabled} className={cn('px-2.5 relative h-row', backgroundColorClass, isRowDisabled && 'cursor-not-allowed opacity-50')}>\n {tableActions(rowData, index)}\n <Tooltip title={rowHasPendingEdits ? pendingEditsTooltip : ''}>\n <div\n className={cn(\n 'absolute top-0 left-0 flex items-center justify-center w-full z-20',\n { [backgroundColorClass]: rowHovering !== id || isInlineEditing },\n { 'bg-warning-100 dark:bg-warning-900': rowHovering === id && !isInlineEditing && !(is_deleted || currentData?.is_deleted) && !(is_added || currentData?.is_added) },\n { 'bg-error-200 dark:bg-error-900': rowHovering === id && !isInlineEditing && (is_deleted || currentData?.is_deleted) },\n { 'bg-success-100 dark:bg-success-800': rowHovering === id && !isInlineEditing && (is_added || currentData?.is_added) },\n rowHasPendingEdits && 'pointer-events-none',\n )}\n >\n {tableActions(rowData, index)}\n </div>\n </Tooltip>\n </td>\n );\n};\n\nexport const RowActionCell = React.memo(RowActionCellInner);\n"],"names":["RowActionCellInner","disableOptionsForRowIndex","tableActions","index","is_read","showNewItem","is_modified","is_row_modified","is_deleted","currentData","is_added","rowData","id","rowHovering","isDisabled","bgColor","is_incomplete","isInlineEditing","rowHasPendingEdits","pendingEditsTooltip","useTableConfig","backgroundColorClass","useMemo","isRowDisabled","jsxs","cn","jsx","Tooltip","RowActionCell","React"],"mappings":";;;;;AA0BA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,2BAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,IAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AACF,MAAM;AAEJ,QAAMC,IADcC,EAAA,GACqB,IAAI,sCAAsC,KAAK,wCAElFC,IAAuBC,EAAQ,MAC/BL,IAAwB,sCACxBF,MACAP,KAAcC,GAAa,aAAmB,mCAC9CO,KAAiBV,KAAeC,KAAmBE,GAAa,kBAAwB,oCACxFC,KAAYD,GAAa,WAAiB,sCAC1C,CAACL,KAAWC,KAAe,CAACS,IAAmB,oCAC5C,+BACN,CAACE,GAAeZ,GAASC,GAAaC,GAAaC,GAAiBC,GAAYC,GAAaC,GAAUK,GAASE,GAAiBH,CAAU,CAAC,GAEzIS,IAAgBtB,MAA8BE,KAASW,KAAcI;AAE3E,SACE,gBAAAM,EAAC,MAAA,EAAG,iBAAeD,GAAe,WAAWE,EAAG,yBAAyBJ,GAAsBE,KAAiB,+BAA+B,GAC5I,UAAA;AAAA,IAAArB,EAAaS,GAASR,CAAK;AAAA,IAC5B,gBAAAuB,EAACC,GAAA,EAAQ,OAAOT,IAAqBC,IAAsB,IACzD,UAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACA,EAAE,CAACJ,CAAoB,GAAGR,MAAgBD,KAAMK,EAAA;AAAA,UAChD,EAAE,sCAAsCJ,MAAgBD,KAAM,CAACK,KAAmB,EAAET,KAAcC,GAAa,eAAe,EAAEC,KAAYD,GAAa,UAAA;AAAA,UACzJ,EAAE,kCAAkCI,MAAgBD,KAAM,CAACK,MAAoBT,KAAcC,GAAa,YAAA;AAAA,UAC1G,EAAE,sCAAsCI,MAAgBD,KAAM,CAACK,MAAoBP,KAAYD,GAAa,UAAA;AAAA,UAC5GS,KAAsB;AAAA,QAAA;AAAA,QAGvB,UAAAhB,EAAaS,GAASR,CAAK;AAAA,MAAA;AAAA,IAAA,EAC9B,CACF;AAAA,EAAA,GACF;AAEJ,GAEayB,IAAgBC,EAAM,KAAK7B,CAAkB;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),S=require("../../../../button/ButtonThreeDots.cjs.js"),X=require("../../../../tooltip/Tooltip.cjs.js"),Y=require("../../../../../providers/design-system-provider/hooks.cjs.js"),v=require("@mui/icons-material"),Z=require("antd"),$=require("../../../../../_virtual/index.cjs.js"),a=require("react"),E=require("../../context.cjs.js"),H=require("./SpinnerCell.cjs.js"),I=require("../../../skeleton/loaders/SingleLineLoader.cjs.js"),ee=({rowId:s,rowOptions:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),S=require("../../../../button/ButtonThreeDots.cjs.js"),X=require("../../../../tooltip/Tooltip.cjs.js"),Y=require("../../../../../providers/design-system-provider/hooks.cjs.js"),v=require("@mui/icons-material"),Z=require("antd"),$=require("../../../../../_virtual/index.cjs.js"),a=require("react"),E=require("../../context.cjs.js"),H=require("./SpinnerCell.cjs.js"),I=require("../../../skeleton/loaders/SingleLineLoader.cjs.js"),ee=({rowId:s,rowOptions:l,disableOption:g,rowHovering:r,is_read:R,showNewItem:N,is_modified:T,is_row_modified:L,currentData:o,is_deleted:i,is_added:d,isDraggingOver:F,rowAdditionalActions:x,rowData:w,index:n,bgColor:k,setRowHovering:c,is_incomplete:m,isInlineEditing:t,onConfirmEdit:B,onCancelEdit:P,rowHasPendingEdits:M})=>{const f=Y.useTableConfig(),j=$({"bg-primary-50 dark:bg-primary-900":t,"bg-neutral-100 dark:bg-black-600":r===s&&!t&&!(i||o?.is_deleted)&&!(d||o?.is_added),"bg-error-200 dark:bg-error-900":r===s&&!t&&(i||o?.is_deleted),"bg-success-100 dark:bg-success-800":r===s&&!t&&(d||o?.is_added),"bg-primary-50 dark:bg-black-700":!m&&!R&&N&&r!==s&&!t,"bg-warning-50 dark:bg-black-500":(m||T||L||o?.is_row_modified)&&r!==s&&!t,"bg-error-100 dark:bg-error-975":(i||o?.is_deleted)&&r!==s&&!t,"bg-success-50 dark:bg-success-900":(d||o?.is_added)&&r!==s&&!t,"bg-primary-50":F&&!t,...k&&!t&&{[k]:!0}}),_=a.useCallback(()=>c(s),[c,s]),A=a.useCallback(()=>c(null),[c]),{asyncRowOptionsFilter:p,disableOptionsForRowIndex:u=null,fieldOperationLoading:V}=a.useContext(E.TableContext),z=f?.t?.("Save or cancel pending changes first")??"Save or cancel pending changes first",D=f?.getRowOptionsDropdownProps?.(),b=!!V,[G,y]=a.useState(!!p),[J,C]=a.useState(l),K=l?l.filter(h=>h.isVisible!==!1).length:0,Q=async h=>{if(y(!0),h&&p)try{const O=await p(s),W=l?l.filter(q=>Object.keys(O).includes(q.key)?O[q.key]:!0):[];C(W)}catch{C([])}y(!1)},U=e.jsx("div",{className:"min-w-[140px] max-w-[200px] justify-start whitespace-nowrap items-center py-2 px-1 gap-2","aria-disabled":!0,children:e.jsx(I,{repeat:l?.length||1,lineHeight:"15px"})});return e.jsx("td",{className:`sticky left-0 right-0 z-10 ${j||"bg-white dark:bg-black-800"} h-row`,onMouseEnter:_,onMouseLeave:A,children:e.jsxs("div",{className:"h-full gap-2 top-0 font-medium font-inter overflow-hidden whitespace-nowrap text-ellipsis px-1 w-full flex items-center",children:[e.jsx("div",{className:`${u===n?"opacity-50":""}`,"aria-disabled":u===n,children:x?x(w,n,r===s):null}),t?e.jsxs("div",{className:`flex items-center gap-2 ${b?"pointer-events-none opacity-50":""}`,children:[e.jsx("div",{className:"cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5",onClick:()=>!b&&P?.(),children:e.jsx(v.CloseRounded,{sx:{height:20,width:20,color:"#667085"}})}),e.jsx("div",{className:"cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5",onClick:()=>!b&&B?.(),children:e.jsx(v.CheckRounded,{sx:{height:20,width:20,color:"var(--color-primary-600)"}})})]}):l?e.jsx(e.Fragment,{children:u===n?e.jsx(H.SpinnerCell,{}):M?e.jsx(X,{title:z,children:e.jsx("span",{children:e.jsx(S.ButtonThreeDots,{disabled:!0})})}):e.jsx(Z.Dropdown,{menu:{items:G?[{label:U,key:"loading"}]:J},trigger:["click"],overlayClassName:"row-option-cell table-row-option-dropdown",onOpenChange:Q,disabled:g||K===0,...D||{},children:e.jsx(S.ButtonThreeDots,{disabled:g})})}):null]})})};exports.RowOptionsCell=ee;
|
|
2
2
|
//# sourceMappingURL=RowOptionsCell.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowOptionsCell.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/RowOptionsCell.tsx"],"sourcesContent":["import { SingleLineLoader } from '../../../../data-display/skeleton/loaders';\nimport { ButtonThreeDots } from '../../../../button/ButtonThreeDots';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { CheckRounded, CloseRounded } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport cn from 'classnames';\nimport { useCallback, useContext, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { SpinnerCell } from './SpinnerCell';\n\ntype TProps = {\n rowId: string | number;\n rowOptions: Array<{ key: string; label: React.ReactNode; isVisible?: boolean; [k: string]: unknown }>;\n disableOption: boolean;\n rowHovering: string | number | null;\n is_read: boolean;\n showNewItem: boolean;\n is_modified: boolean;\n is_row_modified: boolean;\n currentData: Record<string, unknown>;\n is_deleted: boolean;\n is_added: boolean;\n isDraggingOver: boolean;\n rowData: Record<string, unknown>;\n index: number;\n rowAdditionalActions: (rowData: Record<string, unknown>, index: number, isHovering: boolean) => React.ReactNode;\n bgColor?: string;\n setRowHovering: (rowId: string | number | null) => void;\n is_incomplete?: boolean;\n isInlineEditing?: boolean;\n onConfirmEdit?: () => void;\n onCancelEdit?: () => void;\n rowHasPendingEdits?: boolean;\n};\n\nexport const RowOptionsCell = ({\n rowId, rowOptions, disableOption, rowHovering, is_read, showNewItem, is_modified, is_row_modified, currentData,\n is_deleted, is_added, isDraggingOver, rowAdditionalActions, rowData, index, bgColor: bgColorProp, setRowHovering,\n is_incomplete, isInlineEditing, onConfirmEdit, onCancelEdit, rowHasPendingEdits,\n}: TProps) => {\n const tableConfig = useTableConfig();\n const bgColor = cn({\n 'bg-primary-50 dark:bg-primary-900': isInlineEditing,\n 'bg-neutral-100 dark:bg-black-600': rowHovering === rowId && !isInlineEditing && !(is_deleted || currentData?.is_deleted) && !(is_added || currentData?.is_added),\n 'bg-error-200 dark:bg-error-900': rowHovering === rowId && !isInlineEditing && (is_deleted || currentData?.is_deleted),\n 'bg-success-100 dark:bg-success-800': rowHovering === rowId && !isInlineEditing && (is_added || currentData?.is_added),\n 'bg-primary-50 dark:bg-black-700': !is_incomplete && !is_read && showNewItem && rowHovering !== rowId && !isInlineEditing,\n 'bg-warning-50 dark:bg-orange-900': (is_incomplete || is_modified || is_row_modified || currentData?.is_row_modified) && rowHovering !== rowId && !isInlineEditing,\n 'bg-error-100 dark:bg-error-975': (is_deleted || currentData?.is_deleted) && rowHovering !== rowId && !isInlineEditing,\n 'bg-success-50 dark:bg-success-900': (is_added || currentData?.is_added) && rowHovering !== rowId && !isInlineEditing,\n 'bg-primary-50': isDraggingOver && !isInlineEditing,\n ...(bgColorProp && !isInlineEditing && { [bgColorProp]: true }),\n });\n\n const onMouseEnter = useCallback(() => setRowHovering(rowId), [setRowHovering, rowId]);\n const onMouseLeave = useCallback(() => setRowHovering(null), [setRowHovering]);\n\n const { asyncRowOptionsFilter, disableOptionsForRowIndex = null, fieldOperationLoading } = useContext(TableContext);\n const pendingEditsTooltip = tableConfig?.t?.('Save or cancel pending changes first') ?? 'Save or cancel pending changes first';\n const rowOptionsDropdownProps = tableConfig?.getRowOptionsDropdownProps?.();\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n const [isOptionLoading, setIsOptionLoading] = useState(!!asyncRowOptionsFilter);\n const [filteredRowOptions, setFilteredRowOptions] = useState(rowOptions);\n const visibleRowOptions = rowOptions ? rowOptions.filter((option) => option.isVisible !== false).length : 0;\n\n const handleDropdownVisibleChange = async (visible: boolean) => {\n setIsOptionLoading(true);\n if (visible && asyncRowOptionsFilter) {\n try {\n const buttonState = await asyncRowOptionsFilter(rowId);\n const filteredOptions = rowOptions ? rowOptions.filter((option) => { const existOnAPI = Object.keys(buttonState).includes(option.key); return existOnAPI ? buttonState[option.key] : true; }) : [];\n setFilteredRowOptions(filteredOptions);\n } catch { setFilteredRowOptions([]); }\n }\n setIsOptionLoading(false);\n };\n\n const getSkeleton = (\n <div className={`min-w-[140px] max-w-[200px] justify-start whitespace-nowrap items-center py-2 px-1 gap-2`} aria-disabled={true}>\n <SingleLineLoader repeat={rowOptions?.length || 1} lineHeight='15px' />\n </div>\n );\n\n return (\n <td className={`sticky left-0 right-0 z-10 ${bgColor ? bgColor : 'bg-white dark:bg-black-800'} h-row`} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n <div className={`h-full gap-2 top-0 font-medium font-inter overflow-hidden whitespace-nowrap text-ellipsis px-1 w-full flex items-center`}>\n <div className={`${disableOptionsForRowIndex === index ? 'opacity-50' : ''}`} aria-disabled={disableOptionsForRowIndex === index}>\n {rowAdditionalActions ? rowAdditionalActions(rowData, index, rowHovering === rowId) : null}\n </div>\n {isInlineEditing ? (\n <div className={`flex items-center gap-2 ${isAnyFieldOperationLoading ? 'pointer-events-none opacity-50' : ''}`}>\n <div className='cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5' onClick={() => !isAnyFieldOperationLoading && onCancelEdit?.()}>\n <CloseRounded sx={{ height: 20, width: 20, color: '#667085' }} />\n </div>\n <div className='cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5' onClick={() => !isAnyFieldOperationLoading && onConfirmEdit?.()}>\n <CheckRounded sx={{ height: 20, width: 20, color: 'var(--color-primary-600)' }} />\n </div>\n </div>\n ) : rowOptions ? (\n <>\n {disableOptionsForRowIndex === index ? (\n <SpinnerCell />\n ) : rowHasPendingEdits ? (\n <Tooltip title={pendingEditsTooltip}>\n <span><ButtonThreeDots disabled /></span>\n </Tooltip>\n ) : (\n <Dropdown\n menu={{ items: isOptionLoading ? [{ label: getSkeleton, key: 'loading' }] : filteredRowOptions }}\n trigger={['click']}\n overlayClassName='row-option-cell table-row-option-dropdown'\n onOpenChange={handleDropdownVisibleChange}\n disabled={disableOption || visibleRowOptions === 0}\n {...(rowOptionsDropdownProps || {})}\n >\n <ButtonThreeDots disabled={disableOption} />\n </Dropdown>\n )}\n </>\n ) : null}\n </div>\n </td>\n );\n};\n"],"names":["RowOptionsCell","rowId","rowOptions","disableOption","rowHovering","is_read","showNewItem","is_modified","is_row_modified","currentData","is_deleted","is_added","isDraggingOver","rowAdditionalActions","rowData","index","bgColorProp","setRowHovering","is_incomplete","isInlineEditing","onConfirmEdit","onCancelEdit","rowHasPendingEdits","tableConfig","useTableConfig","bgColor","cn","onMouseEnter","useCallback","onMouseLeave","asyncRowOptionsFilter","disableOptionsForRowIndex","fieldOperationLoading","useContext","TableContext","pendingEditsTooltip","rowOptionsDropdownProps","isAnyFieldOperationLoading","isOptionLoading","setIsOptionLoading","useState","filteredRowOptions","setFilteredRowOptions","visibleRowOptions","option","handleDropdownVisibleChange","visible","buttonState","filteredOptions","getSkeleton","jsx","SingleLineLoader","jsxs","CloseRounded","CheckRounded","Fragment","SpinnerCell","Tooltip","ButtonThreeDots","Dropdown"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RowOptionsCell.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/RowOptionsCell.tsx"],"sourcesContent":["import { SingleLineLoader } from '../../../../data-display/skeleton/loaders';\nimport { ButtonThreeDots } from '../../../../button/ButtonThreeDots';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { CheckRounded, CloseRounded } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport cn from 'classnames';\nimport { useCallback, useContext, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { SpinnerCell } from './SpinnerCell';\n\ntype TProps = {\n rowId: string | number;\n rowOptions: Array<{ key: string; label: React.ReactNode; isVisible?: boolean; [k: string]: unknown }>;\n disableOption: boolean;\n rowHovering: string | number | null;\n is_read: boolean;\n showNewItem: boolean;\n is_modified: boolean;\n is_row_modified: boolean;\n currentData: Record<string, unknown>;\n is_deleted: boolean;\n is_added: boolean;\n isDraggingOver: boolean;\n rowData: Record<string, unknown>;\n index: number;\n rowAdditionalActions: (rowData: Record<string, unknown>, index: number, isHovering: boolean) => React.ReactNode;\n bgColor?: string;\n setRowHovering: (rowId: string | number | null) => void;\n is_incomplete?: boolean;\n isInlineEditing?: boolean;\n onConfirmEdit?: () => void;\n onCancelEdit?: () => void;\n rowHasPendingEdits?: boolean;\n};\n\nexport const RowOptionsCell = ({\n rowId, rowOptions, disableOption, rowHovering, is_read, showNewItem, is_modified, is_row_modified, currentData,\n is_deleted, is_added, isDraggingOver, rowAdditionalActions, rowData, index, bgColor: bgColorProp, setRowHovering,\n is_incomplete, isInlineEditing, onConfirmEdit, onCancelEdit, rowHasPendingEdits,\n}: TProps) => {\n const tableConfig = useTableConfig();\n const bgColor = cn({\n 'bg-primary-50 dark:bg-primary-900': isInlineEditing,\n 'bg-neutral-100 dark:bg-black-600': rowHovering === rowId && !isInlineEditing && !(is_deleted || currentData?.is_deleted) && !(is_added || currentData?.is_added),\n 'bg-error-200 dark:bg-error-900': rowHovering === rowId && !isInlineEditing && (is_deleted || currentData?.is_deleted),\n 'bg-success-100 dark:bg-success-800': rowHovering === rowId && !isInlineEditing && (is_added || currentData?.is_added),\n 'bg-primary-50 dark:bg-black-700': !is_incomplete && !is_read && showNewItem && rowHovering !== rowId && !isInlineEditing,\n 'bg-warning-50 dark:bg-black-500': (is_incomplete || is_modified || is_row_modified || currentData?.is_row_modified) && rowHovering !== rowId && !isInlineEditing,\n 'bg-error-100 dark:bg-error-975': (is_deleted || currentData?.is_deleted) && rowHovering !== rowId && !isInlineEditing,\n 'bg-success-50 dark:bg-success-900': (is_added || currentData?.is_added) && rowHovering !== rowId && !isInlineEditing,\n 'bg-primary-50': isDraggingOver && !isInlineEditing,\n ...(bgColorProp && !isInlineEditing && { [bgColorProp]: true }),\n });\n\n const onMouseEnter = useCallback(() => setRowHovering(rowId), [setRowHovering, rowId]);\n const onMouseLeave = useCallback(() => setRowHovering(null), [setRowHovering]);\n\n const { asyncRowOptionsFilter, disableOptionsForRowIndex = null, fieldOperationLoading } = useContext(TableContext);\n const pendingEditsTooltip = tableConfig?.t?.('Save or cancel pending changes first') ?? 'Save or cancel pending changes first';\n const rowOptionsDropdownProps = tableConfig?.getRowOptionsDropdownProps?.();\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n const [isOptionLoading, setIsOptionLoading] = useState(!!asyncRowOptionsFilter);\n const [filteredRowOptions, setFilteredRowOptions] = useState(rowOptions);\n const visibleRowOptions = rowOptions ? rowOptions.filter((option) => option.isVisible !== false).length : 0;\n\n const handleDropdownVisibleChange = async (visible: boolean) => {\n setIsOptionLoading(true);\n if (visible && asyncRowOptionsFilter) {\n try {\n const buttonState = await asyncRowOptionsFilter(rowId);\n const filteredOptions = rowOptions ? rowOptions.filter((option) => { const existOnAPI = Object.keys(buttonState).includes(option.key); return existOnAPI ? buttonState[option.key] : true; }) : [];\n setFilteredRowOptions(filteredOptions);\n } catch { setFilteredRowOptions([]); }\n }\n setIsOptionLoading(false);\n };\n\n const getSkeleton = (\n <div className={`min-w-[140px] max-w-[200px] justify-start whitespace-nowrap items-center py-2 px-1 gap-2`} aria-disabled={true}>\n <SingleLineLoader repeat={rowOptions?.length || 1} lineHeight='15px' />\n </div>\n );\n\n return (\n <td className={`sticky left-0 right-0 z-10 ${bgColor ? bgColor : 'bg-white dark:bg-black-800'} h-row`} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n <div className={`h-full gap-2 top-0 font-medium font-inter overflow-hidden whitespace-nowrap text-ellipsis px-1 w-full flex items-center`}>\n <div className={`${disableOptionsForRowIndex === index ? 'opacity-50' : ''}`} aria-disabled={disableOptionsForRowIndex === index}>\n {rowAdditionalActions ? rowAdditionalActions(rowData, index, rowHovering === rowId) : null}\n </div>\n {isInlineEditing ? (\n <div className={`flex items-center gap-2 ${isAnyFieldOperationLoading ? 'pointer-events-none opacity-50' : ''}`}>\n <div className='cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5' onClick={() => !isAnyFieldOperationLoading && onCancelEdit?.()}>\n <CloseRounded sx={{ height: 20, width: 20, color: '#667085' }} />\n </div>\n <div className='cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5' onClick={() => !isAnyFieldOperationLoading && onConfirmEdit?.()}>\n <CheckRounded sx={{ height: 20, width: 20, color: 'var(--color-primary-600)' }} />\n </div>\n </div>\n ) : rowOptions ? (\n <>\n {disableOptionsForRowIndex === index ? (\n <SpinnerCell />\n ) : rowHasPendingEdits ? (\n <Tooltip title={pendingEditsTooltip}>\n <span><ButtonThreeDots disabled /></span>\n </Tooltip>\n ) : (\n <Dropdown\n menu={{ items: isOptionLoading ? [{ label: getSkeleton, key: 'loading' }] : filteredRowOptions }}\n trigger={['click']}\n overlayClassName='row-option-cell table-row-option-dropdown'\n onOpenChange={handleDropdownVisibleChange}\n disabled={disableOption || visibleRowOptions === 0}\n {...(rowOptionsDropdownProps || {})}\n >\n <ButtonThreeDots disabled={disableOption} />\n </Dropdown>\n )}\n </>\n ) : null}\n </div>\n </td>\n );\n};\n"],"names":["RowOptionsCell","rowId","rowOptions","disableOption","rowHovering","is_read","showNewItem","is_modified","is_row_modified","currentData","is_deleted","is_added","isDraggingOver","rowAdditionalActions","rowData","index","bgColorProp","setRowHovering","is_incomplete","isInlineEditing","onConfirmEdit","onCancelEdit","rowHasPendingEdits","tableConfig","useTableConfig","bgColor","cn","onMouseEnter","useCallback","onMouseLeave","asyncRowOptionsFilter","disableOptionsForRowIndex","fieldOperationLoading","useContext","TableContext","pendingEditsTooltip","rowOptionsDropdownProps","isAnyFieldOperationLoading","isOptionLoading","setIsOptionLoading","useState","filteredRowOptions","setFilteredRowOptions","visibleRowOptions","option","handleDropdownVisibleChange","visible","buttonState","filteredOptions","getSkeleton","jsx","SingleLineLoader","jsxs","CloseRounded","CheckRounded","Fragment","SpinnerCell","Tooltip","ButtonThreeDots","Dropdown"],"mappings":"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"}
|
|
@@ -39,7 +39,7 @@ const ue = ({
|
|
|
39
39
|
"bg-error-200 dark:bg-error-900": r === o && !t && (n || a?.is_deleted),
|
|
40
40
|
"bg-success-100 dark:bg-success-800": r === o && !t && (i || a?.is_added),
|
|
41
41
|
"bg-primary-50 dark:bg-black-700": !u && !F && T && r !== o && !t,
|
|
42
|
-
"bg-warning-50 dark:bg-
|
|
42
|
+
"bg-warning-50 dark:bg-black-500": (u || j || w || a?.is_row_modified) && r !== o && !t,
|
|
43
43
|
"bg-error-100 dark:bg-error-975": (n || a?.is_deleted) && r !== o && !t,
|
|
44
44
|
"bg-success-50 dark:bg-success-900": (i || a?.is_added) && r !== o && !t,
|
|
45
45
|
"bg-primary-50": P && !t,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowOptionsCell.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/RowOptionsCell.tsx"],"sourcesContent":["import { SingleLineLoader } from '../../../../data-display/skeleton/loaders';\nimport { ButtonThreeDots } from '../../../../button/ButtonThreeDots';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { CheckRounded, CloseRounded } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport cn from 'classnames';\nimport { useCallback, useContext, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { SpinnerCell } from './SpinnerCell';\n\ntype TProps = {\n rowId: string | number;\n rowOptions: Array<{ key: string; label: React.ReactNode; isVisible?: boolean; [k: string]: unknown }>;\n disableOption: boolean;\n rowHovering: string | number | null;\n is_read: boolean;\n showNewItem: boolean;\n is_modified: boolean;\n is_row_modified: boolean;\n currentData: Record<string, unknown>;\n is_deleted: boolean;\n is_added: boolean;\n isDraggingOver: boolean;\n rowData: Record<string, unknown>;\n index: number;\n rowAdditionalActions: (rowData: Record<string, unknown>, index: number, isHovering: boolean) => React.ReactNode;\n bgColor?: string;\n setRowHovering: (rowId: string | number | null) => void;\n is_incomplete?: boolean;\n isInlineEditing?: boolean;\n onConfirmEdit?: () => void;\n onCancelEdit?: () => void;\n rowHasPendingEdits?: boolean;\n};\n\nexport const RowOptionsCell = ({\n rowId, rowOptions, disableOption, rowHovering, is_read, showNewItem, is_modified, is_row_modified, currentData,\n is_deleted, is_added, isDraggingOver, rowAdditionalActions, rowData, index, bgColor: bgColorProp, setRowHovering,\n is_incomplete, isInlineEditing, onConfirmEdit, onCancelEdit, rowHasPendingEdits,\n}: TProps) => {\n const tableConfig = useTableConfig();\n const bgColor = cn({\n 'bg-primary-50 dark:bg-primary-900': isInlineEditing,\n 'bg-neutral-100 dark:bg-black-600': rowHovering === rowId && !isInlineEditing && !(is_deleted || currentData?.is_deleted) && !(is_added || currentData?.is_added),\n 'bg-error-200 dark:bg-error-900': rowHovering === rowId && !isInlineEditing && (is_deleted || currentData?.is_deleted),\n 'bg-success-100 dark:bg-success-800': rowHovering === rowId && !isInlineEditing && (is_added || currentData?.is_added),\n 'bg-primary-50 dark:bg-black-700': !is_incomplete && !is_read && showNewItem && rowHovering !== rowId && !isInlineEditing,\n 'bg-warning-50 dark:bg-orange-900': (is_incomplete || is_modified || is_row_modified || currentData?.is_row_modified) && rowHovering !== rowId && !isInlineEditing,\n 'bg-error-100 dark:bg-error-975': (is_deleted || currentData?.is_deleted) && rowHovering !== rowId && !isInlineEditing,\n 'bg-success-50 dark:bg-success-900': (is_added || currentData?.is_added) && rowHovering !== rowId && !isInlineEditing,\n 'bg-primary-50': isDraggingOver && !isInlineEditing,\n ...(bgColorProp && !isInlineEditing && { [bgColorProp]: true }),\n });\n\n const onMouseEnter = useCallback(() => setRowHovering(rowId), [setRowHovering, rowId]);\n const onMouseLeave = useCallback(() => setRowHovering(null), [setRowHovering]);\n\n const { asyncRowOptionsFilter, disableOptionsForRowIndex = null, fieldOperationLoading } = useContext(TableContext);\n const pendingEditsTooltip = tableConfig?.t?.('Save or cancel pending changes first') ?? 'Save or cancel pending changes first';\n const rowOptionsDropdownProps = tableConfig?.getRowOptionsDropdownProps?.();\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n const [isOptionLoading, setIsOptionLoading] = useState(!!asyncRowOptionsFilter);\n const [filteredRowOptions, setFilteredRowOptions] = useState(rowOptions);\n const visibleRowOptions = rowOptions ? rowOptions.filter((option) => option.isVisible !== false).length : 0;\n\n const handleDropdownVisibleChange = async (visible: boolean) => {\n setIsOptionLoading(true);\n if (visible && asyncRowOptionsFilter) {\n try {\n const buttonState = await asyncRowOptionsFilter(rowId);\n const filteredOptions = rowOptions ? rowOptions.filter((option) => { const existOnAPI = Object.keys(buttonState).includes(option.key); return existOnAPI ? buttonState[option.key] : true; }) : [];\n setFilteredRowOptions(filteredOptions);\n } catch { setFilteredRowOptions([]); }\n }\n setIsOptionLoading(false);\n };\n\n const getSkeleton = (\n <div className={`min-w-[140px] max-w-[200px] justify-start whitespace-nowrap items-center py-2 px-1 gap-2`} aria-disabled={true}>\n <SingleLineLoader repeat={rowOptions?.length || 1} lineHeight='15px' />\n </div>\n );\n\n return (\n <td className={`sticky left-0 right-0 z-10 ${bgColor ? bgColor : 'bg-white dark:bg-black-800'} h-row`} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n <div className={`h-full gap-2 top-0 font-medium font-inter overflow-hidden whitespace-nowrap text-ellipsis px-1 w-full flex items-center`}>\n <div className={`${disableOptionsForRowIndex === index ? 'opacity-50' : ''}`} aria-disabled={disableOptionsForRowIndex === index}>\n {rowAdditionalActions ? rowAdditionalActions(rowData, index, rowHovering === rowId) : null}\n </div>\n {isInlineEditing ? (\n <div className={`flex items-center gap-2 ${isAnyFieldOperationLoading ? 'pointer-events-none opacity-50' : ''}`}>\n <div className='cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5' onClick={() => !isAnyFieldOperationLoading && onCancelEdit?.()}>\n <CloseRounded sx={{ height: 20, width: 20, color: '#667085' }} />\n </div>\n <div className='cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5' onClick={() => !isAnyFieldOperationLoading && onConfirmEdit?.()}>\n <CheckRounded sx={{ height: 20, width: 20, color: 'var(--color-primary-600)' }} />\n </div>\n </div>\n ) : rowOptions ? (\n <>\n {disableOptionsForRowIndex === index ? (\n <SpinnerCell />\n ) : rowHasPendingEdits ? (\n <Tooltip title={pendingEditsTooltip}>\n <span><ButtonThreeDots disabled /></span>\n </Tooltip>\n ) : (\n <Dropdown\n menu={{ items: isOptionLoading ? [{ label: getSkeleton, key: 'loading' }] : filteredRowOptions }}\n trigger={['click']}\n overlayClassName='row-option-cell table-row-option-dropdown'\n onOpenChange={handleDropdownVisibleChange}\n disabled={disableOption || visibleRowOptions === 0}\n {...(rowOptionsDropdownProps || {})}\n >\n <ButtonThreeDots disabled={disableOption} />\n </Dropdown>\n )}\n </>\n ) : null}\n </div>\n </td>\n );\n};\n"],"names":["RowOptionsCell","rowId","rowOptions","disableOption","rowHovering","is_read","showNewItem","is_modified","is_row_modified","currentData","is_deleted","is_added","isDraggingOver","rowAdditionalActions","rowData","index","bgColorProp","setRowHovering","is_incomplete","isInlineEditing","onConfirmEdit","onCancelEdit","rowHasPendingEdits","tableConfig","useTableConfig","bgColor","cn","onMouseEnter","useCallback","onMouseLeave","asyncRowOptionsFilter","disableOptionsForRowIndex","fieldOperationLoading","useContext","TableContext","pendingEditsTooltip","rowOptionsDropdownProps","isAnyFieldOperationLoading","isOptionLoading","setIsOptionLoading","useState","filteredRowOptions","setFilteredRowOptions","visibleRowOptions","option","handleDropdownVisibleChange","visible","buttonState","filteredOptions","getSkeleton","jsx","SingleLineLoader","jsxs","CloseRounded","CheckRounded","Fragment","SpinnerCell","Tooltip","ButtonThreeDots","Dropdown"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RowOptionsCell.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/RowOptionsCell.tsx"],"sourcesContent":["import { SingleLineLoader } from '../../../../data-display/skeleton/loaders';\nimport { ButtonThreeDots } from '../../../../button/ButtonThreeDots';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { CheckRounded, CloseRounded } from '@mui/icons-material';\nimport { Dropdown } from 'antd';\nimport cn from 'classnames';\nimport { useCallback, useContext, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { SpinnerCell } from './SpinnerCell';\n\ntype TProps = {\n rowId: string | number;\n rowOptions: Array<{ key: string; label: React.ReactNode; isVisible?: boolean; [k: string]: unknown }>;\n disableOption: boolean;\n rowHovering: string | number | null;\n is_read: boolean;\n showNewItem: boolean;\n is_modified: boolean;\n is_row_modified: boolean;\n currentData: Record<string, unknown>;\n is_deleted: boolean;\n is_added: boolean;\n isDraggingOver: boolean;\n rowData: Record<string, unknown>;\n index: number;\n rowAdditionalActions: (rowData: Record<string, unknown>, index: number, isHovering: boolean) => React.ReactNode;\n bgColor?: string;\n setRowHovering: (rowId: string | number | null) => void;\n is_incomplete?: boolean;\n isInlineEditing?: boolean;\n onConfirmEdit?: () => void;\n onCancelEdit?: () => void;\n rowHasPendingEdits?: boolean;\n};\n\nexport const RowOptionsCell = ({\n rowId, rowOptions, disableOption, rowHovering, is_read, showNewItem, is_modified, is_row_modified, currentData,\n is_deleted, is_added, isDraggingOver, rowAdditionalActions, rowData, index, bgColor: bgColorProp, setRowHovering,\n is_incomplete, isInlineEditing, onConfirmEdit, onCancelEdit, rowHasPendingEdits,\n}: TProps) => {\n const tableConfig = useTableConfig();\n const bgColor = cn({\n 'bg-primary-50 dark:bg-primary-900': isInlineEditing,\n 'bg-neutral-100 dark:bg-black-600': rowHovering === rowId && !isInlineEditing && !(is_deleted || currentData?.is_deleted) && !(is_added || currentData?.is_added),\n 'bg-error-200 dark:bg-error-900': rowHovering === rowId && !isInlineEditing && (is_deleted || currentData?.is_deleted),\n 'bg-success-100 dark:bg-success-800': rowHovering === rowId && !isInlineEditing && (is_added || currentData?.is_added),\n 'bg-primary-50 dark:bg-black-700': !is_incomplete && !is_read && showNewItem && rowHovering !== rowId && !isInlineEditing,\n 'bg-warning-50 dark:bg-black-500': (is_incomplete || is_modified || is_row_modified || currentData?.is_row_modified) && rowHovering !== rowId && !isInlineEditing,\n 'bg-error-100 dark:bg-error-975': (is_deleted || currentData?.is_deleted) && rowHovering !== rowId && !isInlineEditing,\n 'bg-success-50 dark:bg-success-900': (is_added || currentData?.is_added) && rowHovering !== rowId && !isInlineEditing,\n 'bg-primary-50': isDraggingOver && !isInlineEditing,\n ...(bgColorProp && !isInlineEditing && { [bgColorProp]: true }),\n });\n\n const onMouseEnter = useCallback(() => setRowHovering(rowId), [setRowHovering, rowId]);\n const onMouseLeave = useCallback(() => setRowHovering(null), [setRowHovering]);\n\n const { asyncRowOptionsFilter, disableOptionsForRowIndex = null, fieldOperationLoading } = useContext(TableContext);\n const pendingEditsTooltip = tableConfig?.t?.('Save or cancel pending changes first') ?? 'Save or cancel pending changes first';\n const rowOptionsDropdownProps = tableConfig?.getRowOptionsDropdownProps?.();\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n const [isOptionLoading, setIsOptionLoading] = useState(!!asyncRowOptionsFilter);\n const [filteredRowOptions, setFilteredRowOptions] = useState(rowOptions);\n const visibleRowOptions = rowOptions ? rowOptions.filter((option) => option.isVisible !== false).length : 0;\n\n const handleDropdownVisibleChange = async (visible: boolean) => {\n setIsOptionLoading(true);\n if (visible && asyncRowOptionsFilter) {\n try {\n const buttonState = await asyncRowOptionsFilter(rowId);\n const filteredOptions = rowOptions ? rowOptions.filter((option) => { const existOnAPI = Object.keys(buttonState).includes(option.key); return existOnAPI ? buttonState[option.key] : true; }) : [];\n setFilteredRowOptions(filteredOptions);\n } catch { setFilteredRowOptions([]); }\n }\n setIsOptionLoading(false);\n };\n\n const getSkeleton = (\n <div className={`min-w-[140px] max-w-[200px] justify-start whitespace-nowrap items-center py-2 px-1 gap-2`} aria-disabled={true}>\n <SingleLineLoader repeat={rowOptions?.length || 1} lineHeight='15px' />\n </div>\n );\n\n return (\n <td className={`sticky left-0 right-0 z-10 ${bgColor ? bgColor : 'bg-white dark:bg-black-800'} h-row`} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n <div className={`h-full gap-2 top-0 font-medium font-inter overflow-hidden whitespace-nowrap text-ellipsis px-1 w-full flex items-center`}>\n <div className={`${disableOptionsForRowIndex === index ? 'opacity-50' : ''}`} aria-disabled={disableOptionsForRowIndex === index}>\n {rowAdditionalActions ? rowAdditionalActions(rowData, index, rowHovering === rowId) : null}\n </div>\n {isInlineEditing ? (\n <div className={`flex items-center gap-2 ${isAnyFieldOperationLoading ? 'pointer-events-none opacity-50' : ''}`}>\n <div className='cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5' onClick={() => !isAnyFieldOperationLoading && onCancelEdit?.()}>\n <CloseRounded sx={{ height: 20, width: 20, color: '#667085' }} />\n </div>\n <div className='cursor-pointer hover:bg-neutral-100 dark:hover:bg-black-600 rounded p-0.5' onClick={() => !isAnyFieldOperationLoading && onConfirmEdit?.()}>\n <CheckRounded sx={{ height: 20, width: 20, color: 'var(--color-primary-600)' }} />\n </div>\n </div>\n ) : rowOptions ? (\n <>\n {disableOptionsForRowIndex === index ? (\n <SpinnerCell />\n ) : rowHasPendingEdits ? (\n <Tooltip title={pendingEditsTooltip}>\n <span><ButtonThreeDots disabled /></span>\n </Tooltip>\n ) : (\n <Dropdown\n menu={{ items: isOptionLoading ? [{ label: getSkeleton, key: 'loading' }] : filteredRowOptions }}\n trigger={['click']}\n overlayClassName='row-option-cell table-row-option-dropdown'\n onOpenChange={handleDropdownVisibleChange}\n disabled={disableOption || visibleRowOptions === 0}\n {...(rowOptionsDropdownProps || {})}\n >\n <ButtonThreeDots disabled={disableOption} />\n </Dropdown>\n )}\n </>\n ) : null}\n </div>\n </td>\n );\n};\n"],"names":["RowOptionsCell","rowId","rowOptions","disableOption","rowHovering","is_read","showNewItem","is_modified","is_row_modified","currentData","is_deleted","is_added","isDraggingOver","rowAdditionalActions","rowData","index","bgColorProp","setRowHovering","is_incomplete","isInlineEditing","onConfirmEdit","onCancelEdit","rowHasPendingEdits","tableConfig","useTableConfig","bgColor","cn","onMouseEnter","useCallback","onMouseLeave","asyncRowOptionsFilter","disableOptionsForRowIndex","fieldOperationLoading","useContext","TableContext","pendingEditsTooltip","rowOptionsDropdownProps","isAnyFieldOperationLoading","isOptionLoading","setIsOptionLoading","useState","filteredRowOptions","setFilteredRowOptions","visibleRowOptions","option","handleDropdownVisibleChange","visible","buttonState","filteredOptions","getSkeleton","jsx","SingleLineLoader","jsxs","CloseRounded","CheckRounded","Fragment","SpinnerCell","Tooltip","ButtonThreeDots","Dropdown"],"mappings":"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"}
|