@skbkontur/react-ui 4.13.4 → 4.14.0-next.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 +31 -0
- package/cjs/components/Button/Button.d.ts +2 -6
- package/cjs/components/Button/Button.js +14 -5
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +2 -1
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/cjs/components/DropdownMenu/DropdownMenu.js +2 -1
- package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/cjs/components/Input/Input.d.ts +8 -4
- package/cjs/components/Input/Input.js +32 -6
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Input/Input.md +49 -0
- package/cjs/components/Input/Input.styles.js +2 -1
- package/cjs/components/Input/Input.styles.js.map +1 -1
- package/cjs/components/Kebab/Kebab.d.ts +4 -1
- package/cjs/components/Kebab/Kebab.js +9 -3
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/Loader/Loader.js +1 -3
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/Modal/Modal.d.ts +3 -3
- package/cjs/components/Modal/Modal.js +19 -2
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/Modal.styles.d.ts +0 -2
- package/cjs/components/Modal/Modal.styles.js +22 -33
- package/cjs/components/Modal/Modal.styles.js.map +1 -1
- package/cjs/components/Modal/ModalBody.js +0 -2
- package/cjs/components/Modal/ModalBody.js.map +1 -1
- package/cjs/components/Modal/ModalFooter.js +2 -5
- package/cjs/components/Modal/ModalFooter.js.map +1 -1
- package/cjs/components/Modal/ModalHeader.js +1 -6
- package/cjs/components/Modal/ModalHeader.js.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.js +5 -5
- package/cjs/components/PasswordInput/PasswordInput.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.d.ts +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.js +9 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +3 -3
- package/cjs/components/SidePage/SidePage.js +8 -1
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/Spinner/Spinner.md +1 -1
- package/cjs/components/Switcher/Switcher.d.ts +4 -2
- package/cjs/components/Switcher/Switcher.js +13 -3
- package/cjs/components/Switcher/Switcher.js.map +1 -1
- package/cjs/components/Toast/Toast.md +2 -2
- package/cjs/components/TokenInput/TokenInput.d.ts +44 -1
- package/cjs/components/TokenInput/TokenInput.js +42 -0
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.md +100 -0
- package/cjs/internal/CustomComboBox/CustomComboBox.js +12 -9
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.js +4 -1
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.d.ts +8 -0
- package/cjs/internal/PopupMenu/PopupMenu.js +23 -3
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/ZIndex/ZIndexStorage.d.ts +0 -5
- package/cjs/internal/ZIndex/ZIndexStorage.js +1 -6
- package/cjs/internal/ZIndex/ZIndexStorage.js.map +1 -1
- package/cjs/internal/icons/SpinnerIcon.styles.js +2 -1
- package/cjs/internal/icons/SpinnerIcon.styles.js.map +1 -1
- package/cjs/internal/themes/DarkTheme.d.ts +1 -0
- package/cjs/internal/themes/DarkTheme.js +6 -5
- package/cjs/internal/themes/DarkTheme.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +1 -0
- package/cjs/internal/themes/DefaultTheme.js +4 -3
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/typings/html.d.ts +1 -0
- package/components/Button/Button/Button.js +13 -4
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +2 -6
- package/components/Button/Button.styles/Button.styles.js +1 -1
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +2 -1
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/components/Input/Input/Input.js +18 -5
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.d.ts +8 -4
- package/components/Input/Input.md +49 -0
- package/components/Input/Input.styles/Input.styles.js +1 -1
- package/components/Input/Input.styles/Input.styles.js.map +1 -1
- package/components/Kebab/Kebab/Kebab.js +6 -1
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/Kebab/Kebab.d.ts +4 -1
- package/components/Loader/Loader/Loader.js +0 -2
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Modal/Modal/Modal.js +28 -11
- package/components/Modal/Modal/Modal.js.map +1 -1
- package/components/Modal/Modal.d.ts +3 -3
- package/components/Modal/Modal.styles/Modal.styles.js +21 -27
- package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
- package/components/Modal/Modal.styles.d.ts +0 -2
- package/components/Modal/ModalBody/ModalBody.js +0 -2
- package/components/Modal/ModalBody/ModalBody.js.map +1 -1
- package/components/Modal/ModalFooter/ModalFooter.js +2 -6
- package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
- package/components/Modal/ModalHeader/ModalHeader.js +2 -6
- package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/components/PasswordInput/PasswordInput/PasswordInput.js +6 -5
- package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +12 -4
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.d.ts +1 -0
- package/components/SidePage/SidePage/SidePage.js +9 -3
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +3 -3
- package/components/Spinner/Spinner.md +1 -1
- package/components/Switcher/Switcher/Switcher.js +8 -2
- package/components/Switcher/Switcher/Switcher.js.map +1 -1
- package/components/Switcher/Switcher.d.ts +4 -2
- package/components/Toast/Toast.md +2 -2
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +44 -1
- package/components/TokenInput/TokenInput.md +100 -0
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +11 -9
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +5 -2
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +13 -2
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/PopupMenu/PopupMenu.d.ts +8 -0
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/ZIndex/ZIndexStorage/ZIndexStorage.js +1 -6
- package/internal/ZIndex/ZIndexStorage/ZIndexStorage.js.map +1 -1
- package/internal/ZIndex/ZIndexStorage.d.ts +0 -5
- package/internal/icons/SpinnerIcon.styles/SpinnerIcon.styles.js +1 -1
- package/internal/icons/SpinnerIcon.styles/SpinnerIcon.styles.js.map +1 -1
- package/internal/themes/DarkTheme/DarkTheme.js +2 -3
- package/internal/themes/DarkTheme/DarkTheme.js.map +1 -1
- package/internal/themes/DarkTheme.d.ts +1 -0
- package/internal/themes/DefaultTheme/DefaultTheme.js +5 -4
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +1 -0
- package/package.json +2 -5
- package/typings/html.d.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","bg","t","modalBackBg","modalBackOpacity","container","window","modalBg","modalBorderRadius","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer"],"mappings":"4QAAA;;AAEA,iD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;;;AAOD,GATgC;;AAWjCC,EAAAA,EAXiC,cAW9BC,CAX8B,EAWpB;AACX,eAAOF,YAAP;;;;;;AAMgBE,IAAAA,CAAC,CAACC,WANlB;AAOaD,IAAAA,CAAC,CAACE,gBAPf;;AASD,GArBgC;;AAuBjCC,EAAAA,SAvBiC,uBAuBrB;AACV,eAAOL,YAAP;;;;;;;;;;;;;;;AAeD,GAvCgC;;AAyCjCM,EAAAA,MAzCiC,kBAyC1BJ,CAzC0B,EAyChB;AACf,eAAOF,YAAP;;;;;AAKgBE,IAAAA,CAAC,CAACK,OALlB;AAMmBL,IAAAA,CAAC,CAACM,iBANrB;;AAQD,GAlDgC;;AAoDjCC,EAAAA,YApDiC,0BAoDlB;AACb,eAAOT,YAAP;;;;;AAKD,GA1DgC;;AA4DjCU,EAAAA,eA5DiC,6BA4Df;AAChB,eAAOV,YAAP;;;;;;;;;AASD,GAtEgC;;AAwEjCW,EAAAA,qBAxEiC,mCAwET;AACtB,eAAOX,YAAP;;;;;AAKD,GA9EgC;;AAgFjCY,EAAAA,QAhFiC,sBAgFtB;AACT,eAAOZ,YAAP;;;AAGD,GApFgC;;AAsFjCa,EAAAA,KAtFiC,iBAsF3BX,CAtF2B,EAsFjB;AACd,QAAMY,OAAO,GAAGC,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAxB;AACA,eAAOhB,YAAP;AACI,8BADJ;;;AAIWc,IAAAA,OAJX;AAKSA,IAAAA,OALT;;;;AASWZ,IAAAA,CAAC,CAACe,qBATb;;;AAYaf,IAAAA,CAAC,CAACgB,yBAZf;AAaahB,IAAAA,CAAC,CAACgB,yBAbf;;;AAgBahB,IAAAA,CAAC,CAACiB,0BAhBf;;;;AAoBajB,IAAAA,CAAC,CAACkB,kBApBf;AAqBclB,IAAAA,CAAC,CAACkB,kBArBhB;;;;AAyBD,GAjHgC;;AAmHjCC,EAAAA,WAnHiC,uBAmHrBnB,CAnHqB,EAmHX;AACpB,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACoB,kCADb;AAESP,IAAAA,QAAQ,CAACb,CAAC,CAACqB,gCAAH,CAAR,GAA+CR,QAAQ,CAACb,CAAC,CAACsB,wBAAH,CAFhE;AAGatB,IAAAA,CAAC,CAACuB,+BAHf;AAIavB,IAAAA,CAAC,CAACuB,+BAJf;;;AAOavB,IAAAA,CAAC,CAACwB,wBAPf;AAQcxB,IAAAA,CAAC,CAACwB,wBARhB;;;AAWD,GA/HgC;;AAiIjCC,EAAAA,wBAjIiC,sCAiIN;AACzB,eAAO3B,YAAP;;;AAGD,GArIgC;;AAuIjC4B,EAAAA,YAvIiC,wBAuIpB1B,CAvIoB,EAuIV;AACrB,QAAMY,OAAO,GAAGC,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAxB;AACA,QAAMa,aAAa,GAAGd,QAAQ,CAACb,CAAC,CAAC4B,6BAAH,CAA9B;AACA,QAAMC,SAAS,GAAGhB,QAAQ,CAACb,CAAC,CAAC8B,0BAAH,CAA1B;AACA,QAAMC,WAAW,GAAGlB,QAAQ,CAACb,CAAC,CAACgC,2BAAH,CAA5B;AACA,QAAMC,UAAU,GAAGpB,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAR,GAAiC,IAAIN,OAArC,GAA+CmB,WAAlE;AACA,QAAMG,UAAU,GAAGrB,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAR,GAAiCN,OAAjC,GAA2Ce,aAA3C,GAA2DE,SAA9E;AACA,eAAO/B,YAAP;;;AAGWmC,IAAAA,UAAU,GAAGJ,SAHxB;AAIYK,IAAAA,UAJZ;;AAMD,GApJgC;;AAsJjCC,EAAAA,kBAtJiC,8BAsJdnC,CAtJc,EAsJJ;AAC3B,QAAMoC,IAAI,GAAGvB,QAAQ,CAACb,CAAC,CAACwB,wBAAH,CAAR,GAAuCX,QAAQ,CAACb,CAAC,CAACuB,+BAAH,CAAR,GAA8C,CAAlG;;AAEA,eAAOzB,YAAP;;AAEWE,IAAAA,CAAC,CAACoB,kCAFb;AAGSpB,IAAAA,CAAC,CAACqB,gCAHX;;;;;;AASWe,IAAAA,IATX;AAUYA,IAAAA,IAVZ;AAWoDpC,IAAAA,CAAC,CAACqC,SAXtD;AAYmBD,IAAAA,IAZnB;;AAcD,GAvKgC;;AAyKjCE,EAAAA,QAzKiC,oBAyKxBtC,CAzKwB,EAyKd;AACjB,eAAOF,YAAP;;;AAGWE,IAAAA,CAAC,CAACuC,6BAHb;;AAKD,GA/KgC;;AAiLjCC,EAAAA,KAjLiC,iBAiL3BxC,CAjL2B,EAiLjB;AACd,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACiB,0BADb;AAEuBjB,IAAAA,CAAC,CAACyC,gBAFzB;;AAID,GAtLgC;;AAwLjCC,EAAAA,aAxLiC,2BAwLjB;AACd,eAAO5C,YAAP;;;AAGD,GA5LgC;;AA8LjC6C,EAAAA,MA9LiC,kBA8L1B3C,CA9L0B,EA8LhB;AACf,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAAC4C,mBADjB;AAEiB5C,IAAAA,CAAC,CAAC6C,qBAFnB;AAGa7C,IAAAA,CAAC,CAAC8C,qBAHf,EAGwC9C,CAAC,CAAC+C,iBAH1C,EAG+D/C,CAAC,CAACgD,wBAHjE,EAG6FhD,CAAC,CAACiD,gBAH/F;;;AAMWjD,IAAAA,CAAC,CAACkD,oBANb;;AAQD,GAvMgC;;AAyMjCC,EAAAA,YAzMiC,wBAyMpBnD,CAzMoB,EAyMV;AACrB,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAACoD,yBADjB;AAEiBpD,IAAAA,CAAC,CAACqD,2BAFnB;AAGarD,IAAAA,CAAC,CAACsB,wBAHf;;AAKD,GA/MgC;;AAiNjCgC,EAAAA,IAjNiC,gBAiN5BtD,CAjN4B,EAiNlB;AACb,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAAC+C,iBADjB,EACsC/C,CAAC,CAACuD,sBADxC,EACkEvD,CAAC,CAACiD,gBADpE;AAEWjD,IAAAA,CAAC,CAACwD,kBAFb;;AAID,GAtNgC;;AAwNjCC,EAAAA,UAxNiC,sBAwNtBzD,CAxNsB,EAwNZ;AACnB,eAAOF,YAAP;AACaE,IAAAA,CAAC,CAAC0D,sBADf;;;;;AAMe1D,IAAAA,CAAC,CAAC2D,uBANjB;;AAQD,GAjOgC;;AAmOjCC,EAAAA,eAnOiC,2BAmOjB5D,CAnOiB,EAmOP;AACxB,QAAM6D,YAAY;AAChB,QAAIhD,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAZ,GAA0CD,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAlD,GAA2EL,QAAQ,CAACb,CAAC,CAAC8D,mBAAH,CADrF;;AAGA,eAAOhE,YAAP;AACmB+D,IAAAA,YADnB;;AAGD,GA1OgC;;AA4OjCE,EAAAA,qBA5OiC,iCA4OX/D,CA5OW,EA4OD;AAC9B,eAAOF,YAAP;AACmB,QAAIe,QAAQ,CAACb,CAAC,CAACoB,kCAAH,CAAZ,GAAqDP,QAAQ,CAACb,CAAC,CAACwB,wBAAH,CADhF;;AAGD,GAhPgC;;AAkPjCwC,EAAAA,MAlPiC,kBAkP1BhE,CAlP0B,EAkPhB;AACf,eAAOF,YAAP;AACaE,IAAAA,CAAC,CAACiE,qBADf,EACwCjE,CAAC,CAAC+C,iBAD1C,EAC+D/C,CAAC,CAACkE,wBADjE,EAC6FlE,CAAC,CAACiD,gBAD/F;AAEWjD,IAAAA,CAAC,CAACmE,oBAFb;AAGuBnE,IAAAA,CAAC,CAACM,iBAHzB,EAG8CN,CAAC,CAACM,iBAHhD;;AAKD,GAxPgC;;AA0PjC8D,EAAAA,YA1PiC,wBA0PpBpE,CA1PoB,EA0PV;AACrB,eAAOF,YAAP;AACaE,IAAAA,CAAC,CAACqE,wBADf;;AAGD,GA9PgC;;AAgQjCC,EAAAA,aAhQiC,2BAgQjB;AACd,eAAOxE,YAAP;;;AAGD,GApQgC;;AAsQjCyE,EAAAA,KAtQiC,iBAsQ3BvE,CAtQ2B,EAsQjB;AACd,eAAOF,YAAP;AACiBE,IAAAA,CAAC,CAACwE,0BADnB;AAEoBxE,IAAAA,CAAC,CAACyE,6BAFtB;AAGgBzE,IAAAA,CAAC,CAAC0E,aAHlB;;AAKD,GA5QgC;;AA8QjCC,EAAAA,WA9QiC,uBA8QrB3E,CA9QqB,EA8QX;AACpB,eAAOF,YAAP;;AAEoBE,IAAAA,CAAC,CAAC4E,6BAFtB;AAGgB5E,IAAAA,CAAC,CAAC6E,kBAHlB;AAImB7E,IAAAA,CAAC,CAAC8E,sBAJrB;;;;;;;;;;AAckB9E,IAAAA,CAAC,CAAC+E,sBAdpB;;;AAiBD,GAhSgC;;AAkSjCC,EAAAA,iBAlSiC,6BAkSfhF,CAlSe,EAkSL;AAC1B,eAAOF,YAAP;AACoBE,IAAAA,CAAC,CAACsB,wBADtB;;AAGD,GAtSgC;;AAwSjC2D,EAAAA,WAxSiC,uBAwSrBjF,CAxSqB,EAwSX;AACpB,eAAOF,YAAP;;;AAGgBE,IAAAA,CAAC,CAAC6E,kBAHlB;AAIgB7E,IAAAA,CAAC,CAACkF,sBAJlB;;;;;;;;;;AAckBlF,IAAAA,CAAC,CAACmF,sBAdpB;;;AAiBD,GA1TgC;;AA4TjCC,EAAAA,UA5TiC,sBA4TtBpF,CA5TsB,EA4TZ;AACnB,eAAOF,YAAP;;AAEkBE,IAAAA,CAAC,CAACqF,qBAFpB;;;AAKD,GAlUgC;;AAoUjCC,EAAAA,gBApUiC,8BAoUd;AACjB,eAAOxF,YAAP;;;AAGD,GAxUgC;;AA0UjCyF,EAAAA,iBA1UiC,6BA0UfvF,CA1Ue,EA0UL;AAC1B,eAAOF,YAAP;AACiBE,IAAAA,CAAC,CAACwF,eADnB;;AAGD,GA9UgC;;AAgVjCC,EAAAA,uBAhViC,qCAgVP;AACxB,eAAO3F,YAAP;;;AAGD,GApVgC;;AAsVjC4F,EAAAA,kBAtViC,gCAsVZ;AACnB,eAAO5F,YAAP;;;AAGD,GA1VgC;;AA4VjC6F,EAAAA,sBA5ViC,kCA4VV3F,CA5VU,EA4VA;AAC/B,eAAOF,YAAP;AACoBE,IAAAA,CAAC,CAAC4F,kBADtB;;AAGD,GAhWgC;;AAkWjCC,EAAAA,4BAlWiC,wCAkWJ7F,CAlWI,EAkWM;AACrC,eAAOF,YAAP;AACoBE,IAAAA,CAAC,CAAC0D,sBADtB;;AAGD,GAtWgC;;AAwWjCoC,EAAAA,mBAxWiC,iCAwWX;AACpB,eAAOhG,YAAP;;;;;;AAMD,GA/WgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n `;\n },\n\n bg(t: Theme) {\n return css`\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n background: ${t.modalBackBg};\n opacity: ${t.modalBackOpacity};\n `;\n },\n\n container() {\n return css`\n position: relative;\n white-space: nowrap;\n text-align: center;\n height: 100%;\n overflow-y: auto;\n outline: none;\n\n &::before {\n content: '';\n display: inline-block;\n vertical-align: middle;\n height: 80%; /* to vertical align modal 40%/60% of screen height */\n }\n `;\n },\n\n window(t: Theme) {\n return css`\n position: relative;\n white-space: normal;\n margin: auto;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n background: ${t.modalBg};\n border-radius: ${t.modalBorderRadius};\n `;\n },\n\n mobileWindow() {\n return css`\n width: 100%;\n height: 100%;\n overflow: auto;\n `;\n },\n\n centerContainer() {\n return css`\n position: relative;\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n box-sizing: border-box;\n z-index: 10;\n margin: 40px 20px;\n `;\n },\n\n mobileCenterContainer() {\n return css`\n margin: 0;\n width: 100%;\n height: 100%;\n `;\n },\n\n alignTop() {\n return css`\n vertical-align: top;\n `;\n },\n\n close(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n return css`\n ${resetButton()};\n position: absolute;\n display: flex;\n right: ${padding}px;\n top: ${padding}px;\n background: none;\n background: transparent;\n cursor: pointer;\n color: ${t.modalCloseButtonColor};\n text-align: center;\n vertical-align: middle;\n padding: ${t.modalCloseButtonClickArea};\n margin: -${t.modalCloseButtonClickArea};\n\n &:hover {\n color: ${t.modalCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.modalCloseIconSize};\n height: ${t.modalCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n mobileClose(t: Theme) {\n return css`\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\n padding: ${t.mobileModalCloseButtonClickArea};\n margin: -${t.mobileModalCloseButtonClickArea};\n\n & > svg {\n width: ${t.mobileModalCloseIconSize};\n height: ${t.mobileModalCloseIconSize};\n }\n `;\n },\n\n mobileCloseWithoutHeader() {\n return css`\n position: static;\n `;\n },\n\n closeWrapper(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n return css`\n position: relative;\n float: right;\n width: ${blockSizeX + legacyGap}px;\n height: ${blockSizeY}px;\n `;\n },\n\n mobileCloseWrapper(t: Theme) {\n const size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;\n\n return css`\n position: absolute;\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${t.mobileModalCloseButtonTopPadding};\n padding: 0px;\n margin: 0px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${size}px;\n height: ${size}px;\n background: radial-gradient(50% 50% at 50% 50%, ${t.bgDefault} 60%, rgba(255, 255, 255, 0) 100%);\n border-radius: ${size}px;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n pointer-events: none;\n cursor: default;\n color: ${t.modalCloseButtonDisabledColor};\n `;\n },\n\n focus(t: Theme) {\n return css`\n color: ${t.modalCloseButtonHoverColor};\n outline: 2px solid ${t.borderColorFocus};\n `;\n },\n\n headerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.modalHeaderFontSize};\n line-height: ${t.modalHeaderLineHeight};\n padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n overflow-wrap: break-word;\n word-wrap: break-word;\n color: ${t.modalHeaderTextColor};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n font-size: ${t.mobileModalHeaderFontSize};\n line-height: ${t.mobileModalHeaderLineHeight};\n padding: ${t.mobileModalHeaderPadding};\n `;\n },\n\n body(t: Theme) {\n return css`\n padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody(t: Theme) {\n return css`\n padding: ${t.mobileModalBodyPadding};\n padding-top: 0px;\n display: flex;\n flex-flow: column;\n flex: 1;\n font-size: ${t.mobileModalBodyFontSize};\n `;\n },\n\n headerWithClose(t: Theme) {\n const rightPadding =\n 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n return css`\n padding-right: ${rightPadding}px;\n `;\n },\n\n mobileHeaderWithClose(t: Theme) {\n return css`\n padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n `;\n },\n\n footer(t: Theme) {\n return css`\n padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalFooterTextColor};\n border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n `;\n },\n\n mobileFooter(t: Theme) {\n return css`\n padding: ${t.mobileModalFooterPadding};\n `;\n },\n\n footerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n panel(t: Theme) {\n return css`\n padding-top: ${t.modalFooterPanelPaddingTop};\n padding-bottom: ${t.modalFooterPanelPaddingBottom};\n background: ${t.modalFooterBg};\n `;\n },\n\n fixedHeader(t: Theme) {\n return css`\n margin-bottom: 10px;\n padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n background: ${t.modalFixedHeaderBg};\n border-bottom: ${t.modalFixedHeaderBorder};\n\n &:after {\n bottom: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedHeaderShadow};\n }\n `;\n },\n\n mobileFixedHeader(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalHeaderPadding};\n `;\n },\n\n fixedFooter(t: Theme) {\n return css`\n padding-top: 20px;\n margin-top: 10px;\n background: ${t.modalFixedHeaderBg};\n border-top: ${t.modalFixedFooterBorder};\n\n &:before {\n top: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedFooterShadow};\n }\n `;\n },\n\n fixedPanel(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.modalFixedPanelShadow};\n }\n `;\n },\n\n headerAddPadding() {\n return css`\n padding-bottom: 22px;\n `;\n },\n\n bodyWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.modalPaddingTop};\n `;\n },\n\n mobileBodyWithoutHeader() {\n return css`\n padding-top: 0px;\n `;\n },\n\n bodyWithoutPadding() {\n return css`\n padding: 0;\n `;\n },\n\n bodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.modalPaddingBottom};\n `;\n },\n\n mobileBodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalBodyPadding};\n `;\n },\n\n columnFlexContainer() {\n return css`\n height: 100%;\n display: flex;\n flex-flow: column;\n overflow-y: auto;\n `;\n },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","bg","t","modalBackBg","modalBackOpacity","container","window","modalBg","modalBorderRadius","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer"],"mappings":"4QAAA;;AAEA,iD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;;;AAOD,GATgC;;AAWjCC,EAAAA,EAXiC,cAW9BC,CAX8B,EAWpB;AACX,eAAOF,YAAP;;;;;;AAMgBE,IAAAA,CAAC,CAACC,WANlB;AAOaD,IAAAA,CAAC,CAACE,gBAPf;;AASD,GArBgC;;AAuBjCC,EAAAA,SAvBiC,uBAuBrB;AACV,eAAOL,YAAP;;;;;;;;;;;;;;;AAeD,GAvCgC;;AAyCjCM,EAAAA,MAzCiC,kBAyC1BJ,CAzC0B,EAyChB;AACf,eAAOF,YAAP;;;;;AAKgBE,IAAAA,CAAC,CAACK,OALlB;AAMmBL,IAAAA,CAAC,CAACM,iBANrB;;AAQD,GAlDgC;;AAoDjCC,EAAAA,YApDiC,0BAoDlB;AACb,eAAOT,YAAP;;;;;AAKD,GA1DgC;;AA4DjCU,EAAAA,eA5DiC,6BA4Df;AAChB,eAAOV,YAAP;;;;;;;;;AASD,GAtEgC;;AAwEjCW,EAAAA,qBAxEiC,mCAwET;AACtB,eAAOX,YAAP;;;;;AAKD,GA9EgC;;AAgFjCY,EAAAA,QAhFiC,sBAgFtB;AACT,eAAOZ,YAAP;;;AAGD,GApFgC;;AAsFjCa,EAAAA,KAtFiC,iBAsF3BX,CAtF2B,EAsFjB;AACd,QAAMY,OAAO,GAAGC,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAxB;AACA,eAAOhB,YAAP;AACI,8BADJ;;;AAIWc,IAAAA,OAJX;AAKSA,IAAAA,OALT;;;;AASWZ,IAAAA,CAAC,CAACe,qBATb;;;AAYaf,IAAAA,CAAC,CAACgB,yBAZf;AAaahB,IAAAA,CAAC,CAACgB,yBAbf;;;AAgBahB,IAAAA,CAAC,CAACiB,0BAhBf;;;;AAoBajB,IAAAA,CAAC,CAACkB,kBApBf;AAqBclB,IAAAA,CAAC,CAACkB,kBArBhB;;;;AAyBD,GAjHgC;;AAmHjCC,EAAAA,WAnHiC,uBAmHrBnB,CAnHqB,EAmHX;AACpB,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACoB,kCADb;AAESP,IAAAA,QAAQ,CAACb,CAAC,CAACqB,gCAAH,CAAR,GAA+CR,QAAQ,CAACb,CAAC,CAACsB,wBAAH,CAFhE;AAGatB,IAAAA,CAAC,CAACuB,+BAHf;AAIavB,IAAAA,CAAC,CAACuB,+BAJf;;;AAOavB,IAAAA,CAAC,CAACwB,wBAPf;AAQcxB,IAAAA,CAAC,CAACwB,wBARhB;;;AAWD,GA/HgC;;AAiIjCC,EAAAA,wBAjIiC,sCAiIN;AACzB,eAAO3B,YAAP;;;AAGD,GArIgC;;AAuIjC4B,EAAAA,YAvIiC,wBAuIpB1B,CAvIoB,EAuIV;AACrB,QAAMY,OAAO,GAAGC,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAxB;AACA,QAAMa,aAAa,GAAGd,QAAQ,CAACb,CAAC,CAAC4B,6BAAH,CAA9B;AACA,QAAMC,SAAS,GAAGhB,QAAQ,CAACb,CAAC,CAAC8B,0BAAH,CAA1B;AACA,QAAMC,WAAW,GAAGlB,QAAQ,CAACb,CAAC,CAACgC,2BAAH,CAA5B;AACA,QAAMC,UAAU,GAAGpB,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAR,GAAiC,IAAIN,OAArC,GAA+CmB,WAAlE;AACA,QAAMG,UAAU,GAAGrB,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAR,GAAiCN,OAAjC,GAA2Ce,aAA3C,GAA2DE,SAA9E;AACA,eAAO/B,YAAP;;;AAGWmC,IAAAA,UAAU,GAAGJ,SAHxB;AAIYK,IAAAA,UAJZ;;AAMD,GApJgC;;AAsJjCC,EAAAA,kBAtJiC,8BAsJdnC,CAtJc,EAsJJ;AAC3B,QAAMoC,IAAI,GAAGvB,QAAQ,CAACb,CAAC,CAACwB,wBAAH,CAAR,GAAuCX,QAAQ,CAACb,CAAC,CAACuB,+BAAH,CAAR,GAA8C,CAAlG;;AAEA,eAAOzB,YAAP;;AAEWE,IAAAA,CAAC,CAACoB,kCAFb;AAGSpB,IAAAA,CAAC,CAACqB,gCAHX;;;;;;AASWe,IAAAA,IATX;AAUYA,IAAAA,IAVZ;AAWoDpC,IAAAA,CAAC,CAACqC,SAXtD;AAYmBD,IAAAA,IAZnB;;AAcD,GAvKgC;;AAyKjCE,EAAAA,QAzKiC,oBAyKxBtC,CAzKwB,EAyKd;AACjB,eAAOF,YAAP;;;AAGWE,IAAAA,CAAC,CAACuC,6BAHb;;AAKD,GA/KgC;;AAiLjCC,EAAAA,KAjLiC,iBAiL3BxC,CAjL2B,EAiLjB;AACd,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACiB,0BADb;AAEuBjB,IAAAA,CAAC,CAACyC,gBAFzB;;AAID,GAtLgC;;AAwLjCC,EAAAA,MAxLiC,kBAwL1B1C,CAxL0B,EAwLhB;AACf,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAAC2C,mBADjB;AAEiB3C,IAAAA,CAAC,CAAC4C,qBAFnB;AAGa5C,IAAAA,CAAC,CAAC6C,qBAHf,EAGwC7C,CAAC,CAAC8C,iBAH1C,EAG+D9C,CAAC,CAAC+C,wBAHjE,EAG6F/C,CAAC,CAACgD,gBAH/F;;;AAMWhD,IAAAA,CAAC,CAACiD,oBANb;;AAQD,GAjMgC;;AAmMjCC,EAAAA,YAnMiC,wBAmMpBlD,CAnMoB,EAmMV;AACrB,eAAOF,YAAP;;AAEeE,IAAAA,CAAC,CAACmD,yBAFjB;AAGiBnD,IAAAA,CAAC,CAACoD,2BAHnB;AAIapD,IAAAA,CAAC,CAACsB,wBAJf;;AAMD,GA1MgC;;AA4MjC+B,EAAAA,IA5MiC,gBA4M5BrD,CA5M4B,EA4MlB;AACb,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAAC8C,iBADjB,EACsC9C,CAAC,CAACsD,sBADxC,EACkEtD,CAAC,CAACgD,gBADpE;AAEWhD,IAAAA,CAAC,CAACuD,kBAFb;;AAID,GAjNgC;;AAmNjCC,EAAAA,UAnNiC,sBAmNtBxD,CAnNsB,EAmNZ;AACnB,eAAOF,YAAP;AACaE,IAAAA,CAAC,CAACyD,sBADf;;;;;AAMezD,IAAAA,CAAC,CAAC0D,uBANjB;;AAQD,GA5NgC;;AA8NjCC,EAAAA,eA9NiC,2BA8NjB3D,CA9NiB,EA8NP;AACxB,QAAM4D,YAAY;AAChB,QAAI/C,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAZ,GAA0CD,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAlD,GAA2EL,QAAQ,CAACb,CAAC,CAAC6D,mBAAH,CADrF;;AAGA,eAAO/D,YAAP;AACmB8D,IAAAA,YADnB;;AAGD,GArOgC;;AAuOjCE,EAAAA,qBAvOiC,iCAuOX9D,CAvOW,EAuOD;AAC9B,eAAOF,YAAP;AACmB,QAAIe,QAAQ,CAACb,CAAC,CAACoB,kCAAH,CAAZ,GAAqDP,QAAQ,CAACb,CAAC,CAACwB,wBAAH,CADhF;;AAGD,GA3OgC;;AA6OjCuC,EAAAA,MA7OiC,kBA6O1B/D,CA7O0B,EA6OhB;AACf,eAAOF,YAAP;AACaE,IAAAA,CAAC,CAACgE,qBADf,EACwChE,CAAC,CAAC8C,iBAD1C,EAC+D9C,CAAC,CAACiE,wBADjE,EAC6FjE,CAAC,CAACgD,gBAD/F;AAEWhD,IAAAA,CAAC,CAACkE,oBAFb;AAGuBlE,IAAAA,CAAC,CAACM,iBAHzB,EAG8CN,CAAC,CAACM,iBAHhD;;AAKD,GAnPgC;;AAqPjC6D,EAAAA,YArPiC,wBAqPpBnE,CArPoB,EAqPV;AACrB,eAAOF,YAAP;AACaE,IAAAA,CAAC,CAACoE,wBADf;;AAGD,GAzPgC;;AA2PjCC,EAAAA,KA3PiC,iBA2P3BrE,CA3P2B,EA2PjB;AACd,eAAOF,YAAP;AACiBE,IAAAA,CAAC,CAACsE,0BADnB;AAEoBtE,IAAAA,CAAC,CAACuE,6BAFtB;AAGgBvE,IAAAA,CAAC,CAACwE,aAHlB;;AAKD,GAjQgC;;AAmQjCC,EAAAA,WAnQiC,uBAmQrBzE,CAnQqB,EAmQX;AACpB,eAAOF,YAAP;;AAEoBE,IAAAA,CAAC,CAAC0E,6BAFtB;AAGgB1E,IAAAA,CAAC,CAAC2E,kBAHlB;AAImB3E,IAAAA,CAAC,CAAC4E,sBAJrB;;;;;;;;;;AAckB5E,IAAAA,CAAC,CAAC6E,sBAdpB;;;AAiBD,GArRgC;;AAuRjCC,EAAAA,iBAvRiC,6BAuRf9E,CAvRe,EAuRL;AAC1B,eAAOF,YAAP;AACoBE,IAAAA,CAAC,CAACsB,wBADtB;;AAGD,GA3RgC;;AA6RjCyD,EAAAA,WA7RiC,uBA6RrB/E,CA7RqB,EA6RX;AACpB,eAAOF,YAAP;;;AAGgBE,IAAAA,CAAC,CAAC2E,kBAHlB;AAIgB3E,IAAAA,CAAC,CAACgF,sBAJlB;;;;;;;;;;AAckBhF,IAAAA,CAAC,CAACiF,sBAdpB;;;AAiBD,GA/SgC;;AAiTjCC,EAAAA,UAjTiC,sBAiTtBlF,CAjTsB,EAiTZ;AACnB,eAAOF,YAAP;;AAEkBE,IAAAA,CAAC,CAACmF,qBAFpB;;;AAKD,GAvTgC;;AAyTjCC,EAAAA,gBAzTiC,8BAyTd;AACjB,eAAOtF,YAAP;;;AAGD,GA7TgC;;AA+TjCuF,EAAAA,iBA/TiC,6BA+TfrF,CA/Te,EA+TL;AAC1B,eAAOF,YAAP;AACiBE,IAAAA,CAAC,CAACsF,eADnB;;AAGD,GAnUgC;;AAqUjCC,EAAAA,uBArUiC,qCAqUP;AACxB,eAAOzF,YAAP;;;AAGD,GAzUgC;;AA2UjC0F,EAAAA,kBA3UiC,gCA2UZ;AACnB,eAAO1F,YAAP;;;AAGD,GA/UgC;;AAiVjC2F,EAAAA,sBAjViC,kCAiVVzF,CAjVU,EAiVA;AAC/B,eAAOF,YAAP;AACoBE,IAAAA,CAAC,CAAC0F,kBADtB;;AAGD,GArVgC;;AAuVjCC,EAAAA,4BAvViC,wCAuVJ3F,CAvVI,EAuVM;AACrC,eAAOF,YAAP;AACoBE,IAAAA,CAAC,CAACyD,sBADtB;;AAGD,GA3VgC;;AA6VjCmC,EAAAA,mBA7ViC,iCA6VX;AACpB,eAAO9F,YAAP;;;;;;AAMD,GApWgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n `;\n },\n\n bg(t: Theme) {\n return css`\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n background: ${t.modalBackBg};\n opacity: ${t.modalBackOpacity};\n `;\n },\n\n container() {\n return css`\n position: relative;\n white-space: nowrap;\n text-align: center;\n height: 100%;\n overflow-y: auto;\n outline: none;\n\n &::before {\n content: '';\n display: inline-block;\n vertical-align: middle;\n height: 80%; /* to vertical align modal 40%/60% of screen height */\n }\n `;\n },\n\n window(t: Theme) {\n return css`\n position: relative;\n white-space: normal;\n margin: auto;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n background: ${t.modalBg};\n border-radius: ${t.modalBorderRadius};\n `;\n },\n\n mobileWindow() {\n return css`\n width: 100%;\n height: 100%;\n overflow: auto;\n `;\n },\n\n centerContainer() {\n return css`\n position: relative;\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n box-sizing: border-box;\n z-index: 10;\n margin: 40px 20px;\n `;\n },\n\n mobileCenterContainer() {\n return css`\n margin: 0;\n width: 100%;\n height: 100%;\n `;\n },\n\n alignTop() {\n return css`\n vertical-align: top;\n `;\n },\n\n close(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n return css`\n ${resetButton()};\n position: absolute;\n display: flex;\n right: ${padding}px;\n top: ${padding}px;\n background: none;\n background: transparent;\n cursor: pointer;\n color: ${t.modalCloseButtonColor};\n text-align: center;\n vertical-align: middle;\n padding: ${t.modalCloseButtonClickArea};\n margin: -${t.modalCloseButtonClickArea};\n\n &:hover {\n color: ${t.modalCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.modalCloseIconSize};\n height: ${t.modalCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n mobileClose(t: Theme) {\n return css`\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\n padding: ${t.mobileModalCloseButtonClickArea};\n margin: -${t.mobileModalCloseButtonClickArea};\n\n & > svg {\n width: ${t.mobileModalCloseIconSize};\n height: ${t.mobileModalCloseIconSize};\n }\n `;\n },\n\n mobileCloseWithoutHeader() {\n return css`\n position: static;\n `;\n },\n\n closeWrapper(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n return css`\n position: relative;\n float: right;\n width: ${blockSizeX + legacyGap}px;\n height: ${blockSizeY}px;\n `;\n },\n\n mobileCloseWrapper(t: Theme) {\n const size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;\n\n return css`\n position: absolute;\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${t.mobileModalCloseButtonTopPadding};\n padding: 0px;\n margin: 0px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${size}px;\n height: ${size}px;\n background: radial-gradient(50% 50% at 50% 50%, ${t.bgDefault} 60%, rgba(255, 255, 255, 0) 100%);\n border-radius: ${size}px;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n pointer-events: none;\n cursor: default;\n color: ${t.modalCloseButtonDisabledColor};\n `;\n },\n\n focus(t: Theme) {\n return css`\n color: ${t.modalCloseButtonHoverColor};\n outline: 2px solid ${t.borderColorFocus};\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.modalHeaderFontSize};\n line-height: ${t.modalHeaderLineHeight};\n padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n overflow-wrap: break-word;\n word-wrap: break-word;\n color: ${t.modalHeaderTextColor};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n position: relative;\n font-size: ${t.mobileModalHeaderFontSize};\n line-height: ${t.mobileModalHeaderLineHeight};\n padding: ${t.mobileModalHeaderPadding};\n `;\n },\n\n body(t: Theme) {\n return css`\n padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody(t: Theme) {\n return css`\n padding: ${t.mobileModalBodyPadding};\n padding-top: 0px;\n display: flex;\n flex-flow: column;\n flex: 1;\n font-size: ${t.mobileModalBodyFontSize};\n `;\n },\n\n headerWithClose(t: Theme) {\n const rightPadding =\n 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n return css`\n padding-right: ${rightPadding}px;\n `;\n },\n\n mobileHeaderWithClose(t: Theme) {\n return css`\n padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n `;\n },\n\n footer(t: Theme) {\n return css`\n padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalFooterTextColor};\n border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n `;\n },\n\n mobileFooter(t: Theme) {\n return css`\n padding: ${t.mobileModalFooterPadding};\n `;\n },\n\n panel(t: Theme) {\n return css`\n padding-top: ${t.modalFooterPanelPaddingTop};\n padding-bottom: ${t.modalFooterPanelPaddingBottom};\n background: ${t.modalFooterBg};\n `;\n },\n\n fixedHeader(t: Theme) {\n return css`\n margin-bottom: 10px;\n padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n background: ${t.modalFixedHeaderBg};\n border-bottom: ${t.modalFixedHeaderBorder};\n\n &:after {\n bottom: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedHeaderShadow};\n }\n `;\n },\n\n mobileFixedHeader(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalHeaderPadding};\n `;\n },\n\n fixedFooter(t: Theme) {\n return css`\n padding-top: 20px;\n margin-top: 10px;\n background: ${t.modalFixedHeaderBg};\n border-top: ${t.modalFixedFooterBorder};\n\n &:before {\n top: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedFooterShadow};\n }\n `;\n },\n\n fixedPanel(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.modalFixedPanelShadow};\n }\n `;\n },\n\n headerAddPadding() {\n return css`\n padding-bottom: 22px;\n `;\n },\n\n bodyWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.modalPaddingTop};\n `;\n },\n\n mobileBodyWithoutHeader() {\n return css`\n padding-top: 0px;\n `;\n },\n\n bodyWithoutPadding() {\n return css`\n padding: 0;\n `;\n },\n\n bodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.modalPaddingBottom};\n `;\n },\n\n mobileBodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalBodyPadding};\n `;\n },\n\n columnFlexContainer() {\n return css`\n height: 100%;\n display: flex;\n flex-flow: column;\n overflow-y: auto;\n `;\n },\n});\n"]}
|
|
@@ -57,8 +57,6 @@ ModalBody = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_c
|
|
|
57
57
|
function (_ref) {var _cx;var additionalPadding = _ref.additionalPadding,hasHeader = _ref.hasHeader;return /*#__PURE__*/(
|
|
58
58
|
_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), /*#__PURE__*/
|
|
59
59
|
_react.default.createElement(_ZIndex.ZIndex, {
|
|
60
|
-
priority: 'ModalBody',
|
|
61
|
-
createStackingContext: true,
|
|
62
60
|
className: (0, _Emotion.cx)((_cx = {}, _cx[
|
|
63
61
|
_Modal.styles.body(_this3.theme)] = true, _cx[
|
|
64
62
|
_Modal.styles.mobileBody(_this3.theme)] = _this3.isMobileLayout, _cx[
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ModalBody.tsx"],"names":["ModalBody","responsiveLayout","rootNode","handleResize","LayoutEvents","emit","render","theme","renderMain","noPadding","props","additionalPadding","hasHeader","setRootNode","styles","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","React","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"uUAAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,uC;;;;;;;;;AASA;AACA;AACA;AACA;AACA,G;;;AAGaA,S,OAFZC,2B,eACAC,kB;;;;;;;;;;;;;;;;;;;AAoBSC,IAAAA,Y,GAAe,YAAM;AAC3BC,MAAAA,YAAY,CAACC,IAAb;AACD,K,uDAbMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C;;AAMMA,EAAAA,U,GAAP,sBAAiC;AAC/B,QAAQC,SAAR,GAAsB,KAAKC,KAA3B,CAAQD,SAAR;AACA;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,mCAAGE,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACH,KAAvD;AACE,uCAAC,cAAD;AACE,YAAA,
|
|
1
|
+
{"version":3,"sources":["ModalBody.tsx"],"names":["ModalBody","responsiveLayout","rootNode","handleResize","LayoutEvents","emit","render","theme","renderMain","noPadding","props","additionalPadding","hasHeader","setRootNode","styles","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","React","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"uUAAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,uC;;;;;;;;;AASA;AACA;AACA;AACA;AACA,G;;;AAGaA,S,OAFZC,2B,eACAC,kB;;;;;;;;;;;;;;;;;;;AAoBSC,IAAAA,Y,GAAe,YAAM;AAC3BC,MAAAA,YAAY,CAACC,IAAb;AACD,K,uDAbMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C;;AAMMA,EAAAA,U,GAAP,sBAAiC;AAC/B,QAAQC,SAAR,GAAsB,KAAKC,KAA3B,CAAQD,SAAR;AACA;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,mCAAGE,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACH,KAAvD;AACE,uCAAC,cAAD;AACE,YAAA,SAAS,EAAE;AACRI,0BAAOC,IAAP,CAAY,MAAI,CAACR,KAAjB,CADQ,IACkB,IADlB;AAERO,0BAAOE,UAAP,CAAkB,MAAI,CAACT,KAAvB,CAFQ,IAEwB,MAAI,CAACU,cAF7B;AAGRH,0BAAOI,iBAAP,CAAyB,MAAI,CAACX,KAA9B,CAHQ,IAG+B,CAACK,SAHhC;AAIRE,0BAAOK,uBAAP,EAJQ,IAI2B,CAACP,SAAD,IAAc,MAAI,CAACK,cAJ9C;AAKRH,0BAAOM,sBAAP,CAA8B,MAAI,CAACb,KAAnC,CALQ,IAKoCI,iBALpC;AAMRG,0BAAOO,4BAAP,CAAoC,MAAI,CAACd,KAAzC,CANQ,IAM0CI,iBAAiB,IAAI,MAAI,CAACM,cANpE;AAORH,0BAAOQ,kBAAP,EAPQ,IAOsBb,SAPtB,OADb;;;AAWG,UAAA,MAAI,CAACQ,cAAL;AACC,uCAAC,8BAAD,IAAgB,QAAQ,EAAE,MAAI,CAACd,YAA/B,IAA8C,MAAI,CAACO,KAAL,CAAWa,QAAzD,CADD;;AAGC,UAAA,MAAI,CAACb,KAAL,CAAWa,QAdf,CADF,CADD,GADH,CADF;;;;;;;AAyBD,G,oBAlD4BC,eAAMC,S,WACrBC,mB,GAAsB,W,UACtBC,c,GAAiB,I","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { ModalContext } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport interface ModalBodyProps extends CommonProps {\n /**\n * убирает отступы\n */\n noPadding?: boolean;\n}\n\n/**\n * Контейнер с отступами от края модалки\n *\n * @visibleName Modal.Body\n */\n@responsiveLayout\n@rootNode\nexport class ModalBody extends React.Component<ModalBodyProps> {\n public static __KONTUR_REACT_UI__ = 'ModalBody';\n public static __MODAL_BODY__ = true;\n\n private theme!: Theme;\n private isMobileLayout!: boolean;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private handleResize = () => {\n LayoutEvents.emit();\n };\n\n public renderMain(): JSX.Element {\n const { noPadding } = this.props;\n return (\n <ModalContext.Consumer>\n {({ additionalPadding, hasHeader }) => (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <ZIndex\n className={cx({\n [styles.body(this.theme)]: true,\n [styles.mobileBody(this.theme)]: this.isMobileLayout,\n [styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n [styles.mobileBodyWithoutHeader()]: !hasHeader && this.isMobileLayout,\n [styles.bodyAddPaddingForPanel(this.theme)]: additionalPadding,\n [styles.mobileBodyAddPaddingForPanel(this.theme)]: additionalPadding && this.isMobileLayout,\n [styles.bodyWithoutPadding()]: noPadding,\n })}\n >\n {this.isMobileLayout ? (\n <ResizeDetector onResize={this.handleResize}>{this.props.children}</ResizeDetector>\n ) : (\n this.props.children\n )}\n </ZIndex>\n </CommonWrapper>\n )}\n </ModalContext.Consumer>\n );\n }\n}\n"]}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
var _getScrollWidth = require("../../lib/dom/getScrollWidth");
|
|
4
4
|
var _Sticky = require("../Sticky");
|
|
5
5
|
var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
6
|
-
var _ZIndex = require("../../internal/ZIndex");
|
|
7
6
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
8
7
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
9
8
|
var _ResponsiveLayout = require("../ResponsiveLayout");
|
|
@@ -85,15 +84,13 @@ function ModalFooter(props) {
|
|
|
85
84
|
};
|
|
86
85
|
|
|
87
86
|
return /*#__PURE__*/(
|
|
88
|
-
_react.default.createElement(_CommonWrapper.CommonWrapper, props,
|
|
89
|
-
_react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalFooter', className: _Modal.styles.footerWrapper() },
|
|
87
|
+
_react.default.createElement(_CommonWrapper.CommonWrapper, props,
|
|
90
88
|
sticky ? /*#__PURE__*/
|
|
91
89
|
_react.default.createElement(_Sticky.Sticky, { side: "bottom", offset: modal.horizontalScroll ? (0, _getScrollWidth.getScrollWidth)() : 0 },
|
|
92
90
|
renderContent) :
|
|
93
91
|
|
|
94
92
|
|
|
95
|
-
renderContent()))
|
|
96
|
-
|
|
93
|
+
renderContent()));
|
|
97
94
|
|
|
98
95
|
|
|
99
96
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ModalFooter.tsx"],"names":["ModalFooterDataTids","root","ModalFooter","props","theme","ThemeContext","modal","ModalContext","layout","sticky","isMobile","gap","panel","children","setHasFooter","setHasPanel","renderContent","fixed","styles","footer","fixedFooter","Boolean","fixedPanel","mobileFooter","
|
|
1
|
+
{"version":3,"sources":["ModalFooter.tsx"],"names":["ModalFooterDataTids","root","ModalFooter","props","theme","ThemeContext","modal","ModalContext","layout","sticky","isMobile","gap","panel","children","setHasFooter","setHasPanel","renderContent","fixed","styles","footer","fixedFooter","Boolean","fixedPanel","mobileFooter","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"8GAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8C;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,IAAMA,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;AAIP;AACA;AACA;AACA;AACA,G;AACA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,MAAM,GAAG,4CAAf;;AAEA,sBAA4DL,KAA5D,CAAQM,MAAR,CAAQA,MAAR,8BAAiB,CAACD,MAAM,CAACE,QAAzB,iBAAmCC,GAAnC,GAA4DR,KAA5D,CAAmCQ,GAAnC,CAAwCC,KAAxC,GAA4DT,KAA5D,CAAwCS,KAAxC,CAA+CC,QAA/C,GAA4DV,KAA5D,CAA+CU,QAA/C;;AAEA,8BAAgB,YAAM;AACpBP,IAAAA,KAAK,CAACQ,YAAN,oBAAAR,KAAK,CAACQ,YAAN;AACAR,IAAAA,KAAK,CAACS,WAAN,oBAAAT,KAAK,CAACS,WAAN,CAAoBH,KAApB;;AAEA,WAAO,YAAM;AACXN,MAAAA,KAAK,CAACQ,YAAN,oBAAAR,KAAK,CAACQ,YAAN,CAAqB,KAArB;AACAR,MAAAA,KAAK,CAACS,WAAN,oBAAAT,KAAK,CAACS,WAAN,CAAoB,KAApB;AACD,KAHD;AAID,GARD,EAQG,CAACH,KAAD,CARH;;AAUA,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACvC;AACE;AACE,oBAAUjB,mBAAmB,CAACC,IADhC;AAEE,QAAA,SAAS,EAAE;AACRiB,sBAAOC,MAAP,CAAcf,KAAd,CADQ,IACe,IADf;AAERc,sBAAOE,WAAP,CAAmBhB,KAAnB,CAFQ,IAEoBa,KAFpB;AAGRC,sBAAON,KAAP,CAAaR,KAAb,CAHQ,IAGciB,OAAO,CAACT,KAAD,CAHrB;AAIRM,sBAAOI,UAAP,CAAkBlB,KAAlB,CAJQ,IAImBa,KAAK,IAAII,OAAO,CAACT,KAAD,CAJnC;AAKRM,sBAAOK,YAAP,CAAoBnB,KAApB,CALQ,IAKqBI,MAAM,CAACE,QAL5B,OAFb;;;AAUG,gCAAcC,GAAd;AACC,mCAAC,cAAD,IAAQ,QAAQ,EAAEH,MAAM,CAACE,QAAzB,EAAmC,GAAG,EAAEC,GAAxC;AACGE,MAAAA,QADH,CADD;;;AAKCA,MAAAA,QAfJ,CADF;;;;AAoBD,GArBD;;AAuBA;AACE,iCAAC,4BAAD,EAAmBV,KAAnB;AACGM,IAAAA,MAAM;AACL,iCAAC,cAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEH,KAAK,CAACkB,gBAAN,GAAyB,qCAAzB,GAA4C,CAA1E;AACGR,IAAAA,aADH,CADK;;;AAKLA,IAAAA,aAAa,EANjB,CADF;;;;AAWD;;AAEDd,WAAW,CAACuB,mBAAZ,GAAkC,aAAlC;AACAvB,WAAW,CAACwB,gBAAZ,GAA+B,IAA/B","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\nimport { Gapped, GappedProps } from '../Gapped';\nimport { isNonNullable } from '../../lib/utils';\n\nimport { styles } from './Modal.styles';\nimport { ModalContext } from './ModalContext';\n\nexport interface ModalFooterProps extends CommonProps {\n /**\n * Включает серый цвет в футере\n */\n panel?: boolean;\n /**\n * Закрепляет футер снизу модального окна\n *\n * На десктопе по умолчанию равен `true`\n * На мобильных по умолчанию равен `false`\n */\n sticky?: boolean;\n /**\n * Контент футера\n */\n children?: ReactNode;\n /**\n * Задаёт отступ между элементами футера\n */\n gap?: GappedProps['gap'];\n}\n\nexport const ModalFooterDataTids = {\n root: 'ModalFooter__root',\n} as const;\n\n/**\n * Футер модального окна.\n *\n * @visibleName Modal.Footer\n */\nfunction ModalFooter(props: ModalFooterProps) {\n const theme = useContext(ThemeContext);\n const modal = useContext(ModalContext);\n const layout = useResponsiveLayout();\n\n const { sticky = !layout.isMobile, gap, panel, children } = props;\n\n useLayoutEffect(() => {\n modal.setHasFooter?.();\n modal.setHasPanel?.(panel);\n\n return () => {\n modal.setHasFooter?.(false);\n modal.setHasPanel?.(false);\n };\n }, [panel]);\n\n const renderContent = (fixed = false) => {\n return (\n <div\n data-tid={ModalFooterDataTids.root}\n className={cx({\n [styles.footer(theme)]: true,\n [styles.fixedFooter(theme)]: fixed,\n [styles.panel(theme)]: Boolean(panel),\n [styles.fixedPanel(theme)]: fixed && Boolean(panel),\n [styles.mobileFooter(theme)]: layout.isMobile,\n })}\n >\n {isNonNullable(gap) ? (\n <Gapped vertical={layout.isMobile} gap={gap}>\n {children}\n </Gapped>\n ) : (\n children\n )}\n </div>\n );\n };\n\n return (\n <CommonWrapper {...props}>\n {sticky ? (\n <Sticky side=\"bottom\" offset={modal.horizontalScroll ? getScrollWidth() : 0}>\n {renderContent}\n </Sticky>\n ) : (\n renderContent()\n )}\n </CommonWrapper>\n );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var _Sticky = require("../Sticky");
|
|
4
4
|
var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
5
|
-
var _ZIndex = require("../../internal/ZIndex");
|
|
6
5
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
7
6
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
8
7
|
var _ResponsiveLayout = require("../ResponsiveLayout");
|
|
@@ -59,11 +58,7 @@ function ModalHeader(props) {
|
|
|
59
58
|
};
|
|
60
59
|
|
|
61
60
|
return /*#__PURE__*/(
|
|
62
|
-
_react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
|
|
63
|
-
_react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalHeader', className: _Modal.styles.headerWrapper() },
|
|
64
|
-
sticky ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top" }, renderContent) : renderContent())));
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
_react.default.createElement(_CommonWrapper.CommonWrapper, props, sticky ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top" }, renderContent) : renderContent()));
|
|
67
62
|
|
|
68
63
|
}
|
|
69
64
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ModalHeader.tsx"],"names":["ModalHeaderDataTids","root","ModalHeader","props","theme","ThemeContext","modal","ModalContext","layout","sticky","isMobile","children","setHasHeader","renderContent","fixed","styles","header","mobileHeader","headerAddPadding","Boolean","additionalPadding","fixedHeader","mobileFixedHeader","headerWithClose","close","mobileHeaderWithClose","requestClose","disableClose","
|
|
1
|
+
{"version":3,"sources":["ModalHeader.tsx"],"names":["ModalHeaderDataTids","root","ModalHeader","props","theme","ThemeContext","modal","ModalContext","layout","sticky","isMobile","children","setHasHeader","renderContent","fixed","styles","header","mobileHeader","headerAddPadding","Boolean","additionalPadding","fixedHeader","mobileFixedHeader","headerWithClose","close","mobileHeaderWithClose","requestClose","disableClose","__KONTUR_REACT_UI__","__MODAL_HEADER__"],"mappings":"8GAAA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,8C;;;;;;;AAOO,IAAMA,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;AAIP;AACA;AACA;AACA;AACA,G;AACA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,MAAM,GAAG,4CAAf;;AAEA,sBAAgDL,KAAhD,CAAQM,MAAR,CAAQA,MAAR,8BAAiB,CAACD,MAAM,CAACE,QAAzB,iBAAmCC,QAAnC,GAAgDR,KAAhD,CAAmCQ,QAAnC;;AAEA,8BAAgB,YAAM;AACpBL,IAAAA,KAAK,CAACM,YAAN,oBAAAN,KAAK,CAACM,YAAN;;AAEA,WAAO,oBAAMN,KAAK,CAACM,YAAZ,oBAAMN,KAAK,CAACM,YAAN,CAAqB,KAArB,CAAN,EAAP;AACD,GAJD,EAIG,EAJH;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACvC;AACE;AACE,oBAAUd,mBAAmB,CAACC,IADhC;AAEE,QAAA,SAAS,EAAE;AACRc,sBAAOC,MAAP,CAAcZ,KAAd,CADQ,IACe,IADf;AAERW,sBAAOE,YAAP,CAAoBb,KAApB,CAFQ,IAEqBI,MAAM,CAACE,QAF5B;AAGRK,sBAAOG,gBAAP,EAHQ,IAGoBC,OAAO,CAACb,KAAK,CAACc,iBAAP,CAH3B;AAIRL,sBAAOM,WAAP,CAAmBjB,KAAnB,CAJQ,IAIoBU,KAJpB;AAKRC,sBAAOO,iBAAP,CAAyBlB,KAAzB,CALQ,IAK0BU,KAAK,IAAIN,MAAM,CAACE,QAL1C;AAMRK,sBAAOQ,eAAP,CAAuBnB,KAAvB,CANQ,IAMwBe,OAAO,CAACb,KAAK,CAACkB,KAAP,CAN/B;AAORT,sBAAOU,qBAAP,CAA6BrB,KAA7B,CAPQ,IAO8BI,MAAM,CAACE,QAPrC,OAFb;;;AAYGJ,MAAAA,KAAK,CAACkB,KAAN,iBAAe,6BAAC,sBAAD,IAAY,YAAY,EAAElB,KAAK,CAACkB,KAAN,CAAYE,YAAtC,EAAoD,YAAY,EAAEpB,KAAK,CAACkB,KAAN,CAAYG,YAA9E,GAZlB;AAaGhB,MAAAA,QAbH,CADF;;;AAiBD,GAlBD;;AAoBA;AACE,iCAAC,4BAAD,EAAmBR,KAAnB,EAA2BM,MAAM,gBAAG,6BAAC,cAAD,IAAQ,IAAI,EAAC,KAAb,IAAoBI,aAApB,CAAH,GAAiDA,aAAa,EAA/F,CADF;;AAGD;;AAEDX,WAAW,CAAC0B,mBAAZ,GAAkC,aAAlC;AACA1B,WAAW,CAAC2B,gBAAZ,GAA+B,IAA/B","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\n\nexport interface ModalHeaderProps extends CommonProps {\n sticky?: boolean;\n children?: ReactNode;\n}\n\nexport const ModalHeaderDataTids = {\n root: 'ModalHeader__root',\n} as const;\n\n/**\n * Шапка модального окна\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps) {\n const theme = useContext(ThemeContext);\n const modal = useContext(ModalContext);\n const layout = useResponsiveLayout();\n\n const { sticky = !layout.isMobile, children } = props;\n\n useLayoutEffect(() => {\n modal.setHasHeader?.();\n\n return () => modal.setHasHeader?.(false);\n }, []);\n\n const renderContent = (fixed = false) => {\n return (\n <div\n data-tid={ModalHeaderDataTids.root}\n className={cx({\n [styles.header(theme)]: true,\n [styles.mobileHeader(theme)]: layout.isMobile,\n [styles.headerAddPadding()]: Boolean(modal.additionalPadding),\n [styles.fixedHeader(theme)]: fixed,\n [styles.mobileFixedHeader(theme)]: fixed && layout.isMobile,\n [styles.headerWithClose(theme)]: Boolean(modal.close),\n [styles.mobileHeaderWithClose(theme)]: layout.isMobile,\n })}\n >\n {modal.close && <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />}\n {children}\n </div>\n );\n };\n\n return (\n <CommonWrapper {...props}>{sticky ? <Sticky side=\"top\">{renderContent}</Sticky> : renderContent()}</CommonWrapper>\n );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"]}
|
|
@@ -190,12 +190,12 @@ PasswordInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
|
|
|
190
190
|
capsLockEnabled && /*#__PURE__*/
|
|
191
191
|
_react.default.createElement("span", { className: _PasswordInput.styles.capsLockDetector(), "data-tid": PasswordInputDataTids.capsLockDetector }), /*#__PURE__*/
|
|
192
192
|
|
|
193
|
-
_react.default.createElement("span", {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
193
|
+
_react.default.createElement("span", { className: (0, _Emotion.cx)(_PasswordInput.styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname()) },
|
|
194
|
+
!_this.props.disabled && /*#__PURE__*/
|
|
195
|
+
_react.default.createElement("span", { onClick: _this.handleToggleVisibility, "data-tid": PasswordInputDataTids.eyeIcon }, /*#__PURE__*/
|
|
196
|
+
_react.default.createElement(_PasswordInputIcon.PasswordInputIcon, { visible: _this.state.visible })))));
|
|
197
|
+
|
|
197
198
|
|
|
198
|
-
!_this.props.disabled && /*#__PURE__*/_react.default.createElement(_PasswordInputIcon.PasswordInputIcon, { visible: _this.state.visible }))));
|
|
199
199
|
|
|
200
200
|
|
|
201
201
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PasswordInput.tsx"],"names":["PasswordInputDataTids","root","capsLockDetector","eyeIcon","PasswordInput","rootNode","getProps","defaultProps","state","visible","capsLockEnabled","focus","input","blur","handleBlur","handleKeyPress","e","props","onKeyPress","detectCapsLock","getModifierState","Codes","CapsLock","setState","handleKeydown","onKeyDown","handleToggleVisibility","prevState","handleFocus","renderEye","styles","iconWrapper","toggleVisibility","theme","getEyeWrapperClassname","disabled","refInput","element","hideSymbols","renderMain","rest","inputProps","rightIcon","componentDidMount","isIE11","window","document","msCapsLockWarningOff","getDerivedStateFromProps","render","setRootNode","size","eyeWrapperLarge","eyeWrapperMedium","eyeWrapperSmall","React","PureComponent","__KONTUR_REACT_UI__","propTypes","PropTypes","bool"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyCapsLock } from '../../lib/events/keyboard/identifiers';\nimport { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes';\nimport { Input, InputProps } from '../Input';\nimport { Nullable } from '../../typings/utility-types';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './PasswordInput.styles';\nimport { PasswordInputIcon } from './PasswordInputIcon';\n\nexport interface PasswordInputProps extends CommonProps, InputProps {\n detectCapsLock?: boolean;\n}\n\nexport interface PasswordInputState {\n visible: boolean;\n capsLockEnabled?: boolean | null;\n}\n\nexport const PasswordInputDataTids = {\n root: 'PasswordInput',\n capsLockDetector: 'PasswordInputCapsLockDetector',\n eyeIcon: 'PasswordInputEyeIcon',\n} as const;\n\ntype DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;\n\n/**\n * Компонент для ввода пароля\n */\n@rootNode\nexport class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {\n public static __KONTUR_REACT_UI__ = 'PasswordInput';\n\n public static propTypes = {\n /**\n * Включает CapsLock детектор\n */\n detectCapsLock: PropTypes.bool,\n };\n\n public static defaultProps: DefaultProps = {\n size: 'small',\n };\n\n private getProps = createPropsGetter(PasswordInput.defaultProps);\n\n public state: PasswordInputState = {\n visible: false,\n capsLockEnabled: false,\n };\n\n private theme!: Theme;\n\n private input: Nullable<Input>;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.props.detectCapsLock) {\n this.setState({ capsLockEnabled: null });\n }\n\n // @ts-expect-error: IE-specific API.\n if (isIE11 && !window.document.msCapsLockWarningOff) {\n // @ts-expect-error: Read the comment above.\n // turns off default ie capslock warning\n window.document.msCapsLockWarningOff = true;\n }\n }\n\n public static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState) {\n if (props.disabled) {\n return { visible: false };\n }\n\n return state;\n }\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 /**\n * @public\n */\n public focus = () => {\n if (this.input) {\n this.input.focus();\n }\n };\n\n /**\n * @public\n */\n public blur = () => {\n this.handleBlur();\n };\n\n private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { onKeyPress, detectCapsLock } = this.props;\n\n if (onKeyPress) {\n onKeyPress(e);\n }\n\n if (!detectCapsLock) {\n return;\n }\n\n const capsLockEnabled = e.getModifierState(Codes.CapsLock);\n\n this.setState({ capsLockEnabled });\n };\n\n private handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const {\n props: { detectCapsLock, onKeyDown },\n state: { capsLockEnabled },\n } = this;\n\n if (onKeyDown) {\n onKeyDown(e);\n }\n\n if (!detectCapsLock) {\n return;\n }\n\n if (isKeyCapsLock(e) && isNonNullable(capsLockEnabled)) {\n this.setState({ capsLockEnabled: !capsLockEnabled });\n }\n };\n\n private handleToggleVisibility = () => {\n this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocus);\n };\n\n private handleFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n };\n\n private handleBlur = () => {\n if (this.input) {\n this.input.blur();\n }\n };\n\n private getEyeWrapperClassname() {\n switch (this.getProps().size) {\n case 'large':\n return styles.eyeWrapperLarge(this.theme);\n case 'medium':\n return styles.eyeWrapperMedium(this.theme);\n case 'small':\n default:\n return styles.eyeWrapperSmall(this.theme);\n }\n }\n\n private renderEye = () => {\n const { capsLockEnabled } = this.state;\n\n return (\n <span className={styles.iconWrapper()}>\n {capsLockEnabled && (\n <span className={styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />\n )}\n <span\n data-tid={PasswordInputDataTids.eyeIcon}\n className={cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}\n onClick={this.handleToggleVisibility}\n >\n {!this.props.disabled && <PasswordInputIcon visible={this.state.visible} />}\n </span>\n </span>\n );\n };\n\n private refInput = (element: Input) => {\n this.input = element;\n };\n\n private hideSymbols = () => {\n this.setState({ visible: false });\n };\n\n private renderMain = (props: CommonWrapperRestProps<PasswordInputProps>) => {\n const { detectCapsLock, ...rest } = props;\n const inputProps = {\n ...rest,\n onKeyDown: this.handleKeydown,\n onKeyPress: this.handleKeyPress,\n rightIcon: this.renderEye(),\n };\n\n return (\n <RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols}>\n <div data-tid={PasswordInputDataTids.root} className={styles.root()}>\n <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />\n </div>\n </RenderLayer>\n );\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["PasswordInput.tsx"],"names":["PasswordInputDataTids","root","capsLockDetector","eyeIcon","PasswordInput","rootNode","getProps","defaultProps","state","visible","capsLockEnabled","focus","input","blur","handleBlur","handleKeyPress","e","props","onKeyPress","detectCapsLock","getModifierState","Codes","CapsLock","setState","handleKeydown","onKeyDown","handleToggleVisibility","prevState","handleFocus","renderEye","styles","iconWrapper","toggleVisibility","theme","getEyeWrapperClassname","disabled","refInput","element","hideSymbols","renderMain","rest","inputProps","rightIcon","componentDidMount","isIE11","window","document","msCapsLockWarningOff","getDerivedStateFromProps","render","setRootNode","size","eyeWrapperLarge","eyeWrapperMedium","eyeWrapperSmall","React","PureComponent","__KONTUR_REACT_UI__","propTypes","PropTypes","bool"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyCapsLock } from '../../lib/events/keyboard/identifiers';\nimport { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes';\nimport { Input, InputProps } from '../Input';\nimport { Nullable } from '../../typings/utility-types';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './PasswordInput.styles';\nimport { PasswordInputIcon } from './PasswordInputIcon';\n\nexport interface PasswordInputProps extends CommonProps, InputProps {\n detectCapsLock?: boolean;\n}\n\nexport interface PasswordInputState {\n visible: boolean;\n capsLockEnabled?: boolean | null;\n}\n\nexport const PasswordInputDataTids = {\n root: 'PasswordInput',\n capsLockDetector: 'PasswordInputCapsLockDetector',\n eyeIcon: 'PasswordInputEyeIcon',\n} as const;\n\ntype DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;\n\n/**\n * Компонент для ввода пароля\n */\n@rootNode\nexport class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {\n public static __KONTUR_REACT_UI__ = 'PasswordInput';\n\n public static propTypes = {\n /**\n * Включает CapsLock детектор\n */\n detectCapsLock: PropTypes.bool,\n };\n\n public static defaultProps: DefaultProps = {\n size: 'small',\n };\n\n private getProps = createPropsGetter(PasswordInput.defaultProps);\n\n public state: PasswordInputState = {\n visible: false,\n capsLockEnabled: false,\n };\n\n private theme!: Theme;\n\n private input: Nullable<Input>;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.props.detectCapsLock) {\n this.setState({ capsLockEnabled: null });\n }\n\n // @ts-expect-error: IE-specific API.\n if (isIE11 && !window.document.msCapsLockWarningOff) {\n // @ts-expect-error: Read the comment above.\n // turns off default ie capslock warning\n window.document.msCapsLockWarningOff = true;\n }\n }\n\n public static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState) {\n if (props.disabled) {\n return { visible: false };\n }\n\n return state;\n }\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 /**\n * @public\n */\n public focus = () => {\n if (this.input) {\n this.input.focus();\n }\n };\n\n /**\n * @public\n */\n public blur = () => {\n this.handleBlur();\n };\n\n private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { onKeyPress, detectCapsLock } = this.props;\n\n if (onKeyPress) {\n onKeyPress(e);\n }\n\n if (!detectCapsLock) {\n return;\n }\n\n const capsLockEnabled = e.getModifierState(Codes.CapsLock);\n\n this.setState({ capsLockEnabled });\n };\n\n private handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const {\n props: { detectCapsLock, onKeyDown },\n state: { capsLockEnabled },\n } = this;\n\n if (onKeyDown) {\n onKeyDown(e);\n }\n\n if (!detectCapsLock) {\n return;\n }\n\n if (isKeyCapsLock(e) && isNonNullable(capsLockEnabled)) {\n this.setState({ capsLockEnabled: !capsLockEnabled });\n }\n };\n\n private handleToggleVisibility = () => {\n this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocus);\n };\n\n private handleFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n };\n\n private handleBlur = () => {\n if (this.input) {\n this.input.blur();\n }\n };\n\n private getEyeWrapperClassname() {\n switch (this.getProps().size) {\n case 'large':\n return styles.eyeWrapperLarge(this.theme);\n case 'medium':\n return styles.eyeWrapperMedium(this.theme);\n case 'small':\n default:\n return styles.eyeWrapperSmall(this.theme);\n }\n }\n\n private renderEye = () => {\n const { capsLockEnabled } = this.state;\n\n return (\n <span className={styles.iconWrapper()}>\n {capsLockEnabled && (\n <span className={styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />\n )}\n <span className={cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}>\n {!this.props.disabled && (\n <span onClick={this.handleToggleVisibility} data-tid={PasswordInputDataTids.eyeIcon}>\n <PasswordInputIcon visible={this.state.visible} />\n </span>\n )}\n </span>\n </span>\n );\n };\n\n private refInput = (element: Input) => {\n this.input = element;\n };\n\n private hideSymbols = () => {\n this.setState({ visible: false });\n };\n\n private renderMain = (props: CommonWrapperRestProps<PasswordInputProps>) => {\n const { detectCapsLock, ...rest } = props;\n const inputProps = {\n ...rest,\n onKeyDown: this.handleKeydown,\n onKeyPress: this.handleKeyPress,\n rightIcon: this.renderEye(),\n };\n\n return (\n <RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols}>\n <div data-tid={PasswordInputDataTids.root} className={styles.root()}>\n <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />\n </div>\n </RenderLayer>\n );\n };\n}\n"]}
|
|
@@ -129,6 +129,9 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
|
|
|
129
129
|
|
|
130
130
|
|
|
131
131
|
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
132
135
|
|
|
133
136
|
|
|
134
137
|
|
|
@@ -337,7 +340,12 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
|
|
|
337
340
|
handleMouseLeave = function () {var _this$scrollY3, _this$scrollX3;
|
|
338
341
|
(_this$scrollY3 = _this.scrollY) == null ? void 0 : _this$scrollY3.setHover(false);
|
|
339
342
|
(_this$scrollX3 = _this.scrollX) == null ? void 0 : _this$scrollX3.setHover(false);
|
|
340
|
-
};
|
|
343
|
+
};_this.
|
|
344
|
+
|
|
345
|
+
updateInnerElement = function () {var _this$scrollX4, _this$scrollY4;
|
|
346
|
+
(_this$scrollX4 = _this.scrollX) == null ? void 0 : _this$scrollX4.setInnerElement(_this.inner);
|
|
347
|
+
(_this$scrollY4 = _this.scrollY) == null ? void 0 : _this$scrollY4.setInnerElement(_this.inner);
|
|
348
|
+
};return _this;}var _proto = ScrollContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.updateInnerElement();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var preventWindowScroll = this.getProps().preventWindowScroll;if (this.inner) {if (prevProps.preventWindowScroll && !preventWindowScroll) {this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);}if (!prevProps.preventWindowScroll && preventWindowScroll) {this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });}}if (prevProps.disabled !== this.props.disabled && !this.props.disabled) {this.updateInnerElement();}}; /**
|
|
341
349
|
* @public
|
|
342
350
|
* @param {Element} element
|
|
343
351
|
*/_proto.scrollTo = function scrollTo(element) {if (!element || !this.inner) {return;}this.inner.scrollLeft = element.offsetLeft;this.inner.scrollTop = (0, _ScrollContainer3.getScrollYOffset)(element, this.inner);} /**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ScrollContainer.tsx"],"names":["ScrollContainerDataTids","root","inner","ScrollContainer","rootNode","getProps","defaultProps","render","props","disabled","children","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","setRootNode","styles","handleMouseMove","handleMouseLeave","refInner","globalClasses","isIE11","innerIE11","handleNativeScroll","axis","refScrollBar","refScrollBarX","refScrollBarY","offsetY","offsetX","invert","hideScrollBar","disableAnimations","hideScrollBarDelay","offset","handleScrollStateChange","scrollState","scrollY","scrollX","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","LayoutEvents","emit","WheelEvent","shiftKey","hasScrollBar","scrollSizeParametersNames","pos","size","deltaY","right","currentTarget","pageX","bottom","pageY","setHover","componentDidMount","setInnerElement","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","string","number","oneOf","func","isTestEnv"],"mappings":"+WAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;AAKA,wC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDO,IAAMA,uBAAuB,GAAG;AACrCC,EAAAA,IAAI,EAAE,uBAD+B;AAErCC,EAAAA,KAAK,EAAE,wBAF8B,EAAhC,C;;;;;;;;;;;AAaMC,e,OADZC,kB;;;;;;;;;;;;;;;;;;;;;AAsBSC,IAAAA,Q,GAAW,0CAAkBF,eAAe,CAACG,YAAlC,C;;;;;;;;;;;;;;;;;;;;;;;;AAwBZC,IAAAA,M,GAAS,YAAM;AACpB,UAAMC,KAAK,GAAG,MAAKA,KAAnB;;AAEA,UAAI,MAAKA,KAAL,CAAWC,QAAf,EAAyB;AACvB,eAAO,MAAKD,KAAL,CAAWE,QAAlB;AACD;;AAED,UAAMC,UAA+B,GAAG;AACtCC,QAAAA,cAAc,EAAE,MAAKP,QAAL,GAAgBQ,eADM;AAEtCC,QAAAA,SAAS,EAAEN,KAAK,CAACM,SAFqB;AAGtCC,QAAAA,QAAQ,EAAEP,KAAK,CAACO,QAHsB,EAAxC;;;AAMA,UAAMC,UAAU,GAAG,MAAKC,eAAL,CAAqB,GAArB,CAAnB;AACA,UAAMC,UAAU,GAAG,MAAKD,eAAL,CAAqB,GAArB,CAAnB;;AAEA;AACE,qCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAKE,WAAjC,IAAkD,MAAKX,KAAvD;AACE;AACE,sBAAUR,uBAAuB,CAACC,IADpC;AAEE,UAAA,SAAS,EAAEmB,wBAAOnB,IAAP,EAFb;AAGE,UAAA,WAAW,EAAE,MAAKoB,eAHpB;AAIE,UAAA,YAAY,EAAE,MAAKC,gBAJrB;;AAMGN,QAAAA,UANH;AAOGE,QAAAA,UAPH;AAQE;AACE,UAAA,KAAK,EAAEP,UADT;AAEE,UAAA,GAAG,EAAE,MAAKY,QAFZ;AAGE,UAAA,SAAS,EAAE,iBAAGH,wBAAOlB,KAAP,EAAH,EAAmBsB,+BAActB,KAAjC,EAAwCuB,kBAAUL,wBAAOM,SAAP,EAAlD,CAHb;AAIE,sBAAU1B,uBAAuB,CAACE,KAJpC;AAKE,UAAA,QAAQ,EAAE,MAAKyB,kBALjB;;AAOGnB,QAAAA,KAAK,CAACE,QAPT,CARF,CADF,CADF;;;;;AAsBD,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEOO,IAAAA,e,GAAkB,UAACW,IAAD,EAAsB;AAC9C,UAAMC,YAAY,GAAGD,IAAI,KAAK,GAAT,GAAe,MAAKE,aAApB,GAAoC,MAAKC,aAA9D;AACA,2BAA2F,MAAK1B,QAAL,EAA3F,CAAQ2B,OAAR,kBAAQA,OAAR,CAAiBC,OAAjB,kBAAiBA,OAAjB,CAA0BC,MAA1B,kBAA0BA,MAA1B,CAAkCC,aAAlC,kBAAkCA,aAAlC,CAAiDC,iBAAjD,kBAAiDA,iBAAjD,CAAoEC,kBAApE,kBAAoEA,kBAApE;;AAEA,UAAMC,MAAM,GAAGV,IAAI,KAAK,GAAT,GAAeK,OAAf,GAAyBD,OAAxC;;AAEA;AACE,qCAAC,oBAAD;AACE,UAAA,IAAI,EAAEJ,IADR;AAEE,UAAA,GAAG,EAAEC,YAFP;AAGE,UAAA,MAAM,EAAEK,MAHV;AAIE,UAAA,mBAAmB,EAAE,MAAKK,uBAJ5B;AAKE,UAAA,MAAM,EAAED,MALV;AAME,UAAA,aAAa,EAAEH,aANjB;AAOE,UAAA,iBAAiB,EAAEC,iBAPrB;AAQE,UAAA,kBAAkB,EAAEC,kBARtB,GADF;;;AAYD,K;;AAEOE,IAAAA,uB,GAA0B,UAACC,WAAD,EAAoCZ,IAApC,EAAyD;AACzF,UAAI,CAAC,MAAKa,OAAN,IAAiB,CAAC,MAAKC,OAA3B,EAAoC;AAClC;AACD;;AAED,UAAId,IAAI,KAAK,GAAb,EAAkB;AAChB,YAAMe,YAAY,GAAG,oDAA6BH,WAA7B,CAArB;;AAEA,cAAKhC,KAAL,CAAWoC,oBAAX,0BAAKpC,KAAL,CAAWoC,oBAAX,CAAkCD,YAAlC;AACA;AACD;;AAED,UAAME,YAAY,GAAG,oDAA6BL,WAA7B,CAArB;;AAEA,YAAKhC,KAAL,CAAWsC,mBAAX,0BAAKtC,KAAL,CAAWsC,mBAAX,CAAiCD,YAAjC;AACA,YAAKrC,KAAL,CAAWuC,oBAAX,0BAAKvC,KAAL,CAAWuC,oBAAX,CAAkCF,YAAlC;AACD,K;;AAEOd,IAAAA,a,GAAgB,UAACiB,SAAD,EAAoC;AAC1D,YAAKP,OAAL,GAAeO,SAAf;AACD,K;;AAEOlB,IAAAA,a,GAAgB,UAACkB,SAAD,EAAoC;AAC1D,YAAKN,OAAL,GAAeM,SAAf;AACD,K;;AAEOzB,IAAAA,Q,GAAW,UAAC0B,OAAD,EAAiC;AAClD,UAAI,CAAC,MAAK/C,KAAN,IAAe+C,OAAf,IAA0B,MAAK5C,QAAL,GAAgB6C,mBAA9C,EAAmE;AACjED,QAAAA,OAAO,CAACE,gBAAR,CAAyB,OAAzB,EAAkC,MAAKC,sBAAvC,EAA+D,EAAEC,OAAO,EAAE,KAAX,EAA/D;AACD;AACD,UAAI,MAAKnD,KAAL,IAAc,CAAC+C,OAAnB,EAA4B;AAC1B,cAAK/C,KAAL,CAAWoD,mBAAX,CAA+B,OAA/B,EAAwC,MAAKF,sBAA7C;AACD;AACD,YAAKlD,KAAL,GAAa+C,OAAb;AACD,K;;AAEOtB,IAAAA,kB,GAAqB,UAAC4B,KAAD,EAA0C;AACrE,6BAAKd,OAAL,mCAAce,MAAd,CAAqBD,KAArB;AACA,6BAAKb,OAAL,mCAAcc,MAAd,CAAqBD,KAArB;;AAEA,YAAK/C,KAAL,CAAWiD,QAAX,0BAAKjD,KAAL,CAAWiD,QAAX,CAAsBF,KAAtB;AACA,UAAI,MAAKlD,QAAL,GAAgB6C,mBAApB,EAAyC;AACvCK,QAAAA,KAAK,CAACG,cAAN;AACA;AACD;AACDC,MAAAA,YAAY,CAACC,IAAb;AACD,K;;AAEOR,IAAAA,sB,GAAyB,UAACG,KAAD,EAAkB;AACjD,UAAI,CAAC,MAAKrD,KAAN,IAAe,EAAEqD,KAAK,YAAYM,UAAnB,CAAnB,EAAmD;AACjD;AACD;;AAED,UAAMjC,IAAgB,GAAG2B,KAAK,CAACO,QAAN,GAAiB,GAAjB,GAAuB,GAAhD;;AAEA,UAAI,MAAKC,YAAL,CAAkBnC,IAAlB,CAAJ,EAA6B;AAC3B,oCAA8BoC,4CAA0BpC,IAA1B,CAA9B,CAAQqC,GAAR,yBAAQA,GAAR,CAAaC,IAAb,yBAAaA,IAAb,CAAmB5B,MAAnB,yBAAmBA,MAAnB;;AAEA,YAAIiB,KAAK,CAACY,MAAN,GAAe,CAAf,IAAoB,MAAKjE,KAAL,CAAWgE,IAAX,KAAoB,MAAKhE,KAAL,CAAW+D,GAAX,IAAkB,MAAK/D,KAAL,CAAWoC,MAAX,CAA9D,EAAkF;AAChFiB,UAAAA,KAAK,CAACG,cAAN;AACA,iBAAO,KAAP;AACD;AACD,YAAIH,KAAK,CAACY,MAAN,GAAe,CAAf,IAAoB,MAAKjE,KAAL,CAAW+D,GAAX,KAAmB,CAA3C,EAA8C;AAC5CV,UAAAA,KAAK,CAACG,cAAN;AACA,iBAAO,KAAP;AACD;AACF;AACF,K;;AAEOrC,IAAAA,e,GAAkB,UAACkC,KAAD,EAA6C;AACrE,UAAMa,KAAK,GAAG,4BAAWb,KAAK,CAACc,aAAjB,EAAgCD,KAAhC,GAAwCb,KAAK,CAACe,KAA5D;AACA,UAAMC,MAAM,GAAG,4BAAWhB,KAAK,CAACc,aAAjB,EAAgCE,MAAhC,GAAyChB,KAAK,CAACiB,KAA9D;;AAEA,8BAAK/B,OAAL,oCAAcgC,QAAd,CAAuBL,KAAK,IAAI,EAAhC;AACA,8BAAK1B,OAAL,oCAAc+B,QAAd,CAAuBL,KAAK,IAAI,EAAT,IAAeG,MAAM,IAAI,EAAhD;AACD,K;;AAEOjD,IAAAA,gB,GAAmB,YAAM;AAC/B,8BAAKmB,OAAL,oCAAcgC,QAAd,CAAuB,KAAvB;AACA,8BAAK/B,OAAL,oCAAc+B,QAAd,CAAuB,KAAvB;AACD,K,6DA7NMC,iB,GAAP,6BAA2B,oCACzB,uBAAKhC,OAAL,oCAAciC,eAAd,CAA8B,KAAKzE,KAAnC,EACA,uBAAKuC,OAAL,oCAAckC,eAAd,CAA8B,KAAKzE,KAAnC,EACD,C,QAEM0E,kB,GAAP,4BAA0BC,SAA1B,EAA2D,CACzD,IAAM3B,mBAAmB,GAAG,KAAK7C,QAAL,GAAgB6C,mBAA5C,CACA,IAAI,KAAKhD,KAAT,EAAgB,CACd,IAAI2E,SAAS,CAAC3B,mBAAV,IAAiC,CAACA,mBAAtC,EAA2D,CACzD,KAAKhD,KAAL,CAAWoD,mBAAX,CAA+B,OAA/B,EAAwC,KAAKF,sBAA7C,EACD,CACD,IAAI,CAACyB,SAAS,CAAC3B,mBAAX,IAAkCA,mBAAtC,EAA2D,CACzD,KAAKhD,KAAL,CAAWiD,gBAAX,CAA4B,OAA5B,EAAqC,KAAKC,sBAA1C,EAAkE,EAAEC,OAAO,EAAE,KAAX,EAAlE,EACD,CACF,CACF,C,EA0CD;AACF;AACA;AACA,K,OACSyB,Q,GAAP,kBAAgB7B,OAAhB,EAAgD,CAC9C,IAAI,CAACA,OAAD,IAAY,CAAC,KAAK/C,KAAtB,EAA6B,CAC3B,OACD,CAED,KAAKA,KAAL,CAAW6E,UAAX,GAAwB9B,OAAO,CAAC+B,UAAhC,CACA,KAAK9E,KAAL,CAAW+E,SAAX,GAAuB,wCAAiBhC,OAAjB,EAA0B,KAAK/C,KAA/B,CAAvB,CACD,C,CAED;AACF;AACA,K,QACSgF,W,GAAP,uBAAqB,CACnB,IAAI,CAAC,KAAKhF,KAAV,EAAiB,CACf,OACD,CACD,KAAKA,KAAL,CAAW+E,SAAX,GAAuB,CAAvB,CACD,C,CAED;AACF;AACA,K,QACSE,c,GAAP,0BAAwB,CACtB,IAAI,CAAC,KAAKjF,KAAV,EAAiB,CACf,OACD,CACD,KAAKA,KAAL,CAAW+E,SAAX,GAAuB,KAAK/E,KAAL,CAAWkF,YAAX,GAA0B,KAAKlF,KAAL,CAAWmF,YAA5D,CACD,C,CAED;AACF;AACA,K,QACSC,Y,GAAP,wBAAsB,CACpB,IAAI,CAAC,KAAKpF,KAAV,EAAiB,CACf,OACD,CACD,KAAKA,KAAL,CAAW6E,UAAX,GAAwB,CAAxB,CACD,C,CAED;AACF;AACA,K,QACSQ,a,GAAP,yBAAuB,CACrB,IAAI,CAAC,KAAKrF,KAAV,EAAiB,CACf,OACD,CAED,KAAKA,KAAL,CAAW6E,UAAX,GAAwB,KAAK7E,KAAL,CAAWsF,WAAX,GAAyB,KAAKtF,KAAL,CAAWuF,WAA5D,CACD,C,QAEO1B,Y,GAAR,sBAAqBnC,IAArB,EAAuC,CACrC,IAAI,CAAC,KAAK1B,KAAV,EAAiB,CACf,OAAO,KAAP,CACD,CAED,OAAO0B,IAAI,KAAK,GAAT,GACH,KAAK1B,KAAL,CAAWuF,WAAX,GAAyB,KAAKvF,KAAL,CAAWsF,WADjC,GAEH,KAAKtF,KAAL,CAAWmF,YAAX,GAA0B,KAAKnF,KAAL,CAAWkF,YAFzC,CAGD,C,0BAnJkCM,eAAMC,S,WAC3BC,mB,GAAsB,iB,UAEtBC,S,GAAY,EACxB3D,MAAM,EAAE4D,mBAAUC,IADM,EAExBhF,QAAQ,EAAE+E,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,MAA7B,CAApB,CAFc,EAGxBpF,SAAS,EAAEgF,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,MAA7B,CAApB,CAHa,EAIxBrF,eAAe,EAAEiF,mBAAUK,KAAV,CAAgB,CAAC,MAAD,EAAS,QAAT,CAAhB,CAJO,EAKxBjD,mBAAmB,EAAE4C,mBAAUC,IALP,EAMxBjD,mBAAmB,EAAEgD,mBAAUM,IANP,E,UASZ9F,Y,GAA6B,EACzC4B,MAAM,EAAE,KADiC,EAEzCrB,eAAe,EAAE,MAFwB,EAGzCqC,mBAAmB,EAAE,KAHoB,EAIzCf,aAAa,EAAE,KAJ0B,EAKzCC,iBAAiB,EAAEiE,6BALsB,EAMzChE,kBAAkB,EAAE,GANqB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { scrollSizeParametersNames } from './ScrollContainer.constants';\nimport {\n getScrollYOffset,\n convertScrollbarXScrollState,\n convertScrollbarYScrollState,\n} from './ScrollContainer.helpers';\nimport { ScrollAxis, ScrollBar, ScrollBarScrollState } from './ScrollBar';\n\nexport type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';\nexport type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';\nexport type ScrollContainerScrollState = ScrollContainerScrollStateY; // deprecated\nexport type ScrollBehaviour = 'auto' | 'smooth';\n\ntype OffsetCSSPropsY = 'top' | 'right' | 'bottom';\ntype OffsetCSSPropsX = 'right' | 'bottom' | 'left';\n\nexport interface ScrollContainerProps extends CommonProps {\n /**\n * Инвертировать цвет скроллбара\n * @default false\n */\n invert?: boolean;\n maxHeight?: React.CSSProperties['maxHeight'];\n maxWidth?: React.CSSProperties['maxWidth'];\n /**\n * @default false\n */\n preventWindowScroll?: boolean;\n /**\n * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n * @default 'auto'\n */\n scrollBehaviour?: ScrollBehaviour;\n onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;\n onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;\n onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void; // deprecated\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n /**\n * Отключение кастомного скролла\n */\n disabled?: boolean;\n /**\n * Смещение вертикального скроллбара\n */\n offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;\n /**\n * Смещение горизонтального скроллбара\n */\n offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;\n /**\n * Скрывать скроллбар при отсутствии активности пользователя\n */\n hideScrollBar?: boolean;\n /**\n * Задержка перед скрытием скроллбара, ms. Работает только если `hideScrollBar = true`\n */\n hideScrollBarDelay?: number;\n /**\n * Отключить анимации\n */\n disableAnimations?: boolean;\n}\n\nexport const ScrollContainerDataTids = {\n root: 'ScrollContainer__root',\n inner: 'ScrollContainer__inner',\n} as const;\n\ntype DefaultProps = Required<\n Pick<\n ScrollContainerProps,\n 'invert' | 'scrollBehaviour' | 'preventWindowScroll' | 'hideScrollBar' | 'disableAnimations' | 'hideScrollBarDelay'\n >\n>;\n\n@rootNode\nexport class ScrollContainer extends React.Component<ScrollContainerProps> {\n public static __KONTUR_REACT_UI__ = 'ScrollContainer';\n\n public static propTypes = {\n invert: PropTypes.bool,\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\n preventWindowScroll: PropTypes.bool,\n onScrollStateChange: PropTypes.func,\n };\n\n public static defaultProps: DefaultProps = {\n invert: false,\n scrollBehaviour: 'auto',\n preventWindowScroll: false,\n hideScrollBar: false,\n disableAnimations: isTestEnv,\n hideScrollBarDelay: 500,\n };\n\n private getProps = createPropsGetter(ScrollContainer.defaultProps);\n\n private scrollX: Nullable<ScrollBar>;\n private scrollY: Nullable<ScrollBar>;\n private inner: Nullable<HTMLElement>;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.scrollX?.setInnerElement(this.inner);\n this.scrollY?.setInnerElement(this.inner);\n }\n\n public componentDidUpdate(prevProps: ScrollContainerProps) {\n const preventWindowScroll = this.getProps().preventWindowScroll;\n if (this.inner) {\n if (prevProps.preventWindowScroll && !preventWindowScroll) {\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n }\n if (!prevProps.preventWindowScroll && preventWindowScroll) {\n this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n }\n }\n }\n\n public render = () => {\n const props = this.props;\n\n if (this.props.disabled) {\n return this.props.children;\n }\n\n const innerStyle: React.CSSProperties = {\n scrollBehavior: this.getProps().scrollBehaviour,\n maxHeight: props.maxHeight,\n maxWidth: props.maxWidth,\n };\n\n const scrollbarY = this.renderScrollbar('y');\n const scrollbarX = this.renderScrollbar('x');\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={ScrollContainerDataTids.root}\n className={styles.root()}\n onMouseMove={this.handleMouseMove}\n onMouseLeave={this.handleMouseLeave}\n >\n {scrollbarY}\n {scrollbarX}\n <div\n style={innerStyle}\n ref={this.refInner}\n className={cx(styles.inner(), globalClasses.inner, isIE11 && styles.innerIE11())}\n data-tid={ScrollContainerDataTids.inner}\n onScroll={this.handleNativeScroll}\n >\n {props.children}\n </div>\n </div>\n </CommonWrapper>\n );\n };\n\n /**\n * @public\n * @param {Element} element\n */\n public scrollTo(element: Nullable<HTMLElement>) {\n if (!element || !this.inner) {\n return;\n }\n\n this.inner.scrollLeft = element.offsetLeft;\n this.inner.scrollTop = getScrollYOffset(element, this.inner);\n }\n\n /**\n * @public\n */\n public scrollToTop() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollTop = 0;\n }\n\n /**\n * @public\n */\n public scrollToBottom() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\n }\n\n /**\n * @public\n */\n public scrollToLeft() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollLeft = 0;\n }\n\n /**\n * @public\n */\n public scrollToRight() {\n if (!this.inner) {\n return;\n }\n\n this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;\n }\n\n private hasScrollBar(axis: ScrollAxis) {\n if (!this.inner) {\n return false;\n }\n\n return axis === 'x'\n ? this.inner.offsetWidth < this.inner.scrollWidth\n : this.inner.offsetHeight < this.inner.scrollHeight;\n }\n\n private renderScrollbar = (axis: ScrollAxis) => {\n const refScrollBar = axis === 'x' ? this.refScrollBarX : this.refScrollBarY;\n const { offsetY, offsetX, invert, hideScrollBar, disableAnimations, hideScrollBarDelay } = this.getProps();\n\n const offset = axis === 'x' ? offsetX : offsetY;\n\n return (\n <ScrollBar\n axis={axis}\n ref={refScrollBar}\n invert={invert}\n onScrollStateChange={this.handleScrollStateChange}\n offset={offset}\n hideScrollBar={hideScrollBar}\n disableAnimations={disableAnimations}\n hideScrollBarDelay={hideScrollBarDelay}\n />\n );\n };\n\n private handleScrollStateChange = (scrollState: ScrollBarScrollState, axis: ScrollAxis) => {\n if (!this.scrollY || !this.scrollX) {\n return;\n }\n\n if (axis === 'x') {\n const scrollXState = convertScrollbarXScrollState(scrollState);\n\n this.props.onScrollStateChangeX?.(scrollXState);\n return;\n }\n\n const scrollYState = convertScrollbarYScrollState(scrollState);\n\n this.props.onScrollStateChange?.(scrollYState);\n this.props.onScrollStateChangeY?.(scrollYState);\n };\n\n private refScrollBarY = (scrollbar: Nullable<ScrollBar>) => {\n this.scrollY = scrollbar;\n };\n\n private refScrollBarX = (scrollbar: Nullable<ScrollBar>) => {\n this.scrollX = scrollbar;\n };\n\n private refInner = (element: HTMLElement | null) => {\n if (!this.inner && element && this.getProps().preventWindowScroll) {\n element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n }\n if (this.inner && !element) {\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n }\n this.inner = element;\n };\n\n private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\n this.scrollY?.reflow(event);\n this.scrollX?.reflow(event);\n\n this.props.onScroll?.(event);\n if (this.getProps().preventWindowScroll) {\n event.preventDefault();\n return;\n }\n LayoutEvents.emit();\n };\n\n private handleInnerScrollWheel = (event: Event) => {\n if (!this.inner || !(event instanceof WheelEvent)) {\n return;\n }\n\n const axis: ScrollAxis = event.shiftKey ? 'x' : 'y';\n\n if (this.hasScrollBar(axis)) {\n const { pos, size, offset } = scrollSizeParametersNames[axis];\n\n if (event.deltaY > 0 && this.inner[size] <= this.inner[pos] + this.inner[offset]) {\n event.preventDefault();\n return false;\n }\n if (event.deltaY < 0 && this.inner[pos] <= 0) {\n event.preventDefault();\n return false;\n }\n }\n };\n\n private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const right = getDOMRect(event.currentTarget).right - event.pageX;\n const bottom = getDOMRect(event.currentTarget).bottom - event.pageY;\n\n this.scrollY?.setHover(right <= 12);\n this.scrollX?.setHover(right >= 12 && bottom <= 12);\n };\n\n private handleMouseLeave = () => {\n this.scrollY?.setHover(false);\n this.scrollX?.setHover(false);\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["ScrollContainer.tsx"],"names":["ScrollContainerDataTids","root","inner","ScrollContainer","rootNode","getProps","defaultProps","render","props","disabled","children","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","setRootNode","styles","handleMouseMove","handleMouseLeave","refInner","globalClasses","isIE11","innerIE11","handleNativeScroll","axis","refScrollBar","refScrollBarX","refScrollBarY","offsetY","offsetX","invert","hideScrollBar","disableAnimations","hideScrollBarDelay","offset","handleScrollStateChange","scrollState","scrollY","scrollX","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","LayoutEvents","emit","WheelEvent","shiftKey","hasScrollBar","scrollSizeParametersNames","pos","size","deltaY","right","currentTarget","pageX","bottom","pageY","setHover","updateInnerElement","setInnerElement","componentDidMount","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","string","number","oneOf","func","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { scrollSizeParametersNames } from './ScrollContainer.constants';\nimport {\n getScrollYOffset,\n convertScrollbarXScrollState,\n convertScrollbarYScrollState,\n} from './ScrollContainer.helpers';\nimport { ScrollAxis, ScrollBar, ScrollBarScrollState } from './ScrollBar';\n\nexport type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';\nexport type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';\nexport type ScrollContainerScrollState = ScrollContainerScrollStateY; // deprecated\nexport type ScrollBehaviour = 'auto' | 'smooth';\n\ntype OffsetCSSPropsY = 'top' | 'right' | 'bottom';\ntype OffsetCSSPropsX = 'right' | 'bottom' | 'left';\n\nexport interface ScrollContainerProps extends CommonProps {\n /**\n * Инвертировать цвет скроллбара\n * @default false\n */\n invert?: boolean;\n maxHeight?: React.CSSProperties['maxHeight'];\n maxWidth?: React.CSSProperties['maxWidth'];\n /**\n * @default false\n */\n preventWindowScroll?: boolean;\n /**\n * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n * @default 'auto'\n */\n scrollBehaviour?: ScrollBehaviour;\n onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;\n onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;\n onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void; // deprecated\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n /**\n * Отключение кастомного скролла\n */\n disabled?: boolean;\n /**\n * Смещение вертикального скроллбара\n */\n offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;\n /**\n * Смещение горизонтального скроллбара\n */\n offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;\n /**\n * Скрывать скроллбар при отсутствии активности пользователя\n */\n hideScrollBar?: boolean;\n /**\n * Задержка перед скрытием скроллбара, ms. Работает только если `hideScrollBar = true`\n */\n hideScrollBarDelay?: number;\n /**\n * Отключить анимации\n */\n disableAnimations?: boolean;\n}\n\nexport const ScrollContainerDataTids = {\n root: 'ScrollContainer__root',\n inner: 'ScrollContainer__inner',\n} as const;\n\ntype DefaultProps = Required<\n Pick<\n ScrollContainerProps,\n 'invert' | 'scrollBehaviour' | 'preventWindowScroll' | 'hideScrollBar' | 'disableAnimations' | 'hideScrollBarDelay'\n >\n>;\n\n@rootNode\nexport class ScrollContainer extends React.Component<ScrollContainerProps> {\n public static __KONTUR_REACT_UI__ = 'ScrollContainer';\n\n public static propTypes = {\n invert: PropTypes.bool,\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\n preventWindowScroll: PropTypes.bool,\n onScrollStateChange: PropTypes.func,\n };\n\n public static defaultProps: DefaultProps = {\n invert: false,\n scrollBehaviour: 'auto',\n preventWindowScroll: false,\n hideScrollBar: false,\n disableAnimations: isTestEnv,\n hideScrollBarDelay: 500,\n };\n\n private getProps = createPropsGetter(ScrollContainer.defaultProps);\n\n private scrollX: Nullable<ScrollBar>;\n private scrollY: Nullable<ScrollBar>;\n private inner: Nullable<HTMLElement>;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.updateInnerElement();\n }\n\n public componentDidUpdate(prevProps: ScrollContainerProps) {\n const preventWindowScroll = this.getProps().preventWindowScroll;\n if (this.inner) {\n if (prevProps.preventWindowScroll && !preventWindowScroll) {\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n }\n if (!prevProps.preventWindowScroll && preventWindowScroll) {\n this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n }\n }\n\n if (prevProps.disabled !== this.props.disabled && !this.props.disabled) {\n this.updateInnerElement();\n }\n }\n\n public render = () => {\n const props = this.props;\n\n if (this.props.disabled) {\n return this.props.children;\n }\n\n const innerStyle: React.CSSProperties = {\n scrollBehavior: this.getProps().scrollBehaviour,\n maxHeight: props.maxHeight,\n maxWidth: props.maxWidth,\n };\n\n const scrollbarY = this.renderScrollbar('y');\n const scrollbarX = this.renderScrollbar('x');\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={ScrollContainerDataTids.root}\n className={styles.root()}\n onMouseMove={this.handleMouseMove}\n onMouseLeave={this.handleMouseLeave}\n >\n {scrollbarY}\n {scrollbarX}\n <div\n style={innerStyle}\n ref={this.refInner}\n className={cx(styles.inner(), globalClasses.inner, isIE11 && styles.innerIE11())}\n data-tid={ScrollContainerDataTids.inner}\n onScroll={this.handleNativeScroll}\n >\n {props.children}\n </div>\n </div>\n </CommonWrapper>\n );\n };\n\n /**\n * @public\n * @param {Element} element\n */\n public scrollTo(element: Nullable<HTMLElement>) {\n if (!element || !this.inner) {\n return;\n }\n\n this.inner.scrollLeft = element.offsetLeft;\n this.inner.scrollTop = getScrollYOffset(element, this.inner);\n }\n\n /**\n * @public\n */\n public scrollToTop() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollTop = 0;\n }\n\n /**\n * @public\n */\n public scrollToBottom() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\n }\n\n /**\n * @public\n */\n public scrollToLeft() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollLeft = 0;\n }\n\n /**\n * @public\n */\n public scrollToRight() {\n if (!this.inner) {\n return;\n }\n\n this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;\n }\n\n private hasScrollBar(axis: ScrollAxis) {\n if (!this.inner) {\n return false;\n }\n\n return axis === 'x'\n ? this.inner.offsetWidth < this.inner.scrollWidth\n : this.inner.offsetHeight < this.inner.scrollHeight;\n }\n\n private renderScrollbar = (axis: ScrollAxis) => {\n const refScrollBar = axis === 'x' ? this.refScrollBarX : this.refScrollBarY;\n const { offsetY, offsetX, invert, hideScrollBar, disableAnimations, hideScrollBarDelay } = this.getProps();\n\n const offset = axis === 'x' ? offsetX : offsetY;\n\n return (\n <ScrollBar\n axis={axis}\n ref={refScrollBar}\n invert={invert}\n onScrollStateChange={this.handleScrollStateChange}\n offset={offset}\n hideScrollBar={hideScrollBar}\n disableAnimations={disableAnimations}\n hideScrollBarDelay={hideScrollBarDelay}\n />\n );\n };\n\n private handleScrollStateChange = (scrollState: ScrollBarScrollState, axis: ScrollAxis) => {\n if (!this.scrollY || !this.scrollX) {\n return;\n }\n\n if (axis === 'x') {\n const scrollXState = convertScrollbarXScrollState(scrollState);\n\n this.props.onScrollStateChangeX?.(scrollXState);\n return;\n }\n\n const scrollYState = convertScrollbarYScrollState(scrollState);\n\n this.props.onScrollStateChange?.(scrollYState);\n this.props.onScrollStateChangeY?.(scrollYState);\n };\n\n private refScrollBarY = (scrollbar: Nullable<ScrollBar>) => {\n this.scrollY = scrollbar;\n };\n\n private refScrollBarX = (scrollbar: Nullable<ScrollBar>) => {\n this.scrollX = scrollbar;\n };\n\n private refInner = (element: HTMLElement | null) => {\n if (!this.inner && element && this.getProps().preventWindowScroll) {\n element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n }\n if (this.inner && !element) {\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n }\n this.inner = element;\n };\n\n private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\n this.scrollY?.reflow(event);\n this.scrollX?.reflow(event);\n\n this.props.onScroll?.(event);\n if (this.getProps().preventWindowScroll) {\n event.preventDefault();\n return;\n }\n LayoutEvents.emit();\n };\n\n private handleInnerScrollWheel = (event: Event) => {\n if (!this.inner || !(event instanceof WheelEvent)) {\n return;\n }\n\n const axis: ScrollAxis = event.shiftKey ? 'x' : 'y';\n\n if (this.hasScrollBar(axis)) {\n const { pos, size, offset } = scrollSizeParametersNames[axis];\n\n if (event.deltaY > 0 && this.inner[size] <= this.inner[pos] + this.inner[offset]) {\n event.preventDefault();\n return false;\n }\n if (event.deltaY < 0 && this.inner[pos] <= 0) {\n event.preventDefault();\n return false;\n }\n }\n };\n\n private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const right = getDOMRect(event.currentTarget).right - event.pageX;\n const bottom = getDOMRect(event.currentTarget).bottom - event.pageY;\n\n this.scrollY?.setHover(right <= 12);\n this.scrollX?.setHover(right >= 12 && bottom <= 12);\n };\n\n private handleMouseLeave = () => {\n this.scrollY?.setHover(false);\n this.scrollX?.setHover(false);\n };\n\n private updateInnerElement = () => {\n this.scrollX?.setInnerElement(this.inner);\n this.scrollY?.setInnerElement(this.inner);\n };\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { AriaAttributes, HTMLAttributes } from 'react';
|
|
2
2
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
3
3
|
import { SidePageBody } from './SidePageBody';
|
|
4
4
|
import { SidePageContainer } from './SidePageContainer';
|
|
5
5
|
import { SidePageFooter } from './SidePageFooter';
|
|
6
6
|
import { SidePageHeader } from './SidePageHeader';
|
|
7
|
-
export interface SidePageProps extends CommonProps {
|
|
7
|
+
export interface SidePageProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label'> {
|
|
8
8
|
/**
|
|
9
9
|
* Добавить блокирующий фон, когда сайдпейдж открыт
|
|
10
10
|
*/
|
|
@@ -62,7 +62,7 @@ export declare const SidePageDataTids: {
|
|
|
62
62
|
readonly root: "SidePage__root";
|
|
63
63
|
readonly container: "SidePage__container";
|
|
64
64
|
};
|
|
65
|
-
declare type DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'disableFocusLock' | 'offset'>>;
|
|
65
|
+
declare type DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'disableFocusLock' | 'offset' | 'role'>>;
|
|
66
66
|
/**
|
|
67
67
|
* Сайдпейдж
|
|
68
68
|
*
|
|
@@ -87,6 +87,9 @@ var _SidePage = require("./SidePage.styles");function _getRequireWildcardCache(n
|
|
|
87
87
|
|
|
88
88
|
|
|
89
89
|
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
90
93
|
|
|
91
94
|
|
|
92
95
|
|
|
@@ -156,6 +159,7 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
156
159
|
|
|
157
160
|
|
|
158
161
|
|
|
162
|
+
|
|
159
163
|
getProps = (0, _createPropsGetter.createPropsGetter)(SidePage.defaultProps);_this.
|
|
160
164
|
|
|
161
165
|
|
|
@@ -249,6 +253,9 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
249
253
|
|
|
250
254
|
|
|
251
255
|
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
252
259
|
|
|
253
260
|
|
|
254
261
|
|
|
@@ -374,4 +381,4 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
374
381
|
};return _this;}var _proto = SidePage.prototype;_proto.componentDidMount = function componentDidMount() {window.addEventListener('keydown', this.handleKeyDown);this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);};_proto.componentWillUnmount = function componentWillUnmount() {window.removeEventListener('keydown', this.handleKeyDown);if ((0, _utils.isNonNullable)(this.stackSubscription)) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);} /**
|
|
375
382
|
* Обновляет разметку компонента.
|
|
376
383
|
* @public
|
|
377
|
-
*/;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$props = this.props,blockBackground = _this$props.blockBackground,onOpened = _this$props.onOpened;var disableAnimations = this.getProps().disableAnimations;return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isMobile && blockBackground && _this3.renderShadow(), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { in: true, classNames: _this3.getTransitionNames(), appear: !disableAnimations, enter: !disableAnimations, exit: false, timeout: { enter: TRANSITION_TIMEOUT, exit: TRANSITION_TIMEOUT }, nodeRef: _this3.rootRef, onEntered: onOpened }, _this3.renderContainer(isMobile)), isMobile && /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null));}))));};_proto.renderContainer = function renderContainer(isMobile) {var _cx, _cx2;var _this$props2 = this.props,width = _this$props2.width,blockBackground = _this$props2.blockBackground,fromLeft = _this$props2.fromLeft;var _this$getProps = this.getProps(),disableFocusLock = _this$getProps.disableFocusLock,offset = _this$getProps.offset;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', "data-tid": SidePageDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_SidePage.styles.root()] = true, _cx[_SidePage.styles.mobileRoot()] = isMobile, _cx)), onScroll: LayoutEvents.emit, createStackingContext: true, style: isMobile ? undefined : { width: width || (blockBackground ? 800 : 500), right: fromLeft ? 'auto' : offset, left: fromLeft ? offset : 'auto' }, wrapperRef: this.rootRef }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: disableFocusLock || !blockBackground, autoFocus: false, className: _SidePage.styles.focusLock() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.handleClickOutside, active: true }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageDataTids.container, className: (0, _Emotion.cx)(_SidePage.styles.wrapper(this.theme), (_cx2 = {}, _cx2[_SidePage.styles.wrapperLeft()] = fromLeft, _cx2[_SidePage.styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft, _cx2[_SidePage.styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft, _cx2[_SidePage.styles.shadow(this.theme)] = this.state.hasShadow, _cx2)), ref: this.layoutRef }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children)))));};_proto.renderShadow = function renderShadow() {var _cx3;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', className: _SidePage.styles.overlay(), onScroll: LayoutEvents.emit }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, { key: "hbvs" }), /*#__PURE__*/_react.default.createElement("div", { key: "overlay", className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_SidePage.styles.background()] = true, _cx3[_SidePage.styles.backgroundGray(this.theme)] = this.state.hasBackground, _cx3)) }));};_proto.getTransitionNames = function getTransitionNames() {var transition = this.props.fromLeft ? _SidePage.styles.transitionRight : _SidePage.styles.transitionLeft;return { enter: transition(), enterActive: _SidePage.styles.transitionActive(), exit: _SidePage.styles.transitionLeave(), exitActive: _SidePage.styles.transitionLeaveActive(), appear: transition(), appearActive: _SidePage.styles.transitionActive() };};return SidePage;}(_react.default.Component);exports.SidePage = SidePage;SidePage.__KONTUR_REACT_UI__ = 'SidePage';SidePage.Header = _SidePageHeader.SidePageHeader;SidePage.Body = _SidePageBody.SidePageBody;SidePage.Footer = _SidePageFooter.SidePageFooter;SidePage.Container = _SidePageContainer.SidePageContainer;SidePage.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, disableFocusLock: true, offset: 0 };
|
|
384
|
+
*/;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$props = this.props,blockBackground = _this$props.blockBackground,onOpened = _this$props.onOpened;var disableAnimations = this.getProps().disableAnimations;return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isMobile && blockBackground && _this3.renderShadow(), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { in: true, classNames: _this3.getTransitionNames(), appear: !disableAnimations, enter: !disableAnimations, exit: false, timeout: { enter: TRANSITION_TIMEOUT, exit: TRANSITION_TIMEOUT }, nodeRef: _this3.rootRef, onEntered: onOpened }, _this3.renderContainer(isMobile)), isMobile && /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null));}))));};_proto.renderContainer = function renderContainer(isMobile) {var _cx, _cx2;var _this$props2 = this.props,width = _this$props2.width,blockBackground = _this$props2.blockBackground,fromLeft = _this$props2.fromLeft,ariaLabel = _this$props2['aria-label'];var _this$getProps = this.getProps(),disableFocusLock = _this$getProps.disableFocusLock,offset = _this$getProps.offset,role = _this$getProps.role;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { "aria-modal": true, role: role, "aria-label": ariaLabel, priority: 'Sidepage', "data-tid": SidePageDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_SidePage.styles.root()] = true, _cx[_SidePage.styles.mobileRoot()] = isMobile, _cx)), onScroll: LayoutEvents.emit, createStackingContext: true, style: isMobile ? undefined : { width: width || (blockBackground ? 800 : 500), right: fromLeft ? 'auto' : offset, left: fromLeft ? offset : 'auto' }, wrapperRef: this.rootRef }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: disableFocusLock || !blockBackground, autoFocus: false, className: _SidePage.styles.focusLock() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.handleClickOutside, active: true }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageDataTids.container, className: (0, _Emotion.cx)(_SidePage.styles.wrapper(this.theme), (_cx2 = {}, _cx2[_SidePage.styles.wrapperLeft()] = fromLeft, _cx2[_SidePage.styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft, _cx2[_SidePage.styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft, _cx2[_SidePage.styles.shadow(this.theme)] = this.state.hasShadow, _cx2)), ref: this.layoutRef }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children)))));};_proto.renderShadow = function renderShadow() {var _cx3;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', className: _SidePage.styles.overlay(), onScroll: LayoutEvents.emit }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, { key: "hbvs" }), /*#__PURE__*/_react.default.createElement("div", { key: "overlay", className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_SidePage.styles.background()] = true, _cx3[_SidePage.styles.backgroundGray(this.theme)] = this.state.hasBackground, _cx3)) }));};_proto.getTransitionNames = function getTransitionNames() {var transition = this.props.fromLeft ? _SidePage.styles.transitionRight : _SidePage.styles.transitionLeft;return { enter: transition(), enterActive: _SidePage.styles.transitionActive(), exit: _SidePage.styles.transitionLeave(), exitActive: _SidePage.styles.transitionLeaveActive(), appear: transition(), appearActive: _SidePage.styles.transitionActive() };};return SidePage;}(_react.default.Component);exports.SidePage = SidePage;SidePage.__KONTUR_REACT_UI__ = 'SidePage';SidePage.Header = _SidePageHeader.SidePageHeader;SidePage.Body = _SidePageBody.SidePageBody;SidePage.Footer = _SidePageFooter.SidePageFooter;SidePage.Container = _SidePageContainer.SidePageContainer;SidePage.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, disableFocusLock: true, offset: 0, role: 'dialog' };
|