Footer.tsx 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import React, { PureComponent } from 'react';
  2. import PropTypes from 'prop-types';
  3. import cls from 'classnames';
  4. import { strings, cssClasses } from '@douyinfe/semi-foundation/navigation/constants';
  5. import CollapseButton from './CollapseButton';
  6. import '@douyinfe/semi-foundation/navigation/navigation.scss';
  7. import NavContext, { NavContextType } from './nav-context';
  8. import { BaseProps } from '../_base/baseComponent';
  9. export interface NavFooterProps extends BaseProps {
  10. collapseButton?: React.ReactNode;
  11. collapseText?: (collapsed?: boolean) => React.ReactNode;
  12. }
  13. export default class NavFooter extends PureComponent<NavFooterProps> {
  14. static contextType = NavContext;
  15. static propTypes = {
  16. children: PropTypes.node,
  17. style: PropTypes.object,
  18. className: PropTypes.string,
  19. collapseButton: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
  20. collapseText: PropTypes.func,
  21. };
  22. static defaultProps = {
  23. collapseButton: false,
  24. };
  25. context: NavContextType;
  26. renderCollapseButton = () => {
  27. const { collapseButton, collapseText } = this.props;
  28. if (React.isValidElement(collapseButton)) {
  29. return collapseButton;
  30. }
  31. const { onCollapseChange, prefixCls, locale, isCollapsed } = this.context;
  32. return (
  33. <CollapseButton
  34. prefixCls={prefixCls}
  35. isCollapsed={isCollapsed}
  36. locale={locale}
  37. onClick={onCollapseChange}
  38. collapseText={collapseText}
  39. {...collapseButton}
  40. />
  41. );
  42. };
  43. render() {
  44. const { style, className, collapseButton } = this.props;
  45. let { children } = this.props;
  46. const { isCollapsed, mode } = this.context;
  47. if (!React.isValidElement(children) && collapseButton && mode !== strings.MODE_HORIZONTAL) {
  48. children = this.renderCollapseButton();
  49. }
  50. const wrapCls = cls(className, `${cssClasses.PREFIX}-footer`, {
  51. [`${cssClasses.PREFIX}-footer-collapsed`]: isCollapsed,
  52. });
  53. return (
  54. <div className={wrapCls} style={style}>
  55. {children}
  56. </div>
  57. );
  58. }
  59. }