@progress/kendo-react-inputs/colors/ColorInput.js

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";const b=require("react"),n=require("../numerictextbox/NumericTextBox.js"),m=require("./HexInput.js"),u=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function x(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=x(b),o=["rgba","rgb","hex"];class g extends a.Component{constructor(e){super(e),this.onRgbaRChange=t=>{this.dispatchRgbaChange({r:t.value},t)},this.onRgbaGChange=t=>{this.dispatchRgbaChange({g:t.value},t)},this.onRgbaBChange=t=>{this.dispatchRgbaChange({b:t.value},t)},this.onRgbaAChange=t=>{this.dispatchRgbaChange({a:t.value},t)},this.state={inputMode:e.defaultInputMode||o[1]}}render(){const e=l.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientHex,s.messages[s.colorGradientHex]),i=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),c=e.toLanguageString(s.colorGradientG,s.messages[s.colorGradientG]),p=e.toLanguageString(s.colorGradientB,s.messages[s.colorGradientB]),d=e.toLanguageString(s.colorGradientA,s.messages[s.colorGradientA]),h=e.toLanguageString(s.colorGradientToggleInputsButton,s.messages[s.colorGradientToggleInputsButton]);return a.createElement("div",{className:"k-colorgradient-inputs k-hstack"},a.createElement("div",{className:"k-vstack"},a.createElement(u.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:f.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",size:this.props.size,onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement(m,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&a.createElement(a.Fragment,null,a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},i)),a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},c)),a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},p))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(n.NumericTextBox,{value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),this.props.opacity&&a.createElement("label",{className:"k-colorgradient-input-label"},d)))}dispatchRgbaChange(e,t){const i={...this.props.rgba};e.r!==void 0&&(i.r=e.r),e.g!==void 0&&(i.g=e.g),e.b!==void 0&&(i.b=e.b),e.a!==void 0&&(i.a=e.a),this.props.onRgbaChange(i,t)}onToggleModeChange(){const e=o.length-1===o.indexOf(this.state.inputMode)?0:o.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:o[e]});else{const t=o[e]==="rgba"?e+1:e;this.setState({inputMode:o[t]})}}}l.registerForIntl(g);l.registerForLocalization(g);module.exports=g;