/**
 * Copyright 2019 Google Inc. All Rights Reserved.
 * 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 { h , Component } from 'preact' ; import { palette } from 'shared/state' ; import { getHexColor } from 'client/utils' ; interface Props { name : string ; value ? : number ; disabled ? : boolean ; onChange ? : ( newVal : number ) => void ; } export default class ColorSelect extends Component < Props , { } > { private _onClick = ( event ) => { const onChange = this . props . onChange ; if ( ! onChange ) return ; const el = event . currentTarget as HTMLInputElement ; onChange ( Number ( el . value ) ) ; } ; render ( { name , disabled , value } ) { return ( < div class = { `color-select${ disabled ? ' disabled' : '' }` } > { palette . map ( ( paletteItem , i ) => ( < label > < input type = "radio" name = { name } value = { i } disabled = { disabled } checked = { value === i } onClick = { this . _onClick } / > < span class = "color-select-item" style = { { '--color-from' : getHexColor ( paletteItem [ 0 ] ) , '--color-to' : getHexColor ( paletteItem [ 1 ] ) , } } > < /span> < /label>))} < /div>); } }