@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
64 lines (63 loc) • 3.04 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _type_of } from "@swc/helpers/_/_type_of";
import React, { useCallback } from "react";
import classNames from "classnames";
import { usePropsValue } from "../../hooks/use-props-value";
import { mergeProps } from "../../utils/merge-props";
var defaultProps = {
options: [],
onChange: function(value) {}
};
export var Segmented = function(props) {
var classPrefix = 'nut-segmented';
var itemClassPrefix = 'nut-segmented-item';
var mergedProps = mergeProps(defaultProps, props);
var options = mergedProps.options, onChange = mergedProps.onChange;
var _usePropsValue = _sliced_to_array(usePropsValue({
value: mergedProps.value,
defaultValue: mergedProps.defaultValue,
finalValue: 0,
onChange: mergedProps.onChange
}), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
var renderItems = useCallback(function(options, value) {
return options.map(function(option, index) {
var optionType = typeof option === "undefined" ? "undefined" : _type_of(option);
switch(optionType){
case 'object':
// eslint-disable-next-line no-case-declarations
var opt = option;
var _obj;
return /*#__PURE__*/ React.createElement("div", {
className: classNames(itemClassPrefix, (_obj = {}, _define_property(_obj, "".concat(itemClassPrefix, "-active"), opt.value === value), _define_property(_obj, "".concat(opt.className), !!opt.className), _obj)),
key: opt.value,
onClick: function() {
if (opt.disabled) return;
setValue(opt.value);
}
}, opt.icon ? /*#__PURE__*/ React.createElement("span", {
className: "nut-segmented-icon"
}, opt.icon) : null, opt.label);
default:
{
if (typeof option !== 'string' && typeof option !== 'number') {
console.warn('Unsupported option type:', optionType);
}
return /*#__PURE__*/ React.createElement("div", {
className: classNames(itemClassPrefix, _define_property({}, "".concat(itemClassPrefix, "-active"), index === value)),
key: option.toString(),
onClick: function() {
setValue(index);
}
}, option);
}
}
});
}, [
value
]);
return /*#__PURE__*/ React.createElement("div", {
className: classNames(classPrefix),
style: mergedProps.style
}, renderItems(options, value));
};