wix-style-react/dist/src/PageHeader/PageHeader.js

wix-style-react

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _PageHeader = require('./PageHeader.scss');

var _PageHeader2 = _interopRequireDefault(_PageHeader);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _WixComponent2 = require('../BaseComponents/WixComponent');

var _WixComponent3 = _interopRequireDefault(_WixComponent2);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _ChevronLeft = require('wix-ui-icons-common/ChevronLeft');

var _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);

var _Breadcrumbs = require('../Breadcrumbs');

var _Breadcrumbs2 = _interopRequireDefault(_Breadcrumbs);

var _Text = require('../Text');

var _Text2 = _interopRequireDefault(_Text);

var _Heading = require('../Heading');

var _Heading2 = _interopRequireDefault(_Heading);

var _wixAnimations = require('wix-animations');

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var animateComponent = function animateComponent(show, useEnterDelay, content) {
  return useEnterDelay ? _react2.default.createElement(
    _wixAnimations.Animator,
    { show: show, opacity: true, timing: 'medium', delay: { enter: 100 } },
    content
  ) : _react2.default.createElement(
    _wixAnimations.Animator,
    { show: show, opacity: true, timing: 'medium' },
    content
  );
};

var isDarkTheme = function isDarkTheme(hasBackgroundImage, minimized) {
  return !minimized && hasBackgroundImage;
};

var getBreadcrumbsTheme = function getBreadcrumbsTheme(hasBackgroundImage, minimized) {
  return isDarkTheme(hasBackgroundImage, minimized) ? 'onDarkBackground' : 'onGrayBackground';
};

var getTitle = function getTitle(title, minimized) {
  return typeof title === 'function' ? title(minimized) : title;
};

var generateDefaultBreadcrumbs = function generateDefaultBreadcrumbs(title, hasBackgroundImage, minimized) {
  return _react2.default.createElement(_Breadcrumbs2.default, {
    items: [{ id: '1', value: getTitle(title, minimized) }],
    activeId: '1',
    size: 'medium',
    theme: getBreadcrumbsTheme(hasBackgroundImage, minimized),
    onClick: function onClick() {}
  });
};

var generateThemedBreadcrumbs = function generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized) {
  if (breadcrumbs) {
    return _react2.default.cloneElement(breadcrumbs, {
      theme: getBreadcrumbsTheme(hasBackgroundImage, minimized)
    });
  }

  return generateDefaultBreadcrumbs(title, hasBackgroundImage, minimized);
};

/**
 * A header that sticks at the top of the container which minimizes on scroll
 */

var PageHeader = function (_WixComponent) {
  _inherits(PageHeader, _WixComponent);

  function PageHeader(props) {
    _classCallCheck(this, PageHeader);

    var _this = _possibleConstructorReturn(this, (PageHeader.__proto__ || Object.getPrototypeOf(PageHeader)).call(this, props));

    var breadcrumbs = props.breadcrumbs,
        title = props.title,
        hasBackgroundImage = props.hasBackgroundImage,
        minimized = props.minimized;

    _this.state = {
      themedBreadcrumbs: generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized)
    };
    return _this;
  }

  _createClass(PageHeader, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var _props = this.props,
          breadcrumbs = _props.breadcrumbs,
          title = _props.title,
          hasBackgroundImage = _props.hasBackgroundImage,
          minimized = _props.minimized;

      var newBreadcrumbs = nextProps.breadcrumbs;
      var newTitle = nextProps.title;
      var newHasBackgroundImage = nextProps.hasBackgroundImage;
      var newMinimized = nextProps.minimized;

      if (breadcrumbs !== newBreadcrumbs || title !== newTitle || hasBackgroundImage !== newHasBackgroundImage || minimized !== newMinimized) {
        var themedBreadcrumbs = generateThemedBreadcrumbs(newBreadcrumbs, newTitle, newHasBackgroundImage, newMinimized);
        this.setState({ themedBreadcrumbs: themedBreadcrumbs });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _classNames, _classNames3, _classNames6;

      var _props2 = this.props,
          breadcrumbs = _props2.breadcrumbs,
          onBackClicked = _props2.onBackClicked,
          title = _props2.title,
          subtitle = _props2.subtitle,
          minimized = _props2.minimized,
          actionsBar = _props2.actionsBar,
          showBackButton = _props2.showBackButton,
          hasBackgroundImage = _props2.hasBackgroundImage,
          className = _props2.className;

      var breadcrumbsExists = !!breadcrumbs;
      var themedBreadcrumbs = this.state.themedBreadcrumbs;


      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(_PageHeader2.default.headerContainer, className) },
        _react2.default.createElement(
          'div',
          { className: _PageHeader2.default.header },
          _react2.default.createElement(
            'div',
            null,
            animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, _react2.default.createElement(
              'div',
              {
                className: (0, _classnames2.default)(_PageHeader2.default.breadcrumbsContainer, (_classNames = {}, _defineProperty(_classNames, _PageHeader2.default.absolute, !breadcrumbsExists), _defineProperty(_classNames, _PageHeader2.default.minimized, minimized), _classNames)),
                'data-hook': 'page-header-breadcrumbs'
              },
              themedBreadcrumbs
            ))
          ),
          _react2.default.createElement(
            'div',
            {
              className: (0, _classnames2.default)(_PageHeader2.default.titleContainer, _defineProperty({}, _PageHeader2.default.minimized, minimized))
            },
            showBackButton && onBackClicked && animateComponent(!minimized, !breadcrumbsExists, _react2.default.createElement(
              'div',
              {
                className: (0, _classnames2.default)(_PageHeader2.default.backButton, (_classNames3 = {}, _defineProperty(_classNames3, _PageHeader2.default.minimized, minimized), _defineProperty(_classNames3, _PageHeader2.default.darkTheme, isDarkTheme(hasBackgroundImage, minimized)), _classNames3))
              },
              _react2.default.createElement(
                _Button2.default,
                {
                  dataHook: 'page-header-backbutton',
                  onClick: onBackClicked,
                  theme: 'icon-white'
                },
                _react2.default.createElement(_ChevronLeft2.default, { className: _PageHeader2.default.backButtonIcon })
              )
            )),
            _react2.default.createElement(
              'div',
              { className: _PageHeader2.default.titleColumn },
              title && animateComponent(!minimized, !breadcrumbsExists, _react2.default.createElement(
                'div',
                {
                  className: (0, _classnames2.default)(_PageHeader2.default.title, _defineProperty({}, _PageHeader2.default.minimized, minimized)),
                  'data-hook': 'page-header-title'
                },
                _react2.default.createElement(
                  _Heading2.default,
                  { light: isDarkTheme(hasBackgroundImage, minimized) },
                  getTitle(title, minimized)
                )
              )),
              subtitle && animateComponent(!minimized, !breadcrumbsExists, _react2.default.createElement(
                'div',
                {
                  className: (0, _classnames2.default)(_defineProperty({}, _PageHeader2.default.minimized, minimized)),
                  'data-hook': 'page-header-subtitle'
                },
                _react2.default.createElement(
                  _Text2.default,
                  {
                    light: isDarkTheme(hasBackgroundImage, minimized),
                    secondary: !isDarkTheme(hasBackgroundImage, minimized)
                  },
                  subtitle
                )
              ))
            )
          )
        ),
        actionsBar && _react2.default.createElement(
          'div',
          {
            className: (0, _classnames2.default)(_PageHeader2.default.actionsBar, (_classNames6 = {}, _defineProperty(_classNames6, _PageHeader2.default.minimized, minimized), _defineProperty(_classNames6, _PageHeader2.default.withBreadcrumbs, breadcrumbsExists), _classNames6)),
            'data-hook': 'page-header-actionbar'
          },
          _react2.default.cloneElement(actionsBar, { minimized: minimized, hasBackgroundImage: hasBackgroundImage })
        )
      );
    }
  }]);

  return PageHeader;
}(_WixComponent3.default);

exports.default = PageHeader;


PageHeader.displayName = 'Page.Header';

PageHeader.propTypes = {
  /** This property is being supplied by the Page component, it's value changes by the state of the scrolled content */
  minimized: _propTypes2.default.bool,
  /** This property is being supplied by the Page component, it's value reflects if the Page has a background image or not */
  hasBackgroundImage: _propTypes2.default.bool,
  /** A css class to be applied to the component's root element */
  className: _propTypes2.default.string,
  /** Wix-Style-React Breadcrumbs component */
  breadcrumbs: _propTypes2.default.node,
  /** The main title text */
  title: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]),
  /** The subtitle text */
  subtitle: _propTypes2.default.node,
  /** Should show a back button */
  showBackButton: _propTypes2.default.bool,
  /** The callback when back button is clicked */
  onBackClicked: _propTypes2.default.func,
  /** A placeholder for a component that can contain actions / anything else. It should be a React component that receives `minimized` and `hasBackgroundImage` props. */
  actionsBar: _propTypes2.default.node
};

PageHeader.defaultProps = {
  minimized: false
};