Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

simple list input type

Browse Source
This commit is contained in:
sveisvei 2016-12-10 23:16:21 +01:00
parent c66b4f85c4
commit e299f88062
2 changed files with 62 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/component/feature/form/strategy-configure.jsx
View File

@ -1,7 +1,12 @@
import React, { PropTypes } from 'react';
import { Textfield, Button, Card, CardTitle, CardText, CardActions, CardMenu, IconButton, Icon } from 'react-mdl';
import {
Textfield, Button,
Card, CardTitle, CardText, CardActions, CardMenu,
IconButton, Icon,
} from 'react-mdl';
import { Link } from 'react-router';
import StrategyInputPersentage from './strategy-input-persentage';
import StrategyInputList from './strategy-input-list';
const style = {
flex: '1',
@ -20,14 +25,22 @@ class StrategyConfigure extends React.Component {
};
}
// shouldComponentUpdate (props, nextProps) {
// console.log({ props, nextProps });
// }
handleConfigChange = (key, e) => {
this.setConfig(key, e.target.value);
};
setConfig = (key, value) => {
const parameters = this.props.strategy.parameters || {};
parameters[key] = e.target.value;
parameters[key] = value;
const updatedStrategy = Object.assign({}, this.props.strategy, { parameters });
this.props.updateStrategy(updatedStrategy);
};
}
handleRemove = (evt) => {
evt.preventDefault();
@ -41,8 +54,9 @@ class StrategyConfigure extends React.Component {
return null;
}
return keys.map(field => {
if (strategyDefinition.parametersTemplate[field] === 'percentage') {
let value = this.props.strategy.parameters[field];
const type = strategyDefinition.parametersTemplate[field];
let value = this.props.strategy.parameters[field];
if (type === 'percentage') {
if (value == null || (typeof value === 'string' && value === '')) {
value = 50; // default value
}
@ -51,6 +65,12 @@ class StrategyConfigure extends React.Component {
field={field}
onChange={this.handleConfigChange.bind(this, field)}
value={1 * value} />);
} else if (type === 'list') {
let list = [];
if (typeof value === 'string') {
list = value.split(',');
}
return (<StrategyInputList field={field} list={list} setConfig={this.setConfig} />);
} else {
return (
<Textfield
@ -61,7 +81,7 @@ class StrategyConfigure extends React.Component {
name={field}
label={field}
onChange={this.handleConfigChange.bind(this, field)}
value={this.props.strategy.parameters[field]}
value={value}
/>
);
}

36
frontend/src/component/feature/form/strategy-input-list.jsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import {
Textfield,
IconButton,
Chip,
} from 'react-mdl';
export default ({ field, list, setConfig }) => (
<div style={{ margin: '16px 20px' }}>
<h6>{field}</h6>
{list.map((entryValue, index) => (
<Chip style={{ marginRight: '3px' }} onClose={() => {
list[index] = null;
setConfig(field, list.filter(Boolean).join(','));
}}>{entryValue}</Chip>
))}
<form style={{ display: 'block', padding: 0, margin: 0 }} onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
const inputValue = document.querySelector(`[name="${field}_input"]`);
if (inputValue && inputValue.value) {
list.push(inputValue.value);
inputValue.value = '';
setConfig(field, list.join(','));
}
}}>
<div style={{ display: 'flex' }}>
<Textfield name={`${field}_input`} style={{ width: '100%', flex: 1 }} floatingLabel label="Add list entry" />
<IconButton name="add" raised style={{ flex: 1, flexGrow: 0, margin: '20px 0 0 10px' }}/>
</div>
</form>
</div>
);