settingsWrapper.tsx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import React from 'react';
  2. import styled from '@emotion/styled';
  3. import {Location} from 'history';
  4. import PropTypes from 'prop-types';
  5. import space from 'app/styles/space';
  6. import {Organization, Project} from 'app/types';
  7. import withLatestContext from 'app/utils/withLatestContext';
  8. import ScrollToTop from 'app/views/settings/components/scrollToTop';
  9. type Props = {
  10. location: Location;
  11. organization?: Organization;
  12. project?: Project;
  13. };
  14. type State = {
  15. lastAppContext: 'project' | 'organization' | null;
  16. };
  17. class SettingsWrapper extends React.Component<Props, State> {
  18. static childContextTypes = {
  19. lastAppContext: PropTypes.oneOf(['project', 'organization']),
  20. };
  21. // save current context
  22. state: State = {
  23. lastAppContext: this.getLastAppContext(),
  24. };
  25. getChildContext() {
  26. return {
  27. lastAppContext: this.state.lastAppContext,
  28. };
  29. }
  30. getLastAppContext() {
  31. const {project, organization} = this.props;
  32. if (!!project) {
  33. return 'project';
  34. }
  35. if (!!organization) {
  36. return 'organization';
  37. }
  38. return null;
  39. }
  40. handleShouldDisableScrollToTop = (location: Location, prevLocation: Location) => {
  41. // we do not want to scroll to top when user just perform a search
  42. return (
  43. location.pathname === prevLocation.pathname &&
  44. location.query?.query !== prevLocation.query?.query
  45. );
  46. };
  47. render() {
  48. const {location, children} = this.props;
  49. return (
  50. <StyledSettingsWrapper>
  51. <ScrollToTop location={location} disable={this.handleShouldDisableScrollToTop}>
  52. {children}
  53. </ScrollToTop>
  54. </StyledSettingsWrapper>
  55. );
  56. }
  57. }
  58. export default withLatestContext(SettingsWrapper);
  59. const StyledSettingsWrapper = styled('div')`
  60. display: flex;
  61. flex: 1;
  62. font-size: ${p => p.theme.fontSizeLarge};
  63. color: ${p => p.theme.textColor};
  64. margin-bottom: -${space(3)}; /* to account for footer margin top */
  65. line-height: 1;
  66. .messages-container {
  67. margin: 0;
  68. }
  69. `;