diff --git a/src/actions/index.js b/src/actions/index.js index 68bc59b..12ced64 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,16 +1,14 @@ import {saveState} from '../utils' export const updateBeaconId = (state, event) => { - if (event.key === 'Enter') { - const beaconId = event.target.value - console.log('Beacon DevTools: Initializing', beaconId) - window.Beacon('destroy') - window.Beacon('init', beaconId) - - return { - beaconId, - open: false, - } + const beaconId = event.target.value + console.log('Beacon DevTools: Initializing', beaconId) + window.Beacon('destroy') + window.Beacon('init', beaconId) + + return { + beaconId, + open: false, } } diff --git a/src/components/DevTools/DevTools.js b/src/components/DevTools/DevTools.js index b196e12..ee0f1ed 100644 --- a/src/components/DevTools/DevTools.js +++ b/src/components/DevTools/DevTools.js @@ -35,6 +35,7 @@ import {DevToolsUI, FormBlock, HeaderUI, FooterUI} from './DevTools.css' export class DevTools extends React.PureComponent { static defaultProps = { beaconId: '', + beaconIds: [], isAutoOpen: false, toggleDocs: () => undefined, toggleMessaging: () => undefined, @@ -62,6 +63,37 @@ export class DevTools extends React.PureComponent { window.Beacon('off', 'close', this.props.closeBeacon) } + handleOnInputUpdateBeaconId = event => { + if (event.key === 'Enter') { + this.props.updateBeaconId(event) + } + } + + handleOnSelectUpdateBeaconId = event => { + this.props.updateBeaconId(event) + } + + renderBeaconIds() { + const {beaconIds} = this.props + if (!beaconIds.length) return null + + return ( + + ) + } + render() { const { chatEnabled, @@ -79,7 +111,6 @@ export class DevTools extends React.PureComponent { toggleOpen, toggleShowGetInTouch, toggleTranslation, - updateBeaconId, updateColor, updateDisplayText, updateIconImage, @@ -95,7 +126,11 @@ export class DevTools extends React.PureComponent { Beacon DevTools - + + {this.renderBeaconIds()}
diff --git a/src/components/Label/Label.js b/src/components/Label/Label.js index 52ca6cc..c159d17 100644 --- a/src/components/Label/Label.js +++ b/src/components/Label/Label.js @@ -2,11 +2,14 @@ import styled from '@helpscout/hsds-react/components/styled' const LabelUI = styled('label')` color: #ccc; + display: block; font-family: inherit; font-size: 12px; - display: block; - margin-top: 6px; + font-weight: normal; + letter-spacing: 0; margin-bottom: 10px; + margin-top: 6px; + text-transform: initial; ` export default LabelUI