From 90fcdb76d2160b9cd9e06de658906a3024056e29 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Tue, 14 May 2024 00:37:34 +0500 Subject: [PATCH 001/155] animation added --- .../lowcoder/src/api/commonSettingApi.ts | 79 +- .../src/comps/controls/labelControl.tsx | 317 +- .../src/comps/controls/styleControl.tsx | 800 +- .../comps/controls/styleControlConstants.tsx | 1408 ++-- .../packages/lowcoder/src/i18n/locales/en.ts | 7119 +++++++++-------- client/packages/lowcoder/src/index.ts | 29 +- 6 files changed, 5282 insertions(+), 4470 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 48a17cc2a..c0ccc1a3b 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -1,7 +1,7 @@ -import Api from "./api"; -import { AxiosPromise } from "axios"; -import { ApiResponse, GenericApiResponse } from "./apiResponses"; -import { trans } from "i18n"; +import Api from './api'; +import {AxiosPromise} from 'axios'; +import {ApiResponse, GenericApiResponse} from './apiResponses'; +import {trans} from 'i18n'; export type FetchCommonSettingPayload = { orgId: string; @@ -44,50 +44,54 @@ export interface ThemeDetail { primarySurface: string; // comp bg-color borderRadius: string; chart?: string; - margin?: string; + margin?: string; padding?: string; gridColumns?: string; //Added By Aqib Mirza textSize?: string; + animation?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { switch (key) { - case "primary": - return trans("themeDetail.primary"); - case "textDark": - return trans("themeDetail.textDark"); - case "textLight": - return trans("themeDetail.textLight"); - case "canvas": - return trans("themeDetail.canvas"); - case "primarySurface": - return trans("themeDetail.primarySurface"); - case "borderRadius": - return trans("themeDetail.borderRadius"); - case "margin": - return trans("style.margin"); - case "padding": - return trans("style.padding"); + case 'primary': + return trans('themeDetail.primary'); + case 'textDark': + return trans('themeDetail.textDark'); + case 'textLight': + return trans('themeDetail.textLight'); + case 'canvas': + return trans('themeDetail.canvas'); + case 'primarySurface': + return trans('themeDetail.primarySurface'); + case 'borderRadius': + return trans('themeDetail.borderRadius'); + case 'margin': + return trans('style.margin'); + case 'animation': + return trans('style.animation'); + case 'padding': + return trans('style.padding'); //Added By Aqib Mirza - case "gridColumns": - return trans("themeDetail.gridColumns"); - case "textSize": - return trans("style.textSize"); + case 'gridColumns': + return trans('themeDetail.gridColumns'); + case 'textSize': + return trans('style.textSize'); } - return ""; + return ''; } export function isThemeColorKey(key: string) { switch (key as keyof ThemeDetail) { - case "primary": - case "textDark": - case "textLight": - case "canvas": - case "primarySurface": - case "margin": - case "padding": - case "gridColumns": //Added By Aqib Mirza - case "textSize": + case 'primary': + case 'textDark': + case 'textLight': + case 'canvas': + case 'primarySurface': + case 'margin': + case 'animation': + case 'padding': + case 'gridColumns': //Added By Aqib Mirza + case 'textSize': return true; } return false; @@ -98,7 +102,8 @@ export interface SetCommonSettingResponse extends ApiResponse { } class CommonSettingApi extends Api { - static commonSettingUrl = (orgId: string) => `/organizations/${orgId}/common-settings`; + static commonSettingUrl = (orgId: string) => + `/organizations/${orgId}/common-settings`; static fetchCommonSetting( request: FetchCommonSettingPayload @@ -109,7 +114,7 @@ class CommonSettingApi extends Api { static setCommonSetting( request: SetCommonSettingPayload ): AxiosPromise { - const { orgId, ...rest } = request; + const {orgId, ...rest} = request; return Api.put(CommonSettingApi.commonSettingUrl(request.orgId), rest.data); } } diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 86e32ce77..7c422c67d 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -1,23 +1,30 @@ -import { trans } from "i18n"; -import { green, red, yellow } from "@ant-design/colors/es"; -import { FormItemProps } from "antd/es/form/FormItem"; -import { BoolControl } from "comps/controls/boolControl"; -import { NumberControl, StringControl } from "comps/controls/codeControl"; -import { dropdownControl } from "comps/controls/dropdownControl"; -import { withDefault } from "comps/generators"; -import { MultiCompBuilder } from "comps/generators/multi"; -import { labelCss, Section, Tooltip, UnderlineCss } from "lowcoder-design"; -import { ValueFromOption } from "lowcoder-design"; -import { isEmpty } from "lodash"; -import { Fragment, ReactNode } from "react"; -import styled, { css } from "styled-components"; -import { AlignLeft } from "lowcoder-design"; -import { AlignRight } from "lowcoder-design"; -import { StarIcon } from "lowcoder-design"; +import {trans} from 'i18n'; +import {green, red, yellow} from '@ant-design/colors/es'; +import {FormItemProps} from 'antd/es/form/FormItem'; +import {BoolControl} from 'comps/controls/boolControl'; +import {NumberControl, StringControl} from 'comps/controls/codeControl'; +import {dropdownControl} from 'comps/controls/dropdownControl'; +import {withDefault} from 'comps/generators'; +import {MultiCompBuilder} from 'comps/generators/multi'; +import {labelCss, Section, Tooltip, UnderlineCss} from 'lowcoder-design'; +import {ValueFromOption} from 'lowcoder-design'; +import {isEmpty} from 'lodash'; +import {Fragment, ReactNode} from 'react'; +import styled, {css} from 'styled-components'; +import {AlignLeft} from 'lowcoder-design'; +import {AlignRight} from 'lowcoder-design'; +import {StarIcon} from 'lowcoder-design'; -import { LabelStyleType, heightCalculator, widthCalculator } from "./styleControlConstants"; +import { + LabelStyleType, + heightCalculator, + widthCalculator, +} from './styleControlConstants'; -type LabelViewProps = Pick & { +type LabelViewProps = Pick< + FormItemProps, + 'required' | 'help' | 'validateStatus' +> & { children: ReactNode; style?: Record; labelStyle?: Record; @@ -44,8 +51,8 @@ function getStyle(style: any) { `; } -const LabelViewWrapper = styled.div<{ $style: any, inputFieldStyle: any }>` -${(props) => { +const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>` + ${(props) => { return ( props.$style && { ...props.$style, @@ -66,11 +73,14 @@ const MainWrapper = styled.div<{ flex-direction: ${(props) => props.$position}; flex-grow: 1; width: 100%; - margin-top: ${(props) => (props.$position === "column" && props.$hasLabel ? "4px" : 0)}; + margin-top: ${(props) => + props.$position === 'column' && props.$hasLabel ? '4px' : 0}; height: ${(props) => - props.$position === "column" && props.$hasLabel ? "calc(100% - 4px)" : "100%"}; + props.$position === 'column' && props.$hasLabel + ? 'calc(100% - 4px)' + : '100%'}; display: flex; - align-items: ${(props) => (props.$position === "row" ? "center" : "start")}; + align-items: ${(props) => (props.$position === 'row' ? 'center' : 'start')}; flex-shrink: 0; `; @@ -82,27 +92,35 @@ const LabelWrapper = styled.div<{ display: flex; align-items: center; margin-right: 8px; - margin-bottom: ${(props) => (props.$position === "row" ? 0 : "3.5px")}; - justify-content: ${(props) => (props.$align === "left" ? "start" : "end")}; - max-width: ${(props) => (props.$position === "row" ? "80%" : "100%")}; + margin-bottom: ${(props) => (props.$position === 'row' ? 0 : '3.5px')}; + justify-content: ${(props) => (props.$align === 'left' ? 'start' : 'end')}; + max-width: ${(props) => (props.$position === 'row' ? '80%' : '100%')}; flex-shrink: 0; `; // ${(props) => props.$border && UnderlineCss}; // ${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} -const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $validateStatus: "success" | "warning" | "error" | "validating" | null }>` +const Label = styled.span<{ + $border: boolean; + $labelStyle: LabelStyleType; + $validateStatus: 'success' | 'warning' | 'error' | 'validating' | null; +}>` ${labelCss}; - font-family:${(props) => props.$labelStyle.fontFamily}; - font-weight:${(props) => props.$labelStyle.textWeight}; - font-style:${(props) => props.$labelStyle.fontStyle}; - text-transform:${(props) => props.$labelStyle.textTransform}; - text-decoration:${(props) => props.$labelStyle.textDecoration}; - font-size:${(props) => props.$labelStyle.textSize}; - color:${(props) => !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.label} !important; - ${(props) => `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} + font-family: ${(props) => props.$labelStyle.fontFamily}; + font-weight: ${(props) => props.$labelStyle.textWeight}; + font-style: ${(props) => props.$labelStyle.fontStyle}; + text-transform: ${(props) => props.$labelStyle.textTransform}; + text-decoration: ${(props) => props.$labelStyle.textDecoration}; + font-size: ${(props) => props.$labelStyle.textSize}; + color: ${(props) => + !!props.$validateStatus && props?.$validateStatus === 'error' + ? props.$labelStyle.validate + : props.$labelStyle.label} !important; + ${(props) => + `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} border-radius:${(props) => props.$labelStyle.radius}; - padding:${(props) => props.$labelStyle.padding}; - margin:${(props) => props.$labelStyle.margin}; + padding: ${(props) => props.$labelStyle.padding}; + margin: ${(props) => props.$labelStyle.margin}; width: fit-content; user-select: text; white-space: nowrap; @@ -135,131 +153,168 @@ const TooltipWrapper = styled.span` `; const PositionOptions = [ - { label: trans("labelProp.left"), value: "row" }, - { label: trans("labelProp.top"), value: "column" }, + {label: trans('labelProp.left'), value: 'row'}, + {label: trans('labelProp.top'), value: 'column'}, ] as const; type PositionOptionsValue = ValueFromOption; const AlignOptions = [ - { label: , value: "left" }, - { label: , value: "right" }, + {label: , value: 'left'}, + {label: , value: 'right'}, ] as const; type AlignOptionsValue = ValueFromOption; const WidthUnitOptions = [ - { label: "px", value: "px" }, - { label: "%", value: "%" }, + {label: 'px', value: 'px'}, + {label: '%', value: '%'}, ]; function getLabelWidth(width: number, widthUnit: string): string { if (width <= 0 || isNaN(width)) { - return "0%"; + return '0%'; } return width + widthUnit; } export const LabelControl = (function () { const childrenMap = { - text: withDefault(StringControl, trans("label")), + text: withDefault(StringControl, trans('label')), tooltip: StringControl, hidden: BoolControl, width: withDefault(NumberControl, 33), - widthUnit: dropdownControl(WidthUnitOptions, "%"), - position: dropdownControl(PositionOptions, "row"), - align: dropdownControl(AlignOptions, "left"), + widthUnit: dropdownControl(WidthUnitOptions, '%'), + position: dropdownControl(PositionOptions, 'row'), + align: dropdownControl(AlignOptions, 'left'), }; - return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => - { - return - - {!props.hidden && !isEmpty(props.text) && ( - (args: LabelViewProps) => { + return ( + + - {props.tooltip}} - arrow={{ - pointAtCenter: true, + {!props.hidden && !isEmpty(props.text) && ( + + {props.tooltip} + ) + } + arrow={{ + pointAtCenter: true, + }} + placement="top" + color="#2c2c2c" + getPopupContainer={(node: any) => + node.closest('.react-grid-item') + } + > + + + {args.required && } + + )} + node.closest(".react-grid-item")} > - - - {args.required && } - - )} - - {args.children} - - + {args.children} + + - {args.help && ( - - {args.help} - - )} - } -) + {args.help && ( + + {args.help} + + )} + + ); + } + ) .setPropertyViewFn((children) => ( -
- {children.text.propertyView({ label: trans("labelProp.text") })} - {children.tooltip.propertyView({ label: trans("labelProp.tooltip") })} - {children.position.propertyView({ label: trans("labelProp.position"), radioButton: true })} - {children.align.propertyView({ label: trans("labelProp.align"), radioButton: true })} - {children.position.getView() !== "column" && +
+ {children.text.propertyView({label: trans('labelProp.text')})} + {children.tooltip.propertyView({label: trans('labelProp.tooltip')})} + {children.position.propertyView({ + label: trans('labelProp.position'), + radioButton: true, + })} + {children.align.propertyView({ + label: trans('labelProp.align'), + radioButton: true, + })} + {children.position.getView() !== 'column' && children.width.propertyView({ - label: trans("labelProp.width"), - tooltip: trans("labelProp.widthTooltip"), + label: trans('labelProp.width'), + tooltip: trans('labelProp.widthTooltip'), lastNode: children.widthUnit.propertyView({}), })}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index bc938059f..a6f5a6d6a 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -1,11 +1,15 @@ -import { default as Tooltip } from "antd/es/tooltip"; -import { getThemeDetailName, isThemeColorKey, ThemeDetail } from "api/commonSettingApi"; -import { ControlItemCompBuilder } from "comps/generators/controlCompBuilder"; -import { childrenToProps, ToConstructor } from "comps/generators/multi"; -import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { ThemeContext } from "comps/utils/themeContext"; -import { trans } from "i18n"; -import _ from "lodash"; +import {default as Tooltip} from 'antd/es/tooltip'; +import { + getThemeDetailName, + isThemeColorKey, + ThemeDetail, +} from 'api/commonSettingApi'; +import {ControlItemCompBuilder} from 'comps/generators/controlCompBuilder'; +import {childrenToProps, ToConstructor} from 'comps/generators/multi'; +import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; +import {ThemeContext} from 'comps/utils/themeContext'; +import {trans} from 'i18n'; +import _ from 'lodash'; import { controlItem, IconReset, @@ -23,12 +27,17 @@ import { BorderStyleIcon, BorderRadiusIcon, TextStyleIcon, -} from "lowcoder-design"; -import { useContext } from "react"; -import styled from "styled-components"; -import { useIsMobile } from "util/hooks"; -import { CSSCodeControl, ObjectControl, RadiusControl, StringControl } from "./codeControl"; -import { ColorControl } from "./colorControl"; +} from 'lowcoder-design'; +import {useContext} from 'react'; +import styled from 'styled-components'; +import {useIsMobile} from 'util/hooks'; +import { + CSSCodeControl, + ObjectControl, + RadiusControl, + StringControl, +} from './codeControl'; +import {ColorControl} from './colorControl'; import { defaultTheme, DepColorConfig, @@ -37,6 +46,7 @@ import { SimpleColorConfig, SingleColorConfig, MarginConfig, + AnimationConfig, PaddingConfig, TextSizeConfig, TextWeightConfig, @@ -62,118 +72,170 @@ import { TextTransformConfig, TextDecorationConfig, borderStyleConfig, +} from './styleControlConstants'; +import {faTextWidth} from '@fortawesome/free-solid-svg-icons'; +import appSelectControl from './appSelectControl'; - -} from "./styleControlConstants"; -import { faTextWidth } from "@fortawesome/free-solid-svg-icons"; -import appSelectControl from "./appSelectControl"; - -function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig { - return config.hasOwnProperty("color"); +function isSimpleColorConfig( + config: SingleColorConfig +): config is SimpleColorConfig { + return config.hasOwnProperty('color'); } function isDepColorConfig(config: SingleColorConfig): config is DepColorConfig { - return config.hasOwnProperty("depName") || config.hasOwnProperty("depTheme"); + return config.hasOwnProperty('depName') || config.hasOwnProperty('depTheme'); } function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig { - return config.hasOwnProperty("radius"); + return config.hasOwnProperty('radius'); } -function isBorderWidthConfig(config: SingleColorConfig): config is BorderWidthConfig { - return config.hasOwnProperty("borderWidth"); +function isBorderWidthConfig( + config: SingleColorConfig +): config is BorderWidthConfig { + return config.hasOwnProperty('borderWidth'); } function isRotationConfig(config: SingleColorConfig): config is RotationConfig { - return config.hasOwnProperty("rotation"); + return config.hasOwnProperty('rotation'); } -function isBackgroundImageConfig(config: SingleColorConfig): config is BackgroundImageConfig { - return config.hasOwnProperty("backgroundImage"); +function isBackgroundImageConfig( + config: SingleColorConfig +): config is BackgroundImageConfig { + return config.hasOwnProperty('backgroundImage'); } -function isBackgroundImageRepeatConfig(config: SingleColorConfig): config is BackgroundImageRepeatConfig { - return config.hasOwnProperty("backgroundImageRepeat"); +function isBackgroundImageRepeatConfig( + config: SingleColorConfig +): config is BackgroundImageRepeatConfig { + return config.hasOwnProperty('backgroundImageRepeat'); } -function isBackgroundImageSizeConfig(config: SingleColorConfig): config is BackgroundImageSizeConfig { - return config.hasOwnProperty("backgroundImageSize"); +function isBackgroundImageSizeConfig( + config: SingleColorConfig +): config is BackgroundImageSizeConfig { + return config.hasOwnProperty('backgroundImageSize'); } -function isBackgroundImagePositionConfig(config: SingleColorConfig): config is BackgroundImagePositionConfig { - return config.hasOwnProperty("backgroundImagePosition"); +function isBackgroundImagePositionConfig( + config: SingleColorConfig +): config is BackgroundImagePositionConfig { + return config.hasOwnProperty('backgroundImagePosition'); } -function isBackgroundImageOriginConfig(config: SingleColorConfig): config is BackgroundImageOriginConfig { - return config.hasOwnProperty("backgroundImageOrigin"); +function isBackgroundImageOriginConfig( + config: SingleColorConfig +): config is BackgroundImageOriginConfig { + return config.hasOwnProperty('backgroundImageOrigin'); } -function isHeaderBackgroundImageConfig(config: SingleColorConfig): config is HeaderBackgroundImageConfig { - return config.hasOwnProperty("headerBackgroundImage"); +function isHeaderBackgroundImageConfig( + config: SingleColorConfig +): config is HeaderBackgroundImageConfig { + return config.hasOwnProperty('headerBackgroundImage'); } -function isHeaderBackgroundImageRepeatConfig(config: SingleColorConfig): config is HeaderBackgroundImageRepeatConfig { - return config.hasOwnProperty("headerBackgroundImageRepeat"); +function isHeaderBackgroundImageRepeatConfig( + config: SingleColorConfig +): config is HeaderBackgroundImageRepeatConfig { + return config.hasOwnProperty('headerBackgroundImageRepeat'); } -function isHeaderBackgroundImageSizeConfig(config: SingleColorConfig): config is HeaderBackgroundImageSizeConfig { - return config.hasOwnProperty("headerBackgroundImageSize"); +function isHeaderBackgroundImageSizeConfig( + config: SingleColorConfig +): config is HeaderBackgroundImageSizeConfig { + return config.hasOwnProperty('headerBackgroundImageSize'); } -function isHeaderBackgroundImagePositionConfig(config: SingleColorConfig): config is HeaderBackgroundImagePositionConfig { - return config.hasOwnProperty("headerBackgroundImagePosition"); +function isHeaderBackgroundImagePositionConfig( + config: SingleColorConfig +): config is HeaderBackgroundImagePositionConfig { + return config.hasOwnProperty('headerBackgroundImagePosition'); } -function isHeaderBackgroundImageOriginConfig(config: SingleColorConfig): config is HeaderBackgroundImageOriginConfig { - return config.hasOwnProperty("headerBackgroundImageOrigin"); +function isHeaderBackgroundImageOriginConfig( + config: SingleColorConfig +): config is HeaderBackgroundImageOriginConfig { + return config.hasOwnProperty('headerBackgroundImageOrigin'); } -function isFooterBackgroundImageConfig(config: SingleColorConfig): config is FooterBackgroundImageConfig { - return config.hasOwnProperty("footerBackgroundImage"); +function isFooterBackgroundImageConfig( + config: SingleColorConfig +): config is FooterBackgroundImageConfig { + return config.hasOwnProperty('footerBackgroundImage'); } -function isFooterBackgroundImageRepeatConfig(config: SingleColorConfig): config is FooterBackgroundImageRepeatConfig { - return config.hasOwnProperty("footerBackgroundImageRepeat"); +function isFooterBackgroundImageRepeatConfig( + config: SingleColorConfig +): config is FooterBackgroundImageRepeatConfig { + return config.hasOwnProperty('footerBackgroundImageRepeat'); } -function isFooterBackgroundImageSizeConfig(config: SingleColorConfig): config is FooterBackgroundImageSizeConfig { - return config.hasOwnProperty("footerBackgroundImageSize"); +function isFooterBackgroundImageSizeConfig( + config: SingleColorConfig +): config is FooterBackgroundImageSizeConfig { + return config.hasOwnProperty('footerBackgroundImageSize'); } -function isFooterBackgroundImagePositionConfig(config: SingleColorConfig): config is FooterBackgroundImagePositionConfig { - return config.hasOwnProperty("footerBackgroundImagePosition"); +function isFooterBackgroundImagePositionConfig( + config: SingleColorConfig +): config is FooterBackgroundImagePositionConfig { + return config.hasOwnProperty('footerBackgroundImagePosition'); } -function isFooterBackgroundImageOriginConfig(config: SingleColorConfig): config is FooterBackgroundImageOriginConfig { - return config.hasOwnProperty("footerBackgroundImageOrigin"); +function isFooterBackgroundImageOriginConfig( + config: SingleColorConfig +): config is FooterBackgroundImageOriginConfig { + return config.hasOwnProperty('footerBackgroundImageOrigin'); } function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig { - return config.hasOwnProperty("textSize"); + return config.hasOwnProperty('textSize'); } -function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConfig { - return config.hasOwnProperty("textWeight"); +function isTextWeightConfig( + config: SingleColorConfig +): config is TextWeightConfig { + return config.hasOwnProperty('textWeight'); } -function isFontFamilyConfig(config: SingleColorConfig): config is FontFamilyConfig { - return config.hasOwnProperty("fontFamily"); +function isFontFamilyConfig( + config: SingleColorConfig +): config is FontFamilyConfig { + return config.hasOwnProperty('fontFamily'); } -function isFontStyleConfig(config: SingleColorConfig): config is FontStyleConfig { - return config.hasOwnProperty("fontStyle"); +function isFontStyleConfig( + config: SingleColorConfig +): config is FontStyleConfig { + return config.hasOwnProperty('fontStyle'); } -function isTextTransformConfig(config: SingleColorConfig): config is TextTransformConfig { - return config.hasOwnProperty("textTransform"); +function isTextTransformConfig( + config: SingleColorConfig +): config is TextTransformConfig { + return config.hasOwnProperty('textTransform'); } -function isTextDecorationConfig(config: SingleColorConfig): config is TextDecorationConfig { - return config.hasOwnProperty("textDecoration"); +function isTextDecorationConfig( + config: SingleColorConfig +): config is TextDecorationConfig { + return config.hasOwnProperty('textDecoration'); } -function isBorderStyleConfig(config: SingleColorConfig): config is borderStyleConfig { - return config.hasOwnProperty("borderStyle"); +function isBorderStyleConfig( + config: SingleColorConfig +): config is borderStyleConfig { + return config.hasOwnProperty('borderStyle'); } function isMarginConfig(config: SingleColorConfig): config is MarginConfig { - return config.hasOwnProperty("margin"); + return config.hasOwnProperty('margin'); +} + +function isAnimationConfig( + config: SingleColorConfig +): config is AnimationConfig { + return config.hasOwnProperty('animation'); } function isPaddingConfig(config: SingleColorConfig): config is PaddingConfig { - return config.hasOwnProperty("padding"); + return config.hasOwnProperty('padding'); } // function styleControl(colorConfig: Array) { -type Names = T[number]["name"]; -export type StyleConfigType = { [K in Names]: string }; +type Names = T[number]['name']; +export type StyleConfigType = { + [K in Names]: string; +}; // Options[number]["value"] function isEmptyColor(color: string) { @@ -207,31 +269,47 @@ function isEmptyBackgroundImageOriginConfig(backgroundImageOrigin: string) { function isEmptyHeaderBackgroundImageConfig(headerBackgroundImage: string) { return _.isEmpty(headerBackgroundImage); } -function isEmptyHeaderBackgroundImageRepeatConfig(headerBackgroundImageRepeat: string) { +function isEmptyHeaderBackgroundImageRepeatConfig( + headerBackgroundImageRepeat: string +) { return _.isEmpty(headerBackgroundImageRepeat); } -function isEmptyHeaderBackgroundImageSizeConfig(headerBackgroundImageSize: string) { +function isEmptyHeaderBackgroundImageSizeConfig( + headerBackgroundImageSize: string +) { return _.isEmpty(headerBackgroundImageSize); } -function isEmptyHeaderBackgroundImagePositionConfig(headerBackgroundImagePosition: string) { +function isEmptyHeaderBackgroundImagePositionConfig( + headerBackgroundImagePosition: string +) { return _.isEmpty(headerBackgroundImagePosition); } -function isEmptyHeaderBackgroundImageOriginConfig(headerBackgroundImageOrigin: string) { +function isEmptyHeaderBackgroundImageOriginConfig( + headerBackgroundImageOrigin: string +) { return _.isEmpty(headerBackgroundImageOrigin); } function isEmptyFooterBackgroundImageConfig(footerBackgroundImage: string) { return _.isEmpty(footerBackgroundImage); } -function isEmptyFooterBackgroundImageRepeatConfig(footerBackgroundImageRepeat: string) { +function isEmptyFooterBackgroundImageRepeatConfig( + footerBackgroundImageRepeat: string +) { return _.isEmpty(footerBackgroundImageRepeat); } -function isEmptyFooterBackgroundImageSizeConfig(footerBackgroundImageSize: string) { +function isEmptyFooterBackgroundImageSizeConfig( + footerBackgroundImageSize: string +) { return _.isEmpty(footerBackgroundImageSize); } -function isEmptyFooterBackgroundImagePositionConfig(footerBackgroundImagePosition: string) { +function isEmptyFooterBackgroundImagePositionConfig( + footerBackgroundImagePosition: string +) { return _.isEmpty(footerBackgroundImagePosition); } -function isEmptyFooterBackgroundImageOriginConfig(footerBackgroundImageOrigin: string) { +function isEmptyFooterBackgroundImageOriginConfig( + footerBackgroundImageOrigin: string +) { return _.isEmpty(footerBackgroundImageOrigin); } @@ -257,9 +335,14 @@ function isEmptyBorderStyle(borderStyle: string) { return _.isEmpty(borderStyle); } +function isEmptyAnimation(animation: string) { + return _.isEmpty(animation); +} + function isEmptyMargin(margin: string) { return _.isEmpty(margin); } + function isEmptyPadding(padding: string) { return _.isEmpty(padding); } @@ -273,7 +356,10 @@ function calcColors>( theme?: ThemeDetail, bgColor?: string ) { - const themeWithDefault = (theme || defaultTheme) as unknown as Record; + const themeWithDefault = (theme || defaultTheme) as unknown as Record< + string, + string + >; // Cover what is not there for the first pass let res: Record = {}; colorConfigs.forEach((config) => { @@ -291,63 +377,108 @@ function calcColors>( return; } - if (!isEmptyBackgroundImageConfig(props[name]) && isBackgroundImageConfig(config)) { + if ( + !isEmptyBackgroundImageConfig(props[name]) && + isBackgroundImageConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyBackgroundImageRepeatConfig(props[name]) && isBackgroundImageRepeatConfig(config)) { + if ( + !isEmptyBackgroundImageRepeatConfig(props[name]) && + isBackgroundImageRepeatConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyBackgroundImageSizeConfig(props[name]) && isBackgroundImageSizeConfig(config)) { + if ( + !isEmptyBackgroundImageSizeConfig(props[name]) && + isBackgroundImageSizeConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyBackgroundImagePositionConfig(props[name]) && isBackgroundImagePositionConfig(config)) { + if ( + !isEmptyBackgroundImagePositionConfig(props[name]) && + isBackgroundImagePositionConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyBackgroundImageOriginConfig(props[name]) && isBackgroundImageOriginConfig(config)) { + if ( + !isEmptyBackgroundImageOriginConfig(props[name]) && + isBackgroundImageOriginConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyHeaderBackgroundImageConfig(props[name]) && isHeaderBackgroundImageConfig(config)) { + if ( + !isEmptyHeaderBackgroundImageConfig(props[name]) && + isHeaderBackgroundImageConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyHeaderBackgroundImageRepeatConfig(props[name]) && isHeaderBackgroundImageRepeatConfig(config)) { + if ( + !isEmptyHeaderBackgroundImageRepeatConfig(props[name]) && + isHeaderBackgroundImageRepeatConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyHeaderBackgroundImageSizeConfig(props[name]) && isHeaderBackgroundImageSizeConfig(config)) { + if ( + !isEmptyHeaderBackgroundImageSizeConfig(props[name]) && + isHeaderBackgroundImageSizeConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyHeaderBackgroundImagePositionConfig(props[name]) && isHeaderBackgroundImagePositionConfig(config)) { + if ( + !isEmptyHeaderBackgroundImagePositionConfig(props[name]) && + isHeaderBackgroundImagePositionConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyHeaderBackgroundImageOriginConfig(props[name]) && isHeaderBackgroundImageOriginConfig(config)) { + if ( + !isEmptyHeaderBackgroundImageOriginConfig(props[name]) && + isHeaderBackgroundImageOriginConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyFooterBackgroundImageConfig(props[name]) && isFooterBackgroundImageConfig(config)) { + if ( + !isEmptyFooterBackgroundImageConfig(props[name]) && + isFooterBackgroundImageConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyFooterBackgroundImageRepeatConfig(props[name]) && isFooterBackgroundImageRepeatConfig(config)) { + if ( + !isEmptyFooterBackgroundImageRepeatConfig(props[name]) && + isFooterBackgroundImageRepeatConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyFooterBackgroundImageSizeConfig(props[name]) && isFooterBackgroundImageSizeConfig(config)) { + if ( + !isEmptyFooterBackgroundImageSizeConfig(props[name]) && + isFooterBackgroundImageSizeConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyFooterBackgroundImagePositionConfig(props[name]) && isFooterBackgroundImagePositionConfig(config)) { + if ( + !isEmptyFooterBackgroundImagePositionConfig(props[name]) && + isFooterBackgroundImagePositionConfig(config) + ) { res[name] = props[name]; return; } - if (!isEmptyFooterBackgroundImageOriginConfig(props[name]) && isFooterBackgroundImageOriginConfig(config)) { + if ( + !isEmptyFooterBackgroundImageOriginConfig(props[name]) && + isFooterBackgroundImageOriginConfig(config) + ) { res[name] = props[name]; return; } @@ -383,6 +514,10 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyAnimation(props[name]) && isAnimationConfig(config)) { + res[name] = 'bounce'; + return; + } if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) { res[name] = props[name]; return; @@ -464,20 +599,23 @@ function calcColors>( res[name] = themeWithDefault[config.fontFamily] || 'sans-serif'; } if (isFontStyleConfig(config)) { - res[name] = themeWithDefault[config.fontStyle] || 'normal' + res[name] = themeWithDefault[config.fontStyle] || 'normal'; } - if(isTextTransformConfig(config)){ - res[name] = themeWithDefault[config.textTransform] || 'none' + if (isTextTransformConfig(config)) { + res[name] = themeWithDefault[config.textTransform] || 'none'; } - if(isTextDecorationConfig(config)){ - res[name] = themeWithDefault[config.textDecoration] || 'none' + if (isTextDecorationConfig(config)) { + res[name] = themeWithDefault[config.textDecoration] || 'none'; } - if(isBorderStyleConfig(config)){ - res[name] = themeWithDefault[config.borderStyle] || 'dashed' + if (isBorderStyleConfig(config)) { + res[name] = themeWithDefault[config.borderStyle] || 'dashed'; } if (isMarginConfig(config)) { res[name] = themeWithDefault[config.margin]; } + if (isAnimationConfig(config)) { + res[name] = themeWithDefault[config.animation]; + } if (isPaddingConfig(config)) { res[name] = themeWithDefault[config.padding]; } @@ -491,8 +629,10 @@ function calcColors>( if (isDepColorConfig(config)) { if (config.depType && config.depType === DEP_TYPE.CONTRAST_TEXT) { // bgColor is the background color of the container component, equivalent to canvas - let depKey = config.depName ? res[config.depName] : themeWithDefault[config.depTheme!]; - if (bgColor && config.depTheme === "canvas") { + let depKey = config.depName + ? res[config.depName] + : themeWithDefault[config.depTheme!]; + if (bgColor && config.depTheme === 'canvas') { depKey = bgColor; } res[name] = config.transformer( @@ -500,7 +640,11 @@ function calcColors>( themeWithDefault.textDark, themeWithDefault.textLight ); - } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) { + } else if ( + config?.depType === DEP_TYPE.SELF && + config.depTheme === 'canvas' && + bgColor + ) { res[name] = bgColor; } else { const rest = []; @@ -584,22 +728,71 @@ const StyleContent = styled.div` } `; -const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`; -const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px; color: #888`; -const RadiusPropIcon = styled(BorderRadiusIcon)` width: 24px; margin: 0 11px 0 0px; color: #888`; -const BorderPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; -const BorderStylePropIcon = styled(BorderStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; - -const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` margin: 0 6px 0 0; padding: 2px; color: #888`; -const RotationPropIcon = styled(RotationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; +const MarginIcon = styled(ExpandIcon)` + margin: 0 8px 0 2px; + color: #888; +`; +const PaddingIcon = styled(CompressIcon)` + margin: 0 8px 0 2px; + color: #888; +`; +const RadiusPropIcon = styled(BorderRadiusIcon)` + width: 24px; + margin: 0 11px 0 0px; + color: #888; +`; +const BorderPropIcon = styled(BorderWidthIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const BorderStylePropIcon = styled(BorderStyleIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; -const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; -const StyledTextTransformIcon = styled(TextTransformationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; -const StyledFontFamilyIcon = styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; -const StyledTextWeightIcon = styled(TextWeightIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; -const StyledTextStyleIcon = styled(TextStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; -const StyledTextDecorationPropIcon = styled(TextDecorationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; +const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` + margin: 0 6px 0 0; + padding: 2px; + color: #888; +`; +const RotationPropIcon = styled(RotationIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const StyledTextSizeIcon = styled(TextSizeIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const StyledTextTransformIcon = styled(TextTransformationIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const StyledFontFamilyIcon = styled(FontFamilyIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const StyledTextWeightIcon = styled(TextWeightIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const StyledTextStyleIcon = styled(TextStyleIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const StyledTextDecorationPropIcon = styled(TextDecorationIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; const ResetIcon = styled(IconReset)` &:hover g g { @@ -607,44 +800,46 @@ const ResetIcon = styled(IconReset)` } `; -export function styleControl(colorConfigs: T) { - type ColorMap = { [K in Names]: string }; +export function styleControl( + colorConfigs: T +) { + type ColorMap = {[K in Names]: string}; const childrenMap: any = {}; colorConfigs.map((config) => { const name: Names = config.name; if ( - name === "radius" || - name === "borderWidth" || - name === "rotation" || - name === "cardRadius" || - name === "textSize" || - name === "textWeight" || - name === "textTransform" || - name === "textDecoration" || - name === "fontFamily" || - name === "borderStyle" || - name === "fontStyle" || - name === "backgroundImage" || - name === "backgroundImageRepeat" || - name === "backgroundImageSize" || - name === "backgroundImagePosition" || - name === "backgroundImageOrigin" || - name === "headerBackgroundImage" || - name === "headerBackgroundImageRepeat" || - name === "headerBackgroundImageSize" || - name === "headerBackgroundImagePosition" || - name === "headerBackgroundImageOrigin" || - name === "footerBackgroundImage" || - name === "footerBackgroundImageRepeat" || - name === "footerBackgroundImageSize" || - name === "footerBackgroundImagePosition" || - name === "footerBackgroundImageOrigin" || - name === "margin" || - name === "padding" || - name === "containerHeaderPadding" || - name === "containerSiderPadding" || - name === "containerFooterPadding" || - name === "containerBodyPadding" + name === 'radius' || + name === 'borderWidth' || + name === 'rotation' || + name === 'cardRadius' || + name === 'textSize' || + name === 'textWeight' || + name === 'textTransform' || + name === 'textDecoration' || + name === 'fontFamily' || + name === 'borderStyle' || + name === 'fontStyle' || + name === 'backgroundImage' || + name === 'backgroundImageRepeat' || + name === 'backgroundImageSize' || + name === 'backgroundImagePosition' || + name === 'backgroundImageOrigin' || + name === 'headerBackgroundImage' || + name === 'headerBackgroundImageRepeat' || + name === 'headerBackgroundImageSize' || + name === 'headerBackgroundImagePosition' || + name === 'headerBackgroundImageOrigin' || + name === 'footerBackgroundImage' || + name === 'footerBackgroundImageRepeat' || + name === 'footerBackgroundImageSize' || + name === 'footerBackgroundImagePosition' || + name === 'footerBackgroundImageOrigin' || + name === 'margin' || + name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' ) { childrenMap[name] = StringControl; } else { @@ -652,9 +847,9 @@ export function styleControl(colorConfig } }); // [K in Names]: new (params: CompParams) => ColorControl; - const label = trans("prop.style"); + const label = trans('prop.style'); return new ControlItemCompBuilder( - childrenMap as ToConstructor<{ [K in Names]: ColorControl }>, + childrenMap as ToConstructor<{[K in Names]: ColorControl}>, (props) => { // const x = useContext(CompNameContext); const theme = useContext(ThemeContext); @@ -662,7 +857,7 @@ export function styleControl(colorConfig return calcColors(props as ColorMap, colorConfigs, theme?.theme, bgColor); } ) - .setControlItemData({ filterText: label, searchChild: true }) + .setControlItemData({filterText: label, searchChild: true}) .setPropertyViewFn((children) => { const theme = useContext(ThemeContext); const bgColor = useContext(BackgroundColorContext); @@ -674,7 +869,8 @@ export function styleControl(colorConfig theme?.theme, bgColor ); - const showReset = Object.values(childrenToProps(children)).findIndex((item) => item) > -1; + const showReset = + Object.values(childrenToProps(children)).findIndex((item) => item) > -1; return ( <> @@ -685,40 +881,45 @@ export function styleControl(colorConfig colorConfigs.map((item) => { const name: Names = item.name; if ( - name === "radius" || - name === "margin" || - name === "padding" || - name === "containerHeaderPadding" || - name === "containerSiderPadding" || - name === "containerFooterPadding" || - name === "containerBodyPadding" || - name === "borderWidth" || - name === "rotation" || - name === "backgroundImage" || - name === "backgroundImageRepeat" || - name === "backgroundImageSize" || - name === "backgroundImagePosition" || - name === "backgroundImageOrigin" || - name === "headerBackgroundImage" || - name === "headerBackgroundImageRepeat" || - name === "headerBackgroundImageSize" || - name === "headerBackgroundImagePosition" || - name === "headerBackgroundImageOrigin" || - name === "footerBackgroundImage" || - name === "footerBackgroundImageRepeat" || - name === "footerBackgroundImageSize" || - name === "footerBackgroundImagePosition" || - name === "footerBackgroundImageOrigin" + name === 'radius' || + name === 'margin' || + name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' || + name === 'borderWidth' || + name === 'rotation' || + name === 'backgroundImage' || + name === 'backgroundImageRepeat' || + name === 'backgroundImageSize' || + name === 'backgroundImagePosition' || + name === 'backgroundImageOrigin' || + name === 'headerBackgroundImage' || + name === 'headerBackgroundImageRepeat' || + name === 'headerBackgroundImageSize' || + name === 'headerBackgroundImagePosition' || + name === 'headerBackgroundImageOrigin' || + name === 'footerBackgroundImage' || + name === 'footerBackgroundImageRepeat' || + name === 'footerBackgroundImageSize' || + name === 'footerBackgroundImagePosition' || + name === 'footerBackgroundImageOrigin' ) { - children[name]?.dispatchChangeValueAction(""); + children[name]?.dispatchChangeValueAction(''); } else { children[name] && - children[name].dispatch(children[name].changeValueAction("")); + children[name].dispatch( + children[name].changeValueAction('') + ); } }); }} > - + @@ -729,148 +930,211 @@ export function styleControl(colorConfig .filter( (config) => !config.platform || - (isMobile && config.platform === "mobile") || - (!isMobile && config.platform === "pc") + (isMobile && config.platform === 'mobile') || + (!isMobile && config.platform === 'pc') ) .map((config, index) => { const name: Names = config.name; - let depMsg = (config as SimpleColorConfig)["color"]; + let depMsg = (config as SimpleColorConfig)['color']; if (isDepColorConfig(config)) { if (config.depType === DEP_TYPE.CONTRAST_TEXT) { - depMsg = trans("style.contrastText"); - } else if (config.depType === DEP_TYPE.SELF && config.depTheme) { + depMsg = trans('style.contrastText'); + } else if ( + config.depType === DEP_TYPE.SELF && + config.depTheme + ) { depMsg = getThemeDetailName(config.depTheme); } else { - depMsg = trans("style.generated"); + depMsg = trans('style.generated'); } } return controlItem( - { filterText: config.label }, + {filterText: config.label},
- {(name === "radius" || - name === "gap" || - name === "cardRadius") + {name === 'radius' || + name === 'gap' || + name === 'cardRadius' ? ( - children[name] as InstanceType - ).propertyView({ - label: config.label, - preInputNode: , - placeholder: props[name], - }) - : name === "borderWidth" - ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], - }) : name === "borderStyle" - ? ( + }) + : name === 'borderWidth' + ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === "margin" - ? ( - children[name] as InstanceType + : name === 'borderStyle' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === "padding" || - name === "containerHeaderPadding" || - name === "containerSiderPadding" || - name === "containerFooterPadding" || - name === "containerBodyPadding" - ? ( - children[name] as InstanceType + : name === 'margin' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "textSize" - ? ( - children[name] as InstanceType + : name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "textWeight" - ? ( - children[name] as InstanceType + : name === 'textSize' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === "fontFamily" - ? ( - children[name] as InstanceType + : name === 'textWeight' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], - }) : name === "textDecoration" - ? ( - children[name] as InstanceType + }) + : name === 'fontFamily' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], - }) : name === "textTransform" - ? ( - children[name] as InstanceType + }) + : name === 'textDecoration' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === "fontStyle" - ? ( - children[name] as InstanceType + : name === 'textTransform' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage" - ? ( - children[name] as InstanceType + : name === 'fontStyle' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === "backgroundImageRepeat" || name === "headerBackgroundImageRepeat" || name === "footerBackgroundImageRepeat" - ? ( - children[name] as InstanceType + : name === 'backgroundImage' || + name === + 'headerBackgroundImage' || + name === 'footerBackgroundImage' + ? ( + children[name] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === "rotation" - ? ( - children[name] as InstanceType + : name === + 'backgroundImageRepeat' || + name === + 'headerBackgroundImageRepeat' || + name === + 'footerBackgroundImageRepeat' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) + : name === 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) : children[name].propertyView({ - label: config.label, - panelDefaultColor: props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - }) - - } + label: config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: depMsg, + })}
); })} @@ -881,13 +1145,15 @@ export function styleControl(colorConfig .build(); } -export function useStyle(colorConfigs: T) { +export function useStyle( + colorConfigs: T +) { const theme = useContext(ThemeContext); const bgColor = useContext(BackgroundColorContext); - type ColorMap = { [K in Names]: string }; + type ColorMap = {[K in Names]: string}; const props = {} as ColorMap; colorConfigs.forEach((config) => { - props[config.name as Names] = ""; + props[config.name as Names] = ''; }); return calcColors(props, colorConfigs, theme?.theme, bgColor); } diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 177400446..db82c3a0d 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1,9 +1,9 @@ -import { ThemeDetail } from "api/commonSettingApi"; -import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design"; -import { trans } from "i18n"; -import { StyleConfigType } from "./styleControl"; +import {ThemeDetail} from 'api/commonSettingApi'; +import {darkenColor, isDarkColor, lightenColor, toHex} from 'lowcoder-design'; +import {trans} from 'i18n'; +import {StyleConfigType} from './styleControl'; -type SupportPlatform = "pc" | "mobile"; +type SupportPlatform = 'pc' | 'mobile'; type CommonColorConfig = { readonly name: string; @@ -27,29 +27,73 @@ export type RotationConfig = CommonColorConfig & { readonly rotation: string; }; -export type BackgroundImageConfig = CommonColorConfig & { readonly backgroundImage: string; }; -export type BackgroundImageRepeatConfig = CommonColorConfig & { readonly backgroundImageRepeat: string; }; -export type BackgroundImageSizeConfig = CommonColorConfig & { readonly backgroundImageSize: string; }; -export type BackgroundImagePositionConfig = CommonColorConfig & { readonly backgroundImagePosition: string; }; -export type BackgroundImageOriginConfig = CommonColorConfig & { readonly backgroundImageOrigin: string; }; - -export type HeaderBackgroundImageConfig = CommonColorConfig & { readonly headerBackgroundImage: string; }; -export type HeaderBackgroundImageRepeatConfig = CommonColorConfig & { readonly headerBackgroundImageRepeat: string; }; -export type HeaderBackgroundImageSizeConfig = CommonColorConfig & { readonly headerBackgroundImageSize: string; }; -export type HeaderBackgroundImagePositionConfig = CommonColorConfig & { readonly headerBackgroundImagePosition: string; }; -export type HeaderBackgroundImageOriginConfig = CommonColorConfig & { readonly headerBackgroundImageOrigin: string; }; - -export type SiderBackgroundImageConfig = CommonColorConfig & { readonly siderBackgroundImage: string; }; -export type SiderBackgroundImageRepeatConfig = CommonColorConfig & { readonly siderBackgroundImageRepeat: string; }; -export type SiderBackgroundImageSizeConfig = CommonColorConfig & { readonly siderBackgroundImageSize: string; }; -export type SiderBackgroundImagePositionConfig = CommonColorConfig & { readonly siderBackgroundImagePosition: string; }; -export type SiderBackgroundImageOriginConfig = CommonColorConfig & { readonly siderBackgroundImageOrigin: string; }; - -export type FooterBackgroundImageConfig = CommonColorConfig & { readonly footerBackgroundImage: string; }; -export type FooterBackgroundImageRepeatConfig = CommonColorConfig & { readonly footerBackgroundImageRepeat: string; }; -export type FooterBackgroundImageSizeConfig = CommonColorConfig & { readonly footerBackgroundImageSize: string; }; -export type FooterBackgroundImagePositionConfig = CommonColorConfig & { readonly footerBackgroundImagePosition: string; }; -export type FooterBackgroundImageOriginConfig = CommonColorConfig & { readonly footerBackgroundImageOrigin: string; }; +export type AnimationConfig = CommonColorConfig & { + readonly animation: string; +}; + +export type BackgroundImageConfig = CommonColorConfig & { + readonly backgroundImage: string; +}; +export type BackgroundImageRepeatConfig = CommonColorConfig & { + readonly backgroundImageRepeat: string; +}; +export type BackgroundImageSizeConfig = CommonColorConfig & { + readonly backgroundImageSize: string; +}; +export type BackgroundImagePositionConfig = CommonColorConfig & { + readonly backgroundImagePosition: string; +}; +export type BackgroundImageOriginConfig = CommonColorConfig & { + readonly backgroundImageOrigin: string; +}; + +export type HeaderBackgroundImageConfig = CommonColorConfig & { + readonly headerBackgroundImage: string; +}; +export type HeaderBackgroundImageRepeatConfig = CommonColorConfig & { + readonly headerBackgroundImageRepeat: string; +}; +export type HeaderBackgroundImageSizeConfig = CommonColorConfig & { + readonly headerBackgroundImageSize: string; +}; +export type HeaderBackgroundImagePositionConfig = CommonColorConfig & { + readonly headerBackgroundImagePosition: string; +}; +export type HeaderBackgroundImageOriginConfig = CommonColorConfig & { + readonly headerBackgroundImageOrigin: string; +}; + +export type SiderBackgroundImageConfig = CommonColorConfig & { + readonly siderBackgroundImage: string; +}; +export type SiderBackgroundImageRepeatConfig = CommonColorConfig & { + readonly siderBackgroundImageRepeat: string; +}; +export type SiderBackgroundImageSizeConfig = CommonColorConfig & { + readonly siderBackgroundImageSize: string; +}; +export type SiderBackgroundImagePositionConfig = CommonColorConfig & { + readonly siderBackgroundImagePosition: string; +}; +export type SiderBackgroundImageOriginConfig = CommonColorConfig & { + readonly siderBackgroundImageOrigin: string; +}; + +export type FooterBackgroundImageConfig = CommonColorConfig & { + readonly footerBackgroundImage: string; +}; +export type FooterBackgroundImageRepeatConfig = CommonColorConfig & { + readonly footerBackgroundImageRepeat: string; +}; +export type FooterBackgroundImageSizeConfig = CommonColorConfig & { + readonly footerBackgroundImageSize: string; +}; +export type FooterBackgroundImagePositionConfig = CommonColorConfig & { + readonly footerBackgroundImagePosition: string; +}; +export type FooterBackgroundImageOriginConfig = CommonColorConfig & { + readonly footerBackgroundImageOrigin: string; +}; export type TextSizeConfig = CommonColorConfig & { readonly textSize: string; @@ -65,11 +109,11 @@ export type FontFamilyConfig = CommonColorConfig & { export type FontStyleConfig = CommonColorConfig & { readonly fontStyle: string; -} +}; export type borderStyleConfig = CommonColorConfig & { readonly borderStyle: string; -} +}; export type ContainerHeaderPaddingConfig = CommonColorConfig & { readonly containerHeaderPadding: string; @@ -97,11 +141,11 @@ export type PaddingConfig = CommonColorConfig & { export type TextTransformConfig = CommonColorConfig & { readonly textTransform: string; -} +}; export type TextDecorationConfig = CommonColorConfig & { readonly textDecoration: string; -} +}; export type DepColorConfig = CommonColorConfig & { readonly depName?: string; @@ -110,32 +154,76 @@ export type DepColorConfig = CommonColorConfig & { transformer: (color: string, ...rest: string[]) => string; }; -export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | RotationConfig | borderStyleConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddingConfig | ContainerSiderPaddingConfig | ContainerFooterPaddingConfig | ContainerBodyPaddingConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig | SiderBackgroundImageConfig | SiderBackgroundImageRepeatConfig | SiderBackgroundImageSizeConfig | SiderBackgroundImagePositionConfig | SiderBackgroundImageOriginConfig; +export type SingleColorConfig = + | SimpleColorConfig + | DepColorConfig + | RadiusConfig + | BorderWidthConfig + | RotationConfig + | borderStyleConfig + | BackgroundImageConfig + | BackgroundImageRepeatConfig + | BackgroundImageSizeConfig + | BackgroundImagePositionConfig + | BackgroundImageOriginConfig + | TextSizeConfig + | TextWeightConfig + | TextTransformConfig + | TextDecorationConfig + | FontFamilyConfig + | FontStyleConfig + | MarginConfig + | PaddingConfig + | ContainerHeaderPaddingConfig + | ContainerSiderPaddingConfig + | ContainerFooterPaddingConfig + | ContainerBodyPaddingConfig + | HeaderBackgroundImageConfig + | HeaderBackgroundImageRepeatConfig + | HeaderBackgroundImageSizeConfig + | HeaderBackgroundImagePositionConfig + | HeaderBackgroundImageOriginConfig + | FooterBackgroundImageConfig + | FooterBackgroundImageRepeatConfig + | FooterBackgroundImageSizeConfig + | FooterBackgroundImagePositionConfig + | FooterBackgroundImageOriginConfig + | SiderBackgroundImageConfig + | SiderBackgroundImageRepeatConfig + | SiderBackgroundImageSizeConfig + | SiderBackgroundImagePositionConfig + | SiderBackgroundImageOriginConfig + | AnimationConfig; export const defaultTheme: ThemeDetail = { - primary: "#3377FF", - textDark: "#222222", - textLight: "#FFFFFF", - canvas: "#F5F5F6", - primarySurface: "#FFFFFF", - borderRadius: "4px", - margin: "3px", - padding: "3px", - gridColumns: "24", - textSize: "14px", + primary: '#3377FF', + textDark: '#222222', + textLight: '#FFFFFF', + canvas: '#F5F5F6', + primarySurface: '#FFFFFF', + borderRadius: '4px', + margin: '3px', + padding: '3px', + gridColumns: '24', + textSize: '14px', + animation: 'bounce', }; -export const SURFACE_COLOR = "#FFFFFF"; -const SECOND_SURFACE_COLOR = "#D7D9E0"; -const ERROR_COLOR = "#F5222D"; -const SUCCESS_COLOR = "#079968"; +export const SURFACE_COLOR = '#FFFFFF'; +const SECOND_SURFACE_COLOR = '#D7D9E0'; +const ERROR_COLOR = '#F5222D'; +const SUCCESS_COLOR = '#079968'; export enum DEP_TYPE { - CONTRAST_TEXT = "contrastText", - SELF = "toSelf", + CONTRAST_TEXT = 'contrastText', + SELF = 'toSelf', } -export function contrastText(color: string, textDark: string, textLight: string) { +export function contrastText( + color: string, + textDark: string, + textLight: string +) { return isDarkColor(color) && color !== '#00000000' ? textLight : textDark; } @@ -189,7 +277,7 @@ function handleToUnchecked(color: string) { // return segmented background function handleToSegmentBackground(color: string) { if (toHex(color) === SURFACE_COLOR) { - return "#E1E3EB"; + return '#E1E3EB'; } return contrastBackground(color); } @@ -197,20 +285,23 @@ function handleToSegmentBackground(color: string) { // return table hover row background color export function handleToHoverRow(color: string) { if (isDarkColor(color)) { - return "#FFFFFF23"; + return '#FFFFFF23'; } else { - return "#00000007"; + return '#00000007'; } } // return table select row background color -export function handleToSelectedRow(color: string, primary: string = defaultTheme.primary) { +export function handleToSelectedRow( + color: string, + primary: string = defaultTheme.primary +) { if (toHex(color) === SURFACE_COLOR) { return `${toHex(primary)?.substring(0, 7)}16`; } else if (isDarkColor(color)) { - return "#FFFFFF33"; + return '#FFFFFF33'; } else { - return "#00000011"; + return '#00000011'; } } @@ -219,7 +310,7 @@ export function handleToHeadBg(color: string) { if (toHex(color) === SURFACE_COLOR) { return darkenColor(color, 0.06); } - if (toHex(color) === "#000000") { + if (toHex(color) === '#000000') { return SURFACE_COLOR; } if (isDarkColor(color)) { @@ -236,7 +327,7 @@ function handleToDividerText(color: string) { // return calendar select background color function handleCalendarSelectColor(color: string) { - return lightenColor(color, 0.3) + "4C"; + return lightenColor(color, 0.3) + '4C'; } // return lighten color @@ -247,7 +338,7 @@ function handleLightenColor(color: string) { // return calendar head button select background export function handleToCalendarHeadSelectBg(color: string) { if (toHex(color) === SURFACE_COLOR) { - return "#E1E3EB"; + return '#E1E3EB'; } return contrastBackground(color, 0.15); } @@ -255,221 +346,235 @@ export function handleToCalendarHeadSelectBg(color: string) { // return calendar today background export function handleToCalendarToday(color: string) { if (isDarkColor(color)) { - return "#FFFFFF33"; + return '#FFFFFF33'; } else { - return "#0000000c"; + return '#0000000c'; } } // return calendar text -function handleCalendarText(color: string, textDark: string, textLight: string) { +function handleCalendarText( + color: string, + textDark: string, + textLight: string +) { return isDarkColor(color) ? textLight : lightenColor(textDark, 0.1); } const TEXT = { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const STATIC_TEXT = { - name: "staticText", - label: trans("style.staticText"), - depTheme: "canvas", + name: 'staticText', + label: trans('style.staticText'), + depTheme: 'canvas', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const LABEL = { - name: "label", - label: trans("label"), - depTheme: "canvas", + name: 'label', + label: trans('label'), + depTheme: 'canvas', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const ACCENT = { - name: "accent", - label: trans("style.accent"), - depTheme: "primary", + name: 'accent', + label: trans('style.accent'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, - platform: "pc", + platform: 'pc', } as const; const VALIDATE = { - name: "validate", - label: trans("style.validate"), + name: 'validate', + label: trans('style.validate'), color: ERROR_COLOR, } as const; const ACCENT_VALIDATE = [ACCENT, VALIDATE] as const; const ROTATION = { - name: "rotation", - label: "Rotation", - rotation: "rotation", + name: 'rotation', + label: 'Rotation', + rotation: 'rotation', +} as const; + +const ANIMATION = { + name: 'animation', + label: trans('style.animation'), + animation: 'animation', } as const; const BORDER = { - name: "border", - label: trans("style.border"), - depName: "background", + name: 'border', + label: trans('style.border'), + depName: 'background', transformer: backgroundToBorder, } as const; const RADIUS = { - name: "radius", - label: trans("style.borderRadius"), - radius: "borderRadius", + name: 'radius', + label: trans('style.borderRadius'), + radius: 'borderRadius', } as const; const BORDER_WIDTH = { - name: "borderWidth", - label: trans("style.borderWidth"), - borderWidth: "borderWidth", + name: 'borderWidth', + label: trans('style.borderWidth'), + borderWidth: 'borderWidth', } as const; const BACKGROUND_IMAGE = { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", + name: 'backgroundImage', + label: trans('style.backgroundImage'), + backgroundImage: 'backgroundImage', } as const; const BACKGROUND_IMAGE_REPEAT = { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", + name: 'backgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + backgroundImageRepeat: 'backgroundImageRepeat', } as const; const BACKGROUND_IMAGE_SIZE = { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", + name: 'backgroundImageSize', + label: trans('style.backgroundImageSize'), + backgroundImageSize: 'backgroundImageSize', } as const; const BACKGROUND_IMAGE_POSITION = { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", + name: 'backgroundImagePosition', + label: trans('style.backgroundImagePosition'), + backgroundImagePosition: 'backgroundImagePosition', } as const; const BACKGROUND_IMAGE_ORIGIN = { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", + name: 'backgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + backgroundImageOrigin: 'backgroundImageOrigin', } as const; const MARGIN = { - name: "margin", - label: trans("style.margin"), - margin: "margin", + name: 'margin', + label: trans('style.margin'), + margin: 'margin', } as const; const PADDING = { - name: "padding", - label: trans("style.padding"), - padding: "padding", + name: 'padding', + label: trans('style.padding'), + padding: 'padding', } as const; const TEXT_SIZE = { - name: "textSize", - label: trans("style.textSize"), - textSize: "textSize", + name: 'textSize', + label: trans('style.textSize'), + textSize: 'textSize', } as const; const TEXT_WEIGHT = { - name: "textWeight", - label: trans("style.textWeight"), - textWeight: "textWeight", + name: 'textWeight', + label: trans('style.textWeight'), + textWeight: 'textWeight', } as const; const HOVER_BACKGROUND_COLOR = { - name: "hoverBackground", - label: trans("style.hoverBackground"), - hoverBackground: "hoverBackground" -} + name: 'hoverBackground', + label: trans('style.hoverBackground'), + hoverBackground: 'hoverBackground', +}; const FONT_FAMILY = { - name: "fontFamily", - label: trans("style.fontFamily"), - fontFamily: "fontFamily", + name: 'fontFamily', + label: trans('style.fontFamily'), + fontFamily: 'fontFamily', } as const; const FONT_STYLE = { - name: "fontStyle", - label: trans("style.fontStyle"), - fontStyle: "fontStyle", -} as const + name: 'fontStyle', + label: trans('style.fontStyle'), + fontStyle: 'fontStyle', +} as const; const CONTAINER_HEADER_PADDING = { - name: "containerHeaderPadding", - label: trans("style.containerHeaderPadding"), - containerHeaderPadding: "padding", + name: 'containerHeaderPadding', + label: trans('style.containerHeaderPadding'), + containerHeaderPadding: 'padding', } as const; const CONTAINER_SIDER_PADDING = { - name: "containerSiderPadding", - label: trans("style.containerSiderPadding"), - containerSiderPadding: "padding", + name: 'containerSiderPadding', + label: trans('style.containerSiderPadding'), + containerSiderPadding: 'padding', } as const; const CONTAINER_FOOTER_PADDING = { - name: "containerFooterPadding", - label: trans("style.containerFooterPadding"), - containerFooterPadding: "padding", + name: 'containerFooterPadding', + label: trans('style.containerFooterPadding'), + containerFooterPadding: 'padding', } as const; const CONTAINER_BODY_PADDING = { - name: "containerBodyPadding", - label: trans("style.containerBodyPadding"), - containerBodyPadding: "padding", + name: 'containerBodyPadding', + label: trans('style.containerBodyPadding'), + containerBodyPadding: 'padding', } as const; const TEXT_TRANSFORM = { - name: "textTransform", - label: trans("style.textTransform"), - textTransform: "textTransform" + name: 'textTransform', + label: trans('style.textTransform'), + textTransform: 'textTransform', } as const; const TEXT_DECORATION = { - name: "textDecoration", - label: trans("style.textDecoration"), - textDecoration: "textDecoration" + name: 'textDecoration', + label: trans('style.textDecoration'), + textDecoration: 'textDecoration', } as const; const BORDER_STYLE = { - name: "borderStyle", - label: trans("style.borderStyle"), - borderStyle: "borderStyle" + name: 'borderStyle', + label: trans('style.borderStyle'), + borderStyle: 'borderStyle', } as const; const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) => -({ - name: "border", - label: trans("style.border"), - color, -} as const); + ({ + name: 'border', + label: trans('style.border'), + color, + }) as const; const HEADER_BACKGROUND = { - name: "headerBackground", - label: trans("style.headerBackground"), - depName: "background", + name: 'headerBackground', + label: trans('style.headerBackground'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, } as const; const SIDER_BACKGROUND = { - name: "siderBackground", - label: trans("style.siderBackground"), - depName: "background", + name: 'siderBackground', + label: trans('style.siderBackground'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, } as const; -const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const; +const BG_STATIC_BORDER_RADIUS = [ + getBackground(), + getStaticBorder(), + RADIUS, +] as const; const STYLING_FIELDS_SEQUENCE = [ MARGIN, @@ -486,7 +591,7 @@ const STYLING_FIELDS_SEQUENCE = [ RADIUS, BORDER_WIDTH, ROTATION, -] +]; const STYLING_FIELDS_CONTAINER_SEQUENCE = [ MARGIN, @@ -495,44 +600,50 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ BORDER_STYLE, RADIUS, BORDER_WIDTH, + // ANIMATION, ]; const FILL = { - name: "fill", - label: trans("style.fill"), - depTheme: "primary", + name: 'fill', + label: trans('style.fill'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, } as const; const TRACK = { - name: "track", - label: trans("style.track"), + name: 'track', + label: trans('style.track'), color: SECOND_SURFACE_COLOR, } as const; const SUCCESS = { - name: "success", - label: trans("success"), + name: 'success', + label: trans('success'), color: SUCCESS_COLOR, } as const; -function getStaticBgBorderRadiusByBg(background: string, platform?: SupportPlatform) { +function getStaticBgBorderRadiusByBg( + background: string, + platform?: SupportPlatform +) { return [ getStaticBackground(background), - platform ? { ...BORDER, platform } : BORDER, - platform ? { ...RADIUS, platform } : RADIUS, + platform ? {...BORDER, platform} : BORDER, + platform ? {...RADIUS, platform} : RADIUS, ] as const; } -function getBgBorderRadiusByBg(background: keyof ThemeDetail = "primarySurface") { +function getBgBorderRadiusByBg( + background: keyof ThemeDetail = 'primarySurface' +) { return [getBackground(background), BORDER, RADIUS] as const; } -function getBackground(depTheme: keyof ThemeDetail = "primarySurface") { +function getBackground(depTheme: keyof ThemeDetail = 'primarySurface') { return { - name: "background", - label: trans("style.background"), + name: 'background', + label: trans('style.background'), depTheme: depTheme, depType: DEP_TYPE.SELF, transformer: toSelf, @@ -541,60 +652,73 @@ function getBackground(depTheme: keyof ThemeDetail = "primarySurface") { function getStaticBackground(color: string) { return { - name: "background", - label: trans("style.background"), + name: 'background', + label: trans('style.background'), color, } as const; } -function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: string, replacingStyles: any[]): any[] { - let temp = [] - let foundIndex = originalArray.findIndex((element) => element.name === styleToReplace) +function replaceAndMergeMultipleStyles( + originalArray: any[], + styleToReplace: string, + replacingStyles: any[] +): any[] { + let temp = []; + let foundIndex = originalArray.findIndex( + (element) => element.name === styleToReplace + ); if (foundIndex !== -1) { - let elementsBeforeFoundIndex = originalArray.filter((item, index) => index < foundIndex) - let elementsAfterFoundIndex = originalArray.filter((item, index) => index > foundIndex) - temp = [...elementsBeforeFoundIndex, ...replacingStyles, ...elementsAfterFoundIndex] - } else - temp = [...originalArray] - - return temp + let elementsBeforeFoundIndex = originalArray.filter( + (item, index) => index < foundIndex + ); + let elementsAfterFoundIndex = originalArray.filter( + (item, index) => index > foundIndex + ); + temp = [ + ...elementsBeforeFoundIndex, + ...replacingStyles, + ...elementsAfterFoundIndex, + ]; + } else temp = [...originalArray]; + + return temp; } export const ButtonStyle = [ getBackground('primary'), - ...STYLING_FIELDS_SEQUENCE + ...STYLING_FIELDS_SEQUENCE, ] as const; export const ToggleButtonStyle = [ - getBackground("canvas"), + getBackground('canvas'), ...STYLING_FIELDS_SEQUENCE.map((style) => { if (style.name === 'border') { return { ...style, depType: DEP_TYPE.SELF, - transformer: toSelf - } + transformer: toSelf, + }; } return { - ...style - } - }) + ...style, + }; + }), ] as const; export const TextStyle = [ { - name: "background", - label: trans("style.background"), - depTheme: "canvas", + name: 'background', + label: trans('style.background'), + depTheme: 'canvas', depType: DEP_TYPE.SELF, transformer: toSelf, }, ...STYLING_FIELDS_SEQUENCE, { - name: "links", - label: trans("style.links"), - depTheme: "primary", + name: 'links', + label: trans('style.links'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -602,9 +726,9 @@ export const TextStyle = [ export const MarginStyle = [ { - name: "margin", - label: trans("style.margin"), - margin: "margin", + name: 'margin', + label: trans('style.margin'), + margin: 'margin', }, ]; @@ -618,29 +742,29 @@ export const ContainerStyle = [ MARGIN, PADDING, { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", + name: 'backgroundImage', + label: trans('style.backgroundImage'), + backgroundImage: 'backgroundImage', }, { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", + name: 'backgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + backgroundImageRepeat: 'backgroundImageRepeat', }, { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", + name: 'backgroundImageSize', + label: trans('style.backgroundImageSize'), + backgroundImageSize: 'backgroundImageSize', }, { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", + name: 'backgroundImagePosition', + label: trans('style.backgroundImagePosition'), + backgroundImagePosition: 'backgroundImagePosition', }, { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", + name: 'backgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + backgroundImageOrigin: 'backgroundImageOrigin', }, ] as const; @@ -648,29 +772,29 @@ export const ContainerHeaderStyle = [ CONTAINER_HEADER_PADDING, HEADER_BACKGROUND, { - name: "headerBackgroundImage", - label: trans("style.backgroundImage"), - headerBackgroundImage: "headerBackgroundImage", + name: 'headerBackgroundImage', + label: trans('style.backgroundImage'), + headerBackgroundImage: 'headerBackgroundImage', }, { - name: "headerBackgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - headerBackgroundImageRepeat: "headerBackgroundImageRepeat", + name: 'headerBackgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + headerBackgroundImageRepeat: 'headerBackgroundImageRepeat', }, { - name: "headerBackgroundImageSize", - label: trans("style.backgroundImageSize"), - headerBackgroundImageSize: "headerBackgroundImageSize", + name: 'headerBackgroundImageSize', + label: trans('style.backgroundImageSize'), + headerBackgroundImageSize: 'headerBackgroundImageSize', }, { - name: "headerBackgroundImagePosition", - label: trans("style.backgroundImagePosition"), - headerBackgroundImagePosition: "headerBackgroundImagePosition", - } - , { - name: "headerBackgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - headerBackgroundImageOrigin: "headerBackgroundImageOrigin", + name: 'headerBackgroundImagePosition', + label: trans('style.backgroundImagePosition'), + headerBackgroundImagePosition: 'headerBackgroundImagePosition', + }, + { + name: 'headerBackgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + headerBackgroundImageOrigin: 'headerBackgroundImageOrigin', }, ] as const; @@ -678,116 +802,116 @@ export const ContainerSiderStyle = [ CONTAINER_SIDER_PADDING, SIDER_BACKGROUND, { - name: "siderBackgroundImage", - label: trans("style.backgroundImage"), - siderBackgroundImage: "siderBackgroundImage", + name: 'siderBackgroundImage', + label: trans('style.backgroundImage'), + siderBackgroundImage: 'siderBackgroundImage', }, { - name: "siderBackgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - siderBackgroundImageRepeat: "siderBackgroundImageRepeat", + name: 'siderBackgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + siderBackgroundImageRepeat: 'siderBackgroundImageRepeat', }, { - name: "siderBackgroundImageSize", - label: trans("style.backgroundImageSize"), - siderBackgroundImageSize: "siderBackgroundImageSize", + name: 'siderBackgroundImageSize', + label: trans('style.backgroundImageSize'), + siderBackgroundImageSize: 'siderBackgroundImageSize', }, { - name: "siderBackgroundImagePosition", - label: trans("style.backgroundImagePosition"), - siderBackgroundImagePosition: "siderBackgroundImagePosition", - } - , { - name: "siderBackgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - siderBackgroundImageOrigin: "siderBackgroundImageOrigin", + name: 'siderBackgroundImagePosition', + label: trans('style.backgroundImagePosition'), + siderBackgroundImagePosition: 'siderBackgroundImagePosition', + }, + { + name: 'siderBackgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + siderBackgroundImageOrigin: 'siderBackgroundImageOrigin', }, ] as const; export const ContainerBodyStyle = [ CONTAINER_BODY_PADDING, { - name: "background", - label: trans("style.background"), - depName: "background", + name: 'background', + label: trans('style.background'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", + name: 'backgroundImage', + label: trans('style.backgroundImage'), + backgroundImage: 'backgroundImage', }, { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", + name: 'backgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + backgroundImageRepeat: 'backgroundImageRepeat', }, { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", + name: 'backgroundImageSize', + label: trans('style.backgroundImageSize'), + backgroundImageSize: 'backgroundImageSize', }, { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", + name: 'backgroundImagePosition', + label: trans('style.backgroundImagePosition'), + backgroundImagePosition: 'backgroundImagePosition', }, { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", + name: 'backgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + backgroundImageOrigin: 'backgroundImageOrigin', }, ] as const; export const ContainerFooterStyle = [ CONTAINER_FOOTER_PADDING, { - name: "footerBackground", - label: trans("style.background"), - depName: "background", + name: 'footerBackground', + label: trans('style.background'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "footerBackgroundImage", - label: trans("style.backgroundImage"), - footerBackgroundImage: "footerBackgroundImage", + name: 'footerBackgroundImage', + label: trans('style.backgroundImage'), + footerBackgroundImage: 'footerBackgroundImage', }, { - name: "footerBackgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - footerBackgroundImageRepeat: "footerBackgroundImageRepeat", + name: 'footerBackgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + footerBackgroundImageRepeat: 'footerBackgroundImageRepeat', }, { - name: "footerBackgroundImageSize", - label: trans("style.backgroundImageSize"), - footerBackgroundImageSize: "footerBackgroundImageSize", + name: 'footerBackgroundImageSize', + label: trans('style.backgroundImageSize'), + footerBackgroundImageSize: 'footerBackgroundImageSize', }, { - name: "footerBackgroundImagePosition", - label: trans("style.backgroundImagePosition"), - footerBackgroundImagePosition: "footerBackgroundImagePosition", - } - , { - name: "footerBackgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - footerBackgroundImageOrigin: "footerBackgroundImageOrigin", - } + name: 'footerBackgroundImagePosition', + label: trans('style.backgroundImagePosition'), + footerBackgroundImagePosition: 'footerBackgroundImagePosition', + }, + { + name: 'footerBackgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + footerBackgroundImageOrigin: 'footerBackgroundImageOrigin', + }, ] as const; export const SliderStyle = [ FILL, { - name: "thumbBorder", - label: trans("style.thumbBorder"), - depName: "fill", + name: 'thumbBorder', + label: trans('style.thumbBorder'), + depName: 'fill', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "thumb", - label: trans("style.thumb"), + name: 'thumb', + label: trans('style.thumb'), color: SURFACE_COLOR, }, TRACK, @@ -812,8 +936,8 @@ export const ColorPickerStyle = [ export const AvatarStyle = [ { - name: "background", - label: trans("avatarComp.avatarBackground"), + name: 'background', + label: trans('avatarComp.avatarBackground'), color: '#bfbfbf', }, FILL, @@ -821,28 +945,28 @@ export const AvatarStyle = [ export const avatarContainerStyle = [ getStaticBackground(SURFACE_COLOR), - ...STYLING_FIELDS_CONTAINER_SEQUENCE + ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; export const avatarLabelStyle = [ getStaticBackground(SURFACE_COLOR), - ...STYLING_FIELDS_SEQUENCE + ...STYLING_FIELDS_SEQUENCE, ] as const; export const avatarGroupStyle = [ { - name: "fill", - label: trans("style.fill"), + name: 'fill', + label: trans('style.fill'), color: '#FFFFFF', }, - getBackground("primary"), + getBackground('primary'), ] as const; export const BadgeStyle = [ { - name: "badgeColor", - label: trans("floatButton.badgeColor"), - color: "#ff4d4f", + name: 'badgeColor', + label: trans('floatButton.badgeColor'), + color: '#ff4d4f', }, ] as const; @@ -855,25 +979,25 @@ export const FloatButtonStyle = [ export const TransferStyle = [ getStaticBackground(SURFACE_COLOR), - ...STYLING_FIELDS_CONTAINER_SEQUENCE + ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; export const CardStyle = [ - getStaticBackground("#ffffff"), + getStaticBackground('#ffffff'), { - name: "IconColor", - label: trans("card.IconColor"), - color: "#000000", + name: 'IconColor', + label: trans('card.IconColor'), + color: '#000000', }, { - name: "activateColor", - label: trans("card.hoverColor"), - depTheme: "primary", + name: 'activateColor', + label: trans('card.hoverColor'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, CONTAINER_BODY_PADDING, - ...STYLING_FIELDS_CONTAINER_SEQUENCE + ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; export const CardHeaderStyle = [ @@ -882,35 +1006,46 @@ export const CardHeaderStyle = [ ] as const; export const timerStyle = [ - getBackground("primarySurface"), - ...STYLING_FIELDS_SEQUENCE + getBackground('primarySurface'), + ...STYLING_FIELDS_SEQUENCE, ] as const; export const startButtonStyle = [ - getBackground("primarySurface"), - ...STYLING_FIELDS_SEQUENCE -] as const + getBackground('primarySurface'), + ...STYLING_FIELDS_SEQUENCE, +] as const; // end export const LabelStyle = [ - ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius' && style.name !== 'background') -] + ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter( + (style) => style.name !== 'radius' && style.name !== 'background' + ), +]; export const InputFieldStyle = [ getStaticBackground(SURFACE_COLOR), + { + name: 'animation', + label: trans('style.animation'), + animation: 'animation', + depTheme: 'primary', + depType: DEP_TYPE.SELF, + depName: 'animation', + transformer: toSelf, + }, ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; export const RatingStyle = [ { - name: "checked", - label: trans("style.checked"), - color: "#FFD400", + name: 'checked', + label: trans('style.checked'), + color: '#FFD400', }, { - name: "unchecked", - label: trans("style.unchecked"), + name: 'unchecked', + label: trans('style.unchecked'), color: SECOND_SURFACE_COLOR, }, MARGIN, @@ -919,20 +1054,20 @@ export const RatingStyle = [ export const SwitchStyle = [ { - name: "handle", - label: trans("style.handle"), + name: 'handle', + label: trans('style.handle'), color: SURFACE_COLOR, }, { - name: "unchecked", - label: trans("style.unchecked"), - depName: "handle", + name: 'unchecked', + label: trans('style.unchecked'), + depName: 'handle', transformer: handleToUnchecked, }, { - name: "checked", - label: trans("style.checked"), - depTheme: "primary", + name: 'checked', + label: trans('style.checked'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -941,56 +1076,74 @@ export const SwitchStyle = [ ] as const; export const SelectStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), + ]), ...ACCENT_VALIDATE, ] as const; const multiSelectCommon = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), + ]), { - name: "tags", - label: trans("style.tags"), - color: "#F5F5F6", - platform: "pc", + name: 'tags', + label: trans('style.tags'), + color: '#F5F5F6', + platform: 'pc', }, { - name: "tagsText", - label: trans("style.tagsText"), - depName: "tags", + name: 'tagsText', + label: trans('style.tagsText'), + depName: 'tags', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, - platform: "pc", + platform: 'pc', }, ] as const; export const MultiSelectStyle = [ ...multiSelectCommon, { - name: "multiIcon", - label: trans("style.multiIcon"), - depTheme: "primary", + name: 'multiIcon', + label: trans('style.multiIcon'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, - platform: "pc", + platform: 'pc', }, ...ACCENT_VALIDATE, ] as const; export const ChildrenMultiSelectStyle = [ ...STYLING_FIELDS_SEQUENCE, - getStaticBackground(SURFACE_COLOR) + getStaticBackground(SURFACE_COLOR), ] as const; export const TabContainerStyle = [ // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties - ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style) => ['border', 'radius', 'borderWidth', 'margin', 'padding'].includes(style.name) === false), ...STYLING_FIELDS_SEQUENCE], 'text', [{ - name: "tabText", - label: trans("style.tabText"), - depName: "headerBackground", - depType: TEXT, - transformer: toSelf, - },]), - ACCENT + ...replaceAndMergeMultipleStyles( + [ + ...ContainerStyle.filter( + (style) => + ['border', 'radius', 'f', 'margin', 'padding'].includes( + style.name + ) === false + ), + ...STYLING_FIELDS_SEQUENCE, + ], + 'text', + [ + { + name: 'tabText', + label: trans('style.tabText'), + depName: 'headerBackground', + depType: TEXT, + transformer: toSelf, + }, + ] + ), + ACCENT, ] as const; export const ModalStyle = [ @@ -1002,11 +1155,11 @@ export const ModalStyle = [ BACKGROUND_IMAGE_REPEAT, BACKGROUND_IMAGE_SIZE, BACKGROUND_IMAGE_POSITION, - BACKGROUND_IMAGE_ORIGIN + BACKGROUND_IMAGE_ORIGIN, ] as const; export const CascaderStyle = [ - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), TEXT, ACCENT, MARGIN, @@ -1016,70 +1169,78 @@ export const CascaderStyle = [ function checkAndUncheck() { return [ { - name: "checkedBackground", - label: trans("style.checkedBackground"), - depTheme: "primary", + name: 'checkedBackground', + label: trans('style.checkedBackground'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "uncheckedBackground", - label: trans("style.uncheckedBackground"), + name: 'uncheckedBackground', + label: trans('style.uncheckedBackground'), color: SURFACE_COLOR, }, { - name: "uncheckedBorder", - label: trans("style.uncheckedBorder"), - depName: "uncheckedBackground", + name: 'uncheckedBorder', + label: trans('style.uncheckedBorder'), + depName: 'uncheckedBackground', transformer: backgroundToBorder, }, ] as const; } export const CheckboxStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + STATIC_TEXT, + VALIDATE, + ]).filter((style) => style.name !== 'border'), ...checkAndUncheck(), { - name: "checked", - label: trans("style.checked"), - depName: "checkedBackground", + name: 'checked', + label: trans('style.checked'), + depName: 'checkedBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, - HOVER_BACKGROUND_COLOR + HOVER_BACKGROUND_COLOR, ] as const; export const RadioStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + STATIC_TEXT, + VALIDATE, + ]).filter((style) => style.name !== 'border' && style.name !== 'radius'), ...checkAndUncheck(), { - name: "checked", - label: trans("style.checked"), - depName: "uncheckedBackground", + name: 'checked', + label: trans('style.checked'), + depName: 'uncheckedBackground', depType: DEP_TYPE.SELF, transformer: toSelf, }, - HOVER_BACKGROUND_COLOR + HOVER_BACKGROUND_COLOR, ] as const; export const SegmentStyle = [ LABEL, - ...STYLING_FIELDS_SEQUENCE.filter((style) => ['border', 'borderWidth'].includes(style.name) === false), + ...STYLING_FIELDS_SEQUENCE.filter( + (style) => ['border', 'borderWidth'].includes(style.name) === false + ), { - name: "indicatorBackground", - label: trans("style.indicatorBackground"), + name: 'indicatorBackground', + label: trans('style.indicatorBackground'), color: SURFACE_COLOR, }, { - name: "background", - label: trans("style.background"), - depName: "indicatorBackground", + name: 'background', + label: trans('style.background'), + depName: 'indicatorBackground', transformer: handleToSegmentBackground, }, { - name: "text", - label: trans("text"), - depName: "indicatorBackground", + name: 'text', + label: trans('text'), + depName: 'indicatorBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1088,65 +1249,69 @@ export const SegmentStyle = [ export const StepsStyle = [ { - name: "activeBackground", - label: trans("style.accent"), - depName: "activeBackground", + name: 'activeBackground', + label: trans('style.accent'), + depName: 'activeBackground', transformer: handleToSegmentBackground, }, { - name: "titleText", - label: trans("title"), - depName: "background", + name: 'titleText', + label: trans('title'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, - ...STYLING_FIELDS_SEQUENCE.filter((style) => ['background', 'textSize','textDecoration'].includes(style.name) === false), + ...STYLING_FIELDS_SEQUENCE.filter( + (style) => + ['background', 'textSize', 'textDecoration'].includes(style.name) === + false + ), getBackground(), { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", + name: 'backgroundImage', + label: trans('style.backgroundImage'), + backgroundImage: 'backgroundImage', }, { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", + name: 'backgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + backgroundImageRepeat: 'backgroundImageRepeat', }, { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", + name: 'backgroundImageSize', + label: trans('style.backgroundImageSize'), + backgroundImageSize: 'backgroundImageSize', }, { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", + name: 'backgroundImagePosition', + label: trans('style.backgroundImagePosition'), + backgroundImagePosition: 'backgroundImagePosition', }, { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", + name: 'backgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + backgroundImageOrigin: 'backgroundImageOrigin', }, ] as const; const LinkTextStyle = [ { - name: "text", - label: trans("text"), - depTheme: "primary", + name: 'text', + label: trans('text'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "hoverText", - label: "Hover text", // trans("style.hoverRowBackground"), - depName: "text", + name: 'hoverText', + label: 'Hover text', // trans("style.hoverRowBackground"), + depName: 'text', transformer: handleToHoverLink, }, { - name: "activeText", - label: "Active text", // trans("style.hoverRowBackground"), - depName: "text", + name: 'activeText', + label: 'Active text', // trans("style.hoverRowBackground"), + depName: 'text', transformer: handleToHoverLink, }, ] as const; @@ -1154,7 +1319,7 @@ const LinkTextStyle = [ export const TableStyle = [ MARGIN, PADDING, - BORDER_STYLE, + BORDER_STYLE, BORDER_WIDTH, ...BG_STATIC_BORDER_RADIUS, ] as const; @@ -1164,9 +1329,9 @@ export const TableToolbarStyle = [ getBackground(), getStaticBorder(), { - name: "toolbarText", - label: trans("style.toolbarText"), - depName: "toolbarBackground", + name: 'toolbarText', + label: trans('style.toolbarText'), + depName: 'toolbarBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: toSelf, }, @@ -1181,21 +1346,21 @@ export const TableHeaderStyle = [ getStaticBackground(SURFACE_COLOR), getBackground('primarySurface'), { - name: "headerBackground", - label: trans("style.tableHeaderBackground"), - depName: "background", + name: 'headerBackground', + label: trans('style.tableHeaderBackground'), + depName: 'background', transformer: handleToHeadBg, }, getStaticBorder(), { - name: "borderWidth", - label: trans("style.borderWidth"), - borderWidth: "borderWidth", + name: 'borderWidth', + label: trans('style.borderWidth'), + borderWidth: 'borderWidth', }, { - name: "headerText", - label: trans("style.tableHeaderText"), - depName: "headerBackground", + name: 'headerText', + label: trans('style.tableHeaderText'), + depName: 'headerBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1210,32 +1375,32 @@ export const TableRowStyle = [ ...BG_STATIC_BORDER_RADIUS, getBackground(), { - name: "selectedRowBackground", - label: trans("style.selectedRowBackground"), - depName: "background", - depTheme: "primary", + name: 'selectedRowBackground', + label: trans('style.selectedRowBackground'), + depName: 'background', + depTheme: 'primary', transformer: handleToSelectedRow, }, { - name: "hoverRowBackground", - label: trans("style.hoverRowBackground"), - depName: "background", + name: 'hoverRowBackground', + label: trans('style.hoverRowBackground'), + depName: 'background', transformer: handleToHoverRow, }, { - name: "alternateBackground", - label: trans("style.alternateRowBackground"), - depName: "background", + name: 'alternateBackground', + label: trans('style.alternateRowBackground'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, }, ] as const; export const TableColumnStyle = [ - getStaticBackground("#00000000"), + getStaticBackground('#00000000'), getStaticBorder(), MARGIN, - + RADIUS, TEXT, TEXT_SIZE, @@ -1244,27 +1409,34 @@ export const TableColumnStyle = [ FONT_STYLE, ] as const; -export const TableColumnLinkStyle = [ - ...LinkTextStyle, -] as const; +export const TableColumnLinkStyle = [...LinkTextStyle] as const; export const FileStyle = [ // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), getStaticBackground(SURFACE_COLOR), - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [getStaticBorder('#00000000')]), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ + getStaticBorder('#00000000'), + ]), // TEXT, ACCENT, MARGIN, PADDING ] as const; export const FileViewerStyle = [ - getStaticBackground("#FFFFFF"), - getStaticBorder("#00000000"), + getStaticBackground('#FFFFFF'), + getStaticBorder('#00000000'), RADIUS, MARGIN, PADDING, - BORDER_WIDTH + BORDER_WIDTH, ] as const; -export const IframeStyle = [getBackground(), getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const; +export const IframeStyle = [ + getBackground(), + getStaticBorder('#00000000'), + RADIUS, + BORDER_WIDTH, + MARGIN, + PADDING, +] as const; export const DateTimeStyle = [ ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), @@ -1278,22 +1450,23 @@ export const DateTimeStyle = [ function handleToHoverLink(color: string) { if (isDarkColor(color)) { - return "#FFFFFF23"; + return '#FFFFFF23'; } else { - return "#00000007"; + return '#00000007'; } } export const LinkStyle = [ - { - name: "background", - label: trans("style.background"), - depTheme: "canvas", + name: 'background', + label: trans('style.background'), + depTheme: 'canvas', depType: DEP_TYPE.SELF, transformer: toSelf, }, - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [...LinkTextStyle]) + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + ...LinkTextStyle, + ]), ] as const; export const DividerStyle = [ @@ -1305,44 +1478,53 @@ export const DividerStyle = [ ...STYLING_FIELDS_SEQUENCE.map((style) => { if (style.name === 'text') { return { - name: "text", - label: trans("text"), - depName: "color", + name: 'text', + label: trans('text'), + depName: 'color', transformer: handleToDividerText, - } + }; } - return style - }) + return style; + }), ] as const; // Hidden border and borderWidth properties as AntD doesnt allow these properties for progress bar export const ProgressStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [{ - name: "text", - label: trans("text"), - depTheme: "canvas", - depType: DEP_TYPE.CONTRAST_TEXT, - transformer: contrastText, - }]).filter((style) => ['border', 'borderWidth', 'textTransform', 'textDecoration'].includes(style.name) === false), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + { + name: 'text', + label: trans('text'), + depTheme: 'canvas', + depType: DEP_TYPE.CONTRAST_TEXT, + transformer: contrastText, + }, + ]).filter( + (style) => + ['border', 'borderWidth', 'textTransform', 'textDecoration'].includes( + style.name + ) === false + ), TRACK, FILL, SUCCESS, ] as const; -export const CircleProgressStyle = [...ProgressStyle.filter((style) => style.name !== 'radius')] +export const CircleProgressStyle = [ + ...ProgressStyle.filter((style) => style.name !== 'radius'), +]; export const NavigationStyle = [ ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ACCENT, - getStaticBackground("#FFFFFF00") - ]) + getStaticBackground('#FFFFFF00'), + ]), // { // name: "text", // label: trans("text"), @@ -1362,16 +1544,23 @@ export const NavigationStyle = [ // BORDER_WIDTH ] as const; -export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const; +export const ImageStyle = [ + getStaticBorder('#00000000'), + RADIUS, + BORDER_WIDTH, + MARGIN, + PADDING, +] as const; export const IconStyle = [ - getStaticBackground("#00000000"), - getStaticBorder("#00000000"), + getStaticBackground('#00000000'), + getStaticBorder('#00000000'), FILL, RADIUS, BORDER_WIDTH, MARGIN, - PADDING] as const; + PADDING, +] as const; export const ListViewStyle = BG_STATIC_BORDER_RADIUS; @@ -1380,37 +1569,37 @@ export const JsonSchemaFormStyle = BG_STATIC_BORDER_RADIUS; export const QRCodeStyle = [ getBackground(), { - name: "color", - label: trans("color"), - color: "#000000", + name: 'color', + label: trans('color'), + color: '#000000', }, MARGIN, PADDING, BORDER, RADIUS, - BORDER_WIDTH + BORDER_WIDTH, ] as const; export const TimeLineStyle = [ getBackground(), { - name: "titleColor", - label: trans("timeLine.titleColor"), - color: "#000000", + name: 'titleColor', + label: trans('timeLine.titleColor'), + color: '#000000', }, { - name: "labelColor", - label: trans("timeLine.labelColor"), - color: "#000000", + name: 'labelColor', + label: trans('timeLine.labelColor'), + color: '#000000', }, { - name: "subTitleColor", - label: trans("timeLine.subTitleColor"), - color: "#848484", + name: 'subTitleColor', + label: trans('timeLine.subTitleColor'), + color: '#848484', }, MARGIN, PADDING, - RADIUS + RADIUS, ] as const; export const TreeStyle = [ @@ -1419,56 +1608,57 @@ export const TreeStyle = [ VALIDATE, ] as const; -export const TreeSelectStyle = [...multiSelectCommon, ...ACCENT_VALIDATE] as const; +export const TreeSelectStyle = [ + ...multiSelectCommon, + ...ACCENT_VALIDATE, +] as const; -export const DrawerStyle = [getBackground()] as const +export const DrawerStyle = [getBackground()] as const; export const JsonEditorStyle = [LABEL] as const; -export const EchartsStyle = [ - getBackground("primarySurface"), -] as const; +export const EchartsStyle = [getBackground('primarySurface')] as const; export const CalendarStyle = [ - getBackground("primarySurface"), + getBackground('primarySurface'), { - name: "border", - label: trans("style.border"), - depName: "background", + name: 'border', + label: trans('style.border'), + depName: 'background', transformer: calendarBackgroundToBorder, }, RADIUS, { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: handleCalendarText, }, { - name: "headerBtnBackground", - label: trans("calendar.headerBtnBackground"), - depName: "background", + name: 'headerBtnBackground', + label: trans('calendar.headerBtnBackground'), + depName: 'background', transformer: handleLightenColor, }, { - name: "btnText", - label: trans("calendar.btnText"), - depName: "headerBtnBackground", + name: 'btnText', + label: trans('calendar.btnText'), + depName: 'headerBtnBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, { - name: "title", - label: trans("calendar.title"), - depName: "background", + name: 'title', + label: trans('calendar.title'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, { - name: "selectBackground", - label: trans("calendar.selectBackground"), - depTheme: "primary", + name: 'selectBackground', + label: trans('calendar.selectBackground'), + depTheme: 'primary', transformer: handleCalendarSelectColor, }, ] as const; @@ -1476,31 +1666,31 @@ export const CalendarStyle = [ export const SignatureStyle = [ ...getBgBorderRadiusByBg(), { - name: "pen", - label: trans("style.pen"), - color: "#000000", + name: 'pen', + label: trans('style.pen'), + color: '#000000', }, { - name: "tips", - label: trans("style.tips"), - color: "#B8B9BF", + name: 'tips', + label: trans('style.tips'), + color: '#B8B9BF', }, { - name: "footerIcon", - label: trans("style.footerIcon"), - color: "#222222", + name: 'footerIcon', + label: trans('style.footerIcon'), + color: '#222222', }, MARGIN, PADDING, - BORDER_WIDTH + BORDER_WIDTH, ] as const; // Added by Aqib Mirza export const LottieStyle = [ { - name: "background", - label: trans("style.background"), - depTheme: "canvas", + name: 'background', + label: trans('style.background'), + depTheme: 'canvas', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1510,16 +1700,16 @@ export const LottieStyle = [ export const CommentStyle = [ { - name: "background", - label: trans("style.background"), - depTheme: "primarySurface", + name: 'background', + label: trans('style.background'), + depTheme: 'primarySurface', depType: DEP_TYPE.SELF, transformer: toSelf, }, MARGIN, PADDING, RADIUS, -] as const +] as const; export const ResponsiveLayoutRowStyle = [ ...BG_STATIC_BORDER_RADIUS, @@ -1536,9 +1726,9 @@ export const ResponsiveLayoutColStyle = [ export const NavLayoutStyle = [ ...getBgBorderRadiusByBg(), { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', // depTheme: "primary", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, @@ -1548,13 +1738,13 @@ export const NavLayoutStyle = [ ] as const; export const NavLayoutItemStyle = [ - getBackground("primarySurface"), + getBackground('primarySurface'), getStaticBorder('transparent'), RADIUS, { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1563,42 +1753,44 @@ export const NavLayoutItemStyle = [ ] as const; export const NavLayoutItemHoverStyle = [ - getBackground("canvas"), + getBackground('canvas'), getStaticBorder('transparent'), { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ] as const; export const NavLayoutItemActiveStyle = [ - getBackground("primary"), + getBackground('primary'), getStaticBorder('transparent'), { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ] as const; -export const CarouselStyle = [getBackground("canvas")] as const; +export const CarouselStyle = [getBackground('canvas')] as const; export const RichTextEditorStyle = [ getStaticBorder(), - getBackground("primarySurface"), + getBackground('primarySurface'), RADIUS, - BORDER_WIDTH + BORDER_WIDTH, ] as const; export type QRCodeStyleType = StyleConfigType; export type AvatarStyleType = StyleConfigType; export type AvatarLabelStyleType = StyleConfigType; -export type AvatarContainerStyleType = StyleConfigType; +export type AvatarContainerStyleType = StyleConfigType< + typeof avatarContainerStyle +>; export type AvatarGroupStyleType = StyleConfigType; export type FloatButtonStyleType = StyleConfigType; export type BadgeStyleType = StyleConfigType; @@ -1616,16 +1808,24 @@ export type ButtonStyleType = StyleConfigType; export type ToggleButtonStyleType = StyleConfigType; export type TextStyleType = StyleConfigType; export type ContainerStyleType = StyleConfigType; -export type ContainerHeaderStyleType = StyleConfigType; +export type ContainerHeaderStyleType = StyleConfigType< + typeof ContainerHeaderStyle +>; export type ContainerBodyStyleType = StyleConfigType; -export type ContainerSiderStyleType = StyleConfigType; -export type ContainerFooterStyleType = StyleConfigType; +export type ContainerSiderStyleType = StyleConfigType< + typeof ContainerSiderStyle +>; +export type ContainerFooterStyleType = StyleConfigType< + typeof ContainerFooterStyle +>; export type SliderStyleType = StyleConfigType; export type RatingStyleType = StyleConfigType; export type SwitchStyleType = StyleConfigType; export type SelectStyleType = StyleConfigType; export type MultiSelectStyleType = StyleConfigType; -export type ChildrenMultiSelectStyleType = StyleConfigType; +export type ChildrenMultiSelectStyleType = StyleConfigType< + typeof ChildrenMultiSelectStyle +>; export type TabContainerStyleType = StyleConfigType; export type ModalStyleType = StyleConfigType; export type CascaderStyleType = StyleConfigType; @@ -1638,7 +1838,9 @@ export type TableHeaderStyleType = StyleConfigType; export type TableToolbarStyleType = StyleConfigType; export type TableRowStyleType = StyleConfigType; export type TableColumnStyleType = StyleConfigType; -export type TableColumnLinkStyleType = StyleConfigType; +export type TableColumnLinkStyleType = StyleConfigType< + typeof TableColumnLinkStyle +>; export type FileStyleType = StyleConfigType; export type FileViewerStyleType = StyleConfigType; export type IframeStyleType = StyleConfigType; @@ -1651,64 +1853,86 @@ export type NavigationStyleType = StyleConfigType; export type ImageStyleType = StyleConfigType; export type IconStyleType = StyleConfigType; export type ListViewStyleType = StyleConfigType; -export type JsonSchemaFormStyleType = StyleConfigType; +export type JsonSchemaFormStyleType = StyleConfigType< + typeof JsonSchemaFormStyle +>; export type TreeSelectStyleType = StyleConfigType; export type DrawerStyleType = StyleConfigType; export type JsonEditorStyleType = StyleConfigType; export type CalendarStyleType = StyleConfigType; export type SignatureStyleType = StyleConfigType; export type CarouselStyleType = StyleConfigType; -export type RichTextEditorStyleType = StyleConfigType; -export type ResponsiveLayoutRowStyleType = StyleConfigType; -export type ResponsiveLayoutColStyleType = StyleConfigType; +export type RichTextEditorStyleType = StyleConfigType< + typeof RichTextEditorStyle +>; +export type ResponsiveLayoutRowStyleType = StyleConfigType< + typeof ResponsiveLayoutRowStyle +>; +export type ResponsiveLayoutColStyleType = StyleConfigType< + typeof ResponsiveLayoutColStyle +>; export type NavLayoutStyleType = StyleConfigType; export type NavLayoutItemStyleType = StyleConfigType; -export type NavLayoutItemHoverStyleType = StyleConfigType; -export type NavLayoutItemActiveStyleType = StyleConfigType; +export type NavLayoutItemHoverStyleType = StyleConfigType< + typeof NavLayoutItemHoverStyle +>; +export type NavLayoutItemActiveStyleType = StyleConfigType< + typeof NavLayoutItemActiveStyle +>; export function widthCalculator(margin: string) { - const marginArr = margin?.trim().replace(/\s+/g, ' ').split(" ") || ""; + const marginArr = margin?.trim().replace(/\s+/g, ' ').split(' ') || ''; if (marginArr.length === 1) { - return `calc(100% - ${parseInt(margin.replace(/[^\d.]/g, "")) * 2 + - (margin.replace(/[0-9]/g, "") || "px") - })`; + return `calc(100% - ${ + parseInt(margin.replace(/[^\d.]/g, '')) * 2 + + (margin.replace(/[0-9]/g, '') || 'px') + })`; } else if (marginArr.length === 2 || marginArr.length === 3) { - return `calc(100% - ${parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 + - (marginArr[1].replace(/[0-9]/g, "") || 'px') - })`; + return `calc(100% - ${ + parseInt(marginArr[1].replace(/[^\d.]/g, '')) * 2 + + (marginArr[1].replace(/[0-9]/g, '') || 'px') + })`; } else { - return `calc(100% - ${parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") + - (marginArr[1]?.replace(/[0-9]/g, "") || "px") - } - ${parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") + - (marginArr[3]?.replace(/[0-9]/g, "") || "px") - })`; + return `calc(100% - ${ + parseInt(marginArr[1]?.replace(/[^\d.]/g, '') || '0') + + (marginArr[1]?.replace(/[0-9]/g, '') || 'px') + } - ${ + parseInt(marginArr[3]?.replace(/[^\d.]/g, '') || '0') + + (marginArr[3]?.replace(/[0-9]/g, '') || 'px') + })`; } } export function heightCalculator(margin: string) { - const marginArr = margin?.trim().split(" ") || ""; + const marginArr = margin?.trim().split(' ') || ''; if (marginArr.length === 1 || marginArr.length === 2) { - return `calc(100% - ${parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 + - (marginArr[0].replace(/[0-9]/g, "") || 'px') - })`; + return `calc(100% - ${ + parseInt(marginArr[0].replace(/[^\d.]/g, '')) * 2 + + (marginArr[0].replace(/[0-9]/g, '') || 'px') + })`; } else if (marginArr.length > 2) { - return `calc(100% - ${parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + - (marginArr[0]?.replace(/[0-9]/g, "") || "px") - } - ${parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") + - (marginArr[2]?.replace(/[0-9]/g, "") || "px") - })`; + return `calc(100% - ${ + parseInt(marginArr[0]?.replace(/[^\d.]/g, '') || '0') + + (marginArr[0]?.replace(/[0-9]/g, '') || 'px') + } - ${ + parseInt(marginArr[2]?.replace(/[^\d.]/g, '') || '0') + + (marginArr[2]?.replace(/[0-9]/g, '') || 'px') + })`; } } export function marginCalculator(margin: string) { - const marginArr = margin?.trim().split(" ") || ""; + const marginArr = margin?.trim().split(' ') || ''; if (marginArr.length === 1) { - return parseInt(margin.replace(/[^\d.]/g, "")) * 2; + return parseInt(margin.replace(/[^\d.]/g, '')) * 2; } else if (marginArr.length === 2) { - return parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2; + return parseInt(marginArr[0].replace(/[^\d.]/g, '')) * 2; } else { - return parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") + return ( + parseInt(marginArr[0]?.replace(/[^\d.]/g, '') || '0') + + parseInt(marginArr[2]?.replace(/[^\d.]/g, '') || '0') + ); } } -export type { ThemeDetail }; +export type {ThemeDetail}; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 735888f91..c48f7d2ab 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1,3577 +1,3838 @@ -import table from "./componentDocExtra/table.md?url"; +import table from './componentDocExtra/table.md?url'; export const en = { - "productName": "Lowcoder", - "productDesc": "Create software applications for your company and customers with minimal coding experience. Lowcoder is an excellent alternative to Retool, Appsmith, and Tooljet.", - "notSupportedBrowser": "Your current browser may have compatibility issues. For an optimal user experience, please use the latest version of Chrome.", - "create": "Create", - "move": "Move", - "addItem": "Add", - "newItem": "New", - "copy": "Copy", - "rename": "Rename", - "delete": "Delete", - "deletePermanently": "Delete Permanently", - "remove": "Remove", - "recover": "Recover", - "edit": "Edit", - "view": "View", - "value": "Value", - "data": "Data", - "information": "Information", - "success": "Success", - "warning": "Warning", - "error": "Error", - "reference": "Reference", - "text": "Text", - "basic": "Basic", - "label": "Label", - "layout": "Layout", - "color": "Color", - "form": "Form", - "menu": "Menu", - "menuItem": "Menu Item", - "ok": "OK", - "cancel": "Cancel", - "finish": "Finish", - "reset": "Reset", - "icon": "Icon", - "code": "Code", - "title": "Title", - "emptyContent": "Empty Content", - "more": "More", - "search": "Search", - "back": "Back", - "accessControl": "Access Control", - "copySuccess": "Copied Successfully", - "copyError": "Copy Error", - "api": { - "publishSuccess": "Published Successfully", - "recoverFailed": "Recovery Failed", - "needUpdate": "Your current version is outdated. Please upgrade to the latest version." - }, - "codeEditor": { - "notSupportAutoFormat": "The current code editor does not support auto-formatting.", - "fold": "Fold" - }, - "exportMethod": { - "setDesc": "Set Property: {property}", - "clearDesc": "Clear Property: {property}", - "resetDesc": "Reset Property: {property} to Default Value" - }, - "method": { - "focus": "Set Focus", - "focusOptions": "Focus options. See HTMLElement.focus()", - "blur": "Remove Focus", - "click": "Click", - "select": "Select All Text", - "setSelectionRange": "Set Start and End Positions of Text Selection", - "selectionStart": "0-based Index of First Selected Character", - "selectionEnd": "0-based Index of Character After Last Selected Character", - "setRangeText": "Replace Text Range", - "replacement": "String to Insert", - "replaceStart": "0-based Index of First Character to Replace", - "replaceEnd": "0-based Index of Character After Last Character to Replace" - }, - "errorBoundary": { - "encounterError": "Component loading failed. Please check your configuration.", - "clickToReload": "Click to Reload", - "errorMsg": "Error: " - }, - "imgUpload": { - "notSupportError": "Supports only {types} image types", - "exceedSizeError": "Image size must not exceed {size}" - }, - "gridCompOperator": { - "notSupport": "Not Supported", - "selectAtLeastOneComponent": "Please select at least one component", - "selectCompFirst": "Select components before copying", - "noContainerSelected": "[Bug] No container selected", - "deleteCompsSuccess": "Deleted successfully. Press {undoKey} to undo.", - "deleteCompsTitle": "Delete Components", - "deleteCompsBody": "Are you sure you want to delete {compNum} selected components?", - "cutCompsSuccess": "Cut successfully. Press {pasteKey} to paste, or {undoKey} to undo." - }, - "leftPanel": { - "queries": "Data Queries in your App", - "globals": "Global Data Variables", - "propTipsArr": "{num} Items", - "propTips": "{num} Keys", - "propTipArr": "{num} Item", - "propTip": "{num} Key", - "stateTab": "State", - "settingsTab": "Settings", - "toolbarTitle": "Individualization", - "toolbarPreload": "Scripts and Styles", - "components": "Active Components", - "modals": "in-App Modals", - "expandTip": "Click to Expand {component}'s Data", - "collapseTip": "Click to Collapse {component}'s Data", - "layers": "Layers", - "activatelayers": "Use dynamic Layers", - "selectedComponents": "Selected Components...", - "displayComponents": "control Display", - "lockComponents": "control Position", + productName: 'Lowcoder', + productDesc: + 'Create software applications for your company and customers with minimal coding experience. Lowcoder is an excellent alternative to Retool, Appsmith, and Tooljet.', + notSupportedBrowser: + 'Your current browser may have compatibility issues. For an optimal user experience, please use the latest version of Chrome.', + create: 'Create', + move: 'Move', + addItem: 'Add', + newItem: 'New', + copy: 'Copy', + rename: 'Rename', + delete: 'Delete', + deletePermanently: 'Delete Permanently', + remove: 'Remove', + recover: 'Recover', + edit: 'Edit', + view: 'View', + value: 'Value', + data: 'Data', + information: 'Information', + success: 'Success', + warning: 'Warning', + error: 'Error', + reference: 'Reference', + text: 'Text', + basic: 'Basic', + label: 'Label', + layout: 'Layout', + color: 'Color', + form: 'Form', + menu: 'Menu', + menuItem: 'Menu Item', + ok: 'OK', + cancel: 'Cancel', + finish: 'Finish', + reset: 'Reset', + icon: 'Icon', + code: 'Code', + title: 'Title', + emptyContent: 'Empty Content', + more: 'More', + search: 'Search', + back: 'Back', + accessControl: 'Access Control', + copySuccess: 'Copied Successfully', + copyError: 'Copy Error', + api: { + publishSuccess: 'Published Successfully', + recoverFailed: 'Recovery Failed', + needUpdate: + 'Your current version is outdated. Please upgrade to the latest version.', + }, + codeEditor: { + notSupportAutoFormat: + 'The current code editor does not support auto-formatting.', + fold: 'Fold', + }, + exportMethod: { + setDesc: 'Set Property: {property}', + clearDesc: 'Clear Property: {property}', + resetDesc: 'Reset Property: {property} to Default Value', + }, + method: { + focus: 'Set Focus', + focusOptions: 'Focus options. See HTMLElement.focus()', + blur: 'Remove Focus', + click: 'Click', + select: 'Select All Text', + setSelectionRange: 'Set Start and End Positions of Text Selection', + selectionStart: '0-based Index of First Selected Character', + selectionEnd: '0-based Index of Character After Last Selected Character', + setRangeText: 'Replace Text Range', + replacement: 'String to Insert', + replaceStart: '0-based Index of First Character to Replace', + replaceEnd: '0-based Index of Character After Last Character to Replace', + }, + errorBoundary: { + encounterError: + 'Component loading failed. Please check your configuration.', + clickToReload: 'Click to Reload', + errorMsg: 'Error: ', + }, + imgUpload: { + notSupportError: 'Supports only {types} image types', + exceedSizeError: 'Image size must not exceed {size}', + }, + gridCompOperator: { + notSupport: 'Not Supported', + selectAtLeastOneComponent: 'Please select at least one component', + selectCompFirst: 'Select components before copying', + noContainerSelected: '[Bug] No container selected', + deleteCompsSuccess: 'Deleted successfully. Press {undoKey} to undo.', + deleteCompsTitle: 'Delete Components', + deleteCompsBody: + 'Are you sure you want to delete {compNum} selected components?', + cutCompsSuccess: + 'Cut successfully. Press {pasteKey} to paste, or {undoKey} to undo.', + }, + leftPanel: { + queries: 'Data Queries in your App', + globals: 'Global Data Variables', + propTipsArr: '{num} Items', + propTips: '{num} Keys', + propTipArr: '{num} Item', + propTip: '{num} Key', + stateTab: 'State', + settingsTab: 'Settings', + toolbarTitle: 'Individualization', + toolbarPreload: 'Scripts and Styles', + components: 'Active Components', + modals: 'in-App Modals', + expandTip: "Click to Expand {component}'s Data", + collapseTip: "Click to Collapse {component}'s Data", + layers: 'Layers', + activatelayers: 'Use dynamic Layers', + selectedComponents: 'Selected Components...', + displayComponents: 'control Display', + lockComponents: 'control Position', }, // second part - - "bottomPanel": { - "title": "Data Queries", - "run": "Run", - "noSelectedQuery": "No Query Selected", - "metaData": "Datasource Metadata", - "noMetadata": "No Metadata Available", - "metaSearchPlaceholder": "Search Metadata", - "allData": "All Tables" - }, - "rightPanel": { - "propertyTab": "Properties", - "noSelectedComps": "No Components selected. Click a Component to view its Properties.", - "createTab": "Insert", - "searchPlaceHolder": "Search Components or Modules", - "uiComponentTab": "Components", - "extensionTab": "Extensions", - "modulesTab": "Modules", - "moduleListTitle": "Modules", - "pluginListTitle": "Plugins", - "emptyModules": "Modules are reusable Mikro-Apps. You can embed them in your App.", - "searchNotFound": "Can't find the right component?", - "emptyPlugins": "No Plugins Added", - "contactUs": "Contact Us", - "issueHere": "here." - }, - "prop": { - "expand": "Expand", - "columns": "Columns", - "videokey": "Video Key", - "rowSelection": "Row Selection", - "toolbar": "Toolbar", - "pagination": "Pagination", - "logo": "Logo", - "style": "Style", - "inputs": "Inputs", - "meta": "Metadata", - "data": "Data", - "hide": "Hide", - "loading": "Loading", - "disabled": "Disabled", - "placeholder": "Placeholder", - "showClear": "Show Clear Button", - "showSearch": "Searchable", - "defaultValue": "Default Value", - "required": "Required Field", - "readOnly": "Read Only", - "readOnlyTooltip": "Read-only components appear normal but cannot be modified.", - "minimum": "Minimum", - "maximum": "Maximum", - "regex": "Regex", - "minLength": "Minimum Length", - "maxLength": "Maximum Length", - "height": "Height", - "width": "Width", - "selectApp": "Select App", - "showCount": "Show Count", - "textType": "Text Type", - "customRule": "Custom Rule", - "customRuleTooltip": "Non-empty string indicates an error; empty or null means validation passed. Example: ", - "manual": "Manual", - "map": "Map", - "json": "JSON", - "use12Hours": "Use 12-Hour Format", - "hourStep": "Hour Step", - "minuteStep": "Minute Step", - "secondStep": "Second Step", - "minDate": "Minimum Date", - "maxDate": "Maximum Date", - "minTime": "Minimum Time", - "maxTime": "Maximum Time", - "type": "Type", - "showLabel": "Show Label", - "showHeader": "Show Header", - "showBody": "Show Body", - "showSider": "Show Sider", - "innerSider" : "Inner Sider", - "showFooter": "Show Footer", - "maskClosable": "Click Outside to Close", - "showMask": "Show Mask", - "textOverflow": "Text Overflow", - "scrollbar" : "Show Scrollbars", - "siderScrollbar" : "Show Scrollbars in Sider", - "siderRight" : "Show sider on the Right", - "siderWidth" : "Sider Width", - "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).", - "siderCollapsedWidth" : "Sider Collapsed Width", - "siderCollapsedWidthTooltip" : "Sider collapsed width supports percentages (%) and pixels (px).", - "siderCollapsible" : "Sider Collapsible", - "siderCollapsed" : "Sider Collapsed", - "contentScrollbar" : "Show Scrollbars in Content", - "appID": "App Id", - "showApp": "Show an App in the content area", - "showAppTooltip": "You can display whole Apps in the content area. Please mind, that for Modules we do not support Inputs, Outputs Events and Methods.", - "baseURL": "API Base URL", - "horizontal": "Horizontal", - "minHorizontalWidth": "Minimum Horizontal Width", - "component": "Own Component Identifiers", - "className": "CSS Class name", - "dataTestId": "Individual ID", - }, - "autoHeightProp": { - "auto": "Auto", - "fixed": "Fixed" - }, - "textOverflowProp": { - "ellipsis": "Mouseover", - "wrap": "Wrap" - }, - "labelProp": { - "text": "Label", - "tooltip": "Tooltip", - "position": "Position", - "left": "Left", - "right": "Right", - "top": "Top", - "align": "Alignment", - "width": "Width", - "widthTooltip": "Label width supports percentages (%) and pixels (px)." + bottomPanel: { + title: 'Data Queries', + run: 'Run', + noSelectedQuery: 'No Query Selected', + metaData: 'Datasource Metadata', + noMetadata: 'No Metadata Available', + metaSearchPlaceholder: 'Search Metadata', + allData: 'All Tables', + }, + rightPanel: { + propertyTab: 'Properties', + noSelectedComps: + 'No Components selected. Click a Component to view its Properties.', + createTab: 'Insert', + searchPlaceHolder: 'Search Components or Modules', + uiComponentTab: 'Components', + extensionTab: 'Extensions', + modulesTab: 'Modules', + moduleListTitle: 'Modules', + pluginListTitle: 'Plugins', + emptyModules: + 'Modules are reusable Mikro-Apps. You can embed them in your App.', + searchNotFound: "Can't find the right component?", + emptyPlugins: 'No Plugins Added', + contactUs: 'Contact Us', + issueHere: 'here.', + }, + prop: { + expand: 'Expand', + columns: 'Columns', + videokey: 'Video Key', + rowSelection: 'Row Selection', + toolbar: 'Toolbar', + pagination: 'Pagination', + logo: 'Logo', + style: 'Style', + inputs: 'Inputs', + meta: 'Metadata', + data: 'Data', + hide: 'Hide', + loading: 'Loading', + disabled: 'Disabled', + placeholder: 'Placeholder', + showClear: 'Show Clear Button', + showSearch: 'Searchable', + defaultValue: 'Default Value', + required: 'Required Field', + readOnly: 'Read Only', + readOnlyTooltip: + 'Read-only components appear normal but cannot be modified.', + minimum: 'Minimum', + maximum: 'Maximum', + regex: 'Regex', + minLength: 'Minimum Length', + maxLength: 'Maximum Length', + height: 'Height', + width: 'Width', + selectApp: 'Select App', + showCount: 'Show Count', + textType: 'Text Type', + customRule: 'Custom Rule', + customRuleTooltip: + 'Non-empty string indicates an error; empty or null means validation passed. Example: ', + manual: 'Manual', + map: 'Map', + json: 'JSON', + use12Hours: 'Use 12-Hour Format', + hourStep: 'Hour Step', + minuteStep: 'Minute Step', + secondStep: 'Second Step', + minDate: 'Minimum Date', + maxDate: 'Maximum Date', + minTime: 'Minimum Time', + maxTime: 'Maximum Time', + type: 'Type', + showLabel: 'Show Label', + showHeader: 'Show Header', + showBody: 'Show Body', + showSider: 'Show Sider', + innerSider: 'Inner Sider', + showFooter: 'Show Footer', + maskClosable: 'Click Outside to Close', + showMask: 'Show Mask', + textOverflow: 'Text Overflow', + scrollbar: 'Show Scrollbars', + siderScrollbar: 'Show Scrollbars in Sider', + siderRight: 'Show sider on the Right', + siderWidth: 'Sider Width', + siderWidthTooltip: 'Sider width supports percentages (%) and pixels (px).', + siderCollapsedWidth: 'Sider Collapsed Width', + siderCollapsedWidthTooltip: + 'Sider collapsed width supports percentages (%) and pixels (px).', + siderCollapsible: 'Sider Collapsible', + siderCollapsed: 'Sider Collapsed', + contentScrollbar: 'Show Scrollbars in Content', + appID: 'App Id', + showApp: 'Show an App in the content area', + showAppTooltip: + 'You can display whole Apps in the content area. Please mind, that for Modules we do not support Inputs, Outputs Events and Methods.', + baseURL: 'API Base URL', + horizontal: 'Horizontal', + minHorizontalWidth: 'Minimum Horizontal Width', + component: 'Own Component Identifiers', + className: 'CSS Class name', + dataTestId: 'Individual ID', + }, + autoHeightProp: { + auto: 'Auto', + fixed: 'Fixed', + }, + textOverflowProp: { + ellipsis: 'Mouseover', + wrap: 'Wrap', + }, + labelProp: { + text: 'Label', + tooltip: 'Tooltip', + position: 'Position', + left: 'Left', + right: 'Right', + top: 'Top', + align: 'Alignment', + width: 'Width', + widthTooltip: 'Label width supports percentages (%) and pixels (px).', }, // third part - "eventHandler": { - "eventHandlers": "Event Handlers", - "emptyEventHandlers": "No Event Handlers", - "incomplete": "Incomplete Selection", - "inlineEventTitle": "On {eventName}", - "event": "Event", - "action": "Action", - "noSelect": "No Selection", - "runQuery": "Run a Data Query", - "selectQuery": "Select Data Query", - "controlComp": "Control a Component", - "runScript": "Run JavaScript", - "runScriptPlaceHolder": "Write Code Here", - "component": "Component", - "method": "Method", - "setTempState": "Set a Temporary State value", - "state": "State", - "triggerModuleEvent": "Trigger a Module Event", - "moduleEvent": "Module Event", - "goToApp": "Go to an other App", - "queryParams": "Query Parameters", - "hashParams": "Hash Parameters", - "showNotification": "Show a Notification", - "text": "Text", - "level": "Level", - "duration": "Duration", - "notifyDurationTooltip": "Time unit can be 's' (second, default) or 'ms' (millisecond). Max duration is {max} seconds", - "goToURL": "Open a URL", - "openInNewTab": "Open in New Tab", - "copyToClipboard": "Copy a value to Clipboard", - "copyToClipboardValue": "Value", - "export": "Export Data", - "exportNoFileType": "No Selection (Optional)", - "fileName": "File Name", - "fileNameTooltip": "Include extension to specify file type, e.g., 'image.png'", - "fileType": "File Type", - "condition": "Run Only When...", - "conditionTooltip": "Run the event handler only when this condition evaluates to 'true'", - "debounce": "Debounce for", - "throttle": "Throttle for", - "slowdownTooltip": "Use debounce or throttle to control the frequency of action triggers. Time unit can be 'ms' (millisecond, default) or 's' (second).", - "notHandledError": "Not Handled", - "currentApp": "Current", - "inputEventHandlers": "Input Event Handlers", - "inputEventHandlersDesc": "Event Handlers related to User Input", - "buttonEventHandlers": "Button Event Handlers", - "buttonEventHandlersDesc": "Event Handlers related to Button Clicks", - "changeEventHandlers": "Change Event Handlers", - "changeEventHandlersDesc": "Event Handlers related to Value Changes", - "editedEventHandlers": "Edit Event Handlers", - "editedEventHandlersDesc": "Event Handlers related to edited state of Elements", - "clickEventHandlers": "Click Event Handlers", - "clickEventHandlersDesc": "Event Handlers related to Clicks", - "keyDownEventHandlers": "Key Down Event Handlers", - "keyDownEventHandlersDesc": "Event Handlers related to Key Down Events", - "checkboxEventHandlers": "Checkbox Event Handlers", - "checkboxEventHandlersDesc": "Event Handlers related to Checkbox Changes", - "dragEventHandlers": "Drag Event Handlers", - "dragEventHandlersDesc": "Event Handlers related to Drag and Drop Events", - "elementEventHandlers": "Element Event Handlers", - "elementEventHandlersDesc": "Event Handlers related to generic Data Element Events", - "mediaEventHandlers": "Media Event Handlers", - "mediaEventHandlersDesc": "Event Handlers related to Media Events", - "scannerEventHandlers": "Scanner Event Handlers", - "scannerEventHandlersDesc": "Event Handlers related to Scanner Events", - "chartEventHandlers": "Chart Event Handlers", - "chartEventHandlersDesc": "Event Handlers related to Chart Events", - "geoMapEventHandlers": "Geo Map Event Handlers", - "geoMapEventHandlersDesc": "Event Handlers related to Geo Map Events", - "stepEventHandlers": "Step Event Handlers", - "stepEventHandlersDesc": "Event Handlers related to Step UI Events", - "shareEventHandlers": "Share Event Handlers", - "shareEventHandlersDesc": "Event Handlers related to Share Events", - "selectEventHandlers": "Select Event Handlers", - "selectEventHandlersDesc": "Event Handlers related to Select Events", - "meetingEventHandlers": "Meeting Event Handlers", - "meetingEventHandlersDesc": "Event Handlers related to Meeting Events", - "collaborationEventHandlers": "Collaboration Event Handlers", - "collaborationEventHandlersDesc": "Event Handlers related to Collaboration Events", - "set": "Set", - "clear": "Clear", - "reset": "Reset", - "messageType": "Message Type", - "placement": "Placement", - "description": "Description" - }, - "event": { - "submit": "Submit", - "submitDesc": "Triggers on Submit", - "change": "Change", - "changeDesc": "Triggers on Value Changes", - "focus": "Focus", - "focusDesc": "Triggers on Focus", - "blur": "Blur", - "blurDesc": "Triggers on Blur", - "click": "Click", - "clickDesc": "Triggers on Click", - "doubleClick": "Double Click", - "doubleClickDesc": "Triggers on Double Click", - "rightClick": "Right Click", - "rightClickDesc": "Triggers on Right Click", - "keyDown": "Key Down", - "keyDownDesc": "Triggers on Key Down", - "select": "Select", - "selectDesc": "Triggers on Select", - "checked": "Checked", - "checkedDesc": "Triggers when a checkbox is Checked", - "unchecked": "Unchecked", - "uncheckedDesc": "Triggers when a checkbox is Unchecked", - "drag": "Drag", - "dragDesc": "Triggers on Drag", - "drop": "Drop", - "dropDesc": "Triggers on Drop", - "open": "Open", - "openDesc": "Triggers on Open", - "mute": "Mute", - "muteDesc": "Triggers on Mute of a Microphone", - "unmute": "Unmute", - "unmuteDesc": "Triggers on Unmute of a Microphone", - "showCamera": "Show Camera", - "showCameraDesc": "Triggers when Show Camera is on", - "hideCamera": "Hide Camera", - "hideCameraDesc": "Triggers when Show Camera is off", - "shareScreen": "Share Screen", - "shareScreenDesc": "Triggers on Share Screen", - "shareScreenEnd": "Share Screen End", - "shareScreenEndDesc": "Triggers on Share Screen End", - "shareControl": "Share Control", - "shareControlDesc": "Triggers on Share Control", - "shareControlEnd": "Share Control End", - "shareControlEndDesc": "Triggers on Share Control End", - "shareContent": "Share Content", - "shareContentDesc": "Triggers on Share Content", - "shareContentEnd": "Share Content End", - "shareContentEndDesc": "Triggers on Share Content End", - "stopShare": "Stop Share", - "stopShareDesc": "Triggers on Stop Share", - "meetingStart": "Meeting Start", - "meetingStartDesc": "Triggers on Meeting Start", - "meetingEnd": "Meeting End", - "meetingEndDesc": "Triggers on Meeting End", - "meetingJoin": "Meeting Join", - "meetingJoinDesc": "Triggers on Meeting Join", - "meetingLeave": "Meeting Leave", - "meetingLeaveDesc": "Triggers on Meeting Leave", - "play": "Play", - "playDesc": "Triggers on Play", - "pause": "Pause", - "pauseDesc": "Triggers on Pause", - "ended": "Ended", - "endedDesc": "Triggers on Ended", - "step": "Step", - "stepDesc": "Triggers on Step", - "next": "Next", - "nextDesc": "Triggers on Next", - "finished": "Finished", - "finishedDesc": "Triggers on Finished", - "saved": "Saved", - "savedDesc": "Triggers when an element is Saved", - "edited": "Edited", - "editedDesc": "Triggers when an element is Edited", - "geoMapMove": "Geo Map Move", - "geoMapMoveDesc": "Triggers when Users move Geo Map", - "geoMapZoom": "Geo Map Zoom", - "geoMapZoomDesc": "Triggers when Users zoom Geo Map", - "geoMapSelect": "Geo Map Select", - "geoMapSelectDesc": "Triggers when Users select an Element on Geo Map", - "scannerSuccess": "Scanner Success", - "scannerSuccessDesc": "Triggers when a Scanner successfully scans", - "scannerError": "Scanner Error", - "scannerErrorDesc": "Triggers when a Scanner fails to scan", - "chartZoom": "Chart Zoom", - "chartZoomDesc": "Triggers on Chart Zoom", - "chartHover": "Chart Hover", - "chartHoverDesc": "Triggers on Chart Hover", - "chartSelect": "Chart Select", - "chartSelectDesc": "Triggers on Chart Select", - "chartDeselect": "Chart Deselect", - "chartDeselectDesc": "Triggers on Chart Deselect", - "close": "Close", - "closeDesc": "Triggers on Close", - "parse": "Parse", - "parseDesc": "Triggers on Parse", - "success": "Success", - "successDesc": "Triggers on Success", - "delete": "Delete", - "deleteDesc": "Triggers on Delete", - "mention": "Mention", - "mentionDesc": "Triggers on Mention", - "search": "Search", - "searchDesc": "Triggers on Search", - "selectedChange": "Selection Change", - "selectedChangeDesc": "Triggers on changed Selection", - "clickExtra": "Click on Action", - "clickExtraDesc": "Triggers on Click on Extra Element", - "start": "Start", - "startDesc": "Triggers on Start", - "resume": "Resume", - "resumeDesc": "Triggers on Resume", - "countdown": "Countdown", - "countdownDesc": "Triggers on Countdown ends", - "reset": "Reset ends", - "resetDesc": "Triggers on Reset timer", - "refresh": "Refresh", - "refreshDesc": "Triggers on Refresh", - }, - "themeDetail": { - "primary": "Brand Color", - "primaryDesc": "Default primary color used by most components", - "textDark": "Dark Text Color", - "textDarkDesc": "Used when the background color is light", - "textLight": "Light Text Color", - "textLightDesc": "Used when the background color is dark", - "canvas": "Canvas Color", - "canvasDesc": "Default background color of the app", - "primarySurface": "Container Color", - "primarySurfaceDesc": "Default background color for components like tables", - "borderRadius": "Border Radius", - "borderRadiusDesc": "Default border radius used by most components", - "chart": "Chart Style", - "chartDesc": "Input for Echarts", - "echartsJson": "Theme JSON", - "margin": "Margin", - "marginDesc": "Default margin typically used for most components", - "padding": "Padding", - "paddingDesc": "Default padding typically used for most components", - "containerHeaderPadding": "Header Padding", - "containerheaderpaddingDesc": "Default header padding typically used for most components", - "gridColumns": "Grid Columns", - "gridColumnsDesc": "Default number of columns typically used for most containers" + eventHandler: { + eventHandlers: 'Event Handlers', + emptyEventHandlers: 'No Event Handlers', + incomplete: 'Incomplete Selection', + inlineEventTitle: 'On {eventName}', + event: 'Event', + action: 'Action', + noSelect: 'No Selection', + runQuery: 'Run a Data Query', + selectQuery: 'Select Data Query', + controlComp: 'Control a Component', + runScript: 'Run JavaScript', + runScriptPlaceHolder: 'Write Code Here', + component: 'Component', + method: 'Method', + setTempState: 'Set a Temporary State value', + state: 'State', + triggerModuleEvent: 'Trigger a Module Event', + moduleEvent: 'Module Event', + goToApp: 'Go to an other App', + queryParams: 'Query Parameters', + hashParams: 'Hash Parameters', + showNotification: 'Show a Notification', + text: 'Text', + level: 'Level', + duration: 'Duration', + notifyDurationTooltip: + "Time unit can be 's' (second, default) or 'ms' (millisecond). Max duration is {max} seconds", + goToURL: 'Open a URL', + openInNewTab: 'Open in New Tab', + copyToClipboard: 'Copy a value to Clipboard', + copyToClipboardValue: 'Value', + export: 'Export Data', + exportNoFileType: 'No Selection (Optional)', + fileName: 'File Name', + fileNameTooltip: + "Include extension to specify file type, e.g., 'image.png'", + fileType: 'File Type', + condition: 'Run Only When...', + conditionTooltip: + "Run the event handler only when this condition evaluates to 'true'", + debounce: 'Debounce for', + throttle: 'Throttle for', + slowdownTooltip: + "Use debounce or throttle to control the frequency of action triggers. Time unit can be 'ms' (millisecond, default) or 's' (second).", + notHandledError: 'Not Handled', + currentApp: 'Current', + inputEventHandlers: 'Input Event Handlers', + inputEventHandlersDesc: 'Event Handlers related to User Input', + buttonEventHandlers: 'Button Event Handlers', + buttonEventHandlersDesc: 'Event Handlers related to Button Clicks', + changeEventHandlers: 'Change Event Handlers', + changeEventHandlersDesc: 'Event Handlers related to Value Changes', + editedEventHandlers: 'Edit Event Handlers', + editedEventHandlersDesc: + 'Event Handlers related to edited state of Elements', + clickEventHandlers: 'Click Event Handlers', + clickEventHandlersDesc: 'Event Handlers related to Clicks', + keyDownEventHandlers: 'Key Down Event Handlers', + keyDownEventHandlersDesc: 'Event Handlers related to Key Down Events', + checkboxEventHandlers: 'Checkbox Event Handlers', + checkboxEventHandlersDesc: 'Event Handlers related to Checkbox Changes', + dragEventHandlers: 'Drag Event Handlers', + dragEventHandlersDesc: 'Event Handlers related to Drag and Drop Events', + elementEventHandlers: 'Element Event Handlers', + elementEventHandlersDesc: + 'Event Handlers related to generic Data Element Events', + mediaEventHandlers: 'Media Event Handlers', + mediaEventHandlersDesc: 'Event Handlers related to Media Events', + scannerEventHandlers: 'Scanner Event Handlers', + scannerEventHandlersDesc: 'Event Handlers related to Scanner Events', + chartEventHandlers: 'Chart Event Handlers', + chartEventHandlersDesc: 'Event Handlers related to Chart Events', + geoMapEventHandlers: 'Geo Map Event Handlers', + geoMapEventHandlersDesc: 'Event Handlers related to Geo Map Events', + stepEventHandlers: 'Step Event Handlers', + stepEventHandlersDesc: 'Event Handlers related to Step UI Events', + shareEventHandlers: 'Share Event Handlers', + shareEventHandlersDesc: 'Event Handlers related to Share Events', + selectEventHandlers: 'Select Event Handlers', + selectEventHandlersDesc: 'Event Handlers related to Select Events', + meetingEventHandlers: 'Meeting Event Handlers', + meetingEventHandlersDesc: 'Event Handlers related to Meeting Events', + collaborationEventHandlers: 'Collaboration Event Handlers', + collaborationEventHandlersDesc: + 'Event Handlers related to Collaboration Events', + set: 'Set', + clear: 'Clear', + reset: 'Reset', + messageType: 'Message Type', + placement: 'Placement', + description: 'Description', + }, + event: { + submit: 'Submit', + submitDesc: 'Triggers on Submit', + change: 'Change', + changeDesc: 'Triggers on Value Changes', + focus: 'Focus', + focusDesc: 'Triggers on Focus', + blur: 'Blur', + blurDesc: 'Triggers on Blur', + click: 'Click', + clickDesc: 'Triggers on Click', + doubleClick: 'Double Click', + doubleClickDesc: 'Triggers on Double Click', + rightClick: 'Right Click', + rightClickDesc: 'Triggers on Right Click', + keyDown: 'Key Down', + keyDownDesc: 'Triggers on Key Down', + select: 'Select', + selectDesc: 'Triggers on Select', + checked: 'Checked', + checkedDesc: 'Triggers when a checkbox is Checked', + unchecked: 'Unchecked', + uncheckedDesc: 'Triggers when a checkbox is Unchecked', + drag: 'Drag', + dragDesc: 'Triggers on Drag', + drop: 'Drop', + dropDesc: 'Triggers on Drop', + open: 'Open', + openDesc: 'Triggers on Open', + mute: 'Mute', + muteDesc: 'Triggers on Mute of a Microphone', + unmute: 'Unmute', + unmuteDesc: 'Triggers on Unmute of a Microphone', + showCamera: 'Show Camera', + showCameraDesc: 'Triggers when Show Camera is on', + hideCamera: 'Hide Camera', + hideCameraDesc: 'Triggers when Show Camera is off', + shareScreen: 'Share Screen', + shareScreenDesc: 'Triggers on Share Screen', + shareScreenEnd: 'Share Screen End', + shareScreenEndDesc: 'Triggers on Share Screen End', + shareControl: 'Share Control', + shareControlDesc: 'Triggers on Share Control', + shareControlEnd: 'Share Control End', + shareControlEndDesc: 'Triggers on Share Control End', + shareContent: 'Share Content', + shareContentDesc: 'Triggers on Share Content', + shareContentEnd: 'Share Content End', + shareContentEndDesc: 'Triggers on Share Content End', + stopShare: 'Stop Share', + stopShareDesc: 'Triggers on Stop Share', + meetingStart: 'Meeting Start', + meetingStartDesc: 'Triggers on Meeting Start', + meetingEnd: 'Meeting End', + meetingEndDesc: 'Triggers on Meeting End', + meetingJoin: 'Meeting Join', + meetingJoinDesc: 'Triggers on Meeting Join', + meetingLeave: 'Meeting Leave', + meetingLeaveDesc: 'Triggers on Meeting Leave', + play: 'Play', + playDesc: 'Triggers on Play', + pause: 'Pause', + pauseDesc: 'Triggers on Pause', + ended: 'Ended', + endedDesc: 'Triggers on Ended', + step: 'Step', + stepDesc: 'Triggers on Step', + next: 'Next', + nextDesc: 'Triggers on Next', + finished: 'Finished', + finishedDesc: 'Triggers on Finished', + saved: 'Saved', + savedDesc: 'Triggers when an element is Saved', + edited: 'Edited', + editedDesc: 'Triggers when an element is Edited', + geoMapMove: 'Geo Map Move', + geoMapMoveDesc: 'Triggers when Users move Geo Map', + geoMapZoom: 'Geo Map Zoom', + geoMapZoomDesc: 'Triggers when Users zoom Geo Map', + geoMapSelect: 'Geo Map Select', + geoMapSelectDesc: 'Triggers when Users select an Element on Geo Map', + scannerSuccess: 'Scanner Success', + scannerSuccessDesc: 'Triggers when a Scanner successfully scans', + scannerError: 'Scanner Error', + scannerErrorDesc: 'Triggers when a Scanner fails to scan', + chartZoom: 'Chart Zoom', + chartZoomDesc: 'Triggers on Chart Zoom', + chartHover: 'Chart Hover', + chartHoverDesc: 'Triggers on Chart Hover', + chartSelect: 'Chart Select', + chartSelectDesc: 'Triggers on Chart Select', + chartDeselect: 'Chart Deselect', + chartDeselectDesc: 'Triggers on Chart Deselect', + close: 'Close', + closeDesc: 'Triggers on Close', + parse: 'Parse', + parseDesc: 'Triggers on Parse', + success: 'Success', + successDesc: 'Triggers on Success', + delete: 'Delete', + deleteDesc: 'Triggers on Delete', + mention: 'Mention', + mentionDesc: 'Triggers on Mention', + search: 'Search', + searchDesc: 'Triggers on Search', + selectedChange: 'Selection Change', + selectedChangeDesc: 'Triggers on changed Selection', + clickExtra: 'Click on Action', + clickExtraDesc: 'Triggers on Click on Extra Element', + start: 'Start', + startDesc: 'Triggers on Start', + resume: 'Resume', + resumeDesc: 'Triggers on Resume', + countdown: 'Countdown', + countdownDesc: 'Triggers on Countdown ends', + reset: 'Reset ends', + resetDesc: 'Triggers on Reset timer', + refresh: 'Refresh', + refreshDesc: 'Triggers on Refresh', + }, + themeDetail: { + primary: 'Brand Color', + primaryDesc: 'Default primary color used by most components', + textDark: 'Dark Text Color', + textDarkDesc: 'Used when the background color is light', + textLight: 'Light Text Color', + textLightDesc: 'Used when the background color is dark', + canvas: 'Canvas Color', + canvasDesc: 'Default background color of the app', + primarySurface: 'Container Color', + primarySurfaceDesc: 'Default background color for components like tables', + borderRadius: 'Border Radius', + borderRadiusDesc: 'Default border radius used by most components', + chart: 'Chart Style', + chartDesc: 'Input for Echarts', + echartsJson: 'Theme JSON', + margin: 'Margin', + marginDesc: 'Default margin typically used for most components', + padding: 'Padding', + paddingDesc: 'Default padding typically used for most components', + containerHeaderPadding: 'Header Padding', + containerheaderpaddingDesc: + 'Default header padding typically used for most components', + gridColumns: 'Grid Columns', + gridColumnsDesc: + 'Default number of columns typically used for most containers', }, // fourth part - "style": { - "resetTooltip": "Reset styles. Clear the input field to reset an individual style.", - "textColor": "Text Color", - "contrastText": "Contrast Text Color", - "generated": "Generated", - "customize": "Customize", - "staticText": "Static Text", - "accent": "Accent", - "validate": "Validation Message", - "border": "Border Color", - "borderRadius": "Border Radius", - "borderWidth": "Border Width", - "borderStyle":"Border Style", - "background": "Background", - "headerBackground": "Header Background", - "siderBackground": "Sider Background", - "footerBackground": "Footer Background", - "fill": "Fill", - "track": "Track", - "links": "Links", - "thumb": "Thumb", - "thumbBorder": "Thumb Border", - "checked": "Checked", - "unchecked": "Unchecked", - "handle": "Handle", - "tags": "Tags", - "tagsText": "Tags Text", - "multiIcon": "Multiselect Icon", - "tabText": "Tab Text", - "tabAccent": "Tab Accent", - "checkedBackground": "Checked Background", - "uncheckedBackground": "Unchecked Background", - "uncheckedBorder": "Unchecked Border", - "indicatorBackground": "Indicator Background", - "tableCellText": "Cell Text", - "selectedRowBackground": "Selected Row Background", - "hoverRowBackground": "Hover Row Background", - "hoverBackground":"Hover Background", - "textTransform":"Text Transform", - "textDecoration":"Text Decoration", - "alternateRowBackground": "Alternate Row Background", - "tableHeaderBackground": "Header Background", - "tableHeaderText": "Header Text", - "toolbarBackground": "Toolbar Background", - "toolbarText": "Toolbar Text", - "pen": "Pen", - "footerIcon": "Footer Icon", - "tips": "Tips", - "margin": "Margin", - "padding": "Padding", - "marginLeft": "Margin Left", - "marginRight": "Margin Right", - "marginTop": "Margin Top", - "marginBottom": "Margin Bottom", - "containerHeaderPadding": "Header Padding", - "containerFooterPadding": "Footer Padding", - "containerSiderPadding": "Sider Padding", - "containerBodyPadding": "Body Padding", - "minWidth": "Minimum Width", - "aspectRatio": "Aspect Ratio", - "textSize": "Text Size", - "textWeight": "Text Weight", - "fontFamily": "Font Family", - "fontStyle":"Font Style", - "backgroundImage": "BG Image", - "backgroundImageRepeat": "BG Repeat", - "backgroundImageSize": "BG Size", - "backgroundImagePosition": "BG Position", - "backgroundImageOrigin": "BG Origin", - "headerBackgroundImage": "BgImage", - "headerBackgroundImageRepeat": "BgImage Repeat", - "headerBackgroundImageSize": "BgImage Size", - "headerBackgroundImagePosition": "BgImage Position", - "headerBackgroundImageOrigin": "BgImage Origin", - "footerBackgroundImage": "BgImage", - "footerBackgroundImageRepeat": "BgImage Repeat", - "footerBackgroundImageSize": "BgImage Size", - "footerBackgroundImagePosition": "BgImage Position", - "footerBackgroundImageOrigin": "BgImage Origin", - }, - "export": { - "hiddenDesc": "If true, the component is hidden", - "disabledDesc": "If true, the component is disabled and non-interactive", - "visibleDesc": "If true, the component is visible", - "inputValueDesc": "Current value of the input", - "invalidDesc": "Indicates whether the value is invalid", - "placeholderDesc": "Placeholder text when no value is set", - "requiredDesc": "If true, a valid value is required", - "submitDesc": "Submit Form", - "richTextEditorValueDesc": "Current value of the Editor", - "richTextEditorReadOnlyDesc": "If true, the Editor is read-only", - "richTextEditorHideToolBarDesc": "If true, the toolbar is hidden", - "jsonEditorDesc": "Current JSON data", - "sliderValueDesc": "Currently selected value", - "sliderMaxValueDesc": "Maximum value of the slider", - "sliderMinValueDesc": "Minimum value of the slider", - "sliderStartDesc": "Value of the selected starting point", - "sliderEndDesc": "Value of the selected end point", - "ratingValueDesc": "Currently selected rating", - "ratingMaxDesc": "Maximum rating value", - "datePickerValueDesc": "Currently selected date", - "datePickerFormattedValueDesc": "Formatted selected date", - "datePickerTimestampDesc": "Timestamp of the selected date", - "dateRangeStartDesc": "Start date of the range", - "dateRangeEndDesc": "End date of the range", - "dateRangeStartTimestampDesc": "Timestamp of the start date", - "dateRangeEndTimestampDesc": "Timestamp of the end date", - "dateRangeFormattedValueDesc": "Formatted date range", - "dateRangeFormattedStartValueDesc": "Formatted start date", - "dateRangeFormattedEndValueDesc": "Formatted end date", - "timePickerValueDesc": "Currently selected time", - "timePickerFormattedValueDesc": "Formatted selected time", - "timeRangeStartDesc": "Start time of the range", - "timeRangeEndDesc": "End time of the range", - "timeRangeFormattedValueDesc": "Formatted time range", - "timeRangeFormattedStartValueDesc": "Formatted start time", - "timeRangeFormattedEndValueDesc": "Formatted end time" - }, - "validationDesc": { - "email": "Please enter a valid email address", - "url": "Please enter a valid URL", - "regex": "Please match the specified pattern", - "maxLength": "Too many characters, current: {length}, maximum: {maxLength}", - "minLength": "Not enough characters, current: {length}, minimum: {minLength}", - "maxValue": "Value exceeds maximum, current: {value}, maximum: {max}", - "minValue": "Value below minimum, current: {value}, minimum: {min}", - "maxTime": "Time exceeds maximum, current: {time}, maximum: {maxTime}", - "minTime": "Time below minimum, current: {time}, minimum: {minTime}", - "maxDate": "Date exceeds maximum, current: {date}, maximum: {maxDate}", - "minDate": "Date below minimum, current: {date}, minimum: {minDate}" + style: { + animation: 'Animation', + resetTooltip: + 'Reset styles. Clear the input field to reset an individual style.', + textColor: 'Text Color', + contrastText: 'Contrast Text Color', + generated: 'Generated', + customize: 'Customize', + staticText: 'Static Text', + accent: 'Accent', + validate: 'Validation Message', + border: 'Border Color', + borderRadius: 'Border Radius', + borderWidth: 'Border Width', + borderStyle: 'Border Style', + background: 'Background', + headerBackground: 'Header Background', + siderBackground: 'Sider Background', + footerBackground: 'Footer Background', + fill: 'Fill', + track: 'Track', + links: 'Links', + thumb: 'Thumb', + thumbBorder: 'Thumb Border', + checked: 'Checked', + unchecked: 'Unchecked', + handle: 'Handle', + tags: 'Tags', + tagsText: 'Tags Text', + multiIcon: 'Multiselect Icon', + tabText: 'Tab Text', + tabAccent: 'Tab Accent', + checkedBackground: 'Checked Background', + uncheckedBackground: 'Unchecked Background', + uncheckedBorder: 'Unchecked Border', + indicatorBackground: 'Indicator Background', + tableCellText: 'Cell Text', + selectedRowBackground: 'Selected Row Background', + hoverRowBackground: 'Hover Row Background', + hoverBackground: 'Hover Background', + textTransform: 'Text Transform', + textDecoration: 'Text Decoration', + alternateRowBackground: 'Alternate Row Background', + tableHeaderBackground: 'Header Background', + tableHeaderText: 'Header Text', + toolbarBackground: 'Toolbar Background', + toolbarText: 'Toolbar Text', + pen: 'Pen', + footerIcon: 'Footer Icon', + tips: 'Tips', + margin: 'Margin', + padding: 'Padding', + marginLeft: 'Margin Left', + marginRight: 'Margin Right', + marginTop: 'Margin Top', + marginBottom: 'Margin Bottom', + containerHeaderPadding: 'Header Padding', + containerFooterPadding: 'Footer Padding', + containerSiderPadding: 'Sider Padding', + containerBodyPadding: 'Body Padding', + minWidth: 'Minimum Width', + aspectRatio: 'Aspect Ratio', + textSize: 'Text Size', + textWeight: 'Text Weight', + fontFamily: 'Font Family', + fontStyle: 'Font Style', + backgroundImage: 'BG Image', + backgroundImageRepeat: 'BG Repeat', + backgroundImageSize: 'BG Size', + backgroundImagePosition: 'BG Position', + backgroundImageOrigin: 'BG Origin', + headerBackgroundImage: 'BgImage', + headerBackgroundImageRepeat: 'BgImage Repeat', + headerBackgroundImageSize: 'BgImage Size', + headerBackgroundImagePosition: 'BgImage Position', + headerBackgroundImageOrigin: 'BgImage Origin', + footerBackgroundImage: 'BgImage', + footerBackgroundImageRepeat: 'BgImage Repeat', + footerBackgroundImageSize: 'BgImage Size', + footerBackgroundImagePosition: 'BgImage Position', + footerBackgroundImageOrigin: 'BgImage Origin', + }, + export: { + hiddenDesc: 'If true, the component is hidden', + disabledDesc: 'If true, the component is disabled and non-interactive', + visibleDesc: 'If true, the component is visible', + inputValueDesc: 'Current value of the input', + invalidDesc: 'Indicates whether the value is invalid', + placeholderDesc: 'Placeholder text when no value is set', + requiredDesc: 'If true, a valid value is required', + submitDesc: 'Submit Form', + richTextEditorValueDesc: 'Current value of the Editor', + richTextEditorReadOnlyDesc: 'If true, the Editor is read-only', + richTextEditorHideToolBarDesc: 'If true, the toolbar is hidden', + jsonEditorDesc: 'Current JSON data', + sliderValueDesc: 'Currently selected value', + sliderMaxValueDesc: 'Maximum value of the slider', + sliderMinValueDesc: 'Minimum value of the slider', + sliderStartDesc: 'Value of the selected starting point', + sliderEndDesc: 'Value of the selected end point', + ratingValueDesc: 'Currently selected rating', + ratingMaxDesc: 'Maximum rating value', + datePickerValueDesc: 'Currently selected date', + datePickerFormattedValueDesc: 'Formatted selected date', + datePickerTimestampDesc: 'Timestamp of the selected date', + dateRangeStartDesc: 'Start date of the range', + dateRangeEndDesc: 'End date of the range', + dateRangeStartTimestampDesc: 'Timestamp of the start date', + dateRangeEndTimestampDesc: 'Timestamp of the end date', + dateRangeFormattedValueDesc: 'Formatted date range', + dateRangeFormattedStartValueDesc: 'Formatted start date', + dateRangeFormattedEndValueDesc: 'Formatted end date', + timePickerValueDesc: 'Currently selected time', + timePickerFormattedValueDesc: 'Formatted selected time', + timeRangeStartDesc: 'Start time of the range', + timeRangeEndDesc: 'End time of the range', + timeRangeFormattedValueDesc: 'Formatted time range', + timeRangeFormattedStartValueDesc: 'Formatted start time', + timeRangeFormattedEndValueDesc: 'Formatted end time', + }, + validationDesc: { + email: 'Please enter a valid email address', + url: 'Please enter a valid URL', + regex: 'Please match the specified pattern', + maxLength: 'Too many characters, current: {length}, maximum: {maxLength}', + minLength: 'Not enough characters, current: {length}, minimum: {minLength}', + maxValue: 'Value exceeds maximum, current: {value}, maximum: {max}', + minValue: 'Value below minimum, current: {value}, minimum: {min}', + maxTime: 'Time exceeds maximum, current: {time}, maximum: {maxTime}', + minTime: 'Time below minimum, current: {time}, minimum: {minTime}', + maxDate: 'Date exceeds maximum, current: {date}, maximum: {maxDate}', + minDate: 'Date below minimum, current: {date}, minimum: {minDate}', }, // fifth part - "query": { - "noQueries": "No Data Queries available.", - "queryTutorialButton": "View {value} documents", - "datasource": "Your Data Sources", - "newDatasource": "New Data Source", - "generalTab": "General", - "notificationTab": "Notification", - "advancedTab": "Advanced", - "showFailNotification": "Show Notification on Failure", - "failCondition": "Failure Conditions", - "failConditionTooltip1": "Customize failure conditions and corresponding notifications.", - "failConditionTooltip2": "If any condition returns true, the query is marked as failed and triggers the corresponding notification.", - "showSuccessNotification": "Show Notification on Success", - "successMessageLabel": "Success Message", - "successMessage": "Run Successful", - "notifyDuration": "Duration", - "notifyDurationTooltip": "Notification duration. Time unit can be 's' (second, default) or 'ms' (millisecond). Default value is {default}s. Maximum is {max}s.", - "successMessageWithName": "{name} run successful", - "failMessageWithName": "{name} run failed: {result}", - "showConfirmationModal": "Show Confirmation Modal Before Running", - "confirmationMessageLabel": "Confirmation Message", - "confirmationMessage": "Are you sure you want to run this Data Query?", - "newQuery": "New Data Query", - "newFolder": "New Folder", - "recentlyUsed": "Recently Used", - "folder": "Folder", - "folderNotEmpty": "Folder is not empty", - "dataResponder": "Data Responder", - "tempState": "Temporary State", - "transformer": "Transformer", - "quickRestAPI": "REST Query", - "quickStreamAPI": "Stream Query", - "quickGraphql": "GraphQL Query", - "lowcoderAPI": "Lowcoder API", - "executeJSCode": "Run JavaScript Code", - "importFromQueryLibrary": "Import from Query Library", - "importFromFile": "Import from File", - "triggerType": "Triggered when...", - "triggerTypeAuto": "Inputs Change or On Page Load", - "triggerTypePageLoad": "When the Application (Page) loads", - "triggerTypeManual": "Only when you trigger it manually", - "chooseDataSource": "Choose Data Source", - "method": "Method", - "updateExceptionDataSourceTitle": "Update Failing Data Source", - "updateExceptionDataSourceContent": "Update the following query with the same failing data source:", - "update": "Update", - "disablePreparedStatement": "Disable Prepared Statements", - "disablePreparedStatementTooltip": "Disabling prepared statements can generate dynamic SQL, but increases the risk of SQL injection", - "timeout": "Timeout After", - "timeoutTooltip": "Default unit: ms. Supported input units: ms, s. Default value: {defaultSeconds} seconds. Maximum value: {maxSeconds} seconds. E.g., 300 (i.e., 300ms), 800ms, 5s.", - "periodic": "Run This Data Query Periodically", - "periodicTime": "Period", - "periodicTimeTooltip": "Period between successive executions. Default unit: ms. Supported input units: ms, s. Minimum value: 100ms. Periodical execution is disabled for values below 100ms. E.g., 300 (i.e., 300ms), 800ms, 5s.", - "cancelPrevious": "Ignore Results of Previous Uncompleted Executions", - "cancelPreviousTooltip": "If a new execution is triggered, the result of the previous uncompleted executions will be ignored if they did not complete, and these ignored executions will not trigger the event list of the query.", - "dataSourceStatusError": "If a new execution is triggered, the result of the previous uncompleted executions will be ignored if the previous executions did not complete, and the ignored executions will not trigger the event list of the query.", - "success": "Success", - "fail": "Failure", - "successDesc": "Triggered When Execution is Successful", - "failDesc": "Triggered When Execution Fails", - "fixedDelayError": "Query Not Run", - "execSuccess": "Run Successful", - "execFail": "Run Failed", - "execIgnored": "The Results of This Query Were Ignored", - "deleteSuccessMessage": "Successfully Deleted. You Can Use {undoKey} to Undo", - "dataExportDesc": "Data Obtained by the Current Query", - "codeExportDesc": "Current Query Status Code", - "successExportDesc": "Whether the Current Query Was Executed Successfully", - "messageExportDesc": "Information Returned by the Current Query", - "extraExportDesc": "Other Data in the Current Query", - "isFetchingExportDesc": "Is the Current Query in the Request", - "runTimeExportDesc": "Current Query Execution Time (ms)", - "latestEndTimeExportDesc": "Last Run Time", - "triggerTypeExportDesc": "Trigger Type", - "chooseResource": "Choose a Resource", - "createDataSource": "Create a New Data Source", - "editDataSource": "Edit", - "datasourceName": "Name", - "datasourceNameRuleMessage": "Please Enter a Data Source Name", - "generalSetting": "General Settings", - "advancedSetting": "Advanced Settings", - "port": "Port", - "portRequiredMessage": "Please Enter a Port", - "portErrorMessage": "Please Enter a Correct Port", - "connectionType": "Connection Type", - "regular": "Regular", - "host": "Host", - "hostRequiredMessage": "Please Enter a Host Domain Name or IP Address", - "userName": "User Name", - "password": "Password", - "encryptedServer": "-------- Encrypted on the Server Side --------", - "uriRequiredMessage": "Please Enter a URI", - "urlRequiredMessage": "Please Enter a URL", - "uriErrorMessage": "Please Enter a Correct URI", - "urlErrorMessage": "Please Enter a Correct URL", - "httpRequiredMessage": "Please Enter http:// or https://", - "databaseName": "Database Name", - "databaseNameRequiredMessage": "Please Enter a Database Name", - "useSSL": "Use SSL", - "userNameRequiredMessage": "Please Enter Your Name", - "passwordRequiredMessage": "Please Enter Your Password", - "authentication": "Authentication", - "authenticationType": "Authentication Type", - "sslCertVerificationType": "SSL Cert Verification", - "sslCertVerificationTypeDefault": "Verify CA Cert", - "sslCertVerificationTypeSelf": "Verify Self-Signed Cert", - "sslCertVerificationTypeDisabled": "Disabled", - "selfSignedCert": "Self-Signed Cert", - "selfSignedCertRequireMsg": "Please Enter Your Certificate", - "enableTurnOffPreparedStatement": "Enable Toggling Prepared Statements for Queries", - "enableTurnOffPreparedStatementTooltip": "You can enable or disable prepared statements in the query's Advanced tab", - "serviceName": "Service Name", - "serviceNameRequiredMessage": "Please Enter Your Service Name", - "useSID": "Use SID", - "connectSuccessfully": "Connection Successful", - "saveSuccessfully": "Saved Successfully", - "database": "Database", - "cloudHosting": "Cloud-hosted Lowcoder cannot access local services using 127.0.0.1 or localhost. Try connecting to public network data sources or use a reverse proxy for private services.", - "notCloudHosting": "For docker-hosted deployment, Lowcoder uses bridge networks, so 127.0.0.1 and localhost are invalid for host addresses. To access local machine data sources, refer to", - "howToAccessHostDocLink": "How to Access Host API/DB", - "returnList": "Return", - "chooseDatasourceType": "Choose Data Source Type", - "viewDocuments": "View Documents", - "testConnection": "Test Connection", - "save": "Save", - "whitelist": "Allowlist", - "whitelistTooltip": "Add Lowcoder's IP addresses to your data source allowlist as needed.", - "address": "Address: ", - "nameExists": "Name {name} already exists", - "jsQueryDocLink": "About JavaScript Query", - "dynamicDataSourceConfigLoadingText": "Loading extra datasource configuration...", - "dynamicDataSourceConfigErrText": "Failed to load extra datasource configuration.", - "retry": "Retry" + query: { + noQueries: 'No Data Queries available.', + queryTutorialButton: 'View {value} documents', + datasource: 'Your Data Sources', + newDatasource: 'New Data Source', + generalTab: 'General', + notificationTab: 'Notification', + advancedTab: 'Advanced', + showFailNotification: 'Show Notification on Failure', + failCondition: 'Failure Conditions', + failConditionTooltip1: + 'Customize failure conditions and corresponding notifications.', + failConditionTooltip2: + 'If any condition returns true, the query is marked as failed and triggers the corresponding notification.', + showSuccessNotification: 'Show Notification on Success', + successMessageLabel: 'Success Message', + successMessage: 'Run Successful', + notifyDuration: 'Duration', + notifyDurationTooltip: + "Notification duration. Time unit can be 's' (second, default) or 'ms' (millisecond). Default value is {default}s. Maximum is {max}s.", + successMessageWithName: '{name} run successful', + failMessageWithName: '{name} run failed: {result}', + showConfirmationModal: 'Show Confirmation Modal Before Running', + confirmationMessageLabel: 'Confirmation Message', + confirmationMessage: 'Are you sure you want to run this Data Query?', + newQuery: 'New Data Query', + newFolder: 'New Folder', + recentlyUsed: 'Recently Used', + folder: 'Folder', + folderNotEmpty: 'Folder is not empty', + dataResponder: 'Data Responder', + tempState: 'Temporary State', + transformer: 'Transformer', + quickRestAPI: 'REST Query', + quickStreamAPI: 'Stream Query', + quickGraphql: 'GraphQL Query', + lowcoderAPI: 'Lowcoder API', + executeJSCode: 'Run JavaScript Code', + importFromQueryLibrary: 'Import from Query Library', + importFromFile: 'Import from File', + triggerType: 'Triggered when...', + triggerTypeAuto: 'Inputs Change or On Page Load', + triggerTypePageLoad: 'When the Application (Page) loads', + triggerTypeManual: 'Only when you trigger it manually', + chooseDataSource: 'Choose Data Source', + method: 'Method', + updateExceptionDataSourceTitle: 'Update Failing Data Source', + updateExceptionDataSourceContent: + 'Update the following query with the same failing data source:', + update: 'Update', + disablePreparedStatement: 'Disable Prepared Statements', + disablePreparedStatementTooltip: + 'Disabling prepared statements can generate dynamic SQL, but increases the risk of SQL injection', + timeout: 'Timeout After', + timeoutTooltip: + 'Default unit: ms. Supported input units: ms, s. Default value: {defaultSeconds} seconds. Maximum value: {maxSeconds} seconds. E.g., 300 (i.e., 300ms), 800ms, 5s.', + periodic: 'Run This Data Query Periodically', + periodicTime: 'Period', + periodicTimeTooltip: + 'Period between successive executions. Default unit: ms. Supported input units: ms, s. Minimum value: 100ms. Periodical execution is disabled for values below 100ms. E.g., 300 (i.e., 300ms), 800ms, 5s.', + cancelPrevious: 'Ignore Results of Previous Uncompleted Executions', + cancelPreviousTooltip: + 'If a new execution is triggered, the result of the previous uncompleted executions will be ignored if they did not complete, and these ignored executions will not trigger the event list of the query.', + dataSourceStatusError: + 'If a new execution is triggered, the result of the previous uncompleted executions will be ignored if the previous executions did not complete, and the ignored executions will not trigger the event list of the query.', + success: 'Success', + fail: 'Failure', + successDesc: 'Triggered When Execution is Successful', + failDesc: 'Triggered When Execution Fails', + fixedDelayError: 'Query Not Run', + execSuccess: 'Run Successful', + execFail: 'Run Failed', + execIgnored: 'The Results of This Query Were Ignored', + deleteSuccessMessage: 'Successfully Deleted. You Can Use {undoKey} to Undo', + dataExportDesc: 'Data Obtained by the Current Query', + codeExportDesc: 'Current Query Status Code', + successExportDesc: 'Whether the Current Query Was Executed Successfully', + messageExportDesc: 'Information Returned by the Current Query', + extraExportDesc: 'Other Data in the Current Query', + isFetchingExportDesc: 'Is the Current Query in the Request', + runTimeExportDesc: 'Current Query Execution Time (ms)', + latestEndTimeExportDesc: 'Last Run Time', + triggerTypeExportDesc: 'Trigger Type', + chooseResource: 'Choose a Resource', + createDataSource: 'Create a New Data Source', + editDataSource: 'Edit', + datasourceName: 'Name', + datasourceNameRuleMessage: 'Please Enter a Data Source Name', + generalSetting: 'General Settings', + advancedSetting: 'Advanced Settings', + port: 'Port', + portRequiredMessage: 'Please Enter a Port', + portErrorMessage: 'Please Enter a Correct Port', + connectionType: 'Connection Type', + regular: 'Regular', + host: 'Host', + hostRequiredMessage: 'Please Enter a Host Domain Name or IP Address', + userName: 'User Name', + password: 'Password', + encryptedServer: '-------- Encrypted on the Server Side --------', + uriRequiredMessage: 'Please Enter a URI', + urlRequiredMessage: 'Please Enter a URL', + uriErrorMessage: 'Please Enter a Correct URI', + urlErrorMessage: 'Please Enter a Correct URL', + httpRequiredMessage: 'Please Enter http:// or https://', + databaseName: 'Database Name', + databaseNameRequiredMessage: 'Please Enter a Database Name', + useSSL: 'Use SSL', + userNameRequiredMessage: 'Please Enter Your Name', + passwordRequiredMessage: 'Please Enter Your Password', + authentication: 'Authentication', + authenticationType: 'Authentication Type', + sslCertVerificationType: 'SSL Cert Verification', + sslCertVerificationTypeDefault: 'Verify CA Cert', + sslCertVerificationTypeSelf: 'Verify Self-Signed Cert', + sslCertVerificationTypeDisabled: 'Disabled', + selfSignedCert: 'Self-Signed Cert', + selfSignedCertRequireMsg: 'Please Enter Your Certificate', + enableTurnOffPreparedStatement: + 'Enable Toggling Prepared Statements for Queries', + enableTurnOffPreparedStatementTooltip: + "You can enable or disable prepared statements in the query's Advanced tab", + serviceName: 'Service Name', + serviceNameRequiredMessage: 'Please Enter Your Service Name', + useSID: 'Use SID', + connectSuccessfully: 'Connection Successful', + saveSuccessfully: 'Saved Successfully', + database: 'Database', + cloudHosting: + 'Cloud-hosted Lowcoder cannot access local services using 127.0.0.1 or localhost. Try connecting to public network data sources or use a reverse proxy for private services.', + notCloudHosting: + 'For docker-hosted deployment, Lowcoder uses bridge networks, so 127.0.0.1 and localhost are invalid for host addresses. To access local machine data sources, refer to', + howToAccessHostDocLink: 'How to Access Host API/DB', + returnList: 'Return', + chooseDatasourceType: 'Choose Data Source Type', + viewDocuments: 'View Documents', + testConnection: 'Test Connection', + save: 'Save', + whitelist: 'Allowlist', + whitelistTooltip: + "Add Lowcoder's IP addresses to your data source allowlist as needed.", + address: 'Address: ', + nameExists: 'Name {name} already exists', + jsQueryDocLink: 'About JavaScript Query', + dynamicDataSourceConfigLoadingText: + 'Loading extra datasource configuration...', + dynamicDataSourceConfigErrText: + 'Failed to load extra datasource configuration.', + retry: 'Retry', }, - // sixth part - "sqlQuery": { - "keyValuePairs": "Key-Value Pairs", - "object": "Object", - "allowMultiModify": "Allow Multi-Row Modification", - "allowMultiModifyTooltip": "If selected, all rows meeting the conditions are operated on. Otherwise, only the first row meeting the conditions is operated on.", - "array": "Array", - "insertList": "Insert List", - "insertListTooltip": "Values inserted when they do not exist", - "filterRule": "Filter Rule", - "updateList": "Update List", - "updateListTooltip": "Values updated as they exist can be overridden by the same insertion list values", - "sqlMode": "SQL Mode", - "guiMode": "GUI Mode", - "operation": "Operation", - "insert": "Insert", - "upsert": "Insert, but Update if Conflict", - "update": "Update", - "delete": "Delete", - "bulkInsert": "Bulk Insert", - "bulkUpdate": "Bulk Update", - "table": "Table", - "primaryKeyColumn": "Primary Key Column" - }, - "EsQuery": { - "rawCommand": "Raw Command", - "queryTutorialButton": "View Elasticsearch API Documents", - "request": "Request" - }, - "googleSheets": { - "rowIndex": "Row Index", - "spreadsheetId": "Spreadsheet ID", - "sheetName": "Sheet Name", - "readData": "Read Data", - "appendData": "Append Row", - "updateData": "Update Row", - "deleteData": "Delete Row", - "clearData": "Clear Row", - "serviceAccountRequireMessage": "Please Enter Your Service Account", - "ASC": "ASC", - "DESC": "DESC", - "sort": "Sort", - "sortPlaceholder": "Name" - }, - "queryLibrary": { - "export": "Export to JSON", - "noInput": "The Current Query Has No Input", - "inputName": "Name", - "inputDesc": "Description", - "emptyInputs": "No Inputs", - "clickToAdd": "Add", - "chooseQuery": "Choose Query", - "viewQuery": "View Query", - "chooseVersion": "Choose Version", - "latest": "Latest", - "publish": "Publish", - "historyVersion": "History Version", - "deleteQueryLabel": "Delete Query", - "deleteQueryContent": "The query cannot be recovered after deletion. Delete the query?", - "run": "Run", - "readOnly": "Read Only", - "exit": "Exit", - "recoverAppSnapshotContent": "Restore the current query to version {version}", - "searchPlaceholder": "Search Query", - "allQuery": "All Queries", - "deleteQueryTitle": "Delete Query", - "unnamed": "Unnamed", - "publishNewVersion": "Publish New Version", - "publishSuccess": "Published Successfully", - "version": "Version", - "desc": "Description" - }, - "snowflake": { - "accountIdentifierTooltip": "See ", - "extParamsTooltip": "Configure Additional Connection Parameters" - }, - "lowcoderQuery": { - "queryOrgUsers": "Query Workspace Users" - }, - "redisQuery": { - "rawCommand": "Raw Command", - "command": "Command", - "queryTutorial": "View Redis Commands Documents" - }, - "httpQuery": { - "bodyFormDataTooltip": "If {type} is selected, the value format should be {object}. Example: {example}", - "text": "Text", - "file": "File", - "extraBodyTooltip": "Key-values in Extra Body will be appended to the body with JSON or Form Data types", - "forwardCookies": "Forward Cookies", - "forwardAllCookies": "Forward All Cookies" - }, - "smtpQuery": { - "attachment": "Attachment", - "attachmentTooltip": "Can be used with file upload component, data needs to be converted to: ", - "MIMETypeUrl": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types", - "sender": "Sender", - "recipient": "Recipient", - "carbonCopy": "Carbon Copy", - "blindCarbonCopy": "Blind Carbon Copy", - "subject": "Subject", - "content": "Content", - "contentTooltip": "Supports input text or HTML" + sqlQuery: { + keyValuePairs: 'Key-Value Pairs', + object: 'Object', + allowMultiModify: 'Allow Multi-Row Modification', + allowMultiModifyTooltip: + 'If selected, all rows meeting the conditions are operated on. Otherwise, only the first row meeting the conditions is operated on.', + array: 'Array', + insertList: 'Insert List', + insertListTooltip: 'Values inserted when they do not exist', + filterRule: 'Filter Rule', + updateList: 'Update List', + updateListTooltip: + 'Values updated as they exist can be overridden by the same insertion list values', + sqlMode: 'SQL Mode', + guiMode: 'GUI Mode', + operation: 'Operation', + insert: 'Insert', + upsert: 'Insert, but Update if Conflict', + update: 'Update', + delete: 'Delete', + bulkInsert: 'Bulk Insert', + bulkUpdate: 'Bulk Update', + table: 'Table', + primaryKeyColumn: 'Primary Key Column', + }, + EsQuery: { + rawCommand: 'Raw Command', + queryTutorialButton: 'View Elasticsearch API Documents', + request: 'Request', + }, + googleSheets: { + rowIndex: 'Row Index', + spreadsheetId: 'Spreadsheet ID', + sheetName: 'Sheet Name', + readData: 'Read Data', + appendData: 'Append Row', + updateData: 'Update Row', + deleteData: 'Delete Row', + clearData: 'Clear Row', + serviceAccountRequireMessage: 'Please Enter Your Service Account', + ASC: 'ASC', + DESC: 'DESC', + sort: 'Sort', + sortPlaceholder: 'Name', + }, + queryLibrary: { + export: 'Export to JSON', + noInput: 'The Current Query Has No Input', + inputName: 'Name', + inputDesc: 'Description', + emptyInputs: 'No Inputs', + clickToAdd: 'Add', + chooseQuery: 'Choose Query', + viewQuery: 'View Query', + chooseVersion: 'Choose Version', + latest: 'Latest', + publish: 'Publish', + historyVersion: 'History Version', + deleteQueryLabel: 'Delete Query', + deleteQueryContent: + 'The query cannot be recovered after deletion. Delete the query?', + run: 'Run', + readOnly: 'Read Only', + exit: 'Exit', + recoverAppSnapshotContent: 'Restore the current query to version {version}', + searchPlaceholder: 'Search Query', + allQuery: 'All Queries', + deleteQueryTitle: 'Delete Query', + unnamed: 'Unnamed', + publishNewVersion: 'Publish New Version', + publishSuccess: 'Published Successfully', + version: 'Version', + desc: 'Description', + }, + snowflake: { + accountIdentifierTooltip: 'See ', + extParamsTooltip: 'Configure Additional Connection Parameters', + }, + lowcoderQuery: { + queryOrgUsers: 'Query Workspace Users', + }, + redisQuery: { + rawCommand: 'Raw Command', + command: 'Command', + queryTutorial: 'View Redis Commands Documents', + }, + httpQuery: { + bodyFormDataTooltip: + 'If {type} is selected, the value format should be {object}. Example: {example}', + text: 'Text', + file: 'File', + extraBodyTooltip: + 'Key-values in Extra Body will be appended to the body with JSON or Form Data types', + forwardCookies: 'Forward Cookies', + forwardAllCookies: 'Forward All Cookies', + }, + smtpQuery: { + attachment: 'Attachment', + attachmentTooltip: + 'Can be used with file upload component, data needs to be converted to: ', + MIMETypeUrl: + 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types', + sender: 'Sender', + recipient: 'Recipient', + carbonCopy: 'Carbon Copy', + blindCarbonCopy: 'Blind Carbon Copy', + subject: 'Subject', + content: 'Content', + contentTooltip: 'Supports input text or HTML', }, // seventh part - "uiCompCategory": { - "dashboards": "Dashboards & Reporting", - "layout": "Layout & Navigation", - "forms": "Data Collection & Forms", - "collaboration": "Meeting & Collaboration", - "projectmanagement": "Project Management", - "scheduling": "Calendar & Scheduling", - "documents": "Document & File Management", - "itemHandling": "Item & Signature Handling", - "multimedia": "Multimedia & Animation", - "integration": "Integration & Extension" - }, - "uiComp": { - "autoCompleteCompName": "Auto Complete", - "autoCompleteCompDesc": "An input field that provides suggestions as you type, enhancing user experience and accuracy.", - "autoCompleteCompKeywords": "suggestions, autocomplete, typing, input", - - "inputCompName": "Input", - "inputCompDesc": "A basic text input field allowing users to enter and edit text.", - "inputCompKeywords": "text, input, field, edit", - - "textAreaCompName": "Text Area", - "textAreaCompDesc": "A multi-line text input for longer form content, such as comments or descriptions.", - "textAreaCompKeywords": "multiline, textarea, input, text", - - "passwordCompName": "Password", - "passwordCompDesc": "A secure field for password input, masking the characters for privacy.", - "passwordCompKeywords": "password, security, input, hidden", - - "richTextEditorCompName": "Rich Text Editor", - "richTextEditorCompDesc": "An advanced text editor supporting rich formatting options like bold, italics, and lists.", - "richTextEditorCompKeywords": "editor, text, formatting, rich content", - - "numberInputCompName": "Number Input", - "numberInputCompDesc": "A field specifically for numerical input, with controls for incrementing and decrementing values.", - "numberInputCompKeywords": "number, input, increment, decrement", - - "sliderCompName": "Slider", - "sliderCompDesc": "A graphical slider component for selecting a value or range within a defined scale.", - "sliderCompKeywords": "slider, range, input, graphical", - - "rangeSliderCompName": "Range Slider", - "rangeSliderCompDesc": "A dual-handle slider to select a range of values, useful for filtering or setting limits.", - "rangeSliderCompKeywords": "range, slider, dual-handle, filter", - - "ratingCompName": "Rating", - "ratingCompDesc": "A component for capturing user ratings, displayed as stars.", - "ratingCompKeywords": "rating, stars, feedback, input", - - "switchCompName": "Switch", - "switchCompDesc": "A toggle switch for on/off or yes/no type decisions.", - "switchCompKeywords": "toggle, switch, on/off, control", - - "selectCompName": "Select", - "selectCompDesc": "A dropdown menu for selecting from a list of options.", - "selectCompKeywords": "dropdown, select, options, menu", - - "multiSelectCompName": "Multiselect", - "multiSelectCompDesc": "A component that allows selection of multiple items from a dropdown list.", - "multiSelectCompKeywords": "multiselect, multiple, dropdown, choices", - - "cascaderCompName": "Cascader", - "cascaderCompDesc": "A multi-level dropdown for hierarchical data selection, such as selecting a location.", - "cascaderCompKeywords": "cascader, hierarchical, dropdown, levels", - - "checkboxCompName": "Checkbox", - "checkboxCompDesc": "A standard checkbox for options that can be selected or deselected.", - "checkboxCompKeywords": "checkbox, options, select, toggle", - - "radioCompName": "Radio", - "radioCompDesc": "Radio buttons for selecting one option from a set, where only one choice is allowed.", - "radioCompKeywords": "radio, buttons, select, single choice", - - "segmentedControlCompName": "Segmented Control", - "segmentedControlCompDesc": "A control with segmented options for quickly toggling between multiple choices.", - "segmentedControlCompKeywords": "segmented, control, toggle, options", - - "stepControlCompName": "Step Control", - "stepControlCompDesc": "A control with step options to offer visual guided steps for applications like forms or wizards.", - "stepControlCompKeywords": "steps, control, toggle, options", - - "fileUploadCompName": "File Upload", - "fileUploadCompDesc": "A component for uploading files, with support for drag-and-drop and file selection.", - "fileUploadCompKeywords": "file, upload, drag and drop, select", - - "dateCompName": "Date", - "dateCompDesc": "A date picker component for selecting dates from a calendar interface.", - "dateCompKeywords": "date, picker, calendar, select", - - "dateRangeCompName": "Date Range", - "dateRangeCompDesc": "A component for selecting a range of dates, useful for booking systems or filters.", - "dateRangeCompKeywords": "daterange, select, booking, filter", - - "timeCompName": "Time", - "timeCompDesc": "A time selection component for choosing specific times of the day.", - "timeCompKeywords": "time, picker, select, clock", - - "timeRangeCompName": "Time Range", - "timeRangeCompDesc": "A component for selecting a range of time, often used in scheduling applications.", - "timeRangeCompKeywords": "timerange, select, scheduling, duration", - - "buttonCompName": "Form Button", - "buttonCompDesc": "A versatile button component for submitting forms, triggering actions, or navigating.", - "buttonCompKeywords": "button, submit, action, navigate", - - "meetingControlCompName": "Icon Button", - "meetingCompDesc": "A button for controlling functions like start, end, mute, or share.", - "meetingCompKeywords": "control, button, start, end", - - "linkCompName": "Link", - "linkCompDesc": "A hyperlink display component for navigation or linking to external resources.", - "linkCompKeywords": "link, hyperlink, navigation, external", - - "scannerCompName": "Scanner", - "scannerCompDesc": "A component for scanning barcodes, QR codes, and other similar data.", - "scannerCompKeywords": "scanner, barcode, QR code, scan", - - "dropdownCompName": "Dropdown", - "dropdownCompDesc": "A dropdown menu for compactly displaying a list of options.", - "dropdownCompKeywords": "dropdown, menu, options, select", - - "toggleButtonCompName": "Toggle Button", - "toggleButtonCompDesc": "A button that can toggle between two states or options.", - "toggleButtonCompKeywords": "toggle, button, switch, state", - - "textCompName": "Text Display", - "textCompDesc": "A simple component for displaying static or dynamic text content inclusive Markdown formatting.", - "textCompKeywords": "text, display, static, dynamic", - - "tableCompName": "Table", - "tableCompDesc": "A rich table component for displaying data in a structured table format, with options for sorting and filtering, tree Data display and extensible Rows.", - "tableCompKeywords": "table, data, sorting, filtering", - - "imageCompName": "Image", - "imageCompDesc": "A component for displaying images, supporting various formats based on URI or Base64 Data.", - "imageCompKeywords": "image, display, media, Base64", - - "progressCompName": "Progress", - "progressCompDesc": "A visual indicator of progress, typically used to show the completion status of a task.", - "progressCompKeywords": "progress, indicator, status, task", - - "progressCircleCompName": "Progress Circle", - "progressCircleCompDesc": "A circular progress indicator, often used for loading states or time-bound tasks.", - "progressCircleCompKeywords": "circle, progress, indicator, loading", - - "fileViewerCompName": "File Viewer", - "fileViewerCompDesc": "A component for viewing various types of files, including documents and images.", - "fileViewerCompKeywords": "file, viewer, document, image", - - "dividerCompName": "Divider", - "dividerCompDesc": "A visual divider component, used to separate content or sections in a layout.", - "dividerCompKeywords": "divider, separator, layout, design", - - "qrCodeCompName": "QR Code", - "qrCodeCompDesc": "A component for displaying QR codes, useful for quick scanning and information transfer.", - "qrCodeCompKeywords": "QR code, scanning, barcode, information", - - "formCompName": "Form", - "formCompDesc": "A container component for building structured forms with various input types.", - "formCompKeywords": "form, input, container, structure", - - "jsonSchemaFormCompName": "JSON Schema Form", - "jsonSchemaFormCompDesc": "A dynamic form component generated based on a JSON schema.", - "jsonSchemaFormCompKeywords": "JSON, schema, form, dynamic", - - "containerCompName": "Container", - "containerCompDesc": "A general-purpose container for layout and organization of UI elements.", - "containerCompKeywords": "container, layout, organization, UI", - - "floatTextContainerCompName": "Float Text Container", - "floatTextContainerCompDesc": "Float Text Container component", - "floatTextContainerCompKeywords": "container, layout, text, flow", - - "collapsibleContainerCompName": "Collapsible Container", - "collapsibleContainerCompDesc": "A container that can be expanded or collapsed, ideal for managing content visibility.", - "collapsibleContainerCompKeywords": "collapsible, container, expand, collapse", - - "tabbedContainerCompName": "Tabbed Container", - "tabbedContainerCompDesc": "A container with tabbed navigation for organizing content into separate panels.", - "tabbedContainerCompKeywords": "tabbed, container, navigation, panels", - - "pageLayoutCompName": "Page Layout", - "pageLayoutCompDesc": "A container which offers to create a layout with header, sider, footer and main content areas", - "pageLayoutCompKeywords": "layout, container, navigation, pages", - - "modalCompName": "Modal", - "modalCompDesc": "A pop-up modal component for displaying content, alerts, or forms in focus.", - "modalCompKeywords": "modal, popup, alert, form", - - "listViewCompName": "List View", - "listViewCompDesc": "A component for displaying a list of items or data, where you can place other components inside. Like a repeater.", - "listViewCompKeywords": "list, view, display, repeater", - - "gridCompName": "Grid", - "gridCompDesc": "A flexible grid component for creating structured layouts with rows and columns as an extension to the List View component.", - "gridCompKeywords": "grid, layout, rows, columns", - - "navigationCompName": "Navigation", - "navigationCompDesc": "A navigation component for creating menus, breadcrumbs, or tabs for site navigation.", - "navigationCompKeywords": "navigation, menu, breadcrumbs, tabs", - - "iframeCompName": "IFrame", - "iframeCompDesc": "An inline frame component for embedding external web pages and apps or content within the application.", - "iframeCompKeywords": "iframe, embed, web page, content", - - "customCompName": "Custom Component", - "customCompDesc": "A flexible, programmable component for creating unique, user-defined UI elements tailored to your specific needs.", - "customCompKeywords": "custom, user-defined, flexible, programmable", - - "moduleCompName": "Module", - "moduleCompDesc": "Use Modules to create Micro-Apps designed for encapsulating specific functionalities or features. Modules can be then embedded and reused across all Apps.", - "moduleCompKeywords": "module, micro-app, functionality, reusable", - - "jsonExplorerCompName": "JSON Explorer", - "jsonExplorerCompDesc": "A component for visually exploring and interacting with JSON data structures.", - "jsonExplorerCompKeywords": "JSON, explorer, data, structure", - - "jsonEditorCompName": "JSON Editor", - "jsonEditorCompDesc": "An editor component for creating and modifying JSON data with validation and syntax highlighting.", - "jsonEditorCompKeywords": "JSON, editor, modify, validate", - - "treeCompName": "Tree", - "treeCompDesc": "A tree structure component for displaying hierarchical data, such as file systems or organizational charts.", - "treeCompKeywords": "tree, hierarchical, data, structure", - - "treeSelectCompName": "Tree Select", - "treeSelectCompDesc": "A selection component that presents options in a hierarchical tree format, allowing for organized and nested selections.", - "treeSelectCompKeywords": "tree, select, hierarchical, nested", - - "audioCompName": "Audio", - "audioCompDesc": "A component for embedding audio content, with controls for playback and volume adjustment.", - "audioCompKeywords": "audio, playback, sound, music", - - "videoCompName": "Video", - "videoCompDesc": "A multimedia component for embedding and playing video content, with support for various formats.", - "videoCompKeywords": "video, multimedia, playback, embed", - - "drawerCompName": "Drawer", - "drawerCompDesc": "A sliding panel component that can be used for additional navigation or content display, typically emerging from the edge of the screen.", - "drawerCompKeywords": "drawer, sliding, panel, navigation", - - "chartCompName": "Chart", - "chartCompDesc": "A versatile component for visualizing data through various types of charts and graphs.", - "chartCompKeywords": "chart, graph, data, visualization", - - "carouselCompName": "Image Carousel", - "carouselCompDesc": "A rotating carousel component for showcasing images, banners, or content slides.", - "carouselCompKeywords": "carousel, images, rotation, showcase", - - "imageEditorCompName": "Image Editor", - "imageEditorCompDesc": "An interactive component for editing and manipulating images, offering various tools and filters.", - "imageEditorCompKeywords": "image, editor, manipulate, tools", - - "mermaidCompName": "Mermaid Chart", - "mermaidCompDesc": "A component for rendering complex diagrams and flowcharts based on Mermaid syntax.", - "mermaidCompKeywords": "mermaid, charts, diagrams, flowcharts", - - "calendarCompName": "Calendar", - "calendarCompDesc": "A calendar component for displaying dates and events, with options for month, week, or day views.", - "calendarCompKeywords": "calendar, dates, events, scheduling", - - "signatureCompName": "Signature", - "signatureCompDesc": "A component for capturing digital signatures, useful for approvals and verification processes.", - "signatureCompKeywords": "signature, digital, approval, verification", - - "jsonLottieCompName": "Lottie Animation", - "jsonLottieCompDesc": "A component for displaying Lottie animations, providing lightweight and scalable animations based on JSON data.", - "jsonLottieCompKeywords": "lottie, animation, JSON, scalable", - - "timelineCompName": "Timeline", - "timelineCompDesc": "A component for displaying events or actions in a chronological order, visually represented along a linear timeline.", - "timelineCompKeywords": "timeline, events, chronological, history", - - "commentCompName": "Comment", - "commentCompDesc": "A component for adding and displaying user comments, supporting threaded replies and user interaction.", - "commentCompKeywords": "comment, discussion, user interaction, feedback", - - "mentionCompName": "Mention", - "mentionCompDesc": "A component that supports mentioning users or tags within text content, typically used in social media or collaborative platforms.", - "mentionCompKeywords": "mention, tag, user, social media", - - "responsiveLayoutCompName": "Responsive Layout", - "responsiveLayoutCompDesc": "A layout component designed to adapt and respond to different screen sizes and devices, ensuring a consistent user experience.", - "responsiveLayoutCompKeywords": "responsive, layout, adapt, screen size", - - "iconCompName": "Icons", - "iconCompDesc": "Use various Icons to enhance the visual appeal and user experience of your application.", - "iconCompKeywords": "Icons, pictograms, symbols, shapes", - - "tourCompName": "Tour", - "tourCompDesc": "A product tour for guiding users.", - "tourCompKeywords": "tour, product tour, walkthrough, interactive walkthrough", - - "hillchartCompName": "Hillchart", - "hillchartCompDesc": "A visualization component for displaying project management state data in a hill chart format.", - "hillchartCompKeywords": "project management, hill chart, visualization, data", - - "openLayersGeoMapCompName": "Openlayers Geomap", - "openLayersGeoMapCompDesc": "A component for displaying interactive maps using OpenLayers, with support for various map layers and features.", - "openLayersGeoMapCompKeywords": "openlayers, geo map, interactive, map layers", - - "chartsGeoMapCompName": "Geo Map Charts", - "chartsGeoMapCompDesc": "A component for visualizing geographical data on interactive maps with dynamic charts", - "chartsGeoMapCompKeywords": "geo map, charts, visualization, geographical data", - - "bpmnEditorCompName": "BPMN Editor", - "bpmnEditorCompDesc": "A component for viewing, creating and editing BPMN diagrams, supporting various BPMN elements and features.", - "bpmnEditorCompKeywords": "BPMN, editor, diagrams, elements, workflows", - - "turnstileCaptchaCompName": "Turnstile Captcha", - "turnstileCaptchaCompDesc": "A captcha component to verify users against bots.", - "turnstileCaptchaCompKeywords": "captcha, verification, identity, security", - - "pivotTableCompName": "Pivot Table", - "pivotTableCompDesc": "A data summarization and analysis tool for organizing and aggregating data in a tabular format.", - "pivotTableCompKeywords": "pivot table, data, analysis, aggregation", - - "funnelChartCompName": "Funnel Chart", - "funnelChartCompDesc": "A visualization tool for displaying the progressive reduction of data as it passes through stages.", - "funnelChartCompKeywords": "funnel chart, sales, conversions, process", - - "gaugeChartCompName": "Gauge Chart", - "gaugeChartCompDesc": "A chart that displays data as a reading on a dial, useful for indicating the status or level of something.", - "gaugeChartCompKeywords": "gauge chart, metrics, performance, status", - - "sankeyChartCompName": "Sankey Chart", - "sankeyChartCompDesc": "A flow diagram in which the width of the arrows is proportional to the flow rate, used to show energy, material, or cost transfers.", - "sankeyChartCompKeywords": "sankey chart, flow, energy, costs", - - "candleStickChartCompName": "Candlestick Chart", - "candleStickChartCompDesc": "A style of financial chart used to describe price movements of a security, derivative, or currency.", - "candleStickChartCompKeywords": "candlestick chart, stocks, trading, finance", - - "radarChartCompName": "Radar Chart", - "radarChartCompDesc": "A graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables.", - "radarChartCompKeywords": "radar chart, multivariate, performance analysis", - - "heatmapChartCompName": "Heatmap Chart", - "heatmapChartCompDesc": "A graphical representation of data where individual values are represented as colors.", - "heatmapChartCompKeywords": "heatmap, data visualization, intensity", - - "graphChartCompName": "Graph Chart", - "graphChartCompDesc": "A diagram representing a network of nodes connected by edges, useful for showing interconnections and relationships.", - "graphChartCompKeywords": "graph chart, networks, relationships, nodes", - - "treeChartCompName": "Tree Chart", - "treeChartCompDesc": "A diagram that visually represents hierarchy in a tree-like structure, showing relationships among various nodes.", - "treeChartCompKeywords": "tree chart, hierarchy, organizational", - - "treemapChartCompName": "Treemap Chart", - "treemapChartCompDesc": "A chart that uses nested rectangles to represent hierarchical data proportionately.", - "treemapChartCompKeywords": "treemap, hierarchy, data visualization", - - "sunburstChartCompName": "Sunburst Chart", - "sunburstChartCompDesc": "A radial space-filling visualization technique that illustrates hierarchical relationships through layers of a circle.", - "sunburstChartCompKeywords": "sunburst chart, radial, hierarchy", - - "themeriverChartCompName": "Theme River Chart", - "themeriverChartCompDesc": "A visualization resembling a stream graph that shows changes in a data set over time across categories.", - "themeriverChartCompKeywords": "theme river, time series, trends", - - "basicChartCompName": "Basic Chart", - "basicChartCompDesc": "A versatile component for visualizing data through various types of charts and graphs.", - "basicChartCompKeywords": "chart, graph, data, visualization", - - "shapeCompName": "Shapes", - "shapeCompDesc": "A collection of geometric shapes for use with diagrams, illustrations, and visualizations.", - "shapeCompKeywords": "shapes, geometric, diagrams, illustrations", + uiCompCategory: { + dashboards: 'Dashboards & Reporting', + layout: 'Layout & Navigation', + forms: 'Data Collection & Forms', + collaboration: 'Meeting & Collaboration', + projectmanagement: 'Project Management', + scheduling: 'Calendar & Scheduling', + documents: 'Document & File Management', + itemHandling: 'Item & Signature Handling', + multimedia: 'Multimedia & Animation', + integration: 'Integration & Extension', + }, + uiComp: { + autoCompleteCompName: 'Auto Complete', + autoCompleteCompDesc: + 'An input field that provides suggestions as you type, enhancing user experience and accuracy.', + autoCompleteCompKeywords: 'suggestions, autocomplete, typing, input', + + inputCompName: 'Input', + inputCompDesc: + 'A basic text input field allowing users to enter and edit text.', + inputCompKeywords: 'text, input, field, edit', + + textAreaCompName: 'Text Area', + textAreaCompDesc: + 'A multi-line text input for longer form content, such as comments or descriptions.', + textAreaCompKeywords: 'multiline, textarea, input, text', + + passwordCompName: 'Password', + passwordCompDesc: + 'A secure field for password input, masking the characters for privacy.', + passwordCompKeywords: 'password, security, input, hidden', + + richTextEditorCompName: 'Rich Text Editor', + richTextEditorCompDesc: + 'An advanced text editor supporting rich formatting options like bold, italics, and lists.', + richTextEditorCompKeywords: 'editor, text, formatting, rich content', + + numberInputCompName: 'Number Input', + numberInputCompDesc: + 'A field specifically for numerical input, with controls for incrementing and decrementing values.', + numberInputCompKeywords: 'number, input, increment, decrement', + + sliderCompName: 'Slider', + sliderCompDesc: + 'A graphical slider component for selecting a value or range within a defined scale.', + sliderCompKeywords: 'slider, range, input, graphical', + + rangeSliderCompName: 'Range Slider', + rangeSliderCompDesc: + 'A dual-handle slider to select a range of values, useful for filtering or setting limits.', + rangeSliderCompKeywords: 'range, slider, dual-handle, filter', + + ratingCompName: 'Rating', + ratingCompDesc: + 'A component for capturing user ratings, displayed as stars.', + ratingCompKeywords: 'rating, stars, feedback, input', + + switchCompName: 'Switch', + switchCompDesc: 'A toggle switch for on/off or yes/no type decisions.', + switchCompKeywords: 'toggle, switch, on/off, control', + + selectCompName: 'Select', + selectCompDesc: 'A dropdown menu for selecting from a list of options.', + selectCompKeywords: 'dropdown, select, options, menu', + + multiSelectCompName: 'Multiselect', + multiSelectCompDesc: + 'A component that allows selection of multiple items from a dropdown list.', + multiSelectCompKeywords: 'multiselect, multiple, dropdown, choices', + + cascaderCompName: 'Cascader', + cascaderCompDesc: + 'A multi-level dropdown for hierarchical data selection, such as selecting a location.', + cascaderCompKeywords: 'cascader, hierarchical, dropdown, levels', + + checkboxCompName: 'Checkbox', + checkboxCompDesc: + 'A standard checkbox for options that can be selected or deselected.', + checkboxCompKeywords: 'checkbox, options, select, toggle', + + radioCompName: 'Radio', + radioCompDesc: + 'Radio buttons for selecting one option from a set, where only one choice is allowed.', + radioCompKeywords: 'radio, buttons, select, single choice', + + segmentedControlCompName: 'Segmented Control', + segmentedControlCompDesc: + 'A control with segmented options for quickly toggling between multiple choices.', + segmentedControlCompKeywords: 'segmented, control, toggle, options', + + stepControlCompName: 'Step Control', + stepControlCompDesc: + 'A control with step options to offer visual guided steps for applications like forms or wizards.', + stepControlCompKeywords: 'steps, control, toggle, options', + + fileUploadCompName: 'File Upload', + fileUploadCompDesc: + 'A component for uploading files, with support for drag-and-drop and file selection.', + fileUploadCompKeywords: 'file, upload, drag and drop, select', + + dateCompName: 'Date', + dateCompDesc: + 'A date picker component for selecting dates from a calendar interface.', + dateCompKeywords: 'date, picker, calendar, select', + + dateRangeCompName: 'Date Range', + dateRangeCompDesc: + 'A component for selecting a range of dates, useful for booking systems or filters.', + dateRangeCompKeywords: 'daterange, select, booking, filter', + + timeCompName: 'Time', + timeCompDesc: + 'A time selection component for choosing specific times of the day.', + timeCompKeywords: 'time, picker, select, clock', + + timeRangeCompName: 'Time Range', + timeRangeCompDesc: + 'A component for selecting a range of time, often used in scheduling applications.', + timeRangeCompKeywords: 'timerange, select, scheduling, duration', + + buttonCompName: 'Form Button', + buttonCompDesc: + 'A versatile button component for submitting forms, triggering actions, or navigating.', + buttonCompKeywords: 'button, submit, action, navigate', + + meetingControlCompName: 'Icon Button', + meetingCompDesc: + 'A button for controlling functions like start, end, mute, or share.', + meetingCompKeywords: 'control, button, start, end', + + linkCompName: 'Link', + linkCompDesc: + 'A hyperlink display component for navigation or linking to external resources.', + linkCompKeywords: 'link, hyperlink, navigation, external', + + scannerCompName: 'Scanner', + scannerCompDesc: + 'A component for scanning barcodes, QR codes, and other similar data.', + scannerCompKeywords: 'scanner, barcode, QR code, scan', + + dropdownCompName: 'Dropdown', + dropdownCompDesc: + 'A dropdown menu for compactly displaying a list of options.', + dropdownCompKeywords: 'dropdown, menu, options, select', + + toggleButtonCompName: 'Toggle Button', + toggleButtonCompDesc: + 'A button that can toggle between two states or options.', + toggleButtonCompKeywords: 'toggle, button, switch, state', + + textCompName: 'Text Display', + textCompDesc: + 'A simple component for displaying static or dynamic text content inclusive Markdown formatting.', + textCompKeywords: 'text, display, static, dynamic', + + tableCompName: 'Table', + tableCompDesc: + 'A rich table component for displaying data in a structured table format, with options for sorting and filtering, tree Data display and extensible Rows.', + tableCompKeywords: 'table, data, sorting, filtering', + + imageCompName: 'Image', + imageCompDesc: + 'A component for displaying images, supporting various formats based on URI or Base64 Data.', + imageCompKeywords: 'image, display, media, Base64', + + progressCompName: 'Progress', + progressCompDesc: + 'A visual indicator of progress, typically used to show the completion status of a task.', + progressCompKeywords: 'progress, indicator, status, task', + + progressCircleCompName: 'Progress Circle', + progressCircleCompDesc: + 'A circular progress indicator, often used for loading states or time-bound tasks.', + progressCircleCompKeywords: 'circle, progress, indicator, loading', + + fileViewerCompName: 'File Viewer', + fileViewerCompDesc: + 'A component for viewing various types of files, including documents and images.', + fileViewerCompKeywords: 'file, viewer, document, image', + + dividerCompName: 'Divider', + dividerCompDesc: + 'A visual divider component, used to separate content or sections in a layout.', + dividerCompKeywords: 'divider, separator, layout, design', + + qrCodeCompName: 'QR Code', + qrCodeCompDesc: + 'A component for displaying QR codes, useful for quick scanning and information transfer.', + qrCodeCompKeywords: 'QR code, scanning, barcode, information', + + formCompName: 'Form', + formCompDesc: + 'A container component for building structured forms with various input types.', + formCompKeywords: 'form, input, container, structure', + + jsonSchemaFormCompName: 'JSON Schema Form', + jsonSchemaFormCompDesc: + 'A dynamic form component generated based on a JSON schema.', + jsonSchemaFormCompKeywords: 'JSON, schema, form, dynamic', + + containerCompName: 'Container', + containerCompDesc: + 'A general-purpose container for layout and organization of UI elements.', + containerCompKeywords: 'container, layout, organization, UI', + + floatTextContainerCompName: 'Float Text Container', + floatTextContainerCompDesc: 'Float Text Container component', + floatTextContainerCompKeywords: 'container, layout, text, flow', + + collapsibleContainerCompName: 'Collapsible Container', + collapsibleContainerCompDesc: + 'A container that can be expanded or collapsed, ideal for managing content visibility.', + collapsibleContainerCompKeywords: + 'collapsible, container, expand, collapse', + + tabbedContainerCompName: 'Tabbed Container', + tabbedContainerCompDesc: + 'A container with tabbed navigation for organizing content into separate panels.', + tabbedContainerCompKeywords: 'tabbed, container, navigation, panels', + + pageLayoutCompName: 'Page Layout', + pageLayoutCompDesc: + 'A container which offers to create a layout with header, sider, footer and main content areas', + pageLayoutCompKeywords: 'layout, container, navigation, pages', + + modalCompName: 'Modal', + modalCompDesc: + 'A pop-up modal component for displaying content, alerts, or forms in focus.', + modalCompKeywords: 'modal, popup, alert, form', + + listViewCompName: 'List View', + listViewCompDesc: + 'A component for displaying a list of items or data, where you can place other components inside. Like a repeater.', + listViewCompKeywords: 'list, view, display, repeater', + + gridCompName: 'Grid', + gridCompDesc: + 'A flexible grid component for creating structured layouts with rows and columns as an extension to the List View component.', + gridCompKeywords: 'grid, layout, rows, columns', + + navigationCompName: 'Navigation', + navigationCompDesc: + 'A navigation component for creating menus, breadcrumbs, or tabs for site navigation.', + navigationCompKeywords: 'navigation, menu, breadcrumbs, tabs', + + iframeCompName: 'IFrame', + iframeCompDesc: + 'An inline frame component for embedding external web pages and apps or content within the application.', + iframeCompKeywords: 'iframe, embed, web page, content', + + customCompName: 'Custom Component', + customCompDesc: + 'A flexible, programmable component for creating unique, user-defined UI elements tailored to your specific needs.', + customCompKeywords: 'custom, user-defined, flexible, programmable', + + moduleCompName: 'Module', + moduleCompDesc: + 'Use Modules to create Micro-Apps designed for encapsulating specific functionalities or features. Modules can be then embedded and reused across all Apps.', + moduleCompKeywords: 'module, micro-app, functionality, reusable', + + jsonExplorerCompName: 'JSON Explorer', + jsonExplorerCompDesc: + 'A component for visually exploring and interacting with JSON data structures.', + jsonExplorerCompKeywords: 'JSON, explorer, data, structure', + + jsonEditorCompName: 'JSON Editor', + jsonEditorCompDesc: + 'An editor component for creating and modifying JSON data with validation and syntax highlighting.', + jsonEditorCompKeywords: 'JSON, editor, modify, validate', + + treeCompName: 'Tree', + treeCompDesc: + 'A tree structure component for displaying hierarchical data, such as file systems or organizational charts.', + treeCompKeywords: 'tree, hierarchical, data, structure', + + treeSelectCompName: 'Tree Select', + treeSelectCompDesc: + 'A selection component that presents options in a hierarchical tree format, allowing for organized and nested selections.', + treeSelectCompKeywords: 'tree, select, hierarchical, nested', + + audioCompName: 'Audio', + audioCompDesc: + 'A component for embedding audio content, with controls for playback and volume adjustment.', + audioCompKeywords: 'audio, playback, sound, music', + + videoCompName: 'Video', + videoCompDesc: + 'A multimedia component for embedding and playing video content, with support for various formats.', + videoCompKeywords: 'video, multimedia, playback, embed', + + drawerCompName: 'Drawer', + drawerCompDesc: + 'A sliding panel component that can be used for additional navigation or content display, typically emerging from the edge of the screen.', + drawerCompKeywords: 'drawer, sliding, panel, navigation', + + chartCompName: 'Chart', + chartCompDesc: + 'A versatile component for visualizing data through various types of charts and graphs.', + chartCompKeywords: 'chart, graph, data, visualization', + + carouselCompName: 'Image Carousel', + carouselCompDesc: + 'A rotating carousel component for showcasing images, banners, or content slides.', + carouselCompKeywords: 'carousel, images, rotation, showcase', + + imageEditorCompName: 'Image Editor', + imageEditorCompDesc: + 'An interactive component for editing and manipulating images, offering various tools and filters.', + imageEditorCompKeywords: 'image, editor, manipulate, tools', + + mermaidCompName: 'Mermaid Chart', + mermaidCompDesc: + 'A component for rendering complex diagrams and flowcharts based on Mermaid syntax.', + mermaidCompKeywords: 'mermaid, charts, diagrams, flowcharts', + + calendarCompName: 'Calendar', + calendarCompDesc: + 'A calendar component for displaying dates and events, with options for month, week, or day views.', + calendarCompKeywords: 'calendar, dates, events, scheduling', + + signatureCompName: 'Signature', + signatureCompDesc: + 'A component for capturing digital signatures, useful for approvals and verification processes.', + signatureCompKeywords: 'signature, digital, approval, verification', + + jsonLottieCompName: 'Lottie Animation', + jsonLottieCompDesc: + 'A component for displaying Lottie animations, providing lightweight and scalable animations based on JSON data.', + jsonLottieCompKeywords: 'lottie, animation, JSON, scalable', + + timelineCompName: 'Timeline', + timelineCompDesc: + 'A component for displaying events or actions in a chronological order, visually represented along a linear timeline.', + timelineCompKeywords: 'timeline, events, chronological, history', + + commentCompName: 'Comment', + commentCompDesc: + 'A component for adding and displaying user comments, supporting threaded replies and user interaction.', + commentCompKeywords: 'comment, discussion, user interaction, feedback', + + mentionCompName: 'Mention', + mentionCompDesc: + 'A component that supports mentioning users or tags within text content, typically used in social media or collaborative platforms.', + mentionCompKeywords: 'mention, tag, user, social media', + + responsiveLayoutCompName: 'Responsive Layout', + responsiveLayoutCompDesc: + 'A layout component designed to adapt and respond to different screen sizes and devices, ensuring a consistent user experience.', + responsiveLayoutCompKeywords: 'responsive, layout, adapt, screen size', + + iconCompName: 'Icons', + iconCompDesc: + 'Use various Icons to enhance the visual appeal and user experience of your application.', + iconCompKeywords: 'Icons, pictograms, symbols, shapes', + + tourCompName: 'Tour', + tourCompDesc: 'A product tour for guiding users.', + tourCompKeywords: + 'tour, product tour, walkthrough, interactive walkthrough', + + hillchartCompName: 'Hillchart', + hillchartCompDesc: + 'A visualization component for displaying project management state data in a hill chart format.', + hillchartCompKeywords: + 'project management, hill chart, visualization, data', + + openLayersGeoMapCompName: 'Openlayers Geomap', + openLayersGeoMapCompDesc: + 'A component for displaying interactive maps using OpenLayers, with support for various map layers and features.', + openLayersGeoMapCompKeywords: + 'openlayers, geo map, interactive, map layers', + + chartsGeoMapCompName: 'Geo Map Charts', + chartsGeoMapCompDesc: + 'A component for visualizing geographical data on interactive maps with dynamic charts', + chartsGeoMapCompKeywords: + 'geo map, charts, visualization, geographical data', + + bpmnEditorCompName: 'BPMN Editor', + bpmnEditorCompDesc: + 'A component for viewing, creating and editing BPMN diagrams, supporting various BPMN elements and features.', + bpmnEditorCompKeywords: 'BPMN, editor, diagrams, elements, workflows', + + turnstileCaptchaCompName: 'Turnstile Captcha', + turnstileCaptchaCompDesc: + 'A captcha component to verify users against bots.', + turnstileCaptchaCompKeywords: 'captcha, verification, identity, security', + + pivotTableCompName: 'Pivot Table', + pivotTableCompDesc: + 'A data summarization and analysis tool for organizing and aggregating data in a tabular format.', + pivotTableCompKeywords: 'pivot table, data, analysis, aggregation', + + funnelChartCompName: 'Funnel Chart', + funnelChartCompDesc: + 'A visualization tool for displaying the progressive reduction of data as it passes through stages.', + funnelChartCompKeywords: 'funnel chart, sales, conversions, process', + + gaugeChartCompName: 'Gauge Chart', + gaugeChartCompDesc: + 'A chart that displays data as a reading on a dial, useful for indicating the status or level of something.', + gaugeChartCompKeywords: 'gauge chart, metrics, performance, status', + + sankeyChartCompName: 'Sankey Chart', + sankeyChartCompDesc: + 'A flow diagram in which the width of the arrows is proportional to the flow rate, used to show energy, material, or cost transfers.', + sankeyChartCompKeywords: 'sankey chart, flow, energy, costs', + + candleStickChartCompName: 'Candlestick Chart', + candleStickChartCompDesc: + 'A style of financial chart used to describe price movements of a security, derivative, or currency.', + candleStickChartCompKeywords: 'candlestick chart, stocks, trading, finance', + + radarChartCompName: 'Radar Chart', + radarChartCompDesc: + 'A graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables.', + radarChartCompKeywords: 'radar chart, multivariate, performance analysis', + + heatmapChartCompName: 'Heatmap Chart', + heatmapChartCompDesc: + 'A graphical representation of data where individual values are represented as colors.', + heatmapChartCompKeywords: 'heatmap, data visualization, intensity', + + graphChartCompName: 'Graph Chart', + graphChartCompDesc: + 'A diagram representing a network of nodes connected by edges, useful for showing interconnections and relationships.', + graphChartCompKeywords: 'graph chart, networks, relationships, nodes', + + treeChartCompName: 'Tree Chart', + treeChartCompDesc: + 'A diagram that visually represents hierarchy in a tree-like structure, showing relationships among various nodes.', + treeChartCompKeywords: 'tree chart, hierarchy, organizational', + + treemapChartCompName: 'Treemap Chart', + treemapChartCompDesc: + 'A chart that uses nested rectangles to represent hierarchical data proportionately.', + treemapChartCompKeywords: 'treemap, hierarchy, data visualization', + + sunburstChartCompName: 'Sunburst Chart', + sunburstChartCompDesc: + 'A radial space-filling visualization technique that illustrates hierarchical relationships through layers of a circle.', + sunburstChartCompKeywords: 'sunburst chart, radial, hierarchy', + + themeriverChartCompName: 'Theme River Chart', + themeriverChartCompDesc: + 'A visualization resembling a stream graph that shows changes in a data set over time across categories.', + themeriverChartCompKeywords: 'theme river, time series, trends', + + basicChartCompName: 'Basic Chart', + basicChartCompDesc: + 'A versatile component for visualizing data through various types of charts and graphs.', + basicChartCompKeywords: 'chart, graph, data, visualization', + + shapeCompName: 'Shapes', + shapeCompDesc: + 'A collection of geometric shapes for use with diagrams, illustrations, and visualizations.', + shapeCompKeywords: 'shapes, geometric, diagrams, illustrations', // by mousheng - "colorPickerCompName": "Color Picker", - "colorPickerCompDesc": "Intuitive color selection for customization.", - "colorPickerCompKeywords": "color, picker, customization", - - "floatButtonCompName": "Float Button", - "floatButtonCompDesc": "A floating action button for prominent and quick actions.", - "floatButtonCompKeywords": "float button, action, quick", + colorPickerCompName: 'Color Picker', + colorPickerCompDesc: 'Intuitive color selection for customization.', + colorPickerCompKeywords: 'color, picker, customization', - "avatarCompName": "Avatar", - "avatarCompDesc": "Displays user avatars or profile images for personalized identification.", - "avatarCompKeywords": "avatar, profile image, user identification", + floatButtonCompName: 'Float Button', + floatButtonCompDesc: + 'A floating action button for prominent and quick actions.', + floatButtonCompKeywords: 'float button, action, quick', - "avatarGroupCompName": "Avatar Group", - "avatarGroupCompDesc": "A group of avatars to represent multiple users or entities in a compact and visually appealing way.", - "avatarGroupCompKeywords": "avatar group, users, entities, compact", + avatarCompName: 'Avatar', + avatarCompDesc: + 'Displays user avatars or profile images for personalized identification.', + avatarCompKeywords: 'avatar, profile image, user identification', - "transferName": "Transfer", - "transferDesc": "Facilitates data transfer between two lists with drag-and-drop functionality.", - "transferKeywords": "transfer, data, drag-and-drop", + avatarGroupCompName: 'Avatar Group', + avatarGroupCompDesc: + 'A group of avatars to represent multiple users or entities in a compact and visually appealing way.', + avatarGroupCompKeywords: 'avatar group, users, entities, compact', - "cardCompName": "Content Card", - "cardCompDesc": "A card component for displaying organized information or content in a structured manner.", - "cardCompKeywords": "card, information, content, display", + transferName: 'Transfer', + transferDesc: + 'Facilitates data transfer between two lists with drag-and-drop functionality.', + transferKeywords: 'transfer, data, drag-and-drop', - "timerCompName": "Timer", - "timerCompDesc": "A component that displays a countdown or elapsed time, useful for tracking durations and deadlines.", - "timerCompKeywords": "timer, countdown, elapsed time, tracking, durations, deadlines", + cardCompName: 'Content Card', + cardCompDesc: + 'A card component for displaying organized information or content in a structured manner.', + cardCompKeywords: 'card, information, content, display', + timerCompName: 'Timer', + timerCompDesc: + 'A component that displays a countdown or elapsed time, useful for tracking durations and deadlines.', + timerCompKeywords: + 'timer, countdown, elapsed time, tracking, durations, deadlines', }, - // eighth part - - "comp": { - "menuViewDocs": "View Documentation", - "menuViewPlayground": "View interactive Playground", - "menuUpgradeToLatest": "Upgrade to Latest Version", - "nameNotEmpty": "Cannot Be Empty", - "nameRegex": "Must Start with a Letter and Contain Only Letters, Digits, and Underscores (_)", - "nameJSKeyword": "Cannot Be a JavaScript Keyword", - "nameGlobalVariable": "Cannot Be Global Variable Name", - "nameExists": "Name {name} Already Exists", - "getLatestVersionMetaError": "Failed to Fetch Latest Version, Please Try Later.", - "needNotUpgrade": "Current Version is Already Latest.", - "compNotFoundInLatestVersion": "Current Component Not Found in the Latest Version.", - "upgradeSuccess": "Successfully Upgraded to Latest Version.", - "searchProp": "Search" - }, - "jsonSchemaForm": { - "retry": "Retry", - "resetAfterSubmit": "Reset After Successful Form Submit", - "jsonSchema": "JSON Schema", - "uiSchema": "UI Schema", - "schemaTooltip": "See", - "defaultData": "Pre-filled Form Data", - "dataDesc": "Current Form Data", - "required": "Required", - "maximum": "The Maximum Value is {value}", - "minimum": "The Minimum Value is {value}", - "exclusiveMaximum": "Should Be Less Than {value}", - "exclusiveMinimum": "Should Be Greater Than {value}", - "multipleOf": "Should Be a Multiple of {value}", - "minLength": "At Least {value} Characters", - "maxLength": "At Most {value} Characters", - "pattern": "Should Match the Pattern {value}", - "format": "Should Match the Format {value}" - }, - "select": { - "inputValueDesc": "Input Search Value" - }, - "customComp": { - "text": "It's a Good Day.", - "triggerQuery": "Trigger Query", - "updateData": "Update Data", - "updateText": "I'm Also in a Good Mood to Develop now my own Custom Component with Lowcoder!", - "sdkGlobalVarName": "Lowcoder", - "data": "Data you want to pass to the Custom Component", - "code": "Code of your Custom Component", - }, - "tree": { - "placeholder": "Please Select", - "selectType": "Select Type", - "noSelect": "No Select", - "singleSelect": "Single Select", - "multiSelect": "Multi Select", - "checkbox": "Checkbox", - "checkedStrategy": "Checked Strategy", - "showAll": "All Nodes", - "showParent": "Only Parent Nodes", - "showChild": "Only Child Nodes", - "autoExpandParent": "Auto Expand Parent", - "checkStrictly": "Check Strictly", - "checkStrictlyTooltip": "Check TreeNode Precisely; Parent TreeNode and Children TreeNodes are Not Associated", - "treeData": "Tree Data", - "treeDataDesc": "Current Tree Data", - "value": "Default Values", - "valueDesc": "Current Values", - "expanded": "Expanded Values", - "expandedDesc": "Current Expanded Values", - "defaultExpandAll": "Default Expand All Nodes", - "showLine": "Show Line", - "showLeafIcon": "Show Leaf Icon", - "treeDataAsia": "Asia", - "treeDataChina": "China", - "treeDataBeijing": "Beijing", - "treeDataShanghai": "Shanghai", - "treeDataJapan": "Japan", - "treeDataEurope": "Europe", - "treeDataEngland": "England", - "treeDataFrance": "France", - "treeDataGermany": "Germany", - "treeDataNorthAmerica": "North America", - "helpLabel": "Node Label", - "helpValue": "Unique Node Value in Tree", - "helpChildren": "Children Nodes", - "helpDisabled": "Disables the Node", - "helpSelectable": "Whether Node is Selectable (Single/Multi Select Type)", - "helpCheckable": "Whether to Display Checkbox (Checkbox Type)", - "helpDisableCheckbox": "Disables the Checkbox (Checkbox Type)" - }, - "moduleContainer": { - "eventTest": "Event Test", - "methodTest": "Method Test", - "inputTest": "Input Test" - }, - "password": { - "label": "Password", - "placeholder": "Please Enter Password", - "conformLabel": "Confirm Password", - "conformPlaceholder": "Please Confirm Password", - "visibilityToggle": "Show Visibility Toggle" - }, - "richTextEditor": { - "toolbar": "Customize Toolbar", - "toolbarDescription": "You can customize the toolbar. Please refer to: https://quilljs.com/docs/modules/toolbar/ for more details.", - "placeholder": "Please Input...", - "hideToolbar": "Hide Toolbar", - "content": "Content", - "title": "Title", - "save": "Save", - "link": "Link: ", - "edit": "Edit", - "remove": "Remove", - "defaultValue" : "Base Content" + comp: { + menuViewDocs: 'View Documentation', + menuViewPlayground: 'View interactive Playground', + menuUpgradeToLatest: 'Upgrade to Latest Version', + nameNotEmpty: 'Cannot Be Empty', + nameRegex: + 'Must Start with a Letter and Contain Only Letters, Digits, and Underscores (_)', + nameJSKeyword: 'Cannot Be a JavaScript Keyword', + nameGlobalVariable: 'Cannot Be Global Variable Name', + nameExists: 'Name {name} Already Exists', + getLatestVersionMetaError: + 'Failed to Fetch Latest Version, Please Try Later.', + needNotUpgrade: 'Current Version is Already Latest.', + compNotFoundInLatestVersion: + 'Current Component Not Found in the Latest Version.', + upgradeSuccess: 'Successfully Upgraded to Latest Version.', + searchProp: 'Search', + }, + jsonSchemaForm: { + retry: 'Retry', + resetAfterSubmit: 'Reset After Successful Form Submit', + jsonSchema: 'JSON Schema', + uiSchema: 'UI Schema', + schemaTooltip: 'See', + defaultData: 'Pre-filled Form Data', + dataDesc: 'Current Form Data', + required: 'Required', + maximum: 'The Maximum Value is {value}', + minimum: 'The Minimum Value is {value}', + exclusiveMaximum: 'Should Be Less Than {value}', + exclusiveMinimum: 'Should Be Greater Than {value}', + multipleOf: 'Should Be a Multiple of {value}', + minLength: 'At Least {value} Characters', + maxLength: 'At Most {value} Characters', + pattern: 'Should Match the Pattern {value}', + format: 'Should Match the Format {value}', + }, + select: { + inputValueDesc: 'Input Search Value', + }, + customComp: { + text: "It's a Good Day.", + triggerQuery: 'Trigger Query', + updateData: 'Update Data', + updateText: + "I'm Also in a Good Mood to Develop now my own Custom Component with Lowcoder!", + sdkGlobalVarName: 'Lowcoder', + data: 'Data you want to pass to the Custom Component', + code: 'Code of your Custom Component', + }, + tree: { + placeholder: 'Please Select', + selectType: 'Select Type', + noSelect: 'No Select', + singleSelect: 'Single Select', + multiSelect: 'Multi Select', + checkbox: 'Checkbox', + checkedStrategy: 'Checked Strategy', + showAll: 'All Nodes', + showParent: 'Only Parent Nodes', + showChild: 'Only Child Nodes', + autoExpandParent: 'Auto Expand Parent', + checkStrictly: 'Check Strictly', + checkStrictlyTooltip: + 'Check TreeNode Precisely; Parent TreeNode and Children TreeNodes are Not Associated', + treeData: 'Tree Data', + treeDataDesc: 'Current Tree Data', + value: 'Default Values', + valueDesc: 'Current Values', + expanded: 'Expanded Values', + expandedDesc: 'Current Expanded Values', + defaultExpandAll: 'Default Expand All Nodes', + showLine: 'Show Line', + showLeafIcon: 'Show Leaf Icon', + treeDataAsia: 'Asia', + treeDataChina: 'China', + treeDataBeijing: 'Beijing', + treeDataShanghai: 'Shanghai', + treeDataJapan: 'Japan', + treeDataEurope: 'Europe', + treeDataEngland: 'England', + treeDataFrance: 'France', + treeDataGermany: 'Germany', + treeDataNorthAmerica: 'North America', + helpLabel: 'Node Label', + helpValue: 'Unique Node Value in Tree', + helpChildren: 'Children Nodes', + helpDisabled: 'Disables the Node', + helpSelectable: 'Whether Node is Selectable (Single/Multi Select Type)', + helpCheckable: 'Whether to Display Checkbox (Checkbox Type)', + helpDisableCheckbox: 'Disables the Checkbox (Checkbox Type)', + }, + moduleContainer: { + eventTest: 'Event Test', + methodTest: 'Method Test', + inputTest: 'Input Test', + }, + password: { + label: 'Password', + placeholder: 'Please Enter Password', + conformLabel: 'Confirm Password', + conformPlaceholder: 'Please Confirm Password', + visibilityToggle: 'Show Visibility Toggle', + }, + richTextEditor: { + toolbar: 'Customize Toolbar', + toolbarDescription: + 'You can customize the toolbar. Please refer to: https://quilljs.com/docs/modules/toolbar/ for more details.', + placeholder: 'Please Input...', + hideToolbar: 'Hide Toolbar', + content: 'Content', + title: 'Title', + save: 'Save', + link: 'Link: ', + edit: 'Edit', + remove: 'Remove', + defaultValue: 'Base Content', }, // mousheng - "floatButton": { - "custom": "Custom", - "backTop": "Back Top", - "buttonType": "Button Type", - "buttonShape": "Button Shape", - "square": "Square", - "circle": "Circle", - "description": "Description", - "badge": "Badge", - "primary": "Primary", - "default": "Default", - "buttonTheme": "Button Theme", - "badgeColor": "Badge Color", - "dot": "Badge As Dot", - "hidden": "Hidden", - "visibilityHeight": "Visibility Height", - "visibilityHeightDesc": "Scroll to a certain height before displaying the return to top button, 0 is always displayed,Editing mode cannot preview in real-time" - }, - - "colorPicker": { - "trigger": "Triggers Event", - "click": "Click", - "hover": "Hover", - "disabledAlpha": "Disable Alpha Selection", - "recommended": "Recommended", - "showPresets": "Show Color Presets" - }, - - "badge": { - "showCloseButton": "Show close button", - "Type": "Badge type", - "Count": "Badge count", - "Size": "Badge size", - "SizeDefault": "default", - "SizeSmall": "Small", - "overflowCount": "Overflow count", - "Title": "Badge title", - "dot": "Dot", - "number": "Number", - "tooltip": "Tooltip" -}, - - "gantt": { - "key": "Key", - "title": "Title", - "project": "Project", - "from": "From", - "minute": "minute", - "hour": "Hour", - "day": "Day", - "week": "Week", - "month": "Month", - "year": "Year", - "quarter": "Quarter", - "tasks": "Tasks Data", - "level": "level", - "durationUnit": "Duration unit", - "duration": "Duration", - "hourScalesFormat": "%F %d", - "dayScalesFormat": "%d %M", - "weekScalesFormat1": "%d %M", - "weekScalesFormat2": "%j %D", - "monthScalesFormat1": "%F, %Y", - "monthScalesFormat2": "Week #%W", - "quarterScalesFormat": "{y} Q{i}", - "yearScalesFormat": "%Y", - "tree": "tree", - "ColumnsData": "Columns Data", - "allowChangeTask": "DbClick Task", - "allowAddLink": "Add Link", - "allowLinkDelete": "Link Delete", - "allowProgressDrag": "Progress Drag", - "allowTaskDrag": "Task Drag", - "links": "Links Data", - "dataFormat": "Data parse Format", - "handleDateChange": "Handle Task Change", - "handleTaskChange": "Handle Task Change", - "handleAddedLink": "Handle Added Link", - "handleDeletedLink": "Handle Deleted Link", - "handleProgressDrag": "Handle Progress Drag", - "showTodayMark": "Show Today Mark", - "resize": "Resize", - "otherEvents": "Other Events", - "openAllBranchInit": "Open All Branch Init", - "date": "Date", - "text": "Text", - "progress": "progress", - "width": "Width", - "ColumnsType": "Cloumns Type", - "currentId": "Current ID", - "currentObject": "Current Object", - "addTask": "Add Task(s)", - "taskObject": "Task Object", - "taskObjectDesc": "Supports arrays of Tasks or single Task Object", - "linkID": "link ID", - "linkIDDesc": "Supports arrays of Links ID or single Link Object", - "removeTask": "Remove Task", - "taskID": "Task ID", - "taskIDDesc": "Supports arrays of IDs or single ID", - "add": "Add", - "expandingAll": "Expanding All", - "collapsingAll": "Collapsing All", - "addTaskFail": "The addition task failed, and the parameter type should be an object or an array object", - "addLinkFail": "The addition link failed, and the parameter type should be an object or an array object", - "removeTaskFail": "The deletion task failed, and the parameter type should be string or string array", - "removeLinkFail": "The deletion links failed, and the parameter type should be string array", - "otherData": "Other Data{i}", - "projectText": "Project #{i}", - "taskText": "Task #{i}", - "AutoCalculateProgress": "Auto Calculation Progress", - "allowProjectDrag": "Allow Project Drag", - "showColumns": "Show Columns", - "exportToPNG": "Export to PNG", - "exportToPDF": "Export to PDF", - "exportToExcel": "Export to Excel", - "progressLowBg": "Low BgColor", - "progressLowColor": "Low Progress Color", - "progressMediumBg": "Medium BgColor", - "progressMediumColor": "Medium Progress Color", - "progressHighBg": "Heigh BgColor", - "progressHighColor": "Heigh Progress Color", - "progresscompletedColor": "Completed Progress Color", - "lowProgressLine": "Low Progress Line", - "mediumProgressLine": "Medium Progress Line", - "SegmentedColor": "Progress Segmented Color", - "link_f2s": "Link F2S", - "link_s2s": "Link S2S", - "link_f2f": "Link F2F", - "link_s2f": "Link S2F", - "weekScale": "#{i}, ", - "showHolidays": "Show Holidays", - "StatutoryHolidays": "Statutory Holidays Data", - "skipOffTime": "Hides Non-Working Time", - "weekend": "Weekend", - "weekendSelected": "Weekend Selected", - "noWorkHour": "No Work Hour", - "noWorkHourSelected": "no Work Hour Selected", - "showWorkTimes": "Show Work Times", - "workTimeData": "Work Time Data", - "fit": "fit", - "manual": "manual", - "scaleMode": "Scale Mode", - "startDate": "Start Date", - "endDate": "End Date", - "addLink": "Add Link(s)", - "linkObject": "link Object", - "removeLink": "remove Link", - "allowSort": "Allow Sort", - "showTask": "Show Task", - "toggleOnDBClick": "Toggle On DBClick", - "sortOptions": "Initial Sorting Options", - "rowHeight": "Row Height", - "showTooltip": "Show Tooltip", - "tooltipTemplates": "Tooltip Template", - "allowResizeTask": "Allow Resize Task", - "projectColor": "Project Color", - "projectColorBg": "Project BgColor", - "taskColor": "Task Color", - "taskColorBg": "Task BgColor", - "milestoneColor": "Milestone Color", - "highlightOverdue": "Highlight Overdue", - "overdueColor": "Overdue Color", - "overdueBgColor": "Overdue BgColor", - "projectCompletedBgColor": "Project Completed BgColor", - "projectCompletedColor": "Project Completed Color", - "tag": "tag", - "tasksTableWidth": "Tasks Table Width", - "allowErrorMessage": "Allow Error Message", - "currentProjectId": "Current Project Id", - "currentProjectLastTask": "Current Project Last Task", - "onlySortProject": "Only Sort Project" - }, - - "transfer": { - "sourceTitle": "Source Data", - "targetTitle": "Target Data", - "content": "Content {i}", - "items": "Items", - "targetKeys": "Selected Keys", - "oneWay": "One Way", - "pagination": "Pagination", - "pageSize": "Page Size", - "allowSearch": "Allow Search", - "selectedKeys": "Selected Keys", - "searchInfo": "Search Info", - "targerObject": "Targer Object" - }, - - "avatarGroup": { - "maxCount": "Max Count", - "avatarSize": "Avatar Size", - "autoColor": "Auto Color", - "alignment": "Alignment", - "currentAvatar": "Current Avatar" - }, - - "avatarComp": { - "square": "square", - "circle": "circle", - "icon": "icon", - "shape": "shape", - "counts": "Badge", - "title": "title", - "src": "src", - "avatarCompTooltip": "The display priority is: image -> characters -> icon. Depending on what is first available.", - "iconSize": "Icon Size", - "avatarBackground": "Background", - "label": "Label", - "caption": "Caption", - "labelPosition": "Position", - "alignmentPosition": "alignment", - "text": "Text", - "enableDropDown": "Enable DropDown", - "containerBackground": "Background" - }, - - "card": { - "cardType": "Card Type", - "common": "common", - "custom": "custom", - "default": "default", - "small": "small", - "showTitle": "Show title", - "title": "Title", - "more": "More", - "extraTitle": "Call to Action", - "CoverImg": "Cover Image", - "imgSrc": "Image Source", - "showMeta": "Show Content", - "metaTitle": "Content Title", - "metaDesc": "Content Description", - "imgHeight": "Image Height", - "showActionIcon": "Show Action Options", - "actionOptions": "Action Options", - "menu": "Menu {i}", - "hoverColor": "hover Color", - "IconColor": "Icon Color", - "titleSize": "Title Size" - }, - - "timer": { - "timerState": "timer State", - "elapsedTime": "Elapsed Time", - "timer": "Timer", - "countdown": "Countdown", - "defaultValue": "Default Value", - "timerType": "Timer Type", - "start": "Start", - "pause": "Pause", - "resume": "Resume", - "reset": "Reset", - "startPause": "Start/Pause", - "hideButton": "Hide Button", - "fontColor": "Font Color" + floatButton: { + custom: 'Custom', + backTop: 'Back Top', + buttonType: 'Button Type', + buttonShape: 'Button Shape', + square: 'Square', + circle: 'Circle', + description: 'Description', + badge: 'Badge', + primary: 'Primary', + default: 'Default', + buttonTheme: 'Button Theme', + badgeColor: 'Badge Color', + dot: 'Badge As Dot', + hidden: 'Hidden', + visibilityHeight: 'Visibility Height', + visibilityHeightDesc: + 'Scroll to a certain height before displaying the return to top button, 0 is always displayed,Editing mode cannot preview in real-time', + }, + + colorPicker: { + trigger: 'Triggers Event', + click: 'Click', + hover: 'Hover', + disabledAlpha: 'Disable Alpha Selection', + recommended: 'Recommended', + showPresets: 'Show Color Presets', + }, + + badge: { + showCloseButton: 'Show close button', + Type: 'Badge type', + Count: 'Badge count', + Size: 'Badge size', + SizeDefault: 'default', + SizeSmall: 'Small', + overflowCount: 'Overflow count', + Title: 'Badge title', + dot: 'Dot', + number: 'Number', + tooltip: 'Tooltip', + }, + + gantt: { + key: 'Key', + title: 'Title', + project: 'Project', + from: 'From', + minute: 'minute', + hour: 'Hour', + day: 'Day', + week: 'Week', + month: 'Month', + year: 'Year', + quarter: 'Quarter', + tasks: 'Tasks Data', + level: 'level', + durationUnit: 'Duration unit', + duration: 'Duration', + hourScalesFormat: '%F %d', + dayScalesFormat: '%d %M', + weekScalesFormat1: '%d %M', + weekScalesFormat2: '%j %D', + monthScalesFormat1: '%F, %Y', + monthScalesFormat2: 'Week #%W', + quarterScalesFormat: '{y} Q{i}', + yearScalesFormat: '%Y', + tree: 'tree', + ColumnsData: 'Columns Data', + allowChangeTask: 'DbClick Task', + allowAddLink: 'Add Link', + allowLinkDelete: 'Link Delete', + allowProgressDrag: 'Progress Drag', + allowTaskDrag: 'Task Drag', + links: 'Links Data', + dataFormat: 'Data parse Format', + handleDateChange: 'Handle Task Change', + handleTaskChange: 'Handle Task Change', + handleAddedLink: 'Handle Added Link', + handleDeletedLink: 'Handle Deleted Link', + handleProgressDrag: 'Handle Progress Drag', + showTodayMark: 'Show Today Mark', + resize: 'Resize', + otherEvents: 'Other Events', + openAllBranchInit: 'Open All Branch Init', + date: 'Date', + text: 'Text', + progress: 'progress', + width: 'Width', + ColumnsType: 'Cloumns Type', + currentId: 'Current ID', + currentObject: 'Current Object', + addTask: 'Add Task(s)', + taskObject: 'Task Object', + taskObjectDesc: 'Supports arrays of Tasks or single Task Object', + linkID: 'link ID', + linkIDDesc: 'Supports arrays of Links ID or single Link Object', + removeTask: 'Remove Task', + taskID: 'Task ID', + taskIDDesc: 'Supports arrays of IDs or single ID', + add: 'Add', + expandingAll: 'Expanding All', + collapsingAll: 'Collapsing All', + addTaskFail: + 'The addition task failed, and the parameter type should be an object or an array object', + addLinkFail: + 'The addition link failed, and the parameter type should be an object or an array object', + removeTaskFail: + 'The deletion task failed, and the parameter type should be string or string array', + removeLinkFail: + 'The deletion links failed, and the parameter type should be string array', + otherData: 'Other Data{i}', + projectText: 'Project #{i}', + taskText: 'Task #{i}', + AutoCalculateProgress: 'Auto Calculation Progress', + allowProjectDrag: 'Allow Project Drag', + showColumns: 'Show Columns', + exportToPNG: 'Export to PNG', + exportToPDF: 'Export to PDF', + exportToExcel: 'Export to Excel', + progressLowBg: 'Low BgColor', + progressLowColor: 'Low Progress Color', + progressMediumBg: 'Medium BgColor', + progressMediumColor: 'Medium Progress Color', + progressHighBg: 'Heigh BgColor', + progressHighColor: 'Heigh Progress Color', + progresscompletedColor: 'Completed Progress Color', + lowProgressLine: 'Low Progress Line', + mediumProgressLine: 'Medium Progress Line', + SegmentedColor: 'Progress Segmented Color', + link_f2s: 'Link F2S', + link_s2s: 'Link S2S', + link_f2f: 'Link F2F', + link_s2f: 'Link S2F', + weekScale: '#{i}, ', + showHolidays: 'Show Holidays', + StatutoryHolidays: 'Statutory Holidays Data', + skipOffTime: 'Hides Non-Working Time', + weekend: 'Weekend', + weekendSelected: 'Weekend Selected', + noWorkHour: 'No Work Hour', + noWorkHourSelected: 'no Work Hour Selected', + showWorkTimes: 'Show Work Times', + workTimeData: 'Work Time Data', + fit: 'fit', + manual: 'manual', + scaleMode: 'Scale Mode', + startDate: 'Start Date', + endDate: 'End Date', + addLink: 'Add Link(s)', + linkObject: 'link Object', + removeLink: 'remove Link', + allowSort: 'Allow Sort', + showTask: 'Show Task', + toggleOnDBClick: 'Toggle On DBClick', + sortOptions: 'Initial Sorting Options', + rowHeight: 'Row Height', + showTooltip: 'Show Tooltip', + tooltipTemplates: 'Tooltip Template', + allowResizeTask: 'Allow Resize Task', + projectColor: 'Project Color', + projectColorBg: 'Project BgColor', + taskColor: 'Task Color', + taskColorBg: 'Task BgColor', + milestoneColor: 'Milestone Color', + highlightOverdue: 'Highlight Overdue', + overdueColor: 'Overdue Color', + overdueBgColor: 'Overdue BgColor', + projectCompletedBgColor: 'Project Completed BgColor', + projectCompletedColor: 'Project Completed Color', + tag: 'tag', + tasksTableWidth: 'Tasks Table Width', + allowErrorMessage: 'Allow Error Message', + currentProjectId: 'Current Project Id', + currentProjectLastTask: 'Current Project Last Task', + onlySortProject: 'Only Sort Project', + }, + + transfer: { + sourceTitle: 'Source Data', + targetTitle: 'Target Data', + content: 'Content {i}', + items: 'Items', + targetKeys: 'Selected Keys', + oneWay: 'One Way', + pagination: 'Pagination', + pageSize: 'Page Size', + allowSearch: 'Allow Search', + selectedKeys: 'Selected Keys', + searchInfo: 'Search Info', + targerObject: 'Targer Object', + }, + + avatarGroup: { + maxCount: 'Max Count', + avatarSize: 'Avatar Size', + autoColor: 'Auto Color', + alignment: 'Alignment', + currentAvatar: 'Current Avatar', + }, + + avatarComp: { + square: 'square', + circle: 'circle', + icon: 'icon', + shape: 'shape', + counts: 'Badge', + title: 'title', + src: 'src', + avatarCompTooltip: + 'The display priority is: image -> characters -> icon. Depending on what is first available.', + iconSize: 'Icon Size', + avatarBackground: 'Background', + label: 'Label', + caption: 'Caption', + labelPosition: 'Position', + alignmentPosition: 'alignment', + text: 'Text', + enableDropDown: 'Enable DropDown', + containerBackground: 'Background', + }, + + card: { + cardType: 'Card Type', + common: 'common', + custom: 'custom', + default: 'default', + small: 'small', + showTitle: 'Show title', + title: 'Title', + more: 'More', + extraTitle: 'Call to Action', + CoverImg: 'Cover Image', + imgSrc: 'Image Source', + showMeta: 'Show Content', + metaTitle: 'Content Title', + metaDesc: 'Content Description', + imgHeight: 'Image Height', + showActionIcon: 'Show Action Options', + actionOptions: 'Action Options', + menu: 'Menu {i}', + hoverColor: 'hover Color', + IconColor: 'Icon Color', + titleSize: 'Title Size', + }, + + timer: { + timerState: 'timer State', + elapsedTime: 'Elapsed Time', + timer: 'Timer', + countdown: 'Countdown', + defaultValue: 'Default Value', + timerType: 'Timer Type', + start: 'Start', + pause: 'Pause', + resume: 'Resume', + reset: 'Reset', + startPause: 'Start/Pause', + hideButton: 'Hide Button', + fontColor: 'Font Color', }, - // ninth part - "iconComp": { - "icon": "Icon", - "autoSize": "Icon AutoSize", - "iconSize": "Icon Size", - }, - "numberInput": { - "formatter": "Format", - "precision": "Precision", - "allowNull": "Allow Null Value", - "thousandsSeparator": "Show Thousands Separator", - "controls": "Show Increment/Decrement Buttons", - "step": "Step", - "standard": "Standard", - "percent": "Percent" - }, - "slider": { - "step": "Step", - "stepTooltip": "The Value Must Be Greater Than 0 and Divisible by (Max-Min)", - "vertical": "Vertical Orientation", - }, - "rating": { - "max": "Max Rating", - "allowHalf": "Allow Half Rating Points" - }, - "optionsControl": { - "optionList": "Options", - "option": "Option", - "optionI": "Option {i}", - "viewDocs": "View Docs", - "tip": "The 'item' and 'i' Variables Represent the Value and Index of Each Item in the Data Array" - }, - "stepOptionsControl": { - "value": "Value / Key", - "valueTooltip": "Step Value must be a number. For the first Step, it must be equal to the initial value. Numbers must be in consistent and ascending order", - "title": "Step Title", - "subTitle": "Step Subtitle", - "description": "Step Description", - "status": "Step Status", - "icon": "Step Icon", - }, - "step" : { - "initialValue": "Start Numbers at", - "initialValueTooltip": "Where to start the visual Numbering. Must be 1 or higher.", - "valueDesc": "Current Value", - "size" : "Steps Size", - "sizeSmall" : "Small", - "sizeDefault" : "Default", - "percent" : "Steps Percent", - "type" : "Steps Type", - "typeDefault" : "Standard", - "typeNavigation" : "Navigation", - "typeInline" : "Inline", - "direction" : "Steps Direction", - "directionVertical" : "Vertical", - "directionHorizontal" : "Horizontal", - "labelPlacement" : "Steps Label Placement", - "status" : "Steps Status", - "statusWait" : "Wait", - "statusProcess" : "Process", - "statusFinish" : "Finish", - "statusError" : "Error", - "showDots" : "Show Dots instead Symbols", - "showIcons" : "Show Icons instead Symbols", - "responsive" : "Responsive", - "selectable" : "Selectable", - }, - "coloredTagOptionControl" : { - "tag" : "Tag Text", - "color" : "Color", - "icon" : "Icon", - }, - "radio": { - "options": "Options", - "horizontal": "Horizontal", - "horizontalTooltip": "The Horizontal Layout Wraps Itself When It Runs Out of Space", - "vertical": "Vertical", - "verticalTooltip": "The Vertical Layout Will Always Be Displayed in a Single Column", - "autoColumns": "Auto Column", - "autoColumnsTooltip": "The Auto Column Layout Automatically Rearranges the Order as Space Permits and Displays as Multiple Columns" - }, - "cascader": { - "options": "JSON Data to show cascading selections", - }, - "selectInput": { - "valueDesc": "Currently Selected Value", - "selectedIndexDesc": "The Index of the Currently Selected Value, or -1 if No Value Is Selected", - "selectedLabelDesc": "The Label of the Currently Selected Value" - }, - "file": { - "typeErrorMsg": "Must Be a Number with a Valid File Size Unit, or a Unitless Number of Bytes.", - "fileEmptyErrorMsg": "Upload Failed. The File Size Is Empty.", - "fileSizeExceedErrorMsg": "Upload Failed. The File Size Exceeds the Limit.", - "minSize": "Min Size", - "minSizeTooltip": "The Minimum Size of Uploaded Files with Optional File Size Units (e.g., '5kb', '10 MB'). If No Unit Is Provided, the Value Will Be Considered a Number of Bytes.", - "maxSize": "Max Size", - "maxSizeTooltip": "The Maximum Size of Uploaded Files with Optional File Size Units (e.g., '5kb', '10 MB'). If No Unit Is Provided, the Value Will Be Considered a Number of Bytes.", - "single": "Single", - "multiple": "Multiple", - "directory": "Directory", - "upload": "Browse", - "fileType": "File Types", - "reference": "Please Refer to", - "fileTypeTooltipUrl": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers", - "fileTypeTooltip": "Unique File Type Specifiers", - "uploadType": "Upload Type", - "showUploadList": "Show Upload List", - "maxFiles": "Max Files", - "filesValueDesc": "The Contents of the Currently Uploaded File Are Base64 Encoded", - "filesDesc": "List of the Current Uploaded Files. For Details, Refer to", - "clearValueDesc": "Clear All Files", - "parseFiles": "Parse Files", - "parsedValueTooltip1": "If parseFiles Is True, Upload Files Will Parse to Object, Array, or String. Parsed Data Can Be Accessed via the parsedValue Array.", - "parsedValueTooltip2": "Supports Excel, JSON, CSV, and Text Files. Other Formats Will Return Null." - }, - "date": { - "format": "Format", - "formatTip": "Support: 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD', 'Timestamp'", - "reference": "Please Refer to", - "showTime": "Show Time", - "start": "Start Date", - "end": "End Date", - "year": "Year", - "quarter": "Quarter", - "month": "Month", - "week": "Week", - "date": "Date", - "clearAllDesc": "Clear All", - "resetAllDesc": "Reset All", - "placeholder": "Select Date", - "placeholderText": "Placeholder", - "startDate": "Start Date", - "endDate": "End Date" - }, - "time": { - "start": "Start Time", - "end": "End Time", - "formatTip": "Support: 'HH:mm:ss', 'Timestamp'", - "format": "Format", - "placeholder": "Select Time", - "placeholderText": "Placeholder", - "startTime": "Start Time", - "endTime": "End Time" - }, - "button": { - "prefixIcon": "Prefix Icon", - "prefixText": "Prefix Text", - "suffixIcon": "Suffix Icon", - "icon": "Icon", - "iconSize": "Icon Size", - "button": "Form Button", - "formToSubmit": "Form to Submit", - "default": "Default", - "submit": "Submit", - "textDesc": "Text Currently Displayed on Button", - "loadingDesc": "Is the Button in Loading State? If True the Current Button Is Loading", - "formButtonEvent": "Event" - }, - "link": { - "link": "Link", - "textDesc": "Text Currently Displayed on Link", - "loadingDesc": "Is the Link in Loading State? If True the Current Link Is Loading" - }, - "scanner": { - "text": "Click Scan", - "camera": "Camera {index}", - "changeCamera": "Switch Camera", - "continuous": "Continuous Scanning", - "uniqueData": "Ignore Duplicate Data", - "maskClosable": "Click the Mask to Close", - "errTip": "Please Use This Component Under HTTPS or Localhost" - }, - "dropdown": { - "onlyMenu": "Display with Label Only", - "textDesc": "Text Currently Displayed on Button" - }, - "textShow": { - "text": "### 👋 Hello, {name}", - "valueTooltip": "Markdown Supports Most HTML Tags and Attributes. iframe, Script, and Other Tags Are Disabled for Security Reasons.", - "verticalAlignment": "Vertical Alignment", - "horizontalAlignment": "Horizontal Alignment", - "textDesc": "Text Displayed in the Current Text Box" + iconComp: { + icon: 'Icon', + autoSize: 'Icon AutoSize', + iconSize: 'Icon Size', + }, + numberInput: { + formatter: 'Format', + precision: 'Precision', + allowNull: 'Allow Null Value', + thousandsSeparator: 'Show Thousands Separator', + controls: 'Show Increment/Decrement Buttons', + step: 'Step', + standard: 'Standard', + percent: 'Percent', + }, + slider: { + step: 'Step', + stepTooltip: 'The Value Must Be Greater Than 0 and Divisible by (Max-Min)', + vertical: 'Vertical Orientation', + }, + rating: { + max: 'Max Rating', + allowHalf: 'Allow Half Rating Points', + }, + optionsControl: { + optionList: 'Options', + option: 'Option', + optionI: 'Option {i}', + viewDocs: 'View Docs', + tip: "The 'item' and 'i' Variables Represent the Value and Index of Each Item in the Data Array", + }, + stepOptionsControl: { + value: 'Value / Key', + valueTooltip: + 'Step Value must be a number. For the first Step, it must be equal to the initial value. Numbers must be in consistent and ascending order', + title: 'Step Title', + subTitle: 'Step Subtitle', + description: 'Step Description', + status: 'Step Status', + icon: 'Step Icon', + }, + step: { + initialValue: 'Start Numbers at', + initialValueTooltip: + 'Where to start the visual Numbering. Must be 1 or higher.', + valueDesc: 'Current Value', + size: 'Steps Size', + sizeSmall: 'Small', + sizeDefault: 'Default', + percent: 'Steps Percent', + type: 'Steps Type', + typeDefault: 'Standard', + typeNavigation: 'Navigation', + typeInline: 'Inline', + direction: 'Steps Direction', + directionVertical: 'Vertical', + directionHorizontal: 'Horizontal', + labelPlacement: 'Steps Label Placement', + status: 'Steps Status', + statusWait: 'Wait', + statusProcess: 'Process', + statusFinish: 'Finish', + statusError: 'Error', + showDots: 'Show Dots instead Symbols', + showIcons: 'Show Icons instead Symbols', + responsive: 'Responsive', + selectable: 'Selectable', + }, + coloredTagOptionControl: { + tag: 'Tag Text', + color: 'Color', + icon: 'Icon', + }, + radio: { + options: 'Options', + horizontal: 'Horizontal', + horizontalTooltip: + 'The Horizontal Layout Wraps Itself When It Runs Out of Space', + vertical: 'Vertical', + verticalTooltip: + 'The Vertical Layout Will Always Be Displayed in a Single Column', + autoColumns: 'Auto Column', + autoColumnsTooltip: + 'The Auto Column Layout Automatically Rearranges the Order as Space Permits and Displays as Multiple Columns', + }, + cascader: { + options: 'JSON Data to show cascading selections', + }, + selectInput: { + valueDesc: 'Currently Selected Value', + selectedIndexDesc: + 'The Index of the Currently Selected Value, or -1 if No Value Is Selected', + selectedLabelDesc: 'The Label of the Currently Selected Value', + }, + file: { + typeErrorMsg: + 'Must Be a Number with a Valid File Size Unit, or a Unitless Number of Bytes.', + fileEmptyErrorMsg: 'Upload Failed. The File Size Is Empty.', + fileSizeExceedErrorMsg: 'Upload Failed. The File Size Exceeds the Limit.', + minSize: 'Min Size', + minSizeTooltip: + "The Minimum Size of Uploaded Files with Optional File Size Units (e.g., '5kb', '10 MB'). If No Unit Is Provided, the Value Will Be Considered a Number of Bytes.", + maxSize: 'Max Size', + maxSizeTooltip: + "The Maximum Size of Uploaded Files with Optional File Size Units (e.g., '5kb', '10 MB'). If No Unit Is Provided, the Value Will Be Considered a Number of Bytes.", + single: 'Single', + multiple: 'Multiple', + directory: 'Directory', + upload: 'Browse', + fileType: 'File Types', + reference: 'Please Refer to', + fileTypeTooltipUrl: + 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers', + fileTypeTooltip: 'Unique File Type Specifiers', + uploadType: 'Upload Type', + showUploadList: 'Show Upload List', + maxFiles: 'Max Files', + filesValueDesc: + 'The Contents of the Currently Uploaded File Are Base64 Encoded', + filesDesc: 'List of the Current Uploaded Files. For Details, Refer to', + clearValueDesc: 'Clear All Files', + parseFiles: 'Parse Files', + parsedValueTooltip1: + 'If parseFiles Is True, Upload Files Will Parse to Object, Array, or String. Parsed Data Can Be Accessed via the parsedValue Array.', + parsedValueTooltip2: + 'Supports Excel, JSON, CSV, and Text Files. Other Formats Will Return Null.', + }, + date: { + format: 'Format', + formatTip: "Support: 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD', 'Timestamp'", + reference: 'Please Refer to', + showTime: 'Show Time', + start: 'Start Date', + end: 'End Date', + year: 'Year', + quarter: 'Quarter', + month: 'Month', + week: 'Week', + date: 'Date', + clearAllDesc: 'Clear All', + resetAllDesc: 'Reset All', + placeholder: 'Select Date', + placeholderText: 'Placeholder', + startDate: 'Start Date', + endDate: 'End Date', + }, + time: { + start: 'Start Time', + end: 'End Time', + formatTip: "Support: 'HH:mm:ss', 'Timestamp'", + format: 'Format', + placeholder: 'Select Time', + placeholderText: 'Placeholder', + startTime: 'Start Time', + endTime: 'End Time', + }, + button: { + prefixIcon: 'Prefix Icon', + prefixText: 'Prefix Text', + suffixIcon: 'Suffix Icon', + icon: 'Icon', + iconSize: 'Icon Size', + button: 'Form Button', + formToSubmit: 'Form to Submit', + default: 'Default', + submit: 'Submit', + textDesc: 'Text Currently Displayed on Button', + loadingDesc: + 'Is the Button in Loading State? If True the Current Button Is Loading', + formButtonEvent: 'Event', + }, + link: { + link: 'Link', + textDesc: 'Text Currently Displayed on Link', + loadingDesc: + 'Is the Link in Loading State? If True the Current Link Is Loading', + }, + scanner: { + text: 'Click Scan', + camera: 'Camera {index}', + changeCamera: 'Switch Camera', + continuous: 'Continuous Scanning', + uniqueData: 'Ignore Duplicate Data', + maskClosable: 'Click the Mask to Close', + errTip: 'Please Use This Component Under HTTPS or Localhost', + }, + dropdown: { + onlyMenu: 'Display with Label Only', + textDesc: 'Text Currently Displayed on Button', + }, + textShow: { + text: '### 👋 Hello, {name}', + valueTooltip: + 'Markdown Supports Most HTML Tags and Attributes. iframe, Script, and Other Tags Are Disabled for Security Reasons.', + verticalAlignment: 'Vertical Alignment', + horizontalAlignment: 'Horizontal Alignment', + textDesc: 'Text Displayed in the Current Text Box', }, - // tenth part - - "table": { - "editable": "Editable", - "columnNum": "Columns", - "viewModeResizable": "Column Width Adjusted by User", - "viewModeResizableTooltip": "Whether Users Can Adjust Column Width.", - "visibleResizables": "Show Resize Handles", - "visibleResizablesTooltip": "Display visible Resize Handles in the Table Header.", - "showFilter": "Show Filter Button", - "showRefresh": "Show Refresh Button", - "showDownload": "Show Download Button", - "columnSetting": "Show Column Setting Button", - "searchText": "Search Text", - "searchTextTooltip": "Search and Filter the Data Presented in the Table", - "showQuickJumper": "Show Quick Jumper", - "hideOnSinglePage": "Hide on Single Page", - "showSizeChanger": "Show Size Changer Button", - "pageSizeOptions": "Page Size Options", - "pageSize": "Page Size", - "total": "Total Row Count", - "totalTooltip": "The Default Value is the Number of Current Data Items, Which Can Be Obtained from the Query, for Example: '{{query1.data[0].count}}'", - "filter": "Filter", - "filterRule": "Filter Rule", - "chooseColumnName": "Choose Column", - "chooseCondition": "Choose Condition", - "clear": "Clear", - "columnShows": "Column Shows", - "selectAll": "Select All", - "and": "And", - "or": "Or", - "contains": "Contains", - "notContain": "Does Not Contain", - "equals": "Equals", - "isNotEqual": "Is Not Equal", - "isEmpty": "Is Empty", - "isNotEmpty": "Is Not Empty", - "greater": "Greater Than", - "greaterThanOrEquals": "Greater Than or Equals", - "lessThan": "Less Than", - "lessThanOrEquals": "Less Than or Equals", - "action": "Action", - "columnValue": "Column Value", - "columnValueTooltip": "'{{currentCell}}': Current Cell Data\n '{{currentRow}}': Current Row Data\n '{{currentIndex}}': Current Data Index (Starting from 0)\n Example: '{{currentCell * 5}}' Show 5 Times the Original Value Data.", - "imageSrc": "Image Source", - "imageSize": "Image Size", - "columnTitle": "Title", - "showTitle": "Show Title", - "showTitleTooltip": "Show/Hide column title in table header", - "sortable": "Sortable", - "align": "Alignment", - "fixedColumn": "Fixed Column", - "autoWidth": "Auto Width", - "customColumn": "Custom Column", - "auto": "Auto", - "fixed": "Fixed", - "columnType": "Column Type", - "dataMapping": "Data Mapping", - "numberStep": "Step", - "numberStepTooltip": "The number to which the current value is increased or decreased. It can be an integer or decimal", - "precision": "Precision", - "float": "Float", - "prefix": "Prefix", - "suffix": "Suffix", - "avatars": "Avatars", - "avatarGroupAlignment": "Avatars Alignment", - "text": "Text", - "number": "Number", - "link": "Link", - "links": "Links", - "tag": "Tag", - "select": "Select", - "date": "Date", - "dateTime": "Date Time", - "badgeStatus": "Status", - "button": "Button", - "image": "Image", - "boolean": "Boolean", - "switch": "Switch", - "rating": "Rating", - "progress": "Progress", - "option": "Operation", - "optionList": "Operation List", - "option1": "Operation 1", - "status": "Status", - "statusTooltip": "Optional Values: Success, Error, Default, Warning, Processing", - "primaryButton": "Primary", - "defaultButton": "Default", - "type": "Type", - "tableSize": "Table Size", - "hideHeader": "Hide Table Header", - "fixedHeader": "Fixed Table Header", - "fixedHeaderTooltip": "Header Will Be Fixed for Vertically Scrollable Table", - "fixedToolbar": "Fixed Toolbar", - "fixedToolbarTooltip": "Toolbar Will Be Fixed for Vertically Scrollable Table Based on Position", - "hideBordered": "Show Resize Handles", - "showHeaderGridBorder": "Show Header Grid Border", - "showRowGridBorder": "Show Row Grid Border", - "showVerticalRowGridBorder": "Show vertical Row Grid Border", - "showHorizontalRowGridBorder": "Show horizontal Row Grid Border", - "deleteColumn": "Delete Column", - "confirmDeleteColumn": "Confirm Delete Column: ", - "small": "S", - "middle": "M", - "large": "L", - "refreshButtonTooltip": "The Current Data Changes, Click to Regenerate the Column.", - "changeSetDesc": "An Object Representing Changes to an Editable Table, Only Contains the Changed Cell. Rows Go First and Columns Go Second.", - "selectedRowDesc": "Provides Data for the Currently Selected Row, Indicating the Row That Triggers a Click Event If the User Clicks a Button/Link on the Row", - "selectedRowsDesc": "Useful in Multiple Selection Mode, Same as SelectedRow", - "pageNoDesc": "Current Display Page, Starting from 1", - "pageSizeDesc": "How Many Rows per Page", - "sortColumnDesc": "The Name of the Currently Selected Sorted Column", - "sortDesc": "Whether the Current Row Is in Descending Order", - "pageOffsetDesc": "The Current Start of Paging, Used for Paging to Get Data. Example: Select * from Users Limit '{{table1.pageSize}}' Offset '{{table1.pageOffset}}'", - "displayDataDesc": "Data Displayed in the Current Table", - "selectedIndexDesc": "Selected Index in Display Data", - "filterDesc": "Table Filtering Parameters", - "dataDesc": "The JSON Data for the Table", - "saveChanges": "Save Changes", - "cancelChanges": "Cancel Changes", - "rowSelectChange": "Row Select Change", - "rowClick": "Row Click", - "rowExpand": "Row Expand", - "rowShrink": "Row Shrink", - "search": "Search", - "download": "Download", - "columnEdited": "Column Edited", - "filterChange": "Filter Change", - "sortChange": "Sort Change", - "pageChange": "Page Change", - "refresh": "Refresh", - "rowColor": "Conditional row color", - "rowColorDesc": "Conditionally Set the Row Color Based on the Optional Variables: CurrentRow, CurrentOriginalIndex, CurrentIndex, ColumnTitle. For Example: '{{ currentRow.id > 3 ? \"green\" : \"red\" }}'", - "rowHeight": "Conditional row height", - "rowHeightDesc": "Conditionally Set the Row Height Based on the Optional Variables: CurrentRow, CurrentOriginalIndex, CurrentIndex, ColumnTitle. For Example: '{{ currentRow.id > 3 ? \"60px\" : \"40px\" }}'", - "cellColor": "Conditional cell color", - "cellColorDesc": "Conditionally Set the Cell Color Based on the Cell Value Using CurrentCell. For Example: '{{ currentCell == 3 ? \"green\" : \"red\" }}'", - "saveChangesNotBind": "No Event Handler Configured for Saving Changes. Please Bind at Least One Event Handler Before Click.", - "dynamicColumn": "Use Dynamic Column Setting", - "dynamicColumnConfig": "Column Setting", - "dynamicColumnConfigDesc": "Dynamic Column Settings. Accepts an Array of Column Names. All Columns Are Visible by Default. Example: [\"id\", \"name\"]", - "position": "Position", - "showDataLoadSpinner": "Show Spinner During Data Loading", - "showValue": "Show Value", - "expandable": "Expandable", - "configExpandedView": "Configure Expanded View", - "toUpdateRowsDesc": "An Array of Objects for Rows to Be Updated in Editable Tables.", - "empty": "Empty", - "falseValues": "Text When False", - "iconTrue": "Icon When True", - "iconFalse": "Icon When False", - "iconNull": "Icon When Null", - "allColumn": "All", - "visibleColumn": "Visible", - "emptyColumns": "No Columns Are Currently Visible" + table: { + editable: 'Editable', + columnNum: 'Columns', + viewModeResizable: 'Column Width Adjusted by User', + viewModeResizableTooltip: 'Whether Users Can Adjust Column Width.', + visibleResizables: 'Show Resize Handles', + visibleResizablesTooltip: + 'Display visible Resize Handles in the Table Header.', + showFilter: 'Show Filter Button', + showRefresh: 'Show Refresh Button', + showDownload: 'Show Download Button', + columnSetting: 'Show Column Setting Button', + searchText: 'Search Text', + searchTextTooltip: 'Search and Filter the Data Presented in the Table', + showQuickJumper: 'Show Quick Jumper', + hideOnSinglePage: 'Hide on Single Page', + showSizeChanger: 'Show Size Changer Button', + pageSizeOptions: 'Page Size Options', + pageSize: 'Page Size', + total: 'Total Row Count', + totalTooltip: + "The Default Value is the Number of Current Data Items, Which Can Be Obtained from the Query, for Example: '{{query1.data[0].count}}'", + filter: 'Filter', + filterRule: 'Filter Rule', + chooseColumnName: 'Choose Column', + chooseCondition: 'Choose Condition', + clear: 'Clear', + columnShows: 'Column Shows', + selectAll: 'Select All', + and: 'And', + or: 'Or', + contains: 'Contains', + notContain: 'Does Not Contain', + equals: 'Equals', + isNotEqual: 'Is Not Equal', + isEmpty: 'Is Empty', + isNotEmpty: 'Is Not Empty', + greater: 'Greater Than', + greaterThanOrEquals: 'Greater Than or Equals', + lessThan: 'Less Than', + lessThanOrEquals: 'Less Than or Equals', + action: 'Action', + columnValue: 'Column Value', + columnValueTooltip: + "'{{currentCell}}': Current Cell Data\n '{{currentRow}}': Current Row Data\n '{{currentIndex}}': Current Data Index (Starting from 0)\n Example: '{{currentCell * 5}}' Show 5 Times the Original Value Data.", + imageSrc: 'Image Source', + imageSize: 'Image Size', + columnTitle: 'Title', + showTitle: 'Show Title', + showTitleTooltip: 'Show/Hide column title in table header', + sortable: 'Sortable', + align: 'Alignment', + fixedColumn: 'Fixed Column', + autoWidth: 'Auto Width', + customColumn: 'Custom Column', + auto: 'Auto', + fixed: 'Fixed', + columnType: 'Column Type', + dataMapping: 'Data Mapping', + numberStep: 'Step', + numberStepTooltip: + 'The number to which the current value is increased or decreased. It can be an integer or decimal', + precision: 'Precision', + float: 'Float', + prefix: 'Prefix', + suffix: 'Suffix', + avatars: 'Avatars', + avatarGroupAlignment: 'Avatars Alignment', + text: 'Text', + number: 'Number', + link: 'Link', + links: 'Links', + tag: 'Tag', + select: 'Select', + date: 'Date', + dateTime: 'Date Time', + badgeStatus: 'Status', + button: 'Button', + image: 'Image', + boolean: 'Boolean', + switch: 'Switch', + rating: 'Rating', + progress: 'Progress', + option: 'Operation', + optionList: 'Operation List', + option1: 'Operation 1', + status: 'Status', + statusTooltip: + 'Optional Values: Success, Error, Default, Warning, Processing', + primaryButton: 'Primary', + defaultButton: 'Default', + type: 'Type', + tableSize: 'Table Size', + hideHeader: 'Hide Table Header', + fixedHeader: 'Fixed Table Header', + fixedHeaderTooltip: 'Header Will Be Fixed for Vertically Scrollable Table', + fixedToolbar: 'Fixed Toolbar', + fixedToolbarTooltip: + 'Toolbar Will Be Fixed for Vertically Scrollable Table Based on Position', + hideBordered: 'Show Resize Handles', + showHeaderGridBorder: 'Show Header Grid Border', + showRowGridBorder: 'Show Row Grid Border', + showVerticalRowGridBorder: 'Show vertical Row Grid Border', + showHorizontalRowGridBorder: 'Show horizontal Row Grid Border', + deleteColumn: 'Delete Column', + confirmDeleteColumn: 'Confirm Delete Column: ', + small: 'S', + middle: 'M', + large: 'L', + refreshButtonTooltip: + 'The Current Data Changes, Click to Regenerate the Column.', + changeSetDesc: + 'An Object Representing Changes to an Editable Table, Only Contains the Changed Cell. Rows Go First and Columns Go Second.', + selectedRowDesc: + 'Provides Data for the Currently Selected Row, Indicating the Row That Triggers a Click Event If the User Clicks a Button/Link on the Row', + selectedRowsDesc: 'Useful in Multiple Selection Mode, Same as SelectedRow', + pageNoDesc: 'Current Display Page, Starting from 1', + pageSizeDesc: 'How Many Rows per Page', + sortColumnDesc: 'The Name of the Currently Selected Sorted Column', + sortDesc: 'Whether the Current Row Is in Descending Order', + pageOffsetDesc: + "The Current Start of Paging, Used for Paging to Get Data. Example: Select * from Users Limit '{{table1.pageSize}}' Offset '{{table1.pageOffset}}'", + displayDataDesc: 'Data Displayed in the Current Table', + selectedIndexDesc: 'Selected Index in Display Data', + filterDesc: 'Table Filtering Parameters', + dataDesc: 'The JSON Data for the Table', + saveChanges: 'Save Changes', + cancelChanges: 'Cancel Changes', + rowSelectChange: 'Row Select Change', + rowClick: 'Row Click', + rowExpand: 'Row Expand', + rowShrink: 'Row Shrink', + search: 'Search', + download: 'Download', + columnEdited: 'Column Edited', + filterChange: 'Filter Change', + sortChange: 'Sort Change', + pageChange: 'Page Change', + refresh: 'Refresh', + rowColor: 'Conditional row color', + rowColorDesc: + 'Conditionally Set the Row Color Based on the Optional Variables: CurrentRow, CurrentOriginalIndex, CurrentIndex, ColumnTitle. For Example: \'{{ currentRow.id > 3 ? "green" : "red" }}\'', + rowHeight: 'Conditional row height', + rowHeightDesc: + 'Conditionally Set the Row Height Based on the Optional Variables: CurrentRow, CurrentOriginalIndex, CurrentIndex, ColumnTitle. For Example: \'{{ currentRow.id > 3 ? "60px" : "40px" }}\'', + cellColor: 'Conditional cell color', + cellColorDesc: + 'Conditionally Set the Cell Color Based on the Cell Value Using CurrentCell. For Example: \'{{ currentCell == 3 ? "green" : "red" }}\'', + saveChangesNotBind: + 'No Event Handler Configured for Saving Changes. Please Bind at Least One Event Handler Before Click.', + dynamicColumn: 'Use Dynamic Column Setting', + dynamicColumnConfig: 'Column Setting', + dynamicColumnConfigDesc: + 'Dynamic Column Settings. Accepts an Array of Column Names. All Columns Are Visible by Default. Example: ["id", "name"]', + position: 'Position', + showDataLoadSpinner: 'Show Spinner During Data Loading', + showValue: 'Show Value', + expandable: 'Expandable', + configExpandedView: 'Configure Expanded View', + toUpdateRowsDesc: + 'An Array of Objects for Rows to Be Updated in Editable Tables.', + empty: 'Empty', + falseValues: 'Text When False', + iconTrue: 'Icon When True', + iconFalse: 'Icon When False', + iconNull: 'Icon When Null', + allColumn: 'All', + visibleColumn: 'Visible', + emptyColumns: 'No Columns Are Currently Visible', }, - // eleventh part - - "image": { - "src": "Image Source", - "srcDesc": "The Image Source. Can be an URL, Path or Base64 String. for Example: data:image/png;base64, AAA... CCC", - "supportPreview": "Support Click Preview (zoom)", - "supportPreviewTip": "Effective When the Image Source is Valid" - }, - "progress": { - "value": "Value", - "valueTooltip": "The Percentage Complete as a Value Between 0 and 100", - "showInfo": "Show Value", - "valueDesc": "Current Progress Value, Ranging from 0 to 100", - "showInfoDesc": "Whether to Display the Current Progress Value" - }, - "fileViewer": { - "invalidURL": "Please Enter a Valid URL or Base64 String", - "src": "File URI", - "srcTooltip": "Preview Provided Link Content by Embedding HTML, Base64 Encoded Data Can Also Be Supported, for Example: data:application/pdf; base64,AAA... CCC", - "srcDesc": "The File URI" - }, - "divider": { - "title": "Title", - "align": "Alignment", - "dashed": "Dashed", - "dashedDesc": "Whether to Use Dashed Line", - "titleDesc": "Divider Title", - "alignDesc": "Divider Title Alignment" - }, - "QRCode": { - "value": "QR Code Content Value", - "valueTooltip": "The Value Contains a Maximum of 2953 Characters. The QR Code Value can encode various data types, including text messages, URLs, contact details (VCard/meCard), Wi-Fi login credentials, email addresses, phone numbers, SMS messages, geolocation coordinates, calendar event details, payment information, cryptocurrency addresses, and app download links", - "valueDesc": "The QR Code Content Value", - "level": "Fault Tolerance Level", - "levelTooltip": "Refers to the QR Code's Ability to Be Scanned Even if Part of It is Blocked. The Higher the Level, the More Complex the Code.", - "includeMargin": "Show Margin", - "image": "Display Image at the Center", - "L": "L (Low)", - "M": "M (Medium)", - "Q": "Q (Quartile)", - "H": "H (High)", - "maxLength": "The Content is Too Long. Set the Length to Less Than 2953 Characters" - }, - "jsonExplorer": { - "indent": "Indent of Each Level", - "expandToggle": "Expand JSON Tree", - "theme": "Color Theme", - "valueDesc": "Current JSON Data", - "default": "Default", - "defaultDark": "Default Dark", - "neutralLight": "Neutral Light", - "neutralDark": "Neutral Dark", - "azure": "Azure", - "darkBlue": "Dark Blue" - }, - "audio": { - "src": "Audio Source URI or Base64 String", - "defaultSrcUrl": "https://cdn.pixabay.com/audio/2023/07/06/audio_e12e5bea9d.mp3", - "autoPlay": "Autoplay", - "loop": "Loop", - "srcDesc": "Current Audio URI or Base64 String like data:audio/mpeg;base64,AAA... CCC", - "play": "Play", - "playDesc": "Triggered When Audio is Played", - "pause": "Pause", - "pauseDesc": "Triggered When Audio is Paused", - "ended": "Ended", - "endedDesc": "Triggered When the Audio Ends Playing" - }, - "video": { - "src": "Video Source URI or Base64 String", - "defaultSrcUrl": "https://www.youtube.com/watch?v=pRpeEdMmmQ0", - "poster": "Poster URL", - "defaultPosterUrl": "", - "autoPlay": "Autoplay", - "loop": "Loop", - "controls": "Hide Controls", - "volume": "Volume", - "playbackRate": "Playback Rate", - "posterTooltip": "The Default Value is the First Frame of the Video", - "autoPlayTooltip": "After the Video is Loaded, It Will Play Automatically. Changing This Value from True to False Will Pause the Video. (If a Poster is Set, It Will Be Played by the Poster Button)", - "controlsTooltip": "Hide Video Playback Controls. May Not Be Fully Supported by Every Video Source.", - "volumeTooltip": "Set the Volume of the Player, Between 0 and 1", - "playbackRateTooltip": "Set the Rate of the Player, Between 1 and 2", - "srcDesc": "Current Audio URI or Base64 String like data:video/mp4;base64, AAA... CCC", - "play": "Play", - "playDesc": "Triggered When Video is Played", - "pause": "Pause", - "pauseDesc": "Triggered When Video is Paused", - "load": "Load", - "loadDesc": "Triggered When the Video Resource has Finished Loading", - "ended": "Ended", - "endedDesc": "Triggered When the Video Ends Playing", - "currentTimeStamp": "The Current Playback Position of the Video in Seconds", - "duration": "The Total Duration of the Video in Seconds" - }, - "media": { - "playDesc": "Begins Playback of the Media.", - "pauseDesc": "Pauses the Media Playback.", - "loadDesc": "Resets the Media to the Beginning and Restart Selecting the Media Resource.", - "seekTo": "Seek to the Given Number of Seconds, or Fraction if Amount is Between 0 and 1", - "seekToAmount": "Number of Seconds, or Fraction if It is Between 0 and 1", - "showPreview": "Show Preview" - }, - "rangeSlider": { - "start": "Start Value", - "end": "End Value", - "step": "Step Size", - "stepTooltip": "The Slider's Granularity, the Value Must Be Greater Than 0 and Divisible by (Max-Min)" - }, - "iconControl": { - "selectIcon": "Select an Icon", - "insertIcon": "Insert an Icon", - "insertImage": "Insert an Image or " - }, - - "shapeControl": { - "selectShape": "Select an Shape", - "insertShape": "Insert an Shape", - "insertImage": "Insert an Image or ", + image: { + src: 'Image Source', + srcDesc: + 'The Image Source. Can be an URL, Path or Base64 String. for Example: data:image/png;base64, AAA... CCC', + supportPreview: 'Support Click Preview (zoom)', + supportPreviewTip: 'Effective When the Image Source is Valid', + }, + progress: { + value: 'Value', + valueTooltip: 'The Percentage Complete as a Value Between 0 and 100', + showInfo: 'Show Value', + valueDesc: 'Current Progress Value, Ranging from 0 to 100', + showInfoDesc: 'Whether to Display the Current Progress Value', + }, + fileViewer: { + invalidURL: 'Please Enter a Valid URL or Base64 String', + src: 'File URI', + srcTooltip: + 'Preview Provided Link Content by Embedding HTML, Base64 Encoded Data Can Also Be Supported, for Example: data:application/pdf; base64,AAA... CCC', + srcDesc: 'The File URI', + }, + divider: { + title: 'Title', + align: 'Alignment', + dashed: 'Dashed', + dashedDesc: 'Whether to Use Dashed Line', + titleDesc: 'Divider Title', + alignDesc: 'Divider Title Alignment', + }, + QRCode: { + value: 'QR Code Content Value', + valueTooltip: + 'The Value Contains a Maximum of 2953 Characters. The QR Code Value can encode various data types, including text messages, URLs, contact details (VCard/meCard), Wi-Fi login credentials, email addresses, phone numbers, SMS messages, geolocation coordinates, calendar event details, payment information, cryptocurrency addresses, and app download links', + valueDesc: 'The QR Code Content Value', + level: 'Fault Tolerance Level', + levelTooltip: + "Refers to the QR Code's Ability to Be Scanned Even if Part of It is Blocked. The Higher the Level, the More Complex the Code.", + includeMargin: 'Show Margin', + image: 'Display Image at the Center', + L: 'L (Low)', + M: 'M (Medium)', + Q: 'Q (Quartile)', + H: 'H (High)', + maxLength: + 'The Content is Too Long. Set the Length to Less Than 2953 Characters', + }, + jsonExplorer: { + indent: 'Indent of Each Level', + expandToggle: 'Expand JSON Tree', + theme: 'Color Theme', + valueDesc: 'Current JSON Data', + default: 'Default', + defaultDark: 'Default Dark', + neutralLight: 'Neutral Light', + neutralDark: 'Neutral Dark', + azure: 'Azure', + darkBlue: 'Dark Blue', + }, + audio: { + src: 'Audio Source URI or Base64 String', + defaultSrcUrl: + 'https://cdn.pixabay.com/audio/2023/07/06/audio_e12e5bea9d.mp3', + autoPlay: 'Autoplay', + loop: 'Loop', + srcDesc: + 'Current Audio URI or Base64 String like data:audio/mpeg;base64,AAA... CCC', + play: 'Play', + playDesc: 'Triggered When Audio is Played', + pause: 'Pause', + pauseDesc: 'Triggered When Audio is Paused', + ended: 'Ended', + endedDesc: 'Triggered When the Audio Ends Playing', + }, + video: { + src: 'Video Source URI or Base64 String', + defaultSrcUrl: 'https://www.youtube.com/watch?v=pRpeEdMmmQ0', + poster: 'Poster URL', + defaultPosterUrl: '', + autoPlay: 'Autoplay', + loop: 'Loop', + controls: 'Hide Controls', + volume: 'Volume', + playbackRate: 'Playback Rate', + posterTooltip: 'The Default Value is the First Frame of the Video', + autoPlayTooltip: + 'After the Video is Loaded, It Will Play Automatically. Changing This Value from True to False Will Pause the Video. (If a Poster is Set, It Will Be Played by the Poster Button)', + controlsTooltip: + 'Hide Video Playback Controls. May Not Be Fully Supported by Every Video Source.', + volumeTooltip: 'Set the Volume of the Player, Between 0 and 1', + playbackRateTooltip: 'Set the Rate of the Player, Between 1 and 2', + srcDesc: + 'Current Audio URI or Base64 String like data:video/mp4;base64, AAA... CCC', + play: 'Play', + playDesc: 'Triggered When Video is Played', + pause: 'Pause', + pauseDesc: 'Triggered When Video is Paused', + load: 'Load', + loadDesc: 'Triggered When the Video Resource has Finished Loading', + ended: 'Ended', + endedDesc: 'Triggered When the Video Ends Playing', + currentTimeStamp: 'The Current Playback Position of the Video in Seconds', + duration: 'The Total Duration of the Video in Seconds', + }, + media: { + playDesc: 'Begins Playback of the Media.', + pauseDesc: 'Pauses the Media Playback.', + loadDesc: + 'Resets the Media to the Beginning and Restart Selecting the Media Resource.', + seekTo: + 'Seek to the Given Number of Seconds, or Fraction if Amount is Between 0 and 1', + seekToAmount: 'Number of Seconds, or Fraction if It is Between 0 and 1', + showPreview: 'Show Preview', + }, + rangeSlider: { + start: 'Start Value', + end: 'End Value', + step: 'Step Size', + stepTooltip: + "The Slider's Granularity, the Value Must Be Greater Than 0 and Divisible by (Max-Min)", + }, + iconControl: { + selectIcon: 'Select an Icon', + insertIcon: 'Insert an Icon', + insertImage: 'Insert an Image or ', + }, + + shapeControl: { + selectShape: 'Select an Shape', + insertShape: 'Insert an Shape', + insertImage: 'Insert an Image or ', }, // twelfth part - - "millisecondsControl": { - "timeoutTypeError": "Please Enter the Correct Timeout Period in ms, the Current Input is: {value}", - "timeoutLessThanMinError": "Input Must Be Greater Than {left}, the Current Input is: {value}" - }, - "selectionControl": { - "single": "Single", - "multiple": "Multiple", - "close": "Close", - "mode": "Select Mode" - }, - "container": { - "title": "Displayed Container Title", - "titleTooltip": "The Title of the Container", - "flowWidth": "Content Width", - "floatType": "Text Float Type", - }, - "drawer": { - "closePosition": "Close Button Placement", - "placement": "Drawer Placement", - "size": "Size", - "top": "Top", - "right": "Right", - "bottom": "Bottom", - "left": "Left", - "widthTooltip": "Pixel or Percentage, e.g. 520, 60%", - "heightTooltip": "Pixel, e.g. 378", - "openDrawerDesc": "Open Drawer", - "closeDrawerDesc": "Close Drawer", - "width": "Drawer Width", - "height": "Drawer Height" - }, - "meeting": { - "logLevel": "Agora SDK Log Level", - "placement": "Meeting Drawer Placement", - "meeting": "Meeting Settings", - "cameraView": "Camera View", - "cameraViewDesc": "Camera View of the Local User (Host)", - "screenShared": "Screen Shared", - "screenSharedDesc": "Screen Shared by the Local User (Host)", - "audioUnmuted": "Audio Unmuted", - "audioMuted": "Audio Muted", - "videoClicked": "Video Clicked", - "videoOff": "Video Off", - "videoOn": "Video On", - "size": "Size", - "top": "Top", - "host": "Host of the Meeting Room. You would need to manage the host as own Application Logic", - "participants": "Participants of the Meeting Room", - "shareScreen": "Display Screen Shared by the Local User", - "appid": "Agora Application ID", - "meetingName": "Meeting Name", - "localUserID": "Host User ID", - "userName": "Host User Name", - "rtmToken": "Agora RTM Token", - "rtcToken": "Agora RTC Token", - "noVideo": "No Video", - "profileImageUrl": "Profile Image URL", - "right": "Right", - "bottom": "Bottom", - "videoId": "Video Stream ID", - "audioStatus": "Audio Status", - "left": "Left", - "widthTooltip": "Pixel or Percentage, e.g. 520, 60%", - "heightTooltip": "Pixel, e.g. 378", - "openDrawerDesc": "Open Drawer", - "closeDrawerDesc": "Close Drawer", - "width": "Drawer Width", - "height": "Drawer Height", - "actionBtnDesc": "Action Button", - "broadCast": "Broadcast Messages", - "title": "Meeting Title", - "meetingCompName": "Agora Meeting Controller", - "sharingCompName": "Screen Share Stream", - "videoCompName": "Camera Stream", - "videoSharingCompName": "Screen Share Stream", - "meetingControlCompName": "Icon Button", - "meetingCompDesc": "Meeting Component", - "meetingCompControls": "Meeting Control", - "meetingCompKeywords": "Agora Meeting, Web Meeting, Collaboration", - "iconSize": "Icon Size", - "userId": "Host User ID", - "roomId": "Room ID", - "meetingActive": "Ongoing Meeting", - "messages": "Broadcasted Messages" - }, - "settings": { - "title": "Settings", - "userGroups": "User Groups", - "organization": "Workspaces", - "audit": "Audit Logs", - "theme": "Themes", - "plugin": "Plugins", - "advanced": "Advanced", - "lab": "Lab", - "branding": "Branding", - "oauthProviders": "User Authentication", - "appUsage": "App Usage Logs", - "environments": "Environments", - "premium": "Premium", - "AppUsage": "Global App Usage", + millisecondsControl: { + timeoutTypeError: + 'Please Enter the Correct Timeout Period in ms, the Current Input is: {value}', + timeoutLessThanMinError: + 'Input Must Be Greater Than {left}, the Current Input is: {value}', + }, + selectionControl: { + single: 'Single', + multiple: 'Multiple', + close: 'Close', + mode: 'Select Mode', + }, + container: { + title: 'Displayed Container Title', + titleTooltip: 'The Title of the Container', + flowWidth: 'Content Width', + floatType: 'Text Float Type', + }, + drawer: { + closePosition: 'Close Button Placement', + placement: 'Drawer Placement', + size: 'Size', + top: 'Top', + right: 'Right', + bottom: 'Bottom', + left: 'Left', + widthTooltip: 'Pixel or Percentage, e.g. 520, 60%', + heightTooltip: 'Pixel, e.g. 378', + openDrawerDesc: 'Open Drawer', + closeDrawerDesc: 'Close Drawer', + width: 'Drawer Width', + height: 'Drawer Height', + }, + meeting: { + logLevel: 'Agora SDK Log Level', + placement: 'Meeting Drawer Placement', + meeting: 'Meeting Settings', + cameraView: 'Camera View', + cameraViewDesc: 'Camera View of the Local User (Host)', + screenShared: 'Screen Shared', + screenSharedDesc: 'Screen Shared by the Local User (Host)', + audioUnmuted: 'Audio Unmuted', + audioMuted: 'Audio Muted', + videoClicked: 'Video Clicked', + videoOff: 'Video Off', + videoOn: 'Video On', + size: 'Size', + top: 'Top', + host: 'Host of the Meeting Room. You would need to manage the host as own Application Logic', + participants: 'Participants of the Meeting Room', + shareScreen: 'Display Screen Shared by the Local User', + appid: 'Agora Application ID', + meetingName: 'Meeting Name', + localUserID: 'Host User ID', + userName: 'Host User Name', + rtmToken: 'Agora RTM Token', + rtcToken: 'Agora RTC Token', + noVideo: 'No Video', + profileImageUrl: 'Profile Image URL', + right: 'Right', + bottom: 'Bottom', + videoId: 'Video Stream ID', + audioStatus: 'Audio Status', + left: 'Left', + widthTooltip: 'Pixel or Percentage, e.g. 520, 60%', + heightTooltip: 'Pixel, e.g. 378', + openDrawerDesc: 'Open Drawer', + closeDrawerDesc: 'Close Drawer', + width: 'Drawer Width', + height: 'Drawer Height', + actionBtnDesc: 'Action Button', + broadCast: 'Broadcast Messages', + title: 'Meeting Title', + meetingCompName: 'Agora Meeting Controller', + sharingCompName: 'Screen Share Stream', + videoCompName: 'Camera Stream', + videoSharingCompName: 'Screen Share Stream', + meetingControlCompName: 'Icon Button', + meetingCompDesc: 'Meeting Component', + meetingCompControls: 'Meeting Control', + meetingCompKeywords: 'Agora Meeting, Web Meeting, Collaboration', + iconSize: 'Icon Size', + userId: 'Host User ID', + roomId: 'Room ID', + meetingActive: 'Ongoing Meeting', + messages: 'Broadcasted Messages', + }, + settings: { + title: 'Settings', + userGroups: 'User Groups', + organization: 'Workspaces', + audit: 'Audit Logs', + theme: 'Themes', + plugin: 'Plugins', + advanced: 'Advanced', + lab: 'Lab', + branding: 'Branding', + oauthProviders: 'User Authentication', + appUsage: 'App Usage Logs', + environments: 'Environments', + premium: 'Premium', + AppUsage: 'Global App Usage', }, - // thirteenth part - - "memberSettings": { - "admin": "Admin", - "adminGroupRoleInfo": "Admin Can Manage Group Members and Resources", - "adminOrgRoleInfo": "Admins Own All Resources and Can Manage Groups.", - "member": "Member", - "memberGroupRoleInfo": "Member Can View Group Members", - "memberOrgRoleInfo": "Members Can Only Use or Visit Resources They Have Access To.", - "title": "Members", - "createGroup": "Create Group", - "newGroupPrefix": "New Group ", - "allMembers": "All Members", - "deleteModalTitle": "Delete This Group", - "deleteModalContent": "The Deleted Group Cannot Be Restored. Are You Sure to Delete the Group?", - "addMember": "Add Members", - "nameColumn": "User Name", - "joinTimeColumn": "Joining Time", - "actionColumn": "Operation", - "roleColumn": "Role", - "exitGroup": "Exit Group", - "moveOutGroup": "Remove from Group", - "inviteUser": "Invite Members", - "exitOrg": "Leave", - "exitOrgDesc": "Are You Sure You Want to Leave This Workspace.", - "moveOutOrg": "Remove", - "moveOutOrgDescSaasMode": "Are You Sure You Want to Remove User {name} from This Workspace?", - "moveOutOrgDesc": "Are You Sure You Want to Remove User {name}? This Action Cannot Be Recovered.", - "devGroupTip": "Members of the Developer Group Have Privileges to Create Apps and Data Sources.", - "lastAdminQuit": "The Last Administrator Cannot Exit.", - "organizationNotExist": "The Current Workspace Does Not Exist", - "inviteUserHelp": "You Can Copy the Invitation Link to Send to the User", - "inviteUserLabel": "Invitation Link:", - "inviteCopyLink": "Copy Link", - "inviteText": "{userName} Invites You to Join the Workspace \"{organization}\", Click on the Link to Join: {inviteLink}", - "groupName": "Group Name", - "createTime": "Create Time", - "manageBtn": "Manage", - "userDetail": "Detail", - "syncDeleteTip": "This Group Has Been Deleted from the Address Book Source", - "syncGroupTip": "This Group is an Address Book Synchronization Group and Cannot Be Edited" - }, - "orgSettings": { - "newOrg": "New Workspace (Organization)", - "title": "Workspace", - "createOrg": "Create Workspace (Organization)", - "deleteModalTitle": "Are You Sure to Delete This Workspace?", - "deleteModalContent": "You Are About to Delete This Workspace {permanentlyDelete}. Once Deleted, the Workspace {notRestored}.", - "permanentlyDelete": "Permanently", - "notRestored": "Cannot Be Restored", - "deleteModalLabel": "Please Enter Workspace Name {name} to Confirm the Operation:", - "deleteModalTip": "Please Enter Workspace Name", - "deleteModalErr": "Workspace Name is Incorrect", - "deleteModalBtn": "Delete", - "editOrgTitle": "Edit Workspace Information", - "orgNameLabel": "Workspace Name:", - "orgNameCheckMsg": "Workspace Name Cannot Be Empty", - "orgLogo": "Workspace Logo:", - "logoModify": "Modify Picture", - "inviteSuccessMessage": "Join the Workspace Successfully", - "inviteFailMessage": "Failed to Join Workspace", - "uploadErrorMessage": "Upload Error", - "orgName": "Workspace Name" - }, - "freeLimit": "Free Trial", - - "tabbedContainer": { - "switchTab": "Switch Tab", - "switchTabDesc": "Triggered When Switching Tabs", - "tab": "Tabs", - "atLeastOneTabError": "The Tab Container Keeps at Least One Tab", - "selectedTabKeyDesc": "Currently Selected Tab", - "iconPosition": "Icon Position", - "placement" : "Tabs Placement", - "showTabs": "Show Tabs", - "gutter" : "Gap", - "gutterTooltip" : "The distance between tabs in px", - "tabsCentered" : "Centered Tabs", - }, - "formComp": { - "containerPlaceholder": "Drag Components from the Right Pane or", - "openDialogButton": "Generate a Form from one of your Data Sources", - "resetAfterSubmit": "Reset After Successful Submit", - "initialData": "Initial Data", - "disableSubmit": "Disable Submit", - "success": "Form Generated Successfully", - "selectCompType": "Select Component Type", - "dataSource": "Data Source: ", - "selectSource": "Select Source", - "table": "Table: ", - "selectTable": "Select Table", - "columnName": "Column Name", - "dataType": "Data Type", - "compType": "Component Type", - "required": "Required", - "generateForm": "Generate Form", - "compSelectionError": "Unconfigured Column Type", - "compTypeNameError": "Could Not Get the Component Type Name", - "noDataSourceSelected": "No Data Source Selected", - "noTableSelected": "No Table Selected", - "noColumn": "No Column", - "noColumnSelected": "No Column Selected", - "noDataSourceFound": "No Supported Data Source Found. Create a New Data Source", - "noTableFound": "No Tables Were Found in This Data Source, Please Select Another Data Source", - "noColumnFound": "No Supported Column Was Found in This Table. Please Select Another Table", - "formTitle": "Form Title", - "name": "Name", - "nameTooltip": "The Attribute Name in the Data of the Form, When Left Blank, Defaults to the Component Name", - "notSupportMethod": "Not Supported Methods: ", - "notValidForm": "The Form is Not Valid", - "resetDesc": "Reset Form Data to Default Value", - "clearDesc": "Clear Form Data", - "setDataDesc": "Set Form Data", - "valuesLengthError": "Parameter Number Error", - "valueTypeError": "Parameter Type Error", - "dataDesc": "Current Form Data", - "loadingDesc": "Whether the Form is Loading?" + memberSettings: { + admin: 'Admin', + adminGroupRoleInfo: 'Admin Can Manage Group Members and Resources', + adminOrgRoleInfo: 'Admins Own All Resources and Can Manage Groups.', + member: 'Member', + memberGroupRoleInfo: 'Member Can View Group Members', + memberOrgRoleInfo: + 'Members Can Only Use or Visit Resources They Have Access To.', + title: 'Members', + createGroup: 'Create Group', + newGroupPrefix: 'New Group ', + allMembers: 'All Members', + deleteModalTitle: 'Delete This Group', + deleteModalContent: + 'The Deleted Group Cannot Be Restored. Are You Sure to Delete the Group?', + addMember: 'Add Members', + nameColumn: 'User Name', + joinTimeColumn: 'Joining Time', + actionColumn: 'Operation', + roleColumn: 'Role', + exitGroup: 'Exit Group', + moveOutGroup: 'Remove from Group', + inviteUser: 'Invite Members', + exitOrg: 'Leave', + exitOrgDesc: 'Are You Sure You Want to Leave This Workspace.', + moveOutOrg: 'Remove', + moveOutOrgDescSaasMode: + 'Are You Sure You Want to Remove User {name} from This Workspace?', + moveOutOrgDesc: + 'Are You Sure You Want to Remove User {name}? This Action Cannot Be Recovered.', + devGroupTip: + 'Members of the Developer Group Have Privileges to Create Apps and Data Sources.', + lastAdminQuit: 'The Last Administrator Cannot Exit.', + organizationNotExist: 'The Current Workspace Does Not Exist', + inviteUserHelp: 'You Can Copy the Invitation Link to Send to the User', + inviteUserLabel: 'Invitation Link:', + inviteCopyLink: 'Copy Link', + inviteText: + '{userName} Invites You to Join the Workspace "{organization}", Click on the Link to Join: {inviteLink}', + groupName: 'Group Name', + createTime: 'Create Time', + manageBtn: 'Manage', + userDetail: 'Detail', + syncDeleteTip: 'This Group Has Been Deleted from the Address Book Source', + syncGroupTip: + 'This Group is an Address Book Synchronization Group and Cannot Be Edited', + }, + orgSettings: { + newOrg: 'New Workspace (Organization)', + title: 'Workspace', + createOrg: 'Create Workspace (Organization)', + deleteModalTitle: 'Are You Sure to Delete This Workspace?', + deleteModalContent: + 'You Are About to Delete This Workspace {permanentlyDelete}. Once Deleted, the Workspace {notRestored}.', + permanentlyDelete: 'Permanently', + notRestored: 'Cannot Be Restored', + deleteModalLabel: + 'Please Enter Workspace Name {name} to Confirm the Operation:', + deleteModalTip: 'Please Enter Workspace Name', + deleteModalErr: 'Workspace Name is Incorrect', + deleteModalBtn: 'Delete', + editOrgTitle: 'Edit Workspace Information', + orgNameLabel: 'Workspace Name:', + orgNameCheckMsg: 'Workspace Name Cannot Be Empty', + orgLogo: 'Workspace Logo:', + logoModify: 'Modify Picture', + inviteSuccessMessage: 'Join the Workspace Successfully', + inviteFailMessage: 'Failed to Join Workspace', + uploadErrorMessage: 'Upload Error', + orgName: 'Workspace Name', + }, + freeLimit: 'Free Trial', + + tabbedContainer: { + switchTab: 'Switch Tab', + switchTabDesc: 'Triggered When Switching Tabs', + tab: 'Tabs', + atLeastOneTabError: 'The Tab Container Keeps at Least One Tab', + selectedTabKeyDesc: 'Currently Selected Tab', + iconPosition: 'Icon Position', + placement: 'Tabs Placement', + showTabs: 'Show Tabs', + gutter: 'Gap', + gutterTooltip: 'The distance between tabs in px', + tabsCentered: 'Centered Tabs', + }, + formComp: { + containerPlaceholder: 'Drag Components from the Right Pane or', + openDialogButton: 'Generate a Form from one of your Data Sources', + resetAfterSubmit: 'Reset After Successful Submit', + initialData: 'Initial Data', + disableSubmit: 'Disable Submit', + success: 'Form Generated Successfully', + selectCompType: 'Select Component Type', + dataSource: 'Data Source: ', + selectSource: 'Select Source', + table: 'Table: ', + selectTable: 'Select Table', + columnName: 'Column Name', + dataType: 'Data Type', + compType: 'Component Type', + required: 'Required', + generateForm: 'Generate Form', + compSelectionError: 'Unconfigured Column Type', + compTypeNameError: 'Could Not Get the Component Type Name', + noDataSourceSelected: 'No Data Source Selected', + noTableSelected: 'No Table Selected', + noColumn: 'No Column', + noColumnSelected: 'No Column Selected', + noDataSourceFound: + 'No Supported Data Source Found. Create a New Data Source', + noTableFound: + 'No Tables Were Found in This Data Source, Please Select Another Data Source', + noColumnFound: + 'No Supported Column Was Found in This Table. Please Select Another Table', + formTitle: 'Form Title', + name: 'Name', + nameTooltip: + 'The Attribute Name in the Data of the Form, When Left Blank, Defaults to the Component Name', + notSupportMethod: 'Not Supported Methods: ', + notValidForm: 'The Form is Not Valid', + resetDesc: 'Reset Form Data to Default Value', + clearDesc: 'Clear Form Data', + setDataDesc: 'Set Form Data', + valuesLengthError: 'Parameter Number Error', + valueTypeError: 'Parameter Type Error', + dataDesc: 'Current Form Data', + loadingDesc: 'Whether the Form is Loading?', }, - // fourteenth part - - "modalComp": { - "close": "Close", - "closeDesc": "Triggered When the Modal Dialog Box is Closed", - "openModalDesc": "Open the Dialog Box", - "closeModalDesc": "Close the Dialog Box", - "visibleDesc": "Is it Visible? If True, the Current Dialog Box Will Pop Up", - "modalHeight": "Modal Height", - "modalHeightTooltip": "Pixel, Example: 222", - "modalWidth": "Modal Width", - "modalWidthTooltip": "Number or Percentage, Example: 520, 60%" - }, - "listView": { - "noOfRows": "Row Count", - "noOfRowsTooltip": "Number of Rows in the List - Usually Set to a Variable (e.g., '{{query1.data.length}}') to Present Query Results", - "noOfColumns": "Column Count", - "itemIndexName": "Data Item Index Name", - "itemIndexNameDesc": "The Variable Name Referring to the Item's Index, Default as {default}", - "itemDataName": "Data Item Object Name", - "itemDataNameDesc": "The Variable Name Referring to the Item's Data Object, Default as {default}", - "itemsDesc": "Exposing Data of Components in List", - "dataDesc": "The JSON Data Used in the Current List", - "dataTooltip": "If You just Set a Number, This Field Will Be Regarded as Row Count, and the Data Will Be Regarded as Empty." - }, - "navigation": { - "addText": "Add Submenu Item", - "logoURL": "Navigation Logo URL", - "horizontalAlignment": "Horizontal Alignment", - "logoURLDesc": "You can display a Logo on the left side by entering URI Value or Base64 String like data:image/png;base64,AAA... CCC", - "itemsDesc": "Hierarchical Navigation Menu Items" - }, - "droppadbleMenuItem": { - "subMenu": "Submenu {number}" - }, - "navItemComp": { - "active": "Active" - }, - "iframe": { - "URLDesc": "The Source URL for the IFrame Content. Make sure the URL is HTTPS or localhost. Also make sure the URL is not blocked by the browser's Content Security Policy (CSP). The header 'X-Frame-Options' should not be set to 'DENY' or 'SAMEORIGIN'.", - "allowDownload": "Allow Downloads", - "allowSubmitForm": "Allow Submit Form", - "allowMicrophone": "Allow Microphone", - "allowCamera": "Allow Camera", - "allowPopup": "Allow Popups" - }, - "switchComp": { - "defaultValue" : "Default Boolean Value", - "open": "On", - "close": "Off", - "openDesc": "Triggered When the Switch is Turned On", - "closeDesc": "Triggered When the Switch is Turned Off", - "valueDesc": "Current Switch Status" - }, - "signature": { - "tips": "Hint Text", - "signHere": "Sign Here", - "showUndo": "Show Undo", - "showClear": "Show Clear" - }, - "localStorageComp": { - "valueDesc": "All Data Items Currently Stored", - "setItemDesc": "Add an Item", - "removeItemDesc": "Remove an Item", - "clearItemDesc": "Clear All Items" - }, - "utilsComp": { - "openUrl": "Open URL", - "openApp": "Open App", - "copyToClipboard": "Copy to Clipboard", - "downloadFile": "Download File" - }, - "messageComp": { - "info": "Send a Notification", - "loading": "Send a Loading Notification", - "success": "Send a Success Notification", - "warn": "Send a Warning Notification", - "error": "Send an Error Notification" - }, - "toastComp": { - "destroy": "close a Notification", - "info": "Send a Notification", - "loading": "Send a Loading Notification", - "success": "Send a Success Notification", - "warn": "Send a Warning Notification", - "error": "Send an Error Notification" - }, - "themeComp": { - "switchTo": "Switch Theme" - }, - "transformer": { - "preview": "Preview", - "docLink": "Read More About Transformers...", - "previewSuccess": "Preview Success", - "previewFail": "Preview Fail", - "deleteMessage": "Delete Transformer Success. You Can Use {undoKey} to Undo.", - "documentationText" : "Transformers are designed for data transformation and reuse of your multi-line JavaScript code. Use Transformers to adapt Data from queries or components to your local App needs. Unlike JavaScript query, transformer is designed to do read-only operations, which means that you cannot trigger a query or update a temporary state inside a transformer." - }, - "temporaryState": { - "value": "Init Value", - "valueTooltip": "The Initial Value Stored in the Temporary State Can Be Any Valid JSON Value.", - "docLink": "Read More About Temporary States...", - "pathTypeError": "Path Must Be Either a String or an Array of Values", - "unStructuredError": "Unstructured Data {prev} Can't Be Updated by {path}", - "valueDesc": "Temporary State Value", - "deleteMessage": "The Temporary State is Deleted Successfully. You Can Use {undoKey} to Undo.", - "documentationText" : "Temporary states are a powerful feature used to manage complex variables that dynamically update the state of components in your application. These states act as intermediary or transient storage for data that can change over time due to user interactions or other processes." - }, - "dataResponder": { - "data": "Data", - "dataDesc": "Data of Current Data Responder", - "dataTooltip": "When This Data is Changed, It Will Trigger Subsequent Actions.", - "docLink": "Read More About the Data Responders...", - "deleteMessage": "The Data Responder is Deleted Successfully. You Can Use {undoKey} to Undo.", - "documentationText" : "When developing an app, you can assign events to components to monitor changes in specific data. For instance, a Table component might have events like \"Row select change\", \"Filter change\", \"Sort change\", and \"Page change\" to track changes in the selectedRow property. However, for changes in temporary states, transformers, or query results, where standard events are not available, Data responders are utilized. They enable you to detect and react to any data modifications." + modalComp: { + close: 'Close', + closeDesc: 'Triggered When the Modal Dialog Box is Closed', + openModalDesc: 'Open the Dialog Box', + closeModalDesc: 'Close the Dialog Box', + visibleDesc: 'Is it Visible? If True, the Current Dialog Box Will Pop Up', + modalHeight: 'Modal Height', + modalHeightTooltip: 'Pixel, Example: 222', + modalWidth: 'Modal Width', + modalWidthTooltip: 'Number or Percentage, Example: 520, 60%', + }, + listView: { + noOfRows: 'Row Count', + noOfRowsTooltip: + "Number of Rows in the List - Usually Set to a Variable (e.g., '{{query1.data.length}}') to Present Query Results", + noOfColumns: 'Column Count', + itemIndexName: 'Data Item Index Name', + itemIndexNameDesc: + "The Variable Name Referring to the Item's Index, Default as {default}", + itemDataName: 'Data Item Object Name', + itemDataNameDesc: + "The Variable Name Referring to the Item's Data Object, Default as {default}", + itemsDesc: 'Exposing Data of Components in List', + dataDesc: 'The JSON Data Used in the Current List', + dataTooltip: + 'If You just Set a Number, This Field Will Be Regarded as Row Count, and the Data Will Be Regarded as Empty.', + }, + navigation: { + addText: 'Add Submenu Item', + logoURL: 'Navigation Logo URL', + horizontalAlignment: 'Horizontal Alignment', + logoURLDesc: + 'You can display a Logo on the left side by entering URI Value or Base64 String like data:image/png;base64,AAA... CCC', + itemsDesc: 'Hierarchical Navigation Menu Items', + }, + droppadbleMenuItem: { + subMenu: 'Submenu {number}', + }, + navItemComp: { + active: 'Active', + }, + iframe: { + URLDesc: + "The Source URL for the IFrame Content. Make sure the URL is HTTPS or localhost. Also make sure the URL is not blocked by the browser's Content Security Policy (CSP). The header 'X-Frame-Options' should not be set to 'DENY' or 'SAMEORIGIN'.", + allowDownload: 'Allow Downloads', + allowSubmitForm: 'Allow Submit Form', + allowMicrophone: 'Allow Microphone', + allowCamera: 'Allow Camera', + allowPopup: 'Allow Popups', + }, + switchComp: { + defaultValue: 'Default Boolean Value', + open: 'On', + close: 'Off', + openDesc: 'Triggered When the Switch is Turned On', + closeDesc: 'Triggered When the Switch is Turned Off', + valueDesc: 'Current Switch Status', + }, + signature: { + tips: 'Hint Text', + signHere: 'Sign Here', + showUndo: 'Show Undo', + showClear: 'Show Clear', + }, + localStorageComp: { + valueDesc: 'All Data Items Currently Stored', + setItemDesc: 'Add an Item', + removeItemDesc: 'Remove an Item', + clearItemDesc: 'Clear All Items', + }, + utilsComp: { + openUrl: 'Open URL', + openApp: 'Open App', + copyToClipboard: 'Copy to Clipboard', + downloadFile: 'Download File', + }, + messageComp: { + info: 'Send a Notification', + loading: 'Send a Loading Notification', + success: 'Send a Success Notification', + warn: 'Send a Warning Notification', + error: 'Send an Error Notification', + }, + toastComp: { + destroy: 'close a Notification', + info: 'Send a Notification', + loading: 'Send a Loading Notification', + success: 'Send a Success Notification', + warn: 'Send a Warning Notification', + error: 'Send an Error Notification', + }, + themeComp: { + switchTo: 'Switch Theme', + }, + transformer: { + preview: 'Preview', + docLink: 'Read More About Transformers...', + previewSuccess: 'Preview Success', + previewFail: 'Preview Fail', + deleteMessage: 'Delete Transformer Success. You Can Use {undoKey} to Undo.', + documentationText: + 'Transformers are designed for data transformation and reuse of your multi-line JavaScript code. Use Transformers to adapt Data from queries or components to your local App needs. Unlike JavaScript query, transformer is designed to do read-only operations, which means that you cannot trigger a query or update a temporary state inside a transformer.', + }, + temporaryState: { + value: 'Init Value', + valueTooltip: + 'The Initial Value Stored in the Temporary State Can Be Any Valid JSON Value.', + docLink: 'Read More About Temporary States...', + pathTypeError: 'Path Must Be Either a String or an Array of Values', + unStructuredError: "Unstructured Data {prev} Can't Be Updated by {path}", + valueDesc: 'Temporary State Value', + deleteMessage: + 'The Temporary State is Deleted Successfully. You Can Use {undoKey} to Undo.', + documentationText: + 'Temporary states are a powerful feature used to manage complex variables that dynamically update the state of components in your application. These states act as intermediary or transient storage for data that can change over time due to user interactions or other processes.', + }, + dataResponder: { + data: 'Data', + dataDesc: 'Data of Current Data Responder', + dataTooltip: + 'When This Data is Changed, It Will Trigger Subsequent Actions.', + docLink: 'Read More About the Data Responders...', + deleteMessage: + 'The Data Responder is Deleted Successfully. You Can Use {undoKey} to Undo.', + documentationText: + 'When developing an app, you can assign events to components to monitor changes in specific data. For instance, a Table component might have events like "Row select change", "Filter change", "Sort change", and "Page change" to track changes in the selectedRow property. However, for changes in temporary states, transformers, or query results, where standard events are not available, Data responders are utilized. They enable you to detect and react to any data modifications.', }, - // fifteenth part - - "theme": { - "title": "Themes", - "createTheme": "Create Theme", - "themeName": "Theme Name:", - "themeNamePlaceholder": "Please Enter a Theme Name", - "defaultThemeTip": "Default Theme:", - "createdThemeTip": "The Theme That You Have Created:", - "option": "Option{index}", - "input": "Input", - "confirm": "Ok", - "emptyTheme": "No Themes Available", - "click": "", - "toCreate": "", - "nameColumn": "Name", - "defaultTip": "Default", - "updateTimeColumn": "Update Time", - "edit": "Edit", - "cancelDefaultTheme": "Unset Default Theme", - "setDefaultTheme": "Set as Default Theme", - "copyTheme": "Duplicate Theme", - "setSuccessMsg": "Setting Succeeded", - "cancelSuccessMsg": "Unsetting Succeeded", - "deleteSuccessMsg": "Deletion Succeeded", - "checkDuplicateNames": "The Theme Name Already Exists, Please Re-Enter It", - "copySuffix": " Copy", - "saveSuccessMsg": "Saved Successfully", - "leaveTipTitle": "Tips", - "leaveTipContent": "You Haven't Saved Yet, Confirm Leaving?", - "leaveTipOkText": "Leave", - "goList": "Back to the List", - "saveBtn": "Save", - "mainColor": "Main Colors", - "text": "Text Colors", - "defaultTheme": "Default", - "yellow": "Yellow", - "green": "Green", - "previewTitle": "Theme Preview\nExample Components That Use Your Theme Colors", - "dateColumn": "Date", - "emailColumn": "Email", - "phoneColumn": "Phone", - "subTitle": "Title", - "linkLabel": "Link", - "linkUrl": "app.lowcoder.cloud", - "progressLabel": "Progress", - "sliderLabel": "Slider", - "radioLabel": "Radio", - "checkboxLabel": "Checkbox", - "buttonLabel": "Form Button", - "switch": "Switch", - "previewDate": "16/10/2022", - "previewEmail1": "ted.com", - "previewEmail2": "skype.com", - "previewEmail3": "imgur.com", - "previewEmail4": "globo.com", - "previewPhone1": "+63-317-333-0093", - "previewPhone2": "+30-668-580-6521", - "previewPhone3": "+86-369-925-2071", - "previewPhone4": "+7-883-227-8093", - "chartPreviewTitle": "Chart Style Preview", - "chartSpending": "Spending", - "chartBudget": "Budget", - "chartAdmin": "Administration", - "chartFinance": "Finance", - "chartSales": "Sales", - "chartFunnel": "Funnel Chart", - "chartShow": "Show", - "chartClick": "Click", - "chartVisit": "Visit", - "chartQuery": "Query", - "chartBuy": "Buy" - }, - "pluginSetting": { - "title": "Plugins", - "npmPluginTitle": "npm Plugins", - "npmPluginDesc": "Set Up npm Plugins for All Applications in the Current Workspace.", - "npmPluginEmpty": "No npm Plugins Were Added.", - "npmPluginAddButton": "Add a npm Plugin", - "saveSuccess": "Saved Successfully" - }, - "advanced": { - "title": "Advanced", - "defaultHomeTitle": "Default Homepage", - "defaultHomeHelp": "The Homepage is the App All Non-Developers Will See by Default When They Log In. Note: Make Sure the Selected App is Accessible to Non-Developers.", - "defaultHomePlaceholder": "Select the Default Homepage", - "saveBtn": "Save", - "preloadJSTitle": "Preload JavaScript", - "preloadJSHelp": "Set Up Preloaded JavaScript Code for All Apps in the Current Workspace.", - "preloadCSSTitle": "Preload CSS", - "preloadCSSHelp": "Set Up Preloaded CSS Code for All Apps in the Current Workspace.", - "preloadCSSApply": "Apply to the Homepage of the Workspace", - "preloadLibsTitle": "JavaScript Library", - "preloadLibsHelp": "Set Up Preloaded JavaScript Libraries for All Applications in the Current Workspace, and the System Has Built-In lodash, day.js, uuid, numbro for Direct Use. JavaScript Libraries are Loaded Before the App is Initialized, So There is a Certain Impact on App Performance.", - "preloadLibsEmpty": "No JavaScript Libraries Were Added", - "preloadLibsAddBtn": "Add a Library", - "saveSuccess": "Saved Successfully", - "AuthOrgTitle": "Workspace Welcome Screen", - "AuthOrgDescrition": "The URL for Your Users to Sign In to the Current Workspace.", - "APIConsumption": "API Consumption", - "APIConsumptionDescription": "Here you can see the API Consumption for All Apps in the Current Workspace.", - "overallAPIConsumption": "Overall API Consumption in this Workspace till now", - "lastMonthAPIConsumption": "Last Month API Consumption, in this Workspace" - + theme: { + title: 'Themes', + createTheme: 'Create Theme', + themeName: 'Theme Name:', + themeNamePlaceholder: 'Please Enter a Theme Name', + defaultThemeTip: 'Default Theme:', + createdThemeTip: 'The Theme That You Have Created:', + option: 'Option{index}', + input: 'Input', + confirm: 'Ok', + emptyTheme: 'No Themes Available', + click: '', + toCreate: '', + nameColumn: 'Name', + defaultTip: 'Default', + updateTimeColumn: 'Update Time', + edit: 'Edit', + cancelDefaultTheme: 'Unset Default Theme', + setDefaultTheme: 'Set as Default Theme', + copyTheme: 'Duplicate Theme', + setSuccessMsg: 'Setting Succeeded', + cancelSuccessMsg: 'Unsetting Succeeded', + deleteSuccessMsg: 'Deletion Succeeded', + checkDuplicateNames: 'The Theme Name Already Exists, Please Re-Enter It', + copySuffix: ' Copy', + saveSuccessMsg: 'Saved Successfully', + leaveTipTitle: 'Tips', + leaveTipContent: "You Haven't Saved Yet, Confirm Leaving?", + leaveTipOkText: 'Leave', + goList: 'Back to the List', + saveBtn: 'Save', + mainColor: 'Main Colors', + text: 'Text Colors', + defaultTheme: 'Default', + yellow: 'Yellow', + green: 'Green', + previewTitle: + 'Theme Preview\nExample Components That Use Your Theme Colors', + dateColumn: 'Date', + emailColumn: 'Email', + phoneColumn: 'Phone', + subTitle: 'Title', + linkLabel: 'Link', + linkUrl: 'app.lowcoder.cloud', + progressLabel: 'Progress', + sliderLabel: 'Slider', + radioLabel: 'Radio', + checkboxLabel: 'Checkbox', + buttonLabel: 'Form Button', + switch: 'Switch', + previewDate: '16/10/2022', + previewEmail1: 'ted.com', + previewEmail2: 'skype.com', + previewEmail3: 'imgur.com', + previewEmail4: 'globo.com', + previewPhone1: '+63-317-333-0093', + previewPhone2: '+30-668-580-6521', + previewPhone3: '+86-369-925-2071', + previewPhone4: '+7-883-227-8093', + chartPreviewTitle: 'Chart Style Preview', + chartSpending: 'Spending', + chartBudget: 'Budget', + chartAdmin: 'Administration', + chartFinance: 'Finance', + chartSales: 'Sales', + chartFunnel: 'Funnel Chart', + chartShow: 'Show', + chartClick: 'Click', + chartVisit: 'Visit', + chartQuery: 'Query', + chartBuy: 'Buy', + }, + pluginSetting: { + title: 'Plugins', + npmPluginTitle: 'npm Plugins', + npmPluginDesc: + 'Set Up npm Plugins for All Applications in the Current Workspace.', + npmPluginEmpty: 'No npm Plugins Were Added.', + npmPluginAddButton: 'Add a npm Plugin', + saveSuccess: 'Saved Successfully', + }, + advanced: { + title: 'Advanced', + defaultHomeTitle: 'Default Homepage', + defaultHomeHelp: + 'The Homepage is the App All Non-Developers Will See by Default When They Log In. Note: Make Sure the Selected App is Accessible to Non-Developers.', + defaultHomePlaceholder: 'Select the Default Homepage', + saveBtn: 'Save', + preloadJSTitle: 'Preload JavaScript', + preloadJSHelp: + 'Set Up Preloaded JavaScript Code for All Apps in the Current Workspace.', + preloadCSSTitle: 'Preload CSS', + preloadCSSHelp: + 'Set Up Preloaded CSS Code for All Apps in the Current Workspace.', + preloadCSSApply: 'Apply to the Homepage of the Workspace', + preloadLibsTitle: 'JavaScript Library', + preloadLibsHelp: + 'Set Up Preloaded JavaScript Libraries for All Applications in the Current Workspace, and the System Has Built-In lodash, day.js, uuid, numbro for Direct Use. JavaScript Libraries are Loaded Before the App is Initialized, So There is a Certain Impact on App Performance.', + preloadLibsEmpty: 'No JavaScript Libraries Were Added', + preloadLibsAddBtn: 'Add a Library', + saveSuccess: 'Saved Successfully', + AuthOrgTitle: 'Workspace Welcome Screen', + AuthOrgDescrition: + 'The URL for Your Users to Sign In to the Current Workspace.', + APIConsumption: 'API Consumption', + APIConsumptionDescription: + 'Here you can see the API Consumption for All Apps in the Current Workspace.', + overallAPIConsumption: 'Overall API Consumption in this Workspace till now', + lastMonthAPIConsumption: 'Last Month API Consumption, in this Workspace', }, - // sixteenth part - - "branding": { - "title": "Branding", - "logoTitle": "Logo", - "logoHelp": ".JPG, .SVG or .PNG Only", - "faviconTitle": "Favicon", - "faviconHelp": ".JPG, .SVG or .PNG Only", - "brandNameTitle": "Brand Name", - "headColorTitle": "Head Color", - "save": "Save", - "saveSuccessMsg": "Saved Successfully", - "upload": "Click to Upload" - }, - "networkMessage": { - "200": "Success", - "201": "Created", - "204": "No Content", - "400": "Bad Request", - "404": "Not Found", - "500": "Busy Service, Please Try Again Later", - "0": "Failed to Connect to Server, Please Check Your Network", - "401": "Authentication Failed, Please Log On Again", - "403": "No Permission, Please Contact the Administrator for Authorization", - "timeout": "Request Timeout" - }, - "share": { - "title": "Share", - "viewer": "Viewer", - "editor": "Editor", - "owner": "Owner", - "datasourceViewer": "Can Use", - "datasourceOwner": "Can Manage" - }, - "debug": { - "title": "Title", - "switch": "Switch Component: " - }, - "module": { - "emptyText": "No Data", - "docLink": "Read More About Modules...", - "documentationText" : "Modules are complete Applications, that can get included and repeated in other Applications and it functions just like a single component. As modules can get embedded, they need to be able to interact with your outside apps or websites. This four settings help to support communication with a Module.", - "circularReference": "Circular Reference, Current Module/Application Cannot Be Used!", - "emptyTestInput": "The Current Module Has No Input to Test", - "emptyTestMethod": "The Current Module Has No Method to Test", - "name": "Name", - "input": "Input", - "params": "Params", - "emptyParams": "No Params Has Been Added", - "emptyInput": "No Input Has Been Added", - "emptyMethod": "No Method Has Been Added", - "emptyOutput": "No Output Has Been Added", - "data": "Data", - "string": "String", - "number": "Number", - "array": "Array", - "boolean": "Boolean", - "query": "Query", - "autoScaleCompHeight": "Component Height Scales with Container", - "excuteMethod": "Execute Method {name}", - "method": "Method", - "action": "Action", - "output": "Output", - "nameExists": "Name {name} Already Exist", - "eventTriggered": "Event {name} is Triggered", - "globalPromptWhenEventTriggered": "Displays a Global Prompt When an Event is Triggered", - "emptyEventTest": "The Current Module Has No Events to Test", - "emptyEvent": "No Event Has Been Added", - "event": "Event" - }, - "resultPanel": { - "returnFunction": "The Return Value is a Function.", - "consume": "{time}", - "JSON": "Show JSON" - }, - "createAppButton": { - "creating": "Creating...", - "created": "Create {name}" - }, - "apiMessage": { - "authenticationFail": "User Authentication Failed, Please Sign In Again", - "verifyAccount": "Need to Verify Account", - "functionNotSupported": "The Current Version Does Not Support This Function. Please Contact the Lowcoder Business Team to Upgrade Your Account" - }, - "globalErrorMessage": { - "createCompFail": "Create Component {comp} Failed", - "notHandledError": "{method} Method Not Executed" - }, - "aggregation": { - "navLayout": "Navigation Bar", - "chooseApp": "Choose App", - "iconTooltip": "Support Image src Link or Base64 String like data:image/png;base64,AAA... CCC", - "hideWhenNoPermission": "Hidden for Unauthorized Users", - "queryParam": "URL Query Params", - "hashParam": "URL Hash Params", - "tabBar": "Tab Bar", - "emptyTabTooltip": "Configure This Page on the Right Pane" + branding: { + title: 'Branding', + logoTitle: 'Logo', + logoHelp: '.JPG, .SVG or .PNG Only', + faviconTitle: 'Favicon', + faviconHelp: '.JPG, .SVG or .PNG Only', + brandNameTitle: 'Brand Name', + headColorTitle: 'Head Color', + save: 'Save', + saveSuccessMsg: 'Saved Successfully', + upload: 'Click to Upload', + }, + networkMessage: { + '200': 'Success', + '201': 'Created', + '204': 'No Content', + '400': 'Bad Request', + '404': 'Not Found', + '500': 'Busy Service, Please Try Again Later', + '0': 'Failed to Connect to Server, Please Check Your Network', + '401': 'Authentication Failed, Please Log On Again', + '403': 'No Permission, Please Contact the Administrator for Authorization', + timeout: 'Request Timeout', + }, + share: { + title: 'Share', + viewer: 'Viewer', + editor: 'Editor', + owner: 'Owner', + datasourceViewer: 'Can Use', + datasourceOwner: 'Can Manage', + }, + debug: { + title: 'Title', + switch: 'Switch Component: ', + }, + module: { + emptyText: 'No Data', + docLink: 'Read More About Modules...', + documentationText: + 'Modules are complete Applications, that can get included and repeated in other Applications and it functions just like a single component. As modules can get embedded, they need to be able to interact with your outside apps or websites. This four settings help to support communication with a Module.', + circularReference: + 'Circular Reference, Current Module/Application Cannot Be Used!', + emptyTestInput: 'The Current Module Has No Input to Test', + emptyTestMethod: 'The Current Module Has No Method to Test', + name: 'Name', + input: 'Input', + params: 'Params', + emptyParams: 'No Params Has Been Added', + emptyInput: 'No Input Has Been Added', + emptyMethod: 'No Method Has Been Added', + emptyOutput: 'No Output Has Been Added', + data: 'Data', + string: 'String', + number: 'Number', + array: 'Array', + boolean: 'Boolean', + query: 'Query', + autoScaleCompHeight: 'Component Height Scales with Container', + excuteMethod: 'Execute Method {name}', + method: 'Method', + action: 'Action', + output: 'Output', + nameExists: 'Name {name} Already Exist', + eventTriggered: 'Event {name} is Triggered', + globalPromptWhenEventTriggered: + 'Displays a Global Prompt When an Event is Triggered', + emptyEventTest: 'The Current Module Has No Events to Test', + emptyEvent: 'No Event Has Been Added', + event: 'Event', + }, + resultPanel: { + returnFunction: 'The Return Value is a Function.', + consume: '{time}', + JSON: 'Show JSON', + }, + createAppButton: { + creating: 'Creating...', + created: 'Create {name}', + }, + apiMessage: { + authenticationFail: 'User Authentication Failed, Please Sign In Again', + verifyAccount: 'Need to Verify Account', + functionNotSupported: + 'The Current Version Does Not Support This Function. Please Contact the Lowcoder Business Team to Upgrade Your Account', + }, + globalErrorMessage: { + createCompFail: 'Create Component {comp} Failed', + notHandledError: '{method} Method Not Executed', + }, + aggregation: { + navLayout: 'Navigation Bar', + chooseApp: 'Choose App', + iconTooltip: + 'Support Image src Link or Base64 String like data:image/png;base64,AAA... CCC', + hideWhenNoPermission: 'Hidden for Unauthorized Users', + queryParam: 'URL Query Params', + hashParam: 'URL Hash Params', + tabBar: 'Tab Bar', + emptyTabTooltip: 'Configure This Page on the Right Pane', }, - // seventeenth part - - "appSetting": { - "title": "General App Settings", - "450": "450px (Phone)", - "800": "800px (Tablet)", - "1440": "1440px (Laptop)", - "1920": "1920px (Wide Screen)", - "3200": "3200px (Super Large Screen)", - "autofill": "Autofill", - "userDefined": "Custom", - "default": "Default", - "tooltip": "Close the Popover After Setting", - "canvasMaxWidth": "Maximum Canvas Width for this App", - "userDefinedMaxWidth": "Custom Maximum Width", - "inputUserDefinedPxValue": "Please Enter a Custom Pixel Value", - "maxWidthTip": "Max Width Should Be Greater Than or Equal to 350", - "themeSetting": "Applied Style Theme", - "themeSettingDefault": "Default", - "themeCreate": "Create Theme", - "appTitle": "Title", - "appDescription": "Description", - "appCategory": "Category", - "showPublicHeader": "Show header in public view" - }, - "customShortcut": { - "title": "Custom Shortcuts", - "shortcut": "Shortcut", - "action": "Action", - "empty": "No Shortcuts", - "placeholder": "Press Shortcut", - "otherPlatform": "Other", - "space": "Space" - }, - "profile": { - "orgSettings": "Workspace Settings", - "switchOrg": "Switch Workspace", - "joinedOrg": "My Workspaces", - "createOrg": "Create Workspace", - "logout": "Log Out", - "personalInfo": "My Profile", - "bindingSuccess": "Binding {sourceName} Success", - "uploadError": "Upload Error", - "editProfilePicture": "Modify", - "saveUserNameTooltip": "Hit Enter to Save your new NicName. If you see your Email, it means that we just hijacked it as Username and you can change it to a better one. Your Email as technical username stays untouched.", - "changeAvatarTooltip": "You can Upload PNG or JPG files", - "nameCheck": "Name Cannot Be Empty", - "name": "Name: ", - "namePlaceholder": "Please Enter Your Name", - "toBind": "To Bind", - "binding": "Is Binding", - "bindError": "Parameter Error, Currently Not Supported Binding.", - "bindName": "Bind {name}", - "loginAfterBind": "After Binding, You Can Use {name} to Log In", - "bindEmail": "Bind Email:", - "email": "Email", - "emailCheck": "Please Enter a Valid Email", - "emailPlaceholder": "Please Enter Your Email", - "submit": "Submit", - "bindEmailSuccess": "Email Binding Success", - "passwordModifiedSuccess": "Password Changed Successfully", - "passwordSetSuccess": "Password Set Successfully", - "oldPassword": "Old Password:", - "inputCurrentPassword": "Please Enter Your Current Password", - "newPassword": "New Password:", - "inputNewPassword": "Please Enter Your New Password", - "confirmNewPassword": "Confirm New Password:", - "inputNewPasswordAgain": "Please Enter Your New Password Again", - "password": "Password:", - "modifyPassword": "Modify Password", - "setPassword": "Set Password", - "alreadySetPassword": "Password Set", - "setPassPlaceholder": "You Can Login with Password", - "setPassAfterBind": "You Can Set Password After Account Bind", - "socialConnections": "Social Connections", - "changeAvatar": "Change Avatar", - "about": "About", - "userId": "User ID", - "createdAt": "Created At", - "currentOrg": "Current Organization", - "settings": "Settings", - "uiLanguage": "UI Language", - "info": "Info", - "createdApps": "Your Created Apps", - "createdModules": "Your Created Modules", - "sharedApps": "Apps Shared with You", - "sharedModules": "Modules Shared with You", - "onMarketplace": "On Marketplace", - "howToPublish": "How to publish on Marketplace", - "memberOfOrgs": "Workspaces Membership", - "apiKeys": "API Keys", - "createApiKey": "Create API Key", - "apiKeyName": "Name", - "apiKeyDescription": "Description", - "apiKeyCopy": "Click the Api Key to get the value in your clipboard", - "apiKey": "API Key", - "deleteApiKey": "Delete API Key", - "deleteApiKeyContent": "Are you sure you want to delete this API key?", - "deleteApiKeyError": "Something went wrong. Please try again." - }, - "shortcut": { - "shortcutList": "Keyboard Shortcuts", - "click": "Click", - "global": "Global", - "toggleShortcutList": "Toggle Keyboard Shortcuts", - "editor": "Editor", - "toggleLeftPanel": "Toggle Left Pane", - "toggleBottomPanel": "Toggle Bottom Pane", - "toggleRightPanel": "Toggle Right Pane", - "toggleAllPanels": "Toggle All Panes", - "preview": "Preview", - "undo": "Undo", - "redo": "Redo", - "showGrid": "Show Grid", - "component": "Component", - "multiSelect": "Select Multiple", - "selectAll": "Select All", - "copy": "Copy", - "cut": "Cut", - "paste": "Paste", - "move": "Move", - "zoom": "Resize", - "delete": "Delete", - "deSelect": "Deselect", - "queryEditor": "Query Editor", - "excuteQuery": "Run Current Query", - "editBox": "Text Editor", - "formatting": "Format", - "openInLeftPanel": "Open in Left Pane" + appSetting: { + title: 'General App Settings', + '450': '450px (Phone)', + '800': '800px (Tablet)', + '1440': '1440px (Laptop)', + '1920': '1920px (Wide Screen)', + '3200': '3200px (Super Large Screen)', + autofill: 'Autofill', + userDefined: 'Custom', + default: 'Default', + tooltip: 'Close the Popover After Setting', + canvasMaxWidth: 'Maximum Canvas Width for this App', + userDefinedMaxWidth: 'Custom Maximum Width', + inputUserDefinedPxValue: 'Please Enter a Custom Pixel Value', + maxWidthTip: 'Max Width Should Be Greater Than or Equal to 350', + themeSetting: 'Applied Style Theme', + themeSettingDefault: 'Default', + themeCreate: 'Create Theme', + appTitle: 'Title', + appDescription: 'Description', + appCategory: 'Category', + showPublicHeader: 'Show header in public view', + }, + customShortcut: { + title: 'Custom Shortcuts', + shortcut: 'Shortcut', + action: 'Action', + empty: 'No Shortcuts', + placeholder: 'Press Shortcut', + otherPlatform: 'Other', + space: 'Space', + }, + profile: { + orgSettings: 'Workspace Settings', + switchOrg: 'Switch Workspace', + joinedOrg: 'My Workspaces', + createOrg: 'Create Workspace', + logout: 'Log Out', + personalInfo: 'My Profile', + bindingSuccess: 'Binding {sourceName} Success', + uploadError: 'Upload Error', + editProfilePicture: 'Modify', + saveUserNameTooltip: + 'Hit Enter to Save your new NicName. If you see your Email, it means that we just hijacked it as Username and you can change it to a better one. Your Email as technical username stays untouched.', + changeAvatarTooltip: 'You can Upload PNG or JPG files', + nameCheck: 'Name Cannot Be Empty', + name: 'Name: ', + namePlaceholder: 'Please Enter Your Name', + toBind: 'To Bind', + binding: 'Is Binding', + bindError: 'Parameter Error, Currently Not Supported Binding.', + bindName: 'Bind {name}', + loginAfterBind: 'After Binding, You Can Use {name} to Log In', + bindEmail: 'Bind Email:', + email: 'Email', + emailCheck: 'Please Enter a Valid Email', + emailPlaceholder: 'Please Enter Your Email', + submit: 'Submit', + bindEmailSuccess: 'Email Binding Success', + passwordModifiedSuccess: 'Password Changed Successfully', + passwordSetSuccess: 'Password Set Successfully', + oldPassword: 'Old Password:', + inputCurrentPassword: 'Please Enter Your Current Password', + newPassword: 'New Password:', + inputNewPassword: 'Please Enter Your New Password', + confirmNewPassword: 'Confirm New Password:', + inputNewPasswordAgain: 'Please Enter Your New Password Again', + password: 'Password:', + modifyPassword: 'Modify Password', + setPassword: 'Set Password', + alreadySetPassword: 'Password Set', + setPassPlaceholder: 'You Can Login with Password', + setPassAfterBind: 'You Can Set Password After Account Bind', + socialConnections: 'Social Connections', + changeAvatar: 'Change Avatar', + about: 'About', + userId: 'User ID', + createdAt: 'Created At', + currentOrg: 'Current Organization', + settings: 'Settings', + uiLanguage: 'UI Language', + info: 'Info', + createdApps: 'Your Created Apps', + createdModules: 'Your Created Modules', + sharedApps: 'Apps Shared with You', + sharedModules: 'Modules Shared with You', + onMarketplace: 'On Marketplace', + howToPublish: 'How to publish on Marketplace', + memberOfOrgs: 'Workspaces Membership', + apiKeys: 'API Keys', + createApiKey: 'Create API Key', + apiKeyName: 'Name', + apiKeyDescription: 'Description', + apiKeyCopy: 'Click the Api Key to get the value in your clipboard', + apiKey: 'API Key', + deleteApiKey: 'Delete API Key', + deleteApiKeyContent: 'Are you sure you want to delete this API key?', + deleteApiKeyError: 'Something went wrong. Please try again.', + }, + shortcut: { + shortcutList: 'Keyboard Shortcuts', + click: 'Click', + global: 'Global', + toggleShortcutList: 'Toggle Keyboard Shortcuts', + editor: 'Editor', + toggleLeftPanel: 'Toggle Left Pane', + toggleBottomPanel: 'Toggle Bottom Pane', + toggleRightPanel: 'Toggle Right Pane', + toggleAllPanels: 'Toggle All Panes', + preview: 'Preview', + undo: 'Undo', + redo: 'Redo', + showGrid: 'Show Grid', + component: 'Component', + multiSelect: 'Select Multiple', + selectAll: 'Select All', + copy: 'Copy', + cut: 'Cut', + paste: 'Paste', + move: 'Move', + zoom: 'Resize', + delete: 'Delete', + deSelect: 'Deselect', + queryEditor: 'Query Editor', + excuteQuery: 'Run Current Query', + editBox: 'Text Editor', + formatting: 'Format', + openInLeftPanel: 'Open in Left Pane', }, - // eighteenth part - - "help": { - "videoText": "Overview", - "onBtnText": "OK", + help: { + videoText: 'Overview', + onBtnText: 'OK', // eslint-disable-next-line only-ascii/only-ascii - "permissionDenyTitle": "💡 Unable to Create a New Application or Data Source?", - "permissionDenyContent": "You Don't Have Permission to Create the Application and Data Source. Please Contact the Administrator to Join the Developer Group.", - "appName": "Tutorial Application", - "chat": "Chat with Us", - "docs": "View Documentation", - "editorTutorial": "Editor Tutorial", - "update": "What's New?", - "version": "Version", - "versionWithColon": "Version: ", - "submitIssue": "Submit an Issue" - }, - "header": { - "nameCheckMessage": "The Name Cannot Be Empty", - "viewOnly": "View Only", - "recoverAppSnapshotTitle": "Restore This Version?", - "recoverAppSnapshotContent": "Restore Current App to the Version Created at {time}.", - "recoverAppSnapshotMessage": "Restore This Version", - "returnEdit": "Return to Editor", - "deploy": "Publish", - "export": "Export to JSON", - "editName": "Edit Name", - "duplicate": "Duplicate {type}", - "snapshot": "History", - "scriptsAndStyles": "Scripts and Style", - "appSettings": "App Settings", - "preview": "Preview", - "editError": "History Preview Mode, No Operation is Supported.", - "clone": "Clone", - "editorMode_layout": "Layout", - "editorMode_logic": "Logic", - "editorMode_both": "Both" - }, - "userAuth": { - "registerByEmail": "Sign Up", - "email": "Email:", - "inputEmail": "Please enter your email", - "inputValidEmail": "Please enter a valid email", - "forgotPassword": "Forgot Password", - "forgotPasswordInfo": "Enter your email and we'll send you a link to reset your password.", - "forgotPasswordSuccess": "Please check your email for reset password link.", - "forgotPasswordError": "Something went wrong. Please try again.", - "register": "Sign Up", - "userLogin": "Sign In", - "login": "Sign In", - "bind": "Bind", - "passwordCheckLength": "At Least {min} Characters", - "passwordCheckContainsNumberAndLetter": "Must Contain Letters and Numbers", - "passwordCheckSpace": "Cannot Contain Whitespace Characters", - "welcomeTitle": "Welcome to {productName}", - "inviteWelcomeTitle": "{username} invites You to work together", - "terms": "Terms", - "privacy": "Privacy Policy", - "registerHint": "I Have Read and Agree to the", - "chooseAccount": "Choose Your Account", - "signInLabel": "Sign In with {name}", - "bindAccount": "Bind Account", - "scanQrCode": "Scan the QR Code with {name}", - "invalidThirdPartyParam": "Invalid Third-Party Param", - "account": "Account", - "inputAccount": "Please Enter Your Account", - "ldapLogin": "LDAP Sign In", - "resetPassword": "Reset Password", - "resetPasswordDesc": "Reset User {name}'s Password. A New Password Will Be Generated After Reset.", - "resetSuccess": "Reset Succeeded", - "resetSuccessDesc": "Password Reset Succeeded. The New Password is: {password}", - "resetLostPasswordSuccess": "Password Reset Succeeded. Please login again.", - "copyPassword": "Copy Password", - "poweredByLowcoder": "Powered by: Lowcoder.cloud" - }, - "preLoad": { - "jsLibraryHelpText": "Add JavaScript Libraries to Your Current Application via URL Addresses. lodash, day.js, uuid, numbro are Built into the System for Immediate Use. JavaScript Libraries are Loaded Before the Application is Initialized, Which Can Have an Impact on Application Performance.", - "exportedAs": "Exported As", - "urlTooltip": "URL Address of the JavaScript Library, [unpkg.com](https://unpkg.com/) or [jsdelivr.net](https://www.jsdelivr.com/) is Recommended", - "recommended": "Recommended", - "viewJSLibraryDocument": "Document", - "jsLibraryURLError": "Invalid URL", - "jsLibraryExist": "JavaScript Library Already Exists", - "jsLibraryEmptyContent": "No JavaScript Libraries Added", - "jsLibraryDownloadError": "JavaScript Library Download Error", - "jsLibraryInstallSuccess": "JavaScript Library Installed Successfully", - "jsLibraryInstallFailed": "JavaScript Library Installation Failed", - "jsLibraryInstallFailedCloud": "Perhaps the Library is Not Available in the Sandbox, [Documentation](https://docs.lowcoder.cloud/build-apps/write-javascript/use-third-party-libraries#manually-import-libraries)\n{message}", - "jsLibraryInstallFailedHost": "{message}", - "add": "Add New", - "jsHelpText": "Add a Global Method or Variable to the Current Application.", - "cssHelpText": "Add Styles to the Current Application. The DOM Structure May Change as the System Iterates. Try to Modify Styles Through Component Properties.", - "scriptsAndStyles": "Scripts and Styles", - "jsLibrary": "JavaScript Library" - }, - "editorTutorials": { - "component": "Component", - "componentContent": "The Right Component Panel offers you many ready made Application Blocks (Components). These Can Be Dragged onto the Canvas for Use. You Can Also Create Your Own Components with a little coding knowledge.", - "canvas": "Canvas", - "canvasContent": "Build your apps on the Canvas with a 'What You See Is What You Get' approach. Simply drag and drop components to design your layout, and use keyboard shortcuts for quick editing like delete, copy, and paste. Once a component is selected, you can fine-tune every detail—from styling and layout to data binding and logical behavior. Plus, enjoy the added benefit of responsive design, ensuring your apps look great on any device.", - "queryData": "Query Data", - "queryDataContent": "You can create Data Queries Here and Connect to Your MySQL, MongoDB, Redis, Airtable, and many Other Data Sources. After Configuring the Query, Click 'Run' to Obtain the Data and continue the Tutorial.", - "compProperties": "Component Properties" - }, - "homeTutorials": { - "createAppContent": "Welcome! Click 'App' and Start to Create Your First Application.", - "createAppTitle": "Create App" + permissionDenyTitle: + '💡 Unable to Create a New Application or Data Source?', + permissionDenyContent: + "You Don't Have Permission to Create the Application and Data Source. Please Contact the Administrator to Join the Developer Group.", + appName: 'Tutorial Application', + chat: 'Chat with Us', + docs: 'View Documentation', + editorTutorial: 'Editor Tutorial', + update: "What's New?", + version: 'Version', + versionWithColon: 'Version: ', + submitIssue: 'Submit an Issue', + }, + header: { + nameCheckMessage: 'The Name Cannot Be Empty', + viewOnly: 'View Only', + recoverAppSnapshotTitle: 'Restore This Version?', + recoverAppSnapshotContent: + 'Restore Current App to the Version Created at {time}.', + recoverAppSnapshotMessage: 'Restore This Version', + returnEdit: 'Return to Editor', + deploy: 'Publish', + export: 'Export to JSON', + editName: 'Edit Name', + duplicate: 'Duplicate {type}', + snapshot: 'History', + scriptsAndStyles: 'Scripts and Style', + appSettings: 'App Settings', + preview: 'Preview', + editError: 'History Preview Mode, No Operation is Supported.', + clone: 'Clone', + editorMode_layout: 'Layout', + editorMode_logic: 'Logic', + editorMode_both: 'Both', + }, + userAuth: { + registerByEmail: 'Sign Up', + email: 'Email:', + inputEmail: 'Please enter your email', + inputValidEmail: 'Please enter a valid email', + forgotPassword: 'Forgot Password', + forgotPasswordInfo: + "Enter your email and we'll send you a link to reset your password.", + forgotPasswordSuccess: 'Please check your email for reset password link.', + forgotPasswordError: 'Something went wrong. Please try again.', + register: 'Sign Up', + userLogin: 'Sign In', + login: 'Sign In', + bind: 'Bind', + passwordCheckLength: 'At Least {min} Characters', + passwordCheckContainsNumberAndLetter: 'Must Contain Letters and Numbers', + passwordCheckSpace: 'Cannot Contain Whitespace Characters', + welcomeTitle: 'Welcome to {productName}', + inviteWelcomeTitle: '{username} invites You to work together', + terms: 'Terms', + privacy: 'Privacy Policy', + registerHint: 'I Have Read and Agree to the', + chooseAccount: 'Choose Your Account', + signInLabel: 'Sign In with {name}', + bindAccount: 'Bind Account', + scanQrCode: 'Scan the QR Code with {name}', + invalidThirdPartyParam: 'Invalid Third-Party Param', + account: 'Account', + inputAccount: 'Please Enter Your Account', + ldapLogin: 'LDAP Sign In', + resetPassword: 'Reset Password', + resetPasswordDesc: + "Reset User {name}'s Password. A New Password Will Be Generated After Reset.", + resetSuccess: 'Reset Succeeded', + resetSuccessDesc: + 'Password Reset Succeeded. The New Password is: {password}', + resetLostPasswordSuccess: 'Password Reset Succeeded. Please login again.', + copyPassword: 'Copy Password', + poweredByLowcoder: 'Powered by: Lowcoder.cloud', + }, + preLoad: { + jsLibraryHelpText: + 'Add JavaScript Libraries to Your Current Application via URL Addresses. lodash, day.js, uuid, numbro are Built into the System for Immediate Use. JavaScript Libraries are Loaded Before the Application is Initialized, Which Can Have an Impact on Application Performance.', + exportedAs: 'Exported As', + urlTooltip: + 'URL Address of the JavaScript Library, [unpkg.com](https://unpkg.com/) or [jsdelivr.net](https://www.jsdelivr.com/) is Recommended', + recommended: 'Recommended', + viewJSLibraryDocument: 'Document', + jsLibraryURLError: 'Invalid URL', + jsLibraryExist: 'JavaScript Library Already Exists', + jsLibraryEmptyContent: 'No JavaScript Libraries Added', + jsLibraryDownloadError: 'JavaScript Library Download Error', + jsLibraryInstallSuccess: 'JavaScript Library Installed Successfully', + jsLibraryInstallFailed: 'JavaScript Library Installation Failed', + jsLibraryInstallFailedCloud: + 'Perhaps the Library is Not Available in the Sandbox, [Documentation](https://docs.lowcoder.cloud/build-apps/write-javascript/use-third-party-libraries#manually-import-libraries)\n{message}', + jsLibraryInstallFailedHost: '{message}', + add: 'Add New', + jsHelpText: 'Add a Global Method or Variable to the Current Application.', + cssHelpText: + 'Add Styles to the Current Application. The DOM Structure May Change as the System Iterates. Try to Modify Styles Through Component Properties.', + scriptsAndStyles: 'Scripts and Styles', + jsLibrary: 'JavaScript Library', + }, + editorTutorials: { + component: 'Component', + componentContent: + 'The Right Component Panel offers you many ready made Application Blocks (Components). These Can Be Dragged onto the Canvas for Use. You Can Also Create Your Own Components with a little coding knowledge.', + canvas: 'Canvas', + canvasContent: + "Build your apps on the Canvas with a 'What You See Is What You Get' approach. Simply drag and drop components to design your layout, and use keyboard shortcuts for quick editing like delete, copy, and paste. Once a component is selected, you can fine-tune every detail—from styling and layout to data binding and logical behavior. Plus, enjoy the added benefit of responsive design, ensuring your apps look great on any device.", + queryData: 'Query Data', + queryDataContent: + "You can create Data Queries Here and Connect to Your MySQL, MongoDB, Redis, Airtable, and many Other Data Sources. After Configuring the Query, Click 'Run' to Obtain the Data and continue the Tutorial.", + compProperties: 'Component Properties', + }, + homeTutorials: { + createAppContent: + "Welcome! Click 'App' and Start to Create Your First Application.", + createAppTitle: 'Create App', }, - // nineteenth part - - "history": { - "layout": "'{0}' layout adjustment", - "upgrade": "Upgrade '{0}'", - "delete": "Delete '{0}'", - "add": "Add '{0}'", - "modify": "Modify '{0}'", - "rename": "Rename '{1}' to '{0}'", - "recover": "Recover '{2}' version", - "recoverVersion": "Recover version", - "andSoOn": "and so on", - "timeFormat": "MM DD at hh:mm A", - "emptyHistory": "No history", - "currentVersionWithBracket": " (Current)", - "currentVersion": "Current version", - "justNow": "Just now", - "history": "History" - }, - "home": { - "profile": "Your Profile", - "news": "News", - "orgHome" : "Homepage (Org)", - "yourOrg": "Your Organization", - "orgHomeTitle": "Organization Homepage", - "appMarketplace": "Application Marketplace", - "allApplications": "Your Apps", - "allModules": "Your Modules", - "allFolders": "All Folders", - "yourFolders" : "Your Folders", - "modules": "Modules", - "module": "Module", - "trash": "Trash", - "marketplace": "Marketplace", - "allCategories": "All Categories", - "queryLibrary": "Query Library", - "datasource": "Data Sources", - "selectDatasourceType": "Select Data Source Type", - "home": "Home", - "all": "All", - "app": "App", - "navigation": "Navigation", - "navLayout": "PC Navigation", - "navLayoutDesc": "Left-side menu for easy desktop navigation.", - "mobileTabLayout": "Mobile Navigation", - "mobileTabLayoutDesc": "Bottom navigation bar for smooth mobile browsing.", - "folders": "Folders", - "folder": "Folder", - "rootFolder": "Root", - "import": "Import", - "export": "Export to JSON", - "show": "Show", - "inviteUser": "Invite members", - "createFolder": "Create Folder", - "createFolderSubTitle": "Folder name:", - "moveToFolder": "Move to folder", - "moveToTrash": "Move to trash", - "moveToFolderSubTitle": 'Move "{name}" to:', - "folderName": "Folder name:", - "resCardSubTitle": "{time} by {creator}", - "trashEmpty": "Trash is empty.", - "projectEmpty": "Nothing here.", - "projectEmptyCanAdd": "You don't have any apps yet. Click New to get started.", - "name": "Name", - "type": "Type", - "creator": "Created by", - "lastModified": "Last modified", - "deleteTime": "Delete time", - "createTime": "Create time", - "datasourceName": "Data source name", - "databaseName": "Database name", - "nameCheckMessage": "The name cannot be empty", - "deleteElementTitle": "Delete permanently", - "moveToTrashSubTitle": "{type} {name} will be moved to trash.", - "deleteElementSubTitle": "Delete {type} {name} permanently, it cannot be recovered.", - "deleteSuccessMsg": "Deleted successfully", - "deleteErrorMsg": "Deleted error", - "recoverSuccessMsg": "Recovered successfully", - "newDatasource": "New data source", - "creating": "Creating...", - "chooseDataSourceType": "Choose data source type", - "folderAlreadyExists": "The folder already exists", - "newNavLayout": "{userName}'s {name} ", - "newApp": "{userName}'s new {name} ", - "importError": "Import error, {message}", - "exportError": "Export error, {message}", - "importSuccess": "Import success", - "fileUploadError": "File upload error", - "fileFormatError": "File format error", - "groupWithSquareBrackets": "[Group] ", - "allPermissions": "Owner", - "shareLink": "Share link: ", - "copyLink": "Copy link", - "appPublicMessage": "Make the app public. Anyone can view.", - "modulePublicMessage": "Make the module public. Anyone can view.", - "marketplaceURL": "https://api-service.lowcoder.cloud", - "appMarketplaceMessage": "Publish your App on the Public Marketplace. Anyone can view and copy it from there.", - "moduleMarketplaceMessage": "Publish your Module on the Public Marketplace. Anyone can view and copy it from there.", - "marketplaceGoodPublishing": "Please make sure your app is well-named and easy to use. Remove any sensitive information before publishing. Also, remove local datasources and replace by static built-in temporary data.", - "noMarketplaceApps": "No apps yet in the marketplace", - "errorMarketplaceApps": "Error while loading Marketplace Apps", - "localMarketplaceTitle": "Local Marketplace", - "globalMarketplaceTitle": "Public Marketplace", - "memberPermissionList": "Member permissions: ", - "orgName": "{orgName} admins", - "addMember": "Add members", - "addPermissionPlaceholder": "Please enter a name to search members", - "searchMemberOrGroup": "Search for members or groups: ", - "addPermissionErrorMessage": "Failed to add permission, {message}", - "copyModalTitle": 'Clone "{name}"', - "copyNameLabel": "{type} name", - "copyModalfolderLabel": "Add to folder", - "copyNamePlaceholder": "Please enter a {type} name", - "chooseNavType": "Please choose navigation type", - "createNavigation": "Create Navigation", - "howToUseAPI": "How to use the Open Rest API", - }, - "carousel": { - "dotPosition": "Navigation Dots position", - "autoPlay": "AutoPlay", - "showDots": "Show Navigation Dots" + history: { + layout: "'{0}' layout adjustment", + upgrade: "Upgrade '{0}'", + delete: "Delete '{0}'", + add: "Add '{0}'", + modify: "Modify '{0}'", + rename: "Rename '{1}' to '{0}'", + recover: "Recover '{2}' version", + recoverVersion: 'Recover version', + andSoOn: 'and so on', + timeFormat: 'MM DD at hh:mm A', + emptyHistory: 'No history', + currentVersionWithBracket: ' (Current)', + currentVersion: 'Current version', + justNow: 'Just now', + history: 'History', + }, + home: { + profile: 'Your Profile', + news: 'News', + orgHome: 'Homepage (Org)', + yourOrg: 'Your Organization', + orgHomeTitle: 'Organization Homepage', + appMarketplace: 'Application Marketplace', + allApplications: 'Your Apps', + allModules: 'Your Modules', + allFolders: 'All Folders', + yourFolders: 'Your Folders', + modules: 'Modules', + module: 'Module', + trash: 'Trash', + marketplace: 'Marketplace', + allCategories: 'All Categories', + queryLibrary: 'Query Library', + datasource: 'Data Sources', + selectDatasourceType: 'Select Data Source Type', + home: 'Home', + all: 'All', + app: 'App', + navigation: 'Navigation', + navLayout: 'PC Navigation', + navLayoutDesc: 'Left-side menu for easy desktop navigation.', + mobileTabLayout: 'Mobile Navigation', + mobileTabLayoutDesc: 'Bottom navigation bar for smooth mobile browsing.', + folders: 'Folders', + folder: 'Folder', + rootFolder: 'Root', + import: 'Import', + export: 'Export to JSON', + show: 'Show', + inviteUser: 'Invite members', + createFolder: 'Create Folder', + createFolderSubTitle: 'Folder name:', + moveToFolder: 'Move to folder', + moveToTrash: 'Move to trash', + moveToFolderSubTitle: 'Move "{name}" to:', + folderName: 'Folder name:', + resCardSubTitle: '{time} by {creator}', + trashEmpty: 'Trash is empty.', + projectEmpty: 'Nothing here.', + projectEmptyCanAdd: + "You don't have any apps yet. Click New to get started.", + name: 'Name', + type: 'Type', + creator: 'Created by', + lastModified: 'Last modified', + deleteTime: 'Delete time', + createTime: 'Create time', + datasourceName: 'Data source name', + databaseName: 'Database name', + nameCheckMessage: 'The name cannot be empty', + deleteElementTitle: 'Delete permanently', + moveToTrashSubTitle: '{type} {name} will be moved to trash.', + deleteElementSubTitle: + 'Delete {type} {name} permanently, it cannot be recovered.', + deleteSuccessMsg: 'Deleted successfully', + deleteErrorMsg: 'Deleted error', + recoverSuccessMsg: 'Recovered successfully', + newDatasource: 'New data source', + creating: 'Creating...', + chooseDataSourceType: 'Choose data source type', + folderAlreadyExists: 'The folder already exists', + newNavLayout: "{userName}'s {name} ", + newApp: "{userName}'s new {name} ", + importError: 'Import error, {message}', + exportError: 'Export error, {message}', + importSuccess: 'Import success', + fileUploadError: 'File upload error', + fileFormatError: 'File format error', + groupWithSquareBrackets: '[Group] ', + allPermissions: 'Owner', + shareLink: 'Share link: ', + copyLink: 'Copy link', + appPublicMessage: 'Make the app public. Anyone can view.', + modulePublicMessage: 'Make the module public. Anyone can view.', + marketplaceURL: 'https://api-service.lowcoder.cloud', + appMarketplaceMessage: + 'Publish your App on the Public Marketplace. Anyone can view and copy it from there.', + moduleMarketplaceMessage: + 'Publish your Module on the Public Marketplace. Anyone can view and copy it from there.', + marketplaceGoodPublishing: + 'Please make sure your app is well-named and easy to use. Remove any sensitive information before publishing. Also, remove local datasources and replace by static built-in temporary data.', + noMarketplaceApps: 'No apps yet in the marketplace', + errorMarketplaceApps: 'Error while loading Marketplace Apps', + localMarketplaceTitle: 'Local Marketplace', + globalMarketplaceTitle: 'Public Marketplace', + memberPermissionList: 'Member permissions: ', + orgName: '{orgName} admins', + addMember: 'Add members', + addPermissionPlaceholder: 'Please enter a name to search members', + searchMemberOrGroup: 'Search for members or groups: ', + addPermissionErrorMessage: 'Failed to add permission, {message}', + copyModalTitle: 'Clone "{name}"', + copyNameLabel: '{type} name', + copyModalfolderLabel: 'Add to folder', + copyNamePlaceholder: 'Please enter a {type} name', + chooseNavType: 'Please choose navigation type', + createNavigation: 'Create Navigation', + howToUseAPI: 'How to use the Open Rest API', + }, + carousel: { + dotPosition: 'Navigation Dots position', + autoPlay: 'AutoPlay', + showDots: 'Show Navigation Dots', }, - // twentieth part - - "npm": { - "invalidNpmPackageName": "Invalid npm Package Name or URL.", - "pluginExisted": "This npm Plugin Already Existed", - "compNotFound": "Component {compName} Not Found.", - "addPluginModalTitle": "Add Plugin from a npm Repository", - "pluginNameLabel": "npm Package's URL or Name", - "noCompText": "No Components.", - "compsLoading": "Loading...", - "removePluginBtnText": "Remove", - "addPluginBtnText": "Add npm Plugin" - }, - "toggleButton": { - "valueDesc": "The Default Value of the Toggle Button, For Example: False", - "trueDefaultText": "Hide", - "falseDefaultText": "Show", - "trueLabel": "Text for True", - "falseLabel": "Text for False", - "trueIconLabel": "Icon for True", - "falseIconLabel": "Icon for False", - "iconPosition": "Icon Position", - "showText": "Show Text", - "alignment": "Alignment", - "showBorder": "Show Border" + npm: { + invalidNpmPackageName: 'Invalid npm Package Name or URL.', + pluginExisted: 'This npm Plugin Already Existed', + compNotFound: 'Component {compName} Not Found.', + addPluginModalTitle: 'Add Plugin from a npm Repository', + pluginNameLabel: "npm Package's URL or Name", + noCompText: 'No Components.', + compsLoading: 'Loading...', + removePluginBtnText: 'Remove', + addPluginBtnText: 'Add npm Plugin', + }, + toggleButton: { + valueDesc: 'The Default Value of the Toggle Button, For Example: False', + trueDefaultText: 'Hide', + falseDefaultText: 'Show', + trueLabel: 'Text for True', + falseLabel: 'Text for False', + trueIconLabel: 'Icon for True', + falseIconLabel: 'Icon for False', + iconPosition: 'Icon Position', + showText: 'Show Text', + alignment: 'Alignment', + showBorder: 'Show Border', }, // twenty-first part - - "componentDoc": { - "markdownDemoText": "**Lowcoder** | Create software applications for your Company and your Customers with minimal coding experience. Lowcoder is the best Retool, Appsmith or Tooljet Alternative.", - "demoText": "Lowcoder | Create software applications for your Company and your Customers with minimal coding experience. Lowcoder is the best Retool, Appsmith or Tooljet Alternative.", - "submit": "Submit", - "style": "Style", - "danger": "Danger", - "warning": "Warning", - "success": "Success", - "menu": "Menu", - "link": "Link", - "customAppearance": "Custom Appearance", - "search": "Search", - "pleaseInputNumber": "Please Enter a Number", - "mostValue": "Most Value", - "maxRating": "Maximum Rating", - "notSelect": "Not Selected", - "halfSelect": "Half Selection", - "pleaseSelect": "Please Select", - "title": "Title", - "content": "Content", - "componentNotFound": "Component Does Not Exist", - "example": "Examples", - "defaultMethodDesc": "Set the Value of Property {name}", - "propertyUsage": "You Can Read Component-Related Information by Accessing Component Properties by Component Name Anywhere You Can Write JavaScript.", - "property": "Properties", - "propertyName": "Property Name", - "propertyType": "Type", - "propertyDesc": "Description", - "event": "Events", - "eventName": "Event Name", - "eventDesc": "Description", - "mehtod": "Methods", - "methodUsage": "You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events", - "methodName": "Method Name", - "methodDesc": "Description", - "showBorder": "Show Border", - "haveTry": "Try It Yourself", - "settings": "Setting", - "settingValues": "Setting Value", - "defaultValue": "Default Value", - "time": "Time", - "date": "Date", - "noValue": "None", - "xAxisType": "X-Axis Type", - "hAlignType": "Horizontal Alignment", - "leftLeftAlign": "Left-Left Alignment", - "leftRightAlign": "Left-Right Alignment", - "topLeftAlign": "Top-Left Alignment", - "topRightAlign": "Top-Right Alignment", - "validation": "Validation", - "required": "Required", - "defaultStartDateValue": "Default Start Date", - "defaultEndDateValue": "Default End Date", - "basicUsage": "Basic Usage", - "basicDemoDescription": "The Following Examples Show the Basic Usage of the Component.", - "noDefaultValue": "No Default Value", - "forbid": "Forbidden", - "placeholder": "Placeholder", - "pleaseInputPassword": "Please Enter a Password", - "password": "Password", - "textAlign": "Text Alignment", - "length": "Length", - "top": "Top", - "pleaseInputName": "Please Enter Your Name", - "userName": "Name", - "fixed": "Fixed", - "responsive": "Responsive", - "workCount": "Word Count", - "cascaderOptions": "Cascader Options", - "pleaseSelectCity": "Please Select a City", - "advanced": "Advanced", - "showClearIcon": "Show Clear Icon", -/* eslint-disable only-ascii/only-ascii */ - appleOptionLabel: "🍎 Apple", - waterMelonOptionLabel: "🍉 Watermelon", - berryOptionLabel: "🍓 Strawberry", - lemonOptionLabel: "🍋 Lemon", - coconutOptionLabel: "🥥 Coconut", -/* eslint-enable only-ascii/only-ascii */ - "likedFruits": "Favorites", - "option": "Option", - "singleFileUpload": "Single File Upload", - "multiFileUpload": "Multiple File Upload", - "folderUpload": "Folder Upload", - "multiFile": "Multiple Files", - "folder": "Folder", - "open": "Open", - "favoriteFruits": "Favorite Fruits", - "pleaseSelectOneFruit": "Select a Fruit", - "notComplete": "Not Complete", - "complete": "Complete", - "echart": "EChart", - "lineChart": "Line Chart", - "basicLineChart": "Basic Line Chart", - "lineChartType": "Line Chart Type", - "stackLineChart": "Stacked Line", - "areaLineChart": "Area Line", - "scatterChart": "Scatter Chart", - "scatterShape": "Scatter Shape", - "scatterShapeCircle": "Circle", - "scatterShapeRect": "Rectangle", - "scatterShapeTri": "Triangle", - "scatterShapeDiamond": "Diamond", - "scatterShapePin": "Pushpin", - "scatterShapeArrow": "Arrow", - "pieChart": "Pie Chart", - "basicPieChart": "Basic Pie Chart", - "pieChatType": "Pie Chart Type", - "pieChartTypeCircle": "Donut Chart", - "pieChartTypeRose": "Rose Chart", - "titleAlign": "Title Position", - "color": "Color", - "dashed": "Dashed", - "imADivider": "I am a Dividing Line", - "tableSize": "Table Size", - "subMenuItem": "SubMenu {num}", - "menuItem": "Menu {num}", - "labelText": "Label", - "labelPosition": "Label - Position", - "labelAlign": "Label - Align", - "optionsOptionType": "Configuration Method", - "styleBackgroundColor": "Background Color", - "styleBorderColor": "Border Color", - "styleColor": "Font Color", - "selectionMode": "Row Selection Mode", - "paginationSetting": "Pagination Setting", - "paginationShowSizeChanger": "Support Users to Modify the Number of Entries per Page", - "paginationShowSizeChangerButton": "Show Size Changer Button", - "paginationShowQuickJumper": "Show Quick Jumper", - "paginationHideOnSinglePage": "Hide When There is Only One Page", - "paginationPageSizeOptions": "Page Size", - "chartConfigCompType": "Chart Type", - "xConfigType": "X Axis Type", - "loading": "Loading", - "disabled": "Disabled", - "minLength": "Minimum Length", - "maxLength": "Maximum Length", - "showCount": "Show Word Count", - "autoHeight": "Height", - "thousandsSeparator": "Thousands Separator", - "precision": "Decimal Places", - "value": "Default Value", - "formatter": "Format", - "min": "Minimum Value", - "max": "Maximum Value", - "step": "Step Size", - "start": "Start Time", - "end": "End Time", - "allowHalf": "Allow Half Selection", - "filetype": "File Type", - "showUploadList": "Show Upload List", - "uploadType": "Upload Type", - "allowClear": "Show Clear Icon", - "minSize": "Minimum File Size", - "maxSize": "Maximum File Size", - "maxFiles": "Maximum Number of Uploaded Files", - "format": "Format", - "minDate": "Minimum Date", - "maxDate": "Maximum Date", - "minTime": "Minimum Time", - "maxTime": "Maximum Time", - "text": "Text", - "type": "Type", - "hideHeader": "Hide Header", - "hideBordered": "Hide Border", - "src": "Image URL", - "showInfo": "Display Value", - "mode": "Mode", - "onlyMenu": "Only Menu", - "horizontalAlignment": "Horizontal Alignment", - "row": "Left", - "column": "Top", - "leftAlign": "Left Alignment", - "rightAlign": "Right Alignment", - "percent": "Percentage", - "fixedHeight": "Fixed Height", - "auto": "Adaptive", - "directory": "Folder", - "multiple": "Multiple Files", - "singleFile": "Single File", - "manual": "Manual", - "default": "Default", - "small": "Small", - "middle": "Medium", - "large": "Large", - "single": "Single", - "multi": "Multiple", - "close": "Close", - "ui": "UI Mode", - "line": "Line Chart", - "scatter": "Scatter Plot", - "pie": "Pie Chart", - "basicLine": "Basic Line Chart", - "stackedLine": "Stacked Line Chart", - "areaLine": "Area Area Map", - "basicPie": "Basic Pie Chart", - "doughnutPie": "Donut Chart", - "rosePie": "Rose Chart", - "category": "Category Axis", - "circle": "Circle", - "rect": "Rectangle", - "triangle": "Triangle", - "diamond": "Diamond", - "pin": "Pushpin", - "arrow": "Arrow", - "left": "Left", - "right": "Right", - "center": "Center", - "bottom": "Bottom", - "justify": "Justify Both Ends" + componentDoc: { + markdownDemoText: + '**Lowcoder** | Create software applications for your Company and your Customers with minimal coding experience. Lowcoder is the best Retool, Appsmith or Tooljet Alternative.', + demoText: + 'Lowcoder | Create software applications for your Company and your Customers with minimal coding experience. Lowcoder is the best Retool, Appsmith or Tooljet Alternative.', + submit: 'Submit', + style: 'Style', + danger: 'Danger', + warning: 'Warning', + success: 'Success', + menu: 'Menu', + link: 'Link', + customAppearance: 'Custom Appearance', + search: 'Search', + pleaseInputNumber: 'Please Enter a Number', + mostValue: 'Most Value', + maxRating: 'Maximum Rating', + notSelect: 'Not Selected', + halfSelect: 'Half Selection', + pleaseSelect: 'Please Select', + title: 'Title', + content: 'Content', + componentNotFound: 'Component Does Not Exist', + example: 'Examples', + defaultMethodDesc: 'Set the Value of Property {name}', + propertyUsage: + 'You Can Read Component-Related Information by Accessing Component Properties by Component Name Anywhere You Can Write JavaScript.', + property: 'Properties', + propertyName: 'Property Name', + propertyType: 'Type', + propertyDesc: 'Description', + event: 'Events', + eventName: 'Event Name', + eventDesc: 'Description', + mehtod: 'Methods', + methodUsage: + "You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events", + methodName: 'Method Name', + methodDesc: 'Description', + showBorder: 'Show Border', + haveTry: 'Try It Yourself', + settings: 'Setting', + settingValues: 'Setting Value', + defaultValue: 'Default Value', + time: 'Time', + date: 'Date', + noValue: 'None', + xAxisType: 'X-Axis Type', + hAlignType: 'Horizontal Alignment', + leftLeftAlign: 'Left-Left Alignment', + leftRightAlign: 'Left-Right Alignment', + topLeftAlign: 'Top-Left Alignment', + topRightAlign: 'Top-Right Alignment', + validation: 'Validation', + required: 'Required', + defaultStartDateValue: 'Default Start Date', + defaultEndDateValue: 'Default End Date', + basicUsage: 'Basic Usage', + basicDemoDescription: + 'The Following Examples Show the Basic Usage of the Component.', + noDefaultValue: 'No Default Value', + forbid: 'Forbidden', + placeholder: 'Placeholder', + pleaseInputPassword: 'Please Enter a Password', + password: 'Password', + textAlign: 'Text Alignment', + length: 'Length', + top: 'Top', + pleaseInputName: 'Please Enter Your Name', + userName: 'Name', + fixed: 'Fixed', + responsive: 'Responsive', + workCount: 'Word Count', + cascaderOptions: 'Cascader Options', + pleaseSelectCity: 'Please Select a City', + advanced: 'Advanced', + showClearIcon: 'Show Clear Icon', + /* eslint-disable only-ascii/only-ascii */ + appleOptionLabel: '🍎 Apple', + waterMelonOptionLabel: '🍉 Watermelon', + berryOptionLabel: '🍓 Strawberry', + lemonOptionLabel: '🍋 Lemon', + coconutOptionLabel: '🥥 Coconut', + /* eslint-enable only-ascii/only-ascii */ + likedFruits: 'Favorites', + option: 'Option', + singleFileUpload: 'Single File Upload', + multiFileUpload: 'Multiple File Upload', + folderUpload: 'Folder Upload', + multiFile: 'Multiple Files', + folder: 'Folder', + open: 'Open', + favoriteFruits: 'Favorite Fruits', + pleaseSelectOneFruit: 'Select a Fruit', + notComplete: 'Not Complete', + complete: 'Complete', + echart: 'EChart', + lineChart: 'Line Chart', + basicLineChart: 'Basic Line Chart', + lineChartType: 'Line Chart Type', + stackLineChart: 'Stacked Line', + areaLineChart: 'Area Line', + scatterChart: 'Scatter Chart', + scatterShape: 'Scatter Shape', + scatterShapeCircle: 'Circle', + scatterShapeRect: 'Rectangle', + scatterShapeTri: 'Triangle', + scatterShapeDiamond: 'Diamond', + scatterShapePin: 'Pushpin', + scatterShapeArrow: 'Arrow', + pieChart: 'Pie Chart', + basicPieChart: 'Basic Pie Chart', + pieChatType: 'Pie Chart Type', + pieChartTypeCircle: 'Donut Chart', + pieChartTypeRose: 'Rose Chart', + titleAlign: 'Title Position', + color: 'Color', + dashed: 'Dashed', + imADivider: 'I am a Dividing Line', + tableSize: 'Table Size', + subMenuItem: 'SubMenu {num}', + menuItem: 'Menu {num}', + labelText: 'Label', + labelPosition: 'Label - Position', + labelAlign: 'Label - Align', + optionsOptionType: 'Configuration Method', + styleBackgroundColor: 'Background Color', + styleBorderColor: 'Border Color', + styleColor: 'Font Color', + selectionMode: 'Row Selection Mode', + paginationSetting: 'Pagination Setting', + paginationShowSizeChanger: + 'Support Users to Modify the Number of Entries per Page', + paginationShowSizeChangerButton: 'Show Size Changer Button', + paginationShowQuickJumper: 'Show Quick Jumper', + paginationHideOnSinglePage: 'Hide When There is Only One Page', + paginationPageSizeOptions: 'Page Size', + chartConfigCompType: 'Chart Type', + xConfigType: 'X Axis Type', + loading: 'Loading', + disabled: 'Disabled', + minLength: 'Minimum Length', + maxLength: 'Maximum Length', + showCount: 'Show Word Count', + autoHeight: 'Height', + thousandsSeparator: 'Thousands Separator', + precision: 'Decimal Places', + value: 'Default Value', + formatter: 'Format', + min: 'Minimum Value', + max: 'Maximum Value', + step: 'Step Size', + start: 'Start Time', + end: 'End Time', + allowHalf: 'Allow Half Selection', + filetype: 'File Type', + showUploadList: 'Show Upload List', + uploadType: 'Upload Type', + allowClear: 'Show Clear Icon', + minSize: 'Minimum File Size', + maxSize: 'Maximum File Size', + maxFiles: 'Maximum Number of Uploaded Files', + format: 'Format', + minDate: 'Minimum Date', + maxDate: 'Maximum Date', + minTime: 'Minimum Time', + maxTime: 'Maximum Time', + text: 'Text', + type: 'Type', + hideHeader: 'Hide Header', + hideBordered: 'Hide Border', + src: 'Image URL', + showInfo: 'Display Value', + mode: 'Mode', + onlyMenu: 'Only Menu', + horizontalAlignment: 'Horizontal Alignment', + row: 'Left', + column: 'Top', + leftAlign: 'Left Alignment', + rightAlign: 'Right Alignment', + percent: 'Percentage', + fixedHeight: 'Fixed Height', + auto: 'Adaptive', + directory: 'Folder', + multiple: 'Multiple Files', + singleFile: 'Single File', + manual: 'Manual', + default: 'Default', + small: 'Small', + middle: 'Medium', + large: 'Large', + single: 'Single', + multi: 'Multiple', + close: 'Close', + ui: 'UI Mode', + line: 'Line Chart', + scatter: 'Scatter Plot', + pie: 'Pie Chart', + basicLine: 'Basic Line Chart', + stackedLine: 'Stacked Line Chart', + areaLine: 'Area Area Map', + basicPie: 'Basic Pie Chart', + doughnutPie: 'Donut Chart', + rosePie: 'Rose Chart', + category: 'Category Axis', + circle: 'Circle', + rect: 'Rectangle', + triangle: 'Triangle', + diamond: 'Diamond', + pin: 'Pushpin', + arrow: 'Arrow', + left: 'Left', + right: 'Right', + center: 'Center', + bottom: 'Bottom', + justify: 'Justify Both Ends', }, - // twenty-second part - - "playground": { - "url": "https://app.lowcoder.cloud/playground/{compType}/1", - "data": "Current Data State", - "preview": "Preview", - "property": "Properties", - "console": "Visual Script Console", - "executeMethods": "Execute Methods", - "noMethods": "No Methods.", - "methodParams": "Method Parameters", - "methodParamsHelp": "Input Method Parameters Using JSON. For Example, You Can Set setValue's Parameters With: [1] or 1" - }, - "calendar": { - "headerBtnBackground": "Button Background", - "btnText": "Button Text", - "title": "Title", - "selectBackground": "Selected Background" - }, - "componentDocExtra": { - "table": table, - }, - "idSource": { - "title": "User Authentication Provider", - "form": "Email", - "pay": "Premium", - "enable": "Enable", - "unEnable": "Not Enabled", - "loginType": "Login Type", - "status": "Status", - "desc": "Description", - "manual": "Address Book:", - "syncManual": "Sync Address Book", - "syncManualSuccess": "Sync Succeeded", - "enableRegister": "Allow Registration", - "saveBtn": "Save and Enable", - "save": "Save", - "none": "None", - "formPlaceholder": "Please Enter {label}", - "formSelectPlaceholder": "Please Select the {label}", - "saveSuccess": "Saved Successfully", - "dangerLabel": "Danger Zone", - "dangerTip": "Disabling This ID Provider May Result in Some Users Being Unable to Log In. Proceed With Caution.", - "disable": "Disable", - "disableSuccess": "Disabled Successfully", - "encryptedServer": "-------- Encrypted on the Server Side --------", - "disableTip": "Tips", - "disableContent": "Disabling This ID Provider May Result in Some Users Being Unable to Log In. Are You Sure to Proceed?", - "manualTip": "", - "lockTip": "The Content is Locked. To Make Changes, Please Click the {icon} to Unlock.", - "lockModalContent": "Changing the 'ID Attribute' Field Can Have Significant Impacts on User Identification. Please Confirm That You Understand the Implications of This Change Before Proceeding.", - "payUserTag": "Premium" - }, - "slotControl": { - "configSlotView": "Configure Slot View" - }, - "jsonLottie": { - "lottieJson": "Lottie JSON", - "speed": "Speed", - "width": "Width", - "height": "Height", - "backgroundColor": "Background Color", - "animationStart": "Animation Start", - "valueDesc": "Current JSON Data", - "loop": "Loop", - "auto": "Auto", - "onHover": "On Hover", - "singlePlay": "Single Play", - "endlessLoop": "Endless Loop", - "keepLastFrame": "Keep Last Frame displayed" - }, - "timeLine": { - "titleColor": "Title Color", - "subTitleColor": "Subtitle Color", - "labelColor": "Label Color", - "value": "Timeline Data", - "mode": "Display Order", - "left": "Content Right", - "right": "Content Left", - "alternate": "Alternate Content Order", - "modeTooltip": "Set the Content to Appear Left/Right or Alternately on Both Sides of the Timeline", - "reverse": "Newest Events First", - "pending": "Pending Node Text", - "pendingDescription": "When Set, Then a Last Node With the Text and a Waiting Indicator Will Be Displayed.", - "defaultPending": "Continuous Improvement", - "clickTitleEvent": "Click Title Event", - "clickTitleEventDesc": "Click Title Event", - "Introduction": "Introduction Keys", - "helpTitle": "Title of Timeline (Required)", - "helpsubTitle": "Subtitle of Timeline", - "helpLabel": "Label of Timeline, Used to Display Dates", - "helpColor": "Indicates Timeline Node Color", - "helpDot": "Rendering Timeline Nodes as Ant Design Icons", - "helpTitleColor": "Individually Control the Color of Node Title", - "helpSubTitleColor": "Individually Control the Color of Node Subtitle", - "helpLabelColor": "Individually Control the Color of Node Icon", - "valueDesc": "Data of Timeline", - "clickedObjectDesc": "Clicked Item Data", - "clickedIndexDesc": "Clicked Item Index" + playground: { + url: 'https://app.lowcoder.cloud/playground/{compType}/1', + data: 'Current Data State', + preview: 'Preview', + property: 'Properties', + console: 'Visual Script Console', + executeMethods: 'Execute Methods', + noMethods: 'No Methods.', + methodParams: 'Method Parameters', + methodParamsHelp: + "Input Method Parameters Using JSON. For Example, You Can Set setValue's Parameters With: [1] or 1", + }, + calendar: { + headerBtnBackground: 'Button Background', + btnText: 'Button Text', + title: 'Title', + selectBackground: 'Selected Background', + }, + componentDocExtra: { + table: table, + }, + idSource: { + title: 'User Authentication Provider', + form: 'Email', + pay: 'Premium', + enable: 'Enable', + unEnable: 'Not Enabled', + loginType: 'Login Type', + status: 'Status', + desc: 'Description', + manual: 'Address Book:', + syncManual: 'Sync Address Book', + syncManualSuccess: 'Sync Succeeded', + enableRegister: 'Allow Registration', + saveBtn: 'Save and Enable', + save: 'Save', + none: 'None', + formPlaceholder: 'Please Enter {label}', + formSelectPlaceholder: 'Please Select the {label}', + saveSuccess: 'Saved Successfully', + dangerLabel: 'Danger Zone', + dangerTip: + 'Disabling This ID Provider May Result in Some Users Being Unable to Log In. Proceed With Caution.', + disable: 'Disable', + disableSuccess: 'Disabled Successfully', + encryptedServer: '-------- Encrypted on the Server Side --------', + disableTip: 'Tips', + disableContent: + 'Disabling This ID Provider May Result in Some Users Being Unable to Log In. Are You Sure to Proceed?', + manualTip: '', + lockTip: + 'The Content is Locked. To Make Changes, Please Click the {icon} to Unlock.', + lockModalContent: + "Changing the 'ID Attribute' Field Can Have Significant Impacts on User Identification. Please Confirm That You Understand the Implications of This Change Before Proceeding.", + payUserTag: 'Premium', + }, + slotControl: { + configSlotView: 'Configure Slot View', + }, + jsonLottie: { + lottieJson: 'Lottie JSON', + speed: 'Speed', + width: 'Width', + height: 'Height', + backgroundColor: 'Background Color', + animationStart: 'Animation Start', + valueDesc: 'Current JSON Data', + loop: 'Loop', + auto: 'Auto', + onHover: 'On Hover', + singlePlay: 'Single Play', + endlessLoop: 'Endless Loop', + keepLastFrame: 'Keep Last Frame displayed', + }, + timeLine: { + titleColor: 'Title Color', + subTitleColor: 'Subtitle Color', + labelColor: 'Label Color', + value: 'Timeline Data', + mode: 'Display Order', + left: 'Content Right', + right: 'Content Left', + alternate: 'Alternate Content Order', + modeTooltip: + 'Set the Content to Appear Left/Right or Alternately on Both Sides of the Timeline', + reverse: 'Newest Events First', + pending: 'Pending Node Text', + pendingDescription: + 'When Set, Then a Last Node With the Text and a Waiting Indicator Will Be Displayed.', + defaultPending: 'Continuous Improvement', + clickTitleEvent: 'Click Title Event', + clickTitleEventDesc: 'Click Title Event', + Introduction: 'Introduction Keys', + helpTitle: 'Title of Timeline (Required)', + helpsubTitle: 'Subtitle of Timeline', + helpLabel: 'Label of Timeline, Used to Display Dates', + helpColor: 'Indicates Timeline Node Color', + helpDot: 'Rendering Timeline Nodes as Ant Design Icons', + helpTitleColor: 'Individually Control the Color of Node Title', + helpSubTitleColor: 'Individually Control the Color of Node Subtitle', + helpLabelColor: 'Individually Control the Color of Node Icon', + valueDesc: 'Data of Timeline', + clickedObjectDesc: 'Clicked Item Data', + clickedIndexDesc: 'Clicked Item Index', }, - // twenty-third part - - "comment": { - "value": "Comment List Data", - "showSendButton": "Allowing Comments", - "title": "Title", - "titledDefaultValue": "%d Comment in Total", - "placeholder": "Shift + Enter to Comment; Enter @ or # for Quick Input", - "placeholderDec": "Placeholder", - "buttonTextDec": "Button Title", - "buttonText": "Comment", - "mentionList": "Mention List Data", - "mentionListDec": "Key-Mention Keywords; Value-Mention List Data", - "userInfo": "User Info", - "dateErr": "Date Error", - "commentList": "Comment List", - "deletedItem": "Deleted Item", - "submitedItem": "Submitted Item", - "deleteAble": "Show Delete Button", - "Introduction": "Introduction Keys", - "helpUser": "User Info (Required)", - "helpname": "User Name (Required)", - "helpavatar": "Avatar URL (High Priority)", - "helpdisplayName": "Display Name (Low Priority)", - "helpvalue": "Comment Content", - "helpcreatedAt": "Create Date" - }, - "mention": { - "mentionList": "Mention List Data" - }, - "autoComplete": { - "value": "Auto Complete Value", - "checkedValueFrom": "Checked Value From", - "ignoreCase": "Search Ignore Case", - "searchLabelOnly": "Search Label Only", - "searchFirstPY": "Search First Pinyin", - "searchCompletePY": "Search Complete Pinyin", - "searchText": "Search Text", - "SectionDataName": "AutoComplete Data", - "valueInItems": "Value in Items", - "type": "Type", - "antDesign": "AntDesign", - "normal": "Normal", - "selectKey": "Key", - "selectLable": "Label", - "ComponentType": "Component Type", - "colorIcon": "Blue", - "grewIcon": "Grey", - "noneIcon": "None", - "small": "Small", - "large": "Large", - "componentSize": "Component Size", - "Introduction": "Introduction Keys", - "helpLabel": "Label", - "helpValue": "Value" - }, - "responsiveLayout": { - "column": "Columns", - "atLeastOneColumnError": "Responsive Layout Keeps at Least One Column", - "columnsPerRow": "Columns per Row", - "columnsSpacing": "Columns Spacing (px)", - "horizontal": "Horizontal", - "vertical": "Vertical", - "mobile": "Mobile", - "tablet": "Tablet", - "desktop": "Desktop", - "rowStyle": "Row Style", - "columnStyle": "Column Style", - "minWidth": "Min. Width", - "rowBreak": "Row Break", - "matchColumnsHeight": "Match Columns Height", - "rowLayout": "Row Layout", - "columnsLayout": "Columns Layout" - }, - "navLayout": { - "mode": "Mode", - "modeInline": "Inline", - "modeVertical": "Vertical", - "width": "Width", - "widthTooltip": "Pixel or Percentage, e.g. 520, 60%", - "navStyle": "Menu Style", - "navItemStyle": "Menu Item Style" - }, - - tour: { - section1Title: "Steps", - section1Subtitle: "Steps", - tooltipExampleHeader: "Example:", - tooltipSignatureHeader: "Signature:", + comment: { + value: 'Comment List Data', + showSendButton: 'Allowing Comments', + title: 'Title', + titledDefaultValue: '%d Comment in Total', + placeholder: 'Shift + Enter to Comment; Enter @ or # for Quick Input', + placeholderDec: 'Placeholder', + buttonTextDec: 'Button Title', + buttonText: 'Comment', + mentionList: 'Mention List Data', + mentionListDec: 'Key-Mention Keywords; Value-Mention List Data', + userInfo: 'User Info', + dateErr: 'Date Error', + commentList: 'Comment List', + deletedItem: 'Deleted Item', + submitedItem: 'Submitted Item', + deleteAble: 'Show Delete Button', + Introduction: 'Introduction Keys', + helpUser: 'User Info (Required)', + helpname: 'User Name (Required)', + helpavatar: 'Avatar URL (High Priority)', + helpdisplayName: 'Display Name (Low Priority)', + helpvalue: 'Comment Content', + helpcreatedAt: 'Create Date', + }, + mention: { + mentionList: 'Mention List Data', + }, + autoComplete: { + value: 'Auto Complete Value', + checkedValueFrom: 'Checked Value From', + ignoreCase: 'Search Ignore Case', + searchLabelOnly: 'Search Label Only', + searchFirstPY: 'Search First Pinyin', + searchCompletePY: 'Search Complete Pinyin', + searchText: 'Search Text', + SectionDataName: 'AutoComplete Data', + valueInItems: 'Value in Items', + type: 'Type', + antDesign: 'AntDesign', + normal: 'Normal', + selectKey: 'Key', + selectLable: 'Label', + ComponentType: 'Component Type', + colorIcon: 'Blue', + grewIcon: 'Grey', + noneIcon: 'None', + small: 'Small', + large: 'Large', + componentSize: 'Component Size', + Introduction: 'Introduction Keys', + helpLabel: 'Label', + helpValue: 'Value', + }, + responsiveLayout: { + column: 'Columns', + atLeastOneColumnError: 'Responsive Layout Keeps at Least One Column', + columnsPerRow: 'Columns per Row', + columnsSpacing: 'Columns Spacing (px)', + horizontal: 'Horizontal', + vertical: 'Vertical', + mobile: 'Mobile', + tablet: 'Tablet', + desktop: 'Desktop', + rowStyle: 'Row Style', + columnStyle: 'Column Style', + minWidth: 'Min. Width', + rowBreak: 'Row Break', + matchColumnsHeight: 'Match Columns Height', + rowLayout: 'Row Layout', + columnsLayout: 'Columns Layout', + }, + navLayout: { + mode: 'Mode', + modeInline: 'Inline', + modeVertical: 'Vertical', + width: 'Width', + widthTooltip: 'Pixel or Percentage, e.g. 520, 60%', + navStyle: 'Menu Style', + navItemStyle: 'Menu Item Style', + }, + + tour: { + section1Title: 'Steps', + section1Subtitle: 'Steps', + tooltipExampleHeader: 'Example:', + tooltipSignatureHeader: 'Signature:', options: { title: { - label: "Title", - placeholder: "Welcome", - tooltip: "The title of the step. Any HTML is valid here.", + label: 'Title', + placeholder: 'Welcome', + tooltip: 'The title of the step. Any HTML is valid here.', }, description: { - label: "Description", - placeholder: "Welcome to lowcoder!", - tooltip: "The description of the step. Any HTML is valid here.", + label: 'Description', + placeholder: 'Welcome to lowcoder!', + tooltip: 'The description of the step. Any HTML is valid here.', }, mask: { - label: "Mask", - tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.", - tooltipValidTypes: "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.", + label: 'Mask', + tooltip: + 'Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.', + tooltipValidTypes: + 'Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.', }, arrow: { - label: "Arrow", - tooltip: "Turns the arrow on and off or moves it to point at the center of the component, if desired, otherwise the arrow will always point near the top of the component.", - tooltipFunctionSignature: "boolean | { pointAtCenter: boolean }", + label: 'Arrow', + tooltip: + 'Turns the arrow on and off or moves it to point at the center of the component, if desired, otherwise the arrow will always point near the top of the component.', + tooltipFunctionSignature: 'boolean | { pointAtCenter: boolean }', }, type: { - label: "Type", - tooltip: "The type of tooltip, this affects the background color and text color. The colors can be controlled with the main tour styling section." + label: 'Type', + tooltip: + 'The type of tooltip, this affects the background color and text color. The colors can be controlled with the main tour styling section.', }, target: { - label: "Component", - tooltip: "The component you want to put the tooltip on, or leave it empty if you simply want a modal in the middle of the screen." + label: 'Component', + tooltip: + 'The component you want to put the tooltip on, or leave it empty if you simply want a modal in the middle of the screen.', }, coverImage: { - label: "Cover Image URI", - tooltip: "A URI for an image you would like to display with the step", - } + label: 'Cover Image URI', + tooltip: 'A URI for an image you would like to display with the step', + }, }, indicatorsRender: { - label: "Indicators Render", - tooltip: "Provides a custom indicator for which step you are on", - tooltipValidTypes: "Format is a function that accepts two args, `current` and `total` and returns a ReactNode", - tooltipFunctionSignatureHeader: "Signature:", - tooltipFunctionSignature: "(current: number, total: number) => ReactNode", - tooltipExampleHeader: "Example:", + label: 'Indicators Render', + tooltip: 'Provides a custom indicator for which step you are on', + tooltipValidTypes: + 'Format is a function that accepts two args, `current` and `total` and returns a ReactNode', + tooltipFunctionSignatureHeader: 'Signature:', + tooltipFunctionSignature: '(current: number, total: number) => ReactNode', + tooltipExampleHeader: 'Example:', }, disabledInteraction: { - label: "Disable Interaction", - tooltip: "Disable interaction in the highlighted area." + label: 'Disable Interaction', + tooltip: 'Disable interaction in the highlighted area.', }, mask: { - label: "Mask", - tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour. Can be overridden at the step level.", - tooltipValidTypes: "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.", + label: 'Mask', + tooltip: + 'Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour. Can be overridden at the step level.', + tooltipValidTypes: + 'Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.', }, placement: { - label: "Placement", - tooltip: "Position of the guide card relative to the target element. Can be overridden at the step level.", - tooltipValidOptions: "Valid options", - tooltipValidOptionsAbove: "Above the component:", - tooltipValidOptionsLeft: "To the left of the component:", - tooltipValidOptionsRight: "To the right of the component:", - tooltipValidOptionsBelow: "Below the component:", - tooltipValidOptionsOnTop: "On top of the component:", + label: 'Placement', + tooltip: + 'Position of the guide card relative to the target element. Can be overridden at the step level.', + tooltipValidOptions: 'Valid options', + tooltipValidOptionsAbove: 'Above the component:', + tooltipValidOptionsLeft: 'To the left of the component:', + tooltipValidOptionsRight: 'To the right of the component:', + tooltipValidOptionsBelow: 'Below the component:', + tooltipValidOptionsOnTop: 'On top of the component:', }, arrow: { - label: "Arrow", - tooltip: "Turns the arrow on and off or moves it to point at the center of the component, if desired, otherwise the arrow will always point near the top of the component. Can be overridden at the step level.", - tooltipFunctionSignature: "boolean | { pointAtCenter: boolean }", + label: 'Arrow', + tooltip: + 'Turns the arrow on and off or moves it to point at the center of the component, if desired, otherwise the arrow will always point near the top of the component. Can be overridden at the step level.', + tooltipFunctionSignature: 'boolean | { pointAtCenter: boolean }', }, type: { - label: "Type", - tooltip: "The type of tooltip, this affects the background color and text color. The colors can be controlled with the main tour styling section. Can be overridden at the step level." + label: 'Type', + tooltip: + 'The type of tooltip, this affects the background color and text color. The colors can be controlled with the main tour styling section. Can be overridden at the step level.', }, }, docUrls: { - docHome: "https://docs.lowcoder.cloud/", - apiDocHome: "https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/lowcoder-open-rest-api", - components: "https://app.lowcoder.cloud/components/{compType}", - module: "https://docs.lowcoder.cloud/lowcoder-documentation/build-applications/create-a-new-app/modules", - optionList: "", - terms: "https://lowcoder.cloud/terms", - privacy: "https://lowcoder.cloud/privacy", - aboutUs: "https://lowcoder.cloud/about", - changeLog: "https://github.com/lowcoder-org/lowcoder/releases", - introVideo: "", - devNpmPlugin: "https://github.com/lowcoder-org/lowcoder-create-component-plugin", - devNpmPluginText: "How to develop npm plugin", - useHost: "https://docs.lowcoder.cloud/setup-and-run/self-hosting/access-local-database-or-api", - eventHandlerSlowdown: "https://docs.lowcoder.cloud/build-applications/app-interaction/event-handlers", - thirdLib: "https://docs.lowcoder.cloud/lowcoder-extension/use-third-party-libraries-in-apps", - thirdLibUrlText: "Use third-party libraries", + docHome: 'https://docs.lowcoder.cloud/', + apiDocHome: + 'https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/lowcoder-open-rest-api', + components: 'https://app.lowcoder.cloud/components/{compType}', + module: + 'https://docs.lowcoder.cloud/lowcoder-documentation/build-applications/create-a-new-app/modules', + optionList: '', + terms: 'https://lowcoder.cloud/terms', + privacy: 'https://lowcoder.cloud/privacy', + aboutUs: 'https://lowcoder.cloud/about', + changeLog: 'https://github.com/lowcoder-org/lowcoder/releases', + introVideo: '', + devNpmPlugin: + 'https://github.com/lowcoder-org/lowcoder-create-component-plugin', + devNpmPluginText: 'How to develop npm plugin', + useHost: + 'https://docs.lowcoder.cloud/setup-and-run/self-hosting/access-local-database-or-api', + eventHandlerSlowdown: + 'https://docs.lowcoder.cloud/build-applications/app-interaction/event-handlers', + thirdLib: + 'https://docs.lowcoder.cloud/lowcoder-extension/use-third-party-libraries-in-apps', + thirdLibUrlText: 'Use third-party libraries', }, datasourceTutorial: { - mysql: "", - mongodb: "", - postgres: "", - redis: "", - es: "", - smtp: "", - clickHouse: "", + mysql: '', + mongodb: '', + postgres: '', + redis: '', + es: '', + smtp: '', + clickHouse: '', }, queryTutorial: { - js: "", - transformer: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/transformers", - tempState: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/temporary-state", - dataResponder: "https://docs.lowcoder.cloud/lowcoder-documentation/business-logic-in-apps/write-javascript/data-responder", + js: '', + transformer: + 'https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/transformers', + tempState: + 'https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/temporary-state', + dataResponder: + 'https://docs.lowcoder.cloud/lowcoder-documentation/business-logic-in-apps/write-javascript/data-responder', }, customComponent: { - entryUrl: "https://sdk.lowcoder.cloud/custom_component.html", + entryUrl: 'https://sdk.lowcoder.cloud/custom_component.html', }, template: { - cloneUrl: "/apps/template-import/", + cloneUrl: '/apps/template-import/', }, lowcoderUrl: { - createIssue: "https://github.com/lowcoder-org/lowcoder/issues", - discord: "https://discord.com/invite/qMG9uTmAx2", + createIssue: 'https://github.com/lowcoder-org/lowcoder/issues', + discord: 'https://discord.com/invite/qMG9uTmAx2', }, - }; // const jsonString = JSON.stringify(en, null, 2); diff --git a/client/packages/lowcoder/src/index.ts b/client/packages/lowcoder/src/index.ts index 97fc259c0..81b7ab511 100644 --- a/client/packages/lowcoder/src/index.ts +++ b/client/packages/lowcoder/src/index.ts @@ -1,15 +1,16 @@ -import "core-js/actual"; -import ResizeObserver from "resize-observer-polyfill"; -import numbro from "numbro"; -import Papa from "papaparse"; -import * as uuid from "uuid"; -import "regenerator-runtime/runtime"; -import "virtual:globals"; -import { debug } from "loglevel"; -import { bootstrap } from "./app"; -import "./index.less"; -import log from "loglevel"; -import "antd-mobile/es/global"; +import 'core-js/actual'; +import ResizeObserver from 'resize-observer-polyfill'; +import numbro from 'numbro'; +import Papa from 'papaparse'; +import * as uuid from 'uuid'; +import 'regenerator-runtime/runtime'; +import 'virtual:globals'; +import {debug} from 'loglevel'; +import {bootstrap} from './app'; +import './index.less'; +import log from 'loglevel'; +import 'antd-mobile/es/global'; +import 'animate.css'; window.numbro = numbro; window.Papa = Papa; @@ -22,7 +23,7 @@ if (!window.ResizeObserver) { function hideLoading() { // hide loading - const node = document.getElementById("loading"); + const node = document.getElementById('loading'); if (node) { // @ts-ignore node.style.opacity = 0; @@ -34,7 +35,7 @@ debug(`REACT_APP_LANGUAGES:, ${REACT_APP_LANGUAGES}`); debug(`REACT_APP_API_HOST:, ${REACT_APP_API_HOST}`); debug(`REACT_APP_ENV:, ${REACT_APP_ENV}`); debug(`REACT_APP_LOG_LEVEL:, ${REACT_APP_LOG_LEVEL}`); - + try { bootstrap(); hideLoading(); From 7c438a63f855470a021f1cdafd12dbe527fd09c5 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Tue, 14 May 2024 00:44:17 +0500 Subject: [PATCH 002/155] animation package --- client/packages/lowcoder/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json index 62560576b..269e4beef 100644 --- a/client/packages/lowcoder/package.json +++ b/client/packages/lowcoder/package.json @@ -36,6 +36,7 @@ "@types/react-signature-canvas": "^1.0.2", "@types/react-test-renderer": "^18.0.0", "@types/react-virtualized": "^9.21.21", + "animate.css": "^4.1.1", "antd": "5.13.2", "axios": "^1.6.2", "buffer": "^6.0.3", From 664a0113d9458dd6e0fd4392c440ad87f625c93e Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 14 May 2024 19:12:03 +0500 Subject: [PATCH 003/155] animation configurations --- .../src/comps/controls/labelControl.tsx | 132 +-- .../src/comps/controls/styleControl.tsx | 410 +++---- .../comps/controls/styleControlConstants.tsx | 1004 ++++++++--------- 3 files changed, 784 insertions(+), 762 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 7c422c67d..97db223a6 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -1,29 +1,29 @@ -import {trans} from 'i18n'; -import {green, red, yellow} from '@ant-design/colors/es'; -import {FormItemProps} from 'antd/es/form/FormItem'; -import {BoolControl} from 'comps/controls/boolControl'; -import {NumberControl, StringControl} from 'comps/controls/codeControl'; -import {dropdownControl} from 'comps/controls/dropdownControl'; -import {withDefault} from 'comps/generators'; -import {MultiCompBuilder} from 'comps/generators/multi'; -import {labelCss, Section, Tooltip, UnderlineCss} from 'lowcoder-design'; -import {ValueFromOption} from 'lowcoder-design'; -import {isEmpty} from 'lodash'; -import {Fragment, ReactNode} from 'react'; -import styled, {css} from 'styled-components'; -import {AlignLeft} from 'lowcoder-design'; -import {AlignRight} from 'lowcoder-design'; -import {StarIcon} from 'lowcoder-design'; +import { trans } from "i18n"; +import { green, red, yellow } from "@ant-design/colors/es"; +import { FormItemProps } from "antd/es/form/FormItem"; +import { BoolControl } from "comps/controls/boolControl"; +import { NumberControl, StringControl } from "comps/controls/codeControl"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { withDefault } from "comps/generators"; +import { MultiCompBuilder } from "comps/generators/multi"; +import { labelCss, Section, Tooltip, UnderlineCss } from "lowcoder-design"; +import { ValueFromOption } from "lowcoder-design"; +import { isEmpty } from "lodash"; +import { Fragment, ReactNode } from "react"; +import styled, { css } from "styled-components"; +import { AlignLeft } from "lowcoder-design"; +import { AlignRight } from "lowcoder-design"; +import { StarIcon } from "lowcoder-design"; import { LabelStyleType, heightCalculator, widthCalculator, -} from './styleControlConstants'; +} from "./styleControlConstants"; type LabelViewProps = Pick< FormItemProps, - 'required' | 'help' | 'validateStatus' + "required" | "help" | "validateStatus" > & { children: ReactNode; style?: Record; @@ -51,7 +51,7 @@ function getStyle(style: any) { `; } -const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>` +const LabelViewWrapper = styled.div<{ $style: any; inputFieldStyle: any }>` ${(props) => { return ( props.$style && { @@ -74,13 +74,13 @@ const MainWrapper = styled.div<{ flex-grow: 1; width: 100%; margin-top: ${(props) => - props.$position === 'column' && props.$hasLabel ? '4px' : 0}; + props.$position === "column" && props.$hasLabel ? "4px" : 0}; height: ${(props) => - props.$position === 'column' && props.$hasLabel - ? 'calc(100% - 4px)' - : '100%'}; + props.$position === "column" && props.$hasLabel + ? "calc(100% - 4px)" + : "100%"}; display: flex; - align-items: ${(props) => (props.$position === 'row' ? 'center' : 'start')}; + align-items: ${(props) => (props.$position === "row" ? "center" : "start")}; flex-shrink: 0; `; @@ -92,9 +92,9 @@ const LabelWrapper = styled.div<{ display: flex; align-items: center; margin-right: 8px; - margin-bottom: ${(props) => (props.$position === 'row' ? 0 : '3.5px')}; - justify-content: ${(props) => (props.$align === 'left' ? 'start' : 'end')}; - max-width: ${(props) => (props.$position === 'row' ? '80%' : '100%')}; + margin-bottom: ${(props) => (props.$position === "row" ? 0 : "3.5px")}; + justify-content: ${(props) => (props.$align === "left" ? "start" : "end")}; + max-width: ${(props) => (props.$position === "row" ? "80%" : "100%")}; flex-shrink: 0; `; // ${(props) => props.$border && UnderlineCss}; @@ -103,7 +103,7 @@ const LabelWrapper = styled.div<{ const Label = styled.span<{ $border: boolean; $labelStyle: LabelStyleType; - $validateStatus: 'success' | 'warning' | 'error' | 'validating' | null; + $validateStatus: "success" | "warning" | "error" | "validating" | null; }>` ${labelCss}; font-family: ${(props) => props.$labelStyle.fontFamily}; @@ -113,11 +113,11 @@ const Label = styled.span<{ text-decoration: ${(props) => props.$labelStyle.textDecoration}; font-size: ${(props) => props.$labelStyle.textSize}; color: ${(props) => - !!props.$validateStatus && props?.$validateStatus === 'error' + !!props.$validateStatus && props?.$validateStatus === "error" ? props.$labelStyle.validate : props.$labelStyle.label} !important; ${(props) => - `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} + `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === "error" ? props.$labelStyle.validate : props.$labelStyle.border};`} border-radius:${(props) => props.$labelStyle.radius}; padding: ${(props) => props.$labelStyle.padding}; margin: ${(props) => props.$labelStyle.margin}; @@ -153,38 +153,38 @@ const TooltipWrapper = styled.span` `; const PositionOptions = [ - {label: trans('labelProp.left'), value: 'row'}, - {label: trans('labelProp.top'), value: 'column'}, + { label: trans("labelProp.left"), value: "row" }, + { label: trans("labelProp.top"), value: "column" }, ] as const; type PositionOptionsValue = ValueFromOption; const AlignOptions = [ - {label: , value: 'left'}, - {label: , value: 'right'}, + { label: , value: "left" }, + { label: , value: "right" }, ] as const; type AlignOptionsValue = ValueFromOption; const WidthUnitOptions = [ - {label: 'px', value: 'px'}, - {label: '%', value: '%'}, + { label: "px", value: "px" }, + { label: "%", value: "%" }, ]; function getLabelWidth(width: number, widthUnit: string): string { if (width <= 0 || isNaN(width)) { - return '0%'; + return "0%"; } return width + widthUnit; } export const LabelControl = (function () { const childrenMap = { - text: withDefault(StringControl, trans('label')), + text: withDefault(StringControl, trans("label")), tooltip: StringControl, hidden: BoolControl, width: withDefault(NumberControl, 33), - widthUnit: dropdownControl(WidthUnitOptions, '%'), - position: dropdownControl(PositionOptions, 'row'), - align: dropdownControl(AlignOptions, 'left'), + widthUnit: dropdownControl(WidthUnitOptions, "%"), + position: dropdownControl(PositionOptions, "row"), + align: dropdownControl(AlignOptions, "left"), }; return new MultiCompBuilder( @@ -208,12 +208,12 @@ export const LabelControl = (function () { width: widthCalculator( args && args.inputFieldStyle ? args?.inputFieldStyle?.margin - : '0px' + : "0px" ), height: heightCalculator( args && args.inputFieldStyle ? args?.inputFieldStyle?.margin - : '0px' + : "0px" ), }} > @@ -222,11 +222,11 @@ export const LabelControl = (function () { $align={props.align} style={{ width: - props.position === 'row' + props.position === "row" ? getLabelWidth(props.width, props.widthUnit) - : '100%', - maxWidth: props.position === 'row' ? '70%' : '100%', - fontSize: args && args.style ? args?.style?.textSize : '14px', + : "100%", + maxWidth: props.position === "row" ? "70%" : "100%", + fontSize: args && args.style ? args?.style?.textSize : "14px", }} $position={props.position} $hasToolTip={!!props.tooltip} @@ -243,7 +243,7 @@ export const LabelControl = (function () { placement="top" color="#2c2c2c" getPopupContainer={(node: any) => - node.closest('.react-grid-item') + node.closest(".react-grid-item") } > @@ -262,13 +262,13 @@ export const LabelControl = (function () { {args.children} @@ -278,16 +278,16 @@ export const LabelControl = (function () { {args.help && ( ( -
- {children.text.propertyView({label: trans('labelProp.text')})} - {children.tooltip.propertyView({label: trans('labelProp.tooltip')})} +
+ {children.text.propertyView({ label: trans("labelProp.text") })} + {children.tooltip.propertyView({ label: trans("labelProp.tooltip") })} {children.position.propertyView({ - label: trans('labelProp.position'), + label: trans("labelProp.position"), radioButton: true, })} {children.align.propertyView({ - label: trans('labelProp.align'), + label: trans("labelProp.align"), radioButton: true, })} - {children.position.getView() !== 'column' && + {children.position.getView() !== "column" && children.width.propertyView({ - label: trans('labelProp.width'), - tooltip: trans('labelProp.widthTooltip'), + label: trans("labelProp.width"), + tooltip: trans("labelProp.widthTooltip"), lastNode: children.widthUnit.propertyView({}), })}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index a6f5a6d6a..255dc0cd9 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -1,15 +1,15 @@ -import {default as Tooltip} from 'antd/es/tooltip'; +import { default as Tooltip } from "antd/es/tooltip"; import { getThemeDetailName, isThemeColorKey, ThemeDetail, -} from 'api/commonSettingApi'; -import {ControlItemCompBuilder} from 'comps/generators/controlCompBuilder'; -import {childrenToProps, ToConstructor} from 'comps/generators/multi'; -import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; -import {ThemeContext} from 'comps/utils/themeContext'; -import {trans} from 'i18n'; -import _ from 'lodash'; +} from "api/commonSettingApi"; +import { ControlItemCompBuilder } from "comps/generators/controlCompBuilder"; +import { childrenToProps, ToConstructor } from "comps/generators/multi"; +import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; +import { ThemeContext } from "comps/utils/themeContext"; +import { trans } from "i18n"; +import _ from "lodash"; import { controlItem, IconReset, @@ -27,17 +27,17 @@ import { BorderStyleIcon, BorderRadiusIcon, TextStyleIcon, -} from 'lowcoder-design'; -import {useContext} from 'react'; -import styled from 'styled-components'; -import {useIsMobile} from 'util/hooks'; +} from "lowcoder-design"; +import { useContext } from "react"; +import styled from "styled-components"; +import { useIsMobile } from "util/hooks"; import { CSSCodeControl, ObjectControl, RadiusControl, StringControl, -} from './codeControl'; -import {ColorControl} from './colorControl'; +} from "./codeControl"; +import { ColorControl } from "./colorControl"; import { defaultTheme, DepColorConfig, @@ -72,167 +72,167 @@ import { TextTransformConfig, TextDecorationConfig, borderStyleConfig, -} from './styleControlConstants'; -import {faTextWidth} from '@fortawesome/free-solid-svg-icons'; -import appSelectControl from './appSelectControl'; +} from "./styleControlConstants"; +import { faTextWidth } from "@fortawesome/free-solid-svg-icons"; +import appSelectControl from "./appSelectControl"; function isSimpleColorConfig( config: SingleColorConfig ): config is SimpleColorConfig { - return config.hasOwnProperty('color'); + return config.hasOwnProperty("color"); } function isDepColorConfig(config: SingleColorConfig): config is DepColorConfig { - return config.hasOwnProperty('depName') || config.hasOwnProperty('depTheme'); + return config.hasOwnProperty("depName") || config.hasOwnProperty("depTheme"); } function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig { - return config.hasOwnProperty('radius'); + return config.hasOwnProperty("radius"); } function isBorderWidthConfig( config: SingleColorConfig ): config is BorderWidthConfig { - return config.hasOwnProperty('borderWidth'); + return config.hasOwnProperty("borderWidth"); } function isRotationConfig(config: SingleColorConfig): config is RotationConfig { - return config.hasOwnProperty('rotation'); + return config.hasOwnProperty("rotation"); } function isBackgroundImageConfig( config: SingleColorConfig ): config is BackgroundImageConfig { - return config.hasOwnProperty('backgroundImage'); + return config.hasOwnProperty("backgroundImage"); } function isBackgroundImageRepeatConfig( config: SingleColorConfig ): config is BackgroundImageRepeatConfig { - return config.hasOwnProperty('backgroundImageRepeat'); + return config.hasOwnProperty("backgroundImageRepeat"); } function isBackgroundImageSizeConfig( config: SingleColorConfig ): config is BackgroundImageSizeConfig { - return config.hasOwnProperty('backgroundImageSize'); + return config.hasOwnProperty("backgroundImageSize"); } function isBackgroundImagePositionConfig( config: SingleColorConfig ): config is BackgroundImagePositionConfig { - return config.hasOwnProperty('backgroundImagePosition'); + return config.hasOwnProperty("backgroundImagePosition"); } function isBackgroundImageOriginConfig( config: SingleColorConfig ): config is BackgroundImageOriginConfig { - return config.hasOwnProperty('backgroundImageOrigin'); + return config.hasOwnProperty("backgroundImageOrigin"); } function isHeaderBackgroundImageConfig( config: SingleColorConfig ): config is HeaderBackgroundImageConfig { - return config.hasOwnProperty('headerBackgroundImage'); + return config.hasOwnProperty("headerBackgroundImage"); } function isHeaderBackgroundImageRepeatConfig( config: SingleColorConfig ): config is HeaderBackgroundImageRepeatConfig { - return config.hasOwnProperty('headerBackgroundImageRepeat'); + return config.hasOwnProperty("headerBackgroundImageRepeat"); } function isHeaderBackgroundImageSizeConfig( config: SingleColorConfig ): config is HeaderBackgroundImageSizeConfig { - return config.hasOwnProperty('headerBackgroundImageSize'); + return config.hasOwnProperty("headerBackgroundImageSize"); } function isHeaderBackgroundImagePositionConfig( config: SingleColorConfig ): config is HeaderBackgroundImagePositionConfig { - return config.hasOwnProperty('headerBackgroundImagePosition'); + return config.hasOwnProperty("headerBackgroundImagePosition"); } function isHeaderBackgroundImageOriginConfig( config: SingleColorConfig ): config is HeaderBackgroundImageOriginConfig { - return config.hasOwnProperty('headerBackgroundImageOrigin'); + return config.hasOwnProperty("headerBackgroundImageOrigin"); } function isFooterBackgroundImageConfig( config: SingleColorConfig ): config is FooterBackgroundImageConfig { - return config.hasOwnProperty('footerBackgroundImage'); + return config.hasOwnProperty("footerBackgroundImage"); } function isFooterBackgroundImageRepeatConfig( config: SingleColorConfig ): config is FooterBackgroundImageRepeatConfig { - return config.hasOwnProperty('footerBackgroundImageRepeat'); + return config.hasOwnProperty("footerBackgroundImageRepeat"); } function isFooterBackgroundImageSizeConfig( config: SingleColorConfig ): config is FooterBackgroundImageSizeConfig { - return config.hasOwnProperty('footerBackgroundImageSize'); + return config.hasOwnProperty("footerBackgroundImageSize"); } function isFooterBackgroundImagePositionConfig( config: SingleColorConfig ): config is FooterBackgroundImagePositionConfig { - return config.hasOwnProperty('footerBackgroundImagePosition'); + return config.hasOwnProperty("footerBackgroundImagePosition"); } function isFooterBackgroundImageOriginConfig( config: SingleColorConfig ): config is FooterBackgroundImageOriginConfig { - return config.hasOwnProperty('footerBackgroundImageOrigin'); + return config.hasOwnProperty("footerBackgroundImageOrigin"); } function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig { - return config.hasOwnProperty('textSize'); + return config.hasOwnProperty("textSize"); } function isTextWeightConfig( config: SingleColorConfig ): config is TextWeightConfig { - return config.hasOwnProperty('textWeight'); + return config.hasOwnProperty("textWeight"); } function isFontFamilyConfig( config: SingleColorConfig ): config is FontFamilyConfig { - return config.hasOwnProperty('fontFamily'); + return config.hasOwnProperty("fontFamily"); } function isFontStyleConfig( config: SingleColorConfig ): config is FontStyleConfig { - return config.hasOwnProperty('fontStyle'); + return config.hasOwnProperty("fontStyle"); } function isTextTransformConfig( config: SingleColorConfig ): config is TextTransformConfig { - return config.hasOwnProperty('textTransform'); + return config.hasOwnProperty("textTransform"); } function isTextDecorationConfig( config: SingleColorConfig ): config is TextDecorationConfig { - return config.hasOwnProperty('textDecoration'); + return config.hasOwnProperty("textDecoration"); } function isBorderStyleConfig( config: SingleColorConfig ): config is borderStyleConfig { - return config.hasOwnProperty('borderStyle'); + return config.hasOwnProperty("borderStyle"); } function isMarginConfig(config: SingleColorConfig): config is MarginConfig { - return config.hasOwnProperty('margin'); + return config.hasOwnProperty("margin"); } function isAnimationConfig( config: SingleColorConfig ): config is AnimationConfig { - return config.hasOwnProperty('animation'); + return config.hasOwnProperty("animation"); } function isPaddingConfig(config: SingleColorConfig): config is PaddingConfig { - return config.hasOwnProperty('padding'); + return config.hasOwnProperty("padding"); } // function styleControl(colorConfig: Array) { -type Names = T[number]['name']; +type Names = T[number]["name"]; export type StyleConfigType = { [K in Names]: string; }; @@ -515,7 +515,7 @@ function calcColors>( return; } if (!isEmptyAnimation(props[name]) && isAnimationConfig(config)) { - res[name] = 'bounce'; + res[name] = "bounce"; return; } if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) { @@ -537,78 +537,78 @@ function calcColors>( res[name] = themeWithDefault[config.radius]; } if (isBorderWidthConfig(config)) { - res[name] = '0px'; + res[name] = "0px"; } if (isRotationConfig(config)) { - res[name] = '0deg'; + res[name] = "0deg"; } if (isBackgroundImageConfig(config)) { - res[name] = ''; + res[name] = ""; } if (isBackgroundImageRepeatConfig(config)) { - res[name] = 'no-repeat'; + res[name] = "no-repeat"; } if (isBackgroundImageSizeConfig(config)) { - res[name] = 'cover'; + res[name] = "cover"; } if (isBackgroundImagePositionConfig(config)) { - res[name] = 'center'; + res[name] = "center"; } if (isBackgroundImageOriginConfig(config)) { - res[name] = 'padding-box'; + res[name] = "padding-box"; } if (isHeaderBackgroundImageConfig(config)) { - res[name] = ''; + res[name] = ""; } if (isHeaderBackgroundImageRepeatConfig(config)) { - res[name] = 'no-repeat'; + res[name] = "no-repeat"; } if (isHeaderBackgroundImageSizeConfig(config)) { - res[name] = 'cover'; + res[name] = "cover"; } if (isHeaderBackgroundImagePositionConfig(config)) { - res[name] = 'center'; + res[name] = "center"; } if (isHeaderBackgroundImageOriginConfig(config)) { - res[name] = 'padding-box'; + res[name] = "padding-box"; } if (isFooterBackgroundImageConfig(config)) { - res[name] = ''; + res[name] = ""; } if (isFooterBackgroundImageRepeatConfig(config)) { - res[name] = 'no-repeat'; + res[name] = "no-repeat"; } if (isFooterBackgroundImageSizeConfig(config)) { - res[name] = 'cover'; + res[name] = "cover"; } if (isFooterBackgroundImagePositionConfig(config)) { - res[name] = 'center'; + res[name] = "center"; } if (isFooterBackgroundImageOriginConfig(config)) { - res[name] = 'padding-box'; + res[name] = "padding-box"; } if (isTextSizeConfig(config)) { // TODO: remove default textSize after added in theme in backend. - res[name] = themeWithDefault[config.textSize] || '14px'; + res[name] = themeWithDefault[config.textSize] || "14px"; } if (isTextWeightConfig(config)) { // TODO: remove default textWeight after added in theme in backend. - res[name] = themeWithDefault[config.textWeight] || 'normal'; + res[name] = themeWithDefault[config.textWeight] || "normal"; } if (isFontFamilyConfig(config)) { - res[name] = themeWithDefault[config.fontFamily] || 'sans-serif'; + res[name] = themeWithDefault[config.fontFamily] || "sans-serif"; } if (isFontStyleConfig(config)) { - res[name] = themeWithDefault[config.fontStyle] || 'normal'; + res[name] = themeWithDefault[config.fontStyle] || "normal"; } if (isTextTransformConfig(config)) { - res[name] = themeWithDefault[config.textTransform] || 'none'; + res[name] = themeWithDefault[config.textTransform] || "none"; } if (isTextDecorationConfig(config)) { - res[name] = themeWithDefault[config.textDecoration] || 'none'; + res[name] = themeWithDefault[config.textDecoration] || "none"; } if (isBorderStyleConfig(config)) { - res[name] = themeWithDefault[config.borderStyle] || 'dashed'; + res[name] = themeWithDefault[config.borderStyle] || "dashed"; } if (isMarginConfig(config)) { res[name] = themeWithDefault[config.margin]; @@ -632,7 +632,7 @@ function calcColors>( let depKey = config.depName ? res[config.depName] : themeWithDefault[config.depTheme!]; - if (bgColor && config.depTheme === 'canvas') { + if (bgColor && config.depTheme === "canvas") { depKey = bgColor; } res[name] = config.transformer( @@ -642,7 +642,7 @@ function calcColors>( ); } else if ( config?.depType === DEP_TYPE.SELF && - config.depTheme === 'canvas' && + config.depTheme === "canvas" && bgColor ) { res[name] = bgColor; @@ -757,6 +757,12 @@ const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` padding: 2px; color: #888; `; + +const AnimationPropIcon = styled(BorderWidthIcon)` + animation: bounce; + animation-delay: 2s; +`; + const RotationPropIcon = styled(RotationIcon)` margin: 0 8px 0 -3px; padding: 3px; @@ -803,43 +809,44 @@ const ResetIcon = styled(IconReset)` export function styleControl( colorConfigs: T ) { - type ColorMap = {[K in Names]: string}; + type ColorMap = { [K in Names]: string }; const childrenMap: any = {}; colorConfigs.map((config) => { const name: Names = config.name; if ( - name === 'radius' || - name === 'borderWidth' || - name === 'rotation' || - name === 'cardRadius' || - name === 'textSize' || - name === 'textWeight' || - name === 'textTransform' || - name === 'textDecoration' || - name === 'fontFamily' || - name === 'borderStyle' || - name === 'fontStyle' || - name === 'backgroundImage' || - name === 'backgroundImageRepeat' || - name === 'backgroundImageSize' || - name === 'backgroundImagePosition' || - name === 'backgroundImageOrigin' || - name === 'headerBackgroundImage' || - name === 'headerBackgroundImageRepeat' || - name === 'headerBackgroundImageSize' || - name === 'headerBackgroundImagePosition' || - name === 'headerBackgroundImageOrigin' || - name === 'footerBackgroundImage' || - name === 'footerBackgroundImageRepeat' || - name === 'footerBackgroundImageSize' || - name === 'footerBackgroundImagePosition' || - name === 'footerBackgroundImageOrigin' || - name === 'margin' || - name === 'padding' || - name === 'containerHeaderPadding' || - name === 'containerSiderPadding' || - name === 'containerFooterPadding' || - name === 'containerBodyPadding' + name === "radius" || + name === "borderWidth" || + name === "animation" || + name === "rotation" || + name === "cardRadius" || + name === "textSize" || + name === "textWeight" || + name === "textTransform" || + name === "textDecoration" || + name === "fontFamily" || + name === "borderStyle" || + name === "fontStyle" || + name === "backgroundImage" || + name === "backgroundImageRepeat" || + name === "backgroundImageSize" || + name === "backgroundImagePosition" || + name === "backgroundImageOrigin" || + name === "headerBackgroundImage" || + name === "headerBackgroundImageRepeat" || + name === "headerBackgroundImageSize" || + name === "headerBackgroundImagePosition" || + name === "headerBackgroundImageOrigin" || + name === "footerBackgroundImage" || + name === "footerBackgroundImageRepeat" || + name === "footerBackgroundImageSize" || + name === "footerBackgroundImagePosition" || + name === "footerBackgroundImageOrigin" || + name === "margin" || + name === "padding" || + name === "containerHeaderPadding" || + name === "containerSiderPadding" || + name === "containerFooterPadding" || + name === "containerBodyPadding" ) { childrenMap[name] = StringControl; } else { @@ -847,9 +854,9 @@ export function styleControl( } }); // [K in Names]: new (params: CompParams) => ColorControl; - const label = trans('prop.style'); + const label = trans("prop.style"); return new ControlItemCompBuilder( - childrenMap as ToConstructor<{[K in Names]: ColorControl}>, + childrenMap as ToConstructor<{ [K in Names]: ColorControl }>, (props) => { // const x = useContext(CompNameContext); const theme = useContext(ThemeContext); @@ -857,7 +864,7 @@ export function styleControl( return calcColors(props as ColorMap, colorConfigs, theme?.theme, bgColor); } ) - .setControlItemData({filterText: label, searchChild: true}) + .setControlItemData({ filterText: label, searchChild: true }) .setPropertyViewFn((children) => { const theme = useContext(ThemeContext); const bgColor = useContext(BackgroundColorContext); @@ -881,36 +888,37 @@ export function styleControl( colorConfigs.map((item) => { const name: Names = item.name; if ( - name === 'radius' || - name === 'margin' || - name === 'padding' || - name === 'containerHeaderPadding' || - name === 'containerSiderPadding' || - name === 'containerFooterPadding' || - name === 'containerBodyPadding' || - name === 'borderWidth' || - name === 'rotation' || - name === 'backgroundImage' || - name === 'backgroundImageRepeat' || - name === 'backgroundImageSize' || - name === 'backgroundImagePosition' || - name === 'backgroundImageOrigin' || - name === 'headerBackgroundImage' || - name === 'headerBackgroundImageRepeat' || - name === 'headerBackgroundImageSize' || - name === 'headerBackgroundImagePosition' || - name === 'headerBackgroundImageOrigin' || - name === 'footerBackgroundImage' || - name === 'footerBackgroundImageRepeat' || - name === 'footerBackgroundImageSize' || - name === 'footerBackgroundImagePosition' || - name === 'footerBackgroundImageOrigin' + name === "radius" || + name === "margin" || + name === "padding" || + name === "containerHeaderPadding" || + name === "containerSiderPadding" || + name === "containerFooterPadding" || + name === "containerBodyPadding" || + name === "borderWidth" || + name === "animation" || + name === "rotation" || + name === "backgroundImage" || + name === "backgroundImageRepeat" || + name === "backgroundImageSize" || + name === "backgroundImagePosition" || + name === "backgroundImageOrigin" || + name === "headerBackgroundImage" || + name === "headerBackgroundImageRepeat" || + name === "headerBackgroundImageSize" || + name === "headerBackgroundImagePosition" || + name === "headerBackgroundImageOrigin" || + name === "footerBackgroundImage" || + name === "footerBackgroundImageRepeat" || + name === "footerBackgroundImageSize" || + name === "footerBackgroundImagePosition" || + name === "footerBackgroundImageOrigin" ) { - children[name]?.dispatchChangeValueAction(''); + children[name]?.dispatchChangeValueAction(""); } else { children[name] && children[name].dispatch( - children[name].changeValueAction('') + children[name].changeValueAction("") ); } }); @@ -918,7 +926,7 @@ export function styleControl( > @@ -930,30 +938,30 @@ export function styleControl( .filter( (config) => !config.platform || - (isMobile && config.platform === 'mobile') || - (!isMobile && config.platform === 'pc') + (isMobile && config.platform === "mobile") || + (!isMobile && config.platform === "pc") ) .map((config, index) => { const name: Names = config.name; - let depMsg = (config as SimpleColorConfig)['color']; + let depMsg = (config as SimpleColorConfig)["color"]; if (isDepColorConfig(config)) { if (config.depType === DEP_TYPE.CONTRAST_TEXT) { - depMsg = trans('style.contrastText'); + depMsg = trans("style.contrastText"); } else if ( config.depType === DEP_TYPE.SELF && config.depTheme ) { depMsg = getThemeDetailName(config.depTheme); } else { - depMsg = trans('style.generated'); + depMsg = trans("style.generated"); } } return controlItem( - {filterText: config.label}, + { filterText: config.label },
- {name === 'radius' || - name === 'gap' || - name === 'cardRadius' + {name === "radius" || + name === "gap" || + name === "cardRadius" ? ( children[name] as InstanceType ).propertyView({ @@ -961,7 +969,7 @@ export function styleControl( preInputNode: , placeholder: props[name], }) - : name === 'borderWidth' + : name === "borderWidth" ? ( children[name] as InstanceType ).propertyView({ @@ -971,7 +979,7 @@ export function styleControl( ), placeholder: props[name], }) - : name === 'borderStyle' + : name === "borderStyle" ? ( children[name] as InstanceType< typeof StringControl @@ -983,31 +991,33 @@ export function styleControl( ), placeholder: props[name], }) - : name === 'margin' + : name === "animation" ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === 'padding' || - name === 'containerHeaderPadding' || - name === 'containerSiderPadding' || - name === 'containerFooterPadding' || - name === 'containerBodyPadding' + : name === "margin" ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === 'textSize' + : name === "padding" || + name === "containerHeaderPadding" || + name === "containerSiderPadding" || + name === "containerFooterPadding" || + name === "containerBodyPadding" ? ( children[name] as InstanceType< typeof StringControl @@ -1015,11 +1025,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textWeight' + : name === "textSize" ? ( children[name] as InstanceType< typeof StringControl @@ -1027,11 +1037,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontFamily' + : name === "textWeight" ? ( children[name] as InstanceType< typeof StringControl @@ -1039,11 +1049,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textDecoration' + : name === "fontFamily" ? ( children[name] as InstanceType< typeof StringControl @@ -1051,11 +1061,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textTransform' + : name === "textDecoration" ? ( children[name] as InstanceType< typeof StringControl @@ -1063,11 +1073,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontStyle' + : name === "textTransform" ? ( children[name] as InstanceType< typeof StringControl @@ -1075,14 +1085,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'backgroundImage' || - name === - 'headerBackgroundImage' || - name === 'footerBackgroundImage' + : name === "fontStyle" ? ( children[name] as InstanceType< typeof StringControl @@ -1090,16 +1097,14 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === - 'backgroundImageRepeat' || + : name === "backgroundImage" || name === - 'headerBackgroundImageRepeat' || - name === - 'footerBackgroundImageRepeat' + "headerBackgroundImage" || + name === "footerBackgroundImage" ? ( children[ name @@ -1109,11 +1114,16 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'rotation' + : name === + "backgroundImageRepeat" || + name === + "headerBackgroundImageRepeat" || + name === + "footerBackgroundImageRepeat" ? ( children[ name @@ -1123,18 +1133,34 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : children[name].propertyView({ - label: config.label, - panelDefaultColor: - props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - })} + : name === "rotation" + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) + : children[name].propertyView( + { + label: config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: depMsg, + } + )}
); })} @@ -1150,10 +1176,10 @@ export function useStyle( ) { const theme = useContext(ThemeContext); const bgColor = useContext(BackgroundColorContext); - type ColorMap = {[K in Names]: string}; + type ColorMap = { [K in Names]: string }; const props = {} as ColorMap; colorConfigs.forEach((config) => { - props[config.name as Names] = ''; + props[config.name as Names] = ""; }); return calcColors(props, colorConfigs, theme?.theme, bgColor); } diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index db82c3a0d..4f0534335 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1,9 +1,9 @@ -import {ThemeDetail} from 'api/commonSettingApi'; -import {darkenColor, isDarkColor, lightenColor, toHex} from 'lowcoder-design'; -import {trans} from 'i18n'; -import {StyleConfigType} from './styleControl'; +import { ThemeDetail } from "api/commonSettingApi"; +import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design"; +import { trans } from "i18n"; +import { StyleConfigType } from "./styleControl"; -type SupportPlatform = 'pc' | 'mobile'; +type SupportPlatform = "pc" | "mobile"; type CommonColorConfig = { readonly name: string; @@ -196,27 +196,27 @@ export type SingleColorConfig = | AnimationConfig; export const defaultTheme: ThemeDetail = { - primary: '#3377FF', - textDark: '#222222', - textLight: '#FFFFFF', - canvas: '#F5F5F6', - primarySurface: '#FFFFFF', - borderRadius: '4px', - margin: '3px', - padding: '3px', - gridColumns: '24', - textSize: '14px', - animation: 'bounce', + primary: "#3377FF", + textDark: "#222222", + textLight: "#FFFFFF", + canvas: "#F5F5F6", + primarySurface: "#FFFFFF", + borderRadius: "4px", + margin: "3px", + padding: "3px", + gridColumns: "24", + textSize: "14px", + animation: "bounce", }; -export const SURFACE_COLOR = '#FFFFFF'; -const SECOND_SURFACE_COLOR = '#D7D9E0'; -const ERROR_COLOR = '#F5222D'; -const SUCCESS_COLOR = '#079968'; +export const SURFACE_COLOR = "#FFFFFF"; +const SECOND_SURFACE_COLOR = "#D7D9E0"; +const ERROR_COLOR = "#F5222D"; +const SUCCESS_COLOR = "#079968"; export enum DEP_TYPE { - CONTRAST_TEXT = 'contrastText', - SELF = 'toSelf', + CONTRAST_TEXT = "contrastText", + SELF = "toSelf", } export function contrastText( @@ -224,7 +224,7 @@ export function contrastText( textDark: string, textLight: string ) { - return isDarkColor(color) && color !== '#00000000' ? textLight : textDark; + return isDarkColor(color) && color !== "#00000000" ? textLight : textDark; } // return similar background color @@ -277,7 +277,7 @@ function handleToUnchecked(color: string) { // return segmented background function handleToSegmentBackground(color: string) { if (toHex(color) === SURFACE_COLOR) { - return '#E1E3EB'; + return "#E1E3EB"; } return contrastBackground(color); } @@ -285,9 +285,9 @@ function handleToSegmentBackground(color: string) { // return table hover row background color export function handleToHoverRow(color: string) { if (isDarkColor(color)) { - return '#FFFFFF23'; + return "#FFFFFF23"; } else { - return '#00000007'; + return "#00000007"; } } @@ -299,9 +299,9 @@ export function handleToSelectedRow( if (toHex(color) === SURFACE_COLOR) { return `${toHex(primary)?.substring(0, 7)}16`; } else if (isDarkColor(color)) { - return '#FFFFFF33'; + return "#FFFFFF33"; } else { - return '#00000011'; + return "#00000011"; } } @@ -310,7 +310,7 @@ export function handleToHeadBg(color: string) { if (toHex(color) === SURFACE_COLOR) { return darkenColor(color, 0.06); } - if (toHex(color) === '#000000') { + if (toHex(color) === "#000000") { return SURFACE_COLOR; } if (isDarkColor(color)) { @@ -327,7 +327,7 @@ function handleToDividerText(color: string) { // return calendar select background color function handleCalendarSelectColor(color: string) { - return lightenColor(color, 0.3) + '4C'; + return lightenColor(color, 0.3) + "4C"; } // return lighten color @@ -338,7 +338,7 @@ function handleLightenColor(color: string) { // return calendar head button select background export function handleToCalendarHeadSelectBg(color: string) { if (toHex(color) === SURFACE_COLOR) { - return '#E1E3EB'; + return "#E1E3EB"; } return contrastBackground(color, 0.15); } @@ -346,9 +346,9 @@ export function handleToCalendarHeadSelectBg(color: string) { // return calendar today background export function handleToCalendarToday(color: string) { if (isDarkColor(color)) { - return '#FFFFFF33'; + return "#FFFFFF33"; } else { - return '#0000000c'; + return "#0000000c"; } } @@ -362,210 +362,210 @@ function handleCalendarText( } const TEXT = { - name: 'text', - label: trans('text'), - depName: 'background', + name: "text", + label: trans("text"), + depName: "background", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const STATIC_TEXT = { - name: 'staticText', - label: trans('style.staticText'), - depTheme: 'canvas', + name: "staticText", + label: trans("style.staticText"), + depTheme: "canvas", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const LABEL = { - name: 'label', - label: trans('label'), - depTheme: 'canvas', + name: "label", + label: trans("label"), + depTheme: "canvas", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const ACCENT = { - name: 'accent', - label: trans('style.accent'), - depTheme: 'primary', + name: "accent", + label: trans("style.accent"), + depTheme: "primary", depType: DEP_TYPE.SELF, transformer: toSelf, - platform: 'pc', + platform: "pc", } as const; const VALIDATE = { - name: 'validate', - label: trans('style.validate'), + name: "validate", + label: trans("style.validate"), color: ERROR_COLOR, } as const; const ACCENT_VALIDATE = [ACCENT, VALIDATE] as const; const ROTATION = { - name: 'rotation', - label: 'Rotation', - rotation: 'rotation', + name: "rotation", + label: "Rotation", + rotation: "rotation", } as const; const ANIMATION = { - name: 'animation', - label: trans('style.animation'), - animation: 'animation', + name: "animation", + label: trans("style.animation"), + animation: "animation", } as const; const BORDER = { - name: 'border', - label: trans('style.border'), - depName: 'background', + name: "border", + label: trans("style.border"), + depName: "background", transformer: backgroundToBorder, } as const; const RADIUS = { - name: 'radius', - label: trans('style.borderRadius'), - radius: 'borderRadius', + name: "radius", + label: trans("style.borderRadius"), + radius: "borderRadius", } as const; const BORDER_WIDTH = { - name: 'borderWidth', - label: trans('style.borderWidth'), - borderWidth: 'borderWidth', + name: "borderWidth", + label: trans("style.borderWidth"), + borderWidth: "borderWidth", } as const; const BACKGROUND_IMAGE = { - name: 'backgroundImage', - label: trans('style.backgroundImage'), - backgroundImage: 'backgroundImage', + name: "backgroundImage", + label: trans("style.backgroundImage"), + backgroundImage: "backgroundImage", } as const; const BACKGROUND_IMAGE_REPEAT = { - name: 'backgroundImageRepeat', - label: trans('style.backgroundImageRepeat'), - backgroundImageRepeat: 'backgroundImageRepeat', + name: "backgroundImageRepeat", + label: trans("style.backgroundImageRepeat"), + backgroundImageRepeat: "backgroundImageRepeat", } as const; const BACKGROUND_IMAGE_SIZE = { - name: 'backgroundImageSize', - label: trans('style.backgroundImageSize'), - backgroundImageSize: 'backgroundImageSize', + name: "backgroundImageSize", + label: trans("style.backgroundImageSize"), + backgroundImageSize: "backgroundImageSize", } as const; const BACKGROUND_IMAGE_POSITION = { - name: 'backgroundImagePosition', - label: trans('style.backgroundImagePosition'), - backgroundImagePosition: 'backgroundImagePosition', + name: "backgroundImagePosition", + label: trans("style.backgroundImagePosition"), + backgroundImagePosition: "backgroundImagePosition", } as const; const BACKGROUND_IMAGE_ORIGIN = { - name: 'backgroundImageOrigin', - label: trans('style.backgroundImageOrigin'), - backgroundImageOrigin: 'backgroundImageOrigin', + name: "backgroundImageOrigin", + label: trans("style.backgroundImageOrigin"), + backgroundImageOrigin: "backgroundImageOrigin", } as const; const MARGIN = { - name: 'margin', - label: trans('style.margin'), - margin: 'margin', + name: "margin", + label: trans("style.margin"), + margin: "margin", } as const; const PADDING = { - name: 'padding', - label: trans('style.padding'), - padding: 'padding', + name: "padding", + label: trans("style.padding"), + padding: "padding", } as const; const TEXT_SIZE = { - name: 'textSize', - label: trans('style.textSize'), - textSize: 'textSize', + name: "textSize", + label: trans("style.textSize"), + textSize: "textSize", } as const; const TEXT_WEIGHT = { - name: 'textWeight', - label: trans('style.textWeight'), - textWeight: 'textWeight', + name: "textWeight", + label: trans("style.textWeight"), + textWeight: "textWeight", } as const; const HOVER_BACKGROUND_COLOR = { - name: 'hoverBackground', - label: trans('style.hoverBackground'), - hoverBackground: 'hoverBackground', + name: "hoverBackground", + label: trans("style.hoverBackground"), + hoverBackground: "hoverBackground", }; const FONT_FAMILY = { - name: 'fontFamily', - label: trans('style.fontFamily'), - fontFamily: 'fontFamily', + name: "fontFamily", + label: trans("style.fontFamily"), + fontFamily: "fontFamily", } as const; const FONT_STYLE = { - name: 'fontStyle', - label: trans('style.fontStyle'), - fontStyle: 'fontStyle', + name: "fontStyle", + label: trans("style.fontStyle"), + fontStyle: "fontStyle", } as const; const CONTAINER_HEADER_PADDING = { - name: 'containerHeaderPadding', - label: trans('style.containerHeaderPadding'), - containerHeaderPadding: 'padding', + name: "containerHeaderPadding", + label: trans("style.containerHeaderPadding"), + containerHeaderPadding: "padding", } as const; const CONTAINER_SIDER_PADDING = { - name: 'containerSiderPadding', - label: trans('style.containerSiderPadding'), - containerSiderPadding: 'padding', + name: "containerSiderPadding", + label: trans("style.containerSiderPadding"), + containerSiderPadding: "padding", } as const; const CONTAINER_FOOTER_PADDING = { - name: 'containerFooterPadding', - label: trans('style.containerFooterPadding'), - containerFooterPadding: 'padding', + name: "containerFooterPadding", + label: trans("style.containerFooterPadding"), + containerFooterPadding: "padding", } as const; const CONTAINER_BODY_PADDING = { - name: 'containerBodyPadding', - label: trans('style.containerBodyPadding'), - containerBodyPadding: 'padding', + name: "containerBodyPadding", + label: trans("style.containerBodyPadding"), + containerBodyPadding: "padding", } as const; const TEXT_TRANSFORM = { - name: 'textTransform', - label: trans('style.textTransform'), - textTransform: 'textTransform', + name: "textTransform", + label: trans("style.textTransform"), + textTransform: "textTransform", } as const; const TEXT_DECORATION = { - name: 'textDecoration', - label: trans('style.textDecoration'), - textDecoration: 'textDecoration', + name: "textDecoration", + label: trans("style.textDecoration"), + textDecoration: "textDecoration", } as const; const BORDER_STYLE = { - name: 'borderStyle', - label: trans('style.borderStyle'), - borderStyle: 'borderStyle', + name: "borderStyle", + label: trans("style.borderStyle"), + borderStyle: "borderStyle", } as const; const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) => ({ - name: 'border', - label: trans('style.border'), + name: "border", + label: trans("style.border"), color, }) as const; const HEADER_BACKGROUND = { - name: 'headerBackground', - label: trans('style.headerBackground'), - depName: 'background', + name: "headerBackground", + label: trans("style.headerBackground"), + depName: "background", depType: DEP_TYPE.SELF, transformer: toSelf, } as const; const SIDER_BACKGROUND = { - name: 'siderBackground', - label: trans('style.siderBackground'), - depName: 'background', + name: "siderBackground", + label: trans("style.siderBackground"), + depName: "background", depType: DEP_TYPE.SELF, transformer: toSelf, } as const; @@ -604,22 +604,22 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ ]; const FILL = { - name: 'fill', - label: trans('style.fill'), - depTheme: 'primary', + name: "fill", + label: trans("style.fill"), + depTheme: "primary", depType: DEP_TYPE.SELF, transformer: toSelf, } as const; const TRACK = { - name: 'track', - label: trans('style.track'), + name: "track", + label: trans("style.track"), color: SECOND_SURFACE_COLOR, } as const; const SUCCESS = { - name: 'success', - label: trans('success'), + name: "success", + label: trans("success"), color: SUCCESS_COLOR, } as const; @@ -629,21 +629,21 @@ function getStaticBgBorderRadiusByBg( ) { return [ getStaticBackground(background), - platform ? {...BORDER, platform} : BORDER, - platform ? {...RADIUS, platform} : RADIUS, + platform ? { ...BORDER, platform } : BORDER, + platform ? { ...RADIUS, platform } : RADIUS, ] as const; } function getBgBorderRadiusByBg( - background: keyof ThemeDetail = 'primarySurface' + background: keyof ThemeDetail = "primarySurface" ) { return [getBackground(background), BORDER, RADIUS] as const; } -function getBackground(depTheme: keyof ThemeDetail = 'primarySurface') { +function getBackground(depTheme: keyof ThemeDetail = "primarySurface") { return { - name: 'background', - label: trans('style.background'), + name: "background", + label: trans("style.background"), depTheme: depTheme, depType: DEP_TYPE.SELF, transformer: toSelf, @@ -652,8 +652,8 @@ function getBackground(depTheme: keyof ThemeDetail = 'primarySurface') { function getStaticBackground(color: string) { return { - name: 'background', - label: trans('style.background'), + name: "background", + label: trans("style.background"), color, } as const; } @@ -686,14 +686,14 @@ function replaceAndMergeMultipleStyles( } export const ButtonStyle = [ - getBackground('primary'), + getBackground("primary"), ...STYLING_FIELDS_SEQUENCE, ] as const; export const ToggleButtonStyle = [ - getBackground('canvas'), + getBackground("canvas"), ...STYLING_FIELDS_SEQUENCE.map((style) => { - if (style.name === 'border') { + if (style.name === "border") { return { ...style, depType: DEP_TYPE.SELF, @@ -708,17 +708,17 @@ export const ToggleButtonStyle = [ export const TextStyle = [ { - name: 'background', - label: trans('style.background'), - depTheme: 'canvas', + name: "background", + label: trans("style.background"), + depTheme: "canvas", depType: DEP_TYPE.SELF, transformer: toSelf, }, ...STYLING_FIELDS_SEQUENCE, { - name: 'links', - label: trans('style.links'), - depTheme: 'primary', + name: "links", + label: trans("style.links"), + depTheme: "primary", depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -726,9 +726,9 @@ export const TextStyle = [ export const MarginStyle = [ { - name: 'margin', - label: trans('style.margin'), - margin: 'margin', + name: "margin", + label: trans("style.margin"), + margin: "margin", }, ]; @@ -742,29 +742,29 @@ export const ContainerStyle = [ MARGIN, PADDING, { - name: 'backgroundImage', - label: trans('style.backgroundImage'), - backgroundImage: 'backgroundImage', + name: "backgroundImage", + label: trans("style.backgroundImage"), + backgroundImage: "backgroundImage", }, { - name: 'backgroundImageRepeat', - label: trans('style.backgroundImageRepeat'), - backgroundImageRepeat: 'backgroundImageRepeat', + name: "backgroundImageRepeat", + label: trans("style.backgroundImageRepeat"), + backgroundImageRepeat: "backgroundImageRepeat", }, { - name: 'backgroundImageSize', - label: trans('style.backgroundImageSize'), - backgroundImageSize: 'backgroundImageSize', + name: "backgroundImageSize", + label: trans("style.backgroundImageSize"), + backgroundImageSize: "backgroundImageSize", }, { - name: 'backgroundImagePosition', - label: trans('style.backgroundImagePosition'), - backgroundImagePosition: 'backgroundImagePosition', + name: "backgroundImagePosition", + label: trans("style.backgroundImagePosition"), + backgroundImagePosition: "backgroundImagePosition", }, { - name: 'backgroundImageOrigin', - label: trans('style.backgroundImageOrigin'), - backgroundImageOrigin: 'backgroundImageOrigin', + name: "backgroundImageOrigin", + label: trans("style.backgroundImageOrigin"), + backgroundImageOrigin: "backgroundImageOrigin", }, ] as const; @@ -772,29 +772,29 @@ export const ContainerHeaderStyle = [ CONTAINER_HEADER_PADDING, HEADER_BACKGROUND, { - name: 'headerBackgroundImage', - label: trans('style.backgroundImage'), - headerBackgroundImage: 'headerBackgroundImage', + name: "headerBackgroundImage", + label: trans("style.backgroundImage"), + headerBackgroundImage: "headerBackgroundImage", }, { - name: 'headerBackgroundImageRepeat', - label: trans('style.backgroundImageRepeat'), - headerBackgroundImageRepeat: 'headerBackgroundImageRepeat', + name: "headerBackgroundImageRepeat", + label: trans("style.backgroundImageRepeat"), + headerBackgroundImageRepeat: "headerBackgroundImageRepeat", }, { - name: 'headerBackgroundImageSize', - label: trans('style.backgroundImageSize'), - headerBackgroundImageSize: 'headerBackgroundImageSize', + name: "headerBackgroundImageSize", + label: trans("style.backgroundImageSize"), + headerBackgroundImageSize: "headerBackgroundImageSize", }, { - name: 'headerBackgroundImagePosition', - label: trans('style.backgroundImagePosition'), - headerBackgroundImagePosition: 'headerBackgroundImagePosition', + name: "headerBackgroundImagePosition", + label: trans("style.backgroundImagePosition"), + headerBackgroundImagePosition: "headerBackgroundImagePosition", }, { - name: 'headerBackgroundImageOrigin', - label: trans('style.backgroundImageOrigin'), - headerBackgroundImageOrigin: 'headerBackgroundImageOrigin', + name: "headerBackgroundImageOrigin", + label: trans("style.backgroundImageOrigin"), + headerBackgroundImageOrigin: "headerBackgroundImageOrigin", }, ] as const; @@ -802,116 +802,116 @@ export const ContainerSiderStyle = [ CONTAINER_SIDER_PADDING, SIDER_BACKGROUND, { - name: 'siderBackgroundImage', - label: trans('style.backgroundImage'), - siderBackgroundImage: 'siderBackgroundImage', + name: "siderBackgroundImage", + label: trans("style.backgroundImage"), + siderBackgroundImage: "siderBackgroundImage", }, { - name: 'siderBackgroundImageRepeat', - label: trans('style.backgroundImageRepeat'), - siderBackgroundImageRepeat: 'siderBackgroundImageRepeat', + name: "siderBackgroundImageRepeat", + label: trans("style.backgroundImageRepeat"), + siderBackgroundImageRepeat: "siderBackgroundImageRepeat", }, { - name: 'siderBackgroundImageSize', - label: trans('style.backgroundImageSize'), - siderBackgroundImageSize: 'siderBackgroundImageSize', + name: "siderBackgroundImageSize", + label: trans("style.backgroundImageSize"), + siderBackgroundImageSize: "siderBackgroundImageSize", }, { - name: 'siderBackgroundImagePosition', - label: trans('style.backgroundImagePosition'), - siderBackgroundImagePosition: 'siderBackgroundImagePosition', + name: "siderBackgroundImagePosition", + label: trans("style.backgroundImagePosition"), + siderBackgroundImagePosition: "siderBackgroundImagePosition", }, { - name: 'siderBackgroundImageOrigin', - label: trans('style.backgroundImageOrigin'), - siderBackgroundImageOrigin: 'siderBackgroundImageOrigin', + name: "siderBackgroundImageOrigin", + label: trans("style.backgroundImageOrigin"), + siderBackgroundImageOrigin: "siderBackgroundImageOrigin", }, ] as const; export const ContainerBodyStyle = [ CONTAINER_BODY_PADDING, { - name: 'background', - label: trans('style.background'), - depName: 'background', + name: "background", + label: trans("style.background"), + depName: "background", depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: 'backgroundImage', - label: trans('style.backgroundImage'), - backgroundImage: 'backgroundImage', + name: "backgroundImage", + label: trans("style.backgroundImage"), + backgroundImage: "backgroundImage", }, { - name: 'backgroundImageRepeat', - label: trans('style.backgroundImageRepeat'), - backgroundImageRepeat: 'backgroundImageRepeat', + name: "backgroundImageRepeat", + label: trans("style.backgroundImageRepeat"), + backgroundImageRepeat: "backgroundImageRepeat", }, { - name: 'backgroundImageSize', - label: trans('style.backgroundImageSize'), - backgroundImageSize: 'backgroundImageSize', + name: "backgroundImageSize", + label: trans("style.backgroundImageSize"), + backgroundImageSize: "backgroundImageSize", }, { - name: 'backgroundImagePosition', - label: trans('style.backgroundImagePosition'), - backgroundImagePosition: 'backgroundImagePosition', + name: "backgroundImagePosition", + label: trans("style.backgroundImagePosition"), + backgroundImagePosition: "backgroundImagePosition", }, { - name: 'backgroundImageOrigin', - label: trans('style.backgroundImageOrigin'), - backgroundImageOrigin: 'backgroundImageOrigin', + name: "backgroundImageOrigin", + label: trans("style.backgroundImageOrigin"), + backgroundImageOrigin: "backgroundImageOrigin", }, ] as const; export const ContainerFooterStyle = [ CONTAINER_FOOTER_PADDING, { - name: 'footerBackground', - label: trans('style.background'), - depName: 'background', + name: "footerBackground", + label: trans("style.background"), + depName: "background", depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: 'footerBackgroundImage', - label: trans('style.backgroundImage'), - footerBackgroundImage: 'footerBackgroundImage', + name: "footerBackgroundImage", + label: trans("style.backgroundImage"), + footerBackgroundImage: "footerBackgroundImage", }, { - name: 'footerBackgroundImageRepeat', - label: trans('style.backgroundImageRepeat'), - footerBackgroundImageRepeat: 'footerBackgroundImageRepeat', + name: "footerBackgroundImageRepeat", + label: trans("style.backgroundImageRepeat"), + footerBackgroundImageRepeat: "footerBackgroundImageRepeat", }, { - name: 'footerBackgroundImageSize', - label: trans('style.backgroundImageSize'), - footerBackgroundImageSize: 'footerBackgroundImageSize', + name: "footerBackgroundImageSize", + label: trans("style.backgroundImageSize"), + footerBackgroundImageSize: "footerBackgroundImageSize", }, { - name: 'footerBackgroundImagePosition', - label: trans('style.backgroundImagePosition'), - footerBackgroundImagePosition: 'footerBackgroundImagePosition', + name: "footerBackgroundImagePosition", + label: trans("style.backgroundImagePosition"), + footerBackgroundImagePosition: "footerBackgroundImagePosition", }, { - name: 'footerBackgroundImageOrigin', - label: trans('style.backgroundImageOrigin'), - footerBackgroundImageOrigin: 'footerBackgroundImageOrigin', + name: "footerBackgroundImageOrigin", + label: trans("style.backgroundImageOrigin"), + footerBackgroundImageOrigin: "footerBackgroundImageOrigin", }, ] as const; export const SliderStyle = [ FILL, { - name: 'thumbBorder', - label: trans('style.thumbBorder'), - depName: 'fill', + name: "thumbBorder", + label: trans("style.thumbBorder"), + depName: "fill", depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: 'thumb', - label: trans('style.thumb'), + name: "thumb", + label: trans("style.thumb"), color: SURFACE_COLOR, }, TRACK, @@ -936,9 +936,9 @@ export const ColorPickerStyle = [ export const AvatarStyle = [ { - name: 'background', - label: trans('avatarComp.avatarBackground'), - color: '#bfbfbf', + name: "background", + label: trans("avatarComp.avatarBackground"), + color: "#bfbfbf", }, FILL, ] as const; @@ -955,18 +955,18 @@ export const avatarLabelStyle = [ export const avatarGroupStyle = [ { - name: 'fill', - label: trans('style.fill'), - color: '#FFFFFF', + name: "fill", + label: trans("style.fill"), + color: "#FFFFFF", }, - getBackground('primary'), + getBackground("primary"), ] as const; export const BadgeStyle = [ { - name: 'badgeColor', - label: trans('floatButton.badgeColor'), - color: '#ff4d4f', + name: "badgeColor", + label: trans("floatButton.badgeColor"), + color: "#ff4d4f", }, ] as const; @@ -983,16 +983,16 @@ export const TransferStyle = [ ] as const; export const CardStyle = [ - getStaticBackground('#ffffff'), + getStaticBackground("#ffffff"), { - name: 'IconColor', - label: trans('card.IconColor'), - color: '#000000', + name: "IconColor", + label: trans("card.IconColor"), + color: "#000000", }, { - name: 'activateColor', - label: trans('card.hoverColor'), - depTheme: 'primary', + name: "activateColor", + label: trans("card.hoverColor"), + depTheme: "primary", depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1006,46 +1006,42 @@ export const CardHeaderStyle = [ ] as const; export const timerStyle = [ - getBackground('primarySurface'), + getBackground("primarySurface"), ...STYLING_FIELDS_SEQUENCE, ] as const; export const startButtonStyle = [ - getBackground('primarySurface'), + getBackground("primarySurface"), ...STYLING_FIELDS_SEQUENCE, ] as const; // end export const LabelStyle = [ - ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter( - (style) => style.name !== 'radius' && style.name !== 'background' + ...replaceAndMergeMultipleStyles([...InputLikeStyle], "text", [LABEL]).filter( + (style) => style.name !== "radius" && style.name !== "background" ), ]; export const InputFieldStyle = [ getStaticBackground(SURFACE_COLOR), { - name: 'animation', - label: trans('style.animation'), - animation: 'animation', - depTheme: 'primary', - depType: DEP_TYPE.SELF, - depName: 'animation', - transformer: toSelf, + name: "animation", + label: trans("style.animation"), + animation: "animation", }, ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; export const RatingStyle = [ { - name: 'checked', - label: trans('style.checked'), - color: '#FFD400', + name: "checked", + label: trans("style.checked"), + color: "#FFD400", }, { - name: 'unchecked', - label: trans('style.unchecked'), + name: "unchecked", + label: trans("style.unchecked"), color: SECOND_SURFACE_COLOR, }, MARGIN, @@ -1054,20 +1050,20 @@ export const RatingStyle = [ export const SwitchStyle = [ { - name: 'handle', - label: trans('style.handle'), + name: "handle", + label: trans("style.handle"), color: SURFACE_COLOR, }, { - name: 'unchecked', - label: trans('style.unchecked'), - depName: 'handle', + name: "unchecked", + label: trans("style.unchecked"), + depName: "handle", transformer: handleToUnchecked, }, { - name: 'checked', - label: trans('style.checked'), - depTheme: 'primary', + name: "checked", + label: trans("style.checked"), + depTheme: "primary", depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1076,41 +1072,41 @@ export const SwitchStyle = [ ] as const; export const SelectStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [ + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), ]), ...ACCENT_VALIDATE, ] as const; const multiSelectCommon = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [ + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), ]), { - name: 'tags', - label: trans('style.tags'), - color: '#F5F5F6', - platform: 'pc', + name: "tags", + label: trans("style.tags"), + color: "#F5F5F6", + platform: "pc", }, { - name: 'tagsText', - label: trans('style.tagsText'), - depName: 'tags', + name: "tagsText", + label: trans("style.tagsText"), + depName: "tags", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, - platform: 'pc', + platform: "pc", }, ] as const; export const MultiSelectStyle = [ ...multiSelectCommon, { - name: 'multiIcon', - label: trans('style.multiIcon'), - depTheme: 'primary', + name: "multiIcon", + label: trans("style.multiIcon"), + depTheme: "primary", depType: DEP_TYPE.SELF, transformer: toSelf, - platform: 'pc', + platform: "pc", }, ...ACCENT_VALIDATE, ] as const; @@ -1126,18 +1122,18 @@ export const TabContainerStyle = [ [ ...ContainerStyle.filter( (style) => - ['border', 'radius', 'f', 'margin', 'padding'].includes( + ["border", "radius", "f", "margin", "padding"].includes( style.name ) === false ), ...STYLING_FIELDS_SEQUENCE, ], - 'text', + "text", [ { - name: 'tabText', - label: trans('style.tabText'), - depName: 'headerBackground', + name: "tabText", + label: trans("style.tabText"), + depName: "headerBackground", depType: TEXT, transformer: toSelf, }, @@ -1159,7 +1155,7 @@ export const ModalStyle = [ ] as const; export const CascaderStyle = [ - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), TEXT, ACCENT, MARGIN, @@ -1169,36 +1165,36 @@ export const CascaderStyle = [ function checkAndUncheck() { return [ { - name: 'checkedBackground', - label: trans('style.checkedBackground'), - depTheme: 'primary', + name: "checkedBackground", + label: trans("style.checkedBackground"), + depTheme: "primary", depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: 'uncheckedBackground', - label: trans('style.uncheckedBackground'), + name: "uncheckedBackground", + label: trans("style.uncheckedBackground"), color: SURFACE_COLOR, }, { - name: 'uncheckedBorder', - label: trans('style.uncheckedBorder'), - depName: 'uncheckedBackground', + name: "uncheckedBorder", + label: trans("style.uncheckedBorder"), + depName: "uncheckedBackground", transformer: backgroundToBorder, }, ] as const; } export const CheckboxStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ STATIC_TEXT, VALIDATE, - ]).filter((style) => style.name !== 'border'), + ]).filter((style) => style.name !== "border"), ...checkAndUncheck(), { - name: 'checked', - label: trans('style.checked'), - depName: 'checkedBackground', + name: "checked", + label: trans("style.checked"), + depName: "checkedBackground", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1206,15 +1202,15 @@ export const CheckboxStyle = [ ] as const; export const RadioStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ STATIC_TEXT, VALIDATE, - ]).filter((style) => style.name !== 'border' && style.name !== 'radius'), + ]).filter((style) => style.name !== "border" && style.name !== "radius"), ...checkAndUncheck(), { - name: 'checked', - label: trans('style.checked'), - depName: 'uncheckedBackground', + name: "checked", + label: trans("style.checked"), + depName: "uncheckedBackground", depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1224,23 +1220,23 @@ export const RadioStyle = [ export const SegmentStyle = [ LABEL, ...STYLING_FIELDS_SEQUENCE.filter( - (style) => ['border', 'borderWidth'].includes(style.name) === false + (style) => ["border", "borderWidth"].includes(style.name) === false ), { - name: 'indicatorBackground', - label: trans('style.indicatorBackground'), + name: "indicatorBackground", + label: trans("style.indicatorBackground"), color: SURFACE_COLOR, }, { - name: 'background', - label: trans('style.background'), - depName: 'indicatorBackground', + name: "background", + label: trans("style.background"), + depName: "indicatorBackground", transformer: handleToSegmentBackground, }, { - name: 'text', - label: trans('text'), - depName: 'indicatorBackground', + name: "text", + label: trans("text"), + depName: "indicatorBackground", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1249,69 +1245,69 @@ export const SegmentStyle = [ export const StepsStyle = [ { - name: 'activeBackground', - label: trans('style.accent'), - depName: 'activeBackground', + name: "activeBackground", + label: trans("style.accent"), + depName: "activeBackground", transformer: handleToSegmentBackground, }, { - name: 'titleText', - label: trans('title'), - depName: 'background', + name: "titleText", + label: trans("title"), + depName: "background", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ...STYLING_FIELDS_SEQUENCE.filter( (style) => - ['background', 'textSize', 'textDecoration'].includes(style.name) === + ["background", "textSize", "textDecoration"].includes(style.name) === false ), getBackground(), { - name: 'backgroundImage', - label: trans('style.backgroundImage'), - backgroundImage: 'backgroundImage', + name: "backgroundImage", + label: trans("style.backgroundImage"), + backgroundImage: "backgroundImage", }, { - name: 'backgroundImageRepeat', - label: trans('style.backgroundImageRepeat'), - backgroundImageRepeat: 'backgroundImageRepeat', + name: "backgroundImageRepeat", + label: trans("style.backgroundImageRepeat"), + backgroundImageRepeat: "backgroundImageRepeat", }, { - name: 'backgroundImageSize', - label: trans('style.backgroundImageSize'), - backgroundImageSize: 'backgroundImageSize', + name: "backgroundImageSize", + label: trans("style.backgroundImageSize"), + backgroundImageSize: "backgroundImageSize", }, { - name: 'backgroundImagePosition', - label: trans('style.backgroundImagePosition'), - backgroundImagePosition: 'backgroundImagePosition', + name: "backgroundImagePosition", + label: trans("style.backgroundImagePosition"), + backgroundImagePosition: "backgroundImagePosition", }, { - name: 'backgroundImageOrigin', - label: trans('style.backgroundImageOrigin'), - backgroundImageOrigin: 'backgroundImageOrigin', + name: "backgroundImageOrigin", + label: trans("style.backgroundImageOrigin"), + backgroundImageOrigin: "backgroundImageOrigin", }, ] as const; const LinkTextStyle = [ { - name: 'text', - label: trans('text'), - depTheme: 'primary', + name: "text", + label: trans("text"), + depTheme: "primary", depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: 'hoverText', - label: 'Hover text', // trans("style.hoverRowBackground"), - depName: 'text', + name: "hoverText", + label: "Hover text", // trans("style.hoverRowBackground"), + depName: "text", transformer: handleToHoverLink, }, { - name: 'activeText', - label: 'Active text', // trans("style.hoverRowBackground"), - depName: 'text', + name: "activeText", + label: "Active text", // trans("style.hoverRowBackground"), + depName: "text", transformer: handleToHoverLink, }, ] as const; @@ -1329,9 +1325,9 @@ export const TableToolbarStyle = [ getBackground(), getStaticBorder(), { - name: 'toolbarText', - label: trans('style.toolbarText'), - depName: 'toolbarBackground', + name: "toolbarText", + label: trans("style.toolbarText"), + depName: "toolbarBackground", depType: DEP_TYPE.CONTRAST_TEXT, transformer: toSelf, }, @@ -1344,23 +1340,23 @@ export const TableHeaderStyle = [ FONT_STYLE, TEXT, getStaticBackground(SURFACE_COLOR), - getBackground('primarySurface'), + getBackground("primarySurface"), { - name: 'headerBackground', - label: trans('style.tableHeaderBackground'), - depName: 'background', + name: "headerBackground", + label: trans("style.tableHeaderBackground"), + depName: "background", transformer: handleToHeadBg, }, getStaticBorder(), { - name: 'borderWidth', - label: trans('style.borderWidth'), - borderWidth: 'borderWidth', + name: "borderWidth", + label: trans("style.borderWidth"), + borderWidth: "borderWidth", }, { - name: 'headerText', - label: trans('style.tableHeaderText'), - depName: 'headerBackground', + name: "headerText", + label: trans("style.tableHeaderText"), + depName: "headerBackground", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1375,29 +1371,29 @@ export const TableRowStyle = [ ...BG_STATIC_BORDER_RADIUS, getBackground(), { - name: 'selectedRowBackground', - label: trans('style.selectedRowBackground'), - depName: 'background', - depTheme: 'primary', + name: "selectedRowBackground", + label: trans("style.selectedRowBackground"), + depName: "background", + depTheme: "primary", transformer: handleToSelectedRow, }, { - name: 'hoverRowBackground', - label: trans('style.hoverRowBackground'), - depName: 'background', + name: "hoverRowBackground", + label: trans("style.hoverRowBackground"), + depName: "background", transformer: handleToHoverRow, }, { - name: 'alternateBackground', - label: trans('style.alternateRowBackground'), - depName: 'background', + name: "alternateBackground", + label: trans("style.alternateRowBackground"), + depName: "background", depType: DEP_TYPE.SELF, transformer: toSelf, }, ] as const; export const TableColumnStyle = [ - getStaticBackground('#00000000'), + getStaticBackground("#00000000"), getStaticBorder(), MARGIN, @@ -1414,15 +1410,15 @@ export const TableColumnLinkStyle = [...LinkTextStyle] as const; export const FileStyle = [ // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), getStaticBackground(SURFACE_COLOR), - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ - getStaticBorder('#00000000'), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [ + getStaticBorder("#00000000"), ]), // TEXT, ACCENT, MARGIN, PADDING ] as const; export const FileViewerStyle = [ - getStaticBackground('#FFFFFF'), - getStaticBorder('#00000000'), + getStaticBackground("#FFFFFF"), + getStaticBorder("#00000000"), RADIUS, MARGIN, PADDING, @@ -1431,7 +1427,7 @@ export const FileViewerStyle = [ export const IframeStyle = [ getBackground(), - getStaticBorder('#00000000'), + getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, @@ -1450,21 +1446,21 @@ export const DateTimeStyle = [ function handleToHoverLink(color: string) { if (isDarkColor(color)) { - return '#FFFFFF23'; + return "#FFFFFF23"; } else { - return '#00000007'; + return "#00000007"; } } export const LinkStyle = [ { - name: 'background', - label: trans('style.background'), - depTheme: 'canvas', + name: "background", + label: trans("style.background"), + depTheme: "canvas", depType: DEP_TYPE.SELF, transformer: toSelf, }, - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ ...LinkTextStyle, ]), ] as const; @@ -1476,11 +1472,11 @@ export const DividerStyle = [ color: darkenColor(SECOND_SURFACE_COLOR, 0.1), }, */ ...STYLING_FIELDS_SEQUENCE.map((style) => { - if (style.name === 'text') { + if (style.name === "text") { return { - name: 'text', - label: trans('text'), - depName: 'color', + name: "text", + label: trans("text"), + depName: "color", transformer: handleToDividerText, }; } @@ -1490,17 +1486,17 @@ export const DividerStyle = [ // Hidden border and borderWidth properties as AntD doesnt allow these properties for progress bar export const ProgressStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ { - name: 'text', - label: trans('text'), - depTheme: 'canvas', + name: "text", + label: trans("text"), + depTheme: "canvas", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ]).filter( (style) => - ['border', 'borderWidth', 'textTransform', 'textDecoration'].includes( + ["border", "borderWidth", "textTransform", "textDecoration"].includes( style.name ) === false ), @@ -1510,20 +1506,20 @@ export const ProgressStyle = [ ] as const; export const CircleProgressStyle = [ - ...ProgressStyle.filter((style) => style.name !== 'radius'), + ...ProgressStyle.filter((style) => style.name !== "radius"), ]; export const NavigationStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ { - name: 'text', - label: trans('text'), - depName: 'background', + name: "text", + label: trans("text"), + depName: "background", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ACCENT, - getStaticBackground('#FFFFFF00'), + getStaticBackground("#FFFFFF00"), ]), // { // name: "text", @@ -1545,7 +1541,7 @@ export const NavigationStyle = [ ] as const; export const ImageStyle = [ - getStaticBorder('#00000000'), + getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, @@ -1553,8 +1549,8 @@ export const ImageStyle = [ ] as const; export const IconStyle = [ - getStaticBackground('#00000000'), - getStaticBorder('#00000000'), + getStaticBackground("#00000000"), + getStaticBorder("#00000000"), FILL, RADIUS, BORDER_WIDTH, @@ -1569,9 +1565,9 @@ export const JsonSchemaFormStyle = BG_STATIC_BORDER_RADIUS; export const QRCodeStyle = [ getBackground(), { - name: 'color', - label: trans('color'), - color: '#000000', + name: "color", + label: trans("color"), + color: "#000000", }, MARGIN, PADDING, @@ -1583,19 +1579,19 @@ export const QRCodeStyle = [ export const TimeLineStyle = [ getBackground(), { - name: 'titleColor', - label: trans('timeLine.titleColor'), - color: '#000000', + name: "titleColor", + label: trans("timeLine.titleColor"), + color: "#000000", }, { - name: 'labelColor', - label: trans('timeLine.labelColor'), - color: '#000000', + name: "labelColor", + label: trans("timeLine.labelColor"), + color: "#000000", }, { - name: 'subTitleColor', - label: trans('timeLine.subTitleColor'), - color: '#848484', + name: "subTitleColor", + label: trans("timeLine.subTitleColor"), + color: "#848484", }, MARGIN, PADDING, @@ -1617,48 +1613,48 @@ export const DrawerStyle = [getBackground()] as const; export const JsonEditorStyle = [LABEL] as const; -export const EchartsStyle = [getBackground('primarySurface')] as const; +export const EchartsStyle = [getBackground("primarySurface")] as const; export const CalendarStyle = [ - getBackground('primarySurface'), + getBackground("primarySurface"), { - name: 'border', - label: trans('style.border'), - depName: 'background', + name: "border", + label: trans("style.border"), + depName: "background", transformer: calendarBackgroundToBorder, }, RADIUS, { - name: 'text', - label: trans('text'), - depName: 'background', + name: "text", + label: trans("text"), + depName: "background", depType: DEP_TYPE.CONTRAST_TEXT, transformer: handleCalendarText, }, { - name: 'headerBtnBackground', - label: trans('calendar.headerBtnBackground'), - depName: 'background', + name: "headerBtnBackground", + label: trans("calendar.headerBtnBackground"), + depName: "background", transformer: handleLightenColor, }, { - name: 'btnText', - label: trans('calendar.btnText'), - depName: 'headerBtnBackground', + name: "btnText", + label: trans("calendar.btnText"), + depName: "headerBtnBackground", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, { - name: 'title', - label: trans('calendar.title'), - depName: 'background', + name: "title", + label: trans("calendar.title"), + depName: "background", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, { - name: 'selectBackground', - label: trans('calendar.selectBackground'), - depTheme: 'primary', + name: "selectBackground", + label: trans("calendar.selectBackground"), + depTheme: "primary", transformer: handleCalendarSelectColor, }, ] as const; @@ -1666,19 +1662,19 @@ export const CalendarStyle = [ export const SignatureStyle = [ ...getBgBorderRadiusByBg(), { - name: 'pen', - label: trans('style.pen'), - color: '#000000', + name: "pen", + label: trans("style.pen"), + color: "#000000", }, { - name: 'tips', - label: trans('style.tips'), - color: '#B8B9BF', + name: "tips", + label: trans("style.tips"), + color: "#B8B9BF", }, { - name: 'footerIcon', - label: trans('style.footerIcon'), - color: '#222222', + name: "footerIcon", + label: trans("style.footerIcon"), + color: "#222222", }, MARGIN, PADDING, @@ -1688,9 +1684,9 @@ export const SignatureStyle = [ // Added by Aqib Mirza export const LottieStyle = [ { - name: 'background', - label: trans('style.background'), - depTheme: 'canvas', + name: "background", + label: trans("style.background"), + depTheme: "canvas", depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1700,9 +1696,9 @@ export const LottieStyle = [ export const CommentStyle = [ { - name: 'background', - label: trans('style.background'), - depTheme: 'primarySurface', + name: "background", + label: trans("style.background"), + depTheme: "primarySurface", depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1726,9 +1722,9 @@ export const ResponsiveLayoutColStyle = [ export const NavLayoutStyle = [ ...getBgBorderRadiusByBg(), { - name: 'text', - label: trans('text'), - depName: 'background', + name: "text", + label: trans("text"), + depName: "background", // depTheme: "primary", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, @@ -1738,13 +1734,13 @@ export const NavLayoutStyle = [ ] as const; export const NavLayoutItemStyle = [ - getBackground('primarySurface'), - getStaticBorder('transparent'), + getBackground("primarySurface"), + getStaticBorder("transparent"), RADIUS, { - name: 'text', - label: trans('text'), - depName: 'background', + name: "text", + label: trans("text"), + depName: "background", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1753,34 +1749,34 @@ export const NavLayoutItemStyle = [ ] as const; export const NavLayoutItemHoverStyle = [ - getBackground('canvas'), - getStaticBorder('transparent'), + getBackground("canvas"), + getStaticBorder("transparent"), { - name: 'text', - label: trans('text'), - depName: 'background', + name: "text", + label: trans("text"), + depName: "background", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ] as const; export const NavLayoutItemActiveStyle = [ - getBackground('primary'), - getStaticBorder('transparent'), + getBackground("primary"), + getStaticBorder("transparent"), { - name: 'text', - label: trans('text'), - depName: 'background', + name: "text", + label: trans("text"), + depName: "background", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ] as const; -export const CarouselStyle = [getBackground('canvas')] as const; +export const CarouselStyle = [getBackground("canvas")] as const; export const RichTextEditorStyle = [ getStaticBorder(), - getBackground('primarySurface'), + getBackground("primarySurface"), RADIUS, BORDER_WIDTH, ] as const; @@ -1881,58 +1877,58 @@ export type NavLayoutItemActiveStyleType = StyleConfigType< >; export function widthCalculator(margin: string) { - const marginArr = margin?.trim().replace(/\s+/g, ' ').split(' ') || ''; + const marginArr = margin?.trim().replace(/\s+/g, " ").split(" ") || ""; if (marginArr.length === 1) { return `calc(100% - ${ - parseInt(margin.replace(/[^\d.]/g, '')) * 2 + - (margin.replace(/[0-9]/g, '') || 'px') + parseInt(margin.replace(/[^\d.]/g, "")) * 2 + + (margin.replace(/[0-9]/g, "") || "px") })`; } else if (marginArr.length === 2 || marginArr.length === 3) { return `calc(100% - ${ - parseInt(marginArr[1].replace(/[^\d.]/g, '')) * 2 + - (marginArr[1].replace(/[0-9]/g, '') || 'px') + parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 + + (marginArr[1].replace(/[0-9]/g, "") || "px") })`; } else { return `calc(100% - ${ - parseInt(marginArr[1]?.replace(/[^\d.]/g, '') || '0') + - (marginArr[1]?.replace(/[0-9]/g, '') || 'px') + parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") + + (marginArr[1]?.replace(/[0-9]/g, "") || "px") } - ${ - parseInt(marginArr[3]?.replace(/[^\d.]/g, '') || '0') + - (marginArr[3]?.replace(/[0-9]/g, '') || 'px') + parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") + + (marginArr[3]?.replace(/[0-9]/g, "") || "px") })`; } } export function heightCalculator(margin: string) { - const marginArr = margin?.trim().split(' ') || ''; + const marginArr = margin?.trim().split(" ") || ""; if (marginArr.length === 1 || marginArr.length === 2) { return `calc(100% - ${ - parseInt(marginArr[0].replace(/[^\d.]/g, '')) * 2 + - (marginArr[0].replace(/[0-9]/g, '') || 'px') + parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 + + (marginArr[0].replace(/[0-9]/g, "") || "px") })`; } else if (marginArr.length > 2) { return `calc(100% - ${ - parseInt(marginArr[0]?.replace(/[^\d.]/g, '') || '0') + - (marginArr[0]?.replace(/[0-9]/g, '') || 'px') + parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + + (marginArr[0]?.replace(/[0-9]/g, "") || "px") } - ${ - parseInt(marginArr[2]?.replace(/[^\d.]/g, '') || '0') + - (marginArr[2]?.replace(/[0-9]/g, '') || 'px') + parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") + + (marginArr[2]?.replace(/[0-9]/g, "") || "px") })`; } } export function marginCalculator(margin: string) { - const marginArr = margin?.trim().split(' ') || ''; + const marginArr = margin?.trim().split(" ") || ""; if (marginArr.length === 1) { - return parseInt(margin.replace(/[^\d.]/g, '')) * 2; + return parseInt(margin.replace(/[^\d.]/g, "")) * 2; } else if (marginArr.length === 2) { - return parseInt(marginArr[0].replace(/[^\d.]/g, '')) * 2; + return parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2; } else { return ( - parseInt(marginArr[0]?.replace(/[^\d.]/g, '') || '0') + - parseInt(marginArr[2]?.replace(/[^\d.]/g, '') || '0') + parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + + parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") ); } } -export type {ThemeDetail}; +export type { ThemeDetail }; From 600928485d217e792e00a8edf51782f02fd4cc07 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Tue, 14 May 2024 14:40:46 +0500 Subject: [PATCH 004/155] fix stringExposingStateControl exposed methods --- .../lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx | 1 - .../lowcoder/src/comps/controls/codeStateControl.tsx | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 4effb590d..1a1899522 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -72,7 +72,6 @@ const getStyle = ( headerStyle: ContainerHeaderStyleType, bodyStyle: ContainerBodyStyleType, ) => { - console.log("🚀 ~ style:", style) return css` &.ant-tabs { overflow: hidden; diff --git a/client/packages/lowcoder/src/comps/controls/codeStateControl.tsx b/client/packages/lowcoder/src/comps/controls/codeStateControl.tsx index 23308b29c..1cf26df10 100644 --- a/client/packages/lowcoder/src/comps/controls/codeStateControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/codeStateControl.tsx @@ -210,7 +210,7 @@ function stateControlMethodExposing Date: Tue, 14 May 2024 16:51:02 +0500 Subject: [PATCH 005/155] fixed empty table text column isn't editabled --- client/packages/lowcoder/src/components/table/EditableCell.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx index 11a18d1ac..388d37e1b 100644 --- a/client/packages/lowcoder/src/components/table/EditableCell.tsx +++ b/client/packages/lowcoder/src/components/table/EditableCell.tsx @@ -128,6 +128,7 @@ export function EditableCell(props: EditableCellProps) { > {status === "toSave" && !isEditing && }
{normalView} From 3af37663055a10a49ec15ea18927f2403f8d89ea Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Tue, 14 May 2024 21:15:16 +0500 Subject: [PATCH 006/155] animation delay and duration added --- .../lowcoder/src/api/commonSettingApi.ts | 2 + .../src/comps/controls/labelControl.tsx | 133 ++- .../src/comps/controls/styleControl.tsx | 478 ++++---- .../comps/controls/styleControlConstants.tsx | 1029 +++++++++-------- .../packages/lowcoder/src/i18n/locales/en.ts | 2 + 5 files changed, 877 insertions(+), 767 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index c0ccc1a3b..ce9286ea0 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -49,6 +49,8 @@ export interface ThemeDetail { gridColumns?: string; //Added By Aqib Mirza textSize?: string; animation?: string; + animationDelay?: string; + animationDuration?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 97db223a6..1f1e88076 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -1,29 +1,29 @@ -import { trans } from "i18n"; -import { green, red, yellow } from "@ant-design/colors/es"; -import { FormItemProps } from "antd/es/form/FormItem"; -import { BoolControl } from "comps/controls/boolControl"; -import { NumberControl, StringControl } from "comps/controls/codeControl"; -import { dropdownControl } from "comps/controls/dropdownControl"; -import { withDefault } from "comps/generators"; -import { MultiCompBuilder } from "comps/generators/multi"; -import { labelCss, Section, Tooltip, UnderlineCss } from "lowcoder-design"; -import { ValueFromOption } from "lowcoder-design"; -import { isEmpty } from "lodash"; -import { Fragment, ReactNode } from "react"; -import styled, { css } from "styled-components"; -import { AlignLeft } from "lowcoder-design"; -import { AlignRight } from "lowcoder-design"; -import { StarIcon } from "lowcoder-design"; +import {trans} from 'i18n'; +import {green, red, yellow} from '@ant-design/colors/es'; +import {FormItemProps} from 'antd/es/form/FormItem'; +import {BoolControl} from 'comps/controls/boolControl'; +import {NumberControl, StringControl} from 'comps/controls/codeControl'; +import {dropdownControl} from 'comps/controls/dropdownControl'; +import {withDefault} from 'comps/generators'; +import {MultiCompBuilder} from 'comps/generators/multi'; +import {labelCss, Section, Tooltip, UnderlineCss} from 'lowcoder-design'; +import {ValueFromOption} from 'lowcoder-design'; +import {isEmpty} from 'lodash'; +import {Fragment, ReactNode} from 'react'; +import styled, {css} from 'styled-components'; +import {AlignLeft} from 'lowcoder-design'; +import {AlignRight} from 'lowcoder-design'; +import {StarIcon} from 'lowcoder-design'; import { LabelStyleType, heightCalculator, widthCalculator, -} from "./styleControlConstants"; +} from './styleControlConstants'; type LabelViewProps = Pick< FormItemProps, - "required" | "help" | "validateStatus" + 'required' | 'help' | 'validateStatus' > & { children: ReactNode; style?: Record; @@ -51,7 +51,7 @@ function getStyle(style: any) { `; } -const LabelViewWrapper = styled.div<{ $style: any; inputFieldStyle: any }>` +const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>` ${(props) => { return ( props.$style && { @@ -74,13 +74,13 @@ const MainWrapper = styled.div<{ flex-grow: 1; width: 100%; margin-top: ${(props) => - props.$position === "column" && props.$hasLabel ? "4px" : 0}; + props.$position === 'column' && props.$hasLabel ? '4px' : 0}; height: ${(props) => - props.$position === "column" && props.$hasLabel - ? "calc(100% - 4px)" - : "100%"}; + props.$position === 'column' && props.$hasLabel + ? 'calc(100% - 4px)' + : '100%'}; display: flex; - align-items: ${(props) => (props.$position === "row" ? "center" : "start")}; + align-items: ${(props) => (props.$position === 'row' ? 'center' : 'start')}; flex-shrink: 0; `; @@ -92,9 +92,9 @@ const LabelWrapper = styled.div<{ display: flex; align-items: center; margin-right: 8px; - margin-bottom: ${(props) => (props.$position === "row" ? 0 : "3.5px")}; - justify-content: ${(props) => (props.$align === "left" ? "start" : "end")}; - max-width: ${(props) => (props.$position === "row" ? "80%" : "100%")}; + margin-bottom: ${(props) => (props.$position === 'row' ? 0 : '3.5px')}; + justify-content: ${(props) => (props.$align === 'left' ? 'start' : 'end')}; + max-width: ${(props) => (props.$position === 'row' ? '80%' : '100%')}; flex-shrink: 0; `; // ${(props) => props.$border && UnderlineCss}; @@ -103,7 +103,7 @@ const LabelWrapper = styled.div<{ const Label = styled.span<{ $border: boolean; $labelStyle: LabelStyleType; - $validateStatus: "success" | "warning" | "error" | "validating" | null; + $validateStatus: 'success' | 'warning' | 'error' | 'validating' | null; }>` ${labelCss}; font-family: ${(props) => props.$labelStyle.fontFamily}; @@ -113,11 +113,11 @@ const Label = styled.span<{ text-decoration: ${(props) => props.$labelStyle.textDecoration}; font-size: ${(props) => props.$labelStyle.textSize}; color: ${(props) => - !!props.$validateStatus && props?.$validateStatus === "error" + !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.label} !important; ${(props) => - `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === "error" ? props.$labelStyle.validate : props.$labelStyle.border};`} + `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} border-radius:${(props) => props.$labelStyle.radius}; padding: ${(props) => props.$labelStyle.padding}; margin: ${(props) => props.$labelStyle.margin}; @@ -153,38 +153,38 @@ const TooltipWrapper = styled.span` `; const PositionOptions = [ - { label: trans("labelProp.left"), value: "row" }, - { label: trans("labelProp.top"), value: "column" }, + {label: trans('labelProp.left'), value: 'row'}, + {label: trans('labelProp.top'), value: 'column'}, ] as const; type PositionOptionsValue = ValueFromOption; const AlignOptions = [ - { label: , value: "left" }, - { label: , value: "right" }, + {label: , value: 'left'}, + {label: , value: 'right'}, ] as const; type AlignOptionsValue = ValueFromOption; const WidthUnitOptions = [ - { label: "px", value: "px" }, - { label: "%", value: "%" }, + {label: 'px', value: 'px'}, + {label: '%', value: '%'}, ]; function getLabelWidth(width: number, widthUnit: string): string { if (width <= 0 || isNaN(width)) { - return "0%"; + return '0%'; } return width + widthUnit; } export const LabelControl = (function () { const childrenMap = { - text: withDefault(StringControl, trans("label")), + text: withDefault(StringControl, trans('label')), tooltip: StringControl, hidden: BoolControl, width: withDefault(NumberControl, 33), - widthUnit: dropdownControl(WidthUnitOptions, "%"), - position: dropdownControl(PositionOptions, "row"), - align: dropdownControl(AlignOptions, "left"), + widthUnit: dropdownControl(WidthUnitOptions, '%'), + position: dropdownControl(PositionOptions, 'row'), + align: dropdownControl(AlignOptions, 'left'), }; return new MultiCompBuilder( @@ -194,7 +194,6 @@ export const LabelControl = (function () { @@ -222,11 +221,11 @@ export const LabelControl = (function () { $align={props.align} style={{ width: - props.position === "row" + props.position === 'row' ? getLabelWidth(props.width, props.widthUnit) - : "100%", - maxWidth: props.position === "row" ? "70%" : "100%", - fontSize: args && args.style ? args?.style?.textSize : "14px", + : '100%', + maxWidth: props.position === 'row' ? '70%' : '100%', + fontSize: args && args.style ? args?.style?.textSize : '14px', }} $position={props.position} $hasToolTip={!!props.tooltip} @@ -243,7 +242,7 @@ export const LabelControl = (function () { placement="top" color="#2c2c2c" getPopupContainer={(node: any) => - node.closest(".react-grid-item") + node.closest('.react-grid-item') } > @@ -262,13 +261,13 @@ export const LabelControl = (function () { {args.children} @@ -278,16 +277,16 @@ export const LabelControl = (function () { {args.help && ( ( -
- {children.text.propertyView({ label: trans("labelProp.text") })} - {children.tooltip.propertyView({ label: trans("labelProp.tooltip") })} +
+ {children.text.propertyView({label: trans('labelProp.text')})} + {children.tooltip.propertyView({label: trans('labelProp.tooltip')})} {children.position.propertyView({ - label: trans("labelProp.position"), + label: trans('labelProp.position'), radioButton: true, })} {children.align.propertyView({ - label: trans("labelProp.align"), + label: trans('labelProp.align'), radioButton: true, })} - {children.position.getView() !== "column" && + {children.position.getView() !== 'column' && children.width.propertyView({ - label: trans("labelProp.width"), - tooltip: trans("labelProp.widthTooltip"), + label: trans('labelProp.width'), + tooltip: trans('labelProp.widthTooltip'), lastNode: children.widthUnit.propertyView({}), })}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 255dc0cd9..9645f5db9 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -1,15 +1,15 @@ -import { default as Tooltip } from "antd/es/tooltip"; +import {default as Tooltip} from 'antd/es/tooltip'; import { getThemeDetailName, isThemeColorKey, ThemeDetail, -} from "api/commonSettingApi"; -import { ControlItemCompBuilder } from "comps/generators/controlCompBuilder"; -import { childrenToProps, ToConstructor } from "comps/generators/multi"; -import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { ThemeContext } from "comps/utils/themeContext"; -import { trans } from "i18n"; -import _ from "lodash"; +} from 'api/commonSettingApi'; +import {ControlItemCompBuilder} from 'comps/generators/controlCompBuilder'; +import {childrenToProps, ToConstructor} from 'comps/generators/multi'; +import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; +import {ThemeContext} from 'comps/utils/themeContext'; +import {trans} from 'i18n'; +import _ from 'lodash'; import { controlItem, IconReset, @@ -27,17 +27,17 @@ import { BorderStyleIcon, BorderRadiusIcon, TextStyleIcon, -} from "lowcoder-design"; -import { useContext } from "react"; -import styled from "styled-components"; -import { useIsMobile } from "util/hooks"; +} from 'lowcoder-design'; +import {useContext} from 'react'; +import styled from 'styled-components'; +import {useIsMobile} from 'util/hooks'; import { CSSCodeControl, ObjectControl, RadiusControl, StringControl, -} from "./codeControl"; -import { ColorControl } from "./colorControl"; +} from './codeControl'; +import {ColorControl} from './colorControl'; import { defaultTheme, DepColorConfig, @@ -47,6 +47,8 @@ import { SingleColorConfig, MarginConfig, AnimationConfig, + AnimationDelayConfig, + AnimationDurationConfig, PaddingConfig, TextSizeConfig, TextWeightConfig, @@ -72,167 +74,179 @@ import { TextTransformConfig, TextDecorationConfig, borderStyleConfig, -} from "./styleControlConstants"; -import { faTextWidth } from "@fortawesome/free-solid-svg-icons"; -import appSelectControl from "./appSelectControl"; +} from './styleControlConstants'; +import {faTextWidth} from '@fortawesome/free-solid-svg-icons'; +import appSelectControl from './appSelectControl'; function isSimpleColorConfig( config: SingleColorConfig ): config is SimpleColorConfig { - return config.hasOwnProperty("color"); + return config.hasOwnProperty('color'); } function isDepColorConfig(config: SingleColorConfig): config is DepColorConfig { - return config.hasOwnProperty("depName") || config.hasOwnProperty("depTheme"); + return config.hasOwnProperty('depName') || config.hasOwnProperty('depTheme'); } function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig { - return config.hasOwnProperty("radius"); + return config.hasOwnProperty('radius'); } function isBorderWidthConfig( config: SingleColorConfig ): config is BorderWidthConfig { - return config.hasOwnProperty("borderWidth"); + return config.hasOwnProperty('borderWidth'); } function isRotationConfig(config: SingleColorConfig): config is RotationConfig { - return config.hasOwnProperty("rotation"); + return config.hasOwnProperty('rotation'); } function isBackgroundImageConfig( config: SingleColorConfig ): config is BackgroundImageConfig { - return config.hasOwnProperty("backgroundImage"); + return config.hasOwnProperty('backgroundImage'); } function isBackgroundImageRepeatConfig( config: SingleColorConfig ): config is BackgroundImageRepeatConfig { - return config.hasOwnProperty("backgroundImageRepeat"); + return config.hasOwnProperty('backgroundImageRepeat'); } function isBackgroundImageSizeConfig( config: SingleColorConfig ): config is BackgroundImageSizeConfig { - return config.hasOwnProperty("backgroundImageSize"); + return config.hasOwnProperty('backgroundImageSize'); } function isBackgroundImagePositionConfig( config: SingleColorConfig ): config is BackgroundImagePositionConfig { - return config.hasOwnProperty("backgroundImagePosition"); + return config.hasOwnProperty('backgroundImagePosition'); } function isBackgroundImageOriginConfig( config: SingleColorConfig ): config is BackgroundImageOriginConfig { - return config.hasOwnProperty("backgroundImageOrigin"); + return config.hasOwnProperty('backgroundImageOrigin'); } function isHeaderBackgroundImageConfig( config: SingleColorConfig ): config is HeaderBackgroundImageConfig { - return config.hasOwnProperty("headerBackgroundImage"); + return config.hasOwnProperty('headerBackgroundImage'); } function isHeaderBackgroundImageRepeatConfig( config: SingleColorConfig ): config is HeaderBackgroundImageRepeatConfig { - return config.hasOwnProperty("headerBackgroundImageRepeat"); + return config.hasOwnProperty('headerBackgroundImageRepeat'); } function isHeaderBackgroundImageSizeConfig( config: SingleColorConfig ): config is HeaderBackgroundImageSizeConfig { - return config.hasOwnProperty("headerBackgroundImageSize"); + return config.hasOwnProperty('headerBackgroundImageSize'); } function isHeaderBackgroundImagePositionConfig( config: SingleColorConfig ): config is HeaderBackgroundImagePositionConfig { - return config.hasOwnProperty("headerBackgroundImagePosition"); + return config.hasOwnProperty('headerBackgroundImagePosition'); } function isHeaderBackgroundImageOriginConfig( config: SingleColorConfig ): config is HeaderBackgroundImageOriginConfig { - return config.hasOwnProperty("headerBackgroundImageOrigin"); + return config.hasOwnProperty('headerBackgroundImageOrigin'); } function isFooterBackgroundImageConfig( config: SingleColorConfig ): config is FooterBackgroundImageConfig { - return config.hasOwnProperty("footerBackgroundImage"); + return config.hasOwnProperty('footerBackgroundImage'); } function isFooterBackgroundImageRepeatConfig( config: SingleColorConfig ): config is FooterBackgroundImageRepeatConfig { - return config.hasOwnProperty("footerBackgroundImageRepeat"); + return config.hasOwnProperty('footerBackgroundImageRepeat'); } function isFooterBackgroundImageSizeConfig( config: SingleColorConfig ): config is FooterBackgroundImageSizeConfig { - return config.hasOwnProperty("footerBackgroundImageSize"); + return config.hasOwnProperty('footerBackgroundImageSize'); } function isFooterBackgroundImagePositionConfig( config: SingleColorConfig ): config is FooterBackgroundImagePositionConfig { - return config.hasOwnProperty("footerBackgroundImagePosition"); + return config.hasOwnProperty('footerBackgroundImagePosition'); } function isFooterBackgroundImageOriginConfig( config: SingleColorConfig ): config is FooterBackgroundImageOriginConfig { - return config.hasOwnProperty("footerBackgroundImageOrigin"); + return config.hasOwnProperty('footerBackgroundImageOrigin'); } function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig { - return config.hasOwnProperty("textSize"); + return config.hasOwnProperty('textSize'); } function isTextWeightConfig( config: SingleColorConfig ): config is TextWeightConfig { - return config.hasOwnProperty("textWeight"); + return config.hasOwnProperty('textWeight'); } function isFontFamilyConfig( config: SingleColorConfig ): config is FontFamilyConfig { - return config.hasOwnProperty("fontFamily"); + return config.hasOwnProperty('fontFamily'); } function isFontStyleConfig( config: SingleColorConfig ): config is FontStyleConfig { - return config.hasOwnProperty("fontStyle"); + return config.hasOwnProperty('fontStyle'); } function isTextTransformConfig( config: SingleColorConfig ): config is TextTransformConfig { - return config.hasOwnProperty("textTransform"); + return config.hasOwnProperty('textTransform'); } function isTextDecorationConfig( config: SingleColorConfig ): config is TextDecorationConfig { - return config.hasOwnProperty("textDecoration"); + return config.hasOwnProperty('textDecoration'); } function isBorderStyleConfig( config: SingleColorConfig ): config is borderStyleConfig { - return config.hasOwnProperty("borderStyle"); + return config.hasOwnProperty('borderStyle'); } function isMarginConfig(config: SingleColorConfig): config is MarginConfig { - return config.hasOwnProperty("margin"); + return config.hasOwnProperty('margin'); } function isAnimationConfig( config: SingleColorConfig ): config is AnimationConfig { - return config.hasOwnProperty("animation"); + return config.hasOwnProperty('animation'); +} + +function isAnimationDelayConfig( + config: SingleColorConfig +): config is AnimationDelayConfig { + return config.hasOwnProperty('animationDelay'); +} + +function isAnimationDurationConfig( + config: SingleColorConfig +): config is AnimationDurationConfig { + return config.hasOwnProperty('animationDuration'); } function isPaddingConfig(config: SingleColorConfig): config is PaddingConfig { - return config.hasOwnProperty("padding"); + return config.hasOwnProperty('padding'); } // function styleControl(colorConfig: Array) { -type Names = T[number]["name"]; +type Names = T[number]['name']; export type StyleConfigType = { [K in Names]: string; }; @@ -339,6 +353,14 @@ function isEmptyAnimation(animation: string) { return _.isEmpty(animation); } +function isEmptyAnimationDelay(animationDelay: string) { + return _.isEmpty(animationDelay); +} + +function isEmptyAnimationDuration(animationDuration: string) { + return _.isEmpty(animationDuration); +} + function isEmptyMargin(margin: string) { return _.isEmpty(margin); } @@ -515,7 +537,18 @@ function calcColors>( return; } if (!isEmptyAnimation(props[name]) && isAnimationConfig(config)) { - res[name] = "bounce"; + res[name] = props[name]; + return; + } + if (!isEmptyAnimationDelay(props[name]) && isAnimationDelayConfig(config)) { + res[name] = props[name]; + return; + } + if ( + !isEmptyAnimationDuration(props[name]) && + isAnimationDurationConfig(config) + ) { + res[name] = props[name]; return; } if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) { @@ -537,78 +570,78 @@ function calcColors>( res[name] = themeWithDefault[config.radius]; } if (isBorderWidthConfig(config)) { - res[name] = "0px"; + res[name] = '0px'; } if (isRotationConfig(config)) { - res[name] = "0deg"; + res[name] = '0deg'; } if (isBackgroundImageConfig(config)) { - res[name] = ""; + res[name] = ''; } if (isBackgroundImageRepeatConfig(config)) { - res[name] = "no-repeat"; + res[name] = 'no-repeat'; } if (isBackgroundImageSizeConfig(config)) { - res[name] = "cover"; + res[name] = 'cover'; } if (isBackgroundImagePositionConfig(config)) { - res[name] = "center"; + res[name] = 'center'; } if (isBackgroundImageOriginConfig(config)) { - res[name] = "padding-box"; + res[name] = 'padding-box'; } if (isHeaderBackgroundImageConfig(config)) { - res[name] = ""; + res[name] = ''; } if (isHeaderBackgroundImageRepeatConfig(config)) { - res[name] = "no-repeat"; + res[name] = 'no-repeat'; } if (isHeaderBackgroundImageSizeConfig(config)) { - res[name] = "cover"; + res[name] = 'cover'; } if (isHeaderBackgroundImagePositionConfig(config)) { - res[name] = "center"; + res[name] = 'center'; } if (isHeaderBackgroundImageOriginConfig(config)) { - res[name] = "padding-box"; + res[name] = 'padding-box'; } if (isFooterBackgroundImageConfig(config)) { - res[name] = ""; + res[name] = ''; } if (isFooterBackgroundImageRepeatConfig(config)) { - res[name] = "no-repeat"; + res[name] = 'no-repeat'; } if (isFooterBackgroundImageSizeConfig(config)) { - res[name] = "cover"; + res[name] = 'cover'; } if (isFooterBackgroundImagePositionConfig(config)) { - res[name] = "center"; + res[name] = 'center'; } if (isFooterBackgroundImageOriginConfig(config)) { - res[name] = "padding-box"; + res[name] = 'padding-box'; } if (isTextSizeConfig(config)) { // TODO: remove default textSize after added in theme in backend. - res[name] = themeWithDefault[config.textSize] || "14px"; + res[name] = themeWithDefault[config.textSize] || '14px'; } if (isTextWeightConfig(config)) { // TODO: remove default textWeight after added in theme in backend. - res[name] = themeWithDefault[config.textWeight] || "normal"; + res[name] = themeWithDefault[config.textWeight] || 'normal'; } if (isFontFamilyConfig(config)) { - res[name] = themeWithDefault[config.fontFamily] || "sans-serif"; + res[name] = themeWithDefault[config.fontFamily] || 'sans-serif'; } if (isFontStyleConfig(config)) { - res[name] = themeWithDefault[config.fontStyle] || "normal"; + res[name] = themeWithDefault[config.fontStyle] || 'normal'; } if (isTextTransformConfig(config)) { - res[name] = themeWithDefault[config.textTransform] || "none"; + res[name] = themeWithDefault[config.textTransform] || 'none'; } if (isTextDecorationConfig(config)) { - res[name] = themeWithDefault[config.textDecoration] || "none"; + res[name] = themeWithDefault[config.textDecoration] || 'none'; } if (isBorderStyleConfig(config)) { - res[name] = themeWithDefault[config.borderStyle] || "dashed"; + res[name] = themeWithDefault[config.borderStyle] || 'dashed'; } if (isMarginConfig(config)) { res[name] = themeWithDefault[config.margin]; @@ -616,6 +649,12 @@ function calcColors>( if (isAnimationConfig(config)) { res[name] = themeWithDefault[config.animation]; } + if (isAnimationDelayConfig(config)) { + res[name] = themeWithDefault[config.animationDelay]; + } + if (isAnimationDurationConfig(config)) { + res[name] = themeWithDefault[config.animationDuration]; + } if (isPaddingConfig(config)) { res[name] = themeWithDefault[config.padding]; } @@ -632,7 +671,7 @@ function calcColors>( let depKey = config.depName ? res[config.depName] : themeWithDefault[config.depTheme!]; - if (bgColor && config.depTheme === "canvas") { + if (bgColor && config.depTheme === 'canvas') { depKey = bgColor; } res[name] = config.transformer( @@ -642,7 +681,7 @@ function calcColors>( ); } else if ( config?.depType === DEP_TYPE.SELF && - config.depTheme === "canvas" && + config.depTheme === 'canvas' && bgColor ) { res[name] = bgColor; @@ -763,6 +802,16 @@ const AnimationPropIcon = styled(BorderWidthIcon)` animation-delay: 2s; `; +const AnimationDelayPropIcon = styled(BorderWidthIcon)` + animation: bounce; + animation-delay: 2s; +`; + +const AnimationDurationPropIcon = styled(BorderWidthIcon)` + animation: bounce; + animation-delay: 2s; +`; + const RotationPropIcon = styled(RotationIcon)` margin: 0 8px 0 -3px; padding: 3px; @@ -809,44 +858,46 @@ const ResetIcon = styled(IconReset)` export function styleControl( colorConfigs: T ) { - type ColorMap = { [K in Names]: string }; + type ColorMap = {[K in Names]: string}; const childrenMap: any = {}; colorConfigs.map((config) => { const name: Names = config.name; if ( - name === "radius" || - name === "borderWidth" || - name === "animation" || - name === "rotation" || - name === "cardRadius" || - name === "textSize" || - name === "textWeight" || - name === "textTransform" || - name === "textDecoration" || - name === "fontFamily" || - name === "borderStyle" || - name === "fontStyle" || - name === "backgroundImage" || - name === "backgroundImageRepeat" || - name === "backgroundImageSize" || - name === "backgroundImagePosition" || - name === "backgroundImageOrigin" || - name === "headerBackgroundImage" || - name === "headerBackgroundImageRepeat" || - name === "headerBackgroundImageSize" || - name === "headerBackgroundImagePosition" || - name === "headerBackgroundImageOrigin" || - name === "footerBackgroundImage" || - name === "footerBackgroundImageRepeat" || - name === "footerBackgroundImageSize" || - name === "footerBackgroundImagePosition" || - name === "footerBackgroundImageOrigin" || - name === "margin" || - name === "padding" || - name === "containerHeaderPadding" || - name === "containerSiderPadding" || - name === "containerFooterPadding" || - name === "containerBodyPadding" + name === 'radius' || + name === 'borderWidth' || + name === 'animation' || + name === 'animationDelay' || + name === 'animationDuration' || + name === 'rotation' || + name === 'cardRadius' || + name === 'textSize' || + name === 'textWeight' || + name === 'textTransform' || + name === 'textDecoration' || + name === 'fontFamily' || + name === 'borderStyle' || + name === 'fontStyle' || + name === 'backgroundImage' || + name === 'backgroundImageRepeat' || + name === 'backgroundImageSize' || + name === 'backgroundImagePosition' || + name === 'backgroundImageOrigin' || + name === 'headerBackgroundImage' || + name === 'headerBackgroundImageRepeat' || + name === 'headerBackgroundImageSize' || + name === 'headerBackgroundImagePosition' || + name === 'headerBackgroundImageOrigin' || + name === 'footerBackgroundImage' || + name === 'footerBackgroundImageRepeat' || + name === 'footerBackgroundImageSize' || + name === 'footerBackgroundImagePosition' || + name === 'footerBackgroundImageOrigin' || + name === 'margin' || + name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' ) { childrenMap[name] = StringControl; } else { @@ -854,9 +905,9 @@ export function styleControl( } }); // [K in Names]: new (params: CompParams) => ColorControl; - const label = trans("prop.style"); + const label = trans('prop.style'); return new ControlItemCompBuilder( - childrenMap as ToConstructor<{ [K in Names]: ColorControl }>, + childrenMap as ToConstructor<{[K in Names]: ColorControl}>, (props) => { // const x = useContext(CompNameContext); const theme = useContext(ThemeContext); @@ -864,7 +915,7 @@ export function styleControl( return calcColors(props as ColorMap, colorConfigs, theme?.theme, bgColor); } ) - .setControlItemData({ filterText: label, searchChild: true }) + .setControlItemData({filterText: label, searchChild: true}) .setPropertyViewFn((children) => { const theme = useContext(ThemeContext); const bgColor = useContext(BackgroundColorContext); @@ -888,37 +939,39 @@ export function styleControl( colorConfigs.map((item) => { const name: Names = item.name; if ( - name === "radius" || - name === "margin" || - name === "padding" || - name === "containerHeaderPadding" || - name === "containerSiderPadding" || - name === "containerFooterPadding" || - name === "containerBodyPadding" || - name === "borderWidth" || - name === "animation" || - name === "rotation" || - name === "backgroundImage" || - name === "backgroundImageRepeat" || - name === "backgroundImageSize" || - name === "backgroundImagePosition" || - name === "backgroundImageOrigin" || - name === "headerBackgroundImage" || - name === "headerBackgroundImageRepeat" || - name === "headerBackgroundImageSize" || - name === "headerBackgroundImagePosition" || - name === "headerBackgroundImageOrigin" || - name === "footerBackgroundImage" || - name === "footerBackgroundImageRepeat" || - name === "footerBackgroundImageSize" || - name === "footerBackgroundImagePosition" || - name === "footerBackgroundImageOrigin" + name === 'radius' || + name === 'margin' || + name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' || + name === 'borderWidth' || + name === 'animation' || + name === 'animationDelay' || + name === 'animationDuration' || + name === 'rotation' || + name === 'backgroundImage' || + name === 'backgroundImageRepeat' || + name === 'backgroundImageSize' || + name === 'backgroundImagePosition' || + name === 'backgroundImageOrigin' || + name === 'headerBackgroundImage' || + name === 'headerBackgroundImageRepeat' || + name === 'headerBackgroundImageSize' || + name === 'headerBackgroundImagePosition' || + name === 'headerBackgroundImageOrigin' || + name === 'footerBackgroundImage' || + name === 'footerBackgroundImageRepeat' || + name === 'footerBackgroundImageSize' || + name === 'footerBackgroundImagePosition' || + name === 'footerBackgroundImageOrigin' ) { - children[name]?.dispatchChangeValueAction(""); + children[name]?.dispatchChangeValueAction(''); } else { children[name] && children[name].dispatch( - children[name].changeValueAction("") + children[name].changeValueAction('') ); } }); @@ -926,7 +979,7 @@ export function styleControl( > @@ -938,30 +991,30 @@ export function styleControl( .filter( (config) => !config.platform || - (isMobile && config.platform === "mobile") || - (!isMobile && config.platform === "pc") + (isMobile && config.platform === 'mobile') || + (!isMobile && config.platform === 'pc') ) .map((config, index) => { const name: Names = config.name; - let depMsg = (config as SimpleColorConfig)["color"]; + let depMsg = (config as SimpleColorConfig)['color']; if (isDepColorConfig(config)) { if (config.depType === DEP_TYPE.CONTRAST_TEXT) { - depMsg = trans("style.contrastText"); + depMsg = trans('style.contrastText'); } else if ( config.depType === DEP_TYPE.SELF && config.depTheme ) { depMsg = getThemeDetailName(config.depTheme); } else { - depMsg = trans("style.generated"); + depMsg = trans('style.generated'); } } return controlItem( - { filterText: config.label }, + {filterText: config.label},
- {name === "radius" || - name === "gap" || - name === "cardRadius" + {name === 'radius' || + name === 'gap' || + name === 'cardRadius' ? ( children[name] as InstanceType ).propertyView({ @@ -969,7 +1022,7 @@ export function styleControl( preInputNode: , placeholder: props[name], }) - : name === "borderWidth" + : name === 'borderWidth' ? ( children[name] as InstanceType ).propertyView({ @@ -979,7 +1032,7 @@ export function styleControl( ), placeholder: props[name], }) - : name === "borderStyle" + : name === 'borderStyle' ? ( children[name] as InstanceType< typeof StringControl @@ -991,7 +1044,7 @@ export function styleControl( ), placeholder: props[name], }) - : name === "animation" + : name === 'animation' ? ( children[name] as InstanceType< typeof StringControl @@ -1003,21 +1056,19 @@ export function styleControl( ), placeholder: props[name], }) - : name === "margin" + : name === 'animationDelay' ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: ( + + ), placeholder: props[name], }) - : name === "padding" || - name === "containerHeaderPadding" || - name === "containerSiderPadding" || - name === "containerFooterPadding" || - name === "containerBodyPadding" + : name === 'animationDuration' ? ( children[name] as InstanceType< typeof StringControl @@ -1025,11 +1076,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === "textSize" + : name === 'margin' ? ( children[name] as InstanceType< typeof StringControl @@ -1037,11 +1088,15 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === "textWeight" + : name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' ? ( children[name] as InstanceType< typeof StringControl @@ -1049,11 +1104,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === "fontFamily" + : name === 'textSize' ? ( children[name] as InstanceType< typeof StringControl @@ -1061,11 +1116,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === "textDecoration" + : name === 'textWeight' ? ( children[name] as InstanceType< typeof StringControl @@ -1073,11 +1128,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === "textTransform" + : name === 'fontFamily' ? ( children[name] as InstanceType< typeof StringControl @@ -1085,11 +1140,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === "fontStyle" + : name === 'textDecoration' ? ( children[name] as InstanceType< typeof StringControl @@ -1097,14 +1152,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === "backgroundImage" || - name === - "headerBackgroundImage" || - name === "footerBackgroundImage" + : name === 'textTransform' ? ( children[ name @@ -1114,16 +1166,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === - "backgroundImageRepeat" || - name === - "headerBackgroundImageRepeat" || - name === - "footerBackgroundImageRepeat" + : name === 'fontStyle' ? ( children[ name @@ -1133,11 +1180,15 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === "rotation" + : name === 'backgroundImage' || + name === + 'headerBackgroundImage' || + name === + 'footerBackgroundImage' ? ( children[ name @@ -1147,20 +1198,55 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : children[name].propertyView( - { + : name === + 'backgroundImageRepeat' || + name === + 'headerBackgroundImageRepeat' || + name === + 'footerBackgroundImageRepeat' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ label: config.label, - panelDefaultColor: + preInputNode: ( + + ), + placeholder: props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - } - )} + }) + : name === 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : children[ + name + ].propertyView({ + label: config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: depMsg, + })}
); })} @@ -1176,10 +1262,10 @@ export function useStyle( ) { const theme = useContext(ThemeContext); const bgColor = useContext(BackgroundColorContext); - type ColorMap = { [K in Names]: string }; + type ColorMap = {[K in Names]: string}; const props = {} as ColorMap; colorConfigs.forEach((config) => { - props[config.name as Names] = ""; + props[config.name as Names] = ''; }); return calcColors(props, colorConfigs, theme?.theme, bgColor); } diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 4f0534335..eef0768c0 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1,9 +1,9 @@ -import { ThemeDetail } from "api/commonSettingApi"; -import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design"; -import { trans } from "i18n"; -import { StyleConfigType } from "./styleControl"; +import {ThemeDetail} from 'api/commonSettingApi'; +import {darkenColor, isDarkColor, lightenColor, toHex} from 'lowcoder-design'; +import {trans} from 'i18n'; +import {StyleConfigType} from './styleControl'; -type SupportPlatform = "pc" | "mobile"; +type SupportPlatform = 'pc' | 'mobile'; type CommonColorConfig = { readonly name: string; @@ -31,6 +31,14 @@ export type AnimationConfig = CommonColorConfig & { readonly animation: string; }; +export type AnimationDelayConfig = CommonColorConfig & { + readonly animationDelay: string; +}; + +export type AnimationDurationConfig = CommonColorConfig & { + readonly animationDuration: string; +}; + export type BackgroundImageConfig = CommonColorConfig & { readonly backgroundImage: string; }; @@ -193,30 +201,34 @@ export type SingleColorConfig = | SiderBackgroundImageSizeConfig | SiderBackgroundImagePositionConfig | SiderBackgroundImageOriginConfig - | AnimationConfig; + | AnimationConfig + | AnimationDelayConfig + | AnimationDurationConfig; export const defaultTheme: ThemeDetail = { - primary: "#3377FF", - textDark: "#222222", - textLight: "#FFFFFF", - canvas: "#F5F5F6", - primarySurface: "#FFFFFF", - borderRadius: "4px", - margin: "3px", - padding: "3px", - gridColumns: "24", - textSize: "14px", - animation: "bounce", + primary: '#3377FF', + textDark: '#222222', + textLight: '#FFFFFF', + canvas: '#F5F5F6', + primarySurface: '#FFFFFF', + borderRadius: '4px', + margin: '3px', + padding: '3px', + gridColumns: '24', + textSize: '14px', + animation: 'bounce', + animationDelay: '2s', + animationDuration: '2s', }; -export const SURFACE_COLOR = "#FFFFFF"; -const SECOND_SURFACE_COLOR = "#D7D9E0"; -const ERROR_COLOR = "#F5222D"; -const SUCCESS_COLOR = "#079968"; +export const SURFACE_COLOR = '#FFFFFF'; +const SECOND_SURFACE_COLOR = '#D7D9E0'; +const ERROR_COLOR = '#F5222D'; +const SUCCESS_COLOR = '#079968'; export enum DEP_TYPE { - CONTRAST_TEXT = "contrastText", - SELF = "toSelf", + CONTRAST_TEXT = 'contrastText', + SELF = 'toSelf', } export function contrastText( @@ -224,7 +236,7 @@ export function contrastText( textDark: string, textLight: string ) { - return isDarkColor(color) && color !== "#00000000" ? textLight : textDark; + return isDarkColor(color) && color !== '#00000000' ? textLight : textDark; } // return similar background color @@ -277,7 +289,7 @@ function handleToUnchecked(color: string) { // return segmented background function handleToSegmentBackground(color: string) { if (toHex(color) === SURFACE_COLOR) { - return "#E1E3EB"; + return '#E1E3EB'; } return contrastBackground(color); } @@ -285,9 +297,9 @@ function handleToSegmentBackground(color: string) { // return table hover row background color export function handleToHoverRow(color: string) { if (isDarkColor(color)) { - return "#FFFFFF23"; + return '#FFFFFF23'; } else { - return "#00000007"; + return '#00000007'; } } @@ -299,9 +311,9 @@ export function handleToSelectedRow( if (toHex(color) === SURFACE_COLOR) { return `${toHex(primary)?.substring(0, 7)}16`; } else if (isDarkColor(color)) { - return "#FFFFFF33"; + return '#FFFFFF33'; } else { - return "#00000011"; + return '#00000011'; } } @@ -310,7 +322,7 @@ export function handleToHeadBg(color: string) { if (toHex(color) === SURFACE_COLOR) { return darkenColor(color, 0.06); } - if (toHex(color) === "#000000") { + if (toHex(color) === '#000000') { return SURFACE_COLOR; } if (isDarkColor(color)) { @@ -327,7 +339,7 @@ function handleToDividerText(color: string) { // return calendar select background color function handleCalendarSelectColor(color: string) { - return lightenColor(color, 0.3) + "4C"; + return lightenColor(color, 0.3) + '4C'; } // return lighten color @@ -338,7 +350,7 @@ function handleLightenColor(color: string) { // return calendar head button select background export function handleToCalendarHeadSelectBg(color: string) { if (toHex(color) === SURFACE_COLOR) { - return "#E1E3EB"; + return '#E1E3EB'; } return contrastBackground(color, 0.15); } @@ -346,9 +358,9 @@ export function handleToCalendarHeadSelectBg(color: string) { // return calendar today background export function handleToCalendarToday(color: string) { if (isDarkColor(color)) { - return "#FFFFFF33"; + return '#FFFFFF33'; } else { - return "#0000000c"; + return '#0000000c'; } } @@ -362,210 +374,222 @@ function handleCalendarText( } const TEXT = { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const STATIC_TEXT = { - name: "staticText", - label: trans("style.staticText"), - depTheme: "canvas", + name: 'staticText', + label: trans('style.staticText'), + depTheme: 'canvas', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const LABEL = { - name: "label", - label: trans("label"), - depTheme: "canvas", + name: 'label', + label: trans('label'), + depTheme: 'canvas', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; const ACCENT = { - name: "accent", - label: trans("style.accent"), - depTheme: "primary", + name: 'accent', + label: trans('style.accent'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, - platform: "pc", + platform: 'pc', } as const; const VALIDATE = { - name: "validate", - label: trans("style.validate"), + name: 'validate', + label: trans('style.validate'), color: ERROR_COLOR, } as const; const ACCENT_VALIDATE = [ACCENT, VALIDATE] as const; const ROTATION = { - name: "rotation", - label: "Rotation", - rotation: "rotation", + name: 'rotation', + label: 'Rotation', + rotation: 'rotation', } as const; const ANIMATION = { - name: "animation", - label: trans("style.animation"), - animation: "animation", + name: 'animation', + label: trans('style.animation'), + animation: 'animation', +} as const; + +const ANIMATIONDELAY = { + name: 'animationDelay', + label: trans('style.animationDelay'), + animationDelay: 'animationDelay', +} as const; + +const ANIMATIONDURATION = { + name: 'animationDuration', + label: trans('style.animationDuration'), + animationDuration: 'animationDuration', } as const; const BORDER = { - name: "border", - label: trans("style.border"), - depName: "background", + name: 'border', + label: trans('style.border'), + depName: 'background', transformer: backgroundToBorder, } as const; const RADIUS = { - name: "radius", - label: trans("style.borderRadius"), - radius: "borderRadius", + name: 'radius', + label: trans('style.borderRadius'), + radius: 'borderRadius', } as const; const BORDER_WIDTH = { - name: "borderWidth", - label: trans("style.borderWidth"), - borderWidth: "borderWidth", + name: 'borderWidth', + label: trans('style.borderWidth'), + borderWidth: 'borderWidth', } as const; const BACKGROUND_IMAGE = { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", + name: 'backgroundImage', + label: trans('style.backgroundImage'), + backgroundImage: 'backgroundImage', } as const; const BACKGROUND_IMAGE_REPEAT = { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", + name: 'backgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + backgroundImageRepeat: 'backgroundImageRepeat', } as const; const BACKGROUND_IMAGE_SIZE = { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", + name: 'backgroundImageSize', + label: trans('style.backgroundImageSize'), + backgroundImageSize: 'backgroundImageSize', } as const; const BACKGROUND_IMAGE_POSITION = { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", + name: 'backgroundImagePosition', + label: trans('style.backgroundImagePosition'), + backgroundImagePosition: 'backgroundImagePosition', } as const; const BACKGROUND_IMAGE_ORIGIN = { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", + name: 'backgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + backgroundImageOrigin: 'backgroundImageOrigin', } as const; const MARGIN = { - name: "margin", - label: trans("style.margin"), - margin: "margin", + name: 'margin', + label: trans('style.margin'), + margin: 'margin', } as const; const PADDING = { - name: "padding", - label: trans("style.padding"), - padding: "padding", + name: 'padding', + label: trans('style.padding'), + padding: 'padding', } as const; const TEXT_SIZE = { - name: "textSize", - label: trans("style.textSize"), - textSize: "textSize", + name: 'textSize', + label: trans('style.textSize'), + textSize: 'textSize', } as const; const TEXT_WEIGHT = { - name: "textWeight", - label: trans("style.textWeight"), - textWeight: "textWeight", + name: 'textWeight', + label: trans('style.textWeight'), + textWeight: 'textWeight', } as const; const HOVER_BACKGROUND_COLOR = { - name: "hoverBackground", - label: trans("style.hoverBackground"), - hoverBackground: "hoverBackground", + name: 'hoverBackground', + label: trans('style.hoverBackground'), + hoverBackground: 'hoverBackground', }; const FONT_FAMILY = { - name: "fontFamily", - label: trans("style.fontFamily"), - fontFamily: "fontFamily", + name: 'fontFamily', + label: trans('style.fontFamily'), + fontFamily: 'fontFamily', } as const; const FONT_STYLE = { - name: "fontStyle", - label: trans("style.fontStyle"), - fontStyle: "fontStyle", + name: 'fontStyle', + label: trans('style.fontStyle'), + fontStyle: 'fontStyle', } as const; const CONTAINER_HEADER_PADDING = { - name: "containerHeaderPadding", - label: trans("style.containerHeaderPadding"), - containerHeaderPadding: "padding", + name: 'containerHeaderPadding', + label: trans('style.containerHeaderPadding'), + containerHeaderPadding: 'padding', } as const; const CONTAINER_SIDER_PADDING = { - name: "containerSiderPadding", - label: trans("style.containerSiderPadding"), - containerSiderPadding: "padding", + name: 'containerSiderPadding', + label: trans('style.containerSiderPadding'), + containerSiderPadding: 'padding', } as const; const CONTAINER_FOOTER_PADDING = { - name: "containerFooterPadding", - label: trans("style.containerFooterPadding"), - containerFooterPadding: "padding", + name: 'containerFooterPadding', + label: trans('style.containerFooterPadding'), + containerFooterPadding: 'padding', } as const; const CONTAINER_BODY_PADDING = { - name: "containerBodyPadding", - label: trans("style.containerBodyPadding"), - containerBodyPadding: "padding", + name: 'containerBodyPadding', + label: trans('style.containerBodyPadding'), + containerBodyPadding: 'padding', } as const; const TEXT_TRANSFORM = { - name: "textTransform", - label: trans("style.textTransform"), - textTransform: "textTransform", + name: 'textTransform', + label: trans('style.textTransform'), + textTransform: 'textTransform', } as const; const TEXT_DECORATION = { - name: "textDecoration", - label: trans("style.textDecoration"), - textDecoration: "textDecoration", + name: 'textDecoration', + label: trans('style.textDecoration'), + textDecoration: 'textDecoration', } as const; const BORDER_STYLE = { - name: "borderStyle", - label: trans("style.borderStyle"), - borderStyle: "borderStyle", + name: 'borderStyle', + label: trans('style.borderStyle'), + borderStyle: 'borderStyle', } as const; const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) => ({ - name: "border", - label: trans("style.border"), + name: 'border', + label: trans('style.border'), color, }) as const; const HEADER_BACKGROUND = { - name: "headerBackground", - label: trans("style.headerBackground"), - depName: "background", + name: 'headerBackground', + label: trans('style.headerBackground'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, } as const; const SIDER_BACKGROUND = { - name: "siderBackground", - label: trans("style.siderBackground"), - depName: "background", + name: 'siderBackground', + label: trans('style.siderBackground'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, } as const; @@ -600,26 +624,28 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ BORDER_STYLE, RADIUS, BORDER_WIDTH, - // ANIMATION, + ANIMATION, + ANIMATIONDELAY, + ANIMATIONDURATION, ]; const FILL = { - name: "fill", - label: trans("style.fill"), - depTheme: "primary", + name: 'fill', + label: trans('style.fill'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, } as const; const TRACK = { - name: "track", - label: trans("style.track"), + name: 'track', + label: trans('style.track'), color: SECOND_SURFACE_COLOR, } as const; const SUCCESS = { - name: "success", - label: trans("success"), + name: 'success', + label: trans('success'), color: SUCCESS_COLOR, } as const; @@ -629,21 +655,21 @@ function getStaticBgBorderRadiusByBg( ) { return [ getStaticBackground(background), - platform ? { ...BORDER, platform } : BORDER, - platform ? { ...RADIUS, platform } : RADIUS, + platform ? {...BORDER, platform} : BORDER, + platform ? {...RADIUS, platform} : RADIUS, ] as const; } function getBgBorderRadiusByBg( - background: keyof ThemeDetail = "primarySurface" + background: keyof ThemeDetail = 'primarySurface' ) { return [getBackground(background), BORDER, RADIUS] as const; } -function getBackground(depTheme: keyof ThemeDetail = "primarySurface") { +function getBackground(depTheme: keyof ThemeDetail = 'primarySurface') { return { - name: "background", - label: trans("style.background"), + name: 'background', + label: trans('style.background'), depTheme: depTheme, depType: DEP_TYPE.SELF, transformer: toSelf, @@ -652,8 +678,8 @@ function getBackground(depTheme: keyof ThemeDetail = "primarySurface") { function getStaticBackground(color: string) { return { - name: "background", - label: trans("style.background"), + name: 'background', + label: trans('style.background'), color, } as const; } @@ -686,14 +712,14 @@ function replaceAndMergeMultipleStyles( } export const ButtonStyle = [ - getBackground("primary"), + getBackground('primary'), ...STYLING_FIELDS_SEQUENCE, ] as const; export const ToggleButtonStyle = [ - getBackground("canvas"), + getBackground('canvas'), ...STYLING_FIELDS_SEQUENCE.map((style) => { - if (style.name === "border") { + if (style.name === 'border') { return { ...style, depType: DEP_TYPE.SELF, @@ -708,17 +734,17 @@ export const ToggleButtonStyle = [ export const TextStyle = [ { - name: "background", - label: trans("style.background"), - depTheme: "canvas", + name: 'background', + label: trans('style.background'), + depTheme: 'canvas', depType: DEP_TYPE.SELF, transformer: toSelf, }, ...STYLING_FIELDS_SEQUENCE, { - name: "links", - label: trans("style.links"), - depTheme: "primary", + name: 'links', + label: trans('style.links'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -726,9 +752,9 @@ export const TextStyle = [ export const MarginStyle = [ { - name: "margin", - label: trans("style.margin"), - margin: "margin", + name: 'margin', + label: trans('style.margin'), + margin: 'margin', }, ]; @@ -742,29 +768,29 @@ export const ContainerStyle = [ MARGIN, PADDING, { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", + name: 'backgroundImage', + label: trans('style.backgroundImage'), + backgroundImage: 'backgroundImage', }, { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", + name: 'backgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + backgroundImageRepeat: 'backgroundImageRepeat', }, { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", + name: 'backgroundImageSize', + label: trans('style.backgroundImageSize'), + backgroundImageSize: 'backgroundImageSize', }, { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", + name: 'backgroundImagePosition', + label: trans('style.backgroundImagePosition'), + backgroundImagePosition: 'backgroundImagePosition', }, { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", + name: 'backgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + backgroundImageOrigin: 'backgroundImageOrigin', }, ] as const; @@ -772,29 +798,29 @@ export const ContainerHeaderStyle = [ CONTAINER_HEADER_PADDING, HEADER_BACKGROUND, { - name: "headerBackgroundImage", - label: trans("style.backgroundImage"), - headerBackgroundImage: "headerBackgroundImage", + name: 'headerBackgroundImage', + label: trans('style.backgroundImage'), + headerBackgroundImage: 'headerBackgroundImage', }, { - name: "headerBackgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - headerBackgroundImageRepeat: "headerBackgroundImageRepeat", + name: 'headerBackgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + headerBackgroundImageRepeat: 'headerBackgroundImageRepeat', }, { - name: "headerBackgroundImageSize", - label: trans("style.backgroundImageSize"), - headerBackgroundImageSize: "headerBackgroundImageSize", + name: 'headerBackgroundImageSize', + label: trans('style.backgroundImageSize'), + headerBackgroundImageSize: 'headerBackgroundImageSize', }, { - name: "headerBackgroundImagePosition", - label: trans("style.backgroundImagePosition"), - headerBackgroundImagePosition: "headerBackgroundImagePosition", + name: 'headerBackgroundImagePosition', + label: trans('style.backgroundImagePosition'), + headerBackgroundImagePosition: 'headerBackgroundImagePosition', }, { - name: "headerBackgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - headerBackgroundImageOrigin: "headerBackgroundImageOrigin", + name: 'headerBackgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + headerBackgroundImageOrigin: 'headerBackgroundImageOrigin', }, ] as const; @@ -802,116 +828,116 @@ export const ContainerSiderStyle = [ CONTAINER_SIDER_PADDING, SIDER_BACKGROUND, { - name: "siderBackgroundImage", - label: trans("style.backgroundImage"), - siderBackgroundImage: "siderBackgroundImage", + name: 'siderBackgroundImage', + label: trans('style.backgroundImage'), + siderBackgroundImage: 'siderBackgroundImage', }, { - name: "siderBackgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - siderBackgroundImageRepeat: "siderBackgroundImageRepeat", + name: 'siderBackgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + siderBackgroundImageRepeat: 'siderBackgroundImageRepeat', }, { - name: "siderBackgroundImageSize", - label: trans("style.backgroundImageSize"), - siderBackgroundImageSize: "siderBackgroundImageSize", + name: 'siderBackgroundImageSize', + label: trans('style.backgroundImageSize'), + siderBackgroundImageSize: 'siderBackgroundImageSize', }, { - name: "siderBackgroundImagePosition", - label: trans("style.backgroundImagePosition"), - siderBackgroundImagePosition: "siderBackgroundImagePosition", + name: 'siderBackgroundImagePosition', + label: trans('style.backgroundImagePosition'), + siderBackgroundImagePosition: 'siderBackgroundImagePosition', }, { - name: "siderBackgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - siderBackgroundImageOrigin: "siderBackgroundImageOrigin", + name: 'siderBackgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + siderBackgroundImageOrigin: 'siderBackgroundImageOrigin', }, ] as const; export const ContainerBodyStyle = [ CONTAINER_BODY_PADDING, { - name: "background", - label: trans("style.background"), - depName: "background", + name: 'background', + label: trans('style.background'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", + name: 'backgroundImage', + label: trans('style.backgroundImage'), + backgroundImage: 'backgroundImage', }, { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", + name: 'backgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + backgroundImageRepeat: 'backgroundImageRepeat', }, { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", + name: 'backgroundImageSize', + label: trans('style.backgroundImageSize'), + backgroundImageSize: 'backgroundImageSize', }, { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", + name: 'backgroundImagePosition', + label: trans('style.backgroundImagePosition'), + backgroundImagePosition: 'backgroundImagePosition', }, { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", + name: 'backgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + backgroundImageOrigin: 'backgroundImageOrigin', }, ] as const; export const ContainerFooterStyle = [ CONTAINER_FOOTER_PADDING, { - name: "footerBackground", - label: trans("style.background"), - depName: "background", + name: 'footerBackground', + label: trans('style.background'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "footerBackgroundImage", - label: trans("style.backgroundImage"), - footerBackgroundImage: "footerBackgroundImage", + name: 'footerBackgroundImage', + label: trans('style.backgroundImage'), + footerBackgroundImage: 'footerBackgroundImage', }, { - name: "footerBackgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - footerBackgroundImageRepeat: "footerBackgroundImageRepeat", + name: 'footerBackgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + footerBackgroundImageRepeat: 'footerBackgroundImageRepeat', }, { - name: "footerBackgroundImageSize", - label: trans("style.backgroundImageSize"), - footerBackgroundImageSize: "footerBackgroundImageSize", + name: 'footerBackgroundImageSize', + label: trans('style.backgroundImageSize'), + footerBackgroundImageSize: 'footerBackgroundImageSize', }, { - name: "footerBackgroundImagePosition", - label: trans("style.backgroundImagePosition"), - footerBackgroundImagePosition: "footerBackgroundImagePosition", + name: 'footerBackgroundImagePosition', + label: trans('style.backgroundImagePosition'), + footerBackgroundImagePosition: 'footerBackgroundImagePosition', }, { - name: "footerBackgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - footerBackgroundImageOrigin: "footerBackgroundImageOrigin", + name: 'footerBackgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + footerBackgroundImageOrigin: 'footerBackgroundImageOrigin', }, ] as const; export const SliderStyle = [ FILL, { - name: "thumbBorder", - label: trans("style.thumbBorder"), - depName: "fill", + name: 'thumbBorder', + label: trans('style.thumbBorder'), + depName: 'fill', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "thumb", - label: trans("style.thumb"), + name: 'thumb', + label: trans('style.thumb'), color: SURFACE_COLOR, }, TRACK, @@ -936,9 +962,9 @@ export const ColorPickerStyle = [ export const AvatarStyle = [ { - name: "background", - label: trans("avatarComp.avatarBackground"), - color: "#bfbfbf", + name: 'background', + label: trans('avatarComp.avatarBackground'), + color: '#bfbfbf', }, FILL, ] as const; @@ -955,18 +981,18 @@ export const avatarLabelStyle = [ export const avatarGroupStyle = [ { - name: "fill", - label: trans("style.fill"), - color: "#FFFFFF", + name: 'fill', + label: trans('style.fill'), + color: '#FFFFFF', }, - getBackground("primary"), + getBackground('primary'), ] as const; export const BadgeStyle = [ { - name: "badgeColor", - label: trans("floatButton.badgeColor"), - color: "#ff4d4f", + name: 'badgeColor', + label: trans('floatButton.badgeColor'), + color: '#ff4d4f', }, ] as const; @@ -983,16 +1009,16 @@ export const TransferStyle = [ ] as const; export const CardStyle = [ - getStaticBackground("#ffffff"), + getStaticBackground('#ffffff'), { - name: "IconColor", - label: trans("card.IconColor"), - color: "#000000", + name: 'IconColor', + label: trans('card.IconColor'), + color: '#000000', }, { - name: "activateColor", - label: trans("card.hoverColor"), - depTheme: "primary", + name: 'activateColor', + label: trans('card.hoverColor'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1006,42 +1032,37 @@ export const CardHeaderStyle = [ ] as const; export const timerStyle = [ - getBackground("primarySurface"), + getBackground('primarySurface'), ...STYLING_FIELDS_SEQUENCE, ] as const; export const startButtonStyle = [ - getBackground("primarySurface"), + getBackground('primarySurface'), ...STYLING_FIELDS_SEQUENCE, ] as const; // end export const LabelStyle = [ - ...replaceAndMergeMultipleStyles([...InputLikeStyle], "text", [LABEL]).filter( - (style) => style.name !== "radius" && style.name !== "background" + ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter( + (style) => style.name !== 'radius' && style.name !== 'background' ), ]; export const InputFieldStyle = [ getStaticBackground(SURFACE_COLOR), - { - name: "animation", - label: trans("style.animation"), - animation: "animation", - }, ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; export const RatingStyle = [ { - name: "checked", - label: trans("style.checked"), - color: "#FFD400", + name: 'checked', + label: trans('style.checked'), + color: '#FFD400', }, { - name: "unchecked", - label: trans("style.unchecked"), + name: 'unchecked', + label: trans('style.unchecked'), color: SECOND_SURFACE_COLOR, }, MARGIN, @@ -1050,20 +1071,20 @@ export const RatingStyle = [ export const SwitchStyle = [ { - name: "handle", - label: trans("style.handle"), + name: 'handle', + label: trans('style.handle'), color: SURFACE_COLOR, }, { - name: "unchecked", - label: trans("style.unchecked"), - depName: "handle", + name: 'unchecked', + label: trans('style.unchecked'), + depName: 'handle', transformer: handleToUnchecked, }, { - name: "checked", - label: trans("style.checked"), - depTheme: "primary", + name: 'checked', + label: trans('style.checked'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1072,41 +1093,41 @@ export const SwitchStyle = [ ] as const; export const SelectStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [ - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), ]), ...ACCENT_VALIDATE, ] as const; const multiSelectCommon = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [ - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), ]), { - name: "tags", - label: trans("style.tags"), - color: "#F5F5F6", - platform: "pc", + name: 'tags', + label: trans('style.tags'), + color: '#F5F5F6', + platform: 'pc', }, { - name: "tagsText", - label: trans("style.tagsText"), - depName: "tags", + name: 'tagsText', + label: trans('style.tagsText'), + depName: 'tags', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, - platform: "pc", + platform: 'pc', }, ] as const; export const MultiSelectStyle = [ ...multiSelectCommon, { - name: "multiIcon", - label: trans("style.multiIcon"), - depTheme: "primary", + name: 'multiIcon', + label: trans('style.multiIcon'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, - platform: "pc", + platform: 'pc', }, ...ACCENT_VALIDATE, ] as const; @@ -1122,18 +1143,18 @@ export const TabContainerStyle = [ [ ...ContainerStyle.filter( (style) => - ["border", "radius", "f", "margin", "padding"].includes( + ['border', 'radius', 'f', 'margin', 'padding'].includes( style.name ) === false ), ...STYLING_FIELDS_SEQUENCE, ], - "text", + 'text', [ { - name: "tabText", - label: trans("style.tabText"), - depName: "headerBackground", + name: 'tabText', + label: trans('style.tabText'), + depName: 'headerBackground', depType: TEXT, transformer: toSelf, }, @@ -1155,7 +1176,7 @@ export const ModalStyle = [ ] as const; export const CascaderStyle = [ - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), + ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, 'pc'), TEXT, ACCENT, MARGIN, @@ -1165,36 +1186,36 @@ export const CascaderStyle = [ function checkAndUncheck() { return [ { - name: "checkedBackground", - label: trans("style.checkedBackground"), - depTheme: "primary", + name: 'checkedBackground', + label: trans('style.checkedBackground'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "uncheckedBackground", - label: trans("style.uncheckedBackground"), + name: 'uncheckedBackground', + label: trans('style.uncheckedBackground'), color: SURFACE_COLOR, }, { - name: "uncheckedBorder", - label: trans("style.uncheckedBorder"), - depName: "uncheckedBackground", + name: 'uncheckedBorder', + label: trans('style.uncheckedBorder'), + depName: 'uncheckedBackground', transformer: backgroundToBorder, }, ] as const; } export const CheckboxStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ STATIC_TEXT, VALIDATE, - ]).filter((style) => style.name !== "border"), + ]).filter((style) => style.name !== 'border'), ...checkAndUncheck(), { - name: "checked", - label: trans("style.checked"), - depName: "checkedBackground", + name: 'checked', + label: trans('style.checked'), + depName: 'checkedBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1202,15 +1223,15 @@ export const CheckboxStyle = [ ] as const; export const RadioStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ STATIC_TEXT, VALIDATE, - ]).filter((style) => style.name !== "border" && style.name !== "radius"), + ]).filter((style) => style.name !== 'border' && style.name !== 'radius'), ...checkAndUncheck(), { - name: "checked", - label: trans("style.checked"), - depName: "uncheckedBackground", + name: 'checked', + label: trans('style.checked'), + depName: 'uncheckedBackground', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1220,23 +1241,23 @@ export const RadioStyle = [ export const SegmentStyle = [ LABEL, ...STYLING_FIELDS_SEQUENCE.filter( - (style) => ["border", "borderWidth"].includes(style.name) === false + (style) => ['border', 'borderWidth'].includes(style.name) === false ), { - name: "indicatorBackground", - label: trans("style.indicatorBackground"), + name: 'indicatorBackground', + label: trans('style.indicatorBackground'), color: SURFACE_COLOR, }, { - name: "background", - label: trans("style.background"), - depName: "indicatorBackground", + name: 'background', + label: trans('style.background'), + depName: 'indicatorBackground', transformer: handleToSegmentBackground, }, { - name: "text", - label: trans("text"), - depName: "indicatorBackground", + name: 'text', + label: trans('text'), + depName: 'indicatorBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1245,69 +1266,69 @@ export const SegmentStyle = [ export const StepsStyle = [ { - name: "activeBackground", - label: trans("style.accent"), - depName: "activeBackground", + name: 'activeBackground', + label: trans('style.accent'), + depName: 'activeBackground', transformer: handleToSegmentBackground, }, { - name: "titleText", - label: trans("title"), - depName: "background", + name: 'titleText', + label: trans('title'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ...STYLING_FIELDS_SEQUENCE.filter( (style) => - ["background", "textSize", "textDecoration"].includes(style.name) === + ['background', 'textSize', 'textDecoration'].includes(style.name) === false ), getBackground(), { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", + name: 'backgroundImage', + label: trans('style.backgroundImage'), + backgroundImage: 'backgroundImage', }, { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", + name: 'backgroundImageRepeat', + label: trans('style.backgroundImageRepeat'), + backgroundImageRepeat: 'backgroundImageRepeat', }, { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", + name: 'backgroundImageSize', + label: trans('style.backgroundImageSize'), + backgroundImageSize: 'backgroundImageSize', }, { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", + name: 'backgroundImagePosition', + label: trans('style.backgroundImagePosition'), + backgroundImagePosition: 'backgroundImagePosition', }, { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", + name: 'backgroundImageOrigin', + label: trans('style.backgroundImageOrigin'), + backgroundImageOrigin: 'backgroundImageOrigin', }, ] as const; const LinkTextStyle = [ { - name: "text", - label: trans("text"), - depTheme: "primary", + name: 'text', + label: trans('text'), + depTheme: 'primary', depType: DEP_TYPE.SELF, transformer: toSelf, }, { - name: "hoverText", - label: "Hover text", // trans("style.hoverRowBackground"), - depName: "text", + name: 'hoverText', + label: 'Hover text', // trans("style.hoverRowBackground"), + depName: 'text', transformer: handleToHoverLink, }, { - name: "activeText", - label: "Active text", // trans("style.hoverRowBackground"), - depName: "text", + name: 'activeText', + label: 'Active text', // trans("style.hoverRowBackground"), + depName: 'text', transformer: handleToHoverLink, }, ] as const; @@ -1325,9 +1346,9 @@ export const TableToolbarStyle = [ getBackground(), getStaticBorder(), { - name: "toolbarText", - label: trans("style.toolbarText"), - depName: "toolbarBackground", + name: 'toolbarText', + label: trans('style.toolbarText'), + depName: 'toolbarBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: toSelf, }, @@ -1340,23 +1361,23 @@ export const TableHeaderStyle = [ FONT_STYLE, TEXT, getStaticBackground(SURFACE_COLOR), - getBackground("primarySurface"), + getBackground('primarySurface'), { - name: "headerBackground", - label: trans("style.tableHeaderBackground"), - depName: "background", + name: 'headerBackground', + label: trans('style.tableHeaderBackground'), + depName: 'background', transformer: handleToHeadBg, }, getStaticBorder(), { - name: "borderWidth", - label: trans("style.borderWidth"), - borderWidth: "borderWidth", + name: 'borderWidth', + label: trans('style.borderWidth'), + borderWidth: 'borderWidth', }, { - name: "headerText", - label: trans("style.tableHeaderText"), - depName: "headerBackground", + name: 'headerText', + label: trans('style.tableHeaderText'), + depName: 'headerBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1371,29 +1392,29 @@ export const TableRowStyle = [ ...BG_STATIC_BORDER_RADIUS, getBackground(), { - name: "selectedRowBackground", - label: trans("style.selectedRowBackground"), - depName: "background", - depTheme: "primary", + name: 'selectedRowBackground', + label: trans('style.selectedRowBackground'), + depName: 'background', + depTheme: 'primary', transformer: handleToSelectedRow, }, { - name: "hoverRowBackground", - label: trans("style.hoverRowBackground"), - depName: "background", + name: 'hoverRowBackground', + label: trans('style.hoverRowBackground'), + depName: 'background', transformer: handleToHoverRow, }, { - name: "alternateBackground", - label: trans("style.alternateRowBackground"), - depName: "background", + name: 'alternateBackground', + label: trans('style.alternateRowBackground'), + depName: 'background', depType: DEP_TYPE.SELF, transformer: toSelf, }, ] as const; export const TableColumnStyle = [ - getStaticBackground("#00000000"), + getStaticBackground('#00000000'), getStaticBorder(), MARGIN, @@ -1410,15 +1431,15 @@ export const TableColumnLinkStyle = [...LinkTextStyle] as const; export const FileStyle = [ // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), getStaticBackground(SURFACE_COLOR), - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [ - getStaticBorder("#00000000"), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [ + getStaticBorder('#00000000'), ]), // TEXT, ACCENT, MARGIN, PADDING ] as const; export const FileViewerStyle = [ - getStaticBackground("#FFFFFF"), - getStaticBorder("#00000000"), + getStaticBackground('#FFFFFF'), + getStaticBorder('#00000000'), RADIUS, MARGIN, PADDING, @@ -1427,7 +1448,7 @@ export const FileViewerStyle = [ export const IframeStyle = [ getBackground(), - getStaticBorder("#00000000"), + getStaticBorder('#00000000'), RADIUS, BORDER_WIDTH, MARGIN, @@ -1446,21 +1467,21 @@ export const DateTimeStyle = [ function handleToHoverLink(color: string) { if (isDarkColor(color)) { - return "#FFFFFF23"; + return '#FFFFFF23'; } else { - return "#00000007"; + return '#00000007'; } } export const LinkStyle = [ { - name: "background", - label: trans("style.background"), - depTheme: "canvas", + name: 'background', + label: trans('style.background'), + depTheme: 'canvas', depType: DEP_TYPE.SELF, transformer: toSelf, }, - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ ...LinkTextStyle, ]), ] as const; @@ -1472,11 +1493,11 @@ export const DividerStyle = [ color: darkenColor(SECOND_SURFACE_COLOR, 0.1), }, */ ...STYLING_FIELDS_SEQUENCE.map((style) => { - if (style.name === "text") { + if (style.name === 'text') { return { - name: "text", - label: trans("text"), - depName: "color", + name: 'text', + label: trans('text'), + depName: 'color', transformer: handleToDividerText, }; } @@ -1486,17 +1507,17 @@ export const DividerStyle = [ // Hidden border and borderWidth properties as AntD doesnt allow these properties for progress bar export const ProgressStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ { - name: "text", - label: trans("text"), - depTheme: "canvas", + name: 'text', + label: trans('text'), + depTheme: 'canvas', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ]).filter( (style) => - ["border", "borderWidth", "textTransform", "textDecoration"].includes( + ['border', 'borderWidth', 'textTransform', 'textDecoration'].includes( style.name ) === false ), @@ -1506,20 +1527,20 @@ export const ProgressStyle = [ ] as const; export const CircleProgressStyle = [ - ...ProgressStyle.filter((style) => style.name !== "radius"), + ...ProgressStyle.filter((style) => style.name !== 'radius'), ]; export const NavigationStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ACCENT, - getStaticBackground("#FFFFFF00"), + getStaticBackground('#FFFFFF00'), ]), // { // name: "text", @@ -1541,7 +1562,7 @@ export const NavigationStyle = [ ] as const; export const ImageStyle = [ - getStaticBorder("#00000000"), + getStaticBorder('#00000000'), RADIUS, BORDER_WIDTH, MARGIN, @@ -1549,8 +1570,8 @@ export const ImageStyle = [ ] as const; export const IconStyle = [ - getStaticBackground("#00000000"), - getStaticBorder("#00000000"), + getStaticBackground('#00000000'), + getStaticBorder('#00000000'), FILL, RADIUS, BORDER_WIDTH, @@ -1565,9 +1586,9 @@ export const JsonSchemaFormStyle = BG_STATIC_BORDER_RADIUS; export const QRCodeStyle = [ getBackground(), { - name: "color", - label: trans("color"), - color: "#000000", + name: 'color', + label: trans('color'), + color: '#000000', }, MARGIN, PADDING, @@ -1579,19 +1600,19 @@ export const QRCodeStyle = [ export const TimeLineStyle = [ getBackground(), { - name: "titleColor", - label: trans("timeLine.titleColor"), - color: "#000000", + name: 'titleColor', + label: trans('timeLine.titleColor'), + color: '#000000', }, { - name: "labelColor", - label: trans("timeLine.labelColor"), - color: "#000000", + name: 'labelColor', + label: trans('timeLine.labelColor'), + color: '#000000', }, { - name: "subTitleColor", - label: trans("timeLine.subTitleColor"), - color: "#848484", + name: 'subTitleColor', + label: trans('timeLine.subTitleColor'), + color: '#848484', }, MARGIN, PADDING, @@ -1613,48 +1634,48 @@ export const DrawerStyle = [getBackground()] as const; export const JsonEditorStyle = [LABEL] as const; -export const EchartsStyle = [getBackground("primarySurface")] as const; +export const EchartsStyle = [getBackground('primarySurface')] as const; export const CalendarStyle = [ - getBackground("primarySurface"), + getBackground('primarySurface'), { - name: "border", - label: trans("style.border"), - depName: "background", + name: 'border', + label: trans('style.border'), + depName: 'background', transformer: calendarBackgroundToBorder, }, RADIUS, { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: handleCalendarText, }, { - name: "headerBtnBackground", - label: trans("calendar.headerBtnBackground"), - depName: "background", + name: 'headerBtnBackground', + label: trans('calendar.headerBtnBackground'), + depName: 'background', transformer: handleLightenColor, }, { - name: "btnText", - label: trans("calendar.btnText"), - depName: "headerBtnBackground", + name: 'btnText', + label: trans('calendar.btnText'), + depName: 'headerBtnBackground', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, { - name: "title", - label: trans("calendar.title"), - depName: "background", + name: 'title', + label: trans('calendar.title'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, { - name: "selectBackground", - label: trans("calendar.selectBackground"), - depTheme: "primary", + name: 'selectBackground', + label: trans('calendar.selectBackground'), + depTheme: 'primary', transformer: handleCalendarSelectColor, }, ] as const; @@ -1662,19 +1683,19 @@ export const CalendarStyle = [ export const SignatureStyle = [ ...getBgBorderRadiusByBg(), { - name: "pen", - label: trans("style.pen"), - color: "#000000", + name: 'pen', + label: trans('style.pen'), + color: '#000000', }, { - name: "tips", - label: trans("style.tips"), - color: "#B8B9BF", + name: 'tips', + label: trans('style.tips'), + color: '#B8B9BF', }, { - name: "footerIcon", - label: trans("style.footerIcon"), - color: "#222222", + name: 'footerIcon', + label: trans('style.footerIcon'), + color: '#222222', }, MARGIN, PADDING, @@ -1684,9 +1705,9 @@ export const SignatureStyle = [ // Added by Aqib Mirza export const LottieStyle = [ { - name: "background", - label: trans("style.background"), - depTheme: "canvas", + name: 'background', + label: trans('style.background'), + depTheme: 'canvas', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1696,9 +1717,9 @@ export const LottieStyle = [ export const CommentStyle = [ { - name: "background", - label: trans("style.background"), - depTheme: "primarySurface", + name: 'background', + label: trans('style.background'), + depTheme: 'primarySurface', depType: DEP_TYPE.SELF, transformer: toSelf, }, @@ -1722,9 +1743,9 @@ export const ResponsiveLayoutColStyle = [ export const NavLayoutStyle = [ ...getBgBorderRadiusByBg(), { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', // depTheme: "primary", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, @@ -1734,13 +1755,13 @@ export const NavLayoutStyle = [ ] as const; export const NavLayoutItemStyle = [ - getBackground("primarySurface"), - getStaticBorder("transparent"), + getBackground('primarySurface'), + getStaticBorder('transparent'), RADIUS, { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, @@ -1749,34 +1770,34 @@ export const NavLayoutItemStyle = [ ] as const; export const NavLayoutItemHoverStyle = [ - getBackground("canvas"), - getStaticBorder("transparent"), + getBackground('canvas'), + getStaticBorder('transparent'), { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ] as const; export const NavLayoutItemActiveStyle = [ - getBackground("primary"), - getStaticBorder("transparent"), + getBackground('primary'), + getStaticBorder('transparent'), { - name: "text", - label: trans("text"), - depName: "background", + name: 'text', + label: trans('text'), + depName: 'background', depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, ] as const; -export const CarouselStyle = [getBackground("canvas")] as const; +export const CarouselStyle = [getBackground('canvas')] as const; export const RichTextEditorStyle = [ getStaticBorder(), - getBackground("primarySurface"), + getBackground('primarySurface'), RADIUS, BORDER_WIDTH, ] as const; @@ -1877,58 +1898,58 @@ export type NavLayoutItemActiveStyleType = StyleConfigType< >; export function widthCalculator(margin: string) { - const marginArr = margin?.trim().replace(/\s+/g, " ").split(" ") || ""; + const marginArr = margin?.trim().replace(/\s+/g, ' ').split(' ') || ''; if (marginArr.length === 1) { return `calc(100% - ${ - parseInt(margin.replace(/[^\d.]/g, "")) * 2 + - (margin.replace(/[0-9]/g, "") || "px") + parseInt(margin.replace(/[^\d.]/g, '')) * 2 + + (margin.replace(/[0-9]/g, '') || 'px') })`; } else if (marginArr.length === 2 || marginArr.length === 3) { return `calc(100% - ${ - parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 + - (marginArr[1].replace(/[0-9]/g, "") || "px") + parseInt(marginArr[1].replace(/[^\d.]/g, '')) * 2 + + (marginArr[1].replace(/[0-9]/g, '') || 'px') })`; } else { return `calc(100% - ${ - parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") + - (marginArr[1]?.replace(/[0-9]/g, "") || "px") + parseInt(marginArr[1]?.replace(/[^\d.]/g, '') || '0') + + (marginArr[1]?.replace(/[0-9]/g, '') || 'px') } - ${ - parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") + - (marginArr[3]?.replace(/[0-9]/g, "") || "px") + parseInt(marginArr[3]?.replace(/[^\d.]/g, '') || '0') + + (marginArr[3]?.replace(/[0-9]/g, '') || 'px') })`; } } export function heightCalculator(margin: string) { - const marginArr = margin?.trim().split(" ") || ""; + const marginArr = margin?.trim().split(' ') || ''; if (marginArr.length === 1 || marginArr.length === 2) { return `calc(100% - ${ - parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 + - (marginArr[0].replace(/[0-9]/g, "") || "px") + parseInt(marginArr[0].replace(/[^\d.]/g, '')) * 2 + + (marginArr[0].replace(/[0-9]/g, '') || 'px') })`; } else if (marginArr.length > 2) { return `calc(100% - ${ - parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + - (marginArr[0]?.replace(/[0-9]/g, "") || "px") + parseInt(marginArr[0]?.replace(/[^\d.]/g, '') || '0') + + (marginArr[0]?.replace(/[0-9]/g, '') || 'px') } - ${ - parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") + - (marginArr[2]?.replace(/[0-9]/g, "") || "px") + parseInt(marginArr[2]?.replace(/[^\d.]/g, '') || '0') + + (marginArr[2]?.replace(/[0-9]/g, '') || 'px') })`; } } export function marginCalculator(margin: string) { - const marginArr = margin?.trim().split(" ") || ""; + const marginArr = margin?.trim().split(' ') || ''; if (marginArr.length === 1) { - return parseInt(margin.replace(/[^\d.]/g, "")) * 2; + return parseInt(margin.replace(/[^\d.]/g, '')) * 2; } else if (marginArr.length === 2) { - return parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2; + return parseInt(marginArr[0].replace(/[^\d.]/g, '')) * 2; } else { return ( - parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + - parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") + parseInt(marginArr[0]?.replace(/[^\d.]/g, '') || '0') + + parseInt(marginArr[2]?.replace(/[^\d.]/g, '') || '0') ); } } -export type { ThemeDetail }; +export type {ThemeDetail}; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index c48f7d2ab..3fced9b57 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -496,6 +496,8 @@ export const en = { style: { animation: 'Animation', + animationDelay: 'Animation Delay', + animationDuration: 'Animation Duration', resetTooltip: 'Reset styles. Clear the input field to reset an individual style.', textColor: 'Text Color', From d10f19b9e2b5f32af0ac025998aeb25e6abd82ba Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Tue, 14 May 2024 21:32:05 +0500 Subject: [PATCH 007/155] opacity added --- .../lowcoder/src/api/commonSettingApi.ts | 1 + .../src/comps/controls/styleControl.tsx | 139 +++++++++++------- .../comps/controls/styleControlConstants.tsx | 15 +- .../packages/lowcoder/src/i18n/locales/en.ts | 1 + 4 files changed, 103 insertions(+), 53 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index ce9286ea0..726fd5d34 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -51,6 +51,7 @@ export interface ThemeDetail { animation?: string; animationDelay?: string; animationDuration?: string; + opacity?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 9645f5db9..581b1c26c 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -46,6 +46,7 @@ import { SimpleColorConfig, SingleColorConfig, MarginConfig, + OpacityConfig, AnimationConfig, AnimationDelayConfig, AnimationDurationConfig, @@ -223,6 +224,10 @@ function isMarginConfig(config: SingleColorConfig): config is MarginConfig { return config.hasOwnProperty('margin'); } +function isOpacityConfig(config: SingleColorConfig): config is OpacityConfig { + return config.hasOwnProperty('opacity'); +} + function isAnimationConfig( config: SingleColorConfig ): config is AnimationConfig { @@ -349,6 +354,10 @@ function isEmptyBorderStyle(borderStyle: string) { return _.isEmpty(borderStyle); } +function isEmptyOpacity(opacity: string) { + return _.isEmpty(opacity); +} + function isEmptyAnimation(animation: string) { return _.isEmpty(animation); } @@ -536,6 +545,10 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyOpacity(props[name]) && isOpacityConfig(config)) { + res[name] = props[name]; + return; + } if (!isEmptyAnimation(props[name]) && isAnimationConfig(config)) { res[name] = props[name]; return; @@ -646,6 +659,9 @@ function calcColors>( if (isMarginConfig(config)) { res[name] = themeWithDefault[config.margin]; } + if (isOpacityConfig(config)) { + res[name] = themeWithDefault[config.opacity]; + } if (isAnimationConfig(config)) { res[name] = themeWithDefault[config.animation]; } @@ -797,19 +813,20 @@ const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` color: #888; `; +const OpacityPropIcon = styled(BorderWidthIcon)` + opacity: 0.33; +`; + const AnimationPropIcon = styled(BorderWidthIcon)` animation: bounce; - animation-delay: 2s; `; const AnimationDelayPropIcon = styled(BorderWidthIcon)` - animation: bounce; animation-delay: 2s; `; const AnimationDurationPropIcon = styled(BorderWidthIcon)` - animation: bounce; - animation-delay: 2s; + animation-duration: 2s; `; const RotationPropIcon = styled(RotationIcon)` @@ -865,6 +882,7 @@ export function styleControl( if ( name === 'radius' || name === 'borderWidth' || + name === 'opacity' || name === 'animation' || name === 'animationDelay' || name === 'animationDuration' || @@ -947,6 +965,7 @@ export function styleControl( name === 'containerFooterPadding' || name === 'containerBodyPadding' || name === 'borderWidth' || + name === 'opacity' || name === 'animation' || name === 'animationDelay' || name === 'animationDuration' || @@ -1044,7 +1063,7 @@ export function styleControl( ), placeholder: props[name], }) - : name === 'animation' + : name === 'opacity' ? ( children[name] as InstanceType< typeof StringControl @@ -1052,11 +1071,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDelay' + : name === 'animation' ? ( children[name] as InstanceType< typeof StringControl @@ -1064,11 +1083,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDuration' + : name === 'animationDelay' ? ( children[name] as InstanceType< typeof StringControl @@ -1076,11 +1095,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'margin' + : name === 'animationDuration' ? ( children[name] as InstanceType< typeof StringControl @@ -1088,15 +1107,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'padding' || - name === 'containerHeaderPadding' || - name === 'containerSiderPadding' || - name === 'containerFooterPadding' || - name === 'containerBodyPadding' + : name === 'margin' ? ( children[name] as InstanceType< typeof StringControl @@ -1104,11 +1119,15 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textSize' + : name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' ? ( children[name] as InstanceType< typeof StringControl @@ -1116,11 +1135,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textWeight' + : name === 'textSize' ? ( children[name] as InstanceType< typeof StringControl @@ -1128,11 +1147,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontFamily' + : name === 'textWeight' ? ( children[name] as InstanceType< typeof StringControl @@ -1140,11 +1159,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textDecoration' + : name === 'fontFamily' ? ( children[name] as InstanceType< typeof StringControl @@ -1152,11 +1171,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textTransform' + : name === 'textDecoration' ? ( children[ name @@ -1166,11 +1185,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontStyle' + : name === 'textTransform' ? ( children[ name @@ -1180,15 +1199,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'backgroundImage' || - name === - 'headerBackgroundImage' || - name === - 'footerBackgroundImage' + : name === 'fontStyle' ? ( children[ name @@ -1198,16 +1213,16 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) : name === - 'backgroundImageRepeat' || + 'backgroundImage' || name === - 'headerBackgroundImageRepeat' || + 'headerBackgroundImage' || name === - 'footerBackgroundImageRepeat' + 'footerBackgroundImage' ? ( children[ name @@ -1217,12 +1232,17 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'rotation' + : name === + 'backgroundImageRepeat' || + name === + 'headerBackgroundImageRepeat' || + name === + 'footerBackgroundImageRepeat' ? ( children[ name @@ -1232,21 +1252,36 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : children[ - name - ].propertyView({ - label: config.label, - panelDefaultColor: - props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - })} + : name === 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : children[ + name + ].propertyView({ + label: config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: depMsg, + })}
); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index eef0768c0..b6e395ef7 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -27,6 +27,10 @@ export type RotationConfig = CommonColorConfig & { readonly rotation: string; }; +export type OpacityConfig = CommonColorConfig & { + readonly opacity: string; +}; + export type AnimationConfig = CommonColorConfig & { readonly animation: string; }; @@ -203,7 +207,8 @@ export type SingleColorConfig = | SiderBackgroundImageOriginConfig | AnimationConfig | AnimationDelayConfig - | AnimationDurationConfig; + | AnimationDurationConfig + | OpacityConfig; export const defaultTheme: ThemeDetail = { primary: '#3377FF', @@ -219,6 +224,7 @@ export const defaultTheme: ThemeDetail = { animation: 'bounce', animationDelay: '2s', animationDuration: '2s', + opacity: '0.33', }; export const SURFACE_COLOR = '#FFFFFF'; @@ -420,6 +426,12 @@ const ROTATION = { rotation: 'rotation', } as const; +const OPACITY = { + name: 'opacity', + label: trans('style.opacity'), + opacity: 'opacity', +} as const; + const ANIMATION = { name: 'animation', label: trans('style.animation'), @@ -627,6 +639,7 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ ANIMATION, ANIMATIONDELAY, ANIMATIONDURATION, + OPACITY, ]; const FILL = { diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 3fced9b57..2b8305b13 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -495,6 +495,7 @@ export const en = { // fourth part style: { + opacity: 'opacity', animation: 'Animation', animationDelay: 'Animation Delay', animationDuration: 'Animation Duration', From 8c6917eb686de13d18bc8f64da4ecd5034c847de Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Tue, 14 May 2024 21:40:08 +0500 Subject: [PATCH 008/155] box shadow added --- .../lowcoder/src/api/commonSettingApi.ts | 1 + .../src/comps/controls/styleControl.tsx | 139 ++++++++++++------ .../comps/controls/styleControlConstants.tsx | 15 +- .../packages/lowcoder/src/i18n/locales/en.ts | 3 +- 4 files changed, 107 insertions(+), 51 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 726fd5d34..7c0eac5f0 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -52,6 +52,7 @@ export interface ThemeDetail { animationDelay?: string; animationDuration?: string; opacity?: string; + boxShadow?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 581b1c26c..75556930f 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -46,6 +46,7 @@ import { SimpleColorConfig, SingleColorConfig, MarginConfig, + BoxShadowConfig, OpacityConfig, AnimationConfig, AnimationDelayConfig, @@ -224,6 +225,12 @@ function isMarginConfig(config: SingleColorConfig): config is MarginConfig { return config.hasOwnProperty('margin'); } +function isBoxShadowConfig( + config: SingleColorConfig +): config is BoxShadowConfig { + return config.hasOwnProperty('boxShadow'); +} + function isOpacityConfig(config: SingleColorConfig): config is OpacityConfig { return config.hasOwnProperty('opacity'); } @@ -358,6 +365,10 @@ function isEmptyOpacity(opacity: string) { return _.isEmpty(opacity); } +function isEmptyBoxShadow(boxShadow: string) { + return _.isEmpty(boxShadow); +} + function isEmptyAnimation(animation: string) { return _.isEmpty(animation); } @@ -545,6 +556,10 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyBoxShadow(props[name]) && isBoxShadowConfig(config)) { + res[name] = props[name]; + return; + } if (!isEmptyOpacity(props[name]) && isOpacityConfig(config)) { res[name] = props[name]; return; @@ -659,6 +674,9 @@ function calcColors>( if (isMarginConfig(config)) { res[name] = themeWithDefault[config.margin]; } + if (isBoxShadowConfig(config)) { + res[name] = themeWithDefault[config.boxShadow]; + } if (isOpacityConfig(config)) { res[name] = themeWithDefault[config.opacity]; } @@ -817,6 +835,10 @@ const OpacityPropIcon = styled(BorderWidthIcon)` opacity: 0.33; `; +const BoxShadowPropIcon = styled(BorderWidthIcon)` + box-shadow: 0.33; +`; + const AnimationPropIcon = styled(BorderWidthIcon)` animation: bounce; `; @@ -882,6 +904,7 @@ export function styleControl( if ( name === 'radius' || name === 'borderWidth' || + name === 'boxShadow' || name === 'opacity' || name === 'animation' || name === 'animationDelay' || @@ -966,6 +989,7 @@ export function styleControl( name === 'containerBodyPadding' || name === 'borderWidth' || name === 'opacity' || + name === 'boxShadow' || name === 'animation' || name === 'animationDelay' || name === 'animationDuration' || @@ -1075,7 +1099,7 @@ export function styleControl( ), placeholder: props[name], }) - : name === 'animation' + : name === 'boxShadow' ? ( children[name] as InstanceType< typeof StringControl @@ -1083,11 +1107,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDelay' + : name === 'animation' ? ( children[name] as InstanceType< typeof StringControl @@ -1095,11 +1119,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDuration' + : name === 'animationDelay' ? ( children[name] as InstanceType< typeof StringControl @@ -1107,11 +1131,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'margin' + : name === 'animationDuration' ? ( children[name] as InstanceType< typeof StringControl @@ -1119,15 +1143,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'padding' || - name === 'containerHeaderPadding' || - name === 'containerSiderPadding' || - name === 'containerFooterPadding' || - name === 'containerBodyPadding' + : name === 'margin' ? ( children[name] as InstanceType< typeof StringControl @@ -1135,11 +1155,15 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textSize' + : name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' ? ( children[name] as InstanceType< typeof StringControl @@ -1147,11 +1171,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textWeight' + : name === 'textSize' ? ( children[name] as InstanceType< typeof StringControl @@ -1159,11 +1183,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontFamily' + : name === 'textWeight' ? ( children[name] as InstanceType< typeof StringControl @@ -1171,11 +1195,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textDecoration' + : name === 'fontFamily' ? ( children[ name @@ -1185,11 +1209,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textTransform' + : name === 'textDecoration' ? ( children[ name @@ -1199,11 +1223,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontStyle' + : name === 'textTransform' ? ( children[ name @@ -1213,16 +1237,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === - 'backgroundImage' || - name === - 'headerBackgroundImage' || - name === - 'footerBackgroundImage' + : name === 'fontStyle' ? ( children[ name @@ -1232,17 +1251,17 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) : name === - 'backgroundImageRepeat' || + 'backgroundImage' || name === - 'headerBackgroundImageRepeat' || + 'headerBackgroundImage' || name === - 'footerBackgroundImageRepeat' + 'footerBackgroundImage' ? ( children[ name @@ -1252,12 +1271,17 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'rotation' + : name === + 'backgroundImageRepeat' || + name === + 'headerBackgroundImageRepeat' || + name === + 'footerBackgroundImageRepeat' ? ( children[ name @@ -1267,21 +1291,38 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : children[ - name - ].propertyView({ - label: config.label, - panelDefaultColor: - props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - })} + : name === 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : children[ + name + ].propertyView({ + label: + config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: depMsg, + })} ); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index b6e395ef7..c13a9578a 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -27,6 +27,10 @@ export type RotationConfig = CommonColorConfig & { readonly rotation: string; }; +export type BoxShadowConfig = CommonColorConfig & { + readonly boxShadow: string; +}; + export type OpacityConfig = CommonColorConfig & { readonly opacity: string; }; @@ -208,7 +212,8 @@ export type SingleColorConfig = | AnimationConfig | AnimationDelayConfig | AnimationDurationConfig - | OpacityConfig; + | OpacityConfig + | BoxShadowConfig; export const defaultTheme: ThemeDetail = { primary: '#3377FF', @@ -225,6 +230,7 @@ export const defaultTheme: ThemeDetail = { animationDelay: '2s', animationDuration: '2s', opacity: '0.33', + boxShadow: '10px 5px 5px red;', }; export const SURFACE_COLOR = '#FFFFFF'; @@ -426,6 +432,12 @@ const ROTATION = { rotation: 'rotation', } as const; +const BOXSHADOW = { + name: 'boxShadow', + label: trans('style.boxShadow'), + boxShadow: 'boxShadow', +} as const; + const OPACITY = { name: 'opacity', label: trans('style.opacity'), @@ -640,6 +652,7 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ ANIMATIONDELAY, ANIMATIONDURATION, OPACITY, + BOXSHADOW, ]; const FILL = { diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 2b8305b13..6a54c1204 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -495,7 +495,8 @@ export const en = { // fourth part style: { - opacity: 'opacity', + boxShadow: 'Box Shadow', + opacity: 'Opacity', animation: 'Animation', animationDelay: 'Animation Delay', animationDuration: 'Animation Duration', From 649410df61e13131cc2189525b99ea743ead3219 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Wed, 15 May 2024 20:55:51 +0500 Subject: [PATCH 009/155] box shadow color added --- .../lowcoder/src/api/commonSettingApi.ts | 1 + .../src/comps/controls/labelControl.tsx | 1 + .../src/comps/controls/styleControl.tsx | 166 ++++++++++++------ .../comps/controls/styleControlConstants.tsx | 17 +- .../packages/lowcoder/src/i18n/locales/en.ts | 1 + 5 files changed, 127 insertions(+), 59 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 7c0eac5f0..103f3c66d 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -53,6 +53,7 @@ export interface ThemeDetail { animationDuration?: string; opacity?: string; boxShadow?: string; + boxShadowColor?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 1f1e88076..611c49d08 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -57,6 +57,7 @@ const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>` props.$style && { ...props.$style, borderRadius: props.$style.radius, + boxShadow: `${props.$style.boxShadow} ${props.$style.boxShadowColor}`, } ); }} diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 75556930f..0c10f31c4 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -48,6 +48,7 @@ import { MarginConfig, BoxShadowConfig, OpacityConfig, + BoxShadowColorConfig, AnimationConfig, AnimationDelayConfig, AnimationDurationConfig, @@ -231,6 +232,12 @@ function isBoxShadowConfig( return config.hasOwnProperty('boxShadow'); } +function isBoxShadowColorConfig( + config: SingleColorConfig +): config is BoxShadowColorConfig { + return config.hasOwnProperty('boxShadowColor'); +} + function isOpacityConfig(config: SingleColorConfig): config is OpacityConfig { return config.hasOwnProperty('opacity'); } @@ -369,6 +376,10 @@ function isEmptyBoxShadow(boxShadow: string) { return _.isEmpty(boxShadow); } +function isEmptyBoxShadowColor(boxShadowColor: string) { + return _.isEmpty(boxShadowColor); +} + function isEmptyAnimation(animation: string) { return _.isEmpty(animation); } @@ -560,6 +571,10 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyBoxShadowColor(props[name]) && isBoxShadowColorConfig(config)) { + res[name] = props[name]; + return; + } if (!isEmptyOpacity(props[name]) && isOpacityConfig(config)) { res[name] = props[name]; return; @@ -677,6 +692,9 @@ function calcColors>( if (isBoxShadowConfig(config)) { res[name] = themeWithDefault[config.boxShadow]; } + if (isBoxShadowColorConfig(config)) { + res[name] = themeWithDefault[config.boxShadowColor]; + } if (isOpacityConfig(config)) { res[name] = themeWithDefault[config.opacity]; } @@ -832,23 +850,39 @@ const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` `; const OpacityPropIcon = styled(BorderWidthIcon)` - opacity: 0.33; + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; + +const BoxShadowColorPropIcon = styled(BorderWidthIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; `; const BoxShadowPropIcon = styled(BorderWidthIcon)` - box-shadow: 0.33; + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; `; const AnimationPropIcon = styled(BorderWidthIcon)` - animation: bounce; + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; `; const AnimationDelayPropIcon = styled(BorderWidthIcon)` - animation-delay: 2s; + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; `; const AnimationDurationPropIcon = styled(BorderWidthIcon)` - animation-duration: 2s; + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; `; const RotationPropIcon = styled(RotationIcon)` @@ -905,6 +939,7 @@ export function styleControl( name === 'radius' || name === 'borderWidth' || name === 'boxShadow' || + name === 'boxShadowColor' || name === 'opacity' || name === 'animation' || name === 'animationDelay' || @@ -989,6 +1024,7 @@ export function styleControl( name === 'containerBodyPadding' || name === 'borderWidth' || name === 'opacity' || + name === 'boxShadowColor' || name === 'boxShadow' || name === 'animation' || name === 'animationDelay' || @@ -1099,7 +1135,7 @@ export function styleControl( ), placeholder: props[name], }) - : name === 'boxShadow' + : name === 'boxShadowColor' ? ( children[name] as InstanceType< typeof StringControl @@ -1107,11 +1143,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animation' + : name === 'boxShadow' ? ( children[name] as InstanceType< typeof StringControl @@ -1119,11 +1155,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDelay' + : name === 'animation' ? ( children[name] as InstanceType< typeof StringControl @@ -1131,11 +1167,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDuration' + : name === 'animationDelay' ? ( children[name] as InstanceType< typeof StringControl @@ -1143,11 +1179,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'margin' + : name === 'animationDuration' ? ( children[name] as InstanceType< typeof StringControl @@ -1155,15 +1191,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'padding' || - name === 'containerHeaderPadding' || - name === 'containerSiderPadding' || - name === 'containerFooterPadding' || - name === 'containerBodyPadding' + : name === 'margin' ? ( children[name] as InstanceType< typeof StringControl @@ -1171,11 +1203,15 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textSize' + : name === 'padding' || + name === 'containerHeaderPadding' || + name === 'containerSiderPadding' || + name === 'containerFooterPadding' || + name === 'containerBodyPadding' ? ( children[name] as InstanceType< typeof StringControl @@ -1183,11 +1219,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textWeight' + : name === 'textSize' ? ( children[name] as InstanceType< typeof StringControl @@ -1195,11 +1231,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontFamily' + : name === 'textWeight' ? ( children[ name @@ -1209,11 +1245,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textDecoration' + : name === 'fontFamily' ? ( children[ name @@ -1223,11 +1259,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textTransform' + : name === 'textDecoration' ? ( children[ name @@ -1237,11 +1273,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontStyle' + : name === 'textTransform' ? ( children[ name @@ -1251,17 +1287,12 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === - 'backgroundImage' || - name === - 'headerBackgroundImage' || - name === - 'footerBackgroundImage' + : name === 'fontStyle' ? ( children[ name @@ -1271,17 +1302,17 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) : name === - 'backgroundImageRepeat' || + 'backgroundImage' || name === - 'headerBackgroundImageRepeat' || + 'headerBackgroundImage' || name === - 'footerBackgroundImageRepeat' + 'footerBackgroundImage' ? ( children[ name @@ -1291,12 +1322,17 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'rotation' + : name === + 'backgroundImageRepeat' || + name === + 'headerBackgroundImageRepeat' || + name === + 'footerBackgroundImageRepeat' ? ( children[ name @@ -1307,22 +1343,38 @@ export function styleControl( label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : children[ - name - ].propertyView({ - label: - config.label, - panelDefaultColor: - props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - })} + : name === 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : children[ + name + ].propertyView({ + label: + config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: depMsg, + })} ); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index c13a9578a..8a5ac77c9 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -31,6 +31,10 @@ export type BoxShadowConfig = CommonColorConfig & { readonly boxShadow: string; }; +export type BoxShadowColorConfig = CommonColorConfig & { + readonly boxShadowColor: string; +}; + export type OpacityConfig = CommonColorConfig & { readonly opacity: string; }; @@ -213,7 +217,8 @@ export type SingleColorConfig = | AnimationDelayConfig | AnimationDurationConfig | OpacityConfig - | BoxShadowConfig; + | BoxShadowConfig + | BoxShadowColorConfig; export const defaultTheme: ThemeDetail = { primary: '#3377FF', @@ -230,7 +235,8 @@ export const defaultTheme: ThemeDetail = { animationDelay: '2s', animationDuration: '2s', opacity: '0.33', - boxShadow: '10px 5px 5px red;', + boxShadow: '10px 5px 5px', + boxShadowColor: '#D7D9E0', }; export const SURFACE_COLOR = '#FFFFFF'; @@ -438,6 +444,12 @@ const BOXSHADOW = { boxShadow: 'boxShadow', } as const; +const BOXSHADOWCOLOR = { + name: 'boxShadowColor', + label: trans('style.boxShadowColor'), + boxShadowColor: 'boxShadowColor', +} as const; + const OPACITY = { name: 'opacity', label: trans('style.opacity'), @@ -653,6 +665,7 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ ANIMATIONDURATION, OPACITY, BOXSHADOW, + BOXSHADOWCOLOR, ]; const FILL = { diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 6a54c1204..4aa32b6c4 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -495,6 +495,7 @@ export const en = { // fourth part style: { + boxShadowColor: 'Box Shadow Color', boxShadow: 'Box Shadow', opacity: 'Opacity', animation: 'Animation', From cebca5ca2440a30afff4f85076f6c1ad24196918 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Wed, 15 May 2024 22:32:01 +0500 Subject: [PATCH 010/155] animation iteration count added --- .../lowcoder/src/api/commonSettingApi.ts | 1 + .../src/comps/controls/styleControl.tsx | 163 ++++++++++++------ .../comps/controls/styleControlConstants.tsx | 15 +- .../packages/lowcoder/src/i18n/locales/en.ts | 1 + 4 files changed, 123 insertions(+), 57 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 103f3c66d..d5e78786d 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -54,6 +54,7 @@ export interface ThemeDetail { opacity?: string; boxShadow?: string; boxShadowColor?: string; + animationIterationCount?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 0c10f31c4..fcccae025 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -47,6 +47,7 @@ import { SingleColorConfig, MarginConfig, BoxShadowConfig, + AnimationIterationCountConfig, OpacityConfig, BoxShadowColorConfig, AnimationConfig, @@ -238,6 +239,12 @@ function isBoxShadowColorConfig( return config.hasOwnProperty('boxShadowColor'); } +function isAnimationIterationCountConfig( + config: SingleColorConfig +): config is AnimationIterationCountConfig { + return config.hasOwnProperty('animationIterationCount'); +} + function isOpacityConfig(config: SingleColorConfig): config is OpacityConfig { return config.hasOwnProperty('opacity'); } @@ -368,6 +375,10 @@ function isEmptyBorderStyle(borderStyle: string) { return _.isEmpty(borderStyle); } +function isEmptyAnimationIterationCount(animationIterationCount: string) { + return _.isEmpty(animationIterationCount); +} + function isEmptyOpacity(opacity: string) { return _.isEmpty(opacity); } @@ -575,6 +586,13 @@ function calcColors>( res[name] = props[name]; return; } + if ( + !isEmptyAnimationIterationCount(props[name]) && + isAnimationIterationCountConfig(config) + ) { + res[name] = props[name]; + return; + } if (!isEmptyOpacity(props[name]) && isOpacityConfig(config)) { res[name] = props[name]; return; @@ -695,6 +713,9 @@ function calcColors>( if (isBoxShadowColorConfig(config)) { res[name] = themeWithDefault[config.boxShadowColor]; } + if (isAnimationIterationCountConfig(config)) { + res[name] = themeWithDefault[config.animationIterationCount]; + } if (isOpacityConfig(config)) { res[name] = themeWithDefault[config.opacity]; } @@ -849,6 +870,12 @@ const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` color: #888; `; +const AnimationIterationCountPropIcon = styled(BorderWidthIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; + const OpacityPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; @@ -940,6 +967,7 @@ export function styleControl( name === 'borderWidth' || name === 'boxShadow' || name === 'boxShadowColor' || + name === 'animationIterationCount' || name === 'opacity' || name === 'animation' || name === 'animationDelay' || @@ -1023,6 +1051,7 @@ export function styleControl( name === 'containerFooterPadding' || name === 'containerBodyPadding' || name === 'borderWidth' || + name === 'animationIterationCount' || name === 'opacity' || name === 'boxShadowColor' || name === 'boxShadow' || @@ -1123,7 +1152,7 @@ export function styleControl( ), placeholder: props[name], }) - : name === 'opacity' + : name === 'animationIterationCount' ? ( children[name] as InstanceType< typeof StringControl @@ -1131,11 +1160,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'boxShadowColor' + : name === 'opacity' ? ( children[name] as InstanceType< typeof StringControl @@ -1143,11 +1172,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'boxShadow' + : name === 'boxShadowColor' ? ( children[name] as InstanceType< typeof StringControl @@ -1155,11 +1184,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animation' + : name === 'boxShadow' ? ( children[name] as InstanceType< typeof StringControl @@ -1167,11 +1196,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDelay' + : name === 'animation' ? ( children[name] as InstanceType< typeof StringControl @@ -1179,11 +1208,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDuration' + : name === 'animationDelay' ? ( children[name] as InstanceType< typeof StringControl @@ -1191,11 +1220,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'margin' + : name === 'animationDuration' ? ( children[name] as InstanceType< typeof StringControl @@ -1203,15 +1232,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'padding' || - name === 'containerHeaderPadding' || - name === 'containerSiderPadding' || - name === 'containerFooterPadding' || - name === 'containerBodyPadding' + : name === 'margin' ? ( children[name] as InstanceType< typeof StringControl @@ -1219,11 +1244,18 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textSize' + : name === 'padding' || + name === + 'containerHeaderPadding' || + name === + 'containerSiderPadding' || + name === + 'containerFooterPadding' || + name === 'containerBodyPadding' ? ( children[name] as InstanceType< typeof StringControl @@ -1231,11 +1263,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textWeight' + : name === 'textSize' ? ( children[ name @@ -1245,11 +1277,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontFamily' + : name === 'textWeight' ? ( children[ name @@ -1259,11 +1291,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textDecoration' + : name === 'fontFamily' ? ( children[ name @@ -1273,11 +1305,11 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textTransform' + : name === 'textDecoration' ? ( children[ name @@ -1287,12 +1319,12 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontStyle' + : name === 'textTransform' ? ( children[ name @@ -1302,17 +1334,12 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === - 'backgroundImage' || - name === - 'headerBackgroundImage' || - name === - 'footerBackgroundImage' + : name === 'fontStyle' ? ( children[ name @@ -1322,17 +1349,17 @@ export function styleControl( ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) : name === - 'backgroundImageRepeat' || + 'backgroundImage' || name === - 'headerBackgroundImageRepeat' || + 'headerBackgroundImage' || name === - 'footerBackgroundImageRepeat' + 'footerBackgroundImage' ? ( children[ name @@ -1343,12 +1370,17 @@ export function styleControl( label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'rotation' + : name === + 'backgroundImageRepeat' || + name === + 'headerBackgroundImageRepeat' || + name === + 'footerBackgroundImageRepeat' ? ( children[ name @@ -1359,22 +1391,41 @@ export function styleControl( label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : children[ - name - ].propertyView({ - label: - config.label, - panelDefaultColor: - props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - })} + : name === + 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: + ( + + ), + placeholder: + props[name], + }) + : children[ + name + ].propertyView({ + label: + config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: + depMsg, + })} ); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 8a5ac77c9..f0c42c953 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -35,6 +35,10 @@ export type BoxShadowColorConfig = CommonColorConfig & { readonly boxShadowColor: string; }; +export type AnimationIterationCountConfig = CommonColorConfig & { + readonly animationIterationCount: string; +}; + export type OpacityConfig = CommonColorConfig & { readonly opacity: string; }; @@ -218,7 +222,8 @@ export type SingleColorConfig = | AnimationDurationConfig | OpacityConfig | BoxShadowConfig - | BoxShadowColorConfig; + | BoxShadowColorConfig + | AnimationIterationCountConfig; export const defaultTheme: ThemeDetail = { primary: '#3377FF', @@ -237,6 +242,7 @@ export const defaultTheme: ThemeDetail = { opacity: '0.33', boxShadow: '10px 5px 5px', boxShadowColor: '#D7D9E0', + animationIterationCount: '10', }; export const SURFACE_COLOR = '#FFFFFF'; @@ -462,6 +468,12 @@ const ANIMATION = { animation: 'animation', } as const; +const ANIMATIONITERATIONCOUNT = { + name: 'animationIterationCount', + label: trans('style.animationIterationCount'), + animationIterationCount: 'animationIterationCount', +} as const; + const ANIMATIONDELAY = { name: 'animationDelay', label: trans('style.animationDelay'), @@ -666,6 +678,7 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ OPACITY, BOXSHADOW, BOXSHADOWCOLOR, + ANIMATIONITERATIONCOUNT, ]; const FILL = { diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 4aa32b6c4..df2b2776c 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -499,6 +499,7 @@ export const en = { boxShadow: 'Box Shadow', opacity: 'Opacity', animation: 'Animation', + animationIterationCount: 'Animation Iteration Count', animationDelay: 'Animation Delay', animationDuration: 'Animation Duration', resetTooltip: From 0c3e340446348d27224e7cb8ac799ec1313955cd Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Wed, 15 May 2024 22:38:19 +0500 Subject: [PATCH 011/155] rotation added to label --- .../packages/lowcoder/src/comps/controls/labelControl.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 611c49d08..6b7e36ff3 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -117,9 +117,11 @@ const Label = styled.span<{ !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.label} !important; - ${(props) => - `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} + ${(props) => { + return `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`; + }} border-radius:${(props) => props.$labelStyle.radius}; + rotate: ${(props) => props.$labelStyle.rotation}; padding: ${(props) => props.$labelStyle.padding}; margin: ${(props) => props.$labelStyle.margin}; width: fit-content; From 7093a6e997693699fa823694b42fae73951c56c1 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 15 May 2024 02:36:26 +0500 Subject: [PATCH 012/155] switch component styling adjusted --- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 1d5957332..bf0642547 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -285,7 +285,7 @@ const STATIC_TEXT = { const LABEL = { name: "label", label: trans("label"), - depTheme: "canvas", + depTheme: "primarySurface", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; From f55bc6ea0838a80607534629b697e68761555068 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 15 May 2024 03:23:04 +0500 Subject: [PATCH 013/155] other component styling adjusted --- .../src/comps/controls/styleControlConstants.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index bf0642547..d6d072ede 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -277,7 +277,7 @@ const TEXT = { const STATIC_TEXT = { name: "staticText", label: trans("style.staticText"), - depTheme: "canvas", + depTheme: "primarySurface", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, } as const; @@ -562,7 +562,7 @@ function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: str } export const ButtonStyle = [ - getBackground('primary'), + getBackground(), ...STYLING_FIELDS_SEQUENCE ] as const; @@ -1304,14 +1304,7 @@ function handleToHoverLink(color: string) { } export const LinkStyle = [ - - { - name: "background", - label: trans("style.background"), - depTheme: "canvas", - depType: DEP_TYPE.SELF, - transformer: toSelf, - }, + getBackground(), ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [...LinkTextStyle]) ] as const; From 7fa7b87d95674b1899e2f503f05a3ad28bbef334 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Thu, 16 May 2024 15:02:34 +0500 Subject: [PATCH 014/155] rotation added --- .../autoCompleteComp/autoCompleteComp.tsx | 189 +++++++++--------- .../src/comps/controls/labelControl.tsx | 1 + .../comps/controls/styleControlConstants.tsx | 1 + 3 files changed, 95 insertions(+), 96 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index ae6fb9457..400055afc 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -1,24 +1,24 @@ -import React, { useEffect, useState } from "react"; -import { Input, Section, sectionNames } from "lowcoder-design"; -import { BoolControl } from "comps/controls/boolControl"; -import { styleControl } from "comps/controls/styleControl"; +import React, {useEffect, useState} from 'react'; +import {Input, Section, sectionNames} from 'lowcoder-design'; +import {BoolControl} from 'comps/controls/boolControl'; +import {styleControl} from 'comps/controls/styleControl'; import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, -} from "comps/controls/styleControlConstants"; +} from 'comps/controls/styleControlConstants'; import { NameConfig, NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from "comps/generators/withExposing"; -import styled, { css } from "styled-components"; -import { UICompBuilder } from "../../generators"; -import { FormDataPropertyView } from "../formComp/formDataConstants"; -import { jsonControl } from "comps/controls/codeControl"; -import { dropdownControl } from "comps/controls/dropdownControl"; +} from 'comps/generators/withExposing'; +import styled, {css} from 'styled-components'; +import {UICompBuilder} from '../../generators'; +import {FormDataPropertyView} from '../formComp/formDataConstants'; +import {jsonControl} from 'comps/controls/codeControl'; +import {dropdownControl} from 'comps/controls/dropdownControl'; import { getStyle, TextInputBasicSection, @@ -27,23 +27,21 @@ import { TextInputInteractionSection, textInputValidate, TextInputValidationSection, -} from "../textInputComp/textInputConstants"; +} from '../textInputComp/textInputConstants'; import { allowClearPropertyView, hiddenPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { IconControl } from "comps/controls/iconControl"; -import { hasIcon } from "comps/utils"; -import { InputRef } from "antd/es/input"; -import { default as ConfigProvider } from "antd/es/config-provider"; -import { default as AutoComplete } from "antd/es/auto-complete"; -import { RefControl } from "comps/controls/refControl"; -import { - booleanExposingStateControl, -} from "comps/controls/codeStateControl"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {IconControl} from 'comps/controls/iconControl'; +import {hasIcon} from 'comps/utils'; +import {InputRef} from 'antd/es/input'; +import {default as ConfigProvider} from 'antd/es/config-provider'; +import {default as AutoComplete} from 'antd/es/auto-complete'; +import {RefControl} from 'comps/controls/refControl'; +import {booleanExposingStateControl} from 'comps/controls/codeStateControl'; -import { getDayJSLocale } from "i18n/dayjsLocale"; +import {getDayJSLocale} from 'i18n/dayjsLocale'; import { autoCompleteDate, itemsDataTooltip, @@ -53,29 +51,29 @@ import { autoCompleteType, autocompleteIconColor, componentSize, -} from "./autoCompleteConstants"; - - +} from './autoCompleteConstants'; -const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>` - ${(props) => css` - ${getStyle(props.$style)} - input { - padding: ${props.style?.padding}; - } - .ant-select-single { - width: 100% !important; - } - `} +const InputStyle = styled(Input)<{$style: InputLikeStyleType}>` + ${(props) => { + return css` + ${getStyle(props.$style)} + input { + padding: ${props.style?.padding}; + rotate: ${props?.$style?.rotation}; + } + .ant-select-single { + width: 100% !important; + } + `; + }} `; - const childrenMap = { ...textInputChildren, viewRef: RefControl, allowClear: BoolControl.DEFAULT_TRUE, style: styleControl(InputFieldStyle), - labelStyle:styleControl(LabelStyle), + labelStyle: styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, items: jsonControl(convertAutoCompleteData, autoCompleteDate), @@ -83,21 +81,21 @@ const childrenMap = { searchFirstPY: BoolControl.DEFAULT_TRUE, searchCompletePY: BoolControl, searchLabelOnly: BoolControl.DEFAULT_TRUE, - valueOrLabel: dropdownControl(valueOrLabelOption, "label"), - autoCompleteType: dropdownControl(autoCompleteType, "normal"), - autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), - componentSize: dropdownControl(componentSize, "small"), - valueInItems: booleanExposingStateControl("valueInItems"), + valueOrLabel: dropdownControl(valueOrLabelOption, 'label'), + autoCompleteType: dropdownControl(autoCompleteType, 'normal'), + autocompleteIconColor: dropdownControl(autocompleteIconColor, 'blue'), + componentSize: dropdownControl(componentSize, 'small'), + valueInItems: booleanExposingStateControl('valueInItems'), inputFieldStyle: styleControl(InputLikeStyle), }; -const getValidate = (value: any): "" | "warning" | "error" | undefined => { +const getValidate = (value: any): '' | 'warning' | 'error' | undefined => { if ( - value.hasOwnProperty("validateStatus") && - value["validateStatus"] === "error" + value.hasOwnProperty('validateStatus') && + value['validateStatus'] === 'error' ) - return "error"; - return ""; + return 'error'; + return ''; }; let AutoCompleteCompBase = (function () { @@ -115,11 +113,10 @@ let AutoCompleteCompBase = (function () { autocompleteIconColor, componentSize, } = props; - const getTextInputValidate = () => { return { - value: { value: props.value.value }, + value: {value: props.value.value}, required: props.required, minLength: props?.minLength ?? 0, maxLength: props?.maxLength ?? 0, @@ -134,7 +131,7 @@ let AutoCompleteCompBase = (function () { const [validateState, setvalidateState] = useState({}); // 是否中文环境 - const [chineseEnv, setChineseEnv] = useState(getDayJSLocale() === "zh-cn"); + const [chineseEnv, setChineseEnv] = useState(getDayJSLocale() === 'zh-cn'); useEffect(() => { setsearchtext(props.value.value); @@ -162,32 +159,32 @@ let AutoCompleteCompBase = (function () { borderRadius: parseInt(props.inputFieldStyle.radius), colorText: props.inputFieldStyle.text, colorPrimary: props.inputFieldStyle.accent, - controlHeight: componentSize === "small" ? 30 : 38, + controlHeight: componentSize === 'small' ? 30 : 38, }, }} > - { props.valueInItems.onChange(false); setvalidateState(textInputValidate(getTextInputValidate())); setsearchtext(value); - props.value.onChange(value); - props.onEvent("change") - }} + props.value.onChange(value); + props.onEvent('change'); + }} onFocus={() => { - setActivationFlag(true) - props.onEvent("focus") + setActivationFlag(true); + props.onEvent('focus'); }} - onBlur={() => props.onEvent("blur")} + onBlur={() => props.onEvent('blur')} onSelect={(data: string, option) => { setsearchtext(option[valueOrLabel]); props.valueInItems.onChange(true); props.value.onChange(option[valueOrLabel]); - props.onEvent("submit"); + props.onEvent('submit'); }} filterOption={(inputValue: string, option) => { if (ignoreCase) { @@ -207,7 +204,7 @@ let AutoCompleteCompBase = (function () { searchFirstPY && option?.label && option.label - .spell("first") + .spell('first') .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 @@ -245,7 +242,7 @@ let AutoCompleteCompBase = (function () { searchFirstPY && option?.value && option.value - .spell("first") + .spell('first') .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 @@ -266,23 +263,23 @@ let AutoCompleteCompBase = (function () { return false; }} > - + ), style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, ...validateState, }); }) @@ -290,38 +287,38 @@ let AutoCompleteCompBase = (function () { return ( <>
- {children.autoCompleteType.getView() === "normal" && + {children.autoCompleteType.getView() === 'normal' && children.prefixIcon.propertyView({ - label: trans("button.prefixIcon"), + label: trans('button.prefixIcon'), })} - {children.autoCompleteType.getView() === "normal" && + {children.autoCompleteType.getView() === 'normal' && children.suffixIcon.propertyView({ - label: trans("button.suffixIcon"), + label: trans('button.suffixIcon'), })} - {allowClearPropertyView(children)} + {allowClearPropertyView(children)}
-
+
{children.items.propertyView({ - label: trans("autoComplete.value"), + label: trans('autoComplete.value'), tooltip: itemsDataTooltip, - placeholder: "[]", + placeholder: '[]', })} - {getDayJSLocale() === "zh-cn" && + {getDayJSLocale() === 'zh-cn' && children.searchFirstPY.propertyView({ - label: trans("autoComplete.searchFirstPY"), + label: trans('autoComplete.searchFirstPY'), })} - {getDayJSLocale() === "zh-cn" && + {getDayJSLocale() === 'zh-cn' && children.searchCompletePY.propertyView({ - label: trans("autoComplete.searchCompletePY"), + label: trans('autoComplete.searchCompletePY'), })} {children.searchLabelOnly.propertyView({ - label: trans("autoComplete.searchLabelOnly"), + label: trans('autoComplete.searchLabelOnly'), })} {children.ignoreCase.propertyView({ - label: trans("autoComplete.ignoreCase"), + label: trans('autoComplete.ignoreCase'), })} {children.valueOrLabel.propertyView({ - label: trans("autoComplete.checkedValueFrom"), + label: trans('autoComplete.checkedValueFrom'), radioButton: true, })}
@@ -352,8 +349,8 @@ let AutoCompleteCompBase = (function () { }) .setExposeMethodConfigs(autoCompleteRefMethods) .setExposeStateConfigs([ - new NameConfig("value", trans("export.inputValueDesc")), - new NameConfig("valueInItems", trans("autoComplete.valueInItems")), + new NameConfig('value', trans('export.inputValueDesc')), + new NameConfig('valueInItems', trans('autoComplete.valueInItems')), NameConfigPlaceHolder, NameConfigRequired, ...TextInputConfigs, @@ -368,9 +365,9 @@ AutoCompleteCompBase = class extends AutoCompleteCompBase { }; export const AutoCompleteComp = withExposingConfigs(AutoCompleteCompBase, [ - new NameConfig("value", trans("export.inputValueDesc")), - new NameConfig("valueInItems", trans("autoComplete.valueInItems")), + new NameConfig('value', trans('export.inputValueDesc')), + new NameConfig('valueInItems', trans('autoComplete.valueInItems')), NameConfigPlaceHolder, - NameConfigRequired, + NameConfigRequired, ...TextInputConfigs, ]); diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 6b7e36ff3..8706efd81 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -57,6 +57,7 @@ const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>` props.$style && { ...props.$style, borderRadius: props.$style.radius, + rotate: props.$style.rotation, boxShadow: `${props.$style.boxShadow} ${props.$style.boxShadowColor}`, } ); diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index f0c42c953..c6c338960 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -679,6 +679,7 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ BOXSHADOW, BOXSHADOWCOLOR, ANIMATIONITERATIONCOUNT, + ROTATION, ]; const FILL = { From c910778e606799ae31062b626654eab3fb516819 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Thu, 16 May 2024 18:08:56 +0500 Subject: [PATCH 015/155] rotation added to input and slider --- .../comps/numberInputComp/sliderComp.tsx | 55 +++-- .../numberInputComp/sliderCompConstants.tsx | 105 +++++---- .../textInputComp/textInputConstants.tsx | 209 +++++++++++------- .../comps/controls/styleControlConstants.tsx | 1 + 4 files changed, 230 insertions(+), 140 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index 3f7c2de69..0951c8d52 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -1,12 +1,24 @@ -import { trans } from "i18n"; -import { Section, sectionNames } from "lowcoder-design"; -import { numberExposingStateControl } from "../../controls/codeStateControl"; -import { UICompBuilder } from "../../generators"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; -import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants"; -import { hasIcon } from "comps/utils"; -import { BoolControl } from "comps/controls/boolControl"; +import {trans} from 'i18n'; +import {Section, sectionNames} from 'lowcoder-design'; +import {numberExposingStateControl} from '../../controls/codeStateControl'; +import {UICompBuilder} from '../../generators'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import { + formDataChildren, + FormDataPropertyView, +} from '../formComp/formDataConstants'; +import { + SliderChildren, + SliderPropertyView, + SliderStyled, + SliderWrapper, +} from './sliderCompConstants'; +import {hasIcon} from 'comps/utils'; +import {BoolControl} from 'comps/controls/boolControl'; const SliderBasicComp = (function () { /** @@ -14,7 +26,7 @@ const SliderBasicComp = (function () { */ const childrenMap = { ...SliderChildren, - value: numberExposingStateControl("value", 60), + value: numberExposingStateControl('value', 60), vertical: BoolControl, ...formDataChildren, }; @@ -22,9 +34,10 @@ const SliderBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, children: ( { e.stopPropagation(); @@ -40,7 +53,7 @@ const SliderBasicComp = (function () { vertical={props.vertical || false} onChange={(e) => { props.value.onChange(e); - props.onEvent("change"); + props.onEvent('change'); }} /> {hasIcon(props.suffixIcon) && props.suffixIcon} @@ -52,14 +65,14 @@ const SliderBasicComp = (function () { return ( <>
- {children.value.propertyView({ label: trans("prop.defaultValue") })} - {children.max.propertyView({ label: trans("prop.maximum") })} - {children.min.propertyView({ label: trans("prop.minimum") })} + {children.value.propertyView({label: trans('prop.defaultValue')})} + {children.max.propertyView({label: trans('prop.maximum')})} + {children.min.propertyView({label: trans('prop.minimum')})} {children.step.propertyView({ - label: trans("slider.step"), - tooltip: trans("slider.stepTooltip"), + label: trans('slider.step'), + tooltip: trans('slider.stepTooltip'), })} - {children.vertical.propertyView({ label: trans("slider.vertical") })} + {children.vertical.propertyView({label: trans('slider.vertical')})}
@@ -70,8 +83,8 @@ const SliderBasicComp = (function () { })(); export const SliderComp = withExposingConfigs(SliderBasicComp, [ - new NameConfig("value", trans("export.sliderValueDesc")), - new NameConfig("max", trans("export.sliderMaxValueDesc")), - new NameConfig("min", trans("export.sliderMinValueDesc")), + new NameConfig('value', trans('export.sliderValueDesc')), + new NameConfig('max', trans('export.sliderMaxValueDesc')), + new NameConfig('min', trans('export.sliderMinValueDesc')), ...CommonNameConfig, ]); diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index cdac7348f..07e567329 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -1,22 +1,33 @@ -import { BoolCodeControl, NumberControl } from "../../controls/codeControl"; -import { LabelControl } from "../../controls/labelControl"; -import { withDefault } from "../../generators"; -import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; -import { Section, sectionNames } from "lowcoder-design"; -import { RecordConstructorToComp } from "lowcoder-core"; -import { styleControl } from "comps/controls/styleControl"; -import { InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import styled, { css } from "styled-components"; -import { default as Slider } from "antd/es/slider"; -import { darkenColor, fadeColor } from "lowcoder-design"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; -import { IconControl } from "comps/controls/iconControl"; -import { trans } from "i18n"; +import {BoolCodeControl, NumberControl} from '../../controls/codeControl'; +import {LabelControl} from '../../controls/labelControl'; +import {withDefault} from '../../generators'; +import {ChangeEventHandlerControl} from '../../controls/eventHandlerControl'; +import {Section, sectionNames} from 'lowcoder-design'; +import {RecordConstructorToComp} from 'lowcoder-core'; +import {styleControl} from 'comps/controls/styleControl'; +import { + InputFieldStyle, + LabelStyle, + SliderStyle, + SliderStyleType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import styled, {css} from 'styled-components'; +import {default as Slider} from 'antd/es/slider'; +import {darkenColor, fadeColor} from 'lowcoder-design'; +import { + disabledPropertyView, + hiddenPropertyView, +} from 'comps/utils/propertyUtils'; +import {IconControl} from 'comps/controls/iconControl'; +import {trans} from 'i18n'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; const getStyle = (style: SliderStyleType, vertical: boolean) => { + console.log('🚀 ~ getStyle ~ style:', style); return css` &.ant-slider:not(.ant-slider-disabled) { &, @@ -39,10 +50,12 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => { } } .ant-slider-handle:focus { - box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)}; + box-shadow: 0 0 0 5px + ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)}; } - ${vertical && css` - width: auto; + ${vertical && + css` + width: auto; min-height: calc(300px - ${style.margin}); margin: ${style.margin} auto !important; `} @@ -50,40 +63,52 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => { `; }; -export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, vertical: boolean }>` +export const SliderStyled = styled(Slider)<{ + $style: SliderStyleType; + vertical: boolean; +}>` ${(props) => props.$style && getStyle(props.$style, props.vertical)} `; -export const SliderWrapper = styled.div<{ vertical: boolean }>` +export const SliderWrapper = styled.div<{ + $style: SliderStyleType; + vertical: boolean; +}>` width: 100%; display: inline-flex; align-items: center; justify-content: center; .ant-slider { width: 100%; + rotate: ${(props) => props.$style.rotation}; } -` +`; export const SliderChildren = { - max: withDefault(NumberControl, "100"), - min: withDefault(NumberControl, "0"), - step: withDefault(NumberControl, "1"), + max: withDefault(NumberControl, '100'), + min: withDefault(NumberControl, '0'), + step: withDefault(NumberControl, '1'), label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, style: styleControl(InputFieldStyle), - labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)), + labelStyle: styleControl( + LabelStyle.filter( + (style) => ['accent', 'validate'].includes(style.name) === false + ) + ), prefixIcon: IconControl, suffixIcon: IconControl, - inputFieldStyle:styleControl(SliderStyle) + inputFieldStyle: styleControl(SliderStyle), }; export const SliderPropertyView = ( - children: RecordConstructorToComp + children: RecordConstructorToComp< + typeof SliderChildren & {hidden: typeof BoolCodeControl} + > ) => ( <> - - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -91,14 +116,20 @@ export const SliderPropertyView = (
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes(useContext(EditorContext).editorModeStatus) && + children.label.getPropertyView()} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
- {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} - {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> +
+ {children.prefixIcon.propertyView({ + label: trans('button.prefixIcon'), + })} + {children.suffixIcon.propertyView({ + label: trans('button.suffixIcon'), + })}
{children.style.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index f2212358e..028b04255 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -1,28 +1,37 @@ -import { BoolControl } from "comps/controls/boolControl"; -import { check } from "util/convertUtils"; +import {BoolControl} from 'comps/controls/boolControl'; +import {check} from 'util/convertUtils'; import { BoolCodeControl, CustomRuleControl, NumberControl, RegexControl, StringControl, -} from "comps/controls/codeControl"; -import { stringExposingStateControl } from "comps/controls/codeStateControl"; -import { LabelControl } from "comps/controls/labelControl"; -import { InputLikeStyleType, LabelStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import { Section, sectionNames, ValueFromOption } from "lowcoder-design"; -import _ from "lodash"; -import { css } from "styled-components"; -import { EMAIL_PATTERN, URL_PATTERN } from "util/stringUtils"; -import { MultiBaseComp, RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; -import { dropdownControl } from "../../controls/dropdownControl"; -import { InputEventHandlerControl } from "../../controls/eventHandlerControl"; +} from 'comps/controls/codeControl'; +import {stringExposingStateControl} from 'comps/controls/codeStateControl'; +import {LabelControl} from 'comps/controls/labelControl'; +import { + InputLikeStyleType, + LabelStyleType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import {Section, sectionNames, ValueFromOption} from 'lowcoder-design'; +import _ from 'lodash'; +import {css} from 'styled-components'; +import {EMAIL_PATTERN, URL_PATTERN} from 'util/stringUtils'; +import { + MultiBaseComp, + RecordConstructorToComp, + RecordConstructorToView, +} from 'lowcoder-core'; +import {dropdownControl} from '../../controls/dropdownControl'; +import {InputEventHandlerControl} from '../../controls/eventHandlerControl'; import { ChildrenTypeToDepsKeys, CommonNameConfig, depsConfig, -} from "../../generators/withExposing"; -import { formDataChildren } from "../formComp/formDataConstants"; +} from '../../generators/withExposing'; +import {formDataChildren} from '../formComp/formDataConstants'; import { disabledPropertyView, maxLengthPropertyView, @@ -30,11 +39,11 @@ import { placeholderPropertyView, regexPropertyView, requiredPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { ChangeEvent, useEffect, useRef, useState } from "react"; -import { refMethods } from "comps/generators/withMethodExposing"; -import { InputRef } from "antd/es/input"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {ChangeEvent, useEffect, useRef, useState} from 'react'; +import {refMethods} from 'comps/generators/withMethodExposing'; +import {InputRef} from 'antd/es/input'; import { blurMethod, clickMethod, @@ -42,39 +51,39 @@ import { selectMethod, setRangeTextMethod, setSelectionRangeMethod, -} from "comps/utils/methodUtils"; -import { RefControl } from "comps/controls/refControl"; -import { EvalParamType } from "comps/controls/actionSelector/executeCompTypes"; +} from 'comps/utils/methodUtils'; +import {RefControl} from 'comps/controls/refControl'; +import {EvalParamType} from 'comps/controls/actionSelector/executeCompTypes'; export const TextInputValidationOptions = [ { - label: "Text", - value: "Text", + label: 'Text', + value: 'Text', extra: /.*/, - help: "", + help: '', }, { - label: "Email", - value: "Email", + label: 'Email', + value: 'Email', extra: EMAIL_PATTERN, - help: trans("validationDesc.email"), + help: trans('validationDesc.email'), }, { - label: "URL", - value: "URL", + label: 'URL', + value: 'URL', extra: URL_PATTERN, - help: trans("validationDesc.url"), + help: trans('validationDesc.url'), }, { - label: "Regex", - value: "Regex", + label: 'Regex', + value: 'Regex', extra: undefined, - help: trans("validationDesc.regex"), + help: trans('validationDesc.regex'), }, ] as const; type ValidationParams = { - value: { value: string }; + value: {value: string}; required: boolean; minLength: number; maxLength: number; @@ -90,52 +99,69 @@ const valueInfoMap = _.fromPairs( export const textInputValidate = ( props: ValidationParams ): { - validateStatus: "success" | "warning" | "error" | ""; + validateStatus: 'success' | 'warning' | 'error' | ''; help?: string; } => { if (props.customRule) { - return { validateStatus: "error", help: props.customRule }; + return {validateStatus: 'error', help: props.customRule}; } const value = props.value.value; if (props.required && value.length === 0) { - return { validateStatus: "error", help: trans("prop.required") }; + return {validateStatus: 'error', help: trans('prop.required')}; } if (props.maxLength > 0 && value.length > props.maxLength) { return { - validateStatus: "error", - help: trans("validationDesc.maxLength", { length: value.length, maxLength: props.maxLength }), + validateStatus: 'error', + help: trans('validationDesc.maxLength', { + length: value.length, + maxLength: props.maxLength, + }), }; } if (props.minLength > 0 && value.length < props.minLength) { return { - validateStatus: "error", - help: trans("validationDesc.minLength", { length: value.length, minLength: props.minLength }), + validateStatus: 'error', + help: trans('validationDesc.minLength', { + length: value.length, + minLength: props.minLength, + }), }; } const optionValue = props.validationType; const regex: RegExp = valueInfoMap[optionValue]?.extra ?? props.regex; // pass if empty by default if (value && !regex.test(value)) { - return { validateStatus: "error", help: valueInfoMap[optionValue].help }; + return {validateStatus: 'error', help: valueInfoMap[optionValue].help}; } - return { validateStatus: "" }; + return {validateStatus: ''}; }; -const TextInputInvalidConfig = depsConfig>({ - name: "invalid", - desc: trans("export.invalidDesc"), - depKeys: ["value", "required", "minLength", "maxLength", "validationType", "regex", "customRule"], +const TextInputInvalidConfig = depsConfig< + TextInputComp, + ChildrenTypeToDepsKeys +>({ + name: 'invalid', + desc: trans('export.invalidDesc'), + depKeys: [ + 'value', + 'required', + 'minLength', + 'maxLength', + 'validationType', + 'regex', + 'customRule', + ], func: (input) => textInputValidate({ ...input, - value: { value: input.value }, - }).validateStatus !== "", + value: {value: input.value}, + }).validateStatus !== '', }); export const TextInputConfigs = [TextInputInvalidConfig, ...CommonNameConfig]; export const textInputChildren = { - defaultValue: stringExposingStateControl("defaultValue"), - value: stringExposingStateControl("value"), + defaultValue: stringExposingStateControl('defaultValue'), + value: stringExposingStateControl('value'), disabled: BoolCodeControl, label: LabelControl, placeholder: StringControl, @@ -146,36 +172,41 @@ export const textInputChildren = { required: BoolControl, minLength: NumberControl, maxLength: NumberControl, - validationType: dropdownControl(TextInputValidationOptions, "Text"), + validationType: dropdownControl(TextInputValidationOptions, 'Text'), regex: RegexControl, customRule: CustomRuleControl, ...formDataChildren, }; -export const textInputProps = (props: RecordConstructorToView) => ({ +export const textInputProps = ( + props: RecordConstructorToView +) => ({ disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, defaultValue: props.defaultValue.value, value: props.value.value, - onFocus: () => props.onEvent("focus"), - onBlur: () => props.onEvent("blur"), - onPressEnter: () => props.onEvent("submit"), + onFocus: () => props.onEvent('focus'), + onBlur: () => props.onEvent('blur'), + onPressEnter: () => props.onEvent('submit'), }); -export const useTextInputProps = (props: RecordConstructorToView) => { +export const useTextInputProps = ( + props: RecordConstructorToView +) => { const [validateState, setValidateState] = useState({}); - const changeRef = useRef(false) + const changeRef = useRef(false); - const propsRef = useRef>(props); + const propsRef = + useRef>(props); propsRef.current = props; - const defaultValue = { ...props.defaultValue }.value; - const inputValue = { ...props.value }.value; + const defaultValue = {...props.defaultValue}.value; + const inputValue = {...props.value}.value; useEffect(() => { - props.value.onChange(defaultValue) + props.value.onChange(defaultValue); }, [defaultValue]); useEffect(() => { @@ -189,7 +220,7 @@ export const useTextInputProps = (props: RecordConstructorToView; export const TextInputBasicSection = (children: TextInputComp) => (
- {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })} + {children.defaultValue.propertyView({label: trans('prop.defaultValue')})} {placeholderPropertyView(children)}
); @@ -226,7 +257,7 @@ export const TextInputInteractionSection = (children: TextInputComp) => ( export const TextInputValidationSection = (children: TextInputComp) => (
{requiredPropertyView(children)} - {children.validationType.propertyView({ label: trans("prop.textType") })} + {children.validationType.propertyView({label: trans('prop.textType')})} {valueInfoMap[children.validationType.getView()]?.extra === undefined && regexPropertyView(children)} {minLengthPropertyView(children)} @@ -235,11 +266,15 @@ export const TextInputValidationSection = (children: TextInputComp) => (
); -export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) { +export function getStyle( + style: InputLikeStyleType, + labelStyle?: LabelStyleType +) { return css` border-radius: ${style.radius}; border-width: ${style.borderWidth}; - padding: ${style.padding}; + padding: ${style.padding}; + rotate: ${style.rotation}; // still use antd style when disabled &:not(.ant-input-disabled, .ant-input-affix-wrapper-disabled), input { @@ -247,9 +282,9 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) font-size: ${style.textSize}; font-weight: ${style.textWeight}; font-family: ${style.fontFamily}; - font-style:${style.fontStyle}; - text-transform:${style.textTransform}; - text-decoration:${style.textDecoration}; + font-style: ${style.fontStyle}; + text-transform: ${style.textTransform}; + text-decoration: ${style.textDecoration}; background-color: ${style.background}; border-color: ${style.border}; @@ -282,28 +317,38 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) } export const inputRefMethods = [ - ...refMethods([focusWithOptions, blurMethod, selectMethod, setSelectionRangeMethod]), + ...refMethods([ + focusWithOptions, + blurMethod, + selectMethod, + setSelectionRangeMethod, + ]), { method: clickMethod, - execute: (comp: MultiBaseComp<{ viewRef: RefControl }>, params: EvalParamType[]) => - comp.children.viewRef.viewRef?.input?.click(), + execute: ( + comp: MultiBaseComp<{viewRef: RefControl}>, + params: EvalParamType[] + ) => comp.children.viewRef.viewRef?.input?.click(), }, { method: setRangeTextMethod, - execute: (comp: MultiBaseComp<{ viewRef: RefControl }>, params: EvalParamType[]) => + execute: ( + comp: MultiBaseComp<{viewRef: RefControl}>, + params: EvalParamType[] + ) => (comp.children.viewRef.viewRef?.input?.setRangeText as any)?.(...params), }, ]; export function checkMentionListData(data: any) { - if (data === "") return {} + if (data === '') return {}; for (const key in data) { - check(data[key], ["array"], key, (node) => { - check(node, ["string"],); - return node - }) + check(data[key], ['array'], key, (node) => { + check(node, ['string']); + return node; + }); } - return data + return data; } // separate defaultValue and value for old components diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index c6c338960..6eee55bc4 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -996,6 +996,7 @@ export const SliderStyle = [ TRACK, MARGIN, PADDING, + ROTATION, ] as const; export const InputLikeStyle = [ From 96f83e6ffed6a872b497859d6cc8e37588fd7896 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Thu, 16 May 2024 21:22:37 +0500 Subject: [PATCH 016/155] rotation added to container --- .../numberInputComp/sliderCompConstants.tsx | 4 +- .../comps/comps/pageLayoutComp/pageLayout.tsx | 754 ++++++++++++------ .../comps/comps/tabs/tabbedContainerComp.tsx | 350 ++++---- .../comps/triContainerComp/triContainer.tsx | 230 ++++-- .../triFloatTextContainer.tsx | 198 +++-- .../comps/controls/styleControlConstants.tsx | 4 + 6 files changed, 985 insertions(+), 555 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index 07e567329..53632de98 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -71,7 +71,7 @@ export const SliderStyled = styled(Slider)<{ `; export const SliderWrapper = styled.div<{ - $style: SliderStyleType; + $style?: SliderStyleType; vertical: boolean; }>` width: 100%; @@ -80,7 +80,7 @@ export const SliderWrapper = styled.div<{ justify-content: center; .ant-slider { width: 100%; - rotate: ${(props) => props.$style.rotation}; + rotate: ${(props) => props?.$style?.rotation}; } `; diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index 2e859ba9a..951326a81 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx @@ -1,18 +1,30 @@ -import { ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import { EditorContext } from "comps/editorState"; -import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { HintPlaceHolder, ScrollBar } from "lowcoder-design"; -import { ReactNode, useContext, useEffect } from "react"; -import styled, { css } from "styled-components"; -import { checkIsMobile } from "util/commonUtils"; -import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerView"; -import { LayoutViewProps } from "./pageLayoutCompBuilder"; -import { ConfigProvider, Layout } from 'antd'; -import { contrastBackground, contrastText } from "comps/controls/styleControlConstants"; -import { useRef, useState } from "react"; -import { LowcoderAppView } from "appView/LowcoderAppView"; +import { + ContainerBodyStyleType, + ContainerHeaderStyleType, + ContainerStyleType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import {EditorContext} from 'comps/editorState'; +import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; +import {HintPlaceHolder, ScrollBar} from 'lowcoder-design'; +import {ReactNode, useContext, useEffect} from 'react'; +import styled, {css} from 'styled-components'; +import {checkIsMobile} from 'util/commonUtils'; +import { + gridItemCompToGridItems, + InnerGrid, +} from '../containerComp/containerView'; +import {LayoutViewProps} from './pageLayoutCompBuilder'; +import {ConfigProvider, Layout} from 'antd'; +import { + contrastBackground, + contrastText, +} from 'comps/controls/styleControlConstants'; +import {useRef, useState} from 'react'; +import {LowcoderAppView} from 'appView/LowcoderAppView'; -const { Header, Content, Footer, Sider } = Layout; +const {Header, Content, Footer, Sider} = Layout; const AppViewContainer = styled.div` width: 100%; @@ -30,47 +42,71 @@ const getStyle = (style: ContainerStyleType) => { overflow: hidden; padding: ${style.padding}; ${style.background && `background-color: ${style.background};`} - ${style.backgroundImage && `background-image: url(${style.backgroundImage});`} - ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`} - ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`} - ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`} - ${style.backgroundImageOrigin && `background-origin: ${style.backgroundImageOrigin};`} + ${style.backgroundImage && + `background-image: url(${style.backgroundImage});`} + ${style.backgroundImageRepeat && + `background-repeat: ${style.backgroundImageRepeat};`} + ${style.backgroundImageSize && + `background-size: ${style.backgroundImageSize};`} + ${style.backgroundImagePosition && + `background-position: ${style.backgroundImagePosition};`} + ${style.backgroundImageOrigin && + `background-origin: ${style.backgroundImageOrigin};`} `; }; -const Wrapper = styled.div<{ $style: ContainerStyleType }>` +const Wrapper = styled.div<{$style: ContainerStyleType}>` display: flex; flex-flow: column; height: 100%; border: 1px solid #d7d9e0; border-radius: 4px; ${(props) => props.$style && getStyle(props.$style)} + rotate: ${(props) => props.$style.rotation}; `; const HeaderInnerGrid = styled(InnerGrid)<{ - $backgroundColor: string - }>` - overflow: visible; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + $backgroundColor: string; + $headerStyle: ContainerHeaderStyleType; +}>` + overflow: visible; rotate:${(props) => { + return `${props.$headerStyle.rotation};`; + }} + rotate:${(props) => { + return `${props.$headerStyle.rotation}`; + }}; + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; const SiderInnerGrid = styled(InnerGrid)<{ - $backgroundColor: string + $backgroundColor: string; $siderBackgroundImage: string; $siderBackgroundImageRepeat: string; $siderBackgroundImageSize: string; $siderBackgroundImagePosition: string; $siderBackgroundImageOrigin: string; - }>` +}>` overflow: auto; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$siderBackgroundImage && `background-image: url(${props.$siderBackgroundImage});`} - ${(props) => props.$siderBackgroundImageRepeat && `background-repeat: ${props.$siderBackgroundImageRepeat};`} - ${(props) => props.$siderBackgroundImageSize && `background-size: ${props.$siderBackgroundImageSize};`} - ${(props) => props.$siderBackgroundImagePosition && `background-position: ${props.$siderBackgroundImagePosition};`} - ${(props) => props.$siderBackgroundImageOrigin && `background-origin: ${props.$siderBackgroundImageOrigin};`} + ${(props) => + props.$siderBackgroundImage && + `background-image: url(${props.$siderBackgroundImage});`} + ${(props) => + props.$siderBackgroundImageRepeat && + `background-repeat: ${props.$siderBackgroundImageRepeat};`} + ${(props) => + props.$siderBackgroundImageSize && + `background-size: ${props.$siderBackgroundImageSize};`} + ${(props) => + props.$siderBackgroundImagePosition && + `background-position: ${props.$siderBackgroundImagePosition};`} + ${(props) => + props.$siderBackgroundImageOrigin && + `background-origin: ${props.$siderBackgroundImageOrigin};`} `; const BodyInnerGrid = styled(InnerGrid)<{ @@ -78,10 +114,16 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; + $bodyStyle: ContainerBodyStyleType; }>` - border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + rotate: ${(props) => { + return `${props.$bodyStyle.rotation}`; + }}; + border-top: ${(props) => + `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -96,127 +138,207 @@ const FooterInnerGrid = styled(InnerGrid)<{ $footerBackgroundImagePosition: string; $footerBackgroundImageOrigin: string; }>` - border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + border-top: ${(props) => + `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; overflow: visible; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`} - ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`} - ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`} - ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`} - ${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`} + ${(props) => + props.$footerBackgroundImage && + `background-image: url(${props.$footerBackgroundImage});`} + ${(props) => + props.$footerBackgroundImageRepeat && + `background-repeat: ${props.$footerBackgroundImageRepeat};`} + ${(props) => + props.$footerBackgroundImageSize && + `background-size: ${props.$footerBackgroundImageSize};`} + ${(props) => + props.$footerBackgroundImagePosition && + `background-position: ${props.$footerBackgroundImagePosition};`} + ${(props) => + props.$footerBackgroundImageOrigin && + `background-origin: ${props.$footerBackgroundImageOrigin};`} `; export type LayoutProps = LayoutViewProps & { hintPlaceholder?: ReactNode; }; - -export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSiderCollapsed: (collapsed: boolean) => void }) { - const { container, siderCollapsed, setSiderCollapsed } = props; - const { showHeader, showFooter, showSider } = container; - const { items: headerItems, ...otherHeaderProps } = container.header; - const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView(); - const { items: footerItems, ...otherFooterProps } = container.footer; - const { items: siderItems, ...otherSiderProps } = container.sider; - const { - style, - headerStyle, - siderStyle, - bodyStyle, - footerStyle, - } = container; +export function PageLayout( + props: LayoutProps & { + siderCollapsed: boolean; + setSiderCollapsed: (collapsed: boolean) => void; + } +) { + const {container, siderCollapsed, setSiderCollapsed} = props; + const {showHeader, showFooter, showSider} = container; + const {items: headerItems, ...otherHeaderProps} = container.header; + const {items: bodyItems, ...otherBodyProps} = + container.body['0'].children.view.getView(); + const {items: footerItems, ...otherFooterProps} = container.footer; + const {items: siderItems, ...otherSiderProps} = container.sider; + const {style, headerStyle, siderStyle, bodyStyle, footerStyle} = container; const editorState = useContext(EditorContext); const maxWidth = editorState.getAppSettings().maxWidth; const isMobile = checkIsMobile(maxWidth); const appRef = useRef(); - function onSiderCollapse (collapsed : boolean) { + function onSiderCollapse(collapsed: boolean) { props.setSiderCollapsed(collapsed); // how to set the collapsed state in the container when the user manually collapses the sider? } - useEffect(() => {setSiderCollapsed(container.siderCollapsed)} , [container.siderCollapsed]); - + useEffect(() => { + setSiderCollapsed(container.siderCollapsed); + }, [container.siderCollapsed]); + return (
- - - {showSider && !container.innerSider && !container.siderRight && ( - <> - onSiderCollapse(value)} + }, + }} + > + + + {showSider && !container.innerSider && !container.siderRight && ( + <> + - - + onSiderCollapse(value)} + > + + )} - - {showHeader && ( - <> - -
- -
- - - )} - {showSider && container.innerSider ? ( - <> + + {showHeader && ( + <> + +
+ +
+ + + )} + {showSider && container.innerSider ? ( + <> + {showSider && !container.siderRight && ( - - + setSiderCollapsed(value)} + collapsed={siderCollapsed} + onCollapse={(value) => setSiderCollapsed(value)} > - + + showName={{bottom: showFooter ? 20 : 0}} + $backgroundColor={ + siderStyle?.siderBackground || 'transparent' + } + $siderBackgroundImage={ + siderStyle?.siderBackgroundImage + } + $siderBackgroundImageRepeat={ + siderStyle?.siderBackgroundImageRepeat + } + $siderBackgroundImageSize={ + siderStyle?.siderBackgroundImageSize + } + $siderBackgroundImagePosition={ + siderStyle?.siderBackgroundImagePosition + } + $siderBackgroundImageOrigin={ + siderStyle?.siderBackgroundImageOrigin + } + style={{ + padding: siderStyle.containerSiderPadding, + }} + /> - - )} - - - {container.showApp && container.contentApp != "" ? ( - - - - - - ) : ( - - )} - - - {showSider && container.siderRight && ( - - setSiderCollapsed(value)} + + )} + + + {container.showApp && container.contentApp != '' ? ( + - - - - - - )} - - ) : ( - - - {container.showApp && container.contentApp != "" ? ( - ) : ( + $bodyStyle={bodyStyle} + $showBorder={showHeader} + {...otherBodyProps} + items={gridItemCompToGridItems(bodyItems)} + autoHeight={container.autoHeight} + emptyRows={14} + minHeight={showHeader ? '143px' : '142px'} + containerPadding={[0, 0]} + hintPlaceholder={ + props.hintPlaceholder ?? HintPlaceHolder + } + $backgroundColor={ + bodyStyle?.background || 'transparent' + } + $borderColor={style?.border} + $borderWidth={style?.borderWidth} + style={{padding: bodyStyle.containerBodyPadding}} + /> )} - )} - {showFooter && ( -
- + setSiderCollapsed(value)} + > + + + + + + )} + + + ) : ( + + + {container.showApp && container.contentApp != '' ? ( + + + + + + ) : ( + -
- )} - + style={{padding: bodyStyle.containerBodyPadding}} + /> + )} + + + )} + {showFooter && ( +
+ +
+ )} + {showSider && !container.innerSider && container.siderRight && ( <> - - setSiderCollapsed(value)} - + - + setSiderCollapsed(value)} + > + + $siderBackgroundImageRepeat={ + siderStyle?.siderBackgroundImageRepeat + } + $siderBackgroundImageSize={ + siderStyle?.siderBackgroundImageSize + } + $siderBackgroundImagePosition={ + siderStyle?.siderBackgroundImagePosition + } + $siderBackgroundImageOrigin={ + siderStyle?.siderBackgroundImageOrigin + } + style={{padding: siderStyle.containerSiderPadding}} + /> @@ -390,11 +638,15 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi {` .ant-layout-sider-trigger { bottom: 4px !important; - ${container.siderRight ? ` + ${ + container.siderRight + ? ` right: 8px !important; - ` : ` + ` + : ` left: 8px !important;} - `} + ` + } } `} diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 4effb590d..8ba66503d 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -1,63 +1,88 @@ -import { default as Tabs } from "antd/es/tabs"; -import { JSONObject, JSONValue } from "util/jsonTypes"; -import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core"; -import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core"; -import { AutoHeightControl } from "comps/controls/autoHeightControl"; -import { stringExposingStateControl } from "comps/controls/codeStateControl"; -import { eventHandlerControl } from "comps/controls/eventHandlerControl"; -import { TabsOptionControl } from "comps/controls/optionsControl"; -import { styleControl } from "comps/controls/styleControl"; -import { ContainerBodyStyle, ContainerBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators"; -import { addMapChildAction } from "comps/generators/sameTypeMap"; -import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; -import { NameGenerator } from "comps/utils"; -import { ScrollBar, Section, sectionNames } from "lowcoder-design"; -import { HintPlaceHolder } from "lowcoder-design"; -import _ from "lodash"; -import React, { useCallback, useContext } from "react"; -import styled, { css } from "styled-components"; -import { IContainer } from "../containerBase/iContainer"; -import { SimpleContainerComp } from "../containerBase/simpleContainerComp"; -import { CompTree, mergeCompTrees } from "../containerBase/utils"; +import {default as Tabs} from 'antd/es/tabs'; +import {JSONObject, JSONValue} from 'util/jsonTypes'; +import { + CompAction, + CompActionTypes, + deleteCompAction, + wrapChildAction, +} from 'lowcoder-core'; +import { + DispatchType, + RecordConstructorToView, + wrapDispatch, +} from 'lowcoder-core'; +import {AutoHeightControl} from 'comps/controls/autoHeightControl'; +import {stringExposingStateControl} from 'comps/controls/codeStateControl'; +import {eventHandlerControl} from 'comps/controls/eventHandlerControl'; +import {TabsOptionControl} from 'comps/controls/optionsControl'; +import {styleControl} from 'comps/controls/styleControl'; +import { + ContainerBodyStyle, + ContainerBodyStyleType, + ContainerHeaderStyle, + ContainerHeaderStyleType, + TabContainerStyle, + TabContainerStyleType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import {sameTypeMap, UICompBuilder, withDefault} from 'comps/generators'; +import {addMapChildAction} from 'comps/generators/sameTypeMap'; +import { + NameConfig, + NameConfigHidden, + withExposingConfigs, +} from 'comps/generators/withExposing'; +import {NameGenerator} from 'comps/utils'; +import {ScrollBar, Section, sectionNames} from 'lowcoder-design'; +import {HintPlaceHolder} from 'lowcoder-design'; +import _ from 'lodash'; +import React, {useCallback, useContext} from 'react'; +import styled, {css} from 'styled-components'; +import {IContainer} from '../containerBase/iContainer'; +import {SimpleContainerComp} from '../containerBase/simpleContainerComp'; +import {CompTree, mergeCompTrees} from '../containerBase/utils'; import { ContainerBaseProps, gridItemCompToGridItems, InnerGrid, -} from "../containerComp/containerView"; -import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { BoolCodeControl, NumberControl } from "comps/controls/codeControl"; -import { DisabledContext } from "comps/generators/uiCompBuilder"; -import { EditorContext } from "comps/editorState"; -import { checkIsMobile } from "util/commonUtils"; -import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"; -import { BoolControl } from "comps/controls/boolControl"; -import { PositionControl } from "comps/controls/dropdownControl"; +} from '../containerComp/containerView'; +import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; +import { + disabledPropertyView, + hiddenPropertyView, +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {BoolCodeControl, NumberControl} from 'comps/controls/codeControl'; +import {DisabledContext} from 'comps/generators/uiCompBuilder'; +import {EditorContext} from 'comps/editorState'; +import {checkIsMobile} from 'util/commonUtils'; +import {messageInstance} from 'lowcoder-design/src/components/GlobalInstances'; +import {BoolControl} from 'comps/controls/boolControl'; +import {PositionControl} from 'comps/controls/dropdownControl'; const EVENT_OPTIONS = [ { - label: trans("tabbedContainer.switchTab"), - value: "change", - description: trans("tabbedContainer.switchTabDesc"), + label: trans('tabbedContainer.switchTab'), + value: 'change', + description: trans('tabbedContainer.switchTabDesc'), }, ] as const; const childrenMap = { tabs: TabsOptionControl, - selectedTabKey: stringExposingStateControl("key", "Tab1"), + selectedTabKey: stringExposingStateControl('key', 'Tab1'), containers: withDefault(sameTypeMap(SimpleContainerComp), { - 0: { layout: {}, items: {} }, - 1: { layout: {}, items: {} }, + 0: {layout: {}, items: {}}, + 1: {layout: {}, items: {}}, }), autoHeight: AutoHeightControl, scrollbars: withDefault(BoolControl, false), - placement: withDefault(PositionControl, "top"), + placement: withDefault(PositionControl, 'top'), onEvent: eventHandlerControl(EVENT_OPTIONS), disabled: BoolCodeControl, showHeader: withDefault(BoolControl, true), - style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}), + style: withDefault(styleControl(TabContainerStyle), {borderWidth: '1px'}), headerStyle: styleControl(ContainerHeaderStyle), bodyStyle: styleControl(ContainerBodyStyle), tabsGutter: withDefault(NumberControl, 32), @@ -65,14 +90,13 @@ const childrenMap = { }; type ViewProps = RecordConstructorToView; -type TabbedContainerProps = ViewProps & { dispatch: DispatchType }; - +type TabbedContainerProps = ViewProps & {dispatch: DispatchType}; + const getStyle = ( style: TabContainerStyleType, headerStyle: ContainerHeaderStyleType, - bodyStyle: ContainerBodyStyleType, + bodyStyle: ContainerBodyStyleType ) => { - console.log("🚀 ~ style:", style) return css` &.ant-tabs { overflow: hidden; @@ -88,14 +112,18 @@ const getStyle = ( > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane { height: 100%; + rotate: ${bodyStyle.rotation}; + .react-grid-layout { border-radius: 0; background-color: ${bodyStyle.background || 'transparent'}; + rotate: ${bodyStyle.rotation}; } } > .ant-tabs-nav { background-color: ${headerStyle.headerBackground || 'transparent'}; + rotate: ${headerStyle.rotation}; .ant-tabs-tab { div { @@ -109,11 +137,11 @@ const getStyle = ( .ant-tabs-tab-btn { font-size: ${style.textSize}; - font-family:${style.fontFamily}; - font-weight:${style.textWeight}; - text-transform:${style.textTransform}; - text-decoration:${style.textDecoration}; - font-style:${style.fontStyle}; + font-family: ${style.fontFamily}; + font-weight: ${style.textWeight}; + text-transform: ${style.textTransform}; + text-decoration: ${style.textDecoration}; + font-style: ${style.fontStyle}; } .ant-tabs-ink-bar { @@ -128,11 +156,11 @@ const getStyle = ( `; }; -const StyledTabs = styled(Tabs)<{ +const StyledTabs = styled(Tabs)<{ $style: TabContainerStyleType; $headerStyle: ContainerHeaderStyleType; $bodyStyle: ContainerBodyStyleType; - $isMobile?: boolean; + $isMobile?: boolean; $showHeader?: boolean; }>` &.ant-tabs { @@ -149,7 +177,7 @@ const StyledTabs = styled(Tabs)<{ } .ant-tabs-nav { - display: ${(props) => (props.$showHeader ? "block" : "none")}; + display: ${(props) => (props.$showHeader ? 'block' : 'none')}; padding: 0 ${(props) => (props.$isMobile ? 16 : 24)}px; background: white; margin: 0px; @@ -163,11 +191,9 @@ const StyledTabs = styled(Tabs)<{ margin-right: -24px; } - ${(props) => props.$style && getStyle( - props.$style, - props.$headerStyle, - props.$bodyStyle, - )} + ${(props) => + props.$style && + getStyle(props.$style, props.$headerStyle, props.$bodyStyle)} `; const ContainerInTab = (props: ContainerBaseProps) => { @@ -177,25 +203,25 @@ const ContainerInTab = (props: ContainerBaseProps) => { }; const TabbedContainer = (props: TabbedContainerProps) => { - let { - tabs, - containers, - dispatch, - style, - headerStyle, - bodyStyle, - } = props; + let {tabs, containers, dispatch, style, headerStyle, bodyStyle} = props; const visibleTabs = tabs.filter((tab) => !tab.hidden); - const selectedTab = visibleTabs.find((tab) => tab.key === props.selectedTabKey.value); + const selectedTab = visibleTabs.find( + (tab) => tab.key === props.selectedTabKey.value + ); const activeKey = selectedTab ? selectedTab.key : visibleTabs.length > 0 - ? visibleTabs[0].key - : undefined; + ? visibleTabs[0].key + : undefined; const onTabClick = useCallback( - (key: string, event: React.KeyboardEvent | React.MouseEvent) => { + ( + key: string, + event: + | React.KeyboardEvent + | React.MouseEvent + ) => { // log.debug("onTabClick. event: ", event); const target = event.target; (target as any).parentNode.click @@ -213,17 +239,20 @@ const TabbedContainer = (props: TabbedContainerProps) => { const tabItems = visibleTabs.map((tab) => { const id = String(tab.id); - const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); + const childDispatch = wrapDispatch( + wrapDispatch(dispatch, 'containers'), + id + ); const containerProps = containers[id].children; const hasIcon = tab.icon.props.value; const label = ( <> - {tab.iconPosition === "left" && hasIcon && ( - {tab.icon} + {tab.iconPosition === 'left' && hasIcon && ( + {tab.icon} )} {tab.label} - {tab.iconPosition === "right" && hasIcon && ( - {tab.icon} + {tab.iconPosition === 'right' && hasIcon && ( + {tab.icon} )} ); @@ -233,7 +262,14 @@ const TabbedContainer = (props: TabbedContainerProps) => { forceRender: true, children: ( - + { /> - ) - } - }) + ), + }; + }); return ( - -
+ +
- { - if (key !== props.selectedTabKey.value) { - props.selectedTabKey.onChange(key); - props.onEvent("change"); - } - }} - onTabClick={onTabClick} - animated - $isMobile={isMobile} - items={tabItems} - tabBarGutter={props.tabsGutter} - centered={props.tabsCentered} - > - + { + if (key !== props.selectedTabKey.value) { + props.selectedTabKey.onChange(key); + props.onEvent('change'); + } + }} + onTabClick={onTabClick} + animated + $isMobile={isMobile} + items={tabItems} + tabBarGutter={props.tabsGutter} + centered={props.tabsCentered} + >
); }; - export const TabbedContainerBaseComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { return ( @@ -293,44 +339,59 @@ export const TabbedContainerBaseComp = (function () { <>
{children.tabs.propertyView({ - title: trans("tabbedContainer.tab"), - newOptionLabel: "Tab", + title: trans('tabbedContainer.tab'), + newOptionLabel: 'Tab', + })} + {children.selectedTabKey.propertyView({ + label: trans('prop.defaultValue'), })} - {children.selectedTabKey.propertyView({ label: trans("prop.defaultValue") })}
- - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} - {children.showHeader.propertyView({ label: trans("tabbedContainer.showTabs") })} + {children.showHeader.propertyView({ + label: trans('tabbedContainer.showTabs'), + })} {hiddenPropertyView(children)}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <>
- {children.placement.propertyView({ label: trans("tabbedContainer.placement"), radioButton: true })} - {children.tabsCentered.propertyView({ label: trans("tabbedContainer.tabsCentered")})} - { children.tabsGutter.propertyView({ label: trans("tabbedContainer.gutter"), tooltip : trans("tabbedContainer.gutterTooltip") })} + {children.placement.propertyView({ + label: trans('tabbedContainer.placement'), + radioButton: true, + })} + {children.tabsCentered.propertyView({ + label: trans('tabbedContainer.tabsCentered'), + })} + {children.tabsGutter.propertyView({ + label: trans('tabbedContainer.gutter'), + tooltip: trans('tabbedContainer.gutterTooltip'), + })} {children.autoHeight.getPropertyView()} - {!children.autoHeight.getView() && ( + {!children.autoHeight.getView() && children.scrollbars.propertyView({ - label: trans("prop.scrollbar"), - }) - )} + label: trans('prop.scrollbar'), + })}
{children.style.getPropertyView()}
{children.showHeader.getView() && ( -
- { children.headerStyle.getPropertyView() } +
+ {children.headerStyle.getPropertyView()}
)} -
- { children.bodyStyle.getPropertyView() } +
+ {children.bodyStyle.getPropertyView()}
)} @@ -340,7 +401,10 @@ export const TabbedContainerBaseComp = (function () { .build(); })(); -class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContainer { +class TabbedContainerImplComp + extends TabbedContainerBaseComp + implements IContainer +{ private syncContainers(): this { const tabs = this.children.tabs.getView(); const ids: Set = new Set(tabs.map((tab) => String(tab.id))); @@ -350,7 +414,9 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai Object.keys(containers).forEach((id) => { if (!ids.has(id)) { // log.debug("syncContainers delete. ids=", ids, " id=", id); - actions.push(wrapChildAction("containers", wrapChildAction(id, deleteCompAction()))); + actions.push( + wrapChildAction('containers', wrapChildAction(id, deleteCompAction())) + ); } }); // new @@ -358,7 +424,10 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai if (!containers.hasOwnProperty(id)) { // log.debug("syncContainers new containers: ", containers, " id: ", id); actions.push( - wrapChildAction("containers", addMapChildAction(id, { layout: {}, items: {} })) + wrapChildAction( + 'containers', + addMapChildAction(id, {layout: {}, items: {}}) + ) ); } }); @@ -374,19 +443,19 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai override reduce(action: CompAction): this { if (action.type === CompActionTypes.CUSTOM) { const value = action.value as JSONObject; - if (value.type === "push") { + if (value.type === 'push') { const itemValue = value.value as JSONObject; if (_.isEmpty(itemValue.key)) itemValue.key = itemValue.label; action = { ...action, value: { ...value, - value: { ...itemValue }, + value: {...itemValue}, }, } as CompAction; } - if (value.type === "delete" && this.children.tabs.getView().length <= 1) { - messageInstance.warning(trans("tabbedContainer.atLeastOneTabError")); + if (value.type === 'delete' && this.children.tabs.getView().length <= 1) { + messageInstance.warning(trans('tabbedContainer.atLeastOneTabError')); // at least one tab return this; } @@ -404,7 +473,8 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai realSimpleContainer(key?: string): SimpleContainerComp | undefined { let selectedTabKey = this.children.selectedTabKey.getView().value; const tabs = this.children.tabs.getView(); - const selectedTab = tabs.find((tab) => tab.key === selectedTabKey) ?? tabs[0]; + const selectedTab = + tabs.find((tab) => tab.key === selectedTabKey) ?? tabs[0]; const id = String(selectedTab.id); if (_.isNil(key)) return this.children.containers.children[id]; return Object.values(this.children.containers.children).find((container) => @@ -414,7 +484,9 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai getCompTree(): CompTree { const containerMap = this.children.containers.getView(); - const compTrees = Object.values(containerMap).map((container) => container.getCompTree()); + const compTrees = Object.values(containerMap).map((container) => + container.getCompTree() + ); return mergeCompTrees(compTrees); } @@ -435,17 +507,21 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai container.getPasteValue(nameGenerator) ); - return { ...this.toJsonValue(), containers: containerPasteValueMap }; + return {...this.toJsonValue(), containers: containerPasteValueMap}; } override autoHeight(): boolean { return this.children.autoHeight.getView(); } - - } -export const TabbedContainerComp = withExposingConfigs(TabbedContainerImplComp, [ - new NameConfig("selectedTabKey", trans("tabbedContainer.selectedTabKeyDesc")), - NameConfigHidden, -]); +export const TabbedContainerComp = withExposingConfigs( + TabbedContainerImplComp, + [ + new NameConfig( + 'selectedTabKey', + trans('tabbedContainer.selectedTabKeyDesc') + ), + NameConfigHidden, + ] +); diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index b4adf54c7..625d0a986 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -1,43 +1,65 @@ -import { ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import { EditorContext } from "comps/editorState"; -import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { HintPlaceHolder, ScrollBar } from "lowcoder-design"; -import { ReactNode, useContext } from "react"; -import styled, { css } from "styled-components"; -import { checkIsMobile } from "util/commonUtils"; -import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerView"; -import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder"; +import { + ContainerBodyStyleType, + ContainerHeaderStyleType, + ContainerStyleType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import {EditorContext} from 'comps/editorState'; +import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; +import {HintPlaceHolder, ScrollBar} from 'lowcoder-design'; +import {ReactNode, useContext} from 'react'; +import styled, {css} from 'styled-components'; +import {checkIsMobile} from 'util/commonUtils'; +import { + gridItemCompToGridItems, + InnerGrid, +} from '../containerComp/containerView'; +import {TriContainerViewProps} from '../triContainerComp/triContainerCompBuilder'; const getStyle = (style: ContainerStyleType) => { return css` border-color: ${style.border}; border-width: ${style.borderWidth}; border-radius: ${style.radius}; + rotate: ${style.rotation}; overflow: hidden; padding: ${style.padding}; ${style.background && `background-color: ${style.background};`} - ${style.backgroundImage && `background-image: url(${style.backgroundImage});`} - ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`} - ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`} - ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`} - ${style.backgroundImageOrigin && `background-origin: ${style.backgroundImageOrigin};`} + ${style.backgroundImage && + `background-image: url(${style.backgroundImage});`} + ${style.backgroundImageRepeat && + `background-repeat: ${style.backgroundImageRepeat};`} + ${style.backgroundImageSize && + `background-size: ${style.backgroundImageSize};`} + ${style.backgroundImagePosition && + `background-position: ${style.backgroundImagePosition};`} + ${style.backgroundImageOrigin && + `background-origin: ${style.backgroundImageOrigin};`} `; }; -const Wrapper = styled.div<{ $style: ContainerStyleType }>` +const Wrapper = styled.div<{$style: ContainerStyleType}>` display: flex; flex-flow: column; height: 100%; border: 1px solid #d7d9e0; border-radius: 4px; - ${(props) => props.$style && getStyle(props.$style)} + ${(props) => { + return props.$style && getStyle(props.$style); + }} `; const HeaderInnerGrid = styled(InnerGrid)<{ - $backgroundColor: string - }>` + $backgroundColor: string; + $headerStyle: ContainerHeaderStyleType; +}>` overflow: visible; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + rotate:${(props) => { + return `${props.$headerStyle.rotation};`; + }} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -46,10 +68,16 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; + $bodyStyle: ContainerBodyStyleType; }>` - border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + border-top: ${(props) => + `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + rotate:${(props) => { + return `${props.$bodyStyle.rotation};`; + }} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -64,15 +92,27 @@ const FooterInnerGrid = styled(InnerGrid)<{ $footerBackgroundImagePosition: string; $footerBackgroundImageOrigin: string; }>` - border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + border-top: ${(props) => + `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; overflow: visible; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`} - ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`} - ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`} - ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`} - ${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`} + ${(props) => + props.$footerBackgroundImage && + `background-image: url(${props.$footerBackgroundImage});`} + ${(props) => + props.$footerBackgroundImageRepeat && + `background-repeat: ${props.$footerBackgroundImageRepeat};`} + ${(props) => + props.$footerBackgroundImageSize && + `background-size: ${props.$footerBackgroundImageSize};`} + ${(props) => + props.$footerBackgroundImagePosition && + `background-position: ${props.$footerBackgroundImagePosition};`} + ${(props) => + props.$footerBackgroundImageOrigin && + `background-origin: ${props.$footerBackgroundImageOrigin};`} `; export type TriContainerProps = TriContainerViewProps & { @@ -80,21 +120,17 @@ export type TriContainerProps = TriContainerViewProps & { }; export function TriContainer(props: TriContainerProps) { - const { container } = props; - const { showHeader, showFooter } = container; + const {container} = props; + const {showHeader, showFooter} = container; // When the header and footer are not displayed, the body must be displayed const showBody = container.showBody || (!showHeader && !showFooter); const scrollbars = container.scrollbars; - const { items: headerItems, ...otherHeaderProps } = container.header; - const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView(); - const { items: footerItems, ...otherFooterProps } = container.footer; - const { - style, - headerStyle, - bodyStyle, - footerStyle, - } = container; + const {items: headerItems, ...otherHeaderProps} = container.header; + const {items: bodyItems, ...otherBodyProps} = + container.body['0'].children.view.getView(); + const {items: footerItems, ...otherFooterProps} = container.footer; + const {style, headerStyle, bodyStyle, footerStyle} = container; const editorState = useContext(EditorContext); const maxWidth = editorState.getAppSettings().maxWidth; @@ -103,36 +139,46 @@ export function TriContainer(props: TriContainerProps) { return (
- - {showHeader && ( - - - - )} - {showBody && ( - - + + {showHeader && ( + + + + )} + {showBody && ( + + - - )} - {showFooter && ( - - - - )} - + + )} + {showFooter && ( + + + + )} +
); } diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx index e57a11dbf..5fb89f835 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx @@ -3,38 +3,41 @@ import { ContainerStyleType, heightCalculator, widthCalculator, -} from "comps/controls/styleControlConstants"; -import { EditorContext } from "comps/editorState"; -import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { HintPlaceHolder, TacoMarkDown } from "lowcoder-design"; -import { ReactNode, useContext } from "react"; -import styled, { css } from "styled-components"; -import { checkIsMobile } from "util/commonUtils"; + ContainerHeaderStyleType, + ContainerBodyStyleType, +} from 'comps/controls/styleControlConstants'; +import {EditorContext} from 'comps/editorState'; +import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; +import {HintPlaceHolder, TacoMarkDown} from 'lowcoder-design'; +import {ReactNode, useContext} from 'react'; +import styled, {css} from 'styled-components'; +import {checkIsMobile} from 'util/commonUtils'; import { gridItemCompToGridItems, InnerGrid, -} from "../containerComp/containerView"; -import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder"; +} from '../containerComp/containerView'; +import {TriContainerViewProps} from '../triContainerComp/triContainerCompBuilder'; const getStyle = (style: TextStyleType) => { return css` - border-radius: ${(style.radius ? style.radius : "4px")}; - border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border}; + border-radius: ${style.radius ? style.radius : '4px'}; + border: ${style.borderWidth ? style.borderWidth : '0px'} solid + ${style.border}; color: ${style.text}; font-size: ${style.textSize} !important; font-weight: ${style.textWeight} !important; font-family: ${style.fontFamily} !important; - font-style:${style.fontStyle} !important; - text-transform:${style.textTransform} !important; - text-decoration:${style.textDecoration} !important; + font-style: ${style.fontStyle} !important; + text-transform: ${style.textTransform} !important; + text-decoration: ${style.textDecoration} !important; background-color: ${style.background}; .markdown-body a { color: ${style.links}; } .markdown-body { - margin: ${style.margin} !important; - padding: ${style.padding}; - width: ${widthCalculator(style.margin)}; + margin: ${style.margin} !important; + padding: ${style.padding}; + width: ${widthCalculator(style.margin)}; // height: ${heightCalculator(style.margin)}; h1 { line-height: 1.5; @@ -65,25 +68,40 @@ const getStyle = (style: TextStyleType) => { } } `; - } +}; -const Wrapper = styled.div<{ $style: ContainerStyleType }>` +const Wrapper = styled.div<{$style: ContainerStyleType}>` display: flex; flex-flow: column; height: 100%; - border: ${(props) => props.$style.borderWidth} solid ${(props) => props.$style.border}; + border: ${(props) => props.$style.borderWidth} solid + ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; background-color: ${(props) => props.$style.background}; padding: ${(props) => props.$style.padding}; margin: ${(props) => props.$style.margin}; - ${(props) => props.$style.backgroundImage && `background-image: url(${props.$style.backgroundImage});`} - ${(props) => props.$style.backgroundImageRepeat && `background-repeat: ${props.$style.backgroundImageRepeat};`} - ${(props) => props.$style.backgroundImageSize && `background-size: ${props.$style.backgroundImageSize};`} - ${(props) => props.$style.backgroundImagePosition && `background-position: ${props.$style.backgroundImagePosition};`} - ${(props) => props.$style.backgroundImageOrigin && `background-origin: ${props.$style.backgroundImageOrigin};`} + rotate: ${(props) => props.$style.rotation}; + ${(props) => + props.$style.backgroundImage && + `background-image: url(${props.$style.backgroundImage});`} + ${(props) => + props.$style.backgroundImageRepeat && + `background-repeat: ${props.$style.backgroundImageRepeat};`} + ${(props) => + props.$style.backgroundImageSize && + `background-size: ${props.$style.backgroundImageSize};`} + ${(props) => + props.$style.backgroundImagePosition && + `background-position: ${props.$style.backgroundImagePosition};`} + ${(props) => + props.$style.backgroundImageOrigin && + `background-origin: ${props.$style.backgroundImageOrigin};`} `; -const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignment : any }>` +const FloatTextWrapper = styled.div<{ + $style: TextStyleType; + $horizontalAlignment: any; +}>` ${(props) => props.$style && getStyle(props.$style)} text-align: ${(props) => props.$horizontalAlignment}; padding: ${(props) => props.$style.padding}; @@ -91,10 +109,15 @@ const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignmen `; const HeaderInnerGrid = styled(InnerGrid)<{ - $backgroundColor: string - }>` + $backgroundColor: string; + $headerStyle: ContainerHeaderStyleType; +}>` overflow: visible; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + rotate:${(props) => { + return `${props.$headerStyle.rotation};`; + }} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -103,10 +126,16 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; + $bodyStyle: ContainerBodyStyleType; }>` - border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + rotate: ${(props) => { + return `${props.$bodyStyle.rotation}`; + }}; + border-top: ${(props) => + `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -121,15 +150,27 @@ const FooterInnerGrid = styled(InnerGrid)<{ $footerBackgroundImagePosition: string; $footerBackgroundImageOrigin: string; }>` - border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + border-top: ${(props) => + `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; overflow: visible; - ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => + props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`} - ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`} - ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`} - ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`} - ${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`} + ${(props) => + props.$footerBackgroundImage && + `background-image: url(${props.$footerBackgroundImage});`} + ${(props) => + props.$footerBackgroundImageRepeat && + `background-repeat: ${props.$footerBackgroundImageRepeat};`} + ${(props) => + props.$footerBackgroundImageSize && + `background-size: ${props.$footerBackgroundImageSize};`} + ${(props) => + props.$footerBackgroundImagePosition && + `background-position: ${props.$footerBackgroundImagePosition};`} + ${(props) => + props.$footerBackgroundImageOrigin && + `background-origin: ${props.$footerBackgroundImageOrigin};`} `; export type TriContainerProps = TriContainerViewProps & { @@ -145,61 +186,57 @@ export type TriContainerProps = TriContainerViewProps & { }; export function TriContainer(props: TriContainerProps) { - const { container, text } = props; - const { showHeader, showFooter } = container; + const {container, text} = props; + const {showHeader, showFooter} = container; // When the header and footer are not displayed, the body must be displayed const showBody = container.showBody || (!showHeader && !showFooter); - const { items: headerItems, ...otherHeaderProps } = container.header; - const { items: bodyItems, ...otherBodyProps } = - container.body["0"].children.view.getView(); - const { items: footerItems, ...otherFooterProps } = container.footer; + const {items: headerItems, ...otherHeaderProps} = container.header; + const {items: bodyItems, ...otherBodyProps} = + container.body['0'].children.view.getView(); + const {items: footerItems, ...otherFooterProps} = container.footer; const editorState = useContext(EditorContext); const maxWidth = editorState.getAppSettings().maxWidth; const isMobile = checkIsMobile(maxWidth); const paddingWidth = isMobile ? 7 : 19; - const { - style, - headerStyle, - bodyStyle, - footerStyle, - } = container; + const {style, headerStyle, bodyStyle, footerStyle} = container; return ( {showHeader && ( - + + {...otherHeaderProps} + items={gridItemCompToGridItems(headerItems)} + autoHeight={true} + emptyRows={5} + minHeight="46px" + containerPadding={[0, 0]} + showName={{bottom: showFooter ? 20 : 0}} + $headerStyle={headerStyle} + $backgroundColor={headerStyle?.headerBackground || 'transparent'} + style={{padding: headerStyle.containerHeaderPadding}} + /> )} {showBody && (
+ />

- {props.type === "markdown" ? ( + {props.type === 'markdown' ? ( {text.value} ) : ( text.value @@ -228,27 +265,32 @@ export function TriContainer(props: TriContainerProps) { )} {showFooter && ( - + + style={{padding: footerStyle.containerFooterPadding}} + /> )} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 6eee55bc4..65de135ea 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -820,6 +820,7 @@ export const ContainerStyle = [ BORDER_WIDTH, MARGIN, PADDING, + ROTATION, { name: 'backgroundImage', label: trans('style.backgroundImage'), @@ -850,6 +851,7 @@ export const ContainerStyle = [ export const ContainerHeaderStyle = [ CONTAINER_HEADER_PADDING, HEADER_BACKGROUND, + ROTATION, { name: 'headerBackgroundImage', label: trans('style.backgroundImage'), @@ -880,6 +882,7 @@ export const ContainerHeaderStyle = [ export const ContainerSiderStyle = [ CONTAINER_SIDER_PADDING, SIDER_BACKGROUND, + ROTATION, { name: 'siderBackgroundImage', label: trans('style.backgroundImage'), @@ -909,6 +912,7 @@ export const ContainerSiderStyle = [ export const ContainerBodyStyle = [ CONTAINER_BODY_PADDING, + ROTATION, { name: 'background', label: trans('style.background'), From 8be7f702db189fe5d4582e29a477439d6786ed96 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Thu, 16 May 2024 23:54:32 +0500 Subject: [PATCH 017/155] default values changed --- .../src/comps/controls/styleControlConstants.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 65de135ea..8e1962cb4 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -236,13 +236,13 @@ export const defaultTheme: ThemeDetail = { padding: '3px', gridColumns: '24', textSize: '14px', - animation: 'bounce', - animationDelay: '2s', - animationDuration: '2s', - opacity: '0.33', - boxShadow: '10px 5px 5px', - boxShadowColor: '#D7D9E0', - animationIterationCount: '10', + animation: '', + animationDelay: '', + animationDuration: '', + opacity: '1', + boxShadow: '', + boxShadowColor: '', + animationIterationCount: '', }; export const SURFACE_COLOR = '#FFFFFF'; From b2ececeb3392cc5431987d4db269bc150880c6d0 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Fri, 17 May 2024 00:29:29 +0500 Subject: [PATCH 018/155] values changed --- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 8e1962cb4..fc39b0b7e 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -672,14 +672,14 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [ BORDER_STYLE, RADIUS, BORDER_WIDTH, - ANIMATION, - ANIMATIONDELAY, - ANIMATIONDURATION, OPACITY, BOXSHADOW, BOXSHADOWCOLOR, - ANIMATIONITERATIONCOUNT, ROTATION, + ANIMATION, + ANIMATIONDELAY, + ANIMATIONDURATION, + ANIMATIONITERATIONCOUNT, ]; const FILL = { From f35cb79d1e2d799eef2660f12ae1905caa27a3ce Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Fri, 17 May 2024 04:36:30 +0500 Subject: [PATCH 019/155] configurations --- client/yarn.lock | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/yarn.lock b/client/yarn.lock index baea75c0c..9cdf541d5 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -5848,6 +5848,13 @@ __metadata: languageName: node linkType: hard +"animate.css@npm:^4.1.1": + version: 4.1.1 + resolution: "animate.css@npm:4.1.1" + checksum: c7eb91540423532c549725a6dedea993735a05eadaa49ed4d1965ce166a6db36459adcc9667c1dfe13657fab92a2875bbee34ad0d942444a731badab69f762c8 + languageName: node + linkType: hard + "ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0": version: 4.3.2 resolution: "ansi-escapes@npm:4.3.2" @@ -13739,6 +13746,7 @@ coolshapes-react@lowcoder-org/coolshapes-react: "@types/regenerator-runtime": ^0.13.1 "@types/uuid": ^8.3.4 "@vitejs/plugin-react": ^2.2.0 + animate.css: ^4.1.1 antd: 5.13.2 axios: ^1.6.2 buffer: ^6.0.3 From bbd43cd4898f6c5ef3f40baaabc86b551864b39a Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Fri, 17 May 2024 19:01:11 +0500 Subject: [PATCH 020/155] icons updated --- .../lowcoder-design/src/icons/index.ts | 1357 ++++++++--------- .../src/comps/controls/styleControl.tsx | 16 +- 2 files changed, 688 insertions(+), 685 deletions(-) diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index bac14e692..e614ddce1 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -1,712 +1,711 @@ -export { ReactComponent as AppSnapshotIcon } from "./app-snapshot.svg"; -export { ReactComponent as HookCompDropIcon } from "./hook-comp-drop.svg"; -export { ReactComponent as HookCompIcon } from "./hook-comp.svg"; +export {ReactComponent as AppSnapshotIcon} from './app-snapshot.svg'; +export {ReactComponent as HookCompDropIcon} from './hook-comp-drop.svg'; +export {ReactComponent as HookCompIcon} from './hook-comp.svg'; -export { ReactComponent as JsGrayIcon } from "./icon-Js-Gray.svg"; -export { ReactComponent as JsColorsIcon } from "./icon-Js-colors.svg"; -export { ReactComponent as AdminIcon } from "./icon-admin.svg"; -export { ReactComponent as AlignVerticalCent } from "./icon-align-vertical-center.svg"; -export { ReactComponent as AppEditIcon } from "./icon-app-edit.svg"; -export { ReactComponent as AuditAppIcon } from "./icon-audit-app.svg"; -export { ReactComponent as AuditDbIcon } from "./icon-audit-db.svg"; -export { ReactComponent as TreeFoldIcon } from "./icon-audit-fold.svg"; -export { ReactComponent as AuditQueryIcon } from "./icon-audit-query.svg"; -export { ReactComponent as AuditUserIcon } from "./icon-audit-user.svg"; -export { ReactComponent as AuditFolderIcon } from "./icon-audit-folder.svg"; +export {ReactComponent as JsGrayIcon} from './icon-Js-Gray.svg'; +export {ReactComponent as JsColorsIcon} from './icon-Js-colors.svg'; +export {ReactComponent as AdminIcon} from './icon-admin.svg'; +export {ReactComponent as AlignVerticalCent} from './icon-align-vertical-center.svg'; +export {ReactComponent as AppEditIcon} from './icon-app-edit.svg'; +export {ReactComponent as AuditAppIcon} from './icon-audit-app.svg'; +export {ReactComponent as AuditDbIcon} from './icon-audit-db.svg'; +export {ReactComponent as TreeFoldIcon} from './icon-audit-fold.svg'; +export {ReactComponent as AuditQueryIcon} from './icon-audit-query.svg'; +export {ReactComponent as AuditUserIcon} from './icon-audit-user.svg'; +export {ReactComponent as AuditFolderIcon} from './icon-audit-folder.svg'; -export { ReactComponent as CaptchaIcon } from "./icon-captcha.svg"; -export { ReactComponent as CheckboxIcon } from "./icon-checkbox.svg"; -export { ReactComponent as CheckoutIcon } from "./icon-checkout.svg"; -export { ReactComponent as ClickLinkIcon } from "./icon-clickLink.svg"; -export { ReactComponent as CloseEyeIcon } from "./icon-closeEye.svg"; -export { ReactComponent as CodeEditorCloseIcon } from "./icon-code-editor-close.svg"; -export { ReactComponent as CodeEditorOpenIcon } from "./icon-code-editor-open.svg"; -export { ReactComponent as CodeEditorPinnedIcon} from "./remix/pushpin-2-fill.svg" -export { ReactComponent as CodeEditorUnPinnedIcon} from "./remix/pushpin-line.svg" -export { ReactComponent as ColorHexIcon } from "./icon-colorHex.svg"; -export { ReactComponent as ContainerDragIcon } from "./icon-container-drag.svg"; -export { ReactComponent as CopyIcon } from "./icon-copy.svg"; -export { ReactComponent as CreateModuleIcon } from "./icon-create-module.svg"; -export { ReactComponent as PrevIcon } from "./icon-date-prev.svg"; -export { ReactComponent as SuperPrevIcon } from "./icon-date-super-prev.svg"; -export { ReactComponent as DragWhiteIcon } from "./icon-drag-white.svg"; -export { ReactComponent as EmptyDataIcon } from "./icon-empty-data.svg"; -export { ReactComponent as FlokcloseIcon } from "./icon-flokclose.svg"; -export { ReactComponent as FoldedIcon } from "./icon-folded.svg"; -export { ReactComponent as GroupIcon } from "./icon-group.svg"; -export { ReactComponent as HelpIcon } from "./icon-help.svg"; -export { ReactComponent as LockIcon } from "./icon-lock.svg"; -export { ReactComponent as MembersIcon } from "./icon-members.svg"; -export { ReactComponent as MoreActionIcon } from "./icon-more-action.svg"; -export { ReactComponent as MultiselectTagIcon } from "./icon-multiselect-tag.svg"; -export { ReactComponent as MustFillStarIcon } from "./icon-must-fill-star.svg"; -export { ReactComponent as NofileIcon } from "./icon-nofile.svg"; -export { ReactComponent as OmitIcon } from "./icon-omit.svg"; -export { ReactComponent as OpenEyeIcon } from "./icon-openEye.svg"; -export { ReactComponent as PasswordIcon } from "./icon-password.svg"; -export { ReactComponent as RadioCheckedIcon } from "./icon-radio-checked.svg"; -export { ReactComponent as RequiredIcon } from "./icon-required.svg"; -export { ReactComponent as AttributeIcon } from "./icon-right-attribute.svg"; -export { ReactComponent as InsertIcon } from "./icon-right-insert.svg"; -export { ReactComponent as ShowBorderIcon } from "./icon-show-border.svg"; -export { ReactComponent as SpaceIcon } from "./icon-space.svg"; -export { ReactComponent as StarIcon } from "./icon-star.svg"; -export { ReactComponent as SuperUserIcon } from "./icon-super-user.svg"; -export { ReactComponent as SwitchCheckedIcon } from "./icon-switch-checked.svg"; -export { ReactComponent as TextEditIcon } from "./icon-text-edit.svg"; -export { ReactComponent as TriangleIcon } from "./icon-triangle.svg"; -export { ReactComponent as TypographyIcon } from "./icon-typography.svg"; -export { ReactComponent as UnfoldWhiteIcon } from "./icon-unfold-white.svg"; -export { ReactComponent as UnfoldIcon } from "./icon-unfold.svg"; -export { ReactComponent as WarningWhiteIcon } from "./icon-warning-white.svg"; -export { ReactComponent as WarningIcon } from "./icon-warning.svg"; -export { ReactComponent as WidthDragIcon } from "./icon-widthDrag.svg"; -export { ReactComponent as ManyCheckboxIcon } from "./manyCheckbox.svg"; -export { ReactComponent as Layout } from "./icon-ShowLayout.svg"; -export { ReactComponent as Left } from "./icon-ShowLeft.svg"; -export { ReactComponent as Middle } from "./icon-ShowMiddle.svg"; -export { ReactComponent as Right } from "./icon-ShowRight.svg"; -export { ReactComponent as DeployIcon } from "./icon-rocket.svg"; -export { ReactComponent as ExportIcon } from "./icon-export.svg"; -export { ReactComponent as BluePlusIcon } from "./icon-blue-add.svg"; -export { ReactComponent as PencilIcon } from "./icon-pencil.svg"; -export { ReactComponent as DragIcon } from "./icon-drag.svg"; -export { ReactComponent as PointIcon } from "./icon-three-point.svg"; -export { ReactComponent as AlignJustify } from "./icon-align-justify.svg"; -export { ReactComponent as AlignRight } from "./icon-align-right.svg"; -export { ReactComponent as AlignCenter } from "./icon-align-center.svg"; -export { ReactComponent as AlignLeft } from "./icon-align-left.svg"; -export { ReactComponent as AlignClose } from "./icon-align-close.svg"; -export { ReactComponent as AlignTop } from "./icon-align-top.svg"; -export { ReactComponent as AlignBottom } from "./icon-align-bottom.svg"; -export { ReactComponent as AddIcon } from "./icon-add.svg"; -export { ReactComponent as ImportAppIcon } from "./icon-app-import.svg"; -export { ReactComponent as ImportIcon } from "./icon-import.svg"; -export { ReactComponent as ImportIconV2 } from "./icon-import-v2.svg"; -export { ReactComponent as DatasourceIcon } from "./icon-datasource.svg"; -export { ReactComponent as QueryLibraryIcon } from "./icon-query-library.svg"; -export { ReactComponent as TransformerIcon } from "./icon-transformer.svg"; -export { ReactComponent as TempStateIcon } from "./icon-temp-state.svg"; -export { ReactComponent as IconDep } from "./icon-style-dep.svg"; -export { ReactComponent as IconRadius } from "./icon-style-border-radius.svg"; -export { ReactComponent as IconReset } from "./icon-style-reset.svg"; -export { ReactComponent as PackUpIcon } from "./icon-Pack-up.svg"; -export { ReactComponent as SearchIcon } from "./icon-Search.svg"; -export { ReactComponent as SearchOutlinedIcon } from "./icon-SearchOutlined.svg"; -export { ReactComponent as FilterIcon } from "./icon-filter.svg"; -export { ReactComponent as DownloadIcon } from "./icon-download.svg"; -export { ReactComponent as DownloadBoldIcon } from "./icon-download-bold.svg"; -export { ReactComponent as DownloadedIcon } from "./icon-downloaded.svg"; -export { ReactComponent as SettingIcon } from "./icon-setting.svg"; -export { ReactComponent as RefreshIcon } from "./icon-refresh.svg"; -export { ReactComponent as DeleteIcon } from "./icon-recycle-bin.svg"; -export { ReactComponent as DeleteInputIcon } from "./icon-deleteinput.svg"; -export { ReactComponent as UpgradeIcon } from "./icon-upgrade.svg"; -export { ReactComponent as QuestionIcon } from "./icon-question.svg"; -export { ReactComponent as CloseIcon } from "./icon-close.svg"; -export { ReactComponent as SuccessIcon } from "./icon-success.svg"; -export { ReactComponent as ErrorIcon } from "./icon-err-warning.svg"; -export { ReactComponent as DocIcon } from "./icon-tutorial.svg"; -export { ReactComponent as DocBoldIcon } from "./icon-tutorial-bold.svg"; -export { ReactComponent as LabIcon } from "./icon-laboratory.svg"; -export { ReactComponent as ArrowIcon } from "./icon-arrow.svg"; -export { ReactComponent as ArrowSolidIcon } from "./icon-arrow-solid.svg"; +export {ReactComponent as CaptchaIcon} from './icon-captcha.svg'; +export {ReactComponent as CheckboxIcon} from './icon-checkbox.svg'; +export {ReactComponent as CheckoutIcon} from './icon-checkout.svg'; +export {ReactComponent as ClickLinkIcon} from './icon-clickLink.svg'; +export {ReactComponent as CloseEyeIcon} from './icon-closeEye.svg'; +export {ReactComponent as CodeEditorCloseIcon} from './icon-code-editor-close.svg'; +export {ReactComponent as CodeEditorOpenIcon} from './icon-code-editor-open.svg'; +export {ReactComponent as CodeEditorPinnedIcon} from './remix/pushpin-2-fill.svg'; +export {ReactComponent as CodeEditorUnPinnedIcon} from './remix/pushpin-line.svg'; +export {ReactComponent as ColorHexIcon} from './icon-colorHex.svg'; +export {ReactComponent as ContainerDragIcon} from './icon-container-drag.svg'; +export {ReactComponent as CopyIcon} from './icon-copy.svg'; +export {ReactComponent as CreateModuleIcon} from './icon-create-module.svg'; +export {ReactComponent as PrevIcon} from './icon-date-prev.svg'; +export {ReactComponent as SuperPrevIcon} from './icon-date-super-prev.svg'; +export {ReactComponent as DragWhiteIcon} from './icon-drag-white.svg'; +export {ReactComponent as EmptyDataIcon} from './icon-empty-data.svg'; +export {ReactComponent as FlokcloseIcon} from './icon-flokclose.svg'; +export {ReactComponent as FoldedIcon} from './icon-folded.svg'; +export {ReactComponent as GroupIcon} from './icon-group.svg'; +export {ReactComponent as HelpIcon} from './icon-help.svg'; +export {ReactComponent as LockIcon} from './icon-lock.svg'; +export {ReactComponent as MembersIcon} from './icon-members.svg'; +export {ReactComponent as MoreActionIcon} from './icon-more-action.svg'; +export {ReactComponent as MultiselectTagIcon} from './icon-multiselect-tag.svg'; +export {ReactComponent as MustFillStarIcon} from './icon-must-fill-star.svg'; +export {ReactComponent as NofileIcon} from './icon-nofile.svg'; +export {ReactComponent as OmitIcon} from './icon-omit.svg'; +export {ReactComponent as OpenEyeIcon} from './icon-openEye.svg'; +export {ReactComponent as PasswordIcon} from './icon-password.svg'; +export {ReactComponent as RadioCheckedIcon} from './icon-radio-checked.svg'; +export {ReactComponent as RequiredIcon} from './icon-required.svg'; +export {ReactComponent as AttributeIcon} from './icon-right-attribute.svg'; +export {ReactComponent as InsertIcon} from './icon-right-insert.svg'; +export {ReactComponent as ShowBorderIcon} from './icon-show-border.svg'; +export {ReactComponent as SpaceIcon} from './icon-space.svg'; +export {ReactComponent as StarIcon} from './icon-star.svg'; +export {ReactComponent as SuperUserIcon} from './icon-super-user.svg'; +export {ReactComponent as SwitchCheckedIcon} from './icon-switch-checked.svg'; +export {ReactComponent as TextEditIcon} from './icon-text-edit.svg'; +export {ReactComponent as TriangleIcon} from './icon-triangle.svg'; +export {ReactComponent as TypographyIcon} from './icon-typography.svg'; +export {ReactComponent as UnfoldWhiteIcon} from './icon-unfold-white.svg'; +export {ReactComponent as UnfoldIcon} from './icon-unfold.svg'; +export {ReactComponent as WarningWhiteIcon} from './icon-warning-white.svg'; +export {ReactComponent as WarningIcon} from './icon-warning.svg'; +export {ReactComponent as WidthDragIcon} from './icon-widthDrag.svg'; +export {ReactComponent as ManyCheckboxIcon} from './manyCheckbox.svg'; +export {ReactComponent as Layout} from './icon-ShowLayout.svg'; +export {ReactComponent as Left} from './icon-ShowLeft.svg'; +export {ReactComponent as Middle} from './icon-ShowMiddle.svg'; +export {ReactComponent as Right} from './icon-ShowRight.svg'; +export {ReactComponent as DeployIcon} from './icon-rocket.svg'; +export {ReactComponent as ExportIcon} from './icon-export.svg'; +export {ReactComponent as BluePlusIcon} from './icon-blue-add.svg'; +export {ReactComponent as PencilIcon} from './icon-pencil.svg'; +export {ReactComponent as DragIcon} from './icon-drag.svg'; +export {ReactComponent as PointIcon} from './icon-three-point.svg'; +export {ReactComponent as AlignJustify} from './icon-align-justify.svg'; +export {ReactComponent as AlignRight} from './icon-align-right.svg'; +export {ReactComponent as AlignCenter} from './icon-align-center.svg'; +export {ReactComponent as AlignLeft} from './icon-align-left.svg'; +export {ReactComponent as AlignClose} from './icon-align-close.svg'; +export {ReactComponent as AlignTop} from './icon-align-top.svg'; +export {ReactComponent as AlignBottom} from './icon-align-bottom.svg'; +export {ReactComponent as AddIcon} from './icon-add.svg'; +export {ReactComponent as ImportAppIcon} from './icon-app-import.svg'; +export {ReactComponent as ImportIcon} from './icon-import.svg'; +export {ReactComponent as ImportIconV2} from './icon-import-v2.svg'; +export {ReactComponent as DatasourceIcon} from './icon-datasource.svg'; +export {ReactComponent as QueryLibraryIcon} from './icon-query-library.svg'; +export {ReactComponent as TransformerIcon} from './icon-transformer.svg'; +export {ReactComponent as TempStateIcon} from './icon-temp-state.svg'; +export {ReactComponent as IconDep} from './icon-style-dep.svg'; +export {ReactComponent as IconRadius} from './icon-style-border-radius.svg'; +export {ReactComponent as IconReset} from './icon-style-reset.svg'; +export {ReactComponent as PackUpIcon} from './icon-Pack-up.svg'; +export {ReactComponent as SearchIcon} from './icon-Search.svg'; +export {ReactComponent as SearchOutlinedIcon} from './icon-SearchOutlined.svg'; +export {ReactComponent as FilterIcon} from './icon-filter.svg'; +export {ReactComponent as DownloadIcon} from './icon-download.svg'; +export {ReactComponent as DownloadBoldIcon} from './icon-download-bold.svg'; +export {ReactComponent as DownloadedIcon} from './icon-downloaded.svg'; +export {ReactComponent as SettingIcon} from './icon-setting.svg'; +export {ReactComponent as RefreshIcon} from './icon-refresh.svg'; +export {ReactComponent as DeleteIcon} from './icon-recycle-bin.svg'; +export {ReactComponent as DeleteInputIcon} from './icon-deleteinput.svg'; +export {ReactComponent as UpgradeIcon} from './icon-upgrade.svg'; +export {ReactComponent as QuestionIcon} from './icon-question.svg'; +export {ReactComponent as CloseIcon} from './icon-close.svg'; +export {ReactComponent as SuccessIcon} from './icon-success.svg'; +export {ReactComponent as ErrorIcon} from './icon-err-warning.svg'; +export {ReactComponent as DocIcon} from './icon-tutorial.svg'; +export {ReactComponent as DocBoldIcon} from './icon-tutorial-bold.svg'; +export {ReactComponent as LabIcon} from './icon-laboratory.svg'; +export {ReactComponent as ArrowIcon} from './icon-arrow.svg'; +export {ReactComponent as ArrowSolidIcon} from './icon-arrow-solid.svg'; // Home Section -export { ReactComponent as PlusIcon } from "./icon-plus.svg"; -export { ReactComponent as ApplicationDocIcon } from "./v2/app-m.svg"; -export { ReactComponent as ModuleMenuIcon } from "./v2/module-m.svg"; -export { ReactComponent as ModuleIcon } from "./v2/module-m.svg"; -export { ReactComponent as ModuleDocIcon } from "./v2/module-m.svg"; -export { ReactComponent as NavDocIcon } from "./v2/entry-page-m.svg"; -export { ReactComponent as FolderIcon } from "./remix/folder-6-line.svg"; -export { ReactComponent as AllTypesIcon } from "./icon-application-all.svg"; -export { ReactComponent as InviteUserIcon } from "./icon-application-invite-user.svg"; -export { ReactComponent as HomeEmptyIcon } from "./icon-application-empty.svg"; -export { ReactComponent as HomeListIcon } from "./icon-application-list.svg"; -export { ReactComponent as HomeCardIcon } from "./icon-application-card.svg"; +export {ReactComponent as PlusIcon} from './icon-plus.svg'; +export {ReactComponent as ApplicationDocIcon} from './v2/app-m.svg'; +export {ReactComponent as ModuleMenuIcon} from './v2/module-m.svg'; +export {ReactComponent as ModuleIcon} from './v2/module-m.svg'; +export {ReactComponent as ModuleDocIcon} from './v2/module-m.svg'; +export {ReactComponent as NavDocIcon} from './v2/entry-page-m.svg'; +export {ReactComponent as FolderIcon} from './remix/folder-6-line.svg'; +export {ReactComponent as AllTypesIcon} from './icon-application-all.svg'; +export {ReactComponent as InviteUserIcon} from './icon-application-invite-user.svg'; +export {ReactComponent as HomeEmptyIcon} from './icon-application-empty.svg'; +export {ReactComponent as HomeListIcon} from './icon-application-list.svg'; +export {ReactComponent as HomeCardIcon} from './icon-application-card.svg'; // export { ReactComponent as AllAppIcon } from "./icon-all-app.svg"; - // Data Sources -export { ReactComponent as MysqlIcon } from "./icon-query-MySQL.svg"; -export { ReactComponent as MongoIcon } from "./icon-query-MongoDB.svg"; -export { ReactComponent as PostgresIcon } from "./icon-query-postgres.svg"; -export { ReactComponent as RedisIcon } from "./icon-query-Redis.svg"; -export { ReactComponent as MSSQLIcon } from "./icon-query-mssql.svg"; -export { ReactComponent as SMTPIcon } from "./icon-query-SMTP.svg"; -export { ReactComponent as OracleIcon } from "./icon-query-OracleDB.svg"; -export { ReactComponent as ClickHouseIcon } from "./icon-query-ClickHouse.svg"; -export { ReactComponent as GoogleSheetsIcon } from "./icon-query-GoogleSheets.svg"; -export { ReactComponent as GraphqlIcon } from "./icon-query-Graphql.svg"; -export { ReactComponent as SnowflakeIcon } from "./icon-query-snowflake.svg"; -export { ReactComponent as MariaDBIcon } from "./icon-query-MariaDB.svg"; +export {ReactComponent as MysqlIcon} from './icon-query-MySQL.svg'; +export {ReactComponent as MongoIcon} from './icon-query-MongoDB.svg'; +export {ReactComponent as PostgresIcon} from './icon-query-postgres.svg'; +export {ReactComponent as RedisIcon} from './icon-query-Redis.svg'; +export {ReactComponent as MSSQLIcon} from './icon-query-mssql.svg'; +export {ReactComponent as SMTPIcon} from './icon-query-SMTP.svg'; +export {ReactComponent as OracleIcon} from './icon-query-OracleDB.svg'; +export {ReactComponent as ClickHouseIcon} from './icon-query-ClickHouse.svg'; +export {ReactComponent as GoogleSheetsIcon} from './icon-query-GoogleSheets.svg'; +export {ReactComponent as GraphqlIcon} from './icon-query-Graphql.svg'; +export {ReactComponent as SnowflakeIcon} from './icon-query-snowflake.svg'; +export {ReactComponent as MariaDBIcon} from './icon-query-MariaDB.svg'; // Data Queries -export { ReactComponent as DataResponderIcon } from "./icon-query-data-responder.svg"; -export { ReactComponent as RestApiIcon } from "./icon-query-API.svg"; -export { ReactComponent as DeleteApiIcon } from "./icon-query-delete.svg"; -export { ReactComponent as GetApiIcon } from "./icon-query-get.svg"; -export { ReactComponent as PatchApiIcon } from "./icon-query-patch.svg"; -export { ReactComponent as PostApiIcon } from "./icon-query-post.svg"; -export { ReactComponent as PutApiIcon } from "./icon-query-put.svg"; -export { ReactComponent as OptionsApiIcon } from "./icon-query-options.svg"; -export { ReactComponent as HeadApiIcon } from "./icon-query-head.svg"; -export { ReactComponent as TraceApiIcon } from "./icon-query-trace.svg"; -export { ReactComponent as JSIcon } from "./icon-query-JS.svg"; -export { ReactComponent as LowcoderQueryIcon } from "./icon-query-lowcoder.svg"; -export { ReactComponent as EsIcon } from "./icon-query-ElasticSearch.svg"; - -export { ReactComponent as ResetIcon } from "./icon-style-reset.svg"; -export { ReactComponent as EditIcon } from "./icon-edit.svg"; -export { ReactComponent as EditableIcon } from "./icon-editable.svg"; -export { ReactComponent as LeftStateIcon } from "./remix/node-tree.svg"; -export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg"; -export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg"; -export { ReactComponent as LeftHelpIcon } from "./icon-left-help.svg"; -export { ReactComponent as LeftPreloadIcon } from "./icon-left-preload.svg"; +export {ReactComponent as DataResponderIcon} from './icon-query-data-responder.svg'; +export {ReactComponent as RestApiIcon} from './icon-query-API.svg'; +export {ReactComponent as DeleteApiIcon} from './icon-query-delete.svg'; +export {ReactComponent as GetApiIcon} from './icon-query-get.svg'; +export {ReactComponent as PatchApiIcon} from './icon-query-patch.svg'; +export {ReactComponent as PostApiIcon} from './icon-query-post.svg'; +export {ReactComponent as PutApiIcon} from './icon-query-put.svg'; +export {ReactComponent as OptionsApiIcon} from './icon-query-options.svg'; +export {ReactComponent as HeadApiIcon} from './icon-query-head.svg'; +export {ReactComponent as TraceApiIcon} from './icon-query-trace.svg'; +export {ReactComponent as JSIcon} from './icon-query-JS.svg'; +export {ReactComponent as LowcoderQueryIcon} from './icon-query-lowcoder.svg'; +export {ReactComponent as EsIcon} from './icon-query-ElasticSearch.svg'; +export {ReactComponent as ResetIcon} from './icon-style-reset.svg'; +export {ReactComponent as EditIcon} from './icon-edit.svg'; +export {ReactComponent as EditableIcon} from './icon-editable.svg'; +export {ReactComponent as LeftStateIcon} from './remix/node-tree.svg'; +export {ReactComponent as StarSmileIcon} from './remix/star-smile-line.svg'; +export {ReactComponent as Timer2Icon} from './remix/timer-2-line.svg'; +export {ReactComponent as TimerFlashIcon} from './remix/timer-flash-line.svg'; +export {ReactComponent as RefreshLineIcon} from './remix/refresh-line.svg'; +export {ReactComponent as LeftSettingIcon} from './remix/tools-fill.svg'; +export {ReactComponent as LeftLayersIcon} from './remix/stack-line.svg'; +export {ReactComponent as LeftHelpIcon} from './icon-left-help.svg'; +export {ReactComponent as LeftPreloadIcon} from './icon-left-preload.svg'; -export { ReactComponent as HomeSettingsIcon } from "./icon-home-settings.svg"; -export { ReactComponent as HomeSettingsActiveIcon } from "./icon-home-settings-active.svg"; -export { ReactComponent as HelpGithubIcon } from "./icon-help-github.svg"; -export { ReactComponent as HelpDiscordIcon } from "./icon-help-discord.svg"; -export { ReactComponent as LeftOpen } from "./icon-left-comp-open.svg"; -export { ReactComponent as LeftClose } from "./icon-left-comp-close.svg"; -export { ReactComponent as MaterialUploadIcon } from "./icon-material-upload.svg"; -export { ReactComponent as UndoIcon } from "./icon-undo.svg"; +export {ReactComponent as HomeSettingsIcon} from './icon-home-settings.svg'; +export {ReactComponent as HomeSettingsActiveIcon} from './icon-home-settings-active.svg'; +export {ReactComponent as HelpGithubIcon} from './icon-help-github.svg'; +export {ReactComponent as HelpDiscordIcon} from './icon-help-discord.svg'; +export {ReactComponent as LeftOpen} from './icon-left-comp-open.svg'; +export {ReactComponent as LeftClose} from './icon-left-comp-close.svg'; +export {ReactComponent as MaterialUploadIcon} from './icon-material-upload.svg'; +export {ReactComponent as UndoIcon} from './icon-undo.svg'; -export { ReactComponent as ManualIcon } from "./icon-manual.svg"; -export { ReactComponent as WarnIcon } from "./icon-warn.svg"; -export { ReactComponent as SyncManualIcon } from "./icon-sync-manual.svg"; -export { ReactComponent as DangerIcon } from "./icon-danger.svg"; -export { ReactComponent as TableMinusIcon } from "./icon-table-minus.svg"; -export { ReactComponent as TablePlusIcon } from "./icon-table-plus.svg"; -export { ReactComponent as MobileAppIcon } from "./icon-mobile-app.svg"; -export { ReactComponent as MobileNavIcon } from "./icon-navigation-mobile.svg"; -export { ReactComponent as PcNavIcon } from "./icon-navigation-pc.svg"; -export { ReactComponent as UnLockIcon } from "./icon-unlock.svg"; -export { ReactComponent as CalendarDeleteIcon } from "./icon-calendar-delete.svg"; -export { ReactComponent as TableCheckedIcon } from "./icon-table-checked.svg"; -export { ReactComponent as TableUnCheckedIcon } from "./icon-table-boolean-false.svg"; -export { ReactComponent as FileFolderIcon } from "./icon-editor-folder.svg"; -export { ReactComponent as ExpandIcon } from "./icon-expand.svg"; -export { ReactComponent as CompressIcon } from "./icon-compress.svg"; -export { ReactComponent as TableCellsIcon } from "./icon-table-cells.svg"; // Added By Aqib Mirza +export {ReactComponent as ManualIcon} from './icon-manual.svg'; +export {ReactComponent as WarnIcon} from './icon-warn.svg'; +export {ReactComponent as SyncManualIcon} from './icon-sync-manual.svg'; +export {ReactComponent as DangerIcon} from './icon-danger.svg'; +export {ReactComponent as TableMinusIcon} from './icon-table-minus.svg'; +export {ReactComponent as TablePlusIcon} from './icon-table-plus.svg'; +export {ReactComponent as MobileAppIcon} from './icon-mobile-app.svg'; +export {ReactComponent as MobileNavIcon} from './icon-navigation-mobile.svg'; +export {ReactComponent as PcNavIcon} from './icon-navigation-pc.svg'; +export {ReactComponent as UnLockIcon} from './icon-unlock.svg'; +export {ReactComponent as CalendarDeleteIcon} from './icon-calendar-delete.svg'; +export {ReactComponent as TableCheckedIcon} from './icon-table-checked.svg'; +export {ReactComponent as TableUnCheckedIcon} from './icon-table-boolean-false.svg'; +export {ReactComponent as FileFolderIcon} from './icon-editor-folder.svg'; +export {ReactComponent as ExpandIcon} from './icon-expand.svg'; +export {ReactComponent as CompressIcon} from './icon-compress.svg'; +export {ReactComponent as TableCellsIcon} from './icon-table-cells.svg'; // Added By Aqib Mirza // Style Props -export { ReactComponent as WidthIcon } from "./icon-width.svg"; -export { ReactComponent as TextSizeIcon } from "./remix/font-size.svg"; -export { ReactComponent as TextTransformationIcon } from "./remix/font-size-2.svg"; -export { ReactComponent as FontFamilyIcon } from "./remix/font-sans-serif.svg"; -export { ReactComponent as TextWeightIcon } from "./remix/bold.svg"; -export { ReactComponent as TextDecorationIcon } from "./remix/underline.svg"; -export { ReactComponent as TextStyleIcon } from "./remix/italic.svg"; -export { ReactComponent as BorderWidthIcon } from "./remix/space.svg"; -export { ReactComponent as BorderStyleIcon } from "./remix/separator.svg"; -export { ReactComponent as RotationIcon } from "./remix/clockwise-line.svg"; -export { ReactComponent as BorderRadiusIcon } from "./remix/rounded-corner.svg"; +export {ReactComponent as WidthIcon} from './icon-width.svg'; +export {ReactComponent as TextSizeIcon} from './remix/font-size.svg'; +export {ReactComponent as TextTransformationIcon} from './remix/font-size-2.svg'; +export {ReactComponent as FontFamilyIcon} from './remix/font-sans-serif.svg'; +export {ReactComponent as TextWeightIcon} from './remix/bold.svg'; +export {ReactComponent as TextDecorationIcon} from './remix/underline.svg'; +export {ReactComponent as TextStyleIcon} from './remix/italic.svg'; +export {ReactComponent as BorderWidthIcon} from './remix/space.svg'; +export {ReactComponent as BorderStyleIcon} from './remix/separator.svg'; +export {ReactComponent as RotationIcon} from './remix/clockwise-line.svg'; +export {ReactComponent as BorderRadiusIcon} from './remix/rounded-corner.svg'; // Falk: TODO -export { ReactComponent as ShadowIcon } from "./remix/shadow-line.svg"; -export { ReactComponent as OpacityIcon } from "./remix/contrast-drop-2-line.svg"; -export { ReactComponent as AnimationIcon } from "./remix/loader-line.svg"; - +export {ReactComponent as ShadowIcon} from './remix/shadow-line.svg'; +export {ReactComponent as OpacityIcon} from './remix/contrast-drop-2-line.svg'; +export {ReactComponent as AnimationIcon} from './remix/loader-line.svg'; -export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg"; -export { ReactComponent as LeftInfoFill } from "./remix/information-fill.svg"; -export { ReactComponent as LeftShow } from "./remix/eye-off-line.svg"; -export { ReactComponent as LeftHide } from "./remix/eye-line.svg"; -export { ReactComponent as LeftLock } from "./remix/lock-line.svg"; -export { ReactComponent as LeftUnlock } from "./remix/lock-unlock-line.svg"; -export { ReactComponent as UserGroupIcon } from "./remix/group-line.svg"; -export { ReactComponent as UserIcon } from "./remix/user-line.svg"; -export { ReactComponent as UserAddIcon } from "./remix/user-add-line.svg"; -export { ReactComponent as UserDeleteIcon } from "./remix/user-unfollow-line.svg"; -export { ReactComponent as UserShieldIcon } from "./remix/shield-user-line.svg"; -export { ReactComponent as ThemeIcon } from "./remix/palette-line.svg"; -export { ReactComponent as AppsIcon } from "./remix/apps-2-line.svg"; -export { ReactComponent as WorkspacesIcon } from "./remix/hotel-line.svg"; - -export { ReactComponent as HomeIcon } from "./remix/home-3-line.svg"; -export { ReactComponent as NewsIcon } from "./remix/megaphone-line.svg"; -export { ReactComponent as HomeModuleIcon } from "./remix/focus-mode.svg"; -export { ReactComponent as HomeQueryLibraryIcon } from "./remix/braces-line.svg"; -export { ReactComponent as HomeDataSourceIcon } from "./remix/database-2-line.svg"; -export { ReactComponent as RecyclerIcon } from "./remix/delete-bin-line.svg"; -export { ReactComponent as MarketplaceIcon } from "./icon-application-marketplace.svg"; -export { ReactComponent as FavoritesIcon } from "./icon-application-favorites.svg"; -export { ReactComponent as HomeSettingIcon } from "./remix/settings-4-line.svg"; -export { ReactComponent as EnterpriseIcon } from "./remix/earth-line.svg"; +export {ReactComponent as LeftInfoLine} from './remix/information-line.svg'; +export {ReactComponent as LeftInfoFill} from './remix/information-fill.svg'; +export {ReactComponent as LeftShow} from './remix/eye-off-line.svg'; +export {ReactComponent as LeftHide} from './remix/eye-line.svg'; +export {ReactComponent as LeftLock} from './remix/lock-line.svg'; +export {ReactComponent as LeftUnlock} from './remix/lock-unlock-line.svg'; +export {ReactComponent as UserGroupIcon} from './remix/group-line.svg'; +export {ReactComponent as UserIcon} from './remix/user-line.svg'; +export {ReactComponent as UserAddIcon} from './remix/user-add-line.svg'; +export {ReactComponent as UserDeleteIcon} from './remix/user-unfollow-line.svg'; +export {ReactComponent as UserShieldIcon} from './remix/shield-user-line.svg'; +export {ReactComponent as ThemeIcon} from './remix/palette-line.svg'; +export {ReactComponent as AppsIcon} from './remix/apps-2-line.svg'; +export {ReactComponent as WorkspacesIcon} from './remix/hotel-line.svg'; +export {ReactComponent as HomeIcon} from './remix/home-3-line.svg'; +export {ReactComponent as NewsIcon} from './remix/megaphone-line.svg'; +export {ReactComponent as HomeModuleIcon} from './remix/focus-mode.svg'; +export {ReactComponent as HomeQueryLibraryIcon} from './remix/braces-line.svg'; +export {ReactComponent as HomeDataSourceIcon} from './remix/database-2-line.svg'; +export {ReactComponent as RecyclerIcon} from './remix/delete-bin-line.svg'; +export {ReactComponent as MarketplaceIcon} from './icon-application-marketplace.svg'; +export {ReactComponent as FavoritesIcon} from './icon-application-favorites.svg'; +export {ReactComponent as HomeSettingIcon} from './remix/settings-4-line.svg'; +export {ReactComponent as EnterpriseIcon} from './remix/earth-line.svg'; // components // small -export { ReactComponent as LeftCommon } from "./icon-left-comp-common.svg"; // generic +export {ReactComponent as LeftCommon} from './icon-left-comp-common.svg'; // generic -export { ReactComponent as AvatarCompIconSmall } from "./v2/avatar-s.svg"; -export { ReactComponent as AvatarGroupCompIconSmall } from "./v2/avatargroup-s.svg"; -export { ReactComponent as AudioCompIconSmall } from "./v2/audio-player-s.svg"; -export { ReactComponent as AutoCompleteCompIconSmall } from "./v2/auto-complete-input-s.svg"; // new -export { ReactComponent as ButtonCompIconSmall } from "./v2/button-s.svg"; -export { ReactComponent as IconButtonCompIconSmall } from "./v2/icon-button-s.svg"; // new -export { ReactComponent as CardCompIconSmall } from "./v2/card-layout-s.svg"; -export { ReactComponent as CalendarCompIconSmall } from "./v2/calendar-s.svg"; -export { ReactComponent as CascaderCompIconSmall } from "./v2/cascader-s.svg"; -export { ReactComponent as CarouselCompIconSmall } from "./v2/image-carousel-s.svg"; // new -export { ReactComponent as ChartCompIconSmall } from "./v2/pie-chart-s.svg"; -export { ReactComponent as CheckboxCompIconSmall } from "./v2/checkbox-s.svg"; -export { ReactComponent as ColorPickerCompIconSmall } from "./v2/colorpicker-s.svg"; // new -export { ReactComponent as CollapsibleContainerCompIconSmall } from "./v2/collapsible-container-s.svg"; // new -export { ReactComponent as CommentCompIconSmall } from "./v2/comment-s.svg"; -export { ReactComponent as ContainerCompIconSmall } from "./v2/container-s.svg"; -export { ReactComponent as CustomCompIconSmall } from "./v2/custom-code-s.svg"; // new -export { ReactComponent as DateCompIconSmall } from "./v2/date-select-s.svg"; -export { ReactComponent as DateRangeCompIconSmall } from "./v2/date-range-select-s.svg"; // new -export { ReactComponent as DividerCompIconSmall } from "./v2/divider-s.svg"; -export { ReactComponent as DrawerCompIconSmall } from "./v2/drawer-s.svg"; -export { ReactComponent as DropdownCompIconSmall } from "./v2/dropdown-s.svg"; // new -export { ReactComponent as UploadCompIconSmall } from "./v2/file-upload-s.svg"; -export { ReactComponent as FileViewerCompIconSmall } from "./v2/file-viewer-s.svg"; -export { ReactComponent as FloatingButtonCompIconSmall } from "./v2/floating-button-s.svg"; // new -export { ReactComponent as FloatingTextCompIconSmall } from "./v2/floating-text-layout-s.svg"; // new -export { ReactComponent as FormCompIconSmall } from "./v2/form-s.svg"; -export { ReactComponent as GridCompIconSmall } from "./v2/grid-view-s.svg"; // new -export { ReactComponent as IconCompIconSmall } from "./v2/icon-s.svg"; // new -export { ReactComponent as IFrameCompIconSmall } from "./v2/iframe-s.svg"; -export { ReactComponent as ImageEditorCompIconSmall } from "./v2/image-editor-s.svg"; // new -export { ReactComponent as ImageCompIconSmall } from "./v2/image-s.svg"; -export { ReactComponent as InputCompIconSmall } from "./v2/input-s.svg"; -export { ReactComponent as JsonEditorCompIconSmall } from "./v2/json-editor-s.svg"; -export { ReactComponent as JsonExplorerCompIconSmall } from "./v2/json-viewer-s.svg"; // new -export { ReactComponent as JsonFormCompIconSmall } from "./v2/json-schema-form-s.svg"; // new -export { ReactComponent as PageLayoutCompIconSmall } from "./v2/page-layout-s.svg"; // new -export { ReactComponent as LinkCompIconSmall } from "./v2/link-s.svg"; -export { ReactComponent as ListViewCompIconSmall } from "./v2/list-view-s.svg"; -export { ReactComponent as LottieAnimationCompIconSmall } from "./v2/lottie-animation-s.svg"; // new -export { ReactComponent as MentionCompIconSmall } from "./v2/mention-s.svg"; // new -export { ReactComponent as MermaidCompIconSmall } from "./v2/mermaid-chart-s.svg"; // new -export { ReactComponent as ModalCompIconSmall } from "./v2/modal-s.svg"; -export { ReactComponent as ModuleIconSmall } from "./v2/module-s.svg"; -export { ReactComponent as MultiSelectCompIconSmall } from "./v2/multiselect-s.svg"; // new -export { ReactComponent as NavComIconSmall } from "./v2/navigation-s.svg"; -export { ReactComponent as NumberInputCompIconSmall } from "./v2/number-input-s.svg"; -export { ReactComponent as PasswordCompIconSmall } from "./v2/password-s.svg"; -export { ReactComponent as ProgressCompIconSmall } from "./v2/progress-s.svg"; -export { ReactComponent as ProcessCircleCompIconSmall } from "./v2/progress-circle-s.svg"; // new -export { ReactComponent as QRCodeCompIconSmall } from "./v2/qr-code-display-s.svg"; -export { ReactComponent as RadioCompIconSmall } from "./v2/radio-button-s.svg"; -export { ReactComponent as RangeSliderCompIconSmall } from "./v2/range-slider-s.svg"; // new -export { ReactComponent as RatingCompIconSmall } from "./v2/rating-s.svg"; -export { ReactComponent as ResponsiveLayoutCompIconSmall } from "./v2/resposive-layout-s.svg"; // new -export { ReactComponent as RichTextEditorCompIconSmall } from "./v2/rich-text-editor-s.svg"; // new -export { ReactComponent as ScannerCompIconSmall } from "./v2/scanner-s.svg"; // new -export { ReactComponent as ShapesCompIconSmall } from "./v2/shapes-s.svg"; // new -export { ReactComponent as SegmentedCompIconSmall } from "./v2/segmented-control-s.svg"; -export { ReactComponent as SelectCompIconSmall } from "./v2/select-s.svg"; -export { ReactComponent as SliderCompIconSmall } from "./v2/slider-s.svg"; +export {ReactComponent as AvatarCompIconSmall} from './v2/avatar-s.svg'; +export {ReactComponent as AvatarGroupCompIconSmall} from './v2/avatargroup-s.svg'; +export {ReactComponent as AudioCompIconSmall} from './v2/audio-player-s.svg'; +export {ReactComponent as AutoCompleteCompIconSmall} from './v2/auto-complete-input-s.svg'; // new +export {ReactComponent as ButtonCompIconSmall} from './v2/button-s.svg'; +export {ReactComponent as IconButtonCompIconSmall} from './v2/icon-button-s.svg'; // new +export {ReactComponent as CardCompIconSmall} from './v2/card-layout-s.svg'; +export {ReactComponent as CalendarCompIconSmall} from './v2/calendar-s.svg'; +export {ReactComponent as CascaderCompIconSmall} from './v2/cascader-s.svg'; +export {ReactComponent as CarouselCompIconSmall} from './v2/image-carousel-s.svg'; // new +export {ReactComponent as ChartCompIconSmall} from './v2/pie-chart-s.svg'; +export {ReactComponent as CheckboxCompIconSmall} from './v2/checkbox-s.svg'; +export {ReactComponent as ColorPickerCompIconSmall} from './v2/colorpicker-s.svg'; // new +export {ReactComponent as CollapsibleContainerCompIconSmall} from './v2/collapsible-container-s.svg'; // new +export {ReactComponent as CommentCompIconSmall} from './v2/comment-s.svg'; +export {ReactComponent as ContainerCompIconSmall} from './v2/container-s.svg'; +export {ReactComponent as CustomCompIconSmall} from './v2/custom-code-s.svg'; // new +export {ReactComponent as DateCompIconSmall} from './v2/date-select-s.svg'; +export {ReactComponent as DateRangeCompIconSmall} from './v2/date-range-select-s.svg'; // new +export {ReactComponent as DividerCompIconSmall} from './v2/divider-s.svg'; +export {ReactComponent as DrawerCompIconSmall} from './v2/drawer-s.svg'; +export {ReactComponent as DropdownCompIconSmall} from './v2/dropdown-s.svg'; // new +export {ReactComponent as UploadCompIconSmall} from './v2/file-upload-s.svg'; +export {ReactComponent as FileViewerCompIconSmall} from './v2/file-viewer-s.svg'; +export {ReactComponent as FloatingButtonCompIconSmall} from './v2/floating-button-s.svg'; // new +export {ReactComponent as FloatingTextCompIconSmall} from './v2/floating-text-layout-s.svg'; // new +export {ReactComponent as FormCompIconSmall} from './v2/form-s.svg'; +export {ReactComponent as GridCompIconSmall} from './v2/grid-view-s.svg'; // new +export {ReactComponent as IconCompIconSmall} from './v2/icon-s.svg'; // new +export {ReactComponent as IFrameCompIconSmall} from './v2/iframe-s.svg'; +export {ReactComponent as ImageEditorCompIconSmall} from './v2/image-editor-s.svg'; // new +export {ReactComponent as ImageCompIconSmall} from './v2/image-s.svg'; +export {ReactComponent as InputCompIconSmall} from './v2/input-s.svg'; +export {ReactComponent as JsonEditorCompIconSmall} from './v2/json-editor-s.svg'; +export {ReactComponent as JsonExplorerCompIconSmall} from './v2/json-viewer-s.svg'; // new +export {ReactComponent as JsonFormCompIconSmall} from './v2/json-schema-form-s.svg'; // new +export {ReactComponent as PageLayoutCompIconSmall} from './v2/page-layout-s.svg'; // new +export {ReactComponent as LinkCompIconSmall} from './v2/link-s.svg'; +export {ReactComponent as ListViewCompIconSmall} from './v2/list-view-s.svg'; +export {ReactComponent as LottieAnimationCompIconSmall} from './v2/lottie-animation-s.svg'; // new +export {ReactComponent as MentionCompIconSmall} from './v2/mention-s.svg'; // new +export {ReactComponent as MermaidCompIconSmall} from './v2/mermaid-chart-s.svg'; // new +export {ReactComponent as ModalCompIconSmall} from './v2/modal-s.svg'; +export {ReactComponent as ModuleIconSmall} from './v2/module-s.svg'; +export {ReactComponent as MultiSelectCompIconSmall} from './v2/multiselect-s.svg'; // new +export {ReactComponent as NavComIconSmall} from './v2/navigation-s.svg'; +export {ReactComponent as NumberInputCompIconSmall} from './v2/number-input-s.svg'; +export {ReactComponent as PasswordCompIconSmall} from './v2/password-s.svg'; +export {ReactComponent as ProgressCompIconSmall} from './v2/progress-s.svg'; +export {ReactComponent as ProcessCircleCompIconSmall} from './v2/progress-circle-s.svg'; // new +export {ReactComponent as QRCodeCompIconSmall} from './v2/qr-code-display-s.svg'; +export {ReactComponent as RadioCompIconSmall} from './v2/radio-button-s.svg'; +export {ReactComponent as RangeSliderCompIconSmall} from './v2/range-slider-s.svg'; // new +export {ReactComponent as RatingCompIconSmall} from './v2/rating-s.svg'; +export {ReactComponent as ResponsiveLayoutCompIconSmall} from './v2/resposive-layout-s.svg'; // new +export {ReactComponent as RichTextEditorCompIconSmall} from './v2/rich-text-editor-s.svg'; // new +export {ReactComponent as ScannerCompIconSmall} from './v2/scanner-s.svg'; // new +export {ReactComponent as ShapesCompIconSmall} from './v2/shapes-s.svg'; // new +export {ReactComponent as SegmentedCompIconSmall} from './v2/segmented-control-s.svg'; +export {ReactComponent as SelectCompIconSmall} from './v2/select-s.svg'; +export {ReactComponent as SliderCompIconSmall} from './v2/slider-s.svg'; // export { ReactComponent as StepsTextIconSmall } from "./icon-steps-comp.svg"; // new -export { ReactComponent as SwitchCompIconSmall } from "./v2/switch-s.svg"; -export { ReactComponent as TabbedContainerCompIconSmall } from "./v2/tabbed-container-s.svg"; // new -export { ReactComponent as TableCompIconSmall } from "./v2/table-s.svg"; -export { ReactComponent as TextAreaCompIconSmall } from "./v2/text-area-input-s.svg"; // new -export { ReactComponent as TextCompIconSmall } from "./v2/text-display-s.svg"; -export { ReactComponent as TimeCompIconSmall } from "./v2/time-select-s.svg"; -export { ReactComponent as TimeLineCompIconSmall } from "./v2/timeline-s.svg"; // new -export { ReactComponent as TimeRangeCompIconSmall } from "./v2/time-range-select-s.svg"; // new -export { ReactComponent as ToggleButtonCompIconSmall } from "./v2/toggle-button-s.svg"; // new -export { ReactComponent as TourCompIconSmall } from "./v2/modal-s.svg"; // new -export { ReactComponent as TransferCompIconSmall } from "./v2/transfer-list-s.svg"; // new -export { ReactComponent as TreeDisplayCompIconSmall } from "./v2/tree-display-s.svg"; -export { ReactComponent as TreeSelectCompIconSmall } from "./v2/tree-select-s.svg"; // new -export { ReactComponent as VideoCompIconSmall } from "./v2/video-player-s.svg"; -export { ReactComponent as VideoMeetingRoomCompIconSmall } from "./v2/meeting-room-s.svg"; -export { ReactComponent as VideoCameraStreamCompIconSmall } from "./v2/camera-stream-s.svg"; // new -export { ReactComponent as VideoScreenshareCompIconSmall } from "./v2/screen-share-stream-s.svg"; // new -export { ReactComponent as SignatureCompIconSmall } from "./v2/signature-s.svg"; -export { ReactComponent as StepCompIconSmall } from "./v2/steps-s.svg"; - -export { ReactComponent as CandlestickChartCompIconSmall } from "./v2/candlestick-chart-s.svg"; // new -export { ReactComponent as FunnelChartCompIconSmall } from "./v2/funnel-chart-s.svg"; // new -export { ReactComponent as GaugeChartCompIconSmall } from "./v2/gauge-chart-s.svg"; // new -export { ReactComponent as GraphChartCompIconSmall } from "./v2/graph-chart-s.svg"; // new -export { ReactComponent as HeatmapChartCompIconSmall } from "./v2/heatmap-chart-s.svg"; // new -export { ReactComponent as RadarChartCompIconSmall } from "./v2/radar-chart-s.svg"; // new -export { ReactComponent as SankeyChartCompIconSmall } from "./v2/sankey-chart-s.svg"; // new -export { ReactComponent as SunburstChartCompIconSmall } from "./v2/sunburst-chart-s.svg"; // new -export { ReactComponent as ThemeriverChartCompIconSmall } from "./v2/themeriver-chart-s.svg"; // new -export { ReactComponent as TreeChartCompIconSmall } from "./v2/tree-chart-s.svg"; // new -export { ReactComponent as TreemapChartCompIconSmall } from "./v2/treemap-chart-s.svg"; // new -export { ReactComponent as BPMNEditorCompIconSmall } from "./v2/bpmn-editor-s.svg"; // new -export { ReactComponent as GeoMapChartsCompIconSmall } from "./v2/geomap-charts-s.svg"; // new -export { ReactComponent as GeoMapLayersCompIconSmall } from "./v2/geomap-layers-s.svg"; // new -export { ReactComponent as HillchartCompIconSmall } from "./v2/hillchart-s.svg"; // new -export { ReactComponent as PivotTableCompIconSmall } from "./v2/pivot-table-s.svg"; // new -export { ReactComponent as TurnstileCaptchaCompIconSmall } from "./v2/turnstile-captcha-s.svg"; // new +export {ReactComponent as SwitchCompIconSmall} from './v2/switch-s.svg'; +export {ReactComponent as TabbedContainerCompIconSmall} from './v2/tabbed-container-s.svg'; // new +export {ReactComponent as TableCompIconSmall} from './v2/table-s.svg'; +export {ReactComponent as TextAreaCompIconSmall} from './v2/text-area-input-s.svg'; // new +export {ReactComponent as TextCompIconSmall} from './v2/text-display-s.svg'; +export {ReactComponent as TimeCompIconSmall} from './v2/time-select-s.svg'; +export {ReactComponent as TimeLineCompIconSmall} from './v2/timeline-s.svg'; // new +export {ReactComponent as TimeRangeCompIconSmall} from './v2/time-range-select-s.svg'; // new +export {ReactComponent as ToggleButtonCompIconSmall} from './v2/toggle-button-s.svg'; // new +export {ReactComponent as TourCompIconSmall} from './v2/modal-s.svg'; // new +export {ReactComponent as TransferCompIconSmall} from './v2/transfer-list-s.svg'; // new +export {ReactComponent as TreeDisplayCompIconSmall} from './v2/tree-display-s.svg'; +export {ReactComponent as TreeSelectCompIconSmall} from './v2/tree-select-s.svg'; // new +export {ReactComponent as VideoCompIconSmall} from './v2/video-player-s.svg'; +export {ReactComponent as VideoMeetingRoomCompIconSmall} from './v2/meeting-room-s.svg'; +export {ReactComponent as VideoCameraStreamCompIconSmall} from './v2/camera-stream-s.svg'; // new +export {ReactComponent as VideoScreenshareCompIconSmall} from './v2/screen-share-stream-s.svg'; // new +export {ReactComponent as SignatureCompIconSmall} from './v2/signature-s.svg'; +export {ReactComponent as StepCompIconSmall} from './v2/steps-s.svg'; +export {ReactComponent as CandlestickChartCompIconSmall} from './v2/candlestick-chart-s.svg'; // new +export {ReactComponent as FunnelChartCompIconSmall} from './v2/funnel-chart-s.svg'; // new +export {ReactComponent as GaugeChartCompIconSmall} from './v2/gauge-chart-s.svg'; // new +export {ReactComponent as GraphChartCompIconSmall} from './v2/graph-chart-s.svg'; // new +export {ReactComponent as HeatmapChartCompIconSmall} from './v2/heatmap-chart-s.svg'; // new +export {ReactComponent as RadarChartCompIconSmall} from './v2/radar-chart-s.svg'; // new +export {ReactComponent as SankeyChartCompIconSmall} from './v2/sankey-chart-s.svg'; // new +export {ReactComponent as SunburstChartCompIconSmall} from './v2/sunburst-chart-s.svg'; // new +export {ReactComponent as ThemeriverChartCompIconSmall} from './v2/themeriver-chart-s.svg'; // new +export {ReactComponent as TreeChartCompIconSmall} from './v2/tree-chart-s.svg'; // new +export {ReactComponent as TreemapChartCompIconSmall} from './v2/treemap-chart-s.svg'; // new +export {ReactComponent as BPMNEditorCompIconSmall} from './v2/bpmn-editor-s.svg'; // new +export {ReactComponent as GeoMapChartsCompIconSmall} from './v2/geomap-charts-s.svg'; // new +export {ReactComponent as GeoMapLayersCompIconSmall} from './v2/geomap-layers-s.svg'; // new +export {ReactComponent as HillchartCompIconSmall} from './v2/hillchart-s.svg'; // new +export {ReactComponent as PivotTableCompIconSmall} from './v2/pivot-table-s.svg'; // new +export {ReactComponent as TurnstileCaptchaCompIconSmall} from './v2/turnstile-captcha-s.svg'; // new // medium -export { ReactComponent as AudioCompIcon } from "./v2/audio-player-m.svg"; -export { ReactComponent as AutoCompleteCompIcon } from "./v2/auto-complete-input-m.svg"; -export { ReactComponent as AvatarCompIcon } from "./v2/avatar-m.svg"; -export { ReactComponent as ButtonCompIcon } from "./v2/button-m.svg"; -export { ReactComponent as AvatarGroupCompIcon } from "./v2/avatargroup-m.svg"; -export { ReactComponent as IconButtonCompIcon } from "./v2/icon-button-m.svg"; -export { ReactComponent as CalendarCompIcon } from "./v2/calendar-m.svg"; -export { ReactComponent as CardCompIcon } from "./v2/card-layout-m.svg"; -export { ReactComponent as CarouselCompIcon } from "./v2/image-carousel-m.svg"; -export { ReactComponent as CascaderCompIcon } from "./v2/cascader-m.svg"; -export { ReactComponent as ChartCompIcon } from "./v2/pie-chart-m.svg"; -export { ReactComponent as CheckboxCompIcon } from "./v2/checkbox-m.svg"; -export { ReactComponent as CollapsibleContainerCompIcon } from "./v2/collapsible-container-m.svg"; -export { ReactComponent as CommentCompIcon } from "./v2/comment-m.svg"; -export { ReactComponent as ColorPickerCompIcon } from "./v2/colorpicker-m.svg"; -export { ReactComponent as ContainerCompIcon } from "./v2/container-m.svg"; -export { ReactComponent as CustomCompIcon } from "./v2/custom-code-m.svg"; -export { ReactComponent as DateCompIcon } from "./v2/date-select-m.svg"; -export { ReactComponent as DateRangeCompIcon } from "./v2/date-range-select-m.svg"; -export { ReactComponent as DividerCompIcon } from "./v2/divider-m.svg"; -export { ReactComponent as DrawerCompIcon } from "./v2/drawer-m.svg"; -export { ReactComponent as DropdownCompIcon } from "./v2/dropdown-m.svg"; -export { ReactComponent as FileViewerCompIcon } from "./v2/file-viewer-m.svg"; -export { ReactComponent as FloatingButtonCompIcon } from "./v2/floating-button-m.svg"; -export { ReactComponent as FloatingTextCompIcon } from "./v2/floating-text-layout-m.svg"; -export { ReactComponent as FormCompIcon } from "./v2/form-m.svg"; -export { ReactComponent as GridCompIcon } from "./v2/grid-view-m.svg"; -export { ReactComponent as IconCompIcon } from "./v2/icon-m.svg"; -export { ReactComponent as IFrameCompIcon } from "./v2/iframe-m.svg"; -export { ReactComponent as ImageEditorCompIcon } from "./v2/image-editor-m.svg"; -export { ReactComponent as ImageCompIcon } from "./v2/image-m.svg"; -export { ReactComponent as InputCompIcon } from "./v2/input-m.svg"; -export { ReactComponent as JsonEditorCompIcon } from "./v2/json-editor-m.svg"; -export { ReactComponent as JsonExplorerCompIcon } from "./v2/json-viewer-m.svg"; -export { ReactComponent as JsonFormCompIcon } from "./v2/json-schema-form-m.svg"; -export { ReactComponent as PageLayoutCompIcon } from "./v2/page-layout-m.svg"; -export { ReactComponent as LinkCompIcon } from "./v2/link-m.svg"; -export { ReactComponent as ListViewCompIcon } from "./v2/list-view-m.svg"; -export { ReactComponent as LottieAnimationCompIcon } from "./v2/lottie-animation-m.svg"; -export { ReactComponent as MentionCompIcon } from "./v2/mention-m.svg"; -export { ReactComponent as MermaidCompIcon } from "./v2/mermaid-chart-m.svg"; -export { ReactComponent as ModalCompIcon } from "./v2/modal-m.svg"; -export { ReactComponent as MultiSelectCompIcon } from "./v2/multiselect-m.svg"; -export { ReactComponent as NavComIcon } from "./v2/navigation-m.svg"; -export { ReactComponent as NumberInputCompIcon } from "./v2/number-input-m.svg"; -export { ReactComponent as PasswordCompIcon } from "./v2/password-m.svg"; -export { ReactComponent as ProcessCircleCompIcon } from "./v2/progress-circle-m.svg"; -export { ReactComponent as ProgressCompIcon } from "./v2/progress-m.svg"; -export { ReactComponent as QRCodeCompIcon } from "./v2/qr-code-display-m.svg"; -export { ReactComponent as RadioCompIcon } from "./v2/radio-button-m.svg"; -export { ReactComponent as RangeSliderCompIcon } from "./v2/range-slider-m.svg"; -export { ReactComponent as RatingCompIcon } from "./v2/rating-m.svg"; -export { ReactComponent as ResponsiveLayoutCompIcon } from "./v2/resposive-layout-m.svg"; -export { ReactComponent as RichTextEditorCompIcon } from "./v2/rich-text-editor-m.svg"; -export { ReactComponent as ScannerCompIcon } from "./v2/scanner-m.svg"; -export { ReactComponent as ShapesCompIcon } from "./v2/shapes-m.svg"; -export { ReactComponent as SegmentedCompIcon } from "./v2/segmented-control-m.svg"; -export { ReactComponent as SelectCompIcon } from "./v2/select-m.svg"; -export { ReactComponent as SliderCompIcon } from "./v2/slider-m.svg"; +export {ReactComponent as AudioCompIcon} from './v2/audio-player-m.svg'; +export {ReactComponent as AutoCompleteCompIcon} from './v2/auto-complete-input-m.svg'; +export {ReactComponent as AvatarCompIcon} from './v2/avatar-m.svg'; +export {ReactComponent as ButtonCompIcon} from './v2/button-m.svg'; +export {ReactComponent as AvatarGroupCompIcon} from './v2/avatargroup-m.svg'; +export {ReactComponent as IconButtonCompIcon} from './v2/icon-button-m.svg'; +export {ReactComponent as CalendarCompIcon} from './v2/calendar-m.svg'; +export {ReactComponent as CardCompIcon} from './v2/card-layout-m.svg'; +export {ReactComponent as CarouselCompIcon} from './v2/image-carousel-m.svg'; +export {ReactComponent as CascaderCompIcon} from './v2/cascader-m.svg'; +export {ReactComponent as ChartCompIcon} from './v2/pie-chart-m.svg'; +export {ReactComponent as CheckboxCompIcon} from './v2/checkbox-m.svg'; +export {ReactComponent as CollapsibleContainerCompIcon} from './v2/collapsible-container-m.svg'; +export {ReactComponent as CommentCompIcon} from './v2/comment-m.svg'; +export {ReactComponent as ColorPickerCompIcon} from './v2/colorpicker-m.svg'; +export {ReactComponent as ContainerCompIcon} from './v2/container-m.svg'; +export {ReactComponent as CustomCompIcon} from './v2/custom-code-m.svg'; +export {ReactComponent as DateCompIcon} from './v2/date-select-m.svg'; +export {ReactComponent as DateRangeCompIcon} from './v2/date-range-select-m.svg'; +export {ReactComponent as DividerCompIcon} from './v2/divider-m.svg'; +export {ReactComponent as DrawerCompIcon} from './v2/drawer-m.svg'; +export {ReactComponent as DropdownCompIcon} from './v2/dropdown-m.svg'; +export {ReactComponent as FileViewerCompIcon} from './v2/file-viewer-m.svg'; +export {ReactComponent as FloatingButtonCompIcon} from './v2/floating-button-m.svg'; +export {ReactComponent as FloatingTextCompIcon} from './v2/floating-text-layout-m.svg'; +export {ReactComponent as FormCompIcon} from './v2/form-m.svg'; +export {ReactComponent as GridCompIcon} from './v2/grid-view-m.svg'; +export {ReactComponent as IconCompIcon} from './v2/icon-m.svg'; +export {ReactComponent as IFrameCompIcon} from './v2/iframe-m.svg'; +export {ReactComponent as ImageEditorCompIcon} from './v2/image-editor-m.svg'; +export {ReactComponent as ImageCompIcon} from './v2/image-m.svg'; +export {ReactComponent as InputCompIcon} from './v2/input-m.svg'; +export {ReactComponent as JsonEditorCompIcon} from './v2/json-editor-m.svg'; +export {ReactComponent as JsonExplorerCompIcon} from './v2/json-viewer-m.svg'; +export {ReactComponent as JsonFormCompIcon} from './v2/json-schema-form-m.svg'; +export {ReactComponent as PageLayoutCompIcon} from './v2/page-layout-m.svg'; +export {ReactComponent as LinkCompIcon} from './v2/link-m.svg'; +export {ReactComponent as ListViewCompIcon} from './v2/list-view-m.svg'; +export {ReactComponent as LottieAnimationCompIcon} from './v2/lottie-animation-m.svg'; +export {ReactComponent as MentionCompIcon} from './v2/mention-m.svg'; +export {ReactComponent as MermaidCompIcon} from './v2/mermaid-chart-m.svg'; +export {ReactComponent as ModalCompIcon} from './v2/modal-m.svg'; +export {ReactComponent as MultiSelectCompIcon} from './v2/multiselect-m.svg'; +export {ReactComponent as NavComIcon} from './v2/navigation-m.svg'; +export {ReactComponent as NumberInputCompIcon} from './v2/number-input-m.svg'; +export {ReactComponent as PasswordCompIcon} from './v2/password-m.svg'; +export {ReactComponent as ProcessCircleCompIcon} from './v2/progress-circle-m.svg'; +export {ReactComponent as ProgressCompIcon} from './v2/progress-m.svg'; +export {ReactComponent as QRCodeCompIcon} from './v2/qr-code-display-m.svg'; +export {ReactComponent as RadioCompIcon} from './v2/radio-button-m.svg'; +export {ReactComponent as RangeSliderCompIcon} from './v2/range-slider-m.svg'; +export {ReactComponent as RatingCompIcon} from './v2/rating-m.svg'; +export {ReactComponent as ResponsiveLayoutCompIcon} from './v2/resposive-layout-m.svg'; +export {ReactComponent as RichTextEditorCompIcon} from './v2/rich-text-editor-m.svg'; +export {ReactComponent as ScannerCompIcon} from './v2/scanner-m.svg'; +export {ReactComponent as ShapesCompIcon} from './v2/shapes-m.svg'; +export {ReactComponent as SegmentedCompIcon} from './v2/segmented-control-m.svg'; +export {ReactComponent as SelectCompIcon} from './v2/select-m.svg'; +export {ReactComponent as SliderCompIcon} from './v2/slider-m.svg'; // export { ReactComponent as StepsTextIcon } from "./icon-steps-comp.svg"; // to check -export { ReactComponent as SwitchCompIcon } from "./v2/switch-m.svg"; -export { ReactComponent as TabbedContainerCompIcon } from "./v2/tabbed-container-m.svg"; -export { ReactComponent as TableCompIcon } from "./v2/mighty-table-m.svg"; -export { ReactComponent as TextAreaCompIcon } from "./v2/text-area-input-m.svg"; -export { ReactComponent as TextCompIcon } from "./v2/text-display-m.svg"; -export { ReactComponent as TimeCompIcon } from "./v2/time-select-m.svg"; -export { ReactComponent as TimerCompIcon } from "./v2/timer-m.svg"; -export { ReactComponent as TimeLineCompIcon } from "./v2/timeline-m.svg"; -export { ReactComponent as TimeRangeCompIcon } from "./v2/time-range-select-m.svg"; -export { ReactComponent as ToggleButtonCompIcon } from "./v2/toggle-button-m.svg"; -export { ReactComponent as TourCompIcon } from "./v2/modal-m.svg"; -export { ReactComponent as TransferCompIcon } from "./v2/transfer-list-m.svg"; -export { ReactComponent as TreeDisplayCompIcon } from "./v2/tree-display-m.svg"; -export { ReactComponent as TreeSelectCompIcon } from "./v2/tree-select-m.svg"; -export { ReactComponent as UploadCompIcon } from "./v2/file-upload-m.svg"; -export { ReactComponent as VideoCompIcon } from "./v2/video-player-m.svg"; -export { ReactComponent as VideoMeetingRoomCompIcon } from "./v2/meeting-room-m.svg"; -export { ReactComponent as VideoCameraStreamCompIcon } from "./v2/camera-stream-m.svg"; -export { ReactComponent as VideoScreenshareCompIcon } from "./v2/screen-share-stream-m.svg"; -export { ReactComponent as StepCompIcon } from "./v2/steps-m.svg"; -export { ReactComponent as SignatureCompIcon } from "./v2/signature-m.svg"; +export {ReactComponent as SwitchCompIcon} from './v2/switch-m.svg'; +export {ReactComponent as TabbedContainerCompIcon} from './v2/tabbed-container-m.svg'; +export {ReactComponent as TableCompIcon} from './v2/mighty-table-m.svg'; +export {ReactComponent as TextAreaCompIcon} from './v2/text-area-input-m.svg'; +export {ReactComponent as TextCompIcon} from './v2/text-display-m.svg'; +export {ReactComponent as TimeCompIcon} from './v2/time-select-m.svg'; +export {ReactComponent as TimerCompIcon} from './v2/timer-m.svg'; +export {ReactComponent as TimeLineCompIcon} from './v2/timeline-m.svg'; +export {ReactComponent as TimeRangeCompIcon} from './v2/time-range-select-m.svg'; +export {ReactComponent as ToggleButtonCompIcon} from './v2/toggle-button-m.svg'; +export {ReactComponent as TourCompIcon} from './v2/modal-m.svg'; +export {ReactComponent as TransferCompIcon} from './v2/transfer-list-m.svg'; +export {ReactComponent as TreeDisplayCompIcon} from './v2/tree-display-m.svg'; +export {ReactComponent as TreeSelectCompIcon} from './v2/tree-select-m.svg'; +export {ReactComponent as UploadCompIcon} from './v2/file-upload-m.svg'; +export {ReactComponent as VideoCompIcon} from './v2/video-player-m.svg'; +export {ReactComponent as VideoMeetingRoomCompIcon} from './v2/meeting-room-m.svg'; +export {ReactComponent as VideoCameraStreamCompIcon} from './v2/camera-stream-m.svg'; +export {ReactComponent as VideoScreenshareCompIcon} from './v2/screen-share-stream-m.svg'; +export {ReactComponent as StepCompIcon} from './v2/steps-m.svg'; +export {ReactComponent as SignatureCompIcon} from './v2/signature-m.svg'; -export { ReactComponent as CandlestickChartCompIcon } from "./v2/candlestick-chart-m.svg"; -export { ReactComponent as FunnelChartCompIcon } from "./v2/funnel-chart-m.svg"; -export { ReactComponent as GaugeChartCompIcon } from "./v2/gauge-chart-m.svg"; -export { ReactComponent as GraphChartCompIcon } from "./v2/graph-chart-m.svg"; -export { ReactComponent as HeatmapChartCompIcon } from "./v2/heatmap-chart-m.svg"; -export { ReactComponent as RadarChartCompIcon } from "./v2/radar-chart-m.svg"; -export { ReactComponent as SankeyChartCompIcon } from "./v2/sankey-chart-m.svg"; -export { ReactComponent as SunburstChartCompIcon } from "./v2/sunburst-chart-m.svg"; -export { ReactComponent as ThemeriverChartCompIcon } from "./v2/themeriver-chart-m.svg"; -export { ReactComponent as TreeChartCompIcon } from "./v2/tree-chart-m.svg"; -export { ReactComponent as TreemapChartCompIcon } from "./v2/treemap-chart-m.svg"; +export {ReactComponent as CandlestickChartCompIcon} from './v2/candlestick-chart-m.svg'; +export {ReactComponent as FunnelChartCompIcon} from './v2/funnel-chart-m.svg'; +export {ReactComponent as GaugeChartCompIcon} from './v2/gauge-chart-m.svg'; +export {ReactComponent as GraphChartCompIcon} from './v2/graph-chart-m.svg'; +export {ReactComponent as HeatmapChartCompIcon} from './v2/heatmap-chart-m.svg'; +export {ReactComponent as RadarChartCompIcon} from './v2/radar-chart-m.svg'; +export {ReactComponent as SankeyChartCompIcon} from './v2/sankey-chart-m.svg'; +export {ReactComponent as SunburstChartCompIcon} from './v2/sunburst-chart-m.svg'; +export {ReactComponent as ThemeriverChartCompIcon} from './v2/themeriver-chart-m.svg'; +export {ReactComponent as TreeChartCompIcon} from './v2/tree-chart-m.svg'; +export {ReactComponent as TreemapChartCompIcon} from './v2/treemap-chart-m.svg'; -export { ReactComponent as BPMNEditorCompIcon } from "./v2/bpmn-editor-m.svg"; -export { ReactComponent as GeoMapChartsCompIcon } from "./v2/geomap-charts-m.svg"; -export { ReactComponent as GeoMapLayersCompIcon } from "./v2/geomap-layers-m.svg"; -export { ReactComponent as HillchartCompIcon } from "./v2/hillchart-m.svg"; -export { ReactComponent as TurnstileCaptchaCompIcon } from "./v2/turnstile-captcha-m.svg"; -export { ReactComponent as PivotTableCompIcon } from "./v2/pivot-table-m.svg"; +export {ReactComponent as BPMNEditorCompIcon} from './v2/bpmn-editor-m.svg'; +export {ReactComponent as GeoMapChartsCompIcon} from './v2/geomap-charts-m.svg'; +export {ReactComponent as GeoMapLayersCompIcon} from './v2/geomap-layers-m.svg'; +export {ReactComponent as HillchartCompIcon} from './v2/hillchart-m.svg'; +export {ReactComponent as TurnstileCaptchaCompIcon} from './v2/turnstile-captcha-m.svg'; +export {ReactComponent as PivotTableCompIcon} from './v2/pivot-table-m.svg'; // flags -export { ReactComponent as Flag_af } from './flags/4x3/af.svg'; -export { ReactComponent as Flag_ax } from './flags/4x3/ax.svg'; -export { ReactComponent as Flag_al } from './flags/4x3/al.svg'; -export { ReactComponent as Flag_dz } from './flags/4x3/dz.svg'; -export { ReactComponent as Flag_as } from './flags/4x3/as.svg'; -export { ReactComponent as Flag_ad } from './flags/4x3/ad.svg'; -export { ReactComponent as Flag_ao } from './flags/4x3/ao.svg'; -export { ReactComponent as Flag_ai } from './flags/4x3/ai.svg'; -export { ReactComponent as Flag_aq } from './flags/4x3/aq.svg'; -export { ReactComponent as Flag_ag } from './flags/4x3/ag.svg'; -export { ReactComponent as Flag_ar } from './flags/4x3/ar.svg'; -export { ReactComponent as Flag_am } from './flags/4x3/am.svg'; -export { ReactComponent as Flag_aw } from './flags/4x3/aw.svg'; -export { ReactComponent as Flag_sh_ac } from './flags/4x3/sh-ac.svg'; -export { ReactComponent as Flag_au } from './flags/4x3/au.svg'; -export { ReactComponent as Flag_at } from './flags/4x3/at.svg'; -export { ReactComponent as Flag_az } from './flags/4x3/az.svg'; -export { ReactComponent as Flag_bs } from './flags/4x3/bs.svg'; -export { ReactComponent as Flag_bh } from './flags/4x3/bh.svg'; -export { ReactComponent as Flag_bd } from './flags/4x3/bd.svg'; -export { ReactComponent as Flag_bb } from './flags/4x3/bb.svg'; -export { ReactComponent as Flag_by } from './flags/4x3/by.svg'; -export { ReactComponent as Flag_be } from './flags/4x3/be.svg'; -export { ReactComponent as Flag_bz } from './flags/4x3/bz.svg'; -export { ReactComponent as Flag_bj } from './flags/4x3/bj.svg'; -export { ReactComponent as Flag_bm } from './flags/4x3/bm.svg'; -export { ReactComponent as Flag_bt } from './flags/4x3/bt.svg'; -export { ReactComponent as Flag_bo } from './flags/4x3/bo.svg'; -export { ReactComponent as Flag_bq } from './flags/4x3/bq.svg'; -export { ReactComponent as Flag_ba } from './flags/4x3/ba.svg'; -export { ReactComponent as Flag_bw } from './flags/4x3/bw.svg'; -export { ReactComponent as Flag_bv } from './flags/4x3/bv.svg'; -export { ReactComponent as Flag_br } from './flags/4x3/br.svg'; -export { ReactComponent as Flag_io } from './flags/4x3/io.svg'; -export { ReactComponent as Flag_bn } from './flags/4x3/bn.svg'; -export { ReactComponent as Flag_bg } from './flags/4x3/bg.svg'; -export { ReactComponent as Flag_bf } from './flags/4x3/bf.svg'; -export { ReactComponent as Flag_bi } from './flags/4x3/bi.svg'; -export { ReactComponent as Flag_cv } from './flags/4x3/cv.svg'; -export { ReactComponent as Flag_kh } from './flags/4x3/kh.svg'; -export { ReactComponent as Flag_cm } from './flags/4x3/cm.svg'; -export { ReactComponent as Flag_ca } from './flags/4x3/ca.svg'; -export { ReactComponent as Flag_ic } from './flags/4x3/ic.svg'; -export { ReactComponent as Flag_es_ct } from './flags/4x3/es-ct.svg'; -export { ReactComponent as Flag_ky } from './flags/4x3/ky.svg'; -export { ReactComponent as Flag_cf } from './flags/4x3/cf.svg'; -export { ReactComponent as Flag_td } from './flags/4x3/td.svg'; -export { ReactComponent as Flag_cl } from './flags/4x3/cl.svg'; -export { ReactComponent as Flag_cn } from './flags/4x3/cn.svg'; -export { ReactComponent as Flag_cx } from './flags/4x3/cx.svg'; -export { ReactComponent as Flag_cc } from './flags/4x3/cc.svg'; -export { ReactComponent as Flag_co } from './flags/4x3/co.svg'; -export { ReactComponent as Flag_km } from './flags/4x3/km.svg'; -export { ReactComponent as Flag_ck } from './flags/4x3/ck.svg'; -export { ReactComponent as Flag_cr } from './flags/4x3/cr.svg'; -export { ReactComponent as Flag_hr } from './flags/4x3/hr.svg'; -export { ReactComponent as Flag_cu } from './flags/4x3/cu.svg'; -export { ReactComponent as Flag_cw } from './flags/4x3/cw.svg'; -export { ReactComponent as Flag_cy } from './flags/4x3/cy.svg'; -export { ReactComponent as Flag_cz } from './flags/4x3/cz.svg'; -export { ReactComponent as Flag_ci } from './flags/4x3/ci.svg'; -export { ReactComponent as Flag_cd } from './flags/4x3/cd.svg'; -export { ReactComponent as Flag_dk } from './flags/4x3/dk.svg'; -export { ReactComponent as Flag_dj } from './flags/4x3/dj.svg'; -export { ReactComponent as Flag_dm } from './flags/4x3/dm.svg'; -export { ReactComponent as Flag_do } from './flags/4x3/do.svg'; -export { ReactComponent as Flag_ec } from './flags/4x3/ec.svg'; -export { ReactComponent as Flag_eg } from './flags/4x3/eg.svg'; -export { ReactComponent as Flag_sv } from './flags/4x3/sv.svg'; -export { ReactComponent as Flag_gq } from './flags/4x3/gq.svg'; -export { ReactComponent as Flag_er } from './flags/4x3/er.svg'; -export { ReactComponent as Flag_ee } from './flags/4x3/ee.svg'; -export { ReactComponent as Flag_sz } from './flags/4x3/sz.svg'; -export { ReactComponent as Flag_et } from './flags/4x3/et.svg'; -export { ReactComponent as Flag_eu } from './flags/4x3/eu.svg'; -export { ReactComponent as Flag_fk } from './flags/4x3/fk.svg'; -export { ReactComponent as Flag_fo } from './flags/4x3/fo.svg'; -export { ReactComponent as Flag_fm } from './flags/4x3/fm.svg'; -export { ReactComponent as Flag_fj } from './flags/4x3/fj.svg'; -export { ReactComponent as Flag_fi } from './flags/4x3/fi.svg'; -export { ReactComponent as Flag_fr } from './flags/4x3/fr.svg'; -export { ReactComponent as Flag_gf } from './flags/4x3/gf.svg'; -export { ReactComponent as Flag_pf } from './flags/4x3/pf.svg'; -export { ReactComponent as Flag_tf } from './flags/4x3/tf.svg'; -export { ReactComponent as Flag_ga } from './flags/4x3/ga.svg'; -export { ReactComponent as Flag_gm } from './flags/4x3/gm.svg'; -export { ReactComponent as Flag_ge } from './flags/4x3/ge.svg'; -export { ReactComponent as Flag_de } from './flags/4x3/de.svg'; -export { ReactComponent as Flag_gh } from './flags/4x3/gh.svg'; -export { ReactComponent as Flag_gi } from './flags/4x3/gi.svg'; -export { ReactComponent as Flag_gr } from './flags/4x3/gr.svg'; -export { ReactComponent as Flag_gl } from './flags/4x3/gl.svg'; -export { ReactComponent as Flag_gd } from './flags/4x3/gd.svg'; -export { ReactComponent as Flag_gp } from './flags/4x3/gp.svg'; -export { ReactComponent as Flag_gu } from './flags/4x3/gu.svg'; -export { ReactComponent as Flag_gt } from './flags/4x3/gt.svg'; -export { ReactComponent as Flag_gg } from './flags/4x3/gg.svg'; -export { ReactComponent as Flag_gn } from './flags/4x3/gn.svg'; -export { ReactComponent as Flag_gw } from './flags/4x3/gw.svg'; -export { ReactComponent as Flag_gy } from './flags/4x3/gy.svg'; -export { ReactComponent as Flag_ht } from './flags/4x3/ht.svg'; -export { ReactComponent as Flag_hm } from './flags/4x3/hm.svg'; -export { ReactComponent as Flag_va } from './flags/4x3/va.svg'; -export { ReactComponent as Flag_hn } from './flags/4x3/hn.svg'; -export { ReactComponent as Flag_hk } from './flags/4x3/hk.svg'; -export { ReactComponent as Flag_hu } from './flags/4x3/hu.svg'; -export { ReactComponent as Flag_is } from './flags/4x3/is.svg'; -export { ReactComponent as Flag_in } from './flags/4x3/in.svg'; -export { ReactComponent as Flag_id } from './flags/4x3/id.svg'; -export { ReactComponent as Flag_ir } from './flags/4x3/ir.svg'; -export { ReactComponent as Flag_iq } from './flags/4x3/iq.svg'; -export { ReactComponent as Flag_ie } from './flags/4x3/ie.svg'; -export { ReactComponent as Flag_im } from './flags/4x3/im.svg'; -export { ReactComponent as Flag_il } from './flags/4x3/il.svg'; -export { ReactComponent as Flag_it } from './flags/4x3/it.svg'; -export { ReactComponent as Flag_jm } from './flags/4x3/jm.svg'; -export { ReactComponent as Flag_jp } from './flags/4x3/jp.svg'; -export { ReactComponent as Flag_je } from './flags/4x3/je.svg'; -export { ReactComponent as Flag_jo } from './flags/4x3/jo.svg'; -export { ReactComponent as Flag_kz } from './flags/4x3/kz.svg'; -export { ReactComponent as Flag_ke } from './flags/4x3/ke.svg'; -export { ReactComponent as Flag_ki } from './flags/4x3/ki.svg'; -export { ReactComponent as Flag_xk } from './flags/4x3/xk.svg'; -export { ReactComponent as Flag_kw } from './flags/4x3/kw.svg'; -export { ReactComponent as Flag_kg } from './flags/4x3/kg.svg'; -export { ReactComponent as Flag_la } from './flags/4x3/la.svg'; -export { ReactComponent as Flag_lv } from './flags/4x3/lv.svg'; -export { ReactComponent as Flag_lb } from './flags/4x3/lb.svg'; -export { ReactComponent as Flag_ls } from './flags/4x3/ls.svg'; -export { ReactComponent as Flag_lr } from './flags/4x3/lr.svg'; -export { ReactComponent as Flag_ly } from './flags/4x3/ly.svg'; -export { ReactComponent as Flag_li } from './flags/4x3/li.svg'; -export { ReactComponent as Flag_lt } from './flags/4x3/lt.svg'; -export { ReactComponent as Flag_lu } from './flags/4x3/lu.svg'; -export { ReactComponent as Flag_mo } from './flags/4x3/mo.svg'; -export { ReactComponent as Flag_mg } from './flags/4x3/mg.svg'; -export { ReactComponent as Flag_mw } from './flags/4x3/mw.svg'; -export { ReactComponent as Flag_my } from './flags/4x3/my.svg'; -export { ReactComponent as Flag_mv } from './flags/4x3/mv.svg'; -export { ReactComponent as Flag_ml } from './flags/4x3/ml.svg'; -export { ReactComponent as Flag_mt } from './flags/4x3/mt.svg'; -export { ReactComponent as Flag_mh } from './flags/4x3/mh.svg'; -export { ReactComponent as Flag_mq } from './flags/4x3/mq.svg'; -export { ReactComponent as Flag_mr } from './flags/4x3/mr.svg'; -export { ReactComponent as Flag_mu } from './flags/4x3/mu.svg'; -export { ReactComponent as Flag_yt } from './flags/4x3/yt.svg'; -export { ReactComponent as Flag_mx } from './flags/4x3/mx.svg'; -export { ReactComponent as Flag_md } from './flags/4x3/md.svg'; -export { ReactComponent as Flag_mc } from './flags/4x3/mc.svg'; -export { ReactComponent as Flag_mn } from './flags/4x3/mn.svg'; -export { ReactComponent as Flag_me } from './flags/4x3/me.svg'; -export { ReactComponent as Flag_ms } from './flags/4x3/ms.svg'; -export { ReactComponent as Flag_ma } from './flags/4x3/ma.svg'; -export { ReactComponent as Flag_mz } from './flags/4x3/mz.svg'; -export { ReactComponent as Flag_mm } from './flags/4x3/mm.svg'; -export { ReactComponent as Flag_na } from './flags/4x3/na.svg'; -export { ReactComponent as Flag_nr } from './flags/4x3/nr.svg'; -export { ReactComponent as Flag_np } from './flags/4x3/np.svg'; -export { ReactComponent as Flag_nl } from './flags/4x3/nl.svg'; -export { ReactComponent as Flag_nc } from './flags/4x3/nc.svg'; -export { ReactComponent as Flag_nz } from './flags/4x3/nz.svg'; -export { ReactComponent as Flag_ni } from './flags/4x3/ni.svg'; -export { ReactComponent as Flag_ne } from './flags/4x3/ne.svg'; -export { ReactComponent as Flag_ng } from './flags/4x3/ng.svg'; -export { ReactComponent as Flag_nu } from './flags/4x3/nu.svg'; -export { ReactComponent as Flag_nf } from './flags/4x3/nf.svg'; -export { ReactComponent as Flag_kp } from './flags/4x3/kp.svg'; -export { ReactComponent as Flag_mk } from './flags/4x3/mk.svg'; -export { ReactComponent as Flag_gb_nir } from './flags/4x3/gb-nir.svg'; -export { ReactComponent as Flag_mp } from './flags/4x3/mp.svg'; -export { ReactComponent as Flag_no } from './flags/4x3/no.svg'; -export { ReactComponent as Flag_om } from './flags/4x3/om.svg'; -export { ReactComponent as Flag_pk } from './flags/4x3/pk.svg'; -export { ReactComponent as Flag_pw } from './flags/4x3/pw.svg'; -export { ReactComponent as Flag_pa } from './flags/4x3/pa.svg'; -export { ReactComponent as Flag_pg } from './flags/4x3/pg.svg'; -export { ReactComponent as Flag_py } from './flags/4x3/py.svg'; -export { ReactComponent as Flag_pe } from './flags/4x3/pe.svg'; -export { ReactComponent as Flag_ph } from './flags/4x3/ph.svg'; -export { ReactComponent as Flag_pn } from './flags/4x3/pn.svg'; -export { ReactComponent as Flag_pl } from './flags/4x3/pl.svg'; -export { ReactComponent as Flag_pt } from './flags/4x3/pt.svg'; -export { ReactComponent as Flag_pr } from './flags/4x3/pr.svg'; -export { ReactComponent as Flag_qa } from './flags/4x3/qa.svg'; -export { ReactComponent as Flag_cg } from './flags/4x3/cg.svg'; -export { ReactComponent as Flag_ro } from './flags/4x3/ro.svg'; -export { ReactComponent as Flag_ru } from './flags/4x3/ru.svg'; -export { ReactComponent as Flag_rw } from './flags/4x3/rw.svg'; -export { ReactComponent as Flag_re } from './flags/4x3/re.svg'; -export { ReactComponent as Flag_bl } from './flags/4x3/bl.svg'; -export { ReactComponent as Flag_sh_hl } from './flags/4x3/sh-hl.svg'; -export { ReactComponent as Flag_sh } from './flags/4x3/sh.svg'; -export { ReactComponent as Flag_kn } from './flags/4x3/kn.svg'; -export { ReactComponent as Flag_lc } from './flags/4x3/lc.svg'; -export { ReactComponent as Flag_mf } from './flags/4x3/mf.svg'; -export { ReactComponent as Flag_pm } from './flags/4x3/pm.svg'; -export { ReactComponent as Flag_vc } from './flags/4x3/vc.svg'; -export { ReactComponent as Flag_ws } from './flags/4x3/ws.svg'; -export { ReactComponent as Flag_sm } from './flags/4x3/sm.svg'; -export { ReactComponent as Flag_st } from './flags/4x3/st.svg'; -export { ReactComponent as Flag_sa } from './flags/4x3/sa.svg'; -export { ReactComponent as Flag_gb_sct } from './flags/4x3/gb-sct.svg'; -export { ReactComponent as Flag_sn } from './flags/4x3/sn.svg'; -export { ReactComponent as Flag_rs } from './flags/4x3/rs.svg'; -export { ReactComponent as Flag_sc } from './flags/4x3/sc.svg'; -export { ReactComponent as Flag_sl } from './flags/4x3/sl.svg'; -export { ReactComponent as Flag_sg } from './flags/4x3/sg.svg'; -export { ReactComponent as Flag_sx } from './flags/4x3/sx.svg'; -export { ReactComponent as Flag_sk } from './flags/4x3/sk.svg'; -export { ReactComponent as Flag_si } from './flags/4x3/si.svg'; -export { ReactComponent as Flag_sb } from './flags/4x3/sb.svg'; -export { ReactComponent as Flag_so } from './flags/4x3/so.svg'; -export { ReactComponent as Flag_za } from './flags/4x3/za.svg'; -export { ReactComponent as Flag_gs } from './flags/4x3/gs.svg'; -export { ReactComponent as Flag_kr } from './flags/4x3/kr.svg'; -export { ReactComponent as Flag_ss } from './flags/4x3/ss.svg'; -export { ReactComponent as Flag_es } from './flags/4x3/es.svg'; -export { ReactComponent as Flag_lk } from './flags/4x3/lk.svg'; -export { ReactComponent as Flag_ps } from './flags/4x3/ps.svg'; -export { ReactComponent as Flag_sd } from './flags/4x3/sd.svg'; -export { ReactComponent as Flag_sr } from './flags/4x3/sr.svg'; -export { ReactComponent as Flag_sj } from './flags/4x3/sj.svg'; -export { ReactComponent as Flag_se } from './flags/4x3/se.svg'; -export { ReactComponent as Flag_ch } from './flags/4x3/ch.svg'; -export { ReactComponent as Flag_sy } from './flags/4x3/sy.svg'; -export { ReactComponent as Flag_tw } from './flags/4x3/tw.svg'; -export { ReactComponent as Flag_tj } from './flags/4x3/tj.svg'; -export { ReactComponent as Flag_tz } from './flags/4x3/tz.svg'; -export { ReactComponent as Flag_th } from './flags/4x3/th.svg'; -export { ReactComponent as Flag_tl } from './flags/4x3/tl.svg'; -export { ReactComponent as Flag_tg } from './flags/4x3/tg.svg'; -export { ReactComponent as Flag_tk } from './flags/4x3/tk.svg'; -export { ReactComponent as Flag_to } from './flags/4x3/to.svg'; -export { ReactComponent as Flag_tt } from './flags/4x3/tt.svg'; -export { ReactComponent as Flag_sh_ta } from './flags/4x3/sh-ta.svg'; -export { ReactComponent as Flag_tn } from './flags/4x3/tn.svg'; -export { ReactComponent as Flag_tm } from './flags/4x3/tm.svg'; -export { ReactComponent as Flag_tc } from './flags/4x3/tc.svg'; -export { ReactComponent as Flag_tv } from './flags/4x3/tv.svg'; -export { ReactComponent as Flag_tr } from './flags/4x3/tr.svg'; -export { ReactComponent as Flag_ug } from './flags/4x3/ug.svg'; -export { ReactComponent as Flag_ua } from './flags/4x3/ua.svg'; -export { ReactComponent as Flag_ae } from './flags/4x3/ae.svg'; -export { ReactComponent as Flag_gb } from './flags/4x3/gb.svg'; -export { ReactComponent as Flag_un } from './flags/4x3/un.svg'; -export { ReactComponent as Flag_um } from './flags/4x3/um.svg'; -export { ReactComponent as Flag_us } from './flags/4x3/us.svg'; -export { ReactComponent as Flag_uy } from './flags/4x3/uy.svg'; -export { ReactComponent as Flag_uz } from './flags/4x3/uz.svg'; -export { ReactComponent as Flag_vu } from './flags/4x3/vu.svg'; -export { ReactComponent as Flag_ve } from './flags/4x3/ve.svg'; -export { ReactComponent as Flag_vn } from './flags/4x3/vn.svg'; -export { ReactComponent as Flag_vg } from './flags/4x3/vg.svg'; -export { ReactComponent as Flag_vi } from './flags/4x3/vi.svg'; -export { ReactComponent as Flag_gb_wls } from './flags/4x3/gb-wls.svg'; -export { ReactComponent as Flag_wf } from './flags/4x3/wf.svg'; -export { ReactComponent as Flag_eh } from './flags/4x3/eh.svg'; -export { ReactComponent as Flag_ye } from './flags/4x3/ye.svg'; -export { ReactComponent as Flag_zm } from './flags/4x3/zm.svg'; -export { ReactComponent as Flag_zw } from './flags/4x3/zw.svg'; \ No newline at end of file +export {ReactComponent as Flag_af} from './flags/4x3/af.svg'; +export {ReactComponent as Flag_ax} from './flags/4x3/ax.svg'; +export {ReactComponent as Flag_al} from './flags/4x3/al.svg'; +export {ReactComponent as Flag_dz} from './flags/4x3/dz.svg'; +export {ReactComponent as Flag_as} from './flags/4x3/as.svg'; +export {ReactComponent as Flag_ad} from './flags/4x3/ad.svg'; +export {ReactComponent as Flag_ao} from './flags/4x3/ao.svg'; +export {ReactComponent as Flag_ai} from './flags/4x3/ai.svg'; +export {ReactComponent as Flag_aq} from './flags/4x3/aq.svg'; +export {ReactComponent as Flag_ag} from './flags/4x3/ag.svg'; +export {ReactComponent as Flag_ar} from './flags/4x3/ar.svg'; +export {ReactComponent as Flag_am} from './flags/4x3/am.svg'; +export {ReactComponent as Flag_aw} from './flags/4x3/aw.svg'; +export {ReactComponent as Flag_sh_ac} from './flags/4x3/sh-ac.svg'; +export {ReactComponent as Flag_au} from './flags/4x3/au.svg'; +export {ReactComponent as Flag_at} from './flags/4x3/at.svg'; +export {ReactComponent as Flag_az} from './flags/4x3/az.svg'; +export {ReactComponent as Flag_bs} from './flags/4x3/bs.svg'; +export {ReactComponent as Flag_bh} from './flags/4x3/bh.svg'; +export {ReactComponent as Flag_bd} from './flags/4x3/bd.svg'; +export {ReactComponent as Flag_bb} from './flags/4x3/bb.svg'; +export {ReactComponent as Flag_by} from './flags/4x3/by.svg'; +export {ReactComponent as Flag_be} from './flags/4x3/be.svg'; +export {ReactComponent as Flag_bz} from './flags/4x3/bz.svg'; +export {ReactComponent as Flag_bj} from './flags/4x3/bj.svg'; +export {ReactComponent as Flag_bm} from './flags/4x3/bm.svg'; +export {ReactComponent as Flag_bt} from './flags/4x3/bt.svg'; +export {ReactComponent as Flag_bo} from './flags/4x3/bo.svg'; +export {ReactComponent as Flag_bq} from './flags/4x3/bq.svg'; +export {ReactComponent as Flag_ba} from './flags/4x3/ba.svg'; +export {ReactComponent as Flag_bw} from './flags/4x3/bw.svg'; +export {ReactComponent as Flag_bv} from './flags/4x3/bv.svg'; +export {ReactComponent as Flag_br} from './flags/4x3/br.svg'; +export {ReactComponent as Flag_io} from './flags/4x3/io.svg'; +export {ReactComponent as Flag_bn} from './flags/4x3/bn.svg'; +export {ReactComponent as Flag_bg} from './flags/4x3/bg.svg'; +export {ReactComponent as Flag_bf} from './flags/4x3/bf.svg'; +export {ReactComponent as Flag_bi} from './flags/4x3/bi.svg'; +export {ReactComponent as Flag_cv} from './flags/4x3/cv.svg'; +export {ReactComponent as Flag_kh} from './flags/4x3/kh.svg'; +export {ReactComponent as Flag_cm} from './flags/4x3/cm.svg'; +export {ReactComponent as Flag_ca} from './flags/4x3/ca.svg'; +export {ReactComponent as Flag_ic} from './flags/4x3/ic.svg'; +export {ReactComponent as Flag_es_ct} from './flags/4x3/es-ct.svg'; +export {ReactComponent as Flag_ky} from './flags/4x3/ky.svg'; +export {ReactComponent as Flag_cf} from './flags/4x3/cf.svg'; +export {ReactComponent as Flag_td} from './flags/4x3/td.svg'; +export {ReactComponent as Flag_cl} from './flags/4x3/cl.svg'; +export {ReactComponent as Flag_cn} from './flags/4x3/cn.svg'; +export {ReactComponent as Flag_cx} from './flags/4x3/cx.svg'; +export {ReactComponent as Flag_cc} from './flags/4x3/cc.svg'; +export {ReactComponent as Flag_co} from './flags/4x3/co.svg'; +export {ReactComponent as Flag_km} from './flags/4x3/km.svg'; +export {ReactComponent as Flag_ck} from './flags/4x3/ck.svg'; +export {ReactComponent as Flag_cr} from './flags/4x3/cr.svg'; +export {ReactComponent as Flag_hr} from './flags/4x3/hr.svg'; +export {ReactComponent as Flag_cu} from './flags/4x3/cu.svg'; +export {ReactComponent as Flag_cw} from './flags/4x3/cw.svg'; +export {ReactComponent as Flag_cy} from './flags/4x3/cy.svg'; +export {ReactComponent as Flag_cz} from './flags/4x3/cz.svg'; +export {ReactComponent as Flag_ci} from './flags/4x3/ci.svg'; +export {ReactComponent as Flag_cd} from './flags/4x3/cd.svg'; +export {ReactComponent as Flag_dk} from './flags/4x3/dk.svg'; +export {ReactComponent as Flag_dj} from './flags/4x3/dj.svg'; +export {ReactComponent as Flag_dm} from './flags/4x3/dm.svg'; +export {ReactComponent as Flag_do} from './flags/4x3/do.svg'; +export {ReactComponent as Flag_ec} from './flags/4x3/ec.svg'; +export {ReactComponent as Flag_eg} from './flags/4x3/eg.svg'; +export {ReactComponent as Flag_sv} from './flags/4x3/sv.svg'; +export {ReactComponent as Flag_gq} from './flags/4x3/gq.svg'; +export {ReactComponent as Flag_er} from './flags/4x3/er.svg'; +export {ReactComponent as Flag_ee} from './flags/4x3/ee.svg'; +export {ReactComponent as Flag_sz} from './flags/4x3/sz.svg'; +export {ReactComponent as Flag_et} from './flags/4x3/et.svg'; +export {ReactComponent as Flag_eu} from './flags/4x3/eu.svg'; +export {ReactComponent as Flag_fk} from './flags/4x3/fk.svg'; +export {ReactComponent as Flag_fo} from './flags/4x3/fo.svg'; +export {ReactComponent as Flag_fm} from './flags/4x3/fm.svg'; +export {ReactComponent as Flag_fj} from './flags/4x3/fj.svg'; +export {ReactComponent as Flag_fi} from './flags/4x3/fi.svg'; +export {ReactComponent as Flag_fr} from './flags/4x3/fr.svg'; +export {ReactComponent as Flag_gf} from './flags/4x3/gf.svg'; +export {ReactComponent as Flag_pf} from './flags/4x3/pf.svg'; +export {ReactComponent as Flag_tf} from './flags/4x3/tf.svg'; +export {ReactComponent as Flag_ga} from './flags/4x3/ga.svg'; +export {ReactComponent as Flag_gm} from './flags/4x3/gm.svg'; +export {ReactComponent as Flag_ge} from './flags/4x3/ge.svg'; +export {ReactComponent as Flag_de} from './flags/4x3/de.svg'; +export {ReactComponent as Flag_gh} from './flags/4x3/gh.svg'; +export {ReactComponent as Flag_gi} from './flags/4x3/gi.svg'; +export {ReactComponent as Flag_gr} from './flags/4x3/gr.svg'; +export {ReactComponent as Flag_gl} from './flags/4x3/gl.svg'; +export {ReactComponent as Flag_gd} from './flags/4x3/gd.svg'; +export {ReactComponent as Flag_gp} from './flags/4x3/gp.svg'; +export {ReactComponent as Flag_gu} from './flags/4x3/gu.svg'; +export {ReactComponent as Flag_gt} from './flags/4x3/gt.svg'; +export {ReactComponent as Flag_gg} from './flags/4x3/gg.svg'; +export {ReactComponent as Flag_gn} from './flags/4x3/gn.svg'; +export {ReactComponent as Flag_gw} from './flags/4x3/gw.svg'; +export {ReactComponent as Flag_gy} from './flags/4x3/gy.svg'; +export {ReactComponent as Flag_ht} from './flags/4x3/ht.svg'; +export {ReactComponent as Flag_hm} from './flags/4x3/hm.svg'; +export {ReactComponent as Flag_va} from './flags/4x3/va.svg'; +export {ReactComponent as Flag_hn} from './flags/4x3/hn.svg'; +export {ReactComponent as Flag_hk} from './flags/4x3/hk.svg'; +export {ReactComponent as Flag_hu} from './flags/4x3/hu.svg'; +export {ReactComponent as Flag_is} from './flags/4x3/is.svg'; +export {ReactComponent as Flag_in} from './flags/4x3/in.svg'; +export {ReactComponent as Flag_id} from './flags/4x3/id.svg'; +export {ReactComponent as Flag_ir} from './flags/4x3/ir.svg'; +export {ReactComponent as Flag_iq} from './flags/4x3/iq.svg'; +export {ReactComponent as Flag_ie} from './flags/4x3/ie.svg'; +export {ReactComponent as Flag_im} from './flags/4x3/im.svg'; +export {ReactComponent as Flag_il} from './flags/4x3/il.svg'; +export {ReactComponent as Flag_it} from './flags/4x3/it.svg'; +export {ReactComponent as Flag_jm} from './flags/4x3/jm.svg'; +export {ReactComponent as Flag_jp} from './flags/4x3/jp.svg'; +export {ReactComponent as Flag_je} from './flags/4x3/je.svg'; +export {ReactComponent as Flag_jo} from './flags/4x3/jo.svg'; +export {ReactComponent as Flag_kz} from './flags/4x3/kz.svg'; +export {ReactComponent as Flag_ke} from './flags/4x3/ke.svg'; +export {ReactComponent as Flag_ki} from './flags/4x3/ki.svg'; +export {ReactComponent as Flag_xk} from './flags/4x3/xk.svg'; +export {ReactComponent as Flag_kw} from './flags/4x3/kw.svg'; +export {ReactComponent as Flag_kg} from './flags/4x3/kg.svg'; +export {ReactComponent as Flag_la} from './flags/4x3/la.svg'; +export {ReactComponent as Flag_lv} from './flags/4x3/lv.svg'; +export {ReactComponent as Flag_lb} from './flags/4x3/lb.svg'; +export {ReactComponent as Flag_ls} from './flags/4x3/ls.svg'; +export {ReactComponent as Flag_lr} from './flags/4x3/lr.svg'; +export {ReactComponent as Flag_ly} from './flags/4x3/ly.svg'; +export {ReactComponent as Flag_li} from './flags/4x3/li.svg'; +export {ReactComponent as Flag_lt} from './flags/4x3/lt.svg'; +export {ReactComponent as Flag_lu} from './flags/4x3/lu.svg'; +export {ReactComponent as Flag_mo} from './flags/4x3/mo.svg'; +export {ReactComponent as Flag_mg} from './flags/4x3/mg.svg'; +export {ReactComponent as Flag_mw} from './flags/4x3/mw.svg'; +export {ReactComponent as Flag_my} from './flags/4x3/my.svg'; +export {ReactComponent as Flag_mv} from './flags/4x3/mv.svg'; +export {ReactComponent as Flag_ml} from './flags/4x3/ml.svg'; +export {ReactComponent as Flag_mt} from './flags/4x3/mt.svg'; +export {ReactComponent as Flag_mh} from './flags/4x3/mh.svg'; +export {ReactComponent as Flag_mq} from './flags/4x3/mq.svg'; +export {ReactComponent as Flag_mr} from './flags/4x3/mr.svg'; +export {ReactComponent as Flag_mu} from './flags/4x3/mu.svg'; +export {ReactComponent as Flag_yt} from './flags/4x3/yt.svg'; +export {ReactComponent as Flag_mx} from './flags/4x3/mx.svg'; +export {ReactComponent as Flag_md} from './flags/4x3/md.svg'; +export {ReactComponent as Flag_mc} from './flags/4x3/mc.svg'; +export {ReactComponent as Flag_mn} from './flags/4x3/mn.svg'; +export {ReactComponent as Flag_me} from './flags/4x3/me.svg'; +export {ReactComponent as Flag_ms} from './flags/4x3/ms.svg'; +export {ReactComponent as Flag_ma} from './flags/4x3/ma.svg'; +export {ReactComponent as Flag_mz} from './flags/4x3/mz.svg'; +export {ReactComponent as Flag_mm} from './flags/4x3/mm.svg'; +export {ReactComponent as Flag_na} from './flags/4x3/na.svg'; +export {ReactComponent as Flag_nr} from './flags/4x3/nr.svg'; +export {ReactComponent as Flag_np} from './flags/4x3/np.svg'; +export {ReactComponent as Flag_nl} from './flags/4x3/nl.svg'; +export {ReactComponent as Flag_nc} from './flags/4x3/nc.svg'; +export {ReactComponent as Flag_nz} from './flags/4x3/nz.svg'; +export {ReactComponent as Flag_ni} from './flags/4x3/ni.svg'; +export {ReactComponent as Flag_ne} from './flags/4x3/ne.svg'; +export {ReactComponent as Flag_ng} from './flags/4x3/ng.svg'; +export {ReactComponent as Flag_nu} from './flags/4x3/nu.svg'; +export {ReactComponent as Flag_nf} from './flags/4x3/nf.svg'; +export {ReactComponent as Flag_kp} from './flags/4x3/kp.svg'; +export {ReactComponent as Flag_mk} from './flags/4x3/mk.svg'; +export {ReactComponent as Flag_gb_nir} from './flags/4x3/gb-nir.svg'; +export {ReactComponent as Flag_mp} from './flags/4x3/mp.svg'; +export {ReactComponent as Flag_no} from './flags/4x3/no.svg'; +export {ReactComponent as Flag_om} from './flags/4x3/om.svg'; +export {ReactComponent as Flag_pk} from './flags/4x3/pk.svg'; +export {ReactComponent as Flag_pw} from './flags/4x3/pw.svg'; +export {ReactComponent as Flag_pa} from './flags/4x3/pa.svg'; +export {ReactComponent as Flag_pg} from './flags/4x3/pg.svg'; +export {ReactComponent as Flag_py} from './flags/4x3/py.svg'; +export {ReactComponent as Flag_pe} from './flags/4x3/pe.svg'; +export {ReactComponent as Flag_ph} from './flags/4x3/ph.svg'; +export {ReactComponent as Flag_pn} from './flags/4x3/pn.svg'; +export {ReactComponent as Flag_pl} from './flags/4x3/pl.svg'; +export {ReactComponent as Flag_pt} from './flags/4x3/pt.svg'; +export {ReactComponent as Flag_pr} from './flags/4x3/pr.svg'; +export {ReactComponent as Flag_qa} from './flags/4x3/qa.svg'; +export {ReactComponent as Flag_cg} from './flags/4x3/cg.svg'; +export {ReactComponent as Flag_ro} from './flags/4x3/ro.svg'; +export {ReactComponent as Flag_ru} from './flags/4x3/ru.svg'; +export {ReactComponent as Flag_rw} from './flags/4x3/rw.svg'; +export {ReactComponent as Flag_re} from './flags/4x3/re.svg'; +export {ReactComponent as Flag_bl} from './flags/4x3/bl.svg'; +export {ReactComponent as Flag_sh_hl} from './flags/4x3/sh-hl.svg'; +export {ReactComponent as Flag_sh} from './flags/4x3/sh.svg'; +export {ReactComponent as Flag_kn} from './flags/4x3/kn.svg'; +export {ReactComponent as Flag_lc} from './flags/4x3/lc.svg'; +export {ReactComponent as Flag_mf} from './flags/4x3/mf.svg'; +export {ReactComponent as Flag_pm} from './flags/4x3/pm.svg'; +export {ReactComponent as Flag_vc} from './flags/4x3/vc.svg'; +export {ReactComponent as Flag_ws} from './flags/4x3/ws.svg'; +export {ReactComponent as Flag_sm} from './flags/4x3/sm.svg'; +export {ReactComponent as Flag_st} from './flags/4x3/st.svg'; +export {ReactComponent as Flag_sa} from './flags/4x3/sa.svg'; +export {ReactComponent as Flag_gb_sct} from './flags/4x3/gb-sct.svg'; +export {ReactComponent as Flag_sn} from './flags/4x3/sn.svg'; +export {ReactComponent as Flag_rs} from './flags/4x3/rs.svg'; +export {ReactComponent as Flag_sc} from './flags/4x3/sc.svg'; +export {ReactComponent as Flag_sl} from './flags/4x3/sl.svg'; +export {ReactComponent as Flag_sg} from './flags/4x3/sg.svg'; +export {ReactComponent as Flag_sx} from './flags/4x3/sx.svg'; +export {ReactComponent as Flag_sk} from './flags/4x3/sk.svg'; +export {ReactComponent as Flag_si} from './flags/4x3/si.svg'; +export {ReactComponent as Flag_sb} from './flags/4x3/sb.svg'; +export {ReactComponent as Flag_so} from './flags/4x3/so.svg'; +export {ReactComponent as Flag_za} from './flags/4x3/za.svg'; +export {ReactComponent as Flag_gs} from './flags/4x3/gs.svg'; +export {ReactComponent as Flag_kr} from './flags/4x3/kr.svg'; +export {ReactComponent as Flag_ss} from './flags/4x3/ss.svg'; +export {ReactComponent as Flag_es} from './flags/4x3/es.svg'; +export {ReactComponent as Flag_lk} from './flags/4x3/lk.svg'; +export {ReactComponent as Flag_ps} from './flags/4x3/ps.svg'; +export {ReactComponent as Flag_sd} from './flags/4x3/sd.svg'; +export {ReactComponent as Flag_sr} from './flags/4x3/sr.svg'; +export {ReactComponent as Flag_sj} from './flags/4x3/sj.svg'; +export {ReactComponent as Flag_se} from './flags/4x3/se.svg'; +export {ReactComponent as Flag_ch} from './flags/4x3/ch.svg'; +export {ReactComponent as Flag_sy} from './flags/4x3/sy.svg'; +export {ReactComponent as Flag_tw} from './flags/4x3/tw.svg'; +export {ReactComponent as Flag_tj} from './flags/4x3/tj.svg'; +export {ReactComponent as Flag_tz} from './flags/4x3/tz.svg'; +export {ReactComponent as Flag_th} from './flags/4x3/th.svg'; +export {ReactComponent as Flag_tl} from './flags/4x3/tl.svg'; +export {ReactComponent as Flag_tg} from './flags/4x3/tg.svg'; +export {ReactComponent as Flag_tk} from './flags/4x3/tk.svg'; +export {ReactComponent as Flag_to} from './flags/4x3/to.svg'; +export {ReactComponent as Flag_tt} from './flags/4x3/tt.svg'; +export {ReactComponent as Flag_sh_ta} from './flags/4x3/sh-ta.svg'; +export {ReactComponent as Flag_tn} from './flags/4x3/tn.svg'; +export {ReactComponent as Flag_tm} from './flags/4x3/tm.svg'; +export {ReactComponent as Flag_tc} from './flags/4x3/tc.svg'; +export {ReactComponent as Flag_tv} from './flags/4x3/tv.svg'; +export {ReactComponent as Flag_tr} from './flags/4x3/tr.svg'; +export {ReactComponent as Flag_ug} from './flags/4x3/ug.svg'; +export {ReactComponent as Flag_ua} from './flags/4x3/ua.svg'; +export {ReactComponent as Flag_ae} from './flags/4x3/ae.svg'; +export {ReactComponent as Flag_gb} from './flags/4x3/gb.svg'; +export {ReactComponent as Flag_un} from './flags/4x3/un.svg'; +export {ReactComponent as Flag_um} from './flags/4x3/um.svg'; +export {ReactComponent as Flag_us} from './flags/4x3/us.svg'; +export {ReactComponent as Flag_uy} from './flags/4x3/uy.svg'; +export {ReactComponent as Flag_uz} from './flags/4x3/uz.svg'; +export {ReactComponent as Flag_vu} from './flags/4x3/vu.svg'; +export {ReactComponent as Flag_ve} from './flags/4x3/ve.svg'; +export {ReactComponent as Flag_vn} from './flags/4x3/vn.svg'; +export {ReactComponent as Flag_vg} from './flags/4x3/vg.svg'; +export {ReactComponent as Flag_vi} from './flags/4x3/vi.svg'; +export {ReactComponent as Flag_gb_wls} from './flags/4x3/gb-wls.svg'; +export {ReactComponent as Flag_wf} from './flags/4x3/wf.svg'; +export {ReactComponent as Flag_eh} from './flags/4x3/eh.svg'; +export {ReactComponent as Flag_ye} from './flags/4x3/ye.svg'; +export {ReactComponent as Flag_zm} from './flags/4x3/zm.svg'; +export {ReactComponent as Flag_zw} from './flags/4x3/zw.svg'; diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 10b059bda..40d2753fd 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -27,6 +27,10 @@ import { BorderStyleIcon, BorderRadiusIcon, TextStyleIcon, + StarSmileIcon, + TimerFlashIcon, + Timer2Icon, + RefreshLineIcon, } from 'lowcoder-design'; import {useContext} from 'react'; import styled from 'styled-components'; @@ -701,8 +705,8 @@ function calcColors>( if (isTextDecorationConfig(config)) { res[name] = themeWithDefault[config.textDecoration] || 'none'; } - if(isBorderStyleConfig(config)){ - res[name] = themeWithDefault[config.borderStyle] || 'solid' + if (isBorderStyleConfig(config)) { + res[name] = themeWithDefault[config.borderStyle] || 'solid'; } if (isMarginConfig(config)) { res[name] = themeWithDefault[config.margin]; @@ -870,7 +874,7 @@ const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` color: #888; `; -const AnimationIterationCountPropIcon = styled(BorderWidthIcon)` +const AnimationIterationCountPropIcon = styled(RefreshLineIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888; @@ -894,19 +898,19 @@ const BoxShadowPropIcon = styled(BorderWidthIcon)` color: #888; `; -const AnimationPropIcon = styled(BorderWidthIcon)` +const AnimationPropIcon = styled(StarSmileIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888; `; -const AnimationDelayPropIcon = styled(BorderWidthIcon)` +const AnimationDelayPropIcon = styled(TimerFlashIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888; `; -const AnimationDurationPropIcon = styled(BorderWidthIcon)` +const AnimationDurationPropIcon = styled(Timer2Icon)` margin: 0 8px 0 -3px; padding: 3px; color: #888; From 4e98bf6333b3ab030bd46faaf0de0236256d137c Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Fri, 17 May 2024 22:38:18 +0500 Subject: [PATCH 021/155] animation style separated in autocomplete --- .../src/components/Section.tsx | 94 ++++++++++--------- .../src/i18n/design/locales/en.ts | 85 ++++++++--------- .../autoCompleteComp/autoCompleteComp.tsx | 6 ++ .../src/comps/controls/labelControl.tsx | 23 ++++- .../comps/controls/styleControlConstants.tsx | 59 +++++++----- 5 files changed, 154 insertions(+), 113 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index cad6e8bf0..9e8f11c57 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -1,11 +1,11 @@ -import { trans } from "i18n/design"; -import React, { ReactNode, useContext } from "react"; -import styled from "styled-components"; -import { ReactComponent as Packup } from "icons/icon-Pack-up.svg"; -import { labelCss } from "./Label"; -import { controlItem, ControlNode } from "./control"; - -const SectionItem = styled.div<{ $width?: number }>` +import {trans} from 'i18n/design'; +import React, {ReactNode, useContext} from 'react'; +import styled from 'styled-components'; +import {ReactComponent as Packup} from 'icons/icon-Pack-up.svg'; +import {labelCss} from './Label'; +import {controlItem, ControlNode} from './control'; + +const SectionItem = styled.div<{$width?: number}>` width: ${(props) => (props.$width ? props.$width : 312)}px; border-bottom: 1px solid #e1e3eb; @@ -63,14 +63,14 @@ const SectionLabelDiv = styled.div` } `; -const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>` - display: ${(props) => props.$show || "none"}; +const ShowChildren = styled.div<{$show?: string; $noMargin?: boolean}>` + display: ${(props) => props.$show || 'none'}; flex-direction: column; gap: 8px; transition: all 3s; margin-left: ${(props) => (props.$noMargin ? 0 : 16)}px; padding-bottom: 16px; - padding-right: ${(props) => (props.$noMargin ? 0 : "16px")}; + padding-right: ${(props) => (props.$noMargin ? 0 : '16px')}; `; interface ISectionConfig { @@ -95,16 +95,22 @@ export interface PropertySectionContextType { state: PropertySectionState; } -export const PropertySectionContext = React.createContext({ - toggle: () => {}, - compName: "", - state: {}, -}); +export const PropertySectionContext = + React.createContext({ + toggle: () => {}, + compName: '', + state: {}, + }); export const BaseSection = (props: ISectionConfig) => { - const { name } = props; - const { compName, state, toggle } = useContext(PropertySectionContext); - const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true; + const {name} = props; + const {compName, state, toggle} = useContext(PropertySectionContext); + const open = + props.open !== undefined + ? props.open + : name + ? state[compName]?.[name] !== false + : true; // console.log("open", open, props.open); @@ -118,15 +124,15 @@ export const BaseSection = (props: ISectionConfig) => { return ( {props.name && ( - + {props.name} -

+
{open && props.additionalButton} - +
)} - + {props.children} @@ -134,27 +140,31 @@ export const BaseSection = (props: ISectionConfig) => { }; export function Section(props: ISectionConfig) { - return controlItem({ filterText: props.name, searchChild: true }, ); + return controlItem( + {filterText: props.name, searchChild: true}, + + ); } // common section names export const sectionNames = { - basic: trans("prop.basic"), - interaction: trans("prop.interaction"), - advanced: trans("prop.advanced"), - validation: trans("prop.validation"), - layout: trans("prop.layout"), - style: trans("prop.style"), - labelStyle:trans("prop.labelStyle"), - data: trans("prop.data"), - meetings: trans("prop.meetings"), // added by Falk Wolsky - field: trans("prop.field"), - inputFieldStyle:trans("prop.inputFieldStyle"), - avatarStyle:trans("prop.avatarStyle"), - captionStyle:trans("prop.captionStyle"), - startButtonStyle:trans("prop.startButtonStyle"), - resetButtonStyle:trans("prop.resetButtonStyle"), - headerStyle:trans("prop.headerStyle"), - bodyStyle:trans("prop.bodyStyle"), - badgeStyle:trans("prop.badgeStyle"), + basic: trans('prop.basic'), + interaction: trans('prop.interaction'), + advanced: trans('prop.advanced'), + validation: trans('prop.validation'), + layout: trans('prop.layout'), + style: trans('prop.style'), + labelStyle: trans('prop.labelStyle'), + animationStyle: trans('prop.animationStyle'), + data: trans('prop.data'), + meetings: trans('prop.meetings'), // added by Falk Wolsky + field: trans('prop.field'), + inputFieldStyle: trans('prop.inputFieldStyle'), + avatarStyle: trans('prop.avatarStyle'), + captionStyle: trans('prop.captionStyle'), + startButtonStyle: trans('prop.startButtonStyle'), + resetButtonStyle: trans('prop.resetButtonStyle'), + headerStyle: trans('prop.headerStyle'), + bodyStyle: trans('prop.bodyStyle'), + badgeStyle: trans('prop.badgeStyle'), }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index b15621be1..1acbc0822 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -1,32 +1,33 @@ export const en = { - addItem: "Add", - duplicate: "Duplicate", - rename: "Rename", - delete: "Delete", - edit: "Edit", - ok: "OK", - cancel: "Cancel", - previousStep: "Previous", - nextStep: "Next", - finish: "Finish", + addItem: 'Add', + duplicate: 'Duplicate', + rename: 'Rename', + delete: 'Delete', + edit: 'Edit', + ok: 'OK', + cancel: 'Cancel', + previousStep: 'Previous', + nextStep: 'Next', + finish: 'Finish', country: { - china: "China", + china: 'China', }, notification: { - copySuccess: "Copy success", - copyFail: "Copy failed", + copySuccess: 'Copy success', + copyFail: 'Copy failed', }, prop: { - basic: "Basic", - resources: "Resources", - interaction: "Interaction", - advanced: "Advanced", - validation: "Validation", - layout: "Layout", - labelStyle: "Label Style", - style: "Style", - meetings: "Meeting Settings", - data: "Data", + basic: 'Basic', + resources: 'Resources', + interaction: 'Interaction', + advanced: 'Advanced', + validation: 'Validation', + layout: 'Layout', + animationStyle: 'Animation Style', + labelStyle: 'Label Style', + style: 'Style', + meetings: 'Meeting Settings', + data: 'Data', field: 'Field', inputFieldStyle: 'Input Field Style', avatarStyle: 'Avatar Style', @@ -38,39 +39,39 @@ export const en = { badgeStyle: 'Badge Style', }, passwordInput: { - label: "Password:", - placeholder: "Please enter your password", - inconsistentPassword: "Two passwords are inconsistent", - confirmPasswordLabel: "Confirm password:", - confirmPasswordPlaceholder: "Please enter your password again", + label: 'Password:', + placeholder: 'Please enter your password', + inconsistentPassword: 'Two passwords are inconsistent', + confirmPasswordLabel: 'Confirm password:', + confirmPasswordPlaceholder: 'Please enter your password again', }, verifyCodeInput: { - label: "Verification code:", - errorMsg: "Code should be {digitNum} digits", - placeholder: "Please enter {digitNum} digits code", - sendCode: "Send code", + label: 'Verification code:', + errorMsg: 'Code should be {digitNum} digits', + placeholder: 'Please enter {digitNum} digits code', + sendCode: 'Send code', }, iconSelect: { - title: "Select icon", - searchPlaceholder: "Search icon", + title: 'Select icon', + searchPlaceholder: 'Search icon', }, shapeSelect: { - title: "Select shape", - searchPlaceholder: "Search shape", + title: 'Select shape', + searchPlaceholder: 'Search shape', }, eventHandler: { - advanced: "Advanced", + advanced: 'Advanced', }, comp: { - selectedCompsTitle: "{selectCompNum} components are selected", - selectedCompsDetail: "Click component to view its properties", - batchDelete: "Batch delete", + selectedCompsTitle: '{selectCompNum} components are selected', + selectedCompsDetail: 'Click component to view its properties', + batchDelete: 'Batch delete', }, optionsControl: { optionItemErrorMSg: `Found duplicate option value "{value}". Only the first item will be displayed. Please change to a unique value.`, - emptyList: "No options", + emptyList: 'No options', }, container: { - hintPlaceHolder: "Drag components from the right panel", + hintPlaceHolder: 'Drag components from the right panel', }, }; diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 400055afc..9e5e3284a 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -3,6 +3,7 @@ import {Input, Section, sectionNames} from 'lowcoder-design'; import {BoolControl} from 'comps/controls/boolControl'; import {styleControl} from 'comps/controls/styleControl'; import { + AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, @@ -87,6 +88,7 @@ const childrenMap = { componentSize: dropdownControl(componentSize, 'small'), valueInItems: booleanExposingStateControl('valueInItems'), inputFieldStyle: styleControl(InputLikeStyle), + animationStyle: styleControl(AnimationStyle), }; const getValidate = (value: any): '' | 'warning' | 'error' | undefined => { @@ -280,6 +282,7 @@ let AutoCompleteCompBase = (function () { style: props.style, labelStyle: props.labelStyle, inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, ...validateState, }); }) @@ -344,6 +347,9 @@ let AutoCompleteCompBase = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
); }) diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 01471248d..841f77452 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -6,10 +6,10 @@ import {NumberControl, StringControl} from 'comps/controls/codeControl'; import {dropdownControl} from 'comps/controls/dropdownControl'; import {withDefault} from 'comps/generators'; import {MultiCompBuilder} from 'comps/generators/multi'; -import {labelCss, Section, Tooltip, UnderlineCss} from 'lowcoder-design'; +import {labelCss, Section, Tooltip} from 'lowcoder-design'; import {ValueFromOption} from 'lowcoder-design'; import {isEmpty} from 'lodash'; -import {Fragment, ReactNode} from 'react'; +import {ReactNode} from 'react'; import styled, {css} from 'styled-components'; import {AlignLeft} from 'lowcoder-design'; import {AlignRight} from 'lowcoder-design'; @@ -31,6 +31,7 @@ type LabelViewProps = Pick< field?: Record; inputFieldStyle?: Record; childrenInputFieldStyle?: Record; + animationStyle?: Record; }; const StyledStarIcon = styled(StarIcon)` @@ -51,7 +52,11 @@ function getStyle(style: any) { `; } -const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>` +const LabelViewWrapper = styled.div<{ + $style: any; + inputFieldStyle: any; + $animationStyle: any; +}>` ${(props) => { return ( props.$style && { @@ -63,10 +68,19 @@ const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>` ); }} ${(props) => props.inputFieldStyle && getStyle(props.inputFieldStyle)} + ${(props) => props.$animationStyle && props.$animationStyle} display: flex; flex-direction: column; height: 100%; - border: ${(props)=>{return props.$style.borderWidth}} ${(props)=>{return props.$style.borderStyle}} ${(props)=>{return props.$style.border}} !important; + border: ${(props) => { + return props.$style.borderWidth; + }} + ${(props) => { + return props.$style.borderStyle; + }} + ${(props) => { + return props.$style.border; + }} !important; `; const MainWrapper = styled.div<{ @@ -199,6 +213,7 @@ export const LabelControl = (function () { ['border'].includes(style.name) === false), + ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter( + (style) => ['border'].includes(style.name) === false + ), // ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; @@ -1298,24 +1303,25 @@ export const RadioStyle = [ HOVER_BACKGROUND_COLOR, ] as const; - export const SegmentStyle = [ LABEL, - ...STYLING_FIELDS_SEQUENCE.filter((style) => ['border', 'borderWidth'].includes(style.name) === false), + ...STYLING_FIELDS_SEQUENCE.filter( + (style) => ['border', 'borderWidth'].includes(style.name) === false + ), // getStaticBorder(SECOND_SURFACE_COLOR), - { - name: "border", - label: trans("style.border"), - depName: "background", + { + name: 'border', + label: trans('style.border'), + depName: 'background', transformer: backgroundToBorder, }, { - name: "borderWidth", - label: trans("style.borderWidth"), - borderWidth: "borderWidth", - }, - - getStaticBackground(SURFACE_COLOR), + name: 'borderWidth', + label: trans('style.borderWidth'), + borderWidth: 'borderWidth', + }, + + getStaticBackground(SURFACE_COLOR), { name: 'indicatorBackground', label: trans('style.indicatorBackground'), @@ -1346,9 +1352,9 @@ export const StepsStyle = [ transformer: handleToSegmentBackground, }, { - name: "titleText", - label: trans("title"), - depName: "text", + name: 'titleText', + label: trans('title'), + depName: 'text', depType: DEP_TYPE.SELF, transformer: contrastText, }, @@ -1550,7 +1556,9 @@ function handleToHoverLink(color: string) { export const LinkStyle = [ getBackground(), - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [...LinkTextStyle]) + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [ + ...LinkTextStyle, + ]), ] as const; export const DividerStyle = [ @@ -1885,6 +1893,7 @@ export type timerStyleType = StyleConfigType; export type StartButtonStyleType = StyleConfigType; export type LabelStyleType = StyleConfigType; +export type AnimationStyleType = StyleConfigType; export type InputLikeStyleType = StyleConfigType; export type InputFieldStyleType = StyleConfigType; export type ColorPickerStyleType = StyleConfigType; From b0cecdc7c39c1d9144355f7cf16864f027fb5311 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 04:01:42 +0500 Subject: [PATCH 022/155] animation style added to container --- .../comps/comps/containerComp/cardComp.tsx | 392 +++++++++++------- .../comps/containerComp/containerComp.tsx | 107 +++-- .../comps/containerComp/pageLayoutComp.tsx | 157 ++++--- .../comps/containerComp/textContainerComp.tsx | 128 +++--- .../src/comps/comps/formComp/formComp.tsx | 292 +++++++------ .../comps/comps/pageLayoutComp/pageLayout.tsx | 12 +- .../comps/comps/tabs/tabbedContainerComp.tsx | 20 +- .../comps/triContainerComp/triContainer.tsx | 12 +- .../triFloatTextContainer.tsx | 12 +- 9 files changed, 672 insertions(+), 460 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index d8784192c..69d8661e6 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -1,125 +1,152 @@ -import ReactResizeDetector from "react-resize-detector"; -import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; -import { TriContainer } from "../triContainerComp/triContainer"; +import ReactResizeDetector from 'react-resize-detector'; import { - ContainerCompBuilder, -} from "../triContainerComp/triContainerCompBuilder"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; -import { BoolControl } from "comps/controls/boolControl"; -import { useContext, useEffect, useRef, useState } from "react"; -import { EditorContext } from "comps/editorState"; -import { Card } from "antd"; -import styled from "styled-components"; -import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants"; -import { MultiCompBuilder, withDefault } from "comps/generators"; -import { IconControl } from "comps/controls/iconControl"; -import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl"; -import { optionsControl } from "comps/controls/optionsControl"; -import { dropdownControl } from "comps/controls/dropdownControl"; -import { styleControl } from "comps/controls/styleControl"; -const { Meta } = Card; + NameConfigHidden, + withExposingConfigs, +} from 'comps/generators/withExposing'; +import {Section, sectionNames} from 'lowcoder-design'; +import {TriContainer} from '../triContainerComp/triContainer'; +import {ContainerCompBuilder} from '../triContainerComp/triContainerCompBuilder'; +import { + disabledPropertyView, + hiddenPropertyView, +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {BoolCodeControl, StringControl} from 'comps/controls/codeControl'; +import {BoolControl} from 'comps/controls/boolControl'; +import {useContext, useEffect, useRef, useState} from 'react'; +import {EditorContext} from 'comps/editorState'; +import {Card} from 'antd'; +import styled from 'styled-components'; +import { + AnimationStyle, + AnimationStyleType, + CardHeaderStyle, + CardHeaderStyleType, + CardStyle, + CardStyleType, +} from 'comps/controls/styleControlConstants'; +import {MultiCompBuilder, withDefault} from 'comps/generators'; +import {IconControl} from 'comps/controls/iconControl'; +import { + ButtonEventHandlerControl, + CardEventHandlerControl, + clickEvent, + refreshEvent, +} from 'comps/controls/eventHandlerControl'; +import {optionsControl} from 'comps/controls/optionsControl'; +import {dropdownControl} from 'comps/controls/dropdownControl'; +import {styleControl} from 'comps/controls/styleControl'; +const {Meta} = Card; -const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>` +const Warpper = styled.div<{ + $style: CardStyleType | undefined; + $showMate: boolean; + $cardType: string; + $headerStyle: CardHeaderStyleType; + $bodyStyle: CardHeaderStyleType; + $animationStyle: AnimationStyleType; +}>` height: 100%; width: 100%; - .ant-card-small >.ant-card-head { - background-color: ${props => props.$headerStyle?.background} !important; - border: ${props => props.$headerStyle?.border}; - border-style: ${props => props.$headerStyle?.borderStyle}; - border-width: ${props => props.$headerStyle?.borderWidth}; - border-radius: ${props => props.$headerStyle?.radius}; - font-size: ${props => props.$headerStyle?.textSize}; - font-style: ${props => props.$headerStyle?.fontStyle}; - font-family: ${props => props.$headerStyle?.fontFamily}; - font-weight: ${props => props.$headerStyle?.textWeight}; - text-transform: ${props => props.$headerStyle?.textTransform}; - text-decoration: ${props => props.$headerStyle?.textDecoration}; - color: ${props => props.$headerStyle?.text}; - rotate: ${props => props.$headerStyle?.rotation}; - margin: ${props => props.$headerStyle?.margin}; - padding: ${props => props.$headerStyle?.padding}; + .ant-card-small > .ant-card-head { + background-color: ${(props) => props.$headerStyle?.background} !important; + border: ${(props) => props.$headerStyle?.border}; + border-style: ${(props) => props.$headerStyle?.borderStyle}; + border-width: ${(props) => props.$headerStyle?.borderWidth}; + border-radius: ${(props) => props.$headerStyle?.radius}; + font-size: ${(props) => props.$headerStyle?.textSize}; + font-style: ${(props) => props.$headerStyle?.fontStyle}; + font-family: ${(props) => props.$headerStyle?.fontFamily}; + font-weight: ${(props) => props.$headerStyle?.textWeight}; + text-transform: ${(props) => props.$headerStyle?.textTransform}; + text-decoration: ${(props) => props.$headerStyle?.textDecoration}; + color: ${(props) => props.$headerStyle?.text}; + rotate: ${(props) => props.$headerStyle?.rotation}; + margin: ${(props) => props.$headerStyle?.margin}; + padding: ${(props) => props.$headerStyle?.padding}; } .ant-card .ant-card-actions { - border-top: 1px solid ${props => props.$style?.border}; + border-top: 1px solid ${(props) => props.$style?.border}; } - .ant-card .ant-card-actions>li:not(:last-child) { - border-inline-end: 1px solid ${props => props.$style?.border}; + .ant-card .ant-card-actions > li:not(:last-child) { + border-inline-end: 1px solid ${(props) => props.$style?.border}; } .ant-card .ant-card-actions { - background-color: ${props => props.$style?.background}; + background-color: ${(props) => props.$style?.background}; } .ant-card .ant-card-body { - background-color: ${props => props.$bodyStyle?.background} !important; - border: ${props => props.$bodyStyle?.border}; - border-style: ${props => props.$bodyStyle?.borderStyle}; - border-width: ${props => props.$bodyStyle?.borderWidth}; - border-radius: ${props => props.$bodyStyle?.radius}; - rotate: ${props => props.$bodyStyle?.rotation}; - margin: ${props => props.$bodyStyle?.margin}; - padding: ${props => props.$bodyStyle?.padding}; + background-color: ${(props) => props.$bodyStyle?.background} !important; + border: ${(props) => props.$bodyStyle?.border}; + border-style: ${(props) => props.$bodyStyle?.borderStyle}; + border-width: ${(props) => props.$bodyStyle?.borderWidth}; + border-radius: ${(props) => props.$bodyStyle?.radius}; + rotate: ${(props) => props.$bodyStyle?.rotation}; + margin: ${(props) => props.$bodyStyle?.margin}; + padding: ${(props) => props.$bodyStyle?.padding}; } .ant-card { display: flex; flex-direction: column; justify-content: space-between; - background-color: ${props => props.$style?.background}; - border: ${props => props.$style?.border}; - border-style: ${props => props.$style?.borderStyle}; - border-radius: ${props => props.$style?.radius}; - border-width: ${props => props.$style?.borderWidth}; + background-color: ${(props) => props.$style?.background}; + border: ${(props) => props.$style?.border}; + border-style: ${(props) => props.$style?.borderStyle}; + border-radius: ${(props) => props.$style?.radius}; + border-width: ${(props) => props.$style?.borderWidth}; + ${(props) => props.$animationStyle} } .ant-card-body { - display: ${props => props.$showMate ? '' : 'none'}; - height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'}; + display: ${(props) => (props.$showMate ? '' : 'none')}; + height: ${(props) => (props.$cardType == 'custom' ? '100%' : 'auto')}; } - .ant-card-body .ant-card-meta .ant-card-meta-title{ - color: ${props => props.$bodyStyle?.text} !important; - font-size: ${props => props.$bodyStyle?.textSize}; - font-style: ${props => props.$bodyStyle?.fontStyle}; - font-family: ${props => props.$bodyStyle?.fontFamily}; - font-weight: ${props => props.$bodyStyle?.textWeight}; - text-transform: ${props => props.$bodyStyle?.textTransform}; - text-decoration: ${props => props.$bodyStyle?.textDecoration}; + .ant-card-body .ant-card-meta .ant-card-meta-title { + color: ${(props) => props.$bodyStyle?.text} !important; + font-size: ${(props) => props.$bodyStyle?.textSize}; + font-style: ${(props) => props.$bodyStyle?.fontStyle}; + font-family: ${(props) => props.$bodyStyle?.fontFamily}; + font-weight: ${(props) => props.$bodyStyle?.textWeight}; + text-transform: ${(props) => props.$bodyStyle?.textTransform}; + text-decoration: ${(props) => props.$bodyStyle?.textDecoration}; } - .ant-card-body .ant-card-meta .ant-card-meta-description{ - color: ${props => props.$bodyStyle?.text} !important; - font-size: ${props => props.$bodyStyle?.textSize}; - font-style: ${props => props.$bodyStyle?.fontStyle}; - font-family: ${props => props.$bodyStyle?.fontFamily}; - font-weight: ${props => props.$bodyStyle?.textWeight}; - text-transform: ${props => props.$bodyStyle?.textTransform}; - text-decoration: ${props => props.$bodyStyle?.textDecoration}; + .ant-card-body .ant-card-meta .ant-card-meta-description { + color: ${(props) => props.$bodyStyle?.text} !important; + font-size: ${(props) => props.$bodyStyle?.textSize}; + font-style: ${(props) => props.$bodyStyle?.fontStyle}; + font-family: ${(props) => props.$bodyStyle?.fontFamily}; + font-weight: ${(props) => props.$bodyStyle?.textWeight}; + text-transform: ${(props) => props.$bodyStyle?.textTransform}; + text-decoration: ${(props) => props.$bodyStyle?.textDecoration}; } `; const ContainWarpper = styled.div` height: 100%; width: 100%; -` +`; -const IconWarpper = styled.div<{ $style: CardStyleType | undefined, disabled: boolean }>` - pointer-events: ${props => props.disabled ? 'none' : ''}; +const IconWarpper = styled.div<{ + $style: CardStyleType | undefined; + disabled: boolean; +}>` + pointer-events: ${(props) => (props.disabled ? 'none' : '')}; svg { - color: ${props => props.disabled ? '#d9d9d9' : props.$style?.IconColor}; + color: ${(props) => (props.disabled ? '#d9d9d9' : props.$style?.IconColor)}; } &:hover { svg { - color: ${props => props.$style?.activateColor}; + color: ${(props) => props.$style?.activateColor}; } -} -` + } +`; const cardTypeOption = [ - { label: trans("card.common"), value: "common" }, - { label: trans("card.custom"), value: "custom" }, + {label: trans('card.common'), value: 'common'}, + {label: trans('card.custom'), value: 'custom'}, ] as const; const sizeOptions = [ - { label: trans("card.default"), value: "default" }, - { label: trans("card.small"), value: "small" }, + {label: trans('card.default'), value: 'default'}, + {label: trans('card.small'), value: 'small'}, ] as const; const EventOptions = [clickEvent, refreshEvent] as const; @@ -127,7 +154,7 @@ const EventOptions = [clickEvent, refreshEvent] as const; const ActionIconOption = new MultiCompBuilder( { label: StringControl, - icon: withDefault(IconControl, "/icon:antd/settingoutlined"), + icon: withDefault(IconControl, '/icon:antd/settingoutlined'), disabled: BoolCodeControl, hidden: BoolCodeControl, onEvent: ButtonEventHandlerControl, @@ -136,7 +163,7 @@ const ActionIconOption = new MultiCompBuilder( ) .setPropertyViewFn((children) => ( <> - {children.icon.propertyView({ label: trans("button.icon") })} + {children.icon.propertyView({label: trans('button.icon')})} {disabledPropertyView(children)} {hiddenPropertyView(children)} {children.onEvent.getPropertyView()} @@ -146,9 +173,18 @@ const ActionIconOption = new MultiCompBuilder( const ActionOptionControl = optionsControl(ActionIconOption, { initOptions: [ - { label: trans("optionsControl.optionI", { i: 1 }), icon: "/icon:antd/settingoutlined" }, - { label: trans("optionsControl.optionI", { i: 2 }), icon: "/icon:antd/editoutlined" }, - { label: trans("optionsControl.optionI", { i: 3 }), icon: "/icon:antd/ellipsisoutlined" }, + { + label: trans('optionsControl.optionI', {i: 1}), + icon: '/icon:antd/settingoutlined', + }, + { + label: trans('optionsControl.optionI', {i: 2}), + icon: '/icon:antd/editoutlined', + }, + { + label: trans('optionsControl.optionI', {i: 3}), + icon: '/icon:antd/ellipsisoutlined', + }, ], }); @@ -160,7 +196,10 @@ export const ContainerBaseComp = (function () { extraTitle: withDefault(StringControl, trans('card.more')), cardType: dropdownControl(cardTypeOption, 'common'), CoverImg: BoolControl.DEFAULT_TRUE, - imgSrc: withDefault(StringControl, "https://lowcoder.cloud/images/e0a89736c6be4393893d2981ac1fd753.png"), + imgSrc: withDefault( + StringControl, + 'https://lowcoder.cloud/images/e0a89736c6be4393893d2981ac1fd753.png' + ), imgHeight: withDefault(StringControl, 'auto'), showMeta: BoolControl.DEFAULT_TRUE, metaTitle: withDefault(StringControl, trans('card.metaTitle')), @@ -173,6 +212,7 @@ export const ContainerBaseComp = (function () { style: styleControl(CardStyle), headerStyle: styleControl(CardHeaderStyle), bodyStyle: styleControl(CardHeaderStyle), + animationStyle: styleControl(AnimationStyle), }; return new ContainerCompBuilder(childrenMap, (props, dispatch) => { @@ -182,7 +222,7 @@ export const ContainerBaseComp = (function () { CONTAINER_BODY_PADDING: props.style.containerBodyPadding, border: '#00000000', background: props.style.background, - }) + }); const conRef = useRef(null); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); @@ -202,6 +242,7 @@ export const ContainerBaseComp = (function () { props.onEvent('blur')} onClick={() => props.onEvent('click')} > - { props.onEvent('clickExtra')}>{props.extraTitle}} - - // 内容 - cover={props.cardType == 'common' && props.CoverImg && } - actions={props.cardType == 'common' && props.showActionIcon ? - props.actionOptions.filter(item => !item.hidden).map(item => { - return ( - item.onEvent('click')} - disabled={item.disabled} - $style={props.style} - > - {item.icon} - ) + { + props.onEvent('clickExtra')}> + {props.extraTitle} + + ) + } + // 内容 + cover={ + props.cardType == 'common' && + props.CoverImg && ( + + ) } - ) : [] - } - > - {props.cardType == 'common' && props.showMeta && } - {props.cardType == 'custom' && - } - + actions={ + props.cardType == 'common' && props.showActionIcon + ? props.actionOptions + .filter((item) => !item.hidden) + .map((item) => { + return ( + item.onEvent('click')} + disabled={item.disabled} + $style={props.style} + > + {item.icon} + + ); + }) + : [] + } + > + {props.cardType == 'common' && props.showMeta && ( + + )} + {props.cardType == 'custom' && ( + + + + )} + } @@ -246,56 +307,60 @@ export const ContainerBaseComp = (function () { .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( <>
{children.size.propertyView({ - label: trans("card.titleSize"), + label: trans('card.titleSize'), radioButton: true, })} - {children.showTitle.propertyView({ label: trans('card.showTitle') })} - {children.showTitle.getView() && children.title.propertyView({ label: trans('card.title') })} - {children.showTitle.getView() && children.extraTitle.propertyView({ label: trans('card.extraTitle') })} - { - children.cardType.getView() == 'common' && - children.CoverImg.propertyView({ label: trans('card.CoverImg') }) - } + {children.showTitle.propertyView({ + label: trans('card.showTitle'), + })} + {children.showTitle.getView() && + children.title.propertyView({label: trans('card.title')})} + {children.showTitle.getView() && + children.extraTitle.propertyView({ + label: trans('card.extraTitle'), + })} + {children.cardType.getView() == 'common' && + children.CoverImg.propertyView({ + label: trans('card.CoverImg'), + })} - { - children.cardType.getView() == 'common' && + {children.cardType.getView() == 'common' && children.CoverImg.getView() && - children.imgSrc.propertyView({ label: trans('card.imgSrc') }) - } - { - children.cardType.getView() == 'common' && + children.imgSrc.propertyView({label: trans('card.imgSrc')})} + {children.cardType.getView() == 'common' && children.CoverImg.getView() && - children.imgHeight.propertyView({ label: trans('card.imgHeight') }) - } - { - children.cardType.getView() == 'common' && - children.showMeta.propertyView({ label: trans('card.showMeta') }) - } - { - children.cardType.getView() == 'common' && + children.imgHeight.propertyView({ + label: trans('card.imgHeight'), + })} + {children.cardType.getView() == 'common' && + children.showMeta.propertyView({ + label: trans('card.showMeta'), + })} + {children.cardType.getView() == 'common' && children.showMeta.getView() && - children.metaTitle.propertyView({ label: trans('card.metaTitle') }) - } - { - children.cardType.getView() == 'common' && + children.metaTitle.propertyView({ + label: trans('card.metaTitle'), + })} + {children.cardType.getView() == 'common' && children.showMeta.getView() && - children.metaDesc.propertyView({ label: trans('card.metaDesc') }) - } + children.metaDesc.propertyView({ + label: trans('card.metaDesc'), + })} - { - children.cardType.getView() == 'common' && - children.showActionIcon.propertyView({ label: trans('card.showActionIcon') }) - } - { - children.cardType.getView() == 'common' && + {children.cardType.getView() == 'common' && + children.showActionIcon.propertyView({ + label: trans('card.showActionIcon'), + })} + {children.cardType.getView() == 'common' && children.showActionIcon.getView() && - children.actionOptions.propertyView({ title: trans('card.actionOptions') }) - } - + children.actionOptions.propertyView({ + title: trans('card.actionOptions'), + })}
{hiddenPropertyView(children)} @@ -304,11 +369,12 @@ export const ContainerBaseComp = (function () { )} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( <>
{children.cardType.propertyView({ - label: trans("card.cardType"), + label: trans('card.cardType'), radioButton: true, })}
@@ -321,6 +387,9 @@ export const ContainerBaseComp = (function () {
{children.bodyStyle.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -329,5 +398,6 @@ export const ContainerBaseComp = (function () { .build(); })(); -export const CardComp = withExposingConfigs(ContainerBaseComp, [NameConfigHidden]); - +export const CardComp = withExposingConfigs(ContainerBaseComp, [ + NameConfigHidden, +]); diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index d088a51c0..33821bea5 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -1,72 +1,86 @@ -import { CompParams } from "lowcoder-core"; -import { ToDataType } from "comps/generators/multi"; -import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; -import { NameGenerator } from "comps/utils/nameGenerator"; -import { Section, sectionNames } from "lowcoder-design"; -import { oldContainerParamsToNew } from "../containerBase"; -import { toSimpleContainerData } from "../containerBase/simpleContainerComp"; -import { TriContainer } from "../triContainerComp/triContainer"; +import {CompParams} from 'lowcoder-core'; +import {ToDataType} from 'comps/generators/multi'; +import { + NameConfigHidden, + withExposingConfigs, +} from 'comps/generators/withExposing'; +import {NameGenerator} from 'comps/utils/nameGenerator'; +import {Section, sectionNames} from 'lowcoder-design'; +import {oldContainerParamsToNew} from '../containerBase'; +import {toSimpleContainerData} from '../containerBase/simpleContainerComp'; +import {TriContainer} from '../triContainerComp/triContainer'; import { ContainerChildren, ContainerCompBuilder, -} from "../triContainerComp/triContainerCompBuilder"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { BoolCodeControl } from "comps/controls/codeControl"; -import { DisabledContext } from "comps/generators/uiCompBuilder"; -import React, { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +} from '../triContainerComp/triContainerCompBuilder'; +import { + disabledPropertyView, + hiddenPropertyView, +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {BoolCodeControl} from 'comps/controls/codeControl'; +import {DisabledContext} from 'comps/generators/uiCompBuilder'; +import React, {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; +import {AnimationStyle, styleControl} from '@lowcoder-ee/index.sdk'; export const ContainerBaseComp = (function () { const childrenMap = { disabled: BoolCodeControl, + animationStyle: styleControl(AnimationStyle), }; return new ContainerCompBuilder(childrenMap, (props, dispatch) => { return ( - + ); }) .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
{disabledPropertyView(children)} {hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {children.container.getPropertyView()} -
-
- { children.container.stylePropertyView() } -
- {children.container.children.showHeader.getView() && ( -
- { children.container.headerStylePropertyView() } + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.container.getPropertyView()}
- )} - {children.container.children.showBody.getView() && ( -
- { children.container.bodyStylePropertyView() } +
+ {children.container.stylePropertyView()}
- )} - {children.container.children.showFooter.getView() && ( -
- { children.container.footerStylePropertyView() } +
+ {children.animationStyle.getPropertyView()}
- )} + {children.container.children.showHeader.getView() && ( +
+ {children.container.headerStylePropertyView()} +
+ )} + {children.container.children.showBody.getView() && ( +
+ {children.container.bodyStylePropertyView()} +
+ )} + {children.container.children.showFooter.getView() && ( +
+ {children.container.footerStylePropertyView()} +
+ )} )} ); }) .build(); -})(); +})(); // Compatible with old data function convertOldContainerParams(params: CompParams) { @@ -76,7 +90,10 @@ function convertOldContainerParams(params: CompParams) { if (tempParams.value) { const container = tempParams.value.container; // old params - if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) { + if ( + container && + (container.hasOwnProperty('layout') || container.hasOwnProperty('items')) + ) { const autoHeight = tempParams.value.autoHeight; const scrollbars = tempParams.value.scrollbars; return { @@ -84,7 +101,7 @@ function convertOldContainerParams(params: CompParams) { value: { container: { showHeader: true, - body: { 0: { view: container } }, + body: {0: {view: container}}, showBody: true, showFooter: false, autoHeight: autoHeight, @@ -103,7 +120,9 @@ class ContainerTmpComp extends ContainerBaseComp { } } -export const ContainerComp = withExposingConfigs(ContainerTmpComp, [NameConfigHidden]); +export const ContainerComp = withExposingConfigs(ContainerTmpComp, [ + NameConfigHidden, +]); type ContainerDataType = ToDataType>; @@ -116,14 +135,14 @@ export function defaultContainerData( header: toSimpleContainerData([ { item: { - compType: "text", - name: nameGenerator.genItemName("containerTitle"), + compType: 'text', + name: nameGenerator.genItemName('containerTitle'), comp: { - text: "### " + trans("container.title"), + text: '### ' + trans('container.title'), }, }, layoutItem: { - i: "", + i: '', h: 5, w: 24, x: 0, diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index 489398a94..14b2eedaf 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -1,83 +1,102 @@ -import { CompParams } from "lowcoder-core"; -import { ToDataType } from "comps/generators/multi"; -import { NameConfigDisabled, NameConfigHidden, withExposingConfigs, NameConfig, CompDepsConfig } from "comps/generators/withExposing"; -import { withMethodExposing } from "comps/generators/withMethodExposing"; -import { NameGenerator } from "comps/utils/nameGenerator"; -import { Section, sectionNames } from "lowcoder-design"; -import { oldContainerParamsToNew } from "../containerBase"; -import { toSimpleContainerData } from "../containerBase/simpleContainerComp"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { BoolCodeControl } from "comps/controls/codeControl"; -import { DisabledContext } from "comps/generators/uiCompBuilder"; -import React, { useContext, useEffect, useState } from "react"; -import { EditorContext } from "comps/editorState"; +import {CompParams} from 'lowcoder-core'; +import {ToDataType} from 'comps/generators/multi'; +import { + NameConfigDisabled, + NameConfigHidden, + withExposingConfigs, + NameConfig, + CompDepsConfig, +} from 'comps/generators/withExposing'; +import {withMethodExposing} from 'comps/generators/withMethodExposing'; +import {NameGenerator} from 'comps/utils/nameGenerator'; +import {Section, sectionNames} from 'lowcoder-design'; +import {oldContainerParamsToNew} from '../containerBase'; +import {toSimpleContainerData} from '../containerBase/simpleContainerComp'; +import { + disabledPropertyView, + hiddenPropertyView, +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {BoolCodeControl} from 'comps/controls/codeControl'; +import {DisabledContext} from 'comps/generators/uiCompBuilder'; +import React, {useContext, useEffect, useState} from 'react'; +import {EditorContext} from 'comps/editorState'; import { ContainerChildren, ContainerCompBuilder, -} from "../pageLayoutComp/pageLayoutCompBuilder"; -import { PageLayout } from "../pageLayoutComp/pageLayout"; - +} from '../pageLayoutComp/pageLayoutCompBuilder'; +import {PageLayout} from '../pageLayoutComp/pageLayout'; +import {AnimationStyle, styleControl} from '@lowcoder-ee/index.sdk'; export const ContainerBaseComp = (function () { - const childrenMap = { - disabled: BoolCodeControl + const childrenMap = { + disabled: BoolCodeControl, + animationStyle: styleControl(AnimationStyle), }; return new ContainerCompBuilder(childrenMap, (props, dispatch) => { - const [siderCollapsed, setSiderCollapsed] = useState(false); return ( - + ); }) .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
{disabledPropertyView(children)} {hiddenPropertyView(children)} - { children.container.appSelectorPropertyView()} + {children.container.appSelectorPropertyView()}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {children.container.getPropertyView()} -
-
- { children.container.stylePropertyView() } -
- {children.container.children.showHeader.getView() && ( -
- { children.container.headerStylePropertyView() } + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.container.getPropertyView()}
- )} - {children.container.children.showSider.getView() && ( -
- { children.container.siderStylePropertyView() } +
+ {children.container.stylePropertyView()}
- )} -
- { children.container.bodyStylePropertyView() } -
- {children.container.children.showFooter.getView() && ( -
- { children.container.footerStylePropertyView() } +
+ {children.animationStyle.getPropertyView()}
- )} + {children.container.children.showHeader.getView() && ( +
+ {children.container.headerStylePropertyView()} +
+ )} + {children.container.children.showSider.getView() && ( +
+ {children.container.siderStylePropertyView()} +
+ )} +
+ {children.container.bodyStylePropertyView()} +
+ {children.container.children.showFooter.getView() && ( +
+ {children.container.footerStylePropertyView()} +
+ )} )} ); }) .build(); -})(); +})(); // Compatible with old data function convertOldContainerParams(params: CompParams) { @@ -87,7 +106,10 @@ function convertOldContainerParams(params: CompParams) { if (tempParams.value) { const container = tempParams.value.container; // old params - if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) { + if ( + container && + (container.hasOwnProperty('layout') || container.hasOwnProperty('items')) + ) { const autoHeight = tempParams.value.autoHeight; const scrollbars = tempParams.value.scrollbars; return { @@ -95,7 +117,7 @@ function convertOldContainerParams(params: CompParams) { value: { container: { showHeader: true, - body: { 0: { view: container } }, + body: {0: {view: container}}, showFooter: false, showSider: true, autoHeight: autoHeight, @@ -108,7 +130,6 @@ function convertOldContainerParams(params: CompParams) { return tempParams; } - class ContainerTmpComp extends ContainerBaseComp { constructor(params: CompParams) { super(convertOldContainerParams(params)); @@ -119,21 +140,23 @@ const PageLayoutCompTmP = withExposingConfigs(ContainerTmpComp, [ NameConfigHidden, NameConfigDisabled, - new NameConfig("container", trans("export.ratingValueDesc")), + new NameConfig('container', trans('export.ratingValueDesc')), new CompDepsConfig( - "siderCollapsed", - (comp) => ({ data : comp.children.container.children.siderCollapsed.nodeWithoutCache()}), - (input) => input.data.value, trans("listView.itemsDesc") + 'siderCollapsed', + (comp) => ({ + data: comp.children.container.children.siderCollapsed.nodeWithoutCache(), + }), + (input) => input.data.value, + trans('listView.itemsDesc') ), ]); export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [ - { method: { - name: "setSiderCollapsed", - description: "Set the Sider of the PageLayout to be collapsed or not", - params: [{ name: "collapsed", type: "boolean" }], + name: 'setSiderCollapsed', + description: 'Set the Sider of the PageLayout to be collapsed or not', + params: [{name: 'collapsed', type: 'boolean'}], }, execute: (comp, values) => { const page = values[0] as number; @@ -141,7 +164,7 @@ export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [ // comp.children.pagination.children.pageNo.dispatchChangeValueAction(page); } }, - } + }, ]); type ContainerDataType = ToDataType>; @@ -155,36 +178,36 @@ export function defaultPageLayoutData( header: toSimpleContainerData([ { item: { - compType: "navigation", - name: nameGenerator.genItemName("pageNavigation"), + compType: 'navigation', + name: nameGenerator.genItemName('pageNavigation'), comp: { - logoUrl: "", + logoUrl: '', hidden: false, items: [ { - label: "Home", + label: 'Home', hidden: false, active: false, }, { - label: "Services", + label: 'Services', hidden: false, active: false, items: [ { - label: "Lowcode Platform", + label: 'Lowcode Platform', hidden: false, active: false, }, { - label: "App Development", + label: 'App Development', hidden: false, active: false, }, ], }, { - label: "About", + label: 'About', hidden: false, active: false, }, @@ -192,7 +215,7 @@ export function defaultPageLayoutData( }, }, layoutItem: { - i: "", + i: '', h: 6, w: 24, x: 0, diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx index 6681a9635..c3346fc40 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx @@ -1,68 +1,69 @@ -import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; -import { stringExposingStateControl } from "comps/controls/codeStateControl"; -import { ToDataType } from "comps/generators/multi"; +import {BoolCodeControl, StringControl} from 'comps/controls/codeControl'; +import {stringExposingStateControl} from 'comps/controls/codeStateControl'; +import {ToDataType} from 'comps/generators/multi'; import { NameConfigHidden, withExposingConfigs, -} from "comps/generators/withExposing"; -import { NameGenerator } from "comps/utils/nameGenerator"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { CompParams } from "lowcoder-core"; -import { Section, sectionNames } from "lowcoder-design"; -import { oldContainerParamsToNew } from "../containerBase"; -import { toSimpleContainerData } from "../containerBase/simpleContainerComp"; +} from 'comps/generators/withExposing'; +import {NameGenerator} from 'comps/utils/nameGenerator'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {CompParams} from 'lowcoder-core'; +import {Section, sectionNames} from 'lowcoder-design'; +import {oldContainerParamsToNew} from '../containerBase'; +import {toSimpleContainerData} from '../containerBase/simpleContainerComp'; import { ContainerChildren, ContainerCompBuilder, -} from "../triContainerComp/triContainerCompBuilder"; -import { TriContainer } from "../triContainerComp/triFloatTextContainer"; -import { dropdownControl } from "comps/controls/dropdownControl"; -import { withDefault } from "comps/generators/simpleGenerators"; -import { styleControl } from "comps/controls/styleControl"; -import { TextStyle } from "comps/controls/styleControlConstants"; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; -import { alignWithJustifyControl } from "comps/controls/alignControl"; +} from '../triContainerComp/triContainerCompBuilder'; +import {TriContainer} from '../triContainerComp/triFloatTextContainer'; +import {dropdownControl} from 'comps/controls/dropdownControl'; +import {withDefault} from 'comps/generators/simpleGenerators'; +import {styleControl} from 'comps/controls/styleControl'; +import {AnimationStyle, TextStyle} from 'comps/controls/styleControlConstants'; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; +import {alignWithJustifyControl} from 'comps/controls/alignControl'; const typeOptions = [ { - label: "Markdown", - value: "markdown", + label: 'Markdown', + value: 'markdown', }, { - label: trans("text"), - value: "text", + label: trans('text'), + value: 'text', }, ] as const; const floatOptions = [ { - label: "None", - value: "none", + label: 'None', + value: 'none', }, { - label: "Right", - value: "right", + label: 'Right', + value: 'right', }, { - label: "Left", - value: "left", + label: 'Left', + value: 'left', }, ] as const; - export const ContainerBaseComp = (function () { const childrenMap = { disabled: BoolCodeControl, text: stringExposingStateControl( - "text", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat faucibus eleifend. Pellentesque eleifend, risus vel sagittis mattis, mauris ipsum tempor sapien, eu lobortis lacus libero a dui. Cras erat felis, rhoncus vestibulum consectetur et, ultrices ut purus. Sed a tortor orci. Vestibulum nec eleifend ante." + 'text', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat faucibus eleifend. Pellentesque eleifend, risus vel sagittis mattis, mauris ipsum tempor sapien, eu lobortis lacus libero a dui. Cras erat felis, rhoncus vestibulum consectetur et, ultrices ut purus. Sed a tortor orci. Vestibulum nec eleifend ante.' ), - type: dropdownControl(typeOptions, "markdown"), - float: dropdownControl(floatOptions, "left"), + type: dropdownControl(typeOptions, 'markdown'), + float: dropdownControl(floatOptions, 'left'), horizontalAlignment: alignWithJustifyControl(), - width: withDefault(StringControl, "40"), + width: withDefault(StringControl, '40'), style: styleControl(TextStyle), + animationStyle: styleControl(AnimationStyle), }; return new ContainerCompBuilder(childrenMap, (props, dispatch) => { return ; @@ -71,46 +72,61 @@ export const ContainerBaseComp = (function () { return ( <>
- {children.type.propertyView({label: trans("value"), tooltip: trans("textShow.valueTooltip"), radioButton: true,})} + {children.type.propertyView({ + label: trans('value'), + tooltip: trans('textShow.valueTooltip'), + radioButton: true, + })} {children.text.propertyView({})}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && (
{hiddenPropertyView(children)}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <>
{children.container.getPropertyView()} - {children.width.propertyView({label: trans("container.flowWidth")})} - {children.float.propertyView({ label: trans("container.floatType"), radioButton: true, + {children.width.propertyView({ + label: trans('container.flowWidth'), + })} + {children.float.propertyView({ + label: trans('container.floatType'), + radioButton: true, })} {children.horizontalAlignment.propertyView({ - label: trans("textShow.horizontalAlignment"), + label: trans('textShow.horizontalAlignment'), radioButton: true, })}
-
+
{children.style.getPropertyView()}
-
+
+ {children.animationStyle.getPropertyView()} +
+
{children.container.stylePropertyView()}
{children.container.children.showHeader.getView() && ( -
- { children.container.headerStylePropertyView() } +
+ {children.container.headerStylePropertyView()}
)} {children.container.children.showBody.getView() && ( -
- { children.container.bodyStylePropertyView() } +
+ {children.container.bodyStylePropertyView()}
)} {children.container.children.showFooter.getView() && ( -
- { children.container.footerStylePropertyView() } +
+ {children.container.footerStylePropertyView()}
)} @@ -131,7 +147,7 @@ function convertOldContainerParams(params: CompParams) { // old params if ( container && - (container.hasOwnProperty("layout") || container.hasOwnProperty("items")) + (container.hasOwnProperty('layout') || container.hasOwnProperty('items')) ) { const autoHeight = tempParams.value.autoHeight; return { @@ -139,7 +155,7 @@ function convertOldContainerParams(params: CompParams) { value: { container: { showHeader: false, - body: { 0: { view: container } }, + body: {0: {view: container}}, showBody: true, showFooter: false, autoHeight: autoHeight, @@ -172,21 +188,21 @@ export function defaultContainerData( header: toSimpleContainerData([ { item: { - compType: "text", - name: nameGenerator.genItemName("containerTitle"), + compType: 'text', + name: nameGenerator.genItemName('containerTitle'), comp: { - text: "### " + trans("container.title"), + text: '### ' + trans('container.title'), }, }, layoutItem: { - i: "", + i: '', h: 5, w: 24, x: 0, y: 0, }, }, - ]) + ]), }, }; } diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx index 9201b4f23..2161d1943 100644 --- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx @@ -3,12 +3,12 @@ import { depsConfig, NameConfig, withExposingConfigs, -} from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; -import { genQueryId } from "comps/utils/idGenerator"; -import { CompNameContext, EditorContext, EditorState } from "comps/editorState"; -import { withMethodExposing } from "comps/generators/withMethodExposing"; -import { ContainerPlaceholder } from "lowcoder-design"; +} from 'comps/generators/withExposing'; +import {Section, sectionNames} from 'lowcoder-design'; +import {genQueryId} from 'comps/utils/idGenerator'; +import {CompNameContext, EditorContext, EditorState} from 'comps/editorState'; +import {withMethodExposing} from 'comps/generators/withMethodExposing'; +import {ContainerPlaceholder} from 'lowcoder-design'; import { CompAction, CompActionTypes, @@ -20,44 +20,48 @@ import { RecordConstructorToView, ValueAndMsg, wrapChildAction, -} from "lowcoder-core"; -import { NameGenerator } from "comps/utils"; -import _ from "lodash"; -import { CreateData, CreateForm } from "./createForm"; -import { defaultLayout, GridItemComp } from "../gridItemComp"; -import { ReactNode, useContext } from "react"; -import { pushAction } from "comps/generators/list"; -import { FullColumnInfo } from "./generate/dataSourceCommon"; -import { eventHandlerControl, submitEvent } from "comps/controls/eventHandlerControl"; +} from 'lowcoder-core'; +import {NameGenerator} from 'comps/utils'; +import _ from 'lodash'; +import {CreateData, CreateForm} from './createForm'; +import {defaultLayout, GridItemComp} from '../gridItemComp'; +import {ReactNode, useContext} from 'react'; +import {pushAction} from 'comps/generators/list'; +import {FullColumnInfo} from './generate/dataSourceCommon'; +import { + eventHandlerControl, + submitEvent, +} from 'comps/controls/eventHandlerControl'; import { simpleContainerAddAction, toSimpleContainerData, -} from "../containerBase/simpleContainerComp"; +} from '../containerBase/simpleContainerComp'; import { ContainerCompBuilder, TriContainerViewProps, -} from "../triContainerComp/triContainerCompBuilder"; -import { TriContainer } from "../triContainerComp/triContainer"; -import { traverseCompTree } from "../containerBase/utils"; -import { IForm } from "./formDataConstants"; -import { default as Spin } from "antd/lib/spin"; -import { BoolControl } from "comps/controls/boolControl"; -import { BottomResTypeEnum } from "types/bottomRes"; -import { BoolCodeControl, JSONObjectControl } from "comps/controls/codeControl"; -import { JSONObject } from "util/jsonTypes"; -import { EvalParamType } from "comps/controls/actionSelector/executeCompTypes"; -import { LayoutItem } from "layout/utils"; +} from '../triContainerComp/triContainerCompBuilder'; +import {TriContainer} from '../triContainerComp/triContainer'; +import {traverseCompTree} from '../containerBase/utils'; +import {IForm} from './formDataConstants'; +import {default as Spin} from 'antd/lib/spin'; +import {BoolControl} from 'comps/controls/boolControl'; +import {BottomResTypeEnum} from 'types/bottomRes'; +import {BoolCodeControl, JSONObjectControl} from 'comps/controls/codeControl'; +import {JSONObject} from 'util/jsonTypes'; +import {EvalParamType} from 'comps/controls/actionSelector/executeCompTypes'; +import {LayoutItem} from 'layout/utils'; import { disabledPropertyView, hiddenPropertyView, loadingPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import log from "loglevel"; -import { DisabledContext } from "comps/generators/uiCompBuilder"; -import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined"; -import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"; -import { styled } from "styled-components"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import log from 'loglevel'; +import {DisabledContext} from 'comps/generators/uiCompBuilder'; +import {default as LoadingOutlined} from '@ant-design/icons/LoadingOutlined'; +import {messageInstance} from 'lowcoder-design/src/components/GlobalInstances'; +import {styled} from 'styled-components'; +import {AnimationStyle, styleControl} from '@lowcoder-ee/index.sdk'; const FormWrapper = styled.div` height: 100%; @@ -78,17 +82,22 @@ const childrenMap = { disableSubmit: BoolCodeControl, loading: BoolCodeControl, onEvent: eventHandlerControl(eventOptions), + animationStyle: styleControl(AnimationStyle), }; type FormProps = TriContainerViewProps & - RecordConstructorToView & { dispatch: DispatchType }; + RecordConstructorToView & {dispatch: DispatchType}; -function dispatchAsyncAddCompsAction(props: FormProps, columnInfos: FullColumnInfo[]) { - const { dispatch, layout, positionParams } = props.container.body[0].children.view.getView(); +function dispatchAsyncAddCompsAction( + props: FormProps, + columnInfos: FullColumnInfo[] +) { + const {dispatch, layout, positionParams} = + props.container.body[0].children.view.getView(); let y = 0; - const infos = columnInfos.map(({ column, compName }) => { + const infos = columnInfos.map(({column, compName}) => { const layoutItem: LayoutItem = { - i: "", + i: '', h: defaultLayout(column.comp.type).h, w: positionParams.cols, x: 0, @@ -102,7 +111,7 @@ function dispatchAsyncAddCompsAction(props: FormProps, columnInfos: FullColumnIn comp: { ...column.comp.compInitData, formDataKey: column.name, - label: { text: column.label }, + label: {text: column.label}, required: column.required, }, }, @@ -114,10 +123,10 @@ function dispatchAsyncAddCompsAction(props: FormProps, columnInfos: FullColumnIn function onEventData(queryName: string) { return { - name: "submit", + name: 'submit', handler: { - compType: "executeQuery", - comp: { queryName: queryName }, + compType: 'executeQuery', + comp: {queryName: queryName}, }, }; } @@ -128,21 +137,30 @@ function onCreate( editorState: EditorState, formName: string ): string { - const { dispatch } = props; + const {dispatch} = props; const nameGenerator = editorState.getNameGenerator(); const infos = data.columns.map((column) => { - const compName = nameGenerator.genItemName("form" + _.upperFirst(column.comp.type)); - return { column, compName }; + const compName = nameGenerator.genItemName( + 'form' + _.upperFirst(column.comp.type) + ); + return {column, compName}; }); dispatchAsyncAddCompsAction(props, infos); const tableName = data.tableName; - const lastName = tableName.substring(tableName.lastIndexOf(".") + 1); - const queryNamePrefix = formName + "SubmitTo" + lastName.split("_").map(_.upperFirst).join(""); + const lastName = tableName.substring(tableName.lastIndexOf('.') + 1); + const queryNamePrefix = + formName + 'SubmitTo' + lastName.split('_').map(_.upperFirst).join(''); const queryName = nameGenerator.genItemName(queryNamePrefix); - dispatch(deferAction(wrapChildAction("onEvent", pushAction(onEventData(queryName))))); + dispatch( + deferAction(wrapChildAction('onEvent', pushAction(onEventData(queryName)))) + ); - const queryData = data.dataSourceTypeConfig.getQueryInitData(formName, tableName, infos); + const queryData = data.dataSourceTypeConfig.getQueryInitData( + formName, + tableName, + infos + ); const queriesComp = editorState.getQueriesComp(); queriesComp.dispatch( deferAction( @@ -151,14 +169,14 @@ function onCreate( id: genQueryId(), name: queryName, datasourceId: data.dataSourceId, - triggerType: "manual", - notification: { showSuccess: true, showFail: true }, + triggerType: 'manual', + notification: {showSuccess: true, showFail: true}, }) ) ); editorState.setSelectedBottomRes(queryName, BottomResTypeEnum.Query); - return ""; + return ''; } const BodyPlaceholder = (props: FormProps) => { @@ -166,7 +184,7 @@ const BodyPlaceholder = (props: FormProps) => { const formName = useContext(CompNameContext); return ( - {trans("formComp.containerPlaceholder")} + {trans('formComp.containerPlaceholder')}
@@ -191,7 +209,9 @@ const FormBaseComp = (function () { > } + hintPlaceholder={ + + } /> @@ -202,21 +222,28 @@ const FormBaseComp = (function () { return ( <>
- {children.resetAfterSubmit.propertyView({ label: trans("formComp.resetAfterSubmit") })} + {children.resetAfterSubmit.propertyView({ + label: trans('formComp.resetAfterSubmit'), + })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} - {children.disableSubmit.propertyView({ label: trans("formComp.disableSubmit") })} + {children.disableSubmit.propertyView({ + label: trans('formComp.disableSubmit'), + })} {hiddenPropertyView(children)} {loadingPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( <>
{children.container.getPropertyView()} @@ -224,35 +251,41 @@ const FormBaseComp = (function () { )} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
- {children.initialData.propertyView({ label: trans("formComp.initialData") })} + {children.initialData.propertyView({ + label: trans('formComp.initialData'), + })}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( <>
{children.container.stylePropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
{children.container.children.showHeader.getView() && ( -
- { children.container.headerStylePropertyView() } +
+ {children.container.headerStylePropertyView()}
)} {children.container.children.showBody.getView() && ( -
- { children.container.bodyStylePropertyView() } +
+ {children.container.bodyStylePropertyView()}
)} {children.container.children.showFooter.getView() && ( -
- { children.container.footerStylePropertyView() } +
+ {children.container.footerStylePropertyView()}
)} )} - ); }) @@ -262,17 +295,19 @@ const FormBaseComp = (function () { type FormDataType = ConstructorToDataType; type SetDataAction = { - type: "setData"; + type: 'setData'; initialData: JSONObject; }; let FormTmpComp = class extends FormBaseComp implements IForm { onEventPropertyView(title: ReactNode) { - return this.children.onEvent.propertyView({ title }); + return this.children.onEvent.propertyView({title}); } traverseFormItems(consumer: (item: GridItemComp) => boolean) { return traverseCompTree(this.getCompTree(), (item) => { - return item.children.comp.children.formDataKey ? consumer(item as GridItemComp) : true; + return item.children.comp.children.formDataKey + ? consumer(item as GridItemComp) + : true; }); } validateFormItems() { @@ -303,9 +338,9 @@ let FormTmpComp = class extends FormBaseComp implements IForm { } const compType = item.children.compType.getView(); log.warn( - trans("form") + + trans('form') + compType + - trans("formComp.notSupportMethod") + + trans('formComp.notSupportMethod') + searchMethods.map((m) => m.name) ); return true; @@ -314,19 +349,24 @@ let FormTmpComp = class extends FormBaseComp implements IForm { } setData(data: JSONObject, initialData?: JSONObject) { // For the properties, first find in data, then initialData, subcomponent default value (resetValue), empty value (clearValue) - const newData = { ...(initialData ?? this.children.initialData.getView()), ...data }; + const newData = { + ...(initialData ?? this.children.initialData.getView()), + ...data, + }; return this.runMethodOfItems( { - name: "setValue", + name: 'setValue', getParams: (t) => { // use component name when formDataKey is empty - const key = t.children.comp.children.formDataKey?.getView() || t.children.name.getView(); + const key = + t.children.comp.children.formDataKey?.getView() || + t.children.name.getView(); const value = newData[key]; return value !== undefined ? [value as EvalParamType] : undefined; }, }, - { name: "resetValue" }, - { name: "clearValue" } + {name: 'resetValue'}, + {name: 'clearValue'} ); } reset() { @@ -334,10 +374,10 @@ let FormTmpComp = class extends FormBaseComp implements IForm { } submit() { if (this.disableSubmit()) { - return Promise.reject("disableSubmit"); + return Promise.reject('disableSubmit'); } if (this.validateFormItems()) { - const promise = this.children.onEvent.getView()("submit"); + const promise = this.children.onEvent.getView()('submit'); return promise.then(() => { if (this.children.resetAfterSubmit.getView()) { return this.reset(); @@ -345,12 +385,14 @@ let FormTmpComp = class extends FormBaseComp implements IForm { return Promise.resolve(); }); } else { - messageInstance.error(trans("formComp.notValidForm")); - return Promise.reject("formComp.notValidForm"); + messageInstance.error(trans('formComp.notValidForm')); + return Promise.reject('formComp.notValidForm'); } } disableSubmit() { - return this.children.disabled.getView() || this.children.disableSubmit.getView(); + return ( + this.children.disabled.getView() || this.children.disableSubmit.getView() + ); } override reduce(action: CompAction): this { switch (action.type) { @@ -363,8 +405,10 @@ let FormTmpComp = class extends FormBaseComp implements IForm { this.dispatch( customAction( { - type: "setData", - initialData: (action.value["initialData"] as ValueAndMsg).value || {}, + type: 'setData', + initialData: + (action.value['initialData'] as ValueAndMsg) + .value || {}, }, false ) @@ -374,7 +418,7 @@ let FormTmpComp = class extends FormBaseComp implements IForm { return ret; } case CompActionTypes.CUSTOM: - if (isMyCustomAction(action, "setData")) { + if (isMyCustomAction(action, 'setData')) { this.setData({}, action.value.initialData); return this; } @@ -386,41 +430,41 @@ let FormTmpComp = class extends FormBaseComp implements IForm { FormTmpComp = withMethodExposing(FormTmpComp, [ { method: { - name: "submit", - description: trans("export.submitDesc"), + name: 'submit', + description: trans('export.submitDesc'), params: [], }, execute: (comp, values) => comp.submit(), }, { method: { - name: "reset", - description: trans("formComp.resetDesc"), + name: 'reset', + description: trans('formComp.resetDesc'), params: [], }, execute: (comp, values) => comp.reset(), }, { method: { - name: "clear", - description: trans("formComp.clearDesc"), + name: 'clear', + description: trans('formComp.clearDesc'), params: [], }, - execute: (comp, values) => comp.runMethodOfItems({ name: "clearValue" }), + execute: (comp, values) => comp.runMethodOfItems({name: 'clearValue'}), }, { method: { - name: "setData", - description: trans("formComp.setDataDesc"), - params: [{ name: "data", type: "JSON" }], + name: 'setData', + description: trans('formComp.setDataDesc'), + params: [{name: 'data', type: 'JSON'}], }, execute: (comp, values) => { if (values.length !== 1) { - return Promise.reject(trans("formComp.valuesLengthError")); + return Promise.reject(trans('formComp.valuesLengthError')); } const data = values[0]; - if (typeof data !== "object" || data === null || Array.isArray(data)) { - return Promise.reject(trans("formComp.valueTypeError")); + if (typeof data !== 'object' || data === null || Array.isArray(data)) { + return Promise.reject(trans('formComp.valueTypeError')); } return comp.setData(data); }, @@ -429,31 +473,34 @@ FormTmpComp = withMethodExposing(FormTmpComp, [ export const FormComp = withExposingConfigs(FormTmpComp, [ ...CommonNameConfig, - new NameConfig("loading", trans("formComp.loadingDesc")), + new NameConfig('loading', trans('formComp.loadingDesc')), depsConfig({ - name: "data", - desc: trans("formComp.dataDesc"), - depKeys: ["container"], + name: 'data', + desc: trans('formComp.dataDesc'), + depKeys: ['container'], func: (input) => { const data: Record = {}; Object.entries(input.container).forEach(([name, value]) => { const exposingValues = value as any; - if (exposingValues?.hasOwnProperty("formDataKey")) { + if (exposingValues?.hasOwnProperty('formDataKey')) { // use component name when formDataKey is empty - data[exposingValues["formDataKey"] || name] = exposingValues["value"]; + data[exposingValues['formDataKey'] || name] = exposingValues['value']; } }); return data; }, }), depsConfig({ - name: "invalid", - desc: trans("export.invalidDesc"), - depKeys: ["container"], + name: 'invalid', + desc: trans('export.invalidDesc'), + depKeys: ['container'], func: (input) => { for (const [, value] of Object.entries(input.container)) { const exposingValues = value as any; - if (exposingValues?.hasOwnProperty("formDataKey") && exposingValues["invalid"]) { + if ( + exposingValues?.hasOwnProperty('formDataKey') && + exposingValues['invalid'] + ) { return true; } } @@ -462,20 +509,23 @@ export const FormComp = withExposingConfigs(FormTmpComp, [ }), ]); -export function defaultFormData(compName: string, nameGenerator: NameGenerator): FormDataType { +export function defaultFormData( + compName: string, + nameGenerator: NameGenerator +): FormDataType { return { container: { header: toSimpleContainerData([ { item: { - compType: "text", - name: nameGenerator.genItemName("formTitle"), + compType: 'text', + name: nameGenerator.genItemName('formTitle'), comp: { - text: "### " + trans("formComp.formTitle"), + text: '### ' + trans('formComp.formTitle'), }, }, layoutItem: { - i: "", + i: '', h: 5, w: 24, x: 0, @@ -486,16 +536,16 @@ export function defaultFormData(compName: string, nameGenerator: NameGenerator): footer: toSimpleContainerData([ { item: { - compType: "button", - name: nameGenerator.genItemName("formButton"), + compType: 'button', + name: nameGenerator.genItemName('formButton'), comp: { - text: trans("button.submit"), - type: "submit", + text: trans('button.submit'), + type: 'submit', form: compName, }, }, layoutItem: { - i: "", + i: '', h: 5, w: 10, x: 14, diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index 951326a81..995a135af 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx @@ -1,4 +1,5 @@ import { + AnimationStyleType, ContainerBodyStyleType, ContainerHeaderStyleType, ContainerStyleType, @@ -55,7 +56,10 @@ const getStyle = (style: ContainerStyleType) => { `; }; -const Wrapper = styled.div<{$style: ContainerStyleType}>` +const Wrapper = styled.div<{ + $style: ContainerStyleType; + $animationStyle: AnimationStyleType; +}>` display: flex; flex-flow: column; height: 100%; @@ -63,6 +67,7 @@ const Wrapper = styled.div<{$style: ContainerStyleType}>` border-radius: 4px; ${(props) => props.$style && getStyle(props.$style)} rotate: ${(props) => props.$style.rotation}; + ${(props) => props.$animationStyle} `; const HeaderInnerGrid = styled(InnerGrid)<{ @@ -163,6 +168,7 @@ const FooterInnerGrid = styled(InnerGrid)<{ export type LayoutProps = LayoutViewProps & { hintPlaceholder?: ReactNode; + animationStyle: AnimationStyleType; }; export function PageLayout( @@ -171,7 +177,7 @@ export function PageLayout( setSiderCollapsed: (collapsed: boolean) => void; } ) { - const {container, siderCollapsed, setSiderCollapsed} = props; + const {container, siderCollapsed, setSiderCollapsed, animationStyle} = props; const {showHeader, showFooter, showSider} = container; const {items: headerItems, ...otherHeaderProps} = container.header; const {items: bodyItems, ...otherBodyProps} = @@ -213,7 +219,7 @@ export function PageLayout( }, }} > - + ` &.ant-tabs { height: 100%; + ${(props) => props.$animationStyle} } .ant-tabs-content-animated { @@ -190,7 +195,6 @@ const StyledTabs = styled(Tabs)<{ .ant-tabs-nav-operations { margin-right: -24px; } - ${(props) => props.$style && getStyle(props.$style, props.$headerStyle, props.$bodyStyle)} @@ -203,7 +207,15 @@ const ContainerInTab = (props: ContainerBaseProps) => { }; const TabbedContainer = (props: TabbedContainerProps) => { - let {tabs, containers, dispatch, style, headerStyle, bodyStyle} = props; + let { + tabs, + containers, + dispatch, + style, + headerStyle, + bodyStyle, + animationStyle, + } = props; const visibleTabs = tabs.filter((tab) => !tab.hidden); const selectedTab = visibleTabs.find( @@ -306,6 +318,7 @@ const TabbedContainer = (props: TabbedContainerProps) => { $style={style} $headerStyle={headerStyle} $bodyStyle={bodyStyle} + $animationStyle={animationStyle} $showHeader={showHeader} onChange={(key) => { if (key !== props.selectedTabKey.value) { @@ -385,6 +398,9 @@ export const TabbedContainerBaseComp = (function () {
{children.style.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
{children.showHeader.getView() && (
{children.headerStyle.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 625d0a986..fd8db47d4 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -1,4 +1,5 @@ import { + AnimationStyleType, ContainerBodyStyleType, ContainerHeaderStyleType, ContainerStyleType, @@ -39,12 +40,16 @@ const getStyle = (style: ContainerStyleType) => { `; }; -const Wrapper = styled.div<{$style: ContainerStyleType}>` +const Wrapper = styled.div<{ + $style: ContainerStyleType; + $animationStyle?: AnimationStyleType; +}>` display: flex; flex-flow: column; height: 100%; border: 1px solid #d7d9e0; border-radius: 4px; + ${(props) => props.$animationStyle && props.$animationStyle} ${(props) => { return props.$style && getStyle(props.$style); }} @@ -117,10 +122,11 @@ const FooterInnerGrid = styled(InnerGrid)<{ export type TriContainerProps = TriContainerViewProps & { hintPlaceholder?: ReactNode; + animationStyle?: AnimationStyleType; }; export function TriContainer(props: TriContainerProps) { - const {container} = props; + const {container, animationStyle} = props; const {showHeader, showFooter} = container; // When the header and footer are not displayed, the body must be displayed const showBody = container.showBody || (!showHeader && !showFooter); @@ -139,7 +145,7 @@ export function TriContainer(props: TriContainerProps) { return (
- + {showHeader && ( { `; }; -const Wrapper = styled.div<{$style: ContainerStyleType}>` +const Wrapper = styled.div<{ + $style: ContainerStyleType; + $animationStyle: AnimationStyleType; +}>` display: flex; flex-flow: column; height: 100%; + ${(props) => props.$animationStyle} border: ${(props) => props.$style.borderWidth} solid ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; @@ -183,10 +188,11 @@ export type TriContainerProps = TriContainerViewProps & { width: string; style: TextStyleType; horizontalAlignment: string; + animationStyle: AnimationStyleType; }; export function TriContainer(props: TriContainerProps) { - const {container, text} = props; + const {container, text, animationStyle} = props; const {showHeader, showFooter} = container; // When the header and footer are not displayed, the body must be displayed const showBody = container.showBody || (!showHeader && !showFooter); @@ -204,7 +210,7 @@ export function TriContainer(props: TriContainerProps) { const {style, headerStyle, bodyStyle, footerStyle} = container; return ( - + {showHeader && ( Date: Sat, 18 May 2024 04:30:38 +0500 Subject: [PATCH 023/155] animation styles added --- .../src/comps/comps/dateComp/dateComp.tsx | 474 +++++++++++------- .../comps/numberInputComp/numberInputComp.tsx | 318 +++++++----- .../comps/numberInputComp/rangeSliderComp.tsx | 58 ++- .../comps/numberInputComp/sliderComp.tsx | 1 + .../numberInputComp/sliderCompConstants.tsx | 11 +- .../lowcoder/src/comps/comps/ratingComp.tsx | 127 +++-- .../lowcoder/src/comps/comps/textComp.tsx | 132 +++-- .../comps/comps/textInputComp/inputComp.tsx | 102 ++-- .../comps/comps/textInputComp/mentionComp.tsx | 181 ++++--- .../comps/textInputComp/passwordComp.tsx | 112 +++-- .../comps/textInputComp/textAreaComp.tsx | 104 ++-- 11 files changed, 985 insertions(+), 635 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index f3182b38f..4ed0f6713 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -1,27 +1,40 @@ -import _, { noop } from "lodash"; -import dayjs from "dayjs"; -import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; +import _, {noop} from 'lodash'; +import dayjs from 'dayjs'; +import {RecordConstructorToComp, RecordConstructorToView} from 'lowcoder-core'; import { BoolCodeControl, CustomRuleControl, RangeControl, StringControl, -} from "../../controls/codeControl"; -import { BoolControl } from "../../controls/boolControl"; +} from '../../controls/codeControl'; +import {BoolControl} from '../../controls/boolControl'; import { blurEvent, changeEvent, eventHandlerControl, focusEvent, -} from "../../controls/eventHandlerControl"; -import { LabelControl } from "../../controls/labelControl"; -import { stringExposingStateControl } from "../../controls/codeStateControl"; -import { UICompBuilder, withDefault } from "../../generators"; -import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing"; -import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; -import { styleControl } from "comps/controls/styleControl"; -import { DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; -import { withMethodExposing } from "../../generators/withMethodExposing"; +} from '../../controls/eventHandlerControl'; +import {LabelControl} from '../../controls/labelControl'; +import {stringExposingStateControl} from '../../controls/codeStateControl'; +import {UICompBuilder, withDefault} from '../../generators'; +import { + CommonNameConfig, + depsConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import { + formDataChildren, + FormDataPropertyView, +} from '../formComp/formDataConstants'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + DateTimeStyle, + DateTimeStyleType, + InputFieldStyle, + LabelStyle, +} from 'comps/controls/styleControlConstants'; +import {withMethodExposing} from '../../generators/withMethodExposing'; import { disabledPropertyView, formatPropertyView, @@ -34,26 +47,35 @@ import { minuteStepPropertyView, requiredPropertyView, SecondStepPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils"; -import React, { ReactNode, useContext } from "react"; -import { IconControl } from "comps/controls/iconControl"; -import { hasIcon } from "comps/utils"; -import { Section, sectionNames } from "components/Section"; -import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil"; -import { DateUIView } from "./dateUIView"; -import { useIsMobile } from "util/hooks"; -import { RefControl } from "comps/controls/refControl"; -import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface"; -import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView"; - -import { EditorContext } from "comps/editorState"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import { + DATE_FORMAT, + DATE_TIME_FORMAT, + DateParser, + PickerMode, +} from 'util/dateTimeUtils'; +import React, {ReactNode, useContext} from 'react'; +import {IconControl} from 'comps/controls/iconControl'; +import {hasIcon} from 'comps/utils'; +import {Section, sectionNames} from 'components/Section'; +import { + dateRefMethods, + disabledTime, + handleDateChange, +} from 'comps/comps/dateComp/dateCompUtil'; +import {DateUIView} from './dateUIView'; +import {useIsMobile} from 'util/hooks'; +import {RefControl} from 'comps/controls/refControl'; +import {CommonPickerMethods} from 'antd/es/date-picker/generatePicker/interface'; +import {DateRangeUIView} from 'comps/comps/dateComp/dateRangeUIView'; + +import {EditorContext} from 'comps/editorState'; const defaultStyle = { borderStyle: 'solid', borderWidth: '1px', -} +}; const EventOptions = [changeEvent, focusEvent, blurEvent] as const; @@ -67,7 +89,7 @@ const validationChildren = { }; const commonChildren = { label: LabelControl, - placeholder: withDefault(StringControl, trans("date.placeholder")), + placeholder: withDefault(StringControl, trans('date.placeholder')), format: StringControl, disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), @@ -77,22 +99,42 @@ const commonChildren = { minuteStep: RangeControl.closed(1, 60, 1), secondStep: RangeControl.closed(1, 60, 1), style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), - suffixIcon: withDefault(IconControl, "/icon:regular/calendar"), + animationStyle: styleControl(AnimationStyle), + labelStyle: styleControl( + LabelStyle.filter( + (style) => ['accent', 'validate'].includes(style.name) === false + ) + ), + suffixIcon: withDefault(IconControl, '/icon:regular/calendar'), ...validationChildren, viewRef: RefControl, inputFieldStyle: withDefault(styleControl(DateTimeStyle), defaultStyle), }; type CommonChildrenType = RecordConstructorToComp; -const datePickerProps = (props: RecordConstructorToView) => - _.pick(props, "format", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder"); +const datePickerProps = ( + props: RecordConstructorToView +) => + _.pick( + props, + 'format', + 'showTime', + 'use12Hours', + 'hourStep', + 'minuteStep', + 'secondStep', + 'placeholder' + ); const timeFields = (children: CommonChildrenType, isMobile?: boolean) => [ - children.showTime.propertyView({ label: trans("date.showTime") }), - !isMobile && children.use12Hours.propertyView({ label: trans("prop.use12Hours") }), + children.showTime.propertyView({label: trans('date.showTime')}), + !isMobile && + children.use12Hours.propertyView({label: trans('prop.use12Hours')}), ]; -const commonAdvanceSection = (children: CommonChildrenType, isDate: boolean = true) => { +const commonAdvanceSection = ( + children: CommonChildrenType, + isDate: boolean = true +) => { if (isDate && children.showTime.getView()) { return (
@@ -104,57 +146,63 @@ const commonAdvanceSection = (children: CommonChildrenType, isDate: boolean = tr } }; -const dateValidationFields = (children: CommonChildrenType, dateType: PickerMode = "date") => { - if (dateType === "date") { +const dateValidationFields = ( + children: CommonChildrenType, + dateType: PickerMode = 'date' +) => { + if (dateType === 'date') { return [minDatePropertyView(children), maxDatePropertyView(children)]; } }; -const timeValidationFields = (children: CommonChildrenType, dateType: PickerMode = "date") => { - if (dateType === "date" && children.showTime.getView()) { +const timeValidationFields = ( + children: CommonChildrenType, + dateType: PickerMode = 'date' +) => { + if (dateType === 'date' && children.showTime.getView()) { return [minTimePropertyView(children), maxTimePropertyView(children)]; } }; function validate( props: RecordConstructorToView & { - value: { value: string }; + value: {value: string}; } ): { - validateStatus: "success" | "warning" | "error"; + validateStatus: 'success' | 'warning' | 'error'; help?: string; } { if (props.customRule) { - return { validateStatus: "error", help: props.customRule }; + return {validateStatus: 'error', help: props.customRule}; } const currentDateTime = dayjs(dayjs(props.value.value), DATE_TIME_FORMAT); if (props.required && !currentDateTime.isValid()) { - return { validateStatus: "error", help: trans("prop.required") }; + return {validateStatus: 'error', help: trans('prop.required')}; } - return { validateStatus: "success" }; + return {validateStatus: 'success'}; } const childrenMap = { - value: stringExposingStateControl("value"), + value: stringExposingStateControl('value'), ...commonChildren, ...formDataChildren, }; export type DateCompViewProps = Pick< RecordConstructorToView, - | "disabled" - | "format" - | "minDate" - | "maxDate" - | "suffixIcon" - | "showTime" - | "use12Hours" - | "hourStep" - | "minuteStep" - | "secondStep" - | "viewRef" + | 'disabled' + | 'format' + | 'minDate' + | 'maxDate' + | 'suffixIcon' + | 'showTime' + | 'use12Hours' + | 'hourStep' + | 'minuteStep' + | 'secondStep' + | 'viewRef' > & { onFocus: () => void; onBlur: () => void; @@ -173,7 +221,8 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { required: props.required, style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, children: ( { handleDateChange( time && time.isValid() ? time.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : "", + : '', props.value.onChange, props.onEvent ); }} onPanelChange={() => { - handleDateChange("", props.value.onChange, noop); + handleDateChange('', props.value.onChange, noop); }} - onFocus={() => props.onEvent("focus")} - onBlur={() => props.onEvent("blur")} + onFocus={() => props.onEvent('focus')} + onBlur={() => props.onEvent('blur')} suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} /> ), @@ -211,21 +260,23 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { <>
{children.value.propertyView({ - label: trans("prop.defaultValue"), - placeholder: "2022-04-07 21:39:59", - tooltip: trans("date.formatTip") + label: trans('prop.defaultValue'), + placeholder: '2022-04-07 21:39:59', + tooltip: trans('date.formatTip'), })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {requiredPropertyView(children)} - {dateValidationFields(children)} - {timeValidationFields(children)} - {children.customRule.propertyView({})} -
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {requiredPropertyView(children)} + {dateValidationFields(children)} + {timeValidationFields(children)} + {children.customRule.propertyView({})} +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -235,24 +286,38 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { )} {/*{commonAdvanceSection(children, children.dateType.value === "date")}*/} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()} + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && + children.label.getPropertyView()} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && (
- {formatPropertyView({ children })} - {children.placeholder.propertyView({ label: trans("date.placeholderText") })} + {formatPropertyView({children})} + {children.placeholder.propertyView({ + label: trans('date.placeholderText'), + })}
)} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {timeFields(children, isMobile)} - {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} -
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {timeFields(children, isMobile)} + {children.suffixIcon.propertyView({ + label: trans('button.suffixIcon'), + })} +
+ )} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)} + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && + !isMobile && + commonAdvanceSection(children)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( <>
{children.style.getPropertyView()} @@ -263,6 +328,9 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -273,8 +341,8 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { export const dateRangeControl = (function () { const childrenMap = { - start: stringExposingStateControl("start"), - end: stringExposingStateControl("end"), + start: stringExposingStateControl('start'), + end: stringExposingStateControl('end'), ...commonChildren, }; @@ -304,35 +372,39 @@ export const dateRangeControl = (function () { props.start.onChange( start && start.isValid() ? start.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : "" + : '' ); props.end.onChange( - end && end.isValid() ? end.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : "" + end && end.isValid() + ? end.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) + : '' ); - props.onEvent("change"); + props.onEvent('change'); }} onPanelChange={(_, mode) => { - mode[0] !== "date" && handleDateChange("", props.start.onChange, noop); - mode[1] !== "date" && handleDateChange("", props.end.onChange, noop); + mode[0] !== 'date' && + handleDateChange('', props.start.onChange, noop); + mode[1] !== 'date' && handleDateChange('', props.end.onChange, noop); }} - onFocus={() => props.onEvent("focus")} - onBlur={() => props.onEvent("blur")} + onFocus={() => props.onEvent('focus')} + onBlur={() => props.onEvent('blur')} suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} /> ); - const startResult = validate({ ...props, value: props.start }); - const endResult = validate({ ...props, value: props.end }); + const startResult = validate({...props, value: props.start}); + const endResult = validate({...props, value: props.end}); return props.label({ required: props.required, style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, children: children, - inputFieldStyle:props.inputFieldStyle, - ...(startResult.validateStatus !== "success" + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, + ...(startResult.validateStatus !== 'success' ? startResult - : endResult.validateStatus !== "success" + : endResult.validateStatus !== 'success' ? endResult : startResult), }); @@ -343,24 +415,26 @@ export const dateRangeControl = (function () { <>
{children.start.propertyView({ - label: trans("date.start"), - placeholder: "2022-04-07 21:39:59", - tooltip: trans("date.formatTip"), + label: trans('date.start'), + placeholder: '2022-04-07 21:39:59', + tooltip: trans('date.formatTip'), })} {children.end.propertyView({ - label: trans("date.end"), - placeholder: "2022-04-07 21:39:59", - tooltip: trans("date.formatTip"), + label: trans('date.end'), + placeholder: '2022-04-07 21:39:59', + tooltip: trans('date.formatTip'), })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {requiredPropertyView(children)} - {dateValidationFields(children)} - {timeValidationFields(children)} - {children.customRule.propertyView({})} -
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {requiredPropertyView(children)} + {dateValidationFields(children)} + {timeValidationFields(children)} + {children.customRule.propertyView({})} +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -369,24 +443,37 @@ export const dateRangeControl = (function () { )} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()} + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && + children.label.getPropertyView()} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && (
- {formatPropertyView({ children })} - {children.placeholder.propertyView({ label: trans("date.placeholderText") })} + {formatPropertyView({children})} + {children.placeholder.propertyView({ + label: trans('date.placeholderText'), + })}
)} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {timeFields(children, isMobile)} - {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} -
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {timeFields(children, isMobile)} + {children.suffixIcon.propertyView({ + label: trans('button.suffixIcon'), + })} +
+ )} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)} + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && + commonAdvanceSection(children)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( <>
{children.style.getPropertyView()} @@ -397,9 +484,11 @@ export const dateRangeControl = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} - ); }) @@ -408,86 +497,100 @@ export const dateRangeControl = (function () { export const DatePickerComp = withExposingConfigs(datePickerControl, [ depsConfig({ - name: "value", - desc: trans("export.datePickerValueDesc"), - depKeys: ["value", "showTime"], + name: 'value', + desc: trans('export.datePickerValueDesc'), + depKeys: ['value', 'showTime'], func: (input) => { const mom = dayjs(input.value, DateParser); - return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : ""; + return mom.isValid() + ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) + : ''; }, }), depsConfig({ - name: "formattedValue", - desc: trans("export.datePickerFormattedValueDesc"), - depKeys: ["value", "format"], + name: 'formattedValue', + desc: trans('export.datePickerFormattedValueDesc'), + depKeys: ['value', 'format'], func: (input) => { const mom = dayjs(input.value, DateParser); - return mom.isValid() ? mom.format(input.format) : ""; + return mom.isValid() ? mom.format(input.format) : ''; }, }), depsConfig({ - name: "timestamp", - desc: trans("export.datePickerTimestampDesc"), - depKeys: ["value"], + name: 'timestamp', + desc: trans('export.datePickerTimestampDesc'), + depKeys: ['value'], func: (input) => { const mom = dayjs(input.value, DateParser); - return mom.isValid() ? mom.unix() : ""; + return mom.isValid() ? mom.unix() : ''; }, }), depsConfig({ - name: "invalid", - desc: trans("export.invalidDesc"), - depKeys: ["value", "required", "minTime", "maxTime", "minDate", "maxDate", "customRule"], + name: 'invalid', + desc: trans('export.invalidDesc'), + depKeys: [ + 'value', + 'required', + 'minTime', + 'maxTime', + 'minDate', + 'maxDate', + 'customRule', + ], func: (input) => validate({ ...input, - value: { value: input.value }, - } as any).validateStatus !== "success", + value: {value: input.value}, + } as any).validateStatus !== 'success', }), ...CommonNameConfig, ]); export let DateRangeComp = withExposingConfigs(dateRangeControl, [ depsConfig({ - name: "start", - desc: trans("export.dateRangeStartDesc"), - depKeys: ["start", "showTime"], + name: 'start', + desc: trans('export.dateRangeStartDesc'), + depKeys: ['start', 'showTime'], func: (input) => { const mom = dayjs(input.start, DateParser); - return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : ""; + return mom.isValid() + ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) + : ''; }, }), depsConfig({ - name: "end", - desc: trans("export.dateRangeEndDesc"), - depKeys: ["end", "showTime"], + name: 'end', + desc: trans('export.dateRangeEndDesc'), + depKeys: ['end', 'showTime'], func: (input) => { const mom = dayjs(input.end, DateParser); - return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : ""; + return mom.isValid() + ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) + : ''; }, }), depsConfig({ - name: "startTimestamp", - desc: trans("export.dateRangeStartTimestampDesc"), - depKeys: ["start"], + name: 'startTimestamp', + desc: trans('export.dateRangeStartTimestampDesc'), + depKeys: ['start'], func: (input) => { const mom = dayjs(input.start, DateParser); - return mom.isValid() ? mom.unix() : ""; + return mom.isValid() ? mom.unix() : ''; }, }), depsConfig({ - name: "endTimestamp", - desc: trans("export.dateRangeEndTimestampDesc"), - depKeys: ["end"], + name: 'endTimestamp', + desc: trans('export.dateRangeEndTimestampDesc'), + depKeys: ['end'], func: (input) => { const mom = dayjs(input.end, DateParser); - return mom.isValid() ? mom.unix() : ""; + return mom.isValid() ? mom.unix() : ''; }, }), depsConfig({ - name: "formattedValue", - desc: trans("export.dateRangeFormattedValueDesc"), - depKeys: ["start", "end", "format"], + name: 'formattedValue', + desc: trans('export.dateRangeFormattedValueDesc'), + depKeys: ['start', 'end', 'format'], func: (input) => { const start = dayjs(input.start, DateParser); const end = dayjs(input.end, DateParser); @@ -496,40 +599,49 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [ end.isValid() && end.format(input.format), ] .filter((item) => item) - .join(" - "); + .join(' - '); }, }), depsConfig({ - name: "formattedStartValue", - desc: trans("export.dateRangeFormattedStartValueDesc"), - depKeys: ["start", "format"], + name: 'formattedStartValue', + desc: trans('export.dateRangeFormattedStartValueDesc'), + depKeys: ['start', 'format'], func: (input) => { const start = dayjs(input.start, DateParser); return start.isValid() && start.format(input.format); }, }), depsConfig({ - name: "formattedEndValue", - desc: trans("export.dateRangeFormattedEndValueDesc"), - depKeys: ["end", "format"], + name: 'formattedEndValue', + desc: trans('export.dateRangeFormattedEndValueDesc'), + depKeys: ['end', 'format'], func: (input) => { const end = dayjs(input.end, DateParser); return end.isValid() && end.format(input.format); }, }), depsConfig({ - name: "invalid", - desc: trans("export.invalidDesc"), - depKeys: ["start", "end", "required", "minTime", "maxTime", "minDate", "maxDate", "customRule"], + name: 'invalid', + desc: trans('export.invalidDesc'), + depKeys: [ + 'start', + 'end', + 'required', + 'minTime', + 'maxTime', + 'minDate', + 'maxDate', + 'customRule', + ], func: (input) => validate({ ...input, - value: { value: input.start }, - }).validateStatus !== "success" || + value: {value: input.start}, + }).validateStatus !== 'success' || validate({ ...input, - value: { value: input.end }, - }).validateStatus !== "success", + value: {value: input.end}, + }).validateStatus !== 'success', }), ...CommonNameConfig, ]); @@ -538,19 +650,19 @@ DateRangeComp = withMethodExposing(DateRangeComp, [ ...dateRefMethods, { method: { - name: "clearAll", - description: trans("date.clearAllDesc"), + name: 'clearAll', + description: trans('date.clearAllDesc'), params: [], }, execute: (comp) => { - comp.children.start.getView().onChange(""); - comp.children.end.getView().onChange(""); + comp.children.start.getView().onChange(''); + comp.children.end.getView().onChange(''); }, }, { method: { - name: "resetAll", - description: trans("date.resetAllDesc"), + name: 'resetAll', + description: trans('date.resetAllDesc'), params: [], }, execute: (comp) => { diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index cd633ec48..19ce80feb 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -1,4 +1,4 @@ -import { default as AntdInputNumber } from "antd/es/input-number"; +import {default as AntdInputNumber} from 'antd/es/input-number'; import { BoolCodeControl, codeControl, @@ -6,12 +6,15 @@ import { NumberControl, RangeControl, StringControl, -} from "comps/controls/codeControl"; -import { BoolControl } from "comps/controls/boolControl"; -import { dropdownControl } from "comps/controls/dropdownControl"; -import { LabelControl } from "comps/controls/labelControl"; -import { numberExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl"; -import NP from "number-precision"; +} from 'comps/controls/codeControl'; +import {BoolControl} from 'comps/controls/boolControl'; +import {dropdownControl} from 'comps/controls/dropdownControl'; +import {LabelControl} from 'comps/controls/labelControl'; +import { + numberExposingStateControl, + stringExposingStateControl, +} from 'comps/controls/codeStateControl'; +import NP from 'number-precision'; import { CommonNameConfig, @@ -19,28 +22,42 @@ import { NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from "comps/generators/withExposing"; -import { Section, sectionNames, ValueFromOption } from "lowcoder-design"; -import { ReactNode, useEffect, useRef, useState } from "react"; -import styled, { css } from "styled-components"; -import { RecordConstructorToView } from "lowcoder-core"; -import { InputEventHandlerControl } from "../../controls/eventHandlerControl"; -import { UICompBuilder, withDefault } from "../../generators"; -import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; -import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; -import { RefControl } from "../../controls/refControl"; -import { styleControl } from "comps/controls/styleControl"; -import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +} from 'comps/generators/withExposing'; +import {Section, sectionNames, ValueFromOption} from 'lowcoder-design'; +import {ReactNode, useEffect, useRef, useState} from 'react'; +import styled, {css} from 'styled-components'; +import {RecordConstructorToView} from 'lowcoder-core'; +import {InputEventHandlerControl} from '../../controls/eventHandlerControl'; +import {UICompBuilder, withDefault} from '../../generators'; +import { + formDataChildren, + FormDataPropertyView, +} from '../formComp/formDataConstants'; +import { + withMethodExposing, + refMethods, +} from '../../generators/withMethodExposing'; +import {RefControl} from '../../controls/refControl'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + InputFieldStyle, + InputLikeStyle, + InputLikeStyleType, + LabelStyle, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; import { disabledPropertyView, hiddenPropertyView, placeholderPropertyView, readOnlyPropertyView, requiredPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { IconControl } from "comps/controls/iconControl"; -import { hasIcon } from "comps/utils"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {IconControl} from 'comps/controls/iconControl'; +import {hasIcon} from 'comps/utils'; import { blurMethod, clickMethod, @@ -48,24 +65,24 @@ import { selectMethod, setRangeTextMethod, setSelectionRangeMethod, -} from "comps/utils/methodUtils"; +} from 'comps/utils/methodUtils'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; -import { migrateOldData } from "comps/generators/simpleGenerators"; -import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; +import {fixOldInputCompData} from '../textInputComp/textInputConstants'; const getStyle = (style: InputLikeStyleType) => { return css` border-radius: ${style.radius}; - border-width:${style.borderWidth} !important; + border-width: ${style.borderWidth} !important; // still use antd style when disabled &:not(.ant-input-number-disabled) { color: ${style.text}; background-color: ${style.background}; border-color: ${style.border}; - //margin: ${style.margin}; - padding: 0; + //margin: ${style.margin}; + padding: 0; width: ${widthCalculator(style.margin)}; &.ant-input-number-focused { border-color: ${style.accent}; @@ -79,19 +96,18 @@ const getStyle = (style: InputLikeStyleType) => { color: ${style.text}; opacity: 0.4; } - .ant-input-number { - margin: 0; - - } - .ant-input-number-input { - margin: 0; - padding: ${style.padding}; - height: ${heightCalculator(style.margin)}; - color:${style.text}; - font-family:${style.fontFamily} !important; - font-weight:${style.textWeight} !important; - font-size:${style.textSize} !important; - font-style:${style.fontStyle} !important; + .ant-input-number { + margin: 0; + } + .ant-input-number-input { + margin: 0; + padding: ${style.padding}; + height: ${heightCalculator(style.margin)}; + color: ${style.text}; + font-family: ${style.fontFamily} !important; + font-weight: ${style.textWeight} !important; + font-size: ${style.textSize} !important; + font-style: ${style.fontStyle} !important; } .ant-input-number-handler-wrap { @@ -119,7 +135,7 @@ const getStyle = (style: InputLikeStyleType) => { `; }; -const InputNumber = styled(AntdInputNumber) <{ +const InputNumber = styled(AntdInputNumber)<{ $style: InputLikeStyleType; }>` width: 100%; @@ -128,12 +144,12 @@ const InputNumber = styled(AntdInputNumber) <{ const FormatterOptions = [ { - label: trans("numberInput.standard"), - value: "standard", + label: trans('numberInput.standard'), + value: 'standard', }, { - label: trans("numberInput.percent"), - value: "percent", + label: trans('numberInput.percent'), + value: 'percent', }, ] as const; @@ -141,7 +157,7 @@ type Formatter = ValueFromOption; function parseNumber(value: string, allowNull?: boolean): number { // only keep numbers, decimal points, minus signs - const v = value.replace(/[^\d.-]/g, ""); + const v = value.replace(/[^\d.-]/g, ''); if (v) { const num = Number(v); if (isFinite(num)) { @@ -155,9 +171,9 @@ function addThousandsSeparator(value: string) { // https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group // value?.toString().replace(/\B(? props.max) { return { - validateStatus: "error", - help: trans("validationDesc.maxValue", { value, max: props.max }), + validateStatus: 'error', + help: trans('validationDesc.maxValue', {value, max: props.max}), }; } if (props.min !== undefined && value < props.min) { return { - validateStatus: "error", - help: trans("validationDesc.minValue", { value, min: props.min }), + validateStatus: 'error', + help: trans('validationDesc.minValue', {value, min: props.min}), }; } - return { validateStatus: "" }; + return {validateStatus: ''}; } const UndefinedNumberControl = codeControl((value: any) => { - if (typeof value === "number") { + if (typeof value === 'number') { return value; } const result = Number(value); @@ -243,13 +263,13 @@ const UndefinedNumberControl = codeControl((value: any) => { }); const childrenMap = { - defaultValue: stringExposingStateControl("defaultValue"), // It is more convenient for string to handle various states, save raw input here - value: numberExposingStateControl("value"), // It is more convenient for string to handle various states, save raw input here + defaultValue: stringExposingStateControl('defaultValue'), // It is more convenient for string to handle various states, save raw input here + value: numberExposingStateControl('value'), // It is more convenient for string to handle various states, save raw input here placeholder: StringControl, disabled: BoolCodeControl, readOnly: BoolControl, label: LabelControl, - formatter: dropdownControl(FormatterOptions, "standard"), + formatter: dropdownControl(FormatterOptions, 'standard'), step: withDefault(NumberControl, 1), controls: BoolControl.DEFAULT_TRUE, // Whether to display the increase or decrease button precision: RangeControl.closed(0, 20, 0), @@ -258,10 +278,13 @@ const childrenMap = { onEvent: InputEventHandlerControl, viewRef: RefControl, style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), - labelStyle:styleControl(LabelStyle), - prefixText : stringExposingStateControl("defaultValue"), + labelStyle: styleControl(LabelStyle), + animationStyle: styleControl(AnimationStyle), + prefixText: stringExposingStateControl('defaultValue'), prefixIcon: IconControl, - inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) , + inputFieldStyle: withDefault(styleControl(InputLikeStyle), { + borderWidth: '1px', + }), // validation required: BoolControl, min: UndefinedNumberControl, @@ -271,7 +294,9 @@ const childrenMap = { ...formDataChildren, }; -const CustomInputNumber = (props: RecordConstructorToView) => { +const CustomInputNumber = ( + props: RecordConstructorToView +) => { const ref = useRef(null); const defaultValue = props.defaultValue.value; @@ -286,7 +311,13 @@ const CustomInputNumber = (props: RecordConstructorToView) = }, [defaultValue]); const formatFn = (value: number) => - format(value, props.allowNull, props.formatter, props.precision, props.thousandsSeparator); + format( + value, + props.allowNull, + props.formatter, + props.precision, + props.thousandsSeparator + ); const [tmpValue, setTmpValue] = useState(formatFn(props.value.value)); @@ -294,8 +325,8 @@ const CustomInputNumber = (props: RecordConstructorToView) = const oldValue = props.value.value; const newValue = parseNumber(tmpValue, props.allowNull); props.value.onChange(newValue); - if((oldValue !== newValue)) { - props.onEvent("change"); + if (oldValue !== newValue) { + props.onEvent('change'); } }; @@ -324,30 +355,32 @@ const CustomInputNumber = (props: RecordConstructorToView) = stringMode={true} precision={props.precision} $style={props.inputFieldStyle} - prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value} + prefix={ + hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value + } onPressEnter={() => { handleFinish(); - props.onEvent("submit"); + props.onEvent('submit'); }} onChangeCapture={(e: any) => { // eslint-disable-next-line only-ascii/only-ascii - setTmpValue((e.target.value?.toString() ?? "").replace("。", ".")); + setTmpValue((e.target.value?.toString() ?? '').replace('。', '.')); }} onStep={(_, info) => { // since percentage mode needs to be handled manually const v = NP.plus( parseNumber(tmpValue), - NP.times(info.type === "up" ? 1 : -1, Number(info.offset)) + NP.times(info.type === 'up' ? 1 : -1, Number(info.offset)) ); props.value.onChange(v); - props.onEvent("change"); + props.onEvent('change'); }} onFocus={() => { - props.onEvent("focus"); + props.onEvent('focus'); }} onBlur={() => { handleFinish(); - props.onEvent("blur"); + props.onEvent('blur'); }} onKeyPress={(event) => { const value = tmpValue; @@ -355,17 +388,17 @@ const CustomInputNumber = (props: RecordConstructorToView) = if (/\d/.test(event.key)) { return; } - if (cursor === 0 && event.key === "-" && !/-/.test(value)) { + if (cursor === 0 && event.key === '-' && !/-/.test(value)) { return; } - if (cursor !== 0 && props.thousandsSeparator && event.key === ",") { + if (cursor !== 0 && props.thousandsSeparator && event.key === ',') { return; } if ( cursor !== 0 && props.precision > 0 && // eslint-disable-next-line only-ascii/only-ascii - (event.key === "." || event.key === "。") && + (event.key === '.' || event.key === '。') && !/[.]/.test(value) ) { return; @@ -383,27 +416,34 @@ let NumberInputTmpComp = (function () { children: , style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, ...validate(props), }); }) .setPropertyViewFn((children) => ( <>
- {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })} + {children.defaultValue.propertyView({ + label: trans('prop.defaultValue'), + })} {placeholderPropertyView(children)} - {children.formatter.propertyView({ label: trans("numberInput.formatter") })} + {children.formatter.propertyView({ + label: trans('numberInput.formatter'), + })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {requiredPropertyView(children)} - {children.min.propertyView({ label: trans("prop.minimum") })} - {children.max.propertyView({ label: trans("prop.maximum") })} - {children.customRule.propertyView({})} -
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {requiredPropertyView(children)} + {children.min.propertyView({label: trans('prop.minimum')})} + {children.max.propertyView({label: trans('prop.maximum')})} + {children.customRule.propertyView({})} +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -412,36 +452,51 @@ let NumberInputTmpComp = (function () { )} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( - children.label.getPropertyView() - )} + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && + children.label.getPropertyView()} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
- {children.step.propertyView({ label: trans("numberInput.step") })} - {children.precision.propertyView({ label: trans("numberInput.precision") })} - {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} - {children.prefixText.propertyView({ label: trans("button.prefixText") })} - {children.allowNull.propertyView({ label: trans("numberInput.allowNull") })} + {children.step.propertyView({label: trans('numberInput.step')})} + {children.precision.propertyView({ + label: trans('numberInput.precision'), + })} + {children.prefixIcon.propertyView({ + label: trans('button.prefixIcon'), + })} + {children.prefixText.propertyView({ + label: trans('button.prefixText'), + })} + {children.allowNull.propertyView({ + label: trans('numberInput.allowNull'), + })} {children.thousandsSeparator.propertyView({ - label: trans("numberInput.thousandsSeparator"), + label: trans('numberInput.thousandsSeparator'), + })} + {children.controls.propertyView({ + label: trans('numberInput.controls'), })} - {children.controls.propertyView({ label: trans("numberInput.controls") })} {readOnlyPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( <> -
- {children.style.getPropertyView()} -
-
- {children.labelStyle.getPropertyView()} -
-
- {children.inputFieldStyle.getPropertyView()} -
+
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+
+ {children.inputFieldStyle.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -465,22 +520,23 @@ const NumberInputTmp2Comp = withMethodExposing( export const NumberInputComp = withExposingConfigs(NumberInputTmp2Comp, [ depsConfig({ - name: "value", - desc: trans("export.inputValueDesc"), - depKeys: ["value", "allowNull", "formatter"], - func: (input) => toNumberValue(input.value, input.allowNull, input.formatter), + name: 'value', + desc: trans('export.inputValueDesc'), + depKeys: ['value', 'allowNull', 'formatter'], + func: (input) => + toNumberValue(input.value, input.allowNull, input.formatter), }), NameConfigPlaceHolder, NameConfigRequired, depsConfig({ - name: "invalid", - desc: trans("export.invalidDesc"), - depKeys: ["value", "required", "min", "max", "allowNull", "customRule"], + name: 'invalid', + desc: trans('export.invalidDesc'), + depKeys: ['value', 'required', 'min', 'max', 'allowNull', 'customRule'], func: (input) => validate({ ...input, - value: { value: input.value }, - }).validateStatus !== "", + value: {value: input.value}, + }).validateStatus !== '', }), ...CommonNameConfig, ]); diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index ee4f545c2..56e5fccf5 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -1,24 +1,34 @@ -import { trans } from "i18n"; -import { Section, sectionNames } from "lowcoder-design"; -import { numberExposingStateControl } from "../../controls/codeStateControl"; -import { UICompBuilder } from "../../generators"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants"; -import { hasIcon } from "comps/utils"; -import { BoolControl } from "comps/controls/boolControl"; +import {trans} from 'i18n'; +import {Section, sectionNames} from 'lowcoder-design'; +import {numberExposingStateControl} from '../../controls/codeStateControl'; +import {UICompBuilder} from '../../generators'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import { + SliderChildren, + SliderPropertyView, + SliderStyled, + SliderWrapper, +} from './sliderCompConstants'; +import {hasIcon} from 'comps/utils'; +import {BoolControl} from 'comps/controls/boolControl'; const RangeSliderBasicComp = (function () { const childrenMap = { ...SliderChildren, - start: numberExposingStateControl("start", 10), - end: numberExposingStateControl("end", 60), + start: numberExposingStateControl('start', 10), + end: numberExposingStateControl('end', 60), vertical: BoolControl, }; return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, children: ( { props.start.onChange(start); props.end.onChange(end); - props.onEvent("change"); + props.onEvent('change'); }} /> {hasIcon(props.suffixIcon) && props.suffixIcon} @@ -50,15 +60,15 @@ const RangeSliderBasicComp = (function () { return ( <>
- {children.start.propertyView({ label: trans("rangeSlider.start") })} - {children.end.propertyView({ label: trans("rangeSlider.end") })} - {children.max.propertyView({ label: trans("prop.maximum") })} - {children.min.propertyView({ label: trans("prop.minimum") })} + {children.start.propertyView({label: trans('rangeSlider.start')})} + {children.end.propertyView({label: trans('rangeSlider.end')})} + {children.max.propertyView({label: trans('prop.maximum')})} + {children.min.propertyView({label: trans('prop.minimum')})} {children.step.propertyView({ - label: trans("rangeSlider.step"), - tooltip: trans("rangeSlider.stepTooltip"), + label: trans('rangeSlider.step'), + tooltip: trans('rangeSlider.stepTooltip'), })} - {children.vertical.propertyView({ label: trans("slider.vertical") })} + {children.vertical.propertyView({label: trans('slider.vertical')})}
@@ -69,9 +79,9 @@ const RangeSliderBasicComp = (function () { })(); export const RangeSliderComp = withExposingConfigs(RangeSliderBasicComp, [ - new NameConfig("start", trans("export.sliderStartDesc")), - new NameConfig("end", trans("export.sliderEndDesc")), - new NameConfig("max", trans("export.sliderMaxValueDesc")), - new NameConfig("min", trans("export.sliderMinValueDesc")), + new NameConfig('start', trans('export.sliderStartDesc')), + new NameConfig('end', trans('export.sliderEndDesc')), + new NameConfig('max', trans('export.sliderMaxValueDesc')), + new NameConfig('min', trans('export.sliderMinValueDesc')), ...CommonNameConfig, ]); diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index 0951c8d52..39735a37a 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -35,6 +35,7 @@ const SliderBasicComp = (function () { style: props.style, labelStyle: props.labelStyle, inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, children: ( ['accent','validate'].includes(style.name) === false)), + labelStyle: styleControl( + LabelStyle.filter( + (style) => ['accent', 'validate'].includes(style.name) === false + ) + ), prefixIcon: IconControl, suffixIcon: IconControl, inputFieldStyle: styleControl(SliderStyle), + animationStyle: styleControl(AnimationStyle), }; export const SliderPropertyView = ( @@ -136,6 +142,9 @@ export const SliderPropertyView = (
{children.inputFieldStyle.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 3bf8e8549..8d8fc0cca 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -1,22 +1,41 @@ -import { default as Rate } from "antd/es/rate"; -import styled, { css } from "styled-components"; -import { Section, sectionNames } from "lowcoder-design"; -import { NumberControl, BoolCodeControl } from "../controls/codeControl"; -import { BoolControl } from "../controls/boolControl"; -import { changeEvent, eventHandlerControl } from "../controls/eventHandlerControl"; -import { LabelControl } from "../controls/labelControl"; -import { numberExposingStateControl } from "../controls/codeStateControl"; -import { UICompBuilder, withDefault } from "../generators"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; -import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; -import { styleControl } from "comps/controls/styleControl"; -import { InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; -import { migrateOldData } from "comps/generators/simpleGenerators"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; - -import { useContext, useEffect, useRef } from "react"; -import { EditorContext } from "comps/editorState"; +import {default as Rate} from 'antd/es/rate'; +import styled, {css} from 'styled-components'; +import {Section, sectionNames} from 'lowcoder-design'; +import {NumberControl, BoolCodeControl} from '../controls/codeControl'; +import {BoolControl} from '../controls/boolControl'; +import { + changeEvent, + eventHandlerControl, +} from '../controls/eventHandlerControl'; +import {LabelControl} from '../controls/labelControl'; +import {numberExposingStateControl} from '../controls/codeStateControl'; +import {UICompBuilder, withDefault} from '../generators'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../generators/withExposing'; +import { + formDataChildren, + FormDataPropertyView, +} from './formComp/formDataConstants'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + InputFieldStyle, + LabelStyle, + RatingStyle, + RatingStyleType, +} from 'comps/controls/styleControlConstants'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; +import { + disabledPropertyView, + hiddenPropertyView, +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; + +import {useContext, useEffect, useRef} from 'react'; +import {EditorContext} from 'comps/editorState'; const EventOptions = [changeEvent] as const; @@ -24,7 +43,7 @@ const EventOptions = [changeEvent] as const; * Compatible with old data 2022-08-23 */ function fixOldData(oldData: any) { - if (oldData && oldData.hasOwnProperty("unChecked")) { + if (oldData && oldData.hasOwnProperty('unChecked')) { return { label: oldData.label, checked: oldData.checked, @@ -36,22 +55,27 @@ function fixOldData(oldData: any) { const RatingBasicComp = (function () { const childrenMap = { - defaultValue: numberExposingStateControl("defaultValue"), - value: numberExposingStateControl("value"), - max: withDefault(NumberControl, "5"), + defaultValue: numberExposingStateControl('defaultValue'), + value: numberExposingStateControl('value'), + max: withDefault(NumberControl, '5'), label: LabelControl, allowHalf: BoolControl, disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), - inputFieldStyle:migrateOldData(styleControl(RatingStyle), fixOldData), + animationStyle: styleControl(AnimationStyle), + labelStyle: styleControl( + LabelStyle.filter( + (style) => ['accent', 'validate'].includes(style.name) === false + ) + ), + inputFieldStyle: migrateOldData(styleControl(RatingStyle), fixOldData), ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { - const defaultValue = { ...props.defaultValue }.value; - const value = { ...props.value }.value; - const changeRef = useRef(false) + const defaultValue = {...props.defaultValue}.value; + const value = {...props.value}.value; + const changeRef = useRef(false); useEffect(() => { props.value.onChange(defaultValue); @@ -60,14 +84,15 @@ const RatingBasicComp = (function () { useEffect(() => { if (!changeRef.current) return; - props.onEvent("change"); + props.onEvent('change'); changeRef.current = false; }, [value]); return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, children: (
- {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })} + {children.defaultValue.propertyView({ + label: trans('prop.defaultValue'), + })} {children.max.propertyView({ - label: trans("rating.max"), + label: trans('rating.max'), })}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} -
+ {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> +
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} +
{children.allowHalf.propertyView({ - label: trans("rating.allowHalf"), + label: trans('rating.allowHalf'), })}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && children.label.getPropertyView()} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <>
{children.style.getPropertyView()} @@ -124,6 +156,9 @@ const RatingBasicComp = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -133,8 +168,8 @@ const RatingBasicComp = (function () { })(); export const RatingComp = withExposingConfigs(RatingBasicComp, [ - new NameConfig("value", trans("export.ratingValueDesc")), - new NameConfig("max", trans("export.ratingMaxDesc")), + new NameConfig('value', trans('export.ratingValueDesc')), + new NameConfig('max', trans('export.ratingMaxDesc')), ...CommonNameConfig, ]); @@ -156,6 +191,6 @@ const getStyle = (style: RatingStyleType) => { `; }; -export const RateStyled = styled(Rate) <{ $style: RatingStyleType }>` +export const RateStyled = styled(Rate)<{$style: RatingStyleType}>` ${(props) => props.$style && getStyle(props.$style)} `; diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index fd9ce1f18..67345c2bc 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -1,45 +1,57 @@ -import { dropdownControl } from "comps/controls/dropdownControl"; -import { stringExposingStateControl } from "comps/controls/codeStateControl"; -import { AutoHeightControl } from "comps/controls/autoHeightControl"; -import { Section, sectionNames } from "lowcoder-design"; -import styled, { css } from "styled-components"; -import { AlignCenter } from "lowcoder-design"; -import { AlignLeft } from "lowcoder-design"; -import { AlignRight } from "lowcoder-design"; -import { UICompBuilder } from "../generators"; -import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; -import { markdownCompCss, TacoMarkDown } from "lowcoder-design"; -import { styleControl } from "comps/controls/styleControl"; -import { TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { alignWithJustifyControl } from "comps/controls/alignControl"; +import {dropdownControl} from 'comps/controls/dropdownControl'; +import {stringExposingStateControl} from 'comps/controls/codeStateControl'; +import {AutoHeightControl} from 'comps/controls/autoHeightControl'; +import {Section, sectionNames} from 'lowcoder-design'; +import styled, {css} from 'styled-components'; +import {AlignCenter} from 'lowcoder-design'; +import {AlignLeft} from 'lowcoder-design'; +import {AlignRight} from 'lowcoder-design'; +import {UICompBuilder} from '../generators'; +import { + NameConfig, + NameConfigHidden, + withExposingConfigs, +} from '../generators/withExposing'; +import {markdownCompCss, TacoMarkDown} from 'lowcoder-design'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + AnimationStyleType, + TextStyle, + TextStyleType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {alignWithJustifyControl} from 'comps/controls/alignControl'; -import { MarginControl } from "../controls/marginControl"; -import { PaddingControl } from "../controls/paddingControl"; +import {MarginControl} from '../controls/marginControl'; +import {PaddingControl} from '../controls/paddingControl'; -import React, { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import React, {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; const getStyle = (style: TextStyleType) => { return css` - border-radius: ${(style.radius ? style.radius : "4px")}; - border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border}; + border-radius: ${style.radius ? style.radius : '4px'}; + border: ${style.borderWidth ? style.borderWidth : '0px'} solid + ${style.border}; color: ${style.text}; font-size: ${style.textSize} !important; font-weight: ${style.textWeight} !important; font-family: ${style.fontFamily} !important; - font-style:${style.fontStyle} !important; - text-transform:${style.textTransform} !important; - text-decoration:${style.textDecoration} !important; + font-style: ${style.fontStyle} !important; + text-transform: ${style.textTransform} !important; + text-decoration: ${style.textDecoration} !important; background-color: ${style.background}; .markdown-body a { color: ${style.links}; } .markdown-body { - margin: ${style.margin} !important; - padding: ${style.padding}; - width: ${widthCalculator(style.margin)}; + margin: ${style.margin} !important; + padding: ${style.padding}; + width: ${widthCalculator(style.margin)}; // height: ${heightCalculator(style.margin)}; h1 { line-height: 1.5; @@ -72,12 +84,17 @@ const getStyle = (style: TextStyleType) => { `; }; -const TextContainer = styled.div<{ $type: string; $styleConfig: TextStyleType }>` +const TextContainer = styled.div<{ + $type: string; + $styleConfig: TextStyleType; + $animationStyle: AnimationStyleType; +}>` height: 100%; overflow: auto; margin: 0; + ${(props) => props.$animationStyle} ${(props) => - props.$type === "text" && "white-space:break-spaces;line-height: 1.9;"}; + props.$type === 'text' && 'white-space:break-spaces;line-height: 1.9;'}; ${(props) => props.$styleConfig && getStyle(props.$styleConfig)} display: flex; font-size: 13px; @@ -99,33 +116,32 @@ const AlignVerticalCenter = styled(AlignCenter)` const typeOptions = [ { - label: "Markdown", - value: "markdown", + label: 'Markdown', + value: 'markdown', }, { - label: trans("text"), - value: "text", + label: trans('text'), + value: 'text', }, ] as const; const VerticalAlignmentOptions = [ - { label: , value: "flex-start" }, - { label: , value: "center" }, - { label: , value: "flex-end" }, + {label: , value: 'flex-start'}, + {label: , value: 'center'}, + {label: , value: 'flex-end'}, ] as const; - let TextTmpComp = (function () { - const childrenMap = { text: stringExposingStateControl( - "text", - trans("textShow.text", { name: "{{currentUser.name}}" }) + 'text', + trans('textShow.text', {name: '{{currentUser.name}}'}) ), autoHeight: AutoHeightControl, - type: dropdownControl(typeOptions, "markdown"), + type: dropdownControl(typeOptions, 'markdown'), horizontalAlignment: alignWithJustifyControl(), - verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"), + verticalAlignment: dropdownControl(VerticalAlignmentOptions, 'center'), style: styleControl(TextStyle), + animationStyle: styleControl(AnimationStyle), margin: MarginControl, padding: PaddingControl, }; @@ -133,15 +149,20 @@ let TextTmpComp = (function () { const value = props.text.value; return ( - {props.type === "markdown" ? {value} : value} + {props.type === 'markdown' ? ( + {value} + ) : ( + value + )} ); }) @@ -150,36 +171,43 @@ let TextTmpComp = (function () { <>
{children.type.propertyView({ - label: trans("value"), - tooltip: trans("textShow.valueTooltip"), + label: trans('value'), + tooltip: trans('textShow.valueTooltip'), radioButton: true, })} {children.text.propertyView({})}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && (
{hiddenPropertyView(children)}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <>
{children.autoHeight.getPropertyView()} {!children.autoHeight.getView() && children.verticalAlignment.propertyView({ - label: trans("textShow.verticalAlignment"), + label: trans('textShow.verticalAlignment'), radioButton: true, })} {children.horizontalAlignment.propertyView({ - label: trans("textShow.horizontalAlignment"), + label: trans('textShow.horizontalAlignment'), radioButton: true, })}
{children.style.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -195,6 +223,6 @@ TextTmpComp = class extends TextTmpComp { }; export const TextComp = withExposingConfigs(TextTmpComp, [ - new NameConfig("text", trans("textShow.textDesc")), + new NameConfig('text', trans('textShow.textDesc')), NameConfigHidden, ]); diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index 3e71e3b3d..c3881c72b 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -1,15 +1,22 @@ -import { Input, Section, sectionNames } from "lowcoder-design"; -import { BoolControl } from "comps/controls/boolControl"; -import { styleControl } from "comps/controls/styleControl"; -import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants"; +import {Input, Section, sectionNames} from 'lowcoder-design'; +import {BoolControl} from 'comps/controls/boolControl'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + InputFieldStyle, + InputLikeStyle, + InputLikeStyleType, + LabelStyle, + LabelStyleType, +} from 'comps/controls/styleControlConstants'; import { NameConfig, NameConfigPlaceHolder, NameConfigRequired, -} from "comps/generators/withExposing"; -import styled from "styled-components"; -import { UICompBuilder } from "../../generators"; -import { FormDataPropertyView } from "../formComp/formDataConstants"; +} from 'comps/generators/withExposing'; +import styled from 'styled-components'; +import {UICompBuilder} from '../../generators'; +import {FormDataPropertyView} from '../formComp/formDataConstants'; import { fixOldInputCompData, getStyle, @@ -20,27 +27,27 @@ import { TextInputInteractionSection, TextInputValidationSection, useTextInputProps, -} from "./textInputConstants"; +} from './textInputConstants'; import { allowClearPropertyView, hiddenPropertyView, readOnlyPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { IconControl } from "comps/controls/iconControl"; -import { hasIcon } from "comps/utils"; -import { InputRef } from "antd/es/input"; -import { RefControl } from "comps/controls/refControl"; -import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {IconControl} from 'comps/controls/iconControl'; +import {hasIcon} from 'comps/utils'; +import {InputRef} from 'antd/es/input'; +import {RefControl} from 'comps/controls/refControl'; +import {migrateOldData, withDefault} from 'comps/generators/simpleGenerators'; -import React, { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import React, {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; /** * Input Comp */ -const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>` +const InputStyle = styled(Input)<{$style: InputLikeStyleType}>` ${(props) => props.$style && getStyle(props.$style)} `; @@ -54,6 +61,7 @@ const childrenMap = { prefixIcon: IconControl, suffixIcon: IconControl, inputFieldStyle: styleControl(InputLikeStyle), + animationStyle: styleControl(AnimationStyle), }; let InputBasicComp = new UICompBuilder(childrenMap, (props) => { @@ -73,7 +81,8 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { ), style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, ...validateState, }); }) @@ -83,28 +92,50 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && children.label.getPropertyView()} - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <> -
{hiddenPropertyView(children)}
+ {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> + +
+ {hiddenPropertyView(children)} +
- {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} - {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} - {children.showCount.propertyView({ label: trans("prop.showCount") })} + {children.prefixIcon.propertyView({ + label: trans('button.prefixIcon'), + })} + {children.suffixIcon.propertyView({ + label: trans('button.suffixIcon'), + })} + {children.showCount.propertyView({ + label: trans('prop.showCount'), + })} {allowClearPropertyView(children)} {readOnlyPropertyView(children)}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <> -
{children.style.getPropertyView()}
-
{children.labelStyle.getPropertyView()}
-
{children.inputFieldStyle.getPropertyView()}
+
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+
+ {children.inputFieldStyle.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -112,14 +143,13 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { }) .setExposeMethodConfigs(inputRefMethods) .setExposeStateConfigs([ - new NameConfig("value", trans("export.inputValueDesc")), + new NameConfig('value', trans('export.inputValueDesc')), NameConfigPlaceHolder, NameConfigRequired, ...TextInputConfigs, ]) .build(); - const InputComp = migrateOldData(InputBasicComp, fixOldInputCompData); -export { InputComp }; +export {InputComp}; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx index 0c1e5235e..be9048c54 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx @@ -1,30 +1,31 @@ -import { useState, useEffect } from "react"; +import {useState, useEffect} from 'react'; import { NameConfig, NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; -import { BoolControl } from "../../controls/boolControl"; -import { AutoHeightControl } from "../../controls/autoHeightControl"; -import { UICompBuilder } from "../../generators"; -import { FormDataPropertyView } from "../formComp/formDataConstants"; +} from 'comps/generators/withExposing'; +import {Section, sectionNames} from 'lowcoder-design'; +import {BoolControl} from '../../controls/boolControl'; +import {AutoHeightControl} from '../../controls/autoHeightControl'; +import {UICompBuilder} from '../../generators'; +import {FormDataPropertyView} from '../formComp/formDataConstants'; import { checkMentionListData, fixOldInputCompData, textInputChildren, -} from "./textInputConstants"; +} from './textInputConstants'; import { withMethodExposing, refMethods, -} from "../../generators/withMethodExposing"; -import { styleControl } from "comps/controls/styleControl"; -import styled from "styled-components"; +} from '../../generators/withMethodExposing'; +import {styleControl} from 'comps/controls/styleControl'; +import styled from 'styled-components'; import { + AnimationStyle, InputLikeStyle, InputLikeStyleType, -} from "comps/controls/styleControlConstants"; +} from 'comps/controls/styleControlConstants'; import { disabledPropertyView, hiddenPropertyView, @@ -32,40 +33,38 @@ import { minLengthPropertyView, readOnlyPropertyView, requiredPropertyView, -} from "comps/utils/propertyUtils"; -import { booleanExposingStateControl } from "comps/controls/codeStateControl"; -import { trans } from "i18n"; -import { RefControl } from "comps/controls/refControl"; -import { TextAreaRef } from "antd/es/input/TextArea"; -import { default as ConfigProvider } from "antd/es/config-provider"; -import { default as Mentions, type MentionsOptionProps } from "antd/es/mentions"; -import { blurMethod, focusWithOptions } from "comps/utils/methodUtils"; -import { - textInputValidate, -} from "../textInputComp/textInputConstants"; -import { jsonControl } from "comps/controls/codeControl"; +} from 'comps/utils/propertyUtils'; +import {booleanExposingStateControl} from 'comps/controls/codeStateControl'; +import {trans} from 'i18n'; +import {RefControl} from 'comps/controls/refControl'; +import {TextAreaRef} from 'antd/es/input/TextArea'; +import {default as ConfigProvider} from 'antd/es/config-provider'; +import {default as Mentions, type MentionsOptionProps} from 'antd/es/mentions'; +import {blurMethod, focusWithOptions} from 'comps/utils/methodUtils'; +import {textInputValidate} from '../textInputComp/textInputConstants'; +import {jsonControl} from 'comps/controls/codeControl'; import { submitEvent, eventHandlerControl, mentionEvent, focusEvent, blurEvent, - changeEvent -} from "comps/controls/eventHandlerControl"; + changeEvent, +} from 'comps/controls/eventHandlerControl'; -import React, { useContext } from "react"; -import { EditorContext } from "comps/editorState"; -import { migrateOldData } from "comps/generators/simpleGenerators"; +import React, {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; const Wrapper = styled.div<{ $style: InputLikeStyleType; }>` - box-sizing:border-box; + box-sizing: border-box; .rc-textarea { - background-color:${(props) => props.$style.background}; - padding:${(props) => props.$style.padding}; - text-transform:${(props)=>props.$style.textTransform}; - text-decoration:${(props)=>props.$style.textDecoration}; + background-color: ${(props) => props.$style.background}; + padding: ${(props) => props.$style.padding}; + text-transform: ${(props) => props.$style.textTransform}; + text-decoration: ${(props) => props.$style.textDecoration}; margin: 0px 3px 0px 3px !important; } @@ -96,51 +95,52 @@ let MentionTmpComp = (function () { allowClear: BoolControl, autoHeight: AutoHeightControl, style: styleControl(InputLikeStyle), + animationStyle: styleControl(AnimationStyle), mentionList: jsonControl(checkMentionListData, { - "@": ["Li Lei", "Han Meimei"], - "#": ["123", "456", "789"], + '@': ['Li Lei', 'Han Meimei'], + '#': ['123', '456', '789'], }), onEvent: eventHandlerControl(EventOptions), - invalid: booleanExposingStateControl("invalid"), + invalid: booleanExposingStateControl('invalid'), }; return new UICompBuilder(childrenMap, (props) => { - const { mentionList } = props; + const {mentionList} = props; const [validateState, setvalidateState] = useState({}); const [activationFlag, setActivationFlag] = useState(false); - const [prefix, setPrefix] = useState("@"); - type PrefixType = "@" | keyof typeof mentionList; + const [prefix, setPrefix] = useState('@'); + type PrefixType = '@' | keyof typeof mentionList; const onSearch = (_: string, newPrefix: PrefixType) => { setPrefix(newPrefix); }; const onChange = (value: string) => { props.value.onChange(value); - props.onEvent("change"); + props.onEvent('change'); }; const onPressEnter = (e: any) => { if (e.shiftKey) { e.preventDefault(); - props.onEvent("submit"); + props.onEvent('submit'); } }; const onSelect = (option: MentionsOptionProps) => { - props.onEvent("mention"); + props.onEvent('mention'); }; - const getValidate = (value: any): "" | "warning" | "error" | undefined => { + const getValidate = (value: any): '' | 'warning' | 'error' | undefined => { if ( - value.hasOwnProperty("validateStatus") && - value["validateStatus"] === "error" + value.hasOwnProperty('validateStatus') && + value['validateStatus'] === 'error' ) - return "error"; - return ""; + return 'error'; + return ''; }; const getTextInputValidate = () => { return { - value: { value: props.value.value }, + value: {value: props.value.value}, required: props.required, minLength: props?.minLength ?? 0, maxLength: props?.maxLength ?? 0, @@ -154,7 +154,7 @@ let MentionTmpComp = (function () { if (activationFlag) { const temp = textInputValidate(getTextInputValidate()); setvalidateState(temp); - props.invalid.onChange(temp.validateStatus !== ""); + props.invalid.onChange(temp.validateStatus !== ''); } }, [ props.value.value, @@ -184,9 +184,9 @@ let MentionTmpComp = (function () { prefix={Object.keys(mentionList)} onFocus={() => { setActivationFlag(true); - props.onEvent("focus"); + props.onEvent('focus'); }} - onBlur={() => props.onEvent("blur")} + onBlur={() => props.onEvent('blur')} onPressEnter={onPressEnter} onSearch={onSearch} onChange={onChange} @@ -202,15 +202,15 @@ let MentionTmpComp = (function () { }))} autoSize={props.autoHeight} style={{ - height: "100%", - maxHeight: "100%", - resize: "none", + height: '100%', + maxHeight: '100%', + resize: 'none', // padding: props.style.padding, fontStyle: props.style.fontStyle, fontFamily: props.style.fontFamily, borderWidth: props.style.borderWidth, fontWeight: props.style.textWeight, - fontSize: props.style.textSize + fontSize: props.style.textSize, }} readOnly={props.readOnly} /> @@ -218,58 +218,73 @@ let MentionTmpComp = (function () { ), style: props.style, + animationStyle: props.animationStyle, ...validateState, }); }) .setPropertyViewFn((children) => ( <>
- {children.value.propertyView({ label: trans("prop.defaultValue") })} + {children.value.propertyView({label: trans('prop.defaultValue')})} {children.placeholder.propertyView({ - label: trans("prop.placeholder"), + label: trans('prop.placeholder'), })} - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && children.mentionList.propertyView({ - label: trans("mention.mentionList"), - }) - )} + label: trans('mention.mentionList'), + })}
- {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && children.label.getPropertyView()} - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} -
-
{hiddenPropertyView(children)}
+ {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> +
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} +
+
+ {hiddenPropertyView(children)} +
{readOnlyPropertyView(children)} -
+
+
{requiredPropertyView(children)} {children.validationType.propertyView({ - label: trans("prop.textType"), + label: trans('prop.textType'), })} {minLengthPropertyView(children)} {maxLengthPropertyView(children)} {children.customRule.propertyView({})} -
+
+ )} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
- {children.style.getPropertyView()} -
+ {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} )) .build(); })(); - MentionTmpComp = class extends MentionTmpComp { override autoHeight(): boolean { return this.children.autoHeight.getView(); @@ -284,10 +299,10 @@ const TextareaTmp2Comp = withMethodExposing( ); export const MentionComp = withExposingConfigs(TextareaTmp2Comp, [ - new NameConfig("value", trans("export.inputValueDesc")), + new NameConfig('value', trans('export.inputValueDesc')), NameConfigPlaceHolder, NameConfigRequired, - new NameConfig("invalid", trans("export.invalidDesc")), - new NameConfig("hidden", trans("export.hiddenDesc")), - new NameConfig("disabled", trans("export.disabledDesc")), + new NameConfig('invalid', trans('export.invalidDesc')), + new NameConfig('hidden', trans('export.hiddenDesc')), + new NameConfig('disabled', trans('export.disabledDesc')), ]); diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index ca005ea32..35efe6941 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -1,17 +1,17 @@ -import { default as InputPassword } from "antd/es/input/Password"; -import { InputRef } from "antd/es/input"; +import {default as InputPassword} from 'antd/es/input/Password'; +import {InputRef} from 'antd/es/input'; import { NameConfig, NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; -import { BoolControl } from "../../controls/boolControl"; -import { dropdownControl } from "../../controls/dropdownControl"; -import { LabelControl } from "../../controls/labelControl"; -import { UICompBuilder, withDefault } from "../../generators"; -import { FormDataPropertyView } from "../formComp/formDataConstants"; +} from 'comps/generators/withExposing'; +import {Section, sectionNames} from 'lowcoder-design'; +import {BoolControl} from '../../controls/boolControl'; +import {dropdownControl} from '../../controls/dropdownControl'; +import {LabelControl} from '../../controls/labelControl'; +import {UICompBuilder, withDefault} from '../../generators'; +import {FormDataPropertyView} from '../formComp/formDataConstants'; import { fixOldInputCompData, getStyle, @@ -22,11 +22,17 @@ import { TextInputInteractionSection, TextInputValidationOptions, useTextInputProps, -} from "./textInputConstants"; -import { withMethodExposing } from "../../generators/withMethodExposing"; -import { styleControl } from "comps/controls/styleControl"; -import styled from "styled-components"; -import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +} from './textInputConstants'; +import {withMethodExposing} from '../../generators/withMethodExposing'; +import {styleControl} from 'comps/controls/styleControl'; +import styled from 'styled-components'; +import { + AnimationStyle, + InputFieldStyle, + InputLikeStyle, + InputLikeStyleType, + LabelStyle, +} from 'comps/controls/styleControlConstants'; import { hiddenPropertyView, minLengthPropertyView, @@ -34,16 +40,16 @@ import { requiredPropertyView, regexPropertyView, maxLengthPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { IconControl } from "comps/controls/iconControl"; -import { hasIcon } from "comps/utils"; -import { RefControl } from "comps/controls/refControl"; -import React, { useContext } from "react"; -import { EditorContext } from "comps/editorState"; -import { migrateOldData } from "comps/generators/simpleGenerators"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {IconControl} from 'comps/controls/iconControl'; +import {hasIcon} from 'comps/utils'; +import {RefControl} from 'comps/controls/refControl'; +import React, {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; -const PasswordStyle = styled(InputPassword) <{ +const PasswordStyle = styled(InputPassword)<{ $style: InputLikeStyleType; }>` ${(props) => props.$style && getStyle(props.$style)} @@ -53,13 +59,14 @@ let PasswordTmpComp = (function () { const childrenMap = { ...textInputChildren, viewRef: RefControl, - label: withDefault(LabelControl, { text: trans("password.label") }), - validationType: dropdownControl(TextInputValidationOptions, "Regex"), + label: withDefault(LabelControl, {text: trans('password.label')}), + validationType: dropdownControl(TextInputValidationOptions, 'Regex'), visibilityToggle: BoolControl.DEFAULT_TRUE, prefixIcon: IconControl, style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle: styleControl(LabelStyle), - inputFieldStyle: styleControl(InputLikeStyle) + inputFieldStyle: styleControl(InputLikeStyle), + animationStyle: styleControl(AnimationStyle), }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); @@ -76,7 +83,8 @@ let PasswordTmpComp = (function () { ), style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, ...validateState, }); }) @@ -86,33 +94,53 @@ let PasswordTmpComp = (function () { - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && children.label.getPropertyView()} - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <> -
{hiddenPropertyView(children)}
+ {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> + +
+ {hiddenPropertyView(children)} +
{children.visibilityToggle.propertyView({ - label: trans("password.visibilityToggle"), + label: trans('password.visibilityToggle'), })} {readOnlyPropertyView(children)} - {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} -
+ {children.prefixIcon.propertyView({ + label: trans('button.prefixIcon'), + })} +
+
{requiredPropertyView(children)} {regexPropertyView(children)} {minLengthPropertyView(children)} {maxLengthPropertyView(children)} {children.customRule.propertyView({})} -
+
+ )} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <> -
{children.style.getPropertyView()}
-
{children.labelStyle.getPropertyView()}
-
{children.inputFieldStyle.getPropertyView()}
+
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+
+ {children.inputFieldStyle.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -126,7 +154,7 @@ PasswordTmpComp = migrateOldData(PasswordTmpComp, fixOldInputCompData); const PasswordTmp2Comp = withMethodExposing(PasswordTmpComp, inputRefMethods); export const PasswordComp = withExposingConfigs(PasswordTmp2Comp, [ - new NameConfig("value", trans("export.inputValueDesc")), + new NameConfig('value', trans('export.inputValueDesc')), NameConfigPlaceHolder, NameConfigRequired, ...TextInputConfigs, diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index 530ce4afe..f30f17c45 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -3,12 +3,12 @@ import { NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; -import { BoolControl } from "../../controls/boolControl"; -import { AutoHeightControl } from "../../controls/autoHeightControl"; -import { UICompBuilder, withDefault } from "../../generators"; -import { FormDataPropertyView } from "../formComp/formDataConstants"; +} from 'comps/generators/withExposing'; +import {Section, sectionNames} from 'lowcoder-design'; +import {BoolControl} from '../../controls/boolControl'; +import {AutoHeightControl} from '../../controls/autoHeightControl'; +import {UICompBuilder, withDefault} from '../../generators'; +import {FormDataPropertyView} from '../formComp/formDataConstants'; import { fixOldInputCompData, getStyle, @@ -18,27 +18,36 @@ import { TextInputInteractionSection, TextInputValidationSection, useTextInputProps, -} from "./textInputConstants"; -import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; -import { styleControl } from "comps/controls/styleControl"; -import styled from "styled-components"; -import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; -import { TextArea } from "components/TextArea"; +} from './textInputConstants'; +import { + withMethodExposing, + refMethods, +} from '../../generators/withMethodExposing'; +import {styleControl} from 'comps/controls/styleControl'; +import styled from 'styled-components'; +import { + AnimationStyle, + InputFieldStyle, + InputLikeStyle, + InputLikeStyleType, + LabelStyle, +} from 'comps/controls/styleControlConstants'; +import {TextArea} from 'components/TextArea'; import { allowClearPropertyView, hiddenPropertyView, readOnlyPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { RefControl } from "comps/controls/refControl"; -import { TextAreaRef } from "antd/es/input/TextArea"; -import { blurMethod, focusWithOptions } from "comps/utils/methodUtils"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {RefControl} from 'comps/controls/refControl'; +import {TextAreaRef} from 'antd/es/input/TextArea'; +import {blurMethod, focusWithOptions} from 'comps/utils/methodUtils'; -import React, { useContext } from "react"; -import { EditorContext } from "comps/editorState"; -import { migrateOldData } from "comps/generators/simpleGenerators"; +import React, {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; -const TextAreaStyled = styled(TextArea) <{ +const TextAreaStyled = styled(TextArea)<{ $style: InputLikeStyleType; }>` ${(props) => props.$style && getStyle(props.$style)} @@ -48,9 +57,9 @@ const Wrapper = styled.div<{ $style: InputLikeStyleType; }>` height: 100% !important; - - .ant-input { - height:100% !important; + + .ant-input { + height: 100% !important; } .ant-input-clear-icon { @@ -70,29 +79,31 @@ let TextAreaTmpComp = (function () { ...textInputChildren, viewRef: RefControl, allowClear: BoolControl, - autoHeight: withDefault(AutoHeightControl, "fixed"), + autoHeight: withDefault(AutoHeightControl, 'fixed'), style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle: styleControl(LabelStyle), - inputFieldStyle: styleControl(InputLikeStyle) + inputFieldStyle: styleControl(InputLikeStyle), + animationStyle: styleControl(AnimationStyle), }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); return props.label({ required: props.required, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, children: ( ), style: props.style, labelStyle: props.labelStyle, + animationStyle: props.animationStyle, ...validateState, }); }) @@ -101,12 +112,15 @@ let TextAreaTmpComp = (function () { - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && children.label.getPropertyView()} - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <> + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> +
{children.autoHeight.getPropertyView()} {hiddenPropertyView(children)} @@ -115,14 +129,26 @@ let TextAreaTmpComp = (function () { {allowClearPropertyView(children)} {readOnlyPropertyView(children)}
- + + )} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <> -
{children.style.getPropertyView()}
-
{children.labelStyle.getPropertyView()}
-
{children.inputFieldStyle.getPropertyView()}
+
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+
+ {children.inputFieldStyle.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -144,7 +170,7 @@ const TextareaTmp2Comp = withMethodExposing( ); export const TextAreaComp = withExposingConfigs(TextareaTmp2Comp, [ - new NameConfig("value", trans("export.inputValueDesc")), + new NameConfig('value', trans('export.inputValueDesc')), NameConfigPlaceHolder, NameConfigRequired, ...TextInputConfigs, From d5f451a09d17d40fd70740c7e9a57bd82ac28045 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 04:32:08 +0500 Subject: [PATCH 024/155] animation styles added to timer --- .../lowcoder/src/comps/comps/timerComp.tsx | 363 +++++++++++------- 1 file changed, 218 insertions(+), 145 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx index ef8575e53..ef65fd1a7 100644 --- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx @@ -1,44 +1,70 @@ -import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core"; -import { styleControl } from "comps/controls/styleControl"; -import { startButtonStyle, StartButtonStyleType, timerStyle, timerStyleType } from "comps/controls/styleControlConstants"; -import { UICompBuilder } from "comps/generators/uiCompBuilder"; -import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { Button, Space } from "antd"; -import { countdownEvent, eventHandlerControl, pauseEvent, resetEvent, resumeEvent, startEvent } from "../controls/eventHandlerControl"; -import styled from "styled-components"; -import { useContext, useState, useEffect, useMemo } from "react"; -import { stateComp } from "../generators"; -import { EditorContext } from "comps/editorState"; -import { dropdownControl } from "../controls/dropdownControl"; -import { stringExposingStateControl } from "comps/controls/codeStateControl"; -import { BoolControl } from "comps/controls/boolControl"; +import { + CompAction, + RecordConstructorToView, + changeChildAction, +} from 'lowcoder-core'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + AnimationStyleType, + startButtonStyle, + StartButtonStyleType, + timerStyle, + timerStyleType, +} from 'comps/controls/styleControlConstants'; +import {UICompBuilder} from 'comps/generators/uiCompBuilder'; +import { + NameConfig, + NameConfigHidden, + withExposingConfigs, +} from 'comps/generators/withExposing'; +import {Section, sectionNames} from 'lowcoder-design'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {Button, Space} from 'antd'; +import { + countdownEvent, + eventHandlerControl, + pauseEvent, + resetEvent, + resumeEvent, + startEvent, +} from '../controls/eventHandlerControl'; +import styled from 'styled-components'; +import {useContext, useState, useEffect, useMemo} from 'react'; +import {stateComp} from '../generators'; +import {EditorContext} from 'comps/editorState'; +import {dropdownControl} from '../controls/dropdownControl'; +import {stringExposingStateControl} from 'comps/controls/codeStateControl'; +import {BoolControl} from 'comps/controls/boolControl'; -const Container = styled.div<{ $style: timerStyleType | undefined }>` +const Container = styled.div<{ + $style: timerStyleType | undefined; + $animationStyle: AnimationStyleType; +}>` align-items: center; cursor: pointer; font-size: 2.9em; text-align: center; word-wrap: break-word; line-height: initial; - background-color: ${props => props.$style?.background}; - font-weight: ${props=>props?.$style?.textWeight}; -border-radius: ${props=>props?.$style?.radius}; -font-size: ${props=>props?.$style?.textSize}; -rotate: ${props=>props?.$style?.rotation}; -text-transform: ${props=>props?.$style?.textTransform}; -color: ${props=>props?.$style?.text}; -border: ${props => props?.$style?.border}; -border-style: ${props=>props?.$style?.borderStyle}; -border-width: ${props=>props?.$style?.borderWidth}; -font-family: ${props=>props?.$style?.fontFamily}; -font-style: ${props=>props?.$style?.fontStyle}; -margin: ${props=>props?.$style?.margin}; -padding: ${props=>props?.$style?.padding}; -background: ${props=>props?.$style?.background}; -text-decoration: ${props=>props?.$style?.textDecoration}; + ${(props) => props.$animationStyle} + background-color: ${(props) => props.$style?.background}; + font-weight: ${(props) => props?.$style?.textWeight}; + border-radius: ${(props) => props?.$style?.radius}; + font-size: ${(props) => props?.$style?.textSize}; + rotate: ${(props) => props?.$style?.rotation}; + text-transform: ${(props) => props?.$style?.textTransform}; + color: ${(props) => props?.$style?.text}; + border: ${(props) => props?.$style?.border}; + border-style: ${(props) => props?.$style?.borderStyle}; + border-width: ${(props) => props?.$style?.borderWidth}; + font-family: ${(props) => props?.$style?.fontFamily}; + font-style: ${(props) => props?.$style?.fontStyle}; + margin: ${(props) => props?.$style?.margin}; + padding: ${(props) => props?.$style?.padding}; + background: ${(props) => props?.$style?.background}; + text-decoration: ${(props) => props?.$style?.textDecoration}; `; const ButtonWarrper = styled.div` @@ -51,27 +77,25 @@ const ButtonWarrper = styled.div` margin-top: 10px; `; -const StyledButton = styled(Button)<{ $style: StartButtonStyleType }>` -background-color: ${props=>props.$style.background}; -font-weight: ${props=>props.$style.textWeight}; -border-radius: ${props=>props.$style.radius}; -font-size: ${props=>props.$style.textSize}; -rotate: ${props=>props.$style.rotation}; -text-transform: ${props=>props.$style.textTransform}; -color: ${props=>props.$style.text}; -border: ${props => props.$style.border}; -border-style: ${props=>props.$style.borderStyle}; -border-width: ${props=>props.$style.borderWidth}; -font-family: ${props=>props.$style.fontFamily}; -font-style: ${props=>props.$style.fontStyle}; -margin: ${props=>props.$style.margin}; -padding: ${props=>props.$style.padding}; -background: ${props=>props.$style.background}; -text-decoration: ${props=>props.$style.textDecoration}; +const StyledButton = styled(Button)<{$style: StartButtonStyleType}>` + background-color: ${(props) => props.$style.background}; + font-weight: ${(props) => props.$style.textWeight}; + border-radius: ${(props) => props.$style.radius}; + font-size: ${(props) => props.$style.textSize}; + rotate: ${(props) => props.$style.rotation}; + text-transform: ${(props) => props.$style.textTransform}; + color: ${(props) => props.$style.text}; + border: ${(props) => props.$style.border}; + border-style: ${(props) => props.$style.borderStyle}; + border-width: ${(props) => props.$style.borderWidth}; + font-family: ${(props) => props.$style.fontFamily}; + font-style: ${(props) => props.$style.fontStyle}; + margin: ${(props) => props.$style.margin}; + padding: ${(props) => props.$style.padding}; + background: ${(props) => props.$style.background}; + text-decoration: ${(props) => props.$style.textDecoration}; `; - - function formatTimeDifference(timeDifference: number) { // 计算时、分、秒、毫秒 const hours = Math.floor(timeDifference / (1000 * 60 * 60)); @@ -88,19 +112,26 @@ function padZero(number: number, length = 2) { return String(number).padStart(length, '0'); } -const EventOptions = [countdownEvent, startEvent, pauseEvent, resumeEvent, resetEvent] as const; +const EventOptions = [ + countdownEvent, + startEvent, + pauseEvent, + resumeEvent, + resetEvent, +] as const; const timerTypeOptions = [ - { label: trans("timer.timer"), value: "timer" }, - { label: trans("timer.countdown"), value: "countdown" }, + {label: trans('timer.timer'), value: 'timer'}, + {label: trans('timer.countdown'), value: 'countdown'}, ] as const; const childrenMap = { style: styleControl(timerStyle), + animationStyle: styleControl(AnimationStyle), startButtonStyle: styleControl(startButtonStyle), resetButtonStyle: styleControl(startButtonStyle), onEvent: eventHandlerControl(EventOptions), - defaultValue: stringExposingStateControl("defaultValue", '00:00:00:000'), + defaultValue: stringExposingStateControl('defaultValue', '00:00:00:000'), timerType: dropdownControl(timerTypeOptions, 'timer'), elapsedTime: stateComp(0), timerState: stateComp('stoped'), @@ -108,109 +139,134 @@ const childrenMap = { hideButton: BoolControl, }; -const AvatarGroupView = (props: RecordConstructorToView & { dispatch: (action: CompAction) => void; }) => { - const [startTime, setStartTime] = useState(0) - const [timerState, setTimerState] = useState('stoped') - const [elapsedTime, setElapsedTime] = useState(0) +const AvatarGroupView = ( + props: RecordConstructorToView & { + dispatch: (action: CompAction) => void; + } +) => { + const [startTime, setStartTime] = useState(0); + const [timerState, setTimerState] = useState('stoped'); + const [elapsedTime, setElapsedTime] = useState(0); const [intervalId, setIntervalId] = useState(0); const [buttonState, setButtonState] = useState(true); useEffect(() => { if (props.actionHandler != '') { - if (props.actionHandler === 'start') startAction() - else if (props.actionHandler === 'pause') pauseAction() - else if (props.actionHandler === 'resume') resumeAction() - else if (props.actionHandler === 'reset') resetAction() - props.dispatch(changeChildAction("actionHandler", '', true)); + if (props.actionHandler === 'start') startAction(); + else if (props.actionHandler === 'pause') pauseAction(); + else if (props.actionHandler === 'resume') resumeAction(); + else if (props.actionHandler === 'reset') resetAction(); + props.dispatch(changeChildAction('actionHandler', '', true)); } - }, [props.actionHandler]) + }, [props.actionHandler]); useEffect(() => { if (timerState === 'stoped') { - setElapsedTime(getDefaultValueMS) + setElapsedTime(getDefaultValueMS); } - }, [props.defaultValue.value]) + }, [props.defaultValue.value]); useEffect(() => { if (timerState === 'started') { - startTimer() + startTimer(); } - }, [startTime]) + }, [startTime]); useEffect(() => { if (timerState === 'stoped' && intervalId) { - intervalId && clearInterval(intervalId) + intervalId && clearInterval(intervalId); } - props.dispatch(changeChildAction("timerState", timerState, false)); - }, [timerState]) + props.dispatch(changeChildAction('timerState', timerState, false)); + }, [timerState]); const getDefaultValueMS = useMemo(() => { - const [HH, MM, SS, MS] = (props.defaultValue.value && props.defaultValue.value.split(':')) || []; - let totleMS = parseInt(HH, 10) * 3600000 + parseInt(MM, 10) * 60000 + parseInt(SS, 10) * 1000 + parseInt(MS, 10) + const [HH, MM, SS, MS] = + (props.defaultValue.value && props.defaultValue.value.split(':')) || []; + let totleMS = + parseInt(HH, 10) * 3600000 + + parseInt(MM, 10) * 60000 + + parseInt(SS, 10) * 1000 + + parseInt(MS, 10); return isNaN(totleMS) ? 0 : totleMS; - }, [props.defaultValue.value]) + }, [props.defaultValue.value]); const startTimer = () => { setIntervalId( - Number(setInterval(() => { - let temp = props.timerType === 'timer' ? Date.now() - startTime : getDefaultValueMS - (Date.now() - startTime) - if (temp <= 0) { - setTimerState('stoped') - props.onEvent('countdown') - setButtonState(false) - temp = 0 - } - setElapsedTime(temp) - props.dispatch(changeChildAction("elapsedTime", temp, false)); - }, 18)) - ) - } + Number( + setInterval(() => { + let temp = + props.timerType === 'timer' + ? Date.now() - startTime + : getDefaultValueMS - (Date.now() - startTime); + if (temp <= 0) { + setTimerState('stoped'); + props.onEvent('countdown'); + setButtonState(false); + temp = 0; + } + setElapsedTime(temp); + props.dispatch(changeChildAction('elapsedTime', temp, false)); + }, 18) + ) + ); + }; const startAction = () => { - setTimerState('started') - props.onEvent('start') - setStartTime(props.timerType === 'timer' ? Date.now() - getDefaultValueMS : Date.now()) - } + setTimerState('started'); + props.onEvent('start'); + setStartTime( + props.timerType === 'timer' ? Date.now() - getDefaultValueMS : Date.now() + ); + }; const pauseAction = () => { - intervalId && clearInterval(intervalId) - setTimerState('paused') - props.onEvent('pause') - } + intervalId && clearInterval(intervalId); + setTimerState('paused'); + props.onEvent('pause'); + }; const resumeAction = () => { - setStartTime(props.timerType === 'timer' ? Date.now() - elapsedTime : Date.now() - (getDefaultValueMS - elapsedTime)) - setTimerState('started') - props.onEvent('resume') - } + setStartTime( + props.timerType === 'timer' + ? Date.now() - elapsedTime + : Date.now() - (getDefaultValueMS - elapsedTime) + ); + setTimerState('started'); + props.onEvent('resume'); + }; const resetAction = () => { - intervalId && clearInterval(intervalId) - setTimerState('stoped') - setElapsedTime(getDefaultValueMS) - setButtonState(true) - props.onEvent('reset') - } + intervalId && clearInterval(intervalId); + setTimerState('stoped'); + setElapsedTime(getDefaultValueMS); + setButtonState(true); + props.onEvent('reset'); + }; return ( - + {formatTimeDifference(elapsedTime)} @@ -219,20 +275,24 @@ const AvatarGroupView = (props: RecordConstructorToView & { }; let AvatarGroupBasicComp = (function () { - return new UICompBuilder(childrenMap, (props, dispatch) => ) + return new UICompBuilder(childrenMap, (props, dispatch) => ( + + )) .setPropertyViewFn((children) => ( <> - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <>
{children.timerType.propertyView({ - label: trans('timer.timerType') + label: trans('timer.timerType'), })} {children.defaultValue.propertyView({ - label: trans('timer.defaultValue') + label: trans('timer.defaultValue'), })} {children.hideButton.propertyView({ - label: trans('timer.hideButton') + label: trans('timer.hideButton'), })}
@@ -242,17 +302,22 @@ let AvatarGroupBasicComp = (function () { )} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <> -
- {children.style.getPropertyView()} -
-
- {children.startButtonStyle.getPropertyView()} -
-
- {children.resetButtonStyle.getPropertyView()} -
+
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+
+ {children.startButtonStyle.getPropertyView()} +
+
+ {children.resetButtonStyle.getPropertyView()} +
)} @@ -260,27 +325,35 @@ let AvatarGroupBasicComp = (function () { .setExposeMethodConfigs([ { method: { - name: "start/pause", - description: trans("timer.startPause"), + name: 'start/pause', + description: trans('timer.startPause'), params: [], }, execute: async (comp, params) => { if (comp.children.timerState.value === 'stoped') - comp.children.actionHandler.dispatch(comp.children.actionHandler.changeValueAction('start')) + comp.children.actionHandler.dispatch( + comp.children.actionHandler.changeValueAction('start') + ); else if (comp.children.timerState.value === 'paused') - comp.children.actionHandler.dispatch(comp.children.actionHandler.changeValueAction('resume')) + comp.children.actionHandler.dispatch( + comp.children.actionHandler.changeValueAction('resume') + ); else if (comp.children.timerState.value === 'started') - comp.children.actionHandler.dispatch(comp.children.actionHandler.changeValueAction('pause')) + comp.children.actionHandler.dispatch( + comp.children.actionHandler.changeValueAction('pause') + ); }, }, { method: { - name: "reset", - description: trans("timer.reset"), + name: 'reset', + description: trans('timer.reset'), params: [], }, execute: async (comp, params) => { - comp.children.actionHandler.dispatch(comp.children.actionHandler.changeValueAction('reset')) + comp.children.actionHandler.dispatch( + comp.children.actionHandler.changeValueAction('reset') + ); }, }, ]) @@ -288,8 +361,8 @@ let AvatarGroupBasicComp = (function () { })(); export const TimerComp = withExposingConfigs(AvatarGroupBasicComp, [ - new NameConfig("defaultValue", trans("timer.defaultValue")), - new NameConfig("elapsedTime", trans("timer.elapsedTime")), - new NameConfig("timerState", trans("timer.timerState")), + new NameConfig('defaultValue', trans('timer.defaultValue')), + new NameConfig('elapsedTime', trans('timer.elapsedTime')), + new NameConfig('timerState', trans('timer.timerState')), NameConfigHidden, ]); From 13f7396a73f7ed796fd0412f8b5c1189c7e4f58e Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 16:26:18 +0500 Subject: [PATCH 025/155] animation style --- .../src/comps/comps/buttonComp/linkComp.tsx | 130 ++++--- .../comps/buttonComp/toggleButtonComp.tsx | 153 +++++--- .../comps/comps/commentComp/commentComp.tsx | 266 +++++++------- .../lowcoder/src/comps/comps/dividerComp.tsx | 119 ++++--- .../comps/comps/jsonComp/jsonEditorComp.tsx | 101 ++++-- .../comps/comps/jsonComp/jsonExplorerComp.tsx | 121 ++++--- .../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 256 ++++++++------ .../src/comps/comps/navComp/navComp.tsx | 183 ++++++---- .../src/comps/comps/progressCircleComp.tsx | 86 +++-- .../lowcoder/src/comps/comps/progressComp.tsx | 90 +++-- .../responsiveLayout/responsiveLayout.tsx | 329 +++++++++++------- .../comps/selectInputComp/cascaderComp.tsx | 102 +++--- .../selectInputComp/cascaderContants.tsx | 83 +++-- .../comps/selectInputComp/checkboxComp.tsx | 123 ++++--- .../comps/comps/selectInputComp/radioComp.tsx | 66 ++-- .../selectInputComp/radioCompConstants.tsx | 122 ++++--- .../selectInputComp/segmentedControl.tsx | 152 ++++---- .../lowcoder/src/comps/comps/switchComp.tsx | 124 ++++--- 18 files changed, 1605 insertions(+), 1001 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index 274a29e13..cb19cbfb5 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -1,29 +1,45 @@ -import { default as Button } from "antd/es/button"; -import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants"; -import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; -import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl"; -import { styleControl } from "comps/controls/styleControl"; -import { LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants"; -import { withDefault } from "comps/generators"; -import { migrateOldData } from "comps/generators/simpleGenerators"; -import { UICompBuilder } from "comps/generators/uiCompBuilder"; -import { Section, sectionNames } from "lowcoder-design"; -import styled from "styled-components"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import {default as Button} from 'antd/es/button'; +import { + ButtonCompWrapper, + buttonRefMethods, +} from 'comps/comps/buttonComp/buttonCompConstants'; +import {BoolCodeControl, StringControl} from 'comps/controls/codeControl'; +import {ButtonEventHandlerControl} from 'comps/controls/eventHandlerControl'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + AnimationStyleType, + LinkStyle, + LinkStyleType, +} from 'comps/controls/styleControlConstants'; +import {withDefault} from 'comps/generators'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; +import {UICompBuilder} from 'comps/generators/uiCompBuilder'; +import {Section, sectionNames} from 'lowcoder-design'; +import styled from 'styled-components'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; import { hiddenPropertyView, disabledPropertyView, loadingPropertyView, -} from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { IconControl } from "comps/controls/iconControl"; -import { hasIcon } from "comps/utils"; -import { RefControl } from "comps/controls/refControl"; +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {IconControl} from 'comps/controls/iconControl'; +import {hasIcon} from 'comps/utils'; +import {RefControl} from 'comps/controls/refControl'; -import { EditorContext } from "comps/editorState"; -import React, { useContext } from "react"; +import {EditorContext} from 'comps/editorState'; +import React, {useContext} from 'react'; -const Link = styled(Button) <{ $style: LinkStyleType }>` +const Link = styled(Button)<{ + $style: LinkStyleType; + $animationStyle: AnimationStyleType; +}>` + ${(props) => props.$animationStyle} ${(props) => ` color: ${props.$style.text}; margin: ${props.$style.margin}; @@ -33,9 +49,9 @@ const Link = styled(Button) <{ $style: LinkStyleType }>` font-family:${props.$style.fontFamily}; font-weight:${props.$style.textWeight}; border: ${props.$style.borderWidth} solid ${props.$style.border}; - border-radius:${props.$style.radius ? props.$style.radius:'0px'}; - text-transform:${props.$style.textTransform ? props.$style.textTransform:''}; - text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important; + border-radius:${props.$style.radius ? props.$style.radius : '0px'}; + text-transform:${props.$style.textTransform ? props.$style.textTransform : ''}; + text-decoration:${props.$style.textDecoration ? props.$style.textDecoration : ''} !important; background-color: ${props.$style.background}; &:hover { color: ${props.$style.hoverText} !important; @@ -45,7 +61,7 @@ const Link = styled(Button) <{ $style: LinkStyleType }>` } `} - &.ant-btn { + &.ant-btn { display: inline-flex; align-items: center; > span { @@ -66,7 +82,7 @@ const IconWrapper = styled.span` * compatible with old data 2022-08-26 */ function fixOldData(oldData: any) { - if (oldData && oldData.hasOwnProperty("color")) { + if (oldData && oldData.hasOwnProperty('color')) { return { text: oldData.color, }; @@ -76,33 +92,40 @@ function fixOldData(oldData: any) { const LinkTmpComp = (function () { const childrenMap = { - text: withDefault(StringControl, trans("link.link")), + text: withDefault(StringControl, trans('link.link')), onEvent: ButtonEventHandlerControl, disabled: BoolCodeControl, loading: BoolCodeControl, style: migrateOldData(styleControl(LinkStyle), fixOldData), + animationStyle: styleControl(AnimationStyle), prefixIcon: IconControl, suffixIcon: IconControl, viewRef: RefControl, }; return new UICompBuilder(childrenMap, (props) => { // chrome86 bug: button children should not contain only empty span - const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon); + const hasChildren = + hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon); return ( props.onEvent("click")} - type={"link"} + onClick={() => props.onEvent('click')} + type={'link'} > {hasChildren && ( - {hasIcon(props.prefixIcon) && {props.prefixIcon}} + {hasIcon(props.prefixIcon) && ( + {props.prefixIcon} + )} {!!props.text && props.text} - {hasIcon(props.suffixIcon) && {props.suffixIcon}} + {hasIcon(props.suffixIcon) && ( + {props.suffixIcon} + )} )} @@ -113,24 +136,39 @@ const LinkTmpComp = (function () { return ( <>
- {children.text.propertyView({ label: trans("text") })} + {children.text.propertyView({label: trans('text')})}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} - {loadingPropertyView(children)} -
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} + {loadingPropertyView(children)} +
- {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} - {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} -
+ {children.prefixIcon.propertyView({ + label: trans('button.prefixIcon'), + })} + {children.suffixIcon.propertyView({ + label: trans('button.suffixIcon'), + })} +
+ )} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
{children.style.getPropertyView()}
+ {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} ); @@ -140,7 +178,7 @@ const LinkTmpComp = (function () { })(); export const LinkComp = withExposingConfigs(LinkTmpComp, [ - new NameConfig("text", trans("link.textDesc")), - new NameConfig("loading", trans("link.loadingDesc")), + new NameConfig('text', trans('link.textDesc')), + new NameConfig('loading', trans('link.loadingDesc')), ...CommonNameConfig, ]); diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index edfab9222..12ef85661 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -1,61 +1,82 @@ -import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; -import { withDefault } from "comps/generators"; -import { UICompBuilder } from "comps/generators/uiCompBuilder"; +import {BoolCodeControl, StringControl} from 'comps/controls/codeControl'; +import {withDefault} from 'comps/generators'; +import {UICompBuilder} from 'comps/generators/uiCompBuilder'; import { disabledPropertyView, hiddenPropertyView, loadingPropertyView, -} from "comps/utils/propertyUtils"; -import { Section, sectionNames } from "lowcoder-design"; -import { trans } from "i18n"; -import styled from "styled-components"; -import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompConstants"; -import { IconControl } from "comps/controls/iconControl"; -import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl"; -import { booleanExposingStateControl } from "comps/controls/codeStateControl"; -import { ToggleButtonStyle } from "comps/controls/styleControlConstants"; -import { styleControl } from "comps/controls/styleControl"; -import { BoolControl } from "comps/controls/boolControl"; -import { RefControl } from "comps/controls/refControl"; -import React, { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +} from 'comps/utils/propertyUtils'; +import {Section, sectionNames} from 'lowcoder-design'; +import {trans} from 'i18n'; +import styled from 'styled-components'; +import {ChangeEventHandlerControl} from '../../controls/eventHandlerControl'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import { + Button100, + ButtonCompWrapper, + buttonRefMethods, +} from './buttonCompConstants'; +import {IconControl} from 'comps/controls/iconControl'; +import { + AlignWithStretchControl, + LeftRightControl, +} from 'comps/controls/dropdownControl'; +import {booleanExposingStateControl} from 'comps/controls/codeStateControl'; +import { + AnimationStyle, + AnimationStyleType, + ToggleButtonStyle, +} from 'comps/controls/styleControlConstants'; +import {styleControl} from 'comps/controls/styleControl'; +import {BoolControl} from 'comps/controls/boolControl'; +import {RefControl} from 'comps/controls/refControl'; +import React, {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; const IconWrapper = styled.div` display: flex; `; const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{ - $align: "left" | "center" | "right" | "stretch"; + $align: 'left' | 'center' | 'right' | 'stretch'; $showBorder: boolean; + $animationStyle: AnimationStyleType; }>` + ${(props) => props.$animationStyle} width: 100%; display: flex; justify-content: ${(props) => props.$align}; > button { - width: ${(props) => props.$align !== "stretch" && "auto"}; - border: ${(props) => !props.$showBorder && "none"}; - box-shadow: ${(props) => !props.$showBorder && "none"}; + width: ${(props) => props.$align !== 'stretch' && 'auto'}; + border: ${(props) => !props.$showBorder && 'none'}; + box-shadow: ${(props) => !props.$showBorder && 'none'}; } `; const ToggleTmpComp = (function () { const childrenMap = { - value: booleanExposingStateControl("value"), + value: booleanExposingStateControl('value'), showText: withDefault(BoolControl, true), - trueText: withDefault(StringControl, trans("toggleButton.trueDefaultText")), - falseText: withDefault(StringControl, trans("toggleButton.falseDefaultText")), + trueText: withDefault(StringControl, trans('toggleButton.trueDefaultText')), + falseText: withDefault( + StringControl, + trans('toggleButton.falseDefaultText') + ), onEvent: ChangeEventHandlerControl, disabled: BoolCodeControl, loading: BoolCodeControl, - trueIcon: withDefault(IconControl, "/icon:solid/AngleUp"), - falseIcon: withDefault(IconControl, "/icon:solid/AngleDown"), + trueIcon: withDefault(IconControl, '/icon:solid/AngleUp'), + falseIcon: withDefault(IconControl, '/icon:solid/AngleDown'), iconPosition: LeftRightControl, alignment: AlignWithStretchControl, style: styleControl(ToggleButtonStyle), - showBorder: withDefault(BoolControl, true), + animationStyle: styleControl(AnimationStyle), + showBorder: withDefault(BoolControl, true), viewRef: RefControl, }; return new UICompBuilder(childrenMap, (props) => { @@ -67,6 +88,7 @@ const ToggleTmpComp = (function () { disabled={props.disabled} $align={props.alignment} $showBorder={props.showBorder} + $animationStyle={props.animationStyle} > { - props.onEvent("change"); + props.onEvent('change'); props.value.onChange(!props.value.value); }} > - {props.iconPosition === "right" && text} - {{props.value.value ? props.trueIcon : props.falseIcon}} - {props.iconPosition === "left" && text} + {props.iconPosition === 'right' && text} + { + + {props.value.value ? props.trueIcon : props.falseIcon} + + } + {props.iconPosition === 'left' && text} ); @@ -89,46 +115,65 @@ const ToggleTmpComp = (function () { <>
{children.value.propertyView({ - label: trans("prop.defaultValue"), - tooltip: trans("toggleButton.valueDesc"), + label: trans('prop.defaultValue'), + tooltip: trans('toggleButton.valueDesc'), })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} {loadingPropertyView(children)}
- {children.showText.propertyView({ label: trans("toggleButton.showText") })} - {children.showText.getView() && - children.trueText.propertyView({ label: trans("toggleButton.trueLabel") })} + {children.showText.propertyView({ + label: trans('toggleButton.showText'), + })} + {children.showText.getView() && + children.trueText.propertyView({ + label: trans('toggleButton.trueLabel'), + })} {children.showText.getView() && - children.falseText.propertyView({ label: trans("toggleButton.falseLabel") })} - {children.trueIcon.propertyView({ label: trans("toggleButton.trueIconLabel") })} - {children.falseIcon.propertyView({ label: trans("toggleButton.falseIconLabel") })} + children.falseText.propertyView({ + label: trans('toggleButton.falseLabel'), + })} + {children.trueIcon.propertyView({ + label: trans('toggleButton.trueIconLabel'), + })} + {children.falseIcon.propertyView({ + label: trans('toggleButton.falseIconLabel'), + })} {children.showText.getView() && children.iconPosition.propertyView({ - label: trans("toggleButton.iconPosition"), + label: trans('toggleButton.iconPosition'), radioButton: true, - })} + })} {children.alignment.propertyView({ - label: trans("toggleButton.alignment"), + label: trans('toggleButton.alignment'), radioButton: true, })}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })} - {children.style.getPropertyView()} -
+ {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.showBorder.propertyView({ + label: trans('toggleButton.showBorder'), + })} + {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} - )) .setExposeMethodConfigs(buttonRefMethods) @@ -136,7 +181,7 @@ const ToggleTmpComp = (function () { })(); export const ToggleButtonComp = withExposingConfigs(ToggleTmpComp, [ - new NameConfig("value", trans("dropdown.textDesc")), - new NameConfig("loading", trans("button.loadingDesc")), + new NameConfig('value', trans('dropdown.textDesc')), + new NameConfig('loading', trans('button.loadingDesc')), ...CommonNameConfig, ]); diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index 74857007c..729fd00de 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -1,23 +1,23 @@ -import React, { useEffect, useState, useRef, useContext } from "react"; +import React, {useEffect, useState, useRef, useContext} from 'react'; // Render the component to the editor import { changeChildAction, CompAction, RecordConstructorToView, -} from "lowcoder-core"; +} from 'lowcoder-core'; // Text internationalisation conversion api -import { trans } from "i18n"; +import {trans} from 'i18n'; // General frame of the right property bar -import { UICompBuilder, withDefault } from "../../generators"; +import {UICompBuilder, withDefault} from '../../generators'; // Right-side attribute subframe -import { Section, sectionNames } from "lowcoder-design"; +import {Section, sectionNames} from 'lowcoder-design'; // Switch indicating whether the component is hidden or not -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; // Right property switch -import { BoolControl } from "comps/controls/boolControl"; -import { styleControl } from "comps/controls/styleControl"; //样式输入框 -import { jsonValueExposingStateControl } from "comps/controls/codeStateControl"; -import { jsonControl, StringControl } from "comps/controls/codeControl"; +import {BoolControl} from 'comps/controls/boolControl'; +import {styleControl} from 'comps/controls/styleControl'; //样式输入框 +import {jsonValueExposingStateControl} from 'comps/controls/codeStateControl'; +import {jsonControl, StringControl} from 'comps/controls/codeControl'; // Event Control import { clickEvent, @@ -25,24 +25,25 @@ import { eventHandlerControl, deleteEvent, mentionEvent, -} from "comps/controls/eventHandlerControl"; +} from 'comps/controls/eventHandlerControl'; -import { EditorContext } from "comps/editorState"; +import {EditorContext} from 'comps/editorState'; // Introducing styles import { + AnimationStyle, CommentStyle, heightCalculator, widthCalculator, -} from "comps/controls/styleControlConstants"; +} from 'comps/controls/styleControlConstants'; // Initialise exposed values -import { stateComp, valueComp } from "comps/generators/simpleGenerators"; +import {stateComp, valueComp} from 'comps/generators/simpleGenerators'; // The component's api for exposing properties externally import { NameConfig, NameConfigHidden, withExposingConfigs, -} from "comps/generators/withExposing"; +} from 'comps/generators/withExposing'; import { commentDate, @@ -52,19 +53,19 @@ import { convertCommentData, checkUserInfoData, checkMentionListData, -} from "./commentConstants"; -import { default as Avatar } from "antd/es/avatar"; -import { default as List } from "antd/es/list"; -import { default as Button } from "antd/es/button"; -import { default as Mentions } from "antd/es/mentions"; -import { default as Tooltip } from "antd/es/tooltip"; -import VirtualList, { ListRef } from "rc-virtual-list"; -import _ from "lodash"; -import relativeTime from "dayjs/plugin/relativeTime"; -import dayjs from "dayjs"; +} from './commentConstants'; +import {default as Avatar} from 'antd/es/avatar'; +import {default as List} from 'antd/es/list'; +import {default as Button} from 'antd/es/button'; +import {default as Mentions} from 'antd/es/mentions'; +import {default as Tooltip} from 'antd/es/tooltip'; +import VirtualList, {ListRef} from 'rc-virtual-list'; +import _ from 'lodash'; +import relativeTime from 'dayjs/plugin/relativeTime'; +import dayjs from 'dayjs'; // import "dayjs/locale/zh-cn"; -import { getInitialsAndColorCode } from "util/stringUtils"; -import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined"; +import {getInitialsAndColorCode} from 'util/stringUtils'; +import {default as CloseOutlined} from '@ant-design/icons/CloseOutlined'; dayjs.extend(relativeTime); // dayjs.locale("zh-cn"); @@ -85,25 +86,26 @@ const EventOptions = [ const childrenMap = { value: jsonControl(convertCommentData, commentDate), - title: withDefault(StringControl, trans("comment.titledDefaultValue")), - placeholder: withDefault(StringControl, trans("comment.placeholder")), - buttonText: withDefault(StringControl, trans("comment.buttonText")), + title: withDefault(StringControl, trans('comment.titledDefaultValue')), + placeholder: withDefault(StringControl, trans('comment.placeholder')), + buttonText: withDefault(StringControl, trans('comment.buttonText')), sendCommentAble: BoolControl.DEFAULT_TRUE, deleteAble: BoolControl, userInfo: jsonControl(checkUserInfoData, { - name: "{{currentUser.name}}", - email: "{{currentUser.email}}", + name: '{{currentUser.name}}', + email: '{{currentUser.email}}', }), mentionList: jsonControl(checkMentionListData, { - "@": ["Li Lei", "Han Meimei"], - "#": ["123", "456", "789"], + '@': ['Li Lei', 'Han Meimei'], + '#': ['123', '456', '789'], }), onEvent: eventHandlerControl(EventOptions), style: styleControl(CommentStyle), - commentList: jsonValueExposingStateControl("commentList", []), - deletedItem: jsonValueExposingStateControl("deletedItem", []), - submitedItem: jsonValueExposingStateControl("submitedItem", []), - mentionName: valueComp(""), + animationStyle: styleControl(AnimationStyle), + commentList: jsonValueExposingStateControl('commentList', []), + deletedItem: jsonValueExposingStateControl('deletedItem', []), + submitedItem: jsonValueExposingStateControl('submitedItem', []), + mentionName: valueComp(''), }; const CommentCompBase = ( @@ -125,20 +127,21 @@ const CommentCompBase = ( userInfo, placeholder, deleteAble, + animationStyle, } = props; - type PrefixType = "@" | keyof typeof mentionList; + type PrefixType = '@' | keyof typeof mentionList; // Used to save the consolidated list of mentions const [MentionListData, setMentionList] = useState([]); const [commentListData, setCommentListData] = useState([]); - const [prefix, setPrefix] = useState("@"); - const [context, setContext] = useState(""); + const [prefix, setPrefix] = useState('@'); + const [context, setContext] = useState(''); // Integrate the comment list with the names in the original mention list const mergeAllMentionList = (mentionList: any) => { setMentionList( _.merge(mentionList, { - "@": _.union( + '@': _.union( _.concat( - mentionList["@"], + mentionList['@'], _.map(commentListData, (item, index) => { return item?.user?.name; }) @@ -173,26 +176,26 @@ const CommentCompBase = ( const generateCommentAvatar = (item: commentDataTYPE) => { return ( props.onEvent("click")} + onClick={() => props.onEvent('click')} // If there is an avatar, no background colour is set, and if displayName is not null, displayName is called using getInitialsAndColorCode style={{ backgroundColor: item?.user?.avatar - ? "" + ? '' : getInitialsAndColorCode( item?.user?.displayName === undefined ? item?.user?.name : item?.user?.displayName )[1], - verticalAlign: "middle", + verticalAlign: 'middle', }} src={item?.user?.avatar} > - {" "} + {' '} {item?.user?.displayName ? item?.user?.displayName : /^([\u4e00-\u9fa5]{2,4})$/gi.test(item?.user?.name) - ? item?.user?.name.slice(-2) - : item?.user?.name[0]} + ? item?.user?.name.slice(-2) + : item?.user?.name[0]} ); }; @@ -208,16 +211,16 @@ const CommentCompBase = ( }; props.submitedItem.onChange(subObject); setCommentListData(_.concat(commentListData, [subObject])); - setContext(""); + setContext(''); mergeAllMentionList(mentionList); - props.onEvent("submit"); + props.onEvent('submit'); }; const handleDelete = (index: number) => { let temp = _.cloneDeep(commentListData); props.deletedItem.onChange(temp.splice(index, 1)); setCommentListData(temp); - props.onEvent("delete"); + props.onEvent('delete'); }; const onPressEnter = (e: any) => { @@ -227,34 +230,46 @@ const CommentCompBase = ( } }; return ( -
+ animation: animationStyle.animation, + animationDelay: animationStyle.animationDelay, + animationDuration: animationStyle.animationDuration, + animationIterationCount: animationStyle.animationIterationCount, + }} + >
+ title !== '' ? ( +
{commentListData.length > 1 ? title - .replaceAll("%d", commentListData.length.toString()) - .replace("comment", "comments") - : title.replaceAll("%d", commentListData.length.toString())} + .replaceAll('%d', commentListData.length.toString()) + .replace('comment', 'comments') + : title.replaceAll('%d', commentListData.length.toString())}
) : ( - "" + '' ) } size="small" @@ -275,7 +290,7 @@ const CommentCompBase = ( deleteAble ? [ handleDelete(index)} />, ] @@ -285,26 +300,26 @@ const CommentCompBase = ( props.onEvent("click")}> +
props.onEvent('click')}> {item?.user?.name} {dayjs(item?.createdAt).isValid() ? dayjs(item?.createdAt).fromNow() - : trans("comment.dateErr")} + : trans('comment.dateErr')}
@@ -316,18 +331,26 @@ const CommentCompBase = ( {sendCommentAble ? ( -
+
{ - dispatch(changeChildAction("mentionName", option?.value, false)); - props.onEvent("mention"); + dispatch( + changeChildAction('mentionName', option?.value, false) + ); + props.onEvent('mention'); }} value={context} rows={2} @@ -345,17 +368,17 @@ const CommentCompBase = (
) : ( - "" + '' )}
@@ -370,54 +393,61 @@ let CommentBasicComp = (function () { <>
{children.title.propertyView({ - label: trans("comment.title"), + label: trans('comment.title'), })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( <> -
- {children.value.propertyView({ - label: trans("comment.value"), - tooltip: CommentDataTooltip, - placeholder: "[]", - })} - {children.userInfo.propertyView({ - label: trans("comment.userInfo"), - tooltip: CommentUserDataTooltip, - })} - {children.mentionList.propertyView({ - label: trans("comment.mentionList"), - tooltip: trans("comment.mentionListDec"), - })} -
-
+
+ {children.value.propertyView({ + label: trans('comment.value'), + tooltip: CommentDataTooltip, + placeholder: '[]', + })} + {children.userInfo.propertyView({ + label: trans('comment.userInfo'), + tooltip: CommentUserDataTooltip, + })} + {children.mentionList.propertyView({ + label: trans('comment.mentionList'), + tooltip: trans('comment.mentionListDec'), + })} +
+
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} {children.sendCommentAble.propertyView({ - label: trans("comment.showSendButton"), + label: trans('comment.showSendButton'), })} {children.deleteAble.propertyView({ - label: trans("comment.deleteAble"), + label: trans('comment.deleteAble'), })}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
- {children.sendCommentAble.getView() && - children.buttonText.propertyView({ - label: trans("comment.buttonTextDec"), + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.sendCommentAble.getView() && + children.buttonText.propertyView({ + label: trans('comment.buttonTextDec'), + })} + {children.placeholder.propertyView({ + label: trans('comment.placeholderDec'), })} - {children.placeholder.propertyView({ - label: trans("comment.placeholderDec"), - })} -
+
+
{children.style.getPropertyView()} -
+
+
+ {children.animationStyle.getPropertyView()} +
+ )} - )) .build(); @@ -429,9 +459,9 @@ CommentBasicComp = class extends CommentBasicComp { } }; export const CommentComp = withExposingConfigs(CommentBasicComp, [ - new NameConfig("commentList", trans("comment.commentList")), - new NameConfig("deletedItem", trans("comment.deletedItem")), - new NameConfig("submitedItem", trans("comment.submitedItem")), - new NameConfig("mentionName", trans("comment.submitedItem")), + new NameConfig('commentList', trans('comment.commentList')), + new NameConfig('deletedItem', trans('comment.deletedItem')), + new NameConfig('submitedItem', trans('comment.submitedItem')), + new NameConfig('mentionName', trans('comment.submitedItem')), NameConfigHidden, ]); diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx index 338ae6d7f..e588d73d8 100644 --- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx @@ -1,27 +1,38 @@ -import { default as Divider, DividerProps } from "antd/es/divider"; -import { StringControl } from "comps/controls/codeControl"; -import { BoolControl } from "comps/controls/boolControl"; -import { alignControl } from "comps/controls/alignControl"; -import { UICompBuilder } from "comps/generators"; -import { NameConfig, NameConfigHidden } from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; -import _ from "lodash"; -import styled from "styled-components"; -import { styleControl } from "comps/controls/styleControl"; -import { DividerStyle, DividerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import { migrateOldData } from "comps/generators/simpleGenerators"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; +import {default as Divider, DividerProps} from 'antd/es/divider'; +import {StringControl} from 'comps/controls/codeControl'; +import {BoolControl} from 'comps/controls/boolControl'; +import {alignControl} from 'comps/controls/alignControl'; +import {UICompBuilder} from 'comps/generators'; +import {NameConfig, NameConfigHidden} from 'comps/generators/withExposing'; +import {Section, sectionNames} from 'lowcoder-design'; +import _ from 'lodash'; +import styled from 'styled-components'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + AnimationStyleType, + DividerStyle, + DividerStyleType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; -type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean }; +type IProps = DividerProps & { + $style: DividerStyleType; + dashed: boolean; + $animationStyle: AnimationStyleType; +}; // TODO: find out how to set border style when text is active // TODO: enable type "vertical" https://ant.design/components/divider -const StyledDivider = styled(Divider) ` +const StyledDivider = styled(Divider)` margin-top: 3.5px; .ant-divider-inner-text { height: 32px; @@ -30,26 +41,37 @@ const StyledDivider = styled(Divider) ` font-size: ${(props) => props.$style.textSize}; font-weight: ${(props) => props.$style.textWeight}; font-family: ${(props) => props.$style.fontFamily}; - text-transform:${(props)=>props.$style.textTransform}; - text-decoration:${(props)=>props.$style.textDecoration}; - font-style:${(props) => props.$style.fontStyle} + text-transform: ${(props) => props.$style.textTransform}; + text-decoration: ${(props) => props.$style.textDecoration}; + font-style: ${(props) => props.$style.fontStyle}; } - min-width: 0; + ${(props) => props.$animationStyle} + min-width: 0; width: ${(props) => { return widthCalculator(props.$style.margin); - }}; + }}; min-height: ${(props) => { return heightCalculator(props.$style.margin); - }}; + }}; margin: ${(props) => { return props.$style.margin; - }}; + }}; padding: ${(props) => props.$style.padding}; - - border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border}; -"" - .ant-divider-inner-text::before, .ant-divider-inner-text::after { - border-block-start: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important; + + border-top: ${(props) => + props.$style.borderWidth && props.$style.borderWidth != '0px' + ? props.$style.borderWidth + : '1px'} + ${(props) => (props.dashed ? 'dashed' : 'solid')} + ${(props) => props.$style.border}; + '' .ant-divider-inner-text::before, + .ant-divider-inner-text::after { + border-block-start: ${(props) => + props.$style.borderWidth && props.$style.borderWidth != '0px' + ? props.$style.borderWidth + : '1px'} + ${(props) => (props.dashed ? 'dashed' : 'solid')} + ${(props) => props.$style.border} !important; border-block-start-color: inherit; border-block-end: 0; } @@ -66,28 +88,32 @@ const childrenMap = { dashed: BoolControl, align: alignControl(), style: styleControl(DividerStyle), + animationStyle: styleControl(AnimationStyle), }; function fixOldStyleData(oldData: any) { - if (oldData && oldData.hasOwnProperty("color")) { + if (oldData && oldData.hasOwnProperty('color')) { return { ...oldData, style: { color: oldData.color, - text: "", + text: '', }, }; } return oldData; } - - // Compatible with historical style data 2022-8-26 export const DividerComp = migrateOldData( new UICompBuilder(childrenMap, (props) => { return ( - + {props.title} ); @@ -96,37 +122,44 @@ export const DividerComp = migrateOldData( return ( <>
- {children.title.propertyView({ label: trans("divider.title") })} + {children.title.propertyView({label: trans('divider.title')})}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && (
{hiddenPropertyView(children)}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <>
{!_.isEmpty(children.title.getView()) && children.align.propertyView({ - label: trans("divider.align"), + label: trans('divider.align'), radioButton: true, })}
- {children.dashed.propertyView({ label: trans("divider.dashed") })} + {children.dashed.propertyView({label: trans('divider.dashed')})} {children.style.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} ); }) .setExposeStateConfigs([ - new NameConfig("dashed", trans("divider.dashedDesc")), - new NameConfig("title", trans("divider.titleDesc")), - new NameConfig("align", trans("divider.alignDesc")), + new NameConfig('dashed', trans('divider.dashedDesc')), + new NameConfig('title', trans('divider.titleDesc')), + new NameConfig('align', trans('divider.alignDesc')), NameConfigHidden, ]) .build(), diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 6663d527e..c3a1b5476 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -1,25 +1,35 @@ -import { Section, sectionNames } from "lowcoder-design"; -import { UICompBuilder } from "../../generators"; -import { NameConfigHidden, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { defaultData } from "./jsonConstants"; -import styled from "styled-components"; -import { jsonValueExposingStateControl } from "comps/controls/codeStateControl"; -import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { LabelControl } from "comps/controls/labelControl"; -import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; -import { JsonEditorStyle } from "comps/controls/styleControlConstants"; -import { styleControl } from "comps/controls/styleControl"; -import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; -import { useRef, useEffect, useContext } from "react"; +import {Section, sectionNames} from 'lowcoder-design'; +import {UICompBuilder} from '../../generators'; +import { + NameConfigHidden, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import {defaultData} from './jsonConstants'; +import styled from 'styled-components'; +import {jsonValueExposingStateControl} from 'comps/controls/codeStateControl'; +import {ChangeEventHandlerControl} from 'comps/controls/eventHandlerControl'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {LabelControl} from 'comps/controls/labelControl'; +import { + formDataChildren, + FormDataPropertyView, +} from '../formComp/formDataConstants'; +import { + AnimationStyle, + JsonEditorStyle, +} from 'comps/controls/styleControlConstants'; +import {styleControl} from 'comps/controls/styleControl'; +import {migrateOldData, withDefault} from 'comps/generators/simpleGenerators'; +import {useRef, useEffect, useContext} from 'react'; import { EditorState, EditorView, type EditorView as EditorViewType, -} from "base/codeEditor/codeMirror"; -import { useExtensions } from "base/codeEditor/extensions"; -import { EditorContext } from "comps/editorState"; +} from 'base/codeEditor/codeMirror'; +import {useExtensions} from 'base/codeEditor/extensions'; +import {EditorContext} from 'comps/editorState'; /** * JsonEditor Comp @@ -37,11 +47,11 @@ const Wrapper = styled.div` * Compatible with old data 2022-10-19 */ function fixOldData(oldData: any) { - if (oldData && !oldData.hasOwnProperty("label")) { + if (oldData && !oldData.hasOwnProperty('label')) { return { ...oldData, label: { - text: "", + text: '', }, }; } @@ -52,7 +62,7 @@ function fixOldData(oldData: any) { * Compatible with old data 2022-11-18 */ function fixOldDataSecond(oldData: any) { - if (oldData && oldData.hasOwnProperty("default")) { + if (oldData && oldData.hasOwnProperty('default')) { return { ...oldData, value: oldData.default, @@ -62,10 +72,11 @@ function fixOldDataSecond(oldData: any) { } const childrenMap = { - value: jsonValueExposingStateControl("value", defaultData), + value: jsonValueExposingStateControl('value', defaultData), onEvent: ChangeEventHandlerControl, - label: withDefault(LabelControl, { position: "column" }), + label: withDefault(LabelControl, {position: 'column'}), style: styleControl(JsonEditorStyle), + animationStyle: styleControl(AnimationStyle), ...formDataChildren, }; @@ -75,9 +86,9 @@ let JsonEditorTmpComp = (function () { const wrapperRef = useRef(null); const view = useRef(null); const editContent = useRef(); - const { extensions } = useExtensions({ - codeType: "PureJSON", - language: "json", + const {extensions} = useExtensions({ + codeType: 'PureJSON', + language: 'json', showLineNum: true, enableClickCompName: false, onFocus: (focused) => { @@ -90,7 +101,7 @@ let JsonEditorTmpComp = (function () { try { const value = JSON.parse(state.doc.toString()); props.value.onChange(value); - props.onEvent("change"); + props.onEvent('change'); } catch (error) {} }, }); @@ -101,7 +112,7 @@ let JsonEditorTmpComp = (function () { doc: JSON.stringify(props.value.value, null, 2), extensions, }); - view.current = new EditorView({ state, parent: wrapperRef.current }); + view.current = new EditorView({state, parent: wrapperRef.current}); } }, [wrapperRef.current]); @@ -117,30 +128,48 @@ let JsonEditorTmpComp = (function () { } return props.label({ style: props.style, - children: (editContent.current = "focus")} />, + animationStyle: props.animationStyle, + children: ( + (editContent.current = 'focus')} + /> + ), }); }) .setPropertyViewFn((children) => { return ( <>
- {children.value.propertyView({ label: trans("export.jsonEditorDesc") })} + {children.value.propertyView({ + label: trans('export.jsonEditorDesc'), + })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( -
{children.style.getPropertyView()}
+ {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && + children.label.getPropertyView()} + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} - ); }) @@ -158,6 +187,6 @@ JsonEditorTmpComp = class extends JsonEditorTmpComp { }; export const JsonEditorComp = withExposingConfigs(JsonEditorTmpComp, [ - new NameConfig("value", trans("export.jsonEditorDesc")), + new NameConfig('value', trans('export.jsonEditorDesc')), NameConfigHidden, ]); diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index ee317c13c..53f274ec4 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -1,43 +1,59 @@ -import { Section, sectionNames } from "lowcoder-design"; -import { UICompBuilder, withDefault } from "../../generators"; -import { NameConfigHidden, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import ReactJson, { type ThemeKeys } from "react-json-view"; -import { defaultData } from "./jsonConstants"; -import styled from "styled-components"; -import { BoolControl } from "comps/controls/boolControl"; -import { dropdownControl } from "comps/controls/dropdownControl"; -import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { EditorContext } from "comps/editorState"; -import { useContext } from "react"; +import {Section, sectionNames} from 'lowcoder-design'; +import {UICompBuilder, withDefault} from '../../generators'; +import { + NameConfigHidden, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import ReactJson, {type ThemeKeys} from 'react-json-view'; +import {defaultData} from './jsonConstants'; +import styled from 'styled-components'; +import {BoolControl} from 'comps/controls/boolControl'; +import {dropdownControl} from 'comps/controls/dropdownControl'; +import { + ArrayOrJSONObjectControl, + NumberControl, +} from 'comps/controls/codeControl'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {EditorContext} from 'comps/editorState'; +import {useContext} from 'react'; +import { + AnimationStyle, + AnimationStyleType, + styleControl, +} from '@lowcoder-ee/index.sdk'; /** * JsonExplorer Comp */ const themeOptions = [ - { label: trans("jsonExplorer.default"), value: "shapeshifter:inverted" }, - { label: trans("jsonExplorer.defaultDark"), value: "shapeshifter" }, - { label: trans("jsonExplorer.neutralLight"), value: "grayscale:inverted" }, - { label: trans("jsonExplorer.neutralDark"), value: "grayscale" }, - { label: trans("jsonExplorer.azure"), value: "apathy:inverted" }, - { label: trans("jsonExplorer.darkBlue"), value: "flat" }, + {label: trans('jsonExplorer.default'), value: 'shapeshifter:inverted'}, + {label: trans('jsonExplorer.defaultDark'), value: 'shapeshifter'}, + {label: trans('jsonExplorer.neutralLight'), value: 'grayscale:inverted'}, + {label: trans('jsonExplorer.neutralDark'), value: 'grayscale'}, + {label: trans('jsonExplorer.azure'), value: 'apathy:inverted'}, + {label: trans('jsonExplorer.darkBlue'), value: 'flat'}, ]; const bgColorMap = { - "shapeshifter:inverted": "#ffffff", - shapeshifter: "#000000", - "grayscale:inverted": "#ffffff", - grayscale: "#000000", - "apathy:inverted": "#efffff", - flat: "#2c3e50", + 'shapeshifter:inverted': '#ffffff', + shapeshifter: '#000000', + 'grayscale:inverted': '#ffffff', + grayscale: '#000000', + 'apathy:inverted': '#efffff', + flat: '#2c3e50', }; -const JsonExplorerContainer = styled.div<{ $theme: keyof typeof bgColorMap }>` +const JsonExplorerContainer = styled.div<{ + $theme: keyof typeof bgColorMap; + $animationStyle: AnimationStyleType; +}>` + ${(props) => props.$animationStyle} height: 100%; overflow-y: scroll; - background-color: ${(props) => bgColorMap[props.$theme] || "#ffffff"}; + background-color: ${(props) => bgColorMap[props.$theme] || '#ffffff'}; border: 1px solid #d7d9e0; border-radius: 4px; padding: 10px; @@ -45,13 +61,20 @@ const JsonExplorerContainer = styled.div<{ $theme: keyof typeof bgColorMap }>` let JsonExplorerTmpComp = (function () { const childrenMap = { - value: withDefault(ArrayOrJSONObjectControl, JSON.stringify(defaultData, null, 2)), + value: withDefault( + ArrayOrJSONObjectControl, + JSON.stringify(defaultData, null, 2) + ), indent: withDefault(NumberControl, 4), expandToggle: BoolControl.DEFAULT_TRUE, - theme: dropdownControl(themeOptions, "shapeshifter:inverted"), + theme: dropdownControl(themeOptions, 'shapeshifter:inverted'), + animationStyle: styleControl(AnimationStyle), }; return new UICompBuilder(childrenMap, (props) => ( - +
- {children.value.propertyView({ label: trans("export.jsonEditorDesc") })} + {children.value.propertyView({ + label: trans('export.jsonEditorDesc'), + })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
{hiddenPropertyView(children)} - {children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })} + {children.expandToggle.propertyView({ + label: trans('jsonExplorer.expandToggle'), + })}
)} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
- {children.indent.propertyView({ label: trans("jsonExplorer.indent") })} + {children.indent.propertyView({ + label: trans('jsonExplorer.indent'), + })}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( -
- {children.theme.propertyView({ - label: trans("jsonExplorer.theme"), - })} -
+ {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.theme.propertyView({ + label: trans('jsonExplorer.theme'), + })} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} ); @@ -102,6 +139,6 @@ JsonExplorerTmpComp = class extends JsonExplorerTmpComp { }; export const JsonExplorerComp = withExposingConfigs(JsonExplorerTmpComp, [ - new NameConfig("value", trans("jsonExplorer.valueDesc")), + new NameConfig('value', trans('jsonExplorer.valueDesc')), NameConfigHidden, ]); diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx index dfe00127f..98a3b74cc 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx @@ -1,30 +1,46 @@ -import { withTheme } from '@rjsf/core'; -import type { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils"; -import validator from "@rjsf/validator-ajv8"; +import {withTheme} from '@rjsf/core'; +import type { + RJSFValidationError, + ErrorListProps, + UISchemaSubmitButtonOptions, +} from '@rjsf/utils'; +import validator from '@rjsf/validator-ajv8'; // import Ajv from "@rjsf/validator-ajv8"; -import { default as Button } from "antd/es/button"; -import { BoolControl } from "comps/controls/boolControl"; -import { jsonObjectExposingStateControl } from "comps/controls/codeStateControl"; -import { styleControl } from "comps/controls/styleControl"; -import { JsonSchemaFormStyle, type JsonSchemaFormStyleType } from "comps/controls/styleControlConstants"; -import { depsConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; -import { withMethodExposing } from "comps/generators/withMethodExposing"; -import type { ValueFromOption } from "lowcoder-design"; -import { i18nObjs, trans } from "i18n"; -import type { JSONSchema7 } from "json-schema"; -import styled from "styled-components"; -import { toBoolean, toNumber, toString } from "util/convertUtils"; -import { Section, sectionNames } from "lowcoder-design"; -import { jsonObjectControl } from "../../controls/codeControl"; -import { eventHandlerControl, submitEvent } from "../../controls/eventHandlerControl"; -import { UICompBuilder } from "../../generators"; -import DateWidget from "./dateWidget"; -import ErrorBoundary from "./errorBoundary"; -import { Theme } from "@rjsf/antd"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import {default as Button} from 'antd/es/button'; +import {BoolControl} from 'comps/controls/boolControl'; +import {jsonObjectExposingStateControl} from 'comps/controls/codeStateControl'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + AnimationStyleType, + JsonSchemaFormStyle, + type JsonSchemaFormStyleType, +} from 'comps/controls/styleControlConstants'; +import { + depsConfig, + NameConfigHidden, + withExposingConfigs, +} from 'comps/generators/withExposing'; +import {withMethodExposing} from 'comps/generators/withMethodExposing'; +import type {ValueFromOption} from 'lowcoder-design'; +import {i18nObjs, trans} from 'i18n'; +import type {JSONSchema7} from 'json-schema'; +import styled from 'styled-components'; +import {toBoolean, toNumber, toString} from 'util/convertUtils'; +import {Section, sectionNames} from 'lowcoder-design'; +import {jsonObjectControl} from '../../controls/codeControl'; +import { + eventHandlerControl, + submitEvent, +} from '../../controls/eventHandlerControl'; +import {UICompBuilder} from '../../generators'; +import DateWidget from './dateWidget'; +import ErrorBoundary from './errorBoundary'; +import {Theme} from '@rjsf/antd'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; Theme.widgets.DateWidget = DateWidget(false); Theme.widgets.DateTimeWidget = DateWidget(true); @@ -32,7 +48,11 @@ const Form = withTheme(Theme); const EventOptions = [submitEvent] as const; -const Container = styled.div<{ $style: JsonSchemaFormStyleType }>` +const Container = styled.div<{ + $style: JsonSchemaFormStyleType; + $animationStyle: AnimationStyleType; +}>` + ${(props) => props.$animationStyle} background: ${(props) => props.$style.background}; border: 1px solid ${(props) => props.$style.border}; padding: 15px; @@ -41,7 +61,7 @@ const Container = styled.div<{ $style: JsonSchemaFormStyleType }>` overflow: auto; border-radius: ${(props) => props.$style.radius}; - label[for="root-title"] { + label[for='root-title'] { font-size: 18px; } @@ -77,21 +97,24 @@ function convertData(schema?: JSONSchema7, data?: any) { return data; } // fix required invalidation problem - if (schema.type !== "object" && (data === undefined || data === null || data === "")) { + if ( + schema.type !== 'object' && + (data === undefined || data === null || data === '') + ) { return undefined; } switch (schema.type) { - case "string": + case 'string': return toString(data); - case "number": + case 'number': return toNumber(data); - case "integer": + case 'integer': return Math.trunc(toNumber(data)); - case "boolean": + case 'boolean': return toBoolean(data); - case "null": + case 'null': return null; - case "object": { + case 'object': { const properties = schema.properties; if (!properties) { return data; @@ -99,7 +122,10 @@ function convertData(schema?: JSONSchema7, data?: any) { let newData: Record = {}; Object.entries(properties).forEach(([key, definition]) => { const value = data ? data[key] : undefined; - newData[key] = typeof definition === "object" ? convertData(definition, value) : value; + newData[key] = + typeof definition === 'object' + ? convertData(definition, value) + : value; }); return newData; } @@ -114,28 +140,34 @@ function convertData(schema?: JSONSchema7, data?: any) { // JSON schema refer to https://json-schema.org/understanding-json-schema/reference/ function getErrorMessage(error: RJSFValidationError): string { switch (error.name) { - case "required": - return trans("jsonSchemaForm.required"); - case "maximum": - return trans("jsonSchemaForm.maximum", { value: error.params.limit }); - case "minimum": - return trans("jsonSchemaForm.minimum", { value: error.params.limit }); - case "exclusiveMaximum": - return trans("jsonSchemaForm.exclusiveMaximum", { value: error.params.limit }); - case "exclusiveMinimum": - return trans("jsonSchemaForm.exclusiveMinimum", { value: error.params.limit }); - case "multipleOf": - return trans("jsonSchemaForm.multipleOf", { value: error.params.multipleOf }); - case "minLength": - return trans("jsonSchemaForm.minLength", { value: error.params.limit }); - case "maxLength": - return trans("jsonSchemaForm.maxLength", { value: error.params.limit }); - case "pattern": - return trans("jsonSchemaForm.pattern", { value: error.params.pattern }); - case "format": - return trans("jsonSchemaForm.format", { value: error.params.format }); + case 'required': + return trans('jsonSchemaForm.required'); + case 'maximum': + return trans('jsonSchemaForm.maximum', {value: error.params.limit}); + case 'minimum': + return trans('jsonSchemaForm.minimum', {value: error.params.limit}); + case 'exclusiveMaximum': + return trans('jsonSchemaForm.exclusiveMaximum', { + value: error.params.limit, + }); + case 'exclusiveMinimum': + return trans('jsonSchemaForm.exclusiveMinimum', { + value: error.params.limit, + }); + case 'multipleOf': + return trans('jsonSchemaForm.multipleOf', { + value: error.params.multipleOf, + }); + case 'minLength': + return trans('jsonSchemaForm.minLength', {value: error.params.limit}); + case 'maxLength': + return trans('jsonSchemaForm.maxLength', {value: error.params.limit}); + case 'pattern': + return trans('jsonSchemaForm.pattern', {value: error.params.pattern}); + case 'format': + return trans('jsonSchemaForm.format', {value: error.params.format}); } - return ""; + return ''; } function transformErrors(errors: RJSFValidationError[]): RJSFValidationError[] { @@ -145,7 +177,7 @@ function transformErrors(errors: RJSFValidationError[]): RJSFValidationError[] { // Error message displayed below the comp (will not be displayed when "ui:help" is set in the UI schema) error.message = message; // Errors displayed in the error list, not displayed when empty - error.stack = ""; + error.stack = ''; } return error; }); @@ -158,7 +190,7 @@ function ErrorList(props: ErrorListProps) { return <>; } return ( -
+
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
{hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && (
{children.horizontalAlignment.propertyView({ - label: trans("navigation.horizontalAlignment"), + label: trans('navigation.horizontalAlignment'), radioButton: true, })} {hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
- {children.logoUrl.propertyView({ label: trans("navigation.logoURL"), tooltip: trans("navigation.logoURLDesc") })} - {children.logoUrl.getView() && children.logoEvent.propertyView({ inline: true })} + {children.logoUrl.propertyView({ + label: trans('navigation.logoURL'), + tooltip: trans('navigation.logoURLDesc'), + })} + {children.logoUrl.getView() && + children.logoEvent.propertyView({inline: true})}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( -
- {children.style.getPropertyView()} -
+ {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} ); @@ -260,7 +307,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { .build(); export const NavComp = withExposingConfigs(NavCompBase, [ - new NameConfig("logoUrl", trans("navigation.logoURLDesc")), + new NameConfig('logoUrl', trans('navigation.logoURLDesc')), NameConfigHidden, - new NameConfig("items", trans("navigation.itemsDesc")), + new NameConfig('items', trans('navigation.itemsDesc')), ]); diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx index c39b39100..8cc8b58fb 100644 --- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx @@ -1,32 +1,43 @@ -import { default as Progress } from "antd/es/progress"; -import { styleControl } from "comps/controls/styleControl"; -import { CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import styled, { css } from "styled-components"; -import { Section, sectionNames } from "lowcoder-design"; -import { numberExposingStateControl } from "../controls/codeStateControl"; -import { UICompBuilder } from "../generators"; -import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; +import {default as Progress} from 'antd/es/progress'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + AnimationStyleType, + CircleProgressStyle, + CircleProgressType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import styled, {css} from 'styled-components'; +import {Section, sectionNames} from 'lowcoder-design'; +import {numberExposingStateControl} from '../controls/codeStateControl'; +import {UICompBuilder} from '../generators'; +import { + NameConfig, + NameConfigHidden, + withExposingConfigs, +} from '../generators/withExposing'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle const getStyle = (style: CircleProgressType) => { return css` - width: ${widthCalculator(style.margin)}; - height: ${heightCalculator(style.margin)}; - margin: ${style.margin}; + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; + margin: ${style.margin}; padding: ${style.padding}; - border-radius:${style.radius}; + border-radius: ${style.radius}; .ant-progress-text { color: ${style.text} !important; - font-family:${style.fontFamily}; - font-style:${style.fontStyle}; - font-size:${style.textSize} !important; - font-weight:${style.textWeight}; + font-family: ${style.fontFamily}; + font-style: ${style.fontStyle}; + font-size: ${style.textSize} !important; + font-weight: ${style.textWeight}; } .ant-progress-circle-trail { stroke: ${style.track}; @@ -45,7 +56,11 @@ const getStyle = (style: CircleProgressType) => { `; }; -export const StyledProgressCircle = styled(Progress) <{ $style: CircleProgressType }>` +export const StyledProgressCircle = styled(Progress)<{ + $style: CircleProgressType; + $animationStyle?: AnimationStyleType; +}>` + ${(props) => props.$animationStyle} width: 100%; height: 100%; padding: 2px; @@ -63,14 +78,16 @@ export const StyledProgressCircle = styled(Progress) <{ $style: CircleProgressTy let ProgressCircleTmpComp = (function () { const childrenMap = { - value: numberExposingStateControl("value", 60), + value: numberExposingStateControl('value', 60), // borderRadius property hidden as it's not valid for progress circle style: styleControl(CircleProgressStyle), + animationStyle: styleControl(AnimationStyle), }; return new UICompBuilder(childrenMap, (props) => { return ( @@ -81,21 +98,30 @@ let ProgressCircleTmpComp = (function () { <>
{children.value.propertyView({ - label: trans("progress.value"), - tooltip: trans("progress.valueTooltip"), + label: trans('progress.value'), + tooltip: trans('progress.valueTooltip'), })}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && (
{hiddenPropertyView(children)}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( -
- {children.style.getPropertyView()} -
+ {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} ); @@ -110,6 +136,6 @@ ProgressCircleTmpComp = class extends ProgressCircleTmpComp { }; export const ProgressCircleComp = withExposingConfigs(ProgressCircleTmpComp, [ - new NameConfig("value", trans("progress.valueDesc")), + new NameConfig('value', trans('progress.valueDesc')), NameConfigHidden, ]); diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx index 9090fa249..d5b425d5b 100644 --- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx @@ -1,31 +1,42 @@ -import { default as Progress } from "antd/es/progress"; -import { Section, sectionNames } from "lowcoder-design"; -import { numberExposingStateControl } from "../controls/codeStateControl"; -import { BoolControl } from "../controls/boolControl"; -import { UICompBuilder } from "../generators"; -import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; -import { styleControl } from "comps/controls/styleControl"; -import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import styled, { css } from "styled-components"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; +import {default as Progress} from 'antd/es/progress'; +import {Section, sectionNames} from 'lowcoder-design'; +import {numberExposingStateControl} from '../controls/codeStateControl'; +import {BoolControl} from '../controls/boolControl'; +import {UICompBuilder} from '../generators'; +import { + NameConfig, + NameConfigHidden, + withExposingConfigs, +} from '../generators/withExposing'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + AnimationStyleType, + ProgressStyle, + ProgressStyleType, + heightCalculator, + widthCalculator, +} from 'comps/controls/styleControlConstants'; +import styled, {css} from 'styled-components'; +import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; const getStyle = (style: ProgressStyleType) => { return css` line-height: 2; .ant-progress-text { color: ${style.text}; - font-style:${style.fontStyle}; - font-family:${style.fontFamily}; - font-weight:${style.textWeight}; - font-size:${style.textSize}; + font-style: ${style.fontStyle}; + font-family: ${style.fontFamily}; + font-weight: ${style.textWeight}; + font-size: ${style.textSize}; } - width: ${widthCalculator(style.margin)}; - height: ${heightCalculator(style.margin)}; - margin: ${style.margin}; + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; + margin: ${style.margin}; padding: ${style.padding}; .ant-progress-inner { background-color: ${style.track}; @@ -44,15 +55,20 @@ const getStyle = (style: ProgressStyleType) => { `; }; -export const ProgressStyled = styled(Progress)<{ $style: ProgressStyleType }>` +export const ProgressStyled = styled(Progress)<{ + $style: ProgressStyleType; + $animationStyle?: AnimationStyleType; +}>` ${(props) => props.$style && getStyle(props.$style)} + ${(props) => props.$animationStyle} `; const ProgressBasicComp = (function () { const childrenMap = { - value: numberExposingStateControl("value", 60), + value: numberExposingStateControl('value', 60), showInfo: BoolControl, style: styleControl(ProgressStyle), + animationStyle: styleControl(AnimationStyle), }; return new UICompBuilder(childrenMap, (props) => { return ( @@ -60,6 +76,7 @@ const ProgressBasicComp = (function () { percent={Math.round(props.value.value)} showInfo={props.showInfo} $style={props.style} + $animationStyle={props.animationStyle} /> ); }) @@ -68,24 +85,33 @@ const ProgressBasicComp = (function () { <>
{children.value.propertyView({ - label: trans("progress.value"), - tooltip: trans("progress.valueTooltip"), + label: trans('progress.value'), + tooltip: trans('progress.valueTooltip'), })}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && (
{hiddenPropertyView(children)} {children.showInfo.propertyView({ - label: trans("progress.showInfo"), + label: trans('progress.showInfo'), })}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( -
- {children.style.getPropertyView()} -
+ {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} ); @@ -94,7 +120,7 @@ const ProgressBasicComp = (function () { })(); export const ProgressComp = withExposingConfigs(ProgressBasicComp, [ - new NameConfig("value", trans("progress.valueDesc")), - new NameConfig("showInfo", trans("progress.showInfoDesc")), + new NameConfig('value', trans('progress.valueDesc')), + new NameConfig('showInfo', trans('progress.showInfoDesc')), NameConfigHidden, ]); diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx index 6e5b807b0..8f5b6d5d6 100644 --- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx @@ -1,47 +1,68 @@ -import { default as Row } from "antd/es/row"; -import { default as Col } from "antd/es/col"; -import { JSONObject, JSONValue } from "util/jsonTypes"; -import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core"; -import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core"; -import { AutoHeightControl } from "comps/controls/autoHeightControl"; -import { ColumnOptionControl } from "comps/controls/optionsControl"; -import { styleControl } from "comps/controls/styleControl"; +import {default as Row} from 'antd/es/row'; +import {default as Col} from 'antd/es/col'; +import {JSONObject, JSONValue} from 'util/jsonTypes'; +import { + CompAction, + CompActionTypes, + deleteCompAction, + wrapChildAction, +} from 'lowcoder-core'; +import { + DispatchType, + RecordConstructorToView, + wrapDispatch, +} from 'lowcoder-core'; +import {AutoHeightControl} from 'comps/controls/autoHeightControl'; +import {ColumnOptionControl} from 'comps/controls/optionsControl'; +import {styleControl} from 'comps/controls/styleControl'; import { ResponsiveLayoutRowStyle, ResponsiveLayoutRowStyleType, ResponsiveLayoutColStyleType, - ResponsiveLayoutColStyle -} from "comps/controls/styleControlConstants"; -import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators"; -import { addMapChildAction } from "comps/generators/sameTypeMap"; -import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; -import { NameGenerator } from "comps/utils"; -import { Section, controlItem, sectionNames } from "lowcoder-design"; -import { HintPlaceHolder } from "lowcoder-design"; -import _ from "lodash"; -import React from "react"; -import styled from "styled-components"; -import { IContainer } from "../containerBase/iContainer"; -import { SimpleContainerComp } from "../containerBase/simpleContainerComp"; -import { CompTree, mergeCompTrees } from "../containerBase/utils"; + ResponsiveLayoutColStyle, + AnimationStyle, + AnimationStyleType, +} from 'comps/controls/styleControlConstants'; +import {sameTypeMap, UICompBuilder, withDefault} from 'comps/generators'; +import {addMapChildAction} from 'comps/generators/sameTypeMap'; +import { + NameConfigHidden, + withExposingConfigs, +} from 'comps/generators/withExposing'; +import {NameGenerator} from 'comps/utils'; +import {Section, controlItem, sectionNames} from 'lowcoder-design'; +import {HintPlaceHolder} from 'lowcoder-design'; +import _ from 'lodash'; +import React from 'react'; +import styled from 'styled-components'; +import {IContainer} from '../containerBase/iContainer'; +import {SimpleContainerComp} from '../containerBase/simpleContainerComp'; +import {CompTree, mergeCompTrees} from '../containerBase/utils'; import { ContainerBaseProps, gridItemCompToGridItems, InnerGrid, -} from "../containerComp/containerView"; -import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { trans } from "i18n"; -import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"; -import { BoolControl } from "comps/controls/boolControl"; -import { BoolCodeControl, NumberControl } from "comps/controls/codeControl"; +} from '../containerComp/containerView'; +import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; +import {trans} from 'i18n'; +import {messageInstance} from 'lowcoder-design/src/components/GlobalInstances'; +import {BoolControl} from 'comps/controls/boolControl'; +import {BoolCodeControl, NumberControl} from 'comps/controls/codeControl'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; -import { DisabledContext } from "comps/generators/uiCompBuilder"; +import { + disabledPropertyView, + hiddenPropertyView, +} from 'comps/utils/propertyUtils'; +import {DisabledContext} from 'comps/generators/uiCompBuilder'; -const RowWrapper = styled(Row)<{$style: ResponsiveLayoutRowStyleType}>` +const RowWrapper = styled(Row)<{ + $style: ResponsiveLayoutRowStyleType; + $animationStyle: AnimationStyleType; +}>` + ${(props) => props.$animationStyle} height: 100%; border: 1px solid ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; @@ -51,9 +72,9 @@ const RowWrapper = styled(Row)<{$style: ResponsiveLayoutRowStyleType}>` `; const ColWrapper = styled(Col)<{ - $style: ResponsiveLayoutColStyleType, - $minWidth?: string, - $matchColumnsHeight: boolean, + $style: ResponsiveLayoutColStyleType; + $minWidth?: string; + $matchColumnsHeight: boolean; }>` display: flex; flex-direction: column; @@ -61,22 +82,23 @@ const ColWrapper = styled(Col)<{ max-width: ${(props) => props.$minWidth}; > div { - height: ${(props) => props.$matchColumnsHeight ? '100%' : 'auto'}; + height: ${(props) => (props.$matchColumnsHeight ? '100%' : 'auto')}; } `; -const childrenMap = { +const childrenMap = { disabled: BoolCodeControl, columns: ColumnOptionControl, containers: withDefault(sameTypeMap(SimpleContainerComp), { - 0: { view: {}, layout: {} }, - 1: { view: {}, layout: {} }, + 0: {view: {}, layout: {}}, + 1: {view: {}, layout: {}}, }), autoHeight: AutoHeightControl, rowBreak: withDefault(BoolControl, false), matchColumnsHeight: withDefault(BoolControl, true), rowStyle: withDefault(styleControl(ResponsiveLayoutRowStyle), {}), columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}), + animationStyle: styleControl(AnimationStyle), columnPerRowLG: withDefault(NumberControl, 4), columnPerRowMD: withDefault(NumberControl, 2), columnPerRowSM: withDefault(NumberControl, 1), @@ -85,10 +107,10 @@ const childrenMap = { }; type ViewProps = RecordConstructorToView; -type ResponsiveLayoutProps = ViewProps & { dispatch: DispatchType }; +type ResponsiveLayoutProps = ViewProps & {dispatch: DispatchType}; type ColumnContainerProps = Omit & { - style: ResponsiveLayoutColStyleType, -} + style: ResponsiveLayoutColStyleType; +}; const ColumnContainer = (props: ColumnContainerProps) => { return ( @@ -102,7 +124,6 @@ const ColumnContainer = (props: ColumnContainerProps) => { ); }; - const ResponsiveLayout = (props: ResponsiveLayoutProps) => { let { columns, @@ -117,6 +138,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => { columnPerRowSM, verticalSpacing, horizontalSpacing, + animationStyle, } = props; return ( @@ -125,41 +147,75 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
- {columns.map(column => { + {columns.map((column) => { const id = String(column.id); - const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); - if(!containers[id]) return null + const childDispatch = wrapDispatch( + wrapDispatch(dispatch, 'containers'), + id + ); + if (!containers[id]) return null; const containerProps = containers[id].children; const columnCustomStyle = { - margin: !_.isEmpty(column.margin) ? column.margin : columnStyle.margin, - padding: !_.isEmpty(column.padding) ? column.padding : columnStyle.padding, - radius: !_.isEmpty(column.radius) ? column.radius : columnStyle.radius, + margin: !_.isEmpty(column.margin) + ? column.margin + : columnStyle.margin, + padding: !_.isEmpty(column.padding) + ? column.padding + : columnStyle.padding, + radius: !_.isEmpty(column.radius) + ? column.radius + : columnStyle.radius, border: `1px solid ${!_.isEmpty(column.border) ? column.border : columnStyle.border}`, - background: !_.isEmpty(column.background) ? column.background : columnStyle.background, - } + background: !_.isEmpty(column.background) + ? column.background + : columnStyle.background, + }; const noOfColumns = columns.length; let backgroundStyle = columnCustomStyle.background; - if(!_.isEmpty(column.backgroundImage)) { + if (!_.isEmpty(column.backgroundImage)) { backgroundStyle = `center / cover url('${column.backgroundImage}') no-repeat, ${backgroundStyle}`; } return ( { }} /> - ) - }) - } + ); + })}
- + ); }; export const ResponsiveLayoutBaseComp = (function () { return new UICompBuilder(childrenMap, (props, dispatch) => { - return ( - - ); + return ; }) .setPropertyViewFn((children) => { return ( <>
{children.columns.propertyView({ - title: trans("responsiveLayout.column"), - newOptionLabel: "Column", + title: trans('responsiveLayout.column'), + newOptionLabel: 'Column', })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && (
{disabledPropertyView(children)} {hiddenPropertyView(children)}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <> -
- {children.autoHeight.getPropertyView()} -
-
- {children.rowBreak.propertyView({ - label: trans("responsiveLayout.rowBreak") - })} - {controlItem({}, ( -
- {trans("responsiveLayout.columnsPerRow")} -
- ))} - {children.columnPerRowLG.propertyView({ - label: trans("responsiveLayout.desktop") - })} - {children.columnPerRowMD.propertyView({ - label: trans("responsiveLayout.tablet") - })} - {children.columnPerRowSM.propertyView({ - label: trans("responsiveLayout.mobile") - })} -
-
- {children.matchColumnsHeight.propertyView({ - label: trans("responsiveLayout.matchColumnsHeight") - })} - {controlItem({}, ( -
- {trans("responsiveLayout.columnsSpacing")} -
- ))} - {children.horizontalSpacing.propertyView({ - label: trans("responsiveLayout.horizontal") - })} - {children.verticalSpacing.propertyView({ - label: trans("responsiveLayout.vertical") - })} -
-
- {children.rowStyle.getPropertyView()} -
-
- {children.columnStyle.getPropertyView()} -
+
+ {children.autoHeight.getPropertyView()} +
+
+ {children.rowBreak.propertyView({ + label: trans('responsiveLayout.rowBreak'), + })} + {controlItem( + {}, +
+ {trans('responsiveLayout.columnsPerRow')} +
+ )} + {children.columnPerRowLG.propertyView({ + label: trans('responsiveLayout.desktop'), + })} + {children.columnPerRowMD.propertyView({ + label: trans('responsiveLayout.tablet'), + })} + {children.columnPerRowSM.propertyView({ + label: trans('responsiveLayout.mobile'), + })} +
+
+ {children.matchColumnsHeight.propertyView({ + label: trans('responsiveLayout.matchColumnsHeight'), + })} + {controlItem( + {}, +
+ {trans('responsiveLayout.columnsSpacing')} +
+ )} + {children.horizontalSpacing.propertyView({ + label: trans('responsiveLayout.horizontal'), + })} + {children.verticalSpacing.propertyView({ + label: trans('responsiveLayout.vertical'), + })} +
+
+ {children.rowStyle.getPropertyView()} +
+
+ {children.columnStyle.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
)} @@ -256,17 +317,24 @@ export const ResponsiveLayoutBaseComp = (function () { .build(); })(); -class ResponsiveLayoutImplComp extends ResponsiveLayoutBaseComp implements IContainer { +class ResponsiveLayoutImplComp + extends ResponsiveLayoutBaseComp + implements IContainer +{ private syncContainers(): this { const columns = this.children.columns.getView(); - const ids: Set = new Set(columns.map((column) => String(column.id))); + const ids: Set = new Set( + columns.map((column) => String(column.id)) + ); let containers = this.children.containers.getView(); // delete const actions: CompAction[] = []; Object.keys(containers).forEach((id) => { if (!ids.has(id)) { // log.debug("syncContainers delete. ids=", ids, " id=", id); - actions.push(wrapChildAction("containers", wrapChildAction(id, deleteCompAction()))); + actions.push( + wrapChildAction('containers', wrapChildAction(id, deleteCompAction())) + ); } }); // new @@ -274,7 +342,10 @@ class ResponsiveLayoutImplComp extends ResponsiveLayoutBaseComp implements ICont if (!containers.hasOwnProperty(id)) { // log.debug("syncContainers new containers: ", containers, " id: ", id); actions.push( - wrapChildAction("containers", addMapChildAction(id, { layout: {}, items: {} })) + wrapChildAction( + 'containers', + addMapChildAction(id, {layout: {}, items: {}}) + ) ); } }); @@ -290,20 +361,26 @@ class ResponsiveLayoutImplComp extends ResponsiveLayoutBaseComp implements ICont const columns = this.children.columns.getView(); if (action.type === CompActionTypes.CUSTOM) { const value = action.value as JSONObject; - if (value.type === "push") { + if (value.type === 'push') { const itemValue = value.value as JSONObject; if (_.isEmpty(itemValue.key)) itemValue.key = itemValue.label; action = { ...action, value: { ...value, - value: { ...itemValue }, + value: {...itemValue}, }, } as CompAction; } - const { path } = action; - if (value.type === "delete" && path[0] === 'columns' && columns.length <= 1) { - messageInstance.warning(trans("responsiveLayout.atLeastOneColumnError")); + const {path} = action; + if ( + value.type === 'delete' && + path[0] === 'columns' && + columns.length <= 1 + ) { + messageInstance.warning( + trans('responsiveLayout.atLeastOneColumnError') + ); // at least one column return this; } @@ -326,7 +403,9 @@ class ResponsiveLayoutImplComp extends ResponsiveLayoutBaseComp implements ICont getCompTree(): CompTree { const containerMap = this.children.containers.getView(); - const compTrees = Object.values(containerMap).map((container) => container.getCompTree()); + const compTrees = Object.values(containerMap).map((container) => + container.getCompTree() + ); return mergeCompTrees(compTrees); } @@ -347,7 +426,7 @@ class ResponsiveLayoutImplComp extends ResponsiveLayoutBaseComp implements ICont container.getPasteValue(nameGenerator) ); - return { ...this.toJsonValue(), containers: containerPasteValueMap }; + return {...this.toJsonValue(), containers: containerPasteValueMap}; } override autoHeight(): boolean { @@ -357,5 +436,5 @@ class ResponsiveLayoutImplComp extends ResponsiveLayoutBaseComp implements ICont export const ResponsiveLayoutComp = withExposingConfigs( ResponsiveLayoutImplComp, - [ NameConfigHidden] + [NameConfigHidden] ); diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index d6503d4fd..85c9c3b10 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -1,38 +1,59 @@ -import { default as Cascader } from "antd/es/cascader"; -import { CascaderStyleType, ChildrenMultiSelectStyleType } from "comps/controls/styleControlConstants"; -import { blurMethod, focusMethod } from "comps/utils/methodUtils"; -import { trans } from "i18n"; -import styled from "styled-components"; -import { UICompBuilder, withDefault } from "../../generators"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants"; -import { refMethods } from "comps/generators/withMethodExposing"; +import {default as Cascader} from 'antd/es/cascader'; +import { + CascaderStyleType, + ChildrenMultiSelectStyleType, +} from 'comps/controls/styleControlConstants'; +import {blurMethod, focusMethod} from 'comps/utils/methodUtils'; +import {trans} from 'i18n'; +import styled from 'styled-components'; +import {UICompBuilder, withDefault} from '../../generators'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import { + CascaderChildren, + CascaderPropertyView, + defaultDataSource, +} from './cascaderContants'; +import {refMethods} from 'comps/generators/withMethodExposing'; -const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>` +const CascaderStyle = styled(Cascader)<{ + $style: CascaderStyleType; + $childrenInputFieldStyle: ChildrenMultiSelectStyleType; +}>` width: 100%; - font-family:"Montserrat"; - ${(props) => { return props.$style && { ...props.$style, 'border-radius': props.$style.radius } }} + font-family: 'Montserrat'; + ${(props) => { + return ( + props.$style && {...props.$style, 'border-radius': props.$style.radius} + ); + }} `; -const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMultiSelectStyleType }>` - background-color: ${props => props.$childrenInputFieldStyle?.background}; - border: ${props => props.$childrenInputFieldStyle?.border}; - border-style: ${props => props.$childrenInputFieldStyle?.borderStyle}; - border-width: ${props => props.$childrenInputFieldStyle?.borderWidth}; - border-radius: ${props => props.$childrenInputFieldStyle?.radius}; - rotate: ${props => props.$childrenInputFieldStyle?.rotation}; - margin: ${props => props.$childrenInputFieldStyle?.margin}; - padding: ${props => props.$childrenInputFieldStyle?.padding}; - .ant-cascader-menu-item-content{ - font-size: ${props => props.$childrenInputFieldStyle?.textSize}; - font-style: ${props => props.$childrenInputFieldStyle?.fontStyle}; - font-family: ${props => props.$childrenInputFieldStyle?.fontFamily}; - font-weight: ${props => props.$childrenInputFieldStyle?.textWeight}; - text-transform: ${props => props.$childrenInputFieldStyle?.textTransform}; - text-decoration: ${props => props.$childrenInputFieldStyle?.textDecoration}; - color: ${props => props.$childrenInputFieldStyle?.text}; - } -` +const DropdownRenderStyle = styled.div<{ + $childrenInputFieldStyle: ChildrenMultiSelectStyleType; +}>` + background-color: ${(props) => props.$childrenInputFieldStyle?.background}; + border: ${(props) => props.$childrenInputFieldStyle?.border}; + border-style: ${(props) => props.$childrenInputFieldStyle?.borderStyle}; + border-width: ${(props) => props.$childrenInputFieldStyle?.borderWidth}; + border-radius: ${(props) => props.$childrenInputFieldStyle?.radius}; + rotate: ${(props) => props.$childrenInputFieldStyle?.rotation}; + margin: ${(props) => props.$childrenInputFieldStyle?.margin}; + padding: ${(props) => props.$childrenInputFieldStyle?.padding}; + .ant-cascader-menu-item-content { + font-size: ${(props) => props.$childrenInputFieldStyle?.textSize}; + font-style: ${(props) => props.$childrenInputFieldStyle?.fontStyle}; + font-family: ${(props) => props.$childrenInputFieldStyle?.fontFamily}; + font-weight: ${(props) => props.$childrenInputFieldStyle?.textWeight}; + text-transform: ${(props) => props.$childrenInputFieldStyle?.textTransform}; + text-decoration: ${(props) => + props.$childrenInputFieldStyle?.textDecoration}; + color: ${(props) => props.$childrenInputFieldStyle?.text}; + } +`; let CascaderBasicComp = (function () { const childrenMap = CascaderChildren; @@ -41,8 +62,9 @@ let CascaderBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, - childrenInputFieldStyle:props.childrenInputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + childrenInputFieldStyle: props.childrenInputFieldStyle, + animationStyle: props.animationStyle, children: ( props.onEvent("focus")} - onBlur={() => props.onEvent("blur")} + onFocus={() => props.onEvent('focus')} + onBlur={() => props.onEvent('blur')} dropdownRender={(menus: React.ReactNode) => ( - - {menus} + + {menus} )} onChange={(value: (string | number)[]) => { props.value.onChange(value as string[]); - props.onEvent("change"); + props.onEvent('change'); }} /> ), @@ -80,7 +104,7 @@ let CascaderBasicComp = (function () { })(); const CascaderComp = withExposingConfigs(CascaderBasicComp, [ - new NameConfig("value", trans("selectInput.valueDesc")), + new NameConfig('value', trans('selectInput.valueDesc')), ...CommonNameConfig, ]); diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index 4222ce0a8..e8e3c8391 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -1,33 +1,43 @@ -import { SelectEventHandlerControl } from "../../controls/eventHandlerControl"; -import { Section, sectionNames } from "lowcoder-design"; -import { RecordConstructorToComp } from "lowcoder-core"; -import { BoolCodeControl, JSONObjectArrayControl, StringControl } from "comps/controls/codeControl"; -import { arrayStringExposingStateControl } from "comps/controls/codeStateControl"; -import { BoolControl } from "comps/controls/boolControl"; -import { LabelControl } from "comps/controls/labelControl"; -import { styleControl } from "comps/controls/styleControl"; -import { CascaderStyle, ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import {SelectEventHandlerControl} from '../../controls/eventHandlerControl'; +import {Section, sectionNames} from 'lowcoder-design'; +import {RecordConstructorToComp} from 'lowcoder-core'; +import { + BoolCodeControl, + JSONObjectArrayControl, + StringControl, +} from 'comps/controls/codeControl'; +import {arrayStringExposingStateControl} from 'comps/controls/codeStateControl'; +import {BoolControl} from 'comps/controls/boolControl'; +import {LabelControl} from 'comps/controls/labelControl'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + CascaderStyle, + ChildrenMultiSelectStyle, + InputFieldStyle, + LabelStyle, +} from 'comps/controls/styleControlConstants'; import { allowClearPropertyView, disabledPropertyView, hiddenPropertyView, placeholderPropertyView, showSearchPropertyView, -} from "comps/utils/propertyUtils"; -import { i18nObjs, trans } from "i18n"; -import { RefControl } from "comps/controls/refControl"; -import { CascaderRef } from "antd/es/cascader"; +} from 'comps/utils/propertyUtils'; +import {i18nObjs, trans} from 'i18n'; +import {RefControl} from 'comps/controls/refControl'; +import {CascaderRef} from 'antd/es/cascader'; -import { MarginControl } from "../../controls/marginControl"; -import { PaddingControl } from "../../controls/paddingControl"; +import {MarginControl} from '../../controls/marginControl'; +import {PaddingControl} from '../../controls/paddingControl'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; -export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, " "); +export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, ' '); export const CascaderChildren = { - value: arrayStringExposingStateControl("value", i18nObjs.cascaderDefult), + value: arrayStringExposingStateControl('value', i18nObjs.cascaderDefult), label: LabelControl, placeholder: StringControl, disabled: BoolCodeControl, @@ -35,26 +45,33 @@ export const CascaderChildren = { allowClear: BoolControl, options: JSONObjectArrayControl, style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), + labelStyle: styleControl( + LabelStyle.filter( + (style) => ['accent', 'validate'].includes(style.name) === false + ) + ), showSearch: BoolControl.DEFAULT_TRUE, viewRef: RefControl, margin: MarginControl, padding: PaddingControl, - inputFieldStyle:styleControl(CascaderStyle), - childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle) + inputFieldStyle: styleControl(CascaderStyle), + childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle), + animationStyle: styleControl(AnimationStyle), }; export const CascaderPropertyView = ( - children: RecordConstructorToComp + children: RecordConstructorToComp< + typeof CascaderChildren & {hidden: typeof BoolCodeControl} + > ) => ( <>
- {children.options.propertyView({ label: trans("cascader.options") })} - {children.value.propertyView({ label: trans("prop.defaultValue") })} + {children.options.propertyView({label: trans('cascader.options')})} + {children.value.propertyView({label: trans('prop.defaultValue')})} {placeholderPropertyView(children)}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -62,18 +79,19 @@ export const CascaderPropertyView = (
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes(useContext(EditorContext).editorModeStatus) && + children.label.getPropertyView()} - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && (
{allowClearPropertyView(children)} {showSearchPropertyView(children)}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <>
{children.style.getPropertyView()} @@ -87,6 +105,9 @@ export const CascaderPropertyView = (
{children.childrenInputFieldStyle.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index c0cc28a7d..ca51d7cea 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -1,29 +1,39 @@ -import { default as AntdCheckboxGroup } from "antd/es/checkbox/Group"; -import { SelectInputOptionControl } from "comps/controls/optionsControl"; -import { BoolCodeControl } from "../../controls/codeControl"; -import { arrayStringExposingStateControl } from "../../controls/codeStateControl"; -import { LabelControl } from "../../controls/labelControl"; -import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; -import { UICompBuilder } from "../../generators"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import styled, { css } from "styled-components"; +import {default as AntdCheckboxGroup} from 'antd/es/checkbox/Group'; +import {SelectInputOptionControl} from 'comps/controls/optionsControl'; +import {BoolCodeControl} from '../../controls/codeControl'; +import {arrayStringExposingStateControl} from '../../controls/codeStateControl'; +import {LabelControl} from '../../controls/labelControl'; +import {ChangeEventHandlerControl} from '../../controls/eventHandlerControl'; +import {UICompBuilder} from '../../generators'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import styled, {css} from 'styled-components'; import { selectDivRefMethods, SelectInputInvalidConfig, SelectInputValidationChildren, useSelectInputValidate, -} from "./selectInputConstants"; -import { formDataChildren } from "../formComp/formDataConstants"; -import { styleControl } from "comps/controls/styleControl"; -import { CheckboxStyle, CheckboxStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; -import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants"; -import { dropdownControl } from "../../controls/dropdownControl"; -import { ValueFromOption } from "lowcoder-design"; -import { EllipsisTextCss } from "lowcoder-design"; -import { trans } from "i18n"; -import { RefControl } from "comps/controls/refControl"; -import { migrateOldData } from "comps/generators/simpleGenerators"; -import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +} from './selectInputConstants'; +import {formDataChildren} from '../formComp/formDataConstants'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + CheckboxStyle, + CheckboxStyleType, + InputFieldStyle, + LabelStyle, +} from 'comps/controls/styleControlConstants'; +import {RadioLayoutOptions, RadioPropertyView} from './radioCompConstants'; +import {dropdownControl} from '../../controls/dropdownControl'; +import {ValueFromOption} from 'lowcoder-design'; +import {EllipsisTextCss} from 'lowcoder-design'; +import {trans} from 'i18n'; +import {RefControl} from 'comps/controls/refControl'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; +import {fixOldInputCompData} from '../textInputComp/textInputConstants'; export const getStyle = (style: CheckboxStyleType) => { return css` @@ -40,7 +50,7 @@ export const getStyle = (style: CheckboxStyleType) => { .ant-checkbox-inner { background-color: ${style.checkedBackground}; border-color: ${style.checkedBackground}; - border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; + border-width: ${!!style.borderWidth ? style.borderWidth : '2px'}; &::after { border-color: ${style.checked}; @@ -49,47 +59,49 @@ export const getStyle = (style: CheckboxStyleType) => { &::after { border-color: ${style.checkedBackground}; - border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; + border-width: ${!!style.borderWidth ? style.borderWidth : '2px'}; border-radius: ${style.radius}; } } - + .ant-checkbox-inner { border-radius: ${style.radius}; background-color: ${style.uncheckedBackground}; border-color: ${style.uncheckedBorder}; - border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; + border-width: ${!!style.borderWidth ? style.borderWidth : '2px'}; } - - &:hover .ant-checkbox-inner, + + &:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input + ant-checkbox-inner { - background-color:${style.hoverBackground ? style.hoverBackground : '#fff'}; + background-color: ${style.hoverBackground + ? style.hoverBackground + : '#fff'}; } - &:hover .ant-checkbox-checked .ant-checkbox-inner, + &:hover .ant-checkbox-checked .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input + ant-checkbox-inner { - background-color:${style.hoverBackground ? style.hoverBackground : '#ffff'}; + background-color: ${style.hoverBackground + ? style.hoverBackground + : '#ffff'}; } &:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner { border-color: ${style.checkedBackground}; - border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; + border-width: ${!!style.borderWidth ? style.borderWidth : '2px'}; } } - - .ant-checkbox-group-item { - font-family:${style.fontFamily}; - font-size:${style.textSize}; - font-weight:${style.textWeight}; - font-style:${style.fontStyle}; - text-transform:${style.textTransform}; - text-decoration:${style.textDecoration}; + font-family: ${style.fontFamily}; + font-size: ${style.textSize}; + font-weight: ${style.textWeight}; + font-style: ${style.fontStyle}; + text-transform: ${style.textTransform}; + text-decoration: ${style.textDecoration}; } .ant-checkbox-wrapper { padding: ${style.padding}; @@ -101,25 +113,25 @@ export const getStyle = (style: CheckboxStyleType) => { `; }; -const CheckboxGroup = styled(AntdCheckboxGroup) <{ +const CheckboxGroup = styled(AntdCheckboxGroup)<{ $style: CheckboxStyleType; $layout: ValueFromOption; }>` min-height: 32px; ${(props) => props.$style && getStyle(props.$style)} ${(props) => { - if (props.$layout === "horizontal") { + if (props.$layout === 'horizontal') { return css` display: flex; align-items: center; flex-wrap: wrap; `; - } else if (props.$layout === "vertical") { + } else if (props.$layout === 'vertical') { return css` display: flex; flex-direction: column; `; - } else if (props.$layout === "auto_columns") { + } else if (props.$layout === 'auto_columns') { return css` break-inside: avoid; columns: 160px; @@ -130,30 +142,33 @@ const CheckboxGroup = styled(AntdCheckboxGroup) <{ let CheckboxBasicComp = (function () { const childrenMap = { - defaultValue: arrayStringExposingStateControl("defaultValue"), - value: arrayStringExposingStateControl("value"), + defaultValue: arrayStringExposingStateControl('defaultValue'), + value: arrayStringExposingStateControl('value'), label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectInputOptionControl, style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), - layout: dropdownControl(RadioLayoutOptions, "horizontal"), + labelStyle: styleControl( + LabelStyle.filter( + (style) => ['accent', 'validate'].includes(style.name) === false + ) + ), + layout: dropdownControl(RadioLayoutOptions, 'horizontal'), viewRef: RefControl, - inputFieldStyle:styleControl(CheckboxStyle), + inputFieldStyle: styleControl(CheckboxStyle), + animationStyle: styleControl(AnimationStyle), ...SelectInputValidationChildren, ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { - const [ - validateState, - handleChange, - ] = useSelectInputValidate(props); + const [validateState, handleChange] = useSelectInputValidate(props); return props.label({ required: props.required, style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, children: ( { return css` @@ -23,12 +31,12 @@ const getStyle = (style: RadioStyleType) => { padding: ${style.padding}; span:not(.ant-radio) { ${EllipsisTextCss}; - font-family:${style.fontFamily}; - font-size:${style.textSize}; - font-weight:${style.textWeight}; - font-style:${style.fontStyle}; - text-transform:${style.textTransform}; - text-decoration:${style.textDecoration}; + font-family: ${style.fontFamily}; + font-size: ${style.textSize}; + font-weight: ${style.textWeight}; + font-style: ${style.fontStyle}; + text-transform: ${style.textTransform}; + text-decoration: ${style.textDecoration}; } .ant-radio-checked { @@ -45,16 +53,18 @@ const getStyle = (style: RadioStyleType) => { .ant-radio-inner { background-color: ${style.uncheckedBackground}; border-color: ${style.uncheckedBorder}; - border-width:${style.borderWidth}; + border-width: ${style.borderWidth}; &::after { background-color: ${style.checked}; } } - &:hover .ant-radio-inner, + &:hover .ant-radio-inner, .ant-radio:hover .ant-radio-inner, .ant-radio-input + ant-radio-inner { - background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'}; + background-color: ${style.hoverBackground + ? style.hoverBackground + : '#ffff'}; } &:hover .ant-radio-inner, @@ -75,18 +85,18 @@ const Radio = styled(AntdRadioGroup)<{ ${(props) => props.$style && getStyle(props.$style)} ${(props) => { - if (props.$layout === "horizontal") { + if (props.$layout === 'horizontal') { return css` display: flex; align-items: center; flex-wrap: wrap; `; - } else if (props.$layout === "vertical") { + } else if (props.$layout === 'vertical') { return css` display: flex; flex-direction: column; `; - } else if (props.$layout === "auto_columns") { + } else if (props.$layout === 'auto_columns') { return css` break-inside: avoid; columns: 160px; @@ -97,15 +107,13 @@ const Radio = styled(AntdRadioGroup)<{ let RadioBasicComp = (function () { return new UICompBuilder(RadioChildrenMap, (props) => { - const [ - validateState, - handleChange, - ] = useSelectInputValidate(props); + const [validateState, handleChange] = useSelectInputValidate(props); return props.label({ required: props.required, style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, children: ( , - inputFieldStyle:styleControl(RadioStyle), + inputFieldStyle: styleControl(RadioStyle), + animationStyle: styleControl(AnimationStyle), ...SelectInputValidationChildren, ...formDataChildren, }; export const RadioPropertyView = ( children: RecordConstructorToComp< - typeof RadioChildrenMap & { hidden: typeof BoolCodeControl } & { + typeof RadioChildrenMap & {hidden: typeof BoolCodeControl} & { defaultValue: | ReturnType | ReturnType; @@ -60,43 +72,57 @@ export const RadioPropertyView = ( <>
{children.options.propertyView({})} - {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })} + {children.defaultValue.propertyView({label: trans('prop.defaultValue')})}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <> - -
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} -
+ {['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && ( + <> + + +
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} +
+ )} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && (
{children.layout.propertyView({ - label: trans("radio.options"), + label: trans('radio.options'), tooltip: ( -
-
{trans("radio.horizontalTooltip")}
-
{trans("radio.verticalTooltip")}
-
{trans("radio.autoColumnsTooltip")}
+
+
{trans('radio.horizontalTooltip')}
+
{trans('radio.verticalTooltip')}
+
{trans('radio.autoColumnsTooltip')}
), })}
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes(useContext(EditorContext).editorModeStatus) && + children.label.getPropertyView()} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <> -
{children.style.getPropertyView()}
-
{children.labelStyle.getPropertyView()}
-
{children.inputFieldStyle.getPropertyView()}
+
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+
+ {children.inputFieldStyle.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx index 8470bd8b1..31bceb929 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx @@ -1,33 +1,46 @@ -import { default as AntdSegmented } from "antd/es/segmented"; -import { BoolCodeControl } from "comps/controls/codeControl"; -import { stringExposingStateControl } from "comps/controls/codeStateControl"; -import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; -import { LabelControl } from "comps/controls/labelControl"; -import { SelectOptionControl } from "comps/controls/optionsControl"; -import { styleControl } from "comps/controls/styleControl"; -import { SegmentStyle, SegmentStyleType } from "comps/controls/styleControlConstants"; -import styled, { css } from "styled-components"; -import { UICompBuilder } from "../../generators"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; +import {default as AntdSegmented} from 'antd/es/segmented'; +import {BoolCodeControl} from 'comps/controls/codeControl'; +import {stringExposingStateControl} from 'comps/controls/codeStateControl'; +import {ChangeEventHandlerControl} from 'comps/controls/eventHandlerControl'; +import {LabelControl} from 'comps/controls/labelControl'; +import {SelectOptionControl} from 'comps/controls/optionsControl'; +import {styleControl} from 'comps/controls/styleControl'; +import { + AnimationStyle, + SegmentStyle, + SegmentStyleType, +} from 'comps/controls/styleControlConstants'; +import styled, {css} from 'styled-components'; +import {UICompBuilder} from '../../generators'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../../generators/withExposing'; +import { + formDataChildren, + FormDataPropertyView, +} from '../formComp/formDataConstants'; import { selectDivRefMethods, SelectInputInvalidConfig, SelectInputValidationChildren, SelectInputValidationSection, useSelectInputValidate, -} from "./selectInputConstants"; -import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { hasIcon } from "comps/utils"; -import { RefControl } from "comps/controls/refControl"; - -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; -import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; -import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +} from './selectInputConstants'; +import {Section, sectionNames} from 'lowcoder-design'; +import { + hiddenPropertyView, + disabledPropertyView, +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {hasIcon} from 'comps/utils'; +import {RefControl} from 'comps/controls/refControl'; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; +import {migrateOldData, withDefault} from 'comps/generators/simpleGenerators'; +import {fixOldInputCompData} from '../textInputComp/textInputConstants'; const getStyle = (style: SegmentStyleType) => { return css` @@ -53,31 +66,33 @@ const getStyle = (style: SegmentStyleType) => { .ant-segmented-item-selected { border-radius: ${style.radius}; } - &.ant-segmented, .ant-segmented-item-label { - font-family:${style.fontFamily}; - font-style:${style.fontStyle}; - font-size:${style.textSize}; - font-weight:${style.textWeight}; - text-transform:${style.textTransform}; - text-decoration:${style.textDecoration}; + &.ant-segmented, + .ant-segmented-item-label { + font-family: ${style.fontFamily}; + font-style: ${style.fontStyle}; + font-size: ${style.textSize}; + font-weight: ${style.textWeight}; + text-transform: ${style.textTransform}; + text-decoration: ${style.textDecoration}; } `; }; -const Segmented = styled(AntdSegmented)<{ $style: SegmentStyleType }>` +const Segmented = styled(AntdSegmented)<{$style: SegmentStyleType}>` width: 100%; min-height: 24px; // keep the height unchanged when there are no options ${(props) => props.$style && getStyle(props.$style)} `; const SegmentChildrenMap = { - defaultValue: stringExposingStateControl("value"), - value: stringExposingStateControl("value"), + defaultValue: stringExposingStateControl('value'), + value: stringExposingStateControl('value'), label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectOptionControl, - style: withDefault(styleControl(SegmentStyle),{borderWidth:'1px'}), + style: withDefault(styleControl(SegmentStyle), {borderWidth: '1px'}), + animationStyle: styleControl(AnimationStyle), viewRef: RefControl, ...SelectInputValidationChildren, @@ -86,13 +101,11 @@ const SegmentChildrenMap = { let SegmentedControlBasicComp = (function () { return new UICompBuilder(SegmentChildrenMap, (props) => { - const [ - validateState, - handleChange, - ] = useSelectInputValidate(props); + const [validateState, handleChange] = useSelectInputValidate(props); return props.label({ required: props.required, style: props.style, + animationStyle: props.animationStyle, children: (
{children.options.propertyView({})} - {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })} + {children.defaultValue.propertyView({ + label: trans('prop.defaultValue'), + })}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <> - -
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} -
+ {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> + + +
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} +
+ )} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && children.label.getPropertyView()} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( -
- {children.style.getPropertyView()} -
+ {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ )} )) @@ -148,10 +174,16 @@ let SegmentedControlBasicComp = (function () { .build(); })(); -SegmentedControlBasicComp = migrateOldData(SegmentedControlBasicComp, fixOldInputCompData); +SegmentedControlBasicComp = migrateOldData( + SegmentedControlBasicComp, + fixOldInputCompData +); -export const SegmentedControlComp = withExposingConfigs(SegmentedControlBasicComp, [ - new NameConfig("value", trans("selectInput.valueDesc")), - SelectInputInvalidConfig, - ...CommonNameConfig, -]); +export const SegmentedControlComp = withExposingConfigs( + SegmentedControlBasicComp, + [ + new NameConfig('value', trans('selectInput.valueDesc')), + SelectInputInvalidConfig, + ...CommonNameConfig, + ] +); diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 8b113857f..211d715b7 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -1,36 +1,59 @@ -import { default as Switch } from "antd/es/switch"; -import { BoolCodeControl } from "comps/controls/codeControl"; -import { booleanExposingStateControl } from "comps/controls/codeStateControl"; -import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; -import { LabelControl } from "comps/controls/labelControl"; -import { styleControl } from "comps/controls/styleControl"; -import { SwitchStyle, SwitchStyleType, LabelStyle, InputFieldStyle } from "comps/controls/styleControlConstants"; -import { migrateOldData } from "comps/generators/simpleGenerators"; -import { Section, sectionNames } from "lowcoder-design"; -import styled, { css } from "styled-components"; -import { UICompBuilder } from "../generators"; -import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; -import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; -import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; -import { trans } from "i18n"; -import { RefControl } from "comps/controls/refControl"; -import { refMethods } from "comps/generators/withMethodExposing"; -import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils"; +import {default as Switch} from 'antd/es/switch'; +import {BoolCodeControl} from 'comps/controls/codeControl'; +import {booleanExposingStateControl} from 'comps/controls/codeStateControl'; +import { + changeEvent, + eventHandlerControl, +} from 'comps/controls/eventHandlerControl'; +import {LabelControl} from 'comps/controls/labelControl'; +import {styleControl} from 'comps/controls/styleControl'; +import { + SwitchStyle, + SwitchStyleType, + LabelStyle, + InputFieldStyle, + AnimationStyle, +} from 'comps/controls/styleControlConstants'; +import {migrateOldData} from 'comps/generators/simpleGenerators'; +import {Section, sectionNames} from 'lowcoder-design'; +import styled, {css} from 'styled-components'; +import {UICompBuilder} from '../generators'; +import { + CommonNameConfig, + NameConfig, + withExposingConfigs, +} from '../generators/withExposing'; +import { + formDataChildren, + FormDataPropertyView, +} from './formComp/formDataConstants'; +import { + hiddenPropertyView, + disabledPropertyView, +} from 'comps/utils/propertyUtils'; +import {trans} from 'i18n'; +import {RefControl} from 'comps/controls/refControl'; +import {refMethods} from 'comps/generators/withMethodExposing'; +import { + blurMethod, + clickMethod, + focusWithOptions, +} from 'comps/utils/methodUtils'; -import { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import {useContext} from 'react'; +import {EditorContext} from 'comps/editorState'; const EventOptions = [ changeEvent, { - label: trans("switchComp.open"), - value: "true", - description: trans("switchComp.openDesc"), + label: trans('switchComp.open'), + value: 'true', + description: trans('switchComp.openDesc'), }, { - label: trans("switchComp.close"), - value: "false", - description: trans("switchComp.closeDesc"), + label: trans('switchComp.close'), + value: 'false', + description: trans('switchComp.closeDesc'), }, ] as const; @@ -49,7 +72,7 @@ const getStyle = (style: SwitchStyleType) => { `; }; -const SwitchWrapper = styled.div<{ disabled: boolean; $style: SwitchStyleType }>` +const SwitchWrapper = styled.div<{disabled: boolean; $style: SwitchStyleType}>` min-height: 32px; display: flex; align-items: center; @@ -69,7 +92,7 @@ const SwitchWrapper = styled.div<{ disabled: boolean; $style: SwitchStyleType }> * compatible with old data 2022-08-23 */ function fixOldData(oldData: any) { - if (oldData && oldData.hasOwnProperty("unChecked")) { + if (oldData && oldData.hasOwnProperty('unChecked')) { return { label: oldData.label, handle: oldData.handle, @@ -85,21 +108,27 @@ function fixOldData(oldData: any) { */ let SwitchTmpComp = (function () { const childrenMap = { - value: booleanExposingStateControl("value"), + value: booleanExposingStateControl('value'), label: LabelControl, onEvent: eventHandlerControl(EventOptions), disabled: BoolCodeControl, style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), + animationStyle: styleControl(AnimationStyle), + labelStyle: styleControl( + LabelStyle.filter( + (style) => ['accent', 'validate'].includes(style.name) === false + ) + ), viewRef: RefControl, - inputFieldStyle:migrateOldData(styleControl(SwitchStyle), fixOldData), + inputFieldStyle: migrateOldData(styleControl(SwitchStyle), fixOldData), ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + animationStyle: props.animationStyle, children: ( { props.value.onChange(checked); - props.onEvent("change"); - props.onEvent(checked ? "true" : "false"); + props.onEvent('change'); + props.onEvent(checked ? 'true' : 'false'); }} /> @@ -120,12 +149,16 @@ let SwitchTmpComp = (function () { return ( <>
- {children.value.propertyView({ label: trans("switchComp.defaultValue") })} + {children.value.propertyView({ + label: trans('switchComp.defaultValue'), + })}
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['logic', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -133,11 +166,13 @@ let SwitchTmpComp = (function () {
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - children.label.getPropertyView() - )} + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && children.label.getPropertyView()} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {['layout', 'both'].includes( + useContext(EditorContext).editorModeStatus + ) && ( <>
{children.style.getPropertyView()} @@ -148,16 +183,21 @@ let SwitchTmpComp = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.animationStyle.getPropertyView()} +
)} ); }) - .setExposeMethodConfigs(refMethods([focusWithOptions, blurMethod, clickMethod])) + .setExposeMethodConfigs( + refMethods([focusWithOptions, blurMethod, clickMethod]) + ) .build(); })(); export const SwitchComp = withExposingConfigs(SwitchTmpComp, [ - new NameConfig("value", trans("switchComp.valueDesc")), + new NameConfig('value', trans('switchComp.valueDesc')), ...CommonNameConfig, ]); From 8d276f7bb13534b4046dab1d1a0842335f006f17 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:24:46 +0500 Subject: [PATCH 026/155] formatting removed --- .../src/components/Section.tsx | 95 +++++++++---------- 1 file changed, 43 insertions(+), 52 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 9e8f11c57..77ab6fa61 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -1,11 +1,11 @@ -import {trans} from 'i18n/design'; -import React, {ReactNode, useContext} from 'react'; -import styled from 'styled-components'; -import {ReactComponent as Packup} from 'icons/icon-Pack-up.svg'; -import {labelCss} from './Label'; -import {controlItem, ControlNode} from './control'; - -const SectionItem = styled.div<{$width?: number}>` +import { trans } from "i18n/design"; +import React, { ReactNode, useContext } from "react"; +import styled from "styled-components"; +import { ReactComponent as Packup } from "icons/icon-Pack-up.svg"; +import { labelCss } from "./Label"; +import { controlItem, ControlNode } from "./control"; + +const SectionItem = styled.div<{ $width?: number }>` width: ${(props) => (props.$width ? props.$width : 312)}px; border-bottom: 1px solid #e1e3eb; @@ -63,14 +63,14 @@ const SectionLabelDiv = styled.div` } `; -const ShowChildren = styled.div<{$show?: string; $noMargin?: boolean}>` - display: ${(props) => props.$show || 'none'}; +const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>` + display: ${(props) => props.$show || "none"}; flex-direction: column; gap: 8px; transition: all 3s; margin-left: ${(props) => (props.$noMargin ? 0 : 16)}px; padding-bottom: 16px; - padding-right: ${(props) => (props.$noMargin ? 0 : '16px')}; + padding-right: ${(props) => (props.$noMargin ? 0 : "16px")}; `; interface ISectionConfig { @@ -95,22 +95,16 @@ export interface PropertySectionContextType { state: PropertySectionState; } -export const PropertySectionContext = - React.createContext({ - toggle: () => {}, - compName: '', - state: {}, - }); +export const PropertySectionContext = React.createContext({ + toggle: () => {}, + compName: "", + state: {}, +}); export const BaseSection = (props: ISectionConfig) => { - const {name} = props; - const {compName, state, toggle} = useContext(PropertySectionContext); - const open = - props.open !== undefined - ? props.open - : name - ? state[compName]?.[name] !== false - : true; + const { name } = props; + const { compName, state, toggle } = useContext(PropertySectionContext); + const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true; // console.log("open", open, props.open); @@ -124,15 +118,15 @@ export const BaseSection = (props: ISectionConfig) => { return ( {props.name && ( - + {props.name} -
+
{open && props.additionalButton} - +
)} - + {props.children} @@ -140,31 +134,28 @@ export const BaseSection = (props: ISectionConfig) => { }; export function Section(props: ISectionConfig) { - return controlItem( - {filterText: props.name, searchChild: true}, - - ); + return controlItem({ filterText: props.name, searchChild: true }, ); } // common section names export const sectionNames = { - basic: trans('prop.basic'), - interaction: trans('prop.interaction'), - advanced: trans('prop.advanced'), - validation: trans('prop.validation'), - layout: trans('prop.layout'), - style: trans('prop.style'), - labelStyle: trans('prop.labelStyle'), - animationStyle: trans('prop.animationStyle'), - data: trans('prop.data'), - meetings: trans('prop.meetings'), // added by Falk Wolsky - field: trans('prop.field'), - inputFieldStyle: trans('prop.inputFieldStyle'), - avatarStyle: trans('prop.avatarStyle'), - captionStyle: trans('prop.captionStyle'), - startButtonStyle: trans('prop.startButtonStyle'), - resetButtonStyle: trans('prop.resetButtonStyle'), - headerStyle: trans('prop.headerStyle'), - bodyStyle: trans('prop.bodyStyle'), - badgeStyle: trans('prop.badgeStyle'), + basic: trans("prop.basic"), + interaction: trans("prop.interaction"), + advanced: trans("prop.advanced"), + validation: trans("prop.validation"), + layout: trans("prop.layout"), + style: trans("prop.style"), + labelStyle:trans("prop.labelStyle"), + animationStyle:trans("prop.animationStyle"), + data: trans("prop.data"), + meetings: trans("prop.meetings"), // added by Falk Wolsky + field: trans("prop.field"), + inputFieldStyle:trans("prop.inputFieldStyle"), + avatarStyle:trans("prop.avatarStyle"), + captionStyle:trans("prop.captionStyle"), + startButtonStyle:trans("prop.startButtonStyle"), + resetButtonStyle:trans("prop.resetButtonStyle"), + headerStyle:trans("prop.headerStyle"), + bodyStyle:trans("prop.bodyStyle"), + badgeStyle:trans("prop.badgeStyle"), }; From 1e16d615c69621033626bd2293444e007635e004 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:32:05 +0500 Subject: [PATCH 027/155] formating removed-1 --- .../src/i18n/design/locales/en.ts | 86 +- .../lowcoder-design/src/icons/index.ts | 1361 +++++++++-------- .../lowcoder/src/api/commonSettingApi.ts | 76 +- 3 files changed, 762 insertions(+), 761 deletions(-) diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index 1acbc0822..4ca204e55 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -1,33 +1,33 @@ export const en = { - addItem: 'Add', - duplicate: 'Duplicate', - rename: 'Rename', - delete: 'Delete', - edit: 'Edit', - ok: 'OK', - cancel: 'Cancel', - previousStep: 'Previous', - nextStep: 'Next', - finish: 'Finish', + addItem: "Add", + duplicate: "Duplicate", + rename: "Rename", + delete: "Delete", + edit: "Edit", + ok: "OK", + cancel: "Cancel", + previousStep: "Previous", + nextStep: "Next", + finish: "Finish", country: { - china: 'China', + china: "China", }, notification: { - copySuccess: 'Copy success', - copyFail: 'Copy failed', + copySuccess: "Copy success", + copyFail: "Copy failed", }, prop: { - basic: 'Basic', - resources: 'Resources', - interaction: 'Interaction', - advanced: 'Advanced', - validation: 'Validation', - layout: 'Layout', - animationStyle: 'Animation Style', - labelStyle: 'Label Style', - style: 'Style', - meetings: 'Meeting Settings', - data: 'Data', + basic: "Basic", + resources: "Resources", + interaction: "Interaction", + advanced: "Advanced", + validation: "Validation", + layout: "Layout", + animationStyle:"Animation Style", + labelStyle: "Label Style", + style: "Style", + meetings: "Meeting Settings", + data: "Data", field: 'Field', inputFieldStyle: 'Input Field Style', avatarStyle: 'Avatar Style', @@ -39,39 +39,39 @@ export const en = { badgeStyle: 'Badge Style', }, passwordInput: { - label: 'Password:', - placeholder: 'Please enter your password', - inconsistentPassword: 'Two passwords are inconsistent', - confirmPasswordLabel: 'Confirm password:', - confirmPasswordPlaceholder: 'Please enter your password again', + label: "Password:", + placeholder: "Please enter your password", + inconsistentPassword: "Two passwords are inconsistent", + confirmPasswordLabel: "Confirm password:", + confirmPasswordPlaceholder: "Please enter your password again", }, verifyCodeInput: { - label: 'Verification code:', - errorMsg: 'Code should be {digitNum} digits', - placeholder: 'Please enter {digitNum} digits code', - sendCode: 'Send code', + label: "Verification code:", + errorMsg: "Code should be {digitNum} digits", + placeholder: "Please enter {digitNum} digits code", + sendCode: "Send code", }, iconSelect: { - title: 'Select icon', - searchPlaceholder: 'Search icon', + title: "Select icon", + searchPlaceholder: "Search icon", }, shapeSelect: { - title: 'Select shape', - searchPlaceholder: 'Search shape', + title: "Select shape", + searchPlaceholder: "Search shape", }, eventHandler: { - advanced: 'Advanced', + advanced: "Advanced", }, comp: { - selectedCompsTitle: '{selectCompNum} components are selected', - selectedCompsDetail: 'Click component to view its properties', - batchDelete: 'Batch delete', + selectedCompsTitle: "{selectCompNum} components are selected", + selectedCompsDetail: "Click component to view its properties", + batchDelete: "Batch delete", }, optionsControl: { optionItemErrorMSg: `Found duplicate option value "{value}". Only the first item will be displayed. Please change to a unique value.`, - emptyList: 'No options', + emptyList: "No options", }, container: { - hintPlaceHolder: 'Drag components from the right panel', + hintPlaceHolder: "Drag components from the right panel", }, }; diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index e614ddce1..fbf2eb143 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -1,711 +1,716 @@ -export {ReactComponent as AppSnapshotIcon} from './app-snapshot.svg'; -export {ReactComponent as HookCompDropIcon} from './hook-comp-drop.svg'; -export {ReactComponent as HookCompIcon} from './hook-comp.svg'; +export { ReactComponent as AppSnapshotIcon } from "./app-snapshot.svg"; +export { ReactComponent as HookCompDropIcon } from "./hook-comp-drop.svg"; +export { ReactComponent as HookCompIcon } from "./hook-comp.svg"; -export {ReactComponent as JsGrayIcon} from './icon-Js-Gray.svg'; -export {ReactComponent as JsColorsIcon} from './icon-Js-colors.svg'; -export {ReactComponent as AdminIcon} from './icon-admin.svg'; -export {ReactComponent as AlignVerticalCent} from './icon-align-vertical-center.svg'; -export {ReactComponent as AppEditIcon} from './icon-app-edit.svg'; -export {ReactComponent as AuditAppIcon} from './icon-audit-app.svg'; -export {ReactComponent as AuditDbIcon} from './icon-audit-db.svg'; -export {ReactComponent as TreeFoldIcon} from './icon-audit-fold.svg'; -export {ReactComponent as AuditQueryIcon} from './icon-audit-query.svg'; -export {ReactComponent as AuditUserIcon} from './icon-audit-user.svg'; -export {ReactComponent as AuditFolderIcon} from './icon-audit-folder.svg'; +export { ReactComponent as JsGrayIcon } from "./icon-Js-Gray.svg"; +export { ReactComponent as JsColorsIcon } from "./icon-Js-colors.svg"; +export { ReactComponent as AdminIcon } from "./icon-admin.svg"; +export { ReactComponent as AlignVerticalCent } from "./icon-align-vertical-center.svg"; +export { ReactComponent as AppEditIcon } from "./icon-app-edit.svg"; +export { ReactComponent as AuditAppIcon } from "./icon-audit-app.svg"; +export { ReactComponent as AuditDbIcon } from "./icon-audit-db.svg"; +export { ReactComponent as TreeFoldIcon } from "./icon-audit-fold.svg"; +export { ReactComponent as AuditQueryIcon } from "./icon-audit-query.svg"; +export { ReactComponent as AuditUserIcon } from "./icon-audit-user.svg"; +export { ReactComponent as AuditFolderIcon } from "./icon-audit-folder.svg"; -export {ReactComponent as CaptchaIcon} from './icon-captcha.svg'; -export {ReactComponent as CheckboxIcon} from './icon-checkbox.svg'; -export {ReactComponent as CheckoutIcon} from './icon-checkout.svg'; -export {ReactComponent as ClickLinkIcon} from './icon-clickLink.svg'; -export {ReactComponent as CloseEyeIcon} from './icon-closeEye.svg'; -export {ReactComponent as CodeEditorCloseIcon} from './icon-code-editor-close.svg'; -export {ReactComponent as CodeEditorOpenIcon} from './icon-code-editor-open.svg'; -export {ReactComponent as CodeEditorPinnedIcon} from './remix/pushpin-2-fill.svg'; -export {ReactComponent as CodeEditorUnPinnedIcon} from './remix/pushpin-line.svg'; -export {ReactComponent as ColorHexIcon} from './icon-colorHex.svg'; -export {ReactComponent as ContainerDragIcon} from './icon-container-drag.svg'; -export {ReactComponent as CopyIcon} from './icon-copy.svg'; -export {ReactComponent as CreateModuleIcon} from './icon-create-module.svg'; -export {ReactComponent as PrevIcon} from './icon-date-prev.svg'; -export {ReactComponent as SuperPrevIcon} from './icon-date-super-prev.svg'; -export {ReactComponent as DragWhiteIcon} from './icon-drag-white.svg'; -export {ReactComponent as EmptyDataIcon} from './icon-empty-data.svg'; -export {ReactComponent as FlokcloseIcon} from './icon-flokclose.svg'; -export {ReactComponent as FoldedIcon} from './icon-folded.svg'; -export {ReactComponent as GroupIcon} from './icon-group.svg'; -export {ReactComponent as HelpIcon} from './icon-help.svg'; -export {ReactComponent as LockIcon} from './icon-lock.svg'; -export {ReactComponent as MembersIcon} from './icon-members.svg'; -export {ReactComponent as MoreActionIcon} from './icon-more-action.svg'; -export {ReactComponent as MultiselectTagIcon} from './icon-multiselect-tag.svg'; -export {ReactComponent as MustFillStarIcon} from './icon-must-fill-star.svg'; -export {ReactComponent as NofileIcon} from './icon-nofile.svg'; -export {ReactComponent as OmitIcon} from './icon-omit.svg'; -export {ReactComponent as OpenEyeIcon} from './icon-openEye.svg'; -export {ReactComponent as PasswordIcon} from './icon-password.svg'; -export {ReactComponent as RadioCheckedIcon} from './icon-radio-checked.svg'; -export {ReactComponent as RequiredIcon} from './icon-required.svg'; -export {ReactComponent as AttributeIcon} from './icon-right-attribute.svg'; -export {ReactComponent as InsertIcon} from './icon-right-insert.svg'; -export {ReactComponent as ShowBorderIcon} from './icon-show-border.svg'; -export {ReactComponent as SpaceIcon} from './icon-space.svg'; -export {ReactComponent as StarIcon} from './icon-star.svg'; -export {ReactComponent as SuperUserIcon} from './icon-super-user.svg'; -export {ReactComponent as SwitchCheckedIcon} from './icon-switch-checked.svg'; -export {ReactComponent as TextEditIcon} from './icon-text-edit.svg'; -export {ReactComponent as TriangleIcon} from './icon-triangle.svg'; -export {ReactComponent as TypographyIcon} from './icon-typography.svg'; -export {ReactComponent as UnfoldWhiteIcon} from './icon-unfold-white.svg'; -export {ReactComponent as UnfoldIcon} from './icon-unfold.svg'; -export {ReactComponent as WarningWhiteIcon} from './icon-warning-white.svg'; -export {ReactComponent as WarningIcon} from './icon-warning.svg'; -export {ReactComponent as WidthDragIcon} from './icon-widthDrag.svg'; -export {ReactComponent as ManyCheckboxIcon} from './manyCheckbox.svg'; -export {ReactComponent as Layout} from './icon-ShowLayout.svg'; -export {ReactComponent as Left} from './icon-ShowLeft.svg'; -export {ReactComponent as Middle} from './icon-ShowMiddle.svg'; -export {ReactComponent as Right} from './icon-ShowRight.svg'; -export {ReactComponent as DeployIcon} from './icon-rocket.svg'; -export {ReactComponent as ExportIcon} from './icon-export.svg'; -export {ReactComponent as BluePlusIcon} from './icon-blue-add.svg'; -export {ReactComponent as PencilIcon} from './icon-pencil.svg'; -export {ReactComponent as DragIcon} from './icon-drag.svg'; -export {ReactComponent as PointIcon} from './icon-three-point.svg'; -export {ReactComponent as AlignJustify} from './icon-align-justify.svg'; -export {ReactComponent as AlignRight} from './icon-align-right.svg'; -export {ReactComponent as AlignCenter} from './icon-align-center.svg'; -export {ReactComponent as AlignLeft} from './icon-align-left.svg'; -export {ReactComponent as AlignClose} from './icon-align-close.svg'; -export {ReactComponent as AlignTop} from './icon-align-top.svg'; -export {ReactComponent as AlignBottom} from './icon-align-bottom.svg'; -export {ReactComponent as AddIcon} from './icon-add.svg'; -export {ReactComponent as ImportAppIcon} from './icon-app-import.svg'; -export {ReactComponent as ImportIcon} from './icon-import.svg'; -export {ReactComponent as ImportIconV2} from './icon-import-v2.svg'; -export {ReactComponent as DatasourceIcon} from './icon-datasource.svg'; -export {ReactComponent as QueryLibraryIcon} from './icon-query-library.svg'; -export {ReactComponent as TransformerIcon} from './icon-transformer.svg'; -export {ReactComponent as TempStateIcon} from './icon-temp-state.svg'; -export {ReactComponent as IconDep} from './icon-style-dep.svg'; -export {ReactComponent as IconRadius} from './icon-style-border-radius.svg'; -export {ReactComponent as IconReset} from './icon-style-reset.svg'; -export {ReactComponent as PackUpIcon} from './icon-Pack-up.svg'; -export {ReactComponent as SearchIcon} from './icon-Search.svg'; -export {ReactComponent as SearchOutlinedIcon} from './icon-SearchOutlined.svg'; -export {ReactComponent as FilterIcon} from './icon-filter.svg'; -export {ReactComponent as DownloadIcon} from './icon-download.svg'; -export {ReactComponent as DownloadBoldIcon} from './icon-download-bold.svg'; -export {ReactComponent as DownloadedIcon} from './icon-downloaded.svg'; -export {ReactComponent as SettingIcon} from './icon-setting.svg'; -export {ReactComponent as RefreshIcon} from './icon-refresh.svg'; -export {ReactComponent as DeleteIcon} from './icon-recycle-bin.svg'; -export {ReactComponent as DeleteInputIcon} from './icon-deleteinput.svg'; -export {ReactComponent as UpgradeIcon} from './icon-upgrade.svg'; -export {ReactComponent as QuestionIcon} from './icon-question.svg'; -export {ReactComponent as CloseIcon} from './icon-close.svg'; -export {ReactComponent as SuccessIcon} from './icon-success.svg'; -export {ReactComponent as ErrorIcon} from './icon-err-warning.svg'; -export {ReactComponent as DocIcon} from './icon-tutorial.svg'; -export {ReactComponent as DocBoldIcon} from './icon-tutorial-bold.svg'; -export {ReactComponent as LabIcon} from './icon-laboratory.svg'; -export {ReactComponent as ArrowIcon} from './icon-arrow.svg'; -export {ReactComponent as ArrowSolidIcon} from './icon-arrow-solid.svg'; +export { ReactComponent as CaptchaIcon } from "./icon-captcha.svg"; +export { ReactComponent as CheckboxIcon } from "./icon-checkbox.svg"; +export { ReactComponent as CheckoutIcon } from "./icon-checkout.svg"; +export { ReactComponent as ClickLinkIcon } from "./icon-clickLink.svg"; +export { ReactComponent as CloseEyeIcon } from "./icon-closeEye.svg"; +export { ReactComponent as CodeEditorCloseIcon } from "./icon-code-editor-close.svg"; +export { ReactComponent as CodeEditorOpenIcon } from "./icon-code-editor-open.svg"; +export { ReactComponent as CodeEditorPinnedIcon} from "./remix/pushpin-2-fill.svg" +export { ReactComponent as CodeEditorUnPinnedIcon} from "./remix/pushpin-line.svg" +export { ReactComponent as ColorHexIcon } from "./icon-colorHex.svg"; +export { ReactComponent as ContainerDragIcon } from "./icon-container-drag.svg"; +export { ReactComponent as CopyIcon } from "./icon-copy.svg"; +export { ReactComponent as CreateModuleIcon } from "./icon-create-module.svg"; +export { ReactComponent as PrevIcon } from "./icon-date-prev.svg"; +export { ReactComponent as SuperPrevIcon } from "./icon-date-super-prev.svg"; +export { ReactComponent as DragWhiteIcon } from "./icon-drag-white.svg"; +export { ReactComponent as EmptyDataIcon } from "./icon-empty-data.svg"; +export { ReactComponent as FlokcloseIcon } from "./icon-flokclose.svg"; +export { ReactComponent as FoldedIcon } from "./icon-folded.svg"; +export { ReactComponent as GroupIcon } from "./icon-group.svg"; +export { ReactComponent as HelpIcon } from "./icon-help.svg"; +export { ReactComponent as LockIcon } from "./icon-lock.svg"; +export { ReactComponent as MembersIcon } from "./icon-members.svg"; +export { ReactComponent as MoreActionIcon } from "./icon-more-action.svg"; +export { ReactComponent as MultiselectTagIcon } from "./icon-multiselect-tag.svg"; +export { ReactComponent as MustFillStarIcon } from "./icon-must-fill-star.svg"; +export { ReactComponent as NofileIcon } from "./icon-nofile.svg"; +export { ReactComponent as OmitIcon } from "./icon-omit.svg"; +export { ReactComponent as OpenEyeIcon } from "./icon-openEye.svg"; +export { ReactComponent as PasswordIcon } from "./icon-password.svg"; +export { ReactComponent as RadioCheckedIcon } from "./icon-radio-checked.svg"; +export { ReactComponent as RequiredIcon } from "./icon-required.svg"; +export { ReactComponent as AttributeIcon } from "./icon-right-attribute.svg"; +export { ReactComponent as InsertIcon } from "./icon-right-insert.svg"; +export { ReactComponent as ShowBorderIcon } from "./icon-show-border.svg"; +export { ReactComponent as SpaceIcon } from "./icon-space.svg"; +export { ReactComponent as StarIcon } from "./icon-star.svg"; +export { ReactComponent as SuperUserIcon } from "./icon-super-user.svg"; +export { ReactComponent as SwitchCheckedIcon } from "./icon-switch-checked.svg"; +export { ReactComponent as TextEditIcon } from "./icon-text-edit.svg"; +export { ReactComponent as TriangleIcon } from "./icon-triangle.svg"; +export { ReactComponent as TypographyIcon } from "./icon-typography.svg"; +export { ReactComponent as UnfoldWhiteIcon } from "./icon-unfold-white.svg"; +export { ReactComponent as UnfoldIcon } from "./icon-unfold.svg"; +export { ReactComponent as WarningWhiteIcon } from "./icon-warning-white.svg"; +export { ReactComponent as WarningIcon } from "./icon-warning.svg"; +export { ReactComponent as WidthDragIcon } from "./icon-widthDrag.svg"; +export { ReactComponent as ManyCheckboxIcon } from "./manyCheckbox.svg"; +export { ReactComponent as Layout } from "./icon-ShowLayout.svg"; +export { ReactComponent as Left } from "./icon-ShowLeft.svg"; +export { ReactComponent as Middle } from "./icon-ShowMiddle.svg"; +export { ReactComponent as Right } from "./icon-ShowRight.svg"; +export { ReactComponent as DeployIcon } from "./icon-rocket.svg"; +export { ReactComponent as ExportIcon } from "./icon-export.svg"; +export { ReactComponent as BluePlusIcon } from "./icon-blue-add.svg"; +export { ReactComponent as PencilIcon } from "./icon-pencil.svg"; +export { ReactComponent as DragIcon } from "./icon-drag.svg"; +export { ReactComponent as PointIcon } from "./icon-three-point.svg"; +export { ReactComponent as AlignJustify } from "./icon-align-justify.svg"; +export { ReactComponent as AlignRight } from "./icon-align-right.svg"; +export { ReactComponent as AlignCenter } from "./icon-align-center.svg"; +export { ReactComponent as AlignLeft } from "./icon-align-left.svg"; +export { ReactComponent as AlignClose } from "./icon-align-close.svg"; +export { ReactComponent as AlignTop } from "./icon-align-top.svg"; +export { ReactComponent as AlignBottom } from "./icon-align-bottom.svg"; +export { ReactComponent as AddIcon } from "./icon-add.svg"; +export { ReactComponent as ImportAppIcon } from "./icon-app-import.svg"; +export { ReactComponent as ImportIcon } from "./icon-import.svg"; +export { ReactComponent as ImportIconV2 } from "./icon-import-v2.svg"; +export { ReactComponent as DatasourceIcon } from "./icon-datasource.svg"; +export { ReactComponent as QueryLibraryIcon } from "./icon-query-library.svg"; +export { ReactComponent as TransformerIcon } from "./icon-transformer.svg"; +export { ReactComponent as TempStateIcon } from "./icon-temp-state.svg"; +export { ReactComponent as IconDep } from "./icon-style-dep.svg"; +export { ReactComponent as IconRadius } from "./icon-style-border-radius.svg"; +export { ReactComponent as IconReset } from "./icon-style-reset.svg"; +export { ReactComponent as PackUpIcon } from "./icon-Pack-up.svg"; +export { ReactComponent as SearchIcon } from "./icon-Search.svg"; +export { ReactComponent as SearchOutlinedIcon } from "./icon-SearchOutlined.svg"; +export { ReactComponent as FilterIcon } from "./icon-filter.svg"; +export { ReactComponent as DownloadIcon } from "./icon-download.svg"; +export { ReactComponent as DownloadBoldIcon } from "./icon-download-bold.svg"; +export { ReactComponent as DownloadedIcon } from "./icon-downloaded.svg"; +export { ReactComponent as SettingIcon } from "./icon-setting.svg"; +export { ReactComponent as RefreshIcon } from "./icon-refresh.svg"; +export { ReactComponent as DeleteIcon } from "./icon-recycle-bin.svg"; +export { ReactComponent as DeleteInputIcon } from "./icon-deleteinput.svg"; +export { ReactComponent as UpgradeIcon } from "./icon-upgrade.svg"; +export { ReactComponent as QuestionIcon } from "./icon-question.svg"; +export { ReactComponent as CloseIcon } from "./icon-close.svg"; +export { ReactComponent as SuccessIcon } from "./icon-success.svg"; +export { ReactComponent as ErrorIcon } from "./icon-err-warning.svg"; +export { ReactComponent as DocIcon } from "./icon-tutorial.svg"; +export { ReactComponent as DocBoldIcon } from "./icon-tutorial-bold.svg"; +export { ReactComponent as LabIcon } from "./icon-laboratory.svg"; +export { ReactComponent as ArrowIcon } from "./icon-arrow.svg"; +export { ReactComponent as ArrowSolidIcon } from "./icon-arrow-solid.svg"; // Home Section -export {ReactComponent as PlusIcon} from './icon-plus.svg'; -export {ReactComponent as ApplicationDocIcon} from './v2/app-m.svg'; -export {ReactComponent as ModuleMenuIcon} from './v2/module-m.svg'; -export {ReactComponent as ModuleIcon} from './v2/module-m.svg'; -export {ReactComponent as ModuleDocIcon} from './v2/module-m.svg'; -export {ReactComponent as NavDocIcon} from './v2/entry-page-m.svg'; -export {ReactComponent as FolderIcon} from './remix/folder-6-line.svg'; -export {ReactComponent as AllTypesIcon} from './icon-application-all.svg'; -export {ReactComponent as InviteUserIcon} from './icon-application-invite-user.svg'; -export {ReactComponent as HomeEmptyIcon} from './icon-application-empty.svg'; -export {ReactComponent as HomeListIcon} from './icon-application-list.svg'; -export {ReactComponent as HomeCardIcon} from './icon-application-card.svg'; +export { ReactComponent as PlusIcon } from "./icon-plus.svg"; +export { ReactComponent as ApplicationDocIcon } from "./v2/app-m.svg"; +export { ReactComponent as ModuleMenuIcon } from "./v2/module-m.svg"; +export { ReactComponent as ModuleIcon } from "./v2/module-m.svg"; +export { ReactComponent as ModuleDocIcon } from "./v2/module-m.svg"; +export { ReactComponent as NavDocIcon } from "./v2/entry-page-m.svg"; +export { ReactComponent as FolderIcon } from "./remix/folder-6-line.svg"; +export { ReactComponent as AllTypesIcon } from "./icon-application-all.svg"; +export { ReactComponent as InviteUserIcon } from "./icon-application-invite-user.svg"; +export { ReactComponent as HomeEmptyIcon } from "./icon-application-empty.svg"; +export { ReactComponent as HomeListIcon } from "./icon-application-list.svg"; +export { ReactComponent as HomeCardIcon } from "./icon-application-card.svg"; // export { ReactComponent as AllAppIcon } from "./icon-all-app.svg"; + // Data Sources -export {ReactComponent as MysqlIcon} from './icon-query-MySQL.svg'; -export {ReactComponent as MongoIcon} from './icon-query-MongoDB.svg'; -export {ReactComponent as PostgresIcon} from './icon-query-postgres.svg'; -export {ReactComponent as RedisIcon} from './icon-query-Redis.svg'; -export {ReactComponent as MSSQLIcon} from './icon-query-mssql.svg'; -export {ReactComponent as SMTPIcon} from './icon-query-SMTP.svg'; -export {ReactComponent as OracleIcon} from './icon-query-OracleDB.svg'; -export {ReactComponent as ClickHouseIcon} from './icon-query-ClickHouse.svg'; -export {ReactComponent as GoogleSheetsIcon} from './icon-query-GoogleSheets.svg'; -export {ReactComponent as GraphqlIcon} from './icon-query-Graphql.svg'; -export {ReactComponent as SnowflakeIcon} from './icon-query-snowflake.svg'; -export {ReactComponent as MariaDBIcon} from './icon-query-MariaDB.svg'; +export { ReactComponent as MysqlIcon } from "./icon-query-MySQL.svg"; +export { ReactComponent as MongoIcon } from "./icon-query-MongoDB.svg"; +export { ReactComponent as PostgresIcon } from "./icon-query-postgres.svg"; +export { ReactComponent as RedisIcon } from "./icon-query-Redis.svg"; +export { ReactComponent as MSSQLIcon } from "./icon-query-mssql.svg"; +export { ReactComponent as SMTPIcon } from "./icon-query-SMTP.svg"; +export { ReactComponent as OracleIcon } from "./icon-query-OracleDB.svg"; +export { ReactComponent as ClickHouseIcon } from "./icon-query-ClickHouse.svg"; +export { ReactComponent as GoogleSheetsIcon } from "./icon-query-GoogleSheets.svg"; +export { ReactComponent as GraphqlIcon } from "./icon-query-Graphql.svg"; +export { ReactComponent as SnowflakeIcon } from "./icon-query-snowflake.svg"; +export { ReactComponent as MariaDBIcon } from "./icon-query-MariaDB.svg"; // Data Queries -export {ReactComponent as DataResponderIcon} from './icon-query-data-responder.svg'; -export {ReactComponent as RestApiIcon} from './icon-query-API.svg'; -export {ReactComponent as DeleteApiIcon} from './icon-query-delete.svg'; -export {ReactComponent as GetApiIcon} from './icon-query-get.svg'; -export {ReactComponent as PatchApiIcon} from './icon-query-patch.svg'; -export {ReactComponent as PostApiIcon} from './icon-query-post.svg'; -export {ReactComponent as PutApiIcon} from './icon-query-put.svg'; -export {ReactComponent as OptionsApiIcon} from './icon-query-options.svg'; -export {ReactComponent as HeadApiIcon} from './icon-query-head.svg'; -export {ReactComponent as TraceApiIcon} from './icon-query-trace.svg'; -export {ReactComponent as JSIcon} from './icon-query-JS.svg'; -export {ReactComponent as LowcoderQueryIcon} from './icon-query-lowcoder.svg'; -export {ReactComponent as EsIcon} from './icon-query-ElasticSearch.svg'; +export { ReactComponent as DataResponderIcon } from "./icon-query-data-responder.svg"; +export { ReactComponent as RestApiIcon } from "./icon-query-API.svg"; +export { ReactComponent as DeleteApiIcon } from "./icon-query-delete.svg"; +export { ReactComponent as GetApiIcon } from "./icon-query-get.svg"; +export { ReactComponent as PatchApiIcon } from "./icon-query-patch.svg"; +export { ReactComponent as PostApiIcon } from "./icon-query-post.svg"; +export { ReactComponent as PutApiIcon } from "./icon-query-put.svg"; +export { ReactComponent as OptionsApiIcon } from "./icon-query-options.svg"; +export { ReactComponent as HeadApiIcon } from "./icon-query-head.svg"; +export { ReactComponent as TraceApiIcon } from "./icon-query-trace.svg"; +export { ReactComponent as JSIcon } from "./icon-query-JS.svg"; +export { ReactComponent as LowcoderQueryIcon } from "./icon-query-lowcoder.svg"; +export { ReactComponent as EsIcon } from "./icon-query-ElasticSearch.svg"; + +export { ReactComponent as ResetIcon } from "./icon-style-reset.svg"; +export { ReactComponent as EditIcon } from "./icon-edit.svg"; +export { ReactComponent as EditableIcon } from "./icon-editable.svg"; +export { ReactComponent as LeftStateIcon } from "./remix/node-tree.svg"; +export {ReactComponent as StarSmileIcon} from "./remix/star-smile-line.svg"; +export {ReactComponent as Timer2Icon} from "./remix/timer-2-line.svg"; +export {ReactComponent as TimerFlashIcon} from "./remix/timer-flash-line.svg"; +export {ReactComponent as RefreshLineIcon} from "./remix/refresh-line.svg"; +export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg"; +export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg"; +export { ReactComponent as LeftHelpIcon } from "./icon-left-help.svg"; +export { ReactComponent as LeftPreloadIcon } from "./icon-left-preload.svg"; -export {ReactComponent as ResetIcon} from './icon-style-reset.svg'; -export {ReactComponent as EditIcon} from './icon-edit.svg'; -export {ReactComponent as EditableIcon} from './icon-editable.svg'; -export {ReactComponent as LeftStateIcon} from './remix/node-tree.svg'; -export {ReactComponent as StarSmileIcon} from './remix/star-smile-line.svg'; -export {ReactComponent as Timer2Icon} from './remix/timer-2-line.svg'; -export {ReactComponent as TimerFlashIcon} from './remix/timer-flash-line.svg'; -export {ReactComponent as RefreshLineIcon} from './remix/refresh-line.svg'; -export {ReactComponent as LeftSettingIcon} from './remix/tools-fill.svg'; -export {ReactComponent as LeftLayersIcon} from './remix/stack-line.svg'; -export {ReactComponent as LeftHelpIcon} from './icon-left-help.svg'; -export {ReactComponent as LeftPreloadIcon} from './icon-left-preload.svg'; -export {ReactComponent as HomeSettingsIcon} from './icon-home-settings.svg'; -export {ReactComponent as HomeSettingsActiveIcon} from './icon-home-settings-active.svg'; -export {ReactComponent as HelpGithubIcon} from './icon-help-github.svg'; -export {ReactComponent as HelpDiscordIcon} from './icon-help-discord.svg'; -export {ReactComponent as LeftOpen} from './icon-left-comp-open.svg'; -export {ReactComponent as LeftClose} from './icon-left-comp-close.svg'; -export {ReactComponent as MaterialUploadIcon} from './icon-material-upload.svg'; -export {ReactComponent as UndoIcon} from './icon-undo.svg'; +export { ReactComponent as HomeSettingsIcon } from "./icon-home-settings.svg"; +export { ReactComponent as HomeSettingsActiveIcon } from "./icon-home-settings-active.svg"; +export { ReactComponent as HelpGithubIcon } from "./icon-help-github.svg"; +export { ReactComponent as HelpDiscordIcon } from "./icon-help-discord.svg"; +export { ReactComponent as LeftOpen } from "./icon-left-comp-open.svg"; +export { ReactComponent as LeftClose } from "./icon-left-comp-close.svg"; +export { ReactComponent as MaterialUploadIcon } from "./icon-material-upload.svg"; +export { ReactComponent as UndoIcon } from "./icon-undo.svg"; -export {ReactComponent as ManualIcon} from './icon-manual.svg'; -export {ReactComponent as WarnIcon} from './icon-warn.svg'; -export {ReactComponent as SyncManualIcon} from './icon-sync-manual.svg'; -export {ReactComponent as DangerIcon} from './icon-danger.svg'; -export {ReactComponent as TableMinusIcon} from './icon-table-minus.svg'; -export {ReactComponent as TablePlusIcon} from './icon-table-plus.svg'; -export {ReactComponent as MobileAppIcon} from './icon-mobile-app.svg'; -export {ReactComponent as MobileNavIcon} from './icon-navigation-mobile.svg'; -export {ReactComponent as PcNavIcon} from './icon-navigation-pc.svg'; -export {ReactComponent as UnLockIcon} from './icon-unlock.svg'; -export {ReactComponent as CalendarDeleteIcon} from './icon-calendar-delete.svg'; -export {ReactComponent as TableCheckedIcon} from './icon-table-checked.svg'; -export {ReactComponent as TableUnCheckedIcon} from './icon-table-boolean-false.svg'; -export {ReactComponent as FileFolderIcon} from './icon-editor-folder.svg'; -export {ReactComponent as ExpandIcon} from './icon-expand.svg'; -export {ReactComponent as CompressIcon} from './icon-compress.svg'; -export {ReactComponent as TableCellsIcon} from './icon-table-cells.svg'; // Added By Aqib Mirza +export { ReactComponent as ManualIcon } from "./icon-manual.svg"; +export { ReactComponent as WarnIcon } from "./icon-warn.svg"; +export { ReactComponent as SyncManualIcon } from "./icon-sync-manual.svg"; +export { ReactComponent as DangerIcon } from "./icon-danger.svg"; +export { ReactComponent as TableMinusIcon } from "./icon-table-minus.svg"; +export { ReactComponent as TablePlusIcon } from "./icon-table-plus.svg"; +export { ReactComponent as MobileAppIcon } from "./icon-mobile-app.svg"; +export { ReactComponent as MobileNavIcon } from "./icon-navigation-mobile.svg"; +export { ReactComponent as PcNavIcon } from "./icon-navigation-pc.svg"; +export { ReactComponent as UnLockIcon } from "./icon-unlock.svg"; +export { ReactComponent as CalendarDeleteIcon } from "./icon-calendar-delete.svg"; +export { ReactComponent as TableCheckedIcon } from "./icon-table-checked.svg"; +export { ReactComponent as TableUnCheckedIcon } from "./icon-table-boolean-false.svg"; +export { ReactComponent as FileFolderIcon } from "./icon-editor-folder.svg"; +export { ReactComponent as ExpandIcon } from "./icon-expand.svg"; +export { ReactComponent as CompressIcon } from "./icon-compress.svg"; +export { ReactComponent as TableCellsIcon } from "./icon-table-cells.svg"; // Added By Aqib Mirza // Style Props -export {ReactComponent as WidthIcon} from './icon-width.svg'; -export {ReactComponent as TextSizeIcon} from './remix/font-size.svg'; -export {ReactComponent as TextTransformationIcon} from './remix/font-size-2.svg'; -export {ReactComponent as FontFamilyIcon} from './remix/font-sans-serif.svg'; -export {ReactComponent as TextWeightIcon} from './remix/bold.svg'; -export {ReactComponent as TextDecorationIcon} from './remix/underline.svg'; -export {ReactComponent as TextStyleIcon} from './remix/italic.svg'; -export {ReactComponent as BorderWidthIcon} from './remix/space.svg'; -export {ReactComponent as BorderStyleIcon} from './remix/separator.svg'; -export {ReactComponent as RotationIcon} from './remix/clockwise-line.svg'; -export {ReactComponent as BorderRadiusIcon} from './remix/rounded-corner.svg'; +export { ReactComponent as WidthIcon } from "./icon-width.svg"; +export { ReactComponent as TextSizeIcon } from "./remix/font-size.svg"; +export { ReactComponent as TextTransformationIcon } from "./remix/font-size-2.svg"; +export { ReactComponent as FontFamilyIcon } from "./remix/font-sans-serif.svg"; +export { ReactComponent as TextWeightIcon } from "./remix/bold.svg"; +export { ReactComponent as TextDecorationIcon } from "./remix/underline.svg"; +export { ReactComponent as TextStyleIcon } from "./remix/italic.svg"; +export { ReactComponent as BorderWidthIcon } from "./remix/space.svg"; +export { ReactComponent as BorderStyleIcon } from "./remix/separator.svg"; +export { ReactComponent as RotationIcon } from "./remix/clockwise-line.svg"; +export { ReactComponent as BorderRadiusIcon } from "./remix/rounded-corner.svg"; // Falk: TODO -export {ReactComponent as ShadowIcon} from './remix/shadow-line.svg'; -export {ReactComponent as OpacityIcon} from './remix/contrast-drop-2-line.svg'; -export {ReactComponent as AnimationIcon} from './remix/loader-line.svg'; +export { ReactComponent as ShadowIcon } from "./remix/shadow-line.svg"; +export { ReactComponent as OpacityIcon } from "./remix/contrast-drop-2-line.svg"; +export { ReactComponent as AnimationIcon } from "./remix/loader-line.svg"; + -export {ReactComponent as LeftInfoLine} from './remix/information-line.svg'; -export {ReactComponent as LeftInfoFill} from './remix/information-fill.svg'; -export {ReactComponent as LeftShow} from './remix/eye-off-line.svg'; -export {ReactComponent as LeftHide} from './remix/eye-line.svg'; -export {ReactComponent as LeftLock} from './remix/lock-line.svg'; -export {ReactComponent as LeftUnlock} from './remix/lock-unlock-line.svg'; -export {ReactComponent as UserGroupIcon} from './remix/group-line.svg'; -export {ReactComponent as UserIcon} from './remix/user-line.svg'; -export {ReactComponent as UserAddIcon} from './remix/user-add-line.svg'; -export {ReactComponent as UserDeleteIcon} from './remix/user-unfollow-line.svg'; -export {ReactComponent as UserShieldIcon} from './remix/shield-user-line.svg'; -export {ReactComponent as ThemeIcon} from './remix/palette-line.svg'; -export {ReactComponent as AppsIcon} from './remix/apps-2-line.svg'; -export {ReactComponent as WorkspacesIcon} from './remix/hotel-line.svg'; +export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg"; +export { ReactComponent as LeftInfoFill } from "./remix/information-fill.svg"; +export { ReactComponent as LeftShow } from "./remix/eye-off-line.svg"; +export { ReactComponent as LeftHide } from "./remix/eye-line.svg"; +export { ReactComponent as LeftLock } from "./remix/lock-line.svg"; +export { ReactComponent as LeftUnlock } from "./remix/lock-unlock-line.svg"; +export { ReactComponent as UserGroupIcon } from "./remix/group-line.svg"; +export { ReactComponent as UserIcon } from "./remix/user-line.svg"; +export { ReactComponent as UserAddIcon } from "./remix/user-add-line.svg"; +export { ReactComponent as UserDeleteIcon } from "./remix/user-unfollow-line.svg"; +export { ReactComponent as UserShieldIcon } from "./remix/shield-user-line.svg"; +export { ReactComponent as ThemeIcon } from "./remix/palette-line.svg"; +export { ReactComponent as AppsIcon } from "./remix/apps-2-line.svg"; +export { ReactComponent as WorkspacesIcon } from "./remix/hotel-line.svg"; + +export { ReactComponent as HomeIcon } from "./remix/home-3-line.svg"; +export { ReactComponent as NewsIcon } from "./remix/megaphone-line.svg"; +export { ReactComponent as HomeModuleIcon } from "./remix/focus-mode.svg"; +export { ReactComponent as HomeQueryLibraryIcon } from "./remix/braces-line.svg"; +export { ReactComponent as HomeDataSourceIcon } from "./remix/database-2-line.svg"; +export { ReactComponent as RecyclerIcon } from "./remix/delete-bin-line.svg"; +export { ReactComponent as MarketplaceIcon } from "./icon-application-marketplace.svg"; +export { ReactComponent as FavoritesIcon } from "./icon-application-favorites.svg"; +export { ReactComponent as HomeSettingIcon } from "./remix/settings-4-line.svg"; +export { ReactComponent as EnterpriseIcon } from "./remix/earth-line.svg"; -export {ReactComponent as HomeIcon} from './remix/home-3-line.svg'; -export {ReactComponent as NewsIcon} from './remix/megaphone-line.svg'; -export {ReactComponent as HomeModuleIcon} from './remix/focus-mode.svg'; -export {ReactComponent as HomeQueryLibraryIcon} from './remix/braces-line.svg'; -export {ReactComponent as HomeDataSourceIcon} from './remix/database-2-line.svg'; -export {ReactComponent as RecyclerIcon} from './remix/delete-bin-line.svg'; -export {ReactComponent as MarketplaceIcon} from './icon-application-marketplace.svg'; -export {ReactComponent as FavoritesIcon} from './icon-application-favorites.svg'; -export {ReactComponent as HomeSettingIcon} from './remix/settings-4-line.svg'; -export {ReactComponent as EnterpriseIcon} from './remix/earth-line.svg'; // components // small -export {ReactComponent as LeftCommon} from './icon-left-comp-common.svg'; // generic +export { ReactComponent as LeftCommon } from "./icon-left-comp-common.svg"; // generic -export {ReactComponent as AvatarCompIconSmall} from './v2/avatar-s.svg'; -export {ReactComponent as AvatarGroupCompIconSmall} from './v2/avatargroup-s.svg'; -export {ReactComponent as AudioCompIconSmall} from './v2/audio-player-s.svg'; -export {ReactComponent as AutoCompleteCompIconSmall} from './v2/auto-complete-input-s.svg'; // new -export {ReactComponent as ButtonCompIconSmall} from './v2/button-s.svg'; -export {ReactComponent as IconButtonCompIconSmall} from './v2/icon-button-s.svg'; // new -export {ReactComponent as CardCompIconSmall} from './v2/card-layout-s.svg'; -export {ReactComponent as CalendarCompIconSmall} from './v2/calendar-s.svg'; -export {ReactComponent as CascaderCompIconSmall} from './v2/cascader-s.svg'; -export {ReactComponent as CarouselCompIconSmall} from './v2/image-carousel-s.svg'; // new -export {ReactComponent as ChartCompIconSmall} from './v2/pie-chart-s.svg'; -export {ReactComponent as CheckboxCompIconSmall} from './v2/checkbox-s.svg'; -export {ReactComponent as ColorPickerCompIconSmall} from './v2/colorpicker-s.svg'; // new -export {ReactComponent as CollapsibleContainerCompIconSmall} from './v2/collapsible-container-s.svg'; // new -export {ReactComponent as CommentCompIconSmall} from './v2/comment-s.svg'; -export {ReactComponent as ContainerCompIconSmall} from './v2/container-s.svg'; -export {ReactComponent as CustomCompIconSmall} from './v2/custom-code-s.svg'; // new -export {ReactComponent as DateCompIconSmall} from './v2/date-select-s.svg'; -export {ReactComponent as DateRangeCompIconSmall} from './v2/date-range-select-s.svg'; // new -export {ReactComponent as DividerCompIconSmall} from './v2/divider-s.svg'; -export {ReactComponent as DrawerCompIconSmall} from './v2/drawer-s.svg'; -export {ReactComponent as DropdownCompIconSmall} from './v2/dropdown-s.svg'; // new -export {ReactComponent as UploadCompIconSmall} from './v2/file-upload-s.svg'; -export {ReactComponent as FileViewerCompIconSmall} from './v2/file-viewer-s.svg'; -export {ReactComponent as FloatingButtonCompIconSmall} from './v2/floating-button-s.svg'; // new -export {ReactComponent as FloatingTextCompIconSmall} from './v2/floating-text-layout-s.svg'; // new -export {ReactComponent as FormCompIconSmall} from './v2/form-s.svg'; -export {ReactComponent as GridCompIconSmall} from './v2/grid-view-s.svg'; // new -export {ReactComponent as IconCompIconSmall} from './v2/icon-s.svg'; // new -export {ReactComponent as IFrameCompIconSmall} from './v2/iframe-s.svg'; -export {ReactComponent as ImageEditorCompIconSmall} from './v2/image-editor-s.svg'; // new -export {ReactComponent as ImageCompIconSmall} from './v2/image-s.svg'; -export {ReactComponent as InputCompIconSmall} from './v2/input-s.svg'; -export {ReactComponent as JsonEditorCompIconSmall} from './v2/json-editor-s.svg'; -export {ReactComponent as JsonExplorerCompIconSmall} from './v2/json-viewer-s.svg'; // new -export {ReactComponent as JsonFormCompIconSmall} from './v2/json-schema-form-s.svg'; // new -export {ReactComponent as PageLayoutCompIconSmall} from './v2/page-layout-s.svg'; // new -export {ReactComponent as LinkCompIconSmall} from './v2/link-s.svg'; -export {ReactComponent as ListViewCompIconSmall} from './v2/list-view-s.svg'; -export {ReactComponent as LottieAnimationCompIconSmall} from './v2/lottie-animation-s.svg'; // new -export {ReactComponent as MentionCompIconSmall} from './v2/mention-s.svg'; // new -export {ReactComponent as MermaidCompIconSmall} from './v2/mermaid-chart-s.svg'; // new -export {ReactComponent as ModalCompIconSmall} from './v2/modal-s.svg'; -export {ReactComponent as ModuleIconSmall} from './v2/module-s.svg'; -export {ReactComponent as MultiSelectCompIconSmall} from './v2/multiselect-s.svg'; // new -export {ReactComponent as NavComIconSmall} from './v2/navigation-s.svg'; -export {ReactComponent as NumberInputCompIconSmall} from './v2/number-input-s.svg'; -export {ReactComponent as PasswordCompIconSmall} from './v2/password-s.svg'; -export {ReactComponent as ProgressCompIconSmall} from './v2/progress-s.svg'; -export {ReactComponent as ProcessCircleCompIconSmall} from './v2/progress-circle-s.svg'; // new -export {ReactComponent as QRCodeCompIconSmall} from './v2/qr-code-display-s.svg'; -export {ReactComponent as RadioCompIconSmall} from './v2/radio-button-s.svg'; -export {ReactComponent as RangeSliderCompIconSmall} from './v2/range-slider-s.svg'; // new -export {ReactComponent as RatingCompIconSmall} from './v2/rating-s.svg'; -export {ReactComponent as ResponsiveLayoutCompIconSmall} from './v2/resposive-layout-s.svg'; // new -export {ReactComponent as RichTextEditorCompIconSmall} from './v2/rich-text-editor-s.svg'; // new -export {ReactComponent as ScannerCompIconSmall} from './v2/scanner-s.svg'; // new -export {ReactComponent as ShapesCompIconSmall} from './v2/shapes-s.svg'; // new -export {ReactComponent as SegmentedCompIconSmall} from './v2/segmented-control-s.svg'; -export {ReactComponent as SelectCompIconSmall} from './v2/select-s.svg'; -export {ReactComponent as SliderCompIconSmall} from './v2/slider-s.svg'; +export { ReactComponent as AvatarCompIconSmall } from "./v2/avatar-s.svg"; +export { ReactComponent as AvatarGroupCompIconSmall } from "./v2/avatargroup-s.svg"; +export { ReactComponent as AudioCompIconSmall } from "./v2/audio-player-s.svg"; +export { ReactComponent as AutoCompleteCompIconSmall } from "./v2/auto-complete-input-s.svg"; // new +export { ReactComponent as ButtonCompIconSmall } from "./v2/button-s.svg"; +export { ReactComponent as IconButtonCompIconSmall } from "./v2/icon-button-s.svg"; // new +export { ReactComponent as CardCompIconSmall } from "./v2/card-layout-s.svg"; +export { ReactComponent as CalendarCompIconSmall } from "./v2/calendar-s.svg"; +export { ReactComponent as CascaderCompIconSmall } from "./v2/cascader-s.svg"; +export { ReactComponent as CarouselCompIconSmall } from "./v2/image-carousel-s.svg"; // new +export { ReactComponent as ChartCompIconSmall } from "./v2/pie-chart-s.svg"; +export { ReactComponent as CheckboxCompIconSmall } from "./v2/checkbox-s.svg"; +export { ReactComponent as ColorPickerCompIconSmall } from "./v2/colorpicker-s.svg"; // new +export { ReactComponent as CollapsibleContainerCompIconSmall } from "./v2/collapsible-container-s.svg"; // new +export { ReactComponent as CommentCompIconSmall } from "./v2/comment-s.svg"; +export { ReactComponent as ContainerCompIconSmall } from "./v2/container-s.svg"; +export { ReactComponent as CustomCompIconSmall } from "./v2/custom-code-s.svg"; // new +export { ReactComponent as DateCompIconSmall } from "./v2/date-select-s.svg"; +export { ReactComponent as DateRangeCompIconSmall } from "./v2/date-range-select-s.svg"; // new +export { ReactComponent as DividerCompIconSmall } from "./v2/divider-s.svg"; +export { ReactComponent as DrawerCompIconSmall } from "./v2/drawer-s.svg"; +export { ReactComponent as DropdownCompIconSmall } from "./v2/dropdown-s.svg"; // new +export { ReactComponent as UploadCompIconSmall } from "./v2/file-upload-s.svg"; +export { ReactComponent as FileViewerCompIconSmall } from "./v2/file-viewer-s.svg"; +export { ReactComponent as FloatingButtonCompIconSmall } from "./v2/floating-button-s.svg"; // new +export { ReactComponent as FloatingTextCompIconSmall } from "./v2/floating-text-layout-s.svg"; // new +export { ReactComponent as FormCompIconSmall } from "./v2/form-s.svg"; +export { ReactComponent as GridCompIconSmall } from "./v2/grid-view-s.svg"; // new +export { ReactComponent as IconCompIconSmall } from "./v2/icon-s.svg"; // new +export { ReactComponent as IFrameCompIconSmall } from "./v2/iframe-s.svg"; +export { ReactComponent as ImageEditorCompIconSmall } from "./v2/image-editor-s.svg"; // new +export { ReactComponent as ImageCompIconSmall } from "./v2/image-s.svg"; +export { ReactComponent as InputCompIconSmall } from "./v2/input-s.svg"; +export { ReactComponent as JsonEditorCompIconSmall } from "./v2/json-editor-s.svg"; +export { ReactComponent as JsonExplorerCompIconSmall } from "./v2/json-viewer-s.svg"; // new +export { ReactComponent as JsonFormCompIconSmall } from "./v2/json-schema-form-s.svg"; // new +export { ReactComponent as PageLayoutCompIconSmall } from "./v2/page-layout-s.svg"; // new +export { ReactComponent as LinkCompIconSmall } from "./v2/link-s.svg"; +export { ReactComponent as ListViewCompIconSmall } from "./v2/list-view-s.svg"; +export { ReactComponent as LottieAnimationCompIconSmall } from "./v2/lottie-animation-s.svg"; // new +export { ReactComponent as MentionCompIconSmall } from "./v2/mention-s.svg"; // new +export { ReactComponent as MermaidCompIconSmall } from "./v2/mermaid-chart-s.svg"; // new +export { ReactComponent as ModalCompIconSmall } from "./v2/modal-s.svg"; +export { ReactComponent as ModuleIconSmall } from "./v2/module-s.svg"; +export { ReactComponent as MultiSelectCompIconSmall } from "./v2/multiselect-s.svg"; // new +export { ReactComponent as NavComIconSmall } from "./v2/navigation-s.svg"; +export { ReactComponent as NumberInputCompIconSmall } from "./v2/number-input-s.svg"; +export { ReactComponent as PasswordCompIconSmall } from "./v2/password-s.svg"; +export { ReactComponent as ProgressCompIconSmall } from "./v2/progress-s.svg"; +export { ReactComponent as ProcessCircleCompIconSmall } from "./v2/progress-circle-s.svg"; // new +export { ReactComponent as QRCodeCompIconSmall } from "./v2/qr-code-display-s.svg"; +export { ReactComponent as RadioCompIconSmall } from "./v2/radio-button-s.svg"; +export { ReactComponent as RangeSliderCompIconSmall } from "./v2/range-slider-s.svg"; // new +export { ReactComponent as RatingCompIconSmall } from "./v2/rating-s.svg"; +export { ReactComponent as ResponsiveLayoutCompIconSmall } from "./v2/resposive-layout-s.svg"; // new +export { ReactComponent as RichTextEditorCompIconSmall } from "./v2/rich-text-editor-s.svg"; // new +export { ReactComponent as ScannerCompIconSmall } from "./v2/scanner-s.svg"; // new +export { ReactComponent as ShapesCompIconSmall } from "./v2/shapes-s.svg"; // new +export { ReactComponent as SegmentedCompIconSmall } from "./v2/segmented-control-s.svg"; +export { ReactComponent as SelectCompIconSmall } from "./v2/select-s.svg"; +export { ReactComponent as SliderCompIconSmall } from "./v2/slider-s.svg"; // export { ReactComponent as StepsTextIconSmall } from "./icon-steps-comp.svg"; // new -export {ReactComponent as SwitchCompIconSmall} from './v2/switch-s.svg'; -export {ReactComponent as TabbedContainerCompIconSmall} from './v2/tabbed-container-s.svg'; // new -export {ReactComponent as TableCompIconSmall} from './v2/table-s.svg'; -export {ReactComponent as TextAreaCompIconSmall} from './v2/text-area-input-s.svg'; // new -export {ReactComponent as TextCompIconSmall} from './v2/text-display-s.svg'; -export {ReactComponent as TimeCompIconSmall} from './v2/time-select-s.svg'; -export {ReactComponent as TimeLineCompIconSmall} from './v2/timeline-s.svg'; // new -export {ReactComponent as TimeRangeCompIconSmall} from './v2/time-range-select-s.svg'; // new -export {ReactComponent as ToggleButtonCompIconSmall} from './v2/toggle-button-s.svg'; // new -export {ReactComponent as TourCompIconSmall} from './v2/modal-s.svg'; // new -export {ReactComponent as TransferCompIconSmall} from './v2/transfer-list-s.svg'; // new -export {ReactComponent as TreeDisplayCompIconSmall} from './v2/tree-display-s.svg'; -export {ReactComponent as TreeSelectCompIconSmall} from './v2/tree-select-s.svg'; // new -export {ReactComponent as VideoCompIconSmall} from './v2/video-player-s.svg'; -export {ReactComponent as VideoMeetingRoomCompIconSmall} from './v2/meeting-room-s.svg'; -export {ReactComponent as VideoCameraStreamCompIconSmall} from './v2/camera-stream-s.svg'; // new -export {ReactComponent as VideoScreenshareCompIconSmall} from './v2/screen-share-stream-s.svg'; // new -export {ReactComponent as SignatureCompIconSmall} from './v2/signature-s.svg'; -export {ReactComponent as StepCompIconSmall} from './v2/steps-s.svg'; +export { ReactComponent as SwitchCompIconSmall } from "./v2/switch-s.svg"; +export { ReactComponent as TabbedContainerCompIconSmall } from "./v2/tabbed-container-s.svg"; // new +export { ReactComponent as TableCompIconSmall } from "./v2/table-s.svg"; +export { ReactComponent as TextAreaCompIconSmall } from "./v2/text-area-input-s.svg"; // new +export { ReactComponent as TextCompIconSmall } from "./v2/text-display-s.svg"; +export { ReactComponent as TimeCompIconSmall } from "./v2/time-select-s.svg"; +export { ReactComponent as TimeLineCompIconSmall } from "./v2/timeline-s.svg"; // new +export { ReactComponent as TimeRangeCompIconSmall } from "./v2/time-range-select-s.svg"; // new +export { ReactComponent as ToggleButtonCompIconSmall } from "./v2/toggle-button-s.svg"; // new +export { ReactComponent as TourCompIconSmall } from "./v2/modal-s.svg"; // new +export { ReactComponent as TransferCompIconSmall } from "./v2/transfer-list-s.svg"; // new +export { ReactComponent as TreeDisplayCompIconSmall } from "./v2/tree-display-s.svg"; +export { ReactComponent as TreeSelectCompIconSmall } from "./v2/tree-select-s.svg"; // new +export { ReactComponent as VideoCompIconSmall } from "./v2/video-player-s.svg"; +export { ReactComponent as VideoMeetingRoomCompIconSmall } from "./v2/meeting-room-s.svg"; +export { ReactComponent as VideoCameraStreamCompIconSmall } from "./v2/camera-stream-s.svg"; // new +export { ReactComponent as VideoScreenshareCompIconSmall } from "./v2/screen-share-stream-s.svg"; // new +export { ReactComponent as SignatureCompIconSmall } from "./v2/signature-s.svg"; +export { ReactComponent as StepCompIconSmall } from "./v2/steps-s.svg"; + +export { ReactComponent as CandlestickChartCompIconSmall } from "./v2/candlestick-chart-s.svg"; // new +export { ReactComponent as FunnelChartCompIconSmall } from "./v2/funnel-chart-s.svg"; // new +export { ReactComponent as GaugeChartCompIconSmall } from "./v2/gauge-chart-s.svg"; // new +export { ReactComponent as GraphChartCompIconSmall } from "./v2/graph-chart-s.svg"; // new +export { ReactComponent as HeatmapChartCompIconSmall } from "./v2/heatmap-chart-s.svg"; // new +export { ReactComponent as RadarChartCompIconSmall } from "./v2/radar-chart-s.svg"; // new +export { ReactComponent as SankeyChartCompIconSmall } from "./v2/sankey-chart-s.svg"; // new +export { ReactComponent as SunburstChartCompIconSmall } from "./v2/sunburst-chart-s.svg"; // new +export { ReactComponent as ThemeriverChartCompIconSmall } from "./v2/themeriver-chart-s.svg"; // new +export { ReactComponent as TreeChartCompIconSmall } from "./v2/tree-chart-s.svg"; // new +export { ReactComponent as TreemapChartCompIconSmall } from "./v2/treemap-chart-s.svg"; // new +export { ReactComponent as BPMNEditorCompIconSmall } from "./v2/bpmn-editor-s.svg"; // new +export { ReactComponent as GeoMapChartsCompIconSmall } from "./v2/geomap-charts-s.svg"; // new +export { ReactComponent as GeoMapLayersCompIconSmall } from "./v2/geomap-layers-s.svg"; // new +export { ReactComponent as HillchartCompIconSmall } from "./v2/hillchart-s.svg"; // new +export { ReactComponent as PivotTableCompIconSmall } from "./v2/pivot-table-s.svg"; // new +export { ReactComponent as TurnstileCaptchaCompIconSmall } from "./v2/turnstile-captcha-s.svg"; // new -export {ReactComponent as CandlestickChartCompIconSmall} from './v2/candlestick-chart-s.svg'; // new -export {ReactComponent as FunnelChartCompIconSmall} from './v2/funnel-chart-s.svg'; // new -export {ReactComponent as GaugeChartCompIconSmall} from './v2/gauge-chart-s.svg'; // new -export {ReactComponent as GraphChartCompIconSmall} from './v2/graph-chart-s.svg'; // new -export {ReactComponent as HeatmapChartCompIconSmall} from './v2/heatmap-chart-s.svg'; // new -export {ReactComponent as RadarChartCompIconSmall} from './v2/radar-chart-s.svg'; // new -export {ReactComponent as SankeyChartCompIconSmall} from './v2/sankey-chart-s.svg'; // new -export {ReactComponent as SunburstChartCompIconSmall} from './v2/sunburst-chart-s.svg'; // new -export {ReactComponent as ThemeriverChartCompIconSmall} from './v2/themeriver-chart-s.svg'; // new -export {ReactComponent as TreeChartCompIconSmall} from './v2/tree-chart-s.svg'; // new -export {ReactComponent as TreemapChartCompIconSmall} from './v2/treemap-chart-s.svg'; // new -export {ReactComponent as BPMNEditorCompIconSmall} from './v2/bpmn-editor-s.svg'; // new -export {ReactComponent as GeoMapChartsCompIconSmall} from './v2/geomap-charts-s.svg'; // new -export {ReactComponent as GeoMapLayersCompIconSmall} from './v2/geomap-layers-s.svg'; // new -export {ReactComponent as HillchartCompIconSmall} from './v2/hillchart-s.svg'; // new -export {ReactComponent as PivotTableCompIconSmall} from './v2/pivot-table-s.svg'; // new -export {ReactComponent as TurnstileCaptchaCompIconSmall} from './v2/turnstile-captcha-s.svg'; // new // medium -export {ReactComponent as AudioCompIcon} from './v2/audio-player-m.svg'; -export {ReactComponent as AutoCompleteCompIcon} from './v2/auto-complete-input-m.svg'; -export {ReactComponent as AvatarCompIcon} from './v2/avatar-m.svg'; -export {ReactComponent as ButtonCompIcon} from './v2/button-m.svg'; -export {ReactComponent as AvatarGroupCompIcon} from './v2/avatargroup-m.svg'; -export {ReactComponent as IconButtonCompIcon} from './v2/icon-button-m.svg'; -export {ReactComponent as CalendarCompIcon} from './v2/calendar-m.svg'; -export {ReactComponent as CardCompIcon} from './v2/card-layout-m.svg'; -export {ReactComponent as CarouselCompIcon} from './v2/image-carousel-m.svg'; -export {ReactComponent as CascaderCompIcon} from './v2/cascader-m.svg'; -export {ReactComponent as ChartCompIcon} from './v2/pie-chart-m.svg'; -export {ReactComponent as CheckboxCompIcon} from './v2/checkbox-m.svg'; -export {ReactComponent as CollapsibleContainerCompIcon} from './v2/collapsible-container-m.svg'; -export {ReactComponent as CommentCompIcon} from './v2/comment-m.svg'; -export {ReactComponent as ColorPickerCompIcon} from './v2/colorpicker-m.svg'; -export {ReactComponent as ContainerCompIcon} from './v2/container-m.svg'; -export {ReactComponent as CustomCompIcon} from './v2/custom-code-m.svg'; -export {ReactComponent as DateCompIcon} from './v2/date-select-m.svg'; -export {ReactComponent as DateRangeCompIcon} from './v2/date-range-select-m.svg'; -export {ReactComponent as DividerCompIcon} from './v2/divider-m.svg'; -export {ReactComponent as DrawerCompIcon} from './v2/drawer-m.svg'; -export {ReactComponent as DropdownCompIcon} from './v2/dropdown-m.svg'; -export {ReactComponent as FileViewerCompIcon} from './v2/file-viewer-m.svg'; -export {ReactComponent as FloatingButtonCompIcon} from './v2/floating-button-m.svg'; -export {ReactComponent as FloatingTextCompIcon} from './v2/floating-text-layout-m.svg'; -export {ReactComponent as FormCompIcon} from './v2/form-m.svg'; -export {ReactComponent as GridCompIcon} from './v2/grid-view-m.svg'; -export {ReactComponent as IconCompIcon} from './v2/icon-m.svg'; -export {ReactComponent as IFrameCompIcon} from './v2/iframe-m.svg'; -export {ReactComponent as ImageEditorCompIcon} from './v2/image-editor-m.svg'; -export {ReactComponent as ImageCompIcon} from './v2/image-m.svg'; -export {ReactComponent as InputCompIcon} from './v2/input-m.svg'; -export {ReactComponent as JsonEditorCompIcon} from './v2/json-editor-m.svg'; -export {ReactComponent as JsonExplorerCompIcon} from './v2/json-viewer-m.svg'; -export {ReactComponent as JsonFormCompIcon} from './v2/json-schema-form-m.svg'; -export {ReactComponent as PageLayoutCompIcon} from './v2/page-layout-m.svg'; -export {ReactComponent as LinkCompIcon} from './v2/link-m.svg'; -export {ReactComponent as ListViewCompIcon} from './v2/list-view-m.svg'; -export {ReactComponent as LottieAnimationCompIcon} from './v2/lottie-animation-m.svg'; -export {ReactComponent as MentionCompIcon} from './v2/mention-m.svg'; -export {ReactComponent as MermaidCompIcon} from './v2/mermaid-chart-m.svg'; -export {ReactComponent as ModalCompIcon} from './v2/modal-m.svg'; -export {ReactComponent as MultiSelectCompIcon} from './v2/multiselect-m.svg'; -export {ReactComponent as NavComIcon} from './v2/navigation-m.svg'; -export {ReactComponent as NumberInputCompIcon} from './v2/number-input-m.svg'; -export {ReactComponent as PasswordCompIcon} from './v2/password-m.svg'; -export {ReactComponent as ProcessCircleCompIcon} from './v2/progress-circle-m.svg'; -export {ReactComponent as ProgressCompIcon} from './v2/progress-m.svg'; -export {ReactComponent as QRCodeCompIcon} from './v2/qr-code-display-m.svg'; -export {ReactComponent as RadioCompIcon} from './v2/radio-button-m.svg'; -export {ReactComponent as RangeSliderCompIcon} from './v2/range-slider-m.svg'; -export {ReactComponent as RatingCompIcon} from './v2/rating-m.svg'; -export {ReactComponent as ResponsiveLayoutCompIcon} from './v2/resposive-layout-m.svg'; -export {ReactComponent as RichTextEditorCompIcon} from './v2/rich-text-editor-m.svg'; -export {ReactComponent as ScannerCompIcon} from './v2/scanner-m.svg'; -export {ReactComponent as ShapesCompIcon} from './v2/shapes-m.svg'; -export {ReactComponent as SegmentedCompIcon} from './v2/segmented-control-m.svg'; -export {ReactComponent as SelectCompIcon} from './v2/select-m.svg'; -export {ReactComponent as SliderCompIcon} from './v2/slider-m.svg'; +export { ReactComponent as AudioCompIcon } from "./v2/audio-player-m.svg"; +export { ReactComponent as AutoCompleteCompIcon } from "./v2/auto-complete-input-m.svg"; +export { ReactComponent as AvatarCompIcon } from "./v2/avatar-m.svg"; +export { ReactComponent as ButtonCompIcon } from "./v2/button-m.svg"; +export { ReactComponent as AvatarGroupCompIcon } from "./v2/avatargroup-m.svg"; +export { ReactComponent as IconButtonCompIcon } from "./v2/icon-button-m.svg"; +export { ReactComponent as CalendarCompIcon } from "./v2/calendar-m.svg"; +export { ReactComponent as CardCompIcon } from "./v2/card-layout-m.svg"; +export { ReactComponent as CarouselCompIcon } from "./v2/image-carousel-m.svg"; +export { ReactComponent as CascaderCompIcon } from "./v2/cascader-m.svg"; +export { ReactComponent as ChartCompIcon } from "./v2/pie-chart-m.svg"; +export { ReactComponent as CheckboxCompIcon } from "./v2/checkbox-m.svg"; +export { ReactComponent as CollapsibleContainerCompIcon } from "./v2/collapsible-container-m.svg"; +export { ReactComponent as CommentCompIcon } from "./v2/comment-m.svg"; +export { ReactComponent as ColorPickerCompIcon } from "./v2/colorpicker-m.svg"; +export { ReactComponent as ContainerCompIcon } from "./v2/container-m.svg"; +export { ReactComponent as CustomCompIcon } from "./v2/custom-code-m.svg"; +export { ReactComponent as DateCompIcon } from "./v2/date-select-m.svg"; +export { ReactComponent as DateRangeCompIcon } from "./v2/date-range-select-m.svg"; +export { ReactComponent as DividerCompIcon } from "./v2/divider-m.svg"; +export { ReactComponent as DrawerCompIcon } from "./v2/drawer-m.svg"; +export { ReactComponent as DropdownCompIcon } from "./v2/dropdown-m.svg"; +export { ReactComponent as FileViewerCompIcon } from "./v2/file-viewer-m.svg"; +export { ReactComponent as FloatingButtonCompIcon } from "./v2/floating-button-m.svg"; +export { ReactComponent as FloatingTextCompIcon } from "./v2/floating-text-layout-m.svg"; +export { ReactComponent as FormCompIcon } from "./v2/form-m.svg"; +export { ReactComponent as GridCompIcon } from "./v2/grid-view-m.svg"; +export { ReactComponent as IconCompIcon } from "./v2/icon-m.svg"; +export { ReactComponent as IFrameCompIcon } from "./v2/iframe-m.svg"; +export { ReactComponent as ImageEditorCompIcon } from "./v2/image-editor-m.svg"; +export { ReactComponent as ImageCompIcon } from "./v2/image-m.svg"; +export { ReactComponent as InputCompIcon } from "./v2/input-m.svg"; +export { ReactComponent as JsonEditorCompIcon } from "./v2/json-editor-m.svg"; +export { ReactComponent as JsonExplorerCompIcon } from "./v2/json-viewer-m.svg"; +export { ReactComponent as JsonFormCompIcon } from "./v2/json-schema-form-m.svg"; +export { ReactComponent as PageLayoutCompIcon } from "./v2/page-layout-m.svg"; +export { ReactComponent as LinkCompIcon } from "./v2/link-m.svg"; +export { ReactComponent as ListViewCompIcon } from "./v2/list-view-m.svg"; +export { ReactComponent as LottieAnimationCompIcon } from "./v2/lottie-animation-m.svg"; +export { ReactComponent as MentionCompIcon } from "./v2/mention-m.svg"; +export { ReactComponent as MermaidCompIcon } from "./v2/mermaid-chart-m.svg"; +export { ReactComponent as ModalCompIcon } from "./v2/modal-m.svg"; +export { ReactComponent as MultiSelectCompIcon } from "./v2/multiselect-m.svg"; +export { ReactComponent as NavComIcon } from "./v2/navigation-m.svg"; +export { ReactComponent as NumberInputCompIcon } from "./v2/number-input-m.svg"; +export { ReactComponent as PasswordCompIcon } from "./v2/password-m.svg"; +export { ReactComponent as ProcessCircleCompIcon } from "./v2/progress-circle-m.svg"; +export { ReactComponent as ProgressCompIcon } from "./v2/progress-m.svg"; +export { ReactComponent as QRCodeCompIcon } from "./v2/qr-code-display-m.svg"; +export { ReactComponent as RadioCompIcon } from "./v2/radio-button-m.svg"; +export { ReactComponent as RangeSliderCompIcon } from "./v2/range-slider-m.svg"; +export { ReactComponent as RatingCompIcon } from "./v2/rating-m.svg"; +export { ReactComponent as ResponsiveLayoutCompIcon } from "./v2/resposive-layout-m.svg"; +export { ReactComponent as RichTextEditorCompIcon } from "./v2/rich-text-editor-m.svg"; +export { ReactComponent as ScannerCompIcon } from "./v2/scanner-m.svg"; +export { ReactComponent as ShapesCompIcon } from "./v2/shapes-m.svg"; +export { ReactComponent as SegmentedCompIcon } from "./v2/segmented-control-m.svg"; +export { ReactComponent as SelectCompIcon } from "./v2/select-m.svg"; +export { ReactComponent as SliderCompIcon } from "./v2/slider-m.svg"; // export { ReactComponent as StepsTextIcon } from "./icon-steps-comp.svg"; // to check -export {ReactComponent as SwitchCompIcon} from './v2/switch-m.svg'; -export {ReactComponent as TabbedContainerCompIcon} from './v2/tabbed-container-m.svg'; -export {ReactComponent as TableCompIcon} from './v2/mighty-table-m.svg'; -export {ReactComponent as TextAreaCompIcon} from './v2/text-area-input-m.svg'; -export {ReactComponent as TextCompIcon} from './v2/text-display-m.svg'; -export {ReactComponent as TimeCompIcon} from './v2/time-select-m.svg'; -export {ReactComponent as TimerCompIcon} from './v2/timer-m.svg'; -export {ReactComponent as TimeLineCompIcon} from './v2/timeline-m.svg'; -export {ReactComponent as TimeRangeCompIcon} from './v2/time-range-select-m.svg'; -export {ReactComponent as ToggleButtonCompIcon} from './v2/toggle-button-m.svg'; -export {ReactComponent as TourCompIcon} from './v2/modal-m.svg'; -export {ReactComponent as TransferCompIcon} from './v2/transfer-list-m.svg'; -export {ReactComponent as TreeDisplayCompIcon} from './v2/tree-display-m.svg'; -export {ReactComponent as TreeSelectCompIcon} from './v2/tree-select-m.svg'; -export {ReactComponent as UploadCompIcon} from './v2/file-upload-m.svg'; -export {ReactComponent as VideoCompIcon} from './v2/video-player-m.svg'; -export {ReactComponent as VideoMeetingRoomCompIcon} from './v2/meeting-room-m.svg'; -export {ReactComponent as VideoCameraStreamCompIcon} from './v2/camera-stream-m.svg'; -export {ReactComponent as VideoScreenshareCompIcon} from './v2/screen-share-stream-m.svg'; -export {ReactComponent as StepCompIcon} from './v2/steps-m.svg'; -export {ReactComponent as SignatureCompIcon} from './v2/signature-m.svg'; +export { ReactComponent as SwitchCompIcon } from "./v2/switch-m.svg"; +export { ReactComponent as TabbedContainerCompIcon } from "./v2/tabbed-container-m.svg"; +export { ReactComponent as TableCompIcon } from "./v2/mighty-table-m.svg"; +export { ReactComponent as TextAreaCompIcon } from "./v2/text-area-input-m.svg"; +export { ReactComponent as TextCompIcon } from "./v2/text-display-m.svg"; +export { ReactComponent as TimeCompIcon } from "./v2/time-select-m.svg"; +export { ReactComponent as TimerCompIcon } from "./v2/timer-m.svg"; +export { ReactComponent as TimeLineCompIcon } from "./v2/timeline-m.svg"; +export { ReactComponent as TimeRangeCompIcon } from "./v2/time-range-select-m.svg"; +export { ReactComponent as ToggleButtonCompIcon } from "./v2/toggle-button-m.svg"; +export { ReactComponent as TourCompIcon } from "./v2/modal-m.svg"; +export { ReactComponent as TransferCompIcon } from "./v2/transfer-list-m.svg"; +export { ReactComponent as TreeDisplayCompIcon } from "./v2/tree-display-m.svg"; +export { ReactComponent as TreeSelectCompIcon } from "./v2/tree-select-m.svg"; +export { ReactComponent as UploadCompIcon } from "./v2/file-upload-m.svg"; +export { ReactComponent as VideoCompIcon } from "./v2/video-player-m.svg"; +export { ReactComponent as VideoMeetingRoomCompIcon } from "./v2/meeting-room-m.svg"; +export { ReactComponent as VideoCameraStreamCompIcon } from "./v2/camera-stream-m.svg"; +export { ReactComponent as VideoScreenshareCompIcon } from "./v2/screen-share-stream-m.svg"; +export { ReactComponent as StepCompIcon } from "./v2/steps-m.svg"; +export { ReactComponent as SignatureCompIcon } from "./v2/signature-m.svg"; -export {ReactComponent as CandlestickChartCompIcon} from './v2/candlestick-chart-m.svg'; -export {ReactComponent as FunnelChartCompIcon} from './v2/funnel-chart-m.svg'; -export {ReactComponent as GaugeChartCompIcon} from './v2/gauge-chart-m.svg'; -export {ReactComponent as GraphChartCompIcon} from './v2/graph-chart-m.svg'; -export {ReactComponent as HeatmapChartCompIcon} from './v2/heatmap-chart-m.svg'; -export {ReactComponent as RadarChartCompIcon} from './v2/radar-chart-m.svg'; -export {ReactComponent as SankeyChartCompIcon} from './v2/sankey-chart-m.svg'; -export {ReactComponent as SunburstChartCompIcon} from './v2/sunburst-chart-m.svg'; -export {ReactComponent as ThemeriverChartCompIcon} from './v2/themeriver-chart-m.svg'; -export {ReactComponent as TreeChartCompIcon} from './v2/tree-chart-m.svg'; -export {ReactComponent as TreemapChartCompIcon} from './v2/treemap-chart-m.svg'; +export { ReactComponent as CandlestickChartCompIcon } from "./v2/candlestick-chart-m.svg"; +export { ReactComponent as FunnelChartCompIcon } from "./v2/funnel-chart-m.svg"; +export { ReactComponent as GaugeChartCompIcon } from "./v2/gauge-chart-m.svg"; +export { ReactComponent as GraphChartCompIcon } from "./v2/graph-chart-m.svg"; +export { ReactComponent as HeatmapChartCompIcon } from "./v2/heatmap-chart-m.svg"; +export { ReactComponent as RadarChartCompIcon } from "./v2/radar-chart-m.svg"; +export { ReactComponent as SankeyChartCompIcon } from "./v2/sankey-chart-m.svg"; +export { ReactComponent as SunburstChartCompIcon } from "./v2/sunburst-chart-m.svg"; +export { ReactComponent as ThemeriverChartCompIcon } from "./v2/themeriver-chart-m.svg"; +export { ReactComponent as TreeChartCompIcon } from "./v2/tree-chart-m.svg"; +export { ReactComponent as TreemapChartCompIcon } from "./v2/treemap-chart-m.svg"; -export {ReactComponent as BPMNEditorCompIcon} from './v2/bpmn-editor-m.svg'; -export {ReactComponent as GeoMapChartsCompIcon} from './v2/geomap-charts-m.svg'; -export {ReactComponent as GeoMapLayersCompIcon} from './v2/geomap-layers-m.svg'; -export {ReactComponent as HillchartCompIcon} from './v2/hillchart-m.svg'; -export {ReactComponent as TurnstileCaptchaCompIcon} from './v2/turnstile-captcha-m.svg'; -export {ReactComponent as PivotTableCompIcon} from './v2/pivot-table-m.svg'; +export { ReactComponent as BPMNEditorCompIcon } from "./v2/bpmn-editor-m.svg"; +export { ReactComponent as GeoMapChartsCompIcon } from "./v2/geomap-charts-m.svg"; +export { ReactComponent as GeoMapLayersCompIcon } from "./v2/geomap-layers-m.svg"; +export { ReactComponent as HillchartCompIcon } from "./v2/hillchart-m.svg"; +export { ReactComponent as TurnstileCaptchaCompIcon } from "./v2/turnstile-captcha-m.svg"; +export { ReactComponent as PivotTableCompIcon } from "./v2/pivot-table-m.svg"; // flags -export {ReactComponent as Flag_af} from './flags/4x3/af.svg'; -export {ReactComponent as Flag_ax} from './flags/4x3/ax.svg'; -export {ReactComponent as Flag_al} from './flags/4x3/al.svg'; -export {ReactComponent as Flag_dz} from './flags/4x3/dz.svg'; -export {ReactComponent as Flag_as} from './flags/4x3/as.svg'; -export {ReactComponent as Flag_ad} from './flags/4x3/ad.svg'; -export {ReactComponent as Flag_ao} from './flags/4x3/ao.svg'; -export {ReactComponent as Flag_ai} from './flags/4x3/ai.svg'; -export {ReactComponent as Flag_aq} from './flags/4x3/aq.svg'; -export {ReactComponent as Flag_ag} from './flags/4x3/ag.svg'; -export {ReactComponent as Flag_ar} from './flags/4x3/ar.svg'; -export {ReactComponent as Flag_am} from './flags/4x3/am.svg'; -export {ReactComponent as Flag_aw} from './flags/4x3/aw.svg'; -export {ReactComponent as Flag_sh_ac} from './flags/4x3/sh-ac.svg'; -export {ReactComponent as Flag_au} from './flags/4x3/au.svg'; -export {ReactComponent as Flag_at} from './flags/4x3/at.svg'; -export {ReactComponent as Flag_az} from './flags/4x3/az.svg'; -export {ReactComponent as Flag_bs} from './flags/4x3/bs.svg'; -export {ReactComponent as Flag_bh} from './flags/4x3/bh.svg'; -export {ReactComponent as Flag_bd} from './flags/4x3/bd.svg'; -export {ReactComponent as Flag_bb} from './flags/4x3/bb.svg'; -export {ReactComponent as Flag_by} from './flags/4x3/by.svg'; -export {ReactComponent as Flag_be} from './flags/4x3/be.svg'; -export {ReactComponent as Flag_bz} from './flags/4x3/bz.svg'; -export {ReactComponent as Flag_bj} from './flags/4x3/bj.svg'; -export {ReactComponent as Flag_bm} from './flags/4x3/bm.svg'; -export {ReactComponent as Flag_bt} from './flags/4x3/bt.svg'; -export {ReactComponent as Flag_bo} from './flags/4x3/bo.svg'; -export {ReactComponent as Flag_bq} from './flags/4x3/bq.svg'; -export {ReactComponent as Flag_ba} from './flags/4x3/ba.svg'; -export {ReactComponent as Flag_bw} from './flags/4x3/bw.svg'; -export {ReactComponent as Flag_bv} from './flags/4x3/bv.svg'; -export {ReactComponent as Flag_br} from './flags/4x3/br.svg'; -export {ReactComponent as Flag_io} from './flags/4x3/io.svg'; -export {ReactComponent as Flag_bn} from './flags/4x3/bn.svg'; -export {ReactComponent as Flag_bg} from './flags/4x3/bg.svg'; -export {ReactComponent as Flag_bf} from './flags/4x3/bf.svg'; -export {ReactComponent as Flag_bi} from './flags/4x3/bi.svg'; -export {ReactComponent as Flag_cv} from './flags/4x3/cv.svg'; -export {ReactComponent as Flag_kh} from './flags/4x3/kh.svg'; -export {ReactComponent as Flag_cm} from './flags/4x3/cm.svg'; -export {ReactComponent as Flag_ca} from './flags/4x3/ca.svg'; -export {ReactComponent as Flag_ic} from './flags/4x3/ic.svg'; -export {ReactComponent as Flag_es_ct} from './flags/4x3/es-ct.svg'; -export {ReactComponent as Flag_ky} from './flags/4x3/ky.svg'; -export {ReactComponent as Flag_cf} from './flags/4x3/cf.svg'; -export {ReactComponent as Flag_td} from './flags/4x3/td.svg'; -export {ReactComponent as Flag_cl} from './flags/4x3/cl.svg'; -export {ReactComponent as Flag_cn} from './flags/4x3/cn.svg'; -export {ReactComponent as Flag_cx} from './flags/4x3/cx.svg'; -export {ReactComponent as Flag_cc} from './flags/4x3/cc.svg'; -export {ReactComponent as Flag_co} from './flags/4x3/co.svg'; -export {ReactComponent as Flag_km} from './flags/4x3/km.svg'; -export {ReactComponent as Flag_ck} from './flags/4x3/ck.svg'; -export {ReactComponent as Flag_cr} from './flags/4x3/cr.svg'; -export {ReactComponent as Flag_hr} from './flags/4x3/hr.svg'; -export {ReactComponent as Flag_cu} from './flags/4x3/cu.svg'; -export {ReactComponent as Flag_cw} from './flags/4x3/cw.svg'; -export {ReactComponent as Flag_cy} from './flags/4x3/cy.svg'; -export {ReactComponent as Flag_cz} from './flags/4x3/cz.svg'; -export {ReactComponent as Flag_ci} from './flags/4x3/ci.svg'; -export {ReactComponent as Flag_cd} from './flags/4x3/cd.svg'; -export {ReactComponent as Flag_dk} from './flags/4x3/dk.svg'; -export {ReactComponent as Flag_dj} from './flags/4x3/dj.svg'; -export {ReactComponent as Flag_dm} from './flags/4x3/dm.svg'; -export {ReactComponent as Flag_do} from './flags/4x3/do.svg'; -export {ReactComponent as Flag_ec} from './flags/4x3/ec.svg'; -export {ReactComponent as Flag_eg} from './flags/4x3/eg.svg'; -export {ReactComponent as Flag_sv} from './flags/4x3/sv.svg'; -export {ReactComponent as Flag_gq} from './flags/4x3/gq.svg'; -export {ReactComponent as Flag_er} from './flags/4x3/er.svg'; -export {ReactComponent as Flag_ee} from './flags/4x3/ee.svg'; -export {ReactComponent as Flag_sz} from './flags/4x3/sz.svg'; -export {ReactComponent as Flag_et} from './flags/4x3/et.svg'; -export {ReactComponent as Flag_eu} from './flags/4x3/eu.svg'; -export {ReactComponent as Flag_fk} from './flags/4x3/fk.svg'; -export {ReactComponent as Flag_fo} from './flags/4x3/fo.svg'; -export {ReactComponent as Flag_fm} from './flags/4x3/fm.svg'; -export {ReactComponent as Flag_fj} from './flags/4x3/fj.svg'; -export {ReactComponent as Flag_fi} from './flags/4x3/fi.svg'; -export {ReactComponent as Flag_fr} from './flags/4x3/fr.svg'; -export {ReactComponent as Flag_gf} from './flags/4x3/gf.svg'; -export {ReactComponent as Flag_pf} from './flags/4x3/pf.svg'; -export {ReactComponent as Flag_tf} from './flags/4x3/tf.svg'; -export {ReactComponent as Flag_ga} from './flags/4x3/ga.svg'; -export {ReactComponent as Flag_gm} from './flags/4x3/gm.svg'; -export {ReactComponent as Flag_ge} from './flags/4x3/ge.svg'; -export {ReactComponent as Flag_de} from './flags/4x3/de.svg'; -export {ReactComponent as Flag_gh} from './flags/4x3/gh.svg'; -export {ReactComponent as Flag_gi} from './flags/4x3/gi.svg'; -export {ReactComponent as Flag_gr} from './flags/4x3/gr.svg'; -export {ReactComponent as Flag_gl} from './flags/4x3/gl.svg'; -export {ReactComponent as Flag_gd} from './flags/4x3/gd.svg'; -export {ReactComponent as Flag_gp} from './flags/4x3/gp.svg'; -export {ReactComponent as Flag_gu} from './flags/4x3/gu.svg'; -export {ReactComponent as Flag_gt} from './flags/4x3/gt.svg'; -export {ReactComponent as Flag_gg} from './flags/4x3/gg.svg'; -export {ReactComponent as Flag_gn} from './flags/4x3/gn.svg'; -export {ReactComponent as Flag_gw} from './flags/4x3/gw.svg'; -export {ReactComponent as Flag_gy} from './flags/4x3/gy.svg'; -export {ReactComponent as Flag_ht} from './flags/4x3/ht.svg'; -export {ReactComponent as Flag_hm} from './flags/4x3/hm.svg'; -export {ReactComponent as Flag_va} from './flags/4x3/va.svg'; -export {ReactComponent as Flag_hn} from './flags/4x3/hn.svg'; -export {ReactComponent as Flag_hk} from './flags/4x3/hk.svg'; -export {ReactComponent as Flag_hu} from './flags/4x3/hu.svg'; -export {ReactComponent as Flag_is} from './flags/4x3/is.svg'; -export {ReactComponent as Flag_in} from './flags/4x3/in.svg'; -export {ReactComponent as Flag_id} from './flags/4x3/id.svg'; -export {ReactComponent as Flag_ir} from './flags/4x3/ir.svg'; -export {ReactComponent as Flag_iq} from './flags/4x3/iq.svg'; -export {ReactComponent as Flag_ie} from './flags/4x3/ie.svg'; -export {ReactComponent as Flag_im} from './flags/4x3/im.svg'; -export {ReactComponent as Flag_il} from './flags/4x3/il.svg'; -export {ReactComponent as Flag_it} from './flags/4x3/it.svg'; -export {ReactComponent as Flag_jm} from './flags/4x3/jm.svg'; -export {ReactComponent as Flag_jp} from './flags/4x3/jp.svg'; -export {ReactComponent as Flag_je} from './flags/4x3/je.svg'; -export {ReactComponent as Flag_jo} from './flags/4x3/jo.svg'; -export {ReactComponent as Flag_kz} from './flags/4x3/kz.svg'; -export {ReactComponent as Flag_ke} from './flags/4x3/ke.svg'; -export {ReactComponent as Flag_ki} from './flags/4x3/ki.svg'; -export {ReactComponent as Flag_xk} from './flags/4x3/xk.svg'; -export {ReactComponent as Flag_kw} from './flags/4x3/kw.svg'; -export {ReactComponent as Flag_kg} from './flags/4x3/kg.svg'; -export {ReactComponent as Flag_la} from './flags/4x3/la.svg'; -export {ReactComponent as Flag_lv} from './flags/4x3/lv.svg'; -export {ReactComponent as Flag_lb} from './flags/4x3/lb.svg'; -export {ReactComponent as Flag_ls} from './flags/4x3/ls.svg'; -export {ReactComponent as Flag_lr} from './flags/4x3/lr.svg'; -export {ReactComponent as Flag_ly} from './flags/4x3/ly.svg'; -export {ReactComponent as Flag_li} from './flags/4x3/li.svg'; -export {ReactComponent as Flag_lt} from './flags/4x3/lt.svg'; -export {ReactComponent as Flag_lu} from './flags/4x3/lu.svg'; -export {ReactComponent as Flag_mo} from './flags/4x3/mo.svg'; -export {ReactComponent as Flag_mg} from './flags/4x3/mg.svg'; -export {ReactComponent as Flag_mw} from './flags/4x3/mw.svg'; -export {ReactComponent as Flag_my} from './flags/4x3/my.svg'; -export {ReactComponent as Flag_mv} from './flags/4x3/mv.svg'; -export {ReactComponent as Flag_ml} from './flags/4x3/ml.svg'; -export {ReactComponent as Flag_mt} from './flags/4x3/mt.svg'; -export {ReactComponent as Flag_mh} from './flags/4x3/mh.svg'; -export {ReactComponent as Flag_mq} from './flags/4x3/mq.svg'; -export {ReactComponent as Flag_mr} from './flags/4x3/mr.svg'; -export {ReactComponent as Flag_mu} from './flags/4x3/mu.svg'; -export {ReactComponent as Flag_yt} from './flags/4x3/yt.svg'; -export {ReactComponent as Flag_mx} from './flags/4x3/mx.svg'; -export {ReactComponent as Flag_md} from './flags/4x3/md.svg'; -export {ReactComponent as Flag_mc} from './flags/4x3/mc.svg'; -export {ReactComponent as Flag_mn} from './flags/4x3/mn.svg'; -export {ReactComponent as Flag_me} from './flags/4x3/me.svg'; -export {ReactComponent as Flag_ms} from './flags/4x3/ms.svg'; -export {ReactComponent as Flag_ma} from './flags/4x3/ma.svg'; -export {ReactComponent as Flag_mz} from './flags/4x3/mz.svg'; -export {ReactComponent as Flag_mm} from './flags/4x3/mm.svg'; -export {ReactComponent as Flag_na} from './flags/4x3/na.svg'; -export {ReactComponent as Flag_nr} from './flags/4x3/nr.svg'; -export {ReactComponent as Flag_np} from './flags/4x3/np.svg'; -export {ReactComponent as Flag_nl} from './flags/4x3/nl.svg'; -export {ReactComponent as Flag_nc} from './flags/4x3/nc.svg'; -export {ReactComponent as Flag_nz} from './flags/4x3/nz.svg'; -export {ReactComponent as Flag_ni} from './flags/4x3/ni.svg'; -export {ReactComponent as Flag_ne} from './flags/4x3/ne.svg'; -export {ReactComponent as Flag_ng} from './flags/4x3/ng.svg'; -export {ReactComponent as Flag_nu} from './flags/4x3/nu.svg'; -export {ReactComponent as Flag_nf} from './flags/4x3/nf.svg'; -export {ReactComponent as Flag_kp} from './flags/4x3/kp.svg'; -export {ReactComponent as Flag_mk} from './flags/4x3/mk.svg'; -export {ReactComponent as Flag_gb_nir} from './flags/4x3/gb-nir.svg'; -export {ReactComponent as Flag_mp} from './flags/4x3/mp.svg'; -export {ReactComponent as Flag_no} from './flags/4x3/no.svg'; -export {ReactComponent as Flag_om} from './flags/4x3/om.svg'; -export {ReactComponent as Flag_pk} from './flags/4x3/pk.svg'; -export {ReactComponent as Flag_pw} from './flags/4x3/pw.svg'; -export {ReactComponent as Flag_pa} from './flags/4x3/pa.svg'; -export {ReactComponent as Flag_pg} from './flags/4x3/pg.svg'; -export {ReactComponent as Flag_py} from './flags/4x3/py.svg'; -export {ReactComponent as Flag_pe} from './flags/4x3/pe.svg'; -export {ReactComponent as Flag_ph} from './flags/4x3/ph.svg'; -export {ReactComponent as Flag_pn} from './flags/4x3/pn.svg'; -export {ReactComponent as Flag_pl} from './flags/4x3/pl.svg'; -export {ReactComponent as Flag_pt} from './flags/4x3/pt.svg'; -export {ReactComponent as Flag_pr} from './flags/4x3/pr.svg'; -export {ReactComponent as Flag_qa} from './flags/4x3/qa.svg'; -export {ReactComponent as Flag_cg} from './flags/4x3/cg.svg'; -export {ReactComponent as Flag_ro} from './flags/4x3/ro.svg'; -export {ReactComponent as Flag_ru} from './flags/4x3/ru.svg'; -export {ReactComponent as Flag_rw} from './flags/4x3/rw.svg'; -export {ReactComponent as Flag_re} from './flags/4x3/re.svg'; -export {ReactComponent as Flag_bl} from './flags/4x3/bl.svg'; -export {ReactComponent as Flag_sh_hl} from './flags/4x3/sh-hl.svg'; -export {ReactComponent as Flag_sh} from './flags/4x3/sh.svg'; -export {ReactComponent as Flag_kn} from './flags/4x3/kn.svg'; -export {ReactComponent as Flag_lc} from './flags/4x3/lc.svg'; -export {ReactComponent as Flag_mf} from './flags/4x3/mf.svg'; -export {ReactComponent as Flag_pm} from './flags/4x3/pm.svg'; -export {ReactComponent as Flag_vc} from './flags/4x3/vc.svg'; -export {ReactComponent as Flag_ws} from './flags/4x3/ws.svg'; -export {ReactComponent as Flag_sm} from './flags/4x3/sm.svg'; -export {ReactComponent as Flag_st} from './flags/4x3/st.svg'; -export {ReactComponent as Flag_sa} from './flags/4x3/sa.svg'; -export {ReactComponent as Flag_gb_sct} from './flags/4x3/gb-sct.svg'; -export {ReactComponent as Flag_sn} from './flags/4x3/sn.svg'; -export {ReactComponent as Flag_rs} from './flags/4x3/rs.svg'; -export {ReactComponent as Flag_sc} from './flags/4x3/sc.svg'; -export {ReactComponent as Flag_sl} from './flags/4x3/sl.svg'; -export {ReactComponent as Flag_sg} from './flags/4x3/sg.svg'; -export {ReactComponent as Flag_sx} from './flags/4x3/sx.svg'; -export {ReactComponent as Flag_sk} from './flags/4x3/sk.svg'; -export {ReactComponent as Flag_si} from './flags/4x3/si.svg'; -export {ReactComponent as Flag_sb} from './flags/4x3/sb.svg'; -export {ReactComponent as Flag_so} from './flags/4x3/so.svg'; -export {ReactComponent as Flag_za} from './flags/4x3/za.svg'; -export {ReactComponent as Flag_gs} from './flags/4x3/gs.svg'; -export {ReactComponent as Flag_kr} from './flags/4x3/kr.svg'; -export {ReactComponent as Flag_ss} from './flags/4x3/ss.svg'; -export {ReactComponent as Flag_es} from './flags/4x3/es.svg'; -export {ReactComponent as Flag_lk} from './flags/4x3/lk.svg'; -export {ReactComponent as Flag_ps} from './flags/4x3/ps.svg'; -export {ReactComponent as Flag_sd} from './flags/4x3/sd.svg'; -export {ReactComponent as Flag_sr} from './flags/4x3/sr.svg'; -export {ReactComponent as Flag_sj} from './flags/4x3/sj.svg'; -export {ReactComponent as Flag_se} from './flags/4x3/se.svg'; -export {ReactComponent as Flag_ch} from './flags/4x3/ch.svg'; -export {ReactComponent as Flag_sy} from './flags/4x3/sy.svg'; -export {ReactComponent as Flag_tw} from './flags/4x3/tw.svg'; -export {ReactComponent as Flag_tj} from './flags/4x3/tj.svg'; -export {ReactComponent as Flag_tz} from './flags/4x3/tz.svg'; -export {ReactComponent as Flag_th} from './flags/4x3/th.svg'; -export {ReactComponent as Flag_tl} from './flags/4x3/tl.svg'; -export {ReactComponent as Flag_tg} from './flags/4x3/tg.svg'; -export {ReactComponent as Flag_tk} from './flags/4x3/tk.svg'; -export {ReactComponent as Flag_to} from './flags/4x3/to.svg'; -export {ReactComponent as Flag_tt} from './flags/4x3/tt.svg'; -export {ReactComponent as Flag_sh_ta} from './flags/4x3/sh-ta.svg'; -export {ReactComponent as Flag_tn} from './flags/4x3/tn.svg'; -export {ReactComponent as Flag_tm} from './flags/4x3/tm.svg'; -export {ReactComponent as Flag_tc} from './flags/4x3/tc.svg'; -export {ReactComponent as Flag_tv} from './flags/4x3/tv.svg'; -export {ReactComponent as Flag_tr} from './flags/4x3/tr.svg'; -export {ReactComponent as Flag_ug} from './flags/4x3/ug.svg'; -export {ReactComponent as Flag_ua} from './flags/4x3/ua.svg'; -export {ReactComponent as Flag_ae} from './flags/4x3/ae.svg'; -export {ReactComponent as Flag_gb} from './flags/4x3/gb.svg'; -export {ReactComponent as Flag_un} from './flags/4x3/un.svg'; -export {ReactComponent as Flag_um} from './flags/4x3/um.svg'; -export {ReactComponent as Flag_us} from './flags/4x3/us.svg'; -export {ReactComponent as Flag_uy} from './flags/4x3/uy.svg'; -export {ReactComponent as Flag_uz} from './flags/4x3/uz.svg'; -export {ReactComponent as Flag_vu} from './flags/4x3/vu.svg'; -export {ReactComponent as Flag_ve} from './flags/4x3/ve.svg'; -export {ReactComponent as Flag_vn} from './flags/4x3/vn.svg'; -export {ReactComponent as Flag_vg} from './flags/4x3/vg.svg'; -export {ReactComponent as Flag_vi} from './flags/4x3/vi.svg'; -export {ReactComponent as Flag_gb_wls} from './flags/4x3/gb-wls.svg'; -export {ReactComponent as Flag_wf} from './flags/4x3/wf.svg'; -export {ReactComponent as Flag_eh} from './flags/4x3/eh.svg'; -export {ReactComponent as Flag_ye} from './flags/4x3/ye.svg'; -export {ReactComponent as Flag_zm} from './flags/4x3/zm.svg'; -export {ReactComponent as Flag_zw} from './flags/4x3/zw.svg'; +export { ReactComponent as Flag_af } from './flags/4x3/af.svg'; +export { ReactComponent as Flag_ax } from './flags/4x3/ax.svg'; +export { ReactComponent as Flag_al } from './flags/4x3/al.svg'; +export { ReactComponent as Flag_dz } from './flags/4x3/dz.svg'; +export { ReactComponent as Flag_as } from './flags/4x3/as.svg'; +export { ReactComponent as Flag_ad } from './flags/4x3/ad.svg'; +export { ReactComponent as Flag_ao } from './flags/4x3/ao.svg'; +export { ReactComponent as Flag_ai } from './flags/4x3/ai.svg'; +export { ReactComponent as Flag_aq } from './flags/4x3/aq.svg'; +export { ReactComponent as Flag_ag } from './flags/4x3/ag.svg'; +export { ReactComponent as Flag_ar } from './flags/4x3/ar.svg'; +export { ReactComponent as Flag_am } from './flags/4x3/am.svg'; +export { ReactComponent as Flag_aw } from './flags/4x3/aw.svg'; +export { ReactComponent as Flag_sh_ac } from './flags/4x3/sh-ac.svg'; +export { ReactComponent as Flag_au } from './flags/4x3/au.svg'; +export { ReactComponent as Flag_at } from './flags/4x3/at.svg'; +export { ReactComponent as Flag_az } from './flags/4x3/az.svg'; +export { ReactComponent as Flag_bs } from './flags/4x3/bs.svg'; +export { ReactComponent as Flag_bh } from './flags/4x3/bh.svg'; +export { ReactComponent as Flag_bd } from './flags/4x3/bd.svg'; +export { ReactComponent as Flag_bb } from './flags/4x3/bb.svg'; +export { ReactComponent as Flag_by } from './flags/4x3/by.svg'; +export { ReactComponent as Flag_be } from './flags/4x3/be.svg'; +export { ReactComponent as Flag_bz } from './flags/4x3/bz.svg'; +export { ReactComponent as Flag_bj } from './flags/4x3/bj.svg'; +export { ReactComponent as Flag_bm } from './flags/4x3/bm.svg'; +export { ReactComponent as Flag_bt } from './flags/4x3/bt.svg'; +export { ReactComponent as Flag_bo } from './flags/4x3/bo.svg'; +export { ReactComponent as Flag_bq } from './flags/4x3/bq.svg'; +export { ReactComponent as Flag_ba } from './flags/4x3/ba.svg'; +export { ReactComponent as Flag_bw } from './flags/4x3/bw.svg'; +export { ReactComponent as Flag_bv } from './flags/4x3/bv.svg'; +export { ReactComponent as Flag_br } from './flags/4x3/br.svg'; +export { ReactComponent as Flag_io } from './flags/4x3/io.svg'; +export { ReactComponent as Flag_bn } from './flags/4x3/bn.svg'; +export { ReactComponent as Flag_bg } from './flags/4x3/bg.svg'; +export { ReactComponent as Flag_bf } from './flags/4x3/bf.svg'; +export { ReactComponent as Flag_bi } from './flags/4x3/bi.svg'; +export { ReactComponent as Flag_cv } from './flags/4x3/cv.svg'; +export { ReactComponent as Flag_kh } from './flags/4x3/kh.svg'; +export { ReactComponent as Flag_cm } from './flags/4x3/cm.svg'; +export { ReactComponent as Flag_ca } from './flags/4x3/ca.svg'; +export { ReactComponent as Flag_ic } from './flags/4x3/ic.svg'; +export { ReactComponent as Flag_es_ct } from './flags/4x3/es-ct.svg'; +export { ReactComponent as Flag_ky } from './flags/4x3/ky.svg'; +export { ReactComponent as Flag_cf } from './flags/4x3/cf.svg'; +export { ReactComponent as Flag_td } from './flags/4x3/td.svg'; +export { ReactComponent as Flag_cl } from './flags/4x3/cl.svg'; +export { ReactComponent as Flag_cn } from './flags/4x3/cn.svg'; +export { ReactComponent as Flag_cx } from './flags/4x3/cx.svg'; +export { ReactComponent as Flag_cc } from './flags/4x3/cc.svg'; +export { ReactComponent as Flag_co } from './flags/4x3/co.svg'; +export { ReactComponent as Flag_km } from './flags/4x3/km.svg'; +export { ReactComponent as Flag_ck } from './flags/4x3/ck.svg'; +export { ReactComponent as Flag_cr } from './flags/4x3/cr.svg'; +export { ReactComponent as Flag_hr } from './flags/4x3/hr.svg'; +export { ReactComponent as Flag_cu } from './flags/4x3/cu.svg'; +export { ReactComponent as Flag_cw } from './flags/4x3/cw.svg'; +export { ReactComponent as Flag_cy } from './flags/4x3/cy.svg'; +export { ReactComponent as Flag_cz } from './flags/4x3/cz.svg'; +export { ReactComponent as Flag_ci } from './flags/4x3/ci.svg'; +export { ReactComponent as Flag_cd } from './flags/4x3/cd.svg'; +export { ReactComponent as Flag_dk } from './flags/4x3/dk.svg'; +export { ReactComponent as Flag_dj } from './flags/4x3/dj.svg'; +export { ReactComponent as Flag_dm } from './flags/4x3/dm.svg'; +export { ReactComponent as Flag_do } from './flags/4x3/do.svg'; +export { ReactComponent as Flag_ec } from './flags/4x3/ec.svg'; +export { ReactComponent as Flag_eg } from './flags/4x3/eg.svg'; +export { ReactComponent as Flag_sv } from './flags/4x3/sv.svg'; +export { ReactComponent as Flag_gq } from './flags/4x3/gq.svg'; +export { ReactComponent as Flag_er } from './flags/4x3/er.svg'; +export { ReactComponent as Flag_ee } from './flags/4x3/ee.svg'; +export { ReactComponent as Flag_sz } from './flags/4x3/sz.svg'; +export { ReactComponent as Flag_et } from './flags/4x3/et.svg'; +export { ReactComponent as Flag_eu } from './flags/4x3/eu.svg'; +export { ReactComponent as Flag_fk } from './flags/4x3/fk.svg'; +export { ReactComponent as Flag_fo } from './flags/4x3/fo.svg'; +export { ReactComponent as Flag_fm } from './flags/4x3/fm.svg'; +export { ReactComponent as Flag_fj } from './flags/4x3/fj.svg'; +export { ReactComponent as Flag_fi } from './flags/4x3/fi.svg'; +export { ReactComponent as Flag_fr } from './flags/4x3/fr.svg'; +export { ReactComponent as Flag_gf } from './flags/4x3/gf.svg'; +export { ReactComponent as Flag_pf } from './flags/4x3/pf.svg'; +export { ReactComponent as Flag_tf } from './flags/4x3/tf.svg'; +export { ReactComponent as Flag_ga } from './flags/4x3/ga.svg'; +export { ReactComponent as Flag_gm } from './flags/4x3/gm.svg'; +export { ReactComponent as Flag_ge } from './flags/4x3/ge.svg'; +export { ReactComponent as Flag_de } from './flags/4x3/de.svg'; +export { ReactComponent as Flag_gh } from './flags/4x3/gh.svg'; +export { ReactComponent as Flag_gi } from './flags/4x3/gi.svg'; +export { ReactComponent as Flag_gr } from './flags/4x3/gr.svg'; +export { ReactComponent as Flag_gl } from './flags/4x3/gl.svg'; +export { ReactComponent as Flag_gd } from './flags/4x3/gd.svg'; +export { ReactComponent as Flag_gp } from './flags/4x3/gp.svg'; +export { ReactComponent as Flag_gu } from './flags/4x3/gu.svg'; +export { ReactComponent as Flag_gt } from './flags/4x3/gt.svg'; +export { ReactComponent as Flag_gg } from './flags/4x3/gg.svg'; +export { ReactComponent as Flag_gn } from './flags/4x3/gn.svg'; +export { ReactComponent as Flag_gw } from './flags/4x3/gw.svg'; +export { ReactComponent as Flag_gy } from './flags/4x3/gy.svg'; +export { ReactComponent as Flag_ht } from './flags/4x3/ht.svg'; +export { ReactComponent as Flag_hm } from './flags/4x3/hm.svg'; +export { ReactComponent as Flag_va } from './flags/4x3/va.svg'; +export { ReactComponent as Flag_hn } from './flags/4x3/hn.svg'; +export { ReactComponent as Flag_hk } from './flags/4x3/hk.svg'; +export { ReactComponent as Flag_hu } from './flags/4x3/hu.svg'; +export { ReactComponent as Flag_is } from './flags/4x3/is.svg'; +export { ReactComponent as Flag_in } from './flags/4x3/in.svg'; +export { ReactComponent as Flag_id } from './flags/4x3/id.svg'; +export { ReactComponent as Flag_ir } from './flags/4x3/ir.svg'; +export { ReactComponent as Flag_iq } from './flags/4x3/iq.svg'; +export { ReactComponent as Flag_ie } from './flags/4x3/ie.svg'; +export { ReactComponent as Flag_im } from './flags/4x3/im.svg'; +export { ReactComponent as Flag_il } from './flags/4x3/il.svg'; +export { ReactComponent as Flag_it } from './flags/4x3/it.svg'; +export { ReactComponent as Flag_jm } from './flags/4x3/jm.svg'; +export { ReactComponent as Flag_jp } from './flags/4x3/jp.svg'; +export { ReactComponent as Flag_je } from './flags/4x3/je.svg'; +export { ReactComponent as Flag_jo } from './flags/4x3/jo.svg'; +export { ReactComponent as Flag_kz } from './flags/4x3/kz.svg'; +export { ReactComponent as Flag_ke } from './flags/4x3/ke.svg'; +export { ReactComponent as Flag_ki } from './flags/4x3/ki.svg'; +export { ReactComponent as Flag_xk } from './flags/4x3/xk.svg'; +export { ReactComponent as Flag_kw } from './flags/4x3/kw.svg'; +export { ReactComponent as Flag_kg } from './flags/4x3/kg.svg'; +export { ReactComponent as Flag_la } from './flags/4x3/la.svg'; +export { ReactComponent as Flag_lv } from './flags/4x3/lv.svg'; +export { ReactComponent as Flag_lb } from './flags/4x3/lb.svg'; +export { ReactComponent as Flag_ls } from './flags/4x3/ls.svg'; +export { ReactComponent as Flag_lr } from './flags/4x3/lr.svg'; +export { ReactComponent as Flag_ly } from './flags/4x3/ly.svg'; +export { ReactComponent as Flag_li } from './flags/4x3/li.svg'; +export { ReactComponent as Flag_lt } from './flags/4x3/lt.svg'; +export { ReactComponent as Flag_lu } from './flags/4x3/lu.svg'; +export { ReactComponent as Flag_mo } from './flags/4x3/mo.svg'; +export { ReactComponent as Flag_mg } from './flags/4x3/mg.svg'; +export { ReactComponent as Flag_mw } from './flags/4x3/mw.svg'; +export { ReactComponent as Flag_my } from './flags/4x3/my.svg'; +export { ReactComponent as Flag_mv } from './flags/4x3/mv.svg'; +export { ReactComponent as Flag_ml } from './flags/4x3/ml.svg'; +export { ReactComponent as Flag_mt } from './flags/4x3/mt.svg'; +export { ReactComponent as Flag_mh } from './flags/4x3/mh.svg'; +export { ReactComponent as Flag_mq } from './flags/4x3/mq.svg'; +export { ReactComponent as Flag_mr } from './flags/4x3/mr.svg'; +export { ReactComponent as Flag_mu } from './flags/4x3/mu.svg'; +export { ReactComponent as Flag_yt } from './flags/4x3/yt.svg'; +export { ReactComponent as Flag_mx } from './flags/4x3/mx.svg'; +export { ReactComponent as Flag_md } from './flags/4x3/md.svg'; +export { ReactComponent as Flag_mc } from './flags/4x3/mc.svg'; +export { ReactComponent as Flag_mn } from './flags/4x3/mn.svg'; +export { ReactComponent as Flag_me } from './flags/4x3/me.svg'; +export { ReactComponent as Flag_ms } from './flags/4x3/ms.svg'; +export { ReactComponent as Flag_ma } from './flags/4x3/ma.svg'; +export { ReactComponent as Flag_mz } from './flags/4x3/mz.svg'; +export { ReactComponent as Flag_mm } from './flags/4x3/mm.svg'; +export { ReactComponent as Flag_na } from './flags/4x3/na.svg'; +export { ReactComponent as Flag_nr } from './flags/4x3/nr.svg'; +export { ReactComponent as Flag_np } from './flags/4x3/np.svg'; +export { ReactComponent as Flag_nl } from './flags/4x3/nl.svg'; +export { ReactComponent as Flag_nc } from './flags/4x3/nc.svg'; +export { ReactComponent as Flag_nz } from './flags/4x3/nz.svg'; +export { ReactComponent as Flag_ni } from './flags/4x3/ni.svg'; +export { ReactComponent as Flag_ne } from './flags/4x3/ne.svg'; +export { ReactComponent as Flag_ng } from './flags/4x3/ng.svg'; +export { ReactComponent as Flag_nu } from './flags/4x3/nu.svg'; +export { ReactComponent as Flag_nf } from './flags/4x3/nf.svg'; +export { ReactComponent as Flag_kp } from './flags/4x3/kp.svg'; +export { ReactComponent as Flag_mk } from './flags/4x3/mk.svg'; +export { ReactComponent as Flag_gb_nir } from './flags/4x3/gb-nir.svg'; +export { ReactComponent as Flag_mp } from './flags/4x3/mp.svg'; +export { ReactComponent as Flag_no } from './flags/4x3/no.svg'; +export { ReactComponent as Flag_om } from './flags/4x3/om.svg'; +export { ReactComponent as Flag_pk } from './flags/4x3/pk.svg'; +export { ReactComponent as Flag_pw } from './flags/4x3/pw.svg'; +export { ReactComponent as Flag_pa } from './flags/4x3/pa.svg'; +export { ReactComponent as Flag_pg } from './flags/4x3/pg.svg'; +export { ReactComponent as Flag_py } from './flags/4x3/py.svg'; +export { ReactComponent as Flag_pe } from './flags/4x3/pe.svg'; +export { ReactComponent as Flag_ph } from './flags/4x3/ph.svg'; +export { ReactComponent as Flag_pn } from './flags/4x3/pn.svg'; +export { ReactComponent as Flag_pl } from './flags/4x3/pl.svg'; +export { ReactComponent as Flag_pt } from './flags/4x3/pt.svg'; +export { ReactComponent as Flag_pr } from './flags/4x3/pr.svg'; +export { ReactComponent as Flag_qa } from './flags/4x3/qa.svg'; +export { ReactComponent as Flag_cg } from './flags/4x3/cg.svg'; +export { ReactComponent as Flag_ro } from './flags/4x3/ro.svg'; +export { ReactComponent as Flag_ru } from './flags/4x3/ru.svg'; +export { ReactComponent as Flag_rw } from './flags/4x3/rw.svg'; +export { ReactComponent as Flag_re } from './flags/4x3/re.svg'; +export { ReactComponent as Flag_bl } from './flags/4x3/bl.svg'; +export { ReactComponent as Flag_sh_hl } from './flags/4x3/sh-hl.svg'; +export { ReactComponent as Flag_sh } from './flags/4x3/sh.svg'; +export { ReactComponent as Flag_kn } from './flags/4x3/kn.svg'; +export { ReactComponent as Flag_lc } from './flags/4x3/lc.svg'; +export { ReactComponent as Flag_mf } from './flags/4x3/mf.svg'; +export { ReactComponent as Flag_pm } from './flags/4x3/pm.svg'; +export { ReactComponent as Flag_vc } from './flags/4x3/vc.svg'; +export { ReactComponent as Flag_ws } from './flags/4x3/ws.svg'; +export { ReactComponent as Flag_sm } from './flags/4x3/sm.svg'; +export { ReactComponent as Flag_st } from './flags/4x3/st.svg'; +export { ReactComponent as Flag_sa } from './flags/4x3/sa.svg'; +export { ReactComponent as Flag_gb_sct } from './flags/4x3/gb-sct.svg'; +export { ReactComponent as Flag_sn } from './flags/4x3/sn.svg'; +export { ReactComponent as Flag_rs } from './flags/4x3/rs.svg'; +export { ReactComponent as Flag_sc } from './flags/4x3/sc.svg'; +export { ReactComponent as Flag_sl } from './flags/4x3/sl.svg'; +export { ReactComponent as Flag_sg } from './flags/4x3/sg.svg'; +export { ReactComponent as Flag_sx } from './flags/4x3/sx.svg'; +export { ReactComponent as Flag_sk } from './flags/4x3/sk.svg'; +export { ReactComponent as Flag_si } from './flags/4x3/si.svg'; +export { ReactComponent as Flag_sb } from './flags/4x3/sb.svg'; +export { ReactComponent as Flag_so } from './flags/4x3/so.svg'; +export { ReactComponent as Flag_za } from './flags/4x3/za.svg'; +export { ReactComponent as Flag_gs } from './flags/4x3/gs.svg'; +export { ReactComponent as Flag_kr } from './flags/4x3/kr.svg'; +export { ReactComponent as Flag_ss } from './flags/4x3/ss.svg'; +export { ReactComponent as Flag_es } from './flags/4x3/es.svg'; +export { ReactComponent as Flag_lk } from './flags/4x3/lk.svg'; +export { ReactComponent as Flag_ps } from './flags/4x3/ps.svg'; +export { ReactComponent as Flag_sd } from './flags/4x3/sd.svg'; +export { ReactComponent as Flag_sr } from './flags/4x3/sr.svg'; +export { ReactComponent as Flag_sj } from './flags/4x3/sj.svg'; +export { ReactComponent as Flag_se } from './flags/4x3/se.svg'; +export { ReactComponent as Flag_ch } from './flags/4x3/ch.svg'; +export { ReactComponent as Flag_sy } from './flags/4x3/sy.svg'; +export { ReactComponent as Flag_tw } from './flags/4x3/tw.svg'; +export { ReactComponent as Flag_tj } from './flags/4x3/tj.svg'; +export { ReactComponent as Flag_tz } from './flags/4x3/tz.svg'; +export { ReactComponent as Flag_th } from './flags/4x3/th.svg'; +export { ReactComponent as Flag_tl } from './flags/4x3/tl.svg'; +export { ReactComponent as Flag_tg } from './flags/4x3/tg.svg'; +export { ReactComponent as Flag_tk } from './flags/4x3/tk.svg'; +export { ReactComponent as Flag_to } from './flags/4x3/to.svg'; +export { ReactComponent as Flag_tt } from './flags/4x3/tt.svg'; +export { ReactComponent as Flag_sh_ta } from './flags/4x3/sh-ta.svg'; +export { ReactComponent as Flag_tn } from './flags/4x3/tn.svg'; +export { ReactComponent as Flag_tm } from './flags/4x3/tm.svg'; +export { ReactComponent as Flag_tc } from './flags/4x3/tc.svg'; +export { ReactComponent as Flag_tv } from './flags/4x3/tv.svg'; +export { ReactComponent as Flag_tr } from './flags/4x3/tr.svg'; +export { ReactComponent as Flag_ug } from './flags/4x3/ug.svg'; +export { ReactComponent as Flag_ua } from './flags/4x3/ua.svg'; +export { ReactComponent as Flag_ae } from './flags/4x3/ae.svg'; +export { ReactComponent as Flag_gb } from './flags/4x3/gb.svg'; +export { ReactComponent as Flag_un } from './flags/4x3/un.svg'; +export { ReactComponent as Flag_um } from './flags/4x3/um.svg'; +export { ReactComponent as Flag_us } from './flags/4x3/us.svg'; +export { ReactComponent as Flag_uy } from './flags/4x3/uy.svg'; +export { ReactComponent as Flag_uz } from './flags/4x3/uz.svg'; +export { ReactComponent as Flag_vu } from './flags/4x3/vu.svg'; +export { ReactComponent as Flag_ve } from './flags/4x3/ve.svg'; +export { ReactComponent as Flag_vn } from './flags/4x3/vn.svg'; +export { ReactComponent as Flag_vg } from './flags/4x3/vg.svg'; +export { ReactComponent as Flag_vi } from './flags/4x3/vi.svg'; +export { ReactComponent as Flag_gb_wls } from './flags/4x3/gb-wls.svg'; +export { ReactComponent as Flag_wf } from './flags/4x3/wf.svg'; +export { ReactComponent as Flag_eh } from './flags/4x3/eh.svg'; +export { ReactComponent as Flag_ye } from './flags/4x3/ye.svg'; +export { ReactComponent as Flag_zm } from './flags/4x3/zm.svg'; +export { ReactComponent as Flag_zw } from './flags/4x3/zw.svg'; \ No newline at end of file diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index d5e78786d..135794440 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -1,7 +1,7 @@ -import Api from './api'; -import {AxiosPromise} from 'axios'; -import {ApiResponse, GenericApiResponse} from './apiResponses'; -import {trans} from 'i18n'; +import Api from "./api"; +import { AxiosPromise } from "axios"; +import { ApiResponse, GenericApiResponse } from "./apiResponses"; +import { trans } from "i18n"; export type FetchCommonSettingPayload = { orgId: string; @@ -59,45 +59,42 @@ export interface ThemeDetail { export function getThemeDetailName(key: keyof ThemeDetail) { switch (key) { - case 'primary': - return trans('themeDetail.primary'); - case 'textDark': - return trans('themeDetail.textDark'); - case 'textLight': - return trans('themeDetail.textLight'); - case 'canvas': - return trans('themeDetail.canvas'); - case 'primarySurface': - return trans('themeDetail.primarySurface'); - case 'borderRadius': - return trans('themeDetail.borderRadius'); - case 'margin': - return trans('style.margin'); - case 'animation': - return trans('style.animation'); - case 'padding': - return trans('style.padding'); + case "primary": + return trans("themeDetail.primary"); + case "textDark": + return trans("themeDetail.textDark"); + case "textLight": + return trans("themeDetail.textLight"); + case "canvas": + return trans("themeDetail.canvas"); + case "primarySurface": + return trans("themeDetail.primarySurface"); + case "borderRadius": + return trans("themeDetail.borderRadius"); + case "margin": + return trans("style.margin"); + case "padding": + return trans("style.padding"); //Added By Aqib Mirza - case 'gridColumns': - return trans('themeDetail.gridColumns'); - case 'textSize': - return trans('style.textSize'); + case "gridColumns": + return trans("themeDetail.gridColumns"); + case "textSize": + return trans("style.textSize"); } - return ''; + return ""; } export function isThemeColorKey(key: string) { switch (key as keyof ThemeDetail) { - case 'primary': - case 'textDark': - case 'textLight': - case 'canvas': - case 'primarySurface': - case 'margin': - case 'animation': - case 'padding': - case 'gridColumns': //Added By Aqib Mirza - case 'textSize': + case "primary": + case "textDark": + case "textLight": + case "canvas": + case "primarySurface": + case "margin": + case "padding": + case "gridColumns": //Added By Aqib Mirza + case "textSize": return true; } return false; @@ -108,8 +105,7 @@ export interface SetCommonSettingResponse extends ApiResponse { } class CommonSettingApi extends Api { - static commonSettingUrl = (orgId: string) => - `/organizations/${orgId}/common-settings`; + static commonSettingUrl = (orgId: string) => `/organizations/${orgId}/common-settings`; static fetchCommonSetting( request: FetchCommonSettingPayload @@ -120,7 +116,7 @@ class CommonSettingApi extends Api { static setCommonSetting( request: SetCommonSettingPayload ): AxiosPromise { - const {orgId, ...rest} = request; + const { orgId, ...rest } = request; return Api.put(CommonSettingApi.commonSettingUrl(request.orgId), rest.data); } } From 44427dfd607789bccdfe9fe69985a7668c53a069 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:37:00 +0500 Subject: [PATCH 028/155] formating removed-2 --- .../autoCompleteComp/autoCompleteComp.tsx | 96 ++++++++++--------- 1 file changed, 50 insertions(+), 46 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 9e5e3284a..14b3a92a9 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -1,7 +1,7 @@ -import React, {useEffect, useState} from 'react'; -import {Input, Section, sectionNames} from 'lowcoder-design'; -import {BoolControl} from 'comps/controls/boolControl'; -import {styleControl} from 'comps/controls/styleControl'; +import React, { useEffect, useState } from "react"; +import { Input, Section, sectionNames } from "lowcoder-design"; +import { BoolControl } from "comps/controls/boolControl"; +import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, InputFieldStyle, @@ -14,12 +14,12 @@ import { NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from 'comps/generators/withExposing'; -import styled, {css} from 'styled-components'; -import {UICompBuilder} from '../../generators'; -import {FormDataPropertyView} from '../formComp/formDataConstants'; -import {jsonControl} from 'comps/controls/codeControl'; -import {dropdownControl} from 'comps/controls/dropdownControl'; +} from "comps/generators/withExposing"; +import styled, { css } from "styled-components"; +import { UICompBuilder } from "../../generators"; +import { FormDataPropertyView } from "../formComp/formDataConstants"; +import { jsonControl } from "comps/controls/codeControl"; +import { dropdownControl } from "comps/controls/dropdownControl"; import { getStyle, TextInputBasicSection, @@ -28,21 +28,23 @@ import { TextInputInteractionSection, textInputValidate, TextInputValidationSection, -} from '../textInputComp/textInputConstants'; +} from "../textInputComp/textInputConstants"; import { allowClearPropertyView, hiddenPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {IconControl} from 'comps/controls/iconControl'; -import {hasIcon} from 'comps/utils'; -import {InputRef} from 'antd/es/input'; -import {default as ConfigProvider} from 'antd/es/config-provider'; -import {default as AutoComplete} from 'antd/es/auto-complete'; -import {RefControl} from 'comps/controls/refControl'; -import {booleanExposingStateControl} from 'comps/controls/codeStateControl'; +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { IconControl } from "comps/controls/iconControl"; +import { hasIcon } from "comps/utils"; +import { InputRef } from "antd/es/input"; +import { default as ConfigProvider } from "antd/es/config-provider"; +import { default as AutoComplete } from "antd/es/auto-complete"; +import { RefControl } from "comps/controls/refControl"; +import { + booleanExposingStateControl, +} from "comps/controls/codeStateControl"; -import {getDayJSLocale} from 'i18n/dayjsLocale'; +import { getDayJSLocale } from "i18n/dayjsLocale"; import { autoCompleteDate, itemsDataTooltip, @@ -52,23 +54,24 @@ import { autoCompleteType, autocompleteIconColor, componentSize, -} from './autoCompleteConstants'; +} from "./autoCompleteConstants"; + + const InputStyle = styled(Input)<{$style: InputLikeStyleType}>` - ${(props) => { - return css` - ${getStyle(props.$style)} - input { - padding: ${props.style?.padding}; - rotate: ${props?.$style?.rotation}; - } - .ant-select-single { - width: 100% !important; - } - `; - }} + ${(props) => css` + ${getStyle(props.$style)} + input { + padding: ${props.style?.padding}; + rotate: ${props?.$style?.rotation}; + } + .ant-select-single { + width: 100% !important; + } + `} `; + const childrenMap = { ...textInputChildren, viewRef: RefControl, @@ -91,13 +94,13 @@ const childrenMap = { animationStyle: styleControl(AnimationStyle), }; -const getValidate = (value: any): '' | 'warning' | 'error' | undefined => { +const getValidate = (value: any): "" | "warning" | "error" | undefined => { if ( - value.hasOwnProperty('validateStatus') && - value['validateStatus'] === 'error' + value.hasOwnProperty("validateStatus") && + value["validateStatus"] === "error" ) - return 'error'; - return ''; + return "error"; + return ""; }; let AutoCompleteCompBase = (function () { @@ -115,10 +118,11 @@ let AutoCompleteCompBase = (function () { autocompleteIconColor, componentSize, } = props; + const getTextInputValidate = () => { return { - value: {value: props.value.value}, + value: { value: props.value.value }, required: props.required, minLength: props?.minLength ?? 0, maxLength: props?.maxLength ?? 0, @@ -133,7 +137,7 @@ let AutoCompleteCompBase = (function () { const [validateState, setvalidateState] = useState({}); // 是否中文环境 - const [chineseEnv, setChineseEnv] = useState(getDayJSLocale() === 'zh-cn'); + const [chineseEnv, setChineseEnv] = useState(getDayJSLocale() === "zh-cn"); useEffect(() => { setsearchtext(props.value.value); @@ -355,8 +359,8 @@ let AutoCompleteCompBase = (function () { }) .setExposeMethodConfigs(autoCompleteRefMethods) .setExposeStateConfigs([ - new NameConfig('value', trans('export.inputValueDesc')), - new NameConfig('valueInItems', trans('autoComplete.valueInItems')), + new NameConfig("value", trans("export.inputValueDesc")), + new NameConfig("valueInItems", trans("autoComplete.valueInItems")), NameConfigPlaceHolder, NameConfigRequired, ...TextInputConfigs, @@ -371,9 +375,9 @@ AutoCompleteCompBase = class extends AutoCompleteCompBase { }; export const AutoCompleteComp = withExposingConfigs(AutoCompleteCompBase, [ - new NameConfig('value', trans('export.inputValueDesc')), - new NameConfig('valueInItems', trans('autoComplete.valueInItems')), + new NameConfig("value", trans("export.inputValueDesc")), + new NameConfig("valueInItems", trans("autoComplete.valueInItems")), NameConfigPlaceHolder, - NameConfigRequired, + NameConfigRequired, ...TextInputConfigs, ]); From 46ebe0f3362aa0dbb57eed4344eb8cfa7f787c83 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:38:08 +0500 Subject: [PATCH 029/155] formating removed-3 --- .../autoCompleteComp/autoCompleteComp.tsx | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 14b3a92a9..05e9d5fda 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -8,7 +8,7 @@ import { InputLikeStyle, InputLikeStyleType, LabelStyle, -} from 'comps/controls/styleControlConstants'; +} from "comps/controls/styleControlConstants"; import { NameConfig, NameConfigPlaceHolder, @@ -85,11 +85,11 @@ const childrenMap = { searchFirstPY: BoolControl.DEFAULT_TRUE, searchCompletePY: BoolControl, searchLabelOnly: BoolControl.DEFAULT_TRUE, - valueOrLabel: dropdownControl(valueOrLabelOption, 'label'), - autoCompleteType: dropdownControl(autoCompleteType, 'normal'), - autocompleteIconColor: dropdownControl(autocompleteIconColor, 'blue'), - componentSize: dropdownControl(componentSize, 'small'), - valueInItems: booleanExposingStateControl('valueInItems'), + valueOrLabel: dropdownControl(valueOrLabelOption, "label"), + autoCompleteType: dropdownControl(autoCompleteType, "normal"), + autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), + componentSize: dropdownControl(componentSize, "small"), + valueInItems: booleanExposingStateControl("valueInItems"), inputFieldStyle: styleControl(InputLikeStyle), animationStyle: styleControl(AnimationStyle), }; @@ -165,7 +165,7 @@ let AutoCompleteCompBase = (function () { borderRadius: parseInt(props.inputFieldStyle.radius), colorText: props.inputFieldStyle.text, colorPrimary: props.inputFieldStyle.accent, - controlHeight: componentSize === 'small' ? 30 : 38, + controlHeight: componentSize === "small" ? 30 : 38, }, }} > @@ -173,24 +173,24 @@ let AutoCompleteCompBase = (function () { disabled={props.disabled} value={searchtext} options={items} - style={{width: '100%'}} + style={{width: "100%"}} onChange={(value: string, option) => { props.valueInItems.onChange(false); setvalidateState(textInputValidate(getTextInputValidate())); setsearchtext(value); props.value.onChange(value); - props.onEvent('change'); + props.onEvent("change"); }} onFocus={() => { setActivationFlag(true); - props.onEvent('focus'); + props.onEvent("focus"); }} - onBlur={() => props.onEvent('blur')} + onBlur={() => props.onEvent("blur")} onSelect={(data: string, option) => { setsearchtext(option[valueOrLabel]); props.valueInItems.onChange(true); props.value.onChange(option[valueOrLabel]); - props.onEvent('submit'); + props.onEvent("submit"); }} filterOption={(inputValue: string, option) => { if (ignoreCase) { @@ -210,7 +210,7 @@ let AutoCompleteCompBase = (function () { searchFirstPY && option?.label && option.label - .spell('first') + .spell("first") .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 @@ -248,7 +248,7 @@ let AutoCompleteCompBase = (function () { searchFirstPY && option?.value && option.value - .spell('first') + .spell("first") .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 @@ -294,38 +294,38 @@ let AutoCompleteCompBase = (function () { return ( <>
- {children.autoCompleteType.getView() === 'normal' && + {children.autoCompleteType.getView() === "normal" && children.prefixIcon.propertyView({ - label: trans('button.prefixIcon'), + label: trans("button.prefixIcon"), })} - {children.autoCompleteType.getView() === 'normal' && + {children.autoCompleteType.getView() === "normal" && children.suffixIcon.propertyView({ - label: trans('button.suffixIcon'), + label: trans("button.suffixIcon"), })} {allowClearPropertyView(children)}
-
+
{children.items.propertyView({ - label: trans('autoComplete.value'), + label: trans("autoComplete.value"), tooltip: itemsDataTooltip, - placeholder: '[]', + placeholder: "[]", })} - {getDayJSLocale() === 'zh-cn' && + {getDayJSLocale() === "zh-cn" && children.searchFirstPY.propertyView({ - label: trans('autoComplete.searchFirstPY'), + label: trans("autoComplete.searchFirstPY"), })} - {getDayJSLocale() === 'zh-cn' && + {getDayJSLocale() === "zh-cn" && children.searchCompletePY.propertyView({ - label: trans('autoComplete.searchCompletePY'), + label: trans("autoComplete.searchCompletePY"), })} {children.searchLabelOnly.propertyView({ - label: trans('autoComplete.searchLabelOnly'), + label: trans("autoComplete.searchLabelOnly"), })} {children.ignoreCase.propertyView({ - label: trans('autoComplete.ignoreCase'), + label: trans("autoComplete.ignoreCase"), })} {children.valueOrLabel.propertyView({ - label: trans('autoComplete.checkedValueFrom'), + label: trans("autoComplete.checkedValueFrom"), radioButton: true, })}
From 682866491ca0e627ce7e19d6ddd1161ce44ea9ea Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:41:41 +0500 Subject: [PATCH 030/155] formating removed-4 --- .../autoCompleteComp/autoCompleteComp.tsx | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 05e9d5fda..a6a2f4537 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -85,11 +85,11 @@ const childrenMap = { searchFirstPY: BoolControl.DEFAULT_TRUE, searchCompletePY: BoolControl, searchLabelOnly: BoolControl.DEFAULT_TRUE, - valueOrLabel: dropdownControl(valueOrLabelOption, "label"), - autoCompleteType: dropdownControl(autoCompleteType, "normal"), - autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), - componentSize: dropdownControl(componentSize, "small"), - valueInItems: booleanExposingStateControl("valueInItems"), + valueOrLabel: dropdownControl(valueOrLabelOption, 'label'), + autoCompleteType: dropdownControl(autoCompleteType, 'normal'), + autocompleteIconColor: dropdownControl(autocompleteIconColor, 'blue'), + componentSize: dropdownControl(componentSize, 'small'), + valueInItems: booleanExposingStateControl('valueInItems'), inputFieldStyle: styleControl(InputLikeStyle), animationStyle: styleControl(AnimationStyle), }; @@ -165,7 +165,7 @@ let AutoCompleteCompBase = (function () { borderRadius: parseInt(props.inputFieldStyle.radius), colorText: props.inputFieldStyle.text, colorPrimary: props.inputFieldStyle.accent, - controlHeight: componentSize === "small" ? 30 : 38, + controlHeight: componentSize === 'small' ? 30 : 38, }, }} > @@ -173,24 +173,24 @@ let AutoCompleteCompBase = (function () { disabled={props.disabled} value={searchtext} options={items} - style={{width: "100%"}} + style={{width: '100%'}} onChange={(value: string, option) => { props.valueInItems.onChange(false); setvalidateState(textInputValidate(getTextInputValidate())); setsearchtext(value); props.value.onChange(value); - props.onEvent("change"); + props.onEvent('change'); }} onFocus={() => { setActivationFlag(true); - props.onEvent("focus"); + props.onEvent('focus'); }} - onBlur={() => props.onEvent("blur")} + onBlur={() => props.onEvent('blur')} onSelect={(data: string, option) => { setsearchtext(option[valueOrLabel]); props.valueInItems.onChange(true); props.value.onChange(option[valueOrLabel]); - props.onEvent("submit"); + props.onEvent('submit'); }} filterOption={(inputValue: string, option) => { if (ignoreCase) { @@ -210,7 +210,7 @@ let AutoCompleteCompBase = (function () { searchFirstPY && option?.label && option.label - .spell("first") + .spell('first') .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 @@ -248,7 +248,7 @@ let AutoCompleteCompBase = (function () { searchFirstPY && option?.value && option.value - .spell("first") + .spell('first') .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 @@ -294,38 +294,38 @@ let AutoCompleteCompBase = (function () { return ( <>
- {children.autoCompleteType.getView() === "normal" && + {children.autoCompleteType.getView() === 'normal' && children.prefixIcon.propertyView({ - label: trans("button.prefixIcon"), + label: trans('button.prefixIcon'), })} - {children.autoCompleteType.getView() === "normal" && + {children.autoCompleteType.getView() === 'normal' && children.suffixIcon.propertyView({ - label: trans("button.suffixIcon"), + label: trans('button.suffixIcon'), })} {allowClearPropertyView(children)}
-
+
{children.items.propertyView({ - label: trans("autoComplete.value"), + label: trans('autoComplete.value'), tooltip: itemsDataTooltip, - placeholder: "[]", + placeholder: '[]', })} - {getDayJSLocale() === "zh-cn" && + {getDayJSLocale() === 'zh-cn' && children.searchFirstPY.propertyView({ - label: trans("autoComplete.searchFirstPY"), + label: trans('autoComplete.searchFirstPY'), })} - {getDayJSLocale() === "zh-cn" && + {getDayJSLocale() === 'zh-cn' && children.searchCompletePY.propertyView({ - label: trans("autoComplete.searchCompletePY"), + label: trans('autoComplete.searchCompletePY'), })} {children.searchLabelOnly.propertyView({ - label: trans("autoComplete.searchLabelOnly"), + label: trans('autoComplete.searchLabelOnly'), })} {children.ignoreCase.propertyView({ - label: trans("autoComplete.ignoreCase"), + label: trans('autoComplete.ignoreCase'), })} {children.valueOrLabel.propertyView({ - label: trans("autoComplete.checkedValueFrom"), + label: trans('autoComplete.checkedValueFrom'), radioButton: true, })}
From 5bff79fc82470ad6488decc6da40725c91ad2304 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:42:25 +0500 Subject: [PATCH 031/155] formating removed-5 --- .../autoCompleteComp/autoCompleteComp.tsx | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index a6a2f4537..05e9d5fda 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -85,11 +85,11 @@ const childrenMap = { searchFirstPY: BoolControl.DEFAULT_TRUE, searchCompletePY: BoolControl, searchLabelOnly: BoolControl.DEFAULT_TRUE, - valueOrLabel: dropdownControl(valueOrLabelOption, 'label'), - autoCompleteType: dropdownControl(autoCompleteType, 'normal'), - autocompleteIconColor: dropdownControl(autocompleteIconColor, 'blue'), - componentSize: dropdownControl(componentSize, 'small'), - valueInItems: booleanExposingStateControl('valueInItems'), + valueOrLabel: dropdownControl(valueOrLabelOption, "label"), + autoCompleteType: dropdownControl(autoCompleteType, "normal"), + autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), + componentSize: dropdownControl(componentSize, "small"), + valueInItems: booleanExposingStateControl("valueInItems"), inputFieldStyle: styleControl(InputLikeStyle), animationStyle: styleControl(AnimationStyle), }; @@ -165,7 +165,7 @@ let AutoCompleteCompBase = (function () { borderRadius: parseInt(props.inputFieldStyle.radius), colorText: props.inputFieldStyle.text, colorPrimary: props.inputFieldStyle.accent, - controlHeight: componentSize === 'small' ? 30 : 38, + controlHeight: componentSize === "small" ? 30 : 38, }, }} > @@ -173,24 +173,24 @@ let AutoCompleteCompBase = (function () { disabled={props.disabled} value={searchtext} options={items} - style={{width: '100%'}} + style={{width: "100%"}} onChange={(value: string, option) => { props.valueInItems.onChange(false); setvalidateState(textInputValidate(getTextInputValidate())); setsearchtext(value); props.value.onChange(value); - props.onEvent('change'); + props.onEvent("change"); }} onFocus={() => { setActivationFlag(true); - props.onEvent('focus'); + props.onEvent("focus"); }} - onBlur={() => props.onEvent('blur')} + onBlur={() => props.onEvent("blur")} onSelect={(data: string, option) => { setsearchtext(option[valueOrLabel]); props.valueInItems.onChange(true); props.value.onChange(option[valueOrLabel]); - props.onEvent('submit'); + props.onEvent("submit"); }} filterOption={(inputValue: string, option) => { if (ignoreCase) { @@ -210,7 +210,7 @@ let AutoCompleteCompBase = (function () { searchFirstPY && option?.label && option.label - .spell('first') + .spell("first") .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 @@ -248,7 +248,7 @@ let AutoCompleteCompBase = (function () { searchFirstPY && option?.value && option.value - .spell('first') + .spell("first") .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 @@ -294,38 +294,38 @@ let AutoCompleteCompBase = (function () { return ( <>
- {children.autoCompleteType.getView() === 'normal' && + {children.autoCompleteType.getView() === "normal" && children.prefixIcon.propertyView({ - label: trans('button.prefixIcon'), + label: trans("button.prefixIcon"), })} - {children.autoCompleteType.getView() === 'normal' && + {children.autoCompleteType.getView() === "normal" && children.suffixIcon.propertyView({ - label: trans('button.suffixIcon'), + label: trans("button.suffixIcon"), })} {allowClearPropertyView(children)}
-
+
{children.items.propertyView({ - label: trans('autoComplete.value'), + label: trans("autoComplete.value"), tooltip: itemsDataTooltip, - placeholder: '[]', + placeholder: "[]", })} - {getDayJSLocale() === 'zh-cn' && + {getDayJSLocale() === "zh-cn" && children.searchFirstPY.propertyView({ - label: trans('autoComplete.searchFirstPY'), + label: trans("autoComplete.searchFirstPY"), })} - {getDayJSLocale() === 'zh-cn' && + {getDayJSLocale() === "zh-cn" && children.searchCompletePY.propertyView({ - label: trans('autoComplete.searchCompletePY'), + label: trans("autoComplete.searchCompletePY"), })} {children.searchLabelOnly.propertyView({ - label: trans('autoComplete.searchLabelOnly'), + label: trans("autoComplete.searchLabelOnly"), })} {children.ignoreCase.propertyView({ - label: trans('autoComplete.ignoreCase'), + label: trans("autoComplete.ignoreCase"), })} {children.valueOrLabel.propertyView({ - label: trans('autoComplete.checkedValueFrom'), + label: trans("autoComplete.checkedValueFrom"), radioButton: true, })}
From 32761e879d7a383868819a87fc5c8d85bb8f26d6 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:43:56 +0500 Subject: [PATCH 032/155] formating removed-6 --- .../src/comps/comps/autoCompleteComp/autoCompleteComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 05e9d5fda..988e3782d 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -58,7 +58,7 @@ import { -const InputStyle = styled(Input)<{$style: InputLikeStyleType}>` +const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>` ${(props) => css` ${getStyle(props.$style)} input { @@ -77,7 +77,7 @@ const childrenMap = { viewRef: RefControl, allowClear: BoolControl.DEFAULT_TRUE, style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle), + labelStyle:styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, items: jsonControl(convertAutoCompleteData, autoCompleteDate), From ef62a5868c703f38876dba854d0a1a9aa89af9d8 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:46:21 +0500 Subject: [PATCH 033/155] formating removed-7 --- .../autoCompleteComp/autoCompleteComp.tsx | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 988e3782d..ac00ecdb0 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -169,21 +169,21 @@ let AutoCompleteCompBase = (function () { }, }} > - { props.valueInItems.onChange(false); setvalidateState(textInputValidate(getTextInputValidate())); setsearchtext(value); - props.value.onChange(value); - props.onEvent("change"); - }} + props.value.onChange(value); + props.onEvent("change") + }} onFocus={() => { - setActivationFlag(true); - props.onEvent("focus"); + setActivationFlag(true) + props.onEvent("focus") }} onBlur={() => props.onEvent("blur")} onSelect={(data: string, option) => { @@ -269,23 +269,23 @@ let AutoCompleteCompBase = (function () { return false; }} > - + ), style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, + inputFieldStyle:props.inputFieldStyle, animationStyle: props.animationStyle, ...validateState, }); From 7fbe58f5ea6503c62f6422e3f26265ae2cc5426e Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:48:24 +0500 Subject: [PATCH 034/155] formating removed-8 --- .../autoCompleteComp/autoCompleteComp.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index ac00ecdb0..d639d2fc7 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -183,7 +183,7 @@ let AutoCompleteCompBase = (function () { }} onFocus={() => { setActivationFlag(true) - props.onEvent("focus") + props.onEvent("focus") }} onBlur={() => props.onEvent("blur")} onSelect={(data: string, option) => { @@ -269,16 +269,16 @@ let AutoCompleteCompBase = (function () { return false; }} > - + @@ -302,7 +302,7 @@ let AutoCompleteCompBase = (function () { children.suffixIcon.propertyView({ label: trans("button.suffixIcon"), })} - {allowClearPropertyView(children)} + {allowClearPropertyView(children)}
{children.items.propertyView({ From 956e1ff9e0b1b768e4d7fc469dd397963c746391 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:51:35 +0500 Subject: [PATCH 035/155] formating removed-9 --- .../src/comps/comps/buttonComp/linkComp.tsx | 103 +++++++----------- 1 file changed, 39 insertions(+), 64 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index cb19cbfb5..1d02cd188 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -1,39 +1,27 @@ -import {default as Button} from 'antd/es/button'; -import { - ButtonCompWrapper, - buttonRefMethods, -} from 'comps/comps/buttonComp/buttonCompConstants'; -import {BoolCodeControl, StringControl} from 'comps/controls/codeControl'; -import {ButtonEventHandlerControl} from 'comps/controls/eventHandlerControl'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - AnimationStyleType, - LinkStyle, - LinkStyleType, -} from 'comps/controls/styleControlConstants'; -import {withDefault} from 'comps/generators'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; -import {UICompBuilder} from 'comps/generators/uiCompBuilder'; -import {Section, sectionNames} from 'lowcoder-design'; -import styled from 'styled-components'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; +import { default as Button } from "antd/es/button"; +import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants"; +import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; +import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, AnimationStyleType, LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants"; +import { withDefault } from "comps/generators"; +import { migrateOldData } from "comps/generators/simpleGenerators"; +import { UICompBuilder } from "comps/generators/uiCompBuilder"; +import { Section, sectionNames } from "lowcoder-design"; +import styled from "styled-components"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { hiddenPropertyView, disabledPropertyView, loadingPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {IconControl} from 'comps/controls/iconControl'; -import {hasIcon} from 'comps/utils'; -import {RefControl} from 'comps/controls/refControl'; +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { IconControl } from "comps/controls/iconControl"; +import { hasIcon } from "comps/utils"; +import { RefControl } from "comps/controls/refControl"; -import {EditorContext} from 'comps/editorState'; -import React, {useContext} from 'react'; +import { EditorContext } from "comps/editorState"; +import React, { useContext } from "react"; const Link = styled(Button)<{ $style: LinkStyleType; @@ -82,7 +70,7 @@ const IconWrapper = styled.span` * compatible with old data 2022-08-26 */ function fixOldData(oldData: any) { - if (oldData && oldData.hasOwnProperty('color')) { + if (oldData && oldData.hasOwnProperty("color")) { return { text: oldData.color, }; @@ -92,20 +80,19 @@ function fixOldData(oldData: any) { const LinkTmpComp = (function () { const childrenMap = { - text: withDefault(StringControl, trans('link.link')), + text: withDefault(StringControl, trans("link.link")), onEvent: ButtonEventHandlerControl, disabled: BoolCodeControl, loading: BoolCodeControl, style: migrateOldData(styleControl(LinkStyle), fixOldData), - animationStyle: styleControl(AnimationStyle), + animationStyle:styleControl(AnimationStyle), prefixIcon: IconControl, suffixIcon: IconControl, viewRef: RefControl, }; return new UICompBuilder(childrenMap, (props) => { // chrome86 bug: button children should not contain only empty span - const hasChildren = - hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon); + const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon); return (
- {children.text.propertyView({label: trans('text')})} + {children.text.propertyView({ label: trans("text") })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( - <> -
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} - {loadingPropertyView(children)} -
+ {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} + {loadingPropertyView(children)} +
- {children.prefixIcon.propertyView({ - label: trans('button.prefixIcon'), - })} - {children.suffixIcon.propertyView({ - label: trans('button.suffixIcon'), - })} -
- + {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} + {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} +
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> -
- {children.style.getPropertyView()} -
-
- {children.animationStyle.getPropertyView()} -
+
{children.style.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
)} @@ -178,7 +153,7 @@ const LinkTmpComp = (function () { })(); export const LinkComp = withExposingConfigs(LinkTmpComp, [ - new NameConfig('text', trans('link.textDesc')), - new NameConfig('loading', trans('link.loadingDesc')), + new NameConfig("text", trans("link.textDesc")), + new NameConfig("loading", trans("link.loadingDesc")), ...CommonNameConfig, ]); From 707c149bfb916a0c9ffaa4a16bd7dce3f4a9eca7 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:58:27 +0500 Subject: [PATCH 036/155] formating removed-10 --- .../src/comps/comps/buttonComp/linkComp.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index 1d02cd188..e74d16990 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -37,9 +37,9 @@ const Link = styled(Button)<{ font-family:${props.$style.fontFamily}; font-weight:${props.$style.textWeight}; border: ${props.$style.borderWidth} solid ${props.$style.border}; - border-radius:${props.$style.radius ? props.$style.radius : '0px'}; - text-transform:${props.$style.textTransform ? props.$style.textTransform : ''}; - text-decoration:${props.$style.textDecoration ? props.$style.textDecoration : ''} !important; + border-radius:${props.$style.radius ? props.$style.radius:"0px"}; + text-transform:${props.$style.textTransform ? props.$style.textTransform:""}; + text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:""} !important; background-color: ${props.$style.background}; &:hover { color: ${props.$style.hoverText} !important; @@ -49,7 +49,7 @@ const Link = styled(Button)<{ } `} - &.ant-btn { + &.ant-btn { display: inline-flex; align-items: center; > span { @@ -101,18 +101,14 @@ const LinkTmpComp = (function () { $style={props.style} loading={props.loading} disabled={props.disabled} - onClick={() => props.onEvent('click')} - type={'link'} + onClick={() => props.onEvent("click")} + type={"link"} > {hasChildren && ( - {hasIcon(props.prefixIcon) && ( - {props.prefixIcon} - )} + {hasIcon(props.prefixIcon) && {props.prefixIcon}} {!!props.text && props.text} - {hasIcon(props.suffixIcon) && ( - {props.suffixIcon} - )} + {hasIcon(props.suffixIcon) && {props.suffixIcon}} )} From fd696d302cf8ba52622087ffc626717f5581fa07 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 18:59:34 +0500 Subject: [PATCH 037/155] formating removed-11 --- .../lowcoder/src/comps/comps/buttonComp/linkComp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index e74d16990..f4e1d2933 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -37,9 +37,9 @@ const Link = styled(Button)<{ font-family:${props.$style.fontFamily}; font-weight:${props.$style.textWeight}; border: ${props.$style.borderWidth} solid ${props.$style.border}; - border-radius:${props.$style.radius ? props.$style.radius:"0px"}; - text-transform:${props.$style.textTransform ? props.$style.textTransform:""}; - text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:""} !important; + border-radius:${props.$style.radius ? props.$style.radius:'0px'}; + text-transform:${props.$style.textTransform ? props.$style.textTransform:''}; + text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important; background-color: ${props.$style.background}; &:hover { color: ${props.$style.hoverText} !important; From 8c092ddde9cba8907a33518f456bb50921218570 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:00:42 +0500 Subject: [PATCH 038/155] formating removed-12 --- .../comps/buttonComp/toggleButtonComp.tsx | 94 +++++++++---------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 12ef85661..bfd2ed662 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -1,48 +1,48 @@ -import {BoolCodeControl, StringControl} from 'comps/controls/codeControl'; -import {withDefault} from 'comps/generators'; -import {UICompBuilder} from 'comps/generators/uiCompBuilder'; +import {BoolCodeControl, StringControl} from "comps/controls/codeControl"; +import {withDefault} from "comps/generators"; +import {UICompBuilder} from "comps/generators/uiCompBuilder"; import { disabledPropertyView, hiddenPropertyView, loadingPropertyView, -} from 'comps/utils/propertyUtils'; -import {Section, sectionNames} from 'lowcoder-design'; -import {trans} from 'i18n'; -import styled from 'styled-components'; -import {ChangeEventHandlerControl} from '../../controls/eventHandlerControl'; +} from "comps/utils/propertyUtils"; +import {Section, sectionNames} from "lowcoder-design"; +import {trans} from "i18n"; +import styled from "styled-components"; +import {ChangeEventHandlerControl} from "../../controls/eventHandlerControl"; import { CommonNameConfig, NameConfig, withExposingConfigs, -} from '../../generators/withExposing'; +} from "../../generators/withExposing"; import { Button100, ButtonCompWrapper, buttonRefMethods, -} from './buttonCompConstants'; -import {IconControl} from 'comps/controls/iconControl'; +} from "./buttonCompConstants"; +import {IconControl} from "comps/controls/iconControl"; import { AlignWithStretchControl, LeftRightControl, -} from 'comps/controls/dropdownControl'; -import {booleanExposingStateControl} from 'comps/controls/codeStateControl'; +} from "comps/controls/dropdownControl"; +import {booleanExposingStateControl} from "comps/controls/codeStateControl"; import { AnimationStyle, AnimationStyleType, ToggleButtonStyle, -} from 'comps/controls/styleControlConstants'; -import {styleControl} from 'comps/controls/styleControl'; -import {BoolControl} from 'comps/controls/boolControl'; -import {RefControl} from 'comps/controls/refControl'; -import React, {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +} from "comps/controls/styleControlConstants"; +import {styleControl} from "comps/controls/styleControl"; +import {BoolControl} from "comps/controls/boolControl"; +import {RefControl} from "comps/controls/refControl"; +import React, {useContext} from "react"; +import {EditorContext} from "comps/editorState"; const IconWrapper = styled.div` display: flex; `; const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{ - $align: 'left' | 'center' | 'right' | 'stretch'; + $align: "left" | "center" | "right" | "stretch"; $showBorder: boolean; $animationStyle: AnimationStyleType; }>` @@ -52,26 +52,26 @@ const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{ justify-content: ${(props) => props.$align}; > button { - width: ${(props) => props.$align !== 'stretch' && 'auto'}; - border: ${(props) => !props.$showBorder && 'none'}; - box-shadow: ${(props) => !props.$showBorder && 'none'}; + width: ${(props) => props.$align !== "stretch" && "auto"}; + border: ${(props) => !props.$showBorder && "none"}; + box-shadow: ${(props) => !props.$showBorder && "none"}; } `; const ToggleTmpComp = (function () { const childrenMap = { - value: booleanExposingStateControl('value'), + value: booleanExposingStateControl("value"), showText: withDefault(BoolControl, true), - trueText: withDefault(StringControl, trans('toggleButton.trueDefaultText')), + trueText: withDefault(StringControl, trans("toggleButton.trueDefaultText")), falseText: withDefault( StringControl, - trans('toggleButton.falseDefaultText') + trans("toggleButton.falseDefaultText") ), onEvent: ChangeEventHandlerControl, disabled: BoolCodeControl, loading: BoolCodeControl, - trueIcon: withDefault(IconControl, '/icon:solid/AngleUp'), - falseIcon: withDefault(IconControl, '/icon:solid/AngleDown'), + trueIcon: withDefault(IconControl, "/icon:solid/AngleUp"), + falseIcon: withDefault(IconControl, "/icon:solid/AngleDown"), iconPosition: LeftRightControl, alignment: AlignWithStretchControl, style: styleControl(ToggleButtonStyle), @@ -96,17 +96,17 @@ const ToggleTmpComp = (function () { loading={props.loading} disabled={props.disabled} onClick={() => { - props.onEvent('change'); + props.onEvent("change"); props.value.onChange(!props.value.value); }} > - {props.iconPosition === 'right' && text} + {props.iconPosition === "right" && text} { {props.value.value ? props.trueIcon : props.falseIcon} } - {props.iconPosition === 'left' && text} + {props.iconPosition === "left" && text} ); @@ -115,13 +115,13 @@ const ToggleTmpComp = (function () { <>
{children.value.propertyView({ - label: trans('prop.defaultValue'), - tooltip: trans('toggleButton.valueDesc'), + label: trans("prop.defaultValue"), + tooltip: trans("toggleButton.valueDesc"), })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || + useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.onEvent.getPropertyView()} @@ -131,41 +131,41 @@ const ToggleTmpComp = (function () {
{children.showText.propertyView({ - label: trans('toggleButton.showText'), + label: trans("toggleButton.showText"), })} {children.showText.getView() && children.trueText.propertyView({ - label: trans('toggleButton.trueLabel'), + label: trans("toggleButton.trueLabel"), })} {children.showText.getView() && children.falseText.propertyView({ - label: trans('toggleButton.falseLabel'), + label: trans("toggleButton.falseLabel"), })} {children.trueIcon.propertyView({ - label: trans('toggleButton.trueIconLabel'), + label: trans("toggleButton.trueIconLabel"), })} {children.falseIcon.propertyView({ - label: trans('toggleButton.falseIconLabel'), + label: trans("toggleButton.falseIconLabel"), })} {children.showText.getView() && children.iconPosition.propertyView({ - label: trans('toggleButton.iconPosition'), + label: trans("toggleButton.iconPosition"), radioButton: true, })} {children.alignment.propertyView({ - label: trans('toggleButton.alignment'), + label: trans("toggleButton.alignment"), radioButton: true, })}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || + useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.showBorder.propertyView({ - label: trans('toggleButton.showBorder'), + label: trans("toggleButton.showBorder"), })} {children.style.getPropertyView()}
@@ -181,7 +181,7 @@ const ToggleTmpComp = (function () { })(); export const ToggleButtonComp = withExposingConfigs(ToggleTmpComp, [ - new NameConfig('value', trans('dropdown.textDesc')), - new NameConfig('loading', trans('button.loadingDesc')), + new NameConfig("value", trans("dropdown.textDesc")), + new NameConfig("loading", trans("button.loadingDesc")), ...CommonNameConfig, ]); From ff447547c1b81c7ede5ec27db618668ff4893b0d Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:03:23 +0500 Subject: [PATCH 039/155] formating removed-13 --- .../comps/buttonComp/toggleButtonComp.tsx | 41 +++++++------------ 1 file changed, 15 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index bfd2ed662..2afa93109 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -1,41 +1,30 @@ -import {BoolCodeControl, StringControl} from "comps/controls/codeControl"; -import {withDefault} from "comps/generators"; -import {UICompBuilder} from "comps/generators/uiCompBuilder"; +import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; +import { withDefault } from "comps/generators"; +import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { disabledPropertyView, hiddenPropertyView, loadingPropertyView, } from "comps/utils/propertyUtils"; -import {Section, sectionNames} from "lowcoder-design"; -import {trans} from "i18n"; +import { Section, sectionNames } from "lowcoder-design"; +import { trans } from "i18n"; import styled from "styled-components"; -import {ChangeEventHandlerControl} from "../../controls/eventHandlerControl"; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from "../../generators/withExposing"; -import { - Button100, - ButtonCompWrapper, - buttonRefMethods, -} from "./buttonCompConstants"; -import {IconControl} from "comps/controls/iconControl"; -import { - AlignWithStretchControl, - LeftRightControl, -} from "comps/controls/dropdownControl"; +import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompConstants"; +import { IconControl } from "comps/controls/iconControl"; +import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl"; import {booleanExposingStateControl} from "comps/controls/codeStateControl"; import { AnimationStyle, AnimationStyleType, ToggleButtonStyle, } from "comps/controls/styleControlConstants"; -import {styleControl} from "comps/controls/styleControl"; -import {BoolControl} from "comps/controls/boolControl"; -import {RefControl} from "comps/controls/refControl"; -import React, {useContext} from "react"; -import {EditorContext} from "comps/editorState"; +import { styleControl } from "comps/controls/styleControl"; +import { BoolControl } from "comps/controls/boolControl"; +import { RefControl } from "comps/controls/refControl"; +import React, { useContext } from "react"; +import { EditorContext } from "comps/editorState"; const IconWrapper = styled.div` display: flex; From 410df7affeeb24047deccaa2715432676e14044b Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:07:15 +0500 Subject: [PATCH 040/155] formating removed-14 --- .../comps/buttonComp/toggleButtonComp.tsx | 41 +++++-------------- 1 file changed, 11 insertions(+), 30 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 2afa93109..1d71a2369 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -52,10 +52,7 @@ const ToggleTmpComp = (function () { value: booleanExposingStateControl("value"), showText: withDefault(BoolControl, true), trueText: withDefault(StringControl, trans("toggleButton.trueDefaultText")), - falseText: withDefault( - StringControl, - trans("toggleButton.falseDefaultText") - ), + falseText: withDefault(StringControl, trans("toggleButton.falseDefaultText")), onEvent: ChangeEventHandlerControl, disabled: BoolCodeControl, loading: BoolCodeControl, @@ -90,11 +87,7 @@ const ToggleTmpComp = (function () { }} > {props.iconPosition === "right" && text} - { - - {props.value.value ? props.trueIcon : props.falseIcon} - - } + {{props.value.value ? props.trueIcon : props.falseIcon}} {props.iconPosition === "left" && text} @@ -109,33 +102,21 @@ const ToggleTmpComp = (function () { })}
- {(useContext(EditorContext).editorModeStatus === "logic" || - useContext(EditorContext).editorModeStatus === "both") && ( - <> -
+ {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} {loadingPropertyView(children)}
- {children.showText.propertyView({ - label: trans("toggleButton.showText"), - })} - {children.showText.getView() && - children.trueText.propertyView({ - label: trans("toggleButton.trueLabel"), - })} + {children.showText.propertyView({ label: trans("toggleButton.showText") })} + {children.showText.getView() && + children.trueText.propertyView({ label: trans("toggleButton.trueLabel") })} {children.showText.getView() && - children.falseText.propertyView({ - label: trans("toggleButton.falseLabel"), - })} - {children.trueIcon.propertyView({ - label: trans("toggleButton.trueIconLabel"), - })} - {children.falseIcon.propertyView({ - label: trans("toggleButton.falseIconLabel"), - })} + children.falseText.propertyView({ label: trans("toggleButton.falseLabel") })} + {children.trueIcon.propertyView({ label: trans("toggleButton.trueIconLabel") })} + {children.falseIcon.propertyView({ label: trans("toggleButton.falseIconLabel") })} {children.showText.getView() && children.iconPosition.propertyView({ label: trans("toggleButton.iconPosition"), @@ -144,7 +125,7 @@ const ToggleTmpComp = (function () { {children.alignment.propertyView({ label: trans("toggleButton.alignment"), radioButton: true, - })} + })}
)} From f2c4de36fa4e5c1fcc73207f56f4ec4454f74640 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:09:33 +0500 Subject: [PATCH 041/155] formating removed-15 --- .../src/comps/comps/buttonComp/toggleButtonComp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 1d71a2369..88971b67c 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -13,8 +13,8 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompConstants"; import { IconControl } from "comps/controls/iconControl"; -import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl"; -import {booleanExposingStateControl} from "comps/controls/codeStateControl"; +import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl"; +import { booleanExposingStateControl } from "comps/controls/codeStateControl"; import { AnimationStyle, AnimationStyleType, @@ -24,7 +24,7 @@ import { styleControl } from "comps/controls/styleControl"; import { BoolControl } from "comps/controls/boolControl"; import { RefControl } from "comps/controls/refControl"; import React, { useContext } from "react"; -import { EditorContext } from "comps/editorState"; +import { EditorContext } from "comps/editorState"; const IconWrapper = styled.div` display: flex; From ef93fafafacf1c6aab5c7fe6085234d49153984e Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:11:21 +0500 Subject: [PATCH 042/155] formating removed-16 --- .../src/comps/comps/buttonComp/toggleButtonComp.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 88971b67c..c3e98ee28 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -87,7 +87,7 @@ const ToggleTmpComp = (function () { }} > {props.iconPosition === "right" && text} - {{props.value.value ? props.trueIcon : props.falseIcon}} + {{props.value.value ? props.trueIcon : props.falseIcon}} {props.iconPosition === "left" && text} @@ -102,7 +102,7 @@ const ToggleTmpComp = (function () { })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -121,11 +121,11 @@ const ToggleTmpComp = (function () { children.iconPosition.propertyView({ label: trans("toggleButton.iconPosition"), radioButton: true, - })} + })} {children.alignment.propertyView({ label: trans("toggleButton.alignment"), radioButton: true, - })} + })}
)} From 3fa1b0ff49891fd99a6828bfc855c0f3f92108d7 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:12:15 +0500 Subject: [PATCH 043/155] formating removed-17 --- .../lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index c3e98ee28..7c462639a 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -121,11 +121,11 @@ const ToggleTmpComp = (function () { children.iconPosition.propertyView({ label: trans("toggleButton.iconPosition"), radioButton: true, - })} + })} {children.alignment.propertyView({ label: trans("toggleButton.alignment"), radioButton: true, - })} + })}
)} From ab9d93d51eadd5a2807c51023c446d318dc14264 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:14:06 +0500 Subject: [PATCH 044/155] formating removed-18 --- .../comps/buttonComp/toggleButtonComp.tsx | 59 ++++++++++++------- 1 file changed, 38 insertions(+), 21 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 7c462639a..702fcf45f 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -82,13 +82,17 @@ const ToggleTmpComp = (function () { loading={props.loading} disabled={props.disabled} onClick={() => { - props.onEvent("change"); + props.onEvent('change'); props.value.onChange(!props.value.value); }} > - {props.iconPosition === "right" && text} - {{props.value.value ? props.trueIcon : props.falseIcon}} - {props.iconPosition === "left" && text} + {props.iconPosition === 'right' && text} + { + + {props.value.value ? props.trueIcon : props.falseIcon} + + } + {props.iconPosition === 'left' && text} ); @@ -97,45 +101,57 @@ const ToggleTmpComp = (function () { <>
{children.value.propertyView({ - label: trans("prop.defaultValue"), - tooltip: trans("toggleButton.valueDesc"), + label: trans('prop.defaultValue'), + tooltip: trans('toggleButton.valueDesc'), })}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
+ {(useContext(EditorContext).editorModeStatus === 'logic' || + useContext(EditorContext).editorModeStatus === 'both') && ( + <> +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} {loadingPropertyView(children)}
- {children.showText.propertyView({ label: trans("toggleButton.showText") })} - {children.showText.getView() && - children.trueText.propertyView({ label: trans("toggleButton.trueLabel") })} + {children.showText.propertyView({ + label: trans('toggleButton.showText'), + })} {children.showText.getView() && - children.falseText.propertyView({ label: trans("toggleButton.falseLabel") })} - {children.trueIcon.propertyView({ label: trans("toggleButton.trueIconLabel") })} - {children.falseIcon.propertyView({ label: trans("toggleButton.falseIconLabel") })} + children.trueText.propertyView({ + label: trans('toggleButton.trueLabel'), + })} + {children.showText.getView() && + children.falseText.propertyView({ + label: trans('toggleButton.falseLabel'), + })} + {children.trueIcon.propertyView({ + label: trans('toggleButton.trueIconLabel'), + })} + {children.falseIcon.propertyView({ + label: trans('toggleButton.falseIconLabel'), + })} {children.showText.getView() && children.iconPosition.propertyView({ - label: trans("toggleButton.iconPosition"), + label: trans('toggleButton.iconPosition'), radioButton: true, - })} + })} {children.alignment.propertyView({ - label: trans("toggleButton.alignment"), + label: trans('toggleButton.alignment'), radioButton: true, })}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || - useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === 'layout' || + useContext(EditorContext).editorModeStatus === 'both') && ( <>
{children.showBorder.propertyView({ - label: trans("toggleButton.showBorder"), + label: trans('toggleButton.showBorder'), })} {children.style.getPropertyView()}
@@ -143,7 +159,8 @@ const ToggleTmpComp = (function () { {children.animationStyle.getPropertyView()}
- )} + )} + )) .setExposeMethodConfigs(buttonRefMethods) From bf3933eb499b3d93491e62cf1c04dd9b4c2088ea Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:15:14 +0500 Subject: [PATCH 045/155] formating removed-19 --- .../comps/buttonComp/toggleButtonComp.tsx | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 702fcf45f..08f990c53 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -82,17 +82,17 @@ const ToggleTmpComp = (function () { loading={props.loading} disabled={props.disabled} onClick={() => { - props.onEvent('change'); + props.onEvent("change"); props.value.onChange(!props.value.value); }} > - {props.iconPosition === 'right' && text} + {props.iconPosition === "right" && text} { {props.value.value ? props.trueIcon : props.falseIcon} } - {props.iconPosition === 'left' && text} + {props.iconPosition === "left" && text} ); @@ -101,13 +101,13 @@ const ToggleTmpComp = (function () { <>
{children.value.propertyView({ - label: trans('prop.defaultValue'), - tooltip: trans('toggleButton.valueDesc'), + label: trans("prop.defaultValue"), + tooltip: trans("toggleButton.valueDesc"), })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || + useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.onEvent.getPropertyView()} @@ -117,41 +117,41 @@ const ToggleTmpComp = (function () {
{children.showText.propertyView({ - label: trans('toggleButton.showText'), + label: trans("toggleButton.showText"), })} {children.showText.getView() && children.trueText.propertyView({ - label: trans('toggleButton.trueLabel'), + label: trans("toggleButton.trueLabel"), })} {children.showText.getView() && children.falseText.propertyView({ - label: trans('toggleButton.falseLabel'), + label: trans("toggleButton.falseLabel"), })} {children.trueIcon.propertyView({ - label: trans('toggleButton.trueIconLabel'), + label: trans("toggleButton.trueIconLabel"), })} {children.falseIcon.propertyView({ - label: trans('toggleButton.falseIconLabel'), + label: trans("toggleButton.falseIconLabel"), })} {children.showText.getView() && children.iconPosition.propertyView({ - label: trans('toggleButton.iconPosition'), + label: trans("toggleButton.iconPosition"), radioButton: true, })} {children.alignment.propertyView({ - label: trans('toggleButton.alignment'), + label: trans("toggleButton.alignment"), radioButton: true, })}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || + useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.showBorder.propertyView({ - label: trans('toggleButton.showBorder'), + label: trans("toggleButton.showBorder"), })} {children.style.getPropertyView()}
From 3241f154e988f68e2e89797ebca204cbec2fa3a1 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:16:21 +0500 Subject: [PATCH 046/155] formating removed-20 --- .../lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 08f990c53..a3cec9038 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -137,7 +137,7 @@ const ToggleTmpComp = (function () { children.iconPosition.propertyView({ label: trans("toggleButton.iconPosition"), radioButton: true, - })} + })} {children.alignment.propertyView({ label: trans("toggleButton.alignment"), radioButton: true, From 59429a7609338cc0b84f881d12727076c45f88ea Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:17:29 +0500 Subject: [PATCH 047/155] formating removed-22 --- .../comps/buttonComp/toggleButtonComp.tsx | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index a3cec9038..9a769160f 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -116,23 +116,13 @@ const ToggleTmpComp = (function () { {loadingPropertyView(children)}
- {children.showText.propertyView({ - label: trans("toggleButton.showText"), - })} - {children.showText.getView() && - children.trueText.propertyView({ - label: trans("toggleButton.trueLabel"), - })} + {children.showText.propertyView({ label: trans("toggleButton.showText") })} + {children.showText.getView() && + children.trueText.propertyView({ label: trans("toggleButton.trueLabel") })} {children.showText.getView() && - children.falseText.propertyView({ - label: trans("toggleButton.falseLabel"), - })} - {children.trueIcon.propertyView({ - label: trans("toggleButton.trueIconLabel"), - })} - {children.falseIcon.propertyView({ - label: trans("toggleButton.falseIconLabel"), - })} + children.falseText.propertyView({ label: trans("toggleButton.falseLabel") })} + {children.trueIcon.propertyView({ label: trans("toggleButton.trueIconLabel") })} + {children.falseIcon.propertyView({ label: trans("toggleButton.falseIconLabel") })} {children.showText.getView() && children.iconPosition.propertyView({ label: trans("toggleButton.iconPosition"), From 28634a708a9b543887a0493b0f565c89bd81f24d Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:19:06 +0500 Subject: [PATCH 048/155] formating removed-23 --- .../src/comps/comps/buttonComp/toggleButtonComp.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 9a769160f..868e2ebae 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -87,11 +87,7 @@ const ToggleTmpComp = (function () { }} > {props.iconPosition === "right" && text} - { - - {props.value.value ? props.trueIcon : props.falseIcon} - - } + {{props.value.value ? props.trueIcon : props.falseIcon}} {props.iconPosition === "left" && text} @@ -106,10 +102,8 @@ const ToggleTmpComp = (function () { })}
- {(useContext(EditorContext).editorModeStatus === "logic" || - useContext(EditorContext).editorModeStatus === "both") && ( - <> -
+ {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} From da6e6586cd76432156516bf22ca5efbf061f2e42 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:20:22 +0500 Subject: [PATCH 049/155] formating removed-24 --- .../comps/containerComp/containerComp.tsx | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index 33821bea5..a32d85c34 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -1,28 +1,28 @@ -import {CompParams} from 'lowcoder-core'; -import {ToDataType} from 'comps/generators/multi'; +import {CompParams} from "lowcoder-core"; +import {ToDataType} from "comps/generators/multi"; import { NameConfigHidden, withExposingConfigs, -} from 'comps/generators/withExposing'; -import {NameGenerator} from 'comps/utils/nameGenerator'; -import {Section, sectionNames} from 'lowcoder-design'; -import {oldContainerParamsToNew} from '../containerBase'; -import {toSimpleContainerData} from '../containerBase/simpleContainerComp'; -import {TriContainer} from '../triContainerComp/triContainer'; +} from "comps/generators/withExposing"; +import {NameGenerator} from "comps/utils/nameGenerator"; +import {Section, sectionNames} from "lowcoder-design"; +import {oldContainerParamsToNew} from "../containerBase"; +import {toSimpleContainerData} from "../containerBase/simpleContainerComp"; +import {TriContainer} from "../triContainerComp/triContainer"; import { ContainerChildren, ContainerCompBuilder, -} from '../triContainerComp/triContainerCompBuilder'; +} from "../triContainerComp/triContainerCompBuilder"; import { disabledPropertyView, hiddenPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {BoolCodeControl} from 'comps/controls/codeControl'; -import {DisabledContext} from 'comps/generators/uiCompBuilder'; -import React, {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; -import {AnimationStyle, styleControl} from '@lowcoder-ee/index.sdk'; +} from "comps/utils/propertyUtils"; +import {trans} from "i18n"; +import {BoolCodeControl} from "comps/controls/codeControl"; +import {DisabledContext} from "comps/generators/uiCompBuilder"; +import React, {useContext} from "react"; +import {EditorContext} from "comps/editorState"; +import {AnimationStyle, styleControl} from "@lowcoder-ee/index.sdk"; export const ContainerBaseComp = (function () { const childrenMap = { @@ -39,16 +39,16 @@ export const ContainerBaseComp = (function () { .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || + useContext(EditorContext).editorModeStatus === "both") && (
{disabledPropertyView(children)} {hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || + useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.container.getPropertyView()} @@ -60,17 +60,17 @@ export const ContainerBaseComp = (function () { {children.animationStyle.getPropertyView()}
{children.container.children.showHeader.getView() && ( -
+
{children.container.headerStylePropertyView()}
)} {children.container.children.showBody.getView() && ( -
+
{children.container.bodyStylePropertyView()}
)} {children.container.children.showFooter.getView() && ( -
+
{children.container.footerStylePropertyView()}
)} @@ -92,7 +92,7 @@ function convertOldContainerParams(params: CompParams) { // old params if ( container && - (container.hasOwnProperty('layout') || container.hasOwnProperty('items')) + (container.hasOwnProperty("layout") || container.hasOwnProperty("items")) ) { const autoHeight = tempParams.value.autoHeight; const scrollbars = tempParams.value.scrollbars; @@ -135,14 +135,14 @@ export function defaultContainerData( header: toSimpleContainerData([ { item: { - compType: 'text', - name: nameGenerator.genItemName('containerTitle'), + compType: "text", + name: nameGenerator.genItemName("containerTitle"), comp: { - text: '### ' + trans('container.title'), + text: "### " + trans("container.title"), }, }, layoutItem: { - i: '', + i: "", h: 5, w: 24, x: 0, From 8136f0215ee4efb117531ac32025a71e8364a90e Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:23:03 +0500 Subject: [PATCH 050/155] formating removed-25 --- .../comps/containerComp/containerComp.tsx | 36 ++++++++----------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index a32d85c34..86b51b8fb 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -1,28 +1,22 @@ -import {CompParams} from "lowcoder-core"; -import {ToDataType} from "comps/generators/multi"; -import { - NameConfigHidden, - withExposingConfigs, -} from "comps/generators/withExposing"; -import {NameGenerator} from "comps/utils/nameGenerator"; -import {Section, sectionNames} from "lowcoder-design"; -import {oldContainerParamsToNew} from "../containerBase"; -import {toSimpleContainerData} from "../containerBase/simpleContainerComp"; -import {TriContainer} from "../triContainerComp/triContainer"; +import { CompParams } from "lowcoder-core"; +import { ToDataType } from "comps/generators/multi"; +import { NameConfigHidden,withExposingConfigs } from "comps/generators/withExposing"; +import { NameGenerator } from "comps/utils/nameGenerator"; +import { Section, sectionNames } from "lowcoder-design"; +import { oldContainerParamsToNew } from "../containerBase"; +import { toSimpleContainerData } from "../containerBase/simpleContainerComp"; +import { TriContainer } from "../triContainerComp/triContainer"; import { ContainerChildren, ContainerCompBuilder, } from "../triContainerComp/triContainerCompBuilder"; -import { - disabledPropertyView, - hiddenPropertyView, -} from "comps/utils/propertyUtils"; -import {trans} from "i18n"; -import {BoolCodeControl} from "comps/controls/codeControl"; -import {DisabledContext} from "comps/generators/uiCompBuilder"; -import React, {useContext} from "react"; -import {EditorContext} from "comps/editorState"; -import {AnimationStyle, styleControl} from "@lowcoder-ee/index.sdk"; +import { disabledPropertyView,hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { BoolCodeControl } from "comps/controls/codeControl"; +import { DisabledContext } from "comps/generators/uiCompBuilder"; +import React, { useContext } from "react"; +import { EditorContext } from "comps/editorState"; +import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk"; export const ContainerBaseComp = (function () { const childrenMap = { From 1f65ed2d823a9dc84ef0d41bef42d0a837e9fd5d Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:24:13 +0500 Subject: [PATCH 051/155] formating removed-26 --- .../src/comps/comps/containerComp/containerComp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index 86b51b8fb..a1a1e37d6 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -1,6 +1,6 @@ import { CompParams } from "lowcoder-core"; import { ToDataType } from "comps/generators/multi"; -import { NameConfigHidden,withExposingConfigs } from "comps/generators/withExposing"; +import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { NameGenerator } from "comps/utils/nameGenerator"; import { Section, sectionNames } from "lowcoder-design"; import { oldContainerParamsToNew } from "../containerBase"; @@ -10,7 +10,7 @@ import { ContainerChildren, ContainerCompBuilder, } from "../triContainerComp/triContainerCompBuilder"; -import { disabledPropertyView,hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { BoolCodeControl } from "comps/controls/codeControl"; import { DisabledContext } from "comps/generators/uiCompBuilder"; @@ -26,7 +26,7 @@ export const ContainerBaseComp = (function () { return new ContainerCompBuilder(childrenMap, (props, dispatch) => { return ( - + ); }) From c1c322232d8ba9c7cf4a9d98af866dd98ab976bb Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:25:50 +0500 Subject: [PATCH 052/155] formating removed-27 --- .../lowcoder/src/comps/comps/containerComp/containerComp.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index a1a1e37d6..9d2597321 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -33,8 +33,7 @@ export const ContainerBaseComp = (function () { .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === "logic" || - useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{disabledPropertyView(children)} {hiddenPropertyView(children)} From f6480100ffbcf200f8731e26e15c70ae54ea703e Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:56:47 +0500 Subject: [PATCH 053/155] formating removed-28 --- .../comps/containerComp/containerComp.tsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index 9d2597321..832da1169 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -40,21 +40,16 @@ export const ContainerBaseComp = (function () {
)} - {(useContext(EditorContext).editorModeStatus === "layout" || - useContext(EditorContext).editorModeStatus === "both") && ( - <> -
- {children.container.getPropertyView()} -
-
- {children.container.stylePropertyView()} -
-
- {children.animationStyle.getPropertyView()} -
- {children.container.children.showHeader.getView() && ( -
- {children.container.headerStylePropertyView()} + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
+ {children.container.getPropertyView()} +
+
+ { children.container.stylePropertyView() } +
+ {children.container.children.showHeader.getView() && ( +
+ { children.container.headerStylePropertyView() }
)} {children.container.children.showBody.getView() && ( From 0188dc39cb10ed4e76fb0e363cef0f86c2387f22 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:57:32 +0500 Subject: [PATCH 054/155] formating removed-29 --- .../lowcoder/src/comps/comps/containerComp/containerComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index 832da1169..f883c41f2 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -33,14 +33,14 @@ export const ContainerBaseComp = (function () { .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{disabledPropertyView(children)} {hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.container.getPropertyView()}
From 86b8080c98b7dbd18bce39e31adca5da5955f91b Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 19:58:51 +0500 Subject: [PATCH 055/155] formating removed-30 --- .../comps/containerComp/containerComp.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index f883c41f2..df79f963f 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -51,17 +51,17 @@ export const ContainerBaseComp = (function () {
{ children.container.headerStylePropertyView() }
- )} - {children.container.children.showBody.getView() && ( -
- {children.container.bodyStylePropertyView()} -
- )} - {children.container.children.showFooter.getView() && ( -
- {children.container.footerStylePropertyView()} -
- )} + )} + {children.container.children.showBody.getView() && ( +
+ { children.container.bodyStylePropertyView() } +
+ )} + {children.container.children.showFooter.getView() && ( +
+ { children.container.footerStylePropertyView() } +
+ )} )} From 9b7730d5f8f03c6cc50826bb0b30f9eb10ef0a95 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 20:00:43 +0500 Subject: [PATCH 056/155] formating removed-31 --- .../comps/comps/containerComp/containerComp.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index df79f963f..b0d7f3c23 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -50,7 +50,7 @@ export const ContainerBaseComp = (function () { {children.container.children.showHeader.getView() && (
{ children.container.headerStylePropertyView() } -
+
)} {children.container.children.showBody.getView() && (
@@ -68,7 +68,7 @@ export const ContainerBaseComp = (function () { ); }) .build(); -})(); +})(); // Compatible with old data function convertOldContainerParams(params: CompParams) { @@ -78,10 +78,7 @@ function convertOldContainerParams(params: CompParams) { if (tempParams.value) { const container = tempParams.value.container; // old params - if ( - container && - (container.hasOwnProperty("layout") || container.hasOwnProperty("items")) - ) { + if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) { const autoHeight = tempParams.value.autoHeight; const scrollbars = tempParams.value.scrollbars; return { @@ -89,7 +86,7 @@ function convertOldContainerParams(params: CompParams) { value: { container: { showHeader: true, - body: {0: {view: container}}, + body: { 0 : { view: container } }, showBody: true, showFooter: false, autoHeight: autoHeight, @@ -108,9 +105,7 @@ class ContainerTmpComp extends ContainerBaseComp { } } -export const ContainerComp = withExposingConfigs(ContainerTmpComp, [ - NameConfigHidden, -]); +export const ContainerComp = withExposingConfigs(ContainerTmpComp, [NameConfigHidden]); type ContainerDataType = ToDataType>; From e41fccd1eb9f575a26c33fe4087cb557c09bf2c3 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sat, 18 May 2024 20:01:17 +0500 Subject: [PATCH 057/155] formating removed-32 --- .../lowcoder/src/comps/comps/containerComp/containerComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index b0d7f3c23..9005d7de2 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -86,7 +86,7 @@ function convertOldContainerParams(params: CompParams) { value: { container: { showHeader: true, - body: { 0 : { view: container } }, + body: { 0: { view: container } }, showBody: true, showFooter: false, autoHeight: autoHeight, From 26fcd2e5fe8928a428f56b264fd703ae50c63644 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:05:47 +0500 Subject: [PATCH 058/155] formating removed-33 --- .../comps/containerComp/pageLayoutComp.tsx | 94 ++++++++----------- 1 file changed, 41 insertions(+), 53 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index 14b2eedaf..e86e8b0b1 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -1,33 +1,21 @@ -import {CompParams} from 'lowcoder-core'; -import {ToDataType} from 'comps/generators/multi'; -import { - NameConfigDisabled, - NameConfigHidden, - withExposingConfigs, - NameConfig, - CompDepsConfig, -} from 'comps/generators/withExposing'; -import {withMethodExposing} from 'comps/generators/withMethodExposing'; -import {NameGenerator} from 'comps/utils/nameGenerator'; -import {Section, sectionNames} from 'lowcoder-design'; -import {oldContainerParamsToNew} from '../containerBase'; -import {toSimpleContainerData} from '../containerBase/simpleContainerComp'; -import { - disabledPropertyView, - hiddenPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {BoolCodeControl} from 'comps/controls/codeControl'; -import {DisabledContext} from 'comps/generators/uiCompBuilder'; -import React, {useContext, useEffect, useState} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { CompParams } from "lowcoder-core"; +import { ToDataType } from "comps/generators/multi"; +import { NameConfigDisabled, NameConfigHidden, withExposingConfigs, NameConfig, CompDepsConfig } from "comps/generators/withExposing"; +import { withMethodExposing } from "comps/generators/withMethodExposing"; +import { NameGenerator } from "comps/utils/nameGenerator"; +import { Section, sectionNames } from "lowcoder-design"; +import { oldContainerParamsToNew } from "../containerBase"; +import { toSimpleContainerData } from "../containerBase/simpleContainerComp"; +import { disabledPropertyView, hiddenPropertyView, } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { BoolCodeControl } from "comps/controls/codeControl"; +import { DisabledContext } from "comps/generators/uiCompBuilder"; +import React, { useContext, useEffect, useState } from "react"; +import { EditorContext } from "comps/editorState"; -import { - ContainerChildren, - ContainerCompBuilder, -} from '../pageLayoutComp/pageLayoutCompBuilder'; -import {PageLayout} from '../pageLayoutComp/pageLayout'; -import {AnimationStyle, styleControl} from '@lowcoder-ee/index.sdk'; +import { ContainerChildren, ContainerCompBuilder } from "../pageLayoutComp/pageLayoutCompBuilder"; +import { PageLayout } from "../pageLayoutComp/pageLayout"; +import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk"; export const ContainerBaseComp = (function () { const childrenMap = { @@ -51,8 +39,8 @@ export const ContainerBaseComp = (function () { .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || + useContext(EditorContext).editorModeStatus === "both") && (
{disabledPropertyView(children)} {hiddenPropertyView(children)} @@ -60,8 +48,8 @@ export const ContainerBaseComp = (function () {
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || + useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.container.getPropertyView()} @@ -73,20 +61,20 @@ export const ContainerBaseComp = (function () { {children.animationStyle.getPropertyView()}
{children.container.children.showHeader.getView() && ( -
+
{children.container.headerStylePropertyView()}
)} {children.container.children.showSider.getView() && ( -
+
{children.container.siderStylePropertyView()}
)} -
+
{children.container.bodyStylePropertyView()}
{children.container.children.showFooter.getView() && ( -
+
{children.container.footerStylePropertyView()}
)} @@ -108,7 +96,7 @@ function convertOldContainerParams(params: CompParams) { // old params if ( container && - (container.hasOwnProperty('layout') || container.hasOwnProperty('items')) + (container.hasOwnProperty("layout") || container.hasOwnProperty("items")) ) { const autoHeight = tempParams.value.autoHeight; const scrollbars = tempParams.value.scrollbars; @@ -140,23 +128,23 @@ const PageLayoutCompTmP = withExposingConfigs(ContainerTmpComp, [ NameConfigHidden, NameConfigDisabled, - new NameConfig('container', trans('export.ratingValueDesc')), + new NameConfig("container", trans("export.ratingValueDesc")), new CompDepsConfig( - 'siderCollapsed', + "siderCollapsed", (comp) => ({ data: comp.children.container.children.siderCollapsed.nodeWithoutCache(), }), (input) => input.data.value, - trans('listView.itemsDesc') + trans("listView.itemsDesc") ), ]); export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [ { method: { - name: 'setSiderCollapsed', - description: 'Set the Sider of the PageLayout to be collapsed or not', - params: [{name: 'collapsed', type: 'boolean'}], + name: "setSiderCollapsed", + description: "Set the Sider of the PageLayout to be collapsed or not", + params: [{name: "collapsed", type: "boolean"}], }, execute: (comp, values) => { const page = values[0] as number; @@ -178,36 +166,36 @@ export function defaultPageLayoutData( header: toSimpleContainerData([ { item: { - compType: 'navigation', - name: nameGenerator.genItemName('pageNavigation'), + compType: "navigation", + name: nameGenerator.genItemName("pageNavigation"), comp: { - logoUrl: '', + logoUrl: "", hidden: false, items: [ { - label: 'Home', + label: "Home", hidden: false, active: false, }, { - label: 'Services', + label: "Services", hidden: false, active: false, items: [ { - label: 'Lowcode Platform', + label: "Lowcode Platform", hidden: false, active: false, }, { - label: 'App Development', + label: "App Development", hidden: false, active: false, }, ], }, { - label: 'About', + label: "About", hidden: false, active: false, }, @@ -215,7 +203,7 @@ export function defaultPageLayoutData( }, }, layoutItem: { - i: '', + i: "", h: 6, w: 24, x: 0, From b97caf0c7b39c3d60715bdf1dcc79f7c9a13add2 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:24:55 +0500 Subject: [PATCH 059/155] formating removed-34 --- .../comps/containerComp/pageLayoutComp.tsx | 57 +++++++++---------- 1 file changed, 27 insertions(+), 30 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index e86e8b0b1..6ea60f705 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -6,14 +6,17 @@ import { NameGenerator } from "comps/utils/nameGenerator"; import { Section, sectionNames } from "lowcoder-design"; import { oldContainerParamsToNew } from "../containerBase"; import { toSimpleContainerData } from "../containerBase/simpleContainerComp"; -import { disabledPropertyView, hiddenPropertyView, } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { BoolCodeControl } from "comps/controls/codeControl"; import { DisabledContext } from "comps/generators/uiCompBuilder"; import React, { useContext, useEffect, useState } from "react"; import { EditorContext } from "comps/editorState"; -import { ContainerChildren, ContainerCompBuilder } from "../pageLayoutComp/pageLayoutCompBuilder"; +import { + ContainerChildren, + ContainerCompBuilder, +} from "../pageLayoutComp/pageLayoutCompBuilder"; import { PageLayout } from "../pageLayoutComp/pageLayout"; import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk"; @@ -24,58 +27,52 @@ export const ContainerBaseComp = (function () { }; return new ContainerCompBuilder(childrenMap, (props, dispatch) => { + const [siderCollapsed, setSiderCollapsed] = useState(false); return ( - + ); }) .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === "logic" || - useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{disabledPropertyView(children)} {hiddenPropertyView(children)} - {children.container.appSelectorPropertyView()} + { children.container.appSelectorPropertyView()}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || - useContext(EditorContext).editorModeStatus === "both") && ( - <> -
- {children.container.getPropertyView()} -
-
- {children.container.stylePropertyView()} + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
+ {children.container.getPropertyView()} +
+
+ { children.container.stylePropertyView() }
{children.animationStyle.getPropertyView()}
- {children.container.children.showHeader.getView() && ( -
- {children.container.headerStylePropertyView()} + {children.container.children.showHeader.getView() && ( +
+ { children.container.headerStylePropertyView() }
)} - {children.container.children.showSider.getView() && ( -
- {children.container.siderStylePropertyView()} + {children.container.children.showSider.getView() && ( +
+ { children.container.siderStylePropertyView() }
)} -
- {children.container.bodyStylePropertyView()} -
- {children.container.children.showFooter.getView() && ( -
- {children.container.footerStylePropertyView()} +
+ { children.container.bodyStylePropertyView() } +
+ {children.container.children.showFooter.getView() && ( +
+ { children.container.footerStylePropertyView() }
)} From 1d1b80d8e8b715c9066793f9bdb21561ffdbb832 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:26:11 +0500 Subject: [PATCH 060/155] formating removed-35 --- .../lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index 6ea60f705..cdf5e7307 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -60,8 +60,8 @@ export const ContainerBaseComp = (function () { {children.container.children.showHeader.getView() && (
{ children.container.headerStylePropertyView() } -
- )} +
+ )} {children.container.children.showSider.getView() && (
{ children.container.siderStylePropertyView() } From db2c65dc6e4e2b169462e46e30dc814f5006a2b8 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:29:34 +0500 Subject: [PATCH 061/155] formating removed-36 --- .../comps/containerComp/pageLayoutComp.tsx | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index cdf5e7307..316a577da 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -65,7 +65,7 @@ export const ContainerBaseComp = (function () { {children.container.children.showSider.getView() && (
{ children.container.siderStylePropertyView() } -
+
)}
{ children.container.bodyStylePropertyView() } @@ -73,7 +73,7 @@ export const ContainerBaseComp = (function () { {children.container.children.showFooter.getView() && (
{ children.container.footerStylePropertyView() } -
+
)} )} @@ -81,7 +81,7 @@ export const ContainerBaseComp = (function () { ); }) .build(); -})(); +})(); // Compatible with old data function convertOldContainerParams(params: CompParams) { @@ -91,10 +91,7 @@ function convertOldContainerParams(params: CompParams) { if (tempParams.value) { const container = tempParams.value.container; // old params - if ( - container && - (container.hasOwnProperty("layout") || container.hasOwnProperty("items")) - ) { + if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) { const autoHeight = tempParams.value.autoHeight; const scrollbars = tempParams.value.scrollbars; return { @@ -102,7 +99,7 @@ function convertOldContainerParams(params: CompParams) { value: { container: { showHeader: true, - body: {0: {view: container}}, + body: { 0: { view: container } }, showFooter: false, showSider: true, autoHeight: autoHeight, @@ -115,6 +112,7 @@ function convertOldContainerParams(params: CompParams) { return tempParams; } + class ContainerTmpComp extends ContainerBaseComp { constructor(params: CompParams) { super(convertOldContainerParams(params)); @@ -128,20 +126,18 @@ const PageLayoutCompTmP = withExposingConfigs(ContainerTmpComp, [ new NameConfig("container", trans("export.ratingValueDesc")), new CompDepsConfig( "siderCollapsed", - (comp) => ({ - data: comp.children.container.children.siderCollapsed.nodeWithoutCache(), - }), - (input) => input.data.value, - trans("listView.itemsDesc") + (comp) => ({ data : comp.children.container.children.siderCollapsed.nodeWithoutCache()}), + (input) => input.data.value, trans("listView.itemsDesc") ), ]); export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [ + { method: { name: "setSiderCollapsed", description: "Set the Sider of the PageLayout to be collapsed or not", - params: [{name: "collapsed", type: "boolean"}], + params: [{ name: "collapsed", type: "boolean" }], }, execute: (comp, values) => { const page = values[0] as number; @@ -149,7 +145,7 @@ export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [ // comp.children.pagination.children.pageNo.dispatchChangeValueAction(page); } }, - }, + } ]); type ContainerDataType = ToDataType>; From f128518dc0e9c602c8c3405cee615868f2fdda2c Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:30:39 +0500 Subject: [PATCH 062/155] formating removed-37 --- .../lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index 316a577da..17a5e8d18 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -74,7 +74,7 @@ export const ContainerBaseComp = (function () {
{ children.container.footerStylePropertyView() }
- )} + )} )} @@ -132,7 +132,7 @@ const PageLayoutCompTmP = withExposingConfigs(ContainerTmpComp, [ ]); export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [ - + { method: { name: "setSiderCollapsed", From f027b6fb732771bb04ae2d58e0514680dbc8222e Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:32:39 +0500 Subject: [PATCH 063/155] formating removed-38 --- .../lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index 17a5e8d18..5164cd7dd 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -66,7 +66,7 @@ export const ContainerBaseComp = (function () {
{ children.container.siderStylePropertyView() }
- )} + )}
{ children.container.bodyStylePropertyView() }
From 756951831c7e77a4331a48fc7964ea6252b94a72 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:33:50 +0500 Subject: [PATCH 064/155] formating removed-39 --- .../comps/containerComp/textContainerComp.tsx | 124 ++++++++---------- 1 file changed, 56 insertions(+), 68 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx index c3346fc40..1edf9c97b 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx @@ -1,67 +1,67 @@ -import {BoolCodeControl, StringControl} from 'comps/controls/codeControl'; -import {stringExposingStateControl} from 'comps/controls/codeStateControl'; -import {ToDataType} from 'comps/generators/multi'; +import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; +import { stringExposingStateControl } from "comps/controls/codeStateControl"; +import { ToDataType } from "comps/generators/multi"; import { NameConfigHidden, withExposingConfigs, -} from 'comps/generators/withExposing'; -import {NameGenerator} from 'comps/utils/nameGenerator'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {CompParams} from 'lowcoder-core'; -import {Section, sectionNames} from 'lowcoder-design'; -import {oldContainerParamsToNew} from '../containerBase'; -import {toSimpleContainerData} from '../containerBase/simpleContainerComp'; +} from "comps/generators/withExposing"; +import { NameGenerator } from "comps/utils/nameGenerator"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { CompParams } from "lowcoder-core"; +import { Section, sectionNames } from "lowcoder-design"; +import { oldContainerParamsToNew } from "../containerBase"; +import { toSimpleContainerData } from "../containerBase/simpleContainerComp"; import { ContainerChildren, ContainerCompBuilder, -} from '../triContainerComp/triContainerCompBuilder'; -import {TriContainer} from '../triContainerComp/triFloatTextContainer'; -import {dropdownControl} from 'comps/controls/dropdownControl'; -import {withDefault} from 'comps/generators/simpleGenerators'; -import {styleControl} from 'comps/controls/styleControl'; -import {AnimationStyle, TextStyle} from 'comps/controls/styleControlConstants'; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; -import {alignWithJustifyControl} from 'comps/controls/alignControl'; +} from "../triContainerComp/triContainerCompBuilder"; +import { TriContainer } from "../triContainerComp/triFloatTextContainer"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { withDefault } from "comps/generators/simpleGenerators"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants"; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; +import { alignWithJustifyControl } from "comps/controls/alignControl"; const typeOptions = [ { - label: 'Markdown', - value: 'markdown', + label: "Markdown", + value: "markdown", }, { - label: trans('text'), - value: 'text', + label: trans("text"), + value: "text", }, ] as const; const floatOptions = [ { - label: 'None', - value: 'none', + label: "None", + value: "none", }, { - label: 'Right', - value: 'right', + label: "Right", + value: "right", }, { - label: 'Left', - value: 'left', + label: "Left", + value: "left", }, ] as const; + export const ContainerBaseComp = (function () { const childrenMap = { disabled: BoolCodeControl, text: stringExposingStateControl( - 'text', - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat faucibus eleifend. Pellentesque eleifend, risus vel sagittis mattis, mauris ipsum tempor sapien, eu lobortis lacus libero a dui. Cras erat felis, rhoncus vestibulum consectetur et, ultrices ut purus. Sed a tortor orci. Vestibulum nec eleifend ante.' + "text", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat faucibus eleifend. Pellentesque eleifend, risus vel sagittis mattis, mauris ipsum tempor sapien, eu lobortis lacus libero a dui. Cras erat felis, rhoncus vestibulum consectetur et, ultrices ut purus. Sed a tortor orci. Vestibulum nec eleifend ante." ), - type: dropdownControl(typeOptions, 'markdown'), - float: dropdownControl(floatOptions, 'left'), + type: dropdownControl(typeOptions, "markdown"), + float: dropdownControl(floatOptions, "left"), horizontalAlignment: alignWithJustifyControl(), - width: withDefault(StringControl, '40'), + width: withDefault(StringControl, "40"), style: styleControl(TextStyle), animationStyle: styleControl(AnimationStyle), }; @@ -72,61 +72,49 @@ export const ContainerBaseComp = (function () { return ( <>
- {children.type.propertyView({ - label: trans('value'), - tooltip: trans('textShow.valueTooltip'), - radioButton: true, - })} + {children.type.propertyView({label: trans("value"), tooltip: trans("textShow.valueTooltip"), radioButton: true,})} {children.text.propertyView({})}
- {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{hiddenPropertyView(children)}
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
{children.container.getPropertyView()} - {children.width.propertyView({ - label: trans('container.flowWidth'), - })} - {children.float.propertyView({ - label: trans('container.floatType'), - radioButton: true, + {children.width.propertyView({label: trans("container.flowWidth")})} + {children.float.propertyView({ label: trans("container.floatType"), radioButton: true, })} {children.horizontalAlignment.propertyView({ - label: trans('textShow.horizontalAlignment'), + label: trans("textShow.horizontalAlignment"), radioButton: true, })}
-
+
{children.style.getPropertyView()}
{children.animationStyle.getPropertyView()}
-
+
{children.container.stylePropertyView()}
{children.container.children.showHeader.getView() && ( -
- {children.container.headerStylePropertyView()} +
+ { children.container.headerStylePropertyView() }
)} {children.container.children.showBody.getView() && ( -
- {children.container.bodyStylePropertyView()} +
+ { children.container.bodyStylePropertyView() }
)} {children.container.children.showFooter.getView() && ( -
- {children.container.footerStylePropertyView()} +
+ { children.container.footerStylePropertyView() }
)} @@ -147,7 +135,7 @@ function convertOldContainerParams(params: CompParams) { // old params if ( container && - (container.hasOwnProperty('layout') || container.hasOwnProperty('items')) + (container.hasOwnProperty("layout") || container.hasOwnProperty("items")) ) { const autoHeight = tempParams.value.autoHeight; return { @@ -155,7 +143,7 @@ function convertOldContainerParams(params: CompParams) { value: { container: { showHeader: false, - body: {0: {view: container}}, + body: { 0: { view: container } }, showBody: true, showFooter: false, autoHeight: autoHeight, @@ -188,21 +176,21 @@ export function defaultContainerData( header: toSimpleContainerData([ { item: { - compType: 'text', - name: nameGenerator.genItemName('containerTitle'), + compType: "text", + name: nameGenerator.genItemName("containerTitle"), comp: { - text: '### ' + trans('container.title'), + text: "### " + trans("container.title"), }, }, layoutItem: { - i: '', + i: "", h: 5, w: 24, x: 0, y: 0, }, }, - ]), + ]) }, }; } From 260cd88dfb755701452b215444055bc69bb43d03 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:35:00 +0500 Subject: [PATCH 065/155] formating removed-40 --- .../lowcoder/src/comps/comps/dividerComp.tsx | 105 +++++++----------- 1 file changed, 43 insertions(+), 62 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx index e588d73d8..42f0307ea 100644 --- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx @@ -1,38 +1,31 @@ -import {default as Divider, DividerProps} from 'antd/es/divider'; -import {StringControl} from 'comps/controls/codeControl'; -import {BoolControl} from 'comps/controls/boolControl'; -import {alignControl} from 'comps/controls/alignControl'; -import {UICompBuilder} from 'comps/generators'; -import {NameConfig, NameConfigHidden} from 'comps/generators/withExposing'; -import {Section, sectionNames} from 'lowcoder-design'; -import _ from 'lodash'; -import styled from 'styled-components'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - AnimationStyleType, - DividerStyle, - DividerStyleType, - heightCalculator, - widthCalculator, -} from 'comps/controls/styleControlConstants'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; +import { default as Divider, DividerProps } from "antd/es/divider"; +import { StringControl } from "comps/controls/codeControl"; +import { BoolControl } from "comps/controls/boolControl"; +import { alignControl } from "comps/controls/alignControl"; +import { UICompBuilder } from "comps/generators"; +import { NameConfig, NameConfigHidden } from "comps/generators/withExposing"; +import { Section, sectionNames } from "lowcoder-design"; +import _ from "lodash"; +import styled from "styled-components"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, AnimationStyleType, DividerStyle, DividerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { migrateOldData } from "comps/generators/simpleGenerators"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean; - $animationStyle: AnimationStyleType; + $animationStyle:AnimationStyleType; }; // TODO: find out how to set border style when text is active // TODO: enable type "vertical" https://ant.design/components/divider -const StyledDivider = styled(Divider)` +const StyledDivider = styled(Divider) ` margin-top: 3.5px; .ant-divider-inner-text { height: 32px; @@ -41,37 +34,27 @@ const StyledDivider = styled(Divider)` font-size: ${(props) => props.$style.textSize}; font-weight: ${(props) => props.$style.textWeight}; font-family: ${(props) => props.$style.fontFamily}; - text-transform: ${(props) => props.$style.textTransform}; - text-decoration: ${(props) => props.$style.textDecoration}; - font-style: ${(props) => props.$style.fontStyle}; + text-transform:${(props)=>props.$style.textTransform}; + text-decoration:${(props)=>props.$style.textDecoration}; + font-style:${(props) => props.$style.fontStyle} } - ${(props) => props.$animationStyle} - min-width: 0; + ${props=>props.$animationStyle} + min-width: 0; width: ${(props) => { return widthCalculator(props.$style.margin); - }}; + }}; min-height: ${(props) => { return heightCalculator(props.$style.margin); - }}; + }}; margin: ${(props) => { return props.$style.margin; - }}; + }}; padding: ${(props) => props.$style.padding}; - - border-top: ${(props) => - props.$style.borderWidth && props.$style.borderWidth != '0px' - ? props.$style.borderWidth - : '1px'} - ${(props) => (props.dashed ? 'dashed' : 'solid')} - ${(props) => props.$style.border}; - '' .ant-divider-inner-text::before, - .ant-divider-inner-text::after { - border-block-start: ${(props) => - props.$style.borderWidth && props.$style.borderWidth != '0px' - ? props.$style.borderWidth - : '1px'} - ${(props) => (props.dashed ? 'dashed' : 'solid')} - ${(props) => props.$style.border} !important; + + border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border}; +"" + .ant-divider-inner-text::before, .ant-divider-inner-text::after { + border-block-start: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important; border-block-start-color: inherit; border-block-end: 0; } @@ -92,18 +75,20 @@ const childrenMap = { }; function fixOldStyleData(oldData: any) { - if (oldData && oldData.hasOwnProperty('color')) { + if (oldData && oldData.hasOwnProperty("color")) { return { ...oldData, style: { color: oldData.color, - text: '', + text: "", }, }; } return oldData; } + + // Compatible with historical style data 2022-8-26 export const DividerComp = migrateOldData( new UICompBuilder(childrenMap, (props) => { @@ -122,30 +107,26 @@ export const DividerComp = migrateOldData( return ( <>
- {children.title.propertyView({label: trans('divider.title')})} + {children.title.propertyView({ label: trans("divider.title") })}
- {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{hiddenPropertyView(children)}
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
{!_.isEmpty(children.title.getView()) && children.align.propertyView({ - label: trans('divider.align'), + label: trans("divider.align"), radioButton: true, })}
- {children.dashed.propertyView({label: trans('divider.dashed')})} + {children.dashed.propertyView({ label: trans("divider.dashed") })} {children.style.getPropertyView()}
@@ -157,9 +138,9 @@ export const DividerComp = migrateOldData( ); }) .setExposeStateConfigs([ - new NameConfig('dashed', trans('divider.dashedDesc')), - new NameConfig('title', trans('divider.titleDesc')), - new NameConfig('align', trans('divider.alignDesc')), + new NameConfig("dashed", trans("divider.dashedDesc")), + new NameConfig("title", trans("divider.titleDesc")), + new NameConfig("align", trans("divider.alignDesc")), NameConfigHidden, ]) .build(), From bc89577096a998c4bb571a0c170ec3925a2dfa03 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:36:13 +0500 Subject: [PATCH 066/155] formating removed-41 --- .../comps/comps/jsonComp/jsonEditorComp.tsx | 89 ++++++++----------- 1 file changed, 35 insertions(+), 54 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index c3a1b5476..898825778 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -1,35 +1,25 @@ -import {Section, sectionNames} from 'lowcoder-design'; -import {UICompBuilder} from '../../generators'; -import { - NameConfigHidden, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import {defaultData} from './jsonConstants'; -import styled from 'styled-components'; -import {jsonValueExposingStateControl} from 'comps/controls/codeStateControl'; -import {ChangeEventHandlerControl} from 'comps/controls/eventHandlerControl'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {LabelControl} from 'comps/controls/labelControl'; -import { - formDataChildren, - FormDataPropertyView, -} from '../formComp/formDataConstants'; -import { - AnimationStyle, - JsonEditorStyle, -} from 'comps/controls/styleControlConstants'; -import {styleControl} from 'comps/controls/styleControl'; -import {migrateOldData, withDefault} from 'comps/generators/simpleGenerators'; -import {useRef, useEffect, useContext} from 'react'; +import { Section, sectionNames } from "lowcoder-design"; +import { UICompBuilder } from "../../generators"; +import { NameConfigHidden, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import { defaultData } from "./jsonConstants"; +import styled from "styled-components"; +import { jsonValueExposingStateControl } from "comps/controls/codeStateControl"; +import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { LabelControl } from "comps/controls/labelControl"; +import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; +import { AnimationStyle, JsonEditorStyle } from "comps/controls/styleControlConstants"; +import { styleControl } from "comps/controls/styleControl"; +import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; +import { useRef, useEffect, useContext } from "react"; import { EditorState, EditorView, type EditorView as EditorViewType, -} from 'base/codeEditor/codeMirror'; -import {useExtensions} from 'base/codeEditor/extensions'; -import {EditorContext} from 'comps/editorState'; +} from "base/codeEditor/codeMirror"; +import { useExtensions } from "base/codeEditor/extensions"; +import { EditorContext } from "comps/editorState"; /** * JsonEditor Comp @@ -47,11 +37,11 @@ const Wrapper = styled.div` * Compatible with old data 2022-10-19 */ function fixOldData(oldData: any) { - if (oldData && !oldData.hasOwnProperty('label')) { + if (oldData && !oldData.hasOwnProperty("label")) { return { ...oldData, label: { - text: '', + text: "", }, }; } @@ -62,7 +52,7 @@ function fixOldData(oldData: any) { * Compatible with old data 2022-11-18 */ function fixOldDataSecond(oldData: any) { - if (oldData && oldData.hasOwnProperty('default')) { + if (oldData && oldData.hasOwnProperty("default")) { return { ...oldData, value: oldData.default, @@ -86,9 +76,9 @@ let JsonEditorTmpComp = (function () { const wrapperRef = useRef(null); const view = useRef(null); const editContent = useRef(); - const {extensions} = useExtensions({ - codeType: 'PureJSON', - language: 'json', + const { extensions } = useExtensions({ + codeType: "PureJSON", + language: "json", showLineNum: true, enableClickCompName: false, onFocus: (focused) => { @@ -101,7 +91,7 @@ let JsonEditorTmpComp = (function () { try { const value = JSON.parse(state.doc.toString()); props.value.onChange(value); - props.onEvent('change'); + props.onEvent("change"); } catch (error) {} }, }); @@ -112,7 +102,7 @@ let JsonEditorTmpComp = (function () { doc: JSON.stringify(props.value.value, null, 2), extensions, }); - view.current = new EditorView({state, parent: wrapperRef.current}); + view.current = new EditorView({ state, parent: wrapperRef.current }); } }, [wrapperRef.current]); @@ -141,35 +131,26 @@ let JsonEditorTmpComp = (function () { return ( <>
- {children.value.propertyView({ - label: trans('export.jsonEditorDesc'), - })} + {children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && - children.label.getPropertyView()} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> -
- {children.style.getPropertyView()} -
-
- {children.animationStyle.getPropertyView()} -
- +
{children.style.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
+ )} + ); }) @@ -187,6 +168,6 @@ JsonEditorTmpComp = class extends JsonEditorTmpComp { }; export const JsonEditorComp = withExposingConfigs(JsonEditorTmpComp, [ - new NameConfig('value', trans('export.jsonEditorDesc')), + new NameConfig("value", trans("export.jsonEditorDesc")), NameConfigHidden, ]); From 741202ff3c0c7951f812af2d53d02f11cdf2f392 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:37:43 +0500 Subject: [PATCH 067/155] formating removed-42 --- .../src/comps/comps/jsonComp/jsonEditorComp.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 898825778..33995353c 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -62,9 +62,9 @@ function fixOldDataSecond(oldData: any) { } const childrenMap = { - value: jsonValueExposingStateControl('value', defaultData), + value: jsonValueExposingStateControl("value", defaultData), onEvent: ChangeEventHandlerControl, - label: withDefault(LabelControl, {position: 'column'}), + label: withDefault(LabelControl, { position: "column" }), style: styleControl(JsonEditorStyle), animationStyle: styleControl(AnimationStyle), @@ -119,12 +119,7 @@ let JsonEditorTmpComp = (function () { return props.label({ style: props.style, animationStyle: props.animationStyle, - children: ( - (editContent.current = 'focus')} - /> - ), + children: (editContent.current = "focus")} />, }); }) .setPropertyViewFn((children) => { From 3b49aad31cb8435653dbdcaa92d535d17075c2f7 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:38:33 +0500 Subject: [PATCH 068/155] formating removed-43 --- .../comps/comps/jsonComp/jsonExplorerComp.tsx | 67 ++++++++----------- 1 file changed, 28 insertions(+), 39 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 53f274ec4..0c9478608 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -1,49 +1,38 @@ -import {Section, sectionNames} from 'lowcoder-design'; -import {UICompBuilder, withDefault} from '../../generators'; -import { - NameConfigHidden, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import ReactJson, {type ThemeKeys} from 'react-json-view'; -import {defaultData} from './jsonConstants'; -import styled from 'styled-components'; -import {BoolControl} from 'comps/controls/boolControl'; -import {dropdownControl} from 'comps/controls/dropdownControl'; -import { - ArrayOrJSONObjectControl, - NumberControl, -} from 'comps/controls/codeControl'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {EditorContext} from 'comps/editorState'; -import {useContext} from 'react'; -import { - AnimationStyle, - AnimationStyleType, - styleControl, -} from '@lowcoder-ee/index.sdk'; +import { Section, sectionNames } from "lowcoder-design"; +import { UICompBuilder, withDefault } from "../../generators"; +import { NameConfigHidden, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import ReactJson, { type ThemeKeys } from "react-json-view"; +import { defaultData } from "./jsonConstants"; +import styled from "styled-components"; +import { BoolControl } from "comps/controls/boolControl"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeControl"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { EditorContext } from "comps/editorState"; +import { useContext } from "react"; +import { AnimationStyle, AnimationStyleType, styleControl } from "@lowcoder-ee/index.sdk"; /** * JsonExplorer Comp */ const themeOptions = [ - {label: trans('jsonExplorer.default'), value: 'shapeshifter:inverted'}, - {label: trans('jsonExplorer.defaultDark'), value: 'shapeshifter'}, - {label: trans('jsonExplorer.neutralLight'), value: 'grayscale:inverted'}, - {label: trans('jsonExplorer.neutralDark'), value: 'grayscale'}, - {label: trans('jsonExplorer.azure'), value: 'apathy:inverted'}, - {label: trans('jsonExplorer.darkBlue'), value: 'flat'}, + { label: trans("jsonExplorer.default"), value: "shapeshifter:inverted" }, + { label: trans("jsonExplorer.defaultDark"), value: "shapeshifter" }, + { label: trans("jsonExplorer.neutralLight"), value: "grayscale:inverted" }, + { label: trans("jsonExplorer.neutralDark"), value: "grayscale" }, + { label: trans("jsonExplorer.azure"), value: "apathy:inverted" }, + { label: trans("jsonExplorer.darkBlue"), value: "flat" }, ]; const bgColorMap = { - 'shapeshifter:inverted': '#ffffff', - shapeshifter: '#000000', - 'grayscale:inverted': '#ffffff', - grayscale: '#000000', - 'apathy:inverted': '#efffff', - flat: '#2c3e50', + "shapeshifter:inverted": "#ffffff", + shapeshifter: "#000000", + "grayscale:inverted": "#ffffff", + grayscale: "#000000", + "apathy:inverted": "#efffff", + flat: "#2c3e50", }; const JsonExplorerContainer = styled.div<{ @@ -68,7 +57,7 @@ let JsonExplorerTmpComp = (function () { indent: withDefault(NumberControl, 4), expandToggle: BoolControl.DEFAULT_TRUE, theme: dropdownControl(themeOptions, 'shapeshifter:inverted'), - animationStyle: styleControl(AnimationStyle), + animationStyle:styleControl(AnimationStyle), }; return new UICompBuilder(childrenMap, (props) => ( Date: Sun, 19 May 2024 01:43:12 +0500 Subject: [PATCH 069/155] formating removed-44 --- .../comps/comps/jsonComp/jsonExplorerComp.tsx | 25 ++++++------------- 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 0c9478608..c0ed71fae 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -42,7 +42,7 @@ const JsonExplorerContainer = styled.div<{ ${(props) => props.$animationStyle} height: 100%; overflow-y: scroll; - background-color: ${(props) => bgColorMap[props.$theme] || '#ffffff'}; + background-color: ${(props) => bgColorMap[props.$theme] || "#ffffff"}; border: 1px solid #d7d9e0; border-radius: 4px; padding: 10px; @@ -50,10 +50,7 @@ const JsonExplorerContainer = styled.div<{ let JsonExplorerTmpComp = (function () { const childrenMap = { - value: withDefault( - ArrayOrJSONObjectControl, - JSON.stringify(defaultData, null, 2) - ), + value: withDefault(ArrayOrJSONObjectControl, JSON.stringify(defaultData, null, 2)), indent: withDefault(NumberControl, 4), expandToggle: BoolControl.DEFAULT_TRUE, theme: dropdownControl(themeOptions, 'shapeshifter:inverted'), @@ -78,27 +75,19 @@ let JsonExplorerTmpComp = (function () { return ( <>
- {children.value.propertyView({ - label: trans('export.jsonEditorDesc'), - })} + {children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{hiddenPropertyView(children)} - {children.expandToggle.propertyView({ - label: trans('jsonExplorer.expandToggle'), - })} + {children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })}
)} - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
- {children.indent.propertyView({ - label: trans('jsonExplorer.indent'), - })} + {children.indent.propertyView({ label: trans("jsonExplorer.indent") })}
)} From 1b812ee60c2fc4babac787a2c7defafbc72100de Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:45:35 +0500 Subject: [PATCH 070/155] formating removed-45 --- .../lowcoder/src/comps/comps/navComp/navComp.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index dc46fd0b9..94e1d00c6 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -36,20 +36,13 @@ type IProps = { $borderColor: string; $borderWidth: string; $borderRadius: string; - $animationStyle: AnimationStyleType; + $animationStyle:AnimationStyleType; }; const Wrapper = styled('div')< - Pick< - IProps, - | '$bgColor' - | '$borderColor' - | '$borderWidth' - | '$borderRadius' - | '$animationStyle' - > ->` - ${(props) => props.$animationStyle} + Pick + >` +${props=>props.$animationStyle} height: 100%; border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'}; From 9ed0c5226e73fb6ff64b06d8ddc5a026098aaea0 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:50:11 +0500 Subject: [PATCH 071/155] formating removed-46 --- .../src/comps/comps/navComp/navComp.tsx | 41 ++++++++----------- 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 94e1d00c6..1e3336261 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -1,34 +1,27 @@ -import { - NameConfig, - NameConfigHidden, - withExposingConfigs, -} from 'comps/generators/withExposing'; -import {UICompBuilder, withDefault} from 'comps/generators'; -import {Section, sectionNames} from 'lowcoder-design'; +import { NameConfig, NameConfigHidden,withExposingConfigs } from 'comps/generators/withExposing'; +import { UICompBuilder, withDefault } from 'comps/generators'; +import { Section, sectionNames } from 'lowcoder-design'; import styled from 'styled-components'; -import { - clickEvent, - eventHandlerControl, -} from 'comps/controls/eventHandlerControl'; -import {StringControl} from 'comps/controls/codeControl'; -import {alignWithJustifyControl} from 'comps/controls/alignControl'; -import {navListComp} from './navItemComp'; -import {menuPropertyView} from './components/MenuItemList'; -import {default as DownOutlined} from '@ant-design/icons/DownOutlined'; -import {default as Dropdown} from 'antd/es/dropdown'; -import {default as Menu, MenuProps} from 'antd/es/menu'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; -import {styleControl} from 'comps/controls/styleControl'; +import { clickEvent,eventHandlerControl } from 'comps/controls/eventHandlerControl'; +import { StringControl } from 'comps/controls/codeControl'; +import { alignWithJustifyControl } from 'comps/controls/alignControl'; +import { navListComp } from './navItemComp'; +import { menuPropertyView } from './components/MenuItemList'; +import { default as DownOutlined } from '@ant-design/icons/DownOutlined'; +import { default as Dropdown } from 'antd/es/dropdown'; +import { default as Menu, MenuProps } from 'antd/es/menu'; +import { migrateOldData } from 'comps/generators/simpleGenerators'; +import { styleControl } from 'comps/controls/styleControl'; import { AnimationStyle, AnimationStyleType, NavigationStyle, } from 'comps/controls/styleControlConstants'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; +import { hiddenPropertyView } from 'comps/utils/propertyUtils'; +import { trans } from 'i18n'; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from 'react'; +import { EditorContext } from 'comps/editorState'; type IProps = { $justify: boolean; From a5304e19a022a5a525747d4349082f0ee1b2b98a Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:51:03 +0500 Subject: [PATCH 072/155] formating removed-47 --- .../src/comps/comps/navComp/navComp.tsx | 112 +++++++++--------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 1e3336261..35b236aa8 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -1,27 +1,27 @@ -import { NameConfig, NameConfigHidden,withExposingConfigs } from 'comps/generators/withExposing'; -import { UICompBuilder, withDefault } from 'comps/generators'; -import { Section, sectionNames } from 'lowcoder-design'; -import styled from 'styled-components'; -import { clickEvent,eventHandlerControl } from 'comps/controls/eventHandlerControl'; -import { StringControl } from 'comps/controls/codeControl'; -import { alignWithJustifyControl } from 'comps/controls/alignControl'; -import { navListComp } from './navItemComp'; -import { menuPropertyView } from './components/MenuItemList'; -import { default as DownOutlined } from '@ant-design/icons/DownOutlined'; -import { default as Dropdown } from 'antd/es/dropdown'; -import { default as Menu, MenuProps } from 'antd/es/menu'; -import { migrateOldData } from 'comps/generators/simpleGenerators'; -import { styleControl } from 'comps/controls/styleControl'; +import { NameConfig, NameConfigHidden,withExposingConfigs } from "comps/generators/withExposing"; +import { UICompBuilder, withDefault } from "comps/generators"; +import { Section, sectionNames } from "lowcoder-design"; +import styled from "styled-components"; +import { clickEvent,eventHandlerControl } from "comps/controls/eventHandlerControl"; +import { StringControl } from "comps/controls/codeControl"; +import { alignWithJustifyControl } from "comps/controls/alignControl"; +import { navListComp } from "./navItemComp"; +import { menuPropertyView } from "./components/MenuItemList"; +import { default as DownOutlined } from "@ant-design/icons/DownOutlined"; +import { default as Dropdown } from "antd/es/dropdown"; +import { default as Menu, MenuProps } from "antd/es/menu"; +import { migrateOldData } from "comps/generators/simpleGenerators"; +import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, NavigationStyle, -} from 'comps/controls/styleControlConstants'; -import { hiddenPropertyView } from 'comps/utils/propertyUtils'; -import { trans } from 'i18n'; +} from "comps/controls/styleControlConstants"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; -import { useContext } from 'react'; -import { EditorContext } from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; type IProps = { $justify: boolean; @@ -32,24 +32,24 @@ type IProps = { $animationStyle:AnimationStyleType; }; -const Wrapper = styled('div')< - Pick +const Wrapper = styled("div")< + Pick >` ${props=>props.$animationStyle} height: 100%; border-radius: ${(props) => - props.$borderRadius ? props.$borderRadius : '2px'}; + props.$borderRadius ? props.$borderRadius : "2px"}; box-sizing: border-box; - border: ${(props) => (props.$borderWidth ? `${props.$borderWidth}` : '1px')} + border: ${(props) => (props.$borderWidth ? `${props.$borderWidth}` : "1px")} solid ${(props) => props.$borderColor}; background-color: ${(props) => props.$bgColor}; `; -const NavInner = styled('div')>` +const NavInner = styled("div")>` // margin: 0 -16px; height: 100%; display: flex; - justify-content: ${(props) => (props.$justify ? 'space-between' : 'left')}; + justify-content: ${(props) => (props.$justify ? "space-between" : "left")}; `; const Item = styled.div<{ @@ -67,18 +67,18 @@ const Item = styled.div<{ }>` height: 30px; line-height: 30px; - padding: ${(props) => (props.$padding ? props.$padding : '0 16px')}; + padding: ${(props) => (props.$padding ? props.$padding : "0 16px")}; color: ${(props) => (props.$active ? props.$activeColor : props.$color)}; font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)}; font-family: ${(props) => - props.$fontFamily ? props.$fontFamily : 'sans-serif'}; - font-style: ${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')}; - font-size: ${(props) => (props.$textSize ? props.$textSize : '14px')}; + props.$fontFamily ? props.$fontFamily : "sans-serif"}; + font-style: ${(props) => (props.$fontStyle ? props.$fontStyle : "normal")}; + font-size: ${(props) => (props.$textSize ? props.$textSize : "14px")}; text-transform: ${(props) => - props.$textTransform ? props.$textTransform : ''}; + props.$textTransform ? props.$textTransform : ""}; text-decoration: ${(props) => - props.$textDecoration ? props.$textDecoration : ''}; - margin: ${(props) => (props.$margin ? props.$margin : '0px')}; + props.$textDecoration ? props.$textDecoration : ""}; + margin: ${(props) => (props.$margin ? props.$margin : "0px")}; &:hover { color: ${(props) => props.$activeColor}; @@ -120,10 +120,10 @@ const logoEventHandlers = [clickEvent]; function fixOldStyleData(oldData: any) { if ( oldData && - (oldData.hasOwnProperty('accentColor') || - oldData.hasOwnProperty('backgroundColor') || - oldData.hasOwnProperty('borderColor') || - oldData.hasOwnProperty('color')) + (oldData.hasOwnProperty("accentColor") || + oldData.hasOwnProperty("backgroundColor") || + oldData.hasOwnProperty("borderColor") || + oldData.hasOwnProperty("color")) ) { return { text: oldData.color, @@ -138,14 +138,14 @@ function fixOldStyleData(oldData: any) { const childrenMap = { logoUrl: StringControl, logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [ - {name: 'click'}, + {name: "click"}, ]), horizontalAlignment: alignWithJustifyControl(), style: migrateOldData(styleControl(NavigationStyle), fixOldStyleData), animationStyle: styleControl(AnimationStyle), items: withDefault(navListComp(), [ { - label: trans('menuItem') + ' 1', + label: trans("menuItem") + " 1", }, ]), }; @@ -165,7 +165,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const subMenuItems: Array<{key: string; label: string}> = []; const subMenuSelectedKeys: Array = []; visibleSubItems.forEach((subItem, index) => { - const key = index + ''; + const key = index + ""; subItem.children.active.getView() && subMenuSelectedKeys.push(key); subMenuItems.push({ key: key, @@ -186,7 +186,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { $textTransform={props.style.textTransform} $textDecoration={props.style.textDecoration} $margin={props.style.margin} - onClick={() => onEvent('click')} + onClick={() => onEvent("click")} > {label} {items.length > 0 && } @@ -197,7 +197,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { { const {onEvent: onSubEvent} = items[Number(e.key)]?.getView(); - onSubEvent('click'); + onSubEvent("click"); }} selectedKeys={subMenuSelectedKeys} items={subMenuItems} @@ -214,7 +214,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { ); - const justify = props.horizontalAlignment === 'justify'; + const justify = props.horizontalAlignment === "justify"; return ( { > {props.logoUrl && ( - props.logoEvent('click')}> + props.logoEvent("click")}> LOGO )} @@ -246,38 +246,38 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {menuPropertyView(children.items)}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || + useContext(EditorContext).editorModeStatus === "both") && (
{hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || + useContext(EditorContext).editorModeStatus === "both") && (
{children.horizontalAlignment.propertyView({ - label: trans('navigation.horizontalAlignment'), + label: trans("navigation.horizontalAlignment"), radioButton: true, })} {hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || + useContext(EditorContext).editorModeStatus === "both") && (
{children.logoUrl.propertyView({ - label: trans('navigation.logoURL'), - tooltip: trans('navigation.logoURLDesc'), + label: trans("navigation.logoURL"), + tooltip: trans("navigation.logoURLDesc"), })} {children.logoUrl.getView() && children.logoEvent.propertyView({inline: true})}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || + useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.style.getPropertyView()} @@ -293,7 +293,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { .build(); export const NavComp = withExposingConfigs(NavCompBase, [ - new NameConfig('logoUrl', trans('navigation.logoURLDesc')), + new NameConfig("logoUrl", trans("navigation.logoURLDesc")), NameConfigHidden, - new NameConfig('items', trans('navigation.itemsDesc')), + new NameConfig("items", trans("navigation.itemsDesc")), ]); From d8417876586f097ec1668be97abc7f2cee56e65f Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:57:08 +0500 Subject: [PATCH 073/155] formating removed-48 --- .../src/comps/comps/navComp/navComp.tsx | 77 ++++++++----------- 1 file changed, 31 insertions(+), 46 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 35b236aa8..c4c01a151 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -1,8 +1,8 @@ -import { NameConfig, NameConfigHidden,withExposingConfigs } from "comps/generators/withExposing"; +import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { UICompBuilder, withDefault } from "comps/generators"; import { Section, sectionNames } from "lowcoder-design"; import styled from "styled-components"; -import { clickEvent,eventHandlerControl } from "comps/controls/eventHandlerControl"; +import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; import { StringControl } from "comps/controls/codeControl"; import { alignWithJustifyControl } from "comps/controls/alignControl"; import { navListComp } from "./navItemComp"; @@ -37,15 +37,13 @@ const Wrapper = styled("div")< >` ${props=>props.$animationStyle} height: 100%; - border-radius: ${(props) => - props.$borderRadius ? props.$borderRadius : "2px"}; + border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'}; box-sizing: border-box; - border: ${(props) => (props.$borderWidth ? `${props.$borderWidth}` : "1px")} - solid ${(props) => props.$borderColor}; + border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor}; background-color: ${(props) => props.$bgColor}; `; -const NavInner = styled("div")>` +const NavInner = styled("div") >` // margin: 0 -16px; height: 100%; display: flex; @@ -62,23 +60,20 @@ const Item = styled.div<{ $textSize: string; $margin: string; $padding: string; - $textTransform: string; - $textDecoration: string; + $textTransform:string; + $textDecoration:string; }>` height: 30px; line-height: 30px; - padding: ${(props) => (props.$padding ? props.$padding : "0 16px")}; + padding: ${(props) => props.$padding ? props.$padding : '0 16px'}; color: ${(props) => (props.$active ? props.$activeColor : props.$color)}; font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)}; - font-family: ${(props) => - props.$fontFamily ? props.$fontFamily : "sans-serif"}; - font-style: ${(props) => (props.$fontStyle ? props.$fontStyle : "normal")}; - font-size: ${(props) => (props.$textSize ? props.$textSize : "14px")}; - text-transform: ${(props) => - props.$textTransform ? props.$textTransform : ""}; - text-decoration: ${(props) => - props.$textDecoration ? props.$textDecoration : ""}; - margin: ${(props) => (props.$margin ? props.$margin : "0px")}; + font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')}; + font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')}; + font-size:${(props) => (props.$textSize ? props.$textSize : '14px')}; + text-transform:${(props) => (props.$textTransform ? props.$textTransform : '')}; + text-decoration:${(props) => (props.$textDecoration ? props.$textDecoration : '')}; + margin:${(props) => props.$margin ? props.$margin : '0px'}; &:hover { color: ${(props) => props.$activeColor}; @@ -101,14 +96,14 @@ const LogoWrapper = styled.div` } `; -const ItemList = styled.div<{$align: string}>` +const ItemList = styled.div<{ $align: string }>` flex: 1; display: flex; flex-direction: row; justify-content: ${(props) => props.$align}; `; -const StyledMenu = styled(Menu)` +const StyledMenu = styled(Menu) ` &.ant-dropdown-menu { min-width: 160px; } @@ -137,9 +132,7 @@ function fixOldStyleData(oldData: any) { const childrenMap = { logoUrl: StringControl, - logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [ - {name: "click"}, - ]), + logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]), horizontalAlignment: alignWithJustifyControl(), style: migrateOldData(styleControl(NavigationStyle), fixOldStyleData), animationStyle: styleControl(AnimationStyle), @@ -155,14 +148,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const items = ( <> {data.map((menuItem, idx) => { - const {hidden, label, items, active, onEvent} = menuItem.getView(); + const { hidden, label, items, active, onEvent } = menuItem.getView(); if (hidden) { return null; } - const visibleSubItems = items.filter( - (item) => !item.children.hidden.getView() - ); - const subMenuItems: Array<{key: string; label: string}> = []; + const visibleSubItems = items.filter((item) => !item.children.hidden.getView()); + const subMenuItems: Array<{ key: string; label: string }> = []; const subMenuSelectedKeys: Array = []; visibleSubItems.forEach((subItem, index) => { const key = index + ""; @@ -196,7 +187,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const subMenu = ( { - const {onEvent: onSubEvent} = items[Number(e.key)]?.getView(); + const { onEvent: onSubEvent } = items[Number(e.key)]?.getView(); onSubEvent("click"); }} selectedKeys={subMenuSelectedKeys} @@ -204,7 +195,10 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { /> ); return ( - subMenu}> + subMenu} + > {item} ); @@ -230,11 +224,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { LOGO )} - {!justify ? ( - {items} - ) : ( - items - )} + {!justify ? {items} : items} ); @@ -246,8 +236,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {menuPropertyView(children.items)}
- {(useContext(EditorContext).editorModeStatus === "logic" || - useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{hiddenPropertyView(children)}
@@ -264,15 +253,11 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
)} - {(useContext(EditorContext).editorModeStatus === "logic" || - useContext(EditorContext).editorModeStatus === "both") && ( + + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
- {children.logoUrl.propertyView({ - label: trans("navigation.logoURL"), - tooltip: trans("navigation.logoURLDesc"), - })} - {children.logoUrl.getView() && - children.logoEvent.propertyView({inline: true})} + {children.logoUrl.propertyView({ label: trans("navigation.logoURL"), tooltip: trans("navigation.logoURLDesc") })} + {children.logoUrl.getView() && children.logoEvent.propertyView({ inline: true })}
)} From 41e67aa64e2f157277f1590ab7d2167969b04603 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 01:59:47 +0500 Subject: [PATCH 074/155] formating removed-49 --- .../packages/lowcoder/src/comps/comps/navComp/navComp.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index c4c01a151..12dd1912d 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -74,7 +74,7 @@ const Item = styled.div<{ text-transform:${(props) => (props.$textTransform ? props.$textTransform : '')}; text-decoration:${(props) => (props.$textDecoration ? props.$textDecoration : '')}; margin:${(props) => props.$margin ? props.$margin : '0px'}; - + &:hover { color: ${(props) => props.$activeColor}; cursor: pointer; @@ -242,8 +242,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
)} - {(useContext(EditorContext).editorModeStatus === "layout" || - useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
{children.horizontalAlignment.propertyView({ label: trans("navigation.horizontalAlignment"), @@ -252,7 +251,6 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {hiddenPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
From 9911ed5babde8bb1bf8df88e0ed291a1a216ac8a Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:00:49 +0500 Subject: [PATCH 075/155] formating removed-50 --- client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 12dd1912d..b67f84127 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -251,7 +251,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {hiddenPropertyView(children)}
)} - + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{children.logoUrl.propertyView({ label: trans("navigation.logoURL"), tooltip: trans("navigation.logoURLDesc") })} From d4429d74b63133a727622d59f245c0e5a04ded2c Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:01:48 +0500 Subject: [PATCH 076/155] formating removed-51 --- .../comps/numberInputComp/rangeSliderComp.tsx | 59 ++++++++----------- 1 file changed, 25 insertions(+), 34 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index 56e5fccf5..e6e92f8ee 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -1,34 +1,25 @@ -import {trans} from 'i18n'; -import {Section, sectionNames} from 'lowcoder-design'; -import {numberExposingStateControl} from '../../controls/codeStateControl'; -import {UICompBuilder} from '../../generators'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import { - SliderChildren, - SliderPropertyView, - SliderStyled, - SliderWrapper, -} from './sliderCompConstants'; -import {hasIcon} from 'comps/utils'; -import {BoolControl} from 'comps/controls/boolControl'; +import { trans } from "i18n"; +import { Section, sectionNames } from "lowcoder-design"; +import { numberExposingStateControl } from "../../controls/codeStateControl"; +import { UICompBuilder } from "../../generators"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants"; +import { hasIcon } from "comps/utils"; +import { BoolControl } from "comps/controls/boolControl"; const RangeSliderBasicComp = (function () { const childrenMap = { ...SliderChildren, - start: numberExposingStateControl('start', 10), - end: numberExposingStateControl('end', 60), + start: numberExposingStateControl("start", 10), + end: numberExposingStateControl("end", 60), vertical: BoolControl, }; return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, children: ( { props.start.onChange(start); props.end.onChange(end); - props.onEvent('change'); + props.onEvent("change"); }} /> {hasIcon(props.suffixIcon) && props.suffixIcon} @@ -60,15 +51,15 @@ const RangeSliderBasicComp = (function () { return ( <>
- {children.start.propertyView({label: trans('rangeSlider.start')})} - {children.end.propertyView({label: trans('rangeSlider.end')})} - {children.max.propertyView({label: trans('prop.maximum')})} - {children.min.propertyView({label: trans('prop.minimum')})} + {children.start.propertyView({ label: trans("rangeSlider.start") })} + {children.end.propertyView({ label: trans("rangeSlider.end") })} + {children.max.propertyView({ label: trans("prop.maximum") })} + {children.min.propertyView({ label: trans("prop.minimum") })} {children.step.propertyView({ - label: trans('rangeSlider.step'), - tooltip: trans('rangeSlider.stepTooltip'), + label: trans("rangeSlider.step"), + tooltip: trans("rangeSlider.stepTooltip"), })} - {children.vertical.propertyView({label: trans('slider.vertical')})} + {children.vertical.propertyView({ label: trans("slider.vertical") })}
@@ -79,9 +70,9 @@ const RangeSliderBasicComp = (function () { })(); export const RangeSliderComp = withExposingConfigs(RangeSliderBasicComp, [ - new NameConfig('start', trans('export.sliderStartDesc')), - new NameConfig('end', trans('export.sliderEndDesc')), - new NameConfig('max', trans('export.sliderMaxValueDesc')), - new NameConfig('min', trans('export.sliderMinValueDesc')), + new NameConfig("start", trans("export.sliderStartDesc")), + new NameConfig("end", trans("export.sliderEndDesc")), + new NameConfig("max", trans("export.sliderMaxValueDesc")), + new NameConfig("min", trans("export.sliderMinValueDesc")), ...CommonNameConfig, ]); From 566000663cad6f8088efe2415de8aa4218f71b9a Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:03:09 +0500 Subject: [PATCH 077/155] formating removed-52 --- .../comps/numberInputComp/sliderComp.tsx | 57 +++++++------------ 1 file changed, 22 insertions(+), 35 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index 39735a37a..a73b39a47 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -1,24 +1,12 @@ -import {trans} from 'i18n'; -import {Section, sectionNames} from 'lowcoder-design'; -import {numberExposingStateControl} from '../../controls/codeStateControl'; -import {UICompBuilder} from '../../generators'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import { - formDataChildren, - FormDataPropertyView, -} from '../formComp/formDataConstants'; -import { - SliderChildren, - SliderPropertyView, - SliderStyled, - SliderWrapper, -} from './sliderCompConstants'; -import {hasIcon} from 'comps/utils'; -import {BoolControl} from 'comps/controls/boolControl'; +import { trans } from "i18n"; +import { Section, sectionNames } from "lowcoder-design"; +import { numberExposingStateControl } from "../../controls/codeStateControl"; +import { UICompBuilder } from "../../generators"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; +import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants"; +import { hasIcon } from "comps/utils"; +import { BoolControl } from "comps/controls/boolControl"; const SliderBasicComp = (function () { /** @@ -26,7 +14,7 @@ const SliderBasicComp = (function () { */ const childrenMap = { ...SliderChildren, - value: numberExposingStateControl('value', 60), + value: numberExposingStateControl("value", 60), vertical: BoolControl, ...formDataChildren, }; @@ -34,11 +22,10 @@ const SliderBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, children: ( { e.stopPropagation(); @@ -54,7 +41,7 @@ const SliderBasicComp = (function () { vertical={props.vertical || false} onChange={(e) => { props.value.onChange(e); - props.onEvent('change'); + props.onEvent("change"); }} /> {hasIcon(props.suffixIcon) && props.suffixIcon} @@ -66,14 +53,14 @@ const SliderBasicComp = (function () { return ( <>
- {children.value.propertyView({label: trans('prop.defaultValue')})} - {children.max.propertyView({label: trans('prop.maximum')})} - {children.min.propertyView({label: trans('prop.minimum')})} + {children.value.propertyView({ label: trans("prop.defaultValue") })} + {children.max.propertyView({ label: trans("prop.maximum") })} + {children.min.propertyView({ label: trans("prop.minimum") })} {children.step.propertyView({ - label: trans('slider.step'), - tooltip: trans('slider.stepTooltip'), + label: trans("slider.step"), + tooltip: trans("slider.stepTooltip"), })} - {children.vertical.propertyView({label: trans('slider.vertical')})} + {children.vertical.propertyView({ label: trans("slider.vertical") })}
@@ -84,8 +71,8 @@ const SliderBasicComp = (function () { })(); export const SliderComp = withExposingConfigs(SliderBasicComp, [ - new NameConfig('value', trans('export.sliderValueDesc')), - new NameConfig('max', trans('export.sliderMaxValueDesc')), - new NameConfig('min', trans('export.sliderMinValueDesc')), + new NameConfig("value", trans("export.sliderValueDesc")), + new NameConfig("max", trans("export.sliderMaxValueDesc")), + new NameConfig("min", trans("export.sliderMinValueDesc")), ...CommonNameConfig, ]); From 01b9b3bed84c47f150b8530a3c3e8195ef35adc4 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:05:29 +0500 Subject: [PATCH 078/155] formating removed-53 --- .../numberInputComp/sliderCompConstants.tsx | 108 ++++++------------ 1 file changed, 38 insertions(+), 70 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index 2c602809a..55e91cd64 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -1,34 +1,22 @@ -import {BoolCodeControl, NumberControl} from '../../controls/codeControl'; -import {LabelControl} from '../../controls/labelControl'; -import {withDefault} from '../../generators'; -import {ChangeEventHandlerControl} from '../../controls/eventHandlerControl'; -import {Section, sectionNames} from 'lowcoder-design'; -import {RecordConstructorToComp} from 'lowcoder-core'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - InputFieldStyle, - LabelStyle, - SliderStyle, - SliderStyleType, - heightCalculator, - widthCalculator, -} from 'comps/controls/styleControlConstants'; -import styled, {css} from 'styled-components'; -import {default as Slider} from 'antd/es/slider'; -import {darkenColor, fadeColor} from 'lowcoder-design'; -import { - disabledPropertyView, - hiddenPropertyView, -} from 'comps/utils/propertyUtils'; -import {IconControl} from 'comps/controls/iconControl'; -import {trans} from 'i18n'; +import { BoolCodeControl, NumberControl } from "../../controls/codeControl"; +import { LabelControl } from "../../controls/labelControl"; +import { withDefault } from "../../generators"; +import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; +import { Section, sectionNames } from "lowcoder-design"; +import { RecordConstructorToComp } from "lowcoder-core"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import styled, { css } from "styled-components"; +import { default as Slider } from "antd/es/slider"; +import { darkenColor, fadeColor } from "lowcoder-design"; +import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { IconControl } from "comps/controls/iconControl"; +import { trans } from "i18n"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; const getStyle = (style: SliderStyleType, vertical: boolean) => { - console.log('🚀 ~ getStyle ~ style:', style); return css` &.ant-slider:not(.ant-slider-disabled) { &, @@ -51,12 +39,10 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => { } } .ant-slider-handle:focus { - box-shadow: 0 0 0 5px - ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)}; + box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)}; } - ${vertical && - css` - width: auto; + ${vertical && css` + width: auto; min-height: calc(300px - ${style.margin}); margin: ${style.margin} auto !important; `} @@ -64,53 +50,41 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => { `; }; -export const SliderStyled = styled(Slider)<{ - $style: SliderStyleType; - vertical: boolean; -}>` +export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, vertical: boolean }>` ${(props) => props.$style && getStyle(props.$style, props.vertical)} `; -export const SliderWrapper = styled.div<{ - $style?: SliderStyleType; - vertical: boolean; -}>` +export const SliderWrapper = styled.div<{ vertical: boolean }>` width: 100%; display: inline-flex; align-items: center; justify-content: center; .ant-slider { width: 100%; - rotate: ${(props) => props?.$style?.rotation}; } -`; +` export const SliderChildren = { - max: withDefault(NumberControl, '100'), - min: withDefault(NumberControl, '0'), - step: withDefault(NumberControl, '1'), + max: withDefault(NumberControl, "100"), + min: withDefault(NumberControl, "0"), + step: withDefault(NumberControl, "1"), label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), - labelStyle: styleControl( - LabelStyle.filter( - (style) => ['accent', 'validate'].includes(style.name) === false - ) - ), + labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)), prefixIcon: IconControl, suffixIcon: IconControl, - inputFieldStyle: styleControl(SliderStyle), - animationStyle: styleControl(AnimationStyle), + inputFieldStyle:styleControl(SliderStyle), + animationStyle:styleControl(AnimationStyle) }; export const SliderPropertyView = ( - children: RecordConstructorToComp< - typeof SliderChildren & {hidden: typeof BoolCodeControl} - > + children: RecordConstructorToComp ) => ( <> - {['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && ( + + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -118,20 +92,14 @@ export const SliderPropertyView = (
)} - {['layout', 'both'].includes(useContext(EditorContext).editorModeStatus) && - children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( - <> -
- {children.prefixIcon.propertyView({ - label: trans('button.prefixIcon'), - })} - {children.suffixIcon.propertyView({ - label: trans('button.suffixIcon'), - })} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <>
+ {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} + {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
{children.style.getPropertyView()} From f1ae8d2f60189ac4310cd8937dfbb962d4c59a33 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:06:46 +0500 Subject: [PATCH 079/155] formating removed-54 --- .../lowcoder/src/comps/comps/progressComp.tsx | 84 ++++++++----------- 1 file changed, 33 insertions(+), 51 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx index d5b425d5b..875fe5117 100644 --- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx @@ -1,42 +1,31 @@ -import {default as Progress} from 'antd/es/progress'; -import {Section, sectionNames} from 'lowcoder-design'; -import {numberExposingStateControl} from '../controls/codeStateControl'; -import {BoolControl} from '../controls/boolControl'; -import {UICompBuilder} from '../generators'; -import { - NameConfig, - NameConfigHidden, - withExposingConfigs, -} from '../generators/withExposing'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - AnimationStyleType, - ProgressStyle, - ProgressStyleType, - heightCalculator, - widthCalculator, -} from 'comps/controls/styleControlConstants'; -import styled, {css} from 'styled-components'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; +import { default as Progress } from "antd/es/progress"; +import { Section, sectionNames } from "lowcoder-design"; +import { numberExposingStateControl } from "../controls/codeStateControl"; +import { BoolControl } from "../controls/boolControl"; +import { UICompBuilder } from "../generators"; +import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, AnimationStyleType, ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import styled, { css } from "styled-components"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; const getStyle = (style: ProgressStyleType) => { return css` line-height: 2; .ant-progress-text { color: ${style.text}; - font-style: ${style.fontStyle}; - font-family: ${style.fontFamily}; - font-weight: ${style.textWeight}; - font-size: ${style.textSize}; + font-style:${style.fontStyle}; + font-family:${style.fontFamily}; + font-weight:${style.textWeight}; + font-size:${style.textSize}; } - width: ${widthCalculator(style.margin)}; - height: ${heightCalculator(style.margin)}; - margin: ${style.margin}; + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; + margin: ${style.margin}; padding: ${style.padding}; .ant-progress-inner { background-color: ${style.track}; @@ -55,12 +44,9 @@ const getStyle = (style: ProgressStyleType) => { `; }; -export const ProgressStyled = styled(Progress)<{ - $style: ProgressStyleType; - $animationStyle?: AnimationStyleType; -}>` +export const ProgressStyled = styled(Progress)<{ $style: ProgressStyleType,$animationStyle?: AnimationStyleType}>` ${(props) => props.$style && getStyle(props.$style)} - ${(props) => props.$animationStyle} + ${props=>props.$animationStyle} `; const ProgressBasicComp = (function () { @@ -85,32 +71,28 @@ const ProgressBasicComp = (function () { <>
{children.value.propertyView({ - label: trans('progress.value'), - tooltip: trans('progress.valueTooltip'), + label: trans("progress.value"), + tooltip: trans("progress.valueTooltip"), })}
- {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{hiddenPropertyView(children)} {children.showInfo.propertyView({ - label: trans('progress.showInfo'), + label: trans("progress.showInfo"), })}
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
- {children.style.getPropertyView()} -
+ {children.style.getPropertyView()} +
- {children.animationStyle.getPropertyView()} -
+ {children.animationStyle.getPropertyView()} +
)} @@ -120,7 +102,7 @@ const ProgressBasicComp = (function () { })(); export const ProgressComp = withExposingConfigs(ProgressBasicComp, [ - new NameConfig('value', trans('progress.valueDesc')), - new NameConfig('showInfo', trans('progress.showInfoDesc')), + new NameConfig("value", trans("progress.valueDesc")), + new NameConfig("showInfo", trans("progress.showInfoDesc")), NameConfigHidden, ]); From 75057d880027bd434dbe09f69574c0524fc2f7d5 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:09:09 +0500 Subject: [PATCH 080/155] formating removed-55 --- .../src/comps/comps/progressCircleComp.tsx | 71 ++++++++----------- 1 file changed, 28 insertions(+), 43 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx index 8cc8b58fb..0d262bc32 100644 --- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx @@ -1,43 +1,32 @@ -import {default as Progress} from 'antd/es/progress'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - AnimationStyleType, - CircleProgressStyle, - CircleProgressType, - heightCalculator, - widthCalculator, -} from 'comps/controls/styleControlConstants'; -import styled, {css} from 'styled-components'; -import {Section, sectionNames} from 'lowcoder-design'; -import {numberExposingStateControl} from '../controls/codeStateControl'; -import {UICompBuilder} from '../generators'; -import { - NameConfig, - NameConfigHidden, - withExposingConfigs, -} from '../generators/withExposing'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; +import { default as Progress } from "antd/es/progress"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, AnimationStyleType, CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import styled, { css } from "styled-components"; +import { Section, sectionNames } from "lowcoder-design"; +import { numberExposingStateControl } from "../controls/codeStateControl"; +import { UICompBuilder } from "../generators"; +import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle const getStyle = (style: CircleProgressType) => { return css` - width: ${widthCalculator(style.margin)}; - height: ${heightCalculator(style.margin)}; - margin: ${style.margin}; + width: ${widthCalculator(style.margin)}; + height: ${heightCalculator(style.margin)}; + margin: ${style.margin}; padding: ${style.padding}; - border-radius: ${style.radius}; + border-radius:${style.radius}; .ant-progress-text { color: ${style.text} !important; - font-family: ${style.fontFamily}; - font-style: ${style.fontStyle}; - font-size: ${style.textSize} !important; - font-weight: ${style.textWeight}; + font-family:${style.fontFamily}; + font-style:${style.fontStyle}; + font-size:${style.textSize} !important; + font-weight:${style.textWeight}; } .ant-progress-circle-trail { stroke: ${style.track}; @@ -98,30 +87,26 @@ let ProgressCircleTmpComp = (function () { <>
{children.value.propertyView({ - label: trans('progress.value'), - tooltip: trans('progress.valueTooltip'), + label: trans("progress.value"), + tooltip: trans("progress.valueTooltip"), })}
- {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{hiddenPropertyView(children)}
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
- {children.style.getPropertyView()} + {children.style.getPropertyView()}
- {children.animationStyle.getPropertyView()} + {children.animationStyle.getPropertyView()}
- + )} ); @@ -136,6 +121,6 @@ ProgressCircleTmpComp = class extends ProgressCircleTmpComp { }; export const ProgressCircleComp = withExposingConfigs(ProgressCircleTmpComp, [ - new NameConfig('value', trans('progress.valueDesc')), + new NameConfig("value", trans("progress.valueDesc")), NameConfigHidden, ]); From bcb94bec6344dc0461834e3847ecb0c1883d1957 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:10:21 +0500 Subject: [PATCH 081/155] formating removed-56 --- client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx index 0d262bc32..23ddb8fce 100644 --- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx @@ -67,7 +67,7 @@ export const StyledProgressCircle = styled(Progress)<{ let ProgressCircleTmpComp = (function () { const childrenMap = { - value: numberExposingStateControl('value', 60), + value: numberExposingStateControl("value", 60), // borderRadius property hidden as it's not valid for progress circle style: styleControl(CircleProgressStyle), animationStyle: styleControl(AnimationStyle), From 1fb763343eac52d51a8cc87cc9c91f99c7b51517 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:11:25 +0500 Subject: [PATCH 082/155] formating removed-57 --- .../lowcoder/src/comps/comps/ratingComp.tsx | 110 +++++++----------- 1 file changed, 42 insertions(+), 68 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 8d8fc0cca..81e03b4bf 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -1,41 +1,22 @@ -import {default as Rate} from 'antd/es/rate'; -import styled, {css} from 'styled-components'; -import {Section, sectionNames} from 'lowcoder-design'; -import {NumberControl, BoolCodeControl} from '../controls/codeControl'; -import {BoolControl} from '../controls/boolControl'; -import { - changeEvent, - eventHandlerControl, -} from '../controls/eventHandlerControl'; -import {LabelControl} from '../controls/labelControl'; -import {numberExposingStateControl} from '../controls/codeStateControl'; -import {UICompBuilder, withDefault} from '../generators'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../generators/withExposing'; -import { - formDataChildren, - FormDataPropertyView, -} from './formComp/formDataConstants'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - InputFieldStyle, - LabelStyle, - RatingStyle, - RatingStyleType, -} from 'comps/controls/styleControlConstants'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; -import { - disabledPropertyView, - hiddenPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; - -import {useContext, useEffect, useRef} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { default as Rate } from "antd/es/rate"; +import styled, { css } from "styled-components"; +import { Section, sectionNames } from "lowcoder-design"; +import { NumberControl, BoolCodeControl } from "../controls/codeControl"; +import { BoolControl } from "../controls/boolControl"; +import { changeEvent, eventHandlerControl } from "../controls/eventHandlerControl"; +import { LabelControl } from "../controls/labelControl"; +import { numberExposingStateControl } from "../controls/codeStateControl"; +import { UICompBuilder, withDefault } from "../generators"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; +import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; +import { migrateOldData } from "comps/generators/simpleGenerators"; +import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; + +import { useContext, useEffect, useRef } from "react"; +import { EditorContext } from "comps/editorState"; const EventOptions = [changeEvent] as const; @@ -43,7 +24,7 @@ const EventOptions = [changeEvent] as const; * Compatible with old data 2022-08-23 */ function fixOldData(oldData: any) { - if (oldData && oldData.hasOwnProperty('unChecked')) { + if (oldData && oldData.hasOwnProperty("unChecked")) { return { label: oldData.label, checked: oldData.checked, @@ -73,9 +54,9 @@ const RatingBasicComp = (function () { ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { - const defaultValue = {...props.defaultValue}.value; - const value = {...props.value}.value; - const changeRef = useRef(false); + const defaultValue = { ...props.defaultValue }.value; + const value = { ...props.value }.value; + const changeRef = useRef(false) useEffect(() => { props.value.onChange(defaultValue); @@ -84,15 +65,15 @@ const RatingBasicComp = (function () { useEffect(() => { if (!changeRef.current) return; - props.onEvent('change'); + props.onEvent("change"); changeRef.current = false; }, [value]); return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, children: (
- {children.defaultValue.propertyView({ - label: trans('prop.defaultValue'), - })} + {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })} {children.max.propertyView({ - label: trans('rating.max'), + label: trans("rating.max"), })}
- {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( - <> -
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} -
+ {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <>
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} +
{children.allowHalf.propertyView({ - label: trans('rating.allowHalf'), + label: trans("rating.allowHalf"), })}
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
{children.style.getPropertyView()} @@ -168,8 +142,8 @@ const RatingBasicComp = (function () { })(); export const RatingComp = withExposingConfigs(RatingBasicComp, [ - new NameConfig('value', trans('export.ratingValueDesc')), - new NameConfig('max', trans('export.ratingMaxDesc')), + new NameConfig("value", trans("export.ratingValueDesc")), + new NameConfig("max", trans("export.ratingMaxDesc")), ...CommonNameConfig, ]); @@ -191,6 +165,6 @@ const getStyle = (style: RatingStyleType) => { `; }; -export const RateStyled = styled(Rate)<{$style: RatingStyleType}>` +export const RateStyled = styled(Rate) <{ $style: RatingStyleType }>` ${(props) => props.$style && getStyle(props.$style)} `; From e3f1895fa78e07338448280d23503bc238a20074 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:12:31 +0500 Subject: [PATCH 083/155] formating removed-58 --- client/packages/lowcoder/src/comps/comps/ratingComp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 81e03b4bf..d679f7a07 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -36,9 +36,9 @@ function fixOldData(oldData: any) { const RatingBasicComp = (function () { const childrenMap = { - defaultValue: numberExposingStateControl('defaultValue'), - value: numberExposingStateControl('value'), - max: withDefault(NumberControl, '5'), + defaultValue: numberExposingStateControl("defaultValue"), + value: numberExposingStateControl("value"), + max: withDefault(NumberControl, "5"), label: LabelControl, allowHalf: BoolControl, disabled: BoolCodeControl, From b1f554c45ffbceb8720336697ecfa6093d35f731 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:13:45 +0500 Subject: [PATCH 084/155] formating removed-59 --- .../comps/selectInputComp/cascaderComp.tsx | 103 +++++++----------- 1 file changed, 40 insertions(+), 63 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index 85c9c3b10..095e85f74 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -1,59 +1,38 @@ -import {default as Cascader} from 'antd/es/cascader'; -import { - CascaderStyleType, - ChildrenMultiSelectStyleType, -} from 'comps/controls/styleControlConstants'; -import {blurMethod, focusMethod} from 'comps/utils/methodUtils'; -import {trans} from 'i18n'; -import styled from 'styled-components'; -import {UICompBuilder, withDefault} from '../../generators'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import { - CascaderChildren, - CascaderPropertyView, - defaultDataSource, -} from './cascaderContants'; -import {refMethods} from 'comps/generators/withMethodExposing'; +import { default as Cascader } from "antd/es/cascader"; +import { CascaderStyleType, ChildrenMultiSelectStyleType } from "comps/controls/styleControlConstants"; +import { blurMethod, focusMethod } from "comps/utils/methodUtils"; +import { trans } from "i18n"; +import styled from "styled-components"; +import { UICompBuilder, withDefault } from "../../generators"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants"; +import { refMethods } from "comps/generators/withMethodExposing"; -const CascaderStyle = styled(Cascader)<{ - $style: CascaderStyleType; - $childrenInputFieldStyle: ChildrenMultiSelectStyleType; -}>` +const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>` width: 100%; - font-family: 'Montserrat'; - ${(props) => { - return ( - props.$style && {...props.$style, 'border-radius': props.$style.radius} - ); - }} + font-family:"Montserrat"; + ${(props) => { return props.$style && { ...props.$style, 'border-radius': props.$style.radius } }} `; -const DropdownRenderStyle = styled.div<{ - $childrenInputFieldStyle: ChildrenMultiSelectStyleType; -}>` - background-color: ${(props) => props.$childrenInputFieldStyle?.background}; - border: ${(props) => props.$childrenInputFieldStyle?.border}; - border-style: ${(props) => props.$childrenInputFieldStyle?.borderStyle}; - border-width: ${(props) => props.$childrenInputFieldStyle?.borderWidth}; - border-radius: ${(props) => props.$childrenInputFieldStyle?.radius}; - rotate: ${(props) => props.$childrenInputFieldStyle?.rotation}; - margin: ${(props) => props.$childrenInputFieldStyle?.margin}; - padding: ${(props) => props.$childrenInputFieldStyle?.padding}; - .ant-cascader-menu-item-content { - font-size: ${(props) => props.$childrenInputFieldStyle?.textSize}; - font-style: ${(props) => props.$childrenInputFieldStyle?.fontStyle}; - font-family: ${(props) => props.$childrenInputFieldStyle?.fontFamily}; - font-weight: ${(props) => props.$childrenInputFieldStyle?.textWeight}; - text-transform: ${(props) => props.$childrenInputFieldStyle?.textTransform}; - text-decoration: ${(props) => - props.$childrenInputFieldStyle?.textDecoration}; - color: ${(props) => props.$childrenInputFieldStyle?.text}; - } -`; +const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMultiSelectStyleType }>` + background-color: ${props => props.$childrenInputFieldStyle?.background}; + border: ${props => props.$childrenInputFieldStyle?.border}; + border-style: ${props => props.$childrenInputFieldStyle?.borderStyle}; + border-width: ${props => props.$childrenInputFieldStyle?.borderWidth}; + border-radius: ${props => props.$childrenInputFieldStyle?.radius}; + rotate: ${props => props.$childrenInputFieldStyle?.rotation}; + margin: ${props => props.$childrenInputFieldStyle?.margin}; + padding: ${props => props.$childrenInputFieldStyle?.padding}; + .ant-cascader-menu-item-content{ + font-size: ${props => props.$childrenInputFieldStyle?.textSize}; + font-style: ${props => props.$childrenInputFieldStyle?.fontStyle}; + font-family: ${props => props.$childrenInputFieldStyle?.fontFamily}; + font-weight: ${props => props.$childrenInputFieldStyle?.textWeight}; + text-transform: ${props => props.$childrenInputFieldStyle?.textTransform}; + text-decoration: ${props => props.$childrenInputFieldStyle?.textDecoration}; + color: ${props => props.$childrenInputFieldStyle?.text}; + } +` let CascaderBasicComp = (function () { const childrenMap = CascaderChildren; @@ -62,9 +41,9 @@ let CascaderBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - childrenInputFieldStyle: props.childrenInputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + childrenInputFieldStyle:props.childrenInputFieldStyle, + animationStyle:props.animationStyle, children: ( props.onEvent('focus')} - onBlur={() => props.onEvent('blur')} + onFocus={() => props.onEvent("focus")} + onBlur={() => props.onEvent("blur")} dropdownRender={(menus: React.ReactNode) => ( - - {menus} + + {menus} )} onChange={(value: (string | number)[]) => { props.value.onChange(value as string[]); - props.onEvent('change'); + props.onEvent("change"); }} /> ), @@ -104,7 +81,7 @@ let CascaderBasicComp = (function () { })(); const CascaderComp = withExposingConfigs(CascaderBasicComp, [ - new NameConfig('value', trans('selectInput.valueDesc')), + new NameConfig("value", trans("selectInput.valueDesc")), ...CommonNameConfig, ]); From 695137ac3ded6128f2ca187f2ee2b7083681d6af Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:14:36 +0500 Subject: [PATCH 085/155] formating removed-60 --- .../selectInputComp/cascaderContants.tsx | 60 +++++++------------ 1 file changed, 23 insertions(+), 37 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index e8e3c8391..af7b6074d 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -1,43 +1,33 @@ -import {SelectEventHandlerControl} from '../../controls/eventHandlerControl'; -import {Section, sectionNames} from 'lowcoder-design'; -import {RecordConstructorToComp} from 'lowcoder-core'; -import { - BoolCodeControl, - JSONObjectArrayControl, - StringControl, -} from 'comps/controls/codeControl'; -import {arrayStringExposingStateControl} from 'comps/controls/codeStateControl'; -import {BoolControl} from 'comps/controls/boolControl'; -import {LabelControl} from 'comps/controls/labelControl'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - CascaderStyle, - ChildrenMultiSelectStyle, - InputFieldStyle, - LabelStyle, -} from 'comps/controls/styleControlConstants'; +import { SelectEventHandlerControl } from "../../controls/eventHandlerControl"; +import { Section, sectionNames } from "lowcoder-design"; +import { RecordConstructorToComp } from "lowcoder-core"; +import { BoolCodeControl, JSONObjectArrayControl, StringControl } from "comps/controls/codeControl"; +import { arrayStringExposingStateControl } from "comps/controls/codeStateControl"; +import { BoolControl } from "comps/controls/boolControl"; +import { LabelControl } from "comps/controls/labelControl"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, CascaderStyle, ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { allowClearPropertyView, disabledPropertyView, hiddenPropertyView, placeholderPropertyView, showSearchPropertyView, -} from 'comps/utils/propertyUtils'; -import {i18nObjs, trans} from 'i18n'; -import {RefControl} from 'comps/controls/refControl'; -import {CascaderRef} from 'antd/es/cascader'; +} from "comps/utils/propertyUtils"; +import { i18nObjs, trans } from "i18n"; +import { RefControl } from "comps/controls/refControl"; +import { CascaderRef } from "antd/es/cascader"; -import {MarginControl} from '../../controls/marginControl'; -import {PaddingControl} from '../../controls/paddingControl'; +import { MarginControl } from "../../controls/marginControl"; +import { PaddingControl } from "../../controls/paddingControl"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; -export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, ' '); +export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, " "); export const CascaderChildren = { - value: arrayStringExposingStateControl('value', i18nObjs.cascaderDefult), + value: arrayStringExposingStateControl("value", i18nObjs.cascaderDefult), label: LabelControl, placeholder: StringControl, disabled: BoolCodeControl, @@ -45,18 +35,14 @@ export const CascaderChildren = { allowClear: BoolControl, options: JSONObjectArrayControl, style: styleControl(InputFieldStyle), - labelStyle: styleControl( - LabelStyle.filter( - (style) => ['accent', 'validate'].includes(style.name) === false - ) - ), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), showSearch: BoolControl.DEFAULT_TRUE, viewRef: RefControl, margin: MarginControl, padding: PaddingControl, - inputFieldStyle: styleControl(CascaderStyle), - childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle), - animationStyle: styleControl(AnimationStyle), + inputFieldStyle:styleControl(CascaderStyle), + childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle), + animationStyle:styleControl(AnimationStyle) }; export const CascaderPropertyView = ( From 0bdf34f91cfb6dd215529d6bbe88aef5cee8ff9e Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:18:04 +0500 Subject: [PATCH 086/155] formating removed-61 --- .../selectInputComp/cascaderContants.tsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index af7b6074d..1cddea94b 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -46,18 +46,16 @@ export const CascaderChildren = { }; export const CascaderPropertyView = ( - children: RecordConstructorToComp< - typeof CascaderChildren & {hidden: typeof BoolCodeControl} - > + children: RecordConstructorToComp ) => ( <>
- {children.options.propertyView({label: trans('cascader.options')})} - {children.value.propertyView({label: trans('prop.defaultValue')})} + {children.options.propertyView({ label: trans("cascader.options") })} + {children.value.propertyView({ label: trans("prop.defaultValue") })} {placeholderPropertyView(children)}
- {['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && ( + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -65,19 +63,18 @@ export const CascaderPropertyView = (
)} - {['layout', 'both'].includes(useContext(EditorContext).editorModeStatus) && - children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && ( + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{allowClearPropertyView(children)} {showSearchPropertyView(children)}
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
{children.style.getPropertyView()} From fc7c1253dd065818bc217936088cb1b607c6d402 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:19:14 +0500 Subject: [PATCH 087/155] formating removed-62 --- .../comps/selectInputComp/checkboxComp.tsx | 125 ++++++++---------- 1 file changed, 56 insertions(+), 69 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index ca51d7cea..ac3eb7999 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -1,39 +1,29 @@ -import {default as AntdCheckboxGroup} from 'antd/es/checkbox/Group'; -import {SelectInputOptionControl} from 'comps/controls/optionsControl'; -import {BoolCodeControl} from '../../controls/codeControl'; -import {arrayStringExposingStateControl} from '../../controls/codeStateControl'; -import {LabelControl} from '../../controls/labelControl'; -import {ChangeEventHandlerControl} from '../../controls/eventHandlerControl'; -import {UICompBuilder} from '../../generators'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import styled, {css} from 'styled-components'; +import { default as AntdCheckboxGroup } from "antd/es/checkbox/Group"; +import { SelectInputOptionControl } from "comps/controls/optionsControl"; +import { BoolCodeControl } from "../../controls/codeControl"; +import { arrayStringExposingStateControl } from "../../controls/codeStateControl"; +import { LabelControl } from "../../controls/labelControl"; +import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; +import { UICompBuilder } from "../../generators"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import styled, { css } from "styled-components"; import { selectDivRefMethods, SelectInputInvalidConfig, SelectInputValidationChildren, useSelectInputValidate, -} from './selectInputConstants'; -import {formDataChildren} from '../formComp/formDataConstants'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - CheckboxStyle, - CheckboxStyleType, - InputFieldStyle, - LabelStyle, -} from 'comps/controls/styleControlConstants'; -import {RadioLayoutOptions, RadioPropertyView} from './radioCompConstants'; -import {dropdownControl} from '../../controls/dropdownControl'; -import {ValueFromOption} from 'lowcoder-design'; -import {EllipsisTextCss} from 'lowcoder-design'; -import {trans} from 'i18n'; -import {RefControl} from 'comps/controls/refControl'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; -import {fixOldInputCompData} from '../textInputComp/textInputConstants'; +} from "./selectInputConstants"; +import { formDataChildren } from "../formComp/formDataConstants"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, CheckboxStyle, CheckboxStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants"; +import { dropdownControl } from "../../controls/dropdownControl"; +import { ValueFromOption } from "lowcoder-design"; +import { EllipsisTextCss } from "lowcoder-design"; +import { trans } from "i18n"; +import { RefControl } from "comps/controls/refControl"; +import { migrateOldData } from "comps/generators/simpleGenerators"; +import { fixOldInputCompData } from "../textInputComp/textInputConstants"; export const getStyle = (style: CheckboxStyleType) => { return css` @@ -50,7 +40,7 @@ export const getStyle = (style: CheckboxStyleType) => { .ant-checkbox-inner { background-color: ${style.checkedBackground}; border-color: ${style.checkedBackground}; - border-width: ${!!style.borderWidth ? style.borderWidth : '2px'}; + border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; &::after { border-color: ${style.checked}; @@ -59,49 +49,47 @@ export const getStyle = (style: CheckboxStyleType) => { &::after { border-color: ${style.checkedBackground}; - border-width: ${!!style.borderWidth ? style.borderWidth : '2px'}; + border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; border-radius: ${style.radius}; } } - + .ant-checkbox-inner { border-radius: ${style.radius}; background-color: ${style.uncheckedBackground}; border-color: ${style.uncheckedBorder}; - border-width: ${!!style.borderWidth ? style.borderWidth : '2px'}; + border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; } - - &:hover .ant-checkbox-inner, + + &:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input + ant-checkbox-inner { - background-color: ${style.hoverBackground - ? style.hoverBackground - : '#fff'}; + background-color:${style.hoverBackground ? style.hoverBackground : '#fff'}; } - &:hover .ant-checkbox-checked .ant-checkbox-inner, + &:hover .ant-checkbox-checked .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input + ant-checkbox-inner { - background-color: ${style.hoverBackground - ? style.hoverBackground - : '#ffff'}; + background-color:${style.hoverBackground ? style.hoverBackground : '#ffff'}; } &:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner { border-color: ${style.checkedBackground}; - border-width: ${!!style.borderWidth ? style.borderWidth : '2px'}; + border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; } } + + .ant-checkbox-group-item { - font-family: ${style.fontFamily}; - font-size: ${style.textSize}; - font-weight: ${style.textWeight}; - font-style: ${style.fontStyle}; - text-transform: ${style.textTransform}; - text-decoration: ${style.textDecoration}; + font-family:${style.fontFamily}; + font-size:${style.textSize}; + font-weight:${style.textWeight}; + font-style:${style.fontStyle}; + text-transform:${style.textTransform}; + text-decoration:${style.textDecoration}; } .ant-checkbox-wrapper { padding: ${style.padding}; @@ -113,25 +101,25 @@ export const getStyle = (style: CheckboxStyleType) => { `; }; -const CheckboxGroup = styled(AntdCheckboxGroup)<{ +const CheckboxGroup = styled(AntdCheckboxGroup) <{ $style: CheckboxStyleType; $layout: ValueFromOption; }>` min-height: 32px; ${(props) => props.$style && getStyle(props.$style)} ${(props) => { - if (props.$layout === 'horizontal') { + if (props.$layout === "horizontal") { return css` display: flex; align-items: center; flex-wrap: wrap; `; - } else if (props.$layout === 'vertical') { + } else if (props.$layout === "vertical") { return css` display: flex; flex-direction: column; `; - } else if (props.$layout === 'auto_columns') { + } else if (props.$layout === "auto_columns") { return css` break-inside: avoid; columns: 160px; @@ -142,33 +130,32 @@ const CheckboxGroup = styled(AntdCheckboxGroup)<{ let CheckboxBasicComp = (function () { const childrenMap = { - defaultValue: arrayStringExposingStateControl('defaultValue'), - value: arrayStringExposingStateControl('value'), + defaultValue: arrayStringExposingStateControl("defaultValue"), + value: arrayStringExposingStateControl("value"), label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectInputOptionControl, style: styleControl(InputFieldStyle), - labelStyle: styleControl( - LabelStyle.filter( - (style) => ['accent', 'validate'].includes(style.name) === false - ) - ), - layout: dropdownControl(RadioLayoutOptions, 'horizontal'), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), + layout: dropdownControl(RadioLayoutOptions, "horizontal"), viewRef: RefControl, - inputFieldStyle: styleControl(CheckboxStyle), - animationStyle: styleControl(AnimationStyle), + inputFieldStyle:styleControl(CheckboxStyle), + animationStyle:styleControl(AnimationStyle), ...SelectInputValidationChildren, ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { - const [validateState, handleChange] = useSelectInputValidate(props); + const [ + validateState, + handleChange, + ] = useSelectInputValidate(props); return props.label({ required: props.required, style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, children: ( Date: Sun, 19 May 2024 02:19:55 +0500 Subject: [PATCH 088/155] formating removed-63 --- .../comps/comps/selectInputComp/radioComp.tsx | 67 +++++++++---------- 1 file changed, 30 insertions(+), 37 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx index 53af5f5a5..dfc5ed714 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx @@ -1,26 +1,18 @@ -import {default as AntdRadioGroup} from 'antd/es/radio/group'; -import {RadioStyleType} from 'comps/controls/styleControlConstants'; -import styled, {css} from 'styled-components'; -import {UICompBuilder} from '../../generators'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import { - RadioChildrenMap, - RadioLayoutOptions, - RadioPropertyView, -} from './radioCompConstants'; +import { default as AntdRadioGroup } from "antd/es/radio/group"; +import { RadioStyleType } from "comps/controls/styleControlConstants"; +import styled, { css } from "styled-components"; +import { UICompBuilder } from "../../generators"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import { RadioChildrenMap, RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants"; import { selectDivRefMethods, SelectInputInvalidConfig, useSelectInputValidate, -} from './selectInputConstants'; -import {EllipsisTextCss, ValueFromOption} from 'lowcoder-design'; -import {trans} from 'i18n'; -import {fixOldInputCompData} from '../textInputComp/textInputConstants'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; +} from "./selectInputConstants"; +import { EllipsisTextCss, ValueFromOption } from "lowcoder-design"; +import { trans } from "i18n"; +import { fixOldInputCompData } from "../textInputComp/textInputConstants"; +import { migrateOldData } from "comps/generators/simpleGenerators"; const getStyle = (style: RadioStyleType) => { return css` @@ -31,12 +23,12 @@ const getStyle = (style: RadioStyleType) => { padding: ${style.padding}; span:not(.ant-radio) { ${EllipsisTextCss}; - font-family: ${style.fontFamily}; - font-size: ${style.textSize}; - font-weight: ${style.textWeight}; - font-style: ${style.fontStyle}; - text-transform: ${style.textTransform}; - text-decoration: ${style.textDecoration}; + font-family:${style.fontFamily}; + font-size:${style.textSize}; + font-weight:${style.textWeight}; + font-style:${style.fontStyle}; + text-transform:${style.textTransform}; + text-decoration:${style.textDecoration}; } .ant-radio-checked { @@ -53,18 +45,16 @@ const getStyle = (style: RadioStyleType) => { .ant-radio-inner { background-color: ${style.uncheckedBackground}; border-color: ${style.uncheckedBorder}; - border-width: ${style.borderWidth}; + border-width:${style.borderWidth}; &::after { background-color: ${style.checked}; } } - &:hover .ant-radio-inner, + &:hover .ant-radio-inner, .ant-radio:hover .ant-radio-inner, .ant-radio-input + ant-radio-inner { - background-color: ${style.hoverBackground - ? style.hoverBackground - : '#ffff'}; + background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'}; } &:hover .ant-radio-inner, @@ -85,18 +75,18 @@ const Radio = styled(AntdRadioGroup)<{ ${(props) => props.$style && getStyle(props.$style)} ${(props) => { - if (props.$layout === 'horizontal') { + if (props.$layout === "horizontal") { return css` display: flex; align-items: center; flex-wrap: wrap; `; - } else if (props.$layout === 'vertical') { + } else if (props.$layout === "vertical") { return css` display: flex; flex-direction: column; `; - } else if (props.$layout === 'auto_columns') { + } else if (props.$layout === "auto_columns") { return css` break-inside: avoid; columns: 160px; @@ -107,13 +97,16 @@ const Radio = styled(AntdRadioGroup)<{ let RadioBasicComp = (function () { return new UICompBuilder(RadioChildrenMap, (props) => { - const [validateState, handleChange] = useSelectInputValidate(props); + const [ + validateState, + handleChange, + ] = useSelectInputValidate(props); return props.label({ required: props.required, style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, children: ( Date: Sun, 19 May 2024 02:20:37 +0500 Subject: [PATCH 089/155] formating removed-64 --- .../selectInputComp/radioCompConstants.tsx | 112 +++++++----------- 1 file changed, 44 insertions(+), 68 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx index 113d05c4f..8ef5159be 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx @@ -1,43 +1,32 @@ -import {RecordConstructorToComp} from 'lowcoder-core'; -import {BoolCodeControl} from '../../controls/codeControl'; -import {LabelControl} from '../../controls/labelControl'; +import { RecordConstructorToComp } from "lowcoder-core"; +import { BoolCodeControl } from "../../controls/codeControl"; +import { LabelControl } from "../../controls/labelControl"; import { arrayStringExposingStateControl, stringExposingStateControl, -} from '../../controls/codeStateControl'; -import {Section, sectionNames} from 'lowcoder-design'; -import {SelectInputOptionControl} from '../../controls/optionsControl'; -import {ChangeEventHandlerControl} from '../../controls/eventHandlerControl'; +} from "../../controls/codeStateControl"; +import { Section, sectionNames } from "lowcoder-design"; +import { SelectInputOptionControl } from "../../controls/optionsControl"; +import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; import { SelectInputValidationChildren, SelectInputValidationSection, -} from './selectInputConstants'; -import { - formDataChildren, - FormDataPropertyView, -} from '../formComp/formDataConstants'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - InputFieldStyle, - LabelStyle, - RadioStyle, -} from 'comps/controls/styleControlConstants'; -import {dropdownControl} from '../../controls/dropdownControl'; -import { - hiddenPropertyView, - disabledPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {RefControl} from 'comps/controls/refControl'; +} from "./selectInputConstants"; +import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, InputFieldStyle, LabelStyle, RadioStyle } from "comps/controls/styleControlConstants"; +import { dropdownControl } from "../../controls/dropdownControl"; +import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { RefControl } from "comps/controls/refControl"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; export const RadioLayoutOptions = [ - {label: trans('radio.horizontal'), value: 'horizontal'}, - {label: trans('radio.vertical'), value: 'vertical'}, - {label: trans('radio.autoColumns'), value: 'auto_columns'}, + { label: trans("radio.horizontal"), value: "horizontal" }, + { label: trans("radio.vertical"), value: "vertical" }, + { label: trans("radio.autoColumns"), value: "auto_columns" }, ] as const; export const RadioChildrenMap = { @@ -59,7 +48,7 @@ export const RadioChildrenMap = { export const RadioPropertyView = ( children: RecordConstructorToComp< - typeof RadioChildrenMap & {hidden: typeof BoolCodeControl} & { + typeof RadioChildrenMap & { hidden: typeof BoolCodeControl } & { defaultValue: | ReturnType | ReturnType; @@ -72,57 +61,44 @@ export const RadioPropertyView = ( <>
{children.options.propertyView({})} - {children.defaultValue.propertyView({label: trans('prop.defaultValue')})} + {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
- {['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && ( - <> - - -
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} -
- + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <> + +
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} +
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{children.layout.propertyView({ - label: trans('radio.options'), + label: trans("radio.options"), tooltip: ( -
-
{trans('radio.horizontalTooltip')}
-
{trans('radio.verticalTooltip')}
-
{trans('radio.autoColumnsTooltip')}
+
+
{trans("radio.horizontalTooltip")}
+
{trans("radio.verticalTooltip")}
+
{trans("radio.autoColumnsTooltip")}
), })}
)} - {['layout', 'both'].includes(useContext(EditorContext).editorModeStatus) && - children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> -
- {children.style.getPropertyView()} -
-
- {children.labelStyle.getPropertyView()} -
-
- {children.inputFieldStyle.getPropertyView()} -
-
- {children.animationStyle.getPropertyView()} -
+
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
)} From ea633856b8438573a28f58526e6ff5eeac50cd87 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:22:00 +0500 Subject: [PATCH 090/155] formating removed-65 --- .../comps/comps/selectInputComp/radioCompConstants.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx index 8ef5159be..88ddc191c 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx @@ -30,15 +30,15 @@ export const RadioLayoutOptions = [ ] as const; export const RadioChildrenMap = { - defaultValue: stringExposingStateControl('value'), - value: stringExposingStateControl('value'), + defaultValue: stringExposingStateControl("value"), + value: stringExposingStateControl("value"), label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectInputOptionControl, style: styleControl(InputFieldStyle), - labelStyle: styleControl(LabelStyle), - layout: dropdownControl(RadioLayoutOptions, 'horizontal'), + labelStyle:styleControl(LabelStyle), + layout: dropdownControl(RadioLayoutOptions, "horizontal"), viewRef: RefControl, inputFieldStyle: styleControl(RadioStyle), animationStyle: styleControl(AnimationStyle), From d2e9ac864adba2ac276bdeaea358a567729803d3 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:23:00 +0500 Subject: [PATCH 091/155] formating removed-66 --- .../selectInputComp/segmentedControl.tsx | 153 ++++++++---------- 1 file changed, 64 insertions(+), 89 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx index 31bceb929..2b97a324b 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx @@ -1,46 +1,33 @@ -import {default as AntdSegmented} from 'antd/es/segmented'; -import {BoolCodeControl} from 'comps/controls/codeControl'; -import {stringExposingStateControl} from 'comps/controls/codeStateControl'; -import {ChangeEventHandlerControl} from 'comps/controls/eventHandlerControl'; -import {LabelControl} from 'comps/controls/labelControl'; -import {SelectOptionControl} from 'comps/controls/optionsControl'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - SegmentStyle, - SegmentStyleType, -} from 'comps/controls/styleControlConstants'; -import styled, {css} from 'styled-components'; -import {UICompBuilder} from '../../generators'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import { - formDataChildren, - FormDataPropertyView, -} from '../formComp/formDataConstants'; +import { default as AntdSegmented } from "antd/es/segmented"; +import { BoolCodeControl } from "comps/controls/codeControl"; +import { stringExposingStateControl } from "comps/controls/codeStateControl"; +import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; +import { LabelControl } from "comps/controls/labelControl"; +import { SelectOptionControl } from "comps/controls/optionsControl"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, SegmentStyle, SegmentStyleType } from "comps/controls/styleControlConstants"; +import styled, { css } from "styled-components"; +import { UICompBuilder } from "../../generators"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; +import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; import { selectDivRefMethods, SelectInputInvalidConfig, SelectInputValidationChildren, SelectInputValidationSection, useSelectInputValidate, -} from './selectInputConstants'; -import {Section, sectionNames} from 'lowcoder-design'; -import { - hiddenPropertyView, - disabledPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {hasIcon} from 'comps/utils'; -import {RefControl} from 'comps/controls/refControl'; +} from "./selectInputConstants"; +import { Section, sectionNames } from "lowcoder-design"; +import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { hasIcon } from "comps/utils"; +import { RefControl } from "comps/controls/refControl"; + +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; +import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; +import { fixOldInputCompData } from "../textInputComp/textInputConstants"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; -import {migrateOldData, withDefault} from 'comps/generators/simpleGenerators'; -import {fixOldInputCompData} from '../textInputComp/textInputConstants'; const getStyle = (style: SegmentStyleType) => { return css` @@ -66,33 +53,32 @@ const getStyle = (style: SegmentStyleType) => { .ant-segmented-item-selected { border-radius: ${style.radius}; } - &.ant-segmented, - .ant-segmented-item-label { - font-family: ${style.fontFamily}; - font-style: ${style.fontStyle}; - font-size: ${style.textSize}; - font-weight: ${style.textWeight}; - text-transform: ${style.textTransform}; - text-decoration: ${style.textDecoration}; + &.ant-segmented, .ant-segmented-item-label { + font-family:${style.fontFamily}; + font-style:${style.fontStyle}; + font-size:${style.textSize}; + font-weight:${style.textWeight}; + text-transform:${style.textTransform}; + text-decoration:${style.textDecoration}; } `; }; -const Segmented = styled(AntdSegmented)<{$style: SegmentStyleType}>` +const Segmented = styled(AntdSegmented)<{ $style: SegmentStyleType }>` width: 100%; min-height: 24px; // keep the height unchanged when there are no options ${(props) => props.$style && getStyle(props.$style)} `; const SegmentChildrenMap = { - defaultValue: stringExposingStateControl('value'), - value: stringExposingStateControl('value'), + defaultValue: stringExposingStateControl("value"), + value: stringExposingStateControl("value"), label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectOptionControl, - style: withDefault(styleControl(SegmentStyle), {borderWidth: '1px'}), - animationStyle: styleControl(AnimationStyle), + style: withDefault(styleControl(SegmentStyle), { borderWidth: '1px' }), + animationStyle:styleControl(AnimationStyle), viewRef: RefControl, ...SelectInputValidationChildren, @@ -101,7 +87,10 @@ const SegmentChildrenMap = { let SegmentedControlBasicComp = (function () { return new UICompBuilder(SegmentChildrenMap, (props) => { - const [validateState, handleChange] = useSelectInputValidate(props); + const [ + validateState, + handleChange, + ] = useSelectInputValidate(props); return props.label({ required: props.required, style: props.style, @@ -133,40 +122,32 @@ let SegmentedControlBasicComp = (function () { <>
{children.options.propertyView({})} - {children.defaultValue.propertyView({ - label: trans('prop.defaultValue'), - })} + {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
- {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( - <> - - -
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} -
- + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <> + +
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} +
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> -
- {children.style.getPropertyView()} +
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()}
-
- {children.animationStyle.getPropertyView()} -
- + )} )) @@ -174,16 +155,10 @@ let SegmentedControlBasicComp = (function () { .build(); })(); -SegmentedControlBasicComp = migrateOldData( - SegmentedControlBasicComp, - fixOldInputCompData -); +SegmentedControlBasicComp = migrateOldData(SegmentedControlBasicComp, fixOldInputCompData); -export const SegmentedControlComp = withExposingConfigs( - SegmentedControlBasicComp, - [ - new NameConfig('value', trans('selectInput.valueDesc')), - SelectInputInvalidConfig, - ...CommonNameConfig, - ] -); +export const SegmentedControlComp = withExposingConfigs(SegmentedControlBasicComp, [ + new NameConfig("value", trans("selectInput.valueDesc")), + SelectInputInvalidConfig, + ...CommonNameConfig, +]); From 45364c194c181d183ba847cf90a97d3b39594323 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:23:52 +0500 Subject: [PATCH 092/155] formating removed-67 --- .../lowcoder/src/comps/comps/switchComp.tsx | 111 +++++++----------- 1 file changed, 40 insertions(+), 71 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 211d715b7..fe9ca6d9f 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -1,59 +1,36 @@ -import {default as Switch} from 'antd/es/switch'; -import {BoolCodeControl} from 'comps/controls/codeControl'; -import {booleanExposingStateControl} from 'comps/controls/codeStateControl'; -import { - changeEvent, - eventHandlerControl, -} from 'comps/controls/eventHandlerControl'; -import {LabelControl} from 'comps/controls/labelControl'; -import {styleControl} from 'comps/controls/styleControl'; -import { - SwitchStyle, - SwitchStyleType, - LabelStyle, - InputFieldStyle, - AnimationStyle, -} from 'comps/controls/styleControlConstants'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; -import {Section, sectionNames} from 'lowcoder-design'; -import styled, {css} from 'styled-components'; -import {UICompBuilder} from '../generators'; -import { - CommonNameConfig, - NameConfig, - withExposingConfigs, -} from '../generators/withExposing'; -import { - formDataChildren, - FormDataPropertyView, -} from './formComp/formDataConstants'; -import { - hiddenPropertyView, - disabledPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {RefControl} from 'comps/controls/refControl'; -import {refMethods} from 'comps/generators/withMethodExposing'; -import { - blurMethod, - clickMethod, - focusWithOptions, -} from 'comps/utils/methodUtils'; +import { default as Switch } from "antd/es/switch"; +import { BoolCodeControl } from "comps/controls/codeControl"; +import { booleanExposingStateControl } from "comps/controls/codeStateControl"; +import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; +import { LabelControl } from "comps/controls/labelControl"; +import { styleControl } from "comps/controls/styleControl"; +import { SwitchStyle, SwitchStyleType, LabelStyle, InputFieldStyle, AnimationStyle } from "comps/controls/styleControlConstants"; +import { migrateOldData } from "comps/generators/simpleGenerators"; +import { Section, sectionNames } from "lowcoder-design"; +import styled, { css } from "styled-components"; +import { UICompBuilder } from "../generators"; +import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; +import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; +import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { RefControl } from "comps/controls/refControl"; +import { refMethods } from "comps/generators/withMethodExposing"; +import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; const EventOptions = [ changeEvent, { - label: trans('switchComp.open'), - value: 'true', - description: trans('switchComp.openDesc'), + label: trans("switchComp.open"), + value: "true", + description: trans("switchComp.openDesc"), }, { - label: trans('switchComp.close'), - value: 'false', - description: trans('switchComp.closeDesc'), + label: trans("switchComp.close"), + value: "false", + description: trans("switchComp.closeDesc"), }, ] as const; @@ -72,7 +49,7 @@ const getStyle = (style: SwitchStyleType) => { `; }; -const SwitchWrapper = styled.div<{disabled: boolean; $style: SwitchStyleType}>` +const SwitchWrapper = styled.div<{ disabled: boolean; $style: SwitchStyleType }>` min-height: 32px; display: flex; align-items: center; @@ -92,7 +69,7 @@ const SwitchWrapper = styled.div<{disabled: boolean; $style: SwitchStyleType}>` * compatible with old data 2022-08-23 */ function fixOldData(oldData: any) { - if (oldData && oldData.hasOwnProperty('unChecked')) { + if (oldData && oldData.hasOwnProperty("unChecked")) { return { label: oldData.label, handle: oldData.handle, @@ -127,8 +104,8 @@ let SwitchTmpComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, children: ( { props.value.onChange(checked); - props.onEvent('change'); - props.onEvent(checked ? 'true' : 'false'); + props.onEvent("change"); + props.onEvent(checked ? "true" : "false"); }} /> @@ -149,16 +126,12 @@ let SwitchTmpComp = (function () { return ( <>
- {children.value.propertyView({ - label: trans('switchComp.defaultValue'), - })} + {children.value.propertyView({ label: trans("switchComp.defaultValue") })}
- {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -166,13 +139,11 @@ let SwitchTmpComp = (function () {
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
{children.style.getPropertyView()} @@ -191,13 +162,11 @@ let SwitchTmpComp = (function () { ); }) - .setExposeMethodConfigs( - refMethods([focusWithOptions, blurMethod, clickMethod]) - ) + .setExposeMethodConfigs(refMethods([focusWithOptions, blurMethod, clickMethod])) .build(); })(); export const SwitchComp = withExposingConfigs(SwitchTmpComp, [ - new NameConfig('value', trans('switchComp.valueDesc')), + new NameConfig("value", trans("switchComp.valueDesc")), ...CommonNameConfig, ]); From 187c0602ae20d6186db00c819c33e7252337a0e8 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:25:37 +0500 Subject: [PATCH 093/155] formating removed-68 --- client/packages/lowcoder/src/comps/comps/switchComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index fe9ca6d9f..7c4820e37 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -85,7 +85,7 @@ function fixOldData(oldData: any) { */ let SwitchTmpComp = (function () { const childrenMap = { - value: booleanExposingStateControl('value'), + value: booleanExposingStateControl("value"), label: LabelControl, onEvent: eventHandlerControl(EventOptions), disabled: BoolCodeControl, @@ -97,7 +97,7 @@ let SwitchTmpComp = (function () { ) ), viewRef: RefControl, - inputFieldStyle: migrateOldData(styleControl(SwitchStyle), fixOldData), + inputFieldStyle:migrateOldData(styleControl(SwitchStyle), fixOldData), ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { From c96a0ed793717e75740a4af95fb11ea77193600d Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:27:24 +0500 Subject: [PATCH 094/155] formating removed-69 --- .../lowcoder/src/comps/comps/textComp.tsx | 106 ++++++++---------- 1 file changed, 46 insertions(+), 60 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 67345c2bc..05f9d4621 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -1,57 +1,45 @@ -import {dropdownControl} from 'comps/controls/dropdownControl'; -import {stringExposingStateControl} from 'comps/controls/codeStateControl'; -import {AutoHeightControl} from 'comps/controls/autoHeightControl'; -import {Section, sectionNames} from 'lowcoder-design'; -import styled, {css} from 'styled-components'; -import {AlignCenter} from 'lowcoder-design'; -import {AlignLeft} from 'lowcoder-design'; -import {AlignRight} from 'lowcoder-design'; -import {UICompBuilder} from '../generators'; -import { - NameConfig, - NameConfigHidden, - withExposingConfigs, -} from '../generators/withExposing'; -import {markdownCompCss, TacoMarkDown} from 'lowcoder-design'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - AnimationStyleType, - TextStyle, - TextStyleType, - heightCalculator, - widthCalculator, -} from 'comps/controls/styleControlConstants'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {alignWithJustifyControl} from 'comps/controls/alignControl'; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { stringExposingStateControl } from "comps/controls/codeStateControl"; +import { AutoHeightControl } from "comps/controls/autoHeightControl"; +import { Section, sectionNames } from "lowcoder-design"; +import styled, { css } from "styled-components"; +import { AlignCenter } from "lowcoder-design"; +import { AlignLeft } from "lowcoder-design"; +import { AlignRight } from "lowcoder-design"; +import { UICompBuilder } from "../generators"; +import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; +import { markdownCompCss, TacoMarkDown } from "lowcoder-design"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { alignWithJustifyControl } from "comps/controls/alignControl"; -import {MarginControl} from '../controls/marginControl'; -import {PaddingControl} from '../controls/paddingControl'; +import { MarginControl } from "../controls/marginControl"; +import { PaddingControl } from "../controls/paddingControl"; -import React, {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import React, { useContext } from "react"; +import { EditorContext } from "comps/editorState"; const getStyle = (style: TextStyleType) => { return css` - border-radius: ${style.radius ? style.radius : '4px'}; - border: ${style.borderWidth ? style.borderWidth : '0px'} solid - ${style.border}; + border-radius: ${(style.radius ? style.radius : "4px")}; + border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border}; color: ${style.text}; font-size: ${style.textSize} !important; font-weight: ${style.textWeight} !important; font-family: ${style.fontFamily} !important; - font-style: ${style.fontStyle} !important; - text-transform: ${style.textTransform} !important; - text-decoration: ${style.textDecoration} !important; + font-style:${style.fontStyle} !important; + text-transform:${style.textTransform} !important; + text-decoration:${style.textDecoration} !important; background-color: ${style.background}; .markdown-body a { color: ${style.links}; } .markdown-body { - margin: ${style.margin} !important; - padding: ${style.padding}; - width: ${widthCalculator(style.margin)}; + margin: ${style.margin} !important; + padding: ${style.padding}; + width: ${widthCalculator(style.margin)}; // height: ${heightCalculator(style.margin)}; h1 { line-height: 1.5; @@ -87,12 +75,12 @@ const getStyle = (style: TextStyleType) => { const TextContainer = styled.div<{ $type: string; $styleConfig: TextStyleType; - $animationStyle: AnimationStyleType; + $animationStyle:AnimationStyleType; }>` height: 100%; overflow: auto; margin: 0; - ${(props) => props.$animationStyle} + ${props=>props.$animationStyle} ${(props) => props.$type === 'text' && 'white-space:break-spaces;line-height: 1.9;'}; ${(props) => props.$styleConfig && getStyle(props.$styleConfig)} @@ -116,21 +104,23 @@ const AlignVerticalCenter = styled(AlignCenter)` const typeOptions = [ { - label: 'Markdown', - value: 'markdown', + label: "Markdown", + value: "markdown", }, { - label: trans('text'), - value: 'text', + label: trans("text"), + value: "text", }, ] as const; const VerticalAlignmentOptions = [ - {label: , value: 'flex-start'}, - {label: , value: 'center'}, - {label: , value: 'flex-end'}, + { label: , value: "flex-start" }, + { label: , value: "center" }, + { label: , value: "flex-end" }, ] as const; + let TextTmpComp = (function () { + const childrenMap = { text: stringExposingStateControl( 'text', @@ -171,34 +161,30 @@ let TextTmpComp = (function () { <>
{children.type.propertyView({ - label: trans('value'), - tooltip: trans('textShow.valueTooltip'), + label: trans("value"), + tooltip: trans("textShow.valueTooltip"), radioButton: true, })} {children.text.propertyView({})}
- {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{hiddenPropertyView(children)}
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
{children.autoHeight.getPropertyView()} {!children.autoHeight.getView() && children.verticalAlignment.propertyView({ - label: trans('textShow.verticalAlignment'), + label: trans("textShow.verticalAlignment"), radioButton: true, })} {children.horizontalAlignment.propertyView({ - label: trans('textShow.horizontalAlignment'), + label: trans("textShow.horizontalAlignment"), radioButton: true, })}
@@ -223,6 +209,6 @@ TextTmpComp = class extends TextTmpComp { }; export const TextComp = withExposingConfigs(TextTmpComp, [ - new NameConfig('text', trans('textShow.textDesc')), + new NameConfig("text", trans("textShow.textDesc")), NameConfigHidden, ]); From 0a60384ac47eceb0a69a022383fafd350d8355fc Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:29:37 +0500 Subject: [PATCH 095/155] formating removed-70 --- .../packages/lowcoder/src/comps/comps/textComp.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 05f9d4621..56fde1f8a 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -82,7 +82,7 @@ const TextContainer = styled.div<{ margin: 0; ${props=>props.$animationStyle} ${(props) => - props.$type === 'text' && 'white-space:break-spaces;line-height: 1.9;'}; + props.$type === "text" && "white-space:break-spaces;line-height: 1.9;"}; ${(props) => props.$styleConfig && getStyle(props.$styleConfig)} display: flex; font-size: 13px; @@ -123,13 +123,13 @@ let TextTmpComp = (function () { const childrenMap = { text: stringExposingStateControl( - 'text', - trans('textShow.text', {name: '{{currentUser.name}}'}) + "text", + trans("textShow.text", { name: "{{ currentUser.name}}" }) ), autoHeight: AutoHeightControl, - type: dropdownControl(typeOptions, 'markdown'), + type: dropdownControl(typeOptions, "markdown"), horizontalAlignment: alignWithJustifyControl(), - verticalAlignment: dropdownControl(VerticalAlignmentOptions, 'center'), + verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"), style: styleControl(TextStyle), animationStyle: styleControl(AnimationStyle), margin: MarginControl, @@ -144,11 +144,11 @@ let TextTmpComp = (function () { $styleConfig={props.style} style={{ justifyContent: props.horizontalAlignment, - alignItems: props.autoHeight ? 'center' : props.verticalAlignment, + alignItems: props.autoHeight ? "center" : props.verticalAlignment, textAlign: props.horizontalAlignment, }} > - {props.type === 'markdown' ? ( + {props.type === "markdown" ? ( {value} ) : ( value From 534e45c6a44c7d20c5447253adab28b8039abd2c Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:30:41 +0500 Subject: [PATCH 096/155] formating removed-71 --- client/packages/lowcoder/src/comps/comps/textComp.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 56fde1f8a..d312d1de2 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -124,7 +124,7 @@ let TextTmpComp = (function () { const childrenMap = { text: stringExposingStateControl( "text", - trans("textShow.text", { name: "{{ currentUser.name}}" }) + trans("textShow.text", { name: "{{currentUser.name}}" }) ), autoHeight: AutoHeightControl, type: dropdownControl(typeOptions, "markdown"), @@ -148,11 +148,7 @@ let TextTmpComp = (function () { textAlign: props.horizontalAlignment, }} > - {props.type === "markdown" ? ( - {value} - ) : ( - value - )} + {props.type === "markdown" ? {value} : value} ); }) From a6a9ecb9d022dbdf1e8baeeced3a55bd97c704cf Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:32:29 +0500 Subject: [PATCH 097/155] formating removed-72 --- .../comps/comps/textInputComp/inputComp.tsx | 103 +++++++----------- 1 file changed, 38 insertions(+), 65 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index c3881c72b..dc729e78d 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -1,22 +1,15 @@ -import {Input, Section, sectionNames} from 'lowcoder-design'; -import {BoolControl} from 'comps/controls/boolControl'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - InputFieldStyle, - InputLikeStyle, - InputLikeStyleType, - LabelStyle, - LabelStyleType, -} from 'comps/controls/styleControlConstants'; +import { Input, Section, sectionNames } from "lowcoder-design"; +import { BoolControl } from "comps/controls/boolControl"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants"; import { NameConfig, NameConfigPlaceHolder, NameConfigRequired, -} from 'comps/generators/withExposing'; -import styled from 'styled-components'; -import {UICompBuilder} from '../../generators'; -import {FormDataPropertyView} from '../formComp/formDataConstants'; +} from "comps/generators/withExposing"; +import styled from "styled-components"; +import { UICompBuilder } from "../../generators"; +import { FormDataPropertyView } from "../formComp/formDataConstants"; import { fixOldInputCompData, getStyle, @@ -27,27 +20,27 @@ import { TextInputInteractionSection, TextInputValidationSection, useTextInputProps, -} from './textInputConstants'; +} from "./textInputConstants"; import { allowClearPropertyView, hiddenPropertyView, readOnlyPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {IconControl} from 'comps/controls/iconControl'; -import {hasIcon} from 'comps/utils'; -import {InputRef} from 'antd/es/input'; -import {RefControl} from 'comps/controls/refControl'; -import {migrateOldData, withDefault} from 'comps/generators/simpleGenerators'; +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { IconControl } from "comps/controls/iconControl"; +import { hasIcon } from "comps/utils"; +import { InputRef } from "antd/es/input"; +import { RefControl } from "comps/controls/refControl"; +import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; -import React, {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import React, { useContext } from "react"; +import { EditorContext } from "comps/editorState"; /** * Input Comp */ -const InputStyle = styled(Input)<{$style: InputLikeStyleType}>` +const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>` ${(props) => props.$style && getStyle(props.$style)} `; @@ -81,8 +74,8 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { ), style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, ...validateState, }); }) @@ -92,50 +85,29 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( - <> - -
- {hiddenPropertyView(children)} -
+ {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <> +
{hiddenPropertyView(children)}
- {children.prefixIcon.propertyView({ - label: trans('button.prefixIcon'), - })} - {children.suffixIcon.propertyView({ - label: trans('button.suffixIcon'), - })} - {children.showCount.propertyView({ - label: trans('prop.showCount'), - })} + {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} + {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} + {children.showCount.propertyView({ label: trans("prop.showCount") })} {allowClearPropertyView(children)} {readOnlyPropertyView(children)}
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> -
- {children.style.getPropertyView()} -
-
- {children.labelStyle.getPropertyView()} -
-
- {children.inputFieldStyle.getPropertyView()} -
-
- {children.animationStyle.getPropertyView()} -
+
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
)} @@ -143,13 +115,14 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { }) .setExposeMethodConfigs(inputRefMethods) .setExposeStateConfigs([ - new NameConfig('value', trans('export.inputValueDesc')), + new NameConfig("value", trans("export.inputValueDesc")), NameConfigPlaceHolder, NameConfigRequired, ...TextInputConfigs, ]) .build(); + const InputComp = migrateOldData(InputBasicComp, fixOldInputCompData); -export {InputComp}; +export { InputComp }; From b3208397f928f3dd2f325521e50212451ec4ab26 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:33:24 +0500 Subject: [PATCH 098/155] formating removed-73 --- .../comps/comps/textInputComp/mentionComp.tsx | 165 +++++++++--------- 1 file changed, 79 insertions(+), 86 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx index be9048c54..619eab3e2 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx @@ -1,31 +1,31 @@ -import {useState, useEffect} from 'react'; +import { useState, useEffect } from "react"; import { NameConfig, NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from 'comps/generators/withExposing'; -import {Section, sectionNames} from 'lowcoder-design'; -import {BoolControl} from '../../controls/boolControl'; -import {AutoHeightControl} from '../../controls/autoHeightControl'; -import {UICompBuilder} from '../../generators'; -import {FormDataPropertyView} from '../formComp/formDataConstants'; +} from "comps/generators/withExposing"; +import { Section, sectionNames } from "lowcoder-design"; +import { BoolControl } from "../../controls/boolControl"; +import { AutoHeightControl } from "../../controls/autoHeightControl"; +import { UICompBuilder } from "../../generators"; +import { FormDataPropertyView } from "../formComp/formDataConstants"; import { checkMentionListData, fixOldInputCompData, textInputChildren, -} from './textInputConstants'; +} from "./textInputConstants"; import { withMethodExposing, refMethods, -} from '../../generators/withMethodExposing'; -import {styleControl} from 'comps/controls/styleControl'; -import styled from 'styled-components'; +} from "../../generators/withMethodExposing"; +import { styleControl } from "comps/controls/styleControl"; +import styled from "styled-components"; import { AnimationStyle, InputLikeStyle, InputLikeStyleType, -} from 'comps/controls/styleControlConstants'; +} from "comps/controls/styleControlConstants"; import { disabledPropertyView, hiddenPropertyView, @@ -33,38 +33,40 @@ import { minLengthPropertyView, readOnlyPropertyView, requiredPropertyView, -} from 'comps/utils/propertyUtils'; -import {booleanExposingStateControl} from 'comps/controls/codeStateControl'; -import {trans} from 'i18n'; -import {RefControl} from 'comps/controls/refControl'; -import {TextAreaRef} from 'antd/es/input/TextArea'; -import {default as ConfigProvider} from 'antd/es/config-provider'; -import {default as Mentions, type MentionsOptionProps} from 'antd/es/mentions'; -import {blurMethod, focusWithOptions} from 'comps/utils/methodUtils'; -import {textInputValidate} from '../textInputComp/textInputConstants'; -import {jsonControl} from 'comps/controls/codeControl'; +} from "comps/utils/propertyUtils"; +import { booleanExposingStateControl } from "comps/controls/codeStateControl"; +import { trans } from "i18n"; +import { RefControl } from "comps/controls/refControl"; +import { TextAreaRef } from "antd/es/input/TextArea"; +import { default as ConfigProvider } from "antd/es/config-provider"; +import { default as Mentions, type MentionsOptionProps } from "antd/es/mentions"; +import { blurMethod, focusWithOptions } from "comps/utils/methodUtils"; +import { + textInputValidate, +} from "../textInputComp/textInputConstants"; +import { jsonControl } from "comps/controls/codeControl"; import { submitEvent, eventHandlerControl, mentionEvent, focusEvent, blurEvent, - changeEvent, -} from 'comps/controls/eventHandlerControl'; + changeEvent +} from "comps/controls/eventHandlerControl"; -import React, {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; +import React, { useContext } from "react"; +import { EditorContext } from "comps/editorState"; +import { migrateOldData } from "comps/generators/simpleGenerators"; const Wrapper = styled.div<{ $style: InputLikeStyleType; }>` - box-sizing: border-box; + box-sizing:border-box; .rc-textarea { - background-color: ${(props) => props.$style.background}; - padding: ${(props) => props.$style.padding}; - text-transform: ${(props) => props.$style.textTransform}; - text-decoration: ${(props) => props.$style.textDecoration}; + background-color:${(props) => props.$style.background}; + padding:${(props) => props.$style.padding}; + text-transform:${(props)=>props.$style.textTransform}; + text-decoration:${(props)=>props.$style.textDecoration}; margin: 0px 3px 0px 3px !important; } @@ -105,42 +107,42 @@ let MentionTmpComp = (function () { }; return new UICompBuilder(childrenMap, (props) => { - const {mentionList} = props; + const { mentionList } = props; const [validateState, setvalidateState] = useState({}); const [activationFlag, setActivationFlag] = useState(false); - const [prefix, setPrefix] = useState('@'); - type PrefixType = '@' | keyof typeof mentionList; + const [prefix, setPrefix] = useState("@"); + type PrefixType = "@" | keyof typeof mentionList; const onSearch = (_: string, newPrefix: PrefixType) => { setPrefix(newPrefix); }; const onChange = (value: string) => { props.value.onChange(value); - props.onEvent('change'); + props.onEvent("change"); }; const onPressEnter = (e: any) => { if (e.shiftKey) { e.preventDefault(); - props.onEvent('submit'); + props.onEvent("submit"); } }; const onSelect = (option: MentionsOptionProps) => { - props.onEvent('mention'); + props.onEvent("mention"); }; - const getValidate = (value: any): '' | 'warning' | 'error' | undefined => { + const getValidate = (value: any): "" | "warning" | "error" | undefined => { if ( - value.hasOwnProperty('validateStatus') && - value['validateStatus'] === 'error' + value.hasOwnProperty("validateStatus") && + value["validateStatus"] === "error" ) - return 'error'; - return ''; + return "error"; + return ""; }; const getTextInputValidate = () => { return { - value: {value: props.value.value}, + value: { value: props.value.value }, required: props.required, minLength: props?.minLength ?? 0, maxLength: props?.maxLength ?? 0, @@ -154,7 +156,7 @@ let MentionTmpComp = (function () { if (activationFlag) { const temp = textInputValidate(getTextInputValidate()); setvalidateState(temp); - props.invalid.onChange(temp.validateStatus !== ''); + props.invalid.onChange(temp.validateStatus !== ""); } }, [ props.value.value, @@ -184,9 +186,9 @@ let MentionTmpComp = (function () { prefix={Object.keys(mentionList)} onFocus={() => { setActivationFlag(true); - props.onEvent('focus'); + props.onEvent("focus"); }} - onBlur={() => props.onEvent('blur')} + onBlur={() => props.onEvent("blur")} onPressEnter={onPressEnter} onSearch={onSearch} onChange={onChange} @@ -202,15 +204,15 @@ let MentionTmpComp = (function () { }))} autoSize={props.autoHeight} style={{ - height: '100%', - maxHeight: '100%', - resize: 'none', + height: "100%", + maxHeight: "100%", + resize: "none", // padding: props.style.padding, fontStyle: props.style.fontStyle, fontFamily: props.style.fontFamily, borderWidth: props.style.borderWidth, fontWeight: props.style.textWeight, - fontSize: props.style.textSize, + fontSize: props.style.textSize }} readOnly={props.readOnly} /> @@ -225,58 +227,48 @@ let MentionTmpComp = (function () { .setPropertyViewFn((children) => ( <>
- {children.value.propertyView({label: trans('prop.defaultValue')})} + {children.value.propertyView({ label: trans("prop.defaultValue") })} {children.placeholder.propertyView({ - label: trans('prop.placeholder'), + label: trans("prop.placeholder"), })} - {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.mentionList.propertyView({ - label: trans('mention.mentionList'), - })} + label: trans("mention.mentionList"), + }) + )}
- {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( - <> -
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} -
-
- {hiddenPropertyView(children)} -
+ {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <>
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} +
+
{hiddenPropertyView(children)}
{readOnlyPropertyView(children)} -
-
+
{requiredPropertyView(children)} {children.validationType.propertyView({ - label: trans('prop.textType'), + label: trans("prop.textType"), })} {minLengthPropertyView(children)} {maxLengthPropertyView(children)} {children.customRule.propertyView({})} -
- +
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
- {children.style.getPropertyView()} + {children.style.getPropertyView()}
- {children.animationStyle.getPropertyView()} + {children.animationStyle.getPropertyView()}
)} @@ -285,6 +277,7 @@ let MentionTmpComp = (function () { .build(); })(); + MentionTmpComp = class extends MentionTmpComp { override autoHeight(): boolean { return this.children.autoHeight.getView(); @@ -299,10 +292,10 @@ const TextareaTmp2Comp = withMethodExposing( ); export const MentionComp = withExposingConfigs(TextareaTmp2Comp, [ - new NameConfig('value', trans('export.inputValueDesc')), + new NameConfig("value", trans("export.inputValueDesc")), NameConfigPlaceHolder, NameConfigRequired, - new NameConfig('invalid', trans('export.invalidDesc')), - new NameConfig('hidden', trans('export.hiddenDesc')), - new NameConfig('disabled', trans('export.disabledDesc')), + new NameConfig("invalid", trans("export.invalidDesc")), + new NameConfig("hidden", trans("export.hiddenDesc")), + new NameConfig("disabled", trans("export.disabledDesc")), ]); From aaeb3c6362c71f9a8ed043041445ac9dfec5220a Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:34:43 +0500 Subject: [PATCH 099/155] formating removed-74 --- .../lowcoder/src/comps/comps/textInputComp/mentionComp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx index 619eab3e2..0a5add0a5 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx @@ -99,11 +99,11 @@ let MentionTmpComp = (function () { style: styleControl(InputLikeStyle), animationStyle: styleControl(AnimationStyle), mentionList: jsonControl(checkMentionListData, { - '@': ['Li Lei', 'Han Meimei'], - '#': ['123', '456', '789'], + "@": ["Li Lei", "Han Meimei"], + "#": ["123", "456", "789"], }), onEvent: eventHandlerControl(EventOptions), - invalid: booleanExposingStateControl('invalid'), + invalid: booleanExposingStateControl("invalid"), }; return new UICompBuilder(childrenMap, (props) => { From 698c72f0f6ef7df6eed6fd178043b3fb0e021b78 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:36:03 +0500 Subject: [PATCH 100/155] formating removed-75 --- .../comps/textInputComp/passwordComp.tsx | 113 +++++++----------- 1 file changed, 44 insertions(+), 69 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 35efe6941..2002a8476 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -1,17 +1,17 @@ -import {default as InputPassword} from 'antd/es/input/Password'; -import {InputRef} from 'antd/es/input'; +import { default as InputPassword } from "antd/es/input/Password"; +import { InputRef } from "antd/es/input"; import { NameConfig, NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from 'comps/generators/withExposing'; -import {Section, sectionNames} from 'lowcoder-design'; -import {BoolControl} from '../../controls/boolControl'; -import {dropdownControl} from '../../controls/dropdownControl'; -import {LabelControl} from '../../controls/labelControl'; -import {UICompBuilder, withDefault} from '../../generators'; -import {FormDataPropertyView} from '../formComp/formDataConstants'; +} from "comps/generators/withExposing"; +import { Section, sectionNames } from "lowcoder-design"; +import { BoolControl } from "../../controls/boolControl"; +import { dropdownControl } from "../../controls/dropdownControl"; +import { LabelControl } from "../../controls/labelControl"; +import { UICompBuilder, withDefault } from "../../generators"; +import { FormDataPropertyView } from "../formComp/formDataConstants"; import { fixOldInputCompData, getStyle, @@ -22,17 +22,11 @@ import { TextInputInteractionSection, TextInputValidationOptions, useTextInputProps, -} from './textInputConstants'; -import {withMethodExposing} from '../../generators/withMethodExposing'; -import {styleControl} from 'comps/controls/styleControl'; -import styled from 'styled-components'; -import { - AnimationStyle, - InputFieldStyle, - InputLikeStyle, - InputLikeStyleType, - LabelStyle, -} from 'comps/controls/styleControlConstants'; +} from "./textInputConstants"; +import { withMethodExposing } from "../../generators/withMethodExposing"; +import { styleControl } from "comps/controls/styleControl"; +import styled from "styled-components"; +import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { hiddenPropertyView, minLengthPropertyView, @@ -40,16 +34,16 @@ import { requiredPropertyView, regexPropertyView, maxLengthPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {IconControl} from 'comps/controls/iconControl'; -import {hasIcon} from 'comps/utils'; -import {RefControl} from 'comps/controls/refControl'; -import React, {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { IconControl } from "comps/controls/iconControl"; +import { hasIcon } from "comps/utils"; +import { RefControl } from "comps/controls/refControl"; +import React, { useContext } from "react"; +import { EditorContext } from "comps/editorState"; +import { migrateOldData } from "comps/generators/simpleGenerators"; -const PasswordStyle = styled(InputPassword)<{ +const PasswordStyle = styled(InputPassword) <{ $style: InputLikeStyleType; }>` ${(props) => props.$style && getStyle(props.$style)} @@ -59,14 +53,14 @@ let PasswordTmpComp = (function () { const childrenMap = { ...textInputChildren, viewRef: RefControl, - label: withDefault(LabelControl, {text: trans('password.label')}), - validationType: dropdownControl(TextInputValidationOptions, 'Regex'), + label: withDefault(LabelControl, { text: trans("password.label") }), + validationType: dropdownControl(TextInputValidationOptions, "Regex"), visibilityToggle: BoolControl.DEFAULT_TRUE, prefixIcon: IconControl, style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle: styleControl(LabelStyle), inputFieldStyle: styleControl(InputLikeStyle), - animationStyle: styleControl(AnimationStyle), + animationStyle: styleControl(AnimationStyle), }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); @@ -83,8 +77,8 @@ let PasswordTmpComp = (function () { ), style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, ...validateState, }); }) @@ -94,53 +88,34 @@ let PasswordTmpComp = (function () { - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( - <> - -
- {hiddenPropertyView(children)} -
+ {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <> +
{hiddenPropertyView(children)}
{children.visibilityToggle.propertyView({ - label: trans('password.visibilityToggle'), + label: trans("password.visibilityToggle"), })} {readOnlyPropertyView(children)} - {children.prefixIcon.propertyView({ - label: trans('button.prefixIcon'), - })} -
-
+ {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} +
{requiredPropertyView(children)} {regexPropertyView(children)} {minLengthPropertyView(children)} {maxLengthPropertyView(children)} {children.customRule.propertyView({})} -
- +
)} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> -
- {children.style.getPropertyView()} -
-
- {children.labelStyle.getPropertyView()} -
-
- {children.inputFieldStyle.getPropertyView()} -
-
- {children.animationStyle.getPropertyView()} -
+
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
)} @@ -154,7 +129,7 @@ PasswordTmpComp = migrateOldData(PasswordTmpComp, fixOldInputCompData); const PasswordTmp2Comp = withMethodExposing(PasswordTmpComp, inputRefMethods); export const PasswordComp = withExposingConfigs(PasswordTmp2Comp, [ - new NameConfig('value', trans('export.inputValueDesc')), + new NameConfig("value", trans("export.inputValueDesc")), NameConfigPlaceHolder, NameConfigRequired, ...TextInputConfigs, From 23ed72fb100dd1a9497865fae18cadddb8c4b5f9 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:36:56 +0500 Subject: [PATCH 101/155] formating removed-76 --- .../comps/textInputComp/textAreaComp.tsx | 103 +++++++----------- 1 file changed, 40 insertions(+), 63 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index f30f17c45..0698d64a4 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -3,12 +3,12 @@ import { NameConfigPlaceHolder, NameConfigRequired, withExposingConfigs, -} from 'comps/generators/withExposing'; -import {Section, sectionNames} from 'lowcoder-design'; -import {BoolControl} from '../../controls/boolControl'; -import {AutoHeightControl} from '../../controls/autoHeightControl'; -import {UICompBuilder, withDefault} from '../../generators'; -import {FormDataPropertyView} from '../formComp/formDataConstants'; +} from "comps/generators/withExposing"; +import { Section, sectionNames } from "lowcoder-design"; +import { BoolControl } from "../../controls/boolControl"; +import { AutoHeightControl } from "../../controls/autoHeightControl"; +import { UICompBuilder, withDefault } from "../../generators"; +import { FormDataPropertyView } from "../formComp/formDataConstants"; import { fixOldInputCompData, getStyle, @@ -18,36 +18,27 @@ import { TextInputInteractionSection, TextInputValidationSection, useTextInputProps, -} from './textInputConstants'; -import { - withMethodExposing, - refMethods, -} from '../../generators/withMethodExposing'; -import {styleControl} from 'comps/controls/styleControl'; -import styled from 'styled-components'; -import { - AnimationStyle, - InputFieldStyle, - InputLikeStyle, - InputLikeStyleType, - LabelStyle, -} from 'comps/controls/styleControlConstants'; -import {TextArea} from 'components/TextArea'; +} from "./textInputConstants"; +import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; +import { styleControl } from "comps/controls/styleControl"; +import styled from "styled-components"; +import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { TextArea } from "components/TextArea"; import { allowClearPropertyView, hiddenPropertyView, readOnlyPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {RefControl} from 'comps/controls/refControl'; -import {TextAreaRef} from 'antd/es/input/TextArea'; -import {blurMethod, focusWithOptions} from 'comps/utils/methodUtils'; +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { RefControl } from "comps/controls/refControl"; +import { TextAreaRef } from "antd/es/input/TextArea"; +import { blurMethod, focusWithOptions } from "comps/utils/methodUtils"; -import React, {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; -import {migrateOldData} from 'comps/generators/simpleGenerators'; +import React, { useContext } from "react"; +import { EditorContext } from "comps/editorState"; +import { migrateOldData } from "comps/generators/simpleGenerators"; -const TextAreaStyled = styled(TextArea)<{ +const TextAreaStyled = styled(TextArea) <{ $style: InputLikeStyleType; }>` ${(props) => props.$style && getStyle(props.$style)} @@ -57,9 +48,9 @@ const Wrapper = styled.div<{ $style: InputLikeStyleType; }>` height: 100% !important; - - .ant-input { - height: 100% !important; + + .ant-input { + height:100% !important; } .ant-input-clear-icon { @@ -79,24 +70,24 @@ let TextAreaTmpComp = (function () { ...textInputChildren, viewRef: RefControl, allowClear: BoolControl, - autoHeight: withDefault(AutoHeightControl, 'fixed'), + autoHeight: withDefault(AutoHeightControl, "fixed"), style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle: styleControl(LabelStyle), inputFieldStyle: styleControl(InputLikeStyle), - animationStyle: styleControl(AnimationStyle), + animationStyle: styleControl(AnimationStyle) }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); return props.label({ required: props.required, - inputFieldStyle: props.inputFieldStyle, + inputFieldStyle:props.inputFieldStyle, children: ( @@ -112,15 +103,12 @@ let TextAreaTmpComp = (function () { - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && children.label.getPropertyView()} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + children.label.getPropertyView() + )} - {['logic', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( - <> - + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <>
{children.autoHeight.getPropertyView()} {hiddenPropertyView(children)} @@ -129,26 +117,15 @@ let TextAreaTmpComp = (function () { {allowClearPropertyView(children)} {readOnlyPropertyView(children)}
- - + )} - {['layout', 'both'].includes( - useContext(EditorContext).editorModeStatus - ) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> -
- {children.style.getPropertyView()} -
-
- {children.labelStyle.getPropertyView()} -
-
- {children.inputFieldStyle.getPropertyView()} -
-
- {children.animationStyle.getPropertyView()} -
+
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
)} @@ -170,7 +147,7 @@ const TextareaTmp2Comp = withMethodExposing( ); export const TextAreaComp = withExposingConfigs(TextareaTmp2Comp, [ - new NameConfig('value', trans('export.inputValueDesc')), + new NameConfig("value", trans("export.inputValueDesc")), NameConfigPlaceHolder, NameConfigRequired, ...TextInputConfigs, From 0b94808fd7580cdd169b701faa3fba4b1897ed14 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:37:38 +0500 Subject: [PATCH 102/155] formating removed-77 --- .../textInputComp/textInputConstants.tsx | 209 +++++++----------- 1 file changed, 82 insertions(+), 127 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index 028b04255..f2212358e 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -1,37 +1,28 @@ -import {BoolControl} from 'comps/controls/boolControl'; -import {check} from 'util/convertUtils'; +import { BoolControl } from "comps/controls/boolControl"; +import { check } from "util/convertUtils"; import { BoolCodeControl, CustomRuleControl, NumberControl, RegexControl, StringControl, -} from 'comps/controls/codeControl'; -import {stringExposingStateControl} from 'comps/controls/codeStateControl'; -import {LabelControl} from 'comps/controls/labelControl'; -import { - InputLikeStyleType, - LabelStyleType, - heightCalculator, - widthCalculator, -} from 'comps/controls/styleControlConstants'; -import {Section, sectionNames, ValueFromOption} from 'lowcoder-design'; -import _ from 'lodash'; -import {css} from 'styled-components'; -import {EMAIL_PATTERN, URL_PATTERN} from 'util/stringUtils'; -import { - MultiBaseComp, - RecordConstructorToComp, - RecordConstructorToView, -} from 'lowcoder-core'; -import {dropdownControl} from '../../controls/dropdownControl'; -import {InputEventHandlerControl} from '../../controls/eventHandlerControl'; +} from "comps/controls/codeControl"; +import { stringExposingStateControl } from "comps/controls/codeStateControl"; +import { LabelControl } from "comps/controls/labelControl"; +import { InputLikeStyleType, LabelStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { Section, sectionNames, ValueFromOption } from "lowcoder-design"; +import _ from "lodash"; +import { css } from "styled-components"; +import { EMAIL_PATTERN, URL_PATTERN } from "util/stringUtils"; +import { MultiBaseComp, RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; +import { dropdownControl } from "../../controls/dropdownControl"; +import { InputEventHandlerControl } from "../../controls/eventHandlerControl"; import { ChildrenTypeToDepsKeys, CommonNameConfig, depsConfig, -} from '../../generators/withExposing'; -import {formDataChildren} from '../formComp/formDataConstants'; +} from "../../generators/withExposing"; +import { formDataChildren } from "../formComp/formDataConstants"; import { disabledPropertyView, maxLengthPropertyView, @@ -39,11 +30,11 @@ import { placeholderPropertyView, regexPropertyView, requiredPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {ChangeEvent, useEffect, useRef, useState} from 'react'; -import {refMethods} from 'comps/generators/withMethodExposing'; -import {InputRef} from 'antd/es/input'; +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { ChangeEvent, useEffect, useRef, useState } from "react"; +import { refMethods } from "comps/generators/withMethodExposing"; +import { InputRef } from "antd/es/input"; import { blurMethod, clickMethod, @@ -51,39 +42,39 @@ import { selectMethod, setRangeTextMethod, setSelectionRangeMethod, -} from 'comps/utils/methodUtils'; -import {RefControl} from 'comps/controls/refControl'; -import {EvalParamType} from 'comps/controls/actionSelector/executeCompTypes'; +} from "comps/utils/methodUtils"; +import { RefControl } from "comps/controls/refControl"; +import { EvalParamType } from "comps/controls/actionSelector/executeCompTypes"; export const TextInputValidationOptions = [ { - label: 'Text', - value: 'Text', + label: "Text", + value: "Text", extra: /.*/, - help: '', + help: "", }, { - label: 'Email', - value: 'Email', + label: "Email", + value: "Email", extra: EMAIL_PATTERN, - help: trans('validationDesc.email'), + help: trans("validationDesc.email"), }, { - label: 'URL', - value: 'URL', + label: "URL", + value: "URL", extra: URL_PATTERN, - help: trans('validationDesc.url'), + help: trans("validationDesc.url"), }, { - label: 'Regex', - value: 'Regex', + label: "Regex", + value: "Regex", extra: undefined, - help: trans('validationDesc.regex'), + help: trans("validationDesc.regex"), }, ] as const; type ValidationParams = { - value: {value: string}; + value: { value: string }; required: boolean; minLength: number; maxLength: number; @@ -99,69 +90,52 @@ const valueInfoMap = _.fromPairs( export const textInputValidate = ( props: ValidationParams ): { - validateStatus: 'success' | 'warning' | 'error' | ''; + validateStatus: "success" | "warning" | "error" | ""; help?: string; } => { if (props.customRule) { - return {validateStatus: 'error', help: props.customRule}; + return { validateStatus: "error", help: props.customRule }; } const value = props.value.value; if (props.required && value.length === 0) { - return {validateStatus: 'error', help: trans('prop.required')}; + return { validateStatus: "error", help: trans("prop.required") }; } if (props.maxLength > 0 && value.length > props.maxLength) { return { - validateStatus: 'error', - help: trans('validationDesc.maxLength', { - length: value.length, - maxLength: props.maxLength, - }), + validateStatus: "error", + help: trans("validationDesc.maxLength", { length: value.length, maxLength: props.maxLength }), }; } if (props.minLength > 0 && value.length < props.minLength) { return { - validateStatus: 'error', - help: trans('validationDesc.minLength', { - length: value.length, - minLength: props.minLength, - }), + validateStatus: "error", + help: trans("validationDesc.minLength", { length: value.length, minLength: props.minLength }), }; } const optionValue = props.validationType; const regex: RegExp = valueInfoMap[optionValue]?.extra ?? props.regex; // pass if empty by default if (value && !regex.test(value)) { - return {validateStatus: 'error', help: valueInfoMap[optionValue].help}; + return { validateStatus: "error", help: valueInfoMap[optionValue].help }; } - return {validateStatus: ''}; + return { validateStatus: "" }; }; -const TextInputInvalidConfig = depsConfig< - TextInputComp, - ChildrenTypeToDepsKeys ->({ - name: 'invalid', - desc: trans('export.invalidDesc'), - depKeys: [ - 'value', - 'required', - 'minLength', - 'maxLength', - 'validationType', - 'regex', - 'customRule', - ], +const TextInputInvalidConfig = depsConfig>({ + name: "invalid", + desc: trans("export.invalidDesc"), + depKeys: ["value", "required", "minLength", "maxLength", "validationType", "regex", "customRule"], func: (input) => textInputValidate({ ...input, - value: {value: input.value}, - }).validateStatus !== '', + value: { value: input.value }, + }).validateStatus !== "", }); export const TextInputConfigs = [TextInputInvalidConfig, ...CommonNameConfig]; export const textInputChildren = { - defaultValue: stringExposingStateControl('defaultValue'), - value: stringExposingStateControl('value'), + defaultValue: stringExposingStateControl("defaultValue"), + value: stringExposingStateControl("value"), disabled: BoolCodeControl, label: LabelControl, placeholder: StringControl, @@ -172,41 +146,36 @@ export const textInputChildren = { required: BoolControl, minLength: NumberControl, maxLength: NumberControl, - validationType: dropdownControl(TextInputValidationOptions, 'Text'), + validationType: dropdownControl(TextInputValidationOptions, "Text"), regex: RegexControl, customRule: CustomRuleControl, ...formDataChildren, }; -export const textInputProps = ( - props: RecordConstructorToView -) => ({ +export const textInputProps = (props: RecordConstructorToView) => ({ disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, defaultValue: props.defaultValue.value, value: props.value.value, - onFocus: () => props.onEvent('focus'), - onBlur: () => props.onEvent('blur'), - onPressEnter: () => props.onEvent('submit'), + onFocus: () => props.onEvent("focus"), + onBlur: () => props.onEvent("blur"), + onPressEnter: () => props.onEvent("submit"), }); -export const useTextInputProps = ( - props: RecordConstructorToView -) => { +export const useTextInputProps = (props: RecordConstructorToView) => { const [validateState, setValidateState] = useState({}); - const changeRef = useRef(false); + const changeRef = useRef(false) - const propsRef = - useRef>(props); + const propsRef = useRef>(props); propsRef.current = props; - const defaultValue = {...props.defaultValue}.value; - const inputValue = {...props.value}.value; + const defaultValue = { ...props.defaultValue }.value; + const inputValue = { ...props.value }.value; useEffect(() => { - props.value.onChange(defaultValue); + props.value.onChange(defaultValue) }, [defaultValue]); useEffect(() => { @@ -220,7 +189,7 @@ export const useTextInputProps = ( }, }) ); - propsRef.current.onEvent('change'); + propsRef.current.onEvent("change"); changeRef.current = false; }, [inputValue]); @@ -242,7 +211,7 @@ type TextInputComp = RecordConstructorToComp; export const TextInputBasicSection = (children: TextInputComp) => (
- {children.defaultValue.propertyView({label: trans('prop.defaultValue')})} + {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })} {placeholderPropertyView(children)}
); @@ -257,7 +226,7 @@ export const TextInputInteractionSection = (children: TextInputComp) => ( export const TextInputValidationSection = (children: TextInputComp) => (
{requiredPropertyView(children)} - {children.validationType.propertyView({label: trans('prop.textType')})} + {children.validationType.propertyView({ label: trans("prop.textType") })} {valueInfoMap[children.validationType.getView()]?.extra === undefined && regexPropertyView(children)} {minLengthPropertyView(children)} @@ -266,15 +235,11 @@ export const TextInputValidationSection = (children: TextInputComp) => (
); -export function getStyle( - style: InputLikeStyleType, - labelStyle?: LabelStyleType -) { +export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) { return css` border-radius: ${style.radius}; border-width: ${style.borderWidth}; - padding: ${style.padding}; - rotate: ${style.rotation}; + padding: ${style.padding}; // still use antd style when disabled &:not(.ant-input-disabled, .ant-input-affix-wrapper-disabled), input { @@ -282,9 +247,9 @@ export function getStyle( font-size: ${style.textSize}; font-weight: ${style.textWeight}; font-family: ${style.fontFamily}; - font-style: ${style.fontStyle}; - text-transform: ${style.textTransform}; - text-decoration: ${style.textDecoration}; + font-style:${style.fontStyle}; + text-transform:${style.textTransform}; + text-decoration:${style.textDecoration}; background-color: ${style.background}; border-color: ${style.border}; @@ -317,38 +282,28 @@ export function getStyle( } export const inputRefMethods = [ - ...refMethods([ - focusWithOptions, - blurMethod, - selectMethod, - setSelectionRangeMethod, - ]), + ...refMethods([focusWithOptions, blurMethod, selectMethod, setSelectionRangeMethod]), { method: clickMethod, - execute: ( - comp: MultiBaseComp<{viewRef: RefControl}>, - params: EvalParamType[] - ) => comp.children.viewRef.viewRef?.input?.click(), + execute: (comp: MultiBaseComp<{ viewRef: RefControl }>, params: EvalParamType[]) => + comp.children.viewRef.viewRef?.input?.click(), }, { method: setRangeTextMethod, - execute: ( - comp: MultiBaseComp<{viewRef: RefControl}>, - params: EvalParamType[] - ) => + execute: (comp: MultiBaseComp<{ viewRef: RefControl }>, params: EvalParamType[]) => (comp.children.viewRef.viewRef?.input?.setRangeText as any)?.(...params), }, ]; export function checkMentionListData(data: any) { - if (data === '') return {}; + if (data === "") return {} for (const key in data) { - check(data[key], ['array'], key, (node) => { - check(node, ['string']); - return node; - }); + check(data[key], ["array"], key, (node) => { + check(node, ["string"],); + return node + }) } - return data; + return data } // separate defaultValue and value for old components From 169deb367e7b5f099899fe83041b0dfed13b020f Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:44:25 +0500 Subject: [PATCH 103/155] formating removed-78 --- .../comps/triContainerComp/triContainer.tsx | 120 ++++++------------ 1 file changed, 39 insertions(+), 81 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index fd8db47d4..3f4c5d80a 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -1,70 +1,44 @@ -import { - AnimationStyleType, - ContainerBodyStyleType, - ContainerHeaderStyleType, - ContainerStyleType, - heightCalculator, - widthCalculator, -} from 'comps/controls/styleControlConstants'; -import {EditorContext} from 'comps/editorState'; -import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; -import {HintPlaceHolder, ScrollBar} from 'lowcoder-design'; -import {ReactNode, useContext} from 'react'; -import styled, {css} from 'styled-components'; -import {checkIsMobile} from 'util/commonUtils'; -import { - gridItemCompToGridItems, - InnerGrid, -} from '../containerComp/containerView'; -import {TriContainerViewProps} from '../triContainerComp/triContainerCompBuilder'; +import { AnimationStyleType, ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { EditorContext } from "comps/editorState"; +import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; +import { HintPlaceHolder, ScrollBar } from "lowcoder-design"; +import { ReactNode, useContext } from "react"; +import styled, { css } from "styled-components"; +import { checkIsMobile } from "util/commonUtils"; +import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerView"; +import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder"; const getStyle = (style: ContainerStyleType) => { return css` border-color: ${style.border}; border-width: ${style.borderWidth}; border-radius: ${style.radius}; - rotate: ${style.rotation}; overflow: hidden; padding: ${style.padding}; ${style.background && `background-color: ${style.background};`} - ${style.backgroundImage && - `background-image: url(${style.backgroundImage});`} - ${style.backgroundImageRepeat && - `background-repeat: ${style.backgroundImageRepeat};`} - ${style.backgroundImageSize && - `background-size: ${style.backgroundImageSize};`} - ${style.backgroundImagePosition && - `background-position: ${style.backgroundImagePosition};`} - ${style.backgroundImageOrigin && - `background-origin: ${style.backgroundImageOrigin};`} + ${style.backgroundImage && `background-image: url(${style.backgroundImage});`} + ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`} + ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`} + ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`} + ${style.backgroundImageOrigin && `background-origin: ${style.backgroundImageOrigin};`} `; }; -const Wrapper = styled.div<{ - $style: ContainerStyleType; - $animationStyle?: AnimationStyleType; -}>` +const Wrapper = styled.div<{$style: ContainerStyleType; $animationStyle?:AnimationStyleType}>` display: flex; flex-flow: column; height: 100%; border: 1px solid #d7d9e0; border-radius: 4px; - ${(props) => props.$animationStyle && props.$animationStyle} - ${(props) => { - return props.$style && getStyle(props.$style); - }} + ${(props) => props.$style && getStyle(props.$style)} + ${props=>props.$animationStyle&&props.$animationStyle} `; const HeaderInnerGrid = styled(InnerGrid)<{ - $backgroundColor: string; - $headerStyle: ContainerHeaderStyleType; -}>` + $backgroundColor: string + }>` overflow: visible; - rotate:${(props) => { - return `${props.$headerStyle.rotation};`; - }} - ${(props) => - props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -73,16 +47,10 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; - $bodyStyle: ContainerBodyStyleType; }>` - border-top: ${(props) => - `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; - rotate:${(props) => { - return `${props.$bodyStyle.rotation};`; - }} - ${(props) => - props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -97,27 +65,15 @@ const FooterInnerGrid = styled(InnerGrid)<{ $footerBackgroundImagePosition: string; $footerBackgroundImageOrigin: string; }>` - border-top: ${(props) => - `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; overflow: visible; - ${(props) => - props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => - props.$footerBackgroundImage && - `background-image: url(${props.$footerBackgroundImage});`} - ${(props) => - props.$footerBackgroundImageRepeat && - `background-repeat: ${props.$footerBackgroundImageRepeat};`} - ${(props) => - props.$footerBackgroundImageSize && - `background-size: ${props.$footerBackgroundImageSize};`} - ${(props) => - props.$footerBackgroundImagePosition && - `background-position: ${props.$footerBackgroundImagePosition};`} - ${(props) => - props.$footerBackgroundImageOrigin && - `background-origin: ${props.$footerBackgroundImageOrigin};`} + ${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`} + ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`} + ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`} + ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`} + ${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`} `; export type TriContainerProps = TriContainerViewProps & { @@ -127,16 +83,20 @@ export type TriContainerProps = TriContainerViewProps & { export function TriContainer(props: TriContainerProps) { const {container, animationStyle} = props; - const {showHeader, showFooter} = container; + const { showHeader, showFooter } = container; // When the header and footer are not displayed, the body must be displayed const showBody = container.showBody || (!showHeader && !showFooter); const scrollbars = container.scrollbars; - const {items: headerItems, ...otherHeaderProps} = container.header; - const {items: bodyItems, ...otherBodyProps} = - container.body['0'].children.view.getView(); - const {items: footerItems, ...otherFooterProps} = container.footer; - const {style, headerStyle, bodyStyle, footerStyle} = container; + const { items: headerItems, ...otherHeaderProps } = container.header; + const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView(); + const { items: footerItems, ...otherFooterProps } = container.footer; + const { + style, + headerStyle, + bodyStyle, + footerStyle, + } = container; const editorState = useContext(EditorContext); const maxWidth = editorState.getAppSettings().maxWidth; @@ -156,7 +116,6 @@ export function TriContainer(props: TriContainerProps) { minHeight="46px" containerPadding={[paddingWidth, 3]} showName={{bottom: showBody || showFooter ? 20 : 0}} - $headerStyle={headerStyle} $backgroundColor={headerStyle?.headerBackground || 'transparent'} style={{padding: headerStyle.containerHeaderPadding}} /> @@ -184,7 +143,6 @@ export function TriContainer(props: TriContainerProps) { ? [paddingWidth, 11.5] : [paddingWidth, 11] } - $bodyStyle={bodyStyle} hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder} $backgroundColor={bodyStyle?.background || 'transparent'} $borderColor={style?.border} From a93891cd54cfeb31fdf7e5daf10e08f4d35348f3 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:48:38 +0500 Subject: [PATCH 104/155] formating removed-79 --- .../comps/triContainerComp/triContainer.tsx | 110 ++++++++---------- 1 file changed, 46 insertions(+), 64 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 3f4c5d80a..205a31e2c 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -106,42 +106,34 @@ export function TriContainer(props: TriContainerProps) { return (
- {showHeader && ( - - - - )} - {showBody && ( - - + {showHeader && ( + + + + )} + {showBody && ( + + - )} - {showFooter && ( - - - - )} - + )} + {showFooter && ( + + + + )} +
); } From 691a3401613fa7cb027a5b3160e3bdab5c8dd821 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 02:49:48 +0500 Subject: [PATCH 105/155] formating removed-80 --- .../lowcoder/src/comps/comps/triContainerComp/triContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 205a31e2c..ab92e2272 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -145,7 +145,7 @@ export function TriContainer(props: TriContainerProps) { )} {showFooter && ( - + Date: Sun, 19 May 2024 02:50:38 +0500 Subject: [PATCH 106/155] formating removed-81 --- .../src/comps/comps/triContainerComp/triContainer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index ab92e2272..b1cedc8cc 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -142,10 +142,10 @@ export function TriContainer(props: TriContainerProps) { style={{padding: bodyStyle.containerBodyPadding}} /> - + )} {showFooter && ( - + Date: Sun, 19 May 2024 02:55:08 +0500 Subject: [PATCH 107/155] formating removed-82 --- .../triFloatTextContainer.tsx | 112 +++++++----------- 1 file changed, 44 insertions(+), 68 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx index 6f96d75a0..67e6ce389 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx @@ -3,42 +3,39 @@ import { ContainerStyleType, heightCalculator, widthCalculator, - ContainerHeaderStyleType, - ContainerBodyStyleType, AnimationStyleType, -} from 'comps/controls/styleControlConstants'; -import {EditorContext} from 'comps/editorState'; -import {BackgroundColorContext} from 'comps/utils/backgroundColorContext'; -import {HintPlaceHolder, TacoMarkDown} from 'lowcoder-design'; -import {ReactNode, useContext} from 'react'; -import styled, {css} from 'styled-components'; -import {checkIsMobile} from 'util/commonUtils'; +} from "comps/controls/styleControlConstants"; +import { EditorContext } from "comps/editorState"; +import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; +import { HintPlaceHolder, TacoMarkDown } from "lowcoder-design"; +import { ReactNode, useContext } from "react"; +import styled, { css } from "styled-components"; +import { checkIsMobile } from "util/commonUtils"; import { gridItemCompToGridItems, InnerGrid, -} from '../containerComp/containerView'; -import {TriContainerViewProps} from '../triContainerComp/triContainerCompBuilder'; +} from "../containerComp/containerView"; +import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder"; const getStyle = (style: TextStyleType) => { return css` - border-radius: ${style.radius ? style.radius : '4px'}; - border: ${style.borderWidth ? style.borderWidth : '0px'} solid - ${style.border}; + border-radius: ${(style.radius ? style.radius : "4px")}; + border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border}; color: ${style.text}; font-size: ${style.textSize} !important; font-weight: ${style.textWeight} !important; font-family: ${style.fontFamily} !important; - font-style: ${style.fontStyle} !important; - text-transform: ${style.textTransform} !important; - text-decoration: ${style.textDecoration} !important; + font-style:${style.fontStyle} !important; + text-transform:${style.textTransform} !important; + text-decoration:${style.textDecoration} !important; background-color: ${style.background}; .markdown-body a { color: ${style.links}; } .markdown-body { - margin: ${style.margin} !important; - padding: ${style.padding}; - width: ${widthCalculator(style.margin)}; + margin: ${style.margin} !important; + padding: ${style.padding}; + width: ${widthCalculator(style.margin)}; // height: ${heightCalculator(style.margin)}; h1 { line-height: 1.5; @@ -69,23 +66,22 @@ const getStyle = (style: TextStyleType) => { } } `; -}; + } const Wrapper = styled.div<{ $style: ContainerStyleType; - $animationStyle: AnimationStyleType; + $animationStyle?: AnimationStyleType; }>` +${props=>props.$animationStyle&&props.$animationStyle} display: flex; flex-flow: column; height: 100%; - ${(props) => props.$animationStyle} border: ${(props) => props.$style.borderWidth} solid ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; background-color: ${(props) => props.$style.background}; padding: ${(props) => props.$style.padding}; margin: ${(props) => props.$style.margin}; - rotate: ${(props) => props.$style.rotation}; ${(props) => props.$style.backgroundImage && `background-image: url(${props.$style.backgroundImage});`} @@ -114,15 +110,10 @@ const FloatTextWrapper = styled.div<{ `; const HeaderInnerGrid = styled(InnerGrid)<{ - $backgroundColor: string; - $headerStyle: ContainerHeaderStyleType; -}>` + $backgroundColor: string + }>` overflow: visible; - rotate:${(props) => { - return `${props.$headerStyle.rotation};`; - }} - ${(props) => - props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -131,16 +122,10 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; - $bodyStyle: ContainerBodyStyleType; }>` - rotate: ${(props) => { - return `${props.$bodyStyle.rotation}`; - }}; - border-top: ${(props) => - `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; - ${(props) => - props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; `; @@ -155,27 +140,15 @@ const FooterInnerGrid = styled(InnerGrid)<{ $footerBackgroundImagePosition: string; $footerBackgroundImageOrigin: string; }>` - border-top: ${(props) => - `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; + border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; overflow: visible; - ${(props) => - props.$backgroundColor && `background-color: ${props.$backgroundColor};`} + ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => - props.$footerBackgroundImage && - `background-image: url(${props.$footerBackgroundImage});`} - ${(props) => - props.$footerBackgroundImageRepeat && - `background-repeat: ${props.$footerBackgroundImageRepeat};`} - ${(props) => - props.$footerBackgroundImageSize && - `background-size: ${props.$footerBackgroundImageSize};`} - ${(props) => - props.$footerBackgroundImagePosition && - `background-position: ${props.$footerBackgroundImagePosition};`} - ${(props) => - props.$footerBackgroundImageOrigin && - `background-origin: ${props.$footerBackgroundImageOrigin};`} + ${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`} + ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`} + ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`} + ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`} + ${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`} `; export type TriContainerProps = TriContainerViewProps & { @@ -188,26 +161,31 @@ export type TriContainerProps = TriContainerViewProps & { width: string; style: TextStyleType; horizontalAlignment: string; - animationStyle: AnimationStyleType; + animationStyle?: AnimationStyleType; }; export function TriContainer(props: TriContainerProps) { const {container, text, animationStyle} = props; - const {showHeader, showFooter} = container; + const { showHeader, showFooter } = container; // When the header and footer are not displayed, the body must be displayed const showBody = container.showBody || (!showHeader && !showFooter); - const {items: headerItems, ...otherHeaderProps} = container.header; - const {items: bodyItems, ...otherBodyProps} = - container.body['0'].children.view.getView(); - const {items: footerItems, ...otherFooterProps} = container.footer; + const { items: headerItems, ...otherHeaderProps } = container.header; + const { items: bodyItems, ...otherBodyProps } = + container.body["0"].children.view.getView(); + const { items: footerItems, ...otherFooterProps } = container.footer; const editorState = useContext(EditorContext); const maxWidth = editorState.getAppSettings().maxWidth; const isMobile = checkIsMobile(maxWidth); const paddingWidth = isMobile ? 7 : 19; - const {style, headerStyle, bodyStyle, footerStyle} = container; + const { + style, + headerStyle, + bodyStyle, + footerStyle, + } = container; return ( @@ -221,7 +199,6 @@ export function TriContainer(props: TriContainerProps) { minHeight="46px" containerPadding={[0, 0]} showName={{bottom: showFooter ? 20 : 0}} - $headerStyle={headerStyle} $backgroundColor={headerStyle?.headerBackground || 'transparent'} style={{padding: headerStyle.containerHeaderPadding}} /> @@ -236,7 +213,6 @@ export function TriContainer(props: TriContainerProps) { }} > Date: Sun, 19 May 2024 03:00:12 +0500 Subject: [PATCH 108/155] formating removed-83 --- .../triFloatTextContainer.tsx | 85 ++++++++----------- 1 file changed, 34 insertions(+), 51 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx index 67e6ce389..61e041660 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx @@ -76,33 +76,19 @@ ${props=>props.$animationStyle&&props.$animationStyle} display: flex; flex-flow: column; height: 100%; - border: ${(props) => props.$style.borderWidth} solid - ${(props) => props.$style.border}; + border: ${(props) => props.$style.borderWidth} solid ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; background-color: ${(props) => props.$style.background}; padding: ${(props) => props.$style.padding}; margin: ${(props) => props.$style.margin}; - ${(props) => - props.$style.backgroundImage && - `background-image: url(${props.$style.backgroundImage});`} - ${(props) => - props.$style.backgroundImageRepeat && - `background-repeat: ${props.$style.backgroundImageRepeat};`} - ${(props) => - props.$style.backgroundImageSize && - `background-size: ${props.$style.backgroundImageSize};`} - ${(props) => - props.$style.backgroundImagePosition && - `background-position: ${props.$style.backgroundImagePosition};`} - ${(props) => - props.$style.backgroundImageOrigin && - `background-origin: ${props.$style.backgroundImageOrigin};`} + ${(props) => props.$style.backgroundImage && `background-image: url(${props.$style.backgroundImage});`} + ${(props) => props.$style.backgroundImageRepeat && `background-repeat: ${props.$style.backgroundImageRepeat};`} + ${(props) => props.$style.backgroundImageSize && `background-size: ${props.$style.backgroundImageSize};`} + ${(props) => props.$style.backgroundImagePosition && `background-position: ${props.$style.backgroundImagePosition};`} + ${(props) => props.$style.backgroundImageOrigin && `background-origin: ${props.$style.backgroundImageOrigin};`} `; -const FloatTextWrapper = styled.div<{ - $style: TextStyleType; - $horizontalAlignment: any; -}>` +const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignment : any }>` ${(props) => props.$style && getStyle(props.$style)} text-align: ${(props) => props.$horizontalAlignment}; padding: ${(props) => props.$style.padding}; @@ -190,25 +176,26 @@ export function TriContainer(props: TriContainerProps) { return ( {showHeader && ( - + + items={gridItemCompToGridItems(headerItems)} + autoHeight={true} + emptyRows={5} + minHeight="46px" + containerPadding={[0, 0]} + showName={{ bottom: showFooter ? 20 : 0 }} + $backgroundColor={headerStyle?.headerBackground || "transparent"} + style={{ padding: headerStyle.containerHeaderPadding }} /> )} {showBody && (
@@ -218,25 +205,25 @@ export function TriContainer(props: TriContainerProps) { items={gridItemCompToGridItems(bodyItems)} autoHeight={container.autoHeight} emptyRows={14} - minHeight={showHeader ? '143px' : '142px'} + minHeight={showHeader ? "143px" : "142px"} containerPadding={[0, 0]} hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder} - $backgroundColor={bodyStyle?.background || 'transparent'} + $backgroundColor={bodyStyle?.background || "transparent"} $borderColor={style?.border} $borderWidth={style?.borderWidth} style={{ float: `${props.float}`, - width: `${props.float === 'none' ? '100%' : `${props.width}%`}`, - height: '100%', + width: `${props.float === "none" ? "100%" : `${props.width}%`}`, + height: "100%", ...container.bodyStyle, }} - /> + />

- {props.type === 'markdown' ? ( + {props.type === "markdown" ? ( {text.value} ) : ( text.value @@ -247,28 +234,24 @@ export function TriContainer(props: TriContainerProps) { )} {showFooter && ( - + Date: Sun, 19 May 2024 03:02:39 +0500 Subject: [PATCH 109/155] formating removed-84 --- .../triContainerComp/triFloatTextContainer.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx index 61e041660..da088d444 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx @@ -180,14 +180,14 @@ export function TriContainer(props: TriContainerProps) { value={container.style.background} > )} @@ -208,14 +208,14 @@ export function TriContainer(props: TriContainerProps) { minHeight={showHeader ? "143px" : "142px"} containerPadding={[0, 0]} hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder} - $backgroundColor={bodyStyle?.background || "transparent"} + $backgroundColor={bodyStyle?.background || 'transparent'} $borderColor={style?.border} $borderWidth={style?.borderWidth} style={{ float: `${props.float}`, width: `${props.float === "none" ? "100%" : `${props.width}%`}`, height: "100%", - ...container.bodyStyle, + ...container.bodyStyle }} /> + style={{ padding: footerStyle.containerFooterPadding }} /> )} From d3d2ac248789d0a44034062b46428cb4fc8ce675 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:03:49 +0500 Subject: [PATCH 110/155] formating removed-85 --- client/packages/lowcoder/src/index.ts | 28 +++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/client/packages/lowcoder/src/index.ts b/client/packages/lowcoder/src/index.ts index 81b7ab511..05b798a65 100644 --- a/client/packages/lowcoder/src/index.ts +++ b/client/packages/lowcoder/src/index.ts @@ -1,15 +1,15 @@ -import 'core-js/actual'; -import ResizeObserver from 'resize-observer-polyfill'; -import numbro from 'numbro'; -import Papa from 'papaparse'; -import * as uuid from 'uuid'; -import 'regenerator-runtime/runtime'; -import 'virtual:globals'; -import {debug} from 'loglevel'; -import {bootstrap} from './app'; -import './index.less'; -import log from 'loglevel'; -import 'antd-mobile/es/global'; +import "core-js/actual"; +import ResizeObserver from "resize-observer-polyfill"; +import numbro from "numbro"; +import Papa from "papaparse"; +import * as uuid from "uuid"; +import "regenerator-runtime/runtime"; +import "virtual:globals"; +import { debug } from "loglevel"; +import { bootstrap } from "./app"; +import "./index.less"; +import log from "loglevel"; +import "antd-mobile/es/global"; import 'animate.css'; window.numbro = numbro; @@ -23,7 +23,7 @@ if (!window.ResizeObserver) { function hideLoading() { // hide loading - const node = document.getElementById('loading'); + const node = document.getElementById("loading"); if (node) { // @ts-ignore node.style.opacity = 0; @@ -35,7 +35,7 @@ debug(`REACT_APP_LANGUAGES:, ${REACT_APP_LANGUAGES}`); debug(`REACT_APP_API_HOST:, ${REACT_APP_API_HOST}`); debug(`REACT_APP_ENV:, ${REACT_APP_ENV}`); debug(`REACT_APP_LOG_LEVEL:, ${REACT_APP_LOG_LEVEL}`); - + try { bootstrap(); hideLoading(); From 378abcfa21c8229e0d0aa61d80d959e46281bf36 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:08:14 +0500 Subject: [PATCH 111/155] formating removed-86 --- .../comps/comps/commentComp/commentComp.tsx | 243 ++++++++---------- 1 file changed, 112 insertions(+), 131 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index 729fd00de..ad3653d19 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -1,23 +1,23 @@ -import React, {useEffect, useState, useRef, useContext} from 'react'; +import React, { useEffect, useState, useRef, useContext } from "react"; // Render the component to the editor import { changeChildAction, CompAction, RecordConstructorToView, -} from 'lowcoder-core'; +} from "lowcoder-core"; // Text internationalisation conversion api -import {trans} from 'i18n'; +import { trans } from "i18n"; // General frame of the right property bar -import {UICompBuilder, withDefault} from '../../generators'; +import { UICompBuilder, withDefault } from "../../generators"; // Right-side attribute subframe -import {Section, sectionNames} from 'lowcoder-design'; +import { Section, sectionNames } from "lowcoder-design"; // Switch indicating whether the component is hidden or not -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; // Right property switch -import {BoolControl} from 'comps/controls/boolControl'; -import {styleControl} from 'comps/controls/styleControl'; //样式输入框 -import {jsonValueExposingStateControl} from 'comps/controls/codeStateControl'; -import {jsonControl, StringControl} from 'comps/controls/codeControl'; +import { BoolControl } from "comps/controls/boolControl"; +import { styleControl } from "comps/controls/styleControl"; //样式输入框 +import { jsonValueExposingStateControl } from "comps/controls/codeStateControl"; +import { jsonControl, StringControl } from "comps/controls/codeControl"; // Event Control import { clickEvent, @@ -25,9 +25,9 @@ import { eventHandlerControl, deleteEvent, mentionEvent, -} from 'comps/controls/eventHandlerControl'; +} from "comps/controls/eventHandlerControl"; -import {EditorContext} from 'comps/editorState'; +import { EditorContext } from "comps/editorState"; // Introducing styles import { @@ -35,15 +35,15 @@ import { CommentStyle, heightCalculator, widthCalculator, -} from 'comps/controls/styleControlConstants'; +} from "comps/controls/styleControlConstants"; // Initialise exposed values -import {stateComp, valueComp} from 'comps/generators/simpleGenerators'; +import { stateComp, valueComp } from "comps/generators/simpleGenerators"; // The component's api for exposing properties externally import { NameConfig, NameConfigHidden, withExposingConfigs, -} from 'comps/generators/withExposing'; +} from "comps/generators/withExposing"; import { commentDate, @@ -53,19 +53,19 @@ import { convertCommentData, checkUserInfoData, checkMentionListData, -} from './commentConstants'; -import {default as Avatar} from 'antd/es/avatar'; -import {default as List} from 'antd/es/list'; -import {default as Button} from 'antd/es/button'; -import {default as Mentions} from 'antd/es/mentions'; -import {default as Tooltip} from 'antd/es/tooltip'; -import VirtualList, {ListRef} from 'rc-virtual-list'; -import _ from 'lodash'; -import relativeTime from 'dayjs/plugin/relativeTime'; -import dayjs from 'dayjs'; +} from "./commentConstants"; +import { default as Avatar } from "antd/es/avatar"; +import { default as List } from "antd/es/list"; +import { default as Button } from "antd/es/button"; +import { default as Mentions } from "antd/es/mentions"; +import { default as Tooltip } from "antd/es/tooltip"; +import VirtualList, { ListRef } from "rc-virtual-list"; +import _ from "lodash"; +import relativeTime from "dayjs/plugin/relativeTime"; +import dayjs from "dayjs"; // import "dayjs/locale/zh-cn"; -import {getInitialsAndColorCode} from 'util/stringUtils'; -import {default as CloseOutlined} from '@ant-design/icons/CloseOutlined'; +import { getInitialsAndColorCode } from "util/stringUtils"; +import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined"; dayjs.extend(relativeTime); // dayjs.locale("zh-cn"); @@ -129,19 +129,19 @@ const CommentCompBase = ( deleteAble, animationStyle, } = props; - type PrefixType = '@' | keyof typeof mentionList; + type PrefixType = "@" | keyof typeof mentionList; // Used to save the consolidated list of mentions const [MentionListData, setMentionList] = useState([]); const [commentListData, setCommentListData] = useState([]); - const [prefix, setPrefix] = useState('@'); - const [context, setContext] = useState(''); + const [prefix, setPrefix] = useState("@"); + const [context, setContext] = useState(""); // Integrate the comment list with the names in the original mention list const mergeAllMentionList = (mentionList: any) => { setMentionList( _.merge(mentionList, { - '@': _.union( + "@": _.union( _.concat( - mentionList['@'], + mentionList["@"], _.map(commentListData, (item, index) => { return item?.user?.name; }) @@ -176,26 +176,26 @@ const CommentCompBase = ( const generateCommentAvatar = (item: commentDataTYPE) => { return ( props.onEvent('click')} + onClick={() => props.onEvent("click")} // If there is an avatar, no background colour is set, and if displayName is not null, displayName is called using getInitialsAndColorCode style={{ backgroundColor: item?.user?.avatar - ? '' + ? "" : getInitialsAndColorCode( item?.user?.displayName === undefined ? item?.user?.name : item?.user?.displayName )[1], - verticalAlign: 'middle', + verticalAlign: "middle", }} src={item?.user?.avatar} > - {' '} + {" "} {item?.user?.displayName ? item?.user?.displayName : /^([\u4e00-\u9fa5]{2,4})$/gi.test(item?.user?.name) - ? item?.user?.name.slice(-2) - : item?.user?.name[0]} + ? item?.user?.name.slice(-2) + : item?.user?.name[0]} ); }; @@ -211,16 +211,16 @@ const CommentCompBase = ( }; props.submitedItem.onChange(subObject); setCommentListData(_.concat(commentListData, [subObject])); - setContext(''); + setContext(""); mergeAllMentionList(mentionList); - props.onEvent('submit'); + props.onEvent("submit"); }; const handleDelete = (index: number) => { let temp = _.cloneDeep(commentListData); props.deletedItem.onChange(temp.splice(index, 1)); setCommentListData(temp); - props.onEvent('delete'); + props.onEvent("delete"); }; const onPressEnter = (e: any) => { @@ -230,46 +230,38 @@ const CommentCompBase = ( } }; return ( -

+ borderRadius: style.radius, + animation: animationStyle.animation, + animationDelay: animationStyle.animationDelay, + animationDuration: animationStyle.animationDuration, + animationIterationCount:animationStyle.animationIterationCount + }}>
+ title !== "" ? ( +
{commentListData.length > 1 ? title - .replaceAll('%d', commentListData.length.toString()) - .replace('comment', 'comments') - : title.replaceAll('%d', commentListData.length.toString())} + .replaceAll("%d", commentListData.length.toString()) + .replace("comment", "comments") + : title.replaceAll("%d", commentListData.length.toString())}
) : ( - '' + "" ) } size="small" @@ -290,7 +282,7 @@ const CommentCompBase = ( deleteAble ? [ handleDelete(index)} />, ] @@ -300,26 +292,26 @@ const CommentCompBase = ( props.onEvent('click')}> +
props.onEvent("click")}> {item?.user?.name} {dayjs(item?.createdAt).isValid() ? dayjs(item?.createdAt).fromNow() - : trans('comment.dateErr')} + : trans("comment.dateErr")}
@@ -331,26 +323,18 @@ const CommentCompBase = ( {sendCommentAble ? ( -
+
{ - dispatch( - changeChildAction('mentionName', option?.value, false) - ); - props.onEvent('mention'); + dispatch(changeChildAction("mentionName", option?.value, false)); + props.onEvent("mention"); }} value={context} rows={2} @@ -368,17 +352,17 @@ const CommentCompBase = (
) : ( - '' + "" )}
@@ -393,61 +377,58 @@ let CommentBasicComp = (function () { <>
{children.title.propertyView({ - label: trans('comment.title'), + label: trans("comment.title"), })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( <> -
- {children.value.propertyView({ - label: trans('comment.value'), - tooltip: CommentDataTooltip, - placeholder: '[]', - })} - {children.userInfo.propertyView({ - label: trans('comment.userInfo'), - tooltip: CommentUserDataTooltip, - })} - {children.mentionList.propertyView({ - label: trans('comment.mentionList'), - tooltip: trans('comment.mentionListDec'), - })} -
-
+
+ {children.value.propertyView({ + label: trans("comment.value"), + tooltip: CommentDataTooltip, + placeholder: "[]", + })} + {children.userInfo.propertyView({ + label: trans("comment.userInfo"), + tooltip: CommentUserDataTooltip, + })} + {children.mentionList.propertyView({ + label: trans("comment.mentionList"), + tooltip: trans("comment.mentionListDec"), + })} +
+
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} {children.sendCommentAble.propertyView({ - label: trans('comment.showSendButton'), + label: trans("comment.showSendButton"), })} {children.deleteAble.propertyView({ - label: trans('comment.deleteAble'), + label: trans("comment.deleteAble"), })}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( - <> -
- {children.sendCommentAble.getView() && - children.buttonText.propertyView({ - label: trans('comment.buttonTextDec'), - })} - {children.placeholder.propertyView({ - label: trans('comment.placeholderDec'), + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
+ {children.sendCommentAble.getView() && + children.buttonText.propertyView({ + label: trans("comment.buttonTextDec"), })} -
+ {children.placeholder.propertyView({ + label: trans("comment.placeholderDec"), + })} +
{children.style.getPropertyView()}
{children.animationStyle.getPropertyView()} -
- +
)} + )) .build(); @@ -459,9 +440,9 @@ CommentBasicComp = class extends CommentBasicComp { } }; export const CommentComp = withExposingConfigs(CommentBasicComp, [ - new NameConfig('commentList', trans('comment.commentList')), - new NameConfig('deletedItem', trans('comment.deletedItem')), - new NameConfig('submitedItem', trans('comment.submitedItem')), - new NameConfig('mentionName', trans('comment.submitedItem')), + new NameConfig("commentList", trans("comment.commentList")), + new NameConfig("deletedItem", trans("comment.deletedItem")), + new NameConfig("submitedItem", trans("comment.submitedItem")), + new NameConfig("mentionName", trans("comment.submitedItem")), NameConfigHidden, ]); From 2bb1441a42807fdfd43cd466d434e04050020466 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:09:18 +0500 Subject: [PATCH 112/155] formating removed-87 --- .../comps/comps/commentComp/commentComp.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index ad3653d19..eef014aef 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -38,7 +38,7 @@ import { } from "comps/controls/styleControlConstants"; // Initialise exposed values import { stateComp, valueComp } from "comps/generators/simpleGenerators"; -// The component's api for exposing properties externally +// The component"s api for exposing properties externally import { NameConfig, NameConfigHidden, @@ -86,26 +86,26 @@ const EventOptions = [ const childrenMap = { value: jsonControl(convertCommentData, commentDate), - title: withDefault(StringControl, trans('comment.titledDefaultValue')), - placeholder: withDefault(StringControl, trans('comment.placeholder')), - buttonText: withDefault(StringControl, trans('comment.buttonText')), + title: withDefault(StringControl, trans("comment.titledDefaultValue")), + placeholder: withDefault(StringControl, trans("comment.placeholder")), + buttonText: withDefault(StringControl, trans("comment.buttonText")), sendCommentAble: BoolControl.DEFAULT_TRUE, deleteAble: BoolControl, userInfo: jsonControl(checkUserInfoData, { - name: '{{currentUser.name}}', - email: '{{currentUser.email}}', + name: "{{currentUser.name}}", + email: "{{currentUser.email}}", }), mentionList: jsonControl(checkMentionListData, { - '@': ['Li Lei', 'Han Meimei'], - '#': ['123', '456', '789'], + "@": ["Li Lei", "Han Meimei"], + "#": ["123", "456", "789"], }), onEvent: eventHandlerControl(EventOptions), style: styleControl(CommentStyle), animationStyle: styleControl(AnimationStyle), - commentList: jsonValueExposingStateControl('commentList', []), - deletedItem: jsonValueExposingStateControl('deletedItem', []), - submitedItem: jsonValueExposingStateControl('submitedItem', []), - mentionName: valueComp(''), + commentList: jsonValueExposingStateControl("commentList", []), + deletedItem: jsonValueExposingStateControl("deletedItem", []), + submitedItem: jsonValueExposingStateControl("submitedItem", []), + mentionName: valueComp(""), }; const CommentCompBase = ( @@ -253,7 +253,7 @@ const CommentCompBase = ( +
{commentListData.length > 1 ? title .replaceAll("%d", commentListData.length.toString()) From 04c9f2d1265b8bcffcb97bf3438ff413455b447f Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:10:57 +0500 Subject: [PATCH 113/155] formating removed-88 --- .../lowcoder/src/comps/comps/commentComp/commentComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index eef014aef..bb99d9fce 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -38,7 +38,7 @@ import { } from "comps/controls/styleControlConstants"; // Initialise exposed values import { stateComp, valueComp } from "comps/generators/simpleGenerators"; -// The component"s api for exposing properties externally +// The component's api for exposing properties externally import { NameConfig, NameConfigHidden, @@ -253,7 +253,7 @@ const CommentCompBase = ( +
{commentListData.length > 1 ? title .replaceAll("%d", commentListData.length.toString()) From 209d24843b243c59dd6923fd5efe96d387e059b9 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:11:32 +0500 Subject: [PATCH 114/155] formating removed-89 --- .../lowcoder/src/comps/comps/commentComp/commentComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index bb99d9fce..0ec885664 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -253,7 +253,7 @@ const CommentCompBase = ( +
{commentListData.length > 1 ? title .replaceAll("%d", commentListData.length.toString()) From 07ab330a7bd4af24da6ae49d67aae8012083c85b Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:14:54 +0500 Subject: [PATCH 115/155] formating removed-90 --- .../comps/comps/containerComp/cardComp.tsx | 274 +++++++----------- 1 file changed, 110 insertions(+), 164 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index 69d8661e6..acb0d8429 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -1,42 +1,26 @@ -import ReactResizeDetector from 'react-resize-detector'; +import ReactResizeDetector from "react-resize-detector"; +import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; +import { Section, sectionNames } from "lowcoder-design"; +import { TriContainer } from "../triContainerComp/triContainer"; import { - NameConfigHidden, - withExposingConfigs, -} from 'comps/generators/withExposing'; -import {Section, sectionNames} from 'lowcoder-design'; -import {TriContainer} from '../triContainerComp/triContainer'; -import {ContainerCompBuilder} from '../triContainerComp/triContainerCompBuilder'; -import { - disabledPropertyView, - hiddenPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import {BoolCodeControl, StringControl} from 'comps/controls/codeControl'; -import {BoolControl} from 'comps/controls/boolControl'; -import {useContext, useEffect, useRef, useState} from 'react'; -import {EditorContext} from 'comps/editorState'; -import {Card} from 'antd'; -import styled from 'styled-components'; -import { - AnimationStyle, - AnimationStyleType, - CardHeaderStyle, - CardHeaderStyleType, - CardStyle, - CardStyleType, -} from 'comps/controls/styleControlConstants'; -import {MultiCompBuilder, withDefault} from 'comps/generators'; -import {IconControl} from 'comps/controls/iconControl'; -import { - ButtonEventHandlerControl, - CardEventHandlerControl, - clickEvent, - refreshEvent, -} from 'comps/controls/eventHandlerControl'; -import {optionsControl} from 'comps/controls/optionsControl'; -import {dropdownControl} from 'comps/controls/dropdownControl'; -import {styleControl} from 'comps/controls/styleControl'; -const {Meta} = Card; + ContainerCompBuilder, +} from "../triContainerComp/triContainerCompBuilder"; +import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; +import { BoolControl } from "comps/controls/boolControl"; +import { useContext, useEffect, useRef, useState } from "react"; +import { EditorContext } from "comps/editorState"; +import { Card } from "antd"; +import styled from "styled-components"; +import { AnimationStyle, AnimationStyleType, CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants"; +import { MultiCompBuilder, withDefault } from "comps/generators"; +import { IconControl } from "comps/controls/iconControl"; +import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl"; +import { optionsControl } from "comps/controls/optionsControl"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { styleControl } from "comps/controls/styleControl"; +const { Meta } = Card; const Warpper = styled.div<{ $style: CardStyleType | undefined; @@ -44,7 +28,7 @@ const Warpper = styled.div<{ $cardType: string; $headerStyle: CardHeaderStyleType; $bodyStyle: CardHeaderStyleType; - $animationStyle: AnimationStyleType; + $animationStyle:AnimationStyleType; }>` height: 100%; width: 100%; @@ -93,7 +77,7 @@ const Warpper = styled.div<{ border-style: ${(props) => props.$style?.borderStyle}; border-radius: ${(props) => props.$style?.radius}; border-width: ${(props) => props.$style?.borderWidth}; - ${(props) => props.$animationStyle} + ${props=>props.$animationStyle} } .ant-card-body { display: ${(props) => (props.$showMate ? '' : 'none')}; @@ -122,31 +106,28 @@ const Warpper = styled.div<{ const ContainWarpper = styled.div` height: 100%; width: 100%; -`; +` -const IconWarpper = styled.div<{ - $style: CardStyleType | undefined; - disabled: boolean; -}>` - pointer-events: ${(props) => (props.disabled ? 'none' : '')}; +const IconWarpper = styled.div<{ $style: CardStyleType | undefined, disabled: boolean }>` + pointer-events: ${props => props.disabled ? 'none' : ''}; svg { - color: ${(props) => (props.disabled ? '#d9d9d9' : props.$style?.IconColor)}; + color: ${props => props.disabled ? '#d9d9d9' : props.$style?.IconColor}; } &:hover { svg { - color: ${(props) => props.$style?.activateColor}; + color: ${props => props.$style?.activateColor}; } - } -`; +} +` const cardTypeOption = [ - {label: trans('card.common'), value: 'common'}, - {label: trans('card.custom'), value: 'custom'}, + { label: trans("card.common"), value: "common" }, + { label: trans("card.custom"), value: "custom" }, ] as const; const sizeOptions = [ - {label: trans('card.default'), value: 'default'}, - {label: trans('card.small'), value: 'small'}, + { label: trans("card.default"), value: "default" }, + { label: trans("card.small"), value: "small" }, ] as const; const EventOptions = [clickEvent, refreshEvent] as const; @@ -154,7 +135,7 @@ const EventOptions = [clickEvent, refreshEvent] as const; const ActionIconOption = new MultiCompBuilder( { label: StringControl, - icon: withDefault(IconControl, '/icon:antd/settingoutlined'), + icon: withDefault(IconControl, "/icon:antd/settingoutlined"), disabled: BoolCodeControl, hidden: BoolCodeControl, onEvent: ButtonEventHandlerControl, @@ -163,7 +144,7 @@ const ActionIconOption = new MultiCompBuilder( ) .setPropertyViewFn((children) => ( <> - {children.icon.propertyView({label: trans('button.icon')})} + {children.icon.propertyView({ label: trans("button.icon") })} {disabledPropertyView(children)} {hiddenPropertyView(children)} {children.onEvent.getPropertyView()} @@ -173,18 +154,9 @@ const ActionIconOption = new MultiCompBuilder( const ActionOptionControl = optionsControl(ActionIconOption, { initOptions: [ - { - label: trans('optionsControl.optionI', {i: 1}), - icon: '/icon:antd/settingoutlined', - }, - { - label: trans('optionsControl.optionI', {i: 2}), - icon: '/icon:antd/editoutlined', - }, - { - label: trans('optionsControl.optionI', {i: 3}), - icon: '/icon:antd/ellipsisoutlined', - }, + { label: trans("optionsControl.optionI", { i: 1 }), icon: "/icon:antd/settingoutlined" }, + { label: trans("optionsControl.optionI", { i: 2 }), icon: "/icon:antd/editoutlined" }, + { label: trans("optionsControl.optionI", { i: 3 }), icon: "/icon:antd/ellipsisoutlined" }, ], }); @@ -222,7 +194,7 @@ export const ContainerBaseComp = (function () { CONTAINER_BODY_PADDING: props.style.containerBodyPadding, border: '#00000000', background: props.style.background, - }); + }) const conRef = useRef(null); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); @@ -251,54 +223,34 @@ export const ContainerBaseComp = (function () { onMouseLeave={() => props.onEvent('blur')} onClick={() => props.onEvent('click')} > - { - props.onEvent('clickExtra')}> - {props.extraTitle} - - ) - } - // 内容 - cover={ - props.cardType == 'common' && - props.CoverImg && ( - - ) - } - actions={ - props.cardType == 'common' && props.showActionIcon - ? props.actionOptions - .filter((item) => !item.hidden) - .map((item) => { - return ( - item.onEvent('click')} - disabled={item.disabled} - $style={props.style} - > - {item.icon} - - ); - }) - : [] + { props.onEvent('clickExtra')}>{props.extraTitle}} + + // 内容 + cover={props.cardType == 'common' && props.CoverImg && } + actions={props.cardType == 'common' && props.showActionIcon ? + props.actionOptions.filter(item => !item.hidden).map(item => { + return ( + item.onEvent('click')} + disabled={item.disabled} + $style={props.style} + > + {item.icon} + ) } - > - {props.cardType == 'common' && props.showMeta && ( - - )} - {props.cardType == 'custom' && ( - - - - )} - + ) : [] + } + > + {props.cardType == 'common' && props.showMeta && } + {props.cardType == 'custom' && + } + } @@ -307,60 +259,56 @@ export const ContainerBaseComp = (function () { .setPropertyViewFn((children) => { return ( <> - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.size.propertyView({ - label: trans('card.titleSize'), + label: trans("card.titleSize"), radioButton: true, })} - {children.showTitle.propertyView({ - label: trans('card.showTitle'), - })} - {children.showTitle.getView() && - children.title.propertyView({label: trans('card.title')})} - {children.showTitle.getView() && - children.extraTitle.propertyView({ - label: trans('card.extraTitle'), - })} - {children.cardType.getView() == 'common' && - children.CoverImg.propertyView({ - label: trans('card.CoverImg'), - })} + {children.showTitle.propertyView({ label: trans('card.showTitle') })} + {children.showTitle.getView() && children.title.propertyView({ label: trans('card.title') })} + {children.showTitle.getView() && children.extraTitle.propertyView({ label: trans('card.extraTitle') })} + { + children.cardType.getView() == 'common' && + children.CoverImg.propertyView({ label: trans('card.CoverImg') }) + } - {children.cardType.getView() == 'common' && + { + children.cardType.getView() == 'common' && children.CoverImg.getView() && - children.imgSrc.propertyView({label: trans('card.imgSrc')})} - {children.cardType.getView() == 'common' && + children.imgSrc.propertyView({ label: trans('card.imgSrc') }) + } + { + children.cardType.getView() == 'common' && children.CoverImg.getView() && - children.imgHeight.propertyView({ - label: trans('card.imgHeight'), - })} - {children.cardType.getView() == 'common' && - children.showMeta.propertyView({ - label: trans('card.showMeta'), - })} - {children.cardType.getView() == 'common' && + children.imgHeight.propertyView({ label: trans('card.imgHeight') }) + } + { + children.cardType.getView() == 'common' && + children.showMeta.propertyView({ label: trans('card.showMeta') }) + } + { + children.cardType.getView() == 'common' && children.showMeta.getView() && - children.metaTitle.propertyView({ - label: trans('card.metaTitle'), - })} - {children.cardType.getView() == 'common' && + children.metaTitle.propertyView({ label: trans('card.metaTitle') }) + } + { + children.cardType.getView() == 'common' && children.showMeta.getView() && - children.metaDesc.propertyView({ - label: trans('card.metaDesc'), - })} + children.metaDesc.propertyView({ label: trans('card.metaDesc') }) + } - {children.cardType.getView() == 'common' && - children.showActionIcon.propertyView({ - label: trans('card.showActionIcon'), - })} - {children.cardType.getView() == 'common' && + { + children.cardType.getView() == 'common' && + children.showActionIcon.propertyView({ label: trans('card.showActionIcon') }) + } + { + children.cardType.getView() == 'common' && children.showActionIcon.getView() && - children.actionOptions.propertyView({ - title: trans('card.actionOptions'), - })} + children.actionOptions.propertyView({ title: trans('card.actionOptions') }) + } +
{hiddenPropertyView(children)} @@ -369,12 +317,11 @@ export const ContainerBaseComp = (function () { )} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.cardType.propertyView({ - label: trans('card.cardType'), + label: trans("card.cardType"), radioButton: true, })}
@@ -398,6 +345,5 @@ export const ContainerBaseComp = (function () { .build(); })(); -export const CardComp = withExposingConfigs(ContainerBaseComp, [ - NameConfigHidden, -]); +export const CardComp = withExposingConfigs(ContainerBaseComp, [NameConfigHidden]); + From 6262cc731d48c70c949c147ac1b1f4113db7dd5f Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:18:24 +0500 Subject: [PATCH 116/155] formating removed-91 --- .../comps/comps/containerComp/cardComp.tsx | 108 +++++++++--------- 1 file changed, 52 insertions(+), 56 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index acb0d8429..ec8711f76 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -32,74 +32,73 @@ const Warpper = styled.div<{ }>` height: 100%; width: 100%; - .ant-card-small > .ant-card-head { - background-color: ${(props) => props.$headerStyle?.background} !important; - border: ${(props) => props.$headerStyle?.border}; - border-style: ${(props) => props.$headerStyle?.borderStyle}; - border-width: ${(props) => props.$headerStyle?.borderWidth}; - border-radius: ${(props) => props.$headerStyle?.radius}; - font-size: ${(props) => props.$headerStyle?.textSize}; - font-style: ${(props) => props.$headerStyle?.fontStyle}; - font-family: ${(props) => props.$headerStyle?.fontFamily}; - font-weight: ${(props) => props.$headerStyle?.textWeight}; - text-transform: ${(props) => props.$headerStyle?.textTransform}; - text-decoration: ${(props) => props.$headerStyle?.textDecoration}; - color: ${(props) => props.$headerStyle?.text}; - rotate: ${(props) => props.$headerStyle?.rotation}; - margin: ${(props) => props.$headerStyle?.margin}; - padding: ${(props) => props.$headerStyle?.padding}; - } + .ant-card-small >.ant-card-head { + background-color: ${props => props.$headerStyle?.background} !important; + border: ${props => props.$headerStyle?.border}; + border-style: ${props => props.$headerStyle?.borderStyle}; + border-width: ${props => props.$headerStyle?.borderWidth}; + border-radius: ${props => props.$headerStyle?.radius}; + font-size: ${props => props.$headerStyle?.textSize}; + font-style: ${props => props.$headerStyle?.fontStyle}; + font-family: ${props => props.$headerStyle?.fontFamily}; + font-weight: ${props => props.$headerStyle?.textWeight}; + text-transform: ${props => props.$headerStyle?.textTransform}; + text-decoration: ${props => props.$headerStyle?.textDecoration}; + color: ${props => props.$headerStyle?.text}; + rotate: ${props => props.$headerStyle?.rotation}; + margin: ${props => props.$headerStyle?.margin}; + padding: ${props => props.$headerStyle?.padding}; .ant-card .ant-card-actions { - border-top: 1px solid ${(props) => props.$style?.border}; + border-top: 1px solid ${props => props.$style?.border}; } - .ant-card .ant-card-actions > li:not(:last-child) { - border-inline-end: 1px solid ${(props) => props.$style?.border}; + .ant-card .ant-card-actions>li:not(:last-child) { + border-inline-end: 1px solid ${props => props.$style?.border}; } .ant-card .ant-card-actions { - background-color: ${(props) => props.$style?.background}; + background-color: ${props => props.$style?.background}; } .ant-card .ant-card-body { - background-color: ${(props) => props.$bodyStyle?.background} !important; - border: ${(props) => props.$bodyStyle?.border}; - border-style: ${(props) => props.$bodyStyle?.borderStyle}; - border-width: ${(props) => props.$bodyStyle?.borderWidth}; - border-radius: ${(props) => props.$bodyStyle?.radius}; - rotate: ${(props) => props.$bodyStyle?.rotation}; - margin: ${(props) => props.$bodyStyle?.margin}; - padding: ${(props) => props.$bodyStyle?.padding}; + background-color: ${props => props.$bodyStyle?.background} !important; + border: ${props => props.$bodyStyle?.border}; + border-style: ${props => props.$bodyStyle?.borderStyle}; + border-width: ${props => props.$bodyStyle?.borderWidth}; + border-radius: ${props => props.$bodyStyle?.radius}; + rotate: ${props => props.$bodyStyle?.rotation}; + margin: ${props => props.$bodyStyle?.margin}; + padding: ${props => props.$bodyStyle?.padding}; } .ant-card { display: flex; flex-direction: column; justify-content: space-between; - background-color: ${(props) => props.$style?.background}; - border: ${(props) => props.$style?.border}; - border-style: ${(props) => props.$style?.borderStyle}; - border-radius: ${(props) => props.$style?.radius}; - border-width: ${(props) => props.$style?.borderWidth}; + background-color: ${props => props.$style?.background}; + border: ${props => props.$style?.border}; + border-style: ${props => props.$style?.borderStyle}; + border-radius: ${props => props.$style?.radius}; + border-width: ${props => props.$style?.borderWidth}; ${props=>props.$animationStyle} } .ant-card-body { - display: ${(props) => (props.$showMate ? '' : 'none')}; - height: ${(props) => (props.$cardType == 'custom' ? '100%' : 'auto')}; + display: ${props => props.$showMate ? '' : 'none'}; + height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'}; } - .ant-card-body .ant-card-meta .ant-card-meta-title { - color: ${(props) => props.$bodyStyle?.text} !important; - font-size: ${(props) => props.$bodyStyle?.textSize}; - font-style: ${(props) => props.$bodyStyle?.fontStyle}; - font-family: ${(props) => props.$bodyStyle?.fontFamily}; - font-weight: ${(props) => props.$bodyStyle?.textWeight}; - text-transform: ${(props) => props.$bodyStyle?.textTransform}; - text-decoration: ${(props) => props.$bodyStyle?.textDecoration}; + .ant-card-body .ant-card-meta .ant-card-meta-title{ + color: ${props => props.$bodyStyle?.text} !important; + font-size: ${props => props.$bodyStyle?.textSize}; + font-style: ${props => props.$bodyStyle?.fontStyle}; + font-family: ${props => props.$bodyStyle?.fontFamily}; + font-weight: ${props => props.$bodyStyle?.textWeight}; + text-transform: ${props => props.$bodyStyle?.textTransform}; + text-decoration: ${props => props.$bodyStyle?.textDecoration}; } - .ant-card-body .ant-card-meta .ant-card-meta-description { - color: ${(props) => props.$bodyStyle?.text} !important; - font-size: ${(props) => props.$bodyStyle?.textSize}; - font-style: ${(props) => props.$bodyStyle?.fontStyle}; - font-family: ${(props) => props.$bodyStyle?.fontFamily}; - font-weight: ${(props) => props.$bodyStyle?.textWeight}; - text-transform: ${(props) => props.$bodyStyle?.textTransform}; - text-decoration: ${(props) => props.$bodyStyle?.textDecoration}; + .ant-card-body .ant-card-meta .ant-card-meta-description{ + color: ${props => props.$bodyStyle?.text} !important; + font-size: ${props => props.$bodyStyle?.textSize}; + font-style: ${props => props.$bodyStyle?.fontStyle}; + font-family: ${props => props.$bodyStyle?.fontFamily}; + font-weight: ${props => props.$bodyStyle?.textWeight}; + text-transform: ${props => props.$bodyStyle?.textTransform}; + text-decoration: ${props => props.$bodyStyle?.textDecoration}; } `; @@ -168,10 +167,7 @@ export const ContainerBaseComp = (function () { extraTitle: withDefault(StringControl, trans('card.more')), cardType: dropdownControl(cardTypeOption, 'common'), CoverImg: BoolControl.DEFAULT_TRUE, - imgSrc: withDefault( - StringControl, - 'https://lowcoder.cloud/images/e0a89736c6be4393893d2981ac1fd753.png' - ), + imgSrc: withDefault(StringControl, "https://lowcoder.cloud/images/e0a89736c6be4393893d2981ac1fd753.png"), imgHeight: withDefault(StringControl, 'auto'), showMeta: BoolControl.DEFAULT_TRUE, metaTitle: withDefault(StringControl, trans('card.metaTitle')), From 2b6c27665b456492dcbb68657c234417fe55d62b Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:19:53 +0500 Subject: [PATCH 117/155] formating removed-92 --- .../lowcoder/src/comps/comps/containerComp/cardComp.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index ec8711f76..a5cbc0cab 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -48,6 +48,7 @@ const Warpper = styled.div<{ rotate: ${props => props.$headerStyle?.rotation}; margin: ${props => props.$headerStyle?.margin}; padding: ${props => props.$headerStyle?.padding}; + } .ant-card .ant-card-actions { border-top: 1px solid ${props => props.$style?.border}; } @@ -58,7 +59,7 @@ const Warpper = styled.div<{ background-color: ${props => props.$style?.background}; } .ant-card .ant-card-body { - background-color: ${props => props.$bodyStyle?.background} !important; + background-color: ${props => props.$bodyStyle?.background} !important; border: ${props => props.$bodyStyle?.border}; border-style: ${props => props.$bodyStyle?.borderStyle}; border-width: ${props => props.$bodyStyle?.borderWidth}; @@ -71,7 +72,7 @@ const Warpper = styled.div<{ display: flex; flex-direction: column; justify-content: space-between; - background-color: ${props => props.$style?.background}; + background-color: ${props => props.$style?.background}; border: ${props => props.$style?.border}; border-style: ${props => props.$style?.borderStyle}; border-radius: ${props => props.$style?.radius}; From 0b35086e90b04c49ffaeadec462d5748106a3589 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:20:42 +0500 Subject: [PATCH 118/155] formating removed-93 --- .../comps/comps/containerComp/cardComp.tsx | 106 +++++++++--------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index a5cbc0cab..5d6641e3c 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -28,78 +28,78 @@ const Warpper = styled.div<{ $cardType: string; $headerStyle: CardHeaderStyleType; $bodyStyle: CardHeaderStyleType; - $animationStyle:AnimationStyleType; + $animationStyle: AnimationStyleType; }>` height: 100%; width: 100%; - .ant-card-small >.ant-card-head { - background-color: ${props => props.$headerStyle?.background} !important; - border: ${props => props.$headerStyle?.border}; - border-style: ${props => props.$headerStyle?.borderStyle}; - border-width: ${props => props.$headerStyle?.borderWidth}; - border-radius: ${props => props.$headerStyle?.radius}; - font-size: ${props => props.$headerStyle?.textSize}; - font-style: ${props => props.$headerStyle?.fontStyle}; - font-family: ${props => props.$headerStyle?.fontFamily}; - font-weight: ${props => props.$headerStyle?.textWeight}; - text-transform: ${props => props.$headerStyle?.textTransform}; - text-decoration: ${props => props.$headerStyle?.textDecoration}; - color: ${props => props.$headerStyle?.text}; - rotate: ${props => props.$headerStyle?.rotation}; - margin: ${props => props.$headerStyle?.margin}; - padding: ${props => props.$headerStyle?.padding}; + .ant-card-small > .ant-card-head { + background-color: ${(props) => props.$headerStyle?.background} !important; + border: ${(props) => props.$headerStyle?.border}; + border-style: ${(props) => props.$headerStyle?.borderStyle}; + border-width: ${(props) => props.$headerStyle?.borderWidth}; + border-radius: ${(props) => props.$headerStyle?.radius}; + font-size: ${(props) => props.$headerStyle?.textSize}; + font-style: ${(props) => props.$headerStyle?.fontStyle}; + font-family: ${(props) => props.$headerStyle?.fontFamily}; + font-weight: ${(props) => props.$headerStyle?.textWeight}; + text-transform: ${(props) => props.$headerStyle?.textTransform}; + text-decoration: ${(props) => props.$headerStyle?.textDecoration}; + color: ${(props) => props.$headerStyle?.text}; + rotate: ${(props) => props.$headerStyle?.rotation}; + margin: ${(props) => props.$headerStyle?.margin}; + padding: ${(props) => props.$headerStyle?.padding}; } .ant-card .ant-card-actions { - border-top: 1px solid ${props => props.$style?.border}; + border-top: 1px solid ${(props) => props.$style?.border}; } - .ant-card .ant-card-actions>li:not(:last-child) { - border-inline-end: 1px solid ${props => props.$style?.border}; + .ant-card .ant-card-actions > li:not(:last-child) { + border-inline-end: 1px solid ${(props) => props.$style?.border}; } .ant-card .ant-card-actions { - background-color: ${props => props.$style?.background}; + background-color: ${(props) => props.$style?.background}; } .ant-card .ant-card-body { - background-color: ${props => props.$bodyStyle?.background} !important; - border: ${props => props.$bodyStyle?.border}; - border-style: ${props => props.$bodyStyle?.borderStyle}; - border-width: ${props => props.$bodyStyle?.borderWidth}; - border-radius: ${props => props.$bodyStyle?.radius}; - rotate: ${props => props.$bodyStyle?.rotation}; - margin: ${props => props.$bodyStyle?.margin}; - padding: ${props => props.$bodyStyle?.padding}; + background-color: ${(props) => props.$bodyStyle?.background} !important; + border: ${(props) => props.$bodyStyle?.border}; + border-style: ${(props) => props.$bodyStyle?.borderStyle}; + border-width: ${(props) => props.$bodyStyle?.borderWidth}; + border-radius: ${(props) => props.$bodyStyle?.radius}; + rotate: ${(props) => props.$bodyStyle?.rotation}; + margin: ${(props) => props.$bodyStyle?.margin}; + padding: ${(props) => props.$bodyStyle?.padding}; } .ant-card { display: flex; flex-direction: column; justify-content: space-between; - background-color: ${props => props.$style?.background}; - border: ${props => props.$style?.border}; - border-style: ${props => props.$style?.borderStyle}; - border-radius: ${props => props.$style?.radius}; - border-width: ${props => props.$style?.borderWidth}; - ${props=>props.$animationStyle} + background-color: ${(props) => props.$style?.background}; + border: ${(props) => props.$style?.border}; + border-style: ${(props) => props.$style?.borderStyle}; + border-radius: ${(props) => props.$style?.radius}; + border-width: ${(props) => props.$style?.borderWidth}; + ${(props) => props.$animationStyle} } .ant-card-body { - display: ${props => props.$showMate ? '' : 'none'}; - height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'}; + display: ${(props) => (props.$showMate ? '' : 'none')}; + height: ${(props) => (props.$cardType == 'custom' ? '100%' : 'auto')}; } - .ant-card-body .ant-card-meta .ant-card-meta-title{ - color: ${props => props.$bodyStyle?.text} !important; - font-size: ${props => props.$bodyStyle?.textSize}; - font-style: ${props => props.$bodyStyle?.fontStyle}; - font-family: ${props => props.$bodyStyle?.fontFamily}; - font-weight: ${props => props.$bodyStyle?.textWeight}; - text-transform: ${props => props.$bodyStyle?.textTransform}; - text-decoration: ${props => props.$bodyStyle?.textDecoration}; + .ant-card-body .ant-card-meta .ant-card-meta-title { + color: ${(props) => props.$bodyStyle?.text} !important; + font-size: ${(props) => props.$bodyStyle?.textSize}; + font-style: ${(props) => props.$bodyStyle?.fontStyle}; + font-family: ${(props) => props.$bodyStyle?.fontFamily}; + font-weight: ${(props) => props.$bodyStyle?.textWeight}; + text-transform: ${(props) => props.$bodyStyle?.textTransform}; + text-decoration: ${(props) => props.$bodyStyle?.textDecoration}; } - .ant-card-body .ant-card-meta .ant-card-meta-description{ - color: ${props => props.$bodyStyle?.text} !important; - font-size: ${props => props.$bodyStyle?.textSize}; - font-style: ${props => props.$bodyStyle?.fontStyle}; - font-family: ${props => props.$bodyStyle?.fontFamily}; - font-weight: ${props => props.$bodyStyle?.textWeight}; - text-transform: ${props => props.$bodyStyle?.textTransform}; - text-decoration: ${props => props.$bodyStyle?.textDecoration}; + .ant-card-body .ant-card-meta .ant-card-meta-description { + color: ${(props) => props.$bodyStyle?.text} !important; + font-size: ${(props) => props.$bodyStyle?.textSize}; + font-style: ${(props) => props.$bodyStyle?.fontStyle}; + font-family: ${(props) => props.$bodyStyle?.fontFamily}; + font-weight: ${(props) => props.$bodyStyle?.textWeight}; + text-transform: ${(props) => props.$bodyStyle?.textTransform}; + text-decoration: ${(props) => props.$bodyStyle?.textDecoration}; } `; From 5ee318efdbc79e343df4f1797903d503e20b3fc0 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:21:19 +0500 Subject: [PATCH 119/155] formating removed-94 --- .../comps/comps/containerComp/cardComp.tsx | 106 +++++++++--------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index 5d6641e3c..9cdf6f4eb 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -28,78 +28,78 @@ const Warpper = styled.div<{ $cardType: string; $headerStyle: CardHeaderStyleType; $bodyStyle: CardHeaderStyleType; - $animationStyle: AnimationStyleType; + $animationStyle:AnimationStyleType; }>` height: 100%; width: 100%; - .ant-card-small > .ant-card-head { - background-color: ${(props) => props.$headerStyle?.background} !important; - border: ${(props) => props.$headerStyle?.border}; - border-style: ${(props) => props.$headerStyle?.borderStyle}; - border-width: ${(props) => props.$headerStyle?.borderWidth}; - border-radius: ${(props) => props.$headerStyle?.radius}; - font-size: ${(props) => props.$headerStyle?.textSize}; - font-style: ${(props) => props.$headerStyle?.fontStyle}; - font-family: ${(props) => props.$headerStyle?.fontFamily}; - font-weight: ${(props) => props.$headerStyle?.textWeight}; - text-transform: ${(props) => props.$headerStyle?.textTransform}; - text-decoration: ${(props) => props.$headerStyle?.textDecoration}; - color: ${(props) => props.$headerStyle?.text}; - rotate: ${(props) => props.$headerStyle?.rotation}; - margin: ${(props) => props.$headerStyle?.margin}; - padding: ${(props) => props.$headerStyle?.padding}; + .ant-card-small >.ant-card-head { + background-color: ${props => props.$headerStyle?.background} !important; + border: ${props => props.$headerStyle?.border}; + border-style: ${props => props.$headerStyle?.borderStyle}; + border-width: ${props => props.$headerStyle?.borderWidth}; + border-radius: ${props => props.$headerStyle?.radius}; + font-size: ${props => props.$headerStyle?.textSize}; + font-style: ${props => props.$headerStyle?.fontStyle}; + font-family: ${props => props.$headerStyle?.fontFamily}; + font-weight: ${props => props.$headerStyle?.textWeight}; + text-transform: ${props => props.$headerStyle?.textTransform}; + text-decoration: ${props => props.$headerStyle?.textDecoration}; + color: ${props => props.$headerStyle?.text}; + rotate: ${props => props.$headerStyle?.rotation}; + margin: ${props => props.$headerStyle?.margin}; + padding: ${props => props.$headerStyle?.padding}; } .ant-card .ant-card-actions { - border-top: 1px solid ${(props) => props.$style?.border}; + border-top: 1px solid ${props => props.$style?.border}; } - .ant-card .ant-card-actions > li:not(:last-child) { - border-inline-end: 1px solid ${(props) => props.$style?.border}; + .ant-card .ant-card-actions>li:not(:last-child) { + border-inline-end: 1px solid ${props => props.$style?.border}; } .ant-card .ant-card-actions { - background-color: ${(props) => props.$style?.background}; + background-color: ${props => props.$style?.background}; } .ant-card .ant-card-body { - background-color: ${(props) => props.$bodyStyle?.background} !important; - border: ${(props) => props.$bodyStyle?.border}; - border-style: ${(props) => props.$bodyStyle?.borderStyle}; - border-width: ${(props) => props.$bodyStyle?.borderWidth}; - border-radius: ${(props) => props.$bodyStyle?.radius}; - rotate: ${(props) => props.$bodyStyle?.rotation}; - margin: ${(props) => props.$bodyStyle?.margin}; - padding: ${(props) => props.$bodyStyle?.padding}; + background-color: ${props => props.$bodyStyle?.background} !important; + border: ${props => props.$bodyStyle?.border}; + border-style: ${props => props.$bodyStyle?.borderStyle}; + border-width: ${props => props.$bodyStyle?.borderWidth}; + border-radius: ${props => props.$bodyStyle?.radius}; + rotate: ${props => props.$bodyStyle?.rotation}; + margin: ${props => props.$bodyStyle?.margin}; + padding: ${props => props.$bodyStyle?.padding}; } .ant-card { display: flex; flex-direction: column; justify-content: space-between; - background-color: ${(props) => props.$style?.background}; - border: ${(props) => props.$style?.border}; - border-style: ${(props) => props.$style?.borderStyle}; - border-radius: ${(props) => props.$style?.radius}; - border-width: ${(props) => props.$style?.borderWidth}; - ${(props) => props.$animationStyle} + background-color: ${props => props.$style?.background}; + border: ${props => props.$style?.border}; + border-style: ${props => props.$style?.borderStyle}; + border-radius: ${props => props.$style?.radius}; + border-width: ${props => props.$style?.borderWidth}; + ${props=>props.$animationStyle} } .ant-card-body { - display: ${(props) => (props.$showMate ? '' : 'none')}; - height: ${(props) => (props.$cardType == 'custom' ? '100%' : 'auto')}; + display: ${props => props.$showMate ? '' : 'none'}; + height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'}; } - .ant-card-body .ant-card-meta .ant-card-meta-title { - color: ${(props) => props.$bodyStyle?.text} !important; - font-size: ${(props) => props.$bodyStyle?.textSize}; - font-style: ${(props) => props.$bodyStyle?.fontStyle}; - font-family: ${(props) => props.$bodyStyle?.fontFamily}; - font-weight: ${(props) => props.$bodyStyle?.textWeight}; - text-transform: ${(props) => props.$bodyStyle?.textTransform}; - text-decoration: ${(props) => props.$bodyStyle?.textDecoration}; + .ant-card-body .ant-card-meta .ant-card-meta-title{ + color: ${props => props.$bodyStyle?.text} !important; + font-size: ${props => props.$bodyStyle?.textSize}; + font-style: ${props => props.$bodyStyle?.fontStyle}; + font-family: ${props => props.$bodyStyle?.fontFamily}; + font-weight: ${props => props.$bodyStyle?.textWeight}; + text-transform: ${props => props.$bodyStyle?.textTransform}; + text-decoration: ${props => props.$bodyStyle?.textDecoration}; } - .ant-card-body .ant-card-meta .ant-card-meta-description { - color: ${(props) => props.$bodyStyle?.text} !important; - font-size: ${(props) => props.$bodyStyle?.textSize}; - font-style: ${(props) => props.$bodyStyle?.fontStyle}; - font-family: ${(props) => props.$bodyStyle?.fontFamily}; - font-weight: ${(props) => props.$bodyStyle?.textWeight}; - text-transform: ${(props) => props.$bodyStyle?.textTransform}; - text-decoration: ${(props) => props.$bodyStyle?.textDecoration}; + .ant-card-body .ant-card-meta .ant-card-meta-description{ + color: ${props => props.$bodyStyle?.text} !important; + font-size: ${props => props.$bodyStyle?.textSize}; + font-style: ${props => props.$bodyStyle?.fontStyle}; + font-family: ${props => props.$bodyStyle?.fontFamily}; + font-weight: ${props => props.$bodyStyle?.textWeight}; + text-transform: ${props => props.$bodyStyle?.textTransform}; + text-decoration: ${props => props.$bodyStyle?.textDecoration}; } `; From e361bf70ee24ab077af45df78abf89d354410258 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:22:02 +0500 Subject: [PATCH 120/155] formating removed-95 --- .../lowcoder/src/comps/comps/containerComp/cardComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index 9cdf6f4eb..66991fb83 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -59,7 +59,7 @@ const Warpper = styled.div<{ background-color: ${props => props.$style?.background}; } .ant-card .ant-card-body { - background-color: ${props => props.$bodyStyle?.background} !important; + background-color: ${props => props.$bodyStyle?.background} !important; border: ${props => props.$bodyStyle?.border}; border-style: ${props => props.$bodyStyle?.borderStyle}; border-width: ${props => props.$bodyStyle?.borderWidth}; From 01b27f40c5780ccc942342884c558914d09fde2b Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:23:34 +0500 Subject: [PATCH 121/155] formating removed-96 --- .../src/comps/comps/dateComp/dateComp.tsx | 461 +++++++----------- 1 file changed, 179 insertions(+), 282 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 4ed0f6713..5622adbb7 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -1,40 +1,27 @@ -import _, {noop} from 'lodash'; -import dayjs from 'dayjs'; -import {RecordConstructorToComp, RecordConstructorToView} from 'lowcoder-core'; +import _, { noop } from "lodash"; +import dayjs from "dayjs"; +import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BoolCodeControl, CustomRuleControl, RangeControl, StringControl, -} from '../../controls/codeControl'; -import {BoolControl} from '../../controls/boolControl'; +} from "../../controls/codeControl"; +import { BoolControl } from "../../controls/boolControl"; import { blurEvent, changeEvent, eventHandlerControl, focusEvent, -} from '../../controls/eventHandlerControl'; -import {LabelControl} from '../../controls/labelControl'; -import {stringExposingStateControl} from '../../controls/codeStateControl'; -import {UICompBuilder, withDefault} from '../../generators'; -import { - CommonNameConfig, - depsConfig, - withExposingConfigs, -} from '../../generators/withExposing'; -import { - formDataChildren, - FormDataPropertyView, -} from '../formComp/formDataConstants'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - DateTimeStyle, - DateTimeStyleType, - InputFieldStyle, - LabelStyle, -} from 'comps/controls/styleControlConstants'; -import {withMethodExposing} from '../../generators/withMethodExposing'; +} from "../../controls/eventHandlerControl"; +import { LabelControl } from "../../controls/labelControl"; +import { stringExposingStateControl } from "../../controls/codeStateControl"; +import { UICompBuilder, withDefault } from "../../generators"; +import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing"; +import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import { withMethodExposing } from "../../generators/withMethodExposing"; import { disabledPropertyView, formatPropertyView, @@ -47,35 +34,26 @@ import { minuteStepPropertyView, requiredPropertyView, SecondStepPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import { - DATE_FORMAT, - DATE_TIME_FORMAT, - DateParser, - PickerMode, -} from 'util/dateTimeUtils'; -import React, {ReactNode, useContext} from 'react'; -import {IconControl} from 'comps/controls/iconControl'; -import {hasIcon} from 'comps/utils'; -import {Section, sectionNames} from 'components/Section'; -import { - dateRefMethods, - disabledTime, - handleDateChange, -} from 'comps/comps/dateComp/dateCompUtil'; -import {DateUIView} from './dateUIView'; -import {useIsMobile} from 'util/hooks'; -import {RefControl} from 'comps/controls/refControl'; -import {CommonPickerMethods} from 'antd/es/date-picker/generatePicker/interface'; -import {DateRangeUIView} from 'comps/comps/dateComp/dateRangeUIView'; - -import {EditorContext} from 'comps/editorState'; +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils"; +import React, { ReactNode, useContext } from "react"; +import { IconControl } from "comps/controls/iconControl"; +import { hasIcon } from "comps/utils"; +import { Section, sectionNames } from "components/Section"; +import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil"; +import { DateUIView } from "./dateUIView"; +import { useIsMobile } from "util/hooks"; +import { RefControl } from "comps/controls/refControl"; +import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface"; +import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView"; + +import { EditorContext } from "comps/editorState"; const defaultStyle = { borderStyle: 'solid', borderWidth: '1px', -}; +} const EventOptions = [changeEvent, focusEvent, blurEvent] as const; @@ -112,29 +90,14 @@ const commonChildren = { }; type CommonChildrenType = RecordConstructorToComp; -const datePickerProps = ( - props: RecordConstructorToView -) => - _.pick( - props, - 'format', - 'showTime', - 'use12Hours', - 'hourStep', - 'minuteStep', - 'secondStep', - 'placeholder' - ); +const datePickerProps = (props: RecordConstructorToView) => + _.pick(props, "format", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder"); const timeFields = (children: CommonChildrenType, isMobile?: boolean) => [ - children.showTime.propertyView({label: trans('date.showTime')}), - !isMobile && - children.use12Hours.propertyView({label: trans('prop.use12Hours')}), + children.showTime.propertyView({ label: trans("date.showTime") }), + !isMobile && children.use12Hours.propertyView({ label: trans("prop.use12Hours") }), ]; -const commonAdvanceSection = ( - children: CommonChildrenType, - isDate: boolean = true -) => { +const commonAdvanceSection = (children: CommonChildrenType, isDate: boolean = true) => { if (isDate && children.showTime.getView()) { return (
@@ -146,63 +109,57 @@ const commonAdvanceSection = ( } }; -const dateValidationFields = ( - children: CommonChildrenType, - dateType: PickerMode = 'date' -) => { - if (dateType === 'date') { +const dateValidationFields = (children: CommonChildrenType, dateType: PickerMode = "date") => { + if (dateType === "date") { return [minDatePropertyView(children), maxDatePropertyView(children)]; } }; -const timeValidationFields = ( - children: CommonChildrenType, - dateType: PickerMode = 'date' -) => { - if (dateType === 'date' && children.showTime.getView()) { +const timeValidationFields = (children: CommonChildrenType, dateType: PickerMode = "date") => { + if (dateType === "date" && children.showTime.getView()) { return [minTimePropertyView(children), maxTimePropertyView(children)]; } }; function validate( props: RecordConstructorToView & { - value: {value: string}; + value: { value: string }; } ): { - validateStatus: 'success' | 'warning' | 'error'; + validateStatus: "success" | "warning" | "error"; help?: string; } { if (props.customRule) { - return {validateStatus: 'error', help: props.customRule}; + return { validateStatus: "error", help: props.customRule }; } const currentDateTime = dayjs(dayjs(props.value.value), DATE_TIME_FORMAT); if (props.required && !currentDateTime.isValid()) { - return {validateStatus: 'error', help: trans('prop.required')}; + return { validateStatus: "error", help: trans("prop.required") }; } - return {validateStatus: 'success'}; + return { validateStatus: "success" }; } const childrenMap = { - value: stringExposingStateControl('value'), + value: stringExposingStateControl("value"), ...commonChildren, ...formDataChildren, }; export type DateCompViewProps = Pick< RecordConstructorToView, - | 'disabled' - | 'format' - | 'minDate' - | 'maxDate' - | 'suffixIcon' - | 'showTime' - | 'use12Hours' - | 'hourStep' - | 'minuteStep' - | 'secondStep' - | 'viewRef' + | "disabled" + | "format" + | "minDate" + | "maxDate" + | "suffixIcon" + | "showTime" + | "use12Hours" + | "hourStep" + | "minuteStep" + | "secondStep" + | "viewRef" > & { onFocus: () => void; onBlur: () => void; @@ -221,8 +178,8 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { required: props.required, style: props.style, labelStyle: props.labelStyle, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, + inputFieldStyle:props.inputFieldStyle, + animationStyle:props.animationStyle, children: ( { handleDateChange( time && time.isValid() ? time.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : '', + : "", props.value.onChange, props.onEvent ); }} onPanelChange={() => { - handleDateChange('', props.value.onChange, noop); + handleDateChange("", props.value.onChange, noop); }} - onFocus={() => props.onEvent('focus')} - onBlur={() => props.onEvent('blur')} + onFocus={() => props.onEvent("focus")} + onBlur={() => props.onEvent("blur")} suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} /> ), @@ -260,23 +217,21 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { <>
{children.value.propertyView({ - label: trans('prop.defaultValue'), - placeholder: '2022-04-07 21:39:59', - tooltip: trans('date.formatTip'), + label: trans("prop.defaultValue"), + placeholder: "2022-04-07 21:39:59", + tooltip: trans("date.formatTip") })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( - <> -
- {requiredPropertyView(children)} - {dateValidationFields(children)} - {timeValidationFields(children)} - {children.customRule.propertyView({})} -
+ {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
+ {requiredPropertyView(children)} + {dateValidationFields(children)} + {timeValidationFields(children)} + {children.customRule.propertyView({})} +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -286,38 +241,24 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { )} {/*{commonAdvanceSection(children, children.dateType.value === "date")}*/} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && - children.label.getPropertyView()} + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- {formatPropertyView({children})} - {children.placeholder.propertyView({ - label: trans('date.placeholderText'), - })} + {formatPropertyView({ children })} + {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
)} - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( - <> -
- {timeFields(children, isMobile)} - {children.suffixIcon.propertyView({ - label: trans('button.suffixIcon'), - })} -
- + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
+ {timeFields(children, isMobile)} + {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} +
)} - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && - !isMobile && - commonAdvanceSection(children)} + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.style.getPropertyView()} @@ -341,8 +282,8 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { export const dateRangeControl = (function () { const childrenMap = { - start: stringExposingStateControl('start'), - end: stringExposingStateControl('end'), + start: stringExposingStateControl("start"), + end: stringExposingStateControl("end"), ...commonChildren, }; @@ -372,39 +313,35 @@ export const dateRangeControl = (function () { props.start.onChange( start && start.isValid() ? start.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : '' + : "" ); props.end.onChange( - end && end.isValid() - ? end.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : '' + end && end.isValid() ? end.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : "" ); - props.onEvent('change'); + props.onEvent("change"); }} onPanelChange={(_, mode) => { - mode[0] !== 'date' && - handleDateChange('', props.start.onChange, noop); - mode[1] !== 'date' && handleDateChange('', props.end.onChange, noop); + mode[0] !== "date" && handleDateChange("", props.start.onChange, noop); + mode[1] !== "date" && handleDateChange("", props.end.onChange, noop); }} - onFocus={() => props.onEvent('focus')} - onBlur={() => props.onEvent('blur')} + onFocus={() => props.onEvent("focus")} + onBlur={() => props.onEvent("blur")} suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} /> ); - const startResult = validate({...props, value: props.start}); - const endResult = validate({...props, value: props.end}); + const startResult = validate({ ...props, value: props.start }); + const endResult = validate({ ...props, value: props.end }); return props.label({ required: props.required, style: props.style, - labelStyle: props.labelStyle, + labelStyle:props.labelStyle, children: children, - inputFieldStyle: props.inputFieldStyle, - animationStyle: props.animationStyle, - ...(startResult.validateStatus !== 'success' + inputFieldStyle:props.inputFieldStyle, + ...(startResult.validateStatus !== "success" ? startResult - : endResult.validateStatus !== 'success' + : endResult.validateStatus !== "success" ? endResult : startResult), }); @@ -415,26 +352,24 @@ export const dateRangeControl = (function () { <>
{children.start.propertyView({ - label: trans('date.start'), - placeholder: '2022-04-07 21:39:59', - tooltip: trans('date.formatTip'), + label: trans("date.start"), + placeholder: "2022-04-07 21:39:59", + tooltip: trans("date.formatTip"), })} {children.end.propertyView({ - label: trans('date.end'), - placeholder: '2022-04-07 21:39:59', - tooltip: trans('date.formatTip'), + label: trans("date.end"), + placeholder: "2022-04-07 21:39:59", + tooltip: trans("date.formatTip"), })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( - <> -
- {requiredPropertyView(children)} - {dateValidationFields(children)} - {timeValidationFields(children)} - {children.customRule.propertyView({})} -
+ {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
+ {requiredPropertyView(children)} + {dateValidationFields(children)} + {timeValidationFields(children)} + {children.customRule.propertyView({})} +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -443,37 +378,24 @@ export const dateRangeControl = (function () { )} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && - children.label.getPropertyView()} + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- {formatPropertyView({children})} - {children.placeholder.propertyView({ - label: trans('date.placeholderText'), - })} + {formatPropertyView({ children })} + {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
)} - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( - <> -
- {timeFields(children, isMobile)} - {children.suffixIcon.propertyView({ - label: trans('button.suffixIcon'), - })} -
- + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
+ {timeFields(children, isMobile)} + {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} +
)} - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && - commonAdvanceSection(children)} + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.style.getPropertyView()} @@ -484,11 +406,9 @@ export const dateRangeControl = (function () {
{children.inputFieldStyle.getPropertyView()}
-
- {children.animationStyle.getPropertyView()} -
)} + ); }) @@ -497,100 +417,86 @@ export const dateRangeControl = (function () { export const DatePickerComp = withExposingConfigs(datePickerControl, [ depsConfig({ - name: 'value', - desc: trans('export.datePickerValueDesc'), - depKeys: ['value', 'showTime'], + name: "value", + desc: trans("export.datePickerValueDesc"), + depKeys: ["value", "showTime"], func: (input) => { const mom = dayjs(input.value, DateParser); - return mom.isValid() - ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : ''; + return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : ""; }, }), depsConfig({ - name: 'formattedValue', - desc: trans('export.datePickerFormattedValueDesc'), - depKeys: ['value', 'format'], + name: "formattedValue", + desc: trans("export.datePickerFormattedValueDesc"), + depKeys: ["value", "format"], func: (input) => { const mom = dayjs(input.value, DateParser); - return mom.isValid() ? mom.format(input.format) : ''; + return mom.isValid() ? mom.format(input.format) : ""; }, }), depsConfig({ - name: 'timestamp', - desc: trans('export.datePickerTimestampDesc'), - depKeys: ['value'], + name: "timestamp", + desc: trans("export.datePickerTimestampDesc"), + depKeys: ["value"], func: (input) => { const mom = dayjs(input.value, DateParser); - return mom.isValid() ? mom.unix() : ''; + return mom.isValid() ? mom.unix() : ""; }, }), depsConfig({ - name: 'invalid', - desc: trans('export.invalidDesc'), - depKeys: [ - 'value', - 'required', - 'minTime', - 'maxTime', - 'minDate', - 'maxDate', - 'customRule', - ], + name: "invalid", + desc: trans("export.invalidDesc"), + depKeys: ["value", "required", "minTime", "maxTime", "minDate", "maxDate", "customRule"], func: (input) => validate({ ...input, - value: {value: input.value}, - } as any).validateStatus !== 'success', + value: { value: input.value }, + } as any).validateStatus !== "success", }), ...CommonNameConfig, ]); export let DateRangeComp = withExposingConfigs(dateRangeControl, [ depsConfig({ - name: 'start', - desc: trans('export.dateRangeStartDesc'), - depKeys: ['start', 'showTime'], + name: "start", + desc: trans("export.dateRangeStartDesc"), + depKeys: ["start", "showTime"], func: (input) => { const mom = dayjs(input.start, DateParser); - return mom.isValid() - ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : ''; + return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : ""; }, }), depsConfig({ - name: 'end', - desc: trans('export.dateRangeEndDesc'), - depKeys: ['end', 'showTime'], + name: "end", + desc: trans("export.dateRangeEndDesc"), + depKeys: ["end", "showTime"], func: (input) => { const mom = dayjs(input.end, DateParser); - return mom.isValid() - ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : ''; + return mom.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : ""; }, }), depsConfig({ - name: 'startTimestamp', - desc: trans('export.dateRangeStartTimestampDesc'), - depKeys: ['start'], + name: "startTimestamp", + desc: trans("export.dateRangeStartTimestampDesc"), + depKeys: ["start"], func: (input) => { const mom = dayjs(input.start, DateParser); - return mom.isValid() ? mom.unix() : ''; + return mom.isValid() ? mom.unix() : ""; }, }), depsConfig({ - name: 'endTimestamp', - desc: trans('export.dateRangeEndTimestampDesc'), - depKeys: ['end'], + name: "endTimestamp", + desc: trans("export.dateRangeEndTimestampDesc"), + depKeys: ["end"], func: (input) => { const mom = dayjs(input.end, DateParser); - return mom.isValid() ? mom.unix() : ''; + return mom.isValid() ? mom.unix() : ""; }, }), depsConfig({ - name: 'formattedValue', - desc: trans('export.dateRangeFormattedValueDesc'), - depKeys: ['start', 'end', 'format'], + name: "formattedValue", + desc: trans("export.dateRangeFormattedValueDesc"), + depKeys: ["start", "end", "format"], func: (input) => { const start = dayjs(input.start, DateParser); const end = dayjs(input.end, DateParser); @@ -599,49 +505,40 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [ end.isValid() && end.format(input.format), ] .filter((item) => item) - .join(' - '); + .join(" - "); }, }), depsConfig({ - name: 'formattedStartValue', - desc: trans('export.dateRangeFormattedStartValueDesc'), - depKeys: ['start', 'format'], + name: "formattedStartValue", + desc: trans("export.dateRangeFormattedStartValueDesc"), + depKeys: ["start", "format"], func: (input) => { const start = dayjs(input.start, DateParser); return start.isValid() && start.format(input.format); }, }), depsConfig({ - name: 'formattedEndValue', - desc: trans('export.dateRangeFormattedEndValueDesc'), - depKeys: ['end', 'format'], + name: "formattedEndValue", + desc: trans("export.dateRangeFormattedEndValueDesc"), + depKeys: ["end", "format"], func: (input) => { const end = dayjs(input.end, DateParser); return end.isValid() && end.format(input.format); }, }), depsConfig({ - name: 'invalid', - desc: trans('export.invalidDesc'), - depKeys: [ - 'start', - 'end', - 'required', - 'minTime', - 'maxTime', - 'minDate', - 'maxDate', - 'customRule', - ], + name: "invalid", + desc: trans("export.invalidDesc"), + depKeys: ["start", "end", "required", "minTime", "maxTime", "minDate", "maxDate", "customRule"], func: (input) => validate({ ...input, - value: {value: input.start}, - }).validateStatus !== 'success' || + value: { value: input.start }, + }).validateStatus !== "success" || validate({ ...input, - value: {value: input.end}, - }).validateStatus !== 'success', + value: { value: input.end }, + }).validateStatus !== "success", }), ...CommonNameConfig, ]); @@ -650,19 +547,19 @@ DateRangeComp = withMethodExposing(DateRangeComp, [ ...dateRefMethods, { method: { - name: 'clearAll', - description: trans('date.clearAllDesc'), + name: "clearAll", + description: trans("date.clearAllDesc"), params: [], }, execute: (comp) => { - comp.children.start.getView().onChange(''); - comp.children.end.getView().onChange(''); + comp.children.start.getView().onChange(""); + comp.children.end.getView().onChange(""); }, }, { method: { - name: 'resetAll', - description: trans('date.resetAllDesc'), + name: "resetAll", + description: trans("date.resetAllDesc"), params: [], }, execute: (comp) => { From bee0f23ab3a19e7c66ec0a0ef8ca6aa1fbba90bb Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:24:48 +0500 Subject: [PATCH 122/155] formating removed-97 --- .../lowcoder/src/comps/comps/dateComp/dateComp.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 5622adbb7..cbe85cd22 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -67,7 +67,7 @@ const validationChildren = { }; const commonChildren = { label: LabelControl, - placeholder: withDefault(StringControl, trans('date.placeholder')), + placeholder: withDefault(StringControl, trans("date.placeholder")), format: StringControl, disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), @@ -78,12 +78,8 @@ const commonChildren = { secondStep: RangeControl.closed(1, 60, 1), style: styleControl(InputFieldStyle), animationStyle: styleControl(AnimationStyle), - labelStyle: styleControl( - LabelStyle.filter( - (style) => ['accent', 'validate'].includes(style.name) === false - ) - ), - suffixIcon: withDefault(IconControl, '/icon:regular/calendar'), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), + suffixIcon: withDefault(IconControl, "/icon:regular/calendar"), ...validationChildren, viewRef: RefControl, inputFieldStyle: withDefault(styleControl(DateTimeStyle), defaultStyle), From 8293a18debcf3f6c624b29eaee42331744419b63 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:25:38 +0500 Subject: [PATCH 123/155] formating removed-98 --- .../src/comps/comps/formComp/formComp.tsx | 251 ++++++++---------- 1 file changed, 108 insertions(+), 143 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx index 2161d1943..b6fc439b1 100644 --- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx @@ -3,12 +3,12 @@ import { depsConfig, NameConfig, withExposingConfigs, -} from 'comps/generators/withExposing'; -import {Section, sectionNames} from 'lowcoder-design'; -import {genQueryId} from 'comps/utils/idGenerator'; -import {CompNameContext, EditorContext, EditorState} from 'comps/editorState'; -import {withMethodExposing} from 'comps/generators/withMethodExposing'; -import {ContainerPlaceholder} from 'lowcoder-design'; +} from "comps/generators/withExposing"; +import { Section, sectionNames } from "lowcoder-design"; +import { genQueryId } from "comps/utils/idGenerator"; +import { CompNameContext, EditorContext, EditorState } from "comps/editorState"; +import { withMethodExposing } from "comps/generators/withMethodExposing"; +import { ContainerPlaceholder } from "lowcoder-design"; import { CompAction, CompActionTypes, @@ -20,48 +20,45 @@ import { RecordConstructorToView, ValueAndMsg, wrapChildAction, -} from 'lowcoder-core'; -import {NameGenerator} from 'comps/utils'; -import _ from 'lodash'; -import {CreateData, CreateForm} from './createForm'; -import {defaultLayout, GridItemComp} from '../gridItemComp'; -import {ReactNode, useContext} from 'react'; -import {pushAction} from 'comps/generators/list'; -import {FullColumnInfo} from './generate/dataSourceCommon'; -import { - eventHandlerControl, - submitEvent, -} from 'comps/controls/eventHandlerControl'; +} from "lowcoder-core"; +import { NameGenerator } from "comps/utils"; +import _ from "lodash"; +import { CreateData, CreateForm } from "./createForm"; +import { defaultLayout, GridItemComp } from "../gridItemComp"; +import { ReactNode, useContext } from "react"; +import { pushAction } from "comps/generators/list"; +import { FullColumnInfo } from "./generate/dataSourceCommon"; +import { eventHandlerControl, submitEvent } from "comps/controls/eventHandlerControl"; import { simpleContainerAddAction, toSimpleContainerData, -} from '../containerBase/simpleContainerComp'; +} from "../containerBase/simpleContainerComp"; import { ContainerCompBuilder, TriContainerViewProps, -} from '../triContainerComp/triContainerCompBuilder'; -import {TriContainer} from '../triContainerComp/triContainer'; -import {traverseCompTree} from '../containerBase/utils'; -import {IForm} from './formDataConstants'; -import {default as Spin} from 'antd/lib/spin'; -import {BoolControl} from 'comps/controls/boolControl'; -import {BottomResTypeEnum} from 'types/bottomRes'; -import {BoolCodeControl, JSONObjectControl} from 'comps/controls/codeControl'; -import {JSONObject} from 'util/jsonTypes'; -import {EvalParamType} from 'comps/controls/actionSelector/executeCompTypes'; -import {LayoutItem} from 'layout/utils'; +} from "../triContainerComp/triContainerCompBuilder"; +import { TriContainer } from "../triContainerComp/triContainer"; +import { traverseCompTree } from "../containerBase/utils"; +import { IForm } from "./formDataConstants"; +import { default as Spin } from "antd/lib/spin"; +import { BoolControl } from "comps/controls/boolControl"; +import { BottomResTypeEnum } from "types/bottomRes"; +import { BoolCodeControl, JSONObjectControl } from "comps/controls/codeControl"; +import { JSONObject } from "util/jsonTypes"; +import { EvalParamType } from "comps/controls/actionSelector/executeCompTypes"; +import { LayoutItem } from "layout/utils"; import { disabledPropertyView, hiddenPropertyView, loadingPropertyView, -} from 'comps/utils/propertyUtils'; -import {trans} from 'i18n'; -import log from 'loglevel'; -import {DisabledContext} from 'comps/generators/uiCompBuilder'; -import {default as LoadingOutlined} from '@ant-design/icons/LoadingOutlined'; -import {messageInstance} from 'lowcoder-design/src/components/GlobalInstances'; -import {styled} from 'styled-components'; -import {AnimationStyle, styleControl} from '@lowcoder-ee/index.sdk'; +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import log from "loglevel"; +import { DisabledContext } from "comps/generators/uiCompBuilder"; +import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined"; +import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"; +import { styled } from "styled-components"; +import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk"; const FormWrapper = styled.div` height: 100%; @@ -82,22 +79,18 @@ const childrenMap = { disableSubmit: BoolCodeControl, loading: BoolCodeControl, onEvent: eventHandlerControl(eventOptions), - animationStyle: styleControl(AnimationStyle), + animationStyle:styleControl(AnimationStyle) }; type FormProps = TriContainerViewProps & - RecordConstructorToView & {dispatch: DispatchType}; + RecordConstructorToView & { dispatch: DispatchType }; -function dispatchAsyncAddCompsAction( - props: FormProps, - columnInfos: FullColumnInfo[] -) { - const {dispatch, layout, positionParams} = - props.container.body[0].children.view.getView(); +function dispatchAsyncAddCompsAction(props: FormProps, columnInfos: FullColumnInfo[]) { + const { dispatch, layout, positionParams } = props.container.body[0].children.view.getView(); let y = 0; - const infos = columnInfos.map(({column, compName}) => { + const infos = columnInfos.map(({ column, compName }) => { const layoutItem: LayoutItem = { - i: '', + i: "", h: defaultLayout(column.comp.type).h, w: positionParams.cols, x: 0, @@ -111,7 +104,7 @@ function dispatchAsyncAddCompsAction( comp: { ...column.comp.compInitData, formDataKey: column.name, - label: {text: column.label}, + label: { text: column.label }, required: column.required, }, }, @@ -123,10 +116,10 @@ function dispatchAsyncAddCompsAction( function onEventData(queryName: string) { return { - name: 'submit', + name: "submit", handler: { - compType: 'executeQuery', - comp: {queryName: queryName}, + compType: "executeQuery", + comp: { queryName: queryName }, }, }; } @@ -137,30 +130,21 @@ function onCreate( editorState: EditorState, formName: string ): string { - const {dispatch} = props; + const { dispatch } = props; const nameGenerator = editorState.getNameGenerator(); const infos = data.columns.map((column) => { - const compName = nameGenerator.genItemName( - 'form' + _.upperFirst(column.comp.type) - ); - return {column, compName}; + const compName = nameGenerator.genItemName("form" + _.upperFirst(column.comp.type)); + return { column, compName }; }); dispatchAsyncAddCompsAction(props, infos); const tableName = data.tableName; - const lastName = tableName.substring(tableName.lastIndexOf('.') + 1); - const queryNamePrefix = - formName + 'SubmitTo' + lastName.split('_').map(_.upperFirst).join(''); + const lastName = tableName.substring(tableName.lastIndexOf(".") + 1); + const queryNamePrefix = formName + "SubmitTo" + lastName.split("_").map(_.upperFirst).join(""); const queryName = nameGenerator.genItemName(queryNamePrefix); - dispatch( - deferAction(wrapChildAction('onEvent', pushAction(onEventData(queryName)))) - ); + dispatch(deferAction(wrapChildAction("onEvent", pushAction(onEventData(queryName))))); - const queryData = data.dataSourceTypeConfig.getQueryInitData( - formName, - tableName, - infos - ); + const queryData = data.dataSourceTypeConfig.getQueryInitData(formName, tableName, infos); const queriesComp = editorState.getQueriesComp(); queriesComp.dispatch( deferAction( @@ -169,14 +153,14 @@ function onCreate( id: genQueryId(), name: queryName, datasourceId: data.dataSourceId, - triggerType: 'manual', - notification: {showSuccess: true, showFail: true}, + triggerType: "manual", + notification: { showSuccess: true, showFail: true }, }) ) ); editorState.setSelectedBottomRes(queryName, BottomResTypeEnum.Query); - return ''; + return ""; } const BodyPlaceholder = (props: FormProps) => { @@ -184,7 +168,7 @@ const BodyPlaceholder = (props: FormProps) => { const formName = useContext(CompNameContext); return ( - {trans('formComp.containerPlaceholder')} + {trans("formComp.containerPlaceholder")}
@@ -209,9 +193,7 @@ const FormBaseComp = (function () { > - } + hintPlaceholder={} /> @@ -295,19 +277,17 @@ const FormBaseComp = (function () { type FormDataType = ConstructorToDataType; type SetDataAction = { - type: 'setData'; + type: "setData"; initialData: JSONObject; }; let FormTmpComp = class extends FormBaseComp implements IForm { onEventPropertyView(title: ReactNode) { - return this.children.onEvent.propertyView({title}); + return this.children.onEvent.propertyView({ title }); } traverseFormItems(consumer: (item: GridItemComp) => boolean) { return traverseCompTree(this.getCompTree(), (item) => { - return item.children.comp.children.formDataKey - ? consumer(item as GridItemComp) - : true; + return item.children.comp.children.formDataKey ? consumer(item as GridItemComp) : true; }); } validateFormItems() { @@ -338,9 +318,9 @@ let FormTmpComp = class extends FormBaseComp implements IForm { } const compType = item.children.compType.getView(); log.warn( - trans('form') + + trans("form") + compType + - trans('formComp.notSupportMethod') + + trans("formComp.notSupportMethod") + searchMethods.map((m) => m.name) ); return true; @@ -349,24 +329,19 @@ let FormTmpComp = class extends FormBaseComp implements IForm { } setData(data: JSONObject, initialData?: JSONObject) { // For the properties, first find in data, then initialData, subcomponent default value (resetValue), empty value (clearValue) - const newData = { - ...(initialData ?? this.children.initialData.getView()), - ...data, - }; + const newData = { ...(initialData ?? this.children.initialData.getView()), ...data }; return this.runMethodOfItems( { - name: 'setValue', + name: "setValue", getParams: (t) => { // use component name when formDataKey is empty - const key = - t.children.comp.children.formDataKey?.getView() || - t.children.name.getView(); + const key = t.children.comp.children.formDataKey?.getView() || t.children.name.getView(); const value = newData[key]; return value !== undefined ? [value as EvalParamType] : undefined; }, }, - {name: 'resetValue'}, - {name: 'clearValue'} + { name: "resetValue" }, + { name: "clearValue" } ); } reset() { @@ -374,10 +349,10 @@ let FormTmpComp = class extends FormBaseComp implements IForm { } submit() { if (this.disableSubmit()) { - return Promise.reject('disableSubmit'); + return Promise.reject("disableSubmit"); } if (this.validateFormItems()) { - const promise = this.children.onEvent.getView()('submit'); + const promise = this.children.onEvent.getView()("submit"); return promise.then(() => { if (this.children.resetAfterSubmit.getView()) { return this.reset(); @@ -385,14 +360,12 @@ let FormTmpComp = class extends FormBaseComp implements IForm { return Promise.resolve(); }); } else { - messageInstance.error(trans('formComp.notValidForm')); - return Promise.reject('formComp.notValidForm'); + messageInstance.error(trans("formComp.notValidForm")); + return Promise.reject("formComp.notValidForm"); } } disableSubmit() { - return ( - this.children.disabled.getView() || this.children.disableSubmit.getView() - ); + return this.children.disabled.getView() || this.children.disableSubmit.getView(); } override reduce(action: CompAction): this { switch (action.type) { @@ -405,10 +378,8 @@ let FormTmpComp = class extends FormBaseComp implements IForm { this.dispatch( customAction( { - type: 'setData', - initialData: - (action.value['initialData'] as ValueAndMsg) - .value || {}, + type: "setData", + initialData: (action.value["initialData"] as ValueAndMsg).value || {}, }, false ) @@ -418,7 +389,7 @@ let FormTmpComp = class extends FormBaseComp implements IForm { return ret; } case CompActionTypes.CUSTOM: - if (isMyCustomAction(action, 'setData')) { + if (isMyCustomAction(action, "setData")) { this.setData({}, action.value.initialData); return this; } @@ -430,41 +401,41 @@ let FormTmpComp = class extends FormBaseComp implements IForm { FormTmpComp = withMethodExposing(FormTmpComp, [ { method: { - name: 'submit', - description: trans('export.submitDesc'), + name: "submit", + description: trans("export.submitDesc"), params: [], }, execute: (comp, values) => comp.submit(), }, { method: { - name: 'reset', - description: trans('formComp.resetDesc'), + name: "reset", + description: trans("formComp.resetDesc"), params: [], }, execute: (comp, values) => comp.reset(), }, { method: { - name: 'clear', - description: trans('formComp.clearDesc'), + name: "clear", + description: trans("formComp.clearDesc"), params: [], }, - execute: (comp, values) => comp.runMethodOfItems({name: 'clearValue'}), + execute: (comp, values) => comp.runMethodOfItems({ name: "clearValue" }), }, { method: { - name: 'setData', - description: trans('formComp.setDataDesc'), - params: [{name: 'data', type: 'JSON'}], + name: "setData", + description: trans("formComp.setDataDesc"), + params: [{ name: "data", type: "JSON" }], }, execute: (comp, values) => { if (values.length !== 1) { - return Promise.reject(trans('formComp.valuesLengthError')); + return Promise.reject(trans("formComp.valuesLengthError")); } const data = values[0]; - if (typeof data !== 'object' || data === null || Array.isArray(data)) { - return Promise.reject(trans('formComp.valueTypeError')); + if (typeof data !== "object" || data === null || Array.isArray(data)) { + return Promise.reject(trans("formComp.valueTypeError")); } return comp.setData(data); }, @@ -473,34 +444,31 @@ FormTmpComp = withMethodExposing(FormTmpComp, [ export const FormComp = withExposingConfigs(FormTmpComp, [ ...CommonNameConfig, - new NameConfig('loading', trans('formComp.loadingDesc')), + new NameConfig("loading", trans("formComp.loadingDesc")), depsConfig({ - name: 'data', - desc: trans('formComp.dataDesc'), - depKeys: ['container'], + name: "data", + desc: trans("formComp.dataDesc"), + depKeys: ["container"], func: (input) => { const data: Record = {}; Object.entries(input.container).forEach(([name, value]) => { const exposingValues = value as any; - if (exposingValues?.hasOwnProperty('formDataKey')) { + if (exposingValues?.hasOwnProperty("formDataKey")) { // use component name when formDataKey is empty - data[exposingValues['formDataKey'] || name] = exposingValues['value']; + data[exposingValues["formDataKey"] || name] = exposingValues["value"]; } }); return data; }, }), depsConfig({ - name: 'invalid', - desc: trans('export.invalidDesc'), - depKeys: ['container'], + name: "invalid", + desc: trans("export.invalidDesc"), + depKeys: ["container"], func: (input) => { for (const [, value] of Object.entries(input.container)) { const exposingValues = value as any; - if ( - exposingValues?.hasOwnProperty('formDataKey') && - exposingValues['invalid'] - ) { + if (exposingValues?.hasOwnProperty("formDataKey") && exposingValues["invalid"]) { return true; } } @@ -509,23 +477,20 @@ export const FormComp = withExposingConfigs(FormTmpComp, [ }), ]); -export function defaultFormData( - compName: string, - nameGenerator: NameGenerator -): FormDataType { +export function defaultFormData(compName: string, nameGenerator: NameGenerator): FormDataType { return { container: { header: toSimpleContainerData([ { item: { - compType: 'text', - name: nameGenerator.genItemName('formTitle'), + compType: "text", + name: nameGenerator.genItemName("formTitle"), comp: { - text: '### ' + trans('formComp.formTitle'), + text: "### " + trans("formComp.formTitle"), }, }, layoutItem: { - i: '', + i: "", h: 5, w: 24, x: 0, @@ -536,16 +501,16 @@ export function defaultFormData( footer: toSimpleContainerData([ { item: { - compType: 'button', - name: nameGenerator.genItemName('formButton'), + compType: "button", + name: nameGenerator.genItemName("formButton"), comp: { - text: trans('button.submit'), - type: 'submit', + text: trans("button.submit"), + type: "submit", form: compName, }, }, layoutItem: { - i: '', + i: "", h: 5, w: 10, x: 14, From 17072d36bc1eb74981493462e8ab9c8b0be17c93 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:28:47 +0500 Subject: [PATCH 124/155] formating removed-99 --- .../src/comps/comps/formComp/formComp.tsx | 36 +++++++------------ 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx index b6fc439b1..b472d2f82 100644 --- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx @@ -204,28 +204,21 @@ const FormBaseComp = (function () { return ( <>
- {children.resetAfterSubmit.propertyView({ - label: trans('formComp.resetAfterSubmit'), - })} + {children.resetAfterSubmit.propertyView({ label: trans("formComp.resetAfterSubmit") })}
- {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( - <> -
+ {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} - {children.disableSubmit.propertyView({ - label: trans('formComp.disableSubmit'), - })} + {children.disableSubmit.propertyView({ label: trans("formComp.disableSubmit") })} {hiddenPropertyView(children)} {loadingPropertyView(children)}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.container.getPropertyView()} @@ -233,17 +226,13 @@ const FormBaseComp = (function () { )} - {(useContext(EditorContext).editorModeStatus === 'logic' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
- {children.initialData.propertyView({ - label: trans('formComp.initialData'), - })} + {children.initialData.propertyView({ label: trans("formComp.initialData") })}
)} - {(useContext(EditorContext).editorModeStatus === 'layout' || - useContext(EditorContext).editorModeStatus === 'both') && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.container.stylePropertyView()} @@ -252,8 +241,8 @@ const FormBaseComp = (function () { {children.animationStyle.getPropertyView()}
{children.container.children.showHeader.getView() && ( -
- {children.container.headerStylePropertyView()} +
+ { children.container.headerStylePropertyView() }
)} {children.container.children.showBody.getView() && ( @@ -262,12 +251,13 @@ const FormBaseComp = (function () {
)} {children.container.children.showFooter.getView() && ( -
- {children.container.footerStylePropertyView()} +
+ { children.container.footerStylePropertyView() }
)} )} + ); }) From 29bedc868a4f325a9b6d9145d0f4f9d00050d782 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:29:47 +0500 Subject: [PATCH 125/155] formating removed-100 --- .../lowcoder/src/comps/comps/formComp/formComp.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx index b472d2f82..6d959b1e3 100644 --- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx @@ -218,7 +218,7 @@ const FormBaseComp = (function () { )} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.container.getPropertyView()} @@ -246,8 +246,8 @@ const FormBaseComp = (function () {
)} {children.container.children.showBody.getView() && ( -
- {children.container.bodyStylePropertyView()} +
+ { children.container.bodyStylePropertyView() }
)} {children.container.children.showFooter.getView() && ( @@ -257,7 +257,7 @@ const FormBaseComp = (function () { )} )} - + ); }) From 516151e1889a3c3d41bb8fbd3410e5798fbdb778 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:30:39 +0500 Subject: [PATCH 126/155] formating removed-101 --- .../packages/lowcoder/src/comps/comps/formComp/formComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx index 6d959b1e3..3b231b4b7 100644 --- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx @@ -246,7 +246,7 @@ const FormBaseComp = (function () {
)} {children.container.children.showBody.getView() && ( -
+
{ children.container.bodyStylePropertyView() }
)} @@ -257,7 +257,7 @@ const FormBaseComp = (function () { )} )} - + ); }) From c17a1f370af0afc0c5fa310ac07d4997a46edf31 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Sun, 19 May 2024 03:31:29 +0500 Subject: [PATCH 127/155] formating removed-102 --- .../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 237 ++++++++---------- 1 file changed, 101 insertions(+), 136 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx index 98a3b74cc..7e4a0585a 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx @@ -1,46 +1,30 @@ -import {withTheme} from '@rjsf/core'; -import type { - RJSFValidationError, - ErrorListProps, - UISchemaSubmitButtonOptions, -} from '@rjsf/utils'; -import validator from '@rjsf/validator-ajv8'; +import { withTheme } from '@rjsf/core'; +import type { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils"; +import validator from "@rjsf/validator-ajv8"; // import Ajv from "@rjsf/validator-ajv8"; -import {default as Button} from 'antd/es/button'; -import {BoolControl} from 'comps/controls/boolControl'; -import {jsonObjectExposingStateControl} from 'comps/controls/codeStateControl'; -import {styleControl} from 'comps/controls/styleControl'; -import { - AnimationStyle, - AnimationStyleType, - JsonSchemaFormStyle, - type JsonSchemaFormStyleType, -} from 'comps/controls/styleControlConstants'; -import { - depsConfig, - NameConfigHidden, - withExposingConfigs, -} from 'comps/generators/withExposing'; -import {withMethodExposing} from 'comps/generators/withMethodExposing'; -import type {ValueFromOption} from 'lowcoder-design'; -import {i18nObjs, trans} from 'i18n'; -import type {JSONSchema7} from 'json-schema'; -import styled from 'styled-components'; -import {toBoolean, toNumber, toString} from 'util/convertUtils'; -import {Section, sectionNames} from 'lowcoder-design'; -import {jsonObjectControl} from '../../controls/codeControl'; -import { - eventHandlerControl, - submitEvent, -} from '../../controls/eventHandlerControl'; -import {UICompBuilder} from '../../generators'; -import DateWidget from './dateWidget'; -import ErrorBoundary from './errorBoundary'; -import {Theme} from '@rjsf/antd'; -import {hiddenPropertyView} from 'comps/utils/propertyUtils'; +import { default as Button } from "antd/es/button"; +import { BoolControl } from "comps/controls/boolControl"; +import { jsonObjectExposingStateControl } from "comps/controls/codeStateControl"; +import { styleControl } from "comps/controls/styleControl"; +import { AnimationStyle, AnimationStyleType, JsonSchemaFormStyle, type JsonSchemaFormStyleType } from "comps/controls/styleControlConstants"; +import { depsConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; +import { withMethodExposing } from "comps/generators/withMethodExposing"; +import type { ValueFromOption } from "lowcoder-design"; +import { i18nObjs, trans } from "i18n"; +import type { JSONSchema7 } from "json-schema"; +import styled from "styled-components"; +import { toBoolean, toNumber, toString } from "util/convertUtils"; +import { Section, sectionNames } from "lowcoder-design"; +import { jsonObjectControl } from "../../controls/codeControl"; +import { eventHandlerControl, submitEvent } from "../../controls/eventHandlerControl"; +import { UICompBuilder } from "../../generators"; +import DateWidget from "./dateWidget"; +import ErrorBoundary from "./errorBoundary"; +import { Theme } from "@rjsf/antd"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; -import {useContext} from 'react'; -import {EditorContext} from 'comps/editorState'; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; Theme.widgets.DateWidget = DateWidget(false); Theme.widgets.DateTimeWidget = DateWidget(true); @@ -97,24 +81,21 @@ function convertData(schema?: JSONSchema7, data?: any) { return data; } // fix required invalidation problem - if ( - schema.type !== 'object' && - (data === undefined || data === null || data === '') - ) { + if (schema.type !== "object" && (data === undefined || data === null || data === "")) { return undefined; } switch (schema.type) { - case 'string': + case "string": return toString(data); - case 'number': + case "number": return toNumber(data); - case 'integer': + case "integer": return Math.trunc(toNumber(data)); - case 'boolean': + case "boolean": return toBoolean(data); - case 'null': + case "null": return null; - case 'object': { + case "object": { const properties = schema.properties; if (!properties) { return data; @@ -122,10 +103,7 @@ function convertData(schema?: JSONSchema7, data?: any) { let newData: Record = {}; Object.entries(properties).forEach(([key, definition]) => { const value = data ? data[key] : undefined; - newData[key] = - typeof definition === 'object' - ? convertData(definition, value) - : value; + newData[key] = typeof definition === "object" ? convertData(definition, value) : value; }); return newData; } @@ -140,34 +118,28 @@ function convertData(schema?: JSONSchema7, data?: any) { // JSON schema refer to https://json-schema.org/understanding-json-schema/reference/ function getErrorMessage(error: RJSFValidationError): string { switch (error.name) { - case 'required': - return trans('jsonSchemaForm.required'); - case 'maximum': - return trans('jsonSchemaForm.maximum', {value: error.params.limit}); - case 'minimum': - return trans('jsonSchemaForm.minimum', {value: error.params.limit}); - case 'exclusiveMaximum': - return trans('jsonSchemaForm.exclusiveMaximum', { - value: error.params.limit, - }); - case 'exclusiveMinimum': - return trans('jsonSchemaForm.exclusiveMinimum', { - value: error.params.limit, - }); - case 'multipleOf': - return trans('jsonSchemaForm.multipleOf', { - value: error.params.multipleOf, - }); - case 'minLength': - return trans('jsonSchemaForm.minLength', {value: error.params.limit}); - case 'maxLength': - return trans('jsonSchemaForm.maxLength', {value: error.params.limit}); - case 'pattern': - return trans('jsonSchemaForm.pattern', {value: error.params.pattern}); - case 'format': - return trans('jsonSchemaForm.format', {value: error.params.format}); + case "required": + return trans("jsonSchemaForm.required"); + case "maximum": + return trans("jsonSchemaForm.maximum", { value: error.params.limit }); + case "minimum": + return trans("jsonSchemaForm.minimum", { value: error.params.limit }); + case "exclusiveMaximum": + return trans("jsonSchemaForm.exclusiveMaximum", { value: error.params.limit }); + case "exclusiveMinimum": + return trans("jsonSchemaForm.exclusiveMinimum", { value: error.params.limit }); + case "multipleOf": + return trans("jsonSchemaForm.multipleOf", { value: error.params.multipleOf }); + case "minLength": + return trans("jsonSchemaForm.minLength", { value: error.params.limit }); + case "maxLength": + return trans("jsonSchemaForm.maxLength", { value: error.params.limit }); + case "pattern": + return trans("jsonSchemaForm.pattern", { value: error.params.pattern }); + case "format": + return trans("jsonSchemaForm.format", { value: error.params.format }); } - return ''; + return ""; } function transformErrors(errors: RJSFValidationError[]): RJSFValidationError[] { @@ -177,7 +149,7 @@ function transformErrors(errors: RJSFValidationError[]): RJSFValidationError[] { // Error message displayed below the comp (will not be displayed when "ui:help" is set in the UI schema) error.message = message; // Errors displayed in the error list, not displayed when empty - error.stack = ''; + error.stack = ""; } return error; }); @@ -190,7 +162,7 @@ function ErrorList(props: ErrorListProps) { return <>; } return ( -
+