PromucFlow_constructor/app/client/src/components/propertyControls/index.ts
Paul Li eb37416a2a
feat: Controls for labels in widgets to align the widgets in forms and other places (#10600)
* feat: When there are multiple input widgets with different label lengths then the input box looks misaligned

-- Create a new property control for a label position
-- Create a new property control for a label alignment
-- Prototype a label section for Input widget

* feat: When there are multiple input widgets with different label lengths then the input box looks misaligned

-- Add a property, labelWidth in the property pane

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Input widget: Implement all the requirements in case its type is Text

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Adapt the functionalty on other types of the input widget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add label functionalities into DropdownWidget
-- Clean up for the input widget and DRY

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add label functionalities into MultiSelectWidget
-- Eliminate unnecessary component prop, columns

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add label functionalties into Tree Select widget
-- Add styles for alignment between lable and input control over the widgets

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add label functionalities into MultiSelectTreeWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Introduce label functionalities into DatePickerWidget2
-- Use width instead of columns prop in InputWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply label functionalities into RichTextEditorWidget
-- Eliminate compactMode from StyledLabel

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply label functionalities into CheckboxGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply label functionalities into SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Reimplement switch group for the correct meaning of right alignment

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply label functionalities into RadioGroupWidget
-- Add new properties, alignment and inline for consistency

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Adjust cols and rows for RadioGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate unused StyledRadioProps

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Complete first MVP of enhanced SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Complete the first MVP of enhanced RadioGroupWidget
-- Eliminate unused StyledSwitch component for SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add min-height, align-self rules for LabelContainer

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Use original label property for RadioGroupWidget
-- Add a migration for adding isInline and alignment properties for RadioGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Update version to latest one in DSLMigrationsUtils.test.ts

* fix failing jest test

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Reimplement label functionalities on BaseInputWidget, InputWidgetV2, CurrencyInputWidget, PhoneInputWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate unused imports in DSLMigrationsUtils

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on the label related test case which is failed in Input_spec.js

* feat: Controls for labels in widgets to align the widgets in forms and other places
-- Fix on #10119: The label text truncates on resizing the input widget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix scroll issue when shrink with MultiSelectWidget and MultiSelectTreeWidget

* fix: Widget Popup test

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Reimplement width and alginment features on the level of label element
-- Prevent actual inputs from DropdownWidget, MultiSelectWidget, SingleSelectTreeWidget, MultiSelectTreeWidget from overflow when resizing
-- Enable label feature on a RadioGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Set label container's default width to 33% when width is not set

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix crash issue when labelWidth is filled by non-numeric value, eliminating passing NaN as its value

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Set flex-grow to zero on input types other than TEXT

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Implement label features on newly created MultiSelectWidgetV2

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate LabelPositionTypes, directly using enum LabelPosition
-- Add a comment for a constant LABEL_MAX_WIDTH_RATE
-- Directly import React for LabelAlignmentOptionsControl
-- Remove unnecessary constructor for LabelAlignmentOptionsControl
-- Define handleAlign instance method as a higher-order function
-- Only migrate alignment property for RadioGroupWidget
-- Use Object.hasOwnProperty instead of in operator

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Migrate alignment property of RadioGroupWidget in case of currentDSL.version is 52

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Revert currentDSL.version to 52

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add a Jest test case for RadioGroupWidget's alignment property migration

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Replace all nested ternary operators with if statements

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Implement label feature on new version of SelectWidget
-- Add Cypress tests for widgets' label section

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Refactor code for BaseInputWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Change CSS selector for step buttons for Numeric BaseInputWidget
-- Directly use migrateRadioGroupAlignmentProperty migration function without using transformDSL

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on typo about migrateRadioGroupAlignmentProperty

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add data-testid attributes for Cypress selectors

* feat: Deprecate form button widget

-- Assert flex-direction to row in CheckboxGroup_spec.js

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add a missing data-testid for SelectWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on failed test cases: CheckboxGroup_spec, DatePicker_2_spec, MultiSelectWidgetV2

* fix: Select popup DSL

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Create a new property control, NumericInputControl
-- Replace all the label properties with the newly created controls

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Create a new Cypress command, checkLabelWidth and apply to all related test cases
-- Increase width in checkboxgroupDsl.json
-- Rename className for label in MultiSelectWidgetV2

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Reimplement the tooltip feature for labels
-- Add missing props for labels in DateField, MultiSelectField, RadioGroupField, SelectField fields for JSONFormWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Refactor property controls, including LabelPositionOptionsControl, LabelAlignmentOptionsControl, NumericInputControl to keep consistency
-- Apply default values into label section

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Extract the label related parts from the various widgets as an independent component

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate TypeScript any type from BaseInputComponent

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Change labelPosition property type to DROP_DOWN
-- Modify LabelAlignmentOptionsControl to use ButtonTabComponent

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Define getLabelWidth method into BaseWidget
-- Extract the common CSS rules for the widget containers
-- Revert rows and columns for SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on the failed test case in DSLMigrationsUtils.test.ts

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on overflow issue on CheckboxGroupWidget
-- Create a distinctive spec file for label feature
-- Eliminate the redundant label specs with the relevant widgets

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Delete unnecessary files, including Select_spec.js, LabelButton.tsx and LabelPositionOptionsControl.tsx
-- Revise wrong comment for checkLabelForWidget Cypress command

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Do not set the label width only if its value is 0
-- Clean up the component for DatePickerWidget2

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate unused imports in DatePickerWidget2

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Make RadioGroupWidget's layout flexible in all modes

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on Cypress test case for RadioGroupWidget in Widgets_Labels_spec
-- Change Cypress commands, including addAction, addSuccessMessage, enterActionValue to accept parentSelector

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Change getLabelWidth method to not have any argument
-- Define some constants for label numbers
-- Extract the common styles for SwitchGroupWidget and RadioGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Refactor some constants

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate unused width prop from RadioGroupWidget
-- Get labelWidth from getLabelWidth

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate the min-height restriction on a label
-- Eliminate the scroll on the earlier InputWidgetV2 which was not in compact mode

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add one more condition checking if the current input type is text

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Extract common code base for MultiSelectTreeWidget and MultiSelectWidgetV2
-- Apply a few CSS fixes on the scrollbar issue select related widgets

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply some tweaks for earlier widgets with labels so as not to be broken UX

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on the failed Cypress test case in Widget_Popup_spec.js

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add constants, LABEL_DEFAULT_WIDTH_RATE, SELECT_DEFAULT_HEIGHT, LABEL_MARGIN_OLD_SELECT

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Increase the widths of CheckboxGroupWidget and SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Set the font size to 14px for NumericInputControl

Co-authored-by: ohansFavour <fohanekwu@gmail.com>
Co-authored-by: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
2022-04-14 16:47:25 +08:00

122 lines
4.2 KiB
TypeScript

import InputTextControl, {
InputControlProps,
} from "components/propertyControls/InputTextControl";
import DropDownControl, {
DropDownControlProps,
} from "components/propertyControls/DropDownControl";
import SwitchControl, {
SwitchControlProps,
} from "components/propertyControls/SwitchControl";
import OptionControl from "components/propertyControls/OptionControl";
import BaseControl, {
ControlProps,
} from "components/propertyControls/BaseControl";
import CodeEditorControl from "components/propertyControls/CodeEditorControl";
import MultiSelectControl, {
MultiSelectControlProps,
} from "components/propertyControls/MultiSelectControl";
import DatePickerControl, {
DatePickerControlProps,
} from "components/propertyControls/DatePickerControl";
import ChartDataControl from "components/propertyControls/ChartDataControl";
import LocationSearchControl from "components/propertyControls/LocationSearchControl";
import StepControl, {
StepControlProps,
} from "components/propertyControls/StepControl";
import TabControl from "components/propertyControls/TabControl";
import ActionSelectorControl from "components/propertyControls/ActionSelectorControl";
import ColumnActionSelectorControl from "components/propertyControls/ColumnActionSelectorControl";
import PrimaryColumnsControl from "components/propertyControls/PrimaryColumnsControl";
import PrimaryColumnDropdownControl, {
PrimaryColumnDropdownControlProps,
} from "components/propertyControls/PrimaryColumnDropdownControl";
import ColorPickerControl, {
ColorPickerControlProps,
} from "components/propertyControls/ColorPickerControl";
import ComputeTablePropertyControl, {
ComputeTablePropertyControlProps,
} from "components/propertyControls/ComputeTablePropertyControl";
import IconTabControl, {
IconTabControlProps,
} from "components/propertyControls/IconTabControl";
import ButtonTabControl, {
ButtonTabControlProps,
} from "components/propertyControls/ButtonTabControl";
import MultiSwitchControl, {
MultiSwitchControlProps,
} from "components/propertyControls/MultiSwitchControl";
import MenuItemsControl from "./MenuItemsControl";
import ButtonListControl from "./ButtonListControl";
import IconSelectControl from "./IconSelectControl";
import BoxShadowOptionsControl from "./BoxShadowOptionsControl";
import BorderRadiusOptionsControl from "./BorderRadiusOptionsControl";
import ButtonBorderRadiusOptionsControl from "./ButtonBorderRadiusControl";
import FieldConfigurationControl from "components/propertyControls/FieldConfigurationControl";
import JSONFormComputeControl from "./JSONFormComputeControl";
import ButtonControl from "./ButtonControl";
import LabelAlignmentOptionsControl from "./LabelAlignmentOptionsControl";
import NumericInputControl, {
NumericInputControlProps,
} from "./NumericInputControl";
export const PropertyControls = {
InputTextControl,
DropDownControl,
SwitchControl,
OptionControl,
CodeEditorControl,
MultiSelectControl,
DatePickerControl,
ActionSelectorControl,
ColumnActionSelectorControl,
MultiSwitchControl,
ChartDataControl,
LocationSearchControl,
StepControl,
TabControl,
ColorPickerControl,
PrimaryColumnsControl,
PrimaryColumnDropdownControl,
IconTabControl,
ButtonTabControl,
ComputeTablePropertyControl,
MenuItemsControl,
ButtonListControl,
IconSelectControl,
BoxShadowOptionsControl,
BorderRadiusOptionsControl,
ButtonBorderRadiusOptionsControl,
FieldConfigurationControl,
JSONFormComputeControl,
ButtonControl,
LabelAlignmentOptionsControl,
NumericInputControl,
};
export type PropertyControlPropsType =
| ControlProps
| InputControlProps
| DropDownControlProps
| SwitchControlProps
| MultiSelectControlProps
| DatePickerControlProps
| MultiSwitchControlProps
| IconTabControlProps
| ButtonTabControlProps
| StepControlProps
| ColorPickerControlProps
| ComputeTablePropertyControlProps
| PrimaryColumnDropdownControlProps
| NumericInputControlProps;
export const getPropertyControlTypes = (): { [key: string]: string } => {
const _types: { [key: string]: string } = {};
Object.values(PropertyControls).forEach(
(Control: typeof BaseControl & { getControlType: () => string }) => {
const controlType = Control.getControlType();
_types[controlType] = controlType;
},
);
return _types;
};