pixel-react 1.10.6 → 1.10.7
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 +129 -67
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +129 -67
- 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/TableTree/Components/TableBody.tsx +0 -1
- 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('ff-menu-parent-hover', isClicked);
|
154
|
+
}
|
155
|
+
|
156
|
+
return () => {
|
157
|
+
if (targetRef) {
|
158
|
+
const parentDom = getAnchorElement(targetRef);
|
159
|
+
parentDom?.classList.remove('ff-menu-parent-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
|
|
@@ -1,13 +1,14 @@
|
|
1
1
|
import { useState } from 'react';
|
2
|
-
import { getTreeDetails,
|
2
|
+
import { getTreeDetails, TreeDetailsResult } from './getTreeDetails';
|
3
3
|
import React from 'react';
|
4
|
+
import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
|
4
5
|
|
5
6
|
export default {
|
6
7
|
title: 'Utils/getTreeDetails',
|
7
8
|
component: getTreeDetails,
|
8
9
|
};
|
9
10
|
|
10
|
-
const initialData:
|
11
|
+
const initialData: TreeNodeProps[] = [
|
11
12
|
{
|
12
13
|
createdBy: 'USR4705',
|
13
14
|
modifiedBy: '--',
|
@@ -65,15 +66,31 @@ const initialData: TreeNode[] = [
|
|
65
66
|
];
|
66
67
|
|
67
68
|
export const InteractivePlayground = () => {
|
68
|
-
const [data, setData] = useState<
|
69
|
-
const [newData, setNewData] = useState<
|
70
|
-
const [action, setAction] = useState<
|
69
|
+
const [data, setData] = useState<TreeNodeProps[]>(initialData);
|
70
|
+
const [newData, setNewData] = useState<TreeNodeProps[]>([]);
|
71
|
+
const [action, setAction] = useState<
|
72
|
+
| 'above'
|
73
|
+
| 'below'
|
74
|
+
| 'expand'
|
75
|
+
| 'collapse'
|
76
|
+
| 'start'
|
77
|
+
| 'addAbove'
|
78
|
+
| 'addBelow'
|
79
|
+
>('below');
|
71
80
|
const [index, setIndex] = useState<number | undefined>(undefined);
|
81
|
+
const [sourceId, setSourceId] = useState<string | undefined>(undefined); // State for sourceId
|
72
82
|
const [result, setResult] = useState<TreeDetailsResult | null>(null);
|
73
83
|
|
74
84
|
const handleGetTreeDetails = () => {
|
75
85
|
try {
|
76
|
-
|
86
|
+
// If sourceId exists, we pass it, otherwise we pass the index
|
87
|
+
const treeDetails = getTreeDetails(
|
88
|
+
action,
|
89
|
+
data,
|
90
|
+
newData,
|
91
|
+
index,
|
92
|
+
sourceId
|
93
|
+
);
|
77
94
|
setData(treeDetails.treeDataList);
|
78
95
|
setResult(treeDetails);
|
79
96
|
} catch (error) {
|
@@ -91,7 +108,16 @@ export const InteractivePlayground = () => {
|
|
91
108
|
id="action"
|
92
109
|
value={action}
|
93
110
|
onChange={(e) =>
|
94
|
-
setAction(
|
111
|
+
setAction(
|
112
|
+
e.target.value as
|
113
|
+
| 'above'
|
114
|
+
| 'below'
|
115
|
+
| 'expand'
|
116
|
+
| 'collapse'
|
117
|
+
| 'start'
|
118
|
+
| 'addAbove'
|
119
|
+
| 'addBelow'
|
120
|
+
)
|
95
121
|
}
|
96
122
|
>
|
97
123
|
<option value="above">Above</option>
|
@@ -99,10 +125,32 @@ export const InteractivePlayground = () => {
|
|
99
125
|
<option value="expand">Expand</option>
|
100
126
|
<option value="collapse">Collapse</option>
|
101
127
|
<option value="start">Start</option>
|
128
|
+
<option value="addAbove">Add Above</option>
|
129
|
+
<option value="addBelow">Add Below</option>
|
102
130
|
</select>
|
103
131
|
</div>
|
104
132
|
|
105
|
-
{
|
133
|
+
{/* Input for sourceId, if action requires it */}
|
134
|
+
{(action === 'expand' ||
|
135
|
+
action === 'collapse' ||
|
136
|
+
action === 'addAbove' ||
|
137
|
+
action === 'addBelow') && (
|
138
|
+
<div>
|
139
|
+
<label htmlFor="sourceId">
|
140
|
+
Source ID (for expand/collapse/addAbove/addBelow):
|
141
|
+
</label>
|
142
|
+
<input
|
143
|
+
type="text"
|
144
|
+
id="sourceId"
|
145
|
+
value={sourceId || ''}
|
146
|
+
onChange={(e) => setSourceId(e.target.value)}
|
147
|
+
placeholder="Enter Source ID"
|
148
|
+
/>
|
149
|
+
</div>
|
150
|
+
)}
|
151
|
+
|
152
|
+
{/* Input for index, for actions requiring index */}
|
153
|
+
{(action === 'expand' || action === 'collapse') && !sourceId && (
|
106
154
|
<div>
|
107
155
|
<label htmlFor="index">Index (for expand/collapse):</label>
|
108
156
|
<input
|
@@ -110,7 +158,9 @@ export const InteractivePlayground = () => {
|
|
110
158
|
id="index"
|
111
159
|
value={index !== undefined ? index : ''}
|
112
160
|
onChange={(e) =>
|
113
|
-
setIndex(
|
161
|
+
setIndex(
|
162
|
+
e.target.value ? parseInt(e.target.value, 10) : undefined
|
163
|
+
)
|
114
164
|
}
|
115
165
|
disabled={action !== 'expand' && action !== 'collapse'}
|
116
166
|
/>
|
@@ -11,14 +11,37 @@ export interface TreeDetailsResult {
|
|
11
11
|
}
|
12
12
|
|
13
13
|
export const getTreeDetails = (
|
14
|
-
action:
|
14
|
+
action:
|
15
|
+
| 'above'
|
16
|
+
| 'below'
|
17
|
+
| 'expand'
|
18
|
+
| 'collapse'
|
19
|
+
| 'start'
|
20
|
+
| 'addAbove'
|
21
|
+
| 'addBelow',
|
15
22
|
oldData: TreeNode[],
|
16
23
|
newData: TreeNode[],
|
17
|
-
index?: number
|
24
|
+
index?: number,
|
25
|
+
sourceId?: string
|
18
26
|
): TreeDetailsResult => {
|
19
27
|
let treeDataList: TreeNode[];
|
20
28
|
let root: TreeNode | undefined = undefined;
|
21
29
|
|
30
|
+
const findIndexByKey = (data: TreeNode[], key: string): number => {
|
31
|
+
return data.findIndex((node) => node.key === key);
|
32
|
+
};
|
33
|
+
|
34
|
+
const getIndex = (): number | undefined => {
|
35
|
+
if (sourceId) {
|
36
|
+
const indexByKey = findIndexByKey(oldData, sourceId);
|
37
|
+
if (indexByKey === -1) {
|
38
|
+
throw new Error(`Key "${sourceId}" not found in oldData.`);
|
39
|
+
}
|
40
|
+
return indexByKey;
|
41
|
+
}
|
42
|
+
return index; // Use index if sourceId is not provided
|
43
|
+
};
|
44
|
+
|
22
45
|
switch (action) {
|
23
46
|
case 'above':
|
24
47
|
treeDataList = [...newData, ...oldData].slice(0, 40);
|
@@ -28,13 +51,39 @@ export const getTreeDetails = (
|
|
28
51
|
break;
|
29
52
|
case 'expand':
|
30
53
|
case 'collapse':
|
31
|
-
|
32
|
-
|
33
|
-
} else {
|
54
|
+
const actionIndex = getIndex();
|
55
|
+
if (actionIndex === undefined) {
|
34
56
|
throw new Error(
|
35
|
-
"
|
57
|
+
"Both sourceId and index are required for 'expand' or 'collapse' actions."
|
36
58
|
);
|
37
59
|
}
|
60
|
+
treeDataList = [...oldData.slice(0, actionIndex), ...newData];
|
61
|
+
break;
|
62
|
+
case 'addAbove':
|
63
|
+
const addAboveIndex = getIndex();
|
64
|
+
if (addAboveIndex === undefined) {
|
65
|
+
throw new Error(
|
66
|
+
"Both sourceId and index are required for 'addAbove' action."
|
67
|
+
);
|
68
|
+
}
|
69
|
+
treeDataList = [
|
70
|
+
...oldData.slice(0, addAboveIndex),
|
71
|
+
...newData,
|
72
|
+
...oldData.slice(addAboveIndex),
|
73
|
+
];
|
74
|
+
break;
|
75
|
+
case 'addBelow':
|
76
|
+
const addBelowIndex = getIndex();
|
77
|
+
if (addBelowIndex === undefined) {
|
78
|
+
throw new Error(
|
79
|
+
"Both sourceId and index are required for 'addBelow' action."
|
80
|
+
);
|
81
|
+
}
|
82
|
+
treeDataList = [
|
83
|
+
...oldData.slice(0, addBelowIndex + 1),
|
84
|
+
...newData,
|
85
|
+
...oldData.slice(addBelowIndex + 1),
|
86
|
+
];
|
38
87
|
break;
|
39
88
|
case 'start':
|
40
89
|
if (!checkEmpty(newData)) {
|
@@ -53,7 +102,10 @@ export const getTreeDetails = (
|
|
53
102
|
}
|
54
103
|
|
55
104
|
const firstNode = treeDataList[0] || root!;
|
56
|
-
const lastNode = treeDataList[treeDataList.length - 1]
|
105
|
+
const lastNode = treeDataList[treeDataList.length - 1] || {
|
106
|
+
lastResource: true,
|
107
|
+
key: '',
|
108
|
+
};
|
57
109
|
|
58
110
|
return {
|
59
111
|
treeDataList,
|