oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
89 lines (88 loc) • 4.57 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 lodash_1 = require("lodash");
const core_1 = require("@material-ui/core");
const __1 = require("../../");
const prop_types_1 = __importDefault(require("prop-types"));
const DDComponent = (props) => {
const { id, name, variant = 'outlined', className, disabled, fullWidth = true, onRef, disableRipple = false, disableFocusRipple = false, component, onClick, iconRight, iconLeft, noText, } = props;
const { data, displayValue, displayField, selected } = props.options;
const button = react_1.useRef();
react_1.useEffect(() => {
onRef && onRef(button);
});
const [anchorEl, setAnchorEl] = react_1.default.useState(null);
const [selectValue, setSelectValue] = react_1.default.useState(selected ? data.filter((a) => selected === a[displayValue])[0][displayValue] : null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = (item) => {
setAnchorEl(null);
};
const handleSelect = (item) => {
setSelectValue(item[displayValue]);
onClick && onClick(item);
setAnchorEl(null);
};
const renderItems = () => {
if (data && data.length) {
return data.map((item, i) => {
return (react_1.default.createElement(core_1.MenuItem, { key: `single_select_${i}`, value: item[displayValue], onClick: () => handleSelect(item), className: `oneframe-dropdown-menu-item` }, item[displayField]));
});
}
return null;
};
const renderTextValue = () => {
if (noText) {
return '';
}
if (selectValue) {
return data.filter((a) => selectValue === a[displayValue])[0][displayField];
}
return '';
};
return (react_1.default.createElement("div", null,
react_1.default.createElement(__1.Button, { id: id, name: name, variant: variant, type: "button", onClick: handleClick, disableRipple: disableRipple, disableFocusRipple: disableFocusRipple, disabled: disabled, text: renderTextValue(), fullWidth: fullWidth, className: `oneframe-dropdown-menu-button ${className}`, buttonRef: button, component: component, iconRight: typeof iconRight === 'function' ? () => iconRight : iconRight, iconLeft: typeof iconLeft === 'function' ? () => iconLeft : iconLeft }),
react_1.default.createElement(core_1.Menu, { id: "simple-menu", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, className: `oneframe-dropdown-menu` }, renderItems())));
};
DDComponent.propTypes = {
id: prop_types_1.default.string,
name: prop_types_1.default.string,
className: prop_types_1.default.string,
tabIndex: prop_types_1.default.number,
noText: prop_types_1.default.bool,
disabled: prop_types_1.default.bool,
readOnly: prop_types_1.default.bool,
loading: prop_types_1.default.bool,
fullWidth: prop_types_1.default.bool,
centerRipple: prop_types_1.default.bool,
disableRipple: prop_types_1.default.bool,
disableFocusRipple: prop_types_1.default.bool,
component: prop_types_1.default.any,
buttonRef: prop_types_1.default.any,
variant: prop_types_1.default.oneOf(['text', 'outlined', 'contained']),
iconLeft: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.node]),
iconRight: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.node]),
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,
}),
onClick: prop_types_1.default.func,
onRef: prop_types_1.default.func,
};
exports.DropdownMenuTmp = DDComponent;
exports.default = react_1.default.memo(DDComponent, (p, n) => lodash_1.isEqual(p.options, n.options) && lodash_1.isEqual(p.disabled, n.disabled));