From 83811910c84342094be4ac94dca829e8f5ff630f Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 18 Apr 2017 18:20:31 +0200 Subject: Create a custom radio list component --- ui/app/components/custom-radio-list.js | 61 ++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 ui/app/components/custom-radio-list.js (limited to 'ui/app/components') diff --git a/ui/app/components/custom-radio-list.js b/ui/app/components/custom-radio-list.js new file mode 100644 index 000000000..201ec11dc --- /dev/null +++ b/ui/app/components/custom-radio-list.js @@ -0,0 +1,61 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = RadioList + +inherits(RadioList, Component) +function RadioList () { + Component.call(this) +} + +RadioList.prototype.render = function () { + const props = this.props + let activeClass = '.custom-radio-selected' + let inactiveClass = '.custom-radio-inactive' + let { + lables, + defaultFocus, + onClick, + } = props + + + return ( + h('.flex-row', { + style: { + fontSize: '12px', + } + }, [ + h('.flex-column.custom-radios', { + style: { + marginRight: '5px', + } + }, + lables.map((lable, i) => { + let isSelcted = (this.state !== null ) + isSelcted = isSelcted ? (this.state.selected === lable) : (this.props.defaultFocus === lable) + return h(isSelcted ? activeClass : inactiveClass, { + title: lable, + onClick: (event) => { + this.setState({selected: event.target.title}) + props.onClick(event) + } + }) + }), + ), + h('.text', {}, + lables.map((lable) => { + if (props.subtext) { + return h('.flex-row', {}, [ + h('.radio-titles', lable), + h('.radio-titles-subtext', `- ${props.subtext[lable]}`) + ]) + } else { + return h('.radio-titles', lable) + } + }) + ) + ]) + ) +} + -- cgit v1.2.3