linkmore-design
Version:
🌈 🚀lm组件库。🚀
111 lines (108 loc) • 4.35 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["item"];
import React, { useRef, useState, useMemo, useEffect } from 'react';
import cn from 'classnames';
import VirtualList from "../../virtual-list";
import IconFont from "../../icon-font";
import InputSearchClose from "./InputSearchClose";
import { useDelayedFn } from "../hooks";
// 自定义筛选使用
var CustomSelect = function CustomSelect(_ref) {
var instance = _ref.instance;
var _instance$filters = instance.filters,
filters = _instance$filters === void 0 ? [] : _instance$filters,
_instance$filterValue = instance.filterValue,
filterValue = _instance$filterValue === void 0 ? '' : _instance$filterValue,
setFilterValue = instance.setFilterValue,
visible = instance.visible,
onEdit = instance.onEdit,
onAdd = instance.onAdd,
locale = instance.locale;
var delayedFn = useDelayedFn();
var inputRef = useRef(null);
// 搜索后的筛选项
var _useState = useState(filters),
_useState2 = _slicedToArray(_useState, 2),
options = _useState2[0],
setOptions = _useState2[1];
// 是否存在搜索, 当数据大于8时存在搜索
var isSearch = useMemo(function () {
return filters.length > 8;
}, [filters.length]);
var handleFilter = function handleFilter() {
var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var serachValues = filters.filter(function (v) {
return v.label.indexOf(val) > -1;
});
setOptions(serachValues);
};
// 单选事件
var onChange = function onChange(e, obj) {
e.preventDefault();
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue(obj.value, obj);
};
var handleAdd = function handleAdd() {
onAdd();
};
var handleEdit = function handleEdit(e, obj) {
e.stopPropagation();
onEdit(obj);
};
// 展开下拉时触发: 赋值 && 聚焦 && 重置显示内容
useEffect(function () {
if (visible) {
delayedFn(function () {
var _inputRef$current, _inputRef$current$foc;
return inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$foc = _inputRef$current.focus) === null || _inputRef$current$foc === void 0 ? void 0 : _inputRef$current$foc.call(_inputRef$current, {
cursor: 'all'
}));
});
}
}, [visible]);
return /*#__PURE__*/React.createElement("div", {
className: "filter_dropdown"
}, isSearch && /*#__PURE__*/React.createElement("div", {
className: "filter_header"
}, /*#__PURE__*/React.createElement(InputSearchClose, {
ref: inputRef,
onSearch: handleFilter,
onChange: handleFilter
})), /*#__PURE__*/React.createElement("div", {
className: "filter_body"
}, /*#__PURE__*/React.createElement(VirtualList, {
options: options,
className: "filter_list"
}, function (_ref2) {
var item = _ref2.item,
resetProps = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
className: cn('filter_item', {
checked: item.value === filterValue
}),
onClick: function onClick(e) {
return onChange(e, item);
}
}), /*#__PURE__*/React.createElement("div", {
className: "filter_item_content"
}, item.label), /*#__PURE__*/React.createElement("div", {
className: "filter_item_operate"
}, item.value && /*#__PURE__*/React.createElement("div", {
className: "icon_hover",
onClick: function onClick(e) {
return handleEdit(e, item);
}
}, /*#__PURE__*/React.createElement(IconFont, {
type: "lmweb-edit"
})), item.default && /*#__PURE__*/React.createElement("div", null, locale.default)));
}), /*#__PURE__*/React.createElement("div", {
className: "filter_item last_item",
onClick: handleAdd
}, /*#__PURE__*/React.createElement("div", {
className: "filter_item-content"
}, /*#__PURE__*/React.createElement(IconFont, {
type: "lmweb-plus"
}), locale === null || locale === void 0 ? void 0 : locale.customAdd))));
};
export default CustomSelect;