|
| 1 | +import React, { Component, ReactElement } from 'react'; |
| 2 | +import { ButtonType, PlacementType } from '@fiori-for-react/core/enums'; |
| 3 | +import { Event } from '@fiori-for-react/utils'; |
| 4 | +import { ClassProps, JSSTheme } from '@fiori-for-react/core/types'; |
| 5 | +import { withStyles } from '@fiori-for-react/core/utils/withStyles'; |
| 6 | +import { Title } from '../../webComponents/Title'; |
| 7 | +import { Button, ButtonPropTypes } from '../../webComponents/Button'; |
| 8 | +import { ResponsivePopover } from '../ResponsivePopover'; |
| 9 | +import { List } from '../../webComponents/List'; |
| 10 | +import { ListItemTypes, ListMode, TitleLevel } from '../..'; |
| 11 | +import { CommonProps } from '@fiori-for-react/core/interfaces'; |
| 12 | +import { StandardListItem } from '../../webComponents/StandardListItem'; |
| 13 | + |
| 14 | +export interface VariantItem { |
| 15 | + key: string; |
| 16 | + label: string; |
| 17 | +} |
| 18 | + |
| 19 | +export interface VariantManagementPropTypes extends CommonProps { |
| 20 | + enabled?: boolean; |
| 21 | + placement?: PlacementType; |
| 22 | + popupTitle?: string; |
| 23 | + initialSelectedKey?: string; |
| 24 | + closeOnItemSelect?: boolean; |
| 25 | + variantItems: VariantItem[]; |
| 26 | + onSelect?: (event: Event) => void; |
| 27 | + level?: TitleLevel; |
| 28 | +} |
| 29 | + |
| 30 | +interface VariantManagementInternalProps extends VariantManagementPropTypes, ClassProps { |
| 31 | + theme: JSSTheme; |
| 32 | +} |
| 33 | + |
| 34 | +interface VariantManagementState { |
| 35 | + selectedKey: string; |
| 36 | + open: boolean; |
| 37 | +} |
| 38 | + |
| 39 | +const styles = ({ parameters }: JSSTheme) => ({ |
| 40 | + VariantManagement: { |
| 41 | + display: 'inline', |
| 42 | + textAlign: 'center', |
| 43 | + cursor: 'pointer' |
| 44 | + }, |
| 45 | + VariantManagementText: { |
| 46 | + '& > *': { |
| 47 | + cursor: 'pointer', |
| 48 | + textShadow: parameters.sapUiContentShadowColor |
| 49 | + } |
| 50 | + }, |
| 51 | + footer: { |
| 52 | + float: 'right', |
| 53 | + padding: '0.5rem' |
| 54 | + } |
| 55 | +}); |
| 56 | + |
| 57 | +@withStyles(styles) |
| 58 | +export class VariantManagement extends Component<VariantManagementPropTypes, VariantManagementState> { |
| 59 | + static defaultProps = { |
| 60 | + enabled: true, |
| 61 | + popupTitle: 'Variants', |
| 62 | + initialSelectedKey: null, |
| 63 | + onSelect: () => {}, |
| 64 | + closeOnItemSelect: true, |
| 65 | + placement: PlacementType.Bottom, |
| 66 | + level: TitleLevel.H4 |
| 67 | + }; |
| 68 | + |
| 69 | + private initialSelectedKey = this.props.variantItems && this.props.variantItems[0] && this.props.variantItems[0].key; |
| 70 | + |
| 71 | + state = { |
| 72 | + selectedKey: this.initialSelectedKey, |
| 73 | + open: false |
| 74 | + }; |
| 75 | + |
| 76 | + _getItemByKey(key, items) { |
| 77 | + return items.filter((item) => item.key === key)[0]; |
| 78 | + } |
| 79 | + |
| 80 | + private handleCancelButtonClick = () => { |
| 81 | + this.setState({ open: false }); |
| 82 | + }; |
| 83 | + |
| 84 | + private handleAfterOpen = () => { |
| 85 | + this.setState({ open: true }); |
| 86 | + }; |
| 87 | + |
| 88 | + private handleVariantItemSelect = (event) => { |
| 89 | + const selectedKey = event.getParameter('item').getAttribute('data-key'); |
| 90 | + const { variantItems } = this.props as VariantManagementInternalProps; |
| 91 | + const selectedItem = this._getItemByKey(selectedKey, variantItems) || variantItems[0]; |
| 92 | + this.setState({ selectedKey }); |
| 93 | + this.props.onSelect(Event.of(this, event.getOriginalEvent(), { selectedItem })); |
| 94 | + if (this.props.closeOnItemSelect) { |
| 95 | + const openPopover = !this.state.open; |
| 96 | + this.setState({ open: openPopover }); |
| 97 | + } |
| 98 | + }; |
| 99 | + |
| 100 | + private get variantManagementButton() { |
| 101 | + const { classes, variantItems, level } = this.props as VariantManagementInternalProps; |
| 102 | + const { selectedKey } = this.state; |
| 103 | + const selectedItem = this._getItemByKey(selectedKey, variantItems) || variantItems[0]; |
| 104 | + |
| 105 | + return ( |
| 106 | + <div className={classes.VariantManagement}> |
| 107 | + <span className={classes.VariantManagementText}> |
| 108 | + <Title level={level}>{selectedItem.label}</Title> |
| 109 | + </span> |
| 110 | + <Button type={ButtonType.Transparent} icon={'navigation-down-arrow'} /> |
| 111 | + </div> |
| 112 | + ); |
| 113 | + } |
| 114 | + |
| 115 | + private getVariantManagementFooterButtons = () => { |
| 116 | + const { classes } = this.props as VariantManagementInternalProps; |
| 117 | + return [ |
| 118 | + <Button |
| 119 | + className={classes.footer} |
| 120 | + key="btn-cancel" |
| 121 | + onPress={this.handleCancelButtonClick} |
| 122 | + type={ButtonType.Emphasized} |
| 123 | + > |
| 124 | + Cancel |
| 125 | + </Button> |
| 126 | + ] as Array<ReactElement<ButtonPropTypes>>; |
| 127 | + }; |
| 128 | + |
| 129 | + render() { |
| 130 | + const { variantItems, popupTitle, className, style, tooltip } = this.props; |
| 131 | + const { selectedKey } = this.state; |
| 132 | + |
| 133 | + if (!variantItems || variantItems.length < 1) { |
| 134 | + return null; |
| 135 | + } |
| 136 | + |
| 137 | + return ( |
| 138 | + <ResponsivePopover |
| 139 | + open={this.state.open} |
| 140 | + onAfterOpen={this.handleAfterOpen} |
| 141 | + headerText={popupTitle} |
| 142 | + placementType={this.props.placement} |
| 143 | + openBy={this.variantManagementButton} |
| 144 | + footer={this.getVariantManagementFooterButtons() as Array<ReactElement<ButtonPropTypes>>} |
| 145 | + className={className} |
| 146 | + innerStyles={style} |
| 147 | + tooltip={tooltip} |
| 148 | + > |
| 149 | + <List onItemPress={this.handleVariantItemSelect} mode={ListMode.SingleSelect}> |
| 150 | + {variantItems.map((item) => ( |
| 151 | + <StandardListItem |
| 152 | + style={{ width: '300px' }} |
| 153 | + data-key={item.key} |
| 154 | + type={ListItemTypes.Active} |
| 155 | + key={item.key} |
| 156 | + selected={selectedKey === item.key} |
| 157 | + > |
| 158 | + {item.label} |
| 159 | + </StandardListItem> |
| 160 | + ))} |
| 161 | + </List> |
| 162 | + </ResponsivePopover> |
| 163 | + ); |
| 164 | + } |
| 165 | +} |
0 commit comments