mirror of
https://github.com/maputnik/editor.git
synced 2026-02-08 05:30:00 +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>
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import React from 'react'
|
|
|
|
import InputButton from './InputButton'
|
|
import {MdFunctions, MdInsertChart} from 'react-icons/md'
|
|
import {mdiFunctionVariant} from '@mdi/js';
|
|
import { WithTranslation, withTranslation } from 'react-i18next';
|
|
|
|
type FunctionInputButtonsInternalProps = {
|
|
fieldSpec?: any
|
|
onZoomClick?(...args: unknown[]): unknown
|
|
onDataClick?(...args: unknown[]): unknown
|
|
onExpressionClick?(...args: unknown[]): unknown
|
|
} & WithTranslation;
|
|
|
|
class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsInternalProps> {
|
|
render() {
|
|
const t = this.props.t;
|
|
let makeZoomInputButton, makeDataInputButton, expressionInputButton;
|
|
|
|
if (this.props.fieldSpec.expression.parameters.includes('zoom')) {
|
|
expressionInputButton = (
|
|
<InputButton
|
|
className="maputnik-make-zoom-function"
|
|
onClick={this.props.onExpressionClick}
|
|
title={t("Convert to expression")}
|
|
>
|
|
<svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
|
|
<path fill="currentColor" d={mdiFunctionVariant} />
|
|
</svg>
|
|
</InputButton>
|
|
);
|
|
|
|
makeZoomInputButton = <InputButton
|
|
className="maputnik-make-zoom-function"
|
|
onClick={this.props.onZoomClick}
|
|
title={t("Convert property into a zoom function")}
|
|
>
|
|
<MdFunctions />
|
|
</InputButton>
|
|
|
|
if (this.props.fieldSpec['property-type'] === 'data-driven') {
|
|
makeDataInputButton = <InputButton
|
|
className="maputnik-make-data-function"
|
|
onClick={this.props.onDataClick}
|
|
title={t("Convert property to data function")}
|
|
>
|
|
<MdInsertChart />
|
|
</InputButton>
|
|
}
|
|
return <div>
|
|
{expressionInputButton}
|
|
{makeDataInputButton}
|
|
{makeZoomInputButton}
|
|
</div>
|
|
}
|
|
else {
|
|
return <div>{expressionInputButton}</div>
|
|
}
|
|
}
|
|
}
|
|
|
|
const FunctionInputButtons = withTranslation()(FunctionInputButtonsInternal);
|
|
export default FunctionInputButtons;
|