fomantic-ui-react
Version:
Fomantic-UI React -- A React Component Library.
233 lines (196 loc) • 9.06 kB
JavaScript
/**
* fomantic-ui-react v0.0.1-alpha.10
* (c) 2022 FireLoong <fireloong@foxmail.com>
* @license MIT
*/
;
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 React = require('react');
var classNames = require('classnames');
var _ = require('lodash');
var search_SearchResults = require('./SearchResults.js');
var search_SearchResult = require('./SearchResult.js');
var search_SearchCategory = require('./SearchCategory.js');
var transition_index = require('../transition/index.js');
require('../_util/reactNode.js');
require('../transition/Transition.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
var _excluded = ["as", "className", "loading", "icon", "placeholder", "value", "selectFirstResult", "results", "noResultsMessage", "noResultsDescription", "showNoResults", "minCharacters", "onSearchChange", "onResultSelect"],
_excluded2 = ["childkey"];
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 Search = function Search(_ref) {
var _ref$as = _ref.as,
as = _ref$as === void 0 ? "div" : _ref$as,
className = _ref.className,
loading = _ref.loading,
icon = _ref.icon,
placeholder = _ref.placeholder,
value = _ref.value,
selectFirstResult = _ref.selectFirstResult,
results = _ref.results,
_ref$noResultsMessage = _ref.noResultsMessage,
noResultsMessage = _ref$noResultsMessage === void 0 ? "No results" : _ref$noResultsMessage,
noResultsDescription = _ref.noResultsDescription,
_ref$showNoResults = _ref.showNoResults,
showNoResults = _ref$showNoResults === void 0 ? true : _ref$showNoResults,
_ref$minCharacters = _ref.minCharacters,
minCharacters = _ref$minCharacters === void 0 ? 1 : _ref$minCharacters,
onSearchChange = _ref.onSearchChange,
onResultSelect = _ref.onResultSelect,
props = objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
var _useState = React.useState(false),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
focus = _useState2[0],
setFocus = _useState2[1];
var _useState3 = React.useState(value !== null && value !== void 0 ? value : ""),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
currentValue = _useState4[0],
setCurrentValue = _useState4[1];
var _useState5 = React.useState(false),
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
open = _useState6[0],
setOpen = _useState6[1];
var _useState7 = React.useState(false),
_useState8 = slicedToArray._slicedToArray(_useState7, 2),
transition = _useState8[0],
setTransition = _useState8[1];
var _useState9 = React.useState(selectFirstResult ? 0 : -1),
_useState10 = slicedToArray._slicedToArray(_useState9, 2),
selectedIndex = _useState10[0];
_useState10[1];
if (!as) {
as = "div";
}
var classNamesVar = {};
if (loading) {
if (typeof loading === "boolean") {
classNamesVar = {
focus: focus,
loading: loading
};
} else if (loading.color) {
var _classNamesVar;
classNamesVar = (_classNamesVar = {
focus: focus,
"double": loading["double"],
slow: loading.slow,
elastic: loading.elastic
}, defineProperty._defineProperty(_classNamesVar, loading.color, loading.color), defineProperty._defineProperty(_classNamesVar, "loading", true), _classNamesVar);
} else {
classNamesVar = {
focus: focus,
"double": loading["double"],
slow: loading.slow,
elastic: loading.elastic,
loading: true
};
}
} else {
classNamesVar = {
focus: focus
};
}
var handleInputFocus = function handleInputFocus() {
setFocus(true);
};
var handleInputBlur = function handleInputBlur() {
setFocus(false);
};
var handleSearchChange = function handleSearchChange(e) {
e.stopPropagation();
if (e.target.value.length >= minCharacters) {
setTransition(true);
onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(e);
setCurrentValue(e.target.value);
setTimeout(function () {
setOpen(e.target.value ? true : false);
});
} else {
setCurrentValue(e.target.value);
setOpen(false);
}
};
var getSelectedResult = function getSelectedResult() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selectedIndex;
return ___default["default"].get(results, index);
};
var handleItemClick = function handleItemClick(e, _ref2) {
var id = _ref2.id;
console.log(id);
var result = getSelectedResult(id);
e.nativeEvent.stopImmediatePropagation();
setCurrentValue(result.title);
onResultSelect === null || onResultSelect === void 0 ? void 0 : onResultSelect(e, result);
setOpen(false);
};
var inputElement = /*#__PURE__*/React.createElement("input", {
className: "prompt",
type: "text",
placeholder: placeholder,
autoComplete: "off",
value: currentValue,
onFocus: handleInputFocus,
onBlur: handleInputBlur,
onChange: handleSearchChange
});
var renderNoResults = /* @__PURE__ */React__default["default"].createElement("div", {
className: "message empty"
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: "header"
}, noResultsMessage), noResultsDescription && /* @__PURE__ */React__default["default"].createElement("div", {
className: "description"
}, noResultsDescription));
var renderResult = function renderResult(_ref3, index, _array) {
var childkey = _ref3.childkey,
result = objectWithoutProperties._objectWithoutProperties(_ref3, _excluded2);
var offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var offsetIndex = index + offset;
return /* @__PURE__ */React__default["default"].createElement(search_SearchResult["default"], _objectSpread(_objectSpread({
key: childkey !== null && childkey !== void 0 ? childkey : result.id || result.title
}, result), {}, {
id: offsetIndex,
onClick: handleItemClick
}));
};
var renderResults = ___default["default"].map(results, renderResult);
var renderMenuContent = function renderMenuContent() {
if (___default["default"].isEmpty(results)) {
return showNoResults ? renderNoResults : null;
}
return renderResults;
};
var renderResultsMenu = function renderResultsMenu() {
var menuContent = renderMenuContent();
if (!menuContent) {
return null;
}
return transition ? /* @__PURE__ */React__default["default"].createElement(transition_index.Transition, {
as: search_SearchResults["default"],
visible: open,
animation: "scale",
duration: 300
}, menuContent) : /* @__PURE__ */React__default["default"].createElement(search_SearchResults["default"], null, menuContent);
};
return /*#__PURE__*/React.createElement(as, _objectSpread({
className: classNames__default["default"]("ui", "search", classNamesVar, className)
}, props), /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, icon ? /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("ui", {
left: icon === "left"
}, "icon", "input")
}, inputElement, /* @__PURE__ */React__default["default"].createElement("i", {
className: "search icon"
})) : inputElement, renderResultsMenu()));
};
Search.displayName = "Search";
Search.Result = search_SearchResult["default"];
Search.Results = search_SearchResults["default"];
Search.Category = search_SearchCategory["default"];
exports["default"] = Search;
//# sourceMappingURL=Search.js.map