oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
108 lines (107 loc) • 5.65 kB
JavaScript
"use strict";
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 core_1 = require("@material-ui/core");
const lodash_1 = require("lodash");
const utility_1 = require("../../../utility");
const withValidate_1 = require("../../Form/withValidate");
const use_debounce_1 = require("use-debounce");
const prop_types_1 = __importDefault(require("prop-types"));
const CheckComponent = (props) => {
const { id, name, caption, className, disabled, required, errorText, helperText, onRef, disableRipple = true, onChange, validate, checkedIcon, checked, label, labelPlacement, icon, setValidate, validateMessages, } = props;
const input = react_1.useRef();
const [inputFieldValue, setValue] = react_1.useState(false);
const setValidateData = (value) => {
!disabled && validate && setValidate && setValidate(id, value, validate, errorText);
onChange && onChange(utility_1.getTargetChecked(id, name, value));
};
const [debounceFunc] = use_debounce_1.useDebouncedCallback((value) => setValidateData(value), 0);
const handleChange = react_1.useCallback((e) => {
setValue(e.target.checked);
}, []);
react_1.useEffect(() => {
onRef && onRef(input);
});
react_1.useEffect(() => {
setValue(checked);
}, [checked]);
react_1.useEffect(() => {
debounceFunc(inputFieldValue);
}, [inputFieldValue, debounceFunc, disabled]);
return (react_1.default.createElement(core_1.FormControl, { required: required, error: utility_1.getErrorStatus(validateMessages, name, errorText), component: "fieldset", className: `oneframe-form-checkbox-field ${className}` },
caption && react_1.default.createElement(core_1.FormLabel, { component: "legend" }, caption),
react_1.default.createElement(core_1.FormControlLabel, { control: react_1.default.createElement(core_1.Checkbox, Object.assign({ id: id, name: name, checked: inputFieldValue, onChange: (e) => handleChange(e) }, (checkedIcon ? { checkedIcon } : {}), (icon ? { icon } : {}), { color: 'default', disabled: disabled, disableRipple: disableRipple, inputRef: input, className: `oneframe-form-checkbox` })), className: `oneframe-form-checkbox-label`, disabled: disabled, labelPlacement: labelPlacement, label: label || '' }),
utility_1.getErrorMessage(validateMessages, id, errorText, helperText) ? (react_1.default.createElement(core_1.FormHelperText, null, utility_1.getErrorMessage(validateMessages, id, errorText, helperText))) : null));
};
CheckComponent.propTypes = {
id: prop_types_1.default.string.isRequired,
name: prop_types_1.default.string.isRequired,
label: prop_types_1.default.string,
helperText: prop_types_1.default.string,
className: prop_types_1.default.string,
caption: prop_types_1.default.string,
errorText: prop_types_1.default.string,
readOnly: prop_types_1.default.bool,
required: prop_types_1.default.bool,
disabled: prop_types_1.default.bool,
checked: prop_types_1.default.bool.isRequired,
disableRipple: prop_types_1.default.bool,
submitStatus: prop_types_1.default.bool,
onRef: prop_types_1.default.func,
onClick: prop_types_1.default.func,
onChange: prop_types_1.default.func.isRequired,
labelPlacement: prop_types_1.default.oneOf(['start', 'end', 'top', 'bottom']),
validate: prop_types_1.default.arrayOf(prop_types_1.default.shape({
required: prop_types_1.default.oneOf([
'required',
'maxSelect',
'minSelect',
'min',
'max',
'maxLength',
'minLength',
'custom',
'email',
'pattern',
'url',
'creditcard',
'number',
]),
message: prop_types_1.default.string,
regex: prop_types_1.default.any,
validate: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.bool]),
value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
})),
value: prop_types_1.default.any,
setValidate: prop_types_1.default.any,
validateMessages: prop_types_1.default.any,
icon: prop_types_1.default.node,
checkedIcon: prop_types_1.default.node,
};
exports.CheckboxTmp = CheckComponent;
const MemoComponent = react_1.default.memo(CheckComponent, (p, n) => lodash_1.isEqual(p.checked, n.checked) &&
lodash_1.isEqual(p.validateMessages, n.validateMessages) &&
lodash_1.isEqual(p.disabled, n.disabled) &&
lodash_1.isEqual(p.readOnly, n.readOnly) &&
lodash_1.isEqual(p.required, n.required) &&
lodash_1.isEqual(p.label, n.label) &&
lodash_1.isEqual(p.helperText, n.helperText) &&
lodash_1.isEqual(p.className, n.className) &&
lodash_1.isEqual(p.errorText, n.errorText) &&
lodash_1.isEqual(p.value, n.value) &&
lodash_1.isEqual(p.labelPlacement, n.labelPlacement) &&
lodash_1.isEqual(p.icon, n.icon) &&
lodash_1.isEqual(p.onChange, n.onChange) &&
lodash_1.isEqual(p.checkedIcon, n.checkedIcon) &&
lodash_1.isEqual(p.caption, n.caption));
exports.default = withValidate_1.withValidate(MemoComponent);