sag_components 1.0.976 → 1.0.978
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button.test.js +10 -10
- package/dist/LinkButton.test.js +10 -10
- package/dist/SingleBar.test.js +2 -2
- package/dist/index.js +1 -1
- package/dist/stories/CampaignTool/PopupContent.stories.js +284 -0
- package/dist/stories/components/BannerEventBoxTest.js +42 -0
- package/dist/stories/components/BannerEventBoxTest.style.js +11 -0
- package/dist/stories/components/BarChartsByWeeks.js +3 -0
- package/dist/stories/components/CommonFunctions.js +1 -2
- package/dist/stories/components/FilterButton.js +53 -0
- package/dist/stories/components/FilterButton.style.js +12 -0
- package/dist/stories/components/FormattedValue.js +3 -2
- package/dist/stories/components/NewInput.js +33 -0
- package/dist/stories/components/NewInput.style.js +13 -0
- package/dist/stories/components/QuickFilterDropdownMultiSelection.js +1 -1
- package/dist/stories/components/QuickFilterDropdownSingle.js +1 -1
- package/dist/stories/components/icons/TheGiantCompanyIcon_old.js +1831 -0
- package/package.json +1 -1
- package/dist/stories/components/AttachedFile/AttachedFile.js +0 -62
- package/dist/stories/components/AttachedFile/AttachedFile.stories.js +0 -36
- package/dist/stories/components/AttachedFile/AttachedFile.style.js +0 -48
- package/dist/stories/components/BannerEventBox/BannerEventBox.js +0 -97
- package/dist/stories/components/BannerEventBox/BannerEventBox.stories.js +0 -58
- package/dist/stories/components/BannerEventBox/BannerEventBox.style.js +0 -78
- package/dist/stories/components/BannerEventBoxList/BannerEventBoxList.js +0 -153
- package/dist/stories/components/BannerEventBoxList/BannerEventBoxList.stories.js +0 -59
- package/dist/stories/components/BannerEventBoxList/BannerEventBoxList.style.js +0 -189
- package/dist/stories/components/BannersDropdown/BannersDropdown.js +0 -115
- package/dist/stories/components/BannersDropdown/BannersDropdown.stories.js +0 -64
- package/dist/stories/components/BannersDropdown/BannersDropdown.style.js +0 -99
- package/dist/stories/components/BarChart/BarChart.js +0 -191
- package/dist/stories/components/BarChart/BarChart.stories.js +0 -153
- package/dist/stories/components/BarChart/BarChart.style.js +0 -60
- package/dist/stories/components/BarChartTwoRows/BarChartTwoRows.js +0 -213
- package/dist/stories/components/BarChartTwoRows/BarChartTwoRows.stories.js +0 -259
- package/dist/stories/components/BarChartTwoRows/BarChartTwoRows.style.js +0 -79
- package/dist/stories/components/BarChartsByWeeks/BarChartsByWeeks.js +0 -299
- package/dist/stories/components/BarChartsByWeeks/BarChartsByWeeks.stories.js +0 -442
- package/dist/stories/components/BarChartsByWeeks/BarChartsByWeeks.style.js +0 -96
- package/dist/stories/components/Benchmark/Benchmark.js +0 -130
- package/dist/stories/components/Benchmark/Benchmark.stories.js +0 -148
- package/dist/stories/components/Benchmark/Benchmark.style.js +0 -61
- package/dist/stories/components/Button/Button.js +0 -217
- package/dist/stories/components/Button/Button.stories.js +0 -269
- package/dist/stories/components/Button/Button.style.js +0 -90
- package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.js +0 -48
- package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.stories.js +0 -65
- package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.style.js +0 -48
- package/dist/stories/components/Card/Card.js +0 -72
- package/dist/stories/components/Card/Card.stories.js +0 -92
- package/dist/stories/components/Card/Card.style.js +0 -65
- package/dist/stories/components/CheckBox/CheckBox.js +0 -76
- package/dist/stories/components/CheckBox/CheckBox.stories.js +0 -107
- package/dist/stories/components/CheckBox/CheckBox.style.js +0 -36
- package/dist/stories/components/CheckBoxButton/CheckBoxButton.js +0 -69
- package/dist/stories/components/CheckBoxButton/CheckBoxButton.stories.js +0 -150
- package/dist/stories/components/CheckBoxButton/CheckBoxButton.style.js +0 -39
- package/dist/stories/components/CodeEditor/CodeEditor.js +0 -43
- package/dist/stories/components/CodeEditor/CodeEditor.style.js +0 -13
- package/dist/stories/components/CollapseData/CollapseData.js +0 -66
- package/dist/stories/components/CollapseData/CollapseData.stories.js +0 -125
- package/dist/stories/components/CollapseData/CollapseData.style.js +0 -127
- package/dist/stories/components/CollapseHeader/CollapseHeader.js +0 -249
- package/dist/stories/components/CollapseHeader/CollapseHeader.stories.js +0 -116
- package/dist/stories/components/CollapseHeader/CollapseHeader.style.js +0 -200
- package/dist/stories/components/CollapseMenuItem/CollapseMenuItem.js +0 -61
- package/dist/stories/components/CollapseMenuItem/CollapseMenuItem.stories.js +0 -161
- package/dist/stories/components/CollapseMenuItem/CollapseMenuItem.style.js +0 -61
- package/dist/stories/components/Datepicker/Datepicker.js +0 -148
- package/dist/stories/components/Datepicker/Datepicker.stories.js +0 -86
- package/dist/stories/components/Datepicker/Datepicker.style.js +0 -19
- package/dist/stories/components/DownloadProgress/DownloadProgress.js +0 -97
- package/dist/stories/components/DownloadProgress/DownloadProgress.stories.js +0 -111
- package/dist/stories/components/DownloadProgress/DownloadProgress.style.js +0 -51
- package/dist/stories/components/Dropdown/Dropdown.js +0 -231
- package/dist/stories/components/Dropdown/Dropdown.stories.js +0 -323
- package/dist/stories/components/Dropdown/Dropdown.style.js +0 -17
- package/dist/stories/components/DropdownMulti/DropdownMulti.js +0 -290
- package/dist/stories/components/DropdownMulti/DropdownMulti.stories.js +0 -220
- package/dist/stories/components/DropdownMulti/DropdownMulti.style.js +0 -11
- package/dist/stories/components/DropdownMultiNew/DropdownMultiNew.js +0 -292
- package/dist/stories/components/DropdownMultiNew/DropdownMultiNew.style.js +0 -216
- package/dist/stories/components/DropdownNew/DropdownNew.js +0 -98
- package/dist/stories/components/DropdownNew/DropdownNew.stories.js +0 -416
- package/dist/stories/components/DropdownNew/DropdownNew.style.js +0 -21
- package/dist/stories/components/DropdownSingleNew/DropdownSingleNew.js +0 -254
- package/dist/stories/components/DropdownSingleNew/DropdownSingleNew.style.js +0 -187
- package/dist/stories/components/EventDetailsCard/EventDetailsCard.js +0 -144
- package/dist/stories/components/EventDetailsCard/EventDetailsCard.stories.js +0 -57
- package/dist/stories/components/EventDetailsCard/EventDetailsCard.style.js +0 -94
- package/dist/stories/components/EventList/EventList.js +0 -61
- package/dist/stories/components/EventList/EventList.stories.js +0 -84
- package/dist/stories/components/EventList/EventList.style.js +0 -38
- package/dist/stories/components/EventListItem/EventListItem.js +0 -50
- package/dist/stories/components/EventListItem/EventListItem.stories.js +0 -65
- package/dist/stories/components/EventListItem/EventListItem.style.js +0 -47
- package/dist/stories/components/FilterContainer/FilterContainer.js +0 -29
- package/dist/stories/components/FilterContainer/FilterContainer.stories.js +0 -23
- package/dist/stories/components/FilterContainer/FilterContainer.style.js +0 -30
- package/dist/stories/components/FilterPanel/FilterPanel.js +0 -571
- package/dist/stories/components/FilterPanel/FilterPanel.stories.js +0 -967
- package/dist/stories/components/FilterPanel/FilterPanel.style.js +0 -89
- package/dist/stories/components/FormInput/FormInput.js +0 -41
- package/dist/stories/components/FormSelect/FormSelect.js +0 -42
- package/dist/stories/components/FormattedValue/FormattedValue.js +0 -68
- package/dist/stories/components/FormattedValue/FormattedValue.stories.js +0 -189
- package/dist/stories/components/FormattedValue/FormattedValue.style.js +0 -91
- package/dist/stories/components/IconButton/IconButton.js +0 -147
- package/dist/stories/components/IconButton/IconButton.stories.js +0 -131
- package/dist/stories/components/IconButton/IconButton.style.js +0 -64
- package/dist/stories/components/Input/Input.js +0 -183
- package/dist/stories/components/Input/Input.stories.js +0 -434
- package/dist/stories/components/Input/Input.style.js +0 -130
- package/dist/stories/components/InputOld/InputOld.js +0 -90
- package/dist/stories/components/InputOld/InputOld.stories.js +0 -100
- package/dist/stories/components/InputOld/InputOld.style.js +0 -69
- package/dist/stories/components/KpiFilter/KpiFilter.js +0 -330
- package/dist/stories/components/KpiFilter/KpiFilter.stories.js +0 -380
- package/dist/stories/components/KpiFilter/KpiFilter.style.js +0 -132
- package/dist/stories/components/LinkButton/LinkButton.js +0 -207
- package/dist/stories/components/LinkButton/LinkButton.stories.js +0 -180
- package/dist/stories/components/LinkButton/LinkButton.style.js +0 -53
- package/dist/stories/components/LinnerDataBox/LinnerDataBox.js +0 -46
- package/dist/stories/components/LinnerDataBox/LinnerDataBox.stories.js +0 -78
- package/dist/stories/components/LinnerDataBox/LinnerDataBox.style.js +0 -68
- package/dist/stories/components/ListBox/ListBox.js +0 -82
- package/dist/stories/components/ListBox/ListBox.stories.js +0 -132
- package/dist/stories/components/ListBox/ListBox.style.js +0 -48
- package/dist/stories/components/MarketShareDescription/MarketShareDescription.js +0 -109
- package/dist/stories/components/MarketShareDescription/MarketShareDescription.stories.js +0 -198
- package/dist/stories/components/MarketShareDescription/MarketShareDescription.style.js +0 -215
- package/dist/stories/components/Modal/Modal.js +0 -21
- package/dist/stories/components/Modal/Modal.style.js +0 -65
- package/dist/stories/components/Modal/ModalTotalBenchmark.js +0 -224
- package/dist/stories/components/Modal/ModalTotalCost.js +0 -139
- package/dist/stories/components/MonthPicker/MonthPicker.js +0 -166
- package/dist/stories/components/MonthPicker/MonthPicker.stories.js +0 -140
- package/dist/stories/components/MonthPicker/MonthPicker.style.js +0 -103
- package/dist/stories/components/MonthPicker/MonthPopupPicker.js +0 -200
- package/dist/stories/components/MultipleCard/MultipleCard.js +0 -26
- package/dist/stories/components/MultipleCard/MultipleCard.stories.js +0 -33
- package/dist/stories/components/MultipleCard/MultipleCard.style.js +0 -13
- package/dist/stories/components/NoDataFoundMessage/NoDataFoundMessage.js +0 -30
- package/dist/stories/components/NoDataFoundMessage/NoDataFoundMessage.stories.js +0 -66
- package/dist/stories/components/NoDataFoundMessage/NoDataFoundMessage.style.js +0 -39
- package/dist/stories/components/OneColumnContainer/OneColumnContainer.js +0 -121
- package/dist/stories/components/OneColumnContainer/OneColumnContainer.stories.js +0 -119
- package/dist/stories/components/OneColumnContainer/OneColumnContainer.style.js +0 -107
- package/dist/stories/components/PageFilterBar/PageFilterBar.js +0 -23
- package/dist/stories/components/PageFilterBar/PageFilterBar.stories.js +0 -28
- package/dist/stories/components/PageFilterBar/PageFilterBar.style.js +0 -22
- package/dist/stories/components/PerformanceAnalytics/PerformanceAnalytics.js +0 -447
- package/dist/stories/components/PerformanceAnalytics/PerformanceAnalytics.stories.js +0 -258
- package/dist/stories/components/PerformanceAnalytics/PerformanceAnalytics.style.js +0 -144
- package/dist/stories/components/PerformanceAnalyticsLegend/PerformanceAnalyticsLegend.js +0 -59
- package/dist/stories/components/PerformanceAnalyticsLegend/PerformanceAnalyticsLegend.stories.js +0 -86
- package/dist/stories/components/PerformanceAnalyticsLegend/PerformanceAnalyticsLegend.style.js +0 -63
- package/dist/stories/components/PerformanceAnalyticsOneColumn/PerformanceAnalyticsOneColumn.js +0 -327
- package/dist/stories/components/PerformanceAnalyticsOneColumn/PerformanceAnalyticsOneColumn.stories.js +0 -231
- package/dist/stories/components/PerformanceAnalyticsOneColumn/PerformanceAnalyticsOneColumn.style.js +0 -116
- package/dist/stories/components/PerformanceAnalyticsTotals/PerformanceAnalyticsTotals.js +0 -70
- package/dist/stories/components/PerformanceAnalyticsTotals/PerformanceAnalyticsTotals.stories.js +0 -100
- package/dist/stories/components/PerformanceAnalyticsTotals/PerformanceAnalyticsTotals.style.js +0 -89
- package/dist/stories/components/Popup/Popup.js +0 -172
- package/dist/stories/components/Popup/Popup.stories.js +0 -704
- package/dist/stories/components/Popup/Popup.style.js +0 -122
- package/dist/stories/components/PopupCharts/PopupCharts.js +0 -244
- package/dist/stories/components/PopupCharts/PopupCharts.stories.js +0 -1203
- package/dist/stories/components/PopupCharts/PopupCharts.style.js +0 -108
- package/dist/stories/components/PopupContent/PopupContent.js +0 -111
- package/dist/stories/components/PopupContent/PopupContent.style.js +0 -74
- package/dist/stories/components/PopupContent/PopupFieldsRules.js +0 -168
- package/dist/stories/components/ProductsVariety/ProductsVariety.js +0 -94
- package/dist/stories/components/ProductsVariety/ProductsVariety.stories.js +0 -91
- package/dist/stories/components/ProductsVariety/ProductsVariety.style.js +0 -86
- package/dist/stories/components/ProgressBar/ProgressBar.js +0 -52
- package/dist/stories/components/ProgressBar/ProgressBar.stories.js +0 -72
- package/dist/stories/components/ProgressBar/ProgressBar.style.js +0 -24
- package/dist/stories/components/QuarterPicker/QuarterPicker.js +0 -165
- package/dist/stories/components/QuarterPicker/QuarterPicker.stories.js +0 -140
- package/dist/stories/components/QuarterPicker/QuarterPicker.style.js +0 -102
- package/dist/stories/components/QuarterPicker/QuarterPopupPicker.js +0 -182
- package/dist/stories/components/QuickFilter/QuickFilter.js +0 -78
- package/dist/stories/components/QuickFilter/QuickFilter.stories.js +0 -281
- package/dist/stories/components/QuickFilter/QuickFilter.style.js +0 -21
- package/dist/stories/components/QuickFilter/QuickFilterDropdownMultiSelection.js +0 -299
- package/dist/stories/components/QuickFilter/QuickFilterDropdownMultiSelection.style.js +0 -194
- package/dist/stories/components/QuickFilter/QuickFilterDropdownSingle.js +0 -229
- package/dist/stories/components/QuickFilter/QuickFilterDropdownSingle.style.js +0 -139
- package/dist/stories/components/RangePicker/RangeDatePicker.js +0 -229
- package/dist/stories/components/RangePicker/RangePicker.js +0 -176
- package/dist/stories/components/RangePicker/RangePicker.stories.js +0 -138
- package/dist/stories/components/RangePicker/RangePicker.style.js +0 -107
- package/dist/stories/components/ReportTable/ReportTable.js +0 -262
- package/dist/stories/components/ReportTable/ReportTable.stories.js +0 -151
- package/dist/stories/components/ReportTable/ReportTable.style.js +0 -131
- package/dist/stories/components/SagButton/SagButton.js +0 -68
- package/dist/stories/components/SagButton/SagButton.stories.js +0 -118
- package/dist/stories/components/SagButton/SagButton.style.js +0 -47
- package/dist/stories/components/SagIconButton/SagIconButton.js +0 -130
- package/dist/stories/components/SagIconButton/SagIconButton.stories.js +0 -123
- package/dist/stories/components/SagIconButton/SagIconButton.style.js +0 -30
- package/dist/stories/components/SagInput/SagInput.js +0 -53
- package/dist/stories/components/SagInput/SagInput.stories.js +0 -69
- package/dist/stories/components/SagInput/SagInput.style.js +0 -41
- package/dist/stories/components/SalesAndROI/SalesAndROI.js +0 -89
- package/dist/stories/components/SalesAndROI/SalesAndROI.stories.js +0 -168
- package/dist/stories/components/SalesAndROI/SalesAndROI.style.js +0 -111
- package/dist/stories/components/SearchInput/SearchInput.js +0 -39
- package/dist/stories/components/SearchInput/SearchInput.stories.js +0 -44
- package/dist/stories/components/SearchInput/SearchInput.style.js +0 -37
- package/dist/stories/components/SegmentedButton/SegmentedButton.js +0 -122
- package/dist/stories/components/SegmentedButton/SegmentedButton.stories.js +0 -183
- package/dist/stories/components/SegmentedButton/SegmentedButton.style.js +0 -100
- package/dist/stories/components/Select/Select.js +0 -135
- package/dist/stories/components/Select/Select.stories.js +0 -200
- package/dist/stories/components/Select/Select.style.js +0 -102
- package/dist/stories/components/TabMenu/TabMenu.js +0 -214
- package/dist/stories/components/TabMenu/TabMenu.stories.js +0 -76
- package/dist/stories/components/TabMenu/TabMenu.style.js +0 -115
- package/dist/stories/components/Table/Table.js +0 -195
- package/dist/stories/components/Table/Table.stories.js +0 -104
- package/dist/stories/components/Table/Table.style.js +0 -86
- package/dist/stories/components/TextField/TextField.js +0 -209
- package/dist/stories/components/TextField/TextField.stories.js +0 -162
- package/dist/stories/components/TextField/TextField.style.js +0 -18
- package/dist/stories/components/TitleDescription/TitleDescription.js +0 -272
- package/dist/stories/components/TitleDescription/TitleDescription.stories.js +0 -117
- package/dist/stories/components/TitleDescription/TitleDescription.style.js +0 -222
- package/dist/stories/components/Tooltip/Tooltip.js +0 -31
- package/dist/stories/components/Tooltip/Tooltip.style.js +0 -103
- package/dist/stories/components/TopToggleList/TopToggleList.js +0 -46
- package/dist/stories/components/TopToggleList/TopToggleList.stories.js +0 -52
- package/dist/stories/components/TopToggleList/TopToggleList.style.js +0 -51
- package/dist/stories/components/TotalBenchmark/TotalBenchmark.js +0 -97
- package/dist/stories/components/TotalBenchmark/TotalBenchmark.stories.js +0 -138
- package/dist/stories/components/TotalBenchmark/TotalBenchmark.style.js +0 -81
- package/dist/stories/components/TotalBenchmarkAreachart/TotalBenchmarkAreachart.js +0 -342
- package/dist/stories/components/TotalBenchmarkAreachart/TotalBenchmarkAreachart.stories.js +0 -343
- package/dist/stories/components/TotalBenchmarkAreachart/TotalBenchmarkAreachart.style.js +0 -171
- package/dist/stories/components/TotalBenchmarkArrows/TotalBenchmarkArrows.js +0 -149
- package/dist/stories/components/TotalBenchmarkArrows/TotalBenchmarkArrows.stories.js +0 -172
- package/dist/stories/components/TotalBenchmarkArrows/TotalBenchmarkArrows.style.js +0 -108
- package/dist/stories/components/TotalBenchmarkBarchart/TotalBenchmarkBarchart.js +0 -165
- package/dist/stories/components/TotalBenchmarkBarchart/TotalBenchmarkBarchart.stories.js +0 -185
- package/dist/stories/components/TotalBenchmarkBarchart/TotalBenchmarkBarchart.style.js +0 -77
- package/dist/stories/components/TotalDoughnutChart/TotalDoughnutChart.js +0 -186
- package/dist/stories/components/TotalDoughnutChart/TotalDoughnutChart.stories.js +0 -291
- package/dist/stories/components/TotalDoughnutChart/TotalDoughnutChart.style.js +0 -178
- package/dist/stories/components/TotalHorizontalCharts/TotalHorizontalCharts.js +0 -229
- package/dist/stories/components/TotalHorizontalCharts/TotalHorizontalCharts.stories.js +0 -228
- package/dist/stories/components/TotalHorizontalCharts/TotalHorizontalCharts.style.js +0 -58
- package/dist/stories/components/TspanTooltip/TspanTooltip.js +0 -33
- package/dist/stories/components/TspanTooltip/TspanTooltip.style.js +0 -105
- package/dist/stories/components/TwoBarCharts/TwoBarCharts.js +0 -204
- package/dist/stories/components/TwoBarCharts/TwoBarCharts.stories.js +0 -185
- package/dist/stories/components/TwoBarCharts/TwoBarCharts.style.js +0 -60
- package/dist/stories/icons/ArrowDownIcon.js +0 -27
- package/dist/stories/icons/ArrowDropDownIcon.js +0 -27
- package/dist/stories/icons/ArrowSelectIcon.js +0 -27
- package/dist/stories/icons/ArrowUpIcon.js +0 -27
- package/dist/stories/icons/AttachedIcon.js +0 -27
- package/dist/stories/icons/BellIcon.js +0 -27
- package/dist/stories/icons/Calendar.js +0 -20
- package/dist/stories/icons/CalendarIcon.js +0 -27
- package/dist/stories/icons/CalendarInOpen.js +0 -26
- package/dist/stories/icons/CheckBoxButtonCheckedIcon.js +0 -28
- package/dist/stories/icons/CheckBoxCheckedIcon.js +0 -28
- package/dist/stories/icons/CheckBoxNotCheckedIcon.js +0 -28
- package/dist/stories/icons/ChervronLeftIcon.js +0 -20
- package/dist/stories/icons/ChervronRightIcon.js +0 -20
- package/dist/stories/icons/ClockIcon.js +0 -27
- package/dist/stories/icons/CloseIcon.js +0 -27
- package/dist/stories/icons/CloseXIcon.js +0 -27
- package/dist/stories/icons/ComboBoxArrowDownIcon.js +0 -28
- package/dist/stories/icons/ComboBoxArrowUpIcon.js +0 -28
- package/dist/stories/icons/DocumentIcon.js +0 -48
- package/dist/stories/icons/DownloadIcon.js +0 -27
- package/dist/stories/icons/Duplicate.js +0 -28
- package/dist/stories/icons/ErrorIcon.js +0 -27
- package/dist/stories/icons/ExitIcon.js +0 -28
- package/dist/stories/icons/ExportIcon.js +0 -28
- package/dist/stories/icons/EyeIcon.js +0 -28
- package/dist/stories/icons/FileIcon.js +0 -27
- package/dist/stories/icons/FilterIcon.js +0 -36
- package/dist/stories/icons/FlyIcon.js +0 -28
- package/dist/stories/icons/FoodLionChartIcon.js +0 -42
- package/dist/stories/icons/FoodLionIcon.js +0 -3076
- package/dist/stories/icons/FoodLionNewIcon.js +0 -39
- package/dist/stories/icons/GiantFoodChartIcon.js +0 -40
- package/dist/stories/icons/GiantFoodIcon.js +0 -1976
- package/dist/stories/icons/GiantFoodIcon_new.js +0 -42
- package/dist/stories/icons/HannafordChartIcon.js +0 -40
- package/dist/stories/icons/HannafordIcon.js +0 -5017
- package/dist/stories/icons/HannafordIcon_new.js +0 -41
- package/dist/stories/icons/HannafordNewIcon.js +0 -213
- package/dist/stories/icons/InfoIcon.js +0 -28
- package/dist/stories/icons/LampIcon.js +0 -27
- package/dist/stories/icons/LegendLineIcon.js +0 -29
- package/dist/stories/icons/LegendUnionIcon.js +0 -29
- package/dist/stories/icons/MaintenanceIcon.js +0 -28
- package/dist/stories/icons/MenuItemClosedIcon.js +0 -28
- package/dist/stories/icons/MenuItemOpenIcon.js +0 -28
- package/dist/stories/icons/MenuItemRightIcon.js +0 -28
- package/dist/stories/icons/MenuItemUpIcon.js +0 -28
- package/dist/stories/icons/NoDataFoundIcon.js +0 -86
- package/dist/stories/icons/OptionsIcon.js +0 -27
- package/dist/stories/icons/SearchIcon.js +0 -27
- package/dist/stories/icons/ShoppingCartIcon.js +0 -45
- package/dist/stories/icons/ShoutIcon.js +0 -27
- package/dist/stories/icons/SpotlightProductIcon.js +0 -28
- package/dist/stories/icons/StopAndShopChartIcon.js +0 -42
- package/dist/stories/icons/StopAndShopIcon.js +0 -134
- package/dist/stories/icons/StopAndShopNewIcon.js +0 -41
- package/dist/stories/icons/SucceededIcon.js +0 -27
- package/dist/stories/icons/TheGiantCompanyChartIcon.js +0 -40
- package/dist/stories/icons/TheGiantCompanyIcon.js +0 -40
- package/dist/stories/icons/TheGiantCompanyNewIcon.js +0 -39
- package/dist/stories/utils/CommonFunctions.js +0 -83
|
@@ -1,229 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.QuickFilterDropdownSingle = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _CloseXIcon = require("../../icons/CloseXIcon");
|
|
10
|
-
var _MenuItemUpIcon = require("../../icons/MenuItemUpIcon");
|
|
11
|
-
var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
|
|
12
|
-
var _QuickFilterDropdownSingle = require("./QuickFilterDropdownSingle.style");
|
|
13
|
-
const QuickFilterDropdownSingle = _ref => {
|
|
14
|
-
let {
|
|
15
|
-
label,
|
|
16
|
-
hoverColor,
|
|
17
|
-
options,
|
|
18
|
-
selectedValue,
|
|
19
|
-
placeHolder,
|
|
20
|
-
onChange,
|
|
21
|
-
disabled,
|
|
22
|
-
width,
|
|
23
|
-
error,
|
|
24
|
-
errorMessage,
|
|
25
|
-
xIconShow,
|
|
26
|
-
labelColor,
|
|
27
|
-
showLabelOnTop
|
|
28
|
-
} = _ref;
|
|
29
|
-
const [isFocused, setIsFocused] = (0, _react.useState)(false);
|
|
30
|
-
const [showOptions, setShowOptions] = (0, _react.useState)(false);
|
|
31
|
-
const [inputValue, setInputValue] = (0, _react.useState)("");
|
|
32
|
-
const [selectedOptions, setSelectedOptions] = (0, _react.useState)([]);
|
|
33
|
-
const [hoverInputContainer, setHoverInputContainer] = (0, _react.useState)(false);
|
|
34
|
-
const [hoverOptionsContainer, setHoverOptionsContainer] = (0, _react.useState)(false);
|
|
35
|
-
const inputRef = (0, _react.useRef)(null);
|
|
36
|
-
const containerRef = (0, _react.useRef)(null);
|
|
37
|
-
const highlightText = (text, highlight) => {
|
|
38
|
-
if (!highlight) return text;
|
|
39
|
-
const lowerText = text.toLowerCase();
|
|
40
|
-
const lowerHighlight = highlight.toLowerCase();
|
|
41
|
-
const parts = [];
|
|
42
|
-
let lastIndex = 0;
|
|
43
|
-
let index = lowerText.indexOf(lowerHighlight);
|
|
44
|
-
while (index !== -1) {
|
|
45
|
-
if (index !== lastIndex) {
|
|
46
|
-
parts.push(text.slice(lastIndex, index));
|
|
47
|
-
}
|
|
48
|
-
parts.push(/*#__PURE__*/_react.default.createElement("span", {
|
|
49
|
-
key: index,
|
|
50
|
-
className: "highlight"
|
|
51
|
-
}, text.slice(index, index + highlight.length)));
|
|
52
|
-
lastIndex = index + highlight.length;
|
|
53
|
-
index = lowerText.indexOf(lowerHighlight, lastIndex);
|
|
54
|
-
}
|
|
55
|
-
if (lastIndex < text.length) {
|
|
56
|
-
parts.push(text.slice(lastIndex));
|
|
57
|
-
}
|
|
58
|
-
return parts;
|
|
59
|
-
};
|
|
60
|
-
const filteredoptions = options === null || options === void 0 ? void 0 : options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
|
|
61
|
-
(0, _react.useEffect)(() => {
|
|
62
|
-
if (selectedValue) {
|
|
63
|
-
setSelectedOptions(selectedValue);
|
|
64
|
-
}
|
|
65
|
-
}, [selectedValue]);
|
|
66
|
-
(0, _react.useEffect)(() => {
|
|
67
|
-
if (isFocused && inputRef !== null && inputRef !== void 0 && inputRef.current) {
|
|
68
|
-
var _inputRef$current;
|
|
69
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
|
|
70
|
-
}
|
|
71
|
-
}, [isFocused]);
|
|
72
|
-
(0, _react.useEffect)(() => {
|
|
73
|
-
if (!hoverInputContainer && !hoverOptionsContainer) {
|
|
74
|
-
setIsFocused(false);
|
|
75
|
-
setShowOptions(false);
|
|
76
|
-
}
|
|
77
|
-
}, [hoverInputContainer, hoverOptionsContainer]);
|
|
78
|
-
const toggleOption = option => {
|
|
79
|
-
if (disabled) return;
|
|
80
|
-
const newDropdownedOptions = [option];
|
|
81
|
-
setSelectedOptions(newDropdownedOptions);
|
|
82
|
-
setShowOptions(false);
|
|
83
|
-
setInputValue("");
|
|
84
|
-
setIsFocused(false);
|
|
85
|
-
onChange({
|
|
86
|
-
newValue: newDropdownedOptions
|
|
87
|
-
});
|
|
88
|
-
};
|
|
89
|
-
const handleInputChange = e => {
|
|
90
|
-
setIsFocused(true);
|
|
91
|
-
setInputValue(e.target.value);
|
|
92
|
-
if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
|
|
93
|
-
var _inputRef$current2;
|
|
94
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
const isDropdowned = option => {
|
|
98
|
-
if (!selectedOptions || (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) === 0) return false;
|
|
99
|
-
const result = selectedOptions.some(selectedOption => selectedOption.value === option.value);
|
|
100
|
-
return result;
|
|
101
|
-
};
|
|
102
|
-
const handleLabelClick = () => {
|
|
103
|
-
if (disabled) return;
|
|
104
|
-
setIsFocused(true);
|
|
105
|
-
setShowOptions(true);
|
|
106
|
-
if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
|
|
107
|
-
var _inputRef$current3;
|
|
108
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
const handleOpenCloseMenuClick = () => {
|
|
112
|
-
if (disabled) return;
|
|
113
|
-
if (showOptions) {
|
|
114
|
-
setShowOptions(false);
|
|
115
|
-
setIsFocused(false);
|
|
116
|
-
} else {
|
|
117
|
-
setShowOptions(true);
|
|
118
|
-
setIsFocused(true);
|
|
119
|
-
if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
|
|
120
|
-
var _inputRef$current4;
|
|
121
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
const handleClearClick = () => {
|
|
126
|
-
if (disabled) return;
|
|
127
|
-
setSelectedOptions([]);
|
|
128
|
-
setShowOptions(true);
|
|
129
|
-
setIsFocused(true);
|
|
130
|
-
if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
|
|
131
|
-
var _inputRef$current5;
|
|
132
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.focus();
|
|
133
|
-
}
|
|
134
|
-
onChange({
|
|
135
|
-
newValue: []
|
|
136
|
-
});
|
|
137
|
-
};
|
|
138
|
-
return /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.QuickFilterInput, {
|
|
139
|
-
width: width,
|
|
140
|
-
onMouseEnter: () => setHoverInputContainer(true),
|
|
141
|
-
onMouseLeave: () => setHoverInputContainer(false)
|
|
142
|
-
}, /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.InputContainer, {
|
|
143
|
-
className: "InputContainer",
|
|
144
|
-
labelColor: labelColor,
|
|
145
|
-
hoverColor: hoverColor,
|
|
146
|
-
disabled: disabled,
|
|
147
|
-
error: error,
|
|
148
|
-
isFocused: isFocused
|
|
149
|
-
}, /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.InputSubContainer, {
|
|
150
|
-
className: "InputSubContainer",
|
|
151
|
-
ref: containerRef,
|
|
152
|
-
labelColor: labelColor,
|
|
153
|
-
disabled: disabled,
|
|
154
|
-
error: error,
|
|
155
|
-
onClick: handleLabelClick
|
|
156
|
-
}, /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.Label, {
|
|
157
|
-
className: "Label",
|
|
158
|
-
isFocused: isFocused,
|
|
159
|
-
labelColor: labelColor,
|
|
160
|
-
hasValue: (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 || inputValue,
|
|
161
|
-
disabled: disabled,
|
|
162
|
-
error: error,
|
|
163
|
-
errorMessage: errorMessage,
|
|
164
|
-
onClick: handleLabelClick,
|
|
165
|
-
showLabelOnTop: showLabelOnTop
|
|
166
|
-
}, label), /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.StyledInput, {
|
|
167
|
-
className: "StyledInput",
|
|
168
|
-
ref: inputRef,
|
|
169
|
-
value: selectedOptions && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 ? selectedOptions[0].label : inputValue && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? inputValue[0].label : "",
|
|
170
|
-
onChange: handleInputChange,
|
|
171
|
-
onClick: handleLabelClick,
|
|
172
|
-
disabled: disabled,
|
|
173
|
-
placeholder: placeHolder,
|
|
174
|
-
error: error,
|
|
175
|
-
isFocused: isFocused
|
|
176
|
-
})), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.DeleteIcon, {
|
|
177
|
-
className: "IconContainer",
|
|
178
|
-
onClick: handleClearClick
|
|
179
|
-
}, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
|
|
180
|
-
width: "12px",
|
|
181
|
-
height: "12px",
|
|
182
|
-
fill: "#B1B1B1"
|
|
183
|
-
})), /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.IconContainer, {
|
|
184
|
-
className: "IconContainer",
|
|
185
|
-
onClick: handleOpenCloseMenuClick
|
|
186
|
-
}, showOptions ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
|
|
187
|
-
width: "12px",
|
|
188
|
-
height: "12px",
|
|
189
|
-
color: "#B1B1B1"
|
|
190
|
-
}) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
|
|
191
|
-
width: "12px",
|
|
192
|
-
height: "12px",
|
|
193
|
-
color: "#B1B1B1"
|
|
194
|
-
}))), error && (errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.length) > 0 && /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.ErrorMessage, null, errorMessage), /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.OptionsContainer, {
|
|
195
|
-
className: "OptionsContainer",
|
|
196
|
-
onMouseEnter: () => setHoverOptionsContainer(true),
|
|
197
|
-
onMouseLeave: () => setHoverOptionsContainer(false),
|
|
198
|
-
showoptions: showOptions,
|
|
199
|
-
disabled: disabled,
|
|
200
|
-
filteredoptions: filteredoptions
|
|
201
|
-
}, /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.OptionsSubContainer, {
|
|
202
|
-
className: "OptionsSubContainer",
|
|
203
|
-
showoptions: showOptions,
|
|
204
|
-
disabled: disabled,
|
|
205
|
-
filteredoptions: filteredoptions
|
|
206
|
-
}, filteredoptions.map(option => /*#__PURE__*/_react.default.createElement(_QuickFilterDropdownSingle.OptionItem, {
|
|
207
|
-
className: "OptionItem",
|
|
208
|
-
key: option.value,
|
|
209
|
-
onClick: () => toggleOption(option),
|
|
210
|
-
selected: isDropdowned(option)
|
|
211
|
-
}, highlightText(option.label, inputValue))))));
|
|
212
|
-
};
|
|
213
|
-
exports.QuickFilterDropdownSingle = QuickFilterDropdownSingle;
|
|
214
|
-
var _default = exports.default = QuickFilterDropdownSingle;
|
|
215
|
-
QuickFilterDropdownSingle.defaultProps = {
|
|
216
|
-
placeHolder: "Type...",
|
|
217
|
-
label: "Label",
|
|
218
|
-
labelColor: "#066768",
|
|
219
|
-
hoverColor: "#066768",
|
|
220
|
-
width: "auto",
|
|
221
|
-
disabled: false,
|
|
222
|
-
error: false,
|
|
223
|
-
errorMessage: "",
|
|
224
|
-
options: [],
|
|
225
|
-
selectedValue: [],
|
|
226
|
-
xIconShow: false,
|
|
227
|
-
onChange: () => {},
|
|
228
|
-
showLabelOnTop: true
|
|
229
|
-
};
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.StyledInput = exports.QuickFilterInput = exports.OptionsSubContainer = exports.OptionsContainer = exports.OptionItem = exports.Label = exports.InputSubContainer = exports.InputContainer = exports.IconContainer = exports.ErrorMessage = exports.DeleteIcon = void 0;
|
|
8
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
const QuickFilterInput = exports.QuickFilterInput = _styledComponents.default.div`
|
|
10
|
-
position: relative;
|
|
11
|
-
align-content: center;
|
|
12
|
-
justify-content: center;
|
|
13
|
-
align-items: flex-start;
|
|
14
|
-
width: ${props => props.width || "auto"};
|
|
15
|
-
font-family: "Poppins", sans-serif;
|
|
16
|
-
font-weight: 400;
|
|
17
|
-
font-size: 14px;
|
|
18
|
-
border-radius: 8px;
|
|
19
|
-
`;
|
|
20
|
-
const Label = exports.Label = _styledComponents.default.label`
|
|
21
|
-
font-size: 14px;
|
|
22
|
-
font-weight: 500;
|
|
23
|
-
color: ${props => props.disabled ? "#D0D0D0" : "212121"};
|
|
24
|
-
font-family: "Poppins";
|
|
25
|
-
white-space: nowrap;
|
|
26
|
-
`;
|
|
27
|
-
const InputContainer = exports.InputContainer = _styledComponents.default.div`
|
|
28
|
-
display: flex;
|
|
29
|
-
justify-content: space-between;
|
|
30
|
-
align-content: center;
|
|
31
|
-
white-space: pre-wrap;
|
|
32
|
-
align-items: center;
|
|
33
|
-
overflow: hidden;
|
|
34
|
-
padding: 6px 16px;
|
|
35
|
-
margin-bottom: 8px;
|
|
36
|
-
width: 256px;
|
|
37
|
-
height: 24px;
|
|
38
|
-
border: 1px solid
|
|
39
|
-
${props => props.disabled ? "#bdbdbd" : props.error ? "red" : "#B1B1B1"};
|
|
40
|
-
font-family: "Poppins", sans-serif;
|
|
41
|
-
font-weight: 400;
|
|
42
|
-
font-size: 14px;
|
|
43
|
-
border-radius: 9px;
|
|
44
|
-
outline: none;
|
|
45
|
-
color: ${props => props.disabled ? "#888" : "#212121"};
|
|
46
|
-
|
|
47
|
-
&:hover {
|
|
48
|
-
border: 1px solid
|
|
49
|
-
${props => props.disabled ? "#bdbdbd" : props.error ? "red" : props.hoverColor || "#212121"};
|
|
50
|
-
cursor: ${props => props.disabled ? "not-allowed" : "pointer"};
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&:focus {
|
|
54
|
-
border: 1px solid
|
|
55
|
-
${props => props.disabled ? "#bdbdbd" : props.error ? "red" : props.labelColor || "#212121"};
|
|
56
|
-
}
|
|
57
|
-
`;
|
|
58
|
-
const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div`
|
|
59
|
-
display: flex;
|
|
60
|
-
color: ${props => props.disabled ? "#888" : "#212121"};
|
|
61
|
-
gap: 8px;
|
|
62
|
-
`;
|
|
63
|
-
const StyledInput = exports.StyledInput = _styledComponents.default.input`
|
|
64
|
-
width: 100%;
|
|
65
|
-
height: 20px;
|
|
66
|
-
font-family: "Poppins";
|
|
67
|
-
font-weight: 400;
|
|
68
|
-
font-size: 14px;
|
|
69
|
-
outline: none;
|
|
70
|
-
color: ${props => props.disabled ? "#888" : "#212121"};
|
|
71
|
-
border: none;
|
|
72
|
-
background-color: transparent;
|
|
73
|
-
&::placeholder {
|
|
74
|
-
color: ${props => props.disabled ? "#D0D0D0" : "#b1b1b1"};
|
|
75
|
-
}
|
|
76
|
-
`;
|
|
77
|
-
const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div`
|
|
78
|
-
margin: 0;
|
|
79
|
-
top: 100%;
|
|
80
|
-
left: 0;
|
|
81
|
-
z-index: 100;
|
|
82
|
-
width: 100%;
|
|
83
|
-
background-color: #fff;
|
|
84
|
-
display: ${props => {
|
|
85
|
-
var _props$filteredoption;
|
|
86
|
-
return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? "block" : "none";
|
|
87
|
-
}};
|
|
88
|
-
`;
|
|
89
|
-
const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul`
|
|
90
|
-
list-style: none;
|
|
91
|
-
font-weight: 400;
|
|
92
|
-
margin: 0;
|
|
93
|
-
padding: 8px 12px;
|
|
94
|
-
position: absolute;
|
|
95
|
-
top: 100%;
|
|
96
|
-
left: 0;
|
|
97
|
-
z-index: 101;
|
|
98
|
-
width: calc(100% - 23px);
|
|
99
|
-
font-family: "Poppins";
|
|
100
|
-
border-radius: 4px;
|
|
101
|
-
background-color: white;
|
|
102
|
-
display: ${props => {
|
|
103
|
-
var _props$filteredoption2;
|
|
104
|
-
return props.showoptions && ((_props$filteredoption2 = props.filteredoptions) === null || _props$filteredoption2 === void 0 ? void 0 : _props$filteredoption2.length) > 0 ? "block" : "none";
|
|
105
|
-
}};
|
|
106
|
-
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
|
|
107
|
-
max-height: 400px;
|
|
108
|
-
overflow: auto;
|
|
109
|
-
`;
|
|
110
|
-
const OptionItem = exports.OptionItem = _styledComponents.default.li`
|
|
111
|
-
padding: 10px;
|
|
112
|
-
cursor: pointer;
|
|
113
|
-
color: #212121;
|
|
114
|
-
font-family: "Poppins";
|
|
115
|
-
font-size: 14px;
|
|
116
|
-
font-style: normal;
|
|
117
|
-
font-weight: 400;
|
|
118
|
-
transition: background-color 0.3s;
|
|
119
|
-
background-color: ${props => props.selected ? "#C7E4FF" : "#fff"};
|
|
120
|
-
&:hover {
|
|
121
|
-
background-color: #edf6ff;
|
|
122
|
-
}
|
|
123
|
-
.highlight {
|
|
124
|
-
color: #229e38;
|
|
125
|
-
}
|
|
126
|
-
`;
|
|
127
|
-
const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div`
|
|
128
|
-
font-size: 12px;
|
|
129
|
-
color: red;
|
|
130
|
-
margin-top: 5px;
|
|
131
|
-
`;
|
|
132
|
-
const IconContainer = exports.IconContainer = _styledComponents.default.div`
|
|
133
|
-
padding: 2px;
|
|
134
|
-
cursor: pointer;
|
|
135
|
-
`;
|
|
136
|
-
const DeleteIcon = exports.DeleteIcon = _styledComponents.default.div`
|
|
137
|
-
right: 40px;
|
|
138
|
-
position: absolute;
|
|
139
|
-
`;
|
|
@@ -1,229 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
var _ChervronRightIcon = _interopRequireDefault(require("../../icons/ChervronRightIcon"));
|
|
12
|
-
var _ChervronLeftIcon = _interopRequireDefault(require("../../icons/ChervronLeftIcon"));
|
|
13
|
-
// Styled components for the date picker
|
|
14
|
-
const DatePickerContainer = _styledComponents.default.div`
|
|
15
|
-
position: relative;
|
|
16
|
-
`;
|
|
17
|
-
const DatePickerPopup = _styledComponents.default.div`
|
|
18
|
-
position: absolute;
|
|
19
|
-
width: 320px;
|
|
20
|
-
height: 410px;
|
|
21
|
-
top: 100%;
|
|
22
|
-
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
|
|
23
|
-
left: 0;
|
|
24
|
-
background-color: #fff;
|
|
25
|
-
border: 1px solid #ccc;
|
|
26
|
-
border-radius: 4px;
|
|
27
|
-
padding: 10px;
|
|
28
|
-
z-index: 1000;
|
|
29
|
-
`;
|
|
30
|
-
const DatePickerHeader = _styledComponents.default.div`
|
|
31
|
-
display: flex;
|
|
32
|
-
justify-content: space-between;
|
|
33
|
-
margin-bottom: 10px;
|
|
34
|
-
`;
|
|
35
|
-
const DatePickerFooter = _styledComponents.default.div`
|
|
36
|
-
display: flex;
|
|
37
|
-
justify-content: end;
|
|
38
|
-
margin-inline-end: 10px;
|
|
39
|
-
margin-top: 10px;
|
|
40
|
-
`;
|
|
41
|
-
const ClearButton = _styledComponents.default.button`
|
|
42
|
-
color: #568202;
|
|
43
|
-
text-align: center;
|
|
44
|
-
font-family: Poppins;
|
|
45
|
-
font-size: 12px;
|
|
46
|
-
background-color: transparent;
|
|
47
|
-
font-style: normal;
|
|
48
|
-
border: none;
|
|
49
|
-
font-weight: 400;
|
|
50
|
-
line-height: normal;
|
|
51
|
-
text-transform: uppercase;
|
|
52
|
-
`;
|
|
53
|
-
const NavDiv = _styledComponents.default.div`
|
|
54
|
-
width: 80px;
|
|
55
|
-
height: 30px;
|
|
56
|
-
display: flex;
|
|
57
|
-
padding: 5px;
|
|
58
|
-
justify-content: space-around;
|
|
59
|
-
`;
|
|
60
|
-
const DatePickerSelect = _styledComponents.default.div`
|
|
61
|
-
padding: 4px;
|
|
62
|
-
border-radius: 4px;
|
|
63
|
-
border: none;
|
|
64
|
-
font-family: Poppins;
|
|
65
|
-
font-size: 12px;
|
|
66
|
-
font-style: normal;
|
|
67
|
-
font-weight: 400;
|
|
68
|
-
cursor: pointer;
|
|
69
|
-
`;
|
|
70
|
-
const DatePickerCalendar = _styledComponents.default.div`
|
|
71
|
-
display: grid;
|
|
72
|
-
width: 260px;
|
|
73
|
-
height: 330px;
|
|
74
|
-
row-gap: 12px;
|
|
75
|
-
grid-template-columns: repeat(7, 1fr);
|
|
76
|
-
`;
|
|
77
|
-
const DateCell = _styledComponents.default.div`
|
|
78
|
-
width: 100%;
|
|
79
|
-
aspect-ratio: 1 / 1;
|
|
80
|
-
/* height: 32px; */
|
|
81
|
-
font-family: Poppins;
|
|
82
|
-
border-radius: 4px;
|
|
83
|
-
font-size: 12px;
|
|
84
|
-
font-style: normal;
|
|
85
|
-
font-weight: 400;
|
|
86
|
-
display: flex;
|
|
87
|
-
justify-content: center;
|
|
88
|
-
align-items: center;
|
|
89
|
-
cursor: pointer;
|
|
90
|
-
transition: background-color 0.3s ease;
|
|
91
|
-
|
|
92
|
-
&:hover {
|
|
93
|
-
background: #f4faf5;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
&.selected {
|
|
97
|
-
background-color: #229e38;
|
|
98
|
-
color: #fff;
|
|
99
|
-
}
|
|
100
|
-
&.startselected {
|
|
101
|
-
border: 1px solid #229e38;
|
|
102
|
-
}
|
|
103
|
-
&.inrange {
|
|
104
|
-
border-radius: 0px;
|
|
105
|
-
background-color: #effef2;
|
|
106
|
-
}
|
|
107
|
-
`;
|
|
108
|
-
const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
|
109
|
-
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
|
110
|
-
const DatePicker = _ref => {
|
|
111
|
-
let {
|
|
112
|
-
isOpen,
|
|
113
|
-
onChangeDate,
|
|
114
|
-
value,
|
|
115
|
-
setValue,
|
|
116
|
-
startDateValue,
|
|
117
|
-
endDateValue
|
|
118
|
-
} = _ref;
|
|
119
|
-
const [startDate, setStartDate] = (0, _react.useState)(null);
|
|
120
|
-
const [endDate, setEndDate] = (0, _react.useState)(null);
|
|
121
|
-
const [currentStartDate, setCurrentStartDate] = (0, _react.useState)(new Date());
|
|
122
|
-
const [currentEndDate, setCurrentEndDate] = (0, _react.useState)(null);
|
|
123
|
-
const handleDateSelect = date => {
|
|
124
|
-
if (!startDate) {
|
|
125
|
-
setStartDate(date);
|
|
126
|
-
setEndDate(null);
|
|
127
|
-
} else if (!endDate && date > startDate) {
|
|
128
|
-
setEndDate(date);
|
|
129
|
-
onChangeDate(startDate, date);
|
|
130
|
-
} else {
|
|
131
|
-
setStartDate(date);
|
|
132
|
-
setEndDate(null);
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
const handlePrevMonth = () => {
|
|
136
|
-
const prevDate = currentStartDate || currentEndDate ? new Date(currentStartDate || currentEndDate) : new Date();
|
|
137
|
-
prevDate.setMonth(prevDate.getMonth() - 1);
|
|
138
|
-
setCurrentStartDate(prevDate);
|
|
139
|
-
setCurrentEndDate(null);
|
|
140
|
-
};
|
|
141
|
-
const handleNextMonth = () => {
|
|
142
|
-
const nextDate = currentStartDate || currentEndDate ? new Date(currentStartDate || currentEndDate) : new Date();
|
|
143
|
-
nextDate.setMonth(nextDate.getMonth() + 1);
|
|
144
|
-
setCurrentStartDate(nextDate);
|
|
145
|
-
setCurrentEndDate(null);
|
|
146
|
-
};
|
|
147
|
-
(0, _react.useEffect)(() => {
|
|
148
|
-
if (value === '' || value === undefined) {
|
|
149
|
-
setStartDate(null);
|
|
150
|
-
setEndDate(null);
|
|
151
|
-
} else {
|
|
152
|
-
setStartDate(new Date(startDateValue));
|
|
153
|
-
setEndDate(new Date(endDateValue));
|
|
154
|
-
}
|
|
155
|
-
}, [value, isOpen]);
|
|
156
|
-
const renderDatePicker = () => {
|
|
157
|
-
const currentDate = currentStartDate || currentEndDate || new Date();
|
|
158
|
-
const daysInMonth = new Date(currentDate === null || currentDate === void 0 ? void 0 : currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
|
|
159
|
-
const firstDayOfMonth = new Date(currentDate === null || currentDate === void 0 ? void 0 : currentDate.getFullYear(), currentDate.getMonth(), 1).getDay();
|
|
160
|
-
const startDateOfMonth = new Date(currentDate === null || currentDate === void 0 ? void 0 : currentDate.getFullYear(), currentDate.getMonth(), 1 - firstDayOfMonth);
|
|
161
|
-
const endDateOfMonth = new Date(currentDate === null || currentDate === void 0 ? void 0 : currentDate.getFullYear(), currentDate.getMonth(), daysInMonth + (6 - firstDayOfMonth));
|
|
162
|
-
const clearSelection = () => {
|
|
163
|
-
setStartDate(null);
|
|
164
|
-
setEndDate(null);
|
|
165
|
-
setValue('');
|
|
166
|
-
};
|
|
167
|
-
const dates = [];
|
|
168
|
-
const tempDate = new Date(startDateOfMonth);
|
|
169
|
-
while (tempDate <= endDateOfMonth) {
|
|
170
|
-
dates.push(new Date(tempDate));
|
|
171
|
-
tempDate.setDate(tempDate.getDate() + 1);
|
|
172
|
-
}
|
|
173
|
-
return /*#__PURE__*/_react.default.createElement(DatePickerPopup, {
|
|
174
|
-
className: "DatePickerPopup"
|
|
175
|
-
}, /*#__PURE__*/_react.default.createElement(DatePickerHeader, {
|
|
176
|
-
className: "DatePickerHeader"
|
|
177
|
-
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DatePickerSelect, {
|
|
178
|
-
className: "DatePickerSelect"
|
|
179
|
-
}, `${months[currentDate.getMonth()]} ${currentDate === null || currentDate === void 0 ? void 0 : currentDate.getFullYear()}`)), /*#__PURE__*/_react.default.createElement(NavDiv, {
|
|
180
|
-
className: "NavDiv"
|
|
181
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
182
|
-
onClick: handlePrevMonth
|
|
183
|
-
}, /*#__PURE__*/_react.default.createElement(_ChervronLeftIcon.default, null)), /*#__PURE__*/_react.default.createElement("div", {
|
|
184
|
-
onClick: handleNextMonth
|
|
185
|
-
}, /*#__PURE__*/_react.default.createElement(_ChervronRightIcon.default, null)))), /*#__PURE__*/_react.default.createElement(DatePickerCalendar, {
|
|
186
|
-
className: "DatePickerCalendar"
|
|
187
|
-
}, daysOfWeek.map(day => /*#__PURE__*/_react.default.createElement(DateCell, {
|
|
188
|
-
key: day
|
|
189
|
-
}, day)), dates.map(date => {
|
|
190
|
-
if (startDate && endDate && (date.getTime() === startDate.getTime() || date.getTime() === endDate.getTime())) {
|
|
191
|
-
return /*#__PURE__*/_react.default.createElement(DateCell, {
|
|
192
|
-
key: date.toISOString(),
|
|
193
|
-
className: "selected",
|
|
194
|
-
onClick: () => handleDateSelect(date)
|
|
195
|
-
}, date.getDate());
|
|
196
|
-
}
|
|
197
|
-
if (startDate && endDate && date > startDate && date < endDate) {
|
|
198
|
-
return /*#__PURE__*/_react.default.createElement(DateCell, {
|
|
199
|
-
key: date.toISOString(),
|
|
200
|
-
className: "inrange",
|
|
201
|
-
onClick: () => handleDateSelect(date)
|
|
202
|
-
}, date.getDate());
|
|
203
|
-
}
|
|
204
|
-
if (startDate && date.getTime() === startDate.getTime()) {
|
|
205
|
-
return /*#__PURE__*/_react.default.createElement(DateCell, {
|
|
206
|
-
key: date.toISOString(),
|
|
207
|
-
className: "startselected",
|
|
208
|
-
onClick: () => handleDateSelect(date)
|
|
209
|
-
}, date.getDate());
|
|
210
|
-
}
|
|
211
|
-
if (date.getMonth() === currentDate.getMonth()) {
|
|
212
|
-
return /*#__PURE__*/_react.default.createElement(DateCell, {
|
|
213
|
-
key: date.toISOString(),
|
|
214
|
-
onClick: () => handleDateSelect(date)
|
|
215
|
-
}, date.getDate());
|
|
216
|
-
}
|
|
217
|
-
if (date.getMonth() === currentDate.getMonth() - 1) {
|
|
218
|
-
return /*#__PURE__*/_react.default.createElement(DateCell, null);
|
|
219
|
-
}
|
|
220
|
-
return null;
|
|
221
|
-
})), /*#__PURE__*/_react.default.createElement(DatePickerFooter, null, /*#__PURE__*/_react.default.createElement(ClearButton, {
|
|
222
|
-
onClick: clearSelection
|
|
223
|
-
}, "Clear")));
|
|
224
|
-
};
|
|
225
|
-
return /*#__PURE__*/_react.default.createElement(DatePickerContainer, {
|
|
226
|
-
className: "DatePickerContainer"
|
|
227
|
-
}, isOpen && renderDatePicker());
|
|
228
|
-
};
|
|
229
|
-
var _default = exports.default = DatePicker;
|