mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
d589d2dec0
* Create RTL stylesheets using `gulp-rtl` * Handle RTL stylesheet special cases Certain blocks of Sass were set to bypass "rtlcss" using ignore comments. Certain icons had to be flipped 180 degrees. * Switch stylesheets when locale changes A second stylesheet has been added to each HTML page for use with right-to-left locales. It is disabled by default. It is enabled on startup if a RTL locale is set, and when switching to a RTL locale. Similarly the LTR stylesheet is disabled when a RTL locale is used. Unfortunately there is an unpleasant flash of unstyled content when switching between a LTR and a RTL locale. There is also a slightly longer page load time when using a RTL locale (<1s difference). We couldn't think of an easy way to avoid these problems. * Set `dir="auto"` as default on `TextFields`
90 lines
2.0 KiB
JavaScript
90 lines
2.0 KiB
JavaScript
const { Component } = require('react')
|
|
const PropTypes = require('prop-types')
|
|
const h = require('react-hyperscript')
|
|
const classnames = require('classnames')
|
|
|
|
class EditableLabel extends Component {
|
|
constructor (props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
isEditing: false,
|
|
value: props.defaultValue || '',
|
|
}
|
|
}
|
|
|
|
handleSubmit () {
|
|
const { value } = this.state
|
|
|
|
if (value === '') {
|
|
return
|
|
}
|
|
|
|
Promise.resolve(this.props.onSubmit(value))
|
|
.then(() => this.setState({ isEditing: false }))
|
|
}
|
|
|
|
saveIfEnter (event) {
|
|
if (event.key === 'Enter') {
|
|
this.handleSubmit()
|
|
}
|
|
}
|
|
|
|
renderEditing () {
|
|
const { value } = this.state
|
|
|
|
return ([
|
|
h('input.large-input.editable-label__input', {
|
|
type: 'text',
|
|
required: true,
|
|
dir: 'auto',
|
|
value: this.state.value,
|
|
onKeyPress: (event) => {
|
|
if (event.key === 'Enter') {
|
|
this.handleSubmit()
|
|
}
|
|
},
|
|
onChange: event => this.setState({ value: event.target.value }),
|
|
className: classnames({ 'editable-label__input--error': value === '' }),
|
|
}),
|
|
h('div.editable-label__icon-wrapper', [
|
|
h('i.fa.fa-check.editable-label__icon', {
|
|
onClick: () => this.handleSubmit(),
|
|
}),
|
|
]),
|
|
])
|
|
}
|
|
|
|
renderReadonly () {
|
|
return ([
|
|
h('div.editable-label__value', this.state.value),
|
|
h('div.editable-label__icon-wrapper', [
|
|
h('i.fa.fa-pencil.editable-label__icon', {
|
|
onClick: () => this.setState({ isEditing: true }),
|
|
}),
|
|
]),
|
|
])
|
|
}
|
|
|
|
render () {
|
|
const { isEditing } = this.state
|
|
const { className } = this.props
|
|
|
|
return (
|
|
h('div.editable-label', { className: classnames(className) },
|
|
isEditing
|
|
? this.renderEditing()
|
|
: this.renderReadonly()
|
|
)
|
|
)
|
|
}
|
|
}
|
|
|
|
EditableLabel.propTypes = {
|
|
onSubmit: PropTypes.func.isRequired,
|
|
defaultValue: PropTypes.string,
|
|
className: PropTypes.string,
|
|
}
|
|
|
|
module.exports = EditableLabel
|