@figlinq/react-chart-editor/lib/components/widgets/FlaglistCheckboxGroup.js

plotly.js chart editor react component UI

import{Component}from"react";import PropTypes from"prop-types";import CheckboxGroup from"./CheckboxGroup";import{jsx as _jsx}from"react/jsx-runtime";class FlaglistCheckboxGroup extends Component{constructor(props){super(props);let currentActiveOption;if(props.activeOption!==null){currentActiveOption=props.activeOption}else{currentActiveOption=""}this.state={activeOption:this.parseFlags(currentActiveOption)};this.handleChange=this.handleChange.bind(this)}parseFlags(option){let activeOption;if(option==="all"){activeOption=this.props.options.map(o=>o.value).join("+")}else if(option==="none"){activeOption=""}else{activeOption=option}return activeOption}UNSAFE_componentWillReceiveProps(nextProps){this.setState({activeOption:this.parseFlags(nextProps.activeOption)})}handleChange(newOptions){let newActiveOptions="";newOptions.map(option=>{if(option.checked===true){newActiveOptions+=option.value+"+"}});newActiveOptions=newActiveOptions.slice(0,-1);if(newActiveOptions.length===0){newActiveOptions="none"}this.setState({activeOption:newActiveOptions});this.props.onChange(newActiveOptions)}renderCheckedOption(){const activeOptions=typeof this.state.activeOption==="string"?this.state.activeOption.split("+"):[this.state.activeOption];const allOptions=this.props.options;const newOptions=[];allOptions.map(option=>{let currentChecked;if(activeOptions.indexOf(option.value)>-1){currentChecked=true}else{currentChecked=false}newOptions.push({label:option.label,value:option.value,checked:currentChecked})});return newOptions}render(){return _jsx(CheckboxGroup,{options:this.renderCheckedOption(),onChange:this.handleChange,className:this.props.className,orientation:this.props.orientation})}}FlaglistCheckboxGroup.propTypes={options:PropTypes.arrayOf(PropTypes.shape({value:PropTypes.any.isRequired,label:PropTypes.string.isRequired})).isRequired,activeOption:PropTypes.any,onChange:PropTypes.func,className:PropTypes.string,orientation:PropTypes.string};export default FlaglistCheckboxGroup;
//# sourceMappingURL=FlaglistCheckboxGroup.js.map