14 changed files with 310 additions and 254 deletions
@ -0,0 +1,10 @@ |
|||
.container { |
|||
padding: 20px; |
|||
.title { |
|||
font-size: 25px; |
|||
font-weight: bolder; |
|||
} |
|||
.opeation { |
|||
margin: 20px 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,152 @@ |
|||
import electron from "@/plugins/electron" |
|||
import { addTodo, removeTodo } from "@/store/action/todo" |
|||
import { Button, ButtonGroup, ControlGroup, FormGroup, HotkeysProvider, InputGroup } from "@blueprintjs/core" |
|||
import { Cell, Column, Table2 } from "@blueprintjs/table" |
|||
import cs from "classnames" |
|||
import _ from "lodash" |
|||
import React, { useEffect, useRef, useState } from "react" |
|||
import { connect } from "react-redux" |
|||
import Dialog from "./Dialog" |
|||
import style from "./index.module.scss" |
|||
import useLocation from "./useLocation" |
|||
|
|||
export interface HomeProps { |
|||
add(text: string): void |
|||
|
|||
todo: ITodo[] |
|||
|
|||
remove(id: number): void |
|||
} |
|||
|
|||
let keyGen = 0 |
|||
|
|||
function Home(props: HomeProps) { |
|||
const [isOpen, setIsOpen] = useState<boolean>(false) |
|||
const keyRef = useRef<HTMLInputElement>(null) |
|||
|
|||
function delItem() { |
|||
let key = keyRef.current?.value |
|||
if (key) { |
|||
let index = _.findIndex(clockList, { key: +key }) |
|||
if (index != -1) { |
|||
var list = [...clockList] |
|||
list.splice(index, 1) |
|||
setClockList(list) |
|||
keyRef.current!.value = "" |
|||
} |
|||
} |
|||
} |
|||
|
|||
const { save, get } = useLocation() |
|||
const [clockList, setClockList] = useState<Record<string, any>[]>([]) |
|||
const keyList = _.map(clockList, "key") |
|||
const titleList = _.map(clockList, "title") |
|||
const timeList = _.map(clockList, "time") |
|||
const descList = _.map(clockList, "desc") |
|||
|
|||
function onConfrim(title: string, time: string, desc: string) { |
|||
if (title && time) { |
|||
const value = { |
|||
key: ++keyGen, |
|||
title: title, |
|||
time: time, |
|||
desc: desc, |
|||
} |
|||
setClockList([...clockList, value]) |
|||
setIsOpen(false) |
|||
} |
|||
} |
|||
|
|||
useEffect(() => { |
|||
;(async () => { |
|||
let list = await electron.ipcRenderer.invoke("@func:clock:getData") |
|||
if (list) { |
|||
setClockList(list) |
|||
const keyList = _.map(list, "key") |
|||
if (keyList.length) { |
|||
keyGen = Math.max(...keyList) |
|||
} |
|||
} |
|||
})() |
|||
}, []) |
|||
useEffect(() => { |
|||
electron.ipcRenderer.send("@func:clock:saveData", clockList) |
|||
}, [clockList]) |
|||
|
|||
return ( |
|||
<div className={cs(style.container, "container")}> |
|||
<div className={style.title}>闹钟列表</div> |
|||
<div className={style.opeation}> |
|||
<ButtonGroup> |
|||
<Button |
|||
icon="insert" |
|||
onClick={() => { |
|||
setIsOpen(true) |
|||
}} |
|||
> |
|||
添加闹钟 |
|||
</Button> |
|||
<Button icon="refresh">同步闹钟</Button> |
|||
</ButtonGroup> |
|||
</div> |
|||
<table> |
|||
<thead> |
|||
<tr> |
|||
<th>Month</th> |
|||
<th>Savings</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tfoot> |
|||
<tr> |
|||
<td>Sum</td> |
|||
<td>$180</td> |
|||
</tr> |
|||
</tfoot> |
|||
|
|||
<tbody> |
|||
<tr> |
|||
<td>January</td> |
|||
<td>$100</td> |
|||
</tr> |
|||
<tr> |
|||
<td>February</td> |
|||
<td>$80</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
{/* <HotkeysProvider> |
|||
<Table2 numRows={titleList.length}> |
|||
<Column name="KEY" cellRenderer={index => <Cell>{keyList[index]}</Cell>}></Column> |
|||
<Column name="标题" cellRenderer={index => <Cell>{titleList[index]}</Cell>}></Column> |
|||
<Column name="时间" cellRenderer={index => <Cell>{timeList[index]}</Cell>}></Column> |
|||
<Column name="描述" cellRenderer={index => <Cell>{descList[index]}</Cell>}></Column> |
|||
</Table2> |
|||
</HotkeysProvider> */} |
|||
<div style={{ margin: "10px 0" }}> |
|||
<FormGroup helperText="需要填入指定的闹钟进行删除" label="Key" labelFor="text-input" labelInfo="(required)"> |
|||
<ControlGroup fill={false} vertical={false}> |
|||
<InputGroup inputRef={keyRef} id="text-input" placeholder="请输入Key值进行删除" /> |
|||
<Button onClick={() => delItem()} icon="trash" intent="danger" type="submit"> |
|||
删除 |
|||
</Button> |
|||
</ControlGroup> |
|||
</FormGroup> |
|||
</div> |
|||
<Dialog isOpen={isOpen} setIsOpen={setIsOpen} onConfrim={onConfrim}></Dialog> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
const mapStateToProps = (state: any) => { |
|||
return { |
|||
todo: state.todo, |
|||
} |
|||
} |
|||
|
|||
const mapDispatchToProps = (dispatch: any) => ({ |
|||
add: (text: string) => dispatch(addTodo(text)), |
|||
remove: (id: string | number) => dispatch(removeTodo(id)), |
|||
}) |
|||
|
|||
export default connect(mapStateToProps, mapDispatchToProps)(Home) |
|||
@ -1,127 +1,15 @@ |
|||
import electron from "@/plugins/electron" |
|||
import { addTodo, removeTodo } from "@/store/action/todo" |
|||
import { Button, ButtonGroup, ControlGroup, FormGroup, HotkeysProvider, InputGroup } from "@blueprintjs/core" |
|||
import { Cell, Column, Table2 } from "@blueprintjs/table" |
|||
import cs from "classnames" |
|||
import _ from "lodash" |
|||
import React, { useEffect, useRef, useState } from "react" |
|||
import { connect } from "react-redux" |
|||
import Dialog from "./Dialog" |
|||
import React from "react" |
|||
import style from "./index.module.scss" |
|||
import useLocation from "./useLocation" |
|||
|
|||
export interface HomeProps { |
|||
add(text: string): void |
|||
|
|||
todo: ITodo[] |
|||
|
|||
remove(id: number): void |
|||
} |
|||
|
|||
let keyGen = 0 |
|||
|
|||
function Home(props: HomeProps) { |
|||
const [isOpen, setIsOpen] = useState<boolean>(false) |
|||
const keyRef = useRef<HTMLInputElement>(null) |
|||
|
|||
function delItem() { |
|||
let key = keyRef.current?.value |
|||
if (key) { |
|||
let index = _.findIndex(clockList, { key: +key }) |
|||
if (index != -1) { |
|||
var list = [...clockList] |
|||
list.splice(index, 1) |
|||
setClockList(list) |
|||
keyRef.current!.value = "" |
|||
} |
|||
} |
|||
} |
|||
|
|||
const { save, get } = useLocation() |
|||
const [clockList, setClockList] = useState<Record<string, any>[]>([]) |
|||
const keyList = _.map(clockList, "key") |
|||
const titleList = _.map(clockList, "title") |
|||
const timeList = _.map(clockList, "time") |
|||
const descList = _.map(clockList, "desc") |
|||
|
|||
function onConfrim(title: string, time: string, desc: string) { |
|||
if (title && time) { |
|||
const value = { |
|||
key: ++keyGen, |
|||
title: title, |
|||
time: time, |
|||
desc: desc |
|||
} |
|||
setClockList([...clockList, value]) |
|||
setIsOpen(false) |
|||
|
|||
} |
|||
} |
|||
|
|||
useEffect(() => { |
|||
(async ()=>{ |
|||
let list = await electron.ipcRenderer.invoke("@func:clock:getData") |
|||
if(list){ |
|||
setClockList(list) |
|||
const keyList = _.map(list, "key") |
|||
if (keyList.length) { |
|||
keyGen = Math.max(...keyList) |
|||
} |
|||
} |
|||
})() |
|||
}, []) |
|||
useEffect(() => { |
|||
electron.ipcRenderer.send("@func:clock:saveData", clockList) |
|||
}, [clockList]) |
|||
|
|||
function Home() { |
|||
return ( |
|||
<div className={cs(style.container, "container")}> |
|||
<div className={style.title}>闹钟列表</div> |
|||
<div className={style.opeation}> |
|||
<ButtonGroup> |
|||
<Button |
|||
icon="insert" |
|||
onClick={() => { |
|||
setIsOpen(true) |
|||
}} |
|||
> |
|||
添加闹钟 |
|||
</Button> |
|||
<Button icon="refresh">同步闹钟</Button> |
|||
</ButtonGroup> |
|||
</div> |
|||
<HotkeysProvider> |
|||
<Table2 numRows={titleList.length}> |
|||
<Column name="KEY" cellRenderer={index => <Cell>{keyList[index]}</Cell>}></Column> |
|||
<Column name="标题" cellRenderer={index => <Cell>{titleList[index]}</Cell>}></Column> |
|||
<Column name="时间" cellRenderer={index => <Cell>{timeList[index]}</Cell>}></Column> |
|||
<Column name="描述" cellRenderer={index => <Cell>{descList[index]}</Cell>}></Column> |
|||
</Table2> |
|||
</HotkeysProvider> |
|||
<div style={{ margin: "10px 0" }}> |
|||
<FormGroup helperText="需要填入指定的闹钟进行删除" label="Key" labelFor="text-input" labelInfo="(required)"> |
|||
<ControlGroup fill={false} vertical={false}> |
|||
<InputGroup inputRef={keyRef} id="text-input" placeholder="请输入Key值进行删除"/> |
|||
<Button onClick={() => delItem()} icon="trash" intent="danger" type="submit"> |
|||
删除 |
|||
</Button> |
|||
</ControlGroup> |
|||
</FormGroup> |
|||
</div> |
|||
<Dialog isOpen={isOpen} setIsOpen={setIsOpen} onConfrim={onConfrim}></Dialog> |
|||
add |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
const mapStateToProps = (state: any) => { |
|||
return { |
|||
todo: state.todo |
|||
} |
|||
} |
|||
|
|||
const mapDispatchToProps = (dispatch: any) => ({ |
|||
add: (text: string) => dispatch(addTodo(text)), |
|||
remove: (id: string | number) => dispatch(removeTodo(id)) |
|||
}) |
|||
|
|||
export default connect(mapStateToProps, mapDispatchToProps)(Home) |
|||
export default Home |
|||
Loading…
Reference in new issue