Skip to content

Instantly share code, notes, and snippets.

@hardvain
Last active August 10, 2020 11:58
Show Gist options
  • Save hardvain/68b421d834470345ddfa2db6c6d5fa12 to your computer and use it in GitHub Desktop.
Save hardvain/68b421d834470345ddfa2db6c6d5fa12 to your computer and use it in GitHub Desktop.
import React, { useState, useEffect } from "react";
import { Checkbox, Input, Row, Col, Slider } from "antd";
import ReactDOM from "react-dom";
import { v4 as uuidv4 } from "uuid";
const Component = ({ checked, text = "", id }) => {
const [value, setValue] = useState(false);
const [num, setNum] = useState(0);
useEffect(() => {
setValue(checked);
}, [checked]);
const [inputValue, setInputValue] = useState("");
useEffect(() => {
setInputValue(text);
}, [text]);
return (
<div>
<div id={id} data-checked={value} data-text={inputValue} data-num={num} />
<Row>
<Col span={2}>
<Checkbox
checked={value}
onChange={setValue}
onClick={(e) => {
console.log(e);
e.stopPropogation();
e.preventDefault();
}}
/>
</Col>
<Col span={22}>
<Input
bordered={false}
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</Col>
</Row>
</div>
);
};
export default class Checklist {
constructor({ data }) {
this.data = data;
this.wrapper = null;
this.id = uuidv4();
}
static get toolbox() {
return {
title: "Checklist",
icon:
'<svg height="15" viewBox="0 0 512 512" width="15" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm0 0" fill="#2196f3"/><path d="m385.75 201.75-138.667969 138.664062c-4.160156 4.160157-9.621093 6.253907-15.082031 6.253907s-10.921875-2.09375-15.082031-6.253907l-69.332031-69.332031c-8.34375-8.339843-8.34375-21.824219 0-30.164062 8.339843-8.34375 21.820312-8.34375 30.164062 0l54.25 54.25 123.585938-123.582031c8.339843-8.34375 21.820312-8.34375 30.164062 0 8.339844 8.339843 8.339844 21.820312 0 30.164062zm0 0" fill="#fafafa"/></svg>',
};
}
rendered() {
ReactDOM.render(
<Component
checked={this.data.checked}
text={this.data.text}
id={this.id}
/>,
this.wrapper
);
}
updated() {
ReactDOM.render(
<Component
checked={this.data.checked}
text={this.data.text}
id={this.id}
/>,
this.wrapper
);
}
render() {
this.wrapper = document.createElement("div");
return this.wrapper;
}
save(blockContent) {
const element = document.getElementById(this.id);
const checked = element.getAttribute("data-checked");
const text = element.getAttribute("data-text");
return { checked: checked === "true", text};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment