@skbkontur/react-ui 4.2.1 → 4.3.1
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 +46 -0
- package/cjs/components/Autocomplete/Autocomplete.d.ts +9 -17
- package/cjs/components/Autocomplete/Autocomplete.js +10 -6
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Button/Button.d.ts +4 -5
- package/cjs/components/Button/Button.js +8 -3
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.mixins.js +1 -1
- package/cjs/components/Button/Button.mixins.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +18 -18
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Center/Center.d.ts +4 -3
- package/cjs/components/Center/Center.js +9 -3
- package/cjs/components/Center/Center.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.md +48 -0
- package/cjs/components/ComboBox/ComboBox.d.ts +8 -13
- package/cjs/components/ComboBox/ComboBox.js +12 -2
- package/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/cjs/components/CurrencyInput/CurrencyInput.d.ts +6 -9
- package/cjs/components/CurrencyInput/CurrencyInput.js +19 -6
- package/cjs/components/CurrencyInput/CurrencyInput.js.map +1 -1
- package/cjs/components/CurrencyInput/CurrencyInputKeyboardActions.d.ts +2 -0
- package/cjs/components/CurrencyInput/CurrencyInputKeyboardActions.js +14 -2
- package/cjs/components/CurrencyInput/CurrencyInputKeyboardActions.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.d.ts +3 -9
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +15 -15
- package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/cjs/components/DateInput/DateFragmentsView.js +1 -1
- package/cjs/components/DateInput/DateFragmentsView.js.map +1 -1
- package/cjs/components/DateInput/DateInput.d.ts +8 -11
- package/cjs/components/DateInput/DateInput.js +11 -3
- package/cjs/components/DateInput/DateInput.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.d.ts +7 -9
- package/cjs/components/DatePicker/DatePicker.js +12 -6
- package/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/cjs/components/DropdownMenu/DropdownMenu.d.ts +5 -5
- package/cjs/components/DropdownMenu/DropdownMenu.js +9 -3
- package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/cjs/components/FileUploader/FileUploader.md +8 -1
- package/cjs/components/FxInput/FxInput.d.ts +6 -6
- package/cjs/components/FxInput/FxInput.js +13 -10
- package/cjs/components/FxInput/FxInput.js.map +1 -1
- package/cjs/components/Gapped/Gapped.d.ts +7 -8
- package/cjs/components/Gapped/Gapped.js +12 -6
- package/cjs/components/Gapped/Gapped.js.map +1 -1
- package/cjs/components/GlobalLoader/GlobalLoader.d.ts +7 -14
- package/cjs/components/GlobalLoader/GlobalLoader.js +13 -9
- package/cjs/components/GlobalLoader/GlobalLoader.js.map +1 -1
- package/cjs/components/Hint/Hint.d.ts +8 -12
- package/cjs/components/Hint/Hint.js +15 -5
- package/cjs/components/Hint/Hint.js.map +1 -1
- package/cjs/components/Hint/Hint.md +14 -0
- package/cjs/components/Input/Input.d.ts +4 -3
- package/cjs/components/Input/Input.js +7 -4
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Kebab/Kebab.d.ts +7 -11
- package/cjs/components/Kebab/Kebab.js +14 -5
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/Link/Link.d.ts +4 -4
- package/cjs/components/Link/Link.js +11 -4
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Loader/Loader.d.ts +7 -4
- package/cjs/components/Loader/Loader.js +14 -4
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/Modal/Modal.d.ts +4 -3
- package/cjs/components/Modal/Modal.js +8 -3
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/ModalFooter.js +1 -1
- package/cjs/components/Modal/ModalFooter.js.map +1 -1
- package/cjs/components/Modal/ModalHeader.js +1 -1
- package/cjs/components/Modal/ModalHeader.js.map +1 -1
- package/cjs/components/Paging/Paging.d.ts +6 -9
- package/cjs/components/Paging/Paging.js +15 -5
- package/cjs/components/Paging/Paging.js.map +1 -1
- package/cjs/components/Paging/PagingDefaultComponent.d.ts +1 -1
- package/cjs/components/Paging/PagingDefaultComponent.js.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.d.ts +4 -3
- package/cjs/components/PasswordInput/PasswordInput.js +8 -3
- package/cjs/components/PasswordInput/PasswordInput.js.map +1 -1
- package/cjs/components/Radio/Radio.d.ts +4 -3
- package/cjs/components/Radio/Radio.js +8 -3
- package/cjs/components/Radio/Radio.js.map +1 -1
- package/cjs/components/RadioGroup/RadioGroup.d.ts +2 -4
- package/cjs/components/RadioGroup/RadioGroup.js +4 -2
- package/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.d.ts +7 -8
- package/cjs/components/ScrollContainer/ScrollContainer.helpers.js +4 -4
- package/cjs/components/ScrollContainer/ScrollContainer.helpers.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js +12 -6
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/Select/Select.d.ts +3 -12
- package/cjs/components/Select/Select.js +6 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/Select.styles.js +4 -4
- package/cjs/components/Select/Select.styles.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +5 -6
- package/cjs/components/SidePage/SidePage.js +8 -1
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/Spinner/Spinner.d.ts +4 -2
- package/cjs/components/Spinner/Spinner.js +9 -3
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Sticky/Sticky.d.ts +5 -4
- package/cjs/components/Sticky/Sticky.js +9 -2
- package/cjs/components/Sticky/Sticky.js.map +1 -1
- package/cjs/components/Tabs/Tab.d.ts +4 -4
- package/cjs/components/Tabs/Tab.js +11 -13
- package/cjs/components/Tabs/Tab.js.map +1 -1
- package/cjs/components/Tabs/Tabs.d.ts +4 -4
- package/cjs/components/Tabs/Tabs.js +12 -3
- package/cjs/components/Tabs/Tabs.js.map +1 -1
- package/cjs/components/Textarea/Textarea.d.ts +8 -10
- package/cjs/components/Textarea/Textarea.js +10 -6
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toggle/Toggle.d.ts +5 -6
- package/cjs/components/Toggle/Toggle.js +10 -4
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +19 -16
- package/cjs/components/TokenInput/TokenInput.js +75 -57
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.d.ts +13 -19
- package/cjs/components/Tooltip/Tooltip.js +27 -24
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.d.ts +5 -4
- package/cjs/components/TooltipMenu/TooltipMenu.js +11 -5
- package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/cjs/internal/BGRuler.d.ts +13 -15
- package/cjs/internal/BGRuler.js +16 -8
- package/cjs/internal/BGRuler.js.map +1 -1
- package/cjs/internal/Calendar/Calendar.d.ts +4 -13
- package/cjs/internal/Calendar/Calendar.js +10 -5
- package/cjs/internal/Calendar/Calendar.js.map +1 -1
- package/cjs/internal/Calendar/DayCellView.styles.js +1 -1
- package/cjs/internal/Calendar/DayCellView.styles.js.map +1 -1
- package/cjs/internal/Calendar/Month.js +16 -11
- package/cjs/internal/Calendar/Month.js.map +1 -1
- package/cjs/internal/CommonWrapper/CommonWrapper.d.ts +1 -1
- package/cjs/internal/CommonWrapper/CommonWrapper.js.map +1 -1
- package/cjs/internal/ComponentCombinator.d.ts +6 -8
- package/cjs/internal/ComponentCombinator.js +6 -2
- package/cjs/internal/ComponentCombinator.js.map +1 -1
- package/cjs/internal/ComponentTable.d.ts +5 -6
- package/cjs/internal/ComponentTable.js +11 -2
- package/cjs/internal/ComponentTable.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.d.ts +4 -4
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js +7 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.d.ts +4 -12
- package/cjs/internal/CustomComboBox/ComboBoxView.js +18 -10
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/DateSelect/DateSelect.d.ts +4 -6
- package/cjs/internal/DateSelect/DateSelect.js +15 -9
- package/cjs/internal/DateSelect/DateSelect.js.map +1 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.d.ts +4 -7
- package/cjs/internal/DropdownContainer/DropdownContainer.js +8 -5
- package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
- package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js +2 -1
- package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.d.ts +4 -3
- package/cjs/internal/InputLikeText/InputLikeText.js +7 -2
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/InternalMenu/InternalMenu.d.ts +3 -9
- package/cjs/internal/InternalMenu/InternalMenu.js +36 -14
- 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 +5 -2
- package/cjs/internal/MaskedInput/MaskedInput.js +17 -6
- package/cjs/internal/MaskedInput/MaskedInput.js.map +1 -1
- package/cjs/internal/Menu/Menu.d.ts +4 -7
- package/cjs/internal/Menu/Menu.js +14 -4
- package/cjs/internal/Menu/Menu.js.map +1 -1
- package/cjs/internal/Popup/Popup.d.ts +11 -17
- package/cjs/internal/Popup/Popup.js +38 -19
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/Popup/PopupHelper.d.ts +1 -1
- package/cjs/internal/Popup/PopupHelper.js.map +1 -1
- package/cjs/internal/Popup/PopupPin.d.ts +1 -1
- package/cjs/internal/Popup/PopupPin.js.map +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.d.ts +8 -11
- package/cjs/internal/PopupMenu/PopupMenu.js +8 -1
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/RenderLayer/RenderLayer.d.ts +6 -4
- package/cjs/internal/RenderLayer/RenderLayer.js +15 -4
- package/cjs/internal/RenderLayer/RenderLayer.js.map +1 -1
- package/cjs/internal/ThemePlayground/VariableValue.d.ts +5 -4
- package/cjs/internal/ThemePlayground/VariableValue.js +6 -1
- package/cjs/internal/ThemePlayground/VariableValue.js.map +1 -1
- package/cjs/internal/ZIndex/ZIndex.d.ts +7 -11
- package/cjs/internal/ZIndex/ZIndex.js +10 -3
- package/cjs/internal/ZIndex/ZIndex.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.js +1 -1
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/lib/InstanceWithAnchorElement.d.ts +1 -1
- package/cjs/lib/InstanceWithAnchorElement.js.map +1 -1
- package/cjs/lib/SSRSafe.d.ts +2 -1
- package/cjs/lib/SSRSafe.js +9 -1
- package/cjs/lib/SSRSafe.js.map +1 -1
- package/cjs/lib/createPropsGetter.d.ts +2 -1
- package/cjs/lib/createPropsGetter.js +2 -0
- package/cjs/lib/createPropsGetter.js.map +1 -1
- package/cjs/lib/listenFocusOutside.d.ts +1 -1
- package/cjs/lib/listenFocusOutside.js.map +1 -1
- package/cjs/lib/rootNode/getRootNode.d.ts +3 -3
- package/cjs/lib/rootNode/getRootNode.js +7 -7
- package/cjs/lib/rootNode/getRootNode.js.map +1 -1
- package/cjs/lib/rootNode/rootNodeDecorator.d.ts +7 -7
- package/cjs/lib/rootNode/rootNodeDecorator.js.map +1 -1
- package/cjs/typings/event-types.d.ts +2 -2
- package/components/Autocomplete/Autocomplete/Autocomplete.js +22 -12
- package/components/Autocomplete/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +9 -17
- package/components/Button/Button/Button.js +11 -5
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +4 -5
- package/components/Button/Button.mixins/Button.mixins.js +1 -1
- package/components/Button/Button.mixins/Button.mixins.js.map +1 -1
- package/components/Button/Button.styles/Button.styles.js +18 -18
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Center/Center/Center.js +7 -5
- package/components/Center/Center/Center.js.map +1 -1
- package/components/Center/Center.d.ts +4 -3
- package/components/Checkbox/Checkbox.md +48 -0
- package/components/ComboBox/ComboBox/ComboBox.js +3 -1
- package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox.d.ts +8 -13
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js +28 -18
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js.map +1 -1
- package/components/CurrencyInput/CurrencyInput.d.ts +6 -9
- package/components/CurrencyInput/CurrencyInputKeyboardActions/CurrencyInputKeyboardActions.js +4 -2
- package/components/CurrencyInput/CurrencyInputKeyboardActions/CurrencyInputKeyboardActions.js.map +1 -1
- package/components/CurrencyInput/CurrencyInputKeyboardActions.d.ts +2 -0
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +21 -15
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel.d.ts +3 -9
- package/components/DateInput/DateFragmentsView/DateFragmentsView.js +1 -0
- package/components/DateInput/DateFragmentsView/DateFragmentsView.js.map +1 -1
- package/components/DateInput/DateInput/DateInput.js +17 -4
- package/components/DateInput/DateInput/DateInput.js.map +1 -1
- package/components/DateInput/DateInput.d.ts +8 -11
- package/components/DatePicker/DatePicker/DatePicker.js +12 -9
- package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +7 -9
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +8 -2
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu.d.ts +5 -5
- package/components/FileUploader/FileUploader.md +8 -1
- package/components/FxInput/FxInput/FxInput.js +11 -9
- package/components/FxInput/FxInput/FxInput.js.map +1 -1
- package/components/FxInput/FxInput.d.ts +6 -6
- package/components/Gapped/Gapped/Gapped.js +17 -8
- package/components/Gapped/Gapped/Gapped.js.map +1 -1
- package/components/Gapped/Gapped.d.ts +7 -8
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js +35 -16
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js.map +1 -1
- package/components/GlobalLoader/GlobalLoader.d.ts +7 -14
- package/components/Hint/Hint/Hint.js +30 -18
- package/components/Hint/Hint/Hint.js.map +1 -1
- package/components/Hint/Hint.d.ts +8 -12
- package/components/Hint/Hint.md +14 -0
- package/components/Input/Input/Input.js +9 -7
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.d.ts +4 -3
- package/components/Kebab/Kebab/Kebab.js +19 -8
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/Kebab/Kebab.d.ts +7 -11
- package/components/Link/Link/Link.js +9 -6
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Link/Link.d.ts +4 -4
- package/components/Loader/Loader/Loader.js +22 -17
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +7 -4
- package/components/Modal/Modal/Modal.js +3 -1
- package/components/Modal/Modal/Modal.js.map +1 -1
- package/components/Modal/Modal.d.ts +4 -3
- package/components/Modal/ModalFooter/ModalFooter.js +2 -2
- package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
- package/components/Modal/ModalHeader/ModalHeader.js +2 -2
- package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/components/Paging/Paging/Paging.js +24 -14
- package/components/Paging/Paging/Paging.js.map +1 -1
- package/components/Paging/Paging.d.ts +6 -9
- package/components/Paging/PagingDefaultComponent/PagingDefaultComponent.js.map +1 -1
- package/components/Paging/PagingDefaultComponent.d.ts +1 -1
- package/components/PasswordInput/PasswordInput/PasswordInput.js +7 -5
- package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
- package/components/PasswordInput/PasswordInput.d.ts +4 -3
- package/components/Radio/Radio/Radio.js +7 -5
- package/components/Radio/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.d.ts +4 -3
- package/components/RadioGroup/RadioGroup/RadioGroup.js +10 -10
- package/components/RadioGroup/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +2 -4
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +11 -7
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.d.ts +7 -8
- package/components/ScrollContainer/ScrollContainer.helpers/ScrollContainer.helpers.js +4 -4
- package/components/ScrollContainer/ScrollContainer.helpers/ScrollContainer.helpers.js.map +1 -1
- package/components/Select/Select/Select.js +4 -3
- package/components/Select/Select/Select.js.map +1 -1
- package/components/Select/Select.d.ts +3 -12
- package/components/Select/Select.styles/Select.styles.js +4 -4
- package/components/Select/Select.styles/Select.styles.js.map +1 -1
- package/components/SidePage/SidePage/SidePage.js +14 -9
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +5 -6
- package/components/Spinner/Spinner/Spinner.js +7 -5
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +4 -2
- package/components/Sticky/Sticky/Sticky.js +7 -4
- package/components/Sticky/Sticky/Sticky.js.map +1 -1
- package/components/Sticky/Sticky.d.ts +5 -4
- package/components/Tabs/Tab/Tab.js +15 -7
- package/components/Tabs/Tab/Tab.js.map +1 -1
- package/components/Tabs/Tab.d.ts +4 -4
- package/components/Tabs/Tabs/Tabs.js +10 -8
- package/components/Tabs/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/Tabs.d.ts +4 -4
- package/components/Textarea/Textarea/Textarea.js +19 -14
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +8 -10
- package/components/Toast/Toast/Toast.js.map +1 -1
- package/components/Toggle/Toggle/Toggle.js +12 -7
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +5 -6
- package/components/TokenInput/TokenInput/TokenInput.js +107 -77
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +19 -16
- package/components/Tooltip/Tooltip/Tooltip.js +60 -47
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +13 -19
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +15 -13
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +5 -4
- package/internal/BGRuler/BGRuler.js +11 -6
- package/internal/BGRuler/BGRuler.js.map +1 -1
- package/internal/BGRuler.d.ts +13 -15
- package/internal/Calendar/Calendar/Calendar.js +11 -5
- package/internal/Calendar/Calendar/Calendar.js.map +1 -1
- package/internal/Calendar/Calendar.d.ts +4 -13
- package/internal/Calendar/DayCellView.styles/DayCellView.styles.js +1 -1
- package/internal/Calendar/DayCellView.styles/DayCellView.styles.js.map +1 -1
- package/internal/Calendar/Month/Month.js +20 -11
- package/internal/Calendar/Month/Month.js.map +1 -1
- package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js.map +1 -1
- package/internal/CommonWrapper/CommonWrapper.d.ts +1 -1
- package/internal/ComponentCombinator/ComponentCombinator.js +8 -5
- package/internal/ComponentCombinator/ComponentCombinator.js.map +1 -1
- package/internal/ComponentCombinator.d.ts +6 -8
- package/internal/ComponentTable/ComponentTable.js +16 -4
- package/internal/ComponentTable/ComponentTable.js.map +1 -1
- package/internal/ComponentTable.d.ts +5 -6
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js +4 -2
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxMenu.d.ts +4 -4
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +21 -10
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView.d.ts +4 -12
- package/internal/DateSelect/DateSelect/DateSelect.js +14 -11
- package/internal/DateSelect/DateSelect/DateSelect.js.map +1 -1
- package/internal/DateSelect/DateSelect.d.ts +4 -6
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +6 -10
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer.d.ts +4 -7
- package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js +2 -1
- package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map +1 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +4 -2
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/InputLikeText/InputLikeText.d.ts +4 -3
- package/internal/InternalMenu/InternalMenu/InternalMenu.js +37 -16
- package/internal/InternalMenu/InternalMenu/InternalMenu.js.map +1 -1
- package/internal/InternalMenu/InternalMenu.d.ts +3 -9
- 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 +12 -6
- package/internal/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
- package/internal/MaskedInput/MaskedInput.d.ts +5 -2
- package/internal/Menu/Menu/Menu.js +16 -4
- package/internal/Menu/Menu/Menu.js.map +1 -1
- package/internal/Menu/Menu.d.ts +4 -7
- package/internal/Popup/Popup/Popup.js +52 -35
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/Popup/Popup.d.ts +11 -17
- package/internal/Popup/PopupHelper/PopupHelper.js.map +1 -1
- package/internal/Popup/PopupHelper.d.ts +1 -1
- package/internal/Popup/PopupPin/PopupPin.js.map +1 -1
- package/internal/Popup/PopupPin.d.ts +1 -1
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +12 -4
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/PopupMenu/PopupMenu.d.ts +8 -11
- package/internal/RenderLayer/RenderLayer/RenderLayer.js +18 -11
- package/internal/RenderLayer/RenderLayer/RenderLayer.js.map +1 -1
- package/internal/RenderLayer/RenderLayer.d.ts +6 -4
- package/internal/ThemePlayground/VariableValue/VariableValue.js +4 -2
- package/internal/ThemePlayground/VariableValue/VariableValue.js.map +1 -1
- package/internal/ThemePlayground/VariableValue.d.ts +5 -4
- package/internal/ZIndex/ZIndex/ZIndex.js +15 -13
- package/internal/ZIndex/ZIndex/ZIndex.js.map +1 -1
- package/internal/ZIndex/ZIndex.d.ts +7 -11
- package/internal/themes/DefaultTheme/DefaultTheme.js +6 -6
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/lib/InstanceWithAnchorElement/InstanceWithAnchorElement.js.map +1 -1
- package/lib/InstanceWithAnchorElement.d.ts +1 -1
- package/lib/SSRSafe/SSRSafe.js +7 -0
- package/lib/SSRSafe/SSRSafe.js.map +1 -1
- package/lib/SSRSafe.d.ts +2 -1
- package/lib/createPropsGetter/createPropsGetter.js.map +1 -1
- package/lib/createPropsGetter.d.ts +2 -1
- package/lib/listenFocusOutside/listenFocusOutside.js.map +1 -1
- package/lib/listenFocusOutside.d.ts +1 -1
- package/lib/rootNode/getRootNode/getRootNode.js +8 -8
- package/lib/rootNode/getRootNode/getRootNode.js.map +1 -1
- package/lib/rootNode/getRootNode.d.ts +3 -3
- package/lib/rootNode/rootNodeDecorator/rootNodeDecorator.js.map +1 -1
- package/lib/rootNode/rootNodeDecorator.d.ts +7 -7
- package/package.json +2 -2
- package/typings/event-types.d.ts +2 -2
|
@@ -12,6 +12,7 @@ var _Emotion = require("../../lib/theming/Emotion");
|
|
|
12
12
|
var _decorator = require("../ResponsiveLayout/decorator");
|
|
13
13
|
var _rootNode = require("../../lib/rootNode");
|
|
14
14
|
|
|
15
|
+
var _createPropsGetter = require("../../lib/createPropsGetter");
|
|
15
16
|
|
|
16
17
|
var _Hint = require("./Hint.styles");var _class, _class2, _temp;
|
|
17
18
|
|
|
@@ -84,6 +85,10 @@ var Positions = [
|
|
|
84
85
|
'right bottom'];
|
|
85
86
|
|
|
86
87
|
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
87
92
|
/**
|
|
88
93
|
* Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
|
|
89
94
|
*/var
|
|
@@ -103,8 +108,10 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
|
|
|
103
108
|
|
|
104
109
|
|
|
105
110
|
|
|
111
|
+
getProps = (0, _createPropsGetter.createPropsGetter)(Hint.defaultProps);_this.
|
|
112
|
+
|
|
106
113
|
state = {
|
|
107
|
-
opened: _this.
|
|
114
|
+
opened: _this.getProps().manual ? !!_this.getProps().opened : false };_this.
|
|
108
115
|
|
|
109
116
|
|
|
110
117
|
timer = null;_this.
|
|
@@ -192,6 +199,9 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
|
|
|
192
199
|
|
|
193
200
|
|
|
194
201
|
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
195
205
|
|
|
196
206
|
|
|
197
207
|
|
|
@@ -219,11 +229,11 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
|
|
|
219
229
|
|
|
220
230
|
|
|
221
231
|
getPositions = function () {
|
|
222
|
-
return Positions.filter(function (x) {return x.startsWith(_this.
|
|
232
|
+
return Positions.filter(function (x) {return x.startsWith(_this.getProps().pos);});
|
|
223
233
|
};_this.
|
|
224
234
|
|
|
225
235
|
handleMouseEnter = function (e) {
|
|
226
|
-
if (!_this.
|
|
236
|
+
if (!_this.getProps().manual && !_this.timer) {
|
|
227
237
|
_this.timer = window.setTimeout(_this.open, 400);
|
|
228
238
|
}
|
|
229
239
|
|
|
@@ -233,7 +243,7 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
|
|
|
233
243
|
};_this.
|
|
234
244
|
|
|
235
245
|
handleMouseLeave = function (e) {
|
|
236
|
-
if (!_this.
|
|
246
|
+
if (!_this.getProps().manual && _this.timer) {
|
|
237
247
|
clearTimeout(_this.timer);
|
|
238
248
|
_this.timer = null;
|
|
239
249
|
_this.setState({ opened: false });
|
|
@@ -250,4 +260,4 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
|
|
|
250
260
|
|
|
251
261
|
open = function () {
|
|
252
262
|
_this.setState({ opened: true });
|
|
253
|
-
};return _this;}var _proto = Hint.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
263
|
+
};return _this;}var _proto = Hint.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),opened = _this$getProps.opened,manual = _this$getProps.manual;if (!manual) {return;}if (this.timer) {clearTimeout(this.timer);this.timer = null;}if (opened !== prevProps.opened) {this.setState({ opened: !!opened });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.hintPinOffset, popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, _this2.theme) }, _this2.isMobileLayout ? _this2.renderMobile() : _this2.renderMain());});};_proto.renderMobile = function renderMobile() {var manual = this.getProps().manual;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_Popup.Popup, { opened: this.state.opened, anchorElement: this.props.children, positions: [], onClick: !manual ? this.open : undefined, mobileOnCloseRequest: !manual ? this.close : undefined }, this.renderContent()));};_proto.renderMain = function renderMain() {var _this$getProps2 = this.getProps(),disableAnimations = _this$getProps2.disableAnimations,useWrapper = _this$getProps2.useWrapper;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: true, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), backgroundColor: this.theme.hintBgColor, borderColor: HINT_BORDER_COLOR, disableAnimations: disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper, ref: this.popupRef }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cx;if (!this.props.text) {return null;}var _this$getProps3 = this.getProps(),maxWidth = _this$getProps3.maxWidth,pos = _this$getProps3.pos;var className = (0, _Emotion.cx)((_cx = {}, _cx[_Hint.styles.content(this.theme)] = true, _cx[_Hint.styles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cx[_Hint.styles.mobileContent(this.theme)] = this.isMobileLayout, _cx));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: this.isMobileLayout ? '100%' : maxWidth } }, this.props.text);};return Hint;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = { pos: 'top', manual: false, opened: false, maxWidth: 200, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false }, _temp)) || _class) || _class;exports.Hint = Hint;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","responsiveLayout","rootNode","state","opened","props","manual","timer","popupRef","React","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","setRootNode","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","styles","content","contentCenter","mobileContent","PureComponent","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n children?: React.ReactNode;\n /**\n * Переводит отображение подсказки в _\"ручной режим\"_.\n *\n * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`.\n */\n manual?: boolean;\n /**\n * Задаёт максимальную ширину подсказки.\n */\n maxWidth?: React.CSSProperties['maxWidth'];\n /**\n * HTML-событие `mouseenter`.\n */\n onMouseEnter?: (event: MouseEventType) => void;\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: (event: MouseEventType) => void;\n /**\n * Если `true` - подсказка будет открыта.\n *\n * _Примечание_: работает только при `manual=true`.\n */\n opened?: boolean;\n /**\n * Расположение подсказки относительно текста.\n *\n * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n */\n pos: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\n /**\n * Текст подсказки.\n */\n text: React.ReactNode;\n /**\n * Отключает анимацию.\n */\n disableAnimations: boolean;\n /**\n * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n *\n * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n */\n useWrapper: boolean;\n}\n\nexport interface HintState {\n opened: boolean;\n}\n\nconst Positions: PopupPositionsType[] = [\n 'top center',\n 'top left',\n 'top right',\n 'bottom center',\n 'bottom left',\n 'bottom right',\n 'left middle',\n 'left top',\n 'left bottom',\n 'right middle',\n 'right top',\n 'right bottom',\n];\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@responsiveLayout\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n public static __KONTUR_REACT_UI__ = 'Hint';\n\n private isMobileLayout!: boolean;\n\n public static defaultProps = {\n pos: 'top',\n manual: false,\n opened: false,\n maxWidth: 200,\n disableAnimations: isTestEnv,\n useWrapper: false,\n };\n\n public state: HintState = {\n opened: this.props.manual ? !!this.props.opened : false,\n };\n\n private timer: Nullable<number> = null;\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n private popupRef = React.createRef<Popup>();\n\n public componentDidUpdate(prevProps: HintProps) {\n if (!this.props.manual) {\n return;\n }\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n if (this.props.opened !== prevProps.opened) {\n this.setState({ opened: !!this.props.opened });\n }\n }\n\n public componentWillUnmount() {\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.hintPinOffset,\n popupMargin: theme.hintMargin,\n popupBorder: theme.hintBorder,\n popupBorderRadius: theme.hintBorderRadius,\n },\n this.theme,\n )}\n >\n {this.isMobileLayout ? this.renderMobile() : this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMobile() {\n return (\n <CommonWrapper {...this.props}>\n <Popup\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={[]}\n onClick={!this.props.manual ? this.open : undefined}\n mobileOnCloseRequest={!this.props.manual ? this.close : undefined}\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public renderMain() {\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Popup\n hasPin\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={this.getPositions()}\n backgroundColor={this.theme.hintBgColor}\n borderColor={HINT_BORDER_COLOR}\n disableAnimations={this.props.disableAnimations}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n useWrapper={this.props.useWrapper}\n ref={this.popupRef}\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public getAnchorElement = (): Nullable<HTMLElement> => {\n return this.popupRef.current?.anchorElement;\n };\n\n private renderContent() {\n if (!this.props.text) {\n return null;\n }\n\n const { pos, maxWidth } = this.props;\n const className = cx({\n [styles.content(this.theme)]: true,\n [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n [styles.mobileContent(this.theme)]: this.isMobileLayout,\n });\n return (\n <div className={className} style={{ maxWidth: this.isMobileLayout ? '100%' : maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPositionsType[] => {\n return Positions.filter((x) => x.startsWith(this.props.pos));\n };\n\n private handleMouseEnter = (e: MouseEventType) => {\n if (!this.props.manual && !this.timer) {\n this.timer = window.setTimeout(this.open, 400);\n }\n\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: MouseEventType) => {\n if (!this.props.manual && this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n this.setState({ opened: false });\n }\n\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private close = () => {\n this.setState({ opened: false });\n };\n\n private open = () => {\n this.setState({ opened: true });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","responsiveLayout","rootNode","getProps","defaultProps","state","opened","manual","timer","popupRef","React","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","disableAnimations","useWrapper","setRootNode","hintBgColor","text","maxWidth","className","styles","content","contentCenter","mobileContent","PureComponent","__KONTUR_REACT_UI__","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n children?: React.ReactNode;\n /**\n * Переводит отображение подсказки в _\"ручной режим\"_.\n *\n * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`.\n */\n manual?: boolean;\n /**\n * Задаёт максимальную ширину подсказки.\n */\n maxWidth?: React.CSSProperties['maxWidth'];\n /**\n * HTML-событие `mouseenter`.\n */\n onMouseEnter?: (event: MouseEventType) => void;\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: (event: MouseEventType) => void;\n /**\n * Если `true` - подсказка будет открыта.\n *\n * _Примечание_: работает только при `manual=true`.\n */\n opened?: boolean;\n /**\n * Расположение подсказки относительно текста.\n *\n * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n */\n pos?: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\n /**\n * Текст подсказки.\n */\n text: React.ReactNode;\n /**\n * Отключает анимацию.\n */\n disableAnimations?: boolean;\n /**\n * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n *\n * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n */\n useWrapper?: boolean;\n}\n\nexport interface HintState {\n opened: boolean;\n}\n\nconst Positions: PopupPositionsType[] = [\n 'top center',\n 'top left',\n 'top right',\n 'bottom center',\n 'bottom left',\n 'bottom right',\n 'left middle',\n 'left top',\n 'left bottom',\n 'right middle',\n 'right top',\n 'right bottom',\n];\n\ntype DefaultProps = Required<\n Pick<HintProps, 'pos' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>\n>;\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@responsiveLayout\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n public static __KONTUR_REACT_UI__ = 'Hint';\n\n private isMobileLayout!: boolean;\n\n public static defaultProps: DefaultProps = {\n pos: 'top',\n manual: false,\n opened: false,\n maxWidth: 200,\n disableAnimations: isTestEnv,\n useWrapper: false,\n };\n\n private getProps = createPropsGetter(Hint.defaultProps);\n\n public state: HintState = {\n opened: this.getProps().manual ? !!this.getProps().opened : false,\n };\n\n private timer: Nullable<number> = null;\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n private popupRef = React.createRef<Popup>();\n\n public componentDidUpdate(prevProps: HintProps) {\n const { opened, manual } = this.getProps();\n if (!manual) {\n return;\n }\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n if (opened !== prevProps.opened) {\n this.setState({ opened: !!opened });\n }\n }\n\n public componentWillUnmount() {\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.hintPinOffset,\n popupMargin: theme.hintMargin,\n popupBorder: theme.hintBorder,\n popupBorderRadius: theme.hintBorderRadius,\n },\n this.theme,\n )}\n >\n {this.isMobileLayout ? this.renderMobile() : this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMobile() {\n const manual = this.getProps().manual;\n return (\n <CommonWrapper {...this.props}>\n <Popup\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={[]}\n onClick={!manual ? this.open : undefined}\n mobileOnCloseRequest={!manual ? this.close : undefined}\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public renderMain() {\n const { disableAnimations, useWrapper } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Popup\n hasPin\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={this.getPositions()}\n backgroundColor={this.theme.hintBgColor}\n borderColor={HINT_BORDER_COLOR}\n disableAnimations={disableAnimations}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n useWrapper={useWrapper}\n ref={this.popupRef}\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public getAnchorElement = (): Nullable<Element> => {\n return this.popupRef.current?.anchorElement;\n };\n\n private renderContent() {\n if (!this.props.text) {\n return null;\n }\n\n const { maxWidth, pos } = this.getProps();\n const className = cx({\n [styles.content(this.theme)]: true,\n [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n [styles.mobileContent(this.theme)]: this.isMobileLayout,\n });\n return (\n <div className={className} style={{ maxWidth: this.isMobileLayout ? '100%' : maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPositionsType[] => {\n return Positions.filter((x) => x.startsWith(this.getProps().pos));\n };\n\n private handleMouseEnter = (e: MouseEventType) => {\n if (!this.getProps().manual && !this.timer) {\n this.timer = window.setTimeout(this.open, 400);\n }\n\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: MouseEventType) => {\n if (!this.getProps().manual && this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n this.setState({ opened: false });\n }\n\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private close = () => {\n this.setState({ opened: false });\n };\n\n private open = () => {\n this.setState({ opened: true });\n };\n}\n"]}
|
|
@@ -4,6 +4,20 @@
|
|
|
4
4
|
<Hint text="Подсказка">Базовая</Hint>
|
|
5
5
|
```
|
|
6
6
|
|
|
7
|
+
Пример подсказки с иконкой.
|
|
8
|
+
|
|
9
|
+
```jsx harmony
|
|
10
|
+
<Hint text="Редактирование">
|
|
11
|
+
<svg width="16" height="16" viewBox="0 0 16 16">
|
|
12
|
+
<path
|
|
13
|
+
fillRule="evenodd"
|
|
14
|
+
d="M13 12V12.998H8V12H13ZM3 13V11L9 4.99999L11 6.99999L5 13H3ZM13 5L11.5 6.5L9.5 4.5L11 3L13 5Z"
|
|
15
|
+
clipRule="evenodd"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
</Hint>
|
|
19
|
+
```
|
|
20
|
+
|
|
7
21
|
Пример подсказки, всегда всплывающей слева.
|
|
8
22
|
|
|
9
23
|
```jsx harmony
|
|
@@ -88,15 +88,15 @@ export interface InputState {
|
|
|
88
88
|
export declare const InputDataTids: {
|
|
89
89
|
readonly root: "Input__root";
|
|
90
90
|
};
|
|
91
|
+
declare type DefaultProps = Required<Pick<InputProps, 'size'>>;
|
|
91
92
|
/**
|
|
92
93
|
* Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
|
|
93
94
|
* Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
|
|
94
95
|
*/
|
|
95
96
|
export declare class Input extends React.Component<InputProps, InputState> {
|
|
96
97
|
static __KONTUR_REACT_UI__: string;
|
|
97
|
-
static defaultProps:
|
|
98
|
-
|
|
99
|
-
};
|
|
98
|
+
static defaultProps: DefaultProps;
|
|
99
|
+
private getProps;
|
|
100
100
|
state: InputState;
|
|
101
101
|
private selectAllId;
|
|
102
102
|
private theme;
|
|
@@ -154,3 +154,4 @@ export declare class Input extends React.Component<InputProps, InputState> {
|
|
|
154
154
|
private renderPrefix;
|
|
155
155
|
private renderSuffix;
|
|
156
156
|
}
|
|
157
|
+
export {};
|
|
@@ -12,6 +12,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
|
12
12
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
13
13
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
14
14
|
var _rootNode = require("../../lib/rootNode");
|
|
15
|
+
var _createPropsGetter = require("../../lib/createPropsGetter");
|
|
15
16
|
|
|
16
17
|
var _Input = require("./Input.styles");var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars"];var _class, _class2, _temp;
|
|
17
18
|
|
|
@@ -108,13 +109,15 @@ var _Input = require("./Input.styles");var _excluded = ["onMouseEnter", "onMouse
|
|
|
108
109
|
|
|
109
110
|
|
|
110
111
|
var InputDataTids = {
|
|
111
|
-
root: 'Input__root' };
|
|
112
|
+
root: 'Input__root' };exports.InputDataTids = InputDataTids;
|
|
113
|
+
|
|
114
|
+
|
|
112
115
|
|
|
113
116
|
|
|
114
117
|
/**
|
|
115
118
|
* Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
|
|
116
119
|
* Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
|
|
117
|
-
*/
|
|
120
|
+
*/var
|
|
118
121
|
|
|
119
122
|
Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Input, _React$Component);function Input() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
|
|
120
123
|
|
|
@@ -123,7 +126,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
123
126
|
|
|
124
127
|
|
|
125
128
|
|
|
126
|
-
|
|
129
|
+
getProps = (0, _createPropsGetter.createPropsGetter)(Input.defaultProps);_this.
|
|
127
130
|
|
|
128
131
|
state = {
|
|
129
132
|
needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
|
|
@@ -578,4 +581,4 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
578
581
|
* @param {number} end
|
|
579
582
|
*/;_proto.setSelectionRange = function setSelectionRange(start, end) {if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (document.activeElement !== this.input) {this.focus();}this.input.setSelectionRange(start, end);};_proto.render = function render() {var _this3 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this3.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), _this3.renderMain);});} /**
|
|
580
583
|
* @public
|
|
581
|
-
*/;_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.
|
|
584
|
+
*/;_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.getProps().size) {case 'large':return right ? _Input.styles.rightIconLarge(this.theme) : _Input.styles.leftIconLarge(this.theme);case 'medium':return right ? _Input.styles.rightIconMedium(this.theme) : _Input.styles.leftIconMedium(this.theme);case 'small':default:return right ? _Input.styles.rightIconSmall(this.theme) : _Input.styles.leftIconSmall(this.theme);}};_proto.renderLeftIcon = function renderLeftIcon() {return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());};_proto.renderRightIcon = function renderRightIcon() {return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));};_proto.renderIcon = function renderIcon(icon, sizeClassName) {var _cx5;if (!icon) {return null;}var disabled = this.props.disabled;var iconNode = icon instanceof Function ? icon() : icon;return /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.icon(), sizeClassName, _Input.styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[_Input.styles.iconDisabled()] = disabled, _cx5)) }, iconNode);};_proto.renderPlaceholder = function renderPlaceholder() {var disabled = this.props.disabled;var focused = this.state.focused;var placeholder = null;if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {var _cx6;placeholder = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Input.styles.placeholder(this.theme), (_cx6 = {}, _cx6[_Input.styles.placeholderDisabled(this.theme)] = disabled, _cx6[_Input.styles.placeholderFocus(this.theme)] = focused, _cx6)), style: { textAlign: this.props.align || 'inherit' } }, this.props.placeholder);}return placeholder;};_proto.getSizeClassName = function getSizeClassName() {var _cx7, _cx8, _cx9;switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)((_cx7 = {}, _cx7[_Input.styles.sizeLarge(this.theme)] = true, _cx7[_Input.styles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx7));case 'medium':return (0, _Emotion.cx)((_cx8 = {}, _cx8[_Input.styles.sizeMedium(this.theme)] = true, _cx8[_Input.styles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx8));case 'small':default:return (0, _Emotion.cx)((_cx9 = {}, _cx9[_Input.styles.sizeSmall(this.theme)] = true, _cx9[_Input.styles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));}};(0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props3 = this.props,mask = _this$props3.mask,alwaysShowMask = _this$props3.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }]);return Input;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = { size: 'small' }, _temp)) || _class;exports.Input = Input;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Input.tsx"],"names":["InputDataTids","root","Input","rootNode","state","needsPolyfillPlaceholder","blinking","focused","selectAllId","blinkTimeout","input","selectAll","setSelectionRange","value","length","delaySelectAll","cancelDelayedSelectAll","raf","cancel","cancelBlink","callback","clearTimeout","setState","renderMain","props","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onKeyPress","onValueChange","width","error","warning","leftIcon","rightIcon","borderless","align","type","mask","maskChar","alwaysShowMask","size","placeholder","selectAllOnFocus","disabled","onUnexpectedInput","prefix","suffix","formatChars","rest","labelProps","className","styles","theme","getSizeClassName","focus","blink","focusFallback","isIE11","isEdge","warningFallback","errorFallback","style","inputProps","inputFocus","inputDisabled","onChange","handleChange","onFocus","handleFocus","handleKeyDown","handleKeyPress","onBlur","handleBlur","textAlign","ref","refInput","isMaskVisible","undefined","renderMaskedInput","React","createElement","sideContainer","renderLeftIcon","renderPrefix","wrapper","renderPlaceholder","rightContainer","renderSuffix","renderRightIcon","element","MaskedInput","event","fieldIsEmpty","target","e","isDeleteKey","isKeyBackspace","isKeyDelete","currentTarget","repeat","handleUnexpectedInput","maxLength","handleMaskedValueChange","prefixDisabled","suffixDisabled","componentWillUnmount","blur","getNode","offsetWidth","window","setTimeout","start","end","Error","document","activeElement","render","setRootNode","getIconSizeClassname","right","rightIconLarge","leftIconLarge","rightIconMedium","leftIconMedium","rightIconSmall","leftIconSmall","renderIcon","icon","sizeClassName","iconNode","Function","useDefaultColor","iconDisabled","defaultValue","placeholderDisabled","placeholderFocus","sizeLarge","sizeLargeFallback","sizeMedium","sizeMediumFallback","sizeSmall","sizeSmallFallback","Boolean","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import invariant from 'invariant';\nimport React from 'react';\nimport raf from 'raf';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isKeyBackspace, isKeyDelete, someKeys } from '../../lib/events/keyboard/identifiers';\nimport { needsPolyfillPlaceholder } from '../../lib/needsPolyfillPlaceholder';\nimport { Nullable, Override } from '../../typings/utility-types';\nimport { MaskedInput } from '../../internal/MaskedInput';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Input.styles';\n\nexport type InputSize = 'small' | 'medium' | 'large';\nexport type InputAlign = 'left' | 'center' | 'right';\nexport type InputType = 'password' | 'text';\nexport type InputIconType = React.ReactNode | (() => React.ReactNode);\n\nexport interface InputProps\n extends CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /**\n * Иконка слева\n * Если `ReactNode` применяются дефолтные стили для иконки\n * Если `() => ReactNode` применяются только стили для позиционирование\n */\n leftIcon?: InputIconType;\n /**\n * Иконка справа\n * Если `ReactNode` применяются дефолтные стили для иконки\n * Если `() => ReactNode` применяются только стили для позиционирование\n */\n rightIcon?: InputIconType;\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n /** Режим прозрачной рамки */\n borderless?: boolean;\n /** Выравнивание текста */\n align?: InputAlign;\n /** Паттерн маски */\n mask?: Nullable<string>;\n /** Символ маски */\n maskChar?: Nullable<string>;\n /**\n * Словарь символов-регулярок для задания маски\n * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n */\n formatChars?: Record<string, string>;\n /** Показывать символы маски */\n alwaysShowMask?: boolean;\n /** Размер */\n size?: InputSize;\n /** onValueChange */\n onValueChange?: (value: string) => void;\n /** Вызывается на label */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n /** Вызывается на label */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n /** Вызывается на label */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n /** Тип */\n type?: InputType;\n /** Значение */\n value?: string;\n capture?: boolean;\n\n /**\n * Префикс\n * `ReactNode` перед значением, но после иконки\n */\n prefix?: React.ReactNode;\n /**\n * Суффикс\n * `ReactNode` после значения, но перед правой иконкой\n */\n suffix?: React.ReactNode;\n /** Выделять введенное значение при фокусе */\n selectAllOnFocus?: boolean;\n /**\n * Обработчик неправильного ввода.\n * По-умолчанию, инпут вспыхивает синим.\n * Если передан - вызывается переданный обработчик,\n * в таком случае вспыхивание можно вызвать\n * публичным методом инстанса `blink()`.\n *\n * @param value значение инпута.\n */\n onUnexpectedInput?: (value: string) => void;\n }\n > {}\n\nexport interface InputState {\n blinking: boolean;\n focused: boolean;\n needsPolyfillPlaceholder: boolean;\n}\n\nexport const InputDataTids = {\n root: 'Input__root',\n} as const;\n\n/**\n * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.\n * Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`\n */\n@rootNode\nexport class Input extends React.Component<InputProps, InputState> {\n public static __KONTUR_REACT_UI__ = 'Input';\n\n public static defaultProps: {\n size: InputSize;\n } = {\n size: 'small',\n };\n\n public state: InputState = {\n needsPolyfillPlaceholder,\n blinking: false,\n focused: false,\n };\n\n private selectAllId: number | null = null;\n private theme!: Theme;\n private blinkTimeout = 0;\n private input: HTMLInputElement | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentWillUnmount() {\n if (this.blinkTimeout) {\n clearTimeout(this.blinkTimeout);\n }\n this.cancelDelayedSelectAll();\n }\n\n /**\n * @public\n */\n public focus() {\n invariant(this.input, 'Cannot call \"focus\" because Input is not mounted');\n this.input!.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n invariant(this.input, 'Cannot call \"blur\" because Input is not mounted');\n this.input!.blur();\n }\n\n /**\n * @public\n */\n public getNode() {\n return this.input;\n }\n\n /**\n * @public\n */\n public blink() {\n if (this.blinkTimeout) {\n this.cancelBlink(() => {\n // trigger reflow to restart animation\n // @see https://css-tricks.com/restart-css-animation/#article-header-id-0\n void (this.input && this.input.offsetWidth);\n this.blink();\n });\n return;\n }\n this.setState({ blinking: true }, () => {\n this.blinkTimeout = window.setTimeout(this.cancelBlink, 150);\n });\n }\n\n /**\n * @public\n * @param {number} start\n * @param {number} end\n */\n public setSelectionRange(start: number, end: number) {\n if (!this.input) {\n throw new Error('Cannot call \"setSelectionRange\" on unmounted Input');\n }\n\n if (document.activeElement !== this.input) {\n this.focus();\n }\n\n this.input.setSelectionRange(start, end);\n }\n\n public get isMaskVisible(): boolean {\n const { mask, alwaysShowMask } = this.props;\n const { focused } = this.state;\n return Boolean(mask && (focused || alwaysShowMask));\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public selectAll = (): void => {\n if (this.input) {\n this.setSelectionRange(0, this.input.value.length);\n }\n };\n\n private delaySelectAll = (): number => (this.selectAllId = raf(this.selectAll));\n\n private cancelDelayedSelectAll = (): void => {\n if (this.selectAllId) {\n raf.cancel(this.selectAllId);\n this.selectAllId = null;\n }\n };\n\n private cancelBlink = (callback?: () => void): void => {\n if (this.blinkTimeout) {\n clearTimeout(this.blinkTimeout);\n this.blinkTimeout = 0;\n if (this.state.blinking) {\n this.setState({ blinking: false }, callback);\n return;\n }\n }\n if (callback) {\n callback();\n }\n };\n\n private renderMain = (props: CommonWrapperRestProps<InputProps>) => {\n const {\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onKeyPress,\n onValueChange,\n width,\n error,\n warning,\n leftIcon,\n rightIcon,\n borderless,\n value,\n align,\n type,\n mask,\n maskChar,\n alwaysShowMask,\n size,\n placeholder,\n selectAllOnFocus,\n disabled,\n onUnexpectedInput,\n prefix,\n suffix,\n formatChars,\n ...rest\n } = props;\n\n const { blinking, focused } = this.state;\n\n const labelProps = {\n className: cx(styles.root(this.theme), this.getSizeClassName(), {\n [styles.focus(this.theme)]: focused,\n [styles.blink(this.theme)]: blinking,\n [styles.borderless()]: borderless && !focused,\n [styles.disabled(this.theme)]: disabled,\n [styles.warning(this.theme)]: warning,\n [styles.error(this.theme)]: error,\n [styles.focusFallback(this.theme)]: focused && (isIE11 || isEdge),\n [styles.warningFallback(this.theme)]: warning && (isIE11 || isEdge),\n [styles.errorFallback(this.theme)]: error && (isIE11 || isEdge),\n }),\n style: { width },\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n };\n\n const inputProps = {\n ...rest,\n className: cx(styles.input(this.theme), {\n [styles.inputFocus(this.theme)]: focused,\n [styles.inputDisabled(this.theme)]: disabled,\n }),\n value,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onKeyDown: this.handleKeyDown,\n onKeyPress: this.handleKeyPress,\n onBlur: this.handleBlur,\n style: { textAlign: align },\n ref: this.refInput,\n type: 'text',\n placeholder: !this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,\n disabled,\n };\n\n if (type === 'password') {\n inputProps.type = type;\n }\n\n const input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);\n\n return (\n <label data-tid={InputDataTids.root} {...labelProps}>\n <span className={styles.sideContainer()}>\n {this.renderLeftIcon()}\n {this.renderPrefix()}\n </span>\n <span className={styles.wrapper()}>\n {input}\n {this.renderPlaceholder()}\n </span>\n <span className={cx(styles.sideContainer(), styles.rightContainer())}>\n {this.renderSuffix()}\n {this.renderRightIcon()}\n </span>\n </label>\n );\n };\n\n private renderMaskedInput(\n inputProps: React.InputHTMLAttributes<HTMLInputElement> & {\n capture?: boolean;\n },\n mask: string,\n ) {\n return (\n <MaskedInput\n {...inputProps}\n mask={mask}\n maskChar={this.props.maskChar}\n alwaysShowMask={this.props.alwaysShowMask}\n formatChars={this.props.formatChars}\n onChange={this.props.onChange}\n onValueChange={this.handleMaskedValueChange}\n onUnexpectedInput={this.handleUnexpectedInput}\n />\n );\n }\n\n private getIconSizeClassname(right = false) {\n switch (this.props.size) {\n case 'large':\n return right ? styles.rightIconLarge(this.theme) : styles.leftIconLarge(this.theme);\n case 'medium':\n return right ? styles.rightIconMedium(this.theme) : styles.leftIconMedium(this.theme);\n case 'small':\n default:\n return right ? styles.rightIconSmall(this.theme) : styles.leftIconSmall(this.theme);\n }\n }\n\n private renderLeftIcon() {\n return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());\n }\n\n private renderRightIcon() {\n return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));\n }\n\n private renderIcon(icon: InputIconType, sizeClassName: string) {\n if (!icon) {\n return null;\n }\n const { disabled } = this.props;\n const iconNode = icon instanceof Function ? icon() : icon;\n\n return (\n <span\n className={cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), {\n [styles.iconDisabled()]: disabled,\n })}\n >\n {iconNode}\n </span>\n );\n }\n\n private renderPlaceholder() {\n const { disabled } = this.props;\n const { focused } = this.state;\n let placeholder = null;\n\n if (\n this.state.needsPolyfillPlaceholder &&\n this.props.placeholder &&\n !this.isMaskVisible &&\n !this.props.value &&\n !this.props.defaultValue\n ) {\n placeholder = (\n <div\n className={cx(styles.placeholder(this.theme), {\n [styles.placeholderDisabled(this.theme)]: disabled,\n [styles.placeholderFocus(this.theme)]: focused,\n })}\n style={{ textAlign: this.props.align || 'inherit' }}\n >\n {this.props.placeholder}\n </div>\n );\n }\n\n return placeholder;\n }\n\n private getSizeClassName() {\n switch (this.props.size) {\n case 'large':\n return cx({\n [styles.sizeLarge(this.theme)]: true,\n [styles.sizeLargeFallback(this.theme)]: isIE11 || isEdge,\n });\n case 'medium':\n return cx({\n [styles.sizeMedium(this.theme)]: true,\n [styles.sizeMediumFallback(this.theme)]: isIE11 || isEdge,\n });\n case 'small':\n default:\n return cx({\n [styles.sizeSmall(this.theme)]: true,\n [styles.sizeSmallFallback(this.theme)]: isIE11 || isEdge,\n });\n }\n }\n\n private refInput = (element: HTMLInputElement | MaskedInput | null) => {\n if (element instanceof MaskedInput) {\n this.input = element.input;\n } else {\n this.input = element;\n }\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (needsPolyfillPlaceholder) {\n const fieldIsEmpty = event.target.value === '';\n if (this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {\n this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });\n }\n }\n\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({\n focused: true,\n });\n\n if (this.props.selectAllOnFocus) {\n // https://github.com/facebook/react/issues/7769\n this.input && !isIE11 ? this.selectAll() : this.delaySelectAll();\n }\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n }\n\n const isDeleteKey = someKeys(isKeyBackspace, isKeyDelete)(e);\n\n if (!e.currentTarget.value && isDeleteKey && !e.repeat) {\n this.handleUnexpectedInput();\n }\n };\n\n private handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyPress) {\n this.props.onKeyPress(event);\n }\n\n if (this.props.maxLength === event.currentTarget.value.length) {\n this.handleUnexpectedInput(event.currentTarget.value);\n }\n };\n\n private handleMaskedValueChange = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private handleUnexpectedInput = (value: string = this.props.value || '') => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(value);\n } else {\n this.blink();\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: false });\n\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n private renderPrefix = () => {\n const { prefix, disabled } = this.props;\n\n if (!prefix) {\n return null;\n }\n\n return (\n <span className={cx(styles.prefix(this.theme), { [styles.prefixDisabled(this.theme)]: disabled })}>{prefix}</span>\n );\n };\n\n private renderSuffix = () => {\n const { suffix, disabled } = this.props;\n\n if (!suffix) {\n return null;\n }\n\n return (\n <span className={cx(styles.suffix(this.theme), { [styles.suffixDisabled(this.theme)]: disabled })}>{suffix}</span>\n );\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Input.tsx"],"names":["InputDataTids","root","Input","rootNode","getProps","defaultProps","state","needsPolyfillPlaceholder","blinking","focused","selectAllId","blinkTimeout","input","selectAll","setSelectionRange","value","length","delaySelectAll","cancelDelayedSelectAll","raf","cancel","cancelBlink","callback","clearTimeout","setState","renderMain","props","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onKeyPress","onValueChange","width","error","warning","leftIcon","rightIcon","borderless","align","type","mask","maskChar","alwaysShowMask","size","placeholder","selectAllOnFocus","disabled","onUnexpectedInput","prefix","suffix","formatChars","rest","labelProps","className","styles","theme","getSizeClassName","focus","blink","focusFallback","isIE11","isEdge","warningFallback","errorFallback","style","inputProps","inputFocus","inputDisabled","onChange","handleChange","onFocus","handleFocus","handleKeyDown","handleKeyPress","onBlur","handleBlur","textAlign","ref","refInput","isMaskVisible","undefined","renderMaskedInput","React","createElement","sideContainer","renderLeftIcon","renderPrefix","wrapper","renderPlaceholder","rightContainer","renderSuffix","renderRightIcon","element","MaskedInput","event","fieldIsEmpty","target","e","isDeleteKey","isKeyBackspace","isKeyDelete","currentTarget","repeat","handleUnexpectedInput","maxLength","handleMaskedValueChange","prefixDisabled","suffixDisabled","componentWillUnmount","blur","getNode","offsetWidth","window","setTimeout","start","end","Error","document","activeElement","render","setRootNode","getIconSizeClassname","right","rightIconLarge","leftIconLarge","rightIconMedium","leftIconMedium","rightIconSmall","leftIconSmall","renderIcon","icon","sizeClassName","iconNode","Function","useDefaultColor","iconDisabled","defaultValue","placeholderDisabled","placeholderFocus","sizeLarge","sizeLargeFallback","sizeMedium","sizeMediumFallback","sizeSmall","sizeSmallFallback","Boolean","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import invariant from 'invariant';\nimport React from 'react';\nimport raf from 'raf';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isKeyBackspace, isKeyDelete, someKeys } from '../../lib/events/keyboard/identifiers';\nimport { needsPolyfillPlaceholder } from '../../lib/needsPolyfillPlaceholder';\nimport { Nullable, Override } from '../../typings/utility-types';\nimport { MaskedInput } from '../../internal/MaskedInput';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Input.styles';\n\nexport type InputSize = 'small' | 'medium' | 'large';\nexport type InputAlign = 'left' | 'center' | 'right';\nexport type InputType = 'password' | 'text';\nexport type InputIconType = React.ReactNode | (() => React.ReactNode);\n\nexport interface InputProps\n extends CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /**\n * Иконка слева\n * Если `ReactNode` применяются дефолтные стили для иконки\n * Если `() => ReactNode` применяются только стили для позиционирование\n */\n leftIcon?: InputIconType;\n /**\n * Иконка справа\n * Если `ReactNode` применяются дефолтные стили для иконки\n * Если `() => ReactNode` применяются только стили для позиционирование\n */\n rightIcon?: InputIconType;\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n /** Режим прозрачной рамки */\n borderless?: boolean;\n /** Выравнивание текста */\n align?: InputAlign;\n /** Паттерн маски */\n mask?: Nullable<string>;\n /** Символ маски */\n maskChar?: Nullable<string>;\n /**\n * Словарь символов-регулярок для задания маски\n * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n */\n formatChars?: Record<string, string>;\n /** Показывать символы маски */\n alwaysShowMask?: boolean;\n /** Размер */\n size?: InputSize;\n /** onValueChange */\n onValueChange?: (value: string) => void;\n /** Вызывается на label */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n /** Вызывается на label */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n /** Вызывается на label */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n /** Тип */\n type?: InputType;\n /** Значение */\n value?: string;\n capture?: boolean;\n\n /**\n * Префикс\n * `ReactNode` перед значением, но после иконки\n */\n prefix?: React.ReactNode;\n /**\n * Суффикс\n * `ReactNode` после значения, но перед правой иконкой\n */\n suffix?: React.ReactNode;\n /** Выделять введенное значение при фокусе */\n selectAllOnFocus?: boolean;\n /**\n * Обработчик неправильного ввода.\n * По-умолчанию, инпут вспыхивает синим.\n * Если передан - вызывается переданный обработчик,\n * в таком случае вспыхивание можно вызвать\n * публичным методом инстанса `blink()`.\n *\n * @param value значение инпута.\n */\n onUnexpectedInput?: (value: string) => void;\n }\n > {}\n\nexport interface InputState {\n blinking: boolean;\n focused: boolean;\n needsPolyfillPlaceholder: boolean;\n}\n\nexport const InputDataTids = {\n root: 'Input__root',\n} as const;\n\ntype DefaultProps = Required<Pick<InputProps, 'size'>>;\n\n/**\n * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.\n * Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`\n */\n@rootNode\nexport class Input extends React.Component<InputProps, InputState> {\n public static __KONTUR_REACT_UI__ = 'Input';\n\n public static defaultProps: DefaultProps = {\n size: 'small',\n };\n\n private getProps = createPropsGetter(Input.defaultProps);\n\n public state: InputState = {\n needsPolyfillPlaceholder,\n blinking: false,\n focused: false,\n };\n\n private selectAllId: number | null = null;\n private theme!: Theme;\n private blinkTimeout = 0;\n private input: HTMLInputElement | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentWillUnmount() {\n if (this.blinkTimeout) {\n clearTimeout(this.blinkTimeout);\n }\n this.cancelDelayedSelectAll();\n }\n\n /**\n * @public\n */\n public focus() {\n invariant(this.input, 'Cannot call \"focus\" because Input is not mounted');\n this.input!.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n invariant(this.input, 'Cannot call \"blur\" because Input is not mounted');\n this.input!.blur();\n }\n\n /**\n * @public\n */\n public getNode() {\n return this.input;\n }\n\n /**\n * @public\n */\n public blink() {\n if (this.blinkTimeout) {\n this.cancelBlink(() => {\n // trigger reflow to restart animation\n // @see https://css-tricks.com/restart-css-animation/#article-header-id-0\n void (this.input && this.input.offsetWidth);\n this.blink();\n });\n return;\n }\n this.setState({ blinking: true }, () => {\n this.blinkTimeout = window.setTimeout(this.cancelBlink, 150);\n });\n }\n\n /**\n * @public\n * @param {number} start\n * @param {number} end\n */\n public setSelectionRange(start: number, end: number) {\n if (!this.input) {\n throw new Error('Cannot call \"setSelectionRange\" on unmounted Input');\n }\n\n if (document.activeElement !== this.input) {\n this.focus();\n }\n\n this.input.setSelectionRange(start, end);\n }\n\n public get isMaskVisible(): boolean {\n const { mask, alwaysShowMask } = this.props;\n const { focused } = this.state;\n return Boolean(mask && (focused || alwaysShowMask));\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public selectAll = (): void => {\n if (this.input) {\n this.setSelectionRange(0, this.input.value.length);\n }\n };\n\n private delaySelectAll = (): number => (this.selectAllId = raf(this.selectAll));\n\n private cancelDelayedSelectAll = (): void => {\n if (this.selectAllId) {\n raf.cancel(this.selectAllId);\n this.selectAllId = null;\n }\n };\n\n private cancelBlink = (callback?: () => void): void => {\n if (this.blinkTimeout) {\n clearTimeout(this.blinkTimeout);\n this.blinkTimeout = 0;\n if (this.state.blinking) {\n this.setState({ blinking: false }, callback);\n return;\n }\n }\n if (callback) {\n callback();\n }\n };\n\n private renderMain = (props: CommonWrapperRestProps<InputProps>) => {\n const {\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onKeyPress,\n onValueChange,\n width,\n error,\n warning,\n leftIcon,\n rightIcon,\n borderless,\n value,\n align,\n type,\n mask,\n maskChar,\n alwaysShowMask,\n size,\n placeholder,\n selectAllOnFocus,\n disabled,\n onUnexpectedInput,\n prefix,\n suffix,\n formatChars,\n ...rest\n } = props;\n\n const { blinking, focused } = this.state;\n\n const labelProps = {\n className: cx(styles.root(this.theme), this.getSizeClassName(), {\n [styles.focus(this.theme)]: focused,\n [styles.blink(this.theme)]: blinking,\n [styles.borderless()]: borderless && !focused,\n [styles.disabled(this.theme)]: disabled,\n [styles.warning(this.theme)]: warning,\n [styles.error(this.theme)]: error,\n [styles.focusFallback(this.theme)]: focused && (isIE11 || isEdge),\n [styles.warningFallback(this.theme)]: warning && (isIE11 || isEdge),\n [styles.errorFallback(this.theme)]: error && (isIE11 || isEdge),\n }),\n style: { width },\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n };\n\n const inputProps = {\n ...rest,\n className: cx(styles.input(this.theme), {\n [styles.inputFocus(this.theme)]: focused,\n [styles.inputDisabled(this.theme)]: disabled,\n }),\n value,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onKeyDown: this.handleKeyDown,\n onKeyPress: this.handleKeyPress,\n onBlur: this.handleBlur,\n style: { textAlign: align },\n ref: this.refInput,\n type: 'text',\n placeholder: !this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,\n disabled,\n };\n\n if (type === 'password') {\n inputProps.type = type;\n }\n\n const input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);\n\n return (\n <label data-tid={InputDataTids.root} {...labelProps}>\n <span className={styles.sideContainer()}>\n {this.renderLeftIcon()}\n {this.renderPrefix()}\n </span>\n <span className={styles.wrapper()}>\n {input}\n {this.renderPlaceholder()}\n </span>\n <span className={cx(styles.sideContainer(), styles.rightContainer())}>\n {this.renderSuffix()}\n {this.renderRightIcon()}\n </span>\n </label>\n );\n };\n\n private renderMaskedInput(\n inputProps: React.InputHTMLAttributes<HTMLInputElement> & {\n capture?: boolean;\n },\n mask: string,\n ) {\n return (\n <MaskedInput\n {...inputProps}\n mask={mask}\n maskChar={this.props.maskChar}\n alwaysShowMask={this.props.alwaysShowMask}\n formatChars={this.props.formatChars}\n onChange={this.props.onChange}\n onValueChange={this.handleMaskedValueChange}\n onUnexpectedInput={this.handleUnexpectedInput}\n />\n );\n }\n\n private getIconSizeClassname(right = false) {\n switch (this.getProps().size) {\n case 'large':\n return right ? styles.rightIconLarge(this.theme) : styles.leftIconLarge(this.theme);\n case 'medium':\n return right ? styles.rightIconMedium(this.theme) : styles.leftIconMedium(this.theme);\n case 'small':\n default:\n return right ? styles.rightIconSmall(this.theme) : styles.leftIconSmall(this.theme);\n }\n }\n\n private renderLeftIcon() {\n return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());\n }\n\n private renderRightIcon() {\n return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));\n }\n\n private renderIcon(icon: InputIconType, sizeClassName: string) {\n if (!icon) {\n return null;\n }\n const { disabled } = this.props;\n const iconNode = icon instanceof Function ? icon() : icon;\n\n return (\n <span\n className={cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), {\n [styles.iconDisabled()]: disabled,\n })}\n >\n {iconNode}\n </span>\n );\n }\n\n private renderPlaceholder() {\n const { disabled } = this.props;\n const { focused } = this.state;\n let placeholder = null;\n\n if (\n this.state.needsPolyfillPlaceholder &&\n this.props.placeholder &&\n !this.isMaskVisible &&\n !this.props.value &&\n !this.props.defaultValue\n ) {\n placeholder = (\n <div\n className={cx(styles.placeholder(this.theme), {\n [styles.placeholderDisabled(this.theme)]: disabled,\n [styles.placeholderFocus(this.theme)]: focused,\n })}\n style={{ textAlign: this.props.align || 'inherit' }}\n >\n {this.props.placeholder}\n </div>\n );\n }\n\n return placeholder;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx({\n [styles.sizeLarge(this.theme)]: true,\n [styles.sizeLargeFallback(this.theme)]: isIE11 || isEdge,\n });\n case 'medium':\n return cx({\n [styles.sizeMedium(this.theme)]: true,\n [styles.sizeMediumFallback(this.theme)]: isIE11 || isEdge,\n });\n case 'small':\n default:\n return cx({\n [styles.sizeSmall(this.theme)]: true,\n [styles.sizeSmallFallback(this.theme)]: isIE11 || isEdge,\n });\n }\n }\n\n private refInput = (element: HTMLInputElement | MaskedInput | null) => {\n if (element instanceof MaskedInput) {\n this.input = element.input;\n } else {\n this.input = element;\n }\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (needsPolyfillPlaceholder) {\n const fieldIsEmpty = event.target.value === '';\n if (this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {\n this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });\n }\n }\n\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({\n focused: true,\n });\n\n if (this.props.selectAllOnFocus) {\n // https://github.com/facebook/react/issues/7769\n this.input && !isIE11 ? this.selectAll() : this.delaySelectAll();\n }\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n }\n\n const isDeleteKey = someKeys(isKeyBackspace, isKeyDelete)(e);\n\n if (!e.currentTarget.value && isDeleteKey && !e.repeat) {\n this.handleUnexpectedInput();\n }\n };\n\n private handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyPress) {\n this.props.onKeyPress(event);\n }\n\n if (this.props.maxLength === event.currentTarget.value.length) {\n this.handleUnexpectedInput(event.currentTarget.value);\n }\n };\n\n private handleMaskedValueChange = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private handleUnexpectedInput = (value: string = this.props.value || '') => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(value);\n } else {\n this.blink();\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: false });\n\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n private renderPrefix = () => {\n const { prefix, disabled } = this.props;\n\n if (!prefix) {\n return null;\n }\n\n return (\n <span className={cx(styles.prefix(this.theme), { [styles.prefixDisabled(this.theme)]: disabled })}>{prefix}</span>\n );\n };\n\n private renderSuffix = () => {\n const { suffix, disabled } = this.props;\n\n if (!suffix) {\n return null;\n }\n\n return (\n <span className={cx(styles.suffix(this.theme), { [styles.suffixDisabled(this.theme)]: disabled })}>{suffix}</span>\n );\n };\n}\n"]}
|
|
@@ -5,7 +5,7 @@ import { PopupPositionsType } from '../../internal/Popup';
|
|
|
5
5
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
6
6
|
export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
|
|
7
7
|
disabled?: boolean;
|
|
8
|
-
size
|
|
8
|
+
size?: 'small' | 'medium' | 'large';
|
|
9
9
|
/**
|
|
10
10
|
* Список позиций доступных для расположения выпадашки.
|
|
11
11
|
*
|
|
@@ -14,12 +14,12 @@ export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' |
|
|
|
14
14
|
* **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
|
|
15
15
|
* @default ['bottom left', 'bottom right', 'top left', 'top right']
|
|
16
16
|
*/
|
|
17
|
-
positions
|
|
17
|
+
positions?: PopupPositionsType[];
|
|
18
18
|
menuMaxHeight?: number | string;
|
|
19
19
|
/**
|
|
20
20
|
* Не показывать анимацию
|
|
21
21
|
*/
|
|
22
|
-
disableAnimations
|
|
22
|
+
disableAnimations?: boolean;
|
|
23
23
|
/**
|
|
24
24
|
* Кастомная иконка
|
|
25
25
|
*/
|
|
@@ -29,17 +29,12 @@ export interface KebabState {
|
|
|
29
29
|
anchor: Nullable<HTMLElement>;
|
|
30
30
|
focusedByTab: boolean;
|
|
31
31
|
}
|
|
32
|
+
declare type DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations' | 'icon'>>;
|
|
32
33
|
export declare class Kebab extends React.Component<KebabProps, KebabState> {
|
|
33
34
|
static __KONTUR_REACT_UI__: string;
|
|
34
35
|
static propTypes: {};
|
|
35
|
-
static defaultProps:
|
|
36
|
-
|
|
37
|
-
onClose: () => undefined;
|
|
38
|
-
positions: string[];
|
|
39
|
-
size: string;
|
|
40
|
-
disableAnimations: boolean;
|
|
41
|
-
icon: JSX.Element;
|
|
42
|
-
};
|
|
36
|
+
static defaultProps: DefaultProps;
|
|
37
|
+
private getProps;
|
|
43
38
|
state: {
|
|
44
39
|
focusedByTab: boolean;
|
|
45
40
|
anchor: null;
|
|
@@ -58,3 +53,4 @@ export declare class Kebab extends React.Component<KebabProps, KebabState> {
|
|
|
58
53
|
private handleBlur;
|
|
59
54
|
private renderIcon;
|
|
60
55
|
}
|
|
56
|
+
export {};
|
|
@@ -15,6 +15,7 @@ var _ThemeFactory = require("../../lib/theming/ThemeFactory");
|
|
|
15
15
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
16
16
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
17
17
|
var _rootNode = require("../../lib/rootNode");
|
|
18
|
+
var _createPropsGetter = require("../../lib/createPropsGetter");
|
|
18
19
|
|
|
19
20
|
var _Kebab = require("./Kebab.styles");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
|
|
20
21
|
|
|
@@ -42,6 +43,10 @@ var _Kebab = require("./Kebab.styles");var _class, _class2, _temp;function _getR
|
|
|
42
43
|
|
|
43
44
|
|
|
44
45
|
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
45
50
|
|
|
46
51
|
|
|
47
52
|
|
|
@@ -61,6 +66,8 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
61
66
|
|
|
62
67
|
|
|
63
68
|
|
|
69
|
+
getProps = (0, _createPropsGetter.createPropsGetter)(Kebab.defaultProps);_this.
|
|
70
|
+
|
|
64
71
|
state = {
|
|
65
72
|
focusedByTab: false,
|
|
66
73
|
anchor: null };_this.
|
|
@@ -126,6 +133,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
126
133
|
|
|
127
134
|
|
|
128
135
|
|
|
136
|
+
|
|
129
137
|
|
|
130
138
|
|
|
131
139
|
renderCaption = function (captionProps) {var _cx;
|
|
@@ -193,19 +201,20 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
193
201
|
_this.setState({
|
|
194
202
|
focusedByTab: false });
|
|
195
203
|
|
|
196
|
-
};return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$
|
|
204
|
+
};return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var disabled = this.props.disabled;var _this$getProps = this.getProps(),positions = _this$getProps.positions,disableAnimations = _this$getProps.disableAnimations,onOpen = _this$getProps.onOpen,onClose = _this$getProps.onClose;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: disableAnimations, menuMaxHeight: this.props.menuMaxHeight, onOpen: onOpen, onClose: onClose }, !disabled && this.props.children));};_proto.
|
|
197
205
|
|
|
198
206
|
renderIcon = function renderIcon() {var _cx2;
|
|
207
|
+
var _this$getProps2 = this.getProps(),size = _this$getProps2.size,icon = _this$getProps2.icon;
|
|
199
208
|
return /*#__PURE__*/(
|
|
200
209
|
_react.default.createElement("div", {
|
|
201
210
|
className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
|
|
202
211
|
_Kebab.styles.icon()] = true, _cx2[
|
|
203
|
-
_Kebab.styles.iconsmall()] =
|
|
204
|
-
_Kebab.styles.iconmedium()] =
|
|
205
|
-
_Kebab.styles.iconlarge()] =
|
|
212
|
+
_Kebab.styles.iconsmall()] = size === 'small', _cx2[
|
|
213
|
+
_Kebab.styles.iconmedium()] = size === 'medium', _cx2[
|
|
214
|
+
_Kebab.styles.iconlarge()] = size === 'large', _cx2)) },
|
|
206
215
|
|
|
207
216
|
|
|
208
|
-
|
|
217
|
+
icon));
|
|
209
218
|
|
|
210
219
|
|
|
211
220
|
};return Kebab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = { onOpen: function onOpen() {return undefined;}, onClose: function onClose() {return undefined;}, positions: ['bottom left', 'bottom right', 'top left', 'top right'], size: 'small', disableAnimations: _currentEnvironment.isTestEnv, icon: /*#__PURE__*/_react.default.createElement(_px.MenuKebabIcon, null) }, _temp)) || _class;exports.Kebab = Kebab;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","rootNode","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","theme","opened","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","setRootNode","disableAnimations","menuMaxHeight","onOpen","onClose","children","icon","iconsmall","size","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {\n disabled?: boolean;\n size: 'small' | 'medium' | 'large';\n /**\n * Список позиций доступных для расположения выпадашки.\n *\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n *\n * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions: PopupPositionsType[];\n menuMaxHeight?: number | string;\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n /**\n * Кастомная иконка\n */\n icon?: React.ReactNode;\n}\n\nexport interface KebabState {\n anchor: Nullable<HTMLElement>;\n focusedByTab: boolean;\n}\n\n@rootNode\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n public static __KONTUR_REACT_UI__ = 'Kebab';\n\n public static propTypes = {};\n\n public static defaultProps = {\n onOpen: () => undefined,\n onClose: () => undefined,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n size: 'small',\n disableAnimations: isTestEnv,\n icon: <MenuKebabIcon />,\n };\n\n public state = {\n focusedByTab: false,\n anchor: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n private listener: {\n remove: () => void;\n } = {\n remove: () => undefined,\n };\n\n public componentDidMount() {\n /** addListener'у нужен колбэк в аргумент */\n this.listener = LayoutEvents.addListener(() => undefined);\n }\n\n public componentWillUnmount() {\n this.listener.remove();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.kebabPinOffset,\n popupMargin: theme.kebabMargin,\n popupPinSize: theme.kebabPinSize,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { disabled, positions } = this.props;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n popupHasPin\n positions={positions}\n onChangeMenuState={this.handleChangeMenuState}\n caption={this.renderCaption}\n disableAnimations={this.props.disableAnimations}\n menuMaxHeight={this.props.menuMaxHeight}\n onOpen={this.props.onOpen}\n onClose={this.props.onClose}\n >\n {!disabled && this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n const { disabled } = this.props;\n const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n this.handleCaptionKeyDown(event, captionProps.openMenu);\n }\n };\n\n const handleCaptionClick = () => {\n if (!disabled) {\n captionProps.toggleMenu();\n }\n };\n\n return (\n <span\n tabIndex={disabled ? -1 : 0}\n onClick={handleCaptionClick}\n onKeyDown={handleCaptionKeyDown}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n className={cx({\n [styles.kebab(this.theme)]: true,\n [styles.opened(this.theme)]: captionProps.opened,\n [styles.disabled()]: disabled,\n [styles.focused(this.theme)]: this.state.focusedByTab,\n })}\n >\n {this.renderIcon()}\n </span>\n );\n };\n\n private handleCaptionKeyDown = (\n e: React.KeyboardEvent<HTMLDivElement>,\n openMenu: PopupMenuCaptionProps['openMenu'],\n ) => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n openMenu(true);\n }\n };\n\n private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n this.setState({\n focusedByTab: !isOpened && restoreFocus,\n });\n };\n\n private handleFocus = () => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private handleBlur = () => {\n this.setState({\n focusedByTab: false,\n });\n };\n\n private renderIcon() {\n return (\n <div\n className={cx({\n [styles.icon()]: true,\n [styles.iconsmall()]: this.props.size === 'small',\n [styles.iconmedium()]: this.props.size === 'medium',\n [styles.iconlarge()]: this.props.size === 'large',\n })}\n >\n {this.props.icon}\n </div>\n );\n }\n}\n\nKebab.propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n /**\n * Размер кебаба small 14px | large 20px\n */\n size: PropTypes.string,\n\n /**\n * Коллбек, вызывающийся перед закрытием кебаба\n */\n onClose: PropTypes.func,\n\n /**\n * Коллбек, вызывающийся перед открытием кебаба\n */\n onOpen: PropTypes.func,\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","rootNode","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","theme","opened","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","menuMaxHeight","children","size","icon","iconsmall","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {\n disabled?: boolean;\n size?: 'small' | 'medium' | 'large';\n /**\n * Список позиций доступных для расположения выпадашки.\n *\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n *\n * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions?: PopupPositionsType[];\n menuMaxHeight?: number | string;\n /**\n * Не показывать анимацию\n */\n disableAnimations?: boolean;\n /**\n * Кастомная иконка\n */\n icon?: React.ReactNode;\n}\n\nexport interface KebabState {\n anchor: Nullable<HTMLElement>;\n focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<\n Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations' | 'icon'>\n>;\n\n@rootNode\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n public static __KONTUR_REACT_UI__ = 'Kebab';\n\n public static propTypes = {};\n\n public static defaultProps: DefaultProps = {\n onOpen: () => undefined,\n onClose: () => undefined,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n size: 'small',\n disableAnimations: isTestEnv,\n icon: <MenuKebabIcon />,\n };\n\n private getProps = createPropsGetter(Kebab.defaultProps);\n\n public state = {\n focusedByTab: false,\n anchor: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n private listener: {\n remove: () => void;\n } = {\n remove: () => undefined,\n };\n\n public componentDidMount() {\n /** addListener'у нужен колбэк в аргумент */\n this.listener = LayoutEvents.addListener(() => undefined);\n }\n\n public componentWillUnmount() {\n this.listener.remove();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.kebabPinOffset,\n popupMargin: theme.kebabMargin,\n popupPinSize: theme.kebabPinSize,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { disabled } = this.props;\n const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n popupHasPin\n positions={positions}\n onChangeMenuState={this.handleChangeMenuState}\n caption={this.renderCaption}\n disableAnimations={disableAnimations}\n menuMaxHeight={this.props.menuMaxHeight}\n onOpen={onOpen}\n onClose={onClose}\n >\n {!disabled && this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n const { disabled } = this.props;\n const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n this.handleCaptionKeyDown(event, captionProps.openMenu);\n }\n };\n\n const handleCaptionClick = () => {\n if (!disabled) {\n captionProps.toggleMenu();\n }\n };\n\n return (\n <span\n tabIndex={disabled ? -1 : 0}\n onClick={handleCaptionClick}\n onKeyDown={handleCaptionKeyDown}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n className={cx({\n [styles.kebab(this.theme)]: true,\n [styles.opened(this.theme)]: captionProps.opened,\n [styles.disabled()]: disabled,\n [styles.focused(this.theme)]: this.state.focusedByTab,\n })}\n >\n {this.renderIcon()}\n </span>\n );\n };\n\n private handleCaptionKeyDown = (\n e: React.KeyboardEvent<HTMLDivElement>,\n openMenu: PopupMenuCaptionProps['openMenu'],\n ) => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n openMenu(true);\n }\n };\n\n private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n this.setState({\n focusedByTab: !isOpened && restoreFocus,\n });\n };\n\n private handleFocus = () => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private handleBlur = () => {\n this.setState({\n focusedByTab: false,\n });\n };\n\n private renderIcon() {\n const { size, icon } = this.getProps();\n return (\n <div\n className={cx({\n [styles.icon()]: true,\n [styles.iconsmall()]: size === 'small',\n [styles.iconmedium()]: size === 'medium',\n [styles.iconlarge()]: size === 'large',\n })}\n >\n {icon}\n </div>\n );\n }\n}\n\nKebab.propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n /**\n * Размер кебаба small 14px | large 20px\n */\n size: PropTypes.string,\n\n /**\n * Коллбек, вызывающийся перед закрытием кебаба\n */\n onClose: PropTypes.func,\n\n /**\n * Коллбек, вызывающийся перед открытием кебаба\n */\n onOpen: PropTypes.func,\n};\n"]}
|