@roam-garden/landscaping-toolbox
Version:
Common UI things for Roam Garden management
51 lines • 2.87 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.tagInputClassesDisabled = exports.tagInputClassesInvalid = exports.tagInputClasses = exports.TagInput = void 0;
const react_tag_autocomplete_1 = __importDefault(require("react-tag-autocomplete"));
const react_1 = __importDefault(require("react"));
const _ = require("./tag-input.css");
function getClassNames(tags, minTags, disabled) {
if (disabled)
return exports.tagInputClassesDisabled;
return tags.length >= minTags ? exports.tagInputClasses : exports.tagInputClassesInvalid;
}
const TagInput = (_a) => {
var { tags, setTags, minTags = 0, maxTags, disabled } = _a, restProps = __rest(_a, ["tags", "setTags", "minTags", "maxTags", "disabled"]);
return (react_1.default.createElement(react_tag_autocomplete_1.default, Object.assign({ tags: tags, onAddition: (tag) => [setTags([...tags, tag])], onDelete: (i) => {
if (!disabled)
setTags([...tags.slice(0, i), ...tags.slice(i + 1)]);
}, classNames: getClassNames(tags, minTags, disabled), inputAttributes: { disabled: disabled || (maxTags && tags.length >= maxTags) }, addOnBlur: true, removeButtonText: disabled ? "" : undefined, maxSuggestionsLength: 99 }, restProps)));
};
exports.TagInput = TagInput;
// todo migrate to https://github.com/i-like-robots/react-tags/pull/229 when merged
exports.tagInputClasses = {
root: 'react-tags',
rootFocused: 'is-focused',
selected: 'react-tags__selected',
selectedTag: 'react-tags__selected-tag',
selectedTagName: 'react-tags__selected-tag-name',
search: 'react-tags__search',
searchWrapper: 'react-tags__search-wrapper',
searchInput: 'react-tags__search-input',
suggestions: 'react-tags__suggestions',
suggestionActive: 'is-active',
suggestionDisabled: 'is-disabled',
suggestionPrefix: 'react-tags__suggestion-prefix',
};
exports.tagInputClassesInvalid = Object.assign(Object.assign({}, exports.tagInputClasses), { root: `${exports.tagInputClasses.root} is-invalid` });
exports.tagInputClassesDisabled = Object.assign(Object.assign({}, exports.tagInputClasses), { root: `${exports.tagInputClasses.root} is-disabled` });
//# sourceMappingURL=index.js.map