@bubbles-ui/extras
Version:
The Bubbles Design System is Leemonade's open-source design system for products and experiences.
179 lines (178 loc) • 6.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TagifyInput = exports.TAGIFY_TAG_REGEX = exports.TAGIFY_SIZES = exports.TAGIFY_ORIENTATIONS = exports.TAGIFY_DEFAULT_PROPS = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _hooks = require("@mantine/hooks");
var _components = require("@bubbles-ui/components");
var _TagifyInput = require("./TagifyInput.styles");
var _react2 = require("./tagify/react.tagify");
var styles = _interopRequireWildcard(require("./tagify/tagify.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // React-wrapper file
// TODO: This condition is yo use the styles variable until we fix the style imports
if (styles) {
//
}
const noop = _ => _;
const TAGIFY_TAG_REGEX = exports.TAGIFY_TAG_REGEX = /(?:\[{2}\{).*?(?:\}\]{2})/g;
const TAGIFY_SIZES = exports.TAGIFY_SIZES = _components.INPUT_WRAPPER_SIZES;
const TAGIFY_ORIENTATIONS = exports.TAGIFY_ORIENTATIONS = _components.INPUT_WRAPPER_ORIENTATIONS;
const TAGIFY_DEFAULT_PROPS = exports.TAGIFY_DEFAULT_PROPS = {
mixed: true,
size: TAGIFY_SIZES[1],
orientation: 'vertical',
required: true,
autoFocus: false,
readOnly: false,
label: '',
description: '',
error: '',
help: '',
settings: {},
withSuggestions: false,
amountOfDuplicates: 1
};
const TagifyInput = exports.TagifyInput = /*#__PURE__*/(0, _react.forwardRef)(({
name,
value,
loading = false,
onInput = noop,
onAdd = noop,
onRemove = noop,
onEditInput = noop,
onEditBeforeUpdate = noop,
onEditUpdated = noop,
onEditStart = noop,
onEditKeydown = noop,
onInvalid = noop,
onClick = noop,
onKeydown = noop,
onFocus = noop,
onBlur = noop,
onChange = noop,
onDropdownShow = noop,
onDropdownHide = noop,
onDropdownSelect = noop,
onDropdownScroll = noop,
onDropdownNoMatch = noop,
onDropdownUpdated = noop,
readOnly,
disabled,
children,
settings = {},
InputMode = 'input',
autoFocus,
whitelist,
tagifyRef,
placeholder = '',
defaultValue,
showDropdown,
withSuggestions,
amountOfDuplicates,
mixed,
error,
size,
ariaLabel,
...props
}, ref) => {
const uuid = (0, _hooks.useId)();
const {
classes,
cx
} = (0, _TagifyInput.TagifyInputStyles)({
size,
error
}, {
name: 'TagifyInput'
});
return /*#__PURE__*/_react.default.createElement(_components.InputWrapper, _extends({}, props, {
uuid: uuid,
size: size,
error: error
}), /*#__PURE__*/_react.default.createElement(_react2.MixedTags, {
className: classes.root,
id: uuid,
name: name,
value: value,
loading: loading,
onInput: onInput,
onAdd: onAdd,
onRemove: onRemove,
onEditInput: onEditInput,
onEditBeforeUpdate: onEditBeforeUpdate,
onEditUpdated: onEditUpdated,
onEditStart: onEditStart,
onEditKeydown: onEditKeydown,
onInvalid: onInvalid,
onClick: onClick,
onKeydown: onKeydown,
onFocus: onFocus,
onBlur: onBlur,
onChange: onChange,
onDropdownShow: onDropdownShow,
onDropdownHide: onDropdownHide,
onDropdownSelect: onDropdownSelect,
onDropdownScroll: onDropdownScroll,
onDropdownNoMatch: onDropdownNoMatch,
onDropdownUpdated: onDropdownUpdated,
readOnly: readOnly,
disabled: disabled,
settings: settings,
InputMode: InputMode,
autoFocus: autoFocus,
whitelist: whitelist,
tagifyRef: ref,
placeholder: placeholder,
defaultValue: defaultValue,
showDropdown: showDropdown,
withSuggestions: withSuggestions,
amountOfDuplicates: amountOfDuplicates,
ariaLabel: props.label ?? ariaLabel
}, children));
});
TagifyInput.displayName = 'TagifyInput';
TagifyInput.defaultProps = TAGIFY_DEFAULT_PROPS;
TagifyInput.propTypes = {
..._components.INPUT_WRAPPER_PROP_TYPES,
name: _propTypes.default.string,
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
loading: _propTypes.default.bool,
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
onChange: _propTypes.default.func,
readOnly: _propTypes.default.bool,
settings: _propTypes.default.object,
InputMode: _propTypes.default.string,
autoFocus: _propTypes.default.bool,
className: _propTypes.default.string,
tagifyRef: _propTypes.default.object,
whitelist: _propTypes.default.array,
placeholder: _propTypes.default.string,
defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
showDropdown: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
withSuggestions: _propTypes.default.bool,
amountOfDuplicates: _propTypes.default.number,
onInput: _propTypes.default.func,
onAdd: _propTypes.default.func,
onRemove: _propTypes.default.func,
onEditInput: _propTypes.default.func,
onEditBeforeUpdate: _propTypes.default.func,
onEditUpdated: _propTypes.default.func,
onEditStart: _propTypes.default.func,
onEditKeydown: _propTypes.default.func,
onInvalid: _propTypes.default.func,
onClick: _propTypes.default.func,
onKeydown: _propTypes.default.func,
onFocus: _propTypes.default.func,
onBlur: _propTypes.default.func,
onDropdownShow: _propTypes.default.func,
onDropdownHide: _propTypes.default.func,
onDropdownSelect: _propTypes.default.func,
onDropdownScroll: _propTypes.default.func,
onDropdownNoMatch: _propTypes.default.func,
onDropdownUpdated: _propTypes.default.func
};