pixel-react 1.10.6 → 1.10.8
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/lib/components/MenuOption/types.d.ts +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.esm.js +131 -69
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +131 -69
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getAnchorElement/getAnchorElement.d.ts +1 -0
- package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/MenuOption/MenuOption.scss +4 -0
- package/src/components/MenuOption/MenuOption.stories.tsx +2 -2
- package/src/components/MenuOption/MenuOption.tsx +72 -60
- package/src/components/MenuOption/types.ts +1 -1
- package/src/components/Table/Table.scss +15 -15
- package/src/components/Table/Table.tsx +39 -41
- package/src/components/TableTree/Components/TableBody.tsx +0 -1
- package/src/components/TableTree/TableTree.scss +1 -0
- package/src/utils/getAnchorElement/getAnchorElement.ts +7 -0
- package/src/utils/getTreeDetails/getTreeDetails.stories.tsx +59 -9
- package/src/utils/getTreeDetails/getTreeDetails.ts +59 -7
package/lib/tsconfig.tsbuildinfo
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"root":["../src/index.ts","../src/componentprops/treenodeprops.ts","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addresourcebutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.tsx","../src/components/allprojectsdropdown/index.ts","../src/components/allprojectsdropdown/types.ts","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/attachimage/attachimage.tsx","../src/components/attachimage/index.ts","../src/components/attachimage/types.ts","../src/components/attachmentbutton/attachmentbutton.tsx","../src/components/attachmentbutton/index.ts","../src/components/attachmentbutton/types.ts","../src/components/avatar/avatar.tsx","../src/components/avatar/index.ts","../src/components/avatar/types.ts","../src/components/browsertabs/browsertabs.tsx","../src/components/browsertabs/index.ts","../src/components/browsertabs/types.ts","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/barchart/barchart.tsx","../src/components/charts/barchart/index.ts","../src/components/charts/barchart/types.ts","../src/components/charts/dashboarddonutchart/dashboarddonutchart.tsx","../src/components/charts/dashboarddonutchart/index.ts","../src/components/charts/dashboarddonutchart/types.ts","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/iconradialchart/iconradialchart.tsx","../src/components/charts/iconradialchart/index.ts","../src/components/charts/iconradialchart/types.ts","../src/components/charts/linechart/linechart.tsx","../src/components/charts/linechart/index.ts","../src/components/charts/linechart/types.ts","../src/components/charts/multiradialchart/multiradialchart.tsx","../src/components/charts/multiradialchart/index.ts","../src/components/charts/multiradialchart/types.ts","../src/components/charts/piechart/piechart.tsx","../src/components/charts/piechart/index.ts","../src/components/charts/piechart/types.ts","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/choosefile/choosefile.tsx","../src/components/choosefile/types.ts","../src/components/comment/comments.tsx","../src/components/comment/index.ts","../src/components/comment/type.ts","../src/components/comment/comment/comment.tsx","../src/components/comment/comment/usenode.ts","../src/components/conditionaldropdown/conditionaldropdown.tsx","../src/components/conditionaldropdown/optionsdropdown.tsx","../src/components/conditionaldropdown/index.ts","../src/components/conditionaldropdown/types.ts","../src/components/connectingbranch/connectingbranch.tsx","../src/components/connectingbranch/data.tsx","../src/components/connectingbranch/index.ts","../src/components/connectingbranch/types.ts","../src/components/connectingbranch/branchcomponents/machineinstances.tsx","../src/components/createvariable/createvariableslider.tsx","../src/components/createvariable/index.ts","../src/components/createvariable/types.ts","../src/components/datepicker/datepicker.tsx","../src/components/datepicker/timepicker.tsx","../src/components/datepicker/index.ts","../src/components/datepicker/types.ts","../src/components/downloadclient/downloadclient.tsx","../src/components/downloadclient/index.ts","../src/components/downloadclient/type.ts","../src/components/draganddrop/draganddrop.ts","../src/components/draganddrop/draganddroplist.tsx","../src/components/draganddrop/index.ts","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/edittextfield/edittextfield.tsx","../src/components/edittextfield/index.ts","../src/components/edittextfield/types.ts","../src/components/editor/editor.tsx","../src/components/editor/variabledropdown.tsx","../src/components/editor/constants.ts","../src/components/editor/index.ts","../src/components/editor/types.ts","../src/components/excel/types.ts","../src/components/excel/dataconversion.ts","../src/components/excel/index.ts","../src/components/excel/colorbarselector/colorbarselector.tsx","../src/components/excel/excelcontextmenu/excelcontextmenu.tsx","../src/components/excel/excelfile/excelfile.tsx","../src/components/excel/excelfile/excelfilecomponents/activecell.tsx","../src/components/excel/excelfile/excelfilecomponents/cell.tsx","../src/components/excel/excelfile/excelfilecomponents/columnindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/copied.tsx","../src/components/excel/excelfile/excelfilecomponents/cornerindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/dataeditor.tsx","../src/components/excel/excelfile/excelfilecomponents/dataviewer.tsx","../src/components/excel/excelfile/excelfilecomponents/floatingrect.tsx","../src/components/excel/excelfile/excelfilecomponents/headerrow.tsx","../src/components/excel/excelfile/excelfilecomponents/row.tsx","../src/components/excel/excelfile/excelfilecomponents/rowindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/selected.tsx","../src/components/excel/excelfile/excelfilecomponents/spreadsheet.tsx","../src/components/excel/excelfile/excelfilecomponents/table.tsx","../src/components/excel/excelfile/excelfilecomponents/actions.ts","../src/components/excel/excelfile/excelfilecomponents/aremodelsequal.ts","../src/components/excel/excelfile/excelfilecomponents/context.ts","../src/components/excel/excelfile/excelfilecomponents/index.ts","../src/components/excel/excelfile/excelfilecomponents/matrix.ts","../src/components/excel/excelfile/excelfilecomponents/point-range.ts","../src/components/excel/excelfile/excelfilecomponents/point.ts","../src/components/excel/excelfile/excelfilecomponents/reducer.ts","../src/components/excel/excelfile/excelfilecomponents/reducerfunctions.ts","../src/components/excel/excelfile/excelfilecomponents/selection.ts","../src/components/excel/excelfile/excelfilecomponents/types.ts","../src/components/excel/excelfile/excelfilecomponents/use-dispatch.ts","../src/components/excel/excelfile/excelfilecomponents/use-selector.ts","../src/components/excel/excelfile/excelfilecomponents/util.ts","../src/components/excel/excelfile/excelfilecomponents/engine/engine.ts","../src/components/excel/excelfile/excelfilecomponents/engine/formula.ts","../src/components/excel/excelfile/excelfilecomponents/engine/index.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-graph.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-hash.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-set.ts","../src/components/excel/excelfile/excelfilecomponents/typings/fast-formula-parser.d.ts","../src/components/excel/exceltoolbar/exceltoolbar.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/ff_captcha/recaptcha.tsx","../src/components/ff_captcha/index.ts","../src/components/ff_captcha/types.ts","../src/components/fieldset/fieldset.tsx","../src/components/fieldset/index.ts","../src/components/fieldset/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/radiofilepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.ts","../src/components/form/forms.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/iconbutton/iconbutton.tsx","../src/components/iconbutton/index.ts","../src/components/iconbutton/types.ts","../src/components/iconradiogroup/iconradiogroup.tsx","../src/components/iconradiogroup/index.ts","../src/components/iconradiogroup/type.ts","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/labeledittextfield/labeledittextfield.tsx","../src/components/labeledittextfield/index.ts","../src/components/labeledittextfield/types.ts","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/machineinputfield/machineinputfield.tsx","../src/components/machineinputfield/index.ts","../src/components/machineinputfield/types.ts","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/mobileskin/mobileskin.tsx","../src/components/mobileskin/mobileskininterface.ts","../src/components/mobileskin/index.ts","../src/components/mobileskin/types.ts","../src/components/modal/modal.tsx","../src/components/modal/index.tsx","../src/components/modal/types.ts","../src/components/moduleschip/modulechip.tsx","../src/components/moduleschip/index.ts","../src/components/moduleschip/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/nlpinput/nlpinput.tsx","../src/components/nlpinput/index.ts","../src/components/nlpinput/sampledata.ts","../src/components/nlpinput/types.tsx","../src/components/nlpinput/components/nlpdropdown/nlpdropdowntype.ts","../src/components/nlpinput/components/nlpdropdown/nlpdropdown.tsx","../src/components/paper/paper.tsx","../src/components/paper/index.ts","../src/components/paper/types.ts","../src/components/phoneinput/phoneinput.tsx","../src/components/phoneinput/index.ts","../src/components/phoneinput/types.ts","../src/components/popupmodal/popupmodal.tsx","../src/components/popupmodal/types.ts","../src/components/progressbar/progressbar.tsx","../src/components/progressbar/index.ts","../src/components/progressbar/types.ts","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/scriptswitchbutton/scriptswitchbutton.tsx","../src/components/scriptswitchbutton/index.ts","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown.tsx","../src/components/select/components/types.ts","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.tsx","../src/components/sequentialconnectingbranch/index.ts","../src/components/sequentialconnectingbranch/types.ts","../src/components/sequentialconnectingbranch/components/branches/branches.tsx","../src/components/sequentialconnectingbranch/components/branches/types.ts","../src/components/sequentialconnectingbranch/components/connectingbranches/connectingbranches.tsx","../src/components/sequentialconnectingbranch/components/connectingbranches/types.ts","../src/components/sequentialconnectingbranch/components/datasettooltip/datasettooltip.tsx","../src/components/sequentialconnectingbranch/components/datasettooltip/types.ts","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/statuscard/statuscard.tsx","../src/components/statuscard/index.ts","../src/components/statuscard/types.ts","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabletree/types.ts","../src/components/tabletree/components/tablebody.tsx","../src/components/tabletree/components/tablecell.tsx","../src/components/tabletree/components/tablehead.tsx","../src/components/tabletree/components/tablerow.tsx","../src/components/tabletree/components/addmodule/addmodule.tsx","../src/components/tabletree/utils/addnewrow.ts","../src/components/tabletree/utils/getallchildids.ts","../src/components/tabletree/utils/renderspaces.ts","../src/components/tablewithaccordion/tablewithaccordion.tsx","../src/components/tablewithaccordion/data.ts","../src/components/tablewithaccordion/index.ts","../src/components/tablewithaccordion/types.ts","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toastify/toastify.tsx","../src/components/toastify/index.ts","../src/components/toastify/types.ts","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/toggleswitch/toggleswitch.tsx","../src/components/toggleswitch/index.ts","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/components/variableinput/variableinput.tsx","../src/components/variableinput/index.ts","../src/components/variableinput/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useintersectionobserver.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/formatstring/formatstring.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/capitalize/capitalize.tsx","../src/utils/checkduplicates/checkduplicates.ts","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.ts","../src/utils/downloadfile/savefilefromblob.ts","../src/utils/ffid/ffid.ts","../src/utils/findandinsert/findandinsert.ts","../src/utils/formdata/convertformdatatoobject.ts","../src/utils/functioncheck/functioncheck.ts","../src/utils/getencrypteddata/getencrypteddata.ts","../src/utils/getextension/getextension.ts","../src/utils/getselectoptionvalue/getselectoptionvalue.ts","../src/utils/getsequentialpayload/getsequentialpayload.ts","../src/utils/getsequentialpayload/types.ts","../src/utils/gettreedetails/gettreedetails.ts","../src/utils/handletreenodeselect/handletreenodeselect.ts","../src/utils/indexdbstore/indexdb.ts","../src/utils/keyboardactionutil/usekeyboardactions.tsx","../src/utils/keyboardactionutil/types.ts","../src/utils/swaparrayitem/draganddroputils.ts","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.ts","../src/utils/validatefile/validatefile.ts","../src/validations/regex.ts"],"version":"5.7.2"}
|
1
|
+
{"root":["../src/index.ts","../src/componentprops/treenodeprops.ts","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addresourcebutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.tsx","../src/components/allprojectsdropdown/index.ts","../src/components/allprojectsdropdown/types.ts","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/attachimage/attachimage.tsx","../src/components/attachimage/index.ts","../src/components/attachimage/types.ts","../src/components/attachmentbutton/attachmentbutton.tsx","../src/components/attachmentbutton/index.ts","../src/components/attachmentbutton/types.ts","../src/components/avatar/avatar.tsx","../src/components/avatar/index.ts","../src/components/avatar/types.ts","../src/components/browsertabs/browsertabs.tsx","../src/components/browsertabs/index.ts","../src/components/browsertabs/types.ts","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/barchart/barchart.tsx","../src/components/charts/barchart/index.ts","../src/components/charts/barchart/types.ts","../src/components/charts/dashboarddonutchart/dashboarddonutchart.tsx","../src/components/charts/dashboarddonutchart/index.ts","../src/components/charts/dashboarddonutchart/types.ts","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/iconradialchart/iconradialchart.tsx","../src/components/charts/iconradialchart/index.ts","../src/components/charts/iconradialchart/types.ts","../src/components/charts/linechart/linechart.tsx","../src/components/charts/linechart/index.ts","../src/components/charts/linechart/types.ts","../src/components/charts/multiradialchart/multiradialchart.tsx","../src/components/charts/multiradialchart/index.ts","../src/components/charts/multiradialchart/types.ts","../src/components/charts/piechart/piechart.tsx","../src/components/charts/piechart/index.ts","../src/components/charts/piechart/types.ts","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/choosefile/choosefile.tsx","../src/components/choosefile/types.ts","../src/components/comment/comments.tsx","../src/components/comment/index.ts","../src/components/comment/type.ts","../src/components/comment/comment/comment.tsx","../src/components/comment/comment/usenode.ts","../src/components/conditionaldropdown/conditionaldropdown.tsx","../src/components/conditionaldropdown/optionsdropdown.tsx","../src/components/conditionaldropdown/index.ts","../src/components/conditionaldropdown/types.ts","../src/components/connectingbranch/connectingbranch.tsx","../src/components/connectingbranch/data.tsx","../src/components/connectingbranch/index.ts","../src/components/connectingbranch/types.ts","../src/components/connectingbranch/branchcomponents/machineinstances.tsx","../src/components/createvariable/createvariableslider.tsx","../src/components/createvariable/index.ts","../src/components/createvariable/types.ts","../src/components/datepicker/datepicker.tsx","../src/components/datepicker/timepicker.tsx","../src/components/datepicker/index.ts","../src/components/datepicker/types.ts","../src/components/downloadclient/downloadclient.tsx","../src/components/downloadclient/index.ts","../src/components/downloadclient/type.ts","../src/components/draganddrop/draganddrop.ts","../src/components/draganddrop/draganddroplist.tsx","../src/components/draganddrop/index.ts","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/edittextfield/edittextfield.tsx","../src/components/edittextfield/index.ts","../src/components/edittextfield/types.ts","../src/components/editor/editor.tsx","../src/components/editor/variabledropdown.tsx","../src/components/editor/constants.ts","../src/components/editor/index.ts","../src/components/editor/types.ts","../src/components/excel/types.ts","../src/components/excel/dataconversion.ts","../src/components/excel/index.ts","../src/components/excel/colorbarselector/colorbarselector.tsx","../src/components/excel/excelcontextmenu/excelcontextmenu.tsx","../src/components/excel/excelfile/excelfile.tsx","../src/components/excel/excelfile/excelfilecomponents/activecell.tsx","../src/components/excel/excelfile/excelfilecomponents/cell.tsx","../src/components/excel/excelfile/excelfilecomponents/columnindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/copied.tsx","../src/components/excel/excelfile/excelfilecomponents/cornerindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/dataeditor.tsx","../src/components/excel/excelfile/excelfilecomponents/dataviewer.tsx","../src/components/excel/excelfile/excelfilecomponents/floatingrect.tsx","../src/components/excel/excelfile/excelfilecomponents/headerrow.tsx","../src/components/excel/excelfile/excelfilecomponents/row.tsx","../src/components/excel/excelfile/excelfilecomponents/rowindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/selected.tsx","../src/components/excel/excelfile/excelfilecomponents/spreadsheet.tsx","../src/components/excel/excelfile/excelfilecomponents/table.tsx","../src/components/excel/excelfile/excelfilecomponents/actions.ts","../src/components/excel/excelfile/excelfilecomponents/aremodelsequal.ts","../src/components/excel/excelfile/excelfilecomponents/context.ts","../src/components/excel/excelfile/excelfilecomponents/index.ts","../src/components/excel/excelfile/excelfilecomponents/matrix.ts","../src/components/excel/excelfile/excelfilecomponents/point-range.ts","../src/components/excel/excelfile/excelfilecomponents/point.ts","../src/components/excel/excelfile/excelfilecomponents/reducer.ts","../src/components/excel/excelfile/excelfilecomponents/reducerfunctions.ts","../src/components/excel/excelfile/excelfilecomponents/selection.ts","../src/components/excel/excelfile/excelfilecomponents/types.ts","../src/components/excel/excelfile/excelfilecomponents/use-dispatch.ts","../src/components/excel/excelfile/excelfilecomponents/use-selector.ts","../src/components/excel/excelfile/excelfilecomponents/util.ts","../src/components/excel/excelfile/excelfilecomponents/engine/engine.ts","../src/components/excel/excelfile/excelfilecomponents/engine/formula.ts","../src/components/excel/excelfile/excelfilecomponents/engine/index.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-graph.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-hash.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-set.ts","../src/components/excel/excelfile/excelfilecomponents/typings/fast-formula-parser.d.ts","../src/components/excel/exceltoolbar/exceltoolbar.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/ff_captcha/recaptcha.tsx","../src/components/ff_captcha/index.ts","../src/components/ff_captcha/types.ts","../src/components/fieldset/fieldset.tsx","../src/components/fieldset/index.ts","../src/components/fieldset/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/radiofilepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.ts","../src/components/form/forms.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/iconbutton/iconbutton.tsx","../src/components/iconbutton/index.ts","../src/components/iconbutton/types.ts","../src/components/iconradiogroup/iconradiogroup.tsx","../src/components/iconradiogroup/index.ts","../src/components/iconradiogroup/type.ts","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/labeledittextfield/labeledittextfield.tsx","../src/components/labeledittextfield/index.ts","../src/components/labeledittextfield/types.ts","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/machineinputfield/machineinputfield.tsx","../src/components/machineinputfield/index.ts","../src/components/machineinputfield/types.ts","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/mobileskin/mobileskin.tsx","../src/components/mobileskin/mobileskininterface.ts","../src/components/mobileskin/index.ts","../src/components/mobileskin/types.ts","../src/components/modal/modal.tsx","../src/components/modal/index.tsx","../src/components/modal/types.ts","../src/components/moduleschip/modulechip.tsx","../src/components/moduleschip/index.ts","../src/components/moduleschip/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/nlpinput/nlpinput.tsx","../src/components/nlpinput/index.ts","../src/components/nlpinput/sampledata.ts","../src/components/nlpinput/types.tsx","../src/components/nlpinput/components/nlpdropdown/nlpdropdowntype.ts","../src/components/nlpinput/components/nlpdropdown/nlpdropdown.tsx","../src/components/paper/paper.tsx","../src/components/paper/index.ts","../src/components/paper/types.ts","../src/components/phoneinput/phoneinput.tsx","../src/components/phoneinput/index.ts","../src/components/phoneinput/types.ts","../src/components/popupmodal/popupmodal.tsx","../src/components/popupmodal/types.ts","../src/components/progressbar/progressbar.tsx","../src/components/progressbar/index.ts","../src/components/progressbar/types.ts","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/scriptswitchbutton/scriptswitchbutton.tsx","../src/components/scriptswitchbutton/index.ts","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown.tsx","../src/components/select/components/types.ts","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.tsx","../src/components/sequentialconnectingbranch/index.ts","../src/components/sequentialconnectingbranch/types.ts","../src/components/sequentialconnectingbranch/components/branches/branches.tsx","../src/components/sequentialconnectingbranch/components/branches/types.ts","../src/components/sequentialconnectingbranch/components/connectingbranches/connectingbranches.tsx","../src/components/sequentialconnectingbranch/components/connectingbranches/types.ts","../src/components/sequentialconnectingbranch/components/datasettooltip/datasettooltip.tsx","../src/components/sequentialconnectingbranch/components/datasettooltip/types.ts","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/statuscard/statuscard.tsx","../src/components/statuscard/index.ts","../src/components/statuscard/types.ts","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabletree/types.ts","../src/components/tabletree/components/tablebody.tsx","../src/components/tabletree/components/tablecell.tsx","../src/components/tabletree/components/tablehead.tsx","../src/components/tabletree/components/tablerow.tsx","../src/components/tabletree/components/addmodule/addmodule.tsx","../src/components/tabletree/utils/addnewrow.ts","../src/components/tabletree/utils/getallchildids.ts","../src/components/tabletree/utils/renderspaces.ts","../src/components/tablewithaccordion/tablewithaccordion.tsx","../src/components/tablewithaccordion/data.ts","../src/components/tablewithaccordion/index.ts","../src/components/tablewithaccordion/types.ts","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toastify/toastify.tsx","../src/components/toastify/index.ts","../src/components/toastify/types.ts","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/toggleswitch/toggleswitch.tsx","../src/components/toggleswitch/index.ts","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/components/variableinput/variableinput.tsx","../src/components/variableinput/index.ts","../src/components/variableinput/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useintersectionobserver.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/formatstring/formatstring.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/capitalize/capitalize.tsx","../src/utils/checkduplicates/checkduplicates.ts","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.ts","../src/utils/downloadfile/savefilefromblob.ts","../src/utils/ffid/ffid.ts","../src/utils/findandinsert/findandinsert.ts","../src/utils/formdata/convertformdatatoobject.ts","../src/utils/functioncheck/functioncheck.ts","../src/utils/getanchorelement/getanchorelement.ts","../src/utils/getencrypteddata/getencrypteddata.ts","../src/utils/getextension/getextension.ts","../src/utils/getselectoptionvalue/getselectoptionvalue.ts","../src/utils/getsequentialpayload/getsequentialpayload.ts","../src/utils/getsequentialpayload/types.ts","../src/utils/gettreedetails/gettreedetails.ts","../src/utils/handletreenodeselect/handletreenodeselect.ts","../src/utils/indexdbstore/indexdb.ts","../src/utils/keyboardactionutil/usekeyboardactions.tsx","../src/utils/keyboardactionutil/types.ts","../src/utils/swaparrayitem/draganddroputils.ts","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.ts","../src/utils/validatefile/validatefile.ts","../src/validations/regex.ts"],"version":"5.7.2"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const getAnchorElement: (anchorRef: React.RefObject<HTMLElement> | string) => HTMLElement | null;
|
@@ -7,4 +7,4 @@ export interface TreeDetailsResult {
|
|
7
7
|
endId: string;
|
8
8
|
root?: TreeNode;
|
9
9
|
}
|
10
|
-
export declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start", oldData: TreeNode[], newData: TreeNode[], index?: number) => TreeDetailsResult;
|
10
|
+
export declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start" | "addAbove" | "addBelow", oldData: TreeNode[], newData: TreeNode[], index?: number, sourceId?: string) => TreeDetailsResult;
|
package/package.json
CHANGED
@@ -81,13 +81,13 @@ export const ControlledMenuOption: Story = {
|
|
81
81
|
render: (args) => {
|
82
82
|
const moreRef = useRef<HTMLDivElement>(null);
|
83
83
|
return (
|
84
|
-
<div ref={moreRef}>
|
84
|
+
<div ref={moreRef} style={{display:'flex', height:'100vh', alignItems:'center'}}>
|
85
85
|
<MenuOption
|
86
86
|
{...args}
|
87
87
|
options={options}
|
88
88
|
targetRef={moreRef} // Make sure targetRef is passed properly here
|
89
89
|
onOptionClick={handleOptionClick}
|
90
|
-
dropdownPlacement="
|
90
|
+
dropdownPlacement="down" // Dropdown placement for testing
|
91
91
|
/>
|
92
92
|
</div>
|
93
93
|
);
|
@@ -3,16 +3,17 @@ import './MenuOption.scss';
|
|
3
3
|
import Icon from '../Icon';
|
4
4
|
import classNames from 'classnames';
|
5
5
|
import Tooltip from '../Tooltip';
|
6
|
+
import Typography from '../Typography';
|
7
|
+
import { createPortal } from 'react-dom';
|
8
|
+
import { ThemeContext } from '../ThemeProvider/ThemeProvider';
|
9
|
+
import useClickOutside from '../../hooks/useClickOutside';
|
10
|
+
import { getAnchorElement } from '../../utils/getAnchorElement/getAnchorElement';
|
6
11
|
import {
|
7
12
|
OptionCardProps,
|
8
13
|
OptionProps,
|
9
14
|
MenuOptionProps,
|
10
15
|
OptionClick,
|
11
16
|
} from './types';
|
12
|
-
import Typography from '../Typography';
|
13
|
-
import { createPortal } from 'react-dom';
|
14
|
-
import { ThemeContext } from '../ThemeProvider/ThemeProvider';
|
15
|
-
import useClickOutside from '../../hooks/useClickOutside';
|
16
17
|
|
17
18
|
const Option = ({ option, onClick }: OptionProps) => (
|
18
19
|
<div
|
@@ -39,6 +40,42 @@ const Option = ({ option, onClick }: OptionProps) => (
|
|
39
40
|
</div>
|
40
41
|
);
|
41
42
|
|
43
|
+
const calculatePosition = (
|
44
|
+
menuPosition: { top: any; left: any; height: any; width: any },
|
45
|
+
dropdownPlacement: string | undefined,
|
46
|
+
optionCardHeight: number
|
47
|
+
) => {
|
48
|
+
const { top, left, height, width } = menuPosition;
|
49
|
+
const availableSpace = {
|
50
|
+
top,
|
51
|
+
bottom: window.innerHeight - (top + height),
|
52
|
+
left,
|
53
|
+
right: window.innerWidth - (left + width),
|
54
|
+
};
|
55
|
+
const gap = 8; // Required gap
|
56
|
+
|
57
|
+
switch (dropdownPlacement) {
|
58
|
+
case 'top':
|
59
|
+
return availableSpace.top > optionCardHeight + gap
|
60
|
+
? { top: top - optionCardHeight - gap, left }
|
61
|
+
: { top: top + height + gap, left };
|
62
|
+
case 'down':
|
63
|
+
return availableSpace.bottom > optionCardHeight + gap
|
64
|
+
? { top: top + height + gap, left }
|
65
|
+
: { top: top - optionCardHeight - gap, left };
|
66
|
+
case 'left':
|
67
|
+
return availableSpace.left > width + gap
|
68
|
+
? { top, left: left - width - gap }
|
69
|
+
: { top, left: left + width + gap };
|
70
|
+
case 'right':
|
71
|
+
return availableSpace.right > width + gap
|
72
|
+
? { top, left: left + width + gap }
|
73
|
+
: { top, left: left - width - gap };
|
74
|
+
default:
|
75
|
+
return { top, left };
|
76
|
+
}
|
77
|
+
};
|
78
|
+
|
42
79
|
const OptionCard = ({
|
43
80
|
options,
|
44
81
|
onClick,
|
@@ -51,55 +88,21 @@ const OptionCard = ({
|
|
51
88
|
}: OptionCardProps) => {
|
52
89
|
const themeContext = useContext(ThemeContext);
|
53
90
|
const currentTheme = themeContext?.currentTheme;
|
54
|
-
const [optionsHeight, setOptionsHeight] = useState(0);
|
55
|
-
const [optionsWidth, setOptionsWidth] = useState(0);
|
56
91
|
const optionCardRef = useRef<HTMLDivElement>(null);
|
57
|
-
|
58
|
-
useEffect(() => {
|
59
|
-
if (optionCardRef?.current) {
|
60
|
-
const rect = optionCardRef?.current?.getBoundingClientRect();
|
61
|
-
setOptionsHeight(rect?.height);
|
62
|
-
setOptionsWidth(rect?.width);
|
63
|
-
}
|
64
|
-
}, []);
|
65
|
-
|
66
92
|
useClickOutside(menuRef, closeDropdown, [optionCardRef]);
|
67
93
|
|
68
|
-
const
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
};
|
75
|
-
case 'down':
|
76
|
-
return {
|
77
|
-
top: menuPosition.top + 20,
|
78
|
-
left: menuPosition.left - 4,
|
79
|
-
};
|
80
|
-
case 'left':
|
81
|
-
return {
|
82
|
-
top: menuPosition.top - 4,
|
83
|
-
left: menuPosition.left - optionsWidth - 8,
|
84
|
-
};
|
85
|
-
case 'right':
|
86
|
-
return {
|
87
|
-
top: menuPosition.top - 4,
|
88
|
-
left: menuPosition.left + 20,
|
89
|
-
};
|
90
|
-
default:
|
91
|
-
return {
|
92
|
-
top: menuPosition.bottom,
|
93
|
-
left: menuPosition.rightSpaceAvailable + 12,
|
94
|
-
};
|
95
|
-
}
|
96
|
-
})();
|
94
|
+
const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
|
95
|
+
const style = calculatePosition(
|
96
|
+
menuPosition,
|
97
|
+
dropdownPlacement,
|
98
|
+
optionCardHeight
|
99
|
+
);
|
97
100
|
|
98
101
|
return createPortal(
|
99
102
|
<div
|
100
103
|
className={classNames(
|
101
104
|
'ff-option-card',
|
102
|
-
|
105
|
+
{ 'ff-option-card--primary': variant === 'primary' },
|
103
106
|
currentTheme
|
104
107
|
)}
|
105
108
|
style={{ ...style, zIndex }}
|
@@ -128,20 +131,36 @@ const MenuOption = ({
|
|
128
131
|
zIndex = 99,
|
129
132
|
dropdownPlacement = 'down',
|
130
133
|
optionCardVariant,
|
131
|
-
targetRef,
|
134
|
+
targetRef = null,
|
132
135
|
treeRowRef,
|
133
136
|
}: MenuOptionProps) => {
|
134
137
|
const [isClicked, setIsClicked] = useState(false);
|
135
138
|
const menuRef = useRef<HTMLDivElement>(null);
|
139
|
+
const menuIconRef = useRef<HTMLDivElement>(null);
|
136
140
|
const [menuPosition, setMenuPosition] = useState({
|
137
141
|
top: 0,
|
138
142
|
left: 0,
|
139
143
|
height: 0,
|
140
144
|
right: 0,
|
145
|
+
width: 0,
|
141
146
|
});
|
142
147
|
|
143
148
|
const closeDropDown = () => setIsClicked(false);
|
144
149
|
|
150
|
+
useEffect(() => {
|
151
|
+
if (targetRef) {
|
152
|
+
const parentDom = getAnchorElement(targetRef);
|
153
|
+
parentDom?.classList.toggle('hover', isClicked);
|
154
|
+
}
|
155
|
+
|
156
|
+
return () => {
|
157
|
+
if (targetRef) {
|
158
|
+
const parentDom = getAnchorElement(targetRef);
|
159
|
+
parentDom?.classList.remove('hover');
|
160
|
+
}
|
161
|
+
};
|
162
|
+
}, [isClicked, targetRef]);
|
163
|
+
|
145
164
|
const onIconClickHandler = () => {
|
146
165
|
onClick();
|
147
166
|
calculateDims();
|
@@ -149,28 +168,22 @@ const MenuOption = ({
|
|
149
168
|
};
|
150
169
|
|
151
170
|
const handleOptionClick = (option: OptionClick) => {
|
152
|
-
|
153
|
-
|
154
|
-
|
171
|
+
treeRowRef?.current?.children[0]?.children[2]?.classList.remove(
|
172
|
+
'table-row-add-button'
|
173
|
+
);
|
155
174
|
onOptionClick(option);
|
156
175
|
closeDropDown();
|
157
176
|
};
|
158
177
|
|
159
178
|
const calculateDims = () => {
|
160
|
-
|
161
|
-
|
162
|
-
targetElement = document.getElementById(targetRef);
|
163
|
-
} else if (targetRef && targetRef.current) {
|
164
|
-
targetElement = targetRef.current;
|
165
|
-
}
|
166
|
-
|
167
|
-
if (targetElement) {
|
168
|
-
const rect = targetElement.getBoundingClientRect();
|
179
|
+
if (menuIconRef.current) {
|
180
|
+
const rect = menuIconRef.current.getBoundingClientRect();
|
169
181
|
setMenuPosition({
|
170
182
|
top: rect.top + window.scrollY,
|
171
183
|
left: rect.left + window.scrollX,
|
172
184
|
height: rect.height,
|
173
185
|
right: rect.right,
|
186
|
+
width: rect.width,
|
174
187
|
});
|
175
188
|
}
|
176
189
|
};
|
@@ -184,13 +197,12 @@ const MenuOption = ({
|
|
184
197
|
'ff-menuicon-container-clicked': isClicked,
|
185
198
|
dark: variant === 'dark',
|
186
199
|
})}
|
200
|
+
ref={menuIconRef}
|
187
201
|
onClick={onIconClickHandler}
|
188
202
|
style={{
|
189
203
|
width: `${iconButtonSize}px`,
|
190
204
|
height: `${iconButtonSize}px`,
|
191
205
|
borderRadius: `${iconButtonBorderRadius}px`,
|
192
|
-
display: 'flex',
|
193
|
-
flexDirection: 'column',
|
194
206
|
}}
|
195
207
|
>
|
196
208
|
<Icon
|
@@ -208,7 +208,7 @@ interface MenuOptionProps {
|
|
208
208
|
* @optional
|
209
209
|
*/
|
210
210
|
optionCardVariant?: 'primary';
|
211
|
-
targetRef?: string | React.RefObject<HTMLElement
|
211
|
+
targetRef?: string | React.RefObject<HTMLElement> | null;
|
212
212
|
treeRowRef?: React.RefObject<any | null>;
|
213
213
|
}
|
214
214
|
|
@@ -41,6 +41,20 @@
|
|
41
41
|
}
|
42
42
|
|
43
43
|
tbody {
|
44
|
+
tr:hover,
|
45
|
+
tr.hover {
|
46
|
+
background-color: var(--hover-color);
|
47
|
+
|
48
|
+
.icon-container {
|
49
|
+
opacity: 1;
|
50
|
+
transform: translateX(0);
|
51
|
+
}
|
52
|
+
|
53
|
+
.ff-table-drag,
|
54
|
+
.ff-table-drag-icon {
|
55
|
+
opacity: 1;
|
56
|
+
}
|
57
|
+
}
|
44
58
|
tr {
|
45
59
|
.action-column {
|
46
60
|
opacity: 0;
|
@@ -75,20 +89,6 @@
|
|
75
89
|
}
|
76
90
|
}
|
77
91
|
|
78
|
-
&:hover {
|
79
|
-
background-color: var(--hover-color);
|
80
|
-
|
81
|
-
.icon-container {
|
82
|
-
opacity: 1;
|
83
|
-
transform: translateX(0);
|
84
|
-
}
|
85
|
-
|
86
|
-
.ff-table-drag,
|
87
|
-
.ff-table-drag-icon {
|
88
|
-
opacity: 1;
|
89
|
-
}
|
90
|
-
}
|
91
|
-
|
92
92
|
td {
|
93
93
|
position: relative;
|
94
94
|
color: var(--table-column-text-color);
|
@@ -148,4 +148,4 @@
|
|
148
148
|
tbody tr.disabled-row {
|
149
149
|
opacity: 0.5;
|
150
150
|
cursor: not-allowed;
|
151
|
-
}
|
151
|
+
}
|
@@ -118,46 +118,45 @@ const Table = ({
|
|
118
118
|
onDragEnd,
|
119
119
|
loadMore = () => {},
|
120
120
|
}: TableProps) => {
|
121
|
-
|
122
121
|
const observerRef = useRef<IntersectionObserver | null>(null);
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
122
|
+
|
123
|
+
useEffect(() => {
|
124
|
+
const scrollContainer = document.getElementById(
|
125
|
+
'ff-table-scroll-container'
|
126
|
+
);
|
127
|
+
const firstNode = document.getElementById('ff-table-first-node');
|
128
|
+
const lastNode = document.getElementById('ff-table-last-node');
|
129
|
+
|
130
|
+
// Exit early if data is empty or elements are missing
|
131
|
+
if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
|
132
|
+
return;
|
133
|
+
}
|
134
|
+
|
135
|
+
observerRef.current = new IntersectionObserver(
|
136
|
+
(entries) => {
|
137
|
+
entries.forEach((entry) => {
|
138
|
+
if (entry.isIntersecting) {
|
139
|
+
const direction =
|
140
|
+
entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
|
141
|
+
loadMore(direction);
|
142
|
+
}
|
143
|
+
});
|
144
|
+
},
|
145
|
+
{
|
146
|
+
root: scrollContainer,
|
147
|
+
rootMargin: '8px',
|
148
|
+
threshold: 0.1,
|
134
149
|
}
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
},
|
146
|
-
{
|
147
|
-
root: scrollContainer,
|
148
|
-
rootMargin: '8px',
|
149
|
-
threshold: 0.1,
|
150
|
-
}
|
151
|
-
);
|
152
|
-
|
153
|
-
observerRef.current.observe(firstNode);
|
154
|
-
observerRef.current.observe(lastNode);
|
155
|
-
|
156
|
-
return () => {
|
157
|
-
// Cleanup observer
|
158
|
-
observerRef.current?.disconnect();
|
159
|
-
};
|
160
|
-
}, [data, loadMore]);
|
150
|
+
);
|
151
|
+
|
152
|
+
observerRef.current.observe(firstNode);
|
153
|
+
observerRef.current.observe(lastNode);
|
154
|
+
|
155
|
+
return () => {
|
156
|
+
// Cleanup observer
|
157
|
+
observerRef.current?.disconnect();
|
158
|
+
};
|
159
|
+
}, [data, loadMore]);
|
161
160
|
|
162
161
|
const handleOnclick = (column: ColumnsProps, row: DataProps) => {
|
163
162
|
let { onClick, accessor } = column;
|
@@ -260,7 +259,7 @@ const Table = ({
|
|
260
259
|
</tr>
|
261
260
|
</thead>
|
262
261
|
<tbody className="ff-fixed-header-table">
|
263
|
-
|
262
|
+
<tr id="ff-table-first-node" />
|
264
263
|
{data?.length > 0 &&
|
265
264
|
data?.map((row: any) => (
|
266
265
|
<SortableRow
|
@@ -275,8 +274,7 @@ const Table = ({
|
|
275
274
|
draggable={draggable}
|
276
275
|
/>
|
277
276
|
))}
|
278
|
-
|
279
|
-
|
277
|
+
<tr id="ff-table-last-node" />
|
280
278
|
</tbody>
|
281
279
|
</table>
|
282
280
|
{data?.length <= 0 && (
|