@sms-frontend/components
Version:
SMS Design React UI Library.
177 lines (176 loc) • 9.59 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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
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 classNames_1 = __importDefault(require("../_util/classNames"));
var Input_1 = __importDefault(require("../Input"));
var ConfigProvider_1 = require("../ConfigProvider");
var useMergeValue_1 = __importDefault(require("../_util/hooks/useMergeValue"));
var select_1 = __importDefault(require("../Select/select"));
var utils_1 = require("../Select/utils");
var keycode_1 = require("../_util/keycode");
var omit_1 = __importDefault(require("../_util/omit"));
var IconLoading_1 = __importDefault(require("../../icon/react-icon-cjs/IconLoading"));
var useMergeProps_1 = __importDefault(require("../_util/hooks/useMergeProps"));
var IMPOSSIBLE_VALUE = "Autocomplete_" + Math.random();
var Option = select_1.default.Option;
var defaultProps = {
defaultActiveFirstOption: true,
triggerElement: react_1.default.createElement(Input_1.default, null),
};
function AutoComplete(baseProps, ref) {
var _a = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _a.getPrefixCls, componentConfig = _a.componentConfig;
var props = (0, useMergeProps_1.default)(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.AutoComplete);
var style = props.style, className = props.className, children = props.children, data = props.data, defaultValue = props.defaultValue, propValue = props.value, placeholder = props.placeholder, error = props.error, disabled = props.disabled, strict = props.strict, allowClear = props.allowClear, loading = props.loading, defaultActiveFirstOption = props.defaultActiveFirstOption, triggerElement = props.triggerElement, getPopupContainer = props.getPopupContainer, dropdownRender = props.dropdownRender, virtualListProps = props.virtualListProps, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onSearch = props.onSearch, onSelect = props.onSelect, onPressEnter = props.onPressEnter, inputProps = props.inputProps;
var _b = __read((0, useMergeValue_1.default)('', {
defaultValue: defaultValue,
value: propValue,
}), 2), value = _b[0], setValue = _b[1];
var _c = __read((0, react_1.useState)(false), 2), isFocused = _c[0], setIsFocused = _c[1];
var refInput = (0, react_1.useRef)(null);
var refSelect = (0, react_1.useRef)(null);
var prefixCls = getPrefixCls('autocomplete');
var filterOption = 'filterOption' in props
? props.filterOption
: function (inputValue, option) {
if (strict) {
return option.props.value.indexOf(inputValue) > -1;
}
return option.props.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
};
var childNodes = react_1.default.Children.toArray(children);
var selectChildren = null;
if (childNodes.length && ((0, utils_1.isSelectOption)(childNodes[0]) || (0, utils_1.isSelectOptGroup)(childNodes[0]))) {
selectChildren = children;
}
else if (data && data.length) {
selectChildren = data.map(function (item, index) {
if ((0, react_1.isValidElement)(item)) {
return item;
}
if (typeof item === 'string') {
return (react_1.default.createElement(Option, { key: index, value: item }, item));
}
if (typeof item === 'object') {
var _a = item, value_1 = _a.value, name_1 = _a.name;
return (react_1.default.createElement(Option, { key: index, value: value_1, extra: (0, omit_1.default)(item, ['value', 'name']) }, name_1));
}
return null;
});
}
(0, react_1.useImperativeHandle)(ref, function () { return refInput.current; });
var TriggerElement = react_1.default.cloneElement(triggerElement, __assign(__assign({ ref: function (node) {
refInput.current = node;
var originRef = triggerElement.ref;
if (typeof originRef === 'function') {
originRef(node);
}
}, className: (0, classNames_1.default)("" + prefixCls, inputProps && inputProps.className, className), style: style, value: value, placeholder: placeholder, error: error, disabled: disabled, allowClear: allowClear }, inputProps), {
// Empty tag to ensure the consistency of the dom structure of input, such that input won't accidentally lose focus due to structure change on input.
suffix: loading ? react_1.default.createElement(IconLoading_1.default, null) : (inputProps === null || inputProps === void 0 ? void 0 : inputProps.suffix) || react_1.default.createElement("i", null), onFocus: function (event) {
setIsFocused(true);
onFocus && onFocus(event);
inputProps && inputProps.onFocus && inputProps.onFocus(event);
}, onBlur: function (event) {
setIsFocused(false);
onBlur && onBlur(event);
inputProps && inputProps.onBlur && inputProps.onBlur(event);
}, onKeyDown: function (event) {
var keyCode = event.keyCode || event.which;
refSelect.current && refSelect.current.hotkeyHandler(event);
if (keyCode === keycode_1.Enter.code && onPressEnter) {
var activeOption = void 0;
if (refSelect.current) {
activeOption = refSelect.current.getOptionInfoByValue(refSelect.current.activeOptionValue);
}
onPressEnter(event, activeOption);
}
if (keyCode === keycode_1.Esc.code) {
refInput.current && refInput.current.blur && refInput.current.blur();
}
inputProps && inputProps.onKeyDown && inputProps.onKeyDown(event);
}, onChange: function (value, event) {
setValue(value);
onSearch && onSearch(value);
onChange && onChange(value);
inputProps && inputProps.onChange && inputProps.onChange(value, event);
} }));
var triggerProps = __assign(__assign({ popupVisible: !!(isFocused && ((data === null || data === void 0 ? void 0 : data.length) || react_1.default.Children.count(children))) }, props.triggerProps), {
// Other trigger types are not supported yet
trigger: 'focus', className: [prefixCls + "-popup"].concat(props.triggerProps && props.triggerProps.className) });
var selectProps = {
triggerElement: TriggerElement,
// Guarantee that onChange can always be triggered
value: IMPOSSIBLE_VALUE,
inputValue: value,
defaultActiveFirstOption: defaultActiveFirstOption,
triggerProps: triggerProps,
getPopupContainer: getPopupContainer,
dropdownRender: dropdownRender,
filterOption: filterOption,
virtualListProps: virtualListProps,
notFoundContent: null,
onChange: function (value, option) {
setValue(value);
onChange && onChange(value, option);
value && onSelect && onSelect(value, option);
// Blur the input on option change
refInput.current && refInput.current.blur && refInput.current.blur();
},
};
return (react_1.default.createElement(select_1.default, __assign({ ref: refSelect }, selectProps), selectChildren));
}
var ForwardRefAutoComplete = react_1.default.forwardRef(AutoComplete);
var AutoCompleteComponent = ForwardRefAutoComplete;
AutoCompleteComponent.displayName = 'AutoComplete';
AutoCompleteComponent.Option = select_1.default.Option;
AutoCompleteComponent.OptGroup = select_1.default.OptGroup;
exports.default = AutoCompleteComponent;