1import * as React from 'react' 2import * as Kb from '../../../../common-adapters' 3import * as Container from '../../../../util/container' 4import * as Styles from '../../../../styles' 5import {RetentionPolicy} from '../../../../constants/types/retention-policy' 6 7export type Props = { 8 canChange: boolean 9 explanation?: string 10 measure?: () => void 11 onChange: () => void 12 policy: RetentionPolicy 13 teamPolicy: RetentionPolicy 14} 15 16const RetentionNotice = (props: Props) => { 17 Container.useDepChangeEffect(() => { 18 props.measure && props.measure() 19 }, [props.canChange, props.policy, props.teamPolicy]) 20 21 const iconType = 22 props.policy.type === 'explode' || 23 (props.policy.type === 'inherit' && props.teamPolicy.type === 'explode') 24 ? 'iconfont-bomb-solid' 25 : 'iconfont-timer-solid' 26 27 return ( 28 <Kb.Box style={styles.container}> 29 <Kb.Box style={styles.iconBox}> 30 <Kb.Icon color={Styles.globalColors.black_20} fontSize={20} type={iconType} /> 31 </Kb.Box> 32 {!!props.explanation && ( 33 <Kb.Text center={true} type="BodySmallSemibold"> 34 {props.explanation} 35 </Kb.Text> 36 )} 37 {props.canChange && ( 38 <Kb.Text 39 type="BodySmallSemiboldPrimaryLink" 40 style={{color: Styles.globalColors.blueDark}} 41 onClick={props.onChange} 42 > 43 Change this 44 </Kb.Text> 45 )} 46 </Kb.Box> 47 ) 48} 49export default RetentionNotice 50 51const styles = Styles.styleSheetCreate( 52 () => 53 ({ 54 container: { 55 ...Styles.globalStyles.flexBoxColumn, 56 alignItems: 'center', 57 backgroundColor: Styles.globalColors.blueLighter3, 58 paddingBottom: Styles.globalMargins.small, 59 paddingLeft: Styles.globalMargins.medium, 60 paddingRight: Styles.globalMargins.medium, 61 paddingTop: Styles.globalMargins.small, 62 width: '100%', 63 }, 64 iconBox: { 65 marginBottom: Styles.globalMargins.xtiny, 66 }, 67 } as const) 68) 69