@cainiaofe/cn-ui-m
Version:
51 lines (50 loc) • 2.63 kB
JavaScript
import { __awaiter, __generator } from "tslib";
import React, { useState } from 'react';
import { CnDemoBlock, CnDemoPage, CnForm, CnFormField, CnSwitch, formilyCore, } from "../../..";
var onFieldChange = formilyCore.onFieldChange;
var delayer = function (duration) {
return new Promise(function (resolve) { return setTimeout(resolve, duration); });
};
export var 表单内使用 = function () {
var _a = useState(false), asyncChecked = _a[0], setAsyncChecked = _a[1];
var _b = useState(false), asyncLoading = _b[0], setAsyncLoading = _b[1];
// on async switch changed
var onAsyncSwitchChange = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (asyncLoading)
return [2 /*return*/];
setAsyncLoading(true);
return [4 /*yield*/, delayer(1000)];
case 1:
_a.sent();
setAsyncLoading(false);
setAsyncChecked(!asyncChecked);
return [2 /*return*/];
}
});
}); };
return (React.createElement(CnDemoPage, { title: "\u8868\u5355\u5185\u4F7F\u7528" },
React.createElement(CnDemoBlock, { title: "\u8868\u5355\u5185\u4F7F\u7528" },
React.createElement(CnForm, { formProps: {
values: {
gentle2: 1,
},
effects: function () {
onFieldChange('*', function (fieldState) {
console.log(fieldState.path.toString(), fieldState.value);
});
},
} },
React.createElement(CnFormField, { title: "\u8F93\u5165", name: "gentle" },
React.createElement(CnSwitch, { checked: false })),
React.createElement(CnFormField, { title: "\u53EA\u8BFB\u5C55\u793A", name: "gentle2", readOnly: true },
React.createElement(CnSwitch, { onChange: function (value, e) {
console.log('value', value);
console.log('e', e);
}, defaultChecked: true })),
React.createElement(CnFormField, { title: "\u7A7A\u503C\u5C55\u793A", name: "gentle3", readOnly: true },
React.createElement(CnSwitch, { checked: asyncChecked, loading: asyncLoading, onChange: onAsyncSwitchChange }))))));
};
export default { title: 'demo/CnSwitch' };