forked from enviPath/enviPy
102 lines
2.4 KiB
JavaScript
102 lines
2.4 KiB
JavaScript
/****************************************************************************
|
|
* Copyright 2017 EPAM Systems
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
***************************************************************************/
|
|
|
|
import { range } from 'lodash/fp';
|
|
|
|
import { h, Component } from 'preact';
|
|
/** @jsx h */
|
|
|
|
import Dialog from '../component/dialog';
|
|
|
|
function RGroup({ selected, onSelect, result, ...props }) {
|
|
return (
|
|
<Dialog title="R-Group"
|
|
className="rgroup" params={props}
|
|
result={() => result()}>
|
|
<ul>
|
|
{ range(1, 33).map(i => (
|
|
<li>
|
|
<button
|
|
className={ selected(i) ? 'selected' : ''}
|
|
onClick={ev => onSelect(i)}>
|
|
{`R${i}`}
|
|
</button>
|
|
</li>
|
|
)) }
|
|
</ul>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
class RGroupFragment extends Component {
|
|
constructor({label}) {
|
|
super();
|
|
this.state.label = label || null;
|
|
}
|
|
onSelect(label) {
|
|
this.setState({
|
|
label: label !== this.state.label ? label : null
|
|
});
|
|
}
|
|
selected(label) {
|
|
return label === this.state.label;
|
|
}
|
|
result() {
|
|
return { label: this.state.label };
|
|
}
|
|
render() {
|
|
return (
|
|
<RGroup selected={i => this.selected(i)}
|
|
onSelect={i => this.onSelect(i)}
|
|
result={() => this.result()} {...this.props}/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class RGroupAtom extends Component {
|
|
constructor({values}) {
|
|
super();
|
|
this.state.values = values || [];
|
|
}
|
|
onSelect(index) {
|
|
const {values} = this.state;
|
|
const i = values.indexOf(index);
|
|
if (i < 0)
|
|
values.push(index);
|
|
else
|
|
values.splice(i, 1);
|
|
this.setState({ values });
|
|
}
|
|
selected(index) {
|
|
return this.state.values.includes(index);
|
|
}
|
|
result() {
|
|
return {
|
|
type: 'rlabel',
|
|
values: this.state.values
|
|
};
|
|
}
|
|
render() {
|
|
return (
|
|
<RGroup selected={i => this.selected(i)}
|
|
onSelect={i => this.onSelect(i)}
|
|
result={() => this.result() } {...this.props}/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default params => params.type === 'rlabel' ? (<RGroupAtom {...params}/>) : (<RGroupFragment {...params}/>);
|