@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
217 lines (216 loc) • 11.8 kB
JavaScript
import { _ as _call_super } from "@swc/helpers/_/_call_super";
import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
import { _ as _create_class } from "@swc/helpers/_/_create_class";
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _inherits } from "@swc/helpers/_/_inherits";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import React from "react";
import { Context } from "../form/context";
import Cell from "../cell";
import { ComponentDefaults } from "../../utils/typings";
import { isForwardRefComponent } from "../../utils/is-forward-ref-component";
import { toArray } from "../../utils/to-array";
import { SECRET } from "../form/useform";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
required: false,
name: '',
label: '',
rules: [
{
required: false,
message: ''
}
],
errorMessageAlign: 'left',
shouldUpdate: false,
noStyle: false
});
var _React_Component;
export var FormItem = /*#__PURE__*/ function(_superClass) {
"use strict";
_inherits(FormItem, _superClass);
function FormItem(props) {
_class_call_check(this, FormItem);
var _this;
_this = _call_super(this, FormItem, [
props
]), _define_property(_this, "cancelRegister", void 0), _define_property(_this, "componentRef", void 0), _define_property(_this, "eventOff", void 0), // children添加value属性和onChange事件
_define_property(_this, "getControlled", function(children) {
var _children_props;
var _this_context_formInstance = _this.context.formInstance, setFieldsValue = _this_context_formInstance.setFieldsValue, getFieldValue = _this_context_formInstance.getFieldValue;
var dispatch = _this.context.formInstance.getInternal(SECRET).dispatch;
var _this_props = _this.props, _this_props_name = _this_props.name, name = _this_props_name === void 0 ? '' : _this_props_name;
if (children === null || children === void 0 ? void 0 : (_children_props = children.props) === null || _children_props === void 0 ? void 0 : _children_props.defaultValue) {
if (process.env.NODE_ENV !== 'production') {
console.warn('[NutUI] FormItem:', '请通过 initialValue 设置初始值，而不是 defaultValue');
}
}
var fieldValue = getFieldValue(name);
var _obj;
var controlled = _object_spread_props(_object_spread({}, children.props), (_obj = {
className: children.props.className
}, _define_property(_obj, _this.props.valuePropName || 'value', fieldValue !== undefined ? fieldValue : _this.props.initialValue), _define_property(_obj, _this.props.trigger || 'onChange', function() {
for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
args[_key] = arguments[_key];
}
// args [a, b]
var originOnChange = children.props[_this.props.trigger || 'onChange'];
if (originOnChange) {
originOnChange.apply(void 0, _to_consumable_array(args));
}
var _args = _sliced_to_array(args, 1), next = _args[0];
if (_this.props.getValueFromEvent) {
var _this_props;
next = (_this_props = _this.props).getValueFromEvent.apply(_this_props, _to_consumable_array(args));
}
setFieldsValue(_define_property({}, name, next));
}), _obj));
var validateTrigger = _this.props.validateTrigger;
var mergedValidateTrigger = validateTrigger || _this.context.validateTrigger;
var validateTriggers = toArray(mergedValidateTrigger);
validateTriggers.forEach(function(trigger) {
var originTrigger = controlled[trigger];
controlled[trigger] = function() {
for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
args[_key] = arguments[_key];
}
if (originTrigger) {
originTrigger.apply(void 0, _to_consumable_array(args));
}
if (_this.props.rules && _this.props.rules.length) {
dispatch({
name: _this.props.name
});
}
};
});
if (isForwardRefComponent(children)) {
controlled.ref = function(componentInstance) {
var originRef = children.ref;
if (originRef) {
if (typeof originRef === 'function') {
originRef(componentInstance);
}
if ('current' in originRef) {
originRef.current = componentInstance;
}
}
_this.componentRef = componentInstance;
};
}
return controlled;
}), _define_property(_this, "refresh", function() {
_this.setState(function(param) {
var resetCount = param.resetCount;
return {
resetCount: resetCount + 1
};
});
}), _define_property(_this, "onStoreChange", function(type) {
if (type === 'reset') {
_this.context.formInstance.errors[_this.props.name] = [];
_this.refresh();
} else {
_this.forceUpdate();
}
}), _define_property(_this, "renderLayout", function(childNode) {
var _$_object_spread = _object_spread({}, defaultProps, _this.props), label = _$_object_spread.label, name = _$_object_spread.name, required = _$_object_spread.required, rules = _$_object_spread.rules, className = _$_object_spread.className, style = _$_object_spread.style, errorMessageAlign = _$_object_spread.errorMessageAlign, align = _$_object_spread.align;
var requiredInRules = rules === null || rules === void 0 ? void 0 : rules.some(function(rule) {
return rule.required;
});
var item = name ? _this.context.formInstance.errors[name] : [];
var starPosition = _this.context.formInstance.starPosition;
var renderStar = (required || requiredInRules) && /*#__PURE__*/ React.createElement("div", {
className: "nut-form-item-label-required required"
}, "*");
var renderLabel = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
className: "nut-form-item-labeltxt"
}, starPosition === 'left' ? renderStar : null, label), starPosition === 'right' ? renderStar : null);
return /*#__PURE__*/ React.createElement(Cell, {
className: "".concat(_this.getClassNameWithDirection('nut-form-item'), " ").concat(className),
style: style,
align: align,
onClick: function(e) {
return _this.props.onClick && _this.props.onClick(e, _this.componentRef);
}
}, label ? /*#__PURE__*/ React.createElement("div", {
className: "nut-cell-title ".concat(_this.getClassNameWithDirection('nut-form-item-label'))
}, renderLabel) : null, /*#__PURE__*/ React.createElement("div", {
className: "nut-cell-value ".concat(_this.getClassNameWithDirection('nut-form-item-body'))
}, /*#__PURE__*/ React.createElement("div", {
className: "nut-form-item-body-slots"
}, childNode), item && item.length > 0 && /*#__PURE__*/ React.createElement("div", {
className: "nut-form-item-body-tips",
style: {
textAlign: errorMessageAlign
}
}, item[0].message)));
});
_this.componentRef = /*#__PURE__*/ React.createRef();
_this.state = {
resetCount: 1
};
return _this;
}
_create_class(FormItem, [
{
key: "componentDidMount",
value: function componentDidMount() {
// Form设置initialValues时的处理
var _this_context_formInstance_getInternal = this.context.formInstance.getInternal(SECRET), _this_context_formInstance_getInternal_store = _this_context_formInstance_getInternal.store, store = _this_context_formInstance_getInternal_store === void 0 ? {} : _this_context_formInstance_getInternal_store, setInitialValues = _this_context_formInstance_getInternal.setInitialValues;
if (this.props.initialValue && this.props.name && !Object.keys(store).includes(this.props.name)) {
setInitialValues(_object_spread_props(_object_spread({}, store), _define_property({}, this.props.name, this.props.initialValue)), true);
}
// 注册组件实例到FormStore
var _this_context_formInstance_getInternal1 = this.context.formInstance.getInternal(SECRET), registerField = _this_context_formInstance_getInternal1.registerField, registerUpdate = _this_context_formInstance_getInternal1.registerUpdate;
this.cancelRegister = registerField(this);
// 这里需要增加事件监听，因为此实现属于依赖触发
this.eventOff = registerUpdate(this, this.props.shouldUpdate);
}
},
{
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.cancelRegister) {
this.cancelRegister();
}
if (this.eventOff) {
this.eventOff();
}
}
},
{
key: "getClassNameWithDirection",
value: function getClassNameWithDirection(className) {
if (className && this.context.labelPosition) {
return "".concat(className, " ").concat(className, "-").concat(this.context.labelPosition);
}
return className;
}
},
{
key: "render",
value: function render() {
var children = this.props.children;
var child = Array.isArray(children) ? children[0] : children;
var returnChildNode;
if (!this.props.shouldUpdate) {
returnChildNode = /*#__PURE__*/ React.cloneElement(child, this.getControlled(child));
} else {
returnChildNode = child(this.context.formInstance);
}
return /*#__PURE__*/ React.createElement(React.Fragment, {
key: this.state.resetCount
}, /*#__PURE__*/ React.createElement("div", {
className: this.context.disabled ? 'nut-form-item-disabled' : ''
}, this.props.noStyle ? returnChildNode : this.renderLayout(returnChildNode)));
}
}
]);
return FormItem;
}(_React_Component = React.Component);
_define_property(FormItem, "defaultProps", defaultProps);
_define_property(FormItem, "contextType", Context);