From 8d06839056967e8786c63976545aff098ae2f128 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 26 Jun 2018 01:28:41 +0200 Subject: morph module.. enum method for sliders --- app/client/common/button.component.js | 2 +- app/client/common/checkbox.component.js | 41 +++++++++++++++++++++++++++++++++ app/client/common/index.js | 3 ++- app/client/common/select.component.js | 2 +- app/client/common/slider.component.js | 16 +++++++++++-- 5 files changed, 59 insertions(+), 5 deletions(-) create mode 100644 app/client/common/checkbox.component.js (limited to 'app/client/common') diff --git a/app/client/common/button.component.js b/app/client/common/button.component.js index 21aa5b6..65cd5f6 100644 --- a/app/client/common/button.component.js +++ b/app/client/common/button.component.js @@ -19,7 +19,7 @@ class Button extends Component { diff --git a/app/client/common/checkbox.component.js b/app/client/common/checkbox.component.js new file mode 100644 index 0000000..2d808c2 --- /dev/null +++ b/app/client/common/checkbox.component.js @@ -0,0 +1,41 @@ +import { h, Component } from 'preact' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' +import * as liveActions from '../live/live.actions' + +class Checkbox extends Component { + constructor(props){ + super(props) + this.handleClick = this.handleClick.bind(this) + } + handleClick(e){ + clearTimeout(this.timeout) + let new_value = e.target.checked + this.props.onToggle && this.props.onToggle(new_value) + } + render() { + const checked = this.props.value + const dim = !this.props.noDim + return ( +
+ +
+ ) + } +} + +const mapStateToProps = state => ({ +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + // actions: bindActionCreators(liveActions, dispatch) +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Checkbox) diff --git a/app/client/common/index.js b/app/client/common/index.js index 6db1184..3981fa7 100644 --- a/app/client/common/index.js +++ b/app/client/common/index.js @@ -1,4 +1,5 @@ import Button from './button.component' +import Checkbox from './checkbox.component' import CurrentTask from './currentTask.component' import { FileList, FileRow } from './fileList.component' import FileUpload from './fileUpload.component' @@ -22,6 +23,6 @@ export { FolderList, FileList, FileRow, FileUpload, Gallery, Player, Group, ParamGroup, Param, - TextInput, Slider, Select, Button, + TextInput, Slider, Select, Button, Checkbox, CurrentTask, } \ No newline at end of file diff --git a/app/client/common/select.component.js b/app/client/common/select.component.js index 3fc13c2..d08ae60 100644 --- a/app/client/common/select.component.js +++ b/app/client/common/select.component.js @@ -18,7 +18,7 @@ class Select extends Component { const options = (this.props.options || []).map((key,i) => { let name, value if (typeof key === 'string') { - name = key.length < 4 ? key.toUpperCase() : key + name = key.length < 2 ? key.toUpperCase() : key value = key } else if (typeof key === 'object') { diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js index cc00650..468debd 100644 --- a/app/client/common/slider.component.js +++ b/app/client/common/slider.component.js @@ -52,6 +52,9 @@ class Slider extends Component { if (this.props.type === 'odd') { new_value = parseInt(Math.floor(new_value / 2) * 2 + 1) } + if (this.props.type === 'list') { + new_value = this.props.options[new_value] || this.props.options[0] + } this.setState({ value: new_value }) this.timeout = setTimeout(() => { this.props.live && this.props.actions.set_param(this.props.name, new_value) @@ -66,8 +69,17 @@ class Slider extends Component { } let text_value = value let step; + let min = this.props.min || 0 + let max = this.props.max || 0 if (this.props.type === 'int') { step = 1 + } else if (this.props.type === 'list') { + min = 0 + max = this.props.options.length-1 + step = 1 + console.log('old', value) + value = this.props.options.indexOf(value) + console.log('new', value, this.props.options[value]) } else { step = (this.props.max - this.props.min) / 100 text_value = parseFloat(value).toFixed(2) @@ -80,8 +92,8 @@ class Slider extends Component {