ToolJet/frontend/src/Editor/Components/Table/String.jsx

181 lines
4.9 KiB
React
Raw Normal View History

Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
import React, { useState, useEffect } from 'react';
import { validateWidget, determineJustifyContentValue } from '@/_helpers/utils';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
const StringColumn = ({
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
isEditable,
darkMode,
handleCellValueChange,
cellTextColor,
cellValue,
column,
currentState,
containerWidth,
cell,
horizontalAlignment,
isMaxRowHeightAuto,
Fix : Table string column max height not getting applied , ui fixes in image column type (#9436) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * fix : Max column hight is not working in table * Fixed width applied to multiselect popover * fix : Remove height and width from table image column / backward compatibility (#9425) * fix : table column image , remove width and height * optimise * adding default object fit * fix : text is overlaping issue * fix : non editable string column text alignment * remove logs * fix : text overflow * fix : text padding --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> Co-authored-by: Manish Kushare <37823141+manishkushare@users.noreply.github.com>
2024-04-19 12:32:20 +00:00
cellSize,
maxRowHeightValue,
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
}) => {
const validationData = validateWidget({
validationObject: {
regex: {
value: column.regex,
},
minLength: {
value: column.minLength,
},
maxLength: {
value: column.maxLength,
},
customRule: {
value: column.customRule,
},
},
widgetValue: cellValue,
currentState,
customResolveObjects: { cellValue },
});
const { isValid, validationError } = validationData;
const cellStyles = {
color: cellTextColor ?? 'inherit',
};
const ref = React.useRef(null);
const [showOverlay, setShowOverlay] = useState(false);
const [hovered, setHovered] = useState(false);
const [isEditing, setIsEditing] = useState(false);
useEffect(() => {
if (hovered) {
setShowOverlay(true);
} else {
setShowOverlay(false);
}
}, [hovered]);
useEffect(() => {
if (!isEditable && isEditing) {
setIsEditing(false);
}
}, [isEditable]);
const _renderString = () => (
<div
ref={ref}
contentEditable={'true'}
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
className={`${!isValid ? 'is-invalid' : ''} h-100 text-container long-text-input d-flex align-items-center ${
darkMode ? ' textarea-dark-theme' : ''
App builder 1.6 integration bug fixes (#9456) * Fix max canvas width select broken * Added padding right instead of setting width to avoid overlapping of numbers on the arrow Added padding right to provide spacing to right side of number container * fix : focusing on any cell of number column type, results into first cell getting focused * fix : text alignment bug in string column type * fixed : text alignmnet of editable div in string column type * Fix : avoid clicking thrice on element to start editing the content * Fix : Overlay issue in deprecated columns * Fix : multiselect deprecated secondary text not appearing on column list * Fix table fixes * fix placeholder in multiselect dynamic options * fix: fix for scrollbar in viewer * fix: integration bugfixes for table (#9457) * change label for link color * remove alt text for cell image * fix : number arrow , labels * limit table popover max height * Bug fixes from appbuilder-1.6 (#9465) * Fix : Selecting same value again is not discarding the selected value in single select * If default options list is empty then return null * Fix : Deleting the default option will rresult into removing from default option list as well * showing error message at the bottom and cell value in the center for text and string column type * Making Pagination aligned in the center horizontally * Fix: Download popup * Fix add new row string text not changing its color in dark mode * Fix date picker on change in add new row not changing when value is empty * fix : table default ui (#9454) * fix : muliselect popover not showing (#9455) * update default number data from string to number (#9467) * Fix in datepicker * fix: add fixed height to error feedback * fix: fixed issue that caused multiselect option delete to fail (#9469) * fix: fixed issue that caused multiselect option delete to fail * refactor: minor code cleanup * Bug Fixes from appbuilder-1.6 (#9470) * Fix : Selecting same value again is not discarding the selected value in single select * If default options list is empty then return null * Fix : Deleting the default option will rresult into removing from default option list as well * showing error message at the bottom and cell value in the center for text and string column type * Making Pagination aligned in the center horizontally * overlay is not showing for string column type * Padding right on number cell * Fix : Table is crashing becasue of null default value * Fix dark mode in dropdown column type --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> Co-authored-by: Kiran Ashok <stepinfwd@gmail.com> Co-authored-by: Manish Kushare <37823141+manishkushare@users.noreply.github.com>
2024-04-23 13:03:27 +00:00
} justify-content-${determineJustifyContentValue(horizontalAlignment)}`}
tabIndex={-1}
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
style={{
color: cellTextColor ? cellTextColor : 'inherit',
outline: 'none',
border: 'none',
background: 'inherit',
position: 'relative',
height: '100%',
}}
readOnly={!isEditable}
onBlur={(e) => {
setIsEditing(false);
if (cellValue !== e.target.textContent) {
handleCellValueChange(cell.row.index, column.key || column.name, e.target.textContent, cell.row.original);
}
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
Release: Appbuilder S1 (#10081) * fix : color for all new columns * revert * Fix: selection of copy of selected component for ease (#9818) * fix: selection of copy of selected component for ease * add pre selection for clonig as well * add clone check * fixes selection of components on empty canvas * Fix: sizing issues in horizontal divider (#9942) * fix horizontal divider sizing issues * fix dark mode color in horizontal divider and remove unused class * add custom fallback for images when not found (#9943) * cherry pick error message log changes and fix tjdb error logs in debugger (#9951) * Fix: mouse release on canvas when properties/styles values selected (#9732) * fix: mouse release on canvas when properties/styles values selected * fix: event name * fix: rest api headers empty state while creating new query (#9729) * fix: selection issue in table row while editing (#9944) * allow selection in table cell * update classname for selection * display date picker date as text instead of input in read only mode * Add new revamped multiselect widget (#9837) * init textinput revamp * updated styles panel * bugfix * updates * fix :: accordion * fix :: styling * add box shadow , additional property,tooltip * fix conditional render for styles * feat :: fixed order of each property and styles * feat :: styling input * bugfix * feat :: add option to add icon * add option to add icon * adding option to toggle visibility * updated password input with new design * chnaging component location * bugfix * style fixes * fix :: added loader * updated :: few detailing * few bugfixes * fix :: for form widget label * fixes * added option to add icon color * including label field for password input * fix for label * fix * test fix backward compatibility for height * updates * revert * adding key for distinguishing older and newer widgets * testing * test * test * update * update * migration testing * limit vertical resizing in textinput * testing * throw test * test * adding check for label length * fixing edge cases * removing resize * backward compatibility height * backward compatibility * number input review fixes * added exposed items * fixing csa * ui fixes * fix height compatibility * feat :: csa for all inputs and exposed variables * backward compatibility fixes and validation fixes * fixes :: textinput positioning of loader and icon * fix :: password input * cleanup and fixes * fixes * cleanup * fixes * review fixes * review fixes * typo fix * fix padding * review fixes styles component panel * fix naming * fix padding * feat :: toggle switch revamp * init checkbox * fixes * fixes * switch fixes * validation fix * fixes * cleanup * height fix * fix height toggle * updates * fix :: icons position * updates * cleanup * updates events , csa * cleanup * backward compatibility * clean * backward compatibility fix * label fixed to one line * feat :: change validation from properties * ui fixes * icon name * removed 'px' text from tooltip * added onchange event for checkbox * fixes placeholder * few updates :: removing label in form * ui in form * fire onchange * update :: number input validation behaviour * testing fixes * added side handlers * removing unwanted fx * disabling fx for padding field * ordering change * fix * label issue + restricted side handler * fix :: box shadow bug * fix * on change event doesnt propagate exposed vars correctly * adding debounce for slider value change * fix :: for modal ooen bug during onfocus event * test slider * fix :: bugs regarding state update in checbox , slider , slider bug * update slider with radix slider * bugfix * update tooltip * fix toggle switch * fixes : inspector * fix : checkbox label * Remove date-fns depedency from table datepicker * Revert Remove date-fns depedency from table datepicker * feat : checkbox completed * update checkbox review changes * feat : toggle component * feat : added new toggle component * fix : colors * updated review changes * update name for old and new version * update * case change * update * update icon * removed padding from checkbox and toggle * fix naming * product review and bugfixes : changes * fix : checkbox setvalue action * Update setvalue action in toggle * fixed: section for legacy and new components * add new version of dropdown * Add same styles as other input components * fix height issues * Add new revamped multiselect widget * Fix design review * fix design issues * Fix * Fix merge issues * Add menu portal target * resolve code comments * widget config changes * add hover for clear icon * fix * Fix review comments * Multiselect changes after dropdown merge * exposed variables * Delete unused components * Multiselect fixes * Dropdown CSS fixes and multiselect fixes * Fix merge issues * fix * Add highlight text * Change multiselect UI * fix error message * fix multiselect opening closing * placeholder fix * fix highlighting in multiselect * fix : testing bugs * fix : default value * Fix merge issues * Fix Qa bugs * Fix QA bugs * Fix codehinter default values * fix fireEvent on focus * Fixes * Provide minwidth to dropdown and multiselect * Fix search input value not getting updated --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> * Fix: remove mandatory key from password input (#9786) * Remove date-fns depedency from table datepicker * Revert Remove date-fns depedency from table datepicker * remove mandatory key from password input --------- Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> * feat : Query manager separated to different tabs (#9823) * change toggle for query manager and revamp preview * feat : query manger body revamp * updates * fix : tranformation switch * preview integration * loader safari changes and overflow fix * fix * fix : settings tab QM * revert few changes to fix datasources page * revert header options change * zindex fix for query-pane * fix : events ui * fix :events widget manager * code optimised for this file * QM header fixes * dark mode changes * fix : info icon * open preview drawer on run query * fix : query manager query section icons update * update color * design feedbacks and make preview panel resizable * update toggle for preview result & increate draggable area * fix :review changes * merge fixes * Merge branch 'appbuilder-1.8' into feature/query-manager-body * fix : codehinter in disabled state * ui fix * code refactor * cleanup * fix fontsize in datasource selector popup * fix border issue in preview container and increase draggable area * fix : review fixes * fix: fixed text css formatting for safari support * Revert "code refactor" This reverts commit 4763dd11a31f327e41b411b43f39cb422ee34674. * typo * fix : not able to select text in preview * fix : not able to view add params * fix selection issue in preview * fix : add scroll in query manager when preview is blocking view --------- Co-authored-by: Kartik Gupta <gupta.kartik18kg@gmail.com> * Fixes: select all click behaviour on label (#10108) * fixes: select all click behaviour on label * fix: legacy component names * fix: selecto issue (#10107) * Fix : Prevent component autofill (#10040) * fix : prevent other component from autofilling data when password is filled from browser suggestions * optimise * feat: skip onDragStop execution if drag event is empty (#10118) * feat: skip onDragStop execution if drag event is empty * fix: added additonal logs for error * display query preview data in preview panel and display transformation failure stacktrace data in previewpanel as well (#10129) * Fix while adding new rows in table components when ever entered the text and pressed enter it doubles the text (#10112) * Integration bugfixes appbuilder 1.8 (#10109) * fix : query maanager duplicate and preview issue * fix : multiselect breaking on making dynamic options null * fix : preview and query panel integration bugs * fix : placeholder * fix : doc links * fix : scroll in TJDB filter section * fix : portal for multiselect * fixes * fix : image column table alignment * fix : doc link for multiselect * fix : codehinter state being persited across components * fix :export app qery manager items not coming in correct order * fix: search icon position * code refactor --------- Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> * add z-index to app name info header container (#10116) * Fix dropdown and multiselect crash on integer labels (#10128) * cast integer labels to string * add null check for label and provide default value for empty labels * empty and null handle for schemas and other values * revert changes * Fix: dark mode on preview names (#10136) * fix: dark mode of preview names * fix background color of preview * fix tjdb query import (#10134) * fix :revert radio button name change (#10153) * Fix: select issue on multiselect (#10137) * remove portal from multiselect * fix: dynamic values for options in dropdown/multiselect * remove fx from default option * Fix: delete on options delete in dropdown (#10192) * fix: delete on options delete * fix: overlapping of multiselect on parent container * fix: outside click of multiselect * hotfix : Table breaking on importing older apps with null value in column (#10185) * fix : table breaking on importing older apps with null value in column * fix : table crash , codehinter not saving values upon page change * remove low priority wrapper from autosave * remove logs * added delay to autosave as callback * fix: dropdown crash on invalid data (#10202) * revert to previous transformation code , fix darkmode color (#10216) * fix : doclink for dropdown (#10217) * fix : Transformations value getting cleared / not getting saved (#10218) * fix : transformation value not getting saved * remove dependency * chore: version update for release --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: vjaris42 <vjy239@gmail.com> Co-authored-by: Kartik Gupta <gupta.kartik18kg@gmail.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Akshay <akshaysasidharan93@gmail.com>
2024-07-01 03:16:22 +00:00
ref.current.blur();
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
if (cellValue !== e.target.textContent) {
handleCellValueChange(cell.row.index, column.key || column.name, e.target.textContent, cell.row.original);
}
}
}}
onFocus={(e) => {
setIsEditing(true);
e.stopPropagation();
}}
>
Release: Appbuilder S1 (#10081) * fix : color for all new columns * revert * Fix: selection of copy of selected component for ease (#9818) * fix: selection of copy of selected component for ease * add pre selection for clonig as well * add clone check * fixes selection of components on empty canvas * Fix: sizing issues in horizontal divider (#9942) * fix horizontal divider sizing issues * fix dark mode color in horizontal divider and remove unused class * add custom fallback for images when not found (#9943) * cherry pick error message log changes and fix tjdb error logs in debugger (#9951) * Fix: mouse release on canvas when properties/styles values selected (#9732) * fix: mouse release on canvas when properties/styles values selected * fix: event name * fix: rest api headers empty state while creating new query (#9729) * fix: selection issue in table row while editing (#9944) * allow selection in table cell * update classname for selection * display date picker date as text instead of input in read only mode * Add new revamped multiselect widget (#9837) * init textinput revamp * updated styles panel * bugfix * updates * fix :: accordion * fix :: styling * add box shadow , additional property,tooltip * fix conditional render for styles * feat :: fixed order of each property and styles * feat :: styling input * bugfix * feat :: add option to add icon * add option to add icon * adding option to toggle visibility * updated password input with new design * chnaging component location * bugfix * style fixes * fix :: added loader * updated :: few detailing * few bugfixes * fix :: for form widget label * fixes * added option to add icon color * including label field for password input * fix for label * fix * test fix backward compatibility for height * updates * revert * adding key for distinguishing older and newer widgets * testing * test * test * update * update * migration testing * limit vertical resizing in textinput * testing * throw test * test * adding check for label length * fixing edge cases * removing resize * backward compatibility height * backward compatibility * number input review fixes * added exposed items * fixing csa * ui fixes * fix height compatibility * feat :: csa for all inputs and exposed variables * backward compatibility fixes and validation fixes * fixes :: textinput positioning of loader and icon * fix :: password input * cleanup and fixes * fixes * cleanup * fixes * review fixes * review fixes * typo fix * fix padding * review fixes styles component panel * fix naming * fix padding * feat :: toggle switch revamp * init checkbox * fixes * fixes * switch fixes * validation fix * fixes * cleanup * height fix * fix height toggle * updates * fix :: icons position * updates * cleanup * updates events , csa * cleanup * backward compatibility * clean * backward compatibility fix * label fixed to one line * feat :: change validation from properties * ui fixes * icon name * removed 'px' text from tooltip * added onchange event for checkbox * fixes placeholder * few updates :: removing label in form * ui in form * fire onchange * update :: number input validation behaviour * testing fixes * added side handlers * removing unwanted fx * disabling fx for padding field * ordering change * fix * label issue + restricted side handler * fix :: box shadow bug * fix * on change event doesnt propagate exposed vars correctly * adding debounce for slider value change * fix :: for modal ooen bug during onfocus event * test slider * fix :: bugs regarding state update in checbox , slider , slider bug * update slider with radix slider * bugfix * update tooltip * fix toggle switch * fixes : inspector * fix : checkbox label * Remove date-fns depedency from table datepicker * Revert Remove date-fns depedency from table datepicker * feat : checkbox completed * update checkbox review changes * feat : toggle component * feat : added new toggle component * fix : colors * updated review changes * update name for old and new version * update * case change * update * update icon * removed padding from checkbox and toggle * fix naming * product review and bugfixes : changes * fix : checkbox setvalue action * Update setvalue action in toggle * fixed: section for legacy and new components * add new version of dropdown * Add same styles as other input components * fix height issues * Add new revamped multiselect widget * Fix design review * fix design issues * Fix * Fix merge issues * Add menu portal target * resolve code comments * widget config changes * add hover for clear icon * fix * Fix review comments * Multiselect changes after dropdown merge * exposed variables * Delete unused components * Multiselect fixes * Dropdown CSS fixes and multiselect fixes * Fix merge issues * fix * Add highlight text * Change multiselect UI * fix error message * fix multiselect opening closing * placeholder fix * fix highlighting in multiselect * fix : testing bugs * fix : default value * Fix merge issues * Fix Qa bugs * Fix QA bugs * Fix codehinter default values * fix fireEvent on focus * Fixes * Provide minwidth to dropdown and multiselect * Fix search input value not getting updated --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> * Fix: remove mandatory key from password input (#9786) * Remove date-fns depedency from table datepicker * Revert Remove date-fns depedency from table datepicker * remove mandatory key from password input --------- Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> * feat : Query manager separated to different tabs (#9823) * change toggle for query manager and revamp preview * feat : query manger body revamp * updates * fix : tranformation switch * preview integration * loader safari changes and overflow fix * fix * fix : settings tab QM * revert few changes to fix datasources page * revert header options change * zindex fix for query-pane * fix : events ui * fix :events widget manager * code optimised for this file * QM header fixes * dark mode changes * fix : info icon * open preview drawer on run query * fix : query manager query section icons update * update color * design feedbacks and make preview panel resizable * update toggle for preview result & increate draggable area * fix :review changes * merge fixes * Merge branch 'appbuilder-1.8' into feature/query-manager-body * fix : codehinter in disabled state * ui fix * code refactor * cleanup * fix fontsize in datasource selector popup * fix border issue in preview container and increase draggable area * fix : review fixes * fix: fixed text css formatting for safari support * Revert "code refactor" This reverts commit 4763dd11a31f327e41b411b43f39cb422ee34674. * typo * fix : not able to select text in preview * fix : not able to view add params * fix selection issue in preview * fix : add scroll in query manager when preview is blocking view --------- Co-authored-by: Kartik Gupta <gupta.kartik18kg@gmail.com> * Fixes: select all click behaviour on label (#10108) * fixes: select all click behaviour on label * fix: legacy component names * fix: selecto issue (#10107) * Fix : Prevent component autofill (#10040) * fix : prevent other component from autofilling data when password is filled from browser suggestions * optimise * feat: skip onDragStop execution if drag event is empty (#10118) * feat: skip onDragStop execution if drag event is empty * fix: added additonal logs for error * display query preview data in preview panel and display transformation failure stacktrace data in previewpanel as well (#10129) * Fix while adding new rows in table components when ever entered the text and pressed enter it doubles the text (#10112) * Integration bugfixes appbuilder 1.8 (#10109) * fix : query maanager duplicate and preview issue * fix : multiselect breaking on making dynamic options null * fix : preview and query panel integration bugs * fix : placeholder * fix : doc links * fix : scroll in TJDB filter section * fix : portal for multiselect * fixes * fix : image column table alignment * fix : doc link for multiselect * fix : codehinter state being persited across components * fix :export app qery manager items not coming in correct order * fix: search icon position * code refactor --------- Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> * add z-index to app name info header container (#10116) * Fix dropdown and multiselect crash on integer labels (#10128) * cast integer labels to string * add null check for label and provide default value for empty labels * empty and null handle for schemas and other values * revert changes * Fix: dark mode on preview names (#10136) * fix: dark mode of preview names * fix background color of preview * fix tjdb query import (#10134) * fix :revert radio button name change (#10153) * Fix: select issue on multiselect (#10137) * remove portal from multiselect * fix: dynamic values for options in dropdown/multiselect * remove fx from default option * Fix: delete on options delete in dropdown (#10192) * fix: delete on options delete * fix: overlapping of multiselect on parent container * fix: outside click of multiselect * hotfix : Table breaking on importing older apps with null value in column (#10185) * fix : table breaking on importing older apps with null value in column * fix : table crash , codehinter not saving values upon page change * remove low priority wrapper from autosave * remove logs * added delay to autosave as callback * fix: dropdown crash on invalid data (#10202) * revert to previous transformation code , fix darkmode color (#10216) * fix : doclink for dropdown (#10217) * fix : Transformations value getting cleared / not getting saved (#10218) * fix : transformation value not getting saved * remove dependency * chore: version update for release --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: vjaris42 <vjy239@gmail.com> Co-authored-by: Kartik Gupta <gupta.kartik18kg@gmail.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Akshay <akshaysasidharan93@gmail.com>
2024-07-01 03:16:22 +00:00
{String(cellValue)}
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
</div>
);
const getOverlay = () => {
return (
<div
className={`overlay-cell-table ${darkMode && 'dark-theme'}`}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{ color: 'var(--text-primary)' }}
>
<span
style={{
width: `${containerWidth}px`,
}}
>
{String(cellValue)}
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
</span>
</div>
);
};
const _showOverlay =
ref?.current &&
(ref?.current?.clientWidth < ref?.current?.children[0]?.offsetWidth ||
ref?.current?.clientHeight < ref?.current?.children[0]?.offsetHeight);
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
return (
<>
<OverlayTrigger
placement="bottom"
overlay={_showOverlay ? getOverlay() : <div></div>}
trigger={_showOverlay && ['hover', 'focus']}
rootClose={true}
show={_showOverlay && showOverlay && !isEditing}
>
{!isEditable ? (
<div
className={`d-flex align-items-center h-100 w-100 justify-content-${determineJustifyContentValue(
horizontalAlignment
)}`}
style={cellStyles}
onMouseMove={() => {
if (!hovered) setHovered(true);
}}
onMouseLeave={() => {
setHovered(false);
}}
ref={ref}
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
>
Fix : Table string column max height not getting applied , ui fixes in image column type (#9436) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * fix : Max column hight is not working in table * Fixed width applied to multiselect popover * fix : Remove height and width from table image column / backward compatibility (#9425) * fix : table column image , remove width and height * optimise * adding default object fit * fix : text is overlaping issue * fix : non editable string column text alignment * remove logs * fix : text overflow * fix : text padding --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> Co-authored-by: Manish Kushare <37823141+manishkushare@users.noreply.github.com>
2024-04-19 12:32:20 +00:00
<span
style={{
maxHeight: isMaxRowHeightAuto
? 'auto'
: maxRowHeightValue
? maxRowHeightValue
: cellSize === 'condensed'
? '39px'
: '45px',
}}
>
{String(cellValue)}
Fix : Table string column max height not getting applied , ui fixes in image column type (#9436) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * fix : Max column hight is not working in table * Fixed width applied to multiselect popover * fix : Remove height and width from table image column / backward compatibility (#9425) * fix : table column image , remove width and height * optimise * adding default object fit * fix : text is overlaping issue * fix : non editable string column text alignment * remove logs * fix : text overflow * fix : text padding --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> Co-authored-by: Manish Kushare <37823141+manishkushare@users.noreply.github.com>
2024-04-19 12:32:20 +00:00
</span>
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
</div>
) : (
<div className="h-100 d-flex flex-column justify-content-center position-relative">
<div
onMouseMove={() => {
if (!hovered) setHovered(true);
}}
onMouseLeave={() => setHovered(false)}
App builder 1.6 integration bug fixes (#9456) * Fix max canvas width select broken * Added padding right instead of setting width to avoid overlapping of numbers on the arrow Added padding right to provide spacing to right side of number container * fix : focusing on any cell of number column type, results into first cell getting focused * fix : text alignment bug in string column type * fixed : text alignmnet of editable div in string column type * Fix : avoid clicking thrice on element to start editing the content * Fix : Overlay issue in deprecated columns * Fix : multiselect deprecated secondary text not appearing on column list * Fix table fixes * fix placeholder in multiselect dynamic options * fix: fix for scrollbar in viewer * fix: integration bugfixes for table (#9457) * change label for link color * remove alt text for cell image * fix : number arrow , labels * limit table popover max height * Bug fixes from appbuilder-1.6 (#9465) * Fix : Selecting same value again is not discarding the selected value in single select * If default options list is empty then return null * Fix : Deleting the default option will rresult into removing from default option list as well * showing error message at the bottom and cell value in the center for text and string column type * Making Pagination aligned in the center horizontally * Fix: Download popup * Fix add new row string text not changing its color in dark mode * Fix date picker on change in add new row not changing when value is empty * fix : table default ui (#9454) * fix : muliselect popover not showing (#9455) * update default number data from string to number (#9467) * Fix in datepicker * fix: add fixed height to error feedback * fix: fixed issue that caused multiselect option delete to fail (#9469) * fix: fixed issue that caused multiselect option delete to fail * refactor: minor code cleanup * Bug Fixes from appbuilder-1.6 (#9470) * Fix : Selecting same value again is not discarding the selected value in single select * If default options list is empty then return null * Fix : Deleting the default option will rresult into removing from default option list as well * showing error message at the bottom and cell value in the center for text and string column type * Making Pagination aligned in the center horizontally * overlay is not showing for string column type * Padding right on number cell * Fix : Table is crashing becasue of null default value * Fix dark mode in dropdown column type --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com> Co-authored-by: Kiran Ashok <stepinfwd@gmail.com> Co-authored-by: Manish Kushare <37823141+manishkushare@users.noreply.github.com>
2024-04-23 13:03:27 +00:00
className={`${!isValid ? 'is-invalid h-100' : ''} ${isEditing ? 'h-100 content-editing' : ''} h-100`}
Table column redesign demo (#8442) * initial commit * redesign column manager * redesign string column type in the table * setting the color of the input field for string column type * setting bg of popover body * design the style tab of string column type * adjusted spaces in the properties and style elements in the column manager * fixed typo error * removed unwanted line * redesign the validation section of number column type manager * added the placeholder value for string column type min and max length in the validation section * replace text with icons for horizontal alignment in the style tab * show delete icon outside of the menu actions for each column in the table inspector * Revert "redesign string column type in the table" This reverts commit a440f3fc238428107032fa017732a78b734e15f3, which made changes for string column type in the table component on the canvas * making flex fill for horizontal alignment icon buttons in the style tab of column manager in the table * Bug fixed: event manager is not working in toggle column type * added decimalPlaces prop to number column manager * added text color and cell background props to style tab of number column manager * added few validations for number * created boolean column type consisting input checkbox working as toggle switch * allow user to select boolean column type from the component manager and display boolean column in the table on the canvas * making boolean component content consistent with the horizontal alignment * making Boolean column type functional adding editable and non-editale content to display on table * fixed horizonta alignment issue for boolean column * Revert "fixed horizonta alignment issue for boolean column" This reverts commit d41499a1edb48c4ecde265e1c296dda7465ed188. * making input elment vertically aligned * added generalised cell interaction * added props for boolean column types in column manager of table * added feature to provide custom bg to toggle switch * removed default value to toggleOnBg and toggleOffBg * conditionally displaying hardcoded value if toggleBg is not available * change the file and component name of existing customSelect to customDropdown * change component name * remove unwanted code * added select option to the column type dropdown field * Created component for select column type * rendering custom select component for select column type * adding border danger for invalid value * redesign column manager for select column type * bug fixed : disabling control to select column type when editable is off * changing the name key to label for select column type options * partially implemented make default option feature * Implemented default option for select column type * added text color prop in a styles tab to select column type * adding indigo color to selected option to select column type menu list * avoid breaking table if array is not provided for dynamicOption field * Organize the column manager and related files * Added validation fields in text column manager * Added text color to text area column type * Added validation to text column type * Avoiding bg to persisit for few column tupes, who dont have background field * bug fixed : other valdiation are not rendering for string column type * bug fixed: on hover always danger border is displayed for each cell * Cell density enhancement * Returning empty array for validationList for few column types * handling validation list by merging organizing-column-manager * Changed the select component in the properties tab of column popover * Changed the UI of validation according to new design also few column popover and action popover UI changes * Adding fx code block in style tab for text color and cell bg color * fixing UI of select column type column manager according to new UI * creating multiselect column and its UI wrt option list * added overlay trigger to multiselect * feat : added design theme new colors * fix : adding new color swatch to input components * fix : colors, number input with height less than 16px and number input arrow in padding none mdode * fix : icon color * few color fixes * overlay trigger for multi-select column type * color picker bug fixed * color changes * column type input text is not consistent with the dark theme- fixed * custom select single value container bug * manking add new row, hide column and download popover background consistent with the dark theme * Making add new row consistent with the updated UI changes * feat : link column type table * fix: default underline color * fix : sentence casing * added missing transformation field * fixes * fixing tab opening condition * fix : backward compatibility * supported multiple badges , tags for cell density propety * added feature to duplicate column * made td container overflow hidden * provided 100% width to Image fit prop in styles tab * oveflow hidden prop changes * revert unwanted change * change the gap between columns in column lists inside table inspector * Deprecate few column types in table * Fix * Fixes * change the functionality of cell density feature * Fix msg * Revamp date picker in table * Fix * fix : darkmode colors * revert * Supported cell density feature for multiple badges * making badges aligned center * madde tags column consistent with cell density feature * Remove imports * enhancing the code density feature * Making radio column consistent with the cell density feature * Fix unixtimestamp * Fix CSS issues * making tags and badges overlay appear only when content is overflowed * CSS fixes * Fix * Fix dark mode issues * making background transparent for deprecating columns making overlay visible on horizontal overflow * New revamped styles * fix box shadow * Migrations to move visibility and disabled states from styles to properties * undo change * refactored custom select component * patch fixes * bug fixed action popover was inconsistent with dark theme * testing * update custom select column type * fixes * Avoided options being populated in columns * removed consoles * making custom select align center vertically * on focus , we used to see on hover effect, avoiding it * Design review changes * Made text and string text-container according to design * vertical positioning of select and multiselect * overlay for deprecated columns * regex placeholder * Icons for number column type * Design feedback changes * Design fixes * box shadow on select menu list in canvas * added missing feature of decimal places and make increment and decrement icon vertically aligned * Fix design issues * Solve lint issues * Design theme revert changes * color of column list on hover and active is updated * fixes * changing the font weight of labels in styles tab of column manager * fix * Revert design theme * label change * horizontal alignment of select and datepicker columns * Reverted back to textarea for text column type * sync package-lock.json * fix import * UI fixes * Css changes * feat: Update default table data (#9312) * updated default table data * fix : table breaking * fix : datepikcer crashing table * fix : data * fix :: table image height (#9307) * fix : Table datepicker UI fixes (#9324) * fix : datepicker ui * update * fix * refactor: removed unused codes * add overlay * add overlay * Fix datepicker when date and time both are disabled * Fix paddings and margins * fix : default states in datepicker in table (#9335) * feat : update default data with images (#9338) * Design feedback * fix multiselect column type issues * Fix datepicker header width * Fix dropdown * Fix options loading state * Fix select issues * Fix multiselect default option * fix overlay trigger multiselect * fix: fixed issue with overlay display and cell content alignment for text * fix: Multiselect popover (#9394) * fix: popover only needed when content overflows * fix * fix: update zindex of edited text column * fix: show overlay when text in string overlay overflows * Fix multiselect default options * fix: show error message for editable string cloumn * Fix date issues * Fix date fixes * fix: more info popup close on mouse leave * Fix unix timestamp issue * Migration: set default demo data for older data (#9423) * fix: backfill old default data if user did not add a data * fix: backfill old default data if user did not add a data * Table column redeisgn demo string fix (#9415) * fix: show error message on table input validations * fix: error message alignments * Fix import issue for datepicker * wrapping the contant of multiselect selected options (#9429) * Fix popover in multiselect * Add multiselect popover only when content wrap is false or max row height is custom * Fix : String column types bug fixes (#9431) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Fixed width applied to multiselect popover * Fixed multiselect popover when content wrap is auto * Fix : arrow indicators vertical alignment in number column (#9440) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * fix : Link column ui bugs , console error fix when hovering table (#9437) * fix : link column ui ux * update icons * Fix: focus editable string column on click of anywhere in cell (#9435) * Bug fixed: Hiding max row height field when content wrap is disabled * Removed border bottom when striped table style is applied * removed unwanted code * Apply hover effect on non-editable cell * Not able to edit the cell if clicked on the edges --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> * fix: number input overlap with increment/decrement button (#9406) * Number input arrow bug (#9441) * Fix: vertcial alignment of arrows * added hover effect on even rows * removed important * number are overflowing on arrows fixed --------- Co-authored-by: manishkushare <kushare.manish9@gmail.com> --------- Co-authored-by: stepinfwd <stepinfwd@gmail.com> Co-authored-by: Nakul Nagargade <nakul@tooljet.com> Co-authored-by: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2024-04-19 11:52:06 +00:00
>
{_renderString()}
</div>
<div className={`${isValid ? '' : 'invalid-feedback text-truncate'} `}>{validationError}</div>
</div>
)}
</OverlayTrigger>
</>
);
};
export default StringColumn;