oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
187 lines (186 loc) • 9.91 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 utility_1 = require("../../../utility");
const lodash_1 = require("lodash");
const core_1 = require("@material-ui/core");
const use_debounce_1 = require("use-debounce");
const withValidate_1 = require("../../Form/withValidate");
const fast_memoize_1 = __importDefault(require("fast-memoize"));
const prop_types_1 = __importDefault(require("prop-types"));
const SelectComponent = (props) => {
const { id, name, caption, captionActive, variant = 'outlined', className, disabled, readOnly, emptyValue, multipleSelectCountText, required, fullWidth = true, onRef, disableUnderline = false, onChange, onClick, errorText, helperText, validate, leftAdornments, rightAdornments, setValidate, validateMessages, viewChip, menuPosition, } = props;
const input = react_1.useRef();
const inputLabel = react_1.useRef(null);
const [labelWidth, setLabelWidth] = react_1.default.useState(0);
const { data, displayValue, displayField, selected } = props.options;
const getFormatData = (selected) => {
const tempMultiValues = [];
if (lodash_1.isArray(selected)) {
selected.forEach((item) => {
if (typeof item === 'object') {
tempMultiValues.push(item[displayValue]);
}
else {
tempMultiValues.push(item);
}
});
return tempMultiValues;
}
return [];
};
const initialSelect = () => getFormatData(selected);
const [inputFieldValue, setValue] = react_1.useState(initialSelect());
const setValidateData = fast_memoize_1.default((value) => {
!disabled && validate && setValidate && setValidate(id, value, validate, errorText);
});
const [debounceFunc] = use_debounce_1.useDebouncedCallback((value) => setValidateData(value), 250);
react_1.useEffect(() => {
onRef && onRef(input);
});
react_1.useEffect(() => {
setValue(getFormatData(selected));
// eslint-disable-next-line
}, [selected, setValue]);
react_1.useEffect(() => {
debounceFunc(inputFieldValue);
setLabelWidth(inputLabel.current.offsetWidth);
}, [inputFieldValue, debounceFunc, disabled]);
const handleChange = react_1.useCallback((e) => {
if (e.target.value !== undefined) {
setValue(e.target.value);
}
else {
setValue([]);
}
// eslint-disable-next-line
}, []);
const renderItems = () => {
if (data && data.length) {
return data.map((item, i) => {
return (react_1.default.createElement(core_1.MenuItem, { key: i, value: item[displayValue], disableGutters: true, dense: true, className: `oneframe-multi-select-item` },
react_1.default.createElement(core_1.Checkbox, { checked: inputFieldValue.indexOf(item[displayValue]) > -1, className: `oneframe-multi-select-item-checkbox` }),
react_1.default.createElement(core_1.ListItemText, { primary: item[displayField], className: `oneframe-multi-select-item-text` })));
});
}
return null;
};
const getSelectFieldValue = () => {
return inputFieldValue;
};
const getObjectValue = (value) => {
const arr = [];
value &&
value.length &&
value.forEach((item, i) => {
arr.push(data.filter((obj) => obj[displayValue] === item)[0]);
});
return arr;
};
return (react_1.default.createElement(core_1.FormControl, { variant: variant, fullWidth: fullWidth, disabled: disabled || false, className: `oneframe-multi-select-field ${className}`, error: utility_1.getErrorStatus(validateMessages, id, errorText) },
react_1.default.createElement(core_1.InputLabel, Object.assign({ htmlFor: id, ref: inputLabel }, (props.hasOwnProperty('captionActive') && captionActive ? { shrink: true } : {}), { className: `oneframe-multi-select-label` }), utility_1.getMultiSelectLabel(multipleSelectCountText, inputFieldValue, caption)),
react_1.default.createElement(core_1.Select, Object.assign({ className: `oneframe-multi-select`, value: getSelectFieldValue(), onChange: handleChange, variant: variant, multiple: true, required: required, fullWidth: fullWidth, MenuProps: Object.assign(Object.assign({}, (menuPosition
? {
anchorOrigin: {
vertical: menuPosition,
horizontal: 'left',
},
transformOrigin: {
vertical: menuPosition === 'top' ? 'bottom' : 'top',
horizontal: 'left',
},
}
: {})), { getContentAnchorEl: menuPosition && null, PaperProps: {
className: 'oneframe-menu-container',
style: { maxHeight: 50 * 4.5 + 8 },
} }), onClick: (e) => onClick && onClick(e), onClose: () => onChange &&
onChange(utility_1.getTargetSelectValue(id, name, inputFieldValue, getObjectValue(inputFieldValue))), renderValue: (selected) => utility_1.getMultipleCustomRender(selected, data, displayValue, displayField, viewChip) }, utility_1.getInputProps(labelWidth, id, name, readOnly, leftAdornments, rightAdornments, captionActive, variant, disableUnderline), { ref: input }),
emptyValue && (react_1.default.createElement(core_1.MenuItem, { value: undefined },
react_1.default.createElement("em", null, emptyValue))),
renderItems()),
utility_1.getErrorMessage(validateMessages, id, errorText, helperText) ? (react_1.default.createElement(core_1.FormHelperText, null, utility_1.getErrorMessage(validateMessages, id, errorText, helperText))) : null));
};
SelectComponent.propTypes = {
multipleSelectCountText: prop_types_1.default.string,
viewChip: prop_types_1.default.bool,
id: prop_types_1.default.string.isRequired,
name: prop_types_1.default.string.isRequired,
className: prop_types_1.default.string,
emptyValue: prop_types_1.default.string,
errorText: prop_types_1.default.string,
caption: prop_types_1.default.string,
captionActive: prop_types_1.default.bool,
disabled: prop_types_1.default.bool,
readOnly: prop_types_1.default.bool,
required: prop_types_1.default.bool,
fullWidth: prop_types_1.default.bool,
disableUnderline: prop_types_1.default.bool,
submitStatus: prop_types_1.default.bool,
helperText: prop_types_1.default.node,
setValidate: prop_types_1.default.any,
validateMessages: prop_types_1.default.any,
variant: prop_types_1.default.oneOf(['standard', 'filled', 'outlined']),
menuPosition: prop_types_1.default.oneOf(['top', 'bottom']),
leftAdornments: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.string]),
rightAdornments: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.string]),
defaultValue: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
onRef: prop_types_1.default.func,
onChange: prop_types_1.default.func,
onClick: prop_types_1.default.func,
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]),
})),
options: prop_types_1.default.shape({
data: prop_types_1.default.arrayOf(prop_types_1.default.any).isRequired,
displayValue: prop_types_1.default.string.isRequired,
displayField: prop_types_1.default.string.isRequired,
selected: prop_types_1.default.any,
disabled: prop_types_1.default.any,
}).isRequired,
};
exports.MultiSelectTmp = SelectComponent;
const MemoComponent = react_1.default.memo(SelectComponent, (p, n) => lodash_1.isEqual(p.options, n.options) &&
lodash_1.isEqual(p.viewChip, n.viewChip) &&
lodash_1.isEqual(p.errorText, n.errorText) &&
lodash_1.isEqual(p.className, n.className) &&
lodash_1.isEqual(p.emptyValue, n.emptyValue) &&
lodash_1.isEqual(p.onChange, n.onChange) &&
lodash_1.isEqual(p.leftAdornments, n.leftAdornments) &&
lodash_1.isEqual(p.rightAdornments, n.rightAdornments) &&
lodash_1.isEqual(p.validateMessages, n.validateMessages) &&
lodash_1.isEqual(p.helperText, n.helperText) &&
lodash_1.isEqual(p.disabled, n.disabled) &&
lodash_1.isEqual(p.disableUnderline, n.disableUnderline) &&
lodash_1.isEqual(p.readOnly, n.readOnly) &&
lodash_1.isEqual(p.required, n.required) &&
lodash_1.isEqual(p.captionActive, n.captionActive) &&
lodash_1.isEqual(p.caption, n.caption));
exports.default = withValidate_1.withValidate(MemoComponent);