property array functionally complete

Author: justenPalmer

src/config/layer.json

@@ -115,11 +115,5 @@
 				}
 			}
 		}
-	},
-
-	"default":{
-		"layout":{
-			"visibility":"visible"
-		}
 	}
 }

src/view/Vfield/VfieldArray.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import Valert from '../Valert';
 import VfieldAC from './VfieldAC';
-import VfieldArray from './VfieldArray';
 import VfieldColor from './VfieldColor';
 import VfieldFile from './VfieldFile';
 import VfieldJSON from './VfieldJSON';
@@ -35,8 +34,6 @@ export default class Vfield extends React.Component {
 		switch (field.type){
 			case 'AC':
 				return <VfieldAC type={field.type} field={field} handle={handle}/>;
-			case 'array':
-				return <VfieldArray type={field.type} field={field} handle={handle}/>;
 			case 'color':
 				return <VfieldColor type={field.type} field={field} handle={handle}/>;
 			case 'file':

src/view/Vfield/index.jsx

@@ -47,6 +47,14 @@ export default class VlayerEditor extends React.Component {
 				Mlayer.setIn(layer.get('id'),key,field.value);
 			},
 
+			remove:(field)=>{
+				let key = field.name.split('.');
+				key.forEach((k,i)=>{
+					if (/^\d+$/.test(k)) key[i] = Number(k);
+				});
+				Mlayer.removeIn(layer.get('id'),key);
+			},
+
 
 			enter:(field)=>{
 				console.log('enter:',field);

src/view/Vlayer/VlayerEditor.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {List} from 'immutable';
+
+import Vfield from '../../Vfield';
+import Valert from '../../Valert';
+import VpropertyInfo from '../VpropertyInfo';
+
+import styleSpec from '../../../vendor/style-spec/style-spec';
+
+export default class VpropertyArrayAdd extends React.Component {
+
+	static propTypes = {
+		name: PropTypes.string.isRequired, // string of position . separated
+		type: PropTypes.string.isRequired,
+		//value: PropTypes.object,
+		error: PropTypes.oneOfType([
+			PropTypes.string,
+			PropTypes.object
+		]),
+		focus: PropTypes.string,
+		handle: PropTypes.object
+	}
+
+	constructor(props) {
+		super(props);
+		const {handle, func} = this.props;
+
+		this.state = {
+			open:true,
+			value:null
+		};
+
+		this.handle = {
+			change:(field)=>{
+				this.setState({value:field.value});
+			},
+			show:()=>{
+				this.setState({show:true});
+			},
+			hide:()=>{
+				this.setState({show:false});
+			}
+		};
+
+		for (let i in this.handle){
+			this.handle[i] = this.handle[i].bind(this);
+		}
+
+	}
+
+	render (){
+		const {name, error, focus, type} = this.props;
+
+		const autoFocus = (name === focus)? true: false;
+
+		//console.log('spec:',spec, 'value:',value);
+
+		if (!this.state.show){
+			return <div onClick={this.handle.show} className="btn btn-xs btn-light">
+				<i className="material-icons md-14">add</i>
+			</div>
+		}
+
+		//const autoFocus = true;
+		return <div className="position-relative add-input-pr">
+			<Vfield field={{
+				type:type,
+				name:name,
+				value:this.state.value,
+				controlled:false,
+				autoFocus:autoFocus
+			}} handle={this.handle}/>
+
+			<div className="position-absolute add-close-pos">
+				<button onClick={this.handle.hide} className="btn btn-light btn-sm" type="button">
+					<i className="material-icons md-14">close</i>
+				</button>
+			</div>
+		</div>
+	}
+};

src/view/Vproperty/VpropertyArray/VpropertyArrayAdd.jsx

@@ -40,64 +40,18 @@ export default class VpropertyArrayRow extends React.Component {
 				this.setState({open:true});
 			},
 			remove:()=>{
-				const pos = func.name.split('.');
-				handle.layerRemoveIn(pos);
+				handle.remove({name:func.name});
 			}
 		};
 
 		for (let i in this.handle){
 			this.handle[i] = this.handle[i].bind(this);
 		}
 
-		this.fieldHandle = {
-			change:handle.change,
-			focus:handle.focus,
-
-			/*
-
-			focusNext:(pos)=>{
-				let nextPos = getNextPos(pos);
-				if (!handle.layerHasIn(nextPos)) return;
-				this.handle.focus(nextPos);
-			},
-			focusPrev:(pos)=>{
-				let prevPos = getPrevPos(pos);
-				if (!handle.layerHasIn(prevPos)) return;
-				this.handle.focus(prevPos);
-			},
-
-			enter:(f)=>{
-				const pos = nameToPos(f.name);
-				const nextPos = getNextPos(pos);
-
-				console.log('enter:',nextPos, handle.layerHasIn(nextPos));
-
-				if (!handle.layerHasIn(nextPos)){
-					handle.change({
-						name:posToName(nextPos),
-						value:''
-					});
-				}
-				handle.focus(posToName(nextPos));
-			},
-			backout:(f)=>{
-				const pos = nameToPos(f.name);
-				const prevPos = getPrevPos(pos);
-
-				handle.layerRemoveIn(pos);
-				handle.focus(posToName(prevPos));
-			}
-			*/
-		};
-
-		for (let i in this.fieldHandle){
-			this.fieldHandle[i] = this.fieldHandle[i].bind(this);
-		}
-
 	}
 
 	render (){
-		const {row, error, focus} = this.props;
+		const {row, error, focus, handle} = this.props;
 
 		const autoFocus = (row.name === focus)? true: false;
 
@@ -110,7 +64,7 @@ export default class VpropertyArrayRow extends React.Component {
 				value:row.value,
 				controlled:false,
 				autoFocus:autoFocus
-			}} handle={this.fieldHandle}/>
+			}} handle={handle}/>
 		</div>
 	}
 };