fomantic-ui-react
Version:
Fomantic-UI React -- A React Component Library.
425 lines (358 loc) • 15.5 kB
JavaScript
/**
* fomantic-ui-react v0.0.1-alpha.10
* (c) 2022 FireLoong <fireloong@foxmail.com>
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-6ab59a61.js');
var slicedToArray = require('../_chunks/dep-640599ea.js');
var objectWithoutProperties = require('../_chunks/dep-03754121.js');
var classNames = require('classnames');
var React = require('react');
var _ = require('lodash');
var dropdown_DropdownMenu = require('./DropdownMenu.js');
var dropdown_DropdownItem = require('./DropdownItem.js');
var dropdown_DropdownDivider = require('./DropdownDivider.js');
var dropdown_DropdownSearchInput = require('./DropdownSearchInput.js');
var icon_index = require('../icon/index.js');
var _util_reactNode = require('../_util/reactNode.js');
require('../transition/index.js');
require('../transition/Transition.js');
require('../icon/Icon.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
var _excluded = ["as", "text", "fluid", "className", "selection", "name", "value", "placeholder", "on", "search", "clearable", "noResultsMessage", "options", "onClick", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { defineProperty._defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Dropdown = function Dropdown(_ref) {
var _ref$as = _ref.as,
as = _ref$as === void 0 ? "div" : _ref$as,
text = _ref.text,
fluid = _ref.fluid,
className = _ref.className,
selection = _ref.selection,
name = _ref.name,
value = _ref.value,
placeholder = _ref.placeholder,
_ref$on = _ref.on,
on = _ref$on === void 0 ? "click" : _ref$on,
search = _ref.search,
clearable = _ref.clearable,
_ref$noResultsMessage = _ref.noResultsMessage,
noResultsMessage = _ref$noResultsMessage === void 0 ? "No results found." : _ref$noResultsMessage,
_ref$options = _ref.options,
options = _ref$options === void 0 ? [] : _ref$options,
onClick = _ref.onClick,
children = _ref.children,
props = objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
var _useState = React.useState(false),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = React.useState(text),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
textState = _useState4[0],
setTextState = _useState4[1];
var _useState5 = React.useState(value),
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
inputValue = _useState6[0],
setInputValue = _useState6[1];
var _useState7 = React.useState(),
_useState8 = slicedToArray._slicedToArray(_useState7, 2),
selectedIndex = _useState8[0],
setSelectedIndex = _useState8[1];
var _useState9 = React.useState(),
_useState10 = slicedToArray._slicedToArray(_useState9, 2),
searchElement = _useState10[0],
setSearchElement = _useState10[1];
var _useState11 = React.useState(),
_useState12 = slicedToArray._slicedToArray(_useState11, 2),
searchValue = _useState12[0],
setSearchValue = _useState12[1];
var _useState13 = React.useState(false),
_useState14 = slicedToArray._slicedToArray(_useState13, 2),
filtered = _useState14[0],
setFiltered = _useState14[1];
var ref = React.useRef();
var handleClick = function handleClick(e) {
if (on === "click") {
e.stopPropagation();
setVisible(!visible);
}
onClick === null || onClick === void 0 ? void 0 : onClick(e);
};
var handleHover = function handleHover(e) {
if (on === "hover") {
if (e.type === "mouseenter") {
setVisible(true);
} else if (e.type === "mouseleave") {
setVisible(false);
}
}
};
var handleKeyDown = function handleKeyDown(e) {
if (e.key === "Escape") {
e.stopPropagation();
setVisible(false);
}
if (search && e.key === "Enter") {
var _ref$current;
((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".menu > .item.selected")).click();
}
};
var handleHideDropdown = function handleHideDropdown() {
setVisible(false);
};
var handleSearchChange = function handleSearchChange(e) {
if (e.target.value) {
var _ref$current2;
setFiltered(true);
var endLoop = false;
(_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelectorAll(".menu > .item").forEach(function (item, index) {
setTimeout(function () {
if (item.classList.contains("filtered") === false && endLoop === false) {
setSelectedIndex(index);
endLoop = true;
}
});
});
} else {
setFiltered(false);
setSelectedIndex(0);
}
setSearchValue(e.target.value);
};
var scrollSelectedItemIntoView = function scrollSelectedItemIntoView() {
if (!ref.current) {
return;
}
var menu2 = ref.current.querySelector(".menu");
if (!menu2) {
return;
}
var item = menu2.querySelector(".item.active");
if (!item) {
return;
}
var isOutOfUpperView = item.offsetTop < menu2.scrollTop;
var isOutOfLowerView = item.offsetTop + item.clientHeight > menu2.scrollTop + menu2.clientHeight;
if (isOutOfUpperView) {
menu2.scrollTop = item.offsetTop;
} else if (isOutOfLowerView) {
menu2.scrollTop = item.offsetTop + item.clientHeight - menu2.clientHeight;
}
};
React.useEffect(function () {
if (visible) {
document.onclick = handleHideDropdown;
if (search) {
setSearchElement( /* @__PURE__ */React__default["default"].createElement(dropdown_DropdownSearchInput["default"], {
tabIndex: 0,
onChange: handleSearchChange
}));
if (value === void 0 && selectedIndex === void 0) {
setSelectedIndex(0);
}
}
} else {
document.onclick = null;
if (search) {
setSearchElement(null);
setFiltered(false);
}
}
}, [visible]);
var menu = /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null);
if (_util_reactNode.isNil(children)) {
var itemChildren = [];
if (selection) {
___default["default"].forEach(options, function (item, i) {
var handleItemClick = function handleItemClick() {
setInputValue(item.value);
setTextState(item.text);
setSelectedIndex(i);
setFiltered(false);
};
React.useEffect(function () {
if (inputValue === item.value) {
setSelectedIndex(i);
setTextState(item.text);
}
}, []);
var findValue = function findValue() {
if (filtered || searchValue) {
var _item$children;
if (typeof item.value === "string" || typeof item.value === "number") {
if (___default["default"].toLower(___default["default"].trim(item.value.toString())).includes(___default["default"].toLower(searchValue)) !== false) {
return false;
}
}
if (___default["default"].toLower(___default["default"].trim(item.text || ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.toString()))).includes(___default["default"].toLower(searchValue)) !== false) {
return false;
}
return true;
} else {
return false;
}
};
if (item.unfilterable) ;
itemChildren.push( /* @__PURE__ */React__default["default"].createElement(dropdown_DropdownItem["default"], {
className: classNames__default["default"]({
filtered: item.unfilterable ? false : findValue()
}),
key: i,
active: inputValue === item.value,
selected: selectedIndex === i,
value: item.value,
text: item.text,
onClick: handleItemClick
}));
});
menu = /* @__PURE__ */React__default["default"].createElement(dropdown_DropdownMenu["default"], {
open: visible,
onShow: scrollSelectedItemIntoView,
onHide: function onHide() {
return setSearchValue(void 0);
}
}, itemChildren);
} else {
___default["default"].forEach(options, function (item, i) {
itemChildren.push( /* @__PURE__ */React__default["default"].createElement(dropdown_DropdownItem["default"], _objectSpread({
key: i
}, item)));
});
menu = /* @__PURE__ */React__default["default"].createElement(dropdown_DropdownMenu["default"], {
open: visible
}, itemChildren);
}
} else {
var menuChild = React.Children.only(children);
if (_util_reactNode.isValidElement(menuChild)) {
if (selection) {
var _hasResults = false;
var _itemChildren = React.Children.map(menuChild.props.children, function (childItem, i) {
if (_util_reactNode.isValidElement(childItem)) {
var childItemProps = childItem.props;
React.useEffect(function () {
if (inputValue === childItemProps.value) {
setSelectedIndex(i);
setTextState(childItemProps.text);
}
}, []);
var findValue = function findValue() {
if (filtered || searchValue) {
var _childItemProps$child;
if (typeof childItemProps.value === "string" || typeof childItemProps.value === "number") {
if (___default["default"].toLower(___default["default"].trim(childItemProps.value.toString())).includes(___default["default"].toLower(searchValue)) !== false) {
_hasResults = true;
return false;
}
}
if (___default["default"].toLower(___default["default"].trim(childItemProps.text || ((_childItemProps$child = childItemProps.children) === null || _childItemProps$child === void 0 ? void 0 : _childItemProps$child.toString()))).includes(___default["default"].toLower(searchValue)) !== false) {
_hasResults = true;
return false;
}
return true;
} else {
return false;
}
};
if (childItemProps.unfilterable) {
_hasResults = true;
}
return /*#__PURE__*/React.cloneElement(childItem, {
key: i,
active: inputValue === childItemProps.value,
selected: selectedIndex === i,
className: classNames__default["default"]({
filtered: childItemProps.unfilterable ? false : findValue()
}),
onClick: function onClick() {
setInputValue(childItemProps.value);
setTextState(childItemProps.text || childItemProps.children);
setSelectedIndex(i);
setFiltered(false);
}
});
}
});
if (search && searchValue && _hasResults === false) {
_itemChildren = /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, _itemChildren, /* @__PURE__ */React__default["default"].createElement("div", {
className: "message"
}, noResultsMessage));
}
menu = /*#__PURE__*/React.cloneElement(menuChild, {
open: visible,
onShow: scrollSelectedItemIntoView,
onHide: function onHide() {
return setSearchValue(void 0);
}
}, _itemChildren);
} else {
menu = /*#__PURE__*/React.cloneElement(menuChild, {
open: visible
});
}
}
}
if (!as) {
as = "div";
}
var inputElement = /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null);
if (typeof inputValue === "string" || typeof inputValue === "number") {
inputElement = /* @__PURE__ */React__default["default"].createElement("input", {
type: "hidden",
name: name,
value: inputValue
});
} else if (typeof inputValue === "boolean") {
inputElement = /* @__PURE__ */React__default["default"].createElement("input", {
type: "hidden",
name: name,
value: inputValue ? 1 : 0
});
}
return /*#__PURE__*/React.createElement(as, _objectSpread({
ref: ref,
className: classNames__default["default"]("ui", "dropdown", {
fluid: fluid,
selection: selection,
active: selection && visible,
search: search
}, className),
onClick: handleClick,
onKeyDown: handleKeyDown,
onMouseEnter: handleHover,
onMouseLeave: handleHover,
tabIndex: "0"
}, props), /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, selection ? /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, inputElement, /* @__PURE__ */React__default["default"].createElement(icon_index.Icon, {
name: "dropdown"
}), searchElement, clearable && selectedIndex !== void 0 && /* @__PURE__ */React__default["default"].createElement(icon_index.Icon, {
name: "remove",
onClick: function onClick(e) {
e.stopPropagation();
setSelectedIndex(void 0);
setInputValue(void 0);
setTextState(void 0);
}
}), /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("text", {
"default": placeholder && !textState,
filtered: filtered
})
}, textState || placeholder)) : /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */React__default["default"].createElement("div", {
className: "text"
}, textState), /* @__PURE__ */React__default["default"].createElement(icon_index.Icon, {
name: "dropdown"
})), menu));
};
Dropdown.displayName = "Dropdown";
Dropdown.Menu = dropdown_DropdownMenu["default"];
Dropdown.Item = dropdown_DropdownItem["default"];
Dropdown.Divider = dropdown_DropdownDivider["default"];
Dropdown.SearchInput = dropdown_DropdownSearchInput["default"];
exports["default"] = Dropdown;
//# sourceMappingURL=Dropdown.js.map