@wener/ui
Version:
172 lines • 6.69 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormFieldsBuilder = exports.FormFieldBuilder = exports.buildInitialValues = exports.Widgets = exports.normalizeField = void 0;
const options_1 = require("./options");
const antd_1 = require("antd");
const react_1 = __importStar(require("react"));
// import { Rule } from 'rc-field-form/lib/interface';
const set_1 = __importDefault(require("lodash/set"));
function prefixedObject(entries, prefix) {
return Object.fromEntries(entries.filter(([v]) => v.startsWith(prefix)).map(([k, v]) => [k.substring(prefix.length), v]));
}
function normalizeField(item, normalizers) {
if (!item.name && typeof item.key === 'string') {
item.name = item.key.split('.');
}
// FIXME do this when register
if (!item.valuePropName && item.widget === 'switch') {
item.valuePropName = 'checked';
}
// extract
const entries = Object.entries(item);
// widget
item.widgetProps = Object.assign(prefixedObject(entries, 'widget:'), item.widgetProps);
// field
item.fieldProps = Object.assign(prefixedObject(entries, 'field:'), item.fieldProps);
// 常用组件属性
// defaultValue 无效 - 组件受控
const { autoFocus, disabled, readOnly, placeholder } = item;
Object.entries({ autoFocus, disabled, readOnly, placeholder }).forEach(([k, v]) => {
if (v === null || v === undefined) {
return;
}
item.widgetProps[k] = v;
});
// item.widgetComponent = item.widgetComponent ?? findWidget(item.widget)
// 常用字段属性
// https://ant.design/components/form-cn/#Form.Item
const { help, extra, normalize } = item;
Object.entries({ help, extra, normalize }).forEach(([k, v]) => {
if (v === null || v === undefined) {
return;
}
item.fieldProps[k] = v;
});
// 预处理
item = normalizers?.reduce((o, v) => v(o), item) ?? item;
return item;
}
exports.normalizeField = normalizeField;
exports.Widgets = {
default: antd_1.Input,
text: antd_1.Input,
password: antd_1.Input.Password,
textarea: antd_1.Input.TextArea,
number: antd_1.InputNumber,
slider: antd_1.Slider,
switch: antd_1.Switch,
select: ({ field: { options = [], name }, ...props }) => {
options = options_1.normalizeOptions(options);
return (react_1.default.createElement(antd_1.Select, Object.assign({}, props), options.map(({ label, value }) => (react_1.default.createElement(antd_1.Select.Option, { value: value, key: label }, label)))));
},
};
function findWidget(w) {
let widget = w ?? 'default';
if (typeof widget === 'string') {
widget = exports.Widgets[widget] ?? widget;
}
return widget;
}
function buildWidget(field, opts) {
const { widget: w, widgetProps } = field;
let widget = w ?? 'default';
if (typeof widget === 'string') {
const { widgets = [] } = opts ?? {};
// fixme - not good
widget =
widgets.find((v) => v?.['displayName'] === widget || v?.['factoryName'] === widget) ?? exports.Widgets[widget];
if (!widget) {
console.error(`invalid widget`, field);
widget = exports.Widgets['default'];
}
}
if (react_1.default.isValidElement(widget)) {
if (Object.keys(widgetProps).length === 0) {
return widget;
}
return react_1.default.cloneElement(widget, widgetProps);
}
// console.log(`createElement`, widget, widgetProps);
return react_1.default.createElement(widget, Object.assign({ field }, widgetProps));
}
function buildRules(item) {
const rules = Array.from(item.rules ?? []);
const { required, label, key } = item;
// FIXME 应该有更好的方式 - 全局也能配置
if (required) {
rules.push({
required,
message: `请填写${typeof label === 'string' ? label : '该字段'}`,
});
}
return rules;
}
function buildFormFields(fields, opt) {
return fields.map((v) => buildFormField(v, opt));
}
function buildFormField(field, options) {
field = normalizeField(field);
const { render } = field;
if (render) {
return render({ field });
}
const { label, key, name, valuePropName, fieldProps, children } = field;
return (react_1.default.createElement(antd_1.Form.Item, Object.assign({ key: key, valuePropName: valuePropName, label: label, name: name || key, rules: buildRules(field) }, fieldProps), children ?? buildWidget(field, options)));
}
function buildInitialValues(fields) {
const o = {};
fields.forEach(({ name, key, defaultValue }) => {
if (defaultValue === null || defaultValue === undefined || !(name || key)) {
return;
}
set_1.default(o, name || key, defaultValue);
});
return o;
}
exports.buildInitialValues = buildInitialValues;
exports.FormFieldBuilder = (props) => {
const { field, children, pure, ...opts } = props;
let deps = [];
if (!pure) {
deps = [field, children];
}
return react_1.useMemo(() => {
// debug rerender
// console.log(`render ${field.key}`, field)
if (children) {
return buildFormField({ ...field, children }, opts);
}
return buildFormField(field, opts);
}, deps);
};
exports.FormFieldsBuilder = (props) => {
const { fields, pure, ...opts } = props;
let deps = [];
if (!pure) {
deps = fields;
}
return react_1.default.createElement(react_1.default.Fragment, null, react_1.useMemo(() => buildFormFields(fields, opts), deps));
};
//# sourceMappingURL=builder.js.map