intelicoreact 2.0.20 → 2.0.21
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/es/Atomic/FormElements/ActionAlert/ActionAlert.js.map +1 -1
- package/dist/es/Atomic/FormElements/AdvancedStatus/AdvancedStatus.js.map +1 -1
- package/dist/es/Atomic/FormElements/Calendar/Calendar.js +2 -1
- package/dist/es/Atomic/FormElements/Calendar/Calendar.js.map +1 -1
- package/dist/es/Atomic/FormElements/CheckboxInput/CheckboxInput.js.map +1 -1
- package/dist/es/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js.map +1 -1
- package/dist/es/Atomic/FormElements/Datepicker/Datepicker.js +5 -4
- package/dist/es/Atomic/FormElements/Datepicker/Datepicker.js.map +1 -1
- package/dist/es/Atomic/FormElements/Datepicker/components/DatepickerCalendar.js +2 -1
- package/dist/es/Atomic/FormElements/Datepicker/components/DatepickerCalendar.js.map +1 -1
- package/dist/es/Atomic/FormElements/Dropdown/Dropdown.js +35 -26
- package/dist/es/Atomic/FormElements/Dropdown/Dropdown.js.map +1 -1
- package/dist/es/Atomic/FormElements/Dropdown/_utils.js +14 -9
- package/dist/es/Atomic/FormElements/Dropdown/_utils.js.map +1 -1
- package/dist/es/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js.map +1 -1
- package/dist/es/Atomic/FormElements/FileLoader/FileLoader.js.map +1 -1
- package/dist/es/Atomic/FormElements/FileLoader/partial/LoadZone.js +1 -1
- package/dist/es/Atomic/FormElements/FileLoader/partial/LoadZone.js.map +1 -1
- package/dist/es/Atomic/FormElements/FileLoader/partial/LoadedContent.js +15 -13
- package/dist/es/Atomic/FormElements/FileLoader/partial/LoadedContent.js.map +1 -1
- package/dist/es/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.js +1 -1
- package/dist/es/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.js.map +1 -1
- package/dist/es/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js +23 -19
- package/dist/es/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js.map +1 -1
- package/dist/es/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.js +1 -1
- package/dist/es/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.js.map +1 -1
- package/dist/es/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN.js.map +1 -1
- package/dist/es/Atomic/FormElements/Input/Input.js.map +1 -1
- package/dist/es/Atomic/FormElements/Input/hooks/useInputValueProcessing.js +0 -1
- package/dist/es/Atomic/FormElements/Input/hooks/useInputValueProcessing.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputCalendar/InputCalendar.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputColor/InputColor.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputCurrency/InputCurrency.js +28 -25
- package/dist/es/Atomic/FormElements/InputCurrency/InputCurrency.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputDateRange/InputDateRange.js +2 -1
- package/dist/es/Atomic/FormElements/InputDateRange/InputDateRange.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputDateRange/components/DateInput.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputDateRange/components/Datepicker.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputDateRange/components/OpenedPart.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputDateRange/components/SelectItem.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputLink/InputLink.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputMask3/InputMask3.js +16 -14
- package/dist/es/Atomic/FormElements/InputMask3/InputMask3.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputWithAction/InputWithAction.js.map +1 -1
- package/dist/es/Atomic/FormElements/InputsRow/InputsRow.js +3 -2
- package/dist/es/Atomic/FormElements/InputsRow/InputsRow.js.map +1 -1
- package/dist/es/Atomic/FormElements/Label/Label.js.map +1 -1
- package/dist/es/Atomic/FormElements/MobileCalendar/MobileCalendar.js.map +1 -1
- package/dist/es/Atomic/FormElements/MultiSelect/MultiSelect.js.map +1 -1
- package/dist/es/Atomic/FormElements/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/es/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.js.map +1 -1
- package/dist/es/Atomic/FormElements/RadioInput/RadioInput.js.map +1 -1
- package/dist/es/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.js.map +1 -1
- package/dist/es/Atomic/FormElements/RangeCalendar/RangeCalendar.js +2 -1
- package/dist/es/Atomic/FormElements/RangeCalendar/RangeCalendar.js.map +1 -1
- package/dist/es/Atomic/FormElements/RangeInputs/RangeInputs.js.map +1 -1
- package/dist/es/Atomic/FormElements/RangeList/RangeList.js.map +1 -1
- package/dist/es/Atomic/FormElements/RangeList/partial/RangeListRow.js.map +1 -1
- package/dist/es/Atomic/FormElements/RangeSlider/RangeSlider.js +9 -6
- package/dist/es/Atomic/FormElements/RangeSlider/RangeSlider.js.map +1 -1
- package/dist/es/Atomic/FormElements/RangeSlider2/RangeSlider2.js +4 -2
- package/dist/es/Atomic/FormElements/RangeSlider2/RangeSlider2.js.map +1 -1
- package/dist/es/Atomic/FormElements/SwitchableRow/SwitchableRow.js.map +1 -1
- package/dist/es/Atomic/FormElements/Switcher/Switcher.js.map +1 -1
- package/dist/es/Atomic/FormElements/SwitcherCheckbox/SwitcherCheckbox.js.map +1 -1
- package/dist/es/Atomic/FormElements/SwitcherHide/SwitcherHide.js.map +1 -1
- package/dist/es/Atomic/FormElements/SwitcherRadio/SwitcherRadio.js.map +1 -1
- package/dist/es/Atomic/FormElements/SwitcherRange/SwitcherRange.js.map +1 -1
- package/dist/es/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.js.map +1 -1
- package/dist/es/Atomic/FormElements/SwitcherTagsDropdown/SwitcherTagsDropdown.js.map +1 -1
- package/dist/es/Atomic/FormElements/SwitcherTextarea/SwitcherTextarea.js.map +1 -1
- package/dist/es/Atomic/FormElements/TagsDropdown/TagsDropdown.js.map +1 -1
- package/dist/es/Atomic/FormElements/Text/Text.js.map +1 -1
- package/dist/es/Atomic/FormElements/TextSwitcher/TextSwitcher.js.map +1 -1
- package/dist/es/Atomic/FormElements/Textarea/Textarea.js.map +1 -1
- package/dist/es/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js +4 -2
- package/dist/es/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js.map +1 -1
- package/dist/es/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js.map +1 -1
- package/dist/es/Atomic/FormElements/TimeRange/TimeRange.js.map +1 -1
- package/dist/es/Atomic/FormElements/UserContacts/UserContacts.js.map +1 -1
- package/dist/es/Atomic/Layout/Header/Header.js.map +1 -1
- package/dist/es/Atomic/Layout/MainMenu/MainMenu.js.map +1 -1
- package/dist/es/Atomic/Layout/Spinner/Spinner.js.map +1 -1
- package/dist/es/Atomic/UI/Accordion/Accordion.js.map +1 -1
- package/dist/es/Atomic/UI/Accordion/AccordionItem.js.map +1 -1
- package/dist/es/Atomic/UI/AdvancedTag/AdvTag.js +2 -1
- package/dist/es/Atomic/UI/AdvancedTag/AdvTag.js.map +1 -1
- package/dist/es/Atomic/UI/AdvancedTag/AdvancedTags.js.map +1 -1
- package/dist/es/Atomic/UI/Alert/Alert.js.map +1 -1
- package/dist/es/Atomic/UI/Arrow/Arrow.js.map +1 -1
- package/dist/es/Atomic/UI/Button/Button.js.map +1 -1
- package/dist/es/Atomic/UI/ButtonsBar/ButtonsBar.js.map +1 -1
- package/dist/es/Atomic/UI/Chart/Chart.js +2 -1
- package/dist/es/Atomic/UI/Chart/Chart.js.map +1 -1
- package/dist/es/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.js.map +1 -1
- package/dist/es/Atomic/UI/Chart/partial/utils.js +2 -1
- package/dist/es/Atomic/UI/Chart/partial/utils.js.map +1 -1
- package/dist/es/Atomic/UI/DateTime/DateTime.js.map +1 -1
- package/dist/es/Atomic/UI/DebugContainer/DebugContainer.js.map +1 -1
- package/dist/es/Atomic/UI/DoubleString/DoubleString.js.map +1 -1
- package/dist/es/Atomic/UI/Hint/Hint.js +4 -6
- package/dist/es/Atomic/UI/Hint/Hint.js.map +1 -1
- package/dist/es/Atomic/UI/Hint/partials/_utils.js.map +1 -1
- package/dist/es/Atomic/UI/Modal/Modal.js.map +1 -1
- package/dist/es/Atomic/UI/Modal/ModalHOC.js.map +1 -1
- package/dist/es/Atomic/UI/Modal/partials/ModalTitle.js.map +1 -1
- package/dist/es/Atomic/UI/Modal/partials/_constants.js.map +1 -1
- package/dist/es/Atomic/UI/Modal/partials/_utils.js +1 -4
- package/dist/es/Atomic/UI/Modal/partials/_utils.js.map +1 -1
- package/dist/es/Atomic/UI/Modal/partials/useMobileModal.js +8 -6
- package/dist/es/Atomic/UI/Modal/partials/useMobileModal.js.map +1 -1
- package/dist/es/Atomic/UI/NavLine/NavLine.js.map +1 -1
- package/dist/es/Atomic/UI/PageTitle/PageTitle.js.map +1 -1
- package/dist/es/Atomic/UI/Price/Price.js.map +1 -1
- package/dist/es/Atomic/UI/PriceRange/PriceRange.js.map +1 -1
- package/dist/es/Atomic/UI/ProgressLine/ProgressLine.js.map +1 -1
- package/dist/es/Atomic/UI/Status/Status.js.map +1 -1
- package/dist/es/Atomic/UI/Tag/Tag.js.map +1 -1
- package/dist/es/Atomic/UI/TagList/TagList.js.map +1 -1
- package/dist/es/Atomic/UI/UserBox/UserBox.js.map +1 -1
- package/dist/es/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.js.map +1 -1
- package/dist/es/Atomic/UI/WizardStepper/ui/StepRow/StepRow.js.map +1 -1
- package/dist/es/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.js.map +1 -1
- package/dist/es/Atomic/UI/WizardStepper/ui/icons.js.map +1 -1
- package/dist/es/Classes/RESTAPI/partials/CredentialsProcessing.js +4 -2
- package/dist/es/Classes/RESTAPI/partials/CredentialsProcessing.js.map +1 -1
- package/dist/es/Classes/RESTAPI/partials/sse.js +4 -7
- package/dist/es/Classes/RESTAPI/partials/sse.js.map +1 -1
- package/dist/es/Functions/fieldValueFormatters.js +1 -3
- package/dist/es/Functions/fieldValueFormatters.js.map +1 -1
- package/dist/es/Functions/operations.js +22 -20
- package/dist/es/Functions/operations.js.map +1 -1
- package/dist/es/Functions/useFormTools/form-drivers/ObjectWithIterableObjects.js +8 -6
- package/dist/es/Functions/useFormTools/form-drivers/ObjectWithIterableObjects.js.map +1 -1
- package/dist/es/Functions/useFormTools/functions/General.js +8 -6
- package/dist/es/Functions/useFormTools/functions/General.js.map +1 -1
- package/dist/es/Functions/useFormTools/functions/RenderFields.js +6 -5
- package/dist/es/Functions/useFormTools/functions/RenderFields.js.map +1 -1
- package/dist/es/Functions/useFormTools/index.js +1 -4
- package/dist/es/Functions/useFormTools/index.js.map +1 -1
- package/dist/es/Functions/utils.js +2 -1
- package/dist/es/Functions/utils.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/AffiliateNetworks.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/AlertCircle.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/AppStore.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Arrow.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ArrowDown.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ArrowLeft.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ArrowRight.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ArrowUp.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Bell.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Button.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Campaigns.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Check.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Check2.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ChevronDown.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ChevronDownDisabled.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ChevronLeft.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ChevronRight.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ChevronUp.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ChevronUpDown.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Close.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/ColumnsOrder.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Delete.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Edit.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Email.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/FinturfLogo.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/FinturfLogo2.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Flows.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Gift.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/GoogleAuth.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/GooglePlay.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/HelpCircle.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/HelpCircle2.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/HelpCircleFilled.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Home.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Home2.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Key.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Landers.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Lock.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Mail.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Mastercard.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Minus.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Offers.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Pause.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/PayPal.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/PayPalLightLarge.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Phone.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Play.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Plus.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Profile.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/QRCode.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Rectangle.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Revert.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Star.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Star2.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/TrafficSources.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Trash.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/TrashRed.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Triggers.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/User.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/Visa.js.map +1 -1
- package/dist/es/Molecular/CustomIcons/components/X.js.map +1 -1
- package/dist/es/Molecular/FormElement/FormElement.js.map +1 -1
- package/dist/es/Molecular/InputAddress/InputAddress.js +24 -19
- package/dist/es/Molecular/InputAddress/InputAddress.js.map +1 -1
- package/dist/es/Molecular/InputCustomFetch/InputCustomFetch.js +17 -11
- package/dist/es/Molecular/InputCustomFetch/InputCustomFetch.js.map +1 -1
- package/dist/es/Molecular/InputPassword/InputPassword.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MainMenu.js","names":[],"sources":["../../../../../src/Atomic/Layout/MainMenu/MainMenu.jsx"],"sourcesContent":["import cn from 'classnames';\n\nimport { useState } from 'react';\nimport * as Icons from 'react-feather';\nimport { NavLink } from 'react-router-dom';\n\nimport Langs from '../../../Langs';\nimport Accordion from '../../UI/Accordion/Accordion';\n\nimport './MainMenu.scss';\n\nfunction MainMenu(props) {\n const { items, className } = props;\n const txt = Langs[globalThis.lng];\n const [isOpen, setIsOpen] = useState(true);\n const [isMenuHovered, setIsMenuHovered] = useState(false);\n const [isMenuIconHovered, setIsMenuIconHovered] = useState(false);\n\n const chapterClass = cn('main-menu--items-box-chapter', {\n 'main-menu--items-box-chapter-hidden': !isOpen && !isMenuHovered,\n });\n const accordionClass = cn('main-menu--accordion', {\n 'main-menu--accordion-hidden': !isOpen && !isMenuHovered,\n });\n const itemsBoxClass = cn('main-menu--items-box', {\n 'main-menu--items-box-closed': !isOpen && !isMenuHovered,\n });\n const mainMenuClass = cn('main-menu', className, {\n 'main-menu--closed': !isOpen && !isMenuHovered,\n });\n\n const onMenuHover = () => {\n if (!isOpen) {\n setIsMenuHovered(!isMenuHovered);\n items.mainMenu.forEach((item) => {\n item.isOpen = false;\n });\n items.partners.forEach((item) => {\n item.isOpen = false;\n });\n items.other.forEach((item) => {\n item.isOpen = false;\n });\n }\n };\n\n const onCloseMenu = () => {\n setIsOpen(!isOpen);\n items.mainMenu.forEach((item) => {\n item.isOpen = false;\n });\n items.partners.forEach((item) => {\n item.isOpen = false;\n });\n items.other.forEach((item) => {\n item.isOpen = false;\n });\n };\n\n const changeMenuIcon = () => {\n if (isOpen && !isMenuIconHovered) return <Icons.Menu />;\n if (isOpen && isMenuIconHovered) return <Icons.ChevronLeft />;\n if (!isOpen && isMenuHovered) return <Icons.ChevronRight />;\n if (!isOpen) return <div className=\"main-menu--logo-close\" />;\n return null;\n };\n\n return (\n <div\n className={mainMenuClass}\n onMouseEnter={() => onMenuHover()}\n onMouseLeave={() => setIsMenuHovered(false)}\n >\n <div\n className={cn('main-menu--header', {\n 'main-menu--header-closed': !isOpen && !isMenuHovered,\n })}\n >\n <div\n className={cn('main-menu--logo', {\n 'main-menu--logo-none': !isOpen && !isMenuHovered,\n })}\n />\n <div className=\"main-menu--header-btn\" onClick={() => onCloseMenu()}>\n <div\n className=\"j5\"\n onMouseEnter={() => setIsMenuIconHovered(true)}\n onMouseLeave={() => setIsMenuIconHovered(false)}\n >\n {changeMenuIcon()}\n </div>\n </div>\n </div>\n\n <div className={itemsBoxClass}>\n <div className={cn('main-menu--items-box-main')}>\n {items.main.map((item, index) => {\n const Icon = Icons[item.icon];\n return item.link\n ? (\n <NavLink\n to={item.link}\n key={index}\n className={cn('main-menu--items-box-title')}\n >\n <div className=\"main-menu--item\">\n <div className=\"df\">\n <Icon className={cn('mr5', item.className)} />\n </div>\n <span className={cn({ hidden: !isOpen && !isMenuHovered })}>\n {item?.title || 'Link'}\n </span>\n </div>\n </NavLink>\n )\n : (\n <span\n key={index}\n className={cn('main-menu--items-box-title', {\n hidden: !isOpen && !isMenuHovered,\n })}\n >\n {txt?.titles[item?.title]}\n </span>\n );\n })}\n </div>\n\n <div className={chapterClass}>\n <span>Main menu</span>\n </div>\n <Accordion\n className={accordionClass}\n items={items.mainMenu}\n onClick={() => {}}\n />\n\n <div className={chapterClass}>\n <span>Partners</span>\n </div>\n <Accordion\n isOpen={isOpen}\n isMenuHovered={isMenuHovered}\n className={accordionClass}\n items={items.partners}\n onClick={() => {}}\n />\n\n <div className={chapterClass}>\n <span>Other</span>\n </div>\n <Accordion\n className={accordionClass}\n isOpen={isOpen}\n isMenuHovered={isMenuHovered}\n items={items.other}\n onClick={() => {}}\n />\n </div>\n </div>\n );\n}\n\nexport default MainMenu;\n"],"mappings":";;;;;;;;;AAWA,SAAS,SAAS,OAAO;CACvB,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,MAAM,MAAM,WAAW;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,IAAI;CACzC,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAEhE,MAAM,eAAe,GAAG,gCAAgC,EACtD,uCAAuC,CAAC,UAAU,CAAC,cACrD,CAAC;CACD,MAAM,iBAAiB,GAAG,wBAAwB,EAChD,+BAA+B,CAAC,UAAU,CAAC,cAC7C,CAAC;CACD,MAAM,gBAAgB,GAAG,wBAAwB,EAC/C,+BAA+B,CAAC,UAAU,CAAC,cAC7C,CAAC;CACD,MAAM,gBAAgB,GAAG,aAAa,WAAW,EAC/C,qBAAqB,CAAC,UAAU,CAAC,cACnC,CAAC;CAED,MAAM,oBAAoB;EACxB,IAAI,CAAC,QAAQ;GACX,iBAAiB,CAAC,aAAa;GAC/B,MAAM,SAAS,SAAS,SAAS;IAC/B,KAAK,SAAS;GAChB,CAAC;GACD,MAAM,SAAS,SAAS,SAAS;IAC/B,KAAK,SAAS;GAChB,CAAC;GACD,MAAM,MAAM,SAAS,SAAS;IAC5B,KAAK,SAAS;GAChB,CAAC;EACH;CACF;CAEA,MAAM,oBAAoB;EACxB,UAAU,CAAC,MAAM;EACjB,MAAM,SAAS,SAAS,SAAS;GAC/B,KAAK,SAAS;EAChB,CAAC;EACD,MAAM,SAAS,SAAS,SAAS;GAC/B,KAAK,SAAS;EAChB,CAAC;EACD,MAAM,MAAM,SAAS,SAAS;GAC5B,KAAK,SAAS;EAChB,CAAC;CACH;CAEA,MAAM,uBAAuB;EAC3B,IAAI,UAAU,CAAC,mBAAmB,OAAO,oBAAC,MAAM,MAAP,CAAa,CAAA;EACtD,IAAI,UAAU,mBAAmB,OAAO,oBAAC,MAAM,aAAP,CAAoB,CAAA;EAC5D,IAAI,CAAC,UAAU,eAAe,OAAO,oBAAC,MAAM,cAAP,CAAqB,CAAA;EAC1D,IAAI,CAAC,QAAQ,OAAO,oBAAC,OAAD,EAAK,WAAU,wBAAyB,CAAA;EAC5D,OAAO;CACT;CAEA,OACE,qBAAC,OAAD;EACE,WAAW;EACX,oBAAoB,YAAY;EAChC,oBAAoB,iBAAiB,KAAK;
|
|
1
|
+
{"version":3,"file":"MainMenu.js","names":[],"sources":["../../../../../src/Atomic/Layout/MainMenu/MainMenu.jsx"],"sourcesContent":["import cn from 'classnames';\n\nimport { useState } from 'react';\nimport * as Icons from 'react-feather';\nimport { NavLink } from 'react-router-dom';\n\nimport Langs from '../../../Langs';\nimport Accordion from '../../UI/Accordion/Accordion';\n\nimport './MainMenu.scss';\n\nfunction MainMenu(props) {\n const { items, className } = props;\n const txt = Langs[globalThis.lng];\n const [isOpen, setIsOpen] = useState(true);\n const [isMenuHovered, setIsMenuHovered] = useState(false);\n const [isMenuIconHovered, setIsMenuIconHovered] = useState(false);\n\n const chapterClass = cn('main-menu--items-box-chapter', {\n 'main-menu--items-box-chapter-hidden': !isOpen && !isMenuHovered,\n });\n const accordionClass = cn('main-menu--accordion', {\n 'main-menu--accordion-hidden': !isOpen && !isMenuHovered,\n });\n const itemsBoxClass = cn('main-menu--items-box', {\n 'main-menu--items-box-closed': !isOpen && !isMenuHovered,\n });\n const mainMenuClass = cn('main-menu', className, {\n 'main-menu--closed': !isOpen && !isMenuHovered,\n });\n\n const onMenuHover = () => {\n if (!isOpen) {\n setIsMenuHovered(!isMenuHovered);\n items.mainMenu.forEach((item) => {\n item.isOpen = false;\n });\n items.partners.forEach((item) => {\n item.isOpen = false;\n });\n items.other.forEach((item) => {\n item.isOpen = false;\n });\n }\n };\n\n const onCloseMenu = () => {\n setIsOpen(!isOpen);\n items.mainMenu.forEach((item) => {\n item.isOpen = false;\n });\n items.partners.forEach((item) => {\n item.isOpen = false;\n });\n items.other.forEach((item) => {\n item.isOpen = false;\n });\n };\n\n const changeMenuIcon = () => {\n if (isOpen && !isMenuIconHovered) return <Icons.Menu />;\n if (isOpen && isMenuIconHovered) return <Icons.ChevronLeft />;\n if (!isOpen && isMenuHovered) return <Icons.ChevronRight />;\n if (!isOpen) return <div className=\"main-menu--logo-close\" />;\n return null;\n };\n\n return (\n <div\n className={mainMenuClass}\n onMouseEnter={() => onMenuHover()}\n onMouseLeave={() => setIsMenuHovered(false)}\n >\n <div\n className={cn('main-menu--header', {\n 'main-menu--header-closed': !isOpen && !isMenuHovered,\n })}\n >\n <div\n className={cn('main-menu--logo', {\n 'main-menu--logo-none': !isOpen && !isMenuHovered,\n })}\n />\n <div className=\"main-menu--header-btn\" onClick={() => onCloseMenu()}>\n <div\n className=\"j5\"\n onMouseEnter={() => setIsMenuIconHovered(true)}\n onMouseLeave={() => setIsMenuIconHovered(false)}\n >\n {changeMenuIcon()}\n </div>\n </div>\n </div>\n\n <div className={itemsBoxClass}>\n <div className={cn('main-menu--items-box-main')}>\n {items.main.map((item, index) => {\n const Icon = Icons[item.icon];\n return item.link\n ? (\n <NavLink\n to={item.link}\n key={index}\n className={cn('main-menu--items-box-title')}\n >\n <div className=\"main-menu--item\">\n <div className=\"df\">\n <Icon className={cn('mr5', item.className)} />\n </div>\n <span className={cn({ hidden: !isOpen && !isMenuHovered })}>\n {item?.title || 'Link'}\n </span>\n </div>\n </NavLink>\n )\n : (\n <span\n key={index}\n className={cn('main-menu--items-box-title', {\n hidden: !isOpen && !isMenuHovered,\n })}\n >\n {txt?.titles[item?.title]}\n </span>\n );\n })}\n </div>\n\n <div className={chapterClass}>\n <span>Main menu</span>\n </div>\n <Accordion\n className={accordionClass}\n items={items.mainMenu}\n onClick={() => {}}\n />\n\n <div className={chapterClass}>\n <span>Partners</span>\n </div>\n <Accordion\n isOpen={isOpen}\n isMenuHovered={isMenuHovered}\n className={accordionClass}\n items={items.partners}\n onClick={() => {}}\n />\n\n <div className={chapterClass}>\n <span>Other</span>\n </div>\n <Accordion\n className={accordionClass}\n isOpen={isOpen}\n isMenuHovered={isMenuHovered}\n items={items.other}\n onClick={() => {}}\n />\n </div>\n </div>\n );\n}\n\nexport default MainMenu;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","names":[],"sources":["../../../../../src/Atomic/Layout/Spinner/Spinner.tsx"],"sourcesContent":["import type { ISpinnerProps } from './Spinner.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport './Spinner.scss';\n\nconst CN = 'loader-box';\n\nconst Spinner: React.FC<ISpinnerProps> = ({ size = null, className, testId = CN }) => {\n return (\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-busy=\"true\"\n data-testid={testId}\n className={cn(\n CN,\n {\n j5: size !== 'small',\n j8: size === 'small',\n },\n className,\n )}\n >\n <div className={cn('lds-ring', { [`lds-ring_${size}`]: size })}>\n <div />\n <div />\n <div />\n <div />\n </div>\n </div>\n );\n};\n\nexport default Spinner;\n"],"mappings":";;;;;AAOA,IAAM,KAAK;AAEX,IAAM,WAAoC,EAAE,OAAO,MAAM,WAAW,SAAS,SAAS;CACpF,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,aAAU;EACV,eAAa;EACb,WAAW,GACT,IACA;GACE,IAAI,SAAS;GACb,IAAI,SAAS;EACf,GACA,SACF;
|
|
1
|
+
{"version":3,"file":"Spinner.js","names":[],"sources":["../../../../../src/Atomic/Layout/Spinner/Spinner.tsx"],"sourcesContent":["import type { ISpinnerProps } from './Spinner.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport './Spinner.scss';\n\nconst CN = 'loader-box';\n\nconst Spinner: React.FC<ISpinnerProps> = ({ size = null, className, testId = CN }) => {\n return (\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-busy=\"true\"\n data-testid={testId}\n className={cn(\n CN,\n {\n j5: size !== 'small',\n j8: size === 'small',\n },\n className,\n )}\n >\n <div className={cn('lds-ring', { [`lds-ring_${size}`]: size })}>\n <div />\n <div />\n <div />\n <div />\n </div>\n </div>\n );\n};\n\nexport default Spinner;\n"],"mappings":";;;;;AAOA,IAAM,KAAK;AAEX,IAAM,WAAoC,EAAE,OAAO,MAAM,WAAW,SAAS,SAAS;CACpF,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,aAAU;EACV,eAAa;EACb,WAAW,GACT,IACA;GACE,IAAI,SAAS;GACb,IAAI,SAAS;EACf,GACA,SACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW,GAAG,YAAY,GAAG,YAAY,SAAS,KAAK,CAAC;GAA7D,UAAA;IACE,oBAAC,OAAD,CAAM,CAAA;IACN,oBAAC,OAAD,CAAM,CAAA;IACN,oBAAC,OAAD,CAAM,CAAA;IACN,oBAAC,OAAD,CAAM,CAAA;GACH;;CACF,CAAA;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":[],"sources":["../../../../../src/Atomic/UI/Accordion/Accordion.tsx"],"sourcesContent":["import type { IAccordionProps } from './Accordion.interface';\nimport cn from 'classnames';\nimport React, { useState } from 'react';\nimport * as Icons from 'react-feather';\n\nimport { NavLink } from 'react-router-dom';\n\nimport { handleObjectChange } from '../../../Functions/utils';\nimport AccordionItem from './AccordionItem';\n\nimport './Accordion.scss';\n\nconst CN = 'accordion';\n\nconst Accordion: React.FC<IAccordionProps> = ({\n items,\n className,\n itemClassName,\n isMenuHovered,\n isOpen,\n testId = CN,\n}) => {\n const [data, setData] = useState(items);\n\n const onChange = handleObjectChange(setData, () => setData([...data]));\n\n const handleArrayChange = (e: boolean, index: number, prop: keyof (typeof data)[0]): void => {\n // @ts-ignore\n data[index][prop] = e;\n onChange(data);\n };\n\n return (\n <div className={cn(CN, className)} data-testid={testId} role=\"list\" aria-label=\"Accordion list\">\n {items?.map((item, index) => {\n const Icon = Icons[item.icon as keyof typeof Icons];\n return item.link\n ? (\n <NavLink\n data-testid={`${testId}-link-${index}`}\n key={index}\n to={item.link}\n className={cn('main-menu--item main-menu--items-box-title')}\n >\n {item?.icon && <Icon className={cn('mr5', item?.className)} />}\n <span className={cn({ hidden: !isOpen && !isMenuHovered })}>{item?.title || 'Link'}</span>\n </NavLink>\n )\n : (\n <AccordionItem\n testId={`${testId}-item-${index}`}\n key={index}\n className={itemClassName}\n item={item}\n isOpen={!!item.isOpen}\n onClick={value => handleArrayChange(value, index, 'isOpen')}\n // router-aware вариант: menu-ссылки (item.children) идут через NavLink,\n // а не через дефолтный <a> router-free AccordionItem'а.\n linkComponent={NavLink}\n />\n );\n })}\n </div>\n );\n};\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;AAYA,IAAM,KAAK;AAEX,IAAM,aAAwC,EAC5C,OACA,WACA,eACA,eACA,QACA,SAAS,SACL;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,WAAW,mBAAmB,eAAe,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;CAErE,MAAM,qBAAqB,GAAY,OAAe,SAAuC;EAE3F,KAAK,MAAM,CAAC,QAAQ;EACpB,SAAS,IAAI;CACf;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,IAAI,SAAS;EAAG,eAAa;EAAQ,MAAK;EAAO,cAAW;
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":[],"sources":["../../../../../src/Atomic/UI/Accordion/Accordion.tsx"],"sourcesContent":["import type { IAccordionProps } from './Accordion.interface';\nimport cn from 'classnames';\nimport React, { useState } from 'react';\nimport * as Icons from 'react-feather';\n\nimport { NavLink } from 'react-router-dom';\n\nimport { handleObjectChange } from '../../../Functions/utils';\nimport AccordionItem from './AccordionItem';\n\nimport './Accordion.scss';\n\nconst CN = 'accordion';\n\nconst Accordion: React.FC<IAccordionProps> = ({\n items,\n className,\n itemClassName,\n isMenuHovered,\n isOpen,\n testId = CN,\n}) => {\n const [data, setData] = useState(items);\n\n const onChange = handleObjectChange(setData, () => setData([...data]));\n\n const handleArrayChange = (e: boolean, index: number, prop: keyof (typeof data)[0]): void => {\n // @ts-ignore\n data[index][prop] = e;\n onChange(data);\n };\n\n return (\n <div className={cn(CN, className)} data-testid={testId} role=\"list\" aria-label=\"Accordion list\">\n {items?.map((item, index) => {\n const Icon = Icons[item.icon as keyof typeof Icons];\n return item.link\n ? (\n <NavLink\n data-testid={`${testId}-link-${index}`}\n key={index}\n to={item.link}\n className={cn('main-menu--item main-menu--items-box-title')}\n >\n {item?.icon && <Icon className={cn('mr5', item?.className)} />}\n <span className={cn({ hidden: !isOpen && !isMenuHovered })}>{item?.title || 'Link'}</span>\n </NavLink>\n )\n : (\n <AccordionItem\n testId={`${testId}-item-${index}`}\n key={index}\n className={itemClassName}\n item={item}\n isOpen={!!item.isOpen}\n onClick={value => handleArrayChange(value, index, 'isOpen')}\n // router-aware вариант: menu-ссылки (item.children) идут через NavLink,\n // а не через дефолтный <a> router-free AccordionItem'а.\n linkComponent={NavLink}\n />\n );\n })}\n </div>\n );\n};\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;AAYA,IAAM,KAAK;AAEX,IAAM,aAAwC,EAC5C,OACA,WACA,eACA,eACA,QACA,SAAS,SACL;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,WAAW,mBAAmB,eAAe,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;CAErE,MAAM,qBAAqB,GAAY,OAAe,SAAuC;EAE3F,KAAK,MAAM,CAAC,QAAQ;EACpB,SAAS,IAAI;CACf;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,IAAI,SAAS;EAAG,eAAa;EAAQ,MAAK;EAAO,cAAW;EAC5E,UAAA,OAAO,KAAK,MAAM,UAAU;GAC3B,MAAM,OAAO,MAAM,KAAK;GACxB,OAAO,KAAK,OAEN,qBAAC,SAAD;IACE,eAAa,GAAG,OAAO,QAAQ;IAE/B,IAAI,KAAK;IACT,WAAW,GAAG,4CAA4C;IAJ5D,UAAA,CAMG,MAAM,QAAQ,oBAAC,MAAD,EAAM,WAAW,GAAG,OAAO,MAAM,SAAS,EAAI,CAAA,GAC7D,oBAAC,QAAD;KAAM,WAAW,GAAG,EAAE,QAAQ,CAAC,UAAU,CAAC,cAAc,CAAC;KAAI,UAAA,MAAM,SAAS;IAAa,CAAA,CAClF;GANF,GAAA,KAME,IAGT,oBAAC,eAAD;IACE,QAAQ,GAAG,OAAO,QAAQ;IAE1B,WAAW;IACL;IACN,QAAQ,CAAC,CAAC,KAAK;IACf,UAAS,UAAS,kBAAkB,OAAO,OAAO,QAAQ;IAG1D,eAAe;GAChB,GARM,KAQN;EAET,CAAC;CACE,CAAA;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","names":[],"sources":["../../../../../src/Atomic/UI/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { AccordionLinkComponent, IAccordionItemProps } from './Accordion.interface';\nimport cn from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport * as Icons from 'react-feather';\n\nimport Status from '../Status';\n\nimport './Accordion.scss';\n\n/**\n * Дефолтная ссылка menu-пунктов — обычный <a href> БЕЗ react-router-dom.\n * AccordionItem обязан оставаться router-free: его использует Table -> TdCell\n * из subpath \"ui\". SPA-поведение возвращает Accordion (subpath \"router-ui\"),\n * передавая сюда NavLink через prop linkComponent.\n */\nconst DefaultLink: AccordionLinkComponent = ({ to, className, children }) => (\n <a href={to} className={className}>\n {children}\n </a>\n);\n\nconst AccordionItem: React.FC<IAccordionItemProps> = ({\n item,\n onClick,\n isOpen,\n className,\n children,\n noChevron,\n linkComponent: LinkComponent = DefaultLink,\n testId = 'accordion-item',\n}) => {\n const Icon = Icons[item.icon as keyof typeof Icons];\n const [maxHeight, setMaxHeight] = useState<number>(0);\n const ref = useRef<HTMLDivElement>(null);\n\n const getItemsHeight = (): number => {\n let itemHeight = 0;\n ref.current?.childNodes.forEach((el) => {\n itemHeight += (el as HTMLElement).offsetHeight;\n });\n\n return itemHeight + 20;\n };\n\n useEffect(() => {\n setMaxHeight(isOpen ? getItemsHeight() : 0);\n }, [isOpen]);\n\n const calculateStatusCount = (): {\n active: number;\n pause: number;\n } | undefined => {\n return item?.rows?.reduce(\n (acc, row) => {\n const result = row.cols.reduce(\n (accum, col) => ({\n active: accum.active + (col.status === 'active' ? 1 : 0),\n pause: accum.pause + (col.status === 'pause' ? 1 : 0),\n }),\n { active: 0, pause: 0 },\n );\n\n return {\n active: acc.active + result.active,\n pause: acc.pause + result.pause,\n };\n },\n { active: 0, pause: 0 },\n );\n };\n\n return (\n <div\n data-testid={testId}\n className={cn('accordion--item', className)}\n role=\"region\"\n aria-labelledby={`accordion-title-${item.title}`}\n >\n <div\n className={cn('accordion--title-box', {\n 'accordion--title-open': isOpen,\n })}\n onClick={() => onClick(!isOpen)}\n id={`accordion-title-${item.title}`}\n role=\"button\"\n aria-expanded={isOpen}\n aria-controls={`accordion-content-${item.title}`}\n tabIndex={0}\n >\n <div className=\"j4 no-wrap\">\n {item?.icon && <Icon className={cn('mr5', item?.className)} aria-hidden=\"true\" />}\n <span className=\"accordion--title\">{item.title || 'Menu Chapter'}</span>\n </div>\n\n <div className=\"j6 accordion-title__right-box\">\n {item.status && (\n <div className=\"mr5\">\n <Status\n type={item?.status.type}\n value={item?.status.value}\n status={item?.status.status}\n active={calculateStatusCount()?.active}\n pause={calculateStatusCount()?.pause}\n />\n </div>\n )}\n\n {!noChevron && (\n <Icons.ChevronRight\n aria-hidden=\"true\"\n className={cn('accordion--title-chevron', {\n 'accordion--title-chevron-open': isOpen,\n })}\n />\n )}\n </div>\n </div>\n\n <div\n ref={ref}\n style={{ maxHeight }}\n className={cn('accordion--content', {\n 'accordion--content-is-open': isOpen,\n })}\n id={`accordion-content-${item.title}`}\n role=\"region\"\n aria-labelledby={`accordion-title-${item.title}`}\n >\n {item.children\n ? item.children.map((el) => {\n return (\n <LinkComponent to={el.link} key={el.id} className=\"accordion--content-item accordion--menu-link\">\n {el?.title || 'Menu item'}\n </LinkComponent>\n );\n })\n : children}\n </div>\n </div>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,eAAuC,EAAE,IAAI,WAAW,eAC5D,oBAAC,KAAD;CAAG,MAAM;CAAe;CACrB;AACA,CAAA;AAGL,IAAM,iBAAgD,EACpD,MACA,SACA,QACA,WACA,UACA,WACA,eAAe,gBAAgB,aAC/B,SAAS,uBACL;CACJ,MAAM,OAAO,MAAM,KAAK;CACxB,MAAM,CAAC,WAAW,gBAAgB,SAAiB,CAAC;CACpD,MAAM,MAAM,OAAuB,IAAI;CAEvC,MAAM,uBAA+B;EACnC,IAAI,aAAa;EACjB,IAAI,SAAS,WAAW,SAAS,OAAO;GACtC,cAAe,GAAmB;EACpC,CAAC;EAED,OAAO,aAAa;CACtB;CAEA,gBAAgB;EACd,aAAa,SAAS,eAAe,IAAI,CAAC;CAC5C,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,6BAGW;EACf,OAAO,MAAM,MAAM,QAChB,KAAK,QAAQ;GACZ,MAAM,SAAS,IAAI,KAAK,QACrB,OAAO,SAAS;IACf,QAAQ,MAAM,UAAU,IAAI,WAAW,WAAW,IAAI;IACtD,OAAO,MAAM,SAAS,IAAI,WAAW,UAAU,IAAI;GACrD,IACA;IAAE,QAAQ;IAAG,OAAO;GAAE,CACxB;GAEA,OAAO;IACL,QAAQ,IAAI,SAAS,OAAO;IAC5B,OAAO,IAAI,QAAQ,OAAO;GAC5B;EACF,GACA;GAAE,QAAQ;GAAG,OAAO;EAAE,CACxB;CACF;CAEA,OACE,qBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAAG,mBAAmB,SAAS;EAC1C,MAAK;EACL,mBAAiB,mBAAmB,KAAK;
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","names":[],"sources":["../../../../../src/Atomic/UI/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { AccordionLinkComponent, IAccordionItemProps } from './Accordion.interface';\nimport cn from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport * as Icons from 'react-feather';\n\nimport Status from '../Status';\n\nimport './Accordion.scss';\n\n/**\n * Дефолтная ссылка menu-пунктов — обычный <a href> БЕЗ react-router-dom.\n * AccordionItem обязан оставаться router-free: его использует Table -> TdCell\n * из subpath \"ui\". SPA-поведение возвращает Accordion (subpath \"router-ui\"),\n * передавая сюда NavLink через prop linkComponent.\n */\nconst DefaultLink: AccordionLinkComponent = ({ to, className, children }) => (\n <a href={to} className={className}>\n {children}\n </a>\n);\n\nconst AccordionItem: React.FC<IAccordionItemProps> = ({\n item,\n onClick,\n isOpen,\n className,\n children,\n noChevron,\n linkComponent: LinkComponent = DefaultLink,\n testId = 'accordion-item',\n}) => {\n const Icon = Icons[item.icon as keyof typeof Icons];\n const [maxHeight, setMaxHeight] = useState<number>(0);\n const ref = useRef<HTMLDivElement>(null);\n\n const getItemsHeight = (): number => {\n let itemHeight = 0;\n ref.current?.childNodes.forEach((el) => {\n itemHeight += (el as HTMLElement).offsetHeight;\n });\n\n return itemHeight + 20;\n };\n\n useEffect(() => {\n setMaxHeight(isOpen ? getItemsHeight() : 0);\n }, [isOpen]);\n\n const calculateStatusCount = (): {\n active: number;\n pause: number;\n } | undefined => {\n return item?.rows?.reduce(\n (acc, row) => {\n const result = row.cols.reduce(\n (accum, col) => ({\n active: accum.active + (col.status === 'active' ? 1 : 0),\n pause: accum.pause + (col.status === 'pause' ? 1 : 0),\n }),\n { active: 0, pause: 0 },\n );\n\n return {\n active: acc.active + result.active,\n pause: acc.pause + result.pause,\n };\n },\n { active: 0, pause: 0 },\n );\n };\n\n return (\n <div\n data-testid={testId}\n className={cn('accordion--item', className)}\n role=\"region\"\n aria-labelledby={`accordion-title-${item.title}`}\n >\n <div\n className={cn('accordion--title-box', {\n 'accordion--title-open': isOpen,\n })}\n onClick={() => onClick(!isOpen)}\n id={`accordion-title-${item.title}`}\n role=\"button\"\n aria-expanded={isOpen}\n aria-controls={`accordion-content-${item.title}`}\n tabIndex={0}\n >\n <div className=\"j4 no-wrap\">\n {item?.icon && <Icon className={cn('mr5', item?.className)} aria-hidden=\"true\" />}\n <span className=\"accordion--title\">{item.title || 'Menu Chapter'}</span>\n </div>\n\n <div className=\"j6 accordion-title__right-box\">\n {item.status && (\n <div className=\"mr5\">\n <Status\n type={item?.status.type}\n value={item?.status.value}\n status={item?.status.status}\n active={calculateStatusCount()?.active}\n pause={calculateStatusCount()?.pause}\n />\n </div>\n )}\n\n {!noChevron && (\n <Icons.ChevronRight\n aria-hidden=\"true\"\n className={cn('accordion--title-chevron', {\n 'accordion--title-chevron-open': isOpen,\n })}\n />\n )}\n </div>\n </div>\n\n <div\n ref={ref}\n style={{ maxHeight }}\n className={cn('accordion--content', {\n 'accordion--content-is-open': isOpen,\n })}\n id={`accordion-content-${item.title}`}\n role=\"region\"\n aria-labelledby={`accordion-title-${item.title}`}\n >\n {item.children\n ? item.children.map((el) => {\n return (\n <LinkComponent to={el.link} key={el.id} className=\"accordion--content-item accordion--menu-link\">\n {el?.title || 'Menu item'}\n </LinkComponent>\n );\n })\n : children}\n </div>\n </div>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,eAAuC,EAAE,IAAI,WAAW,eAC5D,oBAAC,KAAD;CAAG,MAAM;CAAe;CACrB;AACA,CAAA;AAGL,IAAM,iBAAgD,EACpD,MACA,SACA,QACA,WACA,UACA,WACA,eAAe,gBAAgB,aAC/B,SAAS,uBACL;CACJ,MAAM,OAAO,MAAM,KAAK;CACxB,MAAM,CAAC,WAAW,gBAAgB,SAAiB,CAAC;CACpD,MAAM,MAAM,OAAuB,IAAI;CAEvC,MAAM,uBAA+B;EACnC,IAAI,aAAa;EACjB,IAAI,SAAS,WAAW,SAAS,OAAO;GACtC,cAAe,GAAmB;EACpC,CAAC;EAED,OAAO,aAAa;CACtB;CAEA,gBAAgB;EACd,aAAa,SAAS,eAAe,IAAI,CAAC;CAC5C,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,6BAGW;EACf,OAAO,MAAM,MAAM,QAChB,KAAK,QAAQ;GACZ,MAAM,SAAS,IAAI,KAAK,QACrB,OAAO,SAAS;IACf,QAAQ,MAAM,UAAU,IAAI,WAAW,WAAW,IAAI;IACtD,OAAO,MAAM,SAAS,IAAI,WAAW,UAAU,IAAI;GACrD,IACA;IAAE,QAAQ;IAAG,OAAO;GAAE,CACxB;GAEA,OAAO;IACL,QAAQ,IAAI,SAAS,OAAO;IAC5B,OAAO,IAAI,QAAQ,OAAO;GAC5B;EACF,GACA;GAAE,QAAQ;GAAG,OAAO;EAAE,CACxB;CACF;CAEA,OACE,qBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAAG,mBAAmB,SAAS;EAC1C,MAAK;EACL,mBAAiB,mBAAmB,KAAK;EAJ3C,UAAA,CAME,qBAAC,OAAD;GACE,WAAW,GAAG,wBAAwB,EACpC,yBAAyB,OAC3B,CAAC;GACD,eAAe,QAAQ,CAAC,MAAM;GAC9B,IAAI,mBAAmB,KAAK;GAC5B,MAAK;GACL,iBAAe;GACf,iBAAe,qBAAqB,KAAK;GACzC,UAAU;GATZ,UAAA,CAWE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,MAAM,QAAQ,oBAAC,MAAD;KAAM,WAAW,GAAG,OAAO,MAAM,SAAS;KAAG,eAAY;IAAQ,CAAA,GAChF,oBAAC,QAAD;KAAM,WAAU;KAAoB,UAAA,KAAK,SAAS;IAAqB,CAAA,CACpE;GAEL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KAAK,UACJ,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,gBAAD;MACE,MAAM,MAAM,OAAO;MACnB,OAAO,MAAM,OAAO;MACpB,QAAQ,MAAM,OAAO;MACrB,QAAQ,qBAAqB,CAAC,EAAE;MAChC,OAAO,qBAAqB,CAAC,EAAE;KAChC,CAAA;IACE,CAAA,GAGN,CAAC,aACA,oBAAC,MAAM,cAAP;KACE,eAAY;KACZ,WAAW,GAAG,4BAA4B,EACxC,iCAAiC,OACnC,CAAC;IACF,CAAA,CAEA;GACF,CAAA,CAAA;EAEL,CAAA,GAAA,oBAAC,OAAD;GACO;GACL,OAAO,EAAE,UAAU;GACnB,WAAW,GAAG,sBAAsB,EAClC,8BAA8B,OAChC,CAAC;GACD,IAAI,qBAAqB,KAAK;GAC9B,MAAK;GACL,mBAAiB,mBAAmB,KAAK;GAExC,UAAA,KAAK,WACF,KAAK,SAAS,KAAK,OAAO;IACxB,OACE,oBAAC,eAAD;KAAe,IAAI,GAAG;KAAkB,WAAU;KAC/C,UAAA,IAAI,SAAS;IACD,GAFkB,GAAG,EAErB;GAEnB,CAAC,IACD;EACD,CAAA,CACF;;AAET"}
|
|
@@ -22,7 +22,8 @@ var AdvTag = ({ item, className, testId = "adv-tag", toTop = true }) => {
|
|
|
22
22
|
"color--pause": pause === 0,
|
|
23
23
|
"color--light-red": pause > 0
|
|
24
24
|
});
|
|
25
|
-
const
|
|
25
|
+
const isEmptyEntitys = isEntityAndCounter && (!entityAndCounter?.counter || entityAndCounter.counter === 0) || !isEntityAndCounter && (warnLeft || !merchants);
|
|
26
|
+
const advancedTagClass = cn("advanced-tags", { "advanced-tags--error": isEmptyEntitys }, className);
|
|
26
27
|
const onWarningClick = (warn) => {
|
|
27
28
|
setIsOpen(true);
|
|
28
29
|
setClickedWarning(warn);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdvTag.js","names":[],"sources":["../../../../../src/Atomic/UI/AdvancedTag/AdvTag.tsx"],"sourcesContent":["import type { MouseEvent } from 'react';\nimport type { IAdvTagProps } from './AdvancedTags.interface';\n\nimport cn from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { AlertTriangle } from 'react-feather';\n\nimport './AdvancedTags.scss';\n\nconst AdvTag: React.FC<IAdvTagProps> = ({\n item,\n className,\n testId = 'adv-tag',\n toTop = true,\n}) => {\n const {\n labelLeft,\n labelRight,\n active = 0,\n pause = 0,\n merchants,\n warnLeft,\n warnLeftMsg,\n warnRightMsg,\n isEntityAndCounter = false,\n entityAndCounter = {\n nullCounterMessage: '',\n title: '',\n counter: null,\n },\n type,\n } = item;\n\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [clickedWarning, setClickedWarning] = useState<string>('');\n const hintRef = useRef<HTMLDivElement>(null);\n\n const activeNumberClass = cn('strong', {\n 'color--pause': active === 0,\n 'color--green-haze': active > 0,\n });\n\n const pauseNumberClass = cn('strong', {\n 'color--pause': pause === 0,\n 'color--light-red': pause > 0,\n });\n\n const isEmptyEntitys\n = (isEntityAndCounter\n && (!entityAndCounter?.counter || entityAndCounter.counter === 0))\n || (!isEntityAndCounter && (warnLeft || !merchants));\n\n const advancedTagClass = cn('advanced-tags', {\n 'advanced-tags--error': isEmptyEntitys,\n }, className);\n\n const onWarningClick = (warn: string): void => {\n setIsOpen(true);\n setClickedWarning(warn);\n };\n\n const handleClickOutside = (event: MouseEvent | Event): void => {\n if (hintRef.current && !hintRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n useEffect(() => {\n document.addEventListener('click', handleClickOutside, true);\n return () => {\n document.removeEventListener('click', handleClickOutside, true);\n };\n }, []);\n\n if (!item) return null;\n\n const renderClassicTag = (): JSX.Element => (\n <div data-testid={testId} className={advancedTagClass} ref={hintRef}>\n {warnLeft && (\n <div\n data-testid={`${testId}-left`}\n className=\"advanced-tags--warning-icon-wrapper\"\n onMouseEnter={() => onWarningClick('warnLeft')}\n onMouseLeave={() => setIsOpen(false)}\n >\n <AlertTriangle\n width={16}\n height={16}\n className=\"advanced-tags--warning-icon mr5\"\n />\n </div>\n )}\n\n {labelLeft && <span className=\"mr5\">{labelLeft}</span>}\n {labelRight && <span>{labelRight}</span>}\n\n {type !== 'simple' && <span className=\"ml5 mr5\">|</span>}\n {type !== 'simple' && (\n <div className=\"df\">\n <span className={activeNumberClass}>{active}</span>\n <span className=\"strong color--pause\">/</span>\n <span className={pauseNumberClass}>{pause}</span>\n </div>\n )}\n\n {type !== 'simple' && <span className=\"ml5 mr5\">|</span>}\n\n {merchants\n ? (\n <span>{merchants}</span>\n )\n : (\n type !== 'simple' && (\n <div\n data-testid={`${testId}-right`}\n className=\"advanced-tags--warning-icon-wrapper\"\n onMouseEnter={() => onWarningClick('warnRight')}\n onMouseLeave={() => setIsOpen(false)}\n >\n <AlertTriangle\n width={16}\n height={16}\n className=\"advanced-tags--warning-icon\"\n />\n </div>\n )\n )}\n\n {isOpen && warnLeftMsg && clickedWarning === 'warnLeft' && (\n <span\n className={cn(\n 'advanced-tags__warn-text advanced-tags__warn-text--warnLeft',\n { 'advanced-tags__warn-text--warnLeft--to-top': toTop },\n )}\n >\n {warnLeftMsg}\n </span>\n )}\n\n {isOpen && warnRightMsg && clickedWarning === 'warnRight' && (\n <span\n className={cn(\n 'advanced-tags__warn-text',\n 'advanced-tags__warn-text--warnRight',\n { 'advanced-tags__warn-text--warnRight--to-top': toTop },\n )}\n >\n {warnRightMsg}\n </span>\n )}\n </div>\n );\n\n const renderWithEntityAndCounterTag = (): JSX.Element => {\n const isNullcounter = entityAndCounter?.counter?.toString() === '0';\n\n return (\n <div data-testid={testId} className={advancedTagClass} ref={hintRef}>\n {isNullcounter && (\n <div\n data-testid={`${testId}-left`}\n className=\"advanced-tags--warning-icon-wrapper\"\n onMouseEnter={() => onWarningClick('warnLeft')}\n onMouseLeave={() => setIsOpen(false)}\n >\n <AlertTriangle\n width={16}\n height={16}\n className=\"advanced-tags--warning-icon mr5\"\n />\n </div>\n )}\n\n {isOpen\n && entityAndCounter?.nullCounterMessage\n && clickedWarning === 'warnLeft' && (\n <span\n className={cn(\n 'advanced-tags__warn-text advanced-tags__warn-text--warnLeft',\n { 'advanced-tags__warn-text--warnLeft--to-top': toTop },\n )}\n >\n {entityAndCounter.nullCounterMessage}\n </span>\n )}\n\n {entityAndCounter?.title && (\n <span className=\"mr5\">{entityAndCounter.title}</span>\n )}\n\n <div\n className={cn('advanced-tags__counter', {\n 'advanced-tags__counter--null': isNullcounter,\n 'advanced-tags__counter--bold': !isNullcounter,\n })}\n >\n {entityAndCounter?.counter}\n </div>\n </div>\n );\n };\n\n return !isEntityAndCounter ? renderClassicTag() : renderWithEntityAndCounterTag();\n};\n\nexport default AdvTag;\n"],"mappings":";;;;;;AAUA,IAAM,UAAkC,EACtC,MACA,WACA,SAAS,WACT,QAAQ,WACJ;CACJ,MAAM,EACJ,WACA,YACA,SAAS,GACT,QAAQ,GACR,WACA,UACA,aACA,cACA,qBAAqB,OACrB,mBAAmB;EACjB,oBAAoB;EACpB,OAAO;EACP,SAAS;CACX,GACA,SACE;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAkB,KAAK;CACnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB,EAAE;CAC/D,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,oBAAoB,GAAG,UAAU;EACrC,gBAAgB,WAAW;EAC3B,qBAAqB,SAAS;CAChC,CAAC;CAED,MAAM,mBAAmB,GAAG,UAAU;EACpC,gBAAgB,UAAU;EAC1B,oBAAoB,QAAQ;CAC9B,CAAC;
|
|
1
|
+
{"version":3,"file":"AdvTag.js","names":[],"sources":["../../../../../src/Atomic/UI/AdvancedTag/AdvTag.tsx"],"sourcesContent":["import type { MouseEvent } from 'react';\nimport type { IAdvTagProps } from './AdvancedTags.interface';\n\nimport cn from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { AlertTriangle } from 'react-feather';\n\nimport './AdvancedTags.scss';\n\nconst AdvTag: React.FC<IAdvTagProps> = ({\n item,\n className,\n testId = 'adv-tag',\n toTop = true,\n}) => {\n const {\n labelLeft,\n labelRight,\n active = 0,\n pause = 0,\n merchants,\n warnLeft,\n warnLeftMsg,\n warnRightMsg,\n isEntityAndCounter = false,\n entityAndCounter = {\n nullCounterMessage: '',\n title: '',\n counter: null,\n },\n type,\n } = item;\n\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [clickedWarning, setClickedWarning] = useState<string>('');\n const hintRef = useRef<HTMLDivElement>(null);\n\n const activeNumberClass = cn('strong', {\n 'color--pause': active === 0,\n 'color--green-haze': active > 0,\n });\n\n const pauseNumberClass = cn('strong', {\n 'color--pause': pause === 0,\n 'color--light-red': pause > 0,\n });\n\n const isEmptyEntitys\n = (isEntityAndCounter\n && (!entityAndCounter?.counter || entityAndCounter.counter === 0))\n || (!isEntityAndCounter && (warnLeft || !merchants));\n\n const advancedTagClass = cn('advanced-tags', {\n 'advanced-tags--error': isEmptyEntitys,\n }, className);\n\n const onWarningClick = (warn: string): void => {\n setIsOpen(true);\n setClickedWarning(warn);\n };\n\n const handleClickOutside = (event: MouseEvent | Event): void => {\n if (hintRef.current && !hintRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n useEffect(() => {\n document.addEventListener('click', handleClickOutside, true);\n return () => {\n document.removeEventListener('click', handleClickOutside, true);\n };\n }, []);\n\n if (!item) return null;\n\n const renderClassicTag = (): JSX.Element => (\n <div data-testid={testId} className={advancedTagClass} ref={hintRef}>\n {warnLeft && (\n <div\n data-testid={`${testId}-left`}\n className=\"advanced-tags--warning-icon-wrapper\"\n onMouseEnter={() => onWarningClick('warnLeft')}\n onMouseLeave={() => setIsOpen(false)}\n >\n <AlertTriangle\n width={16}\n height={16}\n className=\"advanced-tags--warning-icon mr5\"\n />\n </div>\n )}\n\n {labelLeft && <span className=\"mr5\">{labelLeft}</span>}\n {labelRight && <span>{labelRight}</span>}\n\n {type !== 'simple' && <span className=\"ml5 mr5\">|</span>}\n {type !== 'simple' && (\n <div className=\"df\">\n <span className={activeNumberClass}>{active}</span>\n <span className=\"strong color--pause\">/</span>\n <span className={pauseNumberClass}>{pause}</span>\n </div>\n )}\n\n {type !== 'simple' && <span className=\"ml5 mr5\">|</span>}\n\n {merchants\n ? (\n <span>{merchants}</span>\n )\n : (\n type !== 'simple' && (\n <div\n data-testid={`${testId}-right`}\n className=\"advanced-tags--warning-icon-wrapper\"\n onMouseEnter={() => onWarningClick('warnRight')}\n onMouseLeave={() => setIsOpen(false)}\n >\n <AlertTriangle\n width={16}\n height={16}\n className=\"advanced-tags--warning-icon\"\n />\n </div>\n )\n )}\n\n {isOpen && warnLeftMsg && clickedWarning === 'warnLeft' && (\n <span\n className={cn(\n 'advanced-tags__warn-text advanced-tags__warn-text--warnLeft',\n { 'advanced-tags__warn-text--warnLeft--to-top': toTop },\n )}\n >\n {warnLeftMsg}\n </span>\n )}\n\n {isOpen && warnRightMsg && clickedWarning === 'warnRight' && (\n <span\n className={cn(\n 'advanced-tags__warn-text',\n 'advanced-tags__warn-text--warnRight',\n { 'advanced-tags__warn-text--warnRight--to-top': toTop },\n )}\n >\n {warnRightMsg}\n </span>\n )}\n </div>\n );\n\n const renderWithEntityAndCounterTag = (): JSX.Element => {\n const isNullcounter = entityAndCounter?.counter?.toString() === '0';\n\n return (\n <div data-testid={testId} className={advancedTagClass} ref={hintRef}>\n {isNullcounter && (\n <div\n data-testid={`${testId}-left`}\n className=\"advanced-tags--warning-icon-wrapper\"\n onMouseEnter={() => onWarningClick('warnLeft')}\n onMouseLeave={() => setIsOpen(false)}\n >\n <AlertTriangle\n width={16}\n height={16}\n className=\"advanced-tags--warning-icon mr5\"\n />\n </div>\n )}\n\n {isOpen\n && entityAndCounter?.nullCounterMessage\n && clickedWarning === 'warnLeft' && (\n <span\n className={cn(\n 'advanced-tags__warn-text advanced-tags__warn-text--warnLeft',\n { 'advanced-tags__warn-text--warnLeft--to-top': toTop },\n )}\n >\n {entityAndCounter.nullCounterMessage}\n </span>\n )}\n\n {entityAndCounter?.title && (\n <span className=\"mr5\">{entityAndCounter.title}</span>\n )}\n\n <div\n className={cn('advanced-tags__counter', {\n 'advanced-tags__counter--null': isNullcounter,\n 'advanced-tags__counter--bold': !isNullcounter,\n })}\n >\n {entityAndCounter?.counter}\n </div>\n </div>\n );\n };\n\n return !isEntityAndCounter ? renderClassicTag() : renderWithEntityAndCounterTag();\n};\n\nexport default AdvTag;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdvancedTags.js","names":[],"sources":["../../../../../src/Atomic/UI/AdvancedTag/AdvancedTags.tsx"],"sourcesContent":["import type { IAdvancedTagsItemProps, IAdvancedTagsProps } from './AdvancedTags.interface';\n\nimport cn from 'classnames';\n\nimport React, { useState } from 'react';\nimport Tag from '../Tag/Tag';\nimport AdvTag from './AdvTag';\n\nconst AdvancedTags: React.FC<IAdvancedTagsProps> = ({\n items,\n noItemsTagLabel,\n className,\n testId = 'advanced-tag-test',\n toTop = true,\n}) => {\n const [showedItems, setShowedItems] = useState<IAdvancedTagsItemProps[]>(items.slice(0, 2));\n\n const [showMore, setShowMore] = useState<boolean>(true);\n\n const onShowMoreClick = (): void => {\n setShowedItems(showMore ? items : items.slice(0, 2));\n setShowMore(!showMore);\n };\n\n if ((!items || !items.length) && noItemsTagLabel) {\n return (\n <Tag\n label={noItemsTagLabel?.toString()}\n className={cn(className, 'tag-warn')}\n />\n );\n }\n\n if ((!items || !items.length) && !noItemsTagLabel) return null;\n\n return (\n <div data-testid={testId} className={cn(className, 'j4 wrap')}>\n {showedItems.map((item, index) => {\n if (!item) return null;\n return (\n <AdvTag\n toTop={toTop}\n key={index}\n item={item}\n testId={`${testId}-item-${index}`}\n />\n )\n })}\n\n {items.length >= 3 && (\n <span\n data-testid={`${testId}-showMore`}\n onClick={onShowMoreClick}\n className=\"advanced-tags advanced-tags--showMore\"\n >\n {showMore ? `+${items.length - showedItems.length}` : '...'}\n </span>\n )}\n </div>\n );\n};\n\nexport default AdvancedTags;\n"],"mappings":";;;;;;AAQA,IAAM,gBAA8C,EAClD,OACA,iBACA,WACA,SAAS,qBACT,QAAQ,WACJ;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAmC,MAAM,MAAM,GAAG,CAAC,CAAC;CAE1F,MAAM,CAAC,UAAU,eAAe,SAAkB,IAAI;CAEtD,MAAM,wBAA8B;EAClC,eAAe,WAAW,QAAQ,MAAM,MAAM,GAAG,CAAC,CAAC;EACnD,YAAY,CAAC,QAAQ;CACvB;CAEA,KAAK,CAAC,SAAS,CAAC,MAAM,WAAW,iBAC/B,OACE,oBAAC,KAAD;EACE,OAAO,iBAAiB,SAAS;EACjC,WAAW,GAAG,WAAW,UAAU;CACpC,CAAA;CAIL,KAAK,CAAC,SAAS,CAAC,MAAM,WAAW,CAAC,iBAAiB,OAAO;CAE1D,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,WAAW,SAAS;
|
|
1
|
+
{"version":3,"file":"AdvancedTags.js","names":[],"sources":["../../../../../src/Atomic/UI/AdvancedTag/AdvancedTags.tsx"],"sourcesContent":["import type { IAdvancedTagsItemProps, IAdvancedTagsProps } from './AdvancedTags.interface';\n\nimport cn from 'classnames';\n\nimport React, { useState } from 'react';\nimport Tag from '../Tag/Tag';\nimport AdvTag from './AdvTag';\n\nconst AdvancedTags: React.FC<IAdvancedTagsProps> = ({\n items,\n noItemsTagLabel,\n className,\n testId = 'advanced-tag-test',\n toTop = true,\n}) => {\n const [showedItems, setShowedItems] = useState<IAdvancedTagsItemProps[]>(items.slice(0, 2));\n\n const [showMore, setShowMore] = useState<boolean>(true);\n\n const onShowMoreClick = (): void => {\n setShowedItems(showMore ? items : items.slice(0, 2));\n setShowMore(!showMore);\n };\n\n if ((!items || !items.length) && noItemsTagLabel) {\n return (\n <Tag\n label={noItemsTagLabel?.toString()}\n className={cn(className, 'tag-warn')}\n />\n );\n }\n\n if ((!items || !items.length) && !noItemsTagLabel) return null;\n\n return (\n <div data-testid={testId} className={cn(className, 'j4 wrap')}>\n {showedItems.map((item, index) => {\n if (!item) return null;\n return (\n <AdvTag\n toTop={toTop}\n key={index}\n item={item}\n testId={`${testId}-item-${index}`}\n />\n )\n })}\n\n {items.length >= 3 && (\n <span\n data-testid={`${testId}-showMore`}\n onClick={onShowMoreClick}\n className=\"advanced-tags advanced-tags--showMore\"\n >\n {showMore ? `+${items.length - showedItems.length}` : '...'}\n </span>\n )}\n </div>\n );\n};\n\nexport default AdvancedTags;\n"],"mappings":";;;;;;AAQA,IAAM,gBAA8C,EAClD,OACA,iBACA,WACA,SAAS,qBACT,QAAQ,WACJ;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAmC,MAAM,MAAM,GAAG,CAAC,CAAC;CAE1F,MAAM,CAAC,UAAU,eAAe,SAAkB,IAAI;CAEtD,MAAM,wBAA8B;EAClC,eAAe,WAAW,QAAQ,MAAM,MAAM,GAAG,CAAC,CAAC;EACnD,YAAY,CAAC,QAAQ;CACvB;CAEA,KAAK,CAAC,SAAS,CAAC,MAAM,WAAW,iBAC/B,OACE,oBAAC,KAAD;EACE,OAAO,iBAAiB,SAAS;EACjC,WAAW,GAAG,WAAW,UAAU;CACpC,CAAA;CAIL,KAAK,CAAC,SAAS,CAAC,MAAM,WAAW,CAAC,iBAAiB,OAAO;CAE1D,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,WAAW,SAAS;EAA5D,UAAA,CACG,YAAY,KAAK,MAAM,UAAU;GAChC,IAAI,CAAC,MAAM,OAAO;GAClB,OACE,oBAAC,QAAD;IACS;IAED;IACN,QAAQ,GAAG,OAAO,QAAQ;GAC3B,GAHM,KAGN;EAEL,CAAC,GAEA,MAAM,UAAU,KACf,oBAAC,QAAD;GACE,eAAa,GAAG,OAAO;GACvB,SAAS;GACT,WAAU;GAET,UAAA,WAAW,IAAI,MAAM,SAAS,YAAY,WAAW;EAClD,CAAA,CAEL;;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","names":[],"sources":["../../../../../src/Atomic/UI/Alert/Alert.tsx"],"sourcesContent":["import type { IAlertProps } from './Alert.interface';\n\nimport cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport { X } from 'react-feather';\nimport Spinner from '../../Layout/Spinner/Spinner';\nimport Button from '../Button/Button';\n\nimport './Alert.scss';\n\nconst Alert: React.FC<IAlertProps> = ({\n message,\n icon,\n className,\n children,\n noDismiss,\n testId = 'alert',\n isHidden = false,\n variant = 'warning',\n isLoading,\n buttonParams,\n}) => {\n const [onClose, setOnClose] = useState(false);\n\n const renderActionsBlock = (): JSX.Element | null => {\n if (buttonParams) {\n return (\n <div className=\"j6 alert__btns-box\">\n <Button {...buttonParams} />\n {!noDismiss && (\n <div className=\"alert__close-btn\">\n <X data-testid={`${testId}-close`} onClick={() => setOnClose(!onClose)} />\n </div>\n )}\n </div>\n );\n }\n\n if (!noDismiss) {\n return (\n <div className=\"alert__close-btn\">\n <X data-testid={`${testId}-close`} onClick={() => setOnClose(!onClose)} />\n </div>\n );\n }\n\n else {\n return null;\n }\n };\n\n return (\n <div\n data-testid={testId}\n className={cn(className, { hidden: onClose }, `alert alert--${variant}`, {\n 'hidden': isHidden,\n 'alert--loading': isLoading,\n })}\n >\n <div className=\"alert__icon-text-box j4\">\n {icon}\n <div>{children || message}</div>\n </div>\n {renderActionsBlock()}\n {isLoading && <Spinner size=\"small\" testId=\"loader-box\" />}\n </div>\n );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAWA,IAAM,SAAgC,EACpC,SACA,MACA,WACA,UACA,WACA,SAAS,SACT,WAAW,OACX,UAAU,WACV,WACA,mBACI;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,2BAA+C;EACnD,IAAI,cACF,OACE,qBAAC,OAAD;GAAK,WAAU;
|
|
1
|
+
{"version":3,"file":"Alert.js","names":[],"sources":["../../../../../src/Atomic/UI/Alert/Alert.tsx"],"sourcesContent":["import type { IAlertProps } from './Alert.interface';\n\nimport cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport { X } from 'react-feather';\nimport Spinner from '../../Layout/Spinner/Spinner';\nimport Button from '../Button/Button';\n\nimport './Alert.scss';\n\nconst Alert: React.FC<IAlertProps> = ({\n message,\n icon,\n className,\n children,\n noDismiss,\n testId = 'alert',\n isHidden = false,\n variant = 'warning',\n isLoading,\n buttonParams,\n}) => {\n const [onClose, setOnClose] = useState(false);\n\n const renderActionsBlock = (): JSX.Element | null => {\n if (buttonParams) {\n return (\n <div className=\"j6 alert__btns-box\">\n <Button {...buttonParams} />\n {!noDismiss && (\n <div className=\"alert__close-btn\">\n <X data-testid={`${testId}-close`} onClick={() => setOnClose(!onClose)} />\n </div>\n )}\n </div>\n );\n }\n\n if (!noDismiss) {\n return (\n <div className=\"alert__close-btn\">\n <X data-testid={`${testId}-close`} onClick={() => setOnClose(!onClose)} />\n </div>\n );\n }\n\n else {\n return null;\n }\n };\n\n return (\n <div\n data-testid={testId}\n className={cn(className, { hidden: onClose }, `alert alert--${variant}`, {\n 'hidden': isHidden,\n 'alert--loading': isLoading,\n })}\n >\n <div className=\"alert__icon-text-box j4\">\n {icon}\n <div>{children || message}</div>\n </div>\n {renderActionsBlock()}\n {isLoading && <Spinner size=\"small\" testId=\"loader-box\" />}\n </div>\n );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAWA,IAAM,SAAgC,EACpC,SACA,MACA,WACA,UACA,WACA,SAAS,SACT,WAAW,OACX,UAAU,WACV,WACA,mBACI;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,2BAA+C;EACnD,IAAI,cACF,OACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD,EAAQ,GAAI,aAAe,CAAA,GAC1B,CAAC,aACA,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,GAAD;KAAG,eAAa,GAAG,OAAO;KAAS,eAAe,WAAW,CAAC,OAAO;IAAI,CAAA;GACtE,CAAA,CAEJ;;EAIT,IAAI,CAAC,WACH,OACE,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,GAAD;IAAG,eAAa,GAAG,OAAO;IAAS,eAAe,WAAW,CAAC,OAAO;GAAI,CAAA;EACtE,CAAA;OAKP,OAAO;CAEX;CAEA,OACE,qBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAAG,WAAW,EAAE,QAAQ,QAAQ,GAAG,gBAAgB,WAAW;GACvE,UAAU;GACV,kBAAkB;EACpB,CAAC;EALH,UAAA;GAOE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,MACD,oBAAC,OAAD,EAAA,UAAM,YAAY,QAAa,CAAA,CAC5B;;GACJ,mBAAmB;GACnB,aAAa,oBAAC,SAAD;IAAS,MAAK;IAAQ,QAAO;GAAc,CAAA;EACtD;;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Arrow.js","names":[],"sources":["../../../../../src/Atomic/UI/Arrow/Arrow.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport type { IArrowProps } from './Arrow.interface';\nimport cn from 'classnames';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { getStyles } from '../../../Functions/utils';\nimport './Arrow.scss';\n\nfunction Arrow({ type, className, onClick, disabled, testId, isAlt }: IArrowProps): ReactElement | null {\n const ref = useRef<HTMLDivElement>(null);\n const [color, setColor] = useState<string>('currentColor');\n\n useEffect(() => {\n if (ref.current) {\n setColor(getStyles(ref.current, 'color') as string);\n }\n }, [ref.current]);\n if (!type || (type !== 'left' && type !== 'right')) return null;\n\n function renderSVG(): ReactNode {\n if (type === 'left') {\n if (isAlt) {\n return (\n <svg\n data-testid={testId}\n version=\"1.1\"\n id=\"Layer_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M12.7,8H3.3\"\n stroke={color}\n fill=\"none\"\n strokeWidth={1.3333}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M8,3.3L3.3,8L8,12.7\"\n stroke={color}\n fill=\"none\"\n strokeWidth={1.3333}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n }\n return (\n <svg\n data-testid={testId}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n }\n if (isAlt) {\n return (\n <svg\n data-testid={testId}\n id=\"Layer_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M3.3,8h9.3\"\n stroke={color}\n fill=\"none\"\n strokeWidth={1.3333}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M8,3.3L12.7,8L8,12.7\"\n stroke={color}\n fill=\"none\"\n strokeWidth={1.3333}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n }\n return (\n <svg\n data-testid={testId}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n }\n\n return (\n <div\n data-testid={`arrow--key-${testId}--type-${type}`}\n ref={ref}\n className={cn('arrow', `arrow_${type}`, className, {\n arrow_disabled: disabled,\n })}\n onClick={onClick}\n >\n {renderSVG()}\n </div>\n );\n}\n\nexport default Arrow;\n"],"mappings":";;;;;;AAUA,SAAS,MAAM,EAAE,MAAM,WAAW,SAAS,UAAU,QAAQ,SAA2C;CACtG,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,CAAC,OAAO,YAAY,SAAiB,cAAc;CAEzD,gBAAgB;EACd,IAAI,IAAI,SACN,SAAS,UAAU,IAAI,SAAS,OAAO,CAAW;CAEtD,GAAG,CAAC,IAAI,OAAO,CAAC;CAChB,IAAI,CAAC,QAAS,SAAS,UAAU,SAAS,SAAU,OAAO;CAE3D,SAAS,YAAuB;EAC9B,IAAI,SAAS,QAAQ;GACnB,IAAI,OACF,OACE,qBAAC,OAAD;IACE,eAAa;IACb,SAAQ;IACR,IAAG;IACH,OAAM;IACN,OAAM;IACN,QAAO;IACP,SAAQ;
|
|
1
|
+
{"version":3,"file":"Arrow.js","names":[],"sources":["../../../../../src/Atomic/UI/Arrow/Arrow.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport type { IArrowProps } from './Arrow.interface';\nimport cn from 'classnames';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { getStyles } from '../../../Functions/utils';\nimport './Arrow.scss';\n\nfunction Arrow({ type, className, onClick, disabled, testId, isAlt }: IArrowProps): ReactElement | null {\n const ref = useRef<HTMLDivElement>(null);\n const [color, setColor] = useState<string>('currentColor');\n\n useEffect(() => {\n if (ref.current) {\n setColor(getStyles(ref.current, 'color') as string);\n }\n }, [ref.current]);\n if (!type || (type !== 'left' && type !== 'right')) return null;\n\n function renderSVG(): ReactNode {\n if (type === 'left') {\n if (isAlt) {\n return (\n <svg\n data-testid={testId}\n version=\"1.1\"\n id=\"Layer_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M12.7,8H3.3\"\n stroke={color}\n fill=\"none\"\n strokeWidth={1.3333}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M8,3.3L3.3,8L8,12.7\"\n stroke={color}\n fill=\"none\"\n strokeWidth={1.3333}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n }\n return (\n <svg\n data-testid={testId}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n }\n if (isAlt) {\n return (\n <svg\n data-testid={testId}\n id=\"Layer_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M3.3,8h9.3\"\n stroke={color}\n fill=\"none\"\n strokeWidth={1.3333}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M8,3.3L12.7,8L8,12.7\"\n stroke={color}\n fill=\"none\"\n strokeWidth={1.3333}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n }\n return (\n <svg\n data-testid={testId}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n }\n\n return (\n <div\n data-testid={`arrow--key-${testId}--type-${type}`}\n ref={ref}\n className={cn('arrow', `arrow_${type}`, className, {\n arrow_disabled: disabled,\n })}\n onClick={onClick}\n >\n {renderSVG()}\n </div>\n );\n}\n\nexport default Arrow;\n"],"mappings":";;;;;;AAUA,SAAS,MAAM,EAAE,MAAM,WAAW,SAAS,UAAU,QAAQ,SAA2C;CACtG,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,CAAC,OAAO,YAAY,SAAiB,cAAc;CAEzD,gBAAgB;EACd,IAAI,IAAI,SACN,SAAS,UAAU,IAAI,SAAS,OAAO,CAAW;CAEtD,GAAG,CAAC,IAAI,OAAO,CAAC;CAChB,IAAI,CAAC,QAAS,SAAS,UAAU,SAAS,SAAU,OAAO;CAE3D,SAAS,YAAuB;EAC9B,IAAI,SAAS,QAAQ;GACnB,IAAI,OACF,OACE,qBAAC,OAAD;IACE,eAAa;IACb,SAAQ;IACR,IAAG;IACH,OAAM;IACN,OAAM;IACN,QAAO;IACP,SAAQ;IAPV,UAAA,CASE,oBAAC,QAAD;KACE,GAAE;KACF,QAAQ;KACR,MAAK;KACL,aAAa;KACb,eAAc;KACd,gBAAe;IAChB,CAAA,GACD,oBAAC,QAAD;KACE,GAAE;KACF,QAAQ;KACR,MAAK;KACL,aAAa;KACb,eAAc;KACd,gBAAe;IAChB,CAAA,CACE;;GAGT,OACE,oBAAC,OAAD;IACE,eAAa;IACb,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,OAAM;IAEN,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAQ;KACR,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA;EAET;EACA,IAAI,OACF,OACE,qBAAC,OAAD;GACE,eAAa;GACb,IAAG;GACH,OAAM;GACN,OAAM;GACN,QAAO;GACP,SAAQ;GANV,UAAA,CAQE,oBAAC,QAAD;IACE,GAAE;IACF,QAAQ;IACR,MAAK;IACL,aAAa;IACb,eAAc;IACd,gBAAe;GAChB,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,QAAQ;IACR,MAAK;IACL,aAAa;IACb,eAAc;IACd,gBAAe;GAChB,CAAA,CACE;;EAGT,OACE,oBAAC,OAAD;GACE,eAAa;GACb,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;GAEN,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA;CAET;CAEA,OACE,oBAAC,OAAD;EACE,eAAa,cAAc,OAAO,SAAS;EACtC;EACL,WAAW,GAAG,SAAS,SAAS,QAAQ,WAAW,EACjD,gBAAgB,SAClB,CAAC;EACQ;EAER,UAAA,UAAU;CACR,CAAA;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":[],"sources":["../../../../../src/Atomic/UI/Button/Button.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IUniProps } from '../../../types/base.interface';\nimport cn from 'classnames';\n\nimport './Button.scss';\n\nconst RC = 'button';\n\nexport type TButtonVariant = 'primary' | 'ellipse-apply' | 'ellipse-cancel' | string;\n\ninterface IProps extends IUniProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'disabled'> {\n label?: string;\n onClick?: () => void;\n disabled?: boolean;\n icon?: ReactNode;\n children?: ReactNode;\n style?: CSSProperties;\n noIcon?: boolean;\n isIconRight?: boolean;\n tabIndex?: number;\n variant?: TButtonVariant;\n isTextEllipsis?: boolean;\n}\n\nconst Button: React.FC<IProps> = ({\n label,\n onClick,\n disabled,\n icon,\n className,\n children,\n style,\n noIcon,\n isIconRight,\n testId = 'button',\n tabIndex = 0,\n variant = 'primary',\n isTextEllipsis = false,\n ...props\n}) => {\n const noRenderIcon = noIcon || variant === 'ellipse-apply' || variant === 'ellipse-cancel';\n\n return (\n <button\n data-testid={testId}\n tabIndex={tabIndex}\n style={style}\n className={cn(\n RC,\n {\n [`${RC}_${variant}`]: variant,\n 'button_icon-left': icon && !isIconRight,\n 'button_icon-right': icon && isIconRight,\n },\n className,\n )}\n onClick={onClick}\n disabled={disabled}\n type=\"button\"\n {...props}\n\n >\n {!noRenderIcon && icon}\n {label && <div className={cn('button__text', { 'text-ellipsis': isTextEllipsis })}>{label}</div>}\n {!label && children ? children : null}\n </button>\n );\n};\n\nexport default Button;\n"],"mappings":";;;;AAMA,IAAM,KAAK;AAkBX,IAAM,UAA4B,EAChC,OACA,SACA,UACA,MACA,WACA,UACA,OACA,QACA,aACA,SAAS,UACT,WAAW,GACX,UAAU,WACV,iBAAiB,OACjB,GAAG,YACC;CACJ,MAAM,eAAe,UAAU,YAAY,mBAAmB,YAAY;CAE1E,OACE,qBAAC,UAAD;EACE,eAAa;EACH;EACH;EACP,WAAW,GACT,IACA;IACG,GAAG,GAAG,GAAG,YAAY;GACtB,oBAAoB,QAAQ,CAAC;GAC7B,qBAAqB,QAAQ;EAC/B,GACA,SACF;EACS;EACC;EACV,MAAK;EACL,GAAI;
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["../../../../../src/Atomic/UI/Button/Button.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IUniProps } from '../../../types/base.interface';\nimport cn from 'classnames';\n\nimport './Button.scss';\n\nconst RC = 'button';\n\nexport type TButtonVariant = 'primary' | 'ellipse-apply' | 'ellipse-cancel' | string;\n\ninterface IProps extends IUniProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'disabled'> {\n label?: string;\n onClick?: () => void;\n disabled?: boolean;\n icon?: ReactNode;\n children?: ReactNode;\n style?: CSSProperties;\n noIcon?: boolean;\n isIconRight?: boolean;\n tabIndex?: number;\n variant?: TButtonVariant;\n isTextEllipsis?: boolean;\n}\n\nconst Button: React.FC<IProps> = ({\n label,\n onClick,\n disabled,\n icon,\n className,\n children,\n style,\n noIcon,\n isIconRight,\n testId = 'button',\n tabIndex = 0,\n variant = 'primary',\n isTextEllipsis = false,\n ...props\n}) => {\n const noRenderIcon = noIcon || variant === 'ellipse-apply' || variant === 'ellipse-cancel';\n\n return (\n <button\n data-testid={testId}\n tabIndex={tabIndex}\n style={style}\n className={cn(\n RC,\n {\n [`${RC}_${variant}`]: variant,\n 'button_icon-left': icon && !isIconRight,\n 'button_icon-right': icon && isIconRight,\n },\n className,\n )}\n onClick={onClick}\n disabled={disabled}\n type=\"button\"\n {...props}\n\n >\n {!noRenderIcon && icon}\n {label && <div className={cn('button__text', { 'text-ellipsis': isTextEllipsis })}>{label}</div>}\n {!label && children ? children : null}\n </button>\n );\n};\n\nexport default Button;\n"],"mappings":";;;;AAMA,IAAM,KAAK;AAkBX,IAAM,UAA4B,EAChC,OACA,SACA,UACA,MACA,WACA,UACA,OACA,QACA,aACA,SAAS,UACT,WAAW,GACX,UAAU,WACV,iBAAiB,OACjB,GAAG,YACC;CACJ,MAAM,eAAe,UAAU,YAAY,mBAAmB,YAAY;CAE1E,OACE,qBAAC,UAAD;EACE,eAAa;EACH;EACH;EACP,WAAW,GACT,IACA;IACG,GAAG,GAAG,GAAG,YAAY;GACtB,oBAAoB,QAAQ,CAAC;GAC7B,qBAAqB,QAAQ;EAC/B,GACA,SACF;EACS;EACC;EACV,MAAK;EACL,GAAI;EAhBN,UAAA;GAmBG,CAAC,gBAAgB;GACjB,SAAS,oBAAC,OAAD;IAAK,WAAW,GAAG,gBAAgB,EAAE,iBAAiB,eAAe,CAAC;IAAI,UAAA;GAAW,CAAA;GAC9F,CAAC,SAAS,WAAW,WAAW;EAC3B;;AAEZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonsBar.js","names":[],"sources":["../../../../../src/Atomic/UI/ButtonsBar/ButtonsBar.tsx"],"sourcesContent":["import type { IButtonsBarProps } from './ButtonsBar.interface';\nimport cn from 'classnames';\nimport React from 'react';\n\nimport { Link } from 'react-router-dom';\n\nimport Button from '../Button/Button';\n\nimport './ButtonsBar.scss';\n\nconst ButtonsBar: React.FC<IButtonsBarProps> = ({\n className,\n rejectBtnLabel,\n rejectBtnIcon,\n isRejectBtnIconRight,\n rejectBtnVariant,\n rejectBtnClass,\n isRejectBtnDisabled,\n rejectLink,\n onReject,\n confirmBtnLabel,\n confirmBtnIcon,\n isConfirmBtnIconRight,\n confirmBtnVariant,\n confirmBtnClass,\n isConfirmBtnDisabled,\n onConfirm,\n testIdFirstBtn = 'button-bar-first-item',\n testIdSecondBtn = 'button-bar-second-item',\n}) => {\n return (\n <div className={cn('button-bar', className)}>\n {rejectLink\n ? (\n <Link className=\"text-decoration-none\" to={rejectLink}>\n <Button\n testId={testIdFirstBtn}\n label={rejectBtnLabel}\n variant={rejectBtnVariant}\n onClick={onReject}\n disabled={isRejectBtnDisabled}\n icon={rejectBtnIcon}\n isIconRight={isRejectBtnIconRight}\n className={cn(rejectBtnClass, { mr5: confirmBtnLabel })}\n />\n </Link>\n )\n : (\n <Button\n testId={testIdFirstBtn}\n label={rejectBtnLabel}\n variant={rejectBtnVariant}\n onClick={onReject}\n disabled={isRejectBtnDisabled}\n icon={rejectBtnIcon}\n isIconRight={isRejectBtnIconRight}\n className={cn(rejectBtnClass, { mr5: confirmBtnLabel })}\n />\n )}\n\n <Button\n testId={testIdSecondBtn}\n label={confirmBtnLabel}\n variant={confirmBtnVariant}\n onClick={onConfirm}\n disabled={isConfirmBtnDisabled}\n icon={confirmBtnIcon}\n isIconRight={isConfirmBtnIconRight}\n className={confirmBtnClass}\n />\n </div>\n );\n};\n\nexport default ButtonsBar;\n"],"mappings":";;;;;;;AAUA,IAAM,cAA0C,EAC9C,WACA,gBACA,eACA,sBACA,kBACA,gBACA,qBACA,YACA,UACA,iBACA,gBACA,uBACA,mBACA,iBACA,sBACA,WACA,iBAAiB,yBACjB,kBAAkB,+BACd;CACJ,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,SAAS;
|
|
1
|
+
{"version":3,"file":"ButtonsBar.js","names":[],"sources":["../../../../../src/Atomic/UI/ButtonsBar/ButtonsBar.tsx"],"sourcesContent":["import type { IButtonsBarProps } from './ButtonsBar.interface';\nimport cn from 'classnames';\nimport React from 'react';\n\nimport { Link } from 'react-router-dom';\n\nimport Button from '../Button/Button';\n\nimport './ButtonsBar.scss';\n\nconst ButtonsBar: React.FC<IButtonsBarProps> = ({\n className,\n rejectBtnLabel,\n rejectBtnIcon,\n isRejectBtnIconRight,\n rejectBtnVariant,\n rejectBtnClass,\n isRejectBtnDisabled,\n rejectLink,\n onReject,\n confirmBtnLabel,\n confirmBtnIcon,\n isConfirmBtnIconRight,\n confirmBtnVariant,\n confirmBtnClass,\n isConfirmBtnDisabled,\n onConfirm,\n testIdFirstBtn = 'button-bar-first-item',\n testIdSecondBtn = 'button-bar-second-item',\n}) => {\n return (\n <div className={cn('button-bar', className)}>\n {rejectLink\n ? (\n <Link className=\"text-decoration-none\" to={rejectLink}>\n <Button\n testId={testIdFirstBtn}\n label={rejectBtnLabel}\n variant={rejectBtnVariant}\n onClick={onReject}\n disabled={isRejectBtnDisabled}\n icon={rejectBtnIcon}\n isIconRight={isRejectBtnIconRight}\n className={cn(rejectBtnClass, { mr5: confirmBtnLabel })}\n />\n </Link>\n )\n : (\n <Button\n testId={testIdFirstBtn}\n label={rejectBtnLabel}\n variant={rejectBtnVariant}\n onClick={onReject}\n disabled={isRejectBtnDisabled}\n icon={rejectBtnIcon}\n isIconRight={isRejectBtnIconRight}\n className={cn(rejectBtnClass, { mr5: confirmBtnLabel })}\n />\n )}\n\n <Button\n testId={testIdSecondBtn}\n label={confirmBtnLabel}\n variant={confirmBtnVariant}\n onClick={onConfirm}\n disabled={isConfirmBtnDisabled}\n icon={confirmBtnIcon}\n isIconRight={isConfirmBtnIconRight}\n className={confirmBtnClass}\n />\n </div>\n );\n};\n\nexport default ButtonsBar;\n"],"mappings":";;;;;;;AAUA,IAAM,cAA0C,EAC9C,WACA,gBACA,eACA,sBACA,kBACA,gBACA,qBACA,YACA,UACA,iBACA,gBACA,uBACA,mBACA,iBACA,sBACA,WACA,iBAAiB,yBACjB,kBAAkB,+BACd;CACJ,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,SAAS;EAA1C,UAAA,CACG,aAEK,oBAAC,MAAD;GAAM,WAAU;GAAuB,IAAI;GACzC,UAAA,oBAAC,QAAD;IACE,QAAQ;IACR,OAAO;IACP,SAAS;IACT,SAAS;IACT,UAAU;IACV,MAAM;IACN,aAAa;IACb,WAAW,GAAG,gBAAgB,EAAE,KAAK,gBAAgB,CAAC;GACvD,CAAA;EACG,CAAA,IAGN,oBAAC,QAAD;GACE,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,UAAU;GACV,MAAM;GACN,aAAa;GACb,WAAW,GAAG,gBAAgB,EAAE,KAAK,gBAAgB,CAAC;EACvD,CAAA,GAGP,oBAAC,QAAD;GACE,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,UAAU;GACV,MAAM;GACN,aAAa;GACb,WAAW;EACZ,CAAA,CACE;;AAET"}
|
|
@@ -30,7 +30,8 @@ var Chart$1 = ({ className, initialModel, modelsForSwitch, setModelExternalValue
|
|
|
30
30
|
data
|
|
31
31
|
]);
|
|
32
32
|
const ChartComponent = useCallback((props) => {
|
|
33
|
-
const
|
|
33
|
+
const chartType = getChartTypeKey(model);
|
|
34
|
+
const Component = ChartComponents[chartType];
|
|
34
35
|
return React.createElement(Component, {
|
|
35
36
|
...props,
|
|
36
37
|
ref: chartRef
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.js","names":[],"sources":["../../../../../src/Atomic/UI/Chart/Chart.tsx"],"sourcesContent":["import type { IChartProps, INotLibraryOptions } from './Chart.interface';\n\nimport {\n BarElement,\n CategoryScale,\n Chart as ChartJS,\n Filler,\n LinearScale,\n LineElement,\n PointElement,\n Tooltip,\n} from 'chart.js';\n\nimport cn from 'classnames';\nimport React, {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport * as ChartComponents from 'react-chartjs-2';\n\nimport { clone } from '../../../Functions/utils';\nimport {\n COMPONENT_OPTIONS,\n DEFAULT_CHART_MODEL,\n ICON_MODELS,\n} from './partial/Chart.constants';\nimport ChartTypeSwitcherIcon from './partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon';\n\nimport {\n correctModelKey,\n getChartTypeKey,\n getNotLibraryOptionsOptions,\n getOptions,\n prepareData,\n} from './partial/utils';\n\nimport './Chart.scss';\n\ntype ChartComponentType = React.ComponentType<any>;\n\nconst RC = 'chart';\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n BarElement,\n PointElement,\n LineElement,\n Filler,\n Tooltip,\n);\n\nconst Chart: React.FC<IChartProps> = ({\n className,\n initialModel,\n modelsForSwitch,\n setModelExternalValue,\n description,\n customOptions,\n data,\n addToDatasets,\n modifyOptions,\n}) => {\n const { label, value } = description || {};\n\n const [model, setModel] = useState<string>(DEFAULT_CHART_MODEL);\n const [localData, setLocalData] = useState<any>();\n const chartRef = useRef<ChartJS | null>(null);\n const charContainertRef = useRef<HTMLDivElement>(null);\n\n const options = useMemo(\n () =>\n customOptions\n || (modifyOptions ? modifyOptions(getOptions(model)) : getOptions(model)),\n [customOptions, model, modifyOptions?.toString?.(), data],\n );\n\n const notLibraryOptionsOptions = useMemo(\n () =>\n customOptions\n ? customOptions?.notLibraryOptions\n : getNotLibraryOptionsOptions(model),\n [customOptions, model, data],\n );\n\n const ChartComponent = useCallback(\n (props: any) => {\n const chartType = getChartTypeKey(model);\n const Component = ChartComponents[chartType as keyof typeof ChartComponents] as ChartComponentType;\n\n return React.createElement(Component, { ...props, ref: chartRef });\n },\n [model],\n );\n\n const isExcludeDescription\n = COMPONENT_OPTIONS.disableDescriptionsFor.includes(model);\n const isExcludeChartTypeSwitcher\n = COMPONENT_OPTIONS.disableChartTypeSwitcherFor.includes(model);\n\n useLayoutEffect(() => {\n if (setModelExternalValue && model !== 'emptyLayout')\n setModelExternalValue(model);\n }, [model]);\n\n useLayoutEffect(() => {\n const { setCanvasDimensions } = notLibraryOptionsOptions as INotLibraryOptions || {};\n if (charContainertRef.current) {\n charContainertRef.current.style.width = setCanvasDimensions?.width ?? '';\n charContainertRef.current.style.height\n = setCanvasDimensions?.height ?? '';\n }\n }, [notLibraryOptionsOptions]);\n\n useEffect(() => {\n setModel(correctModelKey(initialModel));\n }, [initialModel]);\n\n useEffect(() => {\n if (data) {\n setLocalData(\n prepareData(model, clone(data), chartRef.current, addToDatasets),\n );\n }\n }, [model, data]);\n\n if (!data || !localData) return null;\n\n return (\n <div\n className={cn(\n RC,\n { [`${RC}_icon-mode`]: ICON_MODELS.includes(model) },\n className,\n )}\n >\n <div\n className={cn(`${RC}__header`, {\n [`${RC}__header_only-switcher`]: !description,\n })}\n >\n {description && !isExcludeDescription\n ? (\n <div className={cn(`${RC}__description`)}>\n {label\n ? (\n <span className={cn(`${RC}__description-title`)}>{label}</span>\n )\n : null}\n\n {value\n ? (\n <div className={cn(`${RC}__description-value`)}>{value}</div>\n )\n : null}\n </div>\n )\n : null}\n\n {!isExcludeChartTypeSwitcher\n ? (\n <div className={cn(`${RC}__type-switcher`)}>\n <ChartTypeSwitcherIcon\n iconType=\"Bar\"\n isActive={getChartTypeKey(model) === 'Bar'}\n onClick={() => setModel(modelsForSwitch?.[0] || 'barLayout')}\n />\n <ChartTypeSwitcherIcon\n iconType=\"Line\"\n isActive={getChartTypeKey(model) === 'Line'}\n onClick={() => setModel(modelsForSwitch?.[1] || 'lineLayout')}\n />\n </div>\n )\n : null}\n </div>\n\n <div ref={charContainertRef} className={cn(`${RC}__chart-wrapper`)}>\n <ChartComponent {...options} data={localData} />\n </div>\n </div>\n );\n};\n\nexport default Chart;\n"],"mappings":";;;;;;;;;;;AA6CA,IAAM,KAAK;AAEX,MAAQ,SACN,eACA,aACA,YACA,cACA,aACA,QACA,OACF;AAEA,IAAM,WAAgC,EACpC,WACA,cACA,iBACA,uBACA,aACA,eACA,MACA,eACA,oBACI;CACJ,MAAM,EAAE,OAAO,UAAU,eAAe,CAAC;CAEzC,MAAM,CAAC,OAAO,YAAY,SAAiB,mBAAmB;CAC9D,MAAM,CAAC,WAAW,gBAAgB,SAAc;CAChD,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,oBAAoB,OAAuB,IAAI;CAErD,MAAM,UAAU,cAEZ,kBACI,gBAAgB,cAAc,WAAW,KAAK,CAAC,IAAI,WAAW,KAAK,IACzE;EAAC;EAAe;EAAO,eAAe,WAAW;EAAG;CAAI,CAC1D;CAEA,MAAM,2BAA2B,cAE7B,gBACI,eAAe,oBACf,4BAA4B,KAAK,GACvC;EAAC;EAAe;EAAO;CAAI,CAC7B;CAEA,MAAM,iBAAiB,aACpB,UAAe;
|
|
1
|
+
{"version":3,"file":"Chart.js","names":[],"sources":["../../../../../src/Atomic/UI/Chart/Chart.tsx"],"sourcesContent":["import type { IChartProps, INotLibraryOptions } from './Chart.interface';\n\nimport {\n BarElement,\n CategoryScale,\n Chart as ChartJS,\n Filler,\n LinearScale,\n LineElement,\n PointElement,\n Tooltip,\n} from 'chart.js';\n\nimport cn from 'classnames';\nimport React, {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport * as ChartComponents from 'react-chartjs-2';\n\nimport { clone } from '../../../Functions/utils';\nimport {\n COMPONENT_OPTIONS,\n DEFAULT_CHART_MODEL,\n ICON_MODELS,\n} from './partial/Chart.constants';\nimport ChartTypeSwitcherIcon from './partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon';\n\nimport {\n correctModelKey,\n getChartTypeKey,\n getNotLibraryOptionsOptions,\n getOptions,\n prepareData,\n} from './partial/utils';\n\nimport './Chart.scss';\n\ntype ChartComponentType = React.ComponentType<any>;\n\nconst RC = 'chart';\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n BarElement,\n PointElement,\n LineElement,\n Filler,\n Tooltip,\n);\n\nconst Chart: React.FC<IChartProps> = ({\n className,\n initialModel,\n modelsForSwitch,\n setModelExternalValue,\n description,\n customOptions,\n data,\n addToDatasets,\n modifyOptions,\n}) => {\n const { label, value } = description || {};\n\n const [model, setModel] = useState<string>(DEFAULT_CHART_MODEL);\n const [localData, setLocalData] = useState<any>();\n const chartRef = useRef<ChartJS | null>(null);\n const charContainertRef = useRef<HTMLDivElement>(null);\n\n const options = useMemo(\n () =>\n customOptions\n || (modifyOptions ? modifyOptions(getOptions(model)) : getOptions(model)),\n [customOptions, model, modifyOptions?.toString?.(), data],\n );\n\n const notLibraryOptionsOptions = useMemo(\n () =>\n customOptions\n ? customOptions?.notLibraryOptions\n : getNotLibraryOptionsOptions(model),\n [customOptions, model, data],\n );\n\n const ChartComponent = useCallback(\n (props: any) => {\n const chartType = getChartTypeKey(model);\n const Component = ChartComponents[chartType as keyof typeof ChartComponents] as ChartComponentType;\n\n return React.createElement(Component, { ...props, ref: chartRef });\n },\n [model],\n );\n\n const isExcludeDescription\n = COMPONENT_OPTIONS.disableDescriptionsFor.includes(model);\n const isExcludeChartTypeSwitcher\n = COMPONENT_OPTIONS.disableChartTypeSwitcherFor.includes(model);\n\n useLayoutEffect(() => {\n if (setModelExternalValue && model !== 'emptyLayout')\n setModelExternalValue(model);\n }, [model]);\n\n useLayoutEffect(() => {\n const { setCanvasDimensions } = notLibraryOptionsOptions as INotLibraryOptions || {};\n if (charContainertRef.current) {\n charContainertRef.current.style.width = setCanvasDimensions?.width ?? '';\n charContainertRef.current.style.height\n = setCanvasDimensions?.height ?? '';\n }\n }, [notLibraryOptionsOptions]);\n\n useEffect(() => {\n setModel(correctModelKey(initialModel));\n }, [initialModel]);\n\n useEffect(() => {\n if (data) {\n setLocalData(\n prepareData(model, clone(data), chartRef.current, addToDatasets),\n );\n }\n }, [model, data]);\n\n if (!data || !localData) return null;\n\n return (\n <div\n className={cn(\n RC,\n { [`${RC}_icon-mode`]: ICON_MODELS.includes(model) },\n className,\n )}\n >\n <div\n className={cn(`${RC}__header`, {\n [`${RC}__header_only-switcher`]: !description,\n })}\n >\n {description && !isExcludeDescription\n ? (\n <div className={cn(`${RC}__description`)}>\n {label\n ? (\n <span className={cn(`${RC}__description-title`)}>{label}</span>\n )\n : null}\n\n {value\n ? (\n <div className={cn(`${RC}__description-value`)}>{value}</div>\n )\n : null}\n </div>\n )\n : null}\n\n {!isExcludeChartTypeSwitcher\n ? (\n <div className={cn(`${RC}__type-switcher`)}>\n <ChartTypeSwitcherIcon\n iconType=\"Bar\"\n isActive={getChartTypeKey(model) === 'Bar'}\n onClick={() => setModel(modelsForSwitch?.[0] || 'barLayout')}\n />\n <ChartTypeSwitcherIcon\n iconType=\"Line\"\n isActive={getChartTypeKey(model) === 'Line'}\n onClick={() => setModel(modelsForSwitch?.[1] || 'lineLayout')}\n />\n </div>\n )\n : null}\n </div>\n\n <div ref={charContainertRef} className={cn(`${RC}__chart-wrapper`)}>\n <ChartComponent {...options} data={localData} />\n </div>\n </div>\n );\n};\n\nexport default Chart;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTypeSwitcherIcon.js","names":[],"sources":["../../../../../../../src/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.tsx"],"sourcesContent":["import type { IChartTypeSwitcherIconProps } from '../../Chart.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport './ChartTypeSwitcherIcon.scss';\n\nconst RC = 'chart__type-switcher-icon';\n\nfunction getIcon(type: string): React.ReactElement | null {\n switch (type) {\n case 'Bar':\n return (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect y=\"0.5\" width=\"24\" height=\"24\" rx=\"4\" fill=\"#EAF2FF\" />\n <path\n d=\"M18 18V11\"\n stroke=\"#1F7499\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M12 18V6\"\n stroke=\"#1F7499\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M6 18V13\"\n stroke=\"#1F7499\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n case 'Line':\n return (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect y=\"0.5\" width=\"24\" height=\"24\" rx=\"4\" fill=\"#EAF2FF\" />\n <path\n d=\"M21 8L15.2544 13.2668C14.1075 14.3181 12.3288 14.3014 11.1818\n 13.25V13.25C10.0349 12.1986 8.25615 12.1819 7.10919 13.2332L3 17\"\n stroke=\"#1F7499\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n default:\n return null;\n }\n}\n\nconst ChartTypeSwitcherIcon: React.FC<IChartTypeSwitcherIconProps> = ({\n iconType,\n isActive,\n className,\n onClick,\n}) => {\n return (\n <div\n className={cn(RC, { [`${RC}_active`]: isActive }, className)}\n onClick={onClick}\n >\n {getIcon(iconType)}\n </div>\n );\n};\n\nexport default ChartTypeSwitcherIcon;\n"],"mappings":";;;;;AAOA,IAAM,KAAK;AAEX,SAAS,QAAQ,MAAyC;CACxD,QAAQ,MAAR;EACE,KAAK,OACH,OACE,qBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;
|
|
1
|
+
{"version":3,"file":"ChartTypeSwitcherIcon.js","names":[],"sources":["../../../../../../../src/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.tsx"],"sourcesContent":["import type { IChartTypeSwitcherIconProps } from '../../Chart.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport './ChartTypeSwitcherIcon.scss';\n\nconst RC = 'chart__type-switcher-icon';\n\nfunction getIcon(type: string): React.ReactElement | null {\n switch (type) {\n case 'Bar':\n return (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect y=\"0.5\" width=\"24\" height=\"24\" rx=\"4\" fill=\"#EAF2FF\" />\n <path\n d=\"M18 18V11\"\n stroke=\"#1F7499\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M12 18V6\"\n stroke=\"#1F7499\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M6 18V13\"\n stroke=\"#1F7499\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n case 'Line':\n return (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect y=\"0.5\" width=\"24\" height=\"24\" rx=\"4\" fill=\"#EAF2FF\" />\n <path\n d=\"M21 8L15.2544 13.2668C14.1075 14.3181 12.3288 14.3014 11.1818\n 13.25V13.25C10.0349 12.1986 8.25615 12.1819 7.10919 13.2332L3 17\"\n stroke=\"#1F7499\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n default:\n return null;\n }\n}\n\nconst ChartTypeSwitcherIcon: React.FC<IChartTypeSwitcherIconProps> = ({\n iconType,\n isActive,\n className,\n onClick,\n}) => {\n return (\n <div\n className={cn(RC, { [`${RC}_active`]: isActive }, className)}\n onClick={onClick}\n >\n {getIcon(iconType)}\n </div>\n );\n};\n\nexport default ChartTypeSwitcherIcon;\n"],"mappings":";;;;;AAOA,IAAM,KAAK;AAEX,SAAS,QAAQ,MAAyC;CACxD,QAAQ,MAAR;EACE,KAAK,OACH,OACE,qBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;GALR,UAAA;IAOE,oBAAC,QAAD;KAAM,GAAE;KAAM,OAAM;KAAK,QAAO;KAAK,IAAG;KAAI,MAAK;IAAW,CAAA;IAC5D,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;IACD,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;IACD,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE;;EAET,KAAK,QACH,OACE,qBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;GALR,UAAA,CAOE,oBAAC,QAAD;IAAM,GAAE;IAAM,OAAM;IAAK,QAAO;IAAK,IAAG;IAAI,MAAK;GAAW,CAAA,GAC5D,oBAAC,QAAD;IACE,GAAE;IAEF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA,CACE;;EAET,SACE,OAAO;CACX;AACF;AAEA,IAAM,yBAAgE,EACpE,UACA,UACA,WACA,cACI;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,WAAW,SAAS,GAAG,SAAS;EAClD;EAER,UAAA,QAAQ,QAAQ;CACd,CAAA;AAET"}
|
|
@@ -13,7 +13,8 @@ function correctModelKey(model) {
|
|
|
13
13
|
return chartTypeKey && CHART_TYPES.includes(chartTypeKey) ? model : DEFAULT_CHART_MODEL;
|
|
14
14
|
}
|
|
15
15
|
function getOptions(model) {
|
|
16
|
-
|
|
16
|
+
const modelOptions = optionsConstructor_default[model] || optionsConstructor_default["emptyLayout"];
|
|
17
|
+
return omitKeys(modelOptions, ["notLibraryOptions"]);
|
|
17
18
|
}
|
|
18
19
|
function getNotLibraryOptionsOptions(model) {
|
|
19
20
|
const { notLibraryOptions } = optionsConstructor_default[model] || optionsConstructor_default["emptyLayout"] || {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":[],"sources":["../../../../../../src/Atomic/UI/Chart/partial/utils.ts"],"sourcesContent":["import { clone, omitKeys } from '../../../../Functions/utils';\n\nimport { CHART_TYPES, DEFAULT_CHART_MODEL } from './Chart.constants';\nimport changeData from './datasetSetters';\nimport optionsConstructor from './optionsConstructor';\n\nexport function getChartTypeKey(model: string): string | undefined {\n return optionsConstructor[model as keyof typeof optionsConstructor]?.notLibraryOptions?.chartTypeKey\n}\n\nexport function correctModelKey(model?: string): string {\n if (!model) return DEFAULT_CHART_MODEL;\n\n const options = optionsConstructor[model as keyof typeof optionsConstructor];\n if (!options) return DEFAULT_CHART_MODEL;\n\n const chartTypeKey = getChartTypeKey(model);\n return chartTypeKey && CHART_TYPES.includes(chartTypeKey) ? model : DEFAULT_CHART_MODEL;\n}\n\nexport function getOptions(model: string): any {\n const modelOptions = optionsConstructor[model as keyof typeof optionsConstructor]\n || optionsConstructor[DEFAULT_CHART_MODEL as keyof typeof optionsConstructor];\n return omitKeys(modelOptions, ['notLibraryOptions']);\n}\n\nexport function getNotLibraryOptionsOptions(model: string): any {\n const modelOptions = optionsConstructor[model as keyof typeof optionsConstructor]\n || optionsConstructor[DEFAULT_CHART_MODEL as keyof typeof optionsConstructor];\n const { notLibraryOptions } = modelOptions || {};\n return notLibraryOptions ? clone(notLibraryOptions) : undefined;\n}\n\nexport function prepareData(model: string, data: any, chartInstance: any, addToDatasets?: any): any {\n if (!chartInstance) return data;\n\n const notLibraryOptions = getNotLibraryOptionsOptions(model);\n\n const iterator = notLibraryOptions?.changeData\n ? Object.keys(notLibraryOptions.changeData)\n : [];\n\n const changedData = iterator.reduce(\n (acc, dataChangeKey) =>\n changeData(\n acc,\n dataChangeKey,\n notLibraryOptions.changeData[dataChangeKey],\n chartInstance,\n ),\n clone(data),\n );\n\n return addToDatasets\n && typeof addToDatasets === 'object'\n && !Array.isArray(addToDatasets)\n ? {\n ...changedData,\n datasets: changedData.datasets.map((dataset: any) => ({\n ...dataset,\n ...addToDatasets,\n })),\n }\n : changedData;\n}\n"],"mappings":";;;;;AAMA,SAAgB,gBAAgB,OAAmC;CACjE,OAAO,2BAAmB,MAAyC,EAAE,mBAAmB;AAC1F;AAEA,SAAgB,gBAAgB,OAAwB;CACtD,IAAI,CAAC,OAAO,OAAO;CAGnB,IAAI,CADY,2BAAmB,QACrB,OAAO;CAErB,MAAM,eAAe,gBAAgB,KAAK;CAC1C,OAAO,gBAAgB,YAAY,SAAS,YAAY,IAAI,QAAQ;AACtE;AAEA,SAAgB,WAAW,OAAoB;
|
|
1
|
+
{"version":3,"file":"utils.js","names":[],"sources":["../../../../../../src/Atomic/UI/Chart/partial/utils.ts"],"sourcesContent":["import { clone, omitKeys } from '../../../../Functions/utils';\n\nimport { CHART_TYPES, DEFAULT_CHART_MODEL } from './Chart.constants';\nimport changeData from './datasetSetters';\nimport optionsConstructor from './optionsConstructor';\n\nexport function getChartTypeKey(model: string): string | undefined {\n return optionsConstructor[model as keyof typeof optionsConstructor]?.notLibraryOptions?.chartTypeKey\n}\n\nexport function correctModelKey(model?: string): string {\n if (!model) return DEFAULT_CHART_MODEL;\n\n const options = optionsConstructor[model as keyof typeof optionsConstructor];\n if (!options) return DEFAULT_CHART_MODEL;\n\n const chartTypeKey = getChartTypeKey(model);\n return chartTypeKey && CHART_TYPES.includes(chartTypeKey) ? model : DEFAULT_CHART_MODEL;\n}\n\nexport function getOptions(model: string): any {\n const modelOptions = optionsConstructor[model as keyof typeof optionsConstructor]\n || optionsConstructor[DEFAULT_CHART_MODEL as keyof typeof optionsConstructor];\n return omitKeys(modelOptions, ['notLibraryOptions']);\n}\n\nexport function getNotLibraryOptionsOptions(model: string): any {\n const modelOptions = optionsConstructor[model as keyof typeof optionsConstructor]\n || optionsConstructor[DEFAULT_CHART_MODEL as keyof typeof optionsConstructor];\n const { notLibraryOptions } = modelOptions || {};\n return notLibraryOptions ? clone(notLibraryOptions) : undefined;\n}\n\nexport function prepareData(model: string, data: any, chartInstance: any, addToDatasets?: any): any {\n if (!chartInstance) return data;\n\n const notLibraryOptions = getNotLibraryOptionsOptions(model);\n\n const iterator = notLibraryOptions?.changeData\n ? Object.keys(notLibraryOptions.changeData)\n : [];\n\n const changedData = iterator.reduce(\n (acc, dataChangeKey) =>\n changeData(\n acc,\n dataChangeKey,\n notLibraryOptions.changeData[dataChangeKey],\n chartInstance,\n ),\n clone(data),\n );\n\n return addToDatasets\n && typeof addToDatasets === 'object'\n && !Array.isArray(addToDatasets)\n ? {\n ...changedData,\n datasets: changedData.datasets.map((dataset: any) => ({\n ...dataset,\n ...addToDatasets,\n })),\n }\n : changedData;\n}\n"],"mappings":";;;;;AAMA,SAAgB,gBAAgB,OAAmC;CACjE,OAAO,2BAAmB,MAAyC,EAAE,mBAAmB;AAC1F;AAEA,SAAgB,gBAAgB,OAAwB;CACtD,IAAI,CAAC,OAAO,OAAO;CAGnB,IAAI,CADY,2BAAmB,QACrB,OAAO;CAErB,MAAM,eAAe,gBAAgB,KAAK;CAC1C,OAAO,gBAAgB,YAAY,SAAS,YAAY,IAAI,QAAQ;AACtE;AAEA,SAAgB,WAAW,OAAoB;CAC7C,MAAM,eAAe,2BAAmB,UACnC,2BAAA;CACL,OAAO,SAAS,cAAc,CAAC,mBAAmB,CAAC;AACrD;AAEA,SAAgB,4BAA4B,OAAoB;CAG9D,MAAM,EAAE,sBAFa,2BAAmB,UACnC,2BAAA,kBACyC,CAAC;CAC/C,OAAO,oBAAoB,MAAM,iBAAiB,IAAI,KAAA;AACxD;AAEA,SAAgB,YAAY,OAAe,MAAW,eAAoB,eAA0B;CAClG,IAAI,CAAC,eAAe,OAAO;CAE3B,MAAM,oBAAoB,4BAA4B,KAAK;CAM3D,MAAM,eAJW,mBAAmB,aAChC,OAAO,KAAK,kBAAkB,UAAU,IACxC,CAAC,EAAA,CAEwB,QAC1B,KAAK,kBACJ,WACE,KACA,eACA,kBAAkB,WAAW,gBAC7B,aACF,GACF,MAAM,IAAI,CACZ;CAEA,OAAO,iBACF,OAAO,kBAAkB,YACzB,CAAC,MAAM,QAAQ,aAAa,IAC7B;EACE,GAAG;EACH,UAAU,YAAY,SAAS,KAAK,aAAkB;GACpD,GAAG;GACH,GAAG;EACL,EAAE;CACJ,IACA;AACN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTime.js","names":[],"sources":["../../../../../src/Atomic/UI/DateTime/DateTime.tsx"],"sourcesContent":["import type { IDateTimeProps } from './DateTime.interface';\nimport cn from 'classnames';\nimport moment from 'moment-timezone';\nimport React, { useMemo } from 'react';\nimport './DateTime.scss';\n\nconst RC = 'date-time';\n\nconst DEFAULT_DATE_FORMAT = 'DD.MM.YYYY';\nconst DEFAULT_TIME_FORMAT = 'HH:mm:ss';\n\nconst DateTime: React.FC<IDateTimeProps> = ({\n className,\n value,\n valueFormat,\n dateFormat: inputDateFormat,\n timeFormat: inputTimeFormat,\n isNoDate,\n isNoTime,\n testId = 'date-time',\n}) => {\n const dateFormat = inputDateFormat ?? DEFAULT_DATE_FORMAT;\n const timeFormat = inputTimeFormat ?? DEFAULT_TIME_FORMAT;\n\n const date = useMemo(() => {\n return (valueFormat ? moment(value, valueFormat) : moment(value)).format(\n dateFormat,\n );\n }, [value, valueFormat, dateFormat]);\n\n const time = useMemo(() => {\n return (valueFormat ? moment(value, valueFormat) : moment(value)).format(\n timeFormat,\n );\n }, [value, valueFormat, timeFormat]);\n\n return (\n <div data-testid={testId} className={cn(RC, className)}>\n {!isNoDate && (\n <span data-testid={`${testId}-date`} className={`${RC}__date`}>\n {date}\n </span>\n )}\n {!isNoTime && (\n <span\n data-testid={`${testId}-time`}\n className={cn(`${RC}__time`, {\n [`${RC}_color--pause`]: !isNoDate,\n })}\n >\n {time}\n </span>\n )}\n </div>\n );\n};\n\nexport default DateTime;\n"],"mappings":";;;;;;AAMA,IAAM,KAAK;AAEX,IAAM,sBAAsB;AAC5B,IAAM,sBAAsB;AAE5B,IAAM,YAAsC,EAC1C,WACA,OACA,aACA,YAAY,iBACZ,YAAY,iBACZ,UACA,UACA,SAAS,kBACL;CACJ,MAAM,aAAa,mBAAmB;CACtC,MAAM,aAAa,mBAAmB;CAEtC,MAAM,OAAO,cAAc;EACzB,QAAQ,cAAc,OAAO,OAAO,WAAW,IAAI,OAAO,KAAK,EAAA,CAAG,OAChE,UACF;CACF,GAAG;EAAC;EAAO;EAAa;CAAU,CAAC;CAEnC,MAAM,OAAO,cAAc;EACzB,QAAQ,cAAc,OAAO,OAAO,WAAW,IAAI,OAAO,KAAK,EAAA,CAAG,OAChE,UACF;CACF,GAAG;EAAC;EAAO;EAAa;CAAU,CAAC;CAEnC,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,IAAI,SAAS;
|
|
1
|
+
{"version":3,"file":"DateTime.js","names":[],"sources":["../../../../../src/Atomic/UI/DateTime/DateTime.tsx"],"sourcesContent":["import type { IDateTimeProps } from './DateTime.interface';\nimport cn from 'classnames';\nimport moment from 'moment-timezone';\nimport React, { useMemo } from 'react';\nimport './DateTime.scss';\n\nconst RC = 'date-time';\n\nconst DEFAULT_DATE_FORMAT = 'DD.MM.YYYY';\nconst DEFAULT_TIME_FORMAT = 'HH:mm:ss';\n\nconst DateTime: React.FC<IDateTimeProps> = ({\n className,\n value,\n valueFormat,\n dateFormat: inputDateFormat,\n timeFormat: inputTimeFormat,\n isNoDate,\n isNoTime,\n testId = 'date-time',\n}) => {\n const dateFormat = inputDateFormat ?? DEFAULT_DATE_FORMAT;\n const timeFormat = inputTimeFormat ?? DEFAULT_TIME_FORMAT;\n\n const date = useMemo(() => {\n return (valueFormat ? moment(value, valueFormat) : moment(value)).format(\n dateFormat,\n );\n }, [value, valueFormat, dateFormat]);\n\n const time = useMemo(() => {\n return (valueFormat ? moment(value, valueFormat) : moment(value)).format(\n timeFormat,\n );\n }, [value, valueFormat, timeFormat]);\n\n return (\n <div data-testid={testId} className={cn(RC, className)}>\n {!isNoDate && (\n <span data-testid={`${testId}-date`} className={`${RC}__date`}>\n {date}\n </span>\n )}\n {!isNoTime && (\n <span\n data-testid={`${testId}-time`}\n className={cn(`${RC}__time`, {\n [`${RC}_color--pause`]: !isNoDate,\n })}\n >\n {time}\n </span>\n )}\n </div>\n );\n};\n\nexport default DateTime;\n"],"mappings":";;;;;;AAMA,IAAM,KAAK;AAEX,IAAM,sBAAsB;AAC5B,IAAM,sBAAsB;AAE5B,IAAM,YAAsC,EAC1C,WACA,OACA,aACA,YAAY,iBACZ,YAAY,iBACZ,UACA,UACA,SAAS,kBACL;CACJ,MAAM,aAAa,mBAAmB;CACtC,MAAM,aAAa,mBAAmB;CAEtC,MAAM,OAAO,cAAc;EACzB,QAAQ,cAAc,OAAO,OAAO,WAAW,IAAI,OAAO,KAAK,EAAA,CAAG,OAChE,UACF;CACF,GAAG;EAAC;EAAO;EAAa;CAAU,CAAC;CAEnC,MAAM,OAAO,cAAc;EACzB,QAAQ,cAAc,OAAO,OAAO,WAAW,IAAI,OAAO,KAAK,EAAA,CAAG,OAChE,UACF;CACF,GAAG;EAAC;EAAO;EAAa;CAAU,CAAC;CAEnC,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,IAAI,SAAS;EAArD,UAAA,CACG,CAAC,YACA,oBAAC,QAAD;GAAM,eAAa,GAAG,OAAO;GAAQ,WAAW,GAAG,GAAG;GACnD,UAAA;EACG,CAAA,GAEP,CAAC,YACA,oBAAC,QAAD;GACE,eAAa,GAAG,OAAO;GACvB,WAAW,GAAG,GAAG,GAAG,SAAS,GAC1B,GAAG,GAAG,iBAAiB,CAAC,SAC3B,CAAC;GAEA,UAAA;EACG,CAAA,CAEL;;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DebugContainer.js","names":[],"sources":["../../../../../src/Atomic/UI/DebugContainer/DebugContainer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport cn from 'classnames';\nimport React, { useState } from 'react';\nimport { ChevronDown, ChevronUp } from 'react-feather';\nimport './DebugContainer.scss';\n\nexport interface DebugContainerProps {\n data?: Record<string, any>;\n children?: ReactNode;\n className?: string;\n}\n\nconst defaultData: Record<string, any> = {};\nconst DebugContainer: React.FC<DebugContainerProps> = ({ data = defaultData, children, className }) => {\n const [isVisible, setIsVisible] = useState<boolean>(true);\n\n const renderData = (): JSX.Element => (\n <pre>\n {'{\\n'}\n {Object.keys(data).map(key => ` ${key}: ${String(data[key])},\\n`)}\n {'}'}\n </pre>\n );\n\n return (\n <div className={cn('debug-container', className)} data-testid=\"debug-container\">\n {isVisible && (\n <div className=\"debug-container__body\">\n <h5>Debug:</h5>\n {data && Object.keys(data).length > 0 && (\n <div className=\"debug-container__body-row\" data-testid=\"debug-data\">{renderData()}</div>\n )}\n {children && (\n <div className=\"debug-container__body-row\" data-testid=\"debug-children\">{children}</div>\n )}\n </div>\n )}\n <div\n className=\"debug-container__toggler\"\n onClick={() => setIsVisible(v => !v)}\n data-testid=\"debug-toggler\"\n >\n {isVisible ? <ChevronUp /> : <ChevronDown />}\n </div>\n </div>\n );\n};\n\nexport default DebugContainer;\n"],"mappings":";;;;;;AAYA,IAAM,cAAmC,CAAC;AAC1C,IAAM,kBAAiD,EAAE,OAAO,aAAa,UAAU,gBAAgB;CACrG,MAAM,CAAC,WAAW,gBAAgB,SAAkB,IAAI;CAExD,MAAM,mBACJ,qBAAC,OAAD,EAAA,UAAA;EACG;EACA,OAAO,KAAK,IAAI,CAAC,CAAC,KAAI,QAAO,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI,EAAE,IAAI;EAChE;CACE,EAAA,CAAA;CAGP,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,SAAS;EAAG,eAAY;
|
|
1
|
+
{"version":3,"file":"DebugContainer.js","names":[],"sources":["../../../../../src/Atomic/UI/DebugContainer/DebugContainer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport cn from 'classnames';\nimport React, { useState } from 'react';\nimport { ChevronDown, ChevronUp } from 'react-feather';\nimport './DebugContainer.scss';\n\nexport interface DebugContainerProps {\n data?: Record<string, any>;\n children?: ReactNode;\n className?: string;\n}\n\nconst defaultData: Record<string, any> = {};\nconst DebugContainer: React.FC<DebugContainerProps> = ({ data = defaultData, children, className }) => {\n const [isVisible, setIsVisible] = useState<boolean>(true);\n\n const renderData = (): JSX.Element => (\n <pre>\n {'{\\n'}\n {Object.keys(data).map(key => ` ${key}: ${String(data[key])},\\n`)}\n {'}'}\n </pre>\n );\n\n return (\n <div className={cn('debug-container', className)} data-testid=\"debug-container\">\n {isVisible && (\n <div className=\"debug-container__body\">\n <h5>Debug:</h5>\n {data && Object.keys(data).length > 0 && (\n <div className=\"debug-container__body-row\" data-testid=\"debug-data\">{renderData()}</div>\n )}\n {children && (\n <div className=\"debug-container__body-row\" data-testid=\"debug-children\">{children}</div>\n )}\n </div>\n )}\n <div\n className=\"debug-container__toggler\"\n onClick={() => setIsVisible(v => !v)}\n data-testid=\"debug-toggler\"\n >\n {isVisible ? <ChevronUp /> : <ChevronDown />}\n </div>\n </div>\n );\n};\n\nexport default DebugContainer;\n"],"mappings":";;;;;;AAYA,IAAM,cAAmC,CAAC;AAC1C,IAAM,kBAAiD,EAAE,OAAO,aAAa,UAAU,gBAAgB;CACrG,MAAM,CAAC,WAAW,gBAAgB,SAAkB,IAAI;CAExD,MAAM,mBACJ,qBAAC,OAAD,EAAA,UAAA;EACG;EACA,OAAO,KAAK,IAAI,CAAC,CAAC,KAAI,QAAO,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI,EAAE,IAAI;EAChE;CACE,EAAA,CAAA;CAGP,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,SAAS;EAAG,eAAY;EAA9D,UAAA,CACG,aACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,MAAD,EAAA,UAAI,SAAU,CAAA;IACb,QAAQ,OAAO,KAAK,IAAI,CAAC,CAAC,SAAS,KAClC,oBAAC,OAAD;KAAK,WAAU;KAA4B,eAAY;KAAc,UAAA,WAAW;IAAO,CAAA;IAExF,YACC,oBAAC,OAAD;KAAK,WAAU;KAA4B,eAAY;KAAkB;IAAc,CAAA;GAEtF;EAEP,CAAA,GAAA,oBAAC,OAAD;GACE,WAAU;GACV,eAAe,cAAa,MAAK,CAAC,CAAC;GACnC,eAAY;GAEX,UAAA,YAAY,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,aAAD,CAAc,CAAA;EACxC,CAAA,CACF;;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DoubleString.js","names":[],"sources":["../../../../../src/Atomic/UI/DoubleString/DoubleString.tsx"],"sourcesContent":["import type { IDoubleStringProps } from './DoubleString.interface';\n\nimport cn from 'classnames';\nimport moment from 'moment';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { Eye, EyeOff } from 'react-feather';\n\nimport './DoubleString.scss';\n\nconst RC = 'double-string';\n\nconst DoubleString: React.FC<IDoubleStringProps> = ({\n value,\n description,\n subDescription,\n valuePostfix,\n className,\n testId = 'double-string',\n isFormatValueToDate,\n isUseOnClick,\n dateFormatSettings: {\n parseFormat = 'MM.DD.YYYY',\n displayFormat = 'MM.DD.YYYY',\n } = {},\n revert = false,\n noTitle,\n isUseHideMode = false,\n isShowHiddenValueAvailable = false,\n}) => {\n const [isValueHidden, setIsValueHidden] = useState(isUseHideMode);\n\n const computedValue = isFormatValueToDate ? moment(value, parseFormat).format(displayFormat) : value;\n\n const valueRef = useRef<HTMLParagraphElement | null>(null); ;\n const descriptionRef = useRef<HTMLParagraphElement | null>(null);\n\n const [elemsWidth, setElemsWidth] = useState({\n valueWidth: 0,\n descriptionWidth: 0,\n });\n const [isOnClickON, setIsOnClickON] = useState(false);\n\n const handle = {\n click: () => {\n setIsOnClickON(!isOnClickON);\n },\n };\n\n useEffect(() => {\n const valueWidth = valueRef?.current?.clientWidth ?? 0;\n const descriptionWidth = descriptionRef?.current?.clientWidth ?? 0;\n\n setElemsWidth({ valueWidth, descriptionWidth });\n }, [descriptionRef, valueRef]);\n\n return (\n <div data-testid={testId} className={cn(RC, className)}>\n <p\n onClick={() => handle.click()}\n ref={valueRef}\n className={cn(\n `${RC}__value`,\n {\n 'double-string--value-opened': isOnClickON && isUseOnClick,\n },\n { pointer: isUseOnClick },\n )}\n title={!noTitle && elemsWidth.valueWidth > 99 ? computedValue : ''}\n >\n {!revert\n ? (\n <>\n {isUseHideMode ? <span>{!isValueHidden ? computedValue : '*********'}</span> : computedValue}\n {isUseHideMode && isShowHiddenValueAvailable && isValueHidden && <Eye data-testid=\"double-string-eye\" className={`${RC}__hide-mode-icon`} onClick={() => setIsValueHidden(false)} />}\n {isUseHideMode && isShowHiddenValueAvailable && !isValueHidden && <EyeOff data-testid=\"double-string-eyeoff\" className={`${RC}__hide-mode-icon`} onClick={() => setIsValueHidden(true)} />}\n {valuePostfix && (\n <span className={cn(`${RC}__value-postfix`)}>{valuePostfix}</span>\n )}\n </>\n )\n : (\n description\n )}\n </p>\n\n <p\n ref={descriptionRef}\n className={cn(`${RC}__description`)}\n title={!noTitle && elemsWidth.descriptionWidth > 99 ? computedValue : ''}\n >\n {!revert\n ? (\n description\n )\n : (\n <>\n {computedValue}\n {valuePostfix && (\n <span className={cn(`${RC}__value-postfix`)}>{valuePostfix}</span>\n )}\n </>\n )}\n </p>\n {subDescription && (\n <p className={cn(`${RC}__sub-description`)}>\n {subDescription}\n </p>\n )}\n </div>\n );\n};\n\nexport default DoubleString;\n"],"mappings":";;;;;;;AAUA,IAAM,KAAK;AAEX,IAAM,gBAA8C,EAClD,OACA,aACA,gBACA,cACA,WACA,SAAS,iBACT,qBACA,cACA,oBAAoB,EAClB,cAAc,cACd,gBAAgB,iBACd,CAAC,GACL,SAAS,OACT,SACA,gBAAgB,OAChB,6BAA6B,YACzB;CACJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa;CAEhE,MAAM,gBAAgB,sBAAsB,OAAO,OAAO,WAAW,CAAC,CAAC,OAAO,aAAa,IAAI;CAE/F,MAAM,WAAW,OAAoC,IAAI;CACzD,MAAM,iBAAiB,OAAoC,IAAI;CAE/D,MAAM,CAAC,YAAY,iBAAiB,SAAS;EAC3C,YAAY;EACZ,kBAAkB;CACpB,CAAC;CACD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,SAAS,EACb,aAAa;EACX,eAAe,CAAC,WAAW;CAC7B,EACF;CAEA,gBAAgB;EACd,MAAM,aAAa,UAAU,SAAS,eAAe;EACrD,MAAM,mBAAmB,gBAAgB,SAAS,eAAe;EAEjE,cAAc;GAAE;GAAY;EAAiB,CAAC;CAChD,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,IAAI,SAAS;
|
|
1
|
+
{"version":3,"file":"DoubleString.js","names":[],"sources":["../../../../../src/Atomic/UI/DoubleString/DoubleString.tsx"],"sourcesContent":["import type { IDoubleStringProps } from './DoubleString.interface';\n\nimport cn from 'classnames';\nimport moment from 'moment';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { Eye, EyeOff } from 'react-feather';\n\nimport './DoubleString.scss';\n\nconst RC = 'double-string';\n\nconst DoubleString: React.FC<IDoubleStringProps> = ({\n value,\n description,\n subDescription,\n valuePostfix,\n className,\n testId = 'double-string',\n isFormatValueToDate,\n isUseOnClick,\n dateFormatSettings: {\n parseFormat = 'MM.DD.YYYY',\n displayFormat = 'MM.DD.YYYY',\n } = {},\n revert = false,\n noTitle,\n isUseHideMode = false,\n isShowHiddenValueAvailable = false,\n}) => {\n const [isValueHidden, setIsValueHidden] = useState(isUseHideMode);\n\n const computedValue = isFormatValueToDate ? moment(value, parseFormat).format(displayFormat) : value;\n\n const valueRef = useRef<HTMLParagraphElement | null>(null); ;\n const descriptionRef = useRef<HTMLParagraphElement | null>(null);\n\n const [elemsWidth, setElemsWidth] = useState({\n valueWidth: 0,\n descriptionWidth: 0,\n });\n const [isOnClickON, setIsOnClickON] = useState(false);\n\n const handle = {\n click: () => {\n setIsOnClickON(!isOnClickON);\n },\n };\n\n useEffect(() => {\n const valueWidth = valueRef?.current?.clientWidth ?? 0;\n const descriptionWidth = descriptionRef?.current?.clientWidth ?? 0;\n\n setElemsWidth({ valueWidth, descriptionWidth });\n }, [descriptionRef, valueRef]);\n\n return (\n <div data-testid={testId} className={cn(RC, className)}>\n <p\n onClick={() => handle.click()}\n ref={valueRef}\n className={cn(\n `${RC}__value`,\n {\n 'double-string--value-opened': isOnClickON && isUseOnClick,\n },\n { pointer: isUseOnClick },\n )}\n title={!noTitle && elemsWidth.valueWidth > 99 ? computedValue : ''}\n >\n {!revert\n ? (\n <>\n {isUseHideMode ? <span>{!isValueHidden ? computedValue : '*********'}</span> : computedValue}\n {isUseHideMode && isShowHiddenValueAvailable && isValueHidden && <Eye data-testid=\"double-string-eye\" className={`${RC}__hide-mode-icon`} onClick={() => setIsValueHidden(false)} />}\n {isUseHideMode && isShowHiddenValueAvailable && !isValueHidden && <EyeOff data-testid=\"double-string-eyeoff\" className={`${RC}__hide-mode-icon`} onClick={() => setIsValueHidden(true)} />}\n {valuePostfix && (\n <span className={cn(`${RC}__value-postfix`)}>{valuePostfix}</span>\n )}\n </>\n )\n : (\n description\n )}\n </p>\n\n <p\n ref={descriptionRef}\n className={cn(`${RC}__description`)}\n title={!noTitle && elemsWidth.descriptionWidth > 99 ? computedValue : ''}\n >\n {!revert\n ? (\n description\n )\n : (\n <>\n {computedValue}\n {valuePostfix && (\n <span className={cn(`${RC}__value-postfix`)}>{valuePostfix}</span>\n )}\n </>\n )}\n </p>\n {subDescription && (\n <p className={cn(`${RC}__sub-description`)}>\n {subDescription}\n </p>\n )}\n </div>\n );\n};\n\nexport default DoubleString;\n"],"mappings":";;;;;;;AAUA,IAAM,KAAK;AAEX,IAAM,gBAA8C,EAClD,OACA,aACA,gBACA,cACA,WACA,SAAS,iBACT,qBACA,cACA,oBAAoB,EAClB,cAAc,cACd,gBAAgB,iBACd,CAAC,GACL,SAAS,OACT,SACA,gBAAgB,OAChB,6BAA6B,YACzB;CACJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa;CAEhE,MAAM,gBAAgB,sBAAsB,OAAO,OAAO,WAAW,CAAC,CAAC,OAAO,aAAa,IAAI;CAE/F,MAAM,WAAW,OAAoC,IAAI;CACzD,MAAM,iBAAiB,OAAoC,IAAI;CAE/D,MAAM,CAAC,YAAY,iBAAiB,SAAS;EAC3C,YAAY;EACZ,kBAAkB;CACpB,CAAC;CACD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,SAAS,EACb,aAAa;EACX,eAAe,CAAC,WAAW;CAC7B,EACF;CAEA,gBAAgB;EACd,MAAM,aAAa,UAAU,SAAS,eAAe;EACrD,MAAM,mBAAmB,gBAAgB,SAAS,eAAe;EAEjE,cAAc;GAAE;GAAY;EAAiB,CAAC;CAChD,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,IAAI,SAAS;EAArD,UAAA;GACE,oBAAC,KAAD;IACE,eAAe,OAAO,MAAM;IAC5B,KAAK;IACL,WAAW,GACT,GAAG,GAAG,UACN,EACE,+BAA+B,eAAe,aAChD,GACA,EAAE,SAAS,aAAa,CAC1B;IACA,OAAO,CAAC,WAAW,WAAW,aAAa,KAAK,gBAAgB;IAE/D,UAAA,CAAC,SAEI,qBAAA,UAAA,EAAA,UAAA;KACG,gBAAgB,oBAAC,QAAD,EAAA,UAAO,CAAC,gBAAgB,gBAAgB,YAAkB,CAAA,IAAI;KAC9E,iBAAiB,8BAA8B,iBAAiB,oBAAC,KAAD;MAAK,eAAY;MAAoB,WAAW,GAAG,GAAG;MAAmB,eAAe,iBAAiB,KAAK;KAAI,CAAA;KAClL,iBAAiB,8BAA8B,CAAC,iBAAiB,oBAAC,QAAD;MAAQ,eAAY;MAAuB,WAAW,GAAG,GAAG;MAAmB,eAAe,iBAAiB,IAAI;KAAI,CAAA;KACxL,gBACC,oBAAC,QAAD;MAAM,WAAW,GAAG,GAAG,GAAG,gBAAgB;MAAI,UAAA;KAAmB,CAAA;IAEnE,EAAA,CAAA,IAGF;GAEL,CAAA;GAEH,oBAAC,KAAD;IACE,KAAK;IACL,WAAW,GAAG,GAAG,GAAG,cAAc;IAClC,OAAO,CAAC,WAAW,WAAW,mBAAmB,KAAK,gBAAgB;IAErE,UAAA,CAAC,SAEI,cAGA,qBAAA,UAAA,EAAA,UAAA,CACG,eACA,gBACC,oBAAC,QAAD;KAAM,WAAW,GAAG,GAAG,GAAG,gBAAgB;KAAI,UAAA;IAAmB,CAAA,CAEnE,EAAA,CAAA;GAEP,CAAA;GACF,kBACC,oBAAC,KAAD;IAAG,WAAW,GAAG,GAAG,GAAG,kBAAkB;IACtC,UAAA;GACA,CAAA;EAEF;;AAET"}
|
|
@@ -123,12 +123,10 @@ var Hint = ({ hint, side = "right", className, hintContainer = DEFAULT_EMPTY_OBJ
|
|
|
123
123
|
sw.classList.add("hint__text_right");
|
|
124
124
|
}
|
|
125
125
|
break;
|
|
126
|
-
default:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}
|
|
131
|
-
break;
|
|
126
|
+
default: if (left + width + swWidth + INACCURACY / 2 > windowInnerWidth) {
|
|
127
|
+
sw.classList.remove(`hint__text_${side}`);
|
|
128
|
+
sw.classList.add("hint__text_left");
|
|
129
|
+
}
|
|
132
130
|
}
|
|
133
131
|
setIsStyleComputed(true);
|
|
134
132
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hint.js","names":[],"sources":["../../../../../src/Atomic/UI/Hint/Hint.tsx"],"sourcesContent":["/* eslint-disable react-dom/no-missing-button-type */\nimport type { ReactNode } from 'react';\nimport type { IHintProps } from './Hint.interface';\n\nimport cn from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { AlertTriangle, HelpCircle } from 'react-feather';\n\nimport { capitalized } from '../../../Functions/utils';\nimport { HelpCircleFilled } from '../../../Molecular/CustomIcons';\n\nimport Spinner from '../../Layout/Spinner/Spinner';\n\nimport { I_AM_OPENED_EVENT_NAME, I_AM_OPENED_EVENT_OPTIONS } from './partials/_constants';\nimport { getHintContainer, HandleClickOutsideObj, HandleScrollObj, initHintContainer } from './partials/_utils';\n\nimport './Hint.scss';\n\n// Глобальный мап для хранения таймеров по hintId\nconst hintTimeoutMap = new Map<string, NodeJS.Timeout>();\n\nlet isContentHoveredOuter = false;\n\nconst DEFAULT_EMPTY_OBJ = {} as IHintProps['hintContainer'];\n\nfunction DEFAULT_VOID_FN(): void {}\n\ninterface IIAmOpenedDetails {\n hintId: string;\n}\n\nconst Hint: React.FC<IHintProps> = ({\n hint,\n side = 'right',\n className,\n hintContainer = DEFAULT_EMPTY_OBJ,\n label = '',\n variant = 'filled',\n handleOpenType = 'click',\n onClickCallback,\n onOpenChange = DEFAULT_VOID_FN,\n key,\n id,\n children,\n icon,\n isAccessability = false,\n testId = 'hint',\n isHoverableContent = false,\n isLoading,\n isCloseOnChildrenClick = false,\n}) => {\n const hintRef = useRef(null);\n const [hintId] = useState<string>(id ?? key ?? Math.random().toString(16).slice(2));\n const [iAmOpenedOptions] = useState<Record<string, any>>({ ...I_AM_OPENED_EVENT_OPTIONS, detail: { hintId } });\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [isStyleComputed, setIsStyleComputed] = useState<boolean>(false);\n\n // ? Определяем handleScroll-стейт, чтобы никогда не менять ссылку тем самым гарантировать корректную работу removeEventListener.\n // ? Инициализируем стейт вызовом конструктора HandleScrollObj, передаем setIsOpen для записи в объект.\n const [handleScroll] = useState(new (HandleScrollObj as any)(setIsOpen));\n // ? По аналогии определяем handleClickOutside\n const [handleClickOutside] = useState(new (HandleClickOutsideObj as any)(hintId, setIsOpen));\n\n const isCallbackExist: boolean = typeof onClickCallback === 'function';\n\n const handle = {\n onMouseEnter: (): void => {\n const existing = hintTimeoutMap.get(hintId);\n if (existing) clearTimeout(existing);\n\n if (handleOpenType === 'hover') {\n const timer = setTimeout(() => {\n setIsOpen(true);\n !isOpen && onClickCallback?.();\n\n // ? (FIN-10491) Идея следующая:\n // ? Любой hint как только он открывается \"широковещательно орёт\" - \"я открыт!\"\n // ? И, в свою очередь, любой hint слушает \"широковещательный ор\" и как услышит \"думает\" - \"а это не я ли случайно открыт?\".\n // ? Если НЕ он, то тогда он принудительно закрывается\n\n // ? В качестве \"широковещательного ора\" используем систему:\n // ? - диспатчим на \"себе\" ВСПЛЫВАЮЩИЙ кастомный ивент\n // ? - но чтобы \"слышать голоса\" всех хинтов \"слушаем\" на начальной точке всплытия (т.е. на document)\n // @ts-ignore\n hintRef.current?.dispatchEvent?.(new CustomEvent(I_AM_OPENED_EVENT_NAME, iAmOpenedOptions));\n }, 350);\n hintTimeoutMap.set(hintId, timer);\n }\n },\n onMouseLeave: (): void => {\n const existing = hintTimeoutMap.get(hintId);\n if (existing) clearTimeout(existing);\n\n if (!isHoverableContent && handleOpenType === 'hover') {\n const timer = setTimeout(() => {\n setIsOpen(false);\n hintTimeoutMap.delete(hintId);\n }, 1000);\n hintTimeoutMap.set(hintId, timer);\n }\n else if (isHoverableContent && handleOpenType === 'hover') {\n const timer = setTimeout(() => {\n if (!isContentHoveredOuter) {\n setIsOpen(false);\n }\n hintTimeoutMap.delete(hintId);\n }, 100);\n hintTimeoutMap.set(hintId, timer);\n }\n },\n onMouseLeaveHoverableContent: (): void => {\n const existing = hintTimeoutMap.get(hintId);\n if (existing) clearTimeout(existing);\n\n if (isHoverableContent && handleOpenType === 'hover') {\n const timer = setTimeout(() => {\n setIsOpen(false);\n isContentHoveredOuter = false;\n hintTimeoutMap.delete(hintId);\n }, 100);\n hintTimeoutMap.set(hintId, timer);\n }\n },\n onClick: isCloseOnChildrenClick ? (): void => setIsOpen(false) : (): void => {},\n };\n\n const getHintMarkUp = (className: string | undefined): ReactNode => {\n return (\n <div\n data-testid=\"test-hint-text\"\n className={cn('hint__text', `hint__text_${side}`, `hint--${className}__text`)}\n onMouseEnter={(): void => {\n if (isHoverableContent) isContentHoveredOuter = true;\n }}\n onMouseLeave={isHoverableContent ? handle.onMouseLeaveHoverableContent : undefined}\n onClick={handle.onClick}\n style={{ visibility: isStyleComputed ? 'visible' : 'hidden' }}\n >\n {isLoading && <Spinner size=\"small\" />}\n {hint}\n {children}\n </div>\n );\n };\n\n const setHintContainerStyles = (): void | boolean => {\n const hc = getHintContainer(hintId);\n\n if (!hc || !isOpen) return false;\n\n const { width = 0, top = 0, left = 0 } = hintRef?.current !== null ? (hintRef?.current as HTMLElement)?.getBoundingClientRect() : {};\n const { addWidth, addLeft, addTop } = hintContainer ?? {};\n const windowInnerWidth = document.documentElement.clientWidth;\n const windowInnerHeight = document.documentElement.clientHeight;\n\n const sw = hc.getElementsByClassName('hint__text')[0];\n const { width: swWidth, height: swHeight } = sw?.getBoundingClientRect() || {};\n\n hc.style.width = isOpen ? ((addWidth && !Number.isNaN(+addWidth) ? +addWidth : 0) + width)?.toString().concat('px') : '0';\n hc.style.left = isOpen ? ((addLeft && !Number.isNaN(+addLeft) ? +addLeft : 0) + left)?.toString().concat('px') : '0';\n hc.style.top = isOpen ? ((addTop && !Number.isNaN(+addTop) ? +addTop : 0) + top)?.toString().concat('px') : '0';\n hc.style.maxHeight = isOpen ? swHeight?.toString().concat('px') : '0';\n\n // ? Базовое значение погрешности\n // ? В разных свитч-кейсах может использоваться по разному (вся или частично). Определял \"на глазок\"\n const INACCURACY = 20;\n switch (side) {\n case 'top':\n case 'centeredTop':\n if (top - swHeight - (INACCURACY / 2) < 0) {\n sw.classList.remove(`hint__text_${side}`);\n sw.classList.add(`hint__text_${side === 'top' ? 'bottom' : 'centeredBottom'}`);\n }\n break;\n\n case 'bottom':\n case 'centeredBottom':\n if (top + swHeight + INACCURACY > windowInnerHeight) {\n sw.classList.remove(`hint__text_${side}`);\n sw.classList.add(`hint__text_${side === 'bottom' ? 'top' : 'centeredTop'}`);\n }\n break;\n\n case 'left':\n if (left - swWidth - (INACCURACY / 2) < 0) {\n sw.classList.remove(`hint__text_${side}`);\n sw.classList.add('hint__text_right');\n }\n break;\n\n case 'right':\n default:\n if (left + width + swWidth + (INACCURACY / 2) > windowInnerWidth) {\n sw.classList.remove(`hint__text_${side}`);\n sw.classList.add('hint__text_left');\n }\n break;\n }\n\n setIsStyleComputed(true);\n };\n\n const renderHintContainer = (className: string | undefined): React.ReactPortal | null => {\n const hc = getHintContainer(hintId);\n if (!hc) return null;\n return createPortal(getHintMarkUp(className), hc);\n }\n\n useEffect(() => {\n initHintContainer(hintId, hintContainer);\n\n // ? useEffect по нулевой зависимости запускается 1 раз, поэтому ссылка на колбек не изменится\n const iAmOpenedCallback = (ev: Event): CustomEvent<IIAmOpenedDetails> => {\n const event = ev as CustomEvent<IIAmOpenedDetails>;\n if (event?.detail?.hintId !== hintId) {\n setIsOpen(false);\n const timer = hintTimeoutMap.get(hintId);\n if (timer) {\n clearTimeout(timer);\n hintTimeoutMap.delete(hintId);\n }\n }\n return event;\n };\n\n if (hintRef.current) {\n // ? Устанавливаем прослушку на начальной точке всплытия\n document.addEventListener(I_AM_OPENED_EVENT_NAME, iAmOpenedCallback);\n }\n\n return () => {\n document.removeEventListener(I_AM_OPENED_EVENT_NAME, iAmOpenedCallback);\n const timer = hintTimeoutMap.get(hintId);\n if (timer) {\n clearTimeout(timer);\n hintTimeoutMap.delete(hintId);\n }\n };\n }, []);\n\n useEffect(() => {\n setIsStyleComputed(false);\n setHintContainerStyles();\n onOpenChange?.(isOpen);\n\n if (!isOpen) return undefined;\n\n document.addEventListener('scroll', handleScroll, true);\n document.addEventListener('click', handleClickOutside, true);\n\n return () => {\n document.removeEventListener('scroll', handleScroll, true);\n document.removeEventListener('click', handleClickOutside, true);\n const timer = hintTimeoutMap.get(hintId);\n if (timer) {\n clearTimeout(timer);\n hintTimeoutMap.delete(hintId);\n }\n };\n }, [isOpen]);\n\n return (\n <div data-testid={testId} className={cn('hint', className)} ref={hintRef}>\n <button\n tabIndex={isAccessability ? 0 : -1}\n data-testid={typeof label === 'string' && label.length ? label.replace?.(/\\s/g, '-') : `${testId}--button`}\n aria-label={isAccessability && typeof label === 'string' ? label : ''}\n onClick={() =>\n handleOpenType === 'click'\n && (isCallbackExist ? onClickCallback?.() : setIsOpen(!isOpen))}\n onMouseEnter={handle.onMouseEnter}\n onMouseLeave={handle.onMouseLeave}\n className={cn('hint__button', { hint__button_active: isOpen })}\n >\n {icon || icon === null || (\n <>\n {variant === 'outlined' && <HelpCircle width={16} height={16} className=\"hint__icon outlined\" />}\n {variant === 'filled' && <HelpCircleFilled className=\"hint__icon filled\" />}\n {variant === 'warning' && (\n <AlertTriangle className=\"hint__icon\" color=\"#F06D8D\" width={16} height={16} />\n )}\n </>\n )}\n\n {label && (\n <span className={cn('hint__label', { 'color--primary': isOpen })}>\n {typeof label === 'string' ? capitalized(label) : label}\n </span>\n )}\n </button>\n\n {isOpen && renderHintContainer(className)}\n </div>\n );\n}\n\nexport default Hint;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Hint.js","names":[],"sources":["../../../../../src/Atomic/UI/Hint/Hint.tsx"],"sourcesContent":["/* eslint-disable react-dom/no-missing-button-type */\nimport type { ReactNode } from 'react';\nimport type { IHintProps } from './Hint.interface';\n\nimport cn from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { AlertTriangle, HelpCircle } from 'react-feather';\n\nimport { capitalized } from '../../../Functions/utils';\nimport { HelpCircleFilled } from '../../../Molecular/CustomIcons';\n\nimport Spinner from '../../Layout/Spinner/Spinner';\n\nimport { I_AM_OPENED_EVENT_NAME, I_AM_OPENED_EVENT_OPTIONS } from './partials/_constants';\nimport { getHintContainer, HandleClickOutsideObj, HandleScrollObj, initHintContainer } from './partials/_utils';\n\nimport './Hint.scss';\n\n// Глобальный мап для хранения таймеров по hintId\nconst hintTimeoutMap = new Map<string, NodeJS.Timeout>();\n\nlet isContentHoveredOuter = false;\n\nconst DEFAULT_EMPTY_OBJ = {} as IHintProps['hintContainer'];\n\nfunction DEFAULT_VOID_FN(): void {}\n\ninterface IIAmOpenedDetails {\n hintId: string;\n}\n\nconst Hint: React.FC<IHintProps> = ({\n hint,\n side = 'right',\n className,\n hintContainer = DEFAULT_EMPTY_OBJ,\n label = '',\n variant = 'filled',\n handleOpenType = 'click',\n onClickCallback,\n onOpenChange = DEFAULT_VOID_FN,\n key,\n id,\n children,\n icon,\n isAccessability = false,\n testId = 'hint',\n isHoverableContent = false,\n isLoading,\n isCloseOnChildrenClick = false,\n}) => {\n const hintRef = useRef(null);\n const [hintId] = useState<string>(id ?? key ?? Math.random().toString(16).slice(2));\n const [iAmOpenedOptions] = useState<Record<string, any>>({ ...I_AM_OPENED_EVENT_OPTIONS, detail: { hintId } });\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [isStyleComputed, setIsStyleComputed] = useState<boolean>(false);\n\n // ? Определяем handleScroll-стейт, чтобы никогда не менять ссылку тем самым гарантировать корректную работу removeEventListener.\n // ? Инициализируем стейт вызовом конструктора HandleScrollObj, передаем setIsOpen для записи в объект.\n const [handleScroll] = useState(new (HandleScrollObj as any)(setIsOpen));\n // ? По аналогии определяем handleClickOutside\n const [handleClickOutside] = useState(new (HandleClickOutsideObj as any)(hintId, setIsOpen));\n\n const isCallbackExist: boolean = typeof onClickCallback === 'function';\n\n const handle = {\n onMouseEnter: (): void => {\n const existing = hintTimeoutMap.get(hintId);\n if (existing) clearTimeout(existing);\n\n if (handleOpenType === 'hover') {\n const timer = setTimeout(() => {\n setIsOpen(true);\n !isOpen && onClickCallback?.();\n\n // ? (FIN-10491) Идея следующая:\n // ? Любой hint как только он открывается \"широковещательно орёт\" - \"я открыт!\"\n // ? И, в свою очередь, любой hint слушает \"широковещательный ор\" и как услышит \"думает\" - \"а это не я ли случайно открыт?\".\n // ? Если НЕ он, то тогда он принудительно закрывается\n\n // ? В качестве \"широковещательного ора\" используем систему:\n // ? - диспатчим на \"себе\" ВСПЛЫВАЮЩИЙ кастомный ивент\n // ? - но чтобы \"слышать голоса\" всех хинтов \"слушаем\" на начальной точке всплытия (т.е. на document)\n // @ts-ignore\n hintRef.current?.dispatchEvent?.(new CustomEvent(I_AM_OPENED_EVENT_NAME, iAmOpenedOptions));\n }, 350);\n hintTimeoutMap.set(hintId, timer);\n }\n },\n onMouseLeave: (): void => {\n const existing = hintTimeoutMap.get(hintId);\n if (existing) clearTimeout(existing);\n\n if (!isHoverableContent && handleOpenType === 'hover') {\n const timer = setTimeout(() => {\n setIsOpen(false);\n hintTimeoutMap.delete(hintId);\n }, 1000);\n hintTimeoutMap.set(hintId, timer);\n }\n else if (isHoverableContent && handleOpenType === 'hover') {\n const timer = setTimeout(() => {\n if (!isContentHoveredOuter) {\n setIsOpen(false);\n }\n hintTimeoutMap.delete(hintId);\n }, 100);\n hintTimeoutMap.set(hintId, timer);\n }\n },\n onMouseLeaveHoverableContent: (): void => {\n const existing = hintTimeoutMap.get(hintId);\n if (existing) clearTimeout(existing);\n\n if (isHoverableContent && handleOpenType === 'hover') {\n const timer = setTimeout(() => {\n setIsOpen(false);\n isContentHoveredOuter = false;\n hintTimeoutMap.delete(hintId);\n }, 100);\n hintTimeoutMap.set(hintId, timer);\n }\n },\n onClick: isCloseOnChildrenClick ? (): void => setIsOpen(false) : (): void => {},\n };\n\n const getHintMarkUp = (className: string | undefined): ReactNode => {\n return (\n <div\n data-testid=\"test-hint-text\"\n className={cn('hint__text', `hint__text_${side}`, `hint--${className}__text`)}\n onMouseEnter={(): void => {\n if (isHoverableContent) isContentHoveredOuter = true;\n }}\n onMouseLeave={isHoverableContent ? handle.onMouseLeaveHoverableContent : undefined}\n onClick={handle.onClick}\n style={{ visibility: isStyleComputed ? 'visible' : 'hidden' }}\n >\n {isLoading && <Spinner size=\"small\" />}\n {hint}\n {children}\n </div>\n );\n };\n\n const setHintContainerStyles = (): void | boolean => {\n const hc = getHintContainer(hintId);\n\n if (!hc || !isOpen) return false;\n\n const { width = 0, top = 0, left = 0 } = hintRef?.current !== null ? (hintRef?.current as HTMLElement)?.getBoundingClientRect() : {};\n const { addWidth, addLeft, addTop } = hintContainer ?? {};\n const windowInnerWidth = document.documentElement.clientWidth;\n const windowInnerHeight = document.documentElement.clientHeight;\n\n const sw = hc.getElementsByClassName('hint__text')[0];\n const { width: swWidth, height: swHeight } = sw?.getBoundingClientRect() || {};\n\n hc.style.width = isOpen ? ((addWidth && !Number.isNaN(+addWidth) ? +addWidth : 0) + width)?.toString().concat('px') : '0';\n hc.style.left = isOpen ? ((addLeft && !Number.isNaN(+addLeft) ? +addLeft : 0) + left)?.toString().concat('px') : '0';\n hc.style.top = isOpen ? ((addTop && !Number.isNaN(+addTop) ? +addTop : 0) + top)?.toString().concat('px') : '0';\n hc.style.maxHeight = isOpen ? swHeight?.toString().concat('px') : '0';\n\n // ? Базовое значение погрешности\n // ? В разных свитч-кейсах может использоваться по разному (вся или частично). Определял \"на глазок\"\n const INACCURACY = 20;\n switch (side) {\n case 'top':\n case 'centeredTop':\n if (top - swHeight - (INACCURACY / 2) < 0) {\n sw.classList.remove(`hint__text_${side}`);\n sw.classList.add(`hint__text_${side === 'top' ? 'bottom' : 'centeredBottom'}`);\n }\n break;\n\n case 'bottom':\n case 'centeredBottom':\n if (top + swHeight + INACCURACY > windowInnerHeight) {\n sw.classList.remove(`hint__text_${side}`);\n sw.classList.add(`hint__text_${side === 'bottom' ? 'top' : 'centeredTop'}`);\n }\n break;\n\n case 'left':\n if (left - swWidth - (INACCURACY / 2) < 0) {\n sw.classList.remove(`hint__text_${side}`);\n sw.classList.add('hint__text_right');\n }\n break;\n\n case 'right':\n default:\n if (left + width + swWidth + (INACCURACY / 2) > windowInnerWidth) {\n sw.classList.remove(`hint__text_${side}`);\n sw.classList.add('hint__text_left');\n }\n break;\n }\n\n setIsStyleComputed(true);\n };\n\n const renderHintContainer = (className: string | undefined): React.ReactPortal | null => {\n const hc = getHintContainer(hintId);\n if (!hc) return null;\n return createPortal(getHintMarkUp(className), hc);\n }\n\n useEffect(() => {\n initHintContainer(hintId, hintContainer);\n\n // ? useEffect по нулевой зависимости запускается 1 раз, поэтому ссылка на колбек не изменится\n const iAmOpenedCallback = (ev: Event): CustomEvent<IIAmOpenedDetails> => {\n const event = ev as CustomEvent<IIAmOpenedDetails>;\n if (event?.detail?.hintId !== hintId) {\n setIsOpen(false);\n const timer = hintTimeoutMap.get(hintId);\n if (timer) {\n clearTimeout(timer);\n hintTimeoutMap.delete(hintId);\n }\n }\n return event;\n };\n\n if (hintRef.current) {\n // ? Устанавливаем прослушку на начальной точке всплытия\n document.addEventListener(I_AM_OPENED_EVENT_NAME, iAmOpenedCallback);\n }\n\n return () => {\n document.removeEventListener(I_AM_OPENED_EVENT_NAME, iAmOpenedCallback);\n const timer = hintTimeoutMap.get(hintId);\n if (timer) {\n clearTimeout(timer);\n hintTimeoutMap.delete(hintId);\n }\n };\n }, []);\n\n useEffect(() => {\n setIsStyleComputed(false);\n setHintContainerStyles();\n onOpenChange?.(isOpen);\n\n if (!isOpen) return undefined;\n\n document.addEventListener('scroll', handleScroll, true);\n document.addEventListener('click', handleClickOutside, true);\n\n return () => {\n document.removeEventListener('scroll', handleScroll, true);\n document.removeEventListener('click', handleClickOutside, true);\n const timer = hintTimeoutMap.get(hintId);\n if (timer) {\n clearTimeout(timer);\n hintTimeoutMap.delete(hintId);\n }\n };\n }, [isOpen]);\n\n return (\n <div data-testid={testId} className={cn('hint', className)} ref={hintRef}>\n <button\n tabIndex={isAccessability ? 0 : -1}\n data-testid={typeof label === 'string' && label.length ? label.replace?.(/\\s/g, '-') : `${testId}--button`}\n aria-label={isAccessability && typeof label === 'string' ? label : ''}\n onClick={() =>\n handleOpenType === 'click'\n && (isCallbackExist ? onClickCallback?.() : setIsOpen(!isOpen))}\n onMouseEnter={handle.onMouseEnter}\n onMouseLeave={handle.onMouseLeave}\n className={cn('hint__button', { hint__button_active: isOpen })}\n >\n {icon || icon === null || (\n <>\n {variant === 'outlined' && <HelpCircle width={16} height={16} className=\"hint__icon outlined\" />}\n {variant === 'filled' && <HelpCircleFilled className=\"hint__icon filled\" />}\n {variant === 'warning' && (\n <AlertTriangle className=\"hint__icon\" color=\"#F06D8D\" width={16} height={16} />\n )}\n </>\n )}\n\n {label && (\n <span className={cn('hint__label', { 'color--primary': isOpen })}>\n {typeof label === 'string' ? capitalized(label) : label}\n </span>\n )}\n </button>\n\n {isOpen && renderHintContainer(className)}\n </div>\n );\n}\n\nexport default Hint;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_utils.js","names":[],"sources":["../../../../../../src/Atomic/UI/Hint/partials/_utils.ts"],"sourcesContent":["export const getHintContainerId = (hintId: string | number): string => `hint-container-for-hint--id-${hintId}`;\n\nexport function getHintContainer(hintId: string | number): HTMLElement | null {\n return document.getElementById(getHintContainerId(hintId));\n}\n\nexport function getParentNode(): HTMLElement | null {\n return (\n document.querySelector('div#root')\n ?? document.querySelector('div#app')\n ?? document.body\n );\n}\n\nexport function initHintContainer(hintId: string | number, hintContainerSettings: any): void {\n const { className } = hintContainerSettings;\n const hintContainer = document.createElement('div');\n\n hintContainer.setAttribute('id', getHintContainerId(hintId));\n hintContainer.classList.add('hint__container');\n if (className) hintContainer.classList.add(className);\n\n getParentNode()?.append(hintContainer);\n}\n\n// ? addEventListener можно инициализировать двумя способами\n// ? - передать прямой колбэк (ф-ю)\n// ? - передать объект в котором есть метод handleEvent (помимо handleEvent можно записать в this прочие полезные значения)\n// ? Пользуемся вторым способом, чтобы записать входные данные (вообще можно не писать, работает и просто от замыкания, но делаем по \"дзену\")\n// ! Метод написан с расчетом на то, что будет вызываться ТОЛЬКО открытым тултипом\nexport function HandleScrollObj(this: any, setIsOpen: (isOpen: boolean) => void): void {\n this.setIsOpen = setIsOpen;\n this.handleEvent = function () {\n this.setIsOpen(false);\n };\n}\n\nexport function HandleClickOutsideObj(this: any, id: string | number, setIsOpen: (isOpen: boolean) => void): void {\n this.id = id;\n this.setIsOpen = setIsOpen;\n this.handleEvent = function (event: Event) {\n if (getHintContainer(this.id)) {\n if (!(getHintContainer(this.id) as HTMLElement).contains(event?.target as Node)) {\n this.setIsOpen(false);\n }\n }\n };\n}\n"],"mappings":";AAAA,IAAa,sBAAsB,WAAoC,+BAA+B;AAEtG,SAAgB,iBAAiB,QAA6C;CAC5E,OAAO,SAAS,eAAe,mBAAmB,MAAM,CAAC;AAC3D;AAEA,SAAgB,gBAAoC;CAClD,OACE,SAAS,cAAc,UAAU,KAC9B,SAAS,cAAc,SAAS,KAChC,SAAS;AAEhB;AAEA,SAAgB,kBAAkB,QAAyB,uBAAkC;CAC3F,MAAM,EAAE,cAAc;CACtB,MAAM,gBAAgB,SAAS,cAAc,KAAK;CAElD,cAAc,aAAa,MAAM,mBAAmB,MAAM,CAAC;CAC3D,cAAc,UAAU,IAAI,iBAAiB;CAC7C,IAAI,WAAW,cAAc,UAAU,IAAI,SAAS;CAEpD,cAAc,CAAC,EAAE,OAAO,aAAa;AACvC;AAOA,SAAgB,gBAA2B,WAA4C;CACrF,KAAK,YAAY;CACjB,KAAK,cAAc,WAAY;EAC7B,KAAK,UAAU,KAAK;CACtB;AACF;AAEA,SAAgB,sBAAiC,IAAqB,WAA4C;CAChH,KAAK,KAAK;CACV,KAAK,YAAY;CACjB,KAAK,cAAc,SAAU,OAAc;EACzC,IAAI,iBAAiB,KAAK,EAAE;
|
|
1
|
+
{"version":3,"file":"_utils.js","names":[],"sources":["../../../../../../src/Atomic/UI/Hint/partials/_utils.ts"],"sourcesContent":["export const getHintContainerId = (hintId: string | number): string => `hint-container-for-hint--id-${hintId}`;\n\nexport function getHintContainer(hintId: string | number): HTMLElement | null {\n return document.getElementById(getHintContainerId(hintId));\n}\n\nexport function getParentNode(): HTMLElement | null {\n return (\n document.querySelector('div#root')\n ?? document.querySelector('div#app')\n ?? document.body\n );\n}\n\nexport function initHintContainer(hintId: string | number, hintContainerSettings: any): void {\n const { className } = hintContainerSettings;\n const hintContainer = document.createElement('div');\n\n hintContainer.setAttribute('id', getHintContainerId(hintId));\n hintContainer.classList.add('hint__container');\n if (className) hintContainer.classList.add(className);\n\n getParentNode()?.append(hintContainer);\n}\n\n// ? addEventListener можно инициализировать двумя способами\n// ? - передать прямой колбэк (ф-ю)\n// ? - передать объект в котором есть метод handleEvent (помимо handleEvent можно записать в this прочие полезные значения)\n// ? Пользуемся вторым способом, чтобы записать входные данные (вообще можно не писать, работает и просто от замыкания, но делаем по \"дзену\")\n// ! Метод написан с расчетом на то, что будет вызываться ТОЛЬКО открытым тултипом\nexport function HandleScrollObj(this: any, setIsOpen: (isOpen: boolean) => void): void {\n this.setIsOpen = setIsOpen;\n this.handleEvent = function () {\n this.setIsOpen(false);\n };\n}\n\nexport function HandleClickOutsideObj(this: any, id: string | number, setIsOpen: (isOpen: boolean) => void): void {\n this.id = id;\n this.setIsOpen = setIsOpen;\n this.handleEvent = function (event: Event) {\n if (getHintContainer(this.id)) {\n if (!(getHintContainer(this.id) as HTMLElement).contains(event?.target as Node)) {\n this.setIsOpen(false);\n }\n }\n };\n}\n"],"mappings":";AAAA,IAAa,sBAAsB,WAAoC,+BAA+B;AAEtG,SAAgB,iBAAiB,QAA6C;CAC5E,OAAO,SAAS,eAAe,mBAAmB,MAAM,CAAC;AAC3D;AAEA,SAAgB,gBAAoC;CAClD,OACE,SAAS,cAAc,UAAU,KAC9B,SAAS,cAAc,SAAS,KAChC,SAAS;AAEhB;AAEA,SAAgB,kBAAkB,QAAyB,uBAAkC;CAC3F,MAAM,EAAE,cAAc;CACtB,MAAM,gBAAgB,SAAS,cAAc,KAAK;CAElD,cAAc,aAAa,MAAM,mBAAmB,MAAM,CAAC;CAC3D,cAAc,UAAU,IAAI,iBAAiB;CAC7C,IAAI,WAAW,cAAc,UAAU,IAAI,SAAS;CAEpD,cAAc,CAAC,EAAE,OAAO,aAAa;AACvC;AAOA,SAAgB,gBAA2B,WAA4C;CACrF,KAAK,YAAY;CACjB,KAAK,cAAc,WAAY;EAC7B,KAAK,UAAU,KAAK;CACtB;AACF;AAEA,SAAgB,sBAAiC,IAAqB,WAA4C;CAChH,KAAK,KAAK;CACV,KAAK,YAAY;CACjB,KAAK,cAAc,SAAU,OAAc;EACzC,IAAI,iBAAiB,KAAK,EAAE,GACtB;OAAA,CAAE,iBAAiB,KAAK,EAAE,CAAC,CAAiB,SAAS,OAAO,MAAc,GAC5E,KAAK,UAAU,KAAK;EAAA;CAG1B;AACF"}
|