@r3l/app/lib/modules/styled/buttons.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof3 = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ButtonWithIcon = ButtonWithIcon;
exports.Button = exports.HoverButton = exports.StaticButton = exports.TextButton = exports.Touchable = void 0;

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _dripsy = require("dripsy");

var _styles = require("../../styles");

var _reactNativeWeb = require("react-native-web");

var _text = require("./text");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var cursor = !_styles.isNative ? {
  cursor: 'pointer',
  userSelect: 'none'
} : {};

var buttonShadow = function buttonShadow(p) {
  return p.hover && !p.active && !p.disabled ? {
    boxShadow: '0 2px 6px hsl(240,0%,70%);'
  } : {};
};

var Touchable = _reactNativeWeb.TouchableOpacity;
exports.Touchable = Touchable;

var button = _objectSpread(_objectSpread({}, cursor), {}, {
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'row',
  height: 7,
  minWidth: [15 * 8, 18 * 8],
  px: 2
}); // @ts-ignore


var TextButton = (0, _dripsy.styled)(_reactNativeWeb.Text)(_objectSpread(_objectSpread({}, cursor), {}, {
  color: 'blue'
})); // @ts-ignore

exports.TextButton = TextButton;
var StaticButton = (0, _dripsy.styled)(_reactNativeWeb.View)(function (p) {
  return _objectSpread(_objectSpread({}, button), {}, {
    bg: p.disabled ? 'grey' : 'blue',
    color: 'white'
  }, buttonShadow(p));
});
exports.StaticButton = StaticButton;
var HoverButton = /*#__PURE__*/(0, _react.memo)(HB);
exports.HoverButton = HoverButton;

function HB(_ref) {
  var children = _ref.children,
      onPress = _ref.onPress,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      sx = _ref.sx,
      textSx = _ref.textSx;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      hover = _useState2[0],
      setHover = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      active = _useState4[0],
      setActive = _useState4[1];

  var isString = typeof children === 'string';
  var isArray = (0, _typeof2.default)(children) === 'object' && children.length;
  var isTextArray = isArray && children.find(function (el) {
    return typeof el === 'string';
  });
  var renderString = !children || !isArray && !children.$$typeof || isTextArray || isString;
  return /*#__PURE__*/_react.default.createElement(_reactNativeWeb.TouchableOpacity, {
    disabled: disabled,
    onPress: onPress
  }, /*#__PURE__*/_react.default.createElement(StaticButton // @ts-ignore
  , {
    hover: hover,
    active: active,
    onMouseDown: function onMouseDown() {
      return setActive(true);
    },
    onMouseUp: function onMouseUp() {
      return setActive(false);
    },
    onMouseEnter: function onMouseEnter() {
      return setHover(true);
    },
    onMouseLeave: function onMouseLeave() {
      setHover(false);
      setActive(false);
    },
    disabled: disabled,
    sx: sx
  }, renderString ? /*#__PURE__*/_react.default.createElement(_text.ButtonText, {
    sx: textSx
  }, children) : children));
}

var Button = /*#__PURE__*/(0, _react.memo)(HB);
exports.Button = Button;

function ButtonWithIcon(_ref2) {
  var text = _ref2.text,
      image = _ref2.image,
      sx = _ref2.sx,
      textSx = _ref2.textSx,
      onPress = _ref2.onPress;
  return /*#__PURE__*/_react.default.createElement(Button, {
    sx: sx,
    onPress: onPress
  }, image, /*#__PURE__*/_react.default.createElement(_text.ButtonText, {
    sx: textSx
  }, text));
}
//# sourceMappingURL=buttons.js.map