aboutsummaryrefslogtreecommitdiffstats
path: root/web/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/src')
-rw-r--r--web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap79
-rw-r--r--web/src/js/__tests__/ducks/tutils.js30
-rw-r--r--web/src/js/components/Modal/OptionMaster.jsx65
-rw-r--r--web/src/js/components/Modal/OptionModal.jsx20
4 files changed, 147 insertions, 47 deletions
diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
index 4fe163d1..af587ae4 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -46,7 +46,84 @@ exports[`Modal Component should render correctly 2`] = `
<div
className="modal-body"
>
- ...
+ <div
+ className="menu-entry"
+ >
+ <label>
+ booleanOption
+ <input
+ checked={false}
+ onChange={[Function]}
+ title="foo"
+ type="checkbox"
+ />
+ </label>
+ </div>
+ <div
+ className="menu-entry"
+ >
+ <label
+ htmlFor=""
+ >
+ choiceOption
+ <select
+ name="choiceOption"
+ onChange={[Function]}
+ selected="b"
+ title="foo"
+ >
+ <option
+ value="a"
+ >
+
+ a
+
+ </option>
+ <option
+ value="b"
+ >
+
+ b
+
+ </option>
+ <option
+ value="c"
+ >
+
+ c
+
+ </option>
+ </select>
+ </label>
+ </div>
+ <div
+ className="menu-entry"
+ >
+ <label>
+ intOption
+ <input
+ onChange={[Function]}
+ onKeyDown={[Function]}
+ title="foo"
+ type="number"
+ value={1}
+ />
+ </label>
+ </div>
+ <div
+ className="menu-entry"
+ >
+ <label>
+ strOption
+ <input
+ onChange={[Function]}
+ onKeyDown={[Function]}
+ title="foo"
+ type="text"
+ value="str content"
+ />
+ </label>
+ </div>
</div>
<div
className="modal-footer"
diff --git a/web/src/js/__tests__/ducks/tutils.js b/web/src/js/__tests__/ducks/tutils.js
index 9b92e676..a3e9c168 100644
--- a/web/src/js/__tests__/ducks/tutils.js
+++ b/web/src/js/__tests__/ducks/tutils.js
@@ -42,6 +42,36 @@ export function TStore(){
anticache: true,
anticomp: false
},
+ options: {
+ booleanOption: {
+ choices: null,
+ default: false,
+ help: "foo",
+ type: "bool",
+ value: false
+ },
+ strOption: {
+ choices: null,
+ default: null,
+ help: "foo",
+ type: "str",
+ value: "str content"
+ },
+ intOption: {
+ choices: null,
+ default: 0,
+ help: "foo",
+ type: "int",
+ value: 1
+ },
+ choiceOption: {
+ choices: ['a', 'b', 'c'],
+ default: 'a',
+ help: "foo",
+ type: "str",
+ value: "b"
+ },
+ },
flows: {
selected: ["d91165be-ca1f-4612-88a9-c0f8696f3e29"],
byId: {"d91165be-ca1f-4612-88a9-c0f8696f3e29": tflow},
diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
index e16319fb..c25dda72 100644
--- a/web/src/js/components/Modal/OptionMaster.jsx
+++ b/web/src/js/components/Modal/OptionMaster.jsx
@@ -1,6 +1,4 @@
import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { update as updateOptions } from '../../ducks/options'
PureBooleanOption.PropTypes = {
value: PropTypes.bool.isRequired,
@@ -9,16 +7,14 @@ PureBooleanOption.PropTypes = {
function PureBooleanOption({ value, onChange, name, help}) {
return (
- <div className="menu-entry">
<label>
+ { name }
<input type="checkbox"
checked={value}
onChange={onChange}
title={help}
/>
- { name }
</label>
- </div>
)
}
@@ -30,7 +26,6 @@ PureStringOption.PropTypes = {
function PureStringOption( { value, onChange, name, help }) {
let onKeyDown = (e) => {e.stopPropagation()}
return (
- <div className="menu-entry">
<label>
{ name }
<input type="text"
@@ -40,7 +35,6 @@ function PureStringOption( { value, onChange, name, help }) {
onKeyDown={onKeyDown}
/>
</label>
- </div>
)
}
@@ -52,7 +46,6 @@ PureNumberOption.PropTypes = {
function PureNumberOption( {value, onChange, name, help }) {
let onKeyDown = (e) => {e.stopPropagation()}
return (
- <div className="menu-entry">
<label>
{ name }
<input type="number"
@@ -62,7 +55,6 @@ function PureNumberOption( {value, onChange, name, help }) {
onKeyDown={onKeyDown}
/>
</label>
- </div>
)
}
@@ -73,16 +65,14 @@ PureChoicesOption.PropTypes = {
function PureChoicesOption( { value, onChange, name, help, choices }) {
return (
- <div className="menu-entry">
<label htmlFor="">
{ name }
<select name={name} onChange={onChange} title={help} selected={value}>
- { choices.map(choice => (
- <option value={choice}> {choice} </option>
+ { choices.map((choice, index) => (
+ <option key={index} value={choice}> {choice} </option>
))}
</select>
</label>
- </div>
)
}
@@ -94,45 +84,36 @@ const OptionTypes = {
"sequence of str": PureStringOption,
}
-Wrapper.displayName = 'OptionWrapper'
-
-
-function Wrapper({option, options, updateOptions, ...props}) {
- let optionObj = options[option],
- WrappedComponent = null
- if (optionObj.choices) {
+export default function OptionMaster({option, name, updateOptions, ...props}) {
+ let WrappedComponent = null
+ if (option.choices) {
WrappedComponent = PureChoicesOption
} else {
- WrappedComponent = OptionTypes[optionObj.type]
+ WrappedComponent = OptionTypes[option.type]
}
let onChange = (e) => {
- switch (optionObj.type) {
+ switch (option.type) {
case 'bool' :
- updateOptions({[option]: !optionObj.value})
+ updateOptions({[name]: !option.value})
break
case 'int':
- updateOptions({[option]: parseInt(e.target.value)})
+ updateOptions({[name]: parseInt(e.target.value)})
break
default:
- updateOptions({[option]: e.target.value})
+ updateOptions({[name]: e.target.value})
}
}
- return <WrappedComponent
- children={props.children}
- value={optionObj.value}
- onChange={onChange}
- name={option}
- help={optionObj.help}
- choices={optionObj.choices}
- />
+ return (
+ <div className="menu-entry">
+ <WrappedComponent
+ children={props.children}
+ value={option.value}
+ onChange={onChange}
+ name={name}
+ help={option.help}
+ choices={option.choices}
+ />
+ </div>
+ )
}
-
-export default connect(
- state => ({
- options: state.options,
- }),
- {
- updateOptions,
- }
-)(Wrapper)
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 582ac55f..ef3a224a 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,6 +1,7 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as modalAction from '../../ducks/ui/modal'
+import { update as updateOptions } from '../../ducks/options'
import Option from './OptionMaster'
class PureOptionModal extends Component {
@@ -28,9 +29,17 @@ class PureOptionModal extends Component {
<div className="modal-body">
{
- Object.keys(options).sort().map((key) => (
- <Option option={key}/>
- ))
+ Object.keys(options).sort()
+ .map((key, index) => {
+ let option = options[key];
+ return (
+ <Option
+ key={index}
+ name={key}
+ updateOptions={updateOptions}
+ option={option}
+ />)
+ })
}
</div>
@@ -46,5 +55,8 @@ export default connect(
state => ({
options: state.options
}),
- { hideModal: modalAction.hideModal }
+ {
+ hideModal: modalAction.hideModal,
+ updateOptions: updateOptions,
+ }
)(PureOptionModal)
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-30 03:19:16 +0000