Custom Text Editor Buttons

import React from 'react'; import { TextBox, Button as TextBoxButton } from 'devextreme-react/text-box'; import { NumberBox, Button as NumberBoxButton } from 'devextreme-react/number-box'; import { DateBox, Button as DateBoxButton } from 'devextreme-react/date-box'; const millisecondsInDay = 24 * 60 * 60 * 1000; class App extends React.Component { constructor(props) { super(props); this.state = { passwordMode: 'password', currencyFormat: '$ #.##', currencyValue: 14500.55, dateValue: new Date().getTime() }; this.passwordButton = { icon: '../../../../images/icons/eye.png', type: 'default', onClick: () => { this.setState({ passwordMode: (this.state.passwordMode === 'text' ? 'password' : 'text') }); } }; this.currencyButton = { text: '€', stylingMode: 'text', width: 32, elementAttr: { class: 'currency' }, onClick: (e) => { if(e.component.option('text') === '$') { e.component.option('text', '€'); this.setState({ currencyFormat: '$ #.##', currencyValue: this.state.currencyValue / 0.891 }); } else { e.component.option('text', '$'); this.setState({ currencyFormat: '€ #.##', currencyValue: this.state.currencyValue * 0.891 }); } } }; this.changeCurrency = this.changeCurrency.bind(this); this.todayButton = { text: 'Today', onClick: () => { this.setState({ dateValue: new Date().getTime() }); } }; this.prevDateButton = { icon: 'spinprev', stylingMode: 'text', onClick: () => { this.setState({ dateValue: this.state.dateValue - millisecondsInDay }); } }; this.nextDateButton = { icon: 'spinnext', stylingMode: 'text', onClick: () => { this.setState({ dateValue: this.state.dateValue + millisecondsInDay }); } }; this.onDateChanged = (e) => { this.setState({ dateValue: e.value }); }; } changeCurrency(data) { this.setState({ currencyValue: data.value }); } render() { return ( <React.Fragment> <div className={'dx-fieldset'}> <div className={'dx-field'}> <div className={'dx-field-label'}>Password TextBox</div> <div className={'dx-field-value'}> <TextBox placeholder={'password'} stylingMode={'filled'} defaultValue={'password'} mode={this.state.passwordMode}> <TextBoxButton name={'password'} location={'after'} options={this.passwordButton} /> </TextBox> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>Multi-currency NumberBox</div> <div className={'dx-field-value'}> <NumberBox showClearButton={true} showSpinButtons={true} format={this.state.currencyFormat} value={this.state.currencyValue} onValueChanged={this.changeCurrency}> <NumberBoxButton name={'currency'} location={'after'} options={this.currencyButton} /> <NumberBoxButton name={'clear'} /> <NumberBoxButton name={'spins'} /> </NumberBox> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>Advanced DateBox</div> <div className={'dx-field-value'}> <DateBox value={this.state.dateValue} stylingMode={'outlined'} onValueChanged={this.onDateChanged}> <DateBoxButton name={'today'} location={'before'} options={this.todayButton} /> <DateBoxButton name={'prevDate'} location={'before'} options={this.prevDateButton} /> <DateBoxButton name={'nextDate'} location={'after'} options={this.nextDateButton} /> <DateBoxButton name={'dropDown'} /> </DateBox> </div> </div> </div> </React.Fragment> ); } } export default App;