@kbfront/kb-ui
Version:
KB React UI Library
258 lines • 13.6 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var uid_1 = require("utils/toastr/uid");
require("./index.scss");
var SelectChevron_1 = __importDefault(require("./SelectChevron"));
var SelectClearButton_1 = __importDefault(require("./SelectClearButton"));
var SelectFormLabel_1 = __importDefault(require("./SelectFormLabel"));
var SelectMultipleValue_1 = __importDefault(require("./SelectMultipleValue"));
var SelectOption_1 = __importDefault(require("./SelectOption"));
var SelectSearchInput_1 = __importDefault(require("./SelectSearchInput"));
var Select = react_1.forwardRef(function (props, ref) {
var options = props.options, _a = props.name, name = _a === void 0 ? 'kbSelect' : _a, _b = props.label, label = _b === void 0 ? 'Select...' : _b, _c = props.searchLabel, searchLabel = _c === void 0 ? 'search...' : _c, _d = props.searchable, searchable = _d === void 0 ? false : _d, _e = props.clearable, clearable = _e === void 0 ? false : _e, _f = props.formGroupLabel, formGroupLabel = _f === void 0 ? '' : _f, _g = props.multiple, multiple = _g === void 0 ? false : _g, _h = props.disabled, disabled = _h === void 0 ? false : _h, _j = props.required, required = _j === void 0 ? false : _j, onChange = props.onChange, defaultValue = props.defaultValue, _k = props.className, className = _k === void 0 ? '' : _k, _id = props._id, others = __rest(props, ["options", "name", "label", "searchLabel", "searchable", "clearable", "formGroupLabel", "multiple", "disabled", "required", "onChange", "defaultValue", "className", "_id"]);
react_1.useLayoutEffect(function () {
var _a, _b;
if ((_b = (_a = kbSelectList === null || kbSelectList === void 0 ? void 0 : kbSelectList.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('show'))
document.addEventListener('click', ClickOutside);
return function () {
document.removeEventListener('click', ClickOutside);
};
});
var selectedOption = react_1.useRef(null);
var kbSelectWrapper = react_1.useRef(null);
var kbSelectList = react_1.useRef(null);
var _l = react_1.useState(false), show = _l[0], toggle = _l[1];
var _m = react_1.useState(''), filterTerm = _m[0], setTerm = _m[1];
var _o = react_1.useState([]), multipleValues = _o[0], setMultipleValues = _o[1];
var _p = react_1.useState(options), filterResults = _p[0], setfilterResults = _p[1];
var _q = react_1.useState(options), updatedOptions = _q[0], updateOptions = _q[1];
// main select values
var _r = react_1.useState([]), selectValuesArray = _r[0], addValueToArray = _r[1];
var _s = react_1.useState(), selectValue = _s[0], addSelectValue = _s[1];
var unique = uid_1.uid();
/**
* @description show and hide of select list
*/
var handleSelectDropdown = function () {
if (disabled) {
return;
}
toggle(!show);
};
/**
* @description handles selecting value
*/
var chooseValue = function (option) {
var _a;
var value = option.value, label = option.label, text = option.text, tags = option.tags;
if (multiple) {
var values = __spreadArrays(multipleValues);
var SelectValues = __spreadArrays(selectValuesArray, [value]);
addValueToArray(SelectValues);
if ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.current) === null || _a === void 0 ? void 0 : _a.style) {
selectedOption.current.style.display = 'none';
}
values.push({ value: value, label: label, text: text || tags });
setMultipleValues(__spreadArrays(values));
var lastUpdatedOptions = updatedOptions.filter(function (option) { return option.value !== value; });
setfilterResults(lastUpdatedOptions);
updateOptions(lastUpdatedOptions);
if (onChange)
onChange(SelectValues);
toggle(false);
setTerm('');
return;
}
if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.current) {
selectedOption.current.innerHTML = text || tags;
addSelectValue(value); // setting selected value to main select
}
if (onChange)
onChange(value); // pushed current value to onChange event
toggle(false);
setTerm('');
};
/**
* @description remove selected Element on multiple select
*/
var removeSelectedElement = function (e, i) {
var _a;
if (!disabled) {
var values = __spreadArrays(multipleValues);
var removedElement = multipleValues.find(function (el) { var _a; return el.value === Number((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('data-value')); });
var lastUpdatedOptions = __spreadArrays(filterResults, [removedElement]);
setfilterResults(lastUpdatedOptions.sort(function (v1, v2) { return v1.value - v2.value; }));
updateOptions(lastUpdatedOptions);
values.splice(i, 1);
setMultipleValues(values);
var SelectValues = __spreadArrays(selectValuesArray);
SelectValues.splice(i, 1);
addValueToArray(SelectValues);
e.stopPropagation();
if (!values.length) {
if ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.current) === null || _a === void 0 ? void 0 : _a.style) {
selectedOption.current.style.display = 'block';
}
}
if (onChange)
onChange(SelectValues);
}
};
/**
* @description remove all selected Elements
*/
var removeAllSelectedElement = react_1.useCallback(function () {
var _a;
if (disabled) {
return;
}
if (multiple) {
setMultipleValues([]);
updateOptions(options);
setfilterResults(options);
addValueToArray([]);
if ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.current) === null || _a === void 0 ? void 0 : _a.style) {
selectedOption.current.style.display = 'block';
}
return;
}
if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.current) {
selectedOption.current.textContent = label;
}
addSelectValue('');
}, []);
react_1.useEffect(function () {
if (defaultValue) {
if (multiple) {
setMultipleValues(defaultValue);
var values_1 = [];
defaultValue.map(function (x) { return values_1.push(x.value); });
addValueToArray(values_1);
selectedOption.current.style.display = 'none';
return;
}
selectedOption.current.innerHTML = defaultValue.text;
addSelectValue(defaultValue.value); // setting selected value to main select
}
}, [defaultValue]);
/**
* @description add search term on keyup of filter input
*/
var onFilterChange = react_1.useCallback(function (e) {
setTerm(e.target.value);
}, []);
/**
* @description toggles selectbox on click outside of wrapper
*/
var ClickOutside = function (e) {
var _a;
console.log('clicked outside');
if (((_a = kbSelectWrapper === null || kbSelectWrapper === void 0 ? void 0 : kbSelectWrapper.current) === null || _a === void 0 ? void 0 : _a.contains) && !kbSelectWrapper.current.contains(e.target) && !disabled) {
console.log('clicked outside exact');
toggle(!show);
setTerm('');
}
};
react_1.useEffect(function () {
if (filterTerm && filterTerm.length) {
var filter = function (option) {
if (option.text) {
return option.text.toLowerCase().includes(filterTerm.toLowerCase());
}
else {
return false;
}
};
var filterResults_1 = multiple ? updatedOptions.filter(filter) : options.filter(filter);
setfilterResults(filterResults_1); // setting filtered values
}
else {
setfilterResults(multiple ? updatedOptions : options);
}
}, [filterTerm, searchable]);
react_1.useEffect(function () {
setfilterResults(options);
}, [options]);
react_1.useEffect(function () {
if (multiple && defaultValue) {
var comparedArray = updatedOptions.filter(function (x) { return !defaultValue.includes(x); });
updateOptions(comparedArray);
setfilterResults(comparedArray);
}
}, [defaultValue]);
var results = react_1.useMemo(function () {
return filterResults.map(function (option, index) { return (react_1.default.createElement(SelectOption_1.default, { option: option, chooseValue: function () { return chooseValue(option); }, key: index })); });
}, [filterResults]);
var multiples = react_1.useMemo(function () {
return multipleValues.map(function (value, i) {
return react_1.default.createElement(SelectMultipleValue_1.default, { option: value, handleRemove: function (e) { return removeSelectedElement(e, i); }, key: i });
});
}, [multipleValues]);
return (react_1.default.createElement("div", { className: "kb-select " + className, ref: kbSelectWrapper },
react_1.default.createElement("input", __assign({ type: "hidden", name: name, id: _id || "kb-select_" + unique }, others, { ref: ref }, { defaultValue: multiple ? JSON.stringify(selectValuesArray) : selectValue, required: required })),
formGroupLabel && react_1.default.createElement(SelectFormLabel_1.default, { _htmlFor: _id || "kb-select_" + unique, label: formGroupLabel }),
react_1.default.createElement("div", { className: "kb-select_wrapper " + (multiple ? 'multiple' : '') + " " + (show ? 'show' : '') },
react_1.default.createElement("div", { className: "kb-select_box " + (disabled ? 'disabled' : '') + " " + (clearable ? 'clearable' : ''), onClick: handleSelectDropdown },
react_1.default.createElement("div", { className: "kb-select_label", ref: selectedOption },
react_1.default.createElement("span", null, label)),
multiples,
clearable && react_1.default.createElement(SelectClearButton_1.default, { handleClear: removeAllSelectedElement }),
react_1.default.createElement(SelectChevron_1.default, null)),
react_1.default.createElement("div", { className: "kb-select_list " + (show ? 'show' : ''), ref: kbSelectList },
searchable && (react_1.default.createElement(SelectSearchInput_1.default, { searchLabel: searchLabel, filterTerm: filterTerm, onChange: onFilterChange })),
react_1.default.createElement("ul", null, results)))));
});
exports.default = Select;
//# sourceMappingURL=index.js.map