How to use rc-collapse - 9 common examples

/* eslint-disable consistent-return */

import React from 'react'
import RcCollapse from 'rc-collapse'
import styled from 'styled-components'

import { switchTransition } from 'utils/transitions'

const PanelStyled = styled(RcCollapse.Panel)`
  .rc-collapse-anim {
    overflow: hidden;
  }

  .rc-collapse-content {
    ${switchTransition}
  }

  .rc-collapse-content.rc-collapse-content-inactive {
    display: none;
  }

  .rc-collapse-header:focus {
    outline: none;
  }
`

const requireConfig = {
  url: 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js',
  paths: {
    'vs': '/libs/monaco/0.8.0/vs'
  }
};

// Synchronous highlighting with highlight.js
marked.setOptions({
  highlight: function (code) {
    return Prism.highlight(code, Prism.languages['jsx']);
  }
});

const resizeEvent = new Event('resize');
const Panel = Collapse.Panel;
const container = style({
  width: '100%',
  height: '100%',
  overflow: 'auto',
  background: 'white',
  $nest: {
    '.rc-collapse': {
      border: '0px!important'
    },
  },
  borderRight: 'solid 1px #dedede'
});

const content = style({
  width: '100%',
  height: '100%',

import RcCollapse from 'rc-collapse'
import Panel from './Panel'

RcCollapse.Panel = Panel

export default RcCollapse

if (React.isValidElement(header)) {
    wrappedHeader = React.cloneElement(header, {
      isActive: props.isActive,
    })
  }

  return (
    
  )
}

Panel.propTypes = RcCollapse.Panel.propTypes
Panel.defaultProps = {
  showArrow: false,
}

export default Panel

prefixCls = _props.prefixCls,
                _props$className = _props.className,
                className = _props$className === undefined ? '' : _props$className,
                bordered = _props.bordered;

            var collapseClassName = classNames(_defineProperty({}, prefixCls + '-borderless', !bordered), className);
            return React.createElement(RcCollapse, _extends({}, this.props, { className: collapseClassName }));
        }
    }]);

    return Collapse;
}(React.Component);

export default Collapse;

Collapse.Panel = RcCollapse.Panel;
Collapse.defaultProps = {
    prefixCls: 'ant-collapse',
    bordered: true,
    openAnimation: _extends({}, animation, {
        appear: function appear() {}
    })
};

/**
 * Collapse Component for tingle
 * @author 
 *
 * Copyright 2014-2016, Tingle Team.
 * All rights reserved.
 */
import React from 'react';
import RcCollapse from 'rc-collapse';
import assign from 'object-assign';

class Collapse extends RcCollapse {}

Collapse.displayName = 'tingle-collapse';
Collapse.propTypes = RcCollapse.propTypes;
Collapse.defaultProps = assign({}, RcCollapse.defaultProps, {
  prefixCls: 'tingle-collapse',
});

export default Collapse;

/**
 * Collapse Component for SaltUI
 * @author
 *
 * Copyright 2018-2019, SaltUI Team.
 * All rights reserved.
 */
import RcCollapse from 'rc-collapse';
import assign from 'object-assign';
import Context from '../Context';

class Collapse extends RcCollapse {}

Collapse.displayName = 'Collapse';
Collapse.propTypes = RcCollapse.propTypes;
Collapse.defaultProps = assign({}, RcCollapse.defaultProps, {
  prefixCls: Context.prefixClass('collapse'),
});

export default Collapse;

/**
 * Collapse Component for SaltUI
 * @author
 *
 * Copyright 2018-2019, SaltUI Team.
 * All rights reserved.
 */
import RcCollapse from 'rc-collapse';
import assign from 'object-assign';
import Context from '../Context';

class Collapse extends RcCollapse {}

Collapse.displayName = 'Collapse';
Collapse.propTypes = RcCollapse.propTypes;
Collapse.defaultProps = assign({}, RcCollapse.defaultProps, {
  prefixCls: Context.prefixClass('collapse'),
});

export default Collapse;

/**
 * Collapse Component for tingle
 * @author 
 *
 * Copyright 2014-2016, Tingle Team.
 * All rights reserved.
 */
import React from 'react';
import RcCollapse from 'rc-collapse';
import assign from 'object-assign';

class Collapse extends RcCollapse {}

Collapse.displayName = 'tingle-collapse';
Collapse.propTypes = RcCollapse.propTypes;
Collapse.defaultProps = assign({}, RcCollapse.defaultProps, {
  prefixCls: 'tingle-collapse',
});

export default Collapse;