@wix/design-system/dist/cjs/AddItem/AddItem.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _system = require("@wix/wix-ui-icons-common/system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _useFocusRing = require("../providers/useFocusRing/useFocusRing");
var _useId = require("../utils/useId");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Text = _interopRequireDefault(require("../Text"));
var _Image = _interopRequireDefault(require("../Image"));
var _constants = require("./constants");
var _AddItemSt = require("./AddItem.st.css.js");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _excluded = ["theme", "size", "alignItems", "removePadding", "borderRadius", "disabled", "className", "onClick", "ariaLabel", "icon", "children", "subtitle", "dataHook", "tooltipProps", "tooltipContent", "showIcon"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AddItem/AddItem.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var AddItemButtonIcons = {
  tiny: _ref => {
    var {
      className
    } = _ref;
    return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
      "data-hook": _constants.dataHooks.defaultIcon,
      className: className,
      width: "24",
      height: "24",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 33,
        columnNumber: 5
      }
    });
  },
  small: () => /*#__PURE__*/_react.default.createElement(_system.AddItemSmall, {
    "data-hook": _constants.dataHooks.defaultIcon,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 16
    }
  }),
  medium: () => /*#__PURE__*/_react.default.createElement(_system.AddItemMedium, {
    "data-hook": _constants.dataHooks.defaultIcon,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41,
      columnNumber: 17
    }
  }),
  large: () => /*#__PURE__*/_react.default.createElement(_system.AddItemLarge, {
    "data-hook": _constants.dataHooks.defaultIcon,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42,
      columnNumber: 16
    }
  }),
  image: _ref2 => {
    var {
      className
    } = _ref2;
    return /*#__PURE__*/_react.default.createElement(_system.AddMedia, {
      "data-hook": _constants.dataHooks.defaultIcon,
      className: className,
      width: "31",
      height: "31",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 44,
        columnNumber: 5
      }
    });
  }
};
var illustrationDimensions = {
  tiny: {
    height: 24,
    width: 24
  },
  small: {
    height: 60,
    width: 60
  },
  medium: {
    height: 120,
    width: 120
  },
  large: {
    height: 120,
    width: 120
  }
};
var tooltipPlacementByAlignment = {
  left: 'top-start',
  right: 'top-end',
  center: 'top'
};
var AddItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
  var {
      theme = 'dashes',
      // TODO: add default skin
      size = 'tiny',
      alignItems = 'center',
      removePadding = false,
      borderRadius,
      disabled,
      className,
      onClick,
      ariaLabel,
      icon,
      children,
      subtitle,
      dataHook,
      tooltipProps,
      tooltipContent,
      showIcon = true
    } = _ref3,
    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
  var skin = props.skin || theme;
  var buttonRef = _react.default.useRef(null);
  (0, _react.useEffect)(() => {
    if (theme) {
      (0, _deprecationLog.default)('<AddItem/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
    }
  }, [theme]);
  (0, _react.useImperativeHandle)(ref, () => ({
    focus: () => {
      var _buttonRef$current;
      (_buttonRef$current = buttonRef.current) == null || _buttonRef$current.focus();
    },
    blur: () => {
      var _buttonRef$current2;
      (_buttonRef$current2 = buttonRef.current) == null || _buttonRef$current2.blur();
    }
  }));
  var iconElement = (0, _react.useMemo)(() => {
    if (!showIcon) {
      return;
    }
    if (!icon) {
      var isImageIcon = skin === 'image';
      var Icon = AddItemButtonIcons[isImageIcon ? 'image' : size];
      return /*#__PURE__*/_react.default.createElement(Icon, {
        className: _AddItemSt.classes.icon,
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 116,
          columnNumber: 16
        }
      });
    }
    if (typeof icon === 'string') {
      return /*#__PURE__*/_react.default.createElement(_Image.default, (0, _extends2.default)({
        className: _AddItemSt.classes.illustration,
        fit: "contain",
        src: icon
      }, illustrationDimensions[size], {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 120,
          columnNumber: 11
        }
      }));
    }
    return icon;
  }, [icon, size, skin, showIcon]);
  var textElement = (0, _react.useMemo)(() => {
    if (!children || skin === 'image') {
      return;
    }
    var textSize = size === 'tiny' ? 'small' : 'medium';
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _AddItemSt.st)(_AddItemSt.classes.textWrapper, {
        size
      }),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 137,
        columnNumber: 9
      }
    }, typeof children === 'function' ? children() : /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: _AddItemSt.classes.textContent,
      weight: "thin",
      skin: "standard",
      size: textSize,
      dataHook: _constants.dataHooks.itemText,
      ellipsis: true,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 141,
        columnNumber: 13
      }
    }, children));
  }, [children, size, skin]);
  var subtitleElement = (0, _react.useMemo)(() => {
    return subtitle && /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: (0, _AddItemSt.st)(_AddItemSt.classes.subtitle, {
        size
      }),
      size: "small",
      dataHook: _constants.dataHooks.itemSubtitle,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 159,
        columnNumber: 11
      }
    }, subtitle);
  }, [subtitle, size]);
  var commonButtonProps = {
    className,
    onClick,
    disabled,
    skin,
    size,
    ariaLabel,
    borderRadius,
    removePadding,
    alignItems,
    icon: iconElement,
    text: textElement,
    subtitle: subtitleElement
  };

  // TODO: remove this once we deprecate content usage thhrough tooltip
  // @ts-expect-error
  var tooltip = tooltipContent || (tooltipProps == null ? void 0 : tooltipProps.content);
  var tooltipId = (0, _useId.useId)('additem-tooltip_');
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '100%',
      height: '100%'
    },
    "data-hook": dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 191,
      columnNumber: 7
    }
  }, tooltip && /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
    content: tooltip,
    className: _AddItemSt.classes.tooltip,
    flip: skin === 'image',
    moveBy: {
      y: skin === 'image' ? -12 : 0
    },
    dataHook: _constants.dataHooks.itemTooltip,
    placement: tooltipPlacementByAlignment[alignItems],
    "aria-describedby": tooltipId
  }, tooltipProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 193,
      columnNumber: 11
    }
  }), _ref4 => {
    var {
      onFocus,
      onBlur
    } = _ref4;
    return /*#__PURE__*/_react.default.createElement(AddItemButton, (0, _extends2.default)({
      ref: buttonRef,
      ariaDescribedBy: tooltipId
    }, commonButtonProps, {
      onFocus: onFocus,
      onBlur: onBlur,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 204,
        columnNumber: 15
      }
    }));
  }), !tooltip && /*#__PURE__*/_react.default.createElement(AddItemButton, (0, _extends2.default)({
    ref: buttonRef
  }, commonButtonProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 214,
      columnNumber: 22
    }
  })));
});
var AddItemButton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
  var {
    className,
    onClick,
    disabled,
    size,
    ariaLabel,
    borderRadius,
    alignItems = 'center',
    newColorsBranding,
    removePadding,
    skin,
    icon,
    text,
    subtitle,
    ariaDescribedBy,
    onFocus: _onFocus,
    onBlur: _onBlur
  } = _ref5;
  var {
    isFocusVisible,
    focusProps
  } = (0, _useFocusRing.useFocusRing)();
  return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
    ref: ref,
    "data-hook": _constants.dataHooks.addItem,
    className: (0, _AddItemSt.st)(_AddItemSt.classes.root, {
      skin,
      size,
      removePadding,
      borderRadius,
      disabled,
      alignItems,
      newColorsBranding,
      'focus-visible': isFocusVisible
    }, className),
    style: {
      borderRadius
    },
    disabled: disabled,
    type: "button",
    onClick: onClick,
    "aria-label": ariaLabel,
    "aria-describedby": ariaDescribedBy
  }, focusProps, {
    onFocus: e => {
      focusProps.onFocus == null || focusProps.onFocus(e);
      _onFocus == null || _onFocus(e);
    },
    onBlur: e => {
      focusProps.onBlur == null || focusProps.onBlur(e);
      _onBlur == null || _onBlur(e);
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 265,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _AddItemSt.st)(_AddItemSt.classes.contentContainer, {
      skin,
      size,
      alignItems,
      disabled
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 298,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _AddItemSt.st)(_AddItemSt.classes.content, {
      size
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 306,
      columnNumber: 11
    }
  }, icon, text), subtitle));
});
AddItem.displayName = 'AddItem';
AddItem.propTypes = {
  children: _propTypes.default.any,
  disabled: _propTypes.default.bool,
  skin: _propTypes.default.oneOf(['dashes', 'plain', 'filled', 'image']),
  theme: _propTypes.default.oneOf(['dashes', 'plain', 'filled', 'image']),
  alignItems: _propTypes.default.oneOf(['center', 'right', 'left']),
  size: _propTypes.default.oneOf(['large', 'medium', 'small', 'tiny']),
  onClick: _propTypes.default.func,
  dataHook: _propTypes.default.string,
  className: _propTypes.default.string,
  tooltipContent: _propTypes.default.any,
  tooltipProps: _propTypes.default.object,
  showIcon: _propTypes.default.bool,
  removePadding: _propTypes.default.bool,
  borderRadius: _propTypes.default.string,
  ariaLabel: _propTypes.default.string,
  subtitle: _propTypes.default.any,
  icon: _propTypes.default.any
};
var _default = exports.default = AddItem;
//# sourceMappingURL=AddItem.js.map