Web:Components:Added LoaderSubmenu.
This commit is contained in:
parent
f557ca8dbe
commit
9d828a5c35
@ -12,8 +12,9 @@ import {
|
||||
StyledSubmenuItems,
|
||||
StyledSubmenuItemText,
|
||||
} from "./styled-submenu";
|
||||
import LoaderSubmenu from "./loader";
|
||||
|
||||
const Submenu = ({ data, startSelect = 0, onSelect, ...rest }) => {
|
||||
const Submenu = ({ data, startSelect = 0, onSelect, isLoading, ...rest }) => {
|
||||
if (!data) return null;
|
||||
|
||||
const [currentItem, setCurrentItem] = useState(
|
||||
@ -74,29 +75,40 @@ const Submenu = ({ data, startSelect = 0, onSelect, ...rest }) => {
|
||||
|
||||
return (
|
||||
<StyledSubmenu {...rest}>
|
||||
<StyledSubmenuItems ref={submenuItemsRef} role="list">
|
||||
{data.map((d) => {
|
||||
const isActive = d.id === currentItem.id;
|
||||
{isLoading ? (
|
||||
<LoaderSubmenu />
|
||||
) : (
|
||||
<>
|
||||
<StyledSubmenuItems ref={submenuItemsRef} role="list">
|
||||
{data.map((d) => {
|
||||
const isActive = d.id === currentItem.id;
|
||||
|
||||
return (
|
||||
<StyledSubmenuItem key={d.id} id={d.id} onClick={selectSubmenuItem}>
|
||||
<StyledSubmenuItemText>
|
||||
<Text
|
||||
color={isActive ? "#316DAA" : "#657077"}
|
||||
fontSize="13px"
|
||||
fontWeight="600"
|
||||
truncate={false}
|
||||
return (
|
||||
<StyledSubmenuItem
|
||||
key={d.id}
|
||||
id={d.id}
|
||||
onClick={selectSubmenuItem}
|
||||
>
|
||||
{d.name}
|
||||
</Text>
|
||||
</StyledSubmenuItemText>
|
||||
<StyledSubmenuItemLabel color={isActive ? "#316DAA" : "none"} />
|
||||
</StyledSubmenuItem>
|
||||
);
|
||||
})}
|
||||
</StyledSubmenuItems>
|
||||
<StyledSubmenuBottomLine />
|
||||
|
||||
<StyledSubmenuItemText>
|
||||
<Text
|
||||
color={isActive ? "#316DAA" : "#657077"}
|
||||
fontSize="13px"
|
||||
fontWeight="600"
|
||||
truncate={false}
|
||||
>
|
||||
{d.name}
|
||||
</Text>
|
||||
</StyledSubmenuItemText>
|
||||
<StyledSubmenuItemLabel
|
||||
color={isActive ? "#316DAA" : "none"}
|
||||
/>
|
||||
</StyledSubmenuItem>
|
||||
);
|
||||
})}
|
||||
</StyledSubmenuItems>
|
||||
<StyledSubmenuBottomLine />
|
||||
</>
|
||||
)}
|
||||
<StyledSubmenuContentWrapper>
|
||||
{currentItem.content}
|
||||
</StyledSubmenuContentWrapper>
|
||||
@ -108,6 +120,7 @@ Submenu.propTypes = {
|
||||
data: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
|
||||
startSelect: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
|
||||
onSelect: PropTypes.func,
|
||||
isLoading: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Submenu;
|
||||
|
32
packages/asc-web-components/submenu/loader.js
Normal file
32
packages/asc-web-components/submenu/loader.js
Normal file
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
import { isTablet } from "react-device-detect";
|
||||
|
||||
const StyledLoader = styled.div`
|
||||
margin-top: -4px;
|
||||
|
||||
.loader {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
${isTablet &&
|
||||
css`
|
||||
margin-top: -9px;
|
||||
`}
|
||||
`;
|
||||
|
||||
const LoaderSubmenu = () => {
|
||||
return (
|
||||
<StyledLoader>
|
||||
<Loaders.Rectangle width="100px" height="28px" className="loader" />
|
||||
<Loaders.Rectangle width="100px" height="28px" />
|
||||
</StyledLoader>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoaderSubmenu;
|
Loading…
Reference in New Issue
Block a user