backpack-ui/dist/components/paginatorButton/index.js

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _upperFirst = require("lodash/upperFirst");

var _upperFirst2 = _interopRequireDefault(_upperFirst);

var _settings = require("../../../settings.json");

var _settings2 = _interopRequireDefault(_settings);

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

var _color = require("../../utils/color");

var _mixins = require("../../utils/mixins");

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

var _ = { upperFirst: _upperFirst2.default };

var hoverStyles = {
  base: {
    color: _settings2.default.color.blue
  },
  blue: {
    color: _settings2.default.color.blue
  }
};

var styles = {
  base: {
    appearance: "none",
    backgroundColor: _settings2.default.color.white,
    border: 0,
    borderRadius: "50%",
    cursor: "pointer",
    display: "inline-block",
    fontSize: "9px",
    lineHeight: 1,
    transition: "color " + _settings2.default.timing.default + ",\n      box-shadow " + _settings2.default.timing.default,

    ":hover": hoverStyles.base,
    ":active": hoverStyles.base,
    ":focus": (0, _objectAssign2.default)({}, hoverStyles.base, (0, _mixins.outline)())
  },

  size: {
    small: {
      height: 30 / 9 + "em",
      width: 30 / 9 + "em"
    },
    medium: {
      height: 40 / 9 + "em",
      width: 40 / 9 + "em"
    }
  },

  shadow: {
    loose: {
      boxShadow: "0 " + 2 / 9 + "em " + 8 / 9 + "em rgba(" + (0, _color.rgb)(_settings2.default.color.black) + ", .1)"
    },
    tight: {
      boxShadow: "0 0 " + 4 / 9 + "em rgba(" + (0, _color.rgb)(_settings2.default.color.black) + ", .16)"
    }
  },

  color: {
    blue: {
      color: _settings2.default.color.blue,

      ":hover": hoverStyles.blue,
      ":active": hoverStyles.blue,
      ":focus": (0, _objectAssign2.default)({}, hoverStyles.blue, (0, _mixins.outline)())
    }
  },

  align: {
    base: {
      position: "absolute"
    },
    vertical: {
      bottom: 0,
      marginBottom: "auto",
      marginTop: "auto",
      top: 0
    },
    horizontal: {
      left: 0,
      marginLeft: "auto",
      marginRight: "auto",
      right: 0
    }
  },

  direction: {
    up: {
      base: {
        top: 0
      },

      offset: {
        small: {
          top: -15 / 9 + "em"
        },
        medium: {
          top: -20 / 9 + "em"
        }
      }
    },
    down: {
      base: {
        bottom: 0
      },

      offset: {
        small: {
          bottom: -15 / 9 + "em"
        },
        medium: {
          bottom: -20 / 9 + "em"
        }
      }
    },
    left: {
      base: {
        left: 0
      },

      offset: {
        small: {
          left: -15 / 9 + "em"
        },
        medium: {
          left: -20 / 9 + "em"
        }
      }
    },
    right: {
      base: {
        right: 0
      },

      offset: {
        small: {
          right: -15 / 9 + "em"
        },
        medium: {
          right: -20 / 9 + "em"
        }
      }
    }
  }
};

function PaginatorButton(_ref) {
  var direction = _ref.direction;
  var size = _ref.size;
  var shadow = _ref.shadow;
  var arrow = _ref.arrow;
  var color = _ref.color;
  var align = _ref.align;
  var offset = _ref.offset;
  var onClick = _ref.onClick;
  var iconLabel = _ref.iconLabel;
  var owns = _ref.owns;

  var style = [styles.base];

  if (size) {
    style.push(styles.size[size]);
  }

  if (shadow) {
    style.push(styles.shadow[shadow]);
  }

  if (color) {
    style.push(styles.color[color]);
  }

  if (align) {
    style.push(styles.align.base, styles.align[align], offset ? styles.direction[direction].offset[size] : styles.direction[direction].base);
  }

  var iconName = "" + _.upperFirst(arrow) + _.upperFirst(direction);

  var label = void 0;

  if (iconLabel) {
    label = iconLabel;
  } else {
    label = direction === "up" || direction === "left" ? "Previous" : "Next";
  }

  var PaginatorIcon = _react2.default.createElement(_icon2.default[iconName], {
    label: label
  });

  return _react2.default.createElement(
    "button",
    {
      className: "PaginatorButton",
      style: style,
      title: label,
      onClick: onClick,
      "aria-label": label,
      "aria-owns": owns
    },
    PaginatorIcon
  );
}

PaginatorButton.propTypes = {
  /**
   * Change the direction the arrow points
   */
  direction: _react2.default.PropTypes.oneOf(["up", "down", "left", "right"]).isRequired,

  /**
   * Set the size of the button
   */
  size: _react2.default.PropTypes.oneOf(["small", "medium"]),

  /**
   * Change the shadow
   */
  shadow: _react2.default.PropTypes.oneOf(["loose", "tight"]),

  /**
   * Change the arrow icon type
   */
  arrow: _react2.default.PropTypes.oneOf(["chevron", "triangle"]),

  /**
   * Change the color of the icon
   */
  color: _react2.default.PropTypes.oneOf(["", "blue"]),

  /**
   * Position the button absolutely and align it
   */
  align: _react2.default.PropTypes.oneOf(["", "horizontal", "vertical"]),

  /**
   * Offset the button when positioned absolutely; must be used with align
   */
  offset: _react2.default.PropTypes.bool,

  /**
   * Function to run when the button is clicked
   */
  onClick: _react2.default.PropTypes.func,

  /**
   * Override the icon label
   */
  iconLabel: _react2.default.PropTypes.string,

  /**
   * The ID of the sibling element that the button owns, e.g., if the button has
   * a menu with an ID of "share-menu", then `owns="share-menu"`.
   */
  owns: _react2.default.PropTypes.string
};

PaginatorButton.defaultProps = {
  direction: "up",

  size: "medium",

  shadow: "loose",

  arrow: "chevron",

  color: "",

  align: "",

  offset: false,

  onClick: null,

  iconLabel: "",

  owns: ""
};

PaginatorButton.styles = styles;

exports.default = (0, _radium2.default)(PaginatorButton);