react-misc-toolbox/dist/Switch.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

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

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _RTGTransition = require('./RTGTransition');

var _RTGTransition2 = _interopRequireDefault(_RTGTransition);

var _recompose = require('recompose');

var _helperFunctions = require('./helperFunctions');

var _defaultStyles = require('./defaultStyles');

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

var styleTemplate = void 0;

var Switch = function Switch(props) {
  var children = props.children,
      defaultActiveOption = props.defaultActiveOption,
      customStyleTemplate = props.customStyleTemplate,
      styleTemplatePreset = props.styleTemplatePreset,
      transitionType = props.transitionType,
      options = props.options;

  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends3.default)({}, state, newState);
  }, {
    activeOption: defaultActiveOption
  }),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  var activeOption = state.activeOption;

  var setActiveOption = function setActiveOption(option) {
    return setState({ activeOption: option });
  };
  if (customStyleTemplate) {
    styleTemplate = customStyleTemplate;
  } else if (styleTemplatePreset) {
    styleTemplate = styleTemplatePreset ? _defaultStyles.switchStyleTemplates[styleTemplatePreset] : {};
  } else {
    styleTemplate = _defaultStyles.switchStyleTemplates.default;
  }

  var isActive = function isActive(option) {
    return activeOption === option;
  };

  var getOptionProps = function getOptionProps() {
    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var className = _ref.className,
        style = _ref.style,
        _onClick = _ref.onClick,
        option = _ref.option,
        props = (0, _objectWithoutProperties3.default)(_ref, ['className', 'style', 'onClick', 'option']);

    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }

        e.stopPropagation;
        setActiveOption(option);
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: className ? (0, _helperFunctions.flippyClass)(isActive(option), 'switch__option__container', 'active', 'inactive') + ' ' + (0, _helperFunctions.flippyClass)(isActive(option), className, 'active', 'inactive') : '' + (0, _helperFunctions.flippyClass)(isActive(option), 'switch__option__container', 'active', 'inactive'),
      style: (0, _extends3.default)({}, styleTemplate.option, style)
    }, props);
  };

  var renderContent = function renderContent(func, option) {
    return _react2.default.createElement(
      _RTGTransition2.default,
      { in: isActive(option), transitionType: transitionType },
      function (_ref2) {
        var transitionStyle = _ref2.style;

        var getContentProps = function getContentProps() {
          var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

          var className = _ref3.className,
              _ref3$style = _ref3.style,
              style = _ref3$style === undefined ? {} : _ref3$style,
              _onClick2 = _ref3.onClick,
              option = _ref3.option,
              props = (0, _objectWithoutProperties3.default)(_ref3, ['className', 'style', 'onClick', 'option']);

          return (0, _extends3.default)({
            onClick: function onClick(e) {
              for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
                args[_key2 - 1] = arguments[_key2];
              }

              e.stopPropagation;
              _onClick2 && _onClick2.apply(undefined, [e].concat(args));
            },
            className: className ? (0, _helperFunctions.flippyClass)(isActive(option), 'switch__option__content', 'active', 'inactive') + ' ' + (0, _helperFunctions.flippyClass)(isActive(option), className, 'active', 'inactive') : '' + (0, _helperFunctions.flippyClass)(isActive(option), 'switch__option__content', 'active', 'inactive'),
            style: (0, _extends3.default)({}, styleTemplate.content, transitionStyle, style)
          }, props);
        };
        return func({ getContentProps: getContentProps });
      }
    );
  };
  var getLabelProps = function getLabelProps() {
    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var className = _ref4.className,
        style = _ref4.style,
        _onClick3 = _ref4.onClick,
        option = _ref4.option,
        props = (0, _objectWithoutProperties3.default)(_ref4, ['className', 'style', 'onClick', 'option']);

    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
          args[_key3 - 1] = arguments[_key3];
        }

        e.stopPropagation;
        _onClick3 && _onClick3.apply(undefined, [e].concat(args));
      },
      className: className ? (0, _helperFunctions.flippyClass)(isActive(option), 'switch__option__label', 'active', 'inactive') + ' ' + (0, _helperFunctions.flippyClass)(isActive(option), className, 'active', 'inactive') : '' + (0, _helperFunctions.flippyClass)(isActive(option), 'switch__option__label', 'active', 'inactive')

    }, props);
  };

  if (typeof children === 'function') {
    return children({
      getOptionProps: getOptionProps,
      renderContent: renderContent,
      getLabelProps: getLabelProps,
      activeOption: activeOption,
      isActive: isActive
    });
  } else {
    return _react2.default.createElement(
      _react2.default.Fragment,
      null,
      console.log(props, activeOption),
      options.map(function (option) {
        return _react2.default.createElement(
          _react2.default.Fragment,
          { key: option.id },
          _react2.default.createElement(
            'div',
            (0, _extends3.default)({}, getOptionProps({ option: option.id })),
            option.label && _react2.default.createElement(
              'div',
              (0, _extends3.default)({}, getLabelProps({ option: option.id })),
              option.label
            ),
            option.renderLabel && option.renderLabel({ getLabelProps: getLabelProps, option: option })
          ),
          option.content && renderContent(function (_ref5) {
            var getContentProps = _ref5.getContentProps;
            return _react2.default.createElement(
              'div',
              (0, _extends3.default)({}, getContentProps({
                option: option.id,
                style: {
                  height: '50rem',
                  width: '50rem',
                  background: '#227'
                }
              })),
              option.content
            );
          }, option.id)
        );
      })
    );
  }
};

Switch.propTypes = {
  children: _propTypes2.default.func.isRequired
};

Switch.defaultProps = {
  useStyleTemplate: 'default',
  defaultActiveOption: null
};

var enhance = (0, _recompose.compose)((0, _recompose.onlyUpdateForKeys)(['children']));

exports.default = enhance(Switch);