From f44c7b95ec85ce10bf8f4dcb1f0d6cdbd2fd0e7f Mon Sep 17 00:00:00 2001 From: Determinant Date: Sat, 16 Feb 2019 14:48:42 -0500 Subject: clean up more --- src/Dialog.tsx | 2 +- src/PatternTable.tsx | 63 +++++++++++++++++++++++++++------------------------- src/RegexField.tsx | 57 ++++++++++++++++++++++++++--------------------- src/Settings.tsx | 22 +++++++++--------- src/Snackbar.tsx | 31 +++++++++++++------------- src/msg.ts | 2 +- src/popup.tsx | 29 ++++++++++++------------ src/theme.ts | 18 +++++++++++++++ src/theme.tsx | 18 --------------- 9 files changed, 128 insertions(+), 114 deletions(-) create mode 100644 src/theme.ts delete mode 100644 src/theme.tsx (limited to 'src') diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 984ecbb..50fd05d 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -15,7 +15,7 @@ function Transition(props: any) { type AlertDialogProps = { open: boolean, - handleClose: (r: boolean) => any, + handleClose: (r: boolean) => void, title: string, message: string }; diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx index 2b05287..3aef72f 100644 --- a/src/PatternTable.tsx +++ b/src/PatternTable.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Theme, withStyles, withTheme, StyleRules } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; import Table from '@material-ui/core/Table'; @@ -11,6 +10,7 @@ import TablePagination from '@material-ui/core/TablePagination'; import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; 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'; @@ -52,12 +52,14 @@ let nameFieldstyles = { } }; -function NameField(props: { - value: PatternEntry, - classes: { colorSample: string }, - colorOnClick: (e: React.MouseEvent) => void, - onChange: (f: string, v: string) => void - }) { +type NameFieldProps = { + value: PatternEntry, + classes: { colorSample: string }, + colorOnClick: (e: React.MouseEvent) => void, + onChange: (f: string, v: string) => void +}; + +function NameField(props: NameFieldProps) { let color = props.value.color; return ( @@ -72,25 +74,27 @@ function NameField(props: { ); } -const patternHead = [ +const patternHead: {label: string, elem: any}[] = [ {label: "Name", elem: withStyles(nameFieldstyles)(NameField)}, {label: "Calendar", elem: withTheme()(CalendarField)}, - {label: "Event", elem: withTheme()(EventField)}] as {label: string, elem: any}[]; + {label: "Event", elem: withTheme()(EventField)}]; + +type PatternTableProps = { + 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 +}; -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 - }> { +class PatternTable extends React.Component { activeColorPattern: number; chosenColor: string; @@ -103,20 +107,19 @@ class PatternTable extends React.Component<{ colorPickerDefault: defaultChartColor }; - handleChangePage = (event: React.MouseEvent, page: number) => { + handleChangePage = (event: React.MouseEvent<{}>, page: number) => { this.setState({ page }); } - handleChangeRowsPerPage = (event: any) => { + handleChangeRowsPerPage = (event: React.ChangeEvent) => { this.setState({ rowsPerPage: event.target.value }); } handleColorPickerClose = () => { this.setState({ colorPickerOpen: false }); - this.activeColorPattern !== null && - this.chosenColor && + this.activeColorPattern !== null && this.chosenColor !== null && this.props.onUpdatePattern('color', this.activeColorPattern, - {background: this.chosenColor}) + { background: this.chosenColor }); } render() { @@ -147,7 +150,7 @@ class PatternTable extends React.Component<{ value={p} calendars={calendars} onChange={(field: string, value: any) => this.props.onUpdatePattern(field, p.idx, value)} - colorOnClick={(event: any) => { + colorOnClick={(event: React.MouseEvent<{}>) => { this.activeColorPattern = p.idx; this.setState({ anchorEl: event.currentTarget, @@ -178,7 +181,7 @@ class PatternTable extends React.Component<{ }}> { + onSelect={(event: React.ChangeEvent) => { console.log("select"); this.chosenColor = event.target.value; }} diff --git a/src/RegexField.tsx b/src/RegexField.tsx index 9483103..77c57ab 100644 --- a/src/RegexField.tsx +++ b/src/RegexField.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Theme, withStyles } from '@material-ui/core/styles'; import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; import FormControl from '@material-ui/core/FormControl'; + import { Pattern, PatternEntry } from './pattern'; import { GCalendarMeta } from './gapi'; @@ -17,16 +17,18 @@ const styles = (theme: Theme) => ({ } }); -class RegexField extends React.Component<{ - classes: { - fieldRegex: string, - fieldNoRegex: string - }, - options: {[id: string]: Pattern}, - theme: Theme, - value: Pattern, - onChange: (p: Pattern) => void - }>{ +type RegexFieldProps = { + classes: { + fieldRegex: string, + fieldNoRegex: string + }, + options: {[id: string]: Pattern}, + theme: Theme, + value: Pattern, + onChange: (p: Pattern) => void +}; + +class RegexField extends React.Component { render() { const { classes } = this.props; let items: React.ReactElement[] = []; @@ -39,7 +41,7 @@ class RegexField extends React.Component<{ Custom; items.push({label}); } - const selectOnClick = (event: { target: { value: any }}) => { + const selectOnClick = (event: React.ChangeEvent) => { let value; if (pitems[event.target.value].label == null) { value = new Pattern(0, true, @@ -52,8 +54,9 @@ class RegexField extends React.Component<{ this.props.onChange(value); }; - const regexTextOnChange = (event: { target: { value: any }}) => this.props.onChange( - new Pattern(0, true, event.target.value, null)); + const regexTextOnChange = (event: React.ChangeEvent) => ( + this.props.onChange(new Pattern(0, true, event.target.value, null)) + ); const className = this.props.value.isRegex ? classes.fieldRegex: classes.fieldNoRegex; return ( @@ -76,12 +79,14 @@ class RegexField extends React.Component<{ const RegexFieldWithStyles = withStyles(styles)(RegexField); -export function CalendarField(props: { - calendars: {[id: string]: GCalendarMeta}, - theme: Theme, - onChange: (field: string, value: Pattern) => void, - value: PatternEntry - }) { +type CalendarFieldProps = { + calendars: {[id: string]: GCalendarMeta}, + theme: Theme, + onChange: (field: string, value: Pattern) => void, + value: PatternEntry +}; + +export function CalendarField(props: CalendarFieldProps) { let options: {[id: string]: Pattern} = {}; for (let id in props.calendars) { options[id] = new Pattern(id, false, @@ -96,11 +101,13 @@ export function CalendarField(props: { theme={props.theme} />); } -export function EventField(props: { - theme: Theme, - value: PatternEntry, - onChange: (field: string, value: Pattern) => void - }) { +type EventFieldProps = { + theme: Theme, + value: PatternEntry, + onChange: (field: string, value: Pattern) => void +}; + +export function EventField(props: EventFieldProps) { let wildcard = Pattern.anyPattern(); let options: { [id: string]: Pattern } = {}; options[wildcard.id] = wildcard; diff --git a/src/Settings.tsx b/src/Settings.tsx index ecef23b..b02cd25 100644 --- a/src/Settings.tsx +++ b/src/Settings.tsx @@ -26,7 +26,7 @@ import AlertDialog from './Dialog'; import * as gapi from './gapi'; import { MsgType, MsgClient } from './msg'; import { Pattern, PatternEntry, PatternEntryFlat } from './pattern'; -import { Duration, TrackPeriod, TrackPeriodFlat } from './duration'; +import { Duration, TimeUnit, TrackPeriod, TrackPeriodFlat } from './duration'; const styles = (theme: Theme): StyleRules => ({ tableHead: { @@ -67,13 +67,17 @@ type TrackedPeriodProps = { }; class TrackedPeriod extends React.Component { - valueOnChange = (old: Duration, onChange: (d: Duration) => void) => (event: any) => { - onChange(new Duration(event.target.value, old.unit)); - } + valueOnChange = (old: Duration, onChange: (d: Duration) => void) => ( + (event: React.ChangeEvent) => { + onChange(new Duration(event.target.value, old.unit)); + } + ); - unitOnChange = (old: Duration, onChange: (d: Duration) => void) => (event: any) => { - onChange(new Duration(old.value, event.target.value)); - } + unitOnChange = (old: Duration, onChange: (d: Duration) => void) => ( + (event: React.ChangeEvent) => { + onChange(new Duration(old.value, event.target.value as TimeUnit)); + } + ); static styles = { periodName: { @@ -450,6 +454,4 @@ class Settings extends React.Component { } } -const StyledSettings = withStyles(styles)(Settings); - -export default StyledSettings; +export default withStyles(styles)(Settings); diff --git a/src/Snackbar.tsx b/src/Snackbar.tsx index f700422..33a47fe 100644 --- a/src/Snackbar.tsx +++ b/src/Snackbar.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Theme, withStyles } from '@material-ui/core/styles'; import amber from '@material-ui/core/colors/amber'; @@ -39,21 +38,23 @@ const styles = (theme: Theme) => ({ export type SnackbarVariant = 'error' | 'warning'; -function CustomSnackbar(props: { - classes: { - error: string, - warning: string, - message: string, - icon: string, - iconVariant: string, - close: string - }, - variant: SnackbarVariant, - className?: string, - open: boolean, +type CustomSnackbarProps = { + classes: { + error: string, + warning: string, message: string, - onClose: (event: React.SyntheticEvent<{}>, reason?: string) => void - }) { + icon: string, + iconVariant: string, + close: string + }, + variant: SnackbarVariant, + className?: string, + open: boolean, + message: string, + onClose: (event: React.SyntheticEvent<{}>, reason?: string) => void +}; + +function CustomSnackbar(props: CustomSnackbarProps) { const { classes, className, message, variant, open, onClose } = props; const Icon = variantIcon[variant]; return ( diff --git a/src/msg.ts b/src/msg.ts index 158fd8d..efbadb5 100644 --- a/src/msg.ts +++ b/src/msg.ts @@ -52,7 +52,7 @@ export class Msg { export class MsgClient { requestCallback: { ids: number[], - inFlight: {[id: number]: (msg: Msg) => any; }, + inFlight: {[id: number]: (msg: Msg) => void; }, maxId: number }; port: chrome.runtime.Port; diff --git a/src/popup.tsx b/src/popup.tsx index ce9f891..20f08e0 100644 --- a/src/popup.tsx +++ b/src/popup.tsx @@ -1,19 +1,18 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Theme, withStyles, MuiThemeProvider } 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'; import IconButton from '@material-ui/core/IconButton'; import RefreshIcon from '@material-ui/icons/Refresh'; +import Divider from '@material-ui/core/Divider'; + import Logo from './Logo'; -import Typography from '@material-ui/core/Typography'; import { theme } from './theme'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import { PatternEntry } from './pattern'; -import { Duration } from './duration'; -import { MsgType, MsgClient } from './msg'; import { StyledPatternPieChart } from './Chart'; +import { MsgType, MsgClient } from './msg'; import { GraphData } from './graph'; -import Divider from '@material-ui/core/Divider'; import moment from 'moment'; function openOptions() { @@ -35,19 +34,21 @@ const styles = (theme: Theme) => ({ }, }); -class Popup extends React.Component<{ - classes: { - content: string, - buttons: string, - buttonSpacer: string - } - }> { +type PopupProps = { + classes: { + content: string, + buttons: string, + buttonSpacer: string + } +}; + +class Popup extends React.Component { msgClient: MsgClient; state = { patternGraphData: [] as GraphData[], loading: false, }; - constructor(props: any) { + constructor(props: PopupProps) { super(props); this.msgClient = new MsgClient('main'); this.state.loading = true; diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 0000000..0269fd3 --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,18 @@ +import { createMuiTheme } from '@material-ui/core/styles'; +import orange from '@material-ui/core/colors/orange'; +import deepOrange from '@material-ui/core/colors/deepOrange'; + +export const defaultChartColor = deepOrange[300]; +export const theme = createMuiTheme({ + palette: { + primary: { + light: orange[300], + main: orange[500], + dark: orange[700], + contrastText: "#fff" + } + }, + typography: { + useNextVariants: true, + } +}); diff --git a/src/theme.tsx b/src/theme.tsx deleted file mode 100644 index 0269fd3..0000000 --- a/src/theme.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles'; -import orange from '@material-ui/core/colors/orange'; -import deepOrange from '@material-ui/core/colors/deepOrange'; - -export const defaultChartColor = deepOrange[300]; -export const theme = createMuiTheme({ - palette: { - primary: { - light: orange[300], - main: orange[500], - dark: orange[700], - contrastText: "#fff" - } - }, - typography: { - useNextVariants: true, - } -}); -- cgit v1.2.3-70-g09d2