antx
Version:
Ant Design Form Simplified
274 lines (267 loc) • 8.64 kB
JavaScript
;
var antd = require('antd');
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
const { Item: Item$2 } = antd.Form;
const miscTypeMap = {
boolean: { type: 'boolean' },
url: { type: 'url' },
email: { type: 'email' },
};
const numTypeMap = {
string: { type: 'string', whitespace: true },
pureString: { type: 'string' },
number: { type: 'number' },
array: { type: 'array' },
};
const getRules = (rules) => {
const ruleList = [];
let numTypeRule = null;
let numValRules = [];
rules.forEach((rule) => {
if (typeof rule !== 'string') {
ruleList.push(rule);
return;
}
if (rule === 'required') {
ruleList.push({ required: true });
return;
}
if (rule in miscTypeMap) {
ruleList.push(miscTypeMap[rule]);
return;
}
if (rule in numTypeMap) {
numTypeRule = numTypeMap[rule];
return;
}
const [key, val] = rule.split('=');
if (val === undefined) {
return;
}
if (key === 'required') {
ruleList.push({ required: true, message: val });
return;
}
if (key === 'len' || key === 'min' || key === 'max') {
numValRules.push({ [key]: +val });
return;
}
});
if (numTypeRule && numValRules.length > 0) {
ruleList.push(...numValRules.map((obj) => (Object.assign(Object.assign({}, numTypeRule), obj))));
}
else if (numTypeRule) {
ruleList.push(numTypeRule);
}
else if (numValRules.length > 0) {
ruleList.push(...numValRules);
}
return ruleList;
};
const replaceMap = {
selfClass: 'className',
selfStyle: 'style',
selfName: 'name',
selfTooltip: 'tooltip',
};
const formItemKeys = [
'colon',
'dependencies',
'extra',
'getValueFromEvent',
'getValueProps',
'hasFeedback',
'help',
'hidden',
'htmlFor',
'initialValue',
'label',
'labelAlign',
'labelCol',
'messageVariables',
'name',
'normalize',
'noStyle',
'preserve',
'required',
'rules',
'shouldUpdate',
'tooltip',
'trigger',
'validateFirst',
'validateStatus',
'validateTrigger',
'valuePropName',
'wrapperCol',
// extra
'className',
'style',
];
const formItemProps = formItemKeys.reduce((obj, key) => {
obj[key] = true;
return obj;
}, {});
const create = (Field, getDefaultFieldProps) => {
const ItemField = react.forwardRef((props, ref) => {
const itemProps = {};
const fieldProps = {};
// split props
if (props) {
Object.keys(props).forEach((key) => {
const val = props[key];
if (key in formItemProps) {
const itemKey = key;
itemProps[itemKey] = key === 'rules' && val ? getRules(val) : val;
}
else {
const fieldKey = replaceMap[key] || key;
fieldProps[fieldKey] = val;
}
});
}
// default field props
if (getDefaultFieldProps) {
const extraFieldProps = getDefaultFieldProps(fieldProps);
Object.keys(extraFieldProps).forEach((key) => {
if (!(key in fieldProps)) {
fieldProps[key] = extraFieldProps[key];
}
});
}
const RawField = Field;
return (jsxRuntime.jsx(Item$2, Object.assign({}, itemProps, { children: jsxRuntime.jsx(RawField, Object.assign({}, fieldProps, { ref: ref })) })));
});
Object.keys(Field).forEach((key) => {
if (!(key in ItemField)) {
ItemField[key] = Field[key];
}
});
return ItemField;
};
const { Item: Item$1 } = antd.Form;
// https://github.com/react-component/field-form/blob/master/src/utils/typeUtil.ts
function toArray(value) {
if (value === undefined || value === null) {
return [];
}
return Array.isArray(value) ? value : [value];
}
// https://github.com/react-component/util/blob/master/src/utils/get.ts
function get(entity, path) {
let current = entity;
for (let i = 0; i < path.length; i += 1) {
if (current === null || current === undefined) {
return undefined;
}
current = current[path[i]];
}
return current;
}
const valOf = (values, name) => {
const namePath = toArray(name);
return get(values, namePath);
};
/**
* Watch - 用于监听其它字段的值
*/
const Watch = (props) => {
const { name, list, children, onlyValid = false, onChange } = props;
const hasName = !Array.isArray(list);
const prev = react.useRef(hasName ? undefined : list.map(() => undefined));
return (jsxRuntime.jsx(Item$1, { noStyle: true, shouldUpdate: (prev, next) => {
if (hasName) {
return name ? valOf(prev, name) !== valOf(next, name) : true;
}
return list.some((key) => key && valOf(prev, key) !== valOf(next, key));
}, children: (rawForm) => {
const form = rawForm;
const next = hasName
? name && form.getFieldValue(name)
: list.map((key) => key && form.getFieldValue(key));
let hasChange;
let hasValidValue = false;
let changeEffect = null;
if (hasName) {
hasChange = next !== prev.current;
hasValidValue = next !== undefined;
}
else {
hasChange = next.some((val, index) => {
var _a;
hasValidValue = val !== undefined;
return val !== ((_a = prev.current) === null || _a === void 0 ? void 0 : _a[index]);
});
}
const cachedPrev = prev.current;
if (hasChange) {
prev.current = next;
if (onChange) {
const ChangeEffect = () => {
react.useEffect(() => onChange(next, cachedPrev, form), []);
return null;
};
changeEffect = jsxRuntime.jsx(ChangeEffect, {});
}
}
if (!onlyValid || (onlyValid && hasValidValue)) {
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children === null || children === void 0 ? void 0 : children(next, cachedPrev, form), changeEffect] }));
}
return changeEffect;
} }));
};
const { Item } = antd.Form;
const WrapperCol = (props) => {
return jsxRuntime.jsx(Item, Object.assign({ label: jsxRuntime.jsx("span", {}), colon: false }, props));
};
const AutoComplete = create(antd.AutoComplete);
const Cascader = create(antd.Cascader);
const Checkbox = create(antd.Checkbox);
const DatePicker = create(antd.DatePicker);
const Input = create(antd.Input);
const InputNumber = create(antd.InputNumber);
const Mentions = create(antd.Mentions);
const Radio = create(antd.Radio);
const Rate = create(antd.Rate);
const Select = create(antd.Select);
const Slider = create(antd.Slider);
const Switch = create(antd.Switch);
const TimePicker = create(antd.TimePicker);
const Transfer = create(antd.Transfer);
const TreeSelect = create(antd.TreeSelect);
const Upload = create(antd.Upload);
const CheckboxGroup = create(antd.Checkbox.Group);
const DateRange = create(antd.DatePicker.RangePicker);
const TextArea = create(antd.Input.TextArea);
const Search = create(antd.Input.Search);
const Password = create(antd.Input.Password);
const RadioGroup = create(antd.Radio.Group);
const TimeRange = create(antd.TimePicker.RangePicker);
const Dragger = create(antd.Upload.Dragger);
exports.AutoComplete = AutoComplete;
exports.Cascader = Cascader;
exports.Checkbox = Checkbox;
exports.CheckboxGroup = CheckboxGroup;
exports.DatePicker = DatePicker;
exports.DateRange = DateRange;
exports.Dragger = Dragger;
exports.Input = Input;
exports.InputNumber = InputNumber;
exports.Mentions = Mentions;
exports.Password = Password;
exports.Radio = Radio;
exports.RadioGroup = RadioGroup;
exports.Rate = Rate;
exports.Search = Search;
exports.Select = Select;
exports.Slider = Slider;
exports.Switch = Switch;
exports.TextArea = TextArea;
exports.TimePicker = TimePicker;
exports.TimeRange = TimeRange;
exports.Transfer = Transfer;
exports.TreeSelect = TreeSelect;
exports.Upload = Upload;
exports.Watch = Watch;
exports.WrapperCol = WrapperCol;
exports.create = create;