diff --git a/packages/app/src/components/WidgetItemPreview/index.jsx b/packages/app/src/components/WidgetItemPreview/index.jsx index 5b887ecc..a3d2c849 100644 --- a/packages/app/src/components/WidgetItemPreview/index.jsx +++ b/packages/app/src/components/WidgetItemPreview/index.jsx @@ -5,13 +5,13 @@ import { Icons } from "components/Icons" import "./index.less" -export default (props) => { +export default React.memo((props) => { const { manifest } = props - const isInstalled = app.cores.widgets.isInstalled(manifest._id) - const isVisible = app.cores.widgets.isVisible(manifest._id) + const [installed, setInstalled] = React.useState(app.cores.widgets.isInstalled(manifest._id)) + const [visible, setVisible] = React.useState(app.cores.widgets.isVisible(manifest._id)) - const removeItem = () => { + const handleItemRemove = () => { antd.Modal.confirm({ title: "Are you sure?", content: "Do you want to remove this widget?", @@ -19,11 +19,43 @@ export default (props) => { okType: "danger", cancelText: "No", onOk: () => { - props.onRemove() + onRemove() } }) } + const onRemove = async () => { + if (typeof props.onRemove !== "function") { + console.error("onRemove is not a function") + return false + } + + await props.onRemove() + + setInstalled(false) + } + + const onUpdate = async () => { + if (typeof props.onUpdate !== "function") { + console.error("onUpdate is not a function") + return false + } + + props.onUpdate() + } + + const onInstall = async () => { + if (typeof props.onInstall !== "function") { + console.error("onInstall is not a function") + return false + } + + await props.onInstall() + + setVisible(true) + setInstalled(true) + } + if (!manifest) { return
{ return
{ - manifest.iconUrl &&
- + manifest.icon &&
+
} @@ -61,32 +93,31 @@ export default (props) => {
{ - isInstalled && } unCheckedChildren={} - defaultChecked={isVisible} onChange={(checked) => { props.onChangeVisible(checked) + setVisible(checked) }} + checked={visible} /> } : } - onClick={isInstalled ? props.onUpdate : props.onInstall} - type={isInstalled ? "default" : "primary"} + icon={installed ? : } + onClick={installed ? onUpdate : onInstall} + type={installed ? "default" : "primary"} /> { - isInstalled && } - onClick={() => { - removeItem() - }} + onClick={handleItemRemove} danger /> }
-} \ No newline at end of file +}) \ No newline at end of file