Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Remove position props from widgets (#26781)

Browse Source
This commit is contained in:
Aswath K 2023-09-13 19:27:42 +05:30 committed by GitHub
parent 2aa5fa97b7
commit fb4149e0e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 208 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/ButtonGroup_MenuButton_Width_spec.js
View File

@ -8,8 +8,6 @@ describe("In a button group widget, menu button width", function () {
it("1. If target width is smaller than min-width, The menu button popover width should be set to minimum width", () => {
cy.get(commonlocators.layoutControls).eq(3).click();
const minWidth = 12 * 12.3125;
const widgetId = "yxjq5sck7d";
// Get the default menu button
cy.get(`.appsmith_widget_${widgetId} div.t--buttongroup-widget`)
@ -18,16 +16,21 @@ describe("In a button group widget, menu button width", function () {
.as("target");
// Open popover
cy.get("@target").click();
// Get the target width
agHelper.GetWidth("@target");
cy.get("@eleWidth").then((targetWidth) => {
expect(targetWidth).to.be.lessThan(minWidth);
// Check if popover width is set to its target width
cy.get(`.bp3-popover2.button-group-${widgetId}`).should(
"have.css",
"width",
`${minWidth}px`,
);
agHelper.GetWidth(commonlocators.canvas);
cy.get("@eleWidth").then((mainCanvasWidth) => {
const minWidth = (12 / 64) * mainCanvasWidth;
// Get the target width
agHelper.GetWidth("@target");
cy.get("@eleWidth").then((targetWidth) => {
expect(targetWidth).to.be.lessThan(minWidth);
// Check if popover width is set to its target width
cy.get(`.bp3-popover2.button-group-${widgetId}`).should(
"have.css",
"width",
`${minWidth}px`,
);
});
});
});

6
app/client/src/WidgetProvider/constants.ts
View File

@ -132,6 +132,8 @@ export type GetCanvasHeightOffset = (widgetProps: WidgetProps) => number;
export const GRID_DENSITY_MIGRATION_V1 = 4;
export const COMPACT_MODE_MIN_ROWS = 4;
export enum BlueprintOperationTypes {
MODIFY_PROPS = "MODIFY_PROPS",
ADD_ACTION = "ADD_ACTION",
@ -198,8 +200,8 @@ export enum AlignWidgetTypes {
RIGHT = "RIGHT",
}
// Minimum Rows for Widget Popups
export const MinimumPopupRows = 12;
// Minimum width for Widget Popups
export const MinimumPopupWidthInPercentage = 18.75;
// Default boxShadowColor used in theming migration
export const rgbaMigrationConstantV56 = "rgba(0, 0, 0, 0.25)";

14
app/client/src/layoutSystems/fixedlayout/index.ts
View File

@ -9,7 +9,6 @@ import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
* utiltiy function to compute a widgets dimensions in Fixed layout system
*
*/
const getFixedLayoutComponentDimensions = ({
bottomRow,
leftColumn,
@ -24,20 +23,31 @@ const getFixedLayoutComponentDimensions = ({
};
};
/**
* getLabelWidth
* utiltiy function to compute a widgets label width in Fixed layout system
*
*/
const getLabelWidth = (props: BaseWidgetProps) => {
return (Number(props.labelWidth) || 0) * props.parentColumnSpace;
};
/**
* getFixedLayoutSystemPropsEnhancer
*
* utiltiy function to enhance BaseWidgetProps with Fixed Layout system specific props
*
*/
const getFixedLayoutSystemPropsEnhancer = (props: BaseWidgetProps) => {
const { componentHeight, componentWidth } =
getFixedLayoutComponentDimensions(props);
const labelComponentWidth = getLabelWidth(props);
return {
...props,
componentHeight,
componentWidth,
labelComponentWidth,
};
};

17
app/client/src/widgets/AudioRecorderWidget/widget/index.tsx
View File

@ -302,17 +302,8 @@ class AudioRecorderWidget extends BaseWidget<
}
getWidgetView() {
const {
blobURL,
bottomRow,
iconColor,
isDisabled,
leftColumn,
parentColumnSpace,
parentRowSpace,
rightColumn,
topRow,
} = this.props;
const { blobURL, componentHeight, componentWidth, iconColor, isDisabled } =
this.props;
return (
<AudioRecorderComponent
@ -320,12 +311,12 @@ class AudioRecorderWidget extends BaseWidget<
blobUrl={blobURL}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
height={(bottomRow - topRow) * parentRowSpace}
height={componentHeight}
iconColor={iconColor}
isDisabled={isDisabled}
onRecordingComplete={this.handleRecordingComplete}
onRecordingStart={this.handleRecordingStart}
width={(rightColumn - leftColumn) * parentColumnSpace}
width={componentWidth}
/>
);
}

3
app/client/src/widgets/BaseInputWidget/widget/index.tsx
View File

@ -620,7 +620,7 @@ class BaseInputWidget<
labelStyle={this.props.labelStyle}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
maxChars={this.props.maxChars}
multiline={this.props.multiline}
onFocusChange={this.props.onFocusChange}
@ -668,6 +668,7 @@ export interface BaseInputWidgetProps extends WidgetProps {
iconName?: IconName;
iconAlign?: Omit<Alignment, "center">;
onSubmit?: string;
labelComponentWidth?: number;
}
export default BaseInputWidget;

4
app/client/src/widgets/BaseWidget.tsx
View File

@ -319,10 +319,6 @@ abstract class BaseWidget<
return this.props.referencedWidgetId || this.props.widgetId;
};
getLabelWidth = () => {
return (Number(this.props.labelWidth) || 0) * this.props.parentColumnSpace;
};
render() {
return this.getWidgetView();
}

8
app/client/src/widgets/ButtonGroupWidget/widget/index.tsx
View File

@ -9,7 +9,7 @@ import { get } from "lodash";
import React from "react";
import type { WidgetProps, WidgetState } from "widgets/BaseWidget";
import BaseWidget from "widgets/BaseWidget";
import { MinimumPopupRows } from "WidgetProvider/constants";
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
import ButtonGroupComponent from "../component";
import { getStylesheetValue } from "./helpers";
import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
@ -19,7 +19,7 @@ import { klona as clone } from "klona/full";
import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants";
import { BlueprintOperationTypes } from "WidgetProvider/constants";
import IconSVG from "../icon.svg";
import { WIDGET_TAGS } from "constants/WidgetConstants";
import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants";
class ButtonGroupWidget extends BaseWidget<
ButtonGroupWidgetProps,
@ -771,7 +771,9 @@ class ButtonGroupWidget extends BaseWidget<
getWidgetView() {
const { componentWidth } = this.props;
const minPopoverWidth = MinimumPopupRows * this.props.parentColumnSpace;
const minPopoverWidth =
(MinimumPopupWidthInPercentage / 100) *
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
return (
<ButtonGroupComponent

13
app/client/src/widgets/CameraWidget/widget/index.tsx
View File

@ -321,22 +321,17 @@ class CameraWidget extends BaseWidget<CameraWidgetProps, WidgetState> {
getWidgetView() {
const {
bottomRow,
componentHeight,
componentWidth,
defaultCamera,
isDisabled,
isMirrored,
leftColumn,
mode,
parentColumnSpace,
parentRowSpace,
rightColumn,
topRow,
videoBlobURL,
} = this.props;
const height = (bottomRow - topRow) * parentRowSpace - WIDGET_PADDING * 2;
const width =
(rightColumn - leftColumn) * parentColumnSpace - WIDGET_PADDING * 2;
const height = componentHeight - WIDGET_PADDING * 2;
const width = componentWidth - WIDGET_PADDING * 2;
return (
<CameraComponent

2
app/client/src/widgets/CategorySliderWidget/widget/index.tsx
View File

@ -253,7 +253,7 @@ class CategorySliderWidget extends BaseWidget<
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
loading={this.props.isLoading}
marks={sliderOptions}
max={stepSize * sliderOptions.length}

4
app/client/src/widgets/ChartWidget/widget/index.tsx
View File

@ -229,7 +229,6 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
<ChartComponent
allowScroll={this.props.allowScroll}
borderRadius={this.props.borderRadius}
bottomRow={this.props.bottomRow}
boxShadow={this.props.boxShadow}
chartData={this.props.chartData}
chartName={this.props.chartName}
@ -243,13 +242,10 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
isVisible={this.props.isVisible}
key={this.props.widgetId}
labelOrientation={this.props.labelOrientation}
leftColumn={this.props.leftColumn}
onDataPointClick={this.onDataPointClick}
primaryColor={this.props.accentColor ?? Colors.ROYAL_BLUE_2}
rightColumn={this.props.rightColumn}
setAdaptiveYMin={this.props.setAdaptiveYMin}
showDataPointLabel={this.props.showDataPointLabel}
topRow={this.props.topRow}
widgetId={this.props.widgetId}
xAxisName={this.props.xAxisName}
yAxisName={this.props.yAxisName}

15
app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx
View File

@ -15,10 +15,10 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import type { DerivedPropertiesMap } from "WidgetProvider/factory";
import type { WidgetProps, WidgetState } from "widgets/BaseWidget";
import BaseWidget from "widgets/BaseWidget";
import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import CheckboxGroupComponent from "../component";
import type { OptionProps, SelectAllState } from "../constants";
@ -630,17 +630,13 @@ class CheckboxGroupWidget extends BaseWidget<
}
getWidgetView() {
const { componentHeight } = this.props;
return (
<CheckboxGroupComponent
accentColor={this.props.accentColor}
borderRadius={this.props.borderRadius}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
isDisabled={this.props.isDisabled}
isDynamicHeightEnabled={isAutoHeightEnabledForWidget(this.props)}
isInline={this.props.isInline}
@ -655,7 +651,7 @@ class CheckboxGroupWidget extends BaseWidget<
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
minWidth={this.props.minWidth}
onChange={this.handleCheckboxChange}
onSelectAllChange={this.handleSelectAllChange}
@ -741,6 +737,7 @@ export interface CheckboxGroupWidgetProps extends WidgetProps {
labelStyle?: string;
accentColor: string;
borderRadius: string;
labelComponentWidth?: number;
}
export default CheckboxGroupWidget;

13
app/client/src/widgets/CurrencyInputWidget/widget/index.tsx
View File

@ -26,12 +26,12 @@ import {
limitDecimalValue,
} from "../component/utilities";
import { getLocale, mergeWidgetConfig } from "utils/helpers";
import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants";
import {
getLocaleDecimalSeperator,
getLocaleThousandSeparator,
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type { SetterConfig, Stylesheet } from "entities/AppTheming";
import { NumberInputStepButtonPosition } from "widgets/BaseInputWidget/constants";
@ -578,6 +578,7 @@ class CurrencyInputWidget extends BaseInputWidget<
if (this.props.isRequired && value.length === 0) {
conditionalProps.errorMessage = createMessage(FIELD_REQUIRED_ERROR);
}
const { componentHeight } = this.props;
if (this.props.showStepArrows) {
conditionalProps.buttonPosition = NumberInputStepButtonPosition.RIGHT;
@ -592,13 +593,7 @@ class CurrencyInputWidget extends BaseInputWidget<
autoFocus={this.props.autoFocus}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
currencyCode={currencyCode}
decimals={this.props.decimals}
defaultValue={this.props.defaultText}
@ -616,7 +611,7 @@ class CurrencyInputWidget extends BaseInputWidget<
labelStyle={this.props.labelStyle}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
onCurrencyTypeChange={this.onCurrencyTypeChange}
onFocusChange={this.handleFocusChange}
onKeyDown={this.handleKeyDown}

15
app/client/src/widgets/DatePickerWidget2/widget/index.tsx
View File

@ -12,10 +12,10 @@ import type { DerivedPropertiesMap } from "WidgetProvider/factory";
import { Alignment } from "@blueprintjs/core";
import { LabelPosition } from "components/constants";
import type { SetterConfig, Stylesheet } from "entities/AppTheming";
import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type { DatePickerType } from "../constants";
import { TimePrecision } from "../constants";
@ -649,6 +649,8 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
}
getWidgetView() {
const { componentHeight } = this.props;
return (
<DatePickerComponent
accentColor={this.props.accentColor}
@ -656,13 +658,7 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
closeOnSelection={this.props.closeOnSelection}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
dateFormat={this.props.dateFormat}
datePickerType="DATE_PICKER"
firstDayOfWeek={this.props.firstDayOfWeek}
@ -677,7 +673,7 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
maxDate={this.props.maxDate}
minDate={this.props.minDate}
onBlur={this.onBlur}
@ -757,6 +753,7 @@ export interface DatePickerWidget2Props extends WidgetProps {
timePrecision: TimePrecision;
onFocus?: string;
onBlur?: string;
labelComponentWidth?: number;
}
export default DatePickerWidget;

26
app/client/src/widgets/DropdownWidget/widget/index.tsx
View File

@ -9,20 +9,21 @@ import type { ValidationResponse } from "constants/WidgetValidation";
import { ValidationTypes } from "constants/WidgetValidation";
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import {
MinimumPopupRows,
GRID_DENSITY_MIGRATION_V1,
} from "WidgetProvider/constants";
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
import { LabelPosition } from "components/constants";
import { Alignment } from "@blueprintjs/core";
import type { Stylesheet } from "entities/AppTheming";
import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
import {
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type {
AutocompletionDefinitions,
PropertyUpdates,
SnipingModeProperty,
} from "WidgetProvider/constants";
import IconSVG from "../icon.svg";
import { layoutConfigurations } from "constants/WidgetConstants";
function defaultOptionValueValidation(value: unknown): ValidationResponse {
if (typeof value === "string") return { isValid: true, parsed: value.trim() };
@ -484,7 +485,9 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
const options = _.isArray(this.props.options) ? this.props.options : [];
const isInvalid =
"isValid" in this.props && !this.props.isValid && !!this.props.isDirty;
const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace;
const dropDownWidth =
(MinimumPopupWidthInPercentage / 100) *
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
const selectedIndex = _.findIndex(this.props.options, {
value: this.props.selectedOptionValue,
@ -497,13 +500,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
backgroundColor={this.props.backgroundColor}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
disabled={this.props.isDisabled}
dropDownWidth={dropDownWidth}
hasError={isInvalid}
@ -517,7 +514,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
onFilterChange={this.onFilterChange}
onOptionSelected={this.onOptionSelected}
options={options}
@ -597,6 +594,7 @@ export interface DropdownWidgetProps extends WidgetProps {
accentColor: string;
fontFamily?: string;
isDirty?: boolean;
labelComponentWidth?: number;
}
export default DropdownWidget;

13
app/client/src/widgets/IconButtonWidget/widget/index.tsx
View File

@ -19,6 +19,8 @@ import IconSVG from "../icon.svg";
import { WIDGET_TAGS } from "constants/WidgetConstants";
const ICON_BUTTON_SIZE_IN_AUTOLAYOUT = 32;
const ICON_NAMES = Object.keys(IconNames).map(
(name: string) => IconNames[name as keyof typeof IconNames],
);
@ -299,6 +301,7 @@ class IconButtonWidget extends BaseWidget<IconButtonWidgetProps, WidgetState> {
tooltip,
widgetId,
} = this.props;
const { componentHeight, componentWidth } = this.props;
return (
<IconButtonComponent
@ -309,9 +312,8 @@ class IconButtonWidget extends BaseWidget<IconButtonWidgetProps, WidgetState> {
hasOnClickAction={!!this.props.onClick}
height={
this.isAutoLayoutMode
? 32
: (this.props.bottomRow - this.props.topRow) *
this.props.parentRowSpace
? ICON_BUTTON_SIZE_IN_AUTOLAYOUT
: componentHeight
}
iconName={iconName}
isDisabled={isDisabled}
@ -324,9 +326,8 @@ class IconButtonWidget extends BaseWidget<IconButtonWidgetProps, WidgetState> {
widgetId={widgetId}
width={
this.isAutoLayoutMode
? 32
: (this.props.rightColumn - this.props.leftColumn) *
this.props.parentColumnSpace
? ICON_BUTTON_SIZE_IN_AUTOLAYOUT
: componentWidth
}
/>
);

31
app/client/src/widgets/InputWidget/widget/index.tsx
View File

@ -4,7 +4,7 @@ import BaseWidget from "widgets/BaseWidget";
import { Alignment } from "@blueprintjs/core";
import type { IconName } from "@blueprintjs/icons";
import type { TextSize } from "constants/WidgetConstants";
import { RenderModes } from "constants/WidgetConstants";
import { GridDefaults, RenderModes } from "constants/WidgetConstants";
import type { InputComponentProps } from "../component";
import InputComponent from "../component";
import type { ExecutionResult } from "constants/AppsmithActionConstants/ActionConstants";
@ -19,7 +19,7 @@ import {
import type { DerivedPropertiesMap } from "WidgetProvider/factory";
import type { InputType } from "../constants";
import { InputTypes } from "../constants";
import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants";
import { COMPACT_MODE_MIN_ROWS } from "WidgetProvider/constants";
import { ISDCodeDropdownOptions } from "../component/ISDCodeDropdown";
import { CurrencyDropdownOptions } from "../component/CurrencyCodeDropdown";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
@ -31,7 +31,10 @@ import {
import { LabelPosition } from "components/constants";
import type { SetterConfig, Stylesheet } from "entities/AppTheming";
import { checkInputTypeTextByProps } from "widgets/BaseInputWidget/utils";
import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
import {
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type {
AutocompletionDefinitions,
PropertyUpdates,
@ -977,12 +980,13 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
}
if (this.props.maxNum) conditionalProps.maxNum = this.props.maxNum;
if (this.props.minNum) conditionalProps.minNum = this.props.minNum;
const { componentHeight } = this.props;
const minInputSingleLineHeight =
this.props.label || this.props.tooltip
? // adjust height for label | tooltip extra div
GRID_DENSITY_MIGRATION_V1 + 4
COMPACT_MODE_MIN_ROWS + 4
: // GRID_DENSITY_MIGRATION_V1 used to adjust code as per new scaled canvas.
GRID_DENSITY_MIGRATION_V1;
COMPACT_MODE_MIN_ROWS;
return (
<InputComponent
@ -993,13 +997,7 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
// show label and Input side by side if true
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
currencyCountryCode={currencyCountryCode}
decimalsInCurrency={this.props.decimalsInCurrency}
defaultValue={this.props.defaultText}
@ -1016,11 +1014,11 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
labelStyle={this.props.labelStyle}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelWidth={(this.props.labelWidth || 0) * this.props.parentColumnSpace}
labelWidth={this.props.labelComponentWidth}
multiline={
(this.props.bottomRow - this.props.topRow) /
minInputSingleLineHeight >
1 && this.props.inputType === "TEXT"
componentHeight >
minInputSingleLineHeight * GridDefaults.DEFAULT_GRID_ROW_HEIGHT &&
this.props.inputType === "TEXT"
}
onCurrencyTypeChange={this.onCurrencyTypeChange}
onFocusChange={this.handleFocusChange}
@ -1086,6 +1084,7 @@ export interface InputWidgetProps extends WidgetProps {
borderRadius: string;
boxShadow?: string;
primaryColor: string;
labelComponentWidth?: number;
}
export default InputWidget;

20
app/client/src/widgets/InputWidgetV2/widget/index.tsx
View File

@ -14,10 +14,7 @@ import {
INPUT_TEXT_MAX_CHAR_ERROR,
} from "@appsmith/constants/messages";
import type { DerivedPropertiesMap } from "WidgetProvider/factory";
import {
GRID_DENSITY_MIGRATION_V1,
ICON_NAMES,
} from "WidgetProvider/constants";
import { ICON_NAMES } from "WidgetProvider/constants";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import BaseInputWidget from "widgets/BaseInputWidget";
import { isNil, isNumber, merge, toString } from "lodash";
@ -33,6 +30,7 @@ import { getParsedText, isInputTypeEmailOrPassword } from "./Utilities";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import { checkInputTypeTextByProps } from "widgets/BaseInputWidget/utils";
import type { AutocompletionDefinitions } from "WidgetProvider/constants";
@ -798,11 +796,15 @@ class InputWidget extends BaseInputWidget<InputWidgetProps, WidgetState> {
} else {
conditionalProps.buttonPosition = NumberInputStepButtonPosition.NONE;
}
const { componentHeight } = this.props;
const autoFillProps =
!this.props.shouldAllowAutofill &&
isInputTypeEmailOrPassword(this.props.inputType)
? { autoComplete: "off" }
: {};
return (
<InputComponent
accentColor={this.props.accentColor}
@ -811,13 +813,7 @@ class InputWidget extends BaseInputWidget<InputWidgetProps, WidgetState> {
autoFocus={this.props.autoFocus}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
defaultValue={this.props.defaultText}
disableNewLineOnPressEnterKey={!!this.props.onSubmit}
disabled={this.props.isDisabled}
@ -833,7 +829,7 @@ class InputWidget extends BaseInputWidget<InputWidgetProps, WidgetState> {
labelStyle={this.props.labelStyle}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
multiline={this.props.inputType === InputTypes.MULTI_LINE_TEXT}
onFocusChange={this.handleFocusChange}
onKeyDown={this.handleKeyDown}

8
app/client/src/widgets/MenuButtonWidget/widget/index.tsx
View File

@ -5,7 +5,7 @@ import { isArray, orderBy } from "lodash";
import { default as React } from "react";
import type { WidgetState } from "widgets/BaseWidget";
import BaseWidget from "widgets/BaseWidget";
import { MinimumPopupRows } from "WidgetProvider/constants";
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
import MenuButtonComponent from "../component";
import type { MenuButtonWidgetProps, MenuItem } from "../constants";
import { MenuItemsSource } from "../constants";
@ -15,7 +15,7 @@ import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
import type { AutocompletionDefinitions } from "WidgetProvider/constants";
import IconSVG from "../icon.svg";
import { ButtonPlacementTypes, ButtonVariantTypes } from "components/constants";
import { WIDGET_TAGS } from "constants/WidgetConstants";
import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants";
class MenuButtonWidget extends BaseWidget<MenuButtonWidgetProps, WidgetState> {
static type = "MENU_BUTTON_WIDGET";
@ -215,7 +215,9 @@ class MenuButtonWidget extends BaseWidget<MenuButtonWidgetProps, WidgetState> {
getWidgetView() {
const { componentWidth } = this.props;
const menuDropDownWidth = MinimumPopupRows * this.props.parentColumnSpace;
const menuDropDownWidth =
(MinimumPopupWidthInPercentage / 100) *
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
return (
<MenuButtonComponent

26
app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx
View File

@ -16,13 +16,11 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils";
import type { WidgetProps, WidgetState } from "widgets/BaseWidget";
import BaseWidget from "widgets/BaseWidget";
import {
GRID_DENSITY_MIGRATION_V1,
MinimumPopupRows,
} from "WidgetProvider/constants";
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import MultiTreeSelectComponent from "../component";
import derivedProperties from "./parseDerivedProperties";
@ -32,7 +30,7 @@ import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import IconSVG from "../icon.svg";
import { WIDGET_TAGS } from "constants/WidgetConstants";
import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants";
function defaultOptionValueValidation(value: unknown): ValidationResponse {
let values: string[] = [];
@ -684,23 +682,20 @@ class MultiSelectTreeWidget extends BaseWidget<
getWidgetView() {
const options = isArray(this.props.options) ? this.props.options : [];
const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace;
const { componentWidth } = this.props;
const dropDownWidth =
(MinimumPopupWidthInPercentage / 100) *
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
const { componentHeight, componentWidth } = this.props;
const isInvalid =
"isValid" in this.props && !this.props.isValid && !!this.props.isDirty;
return (
<MultiTreeSelectComponent
accentColor={this.props.accentColor}
allowClear={this.props.allowClear}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
disabled={this.props.isDisabled ?? false}
dropDownWidth={dropDownWidth}
dropdownStyle={{
@ -717,7 +712,7 @@ class MultiSelectTreeWidget extends BaseWidget<
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
loading={this.props.isLoading}
mode={this.props.mode}
onChange={this.onOptionChange}
@ -810,6 +805,7 @@ export interface MultiSelectTreeWidgetProps extends WidgetProps {
boxShadow?: string;
accentColor: string;
isDirty: boolean;
labelComponentWidth?: number;
}
export default MultiSelectTreeWidget;

28
app/client/src/widgets/MultiSelectWidget/widget/index.tsx
View File

@ -13,16 +13,17 @@ import type { SetterConfig, Stylesheet } from "entities/AppTheming";
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
import type { DraftValueType } from "rc-select/lib/Select";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import {
GRID_DENSITY_MIGRATION_V1,
MinimumPopupRows,
} from "WidgetProvider/constants";
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
import MultiSelectComponent from "../component";
import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
import {
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type { AutocompletionDefinitions } from "WidgetProvider/constants";
import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants";
import IconSVG from "../icon.svg";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { layoutConfigurations } from "constants/WidgetConstants";
function defaultOptionValueValidation(value: unknown): ValidationResponse {
let values: string[] = [];
@ -520,8 +521,10 @@ class MultiSelectWidget extends BaseWidget<
const values: string[] = isArray(this.props.selectedOptionValues)
? this.props.selectedOptionValues
: [];
const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace;
const { componentWidth } = this.props;
const dropDownWidth =
(MinimumPopupWidthInPercentage / 100) *
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
const { componentHeight, componentWidth } = this.props;
return (
<MultiSelectComponent
@ -529,13 +532,7 @@ class MultiSelectWidget extends BaseWidget<
allowSelectAll={this.props.allowSelectAll}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
disabled={this.props.isDisabled ?? false}
dropDownWidth={dropDownWidth}
dropdownStyle={{
@ -548,7 +545,7 @@ class MultiSelectWidget extends BaseWidget<
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
loading={this.props.isLoading}
onChange={this.onOptionChange}
onFilterChange={this.onFilterChange}
@ -622,6 +619,7 @@ export interface MultiSelectWidgetProps extends WidgetProps {
labelPosition?: LabelPosition;
labelAlignment?: Alignment;
labelWidth?: number;
labelComponentWidth?: number;
}
export default MultiSelectWidget;

26
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx
View File

@ -13,13 +13,11 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils";
import type { WidgetProps, WidgetState } from "widgets/BaseWidget";
import BaseWidget from "widgets/BaseWidget";
import {
GRID_DENSITY_MIGRATION_V1,
MinimumPopupRows,
} from "WidgetProvider/constants";
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import MultiSelectComponent from "../component";
import derivedProperties from "./parseDerivedProperties";
@ -45,7 +43,7 @@ import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import IconSVG from "../icon.svg";
import { WIDGET_TAGS } from "constants/WidgetConstants";
import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants";
class MultiSelectWidget extends BaseWidget<
MultiSelectWidgetProps,
@ -781,24 +779,21 @@ class MultiSelectWidget extends BaseWidget<
getWidgetView() {
const options = isArray(this.props.options) ? this.props.options : [];
const minDropDownWidth = MinimumPopupRows * this.props.parentColumnSpace;
const { componentWidth } = this.props;
const minDropDownWidth =
(MinimumPopupWidthInPercentage / 100) *
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
const { componentHeight, componentWidth } = this.props;
const values = this.mergeLabelAndValue();
const isInvalid =
"isValid" in this.props && !this.props.isValid && !!this.props.isDirty;
return (
<MultiSelectComponent
accentColor={this.props.accentColor}
allowSelectAll={this.props.allowSelectAll}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
disabled={this.props.isDisabled ?? false}
dropDownWidth={minDropDownWidth}
dropdownStyle={{
@ -815,7 +810,7 @@ class MultiSelectWidget extends BaseWidget<
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
loading={this.props.isLoading}
onChange={this.onOptionChange}
onDropdownClose={this.onDropdownClose}
@ -930,6 +925,7 @@ export interface MultiSelectWidgetProps extends WidgetProps {
labelAlignment?: Alignment;
labelWidth?: number;
isDirty?: boolean;
labelComponentWidth?: number;
}
export default MultiSelectWidget;

3
app/client/src/widgets/NumberSliderWidget/component/Slider.tsx
View File

@ -82,6 +82,9 @@ export interface SliderComponentProps
/** determines whether to display mark labels or only marks */
showMarksLabel: boolean;
/** Width of the Label in pixels, used only when Position is Left */
labelComponentWidth?: number;
}
const SliderComponent = (props: SliderComponentProps) => {

2
app/client/src/widgets/NumberSliderWidget/widget/index.tsx
View File

@ -221,7 +221,7 @@ class NumberSliderWidget extends BaseWidget<
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
loading={this.props.isLoading}
// If showMarks is off don't show marks at all
marks={this.props.showMarksLabel ? this.props.marks : []}

13
app/client/src/widgets/PhoneInputWidget/widget/index.tsx
View File

@ -24,11 +24,11 @@ import type { CountryCode } from "libphonenumber-js";
import { AsYouType, parseIncompletePhoneNumber } from "libphonenumber-js";
import * as Sentry from "@sentry/react";
import log from "loglevel";
import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants";
import type { SetterConfig, Stylesheet } from "entities/AppTheming";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type { AutocompletionDefinitions } from "WidgetProvider/constants";
import { LabelPosition } from "components/constants";
@ -462,6 +462,7 @@ class PhoneInputWidget extends BaseInputWidget<
if (this.props.isRequired && value.length === 0) {
conditionalProps.errorMessage = createMessage(FIELD_REQUIRED_ERROR);
}
const { componentHeight } = this.props;
return (
<PhoneInputComponent
@ -470,13 +471,7 @@ class PhoneInputWidget extends BaseInputWidget<
autoFocus={this.props.autoFocus}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
countryCode={countryCode}
defaultValue={this.props.defaultText}
dialCode={this.props.dialCode}
@ -494,7 +489,7 @@ class PhoneInputWidget extends BaseInputWidget<
labelStyle={this.props.labelStyle}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
onFocusChange={this.handleFocusChange}
onISDCodeChange={this.onISDCodeChange}
onKeyDown={this.handleKeyDown}

5
app/client/src/widgets/QRGeneratorWidget/component/index.tsx
View File

@ -25,11 +25,6 @@ export interface TextComponentProps extends ComponentProps {
borderColor?: Color;
borderWidth?: number;
overflow: OverflowTypes;
// helpers to detect and re-calculate content width
bottomRow?: number;
leftColumn?: number;
rightColumn?: number;
topRow?: number;
}
type State = {

4
app/client/src/widgets/QRGeneratorWidget/widget/index.tsx
View File

@ -659,20 +659,16 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
>
<TextComponent
backgroundColor={this.props.backgroundColor}
bottomRow={this.props.bottomRow}
disableLink={disableLink}
fontFamily={this.props.fontFamily}
fontSize={this.props.fontSize}
fontStyle={this.props.fontStyle}
isLoading={this.props.isLoading}
key={this.props.widgetId}
leftColumn={this.props.leftColumn}
overflow={this.props.overflow}
rightColumn={this.props.rightColumn}
text={this.props.text}
textAlign={this.props.textAlign ? this.props.textAlign : "LEFT"}
textColor={this.props.textColor}
topRow={this.props.topRow}
truncateButtonColor={this.props.truncateButtonColor}
widgetId={this.props.widgetId}
/>

9
app/client/src/widgets/RadioGroupWidget/widget/index.tsx
View File

@ -10,10 +10,10 @@ import { ValidationTypes } from "constants/WidgetValidation";
import type { SetterConfig, Stylesheet } from "entities/AppTheming";
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type { WidgetProps, WidgetState } from "../../BaseWidget";
import BaseWidget from "../../BaseWidget";
@ -690,7 +690,6 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
getWidgetView() {
const {
alignment,
bottomRow,
isDisabled,
isInline,
isLoading,
@ -702,7 +701,6 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
labelTextSize,
options,
selectedOptionValue,
topRow,
widgetId,
} = this.props;
@ -712,7 +710,7 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
<RadioGroupComponent
accentColor={this.props.accentColor}
alignment={alignment}
compactMode={!((bottomRow - topRow) / GRID_DENSITY_MIGRATION_V1 > 1)}
compactMode={isCompactMode(componentHeight)}
disabled={isDisabled}
height={componentHeight}
inline={Boolean(isInline)}
@ -725,7 +723,7 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
labelTextColor={labelTextColor}
labelTextSize={labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
loading={isLoading}
onRadioSelectionChange={this.onRadioSelectionChange}
options={isArray(options) ? compact(options) : []}
@ -776,6 +774,7 @@ export interface RadioGroupWidgetProps extends WidgetProps {
labelStyle?: string;
isDirty: boolean;
accentColor: string;
labelComponentWidth?: number;
}
export default RadioGroupWidget;

3
app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx
View File

@ -96,6 +96,9 @@ export interface RangeSliderComponentProps
/** Loading property internal to every widget */
loading: boolean;
/** Width of the Label in pixels, used only when Position is Left */
labelComponentWidth?: number;
}
const RangeSliderComponent = (props: RangeSliderComponentProps) => {

2
app/client/src/widgets/RangeSliderWidget/widget/index.tsx
View File

@ -248,7 +248,7 @@ class RangeSliderWidget extends BaseWidget<
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
// If showMarks is off don't show marks at all
loading={this.props.isLoading}
marks={this.props.showMarksLabel ? this.props.marks : []}

4
app/client/src/widgets/RateWidget/component/index.tsx
View File

@ -81,10 +81,6 @@ export interface RateComponentProps extends ComponentProps {
inactiveColor?: string;
isAllowHalf?: boolean;
readonly?: boolean;
leftColumn?: number;
rightColumn?: number;
topRow?: number;
bottomRow?: number;
minHeight?: number;
}

4
app/client/src/widgets/RateWidget/widget/index.tsx
View File

@ -445,21 +445,17 @@ class RateWidget extends BaseWidget<RateWidgetProps, WidgetState> {
(this.props.rate || this.props.rate === 0) && (
<RateComponent
activeColor={this.props.activeColor}
bottomRow={this.props.bottomRow}
inactiveColor={this.props.inactiveColor}
isAllowHalf={this.props.isAllowHalf}
isDisabled={this.props.isDisabled}
isLoading={this.props.isLoading}
key={this.props.widgetId}
leftColumn={this.props.leftColumn}
maxCount={this.props.maxCount}
minHeight={this.props.minHeight}
onValueChanged={this.valueChangedHandler}
readonly={this.props.isReadOnly}
rightColumn={this.props.rightColumn}
size={this.props.size}
tooltips={this.props.tooltips}
topRow={this.props.topRow}
value={this.props.rate}
widgetId={this.props.widgetId}
/>

14
app/client/src/widgets/RichTextEditorWidget/widget/index.tsx
View File

@ -8,10 +8,10 @@ import React, { lazy, Suspense } from "react";
import showdown from "showdown";
import { retryPromise } from "utils/AppsmithUtils";
import type { DerivedPropertiesMap } from "WidgetProvider/factory";
import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type { WidgetProps, WidgetState } from "../../BaseWidget";
import BaseWidget from "../../BaseWidget";
@ -510,19 +510,14 @@ class RichTextEditorWidget extends BaseWidget<
if (this.props.inputType === RTEFormats.MARKDOWN) {
value = converter.makeHtml(value);
}
const { componentHeight } = this.props;
return (
<Suspense fallback={<Skeleton />}>
<RichTextEditorComponent
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
isDisabled={this.props.isDisabled}
isDynamicHeightEnabled={isAutoHeightEnabledForWidget(this.props)}
isMarkdown={this.props.inputType === RTEFormats.MARKDOWN}
@ -537,7 +532,7 @@ class RichTextEditorWidget extends BaseWidget<
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
onValueChange={this.onValueChange}
placeholder={this.props.placeholder}
value={value}
@ -568,6 +563,7 @@ export interface RichTextEditorWidgetProps extends WidgetProps {
labelTextSize?: TextSize;
labelStyle?: string;
isDirty: boolean;
labelComponentWidth?: number;
}
export default RichTextEditorWidget;

23
app/client/src/widgets/SelectWidget/widget/index.tsx
View File

@ -9,13 +9,11 @@ import { findIndex, isArray, isNil, isNumber, isString } from "lodash";
import React from "react";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils";
import {
GRID_DENSITY_MIGRATION_V1,
MinimumPopupRows,
} from "WidgetProvider/constants";
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import type { WidgetProps, WidgetState } from "../../BaseWidget";
import BaseWidget from "../../BaseWidget";
@ -43,7 +41,7 @@ import type {
WidgetQueryGenerationFormConfig,
} from "WidgetQueryGenerators/types";
import { DynamicHeight } from "utils/WidgetFeatures";
import { WIDGET_TAGS } from "constants/WidgetConstants";
import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants";
import type {
@ -772,7 +770,9 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
const options = isArray(this.props.options) ? this.props.options : [];
const isInvalid =
"isValid" in this.props && !this.props.isValid && !!this.props.isDirty;
const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace;
const dropDownWidth =
(MinimumPopupWidthInPercentage / 100) *
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
const selectedIndex = findIndex(this.props.options, {
value: this.props.selectedOptionValue,
@ -783,13 +783,7 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
accentColor={this.props.accentColor}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
disabled={this.props.isDisabled}
dropDownWidth={dropDownWidth}
filterText={this.props.filterText}
@ -807,7 +801,7 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
onDropdownClose={this.onDropdownClose}
onDropdownOpen={this.onDropdownOpen}
onFilterChange={this.onFilterChange}
@ -914,6 +908,7 @@ export interface SelectWidgetProps extends WidgetProps {
onFilterUpdate: string;
isDirty?: boolean;
filterText: string;
labelComponentWidth?: number;
}
export default SelectWidget;

26
app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx
View File

@ -15,13 +15,11 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import type { WidgetProps, WidgetState } from "widgets/BaseWidget";
import BaseWidget from "widgets/BaseWidget";
import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils";
import {
GRID_DENSITY_MIGRATION_V1,
MinimumPopupRows,
} from "WidgetProvider/constants";
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
import {
isAutoHeightEnabledForWidget,
DefaultAutocompleteDefinitions,
isCompactMode,
} from "widgets/WidgetUtils";
import SingleSelectTreeComponent from "../component";
import derivedProperties from "./parseDerivedProperties";
@ -31,7 +29,7 @@ import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import IconSVG from "../icon.svg";
import { WIDGET_TAGS } from "constants/WidgetConstants";
import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants";
function defaultOptionValueValidation(value: unknown): ValidationResponse {
if (typeof value === "string") return { isValid: true, parsed: value.trim() };
@ -647,21 +645,18 @@ class SingleSelectTreeWidget extends BaseWidget<
const options = isArray(this.props.options) ? this.props.options : [];
const isInvalid =
"isValid" in this.props && !this.props.isValid && !!this.props.isDirty;
const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace;
const { componentWidth } = this.props;
const dropDownWidth =
(MinimumPopupWidthInPercentage / 100) *
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
const { componentHeight, componentWidth } = this.props;
return (
<SingleSelectTreeComponent
accentColor={this.props.accentColor}
allowClear={this.props.allowClear}
borderRadius={this.props.borderRadius}
boxShadow={this.props.boxShadow}
compactMode={
!(
(this.props.bottomRow - this.props.topRow) /
GRID_DENSITY_MIGRATION_V1 >
1
)
}
compactMode={isCompactMode(componentHeight)}
disabled={this.props.isDisabled ?? false}
dropDownWidth={dropDownWidth}
dropdownStyle={{
@ -678,7 +673,7 @@ class SingleSelectTreeWidget extends BaseWidget<
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
loading={this.props.isLoading}
onChange={this.onOptionChange}
onDropdownClose={this.onDropdownClose}
@ -773,6 +768,7 @@ export interface SingleSelectTreeWidgetProps extends WidgetProps {
boxShadow?: string;
accentColor: string;
isDirty?: boolean;
labelComponentWidth?: number;
}
export default SingleSelectTreeWidget;

13
app/client/src/widgets/SwitchGroupWidget/widget/index.tsx
View File

@ -11,8 +11,10 @@ import BaseWidget from "widgets/BaseWidget";
import { LabelPosition } from "components/constants";
import type { TextSize } from "constants/WidgetConstants";
import type { SetterConfig, Stylesheet } from "entities/AppTheming";
import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants";
import { isAutoHeightEnabledForWidget } from "widgets/WidgetUtils";
import {
isAutoHeightEnabledForWidget,
isCompactMode,
} from "widgets/WidgetUtils";
import type { OptionProps } from "../component";
import SwitchGroupComponent from "../component";
import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils";
@ -533,7 +535,6 @@ class SwitchGroupWidget extends BaseWidget<
const {
accentColor,
alignment,
bottomRow,
isDisabled,
isInline,
isRequired,
@ -547,7 +548,6 @@ class SwitchGroupWidget extends BaseWidget<
labelTooltip,
options,
selectedValues,
topRow,
widgetId,
} = this.props;
@ -566,7 +566,7 @@ class SwitchGroupWidget extends BaseWidget<
<SwitchGroupComponent
accentColor={accentColor}
alignment={alignment}
compactMode={!((bottomRow - topRow) / GRID_DENSITY_MIGRATION_V1 > 1)}
compactMode={isCompactMode(componentHeight)}
disabled={isDisabled}
height={componentHeight}
inline={isInline}
@ -578,7 +578,7 @@ class SwitchGroupWidget extends BaseWidget<
labelTextColor={labelTextColor}
labelTextSize={labelTextSize}
labelTooltip={labelTooltip}
labelWidth={this.getLabelWidth()}
labelWidth={this.props.labelComponentWidth}
onChange={this.handleSwitchStateChange}
options={_options}
required={isRequired}
@ -638,6 +638,7 @@ export interface SwitchGroupWidgetProps extends WidgetProps {
labelStyle?: string;
onSelectionChange?: string;
accentColor: string;
labelComponentWidth?: number;
}
export default SwitchGroupWidget;

7
app/client/src/widgets/TabsWidget/widget/index.tsx
View File

@ -521,17 +521,16 @@ class TabsWidget extends BaseWidget<
}
getWidgetView() {
const { leftColumn, parentColumnSpace, rightColumn } = this.props;
const { componentWidth } = this.props;
const tabsComponentProps = {
...this.props,
tabs: this.getVisibleTabs(),
width:
(rightColumn - leftColumn) * parentColumnSpace - WIDGET_PADDING * 2,
width: componentWidth - WIDGET_PADDING * 2,
};
const isAutoHeightEnabled: boolean =
isAutoHeightEnabledForWidget(this.props) &&
!isAutoHeightEnabledForWidgetWithLimits(this.props);
return (
<TabsComponent
{...tabsComponentProps}

5
app/client/src/widgets/TextWidget/component/index.tsx
View File

@ -222,11 +222,6 @@ export interface TextComponentProps extends ComponentProps {
borderColor?: Color;
borderWidth?: number;
overflow: OverflowTypes;
// helpers to detect and re-calculate content width
bottomRow?: number;
leftColumn?: number;
rightColumn?: number;
topRow?: number;
minHeight?: number;
}

4
app/client/src/widgets/TextWidget/widget/index.tsx
View File

@ -536,21 +536,17 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
<TextComponent
accentColor={this.props.accentColor}
backgroundColor={this.props.backgroundColor}
bottomRow={this.props.bottomRow}
disableLink={disableLink}
fontFamily={this.props.fontFamily}
fontSize={this.props.fontSize}
fontStyle={this.props.fontStyle}
isLoading={this.props.isLoading}
key={this.props.widgetId}
leftColumn={this.props.leftColumn}
minHeight={this.props.minHeight}
overflow={this.props.overflow}
rightColumn={this.props.rightColumn}
text={this.props.text}
textAlign={this.props.textAlign ? this.props.textAlign : "LEFT"}
textColor={this.props.textColor}
topRow={this.props.topRow}
truncateButtonColor={
this.props.truncateButtonColor || this.props.accentColor
}

12
app/client/src/widgets/WidgetUtils.ts
View File

@ -30,7 +30,10 @@ import type { DynamicPath } from "utils/DynamicBindingUtils";
import { getLocale } from "utils/helpers";
import { DynamicHeight } from "utils/WidgetFeatures";
import type { WidgetPositionProps, WidgetProps } from "./BaseWidget";
import { rgbaMigrationConstantV56 } from "../WidgetProvider/constants";
import {
COMPACT_MODE_MIN_ROWS,
rgbaMigrationConstantV56,
} from "../WidgetProvider/constants";
import type { SchemaItem } from "./JSONFormWidget/constants";
import { WIDGET_COMPONENT_BOUNDARY_CLASS } from "constants/componentClassNameConstants";
import punycode from "punycode";
@ -916,6 +919,13 @@ const findReactInstanceProps = (domElement: any) => {
return null;
};
export function isCompactMode(componentHeight: number) {
return (
componentHeight <
COMPACT_MODE_MIN_ROWS * GridDefaults.DEFAULT_GRID_ROW_HEIGHT
);
}
export const checkForOnClick = (e: React.MouseEvent<HTMLElement>) => {
let target = e.target as HTMLElement | null;
const currentTarget = e.currentTarget as HTMLElement;

2
app/client/src/widgets/withWidgetProps.tsx
View File

@ -244,7 +244,7 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) {
renderMode === RenderModes.CANVAS &&
!isPreviewMode;
widgetProps.maincanvasWidth = mainCanvasWidth;
widgetProps.mainCanvasWidth = mainCanvasWidth;
// We don't render invisible widgets in view mode
if (shouldCollapseWidgetInViewOrPreviewMode) {