Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/ui / dist / components / molecules / AccordionBlock / AccordionBlock.js
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib"); // modules


const react_1 = tslib_1.__importDefault(require("react"));

const exotic_1 = require("exotic"); // reusable


const react_animate_height_1 = tslib_1.__importDefault(require("react-animate-height"));

const state_1 = require("../../../state"); // local


const AccordionTitle_1 = tslib_1.__importDefault(require("./AccordionTitle"));

const AccordionWrap_1 = tslib_1.__importDefault(require("./AccordionWrap"));

function toAttributes(props, state, instance = exotic_1.EMPTY_OBJ) {
  // @see ./README
  const isVisible = exotic_1.isBoolean(props.isVisible) === true ? props.isVisible : state.isVisible;
  const onToggle = instance.handleToggle;
  return Object.assign({}, props, {
    isVisible,
    onToggle
  });
}

function toWrapperProps(props, state, instance) {
  const {
    isVisible
  } = toAttributes(props, state);
  const {
    className,
    isDisabled,
    id,
    qa
  } = props;
  const wrapAttributes = {
    id,
    className,
    isVisible,
    isActive: isVisible,
    isDisabled,
    qa
  };
  return wrapAttributes;
}

function toTitleProps(props, state, instance) {
  const {
    isVisible
  } = toAttributes(props, state);
  const {
    isDisabled,
    isPlusMinus,
    title,
    shouldShowArrowIcon,
    qa,
    renderWrapper,
    renderIcon,
    renderTitle,
    ariaLevel
  } = props;
  const activeText = props.activeTitle || title;
  const onToggle = instance.handleToggle;
  return {
    title,
    activeText,
    onToggle,
    isPlusMinus,
    isDisabled,
    shouldShowArrowIcon,
    isActive: isVisible,
    'data-qa': qa,
    renderWrapper,
    renderIcon,
    renderTitle,
    ariaLevel
  };
}

let AccordionBlock = class AccordionBlock extends react_1.default.Component {
  constructor() {
    super(...arguments); // unused if we pass in props isVisible

    this.state = this.props.state || state_1.makeCommonState(this.props); // @type {React.EventHandler}

    this.handleToggle = event => {
      // if they pass in a handler
      if (exotic_1.isFunction(this.props.onToggle)) {
        this.props.onToggle(event);
      } else {
        // we call the default handler
        this.state.handleToggleVisibility();
      }
    };
  } // componentDidMount


  componentWillMount() {
    const {
      isVisible,
      isDefaultVisible
    } = this.props;

    if (isDefaultVisible === true || isVisible === true) {
      this.state.show();
    }
  }

  render() {
    const wrapAttributes = toWrapperProps(this.props, this.state, this);
    const passThrough = toTitleProps(this.props, this.state, this);
    const {
      isVisible
    } = wrapAttributes;
    const {
      children,
      ariaAttributes
    } = this.props;
    return react_1.default.createElement(AccordionWrap_1.default, Object.assign({}, ariaAttributes, wrapAttributes), react_1.default.createElement(AccordionTitle_1.default, Object.assign({}, passThrough, {
      key: "accordion-title-component"
    })), react_1.default.createElement(react_animate_height_1.default, {
      key: "accordion-collapse",
      duration: 500,
      height: isVisible === false ? 0 : 'auto'
    }, children));
  }

};
AccordionBlock.defaultProps = {
  title: '',
  defaultView: '',
  shouldShowArrowIcon: true,
  id: undefined
};
AccordionBlock = tslib_1.__decorate([state_1.observer], AccordionBlock);
exports.AccordionBlock = AccordionBlock;
exports.default = AccordionBlock; //# sourceMappingURL=AccordionBlock.js.map