86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import * as React from 'react'
|
|
import DateFormatter from '../helper/DateFormatter'
|
|
import { AppState } from '../../reducers'
|
|
import { bindActionCreators } from 'redux'
|
|
import { connect } from 'react-redux'
|
|
import { Input, InputLabel, MenuItem, Select, StyleRulesCallback, Theme } from '@material-ui/core'
|
|
import { settingsActions } from '../../actions'
|
|
import { withStyles } from '@material-ui/styles'
|
|
const moment = require('moment/min/moment-with-locales')
|
|
|
|
interface Props {
|
|
actions: {
|
|
settings: typeof settingsActions
|
|
}
|
|
timeLocale: string
|
|
classes: any
|
|
}
|
|
|
|
function TimeLocaleSettings(props: Props) {
|
|
const { classes, timeLocale, actions } = props
|
|
const locales = moment.locales()
|
|
const date = new Date()
|
|
const localeMenuItems = locales.map((l: string) => (
|
|
<MenuItem key={l} value={l}>
|
|
<div>
|
|
Locale: <b>{l}</b>, Format:{' '}
|
|
<b>
|
|
<DateFormatter date={date} overrideLocale={l} />
|
|
</b>
|
|
</div>
|
|
</MenuItem>
|
|
))
|
|
|
|
function updateLocale(e: React.ChangeEvent<{ value: unknown }>) {
|
|
const locale = e.target.value ? String(e.target.value) : ''
|
|
actions.settings.setTimeLocale(locale)
|
|
}
|
|
|
|
return (
|
|
<div style={{ padding: '8px', display: 'flex' }}>
|
|
<InputLabel htmlFor="time-locale" style={{ flex: '1', marginTop: '8px' }}>
|
|
Time Locale
|
|
</InputLabel>
|
|
<Select
|
|
value={timeLocale}
|
|
onChange={updateLocale}
|
|
input={<Input name="time-locale" id="time-locale-label-placeholder" />}
|
|
name="time-locale"
|
|
className={classes.input}
|
|
renderValue={v => <span>{String(v)}</span>}
|
|
style={{ flex: '1' }}
|
|
>
|
|
{localeMenuItems}
|
|
</Select>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState) => {
|
|
return {
|
|
timeLocale: state.settings.get('timeLocale'),
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = (dispatch: any) => {
|
|
return {
|
|
actions: {
|
|
settings: bindActionCreators(settingsActions, dispatch),
|
|
},
|
|
}
|
|
}
|
|
|
|
const styles = (theme: Theme) => ({
|
|
input: {
|
|
minWidth: '150px',
|
|
margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`,
|
|
},
|
|
selected: {
|
|
'& div': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
})
|
|
|
|
export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TimeLocaleSettings))
|