Sha256: 3f86409f620315201f15b433fd39e3260e9af2df236cf42dc96a79678cc9d5bf

Contents?: true

Size: 1.02 KB

Versions: 193

Compression:

Stored size: 1.02 KB

Contents

import classnames from 'classnames'
import React, { useContext } from 'react'
import AnimateHeight from 'react-animate-height'
import { buildCss } from '../../utilities/props'
import { globalProps } from '../../utilities/globalProps'

import CollapsibleContext from '../context'

export type CollapsibleContentProps = {
  children?: React.ReactNode[] | React.ReactNode | string,
  className?: string,
  padding?: string,
}

const CollapsibleContent = ({
  children,
  className,
  padding = 'md',
  ...props
}: CollapsibleContentProps) => {
  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
  const contentCSS = buildCss('pb_collapsible_content_kit')
  const contentSpacing = globalProps(props, { padding })

  return (
    <AnimateHeight
        duration={400}
        height={context.collapsed ? 0 : 'auto'}
        id="bottom-section"
    >
      <div className={classnames(contentCSS, className, contentSpacing)}>
        {children}
      </div>
    </AnimateHeight>
  )
}

export default CollapsibleContent

Version data entries

193 entries across 193 versions & 1 rubygems

Version Path
playbook_ui-12.34.0.pre.alpha.fixdialogcloseevents1004 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.34.0.pre.alpha.fixdialogcloseevents1003 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.34.0.pre.alpha.play716popoverkitcloseonclickissue998 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.34.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.33.1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.33.0.pre.alpha.PLAY905reactionbuttons982 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.33.0.pre.alpha.PLAY905reactionbuttons979 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.33.0.pre.alpha.revert2650closedialogonoutsideclick977 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.33.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.32.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0.pre.alpha.hoverrails951 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0.pre.alpha.hoverrails948 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0.pre.alpha.multilevelnopillsdesigns944 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0.pre.alpha.multilevelnopillsdesigns941 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0.pre.alpha.PLAY814removemomentjs935 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0.pre.alpha.PLAY814removemomentjs933 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0.pre.alpha.datepickerdisableddatefix931 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0.pre.alpha.customiconsfa928 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.31.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-12.30.1.pre.alpha.PLAY906multilevelselectedidsprop917 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx