|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- import { h, Component } from 'preact';
- import wbInputSpecInfo from 'wb-input-spec-info';
- import WBPathDisplay from 'wb-path-display';
- import { parseKeepRef } from 'wb-process-misc';
-
- class WBWorkflowInput extends Component {
- render({ app, inputSpec, inputsDict, browseDialogRef }) {
- const { isFile, isDirectory, isArray } = wbInputSpecInfo(inputSpec);
-
- if (!isFile && !isDirectory)
- return (
- <div>
- <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
- value={ inputsDict[inputSpec.id] }
- onchange={ e => (inputsDict[inputSpec.id] = e.target.value) }></input>
- <div class="mt-2 text-muted">{ inputSpec.doc }</div>
- </div>
- );
-
- const button = (
- <button class="btn btn-outline-primary"
- onclick={ e => {
- e.preventDefault();
- browseDialogRef.current.show(
- [].concat(isFile ? 'file' : []).concat(isDirectory ? 'directory' : []),
- isArray,
- v => {
- inputsDict[inputSpec.id] = JSON.stringify(v);
- this.setState({});
- });
- } }>
- Browse...
- </button>
- );
-
- let value = inputsDict[inputSpec.id];
- if (value) {
- try {
- value = jsyaml.load(value);
- } catch (_) {}
- }
-
- return (
- <div>
- <div class="input-group">
- <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
- value={ inputsDict[inputSpec.id] }
- onchange={ e => (inputsDict[inputSpec.id] = e.target.value) }></input>
- <div class="input-group-append">
- { button }
- </div>
- </div>
- <div class="mt-2 text-muted">{ inputSpec.doc }</div>
- { value ?
- isArray ? (
- <ul class="mb-0">
- { value.map(path => (
- <li>
- <WBPathDisplay app={ app } path={ parseKeepRef(path) } />
- </li>
- )) }
- </ul>
- ) : (
- <WBPathDisplay app={ app } path={ parseKeepRef(value) } />
- ) : null }
- </div>
- );
- }
- }
-
- export default WBWorkflowInput;
|