|
| 1 | +import React from 'react' |
| 2 | +import PropTypes from 'prop-types' |
| 3 | +import Details from '../src/Details' |
| 4 | +import Button from '../src/Button' |
| 5 | +import CaretBox from '../src/CaretBox' |
| 6 | +import Text from '../src/Text' |
| 7 | +import Block from '../src/Block' |
| 8 | + |
| 9 | +const MergeButton = ({ primary, onClick, numCommits, children}) => { |
| 10 | + const arrowStyles = { |
| 11 | + content: '', |
| 12 | + border: '4px solid', |
| 13 | + borderRightColor: 'transparent', |
| 14 | + borderLeftColor: 'transparent', |
| 15 | + borderBottomColor: 'transparent', |
| 16 | + width: '0', |
| 17 | + height: '0' |
| 18 | + } |
| 19 | + |
| 20 | + const borderStyles = { |
| 21 | + borderTopLeftRadius: '0', |
| 22 | + borderBottomLeftRadius: '0' |
| 23 | + } |
| 24 | + |
| 25 | + const buttonSchemeProps = {} |
| 26 | + if (primary) { |
| 27 | + buttonSchemeProps.scheme = 'primary' |
| 28 | + } |
| 29 | + |
| 30 | + return( |
| 31 | + <div className='BtnGroup'> |
| 32 | + <Button {...buttonSchemeProps} grouped onClick={onClick} style={{ borderRight: 0}}> |
| 33 | + Merge Pull Request |
| 34 | + </Button> |
| 35 | + <Details className='details-reset d-flex float-right'> |
| 36 | + {({open, toggle}) => ( |
| 37 | + <React.Fragment> |
| 38 | + <Button tag='summary' {...buttonSchemeProps} onClick={toggle} style={borderStyles}> |
| 39 | + <div className='d-inline-block v-align-middle' style={arrowStyles}/> |
| 40 | + </Button> |
| 41 | + <Block position='absolute' width={300} mt={1} style={{zIndex: 99999}}> |
| 42 | + <CaretBox caret='top-left'> |
| 43 | + <ul className='list-style-none p-0 m-0'> |
| 44 | + <li className='border-bottom py-2 pl-4 pr-2'> |
| 45 | + <Text tag='p' m={0} fontSize={1} fontWeight='bold'>Create a merge commit</Text> |
| 46 | + <Text tag='p' m={0} fontSize={0}>All commits from this branch will be added to the base branch via a merge commit.</Text> |
| 47 | + </li> |
| 48 | + <li className='border-bottom py-2 pl-4 pr-2'> |
| 49 | + <Text tag='p' m={0} fontSize={1} fontWeight='bold'>Squash and merge</Text> |
| 50 | + <Text tag='p' m={0} fontSize={0}>The {numCommits} from this branch will be combined into one commit in the base branch.</Text> |
| 51 | + </li> |
| 52 | + <li className='py-2 pl-4 pr-2'> |
| 53 | + <Text tag='p' m={0} fontSize={1} fontWeight='bold'>Rebase and merge</Text> |
| 54 | + <Text tag='p' fontSize={0} m={0}>The {numCommits} from this branch will be rebased and added to the base branch</Text> |
| 55 | + </li> |
| 56 | + </ul> |
| 57 | + </CaretBox> |
| 58 | + </Block> |
| 59 | + </React.Fragment> |
| 60 | + )} |
| 61 | + </Details> |
| 62 | + </div> |
| 63 | + ) |
| 64 | +} |
| 65 | + |
| 66 | +MergeButton.propTypes = { |
| 67 | + primary: PropTypes.bool, |
| 68 | + onClick: PropTypes.func.isRequired, |
| 69 | + numCommits: PropTypes.number.isRequired, |
| 70 | +} |
| 71 | + |
| 72 | +export default MergeButton |
0 commit comments