xy-select
Version:
基于React的下拉列表组件
34 lines • 1.64 kB
JavaScript
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import classNames from "classnames";
import React, { useContext, useEffect, useState } from "react";
import { EXITED, useTranstion } from "utils-hooks";
import { ValueContext } from "../Context";
export function MultipleItem(props) {
var _a;
var className = props.className, style = props.style, children = props.children, value = props.value;
var _b = useState(false), destroy = _b[0], setDestroy = _b[1];
var _c = useTranstion(!destroy), ref = _c[0], state = _c[1];
var closeing = destroy ? state.indexOf("ex") !== -1 : false;
var context = useContext(ValueContext);
var prefixCls = props.prefixCls + "-item";
var classString = classNames("" + prefixCls, className, (_a = {},
_a[prefixCls + "-tag"] = true,
_a[prefixCls + "-out"] = closeing,
_a[prefixCls + "-state-" + state] = true,
_a));
useEffect(function () {
if (destroy && state === EXITED && context) {
context.onUnSelect(value);
}
}, [state]);
function removeHandle(e) {
setDestroy(true);
}
return (React.createElement("li", { className: classString, style: style, ref: ref },
React.createElement("div", { className: prefixCls + "__content" }, children),
React.createElement("span", { className: prefixCls + "__remove", "data-close": "on", onClick: removeHandle },
React.createElement(FontAwesomeIcon, { icon: faTimes }))));
}
export default React.memo(MultipleItem);
//# sourceMappingURL=MultipleItem.js.map