@kne/react-form-antd-mobile
Version:
把@kne/react-form 表单校验逻辑应用到antd-mobile
1,057 lines (1,028 loc) • 35.6 kB
JavaScript
var React = require('react');
var PropTypes = require('prop-types');
var antdMobile = require('antd-mobile');
var classnames = require('classnames');
var ReactForm = require('@kne/react-form');
var reactFormHelper = require('@kne/react-form-helper');
var reactFetch = require('@kne/react-fetch');
var useEvent = require('@kne/use-event');
var ReactDOM = require('react-dom');
var merge = require('lodash/merge');
var range = require('lodash/range');
var get = require('lodash/get');
var dayjs = require('dayjs');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
var ReactForm__default = /*#__PURE__*/_interopDefaultLegacy(ReactForm);
var useEvent__default = /*#__PURE__*/_interopDefaultLegacy(useEvent);
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
var range__default = /*#__PURE__*/_interopDefaultLegacy(range);
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it) return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var _excluded$a = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "children"];
var ScrollToError = reactFormHelper.widget.ScrollToError,
EnterSubmit = reactFormHelper.widget.EnterSubmit,
FormStore = reactFormHelper.widget.FormStore;
var Form = React.forwardRef(function (_ref, ref) {
var className = _ref.className,
cache = _ref.cache,
enterSubmit = _ref.enterSubmit,
scrollToError = _ref.scrollToError,
scrollProps = _ref.scrollProps,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
var inner = children;
return /*#__PURE__*/React__default["default"].createElement("form", {
className: classnames__default["default"]('react-form', className),
onSubmit: function onSubmit(e) {
e.preventDefault();
e.stopPropagation();
}
}, /*#__PURE__*/React__default["default"].createElement(ReactForm__default["default"], _extends({}, props, {
ref: ref
}), cache ? /*#__PURE__*/React__default["default"].createElement(FormStore, {
cache: cache
}) : null, scrollToError ? /*#__PURE__*/React__default["default"].createElement(ScrollToError, {
scrollProps: scrollProps
}) : null, enterSubmit ? /*#__PURE__*/React__default["default"].createElement(EnterSubmit, null, inner) : inner));
});
Form.defaultProps = {
scrollToError: true,
enterSubmit: false,
scrollProps: {
block: 'center'
}
};
Form.propTypes = {
className: PropTypes__default["default"].string,
enterSubmit: PropTypes__default["default"].bool,
scrollToError: PropTypes__default["default"].bool,
scrollProps: PropTypes__default["default"].shape({
block: PropTypes__default["default"].oneOf(['start', 'center', 'end', 'nearest']),
behavior: PropTypes__default["default"].oneOf(['auto', 'smooth']),
inline: PropTypes__default["default"].oneOf(['start', 'center', 'end', 'nearest'])
})
};
var withItem = function withItem(WrappedComponent) {
return function (props) {
console.log(props);
var listProps = props.labelHidden === true ? {} : {
title: props.label
};
return /*#__PURE__*/React__default["default"].createElement(antdMobile.List.Item, _extends({}, listProps, {
className: classnames__default["default"](listProps.className, {
'is-req': typeof props.rule === 'string' && (props.rule || '').split(' ').indexOf('REQ') > -1
})
}), /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({}, props, {
labelHidden: true
})));
};
};
var useOnChange$9 = reactFormHelper.hooks.useOnChange,
useCheckedToValue$1 = reactFormHelper.hooks.useCheckedToValue;
var withChecked$1 = reactFormHelper.hoc.withChecked;
var WithCheckbox = withChecked$1(antdMobile.Checkbox);
var Checkbox$1 = function Checkbox(props) {
var checkedProps = useCheckedToValue$1(props);
var render = useOnChange$9(checkedProps);
return render(WithCheckbox);
};
Checkbox$1.Item = withItem(Checkbox$1);
var _excluded$9 = ["data", "setData", "refresh", "reload", "fetchEmitter", "isLoading", "children", "onLoaded"];
var useOnChange$8 = reactFormHelper.hooks.useOnChange;
var withFetchList = function withFetchList(WrappedComponent) {
var FieldInner = reactFetch.withFetch(function (_ref) {
var data = _ref.data,
setData = _ref.setData,
refresh = _ref.refresh,
reload = _ref.reload,
fetchEmitter = _ref.fetchEmitter,
isLoading = _ref.isLoading,
children = _ref.children,
onLoaded = _ref.onLoaded,
props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
var refreshRef = React.useRef(refresh);
refreshRef.current = refresh;
var reloadRef = React.useRef(reload);
reloadRef.current = reload;
var setDataRef = React.useRef(setData);
setDataRef.current = setData;
var dataRef = React.useRef(data);
React.useEffect(function () {
var token1 = fetchEmitter.addListener('select-fetch-refresh', function () {
return refreshRef.current();
});
var token2 = fetchEmitter.addListener('select-fetch-reload', function () {
return reloadRef.current();
});
var token3 = fetchEmitter.addListener('select-fetch-set-data', function () {
return setDataRef.current();
});
return function () {
token1 && token1.remove();
token2 && token2.remove();
token3 && token3.remove();
};
}, [fetchEmitter]);
React.useEffect(function () {
onLoaded && onLoaded(dataRef.current);
}, []);
return /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({}, props, children({
data: data,
refresh: refresh,
isLoading: isLoading,
setData: setData
})));
});
var FetchComponent = React.forwardRef(function (props, ref) {
var fetchEmitter = useEvent__default["default"]();
React.useImperativeHandle(ref, function () {
return {
refresh: function refresh() {
return fetchEmitter.emit('select-fetch-refresh');
},
reload: function reload() {
return fetchEmitter.emit('select-fetch-reload');
},
setData: function setData(data) {
return fetchEmitter.emit('select-fetch-set-data', data);
}
};
}, [fetchEmitter]);
var render = useOnChange$8(Object.assign({
placeholder: "\u8BF7\u9009\u62E9" + props.label
}, props, {
fetchEmitter: fetchEmitter
}));
return render(FieldInner);
});
return FetchComponent;
};
var _excluded$8 = ["onChange", "children", "options"];
var useOnChange$7 = reactFormHelper.hooks.useOnChange;
var CheckboxGroup$1 = function CheckboxGroup(_ref) {
var onChange = _ref.onChange,
children = _ref.children,
options = _ref.options,
props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
var handler = React.useCallback(function (value) {
onChange && onChange(value);
}, [onChange]);
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Checkbox.Group, _extends({}, props, {
onChange: handler
}), /*#__PURE__*/React__default["default"].createElement(antdMobile.Space, {
direction: "vertical"
}, children || options.map(function (_ref2) {
var label = _ref2.label,
value = _ref2.value,
others = _ref2.others;
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Checkbox, _extends({}, others, {
value: value,
key: value
}), label);
})));
};
var _CheckboxGroup = function _CheckboxGroup(props) {
var render = useOnChange$7(props);
return render(CheckboxGroup$1);
};
_CheckboxGroup.Checkbox = antdMobile.Checkbox;
_CheckboxGroup.Item = withItem(_CheckboxGroup);
_CheckboxGroup.Fetch = withFetchList(CheckboxGroup$1);
_CheckboxGroup.FetchItem = withItem(_CheckboxGroup.Fetch);
var _excluded$7 = ["onConfirm", "onClose", "afterClose"];
var renderToBody = function renderToBody(element) {
var container = document.createElement('div');
document.body.appendChild(container);
function unmount() {
var unmountResult = ReactDOM__default["default"].unmountComponentAtNode(container);
if (unmountResult && container.parentNode) {
container.parentNode.removeChild(container);
}
}
ReactDOM__default["default"].render(element, container);
return unmount;
};
var withLayer = function withLayer(WrappedComponent) {
return function (props) {
var Layer = function Layer(_ref) {
var _onConfirm = _ref.onConfirm,
_onClose = _ref.onClose,
_afterClose = _ref.afterClose,
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
var _useState = React.useState(false),
visible = _useState[0],
setVisible = _useState[1];
React.useEffect(function () {
setVisible(true);
}, []);
return /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({}, props, {
visible: visible,
onConfirm: function onConfirm(val, extend) {
_onConfirm && _onConfirm(val, extend);
},
onClose: function onClose() {
_onClose && _onClose();
setVisible(false);
},
afterClose: function afterClose() {
_afterClose && _afterClose();
unmount();
}
}));
};
var unmount = renderToBody( /*#__PURE__*/React__default["default"].createElement(Layer, props));
return unmount;
};
};
var _excluded$6 = ["emitter"];
var useOnChange$6 = reactFormHelper.hooks.useOnChange;
var withDecoratorList = function withDecoratorList(LabelComponent, hasFetch) {
return function (WrappedComponent) {
var createPopup = withLayer(WrappedComponent);
var FieldComponent = function FieldComponent(_ref) {
var emitter = _ref.emitter,
props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
var showPopup = function showPopup(e, otherProps) {
e && e.stopPropagation();
createPopup(Object.assign({}, props, otherProps));
};
var showPopupRef = React.useRef(showPopup);
showPopupRef.current = showPopup;
React.useEffect(function () {
var token = emitter && emitter.addListener('show', function () {
return showPopupRef.current();
});
return function () {
token && token.remove();
};
}, [emitter]);
return /*#__PURE__*/React__default["default"].createElement(LabelComponent, _extends({}, props, {
showPopup: showPopup
}));
};
FieldComponent.defaultProps = {
render: function render(_ref2) {
var label = _ref2.label,
placeholder = _ref2.placeholder,
onClick = _ref2.onClick;
return /*#__PURE__*/React__default["default"].createElement("span", {
className: classnames__default["default"]({
"react-form__placeholder": !label
}),
onClick: onClick
}, label || placeholder);
}
};
var Field = function Field(props) {
var render = useOnChange$6(Object.assign({
placeholder: "\u8BF7\u9009\u62E9" + props.label
}, props));
return render(FieldComponent);
};
Field.defaultProps = {};
Field.Item = function (props) {
var emitter = useEvent__default["default"]();
var listProps = props.labelHidden === true ? {} : {
title: props.label
};
return /*#__PURE__*/React__default["default"].createElement(antdMobile.List.Item, _extends({}, listProps, {
className: classnames__default["default"](listProps.className, {
'is-req': typeof props.rule === 'string' && (props.rule || '').split(' ').indexOf('REQ') > -1
}),
onClick: function onClick() {
emitter.emit('show');
}
}), /*#__PURE__*/React__default["default"].createElement(Field, _extends({}, props, {
labelHidden: true,
emitter: emitter
})));
};
if (hasFetch) {
var FetchField = withFetchList(FieldComponent);
Field.Fetch = FetchField;
Field.FetchItem = function (props) {
var emitter = useEvent__default["default"]();
return /*#__PURE__*/React__default["default"].createElement(antdMobile.List.Item, {
title: props.label,
className: classnames__default["default"](props.className, {
'is-req': typeof props.rule === 'string' && (props.rule || '').split(' ').indexOf('REQ') > -1
}),
onClick: function onClick() {
emitter.emit('show');
}
}, /*#__PURE__*/React__default["default"].createElement(FetchField, _extends({}, props, {
labelHidden: true,
emitter: emitter
})));
};
}
return Field;
};
};
var _excluded$5 = ["value", "visible", "onConfirm", "onClose", "afterClose", "placeholder", "onChange", "options", "children"],
_excluded2$2 = ["label", "value"];
var CheckListPopup = function CheckListPopup(_ref) {
var value = _ref.value,
visible = _ref.visible,
onConfirm = _ref.onConfirm,
onClose = _ref.onClose,
afterClose = _ref.afterClose,
placeholder = _ref.placeholder,
onChange = _ref.onChange,
options = _ref.options,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
var _useState = React.useState(value),
pickerValue = _useState[0],
setPickerValue = _useState[1];
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Popup, {
bodyClassName: "react-form__popup",
visible: visible,
onConfirm: onConfirm,
onClose: onClose,
afterClose: afterClose,
position: "right"
}, /*#__PURE__*/React__default["default"].createElement(antdMobile.NavBar, {
backArrow: /*#__PURE__*/React__default["default"].createElement(antdMobile.Button, {
color: "primary",
fill: "none"
}, "\u8FD4\u56DE"),
right: /*#__PURE__*/React__default["default"].createElement(antdMobile.Button, {
color: "primary",
fill: "none",
onClick: function onClick() {
onChange(pickerValue);
onClose();
}
}, "\u786E\u5B9A"),
onBack: function onBack() {
onClose();
}
}, placeholder), /*#__PURE__*/React__default["default"].createElement(antdMobile.CheckList, _extends({}, props, {
options: options,
onChange: function onChange(value) {
setPickerValue(value);
},
value: pickerValue
}), children || options.map(function (_ref2) {
var label = _ref2.label,
value = _ref2.value,
others = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
return /*#__PURE__*/React__default["default"].createElement(antdMobile.CheckList.Item, _extends({}, others, {
value: value,
key: value
}), label);
})));
};
var CheckListInput = function CheckListInput(_ref3) {
var render = _ref3.render,
options = _ref3.options,
placeholder = _ref3.placeholder,
value = _ref3.value,
showPopup = _ref3.showPopup;
var label = React.useMemo(function () {
if (!value) {
return '';
}
return value.map(function (value) {
var item = (options || []).find(function (item) {
return item.value === value;
});
if (item) {
return item.label || item.value;
}
return '';
}).filter(function (item) {
return !!item;
}).join(',');
}, [value, options]);
return render({
label: label,
value: value,
placeholder: placeholder,
onClick: showPopup
});
};
var CheckListField = withDecoratorList(CheckListInput, true)(CheckListPopup);
var globalParams = {
rules: {},
field: {
imageUploader: {
upload: function upload(file) {
return {
url: URL.createObjectURL(file)
};
}
}
}
};
var oldREQ = ReactForm.RULES.REQ;
ReactForm.preset({
REQ: function REQ() {
return Object.assign({}, oldREQ.apply(void 0, [].slice.call(arguments)), {
errMsg: '%s不能为空'
});
}
});
var preset = (function (props) {
merge__default["default"](globalParams, props);
ReactForm.preset(globalParams.rules);
});
var useOnChange$5 = reactFormHelper.hooks.useOnChange;
var ImageUploader$1 = function ImageUploader(props) {
var render = useOnChange$5(Object.assign({}, props, {
upload: globalParams.field.imageUploader.upload
}));
return render(antdMobile.ImageUploader);
};
ImageUploader$1.defaultProps = {
value: []
};
var useDecorator$2 = reactFormHelper.hooks.useDecorator;
var InputField = function InputField(props) {
var render = useDecorator$2(Object.assign({
placeholder: "\u8BF7\u8F93\u5165" + props.label
}, props));
return render(antdMobile.Input);
};
InputField.Item = withItem(InputField);
var _excluded$4 = ["max", "min", "precision", "soFar", "renderLabel", "value", "onConfirm"];
var precisionToLength = function precisionToLength(precision) {
return {
'year': 1,
'month': 2,
'day': 3
}[precision] || 3;
};
var useRange = function useRange(_ref) {
var max = _ref.max,
min = _ref.min,
value = _ref.value,
renderLabel = _ref.renderLabel,
soFar = _ref.soFar,
precision = _ref.precision;
var currentDate = dayjs__default["default"](value),
currentYear = currentDate.year(),
currentMonth = currentDate.month();
var minDate = dayjs__default["default"](min),
minYear = minDate.year(),
minMonth = minDate.month(),
minDay = minDate.date();
var maxDate = dayjs__default["default"](max),
maxYear = maxDate.year(),
maxMonth = maxDate.month(),
maxDay = maxDate.date();
var yearList = React.useMemo(function () {
var list = range__default["default"](minYear, maxYear + 1).map(function (value) {
return {
value: value,
label: renderLabel('year', value)
};
});
soFar && list.push({
value: -1,
label: '至今'
});
return list;
}, [minYear, maxYear, renderLabel, soFar]);
var minRangeMonth = minYear === currentYear ? minMonth : 0,
maxRangeMonth = maxYear === currentYear ? maxMonth + 1 : 12;
var monthList = React.useMemo(function () {
return range__default["default"](minRangeMonth, maxRangeMonth).map(function (value) {
return {
value: value,
label: renderLabel('month', value + 1)
};
});
}, [minRangeMonth, maxRangeMonth, renderLabel]);
var minRangeDay = minYear === currentYear && minMonth === currentMonth ? minDay : 1;
var maxRangeDay = maxYear === currentYear && maxMonth === currentMonth ? maxDay + 1 : function () {
if (currentMonth === 1 && currentYear % 4 === 0) {
return 30;
}
if (currentMonth === 1 && currentYear % 4 !== 0) {
return 29;
}
if ([1, 3, 5, 7, 8, 10, 12].indexOf(currentMonth) >= 1) {
return 32;
}
return 31;
}();
var dayList = React.useMemo(function () {
return range__default["default"](minRangeDay, maxRangeDay).map(function (value) {
return {
value: value,
label: renderLabel('day', value)
};
});
}, [minRangeDay, maxRangeDay, renderLabel]);
var length = precisionToLength(precision);
return value === 'sofar' ? [yearList, [], []].slice(0, length) : [yearList, monthList, dayList].slice(0, length);
};
var dateToColumns = function dateToColumns(value, length) {
if (length === void 0) {
length = 3;
}
var startValue = get__default["default"](value, '0'),
endValue = get__default["default"](value, '1'),
output = [];
if (!startValue || !endValue) {
var now = dayjs__default["default"](),
year = now.year(),
month = now.month(),
day = now.date();
return [].concat([year, month, day].slice(0, length), [year, month, day].slice(0, length));
}
var startDate = dayjs__default["default"](startValue);
output.push.apply(output, [startDate.year(), startDate.month(), startDate.date()].slice(0, length));
if (endValue === 'sofar') {
output.push(-1);
} else {
var endDate = dayjs__default["default"](endValue);
output.push.apply(output, [endDate.year(), endDate.month(), endDate.date()].slice(0, length));
}
return output;
};
var columnsToDate = function columnsToDate(value) {
if (value[0] === -1) {
return 'sofar';
}
var output = dayjs__default["default"](new Date(0));
['year', 'month', 'date'].forEach(function (key, index) {
if (value[index] !== void 0) {
output = output[key](value[index]);
} else {
return;
}
});
return output.toDate();
};
var DateRangePicker = function DateRangePicker(_ref2) {
var max = _ref2.max,
min = _ref2.min,
precision = _ref2.precision,
soFar = _ref2.soFar,
renderLabel = _ref2.renderLabel,
currentValue = _ref2.value,
_onConfirm = _ref2.onConfirm,
props = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
var length = precisionToLength(precision);
var _useState = React.useState(dateToColumns(currentValue, length)),
value = _useState[0],
setValue = _useState[1];
var _useMemo = React.useMemo(function () {
return {
startValue: columnsToDate(value.slice(0, length)),
endValue: columnsToDate(value.slice(length))
};
}, [value, length]),
startValue = _useMemo.startValue,
endValue = _useMemo.endValue;
var startList = useRange({
max: max,
min: min,
value: startValue,
renderLabel: renderLabel,
precision: precision
});
var endList = useRange({
max: max,
min: startValue || min,
value: endValue,
renderLabel: renderLabel,
soFar: soFar,
precision: precision
});
var columns = React.useMemo(function () {
return startList.concat(endList);
}, [startList, endList]);
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Picker, _extends({}, props, {
columns: columns,
value: value,
afterShow: function afterShow() {
setValue(dateToColumns(currentValue, length));
},
onSelect: function onSelect(value) {
setValue(value);
},
onConfirm: function onConfirm() {
_onConfirm && _onConfirm([columnsToDate(value.slice(0, length)), columnsToDate(value.slice(length))]);
}
}));
};
DateRangePicker.defaultProps = {
renderLabel: function renderLabel(type, data) {
return data;
},
value: [new Date(), new Date()],
soFar: true,
precision: 'day',
min: new Date('1949-10-01'),
max: new Date()
};
var _excluded$3 = ["onChange"];
var withOnConfirm = function withOnConfirm(WrappedComponent) {
return function (_ref) {
var onChange = _ref.onChange,
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
return /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({}, props, {
title: props.placeholder,
onConfirm: function onConfirm(value) {
onChange(value);
}
}));
};
};
var PickerField = withDecoratorList(function (_ref2) {
var render = _ref2.render,
placeholder = _ref2.placeholder,
showPopup = _ref2.showPopup,
value = _ref2.value,
columns = _ref2.columns;
var label = React.useMemo(function () {
if (!value) {
return '';
}
return value.map(function (value, index) {
var item = (columns[index] || []).find(function (item) {
return item.value === value;
});
if (item) {
return item.label || item.value;
}
return '';
}).filter(function (item) {
return !!item;
}).join(',');
}, [value, columns]);
return render({
label: label,
value: value,
placeholder: placeholder,
onClick: showPopup
});
}, true)(withOnConfirm(antdMobile.Picker));
PickerField.CascadePicker = withDecoratorList(function (_ref3) {
var render = _ref3.render,
placeholder = _ref3.placeholder,
showPopup = _ref3.showPopup,
value = _ref3.value,
options = _ref3.options;
var label = React.useMemo(function () {
if (!value) {
return '';
}
var output = [];
var columns = options;
var _loop = function _loop() {
var item = _step.value;
var obj = columns.find(function (_ref4) {
var value = _ref4.value;
return value === item;
});
if (!obj) {
return "break";
}
output.push(obj.label || obj.value);
columns = obj.children || [];
};
for (var _iterator = _createForOfIteratorHelperLoose(value), _step; !(_step = _iterator()).done;) {
var _ret = _loop();
if (_ret === "break") break;
}
return output.filter(function (item) {
return !!item;
}).join(',');
}, [value, options]);
return render({
label: label,
value: value,
placeholder: placeholder,
onClick: showPopup
});
}, true)(withOnConfirm(antdMobile.CascadePicker));
PickerField.DatePicker = withDecoratorList(function (_ref5) {
var render = _ref5.render,
placeholder = _ref5.placeholder,
showPopup = _ref5.showPopup,
value = _ref5.value,
format = _ref5.format;
var label = React.useMemo(function () {
if (!value) {
return '';
}
return dayjs__default["default"](value).format(format);
}, [value]);
return render({
label: label,
value: value,
placeholder: placeholder,
onClick: showPopup
});
})(withOnConfirm(antdMobile.DatePicker));
PickerField.DatePicker.defaultProps = {
format: 'YYYY-MM-DD',
renderLabel: function renderLabel(type, data) {
switch (type) {
case 'year':
return data + '年';
case 'month':
return data + '月';
case 'day':
return data + '日';
case 'hour':
return data + '时';
case 'minute':
return data + '分';
case 'second':
return data + '秒';
default:
return data;
}
}
};
PickerField.DateRangePicker = withDecoratorList(function (_ref6) {
var render = _ref6.render,
placeholder = _ref6.placeholder,
showPopup = _ref6.showPopup,
value = _ref6.value,
format = _ref6.format;
var label = React.useMemo(function () {
if (!value) {
return '';
}
return value.map(function (value) {
return value === 'sofar' ? '至今' : dayjs__default["default"](value).format(format);
}).join('~');
}, [value]);
return render({
label: label,
value: value,
placeholder: placeholder,
onClick: showPopup
});
})(withOnConfirm(DateRangePicker));
PickerField.DateRangePicker.defaultProps = {
format: 'YYYY-MM-DD',
renderLabel: function renderLabel(type, data) {
switch (type) {
case 'year':
return data + '年';
case 'month':
return data + '月';
case 'day':
return data + '日';
case 'hour':
return data + '时';
case 'minute':
return data + '分';
case 'second':
return data + '秒';
default:
return data;
}
}
};
var _excluded$2 = ["onChange", "children", "options"],
_excluded2$1 = ["label", "value"];
var useOnChange$4 = reactFormHelper.hooks.useOnChange;
var RadioGroup$1 = function RadioGroup(_ref) {
var onChange = _ref.onChange,
children = _ref.children,
options = _ref.options,
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
var handler = React.useCallback(function (value) {
onChange && onChange(value);
}, [onChange]);
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Radio.Group, _extends({}, props, {
onChange: handler
}), /*#__PURE__*/React__default["default"].createElement(antdMobile.Space, {
direction: "vertical"
}, children || options.map(function (_ref2) {
var label = _ref2.label,
value = _ref2.value,
others = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Radio, _extends({}, others, {
value: value,
key: value
}), label);
})));
};
var _RadioGroup = function _RadioGroup(props) {
var render = useOnChange$4(props);
return render(RadioGroup$1);
};
_RadioGroup.Radio = antdMobile.Radio;
_RadioGroup.Item = withItem(_RadioGroup);
_RadioGroup.Fetch = withFetchList(RadioGroup$1);
_RadioGroup.FetchItem = withItem(_RadioGroup.Fetch);
var useOnChange$3 = reactFormHelper.hooks.useOnChange;
var RateField = function RateField(props) {
var render = useOnChange$3(props);
return render(antdMobile.Rate);
};
RateField.Item = withItem(RateField);
var useOnChange$2 = reactFormHelper.hooks.useOnChange;
var SelectorField = function SelectorField(props) {
var render = useOnChange$2(props);
return render(antdMobile.Selector);
};
SelectorField.Item = withItem(SelectorField);
SelectorField.Fetch = withFetchList(antdMobile.Selector);
SelectorField.FetchItem = withItem(SelectorField.Fetch);
var useOnChange$1 = reactFormHelper.hooks.useOnChange;
var SliderField = function SliderField(props) {
var render = useOnChange$1(props);
return render(antdMobile.Slider);
};
SliderField.Item = withItem(SliderField);
var useDecorator$1 = reactFormHelper.hooks.useDecorator;
var StepperField = function StepperField(props) {
var render = useDecorator$1(Object.assign({
placeholder: "\u8BF7\u8F93\u5165" + props.label
}, props));
return render(antdMobile.Stepper);
};
StepperField.Item = withItem(StepperField);
var useOnChange = reactFormHelper.hooks.useOnChange,
useCheckedToValue = reactFormHelper.hooks.useCheckedToValue;
var withChecked = reactFormHelper.hoc.withChecked;
var WithSwitch = withChecked(antdMobile.Switch);
var Switch$1 = function Switch(props) {
var checkedProps = useCheckedToValue(props);
var render = useOnChange(checkedProps);
return render(WithSwitch);
};
Switch$1.Item = withItem(Switch$1);
var useDecorator = reactFormHelper.hooks.useDecorator;
var TextAreaField = function TextAreaField(props) {
var render = useDecorator(Object.assign({
placeholder: "\u8BF7\u8F93\u5165" + props.label
}, props));
return render(antdMobile.TextArea);
};
TextAreaField.Item = withItem(TextAreaField);
var ResetButton = function ResetButton(props) {
var resetProps = ReactForm.useReset();
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Button, _extends({}, resetProps, props));
};
var _excluded$1 = ["realTime", "disabled"],
_excluded2 = ["isPass", "isLoading"];
var SubmitButton = function SubmitButton(_ref) {
var realTime = _ref.realTime,
disabled = _ref.disabled,
props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
var _useSubmit = ReactForm.useSubmit(props),
isPass = _useSubmit.isPass,
isLoading = _useSubmit.isLoading,
submitProps = _objectWithoutPropertiesLoose(_useSubmit, _excluded2);
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Button, _extends({
loading: isLoading,
disabled: disabled || (realTime ? !isPass : false)
}, submitProps, props));
};
SubmitButton.defaultProps = {
type: 'primary',
disabled: false
};
var _excluded = ["onClick"];
var useCacheRemove = reactFormHelper.hooks.useCacheRemove;
var CancelButton = function CancelButton(_ref) {
var _onClick = _ref.onClick,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
var remove = useCacheRemove();
return /*#__PURE__*/React__default["default"].createElement(antdMobile.Button, _extends({}, props, {
onClick: function onClick() {
remove();
_onClick && _onClick.apply(void 0, [].slice.call(arguments));
}
}));
};
var Checkbox = Checkbox$1;
var CheckboxGroup = _CheckboxGroup;
var CheckList = CheckListField;
var ImageUploader = ImageUploader$1;
var Input = InputField;
var Picker = PickerField;
var RadioGroup = _RadioGroup;
var Rate = RateField;
var Selector = SelectorField;
var Slider = SliderField;
var Stepper = StepperField;
var Switch = Switch$1;
var TextArea = TextAreaField;
var fields = {
Checkbox: Checkbox,
CheckboxGroup: CheckboxGroup,
CheckList: CheckList,
ImageUploader: ImageUploader,
Input: Input,
Picker: Picker,
RadioGroup: RadioGroup,
Rate: Rate,
Selector: Selector,
Slider: Slider,
Stepper: Stepper,
Switch: Switch,
TextArea: TextArea
};
Object.defineProperty(exports, 'hooks', {
enumerable: true,
get: function () { return reactFormHelper.hooks; }
});
Object.defineProperty(exports, 'utils', {
enumerable: true,
get: function () { return reactFormHelper.utils; }
});
Object.defineProperty(exports, 'widget', {
enumerable: true,
get: function () { return reactFormHelper.widget; }
});
exports.CancelButton = CancelButton;
exports.CheckList = CheckList;
exports.Checkbox = Checkbox;
exports.CheckboxGroup = CheckboxGroup;
exports.ImageUploader = ImageUploader;
exports.Input = Input;
exports.Picker = Picker;
exports.RadioGroup = RadioGroup;
exports.Rate = Rate;
exports.ResetButton = ResetButton;
exports.Selector = Selector;
exports.Slider = Slider;
exports.Stepper = Stepper;
exports.SubmitButton = SubmitButton;
exports.Switch = Switch;
exports.TextArea = TextArea;
exports["default"] = Form;
exports.fields = fields;
exports.preset = preset;
exports.withDecoratorList = withDecoratorList;
Object.keys(ReactForm).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return ReactForm[k]; }
});
});
//# sourceMappingURL=index.js.map