@prefect9/ui
Version:
UI React components
301 lines (299 loc) • 13.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Option", {
enumerable: true,
get: function get() {
return _Option.default;
}
});
exports.default = void 0;
require("core-js/modules/es.promise.js");
require("core-js/modules/es.regexp.constructor.js");
require("core-js/modules/es.regexp.exec.js");
require("core-js/modules/es.regexp.test.js");
require("core-js/modules/es.regexp.to-string.js");
require("core-js/modules/es.string.search.js");
require("core-js/modules/es.string.trim.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("@prefect9/is-type");
var _index = require("../../index");
var _Option = _interopRequireDefault(require("./Option"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function Select(_ref) {
let {
children,
label,
multi,
className: userClassName,
disabled,
onSelect,
unSelect,
placeholder,
search: isSearch,
showError,
errorText
} = _ref;
const ref = (0, _react.useRef)(null);
const resizeRef = (0, _react.useRef)(null);
const [active, setActive] = (0, _react.useState)(false);
(0, _react.useEffect)(() => {
if (!(0, _isType.isObj)(resizeRef) || !(0, _isType.isFunc)(resizeRef.current)) return;
resizeRef.current();
}, [resizeRef, active]);
const searchId = (0, _react.useId)();
const searchRef = (0, _react.useRef)(null);
const [search, setSearch] = (0, _react.useState)('');
const options = (0, _react.useMemo)(() => {
const childrenArray = _react.Children.toArray(children);
const result = [];
for (let option of childrenArray) {
const value = option.props.value;
if (!(0, _isType.isStr)(value) || value.trim().length < 1) throw new Error('Option must have value');
const selected = option.props.selected;
const search = (0, _isType.isStr)(option.props.search) ? option.props.search : '';
result.push({
el: option,
value,
selected,
search
});
}
return result;
}, [children]);
const stateRef = (0, _react.useRef)({
active: false,
disabled: false,
hide: null
});
(0, _react.useEffect)(() => {
if (!(0, _isType.isObj)(ref) || !ref.current) return;
if (!(0, _isType.isObj)(stateRef) || !(0, _isType.isObj)(stateRef.current)) return;
const state = stateRef.current;
const show = () => {
if ((0, _isType.isTrue)(state.active)) return;
state.active = true;
setActive(true);
setSearch('');
};
const hide = () => {
if (!(0, _isType.isTrue)(state.active)) return;
state.active = false;
setActive(false);
};
state.hide = hide;
const switchActive = () => {
if ((0, _isType.isTrue)(state.active)) hide();else show();
};
const clickHandler = e => {
const target = e.target;
if (state.disabled) return;
const selectParent = target.closest('.prefect9-select');
const isSelect = target.classList.contains('prefect9-select') && target === ref.current || selectParent && selectParent === ref.current;
if (isSelect) {
const labelParent = target.closest('.prefect9-field__label');
const isLabel = target.classList.contains('prefect9-field__label') || labelParent;
const containerParent = target.closest('.prefect9-field__container');
const isContainer = target.classList.contains('prefect9-field__container') || containerParent;
const modalParent = target.closest('.prefect9-field__modal');
const isModal = target.classList.contains('prefect9-field__modal') || modalParent;
if (isLabel) switchActive();else if (isContainer && multi) {
const optionParent = target.closest('.prefect9-select__option-multi');
const isOption = target.classList.contains('prefect9-select__option-multi') || optionParent;
if (isOption) {
const option = optionParent !== null && optionParent !== void 0 ? optionParent : target;
const value = option.getAttribute('data-value');
if ((0, _isType.isFunc)(unSelect)) unSelect(value);
} else switchActive();
} else if (isContainer) switchActive();else if (isModal) {
const optionParent = target.closest('.prefect9-select__option');
const isOption = target.classList.contains('prefect9-select__option') || optionParent;
if (isOption) {
const option = optionParent !== null && optionParent !== void 0 ? optionParent : target;
const value = option.getAttribute('data-value');
const selected = option.getAttribute('data-selected');
if (selected === 'true' && (0, _isType.isFunc)(unSelect)) unSelect(value);
if (selected !== 'true' && (0, _isType.isFunc)(onSelect)) onSelect(value);
hide();
}
} else hide();
} else hide();
};
window.addEventListener('click', clickHandler);
return () => {
if (window) window.removeEventListener('click', clickHandler);
};
}, [ref, stateRef, multi, onSelect, unSelect]);
const [modalPosition, setModalPosition] = (0, _react.useState)({
left: 0,
top: 0,
width: 0
});
(0, _react.useEffect)(() => {
if (!(0, _isType.isObj)(ref) || !ref.current) return;
const container = ref.current.querySelector('.prefect9-field__container');
const resize = () => {
const size = container.getBoundingClientRect();
const left = size.left;
const top = size.height + size.top + 4;
const width = size.width;
setModalPosition(state => _objectSpread(_objectSpread({}, state), {}, {
left,
top,
width
}));
};
resize();
window.addEventListener('resize', resize, {
passive: true
});
window.addEventListener('mousewheel', resize, {
passive: true
});
if ((0, _isType.isObj)(resizeRef)) resizeRef.current = resize;
window.addEventListener('scroll', resize, {
passive: true
});
document.addEventListener('scroll', resize, {
passive: true
});
const resizeObserver = new ResizeObserver(resize);
resizeObserver.observe(container);
return () => {
if (window) window.removeEventListener('resize', resize, {
passive: true
});
if (window) window.removeEventListener('mousewheel', resize, {
passive: true
});
if (window) window.removeEventListener('scroll', resize, {
passive: true
});
if (document) document.removeEventListener('scroll', resize, {
passive: true
});
resizeObserver.disconnect();
};
}, [ref, resizeRef]);
// change disabled
(0, _react.useEffect)(() => {
if (!(0, _isType.isObj)(stateRef) || !(0, _isType.isObj)(stateRef.current)) return;
const state = stateRef.current;
if ((0, _isType.isTrue)(disabled)) {
state.disabled = true;
if ((0, _isType.isTrue)(state.active) && (0, _isType.isFunc)(state.hide)) state.hide();
} else state.disabled = false;
}, [disabled, stateRef]);
const content = (0, _react.useMemo)(() => {
const result = [];
for (let index in options) {
const option = options[index];
if (!(0, _isType.isTrue)(option.selected)) continue;
result.push( /*#__PURE__*/(0, _react.cloneElement)(option.el, _objectSpread(_objectSpread({}, option.el.props), {}, {
key: index,
selected: false,
multi
})));
if (!(0, _isType.isTrue)(multi)) break;
}
if (!result.length) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
placeholder: true,
children: (0, _isType.isStr)(placeholder) && placeholder.trim().length > 0 ? placeholder : 'Nothing is selected'
});
return result;
}, [options, multi, placeholder]);
const filteredOptions = (0, _react.useMemo)(() => {
if (!(0, _isType.isTrue)(isSearch)) return options;
if (!(0, _isType.isStr)(search) || search.trim().length < 1) return options;
const result = [];
const filter = new RegExp((0, _index.escapeRegExp)(search.trim()), 'i');
for (const option of options) {
if (!(0, _isType.isStr)(option.search) || option.search.trim().length < 1) continue;
if (!filter.test(option.search)) continue;
result.push(option);
}
return result;
}, [isSearch, search, options]);
const modalContent = (0, _react.useMemo)(() => {
const result = [];
for (let index in filteredOptions) {
const option = filteredOptions[index];
result.push( /*#__PURE__*/(0, _react.cloneElement)(option.el, _objectSpread(_objectSpread({}, option.el.props), {}, {
key: index,
multi: false
})));
}
if (result.length < 1 && (0, _isType.isTrue)(isSearch) && (0, _isType.isStr)(search) && search.trim().length > 0) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "prefect9-field__modal-empty",
children: "Nothing was found"
});
if (result.length < 1) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "prefect9-field__modal-empty",
children: "There is nothing to choose"
});
return result;
}, [filteredOptions, isSearch, search]);
const className = (0, _react.useMemo)(() => {
const result = ['prefect9-field', 'prefect9-select'];
if ((0, _isType.isTrue)(multi)) result.push('prefect9-select__multi');
if ((0, _isType.isTrue)(active)) result.push('prefect9-select__active');
if ((0, _isType.isStr)(userClassName) && userClassName.trim().length > 0) result.push(userClassName.trim());
if ((0, _isType.isTrue)(disabled)) result.push('prefect9-select__disabled');
if ((0, _isType.isTrue)(showError)) result.push('prefect9-field__invalid');
return result.join(' ');
}, [multi, active, userClassName, disabled, showError]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: ref,
className: className,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "prefect9-select__container",
children: [(0, _isType.isStr)(label) && label.trim().length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "prefect9-field__label",
children: label
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "prefect9-field__container prefect9-field-ico__right prefect9-select__body",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "prefect9-field__input",
children: content
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Icons.ArrowBottom, {
className: "prefect9-ico"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "prefect9-field__modal",
style: {
left: "".concat(modalPosition.left, "px"),
top: "".concat(modalPosition.top, "px"),
width: "".concat(modalPosition.width, "px")
},
children: [(0, _isType.isTrue)(isSearch) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "prefect9-select__search",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
htmlFor: searchId,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Icons.Search, {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
id: searchId,
placeholder: "Search",
autoComplete: "off",
value: search,
onInput: e => setSearch(e.target.value)
})]
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Scroll, {
className: "prefect9-select__modal-options",
children: modalContent
})]
})]
}), (0, _isType.isStr)(errorText) && errorText.trim().length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "prefect9-field__error",
children: errorText
}) : null]
});
}
var _default = exports.default = Select;