@skbkontur/react-ui 3.10.0 → 3.11.0-select-right
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 +19 -0
- package/LICENSE +21 -21
- package/cjs/components/Autocomplete/Autocomplete.md +7 -7
- package/cjs/components/Button/Button.d.ts +1 -1
- package/cjs/components/Button/Button.js +4 -3
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.d.ts +1 -0
- package/cjs/components/Button/Button.styles.js +38 -28
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/CurrencyInput/CurrencyInput.md +24 -24
- package/cjs/components/CurrencyLabel/CurrencyLabel.md +23 -23
- package/cjs/components/DateInput/DateInput.md +106 -106
- package/cjs/components/DatePicker/DatePicker.md +307 -307
- package/cjs/components/DropdownMenu/DropdownMenu.d.ts +2 -2
- package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/cjs/components/FxInput/FxInput.md +16 -16
- package/cjs/components/Gapped/Gapped.md +43 -43
- package/cjs/components/Group/Group.md +18 -18
- package/cjs/components/Hint/Hint.d.ts +2 -1
- package/cjs/components/Hint/Hint.js +0 -16
- package/cjs/components/Hint/Hint.js.map +1 -1
- package/cjs/components/Input/Input.md +13 -13
- package/cjs/components/Kebab/Kebab.d.ts +2 -2
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.d.ts +1 -1
- package/cjs/components/MenuItem/MenuItem.js +1 -4
- package/cjs/components/MenuItem/MenuItem.js.map +1 -1
- package/cjs/components/Paging/Paging.md +43 -43
- package/cjs/components/PasswordInput/PasswordInput.md +9 -9
- package/cjs/components/RadioGroup/RadioGroup.md +43 -43
- package/cjs/components/ScrollContainer/ScrollBar.js +4 -2
- package/cjs/components/ScrollContainer/ScrollBar.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js +2 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.styles.d.ts +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.styles.js +12 -8
- package/cjs/components/ScrollContainer/ScrollContainer.styles.js.map +1 -1
- package/cjs/components/Select/Select.js +2 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +1 -0
- package/cjs/components/SidePage/SidePage.js +14 -1
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/Spinner/Spinner.d.ts +8 -0
- package/cjs/components/Spinner/Spinner.js +21 -3
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Spinner/Spinner.md +1 -0
- package/cjs/components/Spinner/Spinner.styles.d.ts +2 -1
- package/cjs/components/Spinner/Spinner.styles.js +13 -10
- package/cjs/components/Spinner/Spinner.styles.js.map +1 -1
- package/cjs/components/Switcher/Switcher.styles.js +4 -2
- package/cjs/components/Switcher/Switcher.styles.js.map +1 -1
- package/cjs/components/Tabs/Tabs.md +36 -36
- package/cjs/components/Textarea/Textarea.md +25 -25
- package/cjs/components/Token/Token.md +112 -112
- package/cjs/components/TokenInput/TokenInput.md +79 -79
- package/cjs/components/Tooltip/Tooltip.d.ts +8 -21
- package/cjs/components/Tooltip/Tooltip.js +14 -27
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.d.ts +2 -2
- package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +2 -1
- package/cjs/index.js.map +1 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.js +10 -2
- package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.d.ts +3 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.js +9 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.js.map +1 -0
- package/cjs/internal/Menu/Menu.d.ts +2 -0
- package/cjs/internal/Menu/Menu.js +26 -2
- package/cjs/internal/Menu/Menu.js.map +1 -1
- package/cjs/internal/Menu/Menu.styles.d.ts +3 -0
- package/cjs/internal/Menu/Menu.styles.js +22 -3
- package/cjs/internal/Menu/Menu.styles.js.map +1 -1
- package/cjs/internal/Popup/Popup.d.ts +5 -4
- package/cjs/internal/Popup/Popup.js +13 -24
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/Popup/PopupHelper.d.ts +2 -2
- package/cjs/internal/Popup/PopupHelper.js.map +1 -1
- package/cjs/internal/Popup/types.d.ts +1 -0
- package/cjs/internal/Popup/types.js +1 -0
- package/cjs/internal/Popup/types.js.map +1 -0
- package/cjs/internal/PopupMenu/PopupMenu.d.ts +3 -3
- package/cjs/internal/PopupMenu/PopupMenu.js +17 -3
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/PopupMenu/validatePositions.d.ts +2 -2
- package/cjs/internal/PopupMenu/validatePositions.js +2 -4
- package/cjs/internal/PopupMenu/validatePositions.js.map +1 -1
- package/cjs/internal/ThemeShowcase/ThemeShowcase.md +13 -13
- package/cjs/internal/icons/SpinnerIcon.d.ts +4 -1
- package/cjs/internal/icons/SpinnerIcon.js +5 -2
- package/cjs/internal/icons/SpinnerIcon.js.map +1 -1
- package/cjs/lib/ModalStack.js +16 -17
- package/cjs/lib/ModalStack.js.map +1 -1
- package/cjs/lib/theming/AnimationKeyframes.js +1 -1
- package/cjs/lib/theming/AnimationKeyframes.js.map +1 -1
- package/cjs/lib/theming/useTheme.d.ts +1 -0
- package/cjs/lib/theming/useTheme.js +7 -0
- package/cjs/lib/theming/useTheme.js.map +1 -0
- package/cjs/lib/utils.d.ts +32 -0
- package/cjs/lib/utils.js +62 -2
- package/cjs/lib/utils.js.map +1 -1
- package/cjs/typings/html-props.d.ts +123 -0
- package/components/Autocomplete/Autocomplete.md +7 -7
- package/components/Button/Button/Button.js +3 -7
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +1 -1
- package/components/Button/Button.styles/Button.styles.js +31 -28
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Button/Button.styles.d.ts +1 -0
- package/components/CurrencyInput/CurrencyInput.md +24 -24
- package/components/CurrencyLabel/CurrencyLabel.md +23 -23
- package/components/DateInput/DateInput.md +106 -106
- package/components/DatePicker/DatePicker.md +307 -307
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu.d.ts +2 -2
- package/components/FxInput/FxInput.md +16 -16
- package/components/Gapped/Gapped.md +43 -43
- package/components/Group/Group.md +18 -18
- package/components/Hint/Hint/Hint.js.map +1 -1
- package/components/Hint/Hint.d.ts +2 -1
- package/components/Input/Input.md +13 -13
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/Kebab/Kebab.d.ts +2 -2
- package/components/MenuItem/MenuItem/MenuItem.js +2 -7
- package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +1 -1
- package/components/Paging/Paging.md +43 -43
- package/components/PasswordInput/PasswordInput.md +9 -9
- package/components/RadioGroup/RadioGroup.md +43 -43
- package/components/ScrollContainer/ScrollBar/ScrollBar.js +6 -2
- package/components/ScrollContainer/ScrollBar/ScrollBar.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +2 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js +11 -8
- package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.styles.d.ts +1 -0
- package/components/Select/Select/Select.js +2 -1
- package/components/Select/Select/Select.js.map +1 -1
- package/components/SidePage/SidePage/SidePage.js +19 -0
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +1 -0
- package/components/Spinner/Spinner/Spinner.js +6 -3
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +8 -0
- package/components/Spinner/Spinner.md +1 -0
- package/components/Spinner/Spinner.styles/Spinner.styles.js +12 -9
- package/components/Spinner/Spinner.styles/Spinner.styles.js.map +1 -1
- package/components/Spinner/Spinner.styles.d.ts +2 -1
- package/components/Switcher/Switcher.styles/Switcher.styles.js +3 -1
- package/components/Switcher/Switcher.styles/Switcher.styles.js.map +1 -1
- package/components/Tabs/Tabs.md +36 -36
- package/components/Textarea/Textarea.md +25 -25
- package/components/Token/Token.md +112 -112
- package/components/TokenInput/TokenInput.md +79 -79
- package/components/Tooltip/Tooltip/Tooltip.js +2 -2
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +8 -21
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +2 -2
- package/index.d.ts +1 -0
- package/index.js +2 -1
- package/index.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +6 -1
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer.styles/DropdownContainer.styles.js +10 -0
- package/internal/DropdownContainer/DropdownContainer.styles/DropdownContainer.styles.js.map +1 -0
- package/internal/DropdownContainer/DropdownContainer.styles/package.json +6 -0
- package/internal/DropdownContainer/DropdownContainer.styles.d.ts +3 -0
- package/internal/Menu/Menu/Menu.js +14 -5
- package/internal/Menu/Menu/Menu.js.map +1 -1
- package/internal/Menu/Menu.d.ts +2 -0
- package/internal/Menu/Menu.styles/Menu.styles.js +12 -3
- package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
- package/internal/Menu/Menu.styles.d.ts +3 -0
- package/internal/Popup/Popup/Popup.js +3 -2
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/Popup/Popup.d.ts +5 -4
- package/internal/Popup/PopupHelper/PopupHelper.js.map +1 -1
- package/internal/Popup/PopupHelper.d.ts +2 -2
- package/internal/Popup/types/package.json +6 -0
- package/internal/Popup/types/types.js +0 -0
- package/internal/Popup/types/types.js.map +1 -0
- package/internal/Popup/types.d.ts +1 -0
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +3 -3
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/PopupMenu/PopupMenu.d.ts +3 -3
- package/internal/PopupMenu/validatePositions/validatePositions.js +2 -2
- package/internal/PopupMenu/validatePositions/validatePositions.js.map +1 -1
- package/internal/PopupMenu/validatePositions.d.ts +2 -2
- package/internal/ThemeShowcase/ThemeShowcase.md +13 -13
- package/internal/icons/SpinnerIcon/SpinnerIcon.js +5 -2
- package/internal/icons/SpinnerIcon/SpinnerIcon.js.map +1 -1
- package/internal/icons/SpinnerIcon.d.ts +4 -1
- package/lib/ModalStack/ModalStack.js +9 -13
- package/lib/ModalStack/ModalStack.js.map +1 -1
- package/lib/theming/AnimationKeyframes/AnimationKeyframes.js +1 -1
- package/lib/theming/AnimationKeyframes/AnimationKeyframes.js.map +1 -1
- package/lib/theming/useTheme/package.json +6 -0
- package/lib/theming/useTheme/useTheme.js +5 -0
- package/lib/theming/useTheme/useTheme.js.map +1 -0
- package/lib/theming/useTheme.d.ts +1 -0
- package/lib/utils/utils.js +66 -0
- package/lib/utils/utils.js.map +1 -1
- package/lib/utils.d.ts +32 -0
- package/package.json +5 -5
- package/typings/html-props.d.ts +123 -0
- package/cjs/internal/PopupMenu/PopupMenuPositions.d.ts +0 -2
- package/cjs/internal/PopupMenu/PopupMenuPositions.js +0 -15
- package/cjs/internal/PopupMenu/PopupMenuPositions.js.map +0 -1
- package/internal/PopupMenu/PopupMenuPositions/PopupMenuPositions.js +0 -1
- package/internal/PopupMenu/PopupMenuPositions/PopupMenuPositions.js.map +0 -1
- package/internal/PopupMenu/PopupMenuPositions/package.json +0 -6
- package/internal/PopupMenu/PopupMenuPositions.d.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","rootNode","props","popupMenu","setRootNode","open","close","refPopupMenu","ref","handleChangeMenuState","menuVisible","onOpen","onClose","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupMargin","renderMain","menuMaxHeight","menuWidth","positions","disableAnimations","header","footer","width","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"0UAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,8C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;AACA;AACA,G;;AAEaA,Y,OADZC,kB;;;;;;;;;;;AAYC,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAH9BC,SAG8B,GAHG,IAGH,OAF9BC,WAE8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsD/BC,IAAAA,IAtD+B,GAsDxB,YAAY;AACxB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,IAAf;AACD;AACF,KA1DqC;;AA4D/BC,IAAAA,KA5D+B,GA4DvB,YAAY;AACzB,UAAI,MAAKH,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeG,KAAf;AACD;AACF,KAhEqC;;AAkE9BC,IAAAA,YAlE8B,GAkEf,UAACC,GAAD,UAA+B,MAAKL,SAAL,GAAiBK,GAAhD,EAlEe;;AAoE9BC,IAAAA,qBApE8B,GAoEN,UAACC,WAAD,EAA0B;AACxD,UAAIA,WAAW,IAAI,MAAKR,KAAL,CAAWS,MAA9B,EAAsC;AACpC,cAAKT,KAAL,CAAWS,MAAX;AACA;AACD;;AAED,UAAI,CAACD,WAAD,IAAgB,MAAKR,KAAL,CAAWU,OAA/B,EAAwC;AACtC,cAAKV,KAAL,CAAWU,OAAX;AACA;AACD;AACF,KA9EqC,CAGpC,IAAI,CAACV,KAAK,CAACW,OAAP,IAAkB,CAACC,mCAAvB,EAAwC,CACtC,MAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN,CACD,CALmC,aAMrC,C,2CAEMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,oBACE,6BAAC,0BAAD,CAAc,QAAd,IACE,KAAK,EAAEC,2BAAaC,MAAb,CACL,EACEC,WAAW,EAAE,KADf,EADK,EAILH,KAJK,CADT,IAQG,MAAI,CAACI,UAAL,EARH,CADF,CAYD,CAdH,CADF,CAkBD,C,QAEMA,U,GAAP,sBAAoB,CAClB,IAAI,CAAC,KAAKnB,KAAL,CAAWW,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKT,WAAjC,IAAkD,KAAKF,KAAvD,gBACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKK,YADZ,EAEE,OAAO,EAAE,KAAKL,KAAL,CAAWW,OAFtB,EAGE,aAAa,EAAE,KAAKX,KAAL,CAAWoB,aAH5B,EAIE,SAAS,EAAE,KAAKpB,KAAL,CAAWqB,SAJxB,EAKE,iBAAiB,EAAE,KAAKd,qBAL1B,EAME,WAAW,EAAE,KANf,EAOE,SAAS,EAAE,KAAKP,KAAL,CAAWsB,SAPxB,EAQE,iBAAiB,EAAE,KAAKtB,KAAL,CAAWuB,iBARhC,EASE,MAAM,EAAE,KAAKvB,KAAL,CAAWwB,MATrB,EAUE,MAAM,EAAE,KAAKxB,KAAL,CAAWyB,MAVrB,EAWE,KAAK,EAAE,KAAKzB,KAAL,CAAW0B,KAXpB,IAaG,KAAK1B,KAAL,CAAW2B,QAbd,CADF,CADF,CAmBD,C,uBA/D+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtBC,Y,GAAe,EAC3BR,iBAAiB,EAAES,6BADQ,EAE3BV,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAFgB,E","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport {
|
|
1
|
+
{"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","rootNode","props","popupMenu","setRootNode","open","close","refPopupMenu","ref","handleChangeMenuState","menuVisible","onOpen","onClose","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupMargin","renderMain","menuMaxHeight","menuWidth","positions","disableAnimations","header","footer","width","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"0UAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,8C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;AACA;AACA,G;;AAEaA,Y,OADZC,kB;;;;;;;;;;;AAYC,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAH9BC,SAG8B,GAHG,IAGH,OAF9BC,WAE8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsD/BC,IAAAA,IAtD+B,GAsDxB,YAAY;AACxB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,IAAf;AACD;AACF,KA1DqC;;AA4D/BC,IAAAA,KA5D+B,GA4DvB,YAAY;AACzB,UAAI,MAAKH,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeG,KAAf;AACD;AACF,KAhEqC;;AAkE9BC,IAAAA,YAlE8B,GAkEf,UAACC,GAAD,UAA+B,MAAKL,SAAL,GAAiBK,GAAhD,EAlEe;;AAoE9BC,IAAAA,qBApE8B,GAoEN,UAACC,WAAD,EAA0B;AACxD,UAAIA,WAAW,IAAI,MAAKR,KAAL,CAAWS,MAA9B,EAAsC;AACpC,cAAKT,KAAL,CAAWS,MAAX;AACA;AACD;;AAED,UAAI,CAACD,WAAD,IAAgB,MAAKR,KAAL,CAAWU,OAA/B,EAAwC;AACtC,cAAKV,KAAL,CAAWU,OAAX;AACA;AACD;AACF,KA9EqC,CAGpC,IAAI,CAACV,KAAK,CAACW,OAAP,IAAkB,CAACC,mCAAvB,EAAwC,CACtC,MAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN,CACD,CALmC,aAMrC,C,2CAEMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,oBACE,6BAAC,0BAAD,CAAc,QAAd,IACE,KAAK,EAAEC,2BAAaC,MAAb,CACL,EACEC,WAAW,EAAE,KADf,EADK,EAILH,KAJK,CADT,IAQG,MAAI,CAACI,UAAL,EARH,CADF,CAYD,CAdH,CADF,CAkBD,C,QAEMA,U,GAAP,sBAAoB,CAClB,IAAI,CAAC,KAAKnB,KAAL,CAAWW,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKT,WAAjC,IAAkD,KAAKF,KAAvD,gBACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKK,YADZ,EAEE,OAAO,EAAE,KAAKL,KAAL,CAAWW,OAFtB,EAGE,aAAa,EAAE,KAAKX,KAAL,CAAWoB,aAH5B,EAIE,SAAS,EAAE,KAAKpB,KAAL,CAAWqB,SAJxB,EAKE,iBAAiB,EAAE,KAAKd,qBAL1B,EAME,WAAW,EAAE,KANf,EAOE,SAAS,EAAE,KAAKP,KAAL,CAAWsB,SAPxB,EAQE,iBAAiB,EAAE,KAAKtB,KAAL,CAAWuB,iBARhC,EASE,MAAM,EAAE,KAAKvB,KAAL,CAAWwB,MATrB,EAUE,MAAM,EAAE,KAAKxB,KAAL,CAAWyB,MAVrB,EAWE,KAAK,EAAE,KAAKzB,KAAL,CAAW0B,KAXpB,IAaG,KAAK1B,KAAL,CAAW2B,QAbd,CADF,CADF,CAmBD,C,uBA/D+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtBC,Y,GAAe,EAC3BR,iBAAiB,EAAES,6BADQ,EAE3BV,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAFgB,E","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nexport interface DropdownMenuProps extends CommonProps {\n /** Максимальная высота меню */\n menuMaxHeight?: React.CSSProperties['maxWidth'];\n /** Ширина меню */\n menuWidth?: React.CSSProperties['width'];\n /** Ширина caption */\n width?: React.CSSProperties['width'];\n\n /**\n * Элемент или функция возвращающая элемент,\n * если передана, используется вместо `caption`,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n */\n caption: PopupMenuProps['caption'];\n\n /**\n * Произвольный элемент, который будет отрендерен в шапке меню.\n *\n * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n */\n header?: React.ReactNode;\n /**\n * Произвольный элемент, который будет отрендерен в подвале меню.\n *\n * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).\n */\n footer?: React.ReactNode;\n /**\n * Список позиций доступных для расположения выпадашки относительно `caption`.\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\n onOpen?: () => void;\n onClose?: () => void;\n\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент\n */\n@rootNode\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n };\n\n private popupMenu: Nullable<PopupMenu> = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: DropdownMenuProps) {\n super(props);\n\n if (!props.caption && !isProductionEnv) {\n throw new Error('Prop \"caption\" is required!!!');\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupMargin: '0px',\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain() {\n if (!this.props.caption) {\n return null;\n }\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n ref={this.refPopupMenu}\n caption={this.props.caption}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n onChangeMenuState={this.handleChangeMenuState}\n popupHasPin={false}\n positions={this.props.positions}\n disableAnimations={this.props.disableAnimations}\n header={this.props.header}\n footer={this.props.footer}\n width={this.props.width}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n public open = (): void => {\n if (this.popupMenu) {\n this.popupMenu.open();\n }\n };\n\n public close = (): void => {\n if (this.popupMenu) {\n this.popupMenu.close();\n }\n };\n\n private refPopupMenu = (ref: Nullable<PopupMenu>) => (this.popupMenu = ref);\n\n private handleChangeMenuState = (menuVisible: boolean) => {\n if (menuVisible && this.props.onOpen) {\n this.props.onOpen();\n return;\n }\n\n if (!menuVisible && this.props.onClose) {\n this.props.onClose();\n return;\n }\n };\n}\n"]}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
const [auto, setAuto] = React.useState(false);
|
|
3
|
-
const [value, setValue] = React.useState();
|
|
4
|
-
|
|
5
|
-
function handleValueChange(value) {
|
|
6
|
-
setAuto(false);
|
|
7
|
-
setValue(value);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function handleRestore() {
|
|
11
|
-
setAuto(true);
|
|
12
|
-
setValue('auto');
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
<FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
|
|
16
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
const [auto, setAuto] = React.useState(false);
|
|
3
|
+
const [value, setValue] = React.useState();
|
|
4
|
+
|
|
5
|
+
function handleValueChange(value) {
|
|
6
|
+
setAuto(false);
|
|
7
|
+
setValue(value);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function handleRestore() {
|
|
11
|
+
setAuto(true);
|
|
12
|
+
setValue('auto');
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
<FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
|
|
16
|
+
```
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
Вывод элементов с горизонтальным расположением
|
|
2
|
-
|
|
3
|
-
```jsx harmony
|
|
4
|
-
import { Button } from '@skbkontur/react-ui';
|
|
5
|
-
|
|
6
|
-
<Gapped gap={20}>
|
|
7
|
-
<Button use="primary">Сохранить</Button>
|
|
8
|
-
<Button>Отмена</Button>
|
|
9
|
-
</Gapped>;
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
Вертикальное расположение
|
|
13
|
-
|
|
14
|
-
```jsx harmony
|
|
15
|
-
import { Checkbox } from '@skbkontur/react-ui';
|
|
16
|
-
|
|
17
|
-
<Gapped vertical gap={20}>
|
|
18
|
-
<Checkbox checked>Write todos</Checkbox>
|
|
19
|
-
<Checkbox initialIndeterminate>Work in progress</Checkbox>
|
|
20
|
-
<Checkbox>Make things done</Checkbox>
|
|
21
|
-
</Gapped>;
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
По умолчанию `Gapped` выстраивает элементы в одну строчку, но с помощью свойства `wrap` можно включить перенос элементов на новую строку.
|
|
25
|
-
При этом между строчками будет отступ равный значению свойста `gap`
|
|
26
|
-
В таком случае из-за особенности верстки `Gapped` может перекрывать элементы расположенные сверху-слева.
|
|
27
|
-
|
|
28
|
-
```jsx harmony
|
|
29
|
-
import { Button, Checkbox, Toggle } from '@skbkontur/react-ui';
|
|
30
|
-
|
|
31
|
-
<>
|
|
32
|
-
{"U Can't Touch This! => "}
|
|
33
|
-
<Toggle />
|
|
34
|
-
|
|
35
|
-
<div style={{ paddingTop: '10px', position: 'relative', width: '250px' }}>
|
|
36
|
-
<Gapped wrap gap={50}>
|
|
37
|
-
<Button use="primary">Сохранить</Button>
|
|
38
|
-
<Button>Отмена</Button>
|
|
39
|
-
<Checkbox>Я не робот</Checkbox>
|
|
40
|
-
</Gapped>
|
|
41
|
-
</div>
|
|
42
|
-
</>;
|
|
43
|
-
```
|
|
1
|
+
Вывод элементов с горизонтальным расположением
|
|
2
|
+
|
|
3
|
+
```jsx harmony
|
|
4
|
+
import { Button } from '@skbkontur/react-ui';
|
|
5
|
+
|
|
6
|
+
<Gapped gap={20}>
|
|
7
|
+
<Button use="primary">Сохранить</Button>
|
|
8
|
+
<Button>Отмена</Button>
|
|
9
|
+
</Gapped>;
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Вертикальное расположение
|
|
13
|
+
|
|
14
|
+
```jsx harmony
|
|
15
|
+
import { Checkbox } from '@skbkontur/react-ui';
|
|
16
|
+
|
|
17
|
+
<Gapped vertical gap={20}>
|
|
18
|
+
<Checkbox checked>Write todos</Checkbox>
|
|
19
|
+
<Checkbox initialIndeterminate>Work in progress</Checkbox>
|
|
20
|
+
<Checkbox>Make things done</Checkbox>
|
|
21
|
+
</Gapped>;
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
По умолчанию `Gapped` выстраивает элементы в одну строчку, но с помощью свойства `wrap` можно включить перенос элементов на новую строку.
|
|
25
|
+
При этом между строчками будет отступ равный значению свойста `gap`
|
|
26
|
+
В таком случае из-за особенности верстки `Gapped` может перекрывать элементы расположенные сверху-слева.
|
|
27
|
+
|
|
28
|
+
```jsx harmony
|
|
29
|
+
import { Button, Checkbox, Toggle } from '@skbkontur/react-ui';
|
|
30
|
+
|
|
31
|
+
<>
|
|
32
|
+
{"U Can't Touch This! => "}
|
|
33
|
+
<Toggle />
|
|
34
|
+
|
|
35
|
+
<div style={{ paddingTop: '10px', position: 'relative', width: '250px' }}>
|
|
36
|
+
<Gapped wrap gap={50}>
|
|
37
|
+
<Button use="primary">Сохранить</Button>
|
|
38
|
+
<Button>Отмена</Button>
|
|
39
|
+
<Checkbox>Я не робот</Checkbox>
|
|
40
|
+
</Gapped>
|
|
41
|
+
</div>
|
|
42
|
+
</>;
|
|
43
|
+
```
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
import FunctionIcon from '@skbkontur/react-icons/Function';
|
|
3
|
-
import SearchIcon from '@skbkontur/react-icons/Search';
|
|
4
|
-
import { Button, Input } from '@skbkontur/react-ui';
|
|
5
|
-
|
|
6
|
-
const [value, setValue] = React.useState('Foo');
|
|
7
|
-
|
|
8
|
-
<Group width={300}>
|
|
9
|
-
<Button>
|
|
10
|
-
<FunctionIcon />
|
|
11
|
-
</Button>
|
|
12
|
-
<Input value={value} width="100%" onValueChange={setValue} />
|
|
13
|
-
<Button>
|
|
14
|
-
<SearchIcon />
|
|
15
|
-
</Button>
|
|
16
|
-
<Button>Bar</Button>
|
|
17
|
-
</Group>;
|
|
18
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
import FunctionIcon from '@skbkontur/react-icons/Function';
|
|
3
|
+
import SearchIcon from '@skbkontur/react-icons/Search';
|
|
4
|
+
import { Button, Input } from '@skbkontur/react-ui';
|
|
5
|
+
|
|
6
|
+
const [value, setValue] = React.useState('Foo');
|
|
7
|
+
|
|
8
|
+
<Group width={300}>
|
|
9
|
+
<Button>
|
|
10
|
+
<FunctionIcon />
|
|
11
|
+
</Button>
|
|
12
|
+
<Input value={value} width="100%" onValueChange={setValue} />
|
|
13
|
+
<Button>
|
|
14
|
+
<SearchIcon />
|
|
15
|
+
</Button>
|
|
16
|
+
<Button>Bar</Button>
|
|
17
|
+
</Group>;
|
|
18
|
+
```
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { PopupPositionsType } from '../../internal/Popup';
|
|
2
3
|
import { MouseEventType } from '../../typings/event-types';
|
|
3
4
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
4
5
|
export interface HintProps extends CommonProps {
|
|
@@ -32,7 +33,7 @@ export interface HintProps extends CommonProps {
|
|
|
32
33
|
*
|
|
33
34
|
* **Допустимые значения**: `"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"`.
|
|
34
35
|
*/
|
|
35
|
-
pos: 'top' | 'right' | 'bottom' | 'left' |
|
|
36
|
+
pos: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;
|
|
36
37
|
/**
|
|
37
38
|
* Текст подсказки.
|
|
38
39
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","rootNode","state","opened","props","manual","timer","theme","setRootNode","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","children","hintBgColor","disableAnimations","useWrapper","renderContent","text","maxWidth","className","styles","content","contentCenter","React","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, PopupPosition } 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 { rootNode, TSetRootNode } from '../../lib/rootNode';\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 * В _\"ручном режиме\"_ подcказку можно активировать только задав значение пропу `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:\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top left'\n | 'top center'\n | 'top right'\n | 'bottom left'\n | 'bottom center'\n | 'bottom right'\n | 'left top'\n | 'left middle'\n | 'left bottom'\n | 'right top'\n | 'right middle'\n | 'right bottom';\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: PopupPosition[] = [\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@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> {\n public static __KONTUR_REACT_UI__ = 'Hint';\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 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.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\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 >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\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 });\n return (\n <div className={className} style={{ maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPosition[] => {\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 open = () => {\n this.setState({ opened: true });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","rootNode","state","opened","props","manual","timer","theme","setRootNode","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","children","hintBgColor","disableAnimations","useWrapper","renderContent","text","maxWidth","className","styles","content","contentCenter","React","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 { rootNode, TSetRootNode } from '../../lib/rootNode';\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 * В _\"ручном режиме\"_ подcказку можно активировать только задав значение пропу `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@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> {\n public static __KONTUR_REACT_UI__ = 'Hint';\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 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.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\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 >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\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 });\n return (\n <div className={className} style={{ 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 open = () => {\n this.setState({ opened: true });\n };\n}\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
import SearchIcon from '@skbkontur/react-icons/Search';
|
|
3
|
-
|
|
4
|
-
<Input leftIcon={<SearchIcon />} />;
|
|
5
|
-
```
|
|
6
|
-
|
|
7
|
-
Пример с префиксом:
|
|
8
|
-
|
|
9
|
-
```jsx harmony
|
|
10
|
-
import SearchIcon from '@skbkontur/react-icons/Search';
|
|
11
|
-
|
|
12
|
-
<Input width={400} prefix="https://kontur.ru/search?query=" rightIcon={<SearchIcon />} />;
|
|
13
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
import SearchIcon from '@skbkontur/react-icons/Search';
|
|
3
|
+
|
|
4
|
+
<Input leftIcon={<SearchIcon />} />;
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
Пример с префиксом:
|
|
8
|
+
|
|
9
|
+
```jsx harmony
|
|
10
|
+
import SearchIcon from '@skbkontur/react-icons/Search';
|
|
11
|
+
|
|
12
|
+
<Input width={400} prefix="https://kontur.ru/search?query=" rightIcon={<SearchIcon />} />;
|
|
13
|
+
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Nullable } from '../../typings/utility-types';
|
|
3
|
-
import {
|
|
3
|
+
import { PopupPositionsType } from '../../internal/Popup';
|
|
4
4
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
5
5
|
export interface KebabProps extends CommonProps {
|
|
6
6
|
disabled?: boolean;
|
|
@@ -23,7 +23,7 @@ export interface KebabProps extends CommonProps {
|
|
|
23
23
|
* **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
|
|
24
24
|
* @default ['bottom left', 'bottom right', 'top left', 'top right']
|
|
25
25
|
*/
|
|
26
|
-
positions:
|
|
26
|
+
positions: PopupPositionsType[];
|
|
27
27
|
menuMaxHeight?: number | string;
|
|
28
28
|
/**
|
|
29
29
|
* Не показывать анимацию
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","rootNode","state","opened","focusedByTab","anchor","theme","setRootNode","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","menuMaxHeight","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 } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPosition } 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 {\n disabled?: boolean;\n /**\n * Функция вызываемая при закрытии выпадашки\n * @default () => undefined\n */\n onClose: () => void;\n /**\n * Функция вызываемая при открытии выпадашки\n * @default () => undefined\n */\n onOpen: () => void;\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: PopupPosition[];\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 opened: 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 opened: false,\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 >\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 {\n opened: isOpened,\n focusedByTab: !isOpened && restoreFocus,\n },\n () => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.state.opened) {\n this.props.onOpen();\n } else {\n this.props.onClose();\n }\n },\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","state","opened","focusedByTab","anchor","theme","setRootNode","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","menuMaxHeight","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 } 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 {\n disabled?: boolean;\n /**\n * Функция вызываемая при закрытии выпадашки\n * @default () => undefined\n */\n onClose: () => void;\n /**\n * Функция вызываемая при открытии выпадашки\n * @default () => undefined\n */\n onOpen: () => void;\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 opened: 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 opened: false,\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 >\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 {\n opened: isOpened,\n focusedByTab: !isOpened && restoreFocus,\n },\n () => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.state.opened) {\n this.props.onOpen();\n } else {\n this.props.onClose();\n }\n },\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"]}
|
|
@@ -91,4 +91,4 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
|
|
|
91
91
|
private handleMouseLeave;
|
|
92
92
|
private getComponent;
|
|
93
93
|
}
|
|
94
|
-
export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<
|
|
94
|
+
export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
@@ -213,7 +213,4 @@ MenuItem = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PUR
|
|
|
213
213
|
};return _this;}var _proto = MenuItem.prototype;_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(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});};return MenuItem;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = { comment: _propTypes.default.node, disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), loose: _propTypes.default.bool, state: _propTypes.default.string, target: _propTypes.default.string, onClick: _propTypes.default.func }, _temp)) || _class;exports.MenuItem = MenuItem;
|
|
214
214
|
|
|
215
215
|
|
|
216
|
-
var isMenuItem =
|
|
217
|
-
// @ts-ignore
|
|
218
|
-
return (child == null ? void 0 : (_child$type = child.type) == null ? void 0 : _child$type.__KONTUR_REACT_UI__) === 'MenuItem';
|
|
219
|
-
};exports.isMenuItem = isMenuItem;
|
|
216
|
+
var isMenuItem = (0, _utils.isReactUIComponent)('MenuItem');exports.isMenuItem = isMenuItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","rootNode","theme","mouseEntered","setRootNode","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","styles","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem","child","type"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends CommonProps {\n /**\n * @ignore\n */\n _enableIconPadding?: boolean;\n /**\n * Добавляет описание для элемента меню.\n */\n comment?: React.ReactNode;\n /**\n * Отключенное состояние.\n */\n disabled?: boolean;\n /**\n * Добавляет элементу меню иконку.\n */\n icon?: React.ReactElement<any>;\n /**\n * Меняет цвет текста на синий.\n */\n link?: boolean;\n /**\n * @ignore\n */\n loose?: boolean;\n /**\n * @ignore\n */\n state?: MenuItemState;\n /**\n * HTML-событие `onclick`.\n */\n onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n /**\n * HTML-событие `mouseenter`.\n */\n onMouseEnter?: React.MouseEventHandler;\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: React.MouseEventHandler;\n children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n /**\n * HTML-атрибут `target`.\n */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n /**\n * HTML-атрибут `title`.\n */\n title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n /**\n * HTML-атрибут `href`.\n */\n href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n /**\n * Заменяет корневой элемент, на компонент переданный в проп.\n *\n * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n */\n component?: React.ComponentType<any>;\n}\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\n@rootNode\nexport class MenuItem extends React.Component<MenuItemProps> {\n public static __KONTUR_REACT_UI__ = 'MenuItem';\n public static __MENU_ITEM__ = true;\n\n public static propTypes = {\n comment: PropTypes.node,\n\n disabled: PropTypes.bool,\n\n href: PropTypes.string,\n\n icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n loose: PropTypes.bool,\n\n state: PropTypes.string,\n\n target: PropTypes.string,\n\n onClick: PropTypes.func,\n };\n\n private theme!: Theme;\n private mouseEntered = false;\n private setRootNode!: TSetRootNode;\n\n public render() {\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 private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n const { link, comment, icon, loose, state, _enableIconPadding, component, onMouseEnter, onMouseLeave, ...rest } =\n props;\n\n const hover = state === 'hover' && !this.props.disabled;\n\n let iconElement = null;\n if (icon) {\n iconElement = <div className={styles.icon(this.theme)}>{icon}</div>;\n }\n\n const className = cx({\n [styles.root(this.theme)]: true,\n [styles.loose()]: !!loose,\n [styles.hover(this.theme)]: hover,\n [styles.selected(this.theme)]: state === 'selected',\n [styles.link(this.theme)]: !!link,\n [styles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\n [styles.disabled(this.theme)]: !!this.props.disabled,\n });\n\n const { children } = this.props;\n\n let content = children;\n if (isFunction(children)) {\n content = children(this.props.state);\n }\n\n const Component = this.getComponent();\n\n return (\n <Component\n {...rest}\n state={state}\n onMouseOver={this.handleMouseEnterFix}\n onMouseLeave={this.handleMouseLeave}\n className={className}\n tabIndex={-1}\n >\n {iconElement}\n {content}\n {this.props.comment && (\n <div\n data-tid=\"MenuItem__comment\"\n className={cx({\n [styles.comment(this.theme)]: true,\n [styles.commentHover(this.theme)]: hover,\n })}\n >\n {comment}\n </div>\n )}\n </Component>\n );\n };\n\n // https://github.com/facebook/react/issues/10109\n // Mouseenter event not triggered when cursor moves from disabled button\n private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n if (!this.mouseEntered && this.props.onMouseEnter) {\n this.mouseEntered = true;\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n this.mouseEntered = false;\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private getComponent = () => {\n const { disabled, component, href } = this.props;\n\n if (disabled) {\n return 'button';\n }\n\n if (component) {\n return component;\n }\n\n if (href) {\n return 'a';\n }\n\n return 'button';\n };\n}\n\nexport const isMenuItem = (child: React.ReactNode): child is React.ReactElement<MenuItemProps> => {\n // @ts-ignore\n return child?.type?.__KONTUR_REACT_UI__ === 'MenuItem';\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","rootNode","theme","mouseEntered","setRootNode","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","styles","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction, isReactUIComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends CommonProps {\n /**\n * @ignore\n */\n _enableIconPadding?: boolean;\n /**\n * Добавляет описание для элемента меню.\n */\n comment?: React.ReactNode;\n /**\n * Отключенное состояние.\n */\n disabled?: boolean;\n /**\n * Добавляет элементу меню иконку.\n */\n icon?: React.ReactElement<any>;\n /**\n * Меняет цвет текста на синий.\n */\n link?: boolean;\n /**\n * @ignore\n */\n loose?: boolean;\n /**\n * @ignore\n */\n state?: MenuItemState;\n /**\n * HTML-событие `onclick`.\n */\n onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n /**\n * HTML-событие `mouseenter`.\n */\n onMouseEnter?: React.MouseEventHandler;\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: React.MouseEventHandler;\n children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n /**\n * HTML-атрибут `target`.\n */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n /**\n * HTML-атрибут `title`.\n */\n title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n /**\n * HTML-атрибут `href`.\n */\n href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n /**\n * Заменяет корневой элемент, на компонент переданный в проп.\n *\n * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n */\n component?: React.ComponentType<any>;\n}\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\n@rootNode\nexport class MenuItem extends React.Component<MenuItemProps> {\n public static __KONTUR_REACT_UI__ = 'MenuItem';\n public static __MENU_ITEM__ = true;\n\n public static propTypes = {\n comment: PropTypes.node,\n\n disabled: PropTypes.bool,\n\n href: PropTypes.string,\n\n icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n loose: PropTypes.bool,\n\n state: PropTypes.string,\n\n target: PropTypes.string,\n\n onClick: PropTypes.func,\n };\n\n private theme!: Theme;\n private mouseEntered = false;\n private setRootNode!: TSetRootNode;\n\n public render() {\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 private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n const { link, comment, icon, loose, state, _enableIconPadding, component, onMouseEnter, onMouseLeave, ...rest } =\n props;\n\n const hover = state === 'hover' && !this.props.disabled;\n\n let iconElement = null;\n if (icon) {\n iconElement = <div className={styles.icon(this.theme)}>{icon}</div>;\n }\n\n const className = cx({\n [styles.root(this.theme)]: true,\n [styles.loose()]: !!loose,\n [styles.hover(this.theme)]: hover,\n [styles.selected(this.theme)]: state === 'selected',\n [styles.link(this.theme)]: !!link,\n [styles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\n [styles.disabled(this.theme)]: !!this.props.disabled,\n });\n\n const { children } = this.props;\n\n let content = children;\n if (isFunction(children)) {\n content = children(this.props.state);\n }\n\n const Component = this.getComponent();\n\n return (\n <Component\n {...rest}\n state={state}\n onMouseOver={this.handleMouseEnterFix}\n onMouseLeave={this.handleMouseLeave}\n className={className}\n tabIndex={-1}\n >\n {iconElement}\n {content}\n {this.props.comment && (\n <div\n data-tid=\"MenuItem__comment\"\n className={cx({\n [styles.comment(this.theme)]: true,\n [styles.commentHover(this.theme)]: hover,\n })}\n >\n {comment}\n </div>\n )}\n </Component>\n );\n };\n\n // https://github.com/facebook/react/issues/10109\n // Mouseenter event not triggered when cursor moves from disabled button\n private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n if (!this.mouseEntered && this.props.onMouseEnter) {\n this.mouseEntered = true;\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n this.mouseEntered = false;\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private getComponent = () => {\n const { disabled, component, href } = this.props;\n\n if (disabled) {\n return 'button';\n }\n\n if (component) {\n return component;\n }\n\n if (href) {\n return 'a';\n }\n\n return 'button';\n };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
Управление с клавиатуры работает в двух вариантах:
|
|
2
|
-
|
|
3
|
-
- **useGlobalListener === true** слушатель keydown событий на document, если на стринице несколько компонентов Paging,
|
|
4
|
-
обработчик будет срабатывать на каждом
|
|
5
|
-
- **useGlobalListener === false** обработка нажатия клавиш будет работать только когда компонент в фокусе.
|
|
6
|
-
|
|
7
|
-
Навигационные подсказки появляются когда доступно управление с клавиатуры и `withoutNavigationHint != true`
|
|
8
|
-
|
|
9
|
-
```jsx harmony
|
|
10
|
-
class Paginator3000 extends React.Component {
|
|
11
|
-
constructor() {
|
|
12
|
-
super();
|
|
13
|
-
this.state = { active: 1 };
|
|
14
|
-
this._handlePageChange = this._handlePageChange.bind(this);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
render() {
|
|
18
|
-
return <Paging activePage={this.state.active} onPageChange={this._handlePageChange} pagesCount={12} />;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
_handlePageChange(pageNumber) {
|
|
22
|
-
this.setState({ active: pageNumber });
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
<Paginator3000 />;
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
#### Локали по умолчанию
|
|
30
|
-
|
|
31
|
-
```typescript static
|
|
32
|
-
interface PagingLocale {
|
|
33
|
-
forward?: string;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
const ru_RU = {
|
|
37
|
-
forward: 'Дальше',
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
const en_GB = {
|
|
41
|
-
forward: 'Forward',
|
|
42
|
-
};
|
|
43
|
-
```
|
|
1
|
+
Управление с клавиатуры работает в двух вариантах:
|
|
2
|
+
|
|
3
|
+
- **useGlobalListener === true** слушатель keydown событий на document, если на стринице несколько компонентов Paging,
|
|
4
|
+
обработчик будет срабатывать на каждом
|
|
5
|
+
- **useGlobalListener === false** обработка нажатия клавиш будет работать только когда компонент в фокусе.
|
|
6
|
+
|
|
7
|
+
Навигационные подсказки появляются когда доступно управление с клавиатуры и `withoutNavigationHint != true`
|
|
8
|
+
|
|
9
|
+
```jsx harmony
|
|
10
|
+
class Paginator3000 extends React.Component {
|
|
11
|
+
constructor() {
|
|
12
|
+
super();
|
|
13
|
+
this.state = { active: 1 };
|
|
14
|
+
this._handlePageChange = this._handlePageChange.bind(this);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
render() {
|
|
18
|
+
return <Paging activePage={this.state.active} onPageChange={this._handlePageChange} pagesCount={12} />;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
_handlePageChange(pageNumber) {
|
|
22
|
+
this.setState({ active: pageNumber });
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
<Paginator3000 />;
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
#### Локали по умолчанию
|
|
30
|
+
|
|
31
|
+
```typescript static
|
|
32
|
+
interface PagingLocale {
|
|
33
|
+
forward?: string;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const ru_RU = {
|
|
37
|
+
forward: 'Дальше',
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const en_GB = {
|
|
41
|
+
forward: 'Forward',
|
|
42
|
+
};
|
|
43
|
+
```
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
<PasswordInput />
|
|
3
|
-
```
|
|
4
|
-
|
|
5
|
-
Пример с отслеживанием нажатия CapsLock:
|
|
6
|
-
|
|
7
|
-
```jsx harmony
|
|
8
|
-
<PasswordInput detectCapsLock />
|
|
9
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
<PasswordInput />
|
|
3
|
+
```
|
|
4
|
+
|
|
5
|
+
Пример с отслеживанием нажатия CapsLock:
|
|
6
|
+
|
|
7
|
+
```jsx harmony
|
|
8
|
+
<PasswordInput detectCapsLock />
|
|
9
|
+
```
|