@skbkontur/react-ui 4.1.2 → 4.2.2
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/CHANGELOG.md +44 -0
- package/cjs/components/Autocomplete/Autocomplete.d.ts +3 -0
- package/cjs/components/Autocomplete/Autocomplete.js +12 -3
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Button/Button.d.ts +3 -0
- package/cjs/components/Button/Button.js +8 -4
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.d.ts +1 -1
- package/cjs/components/Button/Button.styles.js +6 -6
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Center/Center.d.ts +3 -0
- package/cjs/components/Center/Center.js +8 -3
- package/cjs/components/Center/Center.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.d.ts +3 -0
- package/cjs/components/Checkbox/Checkbox.js +8 -2
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.md +48 -0
- package/cjs/components/CurrencyInput/CurrencyInput.d.ts +4 -1
- package/cjs/components/CurrencyInput/CurrencyInput.js +23 -5
- package/cjs/components/CurrencyInput/CurrencyInput.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.d.ts +3 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +6 -2
- package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.d.ts +5 -0
- package/cjs/components/DatePicker/DatePicker.js +14 -3
- package/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/cjs/components/DatePicker/Picker.js +7 -2
- package/cjs/components/DatePicker/Picker.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.d.ts +3 -0
- package/cjs/components/Dropdown/Dropdown.js +7 -2
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/FileUploader/FileUploader.d.ts +5 -0
- package/cjs/components/FileUploader/FileUploader.js +10 -4
- package/cjs/components/FileUploader/FileUploader.js.map +1 -1
- package/cjs/components/FxInput/FxInput.d.ts +3 -0
- package/cjs/components/FxInput/FxInput.js +7 -3
- package/cjs/components/FxInput/FxInput.js.map +1 -1
- package/cjs/components/Gapped/Gapped.d.ts +4 -0
- package/cjs/components/Gapped/Gapped.js +9 -4
- package/cjs/components/Gapped/Gapped.js.map +1 -1
- package/cjs/components/GlobalLoader/GlobalLoader.d.ts +3 -0
- package/cjs/components/GlobalLoader/GlobalLoader.js +6 -2
- package/cjs/components/GlobalLoader/GlobalLoader.js.map +1 -1
- package/cjs/components/Group/Group.d.ts +3 -0
- package/cjs/components/Group/Group.js +7 -3
- package/cjs/components/Group/Group.js.map +1 -1
- package/cjs/components/Input/Input.d.ts +3 -0
- package/cjs/components/Input/Input.js +7 -3
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Link/Link.d.ts +4 -1
- package/cjs/components/Link/Link.js +8 -4
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Loader/Loader.d.ts +4 -0
- package/cjs/components/Loader/Loader.js +8 -3
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/MenuHeader/MenuHeader.d.ts +3 -0
- package/cjs/components/MenuHeader/MenuHeader.js +7 -2
- package/cjs/components/MenuHeader/MenuHeader.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.d.ts +5 -1
- package/cjs/components/MenuItem/MenuItem.js +11 -5
- package/cjs/components/MenuItem/MenuItem.js.map +1 -1
- package/cjs/components/MenuSeparator/MenuSeparator.d.ts +3 -0
- package/cjs/components/MenuSeparator/MenuSeparator.js +7 -3
- package/cjs/components/MenuSeparator/MenuSeparator.js.map +1 -1
- package/cjs/components/Modal/Modal.d.ts +5 -0
- package/cjs/components/Modal/Modal.js +9 -3
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/ModalClose.js +3 -2
- package/cjs/components/Modal/ModalClose.js.map +1 -1
- package/cjs/components/Modal/ModalFooter.d.ts +3 -0
- package/cjs/components/Modal/ModalFooter.js +8 -3
- package/cjs/components/Modal/ModalFooter.js.map +1 -1
- package/cjs/components/Modal/ModalHeader.d.ts +3 -0
- package/cjs/components/Modal/ModalHeader.js +9 -3
- package/cjs/components/Modal/ModalHeader.js.map +1 -1
- package/cjs/components/Paging/Paging.d.ts +8 -1
- package/cjs/components/Paging/Paging.js +15 -7
- package/cjs/components/Paging/Paging.js.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.d.ts +5 -0
- package/cjs/components/PasswordInput/PasswordInput.js +13 -5
- package/cjs/components/PasswordInput/PasswordInput.js.map +1 -1
- package/cjs/components/Radio/Radio.d.ts +3 -0
- package/cjs/components/Radio/Radio.js +7 -3
- package/cjs/components/Radio/Radio.js.map +1 -1
- package/cjs/components/RadioGroup/RadioGroup.d.ts +9 -0
- package/cjs/components/RadioGroup/RadioGroup.js +21 -4
- package/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/cjs/components/ResponsiveLayout/useResponsiveLayout.js +1 -1
- package/cjs/components/ResponsiveLayout/useResponsiveLayout.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.d.ts +4 -0
- package/cjs/components/ScrollContainer/ScrollContainer.js +14 -4
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/Select/Select.d.ts +3 -0
- package/cjs/components/Select/Select.js +11 -3
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +4 -0
- package/cjs/components/SidePage/SidePage.js +7 -2
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePageBody.d.ts +3 -0
- package/cjs/components/SidePage/SidePageBody.js +10 -3
- package/cjs/components/SidePage/SidePageBody.js.map +1 -1
- package/cjs/components/SidePage/SidePageContainer.d.ts +3 -0
- package/cjs/components/SidePage/SidePageContainer.js +7 -2
- package/cjs/components/SidePage/SidePageContainer.js.map +1 -1
- package/cjs/components/SidePage/SidePageFooter.d.ts +3 -0
- package/cjs/components/SidePage/SidePageFooter.js +11 -3
- package/cjs/components/SidePage/SidePageFooter.js.map +1 -1
- package/cjs/components/SidePage/SidePageHeader.d.ts +4 -0
- package/cjs/components/SidePage/SidePageHeader.js +9 -4
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/Spinner/Spinner.d.ts +3 -0
- package/cjs/components/Spinner/Spinner.js +7 -3
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Sticky/Sticky.d.ts +3 -0
- package/cjs/components/Sticky/Sticky.js +7 -3
- package/cjs/components/Sticky/Sticky.js.map +1 -1
- package/cjs/components/Switcher/Switcher.d.ts +3 -0
- package/cjs/components/Switcher/Switcher.js +7 -3
- package/cjs/components/Switcher/Switcher.js.map +1 -1
- package/cjs/components/Tabs/Indicator.js +4 -2
- package/cjs/components/Tabs/Indicator.js.map +1 -1
- package/cjs/components/Tabs/Tab.d.ts +3 -0
- package/cjs/components/Tabs/Tab.js +7 -2
- package/cjs/components/Tabs/Tab.js.map +1 -1
- package/cjs/components/Tabs/Tabs.d.ts +4 -0
- package/cjs/components/Tabs/Tabs.js +12 -3
- package/cjs/components/Tabs/Tabs.js.map +1 -1
- package/cjs/components/Textarea/Textarea.d.ts +4 -0
- package/cjs/components/Textarea/Textarea.js +8 -3
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Textarea/TextareaCounter.js +10 -9
- package/cjs/components/Textarea/TextareaCounter.js.map +1 -1
- package/cjs/components/Toast/Toast.d.ts +6 -0
- package/cjs/components/Toast/Toast.js +9 -2
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/ToastStatic.js +1 -1
- package/cjs/components/Toast/ToastStatic.js.map +1 -1
- package/cjs/components/Toast/ToastView.js +5 -4
- package/cjs/components/Toast/ToastView.js.map +1 -1
- package/cjs/components/Toggle/Toggle.d.ts +3 -0
- package/cjs/components/Toggle/Toggle.js +7 -3
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Token/Token.d.ts +3 -0
- package/cjs/components/Token/Token.js +8 -3
- package/cjs/components/Token/Token.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +4 -0
- package/cjs/components/TokenInput/TokenInput.js +7 -2
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/TokenInput/TokenInputMenu.js +4 -3
- package/cjs/components/TokenInput/TokenInputMenu.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.d.ts +4 -0
- package/cjs/components/Tooltip/Tooltip.js +9 -3
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.d.ts +3 -0
- package/cjs/components/TooltipMenu/TooltipMenu.js +7 -2
- package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/cjs/internal/Calendar/Calendar.d.ts +6 -0
- package/cjs/internal/Calendar/Calendar.js +9 -2
- package/cjs/internal/Calendar/Calendar.js.map +1 -1
- package/cjs/internal/Calendar/MonthView.js +5 -4
- package/cjs/internal/Calendar/MonthView.js.map +1 -1
- package/cjs/internal/CommonWrapper/CommonWrapper.d.ts +1 -0
- package/cjs/internal/CommonWrapper/CommonWrapper.js +4 -2
- package/cjs/internal/CommonWrapper/CommonWrapper.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.d.ts +7 -0
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js +23 -5
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js +4 -2
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.d.ts +3 -0
- package/cjs/internal/CustomComboBox/CustomComboBox.js +6 -2
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/cjs/internal/DataTids/DATATIDS.md +12 -0
- package/cjs/internal/DataTids/DataTids.d.ts +12 -0
- package/cjs/internal/DataTids/DataTids.js +46 -0
- package/cjs/internal/DataTids/DataTids.js.map +1 -0
- package/cjs/internal/DataTids/DataTids.styles.d.ts +7 -0
- package/cjs/internal/DataTids/DataTids.styles.js +41 -0
- package/cjs/internal/DataTids/DataTids.styles.js.map +1 -0
- package/cjs/internal/DataTids/componentsDataTids.d.ts +5 -0
- package/cjs/internal/DataTids/componentsDataTids.js +16 -0
- package/cjs/internal/DataTids/componentsDataTids.js.map +1 -0
- package/cjs/internal/DateSelect/DateSelect.d.ts +4 -0
- package/cjs/internal/DateSelect/DateSelect.js +8 -3
- package/cjs/internal/DateSelect/DateSelect.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +7 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js +14 -6
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts +3 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js +6 -2
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.d.ts +4 -0
- package/cjs/internal/InputLikeText/InputLikeText.js +10 -4
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/InternalMenu/InternalMenu.d.ts +3 -0
- package/cjs/internal/InternalMenu/InternalMenu.js +8 -3
- package/cjs/internal/InternalMenu/InternalMenu.js.map +1 -1
- package/cjs/internal/InternalMenu/InternalMenu.styles.js +2 -1
- package/cjs/internal/InternalMenu/InternalMenu.styles.js.map +1 -1
- package/cjs/internal/MaskedInput/MaskedInput.d.ts +3 -0
- package/cjs/internal/MaskedInput/MaskedInput.js +7 -3
- package/cjs/internal/MaskedInput/MaskedInput.js.map +1 -1
- package/cjs/internal/Menu/Menu.d.ts +3 -0
- package/cjs/internal/Menu/Menu.js +8 -3
- package/cjs/internal/Menu/Menu.js.map +1 -1
- package/cjs/internal/MobilePopup/MobilePopup.d.ts +4 -0
- package/cjs/internal/MobilePopup/MobilePopup.js +10 -3
- package/cjs/internal/MobilePopup/MobilePopup.js.map +1 -1
- package/cjs/internal/Popup/Popup.d.ts +5 -0
- package/cjs/internal/Popup/Popup.js +10 -4
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/Popup/PopupPin.js +2 -1
- package/cjs/internal/Popup/PopupPin.js.map +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.d.ts +4 -0
- package/cjs/internal/PopupMenu/PopupMenu.js +9 -4
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/RenderLayer/RenderLayer.d.ts +1 -0
- package/cjs/internal/RenderLayer/RenderLayer.js +8 -3
- package/cjs/internal/RenderLayer/RenderLayer.js.map +1 -1
- package/cjs/internal/icons/16px/index.js +1 -1
- package/cjs/internal/icons/16px/index.js.map +1 -1
- package/cjs/lib/listenFocusOutside.js +1 -1
- package/cjs/lib/listenFocusOutside.js.map +1 -1
- package/components/Autocomplete/Autocomplete/Autocomplete.js +10 -6
- package/components/Autocomplete/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +3 -0
- package/components/Button/Button/Button.js +5 -1
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +3 -0
- package/components/Button/Button.styles/Button.styles.js +6 -6
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Button/Button.styles.d.ts +1 -1
- package/components/Center/Center/Center.js +10 -5
- package/components/Center/Center/Center.js.map +1 -1
- package/components/Center/Center.d.ts +3 -0
- package/components/Checkbox/Checkbox/Checkbox.js +4 -0
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.d.ts +3 -0
- package/components/Checkbox/Checkbox.md +48 -0
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js +27 -12
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js.map +1 -1
- package/components/CurrencyInput/CurrencyInput.d.ts +4 -1
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +6 -1
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel.d.ts +3 -0
- package/components/DatePicker/DatePicker/DatePicker.js +6 -0
- package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +5 -0
- package/components/DatePicker/Picker/Picker.js +3 -1
- package/components/DatePicker/Picker/Picker.js.map +1 -1
- package/components/Dropdown/Dropdown/Dropdown.js +9 -5
- package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +3 -0
- package/components/FileUploader/FileUploader/FileUploader.js +9 -2
- package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
- package/components/FileUploader/FileUploader.d.ts +5 -0
- package/components/FxInput/FxInput/FxInput.js +6 -2
- package/components/FxInput/FxInput/FxInput.js.map +1 -1
- package/components/FxInput/FxInput.d.ts +3 -0
- package/components/Gapped/Gapped/Gapped.js +12 -5
- package/components/Gapped/Gapped/Gapped.js.map +1 -1
- package/components/Gapped/Gapped.d.ts +4 -0
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js +4 -1
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js.map +1 -1
- package/components/GlobalLoader/GlobalLoader.d.ts +3 -0
- package/components/Group/Group/Group.js +4 -0
- package/components/Group/Group/Group.js.map +1 -1
- package/components/Group/Group.d.ts +3 -0
- package/components/Input/Input/Input.js +11 -6
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.d.ts +3 -0
- package/components/Link/Link/Link.js +11 -6
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Link/Link.d.ts +4 -1
- package/components/Loader/Loader/Loader.js +10 -6
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +4 -0
- package/components/MenuHeader/MenuHeader/MenuHeader.js +4 -0
- package/components/MenuHeader/MenuHeader/MenuHeader.js.map +1 -1
- package/components/MenuHeader/MenuHeader.d.ts +3 -0
- package/components/MenuItem/MenuItem/MenuItem.js +16 -10
- package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +5 -1
- package/components/MenuSeparator/MenuSeparator/MenuSeparator.js +4 -0
- package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map +1 -1
- package/components/MenuSeparator/MenuSeparator.d.ts +3 -0
- package/components/Modal/Modal/Modal.js +7 -2
- package/components/Modal/Modal/Modal.js.map +1 -1
- package/components/Modal/Modal.d.ts +5 -0
- package/components/Modal/ModalClose/ModalClose.js +2 -1
- package/components/Modal/ModalClose/ModalClose.js.map +1 -1
- package/components/Modal/ModalFooter/ModalFooter.js +6 -2
- package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
- package/components/Modal/ModalFooter.d.ts +3 -0
- package/components/Modal/ModalHeader/ModalHeader.js +6 -2
- package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/components/Modal/ModalHeader.d.ts +3 -0
- package/components/Paging/Paging/Paging.js +12 -5
- package/components/Paging/Paging/Paging.js.map +1 -1
- package/components/Paging/Paging.d.ts +8 -1
- package/components/PasswordInput/PasswordInput/PasswordInput.js +12 -6
- package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
- package/components/PasswordInput/PasswordInput.d.ts +5 -0
- package/components/Radio/Radio/Radio.js +10 -5
- package/components/Radio/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.d.ts +3 -0
- package/components/RadioGroup/RadioGroup/RadioGroup.js +23 -11
- package/components/RadioGroup/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +9 -0
- package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js +1 -1
- package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +6 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.d.ts +4 -0
- package/components/Select/Select/Select.js +4 -0
- package/components/Select/Select/Select.js.map +1 -1
- package/components/Select/Select.d.ts +3 -0
- package/components/SidePage/SidePage/SidePage.js +6 -2
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +4 -0
- package/components/SidePage/SidePageBody/SidePageBody.js +10 -6
- package/components/SidePage/SidePageBody/SidePageBody.js.map +1 -1
- package/components/SidePage/SidePageBody.d.ts +3 -0
- package/components/SidePage/SidePageContainer/SidePageContainer.js +10 -6
- package/components/SidePage/SidePageContainer/SidePageContainer.js.map +1 -1
- package/components/SidePage/SidePageContainer.d.ts +3 -0
- package/components/SidePage/SidePageFooter/SidePageFooter.js +10 -6
- package/components/SidePage/SidePageFooter/SidePageFooter.js.map +1 -1
- package/components/SidePage/SidePageFooter.d.ts +3 -0
- package/components/SidePage/SidePageHeader/SidePageHeader.js +12 -7
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +4 -0
- package/components/Spinner/Spinner/Spinner.js +8 -4
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +3 -0
- package/components/Sticky/Sticky/Sticky.js +4 -0
- package/components/Sticky/Sticky/Sticky.js.map +1 -1
- package/components/Sticky/Sticky.d.ts +3 -0
- package/components/Switcher/Switcher/Switcher.js +4 -0
- package/components/Switcher/Switcher/Switcher.js.map +1 -1
- package/components/Switcher/Switcher.d.ts +3 -0
- package/components/Tabs/Indicator/Indicator.js +2 -0
- package/components/Tabs/Indicator/Indicator.js.map +1 -1
- package/components/Tabs/Tab/Tab.js +4 -0
- package/components/Tabs/Tab/Tab.js.map +1 -1
- package/components/Tabs/Tab.d.ts +3 -0
- package/components/Tabs/Tabs/Tabs.js +11 -6
- package/components/Tabs/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/Tabs.d.ts +4 -0
- package/components/Textarea/Textarea/Textarea.js +15 -9
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +4 -0
- package/components/Textarea/TextareaCounter/TextareaCounter.js +8 -3
- package/components/Textarea/TextareaCounter/TextareaCounter.js.map +1 -1
- package/components/Toast/Toast/Toast.js +16 -10
- package/components/Toast/Toast/Toast.js.map +1 -1
- package/components/Toast/Toast.d.ts +6 -0
- package/components/Toast/ToastStatic/ToastStatic.js +2 -2
- package/components/Toast/ToastStatic/ToastStatic.js.map +1 -1
- package/components/Toast/ToastView/ToastView.js +4 -3
- package/components/Toast/ToastView/ToastView.js.map +1 -1
- package/components/Toggle/Toggle/Toggle.js +8 -4
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +3 -0
- package/components/Token/Token/Token.js +4 -0
- package/components/Token/Token/Token.js.map +1 -1
- package/components/Token/Token.d.ts +3 -0
- package/components/TokenInput/TokenInput/TokenInput.js +5 -0
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +4 -0
- package/components/TokenInput/TokenInputMenu/TokenInputMenu.js +2 -0
- package/components/TokenInput/TokenInputMenu/TokenInputMenu.js.map +1 -1
- package/components/Tooltip/Tooltip/Tooltip.js +7 -1
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +4 -0
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +16 -12
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +3 -0
- package/internal/Calendar/Calendar/Calendar.js +7 -1
- package/internal/Calendar/Calendar/Calendar.js.map +1 -1
- package/internal/Calendar/Calendar.d.ts +6 -0
- package/internal/Calendar/MonthView/MonthView.js +4 -3
- package/internal/Calendar/MonthView/MonthView.js.map +1 -1
- package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js +4 -5
- package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js.map +1 -1
- package/internal/CommonWrapper/CommonWrapper.d.ts +1 -0
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js +12 -5
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxMenu.d.ts +7 -0
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +2 -0
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +3 -0
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +3 -0
- package/internal/DataTids/DATATIDS.md +12 -0
- package/internal/DataTids/DataTids/DataTids.js +69 -0
- package/internal/DataTids/DataTids/DataTids.js.map +1 -0
- package/internal/DataTids/DataTids/package.json +6 -0
- package/internal/DataTids/DataTids.d.ts +12 -0
- package/internal/DataTids/DataTids.styles/DataTids.styles.js +22 -0
- package/internal/DataTids/DataTids.styles/DataTids.styles.js.map +1 -0
- package/internal/DataTids/DataTids.styles/package.json +6 -0
- package/internal/DataTids/DataTids.styles.d.ts +7 -0
- package/internal/DataTids/componentsDataTids/componentsDataTids.js +14 -0
- package/internal/DataTids/componentsDataTids/componentsDataTids.js.map +1 -0
- package/internal/DataTids/componentsDataTids/package.json +6 -0
- package/internal/DataTids/componentsDataTids.d.ts +5 -0
- package/internal/DateSelect/DateSelect/DateSelect.js +6 -2
- package/internal/DateSelect/DateSelect/DateSelect.js.map +1 -1
- package/internal/DateSelect/DateSelect.d.ts +4 -0
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js +12 -5
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +7 -0
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList/FileUploaderFileList.js +4 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList/FileUploaderFileList.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts +3 -0
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +8 -2
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/InputLikeText/InputLikeText.d.ts +4 -0
- package/internal/InternalMenu/InternalMenu/InternalMenu.js +4 -0
- package/internal/InternalMenu/InternalMenu/InternalMenu.js.map +1 -1
- package/internal/InternalMenu/InternalMenu.d.ts +3 -0
- package/internal/InternalMenu/InternalMenu.styles/InternalMenu.styles.js +1 -1
- package/internal/InternalMenu/InternalMenu.styles/InternalMenu.styles.js.map +1 -1
- package/internal/MaskedInput/MaskedInput/MaskedInput.js +4 -0
- package/internal/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
- package/internal/MaskedInput/MaskedInput.d.ts +3 -0
- package/internal/Menu/Menu/Menu.js +4 -0
- package/internal/Menu/Menu/Menu.js.map +1 -1
- package/internal/Menu/Menu.d.ts +3 -0
- package/internal/MobilePopup/MobilePopup/MobilePopup.js +6 -0
- package/internal/MobilePopup/MobilePopup/MobilePopup.js.map +1 -1
- package/internal/MobilePopup/MobilePopup.d.ts +4 -0
- package/internal/Popup/Popup/Popup.js +7 -2
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/Popup/Popup.d.ts +5 -0
- package/internal/Popup/PopupPin/PopupPin.js +2 -0
- package/internal/Popup/PopupPin/PopupPin.js.map +1 -1
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +7 -2
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/PopupMenu/PopupMenu.d.ts +4 -0
- package/internal/RenderLayer/RenderLayer/RenderLayer.js +10 -7
- package/internal/RenderLayer/RenderLayer/RenderLayer.js.map +1 -1
- package/internal/RenderLayer/RenderLayer.d.ts +1 -0
- package/internal/icons/16px/index/index.js +1 -1
- package/internal/icons/16px/index/index.js.map +1 -1
- package/lib/listenFocusOutside/listenFocusOutside.js +1 -1
- package/lib/listenFocusOutside/listenFocusOutside.js.map +1 -1
- package/package.json +3 -3
|
@@ -11,13 +11,16 @@ import { responsiveLayout } from "../../ResponsiveLayout/decorator";
|
|
|
11
11
|
import { rootNode } from "../../../lib/rootNode";
|
|
12
12
|
import { styles } from "../SidePage.styles";
|
|
13
13
|
import { SidePageContext } from "../SidePageContext";
|
|
14
|
-
export
|
|
14
|
+
export var SidePageContainerDataTids = {
|
|
15
|
+
root: 'SidePageContainer__root'
|
|
16
|
+
};
|
|
15
17
|
/**
|
|
16
|
-
* Контейнер с отступами
|
|
17
|
-
*
|
|
18
|
-
* @visibleName SidePage.Container
|
|
19
|
-
*/
|
|
20
|
-
|
|
18
|
+
* Контейнер с отступами
|
|
19
|
+
*
|
|
20
|
+
* @visibleName SidePage.Container
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
export var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
21
24
|
_inheritsLoose(SidePageContainer, _React$Component);
|
|
22
25
|
|
|
23
26
|
function SidePageContainer() {
|
|
@@ -47,6 +50,7 @@ var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_temp = _cl
|
|
|
47
50
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
48
51
|
rootNodeRef: _this2.setRootNode
|
|
49
52
|
}, _this2.props), /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
"data-tid": SidePageContainerDataTids.root,
|
|
50
54
|
className: cx((_cx = {}, _cx[styles.container(_this2.theme)] = true, _cx[styles.containerWithoutHeader(_this2.theme)] = !hasHeader, _cx[styles.containerWithoutFooter(_this2.theme)] = !hasFooter, _cx[styles.containerWithPanel(_this2.theme)] = hasPanel, _cx[styles.mobileContainer(_this2.theme)] = _this2.isMobileLayout, _cx[styles.mobileContainerWithoutHeader(_this2.theme)] = _this2.isMobileLayout && !hasHeader, _cx))
|
|
51
55
|
}, _this2.props.children));
|
|
52
56
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","responsiveLayout","rootNode","styles","SidePageContext","SidePageContainer","render","theme","renderMain","hasHeader","hasFooter","hasPanel","setRootNode","props","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","Component","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAgC,mBAAhC
|
|
1
|
+
{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","responsiveLayout","rootNode","styles","SidePageContext","SidePageContainerDataTids","root","SidePageContainer","render","theme","renderMain","hasHeader","hasFooter","hasPanel","setRootNode","props","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","Component","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAgC,mBAAhC;;;;AAIA,OAAO,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,IAAI,EAAE,yBADiC,EAAlC;;;AAIP;AACA;AACA;AACA;AACA;;;AAGA,WAAaC,iBAAb,GAFCN,gBAED,UADCC,QACD;;;;;;;AAOSM,EAAAA,MAPT,GAOE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GAhBH;;AAkBSA,EAAAA,UAlBT,GAkBE,sBAAoB;AAClB;AACE,0BAAC,eAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUV,yBAAyB,CAACC,IADtC;AAEE,YAAA,SAAS,EAAEN,EAAE;AACVG,YAAAA,MAAM,CAACa,SAAP,CAAiB,MAAI,CAACP,KAAtB,CADU,IACqB,IADrB;AAEVN,YAAAA,MAAM,CAACc,sBAAP,CAA8B,MAAI,CAACR,KAAnC,CAFU,IAEkC,CAACE,SAFnC;AAGVR,YAAAA,MAAM,CAACe,sBAAP,CAA8B,MAAI,CAACT,KAAnC,CAHU,IAGkC,CAACG,SAHnC;AAIVT,YAAAA,MAAM,CAACgB,kBAAP,CAA0B,MAAI,CAACV,KAA/B,CAJU,IAI8BI,QAJ9B;AAKVV,YAAAA,MAAM,CAACiB,eAAP,CAAuB,MAAI,CAACX,KAA5B,CALU,IAK2B,MAAI,CAACY,cALhC;AAMVlB,YAAAA,MAAM,CAACmB,4BAAP,CAAoC,MAAI,CAACb,KAAzC,CANU,IAMwC,MAAI,CAACY,cAAL,IAAuB,CAACV,SANhE,OAFf;;;AAWG,UAAA,MAAI,CAACI,KAAL,CAAWQ,QAXd,CADF,CADD,GADH,CADF;;;;;;AAqBD,GAxCH,4BAAuC1B,KAAK,CAAC2B,SAA7C,WACgBC,mBADhB,GACsC,mBADtC","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext } from './SidePageContext';\n\nexport type SidePageContainerProps = CommonProps;\n\nexport const SidePageContainerDataTids = {\n root: 'SidePageContainer__root',\n} as const;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n\n private theme!: Theme;\n private isMobileLayout!: boolean;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain() {\n return (\n <SidePageContext.Consumer>\n {({ hasHeader, hasFooter, hasPanel }) => (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={SidePageContainerDataTids.root}\n className={cx({\n [styles.container(this.theme)]: true,\n [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n [styles.containerWithPanel(this.theme)]: hasPanel,\n [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n })}\n >\n {this.props.children}\n </div>\n </CommonWrapper>\n )}\n </SidePageContext.Consumer>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
3
3
|
export declare type SidePageContainerProps = CommonProps;
|
|
4
|
+
export declare const SidePageContainerDataTids: {
|
|
5
|
+
readonly root: "SidePageContainer__root";
|
|
6
|
+
};
|
|
4
7
|
/**
|
|
5
8
|
* Контейнер с отступами
|
|
6
9
|
*
|
|
@@ -14,13 +14,16 @@ import { getRootNode, rootNode } from "../../../lib/rootNode";
|
|
|
14
14
|
import { getDOMRect } from "../../../lib/dom/getDOMRect";
|
|
15
15
|
import { styles } from "../SidePage.styles";
|
|
16
16
|
import { SidePageContext } from "../SidePageContext";
|
|
17
|
-
export
|
|
17
|
+
export var SidePageFooterDataTids = {
|
|
18
|
+
root: 'SidePageFooter__root'
|
|
19
|
+
};
|
|
18
20
|
/**
|
|
19
|
-
* Футер сайдпейджа.
|
|
20
|
-
*
|
|
21
|
-
* @visibleName SidePage.Footer
|
|
22
|
-
*/
|
|
23
|
-
|
|
21
|
+
* Футер сайдпейджа.
|
|
22
|
+
*
|
|
23
|
+
* @visibleName SidePage.Footer
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
export var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
24
27
|
_inheritsLoose(SidePageFooter, _React$Component);
|
|
25
28
|
|
|
26
29
|
function SidePageFooter() {
|
|
@@ -122,6 +125,7 @@ var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
122
125
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
123
126
|
rootNodeRef: this.setRootNode
|
|
124
127
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
128
|
+
"data-tid": SidePageFooterDataTids.root,
|
|
125
129
|
style: {
|
|
126
130
|
height: this.getContentHeight()
|
|
127
131
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","ThemeContext","CommonWrapper","cx","responsiveLayout","getRootNode","rootNode","getDOMRect","styles","SidePageContext","SidePageFooter","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","setRootNode","height","getContentHeight","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"iPAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,WAAT,EAAsBC,QAAtB,QAAoD,oBAApD;AACA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD
|
|
1
|
+
{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","ThemeContext","CommonWrapper","cx","responsiveLayout","getRootNode","rootNode","getDOMRect","styles","SidePageContext","SidePageFooterDataTids","root","SidePageFooter","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","setRootNode","height","getContentHeight","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n /**\n * Включает серый цвет в футере\n */\n panel?: boolean;\n sticky?: boolean;\n}\n\nexport const SidePageFooterDataTids = {\n root: 'SidePageFooter__root',\n} as const;\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n private isMobileLayout!: boolean;\n\n public state = {\n fixed: false,\n };\n\n private theme!: Theme;\n private content: HTMLElement | null = null;\n private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.context.footerRef(this);\n this.update();\n this.layoutSub = LayoutEvents.addListener(this.update);\n this.context.setHasFooter?.();\n this.context.setHasPanel?.(this.props.panel);\n }\n\n public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n }\n\n public componentWillUnmount() {\n this.context.footerRef(null);\n if (this.layoutSub) {\n this.layoutSub.remove();\n }\n this.context.setHasFooter?.(false);\n this.context.setHasPanel?.(false);\n }\n\n public getSticky() {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public update = () => {\n this.setProperStyles();\n };\n\n private renderMain() {\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={SidePageFooterDataTids.root}\n style={{ height: this.getContentHeight() }}\n className={styles.footerWrapper()}\n >\n <SidePageContext.Consumer>\n {({ getWidth }) => (\n <div\n className={cx(styles.footer(this.theme), {\n [styles.positionStatic()]: !this.getSticky(),\n })}\n style={{\n width: getWidth(),\n }}\n >\n <div\n className={cx(styles.footerContent(this.theme), {\n [styles.footerFixed(this.theme)]: this.state.fixed,\n [styles.panel(this.theme)]: !!this.props.panel,\n [styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n })}\n ref={this.refContent}\n >\n {this.props.children}\n </div>\n </div>\n )}\n </SidePageContext.Consumer>\n </div>\n </CommonWrapper>\n );\n }\n\n private refContent = (node: HTMLElement | null) => {\n this.content = node;\n };\n\n private setProperStyles = () => {\n const wrapper = getRootNode(this);\n if (wrapper && this.content) {\n const wrapperRect = getDOMRect(wrapper);\n const contentRect = getDOMRect(this.content);\n const fixed = wrapperRect.top > contentRect.top;\n this.setState({ fixed });\n }\n };\n\n private getContentHeight() {\n if (!this.content) {\n return 'auto';\n }\n return getDOMRect(this.content).height;\n }\n}\n"]}
|
|
@@ -18,13 +18,17 @@ import { rootNode } from "../../../lib/rootNode";
|
|
|
18
18
|
import { getDOMRect } from "../../../lib/dom/getDOMRect";
|
|
19
19
|
import { styles } from "../SidePage.styles";
|
|
20
20
|
import { SidePageContext } from "../SidePageContext";
|
|
21
|
-
export
|
|
21
|
+
export var SidePageHeaderDataTids = {
|
|
22
|
+
root: 'SidePageHeader__root',
|
|
23
|
+
close: 'SidePage__close'
|
|
24
|
+
};
|
|
22
25
|
/**
|
|
23
|
-
* Шапка сайдпейджа
|
|
24
|
-
*
|
|
25
|
-
* @visibleName SidePage.Header
|
|
26
|
-
*/
|
|
27
|
-
|
|
26
|
+
* Шапка сайдпейджа
|
|
27
|
+
*
|
|
28
|
+
* @visibleName SidePage.Header
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
28
32
|
_inheritsLoose(SidePageHeader, _React$Component);
|
|
29
33
|
|
|
30
34
|
function SidePageHeader() {
|
|
@@ -102,7 +106,7 @@ var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
102
106
|
onFocus: _this.handleFocus,
|
|
103
107
|
onBlur: _this.handleBlur,
|
|
104
108
|
onClick: requestClose,
|
|
105
|
-
"data-tid":
|
|
109
|
+
"data-tid": SidePageHeaderDataTids.close,
|
|
106
110
|
tabIndex: 0
|
|
107
111
|
}, /*#__PURE__*/React.createElement(CrossIcon, null));
|
|
108
112
|
});
|
|
@@ -178,6 +182,7 @@ var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
178
182
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
179
183
|
rootNodeRef: this.setRootNode
|
|
180
184
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
185
|
+
"data-tid": SidePageHeaderDataTids.root,
|
|
181
186
|
ref: this.wrapperRef,
|
|
182
187
|
className: styles.headerWrapper()
|
|
183
188
|
}, isStickyDesktop || isStickyMobile ? /*#__PURE__*/React.createElement(Sticky, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","responsiveLayout","rootNode","getDOMRect","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"mTAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;;;;;;;;;;;;;;;AAmBA,OAPA;AACA;AACA;AACA;AACA,GAGA,IAAaC,cAAb,GAFCL,gBAED,UADCC,QACD,8WAISK,OAJT,GAIwC,MAAKA,OAJ7C;;;;AAQSC,IAAAA,KART,GAQsC;AAClCC,MAAAA,YAAY,EAAE,KADoB;AAElCC,MAAAA,YAAY,EAAE,KAFoB,EARtC;;;;AAcUC,IAAAA,OAdV,GAcwC,IAdxC;AAeUC,IAAAA,MAfV,GAekC,IAflC;AAgBUC,IAAAA,iBAhBV,GAgB8B,CAhB9B;;;;;;;;;;;;;;;;;;;AAmCSC,IAAAA,iBAnCT,GAmC6B,YAAM;AAC/BC,MAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,MAAKC,MAAvC,EAA+C,IAA/C;AACA,YAAKV,OAAL,CAAaW,YAAb,0BAAKX,OAAL,CAAaW,YAAb;AACA,YAAKX,OAAL,CAAaY,SAAb;AACD,KAvCH;;AAyCSC,IAAAA,oBAzCT,GAyCgC,YAAM;AAClCL,MAAAA,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqC,MAAKJ,MAA1C,EAAkD,IAAlD;AACA,YAAKV,OAAL,CAAaW,YAAb,0BAAKX,OAAL,CAAaW,YAAb,CAA4B,KAA5B;AACA,YAAKX,OAAL,CAAaY,SAAb,CAAuB,IAAvB;AACD,KA7CH;;AA+CSF,IAAAA,MA/CT,GA+CkB,YAAM;AACpB,4BAAKL,MAAL,kCAAaU,MAAb;AACA,YAAKC,gBAAL;AACD,KAlDH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGUC,IAAAA,YAhGV,GAgGyB,UAACC,KAAD,EAAmB,mBAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACxC;AACE;AACE,UAAA,SAAS,EAAE1B,EAAE,CAACK,MAAM,CAACsB,MAAP,CAAc,MAAKC,KAAnB,CAAD;AACVvB,UAAAA,MAAM,CAACwB,WAAP,CAAmB,MAAKD,KAAxB,CADU,IACuBF,KADvB;AAEVrB,UAAAA,MAAM,CAACyB,YAAP,CAAoB,MAAKF,KAAzB,CAFU,IAEwB,MAAKG,cAF7B,OADf;;;AAMG,cAAKC,WAAL,CAAiBN,KAAjB,CANH;AAOE;AACE,UAAA,SAAS,EAAE1B,EAAE,CAACK,MAAM,CAAC4B,KAAP,CAAa,MAAKL,KAAlB,CAAD;AACVvB,UAAAA,MAAM,CAAC6B,WAAP,CAAmB,MAAKN,KAAxB,CADU,IACuB,MAAKG,cAD5B;AAEV1B,UAAAA,MAAM,CAAC8B,UAAP,EAFU,IAEYT,KAFZ,QADf;;;AAMG7B,QAAAA,UAAU,CAAC,MAAKuC,KAAL,CAAWC,QAAZ,CAAV,GAAkC,MAAKD,KAAL,CAAWC,QAAX,CAAoBX,KAApB,CAAlC,GAA+D,MAAKU,KAAL,CAAWC,QAN7E,CAPF,CADF;;;;AAkBD,KAnHH;;AAqHUL,IAAAA,WArHV,GAqHwB,UAACN,KAAD,EAAoB;AACxC,UAAMY,YAAY,GAAGC,QAAQ,CAAC,MAAKX,KAAL,CAAWY,0BAAZ,CAA7B;AACA;AACE;AACE,UAAA,SAAS,EAAExC,EAAE,CAACK,MAAM,CAACoC,YAAP,CAAoB,MAAKb,KAAzB,CAAD;AACVvB,UAAAA,MAAM,CAACqC,iBAAP,CAAyB,MAAKd,KAA9B,CADU,IAC6BF,KAD7B;AAEVrB,UAAAA,MAAM,CAACsC,kBAAP,CAA0B,MAAKf,KAA/B,CAFU,IAE8B,MAAKG,cAFnC,QADf;;;AAMG,cAAKA,cAAL;AACC,cAAKa,SADN;;AAGC,4BAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,EAAmB,MAAM,EAAEN,YAA3B;AACG,cAAKM,SADR,CATJ,CADF;;;;;AAgBD,KAvIH;;AAyIUA,IAAAA,SAzIV,GAyIsB;AAClB,4BAAC,eAAD,CAAiB,QAAjB;AACG,sCAAGC,YAAH,QAAGA,YAAH;AACC;AACE,cAAA,SAAS,EAAE7C,EAAE,CAACK,MAAM,CAACyC,KAAP,CAAa,MAAKlB,KAAlB,CAAD;AACVvB,cAAAA,MAAM,CAAC0C,UAAP,CAAkB,MAAKnB,KAAvB,CADU,IACsB,MAAKnB,KAAL,CAAWE,YADjC,QADf;;AAIE,cAAA,OAAO,EAAE,MAAKqC,WAJhB;AAKE,cAAA,MAAM,EAAE,MAAKC,UALf;AAME,cAAA,OAAO,EAAEJ,YANX;AAOE,0BAAS,iBAPX;AAQE,cAAA,QAAQ,EAAE,CARZ;;AAUE,gCAAC,SAAD,OAVF,CADD,GADH,CADkB,GAzItB;;;;;;AA4JUrB,IAAAA,gBA5JV,GA4J6B,YAAM;AAC/B,UAAI,MAAKZ,OAAT,EAAkB;AAChB,YAAMsC,iBAAiB,GAAG9C,UAAU,CAAC,MAAKQ,OAAN,CAAV,CAAyBuC,GAAnD;AACA,YAAMzC,YAAY,GAAG,MAAK0C,aAAL,GAAqBF,iBAArB,IAA0C,MAAKG,iBAApE;AACA,cAAKC,QAAL,CAAc,UAAC7C,KAAD,UAAYA,KAAK,CAACC,YAAN,KAAuBA,YAAvB,gBAA2CD,KAA3C,IAAkDC,YAAY,EAAZA,YAAlD,MAAmED,KAA/E,EAAd;AACD;AACF,KAlKH;;AAoKU8C,IAAAA,UApKV,GAoKuB,UAACC,EAAD,EAA4B;AAC/C,YAAK5C,OAAL,GAAe4C,EAAf;AACD,KAtKH;;AAwKUC,IAAAA,SAxKV,GAwKsB,UAACD,EAAD,EAAuB;AACzC,YAAK3C,MAAL,GAAc2C,EAAd;AACD,KA1KH;;AA4KUR,IAAAA,WA5KV,GA4KwB,YAAM;AAC1BU,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAIzD,WAAW,CAAC0D,YAAhB,EAA8B;AAC5B,gBAAKL,QAAL,CAAc,EAAE3C,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,OAJoB,CAArB;AAKD,KAlLH;;AAoLUsC,IAAAA,UApLV,GAoLuB,YAAM;AACzB,YAAKK,QAAL,CAAc,EAAE3C,YAAY,EAAE,KAAhB,EAAd;AACD,KAtLH,4DAoDSiD,MApDT,GAoDE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAChC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACiC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CA7DH,QA+DSC,aA/DT,GA+DE,yBAAuB,CACrB,IAAI,OAAO,KAAK1B,KAAL,CAAWvB,MAAlB,KAA6B,WAAjC,EAA8C,CAC5C,OAAO,KAAKuB,KAAL,CAAWvB,MAAlB,CACD,CAED,IAAI,KAAKkB,cAAT,EAAyB,CACvB,OAAO,KAAP,CACD,CAED,OAAO,IAAP,CACD,CAzEH,QA2EU8B,UA3EV,GA2EE,sBAAqB,CACnB,IAAQnD,YAAR,GAAyB,KAAKD,KAA9B,CAAQC,YAAR,CAEA,IAAMqD,eAAe,GAAG,CAAC,KAAKhC,cAAN,IAAwB,KAAK+B,aAAL,EAAxB,IAAgDpD,YAAxE,CACA,IAAMsD,cAAc,GAAG,KAAKjC,cAAL,IAAuB,KAAK+B,aAAL,EAA9C,CAEA,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKG,WAAjC,IAAkD,KAAK7B,KAAvD,gBACE,6BAAK,GAAG,EAAE,KAAKmB,UAAf,EAA2B,SAAS,EAAElD,MAAM,CAAC6D,aAAP,EAAtC,IACGH,eAAe,IAAIC,cAAnB,gBACC,oBAAC,MAAD,IAAQ,GAAG,EAAE,KAAKP,SAAlB,EAA6B,IAAI,EAAC,KAAlC,IACG,KAAKhC,YADR,CADD,GAKC,KAAKA,YAAL,EANJ,CADF,CADF,CAaD,CA9FH,4DAmBE,eAAmC,CACjC,IAAQf,YAAR,GAAyB,KAAKD,KAA9B,CAAQC,YAAR,CACA,IAAI,CAAC,KAAKE,OAAV,EAAmB,CACjB,OAAO,CAAP,CACD,CACD,IAAI,CAACF,YAAL,EAAmB,CACjB,KAAKI,iBAAL,GAAyBV,UAAU,CAAC,KAAKQ,OAAN,CAAV,CAAyBuD,MAAlD,CACD,CACD,OAAO,KAAKrD,iBAAZ,CACD,CA5BH,qCA8BE,eAAuC,CACrC,IAAQc,KAAR,GAAkB,IAAlB,CAAQA,KAAR,CACA,OAAOW,QAAQ,CAACX,KAAK,CAACwC,6BAAP,CAAR,GAAgD7B,QAAQ,CAACX,KAAK,CAACyC,2BAAP,CAAR,GAA8C,CAArG,CACD,CAjCH,6BAAoC3E,KAAK,CAAC4E,SAA1C,WACgBC,mBADhB,GACsC,gBADtC,UAGgBC,WAHhB,GAG8BlE,eAH9B","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n private isMobileLayout!: boolean;\n\n public state: SidePageHeaderState = {\n isReadyToFix: false,\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement | null = null;\n private sticky: Sticky | null = null;\n private lastRegularHeight = 0;\n private setRootNode!: TSetRootNode;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = getDOMRect(this.wrapper).height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n this.context.headerRef(this);\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n this.context.headerRef(null);\n };\n\n public update = () => {\n this.sticky?.reflow();\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getStickyProp() {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n\n const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n {isStickyDesktop || isStickyMobile ? (\n <Sticky ref={this.stickyRef} side=\"top\">\n {this.renderHeader}\n </Sticky>\n ) : (\n this.renderHeader()\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div\n className={cx(styles.header(this.theme), {\n [styles.headerFixed(this.theme)]: fixed,\n [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.renderClose(fixed)}\n <div\n className={cx(styles.title(this.theme), {\n [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n [styles.titleFixed()]: fixed,\n })}\n >\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n return (\n <div\n className={cx(styles.wrapperClose(this.theme), {\n [styles.wrapperCloseFixed(this.theme)]: fixed,\n [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.isMobileLayout ? (\n this.closeIcon\n ) : (\n <Sticky side=\"top\" offset={stickyOffset}>\n {this.closeIcon}\n </Sticky>\n )}\n </div>\n );\n };\n\n private closeIcon = () => (\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <button\n className={cx(styles.close(this.theme), {\n [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={requestClose}\n data-tid=\"SidePage__close\"\n tabIndex={0}\n >\n <CrossIcon />\n </button>\n )}\n </SidePageContext.Consumer>\n );\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = getDOMRect(this.wrapper).top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement | null) => {\n this.wrapper = el;\n };\n\n private stickyRef = (el: Sticky | null) => {\n this.sticky = el;\n };\n\n private handleFocus = () => {\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","responsiveLayout","rootNode","getDOMRect","styles","SidePageContext","SidePageHeaderDataTids","root","close","SidePageHeader","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n focusedByTab: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n root: 'SidePageHeader__root',\n close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n private isMobileLayout!: boolean;\n\n public state: SidePageHeaderState = {\n isReadyToFix: false,\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement | null = null;\n private sticky: Sticky | null = null;\n private lastRegularHeight = 0;\n private setRootNode!: TSetRootNode;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = getDOMRect(this.wrapper).height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n this.context.headerRef(this);\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n this.context.headerRef(null);\n };\n\n public update = () => {\n this.sticky?.reflow();\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getStickyProp() {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n\n const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n {isStickyDesktop || isStickyMobile ? (\n <Sticky ref={this.stickyRef} side=\"top\">\n {this.renderHeader}\n </Sticky>\n ) : (\n this.renderHeader()\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div\n className={cx(styles.header(this.theme), {\n [styles.headerFixed(this.theme)]: fixed,\n [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.renderClose(fixed)}\n <div\n className={cx(styles.title(this.theme), {\n [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n [styles.titleFixed()]: fixed,\n })}\n >\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n return (\n <div\n className={cx(styles.wrapperClose(this.theme), {\n [styles.wrapperCloseFixed(this.theme)]: fixed,\n [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.isMobileLayout ? (\n this.closeIcon\n ) : (\n <Sticky side=\"top\" offset={stickyOffset}>\n {this.closeIcon}\n </Sticky>\n )}\n </div>\n );\n };\n\n private closeIcon = () => (\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <button\n className={cx(styles.close(this.theme), {\n [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={requestClose}\n data-tid={SidePageHeaderDataTids.close}\n tabIndex={0}\n >\n <CrossIcon />\n </button>\n )}\n </SidePageContext.Consumer>\n );\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = getDOMRect(this.wrapper).top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement | null) => {\n this.wrapper = el;\n };\n\n private stickyRef = (el: Sticky | null) => {\n this.sticky = el;\n };\n\n private handleFocus = () => {\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n}\n"]}
|
|
@@ -9,6 +9,10 @@ export interface SidePageHeaderState {
|
|
|
9
9
|
isReadyToFix: boolean;
|
|
10
10
|
focusedByTab: boolean;
|
|
11
11
|
}
|
|
12
|
+
export declare const SidePageHeaderDataTids: {
|
|
13
|
+
readonly root: "SidePageHeader__root";
|
|
14
|
+
readonly close: "SidePage__close";
|
|
15
|
+
};
|
|
12
16
|
/**
|
|
13
17
|
* Шапка сайдпейджа
|
|
14
18
|
*
|
|
@@ -18,11 +18,14 @@ var types = {
|
|
|
18
18
|
mini: 'mini',
|
|
19
19
|
normal: 'normal'
|
|
20
20
|
};
|
|
21
|
-
export
|
|
21
|
+
export var SpinnerDataTids = {
|
|
22
|
+
root: 'Spinner__root'
|
|
23
|
+
};
|
|
22
24
|
/**
|
|
23
|
-
* DRAFT - инлайн-лоадер
|
|
24
|
-
*/
|
|
25
|
-
|
|
25
|
+
* DRAFT - инлайн-лоадер
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
export var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
26
29
|
_inheritsLoose(Spinner, _React$Component);
|
|
27
30
|
|
|
28
31
|
function Spinner() {
|
|
@@ -77,6 +80,7 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
|
|
|
77
80
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
78
81
|
rootNodeRef: this.setRootNode
|
|
79
82
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
"data-tid": SpinnerDataTids.root,
|
|
80
84
|
className: styles.spinner()
|
|
81
85
|
}, /*#__PURE__*/React.createElement("span", {
|
|
82
86
|
className: styles.inner()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","styles","SpinnerLocaleHelper","types","big","mini","normal","Spinner","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"iKAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,MAAT,QAAuB,6BAAvB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,WAAT,QAA4B,kCAA5B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAAwBC,mBAAxB,QAAmD,UAAnD;;AAEA,IAAMC,KAAuC,GAAG;AAC9CC,EAAAA,GAAG,EAAE,KADyC;AAE9CC,EAAAA,IAAI,EAAE,MAFwC;AAG9CC,EAAAA,MAAM,EAAE,QAHsC,EAAhD
|
|
1
|
+
{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","styles","SpinnerLocaleHelper","types","big","mini","normal","SpinnerDataTids","root","Spinner","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n big: 'big',\n mini: 'mini',\n normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n caption?: React.ReactNode;\n dimmed?: boolean;\n /**\n * Тип спиннера\n * @default normal\n */\n type: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(Object.keys(types)),\n };\n\n public static defaultProps: SpinnerProps = {\n type: 'normal',\n };\n\n public static Types: typeof types = types;\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { type, caption = this.locale.loading, dimmed, inline } = this.props;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation(this.theme)]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
|
|
@@ -15,6 +15,9 @@ import { rootNode } from "../../../lib/rootNode";
|
|
|
15
15
|
import { getDOMRect } from "../../../lib/dom/getDOMRect";
|
|
16
16
|
import { styles } from "../Sticky.styles";
|
|
17
17
|
var MAX_REFLOW_RETRIES = 5;
|
|
18
|
+
export var StickyDataTids = {
|
|
19
|
+
root: 'Spinner__root'
|
|
20
|
+
};
|
|
18
21
|
export var Sticky = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
19
22
|
_inheritsLoose(Sticky, _React$Component);
|
|
20
23
|
|
|
@@ -180,6 +183,7 @@ export var Sticky = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
180
183
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
181
184
|
rootNodeRef: this.setRootNode
|
|
182
185
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
186
|
+
"data-tid": StickyDataTids.root,
|
|
183
187
|
ref: this.refWrapper,
|
|
184
188
|
className: styles.wrapper()
|
|
185
189
|
}, /*#__PURE__*/React.createElement(ZIndex, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Sticky.tsx"],"names":["React","PropTypes","shallowEqual","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","getDOMRect","styles","MAX_REFLOW_RETRIES","Sticky","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","container","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,YAAP,MAAyB,cAAzB;;AAEA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;;AAEA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,IAAMC,kBAAkB,GAAG,CAA3B;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,WAAaC,MAAb,GADCJ,QACD;;;;;;;;;;;;;;;;;;;;;AAqBSK,IAAAA,KArBT,GAqB8B;AAC1BC,MAAAA,KAAK,EAAE,KADmB;AAE1BC,MAAAA,WAAW,EAAE,CAFa;AAG1BC,MAAAA,OAAO,EAAE,KAHiB;AAI1BC,MAAAA,WAAW,EAAE,CAJa,EArB9B;;;;;AA8BUC,IAAAA,kBA9BV,GA8BiE,EAAEC,MAAM,EAAE,IAAV,EA9BjE;AA+BUC,IAAAA,aA/BV,GA+B0B,CA/B1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGUC,IAAAA,UAnGV,GAmGuB,UAACC,GAAD,UAAiC,MAAKC,OAAL,GAAeD,GAAhD,EAnGvB;;AAqGUE,IAAAA,QArGV,GAqGqB,UAACF,GAAD,UAAiC,MAAKG,KAAL,GAAaH,GAA9C,EArGrB;;;;;;;AA4GSI,IAAAA,MA5GT,GA4GkB,YAAM;AACpB,sBAA4BC,QAA5B,CAAQC,eAAR,aAAQA,eAAR;;AAEA,UAAI,CAACA,eAAL,EAAsB;AACpB,cAAMC,KAAK,CAAC,2CAAD,CAAX;AACD;;AAED,UAAMC,YAAY,GAAGC,MAAM,CAACC,WAAP,IAAsBJ,eAAe,CAACK,YAA3D;AACA,UAAI,CAAC,MAAKV,OAAN,IAAiB,CAAC,MAAKE,KAA3B,EAAkC;AAChC;AACD;AACD,wBAA8BhB,UAAU,CAAC,MAAKc,OAAN,CAAxC,CAAQW,GAAR,eAAQA,GAAR,CAAaC,MAAb,eAAaA,MAAb,CAAqBC,IAArB,eAAqBA,IAArB;AACA,yBAA0B3B,UAAU,CAAC,MAAKgB,KAAN,CAApC,CAAQY,KAAR,gBAAQA,KAAR,CAAeC,MAAf,gBAAeA,MAAf;AACA,wBAAkC,MAAKC,KAAvC,CAAQC,MAAR,eAAQA,MAAR,CAAgBC,OAAhB,eAAgBA,OAAhB,CAAyBC,IAAzB,eAAyBA,IAAzB;AACA,wBAA0D,MAAK7B,KAA/D,CAAe8B,SAAf,eAAQ7B,KAAR,kCAA0BwB,MAA1B,CAAkCM,UAAlC,mCAA+CN,MAA/C;AACA,UAAMxB,KAAK,GAAG4B,IAAI,KAAK,KAAT,GAAiBR,GAAG,GAAGM,MAAvB,GAAgCK,IAAI,CAACC,KAAL,CAAWX,MAAX,IAAqBL,YAAY,GAAGU,MAAlF;;AAEA,YAAKO,QAAL,CAAc,EAAEjC,KAAK,EAALA,KAAF,EAASsB,IAAI,EAAJA,IAAT,EAAd;;AAEA,UAAItB,KAAK,IAAI,CAAC6B,SAAd,EAAyB;AACvB,cAAKI,QAAL,CAAc,EAAEV,KAAK,EAALA,KAAF,EAASC,MAAM,EAANA,MAAT,EAAd;AACD;;AAED,UAAIxB,KAAJ,EAAW;AACT,YAAMkC,IAAI,GAAGP,OAAO,IAAIA,OAAO,EAA/B;AACA,YAAIO,IAAJ,EAAU;AACR,cAAMjC,WAAW,GAAG6B,UAAU,GAAGN,MAAjC;AACA,cAAMW,QAAQ,GAAGxC,UAAU,CAACuC,IAAD,CAA3B;AACA,cAAME,WAAW,GAAGZ,MAAM,GAAGE,MAA7B;AACA,cAAIxB,OAAO,GAAG,KAAd;AACA,cAAIC,WAAW,GAAG,CAAlB;;AAEA,cAAIyB,IAAI,KAAK,KAAb,EAAoB;AAClB1B,YAAAA,OAAO,GAAGiC,QAAQ,CAACf,GAAT,GAAegB,WAAf,GAA6B,CAAvC;AACAjC,YAAAA,WAAW,GAAGgC,QAAQ,CAACf,GAAT,GAAeU,UAAf,GAA4BV,GAA1C;AACD,WAHD,MAGO;AACLlB,YAAAA,OAAO,GAAGiC,QAAQ,CAACd,MAAT,GAAkBe,WAAlB,GAAgCpB,YAA1C;AACAb,YAAAA,WAAW,GAAGgC,QAAQ,CAACd,MAAT,GAAkBD,GAAhC;AACD;;AAED,gBAAKa,QAAL,CAAc,EAAE9B,WAAW,EAAXA,WAAF,EAAeF,WAAW,EAAXA,WAAf,EAA4BC,OAAO,EAAPA,OAA5B,EAAd;AACD;AACF;AACF,KAvJH,oDAkCSmC,iBAlCT,GAkCE,6BAA2B,CACzB,KAAKzB,MAAL,GAEA,KAAKR,kBAAL,GAA0Bf,YAAY,CAACiD,WAAb,CAAyB,KAAK1B,MAA9B,CAA1B,CACD,CAtCH,QAwCS2B,oBAxCT,GAwCE,gCAA8B,CAC5B,IAAI,KAAKnC,kBAAL,CAAwBC,MAA5B,EAAoC,CAClC,KAAKD,kBAAL,CAAwBC,MAAxB,GACD,CACF,CA5CH,QA8CSmC,kBA9CT,GA8CE,4BAA0BC,SAA1B,EAAkDC,SAAlD,EAA0E,CACxE,IAAI,CAACtD,YAAY,CAACqD,SAAD,EAAY,KAAKhB,KAAjB,CAAb,IAAwC,CAACrC,YAAY,CAACsD,SAAD,EAAY,KAAK3C,KAAjB,CAAzD,EAAkF,CAChF,IAAI,KAAKO,aAAL,GAAqBT,kBAAzB,EAA6C,CAC3CR,YAAY,CAACsD,IAAb,GACA,KAAKrC,aAAL,IAAsB,CAAtB,CACA,OACD,CACF,CACD,KAAKA,aAAL,GAAqB,CAArB,CACD,CAvDH,QAyDSsC,MAzDT,GAyDE,kBAAgB,SACd,IAAMC,QAAN,GAAmB,KAAKpB,KAAxB,CAAMoB,QAAN,CACA,mBAAyB,KAAKpB,KAA9B,CAAQG,IAAR,gBAAQA,IAAR,CAAcF,MAAd,gBAAcA,MAAd,CACA,mBAA0E,KAAK3B,KAA/E,CAAQC,KAAR,gBAAQA,KAAR,CAAeE,OAAf,gBAAeA,OAAf,CAAwBC,WAAxB,gBAAwBA,WAAxB,CAAqCF,WAArC,gBAAqCA,WAArC,CAAkDsB,KAAlD,gBAAkDA,KAAlD,CAAyDC,MAAzD,gBAAyDA,MAAzD,CAAiEF,IAAjE,gBAAiEA,IAAjE,CACA,IAAMwB,UAA+B,GAAG,EAAxC,CAEA,IAAI9C,KAAJ,EAAW,CACT,IAAIE,OAAJ,EAAa,CACX4C,UAAU,CAAC1B,GAAX,GAAiBjB,WAAjB,CACA2C,UAAU,CAAClB,IAAI,KAAK,KAAT,GAAiB,WAAjB,GAA+B,cAAhC,CAAV,GAA4D3B,WAA5D,CACD,CAHD,MAGO,CACL6C,UAAU,CAACvB,KAAX,GAAmBA,KAAnB,CACAuB,UAAU,CAAClB,IAAD,CAAV,GAAmBF,MAAnB,CACAoB,UAAU,CAACxB,IAAX,GAAkBA,IAAlB,CACD,CACF,CAED,IAAIhC,UAAU,CAACuD,QAAD,CAAd,EAA0B,CACxBA,QAAQ,GAAGA,QAAQ,CAAC7C,KAAD,CAAnB,CACD,CAED,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAK+C,WAAjC,IAAkD,KAAKtB,KAAvD,gBACE,6BAAK,GAAG,EAAE,KAAKlB,UAAf,EAA2B,SAAS,EAAEX,MAAM,CAACa,OAAP,EAAtC,iBACE,oBAAC,MAAD,IACE,QAAQ,EAAC,QADX,EAEE,WAAW,EAAET,KAFf,EAGE,SAAS,EAAEP,EAAE,CAACG,MAAM,CAACe,KAAP,EAAD,iBACVf,MAAM,CAACI,KAAP,EADU,IACOA,KAAK,IAAI,CAACE,OADjB,MAEVN,MAAM,CAACM,OAAP,EAFU,IAESA,OAFT,OAHf,EAOE,KAAK,EAAE4C,UAPT,EAQE,UAAU,EAAE,KAAKpC,QARnB,iBAUE,6BAAK,SAAS,EAAEd,MAAM,CAACoD,SAAP,EAAhB,IAAqCH,QAArC,CAVF,CADF,EAaG7C,KAAK,IAAI,CAACE,OAAV,gBAAoB,6BAAK,KAAK,EAAE,EAAEqB,KAAK,EAALA,KAAF,EAASC,MAAM,EAANA,MAAT,EAAZ,GAApB,GAAwD,IAb3D,CADF,CADF,CAmBD,CAjGH,iBAA4BtC,KAAK,CAAC+D,SAAlC,WACgBC,mBADhB,GACsC,QADtC,UAGgBC,SAHhB,GAG4B,EACxBN,QAAQ,EAAE1D,SAAS,CAACiE,SAAV,CAAoB,CAACjE,SAAS,CAACkE,IAAX,EAAiBlE,SAAS,CAACmE,IAA3B,CAApB,CADc,EAGxB;AACJ;AACA,KACI3B,OAAO,EAAExC,SAAS,CAACmE,IANK,EAQxB;AACJ;AACA,KACI5B,MAAM,EAAEvC,SAAS,CAACoE,MAXM,EAaxB3B,IAAI,EAAEzC,SAAS,CAACqE,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,CAAhB,EAAmCC,UAbjB,EAH5B,UAmBgBC,YAnBhB,GAmB+B,EAAEhC,MAAM,EAAE,CAAV,EAnB/B","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n side: 'top' | 'bottom';\n /**\n * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n * @default 0\n */\n offset: number;\n getStop?: () => Nullable<HTMLElement>;\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n fixed: boolean;\n deltaHeight: number;\n height?: number;\n width?: number;\n left?: number;\n stopped: boolean;\n relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n\n public static propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n /**\n * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n */\n getStop: PropTypes.func,\n\n /**\n * Отступ от границы в пикселях\n */\n offset: PropTypes.number,\n\n side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n };\n\n public static defaultProps = { offset: 0 };\n\n public state: StickyState = {\n fixed: false,\n deltaHeight: 0,\n stopped: false,\n relativeTop: 0,\n };\n\n private wrapper: Nullable<HTMLElement>;\n private inner: Nullable<HTMLElement>;\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n private reflowCounter = 0;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.reflow();\n\n this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n }\n\n public componentWillUnmount() {\n if (this.layoutSubscription.remove) {\n this.layoutSubscription.remove();\n }\n }\n\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n LayoutEvents.emit();\n this.reflowCounter += 1;\n return;\n }\n }\n this.reflowCounter = 0;\n }\n\n public render() {\n let { children } = this.props;\n const { side, offset } = this.props;\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n const innerStyle: React.CSSProperties = {};\n\n if (fixed) {\n if (stopped) {\n innerStyle.top = relativeTop;\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n } else {\n innerStyle.width = width;\n innerStyle[side] = offset;\n innerStyle.left = left;\n }\n }\n\n if (isFunction(children)) {\n children = children(fixed);\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div ref={this.refWrapper} className={styles.wrapper()}>\n <ZIndex\n priority=\"Sticky\"\n applyZIndex={fixed}\n className={cx(styles.inner(), {\n [styles.fixed()]: fixed && !stopped,\n [styles.stopped()]: stopped,\n })}\n style={innerStyle}\n wrapperRef={this.refInner}\n >\n <div className={styles.container()}>{children}</div>\n </ZIndex>\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\n </div>\n </CommonWrapper>\n );\n }\n\n private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n /**\n * Пересчитать габариты и позицию залипшего элемента\n *\n * @public\n */\n public reflow = () => {\n const { documentElement } = document;\n\n if (!documentElement) {\n throw Error('There is no \"documentElement\" in document');\n }\n\n const windowHeight = window.innerHeight || documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left } = getDOMRect(this.wrapper);\n const { width, height } = getDOMRect(this.inner);\n const { offset, getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n this.setState({ fixed, left });\n\n if (fixed && !prevFixed) {\n this.setState({ width, height });\n }\n\n if (fixed) {\n const stop = getStop && getStop();\n if (stop) {\n const deltaHeight = prevHeight - height;\n const stopRect = getDOMRect(stop);\n const outerHeight = height + offset;\n let stopped = false;\n let relativeTop = 0;\n\n if (side === 'top') {\n stopped = stopRect.top - outerHeight < 0;\n relativeTop = stopRect.top - prevHeight - top;\n } else {\n stopped = stopRect.bottom + outerHeight > windowHeight;\n relativeTop = stopRect.bottom - top;\n }\n\n this.setState({ relativeTop, deltaHeight, stopped });\n }\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Sticky.tsx"],"names":["React","PropTypes","shallowEqual","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","getDOMRect","styles","MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","container","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n side: 'top' | 'bottom';\n /**\n * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n * @default 0\n */\n offset: number;\n getStop?: () => Nullable<HTMLElement>;\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n fixed: boolean;\n deltaHeight: number;\n height?: number;\n width?: number;\n left?: number;\n stopped: boolean;\n relativeTop: number;\n}\n\nexport const StickyDataTids = {\n root: 'Spinner__root',\n} as const;\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n\n public static propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n /**\n * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n */\n getStop: PropTypes.func,\n\n /**\n * Отступ от границы в пикселях\n */\n offset: PropTypes.number,\n\n side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n };\n\n public static defaultProps = { offset: 0 };\n\n public state: StickyState = {\n fixed: false,\n deltaHeight: 0,\n stopped: false,\n relativeTop: 0,\n };\n\n private wrapper: Nullable<HTMLElement>;\n private inner: Nullable<HTMLElement>;\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n private reflowCounter = 0;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.reflow();\n\n this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n }\n\n public componentWillUnmount() {\n if (this.layoutSubscription.remove) {\n this.layoutSubscription.remove();\n }\n }\n\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n LayoutEvents.emit();\n this.reflowCounter += 1;\n return;\n }\n }\n this.reflowCounter = 0;\n }\n\n public render() {\n let { children } = this.props;\n const { side, offset } = this.props;\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n const innerStyle: React.CSSProperties = {};\n\n if (fixed) {\n if (stopped) {\n innerStyle.top = relativeTop;\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n } else {\n innerStyle.width = width;\n innerStyle[side] = offset;\n innerStyle.left = left;\n }\n }\n\n if (isFunction(children)) {\n children = children(fixed);\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>\n <ZIndex\n priority=\"Sticky\"\n applyZIndex={fixed}\n className={cx(styles.inner(), {\n [styles.fixed()]: fixed && !stopped,\n [styles.stopped()]: stopped,\n })}\n style={innerStyle}\n wrapperRef={this.refInner}\n >\n <div className={styles.container()}>{children}</div>\n </ZIndex>\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\n </div>\n </CommonWrapper>\n );\n }\n\n private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n /**\n * Пересчитать габариты и позицию залипшего элемента\n *\n * @public\n */\n public reflow = () => {\n const { documentElement } = document;\n\n if (!documentElement) {\n throw Error('There is no \"documentElement\" in document');\n }\n\n const windowHeight = window.innerHeight || documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left } = getDOMRect(this.wrapper);\n const { width, height } = getDOMRect(this.inner);\n const { offset, getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n this.setState({ fixed, left });\n\n if (fixed && !prevFixed) {\n this.setState({ width, height });\n }\n\n if (fixed) {\n const stop = getStop && getStop();\n if (stop) {\n const deltaHeight = prevHeight - height;\n const stopRect = getDOMRect(stop);\n const outerHeight = height + offset;\n let stopped = false;\n let relativeTop = 0;\n\n if (side === 'top') {\n stopped = stopRect.top - outerHeight < 0;\n relativeTop = stopRect.top - prevHeight - top;\n } else {\n stopped = stopRect.bottom + outerHeight > windowHeight;\n relativeTop = stopRect.bottom - top;\n }\n\n this.setState({ relativeTop, deltaHeight, stopped });\n }\n }\n };\n}\n"]}
|
|
@@ -21,6 +21,9 @@ export interface StickyState {
|
|
|
21
21
|
stopped: boolean;
|
|
22
22
|
relativeTop: number;
|
|
23
23
|
}
|
|
24
|
+
export declare const StickyDataTids: {
|
|
25
|
+
readonly root: "Spinner__root";
|
|
26
|
+
};
|
|
24
27
|
export declare class Sticky extends React.Component<StickyProps, StickyState> {
|
|
25
28
|
static __KONTUR_REACT_UI__: string;
|
|
26
29
|
static propTypes: {
|
|
@@ -14,6 +14,9 @@ import { cx } from "../../../lib/theming/Emotion";
|
|
|
14
14
|
import { rootNode } from "../../../lib/rootNode";
|
|
15
15
|
import { styles } from "../Switcher.styles";
|
|
16
16
|
import { getSwitcherTheme } from "../switcherTheme";
|
|
17
|
+
export var SwitcherDataTids = {
|
|
18
|
+
root: 'Switcher__root'
|
|
19
|
+
};
|
|
17
20
|
export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
18
21
|
_inheritsLoose(Switcher, _React$Component);
|
|
19
22
|
|
|
@@ -188,6 +191,7 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
|
|
|
188
191
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
189
192
|
rootNodeRef: this.setRootNode
|
|
190
193
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
194
|
+
"data-tid": SwitcherDataTids.root,
|
|
191
195
|
className: styles.root()
|
|
192
196
|
}, this.props.caption ? /*#__PURE__*/React.createElement("div", {
|
|
193
197
|
className: captionClassName
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","Switcher","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","root","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\ntype SwitcherItems = string | SwitcherItem;\n\nexport interface SwitcherProps extends CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string }`\n */\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SwitcherSize;\n\n disabled?: boolean;\n}\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n label: string;\n value: string;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private move = (step: number) => {\n let selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n\n const items = this._extractValuesFromItems();\n\n selectedIndex += step;\n\n if (selectedIndex < 0) {\n selectedIndex = items.length - 1;\n } else if (selectedIndex >= items.length) {\n selectedIndex = 0;\n }\n\n this._focus(selectedIndex);\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n this.selectItem(value);\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e) ? -1 : 1);\n }\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n return this.props.items.map((item, i) => {\n const { label, value } = this._extractPropsFromItem(item);\n const buttonProps = {\n checked: this.props.value === value,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(value);\n },\n disableFocus: true,\n size: this.props.size,\n disabled: this.props.disabled,\n };\n return (\n <Button key={value} {...buttonProps}>\n {label}\n </Button>\n );\n });\n };\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","SwitcherDataTids","root","Switcher","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\ntype SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string }`\n */\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SwitcherSize;\n\n disabled?: boolean;\n}\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n label: string;\n value: string;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private move = (step: number) => {\n let selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n\n const items = this._extractValuesFromItems();\n\n selectedIndex += step;\n\n if (selectedIndex < 0) {\n selectedIndex = items.length - 1;\n } else if (selectedIndex >= items.length) {\n selectedIndex = 0;\n }\n\n this._focus(selectedIndex);\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n this.selectItem(value);\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e) ? -1 : 1);\n }\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n return this.props.items.map((item, i) => {\n const { label, value } = this._extractPropsFromItem(item);\n const buttonProps = {\n checked: this.props.value === value,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(value);\n },\n disableFocus: true,\n size: this.props.size,\n disabled: this.props.disabled,\n };\n return (\n <Button key={value} {...buttonProps}>\n {label}\n </Button>\n );\n });\n };\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
|
|
@@ -5,6 +5,9 @@ import { Nullable } from '../../typings/utility-types';
|
|
|
5
5
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
6
6
|
export declare type SwitcherSize = ButtonSize;
|
|
7
7
|
declare type SwitcherItems = string | SwitcherItem;
|
|
8
|
+
export declare const SwitcherDataTids: {
|
|
9
|
+
readonly root: "Switcher__root";
|
|
10
|
+
};
|
|
8
11
|
export interface SwitcherProps extends CommonProps {
|
|
9
12
|
/**
|
|
10
13
|
* Список строк или список элементов типа `{ label: string, value: string }`
|
|
@@ -11,6 +11,7 @@ import { getRootNode, rootNode } from "../../../lib/rootNode";
|
|
|
11
11
|
import { getDOMRect } from "../../../lib/dom/getDOMRect";
|
|
12
12
|
import { styles } from "../Indicator.styles";
|
|
13
13
|
import { TabsContext } from "../TabsContext";
|
|
14
|
+
import { TabsDataTids } from "../Tabs";
|
|
14
15
|
export var Indicator = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
15
16
|
_inheritsLoose(Indicator, _React$Component);
|
|
16
17
|
|
|
@@ -95,6 +96,7 @@ export var Indicator = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
95
96
|
disabled: false
|
|
96
97
|
};
|
|
97
98
|
return /*#__PURE__*/React.createElement("div", {
|
|
99
|
+
"data-tid": TabsDataTids.indicatorRoot,
|
|
98
100
|
className: cx(styles.root(this.theme), indicators.primary && styles.primary(this.theme), indicators.success && styles.success(this.theme), indicators.warning && styles.warning(this.theme), indicators.error && styles.error(this.theme), this.props.className),
|
|
99
101
|
style: this.state.styles,
|
|
100
102
|
ref: this.setRootNode
|