| 53 | } |
| 54 | |
| 55 | function Tab({shouldSelectOnPressUp, item, state}) { |
| 56 | let {key, rendered} = item; |
| 57 | let ref = React.useRef(null); |
| 58 | let {tabProps} = useTab({key, shouldSelectOnPressUp}, state, ref); |
| 59 | let isSelected = state.selectedKey === key; |
| 60 | let isDisabled = state.disabledKeys.has(key); |
| 61 | return ( |
| 62 | <div |
| 63 | {...tabProps} |
| 64 | ref={ref} |
| 65 | style={{ |
| 66 | padding: '10px', |
| 67 | borderBottom: isSelected ? '3px solid blue' : undefined, |
| 68 | opacity: isDisabled ? '0.5' : undefined |
| 69 | }}> |
| 70 | {rendered} |
| 71 | </div> |
| 72 | ); |
| 73 | } |
| 74 | |
| 75 | function TabPanel({state, ...props}) { |
| 76 | let ref = React.useRef(null); |