test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
282 lines (281 loc) • 10.5 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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), true).forEach(function(key) {
_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;
}
import React__default, { forwardRef, useState, useEffect, useImperativeHandle, useRef } from "react";
import classNames from "classnames";
import { CSSTransition } from "react-transition-group";
import { O as Overlay } from "./overlay2.js";
import { u as useClickAway } from "./use-click-away.js";
import { C as ComponentDefaults } from "./typings.js";
import Checkbox from "./Checkbox.js";
import Button from "./Button.js";
import "./index2.js";
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
columns: 1,
direction: "down",
limitNumber: 1,
icon: null,
activeIcon: null,
indeterminateIcon: null,
activeTitleClass: "",
justifyContent: "center",
inactiveTitleClass: "",
onChange: function onChange(value) {
return void 0;
}
});
var MenuItem = forwardRef(function(props, ref) {
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, options = _defaultProps$props.options, value = _defaultProps$props.value, columns = _defaultProps$props.columns, title = _defaultProps$props.title, icon = _defaultProps$props.icon, activeIcon = _defaultProps$props.activeIcon, indeterminateIcon = _defaultProps$props.indeterminateIcon, direction = _defaultProps$props.direction, onChange2 = _defaultProps$props.onChange, activeTitleClass = _defaultProps$props.activeTitleClass, inactiveTitleClass = _defaultProps$props.inactiveTitleClass, closeOnClickAway = _defaultProps$props.closeOnClickAway, children = _defaultProps$props.children, activeColor = _defaultProps$props.activeColor, show = _defaultProps$props.show, parent = _defaultProps$props.parent, index = _defaultProps$props.index, limitNumber = _defaultProps$props.limitNumber, width = _defaultProps$props.width, flex = _defaultProps$props.flex;
var _useState = useState(show), _useState2 = _slicedToArray(_useState, 2), _showPopup = _useState2[0], setShowPopup = _useState2[1];
var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), _value = _useState4[0], setValue = _useState4[1];
var init = function init2() {
var valueC = value;
if (value === void 0)
return;
if (limitNumber === 1) {
valueC = [value];
}
parent.updateInnerValue(valueC, index);
if (JSON.stringify(_value) !== JSON.stringify(valueC)) {
setValue(valueC);
}
};
useEffect(function() {
init();
}, [value]);
useEffect(function() {
setShowPopup(show);
}, [show]);
useImperativeHandle(ref, function() {
return {
toggle: parent.toggleMenuItem
};
});
var getIconCName = function getIconCName2(optionVal, value2) {
var _classNames;
var valueC = value2;
if (limitNumber === 1) {
valueC = [value2];
}
return classNames((_classNames = {}, _defineProperty(_classNames, activeTitleClass, valueC.includes(optionVal)), _defineProperty(_classNames, inactiveTitleClass, !valueC.includes(optionVal)), _classNames));
};
var handleClick = function handleClick2(item) {
if (item.disabled)
return;
if (limitNumber === 1) {
parent.updateInnerValue([item.value], index);
parent.toggleMenuItem(index);
setValue([item.value]);
onChange2 && onChange2(item);
} else {
var valueC = JSON.parse(JSON.stringify(_value));
var existIndex = valueC.findIndex(function(v) {
return item.value == v;
});
if (existIndex !== -1) {
valueC.splice(existIndex, 1);
} else {
valueC.push(item.value);
}
setValue(valueC);
}
};
var isShow = function isShow2() {
if (_showPopup)
return {};
return {
display: "none"
};
};
var getPosition = function getPosition2() {
return direction === "down" ? {
position: "absolute",
height: "".concat(window.innerHeight, "px")
} : {
position: "absolute",
bottom: "100%",
top: "auto",
height: "".concat(window.innerHeight, "px")
};
};
var micRef = useRef(null);
var targetSet = [micRef.current];
useClickAway(
function() {
parent.hideMenuItem(index);
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
targetSet,
"click",
false,
_showPopup,
closeOnClickAway
);
var _useState5 = useState(false), _useState6 = _slicedToArray(_useState5, 2), indeterminate = _useState6[0], setIndeterminate = _useState6[1];
var _useState7 = useState(false), _useState8 = _slicedToArray(_useState7, 2), selectAll = _useState8[0], setSelectAll = _useState8[1];
useEffect(function() {
if (limitNumber > 1) {
setSelectAll(_value.length > 0);
setIndeterminate(_value.length > 0 && _value.length !== options.filter(function(item) {
return !item.disabled || _value.includes(item.value);
}).length);
}
}, [_value]);
var onSelectAll = function onSelectAll2() {
if (selectAll && !indeterminate) {
setValue(_value.filter(function(item) {
return options.find(function(item2) {
return item2.value == item;
}).disabled;
}));
} else {
var valueC = JSON.parse(JSON.stringify(_value));
options.forEach(function(item) {
if (!valueC.includes(item.value) && !item.disabled) {
valueC.push(item.value);
}
});
setValue(valueC);
}
};
var onConfirm = function onConfirm2() {
parent.updateInnerValue(_value, index);
parent.toggleMenuItem(index);
onChange2 && onChange2(_value);
};
var onReset = function onReset2() {
init();
};
return React__default.createElement("div", {
className: "nut-menu-item-container",
ref: micRef,
style: {
position: "absolute",
left: 0,
right: 0
}
}, React__default.createElement(Overlay, {
className: "nut-menu__overlay",
style: getPosition(),
lockScroll: parent.lockScroll,
visible: _showPopup,
closeOnOverlayClick: parent.closeOnOverlayClick,
onClick: function onClick() {
parent.closeOnOverlayClick && parent.toggleMenuItem(index);
}
}), React__default.createElement("div", {
className: classNames(className, {
"nut-menu-item__wrap": direction === "down",
"nut-menu-item__wrap-up": direction !== "down"
}),
style: _objectSpread(_objectSpread({}, style), isShow())
}, React__default.createElement(CSSTransition, {
"in": _showPopup,
timeout: 100,
classNames: direction === "down" ? "menu-item" : "menu-item-up"
}, React__default.createElement("div", {
className: "nut-menu-item__content ".concat(direction === "down" ? "content-down" : "content-up")
}, options === null || options === void 0 ? void 0 : options.map(function(item) {
return React__default.createElement("div", {
className: "nut-menu-item__option ".concat(classNames({
active: _value.includes(item.value),
disabled: item.disabled
})),
key: item.text,
style: {
flexBasis: "".concat(100 / columns, "%")
},
onClick: function onClick() {
handleClick(item);
}
}, React__default.createElement("div", {
className: getIconCName(item.value, value),
style: {
color: "".concat(_value.includes(item.value) && !item.disabled ? activeColor : "")
}
}, React__default.createElement("div", null, item.text), item.description ? React__default.createElement("div", {
className: "nut-menu-item__option--description"
}, item.description) : React__default.createElement(React__default.Fragment, null)), limitNumber === 1 ? _value.includes(item.value) ? (
// <i>
// {icon || (
React__default.createElement(Checkbox, {
activeIcon,
icon,
style: {
"--nutui-brand-color": activeColor
},
checked: true
})
) : null : React__default.createElement(Checkbox, {
activeIcon,
icon,
style: {
"--nutui-brand-color": activeColor
},
disabled: item.disabled,
checked: _value.includes(item.value)
}));
}), children, limitNumber > 1 ? React__default.createElement("div", {
className: "nut-menu-item__content--multi"
}, React__default.createElement("div", {
onClick: onSelectAll,
className: "nut-menu-item__content--multi-all"
}, React__default.createElement(Checkbox, {
indeterminateIcon,
activeIcon,
icon,
style: {
"--nutui-brand-color": activeColor,
flexDirection: "column",
justifyContent: "center"
},
indeterminate,
checked: selectAll
}), React__default.createElement("div", {
className: "nut-menu-item__content--multi-allt-text"
}, "全选")), React__default.createElement("div", {
style: {
display: "flex"
}
}, React__default.createElement(Button, {
onClick: onReset,
style: {
"--nutui-brand-color": activeColor,
"--nutui-button-width": "140px",
marginRight: "10px"
}
}, "重置"), React__default.createElement(Button, {
onClick: onConfirm,
style: {
"--nutui-brand-color": activeColor,
"--nutui-button-width": "140px"
},
type: "primary"
}, "确定（", _value.length, "项）"))) : React__default.createElement(React__default.Fragment, null)))));
});
MenuItem.defaultProps = defaultProps;
MenuItem.displayName = "NutMenuItem";
export {
MenuItem as default
};