ComposableHeader.tsx

import * as React from 'react'
import * as classNames from 'classnames'
import { StandardProps } from '@alienfast/material-ui'
import { withStyles } from '@alienfast/material-ui/styles'
import Text from '../Text'
import Logger from '../util/Logger'

const decorate = withStyles(
  ({ palette, shadows, transitions }) => ({
    root: {
      // as content
      display: 'flex',
      alignItems: 'center',
      // render above with a drop shadow and no scrollbar
      overflow: 'hidden',
      zIndex: 1,
      backgroundColor: palette.background.appBar,
      transition: transitions.create(['box-shadow'], {
        duration: transitions.duration.shortest,
      }),
    },
    scrolled: {
      boxShadow: shadows[4],
    },
    avatar: {
      flex: '0 0 auto',
      marginRight: 16,
    },
    content: {
      flex: '1 1 auto',
    },
    contentSecondary: {
      lineHeight: 1,
    },
  }),
  { name: 'ui-internal-ComposableHeader' },
)

export interface ComposableHeaderProps
  extends StandardProps<
      React.HTMLAttributes<HTMLElement>,
      'root' | 'scrolled' | 'avatar' | 'content' | 'contentSecondary',
      'title'
    > {
  /**
   * The Avatar for the Card Header.
   */
  avatar?: React.ReactNode
  /**
   * The content of the component.
   */
  subheader?: React.ReactNode
  /**
   * The content of the Card Title.
   */
  title?: React.ReactNode
  /**
   * Interactive content scrolling affects the header's border
   */
  scrolled?: boolean
  /**
   * content component - either from Dialog or Card
   */
  components: {
    content: React.ComponentType<any>
  }
}

/**
 * Originally from material-ui/Card/CardHeader.js
 */
const ComposableHeader = decorate<ComposableHeaderProps>(props => {
  log.debug('render', props)
  const {
    avatar,
    className: classNameProp,
    classes,
    components: { content: Content },
    subheader,
    scrolled,
    title,
    ...other,
  } = props

  const className = classNames(classes.root, { [classes.scrolled]: scrolled }, classNameProp)

  if (React.isValidElement(avatar)) {
    let body
    if (React.isValidElement(subheader)) {
      body = (
        <div className={classes.content}>
          <Text type="body2" gutterBottom>
            {title}
          </Text>
          <Text type="body2" color="secondary" className={classes.contentSecondary}>
            {subheader}
          </Text>
        </div>
      )
    } else {
      // single line much bigger
      body = (
        <div className={classes.content}>
          <Text type="headline">{title}</Text>
        </div>
      )
    }
    return (
      <Content className={className} {...other}>
        <div className={classes.avatar}>{avatar}</div>
        {body}
      </Content>
    )
  }

  return (
    <Content className={className} {...other}>
      <Text type="headline">{title}</Text>
      <Text type="body1" color="secondary">
        {subheader}
      </Text>
    </Content>
  )
})

const log = Logger.get('ComposableHeader')

ComposableHeader.defaultProps = {
  scrolled: true,
}

export default ComposableHeader

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "jsx": "react",
    "lib": [
      "es2016",
      "es2017",
      "dom"
    ],
    "outDir": "build",
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noEmitOnError": true,
    "allowSyntheticDefaultImports": false,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "forceConsistentCasingInFileNames": true,
    "suppressImplicitAnyIndexErrors": true,
    "experimentalDecorators": true,
    "moduleResolution": "node"
  },
  "include": [
    "typings",
    "src"
  ],
  "exclude": [
    "build",
    "node_modules",
    "**/*.spec.ts"
  ]
}