Ej1 api migration in React Color picker component
31 Jan 202311 minutes to read
This article describes the API migration process of ColorPicker component from Essential JS 1 to Essential JS 2.
Properties
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
property: value <EJ.ColorPicker id="colorpicker" value="#278787"></EJ.ColorPicker>
|
property: value <ColorPickerComponent id="colorpicker" value="#278787"></ColorPickerComponent>
|
Inline mode color picker |
property: displayInline <EJ.ColorPicker id="colorpicker" displayInline={true}></EJ.ColorPicker>
|
property: inline <ColorPickerComponent id="colorpicker" inline={true}></ColorPickerComponent>
|
Adding custom class |
property: cssClass <EJ.ColorPicker id="colorpicker" cssClass ="custom-class"></EJ.ColorPicker>
|
property: cssClass <ColorPickerComponent id="colorpicker" cssClass="custom-class"></ColorPickerComponent>
|
Disable the ColorPicker component |
property: enabled <EJ.ColorPicker id="colorpicker" enabled={false}></EJ.ColorPicker>
|
property: disabled <ColorPickerComponent id="colorpicker" disabled={true}></ColorPickerComponent>
|
To display custom text in button elements |
property: buttonText var buttonText = { apply: “Apply”, cancel: “Cancel”, swatches: “Swatches” }; <EJ.ColorPicker id="colorpicker" buttonText={buttonText}></EJ.ColorPicker>
|
Not Applicable |
To display customized text or content when mouse over the color picker elements |
property: tooltipText var tooltipText = { switcher: “Switch”, currentColor: “New Color”, selectedColor: “Old Color” }; <EJ.ColorPicker id="colorpicker" tooltipText={tooltipText}></EJ.ColorPicker>
|
Not Applicable |
Disable / hide opacity |
property: enableOpacity <EJ.ColorPicker id="colorpicker" enableOpacity={false}></EJ.ColorPicker>
|
property: enableOpacity <ColorPickerComponent id="colorpicker" enableOpacity={false}></ColorPickerComponent>
|
ColorPicker Button mode |
property: buttonMode <EJ.ColorPicker id="colorpicker" buttonMode="Dropdown"></EJ.ColorPicker>
|
Not Applicable |
To show / hide the control (apply / cancel) buttons |
property: showApplyCancel <EJ.ColorPicker id="colorpicker" showApplyCancel={false}></EJ.ColorPicker>
|
property: showButtons <ColorPickerComponent id="colorpicker" showButtons={false}></ColorPickerComponent>
|
To show / hide the clear button |
property: showClearButton <EJ.ColorPicker id="colorpicker" showClearButton={false}></EJ.ColorPicker>
|
Not Applicable |
Show / hide the mode (picker / palette) switcher |
property: showSwitcher <EJ.ColorPicker id="colorpicker" showSwitcher={false}></EJ.ColorPicker>
|
property: modeSwitcher <ColorPickerComponent id="colorpicker" modeSwitcher={false}></ColorPickerComponent>
|
To show / hide the preview area |
property: showPreview <EJ.ColorPicker id="colorpicker" showPreview={false}></EJ.ColorPicker>
|
Not Applicable |
To show / hide the recent selected color list |
property: showRecentColors <EJ.ColorPicker id="colorpicker" showRecentColors={true}></EJ.ColorPicker>
|
Not Applicable |
To show / hide the color picker slider tooltip |
property: showTooltip <EJ.ColorPicker id="colorpicker" showTooltip={false}></EJ.ColorPicker>
|
Not Applicable |
Custom icon in dropdown control color area |
property: toolIcon <EJ.ColorPicker id="colorpicker" toolIcon="e-font-icon"></EJ.ColorPicker>
|
Not Applicable |
ColorPicker mode |
property: modelType <EJ.ColorPicker id="colorpicker" modelType="Picker"></EJ.ColorPicker>
|
property: mode <ColorPickerComponent id="colorpicker" mode="Palette"></ColorPickerComponent>
|
Opacity value |
property: opacityValue <EJ.ColorPicker id="colorpicker" opacityValue={80}></EJ.ColorPicker>
|
Not Applicable |
Number of columns in color palette |
property: columns <EJ.ColorPicker id="colorpicker" columns={10}></EJ.ColorPicker>
|
property: columns <ColorPickerComponent id="colorpicker" columns={15}></ColorPickerComponent>
|
Custom colors |
property: palette var colors = { “ffffff”, “ffccff”, “ff99ff”, “ff66ff”, “ff33ff”, “ff00ff”, “ccffff”, “ccccff”, “cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”, “99ffff”, “99ccff”, “9999ff”, “9966ff”, “9933ff”, “9900ff”, “ffffcc”, “ffcccc” }; <EJ.ColorPicker id="colorpicker" palette="CustomPalette" modelType ="Palette" custom={colors}></EJ.ColorPicker>
|
property: presetColors constructor(props: {}) { this.colors = { ‘custom’: [ “ffffff”, “ffccff”, “ff99ff”, “ff66ff”, “ff33ff”, “ff00ff”, “ccffff”, “ccccff”, “cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”, “99ffff”, “99ccff”, “9999ff”, “9966ff”, “9933ff”, “9900ff”, “ffffcc”, “ffcccc” ]}; } <ColorPickerComponent id="colorpicker" presetColors={this.colors}></ColorPickerComponent>
|
Rendering palette from the predefined set of palettes |
property: presetType <EJ.ColorPicker id="colorpicker" modelType="Palette" presetType="FlatColors"></EJ.ColorPicker>
|
Not Applicable |
No color option in color palette | Not Applicable |
property: noColor <ColorPickerComponent id="colorpicker" noColor={true} modeSwitcher={false} mode="Palette"></ColorPickerComponent>
|
Localization |
property: locale ej.ColorPicker.Locale[“zh-CN”] = { buttonText: { apply: “应用”, cancel: “取消”, swatches: “色板” }, tooltipText: { switcher: “切换器, addButton: “添加颜色”, basic: “基本” } } <EJ.ColorPicker id="colorpicker" locale="zh-CN"></EJ.ColorPicker>
|
property: locale L10n.load({ ‘ar’: { “colorpicker”: { “Apply”:”تطبيق”, “Cancel”:”إلغاء”, “ModeSwitcher”: “مفتاح كهربائي الوضع” } } }); <ColorPickerComponent id="colorpicker" locale="ar"></ColorPickerComponent>
|
Right to left |
property: enableRTL <EJ.ColorPicker id="colorpicker" enableRTL={true}></EJ.ColorPicker>
|
property: enableRtl <ColorPickerComponent id="colorpicker" enableRtl={true}></ColorPickerComponent>
|
Methods
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Method to open color picker popup |
Method: show <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.show(); |
Method: toggle <ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent> constructor(props: {}) { this.colorPickerObj.toggle(); } |
Method to close color picker popup |
Method: hide <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.hide(); |
Method: toggle <ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent> constructor(props: {}) { this.colorPickerObj.toggle(); } |
Enable the color picker control |
Method: enable <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.enable(); |
Not Applicable |
Disables the color picker control |
Method: disable <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.disable(); |
Not Applicable |
Method returns the selected color value as hex code |
Method: getValue <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.getValue(); |
Method: getValue <ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent> constructor(props: {}) { this.colorPickerObj.getValue(); } |
Method returns the selected color value in RGB format |
Method: getColor <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.getColor(); |
Method: getValue <ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent> constructor(props: {}) { this.colorPickerObj.getValue(null, ‘RGB’); } |
Method convert the color value from hexCode to RGB |
Method: hexCodeToRGB <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.hexCodeToRGB(“#278787”); |
Method: getValue <ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent> constructor(props: {}) { this.colorPickerObj.getValue(“#278787”, ‘RGB’); } |
Method convert the color value from RGB to Hex code |
Method: RGBToHEX <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.RGBToHEX({r:38,g:133,b:133}); |
Method: getValue <ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent> constructor(props: {}) { this.colorPickerObj.getValue(“rgb(38,133,133)”, ‘Hex’); } |
Method convert the color value from RGB to HSV |
Method: RGBToHSV <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.RGBToHSV({h:230,s:98,v:98}); |
Method: getValue <ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent> constructor(props: {}) { this.colorPickerObj.getValue(“rgb(180,71.1,52.9)”, ‘HSV’); } |
Method convert the color value from HSV to RGB |
Method: HSVToRGB <EJ.ColorPicker id="colorpicker"></EJ.ColorPicker> var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’); colorPickerObj.HSVToRGB({h:230,s:98,v:98}); |
Method: getValue <ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent> constructor(props: {}) { this.colorPickerObj.getValue(“hsv(180,71.1,52.9)”, ‘RGB’); } |
Events
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Event triggers before opening the ColorPicker popup | Not Applicable |
Event: beforeOpen <ColorPickerComponent id="colorpicker" beforeOpen={this.beforeOpen.bind(this)}></ColorPickerComponent> beforeOpen(args) { /** code block */ } |
Event triggers before closing the ColorPicker popup | Not Applicable |
Event: beforeClose <ColorPickerComponent id="colorpicker" beforeClose={this.beforeClose.bind(this)}></ColorPickerComponent> beforeClose(args) { /** code block */ } |
Event triggers after opening the ColorPicker popup |
Event: open<EJ.ColorPicker id="colorpicker" open={open}></EJ.ColorPicker> function open(args) { /** code block */ } |
Event: open <ColorPickerComponent id="colorpicker" open={this.open.bind(this)}></ColorPickerComponent> open(args) { /** code block */ } |
Event triggers after closing the ColorPicker popup |
Event: close <EJ.ColorPicker id="colorpicker" close={close}></EJ.ColorPicker> function close(args) { /** code block */ } |
Not Applicable |
Event triggers once the component rendering is completed |
Event: create <EJ.ColorPicker id="colorpicker" create={create}></EJ.ColorPicker> function create(args) { /** code block */ } |
Event: created <ColorPickerComponent id="colorpicker" created={this.created.bind(this)}></ColorPickerComponent> created() { /** code block */ } |
Event triggers once the color picker control is destroyed |
Event: destroy <EJ.ColorPicker id="colorpicker" destroy={destroy}></EJ.ColorPicker> function destroy(args) { /** code block */ } |
Not Applicable |
Event triggers before Switching between Picker / Palette mode | Not Applicable |
Event: beforeModeSwitch <ColorPickerComponent id="colorpicker" beforeModeSwitch={this.beforeModeSwitch.bind(this)}></ColorPickerComponent> beforeModeSwitch(args) { /** code block */ } |
Event triggers after color value has been selected |
Event: select <EJ.ColorPicker id="colorpicker" select={select}></EJ.ColorPicker> function select(args) { /** code block */ } |
Event: select <ColorPickerComponent id="colorpicker" select={this.select.bind(this)}></ColorPickerComponent> select(args) { /** code block */ } |
Event triggers after color value has been changed |
Event: change <EJ.ColorPicker id="colorpicker" change={change}></EJ.ColorPicker> function change(args) { /** code block */ } |
Event: change <ColorPickerComponent id="colorpicker" change={this.change.bind(this)}></ColorPickerComponent> change(args) { /** code block */ } |