@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
220 lines (219 loc) • 8.58 kB
JavaScript
import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React__default, { createContext, useImperativeHandle, useCallback, useContext, useState, useEffect } from "react";
import { CheckDisabled, Checked, CheckNormal } from "@nutui/icons-react-taro";
import classNames from "classnames";
import { View } from "@tarojs/components";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
const CheckboxGroupContext = createContext(null);
const defaultProps$1 = {
max: void 0,
min: void 0,
list: false,
labelPosition: "right",
direction: "vertical",
onChange: (value) => {
},
onLimit: (type) => {
},
options: []
};
const classPrefix$1 = "nut-checkboxgroup";
const CheckboxGroup = React__default.forwardRef((props, ref) => {
const _a = Object.assign(Object.assign({}, defaultProps$1), props), { children, className, disabled, list, value, defaultValue, max, min, labelPosition, direction, options, onChange, onLimit } = _a, rest = __rest(_a, ["children", "className", "disabled", "list", "value", "defaultValue", "max", "min", "labelPosition", "direction", "options", "onChange", "onLimit"]);
useImperativeHandle(ref, () => ({
toggle(state) {
if (state === false) {
setValue([]);
} else {
const childrenLabel = [];
React__default.Children.map(children, (child) => {
const childProps = child.props;
childrenLabel.push(childProps.value);
});
setValue(childrenLabel);
}
},
reverse() {
const childrenLabel = [];
React__default.Children.map(children, (child) => {
const childProps = child.props;
childrenLabel.push(childProps.value);
});
const reverse = childrenLabel.filter((c) => (_value === null || _value === void 0 ? void 0 : _value.findIndex((v) => v === c)) === -1);
setValue(reverse);
}
}));
const [_value, setValue] = usePropsValue({
value,
defaultValue,
finalValue: [],
onChange
});
const renderOptions = useCallback(() => {
return options === null || options === void 0 ? void 0 : options.map((_a2) => {
var { label, value: value2, disabled: disabled2, onChange: onChange2 } = _a2, rest2 = __rest(_a2, ["label", "value", "disabled", "onChange"]);
return React__default.createElement(Checkbox, Object.assign({ key: value2 === null || value2 === void 0 ? void 0 : value2.toString(), label, disabled: disabled2, value: value2 }, rest2));
});
}, [options, max, min]);
return React__default.createElement(
CheckboxGroupContext.Provider,
{ value: {
labelPosition: labelPosition || "right",
disabled,
max,
list,
onLimit,
value: _value,
check: (value2) => {
const combined = [..._value, value2];
if (max !== void 0) {
if (combined.length > max) {
return onLimit === null || onLimit === void 0 ? void 0 : onLimit("max");
}
}
setValue(combined);
},
uncheck: (value2) => {
const reduced = _value.filter((item) => item !== value2);
if (min !== void 0 && reduced.length < min) {
return onLimit === null || onLimit === void 0 ? void 0 : onLimit("min");
}
setValue(reduced);
}
} },
React__default.createElement("div", Object.assign({ className: classNames(classPrefix$1, {
[`nut-checkboxgroup-${direction}`]: direction,
[`nut-checkboxgroup-list`]: list
}, className) }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptions() : children)
);
});
CheckboxGroup.displayName = "NutCheckboxGroup";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { disabled: false, shape: "round", labelPosition: "right", icon: null, activeIcon: null, indeterminateIcon: null, onChange: (value) => {
} });
const classPrefix = "nut-checkbox";
const Checkbox = (props) => {
const { children } = Object.assign(Object.assign({}, defaultProps), props);
const _a = props, { icon, label, className, activeIcon, checked, value, defaultChecked, shape, disabled, onChange, indeterminate, indeterminateIcon } = _a, others = __rest(_a, ["icon", "label", "className", "activeIcon", "checked", "value", "defaultChecked", "shape", "disabled", "onChange", "indeterminate", "indeterminateIcon"]);
let { labelPosition } = others, rest = __rest(others, ["labelPosition"]);
const ctx = useContext(CheckboxGroupContext);
let [innerChecked, setChecked] = usePropsValue({
value: checked,
defaultValue: defaultChecked,
finalValue: defaultChecked,
onChange
});
let [innerDisabled, setDisabled] = useState(disabled);
const [innerIndeterminate, setIndeterminate] = useState(indeterminate);
useEffect(() => {
setDisabled(disabled);
}, [disabled]);
useEffect(() => {
setIndeterminate(indeterminate);
}, [indeterminate]);
if (ctx) {
if (ctx.labelPosition !== void 0) {
labelPosition = ctx.labelPosition;
}
innerDisabled = ctx.disabled !== void 0 ? ctx.disabled : innerDisabled;
innerChecked = ctx.value.includes(value);
setChecked = (checked2) => {
if (ctx.disabled)
return;
if (checked2)
ctx.check(value);
if (!checked2)
ctx.uncheck(value);
};
}
const renderIcon = () => {
if (innerDisabled) {
if (innerIndeterminate) {
return React__default.createElement(CheckDisabled, { className: color() });
}
if (innerChecked) {
return React__default.createElement(Checked, { className: color() });
}
return React__default.createElement(CheckDisabled, { className: color() });
}
if (!innerChecked) {
return React__default.isValidElement(icon) ? icon : React__default.createElement(CheckNormal, { className: color() });
}
if (innerIndeterminate) {
return React__default.isValidElement(indeterminateIcon) ? indeterminateIcon : React__default.createElement(CheckDisabled, { className: color() });
}
return React__default.isValidElement(activeIcon) ? activeIcon : React__default.createElement(Checked, { className: color() });
};
const color = () => {
const cls = `${classPrefix}-icon `;
if (innerDisabled) {
if (innerChecked && !innerIndeterminate) {
return `${cls}${classPrefix}-icon-checked ${classPrefix}-icon-disabled`;
}
if (innerChecked && innerIndeterminate) {
return `${cls}${classPrefix}-icon-indeterminate ${classPrefix}-icon-disabled`;
}
return `${cls}${classPrefix}-icon-disabled`;
}
if (innerChecked) {
if (innerIndeterminate) {
return `${cls}${classPrefix}-icon-indeterminate`;
}
return `${cls}${classPrefix}-icon-checked`;
}
return cls;
};
const renderLabel = () => {
return React__default.createElement("span", { className: classNames(`${classPrefix}-label `, {
[`${classPrefix}-label-disabled`]: innerDisabled
}) }, children || label);
};
const handleClick = () => {
if (disabled)
return;
const latestChecked = !innerChecked;
setChecked(latestChecked);
};
const renderButton = () => {
return React__default.createElement(
View,
{ className: classNames(`${classPrefix}-button`, {
[`${classPrefix}-button-active`]: innerChecked,
[`${classPrefix}-button-disabled`]: disabled
}) },
children || label,
innerChecked && activeIcon ? React__default.createElement(View, { className: classNames(`${classPrefix}-button-icon`) }, activeIcon) : null
);
};
const renderListItem = () => {
return React__default.createElement(
View,
{ className: "nut-checkbox-list-item" },
renderLabel(),
renderIcon()
);
};
const renderCheckboxItem = () => {
if (ctx === null || ctx === void 0 ? void 0 : ctx.list) {
return React__default.createElement(React__default.Fragment, null, renderListItem());
}
if (shape === "button") {
return renderButton();
}
return React__default.createElement(
React__default.Fragment,
null,
renderIcon(),
renderLabel()
);
};
return React__default.createElement(View, Object.assign({ className: classNames(classPrefix, {
[`${classPrefix}-reverse`]: labelPosition === "left"
}, className) }, rest, { onClick: handleClick }), renderCheckboxItem());
};
Checkbox.displayName = "NutCheckBox";
Checkbox.Group = CheckboxGroup;
export {
Checkbox as C,
CheckboxGroup as a
};