mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-26 13:48:33 +02:00
simple list input type
This commit is contained in:
parent
c66b4f85c4
commit
e299f88062
@ -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
36
frontend/src/component/feature/form/strategy-input-list.jsx
Normal 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>
|
||||
);
|
Loading…
Reference in New Issue
Block a user