@prefect9/ui
Version:
UI React components
117 lines (116 loc) • 4.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("@prefect9/is-type");
var _icons = _interopRequireDefault(require("../icons"));
var _TextSizedField = _interopRequireDefault(require("./TextSizedField"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function TagsField(_ref) {
let {
label,
value,
onAdd: addHandler,
onDelete: deleteHandler,
showError,
errorText,
disabled
} = _ref;
const ref = (0, _react.useRef)(null);
const inputRef = (0, _react.useRef)({});
const disabledRef = (0, _react.useRef)(disabled);
(0, _react.useEffect)(() => {
disabledRef.current = disabled;
}, [disabled]);
(0, _react.useEffect)(() => {
if (!ref || !ref.current) return;
if (!inputRef || !inputRef.current) return;
if (!(0, _isType.isObj)(disabledRef)) return;
const container = ref.current;
const clickHandler = e => {
const target = e.target;
const containerParent = target.closest('.prefect9-tags');
const isContainer = target.classList.contains('prefect9-tags') && target === container || containerParent && containerParent === container;
if (!isContainer) return;
e.preventDefault();
if ((0, _isType.isTrue)(disabledRef.current)) return;
const fieldParent = target.closest('.prefect9-tags-field');
const isField = target.classList.contains('prefect9-tags-field') || fieldParent;
const labelParent = target.closest('.field-label');
const isLabel = target.classList.contains('field-label') || labelParent;
const tagParent = target.closest('.prefect9-tag-body');
const isTag = target.classList.contains('prefect9-tag-body') || tagParent;
if (isTag) {
let tag = tagParent !== null && tagParent !== void 0 ? tagParent : target;
if ((0, _isType.isFunc)(deleteHandler)) deleteHandler(tag.getAttribute('data-tag'));
} else if ((isField || isLabel) && (0, _isType.isFunc)(inputRef.current.focus)) inputRef.current.focus();
};
window.addEventListener('click', clickHandler);
return () => {
if (window) window.removeEventListener('click', clickHandler);
};
}, [ref, inputRef, disabledRef]);
const tagsContent = (0, _react.useMemo)(() => {
const result = [];
if (!(0, _isType.isArr)(value)) return [];
for (let tagId in value) {
const tag = value[tagId];
const styleBody = {};
if ((0, _isType.isStr)(tag.color)) styleBody.color = tag.color;
if ((0, _isType.isStr)(tag.backgroundColor)) styleBody.backgroundColor = tag.backgroundColor;
const styleSvg = {};
if ((0, _isType.isStr)(tag.fill)) styleSvg.fill = tag.fill;
result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "prefect9-tag",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "prefect9-tag-body",
style: styleBody,
"data-tag": tagId,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: tag.name
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.default.Close, {
style: styleSvg
})]
})
}, tagId));
}
return result;
}, [value]);
const [focus, setFocus] = (0, _react.useState)(false);
const focusHandler = (0, _react.useCallback)(newFocus => setFocus(newFocus), []);
const className = (0, _react.useMemo)(() => {
const result = ['prefect9-field', 'prefect9-tags'];
if (focus) result.push('prefect9-tags__focus');
if ((0, _isType.isTrue)(showError)) result.push('prefect9-field__invalid');
return result.join(' ');
}, [focus, showError]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: ref,
className: className,
children: [(0, _isType.isStr)(label) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "field-label",
children: label
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "prefect9-tags-field",
children: [tagsContent, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "prefect9-tag-new",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextSizedField.default, {
ref: inputRef,
value: "",
placeholder: "New tag",
onChange: addHandler,
onFocus: focusHandler,
disabled: disabled
})
})]
}), (0, _isType.isStr)(errorText) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "field-error",
children: errorText
}) : null]
});
}
var _default = exports.default = TagsField;