brandeur-primitives/dist/components/createClick.js

Primitive components for brandeur

'use client';

var _excluded = ["action", "target", "disabled", "type", "style", "children"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
import React, { createElement, forwardRef } from 'react';
var buttonStyle = function buttonStyle(_ref) {
  var disabled = _ref.disabled;
  return {
    backgroundColor: 'unset',
    backgroundImage: 'unset',
    margin: 0,
    padding: 0,
    textAlign: 'left',
    cursor: 'pointer',
    appearance: 'none',
    borderWidth: 0,
    touchAction: 'manipulation',
    color: 'inherit',
    // TODO: not supported
    // '::-moz-focus-inner': {
    //   borderWidth: 0,
    //   padding: 0,
    // },
    extend: [{
      condition: disabled,
      style: {
        cursor: 'not-allowed'
      }
    }, {
      condition: !disabled,
      style: {
        ':active': {
          color: 'inherit'
        }
      }
    }]
  };
};
var linkStyle = function linkStyle(_ref2) {
  var disabled = _ref2.disabled;
  return {
    textDecoration: 'none',
    color: 'inherit',
    extend: [{
      condition: disabled,
      style: {
        cursor: 'not-allowed'
      }
    }, {
      condition: !disabled,
      style: {
        ':active': {
          color: 'inherit'
        }
      }
    }]
  };
};
export default function createClick(_ref3) {
  var El = _ref3.El;
  var linkComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'a';
  return /*#__PURE__*/forwardRef(function Click(_ref4, ref) {
    var action = _ref4.action,
      target = _ref4.target,
      disabled = _ref4.disabled,
      _ref4$type = _ref4.type,
      type = _ref4$type === void 0 ? 'button' : _ref4$type,
      style = _ref4.style,
      children = _ref4.children,
      props = _objectWithoutProperties(_ref4, _excluded);
    var isLink = typeof action === 'string' || _typeof(action) === 'object';
    var as = isLink ? linkComponent : 'button';
    function getStyle(componentStyle) {
      return [{
        boxSizing: 'border-box'
      }, componentStyle({
        disabled: disabled
      }), style];
    }
    function getProps() {
      if (isLink) {
        var rel = target === '_blank' ? 'noreferrer noopener' : undefined;
        var _style = getStyle(linkStyle);
        return {
          href: !disabled ? action : undefined,
          style: _style,
          target: target,
          rel: rel
        };
      }
      var style = getStyle(buttonStyle);
      return {
        onClick: !disabled ? action : undefined,
        style: style,
        disabled: disabled,
        type: type
      };
    }
    var additionalProps = getProps();
    return /*#__PURE__*/React.createElement(El, _extends({
      ref: ref,
      onTouchStart: function onTouchStart() {}
    }, props, additionalProps, {
      as: as
    }), children);
  });
}