styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
60 lines (59 loc) • 3.4 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithProgress = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const types_1 = require("components/form-builder/types");
const http_form_1 = require("components/http-form");
const grommet_1 = require("grommet");
const react_1 = require("react");
const sleep = (value) => new Promise((resolve) => setTimeout(resolve, value));
const WithProgress = () => {
const filds = [
{
name: "file",
label: "File",
required: true,
type: types_1.FormFieldType.File,
},
];
const [progress, setProgress] = react_1.useState(0);
const formRef = react_1.useRef(null);
return (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ justify: "center", direction: "row" }, { children: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ width: "medium" }, { children: jsx_runtime_1.jsxs(http_form_1.HttpForm, Object.assign({ ref: formRef, submitButton: false, saveRequest: {
url: "/api/file",
method: "POST",
onUploadProgress: (p) => {
/*
For sake of simplicity, we directly pass the percentage from the
mock handler. in a real-world scenario, you'll get ProgressEvent as
an argument and you have to do some computation to get the progress
*/
setProgress(p.progress);
},
}, fields: filds, mockResponse: (mock) => {
//borrowed from this gist : https://gist.github.com/donaldpipowitch/f000f4d27d1b738ee05050af06e88eb0
mock.onPost("/api/file").reply(({ onUploadProgress }) => __awaiter(void 0, void 0, void 0, function* () {
const total = 100;
for (const progress of [0, 0.2, 0.4, 0.6, 0.8, 1]) {
yield sleep(500);
if (onUploadProgress) {
onUploadProgress({ progress: total * progress, total });
}
}
return [200, { success: true }];
}));
} }, { children: [jsx_runtime_1.jsx(grommet_1.Meter, { max: 100, value: progress, margin: { vertical: "medium" } }, void 0),
jsx_runtime_1.jsx(grommet_1.Button, { label: "Upload", primary: true, type: "submit" }, void 0)] }), void 0) }), void 0) }), void 0));
};
exports.WithProgress = WithProgress;
exports.default = {
title: "Form Builder/Editors/File Input/With Progress",
};