/** * 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: Event) => { const onChange = this.props.onChange; if (!onChange) return; const el = event.currentTarget as HTMLInputElement; onChange(Number(el.value)); }; render({ name, disabled, value }: Props) { 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> ); } }