Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Menu item disabled UI fixed (#484)

Browse Source
This commit is contained in:
devrk96 2020-09-02 14:32:29 +05:30 committed by GitHub
parent 8a0966d1f7
commit cb2e85785f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/client/src/components/ads/MenuItem.tsx
View File

@ -11,25 +11,33 @@ type MenuItemProps = CommonComponentProps & {
onSelect?: () => void; onSelect?: () => void;
}; };
const ItemRow = styled.div` const ItemRow = styled.div<{ disabled?: boolean }>`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: ${props => props.theme.spaces[4]}px padding: ${props => props.theme.spaces[4]}px
${props => props.theme.spaces[6]}px; ${props => props.theme.spaces[6]}px;
${props =>
!props.disabled
? `
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: ${props => props.theme.colors.blackShades[4]}; background-color: ${props.theme.colors.blackShades[4]};
.${Classes.TEXT} { .${Classes.TEXT} {
color: ${props => props.theme.colors.blackShades[9]}; color: ${props.theme.colors.blackShades[9]};
} }
.${Classes.ICON} { .${Classes.ICON} {
path { path {
fill: ${props => props.theme.colors.blackShades[9]}; fill: ${props.theme.colors.blackShades[9]};
} }
} }
}`
: `
&:hover {
cursor: not-allowed;
} }
`}
`; `;
const IconContainer = styled.div` const IconContainer = styled.div`
@ -43,7 +51,7 @@ const IconContainer = styled.div`
function MenuItem(props: MenuItemProps) { function MenuItem(props: MenuItemProps) {
return ( return (
<ItemRow onClick={props.onSelect}> <ItemRow onClick={props.onSelect} disabled={props.disabled}>
<IconContainer> <IconContainer>
{props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null} {props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null}
{props.text ? ( {props.text ? (

1
app/client/src/components/stories/Menu.stories.tsx
View File

@ -107,6 +107,7 @@ export const MenuStory = () => {
icon={select("First Icon", IconCollection, undefined)} icon={select("First Icon", IconCollection, undefined)}
onSelect={action("clicked-first-option")} onSelect={action("clicked-first-option")}
label={<span>W</span>} label={<span>W</span>}
disabled={boolean("First option disabled", false)}
/> />
{boolean("First menu item divider", false) ? <MenuDivider /> : null} {boolean("First menu item divider", false) ? <MenuDivider /> : null}
<MenuItem <MenuItem