Files
bodyshop/client/src/components/lock-wrapper/lock-wrapper.component.jsx

49 lines
1.5 KiB
JavaScript

import { LockOutlined } from "@ant-design/icons";
import { Space } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
recentItems: selectRecentItems,
selectedHeader: selectSelectedHeader,
bodyshop: selectBodyshop
});
const LockWrapper = ({ featureName, bodyshop, children, disabled = true, bypass }) => {
let renderedChildren = children;
//Mark the child prop as disabled.
if (disabled && !bypass) {
renderedChildren = React.Children.map(children, (child) => {
if (React.isValidElement(child)) {
return React.cloneElement(child, {
disabled: true
});
}
return child;
});
}
if (bypass) {
if (import.meta.env.DEV) {
console.trace("*** Lock Wrapper BYPASS USED", featureName);
}
return <span>{children}</span>;
}
return HasFeatureAccess({ featureName: featureName, bodyshop }) ? (
children
) : (
<Space>
{!HasFeatureAccess({ featureName: featureName, bodyshop }) && <LockOutlined style={{ color: "tomato" }} />}
{renderedChildren}
</Space>
);
};
export default connect(mapStateToProps, null)(LockWrapper);