diff options
| -rw-r--r-- | src/PatternTable.tsx | 60 | ||||
| -rw-r--r-- | src/Settings.tsx | 61 | ||||
| -rw-r--r-- | src/duration.ts | 12 | ||||
| -rw-r--r-- | tsconfig.json | 2 |
4 files changed, 81 insertions, 54 deletions
diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx index 93be293..60acd3c 100644 --- a/src/PatternTable.tsx +++ b/src/PatternTable.tsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, withTheme } from '@material-ui/core/styles'; +import { Theme, withStyles, withTheme } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; @@ -13,8 +13,10 @@ import Popover from '@material-ui/core/Popover'; import MaterialColorPicker from 'react-material-color-picker'; import { CalendarField, EventField } from './RegexField'; import { theme, defaultChartColor } from './theme'; +import { PatternEntry, PatternEntryColor } from './pattern'; +import { GCalendarMeta } from './gapi'; -const styles = theme => ({ +const styles = (theme: Theme) => ({ deleteButton: { width: 0, position: 'absolute', @@ -50,7 +52,12 @@ let nameFieldstyles = { } }; -function NameField(props) { +function NameField(props: { + value: PatternEntry, + classes: { colorSample: string }, + colorOnClick: (e: React.MouseEvent<HTMLDivElement>) => void, + onChange: (f: string, v: string) => void + }) { let color = props.value.color; return ( <span> @@ -68,23 +75,39 @@ function NameField(props) { const patternHead = [ {label: "Name", elem: withStyles(nameFieldstyles)(NameField)}, {label: "Calendar", elem: withTheme(theme)(CalendarField)}, - {label: "Event", elem: withTheme(theme)(EventField)}]; + {label: "Event", elem: withTheme(theme)(EventField)}] as {label: string, elem: any}[]; -class PatternTable extends React.Component { +class PatternTable extends React.Component<{ + classes: { + deleteButton: string, + deleteButtonHide: string, + deleteButtonShow: string, + deleteIcon: string, + patternTableWrapper: string, + patternTable: string, + }, + calendars: { [id: string]: GCalendarMeta }, + patterns: PatternEntry[], + onRemovePattern: (idx: number) => void, + onUpdatePattern: (field: string, idx: number, value: any) => void + }> { + + activeColorPattern: number; + chosenColor: string; state = { page: 0, rowsPerPage: 5, - activePattern: null, - anchorEl: null, + activePattern: null as number, + anchorEl: null as HTMLElement, colorPickerOpen: false, colorPickerDefault: defaultChartColor }; - handleChangePage = (event, page) => { + handleChangePage = (event: React.MouseEvent<HTMLButtonElement>, page: number) => { this.setState({ page }); } - handleChangeRowsPerPage = event => { + handleChangeRowsPerPage = (event: any) => { this.setState({ rowsPerPage: event.target.value }); } @@ -93,7 +116,7 @@ class PatternTable extends React.Component { this.activeColorPattern !== null && this.chosenColor && this.props.onUpdatePattern('color', this.activeColorPattern, - {background: this.chosenColor.target.value}) + {background: this.chosenColor}) } render() { @@ -123,8 +146,8 @@ class PatternTable extends React.Component { <CustomText value={p} calendars={calendars} - onChange={(field, value) => this.props.onUpdatePattern(field, p.idx, value)} - colorOnClick={event => { + onChange={(field: string, value: any) => this.props.onUpdatePattern(field, p.idx, value)} + colorOnClick={(event: any) => { this.activeColorPattern = p.idx; this.setState({ anchorEl: event.currentTarget, @@ -155,9 +178,9 @@ class PatternTable extends React.Component { }}> <MaterialColorPicker initColor={this.state.colorPickerDefault} - onSelect={color => { + onSelect={(event: any) => { console.log("select"); - this.chosenColor = color; + this.chosenColor = event.target.value; }} onSubmit={this.handleColorPickerClose} onReset={() => {}} @@ -196,13 +219,4 @@ class PatternTable extends React.Component { } } - -PatternTable.propTypes = { - classes: PropTypes.object.isRequired, - patterns: PropTypes.array.isRequired, - calendars: PropTypes.object.isRequired, - onRemovePattern: PropTypes.func.isRequired, - onUpdatePattern: PropTypes.func.isRequired, -}; - export default withStyles(styles)(PatternTable); diff --git a/src/Settings.tsx b/src/Settings.tsx index 1626a7a..e08a89b 100644 --- a/src/Settings.tsx +++ b/src/Settings.tsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { Theme, withStyles } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; @@ -30,7 +30,7 @@ import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; import { Duration } from './duration'; -const styles = theme => ({ +const styles = (theme: Theme) => ({ tableHead: { verticalAlign: 'top', textAlign: 'right', @@ -59,12 +59,19 @@ const CompactListItem = withStyles(theme => ({ }, }))(ListItem); -class TrackedPeriod extends React.Component { - valueOnChange = (old, onChange) => event => { +class TrackedPeriod extends React.Component<{ + name: string + fromDuration: Duration, + toDuration: Duration, + nameOnChange: (name: string) => void, + fromOnChange: (d: Duration) => void, + toOnChange: (d: Duration) => void + }>{ + valueOnChange = (old: Duration, onChange: (d: Duration) => void) => (event: any) => { onChange(new Duration(event.target.value, old.unit)); } - unitOnChange = (old, onChange) => event => { + unitOnChange = (old: Duration, onChange: (d: Duration) => void) => (event: any) => { onChange(new Duration(old.value, event.target.value)); } @@ -78,7 +85,7 @@ class TrackedPeriod extends React.Component { } }; - static toValue(value) { + static toValue(value: any) { if (isNaN(value)) return null; let v = parseInt(value, 10); if (v < 0 || v > 999) return null; @@ -86,7 +93,7 @@ class TrackedPeriod extends React.Component { } render() { - let { classes, fromDuration, toDuration, nameOnChange, fromOnChange, toOnChange, name } = this.props; + let { fromDuration, toDuration, nameOnChange, fromOnChange, toOnChange, name } = this.props; let units = [ <MenuItem key='days' value='days'>Day(s)</MenuItem>, <MenuItem key='weeks' value='weeks'>Week(s)</MenuItem>, @@ -95,19 +102,19 @@ class TrackedPeriod extends React.Component { return ( <span> <TextField - inputProps={{ style: TrackedPeriod.styles.periodName}} + inputProps={{ style: TrackedPeriod.styles.periodName } as React.CSSProperties} value={name} onChange={event => nameOnChange(event.target.value)}/>: from <TextField error={TrackedPeriod.toValue(fromDuration.value) === null} - inputProps={{style: TrackedPeriod.styles.periodValue}} + inputProps={{ style: TrackedPeriod.styles.periodValue } as React.CSSProperties} value={fromDuration.value} onChange={this.valueOnChange(fromDuration, fromOnChange)} /> <Select value={fromDuration.unit} onChange={this.unitOnChange(fromDuration, fromOnChange)}>{units}</Select> ago to <TextField error={TrackedPeriod.toValue(toDuration.value) === null} - inputProps={{style: TrackedPeriod.styles.periodValue}} + inputProps={{style: TrackedPeriod.styles.periodValue} as React.CSSProperties} value={toDuration.value} onChange={this.valueOnChange(toDuration, toOnChange)} /> <Select value={toDuration.unit} @@ -117,7 +124,17 @@ class TrackedPeriod extends React.Component { } } -class Settings extends React.Component { +class Settings extends React.Component<{ + classes: { + tableHead: string, + tableContent: string, + calendarList: string, + } + }> { + + msgClient: MsgClient; + dialogPromiseResolver: (r: boolean) => void; + state = { isLoggedIn: false, patterns: [], @@ -137,26 +154,26 @@ class Settings extends React.Component { this.msgClient = new MsgClient('main'); this.msgClient.sendMsg({ - type: MsgType.getPatterns, + opt: MsgType.getPatterns, data: { id: 'main' } }).then(msg => { this.setState({ patterns: msg.data.map(p => PatternEntry.inflate(p)) }); }); this.msgClient.sendMsg({ - type: MsgType.getCalendars, + opt: MsgType.getCalendars, data: { enabledOnly: false } }).then(msg => { this.setState({ calendars: msg.data }); }); this.msgClient.sendMsg({ - type: MsgType.getConfig, + opt: MsgType.getConfig, data: ['trackedPeriods'] }).then(msg => { let config = { trackedPeriods: msg.data.trackedPeriods.map((p: TrackPeriodFlat) => ( - new TrackPeriod.inflate(p); + new TrackPeriod.inflate(p) )) }; console.log(msg.data.trackedPeriods); @@ -187,7 +204,7 @@ class Settings extends React.Component { var calendars = {...this.state.calendars}; calendars[id].enabled = !calendars[id].enabled; this.msgClient.sendMsg({ - type: MsgType.updateCalendars, + opt: MsgType.updateCalendars, data: calendars }).then(() => this.setState({ calendars })); } @@ -236,14 +253,14 @@ class Settings extends React.Component { calendars[id].enabled = this.state.calendars[id].enabled; } this.msgClient.sendMsg({ - type: MsgType.updateCalendars, + opt: MsgType.updateCalendars, data: calendars }).then(() => this.setState({ calendars })); }; loadPatterns = (patterns, id) => { this.msgClient.sendMsg({ - type: MsgType.updatePatterns, + opt: MsgType.updatePatterns, data: { id, patterns: patterns.map(p => p.deflate()) } }).then(() => this.setState({ patterns })); }; @@ -293,8 +310,8 @@ class Settings extends React.Component { updateTrackedPeriods = trackedPeriods => { this.msgClient.sendMsg({ - type: MsgType.updateConfig, - data: { trackedPeriods: trackedPeriods.map(p => p.deflate())) } + opt: MsgType.updateConfig, + data: { trackedPeriods: trackedPeriods.map(p => p.deflate()) } }).then(() => this.setState({...this.state.config, trackedPeriods })); } @@ -422,8 +439,4 @@ class Settings extends React.Component { } } -Settings.propTypes = { - classes: PropTypes.object.isRequired, -}; - export default withStyles(styles)(Settings); diff --git a/src/duration.ts b/src/duration.ts index 34ccb91..ebd270d 100644 --- a/src/duration.ts +++ b/src/duration.ts @@ -3,14 +3,14 @@ import moment from 'moment'; export type TimeUnit = moment.unitOfTime.DurationConstructor; export type DurationFlat = { - value: number, + value: string, unit: string }; export class Duration { - value: number; + value: string; unit: TimeUnit; - constructor(value: number, unit: TimeUnit) { + constructor(value: string, unit: TimeUnit) { this.value = value this.unit = unit } @@ -22,9 +22,9 @@ export class Duration { return null; } - static days(n: number) { return new Duration(n, 'days'); } - static weeks(n: number) { return new Duration(n, 'weeks'); } - static months(n: number) { return new Duration(n, 'months'); } + static days(n: number) { return new Duration(String(n), 'days'); } + static weeks(n: number) { return new Duration(String(n), 'weeks'); } + static months(n: number) { return new Duration(String(n), 'months'); } deflate() { return { value: this.value, unit: this.unit }; } static inflate = (obj: DurationFlat) => new Duration(obj.value, obj.unit as TimeUnit); diff --git a/tsconfig.json b/tsconfig.json index c15d47c..68f8f40 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "noImplicitAny": true, "module": "commonjs", "target": "es5", - "lib": ["dom", "es2016", "es2017"], + "lib": ["dom", "es2016", "es2017", "esnext"], "jsx": "react", "typeRoots": ["./types", "./node_modules/@types"], "allowSyntheticDefaultImports": true |