pixel-react 1.8.8 → 1.8.9
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/MobileSkin/MobileSkin.d.ts +5 -0
- package/lib/components/MobileSkin/MobileSkinInterface.d.ts +13 -0
- package/lib/components/MobileSkin/index.d.ts +1 -0
- package/lib/components/MobileSkin/types.d.ts +32 -0
- package/lib/index.d.ts +19 -1
- package/lib/index.esm.js +220 -151
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +222 -150
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/Button/Button.scss +0 -1
- package/src/components/MobileSkin/MobileSkin.scss +67 -0
- package/src/components/MobileSkin/MobileSkin.stories.tsx +93 -0
- package/src/components/MobileSkin/MobileSkin.tsx +88 -0
- package/src/components/MobileSkin/MobileSkinInterface.ts +13 -0
- package/src/components/MobileSkin/index.ts +1 -0
- package/src/components/MobileSkin/types.ts +32 -0
- package/src/index.ts +7 -0
package/lib/tsconfig.tsbuildinfo
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"root":["../src/index.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/addbutton.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/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/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/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/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/keyboardactionutil/usekeyboardactions.tsx","../src/utils/keyboardactionutil/types.ts","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.ts","../src/utils/validatefile/validatefile.ts","../src/validations/regex.ts"],"version":"5.6.3"}
|
1
|
+
{"root":["../src/index.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/addbutton.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/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/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/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/keyboardactionutil/usekeyboardactions.tsx","../src/utils/keyboardactionutil/types.ts","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.ts","../src/utils/validatefile/validatefile.ts","../src/validations/regex.ts"],"version":"5.6.3"}
|
package/package.json
CHANGED
@@ -0,0 +1,67 @@
|
|
1
|
+
@use '../../assets/styles/fonts';
|
2
|
+
@use '../../assets/styles/mixins' as *;
|
3
|
+
|
4
|
+
.ff-mobileskin-wrapper {
|
5
|
+
@include center-content;
|
6
|
+
flex-direction: column;
|
7
|
+
|
8
|
+
&.portrait {
|
9
|
+
gap: 30px;
|
10
|
+
}
|
11
|
+
|
12
|
+
&.landscape {
|
13
|
+
gap: 38px;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
.ff-mobileskin-container {
|
18
|
+
@extend .ff-mobileskin-wrapper;
|
19
|
+
}
|
20
|
+
|
21
|
+
.ff-mobile-container {
|
22
|
+
border: 8px solid var(--text-color);
|
23
|
+
@include center-content;
|
24
|
+
position: relative;
|
25
|
+
overflow: hidden;
|
26
|
+
|
27
|
+
&::-webkit-scrollbar {
|
28
|
+
width: 0;
|
29
|
+
height: 0;
|
30
|
+
}
|
31
|
+
|
32
|
+
&::-webkit-scrollbar-thumb {
|
33
|
+
background-color: transparent;
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
.ff-mobile-image-container {
|
38
|
+
@include center-content;
|
39
|
+
overflow: hidden;
|
40
|
+
}
|
41
|
+
|
42
|
+
.ff-notch {
|
43
|
+
background-color: var(--text-color);
|
44
|
+
border-radius: 24px;
|
45
|
+
position: absolute;
|
46
|
+
}
|
47
|
+
|
48
|
+
.ff-nav-bar {
|
49
|
+
height: 32px;
|
50
|
+
padding: 8px;
|
51
|
+
display: flex;
|
52
|
+
justify-content: space-evenly;
|
53
|
+
align-items: center;
|
54
|
+
border: 1px solid var(--brand-color);
|
55
|
+
border-radius: 24px;
|
56
|
+
}
|
57
|
+
|
58
|
+
.ff-nav-bar-icon {
|
59
|
+
height: 16px;
|
60
|
+
padding: 8px;
|
61
|
+
border-right: 1px solid var(--brand-color);
|
62
|
+
@include center-content;
|
63
|
+
|
64
|
+
&.last-icon {
|
65
|
+
border-right: none;
|
66
|
+
}
|
67
|
+
}
|
@@ -0,0 +1,93 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import MobileSkin from './MobileSkin';
|
3
|
+
|
4
|
+
const meta: Meta<typeof MobileSkin> = {
|
5
|
+
title: 'Components/MobileSkin',
|
6
|
+
component: MobileSkin,
|
7
|
+
parameters: {
|
8
|
+
layout: 'padded',
|
9
|
+
},
|
10
|
+
tags: ['autodocs'],
|
11
|
+
};
|
12
|
+
|
13
|
+
const navBarIcons = [
|
14
|
+
{
|
15
|
+
title: 'Forward',
|
16
|
+
name: 'right_arrow_icon',
|
17
|
+
onClick: () => {},
|
18
|
+
height: 16,
|
19
|
+
width: 16,
|
20
|
+
},
|
21
|
+
{
|
22
|
+
title: 'Backward',
|
23
|
+
name: 'left_arrow_icon',
|
24
|
+
onClick: () => {},
|
25
|
+
height: 16,
|
26
|
+
width: 16,
|
27
|
+
},
|
28
|
+
{
|
29
|
+
title: 'Refresh',
|
30
|
+
name: 'refresh_icon',
|
31
|
+
onClick: () => {},
|
32
|
+
height: 16,
|
33
|
+
width: 16,
|
34
|
+
},
|
35
|
+
{
|
36
|
+
title: 'Capture',
|
37
|
+
name: 'minimize_script',
|
38
|
+
onClick: () => {},
|
39
|
+
height: 16,
|
40
|
+
width: 16,
|
41
|
+
},
|
42
|
+
{
|
43
|
+
title: 'Rotate',
|
44
|
+
name: 'replace_icon',
|
45
|
+
onClick: () => {},
|
46
|
+
height: 16,
|
47
|
+
width: 16,
|
48
|
+
},
|
49
|
+
];
|
50
|
+
const randomImage: string =
|
51
|
+
'https://plus.unsplash.com/premium_photo-1664303228186-a61e7dc91597?q=80&w=1384&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
|
52
|
+
|
53
|
+
type Story = StoryObj<typeof MobileSkin>;
|
54
|
+
|
55
|
+
const defaultArgs = {
|
56
|
+
navBarIcons: navBarIcons,
|
57
|
+
mobileWidth: 220,
|
58
|
+
mobileHeight: 448,
|
59
|
+
children: randomImage,
|
60
|
+
};
|
61
|
+
|
62
|
+
export const iosPortraitView: Story = {
|
63
|
+
args: {
|
64
|
+
...defaultArgs,
|
65
|
+
orientation: 'portrait',
|
66
|
+
type: 'ios',
|
67
|
+
},
|
68
|
+
};
|
69
|
+
|
70
|
+
export const iosLandscapeView: Story = {
|
71
|
+
args: {
|
72
|
+
...defaultArgs,
|
73
|
+
orientation: 'landscape',
|
74
|
+
type: 'ios',
|
75
|
+
},
|
76
|
+
};
|
77
|
+
|
78
|
+
export const androidPortraitView: Story = {
|
79
|
+
args: {
|
80
|
+
...defaultArgs,
|
81
|
+
orientation: 'portrait',
|
82
|
+
type: 'android',
|
83
|
+
},
|
84
|
+
};
|
85
|
+
|
86
|
+
export const androidLandscapeView: Story = {
|
87
|
+
args: {
|
88
|
+
...defaultArgs,
|
89
|
+
orientation: 'landscape',
|
90
|
+
type: 'android',
|
91
|
+
},
|
92
|
+
};
|
93
|
+
export default meta;
|
@@ -0,0 +1,88 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import './MobileSkin.scss';
|
3
|
+
import Icon from '../Icon';
|
4
|
+
import Tooltip from '../Tooltip';
|
5
|
+
import { MobileSkinProps } from './MobileSkinInterface';
|
6
|
+
|
7
|
+
const MobileSkin: React.FC<MobileSkinProps> = ({
|
8
|
+
children,
|
9
|
+
orientation = '',
|
10
|
+
type = '',
|
11
|
+
navBarIcons,
|
12
|
+
mobileHeight = 448,
|
13
|
+
mobileWidth = 220,
|
14
|
+
}) => {
|
15
|
+
const notchHeight = (mobileHeight / 448) * 20;
|
16
|
+
const notchWidth = (mobileWidth / 220) * 60;
|
17
|
+
|
18
|
+
const isPortrait = orientation === 'portrait';
|
19
|
+
const isIos = type === 'ios';
|
20
|
+
const containerHeight = isPortrait ? mobileHeight : mobileWidth;
|
21
|
+
const containerWidth = isPortrait ? mobileWidth : mobileHeight;
|
22
|
+
|
23
|
+
return (
|
24
|
+
<div
|
25
|
+
className={`ff-mobileskin-wrapper ${isPortrait ? 'portrait' : 'landscape'}`}
|
26
|
+
>
|
27
|
+
<div
|
28
|
+
className="ff-mobileskin-container"
|
29
|
+
style={{
|
30
|
+
height: containerHeight + 16,
|
31
|
+
width: containerWidth + 16,
|
32
|
+
}}
|
33
|
+
>
|
34
|
+
<div
|
35
|
+
className="ff-mobile-container"
|
36
|
+
style={{
|
37
|
+
width: containerWidth,
|
38
|
+
height: containerHeight,
|
39
|
+
borderRadius: isIos ? '30px' : '10px',
|
40
|
+
}}
|
41
|
+
>
|
42
|
+
<div className="ff-mobile-image-container">
|
43
|
+
{React.isValidElement(children) ? (
|
44
|
+
children
|
45
|
+
) : (
|
46
|
+
<img
|
47
|
+
src={children as string}
|
48
|
+
alt="Mobile content"
|
49
|
+
style={{
|
50
|
+
width: isPortrait ? '100%' : `${mobileWidth * 2.1}px`,
|
51
|
+
height: isPortrait ? '100%' : `${mobileHeight * 0.5}px`,
|
52
|
+
}}
|
53
|
+
/>
|
54
|
+
)}
|
55
|
+
</div>
|
56
|
+
</div>
|
57
|
+
|
58
|
+
{isIos && (
|
59
|
+
<div
|
60
|
+
className="ff-notch"
|
61
|
+
style={{
|
62
|
+
height: isPortrait ? notchHeight : notchWidth,
|
63
|
+
width: isPortrait ? notchWidth : notchHeight,
|
64
|
+
transform: isPortrait
|
65
|
+
? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.46}px)`
|
66
|
+
: `translate(${containerWidth * -0.46}px, ${containerHeight * -0.01}px)`,
|
67
|
+
}}
|
68
|
+
></div>
|
69
|
+
)}
|
70
|
+
</div>
|
71
|
+
<div className="ff-nav-bar">
|
72
|
+
{navBarIcons.map((icon, index) => (
|
73
|
+
<div
|
74
|
+
key={index}
|
75
|
+
className={`ff-nav-bar-icon ${icon?.className || ''} ${
|
76
|
+
index === navBarIcons.length - 1 ? 'last-icon' : ''
|
77
|
+
}`}
|
78
|
+
onClick={icon.onClick}
|
79
|
+
>
|
80
|
+
<Tooltip title={icon?.title} children={<Icon {...icon} />} />
|
81
|
+
</div>
|
82
|
+
))}
|
83
|
+
</div>
|
84
|
+
</div>
|
85
|
+
);
|
86
|
+
};
|
87
|
+
|
88
|
+
export default MobileSkin;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
interface NavBarIcon {
|
2
|
+
name: string;
|
3
|
+
[key: string]: any;
|
4
|
+
}
|
5
|
+
|
6
|
+
export interface MobileSkinProps {
|
7
|
+
children: React.ReactNode | string;
|
8
|
+
orientation?: 'portrait' | 'landscape';
|
9
|
+
type: 'ios' | 'android';
|
10
|
+
navBarIcons: NavBarIcon[];
|
11
|
+
mobileHeight?: number;
|
12
|
+
mobileWidth?: number;
|
13
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './MobileSkin';
|
@@ -0,0 +1,32 @@
|
|
1
|
+
export interface iconDetails {
|
2
|
+
/**
|
3
|
+
* details of each icon
|
4
|
+
*/
|
5
|
+
[key: string]: any;
|
6
|
+
}
|
7
|
+
export interface MobileSkinProps {
|
8
|
+
/**
|
9
|
+
* The content inside the mobile skin component
|
10
|
+
*/
|
11
|
+
children: React.ReactNode | string;
|
12
|
+
/**
|
13
|
+
* Portrait or landScape View of the Mobile
|
14
|
+
*/
|
15
|
+
orientation: string;
|
16
|
+
/**
|
17
|
+
* type either it will be ios or android
|
18
|
+
*/
|
19
|
+
type: string;
|
20
|
+
/**
|
21
|
+
* height of the MobileSkin
|
22
|
+
*/
|
23
|
+
mobileHeight?: number;
|
24
|
+
/**
|
25
|
+
* width of the MobileSkin
|
26
|
+
*/
|
27
|
+
mobileWidth?: number;
|
28
|
+
/**
|
29
|
+
* takes the icons details like icon name , title, onClick event, height , width, etc
|
30
|
+
*/
|
31
|
+
navbarIcons: Array<iconDetails>;
|
32
|
+
}
|
package/src/index.ts
CHANGED
@@ -74,6 +74,7 @@ import ProgressBar from './components/ProgressBar';
|
|
74
74
|
import ChooseFile from './components/ChooseFile/ChooseFile';
|
75
75
|
import ScriptSwitchButton from './components/ScriptSwitchButton';
|
76
76
|
|
77
|
+
import MobileSkin from './components/MobileSkin';
|
77
78
|
// Utils imports
|
78
79
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
79
80
|
import {
|
@@ -97,6 +98,7 @@ import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
|
|
97
98
|
import { capitalize } from './utils/capitalize/capitalize';
|
98
99
|
import Comments from './components/Comment/Comments';
|
99
100
|
import useFileDropzone from './hooks/useFileDropzone';
|
101
|
+
import useClickOutside from './hooks/useClickOutside';
|
100
102
|
import PopUpModal from './components/PopUpModal/PopUpModal';
|
101
103
|
import FormatString from './utils/FormatString/FormatString';
|
102
104
|
import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
|
@@ -116,6 +118,7 @@ import {
|
|
116
118
|
ALPHABET_ONLY_REGEX,
|
117
119
|
NUMBERS_ONLY_REGEX,
|
118
120
|
ALPHANUMERIC_REGEX,
|
121
|
+
ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
|
119
122
|
DATE_REGEX,
|
120
123
|
TIME_REGEX,
|
121
124
|
FILE_EXTENSION_REGEX,
|
@@ -245,6 +248,7 @@ export {
|
|
245
248
|
ProgressBar,
|
246
249
|
ChooseFile,
|
247
250
|
ScriptSwitchButton,
|
251
|
+
MobileSkin,
|
248
252
|
|
249
253
|
// utils exports
|
250
254
|
checkEmpty,
|
@@ -262,9 +266,11 @@ export {
|
|
262
266
|
saveFileFromBlob,
|
263
267
|
capitalize,
|
264
268
|
useFileDropzone,
|
269
|
+
useClickOutside,
|
265
270
|
FormatString,
|
266
271
|
hasDuplicateFile,
|
267
272
|
useKeyboardActions,
|
273
|
+
|
268
274
|
EMAIL_REGEX,
|
269
275
|
URL_REGEX,
|
270
276
|
PHONE_REGEX,
|
@@ -277,6 +283,7 @@ export {
|
|
277
283
|
ALPHABET_ONLY_REGEX,
|
278
284
|
NUMBERS_ONLY_REGEX,
|
279
285
|
ALPHANUMERIC_REGEX,
|
286
|
+
ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
|
280
287
|
DATE_REGEX,
|
281
288
|
TIME_REGEX,
|
282
289
|
FILE_EXTENSION_REGEX,
|