skyquake/plugins/composer/src/src/components/model/Select.jsx

   1 /*
   2  *
   3  *   Copyright 2016-2017 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 /**
  19  * Created by onvelocity on 1/18/16.
  20  *
  21  * This class generates the form fields used to edit the CONFD JSON model.
  22  */
  23
  24 import React from 'react'
  25 import ClassNames from 'classnames'
  26 import changeCase from 'change-case'
  27 import Property from '../../libraries/model/DescriptorModelMetaProperty'
  28 import CatalogDataStore from '../../stores/CatalogDataStore'
  29
  30 import { startEditing, endEditing, onFocusPropertyFormInputElement } from './EditDescriptorUtils'
  31 import '../../styles/EditDescriptorModelProperties.scss'
  32
  33 export default function Select(props) {
  34         const { id, label, value, options, title, required, readOnly, onChange } = props;
  35         const selectOptions = options.map((o, i) => <option key={':' + i} value={o.value}>{o.name}</option>);
  36         if (!value || !required) {
  37                 let placeholder = props.placeholder || " ";
  38                 placeholder = changeCase.title(placeholder);
  39                 const noValueDisplayText = placeholder;
  40                 selectOptions.unshift(<option key={'(value-not-set)'} value="" placeholder={placeholder}>{noValueDisplayText}</option>);
  41         }
  42         function onSelectChange(e) {
  43                 e.preventDefault();
  44                 onChange(e.target.value);
  45         }
  46         return (
  47                 <select
  48                         id={id}
  49                         className={ClassNames({ '-value-not-set': !value, '-is-required': required })}
  50                         defaultValue={value}
  51                         title={title}
  52                         onChange={onSelectChange}
  53                         onFocus={onFocusPropertyFormInputElement}
  54                         onBlur={endEditing}
  55                         onMouseDown={startEditing}
  56                         onMouseOver={startEditing}
  57                         required={required}
  58                         disabled={readOnly}>
  59                         {selectOptions}
  60                 </select>
  61         );
  62 }