mirror of
https://github.com/maputnik/editor.git
synced 2026-02-09 06:00:09 +00:00
58edd262b0
This is a rough start on adding react-i18next. I'll be working on adding more translatable strings and translations in the coming days. I'm going to need to wrap class components in HOCs, so let me know if there's something I should be fixing before doing that. I'm thinking now to keep the exported class names exactly the same, and rename the existing classes by prefixing an `I` (for internal). For example: ``` export default class AppToolbar ... ``` becomes ``` class IAppToolbar ... const AppToolbar = withTranslation()(IAppToolbar); export default AppToolbar; ``` I'll be able to contribute Japanese strings (I've talked to a couple people on my team and they'll be happy to help as well), so that's the language I decided to go with in this PR. Closes #746 --------- Co-authored-by: Ko Nagase <nagase@georepublic.co.jp> Co-authored-by: Harel M <harel.mazor@gmail.com>
102 lines
2.4 KiB
TypeScript
102 lines
2.4 KiB
TypeScript
import React from 'react'
|
|
|
|
export type InputStringProps = {
|
|
"data-wd-key"?: string
|
|
value?: string
|
|
style?: object
|
|
default?: string
|
|
onChange?(value: string | undefined): unknown
|
|
onInput?(value: string | undefined): unknown
|
|
multi?: boolean
|
|
required?: boolean
|
|
disabled?: boolean
|
|
spellCheck?: boolean
|
|
'aria-label'?: string
|
|
title?: string
|
|
};
|
|
|
|
type InputStringState = {
|
|
editing: boolean
|
|
value?: string
|
|
}
|
|
|
|
export default class InputString extends React.Component<InputStringProps, InputStringState> {
|
|
static defaultProps = {
|
|
onInput: () => {},
|
|
}
|
|
|
|
constructor(props: InputStringProps) {
|
|
super(props)
|
|
this.state = {
|
|
editing: false,
|
|
value: props.value || ''
|
|
}
|
|
}
|
|
|
|
static getDerivedStateFromProps(props: Readonly<InputStringProps>, state: InputStringState) {
|
|
if (!state.editing) {
|
|
return {
|
|
value: props.value
|
|
};
|
|
}
|
|
return {};
|
|
}
|
|
|
|
render() {
|
|
let tag;
|
|
let classes;
|
|
|
|
if(this.props.multi) {
|
|
tag = "textarea"
|
|
classes = [
|
|
"maputnik-string",
|
|
"maputnik-string--multi"
|
|
]
|
|
}
|
|
else {
|
|
tag = "input"
|
|
classes = [
|
|
"maputnik-string"
|
|
]
|
|
}
|
|
|
|
if(this.props.disabled) {
|
|
classes.push("maputnik-string--disabled");
|
|
}
|
|
|
|
return React.createElement(tag, {
|
|
"aria-label": this.props["aria-label"],
|
|
"data-wd-key": this.props["data-wd-key"],
|
|
spellCheck: Object.prototype.hasOwnProperty.call(this.props, "spellCheck") ? this.props.spellCheck : !(tag === "input"),
|
|
disabled: this.props.disabled,
|
|
className: classes.join(" "),
|
|
style: this.props.style,
|
|
value: this.state.value === undefined ? "" : this.state.value,
|
|
placeholder: this.props.default,
|
|
title: this.props.title,
|
|
onChange: (e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
|
|
this.setState({
|
|
editing: true,
|
|
value: e.target.value
|
|
}, () => {
|
|
if (this.props.onInput) this.props.onInput(this.state.value);
|
|
});
|
|
},
|
|
onBlur: () => {
|
|
if(this.state.value!==this.props.value) {
|
|
this.setState({editing: false});
|
|
if (this.props.onChange) this.props.onChange(this.state.value);
|
|
}
|
|
},
|
|
onKeyDown: (e) => {
|
|
if (e.keyCode === 13 && this.props.onChange) {
|
|
this.props.onChange(this.state.value);
|
|
}
|
|
},
|
|
required: this.props.required,
|
|
});
|
|
}
|
|
}
|
|
|
|
|