oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
79 lines (78 loc) • 4.05 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());
});
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const lodash_1 = require("lodash");
const context_1 = __importDefault(require("./context"));
const validate_1 = __importDefault(require("./validate"));
const prop_types_1 = __importDefault(require("prop-types"));
const Form = (props) => {
const initialState = {
errorMessages: {},
values: {},
submitStatus: false,
};
const ref = react_1.useRef();
const [state, setState] = react_1.useState(initialState);
react_1.useEffect(() => {
props.onRef && props.onRef(ref);
});
const setForm = (id, value, validate, errorText) => __awaiter(void 0, void 0, void 0, function* () {
if (validate && id) {
const v = yield validate_1.default(validate, value, errorText);
setState((prevState) => (Object.assign(Object.assign({}, prevState), { errorMessages: Object.assign(Object.assign({}, prevState.errorMessages), { [id]: v }), values: Object.assign(Object.assign({}, prevState.values), { [id]: value }) })));
}
else if (!validate && id) {
setState((prevState) => (Object.assign(Object.assign({}, prevState), { values: Object.assign(Object.assign({}, prevState.values), { [id]: value }) })));
}
else {
console.error('Type error! "Id" attr is missing');
}
});
const handleSubmit = (e) => {
e.preventDefault();
const errorFields = state.errorMessages;
Object.keys(errorFields).forEach((item) => {
if (!document.getElementById(item)) {
!lodash_1.isEmpty(errorFields) && delete errorFields[item];
}
if (!lodash_1.isEmpty(errorFields) && errorFields[item] && !errorFields[item].length) {
!lodash_1.isEmpty(errorFields) && delete errorFields[item];
}
});
if (Object.keys(errorFields).length) {
setState((prevState) => (Object.assign(Object.assign({}, prevState), { submitStatus: true })));
return;
}
setState((prevState) => (Object.assign(Object.assign({}, prevState), { errorMessages: {}, values: {} })));
props.onSubmit && props.onSubmit();
};
return (react_1.default.createElement(context_1.default.Provider, { value: {
setData: (id, value, validate, errorText) => setForm(id, value, validate, errorText),
messages: state.submitStatus ? state.errorMessages : {},
} },
react_1.default.createElement("form", { onSubmit: (e) => handleSubmit(e), className: `oneframe-form`, ref: ref }, props.children)));
};
Form.propTypes = {
onSubmit: prop_types_1.default.func.isRequired,
children: prop_types_1.default.node,
};
exports.default = react_1.default.memo(Form, (p, n) => lodash_1.isEqual(p.onSubmit, n.onSubmit) && lodash_1.isEqual(p.children, n.children));