` and use `state.drag` and `state.filename` to determine its contents and style.
+Finally, bind the `ref` of the created `
` to `dropRef`.
+
+
+```css
+.filedrop {
+ min-height: 120px;
+ border: 3px solid #D3D3D3;
+ text-align: center;
+ font-size: 24px;
+ padding: 32px;
+ border-radius: 4px;
+}
+
+.filedrop.drag {
+ border: 3px dashed #1E90FF;
+}
+
+.filedrop.ready {
+ border: 3px solid #32CD32;
+}
+```
+
+```jsx
+class FileDrop extends React.Component {
+ constructor(props) {
+ super(props);
+ this.dropRef = React.createRef();
+ this.state = {
+ drag: false,
+ filename: ''
+ }
+ this.handleDrag = this.handleDrag.bind(this);
+ this.handleDragIn = this.handleDragIn.bind(this);
+ this.handleDragOut = this.handleDragOut.bind(this);
+ this.handleDrop = this.handleDrop.bind(this);
+ }
+
+ handleDrag(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ handleDragIn(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.dragCounter++;
+ if (e.dataTransfer.items && e.dataTransfer.items.length > 0)
+ this.setState({ drag: true });
+ }
+
+ handleDragOut(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.dragCounter--;
+ if (this.dragCounter === 0)
+ this.setState({ drag: false });
+ }
+
+ handleDrop(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.setState({ drag: false });
+ if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+ this.props.handleDrop(e.dataTransfer.files[0]);
+ this.setState({ filename : e.dataTransfer.files[0].name});
+ e.dataTransfer.clearData();
+ this.dragCounter = 0;
+ }
+ }
+
+ componentDidMount() {
+ let div = this.dropRef.current;
+ div.addEventListener('dragenter', this.handleDragIn);
+ div.addEventListener('dragleave', this.handleDragOut);
+ div.addEventListener('dragover', this.handleDrag);
+ div.addEventListener('drop', this.handleDrop);
+ }
+
+ componentWillUnmount() {
+ let div = this.dropRef.current;
+ div.removeEventListener('dragenter', this.handleDragIn);
+ div.removeEventListener('dragleave', this.handleDragOut);
+ div.removeEventListener('dragover', this.handleDrag);
+ div.removeEventListener('drop', this.handleDrop);
+ }
+
+ render() {
+ return (
+
+ {this.state.filename && !this.state.drag ?
+
{this.state.filename}
+ :
Drop files here!
+ }
+
+ )
+ }
+}
+```
+
+
+Examples
+
+```jsx
+ReactDOM.render(, document.getElementById('root'));
+```
+
+
+
[⬆ Back to top](#table-of-contents)
+
### Mailto
Renders a link formatted to send an email.
diff --git a/data/snippet_data.json b/data/snippet_data.json
index 111bb6414..ff439afa7 100644
--- a/data/snippet_data.json
+++ b/data/snippet_data.json
@@ -79,6 +79,24 @@
],
"notes": []
},
+ {
+ "name": "FileDrop.md",
+ "title": "FileDrop",
+ "text": "Renders a file drag and drop component for a single file.\n\nCreate a ref called `dropRef` for this component.\nInitialize `state.drag` and `state.filename` to `false` and `''` respectively.\nThe variables `dragCounter` and `state.drag` are used to determine if a file is being dragged, while `state.filename` is used to store the dropped file's name.\nCreate the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.\nEach of the methods will handle a specific event, the listeners for which are created and removed in `componentDidMount` and `componentWillUnmount` respectively.\n`handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `this.props.handleDrop`.\nIn the `render()` method, create an appropriately styled `
` and use `state.drag` and `state.filename` to determine its contents and style. \nFinally, bind the `ref` of the created `
` to `dropRef`.\n\n\n",
+ "codeBlocks": [
+ "```css\n.filedrop {\n min-height: 120px;\n border: 3px solid #D3D3D3;\n text-align: center;\n font-size: 24px;\n padding: 32px;\n border-radius: 4px;\n}\n\n.filedrop.drag {\n border: 3px dashed #1E90FF;\n}\n\n.filedrop.ready {\n border: 3px solid #32CD32;\n}\n```",
+ "```jsx\nclass FileDrop extends React.Component {\n constructor(props) {\n super(props);\n this.dropRef = React.createRef();\n this.state = {\n drag: false,\n filename: ''\n }\n this.handleDrag = this.handleDrag.bind(this);\n this.handleDragIn = this.handleDragIn.bind(this);\n this.handleDragOut = this.handleDragOut.bind(this);\n this.handleDrop = this.handleDrop.bind(this);\n }\n\n handleDrag(e) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n handleDragIn(e) {\n e.preventDefault();\n e.stopPropagation();\n this.dragCounter++;\n if (e.dataTransfer.items && e.dataTransfer.items.length > 0) \n this.setState({ drag: true });\n }\n\n handleDragOut(e) {\n e.preventDefault();\n e.stopPropagation();\n this.dragCounter--;\n if (this.dragCounter === 0) \n this.setState({ drag: false });\n }\n\n handleDrop(e) {\n e.preventDefault();\n e.stopPropagation();\n this.setState({ drag: false });\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n this.props.handleDrop(e.dataTransfer.files[0]);\n this.setState({ filename : e.dataTransfer.files[0].name});\n e.dataTransfer.clearData();\n this.dragCounter = 0;\n }\n }\n\n componentDidMount() {\n let div = this.dropRef.current;\n div.addEventListener('dragenter', this.handleDragIn);\n div.addEventListener('dragleave', this.handleDragOut);\n div.addEventListener('dragover', this.handleDrag);\n div.addEventListener('drop', this.handleDrop);\n }\n\n componentWillUnmount() {\n let div = this.dropRef.current;\n div.removeEventListener('dragenter', this.handleDragIn);\n div.removeEventListener('dragleave', this.handleDragOut);\n div.removeEventListener('dragover', this.handleDrag);\n div.removeEventListener('drop', this.handleDrop);\n }\n\n render() {\n return (\n
\n {this.state.filename && !this.state.drag ? \n
{this.state.filename}
\n :
Drop files here!
\n }\n
\n )\n }\n}\n```",
+ "```jsx\nReactDOM.render(
, document.getElementById('root'));\n```"
+ ],
+ "expertise": 2,
+ "tags": [
+ "visual",
+ "input",
+ "state",
+ "class"
+ ],
+ "notes": []
+ },
{
"name": "Input.md",
"title": "Input",
@@ -298,5 +316,24 @@
"class"
],
"notes": []
+ },
+ {
+ "name": "TreeView.md",
+ "title": "TreeView",
+ "text": "Renders a tree view of a JSON object or array with collapsible content.\n\nUse `defaultProps` to set the default values of certain props.\nUse the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\nSet the `state` of the component to the value of the `toggled` prop and bind the `toggle` method to the component's context.\nCreate a method, `toggle`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.\nIn the `render()` method, use a `` to wrap the contents of the component and the `
` element, used to alter the component's `state`.\nDetermine the appearance of the component, based on `this.props.isParentToggled`, `this.state.toggled`, `this.props.name` and `Array.isArray()` on `this.props.data`. \nFor each child in `this.props.data`, determine if it is an object or array and recursively render a sub-tree.\nOtherwise, render a `` element with the appropriate style.\n\n",
+ "codeBlocks": [
+ "```css\n.tree-element {\n margin: 0;\n position: relative;\n}\n\ndiv.tree-element:before {\n content: '';\n position: absolute;\n top: 24px;\n left: 1px;\n height: calc(100% - 48px);\n border-left: 1px solid gray;\n}\n\n.toggler {\n position: absolute;\n top: 10px;\n left: 0px;\n width: 0; \n height: 0; \n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 5px solid gray;\n cursor: pointer;\n}\n\n.toggler.closed {\n transform: rotate(90deg);\n}\n\n.collapsed {\n display: none;\n}\n```",
+ "```jsx\nclass TreeView extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toggled: props.toggled\n }\n this.toggle = this.toggle.bind(this);\n }\n\n toggle() {\n this.setState(state => ({ toggled: !state.toggled }));\n }\n\n render() {\n return (\n
\n
\n {this.props.name ?
{this.props.name}: :
}\n {Array.isArray(this.props.data) ? '[' : '{'}\n {!this.state.toggled && '...'}\n {Object.keys(this.props.data).map(\n (v, i, a) =>\n typeof this.props.data[v] == \"object\" ? (\n
\n ) : (\n
\n {Array.isArray(this.props.data) ? '' : {v}: }\n {this.props.data[v]}{i === a.length - 1 ? '' : ','}\n
\n )\n )}\n {Array.isArray(this.props.data) ? ']' : '}'}\n {!this.props.isLast ? ',' : ''}\n