Skip to content

Commit a654ba0

Browse files
justenPalmerjustenPalmer
committed
property array support (incomplete)
1 parent 692957f commit a654ba0

File tree

4 files changed

+292
-12
lines changed

4 files changed

+292
-12
lines changed

Diff for: ‎src/view/Vfield/VfieldArray.jsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,18 @@ export default class VfieldArray extends React.Component {
6060

6161
return <div className="form-group mb-0">
6262
{field.label && <label className="mb-0">{field.label}</label>}
63-
<input type="text" className={'form-control '+field.inputClass} name={field.name}
64-
placeholder={field.placeholder} value={value}
65-
autoComplete={field.inputNoAC ? 'off' : 'on'}
66-
ref={input => input && field.autoFocus && input.focus()}
67-
onChange={this.handle.change}
68-
onFocus={this.handle.focus}
69-
onBlur={this.handle.blur}/>
63+
{value.map((val,ind)=>{
64+
const name = field.name+'.'+ind;
65+
console.log('name:',name);
66+
return <input key={ind} type="text" className={'form-control '+field.inputClass} name={name}
67+
placeholder={field.placeholder} value={val}
68+
autoComplete={field.inputNoAC ? 'off' : 'on'}
69+
ref={input => input && field.autoFocus && input.focus()}
70+
onChange={this.handle.change}
71+
onFocus={this.handle.focus}
72+
onBlur={this.handle.blur}/>
73+
})}
74+
7075
<small className="form-text text-muted">{field.helper}</small>
7176
</div>
7277
}

Diff for: ‎src/view/Vproperty/VpropertyArray/VpropertyArrayRow.jsx

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {List} from 'immutable';
4+
5+
import Vfield from '../../Vfield';
6+
import Valert from '../../Valert';
7+
import VpropertyInfo from '../VpropertyInfo';
8+
9+
import styleSpec from '../../../vendor/style-spec/style-spec';
10+
11+
export default class VpropertyArrayRow extends React.Component {
12+
13+
static propTypes = {
14+
row: PropTypes.shape({
15+
type: PropTypes.string.isRequired,
16+
name: PropTypes.string.isRequired, // string of position . separated
17+
//value: PropTypes.object,
18+
error: PropTypes.oneOfType([
19+
PropTypes.string,
20+
PropTypes.object
21+
])
22+
}),
23+
focus: PropTypes.string,
24+
handle: PropTypes.object
25+
}
26+
27+
constructor(props) {
28+
super(props);
29+
const {handle, func} = this.props;
30+
31+
this.state = {
32+
open:true
33+
};
34+
35+
this.handle = {
36+
toggleOpen:()=>{
37+
if (this.state.open){
38+
return this.setState({open:false});
39+
}
40+
this.setState({open:true});
41+
},
42+
remove:()=>{
43+
const pos = func.name.split('.');
44+
handle.layerRemoveIn(pos);
45+
}
46+
};
47+
48+
for (let i in this.handle){
49+
this.handle[i] = this.handle[i].bind(this);
50+
}
51+
52+
this.fieldHandle = {
53+
change:handle.change,
54+
focus:handle.focus,
55+
56+
/*
57+
58+
focusNext:(pos)=>{
59+
let nextPos = getNextPos(pos);
60+
if (!handle.layerHasIn(nextPos)) return;
61+
this.handle.focus(nextPos);
62+
},
63+
focusPrev:(pos)=>{
64+
let prevPos = getPrevPos(pos);
65+
if (!handle.layerHasIn(prevPos)) return;
66+
this.handle.focus(prevPos);
67+
},
68+
69+
enter:(f)=>{
70+
const pos = nameToPos(f.name);
71+
const nextPos = getNextPos(pos);
72+
73+
console.log('enter:',nextPos, handle.layerHasIn(nextPos));
74+
75+
if (!handle.layerHasIn(nextPos)){
76+
handle.change({
77+
name:posToName(nextPos),
78+
value:''
79+
});
80+
}
81+
handle.focus(posToName(nextPos));
82+
},
83+
backout:(f)=>{
84+
const pos = nameToPos(f.name);
85+
const prevPos = getPrevPos(pos);
86+
87+
handle.layerRemoveIn(pos);
88+
handle.focus(posToName(prevPos));
89+
}
90+
*/
91+
};
92+
93+
for (let i in this.fieldHandle){
94+
this.fieldHandle[i] = this.fieldHandle[i].bind(this);
95+
}
96+
97+
}
98+
99+
render (){
100+
const {row, error, focus} = this.props;
101+
102+
const autoFocus = (row.name === focus)? true: false;
103+
104+
//console.log('spec:',spec, 'value:',value);
105+
106+
return <div className="form-group mb-0 position-relative">
107+
<Vfield key={row.name} field={{
108+
type:row.type,
109+
name:row.name,
110+
value:row.value,
111+
controlled:false,
112+
autoFocus:autoFocus
113+
}} handle={this.fieldHandle}/>
114+
</div>
115+
}
116+
};

Diff for: ‎src/view/Vproperty/VpropertyArray/index.jsx

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {List} from 'immutable';
4+
5+
import Vfield from '../../Vfield';
6+
7+
import VpropertyInfo from '../VpropertyInfo';
8+
import VpropertyArrayRow from './VpropertyArrayRow';
9+
import VpropertyAdd from '../VpropertyAdd';
10+
11+
import styleSpec from '../../../vendor/style-spec/style-spec';
12+
13+
export default class VpropertyArray extends React.Component {
14+
15+
static propTypes = {
16+
property: PropTypes.shape({
17+
type: PropTypes.string.isRequired,
18+
name: PropTypes.string.isRequired, // string of position . separated
19+
value: PropTypes.object,
20+
placeholder: PropTypes.string,
21+
error: PropTypes.oneOfType([
22+
PropTypes.string,
23+
PropTypes.object
24+
]),
25+
specType: PropTypes.string
26+
}),
27+
focus: PropTypes.string,
28+
handle: PropTypes.object
29+
}
30+
31+
constructor(props) {
32+
super(props);
33+
const {handle, property} = this.props;
34+
35+
this.state = {
36+
addOpen:false
37+
};
38+
39+
this.handle = {
40+
addOpen:()=>{
41+
console.log('add open:',this.state.addOpen);
42+
if (this.state.addOpen){
43+
return this.setState({addOpen:false});
44+
}
45+
handle.focus(property.name);
46+
this.setState({addOpen:true});
47+
}
48+
};
49+
50+
for (let i in this.handle){
51+
this.handle[i] = this.handle[i].bind(this);
52+
}
53+
54+
this.handleAdd = {
55+
change:(f)=>{
56+
handle.change({
57+
name:f.name,
58+
value:f.value
59+
});
60+
},
61+
backout:(f)=>{
62+
handle.change({
63+
name:property.name,
64+
value:''
65+
});
66+
},
67+
focus:()=>{
68+
console.log('focus Add:');
69+
handle.focus(property.name);
70+
}
71+
};
72+
73+
for (let i in this.handleAdd){
74+
this.handleAdd[i] = this.handleAdd[i].bind(this);
75+
}
76+
77+
this.funcHandle = {
78+
change:handle.change,
79+
focus:(f)=>{
80+
console.log('focus:',f);
81+
handle.focus(f);
82+
},
83+
...handle
84+
};
85+
86+
for (let i in this.funcHandle){
87+
this.funcHandle[i] = this.funcHandle[i].bind(this);
88+
}
89+
90+
}
91+
92+
render (){
93+
const {property, focus} = this.props;
94+
const value = property.value;
95+
96+
console.log('value:',value);
97+
98+
// check if funcName exists in List, if not assume vector (not expression)
99+
100+
//console.log('property expression:',property,styleSpec.latest);
101+
102+
let options = [];
103+
for (let i in styleSpec.latest.function){
104+
if (!value.has(i)){
105+
options.push({
106+
name:i,
107+
value:i
108+
});
109+
}
110+
}
111+
//console.log('function options:',options);
112+
113+
let funcs = [];
114+
value.forEach((val,key)=>{
115+
let name = property.name+'.'+key;
116+
let error = (property.error && property.error.get)? property.error.get(key): null;
117+
//console.log('function error:',error);
118+
funcs.push(<VpropertyArrayRow key={key} row={{
119+
type:property.specType,
120+
name:name,
121+
value:val,
122+
error:error
123+
}} focus={focus} handle={this.funcHandle}/>);
124+
});
125+
126+
const autoFocus = (property.name === focus)? true: false;
127+
128+
//console.log('ac autofocus:',autoFocus, property.name, focus);
129+
130+
const doc = "function";
131+
132+
let addClass = 'func-add mt-1 p-1';
133+
if (this.state.addOpen) addClass += ' open';
134+
135+
const spec = styleSpec.latest.function;
136+
const layerGroup = value;
137+
138+
return <div className="form-group mb-0">
139+
<div className="mt-2 p-2 func-border position-relative">
140+
{funcs}
141+
142+
<div className="mt-2">
143+
<VpropertyAdd
144+
groupName={property.name}
145+
spec={spec}
146+
layerGroup={layerGroup}
147+
focus={focus}
148+
handle={this.handleAdd}/>
149+
</div>
150+
</div>
151+
</div>
152+
}
153+
};

Diff for: ‎src/view/Vproperty/index.jsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {Map, List} from 'immutable';
55

66
import Vfield from '../Vfield';
77

8+
import VpropertyArray from './VpropertyArray';
89
import VpropertyExpression from './VpropertyExpression';
910
import VpropertyFunction from './VpropertyFunction';
1011
import VpropertyInfo from './VpropertyInfo';
@@ -46,6 +47,10 @@ export default class Vproperty extends React.Component {
4647
let val;
4748
//console.log('change type:',type);
4849
switch(type){
50+
case 'array':
51+
if (List.isList(value)) return;
52+
val = [];
53+
break;
4954
case 'expression':
5055
if (List.isList(value)) return;
5156
val = [];
@@ -136,15 +141,16 @@ export default class Vproperty extends React.Component {
136141
}} handle={handle}/>
137142
</div>;
138143
} else if (spec.type === 'array'){
144+
mode === 'array';
139145
elem = <div>
140-
<Vfield field={{
146+
<VpropertyArray property={{
147+
pos:[0],
141148
type:'array',
142149
name:property.name,
143150
value:property.value,
144-
placeholder:property.label,
145-
controlled:false,
146-
autoFocus:autoFocus,
147-
error:property.error
151+
placeholder:doc,
152+
error:property.error,
153+
specType:'string'
148154
}} handle={handle}/>
149155
</div>;
150156
} else if (List.isList(property.value)){

0 commit comments

Comments
 (0)