@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
305 lines (304 loc) • 11.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _noop2 = _interopRequireDefault(require("lodash/noop"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/form/foundation"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/form/constants");
var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
var _context = require("./context");
var _reactUtils = require("../_base/reactUtils");
var _row = _interopRequireDefault(require("../grid/row"));
var _index = require("../_utils/index");
var _slot = _interopRequireDefault(require("./slot"));
var _section = _interopRequireDefault(require("./section"));
var _label = _interopRequireDefault(require("./label"));
var _errorMessage = _interopRequireDefault(require("./errorMessage"));
var _group = _interopRequireDefault(require("./group"));
require("@douyinfe/semi-foundation/lib/cjs/form/form.css");
var _field = require("./field");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
const prefix = _constants.cssClasses.PREFIX;
class Form extends _baseComponent.default {
constructor(props) {
super(props);
this.state = {
formId: ''
};
(0, _warning.default)(Boolean(props.component && props.render), '[Semi Form] You should not use <Form component> and <Form render> in ths same time; <Form render> will be ignored');
(0, _warning.default)(props.component && props.children && !(0, _reactUtils.isEmptyChildren)(props.children), '[Semi Form] You should not use <Form component> and <Form>{children}</Form> in ths same time; <Form>{children}</Form> will be ignored');
(0, _warning.default)(props.render && props.children && !(0, _reactUtils.isEmptyChildren)(props.children), '[Semi Form] You should not use <Form render> and <Form>{children}</Form> in ths same time; <Form>{children}</Form> will be ignored');
this.submit = this.submit.bind(this);
this.reset = this.reset.bind(this);
this.foundation = new _foundation.default(this.adapter);
this.formApi = this.foundation.getFormApi();
if (this.props.getFormApi) {
this.props.getFormApi(this.formApi);
}
}
componentDidMount() {
this.foundation.init();
}
componentWillUnmount() {
this.foundation.destroy();
}
get adapter() {
return Object.assign(Object.assign({}, super.adapter), {
cloneDeep: _index.cloneDeep,
notifySubmit: (values, e) => {
this.props.onSubmit(values, e);
},
notifySubmitFail: (errors, values, e) => {
this.props.onSubmitFail(errors, values, e);
},
forceUpdate: callback => {
this.forceUpdate(callback);
},
notifyChange: formState => {
this.props.onChange(formState);
},
notifyValueChange: (values, changedValues) => {
this.props.onValueChange(values, changedValues);
},
notifyErrorChange: (errors, changedError) => {
this.props.onErrorChange(errors, changedError);
},
notifyReset: () => {
this.props.onReset();
},
initFormId: () => {
this.setState({
formId: (0, _uuid.getUuidv4)()
});
},
getInitValues: () => this.props.initValues,
getFormProps: keys => {
if (typeof keys === 'undefined') {
return this.props;
} else if (typeof keys === 'string') {
return this.props[keys];
} else {
const props = {};
keys.forEach(key => {
props[key] = this.props[key];
});
return props;
}
},
getAllErrorDOM: () => {
const {
formId
} = this.state;
const {
id
} = this.props;
const xId = id ? id : formId;
return document.querySelectorAll(`form[x-form-id="${xId}"] .${_constants.cssClasses.PREFIX}-field-error-message`);
},
getFieldDOM: field => {
const {
formId
} = this.state;
const {
id
} = this.props;
const xId = id ? id : formId;
return document.querySelector(`form[x-form-id="${xId}"] .${_constants.cssClasses.PREFIX}-field[x-field-id="${field}"]`);
},
getFieldErrorDOM: field => {
const {
formId
} = this.state;
const {
id
} = this.props;
const xId = id ? id : formId;
let selector = `form[x-form-id="${xId}"] .${_constants.cssClasses.PREFIX}-field[x-field-id="${field}"] .${_constants.cssClasses.PREFIX}-field-error-message`;
return document.querySelector(selector);
}
});
}
get content() {
const {
children,
component,
render
} = this.props;
const formState = this.foundation.getFormState();
const props = {
formState,
formApi: this.foundation.getFormApi(),
values: formState.values
};
if (component) {
return /*#__PURE__*/_react.default.createElement(component, props);
}
if (render) {
return render(props);
}
if (typeof children === 'function') {
return children(props);
}
return children;
}
submit(e) {
e.preventDefault();
if (this.props.stopPropagation && this.props.stopPropagation.submit) {
e.stopPropagation();
}
this.foundation.submit(e);
}
reset(e) {
e.preventDefault();
if (this.props.stopPropagation && this.props.stopPropagation.reset) {
e.stopPropagation();
}
this.foundation.reset();
}
render() {
const needClone = false;
const formState = this.foundation.getFormState(needClone);
const updaterApi = this.foundation.getModifyFormStateApi();
const {
formId
} = this.state;
const _a = this.props,
{
children,
getFormApi,
onChange,
onSubmit,
onSubmitFail,
onErrorChange,
onValueChange,
component,
render,
validateFields,
initValues,
layout,
style,
className,
labelPosition,
labelWidth,
labelAlign,
labelCol,
wrapperCol,
allowEmpty,
autoScrollToError,
showValidateIcon,
stopValidateWithError,
extraTextPosition,
id,
trigger
} = _a,
rest = __rest(_a, ["children", "getFormApi", "onChange", "onSubmit", "onSubmitFail", "onErrorChange", "onValueChange", "component", "render", "validateFields", "initValues", "layout", "style", "className", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "allowEmpty", "autoScrollToError", "showValidateIcon", "stopValidateWithError", "extraTextPosition", "id", "trigger"]);
const formCls = (0, _classnames.default)(prefix, className, {
[prefix + '-vertical']: layout === 'vertical',
[prefix + '-horizontal']: layout === 'horizontal'
});
const shouldAppendRow = wrapperCol && labelCol;
const formContent = /*#__PURE__*/_react.default.createElement("form", Object.assign({
style: style
}, rest, {
onReset: this.reset,
onSubmit: this.submit,
className: formCls,
id: id ? id : formId,
"x-form-id": id ? id : formId
}), this.content);
const withRowForm = /*#__PURE__*/_react.default.createElement(_row.default, null, formContent);
return /*#__PURE__*/_react.default.createElement(_context.FormUpdaterContext.Provider, {
value: updaterApi
}, /*#__PURE__*/_react.default.createElement(_context.FormApiContext.Provider, {
value: this.formApi
}, /*#__PURE__*/_react.default.createElement(_context.FormStateContext.Provider, {
value: formState
}, shouldAppendRow ? withRowForm : formContent)));
}
}
Form.propTypes = {
'aria-label': _propTypes.default.string,
onSubmit: _propTypes.default.func,
onSubmitFail: _propTypes.default.func,
/* Triggered from update, including field mount/unmount/value change/blur/verification status change/error prompt change, input parameter is formState, currentField */
onChange: _propTypes.default.func,
onReset: _propTypes.default.func,
// Triggered when the value of the form is updated, only when the value of the subfield changes. The entry parameter is formState.values
onValueChange: _propTypes.default.func,
autoScrollToError: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
allowEmpty: _propTypes.default.bool,
className: _propTypes.default.string,
component: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
disabled: _propTypes.default.bool,
extraTextPosition: _propTypes.default.oneOf(_constants.strings.EXTRA_POS),
getFormApi: _propTypes.default.func,
initValues: _propTypes.default.object,
validateFields: _propTypes.default.func,
layout: _propTypes.default.oneOf(_constants.strings.LAYOUT),
labelPosition: _propTypes.default.oneOf(_constants.strings.LABEL_POS),
labelWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
labelAlign: _propTypes.default.oneOf(_constants.strings.LABEL_ALIGN),
labelCol: _propTypes.default.object,
render: _propTypes.default.func,
style: _propTypes.default.object,
showValidateIcon: _propTypes.default.bool,
stopValidateWithError: _propTypes.default.bool,
stopPropagation: _propTypes.default.shape({
submit: _propTypes.default.bool,
reset: _propTypes.default.bool
}),
id: _propTypes.default.string,
wrapperCol: _propTypes.default.object,
trigger: _propTypes.default.oneOfType([_propTypes.default.oneOf(['blur', 'change', 'custom', 'mount']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['blur', 'change', 'custom', 'mount']))])
};
Form.defaultProps = {
onChange: _noop2.default,
onSubmitFail: _noop2.default,
onSubmit: _noop2.default,
onReset: _noop2.default,
onValueChange: _noop2.default,
onErrorChange: _noop2.default,
layout: 'vertical',
labelPosition: 'top',
allowEmpty: false,
autoScrollToError: false,
showValidateIcon: true
};
Form.Input = _field.FormInput;
Form.TextArea = _field.FormTextArea;
Form.InputNumber = _field.FormInputNumber;
Form.Select = _field.FormSelect;
Form.Checkbox = _field.FormCheckbox;
Form.CheckboxGroup = _field.FormCheckboxGroup;
Form.Radio = _field.FormRadio;
Form.RadioGroup = _field.FormRadioGroup;
Form.DatePicker = _field.FormDatePicker;
Form.TimePicker = _field.FormTimePicker;
Form.Switch = _field.FormSwitch;
Form.Slider = _field.FormSlider;
Form.TreeSelect = _field.FormTreeSelect;
Form.Cascader = _field.FormCascader;
Form.Rating = _field.FormRating;
Form.AutoComplete = _field.FormAutoComplete;
Form.Upload = _field.FormUpload;
Form.TagInput = _field.FormTagInput;
Form.Slot = _slot.default;
Form.ErrorMessage = _errorMessage.default;
Form.InputGroup = _group.default;
Form.Label = _label.default;
Form.Section = _section.default;
var _default = exports.default = Form;